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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GALEYR</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: 'Poppins', Arial, sans-serif;
            background-color: #000;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            color: white;
            z-index: 3;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        nav .logo img {
            height: 40px;
            transition: height 0.3s ease;
        }

        nav .menu-toggle {
            display: none;
            font-size: 30px;
            color: white;
            cursor: pointer;
            position: absolute;
            right: 55px;
            /* Align the toggle button to the right */
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        nav .links {
            display: flex;
            gap: 20px;
            justify-content: center;
            /* Center the nav links */
            flex-grow: 1;
            margin-left: -200px;
            /* Give space for the logo */
        }

        nav .links a {
            color: black;
            text-decoration: none;
            font-size: 18px;
            padding: 8px 16px;
            transition: background 0.3s, color 0.3s;
        }

        nav .links a:hover {
            background: #1e90ff;
            color: white;
            border-radius: 5px;
        }

        .signin-btn,
        .signup-btn {
            background: #1e90ff;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }

        .signin-btn:hover {
            background: #0066cc;
        }

        .signup-btn:hover {
            background: #004c99;
        }

        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .video-background video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            padding: 0 20px;
        }

        .content h1 {
            font-size: 48px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
        }

        .content p {
            font-size: 20px;
            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        @media (max-width: 1024px) {
            .content h1 {
                font-size: 40px;
            }

            .content p {
                font-size: 18px;
            }
        }

        @media (max-width: 768px) {
            nav {
                flex-direction: row;
                justify-content: space-between;
                padding: 10px 20px;
            }

            nav .logo img {
                height: 30px;
            }

            nav .menu-toggle {
                display: block;
                color: #000;
            }

            nav .links {
                display: none;
                flex-direction: column;
                gap: 10px;
                background: rgba(255, 255, 255, 0.51);
                padding: 10px;
                border-radius: 15px;
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                text-align: center;
                margin-left: 15px;
                width: 78%;
            }

            nav .links.show {
                display: flex;
            }

            nav .links a {
                font-size: 16px;
            }

            .content {
                top: 40%;
            }

            .content h1 {
                font-size: 36px;
            }

            .content p {
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            nav .logo img {
                height: 25px;
            }

            nav .links a {
                font-size: 14px;
            }

            .signin-btn,
            .signup-btn {
                font-size: 14px;
                padding: 6px 12px;
            }

            .content h1 {
                font-size: 28px;
            }

            .content p {
                font-size: 16px;
            }
        }



        /* Reset margins and padding */
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* Full-page video container */
        #video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            /* Places the video behind content */
            overflow: hidden;
            /* Ensures no scrollbars appear */
        }

        /* The player element should fill the container */
        .player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Ensures video scales proportionally to fill */
            pointer-events: none;
            /* Prevents interaction with the video */
        }

        /* Make the container responsive */
        @media (max-width: 768px) {
            #video-background {
                height: 100vh;
                width: 100vw;
            }
        }

        /* .logo img {
    filter: brightness(0) invert(1);
} */
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggle = document.querySelector('.menu-toggle');
            const links = document.querySelector('.links');

            toggle.addEventListener('click', function () {
                links.classList.toggle('show');
            });
        });
    </script>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Include YTPlayer Plugin -->
    <script src="https://cdn.jsdelivr.net/gh/pupunzi/jquery.mb.YTPlayer/dist/jquery.mb.YTPlayer.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pupunzi/jquery.mb.YTPlayer/dist/css/jquery.mb.YTPlayer.min.css">

</head>

<body>
    <div class="video-background">
        <video autoplay muted loop>
            <source src="Cargo Containers.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <!-- <a id="bgndVideo" class="player"
            data-property="{videoURL:'bgvideo.mp4',containment:'body',quality:'large',mute:true,autoPlay:true,loop:true,opacity:1,showControls:false}">
        </a> -->
    </div>

    <div class="overlay"></div>
    <nav>
        <div class="logo">
            <img src="images/galeyr.png" alt="Logo">
        </div>
        <span class="menu-toggle">☰</span>
        <div class="links">
            <a href="#home">Home</a>
            <a href="#aboutus">About Us</a>
            <a href="#contact">Contact</a>
            <a href="login.php">Login</a>
        </div>
    </nav>
    <div class="content">
        <h1>Track Your Shipments Across The Waves. </h1>
        <p>Your Cargo Our Course.</p>
    </div>

    <script>
        $(document).ready(function () {
            $("#bgndVideo").YTPlayer();
        });
    </script>

</body>

</html>