@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');



body
{
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}
*
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-x: hidden;
}

i
{
    font-weight: 600;
}

hr
{
    width: 70px;
}

/* offcanva */


.main-pg-co
{
    height: 50dvh;
    width: 100%;
}

.offcanvas-body
{
    height: 100dvh;
    width: 100%;
}

#offcanvasBottom
{
    height: 100dvh;
    width: 100%;
    transition: 1s;
}

.colo-pre
{
    z-index: 1;
    font-size: 20px;
    text-align: start;
    font-family: "Roboto Condensed", sans-serif;
}



/* header */

header
{
    height: 35dvh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Catamaran";
    font-weight: 200;
    color: rgb(60, 59, 59);
    text-align: center;

}

.header-div1
{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



header p
{
    font-size: 80px;
}
header pre
{
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
    font-size: 20px;
}





/* Main page */

.main-pg
{
    height: 65dvh;
    width: 100%;
}

.as-top
{
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-bottom
{
    height: 50%;
    width: 100%;
    display: flex;
}

.mid-img
{
    height: 100%;
    width: 30%;
    /* display: flex;
    justify-content: flex-start;
    align-items: center; */
}

.mid-img  img
{
    height: 100%;
    width: 100%;
    transition: 1s;
}

#mid-img:hover
{
    transform: translateY(-15px);
}

/* ------------------------------------ input ---------------------------------------------- */
.mid-input
{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.fa-eye-slash
{
    margin-bottom: -3px;
    margin-left: -27px;
    /* z-index: 1; */
    font-size: 14px;
    color: black;
    cursor: pointer;
}

.bottom-pre
{
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dummy
{
    height: 100%;
    width: 70%;
}

.main-pre
{
    z-index: 1;
    font-size: 20px;
    text-align: start;
    font-family: "Roboto Condensed", sans-serif;
}

.bottom-img
{
    height: 100%;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s;
}
.bottom-img img
{
    height: 100%;
    width: 100%;
}

#bottom-img
{
    transition: 1s;
}

#bottom-img:hover
{
    transform: translateX(-20px);
}
.bottom-img:hover
{
    transform: translateX(-20px);
}





/* login */



input
{
    height: 40px;
    width: 250px;
    text-align: center;
    box-shadow: none;
    outline: rgb(51, 51, 51);
    font-size: small;
  font-family: "Anta", sans-serif;

}

.btn
{
    height: 40px;
    width: 252px;
    text-align: center;
    background-color: black;
    color: white;
    transition: 1s;
}
.btn:hover
{
    transform: translateX(5px) translateY(-5px);
    background-color: white;
    color: black;
    border-radius: 10px;
}

.btn:active
{
    transform: translateX(-3px) translateY(3px);
    background-color: rgb(41, 41, 173);
    color: rgb(255, 255, 255);
    border-radius: 10px;
}

.bot-inp
{
    display: flex;
    justify-content:space-around;
    align-items: center;
}

.bot-inp p
{
    height: -10px;
}

.d-h-a
{
    text-align: center;
    font-size: 12px;
}

.so-ic
{
    height: 30px;
    transition: .5s;
}
.so-ic img:hover
{
    transform: translateX(10px);
}



@media all and (max-width:1000px)
{

    .colo-pre
{
    font-size: 8px;
}

    header pre
    {
        font-size: 15px;
    }

    /* .bottom-pre
    {
        font-size: 20px;
    } */

    .mid-img  img
{
    width: 80%;
}
    .main-pre
    {
        font-size: 10px;
        left: -30px;
    }

    input
    {
        height: 35px;
        width: 200px;
        margin-left: 30px;
    }

   

    .btn
    {
        height: 35px;
        width: 200px;
        margin-left: 30px;

    }

    .so-ic
    {
        height: 25px;
    }
    
}