/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --ink:        #0d0f13;
  --ink-mid:    #3d4147;
  --ink-muted:  #767c88;
  --ink-ghost:  rgba(13, 15, 19, 0.08);
  --paper:      #ffffff;
  --paper-tint: #f7f7f8;
  --accent:     #111318;
  --accent-dim: rgba(17, 19, 24, 0.72);

  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 80px;
  --pad-x: clamp(20px, 5vw, 72px);
}

/* ============================================================
   RESET + BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* LOADER */

.loader-singularity {
  position: fixed;
  inset: 0;

  z-index: 9999;

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

  background: #ffffff;

  overflow: hidden;

  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

.loader-singularity.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.singularity-core {
  width: 220vmax;
  height: 220vmax;

  border-radius: 50%;

  background: #050505;

  transform: scale(1);

  will-change: transform;
}
.singularity-logo {
  position: absolute;

  top: 50%;
  left: 50%;

  width: clamp(120px, 12vw, 220px);
  height: auto;

  transform:
    translate(-50%, -50%)
    scale(2.9);

  opacity: 0.96;

  filter:
    brightness(1.05)
    contrast(1.02);

  will-change:
    transform,
    opacity;
}

/* ============================================================
   HEADER
============================================================ */
.site-header {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      display: grid;
      width: 100%;
      height: var(--header-h);
      grid-template-columns: auto 1fr auto; /* Changed for better responsive handling */
      align-items: center;
      padding: 0 var(--pad-x);
      
      /* TRUE Glassmorphism Effect */
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px); /* Safari support */
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      
      /* Smooth transitions for scroll state */
      transition: height 0.4s var(--ease-out-expo), 
                  background 0.4s ease, 
                  box-shadow 0.4s ease,
                  backdrop-filter 0.4s ease;
    }

    .site-header.is-scrolled {
  --header-h: 60px;

  /* Strong white glass */
  background: rgba(255, 255, 255, 0.75);

  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);

  border: 1px solid rgba(255,255,255,0.5);

  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

    .brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      /* Smooth scale on hover/tap */
      transition: transform 0.2s ease;
    }
    
    .brand:active {
      transform: scale(0.95);
    }

    .brand img {
      display: block;
      width: 100px;
      height: auto; /* Changed to auto to maintain aspect ratio naturally */
      max-height: 40px;
      object-fit: contain;
    }

    /* Fallback logo text styling if image fails to load */
    .logo-fallback {
      font-weight: 900;
      font-size: 1.5rem;
      letter-spacing: 2px;
      color: var(--ink);
      display: none; /* Hidden by default */
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(20px, 3.5vw, 48px);
      font-family: var(--font-display);
      font-size: 0.75rem; /* Slightly larger for readability */
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-mid);
    }

    .nav-links a {
      position: relative;
      text-decoration: none;
      color: inherit;
      padding: 10px; /* Larger hit area for interaction */
      transition: color 160ms ease;
      /* Physics transition for when mouse leaves (JS handles hover transform) */
      transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;
      display: inline-block;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: 4px;
      left: 10px; /* Offset by padding */
      width: calc(100% - 20px); /* Subtract padding */
      height: 2px;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.4s var(--ease-out-expo);
      border-radius: 2px;
    }

    .nav-links a:hover {
      color: var(--ink);
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .nav-action-wrapper {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nav-action {
      display: inline-flex;
      align-items: center;
      height: 40px;
      padding: 0 24px;
      border: 1.5px solid rgba(17, 19, 24, 0.2);
      border-radius: 999px;
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(4px);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s var(--ease-out-expo);
    }

    /* Interactive button hover & active states */
    .nav-action:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }

    .nav-action:active {
      transform: translateY(1px) scale(0.96);
    }

    /* Mobile Hamburger Menu */
    .menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      position: relative;
      z-index: 101;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(5px);
    }

    .menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background-color: var(--ink);
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
    }

    .menu-toggle span:nth-child(1) { top: 35%; }
    .menu-toggle span:nth-child(2) { top: 50%; }
    .menu-toggle span:nth-child(3) { top: 65%; }

    .menu-toggle.is-active span:nth-child(1) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .menu-toggle.is-active span:nth-child(2) {
      opacity: 0;
    }
    .menu-toggle.is-active span:nth-child(3) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    @media (max-width: 768px) {
      .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        font-size: 1.2rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s var(--ease-out-expo);
      }

      .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .menu-toggle {
        display: block;
      }

      /* Move Explore button into the mobile menu if needed, or keep it up top.
         Let's keep it up top but smaller for mobile. */
      .nav-action {
        padding: 0 16px;
        font-size: 0.65rem;
      }
    }

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--header-h) + 24px) var(--pad-x) 56px;

  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero.loaded {
  opacity: 1;
}

/* Three.js canvas fills the hero — explicit vw/vh avoids CSS vs. canvas-attribute conflicts */
#product-scene {
  display: block;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100vw;
  height: 100vh;
  outline: none;
  /* WebGL already composites; no will-change needed */
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: min(720px, 90vw);
  text-align: center;
  /* Prevent copy from interfering with canvas pointer events */
  pointer-events: none;
}

/* Eyebrow row */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  /* Animate in */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.7s var(--ease-out-expo) 0.1s forwards;
}

.eyebrow-line {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 4.4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);

  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.85s var(--ease-out-expo) 0.22s forwards;
}

.hero-text {
  max-width: 480px;
  margin: 26px auto 0;
  color: var(--ink-mid);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.8;

  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.75s var(--ease-out-expo) 0.38s forwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  pointer-events: auto;

  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.7s var(--ease-out-expo) 0.52s forwards;
}

/* ============================================================
   BUTTONS / ACTIONS
============================================================ */
.primary-action,
.secondary-action {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 28px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  /* Full browser reset for <button> elements */
  border: none;
  background: none;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform 180ms var(--ease-out-expo),
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.primary-action {
  color: var(--paper);
  background: var(--ink);
  box-shadow: 0 16px 40px rgba(13, 15, 19, 0.22);
}

.primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(13, 15, 19, 0.28);
}

.primary-action:active {
  transform: translateY(0);
}

.secondary-action {
  color: var(--ink-mid);
  background: transparent;
}

.secondary-action:hover {
  color: var(--ink);
}

/* ============================================================
   SCROLL HINT
============================================================ */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeIn 0.6s ease 1.4s forwards;
}

.scroll-hint-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--ink-muted));
  transform-origin: top center;
  animation: scrollPulse 2s ease-in-out 1.8s infinite;
}

/* ============================================================
   PRODUCT PANEL
============================================================ */
.product-panel {
  position: fixed;
  z-index: 8;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  /* Hidden: invisible + shifted right */
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-out-expo),
    transform 420ms var(--ease-out-expo);
}

.product-panel.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.panel-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-tint);
  overflow: hidden;
}

/* Subtle drag hint label */
.panel-left::after {
  content: "Drag to rotate";
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.6;
  pointer-events: none;
}

#focus-product {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#focus-product:active {
  cursor: grabbing;
}

.panel-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 80px);
  /* Card content slides in slightly after the panel itself */
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 380ms var(--ease-out-expo) 160ms,
    transform 380ms var(--ease-out-expo) 160ms;
}

.product-panel.visible .panel-right {
  opacity: 1;
  transform: translateX(0);
}

.product-category {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.panel-right h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 24px;
}

#product-description {
  max-width: 380px;
  color: var(--ink-mid);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 40px;
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 0.8; transform: scaleY(1.12); }
}

/* =========================================================
   ARRIVALS SECTION
========================================================= */

.arrivals-section {
  position: relative;

  padding:
    clamp(100px, 14vw, 180px)
    var(--pad-x);

  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,1),
      rgba(244,244,246,1)
    );

  overflow: hidden;
}

/* ambient background */

.arrivals-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255,255,255,0.9),
      transparent 60%
    );

  pointer-events: none;
}

/* =========================================================
   TOPBAR
========================================================= */

.arrivals-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: clamp(48px, 7vw, 84px);
}

.arrivals-title {
  margin: 0;

  font-family: var(--font-display);

  font-size: clamp(2.8rem, 6vw, 5rem);

  font-weight: 800;

  line-height: 0.92;

  text-transform: uppercase;

  letter-spacing: -0.04em;

  color: var(--ink);
}

.arrivals-link {
  position: relative;

  font-size: 0.78rem;
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--ink);

  opacity: 0.78;
}

.arrivals-link::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -8px;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform-origin: right;
  transform: scaleX(1);

  transition: transform 320ms ease;
}

.arrivals-link:hover::after {
  transform-origin: left;
  transform: scaleX(0);
}

/* =========================================================
   GRID
========================================================= */

.arrivals-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(18px, 2vw, 28px);
}

/* =========================================================
   CARD
========================================================= */

.arrival-card {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 32px;

  border-radius: 32px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.72),
      rgba(255,255,255,0.52)
    );

  backdrop-filter:
    blur(18px)
    saturate(140%);

  box-shadow:
    0 10px 40px rgba(15,15,15,0.05);

  overflow: hidden;

  transition:
    transform 600ms cubic-bezier(.19,1,.22,1),
    box-shadow 600ms ease;
}

.arrival-card:hover {
  transform:
    translateY(-10px);

  box-shadow:
    0 30px 60px rgba(15,15,15,0.08);
}

/* featured */

.arrival-card.featured {
  background:
    linear-gradient(
      180deg,
      #2a2a2d,
      #1d1d20
    );

  color: white;

  transform:
    translateY(-20px)
    scale(1.02);
}

.arrival-card.featured:hover {
  transform:
    translateY(-28px)
    scale(1.03);
}

/* =========================================================
   IMAGE
========================================================= */

.arrival-image-wrap {
  position: relative;

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

  aspect-ratio: 1 / 1;

  border-radius: 22px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.75),
      rgba(240,240,242,0.65)
    );
}

.featured .arrival-image-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
}

.arrival-image {
  position: relative;

  width: 76%;
  height: auto;

  object-fit: contain;

  z-index: 2;

  transition:
    transform 1.1s cubic-bezier(.19,1,.22,1);
}

.arrival-card:hover .arrival-image {
  transform:
    scale(1.05)
    translateY(-4px);
}

/* glow */

.arrival-glow {
  position: absolute;

  width: 55%;
  height: 55%;

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.9),
      transparent 72%
    );

  filter: blur(30px);

  opacity: 0.6;

  z-index: 1;
}

/* =========================================================
   BADGE
========================================================= */

.arrival-badge {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  padding:
    8px 12px;

  border-radius: 999px;

  background: #f27c54;

  color: white;

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.featured-badge {
  background: white;
  color: black;
}

/* =========================================================
   CONTENT
========================================================= */

.arrival-content {
  display: flex;
  flex-direction: column;

  padding-top: 28px;
}

.arrival-content h3 {
  margin: 0;

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2vw, 2rem);

  font-weight: 800;

  line-height: 1;

  text-transform: uppercase;
}

.arrival-subtitle {
  margin-top: 10px;

  color: var(--ink-muted);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.featured .arrival-subtitle {
  color: rgba(255,255,255,0.6);
}

.arrival-description {
  margin-top: 22px;

  color: var(--ink-soft);

  font-size: 0.98rem;
  line-height: 1.8;
}

.featured .arrival-description {
  color: rgba(255,255,255,0.78);
}

/* =========================================================
   CTA
========================================================= */

.arrival-cta {
  position: relative;

  width: fit-content;

  margin-top: 32px;

  font-size: 0.84rem;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arrival-cta::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -8px;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform-origin: left;
  transform: scaleX(0);

  transition: transform 320ms ease;
}

.arrival-cta:hover::after {
  transform: scaleX(1);
}

.arrival-card.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 980px) {

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

  .arrival-card.featured {
    transform: none;
  }

  .arrival-card.featured:hover {
    transform: translateY(-10px);
  }
}

@media (max-width: 640px) {

  .arrivals-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .arrival-card {
    padding: 22px;
  }
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 960px) {
  .nav-links {
    display: none;
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .hero {
    padding-top: calc(var(--header-h) + 16px);
  }

  .product-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 52vh 1fr;
    overflow-y: auto;
    /* On mobile slide up from bottom */
    transform: translateY(40px);
  }

  .product-panel.visible {
    transform: translateY(0);
  }

  .panel-left {
    min-height: 0;
  }

  .panel-left::after {
    bottom: 16px;
  }

  .panel-right {
    transform: translateY(20px);
  }

  .product-panel.visible .panel-right {
    transform: translateY(0);
  }
}

@media (max-width: 560px) {
  :root {
    --header-h: 68px;
    --pad-x: 18px;
  }

  .brand img {
    width: 100px;
  }

  .nav-action {
    padding-inline: 14px;
    font-size: 0.68rem;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 18vw, 4.8rem);
    line-height: 0.88;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .primary-action,
  .secondary-action {
    flex: 1;
  }

  .scroll-hint {
    display: none;
  }
}

 /* New Arrivals Section */
        .new-arrivals-section {
            width: 100%;
            background-color: #f5f6f6; 
            padding: 80px 40px;
        }

        .new-arrivals-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 42px;
            font-weight: 800;
            color: #222;
            text-transform: uppercase;
        }

        .view-all-link {
            font-size: 12px;
            font-weight: 700;
            color: #222;
            text-decoration: none;
            text-transform: uppercase;
            border-bottom: 1px solid #222; 
            padding-bottom: 4px;
            letter-spacing: 1px;
            transition: color 0.2s, border-color 0.2s;
        }

        .view-all-link:hover {
            color: #f28564;
            border-bottom-color: #f28564;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .card {
            background: #ffffff;
            border: 0.5px solid #eaeaea; 
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
            padding: 15px; 
        }

        .card:hover {
            transform: translateY(-3px); 
            box-shadow: 0 8px 20px rgba(0,0,0,0.06); 
            background-color: #4a4a4a; 
            border-color: #4a4a4a;
        }

        .image-container {
            position: relative;
            width: 100%;
            margin-bottom: 25px;
            background-color: #f0f0f0; 
        }

        .badge {
            position: absolute;
            top: 15px;
            right: 15px; 
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 6px 10px;
            letter-spacing: 0.5px;
            z-index: 2;
        }

        .badge-orange {
            background-color: #e07453; 
            color: #ffffff;
        }

        .badge-white {
            background-color: #ffffff; 
            color: #000000;
        }

        .image-container img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            display: block;
        }

        .card-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .card-title {
            font-size: 22px;
            font-weight: 800;
            color: #222;
            margin-bottom: 4px; 
            transition: color 0.3s ease;
        }

        .card-category {
            font-size: 10px;
            font-weight: 800;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            transition: color 0.3s ease;
        }

        .card-desc {
            font-size: 15px;
            line-height: 1.5;
            color: #555;
            margin-bottom: 30px;
            flex-grow: 1;
            transition: color 0.3s ease;
        }

        .card-btn {
            font-size: 11px;
            font-weight: 800;
            color: #222;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 16px 20px;
            border: 2px solid #222; 
            background-color: transparent;
            transition: all 0.3s ease;
            display: block; 
            text-align: center;
            width: 100%;
        }

        .card:hover .card-category { color: #bbbbbb; }
        .card:hover .card-title { color: #ffffff; }
        .card:hover .card-desc { color: #ffffff; }
        .card:hover .card-btn { border-color: #ffffff; color: #ffffff; }
        /* KEEP BUTTON WHITE EVEN WHEN CARD HOVER IS ACTIVE */
        .card-btn:hover {
                 background-color: #ffffff;
                 color: #000000;
                 border-color: #000000;
        }

        .card:hover .card-btn {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

        /* --- OUR PRODUCT LINE SECTION STYLES --- */
        .product-line-section {
            width: 100%;
            background-color: #ffffff;
            padding: 40px; 
            display: flex;
            align-items: center;
        }

        .product-line-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .bento-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 340px; 
            gap: 20px;
            width: 100%;
        }

        .bento-card {
    position: relative;

    background: linear-gradient(135deg, #ffffff 0%, #f4f4f0 100%);

    overflow: hidden;
    display: flex;
    flex-direction: column;

    transform-style: preserve-3d;
    border-radius: 12px;

    isolation: isolate;

    opacity: 0;
    transform: translateY(40px);

    transition:
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform, opacity;
}

        

/* PREMIUM SOFT FADE */
.bento-card:hover {
    opacity: 0.95;
}

.bento-card::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.10) 0%,
        rgba(120,120,120,0.45) 45%,
        rgba(0,0,0,0.96) 100%
    );

    opacity: 0;

    transition:
        opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1);

    z-index: 1;
}

/* SMOOTH CINEMATIC FADE */
.bento-card:hover::before {
    opacity: 1;
}

.bento-card:hover {
    box-shadow:
        0 25px 45px rgba(0,0,0,0.20);
}

        .bento-card.dark {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #faf8f3 45%,
        #f3ede2 100%
    );
}

        /* --- BENTO CARD IMAGE FIXES --- */
        .bento-card img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 2;
            pointer-events: none;
            transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .card-charging img {
    object-fit: contain;
    object-position: right center;

    width: 78%;
    height: 100%;

    left: auto;
    right: 0;

    padding: 0;

    transform: scale(1.08);
    transform-origin: right center;
}

        .card-socket img {
            object-position: top right;
            padding: 0 0 30% 15%; 
            transform: scale(1.15);
            transform-origin: top right;
        }

        .card-usbc img {
            object-position: bottom center;
            padding: 50% 0 0 0;
        }

        .card-pdu img {
            object-fit: contain;
            object-position: bottom right;
            top: auto;
            left: auto;
            bottom: 0;
            right: 0;
            width: 90%;
            height: 75%;
            padding: 0 15% 5% 0;
            transform: scale(1.1);
            transform-origin: bottom right;
        }

        .card-cylinder img {
            object-position: center;
            padding: 20%;
            transform: scale(1.15);
        }

        .card-hdmi img {
            object-fit: contain;
            object-position: bottom right;
            top: auto;
            left: auto;
            bottom: 0;
            right: 0;
            width: 90%;
            height: 55%;
            padding: 0 0% 0% 0;
            transform: scale(1.1);
            transform-origin: bottom right;
        }

        /* Text & Content Layout */
        .bento-content {
            position: relative;
            z-index: 3;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; 
            height: 100%;
            pointer-events: none; 
        }

        .bento-category {
            display: block;
            color: #d15d3a; 
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .bento-title {
            font-size: 28px;
            font-weight: 800;
            color: #111;
            line-height: 1.2;
            margin-bottom: 12px;
        }

        .bento-title.large {
            font-size: 34px;
        }

        .dark .bento-title {
    color: #111111;
}

        .bento-desc {
            font-size: 11px;
            font-weight: 800;
            color: #000000;
            margin-top: auto; 
            align-self: flex-start;
        }

        .dark .bento-desc {
    color: #000000;
    opacity: 1;
}



/* FIRST CARD TEXT ALIGNMENT */
.card-charging .bento-content {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 55px 55px 45px 55px;
}

.card-charging .bento-title {
    max-width: 320px;
    font-size: 52px;
    line-height: 0.95;
    letter-spacing: -2px;
}

.card-charging .bento-desc {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 700;
}

        .card-socket .bento-content {
            justify-content: flex-end; 
        }
        
        .card-socket .bento-desc, .card-pdu .bento-desc, .card-usbc .bento-desc, .card-hdmi .bento-desc, .card-charging .bento-desc {
            margin-top: 0; 
        }

        /* Bento Grid Placements */
        .card-charging { grid-column: 1 / 3; grid-row: 1 / 2; }
        .card-socket { grid-column: 3 / 4; grid-row: 1 / 2; }
        .card-usbc { grid-column: 1 / 2; grid-row: 2 / 4; }
        .card-pdu { grid-column: 2 / 4; grid-row: 2 / 3; }
        .card-cylinder { grid-column: 2 / 3; grid-row: 3 / 4; }
        .card-hdmi { grid-column: 3 / 4; grid-row: 3 / 4; }

        /* Initial states based on direction */
        .bento-card.reveal-left,
        .reveal-left {
            opacity: 0;
            transform: translateX(-100px);
        }

        .bento-card.reveal-right,
        .reveal-right {
            opacity: 0;
            transform: translateX(100px);
        }

        /* Added an upward reveal for headers and grids */
        .reveal-up {
            opacity: 0;
            transform: translateY(100px);
        }

        /* The class applied when element is in view */
        .bento-card.is-revealed,
        .is-revealed {
            opacity: 1;
            transform: translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1);
        }

        /* =========================
   BENTO CARD TILT EFFECT
   ========================= */

.bento-grid {
    perspective: 1200px;
}

.bento-card {
    position: relative;

    /* WHITE → IVORY GRADIENT */
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #faf8f3 45%,
        #f3ede2 100%
    );

    overflow: hidden;
    display: flex;
    flex-direction: column;

    transform-style: preserve-3d;

    transition:
    opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 1.5s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}

.bento-card:hover {

    /* GREY → BLACK HOVER */
    background: linear-gradient(
        135deg,
        #696969 0%,
        #2d2d2d 45%,
        #000000 100%
    );

    transform:
        rotateX(6deg)
        rotateY(-6deg)
        translateY(-8px)
        scale(1.02);

    box-shadow:
        0 25px 45px rgba(0,0,0,0.22);
}

.bento-card:hover .bento-title,
.bento-card:hover .bento-desc,
.bento-card:hover .bento-category {

    color: #ffffff;

    opacity: 0.92;

    transform: translateY(2px);
}

/* DEFAULT TEXT STATE */
.bento-category,
.bento-title,
.bento-desc {
    opacity: 1;
}
.bento-card:hover .bento-category {
    color: #ff8b5e;
}

.bento-card:hover .bento-desc {
    opacity: 0.92;
}

.bento-card:hover .bento-category {
    color: #ff8b5e;
}

/* Optional smoother image movement */
.bento-card img {
    transition: transform 0.35s ease;
}

.bento-card:hover img {
    transform: scale(1.05);
}

/* DEFAULT TEXT STATE */
.bento-category,
.bento-title,
.bento-desc {
    opacity: 1;
}

.bento-category,
.bento-title,
.bento-desc {
    transition:
        color 1.5s ease,
        opacity 1.5s ease,
        transform 1.5s ease;
}
/* =========================
   SCROLL REVEAL STYLES
========================= */

/* Prevent horizontal scrollbar */
.product-line-section{
    overflow-x: hidden;
}

/* Initial reveal state */
.bento-card.reveal-left {
    opacity: 0;
    transform: translateX(-100px);
}

.bento-card.reveal-right {
    opacity: 0;
    transform: translateX(100px);
}

/* Final visible state */
.bento-card.is-revealed {
    opacity: 1;
    transform:
        translateX(0)
        translateY(0)
        rotateX(0)
        rotateY(0)
        scale(1);
}
        /* --- APPLICATIONS SECTION STYLES --- */
        .applications-section {
            width: 100%;
            background-color: #ffffff;
            padding: 80px 40px;
        }

        .applications-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .apps-header {
            margin-bottom: 40px;
        }

        .apps-title {
            font-size: 42px;
            font-weight: 800;
            color: #222;
            margin-bottom: 15px;
        }

        .apps-subtitle {
            font-size: 16px;
            color: #555;
            max-width: 800px;
            line-height: 1.5;
        }

        .apps-featured {
            margin-bottom: 40px;
        }

        .apps-featured-grid {
            display: grid;
            grid-template-columns: 74% 26%; 
            gap: 4px; /* Creates the white lines between images */
            margin-bottom: 12px;
        }

        .apps-featured-main {
            grid-row: 1 / 3;
            grid-column: 1 / 2;
        }

        .apps-featured-side1 {
            grid-row: 1 / 2;
            grid-column: 2 / 3;
        }

        .apps-featured-side2 {
            grid-row: 2 / 3;
            grid-column: 2 / 3;
        }

        .apps-featured-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background-color: #f0f0f0; /* Fallback color for image loading */
        }
        
        /* Enforcing heights so the layout matches the provided image perfectly */
        .apps-featured-main img {
    min-height: 480px;
    width: 135%;
}

      .apps-featured-caption {
    font-size: 14px;
    color: #555;
    font-weight: 500;

    /* LEFT ALIGN */
    text-align: left;
    margin-top: 14px;
    line-height: 1.6;

    /* Proper spacing */
    padding-left: 4px;
}

        .apps-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .app-card {
            display: flex;
            flex-direction: column;
        }

        .app-card img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            margin-bottom: 20px;
            background-color: #f0f0f0;
        }

        .app-card p {
            font-size: 14px;
            color: #444;
            line-height: 1.5;
            margin-bottom: 12px;
            flex-grow: 1; /* Pushes the button to the bottom if text wraps differently */
        }

        .app-card a {
            font-size: 13px;
            font-weight: 800;
            color: #d15d3a; 
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: opacity 0.2s ease;
        }

        .app-card a:hover {
            opacity: 0.8;
        }

        /* =========================
   PREMIUM REVEAL EFFECT
========================= */

.reveal-left,
.reveal-right,
.reveal-bottom {
    opacity: 0;
    will-change: transform, opacity;
}

/* LEFT */
.reveal-left {
    transform: translateX(-70px);
}

/* RIGHT */
.reveal-right {
    transform: translateX(70px);
}

/* BOTTOM */
.reveal-bottom {
    transform: translateY(70px);
}

/* ACTIVE */
.reveal-active {
    opacity: 1;
    transform:
        translateX(0)
        translateY(0)
        scale(1);
}


        /* Added an upward reveal for headers and grids */
        .reveal-up {
            opacity: 0;
            transform: translateY(100px);
        }

        /* The class applied when element is in view */
        .bento-card.is-revealed,
        .is-revealed {
            opacity: 1;
            transform: translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1);
        }
        /* Responsive Adjustments */
        @media (max-width: 1150px) {
            .nav-links { gap: 20px; }
            .nav-bar { padding: 0 15px 0 30px; }
            .nav-actions { gap: 15px; }
            .bento-grid { grid-auto-rows: 280px; } 
            .bento-title.large { font-size: 28px; }
        }

        @media (max-width: 950px) {
            .header-wrapper { flex-direction: column; align-items: stretch; padding: 20px; }
            .logo-area { margin-right: 0; margin-bottom: 20px; justify-content: center; }
            .nav-bar { flex-direction: column; height: auto; padding: 25px; gap: 25px; border-radius: 4px; }
            .nav-links { flex-wrap: wrap; justify-content: center; }
            .nav-actions { flex-wrap: wrap; justify-content: center; }
            .cards-grid { grid-template-columns: repeat(2, 1fr); }
            
            .product-line-section { padding: 60px 20px; }
            .bento-grid {
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 320px; 
            }
            .card-charging { grid-column: 1 / 3; grid-row: auto; }
            .card-socket { grid-column: 1 / 2; grid-row: auto; }
            .card-usbc { grid-column: 2 / 3; grid-row: span 2; }
            .card-pdu { grid-column: 1 / 3; grid-row: auto; }
            .card-cylinder { grid-column: 1 / 2; grid-row: auto; }
            .card-hdmi { grid-column: 2 / 3; grid-row: auto; }

            /* Applications Responsive */
            .applications-section { padding: 60px 20px; }
            .apps-featured-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px;}
            .apps-featured-main, .apps-featured-side1, .apps-featured-side2 { grid-column: 1 / -1; grid-row: auto; }
            .apps-featured-main img { aspect-ratio: 16/9; min-height: auto; }
            .apps-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
        }

        @media (max-width: 700px) {
            .cards-grid { grid-template-columns: 1fr; }
            .section-header { flex-direction: column; align-items: flex-start; gap: 15px; }
            .bento-grid {
                grid-template-columns: 1fr;
                grid-auto-rows: 300px;
            }
            .card-charging, .card-socket, .card-usbc, .card-pdu, .card-cylinder, .card-hdmi {
                grid-column: 1 / -1;
                grid-row: auto;
            }
            /* Applications Responsive */
            .apps-grid { grid-template-columns: 1fr; gap: 30px; }
        }

        /* MAIN SECTION */
    .custom-section{
  width:calc(100% - 70px); /* leaves space for scrollbar */
  background:#464646;

  height:735px;

  margin-right:70px; /* pushes section before scrollbar */
}

    .custom-wrapper{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:80px;
    }

    /* LEFT IMAGE BOX */
    .image-frame{
      width:737px;
      height:735px;
      background:#ededed;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }

    .image-frame img{
      width:500px;
      height:500px;
      object-fit:cover;
      background:#000;
    }

    /* RIGHT CONTENT */
   .content-area{
  max-width:520px;
  color:white;
  margin-right:270px;
}

    .mini-title{
      color:#d97a56;
      font-size:18px;
      font-weight:700;
      letter-spacing:1.5px;
      margin-bottom:18px;
      text-transform:uppercase;
    }

    .main-heading{
      font-size:68px;
      font-weight:800;
      line-height:1.05;
      margin-bottom:30px;
      text-transform:uppercase;
    }

    .description{
      color:#b9b9b9;
      font-size:21px;
      line-height:1.7;
      margin-bottom:42px;
      font-weight:400;
    }

    /* FEATURES */
    .features{
      display:flex;
      gap:55px;
      margin-bottom:45px;
    }

    .feature-box{
      display:flex;
      gap:18px;
      max-width:220px;
    }

    .feature-line{
      width:3px;
      height:82px;
      background:#d97a56;
      flex-shrink:0;
      margin-top:2px;
    }

    .feature-title{
      font-size:18px;
      font-weight:700;
      color:#ffffff;
      margin-bottom:10px;
      text-transform:uppercase;
    }

    .feature-text{
      font-size:17px;
      line-height:1.5;
      color:#b5b5b5;
    }

    /* BUTTON */
    .custom-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:300px;
      height:55px;
      background:#d97a56;
      color:#000;
      text-decoration:none;
      font-size:15px;
      font-weight:700;
      text-transform:uppercase;
      transition:0.3s ease;
    }

    .custom-btn:hover{
      background:#ef8c66;
      transform:translateY(-2px);
    }

    /* RESPONSIVE */
    @media(max-width:1100px){

      .custom-wrapper{
        flex-direction:column;
      }

      .image-frame{
        width:100%;
        max-width:520px;
        height:auto;
        padding:50px;
      }

      .image-frame img{
        width:100%;
        height:auto;
      }

      .content-area{
        max-width:100%;
      }

      .main-heading{
        font-size:48px;
      }
    }

    @media(max-width:768px){

      body{
        padding:15px;
      }

      .custom-section{
        padding:40px 25px;
      }

      .main-heading{
        font-size:38px;
      }

      .features{
        flex-direction:column;
        gap:30px;
      }

      .custom-btn{
        width:100%;
      }
    }

   .faq-section{
  width:calc(100% - 70px);
  margin-right:70px;

  display:grid;
  grid-template-columns: 46% 54%;

  min-height:720px;

  font-family:'Montserrat', sans-serif;

  background:
    linear-gradient(
      to right,
      #efefef 0%,
      #efefef 41%,
      #4c4c4c 41%,
      #4c4c4c 100%
    );

  box-sizing:border-box;
}

/* LEFT SIDE */
.faq-left{
  padding:90px 70px 90px 40px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.faq-heading{
  font-size:78px;
  line-height:0.92;
  font-weight:800;
  color:#111;

  margin-bottom:35px;
}

.faq-description{
  font-size:17px;
  line-height:1.9;
  color:#666;

  max-width:340px;

  margin-bottom:45px;
}

.faq-contact-btn{
  text-decoration:none;
  color:#d97a56;

  font-size:14px;
  font-weight:700;

  letter-spacing:1px;

  transition:0.3s ease;
}

.faq-contact-btn:hover{
  opacity:0.7;
}

/* RIGHT SIDE */
.faq-right{
  padding:70px 70px 70px 60px;
}

/* FAQ ITEM */
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.25);
  padding:32px 0;
}

.faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;

  cursor:pointer;
}

.faq-question h3{
  font-size:20px;
  font-weight:600;

  color:#ffffff;

  line-height:1.4;

  max-width:90%;
}

/* TOGGLE */
.faq-toggle{
  width:38px;
  height:38px;

  border:1px solid #d97a56;

  background:transparent;

  color:#ffffff;

  font-size:24px;

  cursor:pointer;

  transition:0.3s ease;

  flex-shrink:0;
}

.faq-item.active .faq-toggle{
  background:#d97a56;
  color:#fff;
}

/* ANSWER */
.faq-answer{
  max-height:0;
  overflow:hidden;

  transition:max-height 0.4s ease;
}

.faq-answer p{
  color:#d2d2d2;

  font-size:14px;
  line-height:1.8;

  margin-top:22px;

  max-width:760px;
}

.faq-item.active .faq-answer{
  max-height:300px;
}

/* RESPONSIVE */
@media(max-width:1100px){

  .faq-section{
    flex-direction:column;
  }

  .faq-left,
  .faq-right{
    width:100%;
  }

  .faq-heading{
    font-size:60px;
  }
}

@media(max-width:768px){

  .faq-section{
    padding:70px 25px;
  }

  .faq-heading{
    font-size:48px;
  }

  .faq-question h3{
    font-size:20px;
  }

  .faq-description{
    font-size:16px;
  }
}

/* Custom Contact Section Styles to Match Design */
#custom-contact-section {
    width: calc(100% - 70px);
    margin-right: 70px;

    background: linear-gradient(110deg, #535352 40%, #6e5549 100%);

    padding: 70px 6%;

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

    font-family: 'Montserrat', sans-serif;
    color: #ffffff;

    box-sizing: border-box;
}
#custom-contact-section .contact-left {
    max-width: 650px;
}
#custom-contact-section .contact-subtitle {
    color: #f15a24;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    font-weight: 600;
}
#custom-contact-section .contact-subtitle::before {
    content: '';
    display: block;
    width: 35px;
    height: 2px;
    background-color: #f15a24;
}
#custom-contact-section .contact-heading {
    font-family: 'Montserrat', sans-serif;

    font-size: 96px;

    font-weight: 800;

    line-height: 0.9;

    letter-spacing: -5px;

    text-transform: uppercase;

    color: #ffffff;

    margin: 0 0 36px 0;

    max-width: 520px;
}
#custom-contact-section .contact-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #d1d1d1;
    max-width: 520px;
}
#custom-contact-section .contact-info-row {
    display: flex;
    gap: 55px;
}
#custom-contact-section .contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#custom-contact-section .contact-info-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #8c8c8c;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.5px;
    font-weight: 600;
}
#custom-contact-section .contact-info-value {
    font-size: 18px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s ease;
}
#custom-contact-section .contact-info-value:hover {
    color: #f15a24;
}
#custom-contact-section .contact-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}
#custom-contact-section .contact-btn-custom {
    background-color: #f15a24;
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 10px 10px 40px;
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    gap: 30px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
#custom-contact-section .contact-btn-custom:hover {
    background-color: #d94d1b;
    transform: translateY(-3px);
}
#custom-contact-section .contact-btn-icon {
    background-color: #000000;
    color: #ffffff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#custom-contact-section .icon-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
#custom-contact-section .arrow-svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Responsiveness */
@media (max-width: 1100px) {
    #custom-contact-section .contact-heading {
        font-size: 80px;
    }
    #custom-contact-section .contact-info-row {
        gap: 40px;
    }
}
@media (max-width: 900px) {
    #custom-contact-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 5%;
    }
    #custom-contact-section .contact-right {
        margin-top: 40px;
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 600px) {
    #custom-contact-section .contact-heading {
        font-size: 50px;
    }
    #custom-contact-section .contact-info-row {
        flex-direction: column;
        gap: 30px;
    }
    #custom-contact-section .contact-btn-custom {
        font-size: 18px;
        padding: 8px 8px 8px 30px;
        gap: 20px;
    }
    #custom-contact-section .contact-btn-icon {
        width: 50px;
        height: 50px;
    }
    #custom-contact-section .arrow-svg {
        width: 20px;
        height: 20px;
    }
}

/* Why Choose Section Styles */
#why-choose-section {
    padding: 100px 2%; /* Reduced from 5% to 2% to give cards more horizontal space/width */
    background-color: #f4f5f6; /* Matching the light gray background */
    font-family: 'DM Sans', sans-serif;
}
#why-choose-section .why-header {
    max-width: 800px;
    margin-bottom: 50px;
    padding-left: 1%; /* Keeps the header slightly indented */
}
#why-choose-section .why-title {
    font-family: 'Syne', sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}
#why-choose-section .why-subtitle {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0;
    max-width: 580px;
}
#why-choose-section .why-grid {
    display: flex;
    flex-wrap: nowrap; /* Forces exactly 4 cards side-by-side */
    gap: 15px; /* Slightly reduced gap from 20px to 15px to give cards even more width */
    align-items: stretch; /* Ensures all cards match the highest card's height */
}
#why-choose-section .why-card {
    flex: 1 1 0; /* Distribute available space completely equally */
    min-width: 0; /* Prevents overflow from pushing cards down */
    background-color: #ffffff;
    border: 1px solid #e0e2e6;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 420px;
}
#why-choose-section .why-icon-box {
    width: 45px;
    height: 45px;
    background-color: #e8eaee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}
#why-choose-section .why-icon-svg {
    width: 22px;
    height: 22px;
    stroke: #1a1a1a;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}
#why-choose-section .why-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    transition: color 0.3s ease;
    line-height: 1.3;
}
#why-choose-section .why-card-desc {
    font-size: 14px;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0 0 40px 0;
    flex-grow: 1;
    transition: color 0.3s ease;
}
#why-choose-section .why-card-link {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
    margin-top: auto;
}
#why-choose-section .why-card-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

/* Hover States as Requested */
#why-choose-section .why-card:hover {
    background-color: #424242; /* Dark Grey */
    border-color: #424242;
}
#why-choose-section .why-card:hover .why-icon-box {
    background-color: #ffffff;
}
#why-choose-section .why-card:hover .why-icon-svg {
    stroke: #c85a3c; /* Orange from image */
}
#why-choose-section .why-card:hover .why-card-title,
#why-choose-section .why-card:hover .why-card-desc {
    color: #ffffff;
}
/* Normal state */
#why-choose-section .why-card-link {
    color: #c85a3c; /* Orange */
}

/* Hover state */
#why-choose-section .why-card:hover .why-card-link {
    color: #ffffff; /* White */
}

/* ── TARGETED HOVER OVERLAY ── */
.scientific-overlay {
    position: relative;
    z-index: 1;
    overflow: hidden; 
    background: #ffffff; 
}

.scientific-overlay::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    opacity: 0; 
    z-index: -1;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

.scientific-overlay:hover::after {
    opacity: 0.88; 
    transform: scale(1.1); 
}

.scientific-overlay:hover h3, 
.scientific-overlay:hover h4, 
.scientific-overlay:hover p,
.scientific-overlay:hover .act-list li,
.scientific-overlay:hover .tag,
.scientific-overlay:hover .address-pill {
    color: #ffffff !important;
}

.scientific-overlay h3, 
.scientific-overlay h4, 
.scientific-overlay p,
.scientific-overlay .act-list li,
.scientific-overlay .tag,
.scientific-overlay .address-pill {
    transition: color 0.4s ease;
}

.scientific-overlay:hover::after {
    opacity: 1;
    filter: brightness(0.35); /* smaller = darker */
    transform: scale(1.08);
}

.cap-card {
  color: #2e7d32; 
  transition: color 0.3s ease;
}

.cap-card:hover {
  color: white;
}

.cap-card:hover .stat-num,
.cap-card:hover .stat-label {
  color: white;
}

.icon-pill {
  width: 50px;
  height: 50px;
  border-radius: 30%;
  background: #f3f7f1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.icon-pill img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

/* --- WORKLIFE SECTION CUSTOM STYLES --- */
.bg-offwhite-green {
    background: radial-gradient(circle at top, #ffffff 0%, #f0fde7 100%) !important;
    border-top: 1px solid rgba(45, 122, 31, 0.05);
}

#worklife-bento .wl-card {
    background: #eaf7fd;
    border: 1px solid rgba(0, 71, 170, 0.08);
    border-radius: 40px;
}

#worklife-bento .follow-card {
    background:linear-gradient(145deg, #0047a5, #003579);
    color: #ffffff;
    border-radius: 40px;
}

#worklife-bento .social-chips .chip {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    transition: 0.3s ease;
}

#worklife-bento .social-chips .chip:hover {
    background: #ffffff;
    color: #0d2e14;
}

#worklife-bento .icon-pill {
    background: #eaf7fd !important; 
    border: 2px solid rgba(45, 122, 31, 0.1); 
    width: 54px;
    height: 54px;
    border-radius: 14px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

#worklife-bento .icon-pill img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: none !important; 
}

/* Responsiveness: only drop to 2 columns on tablets/small laptops */
@media (max-width: 1024px) {
    #why-choose-section .why-grid {
        flex-wrap: wrap; 
    }
    #why-choose-section .why-card {
        flex: 1 1 calc(50% - 20px);
        min-width: 250px;
    }
}
@media (max-width: 600px) {
    #why-choose-section .why-card {
        flex: 1 1 100%;
    }
}


.newsletter-footer-section{
  width:100%;
  background:#efefef;
  padding:140px 0 0;
  font-family:'Montserrat', sans-serif;
}

/* NEWSLETTER */
/* NEWSLETTER */
.newsletter-container{
  text-align:center;
  margin-bottom:170px;
}

.newsletter-heading{
  font-size:42px;
  font-weight:800;
  color:#000;
  margin-bottom:12px;
}

.newsletter-subtext{
  color:#9a9a9a;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  margin-bottom:22px;
}

.newsletter-form{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.newsletter-input-box{
  width:175px;
  height:28px;
  border:1px solid #9f9f9f;
  display:flex;
  align-items:center;
  padding:0 10px;
  background:white;
  border-radius:5px;
}

.newsletter-input-box span{
  color:#999;
  margin-right:7px;
  font-size:10px;
}

.newsletter-input-box input{
  border:none;
  outline:none;
  width:100%;
  font-size:9px;
  font-family:'Montserrat', sans-serif;
  color:#777;
}

.newsletter-form button{
  width:75px;
  height:28px;
  border:none;
  background:#d97a56;
  color:white;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  border-radius:4px;
  transition:0.3s ease;
}

.newsletter-form button:hover{
  background:#ea8a65;
}


/* FOOTER WRAPPER */
.footer-wrapper{
  width:100%;
  background:#1d1b1f;
  padding-top:140px;
  padding-bottom:25px;
  position:relative;
}

/* CTA CARD */
.footer-cta{
  width:78%;
  height:200px;
  margin:auto;
  border-radius:14px;
  overflow:hidden;
  position:absolute;
  top:-90px;
  left:50%;
  transform:translateX(-50%);
  background:
    linear-gradient(to right,
    rgba(0,0,0,0.98) 35%,
    rgba(0,0,0,0.35)),
    url('assets/img/footer.png');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}

.footer-cta-content{
  padding-left:70px;
  color:white;
}

.footer-cta-content h2{
  font-size:42px;
  font-weight:700;
  margin-bottom:12px;
}

.footer-cta-content p{
  font-size:18px;
  margin-bottom:28px;
  font-weight:500;
}

.footer-cta-content a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:130px;
  height:42px;
  background:#d97a56;
  color:black;
  text-decoration:none;
  font-weight:700;
  border-radius:7px;
  transition:0.3s ease;
  font-size:13px;
}

.footer-cta-content a:hover{
  background:#ea8a65;
}


/* MAIN FOOTER */
.main-footer{
  width:84%;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:60px;
  padding-bottom:45px;
}
.footer-left{
  width:35%;
}

.footer-logo{
  margin-bottom:45px;
}

.footer-logo img{
  width:180px;
  height:auto;
  object-fit:contain;
  display:block;
}


.footer-logo h2{
  color:white;
  font-size:40px;
  font-weight:800;
  margin-bottom:6px;
}

.footer-logo span{
  color:#cfcfcf;
  letter-spacing:4px;
  font-size:12px;
}

.footer-address h4{
  color:white;
  margin-bottom:12px;
  font-size:16px;
}

.footer-address p{
  color:#b7b7b7;
  line-height:1.7;
  margin-bottom:35px;
}

.footer-contact-grid{
  display:flex;
  gap:60px;
}

.footer-contact-grid h5{
  color:#9e9e9e;
  margin-bottom:8px;
  font-size:13px;
}

.footer-contact-grid p{
  color:white;
  font-size:14px;
}


/* RIGHT LINKS */
.footer-links-area{
  width:60%;
  display:flex;
  justify-content:space-between;
  gap:40px;
}

.footer-column{
  display:flex;
  flex-direction:column;
}

.footer-column h3{
  color:white;
  margin-bottom:25px;
  font-size:18px;
}

.footer-column a{
  color:#b7b7b7;
  text-decoration:none;
  margin-bottom:14px;
  font-size:15px;
  transition:0.3s ease;
}

.footer-column a:hover{
  color:#d97a56;
}


/* BOTTOM */
.footer-bottom{
  width:85%;
  margin:auto;
  border-top:1px solid rgba(255,255,255,0.15);
  padding:28px 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:22px;
}

.footer-bottom a{
  color:#9d9d9d;
  text-decoration:none;
  font-size:12px;
}

/* =========================================
   MX CUSTOM SCROLL
========================================= */

/* Hide scrollbar */

::-webkit-scrollbar {
    width: 0;
}

body {
    scrollbar-width: none;
}

/* TRACK */

.mx-scroll-track {
    position: fixed;

    top: 70px; /* adjust according to navbar height */
    right: 28px;

    width: 18px;

    height: calc(100vh - 80px); /* top + bottom spacing */

    border-radius: 20px;

    z-index: 100;

    background:
        linear-gradient(
            90deg,
            #bfc4ca 0%,
            #f5f5f5 20%,
            #8e949b 50%,
            #f7f7f7 80%,
            #b0b5bb 100%
        );

    box-shadow:
        inset 0 0 12px rgba(255,255,255,0.5),
        inset 0 0 8px rgba(0,0,0,0.2),
        0 0 20px rgba(255,255,255,0.08);

    overflow: visible;
}

/* BLACK CENTER CHANNEL */

.mx-scroll-track::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;


    width: 3px;
    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            to bottom,
            #111,
            #2b2b2b,
            #000
        );
}

/* SOCKET */

.mx-scroll-thumb {
    will-change: transform, top;

    position: absolute;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    width: 70px;
    height: 70px;
    cursor: grab;

}

.mx-scroll-thumb img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(0 0 10px rgba(0,170,255,0.45))
        drop-shadow(0 10px 15px rgba(0,0,0,0.4));
}




/* RESPONSIVE */
@media(max-width:1100px){

  .main-footer{
    flex-direction:column;
  }

  .footer-left,
  .footer-links-area{
    width:100%;
  }

  .footer-links-area{
    flex-wrap:wrap;
  }

  .footer-cta-content h2{
    font-size:46px;
  }
}

@media(max-width:768px){

  .newsletter-heading{
    font-size:40px;
  }

  .newsletter-input-box{
    width:100%;
  }

  .newsletter-form{
    padding:0 20px;
  }

  .newsletter-form button{
    width:100%;
  }

  .footer-cta{
    height:auto;
    padding:50px 0;
  }

  .footer-cta-content{
    padding:40px;
  }

  .footer-cta-content h2{
    font-size:38px;
  }

  .footer-cta-content p{
    font-size:22px;
  }

  .footer-contact-grid{
    flex-direction:column;
    gap:20px;
  }

}