/* =====================================================
   Antelope Infra & Technology - CLEAN MASTER CSS
   Fixes: Mobile navbar, customer slider, footer, logo bg
===================================================== */

:root{
  --brand-blue: #0d47a1;
  --brand-blue-2: #1976d2;
  --brand-cyan: #00bcd4;
  --bg-light: #f4f8ff;
  --shadow-1: 0 8px 20px rgba(0,0,0,0.10);
  --shadow-2: 0 14px 35px rgba(0,0,0,0.08);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg-light);
  padding-top: 76px; /* fixed navbar space */
}

/* =========================
   NAVBAR (MOBILE FIX)
========================= */
.navbar{ background: var(--brand-blue); }

.navbar .container{
  gap: 10px;
}

/* prevent wrapping that pushes toggler down */
.navbar .navbar-brand{
  min-width: 0;
  max-width: calc(100% - 70px);
}

.brand-text{
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* logo: round + transparent bg */
.ait-logo{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* mobile tweaks */
@media (max-width: 576px){
  body{ padding-top: 72px; }
  .ait-logo{ width: 40px; height: 40px; }
  .brand-text{ font-size: 15px; }
}

/* =========================
   HERO CAROUSEL
========================= */
.carousel-item{ position: relative; }

.carousel-img{
  width: 100%;
  height: 70vh;
  background-size: cover;
  background-position: center;
}

.carousel-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.carousel-caption{
  bottom: 18%;
  z-index: 2;
}

.carousel-caption h2{
  font-size: 2.4rem;
  font-weight: 700;
}
.carousel-caption p{ font-size: 1.1rem; }

@media(max-width:768px){
  .carousel-img{ height: 50vh; }
  .carousel-caption{
    bottom: 10%;
    text-align: center;
  }
  .carousel-caption h2{ font-size: 1.4rem; }
  .carousel-caption p{ font-size: 0.95rem; }
}

/* =========================
   SERVICES
========================= */
.services-section{ background: #ffffff; }

.service-card{
  padding: 35px 25px;
  border-radius: 18px;
  text-align: center;
  color: #fff;
  height: 100%;
  transition: 0.3s;
  box-shadow: var(--shadow-1);
}
.service-card:hover{ transform: translateY(-8px); }

.service-card i{
  font-size: 40px;
  margin-bottom: 20px;
}

.service-blue{ background: linear-gradient(135deg,#2196f3,#1e88e5); }
.service-orange{ background: linear-gradient(135deg,#ff9800,#f57c00); }
.service-green{ background: linear-gradient(135deg,#4caf50,#388e3c); }

/* =========================
   TESTIMONIALS
========================= */
.testimonial-single{
  max-width: 700px;
  background: #fff;
  padding: 40px;
  border-radius: 15px;
}

.testimonial-text{
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: #333;
}

@media(max-width:768px){
  .testimonial-single{ padding: 25px; }
  .testimonial-text{ font-size: 16px; }
}

/* =========================
   CUSTOMERS SLIDER (4/2/1 FIXED)
========================= */
.customers-slider-section{
  background: linear-gradient(135deg, #f8fbff, #eef4ff);
}

.customers-slide{
  display: flex;
  gap: 18px;
  padding: 10px 58px; /* space for arrows */
  align-items: stretch;
}

/* 4 cards desktop */
.customer-card{
  flex: 0 0 calc(25% - 14px);
  height: 170px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: 0.35s ease;
}

.customer-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  transition: 0.35s ease;
}

.customer-name{
  width: 100%;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.70);
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(4px);
}

.customer-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 45px rgba(0,0,0,0.12);
}
.customer-card:hover .customer-overlay{
  background: rgba(0,0,0,0.28);
}

/* arrows: keep outside, no overlap */
#customersCarousel .carousel-control-prev,
#customersCarousel .carousel-control-next{
  width: 10%;
}

#customersCarousel .carousel-control-prev{ left: -10px; }
#customersCarousel .carousel-control-next{ right: -10px; }

/* Tablet: 2 cards */
@media (max-width: 992px){
  .customers-slide{ padding: 10px 48px; }
  .customer-card{ flex: 0 0 calc(50% - 9px); }
}

/* Mobile: 1 card + arrows closer */
@media (max-width: 576px){
  .customers-slide{ padding: 10px 38px; }
  .customer-card{
    flex: 0 0 100%;
    height: 160px;
  }
  #customersCarousel .carousel-control-prev{ left: -5px; }
  #customersCarousel .carousel-control-next{ right: -5px; }
}

/* =========================
   CONTACT PAGE SUPPORT
========================= */
.contact-hero{
  height: 40vh;
  background: linear-gradient(rgba(13,71,161,0.85),rgba(13,71,161,0.85)),
              url('../images/img_2.jpg') center/cover no-repeat;
}

.office-glass, .form-glass{
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.10);
  height: 100%;
}

.divider{
  margin: 30px 0;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.icon-circle{
  width: 70px;
  height: 70px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

/* =========================
   COMPACT FOOTER
========================= */

.colorful-footer{
  background: linear-gradient(135deg, #0d47a1, #1976d2, #00bcd4);
  color: #ffffff;
  padding: 30px 0 15px;   /* 🔥 reduced height */
  text-align: center;
}

/* Logo */
.footer-logo{
  height: 60px;
  width: 60px;
  border-radius: 50%;
  object-fit: contain;
  margin-bottom: 8px;
}

/* Company Name */
.company-name{
  margin: 0;
  font-weight: 600;
  font-size: 18px;
}

/* Tagline */
.footer-tagline{
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 12px;
}

/* Contact inline */
.footer-contact{
  font-size: 14px;
  margin-bottom: 10px;
}

.footer-contact a{
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
}

.footer-contact a:hover{
  text-decoration: underline;
}

.footer-separator{
  margin: 0 10px;
  opacity: 0.7;
}

/* Social icons */
.footer-social{
  margin-bottom: 10px;
}

.footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  font-size: 16px;
  transition: 0.3s ease;
}

.footer-social a:hover{
  background: #ffffff;
  color: #0d47a1;
  transform: translateY(-3px);
}

/* Bottom text */
.footer-bottom{
  font-size: 12px;
  opacity: 0.85;
}

/* Mobile */
@media(max-width:576px){
  .footer-logo{
    height: 50px;
    width: 50px;
  }
  .company-name{
    font-size: 16px;
  }
  .footer-tagline{
    font-size: 12px;
  }
}
/* Better spacing for 3 contact items */
.footer-contact{
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.footer-separator{
  margin: 0 6px;
  opacity: 0.7;
}

@media(max-width:576px){
  .footer-contact{
    flex-direction: column;
    gap: 4px;
  }
  .footer-separator{
    display: none;
  }
}

/* ==========================================
   PREMIUM FLOATING BUTTONS (UPGRADED)
========================================== */

/* WhatsApp Button */
.whatsapp-float{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 999;
  transition: 0.3s ease;
}

/* Pulse Animation */
.whatsapp-float::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  animation: pulse 2s infinite;
  z-index: -1;
}

@keyframes pulse{
  0%{ transform: scale(1); opacity: 0.7; }
  70%{ transform: scale(1.4); opacity: 0; }
  100%{ opacity: 0; }
}

.whatsapp-float:hover{
  transform: scale(1.1);
}

/* Call Button */
.call-float{
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background: #ff5722;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 999;
  transition: 0.3s ease;
}

.call-float:hover{
  transform: scale(1.1);
}

/* Mobile Adjustments */
@media(max-width:576px){
  .whatsapp-float,
  .call-float{
    width: 55px;
    height: 55px;
  }
}

/* ==========================================
   TRANSPARENT NAVBAR (HOMEPAGE ONLY)
========================================== */

body.homepage .navbar{
  background: rgba(13,71,161,0.35) !important;
backdrop-filter: blur(8px);
}

body.homepage #mainCarousel{
  margin-top: -76px;
}

@media(max-width:576px){
  body.homepage #mainCarousel{
    margin-top: -72px;
  }
}

/* =========================
   NAVBAR TEXT VISIBILITY FIX
========================= */

.navbar .nav-link{
  color: #ffffff !important;
  font-weight: 500;
}

.navbar .nav-link:hover{
  color: #ffd54f !important;
}

.navbar .dropdown-menu{
  border-radius: 10px;
}

.navbar .dropdown-item{
  font-weight: 500;
}

/* =========================
   LOCATIONS SECTION STYLING
========================= */

.locations-section{
  background: #ffffff;
}

.locations-heading{
  font-weight: 700;
  font-size: 32px;
  color: #0d47a1;
  position: relative;
}

.locations-heading::after{
  content: "";
  width: 80px;
  height: 3px;
  background: #ff9800;
  display: block;
  margin: 12px auto 0;
  border-radius: 10px;
}

/* Card */
.location-card{
  background: #f9fbff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: 0.3s;
}

.location-card:hover{
  transform: translateY(-6px);
}

/* City Name */
.city-name{
  font-size: 22px;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 8px;
}

/* Address */
.address-text{
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Map Wrapper */
.map-wrapper{
  border-radius: 15px;
  overflow: hidden;
  border: 4px solid #e3f2fd;
  margin-bottom: 15px;
}

.map-wrapper iframe{
  width: 100%;
  height: 250px;
  border: 0;
}

/* Buttons */
.location-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-call{
  background: #ff5722;
  color: #ffffff;
  border-radius: 30px;
  padding: 8px 18px;
  font-weight: 600;
}

.btn-call:hover{
  background: #e64a19;
}

.btn-direction{
  background: #0d47a1;
  color: #ffffff;
  border-radius: 30px;
  padding: 8px 18px;
  font-weight: 600;
}

.btn-direction:hover{
  background: #08306b;
}

/* Mobile */
@media(max-width:576px){
  .locations-heading{
    font-size: 26px;
  }
  .map-wrapper iframe{
    height: 200px;
  }
}

/* ==========================================
   ABOUT HERO HEADING FIX
========================================== */

.about-hero{
  height: 40vh;
  background: linear-gradient(rgba(13,71,161,0.85), rgba(13,71,161,0.85)),
              url('../images/img_2.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.about-hero h1{
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
}

.about-hero p{
  font-size: 18px;
  opacity: 0.95;
}


/* =====================================================
   PATCH (2026-02-24): Navbar uniform + remove hero gap + map borders
===================================================== */

/* 1) Make navbar uniform (same glass style everywhere) */
.navbar{
  background: rgba(13,71,161,0.35) !important;
  backdrop-filter: blur(8px);
}

/* Ensure nav links stay visible on glass */
.navbar .nav-link{ color:#ffffff !important; }
.navbar .nav-link:hover{ color:#ffd54f !important; }

/* 2) Remove space between navbar and top hero/headers (use .under-navbar on first section) */
.under-navbar{
  margin-top: -70px;
  padding-top: 70px;
}

/* 3) Border style for Bootstrap ratio maps (contact page) */
.map-wrapper.ratio{
  border-radius: 15px;
  overflow: hidden;
  border: 4px solid #e3f2fd;
}
.map-wrapper.ratio iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================
   ABOUT PAGE – PREMIUM GALLERY TILE (UPGRADED)
   - Gradient border
   - Title + icon ON image
   - Animated shine on hover
   - Equal height tiles
   - Smooth zoom
========================================== */

.gallery-tile{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 4px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#0d47a1,#00bcd4,#ff9800) border-box;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  transition: 0.4s ease;
  height: 100%;
}

.gallery-tile:hover{
  transform: translateY(-8px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.15);
}

/* Keep carousel and image equal height */
.gallery-tile .carousel,
.gallery-tile .carousel-inner,
.gallery-tile .carousel-item{
  height: 320px;
}

.gallery-img{
  height: 320px;
  width: 100%;
  object-fit: cover;
  transition: 0.55s ease;
}

.gallery-tile:hover .gallery-img{
  transform: scale(1.08);
}

/* ==========================================
   FIXED – LIGHT OVERLAY VERSION
========================================== */

.gallery-title{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* Very light gradient */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.05)
  );

  backdrop-filter: blur(1px);
  transition: 0.4s ease;
  z-index: 3;
}

.gallery-title i{
  display: block;
  font-size: 26px;
  margin-bottom: 6px;
}

/* Show full image by default */
.gallery-img{
  opacity: 1;
}

/* Optional: Slight brighten on hover */
.gallery-tile:hover .gallery-img{
  transform: scale(1.08);
  filter: brightness(1.05);
}