:root{
  --bg-0:#061318;          /* very dark */
  --bg-1:#0a1f2a;          /* dark greenish blue */
  --bg-2:#0e2c3a;          /* deep teal-blue */
  --card:#0f2a36;          /* card base */
  --stroke:rgba(255,255,255,.10);

  --primary:#1f7ae0;       /* blue */
  --accent:#22c55e;        /* green */
  --teal:#17d3c1;          /* teal accent */
  --text:#eaf2f7;
  --muted:rgba(234,242,247,.75);

  --radius:18px;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html, body { overflow-x: hidden; }

html{ scroll-behavior:smooth; }
body{
  font-family: "Urbanist","Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(31,122,224,.18), transparent 55%),
              radial-gradient(1000px 700px at 90% 10%, rgba(34,197,94,.16), transparent 50%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color: var(--text);
  overflow-x: hidden;
}

/* Helpers */
.text-white-75{ color: var(--muted) !important; }
.section{
  padding: 80px 0;
  position: relative;
}
.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

/* Topbar */
.topbar{
  background: linear-gradient(90deg, rgba(23,211,193,.15), rgba(31,122,224,.15));
  border-bottom: 1px solid var(--stroke);
}
.topbar-link{
  color: var(--text);
  text-decoration: none;
  opacity:.9;
}
.topbar-link:hover{ opacity:1; color: #fff; text-decoration: underline; }
.badge-glow, .badge-glow-alt{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}
.badge-glow{ box-shadow: 0 0 22px rgba(31,122,224,.25); }
.badge-glow-alt{ box-shadow: 0 0 22px rgba(34,197,94,.20); }

/* Navbar */
.site-header{
  background: rgba(6,19,24,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}
.navbar-brand .brand-mark{
  width: 44px; height: 44px;
  display: grid; place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(31,122,224,.35), rgba(34,197,94,.25));
  border:1px solid var(--stroke);
  box-shadow: 0 0 24px rgba(23,211,193,.12);
  font-size: 1.25rem;
}
.brand-title{
  display:block;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.05;
}
.brand-subtitle{
  display:block;
  font-size: .85rem;
  color: var(--muted);
}
.nav-link{
  color: rgba(255,255,255,.82) !important;
  font-weight: 600;
  border-radius: 999px;
  padding: .55rem .9rem !important;
}
.nav-link:hover, .nav-link.active{
  background: rgba(255,255,255,.06);
  color: #fff !important;
}


/* =========================
   NAVBAR LOGO STYLING
========================= */

.navbar-logo{
  height: 55px;              /* desktop size */
  width: auto;
  object-fit: contain;
  transition: transform .25s ease, filter .25s ease;
}

/* Slight hover polish */
.navbar-logo:hover{
  transform: scale(1.04);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* Tablet */
@media (max-width: 991px){
  .navbar-logo{
    height: 55px;
  }
}

/* Mobile */
@media (max-width: 576px){
  .navbar-logo{
    height: 38px;
  }
}



/* Buttons */
.btn-glow{
  border: 1px solid rgba(31,122,224,.35);
  background: linear-gradient(135deg, rgba(31,122,224,.95), rgba(23,211,193,.65));
  color:#fff;
  font-weight: 700;
  border-radius: 999px;
  padding: .7rem 1.05rem;
  box-shadow: 0 0 28px rgba(31,122,224,.25);
}
.btn-glow:hover{ filter: brightness(1.06); color:#fff; transform: translateY(-1px); }
.btn-glow-outline{
  border: 1px solid rgba(34,197,94,.45);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight: 700;
  border-radius: 999px;
  padding: .7rem 1.05rem;
  box-shadow: 0 0 28px rgba(34,197,94,.12);
}
.btn-glow-outline:hover{ background: rgba(34,197,94,.10); color:#fff; transform: translateY(-1px); }

/* Hero / Carousel */
/* =========================================
   HERO / CAROUSEL (FIXED + RESPONSIVE)
   - Equal height for all slides
   - Clear background images
   - Classy overlay (not too dark)
========================================= */

/* Set a single height system for the entire carousel */
:root{
  --hero-height-desktop: 70vh;
  --hero-height-tablet: 60vh;
  --hero-height-mobile: 55vh;
  --hero-min-height: 520px;
}

/* Ensure every carousel wrapper uses the SAME height */
.hero,
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item,
.hero-slide {
  height: var(--hero-height-desktop);
  min-height: var(--hero-min-height);
}

/* Tablet */
@media (max-width: 991px) {
  .hero,
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item,
  .hero-slide {
    height: var(--hero-height-tablet);
    min-height: 460px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .hero,
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item,
  .hero-slide {
    height: var(--hero-height-mobile);
    min-height: 420px;
  }
}

/* Background image clarity + consistent placement */
.hero-slide{
  position: relative;
  width: 100%;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;              /* keeps same look across all */
  /* If your images get cropped too much, try: background-size: 100% 100%; */

  /* Helps avoid blur/jitter on some browsers */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* CLASSY overlay: clear image but readable text */
.hero .overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 25% 20%, rgba(31,122,224,0.18), transparent 60%),
    radial-gradient(900px 500px at 80% 25%, rgba(34,197,94,0.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.62));
}

/* Keep content above overlay */
.hero .container,
.hero .container *{
  position: relative;
  z-index: 2;
}

/* Your min-vh-70 class was okay, but now height is controlled above */
.hero .min-vh-70{
  min-height: 100%;
}

/* Optional: improve text readability without darkening entire image */
.hero .col-lg-7{
  background: rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 18px;
  padding: 22px;
}

/* Mobile: reduce padding a bit */
@media (max-width: 576px){
  .hero .col-lg-7{
    padding: 16px;
    border-radius: 16px;
  }
}

/* Chip and badges (keep your style, just ensuring good contrast) */
.chip{
  display:inline-flex;
  align-items:center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: .45rem .75rem;
  color: #fff;
  font-weight: 700;
  letter-spacing:.2px;
  backdrop-filter: blur(10px);
}

.hero-badges .mini-badge{
  display:inline-flex;
  align-items:center;
  padding: .5rem .75rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  backdrop-filter: blur(10px);
}

/* Carousel arrows visibility (optional) */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55));
}

/* Indicators visible on dark images */
.carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: rgba(255,255,255,0.65);
}
.carousel-indicators .active{
  background-color: rgba(34,197,94,0.95);
}

/* Section Head */
.kicker{
  color: rgba(23,211,193,.95);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.section-title{
  font-family: "Poppins","Urbanist",sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
}
.section-text{ color: var(--muted); }

/* Media card */
.media-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.media-card img{ transform: scale(1.02); }
.media-card-badge{
  position:absolute;
  left: 16px; bottom: 16px;
  background: rgba(6,19,24,.70);
  border: 1px solid var(--stroke);
  padding: .55rem .85rem;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 700;
}

/* Tiles */
.info-tile{
  display:flex; gap:12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 18px rgba(0,0,0,.12);
}
.info-tile i{
  font-size: 1.25rem;
  color: var(--teal);
  margin-top: 2px;
}
.info-tile h6{ margin: 0; font-weight: 800; }
.info-tile p{ margin: 4px 0 0; color: var(--muted); }

/* Services */
/* =========================
   SERVICES (WITH IMAGES)
========================= */

.service-card{
  height: 100%;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow: hidden; /* important for image rounded corners */
  transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
}

/* Image top */
.service-img{
  position: relative;
  width: 100%;
  height: 255px;
  overflow: hidden;
}

.service-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}

/* subtle classy hover zoom */
.service-card:hover .service-img img{
  transform: scale(1.08);
  filter: contrast(1.05) saturate(1.05);
}

/* soft overlay gradient on image for premium look */
.service-img::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
  pointer-events:none;
}

/* Body spacing */
.service-body{
  padding: 22px;
}

/* Icon block */
.service-icon{
  width: 52px; height: 52px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31,122,224,.30), rgba(34,197,94,.22));
  border:1px solid var(--stroke);
  margin-top: -15px;      /* pulls icon up over image */
  margin-bottom: 14px;
  font-size: 1.3rem;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.service-icon i{
  display: inline-block;
  transition: transform .55s ease;
  transform-origin: center;
}

/* ✅ 360 degree rotation on hover */
.service-card:hover .service-icon i{
  transform: rotate(360deg);
}

.service-card h5{
  font-weight: 800;
  margin-bottom: 8px;
}

.service-card p{
  color: var(--muted);
  margin-bottom: 0;
}

/* Responsive image height */
@media (max-width: 576px){
  .service-img{ height: 155px; }
  .service-body{ padding: 18px; }
}

/* Brand strip remains same */
.brand-strip{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.brand-pill{
  padding: .55rem .9rem;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-weight: 700;
}


/* Why */
.glass-card{
  padding: 26px;
  border-radius: 26px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.why-item{
  display:flex; gap:12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  margin-bottom: 12px;
}
.why-item i{ font-size: 1.25rem; color: var(--accent); margin-top: 2px; }
.why-item h6{ margin:0; font-weight: 800; }
.why-item p{ margin: 4px 0 0; color: var(--muted); }

.progress-block{ margin-bottom: 16px; }
.glow-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.progress-bar{
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--teal), var(--accent));
}
.callout{
  background: linear-gradient(135deg, rgba(31,122,224,.25), rgba(34,197,94,.18));
  border: 1px solid var(--stroke);
  box-shadow: 0 0 28px rgba(23,211,193,.10);
}

/* Achievements */
.stat-card{
  text-align:center;
  padding: 22px 14px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.stat-icon{
  width: 54px; height: 54px;
  margin: 0 auto 10px;
  display:grid; place-items:center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(23,211,193,.22), rgba(31,122,224,.22));
  border:1px solid var(--stroke);
  font-size: 1.35rem;
}
.stat-number{
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  margin: 0;
}
.stat-label{ margin: 6px 0 0; color: var(--muted); font-weight: 700; }

/* Gallery */
.gallery-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.gallery-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-card:hover img{ transform: scale(1.06); }
.gallery-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.70));
  opacity: 0;
  transition: opacity .25s ease;
}
.gallery-card:hover .gallery-overlay{ opacity:1; }
.gallery-caption{
  position:absolute;
  left: 14px; bottom: 12px;
  display:flex; align-items:center; gap:8px;
  font-weight: 800;
  color:#fff;
}

/* Contact */
.contact-card, .form-card{
  padding: 28px;
  border-radius: 26px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.contact-item{
  display:flex; gap:12px;
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  margin-top: 12px;
}
.contact-icon{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(31,122,224,.22));
  border:1px solid var(--stroke);
  font-size: 1.2rem;
}
.link-soft{ color:#fff; text-decoration:none; }
.link-soft:hover{ text-decoration: underline; }
.form-control{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(6,19,24,.45) !important;
  color: #fff !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.55); }
.form-label{ color: rgba(255,255,255,.80); font-weight: 700; }

/* Map */
.map-wrap{
  padding: 0 0 80px;
}
.map-card{
  padding: 20px;
  border-radius: 26px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.map-head{ padding: 10px 10px 16px; }

/* Footer */
.footer{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
  border-top: 1px solid var(--stroke);
}
.footer-title{
  font-weight: 900;
  margin-bottom: 12px;
}
.footer-links, .footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li{ margin: 8px 0; }
.footer-links a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}
.footer-links a:hover{ color: #fff; text-decoration: underline; }
.footer-contact li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 10px 0;
  color: var(--muted);
}
.footer-contact i{ margin-top: 3px; color: rgba(23,211,193,.9); }
.footer-contact a{ color: var(--muted); text-decoration: none; font-weight: 700; }
.footer-contact a:hover{ color:#fff; text-decoration: underline; }
.social-icon{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color:#fff;
  text-decoration:none;
  box-shadow: 0 0 22px rgba(31,122,224,.12);
}
.social-icon:hover{ transform: translateY(-2px); color:#fff; }
.footer-bottom{
  border-top: 1px solid var(--stroke);
}

/* Floating Buttons */
/* =========================
   FLOATING ACTION BUTTONS (FIXED)
   - No extra horizontal space on mobile
   - Safe-area support
   - Icon-only on small screens
========================= */

.floating-actions{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* Prevent any overflow issues */
  max-width: calc(100vw - 24px);
  pointer-events: none; /* only buttons receive touch */
}

.floating-actions .fab{
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 25px rgba(0,0,0,.30);
  overflow: hidden;

  /* Prevent fixed element causing horizontal overflow */
  max-width: 100%;
  white-space: nowrap;
}

.fab i{ font-size: 1.25rem; }
.fab-label{ font-size: .95rem; }

.fab-whatsapp{
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(23,211,193,.70));
  box-shadow: 0 0 30px rgba(34,197,94,.28);
}
.fab-call{
  background: linear-gradient(135deg, rgba(31,122,224,.95), rgba(23,211,193,.65));
  box-shadow: 0 0 30px rgba(31,122,224,.28);
}

/* Glow pulse effect */
.fab::after{
  content:"";
  position:absolute;
  inset:-20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%);
  animation: pulse 1.9s infinite ease-in-out;
  pointer-events:none;
}
@keyframes pulse{
  0%,100%{ transform: scale(.92); opacity: .45; }
  50%{ transform: scale(1.08); opacity: .75; }
}

/* ✅ MOBILE FIX: Icon-only circular buttons to avoid extra width */
@media (max-width: 576px){
  .floating-actions{
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .floating-actions .fab{
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .floating-actions .fab-label{
    display: none !important;
  }
}


/* Responsive tweaks */
@media (max-width: 991px){
  .hero .min-vh-70{ min-height: 62vh; }
  .section{ padding: 64px 0; }
}
@media(max-width:767px)
{
	.cu-mb-ds-nn{
		display:none!important
	}
	.jf-cn-cntr{
		justify-content:center!important
	}
}
@media (max-width: 575px){
  .brand-subtitle{ display:none; }
  .gallery-card img{ height: 190px; }
  .fab-label{ display:none; }
  .fab{ padding: 12px; width: 52px; height: 52px; justify-content:center; }
}