@extends('partials.main')
@section('title')
    {{ 'Home Page' }}
@endsection
@section('content')
    <style>
        .title-last {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 24px;
            text-align: center;
            margin: 0;
            padding: 0;
            z-index: 2;
        }

        .last-gat {
            height: 250px;
            width: 350px;
            object-fit: cover;
        }

        .tg-homeslidervtwo .tg-slidercontent,
        .tg-homeslidervtwo .tg-slidercontent h1,
        .tg-homeslidervtwo .tg-slidercontent h2 {
            text-align: center;
        }

        .tg-populartourtitle {
            width: 100%;
            float: left;
            height: 48px;
            padding: 0 0 20px;
        }

        .tg-slidercontent h1 {
            color: #fff;
            margin: 0 0 20px;
            font-size: 25px;
            font-weight: bold;
            line-height: 25px;
            text-align: center;

        }

        img.des-first {
            height: 480px !important;
            width: 370px !important;
            object-fit: cover;
        }

        img.des-second {
            width: 400px !important;
            height: 225px !important;
            object-fit: cover;
        }


        img.des-third {
            width: 400px !important;
            height: 225px !important;
            object-fit: cover;
        }

        img.des-fourth {
            height: 480px !important;
            width: 370px !important;
            object-fit: cover;
        }

        @media screen and (max-width: 480px) {
            .tg-infonav ul li+li {
                padding: 0 0 0 25%;
            }
        }

        .alert-container {
            font-family: helvetica, arial;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            z-index: 999999;
        }

        .alert-container {
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
            z-index: 999999;
        }

        .alert-container {
            background-color: #ff7550;

            border: 1px solid #ff7550;
            z-index: 999999;
        }



        .alert-container {
            position: fixed;
            bottom: 10%;
            left: 0;
            text-align: center;
            width: 90%;
            z-index: 999999;
            right: 0;
            margin: 0 auto;
            color: #000;
        }

        .alert-container .alert {
            text-align: center;
            font-size: 15px;
            z-index: 999999;
            margin-bottom: 0px;
        }

        .tg-description {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 20.4em;
        }

        #tg-homebannerslider {
            height: 100vh;

            overflow: hidden;

        }

        video {
            width: 100%;
        }

        .video-background {
            width: 100%;
            height: 100%;
            min-height: 100%;

            object-fit: cover;
        }

        .tg-slidercontent h2 {
            font-size: 30px;
            line-height: 30px;
            font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        }

        @media (max-width: 768px) {
            #tg-homebannerslider {
                height: 100vh;

            }
        }

        @media (max-width: 768px) {
            .bannerimg {
                padding: 6px;

            }
        }

        @media (min-width: 1250px) {
            .tg-middle {
                display: none;
            }
        }

        .scroll-down-arrow {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .scroll-down-arrow a {
            text-decoration: none;
            color: #fff;
            font-size: 24px;
        }

        .scroll-down-arrow a i {
            display: block;
            animation: bounce 3s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-20px);
            }

            60% {
                transform: translateY(-10px);
            }
        }

        .videocaption {
            position: absolute;
            bottom: 30%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 20px;
            border-radius: 5px;
        }

        .tg-parallax .tg-sectionspace {
            height: 520px;
            background: rgba(0, 0, 0, 0.50);
        }

        .mask {
            mask-image: url('images/frame-design.svg');

            mask-mode: alpha;
            -webkit-mask-image: url('images/frame-design.svg');
            -webkit-mask-mode: alpha;

            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }

        a#showButton {
            background: gold;
        }

        .tg-populardestination img {
            height: 250px;
            object-fit: cover;
        }

        @media only screen and (min-width: 992px) {
            .imgBorder {
                cursor: pointer;
                height: auto;
                width: 50vw;

                padding: 10px 0px 10px 0px;
                text-align: center;

            }
        }

        @media only screen and (max-width: 600px) {
            .videocaption {

                bottom: 28%;
                width: 92%;

            }

            video {
                height: 100vh;
                width: auto;
            }
        }

        @media screen and (max-width: 395px) {
            .slidehader {
                font-size: 35px !important;
            }

            .tg-homeslidervtwo .tg-slidercontent h1 {
                line-height: 10px;
            }

            .pd-one,
            .pd-two {
                padding-top: 50px !important;

            }

            .tg-slidercontent h1 {
                font-size: 20px !important;
            }

            .scroll-down-arrow {
                bottom: 170px;
            }

        }



        @media screen and (max-width: 500px) {

            img.imgBorder {
    height: 180px !important;
    width: 100%;
    object-fit: cover;
}
            .socialIconsHeader {
                display: none
            }

            .mailMobile {
                float: right !important;
                padding: 0 !important;
                padding-right: 30px !important;
            }

            .videoText2 {
                font-size: 22px !important;
            }
        }

        .imgBorder {
            cursor: pointer;
        }

        .itineraryDesc {
            height: 50px;
        }


        /* Styles for the overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        /* Styles for the popup */
        .popup {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            max-width: 400px;
            text-align: center;
        }

        /* Close button styles */
        .close-btn {
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .snowflake {
            position: absolute;
            font-size: 0.7em;
            color: #fff;
            pointer-events: none;
            animation: fall linear infinite;
        }

        @keyframes fall {
            0% {
                transform: translateY(-10vh);
            }

            100% {
                transform: translateY(110vh);
            }
        }

        .center-review {
            text-align: -webkit-center;
        }

        /* ///conteiner/// */
        .container-new {
            width: 100%;
            padding-right: 25px;
            padding-left: 25px;
            margin-right: auto;
            margin-left: auto;
        }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            min-height: 480px;

        }

        #bg-black,
        #tg-pop {
            position: relative;
        }

        #bg-black::before,
        #tg-pop::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* Adjust the last value (0.5) for the desired opacity (0 to 1) */
            z-index: 1;
        }

        #bg-black .test,
        #tg-pop .test {
            position: relative;
            z-index: 2;
        }


img.imgBorder {
    height: 280px;
    width: 100%;
    object-fit: cover;
}
    </style>
    <!--************************************
                                                                                                    
                                                                                                                                                                                                                                                                                                         Home Slider Start
                                                                                                 *************************************-->


    <div class="overlay" id="popupOverlay">
        <div class="popup">
            <span class="close-btn" onclick="closePopup()">&times;</span>
            <h2></h2>
            <p></p>
        </div>
    </div>


    <div id="tg-homebannerslider" class="tg-homebannerslider tg-haslayout">
        <div class="video-background">
            <video autoplay muted loop playsinline>
                <source src="../video/{{ $video->video }}" type="video/mp4">



            </video>
        </div>
        <div class="videocaption">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="tg-slidercontent">
                            <h1 style="color: {{ $s29->value }}">{{ $s19->value }}</h1>
                            <h2 class="videoText2" style="color: {{ $s30->value }}">{{ $s20->value }}</h2>
                        </div>
                    </div>
                </div>
                <div class="tg-middle">

                    <div class="tg-userbox">

                        <a class="tg-btn" id="showButton" onclick="showOptionsPopup()">
                            <span>PLACE INQUIRY </span>
                        </a>



                    </div>
                </div>
            </div>

        </div>
        <div class="scroll-down-arrow">
            <a href="#tg-main"><i style="color: {{ $s29->value }}" class="fas fa-chevron-down"></i></a>
        </div>
    </div>
{{-- 
    <section>
        <section style="padding-top:20px;" class="tg-sectionspace tg-toppadding tg-haslayout">
            <div class="container-new">
                <div class="row">
                    <div>
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="border:1px solid #ccc">
                            <a href="{{ route('loyalty-programme') }}">
                                <div style="padding-top:5px;text-align: center;" class="bannerimg">
                                    <img class="imgBorder" src="../thumbnails/{{ $s31->value }}" alt="">
                                </div>
                            </a>
                        </div>



                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="border:1px solid #ccc">
                            <a href="{{ route('dialog-5g') }}">
                                <div style="padding-top:5px;text-align: center;" class="bannerimg">
                                    <img class="imgBorder" src="../thumbnails/{{ $s32->value }}" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section> --}}
       
    @endsection