/* ================================================================
   ECOG — HOME PAGE CSS  (Full Responsive Fix)
   ================================================================ */

/* ----------------------------------------------------------------
   1. VARIABLES & RESET
   ---------------------------------------------------------------- */
:root {
  --font-primary : 'Montserrat', sans-serif;
  --font-heading : 'Montserrat', sans-serif;
  --color-accent : #0bbf8a;
  --color-dark   : #1b1918;
  --card-w       : 260px;   /* desktop default — 2 cards visible */
  --card-gap     : 20px;
}

* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  font-family: 'Plus Jakarta Sans', sans-serif;

}

/* ── Font Awesome icon fix ──────────────────────────────────────
   * { font-family: Montserrat } is inherited by <i> elements.
   FA's own class selector should override it, but cascade order
   can interfere. Explicitly setting the correct FA font here with
   !important guarantees icons always render correctly.
   ────────────────────────────────────────────────────────────── */
.fa, .fas, .fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
.far, .fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}
/* Also cover older FA5 class names */
.fa-light, .fal  { font-family: "Font Awesome 6 Free" !important; font-weight: 300 !important; }
.fa-thin, .fat   { font-family: "Font Awesome 6 Free" !important; font-weight: 100 !important; }

/* Prevent any section from causing page-level horizontal scroll */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 {  font-family: 'Plus Jakarta Sans', sans-serif !important; margin-top: 0; }
img    { max-width: 100%; display: block; }
ul     { list-style: none; }
a      { text-decoration: none; }
button { cursor: pointer; }


/* ----------------------------------------------------------------
   2. HEADER / NAVBAR
   ---------------------------------------------------------------- */
.hero-wrapper { position: relative; overflow: hidden; background: #1b1918; }
/* Search dropdown must escape hero-wrapper overflow:hidden —
   it is positioned relative to header which is absolute inside hero-wrapper.
   Fix: raise dropdown z-index above everything and use fixed positioning on mobile */

header {
  position        : absolute;
  top             : 0; left: 0;
  width           : 100%;
  padding         : 16px 48px;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  z-index         : 1000;
  background      : linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 100%);
  overflow        : visible; /* allow search dropdown to show outside header bounds */
}

.header-left {
  display     : flex;
  align-items : center;
  gap         : 14px;
  flex-shrink : 0;
}

.logo img {
  width: 60px;
  height: 90px;
  border-radius:0%;
 }

/* Centered nav */
.main-menu {
  display     : flex;
  align-items : center;
  position    : absolute;
  left        : 50%;
  transform   : translateX(-50%);
  white-space : nowrap;
  gap         : 0;
  font-family: Plus Jakarta Sans;
}

.main-menu > a,
.main-menu .dropdown > a {
  color         : white;
  margin        : 0 14px;
  font-size     : 0.88rem;
  font-weight   : 400;
  mix-blend-mode: difference;
  white-space   : nowrap;
  font-family: 'Plus Jakarta Sans', sans-serif;
  
}

/* Dropdown */
.dropdown { position: relative; display: inline-flex; align-items: center; }

.dropdown::after {
  content  : '';
  position : absolute;
  height   : 15px; width: 100%;
  bottom   : -15px; left: 0;
  z-index  : 999;
}

.dropdown-menu {
  display         : flex;
  flex-direction  : column;
  opacity         : 0;
  visibility      : hidden;
  pointer-events  : none;
  position        : absolute;
  top             : calc(100% + 15px);
  left            : 0;
  min-width       : 180px;
  background-color: #ffffff;
  box-shadow      : 0 8px 24px rgba(0,0,0,0.15);
  z-index         : 1001;
  border-radius   : 6px;
  padding         : 10px 0;
  transition      : opacity 0.2s ease, visibility 0.2s ease;
}

.dropdown-menu a {
  color        : #333 !important;
  padding      : 12px 18px;
  display      : block;
  font-size    : 0.88rem;
  font-weight  : 400;
  mix-blend-mode: normal !important;
  margin       : 0 !important;
  white-space  : nowrap;
  transition   : background 0.2s, color 0.2s;
}

.dropdown-menu a:hover { background-color: #f5f5f5; color: #0bbf8a !important; }
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; }

/* Right actions */
.header-actions {
  display     : flex;
  align-items : center;
  gap         : 20px;
  color       : white;
  flex-shrink : 0;
}

.header-actions i,
.header-actions a,
.header-actions a i {
  font-size      : 1.05rem;
  color          : #fff !important;
  mix-blend-mode : normal !important;
  transition     : transform 0.3s ease;
}

.header-actions i:hover,
.header-actions a:hover i { transform: scale(1.15); }

.auth-links a   { color: #fff !important; mix-blend-mode: normal !important; }
.auth-links a i { color: #fff !important; }

/* Expanding search */
.search-wrapper { position: relative; display: flex; align-items: center; }

.search-input {
  background    : transparent;
  border        : none;
  border-bottom : 1px solid white;
  color         : white;
  width         : 0;
  padding       : 0;
  margin-left   : 8px;
  outline       : none;
  transition    : width 0.4s ease;
  font-size     : 0.85rem;
}

.search-wrapper:hover .search-input { width: 110px; padding-left: 5px; }

.hamburger {
  display        : none;
  font-size      : 1.4rem;
  color          : #fff !important;
  mix-blend-mode : normal !important;
  cursor         : pointer;
  padding        : 4px;
}

.hamburger i { color: #fff !important; }


/* ----------------------------------------------------------------
   3. HERO SLIDER
   ---------------------------------------------------------------- */
.hero-slider { height: 650px; position: relative; }
.slides      { position: absolute; inset: 0; }

.slide {
  position           : absolute;
  inset              : 0;
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
  opacity            : 0;
  transition         : opacity 1s ease;
}

.slide.active { opacity: 1; }

/* .slide-img-1 { background-image: linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url("../img/WhatsApp\ Image\ 2025-12-29\ at\ 5.03.13\ PM.jpeg"); } */
.slide-img-2 { background-image: linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url("../img/WhatsApp\ Image\ 2025-12-29\ at\ 5.03.14\ PM\ \(1\)\ copy.jpeg"); }
.slide-img-3 { background-image: linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url("../img/WhatsApp\ Image\ 2025-12-29\ at\ 5.03.14\ PM\ copy.jpeg"); }
.slide-img-4 { background-image: linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url("../img/WhatsApp\ Image\ 2025-12-29\ at\ 5.03.15\ PM.jpeg"); }

.hero-content {
  position   : absolute;
  left       : 10%;
  top        : 50%;
  transform  : translateY(-45%);
  max-width  : 680px;
  color      : #fff;
  z-index    : 10;
}

.hero-content::after {
  content      : '';
  position     : absolute;
  top          : 0; left: -28px;
  width        : 3px; height: 90px;
  background   : linear-gradient(to bottom, var(--color-accent), transparent);
  box-shadow   : 0 0 25px rgba(11,191,138,0.4);
  border-radius: 4px;
}

.hero-content h1,
.hero-content p,
.hero-content button {
  opacity   : 0;
  transform : translateX(-70px);
  animation : slideInLeft 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes slideInLeft { to { opacity: 1; transform: translateX(0); } }

.hero-content h1 {
  font-size     : clamp(2rem, 6.5vw, 88px);
  line-height   : 0.9;
  font-weight   : 900;
  letter-spacing: clamp(-1px, -0.04em, -4px);
  margin-bottom : clamp(14px, 2vw, 28px);
  text-shadow   : 0 20px 50px rgba(0,0,0,0.4);
  background    : linear-gradient(135deg, #ffffff 50%, var(--color-accent) 150%);
  -webkit-background-clip: text;
  background-clip         : text;
  -webkit-text-fill-color : transparent;
  animation-delay: 0.2s;
}

.hero-content p {
  font-size    : clamp(0.95rem, 2vw, 22px);
  color        : rgba(255,255,255,0.92);
  margin-bottom: clamp(20px, 3vw, 40px);
  line-height  : 1.4;
  font-weight  : 300;
  max-width    : 560px;
  animation-delay: 0.4s;
}

.hero-content button {
  pointer-events : auto;
  padding        : 14px 30px;
  border         : none;
  background     : #000;
  color          : #fff;
  font-size      : 11px;
  font-weight    : 700;
  border-radius  : 0;
  text-transform : uppercase;
  letter-spacing : 2.5px;
  position       : relative;
  overflow       : hidden;
  box-shadow     : 0 12px 30px rgba(0,0,0,0.35);
  transition     : all 0.4s ease;
  animation-delay: 0.6s;
}

.hero-content button::before {
  content    : '';
  position   : absolute;
  top        : 0; left: -100%;
  width      : 100%; height: 100%;
  background : linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transition : left 0.8s ease;
}

.hero-content button:hover::before { left: 100%; }
.hero-content button:active { transform: scale(0.97); }

.hero { position: relative; }

.controls {
  position     : absolute;
  bottom       : 30px; left: 10%;
  display      : flex;
  gap          : 8px;
  z-index      : 10;
}

.dot {
  height       : 5px; width: 48px;
  border-radius: 3px;
  background   : rgba(255,255,255,0.45);
  cursor       : pointer;
  transition   : background 0.3s;
}

.dot.active { background: #09ff00; }


/* ----------------------------------------------------------------
   4. TOP BANNER
   ---------------------------------------------------------------- */
.top-banner {
  width      : 100%; height: 40px;
  background : #527750;
  color      : #fff;
  overflow   : hidden;
  z-index    : 999;
  display    : flex;
  align-items: center;
  position   : relative;
}

.banner-track {
  display  : flex;
  width    : max-content;
  animation: marquee 25s linear infinite;
}

.banner-track span {
  white-space : nowrap;
  padding     : 0 60px;
  font-weight : 600;
  font-size   : 14px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.close-banner {
  position  : absolute; right: 15px;
  background: none; border: none;
  color     : #fff; font-size: 22px;
  cursor    : pointer; z-index: 2;
  line-height: 1;
}


/* ----------------------------------------------------------------
   5. AUTO CARD SLIDER
   ---------------------------------------------------------------- */
.auto-card-section { background: #fff; overflow: hidden; padding: 8px 0; }
.auto-card-slider  { width: 100%; overflow: hidden; }

.auto-card-track {
  display  : flex;
  gap      : 20px;
  width    : max-content;
  padding  : 12px 0;
  animation: autoCardScroll 22s linear infinite;
}

.auto-card {
  width             : 160px; height: 190px;
  border-radius     : 14px;
  flex-shrink       : 0;
  background-size   :contain;
  background-position: center;
  box-shadow        : 0 5px 15px rgba(0,0,0,0.15);
  transition        : transform 0.4s ease;
  display           : block;
}

.auto-card:hover { transform: scale(1.08) translateY(-6px); }
.auto-card-slider:hover .auto-card-track { animation-play-state: paused; }

.auto-img-1 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.51.35 PM.jpeg"); }
.auto-img-2 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.52.37 PM (2).jpeg"); }
.auto-img-3 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.52.37 PM (7).jpeg"); }
.auto-img-4 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.52.37 PM (8).jpeg"); }
.auto-img-5 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.52.37 PM (11).jpeg"); }
.auto-img-6 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.52.37 PM (9).jpeg"); }
.auto-img-7 { background-image: url("../img/WhatsApp Image 2026-02-03 at 4.52.37 PM (3).jpeg"); }
.auto-img-8 { background-image: url("../img/WhatsApp Image 2026-02-04 at 2.38.35 PM (1).jpeg"); }




@keyframes autoCardScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ----------------------------------------------------------------
   6. PRODUCT SHOWCASE — DESKTOP (sticky scroll, 350vh)
   ---------------------------------------------------------------- */
.scroll-container {
  height             : 700px; /* 3 sections × ~73vh each */
  position           : relative;
  /* Fixed background — car.jpg always, no switching */
  background-image   : url("../img/3.png");
  /* background-color:#6B9169; */
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
}

.scroll-container::after {
  content       : '';
  position      : absolute;
  inset         : 0;
  background    : rgba(0,0,0,0.6);
  z-index       : 0;
  pointer-events: none;
}

/* bg-1/bg-2/bg-3 classes removed — background is always car.jpg */

.enterprise {
  position  : sticky;
  top       : 0;
  height    : 100vh;
  width     : 100%;
  display   : flex;
  overflow  : hidden;
  z-index   : 1;
}

.content {
  position        : absolute;
  inset           : 0;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 0 5%;
  width           : 100%;
  pointer-events  : auto;
  z-index         : 2;
}

/* ── Timeline (left bar) ── */
.timeline-indicator {
  position      : absolute;
  left          : 40px; top: 50%;
  transform     : translateY(-50%);
  display       : flex;
  flex-direction: column;
  z-index       : 10;
  pointer-events: none;
}

.timeline-item {
  display     : flex;
  align-items : center;
  height      : 140px;
  cursor      : pointer;
  pointer-events: auto;
  transition  : all 0.3s ease;
}

.bar {
  width        : 50px; height: 6px;
  background   : rgba(255,255,255,0.3);
  border-radius: 10px;
  position     : relative;
  overflow     : hidden;
  transition   : all 0.6s cubic-bezier(0.4,0,0.2,1);
}

.bar::after {
  content   : '';
  position  : absolute;
  top:0; left:0;
  width     : 0; height: 100%;
  background: #fff;
  transition: width 0.3s ease;
}

.bar.active {
  height    : 100px; width: 5px;
  background: #fff;
  box-shadow: 0 0 15px rgba(255,255,255,0.8);
}

.bar.active::after { width: 100%; }

.label {
  opacity    : 0;
  color      : white;
  font-weight: bold;
  margin-left: 20px;
  font-size  : 16px;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transform  : translateX(-20px);
  transition : all 0.6s cubic-bezier(0.4,0,0.2,1);
}

.bar.active + .label { opacity: 1; transform: translateX(0); }

/* ── Text Section ── */
.text-section {
  position   : relative;
  width      : 30%;
  height     : 300px;
  margin-left: 120px;
}

.step {
  position  : absolute;
  top:0; left:0;
  width     : 100%;
  opacity   : 0;
  transform : translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.step.active { opacity: 1; transform: translateY(0); }

.step h1 { color: white; font-size: 3.5rem; text-shadow: 0 4px 10px rgba(0,0,0,0.3); margin-bottom: 10px; }
.step h2 { color: white; font-size: 3rem; margin-bottom: 10px; }
.subtitle { color: #ccc; font-size: 1.3rem; margin-bottom: 18px; font-weight: 300; }
.desc     { color: #eee; font-size: 1.05rem; line-height: 1.6; }

/* ── Cards Container (desktop) ── */
.cards-container {
  width         : min(780px, 52vw);
  height        : 550px;
  overflow      : visible;
  position      : relative;
  padding       : 30px 40px;
  pointer-events: auto;
  flex-shrink   : 0;
}

.carousel-wrapper {
  position        : absolute;
  inset           : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  opacity         : 0;
  visibility      : hidden;
  transform       : translateX(20px);
  transition      : opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
  pointer-events  : auto;
}

.carousel-wrapper.active {
  opacity   : 1;
  visibility: visible;
  transform : translateX(0);
}

.carousel-center-column {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 18px;
  pointer-events : auto;
  width          : 100%;
}

/*
  Track container = exactly 2 cards + 1 gap wide
  calc(2 * --card-w + --card-gap) = 2*260+20 = 540px on desktop
*/
.carousel-track-container {
  width   : calc(2 * var(--card-w) + var(--card-gap));
  height  : 400px;
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display   : flex;
  gap       : var(--card-gap);
  height    : 100%;
  margin    : 0; padding: 0;
  list-style: none;
  transition: transform 0.6s ease-in-out;
}

.carousel-slide {
  min-width  : var(--card-w);
  height     : 100%;
  flex-shrink: 0;
}

/* ── Product Card ── */
.card {
  width         : 100%; height: 100%;
  border-radius : 14px;
  background    : #fff;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  box-shadow    : 0 10px 30px rgba(0,0,0,0.3);
  transition    : transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {box-shadow: 0 20px 40px rgba(0,0,0,0.4); z-index: 10; }

.card-img {
  width             : 93%; height: 62%;
  margin            : 8px;
  border-radius     : 8px;
  background-size   :cover;
  background-position: center;
  transition        : transform 0.5s ease;
  flex-shrink       : 0;
}

/* .card:hover .card-img { transform: scale(1); } */

.card-info {
  flex           : 1;
  padding        : 10px 12px;
  background     : linear-gradient(to right, #fff, #f8f9fa);
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  overflow       : hidden;
}

.card-text h3    { font-size: 0.9rem; color: #333; margin-bottom: 3px; }
.card:hover .card-text h3 { color: teal; }
.card-text p     { font-size: 0.75rem; color: #666; margin-bottom: 2px; }
.card-text .price { font-size: 1.05rem; font-weight: bold; color: #015e01; margin-bottom: 5px; }
.card:hover .card-text .price { color: #000; }

.add-to-cart-btn {
  display      : inline-block;
  padding      : 7px 12px;
  background   : #6B9169;
  color        : white;
  font-weight  : 600;
  font-size    : 0.75rem;
  text-align   : center;
  border-radius: 50px;
  transition   : all 0.3s ease;
  flex-shrink  : 0;
  white-space  : nowrap;
  margin-bottom: 40px;
}

.add-to-cart-btn:hover { background: #527750; transform: translateY(-2px); }

.img-1 { background-image: url("../img/Areca\ plate.jpeg"); }
.img-2 { background-image: url("../img/WhatsApp\ Image\ 2026-02-03\ at\ 4.52.37\ PM\ \(16\).jpeg"); }
.img-3 { background-image: url("../img/WhatsApp\ Image\ 2026-02-03\ at\ 4.52.37\ PM\ \(9\).jpeg"); }
.img-4 { background-image: url("../img/WhatsApp\ Image\ 2026-02-03\ at\ 4.52.37\ PM\ \(13\).jpeg"); }
.img-5 { background-image: url("../img/WhatsApp\ Image\ 2026-02-03\ at\ 4.52.22\ PM\ \(7\).jpeg"); }
.img-6 { background-image: url("../img/WhatsApp\ Image\ 2026-02-03\ at\ 4.52.22\ PM\ \(3\).jpeg"); }

/* Carousel nav buttons */
.carousel-btn {
  position        : absolute;
  top             : 50%; transform: translateY(-50%);
  width           : 44px; height: 44px;
  border-radius   : 50%;
  border          : 2px solid rgba(255,255,255,0.35);
  background      : rgba(255,255,255,0.12);
  backdrop-filter : blur(8px);
  color           : white;
  font-size       : 1.1rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  z-index         : 5;
  transition      : all 0.3s ease;
  cursor          : pointer;
}

.carousel-btn:hover { background: white; color: #333; transform: translateY(-50%) scale(1.15); }
.prev-btn { left: 0; }
.next-btn { right: 0; }

.view-all-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 10px;
  color          : white;
  font-size      : 0.88rem;
  font-weight    : 500;
  padding        : 9px 18px;
  border-radius  : 50px;
  background     : rgba(255,255,255,0.1);
  border         : 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  white-space    : nowrap;
  transition     : all 0.3s ease;
}

.view-all-link:hover { background: white; color: #333; transform: translateY(-3px); }


/* ----------------------------------------------------------------
   7. REVIEWS SECTION
   ---------------------------------------------------------------- */
.uniq-reviews-section {
  padding         : 80px 20px;
  background-color: #ffffff;
  position        : relative;
  /* overflow hidden prevents track from leaking */
  overflow        : hidden;
}

.uniq-reviews-container {
  max-width: 1400px;
  margin   : 0 auto;
  position : relative;
  z-index  : 2;
}

.uniq-reviews-title {
  text-align    : center;
  font-size     : clamp(1.6rem, 3.5vw, 2.9rem);
  color         : #111;
  margin-bottom : 50px;
  font-weight   : 600;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.uniq-category-tabs {
  display        : flex;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : 30px;
  margin-bottom  : 50px;
  border-bottom  : 1px solid #eee;
  padding-bottom : 20px;
  width          : fit-content;
  margin-left    : auto;
  margin-right   : auto;
}

.uniq-tab-btn {
  padding     : 6px 0;
  border      : none;
  background  : transparent;
  color       : #999;
  font-size   : 15px;
  font-weight : 600;
  cursor      : pointer;
  position    : relative;
  transition  : color 0.3s;
}

.uniq-tab-btn:hover      { color: #111; }
.uniq-tab-btn.uniq-active{ color: #111; }

.uniq-tab-btn.uniq-active::after {
  content   : '';
  position  : absolute;
  bottom    : -21px; left: 0;
  width     : 100%; height: 2px;
  background: #111;
}

.uniq-carousel-wrapper {
  position   : relative;
  display    : flex;
  align-items: center;
  gap        : 10px;
}

/* KEY FIX: min-width:0 prevents flex child overflow */
.uniq-carousel {
  flex     : 1;
  overflow : hidden;
  padding  : 30px 0;
  min-width: 0;
}

/* padding-left:50% centres active card — safe inside overflow:hidden parent */
.uniq-carousel-track {
  display    : flex;
  align-items: center;
  gap        : 24px;
  width      : max-content;
  padding-left: 50%;
  box-sizing : content-box;
  transition : transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}

.uniq-review-card {
  width         : 300px;
  min-height    : 290px;
  flex-shrink   : 0;
  background    : white;
  border        : 1px solid #e0e0e0;
  border-radius : 12px;
  padding       : 26px;
  display       : flex;
  flex-direction: column;
  opacity       : 0.5;
  transform     : scale(0.95);
  cursor        : pointer;
  user-select   : none;
  transition    : all 0.4s ease;
}

.uniq-review-card:hover      { opacity: 1; border-color: #999; }
.uniq-review-card.uniq-center {
  opacity     : 1;
  transform   : scale(1);
  z-index     : 10;
  border-color: #111;
  box-shadow  : 0 10px 30px rgba(0,0,0,0.08);
}

.uniq-reviewer-avatar {
  width          : 48px; height: 48px;
  border-radius  : 10px;
  background     : #f4f4f4;
  color          : #333;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  font-weight    : 700;
  margin-right   : 14px;
  flex-shrink    : 0;
}

.uniq-review-card.uniq-center .uniq-reviewer-avatar { background: #111; color: white; }
.uniq-review-header { display: flex; align-items: center; margin-bottom: 16px; }
.uniq-reviewer-info h3 { font-size: 1rem; color: #111; margin: 0; font-weight: 700; }
.uniq-reviewer-info p  { font-size: 0.78rem; color: #777; margin: 2px 0 0; text-transform: uppercase; font-weight: 500; }
.uniq-rating { margin-bottom: 12px; font-size: 13px; }
.uniq-star   { color: #111; }
.uniq-review-text { color: #444; font-size: 0.92rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }

.uniq-category-tag {
  display       : inline-block;
  padding       : 4px 10px;
  background    : transparent;
  color         : #111;
  border        : 1px solid #eee;
  border-radius : 4px;
  font-size     : 0.68rem;
  font-weight   : 600;
  text-transform: uppercase;
  align-self    : flex-start;
}

.uniq-review-card.uniq-center .uniq-category-tag { border-color: #111; background: #111; color: white; }

.uniq-nav-btn {
  width          : 44px; height: 44px;
  border-radius  : 50%;
  border         : 1px solid #ccc;
  background     : white;
  color          : #111;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : all 0.3s;
  z-index        : 5;
  flex-shrink    : 0;
}

.uniq-nav-btn:hover { background: #111; border-color: #111; color: white; }

.uniq-dots-container {
  display        : flex;
  justify-content: center;
  gap            : 10px;
  margin-top     : 28px;
}

.uniq-dot {
  width        : 8px; height: 8px;
  border-radius: 50%;
  background   : #ddd;
  border       : none;
  cursor       : pointer;
  transition   : all 0.3s;
}

.uniq-dot.uniq-active { background: #111; transform: scale(1.4); }


/* ----------------------------------------------------------------
   8. VLOG SECTION
   ---------------------------------------------------------------- */
.vlog-section {
  padding         : 60px 20px;
  background-color: #ffffff;
  background-image: radial-gradient(#00897b 0.5px, transparent 0.5px);
  background-size : 20px 20px;
  overflow        : hidden;  /* prevents track overflow leaking to page */
}

.vlog-container { max-width: 1500px; margin: 0 auto; }

.vlog-title {
  text-align    : center;
  font-size     : clamp(1.6rem, 3.5vw, 2.7rem);
  font-weight   : 800;
  color         : #000;
  margin-bottom : 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.vlog-carousel-wrapper {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 16px;
}

/* KEY FIX: min-width:0 prevents flex child from overflowing */
.vlog-window {
  flex     : 1;
  overflow : hidden;
  padding  : 40px 0;
  min-width: 0;
}

.vlog-track {
  display    : flex;
  width      : max-content;
  gap        : 20px;
  padding-left: 50%;
  box-sizing : content-box;
  transition : transform 0.5s cubic-bezier(0.25,1,0.5,1);
}

.vlog-card {
  width             : 250px; height: 400px;
  background-color  : #eee;
  background-size   : cover;
  background-position: center;
  position          : relative;
  flex-shrink       : 0;
  cursor            : pointer;
  display           : block;
  transform         : scale(0.9);
  opacity           : 0.6;
  transition        : all 0.5s ease;
  box-shadow        : 0 10px 20px rgba(0,0,0,0.1);
}

.vlog-card.is-active {
  transform : scale(1.1);
  opacity   : 1;
  z-index   : 10;
  box-shadow: 0 5px 10px rgba(0,137,123,0.4);
  border    : 3px solid #fe0000;
}

.vlog-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  display   : flex;
  justify-content: flex-end;
  align-items    : flex-end;
  padding   : 20px;
  opacity   : 0;
  transition: opacity 0.4s ease;
}

.vlog-card.is-active:hover .vlog-overlay { opacity: 1; }

.play-btn {
  width          : 48px; height: 48px;
  background     : #ff0000;
  border-radius  : 50%;
  color          : white;
  display        : flex;
  justify-content: center;
  align-items    : center;
  font-size      : 18px;
  box-shadow     : 0 4px 15px rgba(0,0,0,0.4);
  transition     : transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}

.vlog-card.is-active:hover .play-btn { transform: scale(1.15) rotate(5deg); }

.v-nav-btn {
  width          : 50px; height: 50px;
  border-radius  : 50%;
  border         : none;
  background     : #e0f2f1;
  color          : #00897b;
  font-size      : 18px;
  cursor         : pointer;
  box-shadow     : 0 5px 15px rgba(0,0,0,0.15);
  z-index        : 20;
  transition     : all 0.2s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
}

.v-nav-btn:hover { background: #00897b; color: white; transform: scale(1.1); }

.v-img-1 { background-image: url('../img/400x400\ \(2\).jpg'); }
.v-img-2 { background-image: url('../img/WhatsApp\ Image\ 2025-12-30\ at\ 2.47.15\ PM (1).jpeg'); }
.v-img-3 { background-image: url('../img/400x400 (2).jpg'); }
.v-img-4 { background-image: url('../img/WhatsApp\ Image\ 2025-12-30\ at\ 2.47.15\ PM (1).jpeg'); }
.v-img-5 { background-image: url('../img/400x400 (2).jpg'); }
.v-img-6 { background-image: url('../img/WhatsApp\ Image\ 2025-12-30\ at\ 2.47.15\ PM (1).jpeg'); }
.v-img-7 { background-image: url('../img/400x400 (2).jpg'); }


/* ----------------------------------------------------------------
   9. BRAND SHOWCASE
   ---------------------------------------------------------------- */
.brand-showcase-sec { padding: 40px 20px; }

.brand-showcase-title {
  text-align   : center;
  font-size    : clamp(1.4rem, 3vw, 2.2rem);
  margin-bottom: 36px;
  color        : var(--color-dark);
}

.brand-showcase-slider { max-width: 100%; overflow: hidden; }

.brand-showcase-track {
  display  : flex;
  gap      : 26px;
  width    : max-content;
  padding  : 10px 0;
  animation: brandScroll 30s linear infinite;
}

.brand-card {
  min-width          : 220px; height: 100px;
  background-color   : #fff;
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : contain;
  box-shadow         : 0 8px 20px rgba(0,0,0,0.08);
  flex-shrink        : 0;
  filter             : grayscale(100%);
  opacity            : 0.85;
  transition         : all 0.3s ease;
}

.brand-card:hover { transform: translateY(-6px); filter: none; opacity: 1; }
.brand-showcase-slider:hover .brand-showcase-track { animation-play-state: paused; }

@keyframes brandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.brand-woodspa     { background-image: url("../img/woodspa.jpeg"); background-size: 100% 100%; }
.brand-winners     { background-image: url("../img/winners.jpeg"); }
.brand-uvfood      { background-image: url("../img/uvfood.jpeg"); }
.brand-sadc        { background-image: url("../img/sadc.jpeg"); background-size: 100% 100%; }
.brand-doors       { background-image: url("../img/doors.jpeg"); }
.brand-pishon      { background-image: url("../img/pishon.jpeg"); background-size: 100% 100%; }
.brand-maduram     { background-image: url("../img/maduram.jpeg"); }
.brand-leadsfactory{ background-image: url("../img/leadsfactory.jpeg"); background-size: 90% 90%; }
.brand-kannan      { background-image: url("../img/kannan.jpeg"); background-size: 100% 100%; }
.brand-kamalam     { background-image: url("../img/kamalam.jpeg"); background-size: 100% 100%; }
.brand-imax        { background-image: url("../img/imax.jpeg"); background-size: 100% 100%; }
.brand-aveng       { background-image: url("../img/aveng.jpeg"); background-size: 100% 100%; }


/* ----------------------------------------------------------------
   10. MD MESSAGE
   ---------------------------------------------------------------- */
.md-message { background: linear-gradient(135deg, #e8f5e9, #ffffff); padding: 80px 20px; }

.md-container {
  max-width            : 1100px;
  margin               : auto;
  display              : grid;
  grid-template-columns: 1fr 1.4fr;
  gap                  : 50px;
  align-items          : center;
}

.md-image img { width: 100%; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
.md-content h2 { font-size: 1.45rem; color: #e9ac07; margin-bottom: 8px; }
.md-name       { font-weight: 600; color: #4a9d7a; margin-bottom: 22px; }
.md-content p  { font-size: 1rem; line-height: 1.8; color: #444; margin-bottom: 16px; }

.md-explore-btn {
  display      : inline-block;
  margin-top   : 28px;
  padding      : 14px 60px 14px 32px;
  background   : #ffffff;
  color        : #000;
  font-weight  : 600;
  letter-spacing: 0.6px;
  border       : 2px solid #000;
  border-radius: 0;
  position     : relative;
  transition   : all 0.3s ease;
}

.md-explore-btn:hover { background: #000; color: #fff; transform: translateY(-2px); }

.arrow-line span {
  position  : absolute;
  right     : 22px; top: 50%;
  width     : 22px; height: 1.5px;
  background: #000;
  transform : translateY(-50%);
  transition: right 0.3s ease;
}

.arrow-line span::after {
  content     : '';
  position    : absolute;
  right       : 0; top: -4px;
  width       : 8px; height: 8px;
  border-right : 2px solid #000;
  border-bottom: 2px solid #000;
  transform   : rotate(-45deg);
}

.arrow-line:hover span { right: 14px; }
.md-explore-btn:hover .arrow-line span,
.md-explore-btn:hover .arrow-line span::after { background: #fff; border-color: #fff; }

.md-signature  { margin-top: 44px; text-align: right; }
.md-sign-text  { font-family: 'Allura', cursive; font-size: 2.2rem; color: #2d8659; display: block; }
.md-sign-name  { font-size: 0.9rem; font-weight: 500; color: #555; letter-spacing: 0.6px; }


/* ----------------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------------- */
.ecg-footer { background: #060911; color: #cbd5e1; }
.ecg-footer-container { padding: 60px 4% 30px; }

.ecg-footer-grid {
  display              : grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.5fr;
  gap                  : 40px;
  align-items          : start;
}

.ecg-footer-brand h2  { color: #fff; font-size: 24px; margin-bottom: 12px; }
.ecg-footer-brand p   { font-size: 13px; line-height: 1.7; color: #94a3b8; }
.ecg-footer-col h4    { color: #fff; font-size: 14px; margin-bottom: 12px; }
.ecg-footer-col ul li { margin-bottom: 9px; }
.ecg-footer-col ul li a { color: #cbd5e1; font-size: 13px; transition: color 0.3s; }
.ecg-footer-col ul li a:hover { color: #22c55e; }

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

.ecg-footer-social a {
  width          : 36px; height: 36px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #1e293b;
  border-radius  : 50%;
  color          : #e5e7eb;
  font-size      : 15px;
  transition     : all 0.3s ease;
}

.ecg-footer-social a:hover { background: #22c55e; color: #0f172a; transform: translateY(-2px); }

.ecg-footer-bottom {
  border-top     : 1px solid rgba(255,255,255,0.08);
  margin-top     : 28px; padding-top: 16px;
  display        : flex;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : 8px;
  font-size      : 12px;
  color          : #94a3b8;
}

/* Enquiry form in footer */
.enquiry-card    { background: transparent; border: none; padding: 0; width: 100%; }

.enquiry-title {
  color        : #fff;
  font-size    : 20px; font-weight: 800;
  margin-bottom: 8px;
  background   : linear-gradient(135deg, #ffffff 40%, var(--color-accent) 150%);
  -webkit-background-clip: text;
  background-clip         : text;
  -webkit-text-fill-color : transparent;
}

.enquiry-subtitle { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
.enquiry-input-group { margin-bottom: 16px; }

.enquiry-input {
  width        : 100%;
  padding      : 11px 0;
  border       : none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
  font-size    : 14px;
  color        : #fff;
  background   : transparent;
  outline      : none;
  transition   : border-color 0.4s;
}

.enquiry-input::placeholder { color: rgba(255,255,255,0.4); }
.enquiry-input:focus        { border-color: var(--color-accent); }

.enquiry-btn {
  width         : 100%;
  padding       : 15px;
  margin-top    : 10px;
  border        : none; border-radius: 6px;
  font-size     : 13px; font-weight: 700;
  color         : white;
  cursor        : pointer;
  background    : linear-gradient(135deg, #22682e, #113f2c);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  transition    : all 0.5s cubic-bezier(0.19,1,0.22,1);
  box-shadow    : 0 8px 24px rgba(0,0,0,0.2);
}

.enquiry-btn:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11,191,138,0.3); letter-spacing: 2.5px; }


/* ----------------------------------------------------------------
   12. UTILITIES
   ---------------------------------------------------------------- */
#scrollTopBtn {
  display        : none;
  position       : fixed;
  bottom         : 30px; left: 30px;
  z-index        : 1000;
  width          : 48px; height: 48px;
  border         : none;
  background     : #ffffff;
  color          : #333;
  border-radius  : 50%;
  box-shadow     : 0 4px 16px rgba(0,0,0,0.2);
  transition     : all 0.3s ease;
  align-items    : center;
  justify-content: center;
}

#scrollTopBtn.visible { display: flex; }
#scrollTopBtn:hover { background: #f1f1f1; transform: translateY(-4px); }
#scrollTopBtn i { font-size: 18px; }

.full { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); }


/* ================================================================
   13. MEDIA QUERIES
   ================================================================ */

/* ----------------------------------------------------------------
   ≤ 1199px — Large tablet / small desktop
   ---------------------------------------------------------------- */
@media (max-width: 1199px) {
  header { padding: 16px 28px; }
  .main-menu > a, .main-menu .dropdown > a { margin: 0 10px; font-size: 0.82rem; }
  :root { --card-w: 240px; }
  .cards-container { width: min(700px, 50vw); height: 500px; }
  .text-section { margin-left: 90px; width: 33%; }
  .step h1 { font-size: 3rem; }
  .step h2 { font-size: 2.5rem; }
}

/* ----------------------------------------------------------------
   ≤ 1024px — Tablet: disable sticky scroll, show hamburger
   ---------------------------------------------------------------- */
/* ---- ≤1024px: hamburger + mobile nav overlay ---- */
@media (max-width: 1024px) {

  header     { padding:12px 20px; }
  .main-menu { display:none; position:static; transform:none; }
  .hamburger { display:block; }
  .logo img  { width:50px; height:50px; }

  /* Full-screen nav overlay */
  .main-menu.active {
    display         : flex;
    position        : fixed;
    top:0; left:0;
    width           : 100%; height:100dvh;
    background      : rgba(10,10,10,0.97);
    backdrop-filter : blur(12px);
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 0;
    z-index         : 9999;
    padding         : 80px 30px 40px;
    overflow-y      : auto;
  }

  .main-menu.active > a,
  .main-menu.active .dropdown > a {
    color         : #fff !important;
    font-size     : 1.1rem;
    margin        : 0;
    padding       : 14px 20px;
    width         : 100%;
    text-align    : center;
    border-bottom : 1px solid rgba(255,255,255,0.08);
    mix-blend-mode: normal;
    display       : block;
  }

  /* Mobile dropdown container */
  .main-menu.active .dropdown {
    flex-direction : column;
    width          : 100%;
    align-items    : stretch;
  }

  /* Hide dropdown initially on mobile */
  .main-menu.active .dropdown-menu {
    position      : relative !important;
    top           : 0 !important;
    opacity       : 1 !important;
    visibility    : visible !important;
    pointer-events: auto !important;
    box-shadow    : none !important;
    background    : rgba(255,255,255,0.06) !important;
    width         : 100% !important;
    min-width     : unset !important;
    border-radius : 0 !important;
    padding       : 0 !important;
    /* Collapsed — uses max-height for smooth animation */
    max-height    : 0;
    overflow      : hidden;
    display       : flex !important;  /* always flex, height controls visibility */
    flex-direction: column !important;
    transition    : max-height 0.3s ease !important;
  }

  /* Show dropdown when .open is on parent .dropdown */
  .main-menu.active .dropdown.open .dropdown-menu {
    max-height: 300px; /* tall enough for any submenu */
  }

  /* Dropdown submenu links */
  .main-menu.active .dropdown-menu a {
    color         : rgba(255,255,255,0.75) !important;
    font-size     : 0.9rem !important;
    padding       : 12px 28px !important;
    text-align    : center !important;
    border-bottom : 1px solid rgba(255,255,255,0.05) !important;
    margin        : 0 !important;
    display       : block !important;
    mix-blend-mode: normal !important;
  }

  .main-menu.active .dropdown-menu a:hover {
    background: rgba(255,255,255,0.1) !important;
    color     : #0bbf8a !important;
  }

  /* Rotate caret arrow when dropdown is open */
  .main-menu.active .dropdown.open .dropbtn .fa-caret-down {
    transform : rotate(180deg);
    transition: transform 0.3s ease;
  }

  .main-menu.active .dropdown .dropbtn .fa-caret-down {
    transition: transform 0.3s ease;
    display   : inline-block;
  }

  /* Hero */
  .hero-slider  { height:580px; }
  .hero-content { top:auto; bottom:90px; transform:none; left:6%; right:6%; max-width:88%; }
  .hero-content::after { display:none; }
  .controls { left:6%; bottom:40px; }

  /* Reviews */
  .uniq-reviews-title { font-size:2rem; }
  .uniq-category-tabs { gap:18px; }

  /* Vlog */
  .vlog-card  { width:210px; height:340px; }
  .v-nav-btn  { width:44px; height:44px; }

  /* Footer */
  .ecg-footer-grid { grid-template-columns:repeat(2,1fr); gap:32px; }
  .ecg-footer-brand { grid-column:1 / -1; text-align:center; }
  .ecg-footer-brand p { max-width:560px; margin:10px auto; }
  .ecg-footer-social  { justify-content:center; }
  .ecg-footer-grid > .ecg-footer-col:last-child { grid-column:1 / -1; }
}
/* ---- ≤900px: disable sticky scroll product showcase ---- */
/*
   Kept separate from nav breakpoint (1024px) so laptops between
   901–1024px still get the full sticky scroll experience.
   Below 900px (tablets/mobile) the section stacks vertically.
*/
@media (max-width: 900px) {

  /* Product showcase — plain dark, stacked, no sticky */
  .scroll-container {
    height          : auto;
    padding         : 50px 0 60px;
    overflow        : visible;
    background-image: none !important;
    background-color: #111318;
  }

  .scroll-container::after { display:none; }

  .enterprise {
    position      : relative;
    top           : auto;
    height        : auto;
    flex-direction: column;
    overflow      : visible;
    align-items   : center;
  }

  .content {
    position       : relative;
    inset          : auto;
    flex-direction : column;
    padding        : 20px 16px 40px;
    height         : auto;
    gap            : 28px;
    justify-content: center;
    align-items    : center;
  }

  /* Timeline → horizontal tabs */
  .timeline-indicator {
    position       : relative;
    left           : auto; top:auto;
    transform      : none;
    flex-direction : row;
    justify-content: center;
    width          : 100%;
    gap            : 0;
    pointer-events : auto;
  }

  .timeline-item { flex-direction:column; height:auto; align-items:center; gap:8px; flex:1; max-width:130px; padding:0 6px; }
  .bar           { width:70%; height:5px; min-width:40px; overflow:visible; }
  .bar.active    { height:7px; width:70%; box-shadow:none; }
  .label         { margin-left:0; margin-top:6px; font-size:12px; text-align:center; opacity:0.75; transform:none; white-space:normal; word-break:break-word; line-height:1.3; }
  .bar.active + .label { opacity:1; font-weight:700; color:white; }

  .text-section      { width:90%; max-width:600px; margin:0 auto; height:auto; min-height:140px; text-align:center; }
  .step              { position:relative; transform:none; opacity:0; transition:opacity 0.4s; }
  .step.active       { opacity:1; }
  .step:not(.active) { display:none; }
  .step h1  { font-size:2.2rem; }
  .step h2  { font-size:1.9rem; }
  .subtitle { font-size:1rem; }
  .desc     { font-size:0.9rem; }

  :root { --card-w:230px; --card-gap:20px; }
  .cards-container          { width:100%; max-width:600px; height:440px; padding:0; margin:0 auto; }
  .carousel-wrapper         { position:absolute; inset:0; transform:translateX(20px); }
  .carousel-wrapper.active  { transform:translateX(0); }
  .carousel-track-container { width:calc(2 * var(--card-w) + var(--card-gap)); height:360px; }
  .carousel-btn { width:38px; height:38px; font-size:1rem; }
}

/* ----------------------------------------------------------------
   ≤ 768px — Mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Header */
  header { padding: 10px 16px; }
  .header-actions { gap: 14px; }
  .search-wrapper { display: none; }

  /* Hero */
  .hero-slider   { height: 460px; }
  .hero-content  { bottom: 14%; left: 5%; right: 5%; }
  .hero-content h1 { font-size: clamp(1.7rem, 9vw, 2.6rem); letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 14px; }
  .hero-content p  { font-size: 0.95rem; margin-bottom: 20px; }
  .hero-content button { padding: 12px 24px; font-size: 10px; letter-spacing: 2px; }
  .controls { left: 5%; bottom: 18px; }
  .dot { width: 36px; }

  /* Auto cards */
  .auto-card { width: 150px; height: 150px; }

  /* ── Product Showcase ── */
  .scroll-container { padding: 36px 0 50px; }

  /*
    MOBILE 2-CARD LAYOUT FORMULA:
    ─────────────────────────────
    Available width = 100vw - 24px (content padding 12px × 2)
    Minus button space = 78px (39px each button)
    Track = available - buttons = 100vw - 102px
    2 cards + gap = 2×card_w + gap = track
    card_w = (100vw - 102px - gap) / 2 = (100vw - 122px) / 2

    At 360px → (360-122)/2 = 119px  ✓
    At 430px → (430-122)/2 = 154px  ✓
  */
  :root { --card-w: calc((100vw - 122px) / 2); --card-gap: 16px; }

  .cards-container {
    width     : 100%;
    max-width : 100%;
    padding   : 0;
    /* height = card height (1.9 × card_w) + view-all (52px) + buffer */
    /* At 430px: 1.9×154 + 52 = 345px → use clamp for safety */
    height    : clamp(300px, calc(var(--card-w) * 1.9 + 70px), 380px);
    margin    : 0 auto;
  }

  .carousel-track-container {
    /* exact fit for 2 cards */
    width : calc(2 * var(--card-w) + var(--card-gap));
    /* height proportional to card width */
    height: clamp(220px, calc(var(--card-w) * 1.85), 295px);
  }

  .carousel-wrapper {
    position: absolute;
    inset   : 0;
    transform: translateX(15px);
  }

  .carousel-wrapper.active { transform: translateX(0); }

  /* Smaller buttons on mobile so they don't eat into card space */
  .carousel-btn { width: 36px; height: 36px; font-size: 0.85rem; }
  .prev-btn { left: 2px; }
  .next-btn { right: 2px; }

  /* Scale down card content for narrow cards */
  .card-img    { height: 55%; margin: 6px; }
  .card-info   { padding: 7px 8px; gap: 3px; }
  .card-text h3    { font-size: 0.68rem; margin-bottom: 1px; }
  .card-text p     { font-size: 0.62rem; }
  .card-text .price { font-size: 0.82rem; margin-bottom: 3px; }
  .add-to-cart-btn  { font-size: 0.6rem; padding: 5px 7px; letter-spacing: 0; }

  .step h1 { font-size: 1.9rem; }
  .step h2 { font-size: 1.6rem; }

  /* Reviews */
  .uniq-reviews-section { padding: 50px 14px; }
  .uniq-reviews-title   { font-size: 1.7rem; margin-bottom: 30px; }
  .uniq-category-tabs {
    justify-content: flex-start;
    overflow-x     : auto;
    scrollbar-width: none;
    gap            : 18px;
    margin-bottom  : 30px;
    padding-bottom : 15px;
  }
  .uniq-category-tabs::-webkit-scrollbar { display: none; }
  .uniq-tab-btn   { flex-shrink: 0; font-size: 13px; }
  /* Responsive card width: capped at 82vw to always fit */
  .uniq-review-card { width: min(82vw, 280px); min-height: 250px; padding: 20px; }
  .uniq-nav-btn { display: none; } /* use swipe */

  /* Vlog */
  .vlog-section { padding: 40px 12px; }
  .vlog-title   { font-size: 1.6rem; letter-spacing: 1px; }
  .vlog-card    { width: 190px; height: 300px; }
  .v-nav-btn    { width: 40px; height: 40px; font-size: 15px; }

  /* Brand */
  .brand-card           { min-width: 160px; height: 100px; }
  .brand-showcase-title { font-size: 1.5rem; }

  /* MD Message */
  .md-container { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .md-signature { text-align: center; }
  .md-explore-btn { margin: 20px auto 0; display: inline-block; }
  .md-message   { padding: 60px 16px; }

  /* Footer */
  .ecg-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ecg-footer-brand { grid-column: 1 / -1; }
  .ecg-footer-grid > .ecg-footer-col:last-child { grid-column: 1 / -1; }
  .ecg-footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* ----------------------------------------------------------------
   ≤ 480px — Small mobile
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Hero */
  .hero-slider  { height: 400px; }
  .hero-content h1 { font-size: clamp(1.45rem, 10vw, 2rem); }
  .hero-content p  { font-size: 0.88rem; }
  .dot { width: 28px; }

  /* Auto cards */
  .auto-card { width: 120px; height: 120px; }

  /* Product showcase */
  :root { --card-w: calc((100vw - 110px) / 2); --card-gap: 12px; }

  .cards-container {
    height: clamp(270px, calc(var(--card-w) * 1.9 + 65px), 360px);
  }
  .carousel-track-container {
    width : calc(2 * var(--card-w) + var(--card-gap));
    height: clamp(200px, calc(var(--card-w) * 1.85), 280px);
  }

  .carousel-btn { width: 32px; height: 32px; font-size: 0.8rem; }

  /* Reviews */
  .uniq-reviews-title { font-size: 1.45rem; }
  .uniq-review-card   { width: min(80vw, 260px); padding: 18px; }

  /* ── Vlog: switch to CSS touch scroll on small screens ──
     JS transform is disabled by JS (see home.js isMobile check)  */
  .vlog-window {
    overflow-x           : auto;
    scroll-snap-type     : x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width      : none;
    padding              : 24px 0 32px;
  }
  .vlog-window::-webkit-scrollbar { display: none; }
  .vlog-track { padding-left: 12%; padding-right: 12%; }
  .vlog-card  {
    width           : 72vw;
    max-width       : 240px;
    height          : 108vw;
    max-height      : 360px;
    transform       : scale(1);
    opacity         : 1;
    scroll-snap-align: center;
  }
  .vlog-card.is-active { transform: scale(1.03); }
  .v-nav-btn { display: none; }

  /* Brand */
  .brand-card { min-width: 130px; height: 85px; }
  .brand-showcase-title { font-size: 1.25rem; }

  /* MD */
  .md-message   { padding: 48px 14px; }
  .md-content h2{ font-size: 1.2rem; }

  /* Footer */
  .ecg-footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .ecg-footer-brand,
  .ecg-footer-grid > .ecg-footer-col:last-child { grid-column: auto; }
  .ecg-footer-social    { justify-content: center; }
  .ecg-footer-container { padding: 40px 14px 20px; }
}

/* ----------------------------------------------------------------
   ≤ 360px — XS mobile
   ---------------------------------------------------------------- */
@media (max-width: 360px) {
  .hero-content h1 { font-size: clamp(1.3rem, 11vw, 1.7rem); }
  .hero-content p  { font-size: 0.82rem; }
  :root { --card-w: calc((100vw - 106px) / 2); --card-gap: 10px; }
  .auto-card { width: 105px; height: 105px; }
  .uniq-review-card { width: min(78vw, 240px); padding: 14px; }
  .vlog-card { width: 78vw; max-height: 320px; }
  .brand-card { min-width: 110px; height: 75px; }
  .ecg-footer-brand h2 { font-size: 1.2rem; }
}

/* ----------------------------------------------------------------
   LANDSCAPE — short rotated phones
   ---------------------------------------------------------------- */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-slider  { height: 100svh; }
  .hero-content { bottom: 10%; top: auto; }
  .hero-content h1 { font-size: clamp(1.4rem, 6vh, 2.4rem); margin-bottom: 8px; }
  .hero-content p  { display: none; }
  .scroll-container { padding: 24px 0 36px; }
  .step h1 { font-size: 1.5rem; }
  .step h2 { font-size: 1.3rem; }
}

/* ----------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auto-card-track, .brand-showcase-track, .banner-track { animation: none !important; }
  .hero-content h1, .hero-content p, .hero-content button { opacity:1; transform:none; animation:none; }
  .slide, .uniq-carousel-track, .vlog-track, .bar, .label, .step { transition: none; animation: none; }
}

/* ----------------------------------------------------------------
   PRINT
   ---------------------------------------------------------------- */
@media print {
  .hero-slider, .vlog-section, .brand-showcase-sec,
  .auto-card-section, .top-banner, #scrollTopBtn,
  .ecg-footer-social, .carousel-btn, .v-nav-btn,
  .uniq-nav-btn { display: none !important; }
  .md-message { page-break-inside: avoid; }
}


/* ================================================================
   LIVE SEARCH DROPDOWN
   ================================================================ */

/* ── Wrapper — expands on .search-open ── */
.search-wrapper {
  position  : relative;
  display   : flex;
  align-items: center;
  cursor    : pointer;
}

.search-icon {
  font-size : 1.05rem;
  color     : #fff !important;
  cursor    : pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.search-wrapper:hover .search-icon,
.search-wrapper.search-open .search-icon {
  transform: scale(1.15);
}

/* Input — hidden by default, expands on .search-open */
.search-input {
  background   : transparent;
  border       : none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  color        : #fff;
  width        : 0;
  max-width    : 0;
  padding      : 4px 0;
  margin-left  : 0;
  outline      : none;
  font-size    : 0.85rem;
  transition   : width 0.35s ease, max-width 0.35s ease,
                 margin 0.35s ease, padding 0.35s ease;
  overflow     : hidden;
  white-space  : nowrap;
}

.search-input::placeholder { color: rgba(255,255,255,0.5); }

/* Expanded state */
.search-wrapper.search-open .search-input,
.search-wrapper:hover .search-input {
  width     : 180px;
  max-width : 180px;
  margin-left: 8px;
  padding   : 4px 6px;
}

/* ── Dropdown container ── */
.search-dropdown {
  /* Fixed positioning breaks out of ALL overflow:hidden parents —
     this is the only reliable way to show a dropdown from inside
     a header that sits inside hero-wrapper{overflow:hidden} */
  position     : fixed;
  top          : 72px;  /* approx header height */
  right        : 20px;
  width        : 360px;
  max-height   : 0;
  overflow     : hidden;
  background   : #ffffff;
  border-radius: 12px;
  box-shadow   : 0 12px 40px rgba(0,0,0,0.22);
  z-index      : 99999;
  transition   : max-height 0.35s ease, opacity 0.35s ease;
  opacity      : 0;
  pointer-events: none;
}

.search-dropdown-visible {
  max-height   : 480px;
  opacity      : 1;
  pointer-events: auto;
  overflow-y   : auto;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 transparent;
}

.search-dropdown-visible::-webkit-scrollbar { width: 4px; }
.search-dropdown-visible::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

/* ── Each suggestion row ── */
.search-item {
  display    : flex;
  align-items: center;
  gap        : 12px;
  padding    : 10px 16px;
  text-decoration: none;
  color      : #222;
  transition : background 0.15s ease;
  border-bottom: 1px solid #f5f5f5;
}

.search-item:last-of-type { border-bottom: none; }

.search-item:hover,
.search-item-active {
  background: #f7fffe;
}

/* Product thumbnail */
.search-item-img {
  width        : 46px;
  height       : 46px;
  border-radius: 8px;
  object-fit   : cover;
  flex-shrink  : 0;
  background   : #f0f0f0;
}

.search-item-no-img {
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #aaa;
  font-size      : 1.1rem;
}

/* Text info */
.search-item-info {
  flex          : 1;
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  gap           : 2px;
}

.search-item-name {
  font-size  : 0.88rem;
  font-weight: 600;
  color      : #222;
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}

/* Highlight matched letters */
.search-item-name mark {
  background  : rgba(11,191,138,0.2);
  color       : #0bbf8a;
  padding     : 0 1px;
  border-radius: 2px;
  font-weight : 700;
}

.search-item-cat {
  font-size  : 0.72rem;
  color      : #999;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Price badge */
.search-item-price {
  font-size  : 0.88rem;
  font-weight: 700;
  color      : #015e01;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── View all results link ── */
.search-view-all {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 12px 16px;
  font-size      : 0.82rem;
  color          : #0bbf8a;
  font-weight    : 600;
  background     : #f7fffe;
  border-top     : 2px solid #e8f5e9;
  text-decoration: none;
  transition     : background 0.2s;
  gap            : 8px;
}

.search-view-all:hover { background: #e8f5e9; }
.search-view-all strong { color: #222; }
.search-view-all i { font-size: 0.78rem; }

/* ── Loading state ── */
.search-loading {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 16px;
  font-size      : 0.85rem;
  color          : #888;
}

.search-spinner {
  width        : 16px;
  height       : 16px;
  border       : 2px solid #e0e0e0;
  border-top   : 2px solid #0bbf8a;
  border-radius: 50%;
  animation    : spin 0.7s linear infinite;
  flex-shrink  : 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty / error state ── */
.search-empty {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 18px 16px;
  font-size  : 0.85rem;
  color      : #888;
}

.search-empty i { color: #ccc; font-size: 1rem; }
.search-empty strong { color: #444; }

/* ── Mobile: full-width dropdown ── */
@media (max-width: 768px) {
  .search-wrapper { display: flex; }

  .search-wrapper.search-open .search-input,
  .search-wrapper:hover .search-input {
    width    : 130px;
    max-width: 130px;
  }

  .search-dropdown {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    left : 16px !important;
  }
}

@media (max-width: 480px) {
  .search-wrapper.search-open .search-input {
    width    : 100px;
    max-width: 100px;
  }
}