@font-face {
    font-family: "Commuters Sans";
    src: url("../../fonts/Commuter/fonnts.com-Commuters_Sans_Regular.otf")
        format("opentype");
    unicode-range: U+0000-00FF;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "ABC Diatype";
    src: url("../../fonts/abc/ABC-Diatype-regular.ttf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: "Commuters Sans", sans-serif;
    font-style: normal;
    color: #fff;
    background-color: #f5f5f5;
    letter-spacing: 0em;
}

.container-fluid {
    padding-left: 40px;
    padding-right: 40px;
}

.alert .close {
    color: #000;
    opacity: 0.2;
}

.close {
    cursor: pointer;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}

   .form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: none !important;
    padding-right: .75rem !important; 
}

@media screen and (max-width: 768px) {
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.half {
    display: flex;
    width: 100vw; /* ensure it takes full width */
    height: 100vh;
    overflow: hidden;
}

.half .bg,
.half .contents {
    width: 50%;
}

@media (max-width: 991.98px) {
    .half .bg,
    .half .contents {
        width: 100%;
    }

    .container.bg-black {
        max-width: 100%;
    }
}

/* Optional: Ensures the container fills vertical space nicely */
@media (max-width: 992px) {
    .half,
    .half .container > .row {
        min-height: 80vh;
        height: auto;
    }
}

.half .bg {
    position: relative;
    overflow: hidden;
}

.bg-video {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.login-div {
    background: #fafafa;
}
.login-div .login-div-header {
    color: #000;
    font-family: "Commuters Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 31.76px;
    letter-spacing: 0%;
    margin-bottom: 64px;
}
.login-div .form-group label {
    color: rgba(0, 0, 0, 1);
    font-weight: 400;
    font-size: 16px;
    line-height: 34.01px;
    letter-spacing: 0%;
    font-style: normal;
    font-family: "Commuters Sans", sans-serif;
}

.login-div .form-group .form-control {
    background-color: #fafafa;
    border: 1px solid #00000066;
    border-radius: 10px;
    color: #000000;
    padding: 15px 24px;
    font-family: "Commuters Sans", sans-serif;
}

.login-div .form-group .form-control::placeholder {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    font-family: "Commuters Sans", sans-serif;
    font-style: normal;
}

.half .forgot-pass {
    color: rgba(0, 0, 0, 0.4) !important;

    margin-top: 35px !important;
    
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}
.half .register-button
{

font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 0%;
color: rgba(0, 0, 0, 1) !important;
 margin-left: auto;
    margin-right: auto;    
    margin-bottom: 30px;
    margin-top: 70px;
    position: relative;

}

.forgot-pass-div {
    margin-top: 20px;
}

@media (max-width: 991.98px) {
    .half {
        flex-direction: column !important;
    }

    .half .bg {
        height: 250px; /* adjust to fit small screen */
        width: 100%;
        position: relative;
    }

    .half .contents {
        width: 100%;
        padding: 30px 15px;
    }

    .bg-video {
        object-fit: cover;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .login-div {
        padding: 20px;
    }

    .forgot-pass-div {
        margin-bottom: 20px;
    }
}

@media (max-height: 700px) {
    .login-div {
        overflow-y: auto;
    }
}

 .gradient-btn {
            background: rgba(0, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
            border: 0.69px solid rgba(0, 0, 0, 1);
            transition: background 0.3s ease;
            border-radius: 8px;
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;

        }

        .gradient-btn:hover {
            color: #000000;
            border: 1px solid #000000;
            background: #fff;
        }

        @media (max-width: 1500px) {
            .gradient-btn {
                font-size: 15px;
            }
        }