/* =====================================
   RESPONSIVE STYLES
===================================== */

/* ===== Tablet (1024px) ===== */
@media (max-width: 1024px) {

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ===== Mobile (768px) ===== */
@media (max-width: 768px) {

    /* Header Layout */
    .header-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    /* Logo / Branding */
    .branding {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logo-area img {
        height: 55px;
    }

    /* Top Bar */
    .top-inner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    /* Right Section */
    .header-right {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 15px;
    }

    /* Navigation Vertical */
    .nav-menu {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 30px;
    }

    /* Equal Button Width */
    .nav-menu a {
        width: 85%;
        text-align: center;
        padding: 10px 10px;
        font-size: 16px;
        border-radius: 8px;
    }

    /* Book Consultation Button */
    .header-btn {
        width: 88%;
        text-align: center;
        padding: 12px 0;
        font-size: 16px;
        border-radius: 8px;
    }

}


/* ===== Small Mobile (600px) ===== */
@media (max-width: 600px) {

    .services-grid {
        grid-template-columns: 1fr;
    }

}


/* ===== Force Top Bar on Home ===== */
.home .top-bar {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    top: 0 !important;
    z-index: 9999;
}