/* ================================================================
   VAIBHAV ENTERPRISE — style.css
   ================================================================ */

/* ================================================================
   01. CSS VARIABLES
   ================================================================ */
:root {
  --green: #1b4332;
  --green-mid: #2d6a4f;
  --green-light: #52b788;
  --gold: #c9831a;
  --gold-light: #e9a83a;
  --cream: #f8f4ee;
  --cream-dark: #ede8df;
  --white: #ffffff;
  --dark: #111613;
  --text: #2c3a2e;
  --muted: #6b7c6e;
  --shadow: 0 4px 32px rgba(27, 67, 50, 0.12);
  --shadow-lg: 0 20px 60px rgba(27, 67, 50, 0.18);
  --radius: 16px;
  --radius-sm: 8px;
  --ease: 0.3s ease;
}

/* ================================================================
   02. RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
button,
input,
select,
textarea {
  font-family: "Inter", sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--cream-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--green);
  border-radius: 3px;
}

/* ================================================================
   03. NAVBAR
   ================================================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(27, 67, 50, 0.08);
  z-index: 1000;
  transition: box-shadow var(--ease);
}
nav.scrolled {
  box-shadow: var(--shadow);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav-logo-text .brand {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--green);
}
.nav-logo-text .tagline {
  font-size: 10px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.2s;
}
.nav-links a:hover {
  color: var(--green);
  background: rgba(27, 67, 50, 0.07);
}
.nav-links a.active {
  color: var(--green);
  font-weight: 700;
}
.nav-links .nav-cta {
  background: var(--green);
  color: #fff;
  border-radius: 50px;
  padding: 10px 22px;
}
.nav-links .nav-cta:hover {
  background: var(--green-mid);
  color: #fff;
}

.nav-wa {
  width: 40px;
  height: 40px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.nav-wa:hover {
  transform: scale(1.1);
}
.nav-wa svg {
  width: 22px;
  height: 22px;
  fill: white;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: 0.3s;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: white;
  padding: 16px 5% 24px;
  box-shadow: var(--shadow);
  z-index: 999;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--cream-dark);
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  transition: 0.2s;
}
.mobile-menu a:hover {
  background: var(--cream);
  color: var(--green);
}
.mobile-menu a.active {
  color: var(--green);
  font-weight: 700;
}
.mobile-menu .mob-cta {
  background: var(--green);
  color: white;
  border-radius: 50px;
  text-align: center;
  margin-top: 8px;
  font-weight: 700;
}
.mobile-menu .mob-cta:hover {
  background: var(--green-mid);
  color: white;
}

/* ================================================================
   04. HERO SECTION
   ================================================================ */
/* ── Splash Screen ── */
#splashScreen {
  position: fixed;
  inset: 0;
  background: var(--green-mid);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splashFade 0.6s ease 1.8s forwards;
}
#splashScreen.hidden { display: none; }
.splash-inner {
  text-align: center;
  animation: splashRise 0.7s ease forwards;
}
.splash-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 0 auto 20px;
  animation: splashPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(201,131,26,0.4));
}
.splash-name {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
}
.splash-tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 28px;
}
.splash-bar {
  width: 160px;
  height: 2px;
  background: rgba(193, 19, 19, 0.12);
  border-radius: 99px;
  margin: 0 auto;
  overflow: hidden;
}
.splash-progress {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 99px;
  animation: splashLoad 2.6s ease forwards;
}
@keyframes splashFade  { to { opacity: 0; pointer-events: none; } }
@keyframes splashRise  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes splashPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
@keyframes splashLoad  { to { width: 100%; } }

/* ── Hero — Centered Premium Layout ── */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 5% 80px;
  background:
    linear-gradient(160deg, rgba(17,22,19,0.72) 0%, rgba(27,67,50,0.55) 60%, rgba(17,22,19,0.78) 100%),
    url("images/Company.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(201,131,26,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Floating accent particles */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles span {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.15;
  animation: particleDrift linear infinite;
}
.hero-particles span:nth-child(1){ width:6px;height:6px; top:20%;left:15%; animation-duration:12s; }
.hero-particles span:nth-child(2){ width:4px;height:4px; top:60%;left:8%;  animation-duration:9s; animation-delay:2s; }
.hero-particles span:nth-child(3){ width:8px;height:8px; top:30%;left:85%; animation-duration:14s; animation-delay:1s; }
.hero-particles span:nth-child(4){ width:3px;height:3px; top:75%;left:78%; animation-duration:10s; animation-delay:3s; }
.hero-particles span:nth-child(5){ width:5px;height:5px; top:50%;left:92%; animation-duration:11s; animation-delay:0.5s; }
.hero-particles span:nth-child(6){ width:4px;height:4px; top:15%;left:55%; animation-duration:13s; animation-delay:4s; }
@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0); opacity:0.15; }
  50%  { opacity:0.3; }
  100% { transform: translateY(-60px) translateX(20px); opacity:0; }
}

.hero-center {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 131, 26, 0.18);
  border: 1px solid rgba(201,131,26,0.35);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}
.hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold-light);
  border-radius: 50%;
  animation: blink 2s infinite;
}
h1.hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
h1.hero-title .gold {
  color: var(--gold-light);
}
.hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  margin: 22px auto 40px;
  max-width: 560px;
}
.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Trust badges row */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 52px;
  padding: 20px 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
  row-gap: 14px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}
.trust-num {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.trust-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.trust-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
}

/* Legacy selectors — keep for any remaining references */


/* ================================================================
   05. SECTIONS & BUTTONS
   ================================================================ */
section {
  padding: 80px 5%;
}
.section-eye {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.section-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  transition: var(--ease);
  border: none;
  cursor: pointer;
}
.btn-green {
  background: var(--green);
  color: white;
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.3);
}
.btn-green:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(27, 67, 50, 0.4);
}
.btn-outline {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.55);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.22);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}
.btn-gold {
  background: #25d366;
  color: var(--dark);
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.3);
}
.btn-gold:hover {
  background: white;
  transform: translateY(-2px);
}
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
  font-size: 14px;
  border: 2px solid var(--green);
  padding: 10px 20px;
  border-radius: 50px;
  transition: 0.2s;
}
.view-all:hover {
  background: var(--green);
  color: white;
}

/* ================================================================
   06. FEATURES STRIP
   ================================================================ */
.features-strip {
  background: var(--green);
  padding: 28px 5%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}
.feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 13px;
  font-weight: 500;
}
.feat-item svg {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ================================================================
   07. PAGE HERO SECTION (Add this to style.css)
   ================================================================ */
.page-hero {
  padding: 100px 5% 50px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  color: white;
}

.page-hero-eye {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 12px;
}

.page-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 40px;
  margin-bottom: 15px;
}

.page-hero p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb a {
  color: white;
  text-decoration: underline;
}

/* ================================================================
   08. PRODUCT CARDS
   ================================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  transition: 0.35s;
  border: 2px solid transparent;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(27, 67, 50, 0.15);
  border-color: var(--green-light);
}

.pc-img {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* IMAGE FIX: mix-blend-mode matches the background and displays the full image without cropping */
.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Changed from cover to contain */
  mix-blend-mode: multiply;
  transition: transform 0.4s;
}
.product-card:hover .product-image {
  transform: scale(1.06);
}

.pc-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--green);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 1;
}
.pc-badge.gold {
  background: var(--gold);
}
.pc-info {
  padding: 16px 20px 20px;
  background: var(--green);
}
.pc-info h3 {
  color: white;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 3px;
}
.pc-info .pc-gsm {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-bottom: 10px;
}

.color-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cdot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.cdot:hover {
  transform: scale(1.35);
  border-color: white;
}
.cdot[title]::after {
  content: attr(title);
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.cdot:hover::after {
  opacity: 1;
}

.color-dots {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.color-dot:hover {
  transform: scale(1.15);
  border-color: #333;
}

.pc-actions {
  display: flex;
  gap: 8px;
}
.btn-enquire {
  flex: 1;
  background: var(--gold);
  color: white;
  border: none;
  padding: 10px 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}
.btn-enquire:hover {
  background: var(--gold-light);
}
.btn-wa-sm {
  width: 38px;
  background: #25d366;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}
.btn-wa-sm:hover {
  background: #1da851;
}
.btn-wa-sm svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* ================================================================
   09.PRODUCTS DETAIL PAGE
   ================================================================ */
/* Detail grid for product detail cards on products page */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(270px, 1fr)
  ); /* Fixed: was minmax(20px) which collapsed columns */
  gap: 42px;
  margin-top: 48px;
}

.detail-card {
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid transparent;
  transition: 0.3s;
}

/* ================================================================
   10.RESPONSIVE PRODUCT PAGE 
   ================================================================ */

/* Tablet view: 2 cards per row */
@media (max-width: 992px) {
  .products-grid,
  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobile view: 1 card per row */
@media (max-width: 600px) {
  .products-grid,
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .detail-card {
    margin-bottom: 20px;
  }

  .dc-img {
    height: 180px; /* Smaller image area on mobile */
  }
}

/* ================================================================
   11. STATS STRIP
   ================================================================ */
.stats-strip {
  background: var(--gold);
  padding: 48px 5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat-num {
  font-family: "Playfair Display", serif;
  font-size: 44px;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  margin-top: 6px;
}

/* ================================================================
   12. WHY US
   ================================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.why-card {
  padding: 32px 24px;
  border-radius: var(--radius);
  background: var(--cream);
  transition: 0.3s;
  text-align: center;
  border: 2px solid transparent;
}
.why-card:hover {
  border-color: var(--green-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.why-icon {
  width: 60px;
  height: 60px;
  background: rgba(27, 67, 50, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.why-icon svg {
  width: 28px;
  height: 28px;
}
.why-card h4 {
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
  font-size: 15px;
}
.why-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ================================================================
   13. GALLERY STRIP
   ================================================================ */
.gallery-strip {
  background: var(--green);
  overflow: hidden;
}
.gallery-strip .section-eye {
  color: var(--gold-light);
}
.gallery-strip .section-title {
  color: white;
}
.gallery-track-wrap {
  margin-top: 40px;
  overflow: hidden;
  position: relative;
}
.gallery-track-wrap::before,
.gallery-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.gallery-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--green), transparent);
}
.gallery-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--green), transparent);
}
.gallery-track {
  display: flex;
  gap: 20px;
  animation: scrollLeft 30s linear infinite;
  width: max-content;
}
.gallery-track:hover {
  animation-play-state: paused;
}
.gallery-item {
  width: 220px;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================================================
   14. FOOTER
   ================================================================ */
footer {
  background: var(--dark);
  color: white;
  padding: 60px 5% 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin: 16px 0 24px;
}
.footer-socials {
  display: flex;
  gap: 10px;
}
.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.social-btn:hover {
  background: var(--green);
  transform: translateY(-2px);
}
.social-btn svg {
  width: 18px;
  height: 18px;
  fill: rgba(255, 255, 255, 0.7);
}
.fc h4 {
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.fc ul li {
  margin-bottom: 10px;
}
.fc ul li a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  transition: 0.2s;
}
.fc ul li a:hover {
  color: var(--gold-light);
  padding-left: 4px;
}
.fc-contact div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
.fc-contact svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.6;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom a {
  color: var(--gold-light);
}

/* ================================================================
   15. WHATSAPP FLOATING BUTTON
   ================================================================ */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.wa-float-btn {
  width: 60px;
  height: 60px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: 0.3s;
  animation: waPulse 2.5s ease-in-out infinite;
}
.wa-float-btn:hover {
  transform: scale(1.12);
  animation: none;
}
.wa-float-btn svg {
  width: 32px;
  height: 32px;
  fill: white;
}
.wa-tooltip {
  background: white;
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  animation: tooltipIn 0.5s 0.8s forwards;
}

/* ================================================================
   16. MODALS (Quick Enquiry & Auto Popup)
   ================================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: white;
  border-radius: var(--radius);
  padding: 36px;
  max-width: 480px;
  width: 90%;
  position: relative;
  animation: modalIn 0.3s ease;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cream);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: 0.2s;
}
.modal-close:hover {
  background: var(--cream-dark);
}
.modal h3 {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.modal-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
.form-grp {
  margin-bottom: 16px;
}
.form-grp label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.form-grp input,
.form-grp select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--cream-dark);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--cream);
  outline: none;
  transition: 0.2s;
}
.form-grp input:focus,
.form-grp select:focus {
  border-color: var(--green);
  background: white;
}
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 8px;
}
.form-submit:hover {
  background: var(--green-mid);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(27, 67, 50, 0.3);
}

/* Auto Popup Specific Premium CSS */
.auto-modal-design {
  background: var(--cream);
  border-top: 6px solid var(--gold);
  box-shadow: var(--shadow-lg);
}
.auto-modal-design h3 {
  color: var(--green);
  font-size: 26px;
}
.btn-premium {
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  box-shadow: 0 6px 20px rgba(27, 67, 50, 0.25);
}
.btn-premium:hover {
  box-shadow: 0 8px 25px rgba(27, 67, 50, 0.4);
  transform: translateY(-2px);
}

/* Auto Peeking Tab */
.peeking-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gold);
  color: white;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 20px 8px;
  border-radius: 8px 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  z-index: 1500;
  transition: 0.4s ease;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
}
.peeking-tab:hover {
  background: var(--gold-light);
  padding-right: 15px;
}
.peeking-tab.hidden {
  transform: translateY(-50%) translateX(100%);
}

/* ================================================================
   17. ANIMATIONS & SCROLL REVEAL
   ================================================================ */
@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-18px) rotate(1deg);
  }
}
@keyframes shadowPulse {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-50%) scaleX(0.7);
    opacity: 0.2;
  }
}
@keyframes leafFloat {
  0% {
    transform: translateY(-10vh) rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg) translateX(60px);
    opacity: 0;
  }
}
@keyframes bgPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes scrollLeft {
  to {
    transform: translateX(-50%);
  }
}
@keyframes waPulse {
  0%,
  100% {
    box-shadow:
      0 8px 24px rgba(37, 211, 102, 0.45),
      0 0 0 0 rgba(37, 211, 102, 0.35);
  }
  70% {
    box-shadow:
      0 8px 24px rgba(37, 211, 102, 0.45),
      0 0 0 16px rgba(37, 211, 102, 0);
  }
}
@keyframes tooltipIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Scroll-reveal: elements start invisible, become visible when scrolled into view */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
} /* Fixed: JS uses .active class */

/* ================================================================
   18. RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .hero-visual {
    display: none;
  }
  .hero-trust {
    padding: 16px 16px;
    gap: 0;
  }
  .trust-item {
    padding: 0 14px;
  }
  .trust-num { font-size: 18px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 600px) {
  .nav-links {
    display: none;
  }
  .nav-wa {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  #hero {
    padding: 100px 5% 60px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 36px 5%;
  }
  .stat-num {
    font-size: 32px;
  }
  .hero-btns {
    flex-direction: column;
  }
  .features-strip {
    gap: 12px;
  }
  .feat-item {
    font-size: 12px;
  }
}

/*================================================================
  19. Gallery Grid Layout
 ===============================================================*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 5%;
}

.g-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1; /* Makes every box a square */
  position: relative;
  cursor: pointer;
  display: block;
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.g-item:hover img {
  transform: scale(1.07); /* Zoom effect on hover */
}

/* Hover overlay */
.g-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 67, 50, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
}

.g-item:hover .g-overlay {
  opacity: 1;
}

.g-overlay span {
  color: white;
  font-size: 30px;
}

/* Lightbox popup */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 12px;
  object-fit: contain;
}

/* Close button for the lightbox overlay */
.lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  color: white;
  font-size: 36px;
  cursor: pointer;
  background: none; /* Reset button styles */
  border: none; /* Reset button styles */
}
/* ============================================================
     GALLERY PAGE EXTRA STYLES
     ============================================================ */

/* ── Filter Buttons ── */
.filter-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.filter-btn {
  padding: 9px 22px;
  border-radius: 50px;
  border: 2px solid var(--cream-dark);
  background: white;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: "Inter", sans-serif;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

/* ── Gallery Section ── */
.gallery-page-section {
  background: var(--cream);
  padding: 60px 0 80px;
}

.gallery-section-head {
  padding: 0 5%;
  margin-bottom: 12px;
}

/* ── Grid ── */
.g-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cream-dark);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

.g-ph svg {
  width: 36px;
  height: 36px;
  opacity: 0.3;
}

.g-ph small {
  font-size: 10px;
  opacity: 0.6;
}

/* ── Count badge ── */
.gallery-count {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
  padding: 0 5%;
}

.gallery-count b {
  color: var(--green);
  font-weight: 700;
}

/* ── CTA Banner ── */

.gallery-cta {
  background: var(--green);
  padding: 60px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.gallery-cta h3 {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.gallery-cta p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
}

.gallery-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* btn-wa for CTA banner */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  transition: 0.3s;
  border: none;
  cursor: pointer;
}
.btn-wa:hover {
  background: #1da851;
  transform: translateY(-1px);
}
.btn-wa svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .gallery-cta {
    text-align: center;
    justify-content: center;
  }
  .gallery-cta-btns {
    justify-content: center;
  }
  .filter-wrap {
    padding: 0 5%;
  }
  .gallery-count {
    padding: 0 5%;
  }
}

/* ============================================================
     ABOUT PAGE STYLING
     ============================================================ */
.about-page-section {
  padding: 80px 5%;
  background: white;
}

.about-container {
  max-width: 900px;
  margin: 0 auto;
}

.about-text h2 {
  font-family: "Playfair Display", serif;
  font-size: 36px;
  margin-bottom: 20px;
  color: var(--dark);
}

.about-text p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 40px;
}

.about-features h3 {
  font-size: 28px;
  margin-bottom: 30px;
  color: var(--green);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.f-item {
  padding: 24px;
  background: var(--cream);
  border-radius: var(--radius);
  border-left: 4px solid var(--green);
}

.f-item strong {
  display: block;
  font-size: 17px;
  margin-bottom: 8px;
  color: var(--dark);
}

.about-footer-note {
  margin-top: 50px;
  padding: 30px;
  background: var(--green);
  color: white;
  border-radius: var(--radius);
  text-align: center;
  font-style: italic;
}

/* ============================================================
   ABOUT PAGE EXTRA STYLES
   (Styles specific to the About Us page)
   ============================================================ */

/* ── About Story Section ── */
.about-section {
  background: white;
  padding: 80px 5%;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 48px;
}

/* Left image box */
.about-img-box {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(27, 67, 50, 0.15);
  aspect-ratio: 4/3;
  background: var(--cream-dark);
  position: relative;
}

/* ── 📸 ABOUT IMAGE ──────────────────────────────────────────*/
.about-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image placeholder */
.about-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  min-height: 320px;
  padding: 40px;
  text-align: center;
  color: white;
}

.about-img-placeholder .big-text {
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 900;
  line-height: 1;
  opacity: 0.25;
  letter-spacing: -2px;
}

.about-img-placeholder .label {
  font-size: 14px;
  opacity: 0.6;
}

/* Green accent line (like brochure) */
.green-line {
  width: 60px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 20px;
}

/* Right text */
.about-text-box h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 20px;
}

.about-text-box p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-text-box strong {
  color: var(--green);
  font-weight: 700;
}

/* ── Why Choose Section ── */
.why-choose-section {
  background: var(--green);
  padding: 80px 5%;
}

.why-choose-section .section-eye {
  color: var(--gold-light);
}
.why-choose-section .section-title {
  color: white;
}
.why-choose-section .section-sub {
  color: rgba(255, 255, 255, 0.7);
}

/* Checklist items (from brochure) */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}

.checklist-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.checklist-icon {
  width: 28px;
  height: 28px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.checklist-icon svg {
  width: 14px;
  height: 14px;
  stroke: white;
  fill: none;
  stroke-width: 2.5;
}

.checklist-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.checklist-item p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

/* Bottom paragraph */
.why-footer-note {
  margin-top: 32px;
  padding: 20px 24px;
  background: rgba(201, 131, 26, 0.15);
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.7;
}

/* ── Values Section ── */
.values-section {
  background: var(--cream);
  padding: 80px 5%;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.value-card {
  padding: 28px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(27, 67, 50, 0.06);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(27, 67, 50, 0.12);
}

.value-card-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.value-card h4 {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}

.value-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── CTA Banner ── */
/* CTA banner at the bottom of the About page */
.about-cta {
  background: var(
    --green
  ); /* Fixed: was a pointless gradient with same color at both stops */
  padding: 60px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.about-cta h3 {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 900;
  color: white;
  margin-bottom: 8px;
}

.about-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

.-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1da851;
  color: var(
    --dark
  ); /* Fixed: var(--black) was undefined, using var(--dark) instead */
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  transition: 0.3s;
  border: none;
  cursor: pointer;
}
.btn-white:hover {
  background: var(--dark);
  color: #1da851;
  transform: translateY(-2px);
}

.btn-wa-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  transition: 0.3s;
}
.btn-wa-outline:hover {
  background: white;
  color: var(--green);
  transform: translateY(-2px);
}
.btn-wa-outline svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .main-cta {
    text-align: center;
    justify-content: center;
  }
  .main-cta-btns {
    justify-content: center;
  }
  .checklist-item {
    padding: 16px 18px;
    gap: 12px;
  }
}

/* ============================================================
   PRODUCTS PAGE EXTRA STYLES
   ============================================================ */

/* ── Product Detail Card ── */
.product-detail-section {
  background: var(--cream);
  padding: 70px 5%;
}

.product-detail-section:nth-child(even) {
  background: white;
}

/* Each product block */
.pd-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--cream-dark);
}

.pd-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Alternate layout — image right pe */
.pd-block.reverse {
  direction: rtl;
}
.pd-block.reverse > * {
  direction: ltr;
}

/* ── Left: Image Box ── */
.pd-img-box {
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-dark);
  position: relative;
  box-shadow: 0 8px 40px rgba(27, 67, 50, 0.1);
}

/* Product image */
.pd-img-box img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  mix-blend-mode: multiply; /* Same as home page */
  transition: transform 0.4s ease;
  padding: 20px;
  background: var(--cream-dark);
}

.pd-img-box:hover img {
  transform: scale(1.04);
}

/* Badge on image */
.pd-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--green);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 1;
}
.pd-badge.gold {
  background: var(--gold);
}

/* Color dots under image */
.pd-color-section {
  padding: 16px 20px 20px;
  background: var(--green);
  border-radius: 0 0 20px 20px;
}

.pd-color-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* Color dots — same style as home page .cdot */
.pd-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Right: Product Info ── */

.pd-info .product-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pd-info h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  color: var(--dark);
  line-height: 1.1;
  margin-bottom: 6px;
}

.pd-info .pd-capacity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(27, 67, 50, 0.08);
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 24px;
}

.pd-info .pd-capacity svg {
  width: 15px;
  height: 15px;
}

/* Spec table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}

.spec-table tr {
  border-bottom: 1px solid var(--cream-dark);
}

.spec-table tr:last-child {
  border-bottom: none;
}

.spec-table td {
  padding: 10px 6px;
  vertical-align: top;
  line-height: 1.55;
}

.spec-table td:first-child {
  font-weight: 700;
  color: var(--green);
  width: 120px;
  font-size: 13px;
  white-space: nowrap;
}

.spec-table td:last-child {
  color: var(--text);
}

/* Application tags */
.app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 24px;
}

.app-tag {
  background: rgba(27, 67, 50, 0.08);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 50px;
}

/* Action buttons */
.pd-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* btn-wa same style */
.btn-wa-product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: white;
  padding: 13px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  transition: 0.3s;
  border: none;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.btn-wa-product:hover {
  background: #1da851;
  transform: translateY(-1px);
}
.btn-wa-product svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* ── Features bar below each product ── */
.pd-features {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--cream-dark);
  border-bottom: 1px solid var(--cream-dark);
}

.pd-feat-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

.pd-feat-item svg {
  width: 15px;
  height: 15px;
  stroke: var(--green);
  fill: none;
  flex-shrink: 0;
}

/* ── Section divider with product number ── */
.pd-section-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}

.pd-section-head .num {
  font-family: "Playfair Display", serif;
  font-size: 72px;
  font-weight: 900;
  color: rgba(27, 67, 50, 0.06);
  line-height: 1;
  flex-shrink: 0;
}

/* ── CTA Banner ── */
.products-cta {
  background: var(--green);
  padding: 60px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.products-cta h3 {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  font-weight: 900;
  color: white;
  margin-bottom: 8px;
}

.products-cta p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
}

.products-cta-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}
.btn-outline-white:hover {
  background: var(--dark);
  color: #1da851;
  transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pd-block {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pd-block.reverse {
    direction: ltr;
  }
  .pd-img-box img {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .products-cta {
    text-align: center;
    justify-content: center;
  }
  .products-cta-btns {
    justify-content: center;
  }
  .pd-actions {
    flex-direction: column;
  }
  .pd-actions .btn,
  .pd-actions .btn-wa-product {
    justify-content: center;
  }
  .pd-section-head .num {
    font-size: 48px;
  }
}

/* ================================================================
   NEW UTILITY CLASSES
   These replace inline style="" attributes removed from HTML files.
   Each class corresponds to a specific inline style that was
   previously hardcoded in the HTML markup.
   ================================================================ */

/* -- Navbar logo image sizing (replaces inline width/height on logo img) -- */
.nav-logo-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* -- Footer branding layout (replaces inline flex styling in footer) -- */
.footer-brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

/* Footer logo image sizing */
.footer-logo-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* Footer brand name text */
.footer-brand-name {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 700;
  color: white;
}

/* Footer brand tagline text */
.footer-brand-tagline {
  font-size: 11px;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* -- Section with white background (replaces style="background:white") -- */
.section-white {
  background: white;
}

/* -- Products preview header on index.html (replaces inline flex layout) -- */
.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 16px;
}

/* -- Breadcrumb active item (replaces inline color/weight on breadcrumb span) -- */
.breadcrumb-active {
  color: var(--gold-light);
  font-weight: 600;
}

/* -- Quick jump navigation bar on products page -- */
.quick-jump-bar {
  background: white;
  padding: 20px 5%;
  border-bottom: 1px solid var(--cream-dark);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Label text in the quick jump bar */
.quick-jump-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* Individual quick jump link buttons */
.quick-jump-link {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  padding: 6px 16px;
  border: 1.5px solid var(--green);
  border-radius: 50px;
  transition: 0.2s;
}

.quick-jump-link:hover {
  background: var(--green);
  color: white;
}

/* -- About page buttons wrapper (replaces inline flex on about page) -- */
.about-btns-wrap {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* About page placeholder enterprise subtitle */
.about-placeholder-title {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 700;
  opacity: 0.5;
}

/* -- Text alignment utility -- */
.text-center {
  text-align: center;
}

/* -- Gallery strip "View Full Gallery" link wrapper -- */
.gallery-view-all {
  text-align: center;
  margin-top: 36px;
}

/* -- Transition delay utilities (replaces inline transition-delay styles) -- */
.delay-1 {
  transition-delay: 0.1s;
}
.delay-2 {
  transition-delay: 0.2s;
}
.delay-3 {
  transition-delay: 0.3s;
}
.delay-4 {
  transition-delay: 0.4s;
}
.delay-5 {
  transition-delay: 0.5s;
}

/* Section subtitle that needs centering */
.section-sub-center {
  margin: 0 auto;
}

/* Product card image background colors */
.pc-img-green {
  background: #eaf5f0;
}
.pc-img-peach {
  background: #fff3ee;
}
.pc-img-blue {
  background: #f0f7ff;
}
.pc-img-gold {
  background: #fff8ee;
}

/* Gallery item image styling (for homepage gallery strip) */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* ================================================================
   CONTACT PAGE
   Styles for the Contact Us page layout, info cards, and form.
   ================================================================ */

/* -- Contact section layout -- */
.contact-section {
  background: white;
  padding: 80px 5%;
}

/* Two-column grid: info on left, form on right */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* -- Contact info card (left side) -- */
.contact-info-card {
  background: var(--cream);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(27, 67, 50, 0.08);
}

.contact-info-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}

.contact-info-card > p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Individual contact detail row (icon + text) */
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}

/* Circular icon container for contact details */
.contact-detail-icon {
  width: 44px;
  height: 44px;
  background: rgba(27, 67, 50, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-detail-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--green);
  fill: none;
  stroke-width: 2;
}

.contact-detail h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.contact-detail p,
.contact-detail a {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.contact-detail a:hover {
  color: var(--green);
}

/* -- Contact form card (right side, green background) -- */
.contact-form-card {
  background: var(--green);
  padding: 40px;
  border-radius: var(--radius);
  color: white;
}

.contact-form-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.contact-form-card > p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
}

/* Form inputs on green background need lighter colors */
.contact-form .form-grp label {
  color: rgba(255, 255, 255, 0.8);
}

.contact-form .form-grp input,
.contact-form .form-grp select,
.contact-form .form-grp textarea {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.contact-form .form-grp input::placeholder,
.contact-form .form-grp textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form .form-grp input:focus,
.contact-form .form-grp select:focus,
.contact-form .form-grp textarea:focus {
  border-color: var(--gold-light);
  background: rgba(255, 255, 255, 0.15);
}

/* Textarea styling */
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 14px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transition: 0.2s;
  font-family: "Inter", sans-serif;
  resize: vertical;
  min-height: 100px;
}

/* Submit button uses gold color on contact form */
.contact-form .form-submit {
  background: var(--gold);
}

.contact-form .form-submit:hover {
  background: var(--gold-light);
}

/* -- Social links in contact info card -- */
.contact-socials {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cream-dark);
}

/* -- Contact page responsive -- */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* -- Additional utilities -- */
.text-gold {
  color: var(--gold-light);
}
.m-b-0 {
  margin-bottom: 0;
}
.pad-80-5 {
  padding: 80px 5%;
}
.footer-desc {
  margin-top: 20px;
  font-size: 14.5px;
  opacity: 0.8;
}
.btn-full-width {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}


/* ================================================================
   ✦ 20. PREMIUM DESIGN LAYER — "Emerald & Gold Atelier"
   ----------------------------------------------------------------
   Ye layer poori site ka visual refresh hai. Sab kuch is file ke
   end me hai, isliye upar ke rules ko cleanly override karta hai.
   Content / markup / JS behaviour same rehta hai.
   ================================================================ */

/* ---------- 20.1 Design tokens ---------- */
:root {
  /* Core palette — thoda deeper, richer green + warmer gold */
  --green-900: #082016;
  --green-800: #0e2c20;
  --green: #14402e;
  --green-mid: #2d6a4f;
  --green-light: #58c08c;
  --gold-deep: #a06712;
  --gold: #c58419;
  --gold-light: #eab54c;
  --cream: #f8f4ed;
  --cream-dark: #ece4d7;
  --sand: #f2ebe0;
  --white: #ffffff;
  --dark: #0c1310;
  --ink: #101a15;
  --text: #26332a;
  --muted: #6c7d70;

  /* Lines & surfaces */
  --line: rgba(20, 64, 46, 0.1);
  --line-strong: rgba(20, 64, 46, 0.18);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-dark: rgba(255, 255, 255, 0.07);

  /* Layered elevation */
  --e1: 0 1px 2px rgba(12, 32, 24, 0.05), 0 2px 8px rgba(12, 32, 24, 0.04);
  --e2: 0 2px 4px rgba(12, 32, 24, 0.05), 0 8px 24px rgba(12, 32, 24, 0.07);
  --e3: 0 4px 8px rgba(12, 32, 24, 0.06), 0 18px 44px rgba(12, 32, 24, 0.1);
  --e4: 0 8px 16px rgba(12, 32, 24, 0.08), 0 34px 80px rgba(12, 32, 24, 0.16);
  --glow-gold: 0 12px 40px rgba(197, 132, 25, 0.32);
  --glow-green: 0 12px 40px rgba(20, 64, 46, 0.3);
  --shadow: var(--e2);
  --shadow-lg: var(--e4);

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 34px;

  /* Motion */
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout rhythm */
  --pad-x: max(5vw, calc((100% - 1300px) / 2));
  --gutter: clamp(16px, 2.2vw, 28px);
}

/* ---------- 20.2 Base refinements ---------- */
body {
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* Ultra-fine paper grain — sirf texture ke liye, barely visible */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--gold);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--cream-dark);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--green-mid), var(--green));
  border-radius: 99px;
  border: 3px solid var(--cream-dark);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}

/* ---------- 20.3 Scroll progress + back to top ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--green-mid), var(--gold), var(--gold-light));
  z-index: 1200;
  pointer-events: none;
}

.to-top {
  position: fixed;
  left: 28px;
  bottom: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--glass);
  backdrop-filter: blur(14px);
  color: var(--green);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 998;
  box-shadow: var(--e2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition: 0.4s var(--out);
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--glow-green);
}
.to-top svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
}

/* ---------- 20.4 Navbar — floating glass bar ---------- */
nav {
  height: 78px;
  padding: 0 var(--pad-x);
  background: rgba(252, 250, 246, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition:
    height 0.4s var(--out),
    background 0.4s var(--out),
    box-shadow 0.4s var(--out),
    border-color 0.4s var(--out);
}
nav.scrolled {
  height: 66px;
  background: rgba(252, 250, 246, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px -18px rgba(12, 32, 24, 0.35);
}

.nav-logo-img {
  width: 52px;
  height: 52px;
  transition: transform 0.5s var(--spring);
}
.nav-logo:hover .nav-logo-img {
  transform: rotate(-6deg) scale(1.06);
}
.nav-logo-text .brand {
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--green);
}
.nav-logo-text .tagline {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.nav-links {
  gap: 4px;
  align-items: center;
}
.nav-links a {
  position: relative;
  padding: 9px 15px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.35s var(--out);
}
.nav-links a:hover {
  color: var(--green);
  background: rgba(20, 64, 46, 0.05);
}
.nav-links a:hover::after {
  width: 18px;
}
.nav-links a.active {
  color: var(--green);
  font-weight: 700;
}
.nav-links a.active::after {
  width: 20px;
}

.nav-links .nav-cta {
  margin-left: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(20, 64, 46, 0.6);
}
.nav-links .nav-cta::after {
  display: none;
}
.nav-links .nav-cta:hover {
  background: linear-gradient(135deg, var(--green), var(--green-800));
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(20, 64, 46, 0.7);
}

.nav-wa {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, #2ee06f, #14a94b);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -8px rgba(37, 211, 102, 0.9);
  transition: 0.35s var(--out);
}
.nav-wa:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 26px -8px rgba(37, 211, 102, 0.95);
}
.nav-wa svg {
  width: 21px;
  height: 21px;
  fill: #fff;
}

.hamburger span {
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transition: 0.35s var(--out);
}

/* ---------- 20.5 Mobile menu — full sheet ---------- */
.mobile-menu {
  background: linear-gradient(165deg, var(--green) 0%, var(--green-900) 100%);
  padding: 22px 6% 34px;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.mobile-menu a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  font-weight: 500;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-14px);
  opacity: 0;
  transition: 0.45s var(--out);
}
.mobile-menu.open a {
  transform: none;
  opacity: 1;
}
.mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open a:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--gold-light);
  padding-left: 12px;
}
.mobile-menu .mob-cta {
  margin-top: 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff;
  text-align: center;
  border-radius: 50px;
  border-bottom: none;
  font-weight: 700;
  padding: 14px;
}

/* ---------- 20.6 Splash — faster, cleaner ---------- */
#splashScreen {
  background: radial-gradient(120% 100% at 50% 0%, var(--green-mid) 0%, var(--green) 45%, var(--green-900) 100%);
  animation: splashFade 0.55s var(--out) 1.5s forwards;
}
.splash-logo {
  width: 104px;
  height: 104px;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 34px rgba(234, 181, 76, 0.45));
}
.splash-name {
  font-size: 34px;
  letter-spacing: 0.02em;
}
.splash-bar {
  width: 150px;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.splash-progress {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  animation-duration: 1.9s;
}

/* ---------- 20.7 Hero — cinematic ---------- */
#hero {
  min-height: 100svh;
  padding: clamp(120px, 15vh, 180px) var(--pad-x) clamp(70px, 10vh, 110px);
  background: var(--green-900);
  isolation: isolate;
}
#hero::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: 0;
  background: url("images/Company.webp") center/cover no-repeat;
  filter: saturate(0.85) contrast(1.06);
  animation: kenBurns 30s ease-in-out infinite alternate;
}
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(197, 132, 25, 0.2) 0%, transparent 68%),
    linear-gradient(180deg, rgba(8, 32, 22, 0.86) 0%, rgba(14, 44, 32, 0.6) 40%, rgba(8, 32, 22, 0.94) 100%);
}
@keyframes kenBurns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

.hero-overlay {
  z-index: 1;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(88, 192, 140, 0.16), transparent 70%),
    radial-gradient(42% 42% at 84% 74%, rgba(234, 181, 76, 0.14), transparent 70%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
.hero-particles {
  z-index: 1;
}
.hero-particles span {
  background: var(--gold-light);
  box-shadow: 0 0 12px rgba(234, 181, 76, 0.7);
  opacity: 0.2;
}

.hero-center {
  max-width: 860px;
  z-index: 2;
}
/* Hero apna khud ka entrance chalata hai, isliye reveal ko neutralise */
#hero .hero-center.reveal {
  opacity: 1;
  transform: none;
}
#hero .hero-center > * {
  opacity: 0;
  transform: translateY(26px);
}
body.loaded #hero .hero-center > * {
  animation: heroIn 0.95s var(--out) forwards;
}
body.loaded #hero .hero-eyebrow { animation-delay: 0.05s; }
body.loaded #hero .hero-title   { animation-delay: 0.16s; }
body.loaded #hero .hero-sub     { animation-delay: 0.28s; }
body.loaded #hero .hero-btns    { animation-delay: 0.4s; }
body.loaded #hero .hero-trust   { animation-delay: 0.52s; }
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

.hero-eyebrow {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(234, 181, 76, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 30px -12px rgba(0, 0, 0, 0.7);
  color: #f3d79a;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  padding: 9px 22px;
  margin-bottom: 26px;
}

h1.hero-title {
  font-size: clamp(44px, 6.6vw, 92px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
h1.hero-title .gold {
  background: linear-gradient(100deg, #d99a2c 0%, #fff2cd 26%, #eab54c 48%, #c58419 74%, #ffe9b3 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: goldShine 7s linear infinite;
}
@keyframes goldShine {
  to { background-position: -250% 0; }
}

.hero-sub {
  font-size: clamp(15px, 1.35vw, 18px);
  color: rgba(255, 255, 255, 0.76);
  max-width: 600px;
  margin: 24px auto 42px;
}

/* Trust bar — proper glass panel */
.hero-trust {
  margin-top: 56px;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.trust-item {
  padding: 0 clamp(14px, 3vw, 38px);
  transition: transform 0.35s var(--out);
}
.trust-item:hover {
  transform: translateY(-3px);
}
.trust-num {
  font-size: clamp(20px, 2.2vw, 28px);
  background: linear-gradient(180deg, #ffe6ad, var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.trust-lbl {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.1em;
}
.trust-divider {
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

/* Scroll cue */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: heroIn 1s var(--out) 1.1s forwards;
}
.hero-scroll i {
  display: block;
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  position: relative;
}
.hero-scroll i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold-light);
  animation: scrollDot 1.9s var(--out) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ---------- 20.8 Sections & headings ---------- */
section {
  padding: clamp(64px, 7.5vw, 118px) var(--pad-x);
}
.pad-80-5 {
  padding: clamp(64px, 7.5vw, 118px) var(--pad-x);
}

.section-eye {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 14px;
}
.section-eye::before {
  content: "";
  width: 26px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-title {
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--ink);
  margin-bottom: 18px;
}
.section-sub {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--muted);
  max-width: 560px;
}

/* ---------- 20.9 Buttons — gradient + sheen ---------- */
.btn,
.btn-wa,
.btn-white,
.btn-wa-outline,
.btn-wa-product,
.btn-outline-white,
.view-all,
.form-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  letter-spacing: -0.005em;
  transition: transform 0.35s var(--out), box-shadow 0.35s var(--out),
    background 0.35s var(--out), color 0.35s var(--out), border-color 0.35s var(--out);
}
.btn::before,
.btn-wa::before,
.btn-wa-product::before,
.form-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.32) 46%, transparent 72%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--out);
}
.btn:hover::before,
.btn-wa:hover::before,
.btn-wa-product:hover::before,
.form-submit:hover::before {
  transform: translateX(130%);
}

.btn {
  padding: 15px 30px;
  font-size: 14.5px;
  font-weight: 600;
}
.btn-green {
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green) 60%, var(--green-800) 100%);
  box-shadow: 0 14px 34px -14px rgba(20, 64, 46, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -14px rgba(20, 64, 46, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}
/* btn-gold ab sach me gold hai (pehle green tha) */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(197, 132, 25, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #f6c86a 0%, var(--gold-light) 55%, var(--gold) 100%);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--glow-gold);
}
.view-all {
  border: 1.5px solid var(--line-strong);
  color: var(--green);
  padding: 11px 22px;
  background: #fff;
  box-shadow: var(--e1);
}
.view-all:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--glow-green);
}
.btn-wa,
.btn-wa-product {
  background: linear-gradient(135deg, #2ee06f, #17a94d);
  box-shadow: 0 14px 34px -14px rgba(37, 211, 102, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.btn-wa:hover,
.btn-wa-product:hover {
  background: linear-gradient(135deg, #38e878, #1bbb56);
  transform: translateY(-3px);
}
.btn-outline-white {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-outline-white:hover {
  background: #fff;
  color: var(--green);
  border-color: #fff;
  transform: translateY(-3px);
}
/* btn-white ab actually white hai */
.btn-white {
  background: #fff;
  color: var(--green);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
}
.btn-white:hover {
  background: var(--cream);
  color: var(--green-800);
  transform: translateY(-3px);
}

/* ---------- 20.10 Features strip — infinite marquee ---------- */
.features-strip {
  background: linear-gradient(100deg, var(--green-800), var(--green) 45%, var(--green-mid) 100%);
  padding: 0;
  display: block;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.features-strip::before,
.features-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.features-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--green-800), transparent);
}
.features-strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--green-mid), transparent);
}
.feat-marquee {
  display: flex;
  width: max-content;
  animation: scrollLeft 42s linear infinite;
}
.features-strip:hover .feat-marquee {
  animation-play-state: paused;
}
.feat-group {
  display: flex;
  align-items: center;
}
.feat-item {
  padding: 22px clamp(20px, 3vw, 40px);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  position: relative;
  transition: color var(--t-fast);
}
.feat-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.16);
}
.feat-item:hover {
  color: #fff;
}
.feat-item svg {
  width: 22px;
  height: 22px;
  stroke: var(--gold-light);
  opacity: 1;
  transition: transform 0.4s var(--spring);
}
.feat-item:hover svg {
  transform: scale(1.18) rotate(-6deg);
}

/* ---------- 20.11 Page hero banner ---------- */
.page-hero {
  padding: clamp(120px, 14vh, 160px) var(--pad-x) clamp(56px, 7vw, 84px);
  background:
    radial-gradient(60% 90% at 20% 0%, rgba(88, 192, 140, 0.22), transparent 60%),
    radial-gradient(55% 80% at 85% 100%, rgba(197, 132, 25, 0.22), transparent 60%),
    linear-gradient(140deg, var(--green-800) 0%, var(--green) 50%, var(--green-900) 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
}
.page-hero > * {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  font-size: clamp(34px, 5.2vw, 62px);
  letter-spacing: -0.03em;
  line-height: 1.03;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.page-hero-eye {
  letter-spacing: 0.2em;
}
.breadcrumb {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--t-fast);
}
.breadcrumb a:hover {
  color: #fff;
}

/* ---------- 20.12 Product cards ---------- */
.products-header {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gutter);
}

.product-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1);
  transition: transform 0.45s var(--out), box-shadow 0.45s var(--out), border-color 0.45s var(--out);
}
/* cursor-following spotlight */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--out);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(197, 132, 25, 0.16), transparent 65%);
}
.product-card:hover::after {
  opacity: 1;
}
.product-card:hover {
  transform: translateY(-10px);
  border-color: rgba(197, 132, 25, 0.35);
  box-shadow: var(--e4);
}

.pc-img {
  height: 250px;
  padding: 26px;
  background:
    radial-gradient(120% 90% at 50% 8%, #ffffff 0%, var(--sand) 100%);
  border-bottom: 1px solid var(--line);
}
.pc-img::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 55%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20, 64, 46, 0.22), transparent 70%);
  filter: blur(6px);
  transition: 0.5s var(--out);
}
.product-card:hover .pc-img::before {
  width: 44%;
  opacity: 0.65;
}
.product-image {
  transition: transform 0.6s var(--out), opacity 0.3s ease;
  filter: drop-shadow(0 12px 22px rgba(20, 64, 46, 0.12));
}
.product-card:hover .product-image {
  transform: translateY(-8px) scale(1.07);
}
.product-image.swapping {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}

.pc-badge {
  top: 14px;
  right: 14px;
  padding: 6px 13px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  box-shadow: 0 8px 18px -8px rgba(20, 64, 46, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.pc-badge.gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 8px 18px -8px rgba(197, 132, 25, 0.9);
}

.pc-info {
  padding: 20px 22px 22px;
  background: linear-gradient(165deg, var(--green-mid) -30%, var(--green) 45%, var(--green-800) 100%);
  position: relative;
}
.pc-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 181, 76, 0.55), transparent);
}
.pc-info h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.pc-info .pc-gsm {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

/* Color dots */
.color-dots {
  gap: 9px;
  margin: 14px 0 16px;
}
.color-dot {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  transition: transform 0.3s var(--spring), border-color 0.25s, box-shadow 0.25s;
}
.color-dot:hover {
  transform: scale(1.3) translateY(-2px);
  border-color: #fff;
}
.color-dot.is-active {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px rgba(234, 181, 76, 0.35), 0 3px 8px rgba(0, 0, 0, 0.3);
  transform: scale(1.14);
}

.pc-actions {
  gap: 9px;
}
.btn-enquire {
  padding: 12px 0;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 10px 22px -12px rgba(197, 132, 25, 1);
  transition: 0.3s var(--out);
}
.btn-enquire:hover {
  background: linear-gradient(135deg, #f7cd75, var(--gold-light));
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(197, 132, 25, 1);
}
.btn-wa-sm {
  width: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2ee06f, #17a94d);
  transition: 0.3s var(--out);
}
.btn-wa-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -10px rgba(37, 211, 102, 1);
}

/* ---------- 20.13 Stats strip ---------- */
.stats-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 78px) var(--pad-x);
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    linear-gradient(120deg, var(--gold-deep) 0%, var(--gold) 48%, var(--gold-light) 100%);
  gap: 0;
}
.stats-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}
.stats-strip > * {
  position: relative;
  z-index: 1;
  padding: 8px clamp(8px, 2vw, 24px);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.stats-strip > *:last-child {
  border-right: none;
}
.stat-num {
  font-size: clamp(34px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  text-shadow: 0 10px 26px rgba(120, 76, 8, 0.35);
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 10px;
}

/* ---------- 20.14 Why / value cards ---------- */
.why-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gutter);
  margin-top: clamp(32px, 4vw, 56px);
}
.why-card {
  position: relative;
  padding: 34px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1);
  overflow: hidden;
  transition: transform 0.4s var(--out), box-shadow 0.4s var(--out), border-color 0.4s var(--out);
}
.why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-light), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--out);
}
.why-card:hover::before {
  transform: scaleX(1);
}
.why-card:hover {
  transform: translateY(-8px);
  border-color: rgba(88, 192, 140, 0.45);
  box-shadow: var(--e3);
}
.why-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(88, 192, 140, 0.16), rgba(197, 132, 25, 0.12));
  border: 1px solid var(--line);
  margin-bottom: 20px;
  transition: transform 0.5s var(--spring);
}
.why-card:hover .why-icon {
  transform: translateY(-3px) rotate(-7deg) scale(1.06);
}
.why-icon svg {
  width: 26px;
  height: 26px;
}
.why-card h4 {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.why-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
}

.values-grid {
  gap: var(--gutter);
}
.value-card {
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1);
  transition: transform 0.4s var(--out), box-shadow 0.4s var(--out), border-color 0.4s var(--out);
}
.value-card:hover {
  transform: translateY(-8px);
  border-color: rgba(197, 132, 25, 0.35);
  box-shadow: var(--e3);
}
.value-card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 26px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(88, 192, 140, 0.16), rgba(197, 132, 25, 0.12));
  margin-bottom: 16px;
  transition: transform 0.5s var(--spring);
}
.value-card:hover .value-card-icon {
  transform: rotate(-8deg) scale(1.08);
}
.value-card h4 {
  font-size: 19px;
  margin-bottom: 10px;
}
.value-card p {
  font-size: 13.5px;
  line-height: 1.65;
}

/* ---------- 20.15 Gallery strip (home) ---------- */
.gallery-strip {
  position: relative;
  background:
    radial-gradient(60% 60% at 80% 10%, rgba(88, 192, 140, 0.14), transparent 60%),
    linear-gradient(160deg, var(--green-800) 0%, var(--green) 55%, var(--green-900) 100%);
}
.gallery-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent);
  pointer-events: none;
}
.gallery-strip > * {
  position: relative;
  z-index: 1;
}
.gallery-strip .section-title {
  color: #fff;
}
.gallery-track-wrap {
  margin-top: 44px;
  margin-inline: calc(var(--pad-x) * -1);
}
.gallery-track-wrap::before {
  background: linear-gradient(to right, var(--green-800), transparent);
}
.gallery-track-wrap::after {
  background: linear-gradient(to left, var(--green-900), transparent);
}
.gallery-track {
  gap: 18px;
  animation-duration: 46s;
  padding-inline: 18px;
}
.gallery-item {
  width: 230px;
  height: 230px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff, var(--sand));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  padding: 10px;
  transition: transform 0.5s var(--out), box-shadow 0.5s var(--out);
}
.gallery-item:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.95);
}
.gallery-item img {
  object-fit: contain;
  border-radius: 14px;
  transition: transform 0.6s var(--out);
}
.gallery-item:hover img {
  transform: scale(1.06);
}
.gallery-view-all {
  margin-top: 44px;
}

/* ---------- 20.16 Gallery page ---------- */
.gallery-page-section {
  background: linear-gradient(180deg, var(--cream) 0%, #fbf8f3 100%);
  padding: clamp(48px, 6vw, 76px) 0 clamp(64px, 8vw, 100px);
}
.gallery-section-head,
.gallery-count,
.gallery-grid {
  padding-inline: var(--pad-x);
}
.filter-wrap {
  gap: 9px;
  margin-bottom: 30px;
}
.filter-btn {
  padding: 10px 22px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted);
  box-shadow: var(--e1);
  transition: 0.3s var(--out);
}
.filter-btn:hover {
  color: var(--green);
  border-color: var(--green-light);
  transform: translateY(-2px);
  background: #fff;
}
.filter-btn.active {
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(20, 64, 46, 1);
}
.gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gutter);
}
.g-item {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #fff, var(--sand));
  border: 1px solid var(--line);
  box-shadow: var(--e1);
  transition: transform 0.45s var(--out), box-shadow 0.45s var(--out), border-color 0.45s var(--out);
}
.g-item:hover {
  transform: translateY(-8px);
  border-color: rgba(197, 132, 25, 0.4);
  box-shadow: var(--e3);
}
.g-item img {
  object-fit: contain;
  padding: 14px;
}
.g-overlay {
  background: linear-gradient(180deg, rgba(20, 64, 46, 0.08), rgba(8, 32, 22, 0.7));
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px;
}
.g-overlay span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  transform: translateY(10px);
  transition: transform 0.45s var(--out);
}
.g-item:hover .g-overlay span {
  transform: none;
}
.gallery-count b {
  color: var(--gold);
}
.lightbox {
  background: rgba(6, 14, 10, 0.94);
  backdrop-filter: blur(10px);
}
.lightbox img {
  border-radius: 18px;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 1);
  animation: lbIn 0.45s var(--out);
}
@keyframes lbIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.lb-close {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.3s var(--out);
}
.lb-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(90deg);
}

/* ---------- 20.17 CTA banners ---------- */
.products-cta,
.about-cta,
.gallery-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 82px) var(--pad-x);
  background:
    radial-gradient(50% 120% at 12% 0%, rgba(88, 192, 140, 0.2), transparent 60%),
    radial-gradient(45% 110% at 88% 100%, rgba(197, 132, 25, 0.24), transparent 60%),
    linear-gradient(130deg, var(--green-800), var(--green) 55%, var(--green-900));
}
.products-cta::before,
.about-cta::before,
.gallery-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
  pointer-events: none;
}
.products-cta > *,
.about-cta > *,
.gallery-cta > * {
  position: relative;
  z-index: 1;
}
.products-cta h3,
.about-cta h3,
.gallery-cta h3 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* ---------- 20.18 About page ---------- */
.about-section {
  background: linear-gradient(180deg, #fff, #fdfbf7);
  padding: clamp(64px, 7.5vw, 118px) var(--pad-x);
}
.about-grid {
  gap: clamp(36px, 5vw, 72px);
}
.about-img-box {
  border-radius: var(--radius-xl);
  box-shadow: var(--e4);
  border: 1px solid var(--line);
}
.about-img-placeholder {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(88, 192, 140, 0.25), transparent 60%),
    linear-gradient(145deg, var(--green-800), var(--green) 60%, var(--green-900));
  gap: 10px;
  padding: 30px;
}
.about-img-placeholder .big-text {
  opacity: 0.16;
  letter-spacing: -0.04em;
}
.about-img-placeholder .label {
  width: 100%;
}
.about-img-placeholder .label img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.95);
}
.green-line {
  width: 54px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.about-text-box h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  letter-spacing: -0.028em;
}
.about-text-box p {
  font-size: 15.5px;
  line-height: 1.85;
}

.why-choose-section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7.5vw, 118px) var(--pad-x);
  background:
    radial-gradient(55% 60% at 85% 8%, rgba(197, 132, 25, 0.18), transparent 60%),
    linear-gradient(160deg, var(--green-800), var(--green) 55%, var(--green-900));
}
.checklist {
  gap: 14px;
  margin-top: 44px;
}
.checklist-item {
  padding: 22px 26px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  transition: 0.4s var(--out);
}
.checklist-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(6px);
  border-color: rgba(234, 181, 76, 0.35);
}
.checklist-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 8px 18px -8px rgba(197, 132, 25, 1);
}
.checklist-item h4 {
  font-size: 16px;
  margin-bottom: 6px;
}
.why-footer-note {
  margin-top: 28px;
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
  background: rgba(197, 132, 25, 0.12);
}
.values-section {
  background: linear-gradient(180deg, var(--cream), #fbf8f2);
  padding: clamp(64px, 7.5vw, 118px) var(--pad-x);
}
.f-item {
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--e1);
}

/* ---------- 20.19 Products detail page ---------- */
.quick-jump-bar {
  position: sticky;
  top: 66px;
  z-index: 900;
  padding: 16px var(--pad-x);
  background: rgba(252, 250, 246, 0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.quick-jump-link {
  border: 1px solid var(--line-strong);
  padding: 7px 18px;
  background: #fff;
  box-shadow: var(--e1);
  transition: 0.3s var(--out);
}
.quick-jump-link:hover {
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(20, 64, 46, 1);
}

.product-detail-section {
  background: linear-gradient(180deg, var(--cream), #fbf8f3);
  padding: clamp(56px, 6.5vw, 96px) var(--pad-x);
  scroll-margin-top: 120px;
}
.product-detail-section:nth-child(even) {
  background: linear-gradient(180deg, #fff, #fdfbf7);
}
.pd-block {
  gap: clamp(32px, 4.5vw, 64px);
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
.pd-img-box {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: var(--e3);
  background: linear-gradient(160deg, #fff, var(--sand));
  transition: transform 0.5s var(--out), box-shadow 0.5s var(--out);
}
.pd-img-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--e4);
}
.pd-img-box img {
  background: transparent;
  padding: 30px;
  filter: drop-shadow(0 16px 30px rgba(20, 64, 46, 0.14));
  transition: transform 0.6s var(--out), opacity 0.3s ease;
}
.pd-img-box:hover img {
  transform: translateY(-6px) scale(1.05);
}
.pd-badge {
  top: 18px;
  left: 18px;
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  box-shadow: 0 10px 20px -10px rgba(20, 64, 46, 1);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.pd-badge.gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}
.pd-color-section {
  padding: 18px 22px 22px;
  background: linear-gradient(165deg, var(--green-mid) -30%, var(--green) 45%, var(--green-800) 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.pd-info h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.028em;
}
.pd-info .product-number {
  letter-spacing: 0.18em;
}
.pd-info .pd-capacity {
  background: linear-gradient(135deg, rgba(88, 192, 140, 0.16), rgba(197, 132, 25, 0.14));
  border: 1px solid var(--line);
  padding: 8px 18px;
}
.spec-table tr {
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.spec-table tr:hover {
  background: rgba(20, 64, 46, 0.03);
}
.spec-table td {
  padding: 13px 10px;
}
.app-tag {
  background: #fff;
  border: 1px solid var(--line-strong);
  padding: 7px 15px;
  box-shadow: var(--e1);
  transition: 0.25s var(--out);
}
.app-tag:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-2px);
}
.pd-features {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.pd-feat-item svg {
  stroke: var(--gold);
}
.pd-section-head .num {
  font-size: clamp(52px, 7vw, 96px);
  background: linear-gradient(180deg, rgba(20, 64, 46, 0.14), rgba(20, 64, 46, 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- 20.20 Contact page ---------- */
.contact-section {
  background: linear-gradient(180deg, #fff, #fdfbf7);
  padding: clamp(64px, 7.5vw, 118px) var(--pad-x);
}
.contact-grid {
  gap: clamp(28px, 3.5vw, 52px);
}
.contact-info-card {
  background: linear-gradient(170deg, #fff, var(--cream));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 44px);
  box-shadow: var(--e2);
}
.contact-detail {
  padding: 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), transform 0.3s var(--out);
}
.contact-detail:hover {
  background: rgba(20, 64, 46, 0.04);
  transform: translateX(4px);
}
.contact-detail-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(88, 192, 140, 0.18), rgba(197, 132, 25, 0.14));
  border: 1px solid var(--line);
}
.contact-form-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(60% 60% at 90% 0%, rgba(197, 132, 25, 0.22), transparent 60%),
    linear-gradient(160deg, var(--green-800), var(--green) 55%, var(--green-900));
  box-shadow: var(--e4);
}
.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.contact-form-card > * {
  position: relative;
  z-index: 1;
}
.contact-form-card h3 {
  font-size: clamp(22px, 2.4vw, 30px);
}
.contact-socials {
  border-top: 1px solid var(--line);
}

/* ---------- 20.21 Forms ---------- */
.form-grp input,
.form-grp select,
.contact-form textarea {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--cream-dark);
  font-size: 14.5px;
  transition: 0.28s var(--out);
}
.form-grp input:focus,
.form-grp select:focus {
  border-color: var(--green-light);
  box-shadow: 0 0 0 4px rgba(88, 192, 140, 0.16);
  background: #fff;
}
.contact-form .form-grp input:focus,
.contact-form .form-grp select:focus,
.contact-form textarea:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 4px rgba(234, 181, 76, 0.18);
}
.form-submit {
  padding: 15px;
  background: linear-gradient(135deg, var(--green-mid), var(--green) 60%, var(--green-800));
  box-shadow: 0 14px 30px -14px rgba(20, 64, 46, 0.9);
}
.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(20, 64, 46, 1);
}
.contact-form .form-submit {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 14px 30px -14px rgba(197, 132, 25, 1);
}
.contact-form .form-submit:hover {
  background: linear-gradient(135deg, #f7cd75, var(--gold-light) 60%, var(--gold));
}

/* ---------- 20.22 Modals ---------- */
.modal-overlay {
  background: rgba(6, 14, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}
.modal {
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--e4);
  border: 1px solid var(--line);
  animation: modalIn 0.45s var(--spring);
  max-height: 92vh;
  overflow-y: auto;
}
.modal h3 {
  font-size: clamp(21px, 2.2vw, 27px);
  letter-spacing: -0.02em;
}
.modal-close {
  width: 36px;
  height: 36px;
  top: 16px;
  right: 16px;
  border: 1px solid var(--line);
  transition: 0.3s var(--out);
}
.modal-close:hover {
  background: var(--green);
  color: #fff;
  transform: rotate(90deg);
}
.auto-modal-design {
  border-top: none;
  background: linear-gradient(175deg, #fff, var(--cream));
  position: relative;
  overflow: hidden;
}
.auto-modal-design::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--green-light), var(--gold), var(--gold-light));
}
.btn-premium {
  background: linear-gradient(135deg, var(--green-mid), var(--green) 60%, var(--green-800));
}

/* ---------- 20.23 Floating WhatsApp + peeking tab ---------- */
.wa-float-btn {
  width: 58px;
  height: 58px;
  background: linear-gradient(140deg, #2ee06f, #14a94b);
  box-shadow: 0 14px 34px -10px rgba(37, 211, 102, 0.85);
}
.wa-tooltip {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--e2);
  font-size: 12.5px;
}
.peeking-tab {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 12px 0 0 12px;
  padding: 22px 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: -8px 0 26px -10px rgba(0, 0, 0, 0.5);
}

/* ---------- 20.24 Footer ---------- */
footer {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6.5vw, 92px) var(--pad-x) 24px;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(20, 64, 46, 0.55), transparent 60%),
    radial-gradient(50% 80% at 90% 20%, rgba(197, 132, 25, 0.16), transparent 60%),
    linear-gradient(180deg, #0d1712, var(--dark) 60%, #080d0a);
}
footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 181, 76, 0.55), transparent);
}
.footer-grid {
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 44px;
}
.footer-brand p {
  font-size: 14.5px;
  max-width: 380px;
}
.social-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.35s var(--out);
}
.social-btn:hover {
  background: linear-gradient(140deg, var(--green-mid), var(--green));
  border-color: rgba(234, 181, 76, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px -12px rgba(88, 192, 140, 0.9);
}
.social-btn:hover svg {
  fill: #fff;
}
.fc h4 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 10px;
}
.fc ul li a:hover {
  color: var(--gold-light);
  padding-left: 6px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 22px;
}

/* ---------- 20.25 Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity 0.85s var(--out),
    transform 0.85s var(--out),
    filter 0.85s var(--out);
}
.reveal.active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------- 20.26 Responsive polish ---------- */
@media (max-width: 1024px) {
  .quick-jump-bar {
    position: static;
  }
}

@media (max-width: 900px) {
  .hero-trust {
    margin-top: 38px;
    padding: 16px 8px;
  }
  .trust-divider {
    display: none;
  }
  .trust-item {
    flex: 1 1 40%;
    padding: 8px 6px;
  }
  .stats-strip > * {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-bottom: 18px;
  }
  .stats-strip > *:nth-last-child(-n + 2) {
    border-bottom: none;
    padding-bottom: 8px;
  }
  .to-top {
    left: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 600px) {
  nav {
    height: 66px;
  }
  nav.scrolled {
    height: 60px;
  }
  .nav-logo-img {
    width: 44px;
    height: 44px;
  }
  #hero {
    min-height: 92svh;
    padding-top: 108px;
  }
  h1.hero-title {
    font-size: clamp(34px, 10vw, 48px);
  }
  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-scroll {
    display: none;
  }
  .pc-img {
    height: 220px;
  }
  .gallery-item {
    width: 170px;
    height: 170px;
  }
  .peeking-tab {
    font-size: 11px;
    padding: 16px 8px;
  }
  .wa-float {
    bottom: 20px;
    right: 20px;
  }
}

/* ---------- 20.27 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
  #hero .hero-center > * {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 20.28 Navbar breakpoint fix ---------- */
.nav-logo-text .brand,
.nav-logo-text .tagline,
.nav-links a {
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .nav-links a {
    padding: 9px 11px;
    font-size: 13.5px;
  }
  .nav-links .nav-cta {
    padding: 10px 18px;
  }
}

/* 992px se neeche desktop links hide, hamburger on */
@media (max-width: 992px) {
  .nav-links,
  .nav-wa {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .nav-logo-text .tagline {
    font-size: 9px;
  }
}

/* ---------- 20.29 Hamburger + mobile sheet mechanics ---------- */
:root {
  --nav-h: 78px;
}
nav {
  height: var(--nav-h);
}

.hamburger {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.hamburger:hover {
  background: rgba(20, 64, 46, 0.07);
}
.hamburger.open {
  background: rgba(20, 64, 46, 0.1);
}

/* display toggle ki jagah opacity/visibility — taaki links stagger ho sakein */
.mobile-menu {
  display: flex;
  top: var(--nav-h);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 0.35s var(--out),
    transform 0.35s var(--out),
    visibility 0.35s;
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: none;
}
nav.scrolled + .mobile-menu {
  top: 66px;
}

@media (max-width: 600px) {
  :root {
    --nav-h: 66px;
  }
  nav.scrolled + .mobile-menu {
    top: 60px;
  }
}

/* ---------- 20.30 Product photos — dark studio panels ----------
   Saari bag photos ka background pure black (#000) hai. Purana
   `mix-blend-mode: multiply` light card par unhe black square bana
   deta tha. Dark panel + `screen` blend se black background panel me
   ghul jata hai aur bag ka color pop karta hai.
   ---------------------------------------------------------------- */
.pc-img,
.pd-img-box,
.gallery-item,
.g-item {
  background:
    radial-gradient(75% 75% at 50% 34%, #16281f 0%, #0c1712 55%, #070d0a 100%);
}
.pc-img::after,
.pd-img-box::after,
.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
}
.pc-img::before {
  display: none;
}

.product-image,
.pd-img-box img,
.gallery-item img,
.g-item img {
  mix-blend-mode: screen;
  filter: none;
  object-fit: contain;
}

.pc-img {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px;
}
.pd-img-box {
  border-color: rgba(255, 255, 255, 0.08);
}
.pd-img-box img {
  padding: 26px;
}
.gallery-item {
  border-color: rgba(255, 255, 255, 0.1);
  padding: 8px;
}
.gallery-item img {
  border-radius: 16px;
}
.g-item {
  position: relative;
  border-color: rgba(12, 23, 18, 0.14);
  box-shadow: var(--e2);
}
.g-item img {
  padding: 10px;
}
.g-item:hover {
  border-color: rgba(234, 181, 76, 0.5);
  box-shadow: var(--e4);
}
.g-overlay {
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 64, 46, 0.05), rgba(197, 132, 25, 0.5));
}

/* ---------- 20.31 Product detail panel polish ---------- */
.pd-img-box {
  padding-bottom: 22px;
}
.pd-img-box .color-dots {
  position: relative;
  z-index: 2;
  margin-top: 6px;
}
.pd-img-box img {
  height: clamp(260px, 30vw, 380px);
  padding: 26px 26px 10px;
}
.quick-jump-bar {
  top: var(--nav-h);
}
nav.scrolled ~ .quick-jump-bar {
  top: 66px;
}

/* Gallery grid — bade screens par zyada columns */
.gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
}

/* ---------- 20.32 Light-background outline button ----------
   .btn-outline hero (dark) ke liye bana tha; About page ke white
   section me white-on-white invisible ho jata tha. Wahan dark
   variant use karte hain. */
.about-section .btn-outline,
.section-white .btn-outline,
.values-section .btn-outline {
  background: #fff;
  border: 1.5px solid var(--line-strong);
  color: var(--green);
  box-shadow: var(--e1);
}
.about-section .btn-outline:hover,
.section-white .btn-outline:hover,
.values-section .btn-outline:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: var(--glow-green);
}

/* About image box — placeholder ki jagah asli photo hero bane */
.about-img-box {
  aspect-ratio: auto;
}
.about-img-placeholder {
  justify-content: flex-start;
  min-height: 0;
  padding: 26px;
}
.about-img-placeholder .big-text {
  font-size: clamp(28px, 3.4vw, 44px);
  opacity: 0.35;
}
.about-img-placeholder .label img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- 20.33 Products grid — 5 cards, ek saaf row ---------- */
@media (min-width: 1180px) {
  .products-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .pc-img {
    height: 230px;
  }
}
@media (min-width: 901px) and (max-width: 1179px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 20.34 Card ke andar buttons ek line me align ---------- */
.product-card {
  display: flex;
  flex-direction: column;
}
.pc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pc-info .pc-gsm {
  min-height: 2.8em;
}
.pc-actions {
  margin-top: auto;
  padding-top: 4px;
}

/* Grain overlay mobile par band — low-end devices par scroll smooth rahe */
@media (max-width: 768px) {
  body::after {
    display: none;
  }
}


/* ================================================================
   ✦ 21. RESPONSIVE PASS
   ----------------------------------------------------------------
   320px se 1440px+ tak audit karke likha gaya. Har fix ke saath
   wajah likhi hai.
   ================================================================ */

/* ---------- 21.1 Overflow safety ----------
   Grid/flex items ka default `min-width: auto` matlab ek lamba
   unbreakable token (jaise email address ya <select> ka option)
   track ko viewport se chaura kar deta hai. Contact page 360px par
   isi wajah se horizontally scroll ho raha tha (379px vs 360px). */
.contact-grid > *,
.about-grid > *,
.pd-block > *,
.products-grid > *,
.detail-grid > *,
.why-grid > *,
.values-grid > *,
.gallery-grid > *,
.footer-grid > * {
  min-width: 0;
}

/* Lambe email / address strings ko todne do */
.contact-detail p,
.contact-detail a,
.fc-contact div,
.footer-brand p {
  overflow-wrap: anywhere;
}

/* Form controls apne container se bahar na jaayein */
.form-grp,
.form-grp input,
.form-grp select,
.contact-form textarea {
  max-width: 100%;
  min-width: 0;
}

/* ---------- 21.2 Container rhythm ----------
   5vw chhote phones par sirf 16px deta hai — thoda aur breathing room. */
@media (max-width: 480px) {
  :root {
    --pad-x: 20px;
    --gutter: 14px;
  }
}

/* ---------- 21.3 Pill rows -> swipeable strips ----------
   360px par gallery ke 7 filter 5 rows le rahe the aur products ka
   quick-jump bar 166px tall ho raha tha. Ek row me scroll better hai. */
@media (max-width: 768px) {
  .filter-wrap,
  .quick-jump-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* dono kinare par fade — signal ki aur content hai */
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .filter-wrap::-webkit-scrollbar,
  .quick-jump-bar::-webkit-scrollbar {
    display: none;
  }
  .filter-btn,
  .quick-jump-link,
  .quick-jump-label {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  /* mask ke kinare par pehla/aakhri pill na kate */
  .filter-wrap,
  .quick-jump-bar {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    scroll-padding-left: var(--pad-x);
  }
  .filter-wrap {
    margin-inline: calc(var(--pad-x) * -1);
  }
}

/* ---------- 21.4 Touch targets ----------
   Footer links 17px aur breadcrumb 20px tall the — ungli ke liye
   bahut chhote. Sirf coarse pointers par bada karte hain taaki
   desktop ka spacing na bigde. */
@media (pointer: coarse) {
  .fc ul li {
    margin-bottom: 2px;
  }
  .fc ul li a {
    display: block;
    padding: 11px 0;
    min-height: 40px;
  }
  .fc ul li a:hover {
    padding-left: 6px;
  }
  .breadcrumb a,
  .breadcrumb span {
    padding: 6px 2px;
  }
  .footer-bottom a {
    display: inline-block;
    padding: 8px 0;
  }
  /* colour swatches ko ungli ke layak banao */
  .color-dot,
  .cdot {
    width: 30px;
    height: 30px;
  }
  .color-dots {
    gap: 12px;
  }
  /* hover-only affordances touch par kaam nahi karte */
  .wa-tooltip {
    display: none;
  }
}

/* ---------- 21.5 Short / landscape viewports ----------
   740x360 landscape phone par hero content 518px tha — poora hero
   do screen le raha tha. Yahan compact kar dete hain. */
@media (max-height: 560px) and (orientation: landscape) {
  #hero {
    min-height: auto;
    padding-top: 92px;
    padding-bottom: 44px;
  }
  .hero-eyebrow {
    margin-bottom: 14px;
    padding: 6px 16px;
    font-size: 10px;
  }
  h1.hero-title {
    font-size: clamp(26px, 5.4vw, 40px);
  }
  .hero-sub {
    margin: 12px auto 20px;
    font-size: 14px;
    line-height: 1.6;
  }
  .hero-btns .btn {
    padding: 11px 22px;
    font-size: 13.5px;
  }
  .hero-trust {
    margin-top: 22px;
    padding: 12px 8px;
  }
  .trust-num {
    font-size: 17px;
  }
  .hero-scroll {
    display: none;
  }
  .mobile-menu {
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
}

/* ---------- 21.6 Tablet (768–1024) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .checklist-item {
    padding: 18px 20px;
  }
  .contact-info-card,
  .contact-form-card {
    padding: 30px;
  }
  .pd-img-box img {
    height: clamp(240px, 34vw, 320px);
  }
}

/* Tablet portrait par about/contact ko ek column me pehle hi tod do,
   warna 2 columns bahut sanke ho jate hain. */
@media (max-width: 860px) {
  .about-grid,
  .contact-grid,
  .pd-block {
    grid-template-columns: 1fr;
  }
  .pd-block.reverse {
    direction: ltr;
  }
}

/* ---------- 21.7 Phones ---------- */
@media (max-width: 600px) {
  /* 9px nav tagline padha nahi jaata */
  .nav-logo-text .brand {
    font-size: 18px;
  }
  .nav-logo-text .tagline {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .section-title {
    font-size: clamp(26px, 7.4vw, 34px);
  }
  .section-eye,
  .page-hero-eye {
    font-size: 11px;
  }
  .trust-lbl {
    font-size: 11px;
  }
  .pc-badge,
  .pd-badge {
    font-size: 10.5px;
    padding: 5px 11px;
  }

  /* spec table ka first column 120px fix tha — 320px par value
     column ke liye sirf 156px bachte the */
  .spec-table td:first-child {
    width: 92px;
    white-space: normal;
    font-size: 12px;
  }
  .spec-table td {
    padding: 11px 6px;
    font-size: 13px;
  }

  /* CTA banners mobile par center */
  .products-cta,
  .about-cta,
  .gallery-cta {
    text-align: center;
  }
  .products-cta-btns,
  .gallery-cta-btns,
  .about-btns-wrap {
    width: 100%;
    justify-content: center;
  }
  .products-cta-btns > *,
  .gallery-cta-btns > * {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* side tab pura kinara kha raha tha */
  .peeking-tab {
    font-size: 10px;
    padding: 14px 6px;
    letter-spacing: 0.08em;
  }

  .modal {
    padding: 24px 20px;
  }
  .why-card,
  .value-card {
    padding: 26px 22px;
  }
  .checklist-item {
    padding: 16px 16px;
  }
}

/* ---------- 21.8 Very small phones ---------- */
@media (max-width: 360px) {
  .hero-trust {
    padding: 14px 4px;
  }
  .trust-item {
    padding: 6px 4px;
  }
  .trust-num {
    font-size: 17px;
  }
  .trust-lbl {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .btn {
    padding: 13px 20px;
    font-size: 14px;
  }
  .gallery-item {
    width: 150px;
    height: 150px;
  }
}

/* ---------- 21.9 Notch / safe areas ----------
   Fixed UI ko iPhone ke home indicator aur rounded corners se bachao. */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa-float {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
  .to-top {
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
  }
  nav,
  .mobile-menu {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
}

/* ---------- 21.10 Baaki reh gaye tap targets ----------
   Audit ke doosre round se: breadcrumb 32px tha aur contact page ka
   phone link sirf 17px — jabki mobile par wahi sabse zyada tap hota hai. */
@media (pointer: coarse) {
  .contact-detail a,
  .fc-contact a {
    display: inline-block;
    padding: 10px 0;
    min-height: 40px;
  }
  .breadcrumb {
    padding: 4px 14px;
  }
  .breadcrumb a {
    padding: 10px 6px;
  }
  .footer-bottom a {
    padding: 10px 0;
  }
}

/* 992px se neeche nav hamburger ban jata hai, to logo ke paas jagah
   hoti hai — 9px tagline bekaar me chhota tha. */
@media (max-width: 992px) {
  .nav-logo-text .tagline {
    font-size: 10px;
  }
}

/* Footer ke phone/email ab links hain — inko baaki footer text jaisa rakho */
.fc-contact a {
  color: inherit;
  transition: color var(--t-fast);
}
.fc-contact a:hover {
  color: var(--gold-light);
}

/* Gallery phone par 1 column de raha tha — bag photos 2 columns me
   scan karna kaafi behtar hai. */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .g-item img {
    padding: 6px;
  }
  .g-overlay {
    padding: 12px;
  }
  .g-overlay span {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* Peeking tab phone par content ke right kinare ko permanently dhak
   raha tha. Mobile par lead capture ke liye WhatsApp float button aur
   session ka auto-popup kaafi hai.
   Wapas chahiye ho to bas ye block hata do. */
@media (max-width: 600px) {
  .peeking-tab {
    display: none;
  }
}

/* Chhote phones par email address (27 chars) contact row me fit nahi
   hota tha aur beech se toot jata tha. Icon aur value text thoda
   compact karke ek line me aa jata hai. */
@media (max-width: 430px) {
  .contact-detail {
    gap: 10px;
    padding: 12px 10px;
  }
  .contact-detail-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .contact-detail-icon svg {
    width: 17px;
    height: 17px;
  }
  .contact-detail p,
  .contact-detail a {
    font-size: 13px;
  }
}

/* ---------- 21.12 Contact card ke socials ----------
   .social-btn footer ke dark background ke liye bana hai (white fill).
   Contact page ka info card cream hai, to wahan white icons lagbhag
   invisible the. Yahan dark-on-light variant. */
.contact-socials .social-btn {
  background: rgba(20, 64, 46, 0.06);
  border: 1px solid var(--line-strong);
}
.contact-socials .social-btn svg {
  fill: var(--green);
}
.contact-socials .social-btn:hover {
  background: linear-gradient(140deg, var(--green-mid), var(--green));
  border-color: transparent;
}
.contact-socials .social-btn:hover svg {
  fill: #fff;
}

/* ---------- 21.13 Map link ----------
   Address ab Google Maps kholta hai, to clickable dikhna chahiye. */
.map-link {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.map-link::after {
  /* chhota "bahar khulega" ishaara */
  content: "↗";
  display: inline-block;
  margin-left: 5px;
  font-size: 0.85em;
  opacity: 0.55;
  transform: translateY(-1px);
  transition: transform 0.25s var(--out), opacity var(--t-fast);
}
.map-link:hover::after {
  transform: translate(2px, -3px);
  opacity: 1;
}

/* Footer — halka text, gold par hover */
.fc-contact .map-link {
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}
.fc-contact .map-link:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

/* Contact card — light background */
.contact-detail .map-link {
  display: inline-block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  border-bottom-color: rgba(20, 64, 46, 0.25);
}
.contact-detail .map-link:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* ---------- 21.14 Footer logo ab home link hai ----------
   Navbar logo jaisa hi behaviour. width:fit-content isliye taaki footer
   column ki poori khaali chaudai clickable na ho jaye. */
a.footer-brand-wrap {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  transition: opacity var(--t-fast);
}
a.footer-brand-wrap:hover {
  opacity: 0.95;
}
a.footer-brand-wrap .nav-logo-img {
  transition: transform 0.5s var(--spring);
}
a.footer-brand-wrap:hover .nav-logo-img {
  transform: rotate(-6deg) scale(1.06);
}
a.footer-brand-wrap:hover .footer-brand-name {
  color: var(--gold-light);
}
.footer-brand-name {
  transition: color var(--t-fast);
}