/********************** CSS Reset *********************/

html,

body,

div,

span,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

abbr,

address,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

samp,

small,

strong,

sub,

sup,

var,

b,

i,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

sidebar,

canvas,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section,

summary,

time,

mark,

audio,

video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}



body {

    line-height: 1;

}



article,

sidebar,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

    display: block;

}



ul {

    list-style: none;

}



blockquote,

q {

    quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

    content: none;

}



a {

    margin: 0;

    padding: 0;

    font-size: 100%;

    color: inherit;

    vertical-align: baseline;

    text-decoration: none;

}



del {

    text-decoration: line-through;

}



hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}



input,

select {

    vertical-align: middle;

}



* {

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

}



:focus {

    outline: 0;

}



html {

    scroll-behavior: smooth;

}



iframe {

    max-width: 100%;

}



/******************************************** Overal Styles *******************************************/

/********************** Fonts *********************/

@font-face {

    font-family: 'YekanBakhFaNum-VF';

    src: url('../fonts/YekanBakhFaNum-VF.woff2') format('woff2-variations');

    font-weight: 100 1000;

    font-display: swap;

}



/********************** Variables *********************/

:root {

    --white: #fff;

    --black: #0D1922;

    --body: #f1f1f1;

    --header: rgba(0, 0, 0, 0.4);

    --primary-text-color: #777777;

    --secondary--text-color: #979797;

    /*rgba(14,66,138,1)*/

    --primary-color: #0E428A;

    /*rgba(0,171,201,1)*/

    --secondary-color: #00ABC9;

    /*rgba(255,128,49,1)*/

    --tertiary-color: #FF8031;

    --box-shadow: 6px 6px 3px 0px rgba(235, 235, 235, 0.9);

    --transparent: transparent;

    --YekanBakh: 'YekanBakhFaNum-VF', tahoma;

    --fontWeight200: "wght" 200, "dots" 1;

    --fontWeight300: "wght" 300, "dots" 1;

    --fontWeight400: "wght" 400, "dots" 1;

    --fontWeight500: "wght" 500, "dots" 1;

    --fontWeight600: "wght" 600, "dots" 1;

    --fontWeight700: "wght" 700, "dots" 1;

    --fontWeight800: "wght" 800, "dots" 1;

    --fontWeight900: "wght" 900, "dots" 1;

    --title-huge: 32px;

    --title-big: 26px;

    --title-regular: 20px;

    --title-small: 16px;

    --paragraph-big: 14px;

    --paragraph-regular: 14px;

    --paragraph-small: 12px;

    --header-height: 78px;

    --footer-height: 52px;

}



/********************** Overal CSS *********************/

.container {

    max-width: 100%;

    padding-right: 15px;

    padding-left: 15px;

    margin-right: auto;

    margin-left: auto;

}



body {

    direction: rtl;

    width: 100%;

    background: var(--white);

    color: var(--primary-text-color);

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-regular);

    line-height: 30px;

    word-spacing: -2px;

}



body.menu-open {

    overflow: hidden;

}



body.menu-open::after {

    content: "";

    background: rgba(0, 0, 0, 0.1);

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 98;

    transition: 0.3s all;

}



p {

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-regular);

    color: var(--black);

}



a {

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-regular);

    text-decoration: none;

    color: var(--black);

}



ol,

ul {

    padding-right: 20px;

    padding-left: 20px;

}



.content h1,

.content h2,

.content h3,

.content h4,

.content h5 {

    margin-bottom: 20px;

    font-family: var(--YekanBakh);

    font-variation-settings: var(--fontWeight700);

    font-weight: 700;

    line-height: 40px;

    color: var(--black);

}



.content h1 {

    font-size: var(--title-big);

}



.content h2 {

    font-size: var(--title-regular);

}



.content h3 {

    font-size: var(--title-small);

}



.content h4 {

    font-size: var(--paragraph-big);

}



.content p {

    margin-bottom: 10px;

    font-size: var(--paragraph-regular);

    line-height: 30px;

    color: var(--black);

}



.content a {

    color: var(--secondary-color);

}



input[type=search]::-ms-clear,

input[type=search]::-moz-clear {

    display: none;

    width: 0;

    height: 0;

}



input[type=search]::-ms-reveal {

    display: none;

    width: 0;

    height: 0;

}



input[type=search]::-webkit-search-decoration,

input[type=search]::-webkit-search-cancel-button,

input[type=search]::-webkit-search-results-button,

input[type=search]::-webkit-search-results-decoration {

    display: none;

}



[type=button]:not(:disabled),

[type=reset]:not(:disabled),

[type=submit]:not(:disabled),

button:not(:disabled) {

    cursor: pointer;

}



.transparent-highlight {

    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



.w-100 {

    width: 100%;

}



.mw-150 {

    max-width: 150px;

}

.mw-200 {

    max-width: 200px;

}


.margin-bottom--primary {

    margin-bottom: 30px;

}



.margin-bottom--secondary {

    margin-bottom: 60px;

}



.mb-20 {

    margin-bottom: 20px;

}



.mb-30 {

    margin-bottom: 30px;

}



.mb-40 {

    margin-bottom: 40px;

}



.mt-20 {

    margin-top: 20px;

}



.margin-main {

    margin-top: 30px;

    margin-bottom: 100px;

}



.text-center {

    text-align: center;

}



.two-col {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}



.two-col .col {

    width: 100%;

}



.col:not(:last-child) {

    margin-bottom: 0 !important;

}



.d-flex {

    display: flex;

}



.flex-wrap {

    flex-wrap: wrap;

}



.flex-column {

    flex-direction: column;

}



.align-items-center {

    align-items: center;

}



.align-self-end {

    align-items: end;

}



.justify-content-center {

    justify-content: center;

}



.justify-content-between {

    justify-content: space-between;

}



.gap-5 {

    gap: 5px;

}



.gap-10 {

    gap: 10px;

}



.gap-20 {

    gap: 20px;

}



.gap-30 {

    gap: 30px;

}



.gap-40 {

    gap: 40px;

}



.width-350 {

    width: 100%;

    max-width: 350px;

}



.bg-primary {

    background-color: var(--primary-color);

}



.bg-secondary {

    background-color: var(--secondary-color);

}



.bg-tertiary {

    background-color: var(--tertiary-color);

}



.text-black {

    color: var(--black);

}



.text-white {

    color: var(--white);

}



.btn-primary {

    background: var(--secondary-color);

    border: 0;

    border-radius: 30px;

    padding: 5px 30px;

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 32px;

    font-variation-settings: var(--fontWeight400);

    font-weight: 400;

    color: var(--white);

}



.btn-black {

    background: var(--black);

    border: 0;

    border-radius: 30px;

    padding: 5px 30px;

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 32px;

    font-variation-settings: var(--fontWeight400);

    font-weight: 400;

    color: var(--white);

}



.page-title__right {

    padding-right: 40px;

    font-family: var(--YekanBakh);

    font-size: var(--title-big);

    line-height: 50px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--tertiary-color);

    position: relative;

}



.page-title__right::before {

    content: "";

    position: absolute;

    top: 12px;

    right: 0px;

    width: 31px;

    height: 26px;

    background: url(../images/Layer-8.png) no-repeat center;

    line-height: 50px;

}



.page-title {

    text-align: center;

    position: relative;

}



.page-title__text {

    padding: 0;

    font-family: var(--YekanBakh);

    font-size: var(--title-big);

    line-height: 50px;

    font-variation-settings: var(--fontWeight900);

    font-weight: 900;

    color: var(--primary-text-color);

    display: inline-block;

    position: relative;

}

.page-title__text--secondary {
    margin-top: 30px;

    font-family: var(--YekanBakh);

    font-size: var(--title-big);

    line-height: 40px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--secondary-color);

    display: block;

    position: relative;

    text-align: center;
}

.referral__form--wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
}

.form-control {

    text-align: center;

    width: 100%;

}

.form-control--textarea {
    grid-column: 1/-1;
}

.referral__from--submit {
    grid-column: 1/-1;
    justify-self: center;
}

.form-control__label {

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 32px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--black);

    display: block;

}



.form-control__input {

    width: 100%;

    margin: 0 auto;

    padding: 10px 20px;

    background: #f0f0f0;

    font-family: var(--YekanBakh) !important;

    font-size: var(--paragraph-big);

    line-height: 30px;

    border: 1px solid var(--secondary--text-color);

    border-radius: 30px;

}



.recover-password {

    font-family: var(--YekanBakh);

    font-size: 14px;

    color: var(--secondary--text-color);

    background: none;

    border: 0;

}



.form-submit__panel {}



/********************** Header *********************/

.main-menu {

    padding: 20px 0;

}



.main-menu__wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

}



.header-logo {

    display: block;

    width: 160px;

    height: 38px;

}



.header-left {

    display: flex;

    align-items: center;

    gap: 10px;

}

.header-left__new {
    padding: 5px 15px;
    background: #4caf50;
    font-family: var(--YekanBakh);
    font-size: 16px;
    line-height: 26px;
    color: white;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}


.header-user {

    display: flex;

    align-items: center;

    gap: 5px;

}



.header-user__name {

    font-family: var(--YekanBakh);

    font-size: 12px;

    line-height: 26px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--secondary--text-color);

}



.header-sign {

    display: block;

    width: 30px;

    height: 30px;

}

.header-bell {
    display: block;

    width: 30px;

    height: 30px;
    position: relative;
}
.header-bell__number {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: rgb(211, 20, 20);
    border-radius: 50%;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: var(--white);
}
.header-left__icon {

    width: 30px;

    height: 30px;

}



/********************** Main *********************/

main {}



.customer-exist__text {

    font-family: var(--YekanBakh);

    font-size: var(--title-big);

    line-height: 32px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    text-align: center;

    color: var(--white);

}



#modal-phone-number {

    word-spacing: 0;

    letter-spacing: 3px;

}



#phone-modal,
#trip-details {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 100;

}



.phone-modal__wrapper {

    max-width: 95%;

    width: 992px;

    padding: 35px 20px 20px;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    padding: 30px;

    background: var(--tertiary-color);

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 1;

    overflow: hidden;

}

.trip-details__wrapper {

    max-width: 95%;

    width: 992px;

    padding: 60px 20px 20px !important;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    padding: 30px;

    background: var(--white);

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 1;

    overflow: hidden;

}

.phone-modal__close,
.trip-details__close {

    width: 40px;

    height: 40px;

    border-bottom-left-radius: 8px;

    background: var(--primary-color);

    font-size: 30px;

    line-height: 40px;

    text-align: center;

    color: var(--white);

    position: absolute;

    top: -1px;

    right: -1px;

    cursor: pointer;

}

.trip-details__table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    direction: rtl;
}

.trip-details__table:not(:last-child) {
    margin-bottom: 20px;
}

.trip-details__table thead {
    background: var(--primary-color);
    font-size: 16px;
    color: var(--white);
}

.trip-details__table tr {
    font-size: 16px;
    text-align: center;
}

.trip-details__table td {
    padding: 5px;
}

.trip-details__table button {
    margin: 0 auto;
    padding: 3px 10px;
    background: #4caf50;
    font-family: var(--YekanBakh);
    font-size: 14px;
    line-height: 26px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

/********************** user profile *********************/

.customer-profile__wrapper {

    display: grid;

    grid-template-columns: 1fr;

    gap: 40px;

}

.customer-profile__header {

    display: grid;

    grid-template-columns: 1fr;

    align-items: start;

    gap: 20px 40px;

}

.customer-profile__header--item {

    padding: 5px 20px;

    border-radius: 10px;

}

.customer-profile__header--item-two {

    display: grid;

    grid-template-columns: 1fr;

}



.customer-profile__header--text,

.wallet-amount {

    font-family: var(--YekanBakh);

    font-size: var(--title-small);

    letter-spacing: 2px;

    line-height: 34px;

    text-align: end;

    color: var(--white);

}



.customer-profile__new-buy {

    display: flex;

    flex-wrap: wrap;

    justify-content: end;

    align-items: center;

    gap: 20px;

    text-align: center;

}



.customer-profile__new-buy--link {

    width: 100%;

    height: 100%;

    padding: 5px 20px;

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 34px;

    color: var(--white);

    background: var(--secondary-color);

    border: 0;

    border-radius: 10px;

    display: block;

}



.customer-profile__box {

    padding: 20px;

    background: #f7f7f7;

    border: 1px solid #d5d5d5;

    border-radius: 10px;

}



.customer-profile__box--payable {
    background: #f8d7da;
}



.customer-profile__box--cash {

    background: #d4edda;

}



.customer-profile__box:not(:last-child) {

    margin-bottom: 20px;

}



.customer-profile-info__link {

    font-family: var(--YekanBakh);

    font-size: 16px;

    line-height: 34px;

    color: var(--white);

}



.customer-profile-info__item {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

}

.customer-profile__box .customer-profile-info__item div {
    font-size: 18px;
}

.customer-profile-info__item:not(:last-child) {

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid #d5d5d5;

}



.customer-profile-info__item--textarea {

    flex-direction: column;

    justify-content: start;

    align-items: start;

}



.customer-profile-info__item--textarea .customer-profile-info__title {

    margin-bottom: 10px;

}



.customer-profile-info__item--textarea .customer-profile-info__input {

    width: 85%;

    margin-right: auto;

}



.customer-profile__radio {

    width: 30px;

    height: 30px;

    border: 1px solid #d5d5d5;

}



.customer-profile__radio:checked+label {

    color: #0075ff;

}



.customer-profile-info__title {

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 26px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--black);

}
.customer-profile-info__title--text{
    font-family: var(--YekanBakh);
    font-size: var(--paragraph-big);
    line-height: 26px;
    color: var(--tertiary-color);
    font-variation-settings: var(--fontWeight700);
    font-weight: 700;
}


.customer-profile-info__btn {

    background: none;

    border: 0;

    padding: 0;

}



.customer-profile-info__cancel,

.customer-profile-info__save {

    display: none;

}



.customer-profile-info__input {

    width: 180px;

    padding: 5px 10px;

    background: #fff;

    border: 1px solid #bbb;

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 26px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--secondary--text-color);

    border-radius: 10px;
    box-shadow: inset 2px 2px 4px #ccc;

}



.customer-profile-info__input.text-black {

    color: var(--black);

}



.customer-profile-info__input-focus {

    color: var(--black);

}

.customer-profile__edit {

    padding: 5px 15px;

    background: #4caf50;

    border: 0;

    border-radius: 8px;

    font-family: var(--YekanBakh);

    line-height: 26px;

    font-variation-settings: var(--fontWeight500);

    font-size: 16px;

    color: var(--white);

    display: flex;

    justify-self: end;

}

.repeater__wrapper {}



.repeater__item {

    padding: 10px;

    border: 1px solid #d5d5d5;

    border-radius: 30px;

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 30px;

    align-items: center;

    gap: 5px;

}

.repeater__item:not(:last-child) {

    margin-bottom: 10px;

}

.repeater__item--label {

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 26px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--black);

    display: flex;

    align-items: center;

    gap: 5px;

}

.repeater__item input {

    width: 100%;

    padding: 8px;

    border: 1px solid #bbb;

    border-radius: 4px;

}



.remove-btn {

    width: 30px;

    height: 30px;

    font-size: 22px;

    line-height: 20px;

    text-align: center;

    background: #d9534f;

    color: var(--white);

    border: none;

    padding: 5px 10px;

    border-radius: 100%;

    cursor: pointer;

}



.repeater__add-item-btn {

    display: block;

    background: #5cb85c;

    font-family: var(--YekanBakh);

    color: var(--white);

    border: none;

    padding: 10px 16px;

    border-radius: 6px;

    cursor: pointer;

    margin-top: 20px;

}



.customer-profile-history__item {

    display: flex;

    align-items: center;

    gap: 5px;

}



.customer-profile-history__item:not(:last-child) {

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid #d5d5d5;

}



.customer-profile-history__item--text {

    font-family: var(--YekanBakh);

    font-size: 16px;

    line-height: 36px;

    font-variation-settings: var(--fontWeight400);

    font-weight: 400;

    color: var(--black);

}



.customer-profile-history__item--number {

    width: 30px;

    background: var(--tertiary-color);

    border-radius: 50%;

    line-height: 30px;

    color: var(--white);

    text-align: center;

}



#customer-profile-birth-day {
    width: 60px;
}



#customer-profile-birth-month {

    width: 150px;

}

.customer-profile-history__item--more {
    margin-right: auto;
    padding: 5px 15px;
    background: #4caf50;
    font-family: var(--YekanBakh);
    font-size: 16px;
    line-height: 26px;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}


/********************** customer-sex *********************/

.customer-sex__box {

    display: flex;

    align-items: center;

    border: 1px solid #d5d5d5;

    border-radius: 10px;

    overflow: hidden;

}



.customer-sex__label {

    width: 50%;

    cursor: pointer;

}



.customer-sex__input {

    display: none;

}



#customer-sex-female-image,

#customer-sex-male-image {

    width: 100%;

    height: 78px;

    position: relative;

    transition: 0.6s all;

}



#customer-sex-female-image::before {

    content: "";

    width: 50px;

    height: 50px;

    mask: url("../images/female-image.svg") no-repeat center / contain;

    -webkit-mask: url("../images/female-image.svg") no-repeat center / contain;

    background-color: #cbcbcb;

    position: absolute;

    inset: 50%;

    transform: translate(50%, -50%);

}



#customer-sex-male-image::before {

    content: "";

    width: 50px;

    height: 50px;

    mask: url("../images/male-image.svg") no-repeat center / contain;

    -webkit-mask: url("../images/male-image.svg") no-repeat center / contain;

    background-color: #cbcbcb;

    position: absolute;

    inset: 50%;

    transform: translate(50%, -50%);

}



.customer-sex .customer-sex__box .customer-sex__label:first-child .customer-sex__image-wrapper {

    background: var(--secondary-color);

}



.customer-sex .customer-sex__box .customer-sex__label:first-child #customer-sex-female-image::before {

    background-color: var(--white);

}



.customer-sex #customer-sex-male:checked~.customer-sex__box .customer-sex__label #customer-sex-female-image {

    background: #f7f7f7;

}



.customer-sex #customer-sex-male:checked~.customer-sex__box .customer-sex__label #customer-sex-female-image::before {

    background-color: #cbcbcb;

}



.customer-sex #customer-sex-male:checked~.customer-sex__box .customer-sex__label #customer-sex-male-image {

    background: var(--secondary-color);

}



.customer-sex #customer-sex-male:checked~.customer-sex__box .customer-sex__label #customer-sex-male-image::before {

    background-color: var(--white);

}



.customer-sex #customer-sex-male:checked~.customer-sex__box .customer-sex__label #customer-sex-male-image::before {

    background-color: var(--white);

}



.customer-sex #customer-sex-female:checked~.customer-sex__box .customer-sex__label #customer-sex-female-image {

    background: var(--secondary-color);

}



.customer-sex #customer-sex-female:checked~.customer-sex__box .customer-sex__label #customer-sex-male-image {

    background: #f7f7f7;

}



.customer-sex #customer-sex-female:checked~.customer-sex__box .customer-sex__label #customer-sex-female-image::before {

    background-color: var(--white);

}



/********************** customer-profile__section *********************/

.customer-profile__section--title {

    height: 78px;

    padding-right: 40px;

    font-family: var(--YekanBakh);

    font-size: var(--title-regular);

    font-variation-settings: var(--fontWeight700);

    font-weight: 700;

    color: #777777;

    position: relative;

    display: flex;

    justify-content: start;

    align-items: center;

}

.customer-profile__section--title:before {

    content: "";

    width: 26px;

    height: 19px;

    background: url("../images/angle-down.png") no-repeat center / contain;

    position: absolute;

    top: 50%;

    right: 0;

    transform: translate(0, -50%);

}



.customer-profile__radio--wrapper {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    justify-content: start;

    align-items: center;

    gap: 20px;

}



.customer-profile__radio--item {}



.customer-profile__section--input {

    display: none;

}



.customer-profile__section--label {

    height: 78px;

    padding: 10px 27px;

    background: #f7f7f7;

    border: 1px solid #d5d5d5;

    border-radius: 10px;

    font-family: var(--YekanBakh);

    font-size: var(--paragraph-big);

    line-height: 26px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--black);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: 0.4s all;
    
}

.customer-profile__section--input:checked+.customer-profile__section--label {
    background: var(--secondary-color);
    color: var(--white);
    border: var(--secondary-color);
}

/********************** date-picker *********************/

.date-picker__open {
    margin-right: auto;
    margin-left: 3px;
    display: inline-block;
    line-height: 25px;
    height: 25px;
}

.date-picker {

    background: var(--white);

    position: relative;

    display: inline-block;

    border-radius: 8px;

}

.jalali-date-input {

    width: 100%;

    border: 0;

    font-family: var(--YekanBakh);

    font-size: 14px;

    text-align: center;

    cursor: pointer;
}



.date-picker-calendar {

    padding: 10px;

    background: var(--white);

    border: 1px solid #d5d5d5;

    border-radius: 8px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

    position: absolute;

    bottom: 60px;

    left: 0;

    display: none;

    z-index: 100;

}



.date-picker__navigation {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}



.date-picker__navigation button {

    padding: 5px 10px;

    background-color: var(--primary-color);

    font-family: var(--YekanBakh);

    color: white;

    border: none;

    cursor: pointer;

    border-radius: 3px;

}



.date-picker__navigation button:hover {

    background-color: var(--primary-color);

}



.date-picker__day-headers,

.date-picker__days {

    display: grid;

    grid-template-columns: repeat(7, 30px);

    gap: 5px;

}



.date-picker__day-headers {

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px dotted #ccc;

}



.date-picker__day-header {

    font-weight: 700;

    font-variation-settings: var(--fontWeight700);

    text-align: center;

    line-height: 15px;

    color: #666;

}



.date-picker__day {

    font-family: var(--YekanBakh);

    font-weight: 400;

    font-variation-settings: var(--fontWeight400);

    line-height: 20px;

    font-size: 16px;

    padding: 5px;

    cursor: pointer;

    background-color: #f0f0f0;

    border: none;

    border-radius: 3px;

    text-align: center;

}



.date-picker__day:hover {

    background-color: #e0e0e0;

}



.date-picker__day:active {

    background-color: #ccc;

}



.date-picker__empty-day {

    visibility: hidden;

}



.date-picker__month-wrapper {

    height: 244px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    overflow-y: hidden;

}



.date-picker__month-title {

    font-weight: bold;

    text-align: center;

    margin-bottom: 5px;

}



.date-picker__today {

    background-color: var(--primary-color);

    color: white;

}



.date-picker__past-day {

    color: #999;

    cursor: not-allowed;

    opacity: 0.5;

}



.date-picker__selected {

    background-color: #4caf50;

    color: white;

}



/********************** referral *********************/

.referral {

    max-width: 95%;

    width: 992px;

    margin-right: auto;

    margin-left: auto;

    padding: 30px;

    background: #333333;

    border-radius: 10px;

}



.referral__title {

    padding: 5px 40px;

    background: var(--tertiary-color);

    border-radius: 10px;

    font-size: 16px;

    font-variation-settings: var(--fontWeight500);

    font-weight: 500;

    color: var(--white);

}



.form-textarea {

    width: 100%;

    padding: 10px;

    border-radius: 16px;

    font-family: var(--YekanBakh);

    font-size: 16px;

    line-height: 26px;

    color: var(--black);

}



/********************** user login *********************/

.login-note {

    background: var(--white);

}



.login-note__title {

    padding-right: 30px;

    font-family: var(--YekanBakh);

    font-size: 20px;

    font-variation-settings: var(--fontWeight700);

    font-weight: 700;

    color: var(--black);

    position: relative;

}



.login-note__title::before {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    width: 25px;

    height: 25px;

    background: url(../images/Layer-4.png) no-repeat center / contain;

    border-radius: 50%;

}



.login-note__item {

    font-family: var(--YekanBakh);

    font-size: 14px;

    font-variation-settings: var(--fontWeight400);

    font-weight: 400;

    color: var(--primary-text-color);

}



.login-note__item:not(:last-child) {

    margin-bottom: 10px;

}



/********************** user panel *********************/

.user-panel {

    display: grid;

    grid-template-columns: 1fr;

    gap: 40px;

}



.user-panel__tab {

    width: 100%;

    background: var(--secondary-color);

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    align-items: center;

    justify-content: center;

    gap: 10px;

    position: fixed;

    bottom: 52px;

    right: 0;

    left: 0;

}



.user-panel__tab--button {

    padding: 10px;

    background: transparent;

    border: 0;

    font-family: var(--YekanBakh);

    font-size: 16px;

    line-height: 30px;

    text-align: start;

    color: var(--white);

    text-align: center;

    transition: 0.6s all;

}

.user-panel__tab--button a{
    font-family: var(--YekanBakh);

    font-size: 16px;

    line-height: 30px;

    color: var(--white);
}

.user-panel__tab--button:not(:last-child) {

    border-left: 1px solid #ccc;

}



.user-panel__tab--button.active .user-panel__tab--button.active a{

    color: var(--tertiary-color);

}



.user-panel__content--pane {

    padding: 40px;

    border: 1px solid #d5d5d5;

    border-radius: 10px;

    box-shadow: var(--box-shadow);

}



.user-panel__content--pane {

    display: none;

}



.user-panel__content--pane.active {

    display: block;

}



.profile-form__grid {

    display: grid;

    grid-template-columns: 1fr;

    justify-content: center;

    align-items: center;

    gap: 10px;

}



.form-submit__panel {

    margin-top: 20px;

    margin-right: auto;

}



/********************** Footer *********************/

footer {

    background: var(--tertiary-color);

    position: fixed;

    right: 0;

    bottom: 0;

    left: 0;

}



.footer__wrapper {

    padding: 10px 20px;

    text-align: center;

}



.footer__text {

    font-family: var(--YekanBakh);

    font-size: 16px;

    line-height: 32px;

    font-variation-settings: var(--fontWeight400);

    font-weight: 400;

    color: var(--white);

}



@media only screen and (min-width: 360px) {

    .main-menu__wrapper {

        justify-content: space-between;

    }

}



@media only screen and (min-width: 576px) {

    :root {

        --header-height: 94px;

    }



    .container {

        max-width: 540px;

    }



    body {

        font-size: 14px;

        line-height: 26px;

    }



    body.menu-open {

        overflow: auto;

    }



    body.menu-open::after {

        background: transparent;

        z-index: 0;

    }



    .header-logo {

        width: 220px;

        height: 54px;

    }



    .page-title__text {

        padding: 0 20px;

        font-size: var(--title-huge);

    }



    .page-title__text::before {

        content: "[";

        right: 0px;

        text-align: start;

    }



    .page-title__text::after {

        content: "]";

        left: 0px;

        text-align: end;

    }



    .page-title__text::before,

    .page-title__text::after {

        width: 20px;

        position: absolute;

        top: 5px;

        font-family: var(--YekanBakh);

        font-size: var(--title-huge);

        font-variation-settings: var(--fontWeight300);

        font-weight: 300;

        color: var(--secondary-color);

    }

}



@media only screen and (min-width: 768px) {

    :root {

        --header-height: 100px;

    }



    .container {

        max-width: 720px;

    }



    .margin-bottom--primary {

        margin-bottom: 60px;

    }



    .margin-bottom--secondary {

        margin-bottom: 90px;

    }



    .header-logo {

        width: 240px;

        height: 60px;

    }

    .header-left {

        gap: 20px;

    }


    .header-sign {

        width: 40px;

        height: 40px;

    }



    .header-left__icon {

        width: 40px;

        height: 40px;

    }



    .two-col .col {

        width: calc(50% - 10px);

    }



    .customer-profile__header--item-two {

        grid-template-columns: 1fr 200px;

    }

}



@media only screen and (min-width: 992px) {

    :root {

        --header-height: 164px;

    }



    .container {

        max-width: 960px;

    }



    .margin-main {

        margin-top: 50px;

    }



    .main-menu {

        padding-top: 50px;

        padding-bottom: 50px;

    }



    .header-logo {

        width: 260px;

        height: 64px;

    }



    .customer-profile__wrapper {

        grid-template-columns: 1fr 2fr;

    }



    .date-picker__month-wrapper {

        height: initial;

        flex-direction: row;

        justify-content: center;

        align-items: start;

        overflow-y: initial;

    }



    .date-picker__month:nth-child(1) {

        padding-left: 10px;

        border-left: 1px dotted #ccc;

    }



    .customer-profile__header {

        grid-template-columns: 1fr 2fr;

    }



    /********************** user panel *********************/

    .user-panel {

        grid-template-columns: 300px 1fr;

        align-items: start;

        justify-content: start;

    }



    .user-panel__tab {

        background: transparent;

        grid-template-columns: 1fr;

        align-items: start;

        justify-content: start;

        gap: 10px;

        position: initial;

        bottom: initial;

        right: initial;

        left: initial;

    }



    .user-panel__tab--button {

        padding: 10px;

        background: var(--white);

        color: var(--black);

        text-align: start;

        transition: 0.6s all;

    }

    .user-panel__tab--button a{

        background: var(--white);

        color: var(--black);
    }

    .user-panel__tab--button:not(:last-child) {

        padding-bottom: 20px;

        border-left: 0;

        border-bottom: 1px solid #d5d5d5;

    }

    .user-panel__tab--button.active,.user-panel__tab--button.active a {

        color: var(--tertiary-color);

    }


    .user-panel__content--pane {

        padding: 40px;

        border: 1px solid #d5d5d5;

        border-radius: 10px;

        box-shadow: var(--box-shadow);

    }



    .profile-form__grid {

        display: grid;

        grid-template-columns: 150px 350px;

    }

}



@media only screen and (min-width: 1200px) {

    :root {

        --title-huge: 40px;

        --title-big: 30px;

        --title-regular: 22px;

        --title-small: 20px;

        --paragraph-big: 16px;

        --paragraph-regular: 14px;

        --paragraph-small: 14px;

    }



    .container {

        max-width: 1140px;

    }

}



@media only screen and (min-width: 1400px) {

    .container {

        max-width: 1340px;

    }

}



@media only screen and (min-width: 1600px) {

    .container {

        max-width: 1540px;

    }

}