:root {
    --primary-blue: #0b3c85;
    --dark-blue: #092a5e;
    --teal-green: #007a78;
    --accent-orange: #f26522;
    --purple-gradient: linear-gradient(135deg, #2b1154, #482082);
    --light-bg: #f4f7fb;
}
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    background-color: var(--light-bg);
    overflow-x: hidden;
}
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--primary-blue),
        #185adb
    ) !important;
    color: white !important;
    font-size: 1rem;
}
/* --- Hero / Banner Section --- */
.hero-section {
    /* background: url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&q=80&w=1600') center/cover no-repeat; */
    background: url("../images/bg3.png") center/cover no-repeat;
    position: relative;
    min-height: 620px;
}
.hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.56) 0%,
        rgba(255, 255, 255, 0.48) 45%,
        rgba(255, 255, 255, 0.25) 100%
    );
    height: 100%;
    width: 100%;
    padding: 0.5rem 0 3.5rem 0;
}
.banner-logo {
    height: auto;
}
.tagline {
    font-family: "Brush Script MT", "Comic Sans MS", cursive;
    color: #e54c38;
    font-size: 1.8rem;
    line-height: 1.2;
    margin-top: 5px;
}
.banner-nav .nav-link {
    color: var(--dark-blue);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.5rem 0rem !important;
    transition: all 0.3s ease;
    margin: 0 0.8rem;
}
.banner-nav .nav-link:hover,
.banner-nav .nav-link.active {
    color: var(--accent-orange);
    transform: translateY(-2px);
    border-bottom: 2px solid;
}
.team-badge {
    background: linear-gradient(135deg, var(--primary-blue), #185adb);
    color: white;
    border-radius: 12px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 20px rgba(11, 60, 133, 0.25);
}
/* ================================
   DIAGNOSTICS DROPDOWN
================================ */

.banner-nav .dropdown-menu {
    min-width: 240px;
    padding: 10px;
    margin-top: 12px;
    border-radius: 14px;
    background: #ffffff;
}

.banner-nav .dropdown-item {
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: all 0.25s ease;
}

.banner-nav .dropdown-item i {
    color: #168e9c;
}

.banner-nav .dropdown-item:hover,
.banner-nav .dropdown-item:focus {
    background: #eef8f8;
    color: #168e9c;
    transform: translateX(3px);
}

.banner-nav .dropdown-divider {
    margin: 8px 5px;
}
/* Specialty Cards Grid */
.specialties-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(9, 42, 94, 0.12);
}
.specialty-grid-card {
    background: #ffffff;

    padding: 12px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--dark-blue);
    transition: all 0.2s ease;
}
.specialties-card-inner {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.specialty-grid-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(11, 60, 133, 0.15);
}
.specialty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 0 auto 6px auto;
}
.specialty-grid-card span {
    text-transform: uppercase;
    font-size: 13px;
    position: relative;
    display: inline-block; /* Ensures span calculates width properly */
    padding-bottom: 10px;
}
.specialty-grid-card span::after {
    content: "";
    position: absolute;
    bottom: 0; /* Positions line at the very bottom edge of the span */
    left: 50%; /* Moves the start of the line to the horizontal center */
    transform: translateX(
        -50%
    ); /* Shifts line left by half its width (10px) to center it */
    height: 2px;
    width: 20px;
    background: #185adb;
}
.specialties-card-inner .row .col-4:nth-child(-n + 6) {
    border-bottom: 1px solid #e2e8f0;
}
/* 2. Right border for the first column (items 1, 4, 7) */
.specialties-card-inner .row .col-4:nth-child(3n + 1) {
    border-right: 1px solid #ccc;
}
/* 3. Left border for the last column (items 3, 6, 9) */
.specialties-card-inner .row .col-4:nth-child(3n) {
    border-left: 1px solid #ccc;
}
.features-bar {
    background: linear-gradient(90deg, #092a5e 0%, #0b3c85 100%);
    color: white;
    padding: 20px 0 5px;
}
.feature-box {
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 15px;
}
.feature-box:last-child {
    border-right: none;
}
.feature-title {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}
/* Circular Icon Container */
.icon-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.icon-circle img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
/* Feature Text Styling */
.feature-text {
    font-size: 14px;
    font-weight: 700;
    color: #1a0c47; /* Dark navy text */
    line-height: 1.2;
}
/* Vertical Divider Lines Between Columns */
.feature-col {
    position: relative;
}
.feature-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 35px;
    width: 1px;
    background-color: #e2e8f0;
}
.metric-item-section {
    margin-bottom: -75px;
    background-color: #fff;
    border-radius: 50px;
    margin-top: 50px;
    padding-bottom: 15px;
    padding-left: 10px;
}
/* Section & Background Gradient */
.about-section {
    background: linear-gradient(135deg, #eef5ff 0%, #ffffff 50%, #e3effd 100%);
    padding: 60px 0;
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    color: #333333;
}
/* Sub-title & Accents */
.sub-title {
    color: #174b8b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.title-underline-blue {
    width: 30px;
    height: 3px;
    background-color: #1a56db;
    margin: 6px 0 16px 0;
    border-radius: 2px;
}
.main-heading {
    color: #0d1b40;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.25;
}
.title-underline-yellow {
    width: 35px;
    height: 4px;
    background-color: #ffc107;
    margin: 12px 0 20px 0;
    border-radius: 2px;
}
/* Paragraphs */
.lead-text {
    font-size: 15px;
    font-weight: 600;
    color: #4a5568;
    line-height: 1.6;
}
.body-text {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}
/* Middle Cards */
.feature-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    height: 100%;
}
.card-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.blue-bg {
    background-color: #e8f1ff;
    color: #1a56db;
}
.red-bg {
    background-color: #ffeef0;
    color: #e11d48;
}
.card-text h5 {
    font-size: 20px;
    font-weight: 800;
    color: #0d1b40;
    margin: 0;
}
.card-text h6 {
    font-size: 16px;
    font-weight: 700;
    color: #0d1b40;
    margin-bottom: 10px;
    position: relative;
}
.title-underline-blue2 {
    width: 35px;
    height: 2px;
    background-color: #0d1b40;
    margin: 12px 0 10px 0;
    border-radius: 2px;
}
.title-underline-red {
    width: 35px;
    height: 2px;
    background-color: rgb(220, 53, 69);
    margin: 12px 0 10px 0;
    border-radius: 2px;
}
.card-text p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
/* Image Wrapper */
.about-image-wrapper {
    background: #ffffff;
    padding: 10px;
    border-radius: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}
.about-image {
    border-radius: 32px;
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* Bottom Feature Strip */
.bottom-strip-wrapper {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.strip-item {
    padding: 10px 15px;
    position: relative;
}
.strip-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 35px;
    width: 1px;
    background-color: #f1f5f9;
}
.strip-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.icon-blue {
    background-color: #e0f2fe;
    color: #0284c7;
}
.icon-green {
    background-color: #dcfce7;
    color: #16a34a;
}
.icon-purple {
    background-color: #f3e8ff;
    color: #9333ea;
}
.icon-orange {
    background-color: #ffedd5;
    color: #ea580c;
}
.icon-teal {
    background-color: #ccfbf1;
    color: #0d9488;
}
.strip-item h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #0d1b40;
}
.strip-item p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.3;
}
.text-purple {
    color: #8b5cf6;
}
/* Responsive adjustments */
@media (max-width: 991px) {
    .strip-item:not(:last-child)::after {
        display: none;
    }
    .strip-item {
        border-bottom: 1px solid #f1f5f9;
    }
}
.contact-bar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    position: relative;
    z-index: 10;
}
.cta-button-box {
    background: linear-gradient(90deg, #501d80 0%, #f26522 100%);
    color: white;
    border-radius: 0 50px 50px 0;
    padding: 12px 25px;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: #0b3c85;
    border-right: 1px solid #ddd;
    padding-right: 20px;
}
.contact-info-item:last-child {
    border-right: none;
}
/* --- Global Section Enhancements --- */
.section-padding {
    padding: 90px 0;
    position: relative;
}
/* --- WHY CHOOSE US SECTION (EXACT DESIGN REPLICA) --- */
.why-choose-bg-wrapper {
    position: relative;
    /* Clinic exterior building image set as full section background */
    background-image: url("../images/bg1.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px 0 60px 0;
}
/* Creates the white panel on the left covering the text area while revealing background on right */
.why-left-content-panel {
    padding: 40px;
    /* background: #ffffff;
        border-radius: 20px 0 0 20px;
        box-shadow: -10px 10px 30px rgba(0,0,0,0.05); */
}
.why-left-content-inner {
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
}
@media (max-width: 991px) {
    .why-left-content-panel {
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.95);
    }
}
.why-header-main {
    font-weight: 900;
    color: #082554;
    font-size: 2.8rem;
    letter-spacing: -0.5px;
    line-height: 1;
}
.why-header-sub {
    font-family: "Brush Script MT", "Comic Sans MS", cursive;
    color: #007a78;
    font-size: 3rem;
    margin-top: -12px;
    margin-bottom: 5px;
}
.why-grid-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.why-grid-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* background-color: #007a78; */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 122, 120, 0.25);
}
.why-grid-icon img {
    width: 60px;
}
.why-grid-title {
    font-weight: 800;
    font-size: 0.82rem;
    color: #082554;
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}
.why-grid-desc {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.35;
    margin-bottom: 10px;
}
/* Building Right Text Overlay */
.building-right-overlay-text {
    font-family: "Segoe UI", sans-serif;
    color: #082554;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    text-align: right;
    padding-right: 40px;
}
.why-bottom-strip {
    background-color: #082554;
    color: white;
    border-radius: 16px;
    padding: 16px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(8, 37, 84, 0.3);
    margin-top: 30px;
}
.why-building-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    padding: 8px 16px;
    border-radius: 8px;
    font-family: "Brush Script MT", "Comic Sans MS", cursive;
    color: #082554;
    font-size: 1.5rem;
    font-weight: bold;
}
.why-bottom-strip {
    background-color: #082554;
    color: white;
    border-radius: 16px;
    padding: 6px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(8, 37, 84, 0.3);
}
/* Floating Dark Blue Badge */
.badge {
    background: #002b66;
    color: #ffffff;
    padding: 12px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    width: 175px;
    margin-top: 50px;
}
.badge-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}
.badge-text p {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0;
}
.features-list {
    padding: 15px 0 15px 15px; /* Removes right padding */
    display: flex;
    flex-direction: column;
    gap: 0.75px;
    position: absolute;
    right: 0;
    bottom: 20%;
}
.feature-item {
    background: #ffffff;
    padding: 12px 16px;
    /* Rounded left side, straight right side touching the edge */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.05);
}
/* Circle Icon Container Base */
.icon-box {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.feature-item .icon-box img {
    width: 40px;
}
/* Color Themes for Icons */
.icon-box.green {
    background-color: #e6f7f5;
    border: 1px solid #ccf0eb;
}
.icon-box.blue {
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
}
.icon-box.pink {
    background-color: #fff1f2;
    border: 1px solid #ffe4e6;
}
.icon-box.cyan {
    background-color: #f0fdfa;
    border: 1px solid #ccfbf1;
}
.feature-text h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.feature-text p {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin: 0;
}
/* --- PARALLAX SECTION IMPACT --- */
.parallax-bg {
    background:
        linear-gradient(rgba(9, 42, 94, 0.88), rgba(11, 60, 133, 0.92)),
        url("https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&q=80&w=1600")
            center/cover no-repeat fixed;
    color: white;
}
/* --- MODERN GLASS CARDS FOR LAB & PACKAGES --- */
.glass-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.35 ease;
    height: 100%;
}
.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 60, 133, 0.12);
    border-color: var(--primary-blue);
}
.lab-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef4ff, #d8e5ff);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.glass-card:hover .lab-icon-box {
    background: var(--primary-blue);
    color: white;
    transform: rotate(5deg) scale(1.05);
}
/* Package Card */
.package-card {
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    transition: all 0.35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-blue);
}
.package-header {
    background: var(--purple-gradient);
    color: white;
    padding: 24px 20px;
    text-align: center;
    position: relative;
}
.package-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-orange);
}
/* --- Article Cards --- */
.article-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    height: 100%;
    background: white;
    transition: all 0.3s ease;
}
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
.article-img {
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.article-card:hover .article-img {
    transform: scale(1.05);
}
/* --- Glassmorphic Booking Form --- */
.booking-section {
    background: linear-gradient(135deg, #061a3a 0%, #092a5e 100%);
    color: white;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}
.booking-section::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle,
        rgba(242, 101, 34, 0.15) 0%,
        transparent 70%
    );
    pointer-events: none;
}
.booking-option-btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.booking-option-btn:hover {
    background: white;
    color: var(--primary-blue);
    transform: translateX(8px);
}
/* --- Footer --- */
footer {
    background-color: #041229;
    color: #9cb3d6;
    padding-top: 70px;
}
footer a {
    color: #9cb3d6;
    text-decoration: none;
    transition: color 0.2s;
}
footer a:hover {
    color: white;
}
.footer-title {
    color: white;
    font-weight: 700;
    margin-bottom: 22px;
    position: relative;
}
.footer-title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-orange);
}
.lab-wrapper {
    display: flex;
    position: relative;
    background: url("../images/bg1.jpeg") center/cover;
    overflow: hidden;
    min-height: 250px;
}
.hero-left {
    flex: 1.2;
    padding: 10px 20px 10px 0;
    z-index: 2;
}
.hero-right {
    flex: 1;
    position: relative;
}
.sub-heading {
    color: #0284c7;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}
.hero-left h1 {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 800;
    margin-top: 4px;
}
.tagline2 {
    color: #0f766e;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 4px;
}
.description {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 6px;
    max-width: 90%;
}
.hero-pills {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.hero-pills img {
    width: 50px;
}
.pill {
    background: #fff;
    border: 1px solid #e0f2fe;
    padding: 3px 6px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.pill-icon {
    font-size: 1rem;
    color: #0284c7;
}
.pill div {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.pill strong {
    font-size: 0.75rem;
    color: #0f172a;
}
.pill span {
    font-size: 0.65rem;
    color: #64748b;
}
/* TOP RIGHT BADGE */
.top-badge {
    background: #032b69;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-top: 50px;
    width: 210px;
}
.badge-ribbon {
    font-size: 1.8rem;
    color: #fbbf24;
}
.badge-content strong {
    display: block;
    font-size: 0.8rem;
}
.badge-content span {
    font-size: 0.65rem;
    opacity: 0.85;
}
/* DEPARTMENTS GRID */
.departments-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}
.dept-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.dept-icon {
    font-size: 1.4rem;
    margin-bottom: 8px;
    text-align: center;
}
.dept-icon img {
    width: 60px;
}
.dept-icon.blue {
    color: #0284c7;
}
.dept-icon.red {
    color: #ef4444;
}
.dept-icon.teal {
    color: #0d9488;
}
.dept-icon.purple {
    color: #8b5cf6;
}
.dept-icon.orange {
    color: #f97316;
}
.dept-icon.green {
    color: #22c55e;
}
.dept-card h3 {
    font-size: 1rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 6px;
}
.dept-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.3;
    margin-bottom: 12px;
}
.card-bar {
    height: 3px;
    width: 25px;
    margin-top: auto;
    border-radius: 2px;
}
.package-head {
    display: flex;
    position: relative;
    background: url("../images/bg2.jpeg") 65% / cover;
    overflow: hidden;
    padding-top: 30px;
}
.blue-bg {
    background: #0284c7;
}
.red-bg {
    background: #ef4444;
}
.teal-bg {
    background: #0d9488;
}
.purple-bg {
    background: #8b5cf6;
}
.orange-bg {
    background: #f97316;
}
.green-bg {
    background: #22c55e;
}
/* HEALTH PACKAGES CARD */
/* Custom Utility Colors & Fine Tuning */
.text-navy {
    color: #002b66;
}
.bg-navy {
    background-color: #002b66;
}
.bg-navy-dark {
    background-color: #001f4d;
}
.text-purple {
    color: #581c87;
}
.bg-purple {
    background-color: #6b21a8;
}
.btn-purple {
    background-color: #581c87;
    border: none;
}
.text-pink {
    color: #be123c;
}
.bg-pink {
    background-color: #e11d48;
}
.btn-pink {
    background-color: #be123c;
    border: none;
}
.text-teal {
    color: #0f766e;
}
.bg-teal {
    background-color: #0d9488;
}
.btn-teal {
    background-color: #0f766e;
    border: none;
}
.text-orange {
    color: #c2410c;
}
.bg-orange {
    background-color: #c2410c;
}
.btn-orange {
    background-color: #c2410c;
    border: none;
}
.text-violet {
    color: #7e22ce;
}
.bg-violet {
    background-color: #7e22ce;
}
.btn-violet {
    background-color: #7e22ce;
    border: none;
}
.text-warning-light {
    color: #fef08a;
}
.extra-small {
    font-size: 0.65rem;
}
/* Custom Theme Gradient Backgrounds for Card Headers */
.theme-gradient-purple {
    background: linear-gradient(90deg, #5200a5 0%, #2d0063 100%);
}
.theme-gradient-pink {
    background: linear-gradient(90deg, #e6227b 0%, #af1762 100%);
}
.theme-gradient-primary {
    background: linear-gradient(90deg, #0062cd 0%, #00388a 100%);
}
.theme-gradient-teal {
    background: linear-gradient(90deg, #00a3a6 0%, #006769 100%);
}
.theme-gradient-orange {
    background: linear-gradient(90deg, #ff7a00 0%, #d64f00 100%);
}
.theme-gradient-success {
    background: linear-gradient(90deg, #45b035 0%, #237a17 100%);
}
.theme-gradient-violet {
    background: linear-gradient(90deg, #822bd8 0%, #520aa6 100%);
}
/* Decorative line for section titles */
.decor-line {
    width: 20px;
    height: 2px;
    background-color: #0d6efd;
    display: inline-block;
}
/* Header Pills */
.pill-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.pill-badge img {
    width: 40px;
}
.pill-badge span {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.pill-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.watermark-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000' fill-opacity='0.05'%3E%3Cpath d='M19 9V6a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v3a3 3 0 0 0-3 3v2a1 1 0 0 0 1 1h1v2a3 3 0 0 0 3 3h1v2H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2h-1v-2h1a3 3 0 0 0 3-3v-2h1a1 1 0 0 0 1-1v-2a3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 80px;
    pointer-events: none;
    z-index: 0;
}
/* Button Arrow Circle Badge */
.btn-arrow-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #ffffff;
}
.btn-arrow-circle i {
    font-size: 1rem;
    font-weight: 700;
}
/* Card Icons */
.header-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.header-icon img {
    width: 45px;
}
/* Hero Badge & Image */
.family-hero-img {
    width: 300px;
    height: 170px;
    object-fit: cover;
}
.gold-badge {
    bottom: -10px;
    left: 20px;
    background: linear-gradient(135deg, #1e3a8a, #0f172a);
    border: 2px solid #eab308;
    padding: 8px;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.badge-inner span {
    font-size: 0.5rem;
}
.badge-inner strong {
    font-size: 0.55rem;
}
.packages-card {
    position: relative;
    width: 280px; /* Adjust width as needed */
    padding: 24px 20px;
    border-radius: 16px;
    /* Dark blue to teal-blue diagonal gradient */
    background: linear-gradient(135deg, #024080 0%, #00568c 60%, #006884 100%);
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    margin-right: 15px; /* Adds space on the right side */
}
.pkg-content {
    position: relative;
    z-index: 2; /* Keeps text above background icon */
    max-width: 75%; /* Leaves space for icon on the right */
}
.pkg-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}
/* Hover effects */
.package-card {
    transition: transform 0.2s ease-in-out;
}
.package-card:hover {
    transform: translateY(-4px);
}
/* Yellow Action Button */
.btn-yellow {
    background-color: #ffc107;
    color: #0f172a;
    border: none;
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.2s,
        background-color 0.2s;
}
.btn-yellow:hover {
    background-color: #ffb300;
    transform: translateY(-1px);
}
/* Background Stethoscope Icon */
.stethoscope-icon {
    position: absolute;
    right: -5px;
    bottom: -10px;
    width: 130px;
    height: 130px;
    stroke: rgba(255, 255, 255, 0.22); /* Transparent light stroke */
    pointer-events: none;
    z-index: 1;
}
/* MACHINES SECTION */
/* Outer Box with Rounded Border */
.machines-outer-container {
    position: relative;
    border: 1.5px solid #d0e1f9;
    border-radius: 16px;
    background-color: #ffffff;
    padding: 30px 10px 25px 10px;
    margin: 20px 0;
}
/* --- 1. TOP OVERLAPPING HEADING --- */
.top-heading-wrapper {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translate(-50%, -50%); /* Moves title directly over top border */
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.top-heading-wrapper .decor-line {
    width: 24px;
    height: 2px;
    background-color: #0056b3;
}
.top-heading-wrapper .section-title {
    color: #0056b3;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0;
}
/* --- 2. CAROUSEL & CARDS --- */
.machines-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
}
/* Hide default scrollbar */
.machines-carousel::-webkit-scrollbar {
    display: none;
}
.machines-carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* Individual Item Card */
.machine-card {
    flex: 0 0 calc(100% / 6); /* Shows exactly 6 items per slide */
    scroll-snap-align: start;
    text-align: center;
    padding: 0 12px;
    box-sizing: border-box;

    /* Vertical right border for each item */
    border-right: 1px solid #eef2f7;
}
/* Remove right border on the last element */
.machine-card:last-child {
    border-right: none;
}
.machine-card img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    margin-bottom: 12px;
}
.machine-card h4 {
    font-size: 0.72rem;
    color: #002b66;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.machine-card p {
    font-size: 0.65rem;
    color: #64748b;
    line-height: 1.2;
}
/* --- 3. BOTTOM OVERLAPPING BADGE --- */
.bottom-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(
        -50%,
        50%
    ); /* Moves badge directly over bottom border */
    background: #f0f6ff;
    border: 1px solid #d0e1f9;
    padding: 6px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.bottom-badge span {
    font-size: 0.72rem;
    font-weight: 600;
    color: #003366;
}
/* --- RESPONSIVE CONFIGURATION --- */
@media (max-width: 1024px) {
    .machine-card {
        flex: 0 0 calc(100% / 4); /* 4 items per slide on tablet */
    }
}
@media (max-width: 600px) {
    .machine-card {
        flex: 0 0 calc(100% / 2); /* 2 items per slide on mobile */
    }
}
/* BOTTOM BAR */
.features-bar {
    background: #002b66;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.test-features-list {
    display: flex;
    gap: 50px;
}
.test-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.test-feature-item img {
    width: 50px;
}
.circle-icon {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.test-feature-item strong {
    display: block;
    font-size: 0.9rem;
}
.test-feature-item p {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 0;
}
.footer-banner {
    background: linear-gradient(90deg, #022055 0%, #003b8b 50%, #001b48 100%);
    border-radius: 18px;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Teal Circular Icon Container */
.phone-icon-bg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a3a6 0%, #006769 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.phone-icon-bg i {
    color: #ffffff;
    font-size: 1.2rem;
    transform: rotate(-10deg);
}
.contact-label {
    font-size: 0.72rem;
    color: #e0e0e0;
    letter-spacing: 0.2px;
}
.phone-number {
    font-size: 1.45rem;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
/* Vertical Divider */
.banner-divider {
    width: 1px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.25);
}
/* Center Section: Cursive Slogan */
.slogan-section {
    font-family: "Caveat", cursive;
    font-size: 1.85rem;
    color: #ffffff;
    white-space: nowrap;
}
/* Right Section: Badge */
.tagline-badge {
    background: linear-gradient(
        90deg,
        rgba(0, 115, 130, 0.6) 0%,
        rgba(0, 70, 95, 0.6) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #ffffff;
    white-space: nowrap;
}
.heart-icon {
    color: #ffaa00;
    font-size: 0.95rem;
}
.call-banner {
    padding: 6px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 1);
}
.phone-icon {
    font-size: 1rem;
}
.call-banner span {
    display: block;
    font-size: 0.6rem;
    opacity: 0.8;
}
.call-banner strong {
    color: #fbbf24;
    font-size: 0.85rem;
}
.prop-item {
    border-right: 1px solid #ccc;
}
.prop-item img {
    width: 60px;
}
/* Custom styles for inner subpages */
.page-banner {
    background: url("../images/bg3.png") center/cover no-repeat;
    padding: 0px;
    color: #ffffff;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}
.vision-mission-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease;
}
.vision-mission-card:hover {
    transform: translateY(-5px);
}
.timeline-box {
    border-left: 3px solid var(--primary-blue);
    padding-left: 20px;
    margin-left: 10px;
    position: relative;
}
.timeline-box::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--accent-orange);
}
.doctor-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}
.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(11, 60, 133, 0.12);
}
.doctor-img {
    height: 250px;
    object-fit: cover;
    width: 100%;
}

.gm-intro {
    padding: 55px 0 85px;
    position: relative;
    overflow: hidden;
}
.gm-intro:before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(22, 142, 156, 0.12);
    right: -170px;
    top: 20px;
}
.gm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(22, 142, 156, 0.08);
    color: var(--clinic-primary);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gm-title {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1.02;
    color: var(--clinic-dark);
    font-weight: 700;
    letter-spacing: -0.045em;
    margin: 20px 0 22px;
}
.gm-title em {
    color: var(--clinic-primary);
    font-family: "Caveat", cursive;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
}
.gm-lead {
    font-size: 1.08rem;
    line-height: 1.85;
    max-width: 680px;
    color: #617276;
}
.gm-actions .btn {
    border-radius: 50px;
    padding: 0.8rem 1.25rem;
    font-weight: 600;
}
.gm-visual {
    position: relative;
}
.gm-image-wrap {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 28px 70px rgba(17, 68, 75, 0.15);
}
.gm-image-wrap img {
    width: 100%;
    min-height: 350px;
    object-fit: cover;
    display: block;
}
.gm-image-wrap:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7, 42, 48, 0.45));
}
.gm-floating {
    position: absolute;
    z-index: 2;
    left: -28px;
    bottom: 24px;
    background: #fff;
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 18px 50px rgba(17, 68, 75, 0.15);
    display: flex;
    align-items: center;
    gap: 13px;
}
.gm-floating-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: rgba(166, 207, 139, 0.22);
    color: #638d49;
    font-size: 1.3rem;
}
.gm-floating strong {
    display: block;
    color: var(--clinic-dark);
}
.gm-floating small {
    color: #77898d;
}
.gm-section {
    padding: 0 0 90px 0;
}
.gm-section.soft {
    background: var(--clinic-light);
}
.section-eyebrow {
    color: var(--clinic-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.section-heading {
    color: var(--clinic-dark);
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    letter-spacing: -0.035em;
    margin-bottom: 15px;
}
.section-copy {
    color: #687b7f;
    line-height: 1.8;
    max-width: 720px;
}
.discipline-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 20px;
    padding: 23px 21px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}
.discipline-card:before {
    content: "";
    position: absolute;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    right: -25px;
    top: -25px;
    background: rgba(166, 207, 139, 0.18);
}
.discipline-card:hover {
    transform: translateY(-7px);
    border-color: rgba(22, 142, 156, 0.3);
    box-shadow: 0 20px 45px rgba(17, 68, 75, 0.1);
}
.discipline-icon {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: rgba(22, 142, 156, 0.09);
    color: var(--clinic-primary);
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
}
.discipline-card h3 {
    font-size: 1rem;
    color: var(--clinic-dark);
    margin: 0;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.consultant-panel {
    background: linear-gradient(135deg, #123f46 0%, #168e9c 100%);
    color: #fff;
    border-radius: 32px;
    padding: 55px;
    position: relative;
    overflow: hidden;
}
.consultant-panel:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    right: -100px;
    top: -100px;
}
.consultant-panel h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: -0.035em;
    font-weight: 700;
}
.consultant-panel p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}
.info-chip {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.info-chip i {
    color: var(--clinic-secondary);
    font-size: 1.15rem;
    margin-top: 2px;
}
.contact-strip {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(17, 68, 75, 0.07);
}
.contact-strip a {
    color: var(--clinic-primary);
    text-decoration: none;
    font-weight: 600;
}
.gm-backtop {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--clinic-primary);
    color: #fff;
    text-decoration: none;
    margin-left: auto;
}
@media (max-width: 991.98px) {
    .gm-intro {
        padding: 45px 0 65px;
    }
    .gm-floating {
        left: 18px;
    }
    .consultant-panel {
        padding: 38px 28px;
    }
}
@media (max-width: 575.98px) {
    .gm-section {
        padding: 65px 0;
    }
    .gm-title {
        font-size: 2.65rem;
    }
    .gm-image-wrap img {
        min-height: 280px;
    }
    .gm-floating {
        position: relative;
        left: auto;
        bottom: auto;
        margin: -28px 18px 0;
    }
}
.dental-page {
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(22, 142, 156, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(166, 207, 139, 0.13),
            transparent 28%
        ),
        #fff;
    color: #33484d;
}
.dental-breadcrumb {
    padding: 22px 0 0;
    font-size: 0.9rem;
}
.dental-breadcrumb a {
    color: var(--clinic-primary);
    text-decoration: none;
}
.dental-breadcrumb span {
    color: #8a9a9d;
}
.dental-hero {
    padding: 55px 0 90px;
    position: relative;
    overflow: hidden;
}
.dental-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(22, 142, 156, 0.08);
    color: var(--clinic-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dental-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.01;
    color: var(--clinic-dark);
    font-weight: 700;
    letter-spacing: -0.05em;
    margin: 20px 0;
}
.dental-title em {
    font-family: "Caveat", cursive;
    color: var(--clinic-primary);
    font-style: normal;
    letter-spacing: 0;
}
.dental-lead {
    max-width: 650px;
    color: #63767a;
    line-height: 1.85;
    font-size: 1.08rem;
}
.dental-actions .btn {
    border-radius: 50px;
    padding: 0.8rem 1.25rem;
    font-weight: 600;
}
.dental-visual {
    position: relative;
}
.dental-image {
    overflow: hidden;
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(17, 68, 75, 0.16);
    position: relative;
}
.dental-image img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}
.dental-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(7, 42, 48, 0.5));
}
.dental-badge {
    position: absolute;
    z-index: 2;
    left: -28px;
    bottom: 25px;
    background: #fff;
    padding: 18px 20px;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(17, 68, 75, 0.15);
    display: flex;
    gap: 13px;
    align-items: center;
}
.dental-badge-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: rgba(166, 207, 139, 0.2);
    color: #628e49;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}
.dental-badge strong {
    display: block;
    color: var(--clinic-dark);
}
.dental-badge small {
    color: #77898d;
}
.dental-section {
    padding: 90px 0;
}
.dental-section.soft {
    background: var(--clinic-light);
}
.eyebrow {
    color: var(--clinic-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.heading {
    color: var(--clinic-dark);
    font-size: clamp(2rem, 3.6vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 15px;
}
.copy {
    color: #687b7f;
    line-height: 1.8;
    max-width: 730px;
}
.service-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 22px;
    padding: 25px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}
.service-card:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    right: -30px;
    top: -30px;
    background: rgba(166, 207, 139, 0.18);
}
.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(17, 68, 75, 0.1);
    border-color: rgba(22, 142, 156, 0.3);
}
.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(22, 142, 156, 0.09);
    color: var(--clinic-primary);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    margin-bottom: 17px;
    position: relative;
    z-index: 1;
}
.service-card h3 {
    font-size: 1.05rem;
    color: var(--clinic-dark);
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}
.patient-panel {
    background: linear-gradient(135deg, #123f46, #168e9c);
    color: #fff;
    border-radius: 32px;
    padding: 55px;
    position: relative;
    overflow: hidden;
}
.patient-panel:after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    right: -130px;
    top: -120px;
}
.patient-panel h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}
.patient-panel p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}
.patient-list {
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    gap: 12px;
}
.patient-list i {
    color: var(--clinic-secondary);
    font-size: 1.15rem;
}
.patient-card {
    background: #fff;
    color: #344b50;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 18px 50px rgba(17, 68, 75, 0.13);
    position: relative;
    z-index: 2;
}
.patient-card h3 {
    color: var(--clinic-dark);
    font-weight: 700;
}
.patient-card a {
    color: var(--clinic-primary);
}
.contact-strip {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(17, 68, 75, 0.07);
}
.contact-strip a {
    color: var(--clinic-primary);
    text-decoration: none;
    font-weight: 600;
}
.backtop {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--clinic-primary);
    color: #fff;
    text-decoration: none;
}
@media (max-width: 991.98px) {
    .dental-hero {
        padding: 45px 0 65px;
    }
    .dental-badge {
        left: 18px;
    }
    .patient-panel {
        padding: 38px 28px;
    }
}
@media (max-width: 575.98px) {
    .dental-section {
        padding: 65px 0;
    }
    .dental-title {
        font-size: 2.7rem;
    }
    .dental-image img {
        height: 290px;
    }
    .dental-badge {
        position: relative;
        left: auto;
        bottom: auto;
        margin: -28px 18px 0;
    }
}
.ayurveda-page {
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(22, 142, 156, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(166, 207, 139, 0.13),
            transparent 28%
        ),
        #fff;
    color: #33484d;
}
.ay-breadcrumb {
    padding: 22px 0 0;
    font-size: 0.9rem;
}
.ay-breadcrumb a {
    color: var(--clinic-primary);
    text-decoration: none;
}
.ay-breadcrumb span {
    color: #8a9a9d;
}
.ay-hero {
    padding: 55px 0 90px;
    overflow: hidden;
}
.ay-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(22, 142, 156, 0.08);
    color: var(--clinic-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ay-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.01;
    color: var(--clinic-dark);
    font-weight: 700;
    letter-spacing: -0.05em;
    margin: 20px 0;
}
.ay-title em {
    font-family: "Caveat", cursive;
    color: var(--clinic-primary);
    font-style: normal;
    letter-spacing: 0;
}
.ay-lead {
    max-width: 650px;
    color: #63767a;
    line-height: 1.85;
    font-size: 1.08rem;
}
.ay-actions .btn {
    border-radius: 50px;
    padding: 0.8rem 1.25rem;
    font-weight: 600;
}
.ay-visual {
    position: relative;
}
.ay-image {
    overflow: hidden;
    border-radius: 34px;
    box-shadow: 0 28px 70px rgba(17, 68, 75, 0.16);
    position: relative;
}
.ay-image img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}
.ay-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(7, 42, 48, 0.5));
}
.ay-badge {
    position: absolute;
    z-index: 2;
    left: -28px;
    bottom: 25px;
    background: #fff;
    padding: 18px 20px;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(17, 68, 75, 0.15);
    display: flex;
    gap: 13px;
    align-items: center;
}
.ay-badge-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: rgba(166, 207, 139, 0.2);
    color: #628e49;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}
.ay-badge strong {
    display: block;
    color: var(--clinic-dark);
}
.ay-badge small {
    color: #77898d;
}
.ay-section {
    padding: 90px 0;
}
.ay-section.soft {
    background: var(--clinic-light);
}
.eyebrow {
    color: var(--clinic-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.heading {
    color: var(--clinic-dark);
    font-size: clamp(2rem, 3.6vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 15px;
}
.copy {
    color: #687b7f;
    line-height: 1.8;
    max-width: 730px;
}
.ay-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 22px;
    padding: 25px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}
.ay-card:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    right: -30px;
    top: -30px;
    background: rgba(166, 207, 139, 0.18);
}
.ay-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(17, 68, 75, 0.1);
    border-color: rgba(22, 142, 156, 0.3);
}
.ay-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(22, 142, 156, 0.09);
    color: var(--clinic-primary);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    margin-bottom: 17px;
    position: relative;
    z-index: 1;
}
.ay-card h3 {
    font-size: 1.02rem;
    color: var(--clinic-dark);
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}
.ay-panel {
    background: linear-gradient(135deg, #123f46, #168e9c);
    color: #fff;
    border-radius: 32px;
    padding: 55px;
    position: relative;
    overflow: hidden;
}
.ay-panel:after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    right: -130px;
    top: -120px;
}
.ay-panel h2 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}
.ay-panel p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.8;
}
.ay-list {
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    gap: 12px;
}
.ay-list i {
    color: var(--clinic-secondary);
    font-size: 1.15rem;
}
.ay-side {
    background: #fff;
    color: #344b50;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 18px 50px rgba(17, 68, 75, 0.13);
    position: relative;
    z-index: 2;
}
.ay-side h3 {
    color: var(--clinic-dark);
    font-weight: 700;
}
.ay-side a {
    color: var(--clinic-primary);
}
.ay-contact {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--clinic-border);
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(17, 68, 75, 0.07);
}
.ay-contact a {
    color: var(--clinic-primary);
    text-decoration: none;
    font-weight: 600;
}
.backtop {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--clinic-primary);
    color: #fff;
    text-decoration: none;
}
@media (max-width: 991.98px) {
    .ay-hero {
        padding: 45px 0 65px;
    }
    .ay-badge {
        left: 18px;
    }
    .ay-panel {
        padding: 38px 28px;
    }
}
@media (max-width: 575.98px) {
    .ay-section {
        padding: 65px 0;
    }
    .ay-title {
        font-size: 2.7rem;
    }
    .ay-image img {
        height: 290px;
    }
    .ay-badge {
        position: relative;
        left: auto;
        bottom: auto;
        margin: -28px 18px 0;
    }
}
/* COMMON */
.eyebrow {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--wellness-primary);
    margin-bottom: 14px;
}
.heading {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--wellness-dark);
}
.copy {
    color: var(--wellness-text);
    line-height: 1.85;
    font-size: 16px;
}
/* HERO */
.wellness-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 100px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(166, 207, 139, 0.3),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(22, 142, 156, 0.12),
            transparent 30%
        ),
        linear-gradient(135deg, #f4fbf8 0%, #ffffff 55%, #eef8f3 100%);
}
.wellness-hero::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    border: 1px solid rgba(22, 142, 156, 0.1);
    right: -150px;
    top: -160px;
}
.wellness-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(166, 207, 139, 0.1);
    left: -80px;
    bottom: -100px;
}
.wellness-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(22, 142, 156, 0.15);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    color: var(--wellness-primary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 25px;
}
.wellness-title {
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.065em;
    font-weight: 800;
    color: var(--wellness-dark);
    margin-bottom: 25px;
}
.wellness-title em {
    color: var(--wellness-primary);
    font-family: Georgia, serif;
    font-weight: 500;
}
.wellness-lead {
    max-width: 600px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--wellness-text);
}
/* DOCTOR HIGHLIGHT */
.doctor-highlight {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin-top: 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(21, 72, 77, 0.08);
}
.doctor-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(166, 207, 139, 0.25);
    color: var(--wellness-primary);
    font-size: 20px;
}
.doctor-highlight small,
.doctor-highlight strong {
    display: block;
}
.doctor-highlight small {
    color: #849395;
    margin-bottom: 3px;
}
.doctor-highlight strong {
    color: var(--wellness-dark);
}
/* HERO IMAGE */
.wellness-visual {
    position: relative;
    padding: 20px;
}
.wellness-image {
    position: relative;
    overflow: hidden;
    border-radius: 40px 40px 40px 100px;
    box-shadow: 0 30px 80px rgba(20, 75, 80, 0.18);
}
.wellness-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(11, 48, 52, 0.18)
    );
}
.wellness-image img {
    width: 100%;
    display: block;
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.wellness-image:hover img {
    transform: scale(1.04);
}
.floating-stat {
    position: absolute;
    left: -10px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(18, 66, 71, 0.16);
    z-index: 3;
}
.floating-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--wellness-primary);
    color: #fff;
    font-size: 21px;
}
.floating-stat strong,
.floating-stat span {
    display: block;
}
.floating-stat strong {
    color: var(--wellness-dark);
    font-size: 17px;
}
.floating-stat span {
    color: #829092;
    font-size: 12px;
}
.floating-round {
    position: absolute;
    top: -5px;
    right: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--wellness-secondary);
    color: var(--wellness-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 3;
}
/* SECTIONS */
.wellness-section {
    padding: 100px 0;
}
.soft-section {
    background: var(--wellness-light);
}
/* FEATURE CARDS */
.feature-card {
    height: 100%;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(22, 142, 156, 0.08);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(18, 72, 76, 0.1);
}
.feature-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(166, 207, 139, 0.12);
    right: -50px;
    bottom: -50px;
}
.active-card {
    background: var(--wellness-dark);
    color: #fff;
}
.active-card h3,
.active-card p {
    color: #fff;
}
.active-card p {
    opacity: 0.75;
}
.feature-number {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--wellness-primary);
    margin-bottom: 25px;
}
.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(22, 142, 156, 0.1);
    color: var(--wellness-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin-bottom: 25px;
}
.active-card .feature-icon {
    background: rgba(255, 255, 255, 0.12);
    color: var(--wellness-secondary);
}
.feature-card h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--wellness-dark);
    margin-bottom: 12px;
}
.feature-card p {
    color: var(--wellness-text);
    line-height: 1.8;
    margin-bottom: 0;
}
/* POSE COUNT */
.pose-count {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--wellness-light);
    border-radius: 50px;
}
.pose-count strong {
    font-size: 28px;
    color: var(--wellness-primary);
}
.pose-count span {
    color: var(--wellness-text);
    font-size: 13px;
}
/* POSE CARDS */
.pose-card {
    position: relative;
    padding: 24px;
    min-height: 155px;
    background: #fff;
    border: 1px solid #edf1ef;
    border-radius: 20px;
    transition: all 0.3s ease;
}
.pose-card:hover {
    border-color: rgba(22, 142, 156, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(21, 72, 77, 0.08);
}
.pose-index {
    position: absolute;
    top: 17px;
    right: 18px;
    font-size: 11px;
    color: #aab5b5;
    font-weight: 800;
}
.pose-icon {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: rgba(22, 142, 156, 0.08);
    color: var(--wellness-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.pose-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--wellness-dark);
    margin: 0;
}
/* HIGHLIGHT IMAGE */
.highlight-image {
    position: relative;
}
.highlight-image img {
    width: 100%;
    border-radius: 30px;
    display: block;
    box-shadow: 0 25px 60px rgba(20, 72, 77, 0.15);
}
.image-overlay-card {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.image-overlay-card > i {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: var(--wellness-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-overlay-card strong,
.image-overlay-card span {
    display: block;
}
.image-overlay-card strong {
    color: var(--wellness-dark);
}
.image-overlay-card span {
    color: #7e8c8e;
    font-size: 12px;
}
/* HIGHLIGHTS */
.highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 30px;
}
.highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #edf2ef;
    color: var(--wellness-dark);
    font-size: 13px;
    line-height: 1.4;
}
.highlight-item i {
    flex: 0 0 auto;
    color: var(--wellness-primary);
    font-size: 17px;
}
/* PROGRAMME */
.programme-section {
    background: #fff;
}
.programme-panel {
    position: relative;
    overflow: hidden;
    padding: 70px;
    border-radius: 40px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(166, 207, 139, 0.2),
            transparent 25%
        ),
        linear-gradient(135deg, #123c43, #195e64);
    color: #fff;
}
.programme-panel::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    right: -100px;
    bottom: -130px;
}
.programme-panel h2 {
    max-width: 650px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
}
.programme-lead {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}
.programme-list {
    margin-top: 35px;
}
.programme-list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}
.programme-list-item:last-child {
    border-bottom: 0;
}
.programme-list-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(166, 207, 139, 0.15);
    color: var(--wellness-secondary);
}
/* CONTACT CARD */
.contact-card {
    position: relative;
    z-index: 2;
    padding: 35px;
    background: #fff;
    border-radius: 25px;
    color: var(--wellness-dark);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}
.contact-card-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: rgba(22, 142, 156, 0.1);
    color: var(--wellness-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    margin-bottom: 22px;
}
.contact-card h3 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    margin: 10px 0 15px;
}
.contact-card p {
    color: var(--wellness-text);
    font-size: 14px;
    line-height: 1.8;
}
.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--wellness-dark);
    font-size: 14px;
    margin-top: 12px;
}
.contact-link i {
    color: var(--wellness-primary);
}
/* CTA */
.wellness-cta {
    padding: 40px 0 90px;
}
.cta-inner {
    padding: 55px 65px;
    border-radius: 30px;
    background: linear-gradient(
        135deg,
        rgba(22, 142, 156, 0.96),
        rgba(25, 96, 101, 0.96)
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    overflow: hidden;
}
.cta-inner::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    right: -70px;
    top: -100px;
}
.cta-inner h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}
.cta-inner p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}
/* RESPONSIVE */
@media (max-width: 991.98px) {
    .wellness-hero {
        padding: 60px 0 80px;
    }
    .wellness-title {
        font-size: clamp(48px, 10vw, 70px);
    }
    .wellness-visual {
        padding: 10px 20px 40px;
    }
    .wellness-section {
        padding: 75px 0;
    }
    .programme-panel {
        padding: 45px 35px;
    }
    .cta-inner {
        padding: 45px 35px;
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 575.98px) {
    .wellness-hero {
        padding: 45px 0 65px;
    }
    .wellness-title {
        font-size: 48px;
    }
    .wellness-lead {
        font-size: 15px;
    }
    .wellness-image {
        border-radius: 25px 25px 25px 65px;
    }
    .floating-stat {
        left: 0;
        bottom: 10px;
        padding: 10px 14px;
    }
    .floating-icon {
        width: 40px;
        height: 40px;
    }
    .floating-round {
        width: 55px;
        height: 55px;
        right: 5px;
    }
    .wellness-section {
        padding: 60px 0;
    }
    .highlight-grid {
        grid-template-columns: 1fr;
    }
    .programme-panel {
        padding: 35px 22px;
        border-radius: 25px;
    }
    .contact-card {
        padding: 25px;
    }
    .cta-inner {
        padding: 35px 25px;
        border-radius: 25px;
    }
}
.lab-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 100px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(166, 207, 139, 0.3),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(22, 142, 156, 0.12),
            transparent 30%
        ),
        linear-gradient(135deg, #f4fbf8 0%, #ffffff 55%, #eef8f3 100%);
}
.lab-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(22, 142, 156, 0.15);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    color: var(--lab-primary);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 25px;
}
.lab-title {
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.065em;
    font-weight: 800;
    color: var(--lab-dark);
    margin-bottom: 25px;
}
.lab-title em {
    color: var(--lab-primary);
    font-family: Georgia, serif;
    font-weight: 500;
}
.lab-lead {
    max-width: 600px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--lab-text);
}
/* =========================================================
   LAB TIMING
========================================================= */
.lab-timing {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 15px;
    box-shadow: 0 12px 35px rgba(21, 72, 77, 0.08);
}
.lab-timing-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(22, 142, 156, 0.09);
    color: var(--lab-primary);
}
.lab-timing small,
.lab-timing strong {
    display: block;
}
.lab-timing small {
    color: #849395;
    font-size: 11px;
}
.lab-timing strong {
    color: var(--lab-dark);
}
/* =========================================================
   HERO IMAGE
========================================================= */
.lab-visual {
    position: relative;
    padding: 20px;
}
.lab-image {
    overflow: hidden;
    border-radius: 40px 40px 40px 100px;
    box-shadow: 0 30px 80px rgba(20, 75, 80, 0.18);
}
.lab-image img {
    width: 100%;
    display: block;
    aspect-ratio: 1.25 / 1;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.lab-image:hover img {
    transform: scale(1.04);
}
.lab-badge {
    position: absolute;
    left: -5px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(18, 66, 71, 0.16);
}
.lab-badge-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--lab-primary);
    color: #fff;
    font-size: 21px;
}
.lab-badge strong,
.lab-badge small {
    display: block;
}
.lab-badge strong {
    color: var(--lab-dark);
    font-size: 15px;
}
.lab-badge small {
    color: #829092;
    font-size: 12px;
}
.lab-round {
    position: absolute;
    top: -5px;
    right: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--lab-secondary);
    color: var(--lab-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
/* =========================================================
   SECTIONS
========================================================= */
.lab-section {
    padding: 0 0 80px 0;
}
.soft-section {
    background: var(--lab-light);
}
/* =========================================================
   TEST COUNT
========================================================= */
.test-count {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #e7efec;
}
.test-count strong {
    font-size: 32px;
    color: var(--lab-primary);
}
.test-count span {
    color: #758789;
    font-size: 13px;
}
/* =========================================================
   TEST CARDS
========================================================= */
.test-card {
    position: relative;
    padding: 27px;
    min-height: 205px;
    background: #fff;
    border: 1px solid #edf1ef;
    border-radius: 22px;
    transition: all 0.3s ease;
}
.test-card:hover {
    transform: translateY(-6px);
    border-color: rgba(22, 142, 156, 0.25);
    box-shadow: 0 20px 45px rgba(21, 72, 77, 0.08);
}
.test-index {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #abb7b7;
    font-size: 11px;
    font-weight: 800;
}
.test-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(22, 142, 156, 0.08);
    color: var(--lab-primary);
    font-size: 20px;
    margin-bottom: 20px;
}
.test-card h3 {
    color: var(--lab-dark);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}
.test-card p {
    color: var(--lab-text);
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
}
/* =========================================================
   PACKAGE VISUAL
========================================================= */
.package-visual {
    position: relative;
    min-height: 420px;
    border-radius: 35px;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(166, 207, 139, 0.35),
            transparent 30%
        ),
        linear-gradient(145deg, #eef9f5, #dff1ed);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.package-main-icon {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--lab-primary);
    font-size: 70px;
    box-shadow: 0 25px 60px rgba(21, 72, 77, 0.12);
}
.package-number {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: var(--lab-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.package-number strong {
    font-size: 25px;
    line-height: 1;
}
.package-number span {
    font-size: 10px;
    opacity: 0.75;
    margin-top: 5px;
}
.package-floating {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    padding: 13px 17px;
    border-radius: 15px;
    box-shadow: 0 18px 40px rgba(21, 72, 77, 0.1);
    color: var(--lab-dark);
    font-size: 13px;
    font-weight: 700;
}
.package-floating i {
    color: var(--lab-primary);
}
.package-floating-one {
    left: 25px;
    bottom: 100px;
}
.package-floating-two {
    right: 25px;
    bottom: 35px;
}
/* =========================================================
   FEATURE LIST
========================================================= */
.lab-feature-list {
    margin-top: 30px;
}
.lab-feature {
    display: flex;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid #e8efed;
}
.lab-feature:last-child {
    border-bottom: 0;
}
.lab-feature-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(22, 142, 156, 0.08);
    color: var(--lab-primary);
}
.lab-feature strong,
.lab-feature span {
    display: block;
}
.lab-feature strong {
    color: var(--lab-dark);
    margin-bottom: 4px;
}
.lab-feature span {
    color: var(--lab-text);
    font-size: 13px;
    line-height: 1.65;
}
.package-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.package-contact a {
    color: var(--lab-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.package-contact i {
    margin-right: 5px;
}
/* =========================================================
   REQUIREMENT PANEL
========================================================= */
.requirement-panel {
    padding: 70px;
    border-radius: 40px;
    color: #fff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(166, 207, 139, 0.2),
            transparent 25%
        ),
        linear-gradient(135deg, #123c43, #195e64);
}
.requirement-panel h2 {
    max-width: 700px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
}
.requirement-lead {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}
.requirement-list {
    margin-top: 30px;
}
.requirement-item {
    display: flex;
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.requirement-item:last-child {
    border-bottom: 0;
}
.requirement-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(166, 207, 139, 0.15);
    color: var(--lab-secondary);
}
.requirement-item strong,
.requirement-item span {
    display: block;
}
.requirement-item strong {
    margin-bottom: 4px;
}
.requirement-item span {
    color: rgba(255, 255, 255, 0.63);
    font-size: 13px;
    line-height: 1.65;
}
/* =========================================================
   SIDE CARD
========================================================= */
.lab-side-card {
    background: #fff;
    color: var(--lab-dark);
    padding: 35px;
    border-radius: 25px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}
.lab-side-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(22, 142, 156, 0.1);
    color: var(--lab-primary);
    font-size: 22px;
    margin-bottom: 20px;
}
.lab-side-card h3 {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 15px;
}
.lab-side-card p {
    color: var(--lab-text);
    font-size: 14px;
    line-height: 1.8;
}
.side-contact {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--lab-dark);
    text-decoration: none;
    margin-top: 12px;
    font-size: 14px;
}
.side-contact i {
    color: var(--lab-primary);
}
/* =========================================================
   CONTACT
========================================================= */
.lab-contact {
    padding: 90px 0;
    color: #fff;
    background: linear-gradient(135deg, #123c43, #195e64);
}
.lab-contact h2 {
    font-size: clamp(35px, 5vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 20px;
}
.lab-contact p {
    max-width: 480px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
}
.lab-hours {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.hours-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(166, 207, 139, 0.15);
    color: var(--lab-secondary);
}
.lab-hours small,
.lab-hours strong {
    display: block;
}
.lab-hours small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}
.lab-hours strong {
    color: #fff;
}
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.contact-box {
    min-height: 150px;
    padding: 25px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.contact-box-icon {
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(166, 207, 139, 0.15);
    color: var(--lab-secondary);
}
.contact-box small {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.contact-box strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.7;
}
.contact-box a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 6px;
}
.contact-box a:hover {
    color: var(--lab-secondary);
}

/* 1. Modal background container (overlay) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
        0,
        0,
        0,
        0.75
    ); /* Dark semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it stays on top of all page content */

    /* Hidden by default, activated via JavaScript */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* Active class toggled by JS to show the modal */
.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 2. Modal Content Box */
.popup-content {
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-content {
    transform: scale(1);
}

/* Popup Image formatting */
.popup-content img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

/* 3. Close Button (X icon) */
.close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    color: #333333;
    border: 2px solid #ccc;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.close-btn:hover {
    background-color: #f0f0f0;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
    .lab-hero {
        padding: 60px 0 80px;
    }
    .lab-section {
        padding: 75px 0;
    }
    .lab-visual {
        padding: 10px 20px 40px;
    }
    .requirement-panel {
        padding: 45px 35px;
    }
}
@media (max-width: 575.98px) {
    .lab-hero {
        padding: 45px 0 65px;
    }
    .lab-title {
        font-size: 48px;
    }
    .lab-image {
        border-radius: 25px 25px 25px 65px;
    }
    .lab-badge {
        left: 0;
        bottom: 10px;
        padding: 10px 14px;
    }
    .lab-badge-icon {
        width: 40px;
        height: 40px;
    }
    .lab-round {
        width: 55px;
        height: 55px;
    }
    .lab-section {
        padding: 60px 0;
    }
    .package-visual {
        min-height: 350px;
    }
    .package-main-icon {
        width: 150px;
        height: 150px;
        font-size: 55px;
    }
    .package-floating {
        font-size: 11px;
        padding: 10px 12px;
    }
    .package-floating-one {
        left: 10px;
        bottom: 90px;
    }
    .package-floating-two {
        right: 10px;
        bottom: 25px;
    }
    .requirement-panel {
        padding: 35px 22px;
        border-radius: 25px;
    }
    .lab-side-card {
        padding: 25px;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-box {
        min-height: auto;
    }
}
@media (max-width: 1024px) {
    .departments-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .machines-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .hero-right {
        clip-path: none;
    }
    .bottom-bar {
        flex-direction: column;
        gap: 12px;
    }
}
@media (max-width: 600px) {
    .departments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .machines-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .features-list {
        flex-wrap: wrap;
    }
}