<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midtown Hotel | Services</title>
    <?php require('./components/link.php') ?>
    <style>
        .service-hero, .sauna-service{
            position: relative;
            height: 100vh;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            animation: service-slide 15s infinite;
            display: flex;
            flex-direction: column;
        }
        @keyframes service-slide{
            0%{
                background-image: url(images/service1.jpg);
            }
            33%{
                background-image: url(images/service1.jpg);
            }
            33.01%{
                background-image: url(images/service_page2.jpg);
            }
            66%{
                background-image: url(images/service_page2.jpg);
            }
            66.01%{
                background-image: url(images/service_page3.jpg);
            }
            100%{
                background-image: url(images/service_page3.jpg);
            }
        }
        .pre-header-subtitle{
            width: 30%;
        }
        .service-frame{
            display: flex;
            align-items: center;
            gap: 20px; 
            margin-bottom: 50px;
        }
        .service-frame1{
            width: 60px; 
            height: 80px; 
            border: 1px solid black;
        }
        .service-frame2{
            width: 40px; 
            height: 60px; 
            border: 1px solid black; 
            margin-top: 10px; 
            margin-left: 10px; 
            display: flex; 
            justify-content: center; 
            align-items: center;
            font-size: 30px;
        }
        .service-title{
            text-transform: uppercase; 
            letter-spacing: 5px;
            font-size: 12px;
        }
        .service-subtilte{
            width: 50%;
            font-size: 50px;
            font-weight: 500;
            margin-bottom: 50px;
            text-align: center;
        }
        .flip-container{
            display: flex;
            flex-direction: row;
            gap: 20px;
            width: 90%;
            align-items: center;
            justify-content:center;
        }
        .flip-card{
            background-color: transparent;
            width: 400px;
            height: 500px;
        }
        .flip-card-inner{
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .flip-card:hover .flip-card-inner{
            transform: rotateY(180deg);
        }
        .flip-card-front, .flip-card-back{
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .flip-card-font-title{
            position: absolute; 
            align-items: center; 
            display: flex; 
            justify-content: center; 
            width:100%; 
            height:100%;
            padding: 20px;
            font-size: 34px;
            font-weight: 500;
            color: white;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .flip-card-back{
            background-color: white;
            color: #1F1914;
            transform: rotateY(180deg);
            display: flex; 
            flex-direction: column;
            justify-content: center;
            align-items: center; 
        }
        .sauna-container{
            width: 90%;
            height: 100vh;
            display:flex;
            justify-content: space-between;
            gap: 50px;
        }
        .sauna-wrapper{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .sauna-service{
            animation: sauna-slide 5s infinite;
            height: 80vh;
            width: 60%;
        }
        @keyframes sauna-slide{
            0%{
                background-image: url(images/service2.jpg);
            }
            50%{
                background-image: url(images/service2.jpg);
            }
            50.01%{
                background-image: url(images/service_page2.jpg);
            }
            100%{
                background-image: url(images/service_page2.jpg);
            }
        }
        .sauna-text{
            width: 90%;
            display: flex; 
            justify-content: space-between; 
            border-bottom: 1px solid #B3A398; 
            padding-top: 30px;
            padding-bottom: 30px;
            font-size: 20px;
        }
        /*----- Responsive -----*/
        @media (max-width:980px){
            .pre-header-subtitle{
                width: 80%;
            }
            .service-frame1{
                width: 40px; 
                height: 60px; 
            }
            .service-frame2{
                width: 20px; 
                height: 40px;
                font-size: 16px;
            }
            .service-subtilte{
                width: 90%;
            }
            .sauna-container{
                width: 100%;
                flex-direction: column;
            }
            .sauna-service{
                height: 50vh;
                width: 90%;
            }
        }
        @media (max-width:768px) {
            .service-subtilte{
                font-size: 40px;
            }
            .flip-container{
                flex-direction: column;
            }
            .flip-card {
                width: 320px;
                height: 450px;
            }
            .sauna-text{
                padding-top: 5px;
                padding-bottom: 5px;
                font-size: 16px;
            }
        }
        @media (max-width:450px) {
            .service-subtilte{
                font-size: 30px;
            }
            .sauna-container{
                gap: 0px;
            }
            .service-hero{
                height: 80vh;
            }
        }
    </style>
</head>
<body>
    <!--Hero & Navbar section-->
    <div class="service-hero">
        <div class="load"></div>
        <?php require('./components/header.php') ?>
        <div class="hero-content">
            <div class="hero-head">
                <h1 class="hero-title">Services and Facilities</h1>
                <p class="hero-subtitle">Exceptional service - endless possibilities</p>
            </div>
        </div>
    </div>
    <!--pre section-->
    <div class="panel" data-color="white">
        <img src="./images/logo.png" class="pre-header-img" style="width: 100px; margin-bottom: 40px;"/>
        <h1 class="pre-header">We craft enchanting moments of tranquility and serenity, far away from the chaos and stress of daily life</h1>
        <p class="pre-header pre-header-subtitle" style="font-size: 16px;">We ensure the well-being of your body, invigorate your senses, and provide tranquility for your mind. Our pools, suana, and massage therapy have become synonymous with relaxation and wellness.</p>
    </div>
    <!--pool section-->
    <div class="panel" data-color="blue">
        <div class="service-frame">
            <div class="service-frame1">
                <div class="service-frame2">I</div>
            </div>
            <p class="service-title">Pools</p>
        </div>
        <p class="service-subtilte">Relax with massaging spa jets in the perfect water temperature</p>
        <div class="flip-container">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front"> 
                        <div class="flip-card-font-title">
                            <p>Outdoor Relaxation Pool</p>
                        </div>
                        <img src="./images/presec2.jpg" alt="Avatar" style="width:100%; height:100%;">
                    </div>
                    <div class="flip-card-back">
                        <p style="color: #B0A695; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;">Seasonal</p>
                        <h3>Outdoor Pool</h3>
                        <p style="font-size: 14px; padding: 10px;">Our guests can enjoy an outdoor relaxation and leisure pool with a summer bar from May until September</p>
                    </div>
                </div>
            </div>
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front"> 
                        <div class="flip-card-font-title">
                            <p> Indoor Relaxation Pool</p>
                        </div>
                        <img src="./images/service_page1.jpg" alt="Avatar" style="width:100%; height:100%;">
                    </div>
                    <div class="flip-card-back">
                        <p style="color: #B0A695; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;">All season</p>
                        <h3>Indoor Pool</h3>
                        <p style="font-size: 14px; padding: 10px;"> Throughout the year and regardless of the weather conditions, 
                        there is an indoor pool dedicated to relaxation and rest with measuring 22 x 20 m</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--sauna section-->
    <div class="panel" data-color="pink">
        <div class="service-frame" style="margin-top: 100px;">
            <div class="service-frame1">
                <div class="service-frame2">II</div>
            </div>
            <p class="service-title">Sauna</p>
        </div>
        <p class="service-subtilte">Recharge batteries and strengthen immune system with sauna</p>
        <p class="pre-header" style="font-size: 18px;">Imagine the blissful experience of indulging in the rejuvenating benefits of a Finnish or steam sauna. 
        Enhance your immune system in an infrared sauna. Immerse yourself in the aromatic essence of herb, eucalyptus, or menthol saunas, and feel the instant refreshment </p>
    </div>
    <div class="panel" data-color="pink">
        <div class="sauna-container">
            <div class="sauna-wrapper">
                <div class="sauna-service">
                    <div class="load"></div>
                </div>
            </div>
            <div class="sauna-wrapper">
                <div class="sauna-text">
                    <p>Eucalyptus sauna</p>
                    <p>45 - 50°C</p>
                </div>
                <div class="sauna-text">
                    <p>Finnish sauna</p>
                    <p>70 - 95°C</p>
                </div>
                <div class="sauna-text">
                    <p>Herbal sauna</p>
                    <p>45 - 50°C</p>
                </div>
                <div class="sauna-text">
                    <p>Infrared sauna</p>
                    <p>40 - 60°C</p>
                </div>
                <div class="sauna-text">
                    <p>Mentol sauna</p>
                    <p>45 - 58°C</p>
                </div>
                <div class="sauna-text">
                    <p>Steam sauna</p>
                    <p>45 - 55°C</p>
                </div>
            </div>
        </div>
    </div>
    <!--massage section-->
    <div class="panel" data-color="white">
        <div class="service-frame" style="margin-top: 100px;">
            <div class="service-frame1">
                <div class="service-frame2">III</div>
            </div>
            <p class="service-title">Massage</p>
        </div>
        <p class="service-subtilte">Relax, Rejuvenate, and Unwind with Every Touch</p>
        <p class="pre-header" style="font-size: 18px;">The challenges of everyday life can place a significant burden on your physical well-being. 
        This is why it is crucial to prioritize self-care. Our massage sessions are dedicated to ensuring your body functions optimally,
        enabling you to participate in activities such as completing a half marathon without any hindrances</p>
    </div>
    <div class="panel" data-color="white">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/service3.jpg"/>
                </div>
                <div class="swiper-slide">
                    <img src="./images/service_page3.jpg"/>
                </div>
            </div>
        </div>
        <div class="pre-section2-container">
            <div class="pre-section2-wrapper">
                <div class="pre-section2-text">
                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Aromatherapy massages </p>
                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Deep tissue massages </p>
                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Hot stone massages</p>
                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Thai massages</p>
                    <p><i class='bx bx-leaf' style="color: #B0A695;"></i> Swedish massage</p>
                </div>
            </div>
        </div>
    </div>
    <!--footer-->
    <?php require('./components/footer.php'); ?>

    <?php require('./components/script.php') ?>
</body>
</html>