<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title><?php echo e(optional($settings)->hotel_name ?? 'Hotel Booking'); ?></title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
/* ===== FULLSCREEN HERO SLIDER ===== */
.hero {
    margin-top: -80px; /* compensate fixed navbar */
}

#heroSlider,
#heroSlider .carousel-inner,
#heroSlider .carousel-item {
    height: 100vh;
}

.hero-slide {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.hero-slide h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: 3.4rem;
}

.hero-slide p {
    max-width: 680px;
    margin: 18px auto 0;
    font-size: 1.1rem;
    opacity: .92;
}
</style>

    <style>
        :root {
            --navy: #0f2a44;
            --navy-dark: #091c2f;
            --champagne: #c6a87d;
            --sand: #f5f2ee;
            --text-dark: #1f2933;
            --text-muted: #6b7280;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--sand);
            color: var(--text-dark);
            padding-top: 80px;
        }

        /* ================= NAVBAR ================= */
        .navbar {
            background: var(--navy-dark);
            border-bottom: 1px solid rgba(198,168,125,.35);
        }

        .navbar-brand {
            font-family: 'Libre Baskerville', serif;
            font-size: 1.45rem;
            color: var(--champagne) !important;
            letter-spacing: .4px;
        }

        .nav-link {
            color: #e5e7eb !important;
            font-weight: 400;
            margin-left: 22px;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--champagne) !important;
        }

      
        /* ================= SECTIONS ================= */
        .section {
            padding: 90px 0;
        }

        .section-title {
            font-family: 'Libre Baskerville', serif;
            font-size: 2.2rem;
            margin-bottom: 10px;
        }

        .section-sub {
            color: var(--text-muted);
            font-size: .95rem;
        }

        /* ================= CARDS ================= */
    /* ===== GALLERY CARDS ===== */
.gallery-card {
    border-radius: 18px;
    overflow: hidden;
}

/* fixed image height */
.gallery-img {
    height: 260px;
    width: 100%;
    overflow: hidden;
}

/* image fill */
.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* ”9æ7 KEY */
    transition: transform .6s ease;
}

/* luxury hover */
.gallery-card:hover img {
    transform: scale(1.12);
}


       
/* ===== ROOM CARD IMAGE FIX ===== */
.room-img {
    height: 240px;              /* fixed height */
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.room-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* ”9æ7 KEY LINE */
    transition: transform .5s ease;
}

/* subtle luxury hover */
.pro-card:hover .room-img img {
    transform: scale(1.08);
}

        /* ================= BUTTONS ================= */
        .btn-primary-pro {
            background: var(--champagne);
            color: var(--navy-dark);
            border-radius: 40px;
            padding: 10px 30px;
            border: none;
            font-weight: 500;
        }

        .btn-primary-pro:hover {
            background: #b89766;
            color: #091c2f;
        }

        .btn-outline-pro {
            border: 1px solid var(--champagne);
            color: var(--champagne);
            border-radius: 40px;
            padding: 10px 30px;
            background: transparent;
        }

        .btn-outline-pro:hover {
            background: var(--champagne);
            color: var(--navy-dark);
        }

        /* ================= FOOTER ================= */
        footer {
            background: var(--navy-dark);
            color: #d1d5db;
            padding: 45px 0;
            font-size: .9rem;
        }

        footer span {
            font-family: 'Libre Baskerville', serif;
            color: var(--champagne);
        }
    </style>
</head>

<body>

<!-- ================= NAVBAR ================= -->
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <a class="navbar-brand" href="<?php echo e(url('/')); ?>">
            <?php echo e(optional($settings)->hotel_name ?? 'Hotel Booking'); ?>

        </a>

        <button class="navbar-toggler bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>

      <div id="nav" class="collapse navbar-collapse">
    <ul class="navbar-nav ms-auto">

        <li class="nav-item">
            <a href="<?php echo e(url('/')); ?>"
               class="nav-link <?php echo e(request()->routeIs('home') ? 'active' : ''); ?>">
                Home
            </a>
        </li>

        <li class="nav-item">
            <a href="<?php echo e(route('rooms.list')); ?>"
               class="nav-link <?php echo e(request()->routeIs('rooms.*') ? 'active' : ''); ?>">
                Rooms
            </a>
        </li>

        <li class="nav-item">
            <a href="<?php echo e(route('about')); ?>"
               class="nav-link <?php echo e(request()->routeIs('about') ? 'active' : ''); ?>">
                About
            </a>
        </li>

        <li class="nav-item">
            <a href="<?php echo e(route('gallery')); ?>"
               class="nav-link <?php echo e(request()->routeIs('gallery') ? 'active' : ''); ?>">
                Gallery
            </a>
        </li>

        <li class="nav-item">
            <a href="<?php echo e(route('facilities')); ?>"
               class="nav-link <?php echo e(request()->routeIs('facilities') ? 'active' : ''); ?>">
                Facilities
            </a>
        </li>

        <li class="nav-item">
            <a href="<?php echo e(route('contact')); ?>"
               class="nav-link <?php echo e(request()->routeIs('contact') ? 'active' : ''); ?>">
                Contact
            </a>
        </li>

    </ul>
</div>

    </div>
</nav>


<?php echo $__env->yieldContent('content'); ?>

<!-- ================= FOOTER ================= -->
<footer class="text-center">
    <span><?php echo e(optional($settings)->hotel_name ?? 'Hotel Booking'); ?></span><br>
    <?php echo e(optional($settings)->address); ?>

</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php /**PATH /home2/jitrealx/public_html/hotelbooking/resources/views/frontend/layout.blade.php ENDPATH**/ ?>