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

<head>
    <meta charset="UTF-8">
    <title>ViewTrip – Responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

    <style>
        :root {
            --header: #006696;
            --header-bottom: #08517d;
            --footer: #08517d;
            --green: #7ac21f;
        }

        body {
            font-family: "Open Sans", Arial, Helvetica, sans-serif;
            background: #f4f6f8;
        }

        /* Login dropdown */
        .login-btn {
            background: #0b77a6;
            color: #fff;
            padding: 6px 14px;
            border-radius: 6px;
            cursor: pointer;
        }

        .login-btn i {
            margin-left: 6px;
            transition: .3s
        }

        .login-btn.active i {
            transform: rotate(180deg)
        }

        .login-panel {
            position: absolute;
            top: 42px;
            right: 0;
            width: 200px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
            display: none;
            z-index: 1000;
        }

        .login-panel a {
            display: block;
            padding: 12px 16px;
            color: #333;
            text-decoration: none;
        }

        .login-panel a:hover {
            background: #f1f3f5
        }

        /* Header */
        .header {
            background: var(--header)
        }

        .header-bottom {
            background: var(--header-bottom);
            height: 15px
        }

        /* Buttons */
        .btn-green {
            background: var(--green);
            color: #fff
        }

        .btn-green:hover {
            background: #6aad1b;
            color: #fff
        }

        .btn-gray {
            background: #9fb1bc;
            color: #fff
        }
        .btn-gray:hover {
            background: #9fb1bc;
            color: #fff
        }

        /* Hero */
        .hero {
            background:
                linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)),
                url(https://vtngcdn-prod.travelport.com/vtng/assets/img/traveler-lg.jpg) center/cover no-repeat;
            color: #fff;
        }

        /* Inputs */
        .custom-input {
            background: transparent;
            border: none;
            border-bottom: 1px solid #fff;
            border-radius: 0;
            color: #fff;
        }

        .custom-input::placeholder {
            color: rgba(255, 255, 255, .8)
        }

        .custom-input:focus {
            background: transparent;
            color: #fff;
            box-shadow: none
        }

        /* Divider (desktop only) */
        .divider {
            border-left: 1px dashed rgba(255, 255, 255, .4);
            height: 100%;
        }

        /* Footer */
        footer {
            background: var(--footer);
            color: #cfe4f2;
            font-size: 13px
        }

        footer a {
            color: #cfe4f2;
            text-decoration: none
        }

        footer a:hover {
            text-decoration: underline
        }

        .container-main {
            max-width: 1030px
        }

        /* Vertical divider (desktop) */
        .divider-vertical {
            width: 1px;
            height: 100%;
            border-left: 1px dashed rgba(255, 255, 255, .6);
            margin: 0rem 2rem;
            /* 👈 creates top & bottom gap */
        }

        .divider-vertical {
            height: calc(100% - 4rem);
        }

        /* Horizontal divider (mobile/tablet) */
        .divider-horizontal {
            width: 100%;
            height: 1px;
            border-top: 1px dashed rgba(255, 255, 255, .6);

        }
        @media(max-width: 768px) {
            .container{
                --bs-gutter-x: 0rem !important;
            }
        }
    </style>
</head>

<body>
    <div class="container container-main">
    <?php echo $__env->make('frontend.include.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <?php echo $__env->yieldContent('content'); ?>
        <?php echo $__env->make('frontend.include.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function () {
            $("#loginToggle").on("click", function (e) {
                e.stopPropagation();
                $(this).toggleClass("active");
                $("#loginPanel").stop(true, true).slideToggle(200);
            });
            $(document).on("click", function () {
                $("#loginPanel").slideUp(200);
                $("#loginToggle").removeClass("active");
            });
        });
    </script>
    <?php echo $__env->yieldPushContent('script'); ?>
</body>
</html><?php /**PATH D:\xampp\htdocs\view-trip\resources\views/frontend/master.blade.php ENDPATH**/ ?>