:root {
    --red: #ff3838;
    --blue: #1494a9;
    --black: #000000;
    --white: #ffffff;
    --green: #11b76b;
    --gray-1: #fafcff;
    --gray-2: #f5f5f5;
    --gray-3: #ececec;
    --purple: #b12fad;
    --orange: #e86121;
    --yellow: #ffb100;
    --indigo: #6610f2;
    --body: #f8f7f6;
    --line: #E6E6E6;
    --border: #E3E2E1;
    /*--primary: #FA5E01;*/
    --primary: #2a398a;
    --secondary: #0C1028;
    --text-black: #41403F;
    --text-slate: #ECECEC;
    --primary-slate: #FFF9F5;
    --facebook: #3b5998;
    --linkedin: #0e76a8;
    --twitter: #00acee;
    --google: #E60023;
    --instagram: #F77737;
    --whatsapp: #25D366;
    --pinterest: #f0002a;
    --youtube: #FF0000;
}

.login {
    width: 100%;
    max-width: 933px;
    border-radius: 4px;
    overflow: hidden;
    margin: 80px auto;
    background-color: var(--white);
}

@media (max-width: 767px) {
    .login {
        margin: 60px auto;
    }
}

.login-group {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.login-content {
    width: 482px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 32px;
}

@media (max-width: 991px) {
    .login-content {
        width: 450px;
    }
}

@media (max-width: 767px) {
    .login-content {
        width: 100%;
    }
}

.login-content a {
    margin-bottom: 30px;
}

.login-content a img {
    width: 160px;
}

.login-content h3 {
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .login-content h3 {
        font-size: 25px;
    }
}

.login-content p {
    font-size: 16px;
    color: #7A6F69;
    margin-bottom: 30px;
}

.login-content h4 {
    font-size: 18px;
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .login-content h4 {
        font-size: 16px;
    }
}

.login-content nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
}

.login-content nav button {
    font-size: 18px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white);
}

@media (max-width: 575px) {
    .login-content nav button {
        font-size: 14px;
    }
}

.login-content nav button:nth-child(1) {
    background-color: #008BF0;
}

.login-content nav button:nth-child(2) {
    background-color: #00B2D9;
}

.login-content nav button:nth-child(3) {
    background-color: #7A4BFF;
}

.login-content nav button:nth-child(4) {
    background-color: #00BC29;
}

.login-content nav button:nth-child(5) {
    background-color: #FF7624;
}

.login-content nav button:nth-child(6) {
    background-color: #A55FFF;
}

.login-content nav button:nth-child(7) {
    background-color: #FF5391;
}

.login-form {
    margin-bottom: 30px;
}

.login-form button {
    width: 100%;
    margin-top: 10px;
}

.login-banner {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    position: relative;
}

@media (max-width: 767px) {
    .login-banner {
        display: none;
    }
}

.login-banner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.login-banner div {
    position: absolute;
    width: 80%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 50px;
    padding: 20px;
    background: linear-gradient(113deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.login-banner blockquote {
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .login-banner blockquote {
        font-size: 18px;
    }
}

.login-banner label {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 991px) {
    .login-banner label {
        font-size: 14px;
    }
}

.alertClose {
    width: 20px !important;
}

.alert {
    padding: 10px 10px 10px 10px;
}

.alert-dismissible .btn-close {
    padding: 5px;
}

.forgotPass {
    color: #0C1028;
    text-decoration: underline;
}


.forgotPass:hover {
    color: #0C1028;
    text-decoration: underline;
}

.btn-close:focus {
    box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0);
}