@media screen and (max-width:1000px) {
    header .text {
        font-size: 25px;
    }
}

@media screen and (max-width:777px) {
    header .icon {
        display: none;
    }

    header .text {
        width: 100%;
    }
}

@media screen and (max-width:570px) {
    nav ul {
        display: none;
    }

    #menu {
        display: flex;
    }

    #div {
        display: none;
    }
}

@media screen and (max-width:372px) {
    header .text {
        font-size: 20px;
    }

}

@media screen and (max-width:278px) {
    nav img {
        width: 60%;
        height: auto;
    }

    header .text {
        font-size: 15px;
    }

    #li {
        width: 90%;
    }
}

@media screen and (min-width: 297px) and (max-width: 597px) {
    #hamkorlar .bigbox .box {
        width: 100%;
        aspect-ratio: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #hamkorlar .bigbox .box .img {
        width: 50%;
        aspect-ratio: 1;
    }

    #hamkorlar .bigbox .box .text {
        width: 50%;
        aspect-ratio: 1;
        overflow-y: scroll;
    }
}

/* Add media query for smaller screens */
@media (max-width: 768px) {
    #languageSwitcher {
        background: var(--kulrang);
        backdrop-filter: blur(5px); /* Ensure backdrop-filter applies */
        -webkit-backdrop-filter: blur(5px); /* Safari support */
    }
    
    #languageSwitcher option {
        background: var(--kulrang);
    }
}