:root {
    --bg-color: rgb(201, 20, 20);
    --whites: #fff;
    --p-color: rgb(201, 20, 20);
}


.mchs__bg {
    margin: 0;
    font-family: "Poppins", sans-serif;
    /* background: linear-gradient(135deg, #3E2C41, #B76F5A, #4A5568); */
    background: linear-gradient(135deg, rgb(201, 20, 20), #fefefe);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

/* ===== Wrapper ===== */
.mhs-background {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    border-radius: 28px;
    /* padding: 28px 22px; */
    padding: 11px 22px 22px 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    color: #fff;
    animation: fadeUp 0.9s ease forwards;
    border-bottom: 2px solid var(--text-color)
}

/* ===== Header Row ===== */
.mhs-mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.mhs-mobile-head img {
    display: block;
    margin: 0 auto;
    background: #fefefe;
    width: 53px;
    height: 53px;
    border-radius: 50%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.397));
    box-shadow: rgb(255, 255, 255) 0px 13px 27px -5px, rgba(255, 255, 255, 0.61) 0px 8px 16px -8px;
}

.mhs-btn-call {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #ff3c3c, #ff7e3c);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.mhs-btn-call:hover {
    transform: scale(1.12);
}

/* ===== Tagline ===== */
.mhs-tagline {
    font-size: .9rem;
    font-weight: 700;
    /* margin: 30px 0 20px; */
    text-align: center;
    line-height: 1.5;
    color: #fff;
    animation: fadeDown 1s ease forwards;
}

.mhs-tagline span {
    color: #ffe084;
}

/* ===== Search Card ===== */
.mhs-search-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    animation: slideUp 1.2s ease forwards;
    border-bottom: 2px solid var(--text-color)
}

.mhs-search-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
    opacity: 0.9;
}

.mhs-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--text-color);
}

.mhs-search-input i {
    font-size: 18px;
    color: var(--text-color);
}

.mhs-search-input input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: #fff;
}

.mhs-search-input input::placeholder {
    color: rgba(255, 255, 255, 0.842);
}

/* ===== Search Button ===== */
.mhs-pinBtn {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff3c3c, rgb(201, 20, 20), #ffb347);
    /* background: var(--background); */
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.mhs-pinBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.mhs-pinBtn i {
    font-size: 18px;
}

/* ===== Animations ===== */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.new-find-spa h5 {
    font-weight: 700;
    text-shadow: 1px 2px 4px #fefefe;
}

.new-find-spa h5::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    background: var(--bg-color);
    width: 3px;
    height: 22px;
}

.new-find-spa h5 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgb(201, 20, 20), #000, rgb(201, 20, 20));
    /*background-repeat: no-repeat;*/
    background-size: 70%;
    animation: animate 10s linear infinite;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
    0% {
        background-position: -500%;
    }

    100% {
        background-position: 500%;
    }
}


.spa__list__main {
    /* margin-top: 16px; */
    position: relative;
}

.spas__card {
 box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 10px;
    background: #fff;
    transition: all 0.3s ease;
}

.spa__list__main a {
    text-decoration: none;
    cursor: pointer;
}

.spa__list__main .spa__img__list {
    overflow: hidden;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: sticky;
}

.main__img__area .img__scroll__area::-webkit-scrollbar {
    display: none;
    background-color: transparent;
}

.main__spas__lista .spas__area__start .spas__scroll__area::-webkit-scrollbar {
    display: none;
    background-color: transparent;
}

.spa__img__list .spa__img__collection::-webkit-scrollbar {
    display: none;
    background-color: transparent;
}

.spa__img__list .spa__img__collection {
    white-space: nowrap;
    overflow: auto hidden;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    height: 128px;
    display: flex;
    box-sizing: border-box;
}

.spa__img__list .spa__img__collection .img__lists {
    color: #000;
    background: #fff;
    animation: auto ease 0s 1 normal none running none;
    position: relative;
    z-index: 0;
    margin-right: 4px;
    height: 100%;
    width: 140px;
    display: flex;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.spa__img__list .spa__img__collection .img__lists::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    border-radius: 18px;
    background: url('../img/list/2.jpg');
    /* background: #ccc; */
    animation: auto ease 0s 1 normal none running none;
    z-index: -1;
}

.spa__img__list .spa__img__collection .img__lists img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    border-style: none;
    border-radius: 18px;
}

.spa__list__main .badge {
    /* background: var(--bg-color); */
    background: var(--whites);
    color: #000000;
    max-width: 70px;
    margin-top: -14px;
    margin-left: 9px;
    border: 1px solid #000;
    position: absolute;
    left: 0;
    display: block;
}

.spa__list__main .badge>.badge-con {
    color: #000;
    text-align: center;
    padding-right: 15px;
    text-shadow: 1px 1px 10px #ffffff;
    font-weight: 800;
    font-size: 11px;
}

.chutkee__ribbon p {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.chutkee__ribbon p {
    --r: .4em;
    /* control the ribbon shape (the radius) */
    --c: rgb(201, 20, 20);

    position: absolute;
    top: 8px;
    left: calc(-1*var(--r));
    line-height: 1.8;
    padding: 0 .5em calc(2*var(--r));
    border-radius: var(--r) 0 0 var(--r);
    background:
        radial-gradient(100% 50% at left, var(--c) 98%, #0000 101%) 100% 0/.5lh calc(100% - 2*var(--r)),
        radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 100%/var(--r) calc(2*var(--r)),
        conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)), #0000 25%, var(--c) 0) 0 0/calc(101% - .5lh) 100%;
    background-repeat: no-repeat;
}

.categories__tags {
    background: var(--gradient-bg-color2);
    position: absolute;
    width: 8.8rem;
    float: left;
    justify-content: start;
    align-items: start;
    padding: 0.2rem 1.2rem;
    border-radius: 0px 5px 5px 0px;
    top: 7px;
    left: -14px;
}

.categories__tags p {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.categories__tags div {
    position: absolute;
    bottom: -22px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 13px solid #2c2e58;
    border-bottom: 10px solid transparent;
    border-left: 13px solid transparent;
}

/* mobile area open close tag */

.mob-open-tags {
    width: 88px;
    position: absolute;
    float: right;
    margin: 0px 20px;
    bottom: 15px;
    right: 1px;
    animation: sway 2s infinite;
    animation-timing-function: ease-in-out;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
}

@keyframes sway {
    0% {
        transform: rotate(9deg);
    }

    50% {
        transform: rotate(-9deg);
    }

    100% {
        transform: rotate(9deg);
    }
}

.mob-open-tags .hook {
    width: 5px;
    height: 5px;
    background-color: rgba(36, 121, 9, 1);
    margin: 0 auto 32px auto;
    border-radius: 50%;
    box-shadow: 0 1px 0 1px rgba(36, 121, 9, 1);

}

.mob-open-tags .hook::before {
    content: '';
    width: 50px;
    height: 50px;
    border-top: 3px solid rgba(36, 121, 9, 1);
    border-left: 3px solid rgba(36, 121, 9, 1);
    /* border-right: 2px solid #000000; */
    position: absolute;
    border-radius: 7px;
    left: 20px;
    top: 1px;
    transform: rotate(45deg);
    z-index: 1;
}

.mob-open-tags .frame {
    /* background: #048c80; */
    /* background: rgb(235, 235, 235); */
    background: linear-gradient(130deg, rgba(235, 235, 235, 1) 0%, rgba(36, 121, 9, 1) 22%);
    z-index: 5;
    margin-top: -19px;
    border-radius: 8px 0px 8px 0px;
    padding: 1px 14px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 1px 1px 10px #2a2a2a3d;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
    /* border: 1px solid #fff; */
}


.mob-open-cloase-tags {
    width: 92px;
    position: absolute;
    float: left;
    margin: 0px 20px;
    top: 226px;
    left: 227px;
    animation: sway 2s infinite;
    animation-timing-function: ease-in-out;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
}

@keyframes sway {
    0% {
        transform: rotate(9deg);
    }

    50% {
        transform: rotate(-9deg);
    }

    100% {
        transform: rotate(9deg);
    }
}

.mob-open-cloase-tags .hook {
    width: 5px;
    height: 5px;
    background-color: red;
    margin: 0 auto 32px auto;
    border-radius: 50%;
    box-shadow: 0 1px 0 1px red;

}

.mob-open-cloase-tags .hook::before {
    content: '';
    width: 50px;
    height: 50px;
    border-top: 3px solid red;
    border-left: 3px solid red;
    /* border-right: 2px solid #000000; */
    position: absolute;
    border-radius: 7px;
    left: 22px;
    top: 1px;
    transform: rotate(45deg);
    z-index: 1;
}

.mob-open-cloase-tags .frame {
    /* background: #048c80; */
    /* background: rgb(235, 235, 235); */
    background: linear-gradient(130deg, rgba(235, 235, 235, 1) 0%, red 22%);
    z-index: 5;
    margin-top: -14px;
    border-radius: 8px 0px 8px 0px;
    padding: 1px 14px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 1px 1px 10px #2a2a2a3d;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
    /* border: 1px solid #fff; */
}

/* end here */

.spa__name__text h2 {
    color: var(--p-color);
    max-width: 20rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.loc__spa p {
    color: #2c2a2a;
    max-width: 20rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.loc__spa p .bi {
    color: var(--p-color);
}

.spa__ratelist p {
    margin-top: 7px;
    color: #000;
    font-weight: 700;
    font-size: 20px;
}

.spa__ratelist span {
    color: var(--p-color);
}

.spa__ratelist p del {
    font-size: 15px;
    font-weight: 500;
    color: black;
}

.spa__ratelist p sup b {
    background: #9bfd39;
    padding: 5px;
    font-weight: 500;
    border-radius: 5px;
}

.chutkee__disc__offer {
    /* background: var(--bg-color); */
    border: 1px solid var(--bg-color);
    padding: 5px 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    font-weight: 500;
    color: #000;
    font-size: 10px;
    border-radius: 25px 45px;
}

.sms-services {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    font-size: 11px;
    color: #333;
}

.sms-services li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255, 4, 4, 0.288);
}

.sms-services li span {
    font-size: 10px;
    font-weight: 400;
    color: #6b6f77;
}


/* start buttons area here */
.spa__book__btn {
    display: flex;
    width: 100%;
    /* gap: 15px; */
    justify-content: space-between;
}

/* .book__btn {
    width: calc(100% - 50%);

} */
.book__btn a {
    text-decoration: none;
}

.custom__btn {
    width: 150px;
    height: 50px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-size: 17px;
    letter-spacing: 0.8px;
    font-weight: 600;
    text-shadow: 1px 2px 7px #000000d0;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;

}

@media screen and (min-width: 320px) and (max-width: 340px) {
    .btn____book {
        position: relative;
        /* or absolute if inside a container */
        right: 20px;
        bottom: 17px;
    }

    .btn____book span {
        display: block;
        position: absolute;
        width: 116px !important;
        text-align: center;
    }

    .custom__btn {
        padding: 9px 12px;
        font-size: 15px;
    }

    .custom__btn2 {
        width: 133px !important;
        height: 42px;
        font-size: 15px !important;
    }

    .view__btn {
        padding: 0 !important;
    }

    .mob-open-tags {
        position: absolute;
        right: -14px !important;
        left: auto;
        /* this cancels any previous left value */
    }
}


.btn____book {
    position: relative;
    right: 20px;
    bottom: 20px;
    border: none;
    box-shadow: none;
    width: 130px;
    height: 40px;
    line-height: 42px;
    -webkit-perspective: 230px;
    perspective: 230px;
}

.btn____book span {
    background: var(--bg-color);
    background: var(--bg-color);
    display: block;
    position: absolute;
    width: 145px;
    height: 42px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    border-radius: 5px;
    margin: 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn____book span:nth-child(1) {
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}

.btn____book span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}

.btn____book:hover span:nth-child(1) {
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.btn____book:hover span:nth-child(2) {
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    color: transparent;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}

.newspa-views {
    /* padding-left: 10px; */
    float: right;
}

.newspa-views a {
    text-decoration: none;
}

.newspa-views a button {
    color: var(--bg-color);
    font-size: 15px;
    font-weight: 600;
    background: var(--whites);
    border: 1px solid rgb(201, 20, 20);
    padding: 9px 20px;
    width: 130px;
    height: 40px;
    border-radius: 5px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        background: rgb(201, 20, 20);
        color: var(--whites);
    }
}

.chut-open-ribbon {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    bottom: 112px;
    right: 0;
}

.chut-open-ribbon {
    --r: .8em;
    /* control the cutout */
    border-inline: .5em solid #0000;
    padding: .5em .2em calc(var(--r) + .2em);
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - .5em) 100%, 50% calc(100% - var(--r)), .5em 100%, 0 100%);
    background:
        radial-gradient(50% .2em at top, #000a, #0000) border-box,
        rgba(36, 121, 9, 1) padding-box;
    /* the color  */
    width: fit-content;
}

.chut-close-ribbon {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    bottom: 112px;
    right: 0;
}

.chut-close-ribbon {
    --r: .8em;
    /* control the cutout */
    border-inline: .5em solid #0000;
    padding: .5em .2em calc(var(--r) + .2em);
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - .5em) 100%, 50% calc(100% - var(--r)), .5em 100%, 0 100%);
    background:
        radial-gradient(50% .2em at top, #000a, #0000) border-box,
        rgba(36, 121, 9, 1) padding-box;
    /* the color  */
    width: fit-content;
}

.spa-connect-area {
    display: flex;
    align-items: center;
    /* gap: 14px; */
    /* margin-top: 14px; */
    justify-content: space-between;
}

/* Base button style */
.connect-btn {
    flex: 1;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* Call button – red gradient */
.connect-call {
    font-weight: 600;
    font-size: 14px;
    padding: 5px 0;
    margin-left: 4px;
    max-width: 147px;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.connect-call:hover {
    background: linear-gradient(135deg, #cc0000, #990000);
    transform: translateY(-2px);
}

/* Chat button – WhatsApp green gradient */
.connect-chat {
    font-weight: 600;
    font-size: 14x;
    padding: 3px 0;
    position: relative;
    /* left: 22px; */
    max-width: 132px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 4px 15px rgba(18, 140, 126, 0.25);
}

.connect-chat:hover {
    background: linear-gradient(135deg, #128c7e, #075e54);
    transform: translateY(-2px);
}

/* Icon adjustments */
.connect-btn i {
    font-size: 17px;
    animation: blink 1.5s infinite;
}

.connect-btn span {
    font-size: 14px;
    letter-spacing: 0.3px;
}

/* Blinking animation for icons */
@keyframes blink {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.4;
    }
}

/* Responsive mobile tweak */
@media(max-width:576px) {
    .spa-call-chat {
        justify-content: center;
    }

    .contact-btn {
        padding: 5px 10px;
        font-size: 0.8rem;
        min-width: 80px;
    }
}


.scroll__collection__area {
    overflow-x: scroll;
    width: 100%;
}

.scroll__collection__area .scroll__category__area::-webkit-scrollbar {
    display: none;
}

.scroll__collection__area .scroll__category__area {
    padding-left: 15px;
    box-sizing: border-box;
    background-color: transparent;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-box-align: stretch;
    align-items: stretch;
    display: flex;
    gap: 8px;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding-bottom: 8px;
}

.scroll__collection__area .scroll__category__area a .classic__area {
    text-decoration: none;
    color: inherit;
    height: auto;
    min-width: 121px;
    min-height: 121px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    position: relative;
    padding-right: 12px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 11px;
    box-sizing: border-box;
    border-bottom: 1px dashed var(--p-color);
}


.scroll__collection__area .scroll__category__area a .spa__img {
    color: rgba(0, 0, 0, 0.50);
    height: 100%;
    width: 100%;
    background: #ffffff;
    animation: none;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding-left: 8px;
}

.scroll__collection__area .scroll__category__area a .spa__img>.img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 7px;
    overflow: hidden;
    box-sizing: border-box;
    border-style: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    z-index: -2;
}

.scroll__category__area a .spa__img>.badge {
    background: #ffffff;
    max-width: 54px;
    margin-top: -10px;
    margin-left: 9px;
    position: relative;
    display: block;
}

.scroll__category__area a .spa__img .badge>.badge-con {
    color: #000;
    text-align: center;
    padding-right: 15px;
    text-shadow: 1px 1px 10px #ffffff;
    font-weight: 800;
    font-size: 11px;
}

.scroll__collection__area .scroll__category__area>a {
    text-decoration: none;
}

.scroll__collection__area .scroll__category__area a .classic__area .spa__text {
    margin-top: 8px;
    color: #fefefe;
    text-shadow: 1px 2px 7px #2a2a2a;
    font-weight: 600;
    font-size: 17px;
    margin-left: 10px;
    text-align: center;

}

.scroll__collection__area .scroll__category__area a .classic__area .spa__text {
    --r: .8em;
    /* control the cutout */
    border-block: .5em solid #0000;
    padding-inline: .5em calc(var(--r) + .25em);
    line-height: 1.8;
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, 100% calc(100% - .25em), calc(100% - var(--r)) 50%, 100% .25em);
    background:
        radial-gradient(.2em 50% at left, #000a, #0000) border-box,
        rgb(201, 20, 20) padding-box;
    /* the color  */
    width: fit-content;
}

.recent-spaBox {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    max-width: 350px;
    max-height: 380px;
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.12);
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

.recent-spaBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.2);
}

/* ====== IMAGE SECTION ====== */
.spaImgWrap {
    position: relative;
    height: 170px;
    overflow: hidden;
}

.spaImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 0 0 0 35px;
}

.spaBox:hover .spaImgWrap img {
    transform: scale(1.05);
}

.ratingTag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--bg-color);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.ratingTag i {
    color: #fefefe;
    font-size: 12px;
}

/* ====== CONTENT SECTION ====== */
.spaInfo {
    padding: 14px 16px 18px;
}

.spaTitle {
    font-size: 18px;
    font-weight: 700;
    max-width: 17rem;
    text-transform: capitalize;
    color: #b00000;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.spaLocation {
    font-size: 13px;
    color: #777;
    max-width: 17rem;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px 0 12px;
}

/* ====== SERVICE TAGS ====== */
.serviceTags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.serviceTags span {
    background: #fff2f2;
    color: #c10000;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 18px;
    border: 1px solid rgba(255, 0, 0, 0.2);
    font-weight: 500;
}

/* ====== PRICE AREA ====== */
.priceWrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.priceNow {
    color: #b00000;
    font-size: 17px;
    font-weight: 600;
}

.priceOld {
    color: #999;
    font-size: 13px;
}

.offerTag {
    background: linear-gradient(135deg, #ff0000, #ff4d4d);
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 6px;
    font-weight: 500;
}

/* ====== ACTION BUTTONS ====== */
.actionBtns {
    display: flex;
    gap: 10px;
}

.actionBtns a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.btnBook {
    background: linear-gradient(135deg, #ff0000, #ff4d4d);
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.btnBook:hover {
    background: #c00000;
}

.btnView {
    background: #fff;
    color: #b00000;
    border: 1px solid #ff0000;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.btnView:hover {
    background: #ff0000;
    color: #fff;
}

/* ====== RESPONSIVE ====== */
@media (min-width: 768px) {
    .spaBox {
        max-width: 400px;
    }
}



.slider-item2 .spaCard {
    background: var(--text-color);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, var(--p-color) 0px -5px 0px inset;
    height: 350px;
    width: 240px;
    border-radius: 12px;
    overflow: visible;
    display: block;
    margin: 0 auto;
    /* box-shadow: 15px 15px 20px #bebebe,
                -10px -10px 20px #ffffff; */
}

.mob__new__spaadd {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mob__card__content .spa__book__btn3 {
    position: relative;
    /* top: -20px; */
    display: flex;
    flex-direction: column;
}

.mob__card__content .spa__book__btn3 .book__btn {
    position: relative;
    left: -17px;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 10px;
}

.newadd-views a {
    text-decoration: none;
    position: relative;
    top: -20px;
    left: 10px;
}

.newadd-views a button {
    color: var(--bg-color);
    font-size: 15px;
    font-weight: 600;
    background: var(--whites);
    border: 1px solid rgb(201, 20, 20);
    padding: 9px 20px;
    width: 130px;
    height: 40px;
    border-radius: 5px;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        background: rgb(201, 20, 20);
        color: var(--whites);
    }
}

.mob__rating__badge {
    background-color: var(--bg-color);
    width: 150px;
    position: relative;
    top: -48px;
    left: -55px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 2px inset;
    padding: 3px 4px 3px 4px;
}

.mob__rating__badge a {
    text-decoration: none;
}

.mob__rating__badge a p {
    display: block;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
}

.mob__new__spaadd .mob__spaCategory {
    position: relative;
    top: -24px;
    width: 98px;
    left: 75px;
    background-color: #fefefe;
    border-top-left-radius: 5px;
    color: rgb(201, 20, 20);
    border: 1px solid rgb(201, 20, 20);
    border-top-right-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 4px inset;
}

.mob__new__spaadd .mob__spaCategory a {
    text-decoration: none;
}

.mob__new__spaadd .mob__spa__img {
    height: 155px;
    width: 235px;
}

.mob__new__spaadd .mob__spa__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    margin-top: 1px;
    border-top-right-radius: 10px;
}

.mob__new__spaadd .mob__spaCategory a p {
    display: block;
    margin: 0 auto;
    text-align: center;
    color: var(--p-color);
    font-weight: 600;
    font-size: 14px;
    padding: 2px 4px 2px 4px;
}

.mob__spa_content {
    position: relative;
    top: -25px;
    display: block;
    margin: 0 auto;
}

.mob__spa_content .spa__name {
    padding-left: 15px;
    padding-right: 15px;
}

.mob__spa_content .spa__name p {
    font-size: 19px;
    font-weight: 600;
    max-width: 14rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--p-color);
}

.mob__spa_content .spa__address {
    padding-left: 15px;
    padding-right: 15px;
}

.mob__spa_content .spa__address p {
    max-width: 14rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    position: relative;
    top: -12px;
    font-weight: 500;
}

.mob__spa_content .spa__address p i {
    color: var(--p-color);
}

.mob__spa_content .price {
    position: relative;
    top: -15px;
    padding-left: 8px;
    padding-right: 7px;
}

.mob__spa_content .price .disc__offer {
    display: inline-block;
    background-color: var(--bg-color);
    /* -webkit-border-radius: 3px 4px 4px 3px; */
    -moz-border-radius: 3px 4px 4px 3px;
    border-radius: 3px 4px 4px 3px;
    border-left: 1px solid #6ab070;
    margin-left: 18px;
    position: relative;
    color: white;
    font-weight: 700;
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    padding: 0px 4px 0px 4px;
}

/* Makes the triangle */
.mob__spa_content .price .disc__offer:before {
    content: "";
    position: absolute;
    display: block;
    left: -11px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid var(--p-color);
}

/* Makes the circle */
.mob__spa_content .price .disc__offer:after {
    content: "";
    background-color: white;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    left: -7px;
    top: 9px;
}

.mob__spa_content .price p {
    font-size: 14px;
}

.mob__card__content {
    color: #000000;
    position: absolute;
    top: 0px;
    left: 0;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.mob__new__spaadd:hover .mob__card__content {
    transform: rotateX(0deg);
}

.mob__card__content .spa__book__btn3 .view__buttons {
    position: relative;
    top: -20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: -15px;
}

.chutkee__addtowish {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.945);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.3s ease;
}

.spaCard__container {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    margin: 14px auto;
    max-width: 420px;
    box-shadow: 0 6px 25px rgba(255, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #ffe5e5;
}

.spaCard__container:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.15);
}

/* Title */
.spaCard__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c1121f;
    display: flex;
    align-items: center;
    gap: 6px;
}

.spaCard__title i {
    color: #e63946;
    background: #ffe5e5;
}

/* Rating */
.spaCard__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.spaCard__rating .bi-star-fill {
    color: #ffb703;
    font-size: 0.9rem;
}

.spaCard__rating a {
    font-size: 0.85rem;
    color: #6c757d;
    text-decoration: none;
}

.spaCard__rating img {
    margin-left: 8px;
}

/* Divider */
.spaCard__divider {
    width: 100%;
    height: 1px;
    background: #ffe5e5;
    margin: 10px 0;
}

/* Address */
.spaCard__address {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

.spaCard__addressIcon {
    color: #e63946;
}

/* Button */
.spaBtn__direction {
    background: linear-gradient(135deg, #ff2e63, #c1121f);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 8px 20px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.25);
}

.spaBtn__direction:hover {
    background: linear-gradient(135deg, #c1121f, #a40e1b);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
    transform: scale(1.03);
}

/* Price Section */
.spaPrice__section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-start;
}

.spaPrice__current {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c1121f;
}

.spaPrice__original {
    font-size: 0.9rem;
    color: #999;
}

.spaPrice__offer {
    font-size: 0.8rem;
    color: #fff;
    background: #c1121f;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.2);
}

/* Mobile Optimization */
@media (max-width: 480px) {
    .spaCard__container {
        padding: 14px;
        margin: 10px;
    }

    .spaCard__title {
        font-size: 1rem;
    }

    .spaBtn__direction {
        font-size: 0.85rem;
        padding: 6px 16px;
    }
}

/* ---------- Section Headers ---------- */
.estal-section-header {
    background: var(--bg-color);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin: 20px 10px 10px;
    font-size: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.estal-section-header i {
    margin-right: 8px;
}

/* ---------- Details ---------- */
.estal-detail {
    padding: 12px 20px;
    border-bottom: 1px solid #f2f2f2;
}

.estal-detail h5 {
    color: #e41e26;
    font-weight: 600;
    font-size: 1rem;
}

.estal-detail p,
.estal-detail span {
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ---------- Service Cards ---------- */
.estal-service-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    padding: 15px;
    margin: 10px;
}

.estal-service-card h5 {
    position: relative;
    background: var(--bg-color);
    max-width: max-content;
    padding: 4px 10px;
    color: #fff;
    font-size: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    font-weight: 600;
}

.estal-service-card h5 i {
    margin-right: 6px;
    color: #fff;
}

.estal-service-card h5::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 3px;
    /* transform: rotate(180deg); */
    background: var(--bg-color);
}

.estal-service-card h6 {
    font-size: 0.95rem;
    color: #555;
    position: relative;
    padding-left: 8px;
}

.estal-service-card h6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 16px;
    transform: rotate(180deg);
    background: var(--bg-color);

}

.estal-service-card i {
    color: #e41e26;
}

/* ---------- Report ---------- */
.estal-report {
    background: #fff5f5;
    border-radius: 15px;
    padding: 20px;
    margin: 20px 10px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.estal-report h4 {
    color: #e41e26;
    margin-bottom: 10px;
}

.estal-report button {
    background: #e41e26;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s;
}

.estal-report button:hover {
    background: #b8151b;
}

/* ---------- Scrollable Categories ---------- */
.estal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px;
    margin: 10px;
}

.estal-cat-card {
    min-width: 130px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.estal-cat-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-bottom: 2px solid #e41e26;
}

.estal-cat-card a {
    display: block;
    color: #e41e26;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px;
    text-decoration: none;
}

@media (max-width: 768px) {
    .estal-title {
        font-size: 1rem;
    }

    .estal-detail p {
        font-size: 0.85rem;
    }

    .estal-service-card h6 {
        font-size: 0.85rem;
    }
}

.estal-btn {
    background: linear-gradient(90deg, #e41e26, #ff4d4d);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 18px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.estal-btn:hover {
    background: #b8151b;
}

/* Card */
.spalist-spa-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-bottom: 2px solid var(--p-color);
    margin: 20px auto;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease;

}

.spalist-spa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(201, 20, 20, 0.4);
}

/* Carousel */
.spalist-carousel-container {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.spalist-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    scroll-behavior: smooth;
}

/* .spalist-carousel-item {
    min-width: 100%;
    position: relative;
}
.spalist-carousel-item{
    cursor: pointer;
    background-image: url('../athome/img/services/spa.jpg');
    background-size: cover;
    background-position: center;    
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    background-repeat: no-repeat;
    width: 170px;
    height: 170px;
}
.spalist-carousel-item img {
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    object-fit: cover;
    display: block;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
} */

.spalist-carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: rgba(201, 20, 20, 0.85);
    color: white;
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    transition: height 0.3s ease;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* .spalist-carousel-item:hover .spalist-carousel-overlay {
    height: 50px;
} */

.spalist-carousel-wrap {
  width: 100%;
  -webkit-overflow-scrolling: touch; /* smooth touch */
}

/* core horizontal scroller */
.spalist-carousel-item {
  display: flex;
  gap: 12px;
  overflow-x: auto;             
  overflow-y: hidden;          
  scroll-behavior: smooth;
  padding: 10px 6px;
  align-items: center;
  /* ensure children don't wrap */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.spalist-item {
  flex: 0 0 auto;               
  width: 170px;                 
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* image fits the tile */
.spalist-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* small hover/active effect */
.spalist-item:active img,
.spalist-item:focus img,
.spalist-item:hover img {
  transform: scale(1.04) rotateY(4deg);
  box-shadow: 0 10px 30px rgba(201,20,20,0.12);
}

/* hide scrollbar — webkit */
.spalist-carousel-item::-webkit-scrollbar { height: 0; background: transparent; }

/* hide scrollbar — Firefox */
.spalist-carousel-item { scrollbar-width: none; -ms-overflow-style: none; }

/* If parent has display:flex and causes cropping, force isolation */
.spalist-carousel-wrap { isolation: isolate; }

/* optional: responsive size */
@media (min-width: 420px) {
  .spalist-item { width: 200px; height: 140px; }
}

/* Arrows */
.spalist-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background: linear-gradient(45deg, rgba(201, 20, 20, 0.8), rgba(255, 90, 90, 0.8));
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.spalist-arrow:hover {
    background: rgba(201, 20, 20, 0.9);
    transform: scale(1.1);
}

.spalist-arrow-left {
    left: 10px;
}

.spalist-arrow-right {
    right: 10px;
}

/* Carousel Dots */
.spalist-carousel-dots {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
    z-index: 20;
}

.spalist-carousel-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #fff;
    opacity: 0.5;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
}

.spalist-carousel-dots span.active {
    opacity: 1;
    transform: scale(1.2);
}

/* Discount Ribbon */
.spalist-ribbon {
    position: absolute;
    top: 12px;
    left: -5px;
    background: rgb(201, 20, 20);
    color: white;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    transform: rotate(-15deg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Badge */
.spalist-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: linear-gradient(45deg, rgb(201, 20, 20), #ff5a5a);
    color: white;
    padding: 5px 12px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Details */
.spalist-details {
    padding: 18px 20px;
}

.spalist-details h2 {
    font-size: 20px;
    font-weight: 700;
    color: rgb(201, 20, 20);
    margin-bottom: 6px;
}

.spalist-star-rating {
    display: flex;
    gap: 2px;
    font-size: 14px;
    margin-bottom: 6px;
}

.spalist-star-rating i {
    color: #ddd;
    transition: color 0.3s ease;
}

.spalist-star-rating i.filled {
    color: gold;
}

.spalist-loc p {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8px;
    max-width: 100%;       /* Ensures it doesn’t overflow container */
    word-wrap: break-word; /* Breaks long words if necessary */
    overflow: hidden;      /* Prevents overflow */
    text-overflow: ellipsis; /* Optional: show ... for very long text */
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}

.spalist-loc p i {
    color: rgb(201, 20, 20);
    margin-right: 4px;
}


.spalist-rate p {
    font-size: 15px;
    font-weight: 600;
    color: rgb(201, 20, 20);
}

.spalist-rate del {
    font-size: 12px;
    color: #888;
    margin-left: 5px;
}

.spalist-disc {
    font-size: 11px;
    background: rgb(201, 20, 20);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.spalist-book-btn {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}
.spalist-book-btn div a {
    text-decoration: none;
}
.spalist-btn {
    border: none;
    outline: none;
    border-radius: 30px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease, box-shadow 0.3s ease;
}

.spalist-btn-book {
    background: linear-gradient(45deg, rgb(201, 20, 20), #ff5a5a);
    color: white;
    box-shadow: 0 4px 12px rgba(201, 20, 20, 0.5);
    text-shadow: 1px 1px 5px rgba(201, 20, 20, 0.2);

}

.spalist-btn-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(201, 20, 20, 0.6);
}

.spalist-btn-view {
    background: transparent;
    border: 1px solid rgb(201, 20, 20);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    text-shadow: 1px 1px 5px rgba(201, 20, 20, 0.2);
    color: rgb(201, 20, 20);
}

.spalist-btn-view:hover {
    background: rgb(201, 20, 20);
    color: white;
    transform: translateY(-2px);
}

/* Floating container */
.appbook-float {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 99999;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

/* Button look */
.appbook-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ff6b00, rgb(201, 20, 20));
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-weight: 600;
  font-size: 15px;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Icon */
.appbook-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 16px;
}

/* Text */
.appbook-text {
  display: inline-block;
  line-height: 1;
}

/* Hover / active */
.appbook-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  opacity: 0.98;
}

.appbook-btn:active {
  transform: translateY(-2px) scale(.995);
}

@media screen and (max-width: 420px) {
  .appbook-float {
    bottom: 70px;
    right: 6px;
    justify-content: center;
  }
}

/* Optional accessibility focus style */
.appbook-btn:focus {
  outline: 3px solid rgba(255, 255, 255, 0.18);
  outline-offset: 4px;
}


/* === Card Container === */
.spa4d__card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15),
              inset 0 1px 1px rgba(255,255,255,0.5);
  /* overflow: hidden; */
  max-width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  position: relative;
  /* padding: 0 10px; */

}
/* HTML: <div class="ribbon">Your text content</div> */
.category-ribbon {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.category-ribbon {
  --r: .4em; /* control the ribbon shape (the radius) */
  --c: rgb(201, 20, 20); /* control the ribbon color */

  position: absolute;
  top: 170px;
  z-index: 10;
  right: calc(-1*var(--r));
  line-height: 1.8; 
  padding: calc(2*var(--r)) .9em 0;
  border-radius: 0 var(--r) var(--r) 0;
  background: 
    radial-gradient(100% 50% at right,var(--c) 98%,#0000 101%)
     0 100%/.5lh calc(100% - 2*var(--r)),
    radial-gradient(100% 50% at left,#0005 98%,#0000 101%) 
     100% 0/var(--r) calc(2*var(--r)),
    conic-gradient(at calc(100% - var(--r)) calc(2*var(--r)),var(--c) 75%,#0000 0)
     100% 0/calc(101% - .5lh) 100%;
  background-repeat: no-repeat;   
}
.spa4d__card:hover {
  transform: rotateY(7deg) rotateX(3deg) scale(1.02);
  box-shadow: 0 20px 40px rgba(201,20,20,0.3);
}
/* .spa4d__card::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 30% 30%, rgba(201,20,20,0.15), transparent 60%);
  z-index: 0;
} */

/* === Image Section === */
.spa4d__image {
  position: relative;
  overflow: hidden;
width: 100%;
  height: 190px;
  border-bottom: 3px solid rgb(201, 20, 20);
}
.spa4d__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transform: scale(1.03); */
  transition: transform 0.6s ease;
   border-top-left-radius: 22px;
   border-top-right-radius: 22px;
}
.spa4d__card:hover .spa4d__image img { transform: scale(1.1);
 border-top-left-radius: 22px;
   border-top-right-radius: 22px; }

.spa4d__offer {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgb(201, 20, 20);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(201,20,20,0.3);
  z-index: 2;
}

/* === Info Section === */
.spa4d__info {
  position: relative;
  z-index: 1;
  padding: 12px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-radius: 0 0 22px 22px;
}
.spa4d__title {
  font-size: 18px;
  font-weight: 700;
  color: rgb(201, 20, 20);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.spa4d__rating {
  font-size: 14px;
  color: #ffb400;
  font-weight: 600;
}
.spa4d__rating a {
    font-size: 13px;
    color: #555;
    margin-left: 6px;
    text-decoration: none;
}
.spa4d__location {
  font-size: 14px;
  color: #555;
  margin-top: 3px;
}
.spa4d__location .bi {
    color: rgb(201, 20, 20);
    margin-right: 4px;
}
/* === Price Section === */
.spa4d__pricebox {
  margin-top: 14px;
}
.spa4d__price {
  font-weight: 700;
  color: rgb(201, 20, 20);
  font-size: 18px;
}
.spa4d__price-old {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
  margin-left: 6px;
}
.spa4d__priceinfo {
  font-size: 13px;
  color: #777;
  margin-top: 2px;
}

/* === Buttons === */
.spa4d__actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
  }

.spa4d__btn-book,
.spa4d__btn-view {
  flex: 1;
  border: none;
  padding: 10px 0;
  font-weight: 600;
  border-radius: 30px;
  transition: all 0.3s ease;
}
.spa4d__btn-book a{
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
      color: #fff;
}
.spa4d__btn-view a {
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
}
.spa4d__btn-book {
  background: rgb(201, 20, 20);
  text-transform: capitalize;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.spa4d__btn-whatsapp a {
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
}
.spa4d__btn-whatsapp {
    /* padding: 10px 0; */
  font-weight: 600;
  border-radius: 30px;
    background: #25d366;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    color: #fff;
    border: 1.5px solid #25d366;
  }

  .spa4d__btn-whatsapp:hover {
    background: #1eb954;
  }
.spa4d__btn-book:hover { background: #b81515; }
.spa4d__btn-view {
  background: #fff;
  color: rgb(201, 20, 20);
  border: 1.2px solid rgb(201, 20, 20);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.spa4d__btn-view:hover {
  background: rgb(201, 20, 20);
  color: #fff !important;
}

/* === Services Section === */
.spa4d__services {
  margin-top: 18px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}
.spa4d__services-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
  font-size: 15px;
}
.spa4d__services-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth; 
  padding-bottom: 10px;
}
.spa4d__service {
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(201,20,20,0.1), rgba(255,255,255,0.6));
  border: 1px solid rgba(201,20,20,0.3);
  color: rgb(201, 20, 20);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(201,20,20,0.08);
  transition: 0.3s ease;
  backdrop-filter: blur(4px);
}
.spa4d__service:hover {
  background: rgb(201, 20, 20);
  color: #fff;
  box-shadow: 0 5px 20px rgba(201,20,20,0.3);
}
.spa4d__services-scroll::-webkit-scrollbar {
  height: 0px;
  background: transparent;
}

.founds__spas {
  display: flex;
  width: 100%;
  gap: 5px;
  margin-top: 26px;
  margin-bottom: 20px;
}
.founds__spas .found__area {
  width: calc(100% - 20%);
  position: relative;
  /* left: 25px; */
}
.founds__spas .found__area  p {
  font-size: clamp(14px, 2vw, 20px);
  font-family: arno pro;
  font-weight: 700;
}

.scroll__city__area {
    /*overflow-x: scroll;*/
    width: 100%;
}

.scroll__city__area .scroll__main__area {
    background: transparent;
    box-sizing: border-box;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-box-align: stretch;
    align-items: stretch;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    padding-left: 8px;
    padding-bottom: 7px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; 
    padding-top: 5px;
}

.scroll__city__area .scroll__main__area::-webkit-scrollbar {
    display: none;
}

.scroll__city__area .scroll__main__area>a {
    text-decoration: none;
}

.near__me {
    display: flex;
    flex-direction: column;
    width: 72px;
    margin: 0 2px;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    padding: 8px;
    border-radius: 10px;
    border-bottom: 1px dashed rgb(201, 20, 20);
}

.near__me .icon {
    background: rgb(201, 20, 20);
    color: #ffffff;
    width: 60px;
    height: 42px;
    border-radius: 6px;
}

.near__me .icon i {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: block;
    margin: 0 auto;
    margin-top: 8px;
}

.near__me .near__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
    font-weight: 600;
    width: 72px;
    margin-top: 8px;
    margin-bottom: 0px;
    align-self: center;
    text-align: center;
    color: #111111;
    box-sizing: border-box;
}

.city__area .icon {
    background: rgb(201, 20, 20);
    color: #ffffff;
    width: 60px;
    height: 42px;
    border-radius: 6px;
}

.city__area .icon i {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: block;
    margin: 0 auto;
    margin-top: 8px;
}

.city__area .near__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
    font-weight: 600;
    width: 72px;
    margin-top: 8px;
    margin-bottom: 0px;
    align-self: center;
    text-align: center;
    color: #111111;
    box-sizing: border-box;
}


.city__area {
    display: flex;
    flex-direction: column;
    width: 72px;
    margin: 0 2px;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    padding: 8px;
    border-radius: 10px;
    border-bottom: 1px dashed rgb(201, 20, 20);
}

.city__area .city__img {
    width: 60px;
    height: 42px;
    border-radius: 6px;
    box-sizing: border-box;
    animation: none;
    background: #ffffff;
    color: rgba(0, 0, 0, 0.54);
}

.city__area .city__img .spa__img__hori {
    object-fit: cover;
    width: 60px;
    height: 42px;
    vertical-align: middle;
    border-radius: 7px;
}

::placeholder {
    color: #000;
    font-size: 14px;
}

.city__area .city__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
    font-weight: 600;
    width: 72px;
    margin-top: 8px;
    margin-bottom: 0px;
    align-self: center;
    text-align: center;
    color: #111111;
    box-sizing: border-box;
}
.scroll__collection__area .scroll__category__area a .premium__area {
    text-decoration: none;
    color: inherit;
    height: auto;
    min-width: 121px;
    min-height: 121px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    position: relative;
    padding-right: 12px;
    box-sizing: border-box;
}

.scroll__collection__area .scroll__category__area a .luxury__area {
    text-decoration: none;
    color: inherit;
    height: auto;
    min-width: 121px;
    min-height: 121px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    position: relative;
    padding-right: 12px;
    box-sizing: border-box;
}

.about-one {
  padding: 120px 0px;
  position: relative;
}
@media (max-width: 991px) {
  .about-one {
    padding: 100px 0px;
  }
}
@media (max-width: 767px) {
  .about-one {
    padding: 80px 0px;
  }
}
.about-one__thumb {
  position: relative;
  z-index: 1;
}
.about-one__thumb__item {
  margin-left: 70px;
  margin-right: 50px;
  position: relative;
  overflow: hidden;
  height: 555px;
  border-radius: 42px 55px 42px 55px;
}
@media (max-width: 1199px) {
  .about-one__thumb__item {
    margin-left: 40px;
    margin-right: 0px;
  }
}
.about-one__thumb__item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.about-one__thumb__item__element {
  position: absolute;
  top: 0;
  /* height: 470px; */
  right: 0;
}
.about-one__thumb__item__element img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.about-one__thumb__line {
  display: flex;
  gap: 10px;
  position: absolute;
  top: 0;
  left: 10px;
  animation: top-bottom-two 3s ease-in-out infinite;
}
.about-one__thumb__line span {
  height: 216px;
  width: 2px;
  background-color: #CBA36B;
}
.about-one__thumb__line span:nth-child(2) {
  margin-top: 10px;
}
.about-one__thumb__line span:nth-child(3) {
  margin-top: 20px;
}
.about-one__thumb__element {
  position: relative;
  z-index: 1;
  animation: top-bottom-two 4s ease-in-out infinite;
  /* margin-left: -20px; */
}
@media (max-width: 1199px) and (min-width: 992px) {
  .about-one__thumb__element {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about-one__thumb__element {
    margin-left: 0;
  }
}
.about-one__thumb__shape-two {
  position: absolute;
  bottom: 10px;
  left: 15px;
}

.about-thumbs-twos {
    position: absolute;
    bottom: -20px;
    right: 2px;
    z-index: 1;
    animation: top-bottom-two 4s ease-in-out infinite;
    /* margin-left: -20px; */
    width: 150px;
    height: 220px;
    background: #00000062;
    backdrop-filter: blur(10px);
    border-radius: 240px;
    overflow: hidden;
    border: 1px solid #b8b5b5;
    border-color: #fefefe;
    padding: 10px;
}
.about-thumbs-twos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 214px;
    border-bottom: 3px solid #f7f4f4;
}
@keyframes top-bottom-two {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}

.about-thumbs-upper {
    position: absolute;
    top: 0px;
    left: 2px;
    z-index: 1;
    animation: zoomAnimation 4s ease-in-out infinite;
    /* margin-left: -20px; */
    width: 170px;
    height: 170px;
    overflow: hidden;
}
.about-thumbs-upper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes zoomAnimation {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.about-section-two .content-column {
  position: relative;
  margin-bottom: 50px;
  z-index: 1;
}
.about-section-two .content-column .inner-column .sec-title {
    margin-bottom: 32px;
}
.content-column .inner-column {
    position: relative;
}
.sec-title {
    position: relative;
    margin-bottom: 72px;
}


.sec-title h2 {
    position: relative;
    font-size: 38px;
    color: #222222;
    font-weight: 600;
    line-height: 1.14em;
    letter-spacing: -0.3px;
    margin-bottom: 0;
}

.sec-title .shape-image1 {
    margin-bottom: 15px;
    position: absolute;
    top: 0;
    left: 46px;
}

    .whats-call-btn-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      padding: 15px 20px;
      flex-wrap: wrap;
      background: #ffffff44;
      border-radius: 20px;
      backdrop-filter: blur(11px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      max-width: 900px;
      margin: 80px auto;
      z-index: 10;
    }

    /* WhatsApp Card */
    .chat-us a {
      display: flex;
      align-items: center;
      gap: 15px;
      background: linear-gradient(135deg, #25D366, #128C7E);
      color: #fff;
      text-decoration: none;
      padding: 7px 28px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25);
      transition: all 0.3s ease;
    }

    .chat-us a:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
    }

    .chat-us i {
      font-size: 28px;
      background: rgba(255,255,255,0.15);
      padding: 2px;
      border-radius: 50%;
    }

    .chat-us span {
      font-size: 17px;
      letter-spacing: 0.3px;
    }

    /* Call Info Card */
    .call-info {
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 14px;
      padding: 7px 28px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .call-info:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    }

    .icon-box {
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      color: #fff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      margin-right: 15px;
    }

    .call-info-content .text {
      font-size: 14px;
      color: #6b7280;
      margin-bottom: 2px;
    }

    .call-number {
      color: #111827;
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .call-number:hover {
      color: #2563eb;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .whats-call-btn-box {
        flex-direction: column;
        gap: 20px;
        padding: 12px 15px;
      }

      .chat-us a, .call-info {
        width: 100%;
        justify-content: center;
      }
    }

    .about-thumbs-rights {
    position: absolute;
    bottom: -50px;
    right: 40px;
    z-index: -3;
    animation: circularRotate 4s ease-in-out infinite;
    /* margin-left: -20px; */
    width: 220px;
    height: 220px;
    background: #00000017;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #b8b5b5;
    border-color: #fefefe;
    padding: 10px;
}
.about-thumbs-rights img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border-bottom: 3px solid #f7f4f4;
}
@keyframes circularRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.about-thumbs-rights2 {
    position: absolute;
    bottom: -65px;
    right: 0px;
    /* margin-left: -20px; */
    width: 89px;
    height: 150px;
    z-index: -4;
 
}
.about-thumbs-rights2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 214px;
    border-bottom: 3px solid #f7f4f4;
}