@font-face {
    font-family: iransansdn;
    font-style: normal;
    font-weight: bold;
    src: url("../../fonts/iransans/iransansdnbold.woff") format("woff");
}

@font-face {
    font-family: iransansdn;
    font-style: normal;
    font-weight: 300;
    src: url("../../fonts/iransans/iransansdnlight.woff") format("woff");
}

@font-face {
    font-family: iransansdn;
    font-style: normal;
    font-weight: normal;
    src: url("../../fonts/iransans/iransansdn.woff") format("woff");
}

/*================================  Css Variable ==============================*/

:root {
    /*--------------------- Main Colors ---------------------*/
    --primaryColor: #b9a1f7;
    --secondColor: #4385bf;
    --fourthColor: #ebf2f2;
    /*----------------- BackGround Colors --------------------*/
    --grayBack: #fafafa;
    /*-----------------=---- Text Colors ---------------------*/
    --grayTextColor: #5d596c;
    --textColorL1: #21252b;
    --textColorL2: #353535;
    --textColorL3: #4b4b4b;
    /*-----------------=---- Border Colors ---------------------*/
    --borderColor: #cdcdcd;
    /*-----------------=---- Border Radius ---------------------*/
    --borderRadius: 0.5rem;
    /*-----------------=---- Transition ---------------------*/
    --baseTransition: all ease-in-out 300ms;
    /*--------------------- Text Shadow ---------------------*/
    --textShadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

body {
    font-family: iransansdn !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    background-size: cover;
    position: relative;
}

i {
    justify-content: center;
    align-items: center;
    line-height: 1;
    display: flex;
}

p {
    color: var(--grayTextColor);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.7;
}

p a {
    color: var(--secondColor);
    font-weight: 500;
}

p a:hover {
    color: var(--textColorL2);
}

a {
    transition: var(--baseTransition);
    color: var(--textColorL1);
    text-decoration: none;
}

a:hover {
    color: var(--primaryColor);
}

.flex {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

/*================================ Form And Inputs ==============================*/

.form-label {
    color: var(--textColorL2);
    margin-bottom: 0.25rem;
    font-size: 0.825rem;
}

input,
input.form-control,
textarea.form-control,
select.form-control,
textarea,
select {
    border: 0.06rem solid var(--borderColor);
    transition: var(--baseTransition);
    border-radius: var(--borderRadius);
    color: var(--textColorL2);
    background-color: #fff;
    line-height: 2.75rem;
    padding: 0.625rem;
    box-shadow: none;
    font-size: 1rem;
    height: 2.75rem;
    outline: none;
    width: 100%;
    margin: 0;
}

.default-input:has(i) input,
.default-input:has(i) input.form-control {
    padding-inline-start: 2rem;
}

select,
select.form-control {
    padding-inline-end: 2rem;
    -webkit-appearance: none;
    appearance: none;
}

.select-container {
    position: relative;
}

.select-container:has(select:focus)::after,
.select-container:has(select.form-control:focus)::after {
    transform: rotate(180deg);
    color: var(--secondColor);
}

.select-container::after {
    transition: var(--baseTransition);
    font-family: var(--fontIcons);
    color: var(--textColorL3);
    inset: 0 auto 0 0.25rem;
    justify-content: center;
    align-items: center;
    position: absolute;
    line-height: 32px;
    content: "\f078";
    font-size: 1rem;
    display: flex;
    margin: auto;
    height: 32px;
    z-index: 10;
    width: 32px;
}

textarea.form-control,
textarea {
    min-height: 9.375rem;
    min-width: 100%;
}

input:focus,
input:hover,
input.form-control:focus,
input.form-control:hover,
textarea.form-control:focus,
textarea.form-control:hover,
select.form-control:focus,
select.form-control:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
    border: 0.09rem solid var(--secondColor);
    background-color: #fff;
    box-shadow: none;
    outline: 0;
}

input:focus,
input.form-control:focus {
    padding-inline-start: 0.75rem;
}

input[type="file"] {
    padding: 0;
}

input[type="file"]::file-selector-button {
    background-color: var(--primaryColor);
    padding: 10px 20px;
    cursor: pointer;
    color: white;
    border: none;
}

.submit-form {
    all: unset;
    background-color: var(--textColorL1);
    transition: var(--baseTransition);
    justify-content: center;
    padding: 0.25rem 2rem;
    border-radius: 50rem;
    align-items: center;
    font-size: 1.125rem;
    color: #fff;
    display: flex;
    gap: 0.25rem;
}

.submit-form:hover {
    background-color: #101010;
}

.form-check-input:checked[type="radio"],
.form-check-input:checked[type="checkbox"] {
    background-color: var(--primaryColor);
    border-color: var(--secondColor);
}

.form-check-input[type="radio"]:focus,
.form-check-input[type="checkbox"]:focus {
    box-shadow: none;
    padding: 10px;
}

.captcha-input-box {
    position: relative;
}
.captcha-input-box input,
.captcha-input-box input.form-control {
    padding-inline-end: 82px;
    text-align: left;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.captcha-input-box .captcha_img {
    border-radius: 0.25rem;
    inset: 0 auto 0 2px;
    position: absolute;
    margin: auto;
    width: 80px;
}

/*================================ Button ==============================*/

@property --gradientColor1 {
    syntax: "<color>";
    initial-value: #4385bf;
    inherits: false;
}

@property --gradientColor2 {
    syntax: "<color>";
    initial-value: #b9a1f7;
    inherits: false;
}

.default-button {
    all: unset;
    background: linear-gradient(135deg, var(--gradientColor1), var(--gradientColor2));
    transition: var(--baseTransition), --gradientColor1 2s, --gradientColor2 2s;
    box-shadow: 0 -5px 20px 3px rgba(0, 0, 0, 0.15);
    font-size: clamp(0.875rem, 1.25vw, 0.9375rem);
    text-shadow: var(--textShadow);
    padding: 0.375rem 1.25rem;
    justify-content: center;
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 0.5rem;
    align-items: center;
    line-height: 40px;
    font-weight: 500;
    cursor: pointer;
    color: #fff;
    display: flex;
    height: 40px;
    opacity: 0.9;
    gap: 0.25rem;
}
.default-button i {
    font-size: 1.125rem;
}

.default-button:hover {
    --gradientColor1: #b9a1f7;
    --gradientColor2: #4385bf;
    color: #fff;
    opacity: 1;
}

/*================================ Login Page ==============================*/

.login-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.login-form {
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    max-width: 600px;
    display: flex;
    width: 100%;
    gap: 0.5rem;
}
.login-page::before {
    background: url("../img/hero-back.avif") no-repeat center;
    background-size: cover;
    position: absolute;
    opacity: 0.75;
    height: 100%;
    margin: auto;
    width: 100%;
    content: "";
    z-index: -1;
    inset: 0;
}
.logo-section{
    justify-content: flex-start;
    align-items: center;
    display: flex;
}
.login-form .logo-image {
    margin-bottom: 0.5rem;
    object-fit: contain;
    max-height: 100px;
    max-width: 200px;
    width: 100%;
}

.login-header .login-title {
    font-size: calc(1.2875rem + 0.45vw);
    color: var(--textColorL3);
}

.login-header p {
    color: var(--grayTextColor);
    text-align: justify;
    font-size: 1rem;
    margin: 0;
}

.login-form .form-label {
    color: var(--grayTextColor);
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.login-form .form-label.form-check-label {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    color: var(--textColorL3);
}

.login-slider {
    height: calc(100vh - 3rem);
    width: 100%;
}
.login-slider .swiper-slide {
    border-radius: 1.5rem;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.login-slider img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

@media (max-width: 992px) {
    .logo-section{
        /* justify-content: flex-end; */
    }
    .login-form {
        min-height: unset;
        padding-block: 2rem;
    }

    .login-slider {
        aspect-ratio: 1/1;
        height: auto;
        width: 100%;
    }
}
@media (max-width: 576px) {
    .d-flex-mobile
    {
        gap: 10px;
        display: flex;
    }
    .d-flex-mobile label
    {
        width: 100px;
        padding-top: 10px;
    }
    .d-flex-mobile input
    {
        text-align: center!important;
    }
    .d-flex-mobile .captcha-input-box
    {
        width: 100%
    }
    .d-flex-mobile .captcha-input-box input
    {
        text-align: center!important;
    }
    .login-form .logo-image
    {
        max-width: 170px;
        max-height: 50px;
    }
    .login-form
    {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}