*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.herosection{
    width: 100vw;
    height: 100vh;
    background-image: url('Home Background Desktop.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    position: relative;

}

.gif{
    position: absolute;
    top: 75%;
    right: 9%;
    transform: translateY(-65%) translateX(-15%);
    width: 200px;
    height: 250px;
}

.vedio
{
    float: left;
    width: 100%;
    height:50%;

}


.vedio1
{
    width:30%;
    height:70%;
    margin-left: 35%;
    border-radius: 5px;
    border: 2px solid black;
    box-shadow: 5px 5px 5px #575555;
}


iframe
{
    border-radius: 1px;
    width: 100%;
    height: 100%;
}

.image
{
    float: left;
    width: 100%;
}
.img1
{

    width: 15%;
    height: 17%;
    float: left;
    margin-top: 1%;
    margin-left: 20%;
}

.img2
{
    float: left;
    width: 15%;
    height: 13%;

}
.img3
{
    float: left;
    width: 15%;
    height: 15%;
    margin-left: 10px;
    margin-top: 0.6%;
}
.img4
{
    float: left;
    width: 14%;
    height: 100%;
    margin-top: 1%;
}



/*@media screen and (max-width:650px)*/
/*{*/
/*    .herosection{*/
/*        width: 100vw;*/
/*        height: 100vh;*/
/*        background-image: url('Home Mobile Background.jpg');*/
/*        background-size: cover;*/
/*        background-position: center;*/
/*        background-repeat: no-repeat;*/
/*        object-fit: cover;*/
/*        position: relative;*/

/*    }*/

/*    .gif{*/
/*        position: absolute;*/
/*        top: 65%;*/
/*        right: 0%;*/
/*        transform: translateY(-65%) translateX(-15%);*/
/*        width: 120px;*/
/*        height: 200px;*/
/*    }*/

/*    .vedio {*/
/*        float: left;*/
/*        width: 100%;*/
/*        height: 40%;*/
/*    }*/

/*    .vedio1*/
/*    {*/
/*        width:55%;*/
/*        height:50%;*/
/*        margin-left: 20%;*/
/*        margin-top: 15px;*/
/*        border-radius: 5px;*/
/*        border: 2px solid black;*/
/*        box-shadow: 5px 5px 5px #575555;*/
/*    }*/

/*    .vedio2*/
/*    {*/
/*        width:25%;*/
/*        height:25%;*/
/*        overflow: hidden;*/
/*        border-radius: 5px;*/
/*        margin-left: 20%;*/
/*        margin-top: 5%;*/
/*        border: 2px solid black;*/
/*        box-shadow: 5px 5px 5px #575555;*/
/*        float: left;*/
/*    }*/


/*    .vedio3*/
/*    {*/
/*        width:25%;*/
/*        height:25%;*/
/*        border-radius: 5px;*/
/*        border: 2px solid black;*/
/*        box-shadow: 5px 5px 5px #575555;*/
/*        margin-top:5%;*/
/*        margin-left: 5%;*/
/*    }*/

/*    iframe*/
/*    {*/
/*        border-radius: 2px;*/
/*    }*/

/*    .image*/
/*    {*/
/*        float: left;*/
/*        width: 100%;*/
/*        margin-top: 54%;*/
/*    }*/
/*    .img1*/
/*    {*/
/*        width: 30%;*/
/*        height: 40%;*/
/*        margin-left: 15%;*/
/*        margin-top: 2%;*/
/*    }*/

/*    .img2*/
/*    {*/

/*        width: 30%;*/
/*        height: 32%;*/
/*        margin-left: 5%;*/


/*    }*/
/*    .img3*/
/*    {*/
/*        width: 30%;*/
/*        height: 36%;*/
/*        float: right;*/
/*        margin-right: 55%;*/
/*        margin-top: -2%;*/
/*    }*/
/*    .img4*/
/*    {*/
/*        width: 30%;*/
/*        height: 37%;*/
/*        margin-left: 50%;*/
/*        margin-top: -12%;*/

/*    }*/

/*    .frame1*/
/*    {*/
/*        width: 100%;*/
/*        height: 100%;*/
/*    }*/
/*    .frame2*/
/*    {*/
/*        width: 100%;*/
/*        height: 100%;*/
/*    }*/
/*    .frame3*/
/*    {*/
/*        width: 100%;*/
/*        height: 100%;*/
/*    }*/
/*}*/

@media screen and (max-width:360px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 68%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 120px;
        height: 190px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 65%;
    }
    .img1
    {
        width: 35%;
        height: 50%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 35%;
        height: 30%;
        margin-left: 5%;


    }
    .img3
    {
        width: 35%;
        height: 37%;
        float: right;
        margin-right: 50%;
        margin-top: 2%;
    }
    .img4
    {
        width: 35%;
        height: 37%;
        margin-left: 54%;
        margin-top: -14%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:768px) and (min-width:416px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 70%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 180px;
        height: 300px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 53%;
    }
    .img1
    {
        width: 30%;
        height: 40%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 30%;
        height: 25%;
        margin-left: 5%;


    }
    .img3
    {
        width: 30%;
        height: 31%;
        float: right;
        margin-right: 55%;
        margin-top: -2%;
    }
    .img4
    {
        width: 30%;
        height: 30%;
        margin-left: 51%;
        margin-top: -12%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:415px) and (min-width:365px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 70%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 120px;
        height: 200px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 68%;
    }
    .img1
    {
        width: 30%;
        height: 40%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 30%;
        height: 25%;
        margin-left: 5%;


    }
    .img3
    {
        width: 30%;
        height: 31%;
        float: right;
        margin-right: 55%;
        margin-top: -2%;
    }
    .img4
    {
        width: 30%;
        height: 30%;
        margin-left: 51%;
        margin-top: -12%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:1440px) and (min-width:1000px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Background Desktop.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 65%;
        right: 9%;
        transform: translateY(-65%) translateX(-15%);
        width: 200px;
        height: 270px;
    }

    .vedio
    {
        float: left;
        width: 100%;
        height:50%;

    }

    .vedio1
    {
        width:30%;
        height:70%;
        margin-left: 35%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:17%;
        height:40%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 16%;
        margin-top: -16%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;

    }

    .vedio3
    {
        width:17%;
        height:40%;
        margin-left: 67%;
        margin-top: -12%;
        float: left;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;

    }

    iframe
    {
        border-radius: 1px;
        width: 100%;
        height: 100%;
    }

    .image
    {
        float: left;
        margin-top: 11.5%;
        width: 100%;


    }
    .img1
    {

        width: 15%;
        height: 17%;
        float: left;
        margin-top: 1%;
        margin-left: 20%;
    }

    .img2
    {
        float: left;
        width: 15%;
        height: 13%;

    }
    .img3
    {
        float: left;
        width: 15%;
        height: 15%;
        margin-left: 10px;
        margin-top: 0.6%;
    }
    .img4
    {
        float: left;
        width: 14%;
        height: 100%;
        margin-top: 1%;
    }

}

@media screen and (max-width:850px) and (min-width:768px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 70%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 180px;
        height: 300px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 53%;
    }
    .img1
    {
        width: 30%;
        height: 40%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 30%;
        height: 25%;
        margin-left: 5%;


    }
    .img3
    {
        width: 30%;
        height: 31%;
        float: right;
        margin-right: 55%;
        margin-top: -2%;
    }
    .img4
    {
        width: 30%;
        height: 30%;
        margin-left: 51%;
        margin-top: -12%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:360px) and (min-height: 740px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 68%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 120px;
        height: 190px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 78%;
    }
    .img1
    {
        width: 35%;
        height: 50%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 35%;
        height: 30%;
        margin-left: 5%;


    }
    .img3
    {
        width: 35%;
        height: 37%;
        float: right;
        margin-right: 50%;
        margin-top: 2%;
    }
    .img4
    {
        width: 35%;
        height: 37%;
        margin-left: 54%;
        margin-top: -14%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:415px) and (min-width:365px) and (min-height: 800px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 70%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 120px;
        height: 200px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 79%;
    }
    .img1
    {
        width: 30%;
        height: 40%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 30%;
        height: 25%;
        margin-left: 5%;


    }
    .img3
    {
        width: 30%;
        height: 31%;
        float: right;
        margin-right: 55%;
        margin-top: -2%;
    }
    .img4
    {
        width: 30%;
        height: 30%;
        margin-left: 51%;
        margin-top: -12%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:415px) and (min-width:365px) and (min-height: 895px)
{
    .herosection{
        width: 100vw;
        height: 100vh;
        background-image: url('Home Mobile Background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;

    }

    .gif{
        position: absolute;
        top: 70%;
        right: 0%;
        transform: translateY(-65%) translateX(-15%);
        width: 120px;
        height: 200px;
    }

    .vedio {
        float: left;
        width: 100%;
        height: 40%;
    }

    .vedio1
    {
        width:55%;
        height:50%;
        margin-left: 20%;
        margin-top: 15px;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
    }

    .vedio2
    {
        width:25%;
        height:25%;
        overflow: hidden;
        border-radius: 5px;
        margin-left: 20%;
        margin-top: 5%;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        float: left;
    }


    .vedio3
    {
        width:25%;
        height:25%;
        border-radius: 5px;
        border: 2px solid black;
        box-shadow: 5px 5px 5px #575555;
        margin-top:5%;
        margin-left: 5%;
    }

    iframe
    {
        border-radius: 2px;
    }

    .image
    {
        float: left;
        width: 100%;
        margin-top: 85%;
    }
    .img1
    {
        width: 30%;
        height: 40%;
        margin-left: 15%;
        margin-top: 2%;
    }

    .img2
    {

        width: 30%;
        height: 25%;
        margin-left: 5%;


    }
    .img3
    {
        width: 30%;
        height: 31%;
        float: right;
        margin-right: 55%;
        margin-top: -2%;
    }
    .img4
    {
        width: 30%;
        height: 30%;
        margin-left: 51%;
        margin-top: -12%;

    }

    .frame1
    {
        width: 100%;
        height: 100%;
    }
    .frame2
    {
        width: 100%;
        height: 100%;
    }
    .frame3
    {
        width: 100%;
        height: 100%;
    }
}