/* =========================================
   Root Variables
========================================= */
:root { --teal: #087f91; --teal-dark: #005b68; --cyan: #23b8c5; --orange: #f7943d; --orange-dark: #e97921; --cream: #fffaf4; --soft-blue: #eefbfd; --ink: #123d48; --muted: #60777d; --white: #fff; --shadow: 0 14px 40px rgba(0,91,104,.10); --radius: 18px; }

/* =========================================
   General Reset & Layout
========================================= */
* { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: var(--ink); background: #fff; overflow-x: hidden; }
a { text-decoration: none; }
.section-pad { padding: 90px 0; }
.section-kicker { color: var(--orange-dark); font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.section-title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.15; font-weight: 700; color: var(--teal); }
.section-title span { color: var(--orange); }
.section-copy { color: var(--muted); line-height: 1.8; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.show { opacity: 1; transform: none; }

/* =========================================
   Header & Navbar 
========================================= */
.topbar { font-size: .78rem; background: #fff; border-bottom: 1px solid #edf4f5; }
.brand-logo { height: 54px; width: auto; object-fit: contain; }
.navbar { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); transition: .3s ease; border-bottom: 1px solid transparent; }
.navbar.scrolled { box-shadow: 0 8px 25px rgba(0,70,80,.08); border-color: #e7f0f2; }
.navbar-nav .nav-link { color: #27545d; font-size: .82rem; font-weight: 600; padding: .8rem 0.55rem !important; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--orange-dark); }
.phone-pill { color: var(--teal); font-weight: 600; white-space: nowrap; }
.social-mini a { color: var(--teal); margin-left: 12px; font-size: 1rem; }
.navbar-expand-lg .navbar-nav li.nav-item:last-child a { padding-right: 0 !important; }
.nav-doctor-brand { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.nav-doctor-icon { display: flex; align-items: center; justify-content: center; max-width: 50px; }
.nav-doctor-info { display: flex; flex-direction: column; }
.nav-doctor-name { font-size: 1.8rem; font-weight: 700; color: #0b2545; line-height: 1.2; }
.nav-doctor-sub { font-size: 0.77rem; font-weight: 600; color: #087f91; }

/* =========================================
   Buttons
========================================= */
.btn-brand { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; padding: .82rem 1.35rem; border-radius: 10px; box-shadow: 0 8px 18px rgba(247,148,61,.22); }
.btn-brand:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; transform: translateY(-2px); }
.btn-outline-brand { border: 1.5px solid var(--teal); color: var(--teal); font-weight: 600; padding: .8rem 1.35rem; border-radius: 10px; background: #fff; }
.btn-outline-brand:hover { background: var(--teal); color: #fff; }

/* =========================================
   Hero Section
========================================= */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: radial-gradient(circle at 75% 35%,rgba(35,184,197,.15),transparent 32%), linear-gradient(110deg,#f7fffe 0%,#eefbfc 53%,#fff 100%); }
.hero:before { content: ""; position: absolute; width: 330px; height: 330px; right: -130px; top: -110px; background: var(--teal); opacity: .08; transform: rotate(45deg); }
.hero:after { content: ""; position: absolute; width: 190px; height: 190px; right: 40px; bottom: -100px; background: var(--orange); opacity: .11; transform: rotate(45deg); }
.hero-content { position: relative; z-index: 2; }
.hero-kicker { color: var(--teal); letter-spacing: 2.5px; font-weight: 700; font-size: .82rem; }
.hero h1 { font-size: clamp(1.8rem, 3.6vw, 3.5rem); line-height: 1.04; font-weight: 700; color: var(--teal-dark); margin: 12px 0 18px; }
.hero h1 span { color: var(--orange); }
.hero-sub { max-width: 620px; color: #527078; line-height: 1.75; font-size: 1rem; }
.doctor-name { font-size: 1.35rem; color: var(--teal-dark); font-weight: 700; margin-bottom: 3px; }
.doctor-meta { color: #38636c; font-weight: 600; font-size: .9rem; }
.hero-photo-wrap { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.hero-photo { width: min(100%,570px); object-fit: cover; object-position: center 20%; border-radius: 40px 0 40px 0; box-shadow: 0 25px 70px rgba(0,91,104,.18); filter: saturate(.95); }
.hero-badge { position: absolute; right: -12px; top: 90px; width: 160px; padding: 20px 15px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); text-align: center; font-size: .78rem; font-weight: 600; color: var(--teal); }
.hero-badge strong { display: block; font-size: 1.25rem; color: var(--orange); }
.trust-row { display: flex; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 600; color: #38636c; }
.trust-item i { font-size: 1.3rem; color: var(--teal); }

/* =========================================
   Floating Brand Shapes
========================================= */
.shape { position: absolute; width: 58px; height: 58px; transform: rotate(45deg); opacity: .85; }
.shape.teal { background: rgba(35,184,197,.18); }
.shape.orange { background: rgba(247,148,61,.25); }
.shape.s1 { right: 9%; top: 18%; }
.shape.s2 { right: 16%; bottom: 17%; width: 38px; height: 38px; }
.shape.s3 { left: -25px; bottom: 18%; width: 80px; height: 80px; }

/* =========================================
   About Us Section
========================================= */
.about-photo { width: 100%; object-fit: cover; object-position: center top; border-radius: 22px; box-shadow: var(--shadow); }
.consult-card { background: linear-gradient(135deg,#eefbfd,#f9ffff); border: 1px solid #d9eff2; border-radius: 18px; padding: 22px; margin-top: 20px; }
.consult-card h6 { color: var(--teal); font-weight: 700; }
.consult-card li { font-size: .78rem; color: #56727a; margin-bottom: 8px; }
.quote-box { background: #effbfd; border-left: 4px solid var(--orange); padding: 18px 20px; border-radius: 0 14px 14px 0; color: var(--teal-dark); font-style: italic; font-weight: 600; }
.firm-img { height: 764px; }

/* =========================================
   Services Section
========================================= */
.services-section { background: linear-gradient(180deg,#f2fcfd,#eaf8fa); }
.service-card { height: 100%; background: #fff; border: 1px solid #dceff1; border-radius: 16px; padding: 26px 22px; box-shadow: 0 7px 22px rgba(0,91,104,.06); transition: .3s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 16px 34px rgba(0,91,104,.12); }
.service-icon { width: 58px; height: 58px; border-radius: 50%; background: #e9f9fb; color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 18px; }
.service-card h5 { font-size: 1rem; color: var(--teal-dark); font-weight: 700; }
.service-card p { font-size: .78rem; color: var(--muted); line-height: 1.65; margin: 0; }

/* =========================================
   Clinic Section
========================================= */
.clinic-image { width: 100%; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.care-box { border: 1px solid #e3eff0; background: #fff; border-radius: 14px; padding: 22px; height: 100%; box-shadow: 0 8px 25px rgba(0,91,104,.05); }
.care-box i { font-size: 1.8rem; color: var(--orange); }
.care-box h5 { color: var(--teal); font-size: 1rem; font-weight: 700; }
.care-box p { font-size: .78rem; color: var(--muted); line-height: 1.7; }
.clinic-box { background: var(--teal-card); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 18px 20px; color: var(--white); transition: all 0.3s ease; text-decoration: none; display: block; }
.clinic-box:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--white); transform: translateY(-3px); color: var(--white); }

/* =========================================
   Why Choose Us Section
========================================= */
.why-card { padding: 22px 15px; text-align: center; border-right: 1px solid #dcebed; }
.why-card:last-child { border-right: 0; }
.why-number { color: var(--orange); font-weight: 700; font-size: .72rem; }
.why-icon { width: 55px; height: 55px; margin: 10px auto 12px; border-radius: 50%; background: #effbfd; color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.why-card h6 { font-size: .85rem; color: var(--teal-dark); font-weight: 700; }
.why-card p { font-size: .72rem; color: var(--muted); line-height: 1.6; }

/* =========================================
   Hospitals & OPD Section
========================================= */
.hospital-section { background: #f0fbfc; }
.hospital-logo { min-height: 90px; background: #fff; border: 1px solid #dceff1; border-radius: 13px; display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center; color: #57727a; font-size: .8rem; font-weight: 700; }
.hospital-logo span { display: block; color: var(--teal); font-size: 1rem; }
.hospital-logo small { display: block; font-weight: 500; color: #8b9da1; }
.opd-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.opd-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15) !important; }

/* =========================================
   Reviews Section
========================================= */
.reviews-section { background: #fff; }
.google-mark { font-weight: 700; color: #4285f4; }
.stars { color: #f5a623; letter-spacing: 2px; }
.review-card { background: #fff; border: 1px solid #e1eeee; border-radius: 15px; padding: 22px; height: 100%; box-shadow: 0 8px 24px rgba(0,91,104,.05); }
.review-avatar { width: 38px; height: 38px; border-radius: 50%; background: #eaf8fa; color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.review-card p { font-size: .78rem; color: var(--muted); line-height: 1.65; }

/* =========================================
   Gallery, Nav-Pills & Reels Section
========================================= */
.modern-gallery-item { background: #ffffff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03); transition: all 0.35s ease; height: 100%; display: flex; flex-direction: column; cursor: pointer; }
.modern-gallery-item:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(8, 127, 145, 0.12); border-color: rgba(8, 127, 145, 0.3); }
.gallery-media-wrapper { position: relative; overflow: hidden; background: #0f172a; }
.gallery-media-wrapper img { width: 100%; height: 280px; object-fit: cover; transition: transform 0.5s ease; }
.modern-gallery-item:hover .gallery-media-wrapper img { transform: scale(1.06); }
.gallery-overlay { position: absolute; inset: 0; background: rgba(8, 127, 145, 0.4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; opacity: 0; transition: opacity 0.3s ease; }
.modern-gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-content-box { padding: 18px 22px; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.nav-pills .nav-link { background-color: #fff; color: #475569; transition: all 0.3s ease; }
.nav-pills .nav-link.active { background-color: #087f91 !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(8, 127, 145, 0.3); }
.custom-video-height { position: relative; width: 100%; padding-bottom: 124%; }
.custom-video-height iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.reel-card { height: 480px; border-radius: 20px !important; overflow: hidden; position: relative; background: #000; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.reel-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); }
.reel-thumb { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2; transition: opacity 0.3s ease; }
.reel-card iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0; z-index: 1; }
.reel-duration-badge { position: absolute; bottom: 15px; left: 15px; background: rgba(0, 0, 0, 0.65); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px); z-index: 3; pointer-events: none; }
.reel-expand-icon { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.6); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; backdrop-filter: blur(4px); z-index: 3; pointer-events: none; }

/* =========================================
   Contact Section
========================================= */
.contact-section { background: linear-gradient(135deg,#00758a,#004f5d); color: #fff; }
.contact-section .section-title { color: #fff; }
.contact-section .section-copy { color: #d8eef1; }
.contact-panel { background: #fff; border-radius: 20px; padding: 28px; color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.15); }
.form-control, .form-select { border-color: #dcebed; border-radius: 9px; padding: .78rem .9rem; font-size: .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 .2rem rgba(35,184,197,.13); }
.location-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 18px; }
.location-card h6 { font-weight: 700; }
.location-card p { font-size: .75rem; color: #d8eef1; margin: 0; }
.map-btn { transition: background-color 0.2s ease, transform 0.2s ease; }
.map-btn:hover { background-color: #f8f9fa !important; transform: scale(1.03); }

/* =========================================
   Floating Action Buttons / Socials
========================================= */
.floating-socials { position: fixed; bottom: 30px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 12px; }
.float-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; text-decoration: none; }
.float-btn:hover { transform: scale(1.1); color: #fff; }
.btn-gmb { background-color: #4285F4; }
.btn-phone { background-color: #087f91; }
.btn-whatsapp { background-color: #25D366; }
.btn-insta { background-color: #E1306C; }

/* =========================================
   Footer
========================================= */
footer { background: #003f4a; color: #b9d8dc; }
footer .footer-brand { height: 48px; width: auto; }
footer h6 { color: #fff; font-weight: 700; font-size: .82rem; }
footer a { color: #b9d8dc!important; font-size: .75rem!important; display: block!important; margin-bottom: 7px!important; }
footer a:hover { color: #fff!important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .68rem; }

.screen-reader-response {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.wpcf7 p {
    margin-bottom: 0.1rem !important;
}
.wpcf7-form .is-invalid,
.wpcf7-form input.is-invalid,
.wpcf7-form select.is-invalid,
.wpcf7-form textarea.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
}

.custom-error,
.recaptcha-error-msg {
  color: #dc3545;
  font-size: 13px;
  margin-top: 4px;
  display: block;
}

.g-recaptcha {
  margin-bottom: 4px;
}

/* CF7 default error style override */
.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 13px;
}
/* =========================================
   Responsive (Media Queries)
========================================= */
@media screen and (max-width: 991.98px) {
    .float-btn { width: 34px; height: 34px; font-size: 1.1rem; }
    .floating-socials { gap: 8px; }
    .hero { min-height: auto; padding: 40px 0 40px; }
    .hero-photo-wrap {margin-top: 35px; }
    .hero-badge { right: 5px; top: 45px; }
    .navbar .phone-pill { display: none; }
    .why-card { border-right: 0; border-bottom: 1px solid #dcebed; }
    .btn-brand { padding: .52rem 0.8rem; border-radius: 7px; }
    .btn-outline-brand { padding: .52rem 0.8rem; border-radius: 7px; }
    .firm-img {height: auto;}
}

@media screen and (max-width: 767.98px) {
    .nav-doctor-brand .nav-doctor-sub { max-width: 190px; white-space: break-spaces; line-height: 1; }
    .section-pad { padding: 65px 0; }
    .hero h1 { font-size: 2.65rem; }
    .hero-photo {border-radius: 28px 0 28px 0; }
    .hero-badge { width: 125px; font-size: .68rem; top: 25px; }
    .brand-logo { height: 45px; }
    .btn-brand {padding: .32rem 0.6rem;}
    .btn-outline-brand {padding: .32rem 0.6rem;}
}


@media screen and (max-width: 575px) {
.hero h1 { font-size: 2rem; }
.nav-doctor-brand .img-fluid {max-width: 40px;}
.nav-doctor-brand {gap: 8px;}
.nav-doctor-name {font-size: 1rem;}
.nav-doctor-sub {font-size: 0.6rem;}
.nav-doctor-brand .nav-doctor-sub {max-width: 163px;}
}