:root {
    --dark-green-gradient: linear-gradient(to bottom, #8200FF, #170024);
    --primary-color: #8200FF;
    --Iconsax-Color: #170024;
    --bs-heading-color: #170024;
    --Iconsax-Color: #9753FB;
}

body {
    font-family: 'Raleway', sans-serif;
    position: relative;
    font-size: 14px;
    margin: 0;
    background-color: #fff;
    color: #170024;
    scroll-behavior: smooth
}

body.dark {
    background-color: #170024;
    color: #fff
}

button,
input,
optgroup,
select,
textarea {
    font-family: 'Raleway', sans-serif;
}

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

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

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

a,
a:hover {
    color: var(--primary-color);
    text-decoration: none
}

a:focus {
    outline: none
}

button:focus {
    outline: none
}

:focus {
    outline: none
}

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

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(--primary-color) !important
}

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

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

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

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

@media (min-width: 1400px) {
    .custom-row .custom-col-3 {
        width: 400px
    }
    .custom-row .custom-col-9 {
        width: calc(100% - 400px)
    }
}

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

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

@media (max-width: 1199.98px) {
    .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: 0 calc(15px + (100 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.container-fluid-lg {
    padding-inline: calc(15px + (148 - 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: #f9fafa
}

body.dark .section-bg {
    background-color: #252934
}

.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] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    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: #647683;
    letter-spacing: calc(.2px + (.4 - .2) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .rate small {
    color: #fff9
}

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

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    position: relative;
    margin-bottom: calc(16px + .00875*(100vw - 320px));
    gap: 4px
}

body.dark .title {
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

body.dark .title h3 {
    color: #fff
}

.title:before {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    width: 93px;
    height: 4px;
    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: 575.98px) {
    .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: var(--primary-color);
    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 {
    position: relative;
    margin: 0 auto 36px;
    text-align: center;
    width: 40%
}

@media (max-width: 1400.98px) {
    .title-1 {
        width: 61%
    }
}

@media (max-width: 1020.98px) {
    .title-1 {
        width: 84%
    }
}

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

.title-1 h6 {
    color: var(--primary-color);
    font-size: calc(16px + .00125*(100vw - 320px));
    letter-spacing: 1px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 33%;
    margin-inline: auto
}

@media (max-width: 760.98px) {
    .title-1 h6 {
        width: 72%
    }
}

.title-1 h6:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 1px;
    z-index: -1;
    background: var(--primary-color);
    background: linear-gradient(90deg, rgba(23, 27, 39, 0) 1%, var(--primary-color) 15%, var(--primary-color) 85%, rgba(23, 27, 39, 0) 100%)
}

.title-1 h6 span {
    padding-inline: 5px;
    background-color: #fff
}

body.dark .title-1 h6 span {
    background-color: #171b27
}

.title-1 h2 {
    font-weight: 700;
    line-height: 1.2;
    font-size: calc(26px + (35 - 26) * ((100vw - 320px) / (1920 - 320)));
    text-transform: none;
    background: linear-gradient(to right, #07EF2E 0%, #1eac35 50%, #07EF2E 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 8s linear infinite
}

.title-1 p {
    color: #171b2799;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3;
    margin-top: 8px
}

body.dark .title-1 p {
    color: #fff9
}

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

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

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

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

.title-1.dark-title span {
    background-color: #0b3d2e
}

.title-1.dark-title h2 {
    background: #ffffff;
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text
}

.title-1.dark-title p {
    color: #fffc
}

.title-1.light-gray-title span {
    background-color: #f9fafa
}

body.dark .title-1.light-gray-title span {
    background-color: #252934
}

.discount-tag {
    position: absolute;
    top: calc(8px + .00125*(100vw - 320px));
    right: calc(8px + .00125*(100vw - 320px));
    background-color: #fb6a5c;
    color: #fff;
    border-radius: calc(3px + .00125*(100vw - 320px));
    z-index: 1;
    padding: 3px calc(7px + .00125*(100vw - 320px));
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.3
}

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

.like-icon {
    position: absolute;
    top: calc(8px + .00125*(100vw - 320px));
    left: calc(8px + .00125*(100vw - 320px));
    width: calc(32px + .0025*(100vw - 320px));
    height: calc(32px + .0025*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 100%;
    z-index: 1;
    cursor: poRaleway
}

body.dark .like-icon {
    background-color: #171b27
}

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

.like-icon .icon {
    width: calc(16px + .0025*(100vw - 320px));
    height: calc(16px + .0025*(100vw - 320px));
    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)
}

body.dark .custom-scroll::-webkit-scrollbar-track {
    background-color: #323640
}

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

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

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(254, 120, 46, .2);
    border-radius: 4px
}

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

.text-underline {
    text-decoration: underline
}

.text-dark {
    color: #171b27;
    font-weight: 500
}

.text-white {
    color: #fff
}

body.dark .text-light {
    color: #fff9 !important
}

.border {
    border: 1px solid #eeeeee
}

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

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

body.dark .b-bottom {
    border-color: #454851
}

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

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

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

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

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

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

body.dark .b-bottom-dashed {
    border-color: #454851
}

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

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

.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
}

[dir=rtl] .pr-45 {
    padding-right: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) !important;
    padding-left: 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: #f9fafa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0
}

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

.plus-minus input,
.increment input {
    color: #171b27;
    border: none;
    background-color: #f9fafa;
    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(--primary-color);
    --Iconsax-Color: #fff;
    border-radius: 6px
}

.danger-note {
    background-color: #ff4b4b1a;
    color: #ff4b4b;
    padding: calc(10px + .00375*(100vw - 320px));
    border-radius: calc(6px + .00125*(100vw - 320px))
}

.danger-note p {
    line-height: 1.4;
    font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)))
}

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

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

body.dark .dashed-border {
    border-color: #454851
}

.note {
    margin-top: 16px
}

.note label {
    font-weight: 500;
    color: #171b27
}

body.dark .note label {
    color: #fff
}

.note p {
    color: #647683
}

body.dark .note p {
    color: #fff9
}

.input-group.phone-detail>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin: 0
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-radius: calc(6px + .00125*(100vw - 320px)) !important
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3) {
    border-radius: calc(6px + .00125*(100vw - 320px)) !important
}

@media (min-width: 1660px) {
    .row-cols-3xl-4>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
}

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

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

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

@media (max-width: 1199.98px) {
    .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: #647683 !important
}

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

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

.error-wrapper .no-data-content>svg {
    width: 430px;
    height: 260px;
    margin-bottom: 40px
}

.error-wrapper .no-data-content p {
    color: #171b27cc;
    line-height: 1.4;
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)))
}

.error-wrapper .no-data-content .btn {
    margin-top: 25px;
    width: max-content;
    background-color: var(--primary-color)
}

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

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

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

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

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

.no-data-content .btn {
    margin-top: 25px;
    width: max-content;
    background-color: var(--primary-color)
}

.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-FE782E {
    background-color: #27af4d1a;
    color: #27af4d
}

.booking-status-FE782E: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: #fe782e;
    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: #647683;
    color: #fff
}

.badge-primary-light {
    background-color: #fe782e1a;
    color: #fe782e
}

.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: #6476831a;
    color: #647683
}

del {
    color: #171b274d
}

.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
}

[dir=rtl] input[type=number],
[dir=rtl] input[type=date],
[dir=rtl] input[type=time],
[dir=rtl] input[type=datetime-local] {
    text-align: end
}

.tap-to-top {
    position: fixed;
    bottom: calc(18px + .01375*(100vw - 320px));
    right: -33px;
    z-index: 9;
    opacity: 0;
    visibility: visible;
    transition: all .3s ease-in-out;
    transform: scale(.7);
    transform-origin: bottom right
}

@media (max-width: 600.98px) {
    .tap-to-top {
        bottom: calc(85px + (100 - 85) * ((100vw - 320px) / (601 - 320)))
    }
}

.tap-to-top.show {
    opacity: 1;
    visibility: visible;
    right: calc(18px + .01375*(100vw - 320px));
    transform: scale(1)
}

.tap-to-top .top-btn {
    width: calc(32px + .00625*(100vw - 320px));
    height: calc(32px + .00625*(100vw - 320px));
    border-radius: calc(4px + .00125*(100vw - 320px));
    background-color: var(--primary-color);
    padding: 0;
    border: 0;
    position: relative;
    z-index: 0
}

.tap-to-top .top-btn:active {
    background-color: var(--primary-color)
}

.tap-to-top .top-btn:before {
    content: "";
    position: absolute;
    border-radius: calc(5px + .00125*(100vw - 320px));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 3px + .00125*(100vw - 320px));
    height: calc(100% + 3px + .00125*(100vw - 320px));
    outline: 2px solid var(--primary-color)
}

.tap-to-top .top-btn .feather {
    color: #fff
}

.invalid-feedback {
    margin-top: 3px;
    font-size: 13px;
    color: #ff4b4b
}

.tooltip.show {
    opacity: 1
}

.tooltip .tooltip-inner {
    background-color: var(--primary-color);
    border-radius: 4px
}

.bs-tooltip-top .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before {
    border-top-color: var(--primary-color)
}

.bs-tooltip-bottom .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before {
    border-bottom-color: var(--primary-color)
}

.bs-tooltip-start .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before {
    border-left-color: var(--primary-color)
}

.bs-tooltip-end .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before {
    border-right-color: var(--primary-color)
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #171b27;
    opacity: 0;
    transition: all .25s ease-in-out;
    visibility: hidden;
    z-index: 9
}

.bg-overlay.show {
    opacity: .4;
    visibility: visible
}

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

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

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

body.dark .accordion .accordion-item {
    background-color: transparent
}

body.dark .accordion .accordion-item .accordion-header .accordion-button {
    background-color: #252934;
    border-color: #454851;
    color: #fff !important
}

body.dark .accordion .accordion-item .accordion-header .accordion-button i {
    --Iconsax-Color: #fff
}

body.dark .accordion .accordion-item .accordion-body li {
    color: #fff9
}

.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: #171b27;
    cursor: poRaleway
}

.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: #171b27
}

.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: poRaleway
}

.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;
    max-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: flex;
    align-items: center;
    white-space: nowrap;
    cursor: poRaleway
}

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

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li+li {
    padding-left: 5px;
    margin-left: 5px
}

[dir=rtl] .filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body ul li+li {
    padding-right: 5px;
    margin-right: 5px;
    padding-left: unset;
    margin-left: unset
}

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

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

.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 button {
    width: 100%;
    justify-content: center;
    border-radius: 8px
}

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

.faq-section .accordion .accordion-item,
.privacy-section .accordion .accordion-item,
.terms-section .accordion .accordion-item {
    font-family: Raleway, sans-serif;
    background-color: #fff;
    border-radius: calc(8px + .0025*(100vw - 320px))
}

.faq-section .accordion .accordion-item+.accordion-item,
.privacy-section .accordion .accordion-item+.accordion-item,
.terms-section .accordion .accordion-item+.accordion-item {
    margin-top: calc(12px + .005*(100vw - 320px))
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button,
.privacy-section .accordion .accordion-item .accordion-header .accordion-button,
.terms-section .accordion .accordion-item .accordion-header .accordion-button {
    padding: calc(14px + .00375*(100vw - 320px)) calc(16px + .0025*(100vw - 320px));
    display: flex;
    align-items: center;
    background-color: #f9fafa;
    border-radius: 6px;
    border: 1px solid #eeeeee;
    justify-content: space-between;
    width: 100%;
    line-height: 1.2;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    gap: 4px;
    color: #171b27;
    cursor: poRaleway
}

[dir=rtl] .faq-section .accordion .accordion-item .accordion-header .accordion-button,
[dir=rtl] .privacy-section .accordion .accordion-item .accordion-header .accordion-button,
[dir=rtl] .terms-section .accordion .accordion-item .accordion-header .accordion-button {
    text-align: right
}

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

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

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

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

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

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

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

.faq-section .accordion .accordion-item .accordion-body,
.privacy-section .accordion .accordion-item .accordion-body,
.terms-section .accordion .accordion-item .accordion-body {
    padding: calc(16px + .0025*(100vw - 320px))
}

.faq-section .accordion .accordion-item .accordion-body>*:last-child,
.privacy-section .accordion .accordion-item .accordion-body>*:last-child,
.terms-section .accordion .accordion-item .accordion-body>*:last-child {
    margin-bottom: 0
}

.faq-section .accordion .accordion-item .accordion-body p,
.privacy-section .accordion .accordion-item .accordion-body p,
.terms-section .accordion .accordion-item .accordion-body p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.5
}

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

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

.faq-section ul li,
.faq-section ol li,
.privacy-section ul li,
.privacy-section ol li,
.terms-section ul li,
.terms-section ol li {
    display: list-item;
    font-size: calc(15px + .00125*(100vw - 320px));
    color: #171b27b3;
    line-height: 1.3 !important;
    margin-bottom: 12px
}

.faq-section ul li:last-child,
.faq-section ol li:last-child,
.privacy-section ul li:last-child,
.privacy-section ol li:last-child,
.terms-section ul li:last-child,
.terms-section ol li:last-child {
    margin-bottom: 0
}

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

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

@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%
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% center
    }
    to {
        background-position: -200% center
    }
}

.flatpicker-calender:has(i) .flatpickr-input {
    padding: 10px calc(12px + .0025*(100vw - 320px)) 10px calc(38px + .005*(100vw - 320px))
}

.flatpicker-calender:has(i) .flatpickr-input [dir=rtl] {
    padding: 10px calc(38px + .005*(100vw - 320px)) 10px calc(12px + .0025*(100vw - 320px))
}

body.dark .flatpicker-calender .flatpickr-input {
    background-color: #252934 !important
}

.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 .category-body {
    margin-top: 16px;
    display: grid;
    gap: 10px
}

.booking-category .category-body ul {
    display: grid;
    gap: calc(4px + .00375*(100vw - 320px));
    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: poRaleway
}

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

body.dark .booking-category .category-body ul .form-check:has(.form-check-input:checked) .form-check-label span {
    color: #fff
}

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

.booking-category .category-body ul .form-check .form-check-label span {
    padding-left: 0;
    margin-left: calc(6px + .0025*(100vw - 320px));
    transition: all .1s ease-in-out;
    position: relative;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27cc
}

body.dark .booking-category .category-body ul .form-check .form-check-label span {
    color: #fffc
}

[dir=rtl] .booking-category .category-body ul .form-check .form-check-label span {
    padding-left: unset;
    padding-right: calc(6px + .0025*(100vw - 320px))
}

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

[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
}

.booking-sec .filter-sidebar {
    border-right: 1px solid #eeeeee
}

[dir=rtl] .booking-sec .filter-sidebar {
    border-right: unset;
    border-left: 1px solid #eeeeee
}

body.dark .booking-sec .filter-sidebar {
    border-color: #454851
}

.booking-sec .filter-sidebar .filter .card {
    background-color: transparent;
    border-radius: unset;
    border: none
}

.booking-sec .filter-sidebar .filter .card .card-header {
    padding: 0 0 18px;
    margin-bottom: 18px;
    background-color: transparent;
    border-bottom: 1px solid #eeeeee
}

body.dark .booking-sec .filter-sidebar .filter .card .card-header {
    border-color: #454851
}

body.dark .booking-sec .filter-sidebar .filter .card .card-header h3 {
    color: #fff
}

@media (max-width: 1199.98px) {
    .booking-sec .filter-sidebar .filter .card .card-header {
        padding: calc(15px + (18 - 15) * ((100vw - 320px) / (1199 - 320)));
        margin-bottom: calc(15px + (18 - 15) * ((100vw - 320px) / (1199 - 320)));
        background-color: #f9fafa;
        position: sticky;
        top: 0;
        border-radius: 0;
        z-index: 2
    }
    body.dark .booking-sec .filter-sidebar .filter .card .card-header {
        background-color: #323640
    }
}

.booking-sec .filter-sidebar .filter .card .card-header h3 {
    font-weight: 600;
    font-size: calc(20px + .00125*(100vw - 320px));
    letter-spacing: .4px
}

.booking-sec .filter-sidebar .filter .card .card-header a {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    text-decoration: underline
}

.booking-sec .filter-sidebar .filter .card .card-body {
    padding: 0
}

@media (max-width: 1199.98px) {
    .booking-sec .filter-sidebar .filter .card .card-body {
        padding: 0 18px 18px
    }
}

@media (max-width: 1199.98px) {
    .booking-sec .filter-sidebar .filter .card .card-body {
        padding: 0 calc(15px + (18 - 15) * ((100vw - 320px) / (1199 - 320))) calc(15px + (18 - 15) * ((100vw - 320px) / (1199 - 320)))
    }
}

.booking-sec .filter-sidebar .filter .card .card-body .booking-main-box+.booking-main-box {
    margin-top: 18px
}

body.dark .booking-sec .filter-sidebar .filter .card .card-body .search-div .form-control {
    background-color: #252934;
    color: #fff
}

body.dark .booking-sec .filter-sidebar .filter .card .card-body .search-div .form-control::placeholder {
    color: #fff9
}

.booking-sec .filter-sidebar .filter .card .card-body .sidebar-title {
    font-size: calc(16px + (17 - 16) * ((100vw - 320px) / (1920 - 320)));
    letter-spacing: calc(.2px + (.4 - .2) * ((100vw - 320px) / (1920 - 320)));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: #171b27;
    margin-bottom: 9px
}

body.dark .booking-sec .filter-sidebar .filter .card .card-body .sidebar-title {
    color: #fff
}

.booking-sec .filter-sidebar .filter .card .card-footer {
    padding: 22px 0 0;
    border-top: 1px solid #eeeeee;
    border-radius: unset
}

@media (max-width: 1199.98px) {
    .booking-sec .filter-sidebar .filter .card .card-footer {
        padding: calc(16px + (18 - 16) * ((100vw - 320px) / (1199 - 320))) calc(15px + (18 - 15) * ((100vw - 320px) / (1199 - 320)))
    }
}

body.dark .booking-sec .filter-sidebar .filter .card .card-footer {
    border: none
}

@media (max-width: 1199px) {
    .booking-sec .filter {
        position: fixed !important;
        top: 0 !important;
        left: calc(-320px + (-370 - -320) * ((100vw - 320px) / (1199 - 320)));
        width: calc(310px + (350 - 310) * ((100vw - 320px) / (1199 - 320)));
        height: 100vh;
        z-index: 9;
        overflow: auto;
        transform: unset;
        transition: all .25s ease-in-out;
        opacity: 1;
        visibility: visible;
        background-color: #fff
    }
    body.dark .booking-sec .filter {
        background-color: #252934
    }
    .booking-sec .filter.open {
        left: 0
    }
    [dir=rtl] .booking-sec .filter.open {
        left: unset;
        right: 0
    }
    .booking-sec .filter .card {
        border-radius: 0;
        border: none;
        height: 100vh;
        overflow: auto
    }
    .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: #222;
    line-height: 1;
    cursor: poRaleway
}

body.dark .booking-sec .filter .card .card-header .close-btn {
    --Iconsax-Color: #fff
}

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

.booking-sec .filter-btn i {
    --Iconsax-Size: 18px !important
}

.booking-sec .select-dropdown {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eeeeee
}

body.dark .booking-sec .select-dropdown {
    border-color: #454851
}

body.dark .booking-sec .select-dropdown h4 {
    color: #fff
}

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

@media (max-width: 575.98px) {
    .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(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default
}

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

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

.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(--primary-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: calc(6px + .00125*(100vw - 320px))
}

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

.booking-sec .data .label {
    color: #647683;
    display: flex;
    align-items: center;
    gap: calc(4px + .0025*(100vw - 320px))
}

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

.booking-sec .data .value.location {
    font-weight: 400 !important;
    justify-content: end
}

[dir=rtl] .booking-sec .data .value.location {
    justify-content: start
}

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

.booking-sec .booking-sec-box .booking-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16px + .0025*(100vw - 320px))
}

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

.booking-sec .booking-sec-box .booking-list:has(>.no-data-found) {
    display: block
}

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

.booking-sec .booking-sec-box .booking-list .booking-box {
    padding: 12px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #eeeeee
}

body.dark .booking-sec .booking-sec-box .booking-list .booking-box {
    background-color: #252934;
    border-color: #454851
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-image {
    border-radius: 7px;
    overflow: hidden
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-image img {
    aspect-ratio: 74/25;
    object-fit: cover
}

@media (max-width: 575.98px) {
    .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-image img {
        aspect-ratio: 19/10
    }
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status {
    margin-top: 10px
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .status {
    margin-bottom: 10px
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li.data-title h4 {
    color: #ff4b4b;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center;
    gap: 6px
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li.data-title h4 span {
    font-size: calc(18px + (21 - 18) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27;
    line-height: 1.3;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    max-width: 75%;
    word-break: break-all
}

body.dark .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li.data-title h4 span {
    color: #fff
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li.data-title h5 {
    font-size: calc(18px + .00125*(100vw - 320px));
    font-weight: 600;
    color: var(--primary-color)
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .list-title {
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #647683
}

body.dark .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .list-title {
    color: #fff9
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li>span {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .man-list {
    display: flex;
    align-items: center
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .man-list li+li {
    margin-left: -10px
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .man-list li:hover img {
    transform: translateY(-3px)
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .man-list li img {
    transition: all .3s ease-in-out;
    width: 35px;
    height: 35px;
    border: 3px solid #ffffff;
    border-radius: 100%
}

body.dark .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .man-list li img {
    border-color: #252934fc
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box {
    display: flex;
    align-items: center
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box img {
    width: 32px;
    height: 32px;
    border-radius: 100%
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box h5 {
    margin-left: calc(4px + .00125*(100vw - 320px));
    font-size: calc(15px + .00125*(100vw - 320px))
}

body.dark .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box h5 {
    color: #fff
}

[dir=rtl] .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box h5 {
    margin-left: unset;
    margin-right: calc(4px + .00125*(100vw - 320px))
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box .rating {
    border-left: 1px solid #eeeeee;
    padding-left: calc(6px + .00125*(100vw - 320px));
    margin-left: calc(6px + .00125*(100vw - 320px));
    display: flex;
    align-items: center;
    gap: calc(2px + .00125*(100vw - 320px))
}

[dir=rtl] .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box .rating {
    border-left: unset;
    padding-left: unset;
    margin-left: unset;
    border-right: 1px solid #eeeeee;
    margin-right: calc(6px + .00125*(100vw - 320px));
    padding-right: calc(6px + .00125*(100vw - 320px))
}

body.dark .booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box .rating {
    border-color: #454851
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box .rating img {
    width: calc(14px + .00125*(100vw - 320px));
    height: calc(14px + .00125*(100vw - 320px));
    border-radius: unset
}

.booking-sec .booking-sec-box .booking-list .booking-box .booking-top-box .service-status .data li .provider-box .rating span {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1;
    font-weight: 500
}

.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: 14px;
    padding-top: 14px;
    border-top: 1px solid #eeeeee;
    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;
        gap: 0
    }
}

.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: 1.3;
    color: #171b27;
    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: 1.3;
    color: #171b27
}

.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: 1.3
}

.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: 575.98px) {
    .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: #f9fafa;
    border: none;
    box-shadow: none;
    min-width: calc(220px + (279 - 220) * ((100vw - 575px) / (1920 - 575)))
}

@media (max-width: 575.98px) {
    .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
}

.booking-sec .booking-sec-box~.pagination-main {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee
}

body.dark .booking-sec .booking-sec-box~.pagination-main {
    border-color: #454851
}

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

.left-sidebar-filter {
    position: sticky
}

@media (max-width: 1199.98px) {
    .left-sidebar-filter {
        position: fixed;
        top: 0;
        left: calc(-320px + (-380 - -320) * ((100vw - 320px) / (1200 - 320)));
        transition: all .3s ease-in-out;
        width: calc(310px + (350 - 310) * ((100vw - 320px) / (1200 - 320)));
        height: 100vh;
        background-color: #fff;
        z-index: 9;
        overflow: auto
    }
    [dir=rtl] .left-sidebar-filter {
        left: unset;
        right: calc(-320px + (-380 - -320) * ((100vw - 320px) / (1200 - 320)))
    }
    body.dark .left-sidebar-filter,
    body.dark .left-sidebar-filter .filter-title {
        background-color: #252934
    }
    .left-sidebar-filter.show {
        left: 0
    }
    [dir=rtl] .left-sidebar-filter.show {
        left: unset;
        right: 0
    }
}

.left-sidebar-filter .filter-title {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

body.dark .left-sidebar-filter .filter-title {
    border-color: #454851
}

body.dark .left-sidebar-filter .filter-title h4 {
    color: #fff
}

.left-sidebar-filter .filter-title h4 {
    font-weight: 600;
    font-size: calc(20px + (23 - 20) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3
}

.left-sidebar-filter .filter-title .close-filter {
    padding: 0;
    display: none;
    width: max-content;
    border: none
}

body.dark .left-sidebar-filter .filter-title .close-filter {
    color: #fff
}

@media (max-width: 1199.98px) {
    .left-sidebar-filter .filter-title {
        padding: calc(12px + (15 - 12) * ((100vw - 320px) / (1200 - 320))) calc(15px + (18 - 15) * ((100vw - 320px) / (1200 - 320)));
        margin-bottom: 18px;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f9fafa
    }
    .left-sidebar-filter .filter-title .close-filter {
        display: block
    }
    .left-sidebar-filter .filter-title .close-filter .feather {
        width: calc(22px + (24 - 22) * ((100vw - 320px) / (1200 - 320)));
        height: calc(22px + (24 - 22) * ((100vw - 320px) / (1200 - 320)));
        stroke-width: 2.3px
    }
}

.left-sidebar-filter .filter-title .filter-btn {
    padding: 7px;
    background-color: var(--primary-color);
    color: #fff;
    border: none
}

@media (max-width: 1199.98px) {
    .left-sidebar-filter .main-filter-box {
        padding: 0 calc(12px + (15 - 12) * ((100vw - 320px) / (1200 - 320))) calc(15px + (18 - 15) * ((100vw - 320px) / (1200 - 320)))
    }
}

.left-sidebar-filter .main-filter-box .filter-box+.filter-box {
    border-top: 1px solid #eeeeee;
    margin-top: calc(10px + .0025*(100vw - 320px));
    padding-top: calc(10px + .0025*(100vw - 320px))
}

body.dark .left-sidebar-filter .main-filter-box .filter-box+.filter-box {
    border-color: #454851
}

.left-sidebar-filter .main-filter-box .filter-box .filter-sub-title {
    margin-bottom: calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)))
}

.left-sidebar-filter .main-filter-box .filter-box .filter-sub-title h5 {
    font-size: calc(18px + .00125*(100vw - 320px));
    font-weight: 500
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .filter-sub-title h5 {
    color: #fff
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list {
    max-height: 193px;
    overflow: auto
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .filter-list::-webkit-scrollbar-track {
    background-color: #454851
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list::-webkit-scrollbar {
    width: 3px
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list::-webkit-scrollbar-track {
    background: #F9FAFA;
    border-radius: 3px
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list .form-check {
    gap: calc(8px + .0025*(100vw - 320px))
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list .form-check+.form-check {
    margin-top: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)))
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list .form-check .form-check-input:checked~.form-check-label {
    color: #171b27
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .filter-list .form-check .form-check-input:checked~.form-check-label {
    color: #fff
}

.left-sidebar-filter .main-filter-box .filter-box .filter-list .form-check .form-check-label {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    cursor: poRaleway;
    transition: all .25s ease-in-out
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .filter-list .form-check .form-check-label {
    color: #fff9
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper {
    padding-bottom: 8px
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .price-input {
    width: 100%;
    display: flex;
    margin: 0 0 calc(13px + (22 - 13) * ((100vw - 320px) / (1920 - 320)))
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .price-input .field {
    display: flex;
    width: 100%;
    align-items: center
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .price-input .field input {
    width: 100%;
    outline: none;
    font-size: calc(15px + .00125*(100vw - 320px));
    color: #171b27;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #eeeeee;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 8px
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .price-input .field input {
    background-color: #252934;
    border-color: #454851;
    color: #fff
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .price-input .separator {
    width: calc(80px + .0125*(100vw - 320px));
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper input[type=number]::-webkit-outer-spin-button,
.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .slider {
    height: calc(4px + (5 - 4) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    background-color: #f9fafa;
    border-radius: 5px
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .slider {
    background-color: #454851
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .slider .progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: 5px;
    background: var(--primary-color)
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .range-input {
    position: relative
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper .range-input input {
    position: absolute;
    width: 100%;
    height: calc(4px + (5 - 4) * ((100vw - 320px) / (1920 - 320)));
    top: calc(-4px + (-5 - -4) * ((100vw - 320px) / (1920 - 320)));
    background: none;
    poRaleway-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper input[type=range]::-webkit-slider-thumb {
    width: calc(13px + .0025*(100vw - 320px));
    height: calc(13px + .0025*(100vw - 320px));
    border-radius: 50%;
    background: var(--primary-color);
    poRaleway-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px #0000000d
}

.left-sidebar-filter .main-filter-box .filter-box .price-range-box .wrapper input[type=range]::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    poRaleway-events: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 0 6px #0000000d
}

.left-sidebar-filter .main-filter-box .filter-box .rating-list {
    display: flex;
    align-items: center;
    gap: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .left-sidebar-filter .main-filter-box .filter-box .rating-list span {
    color: #fff
}

.left-sidebar-filter .main-filter-box .filter-box .rating-list img {
    width: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    height: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.left-sidebar-filter .main-filter-box .filter-box .rating-list span {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1;
    color: #171b2799;
    margin-left: 6px;
    letter-spacing: .4px
}

[dir=rtl] .left-sidebar-filter .main-filter-box .filter-box .rating-list span {
    margin-left: unset;
    margin-right: 6px
}

.right-top-filter {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: calc(10px + .0075*(100vw - 320px));
    margin-bottom: calc(12px + .00625*(100vw - 320px))
}

body.dark .right-top-filter {
    border-color: #454851
}

.right-top-filter .product-filer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.right-top-filter .product-filer h5 {
    font-size: calc(17px + .00125*(100vw - 320px));
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: .3px
}

body.dark .right-top-filter .product-filer h5 {
    color: #fff
}

.right-top-filter .product-filer .filter-dropdown {
    display: flex;
    align-items: center;
    gap: 10px
}

.right-top-filter .product-filer .filter-dropdown .form-select {
    padding-right: 36px
}

[dir=rtl] .right-top-filter .product-filer .filter-dropdown .form-select {
    padding-left: 36px;
    padding-right: 12px;
    background-position: left .75rem center
}

body.dark .right-top-filter .product-filer .filter-dropdown .form-select {
    background-color: #252934;
    color: #fff
}

.right-top-filter .product-filer .filter-dropdown h5 {
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: unset;
    color: #647683;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.right-top-filter .recent-filter {
    display: flex;
    gap: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
    flex-wrap: wrap;
    margin-top: calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320)))
}

.right-top-filter .recent-filter h5 {
    font-size: calc(16px + .00125*(100vw - 320px));
    margin-top: calc(8px + .0025*(100vw - 320px));
    white-space: nowrap;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: .3px
}

body.dark .right-top-filter .recent-filter h5 {
    color: #fff
}

.right-top-filter .recent-filter .filter-list {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: calc(6px + .0025*(100vw - 320px))
}

.right-top-filter .recent-filter .filter-list li .btn {
    background-color: #f9fafa;
    border-radius: 100px;
    color: #171b27;
    border: 1px solid #eeeeee;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    padding: calc(8px + .00125*(100vw - 320px)) calc(11px + (16 - 11) * ((100vw - 320px) / (1920 - 320)))
}

.right-top-filter .recent-filter .filter-list li .btn:hover {
    background-color: transparent
}

body.dark .right-top-filter .recent-filter .filter-list li .btn {
    background-color: #252934;
    border-color: #454851;
    color: #fff
}

.right-top-filter .recent-filter .filter-list li .btn svg {
    width: calc(16px + .00125*(100vw - 320px));
    height: calc(16px + .00125*(100vw - 320px))
}

.right-top-filter .recent-filter .filter-list li .clear-btn {
    border: 0;
    border-color: transparent;
    background-color: transparent;
    text-decoration: underline;
    color: var(--primary-color)
}

body.dark .right-top-filter .recent-filter .filter-list li .clear-btn {
    border-color: transparent;
    background-color: transparent;
    color: var(--primary-color)
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    margin-top: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
    row-gap: 5px
}

.breadcrumb .breadcrumb-item {
    font-size: calc(16px + .00125*(100vw - 320px));
    color: #171b27;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: calc(6px + .0025*(100vw - 320px));
    line-height: 1
}

.breadcrumb .breadcrumb-item i {
    --Iconsax-Size: calc(16px + .00125*(100vw - 320px))
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: calc(6px + .00125*(100vw - 320px));
    gap: 0
}

[dir=rtl] .breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: unset;
    padding-right: calc(6px + .00125*(100vw - 320px))
}

.breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    color: #171b27;
    float: left;
    padding-right: calc(6px + .00125*(100vw - 320px))
}

[dir=rtl] .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    float: right;
    padding-right: unset;
    padding-left: calc(6px + .00125*(100vw - 320px))
}

.breadcrumb .breadcrumb-item.active {
    color: #171b27ab;
    font-weight: 500
}

.breadcrumb-section {
    background-color: #f9fafa;
    padding: calc(26px + .015*(100vw - 320px)) 0;
    position: relative;
    z-index: 0;
    overflow: hidden
}

body.dark .breadcrumb-section {
    background-color: #252934
}

body.dark .breadcrumb-section .breadcrumb-contain h2 {
    color: #fff
}

body.dark .breadcrumb-section .breadcrumb-contain .breadcrumb-icon .breadcrumb-item {
    color: #d1cfcf
}

body.dark .breadcrumb-section .breadcrumb-contain .breadcrumb-icon .breadcrumb-item:before {
    color: #d1cfcf
}

body.dark .breadcrumb-section .breadcrumb-contain .breadcrumb-icon svg {
    --Iconsax-Color: #d1cfcf
}

.breadcrumb-section .breadcrumb-contain {
    text-align: center
}

.breadcrumb-section .breadcrumb-contain h2 {
    font-size: calc(23px + (36 - 23) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    letter-spacing: .8px;
    color: #171b27;
    line-height: 1.2;
    text-transform: none;
    margin: 0 auto;
    position: relative
}

.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%;
    transition: all .2s ease-in-out;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center
}

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

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

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

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

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

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

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

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

.btn.btn-solid-gray {
    background-color: #f9fafa;
    color: #171b27
}

.btn.btn-dark-solid {
    background-color: #171b27;
    color: #fff
}

.btn.btn-dark-solid:hover {
    background-color: transparent;
    border-color: #171b27;
    color: #171b27
}

.btn:focus {
    box-shadow: none
}

.btn.disabled {
    background-color: #eee;
    color: #647683;
    font-weight: 500
}

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

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

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

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

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

.text-primary {
    color: #fe782e !important
}

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

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

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

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

.text-light {
    color: #647683 !important
}

.text-title {
    color: #171b27 !important
}

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

.primary-badge {
    color: #fff !important;
    background-color: #fe782e !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: #647683 !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: #171b27 !important
}

.warning-badge {
    color: #fff !important;
    background-color: #fdb448 !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: #647683 !important;
    background-color: #6476831a !important
}

.title-light-badge {
    color: #171b27 !important;
    background-color: #171b271a !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
}

.primary-light-badge {
    color: var(--primary-color) !important;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.primary-light-badge:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1
}

body.dark .dark-btn .sun-icon {
    display: block
}

body.dark .dark-btn .moon-icon,
.dark-btn .sun-icon {
    display: none
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color)
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
    box-shadow: none;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: transparent
}

.rangeMode .flatpickr-day {
    margin: 0
}

.flatpickr-day.selected.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.endRange,
.flatpickr-day.endRange.startRange {
    border-radius: 4px
}

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

body.dark .flatpickr-calendar {
    background: #252934;
    box-shadow: 1px 0 #454851, -1px 0 #454851, 0 1px #454851, 0 -1px #454851, 0 3px 13px #00000014
}

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

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

.flatpickr-calendar .flatpickr-innerContainer {
    font-size: 14px;
    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: repeat(7, 1fr)
}

.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekdaycontainer .flatpickr-weekday {
    color: var(--primary-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 {
    width: 37px;
    height: 35px;
    line-height: 1.3;
    color: #171b27;
    background-color: #f9fafa;
    max-width: unset;
    font-size: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #eee
}

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

body.dark .flatpickr-calendar .flatpickr-day {
    background-color: #171b27;
    color: #fffc;
    border-color: #454851
}

.flatpickr-calendar .flatpickr-day:hover {
    background-color: #fe782e1a;
    color: var(--primary-color);
    font-weight: 600
}

body.dark .flatpickr-calendar .flatpickr-day:hover {
    background-color: #fe782e1a;
    color: var(--primary-color);
    border-color: transparent
}

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

body.dark .flatpickr-calendar .flatpickr-day.today {
    background-color: var(--primary-color);
    color: #fff
}

.flatpickr-calendar .flatpickr-day.selected,
body.dark .flatpickr-calendar .flatpickr-day.selected {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color)
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay {
    color: #647683;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    z-index: 0;
    overflow: hidden
}

body.dark .flatpickr-calendar .flatpickr-day.prevMonthDay,
body.dark .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
body.dark .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
body.dark .flatpickr-calendar .flatpickr-day.notAllowed,
body.dark .flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay,
body.dark .flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay {
    color: #647683;
    border-color: #454851cc
}

.flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover:hover,
.flatpickr-calendar .flatpickr-day.notAllowed:hover,
.flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay:hover {
    background-color: #f9fafa;
    font-weight: 400
}

body.dark .flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
body.dark .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
body.dark .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover:hover,
body.dark .flatpickr-calendar .flatpickr-day.notAllowed:hover,
body.dark .flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay:hover,
body.dark .flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay:hover {
    background-color: #171b27;
    border-color: #454851cc;
    color: #647683
}

.flatpickr-calendar .flatpickr-day.prevMonthDay:before,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:before,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover:before,
.flatpickr-calendar .flatpickr-day.notAllowed:before,
.flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay:before,
.flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 50%;
    border-top: 1px solid rgba(255, 75, 75, .15);
    transform: translate(-50%, -50%) rotate(225deg) scale(1.5)
}

.flatpickr-calendar .flatpickr-day.inRange {
    background-color: #fff;
    box-shadow: none;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.flatpickr-calendar .flatpickr-day.inRange:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .3;
    z-index: -1
}

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

.flatpickr-calendar .dayContainer {
    width: unset;
    min-width: unset;
    max-width: unset;
    gap: 8px;
    padding: 0;
    grid-template-columns: repeat(7, 1fr);
    display: grid
}

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

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

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    color: #171b27
}

.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: #f9fafa;
    border-radius: 100%;
    padding: 8px;
    width: 30px;
    height: 30px;
    top: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

body.dark .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
body.dark .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    background-color: #171b27;
    border-color: #454851cc;
    color: #647683;
    fill: #ffffffe6
}

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

body.dark .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
body.dark .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff
}

.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: #f9fafa;
    border-radius: 6px;
    font-size: calc(14px + .00125*(100vw - 320px));
    padding: 9px 12px;
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset
}

body.dark .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months {
    background-color: #171b27;
    color: #fff
}

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

body.dark .flatpickr-calendar .flatpickr-months .numInputWrapper {
    background-color: #171b27;
    color: #fff
}

.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;
    border-radius: 12px;
    z-index: 0;
    width: 30%;
    overflow: hidden;
    background-color: transparent
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper:after {
    content: "";
    position: absolute;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--primary-color);
    opacity: .8;
    z-index: -1
}

.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(--primary-color);
    border-width: 5px;
    top: unset;
    bottom: 13%
}

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

.flatpickr-calendar.hasTime .flatpickr-time input {
    text-align: left;
    padding-left: 20px;
    font-size: 18px;
    color: var(--primary-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(--primary-color);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm {
    height: 100%;
    position: relative;
    z-index: 0;
    width: 29%;
    font-size: 18px;
    background-color: transparent;
    overflow: hidden;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px
}

.flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm:after {
    content: "";
    position: absolute;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--primary-color);
    opacity: .8;
    z-index: -1
}

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

.main-inline-calender.input-group .form-control {
    width: 100%;
    border-radius: 6px !important;
    color: var(--primary-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: 575.98px) {
    .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: 5px
}

@media (max-width: 575.98px) {
    .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: 4px;
    width: 100%;
    color: #171b27;
    border-color: transparent
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.prevMonthDay {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    opacity: .6
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.prevMonthDay:hover {
    color: #171b27;
    border-color: transparent
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.nextMonthDay:hover {
    background-color: #fe782e1a
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.nextMonthDay:before {
    content: none
}

.main-inline-calender.input-group .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day:hover {
    color: var(--primary-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: 575.98px) {
    .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: 575.98px) {
    .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
    }
}

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

.card-gray {
    background-color: #f9fafa
}

body.dark .card-gray {
    background-color: #252934
}

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

.card .card-img img {
    aspect-ratio: 37/20;
    object-fit: cover
}

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

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

.card.gray-card {
    background-color: #f9fafa;
    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
}

.mobile-menu-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (600 - 320))) calc(15px + (48 - 15) * ((100vw - 320px) / (600 - 320)));
    z-index: 3;
    background-color: #f6f6f6;
    overflow: hidden;
    border-radius: calc(14px + (26 - 14) * ((100vw - 320px) / (600 - 320))) calc(14px + (26 - 14) * ((100vw - 320px) / (600 - 320))) 0 0;
    box-shadow: 0 -4px 16px #22222214
}

@media (min-width: 600.98px) {
    .mobile-menu-box {
        display: none
    }
}

body.dark .mobile-menu-box {
    background-color: #252934
}

body.dark .mobile-menu-box li a {
    color: #fff9
}

.mobile-menu-box .menu-list {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mobile-menu-box .menu-list li.active a {
    color: var(--primary-color)
}

.mobile-menu-box .menu-list li.active a i {
    --Iconsax-Color: var(--primary-color)
}

.mobile-menu-box .menu-list li a {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (600 - 320)));
    color: #808b97
}

.mobile-menu-box .menu-list li a i {
    --Iconsax-Size: calc(20px + (22 - 20) * ((100vw - 320px) / (600 - 320)));
    --Iconsax-Color: #808B97
}

.cart {
    background-color: #f9fafa
}

body.dark .cart {
    background-color: #252934
}

body.dark .cart .cart-header {
    border-color: #454851
}

body.dark .cart .cart-header h3 {
    color: #fff
}

body.dark .cart .cart-header span {
    color: #fff9
}

body.dark .cart .cart-body .no-cart-found h3 {
    color: #fff
}

body.dark .cart .cart-body .no-cart-found .text-right {
    color: #fff9 !important
}

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

.cart .cart-header span {
    color: #647683;
    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 #eeeeee;
    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 #eeeeee;
    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: #171b27;
    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 #eeeeee
}

@media (max-width: 575.98px) {
    .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: 991.98px) {
    .cart .cart-body .cart-item .cart-detail .selected-service .selected-img {
        width: 120px;
        height: 120px;
        object-fit: cover
    }
}

@media (max-width: 767.98px) {
    .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: 575.98px) {
    .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: 575.98px) {
    .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 {
    color: #171b27
}

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

.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 #eeeeee;
    padding: 0 10px;
    font-size: 13px
}

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

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

.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: #647683
}

.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 .selected-service-2 {
    display: grid;
    gap: 16px
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .selected-img {
    aspect-ratio: 258/100;
    object-fit: cover;
    border-radius: 10px
}

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

@media (max-width: 575.98px) {
    .cart .cart-body .cart-item .cart-detail .selected-service-2 .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-2 .service-info {
    width: 100%
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info h5 {
    color: #171b27
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info p {
    line-height: 1;
    font-size: 16px;
    color: #647683
}

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

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .date li {
    gap: 4px;
    align-items: center;
    display: flex
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .date li+li {
    border-left: 1px solid #eeeeee;
    margin-left: 10px;
    padding-left: 10px
}

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

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

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

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

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .title-price-box {
    gap: 4px;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    display: flex
}

@media (min-width: 1400px) {
    .cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .title-price-box {
        align-items: center;
        flex-direction: row
    }
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .title-price-box h3 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    max-width: 300px
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .title-price-box .price {
    font-weight: 600;
    line-height: 1.3;
    font-size: 19px
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .date-time {
    margin-top: 14px
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .date-time li small {
    font-weight: 400
}

.cart .cart-body .cart-item .cart-detail .selected-service-2 .service-info .date-time li small span {
    font-weight: 500;
    color: #171b27
}

.cart .cart-body .cart-item .cart-detail i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #222
}

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

[dir=rtl] .cart .cart-body .form-control {
    text-align: right !important;
    padding: 10px 16px
}

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

.cart .cart-body .input-group label.error {
    position: absolute;
    left: 16px;
    bottom: -20px
}

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

.cart .cart-body .pattern-input:hover,
.cart .cart-body .pattern-input:focus {
    background-color: #fe782e1a;
    color: var(--primary-color)
}

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

.pattern-btn {
    background-color: #fff;
    border: 2px dashed #eeeeee;
    color: var(--primary-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 #eeeeee;
    border-right: none;
    margin-left: unset !important;
    margin-right: 0 !important
}

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

body.dark .pattern-btn:after,
body.dark .pattern-btn:before {
    background-color: #252934
}

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

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

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

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

.form-control.pattern-input {
    border: 1px dashed var(--primary-color) !important;
    color: #fff;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    background-color: transparent;
    display: flex;
    align-items: center
}

.form-control.pattern-input span {
    overflow: hidden;
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1
}

.form-control.pattern-input span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.form-control.pattern-input:hover,
.form-control.pattern-input:focus {
    background-color: transparent;
    color: var(--primary-color)
}

.pattern-btn-1 {
    border: 1px dashed var(--primary-color);
    color: var(--primary-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;
    background-color: transparent;
    display: flex;
    align-items: center
}

.pattern-btn-1 span {
    overflow: hidden;
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1
}

.pattern-btn-1 span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

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

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

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

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

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

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

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

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

.view .value {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: var(--primary-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(--primary-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 #eeeeee;
    border-radius: 8px;
    padding: calc(16px + .0025*(100vw - 320px));
    display: flex;
    flex-direction: column;
    gap: 11px
}

body.dark .bill-summary .charge,
body.dark .bill-summary .total,
body.dark .payment-summary .charge,
body.dark .payment-summary .total {
    background-color: #171b27;
    border: 1px solid #454851
}

@media (max-width: 575.98px) {
    .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: calc(15px + .00125*(100vw - 320px))
}

.bill-summary .charge span,
.bill-summary .total span,
.payment-summary .charge span,
.payment-summary .total span {
    font-size: calc(15px + .00125*(100vw - 320px))
}

.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: 575.98px) {
    .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: #647683;
    display: flex;
    align-items: center;
    gap: 6px
}

body.dark .bill-summary .charge p,
body.dark .payment-summary .charge p {
    color: #fff9
}

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

body.dark .bill-summary .charge p span,
body.dark .payment-summary .charge p span {
    color: #fff
}

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

body.dark .bill-summary .charge span,
body.dark .payment-summary .charge span {
    color: #fff
}

.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: #171b27;
    font-weight: 500;
    font-size: calc(16px + .0025*(100vw - 320px))
}

body.dark .bill-summary .total p,
body.dark .payment-summary .total p {
    color: #fff
}

.bill-summary .total span,
.payment-summary .total span {
    color: var(--primary-color);
    font-weight: 700;
    font-size: calc(18px + .0025*(100vw - 320px))
}

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

body.dark .bill-summary .total:after,
body.dark .bill-summary .total:before,
body.dark .payment-summary .total:after,
body.dark .payment-summary .total:before {
    background-color: #252934
}

[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: #eee;
    border-top-color: #eee;
    border-bottom-color: #eee;
    right: -8px
}

body.dark .bill-summary .total:after,
body.dark .payment-summary .total:after {
    border-left-color: #454851;
    border-top-color: #454851;
    border-bottom-color: #454851
}

[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: #eee;
    border-top-color: #eee;
    border-bottom-color: #eee;
    left: -8px
}

body.dark .bill-summary .total:before,
body.dark .payment-summary .total:before {
    border-right-color: #454851;
    border-top-color: #454851;
    border-bottom-color: #454851
}

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

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

body.dark .bill-summary .charge {
    background-color: #171b27;
    border: 1px solid #454851
}

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

.delete {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #FF4B4B;
    background-color: #ff4b4b1a;
    border-radius: 100%;
    width: 40px;
    height: 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: var(--primary-color)
}

.coupon-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: calc(100vh - 171px);
    max-height: calc(100vh - 171px);
    overflow: auto;
    padding-right: 10px
}

[dir=rtl] .coupon-list {
    padding-right: unset;
    padding-left: 10px
}

.coupon-item {
    border: 1px solid #eeeeee;
    border-radius: 10px
}

.coupon-item .coupon-content {
    position: relative;
    padding: 20px;
    text-align: left
}

.coupon-item .coupon-content h5 {
    font-weight: 400;
    margin-bottom: 8px
}

.coupon-item .coupon-content p {
    color: #647683 !important;
    line-height: 1.4;
    margin: 1px 0 0;
    height: 48px
}

.coupon-item .coupon-content p span {
    font-weight: 600;
    color: #171b27
}

.coupon-item .coupon-content .percent {
    line-height: 1.3;
    font-size: 22px;
    color: var(--primary-color);
    font-weight: 600
}

.coupon-item .circle {
    background: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px
}

.coupon-item .circle span {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff
}

.coupon-item .circle span.left {
    left: -10px
}

.coupon-item .circle span.left:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    padding: 2px;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, #eeeeee 50%, rgba(238, 238, 238, 0) 50%);
    -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.coupon-item .circle span.right {
    right: -10px
}

.coupon-item .circle span.right:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    padding: 2px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #eeeeee 50%, rgba(238, 238, 238, 0) 50%);
    -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.coupon-item .coupon-footer {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    align-items: center;
    padding: 14px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-top: 1px solid #eeeeee
}

.coupon-item .coupon-footer:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1
}

.coupon-item .coupon-footer p {
    margin: 0;
    font-size: 14px !important;
    color: #647683 !important
}

.coupon-item .coupon-footer p span {
    color: #171b27;
    font-weight: 500;
    font-size: 16px;
    display: block
}

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

.coupon-item .coupon-footer .use-code:hover {
    text-decoration: underline
}

.coupon-item .coupon-footer .use-code i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: var(--primary-color)
}

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

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

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

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

.payment .payment-header .back-icon {
    --Iconsax-Size: calc(16px + .00125*(100vw - 320px));
    --Iconsax-Color: #222;
    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: 767.98px) {
    .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: 0 calc(16px + .0025*(100vw - 320px));
    margin-block: calc(16px + .0025*(100vw - 320px));
    overflow: auto;
    height: 450px
}

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

.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: #171b27
}

.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(--primary-color)
}

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

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

.payment .payment-body .payment-options .payment-option .payment-title .payment-img {
    width: calc(80px + .0125*(100vw - 320px));
    height: calc(80px + .0125*(100vw - 320px));
    background-color: #f9fafa;
    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: calc(30px + .00625*(100vw - 320px));
    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: #fe782e1a
}

.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(--primary-color);
    display: block
}

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

.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
}

body.dark .payment .wallet-body {
    background-color: #252934
}

body.dark .payment .wallet-body .select-date h4 {
    color: #fff
}

body.dark .payment .wallet-body .date-pick label {
    color: #fff9
}

body.dark .payment .wallet-body .form-control {
    background-color: #171b27;
    border-color: #454851;
    color: #fff9
}

.payment .wallet-body .total-balance {
    background-color: var(--primary-color);
    background-image: url(https://rythmevie.comm/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 #eeeeee;
    padding: 16px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    box-shadow: 0 4px 4px #171b270f
}

.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: #647683;
    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: 767.98px) {
    .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: #171b27;
    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: 767.98px) {
    .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 #eeeeee;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    background-color: #f9fafa;
    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;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #171b27;
    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: #647683;
    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: #647683;
    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 {
    width: calc(16px + .0025*(100vw - 320px)) !important;
    height: 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 #eeeeee;
    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 #eeeeee
}

.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 #eeeeee
}

[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 #eeeeee;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    background-color: #f9fafa
}

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

.dropdown .onhover-show-div {
    transition: all .3s ease-in-out;
    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: poRaleway;
    transition: all .3s
}

.dropdown .onhover-show-div li:hover a {
    color: var(--primary-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: #171b27;
    border: none;
    padding: 12px;
    gap: 12px;
    width: 100%;
    height: calc(38px + .00375*(100vw - 320px));
    border-radius: 8px;
    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: poRaleway
}

.dropdown.select-dropdown-div .select-show-div .select-show-div-item span {
    display: flex;
    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: poRaleway;
    transition: all .3s
}

.select-dropdown .onhover-show-div li:hover {
    color: var(--primary-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 {
    align-items: center;
    gap: 16px
}

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

.basic-wizard .stepper-horizontal {
    padding: 20px;
    width: 100%;
    margin: 0 auto 24px;
    justify-content: center;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #f9fafa
}

body.dark .basic-wizard .stepper-horizontal {
    background-color: #252934
}

body.dark .basic-wizard .stepper-horizontal .step-circle {
    background-color: #171b27;
    border-color: #454545
}

body.dark .basic-wizard .stepper-horizontal .stepper-two span,
body.dark .basic-wizard .stepper-horizontal .stepper-two .step-title {
    color: #fff9
}

.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 .step-title {
    font-size: calc(16px + .00125*(100vw - 320px));
    white-space: nowrap;
    color: #647683
}

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

.basic-wizard .stepper-horizontal .step.stepper .step-title {
    color: var(--primary-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: 767.98px) {
    .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: 767.98px) {
    .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 #eeeeee;
    color: #647683
}

.basic-wizard .stepper-horizontal .step.done .step-circle {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-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://rythmevie.comm/build/assets/tick-e66e77c8.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(--primary-color)
}

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

.basic-wizard .stepper-horizontal .step.done~.step .step-title {
    color: var(--primary-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 #647683;
    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: #171b27
}

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

body.dark .service-booking .delivery-location {
    background-color: #171b27 !important;
    border-color: #454851 !important
}

body.dark .service-booking .delivery-location .delivery-name h4 {
    color: #fff
}

body.dark .service-booking .delivery-location .delivery-name span {
    color: #fff9
}

body.dark .service-booking .delivery-location .address label {
    color: #fff
}

body.dark .service-booking .delivery-location .address p {
    color: #fff9
}

body.dark .service-booking .delivery-location .address-bottom-box {
    background-color: #171b27 !important
}

body.dark .service-booking .delivery-location .address-bottom-box .btn-outline {
    background-color: #171b27 !important;
    border-color: #454851
}

body.dark .service-booking .delivery-location .address-bottom-box .btn-outline:hover {
    border: 1px solid transparent;
    background-color: var(--primary-color) !important
}

.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 #eeeeee
}

@media (max-width: 575.98px) {
    .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 img {
    height: 24px
}

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

.service-booking .delivery-location .location-header .active-icon {
    border: 1px solid var(--primary-color);
    border-radius: 100%;
    width: calc(42px + .005*(100vw - 320px));
    height: 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(--primary-color);
    border: 1px solid #ffffff;
    padding: calc(8px + .00125*(100vw - 320px));
    border-radius: 100%;
    width: calc(38px + .0025*(100vw - 320px));
    height: 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));
    line-height: 1.3;
    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: 2px;
    color: #647683;
    font-size: calc(14px + .00125*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .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(--primary-color)
}

.service-booking .delivery-location .address-bottom-box .btn-fill:hover {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}

.service-booking .delivery-location .address-bottom-box .btn-outline {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent
}

.service-booking .delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--primary-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: poRaleway
}

[dir=rtl] .service-booking .delivery-location .address-bottom-box .radio {
    left: unset;
    right: 0
}

.service-booking .delivery-location .radio:checked~button {
    background-color: var(--primary-color);
    color: #fff
}

.service-booking input[type=radio]:checked~.delivery-location .btn-outline {
    background-color: var(--primary-color);
    color: #fff
}

.service-booking .add-location {
    color: var(--primary-color);
    background-color: transparent;
    border: none;
    cursor: poRaleway;
    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))
}

body.dark .service-booking .booking-data .date-time-picket-sec {
    background-color: #171b27
}

.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
}

body.dark .service-booking .booking-data .select-option {
    background-color: #171b27
}

body.dark .service-booking .booking-data .select-option .form-check label {
    color: #fff9
}

.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: #171b27e6
}

.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: #f9fafa;
    border: none;
    box-shadow: none
}

@media (max-width: 480px) {
    .service-booking .booking-data .servicemen-list-item {
        min-width: 188px;
        width: auto
    }
}

.service-booking .booking-data .note {
    margin-block: 16px
}

.activity-dot {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    outline: 1px solid var(--primary-color);
    position: relative;
    z-index: 0
}

.activity-dot:after {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    width: 8px;
    height: 8px;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    padding-top: 23px
}

.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: 11px 26px;
    font-size: 16px;
    font-weight: 500
}

@media (max-width: 575.98px) {
    .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 #eeeeee;
    padding: calc(16px + .0025*(100vw - 320px))
}

body.dark .date-time-picket-sec {
    background-color: #252934;
    border-color: #454851
}

.date-time-picker {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 767.98px) {
    .date-time-picker {
        flex-wrap: wrap
    }
}

.date-time-picker input {
    color: #171b27
}

.input-icon {
    position: absolute;
    top: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    left: calc(12px + .0025*(100vw - 320px));
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97
}

[dir=rtl] .input-icon {
    left: unset;
    right: calc(12px + .0025*(100vw - 320px))
}

body.dark .input-icon {
    --Iconsax-Color: rgba(255, 255, 255, .6)
}

.edit-option {
    background-color: unset;
    border: none;
    padding: 0;
    color: var(--primary-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 #eeeeee;
    background-color: #f9fafa;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27;
    padding: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320))) 16px;
    width: 100%;
    border-radius: 6px
}

body.dark .form-control {
    background-color: #171b27;
    border-color: #454851;
    color: #fff
}

body.dark .form-control::placeholder {
    color: #fff9
}

.form-control::placeholder {
    color: #647683
}

.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: #f9fafa;
    color: #171b27;
    box-shadow: none;
    border: 1px solid #eeeeee
}

.form-control.form-control-gray {
    background-color: #f9fafa;
    color: #171b27
}

.form-control.form-control-gray:focus,
.form-control.form-control-gray:hover {
    background-color: #f9fafa;
    color: #171b27;
    box-shadow: none
}

.form-control.form-control-gray ::placeholder {
    color: #eee
}

.form-control.form-control-white {
    background-color: #fff;
    color: #171b27;
    border-radius: 8px
}

body.dark .form-control.form-control-white {
    background-color: #171b27;
    border-color: #454851;
    color: #fff
}

.form-control.form-control-white:focus,
.form-control.form-control-white:hover {
    background-color: #fff;
    color: #171b27;
    box-shadow: none
}

body.dark .form-control.form-control-white:focus,
body.dark .form-control.form-control-white:hover {
    background-color: #171b27;
    border-color: #454851;
    color: #fff
}

.form-control.form-control-white ::placeholder {
    color: #eee
}

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: calc(14px + .00625*(100vw - 320px))
}

.form-group:last-child {
    margin-bottom: 0
}

.form-group label {
    font-size: calc(14px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 6px;
    position: relative;
    color: #171b27c7
}

body.dark .form-group label {
    color: #fff
}

.form-check {
    padding: 0;
    min-height: unset;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0
}

.form-check .form-check-input,
.form-check .form-radio-input {
    cursor: poRaleway;
    position: relative;
    min-width: calc(18px + .00125*(100vw - 320px));
    height: calc(18px + .00125*(100vw - 320px));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    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: 6px;
    z-index: 1;
    width: calc(10px + .00125*(100vw - 320px));
    height: 5px;
    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: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    transition: all .25s ease-in-out;
    background: #ffffff;
    border: 2px solid #eeeeee;
    border-radius: 4px;
    cursor: poRaleway
}

body.dark .form-check .form-check-input:after,
body.dark .form-check .form-radio-input:after {
    background-color: #252934;
    border-color: #454851
}

.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(--primary-color);
    border-color: var(--primary-color)
}

body.dark .form-check .form-check-input:checked:after,
body.dark .form-check .form-radio-input:checked:after {
    background-color: var(--primary-color);
    border-color: var(--primary-color)
}

.form-check .form-radio-input {
    margin: 0;
    padding: 0
}

.form-check .form-radio-input:checked:before {
    transform: scale(1) translate(-50%, -50%)
}

.form-check .form-radio-input:checked:after {
    border-color: transparent;
    opacity: .12
}

.form-check .form-radio-input:after {
    border-radius: 100%;
    opacity: .12
}

.form-check .form-radio-input:before {
    border: none;
    background-color: var(--primary-color);
    border-radius: 100%;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0)
}

.form-check .form-radio-input~label {
    color: #647683
}

.form-check .form-radio-input:checked:after {
    border: 6px solid var(--primary-color)
}

.form-check .form-radio-input:checked~label {
    font-weight: 500;
    color: #171b27
}

.form-check .form-radio-input.solid:checked:after {
    border: 1px solid var(--primary-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
}

body.dark .login-main .login-card .login-detail .phone-detail {
    background-color: transparent
}

.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: #f9fafa;
    border: none;
    color: #171b27;
    font-size: 16px;
    padding: 8px 70px 8px 12px;
    border-radius: 6px
}

body.dark .form-select {
    background-image: url(https://rythmevie.comm/build/assets/white-arrow-e93ff0b8.svg)
}

.form-select:focus {
    box-shadow: none
}

.form-select.form-select-white {
    background-color: #fff;
    color: #647683;
    border-radius: 8px;
    padding: 10px 46px
}

.form-select.form-select-white:focus,
.form-select.form-select-white:hover {
    background-color: #fff;
    color: #647683;
    box-shadow: none
}

.input-group .form-control {
    padding: 10px calc(12px + .0025*(100vw - 320px)) 10px calc(38px + .005*(100vw - 320px))
}

[dir=rtl] .input-group .form-control {
    padding: 10px calc(38px + .005*(100vw - 320px)) 10px calc(12px + .0025*(100vw - 320px))
}

.input-group.phone-field {
    gap: 10px
}

.input-group.phone-field .form-control {
    padding: 10px 16px
}

.input-group.phone-field .contact-btn {
    border-radius: 8px
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback).phone-detail {
    margin-left: unset
}

.input-group.phone-detail .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: unset
}

.input-group.phone-detail .form-control {
    padding: 10px 16px;
    border: none
}

.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: #fff
}

.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: 991.98px) {
    .search-form {
        width: 70%;
        padding: 4px
    }
}

@media (max-width: 575.98px) {
    .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-color: #8200FF;
    padding-bottom: 38px;
    padding-top: 100px;
    z-index: 0
}

body.dark .home-section {
    background-color: #252934
}

[dir=rtl] .home-section {
    height: auto
}

@media (max-width: 1199px) {
    .home-section {
        height: auto
    }
}

.home-section .home-icon {
    position: absolute;
    transform: scaleY(-1);
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: .012
}

.home-section .home-slider {
    margin-top: calc(34px + .02875*(100vw - 320px))
}

.home-section .home-slider .service-slider:has(.swiper-wrapper:empty) {
    display: none;
    height: 0
}

.home-section .home-slider .service-slider .swiper-wrapper {
    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: 991.98px) {
    .home-section .home-slider .service-slider .swiper-wrapper {
        height: 332px
    }
}

@media (max-width: 575.98px) {
    .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
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card {
    height: 100%;
    border-radius: 12px;
    display: flex;
    flex-direction: column-reverse;
    gap: 9px;
    overflow: hidden;
    position: relative
}

.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 img {
    border-radius: 12px;
    object-fit: cover;
    aspect-ratio: 23/25
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .service-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 18px;
    background: linear-gradient(0deg, #171B27 21%, rgba(23, 27, 39, 0) 100%);
    color: #fff;
    margin: 0;
    padding: 50px 10px 8px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .service-content span {
    text-align: center;
    position: relative;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.home-section .home-contain {
    padding-top: calc(36px + (73 - 36) * ((100vw - 320px) / (1920 - 320)));
    text-align: center;
    margin: 0 auto
}

.home-section .home-contain h1 {
    font-size: calc(30px + .02*(100vw - 320px));
    line-height: 1.2;
    width: 66%;
    margin: auto;
    font-weight: 600;
    text-transform: none;
    background: linear-gradient(to right, #07EF2E 0%, #fff 50%, #07EF2E 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 5.3s linear infinite
}

@media (max-width: 945px) {
    .home-section .home-contain h1 {
        width: 87%
    }
}

@media (max-width: 586.98px) {
    .home-section .home-contain h1 {
        width: 100%
    }
}

.home-section .home-contain p {
    color: #ffffff;
    font-size: calc(16px + .0025*(100vw - 320px));
    padding-top: 6px;
    width: 68%;
    line-height: 1.7;
    margin: 0 auto
}

body.dark .home-section .home-contain p {
    color: #fffc
}

@media (max-width: 1660px) {
    .home-section .home-contain p {
        width: 75%
    }
}

@media (max-width: 1450px) {
    .home-section .home-contain p {
        width: 90%
    }
}

@media (max-width: 1150px) {
    .home-section .home-contain p {
        width: 100%
    }
}

.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)));
    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: 991.98px) {
    .home-section .home-contain .home-animation .shape {
        width: calc(237px + (530 - 237) * ((100vw - 320px) / (1920 - 320)));
        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: 991.98px) {
    .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
    }
}

.no-data-found {
    padding: calc(38px + .02*(100vw - 320px));
    text-align: center;
    background-color: #f9fafa;
    width: 100%;
    border-radius: 6px
}

body.dark .no-data-found {
    background-color: #252934
}

.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 #eeeeee;
    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: #eeeeee;
    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 #eeeeee
}

.invoice-box table tr.item.last td {
    border-bottom: none
}

.invoice-box table tr.total td:nth-child(2) {
    border-top: 2px solid #eeeeee;
    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: #ffffff;
    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 {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    margin: 0
}

.page-loader .page-loader-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 12px
}

.modal {
    margin: 0
}

.modal.fade .modal-dialog {
    transform: scale(.9)
}

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal .modal-dialog .modal-content {
    border-radius: calc(8px + .0025*(100vw - 320px));
    border: none
}

body.dark .modal .modal-dialog .modal-content {
    background-color: #252934
}

body.dark .modal .modal-dialog .modal-content .modal-body .add-money label,
body.dark .modal .modal-dialog .modal-content .modal-body h3 {
    color: #fff
}

body.dark .modal .modal-dialog .modal-content .modal-body p {
    color: #fff9
}

.modal .modal-dialog .modal-content .modal-header {
    padding: calc(16px + .0025*(100vw - 320px)) calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320))) calc(16px + .0025*(100vw - 320px));
    border-bottom: 1px solid #eeeeee;
    margin-bottom: calc(16px + .0025*(100vw - 320px))
}

body.dark .modal .modal-dialog .modal-content .modal-header {
    border-color: #454851
}

body.dark .modal .modal-dialog .modal-content .modal-header .modal-title {
    color: #fff
}

.modal .modal-dialog .modal-content .modal-header .modal-title {
    font-size: calc(20px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    text-transform: capitalize
}

.modal .modal-dialog .modal-content .modal-header .btn-close {
    opacity: 1;
    padding: 0;
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    background: none
}

[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 .feather {
    color: #171b27cc;
    stroke-width: 2.3px;
    width: calc(20px + .0025*(100vw - 320px));
    height: calc(20px + .0025*(100vw - 320px))
}

body.dark .modal .modal-dialog .modal-content .modal-header .btn-close .feather {
    color: #fff
}

.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 + (24 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.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: #f9fafa;
    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: #f9fafa;
    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: #171b27;
    margin-bottom: 6px
}

.modal .modal-dialog .modal-content .modal-body p {
    font-size: 16px;
    line-height: 1.5;
    color: #647683
}

.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: 0 calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320))) 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 .modal-dialog .modal-content .modal-footer>* {
    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: #f9fafa;
    color: #171b27
}

body.dark .modal.location-detected-modal .modal-body .location-search {
    background-color: #171b27;
    color: #fff
}

.modal.location-detected-modal .modal-body .location-loader[style="display: block;"],
.modal.location-detected-modal .modal-body .location-loader[style=""] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f9fafaa6;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px
}

body.dark .modal.location-detected-modal .modal-body .location-loader[style="display: block;"],
body.dark .modal.location-detected-modal .modal-body .location-loader[style=""] {
    background-color: #252934a6
}

.modal.location-detected-modal .modal-body .spinner-border {
    display: block;
    margin: 0 auto;
    width: 26px !important;
    height: 26px !important
}

.modal.location-detected-modal .modal-body .location-list {
    margin-top: calc(16px + .0025*(100vw - 320px))
}

.modal.location-detected-modal .modal-body .location-list .location {
    cursor: poRaleway;
    transition: all .3s;
    display: flex;
    align-items: start;
    justify-content: start;
    color: #fff9;
    background-color: transparent;
    gap: 8px;
    font-size: 16px
}

.modal.location-detected-modal .modal-body .location-list .location+li {
    border-top: 1px solid #eeeeee;
    padding-top: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
    margin-top: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .modal.location-detected-modal .modal-body .location-list .location+li {
    border-color: #454851
}

.modal.location-detected-modal .modal-body .location-list .location span.no-address {
    width: 100%;
    height: 127px;
    display: grid;
    place-content: center;
    background-color: #f9fafa;
    font-size: 18px;
    font-weight: 500;
    color: #171b27;
    border-radius: 10px
}

body.dark .modal.location-detected-modal .modal-body .location-list .location span.no-address {
    background-color: #323640;
    color: #fffc
}

.modal.location-detected-modal .modal-body .location-list .location>div h5 {
    color: #171b27;
    font-size: calc(16px + .00125*(100vw - 320px))
}

body.dark .modal.location-detected-modal .modal-body .location-list .location>div h5 {
    color: #fff
}

.modal.location-detected-modal .modal-body .location-list .location>div h6 {
    color: #171b2780;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin-top: calc(2px + .00125*(100vw - 320px))
}

body.dark .modal.location-detected-modal .modal-body .location-list .location>div h6 {
    color: #ffffff80
}

.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: #222222 !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: #222
}

.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: #f9fafa;
    border-radius: 12px;
    padding: 12px 16px
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail h6 {
    color: #647683
}

.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: 14px;
    border-radius: 8px;
    background-color: #f9fafa;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: calc(14px + .00125*(100vw - 320px))
}

body.dark .modal.book-service .modal-dialog .modal-content .modal-body .service {
    background-color: #171b27
}

body.dark .modal.book-service .modal-dialog .modal-content .modal-body .service .book-service-title h3 {
    color: #fff
}

@media (max-width: 575.98px) {
    .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: 575.98px) {
    .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: #171b27;
    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: #f9fafa;
    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(--primary-color)
}

.modal.book-service .modal-dialog .modal-content .modal-body .service-title {
    color: #171b27;
    font-size: 16px;
    margin-top: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
    font-weight: 500
}

body.dark .modal.book-service .modal-dialog .modal-content .modal-body .service-title {
    color: #fff
}

.modal.book-service .modal-dialog .modal-content .modal-body .book-service-title {
    display: block;
    margin: 0;
    width: calc(100% - 126px)
}

@media (max-width: 575.98px) {
    .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: #171b27;
    width: 100%
}

.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(--primary-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: #f9fafa;
    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: #171b27;
    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: 575.98px) {
    .modal.location-modal .location-map .category .form-check {
        gap: 8px
    }
}

.modal.location-modal .location-map .category .form-check label {
    color: #647683;
    font-size: 16px
}

.modal.location-modal .location-map .category .form-check .form-radio-input:checked~label {
    color: #171b27
}

.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: 991.98px) {
    .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 .btn {
    width: max-content;
    padding: 0;
    border: none
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .btn i {
    --Iconsax-Color: #fff
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .btn i {
    transform: scaleX(-1)
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .modal-title {
    padding-left: 10px;
    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: 10px
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header>a i {
    --Iconsax-Color: rgba(255, 255, 255, .8)
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header>a i {
    transform: scaleX(-1)
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .provider-content {
    padding: 0;
    box-shadow: none;
    border: none
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .provider-content p {
    text-align: start;
    font-size: calc(14px + .00125*(100vw - 320px))
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body i {
    --Iconsax-Color: rgba(255, 255, 255, .8)
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .location-box {
    gap: 3px;
    flex-direction: column;
    display: flex
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .location-box .location {
    justify-content: unset;
    margin-top: calc(4px + .00125*(100vw - 320px))
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .view {
    background-color: #f9fafa;
    padding: calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)));
    margin-top: calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)));
    border-radius: calc(6px + .00125*(100vw - 320px));
    border: 1px solid #eeeeee;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
    display: flex
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .view {
    background-color: #171b27;
    border-color: #454851
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .view span {
    color: #171b27;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3;
    font-weight: 500
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .view span {
    color: #fff !important
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .view .value {
    font-size: calc(18px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile {
    flex-direction: unset;
    gap: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
    margin-top: 0;
    padding-bottom: calc(12px + .00125*(100vw - 320px));
    margin-bottom: calc(12px + .00125*(100vw - 320px))
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile h3 {
    font-size: calc(16px + .00125*(100vw - 320px))
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .img {
    border: none;
    border-radius: calc(4px + .00125*(100vw - 320px));
    width: calc(68px + (75 - 68) * ((100vw - 320px) / (1920 - 320)));
    height: calc(68px + (75 - 68) * ((100vw - 320px) / (1920 - 320)))
}

.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: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #eee;
    width: 1px;
    height: 12px
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate:before {
    background-color: #454851
}

[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 .name-rating-box {
    gap: .5rem;
    align-items: center;
    display: flex
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .location-box .location h5 {
    color: #647683
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .location-box .location h5 {
    color: #ffffffc2
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info {
    background-color: #f9fafa;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    padding: 16px 20px;
    display: grid;
    gap: 14px
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info {
    background-color: #171b27;
    border-color: #454851
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info label {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    letter-spacing: .5px
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info label {
    color: #fffc
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info label i {
    --Iconsax-Color: rgba(255, 255, 255, .8)
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info p {
    color: #171b27;
    margin-left: 24px;
    margin-top: 5px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info p {
    margin-left: unset;
    margin-right: 24px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information p {
    font-size: 16px;
    font-weight: 400;
    color: #171b27
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information p {
    color: #fff
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .btn {
    font-size: calc(14px + .00125*(100vw - 320px));
    width: max-content;
    border-radius: 6px;
    padding: 6px 12px
}

body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .btn {
    background-color: #323640;
    color: #fff
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .btn:hover,
body.dark .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .btn:hover {
    background-color: var(--primary-color);
    color: #fff
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .language-list {
    gap: calc(12px + .0025*(100vw - 320px));
    margin-top: calc(6px + .00125*(100vw - 320px));
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .note {
    font-weight: 400;
    color: #647683;
    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: #f9fafa
}

.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
}

@media (min-width: 992px) {
    .modal.coupon-modal .modal-dialog {
        max-width: 1304px
    }
}

.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: #647683 !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 {
    padding: 12px 16px;
    height: unset
}

.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,
.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money label {
    color: #171b27
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money .input-group input {
    border-radius: 8px;
    border: none
}

.modal.wallet-modal .modal-dialog .modal-content .amount-form-box .form-control {
    padding: 10px 16px 10px 46px
}

[dir=rtl] .modal.wallet-modal .modal-dialog .modal-content .amount-form-box .form-control {
    padding: 10px 46px 10px 16px
}

@media (min-width: 991.98px) {
    .modal.accepted-modal .modal-dialog {
        max-width: calc(824px + (1014 - 824) * ((100vw - 991px) / (1920 - 991)))
    }
}

.modal.accepted-modal .modal-dialog .modal-body.booking-sec .data {
    gap: 8px
}

.modal.accepted-modal .modal-dialog .modal-body.booking-sec .data li {
    gap: calc(3px + (10 - 3) * ((100vw - 320px) / (1920 - 320)));
    justify-content: unset
}

.modal.accepted-modal .modal-dialog .modal-body.booking-sec .data li span {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.modal.accepted-modal .modal-dialog .modal-body p.m-0 {
    font-size: calc(14px + .00125*(100vw - 320px))
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive {
    border-radius: 6px
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .table-responsive {
    border-color: #454851
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead {
    background-color: #171b27
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    color: #171b27;
    text-align: center;
    padding: calc(14px + .00125*(100vw - 320px)) calc(14px + .00125*(100vw - 320px))
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th:first-child {
    text-align: left;
    min-width: 180px
}

[dir=rtl] .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th:first-child {
    text-align: right
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th:nth-child(2),
.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th:nth-child(3),
.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table thead tr th:nth-child(4) {
    min-width: unset
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td {
    text-align: center;
    font-size: 15px
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td:first-child {
    text-align: left
}

[dir=rtl] .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td:first-child {
    text-align: right
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .rate {
    justify-content: center;
    font-size: 15px
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .rate .star {
    width: 16px;
    height: 16px
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .user-box {
    display: flex;
    align-items: center;
    gap: 8px
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .user-box img {
    width: 45px;
    height: 45px;
    border-radius: 6px
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .user-box h5 {
    letter-spacing: .4px
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .user-box h5 {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .user-box span {
    line-height: 1.3;
    text-transform: capitalize;
    font-size: 15px;
    margin-top: 3px;
    color: #647683
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr td .user-box span {
    color: #fff9
}

.modal.accepted-modal .modal-dialog .modal-body .table-responsive .table tbody tr:nth-child(2n) {
    background-color: #f9fafa
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .card {
    background-color: transparent
}

.modal.accepted-modal .modal-dialog .modal-body .top-booking {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 14px;
    background-color: #f9fafa;
    margin-bottom: 18px
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .top-booking {
    background-color: #171b27;
    border-color: #454851
}

@media (max-width: 991.98px) {
    .modal.accepted-modal .modal-dialog .modal-body .top-booking {
        border: 0;
        border-radius: 0;
        padding: 0;
        background-color: transparent
    }
}

.modal.accepted-modal .modal-dialog .modal-body .top-booking .top-left-image {
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

.modal.accepted-modal .modal-dialog .modal-body .top-booking .top-left-image img {
    aspect-ratio: 29/20;
    object-fit: cover
}

@media (max-width: 991px) {
    .modal.accepted-modal .modal-dialog .modal-body .top-booking .top-left-image img {
        aspect-ratio: 73/50
    }
}

.modal.accepted-modal .modal-dialog .modal-body .card {
    border: none;
    border-radius: unset
}

.modal.accepted-modal .modal-dialog .modal-body .primary-badge {
    position: absolute;
    top: 10px;
    left: 10px
}

[dir=rtl] .modal.accepted-modal .modal-dialog .modal-body .primary-badge {
    left: unset;
    right: 20px
}

@media (max-width: 991.98px) {
    .modal.accepted-modal .modal-dialog .modal-body .primary-badge {
        top: 10px;
        left: 10px
    }
    [dir=rtl] .modal.accepted-modal .modal-dialog .modal-body .primary-badge {
        left: unset;
        right: 10px
    }
}

.modal.accepted-modal .modal-dialog .modal-body .status {
    margin-bottom: 4px
}

@media (max-width: 991.98px) {
    .modal.accepted-modal .modal-dialog .modal-body .status {
        flex-direction: column;
        align-items: start;
        justify-content: start
    }
    [dir=rtl] .modal.accepted-modal .modal-dialog .modal-body .status {
        align-items: end
    }
}

.modal.accepted-modal .modal-dialog .modal-body .status h5 {
    font-size: calc(18px + .00125*(100vw - 320px));
    color: #171b27
}

.modal.accepted-modal .modal-dialog .modal-body .status h5:hover {
    text-decoration: unset
}

.modal.accepted-modal .modal-dialog .modal-body .status .status-btn {
    font-size: calc(18px + .00125*(100vw - 320px))
}

.modal.accepted-modal .modal-dialog .modal-body .status .status-btn:hover {
    text-decoration: unset
}

.modal.accepted-modal .modal-dialog .modal-body .view-status {
    align-items: start;
    margin-bottom: 10px
}

.modal.accepted-modal .modal-dialog .modal-body .view-status button {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: none
}

.modal.accepted-modal .modal-dialog .modal-body .view-status button i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: var(--primary-color)
}

.modal.accepted-modal .modal-dialog .modal-body .status-note {
    color: #ff4b4b;
    padding: 10px 0 0;
    border-radius: unset;
    background-color: transparent;
    font-size: 14px;
    margin-top: 14px;
    text-align: unset;
    border-top: 1px solid #eeeeee
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .status-note {
    border-color: #454851
}

.modal.accepted-modal .modal-dialog .modal-body .status-note span {
    font-weight: 500
}

.modal.accepted-modal .modal-dialog .modal-body .view-status-box {
    margin-top: 12px
}

.modal.accepted-modal .modal-dialog .modal-body .view-status-box .badge {
    border: none;
    border-radius: 6px;
    padding: 10px 17px
}

@media (max-width: 991.98px) {
    .modal.accepted-modal .modal-dialog .modal-body .view-status-box .badge {
        background-color: transparent
    }
}

.modal.accepted-modal .modal-dialog .modal-body .view-status-box .badge i {
    --Iconsax-Color: var(--primary-color);
    --Iconsax-Size: 20px
}

.modal.accepted-modal .modal-dialog .modal-body .data li h4 {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    color: #647683
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .data li h4 {
    color: #fffc
}

.modal.accepted-modal .modal-dialog .modal-body .data li .rate {
    margin: 0
}

.modal.accepted-modal .modal-dialog .modal-body .data li .rate small {
    font-size: 16px;
    color: #171b27
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .data li .rate small {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .data li span {
    color: #171b27;
    font-weight: 500;
    font-size: 16px
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .data li span {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .data li .badge {
    padding: 0;
    background-color: transparent !important
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary {
    margin-top: 7px
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary label {
    color: #171b27;
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    margin-bottom: calc(3px + (8 - 3) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .bill-summary label {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge {
    padding: calc(12px + .0025*(100vw - 320px));
    background-color: #f9fafa;
    border: none;
    border-radius: calc(6px + .00125*(100vw - 320px));
    gap: 0
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge {
    background-color: #171b27
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li+li {
    margin-top: calc(9px + .00125*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li {
        flex-direction: unset;
        flex-wrap: wrap
    }
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li p {
    color: #171b27c2;
    flex-wrap: wrap;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    gap: calc(0px + .00375*(100vw - 320px))
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li p {
    color: #ffffffc2
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li p span {
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li.total {
    background-color: transparent;
    border: none;
    border-top: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: unset;
    padding: calc(9px + .00125*(100vw - 320px)) 0 0
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li.total {
    border-color: #454851
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li.total p {
    font-size: calc(16px + .00125*(100vw - 320px));
    color: #171b27;
    font-weight: 600
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .charge li.total span {
    font-size: calc(18px + .00125*(100vw - 320px));
    font-weight: 600
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .total:before,
.modal.accepted-modal .modal-dialog .modal-body .bill-summary .total:after {
    content: none
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .total-amount {
    background-color: #f9fafa;
    padding: 20px;
    border: 1px solid #eeeeee;
    border-bottom: none
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .total-amount li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 16px
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .total-amount li.total-amount-data {
    font-weight: 700
}

.modal.accepted-modal .modal-dialog .modal-body .bill-summary .circle {
    height: 16px;
    margin: -8px 0
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary {
    margin-top: 7px
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary label {
    color: #171b27;
    font-size: calc(17px + (18 - 17) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    margin-bottom: calc(3px + (8 - 3) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .payment-summary label {
    color: #fff
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge {
    background-color: #f9fafa;
    border: none;
    padding: calc(12px + .0025*(100vw - 320px));
    display: flex;
    flex-direction: column;
    gap: calc(8px + .00375*(100vw - 320px));
    position: relative;
    border-radius: calc(6px + .00125*(100vw - 320px))
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge {
    background-color: #171b27
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge li {
    flex-wrap: wrap
}

@media (max-width: 575.98px) {
    .modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge li {
        flex-direction: unset
    }
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge p {
    color: #171b27c2;
    flex-wrap: wrap;
    font-size: calc(14px + .00125*(100vw - 320px))
}

body.dark .modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge p {
    color: #ffffffc2
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary .charge .badge {
    padding: 0;
    background-color: transparent !important;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.modal.accepted-modal .modal-dialog .modal-body .payment-summary .circle {
    height: 18px;
    margin: -11px 0
}

.modal.accepted-modal .modal-dialog .modal-body .extra-service label {
    color: #171b27;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.accepted-modal .modal-dialog .modal-body .extra-service .total-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 16px
}

.modal.accepted-modal .modal-dialog .modal-body .extra-service .total-amount h4 {
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 6px
}

.modal.accepted-modal .modal-dialog .modal-body .extra-service .total-amount p {
    margin: 0;
    color: var(--primary-color);
    line-height: 18px
}

.modal.accepted-modal .modal-dialog .modal-body .extra-service .total-amount .receipt {
    background-color: #fe782e1a;
    border-radius: 4px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal.accepted-modal .modal-dialog .modal-body .extra-service .total-amount .receipt .receipt-img {
    width: 25px;
    height: 25px
}

.modal.accepted-modal .modal-dialog .modal-body .profile-view {
    background-color: transparent;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    margin-inline: auto;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.modal.accepted-modal .modal-dialog .modal-body .profile-view:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.modal.accepted-modal .modal-dialog .modal-body .profile-view i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: var(--primary-color)
}

.modal.accepted-modal .modal-dialog .modal-body .chat {
    background-color: #f9fafa;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none
}

.modal.accepted-modal .modal-dialog .modal-body .chat i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.modal.accepted-modal .modal-dialog .modal-footer .status-note {
    border-radius: 6px
}

.modal.status-modal .modal-content .modal-header {
    position: relative
}

.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: #222
}

.modal.status-modal .modal-content .modal-body .pattern-btn-1 {
    padding: calc(12px + .005*(100vw - 320px)) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.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
}

body.dark .modal.status-modal .modal-content .modal-body .pattern-btn-1:before,
body.dark .modal.status-modal .modal-content .modal-body .pattern-btn-1:after {
    background-color: #252934
}

.modal.status-modal .modal-content .modal-body .input-group {
    position: relative;
    overflow: hidden;
    border-radius: calc(4px + .0025*(100vw - 320px))
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input {
    position: unset;
    padding: calc(12px + .005*(100vw - 320px)) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    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;
    poRaleway-events: none;
    border: dashed transparent;
    display: block;
    border-width: 1px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    z-index: 1
}

body.dark .modal.status-modal .modal-content .modal-body .form-control.pattern-input:after,
body.dark .modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    background-color: #252934
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:after {
    border-top-color: var(--primary-color);
    border-left-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    right: -6px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .form-control.pattern-input:after {
    right: unset;
    left: -6px;
    transform: rotate(180deg)
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    left: -6px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    left: unset;
    right: -6px;
    transform: translateY(-50%) rotate(170deg)
}

.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: 0;
    padding: 0
}

.modal.status-modal .modal-content .modal-body .status-history ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px
}

.modal.status-modal .modal-content .modal-body .status-history ul li+li {
    padding-top: 15px;
    border-top: 1px dashed #eeeeee;
    margin-top: 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: 1.3;
    color: #647683;
    white-space: nowrap
}

body.dark .modal.status-modal .modal-content .modal-body .status-history ul li .status-time {
    color: #fffc
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-title {
    font-size: 15px;
    line-height: 20px
}

body.dark .modal.status-modal .modal-content .modal-body .status-history ul li .status-title {
    color: #fff
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-des {
    font-size: 15px;
    line-height: 20px;
    color: #647683
}

body.dark .modal.status-modal .modal-content .modal-body .status-history ul li .status-des {
    color: #fffc
}

.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: #eee;
    width: 1px;
    height: 26px
}

body.dark .modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
    background-color: #454851
}

[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;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    margin: 0;
    display: none
}

[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(--primary-color);
    outline-color: var(--primary-color)
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent .activity-dot:after {
    background-color: #fff;
    border: 1px dashed var(--primary-color)
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: var(--primary-color)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li.recent i {
    transform: scaleX(-1)
}

.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
}

body.dark .modal.terms-modal .modal-content .modal-body .accordion .accordion-item {
    background-color: #323640
}

body.dark .modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button {
    color: #fff
}

body.dark .modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button svg {
    --Iconsax-Color: #ffffff
}

body.dark .modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-body ul li {
    color: #fff9
}

.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: #171b27;
    cursor: poRaleway
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button i {
    --Iconsax-Size: calc(20px + .0025*(100vw - 320px));
    --Iconsax-Color: #222
}

.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: #171b27b3
}

.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: #171b27b3;
    line-height: 1.3 !important;
    margin-bottom: 12px
}

.modal.delete-modal .modal-content .modal-body {
    position: relative;
    padding-top: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.modal.delete-modal .modal-content .modal-body .modal-icon {
    --Iconsax-Color: var(--primary-color);
    --Iconsax-Size: 50px;
    margin-bottom: 10px
}

.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: 575.98px) {
    .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 p {
    margin: 0 0 14px;
    color: #171b27;
    font-size: 18px;
    line-height: 1.4
}

body.dark .modal.review-modal .modal-content .modal-body .rate-content p {
    color: #fff
}

.modal.profile-update-modal .update-img {
    display: flex;
    margin: 0 auto;
    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: var(--primary-color);
    background-color: #f9fafa;
    border: 2px solid #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: absolute;
    bottom: -10px;
    right: -10px;
    cursor: poRaleway;
    display: flex;
    align-items: center;
    justify-content: center
}

body.dark .modal.profile-update-modal .update-img .update-profile {
    background-color: #323640;
    border: none
}

[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%;
    color: var(--primary-color);
    text-transform: uppercase;
    position: relative;
    z-index: 0;
    overflow: hidden
}

body.dark .modal.profile-update-modal .update-img .initial-letter {
    background-color: #171b27
}

body.dark .modal.profile-update-modal .update-img .initial-letter:before {
    border-color: #454851
}

.modal.profile-update-modal .update-img .initial-letter:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-color);
    opacity: .1;
    border-radius: 100%;
    z-index: -1
}

.modal.profile-update-modal input[type=file] {
    display: none
}

.modal.change-password-modal .modal-body .form-group {
    margin-bottom: 15px
}

.modal.change-password-modal .modal-body .form-group:last-child {
    margin-bottom: 0
}

.modal.change-password-modal .modal-body .form-group .form-control {
    background-color: #f9fafa;
    border-radius: 6px
}

.modal.address-modal .modal-body .select2-container--default .selection .select2-selection--single {
    padding: 12px 16px;
    height: unset
}

.modal.address-modal .modal-body .select2-container--default .selection .select2-selection--single .select2-selection__rendered {
    padding: 0
}

.modal.address-modal .modal-body .select2-container--default .selection .select2-selection__arrow {
    position: relative;
    inset: unset;
    transform: unset;
    width: auto;
    height: unset
}

.modal.address-modal .modal-body .select2-container--default .selection .select2-selection__arrow b {
    position: relative;
    inset: unset;
    transform: unset;
    margin: 0;
    display: block
}

.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 .label-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 6px;
    position: relative;
    color: #171b27c7
}

body.dark .modal.address-modal .modal-body .category-list-box .label-title {
    color: #fff
}

.modal.address-modal .modal-body .category-list-box .input-group .form-control {
    padding: 10px 16px
}

[dir=rtl] .modal.address-modal .modal-body .category-list-box .input-group .form-control {
    text-align: right
}

body.dark .modal.address-modal .modal-body .category-list-box .input-group .form-control {
    background-color: #171b27
}

.modal.address-modal .modal-body .category-list-box .category-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px
}

@media (max-width: 575.98px) {
    .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 {
    position: relative
}

body.dark .modal.address-modal .modal-body .category-list-box .category-list .form-check {
    background-color: #171b27
}

body.dark .modal.address-modal .modal-body .category-list-box .category-list .form-check label {
    color: #fff;
    border-color: #454851
}

body.dark .modal.address-modal .modal-body .category-list-box .category-list .form-check .check-box:after {
    background-color: #252934;
    border-color: #454851
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check:has(.form-check-input:checked) label {
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
    z-index: 0;
    position: relative;
    overflow: hidden
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check:has(.form-check-input:checked) label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .12
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-input:before,
.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-input:after {
    content: none
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-input:checked~.form-check-label .check-box:before {
    transform: rotate(-45deg) scale(1)
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-input:checked~.form-check-label .check-box:after {
    background-color: var(--primary-color);
    border-color: var(--primary-color)
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-label {
    font-size: 17px;
    font-weight: 400;
    color: #171b27;
    width: 100%;
    border: 1px solid #eeeeee;
    border-radius: 6px;
    padding: 11px 15px;
    justify-content: space-between;
    cursor: poRaleway;
    margin: 0;
    display: flex;
    align-items: center
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-label .check-box {
    cursor: poRaleway;
    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
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-label .check-box:before {
    transition: transform .4scubic-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
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-label .check-box:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #eeeeee;
    border-radius: 4px;
    cursor: poRaleway
}

.modal.address-modal .modal-body .set-address-box {
    border: 1px solid #ddd9d9;
    border-radius: 6px;
    padding: 11px 15px;
    cursor: poRaleway;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

body.dark .modal.address-modal .modal-body .set-address-box {
    border-color: #454851
}

body.dark .modal.address-modal .modal-body .set-address-box label {
    color: #fff
}

.modal.address-modal .modal-body .set-address-box:has(.form-check-input:checked) {
    border-color: var(--primary-color);
    position: relative;
    z-index: 0;
    overflow: hidden
}

.modal.address-modal .modal-body .set-address-box:has(.form-check-input:checked):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .12;
    z-index: -1
}

.modal.address-modal .modal-body .set-address-box:has(.form-check-input:checked) label {
    color: var(--primary-color);
    font-weight: 500
}

.modal.address-modal .modal-body .set-address-box .form-check-input {
    position: absolute;
    top: 0;
    left: 0;
    cursor: poRaleway;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0
}

.modal.address-modal .modal-body .set-address-box label {
    cursor: poRaleway;
    font-size: 17px;
    font-weight: 400;
    color: var(--bs-secondary-color);
    width: 100%;
    text-align: center
}

.update-detail .form-group {
    position: relative
}

body.dark .update-detail .form-group label {
    color: #fff
}

body.dark .update-detail .form-group .form-control {
    background-color: #171b27;
    color: #fff9
}

body.dark .update-detail .form-group .form-control::placeholder {
    color: #fff
}

.update-detail:has(i) .form-control {
    border: none;
    padding-left: 46px
}

[dir=rtl] .update-detail:has(i) .form-control {
    padding-left: unset;
    padding-right: 46px
}

.update-detail i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97;
    position: absolute;
    left: 15px;
    top: 12px
}

[dir=rtl] .update-detail i {
    left: unset;
    right: 15px
}

.update-detail .toggle-password {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    left: unset;
    cursor: poRaleway
}

[dir=rtl] .update-detail .toggle-password {
    left: 15px;
    right: unset
}

.update-detail .toggle-password i {
    position: static;
    transform: unset
}

.update-detail .toggle-password .eye-slash {
    display: none
}

.update-detail .toggle-password.eye i.eye {
    display: block
}

.update-detail .toggle-password.eye i.eye-slash {
    display: none
}

.update-detail .toggle-password.eye-slash i.eye-slash {
    display: block
}

.update-detail .toggle-password.eye-slash i.eye {
    display: none
}

.phone-detail .form-control-white {
    padding-left: 16px
}

[dir=rtl] .phone-detail .form-control-white {
    padding-left: unset;
    padding-right: 16px
}

.select-option {
    border: 1px solid #eeeeee;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: #647683
}

body.dark .select-option {
    border-color: #454851
}

body.dark .select-option .form-check label {
    color: #ffffffe6 !important
}

.select-option .form-check {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: calc(8px + .0025*(100vw - 320px));
    margin-bottom: calc(8px + .0025*(100vw - 320px))
}

body.dark .select-option .form-check {
    border-color: #454851
}

.select-option .form-check:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.select-option .form-check Label {
    font-size: 16px;
    color: #171b27e6 !important;
    cursor: poRaleway
}

.select-option .form-radio-input:checked~label {
    font-weight: 500;
    color: #171b27 !important
}

.select-servicemen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eeeeee;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff;
    gap: 12px
}

body.dark .select-servicemen {
    background-color: transparent;
    border-color: #454851
}

body.dark .select-servicemen .plus-minus {
    background-color: #171b27
}

body.dark .select-servicemen .plus-minus input {
    background-color: transparent;
    color: #fff
}

.select-servicemen p {
    margin: 0;
    font-size: 16px
}

@media (max-width: 575.98px) {
    .select-servicemen {
        flex-direction: column;
        align-items: start
    }
    [dir=rtl] .select-servicemen {
        align-items: end
    }
}

.servicemen-list {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 450px;
    padding-right: 10px
}

[dir=rtl] .servicemen-list {
    padding-right: unset;
    padding-left: 10px
}

.servicemen-list .servicemen-list-item {
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.servicemen-list .servicemen-list-item+.servicemen-list-item {
    border-top: 1px solid #eeeeee;
    margin-top: 12px;
    padding-top: 12px
}

body.dark .servicemen-list .servicemen-list-item+.servicemen-list-item {
    border-color: #454851
}

.servicemen-list .servicemen-list-item .list {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 575.98px) {
    .servicemen-list .servicemen-list-item .list {
        gap: 6px
    }
}

.servicemen-list .servicemen-list-item .list p {
    margin: 0;
    color: #647683 !important;
    font-size: 14px !important
}

body.dark .servicemen-list .servicemen-list-item .list p {
    color: #fff9 !important
}

.servicemen-list .servicemen-list-item .list ul {
    display: flex;
    align-items: center;
    gap: 12px
}

.servicemen-list .servicemen-list-item .list h5 {
    font-weight: 500
}

@media (max-width: 360px) {
    .servicemen-list .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 .servicemen-list-item .list h5 {
        text-align: right
    }
}

.servicemen-list .servicemen-list-item .list .rate {
    margin: 0;
    position: relative;
    padding-left: 12px
}

body.dark .servicemen-list .servicemen-list-item .list .rate {
    color: #fff9
}

[dir=rtl] .servicemen-list .servicemen-list-item .list .rate {
    padding-left: unset;
    padding-right: 12px
}

.servicemen-list .servicemen-list-item .list .rate .star {
    width: 13px;
    height: 13px
}

.servicemen-list .servicemen-list-item .list .rate:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    background-color: #eee;
    width: 1px;
    height: 12px
}

[dir=rtl] .servicemen-list .servicemen-list-item .list .rate:before {
    left: unset;
    right: 0
}

.servicemen-list .servicemen-list-item .list .detail {
    font-size: 16px;
    font-weight: 500;
    border: none;
    background: none;
    padding: 0;
    line-height: 1
}

body.dark .servicemen-list .servicemen-list-item .list .detail {
    color: #fff
}

@media (max-width: 360px) {
    .servicemen-list .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 .servicemen-list-item .list .detail {
        text-align: right
    }
}

.servicemen-list .servicemen-list-item .list .detail:hover {
    color: var(--primary-color)
}

@media (max-width: 575.98px) {
    .servicemen-list .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
}

body.dark .emoji-tab .emojis {
    background-color: #171b27;
    border-color: #454851
}

body.dark .emoji-tab .emoji,
body.dark .emoji-tab h4 {
    color: #fff9
}

.emoji-tab .emoji-icon {
    text-align: center;
    width: 100%
}

.emoji-tab .emoji-icon h4 {
    font-size: 16px;
    margin-top: 8px;
    color: #647683
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon h4 {
        display: none
    }
}

.emoji-tab .emoji-icon .emojis {
    padding: 10px;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: poRaleway
}

@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
}

@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 .emoji {
    color: #647683;
    fill: transparent
}

.emoji-tab .emoji-icon.active .emojis {
    border: 1px solid var(--primary-color)
}

.emoji-tab .emoji-icon.active .emoji {
    filter: none
}

.emoji-tab .emoji-icon.active .emoji,
.emoji-tab .emoji-icon.active h4 {
    color: var(--primary-color)
}

body.dark .search-modal .modal-dialog .modal-content {
    background-color: #252934
}

body.dark .search-modal .modal-dialog .modal-content .modal-title {
    color: #fff
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .input-group .form-control {
    background-color: #323640;
    border-color: #454851
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .input-group .form-control::placeholder {
    color: #fff9
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .input-group .feather {
    color: #fff9
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-box .search-title h4,
body.dark .search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-box .search-list li a {
    color: #fff
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-box .search-list li a small {
    color: #fff9
}

.search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    position: relative
}

.search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .feather {
    width: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    height: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    color: #647683;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(12px + .00125*(100vw - 320px))
}

[dir=rtl] .search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .feather {
    left: unset;
    right: calc(12px + .00125*(100vw - 320px))
}

.search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .form-control {
    background-color: #f9fafa;
    padding: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(38px + .00375*(100vw - 320px));
    color: #171b27;
    border: 1px solid #eeeeee
}

[dir=rtl] .search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .form-control {
    padding: 13px 44px 13px 13px
}

.search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .form-control::placeholder {
    color: #647683
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .form-control {
    color: #fff
}

.search-modal .modal-dialog .modal-content .modal-body .home-form-group .input-group .btn {
    border-radius: 8px;
    padding-inline: 18px
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box {
    margin-top: calc(16px + .00625*(100vw - 320px))
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-box+.search-box {
    margin-top: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding-top: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    border-top: 1px solid #eeeeee
}

body.dark .search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-box+.search-box {
    border-color: #454851
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-title {
    margin-bottom: 9px
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-title h4 {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.3
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list {
    display: grid;
    gap: 10px
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27e6;
    display: flex;
    align-items: center;
    gap: calc(6px + .0025*(100vw - 320px));
    transition: all .2s ease-in-out
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a:has(>span) {
    align-items: unset
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a:has(>span) .feather {
    margin-top: 4px
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a:hover,
body.dark .search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a:hover {
    color: var(--primary-color)
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a span {
    display: grid
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a span small {
    font-size: 14px;
    color: #171b2799
}

.search-modal .modal-dialog .modal-content .modal-body .search-content-box .search-list li a .feather {
    width: calc(16px + .00125*(100vw - 320px));
    height: calc(16px + .00125*(100vw - 320px))
}

.offer-section .offer-content .sale-tag {
    position: absolute;
    top: calc(12px + (25 - 12) * ((100vw - 320px) / (1920 - 320)));
    left: 0;
    background-color: #ff4b4b;
    padding: 8px calc(28px + .005*(100vw - 320px)) 8px calc(10px + .00375*(100vw - 320px));
    color: #fff;
    z-index: 1;
    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%);
    display: flex;
    line-height: 1
}

[dir=rtl] .offer-section .offer-content .sale-tag {
    transform: scaleX(-1);
    left: unset;
    right: 0
}

[dir=rtl] .offer-section .offer-content .sale-tag span {
    transform: scaleX(-1)
}

.offer-section .offer-content .sale-tag span {
    font-size: calc(12px + .00125*(100vw - 320px))
}

.offer-section .offer-content .offer-img {
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

[dir=rtl] .offer-section .offer-content .offer-img {
    transform: scaleX(-1)
}

.offer-section .offer-content .offer-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.offer-section .offer-content .offer-detail {
    position: relative;
    inset: unset;
    padding-block: calc(50px + (75 - 50) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    padding-left: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .offer-section .offer-content .offer-detail {
    padding-left: unset;
    padding-right: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.offer-section .offer-content .offer-detail h3 {
    font-size: calc(18px + .00375*(100vw - 320px));
    font-weight: 700;
    line-height: 1.4
}

.offer-section .offer-content .offer-detail p {
    color: #171b2780;
    line-height: 1.5;
    width: 70%;
    margin-top: 4px
}

.offer-section .offer-content .offer-detail .btn {
    padding: 10px 20px;
    line-height: 1;
    width: max-content;
    color: #171b27
}

.offer-section .offer-content .offer-detail .btn.btn-outline {
    margin-top: calc(14px + .00625*(100vw - 320px));
    border: 2px solid #171B27;
    border-radius: 100px;
    font-size: calc(14px + .00125*(100vw - 320px));
    font-weight: 500;
    padding: calc(8px + .00125*(100vw - 320px)) calc(16px + .0025*(100vw - 320px))
}

.offer-section .offer-content .offer-detail .btn.btn-outline:hover {
    background-color: #171b27;
    color: #fff
}

.select2-container {
    display: flex
}

.phone-detail {
    background-color: #f9fafa;
    color: #171b27;
    border-radius: 6px;
    overflow: hidden
}

body.dark .phone-detail {
    background-color: #171b27
}

.phone-detail:has(.form-control.form-control-white) .select2-container--default .select2-selection--single {
    background-color: #fff
}

.phone-detail .select2-dropdown {
    border-color: #eee;
    z-index: 1055
}

.phone-detail .select2-container--default .selection {
    height: 100%;
    min-width: calc(95px + .0125*(100vw - 320px))
}

body.dark .phone-detail .select2-container--default .selection {
    background-color: #323640
}

.phone-detail .select2-container--default .select2-selection--single {
    height: 100%;
    border: none;
    border-right: 1px solid #eeeeee;
    background-color: #f9fafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 9px;
    border-radius: 0
}

body.dark .phone-detail .select2-container--default .select2-selection--single {
    border-right-color: #323640 !important
}

.phone-detail .select2-container--default .select2-selection__rendered {
    display: flex;
    align-items: center;
    color: #171b27;
    font-weight: 400;
    line-height: 1.5;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .phone-detail .select2-container--default .select2-selection__rendered {
    color: #fff
}

.phone-detail .select2-container--default .select2-selection__arrow {
    position: relative;
    inset: unset;
    top: 50%;
    transform: translateY(-50%);
    height: 100%
}

.phone-detail>.form-control {
    border: 1px solid #eeeeee !important;
    margin-left: calc(var(--bs-border-width) * -1) !important
}

[dir=rtl] .phone-detail>.form-control {
    margin-left: unset !important;
    margin-right: calc(var(--bs-border-width) * -1) !important
}

body.dark .phone-detail>.form-control {
    border-color: #454851 !important
}

.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below {
    border-color: #eee
}

body.dark .select2-container--default .select2-search--dropdown {
    background-color: #171b27
}

body.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #323640;
    background-color: #323640;
    color: #fff
}

.select2-container--default .select2-results__option[aria-selected] {
    width: 100%;
    padding-inline: 15px
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f9fafa
}

body.dark .select2-container--default .select2-results>.select2-results__options {
    background-color: #171b27;
    color: #fff9
}

body.dark .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
    background-color: #171b27
}

body.dark .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--primary-color)
}

.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: #eee;
    z-index: 1055
}

.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 #eeeeee;
    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: #f9fafa;
    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: #171b27
}

.error-div .select2-container--default .select2-selection__rendered {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #171b27
}

body.dark .error-div .select2-container--default .select2-selection__rendered {
    color: #fff
}

.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: #eee;
    z-index: 1055
}

body.dark .select2-container--open .select2-dropdown--above,
body.dark .select2-container--open .select2-dropdown--below {
    border-color: #454851
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #eee;
    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: #647683
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-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: #f9fafa
}

.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: #f9fafa;
    border: 1px solid #eeeeee;
    height: calc(40px + .00375*(100vw - 320px));
    width: 100%;
    display: flex;
    gap: 14px;
    align-items: center;
    border-radius: calc(4px + .00125*(100vw - 320px));
    padding: calc(10px + .00125*(100vw - 320px))
}

body.dark .select2-container--default .selection .select2-selection--single {
    background-color: #171b27;
    border-color: #454851
}

.select2-container--default .selection .select2-selection--single .select2-selection__rendered {
    padding: 0;
    display: flex;
    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: calc(14px + .00125*(100vw - 320px));
    font-weight: 400;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.select2-container--default .selection .select2-selection__arrow {
    position: relative;
    inset: unset;
    transform: unset;
    width: 16px;
    height: 16px
}

.select2-container--default .selection .select2-selection__arrow b {
    border: none;
    background-image: url(https://rythmevie.comm/build/assets/arrow-90473a1a.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    inset: unset;
    transform: unset;
    display: block;
    margin: 0
}

body.dark .select2-container--default .selection .select2-selection__arrow b {
    filter: invert(1)
}

.pagination-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px
}

.pagination-main label {
    color: #647683
}

@media (max-width: 575.98px) {
    .pagination-main label {
        display: none
    }
}

.pagination-main i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #222
}

.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: #647683;
    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;
    overflow: hidden;
    z-index: 0;
    position: relative
}

body.dark .pagination-main .pagination .page-item .page-link {
    color: #fff9;
    background-color: #252934;
    background-image: none
}

.pagination-main .pagination .page-item .page-link:before {
    content: "";
    position: absolute;
    transition: all .15s ease-in-out;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0;
    z-index: -1
}

.pagination-main .pagination .page-item .page-link:hover {
    background-color: transparent;
    color: var(--primary-color)
}

.pagination-main .pagination .page-item .page-link:hover:before {
    opacity: .2
}

.pagination-main .pagination .page-item .page-link:focus {
    border: 1px solid #eeeeee;
    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(--primary-color);
    color: #fff;
    font-weight: 600;
    border-radius: 100%
}

body.dark .pagination-main .pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--primary-color)
}

.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://rythmevie.comm/build/assets/left-b3fbce24.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center
}

.pagination .page-item:first-child .page-link:hover {
    color: transparent
}

[dir=rtl] .pagination .page-item:first-child .page-link {
    transform: rotate(180deg)
}

.pagination .page-item:last-child .page-link {
    color: transparent;
    background-image: url(https://rythmevie.comm/build/assets/right-d5ee7953.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center
}

[dir=rtl] .pagination .page-item:last-child .page-link {
    transform: rotate(180deg)
}

.pagination .page-item:last-child .page-link:hover {
    color: transparent
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: #fff
}

.pagination .page-item .page-link {
    width: 38px;
    height: 38px;
    cursor: poRaleway;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #647683
}

.profile-body-wrapper .profile-wrapper {
    background-color: #f9fafa;
    border-radius: 15px;
    padding: 20px;
    position: sticky;
    top: 100px
}

body.dark .profile-body-wrapper .profile-wrapper {
    background-color: #252934
}

@media (max-width: 1199.98px) {
    .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 #171b2714;
        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: #222;
        --Iconsax-Size: 28px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: poRaleway
    }
    [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: #ffffff
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .mainnav-close {
    display: none !important
}

@media (max-width: 1199.98px) {
    .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 {
    gap: 0;
    margin: 0;
    border: none
}

@media (max-width: 1199.98px) {
    .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;
    width: 100%
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li+li {
    margin-top: 10px
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    border-radius: 6px;
    gap: 10px;
    border: none;
    transition: all .5s ease;
    outline: none;
    width: 100%;
    font-weight: 500;
    padding: 14px 16px;
    white-space: nowrap;
    position: relative;
    z-index: 0;
    overflow: hidden
}

body.dark .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link i {
    --Iconsax-Color: #ffffff
}

body.dark .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link span {
    color: #fff
}

body.dark .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active {
    background-color: #252934
}

body.dark .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active span {
    color: #ff7456
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active:before {
    content: "";
    position: absolute;
    opacity: .1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    z-index: -1
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    z-index: -1;
    border: 1px solid var(--primary-color);
    opacity: .7
}

.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: rgba(34, 34, 34, .7)
}

@media (max-width: 1199.98px) {
    .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: #171b27b3;
    font-size: 16px
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link span {
        color: #eee
    }
}

.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: 1199.98px) {
    .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(--primary-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;
    width: 24px;
    height: 24px
}

.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-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li.profile-logout {
    border-top: 1px solid #2222221c;
    margin-top: 8px;
    padding-top: 8px
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li.profile-logout .nav-link {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 16px;
    border: none;
    transition: all .25s ease;
    outline: none;
    width: 100%;
    padding: 14px 16px;
    color: #ff4b4b;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li.profile-logout .nav-link i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #FF4B4B
}

body.dark .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li.profile-logout .nav-link i {
    --Iconsax-Color: #FF4B4B
}

body.dark .profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li.profile-logout .nav-link span {
    color: #ff4b4b
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li.profile-logout .nav-link span {
    color: #ff4b4b;
    font-size: 16px;
    transition: all .25s ease
}

.profile-body-wrapper .dashboard-title {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between
}

body.dark .profile-body-wrapper .dashboard-title {
    border-color: #454851
}

body.dark .profile-body-wrapper .dashboard-title h3 {
    color: #fff
}

.profile-body-wrapper .dashboard-title h3 {
    font-size: 26px;
    font-weight: 600
}

.profile-body-wrapper .dashboard-title a,
.profile-body-wrapper .dashboard-title button {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(16px + .00125*(100vw - 320px));
    color: var(--primary-color)
}

.profile-body-wrapper .dashboard-title a i,
.profile-body-wrapper .dashboard-title button i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: var(--primary-color)
}

.profile-body-wrapper .profile {
    margin-bottom: 24px;
    border: 1px solid #eeeeee;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    gap: 8px;
    background-color: #f9fafa;
    display: flex;
    align-items: center;
    position: relative
}

body.dark .profile-body-wrapper .profile {
    background-color: #252934;
    border-color: #454851
}

body.dark .profile-body-wrapper .profile .profile-name,
body.dark .profile-body-wrapper .profile .edit-modal {
    background-color: #171b27;
    border-color: #454851;
    color: #fff9
}

body.dark .profile-body-wrapper .profile .profile-name,
body.dark .profile-body-wrapper .profile .profile-detail h5 {
    color: #fff
}

body.dark .profile-body-wrapper .profile .profile-detail p {
    color: #fff9
}

.profile-body-wrapper .profile .profile-img {
    position: relative
}

.profile-body-wrapper .profile .profile-img img {
    border-radius: 100%;
    border: 2px solid #ffffff;
    height: 80px;
    width: 80px
}

.profile-body-wrapper .profile .profile-img .profile-name {
    border-radius: 8px;
    border: 2px solid #eeeeee;
    height: 68px;
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 600;
    margin: auto
}

.profile-body-wrapper .profile .edit-modal {
    position: absolute;
    top: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    right: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    z-index: 3;
    background-color: #fff;
    border-radius: 4px;
    width: unset;
    height: unset;
    border: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    font-size: 17px;
    line-height: 1;
    padding: 8px 11px;
    gap: 9px
}

[dir=rtl] .profile-body-wrapper .profile .edit-modal {
    left: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    right: unset
}

.profile-body-wrapper .profile .edit-modal i {
    --Iconsax-Size: 17px;
    --Iconsax-Color: #808B97
}

.profile-body-wrapper .profile .profile-detail {
    display: flex;
    flex-direction: column
}

.profile-body-wrapper .profile .profile-detail h5 {
    line-height: 1.3;
    margin-bottom: 2px;
    font-size: 19px;
    font-weight: 600;
    text-transform: capitalize
}

.profile-body-wrapper .profile .profile-detail p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    gap: 4px;
    line-height: 1.3;
    color: #647683;
    font-size: 16px
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile .profile-detail p {
        color: #647683
    }
}

.profile-body-wrapper .profile .profile-detail p i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #808B97
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile .profile-detail p i {
        --Iconsax-Color: #808B97
    }
}

.profile-body-wrapper .profile-sub-title {
    line-height: 1.4;
    margin-top: 18px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 500
}

.profile-body-wrapper .card {
    border: none;
    border-radius: 10px;
    overflow: hidden
}

body.dark .profile-body-wrapper .card {
    background-color: transparent
}

.profile-body-wrapper .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 #eeeeee;
    flex-wrap: wrap
}

.profile-body-wrapper .card .card-header .title-3 {
    position: relative
}

.profile-body-wrapper .card .card-header .title-3:before {
    content: "";
    position: absolute;
    left: calc(-15px + -.00625*(100vw - 320px));
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary-color);
    height: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
    width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .profile-body-wrapper .card .card-header .title-3:before {
    left: unset;
    right: calc(-15px + -.00625*(100vw - 320px))
}

.profile-body-wrapper .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 .card .card-header a,
.profile-body-wrapper .card .card-header button {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(16px + .00125*(100vw - 320px));
    color: var(--primary-color)
}

.profile-body-wrapper .card .card-header a i,
.profile-body-wrapper .card .card-header button i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: var(--primary-color)
}

.profile-body-wrapper .card .card-body {
    padding: 0
}

.profile-body-wrapper .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 .card .card-body.service-booking .delivery-location .location-header .badge {
    margin-left: auto
}

[dir=rtl] .profile-body-wrapper .card .card-body.service-booking .delivery-location .location-header .badge {
    margin-left: unset;
    margin-right: auto
}

.profile-body-wrapper .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 .card .card-body .widgets .card {
    border: 1px solid #eeeeee;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    background-color: #f9fafa
}

body.dark .profile-body-wrapper .card .card-body .widgets .card {
    background-color: #252934;
    border: none
}

.profile-body-wrapper .card .card-body .widgets .card .widget-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px
}

body.dark .profile-body-wrapper .card .card-body .widgets .card .widget-data .data h5 {
    color: #fff9
}

body.dark .profile-body-wrapper .card .card-body .widgets .card .widget-data .data h3 {
    color: #fff
}

body.dark .profile-body-wrapper .card .card-body .widgets .card .widget-data .data-icon i {
    background-color: transparent
}

.profile-body-wrapper .card .card-body .widgets .card .widget-data .data h5 {
    line-height: 1.4;
    color: #647683;
    margin-bottom: 2px
}

.profile-body-wrapper .card .card-body .widgets .card .widget-data .data h3 {
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .4px;
    font-size: 22px
}

.profile-body-wrapper .card .card-body .widgets .card .widget-data .data-icon i {
    --Iconsax-Size: 48px;
    background-color: #f9fafa;
    --Iconsax-Color: var(--primary-color)
}

.profile-body-wrapper .card .card-body .widgets .card .widget-data .data-icon .out-side {
    background-color: transparent;
    --Iconsax-Size: calc(31px + (38 - 31) * ((100vw - 320px) / (1920 - 320)));
    z-index: -1;
    position: absolute;
    top: -4px;
    right: -4px;
    opacity: .08;
    transform: scale(2) rotate(-15deg)
}

.profile-body-wrapper .card .card-body .profile-data h3 {
    line-height: 26px
}

.profile-body-wrapper .card .card-body .profile-data h3.profile-sub-title {
    line-height: 1.4
}

body.dark .profile-body-wrapper .card .card-body .profile-data h3.profile-sub-title {
    color: #fff
}

.profile-body-wrapper .card .card-body .profile-data .card {
    border: 1px solid #eeeeee;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #f9fafa;
    margin: 0
}

body.dark .profile-body-wrapper .card .card-body .profile-data .card {
    background-color: #252934;
    border: none
}

body.dark .profile-body-wrapper .card .card-body .profile-data .card .personal-detail {
    background-color: transparent
}

body.dark .profile-body-wrapper .card .card-body .profile-data .card .personal-detail label {
    color: #fff
}

body.dark .profile-body-wrapper .card .card-body .profile-data .card .personal-detail h4 {
    color: #fff9
}

.profile-body-wrapper .card .card-body .profile-data .card .profile-setting-img {
    background-color: #f9fafa;
    border-radius: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(https://rythmevie.comm/build/assets/setting-101983af.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 .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 .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 .card .card-body .profile-data .card .form-group:last-child {
    margin: 0
}

.profile-body-wrapper .card .card-body .profile-data .card .login-detail h4 {
    color: var(--primary-color);
    font-weight: 500;
    line-height: 23px
}

.profile-body-wrapper .card .card-body .profile-data .personal-detail {
    position: relative;
    column-count: 2;
    column-rule: 1px solid rgba(238, 238, 238, .078);
    column-gap: 34px
}

.profile-body-wrapper .card .card-body .profile-data .personal-detail .edit-modal {
    position: absolute;
    top: 0;
    right: 0
}

[dir=rtl] .profile-body-wrapper .card .card-body .profile-data .personal-detail .edit-modal {
    right: unset;
    left: 0
}

.profile-body-wrapper .card .card-body .profile-data .personal-detail .form-group {
    margin-bottom: calc(10px + .00625*(100vw - 320px))
}

.profile-body-wrapper .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 .card .card-body .profile-data .personal-detail .form-group .edit-btn {
    padding-left: 5px;
    --Iconsax-Color: var(--primary-color);
    --Iconsax-Size: 18px
}

[dir=rtl] .profile-body-wrapper .card .card-body .profile-data .personal-detail .form-group .edit-btn {
    padding-left: unset;
    padding-right: 5px
}

.profile-body-wrapper .card .card-footer {
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    border-top: 1px solid #eeeeee;
    gap: 16px;
    justify-content: start
}

.profile-body-wrapper .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 #eeeeee;
    padding: 20px;
    background-color: #f9fafa
}

body.dark .profile-body-wrapper .profile-main .review-main .review-list {
    background-color: #252934;
    border-color: #454851
}

body.dark .profile-body-wrapper .profile-main .review-main .review-list .review-note .name-date h3 {
    color: #fff
}

body.dark .profile-body-wrapper .profile-main .review-main .review-list .review-note .name-date h6,
body.dark .profile-body-wrapper .profile-main .review-main .review-list .review-note h5 {
    color: #fff9
}

body.dark .profile-body-wrapper .profile-main .review-main .review-list .review-note button .edit {
    background-color: #171b27;
    --Iconsax-Color: #ffffff
}

body.dark .profile-body-wrapper .profile-main .review-main .review-list p {
    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: #f9fafa
}

.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: #647683
}

.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: #647683
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note h5 {
    color: #171b27;
    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: #647683;
    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;
    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: #222;
    background-color: #f9fafa;
    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
}

.profile-body-wrapper .address-main .card {
    background-color: transparent
}

.profile-body-wrapper .address-main .card .card-body {
    padding: 0
}

.profile-body-wrapper .address-main .card .card-body .address-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px
}

.profile-body-wrapper .address-main .card .card-body .address-list .delivery-location .address {
    padding: 14px 16px
}

.profile-body-wrapper .address-main .card .card-body .address-list .delivery-location .address-bottom-box {
    padding: 14px 16px;
    background-color: #f9fafa
}

.profile-body-wrapper .address-main .card .card-body .address-list .delivery-location .address-bottom-box .btn {
    background-color: #fff;
    border-radius: 6px;
    padding: 8px
}

.profile-body-wrapper .address-main .card .card-body .address-list .delivery-location .address-bottom-box .btn:hover {
    background-color: var(--primary-color);
    color: #fff
}

.profile-body-wrapper .address-main .card .card-body .address-list .delivery-location .address-bottom-box .btn:hover i {
    --Iconsax-Color: #ffffff
}

.profile-body-wrapper .address-main .card .card-body .address-list .delivery-location .address-bottom-box .btn i {
    --Iconsax-Size: 18px
}

.profile-body-wrapper .wallet-main .card .card-body {
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)))
}

.edit-modal {
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 6px;
    background-color: #fe782e1a
}

.edit-modal i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: var(--primary-color)
}

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

.col-img img {
    height: 594px
}

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

.notifications .notification-list {
    background-color: #f9fafa;
    padding: calc(12px + .005*(100vw - 320px));
    display: block;
    position: relative;
    width: 100%;
    z-index: 0;
    overflow: hidden
}

.notifications .notification-list .notify {
    display: flex;
    align-items: start;
    gap: 14px;
    width: 100%
}

@media (max-width: 575.98px) {
    .notifications .notification-list .notify {
        display: grid
    }
}

.notifications .notification-list .notify .notify-icon {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 100%;
    background-color: #f9fafa;
    display: flex;
    align-items: center;
    justify-content: center
}

.notifications .notification-list .notify .notify-icon i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #a3aab1
}

.notifications .notification-list .notify .notify-note {
    width: calc(100% - 54px)
}

.notifications .notification-list .notify .notify-note h5 {
    margin-bottom: 8px;
    font-weight: 500;
    color: #647683;
    line-height: 1.3;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.notifications .notification-list .notify .notify-note p {
    margin: 0;
    color: #647683;
    line-height: 1.4;
    font-size: calc(14px + .00125*(100vw - 320px))
}

.notifications .notification-list .notify .notify-note .notify-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.notifications .notification-list .notify-time {
    margin-left: auto;
    min-width: 70px;
    text-align: end
}

@media (max-width: 575.98px) {
    .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 .notify-time span {
    color: #647683
}

.notifications .notification-list.unread {
    background-color: #fff
}

.notifications .notification-list.unread:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.notifications .notification-list.unread .notify .notify-note h5 {
    color: var(--primary-color)
}

.notifications .notification-list.unread .notify .notify-note p,
.notifications .notification-list.unread .notify .notify-note span {
    color: #222222c7
}

.notifications .notification-list.unread .notify .notify-icon {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: var(--primary-color)
}

.notifications .notification-list.unread .notify .notify-icon i {
    --Iconsax-Color: #ffffff
}

.notifications {
    display: flex;
    flex-direction: column;
    border: 1px solid #eeeeee;
    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 #eeeeee;
    padding: calc(10px + .00625*(100vw - 320px));
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px
}

body.dark .notifications .notification-list {
    background-color: #252934;
    border-color: #454851
}

body.dark .notifications .notification-list .notify-icon {
    background-color: #171b27
}

body.dark .notifications .notification-list .notify-icon i {
    --Iconsax-Color: #ffffff
}

body.dark .notifications .notification-list .notify-note h5 {
    color: #fff
}

body.dark .notifications .notification-list .notify-note p,
body.dark .notifications .notification-list .notify-note span {
    color: #fff9
}

.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: #eee;
    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: #647683;
    line-height: 20px;
    margin-bottom: 8px
}

.notifications .notification-list .notify .notify-note p {
    margin: 0;
    color: #647683;
    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 {
    width: 100%;
    height: 100%
}

.card.delivery-location .location-header {
    padding: calc(10px + .00625*(100vw - 320px)) calc(10px + .00625*(100vw - 320px)) 0;
    display: flex;
    align-items: flex-start;
    justify-content: unset;
    flex-direction: unset;
    gap: calc(8px + .005*(100vw - 320px));
    border: none
}

.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: 16px;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.card.delivery-location .location-header .location-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.card.delivery-location .location-header .location-icon img {
    width: 24px;
    height: 24px
}

@media (max-width: 575.98px) {
    .card.delivery-location .location-header .location-icon img {
        height: 16px
    }
}

.card.delivery-location .location-header .location-icon svg {
    width: 24px;
    height: 24px
}

@media (max-width: 575.98px) {
    .card.delivery-location .location-header .location-icon svg {
        height: 16px
    }
}

.card.delivery-location .location-header .active-icon {
    border: none;
    border-radius: 16px;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.card.delivery-location .location-header .active-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.card.delivery-location .location-header .active-icon svg {
    stroke: var(--primary-color);
    fill: transparent;
    padding: calc(8px + .00125*(100vw - 320px));
    border-radius: 12px;
    width: calc(38px + .0025*(100vw - 320px));
    height: 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));
    padding-top: 0;
    border-top: 0;
    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;
    background-color: #fff;
    font-weight: 500;
    border-radius: 8px
}

.card.delivery-location .address-bottom-box .btn-fill {
    border: transparent;
    color: #fff;
    background-color: var(--primary-color)
}

.card.delivery-location .address-bottom-box .btn-fill:hover {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}

.card.delivery-location .address-bottom-box .btn-outline {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: #fff
}

.card.delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: transparent
}

.card.delivery-location .address-bottom-box .btn-outline:hover .icon {
    --Iconsax-Color: #ffffff
}

.card.delivery-location .address-bottom-box .radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: poRaleway
}

[dir=rtl] .card.delivery-location .address-bottom-box .radio {
    left: unset;
    right: 0
}

.card.delivery-location .radio:checked~button {
    background-color: var(--primary-color);
    color: #fff
}

.card.delivery-location .booking-data {
    width: calc(100% - 16px - (14px + .00625*(100vw - 320px)));
    margin-left: calc(14px + .00625*(100vw - 320px));
    background-color: #f9fafa;
    padding: 24px;
    border-radius: 12px
}

.add-location {
    color: var(--primary-color);
    background-color: transparent;
    border: none;
    cursor: poRaleway;
    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: Raleway, sans-serif;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    height: 80px
}

.irs--round .irs {
    font-family: Raleway, sans-serif
}

.irs--round .irs-line {
    top: 10px;
    background-color: #eee;
    height: 5px
}

.irs--round .irs-handle {
    top: 21px;
    width: 14px;
    height: 14px;
    border: none;
    background-color: #171b27cc;
    border-radius: 100%;
    cursor: poRaleway
}

.irs--round .irs-handle:hover,
.irs--round .irs-handle.state_hover {
    background-color: #171b27cc
}

.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    bottom: -40px;
    top: unset;
    background-color: transparent;
    color: #171b27cc;
    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: #171b27a6;
    top: 26px
}

#distance .distance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

#distance .distance .form-group {
    margin: 0
}

#distance .irs {
    font-family: Raleway, sans-serif
}

#distance .irs .irs-line {
    height: 4px
}

#distance .irs .irs-handle.single {
    display: none
}

#distance .irs.irs--modern .irs-grid-pol {
    color: #eee
}

#distance .irs.irs--modern .irs-grid-pol.small {
    display: none
}

#distance .irs.irs--modern .irs-single {
    background: url(https://rythmevie.comm/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: poRaleway
}

#distance .irs.irs--modern .irs-single:before {
    content: "";
    position: absolute;
    background-color: #171b27;
    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: #171b27;
    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: #171B27;
    height: 4px
}

#distance .irs .irs-line {
    background-color: #eee
}

#distance .irs .irs-grid {
    height: 29px
}

#distance .irs .irs-grid .irs-grid-text {
    color: #171b27;
    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: #647683;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    line-height: 0;
    cursor: poRaleway;
    font-size: 16px;
    font-weight: 500
}

.star-rating label i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.star-rating label:hover {
    background-color: var(--primary-color);
    color: #fff
}

.star-rating label:hover i {
    --Iconsax-Color: #ffffff
}

.star-rating :checked~label {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

.star-rating :checked~label i {
    --Iconsax-Color: #ffffff
}

.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: #171b27
}

.reviews .person-detail img {
    border-radius: 100%;
    height: 45px;
    width: 45px
}

.reviews .person-detail p {
    line-height: 1.5;
    color: #647683;
    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: #171b27
}

.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: 575.98px) {
    .reviews .rating {
        margin-left: 50px
    }
}

@media (max-width: 575.98px) {
    .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 {
    border-top: 1px solid #eeeeee;
    margin-top: 16px;
    padding: 16px 0 0;
    white-space: nowrap;
    display: flex;
    gap: 10px;
    flex-direction: column
}

body.dark .rating-bars {
    border-color: #454851
}

body.dark .rating-bars .bar {
    background-color: #454851
}

body.dark .rating-bars .right {
    color: #fff9
}

.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: #f9fafa;
    border-radius: 4px
}

.rating-bars .rating-bar .bar .bar-item {
    height: 8px;
    background-color: var(--primary-color);
    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: 43px;
    font-size: 15px;
    font-weight: 500
}

.rating-bars .rating-bar .right {
    color: #647683;
    text-align: left;
    min-width: 40px;
    font-size: 15px;
    font-weight: 500
}

[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://rythmevie.comm/build/assets/check-329d008f.svg) !important
}

#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 var(--primary-color)
}

#toast-container .toast-success .toast-message {
    color: var(--primary-color)
}

#toast-container .toast-error {
    background-color: #e43e3e0d;
    border: 2px solid #e43e3e;
    background-image: url(https://rythmevie.comm/build/assets/error-b09d3fef.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://rythmevie.comm/build/assets/info-f49bebe9.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://rythmevie.comm/build/assets/warning-736d8bf3.svg) !important
}

#toast-container .toast-warning:before {
    background-color: #e39f08
}

#toast-container .toast-warning .toast-message {
    color: #e39f08
}

.swiper-wrapper,
.swiper {
    z-index: unset
}

[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://rythmevie.comm/build/assets/preview-5841e3ac.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://rythmevie.comm/build/assets/preview-disable-c987f3be.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://rythmevie.comm/build/assets/next-4ac3bd7f.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://rythmevie.comm/build/assets/next-disable-0441b0d8.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://rythmevie.comm/build/assets/left-b3fbce24.svg);
    left: 20px
}

.swiper-button-next5 {
    background-image: url(https://rythmevie.comm/build/assets/right-d5ee7953.svg) !important;
    right: 20px
}

.outside-arrow {
    position: relative
}

.outside-arrow .swiper-button-next,
.outside-arrow .swiper-button-prev {
    background-color: #fff;
    width: calc(38px + .0025*(100vw - 320px));
    margin: 0;
    border: 1px solid #eeeeee;
    height: calc(38px + .0025*(100vw - 320px));
    opacity: 1;
    transform: translateY(-50%);
    box-shadow: 2px 2px 15px #dddddd82;
    border-radius: calc(4px + .00125*(100vw - 320px));
    z-index: unset;
    padding: 0;
    poRaleway-events: unset
}

@media (max-width: 600.98px) {
    .outside-arrow .swiper-button-next,
    .outside-arrow .swiper-button-prev {
        display: none
    }
}

body.dark .outside-arrow .swiper-button-next,
body.dark .outside-arrow .swiper-button-prev {
    background-color: #323640;
    border-color: #454851;
    box-shadow: 2px 2px 15px #48474782
}

body.dark .outside-arrow .swiper-button-next svg,
body.dark .outside-arrow .swiper-button-prev svg {
    --Iconsax-Color: #ffffff
}

.outside-arrow .swiper-button-next:after,
.outside-arrow .swiper-button-prev:after {
    content: none
}

.outside-arrow .swiper-button-next.swiper-button-disabled,
.outside-arrow .swiper-button-prev.swiper-button-disabled {
    opacity: .8;
    -webkit-backdrop-filter: blur(.3px);
    backdrop-filter: blur(.3px);
    cursor: not-allowed;
    -webkit-user-select: none;
    user-select: none
}

.outside-arrow .swiper-button-next {
    right: calc(9px + -.01875*(100vw - 320px))
}

.outside-arrow .swiper-button-prev {
    left: calc(9px + -.01875*(100vw - 320px))
}

.outside-arrow .slider-pagination .swiper-pagination {
    z-index: unset;
    display: flex;
    margin-top: calc(14px + (25 - 14) * ((100vw - 320px) / (1920 - 320)))
}

@media (min-width: 600.98px) {
    .outside-arrow .slider-pagination .swiper-pagination {
        display: none
    }
}

.swiper-button-lock {
    display: block
}

.slider-pagination .swiper-pagination {
    position: relative;
    inset: unset;
    width: auto;
    margin-top: 25px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.slider-pagination .swiper-pagination .swiper-pagination-bullet {
    height: 8px;
    width: 8px;
    min-width: 8px;
    background-color: var(--primary-color);
    margin: 0;
    border-radius: 100px;
    transition: all .2s ease
}

.slider-pagination .swiper-pagination .swiper-pagination-bullet-active {
    width: 25px
}

.table-responsive {
    border: 1px solid #eeeeee;
    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: #f9fafa
}

.table-responsive .table thead tr th {
    font-size: 14px;
    font-weight: 500;
    color: #647683;
    padding: calc(12px + .0025*(100vw - 320px)) calc(12px + .0025*(100vw - 320px));
    line-height: 1.2
}

.table-responsive .table tbody tr {
    border-bottom: 1px dashed #eeeeee
}

.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(--primary-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 #eeeeee;
    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 #eeeeee;
    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 #eeeeee;
    overflow: hidden auto
}

.table-responsive .table.wallet-table table thead {
    background-color: var(--primary-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 #eeeeee;
    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: #647683
}

.table-responsive .table.wallet-table table tbody tr td:first-child {
    color: var(--primary-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 #eeeeee
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button:hover {
    color: #fe782e !important;
    border-color: #fe782e03;
    background: rgba(254, 120, 46, .1);
    box-shadow: unset
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.previous {
    color: transparent !important;
    background-image: url(https://rythmevie.comm/build/assets/left-b3fbce24.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(--primary-color) !important;
    border-color: var(--primary-color)
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.current,
.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-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 #eeeeee;
    overflow: hidden auto
}

body.dark .wallet-data-table .table.no-footer {
    border: none
}

.wallet-data-table .table.dataTables_wrapper {
    width: calc(100% - 1px);
    padding: 0
}

.wallet-data-table .table thead {
    background-color: #eee
}

body.dark .wallet-data-table .table thead {
    background-color: #252934
}

.wallet-data-table .table thead tr th {
    color: #171b27;
    font-size: 17px;
    white-space: nowrap;
    font-weight: 600;
    padding: 16px;
    text-align: center
}

.wallet-data-table .table tbody {
    background-color: #fff
}

body.dark .wallet-data-table .table tbody tr td {
    background-color: #171b27;
    border-color: #454851;
    color: #fff
}

.wallet-data-table .table tbody tr td {
    font-size: calc(14px + .00125*(100vw - 320px));
    white-space: nowrap;
    border-bottom: 1px dashed #eeeeee;
    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: #647683
}

.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 #eeeeee;
    padding: 0;
    margin: 0
}

.wallet-data-table .dataTables_paginate .paginate_button:hover {
    color: #fe782e !important;
    border-color: #fe782e03;
    background: rgba(254, 120, 46, .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://rythmevie.comm/build/assets/left-b3fbce24.svg)
}

.wallet-data-table .dataTables_paginate .paginate_button.next {
    background-image: url(https://rythmevie.comm/build/assets/right-d5ee7953.svg)
}

.wallet-data-table .dataTables_paginate .paginate_button .disabled:hover {
    background-color: #f8f9fa !important;
    color: transparent !important;
    border-color: var(--primary-color)
}

.wallet-data-table .dataTables_paginate .paginate_button.current,
.wallet-data-table .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-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
}

body.dark .wallet-data-table table.dataTable.table thead td.sorting,
body.dark .wallet-data-table table.dataTable.table thead td.sorting_desc,
body.dark .wallet-data-table table.dataTable.table thead td.sorting_asc,
body.dark .wallet-data-table table.dataTable.table thead th.sorting,
body.dark .wallet-data-table table.dataTable.table thead th.sorting_desc,
body.dark .wallet-data-table table.dataTable.table thead th.sorting_asc {
    color: #fff
}

.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: Raleway, 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: Raleway, sans-serif;
    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
    }
}

body.dark .wallet-data-table .dataTables_wrapper .dataTables_length label {
    color: #fff9
}

body.dark .wallet-data-table .dataTables_wrapper .dataTables_length select {
    background-color: #171b27;
    color: #fff;
    border: transparent
}

.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: 1px solid #eeeeee;
    background-color: #fff;
    border-radius: 6px;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27;
    margin-inline: 7px;
    line-height: 1.3
}

body.dark .wallet-data-table .dataTables_wrapper .dataTables_filter label {
    color: #fff9
}

body.dark .wallet-data-table .dataTables_wrapper .dataTables_filter input {
    background-color: #171b27;
    border-color: transparent;
    color: #fff
}

.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: 1px solid #eeeeee;
    margin-left: 7px;
    background-color: #fff;
    border-radius: 6px;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27;
    line-height: 1.3
}

[dir=rtl] .wallet-data-table .dataTables_wrapper .dataTables_filter input {
    margin-left: unset;
    margin-right: 7px
}

.wallet-data-table .dataTables_wrapper .dataTables_processing {
    padding-block: 8px
}

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 #eeeeee;
    margin-bottom: 0;
    width: 100%;
    transition: all .25s ease-in-out;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.custom-nav-tabs .nav-item .nav-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transition: all .25s ease-in-out;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0;
    z-index: -1
}

.custom-nav-tabs .nav-item .nav-link:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .25s ease-in-out;
    border: 1px solid var(--primary-color);
    border-radius: 100px;
    opacity: 0;
    z-index: -1
}

.custom-nav-tabs .nav-item .nav-link.active:before,
.custom-nav-tabs .nav-item .nav-link:hover:before {
    opacity: .1
}

.custom-nav-tabs .nav-item .nav-link.active:after,
.custom-nav-tabs .nav-item .nav-link:hover:after {
    opacity: .01
}

.custom-nav-tabs .nav-item .nav-link.active span,
.custom-nav-tabs .nav-item .nav-link:hover span,
body.dark .custom-nav-tabs .nav-item .nav-link.active span,
body.dark .custom-nav-tabs .nav-item .nav-link:hover span {
    color: var(--primary-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: #eee;
    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: Raleway, sans-serif;
    margin: 0 auto;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #171b27;
    line-height: 26px;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    transition: all .25s ease-in-out
}

.custom-nav-tabs .nav-item .nav-link small {
    font-family: Raleway, sans-serif;
    margin: 0 auto;
    transition: all .25s ease-in-out;
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #171b2799;
    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: #647683;
    border: none
}

.review-tab .nav-item .nav-link.active {
    background-color: transparent;
    border: none;
    color: #171b27;
    border-bottom: 2px solid #171B27
}

.review-tab .nav-item .nav-link.active:hover {
    border-bottom: 2px solid #171B27
}

.review-tab .nav-item .nav-link:hover {
    border: none
}

.favorite-tab .nav-tabs {
    border: none;
    gap: 12px;
    border-bottom: 1px solid #eeeeee
}

body.dark .favorite-tab .nav-tabs {
    border-color: #454851
}

.favorite-tab .nav-tabs .nav-item .nav-link {
    color: var(--primary-color);
    border: none;
    border-radius: 8px 8px 0 0;
    font-size: 18px;
    padding: 12px 28px;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.favorite-tab .nav-tabs .nav-item .nav-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.favorite-tab .nav-tabs .nav-item .nav-link.active {
    background-color: var(--primary-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(--primary-color);
    color: var(--primary-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: #fe782e1a;
    color: var(--primary-color);
    border: none;
    border-radius: 30px;
    font-size: 16px;
    padding: 6px 16px
}

.provider-service-tab .nav-item .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 500
}

header .top-header {
    position: absolute;
    top: 41px;
    z-index: 2;
    width: 100%
}

header .top-header .navbar {
    background-color: #ffffffbf;
    padding: calc(14px + (21 - 14) * ((100vw - 320px) / (1920 - 320)));
    margin-top: calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320)));
    border-radius: calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320)));
    box-shadow: 8px 8px #dddddd1f;
    gap: 14px
}

body.dark header .top-header .navbar {
    background-color: #323640;
    box-shadow: 8px 8px #4242421f
}

header .custom-navbar .logo-content {
    display: flex;
    align-items: center;
    gap: calc(4px + (12 - 4) * ((100vw - 320px) / (600 - 320)))
}

header .custom-navbar i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #ffffff
}

header .custom-navbar .navbar-brand {
    margin: 0;
    padding: 0;
    font-size: 0
}

header .custom-navbar .navbar-brand img {
    height: calc(34px + .0075*(100vw - 320px))
}

header .custom-navbar .nav-right {
    gap: calc(6px + .0075*(100vw - 320px))
}

@media (max-width: 600px) {
    header .custom-navbar .nav-right .nav-item-right:nth-child(2),
    header .custom-navbar .nav-right .nav-item-right:nth-child(3) {
        display: none
    }
}

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: calc(14px + .00125*(100vw - 320px));
    height: calc(14px + .00125*(100vw - 320px));
    top: -5px;
    right: -5px;
    background-color: #ff4b4b;
    border-radius: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + .00125*(100vw - 320px))
}

[dir=rtl] header .custom-navbar .nav-right .nav-item-right .badge {
    right: unset;
    left: -5px
}

header .custom-navbar .nav-right .nav-item-right.login-btn {
    border: none;
    background-color: transparent;
    padding: 0
}

header .custom-navbar .nav-right .nav-item-right .btn {
    padding: 0;
    border: none
}

header .custom-navbar .nav-right .nav-item-right .btn i {
    --Iconsax-Size: calc(19px + .0025*(100vw - 320px));
    border-radius: 100%;
    --Iconsax-Color: #222
}

body.dark header .custom-navbar .nav-right .nav-item-right .btn i {
    --Iconsax-Color: #ffffff
}

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;
    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 ease-in-out;
    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;
    right: 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: poRaleway;
    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: rgba(255, 255, 255, .6)
}

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: #ffffff
}

[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: #171b27;
    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
}

header .custom-navbar .navbar-toggler {
    border: none;
    padding: 0
}

header .custom-navbar .navbar-toggler .navbar-toggler-icon {
    width: calc(22px + .00125*(100vw - 320px));
    height: calc(22px + .00125*(100vw - 320px))
}

body.dark header .custom-navbar .navbar-toggler .navbar-toggler-icon {
    filter: invert(20)
}

header .custom-navbar .navbar-toggler:focus {
    box-shadow: none
}

header .custom-navbar .navbar-collapse .navbar-nav {
    gap: 30px
}

@media (max-width: 1199.98px) {
    header .custom-navbar .navbar-collapse .navbar-nav {
        gap: 0
    }
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    font-size: calc(16px + .00125*(100vw - 320px));
    color: #171b27cc;
    padding-left: 0;
    font-weight: 500;
    padding-right: 0;
    position: relative;
    transition: all .3s ease-in-out
}

body.dark header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    color: #fffc
}

@media (max-width: 1199.98px) {
    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
        color: #171b27;
        padding: 0;
        display: flex;
        align-items: center;
        gap: calc(8px + .00125*(100vw - 320px))
    }
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: all .3s ease-in-out
}

@media (max-width: 1199.98px) {
    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:before {
        position: relative;
        inset: unset;
        transform: unset;
        width: calc(5px + (6 - 5) * ((100vw - 320px) / (1200 - 320)));
        height: calc(4px + (6 - 4) * ((100vw - 320px) / (1200 - 320)));
        border-radius: 100%;
        display: block;
        background-color: #64768399
    }
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: var(--primary-color)
}

body.dark header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: var(--primary-color)
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover:before {
    width: calc(100% - 14px)
}

@media (max-width: 1199.98px) {
    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover:before {
        width: calc(5px + (6 - 5) * ((100vw - 320px) / (1200 - 320)));
        background-color: var(--primary-color)
    }
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    font-weight: 500;
    color: var(--primary-color)
}

body.dark header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    color: var(--primary-color)
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:before {
    width: calc(100% - 14px)
}

@media (max-width: 1199.98px) {
    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:before {
        width: calc(5px + (6 - 5) * ((100vw - 320px) / (1200 - 320)));
        background-color: var(--primary-color)
    }
}

@media (max-width: 1199.98px) {
    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
    }
    body.dark header .custom-navbar .navbar-collapse {
        background-color: #1d2537
    }
    [dir=rtl] header .custom-navbar .navbar-collapse {
        left: unset;
        right: -350px
    }
    header .custom-navbar .navbar-collapse .navbar-header {
        padding: calc(18px + (20 - 18) * ((100vw - 320px) / (1200 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1200 - 320)));
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 8px 10px #171b270d
    }
    header .custom-navbar .navbar-collapse .navbar-header h4 {
        color: var(--primary-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;
        position: relative;
        width: auto;
        height: auto;
        background: none;
        padding: 0;
        opacity: 1
    }
    header .custom-navbar .navbar-collapse .navbar-header .btn-close .feather {
        width: 22px;
        height: 22px
    }
    body.dark header .custom-navbar .navbar-collapse .navbar-header .btn-close .feather {
        color: #fff
    }
    header .custom-navbar .navbar-collapse .navbar-nav {
        padding: calc(18px + (20 - 18) * ((100vw - 320px) / (1200 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1200 - 320)));
        height: 100%;
        gap: 0;
        overflow: auto
    }
    header .custom-navbar .navbar-collapse .navbar-nav .nav-item+.nav-item {
        margin-top: calc(9px + (12 - 9) * ((100vw - 320px) / (1200 - 320)));
        padding-top: calc(9px + (12 - 9) * ((100vw - 320px) / (1200 - 320)));
        border-top: 1px solid #eeeeee
    }
    body.dark header .custom-navbar .navbar-collapse .navbar-nav .nav-item+.nav-item {
        border-color: #647683
    }
    header .custom-navbar .navbar-collapse.show {
        left: 0;
        z-index: 2
    }
    [dir=rtl] header .custom-navbar .navbar-collapse.show {
        left: unset;
        right: 0
    }
}

header .nav-right {
    display: flex;
    align-items: center;
    gap: 12px
}

header .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 .nav-right .nav-item-right .btn.btn-outline {
    border-radius: 30px;
    padding: 8px 30px;
    border-color: #171b27;
    color: #171b27;
    background-color: transparent
}

@media (max-width: 991.98px) {
    header .nav-right .nav-item-right .btn.btn-outline {
        padding: 4px 12px;
        font-size: 16px
    }
}

header .nav-right .language-dropdown,
header .nav-right .currency-dropdown,
header .nav-right .profile-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 30px;
    height: 42px
}

header .nav-right .language-dropdown img,
header .nav-right .currency-dropdown img,
header .nav-right .profile-dropdown img {
    width: 26px;
    height: 20px;
    border-radius: 3px
}

header .nav-right .language-dropdown .language-btn,
header .nav-right .language-dropdown .currency-btn,
header .nav-right .language-dropdown .profile-btn,
header .nav-right .currency-dropdown .language-btn,
header .nav-right .currency-dropdown .currency-btn,
header .nav-right .currency-dropdown .profile-btn,
header .nav-right .profile-dropdown .language-btn,
header .nav-right .profile-dropdown .currency-btn,
header .nav-right .profile-dropdown .profile-btn {
    background: transparent;
    color: #fff;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

header .nav-right .language-dropdown .language-btn span,
header .nav-right .language-dropdown .language-btn a,
header .nav-right .language-dropdown .currency-btn span,
header .nav-right .language-dropdown .currency-btn a,
header .nav-right .language-dropdown .profile-btn span,
header .nav-right .language-dropdown .profile-btn a,
header .nav-right .currency-dropdown .language-btn span,
header .nav-right .currency-dropdown .language-btn a,
header .nav-right .currency-dropdown .currency-btn span,
header .nav-right .currency-dropdown .currency-btn a,
header .nav-right .currency-dropdown .profile-btn span,
header .nav-right .currency-dropdown .profile-btn a,
header .nav-right .profile-dropdown .language-btn span,
header .nav-right .profile-dropdown .language-btn a,
header .nav-right .profile-dropdown .currency-btn span,
header .nav-right .profile-dropdown .currency-btn a,
header .nav-right .profile-dropdown .profile-btn span,
header .nav-right .profile-dropdown .profile-btn a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600
}

header .nav-right .language-dropdown .language-btn i,
header .nav-right .language-dropdown .currency-btn i,
header .nav-right .language-dropdown .profile-btn i,
header .nav-right .currency-dropdown .language-btn i,
header .nav-right .currency-dropdown .currency-btn i,
header .nav-right .currency-dropdown .profile-btn i,
header .nav-right .profile-dropdown .language-btn i,
header .nav-right .profile-dropdown .currency-btn i,
header .nav-right .profile-dropdown .profile-btn i {
    --Iconsax-Color: #ffffff
}

header .nav-right .language-dropdown .language-btn .feather,
header .nav-right .language-dropdown .currency-btn .feather,
header .nav-right .language-dropdown .profile-btn .feather,
header .nav-right .currency-dropdown .language-btn .feather,
header .nav-right .currency-dropdown .currency-btn .feather,
header .nav-right .currency-dropdown .profile-btn .feather,
header .nav-right .profile-dropdown .language-btn .feather,
header .nav-right .profile-dropdown .currency-btn .feather,
header .nav-right .profile-dropdown .profile-btn .feather {
    width: 19px;
    height: 19px
}

header .nav-right .language-dropdown .onhover-show-div,
header .nav-right .currency-dropdown .onhover-show-div,
header .nav-right .profile-dropdown .onhover-show-div {
    min-width: 130px;
    transition: all .3s ease-in-out;
    position: absolute;
    z-index: 3;
    border: 1px solid #eeeeee;
    background-color: #f9fafa;
    opacity: 0;
    box-shadow: none;
    visibility: hidden;
    transform: translate3d(0, -5%, 0);
    top: 27px;
    right: 0;
    padding: 15px;
    border-radius: 8px;
    width: max-content
}

[dir=rtl] header .nav-right .language-dropdown .onhover-show-div,
[dir=rtl] header .nav-right .currency-dropdown .onhover-show-div,
[dir=rtl] header .nav-right .profile-dropdown .onhover-show-div {
    left: 0;
    right: unset
}

body.dark header .nav-right .language-dropdown .onhover-show-div,
body.dark header .nav-right .currency-dropdown .onhover-show-div,
body.dark header .nav-right .profile-dropdown .onhover-show-div {
    background-color: #323640;
    border-color: #454851
}

body.dark header .nav-right .language-dropdown .onhover-show-div li a,
body.dark header .nav-right .currency-dropdown .onhover-show-div li a,
body.dark header .nav-right .profile-dropdown .onhover-show-div li a {
    color: #fff
}

header .nav-right .language-dropdown .onhover-show-div .lang,
header .nav-right .language-dropdown .onhover-show-div .currency,
header .nav-right .language-dropdown .onhover-show-div .profile,
header .nav-right .language-dropdown .onhover-show-div .page-link,
header .nav-right .currency-dropdown .onhover-show-div .lang,
header .nav-right .currency-dropdown .onhover-show-div .currency,
header .nav-right .currency-dropdown .onhover-show-div .profile,
header .nav-right .currency-dropdown .onhover-show-div .page-link,
header .nav-right .profile-dropdown .onhover-show-div .lang,
header .nav-right .profile-dropdown .onhover-show-div .currency,
header .nav-right .profile-dropdown .onhover-show-div .profile,
header .nav-right .profile-dropdown .onhover-show-div .page-link {
    cursor: poRaleway;
    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 .nav-right .language-dropdown .onhover-show-div .lang a,
header .nav-right .language-dropdown .onhover-show-div .currency a,
header .nav-right .language-dropdown .onhover-show-div .profile a,
header .nav-right .language-dropdown .onhover-show-div .page-link a,
header .nav-right .currency-dropdown .onhover-show-div .lang a,
header .nav-right .currency-dropdown .onhover-show-div .currency a,
header .nav-right .currency-dropdown .onhover-show-div .profile a,
header .nav-right .currency-dropdown .onhover-show-div .page-link a,
header .nav-right .profile-dropdown .onhover-show-div .lang a,
header .nav-right .profile-dropdown .onhover-show-div .currency a,
header .nav-right .profile-dropdown .onhover-show-div .profile a,
header .nav-right .profile-dropdown .onhover-show-div .page-link a {
    color: #171b27;
    display: flex;
    transition: all .2s ease-in-out;
    align-items: center;
    gap: 8px;
    line-height: 1
}

header .nav-right .language-dropdown .onhover-show-div .lang i,
header .nav-right .language-dropdown .onhover-show-div .currency i,
header .nav-right .language-dropdown .onhover-show-div .profile i,
header .nav-right .language-dropdown .onhover-show-div .page-link i,
header .nav-right .currency-dropdown .onhover-show-div .lang i,
header .nav-right .currency-dropdown .onhover-show-div .currency i,
header .nav-right .currency-dropdown .onhover-show-div .profile i,
header .nav-right .currency-dropdown .onhover-show-div .page-link i,
header .nav-right .profile-dropdown .onhover-show-div .lang i,
header .nav-right .profile-dropdown .onhover-show-div .currency i,
header .nav-right .profile-dropdown .onhover-show-div .profile i,
header .nav-right .profile-dropdown .onhover-show-div .page-link i {
    --Iconsax-Color: rgba(255, 255, 255, .6)
}

header .nav-right .language-dropdown .onhover-show-div .lang:hover,
header .nav-right .language-dropdown .onhover-show-div .currency:hover,
header .nav-right .language-dropdown .onhover-show-div .profile:hover,
header .nav-right .language-dropdown .onhover-show-div .page-link:hover,
header .nav-right .currency-dropdown .onhover-show-div .lang:hover,
header .nav-right .currency-dropdown .onhover-show-div .currency:hover,
header .nav-right .currency-dropdown .onhover-show-div .profile:hover,
header .nav-right .currency-dropdown .onhover-show-div .page-link:hover,
header .nav-right .profile-dropdown .onhover-show-div .lang:hover,
header .nav-right .profile-dropdown .onhover-show-div .currency:hover,
header .nav-right .profile-dropdown .onhover-show-div .profile:hover,
header .nav-right .profile-dropdown .onhover-show-div .page-link:hover {
    color: #fff;
    transform: translate(5px)
}

header .nav-right .language-dropdown .onhover-show-div .lang:hover a,
header .nav-right .language-dropdown .onhover-show-div .currency:hover a,
header .nav-right .language-dropdown .onhover-show-div .profile:hover a,
header .nav-right .language-dropdown .onhover-show-div .page-link:hover a,
header .nav-right .currency-dropdown .onhover-show-div .lang:hover a,
header .nav-right .currency-dropdown .onhover-show-div .currency:hover a,
header .nav-right .currency-dropdown .onhover-show-div .profile:hover a,
header .nav-right .currency-dropdown .onhover-show-div .page-link:hover a,
header .nav-right .profile-dropdown .onhover-show-div .lang:hover a,
header .nav-right .profile-dropdown .onhover-show-div .currency:hover a,
header .nav-right .profile-dropdown .onhover-show-div .profile:hover a,
header .nav-right .profile-dropdown .onhover-show-div .page-link:hover a {
    color: var(--primary-color)
}

header .nav-right .language-dropdown .onhover-show-div .lang:hover i,
header .nav-right .language-dropdown .onhover-show-div .currency:hover i,
header .nav-right .language-dropdown .onhover-show-div .profile:hover i,
header .nav-right .language-dropdown .onhover-show-div .page-link:hover i,
header .nav-right .currency-dropdown .onhover-show-div .lang:hover i,
header .nav-right .currency-dropdown .onhover-show-div .currency:hover i,
header .nav-right .currency-dropdown .onhover-show-div .profile:hover i,
header .nav-right .currency-dropdown .onhover-show-div .page-link:hover i,
header .nav-right .profile-dropdown .onhover-show-div .lang:hover i,
header .nav-right .profile-dropdown .onhover-show-div .currency:hover i,
header .nav-right .profile-dropdown .onhover-show-div .profile:hover i,
header .nav-right .profile-dropdown .onhover-show-div .page-link:hover i {
    --Iconsax-Color: #ffffff
}

[dir=rtl] header .nav-right .language-dropdown .onhover-show-div .lang:hover,
[dir=rtl] header .nav-right .language-dropdown .onhover-show-div .currency:hover,
[dir=rtl] header .nav-right .language-dropdown .onhover-show-div .profile:hover,
[dir=rtl] header .nav-right .language-dropdown .onhover-show-div .page-link:hover,
[dir=rtl] header .nav-right .currency-dropdown .onhover-show-div .lang:hover,
[dir=rtl] header .nav-right .currency-dropdown .onhover-show-div .currency:hover,
[dir=rtl] header .nav-right .currency-dropdown .onhover-show-div .profile:hover,
[dir=rtl] header .nav-right .currency-dropdown .onhover-show-div .page-link:hover,
[dir=rtl] header .nav-right .profile-dropdown .onhover-show-div .lang:hover,
[dir=rtl] header .nav-right .profile-dropdown .onhover-show-div .currency:hover,
[dir=rtl] header .nav-right .profile-dropdown .onhover-show-div .profile:hover,
[dir=rtl] header .nav-right .profile-dropdown .onhover-show-div .page-link:hover {
    transform: translate(-5px)
}

header .nav-right .language-dropdown .onhover-show-div .lang+li,
header .nav-right .language-dropdown .onhover-show-div .currency+li,
header .nav-right .language-dropdown .onhover-show-div .profile+li,
header .nav-right .language-dropdown .onhover-show-div .page-link+li,
header .nav-right .currency-dropdown .onhover-show-div .lang+li,
header .nav-right .currency-dropdown .onhover-show-div .currency+li,
header .nav-right .currency-dropdown .onhover-show-div .profile+li,
header .nav-right .currency-dropdown .onhover-show-div .page-link+li,
header .nav-right .profile-dropdown .onhover-show-div .lang+li,
header .nav-right .profile-dropdown .onhover-show-div .currency+li,
header .nav-right .profile-dropdown .onhover-show-div .profile+li,
header .nav-right .profile-dropdown .onhover-show-div .page-link+li {
    margin-top: 16px
}

header .nav-right .language-dropdown:hover .onhover-show-div,
header .nav-right .currency-dropdown:hover .onhover-show-div,
header .nav-right .profile-dropdown:hover .onhover-show-div {
    opacity: 1;
    visibility: visible;
    transform: none
}

header .nav-right .language-dropdown .profile-btn .initial-letter,
header .nav-right .currency-dropdown .profile-btn .initial-letter,
header .nav-right .profile-dropdown .profile-btn .initial-letter {
    background-color: #fff;
    padding: 5px;
    color: #171b27;
    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 .nav-right .language-dropdown .profile-btn .profile-text,
    header .nav-right .currency-dropdown .profile-btn .profile-text,
    header .nav-right .profile-dropdown .profile-btn .profile-text {
        display: none
    }
}

@media (max-width: 576px) {
    header .nav-right .language-dropdown .profile-btn,
    header .nav-right .currency-dropdown .profile-btn,
    header .nav-right .profile-dropdown .profile-btn {
        gap: 0
    }
}

header .nav-right .currency-dropdown {
    padding-left: 40px !important
}

header .nav-right .currency-dropdown .currency-btn img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px
}

header .nav-right .profile-dropdown img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 100%
}

header .nav-right .profile-dropdown .onhover-show-div {
    top: 53px;
    width: 100%
}

header .nav-right i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #ffffff
}

header .sub-header {
    background-color: #170024;
    padding: 10px 0
}

header .sub-header .d-flex {
    align-items: center;
    justify-content: space-between
}

header .sub-header .nav-right {
    gap: 0
}

header .sub-header .nav-right .nav-item-right {
    border-radius: 0;
    position: relative
}

header .sub-header .nav-right .nav-item-right+.nav-item-right {
    margin-left: 10px;
    padding-left: 10px !important
}

[dir=rtl] header .sub-header .nav-right .nav-item-right+.nav-item-right {
    margin-left: unset;
    margin-right: 10px;
    padding-left: unset !important;
    padding-right: 10px !important
}

header .sub-header .nav-right .nav-item-right+.nav-item-right:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 90%;
    width: 1px;
    border-left: 1px solid rgba(238, 238, 238, .26)
}

[dir=rtl] header .sub-header .nav-right .nav-item-right+.nav-item-right:before {
    left: unset;
    right: 0
}

header .sub-header .nav-right .currency-dropdown,
header .sub-header .nav-right .language-dropdown {
    background-color: transparent;
    border: none;
    padding: 0 !important;
    height: auto
}

header .sub-header .nav-right .currency-dropdown .currency-btn img,
header .sub-header .nav-right .currency-dropdown .language-btn img,
header .sub-header .nav-right .language-dropdown .currency-btn img,
header .sub-header .nav-right .language-dropdown .language-btn img {
    position: relative;
    inset: unset;
    transform: unset;
    height: 16px !important;
    width: 19px !important;
    border-radius: 2px
}

header .sub-header .nav-right .currency-dropdown .currency-btn span,
header .sub-header .nav-right .currency-dropdown .language-btn span,
header .sub-header .nav-right .language-dropdown .currency-btn span,
header .sub-header .nav-right .language-dropdown .language-btn span {
    gap: 6px
}

header .sub-header .location-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 220px
}

@media (max-width: 1199px) {
    header .sub-header .location-dropdown {
        max-width: calc(100px + (250 - 100) * ((100vw - 320px) / (1199 - 320)))
    }
}

header .sub-header .location-dropdown .location-btn {
    background: transparent;
    color: #fff;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: auto
}

@media (max-width: 576px) {
    header .sub-header .location-dropdown .location-btn {
        gap: 0
    }
}

header .sub-header .location-dropdown .location-btn .location {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #ffffff
}

header .sub-header .location-dropdown .location-btn .location-part {
    overflow: hidden;
    display: flex
}

header .sub-header .location-dropdown .location-btn .location-part>i {
    display: none
}

header .sub-header .location-dropdown .location-btn .location-part .location-place {
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

header .sub-header .location-dropdown .location-btn .arrow {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #ffffff
}

@media (max-width: 576px) {
    header .sub-header .location-dropdown .location-btn .arrow {
        display: none
    }
}

header .sub-header .location-dropdown .location-btn span {
    display: inline-flex;
    gap: 6px;
    line-height: 1;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block
}

@media (max-width: 576px) {
    header .sub-header .location-dropdown .location-btn span {
        display: none
    }
}

header .sub-header .location-dropdown .onhover-show-div {
    min-width: 480px;
    transition: all .3s ease-in-out;
    position: absolute;
    z-index: 3;
    border: 1px solid #eeeeee;
    background-color: #f9fafa;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -5%, 0);
    top: 45px;
    left: 0;
    box-shadow: none;
    padding: 15px;
    border-radius: 12px;
    width: 100%
}

body.dark header .sub-header .location-dropdown .onhover-show-div {
    background-color: #323640;
    border: 1px solid #454851
}

[dir=rtl] header .sub-header .location-dropdown .onhover-show-div {
    left: unset;
    right: 0
}

@media (max-width: 767px) {
    header .sub-header .location-dropdown .onhover-show-div {
        left: -120px !important
    }
    [dir=rtl] header .sub-header .location-dropdown .onhover-show-div {
        left: unset !important;
        right: -120px !important
    }
}

@media (max-width: 550px) {
    header .sub-header .location-dropdown .onhover-show-div {
        min-width: calc(300px + (480 - 300) * ((100vw - 320px) / (550 - 320)))
    }
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title {
    display: flex;
    align-items: start;
    gap: 4px
}

[dir=rtl] header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title {
    align-items: end
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title .location-icon {
    margin-top: 4px;
    --Iconsax-Color: #222;
    --Iconsax-Size: 16px
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title h4 {
    font-size: 16px;
    color: #171b27;
    line-height: 1.5
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn {
    margin-left: auto;
    cursor: poRaleway
}

[dir=rtl] header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn {
    margin-left: unset;
    margin-right: auto
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn i {
    --Iconsax-Color: var(--primary-color)
}

body.dark header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title h4 {
    color: #fff
}

body.dark header .sub-header .location-dropdown .onhover-show-div .detect-location .detect-location-title .location-icon {
    --Iconsax-Color: #ffffff
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px
}

@media (max-width: 550px) {
    header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content {
        display: block
    }
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn {
    border-radius: 8px
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:hover,
header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:active {
    color: #fff;
    background-color: var(--primary-color);
    border-color: transparent
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:hover i,
header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:active i {
    --Iconsax-Color: #ffffff
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn i {
    transition: all .2s ease-in-out;
    --Iconsax-Color: var(--primary-color)
}

@media (max-width: 550px) {
    header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn {
        width: 100%
    }
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn {
    display: inline-block;
    width: auto;
    border-radius: 8px
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn:hover {
    color: var(--primary-color);
    background-color: transparent
}

@media (max-width: 550px) {
    header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn {
        width: 100%
    }
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content span {
    color: #647683;
    font-weight: 600
}

@media (max-width: 550px) {
    header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content span {
        width: 100%;
        margin: 10px 0;
        text-align: center
    }
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .or-text {
    text-align: center
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .location-search {
    background-color: #f9fafa
}

header .sub-header .location-dropdown .onhover-show-div .detect-location .location-content .location-search::placeholder {
    color: #a3aab1
}

header .sub-header .location-dropdown .onhover-show-div .detect-location :hover a {
    color: #fff
}

header .sub-header .location-dropdown .onhover-show-div .location {
    cursor: poRaleway;
    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 .sub-header .location-dropdown .onhover-show-div .location>div h5 {
    color: #fff;
    font-size: 18px
}

header .sub-header .location-dropdown .onhover-show-div .location>div h6 {
    color: #ffffff80;
    font-size: 16px;
    margin-top: 4px
}

header .sub-header .location-dropdown .onhover-show-div .location>div img {
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important
}

header .sub-header .location-dropdown .onhover-show-div .location>div i {
    margin-top: 3px;
    --Iconsax-Color: rgba(255, 255, 255, .6)
}

header .sub-header .location-dropdown .onhover-show-div .location:hover {
    color: #fff
}

header .sub-header .location-dropdown .onhover-show-div .location:hover i {
    --Iconsax-Color: #ffffff
}

header .sub-header .location-dropdown .onhover-show-div .location+li {
    margin-top: 16px
}

header .sub-header .location-dropdown .onhover-show-div.show {
    visibility: visible;
    opacity: 1;
    top: 36px;
    left: 0;
    z-index: 999
}

[dir=rtl] header .sub-header .location-dropdown .onhover-show-div.show {
    left: unset;
    right: 0
}

header .sub-header .location-dropdown .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000bf;
    z-index: 900
}

[dir=rtl] header .sub-header .location-dropdown .overlay {
    left: unset;
    right: 0
}

header.active .top-header {
    position: fixed;
    top: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 4px 4px 16px #c7c7c73d
}

body.dark header.active .top-header {
    background-color: #252934;
    box-shadow: 4px 4px 16px #c7c7c700
}

header.active .top-header .navbar {
    background-color: transparent;
    padding: calc(12px + .00375*(100vw - 320px)) 0;
    margin-top: 0;
    box-shadow: unset;
    gap: 14px
}

body.dark header.active .top-header .navbar {
    background-color: transparent;
    box-shadow: unset
}

header:has(~.breadcrumb-section) .top-header {
    position: relative;
    inset: unset
}

header:has(~.breadcrumb-section) .top-header .navbar {
    background-color: transparent;
    box-shadow: none;
    margin: 0;
    padding-inline: unset
}

body.dark header:has(~.breadcrumb-section) .top-header .navbar {
    background-color: transparent;
    box-shadow: none
}

header:has(~.breadcrumb-section).active .top-header {
    position: fixed;
    top: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 4px 4px 16px #c7c7c73d
}

header:has(~.breadcrumb-section).active .top-header .navbar {
    background-color: transparent;
    padding: calc(12px + .00375*(100vw - 320px)) 0;
    margin-top: 0;
    box-shadow: unset;
    gap: 14px
}

.offer-text {
    line-height: 1.4;
    color: #fff;
    text-align: center;
    font-size: 15px
}

.offer-text strong,
.offer-text a {
    color: var(--primary-color);
    font-weight: 600
}

.offer-header-slider {
    height: 21px
}

.newsletter-section {
    background-color: #fafafa;
    padding-block: calc(32px + .0175*(100vw - 320px))
}

body.dark .newsletter-section {
    background-color: #252934
}

.newsletter-section .newsletter-content {
    position: relative;
    width: 100%;
    padding-top: 1px
}

body.dark .newsletter-section .newsletter-content .newsletter-content h2 {
    color: #fff
}

body.dark .newsletter-section .newsletter-content .newsletter-content p {
    color: #fff9
}

.newsletter-section .newsletter-content .newsletter-content h2 {
    text-transform: unset;
    font-weight: 700;
    line-height: 1.3;
    font-size: calc(26px + .005*(100vw - 320px));
    margin-top: -9px;
    letter-spacing: calc(.4px + (.9 - .4) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 576.98px) {
    .newsletter-section .newsletter-content .newsletter-content h2 {
        line-height: 1.1;
        margin-top: -5px
    }
}

.newsletter-section .newsletter-content .newsletter-content p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.3;
    color: #647683;
    margin: 0;
    margin-top: calc(6px + (0 - 6) * ((100vw - 992px) / (1920 - 992)))
}

.newsletter-section .newsletter-content .newsletter-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.newsletter-section .newsletter-content .newsletter-detail .form-group {
    display: flex;
    gap: 6px;
    padding-top: 0;
    margin: 0
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .form-control {
    border-radius: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320)));
    background-color: #fff;
    color: #fff;
    padding: calc(11px + (14 - 11) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border: 1px solid #eeeeee
}

body.dark .newsletter-section .newsletter-content .newsletter-detail .form-group .form-control {
    background-color: #323640;
    border-color: #454851
}

body.dark .newsletter-section .newsletter-content .newsletter-detail .form-group .form-control::placeholder {
    color: #fff9
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .form-control::placeholder {
    color: #647683
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn {
    letter-spacing: .3px;
    font-size: calc(15px + .00125*(100vw - 320px));
    font-weight: 500;
    border-radius: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320)));
    width: max-content;
    padding: calc(10px + (13 - 10) * ((100vw - 320px) / (1920 - 320))) calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    background-color: var(--primary-color);
    color: #fff
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn:hover {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color)
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn:hover i {
    --Iconsax-Color: var(--primary-color)
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn i {
    --Iconsax-Size: calc(20px + .00125*(100vw - 320px));
    --Iconsax-Color: #fff
}

[dir=rtl] .newsletter-section .newsletter-content .newsletter-icons {
    order: 1
}

@media (max-width: 767.98px) {
    .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: 991.98px) {
    .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: var(--dark-green-gradient);
    padding: calc(30px + .0125*(100vw - 320px)) 0 0;
    position: relative;
    z-index: 0;
    overflow: hidden
}

body.dark .footer-section {
    background: #171b27
}

@media (max-width: 600px) {
    .footer-section {
        padding-bottom: calc(70px + (84 - 70) * ((100vw - 320px) / (601 - 320)))
    }
}

.footer-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://rythmevie.comm/build/assets/footer-bg-8c06dfdc.jpg);
    mix-blend-mode: multiply;
    z-index: -1;
    background-size: contain
}

.footer-section .social-media {
    margin: 0;
    gap: calc(12px + .00125*(100vw - 320px));
    flex-direction: unset
}

@media (max-width: 575.98px) {
    .footer-section .social-media {
        justify-content: center;
        width: 100%;
        padding: 0
    }
}

.footer-section .social-media li a:hover .feather {
    stroke: var(--primary-color);
    transform: translateY(-3.8px)
}

.footer-section .social-media li a .feather {
    stroke-width: 1.4;
    width: calc(20px + .00125*(100vw - 320px));
    stroke: #fff;
    transition: all .2s ease-in-out
}

.footer-section .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-block: calc(12px + (23 - 12) * ((100vw - 320px) / (1920 - 320))) calc(15px + .005*(100vw - 320px));
    margin-top: calc(14px + .01*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .footer-section .copyright {
        flex-direction: column;
        align-items: start;
        text-align: center
    }
    [dir=rtl] .footer-section .copyright {
        align-items: end
    }
}

.footer-section .copyright p {
    color: #fff;
    margin: 0;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1200 - 320)));
    white-space: nowrap
}

@media (max-width: 575.98px) {
    .footer-section .copyright p {
        text-align: center;
        width: 100%
    }
}

.footer-section .copyright .iconsax {
    padding-right: 5px;
    --Iconsax-Color: #ffffff;
    --Iconsax-Size: calc(18px + (22 - 18) * ((100vw - 320px) / (1200 - 320)))
}

.footer-section .copyright-2 {
    gap: 10px
}

@media (max-width: 575.98px) {
    .footer-section .copyright-2 .footer-logo {
        width: 100%
    }
    [dir=rtl] .footer-section .copyright-2 .footer-logo {
        text-align: right
    }
}

.footer-section .copyright-2 .footer-logo img {
    height: calc(44px + (55 - 44) * ((100vw - 320px) / (1920 - 320)))
}

.footer-section .copyright-2 p {
    color: #ffffffb3;
    margin-top: calc(6px + .0075*(100vw - 320px));
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.4;
    letter-spacing: .2px
}

.footer-section .copyright-2 .iconsax {
    padding-right: 5px;
    --Iconsax-Color: #ffffff;
    --Iconsax-Size: calc(18px + (22 - 18) * ((100vw - 320px) / (1200 - 320)))
}

.footer-section i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: var(--primary-color)
}

.footer-section .heading-footer {
    font-weight: 600;
    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: 575.98px) {
    .footer-section .heading-footer {
        margin-bottom: 6px;
        cursor: poRaleway;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 6px
    }
}

.footer-section .heading-footer .down-arrow {
    margin-left: auto;
    --Iconsax-Color: #ffffff;
    transition: transform .15s ease-in-out
}

[dir=rtl] .footer-section .heading-footer .down-arrow {
    margin-left: unset;
    margin-right: auto
}

.footer-section ul {
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media (max-width: 575.98px) {
    .footer-section ul {
        gap: 6px;
        padding-left: 5px
    }
}

.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;
    box-shadow: none;
    font-size: 16px
}

@media (max-width: 575.98px) {
    .footer-section ul li .nav-link {
        display: flex;
        align-items: center;
        gap: 7px
    }
}

.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: 575.98px) {
    .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 {
        transform: unset
    }
}

.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: 575.98px) {
    .footer-section ul li .nav-link:before {
        opacity: 1;
        visibility: visible;
        background-color: #ffffff4d;
        height: 5px;
        width: 5px;
        position: relative;
        inset: unset;
        display: block;
        transform: unset;
        border-radius: 100%
    }
    [dir=rtl] .footer-section ul li .nav-link:before {
        position: relative;
        inset: unset
    }
}

.footer-section .btn {
    border-radius: calc(6px + (7 - 6) * ((100vw - 320px) / (1920 - 320)));
    width: max-content;
    padding: calc(9px + (10 - 9) * ((100vw - 320px) / (1920 - 320))) calc(22px + .0075*(100vw - 320px));
    margin-top: calc(16px + .0075*(100vw - 320px));
    font-size: calc(16px + .00125*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .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: poRaleway;
    transition: background-color .2s ease-in-out
}

.autocomplete-results .autocomplete-item:hover img {
    box-shadow: 3px 3px 9px #eeeeee61
}

.autocomplete-results .autocomplete-item:hover h5 {
    color: var(--primary-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: 767.98px) {
    .slick-list .slick-track {
        margin-inline: -5px
    }
}

.slick-list .slick-track .slick-slide {
    padding-inline: 15px
}

@media (max-width: 767.98px) {
    .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://rythmevie.comm/build/assets/preview-5841e3ac.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://rythmevie.comm/build/assets/preview-disable-c987f3be.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://rythmevie.comm/build/assets/next-4ac3bd7f.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://rythmevie.comm/build/assets/next-disable-0441b0d8.svg) !important
}

.service-list-section .card {
    border: none
}

.service-list-section .card .card-image {
    border-radius: 5px;
    position: relative;
    overflow: hidden
}

.service-list-section .card .card-image .time {
    position: absolute;
    bottom: calc(8px + .00125*(100vw - 320px));
    right: calc(8px + .00125*(100vw - 320px));
    background-color: #fff;
    padding: 3px calc(7px + .00125*(100vw - 320px));
    border-radius: calc(4px + (5 - 4) * ((100vw - 320px) / (1920 - 320)));
    text-transform: capitalize
}

body.dark .service-list-section .card .card-image .time {
    background-color: #323640
}

.service-list-section .card .card-image .time .iconsax {
    --Iconsax-Size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.job-request-section .job-details .position-relative .job-image {
    border-radius: 11px
}

.job-request-section .job-details .position-relative>div {
    margin-top: calc(-113px + (-191 - -113) * ((100vw - 991px) / (1920 - 991)));
    margin-bottom: calc(-47px + (-71 - -47) * ((100vw - 991px) / (1920 - 991)));
    margin-right: 64px
}

.job-request-section .job-details .position-relative>div img {
    height: calc(240px + (360 - 240) * ((100vw - 991px) / (1920 - 991)))
}

.job-request-section .job-details .job-request-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.job-request-section .job-details .job-request-content a {
    display: inline-block
}

.job-request-section .job-details .job-request-content h3 {
    font-weight: 700;
    font-size: calc(20px + .0075*(100vw - 320px));
    color: #171b27;
    width: 90%
}

@media (max-width: 991.98px) {
    .job-request-section .job-details .job-request-content h3 {
        width: 100%
    }
}

body.dark .job-request-section .job-details .job-request-content h3 {
    color: #fff
}

.job-request-section .job-details .job-request-content p {
    width: 80%;
    font-size: calc(14px + .0025*(100vw - 320px));
    color: #647683;
    line-height: 1.5;
    margin-top: calc(8px + .0025*(100vw - 320px));
    margin-bottom: calc(16px + .0075*(100vw - 320px))
}

@media (max-width: 991.98px) {
    .job-request-section .job-details .job-request-content p {
        width: 100%
    }
}

body.dark .job-request-section .job-details .job-request-content p {
    color: #fff9
}

.job-request-section .job-details .job-request-content .btn {
    width: max-content
}

.job-request-section .job-details .job-request-content ul {
    display: grid;
    margin-top: 18px;
    gap: 3px
}

.job-request-section .job-details .job-request-content ul li {
    font-size: 16px;
    line-height: 1.5
}

.job-request-section .job-details .job-request-content ul li .feather {
    width: 20px
}

.job-request-section-2 .job-details .job-image {
    border-radius: calc(8px + (11 - 8) * ((100vw - 320px) / (1920 - 320)));
    height: calc(194px + .15375*(100vw - 320px));
    object-fit: cover;
    width: 100%
}

.job-request-section-2 .job-details .job-request-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.job-request-section-2 .job-details .job-request-content a {
    display: inline-block
}

.job-request-section-2 .job-details .job-request-content h3 {
    font-weight: 700;
    font-size: calc(20px + .0075*(100vw - 320px));
    color: #171b27
}

body.dark .job-request-section-2 .job-details .job-request-content h3 {
    color: #fff
}

.job-request-section-2 .job-details .job-request-content p {
    margin-top: calc(6px + .00375*(100vw - 320px));
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #647683;
    line-height: 1.5
}

body.dark .job-request-section-2 .job-details .job-request-content p {
    color: #fff9
}

.job-request-section-2 .job-details .job-request-content ul {
    display: grid;
    margin-top: calc(12px + .00375*(100vw - 320px));
    gap: 5px;
    margin-bottom: calc(16px + .0075*(100vw - 320px))
}

.job-request-section-2 .job-details .job-request-content ul li {
    font-size: calc(14px + .00125*(100vw - 320px));
    line-height: 1.5
}

.job-request-section-2 .job-details .job-request-content ul li .feather {
    width: calc(18px + .00125*(100vw - 320px))
}

.job-request-section-2 .job-details .job-request-content .btn {
    width: max-content
}

.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;
    position: relative
}

.about-us-section .about-us-content:before,
.about-us-section-1 .about-us-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(90deg, #ffffff 19%, rgba(255, 255, 255, .4) 100%);
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to right, #ffffff, transparent);
    mask-image: linear-gradient(to right, #ffffff, transparent)
}

body.dark .about-us-section .about-us-content:before,
body.dark .about-us-section-1 .about-us-content:before {
    background: linear-gradient(90deg, #171b27 19%, rgba(23, 27, 39, .4) 100%);
    -webkit-mask-image: linear-gradient(to right, #171b27, transparent);
    mask-image: linear-gradient(to right, #171b27, transparent)
}

.about-us-section .about-us-content:after,
.about-us-section-1 .about-us-content:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 34%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(-90deg, #ffffff 19%, rgba(255, 255, 255, .4) 100%);
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to left, #ffffff, transparent);
    mask-image: linear-gradient(to left, #ffffff, transparent)
}

body.dark .about-us-section .about-us-content:after,
body.dark .about-us-section-1 .about-us-content:after {
    background: linear-gradient(-90deg, #171b27 19%, rgba(23, 27, 39, .4) 100%);
    -webkit-mask-image: linear-gradient(to left, #171b27, transparent);
    mask-image: linear-gradient(to left, #171b27, transparent)
}

.about-us-section .about-us-content .swiper-wrapper,
.about-us-section-1 .about-us-content .swiper-wrapper {
    transition-timing-function: linear
}

body.dark .about-us-section .about-us-content .card,
body.dark .about-us-section-1 .about-us-content .card {
    border-color: #454851;
    background-color: #252934
}

.about-us-section .about-us-content .card .card-body,
.about-us-section-1 .about-us-content .card .card-body {
    padding: calc(12px + .00375*(100vw - 320px)) calc(14px + .00375*(100vw - 320px))
}

.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: calc(8px + .00125*(100vw - 320px));
    margin: 0;
    margin-top: calc(16px + .0025*(100vw - 320px))
}

.about-us-section .about-us-content .card .card-body .card-title h3,
.about-us-section-1 .about-us-content .card .card-body .card-title h3 {
    font-size: calc(16px + .00125*(100vw - 320px))
}

body.dark .about-us-section .about-us-content .card .card-body .card-title h3,
body.dark .about-us-section-1 .about-us-content .card .card-body .card-title h3 {
    color: #fff
}

.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: calc(46px + .00375*(100vw - 320px));
    height: calc(46px + .00375*(100vw - 320px));
    border-radius: 6px
}

.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: calc(13px + .00125*(100vw - 320px));
    height: calc(13px + .00125*(100vw - 320px));
    border-radius: 0
}

.about-us-section .about-us-content .card .card-body .card-title .rate,
.about-us-section-1 .about-us-content .card .card-body .card-title .rate {
    display: flex;
    align-items: center;
    gap: 8px
}

.about-us-section .about-us-content .card .card-body .card-title .rate .rating-list,
.about-us-section-1 .about-us-content .card .card-body .card-title .rate .rating-list {
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 2px
}

.about-us-section .about-us-content .card .card-body .card-title .rate small,
.about-us-section-1 .about-us-content .card .card-body .card-title .rate small {
    margin-top: 1px;
    font-weight: 400;
    color: #171b27
}

body.dark .about-us-section .about-us-content .card .card-body .card-title .rate small,
body.dark .about-us-section-1 .about-us-content .card .card-body .card-title .rate small {
    color: #fffc
}

.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: #171b27;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.4;
    width: 100%;
    transition: all .6s ease
}

body.dark .about-us-section .about-us-content .card .card-body .card-detail p,
body.dark .about-us-section-1 .about-us-content .card .card-body .card-detail p {
    color: #fff
}

.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 .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: 991.98px) {
    .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 {
    position: relative;
    inset: unset;
    margin: 14px auto 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.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(--primary-color);
    margin: 0;
    border-radius: 100px;
    transition: all .2s ease
}

.about-us-section .about-us-content .swiper-pagination .swiper-pagination-bullet-active,
.about-us-section-1 .about-us-content .swiper-pagination .swiper-pagination-bullet-active {
    width: 25px
}

.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: #647683;
    font-weight: 500
}

.more-section .more-content p a,
.feature-section .more-content p a {
    color: var(--primary-color)
}

.more-section .feature-content .feature-box,
.feature-section .feature-content .feature-box {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    background-color: var(--primary-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: #ffffff
}

.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: #171b2799
}

.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(23, 27, 39, .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: #171b27cc
}

.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: var(--primary-color)
}

.about-us .section-wrap {
    margin-top: 42px
}

.about-us .image-grp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: calc(10px + .00625*(100vw - 320px))
}

.about-us .image-grp img {
    border-radius: 12px;
    object-fit: cover;
    aspect-ratio: 32/25
}

.about-us .image-grp-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: calc(10px + .00625*(100vw - 320px))
}

.about-us .image-grp-1 img {
    border-radius: 12px;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 133/50
}

.about-us .content-detail {
    color: #171b27cc
}

.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))
}

[dir=rtl] .about-us .content-detail .item-lists {
    margin: 0
}

.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: #ffffff;
    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)));
    position: relative;
    z-index: 0;
    overflow: hidden
}

.about-us .content-detail .item-lists li .icon-box i:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .8;
    z-index: -1
}

.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: #171b27
}

.about-us .content-detail .item-lists li .detail p {
    line-height: 1.5;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin-bottom: 0;
    color: #647683
}

.about-us .about-list-box .item-list {
    display: flex;
    align-items: start;
    gap: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2.87px 17.2px #00162e0f
}

.about-us .about-list-box .item-list .icon-box i {
    --Iconsax-Size: 35px;
    --Iconsax-Color: var(--primary-color);
    margin-top: 3px
}

.about-us .about-list-box .item-list .detail h4 {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 4px;
    color: #171b27
}

.about-us .about-list-box .item-list .detail p {
    line-height: 1.5;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin-bottom: 0;
    color: #647683
}

body.dark .about-us .about-list-box .item-list {
    background-color: #252934
}

body.dark .about-us .about-list-box .item-list h4 {
    color: #fff
}

body.dark .about-us .about-list-box .item-list p {
    color: #fff9
}

.about-us-section-1 .title-1 {
    width: 100%
}

.about-us-section-1 .about-us-content .card {
    box-shadow: 0 0 8px #171b2726;
    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: var(--primary-color)
}

.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: #eee;
    height: 2px;
    width: 25px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail h3 {
    font-size: 16px;
    color: #647683
}

.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: #171b27cc;
    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: #f9fafa;
    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(--primary-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: #171b2799
}

.log-in-section {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    height: 100vh
}

.log-in-section .login-content {
    height: 100%
}

@media (min-width: 1400px) {
    .log-in-section .login-content>div:first-child {
        width: 46%
    }
    .log-in-section .login-content>div:last-child {
        width: 54%
    }
}

.log-in-section .login-content .auth-right-side,
.log-in-section .login-content .auth-right-side .swiper {
    min-height: 100vh
}

.log-in-section .login-content .auth-right-side .swiper .swiper-pagination .swiper-pagination-bullet {
    background-color: #eee;
    border-radius: 100px;
    transition: all .3s
}

.log-in-section .login-content .auth-right-side .swiper .swiper-pagination .swiper-pagination-bullet-active {
    width: 30px;
    background-color: var(--primary-color)
}

.log-in-section .login-content .auth-right-side .auth-service-box {
    position: relative
}

.log-in-section .login-content .auth-right-side .auth-service-box img {
    width: 100%;
    height: 100vh;
    object-fit: cover
}

.log-in-section .login-content .auth-right-side .auth-service-box .auth-service-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    margin: 0;
    padding: calc(42px + .005*(100vw - 320px)) calc(15px + (22 - 15)*((100vw - 320px) /(1920 - 320))) calc(47px + (54 - 47)*((100vw - 320px) /(1920 - 320)));
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(0deg, #171B27 5%, rgba(23, 27, 39, 0) 100%)
}

.log-in-section .login-content .auth-right-side .auth-service-box .auth-service-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(0deg, #222222 5%, rgba(34, 34, 34, 0) 100%);
    mask-image: linear-gradient(0deg, #222222 5%, rgba(34, 34, 34, 0) 100%)
}

.log-in-section .login-content .auth-right-side .auth-service-box .auth-service-content h3 {
    font-size: calc(30px + (37 - 30)*((100vw - 1199px) /(1920 - 1199)));
    margin-bottom: calc(10px + (13 - 10)*((100vw - 1199px) /(1920 - 1199)));
    letter-spacing: .4px
}

body.dark .log-in-section .login-content .auth-right-side .auth-service-box .auth-service-content h3 {
    color: #fff
}

.log-in-section .login-content .auth-right-side .auth-service-box .auth-service-content p {
    font-size: calc(16px + (18 - 16)*((100vw - 1199px) /(1920 - 1199)));
    line-height: 1.5;
    color: #fffc
}

.image-contain {
    background-color: var(--primary-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 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative
}

.login-main .login-card {
    padding: calc(15px + .0125*(100vw - 320px)) calc(15px + (104 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin: auto;
    width: 100%
}

@media (max-width: 1199.98px) {
    .login-main .login-card {
        max-width: 785px;
        text-align: center
    }
}

.login-main .login-card .auth-logo {
    display: block;
    text-align: center;
    margin-bottom: calc(10px + .01875*(100vw - 320px))
}

.login-main .login-card .auth-logo img {
    width: calc(180px + .01875*(100vw - 320px))
}

.login-main .login-card .login-title {
    width: 100%;
    padding-top: 13px
}

body.dark .login-main .login-card .login-title h2 {
    color: #fff
}

body.dark .login-main .login-card .login-title p {
    color: #fff9
}

.login-main .login-card .login-title h2 {
    font-weight: 700;
    font-size: calc(26px + .005*(100vw - 320px));
    letter-spacing: calc(.2px + (.5 - .2) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .login-title p {
    color: #647683;
    padding-top: 6px;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
    margin: 0
}

.login-main .login-card .login-title p span {
    color: #171b27;
    font-weight: 600
}

.login-main .login-card .login-detail {
    width: 100%;
    margin: calc(18px + .00375*(100vw - 320px)) 0 0
}

.login-main .login-card .login-detail .form-group {
    position: relative
}

@media (max-width: 1199.98px) {
    .login-main .login-card .login-detail .form-group {
        text-align: left
    }
    [dir=rtl] .login-main .login-card .login-detail .form-group {
        text-align: right
    }
}

body.dark .login-main .login-card .login-detail .form-group label {
    color: #fff
}

.login-main .login-card .login-detail .form-group i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    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: 50%;
    transform: translateY(-50%);
    right: 15px;
    left: unset;
    cursor: poRaleway
}

[dir=rtl] .login-main .login-card .login-detail .form-group .toggle-password {
    left: 15px;
    right: unset
}

.login-main .login-card .login-detail .form-group .toggle-password i {
    position: relative;
    inset: unset;
    transform: unset
}

.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 .form-control {
    border-radius: calc(6px + .00125*(100vw - 320px));
    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: #f9fafa;
    color: #171b27cc;
    border: 1px solid #eeeeee
}

[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.pr-45 {
    padding-right: 45px !important
}

[dir=rtl] .login-main .login-card .login-detail .form-group .form-control.pr-45 {
    padding-inline: 45px !important
}

.login-main .login-card .login-detail .form-group .form-control:focus {
    box-shadow: none
}

.login-main .login-card .login-detail .form-group .form-control::placeholder {
    color: #647683
}

body.dark .login-main .login-card .login-detail .form-group .form-control {
    background-color: #323640;
    border-color: #454851;
    color: #fff
}

body.dark .login-main .login-card .login-detail .form-group .form-control::placeholder {
    color: #fff9
}

body.dark .login-main .login-card .login-detail .form-group .form-control:-webkit-autofill,
body.dark .login-main .login-card .login-detail .form-group .form-control:-webkit-autofill:hover,
body.dark .login-main .login-card .login-detail .form-group .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #323640 inset !important;
    -webkit-text-fill-color: #fff !important
}

.login-main .login-card .login-detail .forgot-pass {
    margin-top: calc(8px + .0025*(100vw - 320px));
    text-align: end
}

.login-main .login-card .login-detail .forgot-pass a {
    font-size: calc(14px + .00125*(100vw - 320px));
    line-height: 1.4;
    font-weight: 500
}

.login-main .login-card .login-detail .btn {
    margin-top: 25px;
    border-radius: calc(6px + .00125*(100vw - 320px));
    width: 100%;
    justify-content: center;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.login-main .login-card .login-detail .btn:focus {
    box-shadow: none
}

.login-main .login-card .login-detail .not-member {
    font-size: calc(14px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    text-align: center;
    padding-top: 16px;
    color: #171b27c7
}

body.dark .login-main .login-card .login-detail .not-member {
    color: #fff
}

.login-main .login-card .login-detail .not-member a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline
}

.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 .login-detail .category-list-box {
    text-align: left
}

[dir=rtl] .login-main .login-card .login-detail .category-list-box {
    text-align: right
}

.login-main .login-card .login-detail .category-list-box label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 6px;
    position: relative;
    color: #171b27c4
}

body.dark .login-main .login-card .login-detail .category-list-box label {
    color: #fff
}

.login-main .login-card .login-detail .category-list-box 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 .category-list-box label.error:before {
    display: none
}

.login-main .login-card .login-detail .category-list-box .phone-detail .select2 {
    width: 120px !important
}

.login-main .login-card .login-detail .category-list-box .phone-detail .select2.select2-container--default .selection .select2-selection--single {
    background-color: transparent;
    border: 1px solid #eeeeee;
    border-width: 0 1px 0 0
}

.login-main .login-card .login-detail .category-list-box .phone-detail>.form-control {
    padding: 10px 16px;
    color: #fff
}

.login-main .login-card .login-detail .category-list-box .phone-detail>.form-control::placeholder {
    color: #fff9
}

[dir=rtl] .login-main .login-card .login-detail .category-list-box .phone-detail>.form-control {
    text-align: right
}

body.dark .login-main .login-card .login-detail .category-list-box .phone-detail .select2,
body.dark .login-main .login-card .login-detail .category-list-box .phone-detail .form-control {
    background-color: #323640
}

.login-main .login-card .otp-box {
    background-color: transparent
}

.login-main .login-card .other-options {
    width: 100%;
    padding: calc(14px + .00625*(100vw - 320px)) 0 0
}

.login-main .login-card .options {
    position: relative;
    margin: 0 auto;
    color: #647683;
    font-size: calc(14px + .00125*(100vw - 320px));
    width: 100%;
    text-align: center;
    z-index: 0
}

.login-main .login-card .options:before {
    content: "";
    position: absolute;
    left: 0;
    z-index: -1;
    border-top: 1px dashed rgba(100, 118, 131, .4);
    width: 100%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%)
}

.login-main .login-card .options span {
    text-transform: capitalize;
    background-color: #fff;
    padding-inline: calc(8px + .0025*(100vw - 320px))
}

body.dark .login-main .login-card .options span {
    background-color: #171b27
}

.login-main .login-card .social-media {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px + .00375*(100vw - 320px));
    margin-top: calc(12px + .005*(100vw - 320px))
}

@media (max-width: 565px) {
    .login-main .login-card .social-media {
        flex-direction: column
    }
}

.login-main .login-card .social-media li {
    width: 100%
}

.login-main .login-card .social-media .social-icon {
    background-color: #f9fafa;
    border: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8px + .00125*(100vw - 320px));
    padding: 12px;
    border-radius: 6px
}

.login-main .login-card .social-media .social-icon span {
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #171b27;
    font-weight: 500
}

.login-main .login-card .social-media .social-icon img {
    width: calc(20px + (25 - 20)*((100vw - 320px) /(1920 - 320)));
    min-width: calc(20px + (25 - 20)*((100vw - 320px) /(1920 - 320)))
}

body.dark .login-main .login-card .social-media .social-icon {
    background-color: #323640;
    border-color: #454851
}

body.dark .login-main .login-card .social-media .social-icon span {
    color: #fff
}

.terms p {
    font-size: calc(14px + .00125*(100vw - 320px));
    margin: 0;
    color: #647683
}

.terms {
    position: relative;
    padding-bottom: 25px
}

.terms label {
    position: absolute;
    bottom: -22px
}

.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: 100%;
    height: auto;
    padding: 11px;
    font-size: 16px;
    border-radius: 8px;
    text-align: center;
    background-color: #f9fafa;
    color: #171b27;
    border: 1px solid #eeeeee
}

.otp-field input::placeholder {
    color: #647683
}

body.dark .otp-field input {
    background-color: #252934;
    border-color: #454851;
    color: #fff
}

body.dark .otp-field input::placeholder {
    color: #fff
}

.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: #171b27;
    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+.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: 1199.98px) {
    .blog-section .blog-content .blog-main+.blog-main {
        border: none
    }
}

@media (max-width: 1199.98px) {
    .blog-section .blog-content .blog-main {
        border: none
    }
    .blog-section .blog-content .blog-main:nth-child(2n) {
        border-left: 1px solid #eeeeee !important
    }
    [dir=rtl] .blog-section .blog-content .blog-main:nth-child(2n) {
        border-right: 1px solid #eeeeee !important;
        border-left: unset !important
    }
}

@media (max-width: 767.98px) {
    .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-head {
    border-radius: 9px;
    overflow: hidden
}

.blog-section .blog-content .card .card-head .card-img {
    transition: .5s ease
}

.blog-section .blog-content .card .card-body {
    padding: calc(10px + .005*(100vw - 320px)) 0 0;
    color: #171b27cc
}

.blog-section .blog-content .card .card-body h4 {
    font-size: calc(18px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    color: #171b27;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

@media (max-width: 650px) {
    .blog-section .blog-content .card .card-body h4 {
        -webkit-line-clamp: 2
    }
}

.blog-section .blog-content .card .card-body h4 a {
    color: #171b27;
    display: block
}

body.dark .blog-section .blog-content .card .card-body h4 a {
    color: #fff
}

.blog-section .blog-content .card .card-body p {
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #647683;
    margin-top: calc(3px + .00125*(100vw - 320px));
    line-height: 1.5;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

@media (max-width: 650px) {
    .blog-section .blog-content .card .card-body p {
        -webkit-line-clamp: 3
    }
}

body.dark .blog-section .blog-content .card .card-body p {
    color: #fff9
}

.blog-section .blog-content .card .card-body p.four {
    -webkit-line-clamp: 3
}

.blog-section .blog-content .card .card-body .link {
    font-size: calc(16px + (17 - 16) * ((100vw - 320px) / (1920 - 320)));
    letter-spacing: .4px;
    font-weight: 500;
    text-decoration: underline;
    margin-top: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center;
    gap: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)))
}

.blog-section .blog-content .card .card-body i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: var(--primary-color)
}

.blog-section .blog-content .card .card-body .blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: calc(10px + .00125*(100vw - 320px));
    font-size: 16px;
    padding-top: calc(10px + .00125*(100vw - 320px));
    border-top: 1px solid #eeeeee
}

.blog-section .blog-content .card .card-body .blog-footer>span {
    text-transform: capitalize
}

.blog-section .blog-content:has(.no-data-found) {
    padding: 0;
    background-color: transparent
}

.blog-section .blog-detail {
    line-height: 1;
    color: #171b27b3;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    margin-bottom: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .blog-section .blog-detail {
    color: #ffffffb3
}

@media (max-width: 460px) {
    .blog-section .blog-detail {
        display: grid
    }
}

.blog-section .blog-detail li {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2
}

.blog-section .blog-detail li+li:before {
    content: "/"
}

@media (max-width: 460px) {
    .blog-section .blog-detail li+li:before {
        content: none
    }
}

.blog-section .blog-title {
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    display: flex;
    align-items: center
}

.blog-section .blog-title:before {
    content: none
}

.blog-section .blog-title h6 {
    font-size: 18px;
    color: var(--primary-color);
    letter-spacing: .5px;
    position: relative;
    z-index: 0;
    width: 33%
}

.blog-section .blog-title h6:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(23, 27, 39, 0) 1%, var(--primary-color) 15%, var(--primary-color) 85%, rgba(23, 27, 39, 0) 100%);
    z-index: -1
}

.blog-section .blog-title h6 span {
    background-color: #f9fafa;
    padding-right: 5px
}

.blog-section .blog-title h2 {
    font-size: 33px;
    line-height: 1.3;
    margin-top: 3px;
    background: linear-gradient(to right, #006666 0%, #138585 50%, #006666 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 3s linear infinite
}

.blog-section .blog-title p {
    color: #647683;
    font-size: 16px;
    line-height: 1.3;
    margin-top: 9px
}

.blog-section .blog-title .button-group-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px
}

.blog-section .blog-title .button-group-box .swiper-button-next,
.blog-section .blog-title .button-group-box .swiper-button-prev {
    position: relative;
    inset: unset;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    z-index: unset;
    border-radius: 100%;
    background-color: #eee
}

.blog-section .blog-title .button-group-box .swiper-button-next:after,
.blog-section .blog-title .button-group-box .swiper-button-prev:after {
    content: none
}

.blog-section .blog-title .button-group-box .swiper-button-next i,
.blog-section .blog-title .button-group-box .swiper-button-prev i {
    --Iconsax-Color: #222;
    --Iconsax-Size: 20px
}

.blog-section .border-right {
    border-right: 1px solid #eeeeee
}

[dir=rtl] .blog-section .border-right {
    border-right: none;
    border-left: 1px solid #eeeeee
}

body.dark .blog-section .border-right {
    border-color: #454851
}

.blog-section .blog-left-box {
    position: sticky
}

@media (max-width: 1199.98px) {
    .blog-section .blog-left-box {
        position: fixed;
        top: 0;
        left: calc(-320px + -.0375*(100vw - 320px));
        width: calc(310px + .025*(100vw - 320px));
        height: 100vh;
        background-color: #fff;
        transition: all .3s ease-in-out;
        z-index: 9;
        overflow: hidden auto;
        padding: calc(13px + (15 - 13) * ((100vw - 320px) / (1200 - 320))) calc(15px + (18 - 15) * ((100vw - 320px) / (1200 - 320)))
    }
    [dir=rtl] .blog-section .blog-left-box {
        left: unset;
        right: calc(-320px + -.0375*(100vw - 320px))
    }
    body.dark .blog-section .blog-left-box {
        background-color: #252934
    }
    body.dark .blog-section .blog-left-box .blog-top-title {
        background-color: #252934;
        border-color: #454851;
        color: #fff
    }
    body.dark .blog-section .blog-left-box .blog-top-title h3,
    body.dark .blog-section .blog-left-box .blog-top-title .close-filter {
        color: #fff
    }
    .blog-section .blog-left-box.show {
        left: 0
    }
    [dir=rtl] .blog-section .blog-left-box.show {
        left: unset;
        right: 0
    }
}

.blog-section .blog-left-box .blog-top-title {
    display: none;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
    margin-bottom: 12px
}

.blog-section .blog-left-box .blog-top-title h3 {
    font-weight: 600;
    font-size: calc(20px + (23 - 20) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3
}

.blog-section .blog-left-box .blog-top-title .close-filter {
    padding: 0;
    display: none;
    width: max-content;
    border: none
}

@media (max-width: 1199.98px) {
    .blog-section .blog-left-box .blog-top-title {
        padding: calc(12px + (15 - 12) * ((100vw - 320px) / (1200 - 320))) calc(15px + (18 - 15) * ((100vw - 320px) / (1200 - 320)));
        margin-bottom: 18px;
        position: sticky;
        top: calc(-15px + (-18 - -15) * ((100vw - 320px) / (1200 - 320)));
        left: 0;
        margin-top: calc(-15px + (-18 - -15) * ((100vw - 320px) / (1200 - 320)));
        margin-left: calc(-15px + (-18 - -15) * ((100vw - 320px) / (1200 - 320)));
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% + calc(15px + (18 - 15) * ((100vw - 320px) / (1200 - 320))) + calc(15px + (18 - 15) * ((100vw - 320px) / (1200 - 320))));
        background-color: #f9fafa
    }
    .blog-section .blog-left-box .blog-top-title .close-filter {
        display: block
    }
    .blog-section .blog-left-box .blog-top-title .close-filter .feather {
        width: calc(22px + (24 - 22) * ((100vw - 320px) / (1200 - 320)));
        height: calc(22px + (24 - 22) * ((100vw - 320px) / (1200 - 320)));
        stroke-width: 2.3px
    }
}

.blog-section .blog-left-box .blog-box .blog-title {
    margin-bottom: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
    display: block
}

.blog-section .blog-left-box .blog-box .blog-title h4 {
    line-height: 1.3;
    margin-top: -5px;
    font-size: calc(18px + .00125*(100vw - 320px))
}

body.dark .blog-section .blog-left-box .blog-box .blog-title h4 {
    color: #fff
}

.blog-section .blog-left-box .blog-box .form-box {
    position: relative
}

.blog-section .blog-left-box .blog-box .form-box .form-control {
    background-color: #f9fafa;
    padding: calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320))) calc(36px + .005*(100vw - 320px));
    color: #171b27;
    border: 1px solid #eeeeee
}

[dir=rtl] .blog-section .blog-left-box .blog-box .form-box .form-control {
    padding: calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320))) calc(36px + .005*(100vw - 320px)) calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320))) calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .blog-section .blog-left-box .blog-box .form-box .form-control {
    background-color: #252934;
    border-color: #454851;
    color: #fff
}

body.dark .blog-section .blog-left-box .blog-box .form-box .form-control::placeholder {
    color: #fff9
}

.blog-section .blog-left-box .blog-box .form-box .feather {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(11px + (12 - 11) * ((100vw - 320px) / (1920 - 320)));
    color: #647683;
    width: calc(18px + .0025*(100vw - 320px));
    height: calc(18px + .0025*(100vw - 320px))
}

[dir=rtl] .blog-section .blog-left-box .blog-box .form-box .feather {
    left: unset;
    right: calc(11px + (12 - 11) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .blog-section .blog-left-box .blog-box .form-box .feather {
    color: #fff9
}

.blog-section .blog-left-box .blog-box+.blog-box {
    margin-top: calc(16px + .0025*(100vw - 320px));
    padding-top: calc(16px + .0025*(100vw - 320px));
    border-top: 1px solid #eeeeee
}

body.dark .blog-section .blog-left-box .blog-box+.blog-box {
    border-color: #454851
}

.blog-section .blog-left-box .blog-box .blog-list {
    display: grid;
    gap: calc(10px + .00125*(100vw - 320px))
}

.blog-section .blog-left-box .blog-box .blog-list li {
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(8px + .00125*(100vw - 320px));
    line-height: 1;
    margin-left: 6px;
    transition: all .2s ease-in-out
}

[dir=rtl] .blog-section .blog-left-box .blog-box .blog-list li {
    margin-left: unset;
    margin-right: 6px
}

.blog-section .blog-left-box .blog-box .blog-list li:before {
    transition: all .2s ease-in-out;
    content: "";
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 100%;
    background-color: #808b97
}

.blog-section .blog-left-box .blog-box .blog-list li:hover:before {
    background-color: var(--primary-color)
}

.blog-section .blog-left-box .blog-box .blog-list li:hover a {
    color: var(--primary-color)
}

.blog-section .blog-left-box .blog-box .blog-list li a {
    transition: all .2s ease-in-out;
    color: #647683;
    letter-spacing: .3px;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500
}

body.dark .blog-section .blog-left-box .blog-box .blog-list li a {
    color: #fff9
}

body.dark .blog-section .blog-left-box .blog-box .blog-list li a:hover {
    color: var(--primary-color)
}

.blog-section .blog-left-box .blog-box .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.blog-section .blog-left-box .blog-box .tag-list li a {
    transition: all .2s ease-in-out;
    color: #171b27cc;
    letter-spacing: .5px;
    border: 1px solid #eeeeee;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    background-color: #f9fafa;
    font-weight: 500;
    padding: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320))) calc(9px + (14 - 9) * ((100vw - 320px) / (1920 - 320)));
    display: block;
    border-radius: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.blog-section .blog-left-box .blog-box .tag-list li a:hover {
    background-color: var(--primary-color);
    border-color: transparent;
    color: #fff
}

body.dark .blog-section .blog-left-box .blog-box .tag-list li a {
    background-color: #323640;
    border-color: #454851;
    color: #fff
}

body.dark .blog-section .blog-left-box .blog-box .tag-list li a:hover {
    background-color: var(--primary-color);
    color: #fff
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box {
    width: 100%;
    display: flex;
    gap: calc(8px + .00125*(100vw - 320px));
    line-height: 1;
    transition: all .2s ease-in-out
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box+li {
    margin-top: calc(14px + .0025*(100vw - 320px))
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-image {
    display: block;
    width: calc(96px + .00875*(100vw - 320px));
    height: calc(68px + .0025*(100vw - 320px));
    border-radius: calc(4px + .00125*(100vw - 320px));
    overflow: hidden
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-content {
    width: calc(100% - (96px + .00875*(100vw - 320px)) - (8px + .00125*(100vw - 320px)))
}

body.dark .blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-content a {
    color: #fff
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-content a {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3;
    font-weight: 500;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    color: #171b27
}

.blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-content h6 {
    font-size: 14px;
    color: #647683;
    font-weight: 500;
    margin-top: calc(8px + .00125*(100vw - 320px))
}

body.dark .blog-section .blog-left-box .blog-box .blog-post-list .post-box .post-content h6 {
    color: #fff9
}

.blog-section .details-image-box {
    border-radius: calc(8px + .0025*(100vw - 320px));
    overflow: hidden;
    position: relative
}

.blog-section .details-image-box img {
    aspect-ratio: 103/50;
    object-fit: cover;
    width: 100%
}

@media (max-width: 767.98px) {
    .blog-section .details-image-box img {
        aspect-ratio: unset;
        height: calc(268px + (321 - 268) * ((100vw - 320px) / (768 - 320)))
    }
}

.blog-section .details-image-box .badge {
    position: absolute;
    color: #fff;
    background-color: var(--primary-color);
    top: calc(10px + .0025*(100vw - 320px));
    right: calc(10px + .0025*(100vw - 320px));
    padding: calc(7px + (8 - 7) * ((100vw - 320px) / (1920 - 320))) calc(7px + .0025*(100vw - 320px));
    border-radius: 5px;
    font-size: 13px
}

.blog-section .details-image-box .detail-content {
    position: absolute;
    padding: calc(28px + .01375*(100vw - 320px)) calc(12px + .00375*(100vw - 320px)) calc(14px + (25 - 14) * ((100vw - 320px) / (1920 - 320)));
    text-align: center;
    margin: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 18px;
    background: linear-gradient(0deg, #171B27 21%, rgba(23, 27, 39, 0) 100%);
    color: #fff;
    overflow: hidden
}

.blog-section .details-image-box .detail-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(0deg, #222222 5%, rgba(34, 34, 34, 0) 100%);
    mask-image: linear-gradient(0deg, #222222 5%, rgba(34, 34, 34, 0) 100%)
}

.blog-section .details-image-box .detail-content .title {
    display: block
}

.blog-section .details-image-box .detail-content .title h4 {
    color: #fff;
    font-weight: 600;
    font-size: calc(22px + .00375*(100vw - 320px));
    letter-spacing: .8px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.blog-section .details-image-box .detail-content .blog-details-list {
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center
}

.blog-section .details-image-box .detail-content .blog-details-list .blog-detail {
    margin: 0;
    color: #ffffffb3
}

@media (max-width: 460px) {
    .blog-section .details-image-box .detail-content .blog-details-list .blog-detail {
        display: flex
    }
}

h4 {
    font-size: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 28px;
    color: #171b27;
    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 #eeeeee
}

body.dark .detail-sec .details-title {
    border-color: #454851
}

.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
}

body.dark .detail-sec .details-title h3 {
    color: #fff
}

.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: calc(16px + .00125*(100vw - 320px));
    font-weight: 600;
    color: #171b27
}

body.dark .detail-sec .overview-list h3 {
    color: #fff
}

.detail-sec .overview-list h3~p {
    margin-top: 5px
}

.detail-sec .overview-list p {
    line-height: 1.5;
    margin: 0 0 calc(18px + (23 - 18) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    padding-left: 21px
}

[dir=rtl] .detail-sec .overview-list p {
    padding-left: unset;
    padding-right: 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: #647683
}

[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
}

.leave-comment-box {
    margin-top: calc(14px + (23 - 14) * ((100vw - 320px) / (1920 - 320)));
    padding-top: calc(14px + (23 - 14) * ((100vw - 320px) / (1920 - 320)));
    border-top: 1px solid #eeeeee
}

body.dark .leave-comment-box {
    border-color: #454851
}

.leave-comment-box .leave-box .form-group label {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.3;
    color: #171b27
}

.leave-comment-box .leave-box .form-group .form-control {
    border: 1px solid #eeeeee;
    border-radius: calc(4px + .00125*(100vw - 320px));
    background-color: #f9fafa
}

body.dark .leave-comment-box .leave-box .form-group .form-control {
    background-color: #252934;
    border-color: #454851;
    color: #fff
}

body.dark .leave-comment-box .leave-box .form-group .form-control::placeholder {
    color: #fff9
}

.leave-comment-box .leave-box p {
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #171b27cc;
    letter-spacing: .3px;
    margin-bottom: calc(12px + .0025*(100vw - 320px));
    line-height: 1.5
}

body.dark .leave-comment-box .leave-box p,
body.dark .leave-comment-box .leave-box p span {
    color: #fff
}

.leave-comment-box .leave-box p span {
    color: #ff4b4b
}

.leave-comment-box .leave-box .btn {
    border-radius: 6px;
    letter-spacing: .7px;
    display: block;
    width: auto;
    margin-top: .5rem
}

.category-section .category-row>div:first-child {
    border-right: 1px solid #eeeeee
}

body.dark .category-section .category-row>div:first-child {
    border-color: #454851
}

@media (max-width: 991.98px) {
    .category-section .category-row>div:first-child {
        border: none
    }
}

[dir=rtl] .category-section .category-row>div:first-child {
    border-right: unset;
    border-left: 1px solid #eeeeee
}

@media (max-width: 991.98px) {
    [dir=rtl] .category-section .category-row>div:first-child {
        border: none
    }
}

.category-section .custom-nav-tabs {
    position: sticky;
    top: 20px;
    gap: calc(10px + .0025*(100vw - 320px));
    padding-bottom: calc(5px + .00125*(100vw - 320px));
    flex-direction: column
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs {
        flex-direction: unset
    }
}

.category-section .custom-nav-tabs::-webkit-scrollbar {
    width: calc(2px + .00125*(100vw - 320px));
    height: calc(2px + .00125*(100vw - 320px))
}

.category-section .custom-nav-tabs::-webkit-scrollbar-track {
    background: #F9FAFA;
    border-radius: 10px
}

.category-section .custom-nav-tabs::-webkit-scrollbar-thumb {
    background: rgba(238, 238, 238, .212);
    border-radius: 10px
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs .nav-item {
        min-width: unset
    }
}

.category-section .custom-nav-tabs .nav-link {
    background-color: #fff;
    overflow: hidden;
    padding: 6px;
    position: relative;
    box-shadow: none;
    flex-direction: unset;
    align-items: center;
    border: 1px solid #eeeeee;
    border-radius: 100px;
    gap: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .category-section .custom-nav-tabs .nav-link {
    background-color: #252934;
    border-color: #454851
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs .nav-link {
        padding-right: 18px;
        border-radius: 8px
    }
}

.category-section .custom-nav-tabs .nav-link i {
    display: none;
    margin-left: auto;
    margin-right: 9px;
    --Iconsax-Color: var(--primary-color)
}

[dir=rtl] .category-section .custom-nav-tabs .nav-link i {
    margin-left: 9px;
    margin-right: auto;
    transform: rotate(-180deg)
}

.category-section .custom-nav-tabs .nav-link.active,
.category-section .custom-nav-tabs .nav-link:hover {
    border-color: transparent
}

body.dark .category-section .custom-nav-tabs .nav-link.active .text-box span,
body.dark .category-section .custom-nav-tabs .nav-link:hover .text-box span {
    color: var(--primary-color)
}

.category-section .custom-nav-tabs .nav-link.active i,
.category-section .custom-nav-tabs .nav-link:hover i {
    display: block
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs .nav-link.active i,
    .category-section .custom-nav-tabs .nav-link:hover i {
        display: none
    }
}

.category-section .custom-nav-tabs .nav-link .img-box {
    width: calc(40px + .0075*(100vw - 320px));
    min-width: calc(40px + .0075*(100vw - 320px));
    height: calc(40px + .0075*(100vw - 320px));
    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    margin: 0;
    border-radius: 100%
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs .nav-link .img-box {
        border-radius: 5px
    }
}

body.dark .category-section .custom-nav-tabs .nav-link .img-box {
    background-color: #171b27
}

body.dark .category-section .custom-nav-tabs .nav-link .img-box img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(117%) contrast(100%)
}

body.dark .category-section .custom-nav-tabs .nav-link .text-box span {
    color: #fff
}

body.dark .category-section .custom-nav-tabs .nav-link .text-box small {
    color: #fff9
}

.category-section .custom-nav-tabs .nav-link .text-box span {
    line-height: 1.3;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs .nav-link .text-box span {
        white-space: nowrap
    }
}

.category-section .custom-nav-tabs .nav-link .text-box small {
    display: flex;
    color: #647683;
    line-height: 1.3
}

@media (max-width: 991.98px) {
    .category-section .custom-nav-tabs .nav-link .text-box small {
        white-space: nowrap
    }
}

.tab-content-2.custom-nav-tabs {
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eeeeee;
    flex-direction: unset
}

body.dark .tab-content-2.custom-nav-tabs {
    border-bottom: 1px solid #454851
}

.tab-content-2.custom-nav-tabs::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

.tab-content-2.custom-nav-tabs::-webkit-scrollbar-track {
    background: #F9FAFA;
    border-radius: 10px
}

.tab-content-2.custom-nav-tabs::-webkit-scrollbar-thumb {
    background: rgba(238, 238, 238, .212);
    border-radius: 10px
}

.tab-content-2.custom-nav-tabs .nav-item {
    min-width: unset;
    width: fit-content
}

.tab-content-2.custom-nav-tabs .nav-link {
    overflow: hidden;
    padding: 10px 28px;
    position: relative;
    white-space: nowrap;
    background-color: #f9fafa;
    box-shadow: none;
    flex-direction: unset;
    transition: all .25s ease-in-out;
    align-items: center;
    border: 1px solid #eeeeee;
    border-radius: 100px;
    gap: 12px
}

body.dark .tab-content-2.custom-nav-tabs .nav-link {
    background-color: #323640;
    border-color: #454851
}

body.dark .tab-content-2.custom-nav-tabs .nav-link .text-box span {
    color: #fff
}

.tab-content-2.custom-nav-tabs .nav-link i {
    display: none;
    margin-left: auto;
    margin-right: 9px;
    --Iconsax-Color: var(--primary-color)
}

.tab-content-2.custom-nav-tabs .nav-link.active,
.tab-content-2.custom-nav-tabs .nav-link:hover {
    border-color: transparent;
    background-color: var(--primary-color);
    color: #fff
}

.tab-content-2.custom-nav-tabs .nav-link.active span,
.tab-content-2.custom-nav-tabs .nav-link:hover span,
body.dark .tab-content-2.custom-nav-tabs .nav-link.active span,
body.dark .tab-content-2.custom-nav-tabs .nav-link:hover span {
    color: #fff
}

.tab-content-2.custom-nav-tabs .nav-link.active i,
.tab-content-2.custom-nav-tabs .nav-link:hover i {
    display: block
}

body.dark .tab-content-2.custom-nav-tabs .nav-link.active,
body.dark .tab-content-2.custom-nav-tabs .nav-link:hover {
    border-color: transparent;
    background-color: var(--primary-color);
    color: #fff
}

.tab-content-2.custom-nav-tabs .nav-link .text-box span {
    display: flex;
    line-height: 1.3;
    margin: unset;
    width: unset;
    transition: all .25s ease-in-out
}

.category-img {
    border-radius: calc(6px + .00125*(100vw - 320px));
    position: relative;
    overflow: hidden;
    display: block
}

.category-img img {
    aspect-ratio: 113/100;
    object-fit: cover
}

.category-img:hover:after {
    animation: shine 1.15s
}

.category-img .category-span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: calc(14px + .0025*(100vw - 320px));
    background: linear-gradient(0deg, #171B27 21%, rgba(23, 27, 39, 0) 100%);
    color: #fff;
    margin: 0;
    padding: calc(32px + .01125*(100vw - 320px)) 10px calc(6px + .00125*(100vw - 320px));
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block
}

.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: #171b27
}

.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://rythmevie.comm/build/assets/arrow-90473a1a.svg)
}

.accordion.categories-accordion .accordion-item .accordion-header .title {
    width: 100%;
    cursor: poRaleway
}

.contact-section .heading-p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.5;
    margin: 7px 0 0
}

.contact-section .contact-content .title-1 {
    padding-bottom: 26px;
    width: 100%;
    margin: 0;
    text-align: unset
}

.contact-section .contact-content .title-1 h6 {
    width: 63%
}

.contact-section .contact-content .contact-us-form {
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: calc(8px + .0025*(100vw - 320px));
    background-color: #f9fafa
}

body.dark .contact-section .contact-content .contact-us-form {
    background-color: #252934
}

body.dark .contact-section .contact-content .contact-us-form h3 {
    color: #fff
}

body.dark .contact-section .contact-content .contact-us-form p {
    color: #fff9
}

body.dark .contact-section .contact-content .contact-us-form .form-group label {
    color: #fff
}

body.dark .contact-section .contact-content .contact-us-form .form-group .form-control {
    background-color: #171b27;
    color: #fff
}

body.dark .contact-section .contact-content .contact-us-form .form-group .form-control::placeholder {
    color: #fff9
}

.contact-section .contact-content .contact-us-form .form-group .form-control {
    background-color: #fff
}

.contact-section .contact-content .contact-us-form .contact-title {
    margin-bottom: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)));
    padding-bottom: calc(12px + .00375*(100vw - 320px));
    border-bottom: 1px solid rgba(238, 238, 238, .141)
}

.contact-section .contact-content .contact-us-form .contact-title h3 {
    font-size: calc(20px + .0025*(100vw - 320px));
    font-weight: 600
}

.contact-section .contact-content .contact-us-form .contact-title p {
    line-height: 1.4;
    font-size: calc(16px + .00125*(100vw - 320px));
    color: #647683;
    margin-top: 4px
}

.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: #647683;
    width: auto
}

.contact-section .contact-content .contact-info li i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #222
}

.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: #171b27;
    font-weight: 500
}

.contact-section .contact-content .contact-info li .detail p {
    color: #171b2780;
    line-height: 1.5;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.contact-section .contact-content .contact-info .contact-box+.contact-box {
    margin-top: calc(8px + .00375*(100vw - 320px));
    padding-top: calc(8px + .00375*(100vw - 320px));
    border-top: 1px solid #eeeeee
}

body.dark .contact-section .contact-content .contact-info .contact-box {
    border-color: #454851
}

body.dark .contact-section .contact-content .contact-info .contact-box h4 {
    color: #fff
}

body.dark .contact-section .contact-content .contact-info .contact-box p,
body.dark .contact-section .contact-content .contact-info .contact-box a {
    color: #fff9
}

.contact-section .contact-content .contact-info .contact-box h4 {
    color: #171b27;
    font-weight: 600;
    font-size: calc(18px + .0025*(100vw - 320px))
}

.contact-section .contact-content .contact-info .contact-box p {
    color: #647683;
    font-size: calc(16px + .00125*(100vw - 320px));
    margin-top: 4px
}

.contact-section .contact-content .contact-info .contact-box a {
    color: #171b27cc;
    text-decoration: underline;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: calc(8px + .00125*(100vw - 320px))
}

.contact-section .contact-content .contact-info .contact-box a+a {
    margin-top: calc(1px + (2 - 1) * ((100vw - 320px) / (1920 - 320)))
}

.contact-section .contact-content .contact-info .contact-box ul {
    margin-top: 14px;
    display: grid;
    gap: 10px
}

.contact-section .contact-content .contact-info .contact-box ul li a {
    color: #171b27cc;
    text-decoration: underline;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px
}

.contact-section .contact-content .contact-info .contact-box ul li a .feather {
    width: 20px;
    height: 20px
}

.contact-section .contact-content .send-btn {
    font-size: calc(16px + .00125*(100vw - 320px));
    padding: 10px calc(12px + .0025*(100vw - 320px));
    letter-spacing: .3px;
    line-height: 1.5;
    gap: 4px;
    white-space: nowrap;
    font-weight: 500;
    margin-top: 20px;
    width: 100%;
    border-radius: 6px
}

.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
}

body.dark .list-items .list-item h6 {
    color: #fff
}

body.dark .list-items .list-item p {
    color: #e6e6e6
}

.list-items .list-item h6 {
    font-size: 18px;
    margin-bottom: .75rem;
    font-weight: 500;
    line-height: 1.5;
    color: #171b27
}

.list-items .list-item p {
    font-size: 17px !important;
    color: #171b27b3;
    line-height: 1.3 !important;
    margin-bottom: 16px
}

.list-items li {
    margin-bottom: 12px
}

.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(--primary-color)
}

.expert-content .dark-card,
.expert-content .gray-card {
    overflow: visible;
    margin-top: 60px
}

body.dark .expert-content .dark-card .card-body,
body.dark .expert-content .gray-card .card-body {
    background-color: transparent !important
}

.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: 575.98px) {
    .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: #647683
}

.expert-content .gray-card .card-body .card-title {
    color: #171b27
}

.expert-content .gray-card .card-body .card-title a {
    color: #171b27;
    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(--primary-color)
}

.expert-content .gray-card .card-body .card-detail {
    border-top: 2px dashed #eeeeee
}

.expert-content .dark-card {
    height: 100%;
    overflow: visible;
    margin-top: 0;
    padding: 14px;
    background-color: #fff;
    border: 1px solid #eeeeee
}

body.dark .expert-content .dark-card {
    background-color: #323640;
    border-color: #454851
}

.expert-content .dark-card.gray-card {
    background-color: #f9fafa
}

.expert-content .dark-card.gray-card .card-body .card-detail {
    border-top: 1px dashed rgba(23, 27, 39, .08)
}

.expert-content .dark-card .top-card {
    display: flex;
    align-items: center;
    gap: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)))
}

.expert-content .dark-card .top-card .dark-card-img {
    margin: 0;
    text-align: unset
}

.expert-content .dark-card .top-card .dark-card-img .profile-pic {
    margin-top: 0;
    border-radius: calc(6px + .00125*(100vw - 320px));
    width: calc(50px + .015*(100vw - 320px));
    height: calc(50px + .015*(100vw - 320px));
    object-fit: cover;
    border: none
}

.expert-content .dark-card .top-card .dark-card-name {
    width: calc(100% - calc(50px + .015*(100vw - 320px)) - calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))))
}

.expert-content .dark-card .top-card .card-title {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 12px;
    color: #fff
}

.expert-content .dark-card .top-card .card-title h4 {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    color: #171b27
}

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

.expert-content .dark-card .top-card .card-title .rate {
    margin: 0
}

.expert-content .dark-card .top-card .card-title .rate img.star {
    width: 16px;
    height: auto
}

.expert-content .dark-card .top-card .card-title .rate small {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1;
    color: #647683;
    letter-spacing: .4px
}

body.dark .expert-content .dark-card .top-card .card-title .rate small {
    color: #ffffffbf
}

.expert-content .dark-card .top-card .location {
    margin-top: 4px;
    justify-content: unset;
    display: flex;
    align-items: center;
    gap: calc(3px + (6 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.expert-content .dark-card .top-card .location i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #808B97
}

.expert-content .dark-card .top-card .location h5 {
    line-height: 1;
    color: #647683;
    font-size: calc(14px + .00125*(100vw - 320px));
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

body.dark .expert-content .dark-card .top-card .location h5 {
    color: #fff9
}

.expert-content .dark-card .card-body {
    padding: 0
}

.expert-content .dark-card .card-body .card-detail {
    padding: calc(8px + .00125*(100vw - 320px)) 0 0;
    margin-top: calc(8px + .00125*(100vw - 320px));
    width: 100%;
    border-top: 1px dashed #eeeeee
}

body.dark .expert-content .dark-card .card-body .card-detail {
    border-color: #454851
}

.expert-content .dark-card .card-body .card-detail h5 {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    color: #171b27
}

body.dark .expert-content .dark-card .card-body .card-detail h5 {
    color: #fff
}

.expert-content .dark-card .card-body .card-detail p {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3;
    width: 100%;
    height: calc(36px + .00375*(100vw - 320px));
    margin: 0;
    text-align: unset;
    color: #171b27cc
}

body.dark .expert-content .dark-card .card-body .card-detail p {
    color: #fffc
}

@media (max-width: 575.98px) {
    .expert-content .dark-card .card-body .card-detail p {
        height: auto
    }
}

.reviews-main {
    background-color: #f9fafa;
    border-radius: 10px;
    padding: 20px
}

body.dark .reviews-main {
    background-color: #454851
}

.reviews-main h6 {
    font-weight: 500;
    line-height: 1.5
}

.reviews-main .overview-list li {
    color: #647683;
    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: #647683
}

.filter .card {
    background-color: #f9fafa
}

.filter .card .card-header {
    padding: 18px 20px;
    background-color: transparent;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.filter .card .card-header h3 {
    font-weight: 700
}

.filter .card .card-header a {
    cursor: poRaleway
}

.filter .card .card-body {
    overflow: auto
}

.filter .card .card-body .form-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.filter .provider-card .like-icon {
    top: 16px;
    right: 16px;
    left: unset
}

[dir=rtl] .filter .provider-card .like-icon {
    left: 16px;
    right: unset
}

.filter .provider-card .provider-detail .provider-content {
    border: none;
    padding: 0;
    border-radius: 0;
    position: relative;
    background-color: transparent
}

.filter .provider-card .provider-detail .provider-content .left-profile-box {
    border: 1px solid #eeeeee;
    background-color: #f9fafa;
    padding: 16px;
    border-radius: 6px
}

body.dark .filter .provider-card .provider-detail .provider-content .left-profile-box {
    background-color: #252934;
    border-color: #454851
}

body.dark .filter .provider-card .provider-detail .provider-content .left-profile-box .profile h5 {
    color: #fff9
}

body.dark .filter .provider-card .provider-detail .provider-content .left-profile-box .delivered {
    background-color: #171b27
}

.filter .provider-card .provider-detail .provider-content .left-profile-box .delivered {
    margin: 0
}

.filter .provider-card .provider-detail .provider-content .left-profile-box .profile .location i {
    --Iconsax-Color: #808b97
}

.filter .provider-card .provider-detail .provider-content .left-profile-box .profile .location h5 {
    color: #647683
}

.filter .provider-card .provider-detail .provider-content .provider-title {
    margin-block: 16px 8px;
    font-size: 18px;
    color: #eee;
    font-weight: 600;
    display: block;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px
}

body.dark .filter .provider-card .provider-detail .provider-content .provider-title {
    color: #fff !important;
    border-color: #454851
}

.filter .provider-card .provider-detail .provider-content .provider-title.text-title {
    border-bottom: none;
    margin-bottom: 0
}

.filter .provider-card .provider-detail .provider-content .profile-bg {
    background-color: #eee
}

.filter .provider-card .provider-detail .provider-content .profile {
    border-bottom: 1px solid #dddddd91;
    padding-bottom: 12px;
    margin-bottom: 12px
}

body.dark .filter .provider-card .provider-detail .provider-content .profile {
    border-color: #454851
}

.filter .provider-card .provider-detail .provider-content .profile .provider-profile-img {
    border-radius: 6px;
    width: 58px;
    height: 58px
}

.filter .provider-card .provider-detail .provider-content .profile .location {
    justify-content: unset;
    margin-top: 3px;
    gap: 4px
}

.filter .provider-card .provider-detail .provider-content .profile .location i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #222
}

.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(--primary-color)
}

.filter .provider-card .provider-detail .provider-content .profile-detail p {
    color: #171b27;
    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;
    border: 1px solid #eeeeee;
    border-radius: 6px
}

body.dark .filter .provider-card .provider-detail .provider-content .profile-info {
    background-color: #252934;
    border-color: #454851
}

body.dark .filter .provider-card .provider-detail .provider-content .profile-info label,
body.dark .filter .provider-card .provider-detail .provider-content .profile-info i {
    color: #fff
}

body.dark .filter .provider-card .provider-detail .provider-content .profile-info p {
    color: #fff9
}

body.dark .filter .provider-card .provider-detail .provider-content .profile-info button {
    background-color: #171b27;
    color: #fff
}

.filter .provider-card .provider-detail .provider-content .profile-info p {
    color: #171b27;
    text-align: unset
}

.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>label {
    font-size: 20px;
    color: #171b27;
    font-weight: 600;
    margin-bottom: 10px
}

body.dark .provider-detail>label {
    color: #fff
}

.provider-detail .service-list {
    border-radius: 12px;
    display: grid;
    padding: 15px;
    box-shadow: 0 2.87px 17.2px #00162e0f
}

body.dark .provider-detail .service-list li a {
    background-color: #252934;
    color: #fff
}

body.dark .provider-detail .service-list li a i {
    --Iconsax-Color: #ffffff
}

.provider-detail .service-list li+li {
    margin-top: 10px
}

.provider-detail .service-list li:hover a {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600
}

.provider-detail .service-list li:hover a i {
    --Iconsax-Color: #ffffff
}

.provider-detail .service-list li a {
    background-color: #f9fafa;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 16px;
    transition: all .1s ease-in-out;
    color: #eee;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.provider-detail .service-list li a i {
    transition: all .15s ease-in-out
}

.provider-detail .provider-content {
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 2.87px 17.2px #00162e0f
}

body.dark .provider-detail .provider-content {
    background-color: #25293466
}

.provider-detail .provider-content .profile-bg {
    background-color: #f9fafa;
    height: 70px;
    border-radius: 12px
}

.provider-detail .provider-content i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #ffc412
}

.provider-detail .provider-content .profile {
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 14px;
    margin-bottom: 14px
}

body.dark .provider-detail .provider-content .profile {
    border-color: #454851
}

body.dark .provider-detail .provider-content .profile h3 {
    color: #fff
}

body.dark .provider-detail .provider-content .profile span {
    color: #fff9
}

.provider-detail .provider-content .profile .location {
    justify-content: unset;
    margin-top: 6px
}

.provider-detail .provider-content .profile .location h5 {
    line-height: 1.4;
    color: #eee
}

.provider-detail .provider-content .profile .img {
    border-radius: 8px;
    width: 62px;
    height: 62px
}

.provider-detail .provider-content .profile .provider-title {
    display: flex;
    align-items: center
}

.provider-detail .provider-content .profile .provider-title h3 {
    font-size: 18px
}

.provider-detail .provider-content .profile .provider-title .rate {
    border-left: 1px solid #eeeeee;
    padding-left: 10px;
    margin: 0 0 0 10px
}

.provider-detail .provider-content .profile .provider-title .rate img {
    width: 14px;
    height: 14px
}

.provider-detail .provider-content .profile .provider-title .rate p {
    line-height: 1.3
}

.provider-detail .provider-content .profile .provider-profile-img {
    border-radius: 8px;
    width: 120px;
    height: 120px
}

.provider-detail .provider-content .profile .rate {
    font-size: 16px
}

.provider-detail .provider-content .profile h3 {
    color: #171b27;
    font-size: 19px;
    line-height: 1.1
}

.provider-detail .provider-content .profile span {
    font-size: 16px;
    color: #647683
}

.provider-detail .provider-content .profile-detail {
    margin-top: 10px
}

.provider-detail .provider-content .profile-detail ul {
    display: flex;
    flex-direction: column
}

.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))
}

.provider-detail .provider-content .profile-detail ul li+li {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #eeeeee
}

body.dark .provider-detail .provider-content .profile-detail ul li {
    border-color: #454851
}

body.dark .provider-detail .provider-content .profile-detail ul li label {
    color: #fff9
}

.provider-detail .provider-content .profile-detail ul li.success span {
    color: #27af4d
}

.provider-detail .provider-content .profile-detail ul li.danger span {
    color: #ff4b4b
}

.provider-detail .provider-content .profile-detail ul li.total label {
    font-size: 20px;
    color: #171b27;
    font-weight: 500
}

.provider-detail .provider-content .profile-detail ul li.total span {
    font-size: 22px;
    color: var(--primary-color);
    font-weight: 600
}

@media (max-width: 575.98px) {
    .provider-detail .provider-content .profile-detail ul li {
        flex-direction: column;
        align-items: start;
        gap: 0
    }
}

.provider-detail .provider-content .badge {
    padding: 14px 16px;
    border-radius: 6px;
    line-height: 1.3;
    width: 100%;
    text-align: start;
    font-size: 16px;
    letter-spacing: .4px
}

.provider-detail .provider-content .badge+.badge {
    margin-top: 16px
}

[dir=rtl] .provider-detail .provider-content .badge {
    text-align: end
}

.provider-detail .provider-content p {
    font-size: 16px;
    color: #647683;
    line-height: 26px;
    text-align: center
}

.provider-detail .provider-content .badge-img {
    width: calc(25px + .00625*(100vw - 320px));
    height: calc(25px + .00625*(100vw - 320px))
}

.provider-detail .provider-content .provider-detail-tab {
    border-top: 1px solid #eeeeee;
    margin-top: 14px;
    padding-top: 14px
}

body.dark .provider-detail .provider-content .provider-detail-tab {
    border-color: #454851
}

.provider-detail .provider-content .provider-detail-tab .nav-tabs {
    flex-direction: unset;
    flex-wrap: nowrap;
    border: none
}

.provider-detail .provider-content .provider-detail-tab .nav-tabs .nav-item {
    width: 100%
}

.provider-detail .provider-content .provider-detail-tab .nav-tabs .nav-item .nav-link {
    border-radius: 6px;
    width: 100%;
    font-size: 17px;
    font-weight: 500
}

.provider-detail.service-right-box .service-list li:hover a {
    color: #fff
}

.provider-detail.service-right-box .service-list li:hover a i {
    --Iconsax-Color: #ffffff
}

.provider-detail.service-right-box .service-list li a {
    color: #647683
}

.provider-detail.service-right-box .service-list li a i {
    --Iconsax-Color: #808B97
}

.image-grp {
    position: relative;
    width: 90%;
    margin-inline: auto
}

@media (max-width: 1199.98px) {
    .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: 1199.98px) {
    .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: 575.98px) {
    .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: 575.98px) {
    .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: 991.98px) {
    .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: 991.98px) {
    .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: 575.98px) {
    .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: calc(14px + .01*(100vw - 320px));
    display: flex;
    align-items: center;
    gap: calc(12px + .0025*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .app-install {
        margin-bottom: 12px
    }
}

.app-install img {
    height: calc(38px + .0025*(100vw - 320px))
}

.application-section .title {
    margin-bottom: 22px
}

.application-section .title h2 {
    font-weight: 700;
    line-height: 1.4
}

.content-detail {
    color: #647683
}

.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: 575.98px) {
    .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: #647683;
    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: 991.98px) {
    .chart-img {
        width: calc(120px + (200 - 120) * ((100vw - 992px) / (1920 - 992)))
    }
}

@media (max-width: 1199.98px) {
    .chart-img {
        left: 50px
    }
    [dir=rtl] .chart-img {
        left: unset;
        right: 50px
    }
}

@media (max-width: 991.98px) {
    .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: 991.98px) {
    .group-img {
        width: calc(120px + (200 - 120) * ((100vw - 992px) / (1920 - 992)))
    }
}

@media (max-width: 1199.98px) {
    .group-img {
        right: 0
    }
    [dir=rtl] .group-img {
        right: unset;
        left: 0
    }
}

@media (max-width: 991.98px) {
    .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://rythmevie.comm/build/assets/bg-f98c8713.png);
    background-color: #f9fafa;
    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: var(--primary-color)
}

.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: 767.98px) {
    .service-provider-section .btn {
        margin-top: 20px
    }
}

.become-provider-section {
    background: var(--dark-green-gradient);
    position: relative;
    z-index: 0;
    overflow: hidden
}

.become-provider-section .image-1,
.become-provider-section .image-2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 207px;
    z-index: -1;
    opacity: .25
}

.become-provider-section .image-1 {
    left: 0;
    transform: translateY(-50%) scaleX(-1)
}

.become-provider-section .image-2 {
    right: 0
}

.become-provider-section [class*=circle-] {
    background-color: #fff3;
    border-radius: 100%;
    position: absolute;
    animation: up-down 5s linear infinite
}

.become-provider-section .circle-1 {
    width: 10px;
    height: 10px;
    bottom: 68px;
    animation-delay: .5s;
    left: 288px
}

.become-provider-section .circle-2 {
    width: 25px;
    height: 25px;
    bottom: 71px;
    animation-delay: 1s;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    left: 525px
}

.become-provider-section .circle-3 {
    width: 32px;
    height: 32px;
    top: -16px;
    animation: left-right 5s linear infinite;
    left: 45%;
    transform: translate(-50%)
}

.become-provider-section .circle-4 {
    width: 16px;
    height: 16px;
    bottom: -8px;
    animation-delay: 1s;
    right: 45%;
    animation: left-right 5s linear infinite;
    transform: translate(50%)
}

.become-provider-section .circle-5 {
    width: 15px;
    height: 15px;
    animation-delay: 2.5s;
    bottom: 83px;
    background-color: transparent;
    border: 1px dashed rgba(255, 255, 255, .2);
    right: 662px
}

.become-provider-section .circle-6 {
    width: 11px;
    height: 11px;
    animation-delay: 3s;
    bottom: 68px;
    right: 358px
}

.become-provider-section .section-wrap {
    text-align: center;
    color: #fff
}

.become-provider-section .section-wrap h2 {
    font-size: 42px
}

.become-provider-section .section-wrap p {
    font-size: 24px;
    margin-top: 14px;
    color: #ffffffb8
}

.become-provider-section .section-wrap .btn {
    border-radius: 6px;
    margin-inline: auto
}

@keyframes up-down {
    0% {
        transform: translateY(-10px)
    }
    50% {
        transform: translateY(0)
    }
    to {
        transform: translateY(-10px)
    }
}

@keyframes left-right {
    0% {
        transform: translate(-10px)
    }
    50% {
        transform: translate(0)
    }
    to {
        transform: translate(-10px)
    }
}

.cart-section .left-cart-box .cart {
    background-color: transparent
}

.cart-section .left-cart-box .cart .cart-header {
    padding: 0;
    border: none
}

.cart-section .left-cart-box .cart .cart-header h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px
}

.cart-section .left-cart-box .cart .cart-body {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px
}

.cart-section .left-cart-box .cart .cart-body .cart-item .cart-heading {
    padding: 12px 15px 0;
    border: none
}

.cart-section .left-cart-box .cart .cart-body .cart-item .cart-heading .cart-title>div {
    display: flex;
    align-items: center
}

.cart-section .left-cart-box .cart .cart-body .cart-item .cart-detail {
    padding: 12px 15px
}

.cart-section .right-cart-box .note label {
    font-size: 18px
}

.cart-section .right-cart-box .note label span {
    color: #ff4b4b
}

.cart-section .right-cart-box .note p {
    color: #ff4b4b;
    line-height: 1.4;
    font-size: 15px;
    margin-top: 3px
}

.cart-section .right-cart-box .cart {
    border-radius: 10px
}

.cart-section .right-cart-box .cart .cart-body .coupon-title {
    margin-bottom: 11px;
    align-items: center;
    justify-content: space-between;
    display: flex;
    font-size: 17px
}

.cart-section .right-cart-box .cart .cart-body .coupon-title a {
    font-weight: 500;
    text-decoration: underline;
    text-transform: unset
}

.cart-section .right-cart-box .cart .cart-body .input-group {
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.cart-section .right-cart-box .cart .cart-body .input-group:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1
}

.cart-section .right-cart-box .cart .cart-body .input-group .form-control {
    border-color: var(--primary-color);
    background-color: transparent;
    font-size: 16px !important
}

.cart-section .right-cart-box .cart .cart-body .input-group .pattern-btn {
    border-color: var(--primary-color);
    background-color: transparent
}

.cart-section .right-cart-box .cart .cart-body .input-group .pattern-btn:after {
    border-right-color: var(--primary-color);
    border-left-color: var(--primary-color);
    border-top-color: var(--primary-color)
}

.cart-section .right-cart-box .cart .cart-body .input-group .pattern-btn:before {
    border-right-color: var(--primary-color);
    border-left-color: var(--primary-color);
    border-bottom-color: var(--primary-color)
}

.cart-section .right-cart-box .bill-summary .charge {
    gap: 9px
}

.cart-section .right-cart-box .bill-summary .charge p {
    font-size: 16px;
    color: #171b27bf;
    line-height: 1.3
}

.cart-section .right-cart-box .bill-summary .charge p span {
    font-size: 16px;
    font-weight: 500;
    color: #171b27
}

.cart-section .right-cart-box .bill-summary .charge span.danger {
    color: #ff4b4b
}

.cart-section .right-cart-box .bill-summary .charge span.success {
    color: #27af4d
}

.cart-section .right-cart-box .view {
    border-radius: 8px;
    position: relative;
    margin-top: 12px;
    z-index: 0;
    overflow: hidden;
    background-color: transparent
}

.cart-section .right-cart-box .view:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.cart-section .right-cart-box .view span {
    font-size: 20px;
    font-weight: 500;
    color: #171b27;
    line-height: 1.3
}

.cart-section .right-cart-box .view .value {
    line-height: 1.4
}

.service-package-section .service-package-content .service-image {
    position: relative;
    display: block;
    border-radius: calc(8px + .00125*(100vw - 320px));
    overflow: hidden
}

.service-package-section .service-package-content .service-image>img {
    object-fit: cover;
    aspect-ratio: 179/100
}

.service-package-section .service-package-content .service-detail {
    padding: calc(14px + .0025*(100vw - 320px)) 0 0;
    width: auto;
    display: flex;
    align-items: center;
    gap: calc(8px + .0025*(100vw - 320px))
}

.service-package-section .service-package-content .service-detail .service-icon {
    min-width: calc(50px + .00375*(100vw - 320px));
    width: calc(50px + .00375*(100vw - 320px));
    height: calc(50px + .00375*(100vw - 320px));
    padding: calc(12px + (15 - 12) * ((100vw - 320px) / (1920 - 320)));
    background-color: #f9fafa;
    border-radius: calc(6px + (11 - 6) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .service-package-section .service-package-content .service-detail .service-icon {
    background-color: #252934
}

body.dark .service-package-section .service-package-content .service-detail .service-icon img {
    filter: invert(100%) sepia(0%) saturate(5536%) hue-rotate(186deg) brightness(117%) contrast(100%)
}

.service-package-section .service-package-content .service-detail h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    color: #171b27;
    overflow: hidden;
    font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .service-package-section .service-package-content .service-detail h3 {
    color: #fff
}

.service-package-section .service-package-content .service-detail .price {
    margin-top: calc(1px + .00125*(100vw - 320px));
    font-weight: 600
}

.service-package-section .service-package-content .service-detail .price span {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 600;
    line-height: 1.3
}

.service-package-section .service-package-content .service-bg {
    width: 100%;
    height: 100%;
    border-radius: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    overflow: hidden
}

.service-package-section .service-package-content .service-bg .service-1 {
    position: absolute;
    bottom: -90px;
    right: -160px;
    height: 250px
}

.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(--primary-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: #171b27;
    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: #647683
}

.service-title small {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px
}

.service-detail ul {
    display: flex;
    align-items: start
}

.service-detail ul li+li {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #eeeeee
}

[dir=rtl] .service-detail ul li+li {
    margin-left: unset;
    margin-right: 10px;
    padding-left: unset;
    padding-right: 10px;
    border-right: 1px solid #eeeeee;
    border-left: unset
}

.service-detail p {
    font-size: 14px;
    color: #647683;
    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: #647683;
    font-size: 16px
}

.date-time li small {
    font-weight: 500;
    color: #171b27;
    font-size: 16px
}

.service-list-section .service-list-content .filter-sidebar {
    border-right: 1px solid #eeeeee
}

[dir=rtl] .service-list-section .service-list-content .filter-sidebar {
    border-right: unset;
    border-left: 1px solid #eeeeee
}

body.dark .service-list-section .service-list-content .filter-sidebar {
    border-color: #454851
}

.service-list-section .service-list-content .card {
    border-radius: calc(6px + .0025*(100vw - 320px))
}

body.dark .service-list-section .service-list-content .card {
    background-color: #252934
}

.service-list-section .service-list-content .card .card-footer {
    position: relative;
    flex-direction: column;
    align-items: unset;
    padding: 0;
    gap: 10px;
    padding-top: calc(8px + .00125*(100vw - 320px));
    margin-top: calc(8px + .00125*(100vw - 320px));
    border-top: 1px solid #eeeeee
}

.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 .rate {
    display: flex;
    align-items: center;
    margin-top: 5px
}

.service-list-section .service-list-content .card .card-footer .footer-detail .rate small {
    color: #171b27b3;
    margin-top: 3px;
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)))
}

.service-list-section .service-list-content .card .card-footer .footer-detail .rate .rating-list {
    display: flex;
    align-items: center;
    gap: 2px;
    line-height: 1
}

.service-list-section .service-list-content .card .card-footer .footer-detail .rate .rating-list li img.star {
    width: 14px;
    height: 14px
}

.service-list-section .service-list-content .card .card-footer .footer-detail img {
    width: calc(42px + (45 - 42) * ((100vw - 320px) / (1920 - 320)));
    height: calc(42px + (45 - 42) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%
}

.service-list-section .service-list-content .card .card-footer .footer-detail p {
    margin: 0;
    font-weight: 500;
    color: #171b27;
    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 .footer-detail .footer-content {
    width: calc(100% - 53px);
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between
}

.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: #ffffff;
    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(--primary-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(--primary-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: 767.98px) {
    .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(14px + .00125*(100vw - 320px));
    padding: calc(8px + .00125*(100vw - 320px)) calc(8px + (13 - 8) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    border-radius: calc(4px + .00125*(100vw - 320px));
    line-height: 1;
    background-color: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.service-list-section .service-list-content .card .card-footer .btn:hover {
    background-color: transparent;
    color: var(--primary-color)
}

.service-list-section .service-list-content .card .card-footer .btn:hover i {
    --Iconsax-Color: var(--primary-color)
}

.service-list-section .service-list-content .card .card-footer .btn i {
    --Iconsax-Color: #fff;
    --Iconsax-Size: calc(16px + .00125*(100vw - 320px))
}

body.dark .service-list-section .service-list-content .card.card-gray .card-body {
    background-color: #252934
}

.service-list-section .service-list-content .card-body {
    margin-bottom: 0;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .service-list-section .service-list-content .card-body {
    background-color: #171b27
}

body.dark .service-list-section .service-list-content .card-body .service-title h4 a {
    color: #fff
}

body.dark .service-list-section .service-list-content .card-body .service-title .price-number small {
    color: #dbdbdb
}

body.dark .service-list-section .service-list-content .card-body .service-title .price-number del {
    color: #fff9
}

body.dark .service-list-section .service-list-content .card-body .card-footer {
    border-top: 1px solid #454851
}

body.dark .service-list-section .service-list-content .card-body .card-footer .footer-detail p {
    color: #fff
}

body.dark .service-list-section .service-list-content .card-body .card-footer .footer-detail .rate small {
    color: #fff9
}

.service-list-section .service-list-content .card-body .service-title {
    display: flex;
    align-items: unset;
    flex-direction: column;
    justify-content: unset;
    gap: 0
}

.service-list-section .service-list-content .card-body .service-title .price-number {
    margin-top: 3px;
    gap: 4px;
    align-items: center;
    display: flex
}

.service-list-section .service-list-content .card-body .service-title .price-number del {
    color: #171b2799;
    margin-top: 1px;
    font-weight: 500;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.service-list-section .service-list-content .card-body .service-title .price-number small {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    color: #171b27
}

.service-list-section .service-list-content .card-body .service-title .price-number .number-box {
    align-items: center;
    display: flex;
    margin-left: auto
}

.service-list-section .service-list-content .card-body .service-title .price-number .number-box .time {
    position: relative
}

.service-list-section .service-list-content .card-body .service-title .price-number .number-box .time+.time {
    margin-left: 6px;
    padding-left: 6px
}

[dir=rtl] .service-list-section .service-list-content .card-body .service-title .price-number .number-box .time+.time {
    margin-left: unset;
    margin-right: 6px;
    padding-left: unset;
    padding-right: 6px
}

.service-list-section .service-list-content .card-body .service-title .price-number .number-box .time+.time:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    border-left: 1px solid #eeeeee;
    width: 1px;
    height: calc(100% - 4px)
}

[dir=rtl] .service-list-section .service-list-content .card-body .service-title .price-number .number-box .time+.time:before {
    border-left: unset;
    border-right: 1px solid #eeeeee;
    left: unset;
    right: 0
}

body.dark .service-list-section .service-list-content .card-body .service-title .price-number .number-box .time+.time:before {
    border-color: #454851
}

.service-list-section .service-list-content .card-body .service-title .price-number .number-box .time i {
    --Iconsax-Size: 17px
}

.service-list-section .service-list-content .card-body .service-title .price-number .number-box .time span {
    color: #27af4d
}

.service-list-section .service-list-content .card-body .service-title>.d-flex {
    margin-top: 3px
}

.service-list-section .service-list-content .card-body .service-title>.d-flex del {
    color: #171b2780;
    font-weight: 500
}

.service-list-section .service-list-content .card-body .service-title>.d-flex small {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #171b27
}

.service-list-section .service-list-content .card-body .service-title>span {
    color: var(--primary-color);
    font-weight: 600;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.3;
    letter-spacing: calc(.4px + .00025*(100vw - 320px));
    margin-bottom: calc(4px + (7 - 4) * ((100vw - 320px) / (1920 - 320)))
}

.service-list-section .service-list-content .card-body .service-title h4 a {
    line-height: 1.3;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.service-list-section .service-list-content .card-body .description {
    width: 100%;
    margin-top: 7px;
    padding: 0 0 5px;
    line-height: 1.5;
    font-size: 15px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eeeeee
}

body.dark .service-list-section .service-list-content .card-body .description {
    color: #fff9;
    border-color: #454851
}

.service-list-section .service-list-content .service-detail-slider .service-img {
    border-radius: calc(6px + (15 - 6) * ((100vw - 320px) / (1920 - 320)));
    overflow: hidden
}

.service-list-section .service-list-content .service-detail-slider .service-img>img {
    aspect-ratio: 157/100;
    object-fit: cover
}

.service-list-section .service-list-content .service-detail-slider .swiper-pagination {
    position: relative;
    inset: unset;
    transform: unset;
    margin-top: 16px
}

.service-list-section .service-list-content .service-detail-slider .swiper-pagination .swiper-pagination-bullet {
    background-color: #808b97;
    border-radius: 100px;
    transition: all .3s
}

.service-list-section .service-list-content .service-detail-slider .swiper-pagination .swiper-pagination-bullet-active {
    width: 25px;
    background-color: var(--primary-color)
}

.service-list-section .service-list-content .service-detail-slider~.arrow-slider-box .swiper-button-next,
.service-list-section .service-list-content .service-detail-slider~.arrow-slider-box .swiper-button-prev {
    top: calc(50% - 37px)
}

.service-list-section .service-list-content .service-detail p {
    width: 100%;
    margin-top: 4px;
    padding: 0;
    line-height: 1.5
}

[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: 767.98px) {
    .service-list-section .service-list-content .select-dropdown .form-group {
        width: 100%
    }
}

.service-list-section .service-list-content .service-img {
    position: relative;
    border-radius: 10px;
    overflow: hidden
}

.service-list-section .service-list-content .service-img .badge {
    color: #fff;
    background-color: #ff4b4b;
    position: absolute;
    top: 16px;
    right: 16px;
    border-radius: 5px;
    padding: 8px 13px 10px;
    vertical-align: middle;
    font-size: 15px;
    letter-spacing: .5px
}

.service-list-section .service-list-content .service-img>img {
    width: 100%;
    aspect-ratio: 62/25;
    object-fit: cover
}

.service-list-section .service-list-content .service-img .provider-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, #171B27 21%, rgba(23, 27, 39, 0) 100%);
    padding: 47px 24px 17px
}

.service-list-section .service-list-content .service-img .provider-content .profile {
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(238, 238, 238, .588);
    padding-bottom: 14px;
    margin-bottom: 14px
}

.service-list-section .service-list-content .service-img .provider-content .profile span {
    color: #dddddde0;
    font-size: 16px;
    font-weight: 400;
    margin-top: 3px
}

.service-list-section .service-list-content .service-img .provider-content .profile .img {
    border-radius: 8px;
    width: 62px;
    height: 62px
}

.service-list-section .service-list-content .service-img .provider-content .profile .provider-title {
    display: flex;
    align-items: center
}

.service-list-section .service-list-content .service-img .provider-content .profile .provider-title h3 {
    font-size: 18px;
    color: #fff
}

.service-list-section .service-list-content .service-img .provider-content .profile .provider-title .rate {
    border-left: 1px solid rgba(238, 238, 238, .522);
    padding-left: 10px;
    margin: 0 0 0 10px
}

.service-list-section .service-list-content .service-img .provider-content .profile .provider-title .rate img {
    width: 14px;
    height: 14px
}

.service-list-section .service-list-content .service-img .provider-content .profile .provider-title .rate p {
    line-height: 1.3;
    color: #fff
}

.service-list-section .service-list-content .service-img .provider-content .profile-detail ul {
    display: flex;
    align-items: center;
    gap: 70px;
    padding-left: 23px
}

.service-list-section .service-list-content .service-img .provider-content .profile-detail ul li {
    display: list-item
}

.service-list-section .service-list-content .service-img .provider-content .profile-detail ul li::marker {
    color: #fff
}

.service-list-section .service-list-content .service-img .provider-content .profile-detail ul li label {
    color: #dddddde0;
    font-size: 16px;
    font-weight: 400
}

.service-list-section .service-list-content .service-img .provider-content .profile-detail ul li span {
    color: #fff;
    font-size: 16px;
    font-weight: 400
}

.service-list-section .service-list-content .package-detail-content .btn {
    padding: 16px 26px;
    font-size: 18px;
    line-height: 1;
    margin-top: 20px
}

.detail-content {
    margin-top: 24px
}

body.dark .detail-content label {
    color: #fff !important
}

body.dark .detail-content p {
    color: #fff9 !important
}

.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: 575.98px) {
    .detail-content .title {
        flex-direction: column;
        align-items: start
    }
}

.detail-content p {
    color: #647683;
    font-size: calc(16px + .00125*(100vw - 320px));
    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: #f9fafa;
    border-radius: 10px
}

.detail-content .detail-sec .overview-list {
    color: #647683
}

body.dark .detail-content.service-details-content h2,
body.dark .detail-content.service-details-content h3 {
    color: #fff
}

body.dark .detail-content.service-details-content li,
body.dark .detail-content.service-details-content strong {
    color: #fff9
}

.detail-content.service-details-content h3 {
    font-weight: 600;
    font-size: 22px
}

.detail-content.service-details-content ul,
.detail-content.service-details-content ol {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-inline-start: 20px
}

.detail-content.service-details-content ul li,
.detail-content.service-details-content ol li {
    font-size: 18px;
    margin-top: 10px;
    color: #647683;
    display: list-item;
    list-style-type: decimal
}

.detail-content.service-details-content ul li::marker,
.detail-content.service-details-content ol li::marker {
    color: #171b27;
    font-weight: 500
}

.detail-content.service-details-content ul li strong,
.detail-content.service-details-content ol li strong {
    color: #171b27
}

.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))
}

body.dark .detail-content.package-detail-content .detail-sec .service-item .detail .service-title h4 {
    color: #fff
}

.service-item {
    gap: 15px;
    display: flex;
    align-items: start;
    border-bottom: 1px solid #eeeeee
}

body.dark .service-item {
    border-color: #454851
}

.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 #eeeeee
}

.amount-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    padding: 16px;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.amount-header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.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: #222;
    border-right: 1px solid #eeeeee;
    padding-right: 10px
}

[dir=rtl] .amount-detail i {
    border-left: 1px solid #eeeeee;
    border-right: unset;
    padding-left: 10px;
    padding-right: unset
}

body.dark .amount-detail i {
    border-color: #454851
}

.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: #171b27
}

.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: poRaleway
}

[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 #eeeeee
}

body.dark .service-section.border-line {
    border-color: #454851
}

.service-section .service-right-box {
    margin: 0;
    position: sticky;
    top: 110px
}

.service-section .label-title {
    font-weight: 500;
    color: #171b27
}

.checkout-section .delivery-location .location-header {
    padding: calc(10px + .00625*(100vw - 320px)) calc(10px + .00625*(100vw - 320px)) 0;
    display: flex;
    align-items: flex-start;
    justify-content: unset;
    flex-direction: unset;
    gap: calc(8px + .005*(100vw - 320px));
    border: none
}

.checkout-section .delivery-location .location-header .badge {
    margin-left: auto
}

[dir=rtl] .checkout-section .delivery-location .location-header .badge {
    margin-left: unset;
    margin-right: auto
}

.checkout-section .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] .checkout-section .delivery-location .location-header .delivery-name {
    align-items: flex-end
}

.checkout-section .delivery-location .location-header .location-icon {
    border-radius: 16px;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.checkout-section .delivery-location .location-header .location-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.checkout-section .delivery-location .location-header .location-icon img {
    width: 24px;
    height: 24px
}

@media (max-width: 575.98px) {
    .checkout-section .delivery-location .location-header .location-icon img {
        height: 16px
    }
}

.checkout-section .delivery-location .location-header .location-icon svg {
    width: 24px;
    height: 24px
}

@media (max-width: 575.98px) {
    .checkout-section .delivery-location .location-header .location-icon svg {
        height: 16px
    }
}

.checkout-section .delivery-location .location-header .active-icon {
    border: none;
    border-radius: 16px;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.checkout-section .delivery-location .location-header .active-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.checkout-section .delivery-location .location-header .active-icon svg {
    stroke: var(--primary-color);
    fill: transparent;
    padding: calc(8px + .00125*(100vw - 320px));
    border-radius: 12px;
    height: calc(38px + .0025*(100vw - 320px));
    width: calc(38px + .0025*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.checkout-section .delivery-location .address {
    padding: 15px calc(10px + .00625*(100vw - 320px))
}

.checkout-section .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
}

.checkout-section .delivery-location .address .btn-outline {
    border-width: 1px;
    width: max-content;
    padding: 9px 18px
}

.checkout-section .delivery-location .address-bottom-box {
    padding: calc(10px + .00625*(100vw - 320px)) calc(16px + .0025*(100vw - 320px));
    padding-top: 0;
    border-top: 0;
    position: relative
}

.checkout-section .delivery-location .address-bottom-box .action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px
}

.checkout-section .delivery-location .address-bottom-box .btn {
    width: 100%;
    padding-block: 10px;
    background-color: #fff;
    font-weight: 500;
    border-radius: 8px
}

.checkout-section .delivery-location .address-bottom-box .btn-fill {
    border: transparent;
    color: #fff;
    background-color: var(--primary-color)
}

.checkout-section .delivery-location .address-bottom-box .btn-fill:hover {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color)
}

.checkout-section .delivery-location .address-bottom-box .btn-outline {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: #fff
}

.checkout-section .delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: transparent
}

.checkout-section .delivery-location .address-bottom-box .btn-outline:hover .icon {
    --Iconsax-Color: #ffffff
}

body.dark .checkout-section .delivery-location .address-bottom-box .btn-outline {
    border-color: var(--primary-color)
}

.checkout-section .delivery-location .address-bottom-box .radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: poRaleway
}

[dir=rtl] .checkout-section .delivery-location .address-bottom-box .radio {
    left: unset;
    right: 0
}

.checkout-section .delivery-location .radio:checked~button {
    background-color: var(--primary-color);
    color: #fff
}

body.dark .checkout-section .delivery-location .radio:checked~button {
    background-color: var(--primary-color) !important;
    color: #fff
}

.checkout-section .booking-data {
    width: calc(100% - 16px - (14px + .00625*(100vw - 320px)));
    margin-left: calc(14px + .00625*(100vw - 320px));
    background-color: #f9fafa;
    padding: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: calc(8px + .0025*(100vw - 320px));
    margin-top: 0
}

body.dark .checkout-section .booking-data {
    background-color: #252934
}

body.dark .checkout-section .booking-data h3,
body.dark .checkout-section .booking-data .delivery-location .location-header h4 {
    color: #fff
}

body.dark .checkout-section .booking-data .delivery-location .location-header span {
    color: #fff9
}

.checkout-section .booking-data .input-group i {
    top: 50%;
    transform: translateY(-50%)
}

.checkout-section .booking-data .selected-men {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: unset
}

@media (max-width: 1610px) {
    .checkout-section .booking-data .selected-men {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 1300px) {
    .checkout-section .booking-data .selected-men {
        grid-template-columns: 1fr
    }
}

@media (max-width: 1199.98px) {
    .checkout-section .booking-data .selected-men {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 1040.98px) {
    .checkout-section .booking-data .selected-men {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 725.98px) {
    .checkout-section .booking-data .selected-men {
        grid-template-columns: 1fr
    }
}

body.dark .checkout-section .booking-data .selected-men {
    background-color: #171b27
}

.checkout-section .booking-data .selected-men .servicemen-list-item {
    min-width: unset;
    width: 100%;
    border-radius: 6px;
    padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)))
}

body.dark .checkout-section .booking-data .selected-men .servicemen-list-item {
    background-color: #252934
}

.checkout-section .booking-data .selected-men .servicemen-list-item .list {
    display: flex;
    gap: 10px
}

@media (max-width: 400px) {
    .checkout-section .booking-data .selected-men .servicemen-list-item .list {
        flex-direction: column
    }
}

.checkout-section .booking-data .selected-men .servicemen-list-item .list>div {
    width: calc(100% - 55px)
}

@media (max-width: 400px) {
    .checkout-section .booking-data .selected-men .servicemen-list-item .list>div {
        width: 100%
    }
}

body.dark .checkout-section .booking-data .selected-men .servicemen-list-item .list h5 {
    color: #fff
}

.checkout-section .booking-data .selected-men .servicemen-list-item .list p {
    line-height: 1.4;
    color: #647683
}

body.dark .checkout-section .booking-data .selected-men .servicemen-list-item .list p {
    color: #fff9
}

.checkout-section .booking-data .selected-men .servicemen-list-item .list p.years {
    margin-top: 4px;
    font-size: 15px;
    color: #171b27b3
}

body.dark .checkout-section .booking-data .selected-men .servicemen-list-item .list p.years {
    color: #fffc
}

.checkout-section .booking-data .select-servicemen-div .servicemen-lists {
    padding: calc(12px + .0025*(100vw - 320px));
    border-radius: calc(4px + .0025*(100vw - 320px))
}

.checkout-section .service-booking ul .booking-list {
    padding-bottom: calc(18px + .0075*(100vw - 320px))
}

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

.checkout-section .wizard-footer.service-booking-footer {
    padding: 0;
    padding-top: calc(10px + .00625*(100vw - 320px));
    margin-top: calc(10px + .00625*(100vw - 320px));
    border-top: 1px solid #eeeeee
}

body.dark .checkout-section .wizard-footer.service-booking-footer {
    border-color: #454851
}

.servicemen-lists {
    width: 100%;
    padding: 16px;
    background-color: transparent;
    border: 1px dashed var(--primary-color);
    color: var(--primary-color);
    border-radius: 8px;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    position: relative;
    z-index: 0;
    overflow: hidden
}

.servicemen-lists:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--primary-color);
    opacity: .1;
    z-index: -1
}

.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: #647683
}

body.dark .no-cart-found p {
    color: #fff9 !important
}

.no-cart-found.no-cart-data {
    margin-block: calc(20px + .0125*(100vw - 320px))
}

.service-package-section .date-time-location-btn {
    color: var(--primary-color);
    background-color: transparent;
    border: none;
    cursor: poRaleway;
    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(--primary-color);
    --Iconsax-Size: 18px
}

.service-package-section .service-item {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #eeeeee;
    padding: calc(14px + .00375*(100vw - 320px));
    display: block
}

body.dark .service-package-section .service-item {
    background-color: #252934;
    border-color: #454851
}

@media (max-width: 1199px) {
    .service-package-section .service-item {
        display: block
    }
}

.service-package-section .service-item+.service-item {
    margin-top: 30px
}

.service-package-section .service-item .service-left-box {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(2, 1fr)
}

@media (max-width: 991px) {
    .service-package-section .service-item .service-left-box {
        grid-template-columns: repeat(1, 1fr)
    }
}

.service-package-section .service-item .service-left-box img {
    aspect-ratio: 207/100;
    width: 100%;
    height: unset;
    border-radius: 10px
}

.service-package-section .service-item .service-left-box .service-title {
    display: block
}

.service-package-section .service-item .service-left-box .service-title .service-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

body.dark .service-package-section .service-item .service-left-box .service-title .service-offer h4 {
    color: #fff
}

.service-package-section .service-item .service-left-box .service-title .service-offer h4 {
    font-weight: 600
}

.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-top: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: #171b27b3
}

body.dark .service-package-section .service-item .service-left-box .service-title p {
    color: #fff9
}

.service-package-section .service-item .service-left-box .service-title .service-price {
    gap: 8px;
    margin-top: 3px;
    align-items: center;
    display: flex
}

body.dark .service-package-section .service-item .service-left-box .service-title .service-price del {
    color: #fff9
}

.service-package-section .service-item .service-left-box .service-title .service-price small {
    line-height: 1.3;
    font-size: 20px
}

.service-package-section .service-item .service-left-box .service-title .service-price del {
    font-size: 18px;
    line-height: 1.3;
    color: #171b2780;
    font-weight: 500
}

.service-package-section .service-item .service-left-box .service-title .amount {
    margin-top: 15px;
    border-radius: 8px
}

body.dark .service-package-section .service-item .service-left-box .service-title .amount {
    border-color: #454851
}

body.dark .service-package-section .service-item .service-left-box .service-title .amount .amount-listing li {
    color: #fff
}

body.dark .service-package-section .service-item .service-left-box .service-title .amount .amount-listing li i {
    --Iconsax-Color: #ffffff
}

.service-package-section .service-item .service-left-box .service-title .amount .amount-detail {
    padding: 12px
}

.service-package-section .service-item .service-left-box .service-title .amount .amount-detail .amount-listing {
    gap: 13px
}

.service-package-section .service-item .service-left-box .service-title .amount .amount-detail .amount-listing li {
    color: #171b2799
}

.service-package-section .service-item .service-left-box .service-title .amount .amount-detail .amount-listing li i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: #222
}

.service-package-section .service-item .service-left-box .service-title .label-title {
    font-size: 18px
}

.service-package-section .service-item .service-left-box .service-title .service-section.border-line {
    padding: 0;
    border: none
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option {
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: unset;
    gap: 35px
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option .form-check {
    margin: 0;
    padding: 0;
    border: none;
    flex-direction: unset;
    justify-content: unset
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option .form-check .form-radio-input {
    min-width: unset;
    width: 20px;
    background-color: #f9fafa;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #eeeeee;
    border-radius: 100%
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option .form-check .form-radio-input:checked {
    border-color: transparent;
    background-color: transparent
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option .form-check .form-radio-input:checked:after {
    background-color: var(--primary-color);
    opacity: .12
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option .form-check .form-radio-input:checked:before {
    transform: translate(-50%, -50%) scale(1)
}

.service-package-section .service-item .service-left-box .service-title .service-section .select-option .form-check .form-radio-input:after {
    border: none
}

.service-package-section .service-item .service-left-box .service-title .form-group-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px
}

.service-package-section .service-item .service-left-box .service-title .form-group-box>.position-relative {
    width: 100%
}

.service-package-section .service-item .service-left-box .service-title .form-group-box .form-control {
    padding-left: 50px;
    width: 100%
}

.service-package-section .service-item .service-left-box .service-title .form-group-box i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: #808B97;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px
}

.service-package-section .service-item .service-left-box .service-title .booking-data h3 {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.3;
    color: #171b27
}

body.dark .service-package-section .service-item .service-left-box .service-title .booking-data h3 {
    color: #fff
}

.service-package-section .service-item .label-title {
    font-size: calc(16px + .00125*(100vw - 320px));
    margin-bottom: 15px;
    font-weight: 500
}

body.dark .service-package-section .service-item .label-title {
    color: #fff
}

.service-package-section .service-item .label-title-box {
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex
}

.service-package-section .service-item .service-bottom-box {
    border-top: 1px solid #eeeeee;
    margin-top: 25px;
    padding-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

body.dark .service-package-section .service-item .service-bottom-box {
    border-color: #454851
}

@media (max-width: 991px) {
    .service-package-section .service-item .service-bottom-box {
        grid-template-columns: repeat(1, 1fr)
    }
    .service-package-section .service-item .service-bottom-box .service-section {
        border: none;
        padding: 0;
        margin: 20px 0 0
    }
}

.service-package-section .service-item .service-bottom-box>div+div {
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px solid #eeeeee;
    width: calc(100% - 20px)
}

body.dark .service-package-section .service-item .service-bottom-box>div+div {
    border-color: #454851
}

[dir=rtl] .service-package-section .service-item .service-bottom-box>div+div {
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #eeeeee;
    border-left: unset;
    padding-left: unset;
    margin-left: unset
}

.service-package-section .service-item .service-bottom-box .service-section .select-servicemen {
    padding: 12px
}

body.dark .service-package-section .service-item .service-bottom-box .service-section .select-servicemen {
    background-color: #252934
}

body.dark .service-package-section .service-item .service-bottom-box .service-section .select-servicemen p {
    color: #fff9
}

body.dark .service-package-section .service-item .service-bottom-box .service-section .select-servicemen .plus-minus i {
    --Iconsax-Color: #ffffff
}

.service-package-section .service-item .service-bottom-box .service-section .select-servicemen p {
    color: #647683
}

.service-package-section .service-item .service-bottom-box .service-section .select-servicemen .plus-minus,
.service-package-section .service-item .service-bottom-box .service-section .select-servicemen .increment {
    border-radius: 4px
}

.service-package-section .service-item .service-bottom-box .service-section .select-servicemen .plus-minus .add,
.service-package-section .service-item .service-bottom-box .service-section .select-servicemen .increment .add {
    background-color: transparent;
    --Iconsax-Color: #222
}

.service-package-section .service-item .service-bottom-box .service-section .select-servicemen .plus-minus i,
.service-package-section .service-item .service-bottom-box .service-section .select-servicemen .increment i {
    --Iconsax-Size: 22px;
    width: 36px;
    height: 36px;
    --Iconsax-Color: #222
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option {
    border: none;
    padding: 0;
    border-radius: 0
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check {
    border-radius: 8px;
    padding: 16px 22px;
    border: 1px solid #eeeeee;
    margin: 0
}

body.dark .service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check {
    border-color: #454851;
    background-color: #252934
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check+.form-check {
    margin-top: 10px
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input {
    min-width: unset;
    width: 20px;
    background-color: #f9fafa;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #eeeeee;
    border-radius: 100%
}

body.dark .service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input {
    border-color: #454851
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input:checked {
    border-color: transparent;
    background-color: transparent
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input:checked:after {
    background-color: var(--primary-color);
    opacity: .12
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input:checked:before {
    transform: translate(-50%, -50%) scale(1)
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input:checked~label {
    color: #171b27
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check .form-radio-input:after {
    border: none
}

.service-package-section .service-item .service-bottom-box .booking-data .service-section .select-option .form-check label {
    color: #647683
}

.service-package-section .service-item .service-bottom-box .booking-data .service-title {
    margin-bottom: .5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex
}

.service-package-section .service-item .service-bottom-box .service-address-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

@media (max-width: 767px) {
    .service-package-section .service-item .service-bottom-box .service-address-list {
        grid-template-columns: auto
    }
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location {
    padding: 12px
}

body.dark .service-package-section .service-item .service-bottom-box .service-address-list .delivery-location {
    background-color: #252934;
    border-color: #454851
}

body.dark .service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header .name h4 {
    color: #fff
}

body.dark .service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header .name span,
body.dark .service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .address p {
    color: #fff9
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header {
    padding: 0;
    justify-content: space-between;
    align-items: flex-start
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header .location-icon {
    border-radius: 8px;
    height: 40px;
    width: 40px;
    padding: 7px;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FE782E1A
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header .location-icon svg {
    width: 100%;
    height: 100%
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header .name h4 {
    font-size: 18px;
    line-height: 1.3
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .location-header .name span {
    font-size: 15px;
    color: #647683;
    margin-top: 2px
}

.service-package-section .service-item .service-bottom-box .service-address-list .delivery-location .address {
    padding: 0;
    margin-top: 12px
}

.service-package-section .service-item .date-time-picket-sec {
    padding: 0;
    border-radius: 0;
    border: none
}

body.dark .service-package-section .service-item .date-time-picket-sec {
    background-color: transparent
}

.service-package-section .service-item .date-time-picket-sec .select-option {
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: unset;
    gap: 35px
}

.service-package-section .service-item .date-time-picket-sec .select-option .form-check {
    margin: 0;
    padding: 0;
    border: none;
    flex-direction: unset;
    justify-content: unset
}

.service-package-section .service-item .date-time-picket-sec .select-option .form-check .form-radio-input {
    min-width: unset;
    width: 20px;
    background-color: #f9fafa;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #eeeeee;
    border-radius: 100%
}

body.dark .service-package-section .service-item .date-time-picket-sec .select-option .form-check .form-radio-input {
    border-color: #454851
}

.service-package-section .service-item .date-time-picket-sec .select-option .form-check .form-radio-input:checked {
    border-color: transparent;
    background-color: transparent
}

.service-package-section .service-item .date-time-picket-sec .select-option .form-check .form-radio-input:checked:after {
    background-color: var(--primary-color);
    opacity: .12
}

.service-package-section .service-item .date-time-picket-sec .select-option .form-check .form-radio-input:checked:before {
    transform: translate(-50%, -50%) scale(1)
}

.service-package-section .service-item .date-time-picket-sec .select-option .form-check .form-radio-input:after {
    border: none
}

.service-package-section .service-item .date-time-picket-sec .date-time-picker {
    margin-top: 24px
}

body.dark .service-package-section .service-item .date-time-picket-sec .date-time-picker .flatpicker-calender .flatpickr-input {
    background-color: #171b27 !important
}

.service-package-section .service-item .detail .servicemen-lists {
    margin-top: 18px
}

.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: #f9fafa;
    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 + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 23px;
    color: #171b27
}

body.dark .service-package-section .service-item .detail .booking-data h3 {
    color: #fff !important
}

.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: #171b27e6;
    cursor: poRaleway
}

[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) !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    margin-left: inherit !important
}

[dir=rtl] .feature-slider {
    direction: ltr
}

[dir=rtl] .slick-list .slick-track .slick-slide>div {
    direction: rtl
}