:root {
    --theme-color: #5465FF;
    --theme-color-rgb: 82, 99, 255
}

* {
    margin: 0;
    padding: 0
}

body {
    font-family: DM Sans, serif !important;
    position: relative;
    font-size: 14px;
    margin: 0;
    background-color: #fff;
    color: #00162e;
    scroll-behavior: smooth
}

body ::selection {
    color: #fff;
    background-color: var(--theme-color)
}

ul {
    padding-left: 0;
    margin-bottom: 0
}

li {
    display: inline-block;
    font-size: 14px
}

p {
    font-size: 14px;
    line-height: 18px;
    margin: 0
}

a {
    color: var(--theme-color);
    transition: .5s ease;
    text-decoration: none
}

a:hover {
    color: var(--theme-color);
    text-decoration: none;
    transition: .5s ease
}

a:focus {
    outline: none
}

button:focus {
    outline: none
}

:focus {
    outline: none
}

label {
    font-size: 16px;
    color: #808b97
}

h1 {
    font-size: calc(22px + .02375*(100vw - 320px));
    font-weight: 500;
    line-height: 1.1;
    text-transform: capitalize;
    margin: 0
}

h2 {
    font-size: calc(20px + .00375*(100vw - 320px));
    font-weight: 600;
    text-transform: capitalize;
    margin: 0
}

h3 {
    font-size: calc(16px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    margin: 0
}

h4 {
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0;
    font-weight: 400
}

h5 {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0;
    font-weight: 400
}

h6 {
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0;
    font-weight: 400
}

span {
    display: inline-block
}

.theme-color {
    color: var(--theme-color) !important
}

.theme-bg-color {
    background: var(--theme-color) !important
}

.col-custom-3 {
    width: 29%
}

@media (max-width: 1366px) {
    .col-custom-3 {
        width: 36%
    }
}

@media (max-width: 1199px) {
    .col-custom-3 {
        width: 300px;
        position: relative
    }
}

.col-custom-9 {
    width: 71%
}

@media (max-width: 1366px) {
    .col-custom-9 {
        width: 64%
    }
}

@media (max-width: 1199px) {
    .col-custom-9 {
        width: 100%
    }
}

.no-data-col-custom-9 .no-data-found {
    height: 100%
}

.no-data-col-custom-9:has(.no-data-found) {
    width: 71%
}

.w-max {
    width: max-content !important
}

section,
.section-t-space {
    padding-top: calc(30px + .025*(100vw - 320px))
}

.section-b-space {
    padding-bottom: calc(30px + .025*(100vw - 320px))
}

.section-big-space {
    padding-top: calc(30px + .075*(100vw - 320px))
}

.content-t-space {
    padding-top: calc(20px + .01875*(100vw - 320px))
}

.content-t-space2 {
    padding-top: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.content-b-space {
    padding-bottom: calc(20px + .01875*(100vw - 320px))
}

.content-b-space2 {
    padding-bottom: calc(20px + .00625*(100vw - 320px))
}

.container-fluid-xl {
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + (100 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.container-fluid-lg {
    padding: 0 calc(15px + (200 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.container-fluid-md {
    padding: 0 calc(15px + (245 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.container-fluid-sm {
    padding: 0 calc(15px + .23125*(100vw - 320px))
}

.container-fluid-xs {
    padding: 0 calc(15px + (450 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.section-bg {
    background-color: #f5f6f7
}

.sticky {
    position: sticky !important;
    top: 100px !important
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.rate {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px
}

.rate small {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #808b97;
    letter-spacing: .4px
}

.rate img.star {
    width: 13px;
    height: 13px
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(7px + (14 - 7) * ((100vw - 320px) / (1920 - 320)));
    border-bottom: 1px solid #E5E8EA;
    position: relative;
    margin-bottom: calc(16px + .00875*(100vw - 320px));
    gap: 4px
}

.title.dark-title {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.title:before {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: 4px;
    width: 93px;
    bottom: -2.5px;
    left: 0;
    border-radius: 100px
}

[dir=rtl] .title:before {
    left: unset;
    right: 0
}

.title h2 {
    font-weight: 700;
    line-height: calc(30px + (41 - 30) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 575px) {
    .title h2 {
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis
    }
}

.title .view-all {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(14px + .00125*(100vw - 320px));
    font-weight: 500;
    position: relative;
    white-space: nowrap
}

.title .view-all i {
    --Iconsax-Size: calc(16px + .00125*(100vw - 320px));
    --Iconsax-Color: #5465FF;
    transform: translate(0);
    transition: all .2s ease
}

.title .view-all:hover {
    text-decoration: underline
}

.title .view-all:hover i {
    transform: translate(5px);
    transition: all .2s ease
}

.title-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    width: 24%;
    text-align: center;
    padding-bottom: 12px
}

@media (max-width: 1320px) {
    .title-1 {
        width: 32%
    }
}

@media (max-width: 991px) {
    .title-1 {
        width: 53%
    }
}

@media (max-width: 575px) {
    .title-1 {
        width: 80%
    }
}

@media (max-width: 360px) {
    .title-1 {
        width: 100%
    }
}

.title-1 h2 {
    font-weight: 700;
    line-height: 1.2;
    font-size: calc(23px + (30 - 23) * ((100vw - 320px) / (1920 - 320)));
    text-transform: none
}

.title-1:before {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: 4px;
    width: 93px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.discount-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4b4b;
    color: #fff;
    border-radius: 22px;
    z-index: 1;
    padding: 1px 10px;
    font-size: 14px;
    font-weight: 600
}

[dir=rtl] .discount-tag {
    right: unset;
    left: 10px
}

.like-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fffc;
    border-radius: 100%;
    z-index: 1;
    cursor: pointer
}

[dir=rtl] .like-icon {
    left: unset;
    right: 10px
}

.like-icon .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.like-icon .fill-icon,
.like-icon.active .outline-icon {
    display: none
}

.like-icon.active .fill-icon {
    display: block;
    color: rgba(var(--error-color), 1)
}

.custom-scroll::-webkit-scrollbar {
    width: 5px
}

.custom-scroll::-webkit-scrollbar-track {
    background: #E5E8EA
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(84, 101, 255, .2);
    border-radius: 4px
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--theme-color)
}

.text-underline {
    text-decoration: underline
}

.text-dark {
    color: #00162e;
    font-weight: 500
}

.text-white {
    color: #fff
}

.border {
    border: 1px solid #E5E8EA
}

.b-top {
    border-top: 1px solid #E5E8EA
}

.b-bottom {
    border-bottom: 1px solid #E5E8EA
}

.b-left {
    border-left: 1px solid #E5E8EA
}

.b-right {
    border-right: 1px solid #E5E8EA
}

.border-dashed {
    border: 1px dashed #E5E8EA
}

.border-solid {
    border-top: 1px solid #E5E8EA;
    margin: 16px 0
}

.b-top-dashed {
    border-top: 1px dashed #E5E8EA
}

.b-bottom-dashed {
    border-bottom: 1px dashed #E5E8EA
}

.b-left-dashed {
    border-left: 1px dashed #E5E8EA
}

.b-right-dashed {
    border-right: 1px dashed #E5E8EA
}

.br-12 {
    border-radius: 12px
}

.br-15 {
    border-radius: 15px
}

.br-10 {
    border-radius: 10px
}

.br-8 {
    border-radius: 8px
}

.br-6 {
    border-radius: 6px
}

.br-tl-0 {
    border-top-left-radius: 0
}

.br-tr-0 {
    border-top-right-radius: 0
}

.br-bl-0 {
    border-bottom-left-radius: 0
}

.br-br-0 {
    border-bottom-right-radius: 0
}

.p-16 {
    padding: 16px
}

.p-20 {
    padding: calc(14px + .00375*(100vw - 320px))
}

.pr-45 {
    padding-right: 45px !important
}

.ms-auto {
    margin-left: auto !important
}

[dir=rtl] .ms-auto {
    margin-left: unset !important;
    margin-right: auto !important
}

.img-45 {
    width: 45px !important;
    height: 45px !important;
    border-radius: 100%
}

.plus-minus,
.increment {
    background-color: #f5f6f7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0
}

.plus-minus i,
.increment i {
    --Iconsax-Size: 19px;
    --Iconsax-Color: #808B97;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px
}

.plus-minus input,
.increment input {
    color: #00162e;
    border: none;
    background-color: #f5f6f7;
    text-align: center;
    width: 30px;
    height: 30px
}

[dir=rtl] .plus-minus input,
[dir=rtl] .increment input {
    text-align: center !important
}

.plus-minus .add,
.increment .add {
    background-color: var(--theme-color);
    --Iconsax-Color: #fff;
    border-radius: 6px
}

.danger-note {
    background-color: #ff4b4b1a;
    color: #ff4b4b;
    padding: 16px;
    border-radius: 8px
}

.danger-note p {
    font-size: 16px
}

.danger-note h3 {
    color: #ff4b4b !important;
    margin-bottom: 4px
}

.dashed-border {
    border-top: 1px dashed #E5E8EA;
    margin: calc(14px + (20 - 14) * ((100vw - 768px) / (1920 - 768))) 0
}

.note {
    margin-top: 16px
}

.note label {
    font-weight: 500;
    color: #00162e
}

.note p {
    color: #808b97
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-radius: 8px !important
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3) {
    border-radius: 8px !important
}

.filter-div {
    display: flex;
    align-items: center;
    gap: 12px
}

.filter-div a {
    border-radius: 6px;
    padding: 6px 12px
}

@media (max-width: 767px) {
    .filter-div {
        width: 100%
    }
}

@media (max-width: 1199px) {
    .filter {
        position: absolute;
        top: 55px;
        left: 12px;
        transition: all .3s ease;
        z-index: 3;
        width: 290px;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden
    }

    .filter.open {
        left: 12px;
        transition: all .3s ease;
        transform: translateY(0);
        opacity: 1;
        visibility: visible
    }
}

.time-slot {
    border: none;
    background: none;
    padding: 0;
    font-size: 16px;
    color: #808b97 !important
}

.error-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center
}

.no-data-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px
}

.no-data-content img {
    margin-bottom: 20px
}

.no-data-content p {
    color: #00162ecc;
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)))
}

.no-data-content .btn {
    margin-top: 25px;
    width: max-content
}

.no-data-content .btn i {
    --Iconsax-Size: calc(20px + .0025*(100vw - 320px));
    --Iconsax-Color: #fff;
    transform: translate(0);
    transition: all .2s ease
}

.no-data-content .btn:hover i {
    transform: translate(-5px);
    transition: all .2s ease
}

.spinner-border {
    display: inline-flex;
    align-items: center;
    opacity: .5;
    width: 16px !important
}

.spinner-border.spinner-border-sm {
    --bs-spinner-border-width: .15em !important
}

.b-r-5 {
    border-radius: 5px
}

.error {
    font-size: 13px !important;
    color: #ff4b4b !important
}

.booking-status-FDB448 {
    background-color: #fdb4481a;
    color: #fdb448
}

.booking-status-FDB448:hover {
    color: #fdb448
}

.booking-status-48BFFD {
    background-color: #48bffd1a;
    color: #48bffd
}

.booking-status-48BFFD:hover {
    color: #48bffd
}

.booking-status-AD46FF {
    background-color: #ad46ff1a;
    color: #ad46ff
}

.booking-status-AD46FF:hover {
    color: #ad46ff
}

.booking-status-FF4B4B {
    background-color: #ff4b4b1a;
    color: #ff4b4b
}

.booking-status-FF4B4B:hover {
    color: #ff4b4b
}

.booking-status-FF7456 {
    background-color: #ff74561a;
    color: #ff7456
}

.booking-status-FF7456:hover {
    color: #ff7456
}

.booking-status-FF1D53 {
    background-color: #0089961a;
    color: #008996
}

.booking-status-FF1D53:hover {
    color: #008996
}

.booking-status-FF1D53 {
    background-color: #c507af1a;
    color: #c507af
}

.booking-status-FF1D53:hover {
    color: #c507af
}

.booking-status-5465FF {
    background-color: #27af4d1a;
    color: #27af4d
}

.booking-status-5465FF:hover {
    color: #27af4d
}

.booking-status-5498FF {
    background-color: #5498ff1a;
    color: #5498ff
}

.booking-status-5498FF:hover {
    color: #5498ff
}

.payment-status-FDB448 {
    background-color: #fdb4481a !important;
    color: #fdb448 !important
}

.payment-status-FDB448:hover {
    color: #fdb448 !important
}

.payment-status-COMPLETED {
    background-color: #27af4d1a !important;
    color: #27af4d !important
}

.payment-status-COMPLETED:hover {
    color: #27af4d !important
}

.payment-status-PENDING {
    background-color: #fdb4481a !important;
    color: #fdb448 !important
}

.payment-status-PENDING:hover {
    color: #fdb448 !important
}

.payment-status-REFUNDED {
    background-color: #48bffd1a !important;
    color: #48bffd !important
}

.payment-status-REFUNDED:hover {
    color: #48bffd !important
}

.payment-status-FAILED {
    background-color: #ff4b4b1a !important;
    color: #ff4b4b !important
}

.payment-status-FAILED:hover {
    color: #ff4b4b !important
}

.payment-status-5498FF {
    background-color: #5498ff1a !important;
    color: #5498ff !important
}

.payment-status-5498FF:hover {
    color: #5498ff !important
}

.badge {
    font-weight: 600;
    display: inline-block;
    padding: .35em .65em;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    text-transform: capitalize
}

.badge-primary {
    background-color: #5465ff;
    color: #fff
}

.badge-success {
    background-color: #27af4d;
    color: #fff
}

.badge-warning {
    background-color: #fdb448;
    color: #fff
}

.badge-info {
    background-color: #48bffd;
    color: #fff
}

.badge-danger {
    background-color: #ff4b4b;
    color: #fff
}

.badge-light {
    background-color: #808b97;
    color: #fff
}

.badge-primary-light {
    background-color: #5465ff1a;
    color: #5465ff
}

.badge-success-light {
    background-color: #27af4d1a;
    color: #27af4d
}

.badge-warning-light {
    background-color: #fdb4481a;
    color: #fdb448
}

.badge-info-light {
    background-color: #48bffd1a;
    color: #48bffd
}

.badge-danger-light {
    background-color: #ff4b4b1a;
    color: #ff4b4b
}

.badge-light-light {
    background-color: #808b971a;
    color: #808b97
}

del {
    color: #00162e4d
}

.required-span {
    color: #f2393b
}

.service-bg-warning {
    background-color: #fdb448 !important
}

.service-bg-danger {
    background-color: #ff4b4b !important
}

.favorite-icon {
    color: #ff4b4b
}

.favorite-icon.iconsax svg [stroke] {
    stroke: #ff4b4b
}

.favorite-icon.iconsax svg [fill] {
    fill: #ff4b4b
}

.accordion .accordion-item {
    border: none;
    background-color: transparent
}

.accordion .accordion-item .accordion-button:not(.collapsed):after {
    background-image: url(https://osoncor.tj/build/assets/arrow-90473a1a.svg)
}

.accordion .accordion-item .accordion-body {
    padding: 0
}

.filter #no-results-message {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 7px;
    letter-spacing: .4px;
    line-height: 1.6
}

.filter .accordion {
    margin-bottom: 20px
}

.filter .accordion .accordion-item .accordion-header .accordion-button {
    font-size: 17px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: #00162e;
    cursor: pointer
}

.filter .accordion .accordion-item .accordion-header .accordion-button:after {
    background-size: 16px
}

[dir=rtl] .filter .accordion .accordion-item .accordion-header .accordion-button:after {
    margin-left: unset;
    margin-right: auto
}

.filter .accordion .accordion-item .accordion-body {
    padding: 16px 0
}

.filter .accordion .accordion-item .accordion-body .category-body .category-list .category-item.no-category {
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 7px;
    letter-spacing: .4px;
    line-height: 1.6
}

.filter .accordion .accordion-item .accordion-body .category-body .category-list .category-item .form-check-label {
    width: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

.filter .accordion .accordion-item .accordion-body .category-body .category-list .category-item .form-check-label img {
    width: 30px
}

.filter .accordion .accordion-item .accordion-body .category-body .category-list .category-item .form-check-input:checked~.form-check-label {
    font-weight: 500;
    color: #00162e
}

.filter .accordion .accordion-item .accordion-body .filter-body .service {
    border-radius: 8px;
    padding: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.filter .accordion .accordion-item .accordion-body .filter-body .service .form-check label {
    width: 100%;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    cursor: pointer
}

.filter .accordion .accordion-item .accordion-body .filter-body .form-group {
    margin: 0
}

.filter .accordion .accordion-item .accordion-body .filter-body .search-provider {
    margin-top: 10px
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .search-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 16px
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .search-div i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808b97
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .search-div .form-group {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .search-div .form-group input {
    border: none;
    width: 100%
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .search-div .accordion-button:after {
    background-size: 16px
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 210px;
    overflow: auto
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body .form-check {
    gap: 8px;
    margin-bottom: 0
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    cursor: pointer
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li {
    position: relative;
    color: #808b97;
    font-size: 14px;
    line-height: 18px;
    padding: 0 10px
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:before {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    background-color: #808b97;
    width: 1px;
    height: 12px
}

[dir=rtl] .filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:before {
    left: 0;
    right: unset
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:first-child {
    color: #00162e;
    padding-left: 0
}

[dir=rtl] .filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:first-child {
    padding-left: unset;
    padding-right: 0
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:last-child {
    padding-right: 0
}

[dir=rtl] .filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:last-child {
    padding-right: unset;
    padding-left: 0
}

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li:last-child:before {
    display: none
}

.filter .accordion .accordion-item .price-range-box {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    height: 80px;
    margin-block: 16px
}

.filter .accordion .accordion-item .price-range-box .irs--round {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    height: unset
}

.filter .accordion .accordion-item .price-range-box .irs--round .irs-bar {
    top: 10px
}

.filter .accordion .accordion-item .price-range-box .irs--round .irs-handle {
    top: 5px
}

.filter .accordion .accordion-item .price-range-box .irs--round .irs {
    width: 93%;
    margin: auto
}

.filter .card-footer {
    padding-top: 0 !important
}

.filter .card-footer button {
    width: 100%;
    justify-content: center;
    border-radius: 8px
}

.filter .card-footer:before,
.filter .card-footer:after {
    display: none
}

.faq-section .accordion .accordion-item,
.terms-section .accordion .accordion-item,
.privacy-section .accordion .accordion-item {
    font-family: DM Sans, serif !important;
    background-color: #fff;
    border-radius: 12px
}

.faq-section .accordion .accordion-item+.accordion-item,
.terms-section .accordion .accordion-item+.accordion-item,
.privacy-section .accordion .accordion-item+.accordion-item {
    margin-top: 20px
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button,
.terms-section .accordion .accordion-item .accordion-header .accordion-button,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button {
    padding: calc(16px + .0025*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    line-height: 1.2;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    gap: 4px;
    color: #00162e;
    cursor: pointer
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button i,
.terms-section .accordion .accordion-item .accordion-header .accordion-button i,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button i {
    --Iconsax-Size: calc(20px + .0025*(100vw - 320px));
    --Iconsax-Color: #00162E
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button:after,
.terms-section .accordion .accordion-item .accordion-header .accordion-button:after,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button:after {
    display: none
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button .add,
.terms-section .accordion .accordion-item .accordion-header .accordion-button .add,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button .add {
    display: none
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button .minus,
.terms-section .accordion .accordion-item .accordion-header .accordion-button .minus,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button .minus {
    display: flex
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button.collapsed,
.terms-section .accordion .accordion-item .accordion-header .accordion-button.collapsed,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    color: #00162eb3
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button.collapsed .add,
.terms-section .accordion .accordion-item .accordion-header .accordion-button.collapsed .add,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button.collapsed .add {
    display: flex
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button.collapsed .minus,
.terms-section .accordion .accordion-item .accordion-header .accordion-button.collapsed .minus,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button.collapsed .minus {
    display: none
}

.faq-section .accordion .accordion-item .accordion-body,
.terms-section .accordion .accordion-item .accordion-body,
.privacy-section .accordion .accordion-item .accordion-body {
    padding: 20px
}

.faq-section .accordion .accordion-item .accordion-body p,
.terms-section .accordion .accordion-item .accordion-body p,
.privacy-section .accordion .accordion-item .accordion-body p {
    font-size: 18px;
    line-height: 1.5
}

.faq-section ul,
.faq-section ol,
.terms-section ul,
.terms-section ol,
.privacy-section ul,
.privacy-section ol {
    list-style-type: disc;
    padding-left: 1.25rem
}

[dir=rtl] .faq-section ul,
[dir=rtl] .faq-section ol,
[dir=rtl] .terms-section ul,
[dir=rtl] .terms-section ol,
[dir=rtl] .privacy-section ul,
[dir=rtl] .privacy-section ol {
    padding-right: 1.25rem;
    padding-left: unset
}

.faq-section ul li,
.faq-section ol li,
.terms-section ul li,
.terms-section ol li,
.privacy-section ul li,
.privacy-section ol li {
    display: list-item;
    font-size: 17px;
    color: #00162eb3;
    line-height: 1.3 !important;
    margin-bottom: 12px
}

.up-down-image {
    display: flex;
    gap: 20px
}

.up-down-image img {
    border-radius: 12px;
    background-color: #e5e8ea
}

@keyframes mover {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-10px)
    }
}

@keyframes textShine {
    0% {
        background-position: 0% 50%
    }

    to {
        background-position: 100% 50%
    }
}

@keyframes textChange {
    0% {
        content: "User"
    }

    30% {
        content: "Provider"
    }

    55% {
        content: "Servicemen"
    }

    80% {
        content: "Admin"
    }
}

@keyframes tada {
    0% {
        transform: scaleX(1)
    }

    10% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    20% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    50% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    70% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    60% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes shine {
    to {
        left: 125%
    }
}

.flatpicker-calender .flatpickr-input:-webkit-calendar-picker-indicator {
    display: none
}

.flatpicker-calender .flatpickr-input~i {
    z-index: 0
}

.flatpicker-calender .input-icon {
    top: 50%;
    transform: translateY(-50%)
}

.booking-category .form-control {
    border: none !important
}

.booking-category .category-body {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.booking-category .category-body ul {
    display: grid;
    gap: 10px;
    max-height: 190px;
    overflow-y: auto;
    height: 100%
}

.booking-category .category-body ul .form-check {
    justify-content: space-between;
    gap: 4px;
    padding-left: 10px;
    margin: 0
}

.booking-category .category-body ul .form-check label {
    display: flex;
    align-items: center;
    cursor: pointer
}

.booking-category .category-body ul .form-check:has(.form-check-input:checked) .form-check-label span {
    font-weight: 600
}

.booking-category .category-body ul .form-check .form-check-label img {
    width: 30px;
    height: 30px
}

.booking-category .category-body ul .form-check .form-check-label span {
    padding-left: 0;
    margin-left: 10px;
    transition: all .15s ease-in-out;
    position: relative;
    font-size: 16px;
    color: #212529
}

[dir=rtl] .booking-category .category-body ul .form-check .form-check-label span {
    padding-left: unset;
    padding-right: 10px
}

.booking-category .category-body ul .form-check .form-check-label span:before {
    position: absolute;
    top: 6px;
    left: 0;
    background-color: #e5e8ea;
    height: 16px;
    width: 1px
}

[dir=rtl] .booking-category .category-body ul .form-check .form-check-label span:before {
    left: unset;
    right: 0
}

.booking-category .category-body ul .form-check .form-check-input {
    float: unset;
    margin: 0
}

.booking-category .booking-category-body {
    height: unset !important;
    overflow: unset !important
}

@media (max-width: 1199px) {
    .booking-sec .filter {
        position: fixed !important;
        top: 0 !important;
        left: -300px;
        width: 300px;
        height: 100vh !important;
        z-index: 8;
        overflow: auto;
        transform: unset;
        transition: all .25s ease-in-out;
        opacity: 1;
        visibility: visible
    }

    .booking-sec .filter.open {
        left: 0;
        transform: unset
    }

    [dir=rtl] .booking-sec .filter.open {
        left: unset;
        right: 0
    }

    .booking-sec .filter .card {
        border-radius: 0;
        border: none;
        height: 100vh
    }

    .booking-sec .filter .card .card-header {
        padding: 1rem
    }

    .booking-sec .filter .card .card-header a {
        font-weight: 600
    }

    .booking-sec .filter .card .card-header h3 {
        padding-left: 10px
    }

    [dir=rtl] .booking-sec .filter .card .card-header h3 {
        padding-left: unset;
        padding-right: 10px
    }
}

.booking-sec .filter .close-box {
    border-radius: 0;
    color: #fff;
    justify-content: space-between;
    padding: 14px;
    border: none;
    font-size: 19px;
    background-color: #1d2537
}

.booking-sec .filter .close-box i {
    ---Iconsax-Size: 18px;
    --Iconsax-Color: #fff;
    transform: rotate(45deg);
    line-height: 1
}

.booking-sec .filter .card .card-header .close-btn {
    ---Iconsax-Size: 18px;
    --Iconsax-Color: #00162E;
    line-height: 1;
    cursor: pointer
}

@media (max-width: 767px) {
    .booking-sec .filter-div {
        width: 100%
    }
}

.booking-sec .select-dropdown h4 {
    font-weight: 500
}

@media (max-width: 575px) {
    .booking-sec .select-dropdown {
        align-items: flex-start;
        gap: 12px
    }

    .booking-sec .select-dropdown .form-group {
        width: 100%
    }
}

@media (max-width: 425px) {
    .booking-sec .select-dropdown {
        flex-wrap: wrap
    }
}

.booking-sec .select-dropdown .form-group .form-select {
    border-radius: 6px;
    padding: 8px 38px 8px 12px;
    min-width: 170px;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.booking-sec .select-dropdown .form-group label {
    margin-bottom: 0
}

.booking-sec .select-dropdown .form-select {
    padding: 8px 38px 8px 12px;
    width: 100%;
    min-width: 170px
}

.booking-sec .select-dropdown .selected-booking {
    padding: 4px 8px;
    color: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: default
}

.booking-sec .select-dropdown .selected-booking span {
    font-weight: 600;
    line-height: 1
}

.booking-sec .select-dropdown .selected-booking .close {
    cursor: pointer
}

.booking-sec .status,
.booking-sec .view-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(8px + .005*(100vw - 320px))
}

.booking-sec .status .status-btn,
.booking-sec .status h5,
.booking-sec .view-status .status-btn,
.booking-sec .view-status h5 {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 28px;
    color: var(--theme-color);
    border: none;
    background-color: unset;
    padding: 0
}

.booking-sec .status .status-btn:hover,
.booking-sec .status h5:hover,
.booking-sec .view-status .status-btn:hover,
.booking-sec .view-status h5:hover {
    text-decoration: underline
}

.booking-sec .status .badge,
.booking-sec .view-status .badge {
    padding: calc(6px + (9 - 6) * ((100vw - 320px) / (1920 - 320))) calc(12px + .0025*(100vw - 320px))
}

.booking-sec .data {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.booking-sec .data li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)))
}

.booking-sec .data .label {
    color: #808b97;
    display: flex;
    align-items: center;
    gap: 8px
}

.booking-sec .data .value {
    font-weight: 500
}

.booking-sec .data .value.location {
    font-weight: 400 !important
}

.booking-sec .data i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: var(--theme-color)
}

.booking-sec .ratio_70 .bg-size {
    min-height: 100px;
    min-width: 100px;
    width: auto
}

.booking-sec .booking-sec-box .booking-list {
    position: relative;
    display: grid;
    gap: calc(16px + .0025*(100vw - 320px))
}

.booking-sec .booking-sec-box .booking-list .border-solid {
    border: none;
    border-top: 1px solid #E5E8EA
}

.booking-sec .booking-sec-box .booking-list .booking-box {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    padding: calc(14px + .00375*(100vw - 320px))
}

.booking-sec .booking-sec-box .booking-list .booking-box:hover .booking-top-box .service-image a {
    transform: scale(1.1) rotate(2deg)
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box {
    display: flex;
    gap: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box {
        display: grid
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-image {
    width: calc(220px + (330 - 220) * ((100vw - 767px) / (1920 - 767)));
    height: 201px;
    border-radius: 7px;
    overflow: hidden
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-image {
        width: auto;
        height: auto;
        min-width: unset;
        min-height: unset
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status {
    width: calc(100% - 15px - calc(220px + (330 - 220) * ((100vw - 767px) / (1920 - 767))));
    position: relative;
    display: flex;
    align-items: center
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status {
        display: block;
        width: 100%
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .border-solid {
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

[dir=rtl] .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .border-solid {
    left: unset;
    right: 0
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .border-solid {
        position: relative;
        inset: unset;
        margin: calc(11px + (16 - 11) * ((100vw - 320px) / (768 - 320))) 0
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box {
        margin: 0;
        display: grid
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .service-title {
    width: calc(220px + (330 - 220) * ((100vw - 767px) / (1920 - 767)))
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .service-title {
        width: 100%
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .service-title.booking-title {
    gap: 4px;
    flex-wrap: wrap
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .service-title.booking-title h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
    color: #00162e;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .service-title.booking-title span {
    font-size: 18px;
    line-height: 20px;
    color: #00162e
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .service-title.booking-title small {
    font-size: 14px;
    font-weight: 500;
    line-height: 28px
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men {
    padding: 0;
    width: calc(100% - calc(220px + (330 - 220) * ((100vw - 767px) / (1920 - 767))) - 15px)
}

@media (max-width: 767.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 575px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men {
        grid-template-columns: 1fr
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men .servicemen-list-item {
    background-color: #f5f6f7;
    border: none;
    box-shadow: none;
    min-width: calc(220px + (279 - 220) * ((100vw - 575px) / (1920 - 575)))
}

@media (max-width: 575px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men .servicemen-list-item {
        min-width: unset
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men .servicemen-list-item .list {
    width: 100%
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men .servicemen-list-item .list>div {
    width: 100%
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men .servicemen-list-item .list>div ul {
    justify-content: space-between
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-bottom-box .selected-men .servicemen-list-item .list>div ul li .rate:before {
    display: none
}

.booking-sec .booking-sec-box .booking-list .invalid-feedback {
    position: absolute;
    bottom: -20px
}

.date-time-location-btn {
    background-color: unset;
    padding: 0;
    border: none
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0
}

.breadcrumb .breadcrumb-item {
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #fff;
    text-transform: capitalize
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 8px
}

[dir=rtl] .breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: unset;
    padding-right: 8px
}

.breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    color: #fff;
    float: left;
    padding-right: 8px
}

[dir=rtl] .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    float: right;
    padding-right: unset;
    padding-left: 8px
}

.breadcrumb-icon {
    --bs-breadcrumb-divider: ">"
}

.breadcrumb-icon li {
    display: inline-block
}

.breadcrumb-section {
    padding-block: calc(90px + .04*(100vw - 320px)) calc(28px + (61 - 28) * ((100vw - 320px) / (1920 - 320)))
}

.breadcrumb-section .breadcrumb-contain {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto
}

.breadcrumb-section .breadcrumb-contain h2 {
    font-size: calc(23px + (42 - 23) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 700;
    background: linear-gradient(to right, #fb4040 20%, #ff549c 30%, #725efe 50%, #2477ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 150% auto;
    margin: 0 auto;
    position: relative
}

.breadcrumb-section .breadcrumb-contain h2:before,
.breadcrumb-section .breadcrumb-contain h2:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: calc(14px + .0125*(100vw - 320px));
    width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 6px;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 1366px) {

    .breadcrumb-section .breadcrumb-contain h2:before,
    .breadcrumb-section .breadcrumb-contain h2:after {
        top: 50%;
        transform: translateY(-50%)
    }
}

.breadcrumb-section .breadcrumb-contain h2:before {
    left: calc(-13px + (-40 - -13) * ((100vw - 320px) / (1920 - 320)))
}

.breadcrumb-section .breadcrumb-contain h2:after {
    right: calc(-13px + (-40 - -13) * ((100vw - 320px) / (1920 - 320)))
}

.breadcrumb-section .breadcrumb-contain h2 span:before,
.breadcrumb-section .breadcrumb-contain h2 span:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: calc(28px + .01875*(100vw - 320px));
    width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 6px;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 1366px) {

    .breadcrumb-section .breadcrumb-contain h2 span:before,
    .breadcrumb-section .breadcrumb-contain h2 span:after {
        top: 50%;
        transform: translateY(-50%)
    }
}

.breadcrumb-section .breadcrumb-contain h2 span:before {
    left: calc(-7px + (-30 - -7) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .breadcrumb-section .breadcrumb-contain h2 span:before {
    left: unset;
    right: calc(-7px + (-30 - -7) * ((100vw - 320px) / (1920 - 320)))
}

.breadcrumb-section .breadcrumb-contain h2 span:after {
    right: calc(-7px + (-30 - -7) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .breadcrumb-section .breadcrumb-contain h2 span:after {
    right: unset;
    left: calc(-7px + (-30 - -7) * ((100vw - 320px) / (1920 - 320)))
}

.breadcrumb-section .breadcrumb-contain p {
    font-size: 16px;
    line-height: 24px;
    max-width: 680px;
    width: 90%;
    padding-top: calc(20px + (30 - 20)*((100vw - 991px) /(1920 - 991)));
    color: #808b97;
    margin: 0 auto
}

@media (max-width: 767px) {
    .breadcrumb-section .breadcrumb-contain p {
        display: none
    }
}

.btn {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    padding: 10px calc(12px + .0025*(100vw - 320px));
    letter-spacing: 1px;
    line-height: 1.5;
    gap: 4px;
    white-space: nowrap;
    width: 100%;
    border-radius: calc(7px + (12 - 7) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center;
    justify-content: center
}

.btn.btn-solid,
.btn.btn-solid:active {
    background-color: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color)
}

.btn.btn-solid i,
.btn.btn-solid:active i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: white
}

.btn.btn-solid:hover,
.btn.btn-solid:active:hover {
    background-color: transparent;
    color: var(--theme-color)
}

.btn.btn-solid:hover i,
.btn.btn-solid:active:hover i {
    --Iconsax-Color: var(--theme-color)
}

.btn.btn-outline {
    border: 1px solid var(--theme-color);
    color: var(--theme-color)
}

.btn.btn-outline i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: var(--theme-color)
}

.btn.btn-fill {
    border: transparent;
    color: #fff;
    background-color: var(--theme-color)
}

.btn.btn-fill i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #fff
}

.btn.btn-solid-gray {
    background-color: #f5f6f7;
    color: #00162e
}

.btn.btn-dark-solid {
    background-color: #00162e;
    color: #fff
}

.btn.btn-dark-solid:hover {
    background-color: transparent;
    border-color: #00162e;
    color: #00162e
}

.btn:focus {
    box-shadow: none
}

.btn.disabled {
    background-color: #e5e8ea;
    color: #808b97;
    font-weight: 500
}

.btn.btn-solid-danger {
    background-color: #ff4b4b;
    color: #fff
}

.btn.btn-solid-danger i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: white
}

.btn.btn-solid-success {
    background-color: #27af4d;
    color: #fff
}

.btn.btn-solid-success i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: white
}

.badge {
    font-size: 14px;
    font-weight: 500;
    border-radius: 15px
}

.text-primary {
    color: #5465ff !important
}

.text-secondary {
    color: #ff7456 !important
}

.text-success {
    color: #27af4d !important
}

.text-danger {
    color: #ff4b4b !important
}

.text-info {
    color: #48bffd !important
}

.text-light {
    color: #808b97 !important
}

.text-title {
    color: #00162e !important
}

.text-warning {
    color: #fdb448 !important
}

.primary-badge {
    color: #fff !important;
    background-color: #5465ff !important
}

.secondary-badge {
    color: #fff !important;
    background-color: #ff7456 !important
}

.success-badge {
    color: #fff !important;
    background-color: #27af4d !important
}

.danger-badge {
    color: #fff !important;
    background-color: #ff4b4b !important
}

.info-badge {
    color: #fff !important;
    background-color: #48bffd !important
}

.light-badge {
    color: #fff !important;
    background-color: #808b97 !important
}

.pending-badge {
    color: #fff !important;
    background-color: #fdb448 !important
}

.assigned-badge {
    color: #fff !important;
    background-color: #ad46ff !important
}

.on-the-way-badge {
    color: #fff !important;
    background-color: #ff7456 !important
}

.decline-badge {
    color: #fff !important;
    background-color: #ff4b4b !important
}

.accepted-badge {
    color: #fff !important;
    background-color: #48bffd !important
}

.on-going-badge {
    color: #fff !important;
    background-color: #ff7456 !important
}

.on-hold-badge {
    color: #fff !important;
    background-color: #008996 !important
}

.cancel-badge {
    color: #fff !important;
    background-color: #ff4b4b !important
}

.start-again-badge {
    color: #fff !important;
    background-color: #c507af !important
}

.completed-badge {
    color: #fff !important;
    background-color: #27af4d !important
}

.pending-approval-badge {
    color: #fff !important;
    background-color: #5498ff !important
}

.title-badge {
    color: #fff !important;
    background-color: #00162e !important
}

.warning-badge {
    color: #fff !important;
    background-color: #fdb448 !important
}

.primary-light-badge {
    color: #5465ff !important;
    background-color: #5465ff1a !important
}

.secondary-light-badge {
    color: #ff7456 !important;
    background-color: #ff74561a !important
}

.success-light-badge {
    color: #27af4d !important;
    background-color: #27af4d1a !important
}

.danger-light-badge {
    color: #ff4b4b !important;
    background-color: #ff4b4b1a !important
}

.info-light-badge {
    color: #48bffd !important;
    background-color: #48bffd1a !important
}

.light-light-badge {
    color: #808b97 !important;
    background-color: #808b971a !important
}

.title-light-badge {
    color: #00162e !important;
    background-color: #00162e1a !important
}

.pending-light-badge {
    color: #fdb448 !important;
    background-color: #fdb4481a !important
}

.assigned-light-badge {
    color: #ad46ff !important;
    background-color: #ad46ff1a !important
}

.on-the-way-light-badge {
    color: #ff7456 !important;
    background-color: #ff74561a !important
}

.decline-light-badge {
    color: #ff4b4b !important;
    background-color: #ff4b4b1a !important
}

.accepted-light-badge {
    color: #48bffd !important;
    background-color: #48bffd1a !important
}

.on-going-light-badge {
    color: #ff7456 !important;
    background-color: #ff74561a !important
}

.on-hold-light-badge {
    color: #008996 !important;
    background-color: #0089961a !important
}

.cancel-light-badge {
    color: #ff4b4b !important;
    background-color: #ff4b4b1a !important
}

.start-again-light-badge {
    color: #c507af !important;
    background-color: #c507af1a !important
}

.completed-light-badge {
    color: #27af4d !important;
    background-color: #27af4d1a !important
}

.pending-approval-light-badge {
    color: #5498ff !important;
    background-color: #5498ff1a !important
}

.warning-light-badge {
    color: #fdb448 !important;
    background-color: #fdb4481a !important
}

.flatpickr-calendar {
    z-index: 3;
    width: 324.875px;
    padding: 16px
}

.flatpickr-calendar.open {
    z-index: 3
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
    display: none
}

.flatpickr-calendar .flatpickr-innerContainer {
    font-size: 14px;
    background-color: #f5f6f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible
}

.flatpickr-calendar .flatpickr-weekdays {
    padding: 0
}

.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer .flatpickr-weekday {
    color: var(--theme-color);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 480px) {
    .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer .flatpickr-weekday {
        font-size: 13px
    }
}

.flatpickr-calendar .flatpickr-day {
    max-width: 37px;
    height: 35px;
    line-height: 35px;
    color: #00162e;
    font-size: 16px
}

@media (max-width: 480px) {
    .flatpickr-calendar .flatpickr-day {
        font-size: 13px;
        max-width: 33px;
        height: 32px;
        line-height: 32px
    }
}

.flatpickr-calendar .flatpickr-day:hover {
    background-color: #5465ff1a;
    color: var(--theme-color);
    font-weight: 600
}

.flatpickr-calendar .flatpickr-day.today {
    background-color: var(--theme-color);
    color: #fff;
    border: none
}

.flatpickr-calendar .flatpickr-day.selected {
    color: #fff;
    background-color: var(--theme-color)
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .flatpickr-day.nextMonthDay,
.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay {
    color: #808b97
}

.flatpickr-calendar .flatpickr-day.inRange {
    background-color: #5465ff1a;
    box-shadow: none
}

.flatpickr-calendar .flatpickr-day.inRange.today {
    background-color: var(--theme-color)
}

.flatpickr-calendar .dayContainer {
    padding: 16px
}

@media (max-width: 480px) {
    .flatpickr-calendar .dayContainer {
        padding: 0
    }
}

.flatpickr-calendar .flatpickr-months {
    margin-bottom: 16px
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    color: #00162e
}

.flatpickr-calendar .flatpickr-months .flatpickr-current-month {
    padding: 0;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.flatpickr-calendar .flatpickr-months .flatpickr-current-month input.cur-year {
    font-size: 16px
}

@media (max-width: 480px) {
    .flatpickr-calendar .flatpickr-months .flatpickr-current-month input.cur-year {
        font-size: 14px
    }
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    background-color: #f5f6f7;
    border-radius: 100%;
    padding: 8px;
    height: 30px;
    width: 30px;
    top: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #00162e
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    width: 12px;
    height: 12px
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
    left: 16px !important
}

[dir=rtl] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
    left: unset;
    right: 16px !important
}

.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    right: 16px !important
}

[dir=rtl] .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    right: unset;
    left: 16px !important
}

.flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months {
    background-color: #f5f6f7;
    border-radius: 6px;
    font-size: calc(14px + .00125*(100vw - 320px));
    padding: 9px 12px;
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset
}

.flatpickr-calendar .flatpickr-months .numInputWrapper {
    background-color: #f5f6f7;
    border-radius: 6px;
    font-size: 14px;
    padding: 6px 12px;
    width: 80px
}

.flatpickr-calendar .numInputWrapper:hover span {
    border: none
}

.flatpickr-calendar .numInputWrapper span:hover {
    background-color: unset;
    border: none
}

.flatpickr-calendar .numInputWrapper span.arrowUp:after {
    top: 55%
}

.flatpickr-calendar .numInputWrapper span.arrowDown:after {
    top: 20%
}

.flatpickr-calendar.hasTime .flatpickr-time {
    border: none;
    line-height: unset;
    height: 70px !important;
    max-height: 70px !important;
    gap: 10px
}

.flatpickr-calendar.hasTime .flatpickr-time:after {
    display: none
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper {
    height: 100%;
    position: relative;
    background: url(https://osoncor.tj/build/assets/time-3952b261.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;
    width: 30%
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper input:hover,
.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper input:focus {
    background: transparent
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper span {
    right: 16px
}

[dir=rtl] .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper span {
    right: unset;
    left: 16px
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--theme-color);
    border-width: 5px;
    top: unset;
    bottom: 13%
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--theme-color);
    border-width: 5px;
    top: 13%
}

.flatpickr-calendar.hasTime .flatpickr-time input {
    text-align: left;
    padding-left: 20px;
    font-size: 18px;
    color: var(--theme-color);
    font-weight: 500
}

[dir=rtl] .flatpickr-calendar.hasTime .flatpickr-time input {
    text-align: right;
    padding-right: 20px;
    padding-left: unset
}

.flatpickr-calendar.hasTime .flatpickr-time .flatpickr-time-separator {
    width: 2%;
    color: var(--theme-color);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm {
    height: 100%;
    position: relative;
    background: url(https://osoncor.tj/build/assets/time-3952b261.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;
    width: 29%;
    font-size: 18px;
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center
}

.main-inline-calender.input-group {
    flex-direction: column
}

.main-inline-calender.input-group .form-control {
    width: 100%;
    border-radius: 6px !important;
    color: var(--theme-color);
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 23px
}

.main-inline-calender.input-group .form-control:focus {
    border: none
}

.main-inline-calender.input-group .form-control:focus,
.main-inline-calender.input-group .form-control:disabled {
    box-shadow: unset;
    border: none;
    background-color: unset
}

.main-inline-calender.input-group .form-control[readonly] {
    box-shadow: unset;
    border: none;
    background-color: unset
}

.main-inline-calender.input-group .flatpickr-calendar.inline {
    width: 100%;
    border-radius: 6px !important
}

@media (max-width: 575px) {
    .main-inline-calender.input-group .flatpickr-calendar.inline {
        max-width: 410px;
        min-width: 400px;
        left: 50%;
        transform: translate(-50%)
    }
}

@media (max-width: 480px) {
    .main-inline-calender.input-group .flatpickr-calendar.inline {
        min-width: 310px;
        max-width: min-content
    }
}

@media (max-width: 360px) {
    .main-inline-calender.input-group .flatpickr-calendar.inline {
        min-width: 270px;
        max-width: min-content
    }
}

.main-inline-calender.input-group .flatpickr-innerContainer,
.main-inline-calender.input-group .flatpickr-rContainer {
    display: block
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-weekdays,
.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days {
    width: 100%
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer {
    width: 100%;
    max-width: none;
    min-width: unset;
    gap: 20px
}

@media (max-width: 575px) {
    .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer {
        gap: 14px
    }
}

@media (max-width: 480px) {
    .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer {
        gap: 3px;
        padding: 4px
    }
}

@media (max-width: 360px) {
    .main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer {
        gap: 0
    }
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day {
    border-radius: 100%;
    width: 100%;
    color: #00162e
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day:hover {
    color: var(--theme-color)
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.selected,
.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.today {
    color: #fff
}

@media (max-width: 575px) {
    .inline-time-picker {
        max-width: 410px;
        min-width: 400px;
        margin-inline: auto
    }
}

@media (max-width: 480px) {
    .inline-time-picker {
        min-width: 310px;
        max-width: min-content
    }
}

@media (max-width: 360px) {
    .inline-time-picker {
        min-width: 270px;
        max-width: min-content
    }
}

@media (max-width: 575px) {
    .inline-picker-btn {
        max-width: 410px;
        min-width: 400px;
        margin-inline: auto
    }
}

@media (max-width: 480px) {
    .inline-picker-btn {
        min-width: 310px;
        max-width: min-content
    }
}

@media (max-width: 360px) {
    .inline-picker-btn {
        min-width: 270px;
        max-width: min-content
    }
}

.mbsc-datepicker.mbsc-datepicker-inline {
    width: 100%;
    border: none
}

.mbsc-datepicker .mbsc-datepicker-tab-wrapper {
    display: block
}

.mbsc-datepicker .mbsc-calendar {
    width: 100% !important;
    background-color: red
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-slide,
.mbsc-datepicker.mbsc-datepicker .mbsc-calendar,
.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-cell {
    background-color: transparent;
    padding: 0
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-slide {
    background-color: #f5f6f7
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-cell {
    width: 30px;
    height: 30px;
    margin: auto;
    flex: none;
    border: none
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-cell>div:first-child {
    display: none
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-cell .mbsc-calendar-cell-inner .mbsc-calendar-cell-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 100%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.mbsc-datepicker.mbsc-selected .mbsc-calendar-cell-text {
    background-color: var(--theme-color);
    font-weight: 500
}

.mbsc-datepicker.mbsc-selected.mbsc-hover .mbsc-calendar-cell-text {
    background-color: var(--theme-color)
}

.mbsc-datepicker .mbsc-calendar-day-inner {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.mbsc-datepicker.mbsc-calendar-day-text {
    margin: 0
}

.mbsc-datepicker .mbsc-calendar-button.mbsc-button {
    font-size: 16px;
    font-weight: 500;
    color: #00162e;
    padding: 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    gap: 8px;
    margin: 0 auto;
    background-color: #f5f6f7
}

.mbsc-datepicker .mbsc-calendar-button.mbsc-button .mbsc-calendar-title {
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

.mbsc-datepicker .mbsc-calendar-button.mbsc-calendar-button-prev,
.mbsc-datepicker .mbsc-calendar-button.mbsc-calendar-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background-color: #f5f6f7;
    border-radius: 100%;
    padding: 7px
}

.mbsc-datepicker .mbsc-calendar-button.mbsc-calendar-button-prev .mbsc-button-icon,
.mbsc-datepicker .mbsc-calendar-button.mbsc-calendar-button-next .mbsc-button-icon {
    width: 100%;
    height: 100%;
    line-height: 1
}

.mbsc-datepicker .mbsc-calendar-button.mbsc-calendar-button-next {
    right: 0
}

[dir=rtl] .mbsc-datepicker .mbsc-calendar-button.mbsc-calendar-button-next {
    left: 0;
    right: unset
}

.mbsc-datepicker .mbsc-calendar-controls {
    position: relative;
    padding: 0;
    min-height: unset
}

.mbsc-datepicker .mbsc-calendar-week-day {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

.mbsc-datepicker .mbsc-calendar-table {
    gap: 10px
}

.mbsc-datepicker .mbsc-calendar-table .mbsc-flex {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

.mbsc-datepicker.mbsc-hover .mbsc-calendar-cell-text {
    background-color: #5465ff1f
}

.mbsc-datepicker .mbsc-calendar-body {
    padding: calc(12px + .005*(100vw - 320px));
    border-radius: 12px;
    margin-top: 15px;
    background-color: #f5f6f7
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-cell-inner {
    padding: 0
}

.mbsc-datepicker.mbsc-datepicker .mbsc-calendar-cell-inner .mbsc-calendar-cell-text {
    min-width: unset;
    padding: 0;
    width: 30px !important;
    height: 30px !important
}

.mbsc-datepicker .mbsc-calendar-row {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
}

.mbsc-datepicker .mbsc-calendar-row:has(.mbsc-calendar-month-inner, .mbsc-calendar-year-text) {
    grid-template-columns: 1fr 1fr 1fr
}

.mbsc-datepicker .mbsc-calendar-row:has(.mbsc-calendar-month-inner, .mbsc-calendar-year-text) .mbsc-calendar-cell {
    width: 100%;
    height: 100%
}

.mbsc-datepicker .mbsc-calendar-row:has(.mbsc-calendar-month-inner, .mbsc-calendar-year-text) .mbsc-calendar-cell-inner {
    width: 100%;
    height: 100%
}

.mbsc-datepicker .mbsc-calendar-row:has(.mbsc-calendar-month-inner, .mbsc-calendar-year-text) .mbsc-calendar-cell-inner .mbsc-calendar-cell-text {
    width: 100% !important;
    height: 100% !important;
    border-radius: 5px;
    padding: 12px
}

.mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab {
    width: 100%;
    min-height: unset;
    margin-top: 22px;
    background-color: #f5f6f7;
    border-radius: 12px;
    padding: calc(12px + .005*(100vw - 320px));
    max-height: 250px
}

.mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab .mbsc-timegrid-container {
    position: relative;
    inset: unset;
    display: flex;
    flex-direction: column;
    gap: calc(9px + .00375*(100vw - 320px))
}

.mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab .mbsc-timegrid-container .mbsc-timegrid-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(9px + .00375*(100vw - 320px))
}

.mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab .mbsc-timegrid-container .mbsc-timegrid-row .mbsc-timegrid-cell>div:first-child {
    display: none
}

.mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab .mbsc-timegrid-container .mbsc-timegrid-row .mbsc-timegrid-cell .mbsc-timegrid-item {
    margin: 0;
    line-height: 1.3;
    padding: 10px;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #808b97
}

.mbsc-datepicker .mbsc-datepicker-tab-timegrid.mbsc-datepicker-tab .mbsc-timegrid-container .mbsc-timegrid-row .mbsc-timegrid-cell .mbsc-timegrid-item.mbsc-selected {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 500
}

.card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E5E8EA;
    margin: 0
}

.card:hover .card-img {
    transform: scale(1.1) rotate(2deg)
}

.card .card-img img {
    width: 100%;
    height: 100%
}

.card.dark-card {
    background-color: #ffffff1a;
    color: #808b97;
    border: none
}

.card.dark-card .card-body .card-title h4 {
    color: #fff
}

.card.gray-card {
    background-color: #f5f6f7;
    border: none;
    height: calc(100% - 60px)
}

.card .card-footer {
    padding: 16px;
    background-color: transparent;
    border: none;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.card .card-footer .book-btn {
    display: inline-block;
    width: auto
}

.cart {
    background-color: #f5f6f7
}

.cart .cart-header {
    border-bottom: 1px solid #E5E8EA;
    padding: 15px
}

.cart .cart-header span {
    color: #808b97;
    margin-top: 4px;
    font-size: 16px
}

.cart .cart-body {
    padding: 15px
}

.cart .cart-body h5 {
    font-weight: 500
}

.cart .cart-body .cart-img img {
    height: 250px
}

.cart .cart-body .cart-item {
    background-color: #fff;
    border: 1px solid #E5E8EA;
    border-radius: 8px;
    margin-bottom: 20px
}

.cart .cart-body .cart-item:last-child {
    margin: 0
}

.cart .cart-body .cart-item .cart-heading {
    padding: 16px;
    border-bottom: 1px solid #E5E8EA;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (max-width: 480px) {
    .cart .cart-body .cart-item .cart-heading {
        flex-direction: column;
        align-items: flex-start
    }
}

.cart .cart-body .cart-item .cart-heading .cart-title {
    display: flex;
    align-items: center;
    gap: 8px
}

.cart .cart-body .cart-item .cart-heading .cart-title p {
    margin: 0;
    font-weight: 500;
    color: #00162e;
    font-size: calc(16px + .00125*(100vw - 320px));
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.cart .cart-body .cart-item .cart-heading .cart-title .rate {
    margin: 0
}

.cart .cart-body .cart-item .cart-heading .cart-title .rate .star {
    width: 13px;
    height: 13px
}

@media (max-width: 480px) {
    .cart .cart-body .cart-item .cart-heading .cart-title .img-45 {
        width: 35px !important;
        height: 35px !important
    }
}

.cart .cart-body .cart-item .cart-heading .cart-action {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 480px) {
    .cart .cart-body .cart-item .cart-heading .cart-action {
        gap: 8px;
        margin-left: 40px
    }
}

.cart .cart-body .cart-item .cart-heading .cart-action button {
    background-color: unset;
    border: none;
    padding: 0
}

@media (max-width: 480px) {

    .cart .cart-body .cart-item .cart-heading .cart-action button .edit,
    .cart .cart-body .cart-item .cart-heading .cart-action button .delete {
        width: 30px;
        height: 30px;
        --Iconsax-Size: 17px
    }
}

.cart .cart-body .cart-item .cart-detail {
    padding: 16px
}

.cart .cart-body .cart-item .cart-detail .selected-service {
    display: flex;
    align-items: start;
    gap: 16px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #E5E8EA
}

@media (max-width: 575px) {
    .cart .cart-body .cart-item .cart-detail .selected-service {
        flex-direction: column;
        align-items: start
    }
}

.cart .cart-body .cart-item .cart-detail .selected-service .selected-img {
    width: 160px;
    height: 160px;
    object-fit: cover
}

@media (max-width: 991px) {
    .cart .cart-body .cart-item .cart-detail .selected-service .selected-img {
        width: 120px;
        height: 120px;
        object-fit: cover
    }
}

@media (max-width: 767px) {
    .cart .cart-body .cart-item .cart-detail .selected-service .selected-img {
        width: 100px;
        height: 100px;
        object-fit: cover
    }
}

.cart .cart-body .cart-item .cart-detail .selected-service .mw-80 {
    width: 136px;
    height: auto;
    border-radius: 6px
}

@media (max-width: 575px) {
    .cart .cart-body .cart-item .cart-detail .selected-service .mw-80 {
        width: 100%;
        height: calc(136px + .075*(100vw - 320px));
        border-radius: calc(4px + .00125*(100vw - 320px));
        object-fit: cover
    }
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info {
    width: calc(100% - 152px)
}

@media (max-width: 575px) {
    .cart .cart-body .cart-item .cart-detail .selected-service .service-info {
        width: 100%
    }
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info h5 {
    margin-top: 10px;
    color: #00162e
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info p {
    margin-top: 5px;
    line-height: 1.5;
    font-size: 16px;
    color: #808b97
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .date {
    display: flex;
    align-items: center
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li {
    border-right: 1px solid #E5E8EA;
    padding: 0 10px;
    font-size: 13px
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li:first-child {
    padding-left: 0
}

[dir=rtl] .cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li:first-child {
    padding-left: unset;
    padding-right: 0
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li:last-child {
    border: none;
    padding-right: 0
}

[dir=rtl] .cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li:last-child {
    padding-right: unset;
    padding-left: 0
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li i {
    --Iconsax-Color: #808B97
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .date li span {
    color: #808b97
}

.cart .cart-body .cart-item .cart-detail .selected-service .service-info .servicemen-list-item {
    width: max-content;
    min-width: 250px
}

@media (max-width: 360px) {
    .cart .cart-body .cart-item .cart-detail .selected-service .service-info .servicemen-list-item {
        min-width: 220px
    }
}

.cart .cart-body .cart-item .cart-detail i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #00162E
}

.cart .cart-body .form-control {
    padding-left: 16px;
    border: 2px dashed #E5E8EA;
    font-size: 16px;
    font-weight: 500;
    color: var(--theme-color)
}

.cart .cart-body .form-control:hover {
    color: var(--theme-color)
}

.cart .cart-body .pattern-input {
    border: 1px dashed var(--theme-color);
    color: var(--theme-color) !important;
    background-color: #5465ff1a
}

.cart .cart-body .pattern-input:hover,
.cart .cart-body .pattern-input:focus {
    background-color: #5465ff1a;
    color: var(--theme-color)
}

.cart.empty-cart .cart-body .cart-items {
    text-align: center
}

.pattern-btn {
    background-color: #fff;
    border: 2px dashed #E5E8EA;
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 500;
    padding: calc(7px + (16 - 7) * ((100vw - 320px) / (1920 - 320))) 16px;
    border-left: none;
    margin-left: 0 !important;
    position: relative;
    border-radius: 8px
}

[dir=rtl] .pattern-btn {
    border-left: 2px dashed #E5E8EA;
    border-right: none;
    margin-left: unset !important;
    margin-right: 0 !important
}

.pattern-btn:after,
.pattern-btn:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    display: block;
    border-width: 1px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #f5f6f7;
    z-index: 5
}

.pattern-btn:after {
    border-right-color: #e5e8ea;
    border-left-color: #e5e8ea;
    border-top-color: #e5e8ea;
    left: -7px;
    bottom: -4px
}

[dir=rtl] .pattern-btn:after {
    left: unset;
    right: -7px
}

.pattern-btn:before {
    border-right-color: #e5e8ea;
    border-left-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    left: -7px;
    top: -4px
}

[dir=rtl] .pattern-btn:before {
    left: unset;
    right: -7px
}

.form-control.pattern-input {
    border: 1px dashed #5465FF !important;
    color: var(--theme-color);
    background-color: #5465ff1a;
    border-radius: 8px
}

.form-control.pattern-input:hover,
.form-control.pattern-input:focus {
    background-color: #5465ff1a;
    color: var(--theme-color)
}

.pattern-btn-1 {
    background-color: #fff;
    border: 1px dashed var(--theme-color);
    background-color: #5465ff1a;
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 500;
    padding: calc(7px + (16 - 7) * ((100vw - 320px) / (1920 - 320))) 16px;
    border-left: none;
    margin-left: 0 !important;
    position: relative;
    border-radius: 8px
}

[dir=rtl] .pattern-btn-1 {
    border-left: 1px dashed var(--theme-color);
    border-right: none;
    margin-left: unset !important;
    margin-right: 0 !important
}

.pattern-btn-1:after,
.pattern-btn-1:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: dashed transparent;
    display: block;
    border-width: 1px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #f5f6f7;
    z-index: 5
}

.pattern-btn-1:after {
    border-right-color: var(--theme-color);
    border-left-color: var(--theme-color);
    border-top-color: var(--theme-color);
    left: -7px;
    bottom: -4px
}

[dir=rtl] .pattern-btn-1:after {
    left: unset;
    right: -7px
}

.pattern-btn-1:before {
    border-right-color: var(--theme-color);
    border-left-color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    left: -7px;
    top: -4px
}

[dir=rtl] .pattern-btn-1:before {
    left: unset;
    right: -7px
}

.view {
    margin-top: 8px;
    background-color: #5465ff1a;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 20px
}

.view span {
    color: #808b97;
    font-size: 16px;
    line-height: 20px
}

.view .value {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: var(--theme-color)
}

.view .btn {
    padding: calc(4px + .00375*(100vw - 320px)) calc(12px + .0075*(100vw - 320px));
    font-size: calc(14px + .0025*(100vw - 320px))
}

.view .btn i svg {
    width: calc(14px + .00375*(100vw - 320px));
    height: calc(14px + .00375*(100vw - 320px))
}

.price {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: var(--theme-color)
}

.discount {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #ff4b4b;
    white-space: nowrap
}

.bill-summary,
.payment-summary {
    overflow: hidden
}

.bill-summary .charge,
.bill-summary .total,
.payment-summary .charge,
.payment-summary .total {
    background-color: #fff;
    border: 1px solid #E5E8EA;
    border-radius: 8px;
    padding: calc(16px + .0025*(100vw - 320px));
    display: flex;
    flex-direction: column;
    gap: 11px
}

@media (max-width: 575px) {

    .bill-summary .charge,
    .bill-summary .total,
    .payment-summary .charge,
    .payment-summary .total {
        gap: 6px
    }
}

.bill-summary .charge:before,
.bill-summary .total:before,
.payment-summary .charge:before,
.payment-summary .total:before {
    display: none
}

.bill-summary .charge p,
.bill-summary .total p,
.payment-summary .charge p,
.payment-summary .total p {
    margin: 0;
    font-size: 17px
}

.bill-summary .charge li,
.bill-summary .total li,
.payment-summary .charge li,
.payment-summary .total li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin: 0
}

@media (max-width: 575px) {

    .bill-summary .charge li,
    .bill-summary .total li,
    .payment-summary .charge li,
    .payment-summary .total li {
        flex-direction: column;
        align-items: start;
        gap: 2px
    }
}

.bill-summary .charge,
.payment-summary .charge {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.bill-summary .charge p,
.payment-summary .charge p {
    color: #808b97;
    display: flex;
    align-items: center;
    gap: 6px
}

.bill-summary .charge p span,
.payment-summary .charge p span {
    color: #00162e;
    font-weight: 600;
    font-size: 20px
}

.bill-summary .charge span,
.payment-summary .charge span {
    color: #00162e;
    font-weight: 500;
    font-size: 16px
}

.bill-summary .charge .badge,
.payment-summary .charge .badge {
    color: unset
}

.bill-summary .total,
.payment-summary .total {
    position: relative;
    border-top-right-radius: 0;
    border-top-left-radius: 0
}

.bill-summary .total p,
.payment-summary .total p {
    color: #00162e;
    font-weight: 500;
    font-size: 20px
}

.bill-summary .total span,
.payment-summary .total span {
    color: var(--theme-color);
    font-weight: 700;
    font-size: 22px
}

.bill-summary .total:after,
.bill-summary .total:before,
.payment-summary .total:after,
.payment-summary .total:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    display: block;
    border-width: 1px;
    width: 15px;
    height: 15px;
    top: -8px;
    border-radius: 100%;
    background-color: #f5f6f7
}

[dir=rtl] .bill-summary .total:after,
[dir=rtl] .bill-summary .total:before,
[dir=rtl] .payment-summary .total:after,
[dir=rtl] .payment-summary .total:before {
    right: unset;
    left: -8px
}

.bill-summary .total:after,
.payment-summary .total:after {
    border-left-color: #e5e8ea;
    border-top-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    right: -8px
}

[dir=rtl] .bill-summary .total:after,
[dir=rtl] .payment-summary .total:after {
    left: unset;
    right: -8px
}

.bill-summary .total:before,
.payment-summary .total:before {
    border-right-color: #e5e8ea;
    border-top-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    left: -8px
}

[dir=rtl] .bill-summary .total:before,
[dir=rtl] .payment-summary .total:before {
    right: unset;
    left: -8px
}

.bill-summary .charge {
    border-bottom: unset
}

.edit {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #00162E;
    background-color: #f5f6f7;
    border-radius: 100%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.delete {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #FF4B4B;
    background-color: #ff4b4b1a;
    border-radius: 100%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.servoice-info-modal {
    border: none;
    background-color: unset;
    padding: 0
}

.servoice-info-modal i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #5465FF
}

.coupon-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 670px;
    overflow: auto
}

.coupon-item {
    border: 1px solid #E5E8EA;
    border-radius: 12px
}

.coupon-item .coupon-content {
    position: relative;
    gap: 8px;
    padding: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between
}

[dir=rtl] .coupon-item .coupon-content {
    text-align: right
}

.coupon-item .coupon-content h5 {
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 6px
}

.coupon-item .coupon-content p {
    color: #808b97 !important;
    line-height: 18px;
    margin: 0
}

.coupon-item .coupon-content p span {
    font-weight: 700
}

.coupon-item .coupon-content .percent {
    font-size: 18px;
    width: 80px;
    font-weight: 700;
    line-height: 19px;
    padding-left: 30px;
    border-left: 1px dashed rgba(0, 22, 46, .4)
}

[dir=rtl] .coupon-item .coupon-content .percent {
    padding-left: unset;
    padding-right: 30px;
    border-left: unset;
    border-right: 1px dashed rgba(0, 22, 46, .4)
}

.coupon-item .coupon-content:after,
.coupon-item .coupon-content:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    display: block;
    border-width: 1px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    border-right-color: #e5e8ea;
    border-left-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    top: -3px
}

.coupon-item .coupon-content:after {
    right: 95px
}

[dir=rtl] .coupon-item .coupon-content:after {
    right: unset;
    left: 95px
}

.coupon-item .coupon-content:before {
    left: 40px
}

[dir=rtl] .coupon-item .coupon-content:before {
    left: unset;
    right: 40px
}

.coupon-item .coupon-footer {
    background-color: #5465ff1a;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 35px 20px 20px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px
}

.coupon-item .coupon-footer p {
    margin: 0;
    color: #808b97 !important
}

.coupon-item .coupon-footer p span {
    color: #00162e
}

.coupon-item .coupon-footer .use-code {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-color);
    font-weight: 500;
    line-height: 18px
}

.coupon-item .coupon-footer .use-code i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465FF
}

.circle {
    background-image: url(https://osoncor.tj/build/assets/circle-ac9ecba2.png);
    background-position: top left;
    background-repeat: repeat-x;
    background-size: contain;
    height: 22px;
    width: 100%;
    margin: -14px 0;
    position: relative;
    z-index: 1
}

.payment {
    background-color: #f5f6f7;
    border-radius: 15px
}

.payment .payment-header {
    border-bottom: 1px solid #E5E8EA;
    padding: calc(16px + .0025*(100vw - 320px));
    position: relative;
    display: flex;
    align-items: start;
    justify-content: space-between
}

.payment .payment-header span {
    color: #808b97;
    margin-top: 4px;
    font-size: 16px
}

.payment .payment-header .back-icon {
    --Iconsax-Size: calc(16px + .00125*(100vw - 320px));
    --Iconsax-Color: #00162E;
    position: absolute;
    top: calc(14px + (21 - 14) * ((100vw - 320px) / (1920 - 320)));
    left: 18px
}

[dir=rtl] .payment .payment-header .back-icon {
    left: unset;
    right: 18px
}

@media (max-width: 767px) {
    .payment .payment-header {
        flex-direction: column;
        align-items: start
    }

    [dir=rtl] .payment .payment-header {
        align-items: end
    }

    .payment .payment-header .edit-option {
        padding-left: 24px
    }

    [dir=rtl] .payment .payment-header .edit-option {
        padding-left: unset;
        padding-right: 24px
    }
}

.payment .payment-body {
    padding: calc(16px + .0025*(100vw - 320px));
    overflow: auto;
    height: 450px
}

.payment .payment-body .payment-options .payment-option {
    background-color: #fff;
    border: 1px solid #E5E8EA;
    border-radius: 10px;
    padding: calc(12px + .005*(100vw - 320px));
    cursor: pointer
}

.payment .payment-body .payment-options .payment-option .payment-title {
    display: flex;
    align-items: center;
    gap: calc(8px + .005*(100vw - 320px))
}

.payment .payment-body .payment-options .payment-option .payment-title a {
    color: #00162e
}

.payment .payment-body .payment-options .payment-option .payment-title h4 {
    line-height: 23px;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.payment .payment-body .payment-options .payment-option .payment-title h4.wallet:hover {
    color: var(--theme-color)
}

.payment .payment-body .payment-options .payment-option .payment-title p {
    margin: 0;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #808b97;
    line-height: 20px
}

.payment .payment-body .payment-options .payment-option .payment-title p span {
    font-weight: 700;
    color: #27af4d
}

.payment .payment-body .payment-options .payment-option .payment-title .payment-img {
    height: 50px;
    width: 80px;
    background-color: #f5f6f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.payment .payment-body .payment-options .payment-option .payment-title .payment-img .payment-icon {
    padding: 4px;
    height: 40px;
    object-fit: contain
}

.payment .payment-body .payment-options .payment-option .payment-title .payment-img .active {
    display: block
}

.payment .payment-body .payment-options .payment-option .form-check {
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse
}

.payment .payment-body .payment-options .payment-option .form-check .form-radio-input:checked~.payment-title .payment-img {
    background-color: #5465ff1a
}

.payment .payment-body .payment-options .payment-option .form-check .form-radio-input:checked~.payment-title .payment-img .active {
    display: block
}

.payment .payment-body .payment-options .payment-option .form-check .form-radio-input:checked~.payment-title~a {
    color: var(--theme-color);
    display: block
}

.payment .payment-footer {
    padding: 20px;
    border-top: 1px solid #E5E8EA
}

.payment .payment-footer .btn {
    width: max-content;
    padding: 10px 46px;
    padding: calc(4px + .00375*(100vw - 320px)) calc(20px + .01625*(100vw - 320px));
    font-size: calc(14px + .0025*(100vw - 320px))
}

.payment .payment-footer .payment-btn {
    margin-left: auto
}

[dir=rtl] .payment .payment-footer .payment-btn {
    margin-left: unset;
    margin-right: auto
}

.payment .wallet-body {
    padding: 20px
}

.payment .wallet-body .total-balance {
    background-color: var(--theme-color);
    background-image: url(https://osoncor.tj/build/assets/3-ca0d41ee.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    padding: calc(10px + .00625*(100vw - 320px));
    margin-bottom: 20px
}

.payment .wallet-body .total-balance p {
    color: #ffffffb3;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 20px
}

.payment .wallet-body .total-balance h3 {
    font-weight: 700;
    color: #fff;
    line-height: 31px
}

.payment .wallet-body .wallet-history {
    overflow: auto;
    height: 660px
}

.payment .wallet-body .wallet-history .history-list {
    border: 1px solid #E5E8EA;
    padding: 16px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    box-shadow: 0 4px 4px #00162e0f
}

.payment .wallet-body .wallet-history .history-list .status {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    line-height: 23px
}

.payment .wallet-body .wallet-history .history-list .date {
    font-size: 16px;
    color: #808b97;
    line-height: 20px
}

.payment .wallet-body .wallet-history .history-list .balance {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 23px
}

.payment .wallet-body .wallet-history .history-list .credit,
.payment .wallet-body .wallet-history .history-list .debit {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px
}

.payment .wallet-body .wallet-history .history-list .credit {
    color: #27af4d
}

.payment .wallet-body .wallet-history .history-list .debit {
    color: #ff4b4b
}

@media (max-width: 767px) {
    .payment .wallet-body .wallet-history .history-list {
        flex-direction: column;
        align-items: start
    }
}

.payment .wallet-body .select-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 24px;
    margin: 0
}

.payment .wallet-body .select-date h4 {
    color: #00162e;
    font-weight: 500
}

.payment .wallet-body .select-date .date-pick {
    display: flex;
    align-items: center;
    gap: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)))
}

.payment .wallet-body .select-date .date-pick label {
    white-space: nowrap
}

.payment .wallet-body .select-date .date-pick .input-group input {
    border-radius: 8px;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    max-width: 232px;
    width: 100%;
    z-index: 0
}

@media (max-width: 767px) {
    .payment .wallet-body .select-date {
        gap: 10px;
        flex-direction: column;
        align-items: start;
        justify-content: unset
    }
}

.review-section .review-content .review-card {
    border: 1px solid #E5E8EA;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    background-color: #f5f6f7;
    display: block
}

.review-section .review-content .review-card+.review-card {
    margin-top: 20px
}

.review-section .review-content .review-card .review-detail {
    display: block;
    position: relative
}

.review-section .review-content .review-card .review-detail .review-image-box {
    border-radius: 100%;
    width: calc(30px + .00625*(100vw - 320px));
    height: calc(30px + .00625*(100vw - 320px));
    overflow: hidden
}

.review-section .review-content .review-card .review-detail .review-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.review-section .review-content .review-card .review-detail .review-image-box .initial-letter {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #00162e;
    font-size: 24px;
    line-height: 1;
    font-weight: 500
}

.review-section .review-content .review-card .review-detail .review-top-box {
    display: flex;
    align-items: center;
    gap: 13px
}

.review-section .review-content .review-card .review-detail .review-auth-name {
    display: flex;
    align-items: center;
    gap: calc(4px + (11 - 4) * ((100vw - 320px) / (1920 - 320)));
    flex-wrap: wrap;
    width: calc(100% - (30px + .00625*(100vw - 320px)) - 13px)
}

.review-section .review-content .review-card .review-detail .review-auth-name h4 {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3
}

.review-section .review-content .review-card .review-detail .review-auth-name span {
    line-height: 1.5;
    position: relative;
    color: #808b97;
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)))
}

.review-section .review-content .review-card .review-detail .review-right-box {
    margin-top: 15px
}

.review-section .review-content .review-card .review-detail .review-right-box h4 {
    font-weight: 600;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.review-section .review-content .review-card .review-detail .review-right-box span {
    color: #808b97;
    font-weight: 500
}

.review-section .review-content .review-card .review-detail .review-right-box h4,
.review-section .review-content .review-card .review-detail .review-right-box span {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all
}

.review-section .review-content .review-card .review p {
    font-size: calc(14px + .00125*(100vw - 320px));
    line-height: 1.4
}

.review-section .review-content .review-card .review .comment-box {
    margin-top: 19px
}

.review-section .review-content .review-card .review .comment-box .btn {
    border-radius: 7px;
    margin-top: 13px;
    font-weight: 500
}

.review-section .review-content .review-card .review .comment-box.reply-box {
    display: flex;
    align-items: center;
    gap: 10px
}

.review-section .review-content .review-card .review .comment-box.reply-box .reply-btn {
    display: inline-block;
    width: auto;
    margin-top: 0
}

.review-section .review-content .review-card .favourite {
    top: 0;
    right: calc(-3px + .01125*(100vw - 320px));
    left: unset;
    padding: 0;
    background-color: unset
}

[dir=rtl] .review-section .review-content .review-card .favourite {
    right: unset;
    left: calc(-3px + .01125*(100vw - 320px))
}

.review-section .review-content .review-card .favourite .nolike {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #808B97
}

.review-section .review-content .review-card .favourite .nolike.hide {
    display: none
}

.review-section .review-content .review-card .favourite .like {
    height: calc(16px + .0025*(100vw - 320px)) !important;
    width: calc(16px + .0025*(100vw - 320px)) !important;
    display: none
}

.review-section .review-content .review-card .favourite .like.show {
    display: block
}

.review-section .review-content .review-card>ul {
    border: unset;
    padding: 0;
    border-radius: unset;
    background-color: unset;
    margin-top: 20px;
    margin-left: 0;
    border-left: 1px solid #E5E8EA;
    display: grid;
    gap: calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .review-section .review-content .review-card>ul {
    margin-left: unset;
    margin-right: 0;
    border-left: none;
    border-right: 1px solid #E5E8EA
}

.review-section .review-content .review-card>ul>.review-card {
    border: none;
    padding: 0;
    padding-left: calc(16px + .0025*(100vw - 320px));
    position: relative
}

[dir=rtl] .review-section .review-content .review-card>ul>.review-card {
    padding-left: unset;
    padding-right: calc(16px + .0025*(100vw - 320px))
}

.review-section .review-content .review-card>ul>.review-card:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    width: calc(30px + .0125*(100vw - 320px));
    height: 1px;
    border-top: 1px solid #E5E8EA
}

[dir=rtl] .review-section .review-content .review-card>ul>.review-card:before {
    left: unset;
    right: 0
}

.review-section .review-content .review-card>ul>.review-card+.review-card {
    margin: 0
}

.comment-section form {
    border: 1px solid #E5E8EA;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    background-color: #f5f6f7
}

.comment-section form .btn {
    width: max-content
}

.dropdown .onhover-show-div {
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    background-color: #fff;
    box-shadow: 0 0 7px #0000001a;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -5%, 0);
    top: 35px;
    right: 14px;
    padding: 14px;
    border-radius: 4px
}

[dir=rtl] .dropdown .onhover-show-div {
    left: 14px;
    right: unset
}

.dropdown .onhover-show-div li {
    display: block;
    cursor: pointer;
    transition: all .3s
}

.dropdown .onhover-show-div li:hover a {
    color: var(--theme-color)
}

.dropdown .onhover-show-div li+li {
    margin-top: 5px
}

.dropdown:hover .onhover-show-div {
    opacity: 1;
    visibility: visible;
    transform: none
}

.dropdown.select-dropdown-div .select-btn {
    background: #ffffff;
    color: #00162e;
    border: none;
    padding: 12px;
    gap: 12px;
    height: calc(38px + .00375*(100vw - 320px));
    border-radius: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dropdown.select-dropdown-div .select-btn i {
    --Iconsax-Size: 18px !important
}

.dropdown.select-dropdown-div .select-btn span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-size: 15px
}

.dropdown.select-dropdown-div .select-btn span img {
    width: 22px
}

.dropdown.select-dropdown-div .select-show-div {
    transition: all ease-in-out .3s;
    position: absolute;
    z-index: 3;
    background-color: #fff;
    transform: translate3d(0, -5%, 0);
    top: 60px;
    right: 0;
    padding: 14px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    width: 100%
}

[dir=rtl] .dropdown.select-dropdown-div .select-show-div {
    left: 0;
    right: unset
}

.dropdown.select-dropdown-div .select-show-div.active {
    opacity: 1;
    visibility: visible;
    transition: all ease-in-out .3s
}

.dropdown.select-dropdown-div .select-show-div .select-show-div-item {
    width: 100%;
    cursor: pointer
}

.dropdown.select-dropdown-div .select-show-div .select-show-div-item span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px
}

.dropdown.select-dropdown-div .select-show-div .select-show-div-item span img {
    width: 22px
}

.select-dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.select-dropdown .onhover-show-div {
    min-width: 120px;
    right: 14px;
    padding: 14px
}

[dir=rtl] .select-dropdown .onhover-show-div {
    left: 14px;
    right: unset
}

.select-dropdown .onhover-show-div li {
    display: block;
    cursor: pointer;
    transition: all .3s
}

.select-dropdown .onhover-show-div li:hover {
    color: var(--theme-color);
    transform: translate(5px)
}

[dir=rtl] .select-dropdown .onhover-show-div li:hover {
    transform: translate(-5px)
}

.select-dropdown .onhover-show-div li+li {
    margin-top: 5px
}

.select-dropdown .form-group {
    display: flex;
    align-items: center;
    gap: 16px
}

.select-dropdown .form-group label {
    color: #808b97;
    font-size: 16px
}

.basic-wizard .stepper-horizontal {
    padding: 20px;
    width: 100%;
    margin: 0 auto 24px;
    border-bottom: 1px solid #E5E8EA;
    display: flex;
    justify-content: center;
    gap: 20px
}

@media (max-width: 767px) {
    .basic-wizard .stepper-horizontal {
        flex-direction: column;
        gap: calc(12px + (16 - 12) * ((100vw - 320px) / (768 - 320)))
    }
}

.basic-wizard .stepper-horizontal .step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px
}

.basic-wizard .stepper-horizontal .step:last-child:after {
    display: none
}

.basic-wizard .stepper-horizontal .step:after {
    content: "";
    position: relative;
    border-bottom: 1px dashed var(--theme-color);
    height: 1px;
    width: 50px;
    inset: unset
}

@media (max-width: 767px) {
    .basic-wizard .stepper-horizontal .step:after {
        display: none
    }
}

.basic-wizard .stepper-horizontal .step .step-title {
    font-size: calc(16px + .00125*(100vw - 320px));
    white-space: nowrap;
    color: #808b97
}

.basic-wizard .stepper-horizontal .step.stepper .step-circle {
    border: 1px dashed var(--theme-color);
    color: var(--theme-color);
    font-weight: 600
}

.basic-wizard .stepper-horizontal .step.stepper .step-title {
    color: var(--theme-color);
    font-weight: 600
}

.basic-wizard .stepper-horizontal .step:first-child {
    padding-left: 0
}

[dir=rtl] .basic-wizard .stepper-horizontal .step:first-child {
    padding-left: unset;
    padding-right: 0
}

@media (max-width: 767px) {
    .basic-wizard .stepper-horizontal .step:first-child {
        padding-right: 0
    }

    [dir=rtl] .basic-wizard .stepper-horizontal .step:first-child {
        padding-right: unset;
        padding-left: 0
    }
}

.basic-wizard .stepper-horizontal .step:last-child {
    padding-right: 0
}

[dir=rtl] .basic-wizard .stepper-horizontal .step:last-child {
    padding-right: unset;
    padding-left: 0
}

@media (max-width: 767px) {
    .basic-wizard .stepper-horizontal .step:last-child {
        padding-left: 0
    }

    [dir=rtl] .basic-wizard .stepper-horizontal .step:last-child {
        padding-left: unset;
        padding-right: 0
    }
}

.basic-wizard .stepper-horizontal .step:last-child .step-bar-left,
.basic-wizard .stepper-horizontal .step:last-child .step-bar-right {
    display: none
}

.basic-wizard .stepper-horizontal .step .step-circle {
    width: calc(48px + .00875*(100vw - 320px));
    height: calc(48px + .00875*(100vw - 320px));
    border-radius: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(20px + .00125*(100vw - 320px));
    font-weight: 500;
    border: 1px solid #E5E8EA;
    color: #808b97
}

.basic-wizard .stepper-horizontal .step.done .step-circle {
    background-color: var(--theme-color);
    border: 1px solid var(--theme-color);
    color: #fff;
    position: relative
}

.basic-wizard .stepper-horizontal .step.done .step-circle:before {
    content: "";
    position: absolute;
    top: calc(10px + .00125*(100vw - 320px));
    left: calc(10px + .00125*(100vw - 320px));
    background-image: url(https://osoncor.tj/build/assets/tick-4cef7c44.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;
    width: 20px;
    height: 20px
}

[dir=rtl] .basic-wizard .stepper-horizontal .step.done .step-circle:before {
    left: unset;
    right: calc(10px + .00125*(100vw - 320px))
}

.basic-wizard .stepper-horizontal .step.done .step-circle * {
    display: none
}

.basic-wizard .stepper-horizontal .step.done .step-title {
    color: var(--theme-color)
}

.basic-wizard .stepper-horizontal .step.done~.step .step-circle {
    border: 1px dashed var(--theme-color);
    color: var(--theme-color)
}

.basic-wizard .stepper-horizontal .step.done~.step .step-title {
    color: var(--theme-color);
    font-weight: 600
}

.basic-wizard .stepper-horizontal .step .step-title,
.basic-wizard .stepper-horizontal .step .step-optional {
    text-align: center
}

.service-booking {
    padding: calc(20px + .00625*(100vw - 320px));
    width: 100%
}

.service-booking ul .booking-list {
    padding-bottom: calc(20px + .01875*(100vw - 320px));
    position: relative
}

.service-booking ul .booking-list:before {
    content: "";
    position: absolute;
    border-left: 1px dashed #808B97;
    opacity: .3;
    top: 16px;
    left: 7px;
    height: calc(100% - 16px)
}

[dir=rtl] .service-booking ul .booking-list:before {
    left: unset;
    right: 7px
}

.service-booking ul .booking-list:last-child {
    padding: 0
}

.service-booking ul .booking-list:last-child:before {
    display: none
}

.service-booking ul .invalid-feedback {
    position: absolute;
    left: 40px;
    bottom: 30px
}

[dir=rtl] .service-booking ul .invalid-feedback {
    left: unset;
    right: 40px
}

.service-booking h3 {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 23px;
    color: #00162e
}

.service-booking .delivery-location {
    background-color: #fff !important;
    border: 1px solid #E5E8EA !important;
    border-radius: 10px;
    margin-bottom: 0;
    height: 100%;
    overflow: unset
}

.service-booking .delivery-location .location-header {
    padding: calc(10px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-bottom: 1px solid #E5E8EA
}

@media (max-width: 575px) {
    .service-booking .delivery-location .location-header {
        flex-direction: column;
        align-items: start
    }

    [dir=rtl] .service-booking .delivery-location .location-header {
        align-items: end
    }
}

.service-booking .delivery-location .location-header .location-icon {
    border-radius: 100%;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    background-color: #e5e8ea;
    border: calc(2px + .00125*(100vw - 320px)) solid #ffffff;
    outline: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: center
}

.service-booking .delivery-location .location-header .location-icon img {
    height: 24px
}

@media (max-width: 575px) {
    .service-booking .delivery-location .location-header .location-icon img {
        height: 16px
    }
}

.service-booking .delivery-location .location-header .active-icon {
    border: 1px solid var(--theme-color);
    border-radius: 100%;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.service-booking .delivery-location .location-header .active-icon img {
    background-color: var(--theme-color);
    border: 1px solid #ffffff;
    padding: calc(8px + .00125*(100vw - 320px));
    border-radius: 100%;
    height: calc(38px + .0025*(100vw - 320px));
    width: calc(38px + .0025*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.service-booking .delivery-location .location-header .name {
    text-transform: capitalize
}

.service-booking .delivery-location .location-header .name h4 {
    font-weight: 500;
    font-size: calc(16px + .00125*(100vw - 320px));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.service-booking .delivery-location .location-header .name span {
    margin-top: 4px;
    font-size: calc(14px + .00125*(100vw - 320px))
}

@media (max-width: 575px) {
    .service-booking .delivery-location .location-header .badge {
        margin-left: 50px
    }

    [dir=rtl] .service-booking .delivery-location .location-header .badge {
        margin-left: unset;
        margin-right: 50px
    }
}

.service-booking .delivery-location .address {
    padding: calc(10px + .00625*(100vw - 320px))
}

.service-booking .delivery-location .address p {
    font-size: 16px;
    line-height: 1.5;
    height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.service-booking .delivery-location .address .btn-outline {
    border-width: 1px;
    width: max-content;
    padding: 9px 18px
}

.service-booking .delivery-location .address-bottom-box {
    padding: calc(10px + .00625*(100vw - 320px)) calc(16px + .0025*(100vw - 320px));
    border-top: 1px solid #ddd;
    position: relative;
    overflow: unset
}

.service-booking .delivery-location .address-bottom-box .action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px
}

.service-booking .delivery-location .address-bottom-box .action label.error {
    position: absolute;
    bottom: -40px;
    left: 0
}

[dir=rtl] .service-booking .delivery-location .address-bottom-box .action label.error {
    left: unset;
    right: 0
}

.service-booking .delivery-location .address-bottom-box .btn {
    width: 100%;
    padding-block: 10px;
    font-weight: 500;
    border-radius: 8px
}

.service-booking .delivery-location .address-bottom-box .btn-fill {
    border: transparent;
    color: #fff;
    background-color: var(--theme-color)
}

.service-booking .delivery-location .address-bottom-box .btn-fill:hover {
    background-color: transparent;
    color: var(--theme-color);
    border: 1px solid var(--theme-color)
}

.service-booking .delivery-location .address-bottom-box .btn-outline {
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    background-color: transparent
}

.service-booking .delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--theme-color);
    color: #fff;
    border-color: transparent
}

.service-booking .delivery-location .address-bottom-box .radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

[dir=rtl] .service-booking .delivery-location .address-bottom-box .radio {
    left: unset;
    right: 0
}

.service-booking .delivery-location .radio:checked~button {
    background-color: var(--theme-color);
    color: #fff
}

.service-booking input[type=radio]:checked~.delivery-location .btn-outline {
    background-color: var(--theme-color);
    color: #fff
}

.service-booking .add-location {
    color: var(--theme-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline
}

.service-booking .add-location:hover {
    text-decoration: underline
}

.service-booking .booking-data {
    margin-top: -3px;
    width: calc(100% - 16px - (14px + .00625*(100vw - 320px)));
    margin-left: calc(14px + .00625*(100vw - 320px))
}

[dir=rtl] .service-booking .booking-data {
    margin-left: unset;
    margin-right: calc(14px + .00625*(100vw - 320px))
}

.service-booking .booking-data .select-option {
    flex-direction: row;
    background-color: transparent;
    border: none;
    background-color: #fff;
    padding: 0 0 calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) 0;
    gap: calc(4px + .0225*(100vw - 320px));
    flex-wrap: wrap
}

.service-booking .booking-data .select-option .form-check {
    border: none;
    padding: 0;
    flex-direction: row;
    align-items: flex-start
}

.service-booking .booking-data .select-option .form-check .form-radio-input {
    width: 22px;
    height: 22px;
    border: none;
    margin-top: 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.service-booking .booking-data .select-option .form-check .form-radio-input:checked:before {
    transform: translate(-50%, -50%) scale(1)
}

.service-booking .booking-data .select-option .form-check .form-radio-input:checked~label {
    font-weight: 500;
    color: #00162ee6 !important
}

.service-booking .booking-data .select-option .form-check .form-radio-input:before {
    top: 50%;
    left: 50%;
    right: unset;
    transform: translate(-50%, -50%) scale(0)
}

.service-booking .booking-data .select-option .form-check .form-radio-input:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: unset
}

.service-booking .booking-data .text-success {
    font-size: 18px
}

.service-booking .booking-data .servicemen-list-item {
    width: max-content;
    min-width: 276px;
    background-color: #f5f6f7 !important;
    border: none !important;
    box-shadow: none !important
}

@media (max-width: 480px) {
    .service-booking .booking-data .servicemen-list-item {
        min-width: 188px;
        width: auto
    }
}

.service-booking .booking-data .note {
    margin-block: 16px
}

.service-booking .form-control {
    background-color: #fff;
    border-radius: 10px;
    padding: 16px;
    color: #00162e
}

.service-booking .form-control:hover,
.service-booking .form-control:focus {
    color: #00162e;
    background-color: #fff
}

.activity-dot {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    outline: 1px solid var(--theme-color);
    position: relative;
    z-index: 0
}

.activity-dot:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: 8px;
    width: 8px;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    border-top: 1px dashed #E5E8EA;
    padding: calc(16px + .0025*(100vw - 320px)) calc(15px + (200 - 15)*((100vw - 320px) /(1920 - 320)))
}

.wizard-footer .btn-outline {
    border-width: 1px
}

.wizard-footer .next-btn {
    padding: 12px 20px;
    display: inline-block;
    width: auto
}

@media (max-width: 375px) {
    .wizard-footer .next-btn {
        width: 100%
    }
}

.wizard-footer button {
    width: max-content;
    padding: 12px 20px;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1
}

@media (max-width: 575px) {
    .wizard-footer button {
        width: 100%
    }
}

.wizard-footer.service-booking-wizard-footer {
    padding-inline: 30px
}

.wizard-footer.service-booking-footer {
    padding: calc(10px + .00625*(100vw - 320px)) calc(20px + .00625*(100vw - 320px))
}

.date-time-picket-sec {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    padding: calc(16px + .0025*(100vw - 320px))
}

.date-time-picker {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 767px) {
    .date-time-picker {
        flex-wrap: wrap
    }
}

.date-time-picker input {
    color: #00162e !important
}

.input-icon {
    position: absolute;
    top: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    left: 16px;
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97;
    z-index: 3
}

[dir=rtl] .input-icon {
    left: unset;
    right: 16px
}

.edit-option {
    background-color: unset;
    border: none;
    padding: 0;
    color: var(--theme-color);
    text-decoration: underline;
    font-size: 18px
}

.selected-men {
    background-color: #fff;
    padding: calc(16px + .0025*(100vw - 320px));
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.input-group>.form-control:focus,
.input-group>.form-select:focus,
.input-group>.form-floating:focus-within {
    z-index: 0
}

.form-control {
    border: 1px solid rgba(255, 255, 255, .1);
    background-color: #ffffff1a;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #fff;
    padding: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320))) 16px;
    width: 100%;
    border-radius: 8px
}

.form-control ::placeholder {
    color: #e5e8ea
}

.form-control.first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px
}

.form-control.last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px
}

.form-control:focus,
.form-control:hover {
    background-color: #ffffff1a;
    color: #00162e;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, .1)
}

.form-control.form-control-gray {
    background-color: #f5f6f7;
    color: #00162e
}

.form-control.form-control-gray:focus,
.form-control.form-control-gray:hover {
    background-color: #f5f6f7;
    color: #00162e;
    box-shadow: none
}

.form-control.form-control-gray ::placeholder {
    color: #e5e8ea
}

.form-control.form-control-white {
    background-color: #fff;
    color: #00162e;
    border-radius: 8px
}

.form-control.form-control-white:focus,
.form-control.form-control-white:hover {
    background-color: #fff;
    color: #00162e;
    box-shadow: none
}

.form-control.form-control-white ::placeholder {
    color: #e5e8ea
}

textarea.form-control {
    min-height: calc(39px + (46 - 39) * ((100vw - 320px) / (1920 - 320)))
}

.comment-section textarea.form-control {
    min-height: 110px
}

.form-group {
    margin-bottom: 24px
}

.form-group:last-child {
    margin-bottom: 0
}

.form-group label {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 8px;
    position: relative
}

.form-check {
    padding: 0;
    min-height: unset;
    display: flex;
    align-items: center;
    gap: 12px
}

.form-check .form-check-input,
.form-check .form-radio-input {
    cursor: pointer;
    position: relative;
    border: none;
    width: 20px;
    height: 20px;
    box-shadow: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    filter: none;
    float: unset;
    margin: 0
}

.form-check .form-check-input:focus,
.form-check .form-radio-input:focus {
    box-shadow: none
}

.form-check .form-check-input:before,
.form-check .form-radio-input:before {
    transition: transform .4s cubic-bezier(.45, 1.8, .5, .75);
    transform: rotate(-45deg) scale(0);
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    z-index: 1;
    width: .75rem;
    height: .3rem;
    border: 2px solid #ffffff;
    border-top-style: none;
    border-right-style: none
}

[dir=rtl] .form-check .form-check-input:before,
[dir=rtl] .form-check .form-radio-input:before {
    left: unset;
    right: 4px
}

.form-check .form-check-input:after,
.form-check .form-radio-input:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #E5E8EA;
    border-radius: 4px;
    cursor: pointer
}

[dir=rtl] .form-check .form-check-input:after,
[dir=rtl] .form-check .form-radio-input:after {
    left: unset;
    right: -1px
}

.form-check .form-check-input:checked:before,
.form-check .form-radio-input:checked:before {
    transform: rotate(-45deg) scale(1)
}

.form-check .form-check-input:checked:after,
.form-check .form-radio-input:checked:after {
    background-color: var(--theme-color);
    border-color: var(--theme-color)
}

.form-check .form-radio-input {
    margin: 0;
    padding: 0;
    height: 10px
}

.form-check .form-radio-input:after {
    border-radius: 100%;
    left: 0;
    top: -5px
}

[dir=rtl] .form-check .form-radio-input:after {
    left: unset;
    right: 0
}

.form-check .form-radio-input:before {
    border: none;
    background-color: var(--theme-color);
    border-radius: 100%;
    width: 10px;
    height: 10px;
    top: 0;
    left: 5px
}

[dir=rtl] .form-check .form-radio-input:before {
    left: unset;
    right: 5px
}

.form-check .form-radio-input~label {
    color: #808b97
}

.form-check .form-radio-input:checked:after {
    border: 6px solid rgba(84, 101, 255, .12);
    background-color: #fff
}

.form-check .form-radio-input:checked~label {
    font-weight: 500;
    color: #00162e
}

.form-check .form-radio-input.solid:checked:after {
    border: 1px solid var(--theme-color)
}

.form-check p {
    font-size: 16px
}

.form-check label {
    font-size: 14px
}

.login-main .login-card .login-detail .phone-detail {
    position: relative;
    overflow: unset
}

.login-main .login-card .login-detail .phone-detail label.error {
    position: absolute;
    bottom: -30px;
    left: 0
}

.login-main .login-card .login-detail.phone-detail {
    position: relative
}

.login-main .login-card .login-detail.phone-detail label .form-group.error {
    position: absolute !important;
    bottom: -30px;
    left: 0
}

.form-select {
    background-color: #f5f6f7;
    border: none;
    color: #00162e;
    font-size: 16px;
    padding: 8px 70px 8px 12px;
    border-radius: 6px
}

.form-select:focus {
    box-shadow: none
}

.form-select.form-select-white {
    background-color: #fff;
    color: #808b97;
    border-radius: 8px;
    padding: 10px 46px
}

.form-select.form-select-white:focus,
.form-select.form-select-white:hover {
    background-color: #fff;
    color: #808b97;
    box-shadow: none
}

.input-group .form-control {
    padding: 10px 16px 10px 46px
}

[dir=rtl] .input-group .form-control {
    padding: 10px 46px 10px 16px
}

.input-group.phone-field {
    gap: 10px
}

.input-group.phone-field .contact-btn {
    border-radius: 8px
}

.search-form {
    margin-top: 30px;
    width: 30%;
    margin-inline: auto;
    padding: 10px;
    border-radius: 40px !important;
    border: 1px solid rgba(255, 255, 255, .2)
}

.search-form .form-control {
    border-radius: 40px;
    color: #fff
}

.search-form ::placeholder {
    color: #808b97
}

.search-form i {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #808B97;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 1460px) {
    .search-form {
        width: 40%
    }
}

@media (max-width: 991px) {
    .search-form {
        width: 70%;
        padding: 4px
    }
}

@media (max-width: 575px) {
    .search-form {
        width: 90%;
        margin-top: 16px
    }
}

.avatar-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.avatar-group .avatar {
    width: 40px;
    height: 40px
}

.avatar-group .avatar img {
    border-radius: 100%;
    width: 100%;
    height: 100%
}

.avatar-group .avatar:first-child {
    margin-right: -20px
}

[dir=rtl] .avatar-group .avatar:first-child {
    margin-right: unset;
    margin-left: -20px
}

.avatar-group .avatar:nth-child(2) {
    width: 45px;
    height: 45px;
    position: relative;
    z-index: 1
}

.avatar-group .avatar:last-child {
    margin-left: -20px
}

[dir=rtl] .avatar-group .avatar:last-child {
    margin-left: unset;
    margin-right: -20px
}

.home-section {
    position: relative;
    background-image: url(https://osoncor.tj/build/assets/bg-3bee563f.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    padding-top: calc(60px + .00625*(100vw - 320px));
    z-index: 0
}

[dir=rtl] .home-section {
    height: auto
}

@media (max-width: 1199px) {
    .home-section {
        height: auto
    }
}

.home-section .home-icon img {
    position: absolute;
    animation: mover 2s infinite alternate;
    z-index: -1
}

.home-section .home-icon img.image-1 {
    top: 180px;
    right: -65px;
    animation-delay: 1s;
    width: 140px;
    overflow: hidden
}

[dir=rtl] .home-section .home-icon img.image-1 {
    right: unset;
    left: -65px
}

@media (max-width: 575px) {
    .home-section .home-icon img.image-1 {
        display: none
    }
}

.home-section .home-icon img.image-2 {
    top: calc(200px + (280 - 200) * ((100vw - 992px) / (1920 - 992)));
    left: 60px;
    animation-delay: 2s;
    height: 120px
}

[dir=rtl] .home-section .home-icon img.image-2 {
    left: unset;
    right: 60px
}

@media (max-width: 991px) {
    .home-section .home-icon img.image-2 {
        display: none
    }
}

.home-section .home-icon img.image-3 {
    animation-delay: 3s;
    height: 140px;
    filter: brightness(.5);
    transform: rotate3d(3, 2, 1, 180deg);
    animation: unset;
    top: calc(220px + (320 - 220) * ((100vw - 992px) / (1920 - 992)));
    right: calc(20px + (240 - 20) * ((100vw - 992px) / (1920 - 992)))
}

[dir=rtl] .home-section .home-icon img.image-3 {
    right: unset;
    left: calc(20px + (240 - 20) * ((100vw - 992px) / (1920 - 992)))
}

@media (max-width: 991px) {
    .home-section .home-icon img.image-3 {
        display: none
    }
}

.home-section .home-slider {
    margin-top: calc(220px + .16875*(100vw - 320px))
}

@media (max-width: 991px) {
    .home-section .home-slider {
        margin-top: calc(320px + .0125*(100vw - 320px))
    }
}

@media (max-width: 767px) {
    .home-section .home-slider {
        margin-top: calc(200px + .0625*(100vw - 320px))
    }
}

.home-section .home-slider .service-slider:has(.swiper-wrapper:empty) {
    display: none;
    height: 0
}

.home-section .home-slider .service-slider .swiper-wrapper {
    height: 372px;
    transition-timing-function: linear
}

.home-section .home-slider .service-slider .swiper-wrapper:has(.home-section .home-slider .service-slider .swiper-wrapper:empty) {
    display: none;
    height: 0
}

@media (max-width: 991px) {
    .home-section .home-slider .service-slider .swiper-wrapper {
        height: 332px
    }
}

@media (max-width: 575px) {
    .home-section .home-slider .service-slider .swiper-wrapper {
        height: 300px
    }
}

.home-section .home-slider .service-slider .swiper-wrapper:empty {
    display: none
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide {
    position: relative;
    padding-top: 10px
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card,
.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .img-box {
    height: 100%
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .img-box .bg-size {
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    width: 100%;
    height: 100%;
    background-position: top center !important
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .service-content {
    background: linear-gradient(180deg, rgba(0, 10, 28, 0) 0%, rgba(0, 10, 28, .4990371148) 56%, rgba(0, 10, 28, .9332107843) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #fff9;
    padding: 90px 15px 16px;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .service-content span {
    text-align: center;
    position: relative
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide:nth-child(2n) {
    padding-top: calc(40px + .0375*(100vw - 320px))
}

.home-section .home-contain {
    position: absolute;
    top: calc(80px + .05*(100vw - 320px));
    left: 0;
    right: 0;
    width: 90%;
    text-align: center;
    margin: 0 auto
}

@media (max-width: 991px) {
    .home-section .home-contain {
        top: 90px
    }
}

.home-section .home-contain h1 {
    color: #fff;
    line-height: 1
}

@media (max-width: 991px) {
    .home-section .home-contain h1 {
        width: 70%;
        margin-inline: auto
    }
}

@media (max-width: 767px) {
    .home-section .home-contain h1 {
        width: 90%
    }
}

@media (max-width: 575px) {
    .home-section .home-contain h1 {
        width: 100%
    }
}

.home-section .home-contain p {
    color: #808b97;
    font-size: 20px;
    padding-top: 50px;
    width: 45%;
    line-height: 1.5;
    margin: 0 auto
}

@media (max-width: 1660px) {
    .home-section .home-contain p {
        width: 55%
    }
}

@media (max-width: 1366px) {
    .home-section .home-contain p {
        font-size: 18px
    }
}

@media (max-width: 1199px) {
    .home-section .home-contain p {
        width: 65%;
        padding-top: 40px
    }
}

@media (max-width: 991px) {
    .home-section .home-contain p {
        display: none
    }
}

.home-section .home-contain .home-form-group {
    padding-top: 40px;
    width: 700px;
    margin: 0 auto;
    position: relative
}

@media (min-width: 992px) {
    .home-section .home-contain .home-form-group {
        padding-top: calc(15px + (30 - 15) * ((100vw - 992px) / (1920 - 992)))
    }
}

@media (max-width: 767px) {
    .home-section .home-contain .home-form-group {
        display: none
    }
}

.home-section .home-contain .home-form-group .input-group {
    padding: 10px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap
}

.home-section .home-contain .home-form-group .input-group .position-relative i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14px
}

.home-section .home-contain .home-form-group .input-group .position-relative .form-control {
    padding: 10px 16px 10px 45px;
    color: #fff;
    border-radius: 100px 0 0 100px
}

[dir=rtl] .home-section .home-contain .home-form-group .input-group .position-relative .form-control {
    border-radius: 0 100px 100px 0
}

.home-section .home-contain .home-form-group .input-group .position-relative ::placeholder {
    color: #808b97
}

.home-section .home-contain .home-form-group .input-group .btn {
    border-radius: 0 100px 100px 0;
    z-index: 0;
    padding-inline: 29px
}

[dir=rtl] .home-section .home-contain .home-form-group .input-group .btn {
    border-radius: 100px 0 0 100px
}

.home-section .home-contain .home-animation {
    position: relative;
    line-height: 1;
    margin-left: 35px;
    text-transform: uppercase;
    font-size: calc(22px + .02375*(100vw - 320px));
    letter-spacing: 2px;
    font-weight: 900;
    background: linear-gradient(to right, #fb4040 20%, #ff549c 30%, #725efe 70%, #2477ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 150% auto;
    animation: textShine 1s ease-in-out infinite alternate
}

[dir=rtl] .home-section .home-contain .home-animation {
    margin-left: unset;
    margin-right: 35px
}

.home-section .home-contain .home-animation .shape {
    border-radius: 35px;
    position: absolute;
    top: -21px;
    left: -27px;
    z-index: -1;
    width: calc(375px + (513 - 375) * ((100vw - 991px) / (1920 - 991)));
    max-width: 270px!important;
    height: calc(81px + (108 - 81) * ((100vw - 991px) / (1920 - 991)))
}

[dir=rtl] .home-section .home-contain .home-animation .shape {
    left: unset;
    right: -27px
}

@media (max-width: 991px) {
    .home-section .home-contain .home-animation .shape {
        width: calc(237px + (530 - 237) * ((100vw - 320px) / (1920 - 320)));
        max-width: 135px!important;
        height: calc(46px + .0275*(100vw - 320px));
        top: -12px;
        left: -23px
    }

    [dir=rtl] .home-section .home-contain .home-animation .shape {
        left: unset;
        right: -23px
    }
}

@media (max-width: 991px) {
    .home-section .home-contain .home-animation {
        margin-top: 25px;
        margin-left: 0
    }

    [dir=rtl] .home-section .home-contain .home-animation {
        margin-left: unset;
        margin-right: 0
    }
}

.home-section.ratio_18 .home-contain {
    width: 100%;
    top: calc(80px + .0375*(100vw - 320px))
}

.home-section.ratio_18 .home-contain h2 {
    font-size: calc(20px + .01375*(100vw - 320px));
    font-weight: 700;
    background: linear-gradient(to right, #fb4040 20%, #ff549c 30%, #725efe 50%, #2477ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 150% auto;
    width: max-content;
    margin: 0 auto;
    position: relative
}

.home-section.ratio_18 .home-contain h2:before,
.home-section.ratio_18 .home-contain h2:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: calc(14px + .0125*(100vw - 320px));
    width: 4px;
    border-radius: 6px;
    top: 4px
}

@media (max-width: 1366px) {

    .home-section.ratio_18 .home-contain h2:before,
    .home-section.ratio_18 .home-contain h2:after {
        top: 7px
    }
}

.home-section.ratio_18 .home-contain h2:before {
    left: calc(-25px + ((-40) - (-25)) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .home-section.ratio_18 .home-contain h2:before {
    right: calc(-25px + ((-40) - (-25)) * ((100vw - 320px) / (1920 - 320)));
    left: unset
}

.home-section.ratio_18 .home-contain h2:after {
    right: calc(-25px + ((-40) - (-25)) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .home-section.ratio_18 .home-contain h2:after {
    left: calc(-25px + ((-40) - (-25)) * ((100vw - 320px) / (1920 - 320)));
    right: unset
}

.home-section.ratio_18 .home-contain h2 span:before,
.home-section.ratio_18 .home-contain h2 span:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: calc(28px + .01875*(100vw - 320px));
    width: 4px;
    border-radius: 6px;
    top: -8px
}

@media (max-width: 1366px) {

    .home-section.ratio_18 .home-contain h2 span:before,
    .home-section.ratio_18 .home-contain h2 span:after {
        top: -3px
    }
}

.home-section.ratio_18 .home-contain h2 span:before {
    left: calc(-15px + ((-30) - (-15)) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .home-section.ratio_18 .home-contain h2 span:before {
    right: calc(-15px + ((-30) - (-15)) * ((100vw - 320px) / (1920 - 320)));
    left: unset
}

.home-section.ratio_18 .home-contain h2 span:after {
    right: calc(-15px + ((-30) - (-15)) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .home-section.ratio_18 .home-contain h2 span:after {
    left: calc(-15px + ((-30) - (-15)) * ((100vw - 320px) / (1920 - 320)));
    right: unset
}

.home-section.ratio_18 .home-contain p {
    font-size: 16px;
    line-height: 24px;
    max-width: 680px;
    width: 90%;
    padding-top: calc(20px + (30 - 20) * ((100vw - 991px) / (1920 - 991)))
}

@media (max-width: 991px) {
    .home-section.ratio_18 .home-contain p {
        display: none
    }
}

.home-section.ratio_18 .home-contain h3 {
    color: #fff;
    margin-top: 30px;
    font-size: 30px
}

@media (max-width: 991px) {
    .home-section.ratio_18 .home-contain h3 {
        display: none
    }
}

@media (max-width: 1199px) {
    .home-section.ratio_18 .bg-size:before {
        padding-bottom: calc((170px) + ((-60) - (170)) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media (max-width: 991px) {
    .home-section.ratio_18 .bg-size:before {
        padding-bottom: calc(60px + -.08125*(100vw - 320px))
    }
}

@media (min-width: 1200px) {
    .home-section.ratio_18 .bg-size:before {
        padding-bottom: calc((110px) + ((-70) - (110)) * ((100vw - 991px) / (1920 - 991)))
    }
}

.no-data-found {
    padding: calc(38px + .02*(100vw - 320px));
    text-align: center;
    background-color: #f5f6f7;
    width: 100%;
    border-radius: 6px
}

.no-data-found .no-data-img {
    margin-bottom: 25px
}

.no-data-found p {
    line-height: 1.3;
    font-size: calc(20px + .0025*(100vw - 320px));
    font-weight: 500
}

.no-data-found.category-no-data {
    margin-top: calc(20px + .01875*(100vw - 320px))
}

.top_rw {
    background-color: #f4f4f4
}

button {
    padding: 5px 10px;
    font-size: 14px
}

.invoice-box {
    max-width: 890px;
    margin: auto;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px #00000026;
    font-size: 14px;
    line-height: 24px;
    font-family: Helvetica Neue, Helvetica, Helvetica, Arial, sans-serif;
    color: #555
}

.invoice-box table {
    width: 100%;
    line-height: inherit;
    text-align: left;
    border-bottom: solid 1px #ccc
}

.invoice-box table td {
    padding: 5px;
    vertical-align: middle
}

.invoice-box table tr td:nth-child(2) {
    text-align: right
}

[dir=rtl] .invoice-box table tr td:nth-child(2) {
    text-align: left
}

.invoice-box table tr.top table td {
    padding-bottom: 20px
}

.invoice-box table tr.top table td.title {
    font-size: 45px;
    line-height: 45px;
    color: #333
}

.invoice-box table tr.information table td {
    padding-bottom: 40px
}

.invoice-box table tr.heading td {
    background: #eee;
    border-bottom: 1px solid #ddd;
    font-weight: 700;
    font-size: 12px
}

.invoice-box table tr.details td {
    padding-bottom: 20px
}

.invoice-box table tr.item td {
    border-bottom: 1px solid #eee
}

.invoice-box table tr.item.last td {
    border-bottom: none
}

.invoice-box table tr.total td:nth-child(2) {
    border-top: 2px solid #eee;
    font-weight: 700
}

@media (max-width: 600px) {

    .invoice-box table tr.top table td,
    .invoice-box table tr.information table td {
        width: 100%;
        display: block;
        text-align: center
    }
}

#loader {
    position: absolute;
    background: white;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050
}

[dir=rtl] #loader {
    left: unset;
    right: 0
}

.notLoaded {
    height: 100vh;
    overflow: hidden;
    position: fixed;
    margin: 0;
    width: 100%
}

.page-loader .page-loader-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 12px
}

.modal-backdrop {
    z-index: 5
}

.modal {
    z-index: 6;
    margin: 0
}

.modal .modal-dialog .modal-content {
    border-radius: 12px;
    border: none
}

.modal .modal-dialog .modal-content .modal-header {
    padding: calc(16px + .0025*(100vw - 320px)) calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(19px + .00375*(100vw - 320px));
    border: none
}

.modal .modal-dialog .modal-content .modal-header h3 {
    font-size: calc(21px + (26 - 21) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.3;
    text-transform: capitalize
}

.modal .modal-dialog .modal-content .modal-header .btn-close {
    opacity: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    margin: 0 0 0 auto
}

[dir=rtl] .modal .modal-dialog .modal-content .modal-header .btn-close {
    margin: 0 auto 0 0
}

.modal .modal-dialog .modal-content .modal-header .btn-close .iconsax {
    --Iconsax-Color: #222;
    transform: rotate(45deg);
    --Iconsax-Size: calc(27px + .0025*(100vw - 320px))
}

.modal .modal-dialog .modal-content .modal-header .btn-close:focus {
    border: none;
    box-shadow: none
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 0 calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + .00625*(100vw - 320px))
}

.modal .modal-dialog .modal-content .modal-body.custom-scroll {
    overflow: auto;
    height: 630px
}

.modal .modal-dialog .modal-content .modal-body .card {
    margin: 0
}

.modal .modal-dialog .modal-content .modal-body .modal-body-content {
    background-color: #f5f6f7;
    border-radius: 10px;
    width: 100%;
    height: calc(200px + .03125*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 20px 0
}

.modal .modal-dialog .modal-content .modal-body .modal-body-content img {
    height: 100%
}

.modal .modal-dialog .modal-content .modal-body .cancel-content {
    background-color: #f5f6f7;
    border-radius: 10px;
    width: 100%
}

.modal .modal-dialog .modal-content .modal-body .cancel-content label {
    font-size: 18px;
    font-weight: 500;
    list-style: 23px;
    color: #00162e;
    margin-bottom: 6px
}

.modal .modal-dialog .modal-content .modal-body p {
    font-size: 16px;
    line-height: 1.5;
    color: #808b97
}

.modal .modal-dialog .modal-content .modal-body .btn.btn-solid {
    width: 100%;
    justify-content: center;
    border-radius: 12px
}

.modal .modal-dialog .modal-content .modal-footer {
    border: none;
    padding: calc(15px + .00625*(100vw - 320px));
    flex-wrap: nowrap;
    gap: 12px
}

.modal .modal-dialog .modal-content .modal-footer .status-note {
    width: 100%;
    border-radius: 0;
    margin: 0
}

.modal.location-detected-modal .modal-dialog {
    max-width: 650px
}

.modal.location-detected-modal .modal-header {
    border: none
}

.modal.location-detected-modal .modal-body .location-search {
    background-color: #f5f6f7;
    color: #00162e
}

.modal.location-detected-modal .modal-body .spinner-border {
    display: block;
    margin: 20px auto 10px;
    width: 26px !important;
    height: 26px !important
}

.modal.location-detected-modal .modal-body .location-list {
    margin-top: 20px
}

.modal.location-detected-modal .modal-body .location-list .location {
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: start;
    justify-content: start;
    border-bottom: 1px solid #E5E8EA;
    color: #fff9;
    background-color: transparent;
    gap: 8px;
    font-size: 16px;
    padding-bottom: 16px
}

.modal.location-detected-modal .modal-body .location-list .location:last-child {
    border-bottom: none
}

.modal.location-detected-modal .modal-body .location-list .location span.text-danger {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-block: 50px;
    background-color: #f5f6f7;
    font-size: 18px;
    font-weight: 500
}

.modal.location-detected-modal .modal-body .location-list .location+li {
    margin-top: 0
}

.modal.location-detected-modal .modal-body .location-list .location>div h5 {
    color: #00162e;
    font-size: 18px
}

.modal.location-detected-modal .modal-body .location-list .location>div h6 {
    color: #00162e80;
    font-size: 16px;
    margin-top: 4px
}

.modal.location-detected-modal .modal-body .location-list .location>div img {
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important
}

.modal.location-detected-modal .modal-body .location-list .location i {
    margin-top: 3px;
    --Iconsax-Color: #00162E !important
}

.modal.location-detected-modal .modal-body .location-list .location:hover {
    color: #fff
}

.modal.location-detected-modal .modal-body .location-list .location:hover i {
    --Iconsax-Color: #00162E
}

.modal.location-detected-modal .modal-body .location-list .location+li {
    margin-top: 16px
}

.modal.reset-modal .modal-dialog .modal-content .modal-body {
    text-align: center
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item {
    padding: 20px;
    border-radius: 8px;
    align-items: start;
    margin-bottom: 20px
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item:last-child {
    margin-bottom: 0
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman {
    display: flex;
    align-items: center;
    gap: 16px
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f5f6f7;
    border-radius: 12px;
    padding: 12px 16px
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail h6 {
    color: #808b97
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail p {
    margin: 0;
    font-size: 14px;
    font-weight: 500
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail .rate .star {
    width: 15px !important;
    height: 15px !important
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .btn-outline {
    width: max-content;
    border-radius: 8px;
    margin-top: 4px;
    font-size: 16px;
    padding: 9px 18px
}

.modal.book-service .modal-dialog .modal-content .modal-body .service {
    padding: calc(14px + .00375*(100vw - 320px));
    border-radius: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    background-color: #f5f6f7;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: calc(14px + .00125*(100vw - 320px))
}

@media (max-width: 575px) {
    .modal.book-service .modal-dialog .modal-content .modal-body .service {
        flex-direction: column;
        align-items: unset
    }
}

.modal.book-service .modal-dialog .modal-content .modal-body .service img {
    object-fit: cover;
    border-radius: 8px;
    object-position: top;
    width: 110px;
    height: 110px
}

@media (max-width: 575px) {
    .modal.book-service .modal-dialog .modal-content .modal-body .service img {
        width: 100%;
        height: calc(183px + (280 - 183) * ((100vw - 320px) / (576 - 320)))
    }
}

.modal.book-service .modal-dialog .modal-content .modal-body .services label {
    color: #00162e;
    margin-bottom: 8px;
    font-weight: 500
}

.modal.book-service .modal-dialog .modal-content .modal-body .services .service {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f5f6f7;
    padding: 20px;
    border-radius: 10px
}

.modal.book-service .modal-dialog .modal-content .modal-body .services .service img {
    width: 80px;
    height: 80px
}

.modal.book-service .modal-dialog .modal-content .modal-body .services .service span {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-color)
}

.modal.book-service .modal-dialog .modal-content .modal-body .service-title {
    color: #00162e;
    font-size: 16px;
    margin-top: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
    font-weight: 500
}

.modal.book-service .modal-dialog .modal-content .modal-body .book-service-title {
    display: block;
    margin: 0;
    width: calc(100% - 126px)
}

@media (max-width: 575px) {
    .modal.book-service .modal-dialog .modal-content .modal-body .book-service-title {
        width: 100%
    }
}

.modal.book-service .modal-dialog .modal-content .modal-body .book-service-title h3 {
    font-size: calc(18px + .00125*(100vw - 320px));
    font-weight: 400;
    line-height: 1.4;
    color: #00162e;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.modal.book-service .modal-dialog .modal-content .modal-body .book-service-title span {
    font-size: 20px;
    font-weight: 700;
    margin-top: calc(2px + .00125*(100vw - 320px));
    line-height: 1.4;
    color: var(--theme-color)
}

.modal.location-modal .modal-content .modal-body {
    padding-bottom: calc(15px + .00625*(100vw - 320px))
}

.modal.location-modal .location-map {
    border-radius: 12px;
    background-color: #f5f6f7;
    padding: 0;
    margin: 0;
    gap: 0;
    overflow: hidden
}

.modal.location-modal .location-map .map {
    height: 100%;
    overflow: hidden
}

.modal.location-modal .location-map .map iframe {
    height: 100%
}

.modal.location-modal .location-map label {
    color: #00162e;
    font-size: 18px
}

.modal.location-modal .location-map .location-detail {
    padding: 20px
}

.modal.location-modal .location-map .category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(11px + (40 - 11) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 575px) {
    .modal.location-modal .location-map .category .form-check {
        gap: 8px
    }
}

.modal.location-modal .location-map .category .form-check label {
    color: #808b97;
    font-size: 16px
}

.modal.location-modal .location-map .category .form-check .form-radio-input:checked~label {
    color: #00162e
}

.modal.location-modal .location-map i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97
}

.modal.location-modal .location-map .input-icon {
    position: absolute;
    top: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    left: 16px
}

[dir=rtl] .modal.location-modal .location-map .input-icon {
    left: unset;
    right: 16px
}

.modal.servicemen-list-modal .search {
    margin-bottom: 16px
}

.modal.servicemen-list-modal .search input {
    border-radius: 30px !important
}

.modal.servicemen-list-modal .select-dropdown {
    border: none;
    margin: 0;
    padding-bottom: 16px
}

@media (max-width: 991px) {
    .modal.servicemen-list-modal .select-dropdown {
        align-items: flex-start;
        gap: 12px
    }

    .modal.servicemen-list-modal .select-dropdown .form-group {
        width: 100%
    }
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header {
    position: relative
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    --Iconsax-Size: 22px;
    --Iconsax-Color: #00162E
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header i {
    left: unset;
    right: 20px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .modal-title {
    padding-left: 20px;
    line-height: 1;
    text-transform: capitalize
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .modal-title {
    padding-left: 0;
    padding-right: 20px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .btn-close {
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .btn-close {
    right: unset;
    left: 30px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .provider-content {
    padding: 0;
    border: none
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .provider-content p {
    text-align: start
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-bg {
    position: relative;
    background-image: url(https://osoncor.tj/build/assets/profile-bg-dce923e6.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    height: 100px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile {
    z-index: 1;
    position: relative;
    margin-top: -60px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .img {
    border: 4px solid #ffffff;
    width: 100px;
    height: 100px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate {
    position: relative;
    margin: 0;
    padding-left: 8px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate {
    padding-left: 0;
    padding-right: 8px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    background-color: #e5e8ea;
    width: 1px;
    height: 12px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate:before {
    left: unset;
    right: 0
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate .star {
    width: 13px;
    height: 13px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info {
    background-color: #f5f6f7;
    border-radius: 10px;
    column-count: 2;
    padding: 16px 20px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info label {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information p {
    font-size: 16px;
    font-weight: 500
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .btn {
    font-size: 16px;
    width: max-content;
    border-radius: 6px;
    padding: 6px 12px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .note {
    font-weight: 400;
    color: #808b97;
    margin-top: 8px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .expert {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: .5rem;
    list-style: disc;
    padding-left: 30px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .expert {
    padding-left: 0;
    padding-right: 30px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .expert li {
    display: list-item
}

.modal.service-charge-modal .modal-dialog .modal-content .modal-body {
    padding-bottom: calc(15px + .00625*(100vw - 320px)) !important
}

.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .charge,
.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .total {
    background-color: #f5f6f7
}

.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .total:before,
.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .total:after {
    background-color: #fff
}

.modal.coupon-modal .modal-content .modal-body {
    padding-bottom: calc(15px + .00625*(100vw - 320px)) !important
}

.modal.confirm-modal .modal-body p,
.modal.fail-modal .modal-body p {
    color: #808b97 !important;
    line-height: 25px;
    text-align: center;
    margin: 0 calc(5px + .0125*(100vw - 320px))
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail {
    display: grid
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .error {
    order: 1
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container {
    width: 100% !important
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .selection {
    min-width: unset;
    width: 100%
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: none;
    padding: 10px 16px 10px 46px
}

[dir=rtl] .modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection--single {
    padding: 10px 46px 10px 16px
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection__rendered {
    padding: 0;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection__placeholder {
    color: #00162e
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money {
    background-color: #f5f6f7;
    padding: 20px;
    border-radius: 10px
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money label {
    color: #00162e
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money .input-group input {
    border-radius: 8px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .card,
.modal.accepted-modal .modal-body.booking-sec .card,
.modal.ongoing-modal .modal-body.booking-sec .card,
.modal.completed-modal .modal-body.booking-sec .card {
    border: none
}

.modal.pending-modal .modal-body.booking-sec .primary-badge,
.modal.accepted-modal .modal-body.booking-sec .primary-badge,
.modal.ongoing-modal .modal-body.booking-sec .primary-badge,
.modal.completed-modal .modal-body.booking-sec .primary-badge {
    position: absolute;
    top: 10px;
    left: 10px
}

[dir=rtl] .modal.pending-modal .modal-body.booking-sec .primary-badge,
[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .primary-badge,
[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .primary-badge,
[dir=rtl] .modal.completed-modal .modal-body.booking-sec .primary-badge {
    left: unset;
    right: 20px
}

@media (max-width: 991px) {

    .modal.pending-modal .modal-body.booking-sec .primary-badge,
    .modal.accepted-modal .modal-body.booking-sec .primary-badge,
    .modal.ongoing-modal .modal-body.booking-sec .primary-badge,
    .modal.completed-modal .modal-body.booking-sec .primary-badge {
        top: 10px;
        left: 10px
    }

    [dir=rtl] .modal.pending-modal .modal-body.booking-sec .primary-badge,
    [dir=rtl] .modal.accepted-modal .modal-body.booking-sec .primary-badge,
    [dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .primary-badge,
    [dir=rtl] .modal.completed-modal .modal-body.booking-sec .primary-badge {
        left: unset;
        right: 10px
    }
}

.modal.pending-modal .modal-body.booking-sec .status,
.modal.accepted-modal .modal-body.booking-sec .status,
.modal.ongoing-modal .modal-body.booking-sec .status,
.modal.completed-modal .modal-body.booking-sec .status {
    margin-bottom: 4px
}

@media (max-width: 991px) {

    .modal.pending-modal .modal-body.booking-sec .status,
    .modal.accepted-modal .modal-body.booking-sec .status,
    .modal.ongoing-modal .modal-body.booking-sec .status,
    .modal.completed-modal .modal-body.booking-sec .status {
        flex-direction: column;
        align-items: start;
        justify-content: start
    }

    [dir=rtl] .modal.pending-modal .modal-body.booking-sec .status,
    [dir=rtl] .modal.accepted-modal .modal-body.booking-sec .status,
    [dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .status,
    [dir=rtl] .modal.completed-modal .modal-body.booking-sec .status {
        align-items: end
    }
}

.modal.pending-modal .modal-body.booking-sec .status h5,
.modal.accepted-modal .modal-body.booking-sec .status h5,
.modal.ongoing-modal .modal-body.booking-sec .status h5,
.modal.completed-modal .modal-body.booking-sec .status h5 {
    font-size: calc(18px + .00125*(100vw - 320px));
    color: #00162e
}

.modal.pending-modal .modal-body.booking-sec .status h5:hover,
.modal.accepted-modal .modal-body.booking-sec .status h5:hover,
.modal.ongoing-modal .modal-body.booking-sec .status h5:hover,
.modal.completed-modal .modal-body.booking-sec .status h5:hover {
    text-decoration: unset
}

.modal.pending-modal .modal-body.booking-sec .status .status-btn,
.modal.accepted-modal .modal-body.booking-sec .status .status-btn,
.modal.ongoing-modal .modal-body.booking-sec .status .status-btn,
.modal.completed-modal .modal-body.booking-sec .status .status-btn {
    font-size: 20px
}

.modal.pending-modal .modal-body.booking-sec .status .status-btn:hover,
.modal.accepted-modal .modal-body.booking-sec .status .status-btn:hover,
.modal.ongoing-modal .modal-body.booking-sec .status .status-btn:hover,
.modal.completed-modal .modal-body.booking-sec .status .status-btn:hover {
    text-decoration: unset
}

.modal.pending-modal .modal-body.booking-sec .view-status,
.modal.accepted-modal .modal-body.booking-sec .view-status,
.modal.ongoing-modal .modal-body.booking-sec .view-status,
.modal.completed-modal .modal-body.booking-sec .view-status {
    align-items: start;
    margin-bottom: 10px
}

.modal.pending-modal .modal-body.booking-sec .view-status button,
.modal.accepted-modal .modal-body.booking-sec .view-status button,
.modal.ongoing-modal .modal-body.booking-sec .view-status button,
.modal.completed-modal .modal-body.booking-sec .view-status button {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .view-status button i,
.modal.accepted-modal .modal-body.booking-sec .view-status button i,
.modal.ongoing-modal .modal-body.booking-sec .view-status button i,
.modal.completed-modal .modal-body.booking-sec .view-status button i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465FF
}

.modal.pending-modal .modal-body.booking-sec .status-note,
.modal.accepted-modal .modal-body.booking-sec .status-note,
.modal.ongoing-modal .modal-body.booking-sec .status-note,
.modal.completed-modal .modal-body.booking-sec .status-note {
    color: #ff4b4b;
    padding: calc(8px + .005*(100vw - 320px));
    border-radius: 8px;
    background-color: #ff4b4b1a;
    font-size: 14px;
    text-align: center
}

.modal.pending-modal .modal-body.booking-sec .status-note span,
.modal.accepted-modal .modal-body.booking-sec .status-note span,
.modal.ongoing-modal .modal-body.booking-sec .status-note span,
.modal.completed-modal .modal-body.booking-sec .status-note span {
    font-weight: 500
}

.modal.pending-modal .modal-body.booking-sec .bill-summary label,
.modal.accepted-modal .modal-body.booking-sec .bill-summary label,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary label,
.modal.completed-modal .modal-body.booking-sec .bill-summary label {
    color: #00162e;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .charge,
.modal.pending-modal .modal-body.booking-sec .bill-summary .total,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .charge,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .total,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total,
.modal.completed-modal .modal-body.booking-sec .bill-summary .charge,
.modal.completed-modal .modal-body.booking-sec .bill-summary .total {
    background-color: #f5f6f7;
    border-color: #e5e8ea
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .charge,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .charge,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge,
.modal.completed-modal .modal-body.booking-sec .bill-summary .charge {
    border-bottom: none
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .charge p,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .charge p,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge p,
.modal.completed-modal .modal-body.booking-sec .bill-summary .charge p {
    color: #808b97;
    flex-wrap: wrap
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total:before,
.modal.pending-modal .modal-body.booking-sec .bill-summary .total:after,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .total:before,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .total:after,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total:before,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total:after,
.modal.completed-modal .modal-body.booking-sec .bill-summary .total:before,
.modal.completed-modal .modal-body.booking-sec .bill-summary .total:after {
    background-color: #fff
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total-amount,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .total-amount,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total-amount,
.modal.completed-modal .modal-body.booking-sec .bill-summary .total-amount {
    background-color: #f5f6f7;
    padding: 20px;
    border: 1px solid #E5E8EA;
    border-bottom: none
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total-amount li,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .total-amount li,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total-amount li,
.modal.completed-modal .modal-body.booking-sec .bill-summary .total-amount li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 16px
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data,
.modal.completed-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data {
    font-weight: 700
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .circle,
.modal.accepted-modal .modal-body.booking-sec .bill-summary .circle,
.modal.ongoing-modal .modal-body.booking-sec .bill-summary .circle,
.modal.completed-modal .modal-body.booking-sec .bill-summary .circle {
    height: 16px;
    margin: -8px 0
}

.modal.pending-modal .modal-body.booking-sec .payment-summary label,
.modal.accepted-modal .modal-body.booking-sec .payment-summary label,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary label,
.modal.completed-modal .modal-body.booking-sec .payment-summary label {
    color: #00162e;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge,
.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge,
.modal.completed-modal .modal-body.booking-sec .payment-summary .charge {
    background-color: #f5f6f7;
    border-color: #e5e8ea;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:before,
.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:before,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:before,
.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    display: block;
    border-width: 1px;
    width: 10px;
    height: 15px;
    bottom: 48px;
    border-radius: 100%;
    background-color: #fff
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:after,
.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:after {
    border-left-color: #e5e8ea;
    border-top-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    right: -2px
}

[dir=rtl] .modal.pending-modal .modal-body.booking-sec .payment-summary .charge:after,
[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:after,
[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:after,
[dir=rtl] .modal.completed-modal .modal-body.booking-sec .payment-summary .charge:after {
    right: unset;
    left: -2px
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:before,
.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:before,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:before,
.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:before {
    border-right-color: #e5e8ea;
    border-top-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    left: -2px
}

[dir=rtl] .modal.pending-modal .modal-body.booking-sec .payment-summary .charge:before,
[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:before,
[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:before,
[dir=rtl] .modal.completed-modal .modal-body.booking-sec .payment-summary .charge:before {
    left: unset;
    right: -2px
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .circle,
.modal.accepted-modal .modal-body.booking-sec .payment-summary .circle,
.modal.ongoing-modal .modal-body.booking-sec .payment-summary .circle,
.modal.completed-modal .modal-body.booking-sec .payment-summary .circle {
    height: 18px;
    margin: -11px 0
}

.modal.pending-modal .modal-body.booking-sec .extra-service label,
.modal.accepted-modal .modal-body.booking-sec .extra-service label,
.modal.ongoing-modal .modal-body.booking-sec .extra-service label,
.modal.completed-modal .modal-body.booking-sec .extra-service label {
    color: #00162e;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount,
.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount,
.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount,
.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border: 1px solid #E5E8EA;
    border-radius: 12px;
    padding: 16px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount h4,
.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount h4,
.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount h4,
.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount h4 {
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 6px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount p,
.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount p,
.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount p,
.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount p {
    margin: 0;
    color: var(--theme-color);
    line-height: 18px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount .receipt,
.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount .receipt,
.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount .receipt,
.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount .receipt {
    background-color: #5465ff1a;
    border-radius: 4px;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img,
.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img,
.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img,
.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img {
    width: 25px;
    height: 25px
}

.modal.pending-modal .modal-body.booking-sec .profile-view,
.modal.accepted-modal .modal-body.booking-sec .profile-view,
.modal.ongoing-modal .modal-body.booking-sec .profile-view,
.modal.completed-modal .modal-body.booking-sec .profile-view {
    background-color: #5465ff1a;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .profile-view i,
.modal.accepted-modal .modal-body.booking-sec .profile-view i,
.modal.ongoing-modal .modal-body.booking-sec .profile-view i,
.modal.completed-modal .modal-body.booking-sec .profile-view i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465FF
}

.modal.pending-modal .modal-body.booking-sec .chat,
.modal.accepted-modal .modal-body.booking-sec .chat,
.modal.ongoing-modal .modal-body.booking-sec .chat,
.modal.completed-modal .modal-body.booking-sec .chat {
    background-color: #f5f6f7;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .chat i,
.modal.accepted-modal .modal-body.booking-sec .chat i,
.modal.ongoing-modal .modal-body.booking-sec .chat i,
.modal.completed-modal .modal-body.booking-sec .chat i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.modal.status-modal .modal-content .modal-header {
    position: relative;
    padding-bottom: 0
}

.modal.status-modal .modal-content .modal-header .modal-back {
    position: absolute;
    left: 24px;
    background-color: unset;
    padding: 0;
    border: none
}

[dir=rtl] .modal.status-modal .modal-content .modal-header .modal-back {
    left: unset;
    right: 24px
}

.modal.status-modal .modal-content .modal-header i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: #00162E
}

.modal.status-modal .modal-content .modal-header .modal-title {
    padding-left: 25px;
    text-transform: capitalize
}

[dir=rtl] .modal.status-modal .modal-content .modal-header .modal-title {
    padding-left: 0;
    padding-right: 25px
}

.modal.status-modal .modal-content .modal-body {
    padding: calc(15px + .00625*(100vw - 320px))
}

.modal.status-modal .modal-content .modal-body .pattern-btn-1 {
    padding: 20px
}

.modal.status-modal .modal-content .modal-body .pattern-btn-1:before,
.modal.status-modal .modal-content .modal-body .pattern-btn-1:after {
    background-color: #fff
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input {
    position: relative;
    padding: 20px;
    vertical-align: middle
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:after,
.modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: dashed transparent;
    display: block;
    border-width: 1px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    z-index: 1
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:after {
    border-top-color: var(--theme-color);
    border-left-color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    right: -132px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .form-control.pattern-input:after {
    right: unset;
    left: -127px
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    border-top-color: var(--theme-color);
    border-right-color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    left: -3px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    left: unset;
    right: -3px
}

.modal.status-modal .modal-content .modal-body .status-history {
    margin-top: 15px
}

.modal.status-modal .modal-content .modal-body .status-history ul {
    display: flex;
    flex-direction: column;
    gap: 30px
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul {
    padding-left: 0;
    padding-right: 10px
}

.modal.status-modal .modal-content .modal-body .status-history ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 15px
}

@media (max-width: 480px) {
    .modal.status-modal .modal-content .modal-body .status-history ul li {
        flex-wrap: wrap;
        gap: 8px
    }
}

.modal.status-modal .modal-content .modal-body .status-history ul li i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #E5E8EA
}

.modal.status-modal .modal-content .modal-body .status-history ul li p {
    margin: 0
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-time {
    line-height: 20px;
    color: #808b97;
    white-space: nowrap
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-title {
    font-size: 15px;
    line-height: 20px
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-des {
    font-size: 15px;
    line-height: 20px;
    color: #808b97
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
    padding-left: 16px;
    position: relative;
    width: 100%
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
    padding-left: 0;
    padding-right: 16px
}

@media (max-width: 480px) {
    .modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
        padding-left: 42px
    }

    [dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
        padding-left: 0;
        padding-right: 42px
    }
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e5e8ea;
    height: 26px;
    width: 1px
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
    left: unset;
    right: 0
}

@media (max-width: 480px) {
    .modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
        display: none
    }
}

.modal.status-modal .modal-content .modal-body .status-history ul li .dashed-border {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: 0
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .dashed-border {
    left: unset;
    right: 0
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent .activity-dot {
    background-color: var(--theme-color);
    outline-color: var(--theme-color)
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent .activity-dot:after {
    background-color: #fff;
    border: 1px dashed var(--theme-color)
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #5465FF
}

.modal.terms-modal {
    --bs-modal-width: 650px !important;
    height: 800px !important
}

.modal.terms-modal .modal-content .modal-body .accordion {
    width: 100%
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item {
    background-color: #fff;
    border-radius: 12px
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item+.accordion-item {
    margin-top: 20px
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    line-height: 1.2;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    gap: 4px;
    color: #00162e;
    cursor: pointer
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button i {
    --Iconsax-Size: calc(20px + .0025*(100vw - 320px));
    --Iconsax-Color: #00162E
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button:after {
    display: none
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button .add {
    display: none
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button .minus {
    display: flex
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    color: #00162eb3
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button.collapsed .add {
    display: flex
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button.collapsed .minus {
    display: none
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-body {
    padding: 20px
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-body p {
    font-size: 18px;
    line-height: 1.5
}

.modal.terms-modal .modal-content .modal-body ul,
.modal.terms-modal .modal-content .modal-body ol {
    list-style-type: disc;
    padding-left: 1.25rem
}

[dir=rtl] .modal.terms-modal .modal-content .modal-body ul,
[dir=rtl] .modal.terms-modal .modal-content .modal-body ol {
    padding-right: 1.25rem;
    padding-left: unset
}

.modal.terms-modal .modal-content .modal-body ul li,
.modal.terms-modal .modal-content .modal-body ol li {
    display: list-item;
    font-size: 17px;
    color: #00162eb3;
    line-height: 1.3 !important;
    margin-bottom: 12px
}

.modal.delete-modal .modal-content .btn-close {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1
}

[dir=rtl] .modal.delete-modal .modal-content .btn-close {
    right: unset;
    left: 30px
}

.modal.delete-modal .modal-content .btn-close:focus {
    box-shadow: none
}

.modal.delete-modal .modal-content .modal-body {
    position: relative;
    padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + .00625*(100vw - 320px));
    padding-bottom: 0
}

.modal.delete-modal .modal-content .modal-body .modal-icon {
    --Iconsax-Color: #5465ff;
    --Iconsax-Size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    margin: 0 auto 10px;
    background-color: #f5f6f7
}

.modal.delete-modal .modal-content .modal-body h3 {
    font-weight: 600;
    margin-bottom: 8px
}

.modal.delete-modal .modal-content .modal-body p {
    width: 80%
}

.modal.start-service-modal .modal-body,
.modal.restart-service-modal .modal-body {
    text-align: center
}

.modal.start-service-modal .modal-body .modal-body-content,
.modal.restart-service-modal .modal-body .modal-body-content {
    flex-direction: column
}

.modal.start-service-modal .modal-body .modal-body-content .ellipse,
.modal.restart-service-modal .modal-body .modal-body-content .ellipse {
    width: 220px;
    padding-bottom: 20px
}

.modal.pause-service-modal .modal-body {
    text-align: center
}

.modal.pause-service-modal .modal-body .modal-body-content {
    position: relative;
    flex-direction: column
}

.modal.pause-service-modal .modal-body .modal-body-content .ellipse {
    width: 100px;
    height: auto !important
}

.modal.pause-service-modal .modal-body .modal-body-content .hold {
    position: absolute;
    top: 40px;
    right: 70px;
    height: auto !important
}

[dir=rtl] .modal.pause-service-modal .modal-body .modal-body-content .hold {
    right: unset;
    left: 70px
}

@media (max-width: 575px) {
    .modal.pause-service-modal .modal-body .modal-body-content .hold {
        height: 40px !important
    }
}

@media (max-width: 480px) {
    .modal.pause-service-modal .modal-body .modal-body-content .hold {
        right: 10px
    }

    [dir=rtl] .modal.pause-service-modal .modal-body .modal-body-content .hold {
        right: unset;
        left: 10px
    }
}

.modal.completed-service-modal .modal-content .modal-body {
    text-align: center
}

.modal.completed-service-modal .modal-content .modal-body .modal-body-content {
    position: relative
}

.modal.completed-service-modal .modal-content .modal-body .modal-body-content .success-tick {
    top: 50px;
    left: 35%;
    transform: translate(-35%);
    position: absolute;
    height: 40px
}

[dir=rtl] .modal.completed-service-modal .modal-content .modal-body .modal-body-content .success-tick {
    left: unset;
    right: 35%;
    transform: translate(35%)
}

.modal.completed-service-modal .modal-content .modal-body .modal-body-content .girl-on-chair {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    height: 210px
}

.modal.review-modal .modal-content .modal-body .rate-content {
    background-color: #f5f6f7;
    padding: calc(10px + .00625*(100vw - 320px));
    border-radius: 12px
}

.modal.review-modal .modal-content .modal-body .rate-content p {
    text-align: center;
    margin: 0;
    color: #808b97
}

.modal.review-modal .modal-content .modal-body .rate-content .form-group label {
    font-size: 18px;
    font-weight: 500;
    color: #00162e;
    margin-bottom: 8px
}

.modal.profile-update-modal .update-img {
    display: flex;
    margin: 0 auto -50px;
    width: max-content;
    position: relative
}

.modal.profile-update-modal .update-img img {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    border: 2px solid #ffffff
}

.modal.profile-update-modal .update-img .update-profile {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #5465FF;
    background-color: #f5f6f7;
    border: 2px solid #ffffff;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    position: absolute;
    bottom: -10px;
    right: -10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

[dir=rtl] .modal.profile-update-modal .update-img .update-profile {
    right: unset;
    left: -10px
}

.modal.profile-update-modal .update-img .initial-letter {
    width: 80px;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 500;
    border-radius: 100%;
    border: 2px solid rgba(84, 101, 255, .1)
}

.modal.profile-update-modal .update-detail {
    background-color: #f5f6f7;
    border-radius: 10px;
    padding: 70px 20px 20px
}

.modal.profile-update-modal input[type=file] {
    display: none
}

.modal.change-password-modal .modal-body {
    padding-bottom: 0 !important
}

.modal.change-password-modal .modal-body .form-group {
    margin-bottom: 15px
}

.modal.change-password-modal .modal-body .form-group .form-control {
    background-color: #f5f6f7
}

.modal.address-modal .modal-body .category-list-box+.category-list-box {
    margin-top: calc(12px + .005*(100vw - 320px))
}

.modal.address-modal .modal-body .category-list-box .error-div .select2-container--default .selection {
    min-width: unset;
    display: block
}

.modal.address-modal .modal-body .category-list-box .form-control {
    padding: 10px 16px;
    background-color: #f5f6f7;
    color: #00162e
}

.modal.address-modal .modal-body .category-list-box .label-title {
    color: #00162e;
    font-size: calc(16px + .00125*(100vw - 320px));
    margin-bottom: calc(4px + (9 - 4) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500
}

.modal.address-modal .modal-body .category-list-box .category-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px
}

@media (max-width: 575px) {
    .modal.address-modal .modal-body .category-list-box .category-list {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 360px) {
    .modal.address-modal .modal-body .category-list-box .category-list {
        grid-template-columns: 1fr
    }
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check {
    border: 1px solid #E5E8EA;
    border-radius: 8px;
    padding: 11px 15px;
    justify-content: space-between;
    cursor: pointer;
    margin: 0
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check:has(.form-check-input:checked) {
    border-color: var(--theme-color);
    background-color: #5465ff1f
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check:has(.form-check-input:checked) label {
    color: var(--theme-color);
    font-weight: 500
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check label {
    cursor: pointer;
    font-size: 17px;
    font-weight: 400;
    color: #00162e;
    width: 100%
}

.update-detail label {
    font-size: 14px;
    font-weight: 500;
    color: #00162e;
    margin-top: 4px;
    margin-bottom: 4px
}

.update-detail .form-group {
    position: relative
}

.update-detail .form-group .form-control {
    border: none;
    padding-left: 46px
}

[dir=rtl] .update-detail .form-group .form-control {
    padding-left: unset;
    padding-right: 46px
}

.update-detail .form-group i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97;
    position: absolute;
    left: 15px;
    top: 12px
}

[dir=rtl] .update-detail .form-group i {
    left: unset;
    right: 15px
}

.update-detail .form-group .toggle-password {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    left: unset;
    cursor: pointer
}

[dir=rtl] .update-detail .form-group .toggle-password {
    left: 15px;
    right: unset
}

.update-detail .form-group .toggle-password i {
    position: static;
    transform: unset
}

.update-detail .form-group .toggle-password .eye-slash {
    display: none
}

.update-detail .form-group .toggle-password.eye i.eye {
    display: block
}

.update-detail .form-group .toggle-password.eye i.eye-slash {
    display: none
}

.update-detail .form-group .toggle-password.eye-slash i.eye-slash {
    display: block
}

.update-detail .form-group .toggle-password.eye-slash i.eye {
    display: none
}

.update-detail .phone-detail .form-control-white {
    padding-left: 16px
}

[dir=rtl] .update-detail .phone-detail .form-control-white {
    padding-left: unset;
    padding-right: 16px
}

.select-option {
    border: 1px solid #E5E8EA;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: #808b97
}

.select-option .form-check {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-bottom: 1px solid #E5E8EA;
    padding-bottom: calc(8px + .0025*(100vw - 320px));
    margin-bottom: calc(8px + .0025*(100vw - 320px))
}

.select-option .form-check:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.select-option .form-check Label {
    font-size: 16px;
    color: #00162ee6 !important;
    cursor: pointer
}

.select-option .form-radio-input:checked~label {
    font-weight: 500;
    color: #00162e !important
}

.select-servicemen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #E5E8EA;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff;
    gap: 12px
}

.select-servicemen p {
    margin: 0;
    font-size: 16px
}

@media (max-width: 575px) {
    .select-servicemen {
        flex-direction: column;
        align-items: start
    }

    [dir=rtl] .select-servicemen {
        align-items: end
    }
}

.servicemen-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    height: 450px
}

.servicemen-list-item {
    border: 1px solid #E5E8EA;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 12px;
    box-shadow: 0 4px 4px #00162e0f;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.servicemen-list-item .list {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 575px) {
    .servicemen-list-item .list {
        gap: 6px
    }
}

.servicemen-list-item .list p {
    margin: 0;
    color: #808b97 !important;
    font-size: 14px !important
}

.servicemen-list-item .list ul {
    display: flex;
    align-items: center;
    gap: 12px
}

.servicemen-list-item .list h5 {
    font-weight: 500
}

@media (max-width: 360px) {
    .servicemen-list-item .list h5 {
        font-size: 14px;
        width: 70px;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        text-align: left;
        text-overflow: ellipsis
    }

    [dir=rtl] .servicemen-list-item .list h5 {
        text-align: right
    }
}

.servicemen-list-item .list .rate {
    margin: 0;
    position: relative;
    padding-left: 12px
}

[dir=rtl] .servicemen-list-item .list .rate {
    padding-left: unset;
    padding-right: 12px
}

.servicemen-list-item .list .rate .star {
    width: 13px;
    height: 13px
}

.servicemen-list-item .list .rate:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    background-color: #e5e8ea;
    width: 1px;
    height: 12px
}

[dir=rtl] .servicemen-list-item .list .rate:before {
    left: unset;
    right: 0
}

.servicemen-list-item .list .detail {
    font-size: 16px;
    font-weight: 500;
    border: none;
    background: none;
    padding: 0;
    line-height: 1
}

@media (max-width: 360px) {
    .servicemen-list-item .list .detail {
        font-size: 14px;
        width: 100px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left
    }

    [dir=rtl] .servicemen-list-item .list .detail {
        text-align: right
    }
}

.servicemen-list-item .list .detail:hover {
    color: var(--theme-color)
}

@media (max-width: 575px) {
    .servicemen-list-item .list .img-45 {
        width: 35px !important;
        height: 35px !important
    }
}

.status-note {
    color: #ff4b4b;
    padding: 16px;
    border-radius: 8px;
    background-color: #ff4b4b1a;
    font-size: 14px;
    text-align: center
}

.status-note span {
    font-weight: 500
}

.emoji-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.emoji-tab .emoji-icon {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.emoji-tab .emoji-icon h4 {
    font-size: 16px;
    margin-top: 8px;
    color: #808b97
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon h4 {
        display: none
    }
}

.emoji-tab .emoji-icon .emojis {
    padding: 10px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon .emojis {
        padding: 8px
    }
}

@media (max-width: 360px) {
    .emoji-tab .emoji-icon .emojis {
        padding: 6px
    }
}

.emoji-tab .emoji-icon .emojis .emoji {
    width: 40px;
    height: 40px;
    filter: invert(65%) sepia(8%) saturate(540%) hue-rotate(171deg) brightness(83%) contrast(87%)
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon .emojis .emoji {
        width: 30px;
        height: 30px
    }
}

@media (max-width: 360px) {
    .emoji-tab .emoji-icon .emojis .emoji {
        width: 25px;
        height: 25px
    }
}

.emoji-tab .emoji-icon .emojis .deactive {
    display: block
}

.emoji-tab .emoji-icon .emojis .active {
    display: none
}

.emoji-tab .emoji-icon.active .emojis {
    outline: 2px solid var(--theme-color)
}

.emoji-tab .emoji-icon.active .emoji {
    filter: invert(54%) sepia(78%) saturate(5765%) hue-rotate(223deg) brightness(98%) contrast(107%)
}

.emoji-tab .emoji-icon.active .deactive {
    display: none
}

.emoji-tab .emoji-icon.active .active {
    display: block
}

.emoji-tab .emoji-icon.active h4 {
    color: var(--theme-color)
}

.offer-section .offer-content .sale-tag {
    position: absolute;
    top: 25px;
    left: 0;
    background-color: #ff4b4b;
    padding: 4px 36px 4px 16px;
    color: #fff;
    clip-path: polygon(0 0, 28% 0%, 67% -24%, 83% 7%, 84% 14%, 84% 27%, 84% 0%, 84% 32%, 82% 41%, 81% 49%, 81% 78%, 81% 74%, 80% 44%, 84% 65%, 84% 74%, 84% 77%, 82% 93%, 79% 100%, 84% 100%, 68% 100%, 0 100%)
}

[dir=rtl] .offer-section .offer-content .sale-tag {
    left: unset;
    right: 0;
    transform: scaleX(-1)
}

[dir=rtl] .offer-section .offer-content .sale-tag span {
    transform: scaleX(-1)
}

.offer-section .offer-content .offer-img {
    border-radius: 10px;
    min-height: 240px;
    max-height: 250px
}

.offer-section .offer-content .offer-detail {
    position: absolute;
    top: 75px;
    left: 20px
}

[dir=rtl] .offer-section .offer-content .offer-detail {
    left: unset;
    right: 20px
}

.offer-section .offer-content .offer-detail h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 33px
}

.offer-section .offer-content .offer-detail p {
    color: #00162e80;
    line-height: 20px;
    width: 70%;
    margin-top: 4px
}

.offer-section .offer-content .offer-detail .btn {
    padding: 10px 20px;
    line-height: 1;
    width: max-content;
    color: #00162e
}

.offer-section .offer-content .offer-detail .btn.btn-outline {
    margin-top: 24px;
    border: 2px solid #00162E;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500
}

.phone-detail {
    background-color: #f5f6f7;
    color: #00162e;
    border-radius: 8px;
    overflow: hidden
}

.phone-detail:has(.form-control.form-control-white) .select2-container--default .selection {
    border-right: 1px solid #E5E8EA
}

.phone-detail:has(.form-control.form-control-white) .select2-container--default .select2-selection--single {
    background-color: #fff
}

.phone-detail .select2-dropdown {
    border-color: #e5e8ea
}

.phone-detail .select2-container--default .selection {
    height: 100%;
    min-width: calc(95px + .0125*(100vw - 320px))
}

.phone-detail .select2-container--default .select2-selection--single {
    height: 100%;
    border: none;
    border-right: 1px solid #E5E8EA;
    background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 9px;
    border-radius: 0
}

.phone-detail .select2-container--default .select2-selection__rendered {
    display: flex;
    align-items: center;
    color: #00162e;
    font-weight: 400;
    line-height: 1.5;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.phone-detail .select2-container--default .select2-selection__arrow {
    position: relative;
    inset: unset;
    top: 50%;
    transform: translateY(-50%);
    height: 100%
}

.select2-container--default .select2-results__option[aria-selected] {
    width: 100%;
    padding-inline: 15px
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f5f6f7
}

.error-div {
    display: flex;
    flex-direction: column;
    justify-content: unset;
    align-items: unset
}

.error-div .dropdown-wrapper {
    display: none
}

.error-div .error {
    display: block;
    order: 1
}

.error-div .select2-dropdown {
    border-color: #e5e8ea
}

.error-div .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.error-div .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    background-color: transparent;
    border: 1px solid #E5E8EA;
    border-bottom: 0
}

.error-div .select2-container--default .selection {
    height: 100%;
    min-width: 115px
}

.error-div .select2-container--default .select2-selection--single {
    height: 46px;
    border: none;
    background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 9px;
    border-radius: 4px
}

.error-div .select2-container--default .select2-selection__placeholder {
    font-size: 16px;
    font-weight: 500;
    color: #00162e
}

.error-div .select2-container--default .select2-selection__rendered {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #00162e
}

.error-div .select2-container--default .select2-selection__arrow {
    position: relative;
    inset: unset;
    top: 50%;
    transform: translateY(-50%);
    height: 100%
}

.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below {
    border-color: #e5e8ea
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #e5e8ea;
    border-radius: 4px
}

.select2-container--default .select2-results__option[aria-selected] {
    width: 100%;
    letter-spacing: 1px
}

.select2-container--default .select2-results__option[aria-selected] span {
    width: 100%;
    font-size: 15px;
    color: #808b97
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-color)
}

.select2-container--default .select2-results__option--highlighted[aria-selected] span {
    font-weight: 600;
    color: #fff
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
    background-color: #f5f6f7
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #ddd
}

.select2-container--default .selection {
    width: 100%
}

.select2-container--default .selection .select2-selection--single {
    background-color: #f5f6f7;
    border: 1px solid #E5E8EA;
    border-radius: 4px;
    height: 46px;
    width: 100%
}

.select2-container--default .selection .select2-selection--single .select2-selection__rendered {
    border-radius: 6px;
    padding: 12px 24px 12px 12px;
    line-height: 1.5
}

[dir=rtl] .select2-container--default .selection .select2-selection--single .select2-selection__rendered {
    padding: 12px 12px 12px 24px
}

.select2-container--default .selection .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.select2-container--default .selection .select2-selection__arrow {
    position: absolute;
    top: 45%;
    right: 1px;
    width: 20px;
    transform: translateY(-50%)
}

[dir=rtl] .select2-container--default .selection .select2-selection__arrow {
    right: unset;
    left: 1px
}

.select2-container--default .selection .select2-selection__arrow b {
    border: none;
    background-image: url(https://osoncor.tj/build/assets/arrow-90473a1a.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 55%;
    right: 10px;
    transform: translate(-50%, -50%)
}

[dir=rtl] .select2-container--default .selection .select2-selection__arrow b {
    right: unset;
    left: 15px
}

.pagination-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px
}

@media (max-width: 575px) {
    .pagination-main {
        justify-content: center
    }
}

.pagination-main label {
    color: #808b97
}

@media (max-width: 575px) {
    .pagination-main label {
        display: none
    }
}

.pagination-main i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #00162E
}

.pagination-main .pagination {
    display: flex;
    align-items: center;
    gap: calc(8px + (12 - 8) * ((100vw - 320px) / (1200 - 320)))
}

.pagination-main .pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #808b97;
    width: calc(30px + (35 - 30) * ((100vw - 320px) / (1200 - 320)));
    height: calc(30px + (35 - 30) * ((100vw - 320px) / (1200 - 320)));
    border: none;
    border-radius: 100%;
    padding: 0
}

.pagination-main .pagination .page-item .page-link:hover {
    background-color: #5465ff33
}

.pagination-main .pagination .page-item .page-link:focus {
    border: 1px solid #E5E8EA;
    outline: none;
    box-shadow: none
}

.pagination-main .pagination .page-item .page-link span {
    line-height: 1
}

.pagination-main .pagination .page-item.active .page-link {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 600;
    border-radius: 100%
}

.pagination-main .pagination .page-item.disabled .page-link {
    background-color: transparent
}

.pagination-main .pagination .page-item:hover {
    border-radius: 100%
}

.pagination {
    justify-content: center;
    gap: 10px
}

.pagination .page-item:not(:first-child) .page-link {
    margin: 0
}

.pagination .page-item:first-child .page-link {
    color: transparent;
    background-image: url(https://osoncor.tj/build/assets/left-709ed8de.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center
}

.pagination .page-item:last-child .page-link {
    color: transparent;
    background-image: url(https://osoncor.tj/build/assets/right-e6c9963b.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center
}

.pagination .page-item.active .page-link {
    background-color: var(--theme-color);
    color: #fff
}

.pagination .page-item .page-link {
    width: 38px;
    height: 38px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #808b97
}

.profile-body-wrapper .profile-wrapper {
    background-color: var(--theme-color);
    border-radius: 15px;
    padding: 20px;
    position: sticky;
    top: 100px
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper {
        position: fixed;
        top: 0;
        overflow: auto;
        left: -350px;
        width: calc(300px + .03125*(100vw - 320px));
        height: 100vh;
        z-index: 4;
        border-radius: 0;
        background-color: #fff;
        transform: unset;
        opacity: 1;
        padding: 0;
        border: none;
        box-shadow: 4px 4px 8px #22222214;
        visibility: visible
    }

    [dir=rtl] .profile-body-wrapper .profile-wrapper {
        left: unset;
        right: -350px
    }

    .profile-body-wrapper .profile-wrapper.open {
        left: 0
    }

    [dir=rtl] .profile-body-wrapper .profile-wrapper.open {
        left: unset;
        right: 0
    }

    .profile-body-wrapper .profile-wrapper .close {
        margin-left: auto;
        transform: rotate(45deg);
        --Iconsax-Color: #00162E;
        --Iconsax-Size: 28px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer
    }

    [dir=rtl] .profile-body-wrapper .profile-wrapper .close {
        right: unset;
        left: 10px;
        margin-left: unset;
        margin-right: auto
    }

    .profile-body-wrapper .profile-wrapper i {
        --Iconsax-Color: #fff
    }
}

.profile-body-wrapper .profile-wrapper .profile {
    padding: 20px 0 40px
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile {
        border-bottom: 1px solid #E5E8EA;
        background-color: #f5f6f7;
        padding-top: 40px;
        padding-bottom: 20px
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-img {
    position: relative;
    text-align: center;
    margin-bottom: -40px
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-img {
        margin: 0
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-img img {
    border-radius: 100%;
    border: 2px solid #ffffff;
    height: 80px;
    width: 80px
}

.profile-body-wrapper .profile-wrapper .profile .profile-img .profile-name {
    border-radius: 100%;
    border: 2px solid #ffffff;
    height: calc(62px + .01125*(100vw - 320px));
    width: calc(62px + .01125*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f6f7;
    color: var(--theme-color);
    position: relative;
    z-index: 1;
    font-size: calc(33px + (40 - 33) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    margin: auto
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-img .profile-name {
        border: 2px solid #E5E8EA;
        background-color: #fff
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-img .edit-modal {
    position: absolute;
    bottom: 0;
    left: 60%;
    transform: translate(-50%);
    z-index: 3;
    background-color: var(--theme-color);
    border-radius: 100%;
    width: 35px;
    height: 35px;
    padding: 5px
}

[dir=rtl] .profile-body-wrapper .profile-wrapper .profile .profile-img .edit-modal {
    left: unset
}

.profile-body-wrapper .profile-wrapper .profile .profile-img .edit-modal i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #fff
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail {
    padding: 20px;
    border-radius: 12px;
    background-image: url(https://osoncor.tj/build/assets/Base-cd528647.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 120px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail {
        padding-bottom: 0;
        background: none;
        height: unset;
        padding-top: calc(14px + (20 - 14) * ((100vw - 320px) / (1200 - 320)))
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail h5 {
    line-height: 1.3;
    margin-bottom: 4px;
    font-size: 19px;
    font-weight: 600
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail h5 {
        color: #222;
        font-weight: 500
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    gap: 4px;
    line-height: 1.3;
    color: #ddd;
    font-size: 15px
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail p {
        color: #808b97
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail p i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: white
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail p i {
        --Iconsax-Color: #808B97
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings {
    overflow: auto;
    height: 527px
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .mainnav-close {
    display: none !important
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse {
        display: block
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel {
    width: 100%
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 8px;
    border-bottom: unset
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper {
        margin: 17px 8px 0
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li {
    display: block
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 16px;
    border: none;
    transition: all .5s ease;
    outline: none;
    width: 100%;
    padding: 14px 16px;
    white-space: nowrap
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active i {
    display: none
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link i {
    display: block;
    --Iconsax-Size: 24px;
    --Iconsax-Color: white
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link i {
        --Iconsax-Color: #222
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link span {
    color: #fff;
    font-size: 16px
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link span {
        color: #222
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link .active-icon {
    display: none
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link .deactive-icon {
    display: block
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active {
    background-color: #fff
}

@media (max-width: 1199px) {
    .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active {
        background-color: #5465ff1a
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active span {
    color: var(--theme-color);
    font-weight: 500
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active .active-icon {
    display: block
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active .deactive-icon {
    display: none
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active:hover {
    background-color: #fff
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link:hover {
    background-color: #ffffff1a
}

.profile-body-wrapper .profile-wrapper .profile-logout {
    margin: 0 8px
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 16px;
    border: none;
    transition: all .5s ease;
    outline: none;
    width: 100%;
    padding: 14px 16px
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: white
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link span {
    color: #fff;
    font-size: 16px
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link:hover {
    background-color: #ffffff1a
}

.profile-body-wrapper .profile-main .card {
    background-color: #f5f6f7;
    border: none;
    border-radius: 10px
}

.profile-body-wrapper .profile-main .card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid #E5E8EA;
    flex-wrap: wrap
}

.profile-body-wrapper .profile-main .card .card-header .title-3 {
    position: relative
}

.profile-body-wrapper .profile-main .card .card-header .title-3:before {
    content: "";
    position: absolute;
    left: calc(-15px + -.00625*(100vw - 320px));
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--theme-color);
    height: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
    width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.profile-body-wrapper .profile-main .card .card-header .title-3 h3 {
    line-height: 1.3;
    font-size: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    letter-spacing: .7px
}

.profile-body-wrapper .profile-main .card .card-header a,
.profile-body-wrapper .profile-main .card .card-header button {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.profile-body-wrapper .profile-main .card .card-header a i,
.profile-body-wrapper .profile-main .card .card-header button i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #5465FF
}

.profile-body-wrapper .profile-main .card .card-body {
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)))
}

.profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header {
    display: flex;
    align-items: center;
    gap: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
    justify-content: unset;
    flex-direction: unset;
    overflow: unset
}

.profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header .badge {
    margin-left: auto
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header .badge {
    margin-left: unset;
    margin-right: auto
}

.profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header .delivery-name {
    width: calc(100% - calc(42px + .005*(100vw - 320px)) - calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320))));
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card {
    border: 1px solid #E5E8EA;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data h5 {
    line-height: 20px;
    color: #808b97;
    margin-bottom: 4px
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data h3 {
    font-weight: 700;
    line-height: 1.4
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon {
    position: relative;
    padding-right: 10px
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon {
    padding-right: unset;
    padding-left: 10px
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon .dot {
    background-color: #5465ff1a;
    border-radius: 100%;
    height: calc(22px + .005*(100vw - 320px));
    width: calc(22px + .005*(100vw - 320px));
    position: absolute;
    top: 0;
    right: 0
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon .dot {
    right: unset;
    left: 0
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon i {
    --Iconsax-Size: calc(31px + (38 - 31) * ((100vw - 320px) / (1920 - 320)));
    --Iconsax-Color: #5465FF;
    padding-top: calc(3px + (10 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.profile-body-wrapper .profile-main .card .card-body .profile-data h3 {
    line-height: 26px
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card {
    border: 1px solid #E5E8EA;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff;
    margin: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .profile-setting-img {
    background-color: #f5f6f7;
    border-radius: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(https://osoncor.tj/build/assets/setting-a48e7e3b.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 0;
    position: relative;
    padding: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .profile-setting-img .girl-on-chair {
    height: auto;
    width: calc(148px + .06375*(100vw - 320px));
    object-fit: contain
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .form-group .value {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.4;
    margin: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .form-group:last-child {
    margin: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .login-detail h4 {
    color: var(--theme-color);
    font-weight: 500;
    line-height: 23px
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail {
    position: relative
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .edit-modal {
    position: absolute;
    top: 0;
    right: 0
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .edit-modal {
    right: unset;
    left: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group {
    margin-bottom: calc(10px + .00625*(100vw - 320px))
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group label {
    font-size: calc(14px + .00125*(100vw - 320px));
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 4px
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group .edit-btn {
    padding-left: 5px;
    --Iconsax-Color: #5465FF;
    --Iconsax-Size: 18px
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group .edit-btn {
    padding-left: unset;
    padding-right: 5px
}

.profile-body-wrapper .profile-main .card .card-footer {
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    border-top: 1px solid #E5E8EA;
    gap: 16px;
    justify-content: start
}

.profile-body-wrapper .profile-main .card .card-footer .btn {
    width: max-content;
    padding: 10px 30px
}

.profile-body-wrapper .profile-main .review-main {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.profile-body-wrapper .profile-main .review-main .review-list {
    position: relative;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #E5E8EA;
    padding: 20px;
    background-color: #fff
}

.profile-body-wrapper .profile-main .review-main .review-list .review {
    display: flex;
    align-items: start;
    gap: calc(8px + .005*(100vw - 320px))
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .review {
        display: block
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-img {
    height: calc(35px + .00625*(100vw - 320px));
    width: calc(35px + .00625*(100vw - 320px));
    border-radius: 100%
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-img img {
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-img .initial-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    border-radius: 100%;
    background-color: #f5f6f7
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note {
    width: calc(100% - (8px + .005*(100vw - 320px)) - (35px + .00625*(100vw - 320px)))
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .review .review-note {
        width: 100%;
        margin-top: 8px
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date {
        align-items: center
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date span {
    font-weight: 500
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date small {
    color: #808b97
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date h6 {
    margin-top: 4px;
    color: #808b97
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note h5 {
    color: #00162e;
    line-height: 1.4;
    font-size: 15px;
    margin-top: 4px
}

.profile-body-wrapper .profile-main .review-main .review-list p {
    padding-left: 60px;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin: 10px 0 0;
    color: #808b97;
    line-height: 1.5
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list p {
        padding: 0
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time {
    display: flex;
    align-items: center;
    gap: 10px
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .notify-time {
        position: absolute;
        right: 20px;
        top: 25px
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .rate {
    justify-content: end;
    margin-top: 0
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .rate img {
    width: 13px;
    height: 13px
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .rate span {
    font-weight: 500
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time button {
    background: unset;
    border: none;
    padding: 0
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .edit {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #00162E;
    background-color: #f5f6f7;
    border-radius: 100%;
    height: calc(30px + .00625*(100vw - 320px));
    width: calc(30px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .delete {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #FF4B4B;
    background-color: #ff4b4b1a;
    border-radius: 100%;
    height: calc(30px + .00625*(100vw - 320px));
    width: calc(30px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.edit-modal {
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 6px;
    background-color: #5465ff1a
}

.edit-modal i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #5465FF
}

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

.col-img img {
    height: 594px
}

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

.notifications .notification-list {
    border-bottom: 1px solid #E5E8EA;
    padding: calc(12px + .005*(100vw - 320px));
    display: block;
    position: relative
}

@media (max-width: 575px) {
    .notifications .notification-list .notify {
        display: grid
    }
}

.notifications .notification-list .notify .notify-icon i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #a3aab1
}

.notifications .notification-list .notify .notify-note h5 {
    font-weight: 500;
    color: #808b97;
    line-height: 20px;
    margin-bottom: 8px;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.notifications .notification-list .notify .notify-note p {
    margin: 0;
    color: #808b97;
    line-height: 19px;
    font-size: calc(14px + .00125*(100vw - 320px))
}

.notifications .notification-list .notify .notify-note .notify-img img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.notifications .notification-list .notify-time {
    min-width: 70px;
    text-align: end;
    position: absolute;
    right: calc(12px + .005*(100vw - 320px))
}

[dir=rtl] .notifications .notification-list .notify-time {
    left: calc(12px + .005*(100vw - 320px));
    right: unset
}

@media (max-width: 575px) {
    .notifications .notification-list .notify-time {
        position: absolute;
        top: 10px;
        right: 20px
    }

    [dir=rtl] .notifications .notification-list .notify-time {
        right: unset;
        left: 20px
    }
}

.notifications .notification-list.unread .notify .notify-note h5,
.notifications .notification-list.unread .notify .notify-note p {
    color: #00162e
}

.notifications .notification-list.unread .notify .notify-icon i {
    --Iconsax-Color: #00162E
}

.notifications {
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E8EA;
    background-color: #fff;
    border-radius: 10px;
    height: 100%
}

@media (max-width: 1199px) {
    .notifications {
        height: auto
    }
}

.notifications.no-data-notifications {
    border: none
}

.notifications .no-data-detail {
    display: flex;
    align-items: center;
    justify-content: center
}

.notifications .no-data-detail .no-data-notification-img {
    height: 400px
}

.notifications .notification-list {
    border-bottom: 1px solid #E5E8EA;
    padding: calc(10px + .00625*(100vw - 320px));
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px
}

.notifications .notification-list:last-child {
    border-bottom: none
}

.notifications .notification-list .notify {
    display: flex;
    align-items: start;
    gap: 14px
}

.notifications .notification-list .notify .notify-icon {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 100%;
    background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: center
}

.notifications .notification-list .notify .notify-icon i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97
}

.notifications .notification-list .notify .notify-note h5 {
    font-weight: 500;
    color: #808b97;
    line-height: 20px;
    margin-bottom: 8px
}

.notifications .notification-list .notify .notify-note p {
    margin: 0;
    color: #808b97;
    line-height: 19px
}

.notifications .notification-list .notify .notify-note .notify-img {
    height: 50px;
    width: 50px;
    border-radius: 4px;
    overflow: hidden
}

.notifications .notification-list .notify .notify-note .notify-img img {
    height: 100%;
    width: 100%
}

.notifications .notification-list .notify-time {
    min-width: 70px;
    text-align: end
}

.notifications .notification-list .notify-time span {
    color: #808b97
}

.card.delivery-location .location-header {
    padding: calc(10px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    gap: calc(8px + .005*(100vw - 320px));
    justify-content: unset;
    flex-direction: unset
}

.card.delivery-location .location-header .badge {
    margin-left: auto
}

[dir=rtl] .card.delivery-location .location-header .badge {
    margin-left: unset;
    margin-right: auto
}

.card.delivery-location .location-header .delivery-name {
    width: calc(100% - calc(42px + .005*(100vw - 320px)) - calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320))));
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

[dir=rtl] .card.delivery-location .location-header .delivery-name {
    align-items: flex-end
}

.card.delivery-location .location-header .location-icon {
    border-radius: 100%;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    background-color: #5465ff1a;
    border: calc(2px + .00125*(100vw - 320px)) solid #ffffff;
    outline: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: center
}

.card.delivery-location .location-header .location-icon img {
    width: 24px;
    height: 24px
}

@media (max-width: 575px) {
    .card.delivery-location .location-header .location-icon img {
        height: 16px
    }
}

.card.delivery-location .location-header .active-icon {
    border: 1px solid var(--theme-color);
    border-radius: 100%;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.card.delivery-location .location-header .active-icon img {
    background-color: var(--theme-color);
    border: 1px solid #ffffff;
    padding: calc(8px + .00125*(100vw - 320px));
    border-radius: 100%;
    height: calc(38px + .0025*(100vw - 320px));
    width: calc(38px + .0025*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.card.delivery-location .address {
    padding: calc(10px + .00625*(100vw - 320px))
}

.card.delivery-location .address p {
    font-size: 16px;
    line-height: 1.5;
    height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.card.delivery-location .address .btn-outline {
    border-width: 1px;
    width: max-content;
    padding: 9px 18px
}

.card.delivery-location .address-bottom-box {
    padding: calc(10px + .00625*(100vw - 320px)) calc(16px + .0025*(100vw - 320px));
    border-top: 1px solid #ddd;
    position: relative
}

.card.delivery-location .address-bottom-box .action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px
}

.card.delivery-location .address-bottom-box .btn {
    width: 100%;
    padding-block: 10px;
    font-weight: 500;
    border-radius: 8px
}

.card.delivery-location .address-bottom-box .btn-fill {
    border: transparent;
    color: #fff;
    background-color: var(--theme-color)
}

.card.delivery-location .address-bottom-box .btn-fill:hover {
    background-color: transparent;
    color: var(--theme-color);
    border: 1px solid var(--theme-color)
}

.card.delivery-location .address-bottom-box .btn-outline {
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    background-color: transparent
}

.card.delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--theme-color);
    color: #fff;
    border-color: transparent
}

.card.delivery-location .address-bottom-box .btn-outline:hover .icon {
    --Iconsax-Color: #fff
}

.card.delivery-location .address-bottom-box .radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

[dir=rtl] .card.delivery-location .address-bottom-box .radio {
    left: unset;
    right: 0
}

.card.delivery-location .radio:checked~button {
    background-color: var(--theme-color);
    color: #fff
}

.add-location {
    color: var(--theme-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline
}

.add-location:hover {
    text-decoration: underline
}

[dir=rtl] .menu-wrapper {
    padding-right: 0
}

.irs--round {
    font-family: DM Sans, serif !important;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    height: 80px
}

.irs--round .irs {
    font-family: DM Sans, serif !important
}

.irs--round .irs-line {
    top: 10px;
    background-color: #e5e8ea;
    height: 5px
}

.irs--round .irs-handle {
    top: 21px;
    width: 14px;
    height: 14px;
    border: none;
    background-color: #00162ecc;
    border-radius: 100%;
    cursor: pointer
}

.irs--round .irs-handle:hover,
.irs--round .irs-handle.state_hover {
    background-color: #00162ecc
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    bottom: -40px;
    top: unset;
    background-color: transparent;
    color: #00162ecc;
    font-weight: 500;
    padding: 0
}

.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
    display: none
}

.irs--round .irs-bar {
    height: 5px;
    background-color: #00162ea6;
    top: 26px
}

#distance .distance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

#distance .distance .form-group {
    margin: 0
}

#distance .irs {
    font-family: DM Sans, serif !important
}

#distance .irs .irs-line {
    height: 4px
}

#distance .irs .irs-handle.single {
    display: none
}

#distance .irs.irs--modern .irs-grid-pol {
    color: #e5e8ea
}

#distance .irs.irs--modern .irs-grid-pol.small {
    display: none
}

#distance .irs.irs--modern .irs-single {
    background: url(https://osoncor.tj/build/assets/Frame-abe12fb7.svg);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    font-size: 30px;
    padding: 0;
    border-radius: 0;
    width: 10px;
    color: transparent;
    top: -4px;
    overflow: hidden;
    cursor: pointer
}

#distance .irs.irs--modern .irs-single:before {
    content: "";
    position: absolute;
    background-color: #00162e;
    border: none;
    left: 0;
    bottom: 6px;
    height: 7px;
    width: 7px;
    border-radius: 30px 0 0 30px
}

[dir=rtl] #distance .irs.irs--modern .irs-single:before {
    left: unset;
    right: 0;
    border-radius: 0 30px 30px 0
}

#distance .irs.irs--modern .irs-single:after {
    content: "";
    position: absolute;
    background-color: #00162e;
    right: -3px;
    bottom: 6px;
    height: 7px;
    width: 7px;
    border-radius: 0 30px 30px 0
}

[dir=rtl] #distance .irs.irs--modern .irs-single:after {
    right: unset;
    left: -3px;
    border-radius: 30px 0 0 30px
}

#distance .irs .irs-bar {
    background: #00162E;
    height: 4px
}

#distance .irs .irs-line {
    background-color: #e5e8ea
}

#distance .irs .irs-grid {
    height: 29px
}

#distance .irs .irs-grid .irs-grid-text {
    color: #00162e;
    white-space: wrap;
    width: min-content;
    bottom: -12px;
    line-height: 1;
    font-size: 14px;
    font-weight: 500
}

.star-rating {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 7px;
    flex-direction: row;
    font-size: 1.5em
}

.star-rating input {
    display: none
}

.star-rating label {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #808b97;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #E5E8EA;
    line-height: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500
}

.star-rating label i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.star-rating label:hover {
    background-color: var(--theme-color);
    color: #fff
}

.star-rating label:hover i {
    --Iconsax-Color: #fff
}

.star-rating :checked~label {
    background-color: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color)
}

.star-rating :checked~label i {
    --Iconsax-Color: #fff
}

.reviews {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}

.reviews:last-child {
    margin: 0
}

.reviews .person-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #00162e
}

.reviews .person-detail img {
    border-radius: 100%;
    height: 45px;
    width: 45px
}

.reviews .person-detail p {
    line-height: 1.5;
    color: #808b97;
    margin: 0;
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.reviews .person-detail h5 {
    line-height: 1.5;
    font-weight: 500
}

.reviews .rating .rate {
    justify-content: end;
    color: #00162e
}

.reviews .rating .rate small {
    font-size: 16px
}

.reviews .rating .overview-list {
    list-style: none
}

.reviews .rating .overview-list li {
    white-space: nowrap
}

@media (max-width: 575px) {
    .reviews .rating {
        margin-left: 50px
    }
}

@media (max-width: 575px) {
    .reviews {
        flex-direction: column;
        align-items: start;
        justify-content: unset;
        gap: 4px
    }

    .reviews .rating {
        margin-left: 50px;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 10px
    }

    .reviews .rating .rate {
        margin: 0
    }
}

.rating-bars {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    white-space: nowrap;
    display: flex;
    gap: 10px;
    flex-direction: column
}

.rating-bars .rating-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left
}

[dir=rtl] .rating-bars .rating-bar {
    text-align: right
}

.rating-bars .rating-bar .bar {
    width: 100%;
    height: 8px;
    background-color: #f5f6f7;
    border-radius: 4px
}

.rating-bars .rating-bar .bar .bar-item {
    height: 8px;
    background-color: #fdb448;
    border-radius: 4px
}

.rating-bars .rating-bar .bar .bar-item-5 {
    width: 84%
}

.rating-bars .rating-bar .bar .bar-item-4 {
    width: 30%
}

.rating-bars .rating-bar .bar .bar-item-3 {
    width: 12%
}

.rating-bars .rating-bar .bar .bar-item-2 {
    width: 6%
}

.rating-bars .rating-bar .bar .bar-item-1 {
    width: 3%
}

.rating-bars .rating-bar .left {
    min-width: 40px
}

.rating-bars .rating-bar .right {
    color: #808b97;
    text-align: left;
    min-width: 40px
}

[dir=rtl] .rating-bars .rating-bar .right {
    text-align: right
}

.ratio_18 .bg-size:before {
    padding-top: 18%;
    content: "";
    display: block
}

.ratio_20 .bg-size:before {
    padding-top: 20%;
    content: "";
    display: block
}

.ratio_24 .bg-size:before {
    padding-top: 24%;
    content: "";
    display: block
}

.ratio_36 .bg-size:before {
    padding-top: 36%;
    content: "";
    display: block
}

.ratio_40 .bg-size:before {
    padding-top: 40%;
    content: "";
    display: block
}

.ratio_45 .bg-size:before {
    padding-top: 45%;
    content: "";
    display: block
}

.ratio_46 .bg-size:before {
    content: "";
    padding-top: 46%;
    display: block
}

.ratio_47 .bg-size:before {
    padding-top: 47.8%;
    content: "";
    display: block
}

.ratio_70 .bg-size:before {
    padding-top: 70%;
    content: "";
    display: block
}

.ratio2_1 .bg-size:before {
    padding-top: 50%;
    content: "";
    display: block
}

.ratio2_2 .bg-size:before {
    padding-top: 56%;
    content: "";
    display: block
}

.ratio2_3 .bg-size:before {
    padding-top: 60%;
    content: "";
    display: block
}

.ratio-68 .bg-size:before {
    padding-top: 68%;
    content: "";
    display: block
}

.ratio3_2 .bg-size:before {
    padding-top: 66.66%;
    content: "";
    display: block
}

.ratio_landscape .bg-size:before {
    padding-top: 75%;
    content: "";
    display: block
}

.ratio-80 .bg-size:before {
    padding-top: 80%;
    content: "";
    display: block
}

.ratio-85 .bg-size:before {
    padding-top: 85%;
    content: "";
    display: block
}

.ratio_blog-list .bg-size:before {
    padding-top: 88.6%;
    content: "";
    display: block
}

.ratio_square .bg-size:before {
    padding-top: 100%;
    content: "";
    display: block
}

.ratio_94 .bg-size:before {
    padding-top: 94%;
    content: "";
    display: block
}

.ratio_115 .bg-size:before {
    padding-top: 115%;
    content: "";
    display: block
}

.ratio_125 .bg-size:before {
    padding-top: 125%;
    content: "";
    display: block
}

.ratio_124 .bg-size:before {
    padding-top: 124.7777778%;
    content: "";
    display: block
}

.ratio_asos .bg-size:before {
    padding-top: 127.7777778%;
    content: "";
    display: block
}

.ratio_asos_1 .bg-size:before {
    padding-top: 136.777778%;
    content: "";
    display: block
}

.ratio_portrait .bg-size:before {
    padding-top: 150%;
    content: "";
    display: block
}

.ratio_163 .bg-size:before {
    padding-top: 163%;
    content: "";
    display: block
}

.ratio1_2 .bg-size:before {
    padding-top: 200%;
    content: "";
    display: block
}

.b-top {
    background-position: top !important
}

.b-bottom {
    background-position: bottom !important
}

.b-center {
    background-position: center !important
}

.b_size_content {
    background-size: contain !important;
    background-repeat: no-repeat
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
    margin-top: 21px;
    opacity: 1;
    box-shadow: unset;
    border-radius: 5px;
    padding: 14px 24px 14px 49px;
    background-size: 23px;
    position: relative;
    background-color: #fff;
    width: max-content
}

#toast-container.toast-bottom-center>div:before,
#toast-container.toast-top-center>div:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    height: calc(100% - 12px)
}

[dir=rtl] #toast-container.toast-bottom-center>div:before,
[dir=rtl] #toast-container.toast-top-center>div:before {
    left: unset;
    right: 0;
    border-radius: 3px 0 0 3px
}

#toast-container.toast-bottom-center>div:after,
#toast-container.toast-top-center>div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1
}

[dir=rtl] #toast-container.toast-bottom-center>div:after,
[dir=rtl] #toast-container.toast-top-center>div:after {
    left: unset;
    right: 0
}

#toast-container>.toast-success {
    background-image: url(https://osoncor.tj/build/assets/check-c8c999e0.svg) !important
}

#toast-container>.toast-success>div {
    border: 2px solid #27AF4D
}

#toast-container>.toast-success:before {
    background-color: #27af4d
}

#toast-container .toast-message {
    font-size: 18px;
    font-weight: 600;
    color: #27af4d
}

#toast-container .toast-success {
    background-color: #3477c40d;
    border: 2px solid #27AF4D
}

#toast-container .toast-success .toast-message {
    color: #27af4d
}

#toast-container .toast-error {
    background-color: #e43e3e0d;
    border: 2px solid #e43e3e;
    background-image: url(https://osoncor.tj/build/assets/error-759a4672.svg) !important
}

#toast-container .toast-error:before {
    background-color: #e43e3e
}

#toast-container .toast-error .toast-message {
    color: #e43e3e
}

#toast-container .toast-info {
    background-color: #1999b30d;
    border: 2px solid #1999b3;
    background-image: url(https://osoncor.tj/build/assets/info-022ca93a.svg) !important
}

#toast-container .toast-info:before {
    background-color: #1999b3
}

#toast-container .toast-info .toast-message {
    color: #1999b3
}

#toast-container .toast-warning {
    background-color: #e39e080d;
    border: 2px solid #e39f08;
    background-image: url(https://osoncor.tj/build/assets/warning-abbb56af.svg) !important
}

#toast-container .toast-warning:before {
    background-color: #e39f08
}

#toast-container .toast-warning .toast-message {
    color: #e39f08
}

[dir=rtl] .swiper {
    direction: ltr
}

[dir=rtl] .swiper .swiper-slide {
    direction: rtl
}

.swiper .swiper-slide .card {
    margin-bottom: 0
}

.offer-section .swiper-button-next4,
.offer-section .swiper-button-prev4,
.offer-section .swiper-button-next1,
.offer-section .swiper-button-prev1,
.offer-section .swiper-button-next2,
.offer-section .swiper-button-prev2,
.offer-section .swiper-button-next3,
.offer-section .swiper-button-prev3,
.service-list-section .swiper-button-next4,
.service-list-section .swiper-button-prev4,
.service-list-section .swiper-button-next1,
.service-list-section .swiper-button-prev1,
.service-list-section .swiper-button-next2,
.service-list-section .swiper-button-prev2,
.service-list-section .swiper-button-next3,
.service-list-section .swiper-button-prev3,
.service-package-section .swiper-button-next4,
.service-package-section .swiper-button-prev4,
.service-package-section .swiper-button-next1,
.service-package-section .swiper-button-prev1,
.service-package-section .swiper-button-next2,
.service-package-section .swiper-button-prev2,
.service-package-section .swiper-button-next3,
.service-package-section .swiper-button-prev3,
.about-us-slider .swiper-button-next4,
.about-us-slider .swiper-button-prev4,
.about-us-slider .swiper-button-next1,
.about-us-slider .swiper-button-prev1,
.about-us-slider .swiper-button-next2,
.about-us-slider .swiper-button-prev2,
.about-us-slider .swiper-button-next3,
.about-us-slider .swiper-button-prev3 {
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    width: 28px;
    height: 20px;
    top: -10px;
    position: absolute;
    opacity: 1
}

.offer-section .swiper-button-next4:after,
.offer-section .swiper-button-prev4:after,
.offer-section .swiper-button-next1:after,
.offer-section .swiper-button-prev1:after,
.offer-section .swiper-button-next2:after,
.offer-section .swiper-button-prev2:after,
.offer-section .swiper-button-next3:after,
.offer-section .swiper-button-prev3:after,
.service-list-section .swiper-button-next4:after,
.service-list-section .swiper-button-prev4:after,
.service-list-section .swiper-button-next1:after,
.service-list-section .swiper-button-prev1:after,
.service-list-section .swiper-button-next2:after,
.service-list-section .swiper-button-prev2:after,
.service-list-section .swiper-button-next3:after,
.service-list-section .swiper-button-prev3:after,
.service-package-section .swiper-button-next4:after,
.service-package-section .swiper-button-prev4:after,
.service-package-section .swiper-button-next1:after,
.service-package-section .swiper-button-prev1:after,
.service-package-section .swiper-button-next2:after,
.service-package-section .swiper-button-prev2:after,
.service-package-section .swiper-button-next3:after,
.service-package-section .swiper-button-prev3:after,
.about-us-slider .swiper-button-next4:after,
.about-us-slider .swiper-button-prev4:after,
.about-us-slider .swiper-button-next1:after,
.about-us-slider .swiper-button-prev1:after,
.about-us-slider .swiper-button-next2:after,
.about-us-slider .swiper-button-prev2:after,
.about-us-slider .swiper-button-next3:after,
.about-us-slider .swiper-button-prev3:after {
    display: none
}

.offer-section .swiper-button-prev4,
.offer-section .swiper-button-prev1,
.offer-section .swiper-button-prev2,
.offer-section .swiper-button-prev3,
.service-list-section .swiper-button-prev4,
.service-list-section .swiper-button-prev1,
.service-list-section .swiper-button-prev2,
.service-list-section .swiper-button-prev3,
.service-package-section .swiper-button-prev4,
.service-package-section .swiper-button-prev1,
.service-package-section .swiper-button-prev2,
.service-package-section .swiper-button-prev3,
.about-us-slider .swiper-button-prev4,
.about-us-slider .swiper-button-prev1,
.about-us-slider .swiper-button-prev2,
.about-us-slider .swiper-button-prev3 {
    background-image: url(https://osoncor.tj/build/assets/preview-9bdd1cc8.svg);
    right: 30px;
    left: auto
}

.offer-section .swiper-button-prev4.swiper-button-disabled,
.offer-section .swiper-button-prev1.swiper-button-disabled,
.offer-section .swiper-button-prev2.swiper-button-disabled,
.offer-section .swiper-button-prev3.swiper-button-disabled,
.service-list-section .swiper-button-prev4.swiper-button-disabled,
.service-list-section .swiper-button-prev1.swiper-button-disabled,
.service-list-section .swiper-button-prev2.swiper-button-disabled,
.service-list-section .swiper-button-prev3.swiper-button-disabled,
.service-package-section .swiper-button-prev4.swiper-button-disabled,
.service-package-section .swiper-button-prev1.swiper-button-disabled,
.service-package-section .swiper-button-prev2.swiper-button-disabled,
.service-package-section .swiper-button-prev3.swiper-button-disabled,
.about-us-slider .swiper-button-prev4.swiper-button-disabled,
.about-us-slider .swiper-button-prev1.swiper-button-disabled,
.about-us-slider .swiper-button-prev2.swiper-button-disabled,
.about-us-slider .swiper-button-prev3.swiper-button-disabled {
    background-image: url(https://osoncor.tj/build/assets/preview-disable-27248d40.svg) !important
}

.offer-section .swiper-button-next4,
.offer-section .swiper-button-next1,
.offer-section .swiper-button-next2,
.offer-section .swiper-button-next3,
.service-list-section .swiper-button-next4,
.service-list-section .swiper-button-next1,
.service-list-section .swiper-button-next2,
.service-list-section .swiper-button-next3,
.service-package-section .swiper-button-next4,
.service-package-section .swiper-button-next1,
.service-package-section .swiper-button-next2,
.service-package-section .swiper-button-next3,
.about-us-slider .swiper-button-next4,
.about-us-slider .swiper-button-next1,
.about-us-slider .swiper-button-next2,
.about-us-slider .swiper-button-next3 {
    background-image: url(https://osoncor.tj/build/assets/next-81635834.svg) !important;
    right: 0;
    left: auto
}

.offer-section .swiper-button-next4.swiper-button-disabled,
.offer-section .swiper-button-next1.swiper-button-disabled,
.offer-section .swiper-button-next2.swiper-button-disabled,
.offer-section .swiper-button-next3.swiper-button-disabled,
.service-list-section .swiper-button-next4.swiper-button-disabled,
.service-list-section .swiper-button-next1.swiper-button-disabled,
.service-list-section .swiper-button-next2.swiper-button-disabled,
.service-list-section .swiper-button-next3.swiper-button-disabled,
.service-package-section .swiper-button-next4.swiper-button-disabled,
.service-package-section .swiper-button-next1.swiper-button-disabled,
.service-package-section .swiper-button-next2.swiper-button-disabled,
.service-package-section .swiper-button-next3.swiper-button-disabled,
.about-us-slider .swiper-button-next4.swiper-button-disabled,
.about-us-slider .swiper-button-next1.swiper-button-disabled,
.about-us-slider .swiper-button-next2.swiper-button-disabled,
.about-us-slider .swiper-button-next3.swiper-button-disabled {
    background-image: url(https://osoncor.tj/build/assets/next-disable-20a25723.svg) !important
}

.swiper-button-next5,
.swiper-button-prev5 {
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: center;
    width: 35px;
    height: 35px;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff6;
    border-radius: 100%;
    opacity: 1
}

.swiper-button-next5:after,
.swiper-button-prev5:after {
    display: none
}

.swiper-button-next5.swiper-button-disabled,
.swiper-button-prev5.swiper-button-disabled {
    opacity: .7
}

.swiper-button-prev5 {
    background-image: url(https://osoncor.tj/build/assets/left-709ed8de.svg);
    left: 20px
}

.swiper-button-next5 {
    background-image: url(https://osoncor.tj/build/assets/right-e6c9963b.svg) !important;
    right: 20px
}

.table-responsive {
    border: 1px solid #E5E8EA;
    border-radius: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)))
}

.table-responsive.custom-scroll::-webkit-scrollbar {
    height: 5px
}

.table-responsive .table {
    overflow: hidden;
    border: none;
    margin: 0;
    --bs-table-bg: unset
}

.table-responsive .table thead {
    background-color: #f5f6f7
}

.table-responsive .table thead tr th {
    font-size: 14px;
    font-weight: 500;
    color: #808b97;
    padding: calc(12px + .0025*(100vw - 320px)) calc(12px + .0025*(100vw - 320px));
    line-height: 1.2
}

.table-responsive .table tbody tr {
    border-bottom: 1px dashed #E5E8EA
}

.table-responsive .table tbody tr:last-child {
    border-bottom: none
}

.table-responsive .table tbody tr td {
    vertical-align: middle;
    padding: calc(12px + .0025*(100vw - 320px)) calc(12px + .0025*(100vw - 320px));
    font-size: 14px;
    line-height: 1
}

.table-responsive .table tbody tr td h6 {
    color: var(--theme-color)
}

.table-responsive .table>:not(:first-child),
.table-responsive .table>:not(caption)>*>* {
    border: none
}

.table-responsive .table.wallet-table .dataTables_processing {
    position: absolute;
    top: 0;
    left: 0;
    transform: unset;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #fff
}

[dir=rtl] .table-responsive .table.wallet-table .dataTables_processing {
    right: 0;
    left: unset
}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_length label {
    padding-inline: 0
}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_length select {
    padding: 10px 16px;
    border: 1px solid #E5E8EA;
    background-color: #fff;
    border-radius: 7px;
    font-size: 15px
}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_filter label {
    padding-inline: 0
}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_filter label input {
    padding: 10px 16px;
    border: 1px solid #E5E8EA;
    background-color: #fff;
    border-radius: 7px;
    font-size: 15px
}

.table-responsive .table.wallet-table.table {
    overflow: auto
}

.table-responsive .table.wallet-table table {
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    overflow: hidden auto
}

.table-responsive .table.wallet-table table thead {
    background-color: var(--theme-color)
}

.table-responsive .table.wallet-table table thead tr th {
    color: #fff;
    font-size: calc(16px + .00125*(100vw - 320px));
    white-space: nowrap;
    font-weight: 600;
    padding: 16px;
    text-align: center
}

.table-responsive .table.wallet-table table thead tr th:nth-child(3) {
    max-width: 300px
}

.table-responsive .table.wallet-table table thead tr th:nth-child(2),
.table-responsive .table.wallet-table table thead tr th:first-child {
    text-align: left
}

[dir=rtl] .table-responsive .table.wallet-table table thead tr th:nth-child(2),
[dir=rtl] .table-responsive .table.wallet-table table thead tr th:first-child {
    text-align: right
}

.table-responsive .table.wallet-table table tbody {
    background-color: #fff
}

.table-responsive .table.wallet-table table tbody tr td {
    font-size: calc(14px + .00125*(100vw - 320px));
    white-space: nowrap;
    border-bottom: 1px dashed #E5E8EA;
    text-align: center;
    padding: calc(16px + .0025*(100vw - 320px)) 16px
}

.table-responsive .table.wallet-table table tbody tr td:nth-child(2),
.table-responsive .table.wallet-table table tbody tr td:first-child {
    text-align: left
}

.table-responsive .table.wallet-table table tbody tr td:last-child {
    color: #808b97
}

.table-responsive .table.wallet-table table tbody tr td:first-child {
    color: var(--theme-color);
    font-weight: 600;
    font-size: 17px
}

.table-responsive .table.wallet-table table tbody tr .success-light,
.table-responsive .table.wallet-table table tbody tr .danger-light {
    font-weight: 600;
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 4px
}

.table-responsive .table.wallet-table table tbody tr .success-light {
    background-color: #27af4d1a;
    color: #27af4d
}

.table-responsive .table.wallet-table table tbody tr .danger-light {
    background-color: #ff4b4b1a;
    color: #ff4b4b
}

.table-responsive .table.wallet-table table tbody tr:last-child td {
    border-bottom: unset
}

.table-responsive .table.wallet-table .dataTables_info {
    padding-top: 19px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600
}

.table-responsive .table.wallet-table .dataTables_paginate span {
    display: flex;
    align-items: center
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3aab1;
    width: calc(32px + 6*(100vw - 320px) / 880);
    height: calc(32px + 6*(100vw - 320px) / 880);
    border: none;
    border-radius: 100%;
    padding: 0;
    background-color: #fff;
    border: 1px solid #E5E8EA
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button:hover {
    color: #5465ff !important;
    border-color: #5465ff03;
    background: rgba(84, 101, 255, .1);
    box-shadow: unset
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.previous {
    color: transparent !important;
    background-image: url(https://osoncor.tj/build/assets/left-709ed8de.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    width: auto;
    padding: 0
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button:hover {
    background-color: #fff;
    color: var(--theme-color) !important;
    border-color: var(--theme-color)
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.current,
.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-color);
    color: #fff !important;
    font-weight: 600
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.next,
.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.previous {
    width: auto;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600
}

.table-responsive .table.booking-table thead tr th:nth-child(1) {
    min-width: 250px
}

.table-responsive .table.booking-table thead tr th:nth-child(2) {
    min-width: 100px
}

.table-responsive .table.booking-table thead tr th:nth-child(3) {
    min-width: 120px
}

.table-responsive .table.booking-table thead tr th:nth-child(4) {
    min-width: 180px
}

.wallet-data-table .table.no-footer {
    width: 100% !important;
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    overflow: hidden auto
}

.wallet-data-table .table.dataTables_wrapper {
    width: calc(100% - 1px);
    padding: 0
}

.wallet-data-table .table thead {
    background-color: var(--theme-color)
}

.wallet-data-table .table thead tr th {
    color: #fff;
    font-size: calc(16px + .00125*(100vw - 320px));
    white-space: nowrap;
    font-weight: 600;
    padding: 16px;
    text-align: center
}

.wallet-data-table .table tbody {
    background-color: #fff
}

.wallet-data-table .table tbody tr td {
    font-size: calc(14px + .00125*(100vw - 320px));
    white-space: nowrap;
    border-bottom: 1px dashed #E5E8EA;
    text-align: center;
    font-weight: 400;
    padding: calc(16px + .0025*(100vw - 320px)) 16px
}

.wallet-data-table .table tbody tr td:nth-child(3) {
    max-width: 260px !important
}

.wallet-data-table .table tbody tr td:last-child {
    color: #808b97
}

.wallet-data-table .table tbody tr .success-light,
.wallet-data-table .table tbody tr .danger-light {
    font-weight: 600;
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 4px
}

.wallet-data-table .table tbody tr .success-light {
    background-color: #27af4d1a;
    color: #27af4d
}

.wallet-data-table .table tbody tr .danger-light {
    background-color: #ff4b4b1a;
    color: #ff4b4b
}

.wallet-data-table .table tbody tr:last-child td {
    border-bottom: unset
}

.wallet-data-table .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 10px
}

.wallet-data-table .dataTables_paginate span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0
}

.wallet-data-table .dataTables_paginate .paginate_button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3aab1;
    width: calc(32px + 6*(100vw - 320px) / 880);
    height: calc(32px + 6*(100vw - 320px) / 880);
    border: none;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #E5E8EA;
    padding: 0;
    margin: 0
}

.wallet-data-table .dataTables_paginate .paginate_button:hover {
    color: #5465ff !important;
    border-color: #5465ff03;
    background: rgba(84, 101, 255, .1);
    box-shadow: unset
}

.wallet-data-table .dataTables_paginate .paginate_button.previous,
.wallet-data-table .dataTables_paginate .paginate_button.next {
    color: transparent !important;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    width: auto;
    padding: 0;
    font-size: 0;
    width: calc(32px + 6*(100vw - 320px) / 880) !important;
    height: calc(32px + 6*(100vw - 320px) / 880)
}

.wallet-data-table .dataTables_paginate .paginate_button.previous {
    background-image: url(https://osoncor.tj/build/assets/left-709ed8de.svg)
}

.wallet-data-table .dataTables_paginate .paginate_button.next {
    background-image: url(https://osoncor.tj/build/assets/right-e6c9963b.svg)
}

.wallet-data-table .dataTables_paginate .paginate_button .disabled:hover {
    background-color: #f8f9fa !important;
    color: transparent !important;
    border-color: var(--theme-color)
}

.wallet-data-table .dataTables_paginate .paginate_button.current,
.wallet-data-table .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-color);
    color: #fff !important;
    font-weight: 600
}

.wallet-data-table .dataTables_paginate .paginate_button.next,
.wallet-data-table .dataTables_paginate .paginate_button.previous {
    width: auto;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600
}

.wallet-data-table table.dataTable.table thead td.sorting:after,
.wallet-data-table table.dataTable.table thead td.sorting_desc:after,
.wallet-data-table table.dataTable.table thead td.sorting_asc:after,
.wallet-data-table table.dataTable.table thead th.sorting:after,
.wallet-data-table table.dataTable.table thead th.sorting_desc:after,
.wallet-data-table table.dataTable.table thead th.sorting_asc:after {
    font-family: DM Sans, serif;
    top: 50%;
    transform: translateY(-50%)
}

.wallet-data-table table.dataTable thead .sorting:before,
.wallet-data-table table.dataTable thead .sorting_asc:before,
.wallet-data-table table.dataTable thead .sorting_desc:before,
.wallet-data-table table.dataTable thead .sorting_asc_disabled:before,
.wallet-data-table table.dataTable thead .sorting_desc_disabled:before {
    right: 25px;
    font-size: .8em
}

[dir=rtl] .wallet-data-table table.dataTable thead .sorting:before,
[dir=rtl] .wallet-data-table table.dataTable thead .sorting_asc:before,
[dir=rtl] .wallet-data-table table.dataTable thead .sorting_desc:before,
[dir=rtl] .wallet-data-table table.dataTable thead .sorting_asc_disabled:before,
[dir=rtl] .wallet-data-table table.dataTable thead .sorting_desc_disabled:before {
    right: unset;
    left: 25px
}

.wallet-data-table .dataTables_wrapper {
    font-family: DM Sans, serif
}

.wallet-data-table .dataTables_wrapper .dataTables_length label {
    padding: 0 0 11px;
    font-size: 16px
}

.wallet-data-table .dataTables_wrapper .dataTables_length select {
    padding: 10px 16px;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    font-size: calc(14px + (15 - 14)*((100vw - 320px) /(1920 - 320)));
    color: #00162e;
    margin-inline: 7px;
    line-height: 1.3
}

.wallet-data-table .dataTables_wrapper .dataTables_filter label {
    padding: 0 0 11px;
    font-size: 16px
}

.wallet-data-table .dataTables_wrapper .dataTables_filter input {
    padding: 10px 16px;
    border: none;
    margin-left: 7px;
    background-color: #fff;
    border-radius: 8px;
    font-size: calc(14px + (15 - 14)*((100vw - 320px) /(1920 - 320)));
    color: #00162e;
    line-height: 1.3
}

.wallet-data-table .dataTables_wrapper .dataTables_processing {
    padding-block: 8px
}

.wallet-data-table .dataTables_wrapper {
    position: static;
    overflow: auto
}

.wallet-data-table .dataTables_wrapper .dataTable {
    margin-bottom: 60px !important
}

.wallet-data-table .dataTables_wrapper .dataTables_info {
    position: absolute;
    bottom: 45px;
    left: calc(16px + (25 - 16)*((100vw - 320px) /(1920 - 320)))
}

.wallet-data-table .dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 30px;
    right: calc(16px + (25 - 16)*((100vw - 320px) /(1920 - 320)))
}

@media (max-width: 425px) {
    .wallet-data-table .dataTables_wrapper .dataTables_paginate {
        bottom: 18px
    }
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
    top: 50%;
    transform: translateY(-50%);
    display: block;
    bottom: unset;
    font-size: 1.3em
}

.custom-nav-tabs {
    border: none;
    overflow: auto hidden;
    display: flex;
    flex-wrap: nowrap;
    gap: calc(14px + .00625*(100vw - 320px))
}

.custom-nav-tabs .nav-item {
    border: none;
    padding: 0;
    min-width: calc(108px + (145 - 108) * ((100vw - 320px) / (1920 - 320)));
    width: 100%
}

.custom-nav-tabs .nav-item .nav-link {
    border-radius: 10px;
    padding: calc(8px + .0075*(100vw - 320px));
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #E5E8EA;
    margin-bottom: 0;
    width: 100%;
    transition: all .5s ease
}

.custom-nav-tabs .nav-item .nav-link.active,
.custom-nav-tabs .nav-item .nav-link:hover {
    background-color: #5465ff1a;
    border: 1px solid rgba(84, 101, 255, .01)
}

.custom-nav-tabs .nav-item .nav-link.active span,
.custom-nav-tabs .nav-item .nav-link:hover span {
    color: var(--theme-color)
}

.custom-nav-tabs .nav-item .nav-link.active .img-box,
.custom-nav-tabs .nav-item .nav-link:hover .img-box {
    background-color: #fff
}

.custom-nav-tabs .nav-item .nav-link.active img.inactive,
.custom-nav-tabs .nav-item .nav-link:hover img.inactive {
    display: none
}

.custom-nav-tabs .nav-item .nav-link.active img.active,
.custom-nav-tabs .nav-item .nav-link:hover img.active {
    display: block
}

.custom-nav-tabs .nav-item .nav-link .img-box {
    width: 100%;
    height: calc(66px + (95 - 66) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 12px;
    background-color: #e5e8ea66;
    padding: calc(13px + .0075*(100vw - 320px));
    border-radius: 4px;
    transition: all .5s ease
}

.custom-nav-tabs .nav-item .nav-link img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.custom-nav-tabs .nav-item .nav-link img.active {
    display: none
}

.custom-nav-tabs .nav-item .nav-link img.inactive {
    display: block
}

.custom-nav-tabs .nav-item .nav-link span {
    font-family: DM Sans, serif !important;
    margin: 0 auto;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #00162e;
    line-height: 26px;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.custom-nav-tabs .nav-item .nav-link small {
    font-family: DM Sans, serif !important;
    margin: 0 auto;
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #00162e99;
    line-height: 20px;
    white-space: nowrap
}

.tab-content {
    margin-top: 30px
}

.review-tab {
    margin: 0
}

.review-tab .tab-pane {
    padding: 20px;
    min-height: 290px
}

.review-tab .nav-item .nav-link {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #808b97;
    border: none
}

.review-tab .nav-item .nav-link.active {
    background-color: transparent;
    border: none;
    color: #00162e;
    border-bottom: 2px solid #00162E
}

.review-tab .nav-item .nav-link.active:hover {
    border-bottom: 2px solid #00162E
}

.review-tab .nav-item .nav-link:hover {
    border: none
}

.favorite-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-bottom: 1px solid #E5E8EA;
    padding-bottom: 16px
}

.favorite-tab h3 {
    font-weight: 700
}

.favorite-tab .nav-tabs {
    border: none;
    gap: 12px
}

.favorite-tab .nav-tabs .nav-item .nav-link {
    background-color: #5465ff1a;
    color: var(--theme-color);
    border: none;
    border-radius: 10px;
    font-size: 18px;
    padding: 9px 27px
}

.favorite-tab .nav-tabs .nav-item .nav-link.active {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 500
}

.provider-detail-tab .nav-tabs {
    flex-direction: column;
    gap: 16px
}

.provider-detail-tab .nav-tabs .nav-item .nav-link {
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    border-radius: 8px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    padding: 12px;
    background-color: transparent
}

.overview-list {
    list-style: disc;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

[dir=rtl] .overview-list {
    padding-left: 0;
    padding-right: 20px
}

.overview-list li {
    display: list-item;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.provider-service-tab {
    padding-bottom: 16px;
    gap: 12px
}

.provider-service-tab .nav-item .nav-link {
    background-color: #5465ff1a;
    color: var(--theme-color);
    border: none;
    border-radius: 30px;
    font-size: 16px;
    padding: 6px 16px
}

.provider-service-tab .nav-item .nav-link.active {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 500
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4
}

[dir=rtl] header {
    right: 0;
    left: unset
}

header.active {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #010d25;
    box-shadow: 0 8px 10px #00162e0d;
    z-index: 6
}

[dir=rtl] header.active {
    right: 0;
    left: unset
}

header.active .container-fluid-xl {
    padding: 0 calc(12px + .055*(100vw - 320px))
}

header.active .navbar {
    padding-block: 20px
}

@media (max-width: 1199px) {
    header.active .navbar {
        padding-block: calc(12px + .005*(100vw - 320px))
    }
}

header.active .navbar .onhover-show-div {
    background-color: #fff !important
}

header.active .navbar .onhover-show-div li {
    color: #00162e99 !important
}

header.active .navbar .onhover-show-div li.location>div h5 {
    color: #00162e
}

header.active .navbar .onhover-show-div li.location>div h6 {
    color: #00162e80
}

header.active .navbar .onhover-show-div li a {
    color: #00162e99 !important
}

header.active .navbar .onhover-show-div li i {
    --Iconsax-Color: #00162e99 !important
}

header.active .navbar .onhover-show-div li:hover {
    color: #00162e !important
}

header.active .navbar .onhover-show-div li:hover a {
    color: #00162e !important
}

header.active .navbar .onhover-show-div li:hover i {
    --Iconsax-Color: #00162E !important
}

header.active .navbar .onhover-show-div .detect-location .detect-location-title .location-icon {
    --Iconsax-Color: #00162E !important
}

header.active .navbar .onhover-show-div .detect-location .detect-location-title h4 {
    color: #00162e !important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn {
    color: #5465ff !important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn i {
    --Iconsax-Color: #5465FF !important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn:hover {
    color: #fff !important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn:hover i {
    --Iconsax-Color: #fff !important
}

header.active .navbar .onhover-show-div .detect-location .location-content span {
    color: #00162e !important
}

header.active .navbar .onhover-show-div .detect-location .location-content .location-search {
    background-color: #f5f6f7;
    color: #00162e
}

header.active .navbar .onhover-show-div .detect-location .location-content .location-search::placeholder {
    color: #a3aab1
}

header .custom-navbar .logo-content {
    display: flex;
    align-items: center;
    gap: calc(4px + .0125*(100vw - 320px))
}

header .custom-navbar .logo-content .navbar-toggler-icon {
    filter: invert(1)
}

header .custom-navbar i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: White
}

header .custom-navbar .navbar-brand {
    margin: 0;
    padding: 0;
    font-size: 0
}

header .custom-navbar .navbar-brand img {
    width: calc(70px + .02875*(100vw - 320px));
    height: auto
}

header .custom-navbar .location-dropdown {
    border: 1px solid rgba(255, 255, 255, .1);
    background-color: #1d2537;
    padding: calc(6px + .0025*(100vw - 320px));
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100px + .09375*(100vw - 320px))
}

@media (max-width: 1199px) {
    header .custom-navbar .location-dropdown {
        max-width: calc(100px + (250 - 100) * ((100vw - 320px) / (1199 - 320)))
    }
}

header .custom-navbar .location-dropdown .location-btn {
    background: transparent;
    color: #fff;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: auto
}

@media (max-width: 576px) {
    header .custom-navbar .location-dropdown .location-btn {
        gap: 0
    }
}

header .custom-navbar .location-dropdown .location-btn .location-svg {
    --Iconsax-Size: 22px;
    --Iconsax-Color: White
}

header .custom-navbar .location-dropdown .location-btn .location-part {
    overflow: hidden;
    display: flex
}

header .custom-navbar .location-dropdown .location-btn .location-part .location-place {
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

header .custom-navbar .location-dropdown .location-btn .arrow {
    ---Iconsax-Size: 18px;
    --Iconsax-Color: White
}

@media (max-width: 576px) {
    header .custom-navbar .location-dropdown .location-btn .arrow {
        display: none
    }
}

header .custom-navbar .location-dropdown .location-btn span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block
}

@media (max-width: 576px) {
    header .custom-navbar .location-dropdown .location-btn span {
        display: none
    }
}

header .custom-navbar .location-dropdown .onhover-show-div {
    min-width: 630px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .1);
    background-color: #1d2537;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -5%, 0);
    top: 45px;
    left: 0;
    padding: 15px;
    border-radius: 12px;
    width: 100%
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div {
    left: unset;
    right: 0
}

@media (max-width: 767px) {
    header .custom-navbar .location-dropdown .onhover-show-div {
        left: -120px !important
    }

    [dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div {
        left: unset !important;
        right: -120px !important
    }
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div {
        min-width: calc(300px + (480 - 300) * ((100vw - 320px) / (550 - 320)))
    }
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div {
    left: 0;
    right: unset
}

[dir=rtl] [dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div {
    left: unset;
    right: 0
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title {
    display: flex;
    align-items: start;
    gap: 4px
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title {
    align-items: end
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .location-icon {
    margin-top: 4px;
    --Iconsax-Color: #fff;
    --Iconsax-Size: 16px
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title h4 {
    font-size: 16px;
    color: #fff;
    line-height: 1.5
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn {
    margin-left: auto;
    cursor: pointer
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn {
    margin-left: unset;
    margin-right: auto
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content {
        display: block
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn {
    border-radius: 8px
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:hover {
    color: #fff;
    background-color: var(--theme-color)
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:hover i {
    --Iconsax-Color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn i {
    --Iconsax-Color: var(--theme-color)
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn {
        width: 100%
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn {
    display: inline-block;
    width: auto;
    border-radius: 8px
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn:hover {
    color: #fff;
    background-color: #5465ff
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn {
        width: 100%
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content span {
    color: #fff;
    font-weight: 600
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content span {
        width: 100%;
        margin: 10px 0;
        text-align: center
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .or-text {
    text-align: center
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .location-search {
    background-color: #f5f6f7
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .location-search::placeholder {
    color: #a3aab1
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location :hover a {
    color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .location {
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: start;
    justify-content: start;
    border: none;
    color: #fff9;
    background-color: transparent;
    gap: 8px;
    font-size: 16px;
    padding: 0
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div h5 {
    color: #fff;
    font-size: 18px
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div h6 {
    color: #ffffff80;
    font-size: 16px;
    margin-top: 4px
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div img {
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div i {
    margin-top: 3px;
    --Iconsax-Color: #ffffff99
}

header .custom-navbar .location-dropdown .onhover-show-div .location:hover {
    color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .location:hover i {
    --Iconsax-Color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .location+li {
    margin-top: 16px
}

header .custom-navbar .location-dropdown .onhover-show-div.show {
    visibility: visible;
    opacity: 1;
    top: 60px;
    left: 0;
    z-index: 999
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div.show {
    left: unset;
    right: 0
}

header .custom-navbar .location-dropdown .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000bf;
    z-index: 900
}

[dir=rtl] header .custom-navbar .location-dropdown .overlay {
    left: unset;
    right: 0
}

header .custom-navbar .nav-right {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 767px) {
    header .custom-navbar .nav-right {
        gap: 6px
    }
}

header .custom-navbar .nav-right .nav-item-right {
    border: 1px solid rgba(255, 255, 255, .1);
    background-color: #ffffff1a;
    padding: calc(5px + .00125*(100vw - 320px)) calc(6px + (9 - 6) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    position: relative
}

header .custom-navbar .nav-right .nav-item-right .badge {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -5px;
    right: -5px;
    background-color: #fb4040;
    border-radius: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

header .custom-navbar .nav-right .nav-item-right.login-btn {
    border: none;
    background-color: transparent;
    padding: 0
}

@media (max-width: 767px) {
    header .custom-navbar .nav-right .nav-item-right.login-btn a span {
        display: none
    }
}

header .custom-navbar .nav-right .nav-item-right .btn.btn-outline {
    border-radius: 30px;
    padding: 8px 30px;
    border-color: var(--theme-color);
    color: var(--theme-color);
    background-color: transparent
}

@media (max-width: 991px) {
    header .custom-navbar .nav-right .nav-item-right .btn.btn-outline {
        padding: 4px 12px;
        font-size: 16px
    }
}

header .custom-navbar .nav-right .nav-item-right:last-child {
    position: relative;
    margin-left: 10px
}

[dir=rtl] header .custom-navbar .nav-right .nav-item-right:last-child {
    margin-left: unset;
    margin-right: 10px
}

header .custom-navbar .nav-right .nav-item-right:last-child:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #ffffff4d;
    left: -10px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] header .custom-navbar .nav-right .nav-item-right:last-child:before {
    left: unset;
    right: -10px
}

header .custom-navbar .nav-right .language-dropdown,
header .custom-navbar .nav-right .currency-dropdown,
header .custom-navbar .nav-right .profile-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 30px;
    height: 42px
}

header .custom-navbar .nav-right .language-dropdown img,
header .custom-navbar .nav-right .currency-dropdown img,
header .custom-navbar .nav-right .profile-dropdown img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 100%
}

header .custom-navbar .nav-right .language-dropdown .language-btn,
header .custom-navbar .nav-right .language-dropdown .currency-btn,
header .custom-navbar .nav-right .language-dropdown .profile-btn,
header .custom-navbar .nav-right .currency-dropdown .language-btn,
header .custom-navbar .nav-right .currency-dropdown .currency-btn,
header .custom-navbar .nav-right .currency-dropdown .profile-btn,
header .custom-navbar .nav-right .profile-dropdown .language-btn,
header .custom-navbar .nav-right .profile-dropdown .currency-btn,
header .custom-navbar .nav-right .profile-dropdown .profile-btn {
    background: transparent;
    color: #fff;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap
}

header .custom-navbar .nav-right .language-dropdown .language-btn span,
header .custom-navbar .nav-right .language-dropdown .language-btn a,
header .custom-navbar .nav-right .language-dropdown .currency-btn span,
header .custom-navbar .nav-right .language-dropdown .currency-btn a,
header .custom-navbar .nav-right .language-dropdown .profile-btn span,
header .custom-navbar .nav-right .language-dropdown .profile-btn a,
header .custom-navbar .nav-right .currency-dropdown .language-btn span,
header .custom-navbar .nav-right .currency-dropdown .language-btn a,
header .custom-navbar .nav-right .currency-dropdown .currency-btn span,
header .custom-navbar .nav-right .currency-dropdown .currency-btn a,
header .custom-navbar .nav-right .currency-dropdown .profile-btn span,
header .custom-navbar .nav-right .currency-dropdown .profile-btn a,
header .custom-navbar .nav-right .profile-dropdown .language-btn span,
header .custom-navbar .nav-right .profile-dropdown .language-btn a,
header .custom-navbar .nav-right .profile-dropdown .currency-btn span,
header .custom-navbar .nav-right .profile-dropdown .currency-btn a,
header .custom-navbar .nav-right .profile-dropdown .profile-btn span,
header .custom-navbar .nav-right .profile-dropdown .profile-btn a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    font-size: 16px
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div {
    min-width: 150px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .1);
    background-color: #1d2537;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -5%, 0);
    top: 45px;
    left: 0;
    padding: 15px;
    border-radius: 12px;
    width: max-content
}

[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div,
[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div,
[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div {
    left: 0;
    right: unset
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link {
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    border: none;
    color: #fff9;
    background-color: transparent;
    gap: 10px;
    font-size: 15px;
    padding: 0;
    white-space: nowrap
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang a,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency a,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile a,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link a {
    color: #fff9;
    display: flex;
    align-items: center;
    gap: 10px
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang i,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency i,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile i,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link i {
    --Iconsax-Color: #ffffff99
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang .lang-img,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency .lang-img,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile .lang-img,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link .lang-img,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang .lang-img,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency .lang-img,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile .lang-img,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link .lang-img,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang .lang-img,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency .lang-img,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile .lang-img,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link .lang-img {
    width: 24px !important;
    height: 24px !important
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover {
    color: #fff;
    transform: translate(5px)
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover a,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover a,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover a,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover a,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover a,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover a {
    color: #fff
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover i,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover i,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover i,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover i,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover i,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover i {
    --Iconsax-Color: #fff
}

[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover,
[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover,
[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover,
[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover,
[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover,
[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover,
[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover,
[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover,
[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover,
[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover,
[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover,
[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover {
    transform: translate(-5px)
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang+li,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency+li,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile+li,
header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link+li,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang+li,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency+li,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile+li,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link+li,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang+li,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency+li,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile+li,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link+li {
    margin-top: 16px
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency img,
header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency img,
header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency img {
    height: 24px !important
}

header .custom-navbar .nav-right .language-dropdown:hover .onhover-show-div,
header .custom-navbar .nav-right .currency-dropdown:hover .onhover-show-div,
header .custom-navbar .nav-right .profile-dropdown:hover .onhover-show-div {
    opacity: 1;
    visibility: visible;
    transform: none
}

header .custom-navbar .nav-right .language-dropdown .profile-btn .initial-letter,
header .custom-navbar .nav-right .currency-dropdown .profile-btn .initial-letter,
header .custom-navbar .nav-right .profile-dropdown .profile-btn .initial-letter {
    background-color: #fff;
    padding: 5px;
    color: #00162e;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500
}

@media (max-width: 576px) {

    header .custom-navbar .nav-right .language-dropdown .profile-btn .profile-text,
    header .custom-navbar .nav-right .currency-dropdown .profile-btn .profile-text,
    header .custom-navbar .nav-right .profile-dropdown .profile-btn .profile-text {
        display: none
    }
}

@media (max-width: 576px) {

    header .custom-navbar .nav-right .language-dropdown .profile-btn,
    header .custom-navbar .nav-right .currency-dropdown .profile-btn,
    header .custom-navbar .nav-right .profile-dropdown .profile-btn {
        gap: 0
    }
}

header .custom-navbar .nav-right .currency-dropdown {
    padding-left: 40px !important
}

header .custom-navbar .nav-right .currency-dropdown .currency-btn img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px
}

header .custom-navbar .nav-right .profile-dropdown img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 100%
}

header .custom-navbar .nav-right .profile-dropdown .onhover-show-div {
    top: 53px;
    width: 100%
}

header .custom-navbar .nav-right i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: White
}

header .custom-navbar .navbar-toggler {
    border: none;
    padding: 0
}

header .custom-navbar .navbar-toggler .navbar-toggler-icon {
    width: 20px;
    height: 20px
}

header .custom-navbar .navbar-toggler:focus {
    box-shadow: none
}

header .custom-navbar .navbar-collapse .navbar-nav {
    gap: calc(20px + (45 - 20) * ((100vw - 1200px) / (1920 - 1200)))
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #ffffffb3;
    padding-left: 0;
    font-weight: 400;
    padding-right: 0
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: #fff
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    font-weight: 500;
    color: var(--theme-color)
}

@media (max-width: 1199px) {
    header .custom-navbar .navbar-collapse {
        position: fixed;
        top: 0;
        background-color: #fff;
        left: -350px;
        width: calc(300px + (320 - 300) * ((100vw - 320px) / (1200 - 320)));
        height: 100%;
        transition: all .3s ease-in-out;
        visibility: visible;
        opacity: 1;
        display: block
    }

    header .custom-navbar .navbar-collapse .navbar-header {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 8px 10px #00162e0d
    }

    header .custom-navbar .navbar-collapse .navbar-header h4 {
        color: var(--theme-color);
        font-weight: 600;
        line-height: 23px
    }

    header .custom-navbar .navbar-collapse .navbar-header i {
        ---Iconsax-Size: 18px;
        --Iconsax-Color: #a3aab1
    }

    header .custom-navbar .navbar-collapse .navbar-header .btn-close {
        box-shadow: unset
    }

    header .custom-navbar .navbar-collapse .navbar-nav {
        padding: 20px;
        height: 100%;
        gap: 16px;
        overflow: auto
    }

    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
        color: #00162e;
        padding: 0
    }

    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
        color: #00162e
    }

    header .custom-navbar .navbar-collapse.show {
        transition: all .3s ease-in;
        left: 0;
        z-index: 2;
        visibility: visible;
        opacity: 1
    }
}

.newsletter-section .newsletter-content {
    position: relative;
    background-image: url(https://osoncor.tj/build/assets/newsletter-39d90c5f.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    padding-top: 1px
}

@media (max-width: 767px) {
    .newsletter-section .newsletter-content {
        background-image: none
    }
}

.newsletter-section .newsletter-content .newsletter-detail {
    color: #fff;
    padding: calc(60px + (100 - 60) * ((100vw - 992px) / (1920 - 992))) 0 calc(20px + (30 - 20) * ((100vw - 992px) / (1920 - 992)));
    padding-right: calc(40px + (100 - 40) * ((100vw - 992px) / (1920 - 992)));
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (max-width: 767px) {
    .newsletter-section .newsletter-content .newsletter-detail {
        padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
        background-image: url(https://osoncor.tj/build/assets/newsletter-39d90c5f.png);
        background-position: center;
        background-size: cover;
        background-size: unset;
        border-radius: 20px;
        background-repeat: no-repeat
    }
}

.newsletter-section .newsletter-content .newsletter-detail h2 {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5;
    font-size: calc(20px + .00625*(100vw - 320px));
    letter-spacing: .9px
}

.newsletter-section .newsletter-content .newsletter-detail p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 23px;
    color: #fff9;
    margin: 0;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.newsletter-section .newsletter-content .newsletter-detail .form-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: calc(14px + .00625*(100vw - 320px));
    margin: 0
}

@media (max-width: 575px) {
    .newsletter-section .newsletter-content .newsletter-detail .form-group {
        flex-direction: column
    }
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .form-control {
    border-radius: 6px;
    background-color: #fff;
    color: #808b97;
    padding: 14px 20px;
    border: none
}

@media (max-width: 575px) {
    .newsletter-section .newsletter-content .newsletter-detail .form-group .form-control {
        padding: 10px 13px
    }
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn {
    border-radius: 6px;
    width: max-content;
    padding: 14px 20px
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn span {
    padding: 0
}

@media (max-width: 575px) {
    .newsletter-section .newsletter-content .newsletter-detail .form-group .btn {
        padding: 10px 16px;
        font-size: 14px
    }

    .newsletter-section .newsletter-content .newsletter-detail .form-group .btn span {
        display: none
    }
}

.newsletter-section .newsletter-content .newsletter-detail span {
    padding-top: calc(10px + (60 - 10) * ((100vw - 768px) / (1920 - 768)));
    font-size: 18px
}

@media (max-width: 767px) {
    .newsletter-section .newsletter-content .newsletter-detail span {
        padding-top: 10px
    }
}

[dir=rtl] .newsletter-section .newsletter-content .newsletter-icons {
    order: 1
}

@media (max-width: 767px) {
    .newsletter-section .newsletter-content .newsletter-icons {
        display: none
    }
}

.newsletter-section .newsletter-content .newsletter-icons img {
    position: absolute;
    animation: mover 2s infinite alternate;
    animation-delay: 1s
}

.newsletter-section .newsletter-content .newsletter-icons .newsletter-1 {
    top: 140px;
    left: 70px;
    height: 90px
}

.newsletter-section .newsletter-content .newsletter-icons .newsletter-2 {
    top: 50px;
    right: 90px;
    height: 16px
}

[dir=rtl] .newsletter-section .newsletter-content .newsletter-icons .newsletter-2 {
    right: unset;
    left: 90px
}

@media (max-width: 991px) {
    .newsletter-section .newsletter-content .newsletter-icons .newsletter-2 {
        display: none
    }
}

.newsletter-section .newsletter-content .newsletter-icons .newsletter-3 {
    bottom: -30px;
    right: 330px;
    height: 90px
}

[dir=rtl] .newsletter-section .newsletter-content .newsletter-icons .newsletter-3 {
    right: unset;
    left: 330px
}

@media (max-width: 1366px) {
    .newsletter-section .newsletter-content .newsletter-icons .newsletter-3 {
        display: none
    }
}

.newsletter-section .newsletter-content .newsletter-icons .man-image {
    position: relative;
    animation: none
}

.footer-section {
    background-color: #00162e;
    padding: calc(30px + .0125*(100vw - 320px)) 0
}

.footer-section .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    padding-bottom: 12px;
    margin-bottom: calc(14px + .01*(100vw - 320px))
}

@media (max-width: 575px) {
    .footer-section .copyright {
        flex-direction: column;
        align-items: start
    }

    [dir=rtl] .footer-section .copyright {
        align-items: end
    }
}

.footer-section .copyright .footer-logo img {
    height: calc(30px + .00625*(100vw - 320px))
}

.footer-section .copyright p {
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1200 - 320)))
}

.footer-section .copyright .iconsax {
    padding-right: 5px;
    --Iconsax-Color: #fff;
    --Iconsax-Size: calc(18px + (22 - 18) * ((100vw - 320px) / (1200 - 320)))
}

.footer-section i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: var(--theme-color)
}

.footer-section .heading-footer {
    font-weight: 400;
    line-height: 26px;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(16px + .0025*(100vw - 320px))
}

@media (max-width: 575px) {
    .footer-section .heading-footer {
        margin-bottom: 6px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 6px
    }
}

.footer-section .heading-footer .down-arrow {
    margin-left: auto;
    --Iconsax-Color: #fff;
    transition: transform .15s ease-in-out
}

.footer-section ul {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

[dir=rtl] .footer-section ul {
    margin-left: unset;
    padding: 0;
    margin: 0
}

@media (max-width: 575px) {
    .footer-section ul {
        gap: 6px
    }
}

.footer-section ul li {
    color: #ffffffb3;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.footer-section ul li .nav-link {
    color: #ffffffb3;
    padding: 0;
    position: relative;
    transition: all .25s ease-in-out
}

.footer-section ul li .nav-link:hover {
    color: #fff;
    padding-left: 14px;
    font-weight: 500
}

[dir=rtl] .footer-section ul li .nav-link:hover {
    padding-left: unset;
    padding-right: 14px
}

.footer-section ul li .nav-link:hover:before {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    left: 0
}

[dir=rtl] .footer-section ul li .nav-link:hover:before {
    left: unset;
    right: 0
}

@media (max-width: 575px) {
    .footer-section ul li .nav-link:hover {
        padding-left: unset
    }

    [dir=rtl] .footer-section ul li .nav-link:hover {
        padding-left: 14px;
        padding-right: unset
    }

    .footer-section ul li .nav-link:hover:before {
        left: -23px
    }

    [dir=rtl] .footer-section ul li .nav-link:hover:before {
        left: unset;
        right: -23px
    }
}

.footer-section ul li .nav-link:before {
    transition: all .25s ease-in-out;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    left: 13px;
    width: 3px;
    height: 3px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden
}

[dir=rtl] .footer-section ul li .nav-link:before {
    left: unset;
    right: 13px
}

@media (max-width: 575px) {
    .footer-section ul li .nav-link:before {
        opacity: 1;
        visibility: visible;
        left: -23px;
        transform: translateY(-50%) scale(1);
        background-color: #ffffff26;
        height: 2px;
        width: 12px
    }

    [dir=rtl] .footer-section ul li .nav-link:before {
        left: unset;
        right: -23px
    }
}

.footer-section .btn {
    border-radius: 13px;
    width: max-content;
    padding: 10px calc(40px + .00625*(100vw - 320px));
    margin-top: 40px;
    margin-left: 30px;
    font-size: calc(16px + .00125*(100vw - 320px))
}

[dir=rtl] .footer-section .btn {
    margin-left: unset;
    margin-right: 30px
}

@media (max-width: 575px) {
    .footer-section.nav-folderized .nav.open .down-arrow {
        transform: scale(-1)
    }

    .footer-section.nav-folderized .nav.open ul {
        display: flex
    }

    .footer-section.nav-folderized .nav ul {
        display: none
    }
}

.autocomplete-results {
    margin-top: 8px;
    border-radius: 6px !important;
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 999;
    padding: 14px
}

.autocomplete-results::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ddd
}

.autocomplete-results::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #e5e8ea66
}

.autocomplete-results .autocomplete-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color .2s ease-in-out
}

.autocomplete-results .autocomplete-item:hover img {
    box-shadow: 3px 3px 9px #22222261
}

.autocomplete-results .autocomplete-item:hover h5 {
    color: var(--theme-color);
    margin-left: 10px
}

[dir=rtl] .autocomplete-results .autocomplete-item:hover h5 {
    margin-left: unset;
    margin-right: 10px
}

.autocomplete-results .autocomplete-item+.autocomplete-item {
    border-top: 1px solid rgba(221, 221, 221, .52);
    padding-top: 10px;
    margin-top: 10px
}

.autocomplete-results .autocomplete-item img {
    object-fit: cover;
    margin-right: 10px;
    width: 94px;
    height: 60px;
    border-radius: 5px;
    transition: all .15s ease-in-out
}

[dir=rtl] .autocomplete-results .autocomplete-item img {
    margin-right: unset;
    margin-left: 10px
}

.autocomplete-results .autocomplete-item h5 {
    font-size: 16px;
    font-weight: 500;
    transition: all .15s ease-in-out
}

.slick-list .slick-track {
    margin-inline: -15px
}

@media (max-width: 767px) {
    .slick-list .slick-track {
        margin-inline: -5px
    }
}

.slick-list .slick-track .slick-slide {
    padding-inline: 15px
}

@media (max-width: 767px) {
    .slick-list .slick-track .slick-slide {
        padding-inline: 5px
    }
}

.service-list-section {
    position: relative
}

.service-list-section .slick-prev {
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    width: 28px;
    height: 20px;
    top: -75px;
    position: absolute;
    opacity: 1;
    content: none;
    border: none;
    padding: 0;
    color: transparent;
    background-color: transparent
}

.service-list-section .slick-prev.slick-arrow {
    background-image: url(https://osoncor.tj/build/assets/preview-9bdd1cc8.svg);
    right: 30px;
    left: auto
}

[dir=rtl] .service-list-section .slick-prev.slick-arrow {
    right: auto;
    left: 0
}

.service-list-section .slick-prev.slick-arrow.swiper-button-disabled {
    background-image: url(https://osoncor.tj/build/assets/preview-disable-27248d40.svg) !important
}

.service-list-section .slick-next {
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    width: 28px;
    height: 20px;
    top: -75px;
    position: absolute;
    opacity: 1;
    content: none;
    border: none;
    padding: 0;
    color: transparent;
    background-color: transparent
}

.service-list-section .slick-next.slick-arrow {
    background-image: url(https://osoncor.tj/build/assets/next-81635834.svg) !important;
    right: 0;
    left: auto
}

[dir=rtl] .service-list-section .slick-next.slick-arrow {
    right: auto;
    left: 30px
}

.service-list-section .slick-next.slick-arrow.swiper-button-disabled {
    background-image: url(https://osoncor.tj/build/assets/next-disable-20a25723.svg) !important
}

.about-us-section,
.about-us-section-1 {
    position: relative
}

.about-us-section .about-us-content,
.about-us-section-1 .about-us-content {
    margin-right: .3px
}

[dir=rtl] .about-us-section .about-us-content,
[dir=rtl] .about-us-section-1 .about-us-content {
    margin-left: .3px;
    margin-right: unset
}

.about-us-section .about-us-content .card .card-body,
.about-us-section-1 .about-us-content .card .card-body {
    padding: 35px 30px
}

.about-us-section .about-us-content .card .card-body .card-title,
.about-us-section-1 .about-us-content .card .card-body .card-title {
    display: flex;
    align-items: center;
    gap: 10px
}

.about-us-section .about-us-content .card .card-body .card-title img,
.about-us-section-1 .about-us-content .card .card-body .card-title img {
    width: 70px;
    height: 70px;
    border-radius: 100%
}

.about-us-section .about-us-content .card .card-body .card-title img.star,
.about-us-section-1 .about-us-content .card .card-body .card-title img.star {
    width: 12px;
    height: 12px
}

.about-us-section .about-us-content .card .card-body .card-title img.quote,
.about-us-section .about-us-content .card .card-body .card-title img.quote-active,
.about-us-section-1 .about-us-content .card .card-body .card-title img.quote,
.about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
    position: absolute;
    top: calc(20px + (30 - 20) * ((100vw - 1200px) / (1920 - 1200)));
    right: calc(20px + (30 - 20) * ((100vw - 1200px) / (1920 - 1200)));
    width: calc(30px + (50 - 30) * ((100vw - 1200px) / (1920 - 1200)));
    height: calc(30px + (50 - 30) * ((100vw - 1200px) / (1920 - 1200)));
    border-radius: 0
}

[dir=rtl] .about-us-section .about-us-content .card .card-body .card-title img.quote,
[dir=rtl] .about-us-section .about-us-content .card .card-body .card-title img.quote-active,
[dir=rtl] .about-us-section-1 .about-us-content .card .card-body .card-title img.quote,
[dir=rtl] .about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
    left: calc(20px + (30 - 20) * ((100vw - 1200px) / (1920 - 1200)));
    right: unset
}

@media (max-width: 1199px) {

    .about-us-section .about-us-content .card .card-body .card-title img.quote,
    .about-us-section .about-us-content .card .card-body .card-title img.quote-active,
    .about-us-section-1 .about-us-content .card .card-body .card-title img.quote,
    .about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
        width: calc(30px + (50 - 30) * ((100vw - 575px) / (1920 - 575)));
        height: calc(30px + (50 - 30) * ((100vw - 575px) / (1920 - 575)))
    }
}

.about-us-section .about-us-content .card .card-body .card-title img.quote-active,
.about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
    display: none
}

.about-us-section .about-us-content .card .card-body .card-title img.quote,
.about-us-section-1 .about-us-content .card .card-body .card-title img.quote {
    display: block
}

.about-us-section .about-us-content .card .card-body .card-detail,
.about-us-section-1 .about-us-content .card .card-body .card-detail {
    padding: 24px 0 0;
    margin-top: 20px;
    border-top: 1px dashed rgba(0, 22, 46, .1)
}

.about-us-section .about-us-content .card .card-body .card-detail p,
.about-us-section-1 .about-us-content .card .card-body .card-detail p {
    margin: 0;
    color: #808b97;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: all .6s ease
}

.about-us-section .about-us-content .swiper-wrapper,
.about-us-section-1 .about-us-content .swiper-wrapper {
    height: 310px
}

.about-us-section .about-us-content .swiper-wrapper:has(.no-data-found),
.about-us-section-1 .about-us-content .swiper-wrapper:has(.no-data-found) {
    height: unset
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide,
.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide {
    transition: all .2s linear;
    transform: translateY(50px)
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active,
.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active {
    transform: translateY(0)
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card,
.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card {
    border-color: #5465ff4d;
    background-color: #5465ff1a
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote-active,
.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote-active {
    display: block
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote,
.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote {
    display: none
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-detail p,
.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-detail p {
    color: #00162e99
}

.about-us-section .about-us-content .image-1,
.about-us-section-1 .about-us-content .image-1 {
    top: 140px;
    left: 20px;
    height: 16px;
    position: absolute;
    animation: mover 2s infinite alternate;
    animation-delay: 1s
}

[dir=rtl] .about-us-section .about-us-content .image-1,
[dir=rtl] .about-us-section-1 .about-us-content .image-1 {
    left: unset;
    right: 20px
}

@media (max-width: 991px) {

    .about-us-section .about-us-content .image-1,
    .about-us-section-1 .about-us-content .image-1 {
        display: none
    }
}

.about-us-section .about-us-content .swiper-pagination,
.about-us-section-1 .about-us-content .swiper-pagination {
    left: 0;
    width: 70px;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.about-us-section .about-us-content .swiper-pagination .swiper-pagination-bullet,
.about-us-section-1 .about-us-content .swiper-pagination .swiper-pagination-bullet {
    height: 8px;
    width: 8px;
    min-width: 8px;
    background-color: var(--theme-color);
    margin: 0
}

.about-us-section .about-us-content .swiper-button-next3,
.about-us-section-1 .about-us-content .swiper-button-next3 {
    bottom: 0;
    top: unset;
    right: 43%;
    z-index: 1;
    left: unset
}

.about-us-section .about-us-content .swiper-button-prev3,
.about-us-section-1 .about-us-content .swiper-button-prev3 {
    bottom: 0;
    right: unset;
    top: unset;
    left: 43%;
    z-index: 1
}

.more-section .more-content h3,
.feature-section .more-content h3 {
    font-size: calc(20px + .00125*(100vw - 320px));
    font-weight: 600;
    margin-bottom: 4px
}

.more-section .more-content p,
.feature-section .more-content p {
    font-size: calc(16px + .00125*(100vw - 320px));
    color: #808b97;
    font-weight: 500
}

.more-section .more-content p a,
.feature-section .more-content p a {
    color: var(--theme-color)
}

.more-section .feature-content .feature-box,
.feature-section .feature-content .feature-box {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    background-color: var(--theme-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto auto 12px
}

.more-section .feature-content .feature-box i,
.feature-section .feature-content .feature-box i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #fff
}

.more-section .feature-content p,
.feature-section .feature-content p {
    font-size: calc(16px + .00125*(100vw - 320px));
    margin: 4px auto auto;
    width: 90%;
    font-weight: 500;
    color: #00162e99
}

.more-section .feature-content .feature-list,
.feature-section .feature-content .feature-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(8px + .005*(100vw - 320px));
    margin-top: 16px
}

.more-section .feature-content .feature-list .list-item,
.feature-section .feature-content .feature-list .list-item {
    padding: 8px calc(8px + .0025*(100vw - 320px));
    border-radius: 6px;
    border: 1px solid rgba(0, 22, 46, .1);
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00162ecc
}

.more-section .feature-content .feature-list .list-item i,
.feature-section .feature-content .feature-list .list-item i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #5465FF
}

.about-us .image-grp {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: calc(10px + .00625*(100vw - 320px))
}

.about-us .image-grp img {
    height: auto;
    width: calc(140px + .1*(100vw - 320px));
    border-radius: 12px
}

.about-us .image-grp img:nth-child(2n) {
    margin-top: 80px
}

.about-us .content-detail {
    color: #00162ecc
}

.about-us .content-detail p {
    font-size: calc(14px + .0025*(100vw - 320px));
    line-height: 1.5;
    margin-bottom: 20px
}

.about-us .content-detail .item-lists {
    list-style: none;
    margin: 0;
    gap: calc(12px + .005*(100vw - 320px))
}

.about-us .content-detail .item-lists li {
    display: flex;
    align-items: start;
    gap: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)))
}

.about-us .content-detail .item-lists li:before {
    display: none
}

.about-us .content-detail .item-lists li .icon-box i {
    --Iconsax-Size: calc(16px + .005*(100vw - 320px));
    --Iconsax-Color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    height: calc(30px + .01875*(100vw - 320px));
    width: calc(30px + .01875*(100vw - 320px));
    min-width: calc(30px + (35 - 30) * ((100vw - 320px) / (1920 - 320)));
    background-color: #5465ffcc
}

.about-us .content-detail .item-lists li .detail h4 {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 4px;
    color: #00162e
}

.about-us .content-detail .item-lists li .detail p {
    line-height: 1.5;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin-bottom: 0;
    color: #808b97
}

.about-us-section-1 .title-1 {
    width: 100%
}

.about-us-section-1 .about-us-content .card {
    box-shadow: 0 0 8px #00162e26;
    border-radius: 4px
}

.about-us-section-1 .about-us-content .card .card-body {
    padding: 20px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    margin: 0;
    border: none;
    padding: 0;
    align-items: center
}

.about-us-section-1 .about-us-content .card .card-body .card-detail i {
    --Iconsax-Size: calc(20px + .0025*(100vw - 320px));
    --Iconsax-Color: #5465FF
}

.about-us-section-1 .about-us-content .card .card-body .card-detail .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%
}

.about-us-section-1 .about-us-content .card .card-body .card-detail .hr {
    background-color: #e5e8ea;
    height: 2px;
    width: 25px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail h3 {
    font-size: 16px;
    color: #808b97
}

.about-us-section-1 .about-us-content .card .card-body .card-detail .rate {
    justify-content: center;
    margin-top: 8px;
    gap: 8px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail p {
    color: #00162ecc;
    overflow: unset;
    display: block;
    font-size: 17px
}

.about-us-section-1 .about-us-content .swiper {
    padding: 0 4px
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper {
    height: auto;
    padding: 5px 0
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper .swiper-slide {
    transform: unset;
    transition: none
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    transform: none
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .card {
    border: none;
    background-color: unset
}

.our-work .our-work-content .work-box {
    padding: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320))) calc(10px + .00625*(100vw - 320px));
    border-radius: 6px;
    background-color: #f5f6f7;
    text-align: center
}

.our-work .our-work-content .work-box h3 {
    font-size: calc(20px + .005*(100vw - 320px));
    font-weight: 600;
    line-height: 1.2;
    color: var(--theme-color)
}

.our-work .our-work-content .work-box p {
    font-size: calc(14px + .00125*(100vw - 320px));
    text-align: center;
    display: inline-block;
    font-weight: 600;
    color: #00162e99
}

.log-in-section {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    height: 100vh
}

.log-in-section .login-content {
    height: 100%
}

.image-contain {
    background-color: var(--theme-color);
    padding: 50px;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.image-contain .logo {
    height: 50px;
    margin: 0 auto 30px;
    display: flex
}

.image-contain .auth-image {
    width: 40%
}

.image-contain .auth-content {
    color: #fff;
    margin-top: 50px
}

.image-contain .auth-content h2 {
    text-transform: uppercase;
    line-height: 41px;
    font-weight: 700
}

.image-contain .auth-content p {
    font-size: 16px;
    line-height: 20px
}

.image-contain .auth-content .app-install {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.image-contain .auth-content .app-install img {
    height: 50px
}

.login-main {
    background-color: #f5f6f7;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-main .language-dropdown {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 30px;
    border: 1px solid rgba(0, 22, 46, .1);
    background-color: #fff;
    margin-bottom: 30px;
    width: max-content;
    margin-left: auto
}

[dir=rtl] .login-main .language-dropdown {
    right: unset;
    left: 40px
}

.login-main .language-dropdown img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 100%
}

.login-main .language-dropdown i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #00162E
}

.login-main .language-dropdown .language-btn {
    background: transparent;
    color: #00162e;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px
}

.login-main .language-dropdown .language-btn span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 16px
}

.login-main .language-dropdown .language-btn span a {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00162e
}

.login-main .language-dropdown .onhover-show-div {
    min-width: 120px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(0, 22, 46, .1);
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -5%, 0);
    top: 37px;
    right: 0;
    padding: 15px;
    border-radius: 4px
}

[dir=rtl] .login-main .language-dropdown .onhover-show-div {
    left: 0;
    right: unset
}

.login-main .language-dropdown .onhover-show-div .lang {
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    border: none;
    color: #00162e;
    background-color: transparent;
    gap: 8px;
    font-size: 13px;
    padding: 0
}

.login-main .language-dropdown .onhover-show-div .lang:hover {
    color: var(--theme-color);
    transform: translate(5px)
}

[dir=rtl] .login-main .language-dropdown .onhover-show-div .lang:hover {
    transform: translate(-5px)
}

.login-main .language-dropdown .onhover-show-div .lang+li {
    margin-top: 8px
}

.login-main .language-dropdown .onhover-show-div a {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00162e
}

.login-main .language-dropdown:hover .onhover-show-div {
    opacity: 1;
    visibility: visible;
    transform: none
}

@media (max-width: 425px) {
    .login-main .language-dropdown {
        right: 20px
    }

    [dir=rtl] .login-main .language-dropdown {
        left: 20px;
        right: unset
    }
}

.login-main .login-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    width: 530px;
    border-radius: 15px;
    margin: 20px auto;
    padding-bottom: 40px
}

.login-main .login-card .login-title {
    width: 100%;
    border-bottom: 1px dashed #E5E8EA;
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    text-align: center
}

.login-main .login-card .login-title h2 {
    font-weight: 700;
    line-height: 33px
}

.login-main .login-card .login-title p {
    color: #808b97;
    padding-top: 6px;
    font-size: 16px;
    margin: 0
}

.login-main .login-card .login-detail {
    background-color: #f5f6f7;
    border-radius: 10px;
    width: calc(100% - 80px);
    margin: 30px 0;
    padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .login-detail .form-group {
    position: relative;
    margin-bottom: calc(12px + .0075*(100vw - 320px))
}

.login-main .login-card .login-detail .form-group i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97;
    position: absolute;
    top: calc(42px + (45 - 42) * ((100vw - 320px) / (1920 - 320)));
    left: 15px
}

[dir=rtl] .login-main .login-card .login-detail .form-group i {
    left: unset;
    right: 15px
}

.login-main .login-card .login-detail .form-group .toggle-password {
    position: absolute;
    top: 0;
    right: 45px;
    left: unset;
    cursor: pointer
}

[dir=rtl] .login-main .login-card .login-detail .form-group .toggle-password {
    left: 45px;
    right: unset
}

.login-main .login-card .login-detail .form-group .toggle-password i {
    position: absolute
}

.login-main .login-card .login-detail .form-group .toggle-password .eye-slash {
    display: none
}

.login-main .login-card .login-detail .form-group .toggle-password.eye i.eye {
    display: block
}

.login-main .login-card .login-detail .form-group .toggle-password.eye i.eye-slash {
    display: none
}

.login-main .login-card .login-detail .form-group .toggle-password.eye-slash i.eye-slash {
    display: block
}

.login-main .login-card .login-detail .form-group .toggle-password.eye-slash i.eye {
    display: none
}

.login-main .login-card .login-detail .form-group label {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 8px;
    position: relative
}

[dir=rtl] .login-main .login-card .login-detail .form-group label {
    text-align: right
}

.login-main .login-card .login-detail .form-group label.error {
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: 400;
    font-size: 13px;
    opacity: .8;
    color: #ff4b4b !important
}

.login-main .login-card .login-detail .form-group label.error:before {
    display: none
}

.login-main .login-card .login-detail .form-group label:before {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: 30px;
    width: 4px;
    top: -3px;
    left: -30px;
    border-radius: 4px
}

[dir=rtl] .login-main .login-card .login-detail .form-group label:before {
    left: unset;
    right: -30px
}

@media (max-width: 1199px) {
    .login-main .login-card .login-detail .form-group label:before {
        left: -20px
    }

    [dir=rtl] .login-main .login-card .login-detail .form-group label:before {
        left: unset;
        right: -20px
    }
}

.login-main .login-card .login-detail .form-group .form-control {
    border-radius: 8px;
    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) 45px;
    background-color: #fff;
    color: #00162ecc !important;
    border: none
}

[dir=rtl] .login-main .login-card .login-detail .form-group .form-control {
    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) 45px calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .login-detail .form-group .form-control:focus {
    box-shadow: none
}

.login-main .login-card .login-detail .forgot-pass {
    margin-top: 12px;
    text-align: end
}

[dir=rtl] .login-main .login-card .login-detail .forgot-pass {
    text-align: start
}

.login-main .login-card .login-detail .forgot-pass a {
    font-size: 16px;
    line-height: 20px
}

.login-main .login-card .login-detail .btn {
    margin-top: 40px;
    border-radius: 8px;
    width: 100%;
    justify-content: center;
    font-size: 18px
}

.login-main .login-card .login-detail .btn:focus {
    box-shadow: none
}

.login-main .login-card .login-detail .not-member {
    text-align: center;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 400;
    color: #808b97;
    line-height: 20px;
    padding-top: 10px
}

.login-main .login-card .login-detail .not-member small {
    color: var(--theme-color);
    font-weight: 500
}

.login-main .login-card .login-detail .phone-details .form-group {
    position: relative
}

.login-main .login-card .login-detail .phone-details .form-group label.error {
    position: absolute !important;
    bottom: -30px;
    left: 0
}

.login-main .login-card .other-options {
    width: 100%;
    padding: calc(20px + .00625*(100vw - 320px)) 0 0
}

.login-main .login-card .options {
    position: relative;
    text-align: center;
    width: max-content;
    margin: 0 auto;
    color: #808b97;
    font-size: 18px;
    display: flex
}

.login-main .login-card .options:before,
.login-main .login-card .options:after {
    content: "";
    position: absolute;
    background-color: #808b97;
    width: 22px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%)
}

.login-main .login-card .options:before {
    left: -30px
}

[dir=rtl] .login-main .login-card .options:before {
    left: unset;
    right: -30px
}

.login-main .login-card .options:after {
    right: -30px
}

[dir=rtl] .login-main .login-card .options:after {
    right: unset;
    left: -30px
}

.login-main .login-card .social-media {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .social-media .social-icon {
    background-color: #f5f6f7;
    border-radius: 100%;
    border: 1px solid rgba(0, 22, 46, .1);
    height: calc(50px + .0125*(100vw - 320px));
    width: calc(50px + .0125*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.login-main .login-card .social-media .social-icon img {
    width: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
    height: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 575px) {
    .login-main .login-card {
        width: 100%
    }
}

.terms p {
    font-size: calc(14px + .00125*(100vw - 320px));
    margin: 0;
    color: #808b97
}

.terms {
    position: relative;
    padding-bottom: 25px
}

.terms label {
    position: absolute;
    bottom: 0
}

.terms label.error {
    color: #ff4b4b !important
}

.login-img {
    width: 250px;
    padding-top: 30px
}

.otp-field {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative
}

.otp-field input {
    position: relative;
    width: 50px;
    height: 50px;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    text-align: center
}

.otp-field label.error {
    position: absolute !important;
    bottom: -30px !important;
    left: 0
}

.service-list-section .row [class*=col-]:has(.no-cart-found):first-child {
    width: 100%
}

.blog-section .detail-content {
    margin-top: calc(14px + .00625*(100vw - 320px))
}

.blog-section .detail-content .title {
    padding: 0;
    margin-bottom: 5px
}

.blog-section .detail-content .title h4 {
    font-size: calc(22px + .005*(100vw - 320px));
    font-weight: 700;
    line-height: 1.3;
    color: #00162e;
    white-space: wrap
}

.blog-section .detail-content .detail-sec {
    margin-top: calc(10px + .00625*(100vw - 320px))
}

.blog-section .blog-content:last-child {
    margin-bottom: 0
}

.blog-section .blog-content .blog-main {
    background-color: #f5f6f7;
    border-radius: 15px
}

.blog-section .blog-content .blog-main+.blog-main:nth-child(3n+4) {
    border-left: none
}

[dir=rtl] .blog-section .blog-content .blog-main+.blog-main:nth-child(3n+4) {
    border-right: none;
    border-left: unset
}

@media (max-width: 1199px) {
    .blog-section .blog-content .blog-main+.blog-main {
        border: none
    }
}

@media (max-width: 1199px) {
    .blog-section .blog-content .blog-main {
        border: none
    }

    .blog-section .blog-content .blog-main:nth-child(2n) {
        border-left: 1px solid #E5E8EA !important
    }

    [dir=rtl] .blog-section .blog-content .blog-main:nth-child(2n) {
        border-right: 1px solid #E5E8EA !important;
        border-left: unset !important
    }
}

@media (max-width: 767px) {
    .blog-section .blog-content .blog-main {
        border: none !important
    }

    .blog-section .blog-content .blog-main:nth-child(2n) {
        border: none !important
    }
}

.blog-section .blog-content .card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0
}

.blog-section .blog-content .card .card-img {
    transition: .5s ease
}

.blog-section .blog-content .card .card-body {
    padding: calc(10px + .005*(100vw - 320px)) calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #808b97
}

.blog-section .blog-content .card .card-body h4 {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    color: #00162e;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.blog-section .blog-content .card .card-body h4 a {
    color: #00162e
}

.blog-section .blog-content .card .card-body h4:hover a {
    color: var(--theme-color)
}

.blog-section .blog-content .card .card-body i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97
}

.blog-section .blog-content .card .card-body .blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: calc(10px + .00625*(100vw - 320px));
    font-size: 16px;
    padding-top: calc(10px + .00125*(100vw - 320px));
    border-top: 1px solid #E5E8EA
}

.blog-section .blog-content:has(.no-data-found) {
    padding: 0;
    background-color: transparent
}

.blog-section .blog-detail {
    line-height: 1;
    color: #808b97;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 400;
    row-gap: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    margin-top: 5px;
    padding: 0
}

.blog-section .blog-detail li {
    font-size: calc(14px + .00125*(100vw - 320px));
    position: relative;
    font-weight: 400;
    line-height: 1.2
}

.blog-section .blog-detail li+li {
    padding-left: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    margin-left: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .blog-section .blog-detail li+li {
    padding-left: unset;
    padding-right: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    margin-left: unset;
    margin-right: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)))
}

.blog-section .blog-detail li+li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: calc(100% + calc(1px + (4 - 1) * ((100vw - 320px) / (1920 - 320))));
    border-left: 1px solid #E5E8EA
}

[dir=rtl] .blog-section .blog-detail li+li:before {
    left: unset;
    right: 0;
    border-right: 1px solid #E5E8EA;
    border-left: none
}

h4 {
    font-size: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 28px;
    color: #00162e;
    white-space: wrap
}

.detail-sec {
    border-radius: 10px;
    background-color: transparent !important
}

.detail-sec .details-title {
    margin-bottom: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
    padding-bottom: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
    border-bottom: 1px dashed #E5E8EA
}

.detail-sec .details-title h3 {
    font-size: calc(20px + .00125*(100vw - 320px));
    font-weight: 600
}

.detail-sec .details-title p {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin: 5px 0 0;
    line-height: 1.4
}

.detail-sec .overview-list {
    padding: 0;
    font-size: 16px;
    gap: 0
}

.detail-sec .overview-list+.overview-list {
    margin-top: 10px
}

.detail-sec .overview-list h3 {
    font-size: 18px;
    font-weight: 600;
    color: #00162e
}

.detail-sec .overview-list h3~p {
    margin-top: 5px
}

.detail-sec .overview-list p {
    line-height: 1.5;
    margin: 0 0 23px;
    position: relative;
    padding-left: 21px
}

.detail-sec .overview-list p~p {
    margin-bottom: 10px
}

.detail-sec .overview-list p:last-child {
    margin: 0
}

.detail-sec .overview-list p:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #808b97
}

[dir=rtl] .detail-sec .overview-list p:before {
    left: unset;
    right: 4px
}

.custom-row-col:has(.no-data-found) {
    width: 100%;
    margin-inline: 0
}

.custom-row-col:has(.no-data-found)>.col-12 {
    width: 100%;
    padding-inline: 0
}

.privacy-content:has(.no-data-found),
.terms-content:has(.no-data-found) {
    width: 100%;
    margin-inline: 0
}

.privacy-content:has(.no-data-found)>.col-xxl-8.col-xl-9.col-lg-10,
.terms-content:has(.no-data-found)>.col-xxl-8.col-xl-9.col-lg-10 {
    width: 100%;
    margin-inline: 0
}

.category-img {
    border-radius: calc(6px + .0025*(100vw - 320px));
    position: relative;
    overflow: hidden
}

.category-img:hover:after {
    animation: shine 1.15s
}

.category-span {
    text-align: center;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    margin-top: calc(8px + .005*(100vw - 320px));
    font-size: calc(14px + .00375*(100vw - 320px));
    font-weight: 500;
    color: #00162e
}

.accordion .accordion-item {
    border: none
}

.accordion .accordion-item .accordion-button {
    background-color: transparent;
    width: max-content;
    padding: 0;
    border: none;
    box-shadow: none
}

.accordion .accordion-item .accordion-button:not(.collapsed):after {
    background-image: url(https://osoncor.tj/build/assets/arrow-90473a1a.svg)
}

.accordion.categories-accordion .accordion-item .accordion-header .title {
    width: 100%;
    cursor: pointer
}

.contact-section .heading-p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.5;
    margin: 20px 0 calc(20px + .00625*(100vw - 320px));
    color: #00162e80
}

.contact-section .contact-content .contact-us-form {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E5E8EA;
    background-color: #fff
}

.contact-section .contact-content .contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.contact-section .contact-content .contact-info li {
    border-radius: 6px;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: start;
    gap: 8px;
    color: #808b97;
    width: auto
}

.contact-section .contact-content .contact-info li i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #00162E
}

.contact-section .contact-content .contact-info li .detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0
}

.contact-section .contact-content .contact-info li .detail h5 {
    color: #00162e;
    font-weight: 500
}

.contact-section .contact-content .contact-info li .detail p {
    color: #00162e80;
    line-height: 1.5;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.contact-section .contact-content .send-btn {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    padding: 10px calc(12px + .0025*(100vw - 320px));
    letter-spacing: 1px;
    line-height: 1.5;
    gap: 4px;
    white-space: nowrap;
    width: 100%;
    border-radius: calc(7px + (12 - 7) * ((100vw - 320px) / (1920 - 320)))
}

.map-section .map {
    width: 100%;
    height: calc(200px + .125*(100vw - 320px))
}

.map-section .map iframe {
    width: 100%;
    height: 100%
}

.list-items {
    padding-left: 1.25rem;
    list-style-type: circle
}

.list-items .list-item {
    margin-bottom: 20px;
    display: list-item
}

.list-items .list-item h6 {
    font-size: 18px;
    margin-bottom: .75rem;
    font-weight: 500;
    line-height: 1.5;
    color: #00162e
}

.list-items .list-item p {
    font-size: 17px !important;
    color: #00162eb3;
    line-height: 1.3 !important;
    margin-bottom: 16px
}

.list-items li {
    margin-bottom: 12px
}

.expert-section {
    position: relative;
    background-image: url(https://osoncor.tj/build/assets/bg-3bee563f.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0
}

.expert-content .dark-card .card-title a {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.expert-content .dark-card .card-title a:hover {
    color: var(--theme-color)
}

.expert-content .dark-card,
.expert-content .gray-card {
    overflow: visible;
    margin-top: 60px
}

.expert-content .dark-card .dark-card-img,
.expert-content .dark-card .gray-card-img,
.expert-content .gray-card .dark-card-img,
.expert-content .gray-card .gray-card-img {
    margin-bottom: 15px;
    text-align: center
}

.expert-content .dark-card .dark-card-img .profile-pic,
.expert-content .dark-card .gray-card-img .profile-pic,
.expert-content .gray-card .dark-card-img .profile-pic,
.expert-content .gray-card .gray-card-img .profile-pic {
    margin-top: -60px;
    border-radius: 100%;
    width: 130px;
    height: 130px;
    object-fit: cover;
    border: 7px solid rgba(255, 255, 255, .06)
}

@media (max-width: 575px) {

    .expert-content .dark-card .dark-card-img .profile-pic,
    .expert-content .dark-card .gray-card-img .profile-pic,
    .expert-content .gray-card .dark-card-img .profile-pic,
    .expert-content .gray-card .gray-card-img .profile-pic {
        width: 110px;
        height: 110px
    }
}

.expert-content .dark-card .dark-card-img .profile-pic.like,
.expert-content .dark-card .gray-card-img .profile-pic.like,
.expert-content .gray-card .dark-card-img .profile-pic.like,
.expert-content .gray-card .gray-card-img .profile-pic.like {
    margin: 0;
    border: none;
    border-radius: 0
}

.expert-content .dark-card .dark-card-img .favourite,
.expert-content .dark-card .gray-card-img .favourite,
.expert-content .gray-card .dark-card-img .favourite,
.expert-content .gray-card .gray-card-img .favourite {
    top: 20px;
    right: 20px;
    left: unset
}

[dir=rtl] .expert-content .dark-card .dark-card-img .favourite,
[dir=rtl] .expert-content .dark-card .gray-card-img .favourite,
[dir=rtl] .expert-content .gray-card .dark-card-img .favourite,
[dir=rtl] .expert-content .gray-card .gray-card-img .favourite {
    left: 20px;
    right: unset
}

.expert-content .dark-card .card-body,
.expert-content .gray-card .card-body {
    padding: 0 15px
}

.expert-content .dark-card .card-body .card-title,
.expert-content .gray-card .card-body .card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff
}

.expert-content .dark-card .card-body .card-title h4,
.expert-content .gray-card .card-body .card-title h4 {
    font-size: 20px;
    font-weight: 500
}

.expert-content .dark-card .card-body .card-title small,
.expert-content .gray-card .card-body .card-title small {
    font-size: 14px
}

.expert-content .dark-card .card-body .card-detail,
.expert-content .gray-card .card-body .card-detail {
    padding: 15px 0;
    margin-top: 15px;
    border-top: 2px dashed rgba(255, 255, 255, .1)
}

.expert-content .dark-card .card-body .card-detail p,
.expert-content .gray-card .card-body .card-detail p {
    font-size: 16px;
    line-height: 24px;
    width: 86%;
    margin: 0 auto;
    text-align: center
}

.expert-content .gray-card .card-body {
    color: #808b97
}

.expert-content .gray-card .card-body .card-title {
    color: #00162e
}

.expert-content .gray-card .card-body .card-title a {
    color: #00162e;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.expert-content .gray-card .card-body .card-title a:hover {
    color: var(--theme-color)
}

.expert-content .gray-card .card-body .card-detail {
    border-top: 2px dashed #E5E8EA
}

.expert-content {
    height: 100%
}

.expert-content .gray-card:hover {
    background-color: #e5e8ea91
}

.reviews-main {
    background-color: #f5f6f7;
    border-radius: 10px;
    padding: 20px
}

.reviews-main h6 {
    font-weight: 500;
    line-height: 1.5
}

.reviews-main .overview-list li {
    color: #808b97;
    font-size: 14px
}

.location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.location i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808b97
}

.location h5 {
    line-height: 20px;
    color: #808b97
}

.filter .card {
    background-color: #f5f6f7
}

.filter .card .card-header {
    padding: 18px 20px;
    background-color: transparent;
    border-bottom: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.filter .card .card-header h3 {
    font-weight: 700
}

.filter .card .card-header a {
    cursor: pointer
}

.filter .card .card-body {
    overflow: auto
}

.filter .card .card-body .form-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.filter .provider-card {
    background-color: #f5f6f7;
    border-radius: 10px
}

.filter .provider-card .like-icon {
    top: 30px;
    right: 30px;
    left: unset
}

[dir=rtl] .filter .provider-card .like-icon {
    left: 30px;
    right: unset
}

.filter .provider-card .provider-detail .provider-content {
    border: none
}

.filter .provider-card .provider-detail .provider-content .profile-bg {
    background-color: #e5e8ea
}

.filter .provider-card .provider-detail .provider-content .profile .img {
    border-radius: 6px;
    width: 110px;
    height: 110px
}

.filter .provider-card .provider-detail .provider-content .profile .initial-letter {
    height: 120px;
    width: 120px;
    background-color: #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 500;
    line-height: 1
}

.filter .provider-card .provider-detail .provider-content i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #808b97
}

.filter .provider-card .provider-detail .provider-content .delivered {
    background-color: #fff;
    padding: 13px 16px;
    border-radius: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 10px
}

.filter .provider-card .provider-detail .provider-content .delivered span {
    font-size: 16px
}

.filter .provider-card .provider-detail .provider-content .delivered small {
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-color)
}

.filter .provider-card .provider-detail .provider-content .profile-detail p {
    color: #00162e;
    text-align: left
}

[dir=rtl] .filter .provider-card .provider-detail .provider-content .profile-detail p {
    text-align: right
}

.filter .provider-card .provider-detail .provider-content .profile-info {
    background-color: #fff;
    padding: 16px
}

.filter .provider-card .provider-detail .provider-content .profile-info p {
    color: #00162e;
    text-align: start
}

[dir=rtl] .filter .provider-card .provider-detail .provider-content .profile-info p {
    text-align: end
}

.filter .provider-card .provider-detail .provider-content .profile-info label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px
}

.filter .provider-card .provider-detail .provider-content .profile-info i {
    --Iconsax-Size: 18px
}

.filter .provider-card .provider-detail .provider-content .profile-info .btn-solid-gray {
    font-size: 14px;
    border-radius: 6px;
    padding: 6px 13px
}

.provider-detail .provider-content {
    border-radius: 12px;
    border: 1px solid #E5E8EA;
    padding: 20px
}

.provider-detail .provider-content .profile-bg {
    background-color: #f5f6f7;
    height: 70px;
    border-radius: 12px
}

.provider-detail .provider-content i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #ffc412
}

.provider-detail .provider-content .profile {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -45px
}

.provider-detail .provider-content .profile .img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    border: 4px solid #ffffff
}

.provider-detail .provider-content .profile .provider-profile-img {
    border-radius: 100%;
    width: 120px;
    height: 120px
}

.provider-detail .provider-content .profile .rate {
    font-size: 16px
}

.provider-detail .provider-content .profile-detail {
    margin-top: 10px
}

.provider-detail .provider-content .profile-detail ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px
}

.provider-detail .provider-content .profile-detail ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: calc(16px + .00125*(100vw - 320px));
    border-bottom: 1px solid #E5E8EA;
    padding: 10px 0
}

.provider-detail .provider-content .profile-detail ul li:last-child {
    border: none
}

@media (max-width: 575px) {
    .provider-detail .provider-content .profile-detail ul li {
        flex-direction: column;
        align-items: start;
        gap: 0
    }
}

.provider-detail .provider-content .badge {
    padding: calc(10px + .00625*(100vw - 320px));
    border-radius: 10px;
    width: 100%;
    text-align: start;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px
}

[dir=rtl] .provider-detail .provider-content .badge {
    text-align: end
}

.provider-detail .provider-content p {
    font-size: 16px;
    color: #808b97;
    line-height: 26px;
    text-align: center
}

.provider-detail .provider-content .badge-img {
    width: calc(25px + .00625*(100vw - 320px));
    height: calc(25px + .00625*(100vw - 320px))
}

.image-grp {
    position: relative;
    width: 90%;
    margin-inline: auto
}

@media (max-width: 1199px) {
    .image-grp {
        width: 100%
    }
}

.application-section,
.service-provider-section {
    position: relative
}

.application-section .row,
.service-provider-section .row {
    align-items: center
}

.application-section .position-absolute,
.service-provider-section .position-absolute {
    position: absolute;
    bottom: calc(50px + (198 - 55) * ((100vw - 320px) / (1920 - 320)));
    right: calc(20px + .025*(100vw - 320px))
}

[dir=rtl] .application-section .position-absolute,
[dir=rtl] .service-provider-section .position-absolute {
    right: unset;
    left: calc(20px + .025*(100vw - 320px))
}

@media (max-width: 1660px) {

    .application-section .position-absolute,
    .service-provider-section .position-absolute {
        bottom: calc(75px + (168 - 75) * ((100vw - 320px) / (1920 - 320)));
        right: calc(10px + .025*(100vw - 320px))
    }

    [dir=rtl] .application-section .position-absolute,
    [dir=rtl] .service-provider-section .position-absolute {
        right: unset;
        left: calc(10px + .025*(100vw - 320px))
    }
}

@media (max-width: 1460px) {

    .application-section .position-absolute,
    .service-provider-section .position-absolute {
        bottom: calc(75px + (168 - 75) * ((100vw - 320px) / (1920 - 320)));
        right: calc(10px + .025*(100vw - 320px))
    }

    [dir=rtl] .application-section .position-absolute,
    [dir=rtl] .service-provider-section .position-absolute {
        right: unset;
        left: calc(10px + .025*(100vw - 320px))
    }
}

@media (max-width: 1366px) {

    .application-section .position-absolute,
    .service-provider-section .position-absolute {
        bottom: calc(75px + (148 - 75) * ((100vw - 320px) / (1920 - 320)));
        right: 10px
    }

    [dir=rtl] .application-section .position-absolute,
    [dir=rtl] .service-provider-section .position-absolute {
        right: unset;
        left: 10px
    }
}

@media (max-width: 1199px) {

    .application-section .position-absolute,
    .service-provider-section .position-absolute {
        bottom: 0;
        right: 0
    }

    [dir=rtl] .application-section .position-absolute,
    [dir=rtl] .service-provider-section .position-absolute {
        right: unset;
        left: 0
    }
}

@media (max-width: 575px) {

    .application-section .position-absolute,
    .service-provider-section .position-absolute {
        display: none
    }
}

.application-section .gif-content,
.service-provider-section .gif-content {
    box-shadow: -8px -8px 22px #5250505e;
    border-radius: 10px;
    color: #fff;
    padding: 16px;
    background: linear-gradient(180deg, #8b54ff 0%, #5465ff 100%);
    width: 140px;
    text-align: center
}

.application-section .gif-content p,
.service-provider-section .gif-content p {
    margin: 0;
    font-size: 12px
}

.application-section .gif-content h6,
.service-provider-section .gif-content h6 {
    border-top: 1px dashed rgba(255, 255, 255, .1);
    margin-top: 4px;
    padding-top: 4px;
    position: relative;
    height: 10px
}

.application-section .gif-content h6:before,
.service-provider-section .gif-content h6:before {
    content: "User";
    position: absolute;
    left: 0;
    right: 0;
    animation: textChange infinite 2.5s;
    animation-delay: 2.5s
}

[dir=rtl] .application-section .gif-content h6:before,
[dir=rtl] .service-provider-section .gif-content h6:before {
    left: unset;
    right: 0
}

.application-section .spark,
.service-provider-section .spark {
    position: absolute;
    top: -37px;
    left: 60%;
    transform: translate(-60%)
}

[dir=rtl] .application-section .spark,
[dir=rtl] .service-provider-section .spark {
    left: unset;
    right: 60%;
    transform: translate(60%)
}

.application-section .section-wrap .image-1,
.service-provider-section .section-wrap .image-1 {
    position: absolute;
    z-index: -1;
    bottom: 120px;
    right: -45px;
    animation: mover 2s infinite alternate;
    animation-delay: 1s;
    width: 140px;
    overflow: hidden
}

[dir=rtl] .application-section .section-wrap .image-1,
[dir=rtl] .service-provider-section .section-wrap .image-1 {
    right: unset;
    left: -45px
}

@media (max-width: 575px) {

    .application-section .section-wrap .image-1,
    .service-provider-section .section-wrap .image-1 {
        display: none
    }
}

.application-section .section-wrap .image-2,
.service-provider-section .section-wrap .image-2 {
    position: absolute;
    animation: mover 2s infinite alternate;
    z-index: -1;
    top: 210px;
    left: 90px;
    animation-delay: 2s;
    height: 120px
}

[dir=rtl] .application-section .section-wrap .image-2,
[dir=rtl] .service-provider-section .section-wrap .image-2 {
    left: unset;
    right: 90px
}

@media (max-width: 991px) {

    .application-section .section-wrap .image-2,
    .service-provider-section .section-wrap .image-2 {
        display: none
    }
}

.application-section .section-wrap .vector-1,
.application-section .section-wrap .girl-img,
.service-provider-section .section-wrap .vector-1,
.service-provider-section .section-wrap .girl-img {
    margin: 0 auto;
    display: flex;
    width: 100%
}

@media (max-width: 991px) {

    .application-section .section-wrap .vector-1,
    .application-section .section-wrap .girl-img,
    .service-provider-section .section-wrap .vector-1,
    .service-provider-section .section-wrap .girl-img {
        width: 60%
    }
}

@media (max-width: 575px) {

    .application-section .section-wrap .vector-1,
    .application-section .section-wrap .girl-img,
    .service-provider-section .section-wrap .vector-1,
    .service-provider-section .section-wrap .girl-img {
        width: 100%
    }
}

.application-section .section-wrap .app-gif,
.service-provider-section .section-wrap .app-gif {
    position: absolute;
    top: 0;
    left: 20%;
    height: 100%
}

[dir=rtl] .application-section .section-wrap .app-gif,
[dir=rtl] .service-provider-section .section-wrap .app-gif {
    left: unset;
    right: 20%
}

.app-install {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 16px
}

.app-install img {
    height: 42px
}

@media (max-width: 991px) {
    .app-install {
        gap: 10px;
        margin-top: 30px
    }

    .app-install img {
        height: calc(45px + (60 - 45) * ((100vw - 320px) / (1920 - 320)))
    }
}

.application-section .title {
    margin-bottom: 22px
}

.application-section .title h2 {
    font-weight: 700;
    line-height: 1.4
}

.content-detail {
    color: #808b97
}

.content-detail p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.5
}

.content-detail .item-lists {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 30px
}

[dir=rtl] .content-detail .item-lists {
    margin-left: 0;
    margin-right: 30px
}

@media (max-width: 575px) {
    .content-detail .item-lists {
        gap: calc(0px + .0075*(100vw - 320px))
    }
}

.content-detail .item-lists li {
    font-size: calc(16px + .0025*(100vw - 320px));
    position: relative;
    line-height: 26px
}

.content-detail .item-lists li:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #808b97;
    top: 12px;
    left: -16px;
    border-radius: 100%
}

[dir=rtl] .content-detail .item-lists li:before {
    left: unset;
    right: -16px
}

.chart-img {
    position: absolute;
    bottom: 55px;
    left: 120px;
    border-radius: 13px;
    animation: mover 2s infinite alternate;
    animation-delay: 1s
}

[dir=rtl] .chart-img {
    left: unset;
    right: 120px
}

@media (min-width: 992px) {
    .chart-img {
        width: calc(120px + (200 - 120) * ((100vw - 992px) / (1920 - 992)))
    }
}

@media (max-width: 1199px) {
    .chart-img {
        left: 50px
    }

    [dir=rtl] .chart-img {
        left: unset;
        right: 50px
    }
}

@media (max-width: 991px) {
    .chart-img {
        left: calc(30px + .16875*(100vw - 320px));
        bottom: calc(11px + .12125*(100vw - 320px));
        width: calc(121px + (200 - 121) * ((100vw - 320px) / (1920 - 320)))
    }

    [dir=rtl] .chart-img {
        left: unset;
        right: calc(30px + .16875*(100vw - 320px))
    }
}

.group-img {
    position: absolute;
    top: 120px;
    right: 30px;
    border-radius: 13px;
    animation: mover 2s infinite alternate;
    animation-delay: 1s
}

[dir=rtl] .group-img {
    right: unset;
    left: 30px
}

@media (min-width: 992px) {
    .group-img {
        width: calc(120px + (200 - 120) * ((100vw - 992px) / (1920 - 992)))
    }
}

@media (max-width: 1199px) {
    .group-img {
        right: 0
    }

    [dir=rtl] .group-img {
        right: unset;
        left: 0
    }
}

@media (max-width: 991px) {
    .group-img {
        right: calc(10px + .0125*(100vw - 320px));
        top: calc(90px + .075*(100vw - 320px));
        width: calc(110px + .05625*(100vw - 320px))
    }

    [dir=rtl] .group-img {
        right: unset;
        left: calc(10px + .0125*(100vw - 320px))
    }
}

.service-provider-section {
    position: relative;
    background-image: url(https://osoncor.tj/build/assets/bg-4d7bc502.png);
    background-color: #f5f6f7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0
}

.service-provider-section .item-lists {
    margin: 0 !important
}

.service-provider-section .item-lists .item-list:before {
    display: none
}

.service-provider-section .item-lists .item-list i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465ff
}

.service-provider-section .section-wrap .image-1 {
    bottom: 50px;
    right: 80px
}

[dir=rtl] .service-provider-section .section-wrap .image-1 {
    right: unset;
    left: 80px
}

.service-provider-section .section-wrap .image-2 {
    top: 60px;
    left: 70px
}

[dir=rtl] .service-provider-section .section-wrap .image-2 {
    left: unset;
    right: 70px
}

.service-provider-section .btn {
    border-radius: 13px;
    margin-top: 30px;
    width: max-content
}

@media (max-width: 767px) {
    .service-provider-section .btn {
        margin-top: 20px
    }
}

.service-package-section .service-package-content .service-detail {
    color: #fff;
    margin: calc(18px + .0075*(100vw - 320px));
    width: auto
}

.service-package-section .service-package-content .service-detail .service-icon {
    border-radius: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
    background-color: #e5e8ea;
    padding: calc(10px + .00125*(100vw - 320px));
    width: calc(54px + .00375*(100vw - 320px));
    height: calc(54px + .00375*(100vw - 320px));
    margin-bottom: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    transition: all .3s ease-in-out
}

.service-package-section .service-package-content .service-detail h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
}

.service-package-section .service-package-content .service-detail .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: calc(3px + (6 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.service-package-section .service-package-content .service-detail .price span {
    font-size: calc(22px + .0025*(100vw - 320px));
    font-weight: 700;
    line-height: 1.3
}

.service-package-section .service-package-content .service-detail .price i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: white;
    transform: translate(0);
    transition: all .2s ease
}

.service-package-section .service-package-content .service-detail .price:hover i {
    transform: translate(5px);
    transition: all .2s ease
}

.service-package-section .service-package-content .service-bg {
    width: 100%;
    border-radius: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    height: 100%;
    position: relative;
    overflow: hidden
}

.service-package-section .service-package-content .service-bg .service-1 {
    position: absolute;
    bottom: -90px;
    right: -160px;
    height: 250px
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-1 {
    right: unset;
    left: -160px
}

.service-package-section .service-package-content .service-bg .service-2 {
    position: absolute;
    top: -120px;
    right: -90px;
    height: 250px;
    transform: rotate(230deg)
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-2 {
    right: unset;
    left: -90px
}

.service-package-section .service-package-content .service-bg .service-3 {
    position: absolute;
    bottom: -100px;
    left: -70px;
    height: 250px;
    transform: rotate(49deg)
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-3 {
    left: unset;
    right: -70px
}

.service-package-section .service-package-content .service-bg .service-4 {
    position: absolute;
    top: -92px;
    left: -80px;
    height: 250px;
    transform: rotate(190deg)
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-4 {
    left: unset;
    right: -80px
}

.service-package-section .service-package-content .service-bg:hover .service-icon {
    background-color: #fff
}

.service-package-section .service-package-content .service-bg:hover .service-icon img {
    animation: tada 1.5s ease infinite
}

.service-package-section .service-package-content .service-bg-primary {
    background-color: var(--theme-color)
}

.service-package-section .service-package-content .service-bg-secondary {
    background-color: #ff7456
}

.service-package-section .service-package-content .service-bg-info {
    background-color: #48bffd
}

.service-package-section .service-package-content .service-bg-success {
    background-color: #27af4d
}

.service-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(3px + (8 - 3) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 480px) {
    .service-title {
        flex-direction: column;
        align-items: start
    }
}

.service-title h4 a {
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: #00162e;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.service-title span {
    font-size: 14px;
    line-height: 20px;
    color: #808b97
}

.service-title small {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px
}

.service-detail ul {
    display: flex;
    align-items: start
}

.service-detail ul li {
    border-right: 1px solid #E5E8EA;
    padding: 0 10px
}

[dir=rtl] .service-detail ul li {
    border-left: 1px solid #E5E8EA;
    border-right: unset;
    padding-right: 0
}

.service-detail ul li:last-child {
    border: none;
    padding-right: 0;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

[dir=rtl] .service-detail ul li:last-child {
    padding-left: 0;
    padding-right: 10px
}

.service-detail p {
    font-size: 14px;
    color: #808b97;
    position: relative;
    padding: 0 0 0 22px;
    margin: 0;
    margin-top: calc(8px + .0025*(100vw - 320px));
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0
}

.time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #27af4d;
    font-size: 14px
}

.time i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #27AF4D
}

.time span {
    white-space: nowrap;
    font-weight: 500
}

.date-time li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap
}

.date-time li span {
    color: #808b97;
    font-size: 16px
}

.date-time li small {
    font-weight: 500;
    color: #00162e;
    font-size: 16px
}

.service-list-section .service-list-content .card .card-footer {
    position: relative;
    padding-top: 16px !important
}

.service-list-section .service-list-content .card .card-footer:before {
    content: "";
    position: absolute;
    width: calc(100% - 32px);
    height: 1px;
    border-top: 1px dashed #E5E8EA;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.service-list-section .service-list-content .card .card-footer:after {
    content: "";
    position: absolute;
    right: 14px;
    top: -3px;
    border-bottom: 2px solid #E5E8EA;
    border-right: 2px solid #E5E8EA;
    width: 6px;
    height: 6px;
    transform: rotate(312deg)
}

[dir=rtl] .service-list-section .service-list-content .card .card-footer:after {
    right: unset;
    left: 14px;
    transform: rotate(128deg)
}

.service-list-section .service-list-content .card .card-footer .footer-detail {
    display: flex;
    align-items: center;
    gap: 8px
}

.service-list-section .service-list-content .card .card-footer .footer-detail img {
    width: 45px;
    height: 45px;
    border-radius: 100%
}

.service-list-section .service-list-content .card .card-footer .footer-detail img.star {
    width: 16px;
    height: 16px
}

.service-list-section .service-list-content .card .card-footer .footer-detail p {
    margin: 0 0 6px;
    font-weight: 500;
    color: #00162e;
    font-size: calc(16px + .00125*(100vw - 320px));
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.service-list-section .service-list-content .card .card-footer .footer-detail i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #FFC412
}

.service-list-section .service-list-content .card .card-footer a {
    display: flex;
    align-items: center;
    gap: 2px
}

.service-list-section .service-list-content .card .card-footer a:hover i {
    --Iconsax-Color: white;
    transition: all .5s ease
}

.service-list-section .service-list-content .card .card-footer a.btn {
    width: max-content
}

.service-list-section .service-list-content .card .card-footer a.btn.btn-outline {
    color: var(--theme-color);
    font-size: 18px;
    line-height: 1;
    transition: all .5s ease
}

.service-list-section .service-list-content .card .card-footer a.btn.btn-outline:hover {
    background-color: var(--theme-color);
    color: #fff
}

@media (max-width: 1460px) {
    .service-list-section .service-list-content .card .card-footer a.btn.btn-outline {
        padding: 10px
    }
}

@media (max-width: 767px) {
    .service-list-section .service-list-content .card .card-footer a.btn.btn-outline {
        font-size: 14px;
        padding: 10px 6px
    }

    .service-list-section .service-list-content .card .card-footer a.btn.btn-outline i {
        --Iconsax-Size: 17px
    }
}

.service-list-section .service-list-content .card .card-footer a i {
    --Iconsax-Size: 19px;
    --Iconsax-Color: #0019ff;
    transition: all .5s ease
}

.service-list-section .service-list-content .card .card-footer .btn {
    font-size: calc(16px + .00125*(100vw - 320px));
    padding: 12px calc(12px + .0025*(100vw - 320px));
    font-weight: 500;
    border-radius: calc(4px + .00125*(100vw - 320px));
    line-height: 1
}

.service-list-section .service-list-content .service-detail-slider .service-img {
    border-radius: 15px
}

.service-list-section .service-list-content .service-detail p {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding-left: 0
}

[dir=rtl] .service-list-section .service-list-content .service-detail p {
    padding-right: 0;
    padding-left: unset
}

.service-list-section .service-list-content .service-detail p:before {
    content: none
}

@media (max-width: 767px) {
    .service-list-section .service-list-content .select-dropdown .form-group {
        width: 100%
    }
}

.detail-content {
    margin-top: 24px
}

.detail-content .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: none;
    margin: 0;
    padding-bottom: 4px
}

.detail-content .title .amount-value {
    line-height: 1
}

.detail-content .title:before {
    display: none
}

.detail-content .title h3 {
    font-size: calc(20px + .0025*(100vw - 320px));
    font-weight: 500
}

@media (max-width: 575px) {
    .detail-content .title {
        flex-direction: column;
        align-items: start
    }
}

.detail-content p {
    color: #808b97;
    font-size: 18px;
    margin: 10px 0 20px;
    line-height: 1.5
}

.detail-content label {
    font-size: 16px;
    margin-bottom: 4px
}

.detail-content .lists {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px
}

.detail-content .detail-sec {
    background-color: #f5f6f7;
    border-radius: 10px
}

.detail-content .detail-sec .overview-list {
    color: #808b97
}

.detail-content.service-details-content h3 {
    font-weight: 600;
    font-size: 20px
}

.detail-content.service-details-content ul {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-inline-start: 20px
}

.detail-content.service-details-content ul li {
    font-size: 18px;
    margin-top: 10px;
    color: #808b97;
    display: list-item;
    list-style-type: decimal
}

.detail-content.service-details-content ul li::marker {
    color: #00162e;
    font-weight: 500
}

.detail-content.service-details-content ul li strong {
    color: #00162e
}

.detail-content.package-detail-content p {
    font-size: calc(14px + .0025*(100vw - 320px))
}

.detail-content.package-detail-content .detail-sec .service-item .detail .service-title h4 {
    font-size: calc(18px + .0025*(100vw - 320px))
}

.service-item {
    gap: 15px;
    display: flex;
    align-items: start;
    border-bottom: 1px solid #E5E8EA
}

.service-item:first-child {
    padding-top: 0
}

.service-item:last-child {
    border: none;
    padding-bottom: 0
}

.service-item img {
    width: calc(80px + .025*(100vw - 320px));
    height: calc(80px + .025*(100vw - 320px));
    object-fit: cover
}

.amount-value {
    font-weight: 700;
    font-size: 22px;
    line-height: 40px
}

.amount {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E8EA
}

.amount-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #5465ff1a;
    color: var(--theme-color);
    padding: 16px
}

.amount-header span {
    font-size: 20px
}

.amount-header small {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2
}

.amount-detail {
    padding: 16px
}

.amount-detail i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #00162E;
    border-right: 1px solid #E5E8EA;
    padding-right: 10px
}

[dir=rtl] .amount-detail i {
    border-left: 1px solid #E5E8EA;
    border-right: unset
}

.amount-detail ul {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.amount-detail ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #00162e
}

.service-img .favourite {
    top: calc(10px + .0125*(100vw - 320px));
    right: calc(10px + .0125*(100vw - 320px));
    left: unset
}

[dir=rtl] .service-img .favourite {
    left: calc(10px + .0125*(100vw - 320px));
    right: unset
}

.favourite {
    width: max-content;
    border-radius: 100%;
    background-color: #fff;
    padding: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer
}

[dir=rtl] .favourite {
    left: unset;
    right: 20px
}

.favourite .nolike {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #FF4B4B;
    display: block
}

.favourite .nolike.hide {
    display: none
}

.favourite .like {
    height: calc(16px + .0025*(100vw - 320px)) !important;
    width: calc(16px + .0025*(100vw - 320px)) !important;
    display: none
}

.favourite .like.show {
    display: block
}

.service-section.border-line {
    padding-bottom: 25px;
    border-bottom: 1px solid #E5E8EA
}

.service-section .service-right-box {
    margin: 0;
    position: sticky;
    top: 110px
}

.service-section .label-title {
    font-weight: 500;
    color: #00162e
}

.servicemen-lists {
    background-color: #5465ff1a;
    width: 100%;
    padding: calc(15px + .00375*(100vw - 320px));
    border: 1px dashed var(--theme-color);
    color: var(--theme-color);
    border-radius: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500
}

.no-cart-found {
    margin-bottom: 72px
}

.no-cart-found h3 {
    font-size: 22px
}

.no-cart-found p {
    margin-top: 5px;
    line-height: 1.5;
    font-size: 16px;
    color: #808b97
}

.no-cart-found.no-cart-data {
    margin-block: calc(20px + .0125*(100vw - 320px))
}

.service-package-section .date-time-location-btn {
    color: var(--theme-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    padding: 5px 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 6px
}

.service-package-section .date-time-location-btn .iconsax {
    --Iconsax-Color: var(--theme-color);
    --Iconsax-Size: 18px
}

.service-package-section .service-item {
    width: 100%;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    padding: calc(14px + .00375*(100vw - 320px));
    align-items: flex-start
}

[dir=rtl] .service-package-section .service-item {
    padding-right: calc(14px + .00375*(100vw - 320px));
    padding-left: unset
}

@media (max-width: 1199px) {
    .service-package-section .service-item {
        display: block
    }
}

.service-package-section .service-item .service-left-box {
    position: sticky;
    top: 100px;
    width: 50%
}

@media (max-width: 1199px) {
    .service-package-section .service-item .service-left-box {
        position: relative;
        top: unset !important;
        width: 100%
    }
}

.service-package-section .service-item .service-left-box .service-img {
    width: 100%;
    height: calc(150px + .09375*(100vw - 320px));
    border-radius: 10px
}

@media (max-width: 1199px) {
    .service-package-section .service-item .service-left-box .service-img {
        width: 100%;
        object-fit: cover;
        object-position: top;
        height: 300px
    }
}

.service-package-section .service-item .service-left-box .service-title {
    display: block;
    margin-top: 24px
}

.service-package-section .service-item .service-left-box .service-title .service-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.service-package-section .service-item .service-left-box .service-title .service-offer h4 {
    font-weight: 500
}

.service-package-section .service-item .service-left-box .service-title .service-offer .time span {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3
}

.service-package-section .service-item .service-left-box .service-title p {
    margin: 5px;
    font-size: 16px;
    line-height: 1.5;
    color: #808b97
}

.service-package-section .service-item .service-left-box .service-title .amount {
    margin-block: 15px
}

.service-package-section .service-item .service-left-box .service-title .amount .amount-detail .amount-listing li {
    color: #00162e99
}

.service-package-section .service-item .detail .servicemen-lists {
    margin-block: 24px
}

.service-package-section .service-item .detail .serviceman {
    display: flex;
    align-items: center;
    gap: 14px
}

.service-package-section .service-item .detail .serviceman .serviceman-detail {
    background-color: #f5f6f7;
    border: none;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 12px;
    box-shadow: none;
    max-width: calc(220px + (279 - 220) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center
}

.service-package-section .service-item .detail .serviceman .serviceman-detail>div {
    width: calc(100% - 57px)
}

.service-package-section .service-item .detail .serviceman .serviceman-detail h6 {
    margin: 0;
    color: #a3aab1 !important;
    font-size: 14px !important
}

.service-package-section .service-item .detail .serviceman .serviceman-detail p {
    font-weight: 500;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0
}

.service-package-section .service-item .detail .booking-data h3 {
    font-size: calc(16px + 2px*(100vw - 320px)/1600px);
    font-weight: 500;
    line-height: 23px;
    color: #00162e
}

.service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option {
    padding: 0;
    border: none;
    flex-direction: row;
    display: flex;
    gap: 20px;
    margin-bottom: 17px
}

@media (max-width: 600px) {
    .service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option {
        flex-wrap: wrap;
        gap: 10px
    }
}

.service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option .form-check {
    padding: 0;
    flex-direction: unset;
    border: none
}

.service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option label {
    color: #00162ee6;
    cursor: pointer
}

[dir=rtl] {
    direction: rtl
}

[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: calc(var(--bs-border-width)* -1);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    margin-left: inherit
}

[dir=rtl] .feature-slider {
    direction: ltr
}

[dir=rtl] .slick-list .slick-track .slick-slide>div {
    direction: rtl
}