@extends('frontend.maintemplate.maintemplate')

@section('content')
    <style>
        #calendly-container {
            height: 100%;
            width: 100%;
        }

        /* Adjust modal height and width */
        .modal-xl {
            max-width: 55%;
            /* Adjust the width as needed */
        }

        .modal-dialog-centered {
            height: 90vh;
            /* Set modal height to 90% of the viewport height */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .modal-content {
            height: 100%;
            /* Ensure content spans the full height of the modal */
        }

        .modal-body {
            height: calc(100% - 56px);
            /* Subtract header height */
            overflow-y: auto;
            /* Enable scrolling if content overflows */
        }

        /* Optional: Adjust height for smaller screens */
        @media (max-width: 768px) {
            .modal-xl {
                max-width: 100%;
                /* Full width on smaller screens */
            }

            .modal-dialog-centered {
                height: 95vh;
                /* Slightly more height for mobile */
            }
        }



        .custom a {
            max-width: 301px !important;
            color: #ffff !important;
            background-color: #3C705E !important;
        }

        .custom a:hover {
            background-color: transparent !important;
            color: #3C705E !important;
        }


        .responsive-image img {
            display: none;
            /* Hide all images by default */
            width: 100%;
            height: auto;
        }

        .ageless-job-marketing-section .ageless-job-marketing-inner .left-content-section .new-text-animation::first-letter {
            text-transform: uppercase;
        }
        .ageless-job-marketing-section .ageless-job-marketing-inner .left-content-section .new-text-animation {
            text-transform: lowercase !important;
        }

        .cd-words-wrapper b {
            text-transform: uppercase !important;
        }

        .learn-from-the-leaders-section .learn-from-the-leaders-image-wrapper h4 {
            color: #3C705E;
        }

        /* Show Desktop Image */
        @media (min-width: 768px) {
            .responsive-image .desktop {
                display: block;
            }
        }

        /* Show Mobile Image */
        @media (max-width: 767px) {
            .responsive-image .mobile {
                display: block;
            }
        }
        /* ================= Home Slider ================= */

        .home-hero-slider-section .carousel-item {
            position: relative;
        }

        .home-hero-slider-section .carousel-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 65%;
            height: 100%;
            background: linear-gradient(
                90deg,
                rgba(43, 114, 90, 0.95) 0%,
                rgba(108, 165, 144, 0.75) 45%,
                rgba(191, 230, 212, 0) 100%
            );
            z-index: 1;
            pointer-events: none;
        }

        .home-hero-slider-section .carousel-item img {
            position: relative;
            z-index: 0;
        }

        .home-hero-slider-section .carousel-item .carousel-caption {
            position: absolute;
            left: 6%;
            right: auto;
            top: 50%;
            transform: translateY(-50%);
            text-align: left;
            z-index: 2;
            max-width: 650px;
        }

        .home-hero-slider-section .carousel-item .carousel-caption h2 {
            font-size: 80px !important;
            line-height: 100px !important;
        }

        .home-hero-slider-section .carousel-item .carousel-caption p {
            line-height: 50px !important;
        }

        .home-hero-slider-section .carousel-item .carousel-caption .link-wrapper a {
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: center !important;
        }

        @media (max-width: 1750px) {
            body .home-hero-slider-section .carousel-item .carousel-caption h2 {
                font-size: 60px !important;
                line-height: 70px !important;
            }

            body .home-hero-slider-section .carousel-item .carousel-caption p {
                line-height: 37px !important;
            }
        }

        @media (max-width: 991px) {
            .home-hero-slider-section .carousel-item::before {
                width: 100% !important;
            }

            .home-hero-slider-section .carousel-item .carousel-caption {
                max-width: 100% !important;
                right: 3%;
                left: 3%;
                padding-bottom: 0;
            }

            body .home-hero-slider-section .carousel-item .carousel-caption h2 {
                font-size: 30px !important;
                line-height: 34px !important;
            }

            body .home-hero-slider-section .carousel-item .carousel-caption p {
                font-size: 20px !important;
                line-height: 26px !important;
            }
        }

        /* =================End Home Slider ================= */

        .meet-our-career-section .meet-our-career-inner .top-content-image-section .right-image-section .image-wrapper img {
            height: 650px !important;
            object-fit: cover !important;
            border-radius: 32px !important;
        }
        .testimonials-slider .item .item-inner .scroll-play-video .video-container {
            display: block !important;
            padding: 10px !important;
            width: 100% !important;
            height: 100% !important;
        }
        .testimonial-section .testimonial-container .testimonials-slider-wrapper .testimonials-slider .item .item-inner {
            height: unset !important;
        }
    </style>

    <!-- Home Hero Slider Section  -->
    <div class="home-hero-slider-section">
        <div id="carouselExampleDark" class="carousel carousel-dark slide hero-slider" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach ($sliderDetails as $index => $sliderDetail)
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}" data-bs-interval="5000">
                        <img src="{{ asset('storage/sliders/' . $sliderDetail->image) }}" class="d-block w-100" alt="{{ $sliderDetail->title }}">
                        <div class="container-fluid">
                            <div class="carousel-caption">
                                <h2>{{ $sliderDetail->title }}</h2>
                                <p>{{ $sliderDetail->sub_title }}</p>
                                <div class="link-wrapper">
                                    @if ($sliderDetail->button_type == 'link')
                                        <a href="{{ $sliderDetail->button_link }}">{{ $sliderDetail->button_text }}</a>
                                    @elseif($sliderDetail->button_type == 'popup_model')
                                        <a href="javascript:void(0);"
                                            id="inquiryButton">{{ $sliderDetail->button_text }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- Home Hero Slider Section  -->



    <!-- Modal Structure for Popup (this will be dynamically generated for each slider) -->

    {{-- <div class="modal fade" id="inquiryModal" tabindex="-1" aria-labelledby="inquiryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">

          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- Inquiry Form or Custom Content -->
          <h4>Inquiry Form</h4>
          <form>
            <div class="mb-3">
              <label for="inquiryName" class="form-label">Your Name</label>
              <input type="text" class="form-control" id="inquiryName">
            </div>
            <div class="mb-3">
              <label for="inquiryEmail" class="form-label">Your Email</label>
              <input type="email" class="form-control" id="inquiryEmail">
            </div>
            <div class="mb-3">
              <label for="inquiryDate" class="form-label">Date</label>
              <input type="date" class="form-control" id="inquiryDate">
            </div>

            <button type="submit" class="btn btn-primary">Submit Inquiry</button>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div> --}}



     <!-- Home Why Aesthetics Section  -->
    <div class="why-aesthetics-section">
        <div class="container">
            <div class="why-aesthetics-inner">
                <div class="top-title" data-aos="fade-up" data-aos-easing="ease">
                    <h3>Why Aesthetics as a career?</h3>
                    <h4>Upgrade your skills to grow your income</h4>
                </div>
                <div class="left-graph-right-video-section">
                    <div class="left-graphic-section">
                        <img src="{{ asset('frontend/assets/images/home/2x-4x.png') }}" alt="">
                    </div>
                    <div class="right-video-section">
                        <!-- Video Section 1 -->
                        <div class="section section-2 video-section scroll-play-video">
                            <div class="video-container">
                                <video class="scroll-video" playsinline controls>
                                    <source src="{{ asset('frontend/assets/video/Why-Aesthetics-as-a-career.mp4') }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="play-button-overlay">
                                    <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-title-text">
                    <p>*Based on AgeLess internal staff survey & employer conversations. Actual outcomes vary by
                        role, experience, and city.</p>
                </div>
            </div>
            <!-- <div class="why-aesthetics-video">
                <video id="myVideo" muted preload="auto" playsinline>
                    <source src="./assets/video/why-video.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div> -->
        </div>
    </div>
    <!-- Home Why Aesthetics Section  -->


    <!-- Ageless Job Marketing Section  -->
    <div class="ageless-job-marketing-section">
        <div class="container-fluid">
            <div class="ageless-job-marketing-inner">
                <div class="left-content-section">
                    <!-- <h5>THERE IS A BIG SHORTAGE OF TALENT IN THE FIELD OF AESTHETICS ACROSS ALL ROLES LIKE <span>DOCTORS</span> EVEN
          BACK Office
          JOBS LIKE <span>MARKETING</span>
          BEING A PART OF A FAST GROWTH INDUSTRY IS ALWAYS EXCITING AND CAN FAST-TRACK YOUR PERSONAL GROWTH </h5>
      </div> -->
                    {{-- <p class="new-text-animation">THERE IS A BIG SHORTAGE OF TALENT IN THE FIELD OF AESTHETICS ACROSS
                        ALL
                        ROLES LIKE
                        <span class="cd-headline zoom ag-toggle_title">
                            <span class="cd-words-wrapper">
                                <b class="is-visible">Doctors</b>
                                <b class="is-hidden">Therapists</b>
                                <b class="is-hidden">Nurses</b>
                                <b class="is-hidden">Front Desk</b>
                                <b class="is-hidden">Managers</b>
                            </span>
                        </span> EVEN
                        BACK Office
                        JOBS LIKE <span class="cd-headline zoom ag-toggle_title">
                            <span class="cd-words-wrapper">
                                <b class="is-visible">Marketing</b>
                                <b class="is-hidden">Operations</b>
                                <b class="is-hidden">Human Resource</b>
                                <b class="is-hidden">Contact Centre</b>
                            </span>
                        </span>
                        BEING A PART OF A FAST GROWTH INDUSTRY IS ALWAYS EXCITING AND CAN FAST-TRACK YOUR PERSONAL
                        GROWTH
                    </p> --}}
                    <p>
                        The aesthetics industry is witnessing remarkable growth,
                        creating an increasing demand for skilled and professionally trained aesthetic
                        therapists. This surge emphasizes the importance of quality education and hands-on
                        training to meet industry standards and client expectations.
                    </p>
                </div>
                <div class="right-image-section">
                    <img src="{{ asset('frontend/assets/images/home/The-aesthetics-industry-is-witnessing.jpg') }}" alt="">
                    <!-- Video Section 2 -->

                    {{-- <div class="section section-1 video-section scroll-play-video">
                        <div class="video-container">
                            <video class="scroll-video" playsinline controls>
                                <source src="{{ asset('frontend/assets/video/Dr-HB-Intro-Institute.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <div class="play-button-overlay">
                                <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>

        <div class="job-role-section">
            <div class="container-fluid">
                <div class="job-role-inner">
                    {{-- <h4>No matter what your area of <span>Specialisation</span>/<span>job role.</span></h4> --}}
                    <h4>Transform your <span>beauty career into aesthetics</span></h4>
                </div>
            </div>
        </div>
    </div>
    <!-- Ageless Job Marketing Section  -->

    <!-- Ageless unique Section  -->
    {{-- <div class="ageless-unique-section">
        <div class="container-fluid">
            <div class="ageless-unique-inner">
                <div class="top-title">
                    <h3>What Makes us Unique?</h3>
                </div>
                <div class="left-right-inner-section">
                    <div class="unique-box-wrapper">
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/one-on-one.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Hands-On Training in Small Batches</h5>
                                <div class="content-wrapper">
                                    <p>Many training academies teach you theory but that is not enough. To really succeed in this industry, you need hands on skill & experience.</p>
                                </div>
                            </div>
                        </div>
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/practical-hours.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Practical Hours</h5>
                                <div class="content-wrapper">
                                    <p>We have a concept of ‘Practical Hours' means hours of hands-on practical training in small groups with our experienced practical trainers. The practical hours can be scheduled at your convenience.</p>
                                </div>
                            </div>
                        </div>
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/technologically-advanced.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Technologically Advanced</h5>
                                <div class="content-wrapper">
                                    <p>Our training centre has advanced technologies used in today’s leading aesthetic clinics, preparing you for your future career.</p>
                                </div>
                            </div>
                        </div>
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/flexible-options.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Flexible Options</h5>
                                <div class="content-wrapper">
                                    <p>Our institute lets you customise your course by selecting the specific topics and schedule practical hours at your convenience.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-video-section">
                        <!-- Video Section -->
                        <div class="section section-3 video-section scroll-play-video">
                            <div class="video-container">
                                <video class="scroll-video" playsinline controls>
                                    <source src="{{ asset('frontend/assets/video/Dr-HB-Intro-Institute.mp4') }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="play-button-overlay">
                                    <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-message">
                    <h4>Practice Makes Perfect.</h4>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="ageless-unique-section">
        <div class="container-fluid">
            <div class="ageless-unique-inner">
                <div class="top-title">
                    <h3>What Makes us Unique?</h3>
                </div>
                <div class="left-right-inner-section">
                    <div class="unique-box-wrapper">
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/one-on-one.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Hands-On Training in Small Batches</h5>
                                <div class="content-wrapper">
                                    <p>Many training academies teach you theory, but that is not enough. To really
                                        succeed in
                                        this industry, you need hands on skills and experience.</p>
                                </div>
                            </div>
                        </div>
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/practical-hours.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Practical Hours</h5>
                                <div class="content-wrapper">
                                    <p>We have a concept of 'Practical Hours' means hours of hands-on practical
                                        training in
                                        small groups with our experienced practical trainers. The practical hours can be
                                        scheduled at your convenience.</p>
                                </div>
                            </div>
                        </div>
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/technologically-advanced.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Technologically Advanced</h5>
                                <div class="content-wrapper">
                                    <p>Our training centre has advanced technologies used in today’s leading aesthetic
                                        clinics,
                                        preparing you for your future career.</p>
                                </div>
                            </div>
                        </div>
                        <div class="unique-box">
                            <div class="icon-box">
                                <img src="{{ asset('frontend/assets/images/home/technologically-advanced.png') }}" alt="">
                            </div>
                            <div class="inner-box-wrapper">
                                <h5>Hybrid Learning</h5>
                                <div class="content-wrapper">
                                    <p>Study theory online at your own pace and book hands-on practical sessions around
                                        your schedule-no fixed practical dates.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-video-section">
                        <!-- Video Section -->
                        <div class="section section-3 video-section scroll-play-video">
                            <div class="video-container">
                                <video class="scroll-video" playsinline controls>
                                    <source src="{{ asset('frontend/assets/video/What-makes-us-Unique.mp4') }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="play-button-overlay">
                                    <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="bottom-message">
                    <h4>Practice Makes Perfect.</h4>
                </div> -->
            </div>
        </div>
    </div>
    <!-- Ageless unique Section  -->

    <!-- Learn From the leaders Section  -->
    <div class="learn-from-the-leaders-section">
        <div class="learn-from-the-leaders-image-wrapper">
            <div class="practice-text">
                {{-- <h4>Practice Makes Perfect.</h4> --}}
            </div>
            <img src="{{ asset('frontend/assets/images/home/learn_from_the_leaders.jpg') }}" alt="">
        </div>
        <div class="learn-from-the-leaders-outer">
            <div class="container-fluid">
                <div class="learn-from-leaders-inner">
                    <div class="top-title">
                        <h3>Learn from the Leaders</h3>
                    </div>
                    <div class="content-para">
                        <p>When you want to be a leader in your field it is advisable to find the leader and learn
                            them.<br />
                            <span>AgeLess Clinic has been at the forefront of Aesthetics in India for more than 17 years.</span>
                        </p>
                    </div>
                    <div class="east-west-wrapper">
                        <div class="inner-wrapper">
                            <div class="left-content">
                                <p>First to introduce new technologies, products and treatments from the West and East
                                </p>
                            </div>
                            <div class="right-image">
                                <img src="{{ asset('frontend/assets/images/home/east-west.png') }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Learn From the leaders Section  -->

    <!-- Who are our courses section  -->
    <div class="who-are-our-courses-section">
        <div class="container-fluid">
            <div class="who-are-our-courses-inner">
                <div class="top-title-para">
                    <h3>Who are our courses for?</h3>
                    <p>An investment in Knowledge pays the biggest dividends</p>
                </div>
                <div class="content-para">
                    <p>We recommend our courses for individuals who are already working in the beauty and
aesthetics industry and may not have a specialised formal training, as well as for those
looking to enter the industry. Whether you are a practicing therapist, a beautician aiming
to upgrade your skills, or a fresher seeking to gain a better fundamental knowledge of
the science, technology and innovations in the industry.</p>
                </div>
                {{-- <div class="center-video-section">
                    <!-- Video Section 1 -->
                    <div class="section section-2 video-section scroll-play-video">
                        <div class="video-container">
                            <video class="scroll-video" playsinline controls>
                                <source src="{{ asset('frontend/assets/video/Dr-HB-Intro-Institute.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <div class="play-button-overlay">
                                <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                            </div>
                        </div>
                    </div>
                </div> --}}
                <div class="ageless-home-tabs-section-wrapper" style="display: none;">
                    <div class="tabs-top-title">
                        <h4>We Have Different Courses For:</h4>
                    </div>
                    <div class="ageless-tabs-inner-wrapper">
                        <div class="courses-tabs-wrapper">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-docros-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-docros" type="button" role="tab"
                                        aria-controls="pills-docros" aria-selected="true">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/home/doctors.png') }}" alt="">
                                        </div>
                                        Doctors
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-therapist-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-therapist" type="button" role="tab"
                                        aria-controls="pills-therapist" aria-selected="false">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/home/therapist.png')}}" alt="">
                                        </div>
                                        Therapists
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-managerial-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-managerial" type="button" role="tab"
                                        aria-controls="pills-managerial" aria-selected="false">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/home/managerial.png') }}" alt="">
                                        </div>
                                        Managerial
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-nurse-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-nurse" type="button" role="tab"
                                        aria-controls="pills-nurse" aria-selected="false">
                                        <div class="icon-wrapper">
                                            <img src="{{ asset('frontend/assets/images/home/nurse.png') }}" alt="">
                                        </div>
                                        Nurse
                                    </button>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-docros" role="tabpanel"
                                    aria-labelledby="pills-docros-tab" tabindex="0">
                                    <div class="tabs-inner-content-wrapper">
                                        <div class="left-side-content">
                                            <h4>Our Doctor Courses</h4>
                                            <p>Built for Doctors entering or expanding into aesthetics, this intensive pathway blends rigorous science with device-rich practice without disrupting your work schedule. Complete the theory online at your own pace, then book your small-batch practical sessions when you’re ready.</p>
                                            <p>Train across lasers, energy systems, injectables, trichology and clinical protocols; certify only after skills are demonstrated and signed off. It's a clinic-powered route to real confidence, not just a certificate.</p>

                                        </div>
                                        <div class="right-side-content">
                                            <div class="image-wrapper">
                                                <img src="{{ asset('frontend/assets/images/home/doctorsimg.png') }}" alt="">
                                            </div>

                                        </div>
                                    </div>
                                    <div class="explore-more-wrapper">
                                        <div class="link-wrapper">
                                            <a href="#">Explore All COURSE</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-therapist" role="tabpanel"
                                    aria-labelledby="pills-therapist-tab" tabindex="0">
                                    <div class="tabs-inner-content-wrapper">
                                        <div class="left-side-content">
                                            <h4>Our Therapist Courses</h4>
                                            <p>Whether you're new to aesthetics or already a working therapist ready to upskill, Ageless offers a structured journey from foundation to advanced technologies and trichology.
Three progressive courses, providing a clear and flexible pathway into the aesthetic industry.
</p>
                                            <ul>
                                                <li><b>Diploma in Basic Aesthetics : </b>Covers essential facial techniques, electrical facials and devices.</li>
                                                <li><b>Diploma in Advanced Aesthetics : </b>Introduces advanced aesthetic technologies and Laser Hair Reduction.</li>
                                                <li><b>Diploma in Advanced Aesthetics & Trichology : </b>Includes hair + scalp care, Microblading and Injectables (Theory)</li>
                                            </ul>
                                            <p>Complete the theory online at your own pace, then book your small-batch practical sessions when you’re ready. Certification is awarded only after mandatory logged hours are completed and trainer signed.</p>
                                        </div>
                                        <div class="right-side-content">
                                            <div class="image-wrapper">
                                                <img src="{{ asset('frontend/assets/images/home/therapistimg.png') }}" alt="">
                                            </div>

                                        </div>
                                    </div>
                                    <div class="explore-more-wrapper">
                                        <div class="link-wrapper">
                                            <a href="#">Explore All COURSE</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-managerial" role="tabpanel"
                                    aria-labelledby="pills-managerial-tab" tabindex="0">
                                    <div class="tabs-inner-content-wrapper">
                                        <div class="left-side-content">
                                            <h4>Our Managerial Courses</h4>
                                            <p>This theory-only course is designed for non-clinical professionals in aesthetic clinics managers, front desk, contact centre staff, marketing teams, and owners. It provides the essential industry knowledge, treatment awareness, and professional etiquette needed to confidently support clinic operations, guide clients, and drive business growth. Study online at your own pace, with structured modules and assessments that build credibility and confidence.</p>
                                            <!-- <div class="link-wrapper">
                                                <a href="#">Read More</a>
                                            </div> -->
                                        </div>
                                        <div class="right-side-content">
                                            <div class="image-wrapper">
                                                <img src="{{ asset('frontend/assets/images/home/managerialimg.png') }}" alt="">
                                            </div>
                                            <!-- <div class="link-wrapper">
                                                <a href="#">Explore More</a>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="explore-more-wrapper">
                                        <div class="link-wrapper">
                                            <a href="#">Explore All COURSE</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-nurse" role="tabpanel"
                                    aria-labelledby="pills-nurse-tab" tabindex="0">
                                    <div class="tabs-inner-content-wrapper">
                                        <div class="left-side-content">
                                            <h4>Our Nurse Courses</h4>
                                            <p>This program is designed for nurses entering or transitioning into medical aesthetics. It provides a strong foundation in clinical protocols, aseptic techniques and anatomical awareness, combined with focused exposure to popular aesthetic treatments. Complete theory online at your own pace, and book small batch practical sessions when you're ready. Certification requires completion of mandatory logged hours and trainer signoffs.</p>
                                            <!-- <div class="link-wrapper">
                                                <a href="#">Read More</a>
                                            </div> -->
                                        </div>
                                        <div class="right-side-content">
                                            <div class="image-wrapper">
                                                <img src="{{ asset('frontend/assets/images/home/nurseimg.png') }}" alt="">
                                            </div>
                                            <!-- <div class="link-wrapper">
                                                <a href="#">Explore More</a>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="explore-more-wrapper">
                                        <div class="link-wrapper">
                                            <a href="#">Explore All COURSE</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Who are our courses section  -->


    <!-- New Our Courses Section  -->
    <div class="new-home-our-courses-section">
        <div class="container">
            <div class="new-home-our-courses-inner">
                <div class="top-left-image-right-content-section">
                    <div class="left-image-section">
                        <img src="{{ asset('frontend/assets/images/home/job-marketing-img.png') }}" alt="">
                    </div>
                    <div class="right-content-section">
                        <div class="top-title-section">
                            <div class="icon-wrapper">
                                <img src="{{ asset('frontend/assets/images/home/courses-icon.png') }}" alt="">
                            </div>
                            <h3>Our Courses</h3>
                        </div>
                        <div class="content-para">
                            <p>We offer two specialised courses designed to train aspiring therapists and beauticians
                                with in-depth theoretical knowledge and hands-on expertise in skin, hair, and body
                                treatments</p>
                        </div>
                    </div>
                </div>
                <div class="courses-box-section-wrapper">
                    <div class="courses-box">
                        <div class="icon-wrapper">
                            {{-- <img src="{{ asset('frontend/assets/images/placement/placement-banner.jpg') }}" alt=""> --}}
                            <img src="{{ asset('frontend/assets/images/placement/AestheticSkinTechnician.jpg') }}" alt="">
                        </div>
                        <div class="content-wrapper">
                            <h4>Government Certified Aesthetic Skin Technician Course</h4>
                            <p>A government-certified program that provides in-depth training in non-invasive aesthetic
                                treatments, combining strong theoretical knowledge with extensive hands-on practice.
                                The course prepares learners for professional roles in aesthetic clinics, dermatology
                                centres, salons, and med-spas.</p>
                        </div>
                        <div class="explore-btn-wrapper">
                            <a href="{{ url('/course-category-detail/therapist-courses-two/facialist-technology-lhr-course') }}">Explore Course <span class="material-symbols-outlined">
                                    keyboard_arrow_right
                                </span></a>
                        </div>
                    </div>
                    <div class="courses-box">
                        <div class="icon-wrapper">
                            {{-- <img src="{{ asset('frontend/assets/images/placement/placement-banner.jpg') }}" alt=""> --}}
                            <img src="{{ asset('frontend/assets/images/placement/AgelessGrandMasterAestheticTherapistCourse.jpg') }}" alt="">
                        </div>
                        <div class="content-wrapper">
                            <h4>AgeLess Grand Master Aesthetic Therapist Course</h4>
                            <p>An advanced certification designed to master modern aesthetic technologies and
                                device-based treatments. The course equips professionals with advanced clinical skills,
                                safety knowledge, and practical expertise required to work in high-end aesthetic
                                clinics.</p>
                        </div>
                        <div class="explore-btn-wrapper">
                            <a href="{{ url('/course-category-detail/therapist-courses-two/facialist-technology-course') }}">Explore Course <span class="material-symbols-outlined">
                                    keyboard_arrow_right
                                </span></a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- New Our Courses Section  -->

    <!-- upcoming workshops Section  -->
    <div class="upcoming-workshops-section" style="display: none;">
        <div class="container-fluid">
            <div class="inner-container-wrapper">
                <div class="title-wrapper">
                    <h3>Upcoming Workshops</h3>
                </div>
                <div class="upcoming-workshops-content">
                    <div class="left-section">
                        <h5>Workshop Intro</h5>
                        <p>Join Dr. Harshna for an intensive hands-on workshop focused on advanced injection techniques.
                            Leveraging her deep understanding of facial anatomy, Dr. Harshna will guide participants
                            through the latest approaches to Botox, dermal fillers, and other cutting-edge treatments.
                            The workshop emphasizes achieving natural-looking results through precise application and
                            mastery of these valuable skills.</p>
                    </div>
                    <div class="right-section">
                        <div class="upcoming-video-content">
                            <a href="https://www.youtube.com/watch?v=a3ICNMQW7Ok"
                                data-fancybox="upcoming-workshops-video">
                                <img class="thumbnail-image" src="{{ asset('frontend/assets/images/home/video.png') }}" alt="">
                                <img class="video-icon" src="{{ asset('frontend/assets/images/home/video-icon.png') }}" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="upcoming-videos-outer-wrapper">
            <div class="container-fluid">
                <div class="upcoming-videos-container">
                    <!-- <div class="title-wrapper">
                        <h3>Upcoming New Workshops</h3>
                    </div> -->
                    @if ($upcomingWorkshops->isNotEmpty())
                        <div class="upcoming-videos-inner-wrapper">
                            @foreach ($upcomingWorkshops as $upcomingWorkshop)
                                @php
                                    $start_time = \Carbon\Carbon::parse($upcomingWorkshop->start_time);
                                    $end_end = \Carbon\Carbon::parse($upcomingWorkshop->end_time);
                                    $diff_hour = $start_time->diff($end_end); // returns DateInterval
                                    $upcoming_date = \Carbon\Carbon::parse($upcomingWorkshop->date);
                                @endphp
                                <div class="upcoming-videos-box">
                                    <div class="top-videos-container">
                                        @if($upcomingWorkshop->videos->isNotEmpty())
                                            <a href="{{ asset('storage/video_upload/' . $upcomingWorkshop->videos->first()->video_upload) }}" data-fancybox="">
                                                <img class="thumbnail-image" src="{{ asset('storage/' . $upcomingWorkshop->videos->first()->thumb_image) }}" alt="">
                                                <img class="video-icon" src="{{ asset('frontend/assets/images/home/video-icon.png') }}" alt="">
                                            </a>
                                        @endif
                                        <div class="videos-content-wrapper">
                                            <h5>{{ $upcomingWorkshop->title }}</h5>
                                            <p><img src="{{ asset('frontend/assets/images/home/calendar.png') }}" alt=""> <span>Date - {{ $upcoming_date->format('d M Y') }}</span></p>
                                            <p><img src="{{ asset('frontend/assets/images/home/time.png') }}" alt=""> <span>Time - {{ $start_time->format('h:i A') }} - {{ $end_end->format('h:i A') }}</span></p>
                                            <p><img src="{{ asset('frontend/assets/images/home/duration.png') }}" alt=""> <span>Duration {{ $diff_hour->h }} hr{{ $diff_hour->h != 1 ? 's' : '' }}{{ $diff_hour->i > 0 ? ' ' . $diff_hour->i . ' min' . ($diff_hour->i != 1 ? 's' : '') : '' }}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="no-upcoming-workshops text-center py-5">
                            <h5 class="text-muted">No Upcoming Workshops Available</h5>
                            <p class="text-secondary">Please check back later for new workshops and updates.</p>
                        </div>
                    @endif
                    <!-- <div class="link-wrapper">
                        <a href="./upcoming-new-workshops.html">View All Workshops</a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <!-- upcoming workshops Section  -->

    <!-- Testimonial Section  -->
    <div class="testimonial-section">
        <div class="container">
            <div class="testimonial-container">
                <div class="title-wrapper">
                    <h3>Testimonials</h3>
                </div>
                <div class="testimonials-slider-wrapper">
                    <div class="testimonials-slider owl-carousel owl-theme">
                        <div class="item">
                            <div class="item-inner">
                                {{-- <a href="https://www.youtube.com/watch?v=a3ICNMQW7Ok" data-fancybox="">
                                    <img src="{{ asset('frontend/assets/images/home/video.png') }}" alt="">
                                </a> --}}
                                <div class="section section-2 video-section scroll-play-video">
                                    <div class="video-container">
                                        <video class="scroll-video" playsinline controls>
                                            <source src="{{ asset('frontend/assets/video/Anjali-Rahate.mp4') }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <div class="play-button-overlay">
                                            <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-inner">
                                {{-- <a href="https://www.youtube.com/watch?v=a3ICNMQW7Ok" data-fancybox="">
                                    <img src="{{ asset('frontend/assets/images/home/video.png') }}" alt="">
                                </a> --}}
                                <div class="section section-2 video-section scroll-play-video">
                                    <div class="video-container">
                                        <video class="scroll-video" playsinline controls>
                                            <source src="{{ asset('frontend/assets/video/Priya.mp4') }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <div class="play-button-overlay">
                                            <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-inner">
                                {{-- <a href="https://www.youtube.com/watch?v=a3ICNMQW7Ok" data-fancybox="">
                                    <img src="{{ asset('frontend/assets/images/home/video.png') }}" alt="">
                                </a> --}}
                                <div class="section section-2 video-section scroll-play-video">
                                    <div class="video-container">
                                        <video class="scroll-video" playsinline controls>
                                            <source src="{{ asset('frontend/assets/video/Ranjita.mp4') }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <div class="play-button-overlay">
                                            <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-inner">
                                {{-- <a href="https://www.youtube.com/watch?v=a3ICNMQW7Ok" data-fancybox="">
                                    <img src="{{ asset('frontend/assets/images/home/video.png') }}" alt="">
                                </a> --}}
                                <div class="section section-2 video-section scroll-play-video">
                                    <div class="video-container">
                                        <video class="scroll-video" playsinline controls>
                                            <source src="{{ asset('frontend/assets/video/Shanmi.mp4') }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <div class="play-button-overlay">
                                            <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial Section  -->

    <!-- Placements section  -->
    <div class="placements-section">
        <div class="placements-top-image">
            <img src="{{ asset('frontend/assets/images/home/placements-image.png') }}" alt="">
        </div>
        <div class="placements-content-wrapper">
            <div class="container-fluid">
                <div class="placements-content-inner">
                    <h4>Placements</h4>
                    <p>We Do Not Sell Courses! We Enrich Lives!</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Placements section  -->


    <!-- Meet our career section  -->
    <div class="meet-our-career-section">
        <div class="container-fluid">
            <div class="meet-our-career-inner">

                <div class="top-content-image-section">
                    <div class="left-content-section">
                        <h4>Meet our Career Counsellors<br class="mb-none" /> your friends for life.</h4>
                        <p>Our Counsellors start by understanding your current level of experience, your aspirations and
                            help you
                            plan how to achieve them.
                        </p>
                        <p>Be in demand: if you are skilled and experienced getting a job is easy in this industry –
                            finding
                            employees with the knowledge skill and experience is difficult! That’s why our training
                            emphasizes hands
                            on practice and practical skills, that’s what employers are looking for. Those who can join
                            and start
                            working on clients from day one with confidence.</p>
                        <h4>We are here to help</h4>
                        <p>If you are an outstanding student living in Mumbai, we may have a job for you in our leading
                            chain of
                            aesthetic clinics, AgeLess Clinic. If a job at our clinic is not possible our career
                            counsellors are on
                            hand to help you with your CV and job search. Once you are part of the AgeLess Institute
                            Alumni we are
                            always available to discuss and guide you on your next steps in your career. </p>
                    </div>
                    <div class="right-image-section">
                        <div class="image-wrapper">
                            <img src="{{ asset('frontend/assets/images/home/Homepage-Placement.jpg') }}" alt="">
                        </div>
                        {{-- <div class="section section-2 video-section scroll-play-video meet-our-video-section">
                            <div class="video-container">
                                <video class="scroll-video" playsinline controls>
                                    <source src="{{ asset('frontend/assets/video/Dr-HB-Intro-Institute.mp4') }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                                <div class="play-button-overlay">
                                    <div class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
                <div class="home-video-section" style="display: none;">
                    <a href="https://www.youtube.com/watch?v=a3ICNMQW7Ok" data-fancybox="">
                        <img class="thumbnail-image" src="{{ asset('frontend/assets/images/home/video.png') }}" alt="">
                        <img class="video-icon" src="{{ asset('frontend/assets/images/home/video-icon.png') }}" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="for-us-container">
            <div class="container-fluid">
                <div class="our-seccess-banner-wrapepr">
                    <p>For us, our success is based on <strong>your success,</strong><br /><span>we will do all we can
                            to make sure you
                            excel.</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- Meet our career section  -->
@endsection
@section('custome_js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('#carouselExampleDark');
            const images = carousel.querySelectorAll('img');

            // Bootstrap carousel instance
            const carouselInstance = new bootstrap.Carousel(carousel);

            images.forEach(img => {
                img.addEventListener('mouseenter', () => {
                    carouselInstance.pause(); // Pause the carousel
                });
                img.addEventListener('mouseleave', () => {
                    carouselInstance.cycle(); // Resume the carousel
                });
            });
        });
        // Add an event listener to the Inquiry anchor tag
        document.getElementById('inquiryButton').addEventListener('click', function(event) {
            event.preventDefault();


            Calendly.initPopupWidget({
                url: 'https://calendly.com/contact-ageless/inquirynow'
            });
        });
    </script>
    <script>
        // const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        // const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
        (function($) {
            $(function() {


                //set animation timing
                var animationDelay = 2500,
                    //loading bar effect
                    barAnimationDelay = 3800,
                    barWaiting = barAnimationDelay -
                    3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
                    //letters effect
                    lettersDelay = 50,
                    //type effect
                    typeLettersDelay = 150,
                    selectionDuration = 500,
                    typeAnimationDelay = selectionDuration + 800,
                    //clip effect
                    revealDuration = 600,
                    revealAnimationDelay = 1500;

                initHeadline();


                function initHeadline() {
                    //insert <i> element for each letter of a changing word
                    singleLetters($('.cd-headline.letters').find('b'));
                    //initialise headline animation
                    animateHeadline($('.cd-headline'));
                }

                function singleLetters($words) {
                    $words.each(function() {
                        var word = $(this),
                            letters = word.text().split(''),
                            selected = word.hasClass('is-visible');
                        for (i in letters) {
                            if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] +
                                '</em>';
                            letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' +
                                letters[i] + '</i>';
                        }
                        var newLetters = letters.join('');
                        word.html(newLetters).css('opacity', 1);
                    });
                }

                function animateHeadline($headlines) {
                    var duration = animationDelay;
                    $headlines.each(function() {
                        var headline = $(this);

                        if (headline.hasClass('loading-bar')) {
                            duration = barAnimationDelay;
                            setTimeout(function() {
                                headline.find('.cd-words-wrapper').addClass('is-loading')
                            }, barWaiting);
                        } else if (headline.hasClass('clip')) {
                            var spanWrapper = headline.find('.cd-words-wrapper'),
                                newWidth = spanWrapper.width() + 10
                            spanWrapper.css('width', newWidth);
                        } else if (!headline.hasClass('type')) {
                            //assign to .cd-words-wrapper the width of its longest word
                            var words = headline.find('.cd-words-wrapper b'),
                                width = 0;
                            words.each(function() {
                                var wordWidth = $(this).width();
                                if (wordWidth > width) width = wordWidth;
                            });
                            headline.find('.cd-words-wrapper').css('width', width);
                        };

                        //trigger animation
                        setTimeout(function() {
                            hideWord(headline.find('.is-visible').eq(0))
                        }, duration);
                    });
                }

                function hideWord($word) {
                    var nextWord = takeNext($word);

                    if ($word.parents('.cd-headline').hasClass('type')) {
                        var parentSpan = $word.parent('.cd-words-wrapper');
                        parentSpan.addClass('selected').removeClass('waiting');
                        setTimeout(function() {
                            parentSpan.removeClass('selected');
                            $word.removeClass('is-visible').addClass('is-hidden').children('i')
                                .removeClass('in').addClass('out');
                        }, selectionDuration);
                        setTimeout(function() {
                            showWord(nextWord, typeLettersDelay)
                        }, typeAnimationDelay);

                    } else if ($word.parents('.cd-headline').hasClass('letters')) {
                        var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
                        hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
                        showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);

                    } else if ($word.parents('.cd-headline').hasClass('clip')) {
                        $word.parents('.cd-words-wrapper').animate({
                            width: '2px'
                        }, revealDuration, function() {
                            switchWord($word, nextWord);
                            showWord(nextWord);
                        });

                    } else if ($word.parents('.cd-headline').hasClass('loading-bar')) {
                        $word.parents('.cd-words-wrapper').removeClass('is-loading');
                        switchWord($word, nextWord);
                        setTimeout(function() {
                            hideWord(nextWord)
                        }, barAnimationDelay);
                        setTimeout(function() {
                            $word.parents('.cd-words-wrapper').addClass('is-loading')
                        }, barWaiting);

                    } else {
                        switchWord($word, nextWord);
                        setTimeout(function() {
                            hideWord(nextWord)
                        }, animationDelay);
                    }
                }

                function showWord($word, $duration) {
                    if ($word.parents('.cd-headline').hasClass('type')) {
                        showLetter($word.find('i').eq(0), $word, false, $duration);
                        $word.addClass('is-visible').removeClass('is-hidden');

                    } else if ($word.parents('.cd-headline').hasClass('clip')) {
                        $word.parents('.cd-words-wrapper').animate({
                            'width': $word.width() + 10
                        }, revealDuration, function() {
                            setTimeout(function() {
                                hideWord($word)
                            }, revealAnimationDelay);
                        });
                    }
                }

                function hideLetter($letter, $word, $bool, $duration) {
                    $letter.removeClass('in').addClass('out');

                    if (!$letter.is(':last-child')) {
                        setTimeout(function() {
                            hideLetter($letter.next(), $word, $bool, $duration);
                        }, $duration);
                    } else if ($bool) {
                        setTimeout(function() {
                            hideWord(takeNext($word))
                        }, animationDelay);
                    }

                    if ($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
                        var nextWord = takeNext($word);
                        switchWord($word, nextWord);
                    }
                }

                function showLetter($letter, $word, $bool, $duration) {
                    $letter.addClass('in').removeClass('out');

                    if (!$letter.is(':last-child')) {
                        setTimeout(function() {
                            showLetter($letter.next(), $word, $bool, $duration);
                        }, $duration);
                    } else {
                        if ($word.parents('.cd-headline').hasClass('type')) {
                            setTimeout(function() {
                                $word.parents('.cd-words-wrapper').addClass('waiting');
                            }, 200);
                        }
                        if (!$bool) {
                            setTimeout(function() {
                                hideWord($word)
                            }, animationDelay)
                        }
                    }
                }

                function takeNext($word) {
                    return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
                }

                function takePrev($word) {
                    return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
                }

                function switchWord($oldWord, $newWord) {
                    $oldWord.removeClass('is-visible').addClass('is-hidden');
                    $newWord.removeClass('is-hidden').addClass('is-visible');
                }


            });
        })(jQuery);
    </script>
    {{-- <script>
        const video = document.getElementById('myVideo');

        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    video.play();
                } else {
                    video.pause();
                }
            });
        }, {
            threshold: 0.5
        }); // Play when 50% of video is visible

        observer.observe(video);
    </script> --}}
@endsection