/* ───────────────────────────────────────────
   GLOBAL RESET & UTILITIES
──────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;line-height:1.6;color:#333;overflow-x:hidden;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
html {
  scroll-padding-top: 60px; /* Adjust based on your header height */
}


/* ───────────────────────────────────────────
   HEADER / NAVIGATION
──────────────────────────────────────────── */
header{
  background:linear-gradient(135deg,#2E5BBA 0%,#1E3A8A 100%);
  color:#fff;
  padding:1rem 0;
  position:fixed;
  top:0;left:0;width:100%;
  z-index:1000;
  box-shadow:0 2px 20px rgba(0,0,0,.1);
  transition:all .3s ease;
}

/* container inside <header> */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* clickable brand block */
a.logo{
  display:flex;
  align-items:center;
  gap:15px;
  text-decoration:none;
  color:inherit;
  transition:transform .3s ease;
  cursor:pointer;
}
a.logo:hover{transform:scale(1.02);}

/* ADL logo image */
#site-logo{
  width:75px;
  height:75px;
  border-radius:10px;
  object-fit:cover;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition:transform .25s ease, filter .25s ease;
}

/* Logo hover effect */
.logo:hover #site-logo{
  transform:translateY(-2px);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

/* Brand text */
.logo h1{
  font-size:1.9rem;
  font-weight:bold;
}

/* Navigation links */
.nav-links{
  display:flex;
  list-style:none;
  gap:30px;
}
.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  padding:10px 15px;
  border-radius:25px;
  transition:all .3s ease;
}
.nav-links a:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}

/* Burger menu (mobile) */
.menu-toggle{
  display:none;
  font-size:2rem;
  color:#fff;
  background:none;
  border:none;
  padding:5px;
  margin-left:auto;
  cursor:pointer;
}

/* ───────────────────────────────────────────
   HERO
──────────────────────────────────────────── */
.hero{
  background:linear-gradient(135deg,#2E5BBA 0%,#1E3A8A 100%);
  color:#fff;
  min-height:90vh;
  padding:120px 0 80px;
  text-align:center;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

/* Decorative overlay */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:.3;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'><defs><pattern id='g' width='100' height='100' patternUnits='userSpaceOnUse'><circle cx='25' cy='25' r='1' fill='rgba(255,255,255,.05)'/><circle cx='75' cy='75' r='1' fill='rgba(255,255,255,.05)'/></pattern></defs><rect width='100' height='20' fill='url(%23g)'/></svg>");
  pointer-events:none;
}

.hero-content{
  z-index:2;
  animation:fadeInUp .8s ease;
  color:#fff;
}

/* ───────────────────────────────────────────
HERO TEXT COLOR - STRONGER FIX
──────────────────────────────────────────── */

/* Force ALL hero text to be white - no exceptions */
.hero,
.hero *,
.hero h1,
.hero h2,
.hero p,
.hero-content,
.hero-content * {
color: #fff !important;
}

/* Ensure hero content stays white during animation */
.hero-content {
z-index: 2;
animation: fadeInUp .8s ease;
color: #fff !important;
}

/* Specific hero elements */
.hero .hero-content h1 {
color: #fff !important;
font-size: 2.7rem;
margin-bottom: 20px;
font-weight: 700;
}

.hero .hero-content h2 {
color: #fff !important;
}

.hero .hero-content p {
color: #fff !important;
font-size: 1.3rem;
margin-bottom: 30px;
opacity: .9;
}

/* CTA button text */
.cta-button {
display: inline-block;
background: linear-gradient(45deg,#FF6B35,#ff8c42);
color: #fff !important;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
transition: all .3s ease;
box-shadow: 0 10px 30px rgba(255,107,53,.3);
position: relative;
z-index: 3;
text-decoration: none;
}

.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255,107,53,.4);
color: #fff !important;
}

/* ───────────────────────────────────────────
   SERVICES
──────────────────────────────────────────── */
.services{background:#f8fafc;padding:80px 0;}
.section-title{font-size:2.5rem;color:#2E5BBA;text-align:center;margin-bottom:20px;font-weight:700;}
.section-subtitle{font-size:1.2rem;color:#666;text-align:center;margin-bottom:60px;}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;}
.service-card{background:#fff;padding:40px 30px;border-radius:15px;text-align:center;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:all .4s ease;cursor:pointer;}
.service-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(46,91,186,.05),transparent);transition:all .6s ease;}
.service-card:hover::before{left:100%;}
.service-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,.15);}
.service-icon{font-size:3rem;margin-bottom:20px;transition:transform .3s ease;}
.service-card:hover .service-icon{transform:scale(1.1);}
.service-card h3{font-size:1.5rem;margin-bottom:15px;color:#2E5BBA;font-weight:600;}
.service-card p{color:#666;line-height:1.6;}

/* ───────────────────────────────────────────
   REVIEWS
──────────────────────────────────────────── */
.reviews{padding:80px 0;background:#fff;}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:60px;}
.review-card{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:all .3s ease;}
.review-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.15);}
.review-card .stars{color:#FFD700;font-size:1.2rem;margin-bottom:15px;}
.review-card p{font-style:italic;color:#666;line-height:1.6;margin-bottom:20px;}
.reviewer{display:flex;justify-content:space-between;align-items:center;}
.reviewer strong{color:#2E5BBA;font-weight:700;}
.reviewer span{color:#999;font-size:.9rem;}
.google-reviews-widget{background:#f8fafc;padding:40px;border-radius:15px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.1);}
.review-actions{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.leave-review-btn,.view-all-reviews{display:inline-flex;align-items:center;gap:10px;padding:12px 30px;border-radius:25px;font-weight:700;transition:all .3s ease;}
.leave-review-btn{background:linear-gradient(45deg,#FF6B35,#ff8c42);color:#fff;}
.leave-review-btn::before{content:'⭐';}
.leave-review-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(255,107,53,.3);}
.view-all-reviews{background:transparent;color:#2E5BBA;border:2px solid #2E5BBA;}
.view-all-reviews:hover{background:#2E5BBA;color:#fff;}

/* ───────────────────────────────────────────
REVIEW SECTION SPACING FIX
──────────────────────────────────────────── */

.google-reviews-widget p {
margin-bottom: 30px;  /* Add space below “We’re proud…” text */
}

/* Alternative: Add space above the buttons instead */
.review-actions {
margin-top: 30px;     /* Add space above the review buttons */
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}

/* ───────────────────────────────────────────
   MAP / COVERAGE
──────────────────────────────────────────── */
.coverage{padding:80px 0;background:#f8fafc;}
.map-container{background:#fff;border-radius:15px;padding:40px;text-align:center;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);}
#google-map{width:100%;height:400px;border-radius:15px;border:3px solid #2E5BBA;box-shadow:0 10px 30px rgba(0,0,0,.1);}
.map-fallback{width:300px;height:300px;border:3px solid #2E5BBA;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(46,91,186,.1),rgba(30,58,138,.1));animation:pulse 2s infinite;}
.center-point{width:20px;height:20px;border-radius:50%;background:#FF6B35;box-shadow:0 0 20px rgba(255,107,53,.5);}
.location-pins{position:absolute;inset:0;}
.pin{position:absolute;width:12px;height:12px;border-radius:50%;background:#2E5BBA;animation:bounce 2s infinite;cursor:pointer;transition:all .3s ease;}
.pin:hover{background:#FF6B35;transform:scale(1.2);}
.pin:nth-child(1){top:20%;left:30%;animation-delay:.2s;}
.pin:nth-child(2){top:30%;right:25%;animation-delay:.4s;}
.pin:nth-child(3){bottom:25%;left:40%;animation-delay:.6s;}
.pin:nth-child(4){bottom:30%;right:35%;animation-delay:.8s;}
.map-instructions{margin-top:20px;padding:15px;border-radius:10px;font-size:.9rem;color:#666;background:rgba(46,91,186,.1);}
.coverage-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px;}
.area-tag{background:#2E5BBA;color:#fff;padding:10px 20px;border-radius:25px;font-weight:500;text-align:center;cursor:pointer;transition:all .3s ease;}
.area-tag:hover,.area-tag.active{background:#FF6B35;transform:scale(1.05);}

/* ───────────────────────────────────────────
   CONTACT
──────────────────────────────────────────── */
.contact {
  background: linear-gradient(135deg,#2E5BBA 0%,#1E3A8A 100%);
  color: #fff;
  padding: 80px 0;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-info h3 {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: 700;
}

/* Make entire contact items clickable */
.contact-item {
  display: block;
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  transition: all .3s ease;
  cursor: pointer;
}

.contact-item:hover {
  background: rgba(255,255,255,.2);
  transform: translateX(10px);
  text-decoration: none;
  color: #fff;
}

/* Inner content of contact items */
.contact-item-content {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #fff;
}

.contact-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

/* Contact form styles */
.contact-form {
  background: rgba(255,255,255,.1);
  padding: 40px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  transition: all .3s ease;
}

.contact-form:hover {
  background: rgba(255,255,255,.15);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #fff;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  color: #333;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,107,53,.3);
}

.form-group textarea {
  height: 200px;
  resize: vertical;
}

.submit-btn {
  width: 100%;
  background: linear-gradient(45deg,#FF6B35,#ff8c42);
  color: #fff;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255,107,53,.3);
}

/* ───────────────────────────────────────────
   SOCIALS
──────────────────────────────────────────── */
.social-links{
  text-align:center;
  padding:60px 0;
  background:#f8fafc;
}

.social-links h3{
  font-size:1.8rem;
  color:#2E5BBA;
  margin-bottom:35px;
  font-weight:700;
}

.social-icons{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.social-icons img{
  width:95px;
  height:95px;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
  transition:transform .25s ease, filter .25s ease;
}

.social-icons img[alt*="Facebook"]{
  transform:scale(1.2);
}

.social-icons a:hover img{
  transform: translateY(-5px) scale(1.10);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

.social-icons a:hover img[alt*="Facebook"]{
  transform: translateY(-5px) scale(1.30);
}

/* ───────────────────────────────────────────
   FOOTER
──────────────────────────────────────────── */
footer{background:#1a1a1a;color:#fff;text-align:center;padding:30px 0;}

/* Footer certification badges */
footer img{
  height:55px !important;
  object-fit:contain !important;
}

/* Footer badges container - desktop spacing */
footer div{
  gap:40px !important;
}

/* ───────────────────────────────────────────
   SCROLL PROGRESS
──────────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#2E5BBA,#FF6B35);z-index:1001;transition:width .1s ease;}

/* ───────────────────────────────────────────
   ANIMATIONS
──────────────────────────────────────────── */
.fade-in{opacity:0;transform:translateY(30px);transition:all .6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.05);opacity:1;}}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* ───────────────────────────────────────────
   RESPONSIVE (≤768 px)
──────────────────────────────────────────── */
@media(max-width:768px){
  .menu-toggle{display:block;}
  .nav-links{display:none;flex-direction:column;position:absolute;top:80px;right:20px;background:#1E3A8A;border-radius:10px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);min-width:200px;z-index:999;}
  .nav-links.active{display:flex;}
  .nav-links li{margin:5px 0;}
  .nav-links a{display:block;text-align:center;}
  .hero h1{font-size:1.53rem;} /* Much smaller for mobile readability */
  .hero{padding:120px 0 60px;min-height:70vh;} /* Reduced padding and height for mobile */
  .hero p{font-size:1.1rem;margin-bottom:25px;} /* Smaller subtitle text */
  .contact-content{grid-template-columns:1fr;gap:40px;}
  .map-fallback{width:250px;height:250px;}
  .services-grid,.reviews-grid{grid-template-columns:1fr;}
  
  /* NEW: Shrink header text by 15% on mobile */
  .logo h1{
    font-size:1.53rem; /* 15% smaller than 1.8rem */
  }
}

/* ───────────────────────────────────────────
   ACCESSIBILITY HELPERS
──────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}