<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Holydayplay</title>
    <meta name="author" content="Holydayplay" />
    <meta name="description" content="Holydayplay" />
    <meta name="keywords" content="Holydayplay" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;family=Montserrat:wght@700&amp;family=Roboto:wght@400;700&amp;display=swap"
        rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="128x128" href="android-icon-128x128.png" />
    <link rel="icon" type="image/png" sizes="128x128" href="android-icon-128x128.png" />
    <link rel="manifest" href="assets/img/favicons/manifest.json" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="assets/img/favicons/android-icon-192x192.png" />

    <meta name="theme-color" content="#ffffff" />
    <link rel="stylesheet" href="assets/css/app.min.css" />
    <link rel="stylesheet" href="assets/css/fontawesome.min.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="assets/css/theme-color1.css" />
</head>

<body>
    <div class="preloader">
        <button class="vs-btn preloaderCls">Cancel Preloader</button>
        <div class="preloader-inner">
            <div class="loader-logo">
                <img style="max-width: 88px;" style="max-width: 88px;" src="assets/img/logo.png" alt="Loader Image" />
            </div>
            <div class="loader-wrap pt-4">
                <span class="loader"></span>
            </div>
        </div>
    </div>
    <div class="sticky-header-wrap sticky-header bg-light-dark py-1 py-sm-2 py-lg-1">
        <div class="container position-relative">
            <div class="row align-items-center">
                <div class="col-5 col-md-3">
                    <div class="logo">
                        <a href="index.html"><img style="max-width: 88px;" style="max-width: 88px;"
                                src="assets/img/logo.png" alt="Holydayplay" /></a>
                    </div>
                </div>
                <div class="col-7 col-md-9 text-end position-static">
                    <nav class="main-menu menu-sticky1 d-none d-lg-block link-inherit">
                        <ul>
                            <li><a href="index.html">Home</a> </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="privacy-policy.html">Privacy Policy</a> </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                    <button class="vs-menu-toggle text-theme border-theme d-inline-block d-lg-none"><i
                            class="far fa-bars"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="sidemenu-wrapper d-none d-lg-block">
        <div class="sidemenu-content bg-light-dark">
            <button class="closeButton border-theme text-theme bg-theme-hover sideMenuCls"><i
                    class="far fa-times"></i></button>
            <div class="about-box">
                <a href="indeax.html"><img src="assets/img/logo-2.png" alt="Holydayplay" /></a>
                <p class="text-light mt-3">Appropriately reinvent cross-unit scenarios with reliable metrics.
                    Dramatically morph distinctive alignments whereas.</p>
                <ul class="social-links text-light">
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                </ul>
                <div class="my-40">
                    <div class="info-style1">
                        <span class="icon-btn2"><i class="fas fa-map-marker-alt"></i></span>
                        <p class="fs-4 lh-1 fw-medium text-white mb-0">Address</p>
                        <p class="text-white mb-0">301 Massachusetts Ave, Lunenburg MA 1462</p>
                    </div>
                    <div class="info-style1">
                        <span class="icon-btn2"><i class="fas fa-phone"></i></span>
                        <p class="fs-4 lh-1 fw-medium text-white mb-0">Get In Touch</p>
                        <p class="text-white mb-0"><a href="tel:13456789" class="text-inherit">85 125 1256 12145</a></p>
                    </div>
                    <div class="info-style1">
                        <span class="icon-btn2"><i class="fas fa-envelope"></i></span>
                        <p class="fs-4 lh-1 fw-medium text-white mb-0">Mail Us</p>
                        <p class="text-white mb-0"><a href="mailto:zocker@gmail.com"
                                class="text-inherit">zocker@example.com</a></p>
                    </div>
                </div>
            </div>
            <h3 class="sidebox-title text-white h5">Recent viewed</h3>
            <div class="post-thumb-style1">
                <div class="vs-blog d-flex gap-3">
                   
                    <div class="media-body align-self-center">
                        <h4 class="h5 blog-title font-theme lh-base text-white mb-0"><a href="blog-details.html">The
                                General Sery vice Administr</a></h4>
                        <div class="blog-meta text-light fs-xs mt-1">
                            <a href="blog.html"><i class="fal fa-calendar-alt"></i>June 21, 2021</a>
                        </div>
                    </div>
                </div>
                <div class="vs-blog d-flex gap-3">
                  
                    <div class="media-body align-self-center">
                        <h4 class="h5 blog-title font-theme lh-base text-white mb-0"><a href="blog-details.html">Lorem
                                ipsum is placeholder text commonly</a></h4>
                        <div class="blog-meta text-light fs-xs mt-1">
                            <a href="blog.html"><i class="fal fa-calendar-alt"></i>June 21, 2021</a>
                        </div>
                    </div>
                </div>
                <div class="vs-blog d-flex gap-3">
                    <!-- <div class="media-img">
                        <a href="blog-details.html"><img src="assets/img/widget/recent-post-1-3.png"
                                alt="Recent Post" /></a>
                    </div> -->
                    <div class="media-body align-self-center">
                        <h4 class="h5 blog-title font-theme lh-base text-white mb-0"><a href="blog-details.html">From
                                its medieval origins to the digital</a></h4>
                        <div class="blog-meta text-light fs-xs mt-1">
                            <a href="blog.html"><i class="fal fa-calendar-alt"></i>June 21, 2021</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup-search-box d-none d-lg-block">
        <button class="searchClose border-theme text-theme"><i class="fal fa-times"></i></button>
        <form action="#">
            <input type="text" class="border-theme" placeholder="What are you looking for" />
            <button type="submit"><i class="fal fa-search"></i></button>
        </form>
    </div>
    <div class="vs-menu-wrapper">
        <div class="vs-menu-area bg-dark">
            <button class="vs-menu-toggle"><i class="fal fa-times"></i></button>
            <div class="mobile-logo">
                <a href="index.html"><img style="max-width: 88px;" style="max-width: 88px;" src="assets/img/logo.png"
                        alt="Holydayplay" /></a>
            </div>
            <div class="vs-mobile-menu link-inherit"></div>
        </div>
    </div>
    <header class="header-wrapper header-layout1 position-absolute top-0 start-0 w-100 z-index-step1">
        <div class="header-top">
            <div class="container">
                <div class="row py-md-2">
                    <div class="col-sm-6 d-none d-md-block">
                        <p class="mb-0 fs-xs text-white">Welcome to Holydayplay</p>
                    </div>
                    <div class="col-sm-6 text-end d-none d-md-block">
                        <ul class="social-links fs-xs text-white">
                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-main">
            <div class="container position-relative" style="max-width: 100%;padding-left: 0px;padding-right: 0px;">
                <div class="bg-dark px-50">
                    <div class="row align-items-center">
                        <div class="col-6 col-lg-4 d-block d-xl-none py-3 py-xl-0">
                            <div class="header-logo">
                                <a href="index.html"><img style="max-width: 88px;" style="max-width: 88px;"
                                        src="assets/img/logo.png" alt="Holydayplay" /></a>
                            </div>
                        </div>
                        <div class="col-6 col-lg-8 col-xl-5 text-end text-xl-start">
                            <nav class="main-menu menu-style1 mobile-menu-active" data-expand="992">
                                <ul>
                                    <li><a href="index.html">Home</a> </li>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="privacy-policy.html">Privacy Policy</a> </li>
                                    <li><a href="contact.html">Contact</a></li>
                                </ul>
                            </nav>
                            <button type="button" class="vs-menu-toggle text-white d-inline-block d-lg-none"><i
                                    class="far fa-bars"></i></button>
                        </div>
                        <div class="col-md-4 col-lg-2 text-center d-none d-xl-block">
                            <div class="header-logo1">
                                <a href="index.html"><img style="max-width: 88px;" src="assets/img/logo.png"
                                        alt="Holydayplay" /></a>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-5 d-none d-xl-block">
                            <div class="header-right d-flex align-items-center justify-content-end">
                                <a href="https://www.facebook.com/gaming/play/"
                                    class="vs-btn outline1 d-none d-xl-inline-block"><i
                                        class="fab fa-twitch"></i><strong>FaceBook Game</strong></a>
                                <ul class="header-list1 list-style-none ml-30">
                                    <li><button class="dropdown-toggle" "
                                            aria-expanded=" false"><img src="assets/img/flag/flag-1.png"
                                                alt="Country Flag" class="flag radius-circle" /></button>
                                        <ul class="dropdown-menu">
                                            <!-- <li><a class="dropdown-item" href="#"><img src="assets/img/flag/french.png"
                                                        alt="Flag" class="flag-small" /> French</a></li>
                                            <li><a class="dropdown-item" href="#"><img src="assets/img/flag/germany.png"
                                                        alt="Flag" class="flag-small" /> Germany</a></li>
                                            <li><a class="dropdown-item" href="#"><img src="assets/img/flag/italy.png"
                                                        alt="Flag" class="flag-small" /> Italy</a></li>
                                            <li><a class="dropdown-item" href="#"><img
                                                        src="assets/img/flag/bangladesh.png" alt="Flag"
                                                        class="flag-small" /> Bangladesh</a></li> -->
                                            <li><a class="dropdown-item" href="#"><img
                                                        src="assets/img/flag/united-state.png" alt="Flag"
                                                        class="flag-small" /> United State</a></li>
                                        </ul>
                                    </li>
                                    <!-- <li><button class="searchBoxTggler"><i class="far fa-search"></i></button></li> -->
                                    <!-- <li><button class="sideMenuToggler"><i
                                                class="fal fa-grip-horizontal fs-2"></i></button></li> -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section class="vs-hero-wrapper">
        <div class="vs-hero-carousel" data-height="900" data-container="1170" data-slidertype="fullwidth"
            data-sm-height="1100">
            <a href="#" class="ls-arrow text-white d-none d-xl-inline-block" data-ls-go="next">Next<i
                    class="fal fa-arrow-right"></i></a>
            <a href="#" class="ls-arrow text-white d-none d-xl-inline-block" data-ls-go="prev"><i
                    class="fal fa-arrow-left"></i>Prev</a>
            <div class="ls-slide" data-ls="duration: 4000; transition2d: 5;">
                <img src="assets/img/hero/hero-img-1.png" alt="Hero Bg Image" class="ls-bg" />
                <!-- <p class="ls-l mb-2 mb-md-0 ls-hide-phone"
                    style="left: 0; top: 350px; min-width: 340px; min-height: 20px; height: 30px; line-height: 1; padding: 5px 40px; background-image: -webkit-linear-gradient(0deg, rgb(75, 21, 135) 0%, rgb(156, 85, 235) 100%);"
                    data-ls="offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                </p>
                <p class="ls-l ls-hide-phone"
                    style="left: 40px; top: 363px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.2em;"
                    data-ls="minfontsize: 10px; offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; texttypein: chars_asc; textstartatin: transitioninstart; textdurationin: 100; textfadein: true; textoffsetxin: -20; textshiftin: 20;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                    Match blocks and save heroes.</p> -->
                <!-- <h2 class="ls-l"
                    style="left: -2px; top: 400px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 500; durationout: 3000; fadeout: true; skewxout: 10;">
                    Save the</h2>
                <h2 class="ls-l"
                    style="left: -2px; top: 480px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 400; durationout: 3000; fadeout: true; skewxout: 10;">
                    Hero</h2> -->
                <!-- <p class="ls-l"
                    style="left: 0; top: 575px; color: #b0b1be; font-size: 18px; width: 700px; min-width: 230px; white-space: normal;"
                    data-ls="minfontsize: 16px; durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    The best elimination rescue game.</p> -->
                <div class="ls-l" style="left: 0; top: 635px;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    <div class="vs-btn-group">
                        <a href="https://www.facebook.com/gaming/play/2207877612975496" class="vs-btn gradient-btn">Play
                            Now</a>
                    </div>
                </div>
            </div>
            <div class="ls-slide" data-ls="duration: 4000; transition2d: 5;">
                <img src="assets/img/hero/hero-img-2.png" alt="Hero Bg Image" class="ls-bg" />
                <!-- <p class="ls-l mb-2 mb-md-0 ls-hide-phone"
                    style="left: 0; top: 350px;  min-width: 300px; min-height: 20px; height: 30px; line-height: 1; padding: 5px 40px; background-image: -webkit-linear-gradient(0deg, rgb(75, 21, 135) 0%, rgb(156, 85, 235) 100%);"
                    data-ls="offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                </p> -->
                <!-- <p class="ls-l ls-hide-phone"
                    style="left: 40px; top: 363px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.2em;"
                    data-ls="minfontsize: 10px; offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; texttypein: chars_asc; textstartatin: transitioninstart; textdurationin: 100; textfadein: true; textoffsetxin: -20; textshiftin: 20;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                    Draw, Aim, Dominate!</p> -->
                <!-- <h2 class="ls-l"
                    style="left: -2px; top: 400px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 500; durationout: 3000; fadeout: true; skewxout: 10;">
                    Archery </h2>
                <h2 class="ls-l"
                    style="left: -2px; top: 480px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 400; durationout: 3000; fadeout: true; skewxout: 10;">
                    Shooter</h2> -->
                <!-- <p class="ls-l"
                    style="left: 0; top: 575px; color: #b0b1be; font-size: 18px; width: 700px; min-width: 230px; white-space: normal;"
                    data-ls="minfontsize: 16px; durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    Conquer the bull's eye with precise archery! Cleverly match skill cards to achieve high scores to
                    complete level goals.</p> -->
                <div class="ls-l" style="left: 0; top: 635px;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    <div class="vs-btn-group">
                        <a href="https://www.facebook.com/gaming/play/2074483083056942" class="vs-btn gradient-btn">Play
                            Now</a>
                    </div>
                </div>
            </div>
            <!-- <div class="ls-slide" data-ls="duration: 4000; transition2d: 5;">
                <img src="assets/img/hero/hero-img-3.png" alt="Hero Bg Image" class="ls-bg" />
                <p class="ls-l mb-2 mb-md-0 ls-hide-phone"
                    style="left: 0; top: 350px; width: 318px; min-width: 360px; min-height: 20px; height: 30px; line-height: 1; padding: 5px 40px; background-image: -webkit-linear-gradient(0deg, rgb(75, 21, 135) 0%, rgb(156, 85, 235) 100%);"
                    data-ls="offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                </p>
                <p class="ls-l ls-hide-phone"
                    style="left: 40px; top: 363px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.2em;"
                    data-ls="minfontsize: 10px; offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; texttypein: chars_asc; textstartatin: transitioninstart; textdurationin: 100; textfadein: true; textoffsetxin: -20; textshiftin: 20;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                    Rule the street with your gun!</p>
                <h2 class="ls-l"
                    style="left: -2px; top: 400px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 500; durationout: 3000; fadeout: true; skewxout: 10;">
                    Gang</h2>
                <h2 class="ls-l"
                    style="left: -2px; top: 480px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 400; durationout: 3000; fadeout: true; skewxout: 10;">
                    Fire</h2>
                <p class="ls-l"
                    style="left: 0; top: 575px; color: #b0b1be; font-size: 18px; width: 700px; min-width: 230px; white-space: normal;"
                    data-ls="minfontsize: 16px; durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    Gang wars. Pick your gun and rule!</p>
                <div class="ls-l" style="left: 0; top: 635px;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    <div class="vs-btn-group">
                        <a href="https://www.facebook.com/gaming/play/1762844184633855" class="vs-btn gradient-btn">Play
                            Now</a>
                    </div>
                </div>
            </div> -->
            <!-- <div class="ls-slide" data-ls="duration: 4000; transition2d: 5;">
                <img src="assets/img/hero/hero-img-4.png" alt="Hero Bg Image" class="ls-bg" />
                <p class="ls-l mb-2 mb-md-0 ls-hide-phone"
                    style="left: 0; top: 350px; width: 318px; min-width: 340px; min-height: 20px; height: 30px; line-height: 1; padding: 5px 40px; background-image: -webkit-linear-gradient(0deg, rgb(75, 21, 135) 0%, rgb(156, 85, 235) 100%);"
                    data-ls="offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                </p>
                <p class="ls-l ls-hide-phone"
                    style=" width: 500px; left: 40px; top: 363px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.2em;"
                    data-ls="minfontsize: 10px; offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; texttypein: chars_asc; textstartatin: transitioninstart; textdurationin: 100; textfadein: true; textoffsetxin: -20; textshiftin: 20;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                    Tiny fish, big devour, ocean showdown!</p>
                <h2 class="ls-l"
                    style="left: -2px; top: 400px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 500; durationout: 3000; fadeout: true; skewxout: 10;">
                    Fish.io </h2>
                <h2 class="ls-l"
                    style="left: -2px; top: 480px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 400; durationout: 3000; fadeout: true; skewxout: 10;">
                </h2>
                <p class="ls-l"
                    style="left: 0; top: 575px; color: #b0b1be; font-size: 18px; width: 700px; min-width: 230px; white-space: normal;"
                    data-ls="minfontsize: 16px; durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    Guide your fish to devour opponents and rule the ocean!</p>
                <div class="ls-l" style="left: 0; top: 635px;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    <div class="vs-btn-group">
                        <a href="https://www.facebook.com/gaming/play/475815905254558" class="vs-btn gradient-btn">Play Now</a>
                    </div>
                </div>
            </div> -->
            <div class="ls-slide" data-ls="duration: 4000; transition2d: 5;">
                <img src="assets/img/hero/hero-img-3.png" alt="Hero Bg Image" class="ls-bg" />
                <!-- <p class="ls-l mb-2 mb-md-0 ls-hide-phone"
                    style="left: 0; top: 350px; width: 445px; min-width: 400px; min-height: 20px; height: 30px; line-height: 1; padding: 5px 40px; background-image: -webkit-linear-gradient(0deg, rgb(75, 21, 135) 0%, rgb(156, 85, 235) 100%);"
                    data-ls="offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                </p> -->

                <!-- <p class="ls-l ls-hide-phone"
                    style="left: 40px; top: 363px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.2em;"
                    data-ls="minfontsize: 10px; offsetxin: -100; durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; texttypein: chars_asc; textstartatin: transitioninstart; textdurationin: 100; textfadein: true; textoffsetxin: -20; textshiftin: 20;  transitionout: true; offsetxout: 600; durationout: 3000; fadeout: true; skewxout: 10;">
                    Craft Your Adventure, Drive the Future!</p> -->
                <!-- 加入字体描边 -->
                <!-- <h2 class="ls-l"
                    style="left: -2px; top: 400px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 500; durationout: 3000; fadeout: true; skewxout: 10;">
                    Build </h2>
                <h2 class="ls-l"
                    style="left: -2px; top: 480px; text-transform: uppercase; color: #ffffff; font-weight: 700; font-size: 72px; letter-spacing: -0.03em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; texttransitionin: true; textfadein: true; texttypein: words_asc; textstartatin: transitioninstart; textshiftin: 300; textoffsetyin: 50; transitionout: true; offsetxout: 400; durationout: 3000; fadeout: true; skewxout: 10;">
                    & Drive</h2> -->
                <!-- <p class="ls-l"
                    style="left: 0; top: 575px; color: #b0b1be; font-size: 18px; width: 700px; min-width: 230px; white-space: normal;"
                    data-ls="minfontsize: 16px; durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    Build your own ride and conquer extreme terrain!</p> -->
                <div class="ls-l" style="left: 0; top: 635px;"
                    data-ls="durationin: 1000; delayin: 0; easingin:easeOutQuint; offsetyin: 50; transitionout: true; offsetxout: 300; durationout: 3000; fadeout: true; skewxout: 10;">
                    <div class="vs-btn-group">
                        <a href="https://www.facebook.com/gaming/play/1264656994694727" class="vs-btn gradient-btn">Play
                            Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>


            <section class="vs-blog-wrapper bg-dark vs-blog-layout1 link-inherit space-top space-md-bottom" id="blog">
        <div class="container">
            <div class="section-title">
                <span class="sub-title1">company news</span>
                <h2 class="sec-title1 text-white">latest updates</h2>
            </div>
            <div class="row vs-carousel arrow-white" data-slide-show="3" data-md-slide-show="2" data-sm-slide-show="2"
                data-xs-slide-show="2" data-arrows="true" data-xl-arrows="true">
                <div class="col-lg-4">
                    <div class="vs-blog">
                        <div class="blog-image image-scale-hover">
                            <a href="#"><img src="assets/img/blog1.png" alt="Blog Image"
                                    class="w-100" /></a>
                            <div class="blog-category">
                                <a href="#">New Project</a>
                            </div>
                        </div>
                        <div class="blog-content">
                            <h3 class="blog-title text-white fs-20"><a href="#">Exciting New Project
                                    Launch - Our Latest Innovation</a></h3>
                            <div class="blog-meta text-light fs-xs">
                                <a href="#"><i class="fal fa-calendar-alt"></i>September 20, 2025</a>
                                <a href="#"><i class="fal fa-user"></i>Team</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="vs-blog">
                        <div class="blog-image image-scale-hover">
                            <a href="#"><img src="assets/img/blog2.png" alt="Blog Image"
                                    class="w-100" /></a>
                            <div class="blog-category">
                                <a href="#">Event</a>
                            </div>
                        </div>
                        <div class="blog-content">
                            <h3 class="blog-title text-white fs-20"><a href="#">Attending Industry
                                    Conference - Networking and Learning</a></h3>
                            <div class="blog-meta text-light fs-xs">
                                <a href="#"><i class="fal fa-calendar-alt"></i>June 15, 2024</a>
                                <a href="#"><i class="fal fa-user"></i>Team</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="vs-blog">
                        <div class="blog-image image-scale-hover">
                            <a href="#"><img src="assets/img/blog3.png" alt="Blog Image"
                                    class="w-100" /></a>
                            <div class="blog-category">
                                <a href="#">Team</a>
                            </div>
                        </div>
                        <div class="blog-content">
                            <h3 class="blog-title text-white fs-20"><a href="#">Small Team, Big Dreams
                                    - Our Company Culture</a></h3>
                            <div class="blog-meta text-light fs-xs">
                                <a href="#"><i class="fal fa-calendar-alt"></i>March 10, 2023</a>
                                <a href="#"><i class="fal fa-user"></i>Team</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="vs-blog">
                        <div class="blog-image image-scale-hover">
                            <a href="#"><img src="assets/img/blog4.png" alt="Blog Image"
                                    class="w-100" /></a>
                            <div class="blog-category">
                                <a href="#">Milestone</a>
                            </div>
                        </div>
                        <div class="blog-content">
                            <h3 class="blog-title text-white fs-20"><a href="#">First Product Launch
                                    - A Small Company's Big Achievement</a></h3>
                            <div class="blog-meta text-light fs-xs">
                                <a href="#"><i class="fal fa-calendar-alt"></i>December 5, 2021</a>
                                <a href="#"><i class="fal fa-user"></i>Team</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="bg1 bg-light-dark bg-fixed" data-bg-src="assets/img/bg/bg-1.jpg">
        <div class="vs-video-area space-top">
            <div class="container">
                <div class="section-title">
                    <span class="sub-title1">Game Highlights</span>
                    <h2 class="sec-title1 text-white">Featured Game Videos</h2>
                </div>
                <div class="row align-items-center gx-xl-0 arrow-white vs-carousel" data-slide-show="3"
                    data-sm-slide-show="3" data-xs-slide-show="3" data-arrows="true" data-xl-arrows="true"
                    data-ml-arrows="true" data-center-mode="true" data-xl-center-mode="true" data-ml-center-mode="true"
                    data-lg-center-mode="true" data-md-center-mode="true">
                    <div class="col-lg-4">
                        <div class="video-box1">
                            <a href="#video-popup-1" class="popup-video"><img src="assets/img/video/video-img-1-1.png"
                                    alt="Save the Hero Gameplay" class="w-100" /> </a>
                            <a href="#video-popup-1" class="play-btn popup-video overlay-center"><i
                                    class="fas fa-play"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="video-box1">
                            <a href="#video-popup-2" class="popup-video"><img src="assets/img/video/video-img-1-2.png"
                                    alt="City Run 3D Gameplay" class="w-100" /> </a>
                            <a href="#video-popup-2" class="play-btn popup-video overlay-center"><i
                                    class="fas fa-play"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="video-box1">
                            <a href="#video-popup-3" class="popup-video"><img src="assets/img/video/video-img-1-3.png"
                                    alt="Sniper ACE Gameplay" class="w-100" /> </a>
                            <a href="#video-popup-3" class="play-btn popup-video overlay-center"><i
                                    class="fas fa-play"></i></a>
                        </div>
                    </div>
                    <!-- <div class="col-lg-4">
                        <div class="video-box1">
                            <a href="#" class="popup-video"><img src="assets/img/video/video-img-1-4.png"
                                    alt="Video Image" class="w-100" /> </a>
                            <a href="#" class="play-btn popup-video overlay-center"><i class="fas fa-play"></i></a>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

    </div>

    <section class="vs-member-area vs-member-layout1 bg-light-dark space-top space-md-bottom">
        <div class="container">
            <div class="section-title">
                <span class="sub-title1">Characters</span>
                <h2 class="sec-title1 text-white">Our Beloved Characters</h2>
            </div>
            <div class="row vs-carousel arrow-white" data-arrows="true" data-xl-arrows="true" data-lg-slide-show="4"
                data-md-slide-show="4" data-sm-slide-show="4" data-xs-slide-show="4" data-slide-show="4">
                <div class="col-lg-3">
                    <div class="vs-member">
                        <div class="member-img">
                            <a href="#"><img src="assets/img/member/member-1-1.png" class="w-100"
                                    alt="Member Image" /></a>
                        </div>
                        <div class="member-content">
                            <span class="degi">Ski Rush</span>
                            <h3 class="member-name fs-20"><a href="#">Capybara</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="vs-member">
                        <div class="member-img">
                            <a href="#"><img src="assets/img/member/member-1-2.png" class="w-100"
                                    alt="Member Image" /></a>
                        </div>
                        <div class="member-content">
                            <span class="degi">Archery</span>
                            <h3 class="member-name fs-20"><a href="#">Luna</a></h3>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="vs-member">
                        <div class="member-img">
                            <a href="#"><img src="assets/img/member/member-1-3.png" class="w-100"
                                    alt="Member Image" /></a>
                        </div>
                        <div class="member-content">
                            <span class="degi">City Chaser</span>
                            <h3 class="member-name fs-20"><a href="#">Zara</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="vs-member">
                        <div class="member-img">
                            <a href="#"><img src="assets/img/member/member-1-4.png" class="w-100"
                                    alt="Member Image" /></a>
                        </div>
                        <div class="member-content">
                            <span class="degi">City Run</span>
                            <h3 class="member-name fs-20"><a href="#">Alex</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="vs-member">
                        <div class="member-img">
                            <a href="#"><img src="assets/img/member/member-1-5.png" class="w-100"
                                    alt="Member Image" /></a>
                        </div>
                        <div class="member-content">
                            <span class="degi">City Chaser</span>
                            <h3 class="member-name fs-20"><a href="#">Maya</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="vs-member">
                        <div class="member-img">
                            <a href="#"><img src="assets/img/member/member-1-6.png" class="w-100"
                                    alt="Member Image" /></a>
                        </div>
                        <div class="member-content">
                            <span class="degi">City Chaser</span>
                            <h3 class="member-name fs-20"><a href="#">Coco</a></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="vs-brand-wrapper bg-dark space">
        <div class="container">
            <div class="row vs-carousel arrow-white" data-slide-show="5" data-lg-slide-show="4" data-md-slide-show="4"
                data-sm-slide-show="3" data-xs-slide-show="2" data-arrows="true" data-xl-arrows="true"
                data-ml-arrows="true" data-lg-arrows="true">
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-1.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-2.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-3.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-4.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-5.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-1.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-2.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-3.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-4.png" alt="Brand Image" />
                </div>
                <div class="col-xl-2 text-center">
                    <img src="assets/img/brand/brand-5.png" alt="Brand Image" />
                </div>
            </div>
        </div>
    </div>
    <section class="vs-contact-wrapper bg-light-dark space">
        <div class="container">
            <div class="section-title">
                <span class="sub-title1">Contact</span>
                <h2 class="sec-title1 text-white">Get in touch</h2>
            </div>
            <form action="mail.php" method="POST" class="contact-form contact-form-style1 form-dark px-80 py-80">
                <div class="row">
                    <div class="col-lg-6 form-group">
                        <label class="text-white" for="name">Enter Name</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="Enter Your Name" />
                        <i class="fal fa-user"></i>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="text-white" for="email">Enter Email</label>
                        <input type="text" id="email" name="email" class="form-control"
                            placeholder="Enter Your Email" />
                        <i class="fal fa-envelope"></i>
                    </div>
                    <div class="col-12 form-group">
                        <label class="text-white" for="message">Enter Message</label>
                        <textarea class="form-control" id="message" rows="11" cols="50" name="message"
                            placeholder="Your Message"></textarea>
                        <i class="fal fa-pencil-alt"></i>
                    </div>
                    <div class="col-12 form-group mb-0 text-center">
                        <button type="submit" class="vs-btn gradient-btn">Submit Your Quote</button>
                        <p class="form-messages text-white mt-20 mb-0 text-center"></p>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <section class="vs-newsletter-wrapper bg-dark z-index-step1">
        <div class="container">
            <div class="position-relative">
                <div
                    class="inner-wrapper bg-black position-absolute top-50 start-50 translate-middle w-100 px-60 py-40">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-xl-6 text-center text-xl-start mb-3 mb-xl-0">
                            <span class="sub-title2 mt-2">Newsletter</span>
                            <h2 class="mb-0 text-white">get monthly updates</h2>
                        </div>
                        <div class="col-md-10 col-lg-8 col-xl-6">
                            <form action="#" class="newsletter-style1 d-md-flex">
                                <input type="email" class="form-control" placeholder="Enter email address" />
                                <button class="vs-btn gradient-btn">Subscribe Now</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer-wrapper footer-layout1 bg-fluid bg-major-black position-relative">
        <div class="bg-fluid d-none d-none d-xl-block position-absolute start-0 top-0 w-100 h-100"
            data-bg-src="assets/img/bg/footer-bg-1-1.jpg"></div>
        <div class="footer-widget-wrapper dark-style1 z-index-common">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-md-6 col-lg-3 col-xl-4">
                        <div class="widget footer-widget pt-0">
                            <h3 class="widget_title">About Us</h3>
                            <div class="vs-widget-about">
                                <p class="about-text text-footer1 pe-xl-5">Holydayplay develops fun mobile games with
                                    lovable characters and engaging gameplay experiences for players everywhere.</p>
                                <div class="d-flex gap-2 text-white mt-45">
                                    <a class="icon-btn1 skew-right" href="#"><i class="fab fa-facebook-f"></i></a>
                                </div>
                                <p class="text-white fs-xs mb-0">Hong Kong Holydayplay Network Technology Co., Limited</p>
                                <p class="text-white fs-xs mb-1">Copyright © 2025</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-3 col-xl-2">
                        <div class="widget widget_categories footer-widget">
                            <h3 class="widget_title">Our Products</h3>
                            <ul>
                                <li><a href="https://www.facebook.com/gaming/play/2207877612975496">Save the Hero</a>
                                </li>
                                <li><a href="https://www.facebook.com/gaming/play/1447229066114761">City Run 3D</a></li>
                                <li><a href="https://www.facebook.com/gaming/play/1044363550396493">Sniper ACE</a></li>
                                <li><a href="https://www.facebook.com/gaming/play/1230940641927087">Crazy Snake.io</a>
                                </li>
                                <li><a href="https://www.facebook.com/gaming/play/631070910729163">Bottle Bottle</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-3 col-xl-2">
                        <div class="widget widget_nav_menu footer-widget">
                            <h3 class="widget_title">NEED HELP?</h3>
                            <div class="menu-all-pages-container">
                                <ul class="menu">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="privacy-policy.html">Privacy Policy</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 col-xl-3">
                        <div class="widget footer-widget">
                            <h3 class="widget_title">Contact Us</h3>
                            <div class="vs-widget-about">
                                <p class="contact-info"><i class="fal fa-map-marker-alt text-white"></i>RM H11, 1/F,
                                    KAISER EST PHASE 2, NO. 51 MAN YUE ST HUNG HOM HONG KONG</p>
                                <p class="contact-info"><i class="fal fa-phone text-white"></i><a
                                        href="tel:+65965252561">(+86) 15688868570</a></p>
                                <p class="contact-info"><i class="fal fa-envelope text-white"></i><a
                                        href="mailto:sky@holydayplay.com">sky@holydayplay.com</a></p>
                                <p class="contact-info"><i class="fal fa-globe text-white"></i><a
                                        href="#">www.holydayplay.com</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </footer>
    <a href="#" class="scrollToTop icon-btn3"><i class="far fa-angle-up"></i></a>
    <div class="vs-cursor"></div>
    <div class="vs-cursor2"></div>
    <script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/vscustom-carousel.min.js"></script>
    <script src="assets/js/vs-cursor.min.js"></script>
    <script src="assets/js/vsmenu.min.js"></script>
    <script src="https://ditu.google.cn/maps/api/js?key=AIzaSyDC3Ip9iVC0nIxC6V14CKLQ1HZNF_65qEQ"></script>
    <script src="assets/js/map.js"></script>
    <script src="assets/js/ajax-mail.js"></script>
    <script src="assets/js/main.js"></script>

    <!-- 视频弹出框内容 -->
    <div id="video-popup-1" class="white-popup mfp-hide">
        <div class="video-container">
            <video width="100%" height="auto" controls poster="assets/img/video/video-img-1-1.png">
                <source src="assets/video/1.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>
    </div>

    <div id="video-popup-2" class="white-popup mfp-hide">
        <div class="video-container">
            <video width="100%" height="auto" controls poster="assets/img/video/video-img-1-2.png">
                <source src="assets/video/2.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>
    </div>

    <div id="video-popup-3" class="white-popup mfp-hide">
        <div class="video-container">
            <video width="100%" height="auto" controls poster="assets/img/video/video-img-1-3.png">
                <source src="assets/video/3.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>
    </div>

    <style>
        /* 视频弹出框样式 */
        .white-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            width: auto;
            max-width: 90%;
            margin: 0;
            border-radius: 8px;
            z-index: 9999;
            display: none;
            /* 默认隐藏 */
        }

        /* 当 Magnific Popup 激活时显示 */
        .mfp-ready .white-popup {
            display: block !important;
        }

        .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }

        .video-container video {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        /* Magnific Popup 淡入淡出效果 */
        .mfp-fade.mfp-bg {
            opacity: 0;
            -webkit-transition: all 0.15s ease-out;
            -moz-transition: all 0.15s ease-out;
            transition: all 0.15s ease-out;
        }

        .mfp-fade.mfp-bg.mfp-ready {
            opacity: 0.8;
        }

        .mfp-fade.mfp-bg.mfp-removing {
            opacity: 0;
        }

        .mfp-fade.mfp-wrap .mfp-content {
            opacity: 0;
            -webkit-transition: all 0.15s ease-out;
            -moz-transition: all 0.15s ease-out;
            transition: all 0.15s ease-out;
        }

        .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
            opacity: 1;
        }

        .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
            opacity: 0;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .white-popup {
                max-width: 95%;
                padding: 10px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .video-container {
                max-width: 100%;
            }

            .video-container video {
                border-radius: 4px;
                min-height: 200px;
                /* 确保最小高度 */
            }
        }

        /* 小屏幕手机优化 */
        @media (max-width: 480px) {
            .white-popup {
                max-width: 98%;
                padding: 5px;
                margin: 0;
            }

            .video-container video {
                min-height: 180px;
                max-height: 60vh;
                /* 限制最大高度为视口高度的60% */
            }
        }

        /* 横屏模式优化 */
        @media (max-width: 768px) and (orientation: landscape) {
            .white-popup {
                max-width: 90%;
                padding: 5px;
            }

            .video-container video {
                max-height: 80vh;
                /* 横屏时使用更多视口高度 */
                min-height: 150px;
            }
        }
    </style>
</body>

</html>