Access_New/demo-spa-salon.html
2024-09-05 11:33:27 +05:45

688 lines
41 KiB
HTML

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/spa-salon/spa-salon.css" />
</head>
<body class="overflow-x-hidden" data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent center-logo disable-fixed">
<div class="container-fluid">
<div class="col-auto col-lg-2 menu-logo">
<div class="d-none d-lg-block">
<a href="tel:1800222000" class="widget-text text-white-hover fs-16 lg-fs-15"><i class="feather icon-feather-phone icon-small me-5px lg-me-2px"></i>1 800 222 000</a>
</div>
<a class="navbar-brand" href="demo-spa-salon.html">
<img src="images/demo-spa-salon-logo-white.png" data-at2x="images/demo-spa-salon-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-spa-salon-logo-white.png" data-at2x="images/demo-spa-salon-logo-white@2x.png" alt class="alt-logo">
<img src="images/demo-spa-salon-logo-black.png" data-at2x="images/demo-spa-salon-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order">
<button class="navbar-toggler float-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav navbar-left justify-content-end">
<li class="nav-item"><a href="demo-spa-salon.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-spa-salon-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-spa-salon-treatments.html" class="nav-link">Treatments</a></li>
</ul>
<ul class="navbar-nav navbar-right justify-content-start">
<li class="nav-item"><a href="demo-spa-salon-packages.html" class="nav-link">Packages</a></li>
<li class="nav-item"><a href="demo-spa-salon-facility.html" class="nav-link">Facility</a></li>
<li class="nav-item"><a href="demo-spa-salon-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end">
<div class="header-icon">
<div class="header-social-icon icon">
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="p-0 bg-dark-gray">
<div class="swiper full-screen ipad-top-space-margin md-h-600px sm-h-500px swiper-number-pagination-style-01 magic-cursor drag-cursor base-color" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-number&quot;, &quot;clickable&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 5000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;fade&quot; }" data-number-pagination="1" data-anime-text="{ &quot;translateY&quot;: [50,0], &quot;opacity&quot;: [0,1], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: { &quot;staggervalue&quot;: 20 } }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-spa-salon-slider-01.jpg');" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [1,1], &quot;scale&quot;: [1,1.1], &quot;duration&quot;: 7000, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></div>
<div class="opacity-light bg-gradient-nero-grey-brown"></div>
<div class="container h-100">
<div class="row align-items-center h-100 justify-content-center">
<div class="col-xl-8 col-lg-9 position-relative text-white text-center">
<span class="fs-15 d-block mb-15px ls-4px text-uppercase" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: 200 }">Unforgettable treat</span>
<div class="alt-font fs-80 sm-fs-60 xs-fs-50 mb-40px w-80 lg-w-100 md-w-90 sm-w-100 mx-auto sm-mb-35px anime-text ls-minus-2px" data-fancy-text="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;string&quot;: [&quot;Relax your mind soul and body&quot;], &quot;duration&quot;: 500, &quot;delay&quot;: 200, &quot;speed&quot;: 10, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></div>
<a href="demo-spa-salon-contact.html" class="btn btn-medium fw-500 btn-double-border btn-border-color-transparent-white" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;delay&quot;: 800, &quot;duration&quot;: 800 }">
<span>
<span class="btn-double-text" data-text="Book appointment">Book appointment</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-spa-salon-slider-03.jpg');" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [1,1], &quot;scale&quot;: [1,1.1], &quot;duration&quot;: 7000, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></div>
<div class="opacity-light bg-gradient-nero-grey-brown"></div>
<div class="container h-100">
<div class="row align-items-center h-100 justify-content-center">
<div class="col-xl-8 col-lg-9 position-relative text-white text-center">
<span class="fs-15 d-block mb-15px ls-4px text-uppercase" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: 200 }">Ayurvedic treatments</span>
<div class="alt-font fs-80 sm-fs-60 xs-fs-50 mb-40px w-80 lg-w-100 md-w-90 sm-w-100 mx-auto sm-mb-35px anime-text ls-minus-2px" data-fancy-text="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;string&quot;: [&quot;Help for your mind relaxing&quot;], &quot;duration&quot;: 500, &quot;delay&quot;: 200, &quot;speed&quot;: 10, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></div>
<a href="demo-spa-salon-contact.html" class="btn btn-medium fw-500 btn-double-border btn-border-color-transparent-white" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;delay&quot;: 800, &quot;duration&quot;: 800 }">
<span>
<span class="btn-double-text" data-text="Book appointment">Book appointment</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-spa-salon-slider-02.jpg');" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [1,1], &quot;scale&quot;: [1,1.1], &quot;duration&quot;: 7000, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></div>
<div class="opacity-light bg-gradient-nero-grey-brown"></div>
<div class="container h-100">
<div class="row align-items-center h-100 justify-content-center">
<div class="col-xl-8 col-lg-9 position-relative text-white text-center">
<span class="fs-15 d-block mb-15px ls-4px text-uppercase" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: 200 }">Therapy packages</span>
<div class="alt-font fs-80 sm-fs-60 xs-fs-50 mb-40px w-80 lg-w-100 md-w-90 sm-w-100 mx-auto sm-mb-35px anime-text ls-minus-2px" data-fancy-text="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;string&quot;: [&quot;Therapy for rest and relaxation&quot;], &quot;duration&quot;: 500, &quot;delay&quot;: 200, &quot;speed&quot;: 10, &quot;easing&quot;: &quot;easeOutQuad&quot; }"></div>
<a href="demo-spa-salon-contact.html" class="btn btn-medium fw-500 btn-double-border btn-border-color-transparent-white" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;delay&quot;: 800, &quot;duration&quot;: 800 }">
<span>
<span class="btn-double-text" data-text="Book appointment">Book appointment</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination container right-0px text-center swiper-pagination-clickable swiper-number fs-14 xs-w-100"></div>
<div class="slider-one-slide-prev-1 icon-very-small text-white swiper-button-prev slider-navigation-style-06 bg-black-transparent-light h-55px w-55px d-none d-sm-flex border-radius-100"><i class="fa-solid fa-chevron-left"></i></div>
<div class="slider-one-slide-next-1 icon-very-small text-white swiper-button-next slider-navigation-style-06 bg-black-transparent-light h-55px w-55px d-none d-sm-flex border-radius-100"><i class="fa-solid fa-chevron-right"></i></div>
</div>
</section>
<section class="pt-60px pb-60px background-repeat border-bottom border-color-light-gray" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="container-fluid ps-9 pe-9 lg-ps-1 lg-pe-1 md-ps-15px md-pe-15px">
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-03 border-end border-color-light-gray md-mb-30px xs-border-end-0">
<div class="feature-box ps-8 pe-8 xl-ps-2 xl-pe-2">
<div class="feature-box-icon">
<i class="line-icon-Medal-2 icon-extra-large text-base-color mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray alt-font fs-22">Ultra luxury studio</span>
<p class="lh-26">Modern infrastructure</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03 border-end border-color-light-gray md-mb-30px md-border-end-0">
<div class="feature-box ps-8 pe-8 xl-ps-2 xl-pe-2">
<div class="feature-box-icon">
<i class="line-icon-Moustache-Smiley icon-extra-large text-base-color mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray alt-font fs-22">Certified manpower</span>
<p class="lh-26">Amazing experience</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03 border-end border-color-light-gray xs-border-end-0 xs-mb-30px">
<div class="feature-box ps-8 pe-8 xl-ps-2 xl-pe-2">
<div class="feature-box-icon">
<i class="line-icon-Tree-3 icon-extra-large text-base-color mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray alt-font fs-22">Natural environment</span>
<p class="lh-26">Unwind and discover joy</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-03">
<div class="feature-box ps-8 pe-8 xl-ps-2 xl-pe-2">
<div class="feature-box-icon">
<i class="line-icon-Environmental-3 icon-extra-large text-base-color mb-20px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block text-dark-gray alt-font fs-22">Ayurvedic therapy</span>
<p class="lh-26">Herbal remedies</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="background-repeat" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="container">
<div class="row align-items-center mb-10 md-mb-17 xs-mb-25">
<div class="col-xl-5 col-lg-6 md-mb-70px sm-mb-45px">
<span class="fs-15 mb-15px text-base-color fw-500 d-block text-uppercase ls-2px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">About studio</span>
<h3 class="alt-font ls-minus-1px text-dark-gray w-80 xl-w-90 md-w-100" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 0, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Relax at the luxury spa massage and therapy studio.</h3>
<p class="w-80 md-w-100 mb-40px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 200, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">A design-led approach guides the team, implementing practices, products and services that are thoughtful and environmentally sound. Family of professionals that creates intelligent designs that help the face of hospitality.</p>
<div class="d-inline-block w-100" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;:300, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<a href="demo-spa-salon-about.html" class="btn btn-small btn-double-border btn-border-base-color me-25px xs-me-15px">
<span>
<span class="btn-double-text" data-text="Explore more">Explore more</span>
<span><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
<div class="fw-500 d-inline-block align-middle text-dark-gray fs-18 xs-mt-20px xs-mb-20px"><i class="bi bi-telephone-outbound icon-small me-10px"></i><a href="tel:1800222000">1 800 222 000</a></div>
</div>
</div>
<div class="col-xl-6 col-lg-5 position-relative offset-lg-1 offset-md-2">
<span class="position-absolute fs-75 left-20px top-80px text-dark-gray fw-600 z-index-1 ls-minus-4px lg-top-40px" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 1000, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><span class="fs-15 d-table lh-16 text-uppercase text-medium-gray fw-500 ls-1px">Started in</span>1995</span>
<div class="w-80 overflow-hidden position-relative md-w-90 border-radius-6px float-end" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#F4866E&quot;, &quot;direction&quot;:&quot;rl&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 600, &quot;delay&quot;:500}">
<img class="w-100" src="images/demo-spa-salon-home-01.jpg" alt>
</div>
<div class="position-absolute left-minus-70px bottom-minus-30px w-60 overflow-hidden md-left-minus-100px sm-left-15px" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#36332e&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 600, &quot;delay&quot;:500}">
<img class="w-100 border-radius-6px" src="images/demo-spa-salon-home-02.jpg" alt>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 text-center text-sm-start" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;:300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col last-paragraph-no-margin sm-mb-30px">
<h2 class="fw-600 ls-minus-3px text-dark-gray m-0">9.98<sup><i class="bi bi-arrow-up-short icon-medium text-base-color animation-float"></i></sup></h2>
<p class="text-dark-gray lh-28">Google reviews</p>
</div>
<div class="col last-paragraph-no-margin sm-mb-30px">
<h2 class="fw-600 ls-minus-3px text-dark-gray m-0">30k<sup><i class="bi bi-arrow-up-short icon-medium text-base-color animation-float"></i></sup></h2>
<p class="text-dark-gray lh-28">Instagram followers</p>
</div>
<div class="col last-paragraph-no-margin xs-mb-30px">
<h2 class="fw-600 ls-minus-3px text-dark-gray m-0">96%<sup><i class="bi bi-arrow-up-short icon-medium text-base-color animation-float"></i></sup></h2>
<p class="text-dark-gray lh-28">Repeat customers</p>
</div>
<div class="col last-paragraph-no-margin">
<h2 class="fw-600 ls-minus-3px text-dark-gray m-0">28+<sup><i class="bi bi-arrow-up-short icon-medium text-base-color animation-float"></i></sup></h2>
<p class="text-dark-gray lh-28">Years of experience</p>
</div>
</div>
</div>
</section>
<section class="background-repeat border-top border-color-light-gray position-relative overlap-height z-index-1" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="position-absolute right-minus-50px overlap-section z-index-minus-1 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-02.png" alt>
</div>
<div class="position-absolute left-minus-100px top-50 z-index-minus-1 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-03.png" alt>
</div>
<div class="container overlap-gap-section">
<div class="row justify-content-center mb-2">
<div class="col-lg-6 col-md-8 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;:0, &quot;duration&quot;: 600, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-15 mb-5px text-base-color fw-500 d-block text-uppercase ls-2px">Luxury services</span>
<h3 class="alt-font ls-minus-1px text-dark-gray w-65 xl-w-80 sm-w-100 mx-auto">Explore our spa and body services</h3>
</div>
</div>
<div class="row mb-5 xs-mb-15px">
<div class="col-12 position-relative">
<div class="outside-box-right-40 sm-outside-box-right-0">
<div class="swiper magic-cursor drag-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 3000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-three-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper pt-20px pb-20px">
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden hover-box dark-hover">
<div class="col-sm-6 position-relative bg-very-light-gray p-10 xxl-p-6 xs-p-10">
<div class="services-box-icon mb-65px position-relative z-index-9 lg-mb-30px">
<img class="w-75px lg-w-65px" src="images/demo-spa-salon-icon-01.png" alt>
</div>
<div class="services-box-content last-paragraph-no-margin position-relative z-index-9">
<span class="d-inline-block alt-font text-dark-gray fs-24 mb-5px">Beauty</span>
<p class="text-light-opacity lh-30">Bring brighter and younger looking skin.</p>
</div>
<div class="box-overlay bg-dark-gray"></div>
</div>
<div class="col-sm-6 services-box-img overflow-hidden">
<div class="h-100 cover-background position-relative xs-h-300px" style="background-image: url('images/demo-spa-salon-home-03.jpg')">
<span class="position-absolute left-minus-30px bottom-50px fs-100 lg-fs-80 xs-fs-90 fw-600 text-very-light-gray xl-bottom-25px md-left-minus-20px">01</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden hover-box dark-hover">
<div class="col-sm-6 position-relative bg-very-light-gray p-10 xxl-p-6 xs-p-10">
<div class="services-box-icon mb-65px position-relative z-index-9 lg-mb-30px">
<img class="w-75px lg-w-65px" src="images/demo-spa-salon-icon-02.png" alt>
</div>
<div class="services-box-content last-paragraph-no-margin position-relative z-index-9">
<span class="d-inline-block alt-font text-dark-gray fs-24 mb-5px">Therapy</span>
<p class="text-light-opacity lh-30">Bring brighter and younger looking skin.</p>
</div>
<div class="box-overlay bg-dark-gray"></div>
</div>
<div class="col-sm-6 services-box-img">
<div class="h-100 cover-background position-relative xs-h-300px" style="background-image: url('images/demo-spa-salon-home-04.jpg')">
<span class="position-absolute left-minus-30px bottom-50px fs-100 lg-fs-80 xs-fs-90 fw-600 text-very-light-gray xl-bottom-25px md-left-minus-20px">02</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden hover-box dark-hover">
<div class="col-sm-6 position-relative bg-very-light-gray p-10 xxl-p-6 xs-p-10">
<div class="services-box-icon mb-65px position-relative z-index-9 lg-mb-30px">
<img class="w-75px lg-w-65px" src="images/demo-spa-salon-icon-03.png" alt>
</div>
<div class="services-box-content last-paragraph-no-margin position-relative z-index-9">
<span class="d-inline-block alt-font text-dark-gray fs-24 mb-5px">Massage</span>
<p class="text-light-opacity lh-30">Bring brighter and younger looking skin.</p>
</div>
<div class="box-overlay bg-dark-gray"></div>
</div>
<div class="col-sm-6 services-box-img">
<div class="h-100 cover-background position-relative xs-h-300px" style="background-image: url('images/demo-spa-salon-home-05.jpg')">
<span class="position-absolute left-minus-30px bottom-50px fs-100 lg-fs-80 xs-fs-90 fw-600 text-very-light-gray xl-bottom-25px md-left-minus-20px">03</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden hover-box dark-hover">
<div class="col-sm-6 position-relative bg-very-light-gray p-10 xxl-p-6 xs-p-10">
<div class="services-box-icon mb-65px position-relative z-index-9 lg-mb-30px">
<img class="w-75px lg-w-65px" src="images/demo-spa-salon-icon-01.png" alt>
</div>
<div class="services-box-content last-paragraph-no-margin position-relative z-index-9">
<span class="d-inline-block alt-font text-dark-gray fs-24 mb-5px">Beauty</span>
<p class="text-light-opacity lh-30">Bring brighter and younger looking skin.</p>
</div>
<div class="box-overlay bg-dark-gray"></div>
</div>
<div class="col-sm-6 services-box-img overflow-hidden">
<div class="h-100 cover-background position-relative xs-h-300px" style="background-image: url('images/demo-spa-salon-home-03.jpg')">
<span class="position-absolute left-minus-30px bottom-50px fs-100 lg-fs-80 xs-fs-90 fw-600 text-very-light-gray xl-bottom-25px md-left-minus-20px">01</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden hover-box dark-hover">
<div class="col-sm-6 position-relative bg-very-light-gray p-10 xxl-p-6 xs-p-10">
<div class="services-box-icon mb-65px position-relative z-index-9 lg-mb-30px">
<img class="w-75px lg-w-65px" src="images/demo-spa-salon-icon-02.png" alt>
</div>
<div class="services-box-content last-paragraph-no-margin position-relative z-index-9">
<span class="d-inline-block alt-font text-dark-gray fs-24 mb-5px">Therapy</span>
<p class="text-light-opacity lh-30">Bring brighter and younger looking skin.</p>
</div>
<div class="box-overlay bg-dark-gray"></div>
</div>
<div class="col-sm-6 services-box-img">
<div class="h-100 cover-background position-relative xs-h-300px" style="background-image: url('images/demo-spa-salon-home-04.jpg')">
<span class="position-absolute left-minus-30px bottom-50px fs-100 lg-fs-80 xs-fs-90 fw-600 text-very-light-gray xl-bottom-25px md-left-minus-20px">02</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-0 services-box-style-02 border-radius-6px overflow-hidden hover-box dark-hover">
<div class="col-sm-6 position-relative bg-very-light-gray p-10 xxl-p-6 xs-p-10">
<div class="services-box-icon mb-65px position-relative z-index-9 lg-mb-30px">
<img class="w-75px lg-w-65px" src="images/demo-spa-salon-icon-03.png" alt>
</div>
<div class="services-box-content last-paragraph-no-margin position-relative z-index-9">
<span class="d-inline-block alt-font text-dark-gray fs-24 mb-5px">Massage</span>
<p class="text-light-opacity lh-30">Bring brighter and younger looking skin.</p>
</div>
<div class="box-overlay bg-dark-gray"></div>
</div>
<div class="col-sm-6 services-box-img">
<div class="h-100 cover-background position-relative xs-h-300px" style="background-image: url('images/demo-spa-salon-home-05.jpg')">
<span class="position-absolute left-minus-30px bottom-50px fs-100 lg-fs-80 xs-fs-90 fw-600 text-very-light-gray xl-bottom-25px md-left-minus-20px">03</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-5 xs-mb-8">
<div class="col-12 text-center">
<h5 class="alt-font text-dark-gray">Revitalize your senses and refresh? <a href="demo-spa-salon-packages.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom">Explore package</a></h5>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<ul class="pricing-table-style-12 pe-15px md-pe-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-06.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-22 alt-font text-dark-gray">Makeup & massage</span>
<div class="divider-style-03 divider-style-03-02 border-color-light-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font text-dark-gray"><sub>$</sub>43</div>
</div>
<p>50 Minute relaxation massage.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-07.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-22 alt-font text-dark-gray">Relaxing head</span>
<div class="divider-style-03 divider-style-03-02 border-color-light-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font text-dark-gray"><sub>$</sub>45</div>
</div>
<p>One of the best ways to relax head.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-08.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-22 alt-font text-dark-gray">Geothermal spa</span>
<div class="divider-style-03 divider-style-03-02 border-color-light-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font text-dark-gray"><sub>$</sub>39</div>
</div>
<p>Comforting stimulating atmosphere.</p>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="pricing-table-style-12 ps-15px md-ps-0 md-pt-20px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-09.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-22 alt-font text-dark-gray">Body relaxation</span>
<div class="divider-style-03 divider-style-03-02 border-color-light-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font text-dark-gray"><sub>$</sub>35</div>
</div>
<p>Progressive muscle relaxation.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-10.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-22 alt-font text-dark-gray">Finnish sauna</span>
<div class="divider-style-03 divider-style-03-02 border-color-light-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font text-dark-gray"><sub>$</sub>55</div>
</div>
<p>Traditional finnish sauna experience.</p>
</div>
</li>
<li class="last-paragraph-no-margin">
<img src="images/demo-spa-salon-home-11.jpg" class="w-120px border-radius-100" alt>
<div class="ms-30px xs-ms-0 flex-grow-1">
<div class="d-flex align-items-center w-120 fs-18">
<span class="fs-22 alt-font text-dark-gray">Aromatherapy</span>
<div class="divider-style-03 divider-style-03-02 border-color-light-gray flex-grow-1 ms-20px me-20px"></div>
<div class="ms-auto fs-26 alt-font text-dark-gray"><sub>$</sub>35</div>
</div>
<p>Using concentrated essential oils.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="background-repeat border-top border-color-light-gray position-relative overlap-height z-index-1" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="overlap-section text-center mb-6 z-index-minus-1 d-none d-md-block">
<img src="images/demo-spa-salon-bg-img-04.jpg" alt>
</div>
<div class="position-absolute right-minus-100px top-50 z-index-minus-1 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-05.png" alt>
</div>
<div class="container overlap-gap-section">
<div class="row align-items-center position-relative justify-content-center justify-content-lg-start">
<div class="position-absolute left-0px top-0px h-100 w-130px d-none d-lg-inline-block">
<div class="vertical-title-center align-items-center justify-content-center">
<div class="title fs-16 ls-2px text-uppercase">Spa therapy for <span class="text-dark-gray fw-600">rest</span> and <span class="text-dark-gray fw-600 fancy-text-style-4"><span data-fancy-text="{ &quot;effect&quot;: &quot;rotate&quot;, &quot;string&quot;: [&quot;Relaxation&quot;, &quot;Enjoyment&quot;, &quot;Happiness&quot;], &quot;speed&quot;: 50 }"></span> </span></div>
</div>
</div>
<div class="col-lg-5 col-md-11 position-relative offset-lg-1 md-mb-35px">
<img src="images/demo-spa-salon-home-12.jpg" class="w-100 border-radius-4px" alt>
</div>
<div class="col-xl-5 col-lg-6 col-md-11 ps-8 md-ps-15px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-15 lg-10px mb-5px text-base-color fw-500 d-block text-uppercase ls-2px">Benefits of spa</span>
<h3 class="alt-font ls-minus-1px text-dark-gray">100% natural and organic products.</h3>
<p class="w-80 xl-w-90 md-w-100 mb-10px">Everybody is looking for places where to relax and get more energy. Revitalize your senses and refresh your mind.</p>
<ul class="p-0 list-style-01 fs-20 alt-font mb-25px">
<li class="border-color-light-gray pt-15px pb-15px text-dark-gray">Increased happiness</li>
<li class="border-color-light-gray pt-15px pb-15px text-dark-gray">Promotes radiant skin</li>
<li class="border-color-light-gray pt-15px pb-15px text-dark-gray">Promotes a better sleep</li>
</ul>
<div class="d-inline-block w-100">
<a href="demo-spa-salon-treatments.html" class="btn btn-small btn-double-border btn-border-base-color">
<span>
<span class="btn-double-text" data-text="View treatments">View treatments</span>
<span><i class="fa-solid fa-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="background-repeat p-0" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="container-fluid p-0">
<div class="row align-items-center g-0 justify-content-center">
<div class="col">
<div class="divider-style-03 divider-style-03-01 border-color-light-gray"></div>
</div>
<div class="col-5 col-lg-2 col-sm-3 text-center position-relative">
<img src="images/demo-spa-salon-home-13.png" class="animation-rotation" alt>
<div class="absolute-middle-center lg-w-75"><img src="images/demo-spa-salon-home-14.png" alt></div>
</div>
<div class="col">
<div class="divider-style-03 divider-style-03-01 border-color-light-gray"></div>
</div>
</div>
</div>
</section>
<section class="background-repeat overlap-height position-relative pt-4 md-pt-8" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="position-absolute left-minus-100px top-50 d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="images/demo-spa-salon-bg-img-03.png" alt>
</div>
<div class="container overlap-gap-section">
<div class="row justify-content-center mb-6 md-mb-8 xs-mb-40px">
<div class="col-xl-10 testimonials-style-11 position-relative ps-15 pe-15 sm-ps-15px sm-pe-15px text-center">
<div class="swiper slider-custom-text" data-slider-options="{ &quot;loop&quot;: true, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.swiper-button-next-nav&quot;, &quot;prevEl&quot;: &quot;.swiper-button-previous-nav&quot;, &quot;effect&quot;: &quot;fade&quot; } }">
<div class="swiper-wrapper">
<div class="swiper-slide text-center">
<h6 class="alt-font lh-40 text-dark-gray mb-20px">The wonderful services you offer locally are great for our community. People are tired of having to travel out of town for things.</h6>
<span class="fs-15 text-base-color fw-500 d-block text-uppercase ls-2px">Jonsan donner</span>
<span class="fs-14 lh-20 text-dark-gray fw-500 text-uppercase d-block ls-05px">Relax massage</span>
</div>
<div class="swiper-slide text-center">
<h6 class="alt-font lh-40 text-dark-gray mb-20px">This place is beautiful. The outside, the inside, staff communication is all on point! The staff is very friendly, informative and patient.</h6>
<span class="fs-15 text-base-color fw-500 d-block text-uppercase ls-2px">Lauren cruikshank</span>
<span class="fs-14 lh-20 text-dark-gray fw-500 text-uppercase d-block ls-05px">Relax massage</span>
</div>
<div class="swiper-slide text-center">
<h6 class="alt-font lh-40 text-dark-gray mb-20px">The ambiance as soon as you enter puts you at ease immediately. The staff is so sweet and generous and the services they offer are to die for!</h6>
<span class="fs-15 text-base-color fw-500 d-block text-uppercase ls-2px">Rosemary downing</span>
<span class="fs-14 lh-20 text-dark-gray fw-500 text-uppercase d-block ls-05px">Scalp massage</span>
</div>
</div>
</div>
<div class="swiper-button-previous-nav swiper-button-prev slider-custom-text-prev fs-14 text-uppercase text-dark-gray fw-500 ls-1px">prev</div>
<div class="swiper-button-next-nav swiper-button-next slider-custom-text-next fs-14 text-uppercase text-dark-gray fw-500 ls-1px">next</div>
</div>
</div>
<div class="row row-cols-2 row-cols-lg-6 row-cols-sm-3 text-center justify-content-center clients-style-05" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col md-mb-30px">
<div class="client-box">
<a href="demo-spa-salon.html#"><img src="images/demo-spa-salon-client-01.png" class="h-110px" alt></a>
</div>
</div>
<div class="col md-mb-30px">
<div class="client-box">
<a href="demo-spa-salon.html#"><img src="images/demo-spa-salon-client-02.png" class="h-110px" alt></a>
</div>
</div>
<div class="col md-mb-30px">
<div class="client-box">
<a href="demo-spa-salon.html#"><img src="images/demo-spa-salon-client-03.png" class="h-110px" alt></a>
</div>
</div>
<div class="col xs-mb-30px">
<div class="client-box">
<a href="demo-spa-salon.html#"><img src="images/demo-spa-salon-client-04.png" class="h-110px" alt></a>
</div>
</div>
<div class="col">
<div class="client-box">
<a href="demo-spa-salon.html#"><img src="images/demo-spa-salon-client-05.png" class="h-110px" alt></a>
</div>
</div>
<div class="col">
<div class="client-box">
<a href="demo-spa-salon.html#"><img src="images/demo-spa-salon-client-06.png" class="h-110px" alt></a>
</div>
</div>
</div>
</div>
</section>
<footer class="half-footer pb-45px border-top border-color-light-gray background-repeat" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="container">
<div class="overlap-section position-absolute left-0px right-0px text-center d-none d-md-inline-block" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;scale&quot;: [0.7, 1], &quot;rotateZ&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img src="images/demo-spa-salon-home-15.png" alt class="lg-w-20">
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 last-paragraph-no-margin me-auto z-index-1 text-center text-sm-start xs-mb-20px">
<span class="fs-20 fw-500 text-dark-gray d-block mb-5px">Studio location</span>
<p class="w-100">401 Broadway, 24th Floor<br>New York, NY 10013.</p>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 last-paragraph-no-margin text-center text-sm-end z-index-1">
<span class="fs-20 fw-500 text-dark-gray d-block mb-5px">How can we help?</span>
<a href="cdn-cgi/l/email-protection.html#8ae3e4ece5caf3e5fff8eee5e7ebe3e4a4e9e5e7"><span class="__cf_email__" data-cfemail="d1b8bfb7be91a8bea4a3b5bebcb0b8bfffb2bebc">[email&#160;protected]</span></a><br>
<a href="cdn-cgi/l/email-protection.html#9bf3e9dbe2f4eee9fff4f6faf2f5b5f8f4f6"><span class="__cf_email__" data-cfemail="d5bda795acbaa0a7b1bab8b4bcbbfbb6bab8">[email&#160;protected]</span></a>
</div>
</div>
<div class="row align-items-center justify-content-center mt-20px mb-10px md-mb-20px">
<div class="col d-none d-md-flex">
<div class="divider-style-03 divider-style-03-01 border-color-light-gray"></div>
</div>
<div class="col-xl-4 col-lg-5 col-md-7 text-center elements-social social-icon-style-04">
<ul class="large-icon dark mb-0">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
</ul>
</div>
<div class="col d-none d-md-flex">
<div class="divider-style-03 divider-style-03-01 border-color-light-gray"></div>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6 last-paragraph-no-margin text-center text-md-start sm-mb-10px">
<p>&COPY; 2024 <a href="index.html" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-500">Crafto.</a> All rights reserved.</p>
</div>
<div class="col-md-6 text-center text-md-end last-paragraph-no-margin">
<p>Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-500">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-spa-salon.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>