/* --- FINAL RESPONSIVE FIX (Safe for all devices) --- */

/* Fix sticky header overlapping on mobile */
@media (max-width: 991px) {
  .header-area {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(6px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding: 12px 0;
  }

  body {
    padding-top: 90px !important; /* Prevent content overlap */
  }

  .main-menu-ex ul {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.95);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10000;
    text-align: center;
    padding: 15px 0;
  }

  .main-menu-ex ul li a {
    color: #fff !important;
    padding: 10px 15px;
    display: block;
  }

  .main-menu-ex ul li a:hover {
    color: #00bcd4 !important;
  }

  /* Hero section padding fix */
  .hero-section,
  .banner-area,
  .main-hero {
    padding-top: 120px !important;
  }

  /* Prevent image or floating icons overlapping text */
  .hero-section img,
  .banner-area img,
  .main-hero img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Fix floating elements like Get A Quote */
  .quote-btn,
  .floating-btn {
    top: 110px !important;
  }
}

/* Extra small devices fix */
@media (max-width: 575px) {
  body {
    padding-top: 100px !important;
  }
  .hero-section,
  .banner-area,
  .main-hero {
    padding-top: 130px !important;
  }
}

/* ✅ Responsive Fix for Mobile Layout Overlapping Issue */
@media only screen and (max-width: 991px) {

  /* Fix header/logo/menu overlapping */
  header, .header, .navbar, .main-header {
    position: relative !important;
    z-index: 1000 !important;
  }

  /* Adjust hero section spacing */
  .hero,
  .banner,
  .main-banner,
  .home-banner {
    margin-top: 80px !important; /* adjust spacing under header */
    padding-top: 40px !important;
  }

  /* Ensure hero text not hidden */
  .hero-content, 
  .banner-content, 
  .main-banner-content {
    position: relative;
    z-index: 2;
  }

  /* Prevent logo & nav overlapping */
  .site-logo img, 
  .logo img {
    max-width: 120px !important;
    height: auto !important;
  }

  /* Adjust "Get A Quote" button position */
  .get-quote, 
  .quote-btn, 
  .header-cta {
    position: fixed !important;
    right: 10px;
    bottom: 20px;
    z-index: 9999 !important;
    transform: none !important;
  }

  /* Prevent image & text overlap anywhere */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Smooth spacing for top section */
  body {
    padding-top: 0 !important;
    overflow-x: hidden;
  }

  /* Optional – better mobile text balance */
  h1, h2, h3 {
    word-wrap: break-word;
    line-height: 1.3;
  }
}

/* ===============================
   SERVICES SECTION RESPONSIVE FIX
   =============================== */
.services img {
  width: 100%;
  height: auto;
  max-height: 250px; /* prevent tall stretching */
  object-fit: cover; /* crop nicely on different screen ratios */
  border-radius: 10px;
}

.services h5 {
  font-weight: 600;
  margin-top: 10px;
}

.services p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* For very small mobile screens */
@media (max-width: 576px) {
  .services .col-md-4 {
    margin-bottom: 2rem;
  }
  .services img {
    max-height: 200px;
  }
}


/* ====== SERVICES SECTION LAYOUT FIX ====== */
.services .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.services .col-md-4 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.services .col-md-4:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.services img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.services h5 {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
}

.services p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  padding: 0 5px;
}

@media (max-width: 768px) {
  .services .col-md-4 {
    width: 100%;
    margin-bottom: 20px;
  }
  .services img {
    height: 200px;
  }
}


/* ===============================
   SERVICES SECTION COMPLETE FIX
   =============================== */
.services {
  background: #fff;
}

.services .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 25px;
}

.services .col-md-4 {
  flex: 1 1 30%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.06);
  padding: 20px 15px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.services .col-md-4:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.services img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.services h5 {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
}

.services p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0;
  padding: 0 8px;
}

/* responsive mobile fix */
@media (max-width: 768px) {
  .services .col-md-4 {
    flex: 1 1 100%;
  }
  .services img {
    height: 200px;
  }
}