body {
    background: #f9fbff !important;
}

.container {
    width: 1050px !important;
    max-width: 1050px;
    height: 500px;
    position: relative;
    margin: 100px auto;
    padding: 0px !important;
    border-radius: 10px;
    overflow: hidden;
}

.container .form-box {
    background-color: white;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.container .form-box .sign-in-form {
    transform: translateX(0%);
    z-index: 1;
}

.container .form-box .auth-form {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 50%;
    height: 100%;
    gap: 15px;
    padding: 20px 0px;
    background: #ffffff;
}

.container .auth-form .top_bar {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.container .auth-form .top_bar h2 {
    font-size: 25px;
}

.container .auth-form .top_bar ul {
    display: flex;
    list-style: none;
    gap: 10px;
    margin: 0px;
    padding: 0px;
}

.container .auth-form .top_bar ul li {
    background: white;
    padding: 8px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 50px;
}

.container .auth-form .top_bar ul li img {
    width: 25px;
}

.container .auth-form p {
    font-size: 14px;
    margin-top: 30px;
    font-family: 'Poppins', sans-serif;
}

.container .auth-form .auth-input-box {
    width: 60%;
    display: flex;
    align-items: center;
    background: #ecf0f1;
    border: 1px solid #dcdde1;
    padding: 3px 10px;
    border-radius: 8px;
}

.container .auth-form .auth-input-box i {
    color: gray;
    font-size: 22px;
}

.container .auth-form .auth-input-box input {
    width: 100%;
    height: 40px;
    position: relative;
    padding-left: 15px;
    border: none;
    outline: none;
    background-color: transparent;
}

.container .auth-form .forget p {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    left: 0px;
}

.container .auth-form .button button {
    position: relative;
    text-align: center;
    border: none;
    outline: none;
    color: #fff;
    background: #1abc9c;
    font-family: 'Poppins', sans-serif;
    padding: 10px 20px;
    border-radius: 8px;
}

.container .auth-form .button button i {
    margin-left: 5px;
}


/* sign-up form */

.container .sign-up-form {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translateX(-100%);
    transition: all 0.5s ease-in;
    z-index: -1;
}

.container .sign-up-form.active {
    transform: translateX(0%);
    z-index: 1;
}

.container .sign-in-form {
    transform: translateX(0%);
    transition: all 0.5s ease-in;
    z-index: 1;
}

.container .sign-in-form.active {
    transform: translateX(100%);
    z-index: -1;
}


/*hover effect */

.container .left_hover {
    width: 50%;
    height: 100%;
    position: absolute;
    transform: translateX(100%);
    top: 0px;
    left: 0%;
    background: rgb(251, 164, 83);
    background: linear-gradient(90deg, rgba(251, 164, 83, 1) 1%, rgba(251, 214, 100, 1) 100%, rgba(233, 221, 80, 1) 100%);
    color: white;
    border-radius: 0px 8px 8px 0px;
    overflow: hidden;
    display: block;
    transition: all 0.5s ease-in;
    z-index: 10;
}

.container .left_hover .div {
    animation: rotate-all 2s 0 infinite linear alternate;
}

.container .left_hover .div1 {
    width: 50px;
    height: 50px;
    background-color: #669999;
    position: relative;
    margin: auto;
    animation: square-to-circle 2.5s .5s infinite cubic-bezier(1, .015, .295, 1.225) alternate-reverse;
}

.container .left_hover .div2 {
    width: 50px;
    height: 50px;
    background-color: #669999;
    position: relative;
    margin: auto;
    animation: square-to-circle2 2.5s .42s infinite cubic-bezier(1, .015, .295, 1.225) alternate-reverse;
}

.container .left_hover #one {
    top: 80px;
}

.container .left_hover #two {
    top: 80px;
    right: 50px;
}

.container .left_hover #three {
    top: 80px;
}

.container .left_hover #four {
    bottom: 10px;
    left: 50px;
}

@keyframes square-to-circle {
    0% {
        border-radius: 0 0 0 0;
        transform: rotate(45deg);
    }
    25% {
        border-radius: 50% 0 0 0;
        background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
        transform: rotate(135deg);
    }
    50% {
        border-radius: 50% 50% 0 0;
        background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
        transform: rotate(180deg);
    }
    75% {
        border-radius: 50% 50% 50% 0;
        background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
        transform: rotate(315deg);
    }
    100% {
        border-radius: 50%;
        background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
        transform: rotate(404deg);
    }
}

@keyframes square-to-circle2 {
    0% {
        border-radius: 0 0 0 0;
        transform: rotate(45deg);
    }
    25% {
        border-radius: 0 0 50% 0;
        background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
        transform: rotate(135deg);
    }
    50% {
        border-radius: 0 0 50% 50%;
        background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
        transform: rotate(180deg);
    }
    75% {
        border-radius: 50% 0 50% 50%;
        background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
        transform: rotate(315deg);
    }
    100% {
        border-radius: 50%;
        background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
        transform: rotate(404deg);
    }
}

.container .left_hover .content {
    position: relative;
    width: 100%;
    margin-top: 50px;
    z-index: 9;
}

.container .left_hover .content h2 {
    position: relative;
    top: 0px;
    font-size: 25px;
    text-align: center;
}

.container .left_hover .content p {
    position: relative;
    top: 0px;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.container .left_hover button {
    position: absolute;
    width: 130px;
    height: 40px;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    background: none;
    font-family: 'Poppins', sans-serif;
    border-radius: 6px;
    margin: 10px auto;
    left: 50%;
    -ms-transform: translateY(-50%);
    transform: translateX(-50%);
    outline: none;
    z-index: 1;
}

.container .left_hover.active {
    transform: translateX(0%);
    border-radius: 8px 0px 0px 8px;
}

.container .left_hover .login_content {
    position: absolute;
    width: 100%;
    top: 0px;
    transform: translateX(-100%);
    transition: all 0.5s ease-in;
}

.container .left_hover .login_content.active {
    transform: translateX(0%);
}

.container .left_hover .sign_in_content {
    position: absolute;
    width: 100%;
    top: 0px;
    transform: translateX(0%);
    transition: all 0.5s ease-in;
}

.container .left_hover .sign_in_content.active {
    transform: translateX(100%);
}

.container .left_hover .shape {
    position: relative;
    width: 60%;
    height: 180px;
    top: 0px;
    left: 0px;
    background: rgb(251, 164, 83);
    background: linear-gradient(90deg, rgba(251, 164, 83, 1) 1%, rgba(251, 214, 100, 1) 100%, rgba(233, 221, 80, 1) 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 1;
}

.container .mobile-toggle-button {
    position: absolute;
    left: 0px;
    bottom: 38px;
    width: 100%;
    z-index: 9;
    text-align: center;
    display: none;
}

@media only screen and (max-width: 1300px) {
    .container {
        width: 950px !important;
    }
    .container .auth-form .auth-input-box {
        width: 80%;
    }
}

@media only screen and (max-width: 1180px) {
    .container {
        width: 800px !important;
    }
}

@media only screen and (max-width: 850px) {
    .container {
        width: 70% !important;
        height: 540px !important;
    }
    .container .auth-form {
        width: 100% !important;
    }
    .container .auth-form .auth-input-box {
        width: 75%;
    }
    .container .left_hover {
        display: none;
    }
    .container .mobile-toggle-button {
        display: block;
    }
}

@media only screen and (max-width: 675px) {
    .container {
        width: 80% !important;
    }
}

@media only screen and (max-width: 550px) {
    .container {
        width: 90% !important;
        margin: 50px auto !important;
    }
}