:root {
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-lift: 0 26px 60px rgba(15, 27, 61, 0.14);
  }

  .about-page {
    overflow-x: clip;
  }

  .reveal {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
    transition:
      opacity 1.1s var(--ease-smooth),
      transform 1.1s var(--ease-smooth),
      filter 1.1s var(--ease-smooth);
    will-change: transform, opacity;
    filter: blur(6px);
  }

  .reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }

  .reveal-left {
    transform: translate3d(-42px, 24px, 0);
  }

  .reveal-right {
    transform: translate3d(42px, 24px, 0);
  }

  .reveal-zoom {
    transform: translate3d(0, 28px, 0) scale(0.94);
  }

  .reveal.d1 { transition-delay: 0.10s; }
  .reveal.d2 { transition-delay: 0.20s; }
  .reveal.d3 { transition-delay: 0.30s; }
  .reveal.d4 { transition-delay: 0.40s; }
  .reveal.d5 { transition-delay: 0.50s; }

  .about-page .reveal {
    transition-duration: 0.55s;
  }

  .about-page .reveal.d1 { transition-delay: 0.04s; }
  .about-page .reveal.d2 { transition-delay: 0.08s; }
  .about-page .reveal.d3 { transition-delay: 0.12s; }
  .about-page .reveal.d4 { transition-delay: 0.16s; }
  .about-page .reveal.d5 { transition-delay: 0.20s; }

  /* ── Shared fade-up animation (ONE definition) ── */
  .fade-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);
  }
  .fade-up.visible { opacity: 1; transform: translateY(0); }
  .fade-up.d1 { transition-delay: 0.10s; }
  .fade-up.d2 { transition-delay: 0.20s; }
  .fade-up.d3 { transition-delay: 0.32s; }
  .fade-up.d4 { transition-delay: 0.44s; }
  .fade-up.d5 { transition-delay: 0.56s; }

  .about-page .fade-up {
    transition-duration: 0.5s;
  }

  .about-page .fade-up.d1 { transition-delay: 0.04s; }
  .about-page .fade-up.d2 { transition-delay: 0.08s; }
  .about-page .fade-up.d3 { transition-delay: 0.12s; }
  .about-page .fade-up.d4 { transition-delay: 0.16s; }
  .about-page .fade-up.d5 { transition-delay: 0.20s; }

  /* ═══════════════════════════════════════════
     SECTION 1 – HERO
  ═══════════════════════════════════════════ */
  .hero-outer {
    position: relative;
    background: #fff;
  }

  /* dark green band */
  .hero-dark {
  position: relative;
  background: 
    linear-gradient(150deg, rgba(29,50,50,0.45), rgba(15,32,32,0.55)),
    url("/static/about/about_bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

  /* dotted texture */
  .hero-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    z-index: 0;
  }

  .hero-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 24%, rgba(61, 214, 200, 0.16), transparent 34%),
      radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 28%);
    animation: heroAtmosphere 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
  }

  /* fork watermark circles */
  .wm {
    position: absolute;
    top: 22px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
  }
  .wm.wm-l { left: 22px; }
  .wm.wm-r { right: 22px; }
  .wm svg  { opacity: 0.28; }
  .wm.wm-l { animation: bobBadge 5.5s ease-in-out infinite; }
  .wm.wm-r { animation: bobBadge 5.5s ease-in-out infinite 0.8s; }

  /* heading + subtext */
  .hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .hero-text > * {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.9s var(--ease-smooth),
      transform 0.9s var(--ease-smooth);
  }
  .about-page .hero-text > * {
    transition-duration: 0.45s, 0.45s;
  }
  .page-ready .hero-text > * {
    opacity: 1;
    transform: translateY(0);
  }
  .page-ready .hero-text p {
    transition-delay: 0.08s;
  }
  .hero-text h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 10px;
  }
  .hero-text h1 .accent { color: #3dd6c8; }
  .hero-text p {
    color: #fff;
    font-size: 16px;
    line-height: 1.50;
    max-width: 750px;
    margin: 0 auto 15px;
  }

  /* dark band inner — sets bleed height */
  .hero-dark-inner {
    padding-top: 16px;
    padding-bottom: 180px;
  }

  /* white card wraps and bleeds below dark band */
  .hero-card-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin-top: -165px;
    padding: 0 12px;
  }

  .hero-card {
    width: 100%;
    max-width: 1000px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.06),
        0 8px 18px rgba(0,0,0,0.12),
        0 18px 40px rgba(0,0,0,0.18);
    transform: translateY(34px) scale(0.97);
    opacity: 0;
    transition:
      transform 0.95s var(--ease-smooth),
      opacity 0.95s var(--ease-smooth),
      box-shadow 0.45s ease;
  }
  .about-page .hero-card {
    transition-duration: 0.55s, 0.55s, 0.25s;
  }
  .page-ready .hero-card {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: 0.12s;
  }
  .hero-card:hover {
    box-shadow:
      0 12px 22px rgba(0,0,0,0.1),
      0 22px 48px rgba(15, 27, 61, 0.14),
      0 46px 90px rgba(0,0,0,0.24);
  }

  .hero-card .team-img {
    width: 100%;
    height: clamp(160px, 24vw, 300px);
    object-fit: cover;
    object-position: center top;
    display: block;
    transform: scale(1.02);
    transition: transform 0.6s var(--ease-soft);
  }
  .hero-card:hover .team-img {
    transform: scale(1.06);
  }

  /* stats bar */
  .stats-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px;
    background: #fff;
  }
  .stat-cell { text-align: center; flex: 1 1 80px; }
  .stat-cell {
    transition: transform 0.35s ease, color 0.35s ease;
  }
  .stat-cell:hover {
    transform: translateY(-4px);
  }
  .stat-num {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 800;
    color: #0D1B2A;
    line-height: 1;
  }
  .stat-lbl {
    font-size: 0.6rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 6px;
    font-weight: bold;
  }
  .stat-div {
    width: 1px;
    height: 38px;
    background: #e6e6e6;
    flex-shrink: 0;
  }

  @media (max-width: 576px) {
    .wm { width: 88px; height: 88px; top: 14px; }
    .wm.wm-l { left: 8px; }
    .wm.wm-r { right: 8px; }

    .hero-dark-inner {
      padding-top: 6px;
      padding-bottom: 100px;
    }
    .hero-card-wrap { margin-top: -80px; }
  }
  @media (max-width: 576px) {
  .stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 15px 10px;
  }

  .stat-cell {
    text-align: center;
    padding: 0 4px; 
  }

  .stat-num {
    font-size: 14px;
  }

  .stat-lbl {
    font-size: 10px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
     margin-left: 0;
     padding-left: 0;
  }

  .stat-div {
    display: none;
  }
}
@media (max-width: 576px) {
  .stat-lbl span {
    display: block;  /* ✅ moves to next line only on mobile */
  }
}
  /* ═══════════════════════════════════════════
     SECTION 2 – OUR STORY
  ═══════════════════════════════════════════ */

 
/* animation */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* section */
.story-section {
  padding: 20px 0;
}

.story-load {
  opacity: 0;
  transform: translate3d(-34px, 18px, 0);
  filter: blur(5px);
  transition:
    opacity 1.25s var(--ease-smooth),
    transform 1.25s var(--ease-smooth),
    filter 1.25s var(--ease-smooth);
  will-change: transform, opacity;
}
.about-page .story-load {
  transition-duration: 0.55s, 0.55s, 0.55s;
}
.story-load.s1 { transition-delay: 0.05s; }
.story-load.s2 { transition-delay: 0.10s; }
.story-load.s3 { transition-delay: 0.15s; }
.story-load.s4 { transition-delay: 0.20s; }
.story-load.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* LEFT CONTENT */
.story-heading {
  font-size: 36px;
  font-weight: 800;
  color: #0f1b3d;
}
.story-heading .accent {
  color: #0f1b3d;
}

.heading-bar {
  width: 45px;
  height: 3px;
  background: #3dd6c8;
  margin: 15px 0 25px;
}

.story-body p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 15px;
}

.story-list {
  list-style: none;
  margin-top: 20px;
  padding-left: 0;
}

.story-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  column-gap: 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  line-height: 1.7;
  transition: transform 0.35s ease, color 0.35s ease;
}

.story-list li:hover {
  transform: translateX(8px);
  color: #0f1b3d;
}

.chk {
  width: 20px;
  height: 20px;
  border: 2px solid #3dd6c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* RIGHT SIDE */
/* ===== IMAGE SWITCH ANIMATION ===== */
.spice-tr img,
.spice-br img,
.prod-bag img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.45s var(--ease-soft), transform 0.55s var(--ease-soft), filter 0.45s var(--ease-soft);
  will-change: transform, opacity;
}
.about-page .spice-tr img,
.about-page .spice-br img,
.about-page .prod-bag img {
  transition-duration: 0.22s, 0.28s, 0.22s;
}

/* hidden */
.circle-img,
.main-img {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(4px);
}

/* active */
.circle-img.active,
.main-img.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.story-slot-img.is-swapping {
  opacity: 0;
  filter: blur(6px);
}

/* floating effect */
.circle-img.active {
  animation: floatImg 2.4s ease-in-out infinite;
}

@keyframes floatImg {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.04);
  }
}

@keyframes floatCenter {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px) scale(1.03);
  }
}
.grey-blob {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== STORY SECTION ===== */

.story-section {
  padding: 20px 0;
}

.story-right-wrap {
  position: relative;
  width: 420px;
  height: 460px;
  margin: auto;
}


/* ===== GREY CIRCLE (MAIN FIX) ===== */
.grey-blob {
  position: absolute;
  width: 280px;
  height: 280px;
  background: #eeeeed;
  border-radius: 50%;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; /* ⭐ IMPORTANT */
  box-shadow: 0 18px 50px rgba(15, 27, 61, 0.12);
}

/* product container INSIDE circle */
.prod-bag {
  position: relative;
  width: 100%;
  height: 100%;
    display: flex;
  align-items: center;
  justify-content: center;
}

/* product image */
.prod-bag img {
  position: absolute; /* keep for stacking */

  max-height: 75%;   /* 🔥 controls size */
  max-width: 75%;

  object-fit: contain;
    top: 55%;   /* 🔥 move slightly down */
  left: 50%;
  transform: translate(-50%, -50%);
  
}
.prod-bag img.active {
  animation: floatCenter 2.4s ease-in-out infinite;
}

/* ===== ARC ===== */
.arc-mask {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 140px;
  top: 0;
  overflow: hidden;
  z-index: 1;
}

.arc {
  position: absolute;
  width: 450px;
  height: 450px;
  border: 3px solid #3dd6c8;
  border-radius: 50%;
  right: -300px;
  top: -10px;
  animation: arcSpin 8s linear infinite;
}


/* ===== TOP IMAGE ===== */
.spice-tr {
  position: absolute;
  top: -30px;
  right: -40px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  z-index: 5;
  box-shadow: 0 18px 28px rgba(15, 27, 61, 0.12);
}

.spice-tr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== BOTTOM IMAGE ===== */
.spice-br {
  position: absolute;
  bottom: -5px;
  right: -50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  z-index: 5;
  box-shadow: 0 22px 36px rgba(15, 27, 61, 0.14);
}

.spice-br img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* responsive */
@media (max-width: 991px) {
  .story-right-wrap {
    transform: scale(0.85);
  }
}

@media (max-width: 767px) {
  .story-right-wrap {
    transform: scale(0.7);
  }
}
  /* ═══════════════════════════════════════════
     SECTION 3 – PILLARS
  ═══════════════════════════════════════════ */
  
    /* ── Section wrapper ── */
    .pil-section {
      max-width: 1060px;
      margin: 0 auto;
      padding: 24px 16px 0;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }
 
 
    /* ── Header ── */
    .pil-header {
      text-align: center;
      margin-bottom: 20px;
      transition: transform 0.7s var(--ease-soft), opacity 0.7s var(--ease-soft);
    }
    .pil-header.reveal {
      transition-duration: 0.55s;
      transition-timing-function: var(--ease-smooth);
    }
  
    .pil-title {
      font-size: 36px;
      font-weight: 700;
      color: #0f1b3d;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
      transition: transform 0.55s var(--ease-soft), letter-spacing 0.35s var(--ease-soft);
    }
  
    .pil-subtitle {
      font-size: 16px;
      color: #718096;
      line-height: 1.6;
      max-width: 620px;
      margin: 0 auto;
      transition: transform 0.55s var(--ease-soft), color 0.35s var(--ease-soft);
    }
 
    /* ── Cards grid ── */
    .pil-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: start;
    }
 
    /* ── Single card ── */
    .pil-card {
      background: #F9FAFBFF;
      border-radius: 14px;
      padding: 28px 26px 30px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: visible;
      border: 1px solid rgba(61, 214, 200, 0.08);
      box-shadow: 0 16px 34px rgba(15, 27, 61, 0.06);
      min-width: 0;
      box-sizing: border-box;
      transition:
        transform 0.45s var(--ease-soft),
        box-shadow 0.45s var(--ease-soft),
        border-color 0.3s ease;
      height: 198px;
    }
    .pil-card.reveal {
      transition:
        opacity 0.55s var(--ease-smooth),
        transform 0.55s var(--ease-smooth),
        filter 0.55s var(--ease-smooth);
    }
    .pil-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(61, 214, 200, 0.16), transparent 55%);
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
    }
    .pil-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.42) 48%, transparent 78%);
      opacity: 0;
      transform: translateX(-120%);
      transition: transform 0.8s ease, opacity 0.35s ease;
      pointer-events: none;
    }
    .pil-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-lift);
      border-color: rgba(61, 214, 200, 0.2);
    }
    .pil-card:hover::before {
      opacity: 1;
    }
    .pil-card:hover::after {
      opacity: 1;
      transform: translateX(120%);
    }
 
    /* Avatar sits half-out of the card at the top */
    .pil-avatar-wrap {
      position: absolute;
      top: -44px;
      left: 50%;
      transform: translateX(-50%);
    }
 
    .pil-avatar {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #ffffff;
      box-shadow: 0 4px 14px rgba(0,0,0,0.12);
      display: block;
      background: #A1F4F3; /* fallback while image loads */
      transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
    }
    .pil-card:hover .pil-avatar {
      transform: scale(1.06) rotate(-2deg);
      box-shadow: 0 12px 24px rgba(15, 27, 61, 0.18);
    }
 
    /* Extra top space so card body clears the avatar */
    .pil-card-body {
      padding-top: 52px;
      width: 100%;
      transition: transform 0.45s var(--ease-soft);
    }
  
    .pil-card-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f1b3d;
      margin-bottom: 10px;
      transition: transform 0.4s var(--ease-soft), color 0.35s var(--ease-soft);
    }
  
    .pil-card-text {
      font-size: 0.85rem;
      color: #4a5568;
      line-height: 1.72;
      transition: transform 0.4s var(--ease-soft), color 0.35s var(--ease-soft);
    }
    .pil-header.visible .pil-title {
      letter-spacing: 0.01em;
    }
    .pil-header.visible .pil-subtitle {
      color: #5e6b7d;
    }
    .pil-card:hover .pil-card-body {
      transform: translateX(4px);
    }
    .pil-card:hover .pil-card-title {
      transform: translateX(4px);
      color: #10284b;
    }
    .pil-card:hover .pil-card-text {
      transform: translateX(4px);
      color: #344255;
    }

 
    /* ── Grid wrapper needs top padding to give avatars room ── */
    .pil-grid-outer {
      padding-top: 50px;
    }
 
    /* ══════════ RESPONSIVE ══════════ */
  @media (max-width: 991px) {
    .hero-dark-inner {
      padding-top: 16px;
      padding-bottom: 132px;
    }

    .hero-card-wrap {
      margin-top: -118px;
      padding: 0 20px;
    }

    .hero-card {
      border-radius: 18px;
    }

    .stats-row {
      gap: 12px;
      padding: 16px 18px;
    }

    .story-section {
      padding: 24px 0 36px;
    }

    .story-section .row {
      row-gap: 34px;
    }

    .story-heading {
      text-align: center;
    }

    .heading-bar {
      margin-left: auto;
      margin-right: auto;
    }

    .story-body,
    .story-list {
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
    }

    .story-right-wrap {
      width: min(100%, 360px);
      height: 380px;
      transform: none;
    }

    .grey-blob {
      width: 240px;
      height: 240px;
      top: 78px;
    }

    .arc-mask {
      left: 118px;
    }

    .arc {
      width: 360px;
      height: 360px;
      right: -238px;
      top: 12px;
    }

    .spice-tr {
      top: -10px;
      right: -12px;
      width: 82px;
      height: 82px;
    }

    .spice-br {
      right: -18px;
      bottom: 0;
      width: 102px;
      height: 102px;
    }

    .pil-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 48px 20px;
    }

    .pil-title {
      font-size: 2rem;
    }

    .jgw-wrapper {
      padding: 26px 18px 34px;
    }

    .jgw-section {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 32px 28px;
    }

    .jgw-left,
    .jgw-card {
      max-width: 100%;
    }
  }

    @media (max-width: 780px) {
      .pil-section {
        padding-inline: 20px;
      }

      .pil-grid {
        grid-template-columns: 1fr;
        gap: 54px;
        max-width: 460px;
        margin: 0 auto;
      }

      .pil-card {
        padding: 26px 22px 28px;
      }

      .pil-card-title,
      .pil-card-text {
        text-align: center;
      }
    }
 
    @media (max-width: 480px) {
      .pil-section {
        padding-inline: 14px;
      }

      .pil-grid-outer {
        padding-top: 42px;
      }

      .pil-avatar-wrap {
        top: -38px;
      }

      .pil-avatar {
        width: 76px;
        height: 76px;
      }

      .pil-card {
        padding: 24px 18px 24px;
      }

      .pil-card-body {
        padding-top: 42px;
      }

      .pil-title {
        font-size: 1.45rem;
      }

      .pil-subtitle,
      .pil-card-text {
        font-size: 0.82rem;
      }
    }

  /* ═══════════════════════════════════════════
     SECTION 4 – TEAM
  ═══════════════════════════════════════════ */
  .team-section {
    background: #fff;
    padding: 20px 0 30px;
  }

  .team-container {
    width: min(100%, 1480px);
    margin: 0 auto;
    padding-inline: clamp(12px, 2vw, 32px);
  }

  .team-heading {
    text-align: center;
    margin-bottom: 15px;
  }
  .team-heading.reveal {
    transition-duration: 0.6s;
    transition-timing-function: var(--ease-smooth);
  }
  .team-heading h2 {
    font-size: 36px;
    font-weight: 700;
    color: #0f1b3d;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
  }
  .team-heading h2 span { color: #0f1b3d; }
  .team-heading p {
    font-size: 16px;
    color: #777;
    line-height: 1.75;
    max-width: 460px;
    margin: 0 auto;
  }

  .team-card {
    background: #f7fffe;
    border: 1px solid  #39bcb3;;
    border-radius: 16px;
    padding: 30px 22px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
    align-items: center;
    text-align: center;
  }

  .team-grid {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }

  .team-card-col.reveal {
    transition-duration: 0.6s;
    transition-timing-function: var(--ease-smooth);
  }
  .team-card:hover {
    box-shadow: 0 18px 40px rgba(15, 27, 61, 0.18);
    transform: translateY(-8px);
    border-color: #3dd6c8;
  }

  .team-photo {
    width: 90px; height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e4f7f5;
    margin-bottom: 20px;
    flex-shrink: 0;
    align-self: center;
  }
  .team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.55s var(--ease-soft);
  }
  .team-card:hover .team-photo img {
    transform: scale(1.08);
  }

  .member-name {
     font-family: 'Playfair Display', serif;
        font-size: 18px;
        font-weight: 700;
        color: #181B20;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 6px;
        word-break: break-word;
  }
  .member-role {
    font-size:13px;
    font-weight: 500;
    color:#00A99D;
    margin-bottom: 12px;
  }
  .member-bio {
    font-size: clamp(0.76rem, 1.2vw, 0.84rem);
    color: #777;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 20px;
    
  }

  .team-socials { display: flex; gap: 10px; margin-top: auto;flex-wrap: wrap; }
  .social-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1.5px solid #cceee9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f1b3d;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }
  .social-btn:hover { background: #3dd6c8; border-color: #3dd6c8; color: #fff; }
  .social-btn svg { width: 14px; height: 14px; }

  @media (max-width: 767px) {
    .team-section { padding: 60px 0 70px; }
  }
@media (min-width: 992px) {
    .team-card-col {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .team-grid > .team-card-col:nth-child(5):last-child {
    margin-left: 25%;
  }
}

@media (max-width: 767px) {
  .team-grid {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
  }
}
  
  /* ═══════════════════════════════════════════
     SECTION 6 – CTA / REQUEST A QUOTE
  ═══════════════════════════════════════════ */

   /* ══════════════════════════════
       BRANDS SECTION
    ══════════════════════════════ */
  ══════════════════════════════ */

.brands-section {
  padding: 20px 16px 28px;
  text-align: center;
  background: #fff;
}
.brand-container {
  width: min(100%, 1220px);
  margin: 0 auto;
  background: #F3FAF2;   /* light green */
  border-radius: 14px;
  padding: 24px 18px;
  box-sizing: border-box;
}
.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #0f1b3d;
  margin-bottom: 28px;
}

.section-title .teal {
  color: #0f1b3d;
  font-weight: 700;
}

/* Row */
.brands-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 👈 gap between images */
  flex-wrap: wrap;
}

/* Each badge */
.brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 27, 61, 0.05);
  transition: transform 0.35s var(--home-soft), box-shadow 0.35s var(--home-soft);
}

/* Image size control */
.brand-badge img {
  max-height: 100px;   /* 👈 reduce size */
  width: auto;
  object-fit: contain;
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: grayscale(0.12);
}

/* Hover (optional nice effect) */
.brand-badge:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: var(--home-lift);
}
.brand-badge:hover img {
  transform: scale(1.05);
  filter: grayscale(0);
}
@media (max-width: 767px) {

  .section-title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .brands-row {
    gap: 16px;
  }

  .brand-badge {
    padding: 8px 10px;
  }

  .brand-badge img {
    max-height: 28px; /* smaller on mobile */
  }
}
@media (max-width: 400px) {
  .brand-badge img {
    max-height: 24px;
  }

  .brands-row {
    gap: 12px;
  }
}
.brandSwiper {
  width: 100%;
  padding: 10px 2px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}
/* Card wrapper */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 210px;
  transition: transform 0.35s var(--home-soft);
}

/* Logo container */
.brand-logo-box {
  width: 100%;
  min-height: 140px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(15, 27, 61, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.brand-logo-box img {
  width: 100%;
  max-width: 150px;
  max-height: 90px;
  object-fit: contain;
}

/* Separate name box */
.brand-name-box {
  margin-top: 4px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0f1b3d;
  text-align: center;
  box-shadow: 0 4px 10px rgba(15, 27, 61, 0.04);
}

/* Hover effect */
.brand-card:hover {
  transform: translateY(-6px);
}

.brand-card:hover .brand-name-box {
  background: #0f1b3d;
  color: #fff;
}

@media (max-width: 991px) {
  .brand-container {
    padding: 22px 16px;
  }

  .section-title {
    font-size: 30px;
    margin-bottom: 22px;
  }

  .brand-card {
    max-width: 190px;
  }
}

@media (max-width: 767px) {
  .brands-section {
    padding: 18px 12px 24px;
  }

  .brand-container {
    padding: 18px 12px;
    border-radius: 12px;
  }

  .section-title {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .brand-card {
    max-width: 100%;
  }

  .brand-logo-box {
    min-height: 110px;
    padding: 16px;
  }

  .brand-logo-box img {
    max-width: 120px;
    max-height: 64px;
  }

  .brand-name-box {
    font-size: 11px;
    padding: 6px;
  }
}

@media (max-width: 420px) {
  .brands-section {
    padding: 16px 10px 22px;
  }

  .brand-container {
    padding: 16px 10px;
  }

  .brand-logo-box {
    min-height: 96px;
    padding: 14px;
  }

  .brand-logo-box img {
    max-width: 105px;
    max-height: 56px;
  }
}


    .jgw-wrapper {
  display: flex;
  justify-content: center;
  padding: 28px 20px;
}
    /* ── Outer wrapper ── */
    .jgw-section {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.07);
      max-width: 1200px;
      width: 100%;
      padding: 16px 44px;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 42px;
      align-items: center;
    }
 
    /* ══════════════ LEFT ══════════════ */
    .jgw-left {}
 
    .jgw-left .jgw-headline {
      font-size: 36px;
      font-weight: 700;
      color: #0f1b3d;
      line-height: 1.18;
      margin-bottom: 14px;
      margin-left: 0;
      margin-right: 0;
      letter-spacing: -0.01em;
      text-align: left;
      width: 100%;
      max-width: 600px;
    }

    .jgw-left .jgw-headline::after {
      left: 35%;
      transform: translateX(-50%);
    }
 
    .jgw-desc {
      font-size: 16px;
      color: #4a5568;
      line-height: 1.75;
      margin-bottom: 24px;
      max-width: 600px;
    }
 
    /* Contact items */
    .jgw-contacts {
       display: flex;
      flex-direction: row;  
      gap: 40px;           
       flex-wrap: wrap;  
    }
 
    .jgw-contact {
      display: flex;
      align-items: center;
      gap: 12px;
    }
 
    .jgw-icon-wrap {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #e8f4f8;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .jgw-icon-wrap svg {
      width: 17px;
      height: 17px;
      stroke: #4a9db5;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
 
    .jgw-contact-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
 
    .jgw-contact-lbl {
      font-size: 0.72rem;
      color: #4a9db5;
      font-weight: 500;
    }
 
    .jgw-contact-val {
      font-size: 0.95rem;
      font-weight: 700;
      color: #0f1b3d;
      text-decoration: none;
    }
 
    /* ══════════════ RIGHT – CARD ══════════════ */
    .jgw-card {
      background: #f0f5f4;
      border-radius: 12px;
      padding: 22px 22px 20px;
      box-shadow: 0 18px 42px rgba(15, 27, 61, 0.08);
      transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
    }
    .jgw-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 54px rgba(15, 27, 61, 0.14);
    }
 
    .jgw-card-eyebrow {
      font-size: 0.7rem;
      font-weight: 600;
      color: #17a192;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 6px;
    }
 
    .jgw-card-title {
      font-size: 1.45rem;
      font-weight: 700;
      color: #0f1b3d;
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
 
    .jgw-card-sub {
      font-size: 0.775rem;
      color: #718096;
      line-height: 1.55;
      margin-bottom: 20px;
    }
 
    /* ── Form ── */
    .jgw-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
 
    .jgw-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
 
    .jgw-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .jgw-error {
      min-height: 16px;
      font-size: 0.72rem;
      color: #e53e3e;
      line-height: 1.35;
    }
 
    .jgw-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: #2d3748;
    }
 
    .jgw-label .jgw-star {
      color: #e53e3e;
      margin-left: 1px;
    }
 
    .jgw-input,
    .jgw-select,
    .jgw-textarea {
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
      color: #2d3748;
      background: #ffffff;
      border: 1px solid #dde3ea;
      border-radius: 6px;
      padding: 8px 11px;
      outline: none;
      width: 100%;
      transition: border-color .15s, box-shadow .15s;
    }
 
    .jgw-input::placeholder,
    .jgw-textarea::placeholder {
      color: #b0bec5;
    }
 
    .jgw-input:focus,
    .jgw-select:focus,
    .jgw-textarea:focus {
      border-color: #17a192;
      box-shadow: 0 0 0 3px rgba(23,161,146,.12);
      transform: translateY(-1px);
    }

    .jgw-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
      cursor: pointer;
      color: #333;
    }
 
    .jgw-textarea {
      resize: vertical;
      min-height: 80px;
      line-height: 1.5;
    }
 
    .jgw-btn {
      font-family:sans-serif;
      font-size: 0.875rem;
      font-weight: 600;
      color: #ffffff;
      background: #0f1b3d;
      border: none;
      border-radius: 6px;
      padding: 13px 20px;
      cursor: pointer;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 2px;
      transition: background .2s;
      letter-spacing: 0.01em;
    }
 
    .jgw-btn:hover { background: #128a7d; }
    .jgw-btn {
      position: relative;
      overflow: hidden;
      transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .jgw-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -130%;
      width: 70%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
      transform: skewX(-20deg);
      transition: left 0.55s ease;
    }
    .jgw-btn:hover::before {
      left: 140%;
    }
    .jgw-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 26px rgba(18, 138, 125, 0.22);
    }

    @keyframes heroAtmosphere {
      0% { transform: scale(1) translate3d(0, 0, 0); opacity: 0.8; }
      100% { transform: scale(1.08) translate3d(0, -12px, 0); opacity: 1; }
    }

    @keyframes bobBadge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes arcSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }

      .fade-up,
      .reveal,
      .hero-text > *,
      .hero-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
    }
 
    /* ══════════════ RESPONSIVE ══════════════ */
    @media (max-width: 991px) {
      .jgw-wrapper {
        padding: 26px 18px 34px;
      }

      .jgw-section {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 28px;
      }

      .jgw-left,
      .jgw-card,
      .jgw-desc {
        max-width: 100%;
      }
    }
 
    @media (max-width: 520px) {
      .jgw-section { padding: 32px 20px; }
      .jgw-row { grid-template-columns: 1fr; }
      .jgw-headline { font-size: 1.75rem; }
    }

    /* ── Outer strip ── */
    .fbg-strip {
      width: min(1350px, calc(100% - 32px));
      margin: 25px auto;
      padding: clamp(14px, 2vw, 24px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      background:
      
        #ffffff;
      border-radius: 26px;
      position: relative;
      overflow: hidden;
       
    }
    .fbg-strip::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 22px;
      border: 1px solid rgba(61, 214, 200, 0.12);
      pointer-events: none;
    }
 
    /* Divider between items (desktop only) */
    .fbg-item:not(:last-child) {
      border-right: 1.5px solid rgba(61, 214, 200, 0.12);
    }
 
    /* ── Single item ── */
    .fbg-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 25px 20px 25px 18px;
      min-height: 100%;
      background: linear-gradient(180deg, rgba(240, 250, 245, 0.95) 0%, rgba(233, 247, 240, 0.88) 100%);
      border-radius: 18px;
      border: 1px solid rgba(61, 214, 200, 0.12);
      position: relative;
      z-index: 1;
      transition:
        transform 0.45s var(--ease-soft),
        box-shadow 0.45s var(--ease-soft),
        border-color 0.35s var(--ease-soft),
        background-color 0.35s var(--ease-soft);
    }
    .fbg-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, 0.45) 48%, transparent 78%);
      opacity: 0;
      transform: translateX(-120%);
      transition: transform 0.8s ease, opacity 0.35s ease;
      pointer-events: none;
    }
    .fbg-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 22px 34px rgba(15, 27, 61, 0.12);
      border-color: rgba(46, 170, 110, 0.3);
    }
    .fbg-item:hover::after {
      opacity: 1;
      transform: translateX(120%);
    }
 
    /* Icon circle */
    .fbg-icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 50%;
      background: #2eaa6e;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 26px rgba(46, 170, 110, 0.22);
      transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), background-color 0.25s var(--ease-soft);
      animation: fbgFloat 3.2s ease-in-out infinite;
    }
    .fbg-item:nth-child(2) .fbg-icon { animation-delay: 0.35s; }
    .fbg-item:nth-child(3) .fbg-icon { animation-delay: 0.7s; }
    .fbg-item:nth-child(4) .fbg-icon { animation-delay: 1.05s; }
 
    .fbg-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: #ffffff;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.4s var(--ease-soft);
    }
 
    /* Text */
    .fbg-text {
      min-width: 0;
      transition: transform 0.4s var(--ease-soft);
    }
 
    .fbg-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: #0f1b3d;
      margin-bottom: 3px;
      white-space: normal;
      line-height: 1.35;
      transition: color 0.35s var(--ease-soft);
    }
 
    .fbg-desc {
      font-size: 0.775rem;
      color: #718096;
      white-space: normal;
      line-height: 1.55;
      transition: color 0.35s var(--ease-soft);
    }
    .fbg-item:hover .fbg-icon {
      transform: translateY(-4px) scale(1.06);
      box-shadow: 0 18px 30px rgba(46, 170, 110, 0.28);
      background: #1f8a59;
    }
    .fbg-item:hover .fbg-icon svg {
      transform: scale(1.08);
    }
    .fbg-item:hover .fbg-text {
      transform: translateY(-2px);
    }
    .fbg-item:hover .fbg-title {
      color: #0b2242;
    }
    .fbg-item:hover .fbg-desc {
      color: #566678;
    }

    @keyframes fbgFloat {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-4px);
      }
    }
 
    /* ══════════ RESPONSIVE ══════════ */
 
    /* 2-column on tablet */
    @media (max-width: 900px) {
      .fbg-strip {
        width: min(100%, calc(100% - 24px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .fbg-item:not(:last-child) {
        border-right: none;
      }
    }
 
    @media (max-width: 560px) {
      .fbg-strip {
        grid-template-columns: 1fr;
        padding: 12px;
        border-radius: 20px;
      }
      .fbg-strip::before {
        inset: 10px;
        border-radius: 16px;
      }
      .fbg-item {
        padding: 18px 16px;
      }
      .fbg-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
      }
      .fbg-title {
        font-size: 0.88rem;
      }
      .fbg-desc {
        font-size: 0.76rem;
      }
    }

    .iws-section {
      width: min(100% - 32px, 1180px);
      margin: 0 auto;
      padding: 3rem 0;
      box-sizing: border-box;
      font-family: sans-serif;
    }

    .iws-header {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-bottom: 1.75rem;
      text-align: center;
    }

    .iws-header > div {
      max-width: 720px;
      margin: 0 auto;
    }

    .iws-title {
      font-size: 36px;
      font-weight: 700;
      color: #0f1b3d;
      margin: 0 0 6px;
      text-align: center;
    }

    .iws-subtitle {
      font-size: 16px;
      color: #666;
      margin: 0;
      line-height: 1.6;
      text-align: center;
    }

    .iws-link {
      font-size: 13px;
      color: #0f1b3d;
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 14px;
      border: 1px solid #ccc;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .iws-link:hover {
      color: #0f1b3d;
      border-color: #0f1b3d;
    }

    .iws-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
    }

    .iws-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 5 / 4;
      cursor: pointer;
      min-width: 0;
      background: #dfe6eb;
      isolation: isolate;
    }

    .iws-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15, 27, 61, 0.1) 0%, rgba(15, 27, 61, 0.82) 100%);
      z-index: 1;
      transition: background 0.3s ease;
    }

    .iws-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      filter: brightness(0.65);
      transition: filter 0.3s ease, transform 0.3s ease;
    }

    .iws-card:hover img {
      filter: brightness(0.45);
      transform: scale(1.04);
    }

    .iws-card:hover::after,
    .iws-card:focus-within::after {
      background: linear-gradient(180deg, rgba(15, 27, 61, 0.06) 0%, rgba(15, 27, 61, 0.92) 100%);
    }

    .iws-card-copy {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 20px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      overflow: hidden;
    }

    .iws-card-label {
      display: block;
      position: static;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.01em;
      transform: translateY(0);
      transition: transform 0.3s ease;
    }

    .iws-card-desc {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.92);
      max-width: 90%;
      opacity: 0;
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
    }

    .iws-card:hover .iws-card-label,
    .iws-card:focus-within .iws-card-label {
      transform: translateY(-2px);
    }

    .iws-card:hover .iws-card-desc,
    .iws-card:focus-within .iws-card-desc {
      opacity: 1;
      max-height: 120px;
      margin-top: 8px;
      transform: translateY(0);
    }

    @media (max-width: 991px) {
      .iws-section {
        width: min(100% - 24px, 1180px);
        padding: 2.5rem 0;
      }

      .iws-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
      .iws-card {
        aspect-ratio: 16 / 9;
      }
    }

    @media (max-width: 700px) {
      .iws-header {
        flex-direction: column;
        align-items: stretch;
      }

      .iws-link {
        align-self: flex-start;
      }
    }

    @media (max-width: 480px) {
      .iws-section {
        width: min(100% - 20px, 1180px);
        padding: 2rem 0;
      }

      .iws-grid {
        grid-template-columns: 1fr;
      }

      .iws-card {
        aspect-ratio: 16 / 9;
      }

      .iws-title {
        font-size: 20px;
      }
    }

    @media (hover: none) {
      .iws-card-label,
      .iws-card-desc {
        transform: none;
      }

      .iws-card-desc {
        opacity: 1;
        max-height: 120px;
        margin-top: 8px;
      }
    }

 /*═══════════════════════════════════════
     SECTION 1 – HERO
════════════════════════════════════════ */


  @media (max-width: 576px) {
    .reveal,
    .fade-up,
    .story-load,
    .hero-text > *,
    .hero-card,
    .pil-card.reveal,
    .team-heading.reveal,
    .team-card-col.reveal {
      transition-duration: 0.45s !important;
    }

    .reveal.d1,
    .reveal.d2,
    .reveal.d3,
    .reveal.d4,
    .reveal.d5,
    .fade-up.d1,
    .fade-up.d2,
    .fade-up.d3,
    .fade-up.d4,
    .fade-up.d5,
    .story-load.s1,
    .story-load.s2,
    .story-load.s3,
    .story-load.s4 {
      transition-delay: 0.06s !important;
    }

    .page-ready .hero-text > *,
    .page-ready .hero-card {
      transition-delay: 0.08s !important;
    }

    .reveal,
    .story-load {
      filter: blur(1px);
    }

    .hero-text > * {
      filter: none;
    }

    .hero-dark {
      padding-inline: 12px;
    }

    .hero-dark-inner {
      padding-top: 12px;
      padding-bottom: 88px;
    }

    .hero-text {
      padding-inline: 8px;
    }

    .hero-text h1 {
      font-size: 1.7rem;
      line-height: 1.18;
    }

    .hero-text p {
      font-size: 0.84rem;
      line-height: 1.6;
      max-width: 100%;
    }

    .hero-card-wrap {
      margin-top: -72px;
      padding-inline: 8px;
    }

    .hero-card {
      border-radius: 16px;
    }

    .hero-card .team-img {
      height: 170px;
    }

    .stats-row {
      justify-content: center;
      gap: 14px 10px;
      padding: 16px 10px;
    }

    .stat-cell {
      flex: 1 1 calc(50% - 10px);
      min-width: 120px;
    }

    .stat-lbl {
      line-height: 1.45;
      letter-spacing: 0.08em;
    }

    .stats-row {
      display: block;
      min-height: 72px;
      overflow: hidden;
    }

    .stats-row .stat-cell {
      display: none;
      min-width: 0;
      padding: 0 8px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .stats-row .stat-cell.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    .stats-row .stat-div {
      display: none;
    }

    .story-section {
      padding: 10px 0 24px;
    }

    .story-heading {
      font-size: 1.9rem;
      line-height: 1.2;
      text-align: center;
    }

    .story-body p,
    .story-list li {
      font-size:16px;
      line-height: 1.7;
    }

    .story-section .col-lg-6.d-flex.justify-content-center {
      padding-left: 0;
      padding-right: 0;
      justify-content: flex-start !important;
    }

    .story-right-wrap {
      width: 100%;
      max-width: 320px;
      height: 320px;
      transform: none;
      margin: 8px 0 0;
    }

    .grey-blob {
      width: 210px;
      height: 210px;
      top: 62px;
    }

    .arc-mask {
      left: 50%;
      width: 50%;
      transform: translateX(-6%);
    }

    .arc {
      width: 320px;
      height: 320px;
      right: -210px;
      top: 20px;
    }

    .spice-tr {
      top: 0;
      right: 4px;
      width: 72px;
      height: 72px;
    }

    .spice-br {
      right: -2px;
      bottom: 8px;
      width: 92px;
      height: 92px;
    }

    .fbg-strip {
      width: min(100%, calc(100% - 20px));
      margin: 22px auto;
      padding: 14px;
      gap: 12px;
    }

    .team-section {
      padding: 32px 0 48px;
    }

    .team-heading h2,
    .section-title,
    .jgw-left .jgw-headline {
      font-size: 1.9rem;
      line-height: 1.2;
    }

    .section-title {
      text-align: center;
    }

    .jgw-left .jgw-headline {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .jgw-left .jgw-headline::after {
      left: 50%;
      transform: translateX(-50%);
    }

    .team-heading p {
      font-size: 16px;
      line-height: 1.65;
      padding-inline: 8px;
    }

    .team-card {
      padding: 24px 18px 20px;
    }

    .brands-section {
      padding: 18px 12px 24px;
    }

    .brand-container {
      padding: 18px 14px;
    }

    .jgw-wrapper {
      padding: 20px 12px 28px;
    }

    .jgw-section {
      gap: 24px;
      padding: 24px 16px;
      border-radius: 14px;
    }

    .jgw-desc {
      font-size: 0.88rem;
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .jgw-contacts {
      flex-direction: column;
      gap: 16px;
    }

    .jgw-contact {
      align-items: flex-start;
    }

    .jgw-contact-val {
      font-size: 0.88rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .jgw-card {
      padding: 18px 16px;
    }

    .jgw-card-title {
      font-size: 1.25rem;
    }

    .jgw-card-sub {
      font-size: 0.82rem;
      line-height: 1.6;
    }

    .jgw-input,
    .jgw-select,
    .jgw-textarea {
      font-size: 16px;
    }
  }
  @media (max-width: 767px) {

  .grey-blob {
    width: 200px;
    height: 200px;
    top: 60px;
  }

  .arc-mask {
    left: 100px;
  }

  .arc {
    width: 320px;
    height: 320px;
    right: -210px;
    top: 0;
  }

  /* 🔥 FIX TOP IMAGE */
  .spice-tr {
    width: 70px;
    height: 70px;
    top: -20px;
    right: -20px;
  }

  /* 🔥 FIX BOTTOM IMAGE */
  .spice-br {
    width: 85px;
    height: 85px;
    bottom: -10px;
    right: -25px;
  }
}






 .team-card-icons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }
  .nav-contact-item svg {
    width: 20px;
    height: 20px;
    fill: #2bb5a0;
    flex-shrink: 0;
}