/* =========================
   COLOR UTILITIES
   - Quick text color helpers (think of them like theme tokens)
   ========================= */
.color-primary { color: #ffffff !important; }     /* white text */
.color-secondary { color: #303F9F !important; }   /* brand blue */

/* If you edit .color-secondary later, all linked UI parts will follow. */


/* =========================
   TOP BAR (contact + social)
   ========================= */
.top-bar{
  background-color: #3F51B5;       /* slightly lighter brand blue */
  color: #ffffff;                   /* white text for contrast */
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(255,255,255,0.18); /* subtle divider on dark bg */
}
.top-bar a{
  color: #ffffff;                   /* links/icons white */
  text-decoration: none;
}
.top-bar a:hover{
  color: #C5CAE9;                   /* soft light tone on hover */
}
.top-bar .contact-info i { margin-right: .25rem; }
.top-bar .social-icons a{
  margin-left: 10px;
  color: #ffffff;
}
.top-bar .social-icons a:hover{
  color: #C5CAE9;
}

/* Instagram “pill” shortcut */
.top-bar .ig-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0); /* prepares for hover fill */
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.top-bar .ig-pill i{ font-size: 1.1rem; }
.top-bar .ig-pill:hover{
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-1px);
}

/* On very small screens: keep only the IG icon to save space */
@media (max-width: 576px){
  .top-bar .ig-pill{ padding: 6px; border-radius: 50%; }
  .top-bar .ig-pill span{ display: none; }
}


/* =========================
   NAVBAR
   - Fixed height + brand logo sizing
   ========================= */
.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e9ecef;
  height: 100px;                 /* navbar height */
  padding: 0;                    /* remove extra spacing */
}

/* Brand mark sizing inside navbar */
.brand-logo {
  height: 105px;                 /* slightly taller than navbar for snug fit */
  width: 100px;                  /* widened logo box */
  /*object-fit: contain;*/       /* enable if you want to force-fit images */
  padding: 5px 0;
}

@media (max-width: 576px){
  .brand-logo { height: 60px; }  /* smaller logo on phones */
}

/* Tighter spacing between logo and menu items */
.navbar-nav { margin-left: 10px; }

/* Link base style: dark grey, a bit larger, with smooth hover */
.navbar-nav .nav-link{
  color: #2b2b2b;
  font-weight: 500;
  font-size: 1.1rem;
  margin-right: 18px;
  position: relative;
  transition: all .3s ease;
}

/* Hover/active: brand blue + subtle glow */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active{
  color: #303F9F !important;
  text-shadow: 0 2px 6px rgba(48, 63, 159, 0.3);
}

/* Dropdown caret adjustments */
.navbar-nav .dropdown-toggle::after{
  margin-left: .25rem;
  vertical-align: .15em;
}

/* Open dropdown on hover (optional UX) */
.navbar-nav .dropdown:hover > .dropdown-menu{ display: block; }

/* Dropdown menu cosmetics */
.dropdown-menu{
  border-radius: .5rem;
  border-color: #eef0f2;
}
.dropdown-item:hover{
  color: #303F9F;
  background-color: #f2f5ff;
}

/* Toggler visibility tweaks for .navbar-light */
.navbar-light .navbar-toggler{ border-color: rgba(0,0,0,.1); }
.navbar-light .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* =========================
   HERO SLIDER
   ========================= */
/* Size + base background while images load */
.hero-slider {
  height: 100vh;          /* full viewport height */
  min-height: 520px;      /* safeguard for very small screens */
  position: relative;
  background: #0e0f12;    /* prevents white flash during image load */
}

/* Make carousel children fill the height chain */
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item {
  height: 100%;
  position: relative;      /* reference for absolute children */
}

/* Slide background image (covers fully, centered); Ken Burns ready */
.hero-slider .slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  will-change: transform;
}

/* Gentle Ken Burns zoom on the active slide */
.hero-slider .carousel-item.active .slide-bg {
  animation: kenburnsZoom 9s ease-in-out forwards;
}

@keyframes kenburnsZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Dark overlay for legibility over images */
.hero-slider .slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  pointer-events: none;   /* keep content clickable */
}

/* Ensure text layer sits above overlay */
.hero-slider .carousel-item > .container,
.hero-slider .slide-content{
  position: relative;
  z-index: 2;
}
.slide-content ul li{ margin-bottom: 0.6rem; }

/* Optional reveal animation for text (safe to remove if not needed) */
.reveal-up{ opacity:0; transform: translateY(-12px); }
.hero-slider .carousel-item.active .reveal-up{
  animation: revealDown .8s cubic-bezier(.2,.7,.3,1) both;
}
.reveal-up.d1{ animation-delay: .10s; }
.reveal-up.d2{ animation-delay: .25s; }
.reveal-up.d3{ animation-delay: .45s; }
.reveal-up.d4{ animation-delay: .65s; }
@keyframes revealDown{
  from{ opacity:0; transform: translateY(-12px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Text block */
.hero-slider .slide-content {
  color: #fff;
  max-width: 720px;
}
.hero-slider .slide-content .badge {
  display: inline-block;
  background: #3F51B5;
  color: #fff;
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  letter-spacing: .3px;
}
.hero-slider .slide-content h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.hero-slider .slide-content p {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  opacity: .9;
  margin-bottom: 1.5rem;
}

/* Primary CTA in hero */
.hero-slider .btn.btn-primary {
  background-color: #303F9F;
  border-color: #303F9F;
  padding: .9rem 1.25rem;
  font-weight: 600;
  border-radius: .75rem;
}
.hero-slider .btn.btn-primary:hover {
  background-color: #243487;
  border-color: #243487;
}

/* Move slider arrows outward slightly to not cover text */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{
  width: 64px;
  top: 0;
  bottom: 0;
  opacity: .85;
}
.hero-slider .carousel-control-prev{ left: 8px; }
.hero-slider .carousel-control-next{ right: 8px; }
.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover{ opacity: 1; }

/* Larger arrow glyph + slight shadow for visibility */
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon{
  width: 2.75rem;
  height: 2.75rem;
  background-size: 100% 100%;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .hero-slider .carousel-item.active .slide-bg { animation: none !important; transform:none !important; }
  .hero-slider .carousel-item.active .reveal-up { animation: none !important; opacity:1 !important; transform:none !important; }
}

/* Responsive heights */
@media (max-width: 992px) {
  .hero-slider { height: 520px; }
}
@media (max-width: 576px) {
  .hero-slider { height: 420px; }
  .hero-slider .slide-content .badge{ padding:.45rem .8rem; }
}


/* =========================
   SERVICES (card grid)
   ========================= */
.section-services .section-title{
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.section-services .section-title::after{
  content:"";
  display:block;
  width: 96px;
  height: 4px;
  margin: 12px auto 28px;
  background: #303F9F;                 /* brand underline */
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(48,63,159,.35);
}

/* Service card shell */
.service-card{
  border-radius: 22px;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  background: #ffffff;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

/* Media area with fixed aspect */
.service-media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.service-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: brightness(1);
  transition: transform .6s ease, filter .6s ease;
}
.service-media::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 70% at 80% 90%, rgba(0,0,0,.35), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity .4s ease;
}
.service-card:hover .service-img{
  transform: scale(1.06);              /* subtle zoom */
  filter: brightness(.95) saturate(1.05);
}
.service-card:hover .service-media::after{ opacity: 1; }

/* Bottom strip (title area) */
.service-body{
  padding: 24px 24px 22px;
  background: #ffffff;
}
.service-body.is-accent{
  background: #3F51B5;                 /* optional colored strip */
  color: #fff;
}
.service-title{
  font-size: 1.125rem;                 /* ~18px */
  font-weight: 700;
  letter-spacing: .2px;
  color: #303F9F;
  margin: 0;
}
.service-body.is-accent .service-title{ color: #ffffff; }

/* Slight brighten on accent hover */
.service-card:hover .service-body.is-accent{ background: #5C6BC0; }

@media (max-width: 576px){
  .service-body{ padding: 20px; }
  .service-title{ font-size: 1.0625rem; }
}
.section-services { padding-bottom: 0 !important; }
.section-services { scroll-margin-top: 100px; } /* accounts for fixed navbar */


/* =========================
   TESTS (child/adult lists)
   ========================= */
.section-tests .section-title{
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.section-tests .section-title::after{
  content:"";
  display:block;
  width: 120px; height: 4px;
  margin: 12px auto 30px;
  background:#303F9F;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(48,63,159,.35);
}

.test-card{
  border-radius: 22px;
  background: #fff;
  border: 1px solid #eef1f6;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.test-card:hover{
  transform: translateY(-6px);
  border-color: #e5e9f2;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

/* Header strip */
.test-header{
  display:flex; align-items:center; gap:14px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f7f9ff, #ffffff);
  border-bottom: 1px solid #eef1f6;
}
.test-card.is-child .icon{ background:#E8EAF6; color:#3F51B5; }
.test-card.is-adult .icon{ background:#E3E7FF; color:#303F9F; }

.test-header .icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-size: 1.35rem;
}

/* List of test links */
.test-list{
  list-style:none; padding: 8px 8px 16px; margin:0;
}
.test-list li{ margin: 6px 0; }
.test-list a{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration:none;
  color:#371f1f;
  background:#f7f8fc;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.test-card.is-adult .test-list a{ background:#f7f9ff; }
.test-card.is-child .test-list a{ background:#f7f9ff; }

.test-card.is-adult{
  border: 2.5px solid #303F9F;
  --accent-rgb: 48,63,159;      /* #303F9F */
  border-radius: 16px;
}

.test-list a i{
  color:#303F9F; 
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
  opacity: .9;
}
.test-list a:hover{
  background:#eef1ff;
  transform: translateX(2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.test-list a:hover i{
  transform: translateX(3px);
  color:#3F51B5;
}

@media (max-width: 576px){
  .test-header{ padding: 16px; }
  .test-list a{ padding: 12px 14px; }
}
.section-tests { scroll-margin-top: 100px; }

/* Section: STAFF (team cards) */
.section-staff { scroll-margin-top: 110px; }
.section-staff .eyebrow{
  color:#3F51B5; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  font-size:.95rem;
}
.section-staff .section-title{
  font-weight:800; color:#0f1f3a; letter-spacing:.3px;
}
.section-staff .section-title::after{
  content:""; display:block; width:120px; height:4px; margin:14px auto 6px;
  background:#3F51B5; border-radius:999px; box-shadow:0 6px 14px rgba(63,81,181,.35);
}

/* Staff card shell */
.staff-card{
  background:#fff; border-radius:18px; overflow:hidden;
  border:1px solid #eef1f6; box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  display:flex; flex-direction:column;
}
.staff-card:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.12); border-color:#e5e9f2; }

/* Portrait media */
.staff-media{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.staff-media img{
  width:100%; height:100%; object-fit:cover; transform:scale(1);
  transition: transform .6s ease, filter .6s ease;
}
.staff-card:hover .staff-media img{ transform:scale(1.05); filter:brightness(.98) saturate(1.02); }
.media-overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.25)); opacity:0; transition:opacity .35s ease; }
.staff-card:hover .media-overlay{ opacity:1; }

/* Card body */
.staff-body{ padding:18px 18px 16px; text-align:center; position:relative; }
.staff-role{ color:#6b7280; font-weight:600; font-size:.95rem; margin-bottom:.35rem; }
.staff-name{ color:#3F51B5; font-weight:800; font-size:1.25rem; margin:0 0 .25rem; }

/* Tiny CTA underline */
.staff-more{
  display:inline-block; margin-top:.35rem; font-weight:700; font-size:.86rem;
  color:#3F51B5; position:relative; padding-bottom:2px;
}
.staff-more::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:#3F51B5; transform:scaleX(.35); transform-origin:left; transition:transform .25s ease;
}
.staff-card:hover .staff-more::after{ transform:scaleX(1); }

@media (max-width:576px){
  .staff-name{ font-size:1.15rem; }
  .staff-body{ padding:16px; }
}
.section-staff { scroll-margin-top: 100px; }

/* =========================
   GALLERY (cards + modal)
   ========================= */
.section-gallery { scroll-margin-top: 110px; }
.section-gallery .section-title{
  font-weight: 800; letter-spacing: .3px;
}
.section-gallery .section-title::after{
  content:""; display:block; width:120px; height:4px; margin:12px auto 6px;
  background:#3F51B5; border-radius:999px; box-shadow:0 6px 14px rgba(63,81,181,.35);
}

/* Gallery card shell */
.gallery-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

/* Fixed aspect thumbnails */
.gallery-img{
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s ease, filter .6s ease;
}
.gallery-overlay{
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 80% 100%, rgba(0,0,0,.45), rgba(0,0,0,0));
  opacity: 0; transition: opacity .35s ease;
}
.gallery-caption{
  position: absolute; left: 12px; bottom: 12px;
  margin: 0; padding: 6px 10px;
  background: #3F51B5; color:#fff;
  border-radius: 10px;
  font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 14px rgba(63,81,181,.35);
  transform: translateY(6px); opacity: .95;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.gallery-link{ display:block; position:relative; }
.gallery-card:hover .gallery-img{ transform: scale(1.04); filter:brightness(.98) saturate(1.02); }
.gallery-card:hover .gallery-overlay{ opacity: 1; }
.gallery-card:hover .gallery-caption{ transform: translateY(0); opacity: 1; }

/* Modal image sizing */
#galleryModal .modal-content{ border-radius: 14px; }
#galleryModal .modal-body img{ max-height: calc(100vh - 160px); object-fit: contain; background:#000; }

/* =========================
   TESTIMONIALS (carousel)
   ========================= */
.section-testimonials { scroll-margin-top: 110px; }
.section-testimonials .section-title{
  font-weight: 800; letter-spacing: .3px;
}
.section-testimonials .section-title::after{
  content:""; display:block; width:110px; height:4px; margin:12px auto 6px;
  background:#3F51B5; border-radius:999px; box-shadow:0 6px 14px rgba(63,81,181,.35);
}

/* Quote card */
.testimonial-card{
  position: relative;
  background:#fff;
  border:1px solid #eef1f6;
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.testimonial-card:hover{
  transform: translateY(-4px);
  border-color:#e5e9f2;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

/* Decorative opening quote */
.testimonial-card::before{
  content: "“";
  position: absolute;
  left: 16px; top: -8px;
  font-size: 64px; line-height: 1;
  color: rgba(63,81,181,.15);
  font-weight: 900;
  pointer-events: none;
}

.testimonial-text{
  font-style: italic;
  color:#4b5563;
  margin: 0 0 14px;
}

/* Name & source */
.testimonial-meta{
  display:flex; align-items:center; gap:10px;
  color:#6b7280; font-weight:600; font-size:.95rem;
}
.testimonial-name{
  color:#0f1f3a;
  font-weight:800;
}

/* Narrower nav controls */
.section-testimonials .carousel-control-prev,
.section-testimonials .carousel-control-next{
  width: 48px; opacity:.9;
}
.section-testimonials .carousel-control-prev { left: -6px; }
.section-testimonials .carousel-control-next { right: -6px; }
.section-testimonials .carousel-control-prev-icon,
.section-testimonials .carousel-control-next-icon{
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

@media (max-width: 576px){
  .testimonial-card{ padding: 20px 18px; }
}
.section-testimonials { scroll-margin-top: 100px; }

/* =========================
   FOOTER (about + map)
   ========================= */
.site-footer{
  background: radial-gradient(120% 160% at 20% 0%, #111827 0%, #0b0f16 65%, #0a0d14 100%);
  color: #e5e7eb;
  position: relative;
}
.site-footer a{ color: #e5e7eb; text-decoration: none; }
.site-footer a:hover{ color: #C5CAE9; }
.site-footer { scroll-margin-top: 100px; } /* offset for fixed navbar */

/* Column ratio on lg+: 30% / 70% */
@media (min-width: 992px){
  .site-footer .footer-about{ flex: 0 0 30%; max-width: 30%; }
  .site-footer .footer-map{   flex: 0 0 70%; max-width: 70%; }
}

/* Left column bits */
.footer-logo{
  height: 150px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.footer-desc{ color:#cbd5e1; margin: 0; }

.footer-contact li{
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0; line-height: 1.55;
}
.footer-contact i{
  color:#3F51B5; font-size: 1.05rem; margin-top: 3px;
}

/* Right column bits */
.footer-heading{
  color:#fff; font-weight: 800; letter-spacing:.3px; margin-bottom: .75rem;
}
.footer-heading::after{
  content:""; display:block; width: 96px; height:4px; margin-top: 10px;
  background:#3F51B5; border-radius:999px; box-shadow:0 6px 14px rgba(63,81,181,.35);
}

/* Map card */
.map-card{
  background:#0f131a; border:1px solid rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
}
.map-card iframe{
  display:block; width:100%; height: 360px; border:0;
}
@media (max-width: 576px){
  .map-card iframe{ height: 280px; }
}

/* Bottom strip */
.footer-bottom{
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  padding: 12px 0;
  color:#cbd5e1;
}

/* =========================
   NAVBAR HOVER UNDERLINE (variant 1: active keeps underline)
   ========================= */
.navbar-nav .nav-link{
  position: relative;
  transition: color .25s ease;
}

/* Center-out underline animation */
.navbar-nav .nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;                 /* sits just under link text */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%,
                                      #3F51B5 18%,
                                      #3F51B5 82%,
                                      transparent 100%);
  border-radius: 2px;
  transition: transform .26s ease;
}

/* hover & focus: show underline + brand color */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
  color: #3F51B5 !important;
  text-shadow: none !important;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after{
  transform: translateX(-50%) scaleX(1);
}

/* active page: keep underline visible */
.navbar-nav .nav-link.active{
  color: #3F51B5 !important;
}
.navbar-nav .nav-link.active::after{
  transform: translateX(-50%) scaleX(1);
}

@media (max-width: 576px){
  .navbar-nav .nav-link::after{ bottom: -4px; width: 70%; }
}

/* =========================
   NAVBAR HOVER UNDERLINE (variant 2: only on hover)
   - If you prefer this behavior, keep this block and remove the block above.
   ========================= */
.navbar-nav .nav-link{
  position: relative;
  transition: color .25s ease;
}

/* center-out underline, hover-only */
.navbar-nav .nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%,
                                      #3F51B5 18%,
                                      #3F51B5 82%,
                                      transparent 100%);
  border-radius: 2px;
  transition: transform .26s ease;
}

/* show only on hover */
.navbar-nav .nav-link:hover{ color: #3F51B5 !important; text-shadow: none !important; }
.navbar-nav .nav-link:hover::after{ transform: translateX(-50%) scaleX(1); }

/* suppress highlight on active/focus in this variant */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus{
  color: inherit !important;
  text-shadow: none !important;
}
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:focus::after,
.navbar-nav .nav-link:focus-visible::after{
  transform: translateX(-50%) scaleX(0) !important;
}

@media (max-width: 576px){
  .navbar-nav .nav-link::after{ bottom: -4px; width: 70%; }
}


/* =========================
   FLOATING ACTION BUTTONS (Call + WhatsApp)
   ========================= */
.fab{
  position: fixed;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1100;                 /* above navbar/slider */
  text-decoration: none;
}

.fab .fab-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  font-size: 1.5rem;
}

.fab .fab-label{
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  backdrop-filter: saturate(1.2);
}

/* Left FAB: Phone */
.fab-call{ left: 18px; bottom: 24px; }
.fab-call .fab-icon{ background: #1976D2; }
.fab-call .fab-label{ background: rgba(0,0,0,.55); color: #fff; }

/* Right FAB: WhatsApp */
.fab-wa{ right: 18px; bottom: 24px; }
.fab-wa .fab-icon{ background: #25D366; }
.fab-wa .fab-label-right{ background: #fff; color: #1f2937; }

.fab:hover .fab-icon{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}

/* On phones: hide text balloons, keep only round buttons */
@media (max-width: 576px){
  .fab .fab-label{ display: none; }
  .fab-call{ left: 12px; bottom: 16px; }
  .fab-wa{ right: 12px; bottom: 16px; }
}


/* =========================
   BACK TO TOP BUTTON
   ========================= */
.back-to-top{
  position: fixed;
  right: 20px;
  bottom: 92px;                 /* sits above WhatsApp FAB */
  width: 44px; 
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #5C6BC0;
  color: #fff;
  display: grid; 
  place-items: center;
  font-size: 1.45rem;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, filter .25s ease;
  opacity: 0;                   /* hidden by default */
  transform: translateY(8px) scale(.96);
  pointer-events: none;         /* non-interactive when hidden */
}

.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover{
  filter: brightness(1.07);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.back-to-top:focus{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(92,107,192,.25), 0 10px 22px rgba(0,0,0,.18);
}

@media (max-width: 576px){
  .back-to-top{
    right: 12px;
    bottom: 76px;
    width: 40px; 
    height: 40px; 
    font-size: 1.35rem;
  }
}


/* =========================
   STAFF PROFILE (CV detail pages)
   ========================= */
.staff-hero{
  background: radial-gradient(140% 120% at 0% 0%, rgba(63,81,181,.08), rgba(63,81,181,0));
}
.role-badge{
  background:#3F51B5; color:#fff; font-weight:700;
  border-radius:999px; padding:.4rem .8rem; letter-spacing:.3px;
}
.profile-photo{
  border-radius:20px; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.12);
  background:#fff; border:1px solid #eef1f6;
}
.profile-photo img{ width:100%; height:auto; display:block; }

/* General content cards */
.content-card{
  background:#fff; border:1px solid #eef1f6; border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.highlight-box{
  background:#F5F7FF; border:1px dashed rgba(63,81,181,.35);
  color:#0f1f3a; border-radius:12px; padding:12px 14px;
}

/* Check list pattern */
.list-check{
  list-style:none; padding-left:0; margin:0;
}
.list-check li{
  position:relative; padding-left:28px; margin:10px 0;
}
.list-check li::before{
  content:""; position:absolute; left:0; top:.45rem; width:16px; height:16px;
  border-radius:50%; background:#3F51B5;
  box-shadow:0 0 0 3px rgba(63,81,181,.18) inset;
}
.list-check li::after{
  content:"\F272"; /* bi-check2 */
  font-family:"bootstrap-icons"; position:absolute; left:2px; top:.1rem; font-size:.9rem; color:#fff;
}

/* Breadcrumb minor tweaks */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:#9aa4b2; }
.breadcrumb a{ text-decoration:none; }


/* =========================
   TEST DETAILS PAGES (common)
   ========================= */
.test-hero{
  background: radial-gradient(130% 120% at 0% 0%, rgba(63,81,181,.08), rgba(63,81,181,0));
}
.icon-circle{
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center;
  background:#E8EAF6; color:#3F51B5; font-size:1.9rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.pill-tag{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  background:#F5F7FF; color:#3F51B5; font-weight:700; font-size:.9rem;
  border:1px solid #E3E7FF;
}

/* Generic content card (if not set elsewhere) */
.content-card{
  background:#fff; border:1px solid #eef1f6; border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

/* Info list (key/value) */
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{
  display:flex; justify-content:space-between; gap:10px;
  padding:.55rem 0; border-bottom:1px dashed #eef1f6;
}
.info-list li:last-child{ border-bottom:0; }
.info-list li span{ color:#6b7280; }
.info-list li strong{ color:#0f1f3a; }

/* Override list-check if not defined earlier */
.list-check{ --icon:"\F269"; --icon-color:#3F51B5; --show-circle:0; } /* bi-chevron-right */
.list-check li{ position:relative; padding-left:26px; margin:.4rem 0; }
.list-check li::before{ content:""; position:absolute; left:0; top:.6rem; width:16px; height:16px; border-radius:50%; background:transparent; }
.list-check li::after{
  content: var(--icon); font-family:"bootstrap-icons"; color:var(--icon-color);
  position:absolute; left:0; top:.25rem; font-size:1rem;
}

@media (max-width:576px){
  .icon-circle{ width:64px; height:64px; font-size:1.6rem; }
}

/* CHİLD TEST CARD: themed border */
.test-card.is-child{
  border: 2.5px solid #303F9F;
  --accent-rgb: 48,63,159;
  border-radius: 16px;
}

/* Header icon & title emphasis for child tests */
.test-card.is-child .test-header .icon{
  background: rgba(var(--accent-rgb), .12);
  color: rgb(var(--accent-rgb));
}
.test-card.is-child .test-header h3{ color: #0f1f3a; }

/* Hover emphasis */
.test-card.is-child .test-list a{ border-radius: 12px; }
.test-card.is-child .test-list a:hover{
  background: rgba(var(--accent-rgb), .10);
  color: white;
}

/* Optional: arrow icon tint */
.test-card.is-child .test-list a i{ color: rgb(var(--accent-rgb)); }

/* Shared border for list rows (keeps items framed) */
.test-card .test-list a{ border: 1.2px solid #3F51B5; }

/* ADULT TEST CARD: mirrors child card behavior */
.test-card.is-adult{
  --accent-rgb: 63,81,181;       /* #3F51B5 */
  border: 2.5px solid #3F51B5;
  border-radius: 16px;
}
.test-card.is-adult .test-header .icon{
  background: rgba(var(--accent-rgb), .12);
  color: rgb(var(--accent-rgb));
}
.test-card.is-adult .test-list a i{ color: rgb(var(--accent-rgb)); }
.test-card.is-adult .test-list a:hover{ background: rgba(var(--accent-rgb), .10); }
.test-card.is-child .test-list a:hover{
  background: rgba(var(--accent-rgb), .10);
  color: black !important;  /* keep text readable depending on bg */
}
.test-card.is-adult .test-list a:hover i{ color: #fff; }


/* =========================
   SERVICE DETAIL PAGES (per-service)
   ========================= */
.service-hero{
  background: radial-gradient(140% 120% at 0% 0%, rgba(63,81,181,.09), rgba(63,81,181,0));
}
.eyebrow{
  color:#3F51B5; font-weight:700; letter-spacing:.35px; text-transform:uppercase;
}
.fw-800{ font-weight:800; }

/* Hero image box */
.hero-media{
  border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid #eef1f6;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}
.hero-media img{ display:block; width:100%; height:auto; }

/* Right column highlight card */
.info-card{
  background:#F5F7FF; border:1px solid #E3E7FF; border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* Theme-aligned buttons (global) */
.btn-primary{
  background:#3F51B5; border-color:#3F51B5; 
  font-weight:700; border-radius:.75rem; padding:.8rem 1.1rem;
}
.btn-primary:hover{ background:#3046a4; border-color:#3046a4; }

.btn-outline-primary{
  color:#3F51B5; border-color:#3F51B5;
  font-weight:700; border-radius:.75rem; padding:.8rem 1.1rem;
}
.btn-outline-primary:hover{ background:#3F51B5; color:#fff; }


/* =========================
   NAVBAR LOGO (responsive sizing)
   ========================= */
.navbar { position: relative; z-index: 1025; } /* keep above content */
.navbar .navbar-brand { display:flex; align-items:center; }

/* Desktop */
.brand-logo{
  height: 100px;
  width: auto;
  max-width: 52vw;
  object-fit: contain;
}

/* <= lg (tablets, small laptops) */
@media (max-width: 991.98px){
  .navbar{ height: 72px; }
  .brand-logo{ height: 70px; max-width: 55vw; }
}

/* <= sm (phones) */
@media (max-width: 575.98px){
  .navbar{ height: 64px; }
  .brand-logo{ height: 63px; max-width: 60vw; }
}

/* Tiny devices */
@media (max-width: 380px){
  .brand-logo{ height: 55px; max-width: 60vw; }
}


/* =========================
   MOBILE MENU (glass panel look)
   ========================= */
@media (max-width: 991.98px){
  .navbar .collapse.navbar-collapse{
    position: absolute;       /* attaches under navbar */
    top: 100%;
    left: 0; right: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px); /* iOS */
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    padding: 12px 16px 16px;
    z-index: 1100;
  }

  /* Touch friendly spacing */
  .navbar .navbar-nav .nav-link{
    padding: .65rem .8rem;
    margin: .15rem 0;
    border-radius: 10px;
    color: #1f2937;
  }
  .navbar .navbar-nav .nav-link:hover{
    background: rgba(63,81,181,.08);
    color: #3F51B5 !important;
    text-shadow: none;
  }

  .navbar .dropdown-menu{
    border-radius: 12px;
    border-color: #eef1f6;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }

  .navbar .navbar-toggler{ padding: .35rem .55rem; }
}

/* Keep same backdrop during collapse animation */
@media (max-width: 991.98px){
  .navbar .collapse.navbar-collapse,
  .navbar .collapsing{
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    padding: 12px 14px 14px;
    z-index: 1100;
  }

  .navbar .navbar-nav{ padding: 4px 4px 8px; }
  .navbar .navbar-nav .nav-item{ margin: 2px 0; }

  /* Inline-flex “pill” links (background only around text) */
  .navbar .navbar-nav .nav-link{
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: .55rem .9rem;
    margin: .2rem 0;
    border-radius: 12px;
    background: transparent;
    color: #1f2937;
    transition: background-color .12s ease, color .12s ease, transform .12s ease;
  }
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link:focus{
    background: rgba(63,81,181,.10);
    color: #3F51B5 !important;
    text-shadow: none;
  }

  /* Disable underline animation on mobile (conflicts with pills) */
  .navbar-nav .nav-link::after{ content: none !important; }
}


/* =========================
   LIST-CHECK CLEANUP
   - Remove the blue circle, keep chevron and adjust spacing
   ========================= */
.list-check li::before{ display: none !important; }
.list-check li{ padding-left: 22px; }
.list-check li::after{
  left: 0;
  color: #3F51B5;
  font-size: 1rem;
}
/* === Custom Fix: Hide hero arrows on small screens === */
@media (max-width: 670px){
  .hero-slider .carousel-control-prev,
  .hero-slider .carousel-control-next{
    display: none !important;
  }
}
/* === Top bar: responsive contact layout === */
/* Default (desktop/tablet): yan yana */
.top-bar .contact-info{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.top-bar .contact-info .ci-item{
  display: inline-flex;
  align-items: center;   /* ikon + metin aynı hizaya */
  gap: 6px;
  line-height: 1.2;
}

/* Breakpoint ve altı: alt alta (ikon + metin aynı satırda) */
@media (max-width: 576px){          /* ihtiyaca göre 640/768 yapabilirsin */
  .top-bar .contact-info{
    flex-direction: column;         /* telefon üstte, mail altta */
    align-items: flex-start;        /* sola yasla (istersen center) */
    gap: 4px;
  }
  .top-bar .contact-info .separator{
    display: none !important;       /* mobilde | gizle */
  }
}
/* === Way A === */
/* Top bar: contact-info layout */
.top-bar .contact-info{
  display: flex;               /* desktop/tablet: yan yana */
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;           /* satır kırılmasın */
}

.top-bar .contact-info .ci-item{
  display: inline-flex;        /* ikon + metin aynı satırda */
  align-items: center;
  gap: 6px;
  white-space: nowrap;         /* numara/mail bölünmesin */
}

/* Sadece küçük ekranlarda (≤576px): alt alta */
@media (max-width: 670px){
  .top-bar .contact-info{
    flex-direction: column;    /* telefon üstte, mail altta */
    align-items: flex-start;   /* sola yasla */
    gap: 4px;
  }
}

/* (İsteğe bağlı) ikon boyutu ve hizası */
.top-bar .contact-info i{
  font-size: 1rem;
  line-height: 1;
}