@media only screen and (max-width:450px) {

    /* for mobile devices */
    .slider {
        position: relative;
        width: 100%;
        height: 27.5vh !important;
    }

    .slider video {
        width: 100vw;
        height: 100%;
        display: none;
        background-size: contain;
        background-position: center;
        object-fit: contain;
        overflow: hidden;
    }

    .prev,
    .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .prev-btn {
        position: absolute;
        top: 40%;
        transform: translateX(-50%);
        float: left !important;
        left: 2.5%;
    }

    .next-btn {
        position: absolute;
        top: 37%;
        /* left: 90%; */
        transform: translateX(-50%);
        float: right !important;
        right: -1.5%;
    }

    .nav-list {
        height: 90vh;
        flex-direction: column;
        /* justify-content: center; */
        text-align: center;
    }

    .next-btn {
        right: 1%;
    }

    .navbar {
        flex-direction: column;
        /* transition: all 0.3s ease-out; */
    }

    .burger {
        display: block;
    }

    .line1 {
        display: block;
    }

    .line2 {
        display: block;
    }

    .line3 {
        display: block;
    }

    .h-nav {
        height: 10.5vh;
        opacity: 1;
    }

    .v-class {
        opacity: 1;
    }

    .left-slash {
        transform: rotate(45deg) translate(0px, 13px);
    }

    .hide {
        visibility: hidden;
    }

    .right-slash {
        transform: rotate(-45deg) translate(0px, -13.5px);
    }

    .slideshow-container {
        width: 100%;
        max-height: 25.5%;
    }

    .mySlides {
        height: 25.5%;
    }

    .mySlides img {
        width: 100%;
        height: 25.5%;
        background-size: 100% 100%;
        background-position: center;
        object-fit: contain;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;

    }

    .prev {
        cursor: pointer;
        position: absolute;
        top: 20vh;
        width: auto;
        transition: .6s ease;
        z-index: 2;
    }

    .next {
        cursor: pointer;
        position: absolute;
        top: 25vh;
        width: auto;
        transition: .6s ease;
        z-index: 2;
    }

    .next {
        right: 0;
        border-radius: 3px 3px 3px 3px;
    }

    .prev {
        border-radius: 3px 3px 3px 3px;
        left: 0;
    }

}

@media only screen and (min-width: 451px) and (max-width:720px) {

    /* for Tablet devices */
    .v-class {
        opacity: 1;
    }

    .h-nav {
        display: none;
    }
}

@media only screen and (min-width: 721x) and (max-width:1200px) {

    /* for Desktop devices */
    .v-class {
        /* display: none; */
    }

    .nav-list ul li {
        margin-left: 7%;
    }
}

@media only screen and (min-width: 1200px) {
    .nav-list ul li {
        margin-left: 7%;
    }
}