@extends('layouts.app')
@section('content')

<div id="page">
    <div id="header" class="header col-12">
        <div id="navigation" class="row align-items-center py-lg-4 py-2 justify-content-lg-around">
            <div class="col-2 d-block d-lg-none text-center">
                <a id="burger_icon" type="button"><i class="fas fa-bars fs-3"></i></a>
            </div>
            <div id="navigation_logo" class="col-lg-2 col-8 text-center">
                <picture class=" d-flex justify-content-center">
                    <source srcset="{{ asset('images/01Navigation/Xepa_Logo.webp') }}" type="image/webp">
                    <img id="img_navigation" src="{{ asset('images/01Navigation/Xepa_Logo.png') }}" class="mw-100" alt="Xepa sp" />
                </picture>
            </div>
            <!-- Desktop Menu -->
            <div class="col-lg-9 col-10 d-none d-lg-block">
                <div id="navigation_text" class="d-flex justify-content-around align-items-center">
                    <a href="#advance" class="futura-font text-decoration-none text-black">About Tymodex</a>
                    <a href="#ingredients" class="futura-font text-decoration-none text-black">Key Ingredients</a>
                    <a href="#flavours" class="futura-font text-decoration-none text-black">Flavours</a>
                    <a href="#review" class="futura-font text-decoration-none text-black {{ $hide_review_section }}">Product Review</a> <!-- TEMP HIDE -->
                    <a href="#shop" class="futura-font text-decoration-none text-black">Where To Buy</a>
                    <a href="#spray">
                        <picture class="d-flex align-items-center justify-content-start">
                            <source srcset="{{ asset('images/New_Button.webp') }}" type="image/webp">
                            <img id="new_icon_header" class="mw-100" src="{{ asset('images/New_Button.png') }}" alt="New Throat Spray Button"/>
                        </picture>
                    </a>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div class="offcanvas offcanvas-start px-2" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
                <div class="offcanvas-header">
                    <picture class="d-flex">
                        <source srcset="{{ asset('images/01Navigation/Xepa_Logo.webp') }}" type="image/webp">
                        <img src="{{  asset('images/01Navigation/Xepa_Logo.png')}}" class="col-md-12 col-8" alt="Xepa sp">
                    </picture>                
                    <a type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></a>
                </div>
                <div class="offcanvas-body">
                    <a href="#advance"class="futura-font text-decoration-none nav-link mb-2">About Tymodex</a>
                    <a href="#ingredients" class="futura-font text-decoration-none nav-link mb-2">Key Ingredients</a>
                    <a href="#flavours" class="futura-font text-decoration-none nav-link mb-2">Flavours</a>
                    <a href="#review" class="futura-font text-decoration-none nav-link mb-2 {{ $hide_review_section }}">Product Review</a> <!-- TEMP HIDE -->
                    <a href="#shop" class="futura-font text-decoration-none nav-link mb-2">Where To Buy</a>
                    <picture class="text-start">
                        <source srcset="{{ asset('images/New_Button.webp') }}" type="image/webp">
                        <img id="new_icon_header" class="mw-100" src="{{ asset('images/New_Button.png') }}" alt="New Product Icon"/>
                    </picture>
                </div>  
            </div>
        </div>
    </div>

    <div id="floating_button" class="{{ $hide_spray_section }}"> <!-- TEMP HIDE -->
        <a href="#spray">
            <picture>
                <source srcset="{{ asset('images/FloatingButton_v2.webp') }}" type="image/webp">
                <img id="img_floating_button" class="w-100" src="{{ asset('images/FloatingButton_v2.png') }}" alt="Tymodex Throat Spray"/>
            </picture>
        </a>
    </div>

    <div id="up_button" class="hidden">
        <a href="#navigation" class="up-button d-flex justify-content-center mx-auto">
            <div class="button-background">
                <div id="button_icon" class="p-2"><i class="fas fa-arrow-up"></i></div>
            </div>
        </a>
    </div>

    <div id="banner" class="bg-cover-center container-fluid py-4">
        <div id="banner_relative" class="row">
            <div id="banner_logo" class="col-lg-5 col-12 pt-lg-5" data-aos="fade-right" data-aos-delay="500" data-aos-duration="1000" data-aos-once="true">
                <div class="d-block text-center">
                    <picture>
                        <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/02Banner/Banner_Logo.png') }}">
                        <source srcset="{{ asset('images/02Banner/Banner_LogoTymodex.webp') }}" type="image/webp">
                        <img id="img_banner_logo" class="w-100" src="{{ asset('images/02Banner/Banner_LogoTymodex.png') }}" alt="TYMODEX MOUTHWASH">
                    </picture>
                </div>
                <div id="banner_text" class="text-center futura-font py-2">
                    For a Healthier Oral Hygiene, <br> 
                    <b class="futura-heavy d-flex justify-content-center big-text-15 text-light-blue">EVERYDAY.</b>
                </div>
            </div>
            <div id="banner_product" class="col-lg-7 col-12 text-start" data-aos="fade-left" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                <picture>
                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/02Banner/Banner_Product_v4.png') }}">
                    <source srcset="{{ asset('images/02Banner/Banner_Product_v7.webp') }}" type="image/webp">
                    <img id="img_banner_product" class="mw-100 w-100" src="{{ asset('images/02Banner/Banner_Product_v7.png') }}" alt="Tymodex Cool Breeze and Tymodex Mint Tea Mouthwash">
                </picture>
            </div>
            <picture id="sda_logo_container" data-aos="fade-left" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                <source srcset="{{ asset('images/SDA_Logo.webp') }}" type="image/webp">
                <img id="sda_logo" class="mw-100" src="{{ asset('images/SDA_Logo.png') }}" alt="SDA Logo">
            </picture>          
        </div>
    </div>

    <div id="advance" class="bg-cover-center container-fluid" style="padding: 2vw; margin-top:-2px">
        <div id="advance_container" class="row">
            <div id="advance_text" class="col-12 futura-font text-center my-xl-5 my-4">
                Stay confident and enjoy fresh breath throughout the day with <span class="futura-heavy text-blue">Tymodex Mouthwash.</span><br>
                It reduces oral bacteria, providing fresh breath for up to 24 hours.
                <br><br>
                Its benefits extend beyond that with our <span class="futura-heavy text-blue"><a href="#complex_five">Complex 5 Protection formula.</a></span>
            </div>
            <div id="advance_title" class="col-12 text-center" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="1500" data-aos-once="true">
                <picture>
                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/03Advanced/Advance_Title.png') }}">
                    <source srcset="{{ asset('images/03Advanced/Advance_Title.webp') }}" type="image/webp">
                    <img id="img_advance_title" src="{{ asset('images/03Advanced/Advance_Title.png') }}" alt="Advance Oral Care for Healthier Teeth & Brighter Smile">
                </picture>
            </div>
            <div id="advance_element" class="col-12 text-center py-xl-2 lazyload" data-aos="fade-zoom-in"data-aos="fade-up" data-aos-delay="500" data-aos-duration="500" loading="lazy" data-aos-once="true">
                <picture>
                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/03Advanced/Advance_Elements2.png') }}">
                    <source srcset="{{ asset('images/03Advanced/Advance_Elements.webp') }}" type="image/webp">
                    <img id="img_advance_elements" src="{{ asset('images/03Advanced/Advance_Elements.png') }}" alt="Reduce 99.9% of Bacteria, Contains Natural Mint & Green Tea Flavors, 24-Hour Protection" >
                </picture>
            </div>
        </div>
    </div>

    <div id="complex" class="bg-cover-center container-fluid" style="margin-top:-1px">  
        <div class="row text-center p-0">
            <div id="complex_five" class="col-12 text-center py-5">
                <div class="d-lg-none text-center py-lg-3 pb-md-5 pb-4">
                    <picture>
                        <source srcset="{{ asset('images/Mobile/04Complex/Complex_Logo.webp') }}" type="image/webp">
                        <img id="img_complex_logo" src="{{ asset('images/Mobile/04Complex/Complex_Logo.png')}}" alt="Complex 5 Protection">
                    </picture>
                </div>
                <picture>
                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/04Complex/Complex_Icons2.png') }}">
                    <source srcset="{{ asset('images/04Complex/Complex_Element.webp') }}" type="image/webp">
                    <img id="img_complex_elements" src="{{ asset('images/04Complex/Complex_Element.png') }}" alt="Complex 5 Protection">
                </picture>
            </div>

            <div id="complex_text" class="col-12 futura-font text-center py-lg-5 py-3" data-aos="fade-up" data-aos-delay="500" data-aos-duration="500" data-aos-once="true">
                Why You'll Love <span class="futura-heavy text-blue">Tymodex</span>
            </div>

            <div class="col-12">
                <div id="complex_container" class="row justify-content-between ">
                    <div class="col-lg-3 col-6">
                        <picture>
                            <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/04Complex/Icon1.png') }}">
                            <source srcset="{{ asset('images/04Complex/Complex_Icon1.webp') }}" type="image/webp">
                            <img src="{{ asset('images/04Complex/Complex_Icon1.png') }}" alt="Ergonomic Bottle Design - Easy to hold and use." class="img-complex-icons" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="1500" data-aos-once="true">
                        </picture>
                        <p class="futura-heavy complex_head">Ergonomic Bottle <br>Design</p>
                        <p class="futura-font complex_body">Easy to hold <br> and use.</p>
                    </div>
                    <div class="col-lg-3 col-6">
                        <picture>
                            <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/04Complex/Icon2.png') }}">
                            <source srcset="{{ asset('images/04Complex/Complex_Icon2.webp') }}" type="image/webp">
                            <img src="{{ asset('images/04Complex/Complex_Icon2.png') }}" alt="Travel-friendly Size - Available in 100ml, perfect for on-the-go use." class="img-complex-icons" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="1500" data-aos-once="true">
                        </picture>
                        <p class="futura-heavy complex_head">Travel-friendly <br>Size</p>
                        <p class="futura-font complex_body">Available in 100ml, <br> perfect for on-the-go use.</p>
                    </div>
                    <div class="col-lg-3 col-6 mt-3 mt-md-4 mt-lg-0">
                        <picture>
                            <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/04Complex/Icon3.png') }}">
                            <source srcset="{{ asset('images/04Complex/Complex_Icon3.webp') }}" type="image/webp">
                            <img src="{{ asset('images/04Complex/Complex_Icon3.png') }}" alt="Cost-effective Option - Available in 500ml for daily use." class="img-complex-icons" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="1500" data-aos-once="true">
                        </picture>
                        <p class="futura-heavy complex_head">Cost-effective <br> Option</p>
                        <p class="futura-font complex_body">Available in 500ml <br> for daily use.</p>
                    </div>
                    <div class="col-lg-3 col-6 mt-3 mt-md-4 mt-lg-0">
                        <picture>
                            <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/04Complex/Icon4.png') }}">
                            <source srcset="{{ asset('images/04Complex/Complex_Icon4.webp') }}" type="image/webp">
                            <img src="{{ asset('images/04Complex/Complex_Icon4.png') }}" alt="Halal Certified - Suitable for everyone." class="img-complex-icons" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="1500" data-aos-once="true">
                        </picture>
                        <p class="futura-heavy complex_head">Halal<br>Certified</p>
                        <p class="futura-font complex_body">Suitable for<br>everyone.</p>
                    </div>
                </div>
            </div>

            <div class="col-12 text-center my-3 my-lg-5">
            </div>

            <div class="col-12 p-0 m-0">
                <picture>
                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/04Complex/Complex_Separator.png') }}">
                    <source srcset="{{ asset('images/04Complex/Complex_Separator.webp') }}" type="image/webp">
                    <img id="img_complex_separator" src="{{ asset('images/04Complex/Complex_Separator.png') }}" alt="Tymodex Separator">
                </picture>
            </div>
        </div>
    </div>

    <div id="ingredients" class="bg-cover-center container-fluid">
        <div class="row">   
            <div class="col-12 text-center my-3 my-lg-5" data-aos="fade-up" data-aos-delay="500" data-aos-duration="500" data-aos-once="true">
                <p id="ingredients_text" class="text-center futura-font">
                    The Power of <span class="futura-heavy text-blue">5 Key Ingredients</span>
                </p> 
            </div> 
            <div class="col-12 d-lg-flex justify-content-center">
                <div id="ingredients_product" class="text-center col-lg-6 col-12" data-aos="fade-right" data-aos-delay="500" data-aos-duration="1000" data-aos-once="true">
                    <picture class=" d-flex justify-content-center">
                        <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/05Ingredients/Ingredients_Product2.png') }}">
                        <source srcset="{{ asset('images/05Ingredients/Ingredients_Product.webp') }}" type="image/webp">
                        <img id="img_ingredients_product" src="{{ asset('images/05Ingredients/Ingredients_Product.png') }}" alt="Tymodex Cool Breeze and Tymodex Mint Tea Mouthwash">
                    </picture>
                </div>
                <div id="ingredients_box" class="col-lg-6 col-12" data-aos="fade-left" data-aos-delay="500" data-aos-duration="1000" data-aos-once="true">
                    <div class="col-6">
                        <picture>
                            <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/05Ingredients/Ingredients_BoxLeft0.png') }}">
                            <source srcset="{{ asset('images/05Ingredients/Ingredients_BoxLeft.webp') }}" type="image/webp">
                            <img src="{{ asset('images/05Ingredients/Ingredients_BoxLeft.png') }}" alt="Cetylpyridinium Chloride (CPC) - Anti-microbial agent effective against oral bacteria." class="img_ingredients">
                        </picture>
                    </div>
                    <div class="col-6">
                        <div id="carouselExampleIngredients" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
                            <div class="carousel-item ingredients active" data-bs-interval="3000">
                                <picture class="d-flex justify-content-center">
                                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/05Ingredients/Ingredients_BoxLeft11.png') }}">
                                    <source srcset="{{ asset('images/05Ingredients/Ingredients_BoxRight11.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/05Ingredients/Ingredients_BoxRight11.png') }}" alt="Thymol - Antiseptic that fights tooth decay and infections." class="img_ingredients">
                                </picture>
                            </div>
                            <div class="carousel-item ingredients" data-bs-interval="3000">
                                <picture class="d-flex justify-content-center">
                                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/05Ingredients/Ingredients_BoxLeft22.png') }}">
                                    <source srcset="{{ asset('images/05Ingredients/Ingredients_BoxRight22.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/05Ingredients/Ingredients_BoxRight22.png') }}" alt="Menthol - Provides a minty flavour and anti-microbia benefits." class="img_ingredients">
                                </picture>
                            </div>
                            <div class="carousel-item ingredients" data-bs-interval="3000">
                                <picture class="d-flex justify-content-center">
                                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/05Ingredients/Ingredients_BoxLeft33.png') }}">   
                                    <source srcset="{{ asset('images/05Ingredients/Ingredients_BoxRight33.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/05Ingredients/Ingredients_BoxRight33.png') }}" alt="Eucalyptus Oil - Reduces inflammation and has a cooling effect." class="img_ingredients">
                                </picture>
                            </div>
                            <div class="carousel-item ingredients" data-bs-interval="3000">
                                <picture class="d-flex justify-content-center">
                                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/05Ingredients/Ingredients_BoxLeft44.png') }}">
                                    <source srcset="{{ asset('images/05Ingredients/Ingredients_BoxRight44.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/05Ingredients/Ingredients_BoxRight44.png') }}" alt="Methyl Salicylate - Antiseptic properties reduce oral infections." class="img_ingredients">
                                </picture>
                            </div>
                            <div id="ingredients_indicator" class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleIngredients" data-bs-slide-to="0" class=" active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleIngredients" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleIngredients" data-bs-slide-to="2" aria-label="Slide 3"></button>
                                <button type="button" data-bs-target="#carouselExampleIngredients" data-bs-slide-to="3" aria-label="Slide 4"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 text-center my-3 my-lg-5">
            </div>
        </div>
    </div>

    <div id="flavours" class="col-12">
        <div class="text-center" data-aos="fade-up" data-aos-delay="200" data-aos-duration="500" data-aos-once="true">       
            <div id="flavours_text" class="text-center futura-font">
                Experience the Ultimate, Freshness in <span class="futura-heavy text-blue responsive-break">2 Flavours</span>
            </div>
        </div>
        <div class="container-scroll d-flex">
            <section class="panel">
                <picture>
                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/06Flavours/Flavour_Cool_Vertical2.png') }}">
                    <source srcset="{{ asset('images/06Flavours/Flavour_Cool2.webp') }}" type="image/webp">
                    <img src="{{ asset('images/06Flavours/Flavour_Cool2.png') }}" alt="Tymodex Cool Breeze - Perk yourself up with minty freshness" class="d-flex w-100">
                </picture>
            </section>
            <section class="panel">
                <picture>
                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/06Flavours/Flavour_GreenTea_Vertical2.png') }}">
                    <source srcset="{{ asset('images/06Flavours/Flavour_GreenTea2.webp') }}" type="image/webp">
                    <img src="{{ asset('images/06Flavours/Flavour_GreenTea2.png') }}" alt="Tymodex Mint Tea - Subtle green tea flavour for a calm, refreshing breath" class="d-flex w-100">
                </picture>
            </section>
        </div> 
    </div>

    <div id="review" class="container-fluid {{ $hide_review_section }}">  <!-- TEMP HIDE -->
        <div class="row pt-lg-5 pt-md-4 pt-2"> 
            <div class="text-center col-12 my-lg-5 my-4" data-aos="fade-up" data-aos-delay="200" data-aos-duration="500" data-aos-once="true">
                <span id="review_text" class="futura-font">Our <b class="futura-heavy fw-bold text-blue">Reviews</b></span>
            </div>  
            <!-- Review Desktop --> 
            <div id="review_desktop" class="col-12 pt-4">
                <div id="carouselExampleReview" class="carousel slide h-100" data-bs-ride="carousel" style="padding-bottom:50px">
                    <div class="carousel-item active">
                        <div class="row justify-content-center">
                            <div class="col-lg-4 col-xl-3">
                                <div class="review disable-hover futura-font">
                                    <p class="mb-0">
                                        Tymodex mouthwash has transformed my oral hygiene routine. I feel fresh and confident all day long!
                                    </p>
                                    <div class="d-flex mt-auto"> 
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/10Review/D_Person1.png') }}" class="d-flex w-100 review-icon">
                                        </div>
                                        <div class="review-name futura-font">
                                            Will Hao <br> Ara Damansara
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl-3">
                                <div class="review disable-hover futura-font">
                                    <p class="mb-0">
                                        I love the mint tea flavour! It's soothing and keeps my breath fresh for hours. 
                                    </p>
                                    <div class="d-flex mt-auto"> 
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/10Review/D_Person2.png') }}" class="d-flex w-100 review-icon">
                                        </div>
                                        <div class="review-name futura-font">
                                            Nina A <br> Johor Bahru
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl-3">
                                <div class="review disable-hover futura-font">
                                    <p class="mb-0">
                                        I usually stick to my usual brand, but I decided to try Tymodex. So far, it's great and not too strong. The price is reasonable, and the travel size is super convenient to carry anywhere.
                                    </p>
                                    <div class="d-flex mt-5"> 
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/10Review/D_Person3.png') }}" class="d-flex w-100 review-icon">
                                        </div>
                                        <div class="review-name futura-font">
                                            Navin Kumar <br> Puchong
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--<div class="carousel-item">
                        <div class="row justify-content-center">
                            <div class="col-lg-4 col-xl-3">
                                <div class="review disable-hover futura-font">
                                    <p class="mb-0">
                                        Tymodex mouthwash has transformed my oral hygiene routine. I feel fresh and confident all day long!
                                    </p>
                                    <div class="d-flex mt-auto"> 
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/10Review/D_Person1.png') }}" class="d-flex w-100 review-icon">
                                        </div>
                                        <div class="review-name futura-font">
                                            Will Hao <br> Ara Damansara
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl-3">
                                <div class="review disable-hover futura-font">
                                    <p class="mb-0">
                                        I love the mint tea flavour! It's soothing and keeps my breath fresh for hours. 
                                    </p>
                                    <div class="d-flex mt-auto"> 
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/10Review/D_Person2.png') }}" class="d-flex w-100 review-icon">
                                        </div>
                                        <div class="review-name futura-font">
                                            Nina A <br> Johor Bahru
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-xl-3">
                                <div class="review disable-hover futura-font">
                                    <p class="mb-0">
                                        I usually stick to my usual brand, but I decided to try Tymodex. So far, it's great and not too strong. The price is reasonable, and the travel size is super convenient to carry anywhere.
                                    </p>
                                    <div class="d-flex mt-5"> 
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/10Review/D_Person3.png') }}" class="d-flex w-100 review-icon">
                                        </div>
                                        <div class="review-name futura-font">
                                            Navin Kumar <br> Puchong
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>--}}
                    {{--<button class="carousel-control-prev review-arrow" type="button" data-bs-target="#carouselExampleReview" data-bs-slide="prev">
                        <i class="fa-solid fa-circle-arrow-left" style="padding-right:15px"></i>
                    </button>
                    <button class="carousel-control-next review-arrow" type="button" data-bs-target="#carouselExampleReview" data-bs-slide="next">
                        <i class="fa-solid fa-circle-arrow-right" style="padding-left:15px"></i>
                    </button>
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleReviewIndicators" data-bs-slide-to="0" class=" active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleReviewIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    </div>--}}
                </div>
            </div>

            <!-- Review Mobile --> 
            <div id="review_mobile" class="col-12">
                <div id="carouselExample" class="carousel slide h-100" data-bs-ride="carousel" style="padding-bottom:50px">
                    <div class="carousel-item active">
                        <div class="review disable-hover futura-font">
                            <p class="mb-auto">           
                                Tymodex mouthwash has transformed my oral hygiene routine. I feel fresh and confident all day long!
                                <div class="d-flex mt-5"> 
                                    <div class="d-flex align-items-center">
                                        <img src="{{ asset('images/10Review/D_Person1.png') }}" class="d-flex w-100 review-icon">
                                    </div>
                                    <div class="review-name futura-font">
                                        Will Hao <br> Ara Damansara
                                    </div>
                                </div>
                            </p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="review disable-hover futura-font">
                            <p class="mb-auto">           
                                I love the mint tea flavour! It's soothing and keeps my breath fresh for hours. 
                            </p>
                            <div class="d-flex mt-5"> 
                                <div class="d-flex align-items-center">
                                    <img src="{{ asset('images/10Review/D_Person2.png') }}" class="d-flex w-100 review-icon">
                                </div>
                                <div class="review-name futura-font">
                                    Nina A <br> Johor Bahru
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="review disable-hover futura-font">
                            <p class="mb-auto">           
                                I usually stick to my usual brand, but I decided to try Tymmodex. So far, it's great and not too strong. The price is reasonable, and the travel size is super convenient to carry anywhere.
                            </p>
                            <div class="d-flex mt-5"> 
                                <div class="d-flex align-items-center">
                                    <img src="{{ asset('images/10Review/D_Person3.png') }}" class="d-flex w-100 review-icon">
                                </div>
                                <div class="review-name futura-font">
                                    Navin Kumar <br> Puchong
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev review-arrow" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                        <i class="fa-solid fa-circle-arrow-left" style="padding-right:15px"></i>
                    </button>
                    <button class="carousel-control-next review-arrow" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                        <i class="fa-solid fa-circle-arrow-right" style="padding-left:15px"></i>
                    </button>
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class=" active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    </div>
                </div>
            </div>

            <div class="col-12 text-center my-4 my-lg-5">
            </div>
        </div>
    </div>

    <div id="spray" class="bg-cover-center container-fluid {{ $hide_spray_section }}">  <!-- TEMP HIDE -->
        <div class="row pb-lg-0 pb-5">
            <div id="spray_text_mobile" class="d-lg-none col-12 mt-5">
                <picture class="d-flex justify-content-center">
                    <source srcset="{{ asset('images/Mobile/07Spray/Spray_Title.webp') }}" type="image/webp">
                    <img id="img_spray_title" src="{{ asset('images/Mobile/07Spray/Spray_Title.png') }}" alt="Tymodex Throat Spray Triple Action">
                </picture>
                <hr id="horizontal_line" class="solid">
            </div>   
            <div id="spray_product" class="col-lg-5 col-12 d-flex flex-column align-items-end" data-aos="fade-right" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                <picture id="img_spray_product_container" class="col-12">
                    <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/07Spray/Spray_Product_v2.png') }}">
                    <source srcset="{{ asset('images/07Spray/Spray_Product_v2.webp') }}" type="image/webp">
                    <img id="img_spray_product" src="{{ asset('images/07Spray/Spray_Product_v2.png') }}" alt="Tymodex Throat Spray">
                </picture>
                <div id="spray_product_text" class="col-lg-6 col-12 text-lg-start text-center futura-font">
                    <span class="futura-heavy">GB6390923-147473.</span> Registered Under Act 737 <br>
                    <span>MDAMD 0314/2024</span>
                </div>
            </div> 
            <div id="spray_text" class="col-lg-5 col-12" data-aos="fade-left" data-aos-delay="500" data-aos-duration="1000" data-aos-once="true">
                <div class="d-none d-lg-flex flex-column">
                    <picture>
                        <source srcset="{{ asset('images/07Spray/Spray_Title.webp') }}" type="image/webp">
                        <img id="img_spray_title" src="{{ asset('images/07Spray/Spray_Title.png') }}" alt="Tymodex Throat Spray Triple Action">
                    </picture>
                    <hr class="solid">
                </div>
                <div class="col-12" data-aos="zoom-in" data-aos-delay="900" data-aos-duration="1000" data-aos-once="true">
                    <span class="futura-font spray-text">Experience Thymodex Throat Spray, designed to:</span><br>
                    <ul class="futura-font spray-text-list">
                        <li><span class="futura-heavy">Soothe</span> and relieve throat discomfort</li>
                        <li>Provide long lasting <span class="futura-heavy">protection</span> against external agents that cause irritation</li>
                        <li>Keep your throat <span class="futura-heavy">moisturized</span></li>
                    </ul>
                    <div id="spray_icons" class="futura-font">
                        <div class="justify-content-between row">
                            <div class="text-center col-lg-3 col-6">
                                <picture class=" d-flex justify-content-center">
                                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/07Spray/Icon1_1.png') }}">
                                    <source srcset="{{ asset('images/07Spray/Icon1.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/07Spray/Icon1.png') }}" alt="No Added Sugar, Drug and Alcohol" class="spray_icons">
                                </picture>
                                <span>No Added Sugar, Drug and Alcohol</span>
                            </div>
                            <div class="text-center col-lg-3 col-6">
                                <picture class=" d-flex justify-content-center">
                                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/07Spray/Icon2_1.png') }}">
                                    <source srcset="{{ asset('images/07Spray/Icon2.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/07Spray/Icon2.png') }}" alt="Refreshing Mint Flavour" class="spray_icons">
                                </picture>
                                <span>Refreshing Mint Flavour</span>
                            </div>
                            <div class=" text-center col-lg-3 col-6 mt-3 mt-md-4 mt-lg-0">
                                <picture class=" d-flex justify-content-center">
                                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/07Spray/Icon3_1.png') }}">
                                    <source srcset="{{ asset('images/07Spray/Icon3.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/07Spray/Icon3.png') }}" alt="360° Oral Spray Applicator" class="spray_icons">
                                </picture>
                                <span> 360° Oral Spray Applicator</span>
                            </div>
                            <div class=" text-center col-lg-3 col-6 mt-3 mt-md-4 mt-lg-0">
                                <picture class=" d-flex justify-content-center">
                                    <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/07Spray/Icon4_1.png') }}">
                                    <source srcset="{{ asset('images/07Spray/Icon4.webp') }}" type="image/webp">
                                    <img src="{{ asset('images/07Spray/Icon4.png') }}" alt="Medical Device Made In Spain" class="spray_icons">
                                </picture>
                                <span> Medical Device Made in Spain</span>
                            </div>   
                        </div>       
                    </div>
                    <div class="futura-font spray-text mt-4">
                        <span class="futura-heavy" style="color:#F96E35">Key Ingredients:</span><br>
                        <span class="futura-heavy">Sodium Hyaluronate, Orarez<span class="spray-registered">®</span>W</span> (Mucoadhesive Film Former), <span class="futura-heavy">Calendula & Erysimum.</span>
                    </div>
                </div>
            </div>        
        </div>
    </div>

    <div id="shop" class="bg-cover-center container-fluid" style="margin-top:-1px"> 
        <div id="shop_relative" class="row">
            <picture id="sda_logo_container" data-aos="fade-left" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                <source srcset="{{ asset('images/SDA_Logo.webp') }}" type="image/webp">
                <img id="sda_logo" class="mw-100" src="{{ asset('images/SDA_Logo.png') }}" alt="SDA Logo">
            </picture> 
            <div class="col-12 pt-lg-5 pb-4">
                <div id="shop_container" class="row align-items-center justify-content-center pt-3">
                    <div id="shop_text" class="col-lg-5 col-12" data-aos="fade-right" data-aos-delay="0" data-aos-duration="1000" data-aos-once="true">
                        <div class="futura-font mb-0 text-lg-start text-center mt-lg-0 mt-5" id="shop_head_body">
                            <span id="shop_head">Get <b class="futura-heavy text-blue">Tymodex</b> Now</span><br>
                            <span id="shop_body">Find Tymodex Mouthwash at your nearest pharmacy or purchase online for your convenience.</span>
                            @if ($country_content === 'Malaysia')
                                <div class="d-flex flex-lg-row flex-column text-lg-start text-center align-items-center my-lg-0 mt-4 mb-3">
                                    <span id="shop_body">Exclusive Retail Partner:</span>
                                    <picture class="col-lg-6 col-12">
                                        <img id="shop_sunway_logo" src="{{ asset('images/Sunway_Logo.png') }}" alt="Sunway Multicre Pharmacy">
                                    </picture>
                                </div>
                            @endif       
                        </div>
                        <div id="shop_button" class="d-lg-block d-none mt-4">
                            <a href="{{ $country_content === 'Singapore' ? $purchase_link_sg : $purchase_link_my }}" target="_blank" class="purchase-button futura-heavy justify-content-center ms-lg-0 mx-auto {{ $hide_purchase_button }}"> <!-- TEMP HIDE -->
                                <div class="button-background d-flex">
                                    <span class="px-3 py-1">PURCHASE NOW</span>
                                    <div id="button_icon" class="p-lg-2 p-2"><i class="fas fa-arrow-right"></i></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div id="shop_product" class="col-lg-5 col-12" data-aos="fade-left" data-aos-delay="500" data-aos-duration="1000" data-aos-once="true">
                        <picture>
                            <source media="(max-width: 767px)" srcset="{{ asset('images/Mobile/08Shop/Shop_Product22.png') }}">
                            <source srcset="{{ asset('images/08Shop/Sale_Product.webp') }}" type="image/webp">
                            <img id="img_shop_product" class="mx-100" src="{{ asset('images/08Shop/Sale_Product.png') }}" alt="Tymodex Cool Breeze and Tymodex Mint Tea Mouthwash">
                        </picture>
                    </div>
                    <div class="col-12 text-center my-4 d-lg-none d-block">
                        <a href="{{ $country_content === 'Singapore' ? $purchase_link_sg : $purchase_link_my }}" target="_blank" class="purchase-button futura-heavy justify-content-center mx-auto {{ $hide_purchase_button }}"> <!-- TEMP HIDE -->
                            <div class="button-background d-flex justify-content-center">
                                <span class="px-3 py-1">PURCHASE NOW</span>
                                <div id="button_icon" class="p-xl-2 p-2"><i class="fas fa-arrow-right"></i></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>  
            <div id="footer" class="col-12 px-0">
                <div class="row position-relative">
                    <div class="col-12">
                        <picture>
                            <source media="(max-width: 991px)" srcset="{{ asset('images/Mobile/09Footer/Footer.png') }}">
                            <source srcset="{{ asset('images/09Footer/Footer3.webp') }}" type="image/webp">
                            <img src="{{ asset('images/09Footer/Footer3.png') }}" class="img-fluid w-100">
                        </picture>
                    </div>
                </div>
            </div>
            <div id="footer_end" class="col-12 d-flex">
                <div class="col-12 text-center futura-font">
                @if ($country_content === 'Singapore')
                    © 2024 Copyright: Tymodex | Xepa-Soul Pattinson (S) Pte Ltd (199904303W)
                @else
                    © 2024 Copyright: Tymodex | Xepa-Soul Pattinson (Malaysia) Sdn Bhd <br class="d-lg-none d-block">196901000419 (8504-M)
                @endif   
                </div>
            </div>  
        </div>
    </div>
</div>
@endsection