@media (max-width: 767px) {
    /* 1. Mobile par extra kachra, social icons aur menu lists bilkul ghayab */
    .mobile-header-fix .elementor-widget-social-icons,
    .mobile-header-fix .elementor-icon-list-wrapper,
    .mobile-header-fix ul,
    .mobile-header-fix br {
        display: none !important;
    }

    /* 2. Main outer container aur uske ANDAR ke saare sub-containers ko ek hi row mein majboor karna */
    .mobile-header-fix,
    .mobile-header-fix .elementor-container,
    .mobile-header-fix .elementor-row,
    .mobile-header-fix .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 4px !important;
        box-sizing: border-box !important;
    }

    /* 3. Logo ko bilkul BEECH (Center) mein fit karna */
    .mobile-header-fix .elementor-widget-image {
        order: 2 !important; /* Logo center mein rahega */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 60px !important;
        max-width: 60px !important;
        min-width: 55px !important;
        margin: 0 auto !important; /* Horizontally perfectly centered */
        padding: 0 !important;
    }

    .mobile-header-fix .elementor-widget-image img {
        width: 100% !important;
        max-width: 60px !important;
        height: auto !important;
    }

    /* 4. Dono Buttons ko Left aur Right side par lock karna */
    .mobile-header-fix .elementor-widget-button {
        width: 33% !important;
        max-width: 35% !important;
        min-width: 30% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-block !important;
    }

    /* Pehla Button (Become A Member) -> Logo ke LEFT par */
    .mobile-header-fix .elementor-widget-button:nth-of-type(1),
    .mobile-header-fix .elementor-widget-button:first-of-type {
        order: 1 !important;
    }

    /* Doosra Button (Donate) -> Logo ke RIGHT par */
    .mobile-header-fix .elementor-widget-button:nth-of-type(2),
    .mobile-header-fix .elementor-widget-button:last-of-type {
        order: 3 !important;
    }

    /* Buttons ka inner size tight responsive pills jaisa banana */
    .mobile-header-fix .elementor-button {
        width: 100% !important;
        padding: 8px 2px !important;
        font-size: 9px !important; /* Choti screen par text fit karne ke liye */
        font-weight: bold !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: block !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    /* 5. Lambi Text Headings ko reference site jaisa CENTERED rakhna aur size chota karna */
    .mobile-header-fix .elementor-widget-heading {
        order: 4 !important; /* Isko buttons ki line se hata kar neeche push karne ke liye */
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

    .mobile-header-fix .elementor-widget-heading h1,
    .mobile-header-fix .elementor-widget-heading h2,
    .mobile-header-fix .elementor-widget-heading h3,
    .mobile-header-fix .elementor-widget-heading p {
        font-size: 11px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
}
/* Final Desktop View Fix - Perfect sizing alignment with zero scroll overflow */
@media (min-width: 1025px) {
    .mobile-header, .mobile-header-fix {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 1240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    /* Forced strict height constraints on button links and their wraps */
    .mobile-header .elementor-button, 
    .mobile-header-fix .elementor-button {
        padding: 0 24px !important; /* Vertical padding zero ki taake motapa khatam ho */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important; /* Mazeed slim (42px) par lock kar diya */
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    /* Agar button ke andar koi inner wrap element text ko push kar raha hai */
    .mobile-header .elementor-button-wrapper,
    .mobile-header-fix .elementor-button-wrapper,
    .mobile-header .elementor-button-text,
    .mobile-header-fix .elementor-button-text {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}