/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}
/* ==========================================================================
   SHIV SHAKTI ENTERPRISES — Global Stylesheet
   Section: Design Tokens + Header & Navigation
   Built on Bootstrap 5 grid utilities. Custom rules below extend, never fight, Bootstrap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   Single source of truth for color + type across every page.
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --color-primary: #0F2745;   /* Deep marble-blue — primary brand color */
  --color-gold: #C89A2B;      /* Signature gold — accents, dividers, CTAs */
  --color-accent: #B71C1C;    /* Reserved for urgent/CTA moments only */
  --color-bg: #FAFAF8;        /* Warm off-white background */
  --color-text: #1F2937;      /* Body copy */
  --color-white: #FFFFFF;

  /* Derived tones (used for hover states, borders, subtle fills) */
  --color-primary-light: #1C3A63;
  --color-gold-soft: rgba(200, 154, 43, 0.12);
  --color-border-hairline: rgba(15, 39, 69, 0.10);

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  /* Layout */
  --header-height: 84px;
  --header-height-scrolled: 68px;
  --topbar-height: 40px;
  --container-max: 1600px;

  /* Motion */
  --transition-base: 0.25s ease;
}

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  padding-top: calc(var(--header-height) + var(--topbar-height));
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Visible, high-contrast focus ring for keyboard navigation — accessibility requirement */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Skip-to-content link: hidden until focused, aids screen-reader / keyboard users */
.skip-link {
  position: absolute;
  top: -48px;
  left: 1rem;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  z-index: 1100;
  transition: top var(--transition-base);
}
.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   3. TOP UTILITY BAR
   Thin strip above the main nav — contact info builds trust before anything else loads.
   ========================================================================== */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--topbar-height);
    background-color: var(--color-primary);
    color: var(--color-white);
    z-index: 1050;
}

.topbar a {
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.92;
  transition: opacity var(--transition-base), color var(--transition-base);
}

.topbar a:hover,
.topbar a:focus-visible {
  color: var(--color-gold);
  opacity: 1;
}

.topbar__icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: -2px;
}

.topbar__divider {
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   4. MAIN HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-hairline);
  transition: box-shadow var(--transition-base), height var(--transition-base);
}

/* Elevation appears only after scroll — keeps the resting state calm and flat */
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(15, 39, 69, 0.08);
}

.navbar {
  height: var(--header-height);
  transition: height var(--transition-base);
  padding: 0;
}

.site-header.is-scrolled .navbar {
  height: var(--header-height-scrolled);
}

/* --- Brand / Logo -------------------------------------------------------- */
.navbar-brand.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  margin-right: 2.5rem;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.65rem;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand__tagline {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 2px;
}

/* --- Nav links ------------------------------------------------------------ */
.nav-link.site-nav__link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 0.5rem 1rem !important;
  position: relative;
}

/* Gold underline that draws in on hover/focus — the header's one animated flourish */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.25rem;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.active::after {
  transform: scaleX(1);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.active {
  color: var(--color-primary);
}

/* --- Products dropdown ----------------------------------------------------- */
.dropdown-menu.products-menu {
  border: 1px solid var(--color-border-hairline);
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(15, 39, 69, 0.12);
  padding: 0.5rem 0;
  margin-top: 0.75rem;
}

.dropdown-item {
  font-size: 0.875rem;
  color: var(--color-text);
  padding: 0.55rem 1.5rem;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: var(--color-gold-soft);
  color: var(--color-primary);
}

/* --- CTA button ------------------------------------------------------------ */
.btn-header-cta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.65rem 1.5rem;
  border-radius: 2px;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-header-cta:hover,
.btn-header-cta:focus-visible {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-primary);
}

.btn-header-cta svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
}

/* --- Mobile toggler --------------------------------------------------------- */
.navbar-toggler.custom-toggler {
  border: none;
  padding: 0.25rem;
}

.navbar-toggler.custom-toggler:focus {
  box-shadow: none;
}

.toggler-icon {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--color-primary);
  position: relative;
  transition: background-color var(--transition-base);
}

.toggler-icon::before,
.toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: var(--color-primary);
  transition: transform var(--transition-base), top var(--transition-base);
}

.toggler-icon::before { top: -8px; }
.toggler-icon::after  { top: 8px; }

/* --------------------------------------------------------------------------
   5. RESPONSIVE ADJUSTMENTS — Header & Nav
   Breakpoints match project spec: 360 / 576 / 768 / 992 / 1200 / 1600
   -------------------------------------------------------------------------- */

/* Below 992px: Bootstrap collapses the nav — style the mobile panel */
@media (max-width: 991.98px) {
  body {
    padding-top: calc(var(--header-height-scrolled) + var(--topbar-height));
  }

  .navbar,
  .site-header.is-scrolled .navbar {
    height: var(--header-height-scrolled);
  }

  .navbar-collapse {
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border-hairline);
    padding: 1rem 0 1.5rem;
    margin-top: 1px;
  }

  .site-nav__link::after {
    display: none; /* underline animation reads better on hover devices only */
  }

  .site-nav__link.active {
    color: var(--color-gold);
  }

  .dropdown-menu.products-menu {
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-gold-soft);
    margin: 0 0 0 1rem;
    background: transparent;
  }

  .btn-header-cta {
    display: inline-flex;
    margin-top: 0.75rem;
  }
}

/* Small phones: tighten topbar so address wraps gracefully */
@media (max-width: 575.98px) {
  .topbar__address {
    display: none; /* hide full address on very small screens, keep phone + WhatsApp */
  }
  .brand__tagline {
    display: none; /* reclaim vertical space on 360px devices */
  }
}

/* Large desktop / showroom displays: give the header a touch more breathing room */
@media (min-width: 1600px) {
  :root {
    --header-height: 96px;
  }
  .navbar-nav .nav-link.site-nav__link {
    font-size: 0.9375rem;
    padding: 0.5rem 1.25rem !important;
  }
}
/* ==========================================
   FLOATING WHATSAPP BUTTON
========================================== */

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    text-decoration:none;

    z-index:9999;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    transition:.35s ease;

    animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

    color:#fff;

    transform:translateY(-6px) scale(1.08);

    box-shadow:0 20px 40px rgba(0,0,0,.3);

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

@media(max-width:768px){

    .whatsapp-float{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

        font-size:1.8rem;

    }

}
/* ==========================================
   PRODUCT CATEGORIES
========================================== */

.categories-section{

    padding:100px 0;

    background:#ffffff;

}

.section-subtitle{

    display:inline-block;

    color:var(--color-gold);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.section-title{

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

    font-size:3rem;

    color:var(--color-primary);

    margin-bottom:20px;

}

.section-description{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:1.8;

}

.category-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    height:320px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.4s;

}

.category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s;

}

.category-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    rgba(15,39,69,.1),
    rgba(15,39,69,.85));

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

}

.category-overlay h3{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:20px;

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

}

.category-btn{

    width:max-content;

    padding:10px 24px;

    background:#C89A2B;

    color:#0F2745;

    text-decoration:none;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.category-btn:hover{

    background:#fff;

    color:#0F2745;

}

.category-card:hover{

    transform:translateY(-12px);

}

.category-card:hover img{

    transform:scale(1.12);

}

@media(max-width:768px){

.section-title{

font-size:2.3rem;

}

.category-card{

height:280px;

}

}
/* ==========================================
   WHY CHOOSE US
========================================== */

.why-choose-section{

    background:#FAFAF8;

    padding:100px 0;

}

.why-card{

    background:#fff;

    padding:45px 35px;

    text-align:center;

    border-radius:20px;

    height:100%;

    transition:.35s ease;

    border:1px solid rgba(15,39,69,.08);

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.why-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-primary);

    color:var(--color-gold);

    font-size:2rem;

    transition:.35s;

}

.why-card:hover .why-icon{

    transform:rotateY(180deg);

    background:var(--color-gold);

    color:var(--color-primary);

}

.why-card h4{

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

    color:var(--color-primary);

    font-size:1.8rem;

    margin-bottom:18px;

}

.why-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

@media(max-width:768px){

.why-card{

padding:35px 25px;

}

}
/* ==========================================
   FEATURED BRANDS
========================================== */

.brands-section{

    padding:100px 0;

    background:#ffffff;

    overflow:hidden;

}

.brands-slider{

    width:100%;

    overflow:hidden;

    position:relative;

}

.brands-track{

    display:flex;

    width:max-content;

    animation:brandScroll 28s linear infinite;

}

.brands-slider:hover .brands-track{

    animation-play-state:paused;

}

.brand-item{

    width:220px;

    height:130px;

    margin:0 18px;

    background:#fff;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

    border:1px solid rgba(15,39,69,.08);

}

.brand-item:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.brand-item img{

    max-width:140px;

    max-height:70px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.75;

    transition:.35s;

}

.brand-item:hover img{

    filter:none;

    opacity:1;

}

@keyframes brandScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@media(max-width:768px){

.brand-item{

width:170px;

height:100px;

margin:0 12px;

}

.brand-item img{

max-width:110px;

}

}
/* ==========================================
   GALLERY PREVIEW
========================================== */

.gallery-section{

    padding:100px 0;

    background:#FAFAF8;

}

.gallery-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:20px;

}

.gallery-item{

    overflow:hidden;

    border-radius:20px;

    position:relative;

    height:280px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.gallery-item.large{

    height:580px;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(15,39,69,.45)

    );

    opacity:0;

    transition:.4s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery-btn{

    display:inline-flex;

    align-items:center;

    padding:16px 38px;

    border-radius:50px;

    background:var(--color-primary);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.gallery-btn:hover{

    background:var(--color-gold);

    color:var(--color-primary);

    transform:translateY(-4px);

}

@media(max-width:992px){

.gallery-grid{

grid-template-columns:1fr 1fr;

}

.gallery-item.large{

height:320px;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item,

.gallery-item.large{

height:260px;

}

}
/* ==========================================
   REQUEST A QUOTE
========================================== */

.quote-section{

    padding:100px 0;

    background:#ffffff;

}

.quote-card{

    background:#fff;

    padding:45px;

    border-radius:25px;

    box-shadow:0 20px 55px rgba(0,0,0,.08);

}

.quote-info{

    margin-top:40px;

}

.quote-item{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}

.quote-item i{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--color-primary);

    color:var(--color-gold);

    border-radius:50%;

    font-size:1.4rem;

}

.quote-item strong{

    color:var(--color-primary);

}

.quote-item p{

    margin:4px 0 0;

    color:#666;

}

.form-control,
.form-select{

    padding:16px;

    border-radius:12px;

    border:1px solid #ddd;

    box-shadow:none;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--color-gold);

    box-shadow:none;

}

.btn-submit{

    width:100%;

    padding:16px;

    border:none;

    border-radius:50px;

    background:var(--color-primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.btn-submit:hover{

    background:var(--color-gold);

    color:var(--color-primary);

}

@media(max-width:768px){

.quote-card{

padding:30px;

}

}
/* ==========================================
   CONTACT SECTION
========================================== */

.contact-section{

    padding:100px 0;

    background:#FAFAF8;

}

.contact-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    height:100%;

}

.contact-card h3{

    color:var(--color-primary);

    margin-bottom:20px;

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

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:22px;

}

.contact-item i{

    width:45px;

    height:45px;

    background:var(--color-primary);

    color:var(--color-gold);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.map-wrapper{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    height:100%;

    min-height:420px;

}

.map-wrapper iframe{

    width:100%;

    height:100%;

    border:0;

}

@media(max-width:768px){

.contact-card{

padding:30px;

}

.map-wrapper{

min-height:320px;

}

}
/* ==========================================
   FOOTER
========================================== */

.footer{

    background:#0F2745;

    color:#fff;

    padding:80px 0 30px;

}

.footer-logo{

    width:90px;

    margin-bottom:20px;

}

.footer-text{

    color:rgba(255,255,255,.75);

    line-height:1.8;

}

.footer h5{

    color:#C89A2B;

    margin-bottom:20px;

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

    font-size:1.5rem;

}

.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer ul li{

    margin-bottom:12px;

    color:rgba(255,255,255,.75);

}

.footer ul li a{

    color:rgba(255,255,255,.75);

    text-decoration:none;

    transition:.3s;

}

.footer ul li a:hover{

    color:#C89A2B;

}

.footer p{

    color:rgba(255,255,255,.75);

}

.footer hr{

    border-color:rgba(255,255,255,.1);

    margin:40px 0 25px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

@media(max-width:768px){

.footer-bottom{

flex-direction:column;

text-align:center;

}

}