/* =========================================================
   Royal Happiness Dental Clinic — Stylesheet
   Tech: Bootstrap 5 + Custom CSS
   Notes: Keep custom CSS lean for performance.
========================================================= */

:root{
  --brand-primary:#0ea5a4; /* teal */
  --brand-secondary:#2563eb; /* blue */
  --ink:#0f172a;
  --muted:#475569;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e2e8f0;
  --shadow: 0 12px 30px rgba(2, 6, 23, .08);
  --radius: 18px;
}

html{scroll-behavior:smooth;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a{color: inherit;}
a:hover{color: var(--brand-secondary);}

.container{max-width: 1120px;}
.section-pad{padding: 72px 0;}
.section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-kicker{
  color: var(--brand-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}
.lead{color: var(--muted);}

.shadow-soft{box-shadow: var(--shadow);}
.rounded-2xl{border-radius: var(--radius);}
.border-soft{border: 1px solid var(--line);}

/* Top bar */
.topbar{
  background: #071226;
  color: rgba(255,255,255,.9);
  font-size: .92rem;
}
.topbar a{color: rgba(255,255,255,.92); text-decoration: none;}
.topbar a:hover{color:#fff; text-decoration: underline;}
.topbar .social a{
  width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
}
.topbar .social a:hover{border-color: rgba(255,255,255,.40);}

/* Navbar */
.navbar{
  background: rgba(248, 250, 252, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.navbar .nav-link{font-weight: 600; color: #0b1220;}
.navbar .nav-link:hover{color: var(--brand-secondary);}
.navbar .dropdown-menu{
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 14px;
}
/* Desktop hover dropdown with staggered items */
@media (min-width: 992px) {
  /* Keep dropdown hidden but measurable for animation */
  .navbar .dropdown-menu {
    display: block;              /* needed so animation can run */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
  }

  /* Show on hover */
  .navbar .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Stagger items */
  .navbar .dropdown-menu .dropdown-item {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
  }

  .navbar .dropdown:hover > .dropdown-menu .dropdown-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Delays: items appear one-by-one */
  .navbar .dropdown:hover > .dropdown-menu .dropdown-item:nth-child(1) { transition-delay: 30ms; }
  .navbar .dropdown:hover > .dropdown-menu .dropdown-item:nth-child(2) { transition-delay: 60ms; }
  .navbar .dropdown:hover > .dropdown-menu .dropdown-item:nth-child(3) { transition-delay: 90ms; }
  .navbar .dropdown:hover > .dropdown-menu .dropdown-item:nth-child(4) { transition-delay: 120ms; }
  .navbar .dropdown:hover > .dropdown-menu .dropdown-item:nth-child(5) { transition-delay: 150ms; }
  .navbar .dropdown:hover > .dropdown-menu .dropdown-item:nth-child(6) { transition-delay: 180ms; }

  /* Nice spacing (optional) */
  .navbar .dropdown-menu {
    padding: .6rem;
    border-radius: 14px;
  }
  .navbar .dropdown-item {
    border-radius: 10px;
    padding: .6rem .8rem;
  }
}
.brand-btn{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border: 0;
  color: #fff !important;
  font-weight: 700;
  padding: .65rem 1.0rem;
  border-radius: 999px;
  box-shadow: 0 12px 25px rgba(37, 99, 235, .18);
}
.brand-btn:hover{filter: brightness(1.05);}

/*image zoom on hover*/
.img-hover-zoom {
  overflow: hidden;
  position: relative;
}

.img-hover-zoom img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease, filter 0.4s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.08);
}

/* Optional: slightly smoother premium feel */
.img-hover-zoom:hover img {
  filter: brightness(1.05);
}

/* Hero */
.hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero .carousel-item{
  min-height: 560px;
  background: #0b1220;
}
.hero .hero-slide{
  position: absolute; inset:0;
  background-size: cover;
  background-position: center;
}
.hero .overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 25% 45%, rgba(14,165,164,.18), transparent 60%),
    linear-gradient(90deg,
      rgba(2,6,23,.50) 0%,
      rgba(2,6,23,.30) 45%,
      rgba(2,6,23,.10) 100%);
}
.hero .hero-content{
  position: relative;
  z-index: 2;
  padding: 84px 0;
}
.hero h1{
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero p{color: rgba(255,255,255,.82); max-width: 52ch;}
.hero .btn-outline-light{
  border-radius: 999px;
  border-width: 2px;
}
.hero .btn{border-radius: 999px; font-weight: 700; padding: .75rem 1.05rem;}
.hero .btn-primary{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border: 0;
}
/* Smooth zoom effect on active slide background only */
.hero .hero-slide{
  transform: scale(1);
  transition: transform 7s ease; /* match your interval ~6500ms */
  will-change: transform;
}

/* When slide is active, zoom in slightly */
/* Zoom + slight pan */
.hero .carousel-item.active .hero-slide{
  transform: scale(1.10) translateX(-1.5%) translateY(-1%);
}

/* Optional: when sliding out, keep it smooth */
.hero .carousel-item .hero-slide{
  transform-origin: center;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-slide{
    transition: none !important;
    transform: none !important;
  }
}

/* Make the stagger feel smooth + consistent */
.hero .animate__animated{
  --animate-duration: .8s;
}

/* Prevent a flash before JS applies animations */
.hero .js-hero-kicker,
.hero .js-hero-title,
.hero .js-hero-text,
.hero .js-hero-actions{
  opacity: 1;
}
/* Video Button */
.btn-video{
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  padding: .75rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  transition: all .25s ease;
  position: relative;
}

/* Hover */
.btn-video:hover{
  background: rgba(255,255,255,.15);
  transform: translateY(-2px);
}

/* Play icon circle */
.video-icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #0b1220;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

/* Pulse animation */
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70%{ box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* Trust strip */
.trust-strip{
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.trust-item{
  padding: 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
}
.trust-item i{font-size: 1.35rem; color: var(--brand-primary);}
.trust-item .t{font-weight: 800; margin: 0;}
.trust-item .d{margin: 0; color: var(--muted); font-size: .92rem;}

/* Cards (refined) */
.card-soft{
  background: var(--card);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card-soft:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(2,6,23,.10);
  border-color: rgba(14,165,164,.25);
}

.service-card img{
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.9);
}

/* Keep button width behavior consistent */
.service-card .btn{
  border-radius: 999px;
  font-weight: 800;
  transition: all .25s ease;
}

/* If you want "View More" NOT full width, remove width:100% */
.service-card .btn-ghost{
  width: auto;            /* ✅ not full width */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .95rem;
}

/* Ghost button with premium hover (same behavior as social buttons) */
.btn-ghost{
  border-radius: 999px;
  border: 2px solid rgba(14,165,164,.55);
  background: transparent;
  color: #0b1220;
  font-weight: 800;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

.btn-ghost:hover{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(14,165,164,.25);
}
.service-card .btn-ghost{ width: 100%; }
/* Optional: make hover apply when hovering the whole card */
.service-card:hover .btn-ghost{
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(14,165,164,.20);
}

/* Parallax CTA */
.parallax{
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(226,232,240,.9);
  border-bottom: 1px solid rgba(226,232,240,.9);
}
/* Softer overlay */
.parallax::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(2,6,23,.50) 0%,
    rgba(2,6,23,.32) 55%,
    rgba(2,6,23,.12) 100%
  );
}
.parallax .inner{position: relative; z-index: 2; padding: 72px 0;}
.parallax h2{color:#fff; font-weight: 900; letter-spacing:-0.03em;}
.parallax p{color: rgba(255,255,255,.82); max-width: 62ch;}
.parallax .btn{border-radius: 999px; font-weight: 800; padding: .75rem 1.15rem;}

/* Gallery */
.gallery-grid img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  transition: transform .2s ease;
}
.gallery-grid a:hover img{transform: scale(1.01);}

/* Pricing */
.price-card .price{
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.price-card ul{margin: 0; padding-left: 1.2rem; color: var(--muted);}

/* Dental Social Buttons */
.btn-outline-dental-social{
  border: 2px solid #0ea5a4;   /* teal medical tone */
  color: #0f172a;              /* deep slate */
  background: transparent;
  font-weight: 600;
  transition: all .25s ease;
}

.btn-outline-dental-social:hover{
  background: #0ea5a4;
  color: #ffffff;
  border-color: #0ea5a4;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(14,165,164,.25);
}

/* Optional brand kicker color */
.text-brand{
  color: #0ea5a4;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* Footer */
.footer {
  background: #071226;
  color: rgba(255, 255, 255, 0.86);
}

.footer a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  display: inline-block; /* required for transform */
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer a:hover {
  color: #fff;
  text-decoration:;
  transform: translateX(4px);
}

.footer .tiny {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
/* WhatsApp floating button */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #22c55e;
  color:#fff;
  box-shadow: 0 14px 34px rgba(34,197,94,.35);
  text-decoration:none;
}
.whatsapp-float:hover{filter: brightness(1.06); color:#fff;}
.whatsapp-float i{font-size: 1.55rem;}

/* Hide topbar on scroll */
.topbar.hidden{transform: translateY(-100%); transition: transform .2s ease;}
.topbar{transform: translateY(0); transition: transform .2s ease;}

/* Animation helpers (lightweight) */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

/* Forms */
.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(226,232,240,.95);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.12);
}

/* Mobile tweaks */
@media (max-width: 991px){
  .hero .carousel-item{min-height: 560px;}
  .parallax{background-attachment: scroll;}
}
@media (max-width: 575px){
  .section-pad{padding: 56px 0;}
  .hero .hero-content{
    padding: 64px 0;
  }
}


/* Testimonials (Manual + Swipe, No Autoplay) */
#testimonialCarousel.carousel-fade .carousel-item{
  opacity: 0;
  transition: opacity .65s ease-in-out;
}

#testimonialCarousel.carousel-fade .carousel-item.active{
  opacity: 1;
}

/* Prevent slide transforms so fade is clean */
#testimonialCarousel .carousel-item-next,
#testimonialCarousel .carousel-item-prev,
#testimonialCarousel .carousel-item.active{
  transform: none !important;
}

/* Avatar */
#testimonialCarousel .avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(14,165,164,.25);
}

/* Card */
#testimonialCarousel .testimonial-card{
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

#testimonialCarousel .testimonial-card::after{
  content: "“”";
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 64px;
  font-weight: 900;
  color: rgba(14,165,164,.10);
  pointer-events: none;
}

#testimonialCarousel .testimonial-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(2,6,23,.10);
}

/* Stars */
#testimonialCarousel .rating i{
  font-size: .9rem;
  color: #f59e0b;
  margin-left: 2px;
}

/* Arrow Controls */
#testimonialCarousel{
  position: relative;
}

#testimonialCarousel .tcar-control{
  width: auto;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}

#testimonialCarousel .carousel-control-prev{ left: -6px; }
#testimonialCarousel .carousel-control-next{ right: -6px; }

#testimonialCarousel .tcar-control-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(14,165,164,.25);
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
  color: #0ea5a4;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#testimonialCarousel .tcar-control:hover .tcar-control-icon{
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(2,6,23,.12);
  border-color: rgba(14,165,164,.35);
}

/* Remove Bootstrap default arrow icons */
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon{
  display: none;
}

/* Mobile: keep arrows inside container */
@media (max-width: 575px){
  #testimonialCarousel .carousel-control-prev{ left: 6px; }
  #testimonialCarousel .carousel-control-next{ right: 6px; }
  #testimonialCarousel .tcar-control-icon{ width: 40px; height: 40px; }
}