/* ============================================
 * VARIABLES & FONTS
 * ============================================
 */
:root {
  /* Typography */
  --font-title: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', Arial, sans-serif;

  /* Theme Colors: Pastel Brutalism/Neobrutalist + Biomorphics */
  --color-bg-main: #f5f8fc;
  --color-bg-alt: #eaf3fb;
  --color-bg-card: #f7fbf9;
  --color-bg-gradient1: linear-gradient(120deg,#E0E7FF 30%,#A0DDFF 100%);
  --color-bg-gradient2: linear-gradient(145deg,#FFD7ED 40%,#A0FFDD 100%);
  --color-bg-gradient3: linear-gradient(103deg,#FFD7ED 50%,#EAF3FB 100%);
  --color-bg-footer: linear-gradient(88deg,#E0E7FF 30%, #EAF3FB 100%);
  --color-bg-dark: #1d1f27;
  --color-bg-glass: rgba(248,250,253,0.92);

  --color-primary: #184E77;
  --color-primary-dark: #132a47;
  --color-accent1: #A0DDFF;
  --color-accent2: #FFD7ED;
  --color-accent3: #A0FFDD;
  --color-accent4: #735D78;
  --color-accent5: #FABC5C;

  --color-btn: #184E77;
  --color-btn-hover: #3195A5;
  --color-btn-light: #fff;
  --color-btn-outline: #fff;
  --color-btn-outline-hover: #312244;
  --color-link: #184E77;
  --color-link-hover: #3195A5;

  --color-card-shadow: rgba(60,60,90,0.13);
  --color-txt-dark: #1B1B1F;
  --color-txt-mid: #37323E;
  --color-txt-base: #333333;
  --color-txt-light: #f8f9fa;
  --color-txt-muted: #84818a;

  --color-shadow-heavy: rgba(23,23,56,0.23);
  --color-shadow-3d: 0 6px 24px 0 rgba(60,80,180,0.11);

  /* Glassmorphism */
  --glass-blur: blur(22px);
  --glass-bg: rgba(255,255,255,0.66);

  /* Border */
  --border-thick: 3px solid var(--color-primary-dark);
  --border-radius-card: 1.7rem;
  --border-radius-btn: 2.5rem;
}

/* ============================================
 * GENERAL RESET & TYPOGRAPHY
 * ============================================
 */
html, body {
  background: var(--color-bg-main);
  font-family: var(--font-body);
  color: var(--color-txt-base);
  font-size: 18px;
  scroll-behavior: smooth;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: #222222;
  font-weight: 900;
  text-align: center;
  line-height: 1.13;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
  margin-bottom: 0.7em;
}

h1, .display-1, .display-2, .display-5 {
  font-size: 2.5rem;
}

h2, .display-6 {
  font-size: 2.10rem;
}

p, ul, li, label {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-txt-base);
  text-align: left;
  letter-spacing: 0.01em;
}

.text-shadow-heavy {
  text-shadow: 2px 2px 10px rgba(0,0,0,0.53), 0px 1px 8px rgba(0,0,0,0.44);
}

/* ============================================
 * MAIN LAYOUT & CONTAINERS
 * ============================================
 */
.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg-main);
  overflow-x: hidden;
}

.container, .container-fluid {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

section {
  padding-top: 3.3rem;
  padding-bottom: 3.3rem;
  /* background-attachment: fixed for parallax effect where appropriate */
  background-repeat: no-repeat;
  background-size: cover;
}

/* Brutalism: Borders, Hard Edges & Colors */
.brutal-header {
  border-bottom: var(--border-thick);
  background: #fff;
  box-shadow: 0 9px 23px var(--color-card-shadow);
}

.brutal-section {
  border-bottom: var(--border-thick);
}

.brutal-footer {
  border-top: var(--border-thick);
  background: var(--color-bg-footer);
  box-shadow: 0 -12px 34px var(--color-card-shadow);
}

.biomorph, .biomorph-bg {
  border-radius: 2.5rem 5rem 2.5rem 6rem/4rem 2.1rem 4rem 2.6rem;
  /* biomorphic forms */
  background: var(--color-bg-card);
  box-shadow: 0 7px 32px 0 rgba(120,140,200,0.10);
}

/* ============================================
 * HEADER & NAVIGATION
 * ============================================
 */
.navbar {
  background: #fff !important;
  border-radius: 0 0 2.2rem 2.2rem / 0 0 1.11rem 1.11rem;
}

.navbar-brand {
  font-family: var(--font-title);
  font-size: 2rem;
  /* biomorph accent below brand */
  position: relative;
}

.navbar-nav .nav-link {
  font-family: var(--font-body);
  color: var(--color-primary-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  transition: color 0.2s cubic-bezier(0.4,0,0.2,1);
}

.navbar-nav .nav-link:after {
  content:'';
  display:block;
  width:0;
  height:2px;
  background: var(--color-accent1);
  position:absolute;
  left:0;
  bottom:0;
  transition: width 0.20s;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
  color: var(--color-accent4)!important;
}
.navbar-nav .nav-link:hover:after,.navbar-nav .nav-link.active:after{
  width: 100%;
}

/* Burger Menu */
.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--color-bg-alt);
    border-top: 2px solid var(--color-primary-dark);
    margin-top: 8px;
    padding-bottom: 1.5rem;
    border-radius: 1.5rem;
  }
  .navbar-nav .nav-link { margin: 6px 0; display:block; }
}

/* ============================================
 * HERO SECTION
 * ============================================
 */
#hero {
  display: flex;
  align-items: center;
  min-height: 55vh;
  position: relative;
  background-position: center;
  background-size: cover !important;
  background-blend-mode: multiply;
  background-repeat: no-repeat !important;
  background-attachment: fixed;
}

#hero .container {
  max-width: 870px;
  z-index: 3;
}

#hero h1, #hero .display-2, #hero .display-1 {
  color: #fff!important;
  font-size: 3.1rem;
  text-shadow: 3px 3px 14px rgba(0,0,0,0.53), 0 1px 8px rgba(0,0,0,0.22);
}

#hero p, #hero .lead {
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

#hero .btn, #hero .brutal-outline {
  font-weight: 700;
  font-size: 1.12rem;
  border-radius: var(--border-radius-btn);
  box-shadow: 0 5px 15px rgba(23,23,56,0.21);
}

.hero-shape-3d {
  pointer-events: none;
}

/* Parallax (can be refined with JS if needed) */
@media (max-width:991px) {
  #hero {
    background-attachment: scroll;
    min-height: 50vh;
  }
  #hero .container {
    padding-bottom: 2rem;
  }
}

/* ==========================================
 * CARDS -- GLOBAL FOR WORKSHOPS, PORTFOLIO ETC
 * ==========================================
 */
.card, .item, .testimonial, .team-member, .product-card, .brutal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-bg-card);
  border: 3px solid var(--color-bg-alt);
  border-radius: var(--border-radius-card);
  box-shadow: 0 6px 34px 0 rgba(60,60,90,0.08);
  transition: transform .34s cubic-bezier(0.9,0,0.2,1), box-shadow .22s;
  min-width: 0;
  overflow: hidden;
  padding:0;
  margin-bottom: 0;
}

.card:hover, .product-card:hover, .testimonial:hover {
  transform: translateY(-6px) scale(1.025) perspective(600px) rotateX(1deg) rotateZ(-1.5deg);
  box-shadow: 0 20px 45px -15px var(--color-shadow-heavy),0 1.5px 24px 0 var(--color-accent1);
  z-index: 2;
}

.card-image, .image-container {
  width: 100%;
  min-height: 120px;
  max-height: 260px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.card-image img, .image-container img {
  width: 100%!important;
  height: 100%!important;
  object-fit: cover;
  border-radius: 1.5rem 1.5rem 0rem 0rem / 1.1rem 1.1rem 0 0;
  display: block;
  margin: 0 auto;
  box-shadow: 0 1.5px 9px rgba(60,120,180,0.07);
}

.card-content {
  text-align: center;
  width: 100%;
  padding: 1.3rem 1rem 1rem 1rem;
}

/* ==========================================
 * WORKSHOPS CAROUSEL/PRICING CARDS
 * ==========================================
 */
.brutal-carousel .carousel-inner {
  border-radius: var(--border-radius-card);
  background: var(--glass-bg);
  box-shadow: 0 1.5px 12px rgba(130,180,220,0.07);
}
.brutal-carousel .card {
  margin: 0 auto;
}

.brutal-shadow-lg {
  box-shadow:0 10px 44px 0 rgba(80,90,120,0.09), 0 2px 16px rgba(150,200,255,0.08);
}
.brutal-shadow {
  box-shadow:0 7px 21px 0 rgba(130,140,170,0.09),0 1.5px 6px rgba(155,220,255,0.05);
}

/* ==========================================
 * PRICING - Buttons & Cards
 * ==========================================
 */
.brutal-btn,
.btn, button, input[type="submit"] {
  background: var(--color-btn);
  color: #fff!important;
  border-radius: var(--border-radius-btn);
  font-family: var(--font-body);
  font-weight: 800;
  border: none;
  box-shadow: 0 3px 18px rgba(23,23,56,0.12);
  letter-spacing: .01em;
  outline: none;
  text-transform: uppercase;
  font-size: 1.12rem;
  padding: 0.85em 2.4em;
  cursor: pointer;
  transition: background .20s cubic-bezier(0.65,0,0.2,1), 
              color .13s cubic-bezier(0.8,0.8,0.8,0.9), 
              box-shadow .18s;
}

.btn-outline-light, .brutal-outline {
  background-color: transparent;
  color: #fff!important;
  border: 2px solid #fff;
  transition: all .17s;
  font-weight: 700;
}
.btn-outline-light:hover, .brutal-outline:hover {
  background: var(--color-btn-outline-hover);
  color: #fff!important;
}

.brutal-btn:hover, .btn:hover, button:hover, input[type="submit"]:hover {
  background: var(--color-btn-hover);
  color: #222!important;
  box-shadow: 0 7px 28px rgba(49,149,165,0.16);
  transform: translateY(-2px) scale(1.025) perspective(600px) rotateX(1deg);
}

.btn:active { transform: scale(0.97); }

/* Extra microinteraction for pressed */
.btn:focus, button:focus, input[type="submit"]:focus { outline:2px solid var(--color-accent2); }

@media (max-width:767.98px) {
  .btn, .brutal-btn { font-size:1.02rem; padding:0.8em 1.7em; }
}

/* ==========================================
 * FORM STYLES (Contact)
 * ==========================================
 */
.brutal-form {
  background: var(--glass-bg);
  border-radius: var(--border-radius-card);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 90px 0 rgba(49,149,165,0.14);
  border: 2.5px solid var(--color-accent1);
}

.brutal-label {
  font-family: var(--font-title);
  color: var(--color-primary);
  text-shadow: 1px 1px 5px var(--color-bg-alt);
  font-size: 1.01em;
  font-weight: 700;
  margin-bottom: .2rem;
}

.brutal-input, .form-control {
  border: 2.2px solid var(--color-accent1);
  border-radius: 1.2em;
  background: var(--color-bg-alt);
  color: var(--color-txt-base);
  font-size: 1.07em;
  font-family: var(--font-body);
  box-shadow: 0 6px 35px rgba(130,180,210,0.08);
  transition: border-color 0.17s, box-shadow 0.15s;
  outline: none;
  margin-bottom: 0.5em;
}
.brutal-input:focus, .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 4px 24px 0 rgba(49,149,165,0.085);
  background: #fff;
  color: var(--color-txt-mid);
}

#form-success, .alert-success {
  color: #fff;
  background: var(--color-accent3);
  border: 2px solid var(--color-accent2);
  border-radius: 20px;
  font-weight: 700;
  margin-top:1.1em;
  text-align: center;
}

/* ==========================================
 * FOOTER
 * ==========================================
 */
footer, .brutal-footer {
  background: var(--color-bg-footer);
  color: var(--color-txt-base);
  padding-top: 3rem;
  padding-bottom: 1.6rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
}

.footer-nav a, .brutal-link-footer {
  color: var(--color-link);
  text-decoration: underline;
  font-weight: 700;
  font-size: 1.01em;
  margin: 0 8px;
  transition: color .18s; 
}

.footer-nav a:hover, .brutal-link-footer:hover {
  color: var(--color-accent4); 
}

.footer-social-links a, .brutal-social-link {
  display: inline-block;
  color: var(--color-accent4);
  font-weight: 800;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 5px;
  font-size: 1.01em;
  text-decoration: underline;
  transition: color .17s, text-shadow .14s;
}
.footer-social-links a:hover {
  color: var(--color-link-hover);
  text-shadow: 1px 1px 6px var(--color-accent1);
}

.brutal-footer-copy {
  margin-top:2px;
  margin-bottom:0.4em;
  color: var(--color-txt-muted);
  text-align: center;
}

@media (max-width:991px) {
  footer .row > div {margin-bottom: 1.3rem;}
}

@media (max-width:600px) {
  footer .brutal-footer {
    padding-top: 2.2rem;
    padding-bottom:1.1rem;
  }
}

/* ==========================================
 * PORTFOLIO / WORKSHOPS / CARDS (Fixes)
 * ==========================================
 */
.row > .col-lg-4,
.row > .col-lg-8,
.row > .col-md-6,
.row > .col-md-10 {
  min-width:0;
}

.card-content {
  align-items:center;
  text-align:center;
}
.card-content * { text-align:center; }

@media (min-width: 576px) {
  .card, .item, .testimonial, .team-member, .product-card {
    width: 94%;
    max-width: 410px;
  }
  .portfolio .card { min-width: 330px;}
}

@media (max-width:767.98px) {
  .card, .item, .testimonial, .team-member, .product-card {
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================
 * LISTS, BADGES & "READ MORE" LINKS
 * ==========================================
 */
ul, .list-unstyled {
  list-style: none;
  padding-left: 0;
}
li::before {
  content: "• ";
  color: var(--color-accent4);
}

/* External Resource Badges */
.badge.bg-gradient, .brutal-link {
  background: var(--glass-bg);
  color: var(--color-link);
  font-weight: 700;
  border-radius: 1.9em;
  padding: 0.5em 1.9em;
  margin: 0.3em;
  box-shadow: 0 3px 15px rgba(130,180,220,0.07);
  display: inline-block;
  font-size: 1em;
  text-decoration: none;
  transition: background .19s, color .17s;
}

.badge.bg-gradient:hover, .brutal-link:hover {
  background: var(--color-accent1);
  color: var(--color-accent4)!important;
  box-shadow: 0 7px 28px var(--color-accent1);
}

/* "Read More" link style */
a.read-more, .read-more {
  color: var(--color-link);
  font-weight: 800;
  font-size: 1.09em;
  text-decoration: underline wavy var(--color-accent1);
  transition: color .17s;
  padding-left: .2em;
  cursor: pointer;
  letter-spacing: 0.01em;
}
a.read-more:hover, .read-more:hover {
  color: var(--color-accent4);
  text-shadow: 1px 1px 10px var(--color-accent2);
}

/* ==========================================
 * SPECIAL/MISC UTILITY CLASSES
 * ==========================================
 */

/* Padding fix for privacy/terms pages */
.privacy-page,
.terms-page {
  padding-top: 100px !important;
}

.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-main);
}
.success-page .content {
  margin: auto;
  text-align: center;
}

/* Glassmorphism effect utility */
.glass-bg {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 40px rgba(130,180,220,0.07);
}

/* ==========================================
 * GLOBBAL LINKS
 * ==========================================
 */
a, .link, .brutal-link, .brutal-link-footer {
  color: var(--color-link);
  text-decoration: underline;
  font-weight: 700;
  transition: color .15s, text-shadow .16s;
}
a:hover, .link:hover, .brutal-link:hover, .brutal-link-footer:hover {
  color: var(--color-link-hover);
  text-shadow: 0 3px 18px var(--color-accent2);
}

/* ==========================================
 * 3D & ANIMATED EFFECTS
 * ==========================================
 */
/* Pseudo-3D hover for .btn, .card, .item */
.card, .btn, button, input[type="submit"] {
  transition: box-shadow 0.19s cubic-bezier(0.8,0.8,0.55,1.1),
              transform 0.25s cubic-bezier(0.7,0.2,0.2,1.2);
  /* 3d pop */
}

/* Buttons pressed effect */
.btn:active, button:active, input[type="submit"]:active {
  transform: scale(0.96) translateY(1px) perspective(70px);
  box-shadow: 0 2px 8px rgba(155,205,255,0.16);
}

/* Animate icons (optional, for small interactive effect if used) */
.animated-icon {
  transition: transform 0.25s, color 0.14s;
}
.animated-icon:hover {
  transform: scale(1.13) rotate(-3deg);
  color: var(--color-primary);
}

/* ==========================================
 * RESPONSIVE COLUMNS/GRID
 * ==========================================
 */
@media (min-width: 768px) {
  .col-two-thirds {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
}

@media (max-width: 576px) {
  h1, .display-2, h2, .display-6, .display-5 {
    font-size: 1.35rem !important;
  }
}

/* ==========================================
 * MISC
 * ==========================================
 */
::-webkit-input-placeholder { color: #adadb4; }
::-moz-placeholder { color: #adadb4; }
:-ms-input-placeholder { color: #adadb4; }
::placeholder { color: #adadb4; }

input, textarea, select {
  outline: none;
}

/* For all background images: cover and no-repeat */
section, [style*="background-image"] {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* For text on image - overlay (utility) */
.overlay-dark, .with-overlay::before {
  content: "";
  position: absolute;
  z-index:1;
  left:0;top:0;width:100%;height:100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.55),rgba(23,23,23,0.16));
  pointer-events:none;
}

/* For parallax effect (supplement with JS if needed) */
.parallax {
  background-attachment: fixed !important;
}

@media (max-width:991px) {
  .parallax {
    background-attachment: scroll !important;
  }
}

/* ==========================================
 * FOCUS STYLES/ACCESSIBILITY
 * ==========================================
 */
a:focus, button:focus, .btn:focus, input:focus, textarea:focus {
  outline: 2.5px solid var(--color-accent2);
  outline-offset: 2.5px;
}

@media (max-width: 991px) {
  section {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }
}

/* Disable selection highlight for buttons/inputs */
.btn, button, input[type="submit"] {
  user-select: none;
}

/* ==========================================
 * END
 * ==========================================
 */
.navbar-toggler{
  display: none;
}