<!DOCTYPE html>
<html lang="en" data-theme="night">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="shortcut icon" href="Images/UpdatedFavIcon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <title>Hotel Management System</title>
    <link rel="stylesheet" href="CSS/style.css">
    <style>
        .sour-gummy {
            font-family: "Sour Gummy", sans-serif;
            font-weight: 400;
        }
        .text-gradient {
            background: linear-gradient(to right, #5ee0b5, #ead588, #df81b0);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: Mulish;
            font-size: 64px;
            font-weight: 900;
            line-height: 86px;
        }
        /* Ensures that the image is responsive */
        .carousel-img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        /* Flex container to stack image and text */
        .image-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative; /* This ensures text can be layered over the image */
            width: 100%;
            height: 410px; /* Adjust to the desired height */
        }
        .text-overlay {
            position: absolute; /* Positions the text over the image */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Centers the text */
            z-index: 10; /* Ensures the text appears over the image */
            color: transparent; /* Text color is transparent until the gradient is applied */
            background: linear-gradient(to right, #5ee0b5, #ead588, #df81b0);
            -webkit-background-clip: text;
            background-clip: text;
            font-family: Mulish;
            font-size: 64px;
            font-weight: 900;
            text-align: center;
            line-height: 1.2;
        }
    </style>
</head>
<body class="justify-center items-center text-center">
    <div class="image-wrapper">
        <img class="carousel-img rounded-3xl" src="Image/Hotel.jpg" alt="Hotel">
        <h1 class="text-overlay text-4xl sm:text-5xl md:text-6xl lg:text-7xl">Welcome to Our Hotel</h1>
    </div>

    <div class="my-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 px-10">
            <button class="btn btn-primary text-xl mx-2 text-white">
                <a href="customer.html">Customer</a>
            </button>
            <button class="btn btn-primary text-xl mx-2 text-white">
                <a href="reservation.html">Reservation</a>
            </button>
            <button class="btn btn-primary text-xl mx-2 text-white">
                <a href="payment.html">Payment</a>
            </button>
            <button class="btn btn-primary text-xl mx-2 text-white">
                <a href="invoice.html">Invoice</a>
            </button>
        </div>
    </div>
</body>
</html>



please make it responsive for all device. And I wanted to make the text over the image and set it horizontally in the middle. if you can do this without using position properties (absolute, relative) then do that.