:root {
    --white: #FFFFFF;
    --black: #000000;
    --transparent: #0000;

    --primary-color: #08415C;
    --secondary-color: #00FFCC;
    --lavender-blue: #E5E9FA;
    --pink: #FEE5F6;

    --border-color: #07eaa1;

    --cabin: 'Cabin', sans-serif;
    --century-schoolbook: 'Century Schoolbook', sans-serif;

    --fw-400: 400; /* Regular */
    --fw-500: 500; /* Medium */
    --fw-600: 600;  /* Semi-Bold */
    --fw-700: 700;  /* Bold */
}


/* ========== Common CSS Start ========== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { height: 100%; width: 100%; background-color: var(--white); color: var(--primary-color); font-weight: var(--fw-400); font-family: var(--cabin); line-height: 20px; font-size: 16px;  word-break: break-word; }

body:has(.other-header) { padding-top: 95px; }
body { padding-top: 152px; }

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

h1, h2, h3, h4, h5, h6 { font-family: var(--cabin); font-weight: var(--fw-700); color: var(--primary-color); }

p { font-size: inherit; font-family: inherit; font-weight: inherit; }

a { text-decoration: none; color: var(--primary-color); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; }


figure { margin: 0; padding: 0; }
.img-container * { height: 100%; width: 100%; object-fit: cover; object-position: center; }

.section-spacing-35 { padding: 35px 0; }
.section-spacing-55 { padding: 55px 0; }

.padding-top-90 { padding-top: 90px; }
/* ========== Common CSS End ========== */

/* ========== Common Text Start ========== */
.common-heading .title * { font-size: 24px; color: var(--primary-color); font-weight: var(--fw-700); line-height: 30px; margin-bottom: 16px; }
.common-heading .sub-title * { font-size: 20px; color: var(--primary-color); font-weight: var(--fw-700); line-height: 20px; }
.desc * { font-size: 16px; color: var(--primary-color); font-weight: var(--fw-400); line-height: 20px; margin-bottom: 0; }
/* ========== Common Text End ========== */

/* ========== Common Button Start ========== */

.btn { display: block; height: 100%; width: fit-content; padding: 8px 20px; border-radius: 25px !important; -webkit-border-radius: 25px !important; -moz-border-radius: 25px !important; -ms-border-radius: 25px !important; -o-border-radius: 25px !important; font-size: 16px; font-weight: var(--fw-600); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; border: 1px solid transparent; overflow: hidden; line-height: 17px; }

.btn.btn-primary { background-color: var(--transparent); color: var(--primary-color); border-color: var(--secondary-color); }
.btn.btn-primary:hover , .btn.btn-primary:active { background-color: var(--primary-color); color: var(--secondary-color) !important; border-color: var(--transparent); }

.btn.btn-secondary { background-color: var(--lavender-blue); color: var(--primary-color); border-color: var(--transparent); }

.btn.btn-secondary:hover , .btn.btn-secondary:active { background-color: var(--primary-color); color: var(--lavender-blue); border-color: var(--transparent); }

.btn.book-now-btn { background-color: var(--secondary-color); color: var(--primary-color); border-color: var(--transparent); padding-right: 31px; }

.btn.book-now-btn:active { background-color: var(--secondary-color); color: var(--primary-color); border-color: var(--transparent); padding-right: 31px; }

.book-now-btn { position: relative; overflow: hidden; }
.book-now-btn::after { position: absolute; content: ""; display: block; top: 50%; right: 16px; height: 10px; width: 10px; background-color: var(--transparent); border: 2px solid var(--primary-color); z-index: 1; transform: translate(0%,-50%); -webkit-transform: translate(0%,-50%); -moz-transform: translate(0%,-50%); -ms-transform: translate(0%,-50%); -o-transform: translate(0%,-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; user-select: none; pointer-events: none; }

.book-now-btn:hover::after { background-color: var(--primary-color); }

.btn.btn-link { text-decoration: none !important; padding: 0 !important; }
.btn.btn-link >* { padding: 5px !important; font-weight: var(--fw-400); }
.btn.btn-link:hover >* { text-decoration: underline !important; text-underline-offset: 2px; }
/* ========== Common Button End ========== */

/* ========== Header Start ========== */
.header { background-color: var(--white); position: fixed; top: 0; z-index: 9999; max-width: 1920px; width: 100%; margin: 0 auto; } 
.header .navbar { padding: 12px 0; }
.fancybox__container { z-index: 10000; }

.header .navbar .navbar-brand  { width: 198px; height: auto; padding: 0; margin-right: 30px; }
.header .navbar .navbar-brand * { width: 100%; height: 100%; }

.header .navbar .nav-item .nav-link { color: var(--primary-color) !important; width: fit-content; font-size: 16px; font-weight: var(--fw-600) !important; padding: 4px 8px; margin-right: 9px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; }
.header .navbar .nav-item:last-child .nav-link { margin-right: 17px; }
.header .navbar .nav-item .nav-link:hover { color: var(--secondary-color) !important; }

.header .navbar .nav-item .nav-link.active { color: var(--secondary-color) !important; }

.header .navbar-toggler { border: 0; }
.header .navbar-toggler:focus { box-shadow: unset; }
.header .hamburger-line { display: block; height: 4px; width: 22px; border-radius: 2px; background-color: var(--primary-color); margin: 2px 0; transition: .3s ease; opacity: 1; }

.header .hamburger:is(.hamburger-toggle) .line-1 { transform: rotate(45deg) translate(6px, 6px); width: 30px; }  
.header .hamburger:is(.hamburger-toggle) .line-2 { opacity: 0; }  
.header .hamburger:is(.hamburger-toggle) .line-3 { transform: rotate(-45deg) translate(5px, -6px); width: 30px; }

/* ========== Header End ========== */

/* ========== Footer Start ========== */
.footer .footer-top { padding: 30px 0; border-bottom: 1px solid var(--border-color); }
.footer .footer-bottom { padding: 30px 0; }

.footer .footer-top .footer-image-container { margin-right : 30px; }
.footer .footer-top .footer-image { width: 150px; min-width: 150px; height: auto; }
.footer .footer-top .footer-image >* { display: block; }
.footer .footer-top .footer-image * { width: 100%; height: 100%; }

.footer .footer-top .footer-details .address * { margin-bottom: 0; }
.footer .footer-top .footer-details .address { margin-bottom: 20px; }

.footer .footer-top .footer-details .contact >* { display: block; width: fit-content; }
.footer .footer-top .footer-details .contact >*:hover { text-decoration: underline !important; text-underline-offset: 2px; }

.footer .footer-link-list { list-style: none; }
.footer .footer-link-list .footer-link { margin-bottom: 5px; } 
.footer .footer-link-list .footer-link >* { display: block; padding: 5px 0; }
.footer .footer-link-list .footer-link >*:hover { text-decoration: underline !important; text-underline-offset: 2px; }

.footer .footer-top .footer-link-list { margin: 0; padding: 0; }
.footer .footer-top .footer-link-list:first-child { margin-right: 60px; }

.footer .footer-bottom .footer-link-list { margin-bottom: 0; padding: 0; flex-wrap: wrap; }
.footer .footer-bottom .footer-link-list .footer-link { margin: 0; }
.footer .footer-bottom .footer-link-list .footer-link * { padding: 0; margin: 0; }
.footer .footer-bottom .footer-link-list .footer-link { margin-right: 60px; padding: 0; }
.footer .footer-bottom .footer-link-list .footer-link:last-child { margin-right: 0; }

.footer .footer-right { margin-top: 24px; }
/* ========== Footer End ========== */

/* ========== Massage Types Start ========== */
.massage-types { padding: 20px 0 0 0; }

.massage-types .btn.btn-primary { margin: 0 18px 0 0; }
.massage-types .massage-types-content { max-width: 1046px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0; flex-wrap: wrap; }

.massage-types .btn.btn-primary { font-size: 20px; line-height: 22px; }
.massage-types .massage-types-link { list-style: none; margin-bottom: 20px; }
/* ========== Massage Types End ========== */

/* ========== Home Banner Start ========== */

.home-banner { padding-bottom: 30px; }

.home-banner .slick-slider { position: relative; width: 100%; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; overflow: hidden; }


.home-banner .slick-slider .slide img { width: 100%; height: 100% !important; display: block; }

.home-banner .slick-dots { position: absolute; list-style: none; bottom: 40px; right: 40px; display: flex !important; margin-bottom: 0; padding-left: 0; z-index: 3; }
.home-banner .slick-dots >* { margin-right: 10px; }
.home-banner .slick-dots >*:last-child { margin-right: 0; }

.home-banner .slick-dots li.slick-active { border-color: var(--secondary-color); }
.home-banner .slick-dots li.slick-active::after { opacity: 1; }

.home-banner .slick-dots li button { display: none !important; }

.home-banner .slick-dots li { position: relative; height: 20px; width: 20px; border-radius: 50%; background-color: var(--transparent);  -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; display: block; cursor: pointer; border: 2px solid var(--lavender-blue); }

.home-banner .slick-dots li::after { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 6px; width: 6px; display: block; background-color: var(--secondary-color); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; opacity: 0; }

.home-banner .image-content { position: relative; height: clamp(400px, 68.13px + 43.21vw, 591px); width: 100%; display: flex; align-items: end; background-size: cover !important; } /* height: 591px to 400px (1210 to 768) */
.home-banner .image-content .img-container { height: 100%; width: 100%; } 
.home-banner .image-content .img-container * { height: 100% !important; width: 100%; object-fit: cover; object-position: center; } 

.home-banner .image-content::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, .3); display: block; z-index: 1; user-select: none; pointer-events: none; }

.home-banner .custom-dots-1 { margin: 0; padding: 0; }
.home-banner .custom-dots-1 li { list-style: none; cursor: pointer; }
.home-banner .custom-dots-1 li * { color: var(--white) !important; font-family: var(--century-schoolbook); margin-bottom: 10px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; }

.home-banner .custom-dots-1 li.slick-active * { font-size: 32px; font-weight: var(--fw-700); }
.home-banner .custom-dots-1 li * { font-size: 24px; }


.home-banner .slider-container { position: relative; }
.home-banner .custom-dots-1 { position: absolute; bottom: 51px; left: 67px; }
/* ========== Home Banner End ========== */

/* ========== About Me Start ========== */
.about-me .image-content .images >* { border-radius: 20px; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.about-me .image-content .images .image-1 { max-width: 342px; width: 100%; margin-right: 17px; }
.about-me .image-content .images .image-2 { max-width: 193px; width: 100%; }
.about-me .image-content .img-container { height: 257px; }

.about-me .row { margin: 0 -19px; }
.about-me .row >* { padding: 0 19px; display: flex; justify-content: end; }

.about-me .text-content .desc { margin-bottom: 30px; }
.about-me .text-content .desc >* { margin-bottom: 20px; }

.about-me .image-content img { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
/* ========== About Me End ========== */

/* ========== Our Location Start ========== */
.our-location.section-spacing-35 { padding-bottom: 15px; }
.our-location .button-container { margin: 0; padding: 0; }
.our-location .button-container .btn { margin-right: 20px; margin-bottom: 20px; }
.our-location .button-container li:last-child .btn { margin-right: 0; }

.our-location .button-container { list-style: none; display: flex; align-items: center; flex-wrap: wrap; }

.our-location .row { margin: 0 -19px; }
.our-location .row >* { padding: 0 19px; }

.our-location .image-content { border-radius: 18px; overflow: hidden; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; margin-bottom: 36px; }

.our-location .img-container { height: 343px; }

.our-location .common-heading { margin-bottom: 32px; }

.our-location .map-container { height: 250px; border-radius: 20px; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; margin-bottom: 30px; }
.our-location .map-container >* { height: 100%; width: 100%; object-fit: cover; object-position: center; }

.our-location .right-block { margin-top: 50px; }

.our-location .btn.btn-secondary { font-weight: var(--fw-500); }
/* ========== Our Location End ========== */

/* ========== Customer Reviews Start ========== */

.customer-reviews .slider-container { max-width: 480px; width: 100%; border-radius: 20px;  -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; overflow: hidden; background-color: var(--pink); padding: 20px 27px 20px 43px; }

.customer-reviews .slider-container { position: relative; }

.customer-reviews .slider-btn-container { position: absolute; bottom: 20px; right: 17px; display: flex; }

.customer-reviews .slider-btn { width: 20px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 20px; }

.customer-reviews .common-heading .desc { margin-bottom: 20px; }
.customer-reviews .common-heading .desc >* { margin-bottom: 0; font-size: 20px; line-height: 26px; }

.customer-reviews .common-heading .people-details >* { margin-bottom: 0; font-style: italic; }

.customer-reviews .slick-arrow img { transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; }
.customer-reviews .slick-arrow:hover img { filter: brightness(0); -webkit-filter: brightness(0); }
/* ========== Customer Reviews End ========== */

/* ========== Massage Detail Start ========== */
.massage-detail .common-heading .desc >* { margin-bottom: 20px; }
.massage-detail .common-heading .desc ul { padding-left: 24px; margin-bottom: 0; }

.massage-detail .massage-detail-content { border-bottom: 1px solid var(--secondary-color); }

.massage-detail .image-content { width: 480px; height: auto; }
.massage-detail .img-container { height: clamp(290px, -30.00px + 100.00vw, 480px); border-radius: 20px; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } /* height: 480px to 290px (510 to 320) */

.massage-detail .row .col-12:nth-child(2) { display: flex; justify-content: end; }
.massage-detail .common-heading .desc strong { font-weight: var(--fw-700); display: block; margin-bottom: 6px; }
.massage-detail .common-heading .desc >*:last-child { margin-bottom: 0; }

.last-massage-detail .massage-detail-content { border-bottom: unset; }
/* ========== Massage Detail End ========== */

/* ========== Premises Start ========== */
.premises { padding: 65px 0 60px; }

.premises .premises-content { max-width: 978px; width: 100%; }

.premises .common-heading .title * { margin-bottom: 27px; }
.premises .common-heading .desc >* { margin-bottom: 20px; }
.premises .common-heading .desc >*:last-child { margin-bottom: 0; }
/* ========== Premises End ========== */

/* ========== Treatments Start ========== */
.treatments { padding-top: 60px; }
.treatments .col-lg-3 { display: flex; align-items: end; justify-content: end; }

.treatments .treatments-content { background-color: var(--lavender-blue); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; padding: 48px 0; }

.treatments .w-1040 { max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 15px; }

.treatments .title * { font-size: 20px; margin-bottom: 20px; }
.treatments .desc >* { margin-bottom: 20px; }
.treatments .desc >*:last-child { margin-bottom: 0; }

.treatments strong { font-weight: var(--fw-700); }

.treatments .common-heading { max-width: 720px; width: 100%; }
/* ========== Treatments End ========== */

/* ========== Other Header Start ========== */
.other-header .navbar .navbar-brand { width: 146px; }
.other-header .navbar { padding-top: 34px; }
/* ========== Other Header End ========== */