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

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

section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
}

    section .imgbox {
        position: relative;
        width: 50%;
        height: 100%;
    }

        section .imgbox::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient( 135deg, rgba(25, 42, 86, 0.85), rgba(106, 17, 203, 0.75) );
            z-index: 1;
            mix-blend-mode: screen;
        }

        section .imgbox img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

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

        section .contentbox .frmbox {
            width: 50%;
        }

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

            section .contentbox .frmbox .inputBox {
                margin-bottom: 20px;
            }

                section .contentbox .frmbox .inputBox span {
                    font-size: 16px;
                    margin-bottom: 5px;
                    display: inline-block;
                    color: #607d8b;
                    font-weight: 300;
                    letter-spacing: 1px;
                }

                section .contentbox .frmbox .inputBox 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 .contentbox .frmbox .inputBox input[type="submit"] {
                        background:#ff4584;
                        color:#fff;
                        outline:none;
                        border:none;
                        font-weight:500;
                        cursor:pointer;
                    
                    }
                    section .contentbox .frmbox .inputBox input[type="submit"]:hover{
                        background:#f53677;
                    }
        section .contentbox .frmbox .remember{
            margin-bottom:10px;
            color:#607d8b;
            font-weight:400;
            font-size:14px;
        }
        section .contentbox .frmbox .inputBox p {
            color:#607d8b;
        }
            section .contentbox .frmbox .inputBox p a {
                color: #ff4584;
            }
@media(max-width : 768px)
{
    section .imgbox{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    section .contentbox{
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        height:100%;
        z-index:1;
    }
    section .contentbox .frmbox{
        width:100%;
        padding:40px;
        background:rgb(255 255 255 / 0.9);
        margin:50px;
    }
}