.main{
    width: 100%;
    min-height: 100vh;
    /* background-color: var(--black); */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);



    
}





 .firstDiv{
    min-width: 68rem;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    padding: 1em;




}


 .firstDivItems{
    min-width: 30rem;
    display: flex;
    justify-content: center;
   
    flex-direction: column;
font-weight: 500;

z-index: 1;
background-color: transparent;

  
}

 .firstDivItems div{
    padding: .6em;
    font-size: 1.8rem;
background-color: transparent;



}
.firstDivItems div:hover {
    background-color: var(--black);
    opacity: 1;

    transition: 450ms;
    transform: translateX(1.5rem);
}


 .firstDivItems div span{
    color: var(--blue);
        font-size: 2.3rem;

background-color: transparent;

}

 .firstDivItems a{
    margin-top: 1em;
    text-decoration: none;
    padding: .7em;
    color: var(--white);
    margin-left: 1em;
    max-width: 10rem;
    display: flex;
    align-items: center;
    justify-content:center ;

    border: .2em solid var(--blue);
    border-radius: var(--borderRadius);


background-color: transparent;
}


.firstDivItems a:hover{
    transition: 400ms;
    transform: scale(.98);
    background-color: var(--blue);
    color: var(--white);
    font-weight: bold;

}

 .main .firstDiv img{
    width: 30rem;
opacity: .5;

display: none;
border-radius: var(--borderRadius);

} 

video{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100vh;
    width: 100%;


}




@media (max-width:68rem){
    .firstDiv {
     
            min-width: 50rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            padding: 1em;



        }

.firstDivItems {
    min-width: 27rem;
    display: flex;

    justify-content: center;

    flex-direction: column;
    /* background-color: red; */

}

.firstDivItems div {
    padding: .6em;
    font-size: 1.5rem;
}

.firstDivItems div span {
    color: var(--blue);
    font-size: 2rem;

}

.firstDivItems a {
    margin-top: 1em;
    text-decoration: none;
    padding: .7em;
    color: var(--white);
    margin-left: 1em;
    max-width: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;

    border: .2em solid var(--blue);
    border-radius: var(--borderRadius);


}



.main .firstDiv img {
    min-width: 20rem;


/* border: 2px solid red; */



}

}














@media (max-width:50rem) {

.main {
        width: 100%;
        min-height: 100vh;
        background-color: var(--black);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);



    }


    .firstDiv {

       margin-top: 4em;

        min-width: 38rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        padding: 1em;




    }

    .firstDivItems {
        min-width: 35rem;
        display: flex;

        justify-content: center;

        flex-direction: column;

        margin-bottom: 2em;


    }

    .firstDivItems div {
        padding: .6em;
        font-size: 1.5rem;
    }

    .firstDivItems div span {
        color: var(--blue);
        font-size: 1.6rem;

    }

    .firstDivItems a {
        margin-top: 1em;
        text-decoration: none;
        padding: .7em;
        color: var(--white);
        margin-left: 1em;
        max-width: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;

        border: .2em solid var(--blue);
        border-radius: var(--borderRadius);


    }



    .main .firstDiv img {
        max-width: 60%;
        height: 15rem;
        display: none;
        /* border: 2px solid red; */



    }

}










@media (max-width:40rem) {
    .firstDiv {

      

        min-width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        padding: .5em;



    }

    .firstDivItems {
        min-width:85%;
        display: flex;

        justify-content: center;

        flex-direction: column;

        margin-bottom: 0em;
        /* background-color: red; */

    }

    .firstDivItems div {
        padding: .6em;
        font-size: 1.4rem;
    }

    .firstDivItems div span {
        color: var(--blue);
        font-size: 1.5rem;

    }

    .firstDivItems a {
        margin-top: 1em;
        text-decoration: none;
        padding: .7em;
        color: var(--white);
        margin-left: 1em;
        max-width:8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;

        border: .2em solid var(--blue);
        border-radius: var(--borderRadius);


    }



    .main .firstDiv img {
        max-width: 60%;
        height: 15rem;
        /* border: 2px solid red; */
        display: none;



    }

}



















@media (max-width:30rem) {
    .firstDiv {



        min-width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        padding: .5em;



    }

    .firstDivItems {
        min-width: 95%;
        display: flex;

        justify-content: center;

        flex-direction: column;

        margin-bottom: 2em;
        /* background-color: red; */

    }

    .firstDivItems div {
        padding: .6em;
        font-size: 1.35rem;
    }

    .firstDivItems div span {
        color: var(--blue);
        font-size: 1.35rem;

    }

    .firstDivItems a {
        margin-top: 1em;
        text-decoration: none;
        padding: .7em;
        color: var(--white);
        margin-left: 1em;
        max-width: 8.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;

        border: .2em solid var(--blue);
        border-radius: var(--borderRadius);


    }



    .main .firstDiv img {
        min-width: 90%;
        height: 15rem;
        /* border: 2px solid red; */
        display: none;



    }

}