/* =========================================================================
   SANCHI GROUP — Construction & Scaffolding Materials
   style.css — Brand design system + component styles
   Theme: LIGHT base, orange-gold + metallic-silver accents
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Primary — gold/orange from logo */
  --brand-primary:       #F7941D;
  --brand-primary-light: #FDB913;
  --brand-primary-dark:  #E2761B;
  --brand-gradient: linear-gradient(135deg, #FDB913 0%, #F7941D 55%, #E2761B 100%);

  /* Secondary — metallic silver/grey */
  --brand-silver:        #C7C9CB;
  --brand-silver-dark:   #8A8D90;
  --brand-silver-gradient: linear-gradient(180deg, #EDEDED 0%, #C7C9CB 50%, #9A9C9F 100%);

  /* LIGHT base palette */
  --bg-white:            #FFFFFF;
  --bg-light:            #F7F8FA;
  --bg-light-warm:       #FFF7EC;
  --surface-card:        #FFFFFF;

  /* Text */
  --text-dark:           #1B1B1F;
  --text-body:           #4A4A52;
  --text-muted:          #8A8D90;
  --text-on-dark:        #FFFFFF;

  /* Lines */
  --border-soft:         #E7E9EC;

  /* Section gradients */
  --grad-light-warm:  linear-gradient(135deg, #FFFFFF 0%, #FFF7EC 100%);
  --grad-silver-soft: linear-gradient(135deg, #F7F8FA 0%, #ECEEF1 100%);
  --grad-orange-band: linear-gradient(135deg, #FDB913 0%, #F7941D 100%);
  --grad-dark-strip:  linear-gradient(135deg, #1B1B1F 0%, #2A2A30 100%);

  /* Font families */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Font sizes (type scale, base 16px) */
  --fs-base:  1rem;
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-h6:    1.125rem;
  --fs-h5:    1.375rem;
  --fs-h4:    1.625rem;
  --fs-h3:    2rem;
  --fs-h2:    2.5rem;
  --fs-h1:    3.25rem;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Line heights */
  --lh-tight:  1.2;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-wide:   0.04em;

  /* Spacing scale (8px system) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 4rem;

  /* Section vertical padding */
  --section-py:        var(--space-8);
  --section-py-mobile: var(--space-6);

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft:  0 4px 20px rgba(27,27,31,.08);
  --shadow-hover: 0 10px 30px rgba(247,148,29,.25);
}

/* ---------------------------------------------------------------------
   2. BASE RULES
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-white);
  overflow-x: hidden;
}

p { line-height: var(--lh-normal); margin-bottom: var(--space-3); }
.lead { font-size: var(--fs-md); color: var(--text-body); }
small, .text-small { font-size: var(--fs-sm); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-dark);
  margin-bottom: var(--space-3);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extra); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

.text-brand { color: var(--brand-primary) !important; }
.text-silver { color: var(--brand-silver-dark) !important; }

/* Kicker / eyebrow label */
.kicker {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-gradient);
  display: inline-block;
  border-radius: 2px;
}

/* Links */
a { color: var(--brand-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brand-primary-dark); }

/* Section spacing helper */
.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-sm { padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* Section background helpers */
.bg-white-surface   { background: var(--bg-white); }
.bg-light-warm       { background: var(--grad-light-warm); }
.bg-silver-soft       { background: var(--grad-silver-soft); }
.bg-orange-band       { background: var(--grad-orange-band); }
.bg-dark-strip         { background: var(--grad-dark-strip); }

.divider-brand {
  height: 4px;
  width: 70px;
  background: var(--brand-gradient);
  border-radius: 4px;
  margin: var(--space-3) 0 var(--space-4);
}
.divider-brand.mx-auto { margin-left: auto; margin-right: auto; }

/* Features section */
.features-heading { color: var(--brand-dark, #1a2a3a); }

.feature-card {
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 2rem 1.5rem 1.75rem;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
  height: 100%;
}
.feature-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  transform: translateY(-4px);
}

.feature-icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  margin: 0 auto 1.25rem;
}
.feature-icon-teal  { background: #e6f7f4; color: #16a085; }
.feature-icon-orange{ background: #fff3e0; color: #E2761B; }
.feature-icon-yellow{ background: #fffde7; color: #f9a825; }
.feature-icon-blue  { background: #e3f2fd; color: #1565c0; }

.feature-label { font-weight: 600; margin-bottom: 0; color: var(--brand-dark, #1a2a3a); }

.divider-silver {
  height: 4px;
  width: 70px;
  background: var(--brand-silver-gradient);
  border-radius: 4px;
  margin: var(--space-3) 0 var(--space-4);
}
.divider-silver.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.75rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.btn-brand {
  background: var(--brand-gradient);
  color: #fff;
  border: none;
}
.btn-brand:hover, .btn-brand:focus {
  filter: brightness(1.05);
  box-shadow: var(--shadow-hover);
  color: #fff;
  transform: translateY(-2px);
  transition: all .25s ease;
}
.btn-outline-silver {
  border: 2px solid var(--brand-silver-dark);
  color: var(--text-dark);
  background: transparent;
}
.btn-outline-silver:hover {
  background: var(--brand-silver-gradient);
  border-color: var(--brand-silver-dark);
  color: var(--text-dark);
  transform: translateY(-2px);
  transition: all .25s ease;
}
.btn-outline-light-custom {
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  background: transparent;
}
.btn-outline-light-custom:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}
.btn-sm-pad { padding: 0.55rem 1.25rem; }

/* ---------------------------------------------------------------------
   4. CARDS
   --------------------------------------------------------------------- */
.card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  background: var(--surface-card);
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  transition: all .25s ease;
}
.card-product .card-img-wrap { overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.card-product img { transition: transform .4s ease; }
.card-product:hover img { transform: scale(1.08); }

/* =========================================================================
   5. TOP BAR
   ========================================================================= */
.topbar {
  background: var(--grad-dark-strip);
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  padding: var(--space-2) 0;
}
.topbar a { color: var(--text-on-dark); }
.topbar a:hover { color: var(--brand-primary-light); }
.topbar .topbar-icon { color: var(--brand-primary-light); margin-right: .4rem; }
.topbar .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  margin-left: .4rem;
  color: var(--text-on-dark);
  transition: all .2s ease;
}
.topbar .social-link:hover {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
}

/* =========================================================================
   6. NAVBAR
   ========================================================================= */
.navbar-sanchi {
  background: var(--bg-white);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  transition: box-shadow .3s ease, padding .3s ease;
}
.navbar-sanchi.scrolled {
  box-shadow: 0 4px 18px rgba(27,27,31,.10);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.navbar-sanchi .navbar-brand img { height: 80px; max-height: 100px; width: auto; }
.navbar-sanchi .nav-link {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--text-dark);
  padding: .55rem 1rem;
  position: relative;
}
.navbar-sanchi .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .25rem;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.navbar-sanchi .nav-link:hover::after,
.navbar-sanchi .nav-link.active::after { transform: scaleX(1); }
.navbar-sanchi .nav-link:hover,
.navbar-sanchi .nav-link.active { color: var(--brand-primary-dark); }
.navbar-sanchi .navbar-toggler { border: none; color: var(--brand-primary); }
.navbar-sanchi .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(247,148,29,.25); }

.mega-menu {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}
.mega-menu .mega-col-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-silver-dark);
  margin-bottom: var(--space-2);
}
.mega-menu .dropdown-item { border-radius: var(--radius-sm); padding: .45rem .6rem; }
.mega-menu .dropdown-item:hover { background: var(--bg-light-warm); color: var(--brand-primary-dark); }

@media (min-width: 992px) {
  .mega-menu { width: 640px; }
}

/* =========================================================================
   6b. BANNER SLIDER
   ========================================================================= */
.banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Crossfade transition speed */
.banner-slider .carousel-fade .carousel-item {
  transition: opacity .9s ease-in-out;
}

/* Dot indicators */
.banner-dots {
  bottom: 28px;
  gap: 6px;
}
.banner-dots [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border-top: none;
  border-bottom: none;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(255,255,255,.6);
  transition: all .35s ease;
  margin: 0 3px;
  opacity: 1;
}
.banner-dots .active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  width: 32px;
  border-radius: 5px;
}

/* Arrow controls */
.banner-arrow {
  width: 52px;
  opacity: 0;
  transition: opacity .3s ease;
}
.banner-slider:hover .banner-arrow { opacity: 1; }
.banner-arrow-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 1.5rem;
  transition: background .2s ease, border-color .2s ease;
}
.banner-arrow:hover .banner-arrow-inner {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

@media (max-width: 767.98px) {
  .banner-arrow { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-slider .carousel-fade .carousel-item { transition: none; }
}

/* =========================================================================
   7. HERO — PARALLAX
   ========================================================================= */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,148,29,.40)),
    url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.hero .hero-badge {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: .4rem .9rem;
}

@media (max-width: 991.98px) {
  .hero { min-height: 450px; background-attachment: scroll; }
}
@media (max-width: 575.98px) {
  .hero { min-height: 340px; }
}

/* generic parallax helper, reused for stats/CTA band */
.parallax-strip {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 991.98px) {
  .parallax-strip { background-attachment: scroll; }
}
.parallax-overlay-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,27,31,.82), rgba(27,27,31,.65));
}

/* =========================================================================
   8. ABOUT / WELCOME
   ========================================================================= */
.about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.about-img-wrap > img {
  border-radius: var(--radius-lg);
  display: block;
  width: 100%;
}
.about-img-wrap::before {
  content: "";
  position: absolute;
  top: -18px; left: -18px;
  width: 90px; height: 90px;
  border: 6px solid var(--brand-primary-light);
  border-radius: var(--radius-md);
  z-index: -1;
}
.about-stat-chip {
  position: absolute;
  bottom: -28px;
  right: -10px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(27,27,31,.14);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  animation: floatChip 3s ease-in-out infinite;
}
@keyframes floatChip {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@media (max-width: 767.98px) {
  .about-stat-chip { right: 10px; bottom: -22px; }
}

/* =========================================================================
   9. PRODUCTS
   ========================================================================= */
.product-card .ratio img { object-fit: cover; }
.product-card .card-body { padding: var(--space-4); }
.product-card h5 { font-size: var(--fs-h6); margin-bottom: var(--space-1); }
.product-card .product-tag {
  font-size: var(--fs-xs);
  color: var(--brand-silver-dark);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* =========================================================================
   10. STATS / CTA BAND
   ========================================================================= */
.stats-band {
  background-image: url('https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=1920&q=80');
}
.stat-item .stat-number {
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--brand-primary-light);
  line-height: 1;
}
.stat-item .stat-label {
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* =========================================================================
   11. ENQUIRY FORM
   ========================================================================= */
.enquiry-form .form-control,
.enquiry-form .form-select {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  min-height: 44px;
  font-size: var(--fs-base);
}
.enquiry-form textarea.form-control { min-height: 120px; }
.enquiry-form .form-control:focus,
.enquiry-form .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .25rem rgba(247,148,29,.25);
}
.enquiry-form label { font-weight: var(--fw-medium); color: var(--text-dark); margin-bottom: .4rem; }

/* =========================================================================
   12. OUR FAMILY / CLIENTS
   ========================================================================= */
.clients-track {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  overflow: hidden;
}
.client-logo {
  filter: grayscale(100%) opacity(.6);
  transition: filter .3s ease, transform .3s ease;
  max-height: 48px;
  width: auto;
}
.client-logo:hover { filter: grayscale(0%) opacity(1); transform: scale(1.05); }

/* =========================================================================
   13. FOOTER
   ========================================================================= */
.footer-sanchi {
  background: var(--grad-dark-strip);
  color: rgba(255,255,255,.78);
}
.footer-sanchi .footer-logo img { height: 120px; }
.footer-sanchi h6 {
  color: var(--brand-primary-light);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-4);
}
.footer-sanchi a { color: rgba(255,255,255,.78); font-size: var(--fs-sm); }
.footer-sanchi a:hover { color: var(--brand-primary-light); }
.footer-sanchi .footer-links li { margin-bottom: var(--space-2); }
.footer-sanchi .footer-contact li {
  display: flex;
  gap: .6rem;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
}
.footer-sanchi .footer-contact i { color: var(--brand-primary-light); margin-top: .2rem; }
.footer-sanchi .map-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.55);
}
.footer-bottom strong { color: var(--brand-primary-light); }
.seo-keywords { font-size: var(--fs-xs); color: rgba(255,255,255,.35); line-height: var(--lh-loose); text-align: center;}
.seo-keywords a { color: rgba(255,255,255,.45); }

/* Floating Call button */
.call-float {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0078D7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.call-float:hover { transform: scale(1.08); color: #fff; }

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* Back-to-top */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 90px;
  z-index: 1040;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  border: none;
}
.back-to-top.show { display: flex; }

/* =========================================================================
   14. RESPONSIVE TYPE & SPACING SCALING
   ========================================================================= */
@media (max-width: 991.98px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.625rem;
  }
  .section { padding-top: var(--section-py-mobile); padding-bottom: var(--section-py-mobile); }
}
@media (max-width: 575.98px) {
  :root {
    --fs-h1: 2rem;
    --fs-h2: 1.625rem;
  }
  body { font-size: var(--fs-base); }
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--brand-primary);
  color: #fff;
  padding: .5rem 1rem;
  z-index: 2000;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible {
  outline: 3px solid var(--brand-primary-light);
  outline-offset: 2px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn-brand, .btn-outline-silver, .client-logo, .card-product img, .back-to-top, .whatsapp-float, .call-float {
    transition: none !important;
  }
  .hero, .parallax-strip { background-attachment: scroll !important; }
  .about-stat-chip { animation: none !important; }
}