/* =====================================================================
   global.css — Unified brand system for Aaryan Maruti Communications
   - Central variables
   - Consistent navbar, buttons, CTA, footer
   ===================================================================== */

/* Root brand variables */
:root{
  --primary-orange: #FF4D00;        /* main brand */
  --primary-orange-dark: #FF781D;   /* hover/accent */
  --primary-orange-pale: rgba(255,111,47,0.08);
  --white: #ffffff;
  --bg-light: #fbfbfb;
  --text-dark: #0c101a;
  --muted: #59606b;
  --card-shadow: 0 12px 30px rgba(12,16,20,0.06);
  --border-light: #e9eef2;
  --radius: 10px;
  --nav-height: 72px; /* used by script spacing */
  --container-gap: 1.25rem;
  --font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base reset + typography ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-family);
  color:var(--text-dark);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Section spacing (consistent) */
section, header, main { padding: 4rem 0; }

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

/* ---------- Buttons & CTAs ---------- */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  border:0;
  transition: transform .12s ease, box-shadow .12s;
}

/* Primary filled CTA */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-orange), var(--primary-orange-dark));
  color: var(--white);
  box-shadow: 0 12px 34px rgba(255,76,0,0.12);
  border: none;
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(255,76,0,0.16); }

/* Outline primary */
.btn-outline-primary{
  background: transparent;
  color: var(--primary-orange);
  border: 2px solid rgba(255,76,0,0.12);
}
.btn-outline-primary:hover{
  background: rgba(255,111,47,0.06);
}

/* Light button (used on hero over pale backgrounds) */
.btn-light {
  background: var(--white);
  color: var(--primary-orange);
  border: 2px solid rgba(255, 111, 47, 0.06);
}
.btn-light:hover{ background: var(--primary-orange-pale); color: var(--text-dark) }

/* Small / pill helpers */
.btn-sm{ padding:.38rem .8rem; font-size:.9rem; border-radius:8px; }

/* ---------- Navbar (clean, consistent) ---------- */
/* Use .custom-navbar for the fixed nav so script can find it */
.custom-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display:flex;
  align-items:center;
  z-index:1100;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 6px 20px rgba(12,16,20,0.03);
  transition: background .18s ease, box-shadow .18s ease;
  padding: .5rem 0;
}

/* brand */
.navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.logo-box{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--primary-orange), var(--primary-orange-dark));
  color:var(--white); font-weight:800; font-size:1.05rem;
  box-shadow: 0 8px 20px rgba(255,76,0,0.08);
}
.logo-text .logo-main{ font-weight:700; color:var(--text-dark); font-size:0.95rem; }
.logo-text .logo-sub{ font-size:0.65rem; color:var(--muted); margin-top:-2px; }

/* nav links */
.navbar-nav{ align-items:center; gap:.25rem; }
.navbar-nav .nav-link{
  color: var(--text-dark);
  padding: .45rem .6rem;
  border-radius:8px;
  font-weight:600;
}
.navbar-nav .nav-link:hover{ background: var(--primary-orange-pale); color: var(--primary-orange-dark); }
.navbar-nav .nav-link.active{
  background: linear-gradient(90deg, rgba(255,76,0,0.08), rgba(255,120,30,0.04));
  color: var(--primary-orange-dark);
}

/* dropdown look */
.dropdown-menu{
  border-radius: 10px;
  border: 1px solid var(--border-light);
  box-shadow: 0 12px 36px rgba(12,16,20,0.06);
  min-width:220px;
}
.dropdown-item{ font-weight:600; color:var(--text-dark) }
.dropdown-item:hover{ background: var(--primary-orange-pale); color: var(--primary-orange-dark) }

/* Toggler */
.navbar-toggler{ border:none; background:transparent; font-size:1.05rem; color:var(--text-dark) }

/* ---------- Hero / Cards / Inputs ---------- */
.hero-title{ font-size:2.4rem; font-weight:800; color:var(--text-dark) }
.hero-sub{ color:var(--muted); font-size:1rem; max-width:680px; }

/* cards */
.card-clean{
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  box-shadow:var(--card-shadow);
  padding:1.25rem;
}

/* form inputs */
.form-control{
  padding:.7rem .9rem;
  border-radius:8px;
  border:1.5px solid var(--border-light);
}
.form-control:focus{ border-color: rgba(255,76,0,0.18); box-shadow: 0 10px 30px rgba(255,76,0,0.06); outline:none; }

/* ---------- Footer ---------- */
.footer{
  background: linear-gradient(135deg,#0f1724,#1e293b);
  color: #cbd5e1;
  padding: 3rem 0 2rem;
}
.footer .logo-box{ width:46px; height:46px; font-size:1.05rem; }
.footer .section-title{ color:#fff; font-weight:700; margin-bottom:.75rem; }
.footer a{ color: #cbd5e1; text-decoration:none; }
.footer a:hover{ color:#fff }

/* small responsive helpers */
@media (max-width:991px){
  :root{ --nav-height: 64px }
  section, header { padding: 3rem 0; }
  .hero-title{ font-size:1.8rem; }
}
@media (max-width:575px){
  .btn { width:100%; justify-content:center; }
  .navbar-collapse { background: var(--white); padding: .8rem; border-radius:8px; box-shadow: 0 10px 30px rgba(12,16,20,0.04) }
}