:root {
  --header-h: 100px;
  --blue: #1e90ff;
  --blue-200: #87cefa;
  --ink: #0b1220;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #e6f2fb;
  color: #333;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

/* ===== Header (transparent -> white) ===== */
header.navbar{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem; z-index: 1000;
  background: rgba(0,0,0,.45);
  transition: background .25s, border-color .25s, box-shadow .25s;
  border-bottom: 3px solid transparent;
}
header.navbar:hover{
  background: #fff;
  border-bottom-color: var(--blue-200);
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}

/* Logo swap */
.logo { height: 64px; max-height: 64px; }
.logo-black { display: none; }
header.navbar:hover .logo-white { display: none; }
header.navbar:hover .logo-black { display: inline; }

/* Nav */
.menu-toggle { display: block; font-size: 1.8rem; color: #fff; cursor: pointer; }
header.navbar:hover .menu-toggle { color: var(--blue); }

ul.nav-links{
  list-style: none; margin: 0;
  position: fixed; top: 0; right: -240px; height: 100%; width: 220px;
  background: rgba(0,0,0,.88); display: flex; flex-direction: column;
  gap: 1rem; padding: 4rem 1rem 1rem; transition: right .3s;
}
ul.nav-links.show{ right: 0; }
ul.nav-links li a{
  color: #fff; font-weight: 600; font-size: 1.05rem; padding: .4rem .3rem;
  transition: color .2s, font-weight .2s;
}
ul.nav-links li a:hover{ color: var(--blue); font-weight: 800; }

/* Desktop nav */
@media (min-width: 769px){
  .menu-toggle{ display: none; }
  ul.nav-links{
    position: static; height: auto; width: auto; flex-direction: row;
    background: transparent; padding: 0; gap: 28px;
  }
  ul.nav-links li a{ color: #fff; }
  header.navbar:hover ul.nav-links li a{ color: #333; }

  .signup-btn{
    background: var(--blue-200); color: #000;
    border: 2px solid var(--blue-200);
    border-radius: 999px; padding: 8px 18px; font-weight: 700;
    transition: .25s;
  }
  .signup-btn:hover{ background: var(--blue); color: #fff; border-color: var(--blue); }
}

/* ===== Hero (home) ===== */
.hero{ position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.slides{ position: relative; height: 100%; width: 100%; }
.slide{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transform: scale(1.02);
  transition: opacity 1s ease, transform 1s ease;
  background-size: cover; background-position: center;
}
.slide.active{ opacity: 1; transform: none; z-index: 1; }

.scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 35%,rgba(0,0,0,.5));
  z-index: -1;
}

/* Only animate content inside slides on the home page */
.slide .content{
  position: relative; /* ... keep your other properties */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.slide.active .content{ opacity: 1; transform: translateY(0); }

/* staged fade for child bits */
.content .kicker{ transition: opacity .8s .05s, transform .8s .05s; }
.content .h1{ transition: opacity .8s .12s, transform .8s .12s; }
.content .sub{ transition: opacity .8s .2s,  transform .8s .2s; }
.content .cta{ transition: opacity .8s .28s, transform .8s .28s; }

.kicker{
  display: inline-block; padding: .25rem .6rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; font-size: .8rem; margin-bottom: .75rem;
}
.h1{ font-weight: 900; font-size: clamp(28px,5vw,48px); margin: 0 0 .5rem; }
.sub{ font-size: clamp(14px,2.2vw,18px); max-width: 720px; margin: 0 auto .9rem; }

.btn{
  display: inline-block; padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700;
  text-decoration: none; margin-right: .4rem; cursor: pointer;
}
.btn.primary{ background: var(--blue); color:#fff; border: 2px solid var(--blue); }
.btn.primary:hover{ background:#0b78d1; border-color:#0b78d1; }
.btn.ghost{ background: transparent; color:#fff; border:2px solid rgba(255,255,255,.65); }
.btn.ghost:hover{ background: rgba(255,255,255,.15); }

/* Quick link bubbles under each slide */
.quick-links{
  margin-top: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center;
}
.quick-links a{
  background: rgba(30,144,255,.85); color:#fff;
  padding: .45rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  transition: background-color .25s;
}
.quick-links a:hover{ background: var(--blue); }

/* Controls */
.controls{
  position: absolute; bottom: 20px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 10px; z-index: 20;
}
.dot{ height: 10px; width: 10px; border-radius: 999px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.65); cursor: pointer; }
.dot.active{ background: #fff; }

.skip{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.85); border: none;
  height: 42px; width: 42px; border-radius: 999px; display: grid; place-items: center;
  cursor: pointer; z-index: 20;
}
.skip:hover{ background:#fff; }
.prev{ left: 18px; } .next{ right: 18px; }

@media (max-width: 860px){
  .hero{ height: 70vh; min-height: 460px; }
}

/* ===== FAQ & Reviews ===== */
.about-container{ max-width: 1200px; margin: 3rem auto; padding: 0 2rem; }
.faq-preview{ text-align: center; }
.faq-preview h2{
  color: var(--blue); font-size: 2.2rem; font-weight: 800;
  border-bottom: 3px solid var(--blue); display: inline-block;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
}
.faq-preview h2.visible{ opacity: 1; transform: translateY(0); }

.reviews-section{ max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem; text-align: center; }
.reviews-section h2{ color: var(--blue); margin-bottom: 1rem; }

/* ===== Footer & WhatsApp ===== */
footer{ background: #cce7f7; padding: 1rem; text-align: center; }
.footer-inline{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; align-items:center;
}
.footer-inline a{ font-weight: 700; color: #000; }
.footer-socials img{ width: 24px; height: 24px; margin-left: 8px; }

.whatsapp-float{ position: fixed; right: 20px; bottom: 20px; z-index: 999; }
.whatsapp-float img{ width: 50px; height: 50px; }

/* ===== Cookie banner ===== */
.cookie-banner{
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.85); color: #fff;
  padding: 1rem; text-align: center; z-index: 9999; display: none;
}
.cookie-banner-content{
  max-width: 960px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.cookie-banner a{ color: #00aaff; text-decoration: underline; }
.cookie-banner button{
  background: #00aaff; color: #fff; border: none;
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
}

/* ===== Services page (SCOPED so it can’t break Home) ===== */
/* hero container id must be #svcHero on services.html */
.services-hero{ position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.services-hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; }
.services-hero .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.2)); z-index:-1; }
.services-hero .content{
  position: relative; text-align: center; color: #fff;
  top: 40%; transform: translateY(-50%); width:min(1100px,92%); margin:0 auto;
}

/* slide-in info panel — ONLY opens when #svcHero gets .open */
.info-panel{
  position: fixed; top: 0; right: -100%; width: 50%; height: 100%;
  background: #fff; box-shadow: -4px 0 15px rgba(0,0,0,.2);
  transition: right .6s ease; z-index: 2000;
  overflow-y: auto; padding: 2rem;
}
#svcHero.open .info-panel{ right: 0; } /* <— SCOPED FIX */

/* panel content styling, aligned with theme */
.panel-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.panel-close{ background: none; border: none; font-size: 1.4rem; cursor: pointer; }
.panel-content h3{
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding-bottom: .3rem; margin-top: 1.2rem;
}
.panel-content ul{ margin-left: 1rem; }
/* ===== ABOUT (scoped) ===== */
.about-slider{ position:relative; height:100vh; min-height:600px; overflow:hidden; }
.about-slides{ position:relative; height:100%; width:100%; }
.about-slide{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
  transform:scale(1.02); transition:opacity 1s ease, transform 1s ease;
}
.about-slide.active{ opacity:1; transform:none; z-index:1; }

/* Background + scrim */
.about-slide .bg{
  position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2;
  transform:translateX(0); transition:transform .55s ease;
}
.about-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 35%,rgba(0,0,0,.5));
  z-index:-1;
}

/* Centered caption (clears header height) */
.about-caption{
  width:min(1100px,92%); margin:0 auto; color:#fff; text-align:center;
  padding-top:calc(var(--header-h) + 8px);  /* prevents overlap with header */
  opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease;
}
.about-slide.active .about-caption{ opacity:1; transform:translateY(0); }
.about-caption .kicker{ display:inline-block; padding:.25rem .6rem; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:.8rem; margin-bottom:.75rem; }
.about-caption .h1{ font-weight:900; font-size:clamp(28px,5vw,48px); margin:0 0 .5rem; }
.about-caption .sub{ font-size:clamp(14px,2.2vw,18px); max-width:720px; margin:0 auto .9rem; }
.about-caption .btn.primary{ background:#1e90ff; color:#fff; border:2px solid #1e90ff; border-radius:999px; padding:.6rem 1.2rem; font-weight:700; }
.about-caption .btn.primary:hover{ background:#0b78d1; border-color:#0b78d1; }

/* Slide-in info panel (reuse theme) */
.about-slide .info-panel{
  position:fixed; top:calc(var(--header-h) + 30px); right:0;
  width:min(800px,92%); max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto; background:#fff; border-radius:20px 0 0 20px; padding:2rem;
  box-shadow:-20px 20px 50px rgba(0,0,0,.18); border-left:1px solid #e5e7eb;
  transform:translateX(105%); transition:transform .55s ease; z-index:900;
}
/* open state: reveal card and nudge bg left */
.about-slide.open .info-panel{ transform:translateX(0); }
.about-slide.open .bg{ transform:translateX(-14%); }

/* Panel internals (match theme) */
.section-heading{
  color:#1e90ff; border-bottom:3px solid #1e90ff; margin:0 0 .75rem; font-weight:800; line-height:1.2;
}
.panel-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.panel-close{
  background:#f2f4f7; border:1px solid #e5e7eb; color:#0f172a;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
}
.panel-content p{ margin:.6rem 0 1rem; }

/* Dots + arrows (reuse home styles) */
#about-dots.controls{ bottom:20px; }
.about-prev{ left:18px; } .about-next{ right:18px; }

/* Certificates block (scroll reveal) */
.certs{ max-width:1100px; margin:3rem auto; padding:0 1.5rem 2rem; text-align:center; opacity:0; transform:translateY(30px); transition:.6s; }
.certs.visible{ opacity:1; transform:translateY(0); }
.certs .section-heading{ display:inline-block; }
.certs .cert-links a{
  display:inline-block; margin:.35rem .5rem; padding:.5rem 1rem; border-radius:999px;
  background:#fff; border:1px solid #e5e7eb; font-weight:600; color:#1e90ff;
}
.certs .cert-links a:hover{ background:#f3f8ff; border-color:#cfe7ff; }

/* ===== Services hero (ensure button is visible and centered) ===== */
.services-hero { position:relative; height:100vh; min-height:600px; overflow:hidden; }
.services-hero .bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; }
.services-hero .scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.2)); z-index:-1; }
.services-hero .content {
  position:relative; width:min(1100px,92%); margin:0 auto; text-align:center; color:#fff;
  padding-top:calc(var(--header-h) + 8px); /* avoids header overlap */
  z-index:5; /* keep above scrim/bg */
}
.services-hero .btn.primary { background:#1e90ff; color:#fff; border:2px solid #1e90ff; }
.services-hero .btn.primary:hover { background:#0b78d1; border-color:#0b78d1; }

/* ===== Services slide-in panel (scoped + fixed) ===== */
.info-panel {
  position:fixed; top:calc(var(--header-h) + 30px); right:-100%;
  width:min(800px,92%); max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto; background:#fff; border-radius:20px 0 0 20px; padding:2rem;
  box-shadow:-20px 20px 50px rgba(0,0,0,.18); border-left:1px solid #e5e7eb;
  transition:right .55s ease; z-index:2000;
}
#svcHero.open .info-panel { right:0; } /* <-- scoped so it can't affect Home */

/* ===== Pricing section (scroll-in) ===== */
.svc-pricing { max-width:1100px; margin:3rem auto; padding:0 1.5rem 3rem; }
.svc-heading {
  color:#1e90ff; border-bottom:3px solid #1e90ff; display:inline-block;
  font-size:2.2rem; font-weight:800; line-height:1.2; margin:0 0 1rem;
  opacity:0; transform:translateY(30px); transition:.6s ease;
}
.svc-heading.visible { opacity:1; transform:translateY(0); }

.table-wrap { overflow-x:auto; }
.svc-table { opacity:0; transform:translateY(20px); transition:.6s ease .1s; }
.svc-table.visible { opacity:1; transform:translateY(0); }

table.packages { width:100%; border-collapse:collapse; font-size:0.98rem; background:#fff; }
.packages th, .packages td { border:1px solid #e5e7eb; padding:0.85rem; vertical-align:top; text-align:left; }
.packages thead th { background:#f8fafc; }
.packages tbody tr:nth-child(even) { background:#fafafa; }
.pkg-name { font-weight:700; }
.price { font-weight:700; white-space:nowrap; }
/* --- Ensure home slides always use white text --- */
.hero .content,
.slide .content { color: #fff !important; }

.hero .content h1,
.hero .content h2,
.hero .content h3,
.hero .content p,
.hero .content .kicker { color: #fff !important; }

/* Buttons & quick links on slides */
.hero .content .btn.ghost { color: #fff !important; border-color: rgba(255,255,255,.65) !important; }
.hero .content .btn.primary { color: #fff !important; }
.quick-links a { color: #fff !important; }

/* Prevent visited/hover states from turning dark */
.hero .content a:link,
.hero .content a:visited,
.hero .content a:hover,
.hero .content a:active { color: #fff !important; }
/* ===== CONTACT PAGE ===== */
.contact-hero{
  position:relative; height:100vh; min-height:600px; overflow:hidden;
}
.contact-hero .bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.65);
  z-index:-2;
}
.contact-hero .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25),rgba(0,0,0,.45));
  z-index:-1;
}
.contact-hero .content{
  position:relative; text-align:center; color:#fff;
  padding-top:calc(var(--header-h) + 8px);
  width:min(1100px,92%); margin:0 auto;
}
.contact-hero .h1{ font-weight:900; font-size:clamp(32px,6vw,56px); margin:.4rem 0; }
.contact-actions{ margin-top:1rem; display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.btn.outline-light{ background:transparent; color:#fff; border:2px solid #fff; }
.btn.outline-light:hover{ background:rgba(255,255,255,.15); }

/* Slide-in contact panel */
.contact-panel{
  position:fixed; top:calc(var(--header-h) + 30px); right:-100%;
  width:min(820px,92%); max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto; background:#fff; border-left:1px solid #e5e7eb;
  border-radius:20px 0 0 20px; padding:2rem;
  box-shadow:-20px 20px 50px rgba(0,0,0,.18);
  transition:right .55s ease; z-index:2000;
}
.contact-hero.open .contact-panel{ right:0; }

.contact-methods{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media(min-width:700px){ .contact-methods{ grid-template-columns:1fr 1fr; } }
.contact-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; }
.contact-card h4{ margin:.1rem 0 .4rem; color:#1e90ff; }

/* Form */
.contact-form-wrap{ max-width:1100px; margin:3rem auto; padding:0 1.5rem 3rem;
  opacity:0; transform:translateY(28px); transition:.65s ease; }
.contact-form-wrap.visible{ opacity:1; transform:translateY(0); }
.contact-form-wrap h2{ color:#1e90ff; border-bottom:3px solid #1e90ff; display:inline-block; margin:0 0 1rem; }
/* ===== Slide-in effect for Services + Contact (push bg left) ===== */
.services-hero.open .bg,
.contact-hero.open .bg {
  transform: translateX(-14%);
  transition: transform .55s ease;
}

/* Ensure base bg has smooth transform */
.services-hero .bg,
.contact-hero .bg {
  transform: translateX(0);
  transition: transform .55s ease;
}
/* ===== Slide-in effect for Services + Contact (push bg left) ===== */
.services-hero.open .bg,
.contact-hero.open .bg {
  transform: translateX(-14%);
  transition: transform .55s ease;
}

/* Ensure base bg has smooth transform */
.services-hero .bg,
.contact-hero .bg {
  transform: translateX(0);
  transition: transform .55s ease;
}
/* Hide floating socials on desktop */
.social-float-container { 
  position: fixed; 
  bottom: 80px; 
  left: 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 10px;
  z-index: 1000;
}
.social-float-container a img {
  width: 38px;
  height: 38px;
}

/* Show only on mobile */
@media (min-width: 769px){
  .social-float-container { display: none; }
}
/* Floating WhatsApp (site-wide) */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2500;              /* above panels (2000), below cookie banner (9999) */
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.whatsapp-float img{
  width: 56px; height: 56px; display:block;
  border-radius: 50%;
}
@media (max-width: 480px){
  .whatsapp-float img{ width: 50px; height: 50px; }
}