@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');

:root {
    --bg: #0B1E1B;
    --surface: #16322E;
    --surface-2: #21453E;
    --rf-green: #2E8B57;
    --palm-green: #58B368;
    --lagoon-blue: #37B7C3;
    --turquoise: #5BD8D2;
    --sun-gold: #E7C667;
    --warm-sand: #D8BE8C;
    --leaf-mist: #A7D7C5;
    --text-1: #F3FAF7;
    --text-2: #C9E8DE;
    --muted: #8BB6AA;
    --gradient-1: linear-gradient(135deg, #58B368, #37B7C3);
    --gradient-2: linear-gradient(135deg, #E7C667, #58B368);
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius-lg: 30px;
    --radius-md: 22px;
    --radius-sm: 12px;
    --transition: all 0.25s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
    color: var(--text-1);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-1);
}

a {
    text-decoration: none;
    color: var(--turquoise);
    transition: var(--transition);
}

a:hover {
    color: var(--leaf-mist);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background: var(--gradient-1);
    color: var(--bg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(55, 183, 195, 0.3);
}

.btn-secondary {
    background: var(--surface-2);
    color: var(--text-1);
    border: 1px solid var(--rf-green);
}

.btn-secondary:hover {
    background: var(--rf-green);
    color: var(--text-1);
}

.text-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sun-gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.text-link:hover {
    color: var(--warm-sand);
}

/* Canopy Welcome Bar */
.canopy-bar {
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.85rem;
    text-align: center;
    padding: 8px 20px;
    border-bottom: 1px solid var(--surface-2);
}

.canopy-bar a {
    margin-left: 10px;
    color: var(--turquoise);
}

/* Floating Eco Header */
.header-wrapper {
    position: sticky;
    top: 20px;
    z-index: 100;
    padding: 0 20px;
}

header {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(22, 50, 46, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rf-green);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.logo-emblem {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-1);
}

.logo-emblem span {
    color: var(--palm-green);
}

nav ul {
    display: flex;
    gap: 25px;
}

nav a {
    color: var(--text-2);
    font-size: 0.95rem;
    font-weight: 500;
}

nav a:hover {
    color: var(--text-1);
}

/* Rainforest Panorama */
.panorama-section {
    max-width: 1400px;
    margin: 60px auto 40px;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.panorama-text h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.panorama-text p {
    font-size: 1.1rem;
    color: var(--text-2);
    margin-bottom: 30px;
    max-width: 90%;
}

.panorama-buttons {
    display: flex;
    gap: 15px;
}

.panorama-visual {
    position: relative;
}

.main-img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    height: 500px;
    border: 1px solid var(--surface-2);
}

.preview-cards {
    position: absolute;
    bottom: -30px;
    left: -40px;
    display: flex;
    gap: 15px;
}

.preview-card {
    background: var(--surface);
    padding: 15px;
    border-radius: var(--radius-md);
    border: 1px solid var(--rf-green);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    width: 180px;
}

.preview-card p {
    font-size: 0.85rem;
    color: var(--leaf-mist);
    margin-top: 10px;
    font-weight: 500;
}

/* Nature Discovery Walk */
.discovery-walk {
    background: var(--surface);
    border-top: 1px solid var(--surface-2);
    border-bottom: 1px solid var(--surface-2);
    padding: 40px 0;
    margin: 80px 0;
}

.discovery-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.discovery-item {
    text-align: center;
    color: var(--muted);
    font-weight: 500;
    font-size: 1.1rem;
    font-family: var(--font-heading);
}

/* Monkey Sanctuary Game */
.sanctuary-game {
    max-width: 1020px;
    margin: 80px auto;
    background: #0f1615; /* Dark stone */
    border: 2px solid var(--rf-green);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 0 40px rgba(55, 183, 195, 0.1);
    position: relative;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px;
}

.game-header h2 {
    color: var(--lagoon-blue);
    font-size: 1.5rem;
}

.game-controls {
    display: flex;
    gap: 15px;
}

.game-controls button {
    background: transparent;
    border: 1px solid var(--lagoon-blue);
    color: var(--lagoon-blue);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-heading);
    transition: var(--transition);
}

.game-controls button:hover {
    background: var(--lagoon-blue);
    color: var(--bg);
}

.iframe-container {
    width: 100%;
    height: 600px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg);
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Wildlife Gallery */
.gallery-section {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.gallery-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.gallery-row.reverse {
    direction: rtl;
}

.gallery-row.reverse > * {
    direction: ltr;
}

.gallery-img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-2);
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.gallery-content h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--turquoise);
}

.gallery-content p {
    color: var(--text-2);
    margin-bottom: 20px;
    font-size: 1.05rem;
}

/* Explorer Stories */
.explorer-stories {
    background: var(--surface);
    padding: 100px 20px;
    border-top: 1px solid var(--surface-2);
    border-bottom: 1px solid var(--surface-2);
}

.explorer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.explorer-container img {
    border-radius: var(--radius-lg);
    height: 500px;
    object-fit: cover;
}

.explorer-text h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--sun-gold);
}

.explorer-text p {
    margin-bottom: 20px;
    color: var(--text-2);
}

/* Eco Research Hub */
.research-hub {
    max-width: 800px;
    margin: 100px auto;
    padding: 0 20px;
}

.research-row {
    display: flex;
    justify-content: center;
    padding: 25px 0;
    border-bottom: 1px solid var(--surface-2);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--leaf-mist);
    text-align: center;
}

.research-row:last-child {
    border-bottom: none;
}

/* Sanctuary Lounge */
.lounge-section {
    max-width: 1200px;
    margin: 100px auto;
    padding: 60px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rf-green);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.lounge-left h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--turquoise);
}

.lounge-left p {
    color: var(--text-2);
    margin-bottom: 30px;
}

.support-email {
    font-size: 1.2rem;
    color: var(--sun-gold);
    font-family: var(--font-heading);
    display: block;
    margin-bottom: 40px;
}

.mini-faq h4 {
    color: var(--text-1);
    margin-bottom: 10px;
}

.mini-faq p {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 15px;
    background: var(--bg);
    border: 1px solid var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: var(--font-body);
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--palm-green);
}

/* Footer */
footer {
    background: #081513;
    border-top: 1px solid var(--rf-green);
    padding: 80px 20px 30px;
    margin-top: 100px;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    color: var(--turquoise);
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul a {
    color: var(--text-2);
    font-size: 0.95rem;
}

.footer-col ul a:hover {
    color: var(--leaf-mist);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid var(--surface-2);
    padding-top: 30px;
    color: var(--muted);
    font-size: 0.85rem;
}

.footer-emblem {
    color: var(--palm-green);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.footer-bottom p {
    max-width: 800px;
    margin: 10px auto;
    line-height: 1.5;
}

/* Subpages Container */
.subpage-container {
    max-width: 900px;
    margin: 60px auto 100px;
    padding: 60px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-2);
}

.subpage-container h1 {
    font-size: 2.5rem;
    color: var(--turquoise);
    margin-bottom: 30px;
    text-align: center;
}

.subpage-container h2 {
    font-size: 1.5rem;
    color: var(--sun-gold);
    margin: 30px 0 15px;
}

.subpage-container p {
    color: var(--text-2);
    margin-bottom: 20px;
}

.subpage-container ul {
    list-style: disc inside;
    color: var(--text-2);
    margin-bottom: 20px;
}

.subpage-container ul li {
    margin-bottom: 10px;
}

.return-home {
    display: block;
    text-align: center;
    margin-bottom: 40px;
}

/* Cookie Popup */
.cookie-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(22, 50, 46, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--lagoon-blue);
    border-radius: var(--radius-md);
    padding: 25px;
    max-width: 350px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: none;
}

.cookie-popup h4 {
    color: var(--turquoise);
    margin-bottom: 10px;
}

.cookie-popup p {
    font-size: 0.9rem;
    color: var(--text-2);
    margin-bottom: 20px;
}

.cookie-btns {
    display: flex;
    gap: 10px;
}

.cookie-btns button {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    border: none;
    transition: var(--transition);
}

.btn-accept {
    background: var(--lagoon-blue);
    color: var(--bg);
}

.btn-accept:hover {
    background: var(--turquoise);
}

.btn-reject {
    background: var(--surface-2);
    color: var(--text-1);
    border: 1px solid var(--muted);
}

.btn-reject:hover {
    background: var(--bg);
}

/* Responsive */
@media (max-width: 1024px) {
    .panorama-section {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .panorama-text p {
        margin: 0 auto 30px;
    }
    .panorama-buttons {
        justify-content: center;
    }
    .preview-cards {
        display: none;
    }
    .gallery-row, .gallery-row.reverse, .explorer-container, .lounge-section {
        grid-template-columns: 1fr;
    }
    nav ul {
        display: none; /* simple mobile nav hide for now */
    }
    .discovery-grid {
        flex-direction: column;
        gap: 30px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .subpage-container, .lounge-section {
        padding: 30px;
        margin: 40px 20px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .iframe-container {
        height: 400px;
    }
}
/* ENDFILE */

<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reelora Haven | The Emerald Monkey Sanctuary</title>
    <meta name="description" content="Explore Crazy Monkey inside an elegant rainforest sanctuary where lush landscapes, crystal rivers and rare wildlife create an unforgettable free-to-play experience.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="canopy-bar">
        Experience Crazy Monkey inside a premium free-to-play rainforest sanctuary. <a href="sanctuary.html">Explore &rarr;</a>
    </div>

    <div class="header-wrapper">
        <header>
            <div class="logo-emblem">
                <span>&#128062;</span> Reelora Haven
            </div>
            <nav>
                <ul>
                    <li><a href="sanctuary.html">Sanctuary</a></li>
                    <li><a href="#game">Crazy Monkey</a></li>
                    <li><a href="wildlife.html">Wildlife</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="#support">Support</a></li>
                </ul>
            </nav>
            <a href="#game" class="btn btn-primary">Play Now</a>
        </header>
    </div>

    <main>
        <section class="panorama-section">
            <div class="panorama-text">
                <h1>Adventure Lives Above The Canopy</h1>
                <p>Explore Crazy Monkey inside an elegant rainforest sanctuary where lush landscapes, crystal rivers and rare wildlife create an unforgettable free-to-play experience.</p>
                <div class="panorama-buttons">
                    <a href="#game" class="btn btn-primary">Discover Crazy Monkey</a>
                    <a href="sanctuary.html" class="btn btn-secondary">Explore Sanctuary</a>
                </div>
            </div>
            <div class="panorama-visual">
                <img src="luxury-rainforest-sanctuary.jpg" alt="A breathtaking luxury rainforest sanctuary with elevated wooden skywalks and tropical botanical gardens" class="main-img">
                <div class="preview-cards">
                    <div class="preview-card">
                        <p>Skywalk through rainforest.</p>
                    </div>
                    <div class="preview-card">
                        <p>Crystal waterfall.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="discovery-walk">
            <div class="discovery-grid">
                <div class="discovery-item">Protected Wildlife</div>
                <div class="discovery-item">&darr;</div>
                <div class="discovery-item">Eco Adventure</div>
                <div class="discovery-item">&darr;</div>
                <div class="discovery-item">Secure Platform</div>
                <div class="discovery-item">&darr;</div>
                <div class="discovery-item">Mobile Ready</div>
            </div>
        </section>

        <section id="game" class="sanctuary-game">
            <div class="game-header">
                <h2>Crazy Monkey Sanctuary</h2>
                <div class="game-controls">
                    <button id="fullscreenBtn">Fullscreen</button>
                    <button onclick="window.location.href='faq.html'">How To Play</button>
                </div>
            </div>
            <div class="iframe-container" id="gameContainer">
                <iframe src="game-crazy-monkey/" allowfullscreen></iframe>
            </div>
        </section>

        <section class="gallery-section">
            <div class="gallery-row">
                <img src="tropical-observation-lodge.jpg" alt="Magnificent tropical observation lodge surrounded by emerald forests and glass botanical domes" class="gallery-img">
                <div class="gallery-content">
                    <h3>Rainforest Canopy</h3>
                    <p>Ascend to the highest tiers of our sanctuary, where elegant observation decks provide an unprecedented view of rare monkey habitats. Every aspect of this elevated environment is designed for harmonious interaction.</p>
                    <a href="wildlife.html" class="text-link">Explore &rarr;</a>
                </div>
            </div>

            <div class="gallery-row reverse">
                <img src="spectacular-rainforest-valley.jpg" alt="Spectacular rainforest valley featuring giant waterfalls, crystal pools, and luxury eco pavilions" class="gallery-img">
                <div class="gallery-content">
                    <h3>Crystal Waterfalls</h3>
                    <p>Discover the serene acoustic beauty of our cascading sanctuary waters. The crystal pools serve as vital hydration and play areas for the resident wildlife, creating a natural amphitheater of sound and light.</p>
                    <a href="sanctuary.html" class="text-link">Explore &rarr;</a>
                </div>
            </div>

            <div class="gallery-row">
                <img src="luxury-rainforest-sanctuary.jpg" alt="Curious monkeys peacefully interacting with their natural habitat around elevated eco architecture" class="gallery-img">
                <div class="gallery-content">
                    <h3>Hidden Sanctuary</h3>
                    <p>Venture beyond the familiar paths to find secluded botanical enclaves. Here, the architecture steps back to allow the flora and fauna to take center stage, offering moments of profound tranquility.</p>
                    <a href="explorer.html" class="text-link">Explore &rarr;</a>
                </div>
            </div>
        </section>

        <section class="explorer-stories">
            <div class="explorer-container">
                <img src="spectacular-rainforest-valley.jpg" alt="Panoramic observation decks in a tropical valley focusing on eco conservation" class="gallery-img">
                <div class="explorer-text">
                    <h2>Explorer Stories</h2>
                    <p>Our commitment extends beyond creating a luxurious free-to-play platform. We focus on showcasing incredible rainforest biodiversity and understanding rare monkey habitats in an engaging, secure environment.</p>
                    <p>Reelora Haven ensures responsible gaming practices are integrated seamlessly into cross-device compatibility, allowing explorers to seamlessly transition from desktop lodges to mobile expeditions.</p>
                </div>
            </div>
        </section>

        <section class="research-hub">
            <div class="research-row">100% Free-to-Play</div>
            <div class="research-row">Protected Experience</div>
            <div class="research-row">Secure Platform</div>
            <div class="research-row">Desktop &bull; Tablet &bull; Mobile</div>
        </section>

        <section id="support" class="lounge-section">
            <div class="lounge-left">
                <h2>Sanctuary Lounge</h2>
                <p>Our dedicated team of guides is available to assist you with any inquiries regarding the Reelora Haven platform.</p>
                <span class="support-email">support@reelorahaven.living</span>
                
                <div class="mini-faq">
                    <h4>Is the sanctuary free to enter?</h4>
                    <p>Yes, all platform features and games are strictly free-to-play.</p>
                    <h4>Can I play on mobile?</h4>
                    <p>Our sanctuary is optimized for seamless exploration across all devices.</p>
                </div>
            </div>
            <div class="lounge-right">
                <form class="contact-form" action="contact.html">
                    <div class="form-group">
                        <input type="text" placeholder="Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Subject" required>
                    </div>
                    <div class="form-group">
                        <textarea rows="4" placeholder="Message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-grid">
            <div class="footer-col">
                <h4>Sanctuary</h4>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html#game">Crazy Monkey</a></li>
                    <li><a href="wildlife.html">Wildlife</a></li>
                    <li><a href="explorer.html">Explorer</a></li>
                    <li><a href="help-centre.html">Support</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Platform</h4>
                <ul>
                    <li><a href="free-to-play.html">Free-to-Play</a></li>
                    <li><a href="security.html">Security</a></li>
                    <li><a href="mobile-ready.html">Mobile Ready</a></li>
                    <li><a href="18-plus.html">18+</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Legal</h4>
                <ul>
                    <li><a href="privacy-policy.html">Privacy Policy</a></li>
                    <li><a href="cookie-policy.html">Cookie Policy</a></li>
                    <li><a href="terms.html">Terms</a></li>
                    <li><a href="responsible-gaming.html">Responsible Gaming</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Resources</h4>
                <ul>
                    <li><a href="faq.html">FAQ</a></li>
                    <li><a href="help-centre.html">Help Centre</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="sanctuary.html">About</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-emblem">&#128062;</div>
            <p>&copy; 2026 Reelora Haven.</p>
            <p>Reelora Haven is a free-to-play social casino platform intended solely for entertainment purposes. No real-money gambling or cash prizes are available. Players must be 18 years or older.</p>
        </div>
    </footer>

    <div class="cookie-popup" id="cookiePopup">
        <h4>Privacy Preferences</h4>
        <p>We use cookies to improve your browsing experience and platform performance.</p>
        <div class="cookie-btns">
            <button class="btn-accept" id="acceptCookies">Accept</button>
            <button class="btn-reject" id="rejectCookies">Reject</button>
        </div>
    </div>

    <script>
        // Fullscreen Logic
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const gameContainer = document.getElementById('gameContainer');

        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                gameContainer.requestFullscreen().catch(err => {
                    console.log(`Error attempting to enable fullscreen: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        });

        // Cookie Popup Logic
        const cookiePopup = document.getElementById('cookiePopup');
        const acceptBtn = document.getElementById('acceptCookies');
        const rejectBtn = document.getElementById('rejectCookies');

        if (!localStorage.getItem('reeloraCookies')) {
            setTimeout(() => {
                cookiePopup.style.display = 'block';
            }, 1000);
        }

        acceptBtn.addEventListener('click', () => {
            localStorage.setItem('reeloraCookies', 'accepted');
            cookiePopup.style.display = 'none';
        });

        rejectBtn.addEventListener('click', () => {
            localStorage.setItem('reeloraCookies', 'rejected');
            cookiePopup.style.display = 'none';
        });
    </script>
</body>
</html>