:root {
    /*--primary-color: #4EA685;*/
    /*--primary-color: rgba(0,120,245,0.8);*/
    --primary-color: rgba(0,161,222,0.6);
    /*--secondary-color: #57B894;*/
    /*--secondary-color: rgba(10,110,15,0.8);*/
    --secondary-color: rgba(60,138,46,0.6);
    --black: #000000;
    --white: #ffffff;
    --gray: #efefef;
    --gray-2: #757575;

    /*--facebook-color: #4267B2;*/
    /*--google-color: #DB4437;*/
    /*--twitter-color: #1DA1F2;*/
    /*--insta-color: #E1306C;*/
}

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');*/

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    overflow: hidden;
}

.container1 {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
}

.col {
    width: 50%;
}

.align-items-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form-wrapper {
    width: 100%;
    /*max-width: 28rem;*/
    max-width: 40rem;
}

.form {
    padding: 1rem;
    background-color: var(--white);
    border-radius: 1.5rem;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(0);
    transition: .5s ease-in-out;
    transition-delay: 1s;
}

.input-group {
    position: relative;
    width: 100%;
    margin: 1rem 0;
}

.input-group i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--gray-2);
}


.input-group label * {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    /*font-size: 1.4rem;*/
    /*color: var(--gray-2);*/

    font-size: 1rem;
    color: black;
    text-align: left;
}

.input-group label span{
    margin-left: 1.2rem;
}

.input-group input {
    width: 100%;
    padding: 1rem 3rem;
    font-size: 1rem;
    background-color: var(--gray);
    border-radius: .5rem;
    border: 0.125rem solid var(--white);
    outline: none;
}

/*** Added by me ***/

h3{
    color: #005cbf;
    margin-top: 1rem;
    /*background-color: cadetblue;*/
    padding-bottom: 0.4rem;
    /*border-radius: 0.3rem;*/
    border-bottom: 0.5px solid silver;
}


.form.sign-up .input-group input{
    margin-left: 40%;
    width: 60%;
    padding: 0.6rem;
}

.invalid-feedback{
    color: red;
    margin-left: 40%;
    font-size: 0.8rem;
    float: left;
}

.alert-danger{
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;

    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}


.was-validated .form-control:invalid, .form-control.is-invalid {
    /*border-color: #dc3545;*/
    border: 1px solid #dc3545;
    padding-right: calc(1.6em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5' /%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z' /%3e%3ccircle cx='6' cy='8.2' r='.6' stroke='none' fill='%23dc3545' /%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.4em + 0.1875rem) center;
    background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}

.link{
    color: #005cbf;
    font-weight: bold;
    font-size: 0.8rem;
}

.link:hover{
    color: #3C578C;
    font-size: 0.82rem;
}


/*** ***/

.input-group input:focus {
    border: 0.125rem solid var(--primary-color);
}

.form button {
    cursor: pointer;
    width: 100%;
    padding: .6rem 0;
    border-radius: .5rem;
    border: none;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 1.2rem;
    outline: none;
}

.form button:hover {
    background-color: #005cbf;
}

.form p {
    margin: 1rem 0;
    font-size: .7rem;
}

.flex-col {
    flex-direction: column;
}


.pointer {
    cursor: pointer;
}

.container1.sign-in .form.sign-in,
.container1.sign-up .form.sign-up{
    transform: scale(1);
}

.content-row {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 6;
    width: 100%;
}

/*Added By Moses on 09 set 2024*/
.form.sign-in{
    /*margin-left: 5rem;*/
    /*margin-right: 5rem;*/
}
.form.sign-up label{
    width: 35%;
}


/* ************ */

.text {
    margin: 4rem;
    color: var(--white);
}

.text h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 2rem 0;
    transition: 1s ease-in-out;
}

.text p {
    /*font-weight: 600;*/
    transition: 1s ease-in-out;
    transition-delay: .2s;
    text-align: start;
}

.img img {
    width: 30vw;
    transition: 1s ease-in-out;
    transition-delay: .4s;
}

.text.sign-in h2,
.text.sign-in p,
.img.sign-in img {
    transform: translateX(-400%);
}

.text.sign-up h2,
.text.sign-up p,
.img.sign-up img {
    transform: translateX(400%);
}

.container1.sign-in .text.sign-in h2,
.container1.sign-in .text.sign-in p,
.container1.sign-in .img.sign-in img,
.container1.sign-up .text.sign-up h2,
.container1.sign-up .text.sign-up p,
.container1.sign-up .img.sign-up img {
    transform: translateX(0);
}

/* BACKGROUND */

.container1::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 300vw;
    transform: translate(35%, 0);
    background-image: linear-gradient(-45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    /*background: url("img/bg_1.jpeg");*/
    /*background-size: 100%;*/
    /*background-repeat: repeat;*/
    transition: 1s ease-in-out;
    z-index: 6;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-bottom-right-radius: max(50vw, 50vh);
    border-top-left-radius: max(50vw, 50vh);
}

.container1.sign-in::before {
    transform: translate(0, 0);
    right: 50%;
}

.container1.sign-up::before {
    transform: translate(100%, 0);
    right: 50%;
}

/* RESPONSIVE */

/*@media only screen and (max-width: 425px) {*/
@media only screen and (max-width: 1026px) {

    .container1::before,
    .container1.sign-in::before,
    .container1.sign-up::before {
        /*height: 100vh;*/
        height: 100px;
        border-bottom-right-radius: 0;
        border-top-left-radius: 0;
        z-index: 0;
        transform: none;
        right: 0;
    }

    /* .container1.sign-in .col.sign-up {*/
    /*    transform: translateY(100%);*/
    /*} */
    .container1.sign-in .col.sign-in,
    .container1.sign-up .col.sign-up {
        transform: translateY(100%);
        /*background-color: red;*/
        /*transform: scale(1);*/
    }

    .container1.sign-in .col.sign-up {
        display: none;
    }

    .content-row {
        align-items: flex-start !important;
    }

    .content-row .col {
        transform: translateY(0);
        background-color: unset;
    }

    .form-row .col {
        /*transform: translateY(-10rem);*/
        transform: translateY(0);
        background-color: unset;
    }

    .col {
        width: 100%;
        position: absolute;
        padding: 1rem;
        background-color: var(--white);
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        transform: translateY(100%);
        transition: 1s ease-in-out;
    }

    .row {
        align-items: flex-end;
        justify-content: flex-end;
    }

    .form {
        box-shadow: none;
        margin: 0;
        /*padding: 0;*/
        padding: 0.4rem;
    }

    .text {
        margin: 0;
    }

    .text p {
        display: none;
    }

    .text h2 {
        margin: .5rem;
        font-size: 2rem;
    }

    /*Added by me*/
    /*Added by me*/
    .sign-up .input-group input {
        margin-left: 40%;
        width: 60%;
        padding: 1rem;
    }

    html,
    body {
        height: 100vh;
        /*overflow: hidden;*/
        overflow-x: hidden;
        overflow-y: scroll;
        /*background-color: sandybrown;*/
    }

    .container1 {
        position: relative;
        /*min-height: 100vh;*/
        /*height: 10px;*/
        /*overflow: hidden;*/
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .row {
        /*display: flex;*/
        /*flex-wrap: wrap;*/
        /*height: 100vh;*/
        height: 20vh;
        /*background-color: #0000cc;*/
    }

    .cont_img_back_grey > img {
        width: 50%;
        /*height: 100%;*/
        position: absolute;
    }

    .cont_img_back_grey {
        height: 130%;
        background-color: #ddb89c;
    }

    /*Added by me*/
}




/* *********** */
/* Background Animation */
/* *********** */



     /*.cont_back_info {*/
     /*    position: relative;*/
     /*    float: left;*/
     /*    width: 640px;*/
     /*    height: 280px;*/
     /*    overflow: hidden;*/
     /*    background-color: #fff;*/
     /*    box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);*/
     /*}*/


 .cont_img_back_grey {
     position: absolute;
     /*width: 950px;*/
     width: 100vw;
     top: -80px;
     /*left: -116px;*/
     z-index: -1;
 }

.cont_img_back_grey > img {
    width: 100%;
    /*-webkit-filter: grayscale(100%);*/
    /*filter: grayscale(100%);*/
    /*opacity: 0.2;*/
    opacity: 0.6;
    animation-name: animar_fondo;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/*.sign_in_block{*/
/*    background: url("img/bg_1.jpeg");*/
/*    !*background-size: ;*!*/
/*    !*background-repeat: ;*!*/
/*}*/



@-webkit-keyframes animar_fondo {
    from {
        -webkit-transform: scale(1) translate(0px);
        -moz-transform: scale(1) translate(0px);
        -ms-transform: scale(1) translate(0px);
        -o-transform: scale(1) translate(0px);
        transform: scale(1) translate(0px);
    }
    to {
        -webkit-transform: scale(1.5) translate(50px);
        -moz-transform: scale(1.5) translate(50px);
        -ms-transform: scale(1.5) translate(50px);
        -o-transform: scale(1.5) translate(50px);
        transform: scale(1.5) translate(50px);
    }
}
@-o-keyframes identifier {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
}
@-moz-keyframes identifier {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
}
@keyframes identifier {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
}


/*------------------------------------------*/
.brand-image{
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23) !important;
    border-radius: 50%;
    vertical-align: middle;
    border-style: none;
    width: 5rem;
    margin-top: -1rem;
}