<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master's Services</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

        body {
            background-color: #000;
            color: white;
            font-family: 'Poppins', sans-serif;
            margin: 0;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            position: fixed;
            width: 100%;
            z-index: 100;
            transition: all 0.3s ease; /* Smooth transition for header changes */
        }

        .header.scrolled {
            background-color: rgba(0, 0, 0, 0.9);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .menu-container {
            display: none; /* Hide on larger screens, show on mobile */
            flex-direction: column;
            cursor: pointer;
            z-index: 101;
        }

        .menu-icon {
            width: 30px;
            height: 3px;
            background-color: white;
            margin: 6px 0;
            transition: all 0.3s ease;
        }

        .menu-container.open .menu-icon:nth-child(1) {
            transform: rotate(-45deg) translate(-6px, 6px);
        }

        .menu-container.open .menu-icon:nth-child(2) {
            opacity: 0;
        }

        .menu-container.open .menu-icon:nth-child(3) {
            transform: rotate(45deg) translate(-6px, -6px);
        }

        .nav {
            display: flex;
            gap: 30px;
            transition: all 0.3s ease; /* Smooth transition for nav changes */
        }

        .nav a {
            color: #f7b538;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease, transform 0.2s ease;
            position: relative;
            padding-bottom: 5px;
        }

        .nav a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: #f7b538;
            transition: width 0.3s ease;
        }

        .nav a:hover {
            color: white;
            transform: translateY(-2px);
        }

        .nav a:hover::after {
            width: 100%;
        }

        .hero {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 100px 40px; /* Increased padding */
            position: relative;
        }

        .hero h1 {
            font-size: 4.5em; /* Increased font size */
            margin-bottom: 15px;
            font-weight: 700;
            animation: fadeInUp 1s ease;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }

        .hero span {
            color: #f7b538;
        }

        .hero p {
            font-size: 1.5em; /* Increased font size */
            margin-top: 25px;
            color: #bbb; /* Slightly lighter color */
            max-width: 850px; /* Increased max-width */
            line-height: 1.7; /* Increased line-height */
            animation: fadeInUp 1s ease 0.2s backwards;
        }

        .buttons {
            margin-top: 50px; /* Increased margin */
            display: flex;
            gap: 30px;
            animation: fadeInUp 1s ease 0.4s backwards;
        }

        .buttons a {
            text-decoration: none;
        }

        .buttons button {
            background-color: #f7b538;
            color: black;
            border: none;
            padding: 18px 35px; /* Increased padding */
            font-size: 1.3em; /* Increased font size */
            font-weight: 600; /* Increased font weight */
            cursor: pointer;
            border-radius: 8px; /* Increased border radius */
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        }

        .buttons button:hover {
            background-color: #e6a42e;
            transform: translateY(-5px); /* Increased lift on hover */
            box-shadow: 0 6px 12px rgba(247, 181, 56, 0.4);
        }

        .background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .blob {
            position: absolute;
            background: radial-gradient(circle at 50% 50%, rgba(247, 181, 56, 0.4), rgba(0, 0, 139, 0.3));
            border-radius: 50%;
            animation: blobAnimate 20s infinite alternate ease-in-out; /* Slower animation */
            opacity: 0.7; /* Slightly decreased opacity */
            filter: blur(60px); /* Increased blur */
        }

        @keyframes fadeInUp {
            0% { opacity: 0; transform: translateY(30px); } /* Increased initial offset */
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes blobAnimate {
            0% { transform: translate(0%, 0%) scale(1); }
            33% { transform: translate(10%, -15%) scale(1.1); } /* Added more keyframes */
            66% { transform: translate(-15%, 10%) scale(0.9); }
            100% { transform: translate(0%, 0%) scale(1); }
        }

        .blob:nth-child(1) {
            width: 450px; /* Increased size */
            height: 450px;
            top: 15%;
            left: 5%;
            animation-delay: 1s;
        }

        .blob:nth-child(2) {
            width: 700px; /* Increased size */
            height: 700px;
            bottom: 5%;
            right: 15%;
            animation-delay: 3s;
        }

        .blob:nth-child(3) {
            width: 300px; /* Increased size */
            height: 300px;
            top: 55%;
            left: 75%;
            animation-delay: 5s;
        }

        /* Media Queries for Responsiveness */

        @media (max-width: 850px) { /* Adjusted breakpoint */
            .header { padding: 15px 20px; }
            .nav { gap: 20px; }
            .hero h1 { font-size: 3.5em; }
            .hero p { font-size: 1.3em; max-width: 90%; }
            .buttons button { padding: 15px 25px; font-size: 1.1em; }
            .blob:nth-child(1) { width: 300px; height: 300px; }
            .blob:nth-child(2) { width: 450px; height: 450px; }
            .blob:nth-child(3) { width: 200px; height: 200px; }
        }

        @media (max-width: 600px) { /* Adjusted breakpoint */
            .menu-container { display: flex; } /* Show menu icon on mobile */
            .nav {
                position: absolute;
                top: 70px; /* Adjusted position */
                left: 0;
                width: 100%;
                flex-direction: column;
                background-color: rgba(0, 0, 0, 0.9);
                align-items: center;
                padding: 20px 0;
                transform: translateX(100%); /* Initially hidden */
            }

            .nav.show {
                transform: translateX(0%); /* Slide in on click */
            }

            .nav a {
                padding: 15px;
            }

            .hero h1 { font-size: 2.8em; }
            .hero p { font-size: 1.1em; }
            .buttons { flex-direction: column; align-items: center; gap: 20px; }
            .buttons button { width: 90%; }
        }
    </style>
</head>
<body>

    <div class="header">
        <div class="menu-container">
            <div class="menu-icon"></div>
            <div class="menu-icon"></div>
            <div class="menu-icon"></div>
        </div>
        <nav class="nav">
            <a href="#">Home</a>
            <a href="https://discord.gg/aR2zEUDFm7">Discord</a>
        </nav>
    </div>

    <div class="hero">
        <h1>Experience only the best with <span>Master's Services</span>.</h1>
        <p>Highest quality of uncopylocks in the cheapest price!</p>
        <div class="buttons">
            <a href="https://discord.gg/aR2zEUDFm7" target="_blank">
                <button>Join Community</button>
            </a>
            <a href="https://discord.gg/aR2zEUDFm7" target="_blank">
                <button>Buy Uncopylocks</button>
            </a>
        </div>
    </div>

    <div class="background-animation">
        <div class="blob"></div>
        <div class="blob"></div>
        <div class="blob"></div>
    </div>

    <script>
        window.addEventListener('scroll', () => {
            const header = document.querySelector('.header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        const menuContainer = document.querySelector('.menu-container');
        const nav = document.querySelector('.nav');

        menuContainer.addEventListener('click', () => {
            nav.classList.toggle('show');
            menuContainer.classList.toggle('open');
        });
    </script>

</body>
</html>