<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Comming soon | F - Studio</title>
    <link rel="icon" type="image/png" href="./assets/images/favicon.png">

    <!-- head -->
    <?php include("./includes/head.php"); ?>

</head>

<body>

    <div class="body-wrap">

        <!-- header -->
        <?php include("./includes/header.php"); ?>

        <main>
            <section class="coming-section">
                <div class="coming-wrapper">

                    <div class="coming-image">
                        <img src="./assets/images/comming-soon.webp" alt="Coming Soon">
                    </div>

                    <h2 class="coming-title">Coming Soon</h2>

                    <p class="coming-text">
                        We are working on something amazing. Stay tuned for exciting updates!
                    </p>

                    <div class="custom-btn">
                        <a href="index.php">Back to Home</a>
                    </div>

                </div>
            </section>

            <style>
                .coming-section {
                    min-height: 100vh;
                    background: #0B0D10;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 40px 20px;
                }

                .coming-wrapper {
                    max-width: 600px;
                }

                /* image */

                .coming-image img {
                    width: 100%;
                    max-width: 380px;
                    animation: float 4s ease-in-out infinite;
                }

                /* title */

                .coming-title {
                    color: #fff;
                    font-size: clamp(28px, 4vw, 40px);
                    margin-top: 20px;
                    font-weight: 600;
                }

                /* text */

                .coming-text {
                    color: #aaa;
                    margin-top: 10px;
                    font-size: 16px;
                }

                /* button */

                .custom-btn a {
                    display: inline-block;
                    margin-top: 25px;
                    padding: 12px 30px;
                    background: #D7A826;
                    color: #fff;
                    border-radius: 30px;
                    text-decoration: none;
                    transition: .3s;
                }

                .custom-btn a:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 10px 20px rgba(215, 168, 38, .4);
                }

                /* floating animation */

                @keyframes float {
                    0% {
                        transform: translateY(0);
                    }

                    50% {
                        transform: translateY(-15px);
                    }

                    100% {
                        transform: translateY(0);
                    }
                }
            </style>


        </main>

        <!-- footer -->
        <?php include("./includes/footer.php"); ?>

    </div>

    <!-- Script -->
    <?php include("./includes/script.php"); ?>

</body>

</html>