/* =====================================================
   ALANQA - FINAL MOBILE RESPONSIVE FIX
   ===================================================== */

@media screen and (max-width: 768px) {

    /* =========================
       HEADER
       ========================= */

    .navbar-modern {
        height: clamp(76px, 18vw, 88px) !important;
        padding: 6px 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        box-sizing: border-box !important;
        background: #ffffff !important;
    }


    /* =========================
       RESPONSIVE LOGO
       ========================= */

    .navbar-modern .logo-brand {
        width: clamp(215px, 58vw, 300px) !important;
        max-width: calc(100% - 60px) !important;

        height: clamp(58px, 14vw, 72px) !important;

        flex: 0 1 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        transform: none !important;
    }


    .navbar-modern .logo-brand img {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: left center !important;

        /*
           Tumhare logo PNG me blank space hai,
           isliye visible logo ko enlarge kar rahe hain.
        */
        transform: scale(3.6) !important;
        transform-origin: left center !important;

        position: relative !important;
        left: -5px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =========================
       HAMBURGER
       ========================= */

    .menu-toggle {
        display: flex !important;

        width: 30px !important;
        min-width: 30px !important;
        flex: 0 0 30px !important;

        margin-left: auto !important;
    }

    .menu-toggle .bar {
        width: 26px !important;
        height: 3px !important;
    }


    /* =========================
       MOBILE BUTTON AREA
       ========================= */

    .action-buttons-center {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        justify-content: center !important;
        align-items: center !important;

        gap: 8px !important;

        padding: 0 !important;
        margin: 0 auto !important;
    }


    /* Explore + Request Quote */

    .action-buttons-center .btn-primary-large,
    .action-buttons-center .btn-secondary-large {

        /*
           Screen chhota -> button chhota
           Screen bada -> button thoda bada
        */
        width: clamp(175px, 46vw, 215px) !important;
        max-width: 215px !important;

        min-height: 38px !important;

        padding: 7px 12px !important;

        margin: 0 auto !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: clamp(10px, 2.5vw, 12px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0.5px !important;

        text-align: center !important;
    }
}


/* =====================================================
   BIG MOBILE - BUTTONS SIDE BY SIDE
   ===================================================== */

@media screen and (min-width: 560px) and (max-width: 768px) {

    .action-buttons-center {
        flex-direction: row !important;
        gap: 12px !important;
    }

    .action-buttons-center .btn-primary-large,
    .action-buttons-center .btn-secondary-large {

        width: clamp(155px, 27vw, 195px) !important;
        max-width: 195px !important;

        min-height: 38px !important;

        font-size: 11px !important;
    }
}