/* ---------------- ROOT VARIABLES ---------------- */
:root{
  --brand:#2B6CB0;   /* Primary brand color (blue) */
  --brand-2:#0EA5E9; /* Accent color (light blue) */
  --ink:#0b1220;     /* Default dark text color */
}

/* Reset / base settings */
*{box-sizing:border-box} /* Ensure padding/border included in element size */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); /* Default text color */
  -webkit-font-smoothing: antialiased; /* Smoother font rendering */
  text-rendering: optimizeLegibility;
}

/* Font weights utility classes */
.fw-800{font-weight:800} /* Heavy bold */
.fw-600{font-weight:600} /* Semi-bold */

/* ---------------- TOPBAR ---------------- */
.topbar{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); /* Gradient blue bg */
  color:#fff;
}
.topbar .top-link{color:#fff;text-decoration:none} /* White links */
.topbar .top-link:hover{text-decoration:underline}

/* ---------------- NAVBAR ---------------- */
.navbar .brand{font-family:Outfit,Inter,sans-serif; letter-spacing:.2px}
.navbar .nav-link{font-weight:600} /* Semi-bold nav items */
.navbar .btn{border-radius:14px}   /* Rounded CTA button in navbar */

/* ---------------- HERO (homepage banner) ---------------- */
.hero{
  position:relative;
  min-height:72vh;
  /* Radial gradients on dark base for subtle background effect */
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(900px 450px at 90% 10%, rgba(43,108,176,.25), transparent 60%),
    #0b1220;
  overflow:hidden;
}
/* Hero background image (AC photo on right) */
.hero .hero-image{
  position:absolute; right:-5%; bottom:-10%;
  width:55%; max-width:900px;
  filter:contrast(105%) saturate(110%);
  border-radius:36px;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  object-fit:cover;
  z-index:0; /* Behind overlay and text */
}
/* Dark overlay to improve text readability */
.hero .hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,18,32,.85), rgba(11,18,32,.45));
  z-index:1;
  pointer-events:none; /* Doesn’t block clicks on content */
}
/* Hero content sits above overlay */
.hero .container{ position:relative; z-index:2; }

/* Utility text effects */
.text-shadow{ text-shadow: 0 3px 12px rgba(0,0,0,.45); } 
.text-white-75{ color: rgba(255,255,255,.90) !important; }

/* Form box inside hero */
.hero-form{ border-radius:18px; }
.hero-form .form-control, 
.hero-form .form-select{ border-radius:12px; }

/* Gradient text utility */
.grad-text{
  background:linear-gradient(90deg,#93c5fd,#38bdf8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------------- SECTIONS (general padding and titles) ---------------- */
.section{padding:72px 0}
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:.5rem
}

/* Cards (used for features, services, catalogue items) */
.feature-card, .service-card, .catalog-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Hover effect for cards */
.feature-card:hover, .service-card:hover, .catalog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(2,6,23,.12);
}

/* ---------------- CTA (Get a Quote section) ---------------- */
.section-cta.cta{
  position: relative; overflow: hidden;
  padding: 72px 0;
  background:
    radial-gradient(1000px 600px at 90% 10%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(43,108,176,.25), transparent 60%),
    linear-gradient(90deg, var(--brand), var(--brand-2));
}
/* Decorative background image inside CTA */
.cta .cta-image{
  position: absolute; right: -8%; bottom: -20%;
  width: 60%; max-width: 900px;
  opacity: .10; filter: contrast(105%) saturate(110%);
  border-radius: 36px; pointer-events: none;
}

/* Glass effect badges (used inside CTA and highlights) */
.badge-glass{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: saturate(160%) blur(4px);
}

/* CTA form card with translucent look */
.cta-form{
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 50px rgba(2,6,23,.25);
}
.cta-form .input-group-text{ background: #f8fafc; border-color: #e5e7eb; }
.cta-form .form-control, .cta-form .form-select{ border-color: #e5e7eb; border-radius: 12px; }
.cta-form .form-control:focus, .cta-form .form-select:focus{
  border-color: rgba(43,108,176,.55);
  box-shadow: 0 0 0 .25rem rgba(43,108,176,.15);
}

/* CTA gradient submit button */
.btn-cta{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border: none; color: #fff;
  border-radius: 14px;
  transition: transform .15s ease, filter .15s ease;
}
.btn-cta:hover{ filter: brightness(.95); transform: translateY(-1px); }

/* Reveal-up animation for CTA content */
.cta .card, .cta h2, .cta p, .cta ul, .cta .badge-glass{ animation: reveal-up .5s ease both; }
.cta h2{ animation-delay: .05s }
.cta p{ animation-delay: .10s }
.cta ul{ animation-delay: .15s }
.cta .badge-glass{ animation-delay: .20s }
.cta .card{ animation-delay: .15s }
@keyframes reveal-up{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform:none; }
}
/* Mobile tweaks for CTA */
@media (max-width: 991.98px){
  .section-cta.cta{ padding: 56px 0; }
  .cta .cta-image{ display:none; }
}

/* ---------------- FOOTER ---------------- */
.modern-footer{
  position: relative;
  background: radial-gradient(800px 400px at 10% 0%, rgba(14,165,233,.12), transparent 60%),
              radial-gradient(800px 400px at 90% 100%, rgba(43,108,176,.12), transparent 60%),
              linear-gradient(180deg,#0b1220,#0f1b2f);
  color: #e2e8f0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
}
.modern-footer .text-footer-muted{ color: #94a3b8; }
.modern-footer .footer-hr{
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
/* Footer links and hover */
.footer-link{ color:#cbd5e1; text-decoration:none; }
.footer-link:hover{ color:#ffffff; }
/* Social icons hover */
.social{ color:#cbd5e1; text-decoration:none; transition: transform .15s ease, color .15s ease; }
.social:hover{ color:#fff; transform: translateY(-2px); }
/* Footer chips (GST, Patna) */
.chip{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color:#e2e8f0;
  padding:.35rem .6rem;
  border-radius:999px;
  display:inline-flex; align-items:center; gap:.35rem;
}
/* Footer newsletter form (not used now, but styled) */
.newsletter{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.newsletter .form-control{ background: #0f1b2f; border-color: rgba(255,255,255,.18); color:#e5e7eb; }
.newsletter .form-control::placeholder{ color:#94a3b8; }
/* Decorative blurred dots in footer */
.modern-footer .dot{ position:absolute; width:220px; height:220px; filter: blur(70px); opacity:.25; border-radius:50%; pointer-events:none; }
.modern-footer .dot-1{ background:#22d3ee; left:-60px; top:-60px; }
.modern-footer .dot-2{ background:#60a5fa; right:-60px; bottom:-80px; }

/* Footer spacing utility */
.py-6{ padding-top:4.5rem; padding-bottom:4.5rem; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991.98px){
  .hero{min-height:70vh}
  .hero .hero-image{display:none} /* Hide hero image on small devices */
}

/* ---------------- BUTTONS ---------------- */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg:#1F5FA4;
  --bs-btn-hover-border-color:#1F5FA4;
  --bs-btn-focus-shadow-rgb: 43,108,176;
  border-radius:14px;
}
.btn-outline-light{border-radius:14px}

/* ---------------- SUB-HERO (used on inner pages) ---------------- */
.subhero{
  position: relative; padding: 64px 0;
  background:
    radial-gradient(900px 450px at 90% 10%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(800px 400px at 10% 90%, rgba(43,108,176,.25), transparent 60%),
    linear-gradient(90deg, var(--brand), var(--brand-2));
  overflow: hidden;
}
.subhero .subhero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,18,32,.25), rgba(11,18,32,.0));
  pointer-events:none;
}
.subhero .subhero-img{
  position:absolute; right:-6%; bottom:-30%; width:50%; max-width:900px;
  opacity:.12; border-radius:36px;
  filter:contrast(105%) saturate(110%);
  pointer-events:none;
}

/* Badge variation for light backgrounds (fix for badges in light sections) */
.bg-light .badge-glass {
  background: rgba(2,6,23,.08);
  border: 1px solid rgba(2,6,23,.12);
  color: var(--ink);
}

/* ---------------- STICKY CTA BAR (services page) ---------------- */
.cta-sticky{
  position: sticky; bottom: 0; z-index: 5;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.2);
}

/* ---------------- CATALOGUE PAGE ---------------- */
.catalog-thumb{ position: relative; border-radius: 18px 18px 0 0; overflow: hidden; }
.catalog-thumb img{ display:block; transition: transform .25s ease; }
.catalog-card:hover .catalog-thumb img{ transform: scale(1.02); }
/* Category tag on catalogue thumbnails */
.catalog-tag{
  position:absolute; left:12px; top:12px;
  background: rgba(2,6,23,.75); color:#fff;
  font-size:.75rem; padding:.25rem .5rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.25);
}
/* Input group tweaks for catalogue search bar */
.input-group.input-group-sm .form-control{ border-radius: 0 .375rem .375rem 0; }

/* ---------------- PDF PREVIEW MODAL ---------------- */
.pdf-frame { height: 78vh; }
@media (max-width: 991.98px){ .pdf-frame { height: 65vh; } }

/* ---------------- CONTACT PAGE ---------------- */
.map-card{ background:#fff; border:1px solid rgba(2,6,23,.08); }
.map-embed{ display:block; width:100%; height:420px; border:0; }
@media (max-width: 991.98px){ .map-embed{ height:320px; } }