@font-face {
    font-family: Yekan;
    src: url("../fonts/yb/Yekan\ Bakh\ EN\ 05\ Medium.ttf");
    font-weight: normal;
}

@font-face {
    font-family: VazirCodeX;
    src: url("../fonts/yb/Yekan\ Bakh\ EN\ 05\ Medium.ttf");
    font-weight: normal;
}

@font-face {
    font-family: Yekan-light;
    src: url("../fonts/yb/Yekan\ Bakh\ EN\ 05\ Medium.ttf");
    font-weight: normal;
}

@font-face {
    font-family: Yekan1;
    src: url("../fonts/yb/Yekan\ Bakh\ EN\ 07\ Heavy.ttf");
    font-weight: normal;
}

@font-face {
    font-family: Yekan-bold;
    src: url("../fonts/yb/Yekan\ Bakh\ EN\ 06\ Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: Vazir;
    src: url("../fonts/Vazir-Light.eot");
    src: url("../fonts/Vazir-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Vazir-Light.woff2") format("woff2"), url("../fonts/Vazir-Light.woff") format("woff"), url("../fonts/Vazir-Light.ttf") format("truetype");
    font-weight: 300;
}

body {
    font-family: "Yekan", sans-serif !important;
    background: #f6fafd;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Yekan", sans-serif !important;
}


/* auth-div */

@media (min-width: 991px) {
    .auth-div {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .auth-box {
        width: 100%;
        background-color: #fff;
        padding: 20px;
        border-radius: 16px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px;
        border-top: 5px solid #550b14;
    }
    .auth-box h1 {
        font-size: 25px;
        font-family: "Yekan1" !important;
        text-align: center;
    }
    .auth-box .form-input {
        position: relative;
        width: 100%;
        margin-top: 30px;
    }
    .auth-box .form-input .toggle-password {
        position: absolute;
        bottom: 12px;
        left: 12px;
        cursor: pointer;
    }
    .auth-box .form-input label {
        font-size: 14px;
        position: absolute;
        background-color: #fff;
        padding: 0px 4px;
        right: 20px;
        top: -10px;
    }
    .auth-box .form-input input {
        width: 100%;
        height: 40px;
        border: 1px solid rgb(58, 58, 58);
        border-radius: 35px;
        padding-right: 15px;
    }
    .auth-box .form-input button {
        width: 100%;
        height: 40px;
        border-radius: 35px;
        background-color: #550b14;
        color: #fff;
        border: none;
    }
    .auth-box .btn-outline {
        width: 100%;
        height: 40px;
        border-radius: 35px;
        color: #550b14;
        border: none;
        border: 1px solid #550b14;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .auth-div {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .auth-box {
        width: 100%;
        background-color: #fff;
        padding: 20px;
        border-radius: 16px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px;
        border-top: 5px solid #550b14;
    }
    .auth-box h1 {
        font-size: 25px;
        font-family: "Yekan1" !important;
        text-align: center;
    }
    .auth-box .form-input {
        position: relative;
        width: 100%;
        margin-top: 30px;
    }
    .auth-box .form-input .toggle-password {
        position: absolute;
        bottom: 12px;
        left: 12px;
        cursor: pointer;
    }
    .auth-box .form-input label {
        font-size: 14px;
        position: absolute;
        background-color: #fff;
        padding: 0px 4px;
        right: 20px;
        top: -10px;
    }
    .auth-box .form-input input {
        width: 100%;
        height: 40px;
        border: 1px solid rgb(58, 58, 58);
        border-radius: 35px;
        padding-right: 15px;
    }
    .auth-box .form-input button {
        width: 100%;
        height: 40px;
        border-radius: 35px;
        background-color: #550b14;
        color: #fff;
        border: none;
    }
    .auth-box .btn-outline {
        width: 100%;
        height: 40px;
        border-radius: 35px;
        color: #550b14;
        border: none;
        border: 1px solid #550b14;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.invalid-feedback {
    font-size: 12px;
    display: block;
    color: red;
}