/* body {
    font-family: Arial, sans-serif;
    background-color: #f0f4f7;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
}

.container {
    display: flex;
    max-width: 800px;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.left-section {
    padding: 60px;
    width: 50%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.left-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.inputs{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 14px;
    background-color: #f9f9f9;
}

.left-section button {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, rgba(255,71,87,1) 0%, rgba(252,103,103,1) 100%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.left-section button:hover {
    background: linear-gradient(90deg, rgba(252,103,103,1) 0%, rgba(255,71,87,1) 100%);
}

.left-section .checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
}

.left-section .checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.left-section .links {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.left-section .social-icons {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.left-section .social-icons a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    color: #333;
    font-size: 18px;
    transition: background 0.3s ease;
}

.left-section .social-icons a:hover {
    background-color: #eee;
}

.right-section {
    width: 50%;
    background: linear-gradient(90deg, rgba(252,103,103,1) 0%, rgba(255,71,87,1) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px;
}

.right-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.right-section p {
    font-size: 16px;
    margin-bottom: 20px;
}

.right-section button {
    padding: 15px 30px;
    border-radius: 25px;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease, color 0.3s ease;
}

.right-section button:hover {
    background-color: #fff;
    color: #ff4757;
}
.error{
    font-weight: 700;
    color: red;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column-reverse;
        max-width: 90%;
    }

    .left-section, .right-section {
        width: 100%;
        padding: 40px;
    }

    .right-section {
        text-align: center;
    }

.inputs{
        padding: 10px;
        font-size: 12px;
        width: 80% !important;
        height: 35px;
    }
.left-section button {
    width: 84%;
}
}

@media (max-width: 480px) {
    .left-section h2, .right-section h2 {
        font-size: 20px;
    }

    .left-section button, .right-section button {
        font-size: 14px;
        padding: 10px;
    }

.inputs{
        padding: 10px;
        font-size: 12px;
        width: 80% !important;
        height: 35px;
    }
    .left-section button {
        width: 84%;
    }
} */
*{
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    position: relative;
}
.container .right-section{
    width: 50%;
    background: url(./images/bg.avif);
    background-size: cover;
    background-position: center;
    position: relative;
}
/* left section */
.left-section{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}
.left-section h2{
    color: red;
    font-size: 5vmin;
}
.left-section form{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.left-section label{
    position: relative;
    width: 90%;
    height: 40px;
    margin: 10px;
}
.left-section label input{
    width: 100%;
    height: 100%;
    padding-left: 35px;
    outline: none;
    border-radius: 5px;
    border: 1px solid;
}
.left-section label i{
    position: absolute;
    top:7px;
    left: 10px;
    font-size: 20px;
    padding: 3px;
    border-radius: 5px;
    color: red;
}
.checkbox{
    margin-top: 5px;
    margin-left: 10px;
    display: flex;
}
.checkbox input{
    display: none;
}
.checkbox i{
    color: grey;
    font-size: 20px;
    margin-top: 7px;
}
.checkbox label{
    display: block;
}
.checkbox input:checked +i{
    color: red;
}
.left-section form button{
    height: 45px;
    width: 98%;
    display: block;
    margin: 0 10px;
    background-color: red;
    border: none;
    outline: none;
    border-radius: 10px;
    color: white;
}
.create-acc{
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid red;
    margin: 10px;
    padding: 10px 0;
    border-radius: 10px;
    text-decoration: none;
    color: red;
}
/* right section */
.right-section .details{
    background:  linear-gradient(0deg, rgba(196,11,11,1) 33%, rgba(196,11,11,0.6189376443418013) 73%, rgba(196,11,11,0.09006928406466508) 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    color: white;
    text-align: center;
}
.right-section .details p{
    /* padding-bottom: 200px; */
    font-size: 20px;
}
.right-section .details h2{
    font-size: 8vmin;
    text-transform: uppercase;
}
.right-section .details h4{
    font-weight: 500;
}
.right-section .details img{
    display: block;
    margin: 10px auto;
    width: 200px;

}
.error{
    background-color: white;
    width: 85%;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
}
@media only screen and (min-width:1000px) {
    .left-section{
        width: 30%;
    }
    .container .right-section{
        width: 70%;
    }

}
@media only screen and (max-width:678px) {
    .left-section{
        position: absolute;
        top: 200px;
        left: 0;
        z-index: 100;
        width: 100%;
        padding: 20px;
        text-align: center;
        color: white;
    }
    .container .right-section{
        width: 100%;
    }
    .right-section .details{
        justify-content: flex-start;

    }
    .right-section .details h2, .right-section .details h4{
        display: none;
    } 
    .left-section form{
        width: 85%;
    }
    .left-section form button{
        background-color: rgb(32, 29, 29);
        color: white;
        width: 100%;
    }
    .create-acc{
        border-color: white;
        color: white;
        width: 88%;
        margin: 10px;
    }

    


}
@media only screen and (max-height:600px) {
    .left-section{
        top:100px;
    }

}