/* Desktop default size */
.disposal-logo-img {
    max-height: 70px;
    height: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .disposal-logo-img {
        max-height: 35px !important; /* smaller on mobile */
    }

    .disposal-logo-text {
        font-size: 1rem !important;
    }
}

.disposal-logo-text {
    color: #333;
    font-size: 1.1rem;
    margin-top: 0;
}

/* Custom styles for the new phone/email section */
.contact-item {
    padding: 0 0.35rem;
    display: flex;
    align-items: center;
}

.top-bar .container {
    justify-content: center !important;
}

.top-bar-right {
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.top-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

/* 🚨 Media Query: Mobile devices ke liye height aur Top Bar adjust karein */
@media (max-width: 991px) {
    /* 🚨 Top bar ka font size aur padding kam karein */

    /* 🚨 Mobile par Top Bar Buttons ko adjust karein 🚨 */
    .top-bar-btn {
        font-size: 0.7rem;
        padding: 1px 5px;
    }

    /* Jab sirf icon dikhana ho to padding aur kam kar dein */
    .top-bar-btn .bi {
        margin-right: 0 !important; /* Icon aur text ke beech ka space khatam karein */
    }

    /* Choti screens par Top Bar ki left side aur right side ko fit karne ke liye */
    .top-bar-right {
        /* Auto margin lagayenge taaki yeh content ko right mein dhakel de */
        justify-content: center;
        margin-left: 0;
        width: 100%;
    }
    .top-bar {
        font-size: 0.8rem;
        overflow: visible;
        padding: 4px 0;
    }

    /* 🚨 Yahan se 'display: none;' hata diya gaya hai, lekin flex-grow ko zero karein */
    .top-bar-left {
        white-space: nowrap; /* Taki text ek line mein rahe */
        flex-shrink: 0;
    }

    .contact-item {
        padding: 0;
    }
    /* Navbar padding aur logo height mobile ke liye */
    .navbar-brand {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .disposal-logo-img {
        max-height: 55px; /* Desktop par thoda bada */
        height: auto;
    }

    .disposal-logo-text {
        font-size: 1.2rem; /* Text clear and bold */
        letter-spacing: 1px;
    }

    /* Search Bar ko mobile par chupa dein taaki space bache */
    .navbar .d-lg-flex {
        display: none !important;
    }

    /* Make hamburger icon smaller on mobile */
    @media (max-width: 767px) {
        .navbar-toggler {
            padding: 2px 6px !important;
        }

        .navbar-toggler-icon {
            width: 18px !important;
            height: 18px !important;
        }

        .navbar-nav .nav-link {
            font-weight: 500 !important; /* Same as EN menu look */
            font-size: 1rem !important; /* Same text size */
            letter-spacing: 0.3px;
        }
    }

    /* Default Hamburger Icon */
    .menu-toggle-btn .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='black' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11z'/%3E%3C/svg%3E");
    }

    /* When menu is open → Show X icon */
    .menu-toggle-btn.active .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='black' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E");
    }

    /* Default Hamburger Icon EN */
    .menu-toggle-btn-en .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='black' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11z'/%3E%3C/svg%3E");
    }

    /* When menu is open → Show X icon EN */
    .menu-toggle-btn-en.active .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='black' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E");
    }
}




@media (max-width: 768px) {
    .social-media-and-lang{
        display: none !important;
    }
}

@media (max-width: 575px) {
    .top-bar .container {
        max-width: 100%;
        padding-left: 2px;
        padding-right: 2px;
    }

    .top-bar-right {
        flex-wrap: nowrap;
        gap: 2px;
    }

    .top-bar-btn {
        border-radius: 999px !important;
        font-size: clamp(0.56rem, 2.55vw, 0.68rem);
        gap: 1px;
        line-height: 1.05;
        padding: 2px 3px !important;
    }

    .top-bar-btn .bi {
        font-size: 0.82em;
    }
}




/* Hide on Desktop */
.lang-btn-mobile {
    display: none;
}

/* Desktop language button — site theme colors only */
.lang-btn {
    --lang-navy: #133041;
    border: 1px solid var(--lang-navy) !important;
    color: var(--lang-navy) !important;
    background: #fff !important;
    font-weight: 500;
}

.lang-btn:hover,
.lang-btn:focus {
    border-color: var(--lang-navy) !important;
    color: #fff !important;
    background: var(--lang-navy) !important;
}

/* Show ONLY on Mobile */
@media (max-width: 768px) {
    .lang-btn-mobile {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border: 1px solid #133041;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        color: #133041;
        background: #fff;
        transition: 0.2s;
    }

    .lang-btn-mobile img {
        width: 16px;
        height: 12px;
        border-radius: 2px;
    }

    .lang-btn-mobile:hover {
        background: #133041;
        border-color: #133041;
        color: #fff;
    }
}