:root{
  --accent:#f59e0b;           /* Amber */
  --accent-600:#d97706;
  --dark:#0b1326;
  --muted:#6b7280;
}

/* Global */
html{ scroll-behavior:smooth; }
body{ color:#111827; }
.section-title{ font-weight:800; letter-spacing:.2px; }
.required::after{ content:" *"; color:#ef4444; }

/* Topbar */
.topbar{ background:var(--dark); color:#e5e7eb; font-size:.95rem; }
.topbar a{ color:#e5e7eb; opacity:.9; }
.topbar a:hover{ opacity:1; }

/* Navbar */
.navbar .nav-link{ font-weight:600; color:#374151; }
.navbar .nav-link.active,
.navbar .nav-link:hover{ color:var(--accent-600); }
/* Put this in your CSS */
.navbar-brand .brand-logo{
  height: 40px;        /* tweak 28–40px to taste */
  width: auto;
}


/* Hero */
.hero{
  position:relative;
  background: radial-gradient(1200px 500px at 20% -10%, #1f2937 0%, #0f172a 60%, #0b1326 100%);
  color:#f9fafb;
  overflow:hidden;
  box-sizing: border-box;
}
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:5px;
  background:linear-gradient(#ffffff,#ffffff);
}

/* Crossfade hero */
.hero-crossfade { position: relative; }
.cf-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; border-radius:inherit;
  opacity:0; transition:opacity .9s ease-in-out;
}
.cf-slide.active{ opacity:1; }
.cf-overlay{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
  pointer-events:none;
}
.cf-caption{
  position:absolute; left:16px; right:16px; bottom:12px;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cf-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center;
}
.cf-dots button{
  width:8px; height:8px; border-radius:50%;
  border:none; background:#ffffff90; outline:0; padding:0;
  transition:transform .2s ease, background .2s ease;
}
.cf-dots button.active{ background:#fff; transform:scale(1.1); }

/* Cards & helpers */
.shadow-soft{ box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.icon-card i{ font-size:2rem; color:var(--accent-600); }

/* Brands */
.brand-list { gap:.25rem; }
.brand-logo{ height:35px; width:auto; transition:transform .2s ease, filter .2s ease, opacity .2s ease; }
.brand-list .list-group-item:hover .brand-logo{ transform:translateY(-2px); }


/* Service tiles */
/* Services */
.service-card {
  transition: transform .3s ease, box-shadow .3s ease;
  border-radius: 1rem;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.service-icon {
  width:60px; height:60px;
  border-radius:50%;
  background:rgba(245,158,11,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--accent-600);
  margin:0 auto;
}

/* Brands carousel */
.brand-img {
  height: 50px;
  width: auto;
  filter: grayscale(40%);
  transition: transform .3s ease, filter .3s ease;
}
.brand-img:hover {
  filter: none;
  transform: scale(1.1);
}


/* About — stacked photos collage */
.about-media { position: relative; }
.about-media .ratio > * { position: absolute; } /* IMPORTANT */
.about-main{
  inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.02);
  z-index:1;
}
.about-tile{
  width:44%; height:46%; object-fit:cover;
  border:3px solid #fff;
  transition:transform .25s ease, box-shadow .25s ease;
  z-index:2;
}
.about-tl{ top:10%; left:6%;  transform:rotate(-4deg); }
.about-br{ right:6%; bottom:8%; transform:rotate(3deg); }
.about-chip{ position:absolute; left:12px; top:12px; box-shadow:0 6px 16px rgba(0,0,0,.18); z-index:3; }
.about-stats{
  position:absolute; left:12px; bottom:12px; border-radius:14px;
  background:rgba(15,23,42,.55); color:#fff; backdrop-filter:blur(6px); z-index:3;
}
.about-media:hover .about-tile.about-tl{ transform:rotate(-6deg) translateY(-2px); }
.about-media:hover .about-tile.about-br{ transform:rotate(5deg)  translateY(-2px); }
.stat{ font-weight:800; font-size:1.35rem; }

/* Feature chips */
.feature-chip{
  display:flex; gap:.75rem; align-items:center;
  padding:.9rem; border:1px solid #e5e7eb; border-radius:1rem; background:#fff;
}
.feature-chip i{ font-size:1.4rem; color:var(--accent-600); }

/* Back to Top Button */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;            /* hidden by default */
  z-index: 1050;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: opacity 0.3s ease-in-out;
}

/* Buttons */
.btn-accent{ background:var(--accent); color:#111827; border:none; font-weight:700; }
.btn-accent:hover{ background:var(--accent-600); color:#fff; }
.btn-outline-light:hover{ color:#111827; background:#fff; }

/* WhatsApp FAB */
.whatsapp-fab{ position:fixed; right:16px; bottom:16px; z-index:1050; }

/* Forms */
.form-control:focus{ box-shadow:0 0 0 .25rem rgba(245,158,11,.25); border-color:var(--accent); }

/* Footer */
/* Footer Modern Design */
.footer {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.1);
}

.footer-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-link:hover {
  color: var(--accent);
}

.footer-social {
  color: #e5e7eb;
  transition: color .2s ease, transform .2s ease;
}
.footer-social:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

@media (max-width: 767.98px){
  body { outline: 2px solid transparent; }
  body * { outline: 1px dashed rgba(255,0,0,.25); } /* see which box sticks out */
}