/* ============================================================
   Grewal's Dental Care Center — custom styles
   Loaded after Tailwind CDN
   ============================================================ */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color:#334155; }
h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; }

/* Section eyebrow label */
.eyebrow { letter-spacing:.18em; font-size:.78rem; font-weight:700; text-transform:uppercase; color:#0B7A7A; }

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg,#0EA5A5,#0B7A7A 60%,#0A5E5E);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Hero animated backdrop */
.hero-bg {
  background:
    radial-gradient(60% 80% at 15% 15%, rgba(14,165,165,.18), transparent 60%),
    radial-gradient(50% 70% at 90% 20%, rgba(94,208,208,.22), transparent 55%),
    radial-gradient(60% 90% at 80% 90%, rgba(11,122,122,.14), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#F1FBFB 100%);
}
.blob { position:absolute; border-radius:9999px; filter:blur(60px); opacity:.5; z-index:0; pointer-events:none; }

/* Soft mesh section background */
.mesh-soft {
  background:
    radial-gradient(50% 60% at 10% 10%, rgba(14,165,165,.07), transparent 60%),
    radial-gradient(45% 60% at 95% 90%, rgba(94,208,208,.10), transparent 55%),
    #ffffff;
}

/* Card hover lift */
.lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 26px 60px -20px rgba(11,122,122,.35); }

/* Nav underline */
.nav-link { position:relative; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:#0EA5A5; transition:width .3s ease;
}
.nav-link:hover::after { width:100%; }

/* ============ Before / After slider ============ */
.ba { position:relative; overflow:hidden; border-radius:1rem; cursor:ew-resize; user-select:none; }
.ba img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba .after-wrap { position:absolute; inset:0; width:50%; overflow:hidden; }
.ba .after-wrap img { width:auto; min-width:100%; }
.ba .handle { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 1px rgba(14,165,165,.3); }
.ba .knob {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:9999px; background:#fff;
  box-shadow:0 6px 20px rgba(11,122,122,.4); display:flex; align-items:center; justify-content:center; color:#0B7A7A;
}

/* FAQ */
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item summary { list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }

/* Custom scrollbar */
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:#F1FBFB; }
::-webkit-scrollbar-thumb { background:#0EA5A5; border-radius:10px; border:3px solid #F1FBFB; }

/* ============ Swiper customisation ============ */
/* Hero slider */
.hero-swiper { width:100%; }
.hero-swiper .swiper-slide { position:relative; overflow:hidden; }
.hero-slide-bg {
  position:absolute; inset:0; background-size:cover; background-position:center top;
  transform: scale(1.05); transition: transform 8s ease;
}
.swiper-slide-active .hero-slide-bg { transform: scale(1.15); } /* Ken Burns */
.hero-swiper .swiper-pagination-bullet { background:#fff; opacity:.6; width:10px; height:10px; }
.hero-swiper .swiper-pagination-bullet-active { opacity:1; background:#0EA5A5; }
.hero-swiper .swiper-button-next, .hero-swiper .swiper-button-prev {
  color:#fff; background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  width:48px; height:48px; border-radius:9999px; transition: background .25s;
}
.hero-swiper .swiper-button-next:hover, .hero-swiper .swiper-button-prev:hover { background:rgba(255,255,255,.3); }
.hero-swiper .swiper-button-next::after, .hero-swiper .swiper-button-prev::after { font-size:18px; font-weight:700; }

/* Hero logo watermark — large, very subtle, sits behind hero content */
.hero-watermark {
  z-index: 1;            /* above bg image + overlay, below the z-10 content */
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.15));
}
@media (max-width: 640px) {
  .hero-watermark { opacity: .07 !important; width: 7rem !important; }
}

/* Divider glow */
.divider-glow { height:1px; background:linear-gradient(90deg,transparent,#0EA5A5,transparent); }

/* Marquee */
@keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }
.marquee-track { display:flex; width:max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ============ Swiper customisation ============ */
/* Hero slider */
.hero-swiper { width:100%; }
.hero-swiper .swiper-slide { position:relative; overflow:hidden; }
.hero-slide-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.05); transition: transform 8s ease;
}
.swiper-slide-active .hero-slide-bg { transform: scale(1.15); } /* Ken Burns */
.hero-swiper .swiper-pagination-bullet { background:#fff; opacity:.6; width:10px; height:10px; }
.hero-swiper .swiper-pagination-bullet-active { opacity:1; background:#0EA5A5; }
.hero-swiper .swiper-button-next, .hero-swiper .swiper-button-prev {
  color:#fff; background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  width:48px; height:48px; border-radius:9999px; transition: background .25s;
}
.hero-swiper .swiper-button-next:hover, .hero-swiper .swiper-button-prev:hover { background:rgba(255,255,255,.3); }
.hero-swiper .swiper-button-next::after, .hero-swiper .swiper-button-prev::after { font-size:18px; font-weight:700; }

/* Testimonials slider */
.testi-swiper .swiper-pagination-bullet-active { background:#0EA5A5; opacity:1; }
.testi-swiper .swiper-button-next, .testi-swiper .swiper-button-prev { color:#0B7A7A; }

/* GLightbox tweaks */
.glightbox-clean .gslide-description { background:#fff; }
.glightbox-clean .gslide-title { color:#0B7A7A; font-weight:700; font-family:'Poppins',sans-serif; }

/* Animations */
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.animate-float { animation: floaty 6s ease-in-out infinite; }

/* Flash message */
.flash { animation: fadeUp .4s ease both; }
@keyframes fadeUp { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* Avatar gradient placeholder */
.avatar-placeholder {
  background: linear-gradient(135deg, #CFF6F6, #5ED0D0);
  display:flex; align-items:center; justify-content:center; color:#0A5E5E;
  font-family:'Poppins',sans-serif; font-weight:700;
}