@extends('layouts.app')
@section('content')
    <div class="page-blue">
        <div class="hero-content">
            <div class="slider">
                <div class="dashSlides">

                    <div class="dashSlide animate__animated animate__fadeIn animate__slower 3s">
                        <div class="slide-content">
                            <div class="left-content" style="text-align: justify">
                                <h4>Thirst For The Best. <br> First For You.</h4>
                                <p>Phoenix Beverages Group (PBG) is renowned for creating innovative beverages that elevate life's special moments. We craft innovative beverages, from refreshing soft drinks and water to premium beers, wines, and spirits. Made with high-quality ingredients, our products are enjoyed across Mauritius and beyond.</p>
                                <div class="cta">
                                    <button class="button pbg-button pbg-shadow-dash">
                                        <a class="black" href="{{route('about-us')}}">Explore </a>
                                    </button>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="image-container animate__animated animate__pulse animate__slower slow-pulse">
                                    <img src="{{ asset('images/homepage/pbg-phoenix-beer-thirst-for-best-logo-changed.png') }}" class="bg-image" alt="pbg-foster-brand-slider">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dashSlide active animate__animated animate__fadeIn animate__slower 3s">
                        <div class="slide-content">
                            <div class="left-content" style="text-align: justify">
                                <h4>Fostering Brand<br />Inspiration</h4>
                                <p>Since 1931, our beverages have been woven into Mauritius's cultural fabric. Proudly, we now share our award-winning, high-quality alcoholic and non-alcoholic drinks with the world, continuously inspired to deliver the best.</p>
                                <div class="cta">
                                    <button class="button pbg-button pbg-shadow-dash">
                                        <a class="black" href="{{route('our-brand')}}">Explore </a>
                                    </button>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="image-container animate__animated animate__pulse animate__slower slow-pulse">
                                    <img src="{{ asset('images/homepage/pbg-foster-brand-slider.png') }}" class="bg-image" alt="pbg-foster-brand-slider">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dashSlide animate__animated animate__fadeIn animate__slower 3s">
                        <div class="slide-content">
                            <div class="left-content" style="text-align: justify">
                                <h4>Driving Innovative <br />Revolution</h4>
                                <p>With a diverse portfolio, PhoenixBev delivers established favorites and exciting new options. We stay ahead of consumer trends, offering innovative flavors and a wider variety of lower-alcohol and reduced-sugar drinks.</p>
                                <div class="cta">
                                    <button class="button pbg-button pbg-shadow-dash">
                                        <a class="black" href="{{route('innovation')}}">Explore </a>
                                    </button>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="image-container animate__animated animate__pulse animate__slower slow-pulse">
                                    <img src="{{ asset('images/homepage/pbg-innovation-slider.png') }}" class="bg-image" alt="pbg-foster-brand-slider">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dashSlide animate__animated animate__fadeIn animate__slower 3s">
                        <div class="slide-content">
                            <div class="left-content" style="text-align: justify">
                                <h4>Act Responsibly, <br /> Think Sustainable</h4>
                                <p>Our world-class operations prioritize responsible environmental practices. We are dedicated to sustainably managing natural resources, ensuring compliance, and minimizing our ecological footprint.</p>
                                <div class="cta">
                                    <button class="button pbg-button pbg-shadow-dash">
                                        <a class="black" href="{{route('phoenix-earth')}}">Explore </a>
                                    </button>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="image-container animate__animated animate__pulse animate__slower slow-pulse">
                                    <img src="{{ asset('images/homepage/pbg-phoenix-earth-sdg-slider.png') }}" class="bg-image" alt="pbg-innovation-slider">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dashSlide active animate__animated animate__fadeIn animate__slower 3s">
                        <div class="slide-content">
                            <div class="left-content" style="text-align: justify">
                                <h4>A Regional Expansion Of<br />Our Brands</h4>
                                <p>Beyond Mauritius, PhoenixBev has established international selling points across the Indian Ocean, Africa, Australia, and Europe. We are now geared to further expand globally, fulfilling our vision to "Provide happiness through beverages."</p>
                                <div class="cta">
                                    <button class="button pbg-button pbg-shadow-dash">
                                        <a class="black" href="{{route('our-reach')}}">Explore </a>
                                    </button>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="image-container animate__animated animate__pulse animate__slower slow-pulse">
                                    <img src="{{ asset('images/homepage/pbg-our-reach-map-slider.png')  }}" class="bg-image" alt="hero-slider">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Add more slides as needed -->
                </div>
                {{-- <div class ="navBtn">
                    <button class="dashPrev">&#10094;</button>
                    <button class="dashNext">&#10095;</button>
                </div> --}}

                <div class="indicators">
                    <span class="indicator active" onclick="currentSlide(0)"></span>
                    <span class="indicator" onclick="currentSlide(1)"></span>
                    <span class="indicator" onclick="currentSlide(2)"></span>
                    <span class="indicator" onclick="currentSlide(3)"></span>
                    <span class="indicator" onclick="currentSlide(4)"></span>
                    <!-- Add more indicators as needed -->
                </div>
            </div>
        </div>

    </div>

    <div class="our-story">
        <div class="container">
            <div class="mx-auto" style="width:80%">
                <h1 class="fw-bold" style="padding-left: 40px; margin-bottom:5px" data-aos="fade-down" data-aos-duration="1000" data-aos-easing="linear">Get to know our Story</h1>
                <div class="row">
                    <div class="col-lg-6 col-md-12 column-padding" style="text-align: justify; position: relative; padding-left: 40px;" data-aos="fade-down" data-aos-duration="1000" data-aos-easing="linear">
                        <span class="large-p">W</span>
                        <span class="story-text">ith a legacy in the beverage industry dating back to 1931, Phoenix Beverages Group has evolved into a leading FMCG company in Mauritius, striving to become the regional market leader.
                            Listed on the Mauritius Stock Exchange since 1993, we are dedicated to excellence in both local and international markets.
                        </span>
                    </div>
                    <div class="col-lg-6 col-md-12 column-padding" style="text-align: justify" data-aos="fade-down" data-aos-duration="1000" data-aos-easing="linear">
                        <span class="story-text">Our vision is to lead the commercial beverage sector in the Indian Ocean region by ensuring our products are accessible and affordable.
                            We focus on building strong, valuable brands while fostering a sustainable and profitable business model aligned with five key Sustainable Development Goals (SDGs).</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" data-aos="fade-down" data-aos-duration="500" data-aos-easing="linear" data-aos-delay="500">
        <div class="landing-page-video bg-image" style="background-image: url({{ asset('images/welcome-img-bck.png') }})">
            <div class="landing-video-overlay">
                <div class="row">
                    <div class="col-6" >
                        <div id="text-content">
                            <h4>Embark on a journey through <br>our evolution over the years.</h4>
                            <h6 class="smallest-text">Explore the rich legacy of our journey, uncovering our evolution, key milestones, and unwavering commitment to excellence over the years.</h6>
                        </div>


                        <div class="row video-cta" onclick="playVideo()">
                            <svg version="1.1" class="play-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px"
                            viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                         <path class="stroke-solid" fill="none" stroke="#08BABB"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
                           C97.3,23.7,75.7,2.3,49.9,2.5"/>
                         <path class="stroke-dotted" fill="none" stroke="#08BABB"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
                           C97.3,23.7,75.7,2.3,49.9,2.5"/>
                         <path class="icon" fill="#08BABB" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
                       </svg>
                            {{-- <div class="col play-text">
                                Play Video
                            </div> --}}
                        </div>

                        <div class="row video-cta" id="pause-btn"  style="display: none;" onclick="pauseVideo()">
                            <svg version="1.1" class="play-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px"
                            viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                         <path class="stroke-solid" fill="none" stroke="#08BABB"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
                           C97.3,23.7,75.7,2.3,49.9,2.5"/>
                         <path class="stroke-dotted" fill="none" stroke="#08BABB"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
                           C97.3,23.7,75.7,2.3,49.9,2.5"/>
                         <path class="icon" fill="#08BABB" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
                       </svg>
                            {{-- <div class="col play-text">
                                Pause Video
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Hidden video element -->
            <video id="landing-video" width="100%" height="auto" style="display: none;" controls disablePictureInPicture>
                <source src="{{asset('videos/pbg-coporation-launch.mp4')}}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>








    <div class="mt-6">
        <div class="container">
            <h4>Overview</h4>
        </div>
        <div class="dash-slider">
            <div class="dash-containers container">
                <div class="dash-container active animate__animated animate__fadeIn animate__slower 3s" id="container1">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">
                            <div class="overview-image bg-image pbg-shadow"
                                style="background-image: url({{ asset('images/our-brand-bg_2025.png') }})">

                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left" data-aos-duration="1000" data-aos-easing="linear">
                            <h4>Our brands</h4>
                            <p style="text-align: justify">Phoenix Beverages Group creates exceptional products with premium natural ingredients,
                                earning a special place as local favourites among Mauritians and visitors alike. Discover our wide
                                range of locally crafted and international brands.
                            </p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('our-brand')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dash-container animate__animated animate__fadeIn animate__slower 3s" id="container2">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right">
                            <div class="overview-image bg-image pbg-shadow"
                                style="background-image: url({{ asset('images/our-leadership/cover.png') }})">

                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left">
                            <h4>Our Leadership</h4>
                            <p style="text-align: justify">Phoenix Beverages Group's Board upholds the highest standards of governance,
                                aligning with Mauritius' Code of Corporate Governance. We foster a culture of ethical
                                excellence and integrity among all stakeholders.</p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('our-leadership')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dash-container animate__animated animate__fadeIn animate__slower 3s" id="container3">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right">
                            <div class="overview-image bg-image pbg-shadow"
                                style="background-image: url({{ asset('images/sustainability/esg-img-cover.png') }})">

                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left">
                            <h4>ESG</h4>
                            <p style="text-align: justify">At Phoenix Beverages Group, sustainability is at the core of our operations,
                                shaping a responsible and thriving ecosystem. Our dedicated strategy drives
                                clear actions to embed sustainability into our brand DNA.</p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('sustainability')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dash-container animate__animated animate__fadeIn animate__slower 3s" id="container4">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right">
                            <div class="overview-image bg-image pbg-shadow"
                                style="background-image: url({{ asset('images/innovation/cover.png') }})">

                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left">
                            <h4>Innovations</h4>
                            <p style="text-align: justify">Phoenix Beverages Group fosters talent through its Innovation Department, a hub for creativity where ideas are nurtured
                                and realised. We encourage everyone across the organisation to contribute and bring innovations to life.
                            </p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('innovation')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dash-container animate__animated animate__fadeIn animate__slower 3s" id="container5">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right">
                            <div class="overview-image bg-image pbg-shadow"
                                style="background-image: url({{ asset('images/our-reach/cover.png') }})">

                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left">
                            <h4>Our Reach</h4>
                            <p style="text-align: justify"> For 22 years, Phoenix Beverages Group has expanded its global footprint,
                                starting with its first beer export. Driven by our International Business Units, our beers have gained a strong presence in international markets.
                            </p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('our-reach')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dash-container animate__animated animate__fadeIn animate__slower 3s" id="container6">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right">
                            <div class="overview-image bg-image pbg-shadow "
                                style="background-image: url({{ asset('images/our-culture/cover.png') }})">

                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left">
                            <h4>Our Culture</h4>
                            <p style="text-align: justify">Phoenix Beverages Group thrives on a high-performance culture, driven by talent development,
                                market agility, and operational excellence. Client-centricity, innovation, and trust are the pillars of our brand DNA.
                           </p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('our-culture')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dash-container animate__animated animate__fadeIn animate__slower 200s" id="container7">
                    <div class="row">
                        <div class="col-7" data-aos="fade-right">
                            <div class="overview-image bg-image pbg-shadow"
                                style="background-image: url({{ asset('images/investor-relations/cover.png') }})">
                            </div>
                        </div>
                        <div class="col-5" data-aos="fade-left">
                            <h4>Investor Relations</h4>
                            <p style="text-align: justify">Phoenix Beverages Group's business model ensures sustainable, long-term value, supported by a strong strategic foundation.
                                We are committed to transparent communication, delivering accurate financial information to our shareholders.
                            </p>
                            <div class="cta">
                                <div class="row">
                                    <div class="learnMore" >
                                        <a class="text-primary" href="{{route('investor-relations')}}">Explore</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dash-controls">
                <div class="dash-control" data-target="container1" id="control1">
                    <span>Our Brands</span>
                </div>
                <div class="dash-control" data-target="container2" id="control2">
                    <span>Leadership</span>
                </div>
                <div class="dash-control" data-target="container3" id="control3">
                    <span>ESG</span>
                </div>
                <div class="dash-control" data-target="container4" id="control4">
                    <span>Innovations</span>
                </div>
                <div class="dash-control" data-target="container5" id="control5">
                    <span>Our Reach</span>
                </div>
                <div class="dash-control" data-target="container6" id="control6">
                    <span>Our Culture</span>
                </div>
                <div class="dash-control" data-target="container7" id="control7">
                    <span>Investor Relations</span>
                </div>
            </div>
        </div>
    </div>


    {{-- <div class="container">
        <div class="landing-overview">
            <div class="row">
                <div class="col-12">
                    <h4>Overview</h4>
                </div>
                <div class="col-7" data-aos="flip-left" data-aos-duration="1000" data-aos-easing="linear">
                    <div class="overview-image bg-image pbg-shadow"
                        style="background-image: url({{ asset('images/pbg-drinks.png') }})">

                    </div>
                </div>
                <div class="col-5" data-aos="flip-down" data-aos-duration="1000" data-aos-easing="linear">
                    <h4>Our brands</h4>
                    <p>Phoenix Beverages Group manufactures exceptional products from high quality natural ingredients. Our
                        team's resourcefulness and capacity to adapt have made some of these products become favourite local
                        brands, enjoyed by Mauritians and foreigners alike. Discover our full range of locally produced and
                        global brands.</p>
                    <div class="cta">
                        <div class="row">
                            <div class="col-7">
                                <div class="text-primary">Explore</div>
                            </div>
                            <div class="col-5">
                                <div class="row">
                                    <div class="col"><button class="button pbg-button-bg black-text"><span
                                                class="fa fa-arrow-left"></span></button></div>
                                    <div class="col"><button class="button pbg-button-bg black-text"><span
                                                class="fa fa-arrow-right"></span></button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}


    <div class="container landing-section">
        <div class="investors-corner">
            <div class="row">
                <div class="col-12">
                    <h4>Investor's Corner</h4>
                </div>
                <div class="col-5">
                    <a href="{{route('investor-relations')}}">
                    <div class="main-investor-box bg-image"
                        style="background-image: url({{ asset('images/homepage/investors_corner.png') }}); background-size: cover; background-position: center;" data-aos="fade-down"
                        data-aos-duration="700" data-aos-easing="linear">
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1;"></div>
                        <div class="row" style="position: relative; color: white; text-align: center; z-index: 2; padding: 20px;">
                            <div class="col-9">
                                <div class="box-title">
                                    <h5>Investor's Corner</h5>
                                    Business model designed to deliver long-term, sustainable value
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="box-arrow"><span class="fa fa-arrow-right"></span></div>
                            </div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-7">
                    <div class="row">
                        <div class="col-6">
                            <a href="{{route('corporate-governance')}}">
                            <div class="investor-box overview-image pbg-shadow  bg-image" id="corporate-governance"
                                data-aos="fade-down" data-aos-duration="700" data-aos-easing="linear">
                                <div class="row">
                                    <div class="col-9">
                                        <div class="box-title">
                                            Corporate Governance
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="box-arrow"><span class="fa fa-arrow-right"></span></div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{route('holding-companies')}}">
                            <div class="investor-box overview-image pbg-shadow  bg-image" id="quaterly-financial"
                                data-aos="fade-down" data-aos-duration="700" data-aos-easing="linear">
                                <div class="row">
                                    <div class="col-9">
                                        <div class="box-title">Holding Companies </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="box-arrow"><span class="fa fa-arrow-right"></span></div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{route('integratedReport')}}">
                            <div class="investor-box overview-image pbg-shadow bg-image" id="annual-report"
                                data-aos="fade-down" data-aos-duration="700" data-aos-easing="linear">
                                <div class="row">
                                    <div class="col-9">
                                        <div class="box-title">Latest Annual <br>Report</div>
                                    </div>
                                    <div class="col-3">
                                        <div class="box-arrow"><span class="fa fa-arrow-right"></span></div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{route('shareholders')}}">
                            <div class="investor-box overview-image pbg-shadow bg-image" id="share-price"
                                data-aos="fade-down" data-aos-duration="700" data-aos-easing="linear">
                                <div class="row">
                                    <div class="col-9">
                                        <div class="box-title">Shareholder's Corner</div>
                                    </div>
                                    <div class="col-3">
                                        <div class="box-arrow"><span class="fa fa-arrow-right"></span></div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container landing-section">
        <div class="news-corner">
            <div class="row">
                <div class="col-12">
                    <h4>Latest News</h4>
                </div>


                @unless (empty($news))
                @foreach ($news as $newsData)

                <div class="col-12 col-lg-4" data-aos="fade-down" data-aos-duration="700" data-aos-easing="linear">
                    <div class="news-container">
                        <div class="news-image bg-image"
                        style="background-image: url({{ $newsData->image_url }})">
                            <div class="news-date">{{$newsData->date}}</div>
                            <div class="news-tag">{{$newsData->category}}</div>
                            <div class="news-title">
                                <h4>{{\Str::limit($newsData->title, 110, '[...]')}}</h4>
                            </div>
                            <div class="latestNewsDetails">
                                <h6>{!!  \Str::limit($newsData->body, 200, '[...]') !!}</h6>
                                <div class="learnMoreDash text-center mx-auto w-50" >
                                    <a class="" href="{{route('news.details',$newsData->id)}}">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
                @else
                <i class="text-center smallest-text">No News to display </i>
                @endunless


                <!-- News Item 1 -->


                <!-- News Item 2 -->
                {{-- <div class="col-12 col-lg-4" data-aos="fade-down" data-aos-duration="800" data-aos-easing="linear">
                    <div class="news-container">
                        <div class="news-image bg-image pbg-radius" style="background-image: url({{ asset('images/homepage/news/sprit-clear.png') }})">
                            <div class="news-date">13 October, 2022</div>
                            <div class="news-tag">Business</div>
                            <div class="news-title">
                                <h4>Sprite: Bottles Go From Green To Clear For Easier Recycling.</h4>
                            </div>
                            <div class="latestNewsDetails">
                                <h6>Port-Louis, October 12, 2022: In line with its sustainability strategy called World Without Waste (WWW), Coca-Cola in Mauritius, with the support of its bottling partner Phoenix Beverages Limited...</h6>
                                <div class="learnMoreDash text-center mx-auto w-50" >
                                    <a class="" href="{{route('news.details',31)}}">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}

                <!-- News Item 3 -->
                {{-- <div class="col-12 col-lg-4" data-aos="fade-down" data-aos-duration="900" data-aos-easing="linear">
                    <div class="news-container">
                        <div class="news-image bg-image pbg-radius" style="background-image: url({{ asset('images/homepage/news/renaisenses-banner.png') }})">
                            <div class="news-date">01 July, 2022</div>
                            <div class="news-tag">Business</div>
                            <div class="news-title">
                                <h4>The Statue of the RenaiSenses: A breathtaking sculpture.</h4>
                            </div>
                            <div class="latestNewsDetails">
                                <h6>The result of the innovation highlighted through the execution of the Phoenix Beverages Group (PBG) sustainable development plan, the new Phoenix statue was born after more than three years of work...</h6>
                                <div class="learnMoreDash text-center mx-auto w-50" >
                                    <a class="" href="{{route('news.details',28)}}">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}

                <!-- News Item 4 -->
                {{-- <div class="col-12 col-lg-3" data-aos="zoom-in-up" data-aos-duration="1000" data-aos-easing="linear">
                    <div class="news-container">
                        <div class="news-image bg-image pbg-radius" style="background-image: url({{ asset('images/news-three.png') }})">
                            <div class="news-date">26 August, 2024</div>
                            <div class="news-tag">Business</div>
                            <div class="news-title">
                                <h4>Phoenix Beverages Group Expands its Footprint Over. </h4>
                            </div>
                            <div class="latestNewsDetails">
                                <h4 class="">As part of its commitment to reduce its carbon footprint.</h4>
                                <div class="latestReadMore text-center mx-auto w-50">
                                    <a class="" href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
     --}}
                <div class="news-see-more col-12">
                    <div class="learnMore" >
                        <a class="text-primary" href="{{route('news-room')}}">Explore</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- <section id="slider" class="slider-element slider-parallax revslider-wrap overflow-hidden">

    <!--
    #################################
        - THEMEPUNCH BANNER -
    #################################
    -->
    <div id="rev_slider_ishop_wrapper" class="rev_slider_wrapper fullwidth-container" data-alias="default-slider" style="padding:0px;">
            <!-- START REVOLUTION SLIDER 5.1.4 fullwidth mode -->
        <div id="rev_slider_ishop" class="rev_slider fullwidthbanner" style="display:none;" data-version="5.1.4">
            <ul>    <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="1" data-masterspeed="1500" data-delay="5000" data-saveperformance="off" data-title="Latest Collections" style="background-color: #F6F6F6;">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption ltl tp-resizeme revo-slider-caps-text text-uppercase"
                    data-x="100"
                    data-y="50"
                    data-transform_in="x:-200;y:0;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="400"
                    data-start="1000"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn"><img src="images/slider/rev/shop/girl1.jpg" alt="Girl"></div>

                    <div class="tp-caption ltl tp-resizeme revo-slider-caps-text text-uppercase"
                    data-x="570"
                    data-y="75"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1000"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn" style=" color: #333;">Get your Shopping Bags Ready</div>

                    <div class="tp-caption ltl tp-resizeme revo-slider-emphasis-text p-0 border-0"
                    data-x="570"
                    data-y="105"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1200"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn" style=" color: #333; max-width: 430px; line-height: 1.15;">Latest Fashion<br>Collections</div>

                    <div class="tp-caption ltl tp-resizeme revo-slider-desc-text text-start"
                    data-x="570"
                    data-y="275"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1400"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn" style=" color: #333; max-width: 550px; white-space: normal;">We have created a Design that looks Awesome, performs Brilliantly &amp; senses Orientations.</div>

                    <div class="tp-caption ltl tp-resizeme"
                    data-x="570"
                    data-y="375"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1550"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn"><a href="#" class="button button-border button-large button-rounded text-end m-0"><span>Start Shopping</span> <i class="uil uil-angle-right-b"></i></a></div>

                </li>
                <!-- SLIDE  -->
                <li data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-delay="5000"  data-saveperformance="off"  data-title="Messenger bags" style="background-color: #E9E8E3;">
                    <!-- LAYERS -->

                    <div class="tp-caption ltl tp-resizeme revo-slider-caps-text text-uppercase"
                    data-x="630"
                    data-y="78"
                    data-transform_in="x:250;y:0;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;s:400;e:Power4.easeOutQuad;"
                    data-speed="400"
                    data-start="1000"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn"><img src="images/slider/rev/shop/bag.png" alt="Bag"></div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption ltl tp-resizeme revo-slider-caps-text text-uppercase"
                    data-x="0"
                    data-y="110"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1000"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn" style=" color: #333;">Buy Stylish Bags at Discounted Prices</div>

                    <div class="tp-caption ltl tp-resizeme revo-slider-emphasis-text p-0 border-0"
                    data-x="0"
                    data-y="140"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1200"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn" style=" color: #333; line-height: 1.15;">Messenger Bags</div>

                    <div class="tp-caption ltl tp-resizeme revo-slider-desc-text text-start"
                    data-x="0"
                    data-y="240"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1400"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn" style=" color: #333; max-width: 550px; white-space: normal;">Grantees insurmountable challenges invest protect, growth improving quality social entrepreneurship.</div>

                    <div class="tp-caption ltl tp-resizeme"
                    data-x="0"
                    data-y="340"
                    data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="700"
                    data-start="1550"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn"><a href="#" class="button button-border button-large button-rounded text-end m-0"><span>Start Shopping</span> <i class="uil uil-angle-right-b"></i></a></div>

                    <div class="tp-caption utb tp-resizeme revo-slider-caps-text text-uppercase"
                    data-x="510"
                    data-y="0"
                    data-transform_in="x:0;y:-236;z:0;rotationZ:0;skewX:0;skewY:0;opacity:0;s:700;e:Power4.easeOutQuad;"
                    data-speed="600"
                    data-start="2100"
                    data-easing="easeOutQuad"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.1"
                    data-endspeed="1000"
                    data-endeasing="Power4.easeIn"><img src="images/slider/rev/shop/tag.png" alt="Bag"></div>

                </li>
            </ul>
        </div>
    </div><!-- END REVOLUTION SLIDER -->

</section>

<!-- Content
============================================= -->
<section id="content">
    <div class="content-wrap">
        <div class="container">

            <div class="row align-items-stretch g-4 min-vh-60">
                <div class="col-md-8">

                    <div class="row align-items-stretch g-4 h-100">
                        <div class="col-md-6 min-vh-25 min-vh-md-0">
                            <a href="#" class="grid-inner d-block h-100">
                                <img src="images/shop/banners/2.jpg" alt="Image" class="w-100 h-100 object-cover rounded">
                            </a>
                        </div>

                        <div class="col-md-6 min-vh-25 min-vh-md-0">
                            <a href="#" class="grid-inner d-block h-100">
                                <img src="images/shop/banners/8.jpg" alt="Image" class="w-100 h-100 object-cover rounded">
                            </a>
                        </div>

                        <div class="col-md-12 min-vh-25 min-vh-md-0 pb-md-0">
                            <a href="#" class="grid-inner d-block h-100">
                                <img src="images/shop/banners/4.jpg" alt="Image" class="w-100 h-100 object-cover rounded">
                            </a>
                        </div>
                    </div>

                </div>

                <div class="col-md-4 min-vh-50">
                    <a href="#" class="grid-inner d-block h-100">
                        <img src="images/shop/banners/9.jpg" alt="Image" class="w-100 h-100 object-cover rounded">
                    </a>
                </div>
            </div>

            <div class="clear"></div>

            <div class="tabs mt-6">
                <ul class="nav canvas-tabs tabs nav-tabs justify-content-center mb-4" id="tab-3" role="tablist" style="--bs-nav-link-font-weight: 600;">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="canvas-home-tab" data-bs-toggle="pill" data-bs-target="#home2" type="button"
                            role="tab" aria-controls="canvas-home" aria-selected="true">New Arrivals</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="canvas-profile-tab" data-bs-toggle="pill" data-bs-target="#profile2" type="button"
                            role="tab" aria-controls="canvas-profile" aria-selected="false">Best sellers</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="canvas-contact-tab" data-bs-toggle="pill" data-bs-target="#contact2" type="button"
                            role="tab" aria-controls="canvas-contact" aria-selected="false">You may like</button>
                    </li>
                </ul>

                <div id="canvas-TabContent2" class="tab-content">
                    <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="canvas-home-tab" tabindex="0">

                        <div class="shop row gutter-30">

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/dress/1.jpg" alt="Checked Short Dress"></a>
                                        <a href="#"><img src="images/shop/dress/1-1.jpg" alt="Checked Short Dress"></a>
                                        <div class="sale-flash badge bg-success p-2">50% Off*</div>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Checked Short Dress</a></h3></div>
                                        <div class="product-price"><del>$24.99</del> <ins>$12.49</ins></div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-half"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/pants/1-1.jpg" alt="Slim Fit Chinos"></a>
                                        <a href="#"><img src="images/shop/pants/1.jpg" alt="Slim Fit Chinos"></a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Slim Fit Chinos</a></h3></div>
                                        <div class="product-price">$39.99</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-half"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <div class="fslider" data-arrows="false">
                                            <div class="flexslider">
                                                <div class="slider-wrap">
                                                    <div class="slide"><a href="#"><img src="images/shop/shoes/1.jpg" alt="Dark Brown Boots"></a></div>
                                                    <div class="slide"><a href="#"><img src="images/shop/shoes/1-1.jpg" alt="Dark Brown Boots"></a></div>
                                                    <div class="slide"><a href="#"><img src="images/shop/shoes/1-2.jpg" alt="Dark Brown Boots"></a></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Dark Brown Boots</a></h3></div>
                                        <div class="product-price">$49</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/dress/2.jpg" alt="Light Blue Denim Dress"></a>
                                        <a href="#"><img src="images/shop/dress/2-2.jpg" alt="Light Blue Denim Dress"></a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Light Blue Denim Dress</a></h3></div>
                                        <div class="product-price">$19.95</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="canvas-profile-tab" tabindex="0">

                        <div class="shop row gutter-30">

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/sunglasses/1.jpg" alt="Unisex Sunglasses"></a>
                                        <a href="#"><img src="images/shop/sunglasses/1-1.jpg" alt="Unisex Sunglasses"></a>
                                        <div class="sale-flash badge bg-danger p-2">Sale!</div>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Unisex Sunglasses</a></h3></div>
                                        <div class="product-price"><del>$19.99</del> <ins>$11.99</ins></div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/tshirts/1.jpg" alt="Blue Round-Neck Tshirt"></a>
                                        <a href="#"><img src="images/shop/tshirts/1-1.jpg" alt="Blue Round-Neck Tshirt"></a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Blue Round-Neck Tshirt</a></h3></div>
                                        <div class="product-price">$9.99</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-half"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/watches/1.jpg" alt="Silver Chrome Watch"></a>
                                        <a href="#"><img src="images/shop/watches/1-1.jpg" alt="Silver Chrome Watch"></a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Silver Chrome Watch</a></h3></div>
                                        <div class="product-price">$129.99</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-half"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/shoes/2.jpg" alt="Men Grey Casual Shoes"></a>
                                        <a href="#"><img src="images/shop/shoes/2-1.jpg" alt="Men Grey Casual Shoes"></a>
                                        <div class="sale-flash badge bg-danger p-2">Sale!</div>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Men Grey Casual Shoes</a></h3></div>
                                        <div class="product-price"><del>$45.99</del> <ins>$39.49</ins></div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-half"></i>
                                            <i class="bi-star"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="canvas-contact-tab" tabindex="0">

                        <div class="shop row gutter-30">

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <div class="fslider" data-arrows="false">
                                            <div class="flexslider">
                                                <div class="slider-wrap">
                                                    <div class="slide"><a href="#"><img src="images/shop/dress/3.jpg" alt="Pink Printed Dress"></a></div>
                                                    <div class="slide"><a href="#"><img src="images/shop/dress/3-1.jpg" alt="Pink Printed Dress"></a></div>
                                                    <div class="slide"><a href="#"><img src="images/shop/dress/3-2.jpg" alt="Pink Printed Dress"></a></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Pink Printed Dress</a></h3></div>
                                        <div class="product-price">$39.49</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/pants/5.jpg" alt="Green Trousers"></a>
                                        <a href="#"><img src="images/shop/pants/5-1.jpg" alt="Green Trousers"></a>
                                        <div class="sale-flash badge bg-danger p-2">Sale!</div>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Green Trousers</a></h3></div>
                                        <div class="product-price"><del>$24.99</del> <ins>$21.99</ins></div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-half"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/sunglasses/2.jpg" alt="Men Aviator Sunglasses"></a>
                                        <a href="#"><img src="images/shop/sunglasses/2-1.jpg" alt="Men Aviator Sunglasses"></a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Men Aviator Sunglasses</a></h3></div>
                                        <div class="product-price">$13.49</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="product col-lg-3 col-md-4 col-sm-6 col-12">
                                <div class="grid-inner">
                                    <div class="product-image">
                                        <a href="#"><img src="images/shop/tshirts/4.jpg" alt="Black Polo Tshirt"></a>
                                        <a href="#"><img src="images/shop/tshirts/4-1.jpg" alt="Black Polo Tshirt"></a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                                <a href="#" class="btn btn-dark me-2" title="Add to Cart"><i class="bi-bag-plus"></i></a>
                                                <a href="include/ajax/shop-item.html" class="btn btn-dark" data-lightbox="ajax" title="Quick View"><i class="bi-eye"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg bg-transparent"></div>
                                        </div>
                                    </div>
                                    <div class="product-desc">
                                        <div class="product-title"><h3><a href="#">Black Polo Tshirt</a></h3></div>
                                        <div class="product-price">$11.49</div>
                                        <div class="product-rating">
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                            <i class="bi-star-fill"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="clear mb-4"></div>

            <div class="row justify-content-center col-mb-50 mb-0">
                <div class="col-sm-6 col-lg-4">
                    <div class="fancy-title title-border">
                        <h4>About Us</h4>
                    </div>
                    <p>Jane Jacobs educate, leverage affiliate Martin Luther King Jr. agriculture conflict resolution dignity. Cooperation international progress non-partisan lasting change meaningful.</p>
                </div>

                <div class="col-sm-6 col-lg-4 subscribe-widget">
                    <div class="fancy-title title-border">
                        <h4>Subscribe for Offers</h4>
                    </div>
                    <p>Subscribe to Our Newsletter to get Important News, Amazing Offers &amp; Inside Scoops:</p>
                    <div class="widget-subscribe-form-result"></div>
                    <form id="widget-subscribe-form2" action="include/subscribe.php" method="post" class="mb-0">
                        <div class="input-group mx-auto">
                            <div class="input-group-text"><i class="bi-envelope-plus"></i></div>
                            <input type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email">
                            <button class="btn btn-secondary" type="submit">Subscribe</button>
                        </div>
                    </form>
                </div>

                <div class="col-sm-6 col-lg-4">
                    <div class="fancy-title title-border">
                        <h4>Connect with Us</h4>
                    </div>

                    <div class="d-flex flex-wrap" style="--cnvs-socialicon-gap-y:5px;">
                        <a href="#" class="social-icon h-bg-facebook" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook">
                            <i class="fa-brands fa-facebook-f"></i>
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-delicious" data-bs-toggle="tooltip" data-bs-placement="top" title="Delicious">
                            <i class="fa-brands fa-delicious"></i>
                            <i class="fa-brands fa-delicious"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-paypal" data-bs-toggle="tooltip" data-bs-placement="top" title="PayPal">
                            <i class="fa-brands fa-paypal"></i>
                            <i class="fa-brands fa-paypal"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-waze" data-bs-toggle="tooltip" data-bs-placement="top" title="Flattr">
                            <i class="fa-brands fa-waze"></i>
                            <i class="fa-brands fa-waze"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-android" data-bs-toggle="tooltip" data-bs-placement="top" title="Android">
                            <i class="fa-brands fa-android"></i>
                            <i class="fa-brands fa-android"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-discord" data-bs-toggle="tooltip" data-bs-placement="top" title="Smashing Magazine">
                            <i class="fa-brands fa-discord"></i>
                            <i class="fa-brands fa-discord"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-google" data-bs-toggle="tooltip" data-bs-placement="top" title="Google+">
                            <i class="fa-brands fa-google"></i>
                            <i class="fa-brands fa-google"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-wikipedia" data-bs-toggle="tooltip" data-bs-placement="top" title="Wikipedia">
                            <i class="fa-brands fa-wikipedia-w"></i>
                            <i class="fa-brands fa-wikipedia-w"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-stumbleupon" data-bs-toggle="tooltip" data-bs-placement="top" title="StumbleUpon">
                            <i class="fa-brands fa-stumbleupon"></i>
                            <i class="fa-brands fa-stumbleupon"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-foursquare" data-bs-toggle="tooltip" data-bs-placement="top" title="FourSquare">
                            <i class="fa-brands fa-foursquare"></i>
                            <i class="fa-brands fa-foursquare"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-call" data-bs-toggle="tooltip" data-bs-placement="top" title="Call">
                            <i class="fa-solid fa-phone"></i>
                            <i class="fa-solid fa-phone"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-twitch" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitch">
                            <i class="fa-brands fa-twitch"></i>
                            <i class="fa-brands fa-twitch"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-forrst" data-bs-toggle="tooltip" data-bs-placement="top" title="Forrst">
                            <i class="fa-solid fa-tree"></i>
                            <i class="fa-solid fa-tree"></i>
                        </a>

                        <a href="#" class="social-icon h-bg-digg" data-bs-toggle="tooltip" data-bs-placement="top" title="Digg">
                            <i class="fa-brands fa-digg"></i>
                            <i class="fa-brands fa-digg"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="clear"></div>

            <div class="fancy-title title-border title-center mt-4">
                <h4>Popular Brands</h4>
            </div>

            <ul class="clients-grid row row-cols-2 row-cols-sm-3 row-cols-md-6 mb-0">
                <li class="grid-item"><a href="#"><img src="images/clients/logo/1.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/2.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/3.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/4.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/5.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/6.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/7.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/8.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/9.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/10.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/11.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/12.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/13.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/14.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/15.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/16.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/19.png" alt="Clients"></a></li>
                <li class="grid-item"><a href="#"><img src="images/clients/logo/18.png" alt="Clients"></a></li>
            </ul>

        </div>

        <div class="section mb-0">
            <div class="container">

                <div class="row col-mb-50">
                    <div class="col-sm-6 col-lg-3">
                        <div class="feature-box fbox-plain fbox-dark fbox-sm">
                            <div class="fbox-icon">
                                <i class="bi-hand-thumbs-up"></i>
                            </div>
                            <div class="fbox-content">
                                <h3>100% Original</h3>
                                <p class="mt-0">We guarantee you the sale of Original Brands.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="feature-box fbox-plain fbox-dark fbox-sm">
                            <div class="fbox-icon">
                                <i class="bi-credit-card"></i>
                            </div>
                            <div class="fbox-content">
                                <h3>Payment Options</h3>
                                <p class="mt-0">We accept Visa, MasterCard and American Express.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="feature-box fbox-plain fbox-dark fbox-sm">
                            <div class="fbox-icon">
                                <i class="bi-truck"></i>
                            </div>
                            <div class="fbox-content">
                                <h3>Free Shipping</h3>
                                <p class="mt-0">Free Delivery to 100+ Locations on orders above $40.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="feature-box fbox-plain fbox-dark fbox-sm">
                            <div class="fbox-icon">
                                <i class="bi-arrow-counterclockwise"></i>
                            </div>
                            <div class="fbox-content">
                                <h3>30-Days Returns</h3>
                                <p class="mt-0">Return or exchange items purchased within 30 days.</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="section border-top-0 border-bottom-0 mb-0 p-0 bg-transparent footer-stick">
            <div class="container">

                <div class="row col-mb-50">
                    <div class="col-md-6 d-none d-md-flex align-self-end">
                        <img src="images/services/4.jpg" alt="Image" class="mb-0">
                    </div>

                    <div class="col-md-6 mb-5 subscribe-widget">
                        <div class="heading-block">
                            <h3><strong>GET 20% OFF*</strong></h3>
                            <span>Our App scales beautifully to different Devices.</span>
                        </div>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet cumque, perferendis accusamus porro illo exercitationem molestias.</p>

                        <div class="widget-subscribe-form-result"></div>
                        <form id="widget-subscribe-form3" action="include/subscribe.php" method="post" class="mb-0">
                            <div class="input-group" style="max-width:400px;">
                                <div class="input-group-text"><i class="bi-envelope-plus"></i></div>
                                <input type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email">
                                <button class="btn btn-danger" type="submit">Subscribe Now</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section><!-- #content end --> --}}


{{--
<div class="hero-content">
    <div class="left-hero-content hero-text">
        <h4>Thirst For The Best.</h4>
        <p>Phoenix Beverages Group (PBG) is known for producing innovative beverages to enhance meaningful moments
            to its consumers. At PBG, we strive to offer a wide selection of alcoholic and non-alcoholic products,
            including beers, wines and spirits, soft drinks, table water and other beverages to our customers.</p>

        <p>All our products are made from high quality natural ingredients and are distributed all over Mauritius
            and internationally.</p>
        <div class="cta">
            <button class="button pbg-button pbg-shadow">Explore</button>
        </div>
    </div>
    <div class="right-hero-content">
        <div class="slider">
            <div class="dashSlides">
                <div class="dashSlide active animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/pbg-phoenix-beer-thirst-for-best-logo-changed.png') }}" class="bg-image"  alt="hero-slider">
                </div>
                <div class="dashSlide  animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/pbg-foster-brand-slider.png') }}" class="bg-image" alt="pbg-foster-brand-slider">
                </div>
                <div class="dashSlide  animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/pbg-innovation-slider.png') }}" class="bg-image" alt="pbg-innovation-slider">
                </div>
                <div class="dashSlide  animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/pbg-manawa-beer-slider.png') }}" class="bg-image" alt="pbg-manawa-beer-slider">
                </div>
                <div class="dashSlide  animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/pbg-our-reach-map-slider.png') }}" class="bg-image" alt="pbg-our-reach-map-slider">
                </div>
                <div class="dashSlide  animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/pbg-phoenix-earth-sdg-slider.png') }}" class="bg-image" alt="pbg-phoenix-earth-sdg-slider">
                </div>
                <div class="dashSlide  animate__animated animate__fadeIn animate__slower	3s">
                    <img src="{{ asset('images/homepage/virtual-tour-brewery-01.png') }}"  class="bg-image" alt="virtual-tour-brewery-01">
                </div>
            </div>
            <button class="dashPrev">&#10094;</button>
            <button class="dashNext">&#10095;</button>
            <div class="indicators">
                <span class="indicator active" onclick="currentSlide(0)"></span>
                <span class="indicator" onclick="currentSlide(1)"></span>
                <span class="indicator" onclick="currentSlide(2)"></span>
                <span class="indicator" onclick="currentSlide(3)"></span>
                <span class="indicator" onclick="currentSlide(4)"></span>
                <span class="indicator" onclick="currentSlide(5)"></span>
                <span class="indicator" onclick="currentSlide(6)"></span>
            </div>
        </div>

    </div>

</div>
</div> --}}


@stop