:root{
      --primary:#0b76ef;
      --dark:#0b2636;
      --muted:#6b7280;
      --card-bg:#ffffff;
      --container-max:1200px;
      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    body{margin:0;color:#222;background:#f6f7fb;line-height:1.5}
    a{color:inherit;text-decoration:none}

    /* Header */
    .site-header{background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));backdrop-filter:blur(4px);position:sticky;top:0;z-index:1030;box-shadow:0 1px 6px rgba(16,24,40,0.06)}
    .brand .logo{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#62b3ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
    .navbar-nav .nav-link{font-weight:600}
    .hero{position:relative;overflow:hidden}
    .carousel-item {
    height: 80vh;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
    }

    .hero-content{position:absolute;top:18%;left:6%;color:#fff;z-index:20;max-width:56%}
    .hero h1{margin:0; font-weight: bold; font-size:clamp(26px,4vw,44px);line-height:1.05;text-shadow:0 6px 18px rgba(0,0,0,0.45)}
    .hero p{margin-top:12px;color:rgba(255,255,255,0.95);text-shadow:0 4px 10px rgba(0,0,0,0.35)}
    .btn-cta{display:inline-block;margin-top:16px;padding:15px 22px;background:var(--primary);color:#fff;border-radius:8px;font-weight:900}

    section{padding:0px 0}
    .section-title{max-width:var(--container-max);margin:0 auto 28px;padding:50px 18px 0px 18px}
    .section-title h2{margin:0;font-size:26px; font-weight: bold;}
    .section-title p{color:var(--muted);margin-top:8px}

    .about-card{background:var(--card-bg);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(13,27,41,0.06)}
    .service{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(13,27,41,0.04);text-align:center;height:100%}
    .service img{width:100%;height:200px;object-fit:cover;border-radius:8px}
    .map-responsive{position:relative;overflow:hidden;padding-bottom:56.25%;height:0;border-radius:12px}
    .map-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

    footer{background:#d3d3d3;color:#333;padding:40px 0}
    .footer-inner{max-width:var(--container-max);margin:0 auto;padding:0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
    .small{font-size:13px;color:rgba(51,51,51,0.8)}

    @media (max-width:900px){
      .hero-content{max-width:86%}
      .carousel-item{height:50vh}
    }

    /* Utility for phone button */
    .call-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;background:#e9f5ff;color:var(--primary);font-weight:700;border:1px solid rgba(11,118,239,0.12)}
    #contactForm{
        padding-bottom: 20px;
    }

    .about-banner {
  position: relative;
  height: 60vh;
  background: url('../images/abt-banner.jpg')
    center center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* dark overlay */
}

.about-banner .container {
  position: relative;
  z-index: 2;
}

.about-banner h1 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.breadcrumb {
  background: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #f1f1f1;
}

/* Floating Buttons */
.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.floating-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.floating-btn.whatsapp {
  background: #25D366;
  color: white;
}

.floating-btn.call {
  background: #0078FF;
  color: white;
}

.floating-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .floating-buttons {
    bottom: 15px;
    right: 15px;
  }
  
  .floating-btn {
    width: 50px;
    height: 50px;
  }
  
  .floating-btn svg {
    width: 24px;
    height: 24px;
  }
}