@keyframes navSticky {
    0% {
        opacity: 0;
        top: -100px
    }

    to {
        opacity: 1;
        top: 0
    }
}

@keyframes MovingLine {

    0%,
    to {
        left: 50%;
        width: 20px
    }

    15%,
    55% {
        width: 30px
    }

    30%,
    70% {
        width: 40px
    }

    40% {
        left: calc(90% - 30px);
        width: 50px
    }

    80% {
        left: calc(8% + 30px);
        width: 50px
    }
}

*,
:after,
:before {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

html[lang=ar] {
    direction: rtl
}

body,
html {
    font-size: 1rem
}

body {
    margin: 0;
    padding: 0;
    background-color: #fcfbfb;
    background-color: var(--subBG1)
}

ul {
    margin-block: 0;
    padding-inline: 0;
    list-style-type: none
}

a {
    text-decoration: none;
    display: inline-block;
    color: #201f1d;
    color: var(--blackY)
}

.btn {
    border: 0;
    cursor: pointer
}

.btn {
    height: initial
}

img,
svg {
    width: 100%;
    display: block;
    height: 100%;
    max-width: 100%
}

h1,
h2,
h3,
h4,
h5,
h6,
hr,
p {
    margin-block: 0;
    margin-top: 0;
    margin-bottom: 0
}

.btn,
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit
}

button,
input {
    padding-inline: 0;
    padding-block: 0
}

textarea {
    padding: 0
}

.container,
.container-full {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px
}

.container {
    max-width: 1200px
}

.d-none {
    display: none
}

.d-flex {
    display: flex
}

.d-inline-block {
    display: inline-block
}

.d-grid {
    display: grid
}

.d-inline-flex {
    display: inline-flex
}

.border-1 {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-4 {
    border-width: 4px
}

.border-t-1 {
    border-top-width: 1px
}

.border-b-1 {
    border-bottom-width: 1px
}

.border-solid {
    border-style: solid
}

.border-dashed {
    border-style: dashed
}

.border-none {
    border-style: none
}

.border-t-solid {
    border-top-style: solid
}

.border-b-solid {
    border-bottom-style: solid
}

.round-2 {
    border-radius: 4px
}

.round-3 {
    border-radius: 6px
}

.round-4 {
    border-radius: 8px
}

.round-5 {
    border-radius: 10px
}

.round-6 {
    border-radius: 12px
}

.round-7 {
    border-radius: 14px
}

.round-8 {
    border-radius: 16px
}

.round-9 {
    border-radius: 20px
}

.round-cricle {
    border-radius: 50%
}

.round-bl-4 {
    border-bottom-left-radius: 8px
}

.round-tr-7 {
    border-top-right-radius: 14px
}

.fs-14 {
    font-size: .875rem
}

.fs-16 {
    font-size: 1rem
}

.fs-18 {
    font-size: 1.125rem
}

.fs-20 {
    font-size: 1.25rem
}

.fs-24 {
    font-size: 1.5rem
}

.fs-28 {
    font-size: 1.75rem
}

.fs-30 {
    font-size: 1.875rem
}

.fs-36 {
    font-size: 2.25rem
}

.fs-48 {
    font-size: 3rem
}

.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.fw-900 {
    font-weight: 900
}

.text-center {
    text-align: center
}

.line-relaxed {
    line-height: 1.625
}

.o-0 {
    opacity: 0
}

.o-20 {
    opacity: .2
}

.o-30 {
    opacity: .3
}

.o-50 {
    opacity: .5
}

.o-70 {
    opacity: .7
}

.o-80 {
    opacity: .8
}

.o-90 {
    opacity: .9
}

.o-100 {
    opacity: 1
}

.p-2 {
    padding: 4px
}

.p-3 {
    padding: 6px
}

.p-4 {
    padding: 8px
}

.p-5 {
    padding: 10px
}

.p-6 {
    padding: 12px
}

.p-7 {
    padding: 14px
}

.p-8 {
    padding: 16px
}

.p-9 {
    padding: 20px
}

.p-10 {
    padding: 24px
}

.p-11 {
    padding: 28px
}

.p-12 {
    padding: 32px
}

.p-14 {
    padding: 40px
}

.pt-4 {
    padding-top: 8px
}

.pt-8 {
    padding-top: 16px
}

.pb-2 {
    padding-bottom: 4px
}

.pb-3 {
    padding-bottom: 6px
}

.pb-4 {
    padding-bottom: 8px
}

.pb-5 {
    padding-bottom: 10px
}

.pb-6 {
    padding-bottom: 12px
}

.pb-8 {
    padding-bottom: 16px
}

.px-2 {
    padding-right: 4px;
    padding-left: 4px
}

.px-3 {
    padding-right: 6px;
    padding-left: 6px
}

.px-4 {
    padding-right: 8px;
    padding-left: 8px
}

.px-5 {
    padding-right: 10px;
    padding-left: 10px
}

.px-6 {
    padding-right: 12px;
    padding-left: 12px
}

.px-8 {
    padding-right: 16px;
    padding-left: 16px
}

.px-9 {
    padding-right: 20px;
    padding-left: 20px
}

.px-10 {
    padding-right: 24px;
    padding-left: 24px
}

.py-2 {
    padding-top: 4px;
    padding-bottom: 4px
}

.py-3 {
    padding-top: 6px;
    padding-bottom: 6px
}

.py-4 {
    padding-top: 8px;
    padding-bottom: 8px
}

.py-5 {
    padding-top: 10px;
    padding-bottom: 10px
}

.py-6 {
    padding-top: 12px;
    padding-bottom: 12px
}

.py-7 {
    padding-top: 14px;
    padding-bottom: 14px
}

.py-9 {
    padding-top: 20px;
    padding-bottom: 20px
}

.py-10 {
    padding-top: 24px;
    padding-bottom: 24px
}

.p-in-2 {
    padding-inline: 4px
}

.p-in-4 {
    padding-inline: 8px
}

.p-in-8 {
    padding-inline: 16px
}

.ps-2 {
    padding-inline-start: 4px
}

.ps-3 {
    padding-inline-start: 6px
}

.ps-4 {
    padding-inline-start: 8px
}

.pe-2 {
    padding-inline-end: 4px
}

.pe-3 {
    padding-inline-end: 6px
}

.m-0,
figure {
    margin: 0
}

.mt-2 {
    margin-top: 4px
}

.mt-3 {
    margin-top: 6px
}

.mt-4 {
    margin-top: 8px
}

.mt-5 {
    margin-top: 10px
}

.mt-6 {
    margin-top: 12px
}

.mt-8 {
    margin-top: 16px
}

.mb-3 {
    margin-bottom: 6px
}

.mb-4 {
    margin-bottom: 8px
}

.mb-5 {
    margin-bottom: 10px
}

.mb-6 {
    margin-bottom: 12px
}

.mb-8 {
    margin-bottom: 16px
}

.mb-12 {
    margin-bottom: 32px
}

.mx-auto {
    margin-right: auto;
    margin-left: auto
}

.my-5 {
    margin-top: 10px;
    margin-bottom: 10px
}

.ms-10 {
    margin-inline-start: 24px
}

.gap-1 {
    gap: 2px
}

.gap-2 {
    gap: 4px
}

.gap-3 {
    gap: 6px
}

.gap-4 {
    gap: 8px
}

.gap-5 {
    gap: 10px
}

.gap-8 {
    gap: 16px
}

.gap-9 {
    gap: 20px
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.left-50 {
    left: 50%
}

.right-50 {
    right: 50%
}

.top-0 {
    top: 0
}

.top-3 {
    top: 6px
}

.top-50 {
    top: 50%
}

.bottom-0 {
    bottom: 0
}

.inset-0 {
    inset: 0
}

.inset-e-0 {
    inset-inline-end: 0
}

.inset-e-5 {
    inset-inline-end: 10px
}

.inset-e-7 {
    inset-inline-end: 14px
}

.inset-s-0 {
    inset-inline-start: 0
}

.inset-s-2 {
    inset-inline-start: 4px
}

.inset-s-3 {
    inset-inline-start: 6px
}

.inset-s--8 {
    inset-inline-start: -16px
}

.overflow-hidden {
    overflow: hidden
}

.w-8 {
    width: 16px
}

.w-10 {
    width: 20px
}

.w-12 {
    width: 24px
}

.w-14 {
    width: 28px
}

.w-16 {
    width: 32px
}

.w-18 {
    width: 36px
}

.w-20 {
    width: 40px
}

.w-22 {
    width: 44px
}

.w-28 {
    width: 56px
}

.w-30 {
    width: 60px
}

.w-36 {
    width: 72px
}

.w-38 {
    width: 76px
}

.w-48 {
    width: 96px
}

.w-50 {
    width: 100px
}

.w-56 {
    width: 112px
}

.w-100 {
    width: 200px
}

.w-9\/10 {
    width: 90%
}

.w-full {
    width: 100%
}

.max-w-full {
    max-width: 100%
}

.h-8 {
    height: 16px
}

.h-10 {
    height: 20px
}

.h-12 {
    height: 24px
}

.h-14 {
    height: 28px
}

.h-16 {
    height: 32px
}

.h-18 {
    height: 36px
}

.h-20 {
    height: 40px
}

.h-22 {
    height: 44px
}

.h-24 {
    height: 48px
}

.h-28 {
    height: 56px
}

.h-30 {
    height: 60px
}

.h-36 {
    height: 72px
}

.h-38 {
    height: 76px
}

.h-56 {
    height: 112px
}

.h-68 {
    height: 136px
}

.h-100 {
    height: 200px
}

.h-fit {
    height: -moz-fit-content;
    height: fit-content
}

.h-full {
    height: 100%
}

.max-h-8 {
    max-height: 16px
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.Auth .AuthForm .remember label,
.layoutPageFilter .asideFilter .accordion .formGroup label,
.layoutPageFilter.unitsDetails .bookDetails .extraPrices .extra label {
    order: 2
}

.grid-col-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-col-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.align-items-start {
    align-items: start
}

.align-items-center {
    align-items: center
}

.place-items-center {
    place-items: center
}

.img-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.img-contain {
    -o-object-fit: contain;
    object-fit: contain
}

@media (max-width:991px) {
    .lg-max\:d-none {
        display: none
    }

    .lg-max\:py-8 {
        padding-top: 16px;
        padding-bottom: 16px
    }

    .lg-max\:ps-10 {
        padding-inline-start: 24px
    }

    .lg-max\:fixed {
        position: fixed
    }

    .lg-max\:inset-s-0 {
        inset-inline-start: 0
    }

    .lg-max\:w-120 {
        width: 240px
    }

    .lg-max\:w-9\/10 {
        width: 90%
    }

    .lg-max\:max-w-full {
        max-width: 100%
    }

    .lg-max\:h-screen {
        height: 100vh
    }

    .lg-max\:flex-col {
        flex-direction: column
    }

    .lg-max\:row-s-1 {
        grid-row-start: 1
    }

    .lg-max\:row-e-auto {
        grid-row-end: auto
    }

    .lg-max\:align-items-start {
        align-items: start
    }
}

@media (max-width:767px) {
    .container {
        padding: 0 15px
    }
}

@media (max-width:566px) {
    .sm-max\:fs-24 {
        font-size: 1.5rem
    }

    .sm-max\:fs-36 {
        font-size: 2.25rem
    }

    .sm-max\:w-9\/10 {
        width: 90%
    }

    .sm-max\:grid-col-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .sm-max\:grid-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width:567px) {
    .container {
        max-width: 540px
    }

    .sm\:grid-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }

    .md\:fs-24 {
        font-size: 1.5rem
    }

    .md\:p-9 {
        padding: 20px
    }

    .md\:mt-12 {
        margin-top: 32px
    }

    .md\:grid-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-col-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:col-e-3 {
        grid-column-end: 3
    }

    .md\:col-s-1 {
        grid-column-start: 1
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }

    .lg\:d-none {
        display: none
    }

    .lg\:p-5 {
        padding: 10px
    }

    .lg\:p-11 {
        padding: 28px
    }

    .lg\:px-10 {
        padding-right: 24px;
        padding-left: 24px
    }

    .lg\:absolute {
        position: absolute
    }

    .lg\:grid-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-col-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-col-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-col-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .lg\:col-e-6 {
        grid-column-end: 6
    }

    .lg\:col-s-4 {
        grid-column-start: 4
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1320px
    }
}

:root {
    --mainBG: #f1f1f1;
    --subBG1: #fcfbfb;
    --subBG2: #f2f7f6;
    --hover-main: #f3bd1a;
    --yellow: #60ba86;
    --red: #ec5778;
    --blue: hsl(210.25deg 53.85% 56.67%);
    --blackY: #201F1D;
    --black: rgb(0, 0, 0);
    --border-color: #bebebe;
    --w: hsla(0, 0%, 100%, 1);
    --subTitle: #676767;
    --shadowColor: rgba(225, 225, 225, .25);
    --shadowColor2: #91919142;
    --bottom-gra: linear-gradient(180deg, rgba(4, 21, 45, 0) 0%, #fcfbfb 95.17%);
    --bottom-gra2: linear-gradient(180deg, rgba(4, 21, 45, 0) 0%, #201F1D 95.17%);
    --t-l: .5s ease-in-out;
    --t-s: .25s ease-in-out
}

.btn-round:before,
.exploreKsa .exploreCard:before,
.hero:after,
.infoRent .infoRentCard:after,
.infoRent .infoRentCard:before,
.layoutPageFilter.unitsDetails .AsideHeading:after,
.layoutPageFilter.unitsDetails .AsideHeading:before,
.mainHeading h2:after,
.mainHeading h2:before,
footer h6:before,
header .navLinks.responsiveLink li:before {
    content: "";
    position: absolute;
    transition: .25s ease-in-out;
    transition: var(--t-s)
}

.Auth .AuthForm .IsPassword svg,
.Auth .AuthForm .break:after,
.Auth .AuthForm .break:before,
.cityRent .btn-swiper,
.exploreKsa .btn-swiper,
.smallFilter form input[type=date]+svg,
.smallFilter form input[type=date]:before {
    top: 50%;
    transform: translateY(-50%)
}

.smallFilter form .selectForm svg {
    transform: translateY(-50%)
}
.smallFilter form{
    align-items: end;
}
.clientReview .swiper-button-next,
.clientReview .swiper-button-prev,
.exploreKsa .exploreCard .exploreDetails,
.infoRent .infoRentCard:after,
.mainHeading h2:after,
.mainHeading h2:before {
    left: 50%;
    transform: translate(-50%)
}

.clientReview,
section:not(.hero, .smallFilter, .breadcrumb, .Auth, .clientReview, .unitsCard, .topSection, .unitDel) {
    padding-block: 10vh
}

.layoutPageFilter.unitsDetails .unitDel .galleryContainer .main-swiper .swiper-button-next,
.layoutPageFilter.unitsDetails .unitDel .galleryContainer .main-swiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fcfbfb;
    background-color: var(--subBG1);
    z-index: 999;
    transition: .25s ease-in-out;
    transition: var(--t-s)
}
.layoutPageFilter.unitsDetails .unitDel .galleryContainer .thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
}
.cityRent .swiper-button-next,
.cityRent .swiper-button-prev,
.clientReview .swiper-button-next,
.clientReview .swiper-button-prev,
.exploreKsa .swiper-button-next,
.exploreKsa .swiper-button-prev {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--subBG1);
    z-index: 999;
    transition: .25s ease-in-out;
    transition: var(--t-s)
}

.cityRent .swiper-button-next,
.cityRent .swiper-button-prev,
.exploreKsa .swiper-button-next,
.exploreKsa .swiper-button-prev {
    background-color: #fcfbfb
}

.cityRent .swiper-button-next:after,
.cityRent .swiper-button-prev:after,
.clientReview .swiper-button-next:after,
.clientReview .swiper-button-prev:after,
.exploreKsa .swiper-button-next:after,
.exploreKsa .swiper-button-prev:after,
.layoutPageFilter.unitsDetails .unitDel .galleryContainer .main-swiper .swiper-button-next:after,
.layoutPageFilter.unitsDetails .unitDel .galleryContainer .main-swiper .swiper-button-prev:after {
    font-size: 1.75rem;
    color: #f3bd1a;
    color: var(--hover-main)
}

.cityRent .swiper-button-next:hover,
.cityRent .swiper-button-prev:hover,
.exploreKsa .swiper-button-next:hover,
.exploreKsa .swiper-button-prev:hover {
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 0 1.25rem #91919142;
    box-shadow: 0 0 1.25rem var(--shadowColor2)
}

.cityRent .swiper-button-next,
.exploreKsa .swiper-button-next {
    right: -20px
}

.cityRent .btn-swiper,
.exploreKsa .btn-swiper {
    z-index: 5
}

@media (max-width:676px) {

    .cityRent .swiper-button-next,
    .exploreKsa .swiper-button-next {
        right: 10px
    }

    .cityRent .swiper-button-prev,
    .exploreKsa .swiper-button-prev {
        left: 0
    }
}

.Card .rate svg,
.layoutPageFilter.unitsDetails .bookDetails .owner .ownerBox .rate svg,
.layoutPageFilter.unitsDetails .unitDel .Review .userReview .userInfo .rate svg,
.topSection .boxTop .rate svg {
    color: #f3bd1a;
    color: var(--hover-main)
}

.Card .rate svg:nth-child(5),
.layoutPageFilter.unitsDetails .bookDetails .owner .ownerBox .rate svg:nth-child(5),
.layoutPageFilter.unitsDetails .unitDel .Review .userReview .userInfo .rate svg:nth-child(5),
.topSection .boxTop .rate svg:nth-child(5) {
    color: #dbdbdb
}

.Auth .AuthForm .remember input,
.layoutPageFilter .asideFilter .accordion .formGroup input,
.layoutPageFilter.unitsDetails .bookDetails .extraPrices .extra input {
    accent-color: #f3bd1a;
    accent-color: var(--hover-main)
}

.Card .price .NewPrice,
.bookingCard .price .NewPrice,
.layoutPageFilter.unitsDetails .bookDetails .priceDetails .price .NewPrice {
    color: #ec5778;
    color: var(--red)
}

.empty {
    width: 500px;
    height: 500px;
    max-width: 100%;
    grid-column: 1/-1
}

@media (max-width:450px) {
    .empty {
        width: 100%;
        height: 300px
    }
}

.bookingCard .status,
.exploreKsa .exploreCard .exploreDetails h3,
.exploreKsa .exploreCard .exploreDetails p,
.model.bookingDetails .status {
    color: #fff;
    color: var(--w)
}

.bookingCard .completed.status,
.model.bookingDetails .completed.status {
    background-color: #60ba86;
    background-color: var(--yellow)
}

.bookingCard .current.status,
.model.bookingDetails .current.status {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

.bookingCard .end.status,
.model.bookingDetails .end.status {
    background-color: #ec5778;
    background-color: var(--red)
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-thumb {
    background-color: #f3bd1a;
    background-color: var(--hover-main);
    border-radius: 8px;
    height: 180px
}

::-webkit-scrollbar-track {
    background-color: #eaeaea
}

.layoutPageFilter .asideFilter .accordion .btn.open svg {
    transform: rotate(180deg)
}

a,
span,
svg {
    transition: color .25s ease-in-out;
    transition: color var(--t-s)
}

input,
select,
textarea {
    outline: 0;
    border: 1px solid #bebebe;
    border: 1px solid var(--border-color);
    background-color: #f2f7f6;
    background-color: var(--subBG2);
    transition: .25s ease-in-out;
    transition: var(--t-s)
}

input:focus,
select:focus,
textarea:focus {
    border-color: #f3bd1a;
    border-color: var(--hover-main);
    background-color: #fff;
    background-color: var(--w)
}

label {
    cursor: pointer
}

.overLay {
    cursor: url(https://demo-morata.myshopify.com/cdn/shop/t/3/assets/cursor-close.png?v=93210088594709752341700037392), pointer
}

.overLay.active:before {
    content: "";
    inset: 0;
    width: 100%;
    background: #0000004d;
    z-index: 9999;
    position: fixed;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    height: 100%
}

section:not(.hero, .smallFilter, .breadcrumb, .Auth, .clientReview, .unitsCard, .topSection, .unitDel) {
    min-height: auto;
    height: auto
}

:is(h1, h2, h3) {
    color: #201f1d;
    color: var(--blackY)
}

input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none
}

.layoutPageFilter.unitsDetails .unitDel .Map .mapContainer iframe,
.swiper {
    width: 100%;
    height: 100%
}

.swiper-slide {
    font-size: 1.125rem
}

.contact .d-grid,
.model {
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 10px 24px #e1e1e140;
    box-shadow: 0 10px 24px var(--shadowColor)
}

.model {
    z-index: 999999;
    transform: translate(-50%, -50%) scale(.2);
    padding: 24px;
    transition: .5s ease-in-out;
    transition: var(--t-l);
    max-width: 90%;
    max-height: 80%
}

.model.modelInquiry {
    width: min(100%, 500px)
}

.model.bookingDetails {
    width: min(100%, 800px)
}

.model .btn-closeModel {
    padding: 0
}

.model.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
}

body:has(.model.open) .overLay:before {
    z-index: 99999
}

header {
    z-index: 99999;
    background-color: transparent
}

header .icon-nav-base2 span,
header nav {
    transition: .25s ease-in-out;
    transition: var(--t-s)
}

header nav {
    background-color: #fff;
    background-color: var(--w)
}

header nav {
    box-shadow: 0 5px 1.25rem #e1e1e140;
    box-shadow: 0 5px 1.25rem var(--shadowColor)
}

header .navLinks.responsiveLink {
    background-color: #201f1d;
    background-color: var(--blackY);
    top: 90px;
    opacity: 0;
    inset-inline-start: -240px;
    transition: cubic-bezier(.44, .66, .74, .48) .5s
}

header .navLinks.responsiveLink li:before {
    width: 100%;
    height: 1px;
    background-color: #bebebe;
    background-color: var(--border-color);
    bottom: -8px;
    inset-inline-start: -5px;
    opacity: .5
}

header .navLinks.responsiveLink .navLink {
    color: #fff;
    color: var(--w);
    transform: translate(50px);
    opacity: 0;
    transition: opacity .4s ease, transform .4s ease;
    transition-delay: calc(.15s*var(--i))
}

header .navLinks.responsiveLink.open {
    opacity: 1;
    inset-inline-start: 0
}

header .navLinks.responsiveLink.open .navLink {
    opacity: 1;
    transform: translate(0)
}

.Auth .AuthForm .notHave a:hover,
.Auth .AuthForm .remember a:hover,
.layoutPageFilter.unitsDetails .bookDetails .priceDetails .dis,
header .navLinks .navLink.active,
header .navLinks .navLink:hover,
header .navLinks.responsiveLink .navLink.active,
header .navLinks.responsiveLink .navLink:hover {
    color: #f3bd1a;
    color: var(--hover-main)
}

header .icon-nav-base2 {
    background-color: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    width: 40px;
    height: 35px
}

header .icon-nav-base2 span {
    background-color: #f3bd1a;
    background-color: var(--hover-main);
    width: 35px;
    height: 3px;
    border-radius: 4px;
    display: block;
    margin-block: 7px
}

header .icon-nav-base2 span:nth-child(2) {
    width: 25px
}

header .icon-nav-base2 span:nth-child(3) {
    width: 15px
}

header .icon-nav-base2.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg)
}

header .icon-nav-base2.active span:nth-child(2) {
    opacity: 0
}

header .icon-nav-base2.active span:nth-child(3) {
    width: 35px;
    transform: translateY(-10px) rotate(-45deg)
}

footer {
    background-color: #201f1d;
    background-color: var(--blackY);
    padding-top: 5vh;
    min-height: 55vh
}

footer :is(h6, a) {
    color: #fff;
    color: var(--w)
}

footer .footerMeta li a svg,
footer h6:before {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

footer h6:before {
    width: 30%;
    height: 4px;
    bottom: -4px
}

footer .footerMeta li a svg {
    color: #fff;
    color: var(--w)
}

footer .footerMeta li a:hover {
    color: #f3bd1a;
    color: var(--hover-main);
    opacity: 1
}

footer .copyRight {
    background-color: #212121b3
}

footer .copyRight p {
    color: #ffffffb3
}

@media (max-width:400px) {
    footer .container {
        grid-template-columns: 1fr
    }
}

.hero {
    height: 95vh;
    padding-top: 8vh
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #16161666;
    z-index: 1
}

.hero:after {
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, #04152d000, #fcfbfb 95.17%);
    background: var(--bottom-gra);
    bottom: 0;
    z-index: 2
}

.hero .heroText {
    padding-top: 23vh;
    z-index: 3;
    color: #fff;
    color: var(--w);
    width: min(90%, 800px)
}

.hero .heroText h1 {
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #fff;
    color: var(--w)
}

@media (max-width:566px) {
    .hero .heroText {
        padding-top: 17vh
    }
}

@media (max-width:380px) {
    .hero .heroText h1 {
        font-size: 1.75rem
    }
}

.infoRent {
    background-color: #fcfbfb;
    background-color: var(--subBG1)
}

.infoRent .mainHeading {
    padding-bottom: 5vh
}

.infoRent .infoRentCard .containerIcon {
    border-color: #5590cc;
    border-color: var(--blue)
}

.infoRent .infoRentCard .containerIcon img {
    background-color: #5590cc;
    background-color: var(--blue)
}

.infoRent .infoRentCard p {
    line-height: 1.6;
    color: #676767;
    color: var(--subTitle);
    width: min(100%, 300px)
}

.infoRent .infoRentCard:before {
    width: calc(100% - 95px);
    border: 1px dashed #dbdbdb;
    inset-inline-end: 0;
    inset-inline-start: calc(50% + 52px);
    top: 80px
}

.infoRent .infoRentCard:after {
    width: 90%;
    bottom: 0;
    height: 1px;
    background-color: #5590cc;
    background-color: var(--blue)
}

.infoRent .infoRentCard:first-child .containerIcon {
    border-color: #ec5778;
    border-color: var(--red)
}

.infoRent .infoRentCard:first-child .containerIcon img,
.infoRent .infoRentCard:first-child:after {
    background-color: #ec5778;
    background-color: var(--red)
}

.infoRent .infoRentCard:last-child .containerIcon {
    border-color: #f3bd1a;
    border-color: var(--hover-main)
}

.infoRent .infoRentCard:last-child .containerIcon img,
.infoRent .infoRentCard:last-child:after {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

.infoRent .infoRentCard:last-child:before {
    display: none
}

@media (max-width:991px) {
    .infoRent .infoRentCard:before {
        display: none
    }
}

.popular {
    background-color: #f2f7f6;
    background-color: var(--subBG2)
}

.exploreKsa .exploreCard:before {
    width: 100%;
    height: 50%;
    background-image: linear-gradient(180deg, #04152d000, #201f1d 95.17%);
    background-image: var(--bottom-gra2);
    z-index: 1;
    border-radius: 12px;
    bottom: 0;
    left: 0
}

.Card .cardImg figure img,
.exploreKsa .exploreCard figure img {
    transition: .5s ease-in-out;
    transition: var(--t-l)
}

.exploreKsa .exploreCard .exploreDetails {
    bottom: 25px;
    z-index: 2
}

.Card:hover .cardImg figure img,
.exploreKsa .exploreCard:hover figure img {
    transform: scale(1.1)
}

.exploreKsa .exploreCard a {
    z-index: 3
}

.cityRent {
    background-color: #f1f1f1;
    background-color: var(--mainBG)
}

.clientReview {
    background-color: #201f1d;
    background-color: var(--blackY);
    min-height: 80vh
}

.clientReview .mainHeading :is(h2, p) {
    color: #fff;
    color: var(--w)
}

.clientReview .swiper-slide {
    padding: 15px
}

.clientReview .cardReview {
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 0 1.25rem #e1e1e140;
    box-shadow: 0 0 1.25rem var(--shadowColor)
}

.clientReview .cardReview figure {
    border-color: #676767;
    border-color: var(--subTitle)
}

.clientReview .cardReview .rate svg {
    color: #60ba86;
    color: var(--yellow)
}

.clientReview .btn-swiper {
    bottom: -35px
}

.clientReview .swiper-button-next,
.clientReview .swiper-button-prev {
    background-color: transparent;
    border: 1px solid #f3bd1a;
    border: 1px solid var(--hover-main)
}

.clientReview .swiper-button-next:hover,
.clientReview .swiper-button-prev:hover,
.whyChoose .whyChooseCard .ImgContainer {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

.clientReview .swiper-button-next:hover:after,
.clientReview .swiper-button-prev:hover:after,
.layoutPageFilter.unitsDetails .unitDel .leaveReview .formReview .btn-round span {
    color: #fff;
    color: var(--w)
}

.clientReview .swiper-button-next {
    right: auto;
    margin-inline: 50px
}

.clientReview .swiper-button-prev {
    margin-inline: -10px
}

@media (max-width:991px) {
    .clientReview {
        min-height: 95vh
    }
}

.whyChoose .whyChooseCard {
    background-color: #fff;
    background-color: var(--w);
    transition: .5s ease-in-out;
    transition: var(--t-l);
    box-shadow: 0 0 1.25rem #e1e1e140;
    box-shadow: 0 0 1.25rem var(--shadowColor)
}

.whyChoose .whyChooseCard:nth-child(2) .ImgContainer {
    background-color: #ec5778;
    background-color: var(--red)
}

.whyChoose .whyChooseCard:nth-child(3) .ImgContainer {
    background-color: #201f1d;
    background-color: var(--blackY)
}

.whyChoose .whyChooseCard:hover {
    background-color: #201f1d;
    background-color: var(--blackY)
}

.whyChoose .whyChooseCard:hover .ImgContainer {
    background-color: #fff;
    background-color: var(--w)
}

.whyChoose .whyChooseCard:hover .ImgContainer img {
    filter: invert(1)
}

.btn-round :is(svg, a, span),
.whyChoose .whyChooseCard:hover :is(h5, p) {
    color: #fff;
    color: var(--w)
}

.Auth {
    padding-block: 8vh
}

.Auth .AuthForm {
    width: min(100%, 600px);
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 10px 20px #91919142;
    box-shadow: 0 10px 20px 0 var(--shadowColor2)
}

.Auth .AuthForm .remember :is(a, label),
.layoutPageFilter.unitsDetails .unitDel :is(.specification, .description, .Review, .leaveReview) :is(p, span),
.topSection .boxTop :is(p, span) {
    color: #676767;
    color: var(--subTitle)
}

.Auth .AuthForm .break:after,
.Auth .AuthForm .break:before {
    content: "";
    position: absolute;
    width: calc(40% - 110px);
    height: 1px;
    background-color: #676767;
    background-color: var(--subTitle);
    opacity: .7
}

.Auth .AuthForm .break:before {
    inset-inline-start: 52px
}

.Auth .AuthForm .break:after {
    inset-inline-end: 52px
}

.Auth .AuthForm .IsPassword svg,
.Auth .AuthForm p,
.layoutPageFilter.unitsDetails .bookDetails .priceDetails span {
    color: #676767;
    color: var(--subTitle)
}

.Auth .AuthForm .btn {
    padding: .7em 1em
}

.Auth .AuthForm .IsPassword svg {
    cursor: pointer
}

.layoutPageFilter.units .container {
    grid-template-columns: 300px 1fr
}

@media (max-width:991px) {
    .layoutPageFilter.units .container {
        grid-template-columns: 1fr
    }

    .layoutPageFilter.units .asideFilter {
        height: auto
    }
}

@media (max-width:380px) {
    .layoutPageFilter.units .unitsCard .d-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
    }
}

.layoutPageFilter.unitsDetails .container {
    grid-template-columns: 400px 1fr
}

@media (max-width:991px) {
    .layoutPageFilter.unitsDetails .container {
        grid-template-columns: 1fr
    }

    .layoutPageFilter.unitsDetails .container .unitDel {
        grid-row: 1
    }
}

.layoutPageFilter.unitsDetails .AsideHeading:before {
    width: 100%;
    height: 2px;
    background-color: #f4f4f4;
    bottom: 0
}

.layoutPageFilter.unitsDetails .AsideHeading:after {
    width: 50px;
    height: 2px;
    background-color: #f3bd1a;
    background-color: var(--hover-main);
    inset-inline-start: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 6px
}

.layoutPageFilter.unitsDetails .bookDetails {
    background-color: transparent
}

.layoutPageFilter.unitsDetails .bookDetails .owner .ownerBox figure {
    border-color: #fff;
    border-color: var(--w)
}

.layoutPageFilter.unitsDetails .bookDetails :is(.owner, .priceDetails) :is(.ownerBox) {
    background-color: #f2f7f6;
    background-color: var(--subBG2)
}

.layoutPageFilter.unitsDetails .unitDel .galleryContainer .main-swiper {
    max-height: 400px;
    aspect-ratio: 2/3
}

.layoutPageFilter.unitsDetails .unitDel .galleryContainer .thumb-swiper {
    box-sizing: border-box;
    max-height: 400px
}

.layoutPageFilter.unitsDetails .unitDel .galleryContainer .thumb-swiper .swiper-slide {
    /* width: 25%; */
    height: 120px;
    opacity: .6;
    cursor: pointer;
    width: auto !important; /* Let Swiper calculate width */
    max-width: 100%; /* Prevent slides from expanding infinitely */
    flex-shrink: 0; /* Prevent shrinking */
    box-sizing: border-box; /* Include padding in width */
}
.layoutPageFilter.unitsDetails .unitDel .galleryContainer .thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
}

.layoutPageFilter.unitsDetails .unitDel .specification .speBox img {
    border-color: #f3bd1a;
    border-color: var(--hover-main)
}

.layoutPageFilter.unitsDetails .unitDel .Map .mapContainer {
    width: min(900px, 100%);
    height: 400px
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .reviewRange {
    border-color: #e8e8e8;
    width: 200px
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .reviewRange h5 {
    line-height: 1;
    color: #f3bd1a;
    color: var(--hover-main)
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .progressContainer {
    width: calc(100% - 224px)
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .progressContainer h6 {
    min-width: 150px
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .progressContainer .progress {
    background-color: #f1f1f1;
    background-color: var(--mainBG);
    width: 100%;
    height: 7px;
    border-radius: 6px
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .progressContainer .progress .progress-bar {
    background-color: #60ba86;
    background-color: var(--yellow);
    height: 100%;
    border-radius: 6px
}

.layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .progressContainer .proBox span {
    min-width: 15px
}

@media (max-width:580px) {

    .layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .progressContainer,
    .layoutPageFilter.unitsDetails .unitDel .Review .reviewContainer .reviewRange {
        width: 100%
    }
}

.layoutPageFilter.unitsDetails .unitDel .Review .userReview {
    border-color: #e8e8e8
}

.layoutPageFilter.unitsDetails .unitDel .Review .userReview .userReviewBox,
.layoutPageFilter.unitsDetails .unitDel .Review .userReview h6 {
    border-bottom: 1px solid #bebebe;
    border-bottom: 1px solid var(--border-color)
}

.layoutPageFilter.unitsDetails .unitDel .Review .userReview .userInfo figure {
    border-color: #bebebe;
    border-color: var(--border-color)
}

.Card:hover h3,
.bookingCard .cardBottom .btn-round:hover span,
.bookingCard .location svg,
.btn.btn-noBg svg,
.dropDownMenu .dropDownMenuList li a:hover,
.layoutPageFilter.unitsDetails .unitDel .leaveReview .formReview .btn-round:hover span {
    color: #f3bd1a;
    color: var(--hover-main)
}

.layoutPageFilter.unitsDetails :is(.owner, .extraPrices, .checkData, .priceDetails, .galleryContainer, .specification, .description, .Map, .Review, .leaveReview) {
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 5px 20px #e1e1e140;
    box-shadow: 0 5px 20px var(--shadowColor)
}

.layoutPageFilter .unitsCard .d-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px
}

.layoutPageFilter .asideFilter {
    height: 100vh;
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 4px 24px #e1e1e140;
    box-shadow: 0 4px 24px var(--shadowColor)
}

.layoutPageFilter .asideFilter :is(h3, .accordion) {
    border-bottom-color: #f4f4f4
}

.layoutPageFilter .asideFilter .accordion .btn {
    background-color: transparent;
    padding: .2em 0;
    color: #676767;
    color: var(--subTitle)
}

.layoutPageFilter .asideFilter .accordion .accordionList {
    transition: max-height .3s ease-in-out
}

.layoutPageFilter .asideFilter .accordion .accordionList::-webkit-scrollbar-thumb {
    height: 20px
}

.layoutPageFilter .asideFilter .accordion .accordionList.show {
    max-height: 180px;
    overflow-y: auto
}

.layoutPageFilter .asideFilter .accordion .accordionList:not(.show) {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height .3s ease-out
}

.layoutPageFilter .asideFilter .accordion .price-range-container .rangeSlider {
    margin-top: 45px;
    background-color: #ccc;
    height: 5px
}

.layoutPageFilter .asideFilter .accordion .price-range-container .rangeSlider .track {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

.layoutPageFilter .asideFilter .accordion .price-range-container .rangeSlider input[type=range] {
    transform: translateY(-50%);
    pointer-events: none;
    background: 0 0;
    inset-inline-start: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.layoutPageFilter .asideFilter .accordion .price-range-container .rangeSlider input[type=range]::-webkit-slider-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    background-color: var(--w);
    border: 3px solid #f3bd1a;
    border: 3px solid var(--hover-main);
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer
}

.layoutPageFilter .asideFilter .accordion .price-range-container .rangeSlider .tooltip {
    background-color: #f3bd1a;
    background-color: var(--hover-main);
    color: #fff;
    color: var(--w);
    transform: translate(50%);
    bottom: 20px
}

.topSection {
    background-color: #fff;
    background-color: var(--w);
    padding-block-end: 5vh;
    box-shadow: 0 10px 24px #e1e1e140;
    box-shadow: 0 10px 24px var(--shadowColor)
}

.mainHeading {
    padding-bottom: 8vh
}

.mainHeading h2,
.mainHeading p,
.smallFilter form input[type=date][data-value=true] {
    color: #201f1d;
    color: var(--blackY)
}

.mainHeading h2:after,
.mainHeading h2:before {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

.mainHeading h2:before {
    width: 90%;
    height: 1.5px;
    bottom: -2.5px;
    opacity: .7
}

.mainHeading h2:after {
    width: 50px;
    height: 5px;
    bottom: -4px;
    border-radius: 12px;
    animation: MovingLine 10s cubic-bezier(.84, .36, .23, .85) infinite
}

.mainHeading p {
    max-width: 340px;
    margin-inline: auto;
    opacity: .7
}

.dropDownMenu .btn-dropDown {
    z-index: 2;
    padding: .5em
}

.dropDownMenu .btn-dropDown span,
.dropDownMenu .dropDownMenuList li a {
    text-wrap: nowrap
}

.dropDownMenu .btn-dropDown.active .arrowSvg {
    transform: rotate(180deg)
}

.dropDownMenu .dropDownMenuList {
    min-width: 130px;
    top: calc(100% + 18px);
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 9px 1.25rem #e1e1e140;
    box-shadow: 0 9px 1.25rem var(--shadowColor);
    transition: .25s ease-in-out;
    transition: var(--t-s);
    transform: translateY(-50px) scale(.4)
}

.dropDownMenu .dropDownMenuList.open {
    opacity: 1;
    transform: translateY(0) scale(1)
}

.dropDownMenu .dropDownMenuList li {
    padding-block-start: 8px
}

.dropDownMenu .dropDownMenuList li:last-child {
    padding-block-end: 8px
}

.btn {
    background-color: #f3bd1a;
    background-color: var(--hover-main);
    padding: .5em 1em;
    overflow: hidden
}

.btn.border {
    background-color: #fff;
    background-color: var(--w);
    border-color: #f3bd1a;
    border-color: var(--hover-main)
}

.btn.border :is(svg, a, span) {
    color: #f3bd1a;
    color: var(--hover-main)
}

.btn.border.btn-delete {
    background-color: #fff;
    background-color: var(--w);
    border-color: #ec5778;
    border-color: var(--red)
}

.btn.border.btn-delete :is(svg, a, span) {
    color: #ec5778;
    color: var(--red)
}

.btn-round,
.btn.btn-delete {
    color: #fff;
    color: var(--w)
}

.btn.btn-delete {
    background-color: #dc3545
}

.btn.btn-noBg {
    background-color: transparent
}

.bookingCard .cardBottom .btn-round.border span,
.btn.btn-noBg span {
    color: #ec5778;
    color: var(--red)
}

.btn-round {
    border: 1px solid #f3bd1a;
    border: 1px solid var(--hover-main)
}

.btn-round svg {
    transition: color .6s ease-in-out, transform .3s ease-in-out
}

.btn-round:before {
    width: 140%;
    height: 140%;
    border-radius: 50%;
    top: -140%;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
    background-color: var(--w);
    transition-duration: .6s
}

.btn-round.border:before {
    background-color: #f3bd1a;
    background-color: var(--hover-main)
}

.Card .btn-heart.active,
.Card .btn-heart:hover,
.btn-round.btn-delete:before {
    background-color: #ec5778;
    background-color: var(--red)
}

.btn-round :is(span, a) {
    transition-duration: .6s
}

.btn-round:hover :is(svg, a, span) {
    color: #f3bd1a;
    color: var(--hover-main)
}

.btn-round:hover.border :is(svg, a, span) {
    color: #fff;
    color: var(--w)
}

.btn-round:hover:before {
    top: -20%
}

.smallFilter {
    z-index: 4
}

.smallFilter form {
    background-color: #fff;
    background-color: var(--w);
    box-shadow: 0 11px 1.25rem #e1e1e140;
    box-shadow: 0 11px 1.25rem var(--shadowColor)
}

.smallFilter form input[type=date] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
    color: transparent
}

.smallFilter form input[type=date]::-webkit-datetime-edit {
    color: #201f1d;
    color: var(--blackY);
    display: none
}

.smallFilter form input[type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1
}

.smallFilter form input[type=date]:before {
    content: attr(placeholder);
    position: absolute;
    inset-inline-start: 8px;
    pointer-events: none;
    opacity: .8;
    color: #201f1d;
    color: var(--blackY)
}

.smallFilter form input[type=date][data-value=true]::-webkit-datetime-edit {
    display: block
}

.smallFilter form input[type=date][data-value=true]:before,
.star-rating input {
    display: none
}

.smallFilter form input[type=date]+svg {
    inset-inline-end: 8px;
    pointer-events: none;
    z-index: 0
}

.smallFilter form .selectForm select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.smallFilter form .selectForm svg {
    inset-inline-end: 8px;
    top: 65%;
    pointer-events: none
}

.smallFilter.index form {
    margin-top: -100px
}

@media (max-width:566px) {
    .smallFilter.index form {
        margin-top: -220px
    }
}

.smallFilter.another form {
    margin-top: -50px
}

.breadcrumb {
    height: 40vh;
    background-color: #201f1d;
    background-color: var(--blackY)
}

.breadcrumb h2 {
    margin-top: 10vh
}

.breadcrumb h2.smallMargin {
    margin-top: 5vh
}

.Card .btn-heart.active svg,
.Card .btn-heart:hover svg,
.Card .tag p,
.bookingCard .cardBottom .btn-round span,
.bookingCard .cardBottom .btn-round.border:hover span,
.breadcrumb,
.breadcrumb a,
.breadcrumb h2 {
    color: #fff;
    color: var(--w)
}

.breadcrumb li:nth-child(3) {
    color: #f3bd1a;
    color: var(--hover-main)
}

.breadcrumb .pattern {
    top: 62%;
    transform: translateY(-50%);
    inset-inline-start: 120px
}

.breadcrumb .pattern2 {
    transform: rotate(-10deg)
}

.Card h3 {
    transition: .25s ease-in-out;
    transition: var(--t-s)
}

.Card .tag {
    background-color: #ec5778;
    background-color: var(--red);
    bottom: -25px;
    z-index: 3;
    border-color: #fff;
    border-color: var(--w)
}

.Card hr {
    border-top-color: #bebebe;
    border-top-color: var(--border-color)
}

.Card .bodyBottom {
    background-color: #f2f7f6;
    background-color: var(--subBG2)
}

.Card .bodyMiddle li {
    flex: 0 0 33.3333333333%
}

.Card .btn-heart {
    padding: 0;
    transform: scale(.85);
    transition: .25s ease-in-out;
    transition: var(--t-s);
    z-index: 1
}

.Card,
.Card .btn-heart,
.bookingCard {
    background-color: #fff;
    background-color: var(--w)
}

.Card del,
.Card span,
.Card svg,
.bookingCard del,
.bookingCard span,
.bookingCard svg,
.star-rating label {
    color: #676767;
    color: var(--subTitle)
}

.star-rating {
    flex-direction: row-reverse
}

.star-rating label {
    position: relative;
    cursor: pointer;
    width: 24px;
    aspect-ratio: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    transition: .25s ease-in-out;
    transition: var(--t-s);
    display: inline-block
}

.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD700' stroke='%23FFD700' stroke-width='2'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'%3E%3C/path%3E%3C/svg%3E")
}
.grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    @media(max-width:370px){
        grid-template-columns: repeat(auto-fill, minmax(100px, 100%));
    }
}