@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');


.box {
    position: relative;
    width: 65%;
    height: 600px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

    .box::before {
        content: '';
        position: absolute;
        top: -113%;
        left: -61%;
        /* width: 100%; */
        /* height: 500px; */
        /* background: linear-gradient(263deg, transparent, #45f3ff, transparent, #45f3ff); */
        /* transform-origin: bottom right; */
        animation: animate 11s linear infinite;
        /* width: 320px; */
        /* height: 420px; */
        width: 100%;
        height: 1000px;
        background: linear-gradient(10deg, transparent, #45f3ff, transparent, #45f3ff);
        transform-origin: bottom right;
        animation: animate 6s linear infinite;
        background: linear-gradient(0deg, transparent, #ff7400, transparent, #ff7400);
    }
    .box::after {
        content: '';
        position: absolute;
        top: -113%;
        left: -61%;
        /* width: 50%; */
        /* height: 500px; */
        /* background: linear-gradient(342deg, transparent, #45f3ff, transparent, #45f3ff); */
        /* transform-origin: bottom; */
        /* animation: animate 6s linear infinite; */
        animation-delay: -3s;
        /* width: 320px; */
        /* height: 420px; */
        width: 100%;
        height: 1000px;
        background: linear-gradient(10deg, transparent, #ff7400, transparent, #ff7400);
        transform-origin: bottom right;
        animation: animate 6s linear infinite;
        animation-delay: -3s;
        width: 100%;
        height: 1000px;
    }
   
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.form {
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    background: #f3fffd;
    z-index: 10;
    padding: 26px 37px;
    display: flex;
    flex-direction: inherit;
    margin: 2px;
    background: linea(225deg, #ff230091, #43a3a2);
}
















































































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

section{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
   
}
.frontext {
    width: 100%;
    padding: 10px 20px;
    outline: none;
    font-weight: 400;
    border: 1px solid #607d8b;
    font-size: 16px;
    letter-spacing: 1px;
    color: #607d8b;
    background: transparent;
    border-radius: 30px
}
section .imgBx{
    position: relative;
    width: 50%;
    height: 100%;
}

section .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    section .imgBx::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(225deg, #23a37591, #1a1c1d);
        z-index: 1;
        mix-blend-mode: screen;
    }section .contentBx{
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

section .contentBx .formBx{
    width: 65%;
}

    section .contentBx .formBx h2 {
        color: #607d8b;
        font-weight: 600;
        font-size: 2em;
        text-transform: uppercase;
        margin-bottom: 20px;
        border-bottom: 4px solid #ff4584;
        display: inline-block;
        letter-spacing: 1px;
        text-align: center;
    }

section .contentBx .formBx .inputBx{
    margin-bottom: 20px;
}

    section .contentBx .formBx .inputBx span {
        font-size: 18px;
        margin-bottom: 5px;
        display: inline-block;
        color: #005d83;
        font-weight: 600;
        letter-spacing: 1px;
    }

section .contentBx .formBx .inputBx input{
    width: 100%;
    padding: 10px 20px;
    outline: none;
    font-weight: 400;
    border: 1px solid #607d8b;
    font-size: 16px;
    letter-spacing: 1px;
    color: #607d8b;
    background: transparent;
    border-radius: 30px;
}

section .contentBx .formBx .inputBx input[type = "submit"]{
    background: #ff4584;
    color: #fff;
    outline: none;
    border: none;
    font-weight: 500;
    cursor: pointer;
}

section .contentBx .formBx .inputBx input[type = "submit"]:hover{
    background: #f53677;
}

section .contentBx .formBx .remember{
    margin-bottom: 10px;
    color: #607d8b;
    font-weight: 400;
    font-style: 14px;

}

section .contentBx .formBx .inputBx p{
    color: #607d8b;
}

section .contentBx .formBx .inputBx p a{
    color: #ff4584;
}
section .contentBx .formBx h3{
    color: #607d8b;
    text-align: center;
    margin: 80px 0 10px;
    font-weight: 500;
}

section .contentBx .formBx .sci{
    display: flex;
    justify-content: center;
    align-items: center;
}

section .contentBx .formBx .sci li{
    list-style: none;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #607d8b;
    border-radius: 50%;
    margin: 0 7px;
    cursor: pointer;
}

section .contentBx .formBx .sci li:hover{
    background-color: #ff4584;
}

section .contentBx .formBx .sci li img{
    transform: scale(0.5);
    filter: invert();
}




@media (max-width: 768px){
    section .imgBx{
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
    }

    .box {
        position: relative;
        width: 95% !important;
        height: 600px;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
    }
    section .contentBx{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
        section .contentBx .formBx {
            width: 100%;
            padding: 0px;
            background: rgb(255, 255, 255 / 0.9);
            margin: 1px;
        }
}