@media screen and (max-width:1280px) {
.modal__close {
    top: -14%;
    right: 0%;
}


}








@media screen and (max-width:912px) {
    .gallery-con {
        flex-wrap: wrap;
        gap: 30px;
    }
    .gal-img {
        width: 47%;
    }
    .modal__close {
        position: absolute;
        top: -8%;
        right: -7%;
        font-size: 30px;
        color: #ffffff;
        cursor: pointer;
        transition: all 250ms ease-in-out;
        z-index: 3;
    }

    .modal__content {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
    }




}

@media screen and (max-width: 820px) {
    .modal__close {
        position: absolute;
        top: -19%;
        right: 0%;
        font-size: 30px;
        color: #ffffff;
        cursor: pointer;
        transition: all 250ms ease-in-out;
        z-index: 3;
    }





}

@media screen and (max-width: 712px) {
.modal__content {
    width: 100%;
}


}


@media screen and (max-width: 430px) {
.gallery-con {
    flex-direction: column;
}
.top-1 {
    padding: 6px 20px;
    font-size: 18px;
}

.gal-img {
    width: 90%;
    margin: 0 auto;
}
.modal__img {
    width: 85%;
    height: auto;
}
.ban-b {
    padding: 6px 20px;
    font-size: 15px;
}


}


@media screen and (max-width: 360px) {
    .top-1 {
        padding: 6px 20px;
        font-size: 16px;
    }



}