<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midtown Hotel | About the hotel</title>
    <?php require('./components/link.php') ?>
    <style>
        .about-hero{
            position: relative;
            height: 100vh;
            background-size: cover;
            background-position: center;
            background-image: url(images/about.jpg);
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        .about-container{
            width: 90%;
            height: 95vh;
        }
        .about-title{
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 3px;
            color: #B0A695;
            text-shadow: 2px 2px 1px #EAD8C0;
        }
        .about-subtitle{
            font-size: 26px;
            text-transform: uppercase;
            width: 500px;
        }
        .about-wrapper{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }
        .about-wrap{
            width: 100%;
            height: 100%; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center;
        }
        .about-container-title{
            font-size: 16px; 
            text-transform: uppercase; 
            font-weight: 500; 
            letter-spacing: 3px; 
            color: #776B5D; 
            text-shadow: 2px 2px 1px #B0A695; 
            text-align: center; 
            margin-top: 50px;"
        }
        .about-wrapper-img{
            width: 100%; 
            height: 90%; 
            border: 1px solid #B0A695;
            padding: 10px;
        }
        .about-img{
            width: 60%; 
            height: 40%; 
            object-fit: cover;
        }
        .about-text{
            max-width: 650px; 
            text-align: center; 
            margin: auto;
            font-size: 16px;
        }
        .about-subcontainer{
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            width: 100%;
            text-align: center;
            gap: 30px;
        }
        .about-subwrapper{
            width: 100%;
            justify-content: center;
            align-items: center;
        }
        .about-subwrapper-img{
            width: 90%;
        }
        .about-subwrapper-text{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .about-subwrapper-title{
            font-size: 16px;
            text-transform: uppercase;
        }
        @media (max-width:1200px){
            .about-wrapper-img{
                height: 80%;
            }
        }
        @media (max-width:980px){
            .about-pre-title{
                display: flex;
                justify-content: center;
                font-size: 24px;
                text-transform: uppercase;
                font-weight: 500;
                letter-spacing: 3px;
                color: #B0A695;
                text-shadow: 2px 2px 1px #EAD8C0;
                margin-top: 50px;
            }
            .about-wrap{ 
                justify-content: center; 
                align-items: start;
                flex-direction: row;
            }
            .about-wrapper{
                flex-direction: column;
                gap: 20px;
            }
            .about-subtitle{
                font-size: 18px;
                width: 100%;
                padding: 0px 20px 0px 20px;
            }
            .about-wrapper-img{ 
                height: 60%; 
            }
            .about-img{
                width: 100%; 
                height: 50%;
            }
            .about-subcontainer{
                flex-direction: column;
                width: 100%;
                gap: 20px;
            }
            .about-container-title{; 
                margin-top: -50px;"
            }
        }
        @media (max-width:550px) {
            .about-subtitle{
                font-size: 12px;
                width: 100%;
                padding: 0px 10px 0px 10px;
            }
            .about-img{
                width: 230px;
            }
        }
        @media (max-width:450px) {
            .about-pre-title{
                margin-top: 30px;
            }
            .about-hero{
                height: 80vh;
            }
            .about-wrapper-img{ 
                height: 100%; 
            }
            .about-text{
                font-size: 12px;
            }
            .about-img{
                width: 200px;
            }
        }
    </style>
</head>
<body>
    <!--Hero & Navbar section-->
    <div class="about-hero">
        <?php require('./components/header.php') ?>
        <div class="hero-content">
            <div class="hero-head">
                <h1 class="hero-title">About the Hotel</h1>
                <p class="hero-subtitle">Midtown Hotel, where quality and great atmosphere unite</p>
            </div>
        </div>
    </div>
    <!--pre section-->
    <div class="panel" data-color="white">
        <div class="about-container">
            <div class="about-wrapper">
                <div class="about-wrapper-img">
                    <img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/>
                </div>
                <div class="about-wrap">
                    <img src="./images/home4.jpg" class="about-img"/>
                    <div style="margin-top: 20px;">
                        <p class="about-title">Our vision</p>
                        <p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel" data-color="cream">
        <div class="about-container">
            <p class="about-container-title" >History</p>
            <p style="width: 100%; font-size: 24px; text-transform: uppercase; text-align: center; font-weight: 500;">From the <span style="color: #776B5D;">beginning</span></p>
            <p class="about-text">We ensure that each guest receives individualized care and attention.
                 Your visit will be enriched with distinctive and tailored experiences</p>
            <div class="about-subcontainer">
                <div class="about-subwrapper">
                    <img src="./images/about.jpg" class="about-subwrapper-img"/>
                </div>
                <div class="about-subwrapper" style="background-color: pink;">
                    <div class="about-subwrapper-text">
                        <p class="about-subwrapper-title">Background and future vision</p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!--footer-->
    <?php require('./components/footer.php'); ?>

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