/* --- Independent Bone Marrow Section Layout --- */
.bma-section {
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #f8fafd;
    box-sizing: border-box;
}

.bma-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    flex-wrap: wrap; /* Auto Responsive wrap */
    box-sizing: border-box;
}

/* Individual Cards Base Rules */
.bma-card {
    flex: 1;
    min-width: 300px;
    padding: 40px 30px;
    border-radius: 12px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.bma-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(11, 67, 117, 0.15);
}

/* Exact Image Colors Matching */
.bma-sky { background: linear-gradient(135deg, #2b96ea 0%, #1979ca 100%); }
.bma-navy { background: linear-gradient(135deg, #0b4375 0%, #062b4d 100%); }
.bma-blue { background: linear-gradient(135deg, #3aa1f5 0%, #2284d6 100%); }

/* Icons Box layout */
.bma-icon-box {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.bma-icon-box svg {
    width: 100%;
    height: 100%;
    color: #ffffff;
}

.bma-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 15px 0;
    font-family: 'Poppins', sans-serif;
}

.bma-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 30px 0;
    font-family: 'Poppins', sans-serif;
}

/* Card Bottom Footer Trigger Layout */
.bma-footer-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* --- Modals Engine CSS (Overlays & Structure) --- */
.bma-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 99999; /* Ensure it stays on top of header/slider */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Active Class */
.bma-modal-overlay.bma-modal-active {
    opacity: 1;
    visibility: visible;
}

.bma-modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 850px;
    height: 75vh;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

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

.bma-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 15px 0;
    font-family: 'Poppins', sans-serif;
}

/* Close Circular Button */
.bma-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: #888888;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f2f5;
    transition: background-color 0.2s, color 0.2s;
}

.bma-close-btn:hover {
    background-color: #ff3b30;
    color: #ffffff;
}

/* Internal Responsive Frame */
.bma-frame {
    width: 100%;
    flex: 1;
    border: none;
    border-radius: 6px;
    background-color: #fcfcfc;
}

/* --- Responsive Controls --- */
@media (max-width: 992px) {
    .bma-card { min-width: 45%; }
}

@media (max-width: 768px) {
    .bma-container { gap: 20px; }
    .bma-card { min-width: 100%; flex: 1 1 100%; }
    .bma-modal-content { height: 80vh; padding: 15px; }
}

        /* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Top Bar Styles --- */
.top-bar {
    background-color: #003366; /* Deep blue from image */
    color: #ffffff;
    font-size: 13px;
    padding: 10px 0;
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left a {
    margin-right: 20px;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.top-left i {
    margin-right: 5px;
    color: #3399ff; /* Light blue accent */
}

.top-right a {
    margin-left: 15px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.top-left a:hover, .top-right a:hover {
    opacity: 1;
}

/* --- Main Navigation Styles --- */
.main-nav {
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* Logo */
.logo a {
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 700;
    color: #003366;
}

.plus-icon {
    color: #3399ff;
    margin-right: 8px;
    font-size: 28px;
}

/* Navigation Links */
.nav-links {
    display: flex;
    align-items: center;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    padding: 30px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

.nav-links a i {
    font-size: 10px;
    margin-left: 5px;
}

.nav-links a:hover, .nav-links a.active {
    color: #3399ff;
}

/* Badge (New) */
.badge {
    background-color: #003366;
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    text-transform: uppercase;
}

/* Nav Actions (Right Side) */
.nav-actions {
    display: flex;
    align-items: center;
}

.action-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    margin-right: 20px;
    position: relative;
}

.cart-btn {
    display: flex;
    align-items: center;
}

.cart-count {
    background-color: #3399ff;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    position: absolute;
    top: -10px;
    right: -12px;
}

/* Appointment Button */
.appointment-btn {
    background-color: #3399ff;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.appointment-btn:hover {
    background-color: #003366;
}

/* Responsive Hamburger Menu (Hidden by default) */
.menu-toggle, .hamburger {
    display: none;
}

/* --- Media Queries (Responsiveness) --- */

@media (max-width: 992px) {
    /* For Tablets and smaller desktops */
    .nav-links a {
        padding: 30px 10px;
        font-size: 13px;
    }
    .appointment-btn {
        padding: 10px 16px;
    }
}


@media (max-width: 768px) {
    /* For Mobile Devices */
    .top-bar {
         /* Mobile par top-bar hide kar di */
    }

    .nav-container {
        height: 70px;
    }

    /* Hamburger icon visibility */
    .hamburger {
        display: block;
        cursor: pointer;
        order: 2;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 5px 0;
        transition: 0.3s;
    }

    /* Moving actions before hamburger */
    .nav-actions {
        order: 1;
        margin-left: auto;
        margin-right: 20px;
    }

    .appointment-btn {
        display: none; /* Mobile screen par spaces bachane ke liye main button hide */
    }

    /* Mobile Menu Drawer */
    .nav-links {
        position: absolute;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        transition: 0.4s ease-in-out;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 20px;
        overflow-y: auto;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid #eeeeee;
    }

    .nav-links a {
        padding: 15px 0;
        width: 100%;
        justify-content: space-between;
    }

    /* Menu Toggle Mechanism without JS */
    .menu-toggle:checked ~ .nav-links {
        left: 0;
    }

    .menu-toggle:checked ~ .hamburger span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .menu-toggle:checked ~ .hamburger span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle:checked ~ .hamburger span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}
/* Video ko modal box ke andar perfectly fit rakhne ke liye */
.bma-video-element {
    width: 100%;
    height: calc(100% - 40px); /* Title ki wajah se jo bachi hui height hai, usme fit rahega */
    max-height: 100%;
    border-radius: 8px;
    background-color: #000000; /* Jab tak video na chale, piche black premium look aaye */
    object-fit: contain; /* Video ka aspect ratio kharab nahi hoga aur boundaries me rahega */
    display: block;
}

/* Google Fonts Import for clean modern medical look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Premium Centered Text Typography Style --- */
.bma-centered-header {
    max-width: 850px;
    width: 100%;
    margin: 40px auto;
    text-align: center; /* Poore content ko completely center align karega */
    font-family: 'Inter', sans-serif;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Micro Tag / Badge Style */
.bma-mini-tag {
    display: inline-block;
    background-color: #e6f2fe; /* Light clean medical blue background */
    color: #0b4375; /* Rich professional dark navy text */
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px; /* Perfect pill shape */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border: 1px solid rgba(11, 67, 117, 0.08);
}

/* Main Heading Style (H1) */
.bma-main-title {
    font-size: 36px;
    font-weight: 700;
    color: #0b4375; /* Deep Navy Blue */
    margin: 0 0 16px 0;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

/* Sub-Heading Style (H2) */
.bma-sub-title {
    font-size: 16px;
    font-weight: 400;
    color: #55647e; /* Premium slate gray for readable contrast */
    max-width: 720px;
    margin: 0 auto; /* Subheading width ko center me constant rakhne ke liye */
    line-height: 1.6;
}

/* Elegant Center Underline Divider Line */
.bma-underline-divider {
    width: 60px;
    height: 4px;
    background-color: #2b96ea; /* Vibrant medical blue accent horizontal bar */
    border-radius: 2px;
    margin: 25px auto 0 auto; /* Center alignment matrix */
}

/* --- Smooth Responsive Scaling for Mobile Devices --- */
@media (max-width: 768px) {
    .bma-centered-header {
        margin: 30px auto;
    }
    .bma-main-title {
        font-size: 26px; /* Choti screens par font-size automatic compress hoga */
        margin-bottom: 12px;
    }
    .bma-sub-title {
        font-size: 14px;
        line-height: 1.5;
    }
    .bma-mini-tag {
        font-size: 10px;
        padding: 5px 12px;
        margin-bottom: 16px;
    }
    .bma-underline-divider {
        margin-top: 20px;
        width: 45px;
    }
}

/* --- Exact Match Appointment Section --- */
.exact-appointment-section {
    width: 100%;
    max-width: 1140px;
    background: #2b96f3; /* Exact UI Blue */
    border-radius: 4px;
    position: relative;
    margin: 80px auto 40px auto; /* Image overflow ke liye top margin di hai */
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.exact-appointment-section * {
    box-sizing: border-box;
}

/* Flex Container Layout */
.exact-container {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Left Image Section (Matches Screenshot Overflow) */
.exact-image-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-left: 20px;
}

.exact-image-box img {
    max-width: 115%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-top: -65px; /* Doctor ki image ko blue block se upar nikalne ke liye */
    z-index: 5;
}

/* Right Content Box */
.exact-form-box {
    flex: 2;
    padding: 55px 60px 65px 40px;
    color: #ffffff;
}

/* Small Badge Above Title */
.exact-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 18px;
}

/* Main Heading */
.exact-title {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 35px;
    letter-spacing: 0.3px;
    color: #ffffff;
    line-height: 1.2;
}

/* 2-Column Form Layout */
.exact-appointment-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Translucent Inputs (Screenshot ke mutabik translucent white) */
.exact-input-group input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Placeholder Styling */
.exact-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

/* Input Focus Glow */
.exact-input-group input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Full Width Button wrapper */
.exact-btn-group {
    grid-column: span 2;
    margin-top: 10px;
}

/* Exact White Rectangular Button */
.exact-submit-btn {
    background: #ffffff;
    color: #2b96f3; /* Matching text color inside button */
    border: none;
    padding: 15px 35px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.exact-submit-btn:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
}

/* --- Responsive Layout (Mobile Friendly) --- */
@media (max-width: 992px) {
    .exact-title {
        font-size: 32px;
    }
    .exact-image-box img {
        margin-top: -45px;
        max-width: 120%;
    }
}

@media (max-width: 768px) {
    .exact-appointment-section {
        margin: 40px 15px;
    }
    .exact-container {
        flex-direction: column; /* Mobile par stack ho jayega */
    }
    .exact-image-box {
        padding: 0;
        margin-top: 0;
    }
    .exact-image-box img {
        max-width: 260px; /* Mobile par clean auto sizing */
        margin-top: -30px; 
    }
    .exact-form-box {
        padding: 40px 20px;
    }
    .exact-appointment-form {
        grid-template-columns: 1fr; /* Inputs ek ke neeche ek aayenge */
    }
    .exact-btn-group {
        grid-column: span 1;
    }
}
/* --- Medicate Footer Stylesheet --- */
.med-footer-section {
    width: 100%;
    background-color: #0b427b;
    position: relative;
    padding-top: 0px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-align: left;
}
.logo img{
    width: 23%;
}

.med-footer-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- 1. Newsletter Floating Banner --- */
.med-newsletter-banner {
    width: 90%;
    max-width: 1140px;
    background-color: #2b96f3; /* Exact Light Blue */
    border-radius: 4px;
    position: absolute;
    top: -65px; /* Half up, half down overlay effect */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 50px;
    z-index: 10;
}

.med-news-left {
    display: flex;
    align-items: center;
    gap: 25px;
    color: #ffffff;
}

.med-news-icon i {
    font-size: 45px;
    font-weight: 300;
}

.med-news-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.med-news-right {
    flex: 1;
    max-width: 600px;
    margin-left: 40px;
}

.med-news-form {
    display: flex;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 6px;
}

.med-news-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 20px;
    color: #ffffff;
    font-size: 14px;
}

.med-news-form input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.med-news-form button {
    background: #ffffff;
    color: #252525;
    border: none;
    font-weight: 600;
    font-size: 13px;
    width: 30%;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.3s;
}

.med-news-form button:hover {
    background: #f1f1f1;
}

/* --- 2. Main Footer Layout --- */
.med-footer-container {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.med-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.3fr 1.1fr 1.1fr;
    gap: 40px;
}

/* Column Common Titles */
.med-col-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

/* Title underline effect matching original UI */
.med-col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #2b96f3;
}

/* Column 1 Specifics */
.med-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 25px;
}

.med-footer-logo i {
    color: #2b96f3;
    font-size: 32px;
}

.med-about-text {
    color: #b0c4de;
    font-size: 12px;
    text-align: left;
    line-height: 1.7;
    margin-bottom: 30px;
}
.med-about-text span{ 
font-size: 10px;
}
.med-social-icons {
    display: flex;
    gap: 10px;
}

.med-social-icons a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.med-social-icons a:hover {
    background: #2b96f3;
}

/* Column 2 Specifics (Links Grid) */
.med-links-grid {
    display: flex;
    width: 147%;
    gap: 2px;
}

.med-links-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.med-links-col a {
    color: #b0c4de;
    text-decoration: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transition: color 0.3s;
}

.med-links-col a i {
    font-size: 10px;
    color: #2b96f3;
}

.med-links-col a:hover {
    color: #ffffff;
}

/* Column 3 Specifics (Recent Posts) */
.med-post-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.med-post-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.med-post-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.med-post-date {
    color: #2b96f3;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.med-post-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.3s;
}

.med-post-link:hover {
    color: #2b96f3;
}

/* Column 4 Specifics (Contact Info) */
.med-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.med-contact-list li {
    display: flex;
    gap: 15px;
    color: #b0c4de;
    font-size: 14px;
    line-height: 1.5;
    align-items: flex-start;
}

.med-contact-list li i {
    color: #2b96f3;
    font-size: 16px;
    margin-top: 3px;
}

/* --- 3. Bottom Copyright Bar --- */
.med-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 0;
    text-align: center;
}

.med-footer-bottom p {
    color: #b0c4de;
    font-size: 14px;
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {
    .med-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
    .med-newsletter-banner {
        flex-direction: column;
        gap: 25px;
        text-align: center;
        top: -100px;
    }
    .med-news-left {
        flex-direction: column;
        gap: 10px;
    }
    .med-news-right {
        margin-left: 0;
        width: 100%;
    }
    .med-footer-section {
        padding-top: 180px;
    }
}

@media (max-width: 768px) {
    .med-newsletter-banner {
        padding: 30px 20px;
    }
    .med-news-text {
        font-size: 18px;
    }
    .med-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .med-links-grid {
        flex-direction: column;
        gap: 15px;
    }
}


/* --- Medicate Services Section Styles --- */
.med-services-section {
    width: 100%;
    background-color: #ffffff;
    padding: 80px 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.med-services-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Container */
.med-services-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Styling */
.med-services-header {
    text-align: center;
    margin-bottom: 50px;
}

.med-services-badge {
    background-color: #e3f2fd;
    color: #2b96f3;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    letter-spacing: 1px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.med-services-main-title {
    color: #1e293b;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Exact Subtle Grid Borders Style */
.med-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Pure border look jo screenshot me horizontal aur vertical bars banata hai */
    border-top: 1px solid #f1f5f9;
    border-left: 1px solid #f1f5f9;
}

/* Individual Service Cards */
.med-service-card {
    text-align: center;
    padding: 50px 30px;
    background: #ffffff;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- ANIMATION / HOVER EFFECTS --- */

/* Card Border & Shadow Popup on Hover */
.med-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
}

.med-service-card:hover {
    transform: translateY(-5px);
    z-index: 2;
    border-color: transparent; /* Smooth popup */
}

.med-service-card:hover::before {
    opacity: 1;
}

/* Icon Animation */
.med-service-icon {
    font-size: 40px;
    color: #2b96f3; /* Exact Blue Line Art Icons */
    margin-bottom: 25px;
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease;
}

.med-service-card:hover .med-service-icon {
    transform: scale(1.1) translateY(-3px);
}

/* Service Title */
.med-service-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    position: relative;
    z-index: 3;
}

/* Description Text */
.med-service-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 240px;
    position: relative;
    z-index: 3;
}

/* Read More Link Styling & Animation */
.med-service-link {
    font-size: 12px;
    font-weight: 600;
    color: #2b96f3;
    text-decoration: none;
    letter-spacing: 0.5px;
    display: inline-block;
    position: relative;
    z-index: 3;
    transition: color 0.3s ease;
}

.med-service-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1.5px;
    bottom: -4px;
    left: 0;
    background-color: #2b96f3;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.med-service-card:hover .med-service-link {
    color: #1a85e2;
}

.med-service-card:hover .med-service-link::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* --- Responsive Media Queries --- */

@media (max-width: 1024px) {
    .med-services-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablets par 2 column ho jayega */
    }
    .med-services-main-title {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .med-services-grid {
        grid-template-columns: 1fr; /* Mobile screens par pure single row flow */
    }
    .med-service-card {
        padding: 40px 20px;
    }
    .med-services-main-title {
        font-size: 26px;
    }
    
}

/* --- Compact Medical Slider Styles --- */
.med-compact-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 340px; /* Reduced Height (~40% shorter than previous 520px) */
    margin: 20px auto;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(148, 163, 184, 0.08);
    font-family: 'Poppins', sans-serif;
}

.med-compact-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Hide Radios */
.med-compact-wrapper input[type="radio"] {
    display: none;
}

/* Tracks */
.med-compact-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Slide Item Layout */
.med-compact-item {
    width: 33.3333%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    background: radial-gradient(circle at 85% 20%, #f4f9ff 0%, #ffffff 55%);
}

/* Content Area */
.med-compact-content {
    max-width: 500px;
    z-index: 5;
}

.med-compact-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 8px;
    display: inline-block;
}

.med-compact-title {
    font-size: 32px; /* Smaller font for sleek profile */
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 12px;
}

.med-compact-title .text-blue {
    color: #2b96f3;
}

.med-compact-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Sleek Button */
.med-compact-btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: #2b96f3;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(43, 150, 243, 0.25);
    transition: all 0.3s ease;
}

.med-compact-btn:hover {
    background-color: #1a85e2;
    transform: translateY(-1px);
}

/* Right Side Image Block */
.med-compact-img {
    width: 38%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.med-compact-img img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* --- Slider Core Logic --- */
#cs-1:checked ~ .med-compact-track { transform: translateX(0%); }
#cs-2:checked ~ .med-compact-track { transform: translateX(-33.3333%); }
#cs-3:checked ~ .med-compact-track { transform: translateX(-66.6666%); }

/* --- Arrows --- */
.med-arrow-set { display: none; }
#cs-1:checked ~ .med-compact-arrows .s-1,
#cs-2:checked ~ .med-compact-arrows .s-2,
#cs-3:checked ~ .med-compact-arrows .s-3 { display: block; }

.c-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: all 0.3s;
}
.c-arrow.prev { left: 15px; }
.c-arrow.next { right: 15px; }
.c-arrow:hover { background: #2b96f3; color: #ffffff; border-color: #2b96f3; }

/* --- Dots Nav --- */
.med-compact-dots {
    position: absolute;
    bottom: 20px;
    left: 60px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.c-dot {
    width: 10px;
    height: 10px;
    background: #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

#cs-1:checked ~ .med-compact-dots .c-dot:nth-child(1),
#cs-2:checked ~ .med-compact-dots .c-dot:nth-child(2),
#cs-3:checked ~ .med-compact-dots .c-dot:nth-child(3) {
    background: #2b96f3;
    width: 24px;
    border-radius: 10px;
}

/* --- Responsive Layout --- */
@media (max-width: 768px) {
    .med-compact-wrapper { height: auto; min-height: 480px; }
    .med-compact-item {
        flex-direction: column-reverse;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
    }
    .med-compact-img { width: 100%; height: 160px; margin-bottom: 15px; }
    .med-compact-title { font-size: 26px; }
    .med-compact-dots { left: 50%; transform: translateX(-50%); bottom: 15px; }
}
/* --- Sahi Kiya Hua CSS Sliding Logic --- */

/* Track must be 100% * slides count */
.med-compact-track {
    display: flex;
    width: 400%; /* Sahi calculated total width (100% * 4) */
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Individual item must be total_width / slides count */
.med-compact-item {
    width: 25%; /* Sahi width per slide (100% total / 4 slides) */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    background: radial-gradient(circle at 85% 20%, #f4f9ff 0%, #ffffff 55%);
}

/* Sliding Core Logic positioning (Correct Multiples) */
#cs-1:checked ~ .med-compact-track { transform: translateX(0%); }
#cs-2:checked ~ .med-compact-track { transform: translateX(-25%); }
#cs-3:checked ~ .med-compact-track { transform: translateX(-50%); }
#cs-4:checked ~ .med-compact-track { transform: translateX(-75%); }

/* Arrow View rules (Correct connection) */
#cs-1:checked ~ .med-compact-arrows .s-1,
#cs-2:checked ~ .med-compact-arrows .s-2,
#cs-3:checked ~ .med-compact-arrows .s-3,
#cs-4:checked ~ .med-compact-arrows .s-4 { display: block; }

/* Dot Highlight rules (Correct indexing) */
#cs-1:checked ~ .med-compact-dots .c-dot:nth-child(1),
#cs-2:checked ~ .med-compact-dots .c-dot:nth-child(2),
#cs-3:checked ~ .med-compact-dots .c-dot:nth-child(3),
#cs-4:checked ~ .med-compact-dots .c-dot:nth-child(4) { 
    background: #2b96f3;
    width: 24px;
    border-radius: 10px;
}


/* --- Global Section Container --- */
.bm-section-container {
    width: 100%;
    padding: 60px 20px;
    background-color: #fafbfc; /* Modern Light Backdrop */
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* Pura section content horizontal center align rahega */
}

.bm-section-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- Heading Block Styles --- */
.bm-section-header {
    text-align: center;
    margin-bottom: 35px;
    max-width: 600px;
}

.bm-section-badge {
    background-color: #e3f2fd;
    color: #2b96f3;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

.bm-section-main-title {
    font-size: 32px;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.bm-section-subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* --- Compact Dropdown Card Styles --- */
.sm-dropdown-card {
    width: 100%;
    margin-top: -1.5%;
    max-width: 650px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(148, 163, 184, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Interactive Dropdown Header */
.sm-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    cursor: pointer;
    background: #ffffff;
    user-select: none;
}

.sm-main-title {
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    transition: color 0.3s ease;
}

/* Minimal Arrow Icon */
.sm-toggle-arrow {
    font-size: 11px;
    color: #94a3b8;
    transform: rotate(90deg); /* Faces down initially */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
}

/* Hide Checkbox */
.sm-checkbox-input {
    display: none;
}

/* --- Dropdown Content Area --- */
.sm-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); /* Smooth performance code */
    background: #ffffff;
}

.sm-content-inner {
    padding: 0 25px 25px 25px;
}

.sm-content-inner p {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.65;
    text-align: justify;
}

.sm-content-inner p:not(:last-child) {
    margin-bottom: 15px;
}

/* --- CSS Checked State Logic --- */

.sm-checkbox-input:checked ~ .sm-dropdown-header .sm-main-title {
    color: #2b96f3; /* Open hone par title blue hoga */
    font-weight: 600;
}

.sm-checkbox-input:checked ~ .sm-dropdown-content {
    max-height: 1000px; /* Reveals content area smoothly */
}

.sm-checkbox-input:checked ~ .sm-dropdown-header .sm-toggle-arrow {
    transform: rotate(-90deg); /* Arrow rotates up smoothly */
    color: #2b96f3;
}

/* --- Responsive Media Queries --- */
@media (max-width: 768px) {
    .bm-section-main-title {
        font-size: 26px;
    }
    .bm-section-container {
        padding: 40px 15px;
    }
}

@media (max-width: 480px) {
    .sm-dropdown-header { padding: 15px 20px; }
    .sm-main-title { font-size: 14px; }
    .sm-content-inner { padding: 0 20px 20px 20px; }
    .sm-content-inner p { font-size: 12.5px; }
}























.meta-info {
            font-size: 14px;
            color: #666;
            font-style: italic;
        }

        .notice-bar {
            background-color: var(--accent-color);
            border-left: 5px solid var(--secondary-color);
            padding: 15px;
            margin-bottom: 30px;
            font-size: 15px;
        }

        h2 {
            color: var(--secondary-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 5px;
            margin-top: 40px;
        }

        /* Manual Section Styling */
        .manual-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f1f1f1;
            padding: 15px 20px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }

        /* Grid Layout for Media Lists */
        .resource-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }

        .card {
            border: 1px solid var(--border-color);
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .card-content {
            padding: 15px;
        }

        .card-number {
            font-size: 12px;
            text-transform: uppercase;
            color: #888;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .card-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--primary-color);
            margin: 0 0 10px 0;
        }

        /* Standardized Buttons */
        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 10px 15px;
            text-decoration: none;
            border-radius: 4px;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: var(--secondary-color);
        }

        .btn-block {
            display: block;
            margin: 10px;
        }

        .video-placeholder {
            background: #000;
            color: #fff;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        footer {
            margin-top: 50px;
            text-align: center;
            font-size: 13px;
            color: #777;
            border-top: 1px solid var(--border-color);
            padding-top: 15px;
        }
         :root {
            --primary-color: #003366; /* AIIMS Deep Navy */
            --secondary-color: #006699; /* Medical Blue */
            --accent-color: #e6f2ff; /* Light Blue Background Tint */
            --text-color: #333333;
            --border-color: #cccccc;
        }

/* Modal overlay styling */
.vid-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.85); /* Premium Dark Overlay */
    backdrop-filter: blur(5px);
    z-index: 99999; /* Stays on top of everything */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Toggle Class via JavaScript */
.vid-modal.active {
    display: flex;
    opacity: 1;
}

/* Modal Inside Content Framework Box */
.vid-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    background: #000000;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vid-modal.active .vid-modal-content {
    transform: scale(1);
}

/* Close Button Icon style */
.vid-modal-close {
    position: absolute;
    top: -45px;
    right: 0;
    color: #ffffff;
    font-size: 36px;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.vid-modal-close:hover {
    color: #2b96f3; /* Changes to medical blue on hover */
}

/* 16:9 Aspect Ratio Auto Scaler Container */
.vid-video-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Golden Ratio formula for video boxes */
    background: #000000;
    border-radius: 8px;
}

.vid-video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

@media (max-width: 480px) {
    .vid-modal-close {
        right: 10px;
        top: -40px;
    }
}
/* --- Video Popup Modal Styles (Size Control Fixed) --- */
.vid-modal {
    display: none; /* Initial State Hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.85); /* Premium Dark Overlay */
    backdrop-filter: blur(5px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vid-modal.active {
    display: flex;
    opacity: 1;
}

/* ⬇️ ISKA SIZE CHOTA KAR DIYA HAI TAAKI VIDEO BOHOT BADI NA DIKHE ⬇️ */
.vid-modal-content {
    position: relative;
    width: 90%;
    max-width: 550px; /* 800px se kam karke 550px kiya (Sleek Compact Size) */
    background: #000000;
    border-radius: 12px; /* Smoother modern corners */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle premium inner border */
}

.vid-modal.active .vid-modal-content {
    transform: scale(1);
}

/* Close Button Icon Layout */
.vid-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #ffffff;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.vid-modal-close:hover {
    color: #2b96f3;
}

/* 16:9 Aspect Ratio Container Box */
.vid-video-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Auto dimensions scaler calculation formula */
    background: #000000;
    border-radius: 12px;
}

/* HTML5 Video Element Fit Rules */
.vid-video-box video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: contain; /* Video frames balance stretch protection scaling */
}

/* Mobile responsive screen optimizer rules */
@media (max-width: 580px) {
    .vid-modal-content {
        width: 95%; /* Mobile par fully adaptive block frame border width layout */
    }
    .vid-modal-close {
        right: 5px;
        top: -35px;
        font-size: 28px;
    }
}


/* --- PPT Popup Modal Styles --- */
.ppt-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ppt-modal.active {
    display: flex;
    opacity: 1;
}

.ppt-modal-content {
    position: relative;
    width: 95%;
    max-width: 1000px; /* Badi screen ke liye perfect size */
    height: 80vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.ppt-modal.active .ppt-modal-content {
    transform: translateY(0);
}

.ppt-modal-close {
    position: absolute;
    top: -45px;
    right: 0;
    color: #ffffff;
    font-size: 36px;
    cursor: pointer;
}

.ppt-viewer-box {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.ppt-viewer-box iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .ppt-modal-content {
        height: 60vh;
    }
}

/* Base Modal Setup (Hidden by default) */
.css-ppt-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

/* ⚡ MAGIC LOGIC: CSS :target jab trigger hoga toh popup khul jayega */
.css-ppt-modal:target {
    display: flex;
}

/* Inside Card Content Shape */
.css-ppt-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 75vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.css-ppt-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Close Button (Href="#" dabate hi target hat jayega aur close ho jayega) */
.css-ppt-close {
    position: fixed; /* Fixed taaki top bar par hamesha sahi dikhe */
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 45px;
    text-decoration: none;
    font-weight: 300;
    z-index: 1000000;
    transition: color 0.2s;
}

.css-ppt-close:hover {
    color: #2b96f3;
}

@media (max-width: 768px) {
    .css-ppt-content {
        height: 55vh;
        width: 95%;
    }
    .css-ppt-close {
        top: 15px;
        right: 20px;
        font-size: 35px;
    }
}

.med-footer-logo img{
    width: 35%;
}

@media (max-width: 280px){
.med-links-grid {
    width: 100%;}

}
@media (max-width: 380px){
.med-links-grid {
    width: 100%;}
}

/* मोबाइल के लिए रिस्पॉन्सिव कोड */
@media only screen and (max-width: 767px) {
  .top-bar {
    display: block !important;
    text-align: center;
    padding: 10px 0;
  }

  .top-bar-container {
    display: flex;
    flex-direction: column; /* कंटेंट को ऊपर-नीचे करने के लिए */
    gap: 10px;
  }

  .top-left, .top-right {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* अगर स्क्रीन बहुत छोटी हो तो लिंक नीचे आ जाएं */
    gap: 15px;
  }

  .top-left a {
    font-size: 13px; /* मोबाइल पर फोंट साइज छोटा करें */
  }
}