@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium.ttf');
  font-weight: 450;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-SemiBold.ttf');
  font-weight: 600;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf');
  font-weight: 700;
}

/* GLOBAL FIXES */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  html {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
}

/* MOBILE/TABLET: Prevent pull-to-refresh */
@media (max-width: 1024px) {
  html {
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior: none !important;
  }

  body {
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  
  /* Hero section fixes */
  .hero,
  .hero-left,
  .hero-right {
    touch-action: pan-y;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Slider fixes */
  .reviews-track,
  .reviews-viewport {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* Smooth transitions (all devices) */
.hero-img,
.hero-bg-svg {
  will-change: opacity;
}

html,
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* CRITICAL: Body padding to prevent navbar overlap */
/* body {
  padding-top: 136px;
} */
/* 
.section {
  padding-bottom: clamp(28px, 4vw, 56px);
} */

p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

h2 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  text-align: center;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

:root {
  --liquid-glass-gradient: linear-gradient(180deg,
      #0091D0 -21.7%,
      #03499A 42.25%,
      #1A1A1A 134.91%);
}

.liquid-glass-base {
  background: var(--liquid-glass-gradient);
  box-shadow:
    inset -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.2),
    inset -3px -4.5px 1.5px -3px #B3B3B3,
    inset 0 0 33px rgba(242, 242, 242, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
}

/* LIQUID GLASS BUTTON WITH ARROW */
.liquid-glass-button-extended {
  composes: liquid-glass-base;

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 253px;
  height: 56px;
  padding: 18px 25px;
  gap: 29px;

  border-radius: 48px;
  border: none;
  outline: none;
  cursor: pointer;
  text-decoration: none;

  transition: all 0.3s ease;
}


.liquid-glass-button-extended .button-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
  color: #FFFFFF;
  text-transform: uppercase;
  white-space: nowrap;
}


.liquid-glass-button-extended .button-arrow {
  width: 56px;
  height: 56px;

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

  margin: -18px -25px -18px 0;
  border-radius: 50%;

  background: var(--liquid-glass-gradient);
  box-shadow:
    inset -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.2),
    inset -3px -4.5px 1.5px -3px #B3B3B3,
    inset 0 0 33px rgba(242, 242, 242, 0.5);

  backdrop-filter: blur(18px);
}


.liquid-glass-button-extended .arrow-icon {
  width: 12px;
  height: 20px;
  transform: translateX(1.5px);
}

/* STANDARD LIQUID GLASS BUTTON */
.liquid-glass-button {
  width: 164px;
  /* ✅ exact */
  height: 56px;
  /* ✅ exact */

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;

  padding: 18px 25px;
  /* ✅ exact */
  gap: 29px;
  /* ✅ exact (future-safe) */

  font-family: "Roboto", Arial, sans-serif;
  font-size: 24px;
  /* matches Figma */
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;

  background: linear-gradient(180deg,
      #0091D0 -21.7%,
      #03499A 42.25%,
      #1A1A1A 134.91%);

  border-radius: 48px;
  /* ✅ exact */

  box-shadow:
    inset -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.2),
    inset -3px -4.5px 1.5px -3px #B3B3B3,
    inset 0 0 33px rgba(242, 242, 242, 0.5);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.liquid-glass-button span {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 24px;
  text-align: center;
  color: #ffffff;
}

/* =========================
   RESET / SAFETY
========================= */
/* =========================
   RESET / SAFETY
========================= */
* {
  box-sizing: border-box;
}



/* ============================================================
   1. DESKTOP NAVBAR (min-width: 992px)
   Matches your previous design: 1920px Canvas & Underlines
   ============================================================ */
 /* ============================================================
   1. DESKTOP NAVBAR (min-width: 1200px)
   Full desktop navigation with large logo and horizontal menu
   ============================================================ */
/* ============================================================
   RESPONSIVE NAVBAR - FIXED FOR iPAD PRO
   - Desktop: 1200px and above
   - Tablet/iPad: 767px - 1199px (MOBILE NAVBAR)
   - Mobile: below 767px (MOBILE NAVBAR)
   ============================================================ */

/* ============================================================
   1. DESKTOP NAVBAR (min-width: 1200px ONLY)
   ============================================================ */
@media (min-width: 1200px) {
  body {
    margin: 0;
    padding-top: 200px;
  }

  /* Hide mobile navbar on desktop */
  .mmw-navbar-mobile {
    display: none !important;
  }

  /* Show desktop navbar */
  .mmw-navbar {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: #ffffff;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .navbar-logo,
  .mmw-nav,
  .contact-wrap {
    flex-shrink: 0;
  }

  .mmw-header-inner {
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(40px, 12.5vw, 240px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .navbar-logo {
    max-width: 322px;
    width: 100%;
    height: auto;
  }

  /* NAV LINKS */
  .mmw-nav {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 24px);
  }

  .navbar .nav-link {
    font-family: "Roboto", sans-serif;
    font-size: clamp(16px, 1.1vw, 16px);
    font-weight: 500;
    color: #03499a;
    text-transform: uppercase;
    padding: 3px clamp(8px, 1vw, 14px);
    height: 56px;
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
  }

  /* DEFAULT UNDERLINE (ALL) */
  .navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0091D0, #4384cf, #4b98e5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
  }

  .navbar .nav-link:hover::after {
    transform: scaleX(1);
  }

  /* REMOVE UNDERLINE FOR DROPDOWNS */
  .packaging-dropdown .nav-link::after,
  .about-dropdown .nav-link::after {
    display: none !important;
  }

  /* DROPDOWNS */
  .packaging-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    transition: all .3s ease;
  }

  .animated-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    transition: all .3s ease;
  }

  .packaging-dropdown:hover .packaging-menu,
  .about-dropdown:hover .animated-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* PACKAGING PILLS */
  .packaging-menu .packaging-pill {
    width: 175px;
    height: 38px;
    background: #0091D0;
    border-radius: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
  }

  /* ABOUT PILLS (WIDER) */
  .about-dropdown .dropdown-item.pill {
    width: 220px;
    height: 38px;
    background: #0091D0;
    border-radius: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
  }

  /* CONTACT */
  .contact-wrap {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: clamp(20px, 3vw, 40px);
    flex-shrink: 0;
  }

  .btn-contact-image {
    height: 100%;
    width: 100%;
  }

  .lang-switch-under {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }

  .lang-switch-under img {
    height: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1366px) { 

  body {
    margin: 0;
    padding-top: 0;
  }

  /* HIDE DESKTOP NAV */
  .mmw-navbar {
    display: none !important;
  }

  /* SHOW MOBILE NAV BAR */
  .mmw-navbar-mobile {
    display: block !important;
    background: #ffffff;
    padding: 14px 24px;              /* 🔥 more breathing room */
    position: sticky;
    top: 0;
    z-index: 1200;
    border-bottom: 1px solid #f0f0f0;
  }

  /* HEADER ROW */
  .mmw-header-inner-mobile {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }

  /* LOGO */
  .navbar-logo-mobile {
    width: 180px;                    /* 🔥 bigger logo */
    height: auto;
    display: block;
    margin-left: 8px;                /* 🔥 space before logo */
    margin-right: 12px;              /* 🔥 space after logo */
  }

  /* RIGHT GROUP */
  .mobile-right-group {
    display: flex;
    align-items: center;
    gap: 18px;                       /* 🔥 more gap overall */
  }

  /* CONTACT + FLAGS */
  .contact-wrap-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .btn-contact-image {
    height: auto;
    width: 100%;
    object-fit: cover   ;
  }
  

  .lang-switch-mobile {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }

  .lang-switch-mobile img {
    height: 14px;                    /* 🔥 slightly bigger flags */
    width: auto;
  }

  /* HAMBURGER */
  .hamburger-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: 36px;
    padding-left: 10px;              /* 🔥 space BEFORE hamburger */
    margin-left: 6px;                /* 🔥 space AFTER contact */
    background: none;
    border: none;
    cursor: pointer;
  }

  .hamburger-line {
    width: 26px;
    height: 2px;
    background: #03499a;
    display: block;
    margin-bottom: 5px;
  }

  .hamburger-line:last-child {
    margin-bottom: 0;
  }

  /* DROPDOWN MENU */
  .mobile-menu-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    transition: max-height 0.4s ease;
  }

  .mobile-menu-collapse.open {
    max-height: 100vh;
    padding-bottom: 20px;
  }

  .mobile-nav-list {
    list-style: none;
    padding: 18px 24px;
    margin: 0;
  }

  .mobile-nav-link {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #03499a;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* SUBMENUS */
  .mobile-submenu {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0 14px 14px;
  }

  .mobile-submenu.show {
    display: flex;
  }

  /* PILLS */
  .packaging-pill,
  .about-pill {
    width: 160px;                    /* 🔥 more touch-friendly */
    height: 32px;
    background: #0091D0;
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
}


/* ============================================================
   2. TABLET & MOBILE NAVBAR (max-width: 1199px)
   ALL tablets and mobile devices use mobile navbar
   This includes iPad Pro (1024px), iPad (768px), phones
   ============================================================ */
@media (max-width: 768px) {
  
  body {
    margin: 0;
    padding-top: 0;
  }

  /* HIDE DESKTOP NAV */
  .mmw-navbar {
    display: none !important;
  }

  /* SHOW MOBILE NAV BAR */
  .mmw-navbar-mobile {
    display: block !important;
    background: #ffffff;
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 1200;
    border-bottom: 1px solid #f0f0f0;
  }

  /* HEADER ROW */
  .mmw-header-inner-mobile {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }

  /* LOGO */
  .navbar-logo-mobile {
    width: 140px;
    height: auto;
    display: block;
  }

  /* RIGHT GROUP */
  .mobile-right-group {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* CONTACT + FLAGS */
  .contact-wrap-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .btn-contact-mobile {
    height: 32px;
    width: auto;
  }

  .lang-switch-mobile {
    display: flex;
    gap: 8px;
    margin-top: 6px;
  }

  .lang-switch-mobile img {
    height: 12px;
    width: auto;
  }

  /* HAMBURGER */
  .hamburger-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: 32px;
    padding: 0;
    top: -2px;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .hamburger-line {
    width: 25px;
    height: 2px;
    background: #03499a;
    display: block;
    margin-bottom: 4px;
  }

  .hamburger-line:last-child {
    margin-bottom: 0;
  }

  /* DROPDOWN MENU */
  .mobile-menu-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    transition: max-height 0.4s ease;
  }

  .mobile-menu-collapse.open {
    max-height: 100vh;
    padding-bottom: 20px;
  }

  .mobile-nav-list {
    list-style: none;
    padding: 15px 20px;
    margin: 0;
  }

  .mobile-nav-link {
    display: block;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #03499a;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* SUBMENUS */
  .mobile-submenu {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 12px 10px;
  }

  .mobile-submenu.show {
    display: flex;
  }

  /* PILLS */
  .packaging-pill {
    width: 140px;
    height: 28px;
    background: #0091D0;
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .about-pill {
    width: 155px;
    height: 28px;
    background: #0091D0;
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
}

/* ============================================================
   IPAD PRO (1024px) TO MOBILE SYNC BREAKPOINT
   This forces the Figma Mobile structure on tablets.
============================================================ */
@media(max-width:767px) {

  /* ABOUT SECTION - Centered Card with Left-Aligned Text */
  .about-section {
    width: 100% !important;
    height: auto !important;
    margin: 60px auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
    /* 🔥 Ensure content is not clipped */
  }

  .about-section * {
    position: relative !important;
    /* 🔥 Reset positioning on all children */
  }

  .about-section .package-head {
    font-size: 24px !important;
    line-height: 24px !important;
    /* 🔥 Better line height */
    width: auto !important;
    /* ✅ allow natural width */
    max-width: none !important;
    /* ✅ remove clamp */
    text-align: left !important;
    margin-bottom: 24px !important;
    /* 🔥 Fixed spacing */
    margin-top: 0 !important;
    padding: 0 12px !important;
  }

  .about-section p {
    height: auto;
    width: 100% !important;
    max-width: 380px !important;
    font-size: 16px !important;
    line-height: 18px !important;
    /* 🔥 More line height (25.6px) */
    font-weight: 400 !important;
    padding: 0 12px !important;
    text-align: left !important;
    margin-bottom: 24px !important;
    /* 🔥 More space after paragraph */
    margin-top: 0 !important;
    display: block !important;
    clear: both !important;
  }

  .about-section h2 {
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
    max-width: 380px !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    /* 🔥 Fixed spacing */
    line-height: 28px !important;
    display: block !important;
  }

  /* Button */
  .know-more-link {
    display: inline-flex !important;
    align-self: flex-start !important;
    padding: 0 12px !important;
    max-width: 380px !important;
    width: 100% !important;
    /* margin-top: 80px !important; */
    margin-bottom: 0 !important;
    position: static !important;
    /* 🔥 Ensure natural flow */
  }

  .know-more-btn {
    align-items: center !important;
    height: 44px !important;
    width: auto !important;
    display: inline-flex !important;
  }
}
@media (min-width: 768px) and (max-width: 1366px) {

  .about-section {
    margin: 48px auto !important;
    padding: 0 20px !important;
  }

  /* Heading */
  .about-section h2,
  .about-section .package-head {
    font-size: 28px !important;
    line-height: 28px !important;
    margin-bottom: 20px !important;   /* 🔥 reduced */
  }

  /* Paragraph */
  .about-section p {
    font-size: 18px !important;
    line-height: 20px !important;
    margin-bottom: 12px !important;   /* 🔥 KEY FIX */
  }

  /* Button wrapper */
  .know-more-link {
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important; 
    
    margin-bottom: 0px !important;        /* 🔥 reset */
    width: 100% !important;
  }

  .know-more-btn {
    margin: 0 auto !important;
  }
}


/* =========================
   HERO SECTION (FIGMA LOCKED)
========================= */
/* =========================
   HERO SECTION - FLUID REFACTOR
========================= */
.hero {
  width: 100%;
  /* Use min-height instead of fixed height to prevent content cropping on zoom */
  min-height: 960px;
  display: flex;
  margin: 0;
  overflow: hidden;
}

/* =========================
   LEFT PANEL - RATIO BASED
========================= */
.hero-left {
  /* 817px / 1920px = ~42.5% */
  width: 42.5%;
  min-height: 960px;
  display: flex;
  align-items: center;

  /* DYNAMIC PADDING:
     Starts at 239px but shrinks if the screen gets tight (like at 110% zoom)
  */
  padding-left: clamp(40px, 12.4vw, 239px);
  position: relative;
  overflow: hidden;
}

/* TEXT */
.hero-left h1 {
  /* Allow the width to be fluid so it doesn't overlap the right panel */
  width: 100%;
  max-width: 505px;
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  /* Font size uses clamp to stay legible when zoomed */
  font-size: clamp(42px, 3.75vw, 72px);
  line-height: 1.05;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

/* =========================
   RIGHT PANEL - RATIO BASED
========================= */
.hero-right {
  /* 1103px / 1920px = ~57.5% */
  width: 57.5%;
  min-height: 960px;
  position: relative;
  overflow: hidden;
}

/* Ensure background images fill their respective fluid panels */
.hero-img,
.hero-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hides images by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
  z-index: 1;
}

/* Shows the image when JS adds the 'active' class */
.hero-img.active,
.hero-bg-svg.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* =========================
   ZOOM PROTECTION (110%+)
========================= */
@media (max-width: 1800px) {
  .hero-left {
    /* Give the text more room to breathe at high zoom levels */
    padding-left: 5%;
  }
}

/* =========================
   TABLET & MOBILE (≤ 1024px)
   Matches Figma mobile design
========================= */
@media (max-width: 1366px) {

  /* Stack vertically - image on top, text on bottom */
  .hero {
    flex-direction: column;
    min-height: auto;
    height: auto;
  }

  /* IMAGE SECTION - TOP */
  .hero-right {
    width: 100% !important;
    height: 700px;
    /* 🔥 Figma mobile height */
    min-height: 430px;
    order: 1;
    /* Shows first */
    position: relative;
  }

  .hero-img,
  .hero-bg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 Fills the space */
  }

  /* TEXT SECTION - BOTTOM */
  .hero-left {
    width: 100% !important;
    min-height: auto;
    height: auto;
    order: 2;
    /* Shows second */
    padding: 40px 24px;
    /* 🔥 Mobile padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 🔥 Center text on mobile */
  }

  .hero-left h1 {
    width: 100%;
    max-width: 15ch;
    font-size: clamp(32px, 8vw, 48px);
    font-size: 32px;
    line-height: 28px;

    line-height: 1.2;
    text-align: center;
    margin: 0 auto;
  }
}

/* =========================
   SMALLER MOBILE (≤ 768px)
========================= */
@media (max-width: 769px) {

  .hero-right {
    height: 380px;
    /* 🔥 Slightly smaller on smaller screens */
    min-height: 380px;
  }

  .hero-left {
    padding: 32px 20px;
  }

  .hero-left h1 {
    font-size: clamp(28px, 7vw, 40px);
  }
}

/* =========================
   VERY SMALL MOBILE (≤ 576px)
========================= */
@media (max-width: 576px) {

  .hero-right {
    height: 320px;
    /* 🔥 Even smaller for very small screens */
    min-height: 320px;
  }

  .hero-left {
    padding: 24px 16px;
  }

  .hero-left h1 {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 24px;
  }
}

/* =========================
   ABOUT SECTION – FIGMA EXACT
   Size: 1291 × 381
   Section gap: 81px
========================= */
.about-section {
  width: 1291px;
  /* exact */
  height: 381px;
  /* exact */
  margin: 81px auto;
  /* section gap */

  display: flex;
  flex-direction: column;
  align-items: center;
  /* 🔥 centers children horizontally */
  justify-content: center;

  text-align: center;
}


/* =========================
   HEADING
========================= */
.about-section .package-head {
  width: 100%;
  max-width: 1291px;

  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  /* Medium */
  font-size: 48px;
  /* exact */
  line-height: 52px;
  /* exact */
  letter-spacing: 0;
  text-align: center;

  color: #0066CC;
  margin: 0 0 32px;
  /* gap to body text */
}

.about-section .package-head span {
  display: block;
  color: #023b7c;
}


/* =========================
   BODY TEXT
========================= */
.about-section p {
  width: 1049px;
  /* exact */
  max-height: 163px;
  /* exact */

  margin: 0 auto 32px;
  /* 🔥 centers inside 1291 + space for button */

  display: flex;
  align-items: center;
  /* vertical centering */
  justify-content: center;

  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  /* Regular */
  font-size: 22px;
  /* exact */
  line-height: 33px;
  /* exact */
  letter-spacing: 0;
  text-align: center;

  color: #1a1a1a;
}



/* =========================
   PNG BUTTON
========================= */
.know-more-link {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}



.know-more-link:active {
  transform: translateY(-1px) scale(0.98);
}

.know-more-btn {
  display: block;
  width: auto;
  height: 56px;
  /* Match your original button height */
  transition: filter 0.3s ease;
}


/* =========================
   RESPONSIVE (SCALE, NOT REDESIGN)
========================= */
@media (max-width: 1440px) {
  .about-section {
    width: 90%;
    height: auto;
    padding: 60px 40px;
  }

  .about-section .package-head {
    width: 100%;
  }

  .about-section p {
    width: 100%;
    max-width: 1049px;
  }
}



/* ============================================================
   SHARED UTILITY FOR ALIGNMENT (Matches Hero/Navbar)
   ============================================================ */
.packaging-section-1,
.packaging-section {
  width: 100%;
  box-sizing: border-box;
  /* Syncs with Hero: Starts at 239px, shrinks to 40px, then snaps to 24px on mobile */
  padding-left: clamp(40px, 12.4vw, 239px);
  padding-right: clamp(40px, 12.4vw, 239px);
  margin: 0 auto;
  background: #ffffff;
}

/* ============================================================
   PACKAGING SECTION 1 (The Large Feature Row)
   ============================================================ */
.packaging-grid-1 {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.415fr 1fr;
  /* Exact 832:588 ratio */
  gap: 20px;
  align-items: stretch;
}

.pack-card-1 {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.image-card-1 {
  aspect-ratio: 832 / 562;
  background: #f3f4f8;
}

.image-card-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.text-card-1 {
  height: 100%;
  position: relative;
  padding: clamp(30px, 4vw, 60px);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0056b3;
  /* Fallback color */
  border-radius: 24px;
  overflow: hidden;
}

.text-card-1 .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-card-1 h3,
.text-card-1 p {
  position: relative;
  z-index: 1;
}

.text-card-1 h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.1;
  margin: 0 0 24px 0;
}

.text-card-1 p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.4;
  margin: 0;
  max-width: 429px;
  opacity: 0.95;
}

/* ============================================================
   PACKAGING SECTION 2 (The Two-Column Grid)
   ============================================================ */
.packaging-section {
  margin-top: 20px;
  padding-bottom: 60px;
}

.packaging-grid {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pack-card.image-card {
  position: relative;
  aspect-ratio: 710 / 473;
  border-radius: 25px;
  background: #f5f5f9;
  width: 100%;
}

.pack-card.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 25px;
}

.pack-btn-image {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  display: block;
  height: 12%;
  min-height: 44px;
  max-height: 56px;
  z-index: 2;
  transition: all 0.3s ease;
}

.pack-btn-image img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   RESPONSIVE OVERRIDES (Tablet & Mobile)
   ============================================================ */
/* ============================================================
   MOBILE OVERRIDES (Specific to Section 2)
   ============================================================ */
/* ============================================================
   MOBILE ONLY FIX: PACKAGING SECTION 2
   ============================================================ */
/* ============================================================
   MOBILE FIX: REDUCED SIZE & PROPER PADDING
   ============================================================ */
/* ============================================================
   MOBILE OVERRIDE: SECTION 2 (REDUCED CARD & BUTTON)
   ============================================================ */
  @media (max-width: 992px) {

    /* SECTION: Forces equal 24px side gaps to match Hero */
    .packaging-section {
      width: 100% !important;
      padding-left: 24px !important;
      padding-right: 24px !important;
      box-sizing: border-box !important;
      display: block !important;
    }

    /* GRID: Centers the card stack perfectly */
    .packaging-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 90px;
      /* Matches your card width so margins stay even */
      max-width: 344px;
      margin: 0 auto !important;
      width: 100%;
    }

    /* CARD: Fixed height and visible overflow for the button */
    .pack-card.image-card {
      width: 100% !important;
      /* Spans the full 344px grid width */
      height: 300px;
      background: #f5f5f9;
      border-radius: 25px;
      position: relative;
      overflow: visible !important;
      /* Button won't be cut off */
      display: block;
      padding: 0;
    }

    /* IMAGE: Full-bleed and rounded */
    .pack-card.image-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 25px;
      display: block;
    }

    /* BUTTON: Perfectly centered on the bottom edge */
    .pack-btn-image {
      position: absolute;
      left: 50%;
      bottom: -25px;
      transform: translateX(-50%);
      width: 220px;
      height: auto;
      z-index: 100;
      /* Stays above the image */
    }

    .pack-btn-image img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    /* 🔥 TEXT SIZE ADJUSTMENTS FOR SECTION 1 */
    .packaging-section-1 h2,
    .packaging-section-1 h3,
    .packaging-section-1 .heading {
      font-size: 24px !important;
    }

    .packaging-section-1 p {
      font-size: 16px !important;
      line-height: 18px;
      font-weight: 400 !important;
    }
  }
  


@media (max-width: 992px) {
  
  .packaging-section-1 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Stack Section 1 */
  .packaging-grid-1 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  /* Stack Section 2 */
  .packaging-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    /* Space for the overlapping button */
    max-width: 600px;
  }

  /* 🔥 TEXT SIZE ADJUSTMENTS FOR SECTION 1 */
  .packaging-section-1 h2,
  .packaging-section-1 h3,
  .packaging-section-1 .heading {
    font-size: 24px !important;
  }

  .packaging-section-1 p {
    font-size: 16px !important;
    font-weight: 400 !important;
  }


}
@media (min-width:768px) and (max-width:1366px){
 .packaging-section-1,
.packaging-section {
  width: 100%;
  box-sizing: border-box;
  /* Syncs with Hero: Starts at 239px, shrinks to 40px, then snaps to 24px on mobile */
  padding-left: clamp(40px, 12.4vw, 239px);
  padding-right: clamp(40px, 12.4vw, 239px);
  margin: 0 auto;
  background: #ffffff;
}

/* ============================================================
   PACKAGING SECTION 1 (The Large Feature Row)
   ============================================================ */
.packaging-grid-1 {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.415fr 1fr;
  /* Exact 832:588 ratio */
  gap: 20px;
  align-items: stretch;
}

.pack-card-1 {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.image-card-1 {
  aspect-ratio: 832 / 562;
  background: #f3f4f8;
}

.image-card-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.text-card-1 {
  height: 100%;
  position: relative;
  padding: clamp(30px, 4vw, 60px);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0056b3;
  /* Fallback color */
  border-radius: 24px;
  overflow: hidden;
}

.text-card-1 .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-card-1 h3,
.text-card-1 p {
  position: relative;
  z-index: 1;
}

.text-card-1 h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 28px);
  line-height: 1.1;
  margin: 0 0 24px 0;
}

.text-card-1 p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.4;
  margin: 0;
  max-width: 429px;
  opacity: 0.95;
}

/* ============================================================
   PACKAGING SECTION 2 (The Two-Column Grid)
   ============================================================ */
.packaging-section {
  margin-top: 20px;
  padding-bottom: 60px;
}

.packaging-grid {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pack-card.image-card {
  position: relative;
  aspect-ratio: 710 / 473;
  border-radius: 25px;
  background: #f5f5f9;
  width: 100%;
}

.pack-card.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 25px;
}

.pack-btn-image {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  z-index: 3;

  /* 🔥 CONTROL SIZE HERE */
  width: clamp(120px, 16vw, 180px);
  height: auto;
}

/* BUTTON IMAGE */
.pack-btn-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

}




/* =========================================
   MANUFACTURING SECTION
========================================= */
.manufacturing-section {
  width: 100%;
  margin-top: 81px;
}

/* =========================================
   CONTAINER - SYNCED ALIGNMENT
========================================= */
.manufacturing-container {
  min-height: 689px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;

  /* SYNCED PADDING: Matches Navbar, Hero, and Packaging */
  padding-left: clamp(40px, 12.4vw, 239px);
  padding-right: clamp(40px, 12.4vw, 239px);

  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

/* =========================================
   LEFT BLUE CARD
========================================= */
.manufacturing-left {
  flex: 0 1 702px;
  width: 100%;
  min-width: 0;
  padding: 56px 48px 56px 80px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 25px 0 0 25px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  background-color: #03499A;
  /* Fallback */
}

.manufacturing-left .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.manufacturing-left h3,
.manufacturing-left p {
  position: relative;
  z-index: 1;
}

.manufacturing-left h3 {
  font-family: "Roboto", sans-serif;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 24px 0;
}

.manufacturing-left p {
  max-width: 506px;
  font-family: "Roboto", sans-serif;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 32px 0;
  opacity: 0.95;
}

/* =========================================
   PNG BUTTON
========================================= */
.manufacturing-btn-png {
  width: 253px;
  height: 56px;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.manufacturing-btn-png .btn-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}


/* =========================================
   RIGHT IMAGE
========================================= */
.manufacturing-right {
  flex: 0 1 738px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 0 25px 25px 0;
}

.manufacturing-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   MANUFACTURING SECTION - MOBILE
   Full Width Edge-to-Edge (Like Hero)
========================= */
@media (min-width:992px) and (max-width:1366px) {
  /* =========================================
   MANUFACTURING SECTION
========================================= */
.manufacturing-section {
  width: 100%;
  margin-top: 81px;
}

/* =========================================
   CONTAINER - SYNCED ALIGNMENT
========================================= */
.manufacturing-container {
  min-height: 689px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;

  /* SYNCED PADDING: Matches Navbar, Hero, and Packaging */
  padding-left: clamp(40px, 12.4vw, 239px);
  padding-right: clamp(40px, 12.4vw, 239px);

  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

/* =========================================
   LEFT BLUE CARD
========================================= */
.manufacturing-left {
  flex: 0 1 702px;
  width: 100%;
  min-width: 0;
  padding: 56px 48px 56px 80px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 25px 0 0 25px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  background-color: #03499A;
  /* Fallback */
}

.manufacturing-left .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.manufacturing-left h3,
.manufacturing-left p {
  position: relative;
  z-index: 1;
}

.manufacturing-left h3 {
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 28px;
  margin: 0 0 24px 0;
}

.manufacturing-left p {
  max-width: 506px;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px.4;
  margin: 0 0 32px 0;
  opacity: 0.95;
}

/* =========================================
   PNG BUTTON
========================================= */
.manufacturing-btn-png {
 width: clamp(120px, 16vw, 180px);
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.manufacturing-btn-png .btn-image {
 width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}



/* =========================================
   RIGHT IMAGE
========================================= */
.manufacturing-right {
  flex: 0 1 738px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 0 25px 25px 0;
}

.manufacturing-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

}

@media (max-width: 992px) {
  .manufacturing-section {
    margin-top: 40px;
    width: 100%;
    padding: 0;
    /* 🔥 No section padding */
  }

  .manufacturing-container {
    padding: 0 !important;
    /* 🔥 No padding at all */
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;

    /* Image on top, text on bottom */
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    min-height: unset;
    gap: 0;
    /* 🔥 No gap between sections */
  }

  /* Text Box (Bottom) - Blue gradient background */
  .manufacturing-left {
    flex: none;
    width: 100%;
    padding: 40px 32px 44px 32px;
    /* NO border-radius - straight edges */
    border-radius: 0;
  }

  /* Image Box (Top) */
  .manufacturing-right {
    flex: none;
    width: 100%;
    height: 430px;
    /* 🔥 Matches Figma exactly */
    /* NO border-radius - straight edges */
    border-radius: 0;
    overflow: hidden;
  }

  .manufacturing-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Background SVG - NO border-radius */
  .manufacturing-left .card-bg-svg {
    border-radius: 0;
  }

  /* Text styling */
  .manufacturing-left h3 {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 16px;
    color: #ffffff;
  }

  .manufacturing-left p {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin: 0 0 24px;
    color: #ffffff;
    opacity: 0.95;
  }

  /* Button */
  .manufacturing-btn-png {
    width: 180px;
    height: 44px;
    display: block;
  }

  .manufacturing-btn-png .btn-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* iPhone 14 Pro Max exact sizing */
@media (max-width: 430px) {
  .manufacturing-right {
    height: 430px;
    /* Exact Figma height */
  }

  .manufacturing-left {
    padding: 40px 24px 44px 32px;
    /* Exact Figma padding */
  }

  .manufacturing-left h3 {
    font-size: 28px;
    line-height: 34px;
    width: 100%;
    max-width: 366px;
    /* Text width from Figma */
  }

  .manufacturing-left p {
    font-size: 15px;
    line-height: 24px;
    width: 100%;
    max-width: 366px;
    /* Text width from Figma */
  }

  .manufacturing-btn-png {
    width: 180px;
    height: 44px;
  }
}

/* Smaller phones */
@media (max-width: 375px) {
  .manufacturing-right {
    height: 380px;
  }

  .manufacturing-left {
    padding: 36px 20px 40px 28px;
  }

  .manufacturing-left h3 {
    font-size: 26px;
    line-height: 32px;
  }

  .manufacturing-left p {
    font-size: 14px;
    line-height: 22px;
  }

  .manufacturing-btn-png {
    width: 170px;
    height: 42px;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .manufacturing-right {
    height: 350px;
  }

  .manufacturing-left {
    padding: 32px 18px 36px 24px;
  }

  .manufacturing-left h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .manufacturing-left p {
    font-size: 13px;
    line-height: 20px;
  }

  .manufacturing-btn-png {
    width: 160px;
    height: 40px;
  }
}

/* =========================
   BRANDS SECTION (DESKTOP)
========================= */

.brands-section {
  background: #ffffff;
  padding-top: 81px;
  padding-bottom: 81px;
}

.brands-inner {
  width: 1207px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* TITLE */
.brands-title {
  font-family: "Roboto", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 52px;
  color: #03499a;
  margin-bottom: 50px;
  white-space: nowrap;
}

/* =========================
   BRAND STRIP (DESKTOP SVG)
========================= */

.brands-wrapper {
  position: relative;
  width: 1207px;
  max-width: 100%;
  margin: 0 auto;
}

/* Images */
.brands-svg {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.35s ease;
}

/* Default */
.brands-color {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.brands-bw {
  opacity: 1;
}

/* Hover swap */
.brands-wrapper:hover .brands-color {
  opacity: 1;
}

.brands-wrapper:hover .brands-bw {
  opacity: 0;
}

/* =========================
   MOBILE WRAPPER (HIDDEN)
========================= */

.brands-wrapper.mobile {
  display: none;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1440px) {
  .brands-inner {
    padding-left: 240px;
    padding-right: 240px;
  }
}

@media (max-width: 1366px) {
  .brands-inner {
    padding-left: 80px;
    padding-right: 80px;
  }

  .brands-title {
    font-size: 42px;
    line-height: 48px;
  }

}

/* =========================
   MOBILE & TABLET (≤ 992px)
========================= */

@media (max-width: 992px) {

  .brands-section {
    padding: 50px 24px;
  }

  .brands-inner {
    width: 100%;
    padding: 0;
  }

  /* Title */
  .brands-title {
    font-size: 24px !important;
    line-height: 1.2;
    white-space: normal;
    margin-bottom: 40px;
    text-align: center;
  }

  /* Hide desktop SVG */
  .brands-wrapper:not(.mobile) {
    display: none;
  }

  /* Show mobile image */
  .brands-wrapper.mobile {
    display: block;
    width: 100%;
    margin: 0 auto;
  }

  .brands-wrapper.mobile img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* =========================
   TOUCH DEVICES → ALWAYS COLOR
========================= */
@media (hover: none) and (pointer: coarse) {

  .brands-color {
    opacity: 1 !important;
  }

  .brands-bw {
    opacity: 0 !important;
  }

}


/* =========================
   SMALL MOBILE (≤ 576px)
========================= */

@media (max-width: 576px) {

  .brands-section {
    padding: 40px 20px;
  }

  .brands-title {
    font-size: 28px;
  }

  .brands-wrapper.mobile {
    margin-top: 32px;
  }
}

/* 
@media (max-width: 768px) {
  .brands-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .brands-title {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 36px;
  }

  .brand-card {
    width: 160px;
    height: 72px;
  }
}

@media (max-width: 480px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-card {
    width: 140px;
    height: 64px;
  }
} */
/* =========================================
   REVIEWS SECTION
========================================= */
.reviews-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
}

/* SECTION BACKGROUND IMAGE */
.section-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* TITLE */
.reviews-title {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  margin-bottom: 52px;
}

/* OUTER SHELL */
.reviews-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* VIEWPORT - SYNCED ALIGNMENT
   Ensures the card container stays within Navbar limits even at 110% zoom.
*/
.reviews-viewport {
  width: 100%;
  overflow: hidden;
  padding-left: clamp(40px, 12.4vw, 239px);
  padding-right: clamp(40px, 12.4vw, 239px);
  box-sizing: border-box;
}

/* TRACK */
.reviews-track {
  display: flex;
  /* Use a fluid gap that scales with screen width */
  gap: clamp(15px, 2vw, 26.5px);
  transition: transform 0.5s ease;
}

/* CARD - FIXED FOR 110% ZOOM
   We use a calc to ensure 3 cards always fit the viewport width perfectly.
   (100% / 3) minus the gaps.
*/
.review-card {
  width: calc((100% - (2 * clamp(15px, 2vw, 26.5px))) / 3);
  min-width: 320px;

  /* ❌ REMOVE */
  /* height: 336px; */

  /* ✅ ADD */
  min-height: 336px;

  padding: clamp(32px, 3vw, 58px) clamp(24px, 3vw, 40px);
  flex-shrink: 0;
  border-radius: 50px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}


.review-bg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 0;
}

.review-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-card p {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.5;
  margin: 0;
}

.review-card span {
  opacity: 0.9;
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 500;
}

/* ARROWS - GUTTER POSITIONING */
.review-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.review-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-arrow.left {
  left: calc((clamp(40px, 12.4vw, 239px) / 2) - 24px);
}

.review-arrow.right {
  right: calc((clamp(40px, 12.4vw, 239px) / 2) - 24px);
}

/* =========================================
   RESPONSIVE OVERRIDES
========================================= */
@media (max-width: 1366px) {
  .review-card {
    /* Transition to 2 cards or 1 card for tablet/mobile */
    width: calc((100% - clamp(15px, 2vw, 26.5px)) / 2);
  }
}

/* =========================================
   MOBILE REVIEWS FIX (UP TO 992px)
========================================= */
@media (max-width: 842px) {

  .review-bg {
    display: block;
    /* 🔥 critical */
  }

  /* SECTION: Use overflow-x: auto and Snap for centered alignment */
  .reviews-viewport {
    padding-left: 24px !important;
    padding-right: 24px !important;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Essential for centering on click */
    scrollbar-width: none;
  }

  .reviews-viewport::-webkit-scrollbar {
    display: none;
  }

  .review-content {
    justify-content: flex-start;
    /* ✅ FIX */

    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
    /* gap: 6px;   👈 THIS controls p → name spacing */
  }

  .review-content p {
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
    margin: 10px 0;
    /* margin-bottom: 4px !important; 🔥 tighten gap */
  }

  .review-content .name-content {
    margin: 0 !important;
    /* 🔥 remove any top gap */

  }

  .reviews-track {
    display: flex;
    gap: 20px;
    /* Space between cards */
  }

  .review-card {
    width: 100% !important;
    min-width: 100%;
    margin: 0 auto;
    max-width: 344px;
    height: auto;
    min-height: 380px;
    border-radius: 25px;
    scroll-snap-align: center;
    /* Forces the card to stay centered */
    flex-shrink: 0;
  }

  /* ARROWS: Borderless and transparent background */
  .review-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    /* Removes the outer line/circle */
    border: none !important;
    /* Ensures no border is visible */
    box-shadow: none !important;
    /* Removes any shadow line */
    z-index: 20;
    cursor: pointer;
  }

  .review-arrow.left {
    left: 10px;
    /* Adjusted to sit elegantly on the card edge */
  }

  .review-arrow.right {
    right: 10px;
  }

  .review-arrow img {
    width: 30px;
    /* Slightly larger icon since the circle is gone */
    height: 30px;
    object-fit: contain;
    /* Optional: helps visibility if the card background is dark */
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
  }

  .reviews-title {
    font-size: 24px;
    margin-bottom: 28px;
    padding: 0 20px;
  }
}
@media (min-width: 842px) and (max-width: 1366px) {

  /* VIEWPORT: clip everything except arrows */


  .reviews-viewport {
  position: relative;

  /* Arrow space */
  padding-left: 72px;
  padding-right: 72px;

  overflow: hidden; /* HARD CLIP */
}

/* REAL CONTENT AREA (between arrows) */
.reviews-viewport::before {
  content: "";
  position: absolute;
  top: 0;
  left: 72px;
  right: 72px;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}



  /* TRACK: horizontal only */
  .reviews-track {
    display: flex;
    gap: 24px;
    padding-left: 12px;          /* arrow → card gap */
    padding-right: 12px;
    align-items: stretch;
  }

  /* CARDS: exactly 2 visible */
  .review-card {
    width: calc(50% - 12px) !important;
    min-width: calc(50% - 12px);
    max-width: none;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  /* 🔥 HIDE ANY EXTRA CONTENT VISUALLY */
  .reviews-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: transparent;
    pointer-events: none;
  }

  /* ARROWS: float above, not affecting layout */
  .review-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .review-arrow.left {
    left: 12px;
  }

  .review-arrow.right {
    right: 12px;
  }
}





/* @media (max-width: 768px) {
  .reviews-viewport {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .review-card {
    width: 100%;
    height: auto;
    min-height: 300px;
    padding: 30px 24px;
    border-radius: 30px;
  }

  .review-arrow {
    display: none;
  }
} */

/* =========================
   CIRCULAR SECTION
========================= */
.circular-section {
  padding: 80px 0;
  width: 100%;
}

.circular-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* Syncs with Navbar padding logic */
  padding-left: clamp(40px, 12.4vw, 239px);
  padding-right: clamp(40px, 12.4vw, 239px);
  box-sizing: border-box;
}

.circular-card {
  width: 100%;
}

.circular-media {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 40vw, 734px); /* 🔥 zoom-safe */
  border-radius: 32px;
  overflow: hidden;
}

.circular-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* TITLE - SINGLE LINE ALIGNMENT */
.circular-title {
  position: absolute;
  /* (Figma 120px / 1441px) = 8.3% */
  left: 8.3%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: clamp(24px, 3.3vw, 44px);
  font-weight: 500;
  /* line-height: 1; */
  margin: 0;
  z-index: 2;
  /* Forces text to stay on one line */
  white-space: normal;      /* 🔥 allow wrap */
  max-width: 40%;           /* prevents ugly wide wrapping */
  line-height: 1.15;
}

/* =========================
   GLASS CIRCLE
========================= */
.circular-glass {
  position: absolute;
  /* (Figma 520px / 1441px) = ~36% */
  width: 36%;
  aspect-ratio: 1 / 1;

  /* (Figma 277px / 1441px) = 19.2% from right */
  right: 19.2%;
  /* (Figma 100px / 734px) = 13.6% from top */
  top: 13.6%;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 3;
}

.glass-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.glass-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
    padding: clamp(16px, 4vw, 8%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 5%;
}

.glass-content p {
  width: 85%;
  font-family: "Roboto", sans-serif;
  font-size: clamp(12px, 1.5vw, 18px);
  line-height: 1.3;
  margin: 0;
  color: #ffffff;
}

/* BUTTONS */
.circular-btn-image {
  display: block;
  /* Scaling button relative to glass circle */
  width: 45%;
  height: auto;
  transition: transform 0.3s ease;
}

.circular-btn-image img {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-btn {
  display: none !important;
}

/* =========================
   MOBILE
========================= */
/* =========================
   MOBILE ADJUSTMENTS
========================= */
@media (max-width: 768px) {

  /* Match master rail padding */
  .circular-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* CARD becomes anchor for button */
  .circular-card {
    position: relative;
  }

  /* IMAGE CONTAINER */
  .circular-media {
    aspect-ratio: 344 / 500;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    /* 🔥 allows button to come out */
  }

  /* BACKGROUND IMAGE */
  .circular-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }

  /* TITLE – centered at top */
  .circular-title {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    font-size: 24px;
    text-align: center;
    white-space: normal;
    z-index: 5;
  }

  /* GLASS CIRCLE */
  .circular-glass {
    width: 85%;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }

  /* TEXT INSIDE GLASS */
  .glass-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
  }

  /* HIDE DESKTOP BUTTON */
  .circular-btn-image:not(.mobile-btn) {
    display: none !important;
  }

  /* =========================
     MOBILE BUTTON (KEY PART)
  ========================= */

  .circular-btn-image.mobile-btn {
    display: block !important;
    position: absolute;

    left: 50%;
    bottom: -26px;
    /* 🔥 half inside / half outside */
    transform: translateX(-50%);

    width: 175px;
    z-index: 10;
  }

  .circular-btn-image.mobile-btn img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: auto;
  }
}

@media (min-width: 769px) and (max-width: 1366px) {

  /* USE MOBILE BUTTON ON TABLET */
  .circular-btn-image:not(.mobile-btn) {
    display: none !important;
  }

  .circular-btn-image.mobile-btn {
    display: block !important;

    position: absolute;
    left: 50%;
    bottom: -32px;                 /* 🔥 clean tablet overlap */
    transform: translateX(-50%);

    width: 200px;                  /* 🔥 tablet-sized button */
    z-index: 10;
  }
  .circular-title {
    
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  z-index: 2;
  /* Forces text to stay on one line */
  white-space: nowrap;
}
  .glass-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 5%;
}

  .glass-content p {
  width: 85%;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
  margin: 0;
  color: #ffffff;
}

  .circular-btn-image.mobile-btn img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: auto;
  }

  /* Ensure card is the anchor */
  .circular-card {
    position: relative;
  }

  /* Prevent glass circle from overlapping button */
  .circular-glass {
    pointer-events: none;
  }
}


/* =========================
   FOOTER - CORRECT ALIGNMENT WITH 240PX MARGINS
   Width: 1920px
   Height: 342px
   Background: #EBEAE8 (opacity 0.9)
========================= */
.mmw-footer {
  top: 0;
  left: 0;
  width: 100%;
  height: 342px;
  padding: 0;
  /* 🔥 REMOVED padding - container handles spacing */
  z-index: 1000;
  background: rgba(235, 234, 232, 0.9);
}

.footer-container {
  width: 1440px;
  /* Content area: 1920 - 240 - 240 */
  height: 342px;
  margin: 0 auto;
  /* Centers container with 240px on each side */
  position: relative;
}

/* Rest of the CSS remains the same */
.footer-brand {
  position: absolute;
  left: 0;
  top: 44px;
  /* width: 375px; */
  /* height: 169px; */
}

.footer-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-links {
  position: absolute;
  left: 466px;
  top: 83px;
  width: 144px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links a {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-transform: uppercase;
  color: #03499A;
  text-decoration: none;
  transition: color 0.3s ease;
}



.footer-contact {
  position: absolute;
  left: 746px;
  top: 78px;
  width: 695px;
}

.contact-line {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 23px;
  margin: 0;
  color: #03499A;
}

.contact-line:first-child {
  line-height: 35px;
  margin-bottom: 2px;
}

.contact-line:nth-child(2) {
  line-height: 26px;
}

.footer-social {
  position: absolute;
  /* left: 1px; */
  top: 120px;
  display: flex;
  gap: 25px;
}

.social-link {
  display: block;
  width: 44px;
  height: 44px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.social-link svg {
  width: 100%;
  height: 100%;
  display: block;
}

.back-to-top {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  box-shadow:
    inset -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.5),
    inset 3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.2),
    inset -3px -4.5px 1.5px -3px #B3B3B3,
    inset 0px 0px 33px rgba(242, 242, 242, 0.5);
  backdrop-filter: blur(18px);
  border-radius: 5px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.back-to-top svg {
  width: 12px;
  height: 20px;
  transform: rotate(-90deg);
}


/* MOBILE FOOTER */
.mmw-footer-mobile {
  display: none;
  width: 100%;
  background: #efede9;
}

.footer-mobile-container {
  max-width: 390px;
  margin: 0 auto;
  padding: 32px 24px 28px;
}

/* GRID */
.footer-mobile-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  column-gap: 20px;
}

/* LEFT */
.footer-mobile-logo {
  width: 150px;
  margin-bottom: 22px;
}

.footer-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-mobile-links a {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #03499A;
  text-transform: uppercase;
  text-decoration: none;
}

/* RIGHT */
.footer-mobile-right {
  display: flex;
  flex-direction: column;
  margin-top: 87px;
  gap: 8px;
}

.footer-mobile-contact p {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #03499A;
}

.footer-mobile-contact .location {
  font-weight: 700;
  margin-bottom: 2px;
}

/* SOCIAL */
.footer-mobile-social {
  display: flex;
  gap: 8px;
  /* margin-top: 4px; */
}

.footer-mobile-social img {
  width: 28px;
  height: 28px;
}

/* TOGGLE */
@media (max-width: 991px) {
  .mmw-footer {
    display: none;
  }

  .mmw-footer-mobile {
    display: block;
  }
}


/* =========================
   RESPONSIVE - TABLET
========================= */


@media (max-width: 1440px) {
  .footer-brand {
    width: 280px;
    height: auto;
  }

  .footer-links {
    left: 380px;
  }

  .footer-contact {
    left: 540px;
  }

  .footer-social {
    left: 540px;
  }

  .contact-line {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1366px) {

  /* FOOTER WRAPPER */
  .mmw-footer {
    height: auto;
    padding: 40px 24px;
    position: relative;
  }

  /* CONTAINER */
  .footer-container {
    width: 100%;
    height: auto;
    max-width: 1024px;
    margin: 0 auto;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;

    position: relative;
  }

  /* RESET ABSOLUTE POSITIONING */
  .footer-brand,
  .footer-links,
  .footer-contact,
  .footer-social,
  .back-to-top {
    position: static;
  }

  /* BRAND */
  .footer-brand {
    flex: 0 0 220px;
  }

  .footer-logo {
    max-width: 200px;
    height: auto;
  }

  /* LINKS */
  .footer-links {
    flex: 0 0 160px;
    margin-top: 12px;
  }

  .footer-links a {
    font-size: 16px;
    line-height: 20px;
  }

  /* CONTACT */
  .footer-contact {
    flex: 1;
    margin-top: 8px;
  }

  .contact-line {
    font-size: 18px;
    line-height: 24px;
  }

  /* SOCIAL */
  .footer-social {
    margin-top: 16px;
    gap: 40px;
  }
  
  .social-link {
    width: 20px;
    height: 20px;
  }

  /* BACK TO TOP */
   .back-to-top {
    position: absolute;
    top: -40px;           /* 🔥 pulls it above the footer */
    right: 24px;          /* aligns with footer padding */
    z-index: 10;
  }

  .back-to-top svg {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 768px) {
  .mmw-footer {
    height: auto;
    padding: 60px 0 40px;
    /* Vertical padding */
    background: #f0f0f0;
    /* Matches the light grey background in screenshot */
    position: relative;
  }

  .footer-container {
    width: 90%;
    max-width: 344px;
    /* Matches the width of your circular card */
    margin: 0 auto;
    padding: 30px 20px;
    background: #f0f0f0;
    /* border: 1px solid #03499A; Blue border from Figma */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 20px 10px;
    position: relative;
  }

  /* --- LEFT COLUMN: BRAND & LINKS --- */
  .footer-brand {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin-bottom: 20px;
  }

  .footer-brand img {
    width: 140px;
    /* Scaled logo */
    height: auto;
  }

  .footer-links {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer-links a {
    font-size: 13px;
    font-weight: 700;
    color: #03499A;
    text-decoration: none;
    text-align: left;
  }

  /* --- RIGHT COLUMN: CONTACT & SOCIAL --- */
  .footer-contact {
    grid-column: 2;
    grid-row: 2;
    /* Aligns horizontally with links */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .contact-line {
    font-size: 11px;
    /* Smaller font to fit column */
    line-height: 1.4;
    color: #03499A;
    margin-bottom: 15px;
    text-align: left;
  }

  .footer-social {
    display: flex;
    gap: 12px;
    margin-top: 5px;
  }

  .social-link img {
    width: 28px;
    height: auto;
  }

  /* --- BACK TO TOP BUTTON (Overlapping) --- */
  .back-to-top {
    position: absolute;
    bottom: -22px;
    /* Half-out placement */
    right: 20px;
    width: 44px;
    height: 44px;
    z-index: 10;
  }
}

/* TIN containers */
.tin-hero {
  width: 100%;
  height: 960px;
  /* 🔥 exact height */
  background-color: #f6f7fb;
  /* figma bg */
  overflow: hidden;
}

.tin-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔥 fills without distortion */
  display: block;
}

.tin-hero-img.mobile {
  display: none;
}

/* =========================
   TIN HERO – MOBILE
========================= */

@media (max-width: 992px) {

  .tin-hero {
    height: auto;
    /* 🔥 height comes from image */
    min-height: unset;
    max-height: none;
    overflow: hidden;
  }

  /* Hide desktop image */
  .tin-hero-img.desktop {
    display: none;
  }

  /* Show mobile image */
  .tin-hero-img.mobile {
    display: block;
    width: 100%;
    height: auto;
    /* 🔥 no distortion */
    object-fit: cover;
  }
}

/* REMOVE this entirely ❌ */
@media (max-width: 768px) {
  .tin-hero {
    /* height: 70vh; ❌ */
  }
}



.packaging-intro {
  padding: 81px 0;
  background: #ffffff;
}

/* CONTAINER */
.packaging-container {
  max-width: 1247px;
  /* exact */
  margin: 0 auto;
  text-align: center;
}

/* MAIN HEADING */
.intro-title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: #03499a;
  margin: 0 0 42px;
  /* exact gap */
}

.intro-text {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 33px;
  letter-spacing: 0;
  color: #1a1a1a;
  text-align: center;
  margin: 0 auto;
}

.intro-text.first {
  max-width: 1089px;
  /* 1089 × 105 */
  margin-bottom: 81px;
}

.intro-text.second {
  max-width: 1049px;
  /* 1049 × 70 */
}

/* BUTTON ROW */
.intro-pills {
  width: 1027px;
  height: 90px;
  margin: 0 auto 81px;
  display: flex;
  gap: 30px;
  /* exact spacing */
  justify-content: center;
  /* keeps block centered */
}

/* IMAGE PILL BUTTONS */
.pill-image {
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Specific widths for each button */
.pill-image:nth-child(1) {
  /* width: 349px; */
}

.pill-image:nth-child(2) {
  /* width: 310px; */
}

.pill-image:nth-child(3) {
  /* width: 308px; */
}

/* Button images */
.pill-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* SUBTITLE */
.intro-subtitle {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 35px;
  color: #03499a;
  margin: 0 auto 24px;
  max-width: 1247px;
}

/* LAST BODY */
.intro-subtitle+.intro-text {
  margin-bottom: 0;
}

/* =========================
   PACKAGING INTRO - MOBILE VERSION
========================= */

/* Hide desktop version on mobile/tablet */
@media (max-width: 1366px) {
  .packaging-intro {
    display: none;
  }
}

/* Hide mobile version on desktop */
@media (min-width: 1366px) {
  .packaging-intro-mobile {
    display: none;
  }
}

/* =========================
   MOBILE PACKAGING INTRO
========================= */
.packaging-intro-mobile {
  display: none;
  padding: 40px 26px;
}

@media (max-width: 1366px) {
  .packaging-intro-mobile {
    display: block;
    padding: 40px 24px;
  }
}

.packaging-container-mobile {
  max-width: 100%;
  margin: 0 auto;
}

/* =========================
   TITLE & TEXT STYLES
========================= */
.intro-title-mobile {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
  color: #0091d0;
  margin-bottom: 20px;
  padding: 0 24px;
  text-align: left;
}

.intro-text-mobile {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  padding: 0 24px;
  line-height: 18px;
  font-weight: 400;
  color: #333;
  margin-bottom: 30px;
  text-align: left;
}


/* =========================
   ACTIVE PILL (Top Position)
========================= */
.intro-pills-top-mobile {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.pill-image-mobile {
  display: inline-block;
  transition: transform 0.3s ease;
}

.pill-image-mobile img {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
}

.pill-image-mobile:hover {
  transform: scale(1.05);
}


/* =========================
   OTHER PILLS (Bottom of Page Section)
========================= */
.packaging-pills-bottom-mobile {
  display: none;
  padding: 0px 20px 20px;
  background: transparent;
}

@media (max-width: 1366px) {
  .packaging-pills-bottom-mobile {
    display: block;
  }
}

@media (min-width: 1025px) {
  .packaging-pills-bottom-mobile {
    display: none;
  }
}

.pills-bottom-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pill-image-bottom-mobile {
  display: inline-block;
  transition: transform 0.3s ease;
}

.pill-image-bottom-mobile img {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
}

.pill-image-bottom-mobile:hover {
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE ADJUSTMENTS
========================= */
@media (min-width: 768px) and (max-width:1024px) {
  .intro-title-mobile {
    font-size: 28px;
    line-height: 28px;
  }

  .intro-text-mobile {
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
  }

  .pill-image-mobile img {
    max-width: 180px;
  }

  .pill-image-bottom-mobile img {
    max-width: 180px;
  }

  .pills-bottom-container {
    gap: 12px;
  }

  .packaging-intro-mobile {
    padding: 30px 16px;
  }

  .packaging-pills-bottom-mobile {
    padding: 0px 20px 16px;
  }
}
@media (max-width: 480px) {
  .intro-title-mobile {
    font-size: 24px;
    line-height: 28px;
  }

  .intro-text-mobile {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
  }

  .pill-image-mobile img {
    max-width: 180px;
  }

  .pill-image-bottom-mobile img {
    max-width: 180px;
  }

  .pills-bottom-container {
    gap: 12px;
  }

  .packaging-intro-mobile {
    padding: 30px 16px;
  }

  .packaging-pills-bottom-mobile {
    padding: 0px 20px 16px;
  }
}

/* For very small screens - stack pills vertically */
@media (max-width: 360px) {
  .pills-bottom-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .pill-image-bottom-mobile img {
    max-width: 180px;
  }
}



/* =========================
   INDUSTRY SECTION
========================= */
.industry-section {
  margin-bottom: 50px;
}

.industry-container {
  max-width: 1440px;
  margin: auto;
}

/* =========================
   ROW
========================= */
.industry-row {
  display: flex;
  gap: 20px;
  height: 613px;
}

.industry-row.reverse {
  flex-direction: row-reverse;
}

/* =========================
   LEFT BLUE BOX - SVG BACKGROUND
========================= */
.industry-text {
  width: 587px;
  height: 572px;
  padding: 75px;
  border-radius: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* SVG Background Element */
.industry-text .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  border-radius: 24px;
}

/* Ensure content is above background */
.industry-text h3,
.industry-text p {
  position: relative;
  z-index: 1;
}

/* TEXT STYLES */
.industry-text h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 48px;
  line-height: 48px;
  font-weight: 500;
  margin-bottom: 16px;
}

.industry-text p {
  max-width: 437px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

/* =========================
   RIGHT SIDE - CAROUSEL
========================= */
.industry-media {
  width: 833px;
  height: 613px;
  /* 573 image + 40 dots */
  display: flex;
  flex-direction: column;
}

/* IMAGE AREA */
.carousel {
  position: relative;
  width: 100%;
  height: 573px;
}

.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 587;
  max-height: 573px;
  border-radius: 24px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel-img.active {
  opacity: 1;
}

/* ARROWS - Updated for Image Assets */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* Reset default button styles */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;

  /* Adjust size based on your image dimensions */
  width: 45px;
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.carousel-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hover effects to make the custom arrows feel interactive */
.carousel-btn:hover {
  transform: translateY(-50%) scale(1.1);
  filter: brightness(1.2);
}

.carousel-btn.prev {
  left: 15px;
}

.carousel-btn.next {
  right: 15px;
}

/* Hide the default text chevron if you still have it */
.carousel-btn::before,
.carousel-btn::after {
  display: none;
}

.carousel-zoom {
  position: absolute;
  bottom: 20px;
  /* Aligned to bottom-right as per Figma */
  right: 20px;
  width: 40px;
  /* Adjust size to match your PNG asset */
  height: 40px;
  z-index: 10;
  /* Higher than any image (z-index 1 or 2) */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carousel-zoom img {
  width: 100%;
  height: 100%;
  display: block;
}

.carousel-zoom:hover {
  transform: scale(1.1);
  /* Subtle interaction effect */
}

/* =========================
   ZOOM MODAL - IMAGE ONLY
========================= */
/* =========================
   ZOOM MODAL - IMAGE ONLY
========================= */
.zoom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.zoom-modal.active {
  display: flex;
}

.zoom-modal-content {
  position: relative;
  /* 🔥 This makes the close button position relative to this container */
  max-width: 90%;
  max-height: 90%;
  animation: zoomIn 0.3s ease;
  pointer-events: auto;
  background: transparent;
}

.zoom-modal-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: block;
  /* 🔥 Removes any extra spacing */
}

/* Close button - ON THE IMAGE */
.zoom-close {
  position: absolute;
  /* 🔥 Positioned relative to .zoom-modal-content */
  top: 15px;
  right: 15px;
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: auto;
}

.zoom-close:hover {
  transform: scale(1.15);
  background: rgba(0, 145, 208, 0.9);
}

/* Zoom animation */
@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* DOTS OUTSIDE IMAGE */
.carousel-dots {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* DOT STYLE */
.carousel-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfd8e3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-dots .dot.active {
  width: 16px;
  border-radius: 8px;
  background: #0091d0;
}

/* Desktop default */
.carousel-img.mobile {
  display: none;
}

.carousel-img.desktop {
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .carousel-img.desktop {
    display: none;
  }

  .carousel-img.mobile {
    display: block;
  }
}

/* =========================
   MOBILE VERSION - HIDE DESKTOP
========================= */

/* Hide desktop version on mobile/tablet */
@media (max-width: 992px) {
  .industry-section {
    display: none;
  }
}

/* Hide mobile version on desktop */
@media (min-width: 993px) {
  .industry-section-mobile {
    display: none;
  }
}

/* =========================
   MOBILE INDUSTRY SECTION
========================= */
.industry-section-mobile {
  display: none;
  /* Hidden by default, shown only on mobile/tablet */
  padding: 20px 16px;
}

@media (max-width: 992px) {
  .industry-section-mobile {
    display: block;
  }
}

.industry-container-mobile {
  max-width: 100%;
  margin: 0 auto;
}

/* =========================
   MOBILE COMBINED CARD
========================= */
.industry-media-mobile {
  width: 100%;
  /* border: 2px solid #0091d0; */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Text Section Inside Card */
.industry-text-mobile {
  width: 100%;
  padding: 32px 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* SVG Background for Mobile */
.card-bg-svg-mobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Text Content Above Background */
.industry-text-mobile h3,
.industry-text-mobile p {
  position: relative;
  z-index: 1;
}

.industry-text-mobile h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 24px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 12px;
}

.industry-text-mobile p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  max-width: 100%;
}

/* =========================
   MOBILE CAROUSEL (Inside Card)
========================= */
.carousel-mobile {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #fff;
}

.carousel-img-mobile {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel-img-mobile.active {
  opacity: 1;
}

/* =========================
   MOBILE CAROUSEL BUTTONS
========================= */
.carousel-btn-mobile {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.carousel-btn-mobile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-btn-mobile:hover {
  transform: translateY(-50%) scale(1.1);
  filter: brightness(1.2);
}

.carousel-btn-mobile.prev-mobile {
  left: 10px;
}

.carousel-btn-mobile.next-mobile {
  right: 10px;
}

/* =========================
   MOBILE ZOOM BUTTON
========================= */
.carousel-zoom-mobile {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carousel-zoom-mobile img {
  width: 100%;
  height: 100%;
  display: block;
}

.carousel-zoom-mobile:hover {
  transform: scale(1.1);
}

/* =========================
   MOBILE DOTS (Inside Card)
========================= */
.carousel-dots-mobile {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
}

.carousel-dots-mobile .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfd8e3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-dots-mobile .dot.active {
  width: 12px;
  border-radius: 6px;
  background: #0091d0;
}

/* =========================
   MOBILE ZOOM MODAL
========================= */
.zoom-modal-mobile {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  align-items: center;
  justify-content: center;
}

.zoom-modal-mobile.active {
  display: flex;
}

.zoom-modal-content-mobile {
  position: relative;
  max-width: 95%;
  max-height: 90%;
  animation: zoomInMobile 0.3s ease;
}

.zoom-modal-content-mobile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Mobile Close Button */
.zoom-close-mobile {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.zoom-close-mobile:hover {
  transform: scale(1.1);
  background: rgba(0, 145, 208, 0.9);
}

/* Mobile Zoom Animation */
@keyframes zoomInMobile {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================
   RESPONSIVE ADJUSTMENTS
========================= */
@media (max-width: 480px) {
  .industry-text-mobile {
    padding: 24px 24px;
    min-height: 180px;
  }

  .industry-text-mobile h3 {
    font-size: 24px;
    line-height: 28px;
  }

  .industry-text-mobile p {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
  }

  .carousel-mobile {
    height: 240px;
  }

  .carousel-btn-mobile {
    width: 28px;
    height: 28px;
  }

  .carousel-zoom-mobile {
    width: 28px;
    height: 28px;
  }

  .industry-media-mobile {
    border-width: 1.5px;
  }
}





.spirits-section .carousel-img {
  width: 100%;
  height: 100%;
  /* FORCE image to use available space */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* FIT INSIDE without cropping */
}


@media (min-width: 768px) and (max-width: 1366px) { 

  /* =========================
     SECTION WRAPPER
  ========================= */
  .industry-section {
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 50px;
  }

  .industry-container {
    max-width: 100%;
    margin: auto;
  }

  /* =========================
     ROW
  ========================= */
  .industry-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    height: auto;
  }

  .industry-row.reverse {
    flex-direction: row-reverse;
  }

  /* =========================
     LEFT BLUE CARD
  ========================= */
  .industry-text {
    width: 50%;
    height: 572px;
    padding: 60px;
    border-radius: 24px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .industry-text .card-bg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    z-index: 0;
  }

  .industry-text h3,
  .industry-text p {
    position: relative;
    z-index: 1;
  }

  .industry-text h3 {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 28px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .industry-text p {
    max-width: 437px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
  }

  /* =========================
     RIGHT IMAGE / CAROUSEL
  ========================= */
  .industry-media {
    width: 50%;
    height: 572px;
    display: flex;
    flex-direction: column;
  }

  .carousel {
    position: relative;
    width: 100%;
    height: 572px;
    border-radius: 24px;
    overflow: hidden; /* 🔥 shows rounded border */
  }

  .carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 correct fit */
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .carousel-img.active {
    opacity: 1;
  }

  /* =========================
     CAROUSEL ARROWS
  ========================= */
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .carousel-btn.prev {
    left: 20px;
  }

  .carousel-btn.next {
    right: 20px;
  }

  .carousel-btn:hover {
    transform: translateY(-50%) scale(1.1);
    filter: brightness(1.2);
  }

  /* =========================
     ZOOM ICON
  ========================= */
  .carousel-zoom {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 10;
    cursor: pointer;
  }

  .carousel-zoom img {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* =========================
     DOTS
  ========================= */
  .carousel-dots {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cfd8e3;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-dots .dot.active {
    width: 16px;
    border-radius: 8px;
    background: #0091d0;
  }

}


/* =========================
   MOBILE VIEW (FIGMA STYLE)
   ========================= */
@media (max-width: 768px) {

  /* TEXT (TOP PART OF CARD) */
  .industry-text {
    width: 100% !important;
    padding: 40px 24px !important;
    order: 1;
    border-radius: 24px 24px 0 0 !important;
    margin: 0;
  }

  /* STACK AS ONE CARD */
  .industry-row,
  .industry-row.reverse {
    flex-direction: column;
    gap: 0;
  }



  /* IMAGE (BOTTOM PART OF SAME CARD) */
  .industry-media {
    width: 100% !important;
    order: 2;
    margin: 0;
  }

  .carousel {
    position: relative;
    aspect-ratio: 1 / 1;
    height: auto;
    background: #f3f2f7;
    /* SAME card bg */
    border-radius: 0 0 24px 24px;
    /* ONLY bottom corners */
    margin-top: -1px;
    /* 🔥 MERGE seam */
    overflow: hidden;
    /* 🔥 clip zoom + image */
  }

  .carousel-img {
    padding: 16px;
    /* tighter image padding */
    object-fit: contain;
  }

  /* ZOOM ICON — INSIDE IMAGE */
  .carousel-zoom {
    bottom: 14px;
    right: 14px;
    z-index: 5;
  }

  /* DOTS — CLOSER TO IMAGE */
  .carousel-dots {
    padding: 8px 0 4px;
    /* 🔥 reduce gap */
    margin-top: -6px;
    /* 🔥 pull closer */
  }
}



/* ===============================
   IMAGE ONLY SECTION
   =============================== */

.image-only-section {
  margin-bottom: 81px;
  background: #ffffff;
}

/* CENTER CONTAINER */
.image-only-container {
  max-width: 833px;
  /* ✅ image width */
  margin: 0 auto;
}

/* ===============================
   IMAGE ONLY SECTION - MOBILE
   =============================== */

/* ===============================
   IMAGE ONLY SECTION - MOBILE
   =============================== */

/* Hide desktop version on mobile/tablet */
@media (max-width: 992px) {
  .image-only-section {
    display: none;
  }
}

/* Hide mobile version on desktop */
@media (min-width: 993px) {
  .image-only-section-mobile {
    display: none;
  }
}

/* =========================
   MOBILE IMAGE ONLY SECTION
========================= */
.image-only-section-mobile {
  display: none;
  padding: 20px 0;
  margin-bottom: 40px;
}

@media (max-width: 992px) {
  .image-only-section-mobile {
    display: block;
  }
}

.image-only-container-mobile {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================
   MOBILE IMAGE CAROUSEL (No Border)
========================= */
.image-only-card-mobile {
  width: 100%;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.carousel-image-only-mobile {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}

.carousel-img-only-mobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.carousel-img-only-mobile.active {
  opacity: 1;
}

/* =========================
   NAVIGATION BUTTONS
========================= */
.carousel-btn-only-mobile {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px;
  cursor: pointer;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-btn-only-mobile img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.carousel-btn-only-mobile:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(255, 255, 255, 1);
}

.carousel-btn-only-mobile.prev-only-mobile {
  left: 12px;
}

.carousel-btn-only-mobile.next-only-mobile {
  right: 12px;
}

/* =========================
   ZOOM BUTTON
========================= */
.carousel-zoom-only-mobile {
  position: absolute;
  bottom: 50px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-zoom-only-mobile img {
  width: 20px;
  height: 20px;
  display: block;
}

.carousel-zoom-only-mobile:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
}

/* =========================
   DOTS NAVIGATION (Outside/Below Carousel)
========================= */
.carousel-dots-only-mobile {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  margin-top: 12px;
}

.carousel-dots-only-mobile .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfd8e3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-dots-only-mobile .dot.active {
  width: 24px;
  border-radius: 4px;
  background: #0091d0;
}

/* =========================
   ZOOM MODAL
========================= */
.zoom-modal-only-mobile {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  align-items: center;
  justify-content: center;
}

.zoom-modal-only-mobile.active {
  display: flex;
}

.zoom-modal-content-only-mobile {
  position: relative;
  max-width: 95%;
  max-height: 90%;
  animation: zoomInOnly 0.3s ease;
}

.zoom-modal-content-only-mobile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* Close Button */
.zoom-close-only-mobile {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.zoom-close-only-mobile:hover {
  transform: scale(1.1);
  background: rgba(0, 145, 208, 0.9);
}

/* Zoom Animation */
@keyframes zoomInOnly {
  from {
    transform: scale(0.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================
   RESPONSIVE ADJUSTMENTS
========================= */
@media (max-width: 480px) {
  .carousel-image-only-mobile {
    height: 280px;
  }

  .carousel-btn-only-mobile {
    width: 32px;
    height: 32px;
  }

  .carousel-btn-only-mobile img {
    width: 18px;
    height: 18px;
  }

  .carousel-zoom-only-mobile {
    width: 32px;
    height: 32px;
    bottom: 46px;
  }

  .carousel-zoom-only-mobile img {
    width: 18px;
    height: 18px;
  }

  .image-only-section-mobile {
    padding: 15px 0;
  }

  .image-only-container-mobile {
    padding: 0 12px;
  }
}

@media (max-width: 360px) {
  .carousel-image-only-mobile {
    height: 240px;
  }
}



/* =========================
   VALUES BADGES IMAGE
   ========================= */

/* SECTION */
.values-section {
  width: 100%;
  background: #ffffff;
  padding-top: 81px;
}

.values-container {
  max-width: 1440px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;

  justify-items: center;
}


/* Wrapper to handle the hover area */
.value-item {
  width: 100%;
  max-width: 345px;
  aspect-ratio: 345 / 325;
  cursor: pointer;
  overflow: hidden;
}


.value-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* .value-item:hover .value-image {
  transform: translateY(-6px);
} */


/* ===============================
   ONLY TABLET RANGE FIX (768px - 1366px)
   Replace ONLY the @media (min-width: 762px) and (max-width: 1366px) section
=============================== */

@media (min-width: 768px) and (max-width: 1444px) {

  .values-section {
    padding: 60px 20px;
  }

  .values-container {
    max-width: 100% !important;
    width: 95% !important;
    margin: 0 auto;
    padding: 0 20px;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 🔥 Force 4 columns in one row */
    gap: 14px;
    justify-items: center;
    box-sizing: border-box;
    flex-wrap: nowrap !important; /* 🔥 Prevent wrapping */
  }

  .value-item {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-width: 100%; /* 🔥 Let cards scale naturally */
  }

  .value-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
@media (max-width: 762px) {
  .values-section {
    display: none;
    /* 🔥 Hide pills on mobile */
  }

  .value-item {
    width: 45%;
    /* Side by side on mobile */
    height: auto;
    aspect-ratio: 345 / 325;
  }
}


@media (max-width: 1200px) {

  .about-tabs,
  .about-title,
  .about-text,
  .about-subtitle {
    width: 100%;
  }

  .about-tabs {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .about-tab {
    width: 100% !important;
  }
}

/* =========================
   LEADERSHIP SECTION
   ========================= */
.leadership-section {
  padding: 81px 0;
  background: #ffffff;
}

/* OUTER CONTAINER — controls centering */
.leadership-section .container {
  max-width: 1440px;
  /* 🔥 EXACT FIGMA WIDTH */
  margin: 0 auto;
  padding: 0;
  /* 🔥 IMPORTANT: no side padding */
}

/* GRID */
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, 555px);
  /* 🔥 exact card width */
  column-gap: 48px;
  /* matches Figma gap */
  row-gap: 56px;

  justify-content: center;
  /* 🔥 centers grid → equal left & right */
}

/* CARD */
.leader-card {
  width: 555px;
  height: 694px;
  /* 🔥 exact Figma height */
  text-align: center;
}

/* IMAGE */
.leader-card img {
  width: 555px;
  /* 🔥 image equals card width */
  height: 611px;
  /* 🔥 image-only height from Figma */
  object-fit: cover;
  margin-bottom: 18px;

  filter: grayscale(100%);
  border-radius: 4px;
}

/* NAME */
.leader-card h4 {
  font-size: 32px;
  font-weight: 600;
  /* letter-spacing: 0.5px; */
  line-height: 32px;

  color: #03499A;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* DESIGNATION */
.leader-card span {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  color: #03499A;
}

/* 🔥 MOBILE LEADERSHIP SECTION */
.about-story-section {
  margin-top: 81px;
  background: #ffffff;
}

.about-tabs {
  width: 921.7px;
  height: 90px;
  margin: 0 auto 81px;
  gap: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* IMAGE TAB BUTTONS */
.about-tab-image {
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Specific widths */
.about-tab-image:nth-child(1) {
  /* width: 424px;  */
}

.about-tab-image:nth-child(2) {
  /* width: 383px;  */
}

/* Tab images */
.about-tab-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.about-title,
.about-subtitle {
  width: 1151px;
  margin: 0 auto 42px;

  font-family: "Roboto", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 52px;
  text-align: center;

  background: linear-gradient(180deg,
      #0091D0 0%,
      #03499A 50.59%,
      #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-text {
  font-size: 22px;
  font-weight: 400;
  line-height: 33px;

  max-width: 1195px;
  max-height: 450px;

  text-align: center;

  margin: 0 auto;
}

/* Mobile-specific titles and text - hidden by default */
.mobile-about-title,
.mobile-about-text {
  display: none;
}

/* RESPONSIVE */
@media (max-width: 1366px) {
  .about-tabs {
    width: 90%;
    flex-direction: column;
    height: auto;
    gap: 20px;
  }

  .about-tab-image:nth-child(1),
  .about-tab-image:nth-child(2) {
    width: 100%;
    max-width: 424px;
  }

  .about-title,
  .about-subtitle {
    width: 90%;
    font-size: 42px;
    line-height: 48px;
  }

  .about-text {
    max-width: 90%;
    font-size: 20px;
    line-height: 30px;
  }
}

@media (max-width: 768px) {
  .about-story-section {
    margin-top: 60px;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 🔥 ADD GAP only to second about-story-section */
  .about-story-section:nth-of-type(2) {
    /* padding-bottom: 60px; */
  }

  .about-tabs {
    display: none;
    /* 🔥 HIDE tabs on mobile */
  }

  .about-tab-image {
    height: 56px;
  }

  /* Keep first about-story-section text as is */
  .about-story-section:first-of-type .about-title {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 24px;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* 🔥 LEFT ALIGN */
  }

  .about-story-section:first-of-type .about-text {
    font-size: 18px;
    line-height: 26px;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    margin-bottom: 0 !important;
    /* 🔥 LEFT ALIGN */
  }

  /* 🔥 HIDE desktop title and text on mobile for SECOND section only */
  .about-story-section:nth-of-type(2) .about-title:not(.mobile-about-title),
  .about-story-section:nth-of-type(2) .about-text:not(.mobile-about-text) {
    display: none;
  }

  /* 🔥 SHOW mobile-specific title and text */
  .mobile-about-title,
  .mobile-about-text {
    display: block;
    font-family: "Roboto", sans-serif;
    text-align: left !important;
    /* 🔥 LEFT ALIGN */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-about-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 38px;
    margin-bottom: 24px !important;
    background: linear-gradient(180deg,
        #0091D0 0%,
        #03499A 50.59%,
        #1A1A1A 123.9%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 12px;
    text-align: left !important;
  }

  .mobile-about-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 0;
    padding: 0 12px;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 768px) and (max-width: 1366px) {

  .about-story-section {
    margin-top: 60px;
    padding-left: 24px;
    padding-right: 24px;
    background: #ffffff;
  }

  /* Hide tabs on tablet/mobile */
  .about-tabs {
    display: none;
  }

  /* Title */
  .about-title,
  .about-subtitle {
    font-size: 28px !important;
    line-height: 28px !important;
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin-bottom: 24px;
  }

  /* Text */
  .about-text {
    font-size: 18px !important;
    line-height: 20px !important;
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

}

/* =========================
   VALUES BADGES IMAGE
   ========================= */

/* SECTION */
.values-section {
  width: 100%;
  background: #ffffff;
  padding-top: 81px;
  padding-bottom: 81px;
}

.values-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Wrapper to handle the hover area */
.value-item {
  width: 345px;
  height: 325px;
  cursor: pointer;
  overflow: hidden;
}

.value-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* .value-item:hover .value-image {
  transform: translateY(-6px);
} */

@media (max-width: 1440px) {
  .values-container {
    width: 95%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .values-section {
    display: block;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .values-container {
    display: grid;
    /* 🔥 Changed to grid for better control */
    grid-template-columns: 1fr 1fr;
    /* 🔥 Exactly 2 columns */
    gap: 16px;
    /* 🔥 Gap between items */
    width: 100%;
    max-width: 100%;
  }

  .value-item {
    width: 100%;
    /* 🔥 Full width of grid cell */
    height: auto;
    aspect-ratio: 345 / 325;
    /* 🔥 Maintains proportions */
  }
}

@media (max-width: 1200px) {

  .about-tabs,
  .about-title,
  .about-text,
  .about-subtitle {
    width: 100%;
  }

  .about-tabs {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .about-tab {
    width: 100% !important;
  }
}

/* =========================
   LEADERSHIP SECTION
   ========================= */
.leadership-section {
  padding: 81px 0;
  background: #ffffff;
}

/* OUTER CONTAINER — controls centering */
.leadership-section .container {
  max-width: 1440px;
  /* 🔥 EXACT FIGMA WIDTH */
  margin: 0 auto;
  padding: 0;
  /* 🔥 IMPORTANT: no side padding */
}

/* GRID */
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, 555px);
  /* 🔥 exact card width */
  column-gap: 48px;
  /* matches Figma gap */
  row-gap: 56px;

  justify-content: center;
  /* 🔥 centers grid → equal left & right */
}

/* CARD */
.leader-card {
  width: 555px;
  height: 694px;
  /* 🔥 exact Figma height */
  text-align: center;
}

/* IMAGE */
.leader-card img {
  width: 555px;
  /* 🔥 image equals card width */
  height: 611px;
  /* 🔥 image-only height from Figma */
  object-fit: cover;
  margin-bottom: 18px;

  filter: grayscale(100%);
  border-radius: 4px;
}

/* NAME */
.leader-card h4 {
  font-size: 32px;
  font-weight: 600;
  /* letter-spacing: 0.5px; */
  line-height: 32px;

  color: #03499A;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* DESIGNATION */
.leader-card span {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  color: #03499A;
}

/* 🔥 MOBILE LEADERSHIP SECTION */
@media (max-width: 768px) {
  .leadership-section {
    padding: 60px 0;
  }

  .leadership-section .container {
    padding: 0 20px;
    /* Add some side padding on mobile */
  }

  .leaders-grid {
    grid-template-columns: 1fr;
    /* 🔥 Single column on mobile */
    row-gap: 40px;
    width: 100%;
  }

  .leader-card {
    width: 100%;
    height: auto;
    max-width: 555px;
    /* Don't exceed original size */
    margin: 0 auto;
    /* Center the card */
  }

  .leader-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 555 / 611;
    /* Maintain original proportions */
    margin-bottom: 16px;
  }

  .leader-card h4 {
    font-size: 24px;
    line-height: 28px;
  }

  .leader-card span {
    font-size: 16px;
    line-height: 18px;
  }
}

/* 🔥 TABLET BREAKPOINT - Optional for better tablet experience */
@media (max-width: 1200px) and (min-width: 769px) {
  .leaders-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    padding: 0 20px;
  }

  .leader-card {
    width: 100%;
    height: auto;
  }

  .leader-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 555 / 611;
  }
}

/* 🔥 TABLET BREAKPOINT - Optional for better tablet experience */
@media (max-width: 1200px) and (min-width: 769px) {
  .leaders-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    padding: 0 20px;
  }

  .leader-card {
    width: 100%;
    height: auto;
  }

  .leader-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 555 / 611;
  }
}

/* ============================================================
   MANUFACTURING SECTION - MASTER RAIL SYNC
============================================================ */
/* ============================================================
   MANUFACTURING SECTION - MASTER RAIL SYNC
============================================================ */
.mmw-manufacturing-section {
  background: #ffffff;
  width: 100%;
  /* EXACT SPACING: 81px Top and Bottom */
  /* padding: 81px 0;  */
}

/* CONTAINER - Synced exactly with Navbar/Footer rails */
.mmw-manufacturing-section .container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* Syncs with Navbar Rails */
  padding-left: clamp(40px, 12.5vw, 240px);
  padding-right: clamp(40px, 12.5vw, 240px);
  box-sizing: border-box;
}

/* ===============================
   GRID SYSTEM (ZOOM-PROOF)
================================ */
.mmw-manufacturing-row {
  width: 100%;
  margin: 0 auto 48px auto;
  display: grid;
  /* Proportional ratio prevents layout collapse on zoom */
  grid-template-columns: 1fr 1.33fr;
  column-gap: 20px;
}

.mmw-manufacturing-row:last-child {
  margin-bottom: 0;
  /* Remove margin on final row */
}

/* Reverse layout for alternating rows */
.mmw-manufacturing-row.reverse {
  grid-template-columns: 1.33fr 1fr;
}

/* FIGMA HEIGHTS */
.mmw-row-795 {
  min-height: 795px;
}

.mmw-row-609 {
  min-height: 609px;
}

.mmw-row-536 {
  min-height: 536px;
}

/* ===============================
   CARD & LAYERING LOGIC
================================ */
.mmw-card {
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  /* Base for background layering */
}

/* IMAGE CARD (Plant Photos) */
.mmw-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TEXT CARD (Unique Image Background Layer) */
.mmw-text-card {
  position: relative;
  display: flex;
  background: #f7f7f4;
}

/* THE BACKGROUND IMAGE LAYER (Set per row in HTML) */
.card-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Under the text */
}

/* THE CONTENT LAYER (Top Layer) */
.mmw-text-content {
  position: relative;
  z-index: 2;
  /* Over the image */
  width: 100%;
  height: 100%;
  /* Original Figma internal padding */
  padding: 36px clamp(40px, 5vw, 94px) 36px clamp(40px, 6vw, 106px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===============================
   TEXT STYLES & GRADIENTS
================================ */
.mmw-text-card h3,
.mmw-text-card h4,
.mmw-text-card h5 {
  margin: 0;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.mmw-text-card h3 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 500;
  margin-bottom: 6px;
}

.mmw-text-card h4 {
  font-size: 40px;
  line-height: 46px;
  font-weight: 500;
  margin-bottom: 18px;
}

.mmw-text-card h5 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 14px;
}

/* LIST */
.mmw-text-card ul {
  padding-left: 50px;
  margin: 0;
}

.mmw-text-card li {
  font-size: 22px;
  line-height: 28px;
  color: #444;
  margin-bottom: 8px;
}

/* ===============================
   RESPONSIVE OVERHAUL
================================ */
@media (max-width: 992px) {
  .mmw-manufacturing-section {
    /* padding-top: 40px; */
    /* 🔥 Control top spacing */
  }

  /* 🔥 Reduce container side padding on mobile */
  .mmw-manufacturing-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mmw-manufacturing-row,
  .mmw-manufacturing-row.reverse {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
    /* 🔥 Reduced gap between image and text */
    margin-bottom: 32px;
    /* 🔥 Reduced gap between rows */
  }

  .mmw-manufacturing-row:first-child {
    margin-top: 0;
    /* 🔥 Remove top margin from first row */
  }

  .mmw-manufacturing-row:last-child {
    margin-bottom: 0;
  }

  /* 🔥 Force image card to always appear first on mobile */
  .mmw-image-card {
    order: 1;
    min-height: 300px;
    /* Keep some height for images */
  }

  .mmw-text-card {
    order: 2;
    min-height: auto;
    /* 🔥 Let content determine height */
  }

  .mmw-card {
    min-height: auto;
    /* 🔥 Remove fixed min-height */
  }

  .mmw-text-content {
    padding: 30px 20px;
    /* 🔥 Reduce padding for better content fit */
  }

  /* 🔥 Adjust text sizes for mobile */
  .mmw-text-card h3 {
    font-size: 24px;
    line-height: 24x;
    margin-bottom: 8px;
  }

  .mmw-text-card h4 {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 16px;
  }

  .mmw-text-card h5 {
    font-size: 20px;
    line-height: 20px;
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .mmw-text-card ul {
    padding-left: 30px;
  }

  .mmw-text-card li {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 6px;
  }
}
@media (min-width: 992px) and (max-width: 1366px) {
  .mmw-manufacturing-section {
  background: #ffffff;
  width: 100%;
  /* EXACT SPACING: 81px Top and Bottom */
  /* padding: 81px 0;  */
}

/* CONTAINER - Synced exactly with Navbar/Footer rails */
.mmw-manufacturing-section .container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* Syncs with Navbar Rails */
  padding-left: clamp(20px, 12.5vw, 40px);
  padding-right: clamp(20px, 12.5vw, 40px);
  box-sizing: border-box;
}

/* ===============================
   GRID SYSTEM (ZOOM-PROOF)
================================ */
.mmw-manufacturing-row {
  width: 100%;
  margin: 0 auto 48px auto;
  display: grid;
  /* Proportional ratio prevents layout collapse on zoom */
  grid-template-columns: 1fr 1.33fr;
  column-gap: 20px;
}

.mmw-manufacturing-row:last-child {
  margin-bottom: 0;
  /* Remove margin on final row */
}

/* Reverse layout for alternating rows */
.mmw-manufacturing-row.reverse {
  grid-template-columns: 1.33fr 1fr;
}

/* FIGMA HEIGHTS */
.mmw-row-795 {
  min-height: 795px;
}

.mmw-row-609 {
  min-height: 609px;
}

.mmw-row-536 {
  min-height: 536px;
}

/* ===============================
   CARD & LAYERING LOGIC
================================ */
.mmw-card {
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  /* Base for background layering */
}

/* IMAGE CARD (Plant Photos) */
.mmw-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TEXT CARD (Unique Image Background Layer) */
.mmw-text-card {
  position: relative;
  display: flex;
  background: #f7f7f4;
}

/* THE BACKGROUND IMAGE LAYER (Set per row in HTML) */
.card-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Under the text */
}

/* THE CONTENT LAYER (Top Layer) */
.mmw-text-content {
  position: relative;
  z-index: 2;
  /* Over the image */
  width: 100%;
  height: 100%;
  /* Original Figma internal padding */
  padding: 36px clamp(40px, 5vw, 94px) 36px clamp(40px, 6vw, 106px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===============================
   TEXT STYLES & GRADIENTS
================================ */
.mmw-text-card h3,
.mmw-text-card h4,
.mmw-text-card h5 {
  margin: 0;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.mmw-text-card h3 {
  font-size: 28px;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: 6px;
}

.mmw-text-card h4 {
  font-size: 24px;
  line-height: 26px;
  font-weight: 500;
  margin-bottom: 18px;
}

.mmw-text-card h5 {
  font-size: 22px;
  line-height: 24px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 14px;
}

/* LIST */
.mmw-text-card ul {
  padding-left: 50px;
  margin: 0;
}

.mmw-text-card li {
  font-size: 18px;
  line-height: 20px;
  color: #444;
  margin-bottom: 8px;
}

}
/* ===============================
   SECTION
================================ */
.mmw-quality-section {
  margin-top: 81px;
  margin-bottom: 81px;
  background: #ffffff;
}

/* ===============================
   CONTAINER
================================ */
.mmw-quality-container {
  max-width: 1665px;
  margin: 0 auto;
}

/* ===============================
   HEADER
================================ */
.mmw-quality-header {
  text-align: center;
  margin-bottom: 40px;

}

.mmw-quality-header h2 {
  font-size: 48px;
  line-height: 52px;
  font-weight: 500;
  color: #023b7c;
}

.mmw-quality-header p {
  max-width: 893px;
  max-height: 90px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 1.4;
  color: #444;

}

/* ===============================
   MAIN GRID
   LEFT 925px | RIGHT auto
   GAP = 20px
================================ */
.mmw-quality-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr);
  gap: 20px;
  align-items: stretch;
}


/* ===============================
   LEFT IMAGE (925 × 675)
================================ */
.mmw-quality-image {
  width: 100%;
  aspect-ratio: 925 / 675; /* keeps Figma ratio */
  border-radius: 25px;
  overflow: hidden;
}

.mmw-quality-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===============================
   ICON GRID - FIXED
================================ */
.mmw-quality-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
  height: 100%;
}


/* Update wrapper height to match */
.quality-icon-wrapper {
  border-radius: 25px;
  overflow: hidden;
  display: flex;
}

.quality-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1700px) {
  .mmw-quality-container {
    max-width: 95%;
    padding: 0 20px;
  }
}

@media (max-width: 1200px) {
  .mmw-quality-grid {
    grid-template-columns: 1fr;
  }

  .mmw-quality-image {
    width: 100%;
    height: auto;
    aspect-ratio: 925 / 675;
  }

  .mmw-quality-icons {
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    max-width: 710px;
    margin: 0 auto;
  }

  .quality-icon-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 345 / 325;
  }
}

@media (max-width: 768px) {
  .mmw-quality-section {
    margin-top: 60px;
    margin-bottom: 60px;
    /* padding:  25px; */


  }

  /* 🔥 Reduce container padding on mobile */
  .mmw-quality-container {
    padding: 0 12px;
  }

  .mmw-quality-header {
    margin-bottom: 60px;
    /* 🔥 Increased gap after header */
    text-align: left;

    /* 🔥 Left align header on mobile */
  }

  .mmw-quality-header h2 {
    font-size: 24px;
    line-height: 24px;
    padding: 0 24px;

    text-align: left;
  }

  .mmw-quality-header p {
    font-size: 16px;
    line-height: 18px;
    max-width: 100%;
    text-align: left;
    padding: 0 24px;

    /* 🔥 Left align text on mobile */
  }

  /* 🔥 Single column layout - image first, then icons */
  .mmw-quality-grid {
    gap: 24px;
  }

  .mmw-quality-image {
    order: 1;
    /* 🔥 Image appears first */
    border-radius: 15px;
    /* Slightly smaller radius for mobile */
  }

  .mmw-quality-icons {
    order: 2;
    /* 🔥 Icons appear second */
    grid-template-columns: repeat(2, 1fr);
    /* 🔥 2 columns on mobile */
    grid-template-rows: auto auto;
    /* 🔥 2 rows */
    gap: 16px;
    max-width: 100%;
  }

  .quality-icon-wrapper {
    aspect-ratio: 345 / 327.5;
  }

  .quality-icon {
    border-radius: 15px;
    /* Slightly smaller radius for mobile */
  }
}
@media (min-width: 768px) and (max-width: 1366px) {
  .mmw-quality-section {
    margin-top: 60px;
    margin-bottom: 60px;
    /* padding:  25px; */


  }

  /* 🔥 Reduce container padding on mobile */
  .mmw-quality-container {
    padding: 0 12px;
  }

  .mmw-quality-header {
    margin-bottom: 60px;
    /* 🔥 Increased gap after header */
    text-align: left;

    /* 🔥 Left align header on mobile */
  }

  .mmw-quality-header h2 {
    font-size: 28px;
    line-height: 28px;
    padding: 0 24px;

    text-align: left;
  }

  .mmw-quality-header p {
    font-size: 18px;
    line-height: 20px;
    max-width: 100%;
    text-align: left;
    padding: 0 24px;

    /* 🔥 Left align text on mobile */
  }

  /* 🔥 Single column layout - image first, then icons */
  .mmw-quality-grid {
    gap: 24px;
  }

  .mmw-quality-image {
    order: 1;
    /* 🔥 Image appears first */
    border-radius: 15px;
    /* Slightly smaller radius for mobile */
  }

  .mmw-quality-icons {
    order: 2;
    /* 🔥 Icons appear second */
    grid-template-columns: repeat(2, 1fr);
    /* 🔥 2 columns on mobile */
    grid-template-rows: auto auto;
    /* 🔥 2 rows */
    gap: 16px;
    max-width: 100%;
  }

  .quality-icon-wrapper {
    aspect-ratio: 345 / 327.5;
  }

  .quality-icon {
    border-radius: 15px;
    /* Slightly smaller radius for mobile */
  }
}

/* ==============================
   SUSTAINABILITY HERO SECTION
================================ */
/* FULL WIDTH HERO */
/* ===============================
   SUSTAIN HERO
================================ */
/* ============================
   SUSTAIN HERO - THE FILL FIX
============================ */
.sustain-hero {
  display: grid;
  /* Use 1fr to ensure they always take 50% of the screen width, no matter the zoom */
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background: #ffffff;
}

/* IMAGE CROP */
.sustain-hero img {
  width: 100%;
  /* Remove height: 960px and use aspect-ratio to keep it square */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* ============================
   SUSTAIN HERO TEXT - RESPONSIVE
============================ */
.mmw-sustain-hero-text {
  margin-top: 81px;
  /* Use max-width so it centers and fills properly when zooming out */
  width: 90%;
  max-width: 1049px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  /* Remove fixed height: 139px so text doesn't overflow on zoom */
  min-height: 139px;
}

/* TITLE */
.mmw-sustain-hero-text h2 {
  width: 100%;
  max-width: 623px;
  margin: 0 auto 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 52px;
  color: #023b7c;
}

/* SUBTITLE */
.mmw-sustain-hero-text p {
  width: 100%;
  max-width: 1049px;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: #333;
}

.sustain-img.mobile {
  display: none;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {

  .sustain-hero {
    grid-template-columns: 1fr;
    /* single column */
  }

  .mmw-sustain-hero-text {

    /* Remove fixed height: 139px so text doesn't overflow on zoom */
    min-height: 50px;
  }

  /* Hide desktop images */
  .sustain-img.desktop {
    display: none;
  }

  /* Show mobile image */
  .sustain-img.mobile {
    display: block;
    width: 100%;
    height: auto;
    /* height driven by image */
    aspect-ratio: auto;
  }

  /* TEXT – MOBILE */
  .mmw-sustain-hero-text {
    margin-top: 40px;
    width: 100%;
    padding: 0 24px;
    text-align: left;
  }

  .mmw-sustain-hero-text h2 {
    font-size: 24px;
    line-height: 28px;
    padding: 0 12px;
    margin-bottom: 16px;
    text-align: left;
  }

  .mmw-sustain-hero-text p {
    font-size: 16px;
    padding: 0 12px;
    line-height: 18px;
    text-align: left;
  }
}
@media (min-width: 768px) and (max-width: 1366px) {

  .mmw-sustain-hero-text {
    min-height: 50px;
    margin-top: 40px;
    width: 100%;
    padding: 0 24px;

    display: flex;
    flex-direction: column;
    align-items: center;      /* 🔥 center horizontally */
    text-align: center;       /* 🔥 center text */
  }

  .mmw-sustain-hero-text h2 {
    font-size: 28px;
    line-height: 28px;
    margin-bottom: 16px;
    padding: 0;
    text-align: center;
  }

  .mmw-sustain-hero-text p {
    font-size: 18px;
    line-height: 20px;
    padding: 0;
    text-align: center;
    max-width: 720px;         /* 🔥 optional: nicer line length */
  }
}

/* ===============================
   SECTION
================================ */
/* .mmw-sustain-section {
  padding: 81px 0;
  background: #ffffff;
} */

/* ===============================
/* ===============================
   SUSTAINABILITY SECTION
================================ */
.mmw-sustain-section {
  width: 100%;
  padding: 81px 0;
}

/* ===============================
   CONTAINER
================================ */
.mmw-sustain-container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 20px;
  /* space between rows */
}

/* ===============================
   ROW
================================ */
.mmw-sustain-row {
  width: 100%;
  max-width: 1440px;
  max-height: 562px;

  display: flex;
  gap: 20px;
  /* 🔥 exact gap */
}

.mmw-sustain-row.reverse {
  flex-direction: row-reverse;
}

/* ===============================
   IMAGE
================================ */
.mmw-sustain-image {
  max-width: 832px;
  max-height: 562px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.mmw-sustain-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================
   TEXT - SVG BACKGROUND
================================ */
.mmw-sustain-text {
  width: 588px;
  height: 562px;

  border-radius: 24px;

  padding: 48px 94px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  color: #ffffff;

  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* 🔥 THIRD ROW - SPECIFIC PADDING */
.mmw-sustain-row:nth-child(3) .mmw-sustain-text {
  padding-left: 64px;
  padding-right: 64px;
}

/* SVG Background Element */
.mmw-sustain-text .card-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  border-radius: 24px;
}

/* Ensure content is above background */
.mmw-sustain-text h3,
.mmw-sustain-text p {
  position: relative;
  z-index: 1;
}

/* TEXT STYLES */
.mmw-sustain-text h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 48px;
  line-height: 48px;
  font-weight: 500;
  margin-bottom: 18px;
}

.mmw-sustain-text p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  margin: 0;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1500px) {
  .mmw-sustain-container {
    padding: 0 40px;
  }

  .mmw-sustain-image {
    max-width: 57.78%;
    /* 832/1440 */
  }

  .mmw-sustain-text {
    width: 40.83%;
    /* 588/1440 */
  }
  .mmw-sustain-text h3 {
    font-size: 42px;
    line-height: 48px;
  }

  .mmw-sustain-text p {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (max-width: 1200px) {
  .mmw-sustain-container {
    padding: 0 24px;
  }

  .mmw-sustain-text h3 {
    font-size: 42px;
    line-height: 48px;
  }

  .mmw-sustain-text p {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (min-width: 993px) and (max-width: 1366px) {
  /* ===============================
     SECTION
  ================================ */
  .mmw-sustain-section {
    width: 100%;
    padding: 64px 0;
  }

  /* ===============================
     CONTAINER (FIXED)
  ================================ */
  .mmw-sustain-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
  }

  /* ===============================
     ROW
  ================================ */
  .mmw-sustain-row {
    width: 100%;
    height: 520px;
    display: flex;
    gap: 20px;
  }

  .mmw-sustain-row.reverse {
    flex-direction: row-reverse;
  }

  /* ===============================
     IMAGE
  ================================ */
  .mmw-sustain-image {
    flex: 0 0 60%;
    width: 60%;
    height: 100%;
    max-width: none;
    border-radius: 24px;
    overflow: hidden;
  }

  .mmw-sustain-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ===============================
     TEXT CARD
  ================================ */
.mmw-sustain-text {
    flex: 0 0 calc(40% - 20px);
    width: calc(40% - 20px);
    height: 100%;
    border-radius: 24px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  .mmw-sustain-text h3 {
    font-size: 26px;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 14px;
  }

  .mmw-sustain-text p {
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
    margin: 0;
  }
  /* SVG background */
  .mmw-sustain-text .card-bg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 24px;
  }

  .mmw-sustain-text h3,
  .mmw-sustain-text p {
    position: relative;
    z-index: 1;
  }

  /* ===============================
     TEXT SIZES (AS REQUESTED)
  ================================ */
  
}
@media (max-width: 992px) {
  .mmw-sustain-section {
    padding: 40px 0;
  }

  .mmw-sustain-container {
    padding: 0 20px;
    gap: 32px;
  }

  .mmw-sustain-row,
  .mmw-sustain-row.reverse {
    flex-direction: column;
    height: auto;
    max-height: none;
    gap: 16px;
    margin-bottom: 0;
  }

  /* 🔥 Force image to appear first on mobile */
  .mmw-sustain-image {
    order: 1;
    width: 100%;
    max-width: 100%;
    height: 300px;
    max-height: none;
    border-radius: 15px;
  }

  .mmw-sustain-text {
    order: 2;
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 30px 20px;
    border-radius: 15px;
  }

  /* 🔥 Reset third row padding on mobile */
  .mmw-sustain-row:nth-child(3) .mmw-sustain-text {
    padding: 30px 20px;
  }

  .mmw-sustain-text .card-bg-svg {
    border-radius: 15px;
  }

  .mmw-sustain-text h3 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .mmw-sustain-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
  }
}

@media (max-width: 768px) {
  .mmw-sustain-section {
    padding: 40px 0;
  }

  .mmw-sustain-container {
    gap: 24px;
    padding: 0 24px;
  }

  .mmw-sustain-row {
    gap: 16px;
  }

  .mmw-sustain-image {
    height: 300px;
    border-radius: 15px;
  }

  .mmw-sustain-text {
    padding: 30px 20px;
    border-radius: 15px;
  }

  /* 🔥 Reset third row padding on smaller mobile */
  .mmw-sustain-row:nth-child(3) .mmw-sustain-text {
    padding: 30px 20px;
  }

  .mmw-sustain-text .card-bg-svg {
    border-radius: 15px;
  }

  .mmw-sustain-text h3 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .mmw-sustain-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
  }
}
.mmw-un-heading {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.mmw-un-heading h2 {
  max-width: 1008px;
  font-family: "Roboto", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 52px;
  color: #023b7c;
  text-align: center;
  margin: 0;
}

/* ===============================
   UN SECTION
================================ */
.mmw-un-section {
  background: #ffffff;
  padding: 60px 0 40px;
}

/* ===============================
   GRID CONTAINER
================================ */
.mmw-un-container {
  max-width: 1264px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;

  align-items: center;
  justify-items: center;
}

/* ===============================
   IMAGE WRAPPER (HOVER TARGET)
================================ */
.mmw-un-card {
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ===============================
   UN SYMBOL IMAGE
================================ */
.mmw-un-card img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ===============================
   HOVER EFFECT (SAME FEEL)
================================ */
.mmw-un-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(0, 145, 208, 0.12);
}

/* ===============================
   FOOTER TEXT
================================ */
.mmw-un-footer-text {
  margin: 50px auto 0;
  max-width: 931px;

  font-family: "Roboto", sans-serif;
  font-size: 40px;
  font-weight: 500;
  text-align: center;

  background: linear-gradient(180deg,
      #0091D0 0%,
      #03499A 50.59%,
      #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  white-space: nowrap;
}

/* ===============================
   RESPONSIVE
================================ */

/* TABLET */
@media (max-width: 1366px) {
  .mmw-un-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .mmw-un-card img {
    max-width: 200px;
  }
}
@media (min-width:768px) and (max-width: 1366px) {
  .mmw-un-heading {
    margin-bottom: 16px;
  }

  .mmw-un-section {
    padding-top: 32px;
  }

  .mmw-un-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
    padding: 0 24px;
  }

  .mmw-un-card img {
    max-width: 180px;
  }

   .mmw-un-heading {
    margin-bottom: 16px;
    justify-content: center;      /* 🔥 center container */
    padding: 0 24px;
    text-align: center;           /* 🔥 ensure text aligns center */
  }

  .mmw-un-heading h2 {
    font-size: 28px;
    line-height: 28px;
    padding: 0 24px;
    text-align: center;           /* 🔥 center heading text */
    margin: 0 auto;               /* 🔥 keeps it centered */
  }

  .mmw-un-card {
    max-width: 320px;
    margin: 0 auto;
  }

  .mmw-un-footer-text {
  text-align: center;      /* 🔥 center text */
  font-size: 28px;
  line-height: 28px;
  padding: 0 48px;
  margin: 32px auto;
  white-space: inherit;
}



}

/* MOBILE */
@media (max-width: 768px) {
  .mmw-un-heading {
    margin-bottom: 16px;
  }

  .mmw-un-section {
    padding-top: 32px;
  }

  .mmw-un-container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 24px;
  }

  .mmw-un-card img {
    max-width: 180px;
  }

  .mmw-un-heading {
    justify-content: flex-start;
    padding: 0 24px;

  }

  .mmw-un-heading h2 {
    font-size: 24px;
    line-height: 24px;
    padding: 0 24px;
    text-align: left;
  }

  .mmw-un-card {
    max-width: 320px;
    margin: 0 auto;
  }

  .mmw-un-footer-text {
    text-align: left;
    font-size: 24px;
    line-height: 24px;
    padding: 0 48px;
    margin: 32px auto;
    white-space: inherit;
  }


}



.mmw-awards-hero {
  width: 100%;
  height: 429px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0091D0 0%, #03499A 100%);
  /* Blue gradient */
}

/* SVG Background Element */
.mmw-awards-hero .hero-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* INNER WRAP */
.mmw-awards-inner {
  max-width: 1200px;
  text-align: center;
  color: #ffffff;
  padding: 0 40px;
  position: relative;
  z-index: 1;
  /* Above SVG background */
}

/* TITLE */
.mmw-awards-inner h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 48px;
  /* FIGMA */

  line-height: 52px;
  /* FIGMA */
  font-weight: 500;
  /* FIGMA */
  margin: 0 0 16px 0;
}

/* DESCRIPTION */
.mmw-awards-inner p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 22px;
  /* FIGMA */
  line-height: 32px;
  /* FIGMA */
  font-weight: 400;
  max-width: 1049px;
  /* FIGMA */
  margin: 0 auto;
  opacity: 0.95;
}

/* ===============================
   RESPONSIVE - TABLET
================================ */
@media (min-width:768px) and (max-width: 1366px) {
  /* ===============================
   MOBILE – FIX LEFT / RIGHT PADDING
================================ */

  .mmw-awards-hero {
    width: 100%;
    margin: 0;
    /* 🔥 reset any centering */
    padding: 60px 20px;
    /* 🔥 equal left & right */
    box-sizing: border-box;
  }

  .mmw-awards-inner {
    width: 100%;
    max-width: 100%;
    /* 🔥 remove desktop constraint */
    margin: 0;
    /* 🔥 no auto centering */
    padding: 0;
    /* 🔥 padding handled by parent */
    box-sizing: border-box;
  }



  .mmw-awards-inner h3 {
    font-size: 32px !important;
    /* 🔥 Consistent with other sections */
    line-height: 28px;

    margin-bottom: 16px;
    text-align: center;
    /* 🔥 Left align */
  }

  .mmw-awards-inner p {
    font-size: 18px;
    /* 🔥 Consistent with other sections */
    line-height: 20px;
    text-align: center;
    /* 🔥 Left align */
  }

  .mmw-awards-inner p br {
    display: none;
    /* Remove line breaks on mobile */
  }
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  /* ===============================
   MOBILE – FIX LEFT / RIGHT PADDING
================================ */

  .mmw-awards-hero {
    width: 100%;
    margin: 0;
    /* 🔥 reset any centering */
    padding: 60px 20px;
    /* 🔥 equal left & right */
    box-sizing: border-box;
  }

  .mmw-awards-inner {
    width: 100%;
    max-width: 100%;
    /* 🔥 remove desktop constraint */
    margin: 0;
    /* 🔥 no auto centering */
    padding: 0;
    /* 🔥 padding handled by parent */
    box-sizing: border-box;
  }



  .mmw-awards-inner h3 {
    font-size: 24px !important;
    /* 🔥 Consistent with other sections */
    line-height: 24 px;

    margin-bottom: 16px;
    text-align: center;
    /* 🔥 Left align */
  }

  .mmw-awards-inner p {
    font-size: 16px;
    /* 🔥 Consistent with other sections */
    line-height: 18px;
    text-align: center;
    /* 🔥 Left align */
  }

  .mmw-awards-inner p br {
    display: none;
    /* Remove line breaks on mobile */
  }
}

@media (max-width: 480px) {
  .mmw-awards-hero {
    padding: 60px 0;
  }

  .mmw-awards-inner h3 {
    font-size: 32px;
    line-height: 38px;
  }

  .mmw-awards-inner p {
    font-size: 16px;
    line-height: 18px;
  }
}

/* =========================
   AWARD CARD SECTION
========================= */
/* =========================
   AWARD CARD SECTION
========================= */
.mmw-award-card {
  width: 100%;
  margin: 81px auto;
  background: #ffffff;
  padding: 0;
}

/* Add gap between multiple cards */
.mmw-award-card+.mmw-award-card {
  margin-top: 40px;
}

/* =========================
   CARD CONTAINER - 1440 × 714
========================= */
.mmw-award-inner {
  max-width: 1440px;
  height: 714px;
  margin: 0 auto;
  padding: 57px;
  /* Equal padding on all sides: (714 - 600) / 2 = 57px */
  background: #f7f7f7;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
}

/* Main content wrapper - image + text */
.mmw-award-main-content {
  display: flex;
  gap: 64px;
  flex: 1;
  align-items: stretch;
  height: 600px;
  /* Fixed height for the content area */
}

/* =========================
   IMAGE SECTION
========================= */
.mmw-award-image {
  flex: 0 0 600px;
  height: 600px;
  /* Fixed height - matches the image dimensions */
  width: 600px;
  /* Fixed width */
}

.mmw-award-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* =========================
   CONTENT SECTION
========================= */
.mmw-award-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 60px;
  /* Remove extra padding */
}

/* EYEBROW TEXT - "Appreciation to the Eternal Relationships" */
.mmw-award-eyebrow {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #1a1a1a;
  margin-bottom: 12px;
}

/* MAIN HEADING - Blue heading text */
.mmw-award-content h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 52px;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  max-width: 636px;
}

/* BODY TEXT - Description paragraph */
.mmw-award-content p {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  color: #333333;
  max-width: 636px;
  margin-bottom: 0;
}

/* =========================
   FOOTER ROW - Below image/content
========================= */
/* =========================
   PNG BUTTON STYLING
========================= */
.mmw-award-btn-img {
  display: inline-block;
  width: 248px;
  /* Your exact width */
  height: 55px;
  /* Your exact height */
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  vertical-align: middle;
}

.mmw-award-btn-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* Ensures the PNG doesn't stretch weirdly */
}

/* 🔥 Mobile styling for image button */
@media (max-width: 992px) {
  .mmw-award-btn-img {
    width: 110px;
    /* 🔥 Match regular button size */
    height: 32px;
    /* 🔥 Match regular button height */
  }
}

/* Hover effect to match the video style */


/* =========================
   FOOTER ALIGNMENT FIX
========================= */
.mmw-award-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 20px;
  /* Space from the paragraph */
}

/* YEAR TEXT - "Year 2024" */
.mmw-award-year {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #333333;
}

/* =========================
   BUTTON - KNOW MORE
========================= */
.mmw-award-btn {
  width: 253px;
  height: 56px;
  background: linear-gradient(135deg, #0b5ed7, #009adf);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mmw-award-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 94, 215, 0.3);
}

/* BUTTON TEXT */
.mmw-award-btn .button-text {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  text-align: center;
}

/* BUTTON ARROW */
.mmw-award-btn .button-arrow {
  font-family: "Roboto", Arial, sans-serif;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
}

/* =========================
   ALTERNATING LAYOUT
========================= */
/* Image on RIGHT for even cards */
.mmw-award-card:nth-child(even) .mmw-award-main-content {
  flex-direction: row-reverse;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1440px) {
  .mmw-award-inner {
    max-width: calc(100% - 80px);
    margin: 0 40px;
  }
}

@media (max-width: 1200px) {
  .mmw-award-main-content {
    padding: 32px;
    gap: 40px;
  }

  .mmw-award-image {
    flex: 0 0 450px;
  }

  .mmw-award-content h3 {
    font-size: 36px;
    line-height: 44px;
  }

  .mmw-award-content p {
    font-size: 20px;
    line-height: 28px;
  }
}

.mmw-awards-hero {
  width: 100%;
  height: 429px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* background: linear-gradient(135deg, #0091D0 0%, #03499A 100%); */
  /* Blue gradient */
}

/* SVG Background Element */
.mmw-awards-hero .hero-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* INNER WRAP */
.mmw-awards-inner {
  max-width: 1200px;
  text-align: center;
  color: #ffffff;
  padding: 0 40px;
  position: relative;
  z-index: 2;
  /* Above SVG background */
}

/* TITLE */
.mmw-awards-inner h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 48px;
  /* FIGMA */

  line-height: 52px;
  /* FIGMA */
  font-weight: 500;
  /* FIGMA */
  margin: 0 0 16px 0;
}

/* DESCRIPTION */
.mmw-awards-inner p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 22px;
  /* FIGMA */
  line-height: 32px;
  /* FIGMA */
  font-weight: 400;
  max-width: 1049px;
  /* FIGMA */
  margin: 0 auto;
  opacity: 0.95;
}

/* ===============================
   RESPONSIVE - TABLET
================================ */

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  .mmw-awards-hero {
    height: auto;
    padding: 60px 0;
    /* 🔥 Reduced for uniformity */
  }

  .mmw-awards-inner {
    padding: 0 20px;
    text-align: left;
    /* 🔥 Left align for uniformity */
  }

  .mmw-awards-inner h3 {
    font-size: 24px;
    /* 🔥 Consistent with other sections */
    line-height: 24px;
    margin-bottom: 16px;
    text-align: left;
    /* 🔥 Left align */
  }

  .mmw-awards-inner p {
    font-size: 16px;
    /* 🔥 Consistent with other sections */
    line-height: 18px;
    text-align: left;
    /* 🔥 Left align */
  }

  .mmw-awards-inner p br {
    display: none;
    /* Remove line breaks on mobile */
  }
}

@media (max-width: 480px) {
  .mmw-awards-hero {
    padding: 60px 0;
  }

  .mmw-awards-inner h3 {
    font-size: 32px;
    line-height: 38px;
  }

  .mmw-awards-inner p {
    font-size: 16px;
    line-height: 18px;
  }
}

/* =========================
   AWARD CARD SECTION
========================= */
/* =========================
   AWARD CARD SECTION
========================= */
.mmw-award-card {
  width: 100%;
  margin: 81px auto;
  background: #ffffff;
  padding: 0;
}

/* Add gap between multiple cards */
.mmw-award-card+.mmw-award-card {
  margin-top: 40px;
}

/* =========================
   CARD CONTAINER - 1440 × 714
========================= */
.mmw-award-inner {
  max-width: 1440px;
  height: 714px;
  margin: 0 auto;
  padding: 57px;
  /* Equal padding on all sides: (714 - 600) / 2 = 57px */
  background: #f7f7f7;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
}

/* Main content wrapper - image + text */
.mmw-award-main-content {
  display: flex;
  gap: 64px;
  flex: 1;
  align-items: stretch;
  height: 600px;
  /* Fixed height for the content area */
}

/* =========================
   IMAGE SECTION
========================= */
.mmw-award-image {
  flex: 0 0 600px;
  height: 600px;
  /* Fixed height - matches the image dimensions */
  width: 600px;
  /* Fixed width */
}

.mmw-award-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* =========================
   CONTENT SECTION
========================= */
.mmw-award-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0;
  /* Remove extra padding */
}

/* EYEBROW TEXT - "Appreciation to the Eternal Relationships" */
.mmw-award-eyebrow {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #1a1a1a;
  margin-bottom: 12px;
}

/* MAIN HEADING - Blue heading text */
.mmw-award-content h3 {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 52px;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  max-width: 636px;
}

/* BODY TEXT - Description paragraph */
.mmw-award-content p {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  font-size: 24x;
  line-height: 30px;
  color: #333333;
  max-width: 636px;
  margin-bottom: 0;
}

/* =========================
   FOOTER ROW - Below image/content
========================= */
/* =========================
   PNG BUTTON STYLING
========================= */
.mmw-award-btn-img {
  display: inline-block;
  width: 248px;
  /* Your exact width */
  height: 55px;
  /* Your exact height */
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  vertical-align: middle;
}

.mmw-award-btn-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* Ensures the PNG doesn't stretch weirdly */
}

/* 🔥 Mobile styling for image button */
@media (max-width: 992px) {
  .mmw-award-btn-img {
    width: 110px;
    /* 🔥 Match regular button size */
    height: 32px;
    /* 🔥 Match regular button height */
  }
}

/* Hover effect to match the video style */


/* =========================
   FOOTER ALIGNMENT FIX
========================= */
.mmw-award-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 20px;
  /* Space from the paragraph */
}

/* YEAR TEXT - "Year 2024" */
.mmw-award-year {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #333333;
}

/* =========================
   BUTTON - KNOW MORE
========================= */
.mmw-award-btn {
  width: 253px;
  height: 56px;
  background: linear-gradient(135deg, #0b5ed7, #009adf);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mmw-award-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 94, 215, 0.3);
}

/* BUTTON TEXT */
.mmw-award-btn .button-text {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  text-align: center;
}

/* BUTTON ARROW */
.mmw-award-btn .button-arrow {
  font-family: "Roboto", Arial, sans-serif;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
}

/* =========================
   ALTERNATING LAYOUT
========================= */
/* Image on RIGHT for even cards */
.mmw-award-card:nth-child(even) .mmw-award-main-content {
  flex-direction: row-reverse;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1440px) {
  .mmw-award-inner {
    max-width: calc(100% - 80px);
    margin: 0 40px;
  }
}

@media (max-width: 1200px) {
  .mmw-award-main-content {
    padding: 32px;
    gap: 40px;
  }

  .mmw-award-image {
    flex: 0 0 450px;
  }

  .mmw-award-content h3 {
    font-size: 36px;
    line-height: 44px;
  }

  .mmw-award-content p {
    font-size: 20px;
    line-height: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1366px) {

   .mmw-award-btn,
  .mmw-award-btn-img {
    width: 180px !important;
    height: 55px !important;
    border-radius: 28px !important;
  }

  /* If CSS button exists, make it visually identical */
  .mmw-award-btn {
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .mmw-award-wrapper,
  .mmw-awards-page,
  section.mmw-award-card {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* =========================
     OUTER WRAPPER
  ========================= */
  .mmw-award-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 32px;          /* 🔥 responsive padding */
    background: #f7f7f7;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* =========================
     MAIN CONTENT ROW
  ========================= */
  .mmw-award-main-content {
    display: flex;
    gap: 32px;                   /* 🔥 reduced gap */
    align-items: stretch;
    height: auto;                /* 🔥 let content decide */
  }

  /* =========================
     IMAGE
  ========================= */
  .mmw-award-image {
    flex: 0 0 52%;               /* 🔥 proportional width */
    aspect-ratio: 1 / 1;         /* keeps square feel */
    border-radius: 12px;
    overflow: hidden;
  }
  

  .mmw-award-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  /* =========================
     CONTENT
  ========================= */
  .mmw-award-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
  }

  .mmw-award-eyebrow {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 10px;
  }

  .mmw-award-content h3 {
    font-size: 28px;
    line-height: 28px;
    margin-bottom: 16px;
    max-width: 100%;
  }

  .mmw-award-content p {
    font-size: 18px;             /* 🔥 typo fixed */
    line-height: 20px;
    max-width: 100%;
    margin-bottom: 0;
  }

  /* =========================
     FOOTER
  ========================= */
  .mmw-award-footer {
    margin-top: auto;
    margin-bottom: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .mmw-award-year {
    font-size: 20px;
    line-height: 24px;
  }

  /* =========================
     BUTTON
  ========================= */
  .mmw-award-btn {
    width: 220px;
    height: 52px;
    border-radius: 26px;
  }

  .mmw-award-btn .button-text {
    font-size: 16px;
  }

  .mmw-award-btn .button-arrow {
    font-size: 22px;
  }

  /* =========================
     ALTERNATING LAYOUT
  ========================= */
  .mmw-award-card:nth-child(even) .mmw-award-main-content {
    flex-direction: row-reverse;
  }
}


@media (max-width: 992px) {
  .mmw-award-card {
    margin: 40px 20px;
    /* 🔥 Equal left/right margins */
  }

  .mmw-award-inner {
    height: auto;
    /* padding: 20px; */
    /* 🔥 Equal padding all sides */
    margin: 0;
    /* 🔥 Remove margins */
    width: 100%;
    /* 🔥 Full width within parent */
    box-sizing: border-box;
  }

  .mmw-award-main-content {
    flex-direction: column;
    margin-bottom: 12px;
    /* 🔥 Reduced gap */
    gap: 12px;
    /* 🔥 Smaller gap between image and content */
    height: auto;
  }

  /* Reset alternating layout on mobile */
  .mmw-award-card:nth-child(even) .mmw-award-main-content {
    flex-direction: column;
  }

  .mmw-award-image {
    flex: 0 0 auto;
    height: 250px;
    /* 🔥 Slightly smaller for mobile */
    width: 100%;
    max-height: none;
    order: 1;
  }

  .mmw-award-content {
    padding-top: 0;
    order: 2;
    width: 100%;
    box-sizing: border-box;
  }

  .mmw-award-eyebrow {
    font-size: 14px;
    /* 🔥 Smaller */
    line-height: 20px;
    margin-bottom: 8px;
  }

  .mmw-award-content h3 {
    font-size: 24px;
    /* 🔥 Slightly smaller */
    line-height: 24px;
    margin-bottom: 12px;
    word-wrap: break-word;
    /* 🔥 Prevent overflow */
  }

  .mmw-award-content p {
    font-size: 16px;
    /* 🔥 Smaller text */
    line-height: 18px;
    font-weight: 400;
    margin-bottom: 12px;
    word-wrap: break-word;
    /* 🔥 Prevent overflow */
  }

  /* 🔥 Footer - Year and Button with wrap support */
  .mmw-award-footer {
    flex-direction: column;
    /* 🔥 Stack vertically on mobile */
    align-items: flex-start;
    gap: 10px;
    /* 🔥 Small gap */
    height: auto;
    padding-top: 10px;
    width: 100%;
  }

  .mmw-award-year {
    font-size: 13px;
    /* 🔥 Smaller text */
    line-height: 18px;
    flex-shrink: 0;
  }

  /* 🔥 Much smaller Know More button */
  .mmw-award-btn {
    width: auto;
    min-width: 110px;
    /* 🔥 Smaller minimum width */
    height: 32px;
    /* 🔥 Smaller height */
    padding: 0 14px;
    /* 🔥 Tighter padding */
    flex-shrink: 0;
    border-radius: 16px;
    /* 🔥 Proportional radius */
  }

  .mmw-award-btn .button-text {
    font-size: 12px;
    /* 🔥 Smaller text */
    font-weight: 600;
  }

  .mmw-award-btn .button-arrow {
    font-size: 14px;
    /* 🔥 Smaller arrow */
  }
}

@media (max-width: 768px) {
  .mmw-award-card {
    margin: 32px 20px;
    /* 🔥 Equal left/right margins */
  }

  .mmw-award-inner {
    padding: 20px;
    margin: 0;
    width: 100%;
  }

  .mmw-award-image {
    height: 250px;
    border-radius: 12px;
  }

  .mmw-award-image img {
    border-radius: 12px;
  }
}

/* DEFAULT (DESKTOP) */
.contact-intro {
  height: 302px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  /* Fallback */
  position: relative;
  overflow: hidden;
}

/* 🔥 BACKGROUND SVG IMAGE - LAYER 0 */
.contact-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Container and text - LAYER 1 */
.contact-intro .container {
  position: relative;
  z-index: 1;
}

.contact-intro p {
  font-family: Roboto, sans-serif;
  font-size: 48px;
  line-height: 52px;
  font-weight: 500;
  text-align: center;
  background: linear-gradient(180deg, #0091D0 0%, #03499A 50.59%, #1A1A1A 123.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

/* RESPONSIVE */
@media (max-width: 1366px) {
  .contact-intro {
    height: auto;
    padding: 60px 20px;
  }

  .contact-intro p {
    font-size: 28px;
    line-height: 28px;
  }
}

@media (max-width: 768px) {
  .contact-intro {
    padding: 40px 20px;
  }

  .contact-intro p {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (max-width: 480px) {
  .contact-intro {
    padding: 32px 16px;
  }

  .contact-intro p {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ================================
   CONTACT CTA – MAIN SECTION
================================ */

.contact-cta {
  height: 1044px;
  /* Fallback gradient */
  background: linear-gradient(180deg,
      #0091D0 0%,
      #03499A 52%,
      #1A1A1A 124%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 🔥 SECTION BACKGROUND IMAGE - LAYER 0 */
.contact-section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* ================================
   INNER WRAPPER
================================ */

.contact-cta-inner {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 793px 584px;
  gap: 63px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* ================================
   LEFT CONTENT
================================ */

.contact-form-wrap h3 {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 52px;
  color: #ffffff;
  margin-bottom: 44px;

  /* 🔒 FORCE EXACTLY 2 LINES */

}

/* ================================
   FORM ELEMENTS WITH IMAGE BACKGROUNDS
================================ */

.input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 22px;
}

/* INPUT/TEXTAREA BACKGROUND IMAGES */
.input-bg,
.textarea-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 50px;
}

.contact-form input,
.contact-form textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 80px;
  padding: 18px 36px;
  font-size: 20px;
  font-family: Roboto, sans-serif;
  border-radius: 50px;
  border: none;
  outline: none;
  background: transparent;
  /* 🔥 Transparent to show image behind */
  color: #ffffff;
}

.contact-form textarea {
  height: 155px;
  border-radius: 50px;
  resize: none;
}

.contact-form ::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* ================================
   FORM FOOTER
================================ */

.form-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
}
/* Checkbox wrapper */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
}

/* Hide native checkbox */
.checkbox input {
  display: none;
}

/* Circle wrapper */
.checkbox-circle {
  width: 60px;
  height: 60px;
  position: relative;
  flex-shrink: 0;
}

/* Circle image */
.checkbox-circle img {
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.3s ease;
}

/* Tick mark */
.checkbox-circle::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Checked state */
.checkbox input:checked + .checkbox-circle::after {
  opacity: 1;
}

.checkbox input:checked + .checkbox-circle img {
  opacity: 0.7;
}

.checkbox-text {
  white-space: nowrap;
}

/* 🔥 SUBMIT BUTTON WITH IMAGE */
.submit-btn {
  width: 291px;
  height: 56px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.submit-btn-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.submit-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.submit-btn:active {
  transform: translateY(0);
}

/* ================================
   RIGHT GLASS CARD
================================ */

.contact-info-card {
  margin-top: 160px;
  width: 584px;
  height: 564px;
  padding: 54px 48px;
  border-radius: 50px;
  /* Fallback background */
  background: rgba(29, 29, 29, 0.2);
  backdrop-filter: blur(18px);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* 🔥 CARD BACKGROUND IMAGE - LAYER 0 */
.card-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  border-radius: 50px;
}

/* 🔥 CARD CONTENT - LAYER 1 */
.card-content {
  margin-left: 40px;
  position: relative;
  z-index: 1;
}

/* Heading */
.contact-info-card h3 {
  font-size: 48px;
  line-height: 48px;
  font-weight: 400;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

/* Text Blocks */
.contact-block {
  font-family: "Roboto", sans-serif;
  font-size: 23px;
  /* Standard Regular */
  line-height: 29px;
  font-weight: 400;
  margin-bottom: 36px;
}

/* STRONG TEXT (Roboto Medium) */
.contact-block strong {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  /* Medium weight */
  font-size: 23px;
  line-height: 29px;
  display: inline-block;
}

/* CAREER CTA WRAPPER */
.contact-career-cta {
  padding: 48px 0 80px;
  background: #ffffff;
}

/* CENTER */
.contact-career-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* PILL */
.career-pill {
  width: 704px;
  height: 56px;
  padding: 8px 16px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-decoration: none;
  color: #0a4fa3;

  background: linear-gradient(0deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8));

  transition: transform 0.3s ease;
}

.career-pill:hover {
  transform: translateY(-2px);
}

/* TEXT */
.career-text {
  font-family: Roboto, sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  display: inline-block;
}

/* 🔥 EMAIL BUTTON - IMAGE VERSION (with arrow included) */
.career-email-btn {
  display: inline-flex;
  align-items: center;
  /* gap: 2px; */
  justify-content: center;
  /* height: 56px; Adjust based on your image size */
  transition: transform 0.3s ease, opacity 0.3s ease;

}

.email-btn-image {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.career-pill:hover .career-email-btn {
  transform: scale(1.05);
  opacity: 0.95;
}


/* SOCIAL ICONS */
.social-icons {
  display: flex;
  gap: 25px;
  /* 🔥 25px gap between icons */
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Hide mobile social icons by default */
.mobile-social-icons {
  display: none;
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1500px) {
  .contact-cta-inner {
    max-width: 100%;
    padding: 0 40px;
    grid-template-columns: 1fr 1fr;
  }
}



/* =====================================
   MOBILE & TABLET FIXES – CONTACT PAGE
   (DESKTOP SAFE)
===================================== */

/* -------------------------------------
   TITLE SWITCH (DESKTOP vs MOBILE)
------------------------------------- */
.mobile-about-title {
  display: none;
}

@media (max-width: 768px) {
  .about-title {
    display: none;
  }

  .mobile-about-title {
    display: block;
    font-family: Roboto, sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
    background: linear-gradient(180deg,
        #0091D0 0%,
        #03499A 50.59%,
        #1A1A1A 123.9%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* -------------------------------------
   CONTACT CTA FLOW FIX
------------------------------------- */
/* =====================================
   CONTACT CTA – MOBILE SAFE
===================================== */
@media (min-width: 840px) and (max-width: 1366px) {

  /* ===============================
     SECTION
  =============================== */
  .contact-cta {
    min-height: auto;
    padding: 80px 0;
    background: linear-gradient(
      180deg,
      #0091D0 0%,
      #03499A 52%,
      #1A1A1A 124%
    );
    position: relative;
    overflow: hidden;
  }

  /* Background SVG */
  .contact-section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* ===============================
     INNER GRID (SYNC HEIGHTS)
  =============================== */
  .contact-cta-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;

    align-items: stretch; /* 🔥 CRITICAL */
    position: relative;
    z-index: 1;

    padding-left: clamp(40px, 6vw, 120px);
    padding-right: clamp(40px, 6vw, 120px);
    box-sizing: border-box;
    align-items: flex-start;
  }

  /* ===============================
     LEFT – FORM
  =============================== */
  .contact-form-wrap {
    width: 100%;
  }

  .contact-form-wrap h3 {
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 36px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 22px;
  }

  .input-bg,
  .textarea-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
    z-index: 0;
  }

  .contact-form input,
  .contact-form textarea {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 72px;
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 50px;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
  }

  .contact-form textarea {
    height: 150px;
    resize: none;
  }

  .contact-form ::placeholder {
    color: rgba(255, 255, 255, 0.85);
  }

  /* ===============================
     FORM FOOTER
  =============================== */
  .form-footer {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    color: #ffffff;
    cursor: pointer;
  }

  .checkbox input {
    display: none;
  }

  .checkbox-circle {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  .submit-btn {
    width: 240px;
    height: 52px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .submit-btn-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ===============================
     RIGHT – GET IN TOUCH CARD
  =============================== */
  .contact-info-card {
    width: 100%;
    height: auto;
    max-height: 500px;
    margin: 0;
    margin-top: 85px;
    padding: 40px 36px;
    border-radius: 40px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Card background image */
  .card-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    z-index: 0;
  }

  /* Card content */
  .card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: auto  ;
  }

  .contact-info-card h3 {
    font-size: 28px;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 28px;
    color: #ffffff;
  }

  .contact-block {
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 28px;
    color: #ffffff;
  }

  .contact-block strong {
    font-weight: 500;
    font-size: 18px;
  }

  /* Push icons to bottom */
  .social-icons {
    margin-top: auto;
    display: flex;
    gap: 24px;
  }

}


/* TABLET & MOBILE */
@media (max-width: 840px) {

  /* SECTION */
  .contact-cta {
    height: auto;
    padding: 56px 0;
  }

  /* INNER LAYOUT */
  .contact-cta-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
  }

  /* INFO CARD FIRST */
  .contact-info-card {
    order: 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 32px 24px;
    border-radius: 32px;
    box-sizing: border-box;
  }

  /* FORM SECOND */
  .contact-form-wrap {
    order: 2;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* 🔥 critical */
    box-sizing: border-box;
  }

  /* HARD LOCK FORM + CHILDREN */
  .contact-form,
  .contact-form * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* CARD BACKGROUND */
  .card-bg-image {
    border-radius: 32px;
  }

  /* HEADINGS */
  .contact-form-wrap h3,
  .contact-info-card h3 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 24px;
  }

  /* INPUTS */
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    height: 52px;
    padding: 14px 20px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .contact-form textarea {
    height: 104px;
    resize: none;
  }

  /* INPUT BACKGROUNDS */
  .input-bg,
  .textarea-bg {
    border-radius: 32px;
    width: 100%;
    max-width: 100%;
  }

  /* FORM FOOTER */
  .form-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  /* CHECKBOX */
  .checkbox {
    font-size: 14px;
    line-height: 24px;
  }

  .checkbox-text {
    font-size: 14px;
  }

  .checkbox-circle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  /* SUBMIT BUTTON */
  .submit-btn {
    width: 100%;
    height: 48px;
  }

  /* CONTACT TEXT */
  .contact-block {
    font-size: 16px;
    line-height: 24px;
  }

  .contact-block strong,
  .contact-block span {
    font-size: 16px;
  }
}

/* =====================================
   SMALL MOBILE (≤ 480px)
===================================== */

@media (max-width: 480px) {

  .contact-cta {
    padding: 32px 0;
  }

  .contact-cta-inner {
    gap: 24px;
    padding: 0 20px;
  }

  .contact-info-card {
    padding: 24px 20px;
  }

  .contact-form-wrap h3,
  .contact-info-card h3 {
    margin-bottom: 20px;
  }
}


/* -------------------------------------
   SOCIAL ICONS → HIDE IN CARD, SHOW AT BOTTOM
------------------------------------- */
@media (max-width: 768px) {
  .card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 🔥 Hide social icons inside Get in Touch card */
  .contact-info-card .social-icons {
    display: none;
  }

  /* 🔥 Show mobile social icons at bottom (centered) */
  .mobile-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 80px;
    padding: 0 20px;
  }

  .mobile-social-icons .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-social-icons .social-icon img {
    width: 36px;
    height: 36px;
  }
}

/* -------------------------------------
   CAREER CTA MOBILE POLISH
------------------------------------- */
@media (max-width: 768px) {
  .contact-career-cta {
    padding: 32px 0 56px;
  }

  .career-pill {
    width: 100%;
    max-width: 100%;
    padding: 20px 24px;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    /* 🔥 Use flexbox for layout control */
    flex-direction: column;
    /* 🔥 Stack items vertically */
    align-items: center;
    /* 🔥 Center items horizontally */
    gap: 12px;
    /* 🔥 Space between text and button */
  }

  .career-text {
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center;
    /* 🔥 Center the text */
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
    /* 🔥 Full width */
    display: block;
    /* 🔥 Block display ensures it takes full line */
  }

  .career-email-btn {
    height: 40px;
    margin: 0;
    /* 🔥 Remove margin since gap handles spacing */
    display: block;
    /* 🔥 Block display on its own line */
  }
}

@media (max-width: 480px) {
  .contact-career-cta {
    padding: 32px 0 60px;
  }

  .career-pill {
    padding: 18px 20px;
    gap: 10px;
    /* 🔥 Slightly smaller gap on smaller screens */
  }

  .career-text {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .career-email-btn {
    height: 38px;
  }
}

/* SCROLL TO TOP BUTTON */
.scroll-top-btn {
  position: fixed;
  right: 16px;
  bottom: 24px;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 20px;

  border: none;
  cursor: pointer;

  display: none;
  /* hidden by default */
  align-items: center;
  justify-content: center;

  z-index: 999;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* SHOW ONLY ON MOBILE */
@media (min-width: 992px) {
  .scroll-top-btn {
    display: none !important;
  }
}
.scroll-top-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

.scroll-top-btn img {
  width: 22px;
  height: px;
  display: block;
}

/* Remove any hover effects on the button background */
.scroll-top-btn:hover,
.scroll-top-btn:focus,
.scroll-top-btn:active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}