/* ==========================================================================
   ROOPA AMBULANCE SERVICE — STYLESHEET
   ========================================================================== */

:root{
  --red:#f00420;
  --red-dark:#c40318;
  --blue:#0692ea;
  --blue-dark:#0574c0;
  --white:#ffffff;
  --bg-light:#f7faff;
  --ink:#111827;
  --muted:#64748b;
  --gradient-rb: linear-gradient(115deg, var(--red) 0%, #ff3f5c 35%, var(--blue) 100%);
  --gradient-rb-soft: linear-gradient(120deg, rgba(240,4,32,0.08), rgba(6,146,234,0.08));
  --shadow-soft: 0 10px 30px rgba(17,24,39,0.08);
  --shadow-lift: 0 20px 45px rgba(17,24,39,0.14);
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-display:'Poppins', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
}

*{box-sizing:border-box;}
.main{
    position: relative;
    overflow-x: hidden;
    z-index: 99;
}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display); font-weight:700; margin:0;}

p{margin:0; color:var(--muted); line-height:1.7;}

a{text-decoration:none; color:inherit;}

img{max-width:100%; display:block;}

button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:2.5px;
  color:var(--red);
  background:rgba(240,4,32,0.08);
  padding:6px 16px;
  border-radius:50px;
  margin-bottom:14px;
}
.eyebrow.center{display:block; width:fit-content; margin-left:auto; margin-right:auto;}

.section-title{
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight:700;
  color:var(--ink);
  margin-bottom:14px;
  letter-spacing:-0.5px;
}
.section-title.light{color:var(--white);}

.section-sub{
  max-width:640px;
  margin:0 auto;
  font-size:1.05rem;
}

.section-head{margin-bottom:48px;}
.ptb-80{ padding: 80px 0px;}



/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:99999;
  background:linear-gradient(160deg,#0b1220 0%, #14213b 100%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-inner{text-align:center;}
.preloader-pulse{width:220px; margin:0 auto 18px;}
.ecg-svg{width:100%; height:60px;}
.ecg-line{
  fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:ecgDraw 1.4s ease-in-out infinite;
}
@keyframes ecgDraw{
  0%{stroke-dashoffset:400;}
  60%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-400;}
}
.preloader-logo{
  font-family:var(--font-display); font-weight:900; letter-spacing:4px;
  font-size:1.6rem; color:var(--white);
}
.preloader-logo span{
  display:block; font-size:0.7rem; font-weight:600; letter-spacing:5px;
  color:var(--blue); margin-top:4px;
}

/* ==========================================================================
   TOP MARQUEE
   ========================================================================== */
.top-marquee{
  background:var(--ink);
  color:var(--white);
  overflow:hidden;
  white-space:nowrap;
  padding:9px 0;
  position:relative;
  z-index:1200;
}
.marquee-track{
  display:inline-flex;
  animation:marqueeScroll 32s linear infinite;
}
.marquee-item{
  display:inline-flex;
  align-items:center;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.2px;
  padding-right:60px;
  color:#e5e9f2;
}
.marquee-item i{color:var(--red); margin-right:8px;}
@keyframes marqueeScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.site-navbar{
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(10px);
  padding:14px 0;
  box-shadow:0 2px 18px rgba(17,24,39,0.06);
  transition:padding .3s ease, box-shadow .3s ease;
  z-index:1100;
}
.site-navbar.scrolled{
  padding:8px 0;
  box-shadow:0 6px 24px rgba(17,24,39,0.1);
}
.site-logo{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.4rem;
  letter-spacing:1px;
  color:var(--ink);
  line-height:1;
}
.site-logo span{
  display:block;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:3px;
  color:var(--blue);
  margin-top:3px;
}
.nav-links{gap:6px;}
.nav-link{
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink) !important;
  padding:10px 16px !important;
  position:relative;
  transition:color .25s ease;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:16px; right:16px; bottom:6px;
  height:2px;
  background:var(--gradient-rb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover, .nav-link.active{color:var(--red) !important;}
.nav-link:hover::after, .nav-link.active::after{transform:scaleX(1);}

.nav-cta-btn{
  background:var(--gradient-rb);
  color:var(--white) !important;
  border-radius:50px;
  padding:10px 22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  box-shadow:0 8px 20px rgba(240,4,32,0.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-cta-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(240,4,32,0.32); color:var(--white) !important;}
.nav-cta-btn i{font-size:1.1rem;}
.nav-cta-text{display:flex; flex-direction:column; line-height:1.15; font-size:0.68rem; letter-spacing:1px;}
.nav-cta-text strong{font-size:0.95rem; letter-spacing:0.3px;}

.navbar-toggler{border:none; box-shadow:none !important; color:var(--red); font-size:1.3rem;}

@media (max-width:991.98px){
  .nav-links{margin:16px 0;}
  .nav-cta-btn{width:100%; justify-content:center; margin-top:10px;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-section{position:relative;}
.hero-carousel .owl-stage-outer,
.hero-carousel .owl-stage,
.hero-carousel .owl-item{height:100%;}

.hero-slide{
  position:relative;
  height:auto;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  
}

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.78) 42%, rgba(6,20,40,0.45) 75%, rgba(6,20,40,0.25) 100%);
  z-index:1;
}
@keyframes heroZoom{
  0%{transform:scale(1);}
  100%{transform:scale(1.08);}
}
.hero-slide .container{position:relative; z-index:2;}

.hero-content{max-width:640px; padding:60px 0;}

.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  color:var(--white);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:2px;
  padding:7px 16px;
  border-radius:50px;
  margin-bottom:22px;
  opacity:0;
  animation:fadeUpIn .7s ease forwards;
  animation-delay:.15s;
}
.pulse-dot{
  color:var(--red);
  font-size:0.55rem;
  animation:pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.4; transform:scale(1.5);}
}

.hero-title{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight:900;
  color:var(--white);
  line-height:1.12;
  letter-spacing:-0.5px;
  margin-bottom:14px;
  opacity:0;
  animation:slideUpIn .8s ease forwards;
  animation-delay:.3s;
}
.hero-sub-strong{
  font-size:1.2rem;
  font-weight:700;
  background:var(--gradient-rb);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:16px;
  opacity:0;
  animation:fadeUpIn .8s ease forwards;
  animation-delay:.45s;
}
.hero-desc{
  color:#dfe4ee;
  font-size:1.02rem;
  margin-bottom:30px;
  opacity:0;
  animation:fadeUpIn .8s ease forwards;
  animation-delay:.6s;
}
.hero-btns{
  display:flex; flex-wrap:wrap; gap:16px;
  opacity:0;
  animation:scaleFadeIn .7s ease forwards;
  animation-delay:.78s;
}
@keyframes fadeUpIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
@keyframes slideUpIn{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}
@keyframes scaleFadeIn{from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);}}

.btn-hero-call{
  background:var(--gradient-rb);
  color:var(--white);
  padding:16px 28px;
  border-radius:50px;
  font-weight:700;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  gap:12px;
  box-shadow:0 12px 30px rgba(240,4,32,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-hero-call strong{display:block; font-size:1.02rem; font-weight:800;}
.btn-hero-call:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(240,4,32,0.42); color:var(--white);}

.btn-hero-whatsapp{
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.4);
  color:var(--white);
  padding:16px 28px;
  border-radius:50px;
  font-weight:700;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .25s ease;
}
.btn-hero-whatsapp i{color:#25D366; font-size:1.2rem;}
.btn-hero-whatsapp:hover{background:#25D366; border-color:#25D366; color:var(--white);}
.btn-hero-whatsapp:hover i{color:var(--white);}

.btn-hero-whatsapp-outline{
  background:transparent;
  border:1.5px solid var(--blue);
  color:var(--blue);
  padding:16px 28px;
  border-radius:50px;
  font-weight:700;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .25s ease;
}
.btn-hero-whatsapp-outline i{color:#25D366; font-size:1.2rem;}
.btn-hero-whatsapp-outline:hover{background:var(--blue); color:var(--white);}

.floating-icon{
  position:absolute;
  right:8%;
  top:22%;
  font-size:8rem;
  color:rgba(255,255,255,0.06);
  z-index:1;
  animation:floatIcon 5s ease-in-out infinite;
}
@keyframes floatIcon{
  0%,100%{transform:translateY(0) rotate(-4deg);}
  50%{transform:translateY(-22px) rotate(4deg);}
}
@media (max-width:991.98px){.floating-icon{display:none;}}

/* Owl nav arrows */
.hero-carousel .owl-nav{
  position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
  display:flex; justify-content:space-between; padding:0 24px; z-index:3;
}
.hero-carousel .owl-nav button.owl-prev,
.hero-carousel .owl-nav button.owl-next{
  width:50px; height:50px; border-radius:50%;
  background:var(--white) !important;
  color:var(--red) !important;
  font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
  transition:all .25s ease;
}
.hero-carousel .owl-nav button.owl-prev:hover,
.hero-carousel .owl-nav button.owl-next:hover{
  background:var(--blue) !important;
  color:var(--white) !important;
}
.hero-carousel .owl-dots{
  position:absolute; bottom:26px; left:0; right:0;
  display:flex; justify-content:center; gap:8px; z-index:3;
}
.hero-carousel .owl-dots .owl-dot span{
  width:9px; height:9px; margin:0; border-radius:50%;
  background:rgba(255,255,255,0.4); display:block; transition:all .25s ease;
}
.hero-carousel .owl-dots .owl-dot.active span{
  background:var(--gradient-rb); width:26px; border-radius:6px;
}
@media (max-width:576px){
  .hero-carousel .owl-nav{display:none;}
}

/* ==========================================================================
   EMERGENCY CTA STRIP
   ========================================================================== */
.emergency-strip{
  background:var(--gradient-rb);
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.strip-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.strip-left{display:flex; align-items:center; gap:16px;}
.strip-left i{font-size:2.1rem; color:var(--white); opacity:0.9;}
.strip-heading{color:var(--white); font-size:1.35rem; font-weight:600;}
.strip-sub{color:rgba(255,255,255,0.85); font-weight:600; margin-top:2px;}
.strip-right{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

.strip-call-btn{
  background:var(--white);
  color:var(--red);
  padding:12px 24px;
  border-radius:50px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
  transition:transform .25s ease;
}
.strip-call-btn:hover{transform:translateY(-2px); color:#fff;}
.strip-call-btn span{display:flex; flex-direction:column; font-size:0.68rem; letter-spacing:1px; line-height:1.2;}
.strip-call-btn strong{font-size:0.98rem;}
.phone-pulse{
  width:34px; height:34px; border-radius:50%;
  background:var(--red);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.phone-pulse::before{
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid var(--red);
  animation:phoneRing 1.6s ease-out infinite;
}
@keyframes phoneRing{
  0%{transform:scale(0.8); opacity:1;}
  100%{transform:scale(1.6); opacity:0;}
}
.strip-whatsapp-btn{
  background:rgba(255,255,255,0.15);
  border:1.5px solid rgba(255,255,255,0.5);
  color:var(--white);
  padding:12px 22px;
  border-radius:50px;
  font-weight:700;
  display:inline-flex; align-items:center; gap:10px;
  transition:all .25s ease;
}
.strip-whatsapp-btn:hover{background:var(--white); color:var(--red);}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-section{background:var(--bg-light);}
.about-media{position:relative; }
.about-img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  position:relative;
  z-index:2;
}
.about-shape{
  position:absolute;
  border-radius:50%;
  z-index:1;
}
.shape-red{
  width:150px; height:150px;
  background:radial-gradient(circle, rgba(240,4,32,0.18), transparent 70%);
  top:-40px; left:-40px;
}
.shape-blue{
  width:180px; height:180px;
  background:radial-gradient(circle, rgba(6,146,234,0.18), transparent 70%);
  bottom:-50px; right:-50px;
}
.experience-badge{
  position:absolute;
  bottom:24px; left:-24px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  z-index:3;
  border-left:4px solid var(--red);
}
.exp-num{
  font-family:var(--font-display);
  font-size:1.8rem;
  font-weight:900;
  background:var(--gradient-rb);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
}
.exp-label{font-size:0.75rem; font-weight:700; color:var(--ink); margin-top:4px; line-height:1.3;}

.about-text{margin-bottom:16px; font-size:0.98rem;}

.btn-know-more{
  background:var(--ink);
  color:var(--white);
  padding:14px 30px;
  border-radius:50px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  transition:all .25s ease;
}
.btn-know-more:hover{background:var(--gradient-rb); color:var(--white); transform:translateX(4px);}

@media (max-width:991.98px){
  .experience-badge{left:12px;}
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:34px 28px;
  height:100%;
  position:relative;
  box-shadow:var(--shadow-soft);
  border:1.5px solid rgba(240,4,32,0.25);;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow:hidden;
}
.why-card::before{
  content:'';
  position:absolute; inset:0;
  background:var(--gradient-rb-soft);
  opacity:0;
  transition:opacity .3s ease;
}
.why-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lift);
  border-color:rgba(240,4,32,0.25);
}
.why-card:hover::before{opacity:1;}
.why-num{
  position:absolute; top:18px; right:22px;
  font-family:var(--font-display); font-weight:900;
  font-size:2.2rem;
  color:rgba(17,24,39,0.06);
  z-index:0;
}
.why-icon{
  width:64px; height:64px;
  border-radius:16px;
  background:var(--gradient-rb);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:20px;
  position:relative; z-index:1;
  transition:transform .3s ease;
}
.why-card:hover .why-icon{transform:rotate(-8deg) scale(1.08);}
.why-card h3{font-size:1.15rem; margin-bottom:10px; position:relative; z-index:1;}
.why-card p{font-size:0.92rem; position:relative; z-index:1;}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats-section{
  background:linear-gradient(120deg, #0b1220 0%, #142a4a 55%, #0b1220 100%);
  position:relative;
  overflow:hidden;
}
.stats-shapes{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(240,4,32,0.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(6,146,234,0.22), transparent 45%);
  animation:statsDrift 10s ease-in-out infinite alternate;
}
@keyframes statsDrift{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.08) translate(10px,-10px);}
}
.stat-card{position:relative; z-index:1;}
.stat-card i{font-size:2rem; color:var(--blue); margin-bottom:14px;}
.stat-card h3{
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  color:var(--white);
  font-weight:600;
  margin-bottom:6px;
}
.stat-card p{color:#aeb8cc; font-weight:600; letter-spacing:0.5px; font-size:0.88rem;}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.service-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
}
.service-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lift);
}
.service-img-wrap{
  position:relative;
  height:auto;
  overflow:hidden;
}
.service-img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.service-card:hover .service-img-wrap img{transform:scale(1.1);}
.service-icon{
  position:absolute; bottom:-24px; left:24px;
  width:56px; height:56px;
  border-radius:16px;
  background:var(--gradient-rb);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem;
  box-shadow:0 10px 22px rgba(240,4,32,0.3);
  transition:transform .35s ease;
}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-6deg);}
.service-body{padding:40px 26px 26px; flex:1; display:flex; flex-direction:column;}
.service-body h3{font-size:1.12rem; margin-bottom:10px;}
.service-short{font-size:0.92rem; margin-bottom:0;}
.service-full{display:none;}
.service-actions{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn-read-more{
  border:1.5px solid var(--blue);
  color:var(--blue);
  background:transparent;
  padding:10px 18px;
  border-radius:50px;
  font-weight:700;
  font-size:0.82rem;
  transition:all .25s ease;
}
.btn-read-more:hover{background:var(--blue); color:var(--white);}
.btn-service-call{
  background:var(--gradient-rb);
  color:var(--white);
  padding:10px 18px;
  border-radius:50px;
  font-weight:700;
  font-size:0.82rem;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s ease;
}
.btn-service-call:hover{transform:translateY(-2px); color:var(--white);}

.service-modal .modal-content{border-radius:var(--radius-lg); border:none; overflow:hidden;}
.service-modal .modal-header{background:var(--gradient-rb); border:none;}
.service-modal .modal-title{color:var(--white); font-size:1.1rem; display:flex; align-items:center; gap:10px;}
.service-modal .btn-close{filter:invert(1);}
.service-modal .modal-body p{color:var(--ink); opacity:0.85;}

/* ==========================================================================
   EMERGENCY BANNER
   ========================================================================== */
.emergency-banner{
  background:var(--bg-light);
}
.banner-img-wrap{position:relative; max-width:520px;}
.banner-img-wrap img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);}
.banner-pulse-ring{
  position:absolute; top:20px; right:20px;
  width:70px; height:70px;
  border-radius:50%;
  background:rgba(240,4,32,0.35);
  animation:phoneRing 1.8s ease-out infinite;
}
.banner-icon{
  position:absolute; top:20px; right:20px;
  width:70px; height:70px;
  border-radius:50%;
  background:var(--gradient-rb);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 10px 24px rgba(240,4,32,0.35);
}
.banner-text{font-size:1.05rem; margin-bottom:28px;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-section{background:var(--white);}
.contact-box{
  background:linear-gradient(160deg, #0b1220 0%, #142a4a 100%);
  border-radius:32px;
  padding:64px 40px;
  position:relative;
  overflow:hidden;
}
.contact-box::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(240,4,32,0.15), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(6,146,234,0.2), transparent 45%);
}
.contact-box .eyebrow{position:relative; z-index:1;}
.contact-box .section-title{color:var(--white); position:relative; z-index:1;}
.contact-text{color:#c3cbdc; max-width:520px; margin:0 auto 40px; position:relative; z-index:1; font-size:1.02rem;}
.contact-info-row{position:relative; z-index:1; margin-bottom:36px;}
.contact-info-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-md);
  padding:26px 20px;
  text-align:center;
  transition:transform .3s ease, background .3s ease;
}
.contact-info-card:hover{transform:translateY(-6px); background:rgba(255,255,255,0.1);}
.contact-info-card i{font-size:1.6rem; color:var(--blue); margin-bottom:12px;}
.contact-info-card h4{color:var(--white); font-size:0.95rem; margin-bottom:6px;}
.contact-info-card p{color:#c3cbdc; font-weight:600;}
.contact-box .hero-btns{position:relative; z-index:1;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:#0b1220;
  color:#aeb8cc;
  padding:70px 0 24px;
}
.footer-logo{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.4rem;
  color:var(--white);
  margin-bottom:14px;
}
.footer-logo span{display:block; font-size:0.62rem; letter-spacing:3px; color:var(--blue); margin-top:4px;}
.footer-desc{font-size:0.92rem; max-width:320px; color:#8f9ab3;}
.site-footer h5{color:var(--white); font-size:1rem; margin-bottom:20px; font-weight:700;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:12px;}
.footer-links a{color:#aeb8cc; font-size:0.92rem; transition:color .25s ease, padding-left .25s ease;}
.footer-links a:hover{color:var(--blue); padding-left:4px;}
.footer-phone{color:var(--white); font-size:1.3rem; font-weight:800; margin-bottom:18px;}
.footer-btns{display:flex; gap:12px;}
.footer-call-btn{
  background:var(--gradient-rb);
  color:var(--white);
  padding:11px 22px;
  border-radius:50px;
  font-weight:700;
  font-size:0.85rem;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s ease;
}
.footer-call-btn:hover{transform:translateY(-2px); color:var(--white);}
.footer-whatsapp-btn{
  width:44px; height:44px;
  border-radius:50%;
  background:#25D366;
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  transition:transform .25s ease;
}
.footer-whatsapp-btn:hover{transform:translateY(-2px); color:var(--white);}
.site-footer hr{border-color:rgb(255 255 255 / 71%); margin:40px 0 20px;}
.footer-copy{font-size:0.85rem; color:#7c869e; text-align:center; margin:0;}

/* ==========================================================================
   FLOATING ACTION BUTTONS
   ========================================================================== */
.floating-actions{
  position:fixed;
  right:22px; bottom:22px;
  display:flex; flex-direction:column; gap:14px;
  z-index:1000;
}
.fab{
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  color:var(--white);
  box-shadow:0 10px 26px rgba(0,0,0,0.25);
  position:relative;
  transition:transform .25s ease;
}
.fab:hover{transform:scale(1.08); color:var(--white);}
.fab-call{background:var(--gradient-rb);}
.fab-call::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--red);
  animation:phoneRing 1.8s ease-out infinite;
}
.fab-whatsapp{background:#25D366;}
.fab-tooltip{
  position:absolute;
  right:70px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink);
  color:var(--white);
  padding:6px 14px;
  border-radius:8px;
  font-size:16px;
  font-weight:400;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.fab:hover .fab-tooltip{opacity:1; transform:translateY(-50%) translateX(0);}

@media (max-width:576px){
  .fab{width:48px; height:48px; font-size:1.25rem;}
  .floating-actions{right:14px; bottom:14px; gap:10px;}
  .fab-tooltip{display:none;}
    .about-media{ margin-bottom: 30px;}
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
#backToTop{
  position:fixed;
  left:22px; bottom:22px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow:0 10px 24px rgba(0,0,0,0.2);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:all .3s ease;
  z-index:1000;
}
#backToTop.show{opacity:1; visibility:visible; transform:translateY(0);}
#backToTop:hover{background:var(--gradient-rb);}

@media (max-width:576px){
  #backToTop{width:42px; height:42px; left:14px; bottom:14px;}
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity:0;
  transition:opacity .7s ease, transform .7s ease;
  will-change:transform, opacity;
}
.reveal.fade-up{transform:translateY(36px);}
.reveal.fade-left{transform:translateX(-36px);}
.reveal.fade-right{transform:translateX(36px);}
.reveal.zoom-in{transform:scale(.92);}
.reveal.in-view{opacity:1; transform:translate(0,0) scale(1);}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .hero-slide::before, .floating-icon, .stats-shapes, .marquee-track{animation:none !important;}
}

/*---------------------*/
 /* Main Emergency Button */
        .emergency-call-btn {
            position: relative;
            display: flex;
            align-items: center;
            gap: 18px;

            min-width: 230px;
            padding: 10px 20px;

            border-radius: 70px;
            border: 3px solid rgba(255, 255, 255, 0.95);

            background: linear-gradient(
                100deg,
                #f00420 0%,
                #ef1748 32%,
                #8b63a6 65%,
                #0692ea 100%
            );

            color: #fff;
            text-decoration: none;

            box-shadow:
                0 12px 30px rgba(240, 4, 32, 0.35),
                0 0 0 0 rgba(240, 4, 32, 0.7);

            transition: all 0.3s ease;
            overflow: visible;

            animation: emergencyPulse 2s infinite;
        }

        /* Hover */
        .emergency-call-btn:hover {
            color: #fff;
            transform: translateY(-4px) scale(1.02);

            box-shadow:
                0 18px 40px rgba(240, 4, 32, 0.45),
                0 0 0 8px rgba(240, 4, 32, 0.10);
        }

        /* Phone Circle */
        .emergency-icon {
            position: relative;

            width: 40px;
            height: 40px;
            min-width: 40px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #ed092c;
            border: 2px solid #fff;

            border-radius: 50%;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);

            z-index: 2;

            animation: phoneShake 1.5s infinite;
        }

        .emergency-icon i {
            font-size: 16px;
            color: #fff;
        }

        /* White Ring Around Phone */
        .emergency-icon::before {
            content: "";
            position: absolute;

            width: 76px;
            height: 76px;

            border-radius: 50%;

            border: 2px solid rgba(255, 255, 255, 0.65);

            animation: ringPulse 1.8s infinite;
        }

        /* Text */
        .emergency-text {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
        }

        .emergency-label {
            font-size: 13px;
            font-weight: 800;
           
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .emergency-number {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0.8px;
            white-space: nowrap;
        }

        .emergency-subtext {
            font-size: 11px;
            font-weight: 600;
            margin-top: 5px;
            opacity: 0.95;
            letter-spacing: 0.4px;
        }

        /* Emergency Badge */
        .emergency-badge {
            position: absolute;

            top: -13px;
            left: 50%;

            transform: translateX(-50%);

            background: #fff;
            color: #ed092c;

            padding: 5px 18px;

            border-radius: 30px;

            font-size: 11px;
            font-weight: 900;

            letter-spacing: 1.5px;
            text-transform: uppercase;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);

            white-space: nowrap;

            animation: badgeBlink 1.2s infinite;
        }

        /* Red Pulse */
        @keyframes emergencyPulse {

            0% {
                box-shadow:
                    0 12px 30px rgba(240, 4, 32, 0.35),
                    0 0 0 0 rgba(240, 4, 32, 0.65);
            }

            70% {
                box-shadow:
                    0 12px 30px rgba(240, 4, 32, 0.35),
                    0 0 0 13px rgba(240, 4, 32, 0);
            }

            100% {
                box-shadow:
                    0 12px 30px rgba(240, 4, 32, 0.35),
                    0 0 0 0 rgba(240, 4, 32, 0);
            }
        }

        /* Phone Shake */
        @keyframes phoneShake {

            0%, 45%, 100% {
                transform: rotate(0deg);
            }

            48% {
                transform: rotate(-12deg);
            }

            51% {
                transform: rotate(12deg);
            }

            54% {
                transform: rotate(-9deg);
            }

            57% {
                transform: rotate(9deg);
            }

            60% {
                transform: rotate(0deg);
            }
        }

        /* Ring Animation */
        @keyframes ringPulse {

            0% {
                transform: scale(0.85);
                opacity: 0.8;
            }

            70% {
                transform: scale(1.25);
                opacity: 0;
            }

            100% {
                transform: scale(1.25);
                opacity: 0;
            }
        }

        /* Badge Blink */
        @keyframes badgeBlink {

            0%, 100% {
                opacity: 1;
            }

            50% {
                opacity: 0.65;
            }
        }

        /* Mobile */