@extends('layouts.website')

@section('content')
    <main>
        <section
            class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner typ-certifi-details typ-training-banner">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/training/trainnig-baner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title">Find the Right Sustainability Training for Your Team
                                    </h1>
                                    <p class="subtitle marB42">Build expertise and future-proof your organization with
                                        globally recognized sustainability, climate, and ESG training programs.

                                    </p>
                                    <div class="custom-btn-group mb-2">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Request
                                            Training Details or Quote
                                        </a>
                                    </div>
                                    <div class="custom-btn-group down">
                                        <a href="#" class="bs-btn typ-fill typ-hover">Download Brochure</a>

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





        <section
            class="bs-training-calender lyt-section typ-mission-sec5 typ-member-sec3 background-wrapper set-bg typ-contact-sec4 typ-event">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-12 mt-lg-0 mt-4">
                        <div class="content ps-lg-5 p-0 text-center" data-aos="fade" data-aos-delay="400">
                            <div class="common-heading d-flex justify-content-center" data-aos="fade" data-aos-delay="300">
                                <div class="bs-sub-heading  text-uppercase">Explore Our Sustainability Training Programs
                                </div>
                            </div>
                            <h2 class="bs-heading mb-3" data-aos="fade" data-aos-delay="400">
                                Select the training that fits your organization’s sustainability goals, reporting
                                obligations, or business needs
                            </h2>

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

            <div class="container mt-4 explore-our-cert ">

                <div class="mt-4">
                    <div class="tab-content-box active">
                        <div class="row g-0">
                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-14064-GHG-Accounting-Lead-Verifier.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14064-GHG Accounting Lead Verifier</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-14064-lead-verifier') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>

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


                            <div class="col-12 col-md-4">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Responsible-Fishing-Standard.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Responsible Fishing Standard
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-14067-Product-Carbon-Footprint-Certificate.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14067 Product Carbon Footprint</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-14067') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Carbon-Footprint-Lead-Implementor.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14064 Carbon Footprint Lead Implementor</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-14064-lead-implementer') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Implementation.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Implementation of ISO 14068-1:2023 Climate Change Management
                                                – Transition to Net Zero – Part 1: Carbon Neutrality</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-14068') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Carbon-Border-Adjustment-Mechanism.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Carbon Border Adjustment Mechanism (CBAM)</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'cbam') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Scope-Emission-Estimation.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Scope 3 Emission Estimation</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'scope-3') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <!-- <div class="col-12 col-md-4">
                                    <div class="team-card middle-col">
                                        <div class="image-container">
                                            <img src="assets/images/events/ISO-14046-Water-Footprint-Certificate.webp"
                                            alt="Image"
                                                class="team-img">
                                        </div>
                                        <div class="team-content d-flex align-items-end justify-content-between">
                                            <div>
                                                <h5 class="">ISO 14046 Water Footprint Certificate</h5>
                                                <div class="team-role mt-4">
                                                    <a href="#" class="event-reg" onclick="openPopupEvt()">Know More</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->
                            <div class="col-12 col-md-4">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-14040-and-ISO-14044-Lifecycle-Assessment.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14040 and ISO 14044 Lifecycle Assessment</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-14040') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Zero-Waste-to-Landfill.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Zero Waste to Landfill
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'zwl') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Discharge.webp" alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Zero Liquid Discharge (ZLD)
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'zld') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            
                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-26000-Social-Responsibility.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 26000 Social Responsibility</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-26000') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-37001-Anti-Bribery-Management-Systems–Lead-Implementor.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 37001 Anti Bribery Management Systems – Lead Implementor
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-37001') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-20400-Sustainable-Procurement–Lead-Implementor.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 20400 Sustainable Procurement – Lead Implementor</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-20400-lead-implementer') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Sustainability-Reportin–GRI-Standards-Awareness-Training.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Sustainability Reporting – GRI Standards Awareness Training
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'gri-reporting') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Business-Responsibility-and-Sustainability-Reporting.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Business Responsibility and Sustainability Reporting (BRSR)
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'brsr') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-14046-Water-Footprint-Management-Systems–Lead-Implementor.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14046 Water Footprint Management Systems – Lead
                                                Implementor</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'iso-14046') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Environmental-Product-Declaration.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Environmental Product Declaration (EPD)</h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know
                                                    More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Environmental-Social-and-Governance-Disclosures.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Environmental, Social, and Governance (ESG) Disclosures</h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know
                                                    More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Mastering-Science-Based-Decarbonisation.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Mastering Science-Based Decarbonisation – SBTi</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'sbti-lead-implementer') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            <div class="col-12 col-md-4 training-card-hidden" style="display: none;">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Zero-Liquid.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Zero Liquid Discharge (ZLD)
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.training.page.show', 'zld') }}" class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
                <div class="custom-btn-group d-flex justify-content-center mt-4" id="viewAllBtnContainer">
                    <a href="javascript:void(0)" class="bs-btn my-3" id="viewAllBtn"
                        onclick="expandTrainingCards()">View all</a>
                </div>
            </div>

        </section>


        <section class="bs-certification-listing lyt-section">
            <div class="container py-5">
                <div class="row">
                    <div class="col-lg-8 col-12">
                        <div class="common-heading" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="assets/images/blue-bg-line.svg" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite"> Why Choose Sustainability Training from IRQS?
                            </div>
                        </div>
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                            Expert-led training for compliance, credibility and future-readiness.
                        </h2>
                    </div>
                </div>
                <div class="row g-4 align-items-end mt-5">
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card small-card w-100">
                            <div class="card-tag">01</div>
                            <div class="card-text">  30+ Years of Experience</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card tall-card w-100">
                            <div class="card-tag">02</div>
                            <div class="card-text"> Accredited, Recognized Trainers</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card small-card w-100">
                            <div class="card-tag">03</div>
                            <div class="card-text">  Practical, Real-World Curriculum</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card tall-card w-100">
                            <div class="card-tag">04</div>
                            <div class="card-text"> Internationally Validated Credentials
                            </div>
                        </div>
                    </div>

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



        <section class="lyt-section bs-certification typ-certification typ-step-button">

            <div class="steps-wrapper">
                <div class="container">
                    <div class="row ">
                        <div class="col-md-6">
                            <div class="common-heading" data-aos="fade" data-aos-delay="300">
                                <div class="line">
                                    <img src=" {{ asset('assets/images/white-bg-line.svg') }} " class="img-fluid"
                                        alt="line-img">
                                </div>
                                <div class="bs-sub-heading text-uppercase">Training Enrollment Process</div>

                            </div>

                            <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                                Your Roadmap to Sustainability Expertise

                            </h2>

                        </div>
                        <!-- <div class="col-md-6 d-flex justify-content-end align-items-end navi-method">
                                <div>
                                    <p class="bs-para">Framework designed to strengthen and optimize learning processes
                                    </p>
                                </div>
                            </div> -->
                    </div>
                    <div class="row slide-btn">
                        <div class="col-md-6">


                        </div>
                        <div class="col-md-6 d-flex justify-content-end align-items-end navi-method">

                            <div class="swiper-nav d-flex">
                                <div class="swiper-button-custom swiper-button-prev" style="opacity:1;"></div>
                                <div class="swiper-button-custom swiper-button-next" style="opacity:1;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="step">

                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="  {{ asset('assets/images/certification/Step-1.svg') }} " alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 1 – Inquiry/Application</h5>
                                        <p> Express interest or submit an application for the chosen training program.
                                        </p>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon2.svg" alt="icon">
                                                </div>
                                                <h5>Step 2 –Audit Planning and preparation</h5>
                                                <p>Prepare your audit plan with expert guidance to ensure a smooth certification
                                                    process.</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-2.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 2 – Pre-Assessment/Custom Planning</h5>
                                        <p> We assess your needs and recommend the right curriculum or custom session.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon3.svg" alt="icon">
                                                </div>
                                                <h5>Step 3 –Assurance Audit</h5>
                                                <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                                    standards</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-8.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 3 – Training Delivery</h5>
                                        <p> Courses are delivered via classroom, virtual, or hybrid models led by IRQS
                                            experts.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon4.svg" alt="icon">
                                                </div>
                                                <h5>Step 4 -Report Submission</h5>
                                                <p>Conduct of Initial Certification audit – (Stage 1 + Stage 2) for new (Fresh) clients
                                                    / Re-Certification audit (For existing clients).</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-4.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 4 – Evaluation & Certification</h5>
                                        <p>
                                            Successful participants receive training completion certification or competency
                                            validation.


                                        </p>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon1.svg" alt="icon">
                                                </div>
                                                <h5>Step 5 –Assurance Audit</h5>
                                                <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                                    standards</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-5.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Continuous Learning</h5>
                                        <p> Optional follow-up modules and advanced programs to drive continued professional
                                            growth.
                                        </p>
                                    </div>

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





                    </div>
                    <div class="step-line"></div>
                    <div class="progress-line" id="progressLine"></div>
                </div>
            </div>
        </section>










        <section class="lyt-section typ-certified p-0">
            <div class="container-padding-left-create">
                <div class="certified-wrapper">
                    <div class="leftBox lyt-section">
                        <div class="maxw500o">
                            <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                Start Your Sustainability Training Journey <span>today!</span>
                            </h2>
                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                Connect with our team for details, schedules, or custom training packages.
                            </p>
                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                onclick="openPopupTC()">Request Training</a>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="box-img" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid"
                                alt="background-img">
                        </div>

                        <div class="middle-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- back to top  -->
        <a href="#" class="back-to-top">
            <span class="icon icon-drop-icon"></span>
            <!-- <p class="back-text">Back to Top</p> -->
        </a>
        {{-- Request a Quote Button Component --}}
        @include('components.request-quote-button')
    </main>

    {{-- Include enquiry form modal for Training page --}}
    @include('components.enquiry-form-wrapper', [
        'pageSource' => 'sustainability-training',
        'formType' => 'enquiry',
    ])

    @include('website.partials.include_js')
    <script>
        function downloadBrochure(downloadUrl, button) {
            // Store original content
            const originalContent = button.innerHTML;
            const originalText = button.textContent.trim();

            // Show spinner and disable button
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Downloading...';
            button.disabled = true;

            // Create a temporary link for download
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.style.display = 'none';
            document.body.appendChild(link);

            // Trigger download
            link.click();

            // Clean up temporary link
            document.body.removeChild(link);

            // Simulate download completion (since we can't detect actual download completion)
            setTimeout(() => {
                // Update button to show downloaded state
                button.innerHTML = '<i class="fas fa-check me-2"></i>Downloaded';
                button.disabled = true;

                // Reset button after 3 seconds
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.disabled = false;
                }, 3000);
            }, 1000);
        }


        function expandTrainingCards() {
            // Get all hidden cards
            const hiddenCards = document.querySelectorAll('.training-card-hidden');
            const viewAllBtnContainer = document.getElementById('viewAllBtnContainer');

            // Show all hidden cards
            hiddenCards.forEach(card => {
                card.style.display = 'block';
            });

            // Hide the "View all" button container
            // Using both class and inline style for maximum compatibility
            if (viewAllBtnContainer) {
                viewAllBtnContainer.classList.add('d-none');
                viewAllBtnContainer.style.setProperty('display', 'none', 'important');
            }
        }
    </script>
@endsection