@media only screen and (max-width: 480px) {
    .swiper1 {
        width: 90%;
        height: 42%;
    }

    .carousel{
        height:180px;
    }
    
    .carousel .carousel-inner img {
        height: 180px;
    }

    .swiper1 {
        width: 60%;
        height: 45%;
    }

    .slider-div img {
        width: 180px;
        height: 180px;
    }

    /* cards slider css */

    .slider2-div img {
        width: 100%;
        height: 220px;
    }

    button.card-button{
        width: 130px;
    }

    .slider2-div{
        width: 182px !important;
        
    }

    .flag-div img{
        width: 80px;
        }
    
        .mobile-result-box{
            width: 18rem
        }
}

@media (min-width: 481px) and (max-width: 768px) {
    .swiper1 {
        height: 50%;
    }

    .carousel{
        height:380px;
    }
    
    .carousel .carousel-inner img {
        height: 380px;
    }
    .mobile-result-box{
        width: 20rem
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .swiper1 {
        height: 60%;
    }

    .carousel{
        height:480px;
    }
    
    .carousel .carousel-inner img {
        height: 480px;
    }

    .result-box{
        width: 27rem;
    }
    .mobile-result-box{
        width: 20rem
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .swiper1 {
        height: 60%;
    }
    .result-box{
        width: 26rem;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .swiper1 {
        height: 60%;
    }
    .result-box{
        width: 32rem;
    }
}

@media (min-width: 1401px) {
    .swiper1 {
        height: 60%;
    }
    .result-box{
        width: 37rem;
    }

}