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

* {
    margin: 0;
    padding: 0
}

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

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

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

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

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

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

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

a:focus {
    outline: none
}

button:focus {
    outline: none
}

:focus {
    outline: none
}

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

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

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

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

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

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

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

span {
    display: inline-block
}

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

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

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

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

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

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

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

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

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

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

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

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

input[type=number] {
    -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: #808b97;
    letter-spacing: .4px
}

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

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

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

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

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

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

@media (max-width: 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: #5465FF;
    transform: translate(0);
    transition: all .2s ease
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-underline {
    text-decoration: underline
}

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

.text-white {
    color: #fff
}

.border {
    border: 1px solid #E5E8EA
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.p-16 {
    padding: 16px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.note {
    margin-top: 16px
}

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

.note p {
    color: #808b97
}

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

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

@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: #808b97!important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

del {
    color: #00162e4d
}

.required-span {
    color: #f2393b
}

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

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

.favorite-icon {
    color: #ff4b4b
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.filter .accordion .accordion-item .accordion-body .accordion .accordion-item .accordion-body .search-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    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: pointer
}

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

.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: #808b97;
    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 {
    padding-top: 0!important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    30% {
        content: "Provider"
    }

    55% {
        content: "Servicemen"
    }

    80% {
        content: "Admin"
    }
}

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

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

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

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

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

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

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

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

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

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

    to {
        transform: scaleX(1)
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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(--theme-color);
    border: 1px solid var(--theme-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: pointer
}

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

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

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

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

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

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

@media (max-width: 355px) {
    .booking-sec .data li {
        display:block
    }
}

.booking-sec .data .label {
    color: #808b97;
    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(--theme-color)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 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: #f5f6f7;
    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
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 1366px) {
    .breadcrumb-section .breadcrumb-contain h2:before,.breadcrumb-section .breadcrumb-contain h2:after {
        top:50%;
        transform: translateY(-50%)
    }
}

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

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

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

@media (max-width: 1366px) {
    .breadcrumb-section .breadcrumb-contain h2 span:before,.breadcrumb-section .breadcrumb-contain h2 span:after {
        top:50%;
        transform: translateY(-50%)
    }
}

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

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

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

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

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

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

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

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

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

.btn.btn-solid:hover,.btn.btn-solid:active:hover {
   background-color: rgb(0 0 0);  /* Black background */
   color: #ffffff;             /* White text */
   border: 1px solid #ffffff; /* White border */
}
}

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

.btn.btn-outline {
    border: 1px solid #ffffff;
    color: #ffffff;
}

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

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

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

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

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

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

.btn:focus {
    box-shadow: none
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 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: 20px
}

@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: 100%;
    width: 100%;
    color: #00162e
}

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

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

@media (max-width: 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
    }
}

.mbsc-ios-dark.mbsc-selected .mbsc-calendar-cell-text {
    background-color: var(--theme-color);
    color: #fff
}

.mbsc-ios-dark.mbsc-calendar-today,.mbsc-ios-dark.mbsc-calendar-week-nr {
    color: var(--theme-color)
}

.mbsc-ios-dark.mbsc-hover .mbsc-calendar-cell-text {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: transparent
}

.mbsc-ios-dark.mbsc-hover .mbsc-calendar-cell-text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme-color);
    opacity: .3;
    z-index: -1
}

.mbsc-datepicker.mbsc-datepicker-inline {
    width: 100%;
    border: none;
    background: #fff;
    color: #000
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.card .card-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/2;
    object-fit: cover
}

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

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

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

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

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

.cart {
    background-color: #f5f6f7
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 480px) {
    .cart .cart-body .cart-item .cart-heading .cart-action button .edit,.cart .cart-body .cart-item .cart-heading .cart-action button .delete {
        width:30px;
        height: 30px;
        --Iconsax-Size: 17px
    }
}

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

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

@media (max-width: 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: #00162e
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 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: 17px
}

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

@media (max-width: 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: #808b97;
    display: flex;
    align-items: center;
    gap: 6px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.coupon-item .coupon-content p span {
    font-weight: 500;
    color: #00162e
}

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

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

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

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

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

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

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

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

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

.coupon-item .coupon-footer p span {
    color: #00162e;
    padding-left: 10px
}

[dir=rtl] .coupon-item .coupon-footer p span {
    padding-left: unset;
    padding-right: 10px
}

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

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

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

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

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

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

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

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

@media (max-width: 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 #E5E8EA;
    border-radius: 10px;
    padding: calc(12px + .005*(100vw - 320px));
    cursor: pointer
}

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

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

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

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

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

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

.payment .payment-body .payment-options .payment-option .payment-title .payment-img {
    width: calc(80px + .0125*(100vw - 320px));
    height: calc(40px + .0125*(100vw - 320px));
    background-color: #f5f6f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.payment .payment-body .payment-options .payment-option .payment-title .payment-img .payment-icon {
    padding: 4px;
    height: 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: #5465ff1a
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 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: #00162e;
    font-weight: 500
}

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

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

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

@media (max-width: 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 #E5E8EA;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    background-color: #f5f6f7;
    display: block
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 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 #E5E8EA;
    color: #808b97
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 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 {
    border-radius: 100%;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    background-color: #e5e8ea;
    border: calc(2px + .00125*(100vw - 320px)) solid #ffffff;
    outline: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: center
}

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

@media (max-width: 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(--theme-color);
    border-radius: 100%;
    height: calc(42px + .005*(100vw - 320px));
    width: calc(42px + .005*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

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

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

.service-booking .delivery-location .location-header .name h4 {
    font-weight: 500;
    font-size: calc(16px + .00125*(100vw - 320px));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.service-booking .delivery-location .location-header .name span {
    margin-top: 4px;
    font-size: calc(14px + .00125*(100vw - 320px))
}

@media (max-width: 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(--theme-color)
}

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

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

.service-booking .delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--theme-color);
    color: #fff;
    border-color: transparent
}

.service-booking .delivery-location .address-bottom-box .radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

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

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

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

.service-booking .add-location {
    color: var(--theme-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline
}

.service-booking .add-location:hover {
    text-decoration: underline
}

.service-booking .booking-data {
    margin-top: -3px;
    width: calc(100% - 16px - (14px + .00625*(100vw - 320px)));
    margin-left: calc(14px + .00625*(100vw - 320px))
}

[dir=rtl] .service-booking .booking-data {
    margin-left: unset;
    margin-right: calc(14px + .00625*(100vw - 320px))
}

.service-booking .booking-data .select-option {
    flex-direction: row;
    background-color: transparent;
    border: none;
    background-color: #fff;
    padding: 0 0 calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) 0;
    gap: calc(4px + .0225*(100vw - 320px));
    flex-wrap: wrap
}

.service-booking .booking-data .select-option .form-check {
    border: none;
    padding: 0;
    flex-direction: row;
    align-items: flex-start
}

.service-booking .booking-data .select-option .form-check .form-radio-input {
    width: 22px;
    height: 22px;
    border: none;
    margin-top: 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

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

.service-booking .booking-data .select-option .form-check .form-radio-input:checked~label {
    font-weight: 500;
    color: #00162ee6!important
}

.service-booking .booking-data .select-option .form-check .form-radio-input:before {
    top: 50%;
    left: 50%;
    right: unset;
    transform: translate(-50%,-50%) scale(0)
}

.service-booking .booking-data .select-option .form-check .form-radio-input:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    right: unset
}

.service-booking .booking-data .text-success {
    font-size: 18px
}

.service-booking .booking-data .servicemen-list-item {
    width: max-content;
    min-width: 276px;
    background-color: #f5f6f7!important;
    border: none!important;
    box-shadow: none!important
}

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

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

.service-booking .form-control {
    background-color: #fff;
    border-radius: 10px;
    padding: 16px;
    color: #00162e
}

.service-booking .form-control:hover,.service-booking .form-control:focus {
    color: #00162e;
    background-color: #fff
}

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

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

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    border-top: 1px dashed #E5E8EA;
    padding: calc(16px + .0025*(100vw - 320px)) calc(15px + (200 - 15)*((100vw - 320px) /(1920 - 320)))
}

.wizard-footer .btn-outline {
    border-width: 1px
}

.wizard-footer .next-btn {
    padding: 12px 20px;
    display: inline-block;
    width: auto
}

@media (max-width: 375px) {
    .wizard-footer .next-btn {
        width:100%
    }
}

.wizard-footer button {
    width: max-content;
    padding: 12px 20px;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1
}

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

.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: #00162e!important
}

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

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

.edit-option {
    background-color: unset;
    border: none;
    padding: 0;
    color: var(--theme-color);
    text-decoration: underline;
    font-size: 18px
}

.selected-men {
    background-color: #fff;
    padding: calc(16px + .0025*(100vw - 320px));
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.input-group>.form-control:focus,.input-group>.form-select:focus,.input-group>.form-floating:focus-within {
    z-index: 0
}

.form-control {
    border: 1px solid rgba(255,255,255,.1);
    background-color: #ffffff1a;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #fff;
    padding: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320))) 16px;
    width: 100%;
    border-radius: 8px
}

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

.form-control.first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px
}

.form-control.last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px
}

.form-control:focus,.form-control:hover {
    background-color: #ffffff1a;
    color: #00162e;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,.1)
}

.form-control.form-control-gray {
    background-color: #f5f6f7;
    color: #00162e
}

.form-control.form-control-gray:focus,.form-control.form-control-gray:hover {
    background-color: #f5f6f7;
    color: #00162e;
    box-shadow: none
}

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

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

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

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

textarea.form-control {
    min-height: calc(39px + (46 - 39) * ((100vw - 320px) / (1920 - 320)))
}

.comment-section textarea.form-control {
    min-height: 110px
}

.form-group {
    margin-bottom: 24px
}

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

.form-group label {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 8px;
    position: relative
}

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

.form-check .form-check-input,.form-check .form-radio-input {
    cursor: pointer;
    position: relative;
    border: none;
    width: 20px;
    height: 20px;
    box-shadow: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    filter: none;
    float: unset;
    margin: 0
}

.form-check .form-check-input:focus,.form-check .form-radio-input:focus {
    box-shadow: none
}

.form-check .form-check-input:before,.form-check .form-radio-input:before {
    transition: transform .4s cubic-bezier(.45,1.8,.5,.75);
    transform: rotate(-45deg) scale(0);
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    z-index: 1;
    width: .75rem;
    height: .3rem;
    border: 2px solid #ffffff;
    border-top-style: none;
    border-right-style: none
}

[dir=rtl] .form-check .form-check-input:before,[dir=rtl] .form-check .form-radio-input:before {
    left: unset;
    right: 4px
}

.form-check .form-check-input:after,.form-check .form-radio-input:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #E5E8EA;
    border-radius: 4px;
    cursor: pointer
}

[dir=rtl] .form-check .form-check-input:after,[dir=rtl] .form-check .form-radio-input:after {
    left: unset;
    right: -1px
}

.form-check .form-check-input:checked:before,.form-check .form-radio-input:checked:before {
    transform: rotate(-45deg) scale(1)
}

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

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

.form-check .form-radio-input:after {
    border-radius: 100%;
    left: 0;
    top: -5px
}

[dir=rtl] .form-check .form-radio-input:after {
    left: unset;
    right: 0
}

.form-check .form-radio-input:before {
    border: none;
    background-color: var(--theme-color);
    border-radius: 100%;
    width: 10px;
    height: 10px;
    top: 0;
    left: 5px
}

[dir=rtl] .form-check .form-radio-input:before {
    left: unset;
    right: 5px
}

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

.form-check .form-radio-input:checked:after {
    border: 6px solid rgba(84,101,255,.12);
    background-color: #fff
}

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

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

.form-check p {
    font-size: 16px
}

.form-check label {
    font-size: 14px
}

.login-main .login-card .login-detail .phone-detail {
    position: relative;
    overflow: unset
}

.login-main .login-card .login-detail .phone-detail label.error {
    position: absolute;
    bottom: -30px;
    left: 0
}

.login-main .login-card .login-detail.phone-detail {
    position: relative
}

.login-main .login-card .login-detail.phone-detail label .form-group.error {
    position: absolute!important;
    bottom: -30px;
    left: 0
}

.form-select {
    background-color: #f5f6f7;
    border: none;
    color: #00162e;
    font-size: 16px;
    padding: 8px 70px 8px 12px;
    border-radius: 6px
}

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

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

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

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

[dir=rtl] .input-group .form-control {
    padding: 10px 46px 10px 16px
}

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

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

.search-form {
    margin-top: 30px;
    width: 30%;
    margin-inline:auto;padding: 10px;
    border-radius: 40px!important;
    border: 1px solid rgba(255,255,255,.2)
}

.search-form .form-control {
    border-radius: 40px;
    color: #fff
}

.search-form ::placeholder {
    color: #808b97
}

.search-form i {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #808B97;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 1460px) {
    .search-form {
        width:40%
    }
}

@media (max-width: 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-image: url(https://quickfixwork.com/public/build/assets/bg-3bee563f.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    padding-top: calc(60px + .00625*(100vw - 320px));
    z-index: 0
}

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

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

.home-section .home-icon img {
    position: absolute;
    animation: mover 2s infinite alternate;
    z-index: -1
}

.home-section .home-icon img.image-1 {
    top: 180px;
    right: -65px;
    animation-delay: 1s;
    width: 140px;
    overflow: hidden
}

[dir=rtl] .home-section .home-icon img.image-1 {
    right: unset;
    left: -65px
}

@media (max-width: 575.98px) {
    .home-section .home-icon img.image-1 {
        display:none
    }
}

.home-section .home-icon img.image-2 {
    top: calc(200px + (280 - 200) * ((100vw - 992px) / (1920 - 992)));
    left: 60px;
    animation-delay: 2s;
    height: 120px
}

[dir=rtl] .home-section .home-icon img.image-2 {
    left: unset;
    right: 60px
}

@media (max-width: 991.98px) {
    .home-section .home-icon img.image-2 {
        display:none
    }
}

.home-section .home-icon img.image-3 {
    animation-delay: 3s;
    height: 140px;
    filter: brightness(.5);
    transform: rotate3d(3,2,1,180deg);
    animation: unset;
    top: calc(220px + (320 - 220) * ((100vw - 992px) / (1920 - 992)));
    right: calc(20px + (240 - 20) * ((100vw - 992px) / (1920 - 992)))
}

[dir=rtl] .home-section .home-icon img.image-3 {
    right: unset;
    left: calc(20px + (240 - 20) * ((100vw - 992px) / (1920 - 992)))
}

@media (max-width: 991.98px) {
    .home-section .home-icon img.image-3 {
        display:none
    }
}

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

@media (max-width: 1399.99px) {
    .home-section .home-slider {
        margin-top:530px
    }
}

@media (max-width: 991.98px) {
    .home-section .home-slider {
        margin-top:400px
    }
}

@media (max-width: 767.98px) {
    .home-section .home-slider {
        margin-top:280px
    }
}

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

.home-section .home-slider .service-slider .swiper-wrapper {
    height: 372px;
    transition-timing-function: linear
}

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

@media (max-width: 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;
    padding-top: 10px
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card,.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .img-box {
    height: 100%
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .img-box .bg-size {
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    width: 100%;
    height: 100%;
    background-position: top center!important
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .service-content {
    background: linear-gradient(180deg,rgba(0,10,28,0) 0%,rgba(0,10,28,.4990371148) 56%,rgba(0,10,28,.9332107843) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #fff9;
    padding: 90px 15px 16px;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide .service-card .service-content span {
    text-align: center;
    position: relative
}

.home-section .home-slider .service-slider .swiper-wrapper .swiper-slide:nth-child(2n) {
    padding-top: calc(40px + .0375*(100vw - 320px))
}

.home-section .home-contain {
    position: absolute;
    top: calc(80px + .05*(100vw - 320px));
    left: 0;
    right: 0;
    width: 90%;
    text-align: center;
    margin: 0 auto
}

@media (max-width: 1399.99px) {
    .home-section .home-contain {
        top:178px
    }
}

@media (max-width: 991.98px) {
    .home-section .home-contain {
        top:143px
    }
}

.home-section .home-contain h1 {
    color: #fff;
    line-height: 1
}

@media (max-width: 991.98px) {
    .home-section .home-contain h1 {
        width:70%;
        margin-inline:auto}
}

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

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

.home-section .home-contain p {
    color: #808b97;
    font-size: 20px;
    padding-top: 50px;
    width: 45%;
    line-height: 1.5;
    margin: 0 auto
}

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

@media (max-width: 1366px) {
    .home-section .home-contain p {
        font-size:18px
    }
}

@media (max-width: 1199.98px) {
    .home-section .home-contain p {
        width:65%;
        padding-top: 40px
    }
}

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

.home-section .home-contain .home-form-group {
    padding-top: 40px;
    width: 700px;
    margin: 0 auto;
    position: relative
}

@media (min-width: 991.98px) {
    .home-section .home-contain .home-form-group {
        padding-top:calc(15px + (30 - 15) * ((100vw - 992px) / (1920 - 992)))
    }
}

@media (max-width: 767.98px) {
    .home-section .home-contain .home-form-group {
        display:none
    }
}

.home-section .home-contain .home-form-group .input-group {
    padding: 10px;
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap
}

.home-section .home-contain .home-form-group .input-group .position-relative i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14px
}

.home-section .home-contain .home-form-group .input-group .position-relative .form-control {
    padding: 10px 16px 10px 45px;
    color: #fff;
    border-radius: 100px 0 0 100px
}

[dir=rtl] .home-section .home-contain .home-form-group .input-group .position-relative .form-control {
    border-radius: 0 100px 100px 0
}

.home-section .home-contain .home-form-group .input-group .position-relative ::placeholder {
    color: #808b97
}

.home-section .home-contain .home-form-group .input-group .btn {
    border-radius: 0 100px 100px 0;
    z-index: 0;
    padding-inline:29px}

[dir=rtl] .home-section .home-contain .home-form-group .input-group .btn {
    border-radius: 100px 0 0 100px
}

.home-section .home-contain .home-animation {
    position: relative;
    line-height: 1;
    margin-left: 35px;
    text-transform: uppercase;
    font-size: calc(22px + .02375*(100vw - 320px));
    letter-spacing: 2px;
    font-weight: 900;
    background: linear-gradient(to right,#fb4040 20%,#ff549c 30%,#725efe 70%,#2477ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 150% auto;
    animation: textShine 1s ease-in-out infinite alternate
}

[dir=rtl] .home-section .home-contain .home-animation {
    margin-left: unset;
    margin-right: 35px
}

.home-section .home-contain .home-animation .shape {
    border-radius: 35px;
    position: absolute;
    top: -21px;
    left: -27px;
    z-index: -1;
    width: calc(375px + (513 - 375) * ((100vw - 991px) / (1920 - 991)));
    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
    }
}

.home-section.ratio_18 .home-contain {
    width: 100%;
    top: calc(80px + .0375*(100vw - 320px))
}

.home-section.ratio_18 .home-contain h2 {
    font-size: calc(20px + .01375*(100vw - 320px));
    font-weight: 700;
    background: linear-gradient(to right,#fb4040 20%,#ff549c 30%,#725efe 50%,#2477ff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 150% auto;
    width: max-content;
    margin: 0 auto;
    position: relative
}

.home-section.ratio_18 .home-contain h2:before,.home-section.ratio_18 .home-contain h2:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: calc(14px + .0125*(100vw - 320px));
    width: 4px;
    border-radius: 6px;
    top: 4px
}

@media (max-width: 1366px) {
    .home-section.ratio_18 .home-contain h2:before,.home-section.ratio_18 .home-contain h2:after {
        top:7px
    }
}

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

[dir=rtl] .home-section.ratio_18 .home-contain h2:before {
    right: calc(-25px + ((-40) - (-25)) * ((100vw - 320px) / (1920 - 320)));
    left: unset
}

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

[dir=rtl] .home-section.ratio_18 .home-contain h2:after {
    left: calc(-25px + ((-40) - (-25)) * ((100vw - 320px) / (1920 - 320)));
    right: unset
}

.home-section.ratio_18 .home-contain h2 span:before,.home-section.ratio_18 .home-contain h2 span:after {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: calc(28px + .01875*(100vw - 320px));
    width: 4px;
    border-radius: 6px;
    top: -8px
}

@media (max-width: 1366px) {
    .home-section.ratio_18 .home-contain h2 span:before,.home-section.ratio_18 .home-contain h2 span:after {
        top:-3px
    }
}

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

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

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

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

.home-section.ratio_18 .home-contain p {
    font-size: 16px;
    line-height: 24px;
    max-width: 680px;
    width: 90%;
    padding-top: calc(20px + (30 - 20) * ((100vw - 991px) / (1920 - 991)))
}

@media (max-width: 991.98px) {
    .home-section.ratio_18 .home-contain p {
        display:none
    }
}

.home-section.ratio_18 .home-contain h3 {
    color: #fff;
    margin-top: 30px;
    font-size: 30px
}

@media (max-width: 991.98px) {
    .home-section.ratio_18 .home-contain h3 {
        display:none
    }
}

@media (max-width: 1199.98px) {
    .home-section.ratio_18 .bg-size:before {
        padding-bottom:calc((170px) + ((-60) - (170)) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media (max-width: 991.98px) {
    .home-section.ratio_18 .bg-size:before {
        padding-bottom:calc(60px + -.08125*(100vw - 320px))
    }
}

@media (min-width: 1199px) {
    .home-section.ratio_18 .bg-size:before {
        padding-bottom:calc((110px) + ((-70) - (110)) * ((100vw - 991px) / (1920 - 991)))
    }
}

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

.no-data-found .no-data-img {
    margin-bottom: 25px
}

.no-data-found p {
    line-height: 1.3;
    font-size: calc(20px + .0025*(100vw - 320px));
    font-weight: 500
}

.no-data-found.category-no-data {
    margin-top: calc(20px + .01875*(100vw - 320px))
}

.top_rw {
    background-color: #f4f4f4
}

button {
    padding: 5px 10px;
    font-size: 14px
}

.invoice-box {
    max-width: 890px;
    margin: auto;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px #00000026;
    font-size: 14px;
    line-height: 24px;
    font-family: Helvetica Neue,Helvetica,Helvetica,Arial,sans-serif;
    color: #555
}

.invoice-box table {
    width: 100%;
    line-height: inherit;
    text-align: left;
    border-bottom: solid 1px #ccc
}

.invoice-box table td {
    padding: 5px;
    vertical-align: middle
}

.invoice-box table tr td:nth-child(2) {
    text-align: right
}

[dir=rtl] .invoice-box table tr td:nth-child(2) {
    text-align: left
}

.invoice-box table tr.top table td {
    padding-bottom: 20px
}

.invoice-box table tr.top table td.title {
    font-size: 45px;
    line-height: 45px;
    color: #333
}

.invoice-box table tr.information table td {
    padding-bottom: 40px
}

.invoice-box table tr.heading td {
    background: #eee;
    border-bottom: 1px solid #ddd;
    font-weight: 700;
    font-size: 12px
}

.invoice-box table tr.details td {
    padding-bottom: 20px
}

.invoice-box table tr.item td {
    border-bottom: 1px solid #eee
}

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

.invoice-box table tr.total td:nth-child(2) {
    border-top: 2px solid #eee;
    font-weight: 700
}

@media (max-width: 600px) {
    .invoice-box table tr.top table td,.invoice-box table tr.information table td {
        width:100%;
        display: block;
        text-align: center
    }
}

#loader {
    position: absolute;
    background: white;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050
}

[dir=rtl] #loader {
    left: unset;
    right: 0
}

.notLoaded {
    height: 100vh;
    overflow: hidden;
    position: fixed;
    margin: 0;
    width: 100%
}

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

.modal-backdrop {
    z-index: 5
}

.modal {
    z-index: 6;
    margin: 0
}

.modal .modal-dialog .modal-content {
    border-radius: 12px;
    border: none
}

.modal .modal-dialog .modal-content .modal-header {
    padding: calc(16px + .0025*(100vw - 320px)) calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(19px + .00375*(100vw - 320px));
    border: none
}

.modal .modal-dialog .modal-content .modal-header h3 {
    font-size: calc(21px + (26 - 21) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.3;
    text-transform: capitalize
}

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

[dir=rtl] .modal .modal-dialog .modal-content .modal-header .btn-close {
    margin: 0 auto 0 0
}

.modal .modal-dialog .modal-content .modal-header .btn-close .iconsax {
    --Iconsax-Color: #222;
    transform: rotate(45deg);
    --Iconsax-Size: calc(27px + .0025*(100vw - 320px))
}

.modal .modal-dialog .modal-content .modal-header .btn-close:focus {
    border: none;
    box-shadow: none
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 0 calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + .00625*(100vw - 320px))
}

.modal .modal-dialog .modal-content .modal-body.custom-scroll {
    overflow: auto;
    height: 630px
}

.modal .modal-dialog .modal-content .modal-body .card {
    margin: 0
}

.modal .modal-dialog .modal-content .modal-body .modal-body-content {
    background-color: #f5f6f7;
    border-radius: 10px;
    width: 100%;
    height: calc(200px + .03125*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 20px 0
}

.modal .modal-dialog .modal-content .modal-body .modal-body-content img {
    height: 100%
}

.modal .modal-dialog .modal-content .modal-body .cancel-content {
    background-color: #f5f6f7;
    border-radius: 10px;
    width: 100%
}

.modal .modal-dialog .modal-content .modal-body .cancel-content label {
    font-size: 18px;
    font-weight: 500;
    list-style: 23px;
    color: #00162e;
    margin-bottom: 6px
}

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

.modal .modal-dialog .modal-content .modal-body .btn.btn-solid {
    width: 100%;
    justify-content: center;
    border-radius: 12px
}

.modal .modal-dialog .modal-content .modal-footer {
    border: none;
    padding: calc(15px + .00625*(100vw - 320px));
    flex-wrap: nowrap;
    gap: 12px
}

.modal .modal-dialog .modal-content .modal-footer .status-note {
    width: 100%;
    border-radius: 0;
    margin: 0
}

.modal.location-detected-modal .modal-dialog {
    max-width: 650px
}

.modal.location-detected-modal .modal-header {
    border: none
}

.modal.location-detected-modal .modal-body .location-search {
    background-color: #f5f6f7;
    color: #00162e
}

.modal.location-detected-modal .modal-body .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: #f5f6f7a6;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    display: flex!important;
    align-items: center;
    justify-content: center;
    border-radius: 6px
}

.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: 20px
}

.modal.location-detected-modal .modal-body .location-list .location {
    cursor: pointer;
    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 #E5E8EA;
    padding-top: 16px;
    margin-top: 0
}

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

.modal.location-detected-modal .modal-body .location-list .location>div h5 {
    color: #00162e;
    font-size: 18px
}

.modal.location-detected-modal .modal-body .location-list .location>div h6 {
    color: #00162e80;
    font-size: 16px;
    margin-top: 4px
}

.modal.location-detected-modal .modal-body .location-list .location>div img {
    border-radius: 0!important;
    width: auto!important;
    height: auto!important
}

.modal.location-detected-modal .modal-body .location-list .location i {
    margin-top: 3px;
    --Iconsax-Color: #00162E !important
}

.modal.location-detected-modal .modal-body .location-list .location:hover {
    color: #fff
}

.modal.location-detected-modal .modal-body .location-list .location:hover i {
    --Iconsax-Color: #00162E
}

.modal.location-detected-modal .modal-body .location-list .location+li {
    margin-top: 16px
}

.modal.reset-modal .modal-dialog .modal-content .modal-body {
    text-align: center
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item {
    padding: 20px;
    border-radius: 8px;
    align-items: start;
    margin-bottom: 20px
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item:last-child {
    margin-bottom: 0
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman {
    display: flex;
    align-items: center;
    gap: 16px
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f5f6f7;
    border-radius: 12px;
    padding: 12px 16px
}

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

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail p {
    margin: 0;
    font-size: 14px;
    font-weight: 500
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .serviceman .serviceman-detail .rate .star {
    width: 15px!important;
    height: 15px!important
}

.modal.book-now .modal-dialog .modal-content .modal-body .service-item .btn-outline {
    width: max-content;
    border-radius: 8px;
    margin-top: 4px;
    font-size: 16px;
    padding: 9px 18px
}

.modal.book-service .modal-dialog .modal-content .modal-body .service {
    padding: calc(14px + .00375*(100vw - 320px));
    border-radius: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    background-color: #f5f6f7;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: calc(14px + .00125*(100vw - 320px))
}

@media (max-width: 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: #00162e;
    margin-bottom: 8px;
    font-weight: 500
}

.modal.book-service .modal-dialog .modal-content .modal-body .services .service {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f5f6f7;
    padding: 20px;
    border-radius: 10px
}

.modal.book-service .modal-dialog .modal-content .modal-body .services .service img {
    width: 80px;
    height: 80px
}

.modal.book-service .modal-dialog .modal-content .modal-body .services .service span {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-color)
}

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

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

@media (max-width: 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: #00162e;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.modal.book-service .modal-dialog .modal-content .modal-body .book-service-title span {
    font-size: 20px;
    font-weight: 700;
    margin-top: calc(2px + .00125*(100vw - 320px));
    line-height: 1.4;
    color: var(--theme-color)
}

.modal.location-modal .modal-content .modal-body {
    padding-bottom: calc(15px + .00625*(100vw - 320px))
}

.modal.location-modal .location-map {
    border-radius: 12px;
    background-color: #f5f6f7;
    padding: 0;
    margin: 0;
    gap: 0;
    overflow: hidden
}

.modal.location-modal .location-map .map {
    height: 100%;
    overflow: hidden
}

.modal.location-modal .location-map .map iframe {
    height: 100%
}

.modal.location-modal .location-map label {
    color: #00162e;
    font-size: 18px
}

.modal.location-modal .location-map .location-detail {
    padding: 20px
}

.modal.location-modal .location-map .category {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(11px + (40 - 11) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 575.98px) {
    .modal.location-modal .location-map .category .form-check {
        gap:8px
    }
}

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

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

.modal.location-modal .location-map i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97
}

.modal.location-modal .location-map .input-icon {
    position: absolute;
    top: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
    left: 16px
}

[dir=rtl] .modal.location-modal .location-map .input-icon {
    left: unset;
    right: 16px
}

.modal.servicemen-list-modal .search {
    margin-bottom: 16px
}

.modal.servicemen-list-modal .search input {
    border-radius: 30px!important
}

.modal.servicemen-list-modal .select-dropdown {
    border: none;
    margin: 0;
    padding-bottom: 16px
}

@media (max-width: 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 i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    --Iconsax-Size: 22px;
    --Iconsax-Color: #00162E
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header i {
    left: unset;
    right: 20px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .modal-title {
    padding-left: 20px;
    line-height: 1;
    text-transform: capitalize
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .modal-title {
    padding-left: 0;
    padding-right: 20px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .btn-close {
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-header .btn-close {
    right: unset;
    left: 30px
}

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

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .provider-content p {
    text-align: start
}

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

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-bg {
    position: relative;
    background-image: url(https://quickfixwork.com/public/build/assets/profile-bg-2ff9cf8b.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    height: 100px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile {
    z-index: 1;
    position: relative;
    margin-top: -60px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .img {
    border: 4px solid #ffffff;
    width: 100px;
    height: 100px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate {
    position: relative;
    margin: 0;
    padding-left: 8px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate {
    padding-left: 0;
    padding-right: 8px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    background-color: #e5e8ea;
    width: 1px;
    height: 12px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate:before {
    left: unset;
    right: 0
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile .rate .star {
    width: 13px;
    height: 13px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .profile-info {
    background-color: #f5f6f7;
    border-radius: 10px;
    column-count: 2;
    padding: 16px 20px
}

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

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information p {
    font-size: 16px;
    font-weight: 500
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .information .btn {
    font-size: 16px;
    width: max-content;
    border-radius: 6px;
    padding: 6px 12px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .note {
    font-weight: 400;
    color: #808b97;
    margin-top: 8px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .expert {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: .5rem;
    list-style: disc;
    padding-left: 30px
}

[dir=rtl] .modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .expert {
    padding-left: 0;
    padding-right: 30px
}

.modal.servicemen-detail-modal .modal-dialog .modal-content .modal-body .expert li {
    display: list-item
}

.modal.service-charge-modal .modal-dialog .modal-content .modal-body {
    padding-bottom: calc(15px + .00625*(100vw - 320px))!important
}

.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .charge,.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .total {
    background-color: #f5f6f7
}

.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .total:before,.modal.service-charge-modal .modal-dialog .modal-content .modal-body .bill-summary .total:after {
    background-color: #fff
}

.modal.coupon-modal .modal-content .modal-body {
    padding-bottom: calc(15px + .00625*(100vw - 320px))!important
}

.modal.confirm-modal .modal-body p,.modal.fail-modal .modal-body p {
    color: #808b97!important;
    line-height: 25px;
    text-align: center;
    margin: 0 calc(5px + .0125*(100vw - 320px))
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail {
    display: grid
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .error {
    order: 1
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container {
    width: 100%!important
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .selection {
    min-width: unset;
    width: 100%
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: none;
    padding: 10px 16px 10px 46px
}

[dir=rtl] .modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection--single {
    padding: 10px 46px 10px 16px
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection__rendered {
    padding: 0;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .phone-detail .select2-container--default .select2-selection__placeholder {
    color: #00162e
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money {
    background-color: #f5f6f7;
    padding: 20px;
    border-radius: 10px
}

.modal.wallet-modal .modal-dialog .modal-content .modal-body .add-money label {
    color: #00162e
}

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

.modal.pending-modal .modal-body.booking-sec .card,.modal.accepted-modal .modal-body.booking-sec .card,.modal.ongoing-modal .modal-body.booking-sec .card,.modal.completed-modal .modal-body.booking-sec .card {
    border: none
}

.modal.pending-modal .modal-body.booking-sec .primary-badge,.modal.accepted-modal .modal-body.booking-sec .primary-badge,.modal.ongoing-modal .modal-body.booking-sec .primary-badge,.modal.completed-modal .modal-body.booking-sec .primary-badge {
    position: absolute;
    top: 10px;
    left: 10px
}

[dir=rtl] .modal.pending-modal .modal-body.booking-sec .primary-badge,[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .primary-badge,[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .primary-badge,[dir=rtl] .modal.completed-modal .modal-body.booking-sec .primary-badge {
    left: unset;
    right: 20px
}

@media (max-width: 991.98px) {
    .modal.pending-modal .modal-body.booking-sec .primary-badge,.modal.accepted-modal .modal-body.booking-sec .primary-badge,.modal.ongoing-modal .modal-body.booking-sec .primary-badge,.modal.completed-modal .modal-body.booking-sec .primary-badge {
        top:10px;
        left: 10px
    }

    [dir=rtl] .modal.pending-modal .modal-body.booking-sec .primary-badge,[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .primary-badge,[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .primary-badge,[dir=rtl] .modal.completed-modal .modal-body.booking-sec .primary-badge {
        left: unset;
        right: 10px
    }
}

.modal.pending-modal .modal-body.booking-sec .status,.modal.accepted-modal .modal-body.booking-sec .status,.modal.ongoing-modal .modal-body.booking-sec .status,.modal.completed-modal .modal-body.booking-sec .status {
    margin-bottom: 4px
}

@media (max-width: 991.98px) {
    .modal.pending-modal .modal-body.booking-sec .status,.modal.accepted-modal .modal-body.booking-sec .status,.modal.ongoing-modal .modal-body.booking-sec .status,.modal.completed-modal .modal-body.booking-sec .status {
        flex-direction:column;
        align-items: start;
        justify-content: start
    }

    [dir=rtl] .modal.pending-modal .modal-body.booking-sec .status,[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .status,[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .status,[dir=rtl] .modal.completed-modal .modal-body.booking-sec .status {
        align-items: end
    }
}

.modal.pending-modal .modal-body.booking-sec .status h5,.modal.accepted-modal .modal-body.booking-sec .status h5,.modal.ongoing-modal .modal-body.booking-sec .status h5,.modal.completed-modal .modal-body.booking-sec .status h5 {
    font-size: calc(18px + .00125*(100vw - 320px));
    color: #00162e
}

.modal.pending-modal .modal-body.booking-sec .status h5:hover,.modal.accepted-modal .modal-body.booking-sec .status h5:hover,.modal.ongoing-modal .modal-body.booking-sec .status h5:hover,.modal.completed-modal .modal-body.booking-sec .status h5:hover {
    text-decoration: unset
}

.modal.pending-modal .modal-body.booking-sec .status .status-btn,.modal.accepted-modal .modal-body.booking-sec .status .status-btn,.modal.ongoing-modal .modal-body.booking-sec .status .status-btn,.modal.completed-modal .modal-body.booking-sec .status .status-btn {
    font-size: 20px
}

.modal.pending-modal .modal-body.booking-sec .status .status-btn:hover,.modal.accepted-modal .modal-body.booking-sec .status .status-btn:hover,.modal.ongoing-modal .modal-body.booking-sec .status .status-btn:hover,.modal.completed-modal .modal-body.booking-sec .status .status-btn:hover {
    text-decoration: unset
}

.modal.pending-modal .modal-body.booking-sec .view-status,.modal.accepted-modal .modal-body.booking-sec .view-status,.modal.ongoing-modal .modal-body.booking-sec .view-status,.modal.completed-modal .modal-body.booking-sec .view-status {
    align-items: start;
    margin-bottom: 10px
}

.modal.pending-modal .modal-body.booking-sec .view-status button,.modal.accepted-modal .modal-body.booking-sec .view-status button,.modal.ongoing-modal .modal-body.booking-sec .view-status button,.modal.completed-modal .modal-body.booking-sec .view-status button {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .view-status button i,.modal.accepted-modal .modal-body.booking-sec .view-status button i,.modal.ongoing-modal .modal-body.booking-sec .view-status button i,.modal.completed-modal .modal-body.booking-sec .view-status button i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465FF
}

.modal.pending-modal .modal-body.booking-sec .status-note,.modal.accepted-modal .modal-body.booking-sec .status-note,.modal.ongoing-modal .modal-body.booking-sec .status-note,.modal.completed-modal .modal-body.booking-sec .status-note {
    color: #ff4b4b;
    padding: calc(8px + .005*(100vw - 320px));
    border-radius: 8px;
    background-color: #ff4b4b1a;
    font-size: 14px;
    text-align: center
}

.modal.pending-modal .modal-body.booking-sec .status-note span,.modal.accepted-modal .modal-body.booking-sec .status-note span,.modal.ongoing-modal .modal-body.booking-sec .status-note span,.modal.completed-modal .modal-body.booking-sec .status-note span {
    font-weight: 500
}

.modal.pending-modal .modal-body.booking-sec .bill-summary label,.modal.accepted-modal .modal-body.booking-sec .bill-summary label,.modal.ongoing-modal .modal-body.booking-sec .bill-summary label,.modal.completed-modal .modal-body.booking-sec .bill-summary label {
    color: #00162e;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .charge,.modal.pending-modal .modal-body.booking-sec .bill-summary .total,.modal.accepted-modal .modal-body.booking-sec .bill-summary .charge,.modal.accepted-modal .modal-body.booking-sec .bill-summary .total,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total,.modal.completed-modal .modal-body.booking-sec .bill-summary .charge,.modal.completed-modal .modal-body.booking-sec .bill-summary .total {
    background-color: #f5f6f7;
    border-color: #e5e8ea
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .charge,.modal.accepted-modal .modal-body.booking-sec .bill-summary .charge,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge,.modal.completed-modal .modal-body.booking-sec .bill-summary .charge {
    border-bottom: none
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .charge p,.modal.accepted-modal .modal-body.booking-sec .bill-summary .charge p,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .charge p,.modal.completed-modal .modal-body.booking-sec .bill-summary .charge p {
    color: #808b97;
    flex-wrap: wrap
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total:before,.modal.pending-modal .modal-body.booking-sec .bill-summary .total:after,.modal.accepted-modal .modal-body.booking-sec .bill-summary .total:before,.modal.accepted-modal .modal-body.booking-sec .bill-summary .total:after,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total:before,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total:after,.modal.completed-modal .modal-body.booking-sec .bill-summary .total:before,.modal.completed-modal .modal-body.booking-sec .bill-summary .total:after {
    background-color: #fff
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total-amount,.modal.accepted-modal .modal-body.booking-sec .bill-summary .total-amount,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total-amount,.modal.completed-modal .modal-body.booking-sec .bill-summary .total-amount {
    background-color: #f5f6f7;
    padding: 20px;
    border: 1px solid #E5E8EA;
    border-bottom: none
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total-amount li,.modal.accepted-modal .modal-body.booking-sec .bill-summary .total-amount li,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total-amount li,.modal.completed-modal .modal-body.booking-sec .bill-summary .total-amount li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 16px
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data,.modal.accepted-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data,.modal.completed-modal .modal-body.booking-sec .bill-summary .total-amount li.total-amount-data {
    font-weight: 700
}

.modal.pending-modal .modal-body.booking-sec .bill-summary .circle,.modal.accepted-modal .modal-body.booking-sec .bill-summary .circle,.modal.ongoing-modal .modal-body.booking-sec .bill-summary .circle,.modal.completed-modal .modal-body.booking-sec .bill-summary .circle {
    height: 16px;
    margin: -8px 0
}

.modal.pending-modal .modal-body.booking-sec .payment-summary label,.modal.accepted-modal .modal-body.booking-sec .payment-summary label,.modal.ongoing-modal .modal-body.booking-sec .payment-summary label,.modal.completed-modal .modal-body.booking-sec .payment-summary label {
    color: #00162e;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge,.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge,.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge,.modal.completed-modal .modal-body.booking-sec .payment-summary .charge {
    background-color: #f5f6f7;
    border-color: #e5e8ea;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:before,.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:before,.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:before,.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    display: block;
    border-width: 1px;
    width: 10px;
    height: 15px;
    bottom: 48px;
    border-radius: 100%;
    background-color: #fff
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:after,.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:after {
    border-left-color: #e5e8ea;
    border-top-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    right: -2px
}

[dir=rtl] .modal.pending-modal .modal-body.booking-sec .payment-summary .charge:after,[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:after,[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:after,[dir=rtl] .modal.completed-modal .modal-body.booking-sec .payment-summary .charge:after {
    right: unset;
    left: -2px
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .charge:before,.modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:before,.modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:before,.modal.completed-modal .modal-body.booking-sec .payment-summary .charge:before {
    border-right-color: #e5e8ea;
    border-top-color: #e5e8ea;
    border-bottom-color: #e5e8ea;
    left: -2px
}

[dir=rtl] .modal.pending-modal .modal-body.booking-sec .payment-summary .charge:before,[dir=rtl] .modal.accepted-modal .modal-body.booking-sec .payment-summary .charge:before,[dir=rtl] .modal.ongoing-modal .modal-body.booking-sec .payment-summary .charge:before,[dir=rtl] .modal.completed-modal .modal-body.booking-sec .payment-summary .charge:before {
    left: unset;
    right: -2px
}

.modal.pending-modal .modal-body.booking-sec .payment-summary .circle,.modal.accepted-modal .modal-body.booking-sec .payment-summary .circle,.modal.ongoing-modal .modal-body.booking-sec .payment-summary .circle,.modal.completed-modal .modal-body.booking-sec .payment-summary .circle {
    height: 18px;
    margin: -11px 0
}

.modal.pending-modal .modal-body.booking-sec .extra-service label,.modal.accepted-modal .modal-body.booking-sec .extra-service label,.modal.ongoing-modal .modal-body.booking-sec .extra-service label,.modal.completed-modal .modal-body.booking-sec .extra-service label {
    color: #00162e;
    font-weight: 500;
    margin-bottom: 8px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount,.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount,.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount,.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border: 1px solid #E5E8EA;
    border-radius: 12px;
    padding: 16px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount h4,.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount h4,.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount h4,.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount h4 {
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 6px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount p,.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount p,.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount p,.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount p {
    margin: 0;
    color: var(--theme-color);
    line-height: 18px
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount .receipt,.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount .receipt,.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount .receipt,.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount .receipt {
    background-color: #5465ff1a;
    border-radius: 4px;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal.pending-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img,.modal.accepted-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img,.modal.ongoing-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img,.modal.completed-modal .modal-body.booking-sec .extra-service .total-amount .receipt .receipt-img {
    width: 25px;
    height: 25px
}

.modal.pending-modal .modal-body.booking-sec .profile-view,.modal.accepted-modal .modal-body.booking-sec .profile-view,.modal.ongoing-modal .modal-body.booking-sec .profile-view,.modal.completed-modal .modal-body.booking-sec .profile-view {
    background-color: #5465ff1a;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .profile-view i,.modal.accepted-modal .modal-body.booking-sec .profile-view i,.modal.ongoing-modal .modal-body.booking-sec .profile-view i,.modal.completed-modal .modal-body.booking-sec .profile-view i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465FF
}

.modal.pending-modal .modal-body.booking-sec .chat,.modal.accepted-modal .modal-body.booking-sec .chat,.modal.ongoing-modal .modal-body.booking-sec .chat,.modal.completed-modal .modal-body.booking-sec .chat {
    background-color: #f5f6f7;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none
}

.modal.pending-modal .modal-body.booking-sec .chat i,.modal.accepted-modal .modal-body.booking-sec .chat i,.modal.ongoing-modal .modal-body.booking-sec .chat i,.modal.completed-modal .modal-body.booking-sec .chat i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.modal.status-modal .modal-content .modal-header {
    position: relative;
    padding-bottom: 0
}

.modal.status-modal .modal-content .modal-header .modal-back {
    position: absolute;
    left: 24px;
    background-color: unset;
    padding: 0;
    border: none
}

[dir=rtl] .modal.status-modal .modal-content .modal-header .modal-back {
    left: unset;
    right: 24px
}

.modal.status-modal .modal-content .modal-header i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: #00162E
}

.modal.status-modal .modal-content .modal-header .modal-title {
    padding-left: 25px;
    text-transform: capitalize
}

[dir=rtl] .modal.status-modal .modal-content .modal-header .modal-title {
    padding-left: 0;
    padding-right: 25px
}

.modal.status-modal .modal-content .modal-body {
    padding: calc(15px + .00625*(100vw - 320px))
}

.modal.status-modal .modal-content .modal-body .pattern-btn-1 {
    padding: 20px
}

.modal.status-modal .modal-content .modal-body .pattern-btn-1:before,.modal.status-modal .modal-content .modal-body .pattern-btn-1:after {
    background-color: #fff
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input {
    position: relative;
    padding: 20px;
    vertical-align: middle
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:after,.modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: dashed transparent;
    display: block;
    border-width: 1px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    z-index: 1
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:after {
    border-top-color: var(--theme-color);
    border-left-color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    right: -132px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .form-control.pattern-input:after {
    right: unset;
    left: -132px;
    transform: rotate(180deg)
}

.modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    border-top-color: var(--theme-color);
    border-right-color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    left: -3px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .form-control.pattern-input:before {
    left: unset;
    right: -3px;
    transform: 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: 30px
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul {
    padding-left: 0;
    padding-right: 10px
}

.modal.status-modal .modal-content .modal-body .status-history ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 15px
}

@media (max-width: 480px) {
    .modal.status-modal .modal-content .modal-body .status-history ul li {
        flex-wrap:wrap;
        gap: 8px
    }
}

.modal.status-modal .modal-content .modal-body .status-history ul li i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #E5E8EA
}

.modal.status-modal .modal-content .modal-body .status-history ul li p {
    margin: 0
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-time {
    line-height: 20px;
    color: #808b97;
    white-space: nowrap
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-title {
    font-size: 15px;
    line-height: 20px
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-des {
    font-size: 15px;
    line-height: 20px;
    color: #808b97
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
    padding-left: 16px;
    position: relative;
    width: 100%
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
    padding-left: 0;
    padding-right: 16px
}

@media (max-width: 480px) {
    .modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
        padding-left:42px
    }

    [dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .status-main {
        padding-left: 0;
        padding-right: 42px
    }
}

.modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #e5e8ea;
    height: 26px;
    width: 1px
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
    left: unset;
    right: 0
}

@media (max-width: 480px) {
    .modal.status-modal .modal-content .modal-body .status-history ul li .status-main:before {
        display:none
    }
}

.modal.status-modal .modal-content .modal-body .status-history ul li .dashed-border {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: 0
}

[dir=rtl] .modal.status-modal .modal-content .modal-body .status-history ul li .dashed-border {
    left: unset;
    right: 0
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent .activity-dot {
    background-color: var(--theme-color);
    outline-color: var(--theme-color)
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent .activity-dot:after {
    background-color: #fff;
    border: 1px dashed var(--theme-color)
}

.modal.status-modal .modal-content .modal-body .status-history ul li.recent i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #5465FF
}

.modal.terms-modal {
    --bs-modal-width: 650px !important;
    height: 800px!important
}

.modal.terms-modal .modal-content .modal-body .accordion {
    width: 100%
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item {
    background-color: #fff;
    border-radius: 12px
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item+.accordion-item {
    margin-top: 20px
}

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

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

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button:after {
    display: none
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button .add {
    display: none
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button .minus {
    display: flex
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    color: #00162eb3
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button.collapsed .add {
    display: flex
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-header .accordion-button.collapsed .minus {
    display: none
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-body {
    padding: 20px
}

.modal.terms-modal .modal-content .modal-body .accordion .accordion-item .accordion-body p {
    font-size: 18px;
    line-height: 1.5
}

.modal.terms-modal .modal-content .modal-body ul,.modal.terms-modal .modal-content .modal-body ol {
    list-style-type: disc;
    padding-left: 1.25rem
}

[dir=rtl] .modal.terms-modal .modal-content .modal-body ul,[dir=rtl] .modal.terms-modal .modal-content .modal-body ol {
    padding-right: 1.25rem;
    padding-left: unset
}

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

.modal.delete-modal .modal-content .btn-close {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1
}

[dir=rtl] .modal.delete-modal .modal-content .btn-close {
    right: unset;
    left: 30px
}

.modal.delete-modal .modal-content .btn-close:focus {
    box-shadow: none
}

.modal.delete-modal .modal-content .modal-body {
    position: relative;
    padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320))) calc(15px + .00625*(100vw - 320px));
    padding-bottom: 0
}

.modal.delete-modal .modal-content .modal-body .modal-icon {
    --Iconsax-Color: #5465ff;
    --Iconsax-Size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    margin: 0 auto 10px;
    background-color: #f5f6f7
}

.modal.delete-modal .modal-content .modal-body h3 {
    font-weight: 600;
    margin-bottom: 8px
}

.modal.delete-modal .modal-content .modal-body p {
    width: 80%
}

.modal.start-service-modal .modal-body,.modal.restart-service-modal .modal-body {
    text-align: center
}

.modal.start-service-modal .modal-body .modal-body-content,.modal.restart-service-modal .modal-body .modal-body-content {
    flex-direction: column
}

.modal.start-service-modal .modal-body .modal-body-content .ellipse,.modal.restart-service-modal .modal-body .modal-body-content .ellipse {
    width: 220px;
    padding-bottom: 20px
}

.modal.pause-service-modal .modal-body {
    text-align: center
}

.modal.pause-service-modal .modal-body .modal-body-content {
    position: relative;
    flex-direction: column
}

.modal.pause-service-modal .modal-body .modal-body-content .ellipse {
    width: 100px;
    height: auto!important
}

.modal.pause-service-modal .modal-body .modal-body-content .hold {
    position: absolute;
    top: 40px;
    right: 70px;
    height: auto!important
}

[dir=rtl] .modal.pause-service-modal .modal-body .modal-body-content .hold {
    right: unset;
    left: 70px
}

@media (max-width: 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 {
    background-color: #f5f6f7;
    padding: calc(10px + .00625*(100vw - 320px));
    border-radius: 12px
}

.modal.review-modal .modal-content .modal-body .rate-content p {
    text-align: center;
    margin: 0;
    color: #808b97
}

.modal.review-modal .modal-content .modal-body .rate-content .form-group label {
    font-size: 18px;
    font-weight: 500;
    color: #00162e;
    margin-bottom: 8px
}

.modal.profile-update-modal .update-img {
    display: flex;
    margin: 0 auto -50px;
    width: max-content;
    position: relative
}

.modal.profile-update-modal .update-img img {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    border: 2px solid #ffffff
}

.modal.profile-update-modal .update-img .update-profile {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #5465FF;
    background-color: #f5f6f7;
    border: 2px solid #ffffff;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    position: absolute;
    bottom: -10px;
    right: -10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

[dir=rtl] .modal.profile-update-modal .update-img .update-profile {
    right: unset;
    left: -10px
}

.modal.profile-update-modal .update-img .initial-letter {
    width: 80px;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 500;
    border-radius: 100%;
    border: 2px solid rgba(84,101,255,.1)
}

.modal.profile-update-modal .update-detail {
    background-color: #f5f6f7;
    border-radius: 10px;
    padding: 70px 20px 20px
}

.modal.profile-update-modal input[type=file] {
    display: none
}

.modal.change-password-modal .modal-body {
    padding-bottom: 0!important
}

.modal.change-password-modal .modal-body .form-group {
    margin-bottom: 15px
}

.modal.change-password-modal .modal-body .form-group .form-control {
    background-color: #f5f6f7
}

.modal.address-modal .modal-body .category-list-box+.category-list-box {
    margin-top: calc(12px + .005*(100vw - 320px))
}

.modal.address-modal .modal-body .category-list-box .error-div .select2-container--default .selection {
    min-width: unset;
    display: block
}

.modal.address-modal .modal-body .category-list-box .form-control {
    padding: 10px 16px;
    background-color: #f5f6f7;
    color: #00162e
}

.modal.address-modal .modal-body .category-list-box .label-title {
    color: #00162e;
    font-size: calc(16px + .00125*(100vw - 320px));
    margin-bottom: calc(4px + (9 - 4) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500
}

.modal.address-modal .modal-body .category-list-box .category-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px
}

@media (max-width: 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
}

.modal.address-modal .modal-body .category-list-box .category-list .form-check:has(.form-check-input:checked) label {
    border-color: var(--theme-color);
    background-color: #5465ff1f;
    color: var(--theme-color);
    font-weight: 500
}

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

.modal.address-modal .modal-body .category-list-box .category-list .form-check .form-check-label {
    font-size: 17px;
    font-weight: 400;
    color: #00162e;
    width: 100%;
    border: 1px solid #E5E8EA;
    border-radius: 8px;
    padding: 11px 15px;
    justify-content: space-between;
    cursor: pointer;
    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: pointer;
    position: relative;
    border: none;
    width: 20px;
    height: 20px;
    box-shadow: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    filter: none;
    float: unset;
    margin: 0
}

.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 #E5E8EA;
    border-radius: 4px;
    cursor: pointer
}

.modal.address-modal .modal-body .set-address-box {
    border: 1px solid #ddd9d9;
    border-radius: 8px;
    padding: 11px 15px;
    justify-content: space-between;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    position: relative
}

.modal.address-modal .modal-body .set-address-box:has(.form-check-input:checked) {
    border-color: var(--theme-color);
    background-color: #5465ff1f
}

.modal.address-modal .modal-body .set-address-box:has(.form-check-input:checked) label {
    color: var(--theme-color);
    font-weight: 500
}

.modal.address-modal .modal-body .set-address-box .form-check-input {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0
}

.modal.address-modal .modal-body .set-address-box label {
    cursor: pointer;
    font-size: 17px;
    font-weight: 400;
    color: var(--bs-secondary-color);
    width: 100%;
    text-align: center
}

.update-detail label {
    font-size: 14px;
    font-weight: 500;
    color: #00162e;
    margin-top: 4px;
    margin-bottom: 4px
}

.update-detail .form-group {
    position: relative
}

.update-detail .form-group .form-control {
    border: none;
    padding-left: 46px
}

[dir=rtl] .update-detail .form-group .form-control {
    padding-left: unset;
    padding-right: 46px
}

.update-detail .form-group i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97;
    position: absolute;
    left: 15px;
    top: 12px
}

[dir=rtl] .update-detail .form-group i {
    left: unset;
    right: 15px
}

.update-detail .form-group .toggle-password {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    left: unset;
    cursor: pointer
}

[dir=rtl] .update-detail .form-group .toggle-password {
    left: 15px;
    right: unset
}

.update-detail .form-group .toggle-password i {
    position: static;
    transform: unset
}

.update-detail .form-group .toggle-password .eye-slash {
    display: none
}

.update-detail .form-group .toggle-password.eye i.eye {
    display: block
}

.update-detail .form-group .toggle-password.eye i.eye-slash {
    display: none
}

.update-detail .form-group .toggle-password.eye-slash i.eye-slash {
    display: block
}

.update-detail .form-group .toggle-password.eye-slash i.eye {
    display: none
}

.update-detail .phone-detail .form-control-white {
    padding-left: 16px
}

[dir=rtl] .update-detail .phone-detail .form-control-white {
    padding-left: unset;
    padding-right: 16px
}

.select-option {
    border: 1px solid #E5E8EA;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: #808b97
}

.select-option .form-check {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    border-bottom: 1px solid #E5E8EA;
    padding-bottom: calc(8px + .0025*(100vw - 320px));
    margin-bottom: calc(8px + .0025*(100vw - 320px))
}

.select-option .form-check:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.select-option .form-check Label {
    font-size: 16px;
    color: #00162ee6!important;
    cursor: pointer
}

.select-option .form-radio-input:checked~label {
    font-weight: 500;
    color: #00162e!important
}

.select-servicemen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #E5E8EA;
    padding: calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff;
    gap: 12px
}

.select-servicemen p {
    margin: 0;
    font-size: 16px
}

@media (max-width: 575.98px) {
    .select-servicemen {
        flex-direction:column;
        align-items: start
    }

    [dir=rtl] .select-servicemen {
        align-items: end
    }
}

.servicemen-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    height: 450px;
    padding-right: 10px
}

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

.servicemen-list-item {
    border: 1px solid #E5E8EA;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 12px;
    box-shadow: 0 4px 4px #00162e0f;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.servicemen-list-item .list {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 575.98px) {
    .servicemen-list-item .list {
        gap:6px
    }
}

.servicemen-list-item .list p {
    margin: 0;
    color: #808b97!important;
    font-size: 14px!important
}

.servicemen-list-item .list ul {
    display: flex;
    align-items: center;
    gap: 12px
}

.servicemen-list-item .list h5 {
    font-weight: 500
}

@media (max-width: 360px) {
    .servicemen-list-item .list h5 {
        font-size:14px;
        width: 70px;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        text-align: left;
        text-overflow: ellipsis
    }

    [dir=rtl] .servicemen-list-item .list h5 {
        text-align: right
    }
}

.servicemen-list-item .list .rate {
    margin: 0;
    position: relative;
    padding-left: 12px
}

[dir=rtl] .servicemen-list-item .list .rate {
    padding-left: unset;
    padding-right: 12px
}

.servicemen-list-item .list .rate .star {
    width: 13px;
    height: 13px
}

.servicemen-list-item .list .rate:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    background-color: #e5e8ea;
    width: 1px;
    height: 12px
}

[dir=rtl] .servicemen-list-item .list .rate:before {
    left: unset;
    right: 0
}

.servicemen-list-item .list .detail {
    font-size: 16px;
    font-weight: 500;
    border: none;
    background: none;
    padding: 0;
    line-height: 1
}

@media (max-width: 360px) {
    .servicemen-list-item .list .detail {
        font-size:14px;
        width: 100px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left
    }

    [dir=rtl] .servicemen-list-item .list .detail {
        text-align: right
    }
}

.servicemen-list-item .list .detail:hover {
    color: var(--theme-color)
}

@media (max-width: 575.98px) {
    .servicemen-list-item .list .img-45 {
        width:35px!important;
        height: 35px!important
    }
}

.status-note {
    color: #ff4b4b;
    padding: 16px;
    border-radius: 8px;
    background-color: #ff4b4b1a;
    font-size: 14px;
    text-align: center
}

.status-note span {
    font-weight: 500
}

.emoji-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.emoji-tab .emoji-icon {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.emoji-tab .emoji-icon h4 {
    font-size: 16px;
    margin-top: 8px;
    color: #808b97
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon h4 {
        display:none
    }
}

.emoji-tab .emoji-icon .emojis {
    padding: 10px;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon .emojis {
        padding:8px
    }
}

@media (max-width: 360px) {
    .emoji-tab .emoji-icon .emojis {
        padding:6px
    }
}

.emoji-tab .emoji-icon .emojis .emoji {
    width: 40px;
    height: 40px;
    filter: invert(65%) sepia(8%) saturate(540%) hue-rotate(171deg) brightness(83%) contrast(87%)
}

@media (max-width: 480px) {
    .emoji-tab .emoji-icon .emojis .emoji {
        width:30px;
        height: 30px
    }
}

@media (max-width: 360px) {
    .emoji-tab .emoji-icon .emojis .emoji {
        width:25px;
        height: 25px
    }
}

.emoji-tab .emoji-icon .emojis .deactive {
    display: block
}

.emoji-tab .emoji-icon .emojis .active {
    display: none
}

.emoji-tab .emoji-icon.active .emojis {
    outline: 2px solid var(--theme-color)
}

.emoji-tab .emoji-icon.active .emoji {
    filter: invert(54%) sepia(78%) saturate(5765%) hue-rotate(223deg) brightness(98%) contrast(107%)
}

.emoji-tab .emoji-icon.active .deactive {
    display: none
}

.emoji-tab .emoji-icon.active .active {
    display: block
}

.emoji-tab .emoji-icon.active h4 {
    color: var(--theme-color)
}

.offer-section .offer-content .sale-tag {
    position: absolute;
    top: 25px;
    left: 0;
    background-color: #ff4b4b;
    padding: 4px 36px 4px 16px;
    color: #fff;
    clip-path: polygon(0 0,28% 0%,67% -24%,83% 7%,84% 14%,84% 27%,84% 0%,84% 32%,82% 41%,81% 49%,81% 78%,81% 74%,80% 44%,84% 65%,84% 74%,84% 77%,82% 93%,79% 100%,84% 100%,68% 100%,0 100%)
}

[dir=rtl] .offer-section .offer-content .sale-tag {
    left: unset;
    right: 0;
    transform: scaleX(-1)
}

[dir=rtl] .offer-section .offer-content .sale-tag span {
    transform: scaleX(-1)
}

.offer-section .offer-content .offer-img {
    border-radius: 10px;
    min-height: 240px;
    max-height: 250px
}

.offer-section .offer-content .offer-detail {
    position: absolute;
    top: 75px;
    left: 20px
}

[dir=rtl] .offer-section .offer-content .offer-detail {
    left: unset;
    right: 20px
}

.offer-section .offer-content .offer-detail h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 33px
}

.offer-section .offer-content .offer-detail p {
    color: #00162e80;
    line-height: 20px;
    width: 70%;
    margin-top: 4px
}

.offer-section .offer-content .offer-detail .btn {
    padding: 10px 20px;
    line-height: 1;
    width: max-content;
    color: #00162e
}

.offer-section .offer-content .offer-detail .btn.btn-outline {
    margin-top: 24px;
    border: 2px solid #00162E;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500
}

.phone-detail {
    background-color: #f5f6f7;
    color: #00162e;
    border-radius: 8px;
    overflow: hidden
}

.phone-detail:has(.form-control.form-control-white) .select2-container--default .selection {
    border-right: 1px solid #E5E8EA
}

.phone-detail:has(.form-control.form-control-white) .select2-container--default .select2-selection--single {
    background-color: #fff
}

.phone-detail .select2-dropdown {
    border-color: #e5e8ea
}

.phone-detail .select2-container--default .selection {
    height: 100%;
    min-width: calc(95px + .0125*(100vw - 320px))
}

.phone-detail .select2-container--default .select2-selection--single {
    height: 100%;
    border: none;
    border-right: 1px solid #E5E8EA;
    background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:9px;border-radius: 0
}

.phone-detail .select2-container--default .select2-selection__rendered {
    display: flex;
    align-items: center;
    color: #00162e;
    font-weight: 400;
    line-height: 1.5;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.phone-detail .select2-container--default .select2-selection__arrow {
    position: relative;
    inset: unset;
    top: 50%;
    transform: translateY(-50%);
    height: 100%
}

.select2-container--default .select2-results__option[aria-selected] {
    width: 100%;
    padding-inline:15px}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f5f6f7
}

.error-div {
    display: flex;
    flex-direction: column;
    justify-content: unset;
    align-items: unset
}

.error-div .dropdown-wrapper {
    display: none
}

.error-div .error {
    display: block;
    order: 1
}

.error-div .select2-dropdown {
    border-color: #e5e8ea
}

.error-div .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.error-div .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    background-color: transparent;
    border: 1px solid #E5E8EA;
    border-bottom: 0
}

.error-div .select2-container--default .selection {
    height: 100%;
    min-width: 115px
}

.error-div .select2-container--default .select2-selection--single {
    height: 46px;
    border: none;
    background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:9px;border-radius: 4px
}

.error-div .select2-container--default .select2-selection__placeholder {
    font-size: 16px;
    font-weight: 500;
    color: #00162e
}

.error-div .select2-container--default .select2-selection__rendered {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #00162e
}

.error-div .select2-container--default .select2-selection__arrow {
    position: relative;
    inset: unset;
    top: 50%;
    transform: translateY(-50%);
    height: 100%
}

.select2-container--open .select2-dropdown--above,.select2-container--open .select2-dropdown--below {
    border-color: #e5e8ea
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #e5e8ea;
    border-radius: 4px
}

.select2-container--default .select2-results__option[aria-selected] {
    width: 100%;
    letter-spacing: 1px
}

.select2-container--default .select2-results__option[aria-selected] span {
    width: 100%;
    font-size: 15px;
    color: #808b97
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--theme-color)
}

.select2-container--default .select2-results__option--highlighted[aria-selected] span {
    font-weight: 600;
    color: #fff
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
    background-color: #f5f6f7
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #ddd
}

.select2-container--default .selection {
    width: 100%
}

.select2-container--default .selection .select2-selection--single {
    background-color: #f5f6f7;
    border: 1px solid #E5E8EA;
    border-radius: 4px;
    height: 46px;
    width: 100%
}

.select2-container--default .selection .select2-selection--single .select2-selection__rendered {
    border-radius: 6px;
    padding: 12px 24px 12px 12px;
    line-height: 1.5
}

[dir=rtl] .select2-container--default .selection .select2-selection--single .select2-selection__rendered {
    padding: 12px 12px 12px 24px
}

.select2-container--default .selection .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.select2-container--default .selection .select2-selection__arrow {
    position: absolute;
    top: 45%;
    right: 1px;
    width: 20px;
    transform: translateY(-50%)
}

[dir=rtl] .select2-container--default .selection .select2-selection__arrow {
    right: unset;
    left: 1px
}

.select2-container--default .selection .select2-selection__arrow b {
    border: none;
    background-image: url(https://quickfixwork.com/public/build/assets/arrow-90473a1a.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 55%;
    right: 10px;
    transform: translate(-50%,-50%)
}

[dir=rtl] .select2-container--default .selection .select2-selection__arrow b {
    right: unset;
    left: 15px
}

.pagination-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px
}

@media (max-width: 575.98px) {
    .pagination-main {
        justify-content:center
    }
}

.pagination-main label {
    color: #808b97
}

@media (max-width: 575.98px) {
    .pagination-main label {
        display:none
    }
}

.pagination-main i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #00162E
}

.pagination-main .pagination {
    display: flex;
    align-items: center;
    gap: calc(8px + (12 - 8) * ((100vw - 320px) / (1200 - 320)))
}

.pagination-main .pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #808b97;
    width: calc(30px + (35 - 30) * ((100vw - 320px) / (1200 - 320)));
    height: calc(30px + (35 - 30) * ((100vw - 320px) / (1200 - 320)));
    border: none;
    border-radius: 100%;
    padding: 0
}

.pagination-main .pagination .page-item .page-link:hover {
    background-color: #5465ff33
}

.pagination-main .pagination .page-item .page-link:focus {
    border: 1px solid #E5E8EA;
    outline: none;
    box-shadow: none
}

.pagination-main .pagination .page-item .page-link span {
    line-height: 1
}

.pagination-main .pagination .page-item.active .page-link {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 600;
    border-radius: 100%
}

.pagination-main .pagination .page-item.disabled .page-link {
    background-color: transparent
}

.pagination-main .pagination .page-item:hover {
    border-radius: 100%
}

.pagination {
    justify-content: center;
    gap: 10px
}

.pagination .page-item:not(:first-child) .page-link {
    margin: 0
}

.pagination .page-item:first-child .page-link {
    color: transparent;
    background-image: url(https://quickfixwork.com/public/build/assets/left-b3fbce24.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center
}

.pagination .page-item:last-child .page-link {
    color: transparent;
    background-image: url(https://quickfixwork.com/public/build/assets/right-d5ee7953.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center
}

.pagination .page-item.active .page-link {
    background-color: var(--theme-color);
    color: #fff
}

.pagination .page-item .page-link {
    width: 38px;
    height: 38px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #808b97
}

.profile-body-wrapper .profile-wrapper {
    background-color: var(--theme-color);
    border-radius: 15px;
    padding: 20px;
    position: sticky;
    top: 100px
}

@media (max-width: 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 #22222214;
        visibility: visible
    }

    [dir=rtl] .profile-body-wrapper .profile-wrapper {
        left: unset;
        right: -350px
    }

    .profile-body-wrapper .profile-wrapper.open {
        left: 0
    }

    [dir=rtl] .profile-body-wrapper .profile-wrapper.open {
        left: unset;
        right: 0
    }

    .profile-body-wrapper .profile-wrapper .close {
        margin-left: auto;
        transform: rotate(45deg);
        --Iconsax-Color: #00162E;
        --Iconsax-Size: 28px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer
    }

    [dir=rtl] .profile-body-wrapper .profile-wrapper .close {
        right: unset;
        left: 10px;
        margin-left: unset;
        margin-right: auto
    }

    .profile-body-wrapper .profile-wrapper i {
        --Iconsax-Color: #fff
    }
}

.profile-body-wrapper .profile-wrapper .profile {
    padding: 20px 0 40px
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile {
        border-bottom:1px solid #E5E8EA;
        background-color: #f5f6f7;
        padding-top: 40px;
        padding-bottom: 20px
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-img {
    position: relative;
    text-align: center;
    margin-bottom: -40px
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-img {
        margin:0
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-img img {
    border-radius: 100%;
    border: 2px solid #ffffff;
    height: 80px;
    width: 80px
}

.profile-body-wrapper .profile-wrapper .profile .profile-img .profile-name {
    border-radius: 100%;
    border: 2px solid #ffffff;
    height: calc(62px + .01125*(100vw - 320px));
    width: calc(62px + .01125*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f6f7;
    color: var(--theme-color);
    position: relative;
    z-index: 1;
    font-size: calc(33px + (40 - 33) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    margin: auto
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-img .profile-name {
        border:2px solid #E5E8EA;
        background-color: #fff
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-img .edit-modal {
    position: absolute;
    bottom: 0;
    left: 60%;
    transform: translate(-50%);
    z-index: 3;
    background-color: var(--theme-color);
    border-radius: 100%;
    width: 35px;
    height: 35px;
    padding: 5px
}

[dir=rtl] .profile-body-wrapper .profile-wrapper .profile .profile-img .edit-modal {
    left: unset
}

.profile-body-wrapper .profile-wrapper .profile .profile-img .edit-modal i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #fff
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail {
    padding: 20px;
    border-radius: 12px;
    background-image: url(https://quickfixwork.com/public/build/assets/Base-9e5606a1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 120px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail {
        padding-bottom:0;
        background: none;
        height: unset;
        padding-top: calc(14px + (20 - 14) * ((100vw - 320px) / (1200 - 320)))
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail h5 {
    line-height: 1.3;
    margin-bottom: 4px;
    font-size: 19px;
    font-weight: 600
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail h5 {
        color:#222;
        font-weight: 500
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    gap: 4px;
    line-height: 1.3;
    color: #ddd;
    font-size: 15px
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail p {
        color:#808b97
    }
}

.profile-body-wrapper .profile-wrapper .profile .profile-detail p i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: white
}

@media (max-width: 1199.98px) {
    .profile-body-wrapper .profile-wrapper .profile .profile-detail p i {
        --Iconsax-Color: #808B97
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings {
    overflow: auto;
    height: 527px
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .mainnav-close {
    display: none!important
}

@media (max-width: 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 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 8px;
    border-bottom: unset
}

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

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 16px;
    border: none;
    transition: all .5s ease;
    outline: none;
    width: 100%;
    padding: 14px 16px;
    white-space: nowrap
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active i {
    display: none
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link i {
    display: block;
    --Iconsax-Size: 24px;
    --Iconsax-Color: white
}

@media (max-width: 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: #fff;
    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:#222
    }
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link .active-icon {
    display: none
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link .deactive-icon {
    display: block
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active {
    background-color: #fff
}

@media (max-width: 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(--theme-color);
    font-weight: 500
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active .active-icon {
    display: block
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active .deactive-icon {
    display: none
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link.active:hover {
    background-color: #fff
}

.profile-body-wrapper .profile-wrapper .profile-settings .navbar .navbar-collapse .menu-panel .menu-wrapper li .nav-link:hover {
    background-color: #ffffff1a
}

.profile-body-wrapper .profile-wrapper .profile-logout {
    margin: 0 8px
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link {
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 16px;
    border: none;
    transition: all .5s ease;
    outline: none;
    width: 100%;
    padding: 14px 16px
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: white
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link span {
    color: #fff;
    font-size: 16px
}

.profile-body-wrapper .profile-wrapper .profile-logout .nav-link:hover {
    background-color: #ffffff1a
}

.profile-body-wrapper .profile-main .card {
    background-color: #f5f6f7;
    border: none;
    border-radius: 10px
}

.profile-body-wrapper .profile-main .card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid #E5E8EA;
    flex-wrap: wrap
}

.profile-body-wrapper .profile-main .card .card-header .title-3 {
    position: relative
}

.profile-body-wrapper .profile-main .card .card-header .title-3:before {
    content: "";
    position: absolute;
    left: calc(-15px + -.00625*(100vw - 320px));
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--theme-color);
    height: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
    width: calc(3px + (4 - 3) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-header .title-3:before {
    left: unset;
    right: calc(-15px + -.00625*(100vw - 320px))
}

.profile-body-wrapper .profile-main .card .card-header .title-3 h3 {
    line-height: 1.3;
    font-size: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    letter-spacing: .7px
}

.profile-body-wrapper .profile-main .card .card-header a,.profile-body-wrapper .profile-main .card .card-header button {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.profile-body-wrapper .profile-main .card .card-header a i,.profile-body-wrapper .profile-main .card .card-header button i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #5465FF
}

.profile-body-wrapper .profile-main .card .card-body {
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)))
}

.profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header {
    display: flex;
    align-items: center;
    gap: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
    justify-content: unset;
    flex-direction: unset;
    overflow: unset
}

.profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header .badge {
    margin-left: auto
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header .badge {
    margin-left: unset;
    margin-right: auto
}

.profile-body-wrapper .profile-main .card .card-body.service-booking .delivery-location .location-header .delivery-name {
    width: calc(100% - calc(42px + .005*(100vw - 320px)) - calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320))));
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card {
    border: 1px solid #E5E8EA;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data h5 {
    line-height: 20px;
    color: #808b97;
    margin-bottom: 4px
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data h3 {
    font-weight: 700;
    line-height: 1.4
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon {
    position: relative;
    padding-right: 10px
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon {
    padding-right: unset;
    padding-left: 10px
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon .dot {
    background-color: #5465ff1a;
    border-radius: 100%;
    height: calc(22px + .005*(100vw - 320px));
    width: calc(22px + .005*(100vw - 320px));
    position: absolute;
    top: 0;
    right: 0
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon .dot {
    right: unset;
    left: 0
}

.profile-body-wrapper .profile-main .card .card-body .widgets .card .widget-data .data-icon i {
    --Iconsax-Size: calc(31px + (38 - 31) * ((100vw - 320px) / (1920 - 320)));
    --Iconsax-Color: #5465FF;
    padding-top: calc(3px + (10 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.profile-body-wrapper .profile-main .card .card-body .profile-data h3 {
    line-height: 26px
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card {
    border: 1px solid #E5E8EA;
    padding: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 10px;
    background-color: #fff;
    margin: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .profile-setting-img {
    background-color: #f5f6f7;
    border-radius: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(https://quickfixwork.com/public/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 .profile-main .card .card-body .profile-data .card .profile-setting-img .girl-on-chair {
    height: auto;
    width: calc(148px + .06375*(100vw - 320px));
    object-fit: contain
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .form-group .value {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 1.4;
    margin: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .form-group:last-child {
    margin: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .card .login-detail h4 {
    color: var(--theme-color);
    font-weight: 500;
    line-height: 23px
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail {
    position: relative
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .edit-modal {
    position: absolute;
    top: 0;
    right: 0
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .edit-modal {
    right: unset;
    left: 0
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group {
    margin-bottom: calc(10px + .00625*(100vw - 320px))
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group label {
    font-size: calc(14px + .00125*(100vw - 320px));
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 4px
}

.profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group .edit-btn {
    padding-left: 5px;
    --Iconsax-Color: #5465FF;
    --Iconsax-Size: 18px
}

[dir=rtl] .profile-body-wrapper .profile-main .card .card-body .profile-data .personal-detail .form-group .edit-btn {
    padding-left: unset;
    padding-right: 5px
}

.profile-body-wrapper .profile-main .card .card-footer {
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    border-top: 1px solid #E5E8EA;
    gap: 16px;
    justify-content: start
}

.profile-body-wrapper .profile-main .card .card-footer .btn {
    width: max-content;
    padding: 10px 30px
}

.profile-body-wrapper .profile-main .review-main {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.profile-body-wrapper .profile-main .review-main .review-list {
    position: relative;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #E5E8EA;
    padding: 20px;
    background-color: #fff
}

.profile-body-wrapper .profile-main .review-main .review-list .review {
    display: flex;
    align-items: start;
    gap: calc(8px + .005*(100vw - 320px))
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .review {
        display:block
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-img {
    height: calc(35px + .00625*(100vw - 320px));
    width: calc(35px + .00625*(100vw - 320px));
    border-radius: 100%
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-img img {
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-img .initial-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    border-radius: 100%;
    background-color: #f5f6f7
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note {
    width: calc(100% - (8px + .005*(100vw - 320px)) - (35px + .00625*(100vw - 320px)))
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .review .review-note {
        width:100%;
        margin-top: 8px
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date {
        align-items:center
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date span {
    font-weight: 500
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date small {
    color: #808b97
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note .name-date h6 {
    margin-top: 4px;
    color: #808b97
}

.profile-body-wrapper .profile-main .review-main .review-list .review .review-note h5 {
    color: #00162e;
    line-height: 1.4;
    font-size: 15px;
    margin-top: 4px
}

.profile-body-wrapper .profile-main .review-main .review-list p {
    padding-left: 60px;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin: 10px 0 0;
    color: #808b97;
    line-height: 1.5
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list p {
        padding:0
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time {
    display: flex;
    align-items: center;
    gap: 10px
}

@media (max-width: 576px) {
    .profile-body-wrapper .profile-main .review-main .review-list .notify-time {
        position:absolute;
        right: 20px;
        top: 25px
    }
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .rate {
    justify-content: end;
    margin-top: 0
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .rate img {
    width: 13px;
    height: 13px
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .rate span {
    font-weight: 500
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time button {
    background: unset;
    border: none;
    padding: 0
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .edit {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #00162E;
    background-color: #f5f6f7;
    border-radius: 100%;
    height: calc(30px + .00625*(100vw - 320px));
    width: calc(30px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.profile-body-wrapper .profile-main .review-main .review-list .notify-time .delete {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #FF4B4B;
    background-color: #ff4b4b1a;
    border-radius: 100%;
    height: calc(30px + .00625*(100vw - 320px));
    width: calc(30px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.edit-modal {
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 6px;
    background-color: #5465ff1a
}

.edit-modal i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #5465FF
}

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

.col-img img {
    height: 594px
}

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

.notifications .notification-list {
    border-bottom: 1px solid #E5E8EA;
    padding: calc(12px + .005*(100vw - 320px));
    display: block;
    position: relative
}

@media (max-width: 575.98px) {
    .notifications .notification-list .notify {
        display:grid
    }
}

.notifications .notification-list .notify .notify-icon i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #a3aab1
}

.notifications .notification-list .notify .notify-note h5 {
    font-weight: 500;
    color: #808b97;
    line-height: 20px;
    margin-bottom: 8px;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.notifications .notification-list .notify .notify-note p {
    margin: 0;
    color: #808b97;
    line-height: 19px;
    font-size: calc(14px + .00125*(100vw - 320px))
}

.notifications .notification-list .notify .notify-note .notify-img img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

.notifications .notification-list .notify-time {
    min-width: 70px;
    text-align: end;
    position: absolute;
    right: calc(12px + .005*(100vw - 320px))
}

[dir=rtl] .notifications .notification-list .notify-time {
    left: calc(12px + .005*(100vw - 320px));
    right: unset
}

@media (max-width: 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.unread .notify .notify-note h5,.notifications .notification-list.unread .notify .notify-note p {
    color: #00162e
}

.notifications .notification-list.unread .notify .notify-icon i {
    --Iconsax-Color: #00162E
}

.notifications {
    display: flex;
    flex-direction: column;
    border: 1px solid #E5E8EA;
    background-color: #fff;
    border-radius: 10px;
    height: 100%
}

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

.notifications.no-data-notifications {
    border: none
}

.notifications .no-data-detail {
    display: flex;
    align-items: center;
    justify-content: center
}

.notifications .no-data-detail .no-data-notification-img {
    height: 400px
}

.notifications .notification-list {
    border-bottom: 1px solid #E5E8EA;
    padding: calc(10px + .00625*(100vw - 320px));
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px
}

.notifications .notification-list:last-child {
    border-bottom: none
}

.notifications .notification-list .notify {
    display: flex;
    align-items: start;
    gap: 14px
}

.notifications .notification-list .notify .notify-icon {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 100%;
    background-color: #f5f6f7;
    display: flex;
    align-items: center;
    justify-content: center
}

.notifications .notification-list .notify .notify-icon i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97
}

.notifications .notification-list .notify .notify-note h5 {
    font-weight: 500;
    color: #808b97;
    line-height: 20px;
    margin-bottom: 8px
}

.notifications .notification-list .notify .notify-note p {
    margin: 0;
    color: #808b97;
    line-height: 19px
}

.notifications .notification-list .notify .notify-note .notify-img {
    height: 50px;
    width: 50px;
    border-radius: 4px;
    overflow: hidden
}

.notifications .notification-list .notify .notify-note .notify-img img {
    height: 100%;
    width: 100%
}

.notifications .notification-list .notify-time {
    min-width: 70px;
    text-align: end
}

.notifications .notification-list .notify-time span {
    color: #808b97
}

.card.delivery-location .location-header {
    padding: calc(10px + .00625*(100vw - 320px));
    display: flex;
    align-items: center;
    gap: calc(8px + .005*(100vw - 320px));
    justify-content: unset;
    flex-direction: unset
}

.card.delivery-location .location-header .badge {
    margin-left: auto
}

[dir=rtl] .card.delivery-location .location-header .badge {
    margin-left: unset;
    margin-right: auto
}

.card.delivery-location .location-header .delivery-name {
    width: calc(100% - calc(42px + .005*(100vw - 320px)) - calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320))));
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

[dir=rtl] .card.delivery-location .location-header .delivery-name {
    align-items: flex-end
}

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

.card.delivery-location .location-header .location-icon img {
    width: 24px;
    height: 24px
}

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

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

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

.card.delivery-location .address {
    padding: calc(10px + .00625*(100vw - 320px))
}

.card.delivery-location .address p {
    font-size: 16px;
    line-height: 1.5;
    height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.card.delivery-location .address .btn-outline {
    border-width: 1px;
    width: max-content;
    padding: 9px 18px
}

.card.delivery-location .address-bottom-box {
    padding: calc(10px + .00625*(100vw - 320px)) calc(16px + .0025*(100vw - 320px));
    border-top: 1px solid #ddd;
    position: relative
}

.card.delivery-location .address-bottom-box .action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px
}

.card.delivery-location .address-bottom-box .btn {
    width: 100%;
    padding-block:10px;font-weight: 500;
    border-radius: 8px
}

.card.delivery-location .address-bottom-box .btn-fill {
    border: transparent;
    color: #fff;
    background-color: var(--theme-color)
}

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

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

.card.delivery-location .address-bottom-box .btn-outline:hover {
    background-color: var(--theme-color);
    color: #fff;
    border-color: transparent
}

.card.delivery-location .address-bottom-box .btn-outline:hover .icon {
    --Iconsax-Color: #fff
}

.card.delivery-location .address-bottom-box .radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

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

.card.delivery-location .radio:checked~button {
    background-color: var(--theme-color);
    color: #fff
}

.add-location {
    color: var(--theme-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    text-decoration: underline
}

.add-location:hover {
    text-decoration: underline
}

[dir=rtl] .menu-wrapper {
    padding-right: 0
}

.irs--round {
    font-family: DM Sans,serif!important;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    height: 80px
}

.irs--round .irs {
    font-family: DM Sans,serif!important
}

.irs--round .irs-line {
    top: 10px;
    background-color: #e5e8ea;
    height: 5px
}

.irs--round .irs-handle {
    top: 21px;
    width: 14px;
    height: 14px;
    border: none;
    background-color: #00162ecc;
    border-radius: 100%;
    cursor: pointer
}

.irs--round .irs-handle:hover,.irs--round .irs-handle.state_hover {
    background-color: #00162ecc
}

.irs--round .irs-from,.irs--round .irs-to,.irs--round .irs-single {
    bottom: -40px;
    top: unset;
    background-color: transparent;
    color: #00162ecc;
    font-weight: 500;
    padding: 0
}

.irs--round .irs-from:before,.irs--round .irs-to:before,.irs--round .irs-single:before {
    display: none
}

.irs--round .irs-bar {
    height: 5px;
    background-color: #00162ea6;
    top: 26px
}

#distance .distance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

#distance .distance .form-group {
    margin: 0
}

#distance .irs {
    font-family: DM Sans,serif!important
}

#distance .irs .irs-line {
    height: 4px
}

#distance .irs .irs-handle.single {
    display: none
}

#distance .irs.irs--modern .irs-grid-pol {
    color: #e5e8ea
}

#distance .irs.irs--modern .irs-grid-pol.small {
    display: none
}

#distance .irs.irs--modern .irs-single {
    background: url(https://quickfixwork.com/public/build/assets/Frame-abe12fb7.svg);
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    font-size: 30px;
    padding: 0;
    border-radius: 0;
    width: 10px;
    color: transparent;
    top: -4px;
    overflow: hidden;
    cursor: pointer
}

#distance .irs.irs--modern .irs-single:before {
    content: "";
    position: absolute;
    background-color: #00162e;
    border: none;
    left: 0;
    bottom: 6px;
    height: 7px;
    width: 7px;
    border-radius: 30px 0 0 30px
}

[dir=rtl] #distance .irs.irs--modern .irs-single:before {
    left: unset;
    right: 0;
    border-radius: 0 30px 30px 0
}

#distance .irs.irs--modern .irs-single:after {
    content: "";
    position: absolute;
    background-color: #00162e;
    right: -3px;
    bottom: 6px;
    height: 7px;
    width: 7px;
    border-radius: 0 30px 30px 0
}

[dir=rtl] #distance .irs.irs--modern .irs-single:after {
    right: unset;
    left: -3px;
    border-radius: 30px 0 0 30px
}

#distance .irs .irs-bar {
    background: #00162E;
    height: 4px
}

#distance .irs .irs-line {
    background-color: #e5e8ea
}

#distance .irs .irs-grid {
    height: 29px
}

#distance .irs .irs-grid .irs-grid-text {
    color: #00162e;
    white-space: wrap;
    width: min-content;
    bottom: -12px;
    line-height: 1;
    font-size: 14px;
    font-weight: 500
}

.star-rating {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 7px;
    flex-direction: row;
    font-size: 1.5em
}

.star-rating input {
    display: none
}

.star-rating label {
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #808b97;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #E5E8EA;
    line-height: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500
}

.star-rating label i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808B97
}

.star-rating label:hover {
    background-color: var(--theme-color);
    color: #fff
}

.star-rating label:hover i {
    --Iconsax-Color: #fff
}

.star-rating :checked~label {
    background-color: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color)
}

.star-rating :checked~label i {
    --Iconsax-Color: #fff
}

.reviews {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}

.reviews:last-child {
    margin: 0
}

.reviews .person-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #00162e
}

.reviews .person-detail img {
    border-radius: 100%;
    height: 45px;
    width: 45px
}

.reviews .person-detail p {
    line-height: 1.5;
    color: #808b97;
    margin: 0;
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.reviews .person-detail h5 {
    line-height: 1.5;
    font-weight: 500
}

.reviews .rating .rate {
    justify-content: end;
    color: #00162e
}

.reviews .rating .rate small {
    font-size: 16px
}

.reviews .rating .overview-list {
    list-style: none
}

.reviews .rating .overview-list li {
    white-space: nowrap
}

@media (max-width: 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 {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    white-space: nowrap;
    display: flex;
    gap: 10px;
    flex-direction: column
}

.rating-bars .rating-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left
}

[dir=rtl] .rating-bars .rating-bar {
    text-align: right
}

.rating-bars .rating-bar .bar {
    width: 100%;
    height: 8px;
    background-color: #f5f6f7;
    border-radius: 4px
}

.rating-bars .rating-bar .bar .bar-item {
    height: 8px;
    background-color: #fdb448;
    border-radius: 4px
}

.rating-bars .rating-bar .bar .bar-item-5 {
    width: 84%
}

.rating-bars .rating-bar .bar .bar-item-4 {
    width: 30%
}

.rating-bars .rating-bar .bar .bar-item-3 {
    width: 12%
}

.rating-bars .rating-bar .bar .bar-item-2 {
    width: 6%
}

.rating-bars .rating-bar .bar .bar-item-1 {
    width: 3%
}

.rating-bars .rating-bar .left {
    min-width: 40px
}

.rating-bars .rating-bar .right {
    color: #808b97;
    text-align: left;
    min-width: 40px
}

[dir=rtl] .rating-bars .rating-bar .right {
    text-align: right
}

.ratio_18 .bg-size:before {
    padding-top: 18%;
    content: "";
    display: block
}

.ratio_20 .bg-size:before {
    padding-top: 20%;
    content: "";
    display: block
}

.ratio_24 .bg-size:before {
    padding-top: 24%;
    content: "";
    display: block
}

.ratio_36 .bg-size:before {
    padding-top: 36%;
    content: "";
    display: block
}

.ratio_40 .bg-size:before {
    padding-top: 40%;
    content: "";
    display: block
}

.ratio_45 .bg-size:before {
    padding-top: 45%;
    content: "";
    display: block
}

.ratio_46 .bg-size:before {
    content: "";
    padding-top: 46%;
    display: block
}

.ratio_47 .bg-size:before {
    padding-top: 47.8%;
    content: "";
    display: block
}

.ratio_70 .bg-size:before {
    padding-top: 70%;
    content: "";
    display: block
}

.ratio2_1 .bg-size:before {
    padding-top: 50%;
    content: "";
    display: block
}

.ratio2_2 .bg-size:before {
    padding-top: 56%;
    content: "";
    display: block
}

.ratio2_3 .bg-size:before {
    padding-top: 60%;
    content: "";
    display: block
}

.ratio-68 .bg-size:before {
    padding-top: 68%;
    content: "";
    display: block
}

.ratio3_2 .bg-size:before {
    padding-top: 66.66%;
    content: "";
    display: block
}

.ratio_landscape .bg-size:before {
    padding-top: 75%;
    content: "";
    display: block
}

.ratio-80 .bg-size:before {
    padding-top: 80%;
    content: "";
    display: block
}

.ratio-85 .bg-size:before {
    padding-top: 85%;
    content: "";
    display: block
}

.ratio_blog-list .bg-size:before {
    padding-top: 88.6%;
    content: "";
    display: block
}

.ratio_square .bg-size:before {
    padding-top: 100%;
    content: "";
    display: block
}

.ratio_94 .bg-size:before {
    padding-top: 94%;
    content: "";
    display: block
}

.ratio_115 .bg-size:before {
    padding-top: 115%;
    content: "";
    display: block
}

.ratio_125 .bg-size:before {
    padding-top: 125%;
    content: "";
    display: block
}

.ratio_124 .bg-size:before {
    padding-top: 124.7777778%;
    content: "";
    display: block
}

.ratio_asos .bg-size:before {
    padding-top: 127.7777778%;
    content: "";
    display: block
}

.ratio_asos_1 .bg-size:before {
    padding-top: 136.777778%;
    content: "";
    display: block
}

.ratio_portrait .bg-size:before {
    padding-top: 150%;
    content: "";
    display: block
}

.ratio_163 .bg-size:before {
    padding-top: 163%;
    content: "";
    display: block
}

.ratio1_2 .bg-size:before {
    padding-top: 200%;
    content: "";
    display: block
}

.b-top {
    background-position: top!important
}

.b-bottom {
    background-position: bottom!important
}

.b-center {
    background-position: center!important
}

.b_size_content {
    background-size: contain!important;
    background-repeat: no-repeat
}

#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div {
    margin-top: 21px;
    opacity: 1;
    box-shadow: unset;
    border-radius: 5px;
    padding: 14px 24px 14px 49px;
    background-size: 23px;
    position: relative;
    background-color: #fff;
    width: max-content
}

#toast-container.toast-bottom-center>div:before,#toast-container.toast-top-center>div:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    height: calc(100% - 12px)
}

[dir=rtl] #toast-container.toast-bottom-center>div:before,[dir=rtl] #toast-container.toast-top-center>div:before {
    left: unset;
    right: 0;
    border-radius: 3px 0 0 3px
}

#toast-container.toast-bottom-center>div:after,#toast-container.toast-top-center>div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1
}

[dir=rtl] #toast-container.toast-bottom-center>div:after,[dir=rtl] #toast-container.toast-top-center>div:after {
    left: unset;
    right: 0
}

#toast-container>.toast-success {
    background-image: url(https://quickfixwork.com/public/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(--theme-color)
}

#toast-container .toast-success .toast-message {
    color: var(--theme-color)
}

#toast-container .toast-error {
    background-color: #e43e3e0d;
    border: 2px solid #e43e3e;
    background-image: url(https://quickfixwork.com/public/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://quickfixwork.com/public/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://quickfixwork.com/public/build/assets/warning-736d8bf3.svg)!important
}

#toast-container .toast-warning:before {
    background-color: #e39f08
}

#toast-container .toast-warning .toast-message {
    color: #e39f08
}

[dir=rtl] .swiper {
    direction: ltr
}

[dir=rtl] .swiper .swiper-slide {
    direction: rtl
}

.swiper .swiper-slide .card {
    margin-bottom: 0
}

.offer-section .swiper-button-next4,.offer-section .swiper-button-prev4,.offer-section .swiper-button-next1,.offer-section .swiper-button-prev1,.offer-section .swiper-button-next2,.offer-section .swiper-button-prev2,.offer-section .swiper-button-next3,.offer-section .swiper-button-prev3,.service-list-section .swiper-button-next4,.service-list-section .swiper-button-prev4,.service-list-section .swiper-button-next1,.service-list-section .swiper-button-prev1,.service-list-section .swiper-button-next2,.service-list-section .swiper-button-prev2,.service-list-section .swiper-button-next3,.service-list-section .swiper-button-prev3,.service-package-section .swiper-button-next4,.service-package-section .swiper-button-prev4,.service-package-section .swiper-button-next1,.service-package-section .swiper-button-prev1,.service-package-section .swiper-button-next2,.service-package-section .swiper-button-prev2,.service-package-section .swiper-button-next3,.service-package-section .swiper-button-prev3,.about-us-slider .swiper-button-next4,.about-us-slider .swiper-button-prev4,.about-us-slider .swiper-button-next1,.about-us-slider .swiper-button-prev1,.about-us-slider .swiper-button-next2,.about-us-slider .swiper-button-prev2,.about-us-slider .swiper-button-next3,.about-us-slider .swiper-button-prev3 {
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    width: 28px;
    height: 20px;
    top: -10px;
    position: absolute;
    opacity: 1
}

.offer-section .swiper-button-next4:after,.offer-section .swiper-button-prev4:after,.offer-section .swiper-button-next1:after,.offer-section .swiper-button-prev1:after,.offer-section .swiper-button-next2:after,.offer-section .swiper-button-prev2:after,.offer-section .swiper-button-next3:after,.offer-section .swiper-button-prev3:after,.service-list-section .swiper-button-next4:after,.service-list-section .swiper-button-prev4:after,.service-list-section .swiper-button-next1:after,.service-list-section .swiper-button-prev1:after,.service-list-section .swiper-button-next2:after,.service-list-section .swiper-button-prev2:after,.service-list-section .swiper-button-next3:after,.service-list-section .swiper-button-prev3:after,.service-package-section .swiper-button-next4:after,.service-package-section .swiper-button-prev4:after,.service-package-section .swiper-button-next1:after,.service-package-section .swiper-button-prev1:after,.service-package-section .swiper-button-next2:after,.service-package-section .swiper-button-prev2:after,.service-package-section .swiper-button-next3:after,.service-package-section .swiper-button-prev3:after,.about-us-slider .swiper-button-next4:after,.about-us-slider .swiper-button-prev4:after,.about-us-slider .swiper-button-next1:after,.about-us-slider .swiper-button-prev1:after,.about-us-slider .swiper-button-next2:after,.about-us-slider .swiper-button-prev2:after,.about-us-slider .swiper-button-next3:after,.about-us-slider .swiper-button-prev3:after {
    display: none
}

.offer-section .swiper-button-prev4,.offer-section .swiper-button-prev1,.offer-section .swiper-button-prev2,.offer-section .swiper-button-prev3,.service-list-section .swiper-button-prev4,.service-list-section .swiper-button-prev1,.service-list-section .swiper-button-prev2,.service-list-section .swiper-button-prev3,.service-package-section .swiper-button-prev4,.service-package-section .swiper-button-prev1,.service-package-section .swiper-button-prev2,.service-package-section .swiper-button-prev3,.about-us-slider .swiper-button-prev4,.about-us-slider .swiper-button-prev1,.about-us-slider .swiper-button-prev2,.about-us-slider .swiper-button-prev3 {
    background-image: url(https://quickfixwork.com/public/build/assets/preview-db216f8c.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://quickfixwork.com/public/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://quickfixwork.com/public/build/assets/next-284479b0.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://quickfixwork.com/public/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://quickfixwork.com/public/build/assets/left-b3fbce24.svg);
    left: 20px
}

.swiper-button-next5 {
    background-image: url(https://quickfixwork.com/public/build/assets/right-d5ee7953.svg)!important;
    right: 20px
}

.table-responsive {
    border: 1px solid #E5E8EA;
    border-radius: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)))
}

.table-responsive.custom-scroll::-webkit-scrollbar {
    height: 5px
}

.table-responsive .table {
    overflow: hidden;
    border: none;
    margin: 0;
    --bs-table-bg: unset
}

.table-responsive .table thead {
    background-color: #f5f6f7
}

.table-responsive .table thead tr th {
    font-size: 14px;
    font-weight: 500;
    color: #808b97;
    padding: calc(12px + .0025*(100vw - 320px)) calc(12px + .0025*(100vw - 320px));
    line-height: 1.2
}

.table-responsive .table tbody tr {
    border-bottom: 1px dashed #E5E8EA
}

.table-responsive .table tbody tr:last-child {
    border-bottom: none
}

.table-responsive .table tbody tr td {
    vertical-align: middle;
    padding: calc(12px + .0025*(100vw - 320px)) calc(12px + .0025*(100vw - 320px));
    font-size: 14px;
    line-height: 1
}

.table-responsive .table tbody tr td h6 {
    color: var(--theme-color)
}

.table-responsive .table>:not(:first-child),.table-responsive .table>:not(caption)>*>* {
    border: none
}

.table-responsive .table.wallet-table .dataTables_processing {
    position: absolute;
    top: 0;
    left: 0;
    transform: unset;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    padding: 0;
    display: flex!important;
    align-items: center;
    justify-content: center;
    background-color: #fff
}

[dir=rtl] .table-responsive .table.wallet-table .dataTables_processing {
    right: 0;
    left: unset
}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_length label {
    padding-inline:0}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_length select {
    padding: 10px 16px;
    border: 1px solid #E5E8EA;
    background-color: #fff;
    border-radius: 7px;
    font-size: 15px
}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_filter label {
    padding-inline:0}

.table-responsive .table.wallet-table .dataTables_wrapper .dataTables_filter label input {
    padding: 10px 16px;
    border: 1px solid #E5E8EA;
    background-color: #fff;
    border-radius: 7px;
    font-size: 15px
}

.table-responsive .table.wallet-table.table {
    overflow: auto
}

.table-responsive .table.wallet-table table {
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    overflow: hidden auto
}

.table-responsive .table.wallet-table table thead {
    background-color: var(--theme-color)
}

.table-responsive .table.wallet-table table thead tr th {
    color: #fff;
    font-size: calc(16px + .00125*(100vw - 320px));
    white-space: nowrap;
    font-weight: 600;
    padding: 16px;
    text-align: center
}

.table-responsive .table.wallet-table table thead tr th:nth-child(3) {
    max-width: 300px
}

.table-responsive .table.wallet-table table thead tr th:nth-child(2),.table-responsive .table.wallet-table table thead tr th:first-child {
    text-align: left
}

[dir=rtl] .table-responsive .table.wallet-table table thead tr th:nth-child(2),[dir=rtl] .table-responsive .table.wallet-table table thead tr th:first-child {
    text-align: right
}

.table-responsive .table.wallet-table table tbody {
    background-color: #fff
}

.table-responsive .table.wallet-table table tbody tr td {
    font-size: calc(14px + .00125*(100vw - 320px));
    white-space: nowrap;
    border-bottom: 1px dashed #E5E8EA;
    text-align: center;
    padding: calc(16px + .0025*(100vw - 320px)) 16px
}

.table-responsive .table.wallet-table table tbody tr td:nth-child(2),.table-responsive .table.wallet-table table tbody tr td:first-child {
    text-align: left
}

.table-responsive .table.wallet-table table tbody tr td:last-child {
    color: #808b97
}

.table-responsive .table.wallet-table table tbody tr td:first-child {
    color: var(--theme-color);
    font-weight: 600;
    font-size: 17px
}

.table-responsive .table.wallet-table table tbody tr .success-light,.table-responsive .table.wallet-table table tbody tr .danger-light {
    font-weight: 600;
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 4px
}

.table-responsive .table.wallet-table table tbody tr .success-light {
    background-color: #27af4d1a;
    color: #27af4d
}

.table-responsive .table.wallet-table table tbody tr .danger-light {
    background-color: #ff4b4b1a;
    color: #ff4b4b
}

.table-responsive .table.wallet-table table tbody tr:last-child td {
    border-bottom: unset
}

.table-responsive .table.wallet-table .dataTables_info {
    padding-top: 19px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600
}

.table-responsive .table.wallet-table .dataTables_paginate span {
    display: flex;
    align-items: center
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3aab1;
    width: calc(32px + 6*(100vw - 320px) / 880);
    height: calc(32px + 6*(100vw - 320px) / 880);
    border: none;
    border-radius: 100%;
    padding: 0;
    background-color: #fff;
    border: 1px solid #E5E8EA
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button:hover {
    color: #5465ff!important;
    border-color: #5465ff03;
    background: rgba(84,101,255,.1);
    box-shadow: unset
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.previous {
    color: transparent!important;
    background-image: url(https://quickfixwork.com/public/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(--theme-color)!important;
    border-color: var(--theme-color)
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.current,.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-color);
    color: #fff!important;
    font-weight: 600
}

.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.next,.table-responsive .table.wallet-table .dataTables_paginate .paginate_button.previous {
    width: auto;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600
}

.table-responsive .table.booking-table thead tr th:nth-child(1) {
    min-width: 250px
}

.table-responsive .table.booking-table thead tr th:nth-child(2) {
    min-width: 100px
}

.table-responsive .table.booking-table thead tr th:nth-child(3) {
    min-width: 120px
}

.table-responsive .table.booking-table thead tr th:nth-child(4) {
    min-width: 180px
}

.wallet-data-table .table.no-footer {
    width: 100%!important;
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    overflow: hidden auto
}

.wallet-data-table .table.dataTables_wrapper {
    width: calc(100% - 1px);
    padding: 0
}

.wallet-data-table .table thead {
    background-color: var(--theme-color)
}

.wallet-data-table .table thead tr th {
    color: #fff;
    font-size: calc(16px + .00125*(100vw - 320px));
    white-space: nowrap;
    font-weight: 600;
    padding: 16px;
    text-align: center
}

.wallet-data-table .table tbody {
    background-color: #fff
}

.wallet-data-table .table tbody tr td {
    font-size: calc(14px + .00125*(100vw - 320px));
    white-space: nowrap;
    border-bottom: 1px dashed #E5E8EA;
    text-align: center;
    font-weight: 400;
    padding: calc(16px + .0025*(100vw - 320px)) 16px
}

.wallet-data-table .table tbody tr td:nth-child(3) {
    max-width: 260px!important
}

.wallet-data-table .table tbody tr td:last-child {
    color: #808b97
}

.wallet-data-table .table tbody tr .success-light,.wallet-data-table .table tbody tr .danger-light {
    font-weight: 600;
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 4px
}

.wallet-data-table .table tbody tr .success-light {
    background-color: #27af4d1a;
    color: #27af4d
}

.wallet-data-table .table tbody tr .danger-light {
    background-color: #ff4b4b1a;
    color: #ff4b4b
}

.wallet-data-table .table tbody tr:last-child td {
    border-bottom: unset
}

.wallet-data-table .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 10px
}

.wallet-data-table .dataTables_paginate span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0
}

.wallet-data-table .dataTables_paginate .paginate_button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3aab1;
    width: calc(32px + 6*(100vw - 320px) / 880);
    height: calc(32px + 6*(100vw - 320px) / 880);
    border: none;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #E5E8EA;
    padding: 0;
    margin: 0
}

.wallet-data-table .dataTables_paginate .paginate_button:hover {
    color: #5465ff!important;
    border-color: #5465ff03;
    background: rgba(84,101,255,.1);
    box-shadow: unset
}

.wallet-data-table .dataTables_paginate .paginate_button.previous,.wallet-data-table .dataTables_paginate .paginate_button.next {
    color: transparent!important;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    width: auto;
    padding: 0;
    font-size: 0;
    width: calc(32px + 6*(100vw - 320px) / 880)!important;
    height: calc(32px + 6*(100vw - 320px) / 880)
}

.wallet-data-table .dataTables_paginate .paginate_button.previous {
    background-image: url(https://quickfixwork.com/public/build/assets/left-b3fbce24.svg)
}

.wallet-data-table .dataTables_paginate .paginate_button.next {
    background-image: url(https://quickfixwork.com/public/build/assets/right-d5ee7953.svg)
}

.wallet-data-table .dataTables_paginate .paginate_button .disabled:hover {
    background-color: #f8f9fa!important;
    color: transparent!important;
    border-color: var(--theme-color)
}

.wallet-data-table .dataTables_paginate .paginate_button.current,.wallet-data-table .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-color);
    color: #fff!important;
    font-weight: 600
}

.wallet-data-table .dataTables_paginate .paginate_button.next,.wallet-data-table .dataTables_paginate .paginate_button.previous {
    width: auto;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 600
}

.wallet-data-table table.dataTable.table thead td.sorting:after,.wallet-data-table table.dataTable.table thead td.sorting_desc:after,.wallet-data-table table.dataTable.table thead td.sorting_asc:after,.wallet-data-table table.dataTable.table thead th.sorting:after,.wallet-data-table table.dataTable.table thead th.sorting_desc:after,.wallet-data-table table.dataTable.table thead th.sorting_asc:after {
    font-family: DM Sans,serif;
    top: 50%;
    transform: translateY(-50%)
}

.wallet-data-table table.dataTable thead .sorting:before,.wallet-data-table table.dataTable thead .sorting_asc:before,.wallet-data-table table.dataTable thead .sorting_desc:before,.wallet-data-table table.dataTable thead .sorting_asc_disabled:before,.wallet-data-table table.dataTable thead .sorting_desc_disabled:before {
    right: 25px;
    font-size: .8em
}

[dir=rtl] .wallet-data-table table.dataTable thead .sorting:before,[dir=rtl] .wallet-data-table table.dataTable thead .sorting_asc:before,[dir=rtl] .wallet-data-table table.dataTable thead .sorting_desc:before,[dir=rtl] .wallet-data-table table.dataTable thead .sorting_asc_disabled:before,[dir=rtl] .wallet-data-table table.dataTable thead .sorting_desc_disabled:before {
    right: unset;
    left: 25px
}

.wallet-data-table .dataTables_wrapper {
    font-family: DM Sans,serif;
    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
    }
}

.wallet-data-table .dataTables_wrapper .dataTables_length label {
    padding: 0 0 11px;
    font-size: 16px
}

.wallet-data-table .dataTables_wrapper .dataTables_length select {
    padding: 10px 16px;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    font-size: calc(14px + (15 - 14)*((100vw - 320px) /(1920 - 320)));
    color: #00162e;
    margin-inline:7px;line-height: 1.3
}

.wallet-data-table .dataTables_wrapper .dataTables_filter label {
    padding: 0 0 11px;
    font-size: 16px
}

.wallet-data-table .dataTables_wrapper .dataTables_filter input {
    padding: 10px 16px;
    border: none;
    margin-left: 7px;
    background-color: #fff;
    border-radius: 8px;
    font-size: calc(14px + (15 - 14)*((100vw - 320px) /(1920 - 320)));
    color: #00162e;
    line-height: 1.3
}

[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 #E5E8EA;
    margin-bottom: 0;
    width: 100%;
    transition: all .5s ease
}

.custom-nav-tabs .nav-item .nav-link.active,.custom-nav-tabs .nav-item .nav-link:hover {
    background-color: #5465ff1a;
    border: 1px solid rgba(84,101,255,.01)
}

.custom-nav-tabs .nav-item .nav-link.active span,.custom-nav-tabs .nav-item .nav-link:hover span {
    color: var(--theme-color)
}

.custom-nav-tabs .nav-item .nav-link.active .img-box,.custom-nav-tabs .nav-item .nav-link:hover .img-box {
    background-color: #fff
}

.custom-nav-tabs .nav-item .nav-link.active img.inactive,.custom-nav-tabs .nav-item .nav-link:hover img.inactive {
    display: none
}

.custom-nav-tabs .nav-item .nav-link.active img.active,.custom-nav-tabs .nav-item .nav-link:hover img.active {
    display: block
}

.custom-nav-tabs .nav-item .nav-link .img-box {
    width: 100%;
    height: calc(66px + (95 - 66) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 12px;
    background-color: #e5e8ea66;
    padding: calc(13px + .0075*(100vw - 320px));
    border-radius: 4px;
    transition: all .5s ease
}

.custom-nav-tabs .nav-item .nav-link img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.custom-nav-tabs .nav-item .nav-link img.active {
    display: none
}

.custom-nav-tabs .nav-item .nav-link img.inactive {
    display: block
}

.custom-nav-tabs .nav-item .nav-link span {
    font-family: DM Sans,serif!important;
    margin: 0 auto;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #00162e;
    line-height: 26px;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.custom-nav-tabs .nav-item .nav-link small {
    font-family: DM Sans,serif!important;
    margin: 0 auto;
    font-size: calc(14px + .00125*(100vw - 320px));
    color: #00162e99;
    line-height: 20px;
    white-space: nowrap
}

.tab-content {
    margin-top: 30px
}

.review-tab {
    margin: 0
}

.review-tab .tab-pane {
    padding: 20px;
    min-height: 290px
}

.review-tab .nav-item .nav-link {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #808b97;
    border: none
}

.review-tab .nav-item .nav-link.active {
    background-color: transparent;
    border: none;
    color: #00162e;
    border-bottom: 2px solid #00162E
}

.review-tab .nav-item .nav-link.active:hover {
    border-bottom: 2px solid #00162E
}

.review-tab .nav-item .nav-link:hover {
    border: none
}

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

.favorite-tab h3 {
    font-weight: 700
}

.favorite-tab .nav-tabs {
    border: none;
    gap: 12px
}

.favorite-tab .nav-tabs .nav-item .nav-link {
    background-color: #5465ff1a;
    color: var(--theme-color);
    border: none;
    border-radius: 10px;
    font-size: 18px;
    padding: 9px 27px
}

.favorite-tab .nav-tabs .nav-item .nav-link.active {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 500
}

.provider-detail-tab .nav-tabs {
    flex-direction: column;
    gap: 16px
}

.provider-detail-tab .nav-tabs .nav-item .nav-link {
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    border-radius: 8px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    padding: 12px;
    background-color: transparent
}

.overview-list {
    list-style: disc;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

[dir=rtl] .overview-list {
    padding-left: 0;
    padding-right: 20px
}

.overview-list li {
    display: list-item;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.provider-service-tab {
    padding-bottom: 16px;
    gap: 12px
}

.provider-service-tab .nav-item .nav-link {
    background-color: #5465ff1a;
    color: var(--theme-color);
    border: none;
    border-radius: 30px;
    font-size: 16px;
    padding: 6px 16px
}

.provider-service-tab .nav-item .nav-link.active {
    background-color: var(--theme-color);
    color: #fff;
    font-weight: 500
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4
}

[dir=rtl] header {
    right: 0;
    left: unset
}

header.active {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #010d25;
    box-shadow: 0 8px 10px #00162e0d;
    z-index: 6
}

[dir=rtl] header.active {
    right: 0;
    left: unset
}

header.active .container-fluid-xl {
    padding: 0 calc(12px + .055*(100vw - 320px))
}

header.active .navbar {
    padding-block:40px!important}

@media (max-width: 1199.98px) {
    header.active .navbar {
        padding-block:calc(12px + .005*(100vw - 320px))
    }
}

header.active .navbar .onhover-show-div {
    background-color: #fff!important
}

header.active .navbar .onhover-show-div li {
    color: #00162e99!important
}

header.active .navbar .onhover-show-div li.location>div h5 {
    color: #00162e
}

header.active .navbar .onhover-show-div li.location>div h6 {
    color: #00162e80
}

header.active .navbar .onhover-show-div li a {
    color: #00162e99!important
}

header.active .navbar .onhover-show-div li i {
    --Iconsax-Color: #00162e99 !important
}

header.active .navbar .onhover-show-div li:hover {
    color: #00162e!important
}

header.active .navbar .onhover-show-div li:hover a {
    color: #00162e!important
}

header.active .navbar .onhover-show-div li:hover i {
    --Iconsax-Color: #00162E !important
}

header.active .navbar .onhover-show-div .detect-location .detect-location-title .location-icon {
    --Iconsax-Color: #00162E !important
}

header.active .navbar .onhover-show-div .detect-location .detect-location-title h4 {
    color: #00162e!important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn {
    color: #000000 !important;
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn i {
    --Iconsax-Color: #5465FF !important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn:hover {
    color: #fff!important
}

header.active .navbar .onhover-show-div .detect-location .location-content .detect-btn:hover i {
    --Iconsax-Color: #fff !important
}

header.active .navbar .onhover-show-div .detect-location .location-content span {
    color: #00162e!important
}

header.active .navbar .onhover-show-div .detect-location .location-content .location-search {
    background-color: #f5f6f7;
    color: #00162e
}

header.active .navbar .onhover-show-div .detect-location .location-content .location-search::placeholder {
    color: #a3aab1
}

header .top-header .navbar {
    padding-block:calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)))!important}

header .custom-navbar .logo-content {
    display: flex;
    align-items: center;
    gap: calc(4px + .0125*(100vw - 320px))
}

header .custom-navbar .logo-content .navbar-toggler-icon {
    filter: invert(1)
}

header .custom-navbar i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: White
}

header .custom-navbar .navbar-brand {
    margin: 0;
    padding: 0;
    font-size: 0
}

header .custom-navbar .navbar-brand img {
    width: calc(90px + .05*(100vw - 320px));
    height: auto
}

header .custom-navbar .location-dropdown {
    border: 1px solid rgba(255,255,255,.1);
    background-color: #1d2537;
    padding: calc(6px + .0025*(100vw - 320px));
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100px + .09375*(100vw - 320px))
}

@media (max-width: 1199px) {
    header .custom-navbar .location-dropdown {
        max-width:calc(100px + (250 - 100) * ((100vw - 320px) / (1199 - 320)))
    }
}

header .custom-navbar .location-dropdown .location-btn {
    background: transparent;
    color: #fff;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: auto
}

@media (max-width: 576px) {
    header .custom-navbar .location-dropdown .location-btn {
        gap:0
    }
}

header .custom-navbar .location-dropdown .location-btn .location-svg {
    --Iconsax-Size: 22px;
    --Iconsax-Color: White
}

header .custom-navbar .location-dropdown .location-btn .location-part {
    overflow: hidden;
    display: flex
}

header .custom-navbar .location-dropdown .location-btn .location-part .location-place {
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

header .custom-navbar .location-dropdown .location-btn .arrow {
    ---Iconsax-Size: 18px;
    --Iconsax-Color: White
}

@media (max-width: 576px) {
    header .custom-navbar .location-dropdown .location-btn .arrow {
        display:none
    }
}

header .custom-navbar .location-dropdown .location-btn span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block
}

@media (max-width: 576px) {
    header .custom-navbar .location-dropdown .location-btn span {
        display:none
    }
}

header .custom-navbar .location-dropdown .onhover-show-div {
    min-width: 480px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.1);
    background-color: #1d2537;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0,-5%,0);
    top: 45px;
    left: 0;
    padding: 15px;
    border-radius: 12px;
    width: 100%
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div {
    left: unset;
    right: 0
}

@media (max-width: 767px) {
    header .custom-navbar .location-dropdown .onhover-show-div {
        left:-120px!important
    }

    [dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div {
        left: unset!important;
        right: -120px!important
    }
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div {
        min-width:calc(300px + (480 - 300) * ((100vw - 320px) / (550 - 320)))
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title {
    display: flex;
    align-items: start;
    gap: 4px
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title {
    align-items: end
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .location-icon {
    margin-top: 4px;
    --Iconsax-Color: #fff;
    --Iconsax-Size: 16px
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title h4 {
    font-size: 16px;
    color: #fff;
    line-height: 1.5
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn {
    margin-left: auto;
    cursor: pointer
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .close-btn {
    margin-left: unset;
    margin-right: auto
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content {
        display:block
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn {
    border-radius: 8px
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:hover,header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:active {
    color: #fff;
    background-color: var(--theme-color);
    border-color: transparent
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:hover i,header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn:active i {
    --Iconsax-Color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn i {
    transition: all .2s ease-in-out;
    --Iconsax-Color: var(--theme-color)
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .detect-btn {
        width:100%
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn {
    display: inline-block;
    width: auto;
    border-radius: 8px
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn:hover {
    color: #fff;
    background-color: #000000
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .manually-location-btn {
        width:100%
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content span {
    color: #fff;
    font-weight: 600
}

@media (max-width: 550px) {
    header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content span {
        width:100%;
        margin: 10px 0;
        text-align: center
    }
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .or-text {
    text-align: center
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .location-search {
    background-color: #f5f6f7
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content .location-search::placeholder {
    color: #a3aab1
}

header .custom-navbar .location-dropdown .onhover-show-div .detect-location :hover a {
    color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .location {
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: start;
    justify-content: start;
    border: none;
    color: #fff9;
    background-color: transparent;
    gap: 8px;
    font-size: 16px;
    padding: 0
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div h5 {
    color: #fff;
    font-size: 18px
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div h6 {
    color: #ffffff80;
    font-size: 16px;
    margin-top: 4px
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div img {
    border-radius: 0!important;
    width: auto!important;
    height: auto!important
}

header .custom-navbar .location-dropdown .onhover-show-div .location>div i {
    margin-top: 3px;
    --Iconsax-Color: #ffffff99
}

header .custom-navbar .location-dropdown .onhover-show-div .location:hover {
    color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .location:hover i {
    --Iconsax-Color: #fff
}

header .custom-navbar .location-dropdown .onhover-show-div .location+li {
    margin-top: 16px
}

header .custom-navbar .location-dropdown .onhover-show-div.show {
    visibility: visible;
    opacity: 1;
    top: 60px;
    left: 0;
    z-index: 999
}

[dir=rtl] header .custom-navbar .location-dropdown .onhover-show-div.show {
    left: unset;
    right: 0
}

header .custom-navbar .location-dropdown .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000bf;
    z-index: 900
}

[dir=rtl] header .custom-navbar .location-dropdown .overlay {
    left: unset;
    right: 0
}

header .custom-navbar .nav-right {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 767.98px) {
    header .custom-navbar .nav-right {
        gap:6px
    }
}

header .custom-navbar .nav-right .nav-item-right {
    border: 1px solid rgba(255,255,255,.1);
    background-color: #ffffff1a;
    padding: calc(5px + .00125*(100vw - 320px)) calc(6px + (9 - 6) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    position: relative
}

header .custom-navbar .nav-right .nav-item-right .badge {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -5px;
    right: -5px;
    background-color: #fb4040;
    border-radius: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

header .custom-navbar .nav-right .nav-item-right.login-btn {
    border: none;
    background-color: transparent;
    padding: 0
}

@media (max-width: 767.98px) {
    header .custom-navbar .nav-right .nav-item-right.login-btn a span {
        display:none
    }
}

header .custom-navbar .nav-right .nav-item-right .btn.btn-outline {
    border-radius: 30px;
    padding: 8px 30px;
    border-color: #f4f4f4;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.125);
}

@media (max-width: 991.98px) {
    header .custom-navbar .nav-right .nav-item-right .btn.btn-outline {
        padding:4px 12px;
        font-size: 16px
    }
}

header .custom-navbar .nav-right .nav-item-right:last-child {
    position: relative;
    margin-left: 10px
}

[dir=rtl] header .custom-navbar .nav-right .nav-item-right:last-child {
    margin-left: unset;
    margin-right: 10px
}

header .custom-navbar .nav-right .nav-item-right:last-child:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #ffffff4d;
    left: -10px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] header .custom-navbar .nav-right .nav-item-right:last-child:before {
    left: unset;
    right: -10px
}

header .custom-navbar .nav-right .language-dropdown,header .custom-navbar .nav-right .currency-dropdown,header .custom-navbar .nav-right .profile-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 30px;
    height: 42px
}

header .custom-navbar .nav-right .language-dropdown img,header .custom-navbar .nav-right .currency-dropdown img,header .custom-navbar .nav-right .profile-dropdown img {
    width: 24px!important;
    height: 24px!important;
    border-radius: 100%
}

header .custom-navbar .nav-right .language-dropdown .language-btn,header .custom-navbar .nav-right .language-dropdown .currency-btn,header .custom-navbar .nav-right .language-dropdown .profile-btn,header .custom-navbar .nav-right .currency-dropdown .language-btn,header .custom-navbar .nav-right .currency-dropdown .currency-btn,header .custom-navbar .nav-right .currency-dropdown .profile-btn,header .custom-navbar .nav-right .profile-dropdown .language-btn,header .custom-navbar .nav-right .profile-dropdown .currency-btn,header .custom-navbar .nav-right .profile-dropdown .profile-btn {
    background: transparent;
    color: #fff;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap
}

header .custom-navbar .nav-right .language-dropdown .language-btn span,header .custom-navbar .nav-right .language-dropdown .language-btn a,header .custom-navbar .nav-right .language-dropdown .currency-btn span,header .custom-navbar .nav-right .language-dropdown .currency-btn a,header .custom-navbar .nav-right .language-dropdown .profile-btn span,header .custom-navbar .nav-right .language-dropdown .profile-btn a,header .custom-navbar .nav-right .currency-dropdown .language-btn span,header .custom-navbar .nav-right .currency-dropdown .language-btn a,header .custom-navbar .nav-right .currency-dropdown .currency-btn span,header .custom-navbar .nav-right .currency-dropdown .currency-btn a,header .custom-navbar .nav-right .currency-dropdown .profile-btn span,header .custom-navbar .nav-right .currency-dropdown .profile-btn a,header .custom-navbar .nav-right .profile-dropdown .language-btn span,header .custom-navbar .nav-right .profile-dropdown .language-btn a,header .custom-navbar .nav-right .profile-dropdown .currency-btn span,header .custom-navbar .nav-right .profile-dropdown .currency-btn a,header .custom-navbar .nav-right .profile-dropdown .profile-btn span,header .custom-navbar .nav-right .profile-dropdown .profile-btn a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    font-size: 16px
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div {
    min-width: 150px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.1);
    background-color: #1d2537;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0,-5%,0);
    top: 45px;
    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: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    border: none;
    color: #fff9;
    background-color: transparent;
    gap: 10px;
    font-size: 15px;
    padding: 0;
    white-space: nowrap
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang a,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency a,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile a,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link a {
    color: #fff9;
    display: flex;
    align-items: center;
    gap: 10px
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang i,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency i,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile i,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link i {
    --Iconsax-Color: #ffffff99
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang .lang-img,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency .lang-img,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile .lang-img,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link .lang-img,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang .lang-img,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency .lang-img,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile .lang-img,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link .lang-img,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang .lang-img,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency .lang-img,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile .lang-img,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link .lang-img {
    width: 24px!important;
    height: 24px!important
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover {
    color: #fff;
    transform: translate(5px)
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover a,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover a,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover a,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover a,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover a,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover a {
    color: #fff
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover i,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover i,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover i,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover i,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover i,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover i {
    --Iconsax-Color: #fff
}

[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang:hover,[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency:hover,[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile:hover,[dir=rtl] header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link:hover,[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang:hover,[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency:hover,[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile:hover,[dir=rtl] header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link:hover,[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang:hover,[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency:hover,[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile:hover,[dir=rtl] header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link:hover {
    transform: translate(-5px)
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .lang+li,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency+li,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .profile+li,header .custom-navbar .nav-right .language-dropdown .onhover-show-div .page-link+li,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .lang+li,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency+li,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .profile+li,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .page-link+li,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .lang+li,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency+li,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .profile+li,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .page-link+li {
    margin-top: 16px
}

header .custom-navbar .nav-right .language-dropdown .onhover-show-div .currency img,header .custom-navbar .nav-right .currency-dropdown .onhover-show-div .currency img,header .custom-navbar .nav-right .profile-dropdown .onhover-show-div .currency img {
    height: 24px!important
}

header .custom-navbar .nav-right .language-dropdown:hover .onhover-show-div,header .custom-navbar .nav-right .currency-dropdown:hover .onhover-show-div,header .custom-navbar .nav-right .profile-dropdown:hover .onhover-show-div {
    opacity: 1;
    visibility: visible;
    transform: none
}

header .custom-navbar .nav-right .language-dropdown .profile-btn .initial-letter,header .custom-navbar .nav-right .currency-dropdown .profile-btn .initial-letter,header .custom-navbar .nav-right .profile-dropdown .profile-btn .initial-letter {
    background-color: #fff;
    padding: 5px;
    color: #00162e;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500
}

@media (max-width: 576px) {
    header .custom-navbar .nav-right .language-dropdown .profile-btn .profile-text,header .custom-navbar .nav-right .currency-dropdown .profile-btn .profile-text,header .custom-navbar .nav-right .profile-dropdown .profile-btn .profile-text {
        display:none
    }
}

@media (max-width: 576px) {
    header .custom-navbar .nav-right .language-dropdown .profile-btn,header .custom-navbar .nav-right .currency-dropdown .profile-btn,header .custom-navbar .nav-right .profile-dropdown .profile-btn {
        gap:0
    }
}

header .custom-navbar .nav-right .currency-dropdown {
    padding-left: 40px!important
}

header .custom-navbar .nav-right .currency-dropdown .currency-btn img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px
}

header .custom-navbar .nav-right .profile-dropdown img {
    width: 24px!important;
    height: 24px!important;
    border-radius: 100%
}

header .custom-navbar .nav-right .profile-dropdown .onhover-show-div {
    top: 53px;
    width: 100%
}

header .custom-navbar .nav-right i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: White
}

header .custom-navbar .navbar-toggler {
    border: none;
    padding: 0
}

header .custom-navbar .navbar-toggler .navbar-toggler-icon {
    width: 20px;
    height: 20px
}

header .custom-navbar .navbar-toggler:focus {
    box-shadow: none
}

header .custom-navbar .navbar-collapse .navbar-nav {
    gap: calc(20px + (45 - 20) * ((100vw - 1200px) / (1920 - 1200)))
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #ffffffb3;
    padding-left: 0;
    font-weight: 400;
    padding-right: 0
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    color: #fff
}

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    font-weight: 500;
    color: var(--theme-color)
}

@media (max-width: 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
    }

    [dir=rtl] header .custom-navbar .navbar-collapse {
        left: unset;
        right: -350px
    }

    header .custom-navbar .navbar-collapse .navbar-header {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 8px 10px #00162e0d
    }

    header .custom-navbar .navbar-collapse .navbar-header h4 {
        color: var(--theme-color);
        font-weight: 600;
        line-height: 23px
    }

    header .custom-navbar .navbar-collapse .navbar-header i {
        ---Iconsax-Size: 18px;
        --Iconsax-Color: #a3aab1
    }

    header .custom-navbar .navbar-collapse .navbar-header .btn-close {
        box-shadow: unset
    }

    header .custom-navbar .navbar-collapse .navbar-nav {
        padding: 20px;
        height: 100%;
        gap: 16px;
        overflow: auto
    }

    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
        color: #00162e;
        padding: 0
    }

    header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
        color: #00162e
    }

    header .custom-navbar .navbar-collapse.show {
        transition: all .3s ease-in;
        left: 0;
        z-index: 2;
        visibility: visible;
        opacity: 1
    }

    [dir=rtl] header .custom-navbar .navbar-collapse.show {
        left: unset;
        right: 0
    }
}

header .nav-right {
    display: flex;
    align-items: center;
    gap: 12px
}

@media (max-width: 767.98px) {
    header .nav-right {
        gap:6px
    }
}

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 .badge {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -5px;
    right: -5px;
    background-color: #fb4040;
    border-radius: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

header .nav-right .nav-item-right.login-btn {
    border: none;
    background-color: transparent;
    padding: 0
}

@media (max-width: 767.98px) {
    header .nav-right .nav-item-right.login-btn a span {
        display:none
    }
}

header .nav-right .nav-item-right .btn.btn-outline {
    border-radius: 30px;
    padding: 8px 30px;
    border-color: var(--theme-color);
    color: var(--theme-color);
    background-color: transparent
}

@media (max-width: 991.98px) {
    header .nav-right .nav-item-right .btn.btn-outline {
        padding:4px 12px;
        font-size: 16px
    }
}

header .nav-right .nav-item-right:last-child {
    position: relative;
    margin-left: 10px
}

[dir=rtl] header .nav-right .nav-item-right:last-child {
    margin-left: unset;
    margin-right: 10px
}

header .nav-right .nav-item-right:last-child:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #ffffff4d;
    left: -10px;
    top: 50%;
    transform: translateY(-50%)
}

[dir=rtl] header .nav-right .nav-item-right:last-child:before {
    left: unset;
    right: -10px
}

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: 24px!important;
    height: 24px!important;
    border-radius: 100%
}

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: 12px;
    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: 10px;
    line-height: 1;
    font-size: 16px
}

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: 150px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.1);
    background-color: #1d2537;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0,-5%,0);
    top: 45px;
    right: 0;
    padding: 15px;
    border-radius: 12px;
    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
}

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: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    border: none;
    color: #fff9;
    background-color: transparent;
    gap: 10px;
    font-size: 15px;
    padding: 0;
    white-space: nowrap
}

header .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: #fff9;
    display: flex;
    align-items: center;
    gap: 10px
}

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: #ffffff99
}

header .nav-right .language-dropdown .onhover-show-div .lang .lang-img,header .nav-right .language-dropdown .onhover-show-div .currency .lang-img,header .nav-right .language-dropdown .onhover-show-div .profile .lang-img,header .nav-right .language-dropdown .onhover-show-div .page-link .lang-img,header .nav-right .currency-dropdown .onhover-show-div .lang .lang-img,header .nav-right .currency-dropdown .onhover-show-div .currency .lang-img,header .nav-right .currency-dropdown .onhover-show-div .profile .lang-img,header .nav-right .currency-dropdown .onhover-show-div .page-link .lang-img,header .nav-right .profile-dropdown .onhover-show-div .lang .lang-img,header .nav-right .profile-dropdown .onhover-show-div .currency .lang-img,header .nav-right .profile-dropdown .onhover-show-div .profile .lang-img,header .nav-right .profile-dropdown .onhover-show-div .page-link .lang-img {
    width: 24px!important;
    height: 24px!important
}

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

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

[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 .onhover-show-div .currency img,header .nav-right .currency-dropdown .onhover-show-div .currency img,header .nav-right .profile-dropdown .onhover-show-div .currency img {
    height: 24px!important
}

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: #00162e;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500
}

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

header .sub-header {
    background-color: transparent;
    padding: 17px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 1px solid rgba(255,255,255,.2)
}

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: 20px!important;
    width: 20px!important
}

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: 7px
}

.newsletter-section .newsletter-content {
    position: relative;
    background-image: url(https://quickfixwork.com/public/build/assets/newsletter-1d2bcb9c.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    padding-top: 1px
}

@media (max-width: 767.98px) {
    .newsletter-section .newsletter-content {
        background-image:none
    }
}

.newsletter-section .newsletter-content .newsletter-detail {
    color: #fff;
    padding: calc(60px + (100 - 60) * ((100vw - 992px) / (1920 - 992))) 0 calc(20px + (30 - 20) * ((100vw - 992px) / (1920 - 992)));
    padding-right: calc(40px + (100 - 40) * ((100vw - 992px) / (1920 - 992)));
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (max-width: 767.98px) {
    .newsletter-section .newsletter-content .newsletter-detail {
        padding:calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
        background-image: url(https://quickfixwork.com/public/build/assets/newsletter-1d2bcb9c.png);
        background-position: center;
        background-size: cover;
        background-size: unset;
        border-radius: 20px;
        background-repeat: no-repeat
    }
}

.newsletter-section .newsletter-content .newsletter-detail h2 {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5;
    font-size: calc(20px + .00625*(100vw - 320px));
    letter-spacing: .9px
}

.newsletter-section .newsletter-content .newsletter-detail p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 23px;
    color: #fff9;
    margin: 0;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.newsletter-section .newsletter-content .newsletter-detail .form-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: calc(14px + .00625*(100vw - 320px));
    margin: 0
}

@media (max-width: 575.98px) {
    .newsletter-section .newsletter-content .newsletter-detail .form-group {
        flex-direction:column
    }
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .form-control {
    border-radius: 6px;
    background-color: #fff;
    color: #808b97;
    padding: 14px 20px;
    border: none
}

@media (max-width: 575.98px) {
    .newsletter-section .newsletter-content .newsletter-detail .form-group .form-control {
        padding:10px 13px
    }
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn {
    border-radius: 6px;
    width: max-content;
    padding: 14px 20px
}

.newsletter-section .newsletter-content .newsletter-detail .form-group .btn span {
    padding: 0
}

@media (max-width: 575.98px) {
    .newsletter-section .newsletter-content .newsletter-detail .form-group .btn {
        padding:10px 16px;
        font-size: 14px
    }

    .newsletter-section .newsletter-content .newsletter-detail .form-group .btn span {
        display: none
    }
}

[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-color: #00162e;
    padding: calc(30px + .0125*(100vw - 320px)) 0
}

.footer-section .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 12px;
    margin-bottom: calc(14px + .01*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .footer-section .copyright {
        flex-direction:column;
        align-items: start
    }

    [dir=rtl] .footer-section .copyright {
        align-items: end
    }
}

@media (max-width: 575.98px) {
    .footer-section .copyright .footer-logo {
        width:100%
    }

    [dir=rtl] .footer-section .copyright .footer-logo {
        text-align: right
    }
}

.footer-section .copyright .footer-logo img {
    height: calc(30px + .00625*(100vw - 320px))
}

.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) {
    [dir=rtl] .footer-section .copyright p {
        text-align:right;
        width: 100%
    }
}

.footer-section .copyright .iconsax {
    padding-right: 5px;
    --Iconsax-Color: #fff;
    --Iconsax-Size: calc(18px + (22 - 18) * ((100vw - 320px) / (1200 - 320)))
}

.footer-section i {
    --Iconsax-Size: 22px;
    --Iconsax-Color: var(--theme-color)
}

.footer-section .heading-footer {
    font-weight: 400;
    line-height: 26px;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(16px + .0025*(100vw - 320px))
}

@media (max-width: 575.98px) {
    .footer-section .heading-footer {
        margin-bottom:6px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,.15);
        padding-bottom: 6px
    }
}

.footer-section .heading-footer .down-arrow {
    margin-left: auto;
    --Iconsax-Color: #fff;
    transition: transform .15s ease-in-out
}

[dir=rtl] .footer-section .heading-footer .down-arrow {
    margin-left: unset;
    margin-right: auto
}

.footer-section ul {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

[dir=rtl] .footer-section ul {
    margin-left: unset;
    margin-right: 30px
}

@media (max-width: 575.98px) {
    .footer-section ul {
        gap:6px
    }
}

.footer-section ul li {
    color: #ffffffb3;
    font-size: calc(16px + .00125*(100vw - 320px))
}

.footer-section ul li .nav-link {
    color: #ffffffb3;
    padding: 0;
    position: relative;
    transition: all .25s ease-in-out;
    box-shadow: none
}

.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 {
        left: -23px
    }

    [dir=rtl] .footer-section ul li .nav-link:hover:before {
        left: unset;
        right: -23px
    }
}

.footer-section ul li .nav-link:before {
    transition: all .25s ease-in-out;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
    left: 13px;
    width: 3px;
    height: 3px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden
}

[dir=rtl] .footer-section ul li .nav-link:before {
    left: unset;
    right: 13px
}

@media (max-width: 575.98px) {
    .footer-section ul li .nav-link:before {
        opacity:1;
        visibility: visible;
        left: -23px;
        transform: translateY(-50%) scale(1);
        background-color: #ffffff26;
        height: 2px;
        width: 12px
    }

    [dir=rtl] .footer-section ul li .nav-link:before {
        left: unset;
        right: -23px
    }
}

.footer-section .btn {
    border-radius: 13px;
    width: max-content;
    padding: 10px calc(40px + .00625*(100vw - 320px));
    margin-top: 40px;
    margin-left: 30px;
    font-size: calc(16px + .00125*(100vw - 320px))
}

[dir=rtl] .footer-section .btn {
    margin-left: unset;
    margin-right: 30px
}

@media (max-width: 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: pointer;
    transition: background-color .2s ease-in-out
}

.autocomplete-results .autocomplete-item:hover img {
    box-shadow: 3px 3px 9px #22222261
}

.autocomplete-results .autocomplete-item:hover h5 {
    color: var(--theme-color);
    margin-left: 10px
}

[dir=rtl] .autocomplete-results .autocomplete-item:hover h5 {
    margin-left: unset;
    margin-right: 10px
}

.autocomplete-results .autocomplete-item+.autocomplete-item {
    border-top: 1px solid rgba(221,221,221,.52);
    padding-top: 10px;
    margin-top: 10px
}

.autocomplete-results .autocomplete-item img {
    object-fit: cover;
    margin-right: 10px;
    width: 94px;
    height: 60px;
    border-radius: 5px;
    transition: all .15s ease-in-out
}

[dir=rtl] .autocomplete-results .autocomplete-item img {
    margin-right: unset;
    margin-left: 10px
}

.autocomplete-results .autocomplete-item h5 {
    font-size: 16px;
    font-weight: 500;
    transition: all .15s ease-in-out
}

.slick-list .slick-track {
    margin-inline:-15px}

@media (max-width: 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://quickfixwork.com/public/build/assets/preview-db216f8c.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://quickfixwork.com/public/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://quickfixwork.com/public/build/assets/next-284479b0.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://quickfixwork.com/public/build/assets/next-disable-0441b0d8.svg)!important
}

.about-us-section,.about-us-section-1 {
    position: relative
}

.about-us-section .about-us-content,.about-us-section-1 .about-us-content {
    margin-right: .3px
}

[dir=rtl] .about-us-section .about-us-content,[dir=rtl] .about-us-section-1 .about-us-content {
    margin-left: .3px;
    margin-right: unset
}

.about-us-section .about-us-content .card .card-body,.about-us-section-1 .about-us-content .card .card-body {
    padding: 35px 30px
}

.about-us-section .about-us-content .card .card-body .card-title,.about-us-section-1 .about-us-content .card .card-body .card-title {
    display: flex;
    align-items: center;
    gap: 10px
}

.about-us-section .about-us-content .card .card-body .card-title img,.about-us-section-1 .about-us-content .card .card-body .card-title img {
    width: 70px;
    height: 70px;
    border-radius: 100%
}

.about-us-section .about-us-content .card .card-body .card-title img.star,.about-us-section-1 .about-us-content .card .card-body .card-title img.star {
    width: 15px;
    height: 15px
}

.about-us-section .about-us-content .card .card-body .card-title img.quote,.about-us-section .about-us-content .card .card-body .card-title img.quote-active,.about-us-section-1 .about-us-content .card .card-body .card-title img.quote,.about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
    position: absolute;
    top: calc(20px + (30 - 20) * ((100vw - 1200px) / (1920 - 1200)));
    right: calc(20px + (30 - 20) * ((100vw - 1200px) / (1920 - 1200)));
    width: calc(30px + (50 - 30) * ((100vw - 1200px) / (1920 - 1200)));
    height: calc(30px + (50 - 30) * ((100vw - 1200px) / (1920 - 1200)));
    border-radius: 0
}

[dir=rtl] .about-us-section .about-us-content .card .card-body .card-title img.quote,[dir=rtl] .about-us-section .about-us-content .card .card-body .card-title img.quote-active,[dir=rtl] .about-us-section-1 .about-us-content .card .card-body .card-title img.quote,[dir=rtl] .about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
    left: calc(20px + (30 - 20) * ((100vw - 1200px) / (1920 - 1200)));
    right: unset
}

@media (max-width: 1199.98px) {
    .about-us-section .about-us-content .card .card-body .card-title img.quote,.about-us-section .about-us-content .card .card-body .card-title img.quote-active,.about-us-section-1 .about-us-content .card .card-body .card-title img.quote,.about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
        width:calc(30px + (50 - 30) * ((100vw - 575px) / (1920 - 575)));
        height: calc(30px + (50 - 30) * ((100vw - 575px) / (1920 - 575)))
    }
}

.about-us-section .about-us-content .card .card-body .card-title img.quote-active,.about-us-section-1 .about-us-content .card .card-body .card-title img.quote-active {
    display: none
}

.about-us-section .about-us-content .card .card-body .card-title img.quote,.about-us-section-1 .about-us-content .card .card-body .card-title img.quote {
    display: block
}

.about-us-section .about-us-content .card .card-body .card-detail,.about-us-section-1 .about-us-content .card .card-body .card-detail {
    padding: 24px 0 0;
    margin-top: 20px;
    border-top: 1px dashed rgba(0,22,46,.1)
}

.about-us-section .about-us-content .card .card-body .card-detail p,.about-us-section-1 .about-us-content .card .card-body .card-detail p {
    margin: 0;
    color: #808b97;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: all .6s ease
}

.about-us-section .about-us-content .swiper-wrapper,.about-us-section-1 .about-us-content .swiper-wrapper {
    height: 310px
}

.about-us-section .about-us-content .swiper-wrapper:has(.no-data-found),.about-us-section-1 .about-us-content .swiper-wrapper:has(.no-data-found) {
    height: unset
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide,.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide {
    transition: all .2s linear;
    transform: translateY(50px)
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active,.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active {
    transform: translateY(0)
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card,.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card {
    border-color: #5465ff4d;
    background-color: #5465ff1a
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote-active,.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote-active {
    display: block
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote,.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-title .quote {
    display: none
}

.about-us-section .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-detail p,.about-us-section-1 .about-us-content .swiper-wrapper .swiper-slide.swiper-slide-active .card .card-detail p {
    color: #00162e99
}

.about-us-section .about-us-content .image-1,.about-us-section-1 .about-us-content .image-1 {
    top: 140px;
    left: 20px;
    height: 16px;
    position: absolute;
    animation: mover 2s infinite alternate;
    animation-delay: 1s
}

[dir=rtl] .about-us-section .about-us-content .image-1,[dir=rtl] .about-us-section-1 .about-us-content .image-1 {
    left: unset;
    right: 20px
}

@media (max-width: 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 {
    left: 0;
    right: 0;
    margin: 0 auto;
    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(--theme-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: #808b97;
    font-weight: 500
}

.more-section .more-content p a,.feature-section .more-content p a {
    color: var(--theme-color)
}

.more-section .feature-content .feature-box,.feature-section .feature-content .feature-box {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    background-color: var(--theme-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto auto 12px
}

.more-section .feature-content .feature-box i,.feature-section .feature-content .feature-box i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #fff
}

.more-section .feature-content p,.feature-section .feature-content p {
    font-size: calc(16px + .00125*(100vw - 320px));
    margin: 4px auto auto;
    width: 90%;
    font-weight: 500;
    color: #00162e99
}

.more-section .feature-content .feature-list,.feature-section .feature-content .feature-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(8px + .005*(100vw - 320px));
    margin-top: 16px
}

.more-section .feature-content .feature-list .list-item,.feature-section .feature-content .feature-list .list-item {
    padding: 8px calc(8px + .0025*(100vw - 320px));
    border-radius: 6px;
    border: 1px solid rgba(0,22,46,.1);
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00162ecc
}

.more-section .feature-content .feature-list .list-item i,.feature-section .feature-content .feature-list .list-item i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #5465FF
}

.about-us .image-grp {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: calc(10px + .00625*(100vw - 320px))
}

.about-us .image-grp img {
    height: auto;
    width: calc(140px + .1*(100vw - 320px));
    border-radius: 12px
}

.about-us .image-grp img:nth-child(2n) {
    margin-top: 80px
}

.about-us .content-detail {
    color: #00162ecc
}

.about-us .content-detail p {
    font-size: calc(14px + .0025*(100vw - 320px));
    line-height: 1.5;
    margin-bottom: 20px
}

.about-us .content-detail .item-lists {
    list-style: none;
    margin: 0;
    gap: calc(12px + .005*(100vw - 320px))
}

[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: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    height: calc(30px + .01875*(100vw - 320px));
    width: calc(30px + .01875*(100vw - 320px));
    min-width: calc(30px + (35 - 30) * ((100vw - 320px) / (1920 - 320)));
    background-color: #5465ffcc
}

.about-us .content-detail .item-lists li .detail h4 {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 4px;
    color: #00162e
}

.about-us .content-detail .item-lists li .detail p {
    line-height: 1.5;
    font-size: calc(14px + .00125*(100vw - 320px));
    margin-bottom: 0;
    color: #808b97
}

.about-us-section-1 .title-1 {
    width: 100%
}

.about-us-section-1 .about-us-content .card {
    box-shadow: 0 0 8px #00162e26;
    border-radius: 4px
}

.about-us-section-1 .about-us-content .card .card-body {
    padding: 20px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    margin: 0;
    border: none;
    padding: 0;
    align-items: center
}

.about-us-section-1 .about-us-content .card .card-body .card-detail i {
    --Iconsax-Size: calc(20px + .0025*(100vw - 320px));
    --Iconsax-Color: #5465FF
}

.about-us-section-1 .about-us-content .card .card-body .card-detail .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%
}

.about-us-section-1 .about-us-content .card .card-body .card-detail .hr {
    background-color: #e5e8ea;
    height: 2px;
    width: 25px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail h3 {
    font-size: 16px;
    color: #808b97
}

.about-us-section-1 .about-us-content .card .card-body .card-detail .rate {
    justify-content: center;
    margin-top: 8px;
    gap: 8px
}

.about-us-section-1 .about-us-content .card .card-body .card-detail p {
    color: #00162ecc;
    overflow: unset;
    display: block;
    font-size: 17px
}

.about-us-section-1 .about-us-content .swiper {
    padding: 0 4px
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper {
    height: auto;
    padding: 5px 0
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper .swiper-slide {
    transform: unset;
    transition: none
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    transform: none
}

.about-us-section-1 .about-us-content .swiper .swiper-wrapper .swiper-slide.swiper-slide-active .card {
    border: none;
    background-color: unset
}

.our-work .our-work-content .work-box {
    padding: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320))) calc(10px + .00625*(100vw - 320px));
    border-radius: 6px;
    background-color: #f5f6f7;
    text-align: center
}

.our-work .our-work-content .work-box h3 {
    font-size: calc(20px + .005*(100vw - 320px));
    font-weight: 600;
    line-height: 1.2;
    color: var(--theme-color)
}

.our-work .our-work-content .work-box p {
    font-size: calc(14px + .00125*(100vw - 320px));
    text-align: center;
    display: inline-block;
    font-weight: 600;
    color: #00162e99
}

.log-in-section {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    height: 100vh
}

.log-in-section .login-content {
    height: 100%
}

.image-contain {
    background-color: var(--theme-color);
    padding: 50px;
    text-align: center;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.image-contain .logo {
    height: 50px;
    margin: 0 auto 30px;
    display: flex
}

.image-contain .auth-image {
    width: 40%
}

.image-contain .auth-content {
    color: #fff;
    margin-top: 50px
}

.image-contain .auth-content h2 {
    text-transform: uppercase;
    line-height: 41px;
    font-weight: 700
}

.image-contain .auth-content p {
    font-size: 16px;
    line-height: 20px
}

.image-contain .auth-content .app-install {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.image-contain .auth-content .app-install img {
    height: 50px
}

.login-main {
    background-color: #f5f6f7;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-main .language-dropdown {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 30px;
    border: 1px solid rgba(0,22,46,.1);
    background-color: #fff;
    margin-bottom: 30px;
    width: max-content;
    margin-left: auto
}

[dir=rtl] .login-main .language-dropdown {
    right: unset;
    left: 40px
}

.login-main .language-dropdown img {
    width: 24px!important;
    height: 24px!important;
    border-radius: 100%
}

.login-main .language-dropdown i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #00162E
}

.login-main .language-dropdown .language-btn {
    background: transparent;
    color: #00162e;
    border: none;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px
}

.login-main .language-dropdown .language-btn span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 16px
}

.login-main .language-dropdown .language-btn span a {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00162e
}

.login-main .language-dropdown .onhover-show-div {
    min-width: 120px;
    transition: all .3s linear;
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(0,22,46,.1);
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0,-5%,0);
    top: 37px;
    right: 0;
    padding: 15px;
    border-radius: 4px
}

[dir=rtl] .login-main .language-dropdown .onhover-show-div {
    left: 0;
    right: unset
}

.login-main .language-dropdown .onhover-show-div .lang {
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    border: none;
    color: #00162e;
    background-color: transparent;
    gap: 8px;
    font-size: 13px;
    padding: 0
}

.login-main .language-dropdown .onhover-show-div .lang:hover {
    color: var(--theme-color);
    transform: translate(5px)
}

[dir=rtl] .login-main .language-dropdown .onhover-show-div .lang:hover {
    transform: translate(-5px)
}

.login-main .language-dropdown .onhover-show-div .lang+li {
    margin-top: 8px
}

.login-main .language-dropdown .onhover-show-div a {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00162e
}

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

@media (max-width: 425px) {
    .login-main .language-dropdown {
        right:20px
    }

    [dir=rtl] .login-main .language-dropdown {
        left: 20px;
        right: unset
    }
}

.login-main .login-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fff;
    width: 530px;
    border-radius: 15px;
    margin: 20px auto;
    padding-bottom: 40px
}

.login-main .login-card .login-title {
    width: 100%;
    border-bottom: 1px dashed #E5E8EA;
    padding: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320)));
    text-align: center
}

.login-main .login-card .login-title h2 {
    font-weight: 700;
    line-height: 33px
}

.login-main .login-card .login-title p {
    color: #808b97;
    padding-top: 6px;
    font-size: 16px;
    margin: 0
}

.login-main .login-card .login-detail {
    background-color: #f5f6f7;
    border-radius: 10px;
    width: calc(100% - 80px);
    margin: 30px 0 0;
    padding: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .login-detail .form-group {
    position: relative;
    margin-bottom: calc(12px + .0075*(100vw - 320px))
}

.login-main .login-card .login-detail .form-group i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #808B97;
    position: absolute;
    top: calc(42px + (45 - 42) * ((100vw - 320px) / (1920 - 320)));
    left: 15px
}

[dir=rtl] .login-main .login-card .login-detail .form-group i {
    left: unset;
    right: 15px
}

.login-main .login-card .login-detail .form-group .toggle-password {
    position: absolute;
    top: 0;
    right: 45px;
    left: unset;
    cursor: pointer
}

[dir=rtl] .login-main .login-card .login-detail .form-group .toggle-password {
    left: 45px;
    right: unset
}

.login-main .login-card .login-detail .form-group .toggle-password i {
    position: absolute
}

.login-main .login-card .login-detail .form-group .toggle-password .eye-slash {
    display: none
}

.login-main .login-card .login-detail .form-group .toggle-password.eye i.eye {
    display: block
}

.login-main .login-card .login-detail .form-group .toggle-password.eye i.eye-slash {
    display: none
}

.login-main .login-card .login-detail .form-group .toggle-password.eye-slash i.eye-slash {
    display: block
}

.login-main .login-card .login-detail .form-group .toggle-password.eye-slash i.eye {
    display: none
}

.login-main .login-card .login-detail .form-group label {
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500;
    line-height: 23px;
    margin-bottom: 8px;
    position: relative
}

[dir=rtl] .login-main .login-card .login-detail .form-group label {
    text-align: right
}

.login-main .login-card .login-detail .form-group label.error {
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: 400;
    font-size: 13px;
    opacity: .8;
    color: #ff4b4b!important
}

.login-main .login-card .login-detail .form-group label.error:before {
    display: none
}

.login-main .login-card .login-detail .form-group label:before {
    content: "";
    position: absolute;
    background-color: var(--theme-color);
    height: 30px;
    width: 4px;
    top: -3px;
    left: -30px;
    border-radius: 4px
}

[dir=rtl] .login-main .login-card .login-detail .form-group label:before {
    left: unset;
    right: -30px
}

@media (max-width: 1199px) {
    .login-main .login-card .login-detail .form-group label:before {
        left:-20px
    }

    [dir=rtl] .login-main .login-card .login-detail .form-group label:before {
        left: unset;
        right: -20px
    }
}

.login-main .login-card .login-detail .form-group .form-control {
    border-radius: 8px;
    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) 45px;
    background-color: #fff;
    color: #00162ecc!important;
    border: none
}

[dir=rtl] .login-main .login-card .login-detail .form-group .form-control {
    padding: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) 45px calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .login-detail .form-group .form-control:focus {
    box-shadow: none
}

.login-main .login-card .login-detail .forgot-pass {
    margin-top: 12px;
    text-align: end
}

[dir=rtl] .login-main .login-card .login-detail .forgot-pass {
    text-align: start
}

.login-main .login-card .login-detail .forgot-pass a {
    font-size: 16px;
    line-height: 20px
}

.login-main .login-card .login-detail .btn {
    margin-top: 40px;
    border-radius: 8px;
    width: 100%;
    justify-content: center;
    font-size: 18px
}

.login-main .login-card .login-detail .btn:focus {
    box-shadow: none
}

.login-main .login-card .login-detail .not-member {
    text-align: center;
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 400;
    color: #808b97;
    line-height: 20px;
    padding-top: 10px
}

.login-main .login-card .login-detail .not-member small {
    color: var(--theme-color);
    font-weight: 500
}

.login-main .login-card .login-detail .phone-details .form-group {
    position: relative
}

.login-main .login-card .login-detail .phone-details .form-group label.error {
    position: absolute!important;
    bottom: -30px;
    left: 0
}

.login-main .login-card .other-options {
    width: 100%;
    padding: calc(20px + .00625*(100vw - 320px)) 0 0
}

.login-main .login-card .options {
    position: relative;
    text-align: center;
    width: max-content;
    margin: 0 auto;
    color: #808b97;
    font-size: 18px;
    display: flex
}

.login-main .login-card .options:before,.login-main .login-card .options:after {
    content: "";
    position: absolute;
    background-color: #808b97;
    width: 22px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%)
}

.login-main .login-card .options:before {
    left: -30px
}

[dir=rtl] .login-main .login-card .options:before {
    left: unset;
    right: -30px
}

.login-main .login-card .options:after {
    right: -30px
}

[dir=rtl] .login-main .login-card .options:after {
    right: unset;
    left: -30px
}

.login-main .login-card .social-media {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)))
}

.login-main .login-card .social-media .social-icon {
    background-color: #f5f6f7;
    border-radius: 100%;
    border: 1px solid rgba(0,22,46,.1);
    height: calc(50px + .0125*(100vw - 320px));
    width: calc(50px + .0125*(100vw - 320px));
    display: flex;
    align-items: center;
    justify-content: center
}

.login-main .login-card .social-media .social-icon img {
    width: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));
    height: calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 575.98px) {
    .login-main .login-card {
        width:100%
    }
}

.terms p {
    font-size: calc(14px + .00125*(100vw - 320px));
    margin: 0;
    color: #808b97
}

.terms {
    position: relative;
    padding-bottom: 25px
}

.terms label {
    position: absolute;
    bottom: -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: 50px;
    height: 50px;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    text-align: center
}

.otp-field label.error {
    position: absolute!important;
    bottom: -30px!important;
    left: 0
}

.service-list-section .row [class*=col-]:has(.no-cart-found):first-child {
    width: 100%
}

.blog-section .detail-content {
    margin-top: calc(14px + .00625*(100vw - 320px))
}

.blog-section .detail-content .title {
    padding: 0;
    margin-bottom: 5px
}

.blog-section .detail-content .title h4 {
    font-size: calc(22px + .005*(100vw - 320px));
    font-weight: 700;
    line-height: 1.3;
    color: #00162e;
    white-space: wrap
}

.blog-section .detail-content .detail-sec {
    margin-top: calc(10px + .00625*(100vw - 320px))
}

.blog-section .blog-content:last-child {
    margin-bottom: 0
}

.blog-section .blog-content .blog-main {
    background-color: #f5f6f7;
    border-radius: 15px
}

.blog-section .blog-content .blog-main+.blog-main:nth-child(3n+4) {
    border-left: none
}

[dir=rtl] .blog-section .blog-content .blog-main+.blog-main:nth-child(3n+4) {
    border-right: none;
    border-left: unset
}

@media (max-width: 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 #E5E8EA!important
    }

    [dir=rtl] .blog-section .blog-content .blog-main:nth-child(2n) {
        border-right: 1px solid #E5E8EA!important;
        border-left: unset!important
    }
}

@media (max-width: 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-img {
    transition: .5s ease
}

.blog-section .blog-content .card .card-body {
    padding: calc(10px + .005*(100vw - 320px)) calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)));
    color: #808b97
}

.blog-section .blog-content .card .card-body h4 {
    font-size: calc(18px + .0025*(100vw - 320px));
    font-weight: 500;
    line-height: 1.2;
    color: #00162e;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.blog-section .blog-content .card .card-body h4 a {
    color: #00162e
}

.blog-section .blog-content .card .card-body h4:hover a {
    color: var(--theme-color)
}

.blog-section .blog-content .card .card-body i {
    --Iconsax-Size: 20px;
    --Iconsax-Color: #808B97
}

.blog-section .blog-content .card .card-body .blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: calc(10px + .00625*(100vw - 320px));
    font-size: 16px;
    padding-top: calc(10px + .00125*(100vw - 320px));
    border-top: 1px solid #E5E8EA
}

.blog-section .blog-content:has(.no-data-found) {
    padding: 0;
    background-color: transparent
}

.blog-section .blog-detail {
    line-height: 1;
    color: #808b97;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 400;
    row-gap: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    margin-top: 5px;
    padding: 0
}

.blog-section .blog-detail li {
    font-size: calc(14px + .00125*(100vw - 320px));
    position: relative;
    font-weight: 400;
    line-height: 1.2
}

.blog-section .blog-detail li+li {
    padding-left: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    margin-left: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)))
}

[dir=rtl] .blog-section .blog-detail li+li {
    padding-left: unset;
    padding-right: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
    margin-left: unset;
    margin-right: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)))
}

.blog-section .blog-detail li+li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: calc(100% + calc(1px + (4 - 1) * ((100vw - 320px) / (1920 - 320))));
    border-left: 1px solid #E5E8EA
}

[dir=rtl] .blog-section .blog-detail li+li:before {
    left: unset;
    right: 0;
    border-right: 1px solid #E5E8EA;
    border-left: none
}

h4 {
    font-size: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 28px;
    color: #00162e;
    white-space: wrap
}

.detail-sec {
    border-radius: 10px;
    background-color: transparent!important
}

.detail-sec .details-title {
    margin-bottom: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
    padding-bottom: calc(8px + (15 - 8) * ((100vw - 320px) / (1920 - 320)));
    border-bottom: 1px dashed #E5E8EA
}

.detail-sec .details-title h3 {
    font-size: calc(20px + .00125*(100vw - 320px));
    font-weight: 600
}

.detail-sec .details-title p {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    margin: 5px 0 0;
    line-height: 1.4
}

.detail-sec .overview-list {
    padding: 0;
    font-size: 16px;
    gap: 0
}

.detail-sec .overview-list+.overview-list {
    margin-top: 10px
}

.detail-sec .overview-list h3 {
    font-size: 18px;
    font-weight: 600;
    color: #00162e
}

.detail-sec .overview-list h3~p {
    margin-top: 5px
}

.detail-sec .overview-list p {
    line-height: 1.5;
    margin: 0 0 23px;
    position: relative;
    padding-left: 21px
}

.detail-sec .overview-list p~p {
    margin-bottom: 10px
}

.detail-sec .overview-list p:last-child {
    margin: 0
}

.detail-sec .overview-list p:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #808b97
}

[dir=rtl] .detail-sec .overview-list p:before {
    left: unset;
    right: 4px
}

.custom-row-col:has(.no-data-found) {
    width: 100%;
    margin-inline:0}

.custom-row-col:has(.no-data-found)>.col-12 {
    width: 100%;
    padding-inline:0}

.privacy-content:has(.no-data-found),.terms-content:has(.no-data-found) {
    width: 100%;
    margin-inline:0}

.privacy-content:has(.no-data-found)>.col-xxl-8.col-xl-9.col-lg-10,.terms-content:has(.no-data-found)>.col-xxl-8.col-xl-9.col-lg-10 {
    width: 100%;
    margin-inline:0}

.category-img {
    border-radius: calc(6px + .0025*(100vw - 320px));
    position: relative;
    overflow: hidden
}

.category-img:hover:after {
    animation: shine 1.15s
}

.category-span {
    text-align: center;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    margin-top: calc(8px + .005*(100vw - 320px));
    font-size: calc(14px + .00375*(100vw - 320px));
    font-weight: 500;
    color: #00162e
}

.accordion .accordion-item {
    border: none
}

.accordion .accordion-item .accordion-button {
    background-color: transparent;
    width: max-content;
    padding: 0;
    border: none;
    box-shadow: none
}

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

.accordion.categories-accordion .accordion-item .accordion-header .title {
    width: 100%;
    cursor: pointer
}

.contact-section .heading-p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.5;
    margin: 20px 0 calc(20px + .00625*(100vw - 320px));
    color: #00162e80
}

.contact-section .contact-content .contact-us-form {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E5E8EA;
    background-color: #fff
}

.contact-section .contact-content .contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.contact-section .contact-content .contact-info li {
    border-radius: 6px;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: start;
    gap: 8px;
    color: #808b97;
    width: auto
}

.contact-section .contact-content .contact-info li i {
    --Iconsax-Size: calc(18px + .00125*(100vw - 320px));
    --Iconsax-Color: #00162E
}

.contact-section .contact-content .contact-info li .detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0
}

.contact-section .contact-content .contact-info li .detail h5 {
    color: #00162e;
    font-weight: 500
}

.contact-section .contact-content .contact-info li .detail p {
    color: #00162e80;
    line-height: 1.5;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)))
}

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

.map-section .map {
    width: 100%;
    height: calc(200px + .125*(100vw - 320px))
}

.map-section .map iframe {
    width: 100%;
    height: 100%
}

.list-items {
    padding-left: 1.25rem;
    list-style-type: circle
}

.list-items .list-item {
    margin-bottom: 20px;
    display: list-item
}

.list-items .list-item h6 {
    font-size: 18px;
    margin-bottom: .75rem;
    font-weight: 500;
    line-height: 1.5;
    color: #00162e
}

.list-items .list-item p {
    font-size: 17px!important;
    color: #00162eb3;
    line-height: 1.3!important;
    margin-bottom: 16px
}

.list-items li {
    margin-bottom: 12px
}

.expert-section {
    position: relative;
    background-image: url(https://quickfixwork.com/public/build/assets/bg-3bee563f.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0
}

.expert-content .dark-card .card-title a {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.expert-content .dark-card .card-title a:hover {
    color: var(--theme-color)
}

.expert-content .dark-card,.expert-content .gray-card {
    overflow: visible;
    margin-top: 60px
}

.expert-content .dark-card .dark-card-img,.expert-content .dark-card .gray-card-img,.expert-content .gray-card .dark-card-img,.expert-content .gray-card .gray-card-img {
    margin-bottom: 15px;
    text-align: center
}

.expert-content .dark-card .dark-card-img .profile-pic,.expert-content .dark-card .gray-card-img .profile-pic,.expert-content .gray-card .dark-card-img .profile-pic,.expert-content .gray-card .gray-card-img .profile-pic {
    margin-top: -60px;
    border-radius: 100%;
    width: 130px;
    height: 130px;
    object-fit: cover;
    border: 7px solid rgba(255,255,255,.06)
}

@media (max-width: 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: #808b97
}

.expert-content .gray-card .card-body .card-title {
    color: #00162e
}

.expert-content .gray-card .card-body .card-title a {
    color: #00162e;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.expert-content .gray-card .card-body .card-title a:hover {
    color: var(--theme-color)
}

.expert-content .gray-card .card-body .card-detail {
    border-top: 2px dashed #E5E8EA
}

.expert-content {
    height: 100%
}

.expert-content .gray-card:hover {
    background-color: #e5e8ea91
}

.reviews-main {
    background-color: #f5f6f7;
    border-radius: 10px;
    padding: 20px
}

.reviews-main h6 {
    font-weight: 500;
    line-height: 1.5
}

.reviews-main .overview-list li {
    color: #808b97;
    font-size: 14px
}

.location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.location i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #808b97
}

.location h5 {
    line-height: 20px;
    color: #808b97
}

.filter .card {
    background-color: #f5f6f7
}

.filter .card .card-header {
    padding: 18px 20px;
    background-color: transparent;
    border-bottom: 1px solid #E5E8EA;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.filter .card .card-header h3 {
    font-weight: 700
}

.filter .card .card-header a {
    cursor: pointer
}

.filter .card .card-body {
    overflow: auto
}

.filter .card .card-body .form-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.filter .provider-card {
    background-color: #f5f6f7;
    border-radius: 10px
}

.filter .provider-card .like-icon {
    top: 30px;
    right: 30px;
    left: unset
}

[dir=rtl] .filter .provider-card .like-icon {
    left: 30px;
    right: unset
}

.filter .provider-card .provider-detail .provider-content {
    border: none
}

.filter .provider-card .provider-detail .provider-content .profile-bg {
    background-color: #e5e8ea
}

.filter .provider-card .provider-detail .provider-content .profile .img {
    border-radius: 6px;
    width: 110px;
    height: 110px
}

.filter .provider-card .provider-detail .provider-content .profile .initial-letter {
    height: 120px;
    width: 120px;
    background-color: #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 500;
    line-height: 1
}

.filter .provider-card .provider-detail .provider-content i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #808b97
}

.filter .provider-card .provider-detail .provider-content .delivered {
    background-color: #fff;
    padding: 13px 16px;
    border-radius: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 10px
}

.filter .provider-card .provider-detail .provider-content .delivered span {
    font-size: 16px
}

.filter .provider-card .provider-detail .provider-content .delivered small {
    font-size: 18px;
    font-weight: 700;
    color: var(--theme-color)
}

.filter .provider-card .provider-detail .provider-content .profile-detail p {
    color: #00162e;
    text-align: left
}

[dir=rtl] .filter .provider-card .provider-detail .provider-content .profile-detail p {
    text-align: right
}

.filter .provider-card .provider-detail .provider-content .profile-info {
    background-color: #fff;
    padding: 16px
}

.filter .provider-card .provider-detail .provider-content .profile-info p {
    color: #00162e;
    text-align: start
}

[dir=rtl] .filter .provider-card .provider-detail .provider-content .profile-info p {
    text-align: end
}

.filter .provider-card .provider-detail .provider-content .profile-info label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px
}

.filter .provider-card .provider-detail .provider-content .profile-info i {
    --Iconsax-Size: 18px
}

.filter .provider-card .provider-detail .provider-content .profile-info .btn-solid-gray {
    font-size: 14px;
    border-radius: 6px;
    padding: 6px 13px
}

.provider-detail .provider-content {
    border-radius: 12px;
    border: 1px solid #E5E8EA;
    padding: 20px
}

.provider-detail .provider-content .profile-bg {
    background-color: #f5f6f7;
    height: 70px;
    border-radius: 12px
}

.provider-detail .provider-content i {
    --Iconsax-Size: 16px;
    --Iconsax-Color: #ffc412
}

.provider-detail .provider-content .profile {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -45px
}

.provider-detail .provider-content .profile .img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    border: 4px solid #ffffff
}

.provider-detail .provider-content .profile .provider-profile-img {
    border-radius: 100%;
    width: 120px;
    height: 120px
}

.provider-detail .provider-content .profile .rate {
    font-size: 16px
}

.provider-detail .provider-content .profile-detail {
    margin-top: 10px
}

.provider-detail .provider-content .profile-detail ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px
}

.provider-detail .provider-content .profile-detail ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: calc(16px + .00125*(100vw - 320px));
    border-bottom: 1px solid #E5E8EA;
    padding: 10px 0
}

.provider-detail .provider-content .profile-detail ul li:last-child {
    border: none
}

@media (max-width: 575.98px) {
    .provider-detail .provider-content .profile-detail ul li {
        flex-direction:column;
        align-items: start;
        gap: 0
    }
}

.provider-detail .provider-content .badge {
    padding: calc(10px + .00625*(100vw - 320px));
    border-radius: 10px;
    width: 100%;
    text-align: start;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px
}

[dir=rtl] .provider-detail .provider-content .badge {
    text-align: end
}

.provider-detail .provider-content p {
    font-size: 16px;
    color: #808b97;
    line-height: 26px;
    text-align: center
}

.provider-detail .provider-content .badge-img {
    width: calc(25px + .00625*(100vw - 320px));
    height: calc(25px + .00625*(100vw - 320px))
}

.image-grp {
    position: relative;
    width: 90%;
    margin-inline:auto}

@media (max-width: 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: 30px;
    display: flex;
    align-items: center;
    gap: 16px
}

.app-install img {
    height: 42px
}

@media (max-width: 991.98px) {
    .app-install {
        gap:10px;
        margin-top: 30px
    }

    .app-install img {
        height: calc(45px + (60 - 45) * ((100vw - 320px) / (1920 - 320)))
    }
}

.application-section .title {
    margin-bottom: 22px
}

.application-section .title h2 {
    font-weight: 700;
    line-height: 1.4
}

.content-detail {
    color: #808b97
}

.content-detail p {
    font-size: calc(16px + .00125*(100vw - 320px));
    line-height: 1.5
}

.content-detail .item-lists {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 30px
}

[dir=rtl] .content-detail .item-lists {
    margin-left: 0;
    margin-right: 30px
}

@media (max-width: 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: #808b97;
    top: 12px;
    left: -16px;
    border-radius: 100%
}

[dir=rtl] .content-detail .item-lists li:before {
    left: unset;
    right: -16px
}

.chart-img {
    position: absolute;
    bottom: 55px;
    left: 120px;
    border-radius: 13px;
    animation: mover 2s infinite alternate;
    animation-delay: 1s
}

[dir=rtl] .chart-img {
    left: unset;
    right: 120px
}

@media (min-width: 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://quickfixwork.com/public/build/assets/bg-f98c8713.png);
    background-color: #f5f6f7;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0
}

.service-provider-section .item-lists {
    margin: 0!important
}

.service-provider-section .item-lists .item-list:before {
    display: none
}

.service-provider-section .item-lists .item-list i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #5465ff
}

.service-provider-section .section-wrap .image-1 {
    bottom: 50px;
    right: 80px
}

[dir=rtl] .service-provider-section .section-wrap .image-1 {
    right: unset;
    left: 80px
}

.service-provider-section .section-wrap .image-2 {
    top: 60px;
    left: 70px
}

[dir=rtl] .service-provider-section .section-wrap .image-2 {
    left: unset;
    right: 70px
}

.service-provider-section .btn {
    border-radius: 13px;
    margin-top: 30px;
    width: max-content
}

@media (max-width: 767.98px) {
    .service-provider-section .btn {
        margin-top:20px
    }
}

.service-package-section .service-package-content .service-detail {
    color: #fff;
    margin: calc(18px + .0075*(100vw - 320px));
    width: auto
}

.service-package-section .service-package-content .service-detail .service-icon {
    border-radius: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
    background-color: #e5e8ea;
    padding: calc(10px + .00125*(100vw - 320px));
    width: calc(54px + .00375*(100vw - 320px));
    height: calc(54px + .00375*(100vw - 320px));
    margin-bottom: calc(13px + (20 - 13) * ((100vw - 320px) / (1920 - 320)));
    transition: all .3s ease-in-out
}

.service-package-section .service-package-content .service-detail h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
}

.service-package-section .service-package-content .service-detail .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: calc(3px + (6 - 3) * ((100vw - 320px) / (1920 - 320)))
}

.service-package-section .service-package-content .service-detail .price span {
    font-size: calc(22px + .0025*(100vw - 320px));
    font-weight: 700;
    line-height: 1.3
}

.service-package-section .service-package-content .service-detail .price i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: white;
    transform: translate(0);
    transition: all .2s ease
}

.service-package-section .service-package-content .service-detail .price:hover i {
    transform: translate(5px);
    transition: all .2s ease
}

.service-package-section .service-package-content .service-bg {
    width: 100%;
    border-radius: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
    height: 100%;
    position: relative;
    overflow: hidden
}

.service-package-section .service-package-content .service-bg .service-1 {
    position: absolute;
    bottom: -90px;
    right: -160px;
    height: 250px
}

.service-package-section .service-package-content .service-bg .service-2 {
    position: absolute;
    top: -120px;
    right: -90px;
    height: 250px;
    transform: rotate(230deg)
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-2 {
    right: unset;
    left: -90px
}

.service-package-section .service-package-content .service-bg .service-3 {
    position: absolute;
    bottom: -100px;
    left: -70px;
    height: 250px;
    transform: rotate(49deg)
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-3 {
    left: unset;
    right: -70px
}

.service-package-section .service-package-content .service-bg .service-4 {
    position: absolute;
    top: -92px;
    left: -80px;
    height: 250px;
    transform: rotate(190deg)
}

[dir=rtl] .service-package-section .service-package-content .service-bg .service-4 {
    left: unset;
    right: -80px
}

.service-package-section .service-package-content .service-bg:hover .service-icon {
    background-color: #fff
}

.service-package-section .service-package-content .service-bg:hover .service-icon img {
    animation: tada 1.5s ease infinite
}

.service-package-section .service-package-content .service-bg-primary {
    background-color: var(--theme-color)
}

.service-package-section .service-package-content .service-bg-secondary {
    background-color: #ff7456
}

.service-package-section .service-package-content .service-bg-info {
    background-color: #48bffd
}

.service-package-section .service-package-content .service-bg-success {
    background-color: #27af4d
}

.service-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(3px + (8 - 3) * ((100vw - 320px) / (1920 - 320)))
}

@media (max-width: 480px) {
    .service-title {
        flex-direction:column;
        align-items: start
    }
}

.service-title h4 a {
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: #00162e;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.service-title span {
    font-size: 14px;
    line-height: 20px;
    color: #808b97
}

.service-title small {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px
}

.service-detail ul {
    display: flex;
    align-items: start
}

.service-detail ul li+li {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #E5E8EA
}

[dir=rtl] .service-detail ul li+li {
    margin-left: unset;
    margin-right: 10px;
    padding-left: unset;
    padding-right: 10px;
    border-right: 1px solid #E5E8EA;
    border-left: unset
}

.service-detail p {
    font-size: 14px;
    color: #808b97;
    position: relative;
    padding: 0 0 0 22px;
    margin: 0;
    margin-top: calc(8px + .0025*(100vw - 320px));
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0
}

.time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #27af4d;
    font-size: 14px
}

.time i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #27AF4D
}

.time span {
    white-space: nowrap;
    font-weight: 500
}

.date-time li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap
}

.date-time li span {
    color: #808b97;
    font-size: 16px
}

.date-time li small {
    font-weight: 500;
    color: #00162e;
    font-size: 16px
}

.service-list-section .service-list-content .card .card-footer {
    position: relative;
    padding-top: 16px!important
}

.service-list-section .service-list-content .card .card-footer:before {
    content: "";
    position: absolute;
    width: calc(100% - 32px);
    height: 1px;
    border-top: 1px dashed #E5E8EA;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.service-list-section .service-list-content .card .card-footer:after {
    content: "";
    position: absolute;
    right: 14px;
    top: -3px;
    border-bottom: 2px solid #E5E8EA;
    border-right: 2px solid #E5E8EA;
    width: 6px;
    height: 6px;
    transform: rotate(312deg)
}

[dir=rtl] .service-list-section .service-list-content .card .card-footer:after {
    right: unset;
    left: 14px;
    transform: rotate(128deg)
}

.service-list-section .service-list-content .card .card-footer .footer-detail {
    display: flex;
    align-items: center;
    gap: 8px
}

.service-list-section .service-list-content .card .card-footer .footer-detail img {
    width: 45px;
    height: 45px;
    border-radius: 100%
}

.service-list-section .service-list-content .card .card-footer .footer-detail img.star {
    width: 16px;
    height: 16px
}

.service-list-section .service-list-content .card .card-footer .footer-detail p {
    margin: 0 0 6px;
    font-weight: 500;
    color: #00162e;
    font-size: calc(16px + .00125*(100vw - 320px));
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis
}

.service-list-section .service-list-content .card .card-footer .footer-detail i {
    --Iconsax-Size: 18px;
    --Iconsax-Color: #FFC412
}

.service-list-section .service-list-content .card .card-footer a {
    display: flex;
    align-items: center;
    gap: 2px
}

.service-list-section .service-list-content .card .card-footer a:hover i {
    --Iconsax-Color: white;
    transition: all .5s ease
}

.service-list-section .service-list-content .card .card-footer a.btn {
    width: max-content
}

.service-list-section .service-list-content .card .card-footer a.btn.btn-outline {
    color: var(--theme-color);
    font-size: 18px;
    line-height: 1;
    transition: all .5s ease
}

.service-list-section .service-list-content .card .card-footer a.btn.btn-outline:hover {
    background-color: var(--theme-color);
    color: #fff
}

@media (max-width: 1460px) {
    .service-list-section .service-list-content .card .card-footer a.btn.btn-outline {
        padding:10px
    }
}

@media (max-width: 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(16px + .00125*(100vw - 320px));
    padding: 12px calc(12px + .0025*(100vw - 320px));
    font-weight: 500;
    border-radius: calc(4px + .00125*(100vw - 320px));
    line-height: 1
}

.service-list-section .service-list-content .service-detail-slider .service-img {
    border-radius: 15px
}

.service-list-section .service-list-content .service-detail p {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding-left: 0
}

[dir=rtl] .service-list-section .service-list-content .service-detail p {
    padding-right: 0;
    padding-left: unset
}

.service-list-section .service-list-content .service-detail p:before {
    content: none
}

@media (max-width: 767.98px) {
    .service-list-section .service-list-content .select-dropdown .form-group {
        width:100%
    }
}

.detail-content {
    margin-top: 24px
}

.detail-content .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: none;
    margin: 0;
    padding-bottom: 4px
}

.detail-content .title .amount-value {
    line-height: 1
}

.detail-content .title:before {
    display: none
}

.detail-content .title h3 {
    font-size: calc(20px + .0025*(100vw - 320px));
    font-weight: 500
}

@media (max-width: 575.98px) {
    .detail-content .title {
        flex-direction:column;
        align-items: start
    }
}

.detail-content p {
    color: #808b97;
    font-size: 18px;
    margin: 10px 0 20px;
    line-height: 1.5
}

.detail-content label {
    font-size: 16px;
    margin-bottom: 4px
}

.detail-content .lists {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px
}

.detail-content .detail-sec {
    background-color: #f5f6f7;
    border-radius: 10px
}

.detail-content .detail-sec .overview-list {
    color: #808b97
}

.detail-content.service-details-content h3 {
    font-weight: 600;
    font-size: 20px
}

.detail-content.service-details-content ul,.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: #808b97;
    display: list-item;
    list-style-type: decimal
}

.detail-content.service-details-content ul li::marker,.detail-content.service-details-content ol li::marker {
    color: #00162e;
    font-weight: 500
}

.detail-content.service-details-content ul li strong,.detail-content.service-details-content ol li strong {
    color: #00162e
}

.detail-content.package-detail-content p {
    font-size: calc(14px + .0025*(100vw - 320px))
}

.detail-content.package-detail-content .detail-sec .service-item .detail .service-title h4 {
    font-size: calc(18px + .0025*(100vw - 320px))
}

.service-item {
    gap: 15px;
    display: flex;
    align-items: start;
    border-bottom: 1px solid #E5E8EA
}

.service-item:first-child {
    padding-top: 0
}

.service-item:last-child {
    border: none;
    padding-bottom: 0
}

.service-item img {
    width: calc(80px + .025*(100vw - 320px));
    height: calc(80px + .025*(100vw - 320px));
    object-fit: cover
}

.amount-value {
    font-weight: 700;
    font-size: 22px;
    line-height: 40px
}

.amount {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E5E8EA
}

.amount-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #5465ff1a;
    color: var(--theme-color);
    padding: 16px
}

.amount-header span {
    font-size: 20px
}

.amount-header small {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2
}

.amount-detail {
    padding: 16px
}

.amount-detail i {
    --Iconsax-Size: 24px;
    --Iconsax-Color: #00162E;
    border-right: 1px solid #E5E8EA;
    padding-right: 10px
}

[dir=rtl] .amount-detail i {
    border-left: 1px solid #E5E8EA;
    border-right: unset;
    padding-left: 10px;
    padding-right: unset
}

.amount-detail ul {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.amount-detail ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #00162e
}

.service-img .favourite {
    top: calc(10px + .0125*(100vw - 320px));
    right: calc(10px + .0125*(100vw - 320px));
    left: unset
}

[dir=rtl] .service-img .favourite {
    left: calc(10px + .0125*(100vw - 320px));
    right: unset
}

.favourite {
    width: max-content;
    border-radius: 100%;
    background-color: #fff;
    padding: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer
}

[dir=rtl] .favourite {
    left: unset;
    right: 20px
}

.favourite .nolike {
    --Iconsax-Size: calc(16px + .0025*(100vw - 320px));
    --Iconsax-Color: #FF4B4B;
    display: block
}

.favourite .nolike.hide {
    display: none
}

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

.favourite .like.show {
    display: block
}

.service-section.border-line {
    padding-bottom: 25px;
    border-bottom: 1px solid #E5E8EA
}

.service-section .service-right-box {
    margin: 0;
    position: sticky;
    top: 110px
}

.service-section .label-title {
    font-weight: 500;
    color: #00162e
}

.servicemen-lists {
    background-color: #5465ff1a;
    width: 100%;
    padding: calc(15px + .00375*(100vw - 320px));
    border: 1px dashed var(--theme-color);
    color: var(--theme-color);
    border-radius: calc(7px + (10 - 7) * ((100vw - 320px) / (1920 - 320)));
    font-size: calc(16px + .00125*(100vw - 320px));
    font-weight: 500
}

.no-cart-found {
    margin-bottom: 72px
}

.no-cart-found h3 {
    font-size: 22px
}

.no-cart-found p {
    margin-top: 5px;
    line-height: 1.5;
    font-size: 16px;
    color: #808b97
}

.no-cart-found.no-cart-data {
    margin-block:calc(20px + .0125*(100vw - 320px))}

.service-package-section .date-time-location-btn {
    color: var(--theme-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    padding: 5px 10px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 6px
}

.service-package-section .date-time-location-btn .iconsax {
    --Iconsax-Color: var(--theme-color);
    --Iconsax-Size: 18px
}

.service-package-section .service-item {
    width: 100%;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #E5E8EA;
    padding: calc(14px + .00375*(100vw - 320px));
    align-items: flex-start
}

[dir=rtl] .service-package-section .service-item {
    padding-right: calc(14px + .00375*(100vw - 320px));
    padding-left: unset
}

@media (max-width: 1199px) {
    .service-package-section .service-item {
        display:block
    }
}

.service-package-section .service-item .service-left-box {
    position: sticky;
    top: 100px;
    width: 50%
}

@media (max-width: 1199px) {
    .service-package-section .service-item .service-left-box {
        position:relative;
        top: unset!important;
        width: 100%
    }
}

.service-package-section .service-item .service-left-box .service-img {
    width: 100%;
    height: calc(150px + .09375*(100vw - 320px));
    border-radius: 10px
}

@media (max-width: 1199px) {
    .service-package-section .service-item .service-left-box .service-img {
        width:100%;
        object-fit: cover;
        object-position: top;
        height: 300px
    }
}

.service-package-section .service-item .service-left-box .service-title {
    display: block;
    margin-top: 24px
}

.service-package-section .service-item .service-left-box .service-title .service-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.service-package-section .service-item .service-left-box .service-title .service-offer h4 {
    font-weight: 500
}

.service-package-section .service-item .service-left-box .service-title .service-offer .time span {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3
}

.service-package-section .service-item .service-left-box .service-title p {
    margin: 5px;
    font-size: 16px;
    line-height: 1.5;
    color: #808b97
}

.service-package-section .service-item .service-left-box .service-title .amount {
    margin-block:15px}

.service-package-section .service-item .service-left-box .service-title .amount .amount-detail .amount-listing li {
    color: #00162e99
}

.service-package-section .service-item .detail .servicemen-lists {
    margin-block:24px}

.service-package-section .service-item .detail .serviceman {
    display: flex;
    align-items: center;
    gap: 14px
}

.service-package-section .service-item .detail .serviceman .serviceman-detail {
    background-color: #f5f6f7;
    border: none;
    padding: 10px 12px;
    border-radius: 10px;
    gap: 12px;
    box-shadow: none;
    max-width: calc(220px + (279 - 220) * ((100vw - 320px) / (1920 - 320)));
    display: flex;
    align-items: center
}

.service-package-section .service-item .detail .serviceman .serviceman-detail>div {
    width: calc(100% - 57px)
}

.service-package-section .service-item .detail .serviceman .serviceman-detail h6 {
    margin: 0;
    color: #a3aab1!important;
    font-size: 14px!important
}

.service-package-section .service-item .detail .serviceman .serviceman-detail p {
    font-weight: 500;
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2;
    margin: 0
}

.service-package-section .service-item .detail .booking-data h3 {
    font-size: calc(16px + 2px*(100vw - 320px)/1600px);
    font-weight: 500;
    line-height: 23px;
    color: #00162e
}

.service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option {
    padding: 0;
    border: none;
    flex-direction: row;
    display: flex;
    gap: 20px;
    margin-bottom: 17px
}

@media (max-width: 600px) {
    .service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option {
        flex-wrap:wrap;
        gap: 10px
    }
}

.service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option .form-check {
    padding: 0;
    flex-direction: unset;
    border: none
}

.service-package-section .service-item .detail .booking-data .date-time-picket-sec .select-option label {
    color: #00162ee6;
    cursor: pointer
}

[dir=rtl] {
    direction: rtl
}

[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: calc(var(--bs-border-width)* -1);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    margin-left: inherit
}

[dir=rtl] .feature-slider {
    direction: ltr
}

[dir=rtl] .slick-list .slick-track .slick-slide>div {
    direction: rtl
}