header {
    background-image: linear-gradient(rgba(255, 255, 255, 0.925), rgba(255, 255, 255, 0.925)), url(../images/img1.jpg);
    /* background-image: linear-gradient(rgba(179, 248, 250, 0.836), rgba(196, 251, 253, 0.836)), url(../images/img1.jpg); */
    height: 100vh;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* position: absolute; */
}

.landing {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s;
}

header {
    padding: 20px 20px;
}

.foreground {
    height: 100%;
    width: 100%;
    /* background-color: rgba(179, 248, 250, 0.89); */
    background-color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

.foreground_logo_con {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 200px;
    height: 100px;
    padding: 10px 20px;
    border-radius: 5px;
}


/* .landing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    transition: all .5s;
} */

.landing.active {
    top: 40%;
    transform: translate(-50%, -50%);
}


#landing_text-4{
    margin-top: 20px;
    margin-bottom: 20px;
}

#btns-group{
    margin-top: 50px;
}

div.btns{
    border: 1px solid rgba(70, 200, 239, 0.596);
    padding: 5px 30px;
    /* background: linear-gradient(to bottom left, rgba(88, 189, 239, 0.832), rgba(71, 178, 231, 0.596));
    color: white; */
    border-radius: 8px;
    transition: all .5s;
}

div.btns:hover{
     background: linear-gradient(to bottom left, rgba(111, 12, 90, 0.596), rgba(149, 30, 123, 0.596));
    color: white;
}

/* div#btns-group{
    display: block;
} */

#btns-group-2{
    display: none;
}

.myBg_grd1{
    background-image: linear-gradient(to right, rgb(22, 177, 221), rgb(6, 159, 220));
    color: white;
    transition: all 5s;
}

.myBg_grd1:hover{
    background-image: linear-gradient(to right, rgb(8, 146, 184), rgb(5, 94, 130));
    transition: all 2s;

}

@media only screen and (max-width: 900px) {
    .landing {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .5s;
        width: 100%;
    }

    #btns-group{
        margin-top: 100px;
    }

    #landing_text-2, #landing_text-3{
        font-size: 22px;
    }

    #landing_text-4{
        font-size: 18px;
    }

    #landing_text-5{
        font-size: 18px;
    }

    div.regbtn, div.loginbtn{
        margin-right: 30px;
    }

    div#btns-group{
        display: none;
    }

    #btns-group-2{
        display: initial;
        position: absolute;
        top: 70%;
        left: 48%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    div#btnm-1, div#btnm-2{
        margin-right: 20px;
        padding-left: 0px;
    }

    .mob_selector{
        height: 60px;
        width: auto;
        border-radius: 8px;
        padding: 10px 10px;
        margin-right: 20px;
    }

    .mob_selector i{
        font-size: 30px;
        color: rgb(7, 120, 155);
    }

    /* #mob_selector-1{
        color: rgb(7, 120, 155);
    }
    #mob_selector-2{
        color: rgb(6, 171, 183);
    }

    #mob_selector-3{
        color: rgb(83, 13, 86);
    } */
}