@media (max-width: 768px) {
            
            /* Show Hamburger */
            .hamburger {
                display: block;
            }

            /* Hamburger Animation to 'X' */
            .hamburger.active .bar:nth-child(2) { opacity: 0; }
            .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
            .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

            /* Mobile Menu Styles */
            .nav-menu {
                position: fixed;
                left: -100%; /* Hide off-screen to the left */
                top: 0;
                flex-direction: column;
                background-color: var(--white);
                width: 100%; /* Full Width */
                height: 100vh; /* Full Height */
                justify-content: center;
                text-align: center;
                transition: 0.3s;
                z-index: 100;
            }

            /* This class is added via JS to slide the menu in */
            .nav-menu.active {
                left: 0;
            }

            /* Change links layout for mobile */
            .nav-links {
                flex-direction: column;
                margin-bottom: 40px;
                gap: 30px;
            }

            .nav-links a {
                font-size: 1.2rem;
            }
            
        }
@media (max-width: 1200px) {
    .hero {
        grid-template-columns: 1fr; /* Switch to 1 column */
        text-align: center;
        padding: 50px 0;
        gap: 50px;
    }

    .hero-content h1 {
        font-size: 2.8rem; /* Slightly smaller font */
    }

    .hero-content p {
        margin: 0 auto 30px auto; /* Center the paragraph */
        max-width: 80%;
    }

    .hero-btns {
        justify-content: center; /* Center the buttons */
    }

    /* Constrain image width so it doesn't look too huge on laptops */
    .hero-image-container {
        max-width: 700px;
        margin: 0 auto;
    }

    /* Adjust dot pattern to fit the centered image */
    .hero-image-container::before {
        right: -20px;
        top: -20px;
        width: 100%;
    }
}

        @media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr; /* Switch to 1 column */
        text-align: center; /* Center align text for mobile */
        padding: 40px 0;
        gap: 40px;
    }

    .hero-content h1 {
        font-size: 2.2rem; /* Smaller font for mobile */
    }

    .hero-content p {
        margin: 0 auto 30px auto; /* Center paragraph */
        max-width: 100%;
    }

    .hero-btns {
        justify-content: center; /* Center buttons */
    }

    /* Adjust the dot pattern so it doesn't cause horizontal scrolling */
    .hero-image-container::before {
        right: -10px;
        top: -10px;
        width: 100%;
    }
}

/* --- RESPONSIVE STYLES (Triggers on screens smaller than 1200px) --- */
@media (max-width: 1200px) {

    /* 1. NAVBAR - Switch to Hamburger */
    .hamburger {
        display: block; /* Show the icon */
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        height: 100vh;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: 0.3s;
        z-index: 100;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }

    .nav-menu.active {
        left: 0; /* Slide in */
    }

    .nav-links {
        flex-direction: column;
        margin-bottom: 30px;
        gap: 30px;
    }

    .nav-links a {
        font-size: 1.2rem; /* Larger text for touch screens */
    }

    /* 2. HERO SECTION - Stack Vertically */
    .hero {
        grid-template-columns: 1fr; /* 1 Column */
        text-align: center;
        padding-top: 40px;
        gap: 50px;
    }

    .hero-content h1 {
        font-size: 2.8rem; /* Slightly smaller than desktop, bigger than phone */
        margin-bottom: 20px;
    }

    .hero-content p {
        margin: 0 auto 30px auto;
        max-width: 80%; /* Prevent lines from being too wide to read */
    }

    .hero-btns {
        justify-content: center;
    }

    /* Adjust the dot pattern behind the image */
    .hero-image-container::before {
        right: -15px;
        top: -15px;
        width: 95%;
    }
}


@media (max-width: 1024px) {
    .doctor-grid {
        grid-template-columns: 1fr; /* Stack Layout */
        gap: 60px;
        text-align: center; /* Center text */
    }

    .doctor-img-wrapper {
        max-width: 500px;
        margin: 0 auto; /* Center image */
        margin-right: auto; /* Remove the desktop margin */
    }

    /* Move text content to center alignment */
    .credentials {
        text-align: left; /* Keep icons left aligned for readability */
        max-width: 500px;
        margin: 0 auto 40px auto;
    }

    .doctor-signature {
        display:block;
    }
}

/* Mobile Phones (Adjust spacing and overflow) */
@media (max-width: 768px) {
    .meet-doctor {
        padding: 60px 0;
    }

    .doctor-content h2 {
        font-size: 2rem;
    }

    /* Fix the Experience Badge on Mobile */
    .exp-badge {
        right: 0; /* Align to edge, don't hang out */
        bottom: 15px;
        padding: 15px;
        min-width: auto;
    }
    
    .exp-number { font-size: 1.8rem; }
    .exp-text { font-size: 0.8rem; }

    /* Fix background box overflow */
    .doctor-img-wrapper::before {
        left: -10px;
        bottom: -10px;
    }

    /* Stack credentials on very small screens */
    .credentials {
        grid-template-columns: 1fr;
    }
}

/* Tablet Layout (992px and below) */
@media (max-width: 992px) {
    .footer-grid {
        /* Switch from 4 columns to a 2x2 grid */
        grid-template-columns: 1fr 1fr; 
        gap: 50px;
    }
}

/* Mobile Layout (600px and below) */
@media (max-width: 600px) {
    .footer-grid {
        /* Switch to 1 column */
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    /* Center the max-width text */
    .footer-text { margin: 0 auto 20px auto; }

    /* Align contact icons to center in stacked mode */
    .footer-contact li {
        justify-content: center;
    }

    /* Stack the bottom bar (Copyright on top, Socials on bottom) */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}