@extends('layouts.website')

@section('content')
    @php
        $categoryList = collect($certificationCategories ?? [])->values();
        $certificationsByCategory = collect($certificationsByCategory ?? []);
        $allCertifications = $certificationsByCategory->flatten(1);
        $initialLimit = 6;
        $initialLimit = 6;
    @endphp
    <main>
        <section
            class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner typ-banner-title typ-cl-banner">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/certificate-list/certifiction-baner-listing.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title" data-aos="fade" data-aos-delay="500">Accelerate Your <span> Business with the Right </span> ISO Certification
                                    </h1>
                                    <p class="subtitle marB42" data-aos="fade" data-aos-delay="500">
                                     Improve systems, minimise risks and achieve internationally accepted compliance with IRQS.</p>
                                    <div class="custom-btn-group mb-2" data-aos="fade" data-aos-delay="500">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()"
                                            data-page-source="certification">Get a Quote Now</a>
                                    </div>
                                    <div class="custom-btn-group down" data-aos="fade" data-aos-delay="500">
                                        <a href="#" class="bs-btn typ-fill typ-hover" onclick="openPopupEvt()">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 d-flex justify-content-center">
                    <div class="col-lg-7 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 <span
                                        class="ms-1">Certifications</span></div>
                            </div>
                            <h2 class="bs-heading mb-3" data-aos="fade" data-aos-delay="400">
                                Select a certification that matches your industry or business needs.
                            </h2>

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

            <div class="container mt-4 explore-our-cert">
                <div class="tab-wrapper">
                    <div class="prev circle-arrow"><span class="icon icon-drop-icon arr-prev"></span></div>
                    <div class="swiper mySwiperOE">
                        <div class="swiper-wrapper">
                            @foreach ($categoryList as $category)
                                @php
                                    $categorySlug = \Illuminate\Support\Str::slug($category);
                                @endphp
                                <div class="swiper-slide" data-aos="fade" data-aos-delay="500">
                                    <button type="button" class="tab-btn" data-cert-category="{{ $categorySlug }}">
                                        <span class="tab-dot">•</span><span>{{ $category }}</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="circle-arrow next"><span class="icon icon-drop-icon arr-next"></span></div>
                </div>
                <div class="mt-4 mt-70">
                    <div id="certifications-panel" class="tab-content-box active" data-initial-limit="6">
                        <!-- <div id="certificationsGrid" class="row g-0">
                                    @forelse ($allCertifications as $certification)
                                        @php
                                            $certCategory = $certification['category'] ?? 'Others';
                                            $certTitle = $certification['title'] ?? 'Certification';
                                            $certImage =
                                                $certification['image'] ??
                                                'assets/images/certificate-list/certificate-banner.webp';
                                            $certAlt = $certification['alt'] ?? $certTitle;
                                            $slug = $certification['slug'] ?? null;
                                            $directRoute = $certification['route'] ?? null;
                                            $certCategorySlug = \Illuminate\Support\Str::slug($certCategory);
                                            $cardClasses = 'col-12 col-md-4';
                                            if ($loop->index >= $initialLimit) {
                                                $cardClasses .= ' d-none initial-limit-hidden';
                                            }

                                            if (!empty($directRoute)) {
                                                $certLink = $directRoute;
                                            } elseif (!empty($slug)) {
                                                $certLink = route('certifications.page.show', $slug);
                                            } else {
                                                $certLink = '#';
                                            }
                                        @endphp
                                        <div class="{{ $cardClasses }}"
                                            data-cert-card="{{ $certCategorySlug }}">
                                            <div class="team-card middle-col">
                                                <div class="image-container">
                                                    <img src="{{ asset($certImage) }}" alt="{{ $certAlt }}" class="team-img" />
                                                </div>
                                                <div class="team-content d-flex align-items-end justify-content-between">
                                                    <div>
                                                        <h5 class="mt-4 certification-heading">{{ $certTitle }}</h5>
                                                        <div class="team-role mt-4">
                                                            <a href="{{ $certLink }}" class="event-reg" onclick="openPopupEvt()">Get a
                                                                Quote</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12 text-center">
                                            <p class="bs-para text-white mb-0">Certification data will be available shortly.</p>
                                        </div>
                                    @endforelse
                                </div> -->

                        <!-- <div id="certificationsGrid" class="row g-0">
                                @forelse ($allCertifications as $certification)
                                    @php
                                        $certCategory = $certification['category'] ?? 'Others';
                                        $certTitle = $certification['title'] ?? 'Certification';
                                        $certImage = $certification['image'] ?? 'assets/images/certificate-list/certificate-banner.webp';
                                        $certAlt = $certification['alt'] ?? $certTitle;
                                        $slug = $certification['slug'] ?? null;
                                        $directRoute = $certification['route'] ?? null;
                                        $certCategorySlug = \Illuminate\Support\Str::slug($certCategory);

                                        // Column classes
                                        $cardClasses = 'col-12 col-md-4';

                                        if ($loop->index >= $initialLimit) {
                                            $cardClasses .= ' d-none initial-limit-hidden';
                                        }

                                        // 👉 Team-card class logic
                                        $teamCardClass = 'team-card';
                                        if (($loop->index % 3) == 1) {
                                            $teamCardClass .= ' middle-col';
                                        }

                                        // Route
                                        if (!empty($directRoute)) {
                                            $certLink = $directRoute;
                                        } elseif (!empty($slug)) {
                                            $certLink = route('certifications.page.show', $slug);
                                        } else {
                                            $certLink = '#';
                                        }
                                    @endphp

                                    <div class="{{ $cardClasses }}" data-cert-card="{{ $certCategorySlug }}">
                                        <div class="{{ $teamCardClass }}" data-aos="fade" data-aos-delay="500">
                                            <div class="image-container">
                                                <img src="{{ asset($certImage) }}" alt="{{ $certAlt }}" class="team-img" />
                                            </div>

                                            <div class="team-content d-flex align-items-end justify-content-between">
                                                <div>
                                                    <h5 class="mt-4 certification-heading">{{ $certTitle }}</h5>
                                                    <div class="team-role mt-4">
                                                        <a href="{{ $certLink }}" class="event-reg" onclick="openPopupEvt()">Get a
                                                            Quote</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                @empty
                                    <div class="col-12 text-center">
                                        <p class="bs-para text-white mb-0">Certification data will be available shortly.</p>
                                    </div>
                                @endforelse
                            </div> -->


                        <div id="certificationsGrid" class="row g-0">
                            @forelse ($allCertifications as $certification)

                                @php
                                    $certCategory = $certification['category'] ?? 'Others';
                                    $certTitle = $certification['title'] ?? 'Certification';
                                    $certImage = $certification['image'] ?? 'assets/images/certificate-list/certificate-banner.webp';
                                    $certAlt = $certification['alt'] ?? $certTitle;
                                    $slug = $certification['slug'] ?? null;
                                    $directRoute = $certification['route'] ?? null;
                                    $certCategorySlug = \Illuminate\Support\Str::slug($certCategory);

                                    // Column classes
                                    $cardClasses = 'col-12 col-md-4';

                                    if ($loop->index >= $initialLimit) {
                                        $cardClasses .= ' d-none initial-limit-hidden';
                                    }

                                    /**
                                     * 👉 Middle-card logic PER CATEGORY
                                     * Maintain separate index counter for each category
                                     */
                                    if (!isset($categoryIndex[$certCategorySlug])) {
                                        $categoryIndex[$certCategorySlug] = 0;
                                    }

                                    $currentIndex = $categoryIndex[$certCategorySlug];

                                    // Card class
                                    $teamCardClass = 'team-card';
                                    if (($currentIndex % 3) === 1) {
                                        $teamCardClass .= ' middle-col';
                                    }

                                    // increment index for this category
                                    $categoryIndex[$certCategorySlug]++;

                                    // Route
                                    if (!empty($directRoute)) {
                                        $certLink = $directRoute;
                                    } elseif (!empty($slug)) {
                                        $certLink = route('certifications.page.show', $slug);
                                    } else {
                                        $certLink = '#';
                                    }
                                @endphp

                                <div class="{{ $cardClasses }}" data-cert-card="{{ $certCategorySlug }}">
                                    <div class="{{ $teamCardClass }}" data-aos="fade" data-aos-delay="500">
                                        <div class="image-container">
                                            <img src="{{ asset($certImage) }}" alt="{{ $certAlt }}" class="team-img" />
                                        </div>

                                        <div class="team-content d-flex align-items-end justify-content-between">
                                            <div>
                                                <h5 class="mt-4 certification-heading">{{ $certTitle }}</h5>
                                                <div class="team-role mt-4">
                                                    <a href="{{ $certLink }}" class="event-reg" onclick="openPopupEvt()">Get a
                                                        Quote</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @empty
                                <div class="col-12 text-center">
                                    <p class="bs-para text-white mb-0">Certification data will be available shortly.</p>
                                </div>
                            @endforelse
                        </div>

                        <div class="row mt-4 d-none" id="certificationEmptyState">
                            <div class="col-12 text-center">
                                <p class="bs-para text-white mb-0">No certifications available under this category.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="custom-btn-group d-flex justify-content-center mt-4">
                    <button type="button" class="bs-btn  my-3" id="viewAllCertifications" aria-expanded="false">
                        View all
                    </button>
                </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="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite text-uppercase">Why Choose ISO Certification?<span
                                    class="ms-1"></span>
                            </div>
                        </div>
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                           Enhance reputation, optimize efficiency, and ensure adherence to globally recognized standards.
                        </h2>
                    </div>
                </div>
                <div class="row g-4 align-items-end mt-5">
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card small-card w-100">
                            <div class="card-tag">01</div>
                            <div class="card-text">30+ Years of Industry Experience</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card tall-card w-100">
                            <div class="card-tag">02</div>
                            <div class="card-text">Accredited by Internationally Recognized Bodies</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card small-card w-100">
                            <div class="card-tag">03</div>
                            <div class="card-text">Trusted by 10,000+ Organizations Worldwide</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card tall-card w-100">
                            <div class="card-tag">04</div>
                            <div class="card-text">Audits Conducted by Qualified Industry Experts</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section typUpskill p-0 typ-accre-recog typ-certificate-list typ-certi-li-acc typ-cl-roadmap"
            style="background: #01090F;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="common-heading" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite text-uppercase">STEP-BY-STEP CERTIFICATION PROCESS</div>
                        </div>
                        <div class="row mb-lg-5 mb-4" data-aos="fade" data-aos-delay="400">
                            <div class="col-12">
                                <h2 class="bs-heading typWhite maxw600">
                            Your Roadmap to ISO Certification Success
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bs-grid-box typ-certi-list-tab">
                    <div class="leftBox">
                        <div class="bs-tabs typ-cert-tab" data-aos="fade" data-aos-delay="500">
                            <ul class="nav nav-pills mb-3 flex-column" id="pills-tab" role="tablist">
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link active w-100 text-start" id="pills-Quality-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Quality" type="button" role="tab"
                                            aria-controls="pills-Quality" aria-selected="true">Step 1 –
                                            Application</button>
                                        <!-- <span
                                                    class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->

                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: block; color: white; margin-left: 15px; margin-bottom: 10px; font-size:15px;">
                                       Expanded Summary</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Environmental-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Environmental" type="button"
                                            role="tab" aria-controls="pills-Environmental" aria-selected="false">Step
                                            2
                                            – Stage 1 Audit</button>

                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px; font-size:15px;">
                                       Expanded Summary</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Health-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Health" type="button" role="tab"
                                            aria-controls="pills-Health" aria-selected="false">Step 3 –
                                            Stage 2 Audit</button>
                                        <!-- <span
                                                    class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px; font-size:15px;">
                                      Expanded Summary </div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Security-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Security" type="button" role="tab"
                                            aria-controls="pills-Security" aria-selected="false">Step 4 –
                                            Certification</button>
                                        <!-- <span
                                                    class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px; font-size:15px;">
                                      Expanded Summary </div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Surveillance-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Surveillance" type="button"
                                            role="tab" aria-controls="pills-Surveillance" aria-selected="false">Step
                                            5 –
                                            Surveillance</button>
                                        <!-- <span
                                                    class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px; font-size:15px;">
                                      Expanded Summary </div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Recertification-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Recertification" type="button"
                                            role="tab" aria-controls="pills-Recertification" aria-selected="false">Step 6 –
                                            Recertification</button>
                                        <!-- <span
                                                    class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px; font-size:15px;">
                                       Expanded Summary</div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="rightBox" data-aos="fade" data-aos-delay="500">
                        <div class="bs-tabs">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-Quality" role="tabpanel"
                                    aria-labelledby="pills-Quality-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/certificate-list/Application-big.webp') }}" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="{{ asset('assets/images/certificate-list/Application-listing.webp') }}"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Step 1: Application</strong><br>
                                            Begin your certification journey by submitting a detailed application outlining your scope, processes, and locations. Our team reviews your information, confirms applicability of the standard, and prepares the audit plan aligned with your operations.
                                        </div>
                                        <a href="#" class="bs-btn typ-borderNone">Learn More</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Environmental" role="tabpanel"
                                    aria-labelledby="pills-Environmental-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/certificate-list/Stage-Audit-big.webp') }}" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="{{ asset('assets/images/certificate-list/Stage-1-Audit-listing.webp') }}"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Step 2: Stage 1 Audit</strong><br>
                                    During the Stage 1 audit, we review your documented management system to evaluate readiness for Stage 2. The auditor identifies gaps, verifies scope, and ensures essential processes and controls are in place. A clear report is shared for corrective action.
                                        </div>
                                        <a href="#" class="bs-btn typ-borderNone">Learn More</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Health" role="tabpanel"
                                    aria-labelledby="pills-Health-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/certificate-list/Audit-big.webp') }}" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="{{ asset('assets/images/certificate-list/Stage-2-Audit-listing.webp') }}"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Step 3: Stage 2 Audit</strong><br>
                                            Stage 2 involves an in-depth evaluation of how your management system is implemented across departments. Our auditors assess compliance, gather evidence, and identify nonconformities if any. You receive a detailed report to address findings and complete corrective actions.
                                        </div>
                                        <a href="#" class="bs-btn typ-borderNone">Learn More</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Security" role="tabpanel"
                                    aria-labelledby="pills-Security-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/certificate-list/Certification-big.webp') }}" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="{{ asset('assets/images/certificate-list/Certification-listing.webp') }}"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Step 4: Certification</strong><br>
                                           Once all nonconformities identified during the audit are addressed and verified, IRQS issues your accredited certificate. This validates conformity to the selected ISO standard and strengthens customer confidence in your management system.
                                        </div>
                                        <a href="#" class="bs-btn typ-borderNone">Learn More</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Surveillance" role="tabpanel"
                                    aria-labelledby="pills-Surveillance-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/certificate-list/Surveillance-big.webp') }}" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="{{ asset('assets/images/certificate-list/Surveillance-listing.webp') }}"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Step 5: Surveillance</strong><br>
                                         Surveillance audits are conducted annually to ensure your certified management system continues to operate effectively. Our auditors review ongoing performance, changes, and improvements to confirm sustained compliance throughout the certification cycle.
                                        </div>
                                        <a href="#" class="bs-btn typ-borderNone">Learn More</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Recertification" role="tabpanel"
                                    aria-labelledby="pills-Recertification-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/certificate-list/Recertification-big.webp') }}" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="{{ asset('assets/images/certificate-list/Recertification-listing.webp') }}"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Step 6: Recertification</strong><br>
                                       At the end of the three-year cycle, a recertification audit assesses your management system’s long-term effectiveness. Successful completion renews your certificate for the next cycle, demonstrating sustained commitment to quality and compliance.
                                        </div>
                                        <a href="#" class="bs-btn typ-borderNone">Learn More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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">
                                Let's get you certified-Start your journey <span>today!</span>
                            </h2>
                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                Connect with our experts for a seamless and hassle-free certification process.
                            </p>
                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                onclick="openPopupTC()">Get Certified</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>

        <!-- <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="maxw400">
                                                            <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                                                Let's get you certified-Start your journey <span>today!</span>
                                                            </h2>
                                                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                                                Connect with our experts for a seamless and hassle-free certification process.
                                                            </p>
                                                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                                                onclick="openPopupTC()">Get Certified</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>
        @include('components.request-quote-button')
    </main>

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

    @include('website.partials.include_js')
@endsection