@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner typ-home typ-home2">
            <div class="swiper main animate-1">
                <div class="swiper-wrapper">
                    @if (isset($heroBanners) && $heroBanners->count())
                        @foreach ($heroBanners as $heroBanner)
                            <div class="swiper-slide" data-title="{{ $heroBanner->title }}">
                                <div class="background-wrapper set-bg" data-img="{{ asset('storage/' . $heroBanner->image) }}">
                                    <div class="container">
                                        <div class="hero-wrapper">
                                            @if ($heroBanner->description)
                                                <p class="subtitle marB42 no-aos">{{ $heroBanner->description }}</p>
                                            @endif
                                            <div class="custom-btn-group">
                                                <a href="javascript:void(0)" class="bs-btn typ-fill no-aos" onclick="openPopupTC()"
                                                    data-page-source="home">Get Certified</a>
                                                @if(!empty($heroBanner->redirect_url))
                                                    <a href="{{ e($heroBanner->redirect_url) }}" class="bs-btn">Explore Services</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="container1">
                    <div class="title-wrapper-absolute">
                        <h2 class="title animate-man no-aos" id="main-title" data-aos="fade In" data-aos-delay="100">
                            @if (isset($heroBanners) && $heroBanners->count())
                                @php
                                    $title = $heroBanners->first()->title;
                                    $words = explode(' ', $title);
                                    $firstTwoWords = implode(' ', array_slice($words, 0, 2));
                                    $remainingWords = count($words) > 2 ? implode(' ', array_slice($words, 2)) : '';
                                @endphp
                                <span id="title-white-part" style="color: inherit !important;">{{ $firstTwoWords }}</span>
                                @if ($remainingWords)
                                    <span id="iso-text">{{ $remainingWords }}</span>
                                @endif
                            @endif
                        </h2>
                        <style>

                        </style>
                    </div>
                </div>
                <div class="container2">
                    <div class="position-relative">
                        <div class="swiper-pagination main-pagination"></div>
                    </div>
                </div>

                <div class="logo-scroll-set">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="latest-heading">
                            LATEST FROM IRCLASS
                        </div>
                        <div class="swiper-pagination news-list"></div>
                    </div>
                    <div class="swiper logo-scroll">
                        <div class="swiper-wrapper">
                            @foreach ($latestNews as $news)
                                <div class="swiper-slide">
                                    <a href="{{ route('news.show', $news->id) }}" class="news-item-link1 no-aos">
                                        <div class="inner-box">
                                            <div class="left-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('storage/' . $news->image) }}" class="img-fluid no-aos"
                                                        alt="news-img">
                                                </div>
                                            </div>
                                            <div class="right-box">
                                                <div class="latest-message">
                                                    {{ Str::limit($news->description, 80) }}
                                                </div>
                                                <div class="text-end">
                                                    <span class="icon icon-next-arrow"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section typBlack">
            <div class="container">
                <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-fluids" alt="line-img">
                    </div>
                    <div class="bs-sub-heading typWhite">ABOUTS <span class="ms-1">US</span></div>
                </div>
                <div class="row mb-4">
                    <div class="col-lg-5 col-12">
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                            From India to the World – Setting the Standard Since 1993
                        </h2>
                    </div>
                    <div class="col-lg-7 col-12 mt-lg-0 mt-4">
                        <div class="content ps-lg-5 p-0" data-aos="fade" data-aos-delay="400">
                            <p class="bs-para typWhite mb-3 typ-mission-para2">
                                For over three decades, Indian Register Quality Systems (IRQS) has been a trusted partner
                                for certification, cybersecurity, testing, and training.
                                With 42 offices worldwide and a client base spanning 12,000+ organisations in industries
                                such as Marine, Ports & Shipping, Automotive, Engineering, Food & Beverage, Healthcare, IT,
                                Banking & Non-Banking, Education, Chemical, Energy, Retail, Building & Infrastructure,
                                Agriculture, Defence, Electronics, Oil & Gas, Pharmaceuticals, we bring unmatched expertise
                                and reach.
                            </p>
                            <a href="{{ route('about.overview') }}" class="bs-btn typ-borderNone typ-margin-l typ-new">Read
                                More</a>

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

                <div class="row countermainBox">
                    <div class="col-xl-5 col-12">
                        <div class="box-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/about1.jpg') }}" class="img-fluid" alt="about-img">
                        </div>
                    </div>
                    <div class="col-xl-7 col-12">
                        <div class="rightBox h-100" data-aos="fade" data-aos-delay="500">
                            <div class="content-wrapper h-100 ms-lg-5 ps-0">
                                <div class="bs-counter">
                                    <div class="box">
                                        <div class="number"><span>12000</span>+</div>
                                        <div class="content text-uppercase text-uppercase">Clients Served</div>
                                    </div>
                                    <div class="box">
                                        <div class="number"><span>280</span>+</div>
                                        <div class="content text-uppercase">Expert Auditors</div>
                                    </div>
                                    <div class="box">
                                        <div class="number"><span>600</span>+</div>
                                        <div class="content text-uppercase">Employees Worldwide</div>
                                    </div>
                                    <div class="box d-lg-none d-md-none d-block">
                                        <div class="number"><span>110000</span>+</div>
                                        <div class="content text-uppercase">Professionals Trained</div>
                                    </div>
                                    <div class="box d-lg-none d-md-none d-block">
                                        <div class="number"><span>42</span>+</div>
                                        <div class="content text-uppercase">GLOBAL OFFICES</div>
                                    </div>
                                </div>
                                <div class="bs-counter">
                                    <div class="box d-lg-block d-md-block d-none">
                                        <div class="number"><span>110000</span>+</div>
                                        <div class="content text-uppercase">Professionals Trained</div>
                                    </div>
                                    <div class="box d-lg-block d-md-block d-none">
                                        <div class="number"><span>42</span>+</div>
                                        <div class="content text-uppercase">Global Offices</div>
                                    </div>

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

        <section class="lyt-section typWhite typ-home-iso">
            <div class="container">
                <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">CERTIFICATIONS</div>
                </div>
                <div class="row mb-4 align-items-end">
                    <div class="col-lg-6 col-12">
                        <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                            Globally recognized ISO certifications for your business
                        </h2>
                    </div>
                    <div class="col-lg-6 col-12 mt-lg-0 mt-4">
                        <div class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4"
                            data-aos="fade" data-aos-delay="400">
                            <div class="bs-swipper-icons">
                                <div class="swiper-button-prev certification-prev">
                                    <span class="icon typ-black icon-link-arrow"></span>
                                </div>
                                <div class="swiper-button-next certification-next">
                                    <span class="icon typ-black icon-link-arrow"></span>
                                </div>
                            </div>
                            <div>
                                <a href="{{ route('certifications.index') }}" class="bs-btn typBlack">View All</a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="swiper certifications-slider" data-aos="fade" data-aos-delay="500">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="bs-certification-box-wrapper">
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 9001:2015: Quality Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-9001') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/quality1.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 21001:2018: Educational Organizations Management System
                                        </h2>
                                        <a href="{{ route('certifications.page.show', 'iso-21001') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/Educational-Organizations-Management-System.webp') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">IATF 16949:2016: International Automotive Task Force Standard
                                        </h2>
                                        <a href="{{ route('certifications.page.show', 'iatf-16949') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/iatf3.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 14001:2015: Environmental Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-14001') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/env4.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="bs-certification-box-wrapper">
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 50001:2018: Energy Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-50001') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/energy-management1.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 45001:2018: Occupational Health and Safety Management
                                            System
                                        </h2>
                                        <a href="{{ route('certifications.page.show', 'iso-45001') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/Occupational-Health-and-Safety-Management-System.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 27001:2022: Information Security Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-27001') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/information-security3.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 27701:2019: Privacy Information Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-27701') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/privacy-management4.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="bs-certification-box-wrapper">
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">SOC Reports: Service Organization Control Reports</h2>
                                        <a href="{{ route('certifications.page.show', 'soc-report') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/soc-report5.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 22000:2018: Food Safety Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-22000') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/Food-Safety-Management-System.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">FSSC 22000: Food Safety System Certification </h2>
                                        <a href="{{ route('certifications.page.show', 'fssc-22000') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/FSSC-22000-Food-Safety-System-Certification.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">BRCGS: Brand Reputation through Compliance Global Standards
                                        </h2>
                                        <a href="{{ route('certifications.page.show', 'brcgs') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/brcgs8.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="bs-certification-box-wrapper">
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">FAMI-QS: Feed Additives and Premixtures Quality System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-fami-qs') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/fami9.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">FSSAI: Third-Party Audit</h2>
                                        <a href="{{ route('certifications.page.show', 'fssai-third-party-audit') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/FSSAI-Third-Party-Audit.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 28000:2007: Supply Chain Security Management System </h2>
                                        <a href="{{ route('certifications.page.show', 'iso-28000') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/Supply-Chain-Security-Management-System.webp') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">ISO 13485:2016: Medical Devices Quality Management System</h2>
                                        <a href="{{ route('certifications.page.show', 'iso-13485') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/Medical Devices Quality Management System.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <div class="bs-certification-box-wrapper">
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">AYUSH: Ayurveda, Yoga & Naturopathy, Unani, Siddha, and
                                            Homeopathy</h2>
                                        <a href="{{ route('certifications.page.show', 'ayush') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/ayush13.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box border-end-0">
                                    <div class="contentBox">
                                        <h2 class="heading">Responsible Steel: Certification for Ethical and Sustainable
                                            Steel Production</h2>
                                        <a href="{{ route('other-services.page.show', 'responsiblesteel') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/steel14.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                                <div class="bs-certification-box">
                                    <div class="contentBox">
                                        <h2 class="heading">Responsible Plastic Management: Certification for Responsible
                                            Use and Recycling of Plastics</h2>
                                        <a href="{{ route('sustainability.certification.page.show', 'rpm') }}"
                                            class="bs-btn typ-borderNoneBlack">Get a Quote</a>
                                    </div>
                                    <div class="box-img">
                                        <img src="{{ asset('assets/images/home/certification/plastice15.png') }}"
                                            class="img-fluids" alt="certification-img">
                                    </div>
                                </div>
                            </div>

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

        <section class="lyt-section typUpskill p-0 typBlack">
            <div class="container-padding-left-create">
                <div class="bs-grid-box">
                    <div class="leftBox py-5">
                        <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">TRAININGS</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">
                                    Upskill your team with industry-specific training programs
                                </h2>
                            </div>
                        </div>
                        <div class="bs-tabs" data-aos="fade" data-aos-delay="500">
                            <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-Quality-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-Quality" type="button" role="tab"
                                        aria-controls="pills-Quality" aria-selected="true">ISO 9001:2015 Quality Management
                                        Systems (QMS)</button>

                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-Environmental-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-Environmental" type="button" role="tab"
                                        aria-controls="pills-Environmental" aria-selected="false">ISO 14001:2015
                                        Environmental Management Systems (EMS)
                                    </button>

                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-Health-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-Health" type="button" role="tab" aria-controls="pills-Health"
                                        aria-selected="false">ISO 45001:2018 Occupational Health & Safety Management Systems
                                        (OHSMS)
                                    </button>

                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-Business-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-Business" type="button" role="tab"
                                        aria-controls="pills-Business" aria-selected="false">ISO 27001 Information Security
                                        Management Systems (ISMS)</button>

                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-Security-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-Security" type="button" role="tab"
                                        aria-controls="pills-Security" aria-selected="false">ISO 22301:2019 Business
                                        Continuity Management Systems
                                    </button>

                                </li>

                            </ul>
                        </div>
                        <a href="{{ route('training.listing.index') }}" class="bs-btn">View All</a>
                    </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="assets/images/home/training/ISO 9001_2015 (QMS)_ Quality Management.png"
                                            class="img-fluid" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="assets/images/home/training/ISO-9001_2015 (QMS)_ Quality Management.png"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong> Quality management practices that enhance
                                                consistency,
                                            </strong> compliance, and customer trust.</div>


                                        <a href="{{ route('training.page.show', 'iso-9001') }}"
                                            class="bs-btn typ-borderNone typ">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="assets/images/home/training/ISO 14001_2015 (EMS)_ Environmental Management.png"
                                            class="img-fluid" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="assets/images/home/training/ISO-14001_2015 (EMS)_ Environmental Management.png"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Strategies to reduce environmental impact</strong>
                                            meet
                                            regulatory requirements and achieve sustainability goals.</div>
                                        <a href="{{ route('training.page.show', 'iso-14001') }}"
                                            class="bs-btn typ-borderNone typ">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="assets/images/home/training/information-security-b.png" class="img-fluid"
                                            alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        
                                        <div class="box-img">
                                            <img src="assets/images/home/training/information-security.png"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Tools to manage workplace risks,</strong> improve
                                            safety and maintain compliance.</div>
                                        <a href="{{ route('training.page.show', 'iso-45001') }}"
                                            class="bs-btn typ-borderNone typ">Learn More</a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Business" role="tabpanel"
                                    aria-labelledby="pills-Business-tab">
                                    <div class="bg-img">
                                        <img src="assets/images/home/training/ISO 27001 (ISMS)_ Information Security.png"
                                            class="img-fluid" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="assets/images/home/training/ISO-27001 (ISMS)_ Information Security.png"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong>Methods to safeguard critical data and systems
                                            </strong>with globally recognised security standards.</div>
                                        <a href="{{ route('training.page.show', 'iso-27001') }}"
                                            class="bs-btn typ-borderNone typ">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="assets/images/home/training/ISO 22301_2019 (BCMS)_ Business Continuity.png"
                                            class="img-fluid" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <div class="box-img">
                                            <img src="assets/images/home/training/ISO-22301_2019 (BCMS)_ Business Continuity.png"
                                                class="img-fluid" alt="small-img">
                                        </div>
                                        <div class="bs-para"><strong> Frameworks to build resilience and
                                            </strong>ensure
                                            business continuity during disruptions.</div>
                                        <a href="{{ route('training.page.show', 'iso-22301') }}"
                                            class="bs-btn typ-borderNone typ">Learn More</a>
                                    </div>
                                </div>

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

        <section class="lyt-section typ-sustainable set-bg" data-img="{{ asset('assets/images/sustainable-bg.jpg') }}">
            <div class="container">
                <div class="row text-center mb-lg-5 mb-4">
                    <div class="col-12">
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="300">Strengthen ESG with
                            Certified
                            Sustainability Solutions</h2>
                        <p class="bs-para typWhite" data-aos="fade" data-aos-delay="400">Helping Organisations Transform
                            Sustainability Commitments into Measurable Impact
                        </p>
                    </div>
                </div>

                <div class="row justify-content-center">
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-5 mt-5" data-aos="fade" data-aos-delay="300">
                        <div class="bs-sustainable-box">
                            <div class="number">01</div>
                            <div class="overflow-hidden position-relative">
                                <div class="card-img">
                                    <img src="{{ asset('assets/images/home/sustainable/assurance.webp') }}"
                                        class="img-fluid" alt="sustainable-img">
                                    <div class="tag">Assurance</div>
                                </div>
                                <div class="content-box">
                                    <div class="title">Assurance</div>
                                    <div class="discription"> Independent verification of sustainability and ESG
                                        performance, ensuring transparency, accountability, and trust in reported outcomes.
                                    </div>
                                    <div>
                                        <a href="{{ route('sustainability.assurance.index') }}"
                                            class="bs-btn typ-yellow">Get Certified</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-4 mt-md-5 mt-5" data-aos="fade" data-aos-delay="400">
                        <div class="bs-sustainable-box">
                            <div class="number">02</div>
                            <div class="overflow-hidden position-relative">
                                <div class="card-img">
                                    <img src="{{ asset('assets/images/home/sustainable/certification.webp') }}"
                                        class="img-fluid" alt="sustainable-img">
                                    <div class="tag">Certification</div>
                                </div>
                                <div class="content-box">
                                    <div class="title">Certification</div>
                                    <div class="discription"> Credible third-party validation of environmental and social
                                        practices, giving organisations the global recognition needed to meet stakeholder
                                        and regulatory expectations.</div>
                                    <div>
                                        <a href="{{ route('sustainability.certification.index') }}"
                                            class="bs-btn typ-yellow">Get Certified</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-12 mt-lg-0 mt-md-5 mt-5" data-aos="fade" data-aos-delay="500">
                        <div class="bs-sustainable-box">
                            <div class="number">03</div>
                            <div class="overflow-hidden position-relative">
                                <div class="card-img">
                                    <img src="{{ asset('assets/images/home/sustainable/training.webp') }}" class="img-fluid"
                                        alt="sustainable-img">
                                    <div class="tag">Training</div>
                                </div>
                                <div class="content-box">
                                    <div class="title">Training</div>
                                    <div class="discription">Practical, expert-led programmes that equip teams with the
                                        knowledge and skills to turn sustainability commitments into measurable results.
                                    </div>
                                    <div>
                                        <a href="{{ route('sustainability.training.index') }}" class="bs-btn typ-yellow">Get
                                            Certified</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section typBlack section-hero pb-0">
            <div class="container">
                <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">INDUSTRIES WE SERVE</div>
                </div>
                <div class="row mb-5 align-items-end">
                    <div class="col-lg-6 col-12">
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                            Industry-Specific Certification & Compliance Solutions
                        </h2>
                    </div>
                    <div class="col-lg-6 col-12 mt-lg-0 mt-4">
                        <div class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4"
                            data-aos="fade" data-aos-delay="400">
                            <div class="bs-swipper-icons">
                                <div class="swiper-button-prev industry-prev">
                                    <span class="icon icon-link-arrow"></span>
                                </div>
                                <div class="swiper-button-next industry-next">
                                    <span class="icon icon-link-arrow"></span>
                                </div>
                            </div>
                            <div>
                                <a href="{{ route('industries.index') }}" class="bs-btn">View All</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-container hero-swiper" data-aos="fade" data-aos-delay="500">
                <div class="swiper-wrapper">
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/industry/1.jpg') }}">

                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/marine.json') }}"
                            style="width:50px; height:50px;">
                        </div>


                        <div class="verticalTitle">
                            <div class="number">01</div>
                            <div class="title">Marine</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">01</div>
                                <h2 class="title">Marine</h2>
                                <p class="description-text">
                                    Helping fleets stay seaworthy and compliant
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'marine') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/port.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/port.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">02</div>
                            <div class="title">Ports & Shipping</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">02</div>
                                <h2 class="title">Ports & Shipping</h2>
                                <p class="description-text">
                                    Keeping cargo moving safely across borders
                                </p>
                                <div>
                                    <a href="{{ route('industries.index') }}" class="bs-btn typ-borderNoneBlack">Learn
                                        More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/industry/3.jpg') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/Automotve.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">03</div>
                            <div class="title">Automotive</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">03</div>
                                <h2 class="title">Automotive</h2>
                                <p class="description-text">
                                    Raising the bar for safety and quality
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'automotive') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/engineering.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/pharma.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">04</div>
                            <div class="title">Engineering</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">04</div>
                                <h2 class="title">Engineering</h2>
                                <p class="description-text">
                                    Supporting innovation with trusted certifications
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'engineering-and-manufacturing') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/industry/5.jpg') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/food.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">05</div>
                            <div class="title">Food & Beverage</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">05</div>
                                <h2 class="title">Food & Beverage</h2>
                                <p class="description-text">
                                    Protecting consumers through strict safety checks
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'food-and-beverages') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/healthcare.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/healthcare.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">06</div>
                            <div class="title">Healthcare</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">06</div>
                                <h2 class="title">Healthcare</h2>
                                <p class="description-text">
                                    Building confidence in patient care systems
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'medical-devices') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/it.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/it.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">07</div>
                            <div class="title">IT</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">07</div>
                                <h2 class="title">IT</h2>
                                <p class="description-text">
                                    Defending data with global security standards
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'it-and-ites') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/banking.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/banking.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">08</div>
                            <div class="title">Banking & Non-Banking</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">08</div>
                                <h2 class="title">Banking & Non-Banking</h2>
                                <p class="description-text">
                                    Reinforcing trust with solid compliance frameworks
                                </p>
                                <div>
                                    <a href="{{ route('industries.index') }}" class="bs-btn typ-borderNoneBlack">Learn
                                        More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/Education.png') }}">

                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/education.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">09</div>
                            <div class="title">Education</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">09</div>
                                <h2 class="title">Education</h2>
                                <p class="description-text">
                                    Strengthening institutions with global recognition
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'education') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/chemical.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/chemical.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">10</div>
                            <div class="title">Chemical</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">10</div>
                                <h2 class="title">Chemical</h2>
                                <p class="description-text">
                                    Ensuring safe handling and responsible practices
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'chemical') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/Enrgy.png') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/energy.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">11</div>
                            <div class="title">Energy</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">11</div>
                                <h2 class="title">Energy</h2>
                                <p class="description-text">
                                    Guiding efficiency and sustainable energy use
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'energy') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/industry/Retail.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/retail.json') }}"
                            style="width:50px; height:50px;">
                        </div>

                        <div class="verticalTitle">
                            <div class="number">12</div>
                            <div class="title">Retail</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">12</div>
                                <h2 class="title">Retail</h2>
                                <p class="description-text">
                                    Backing customer trust with certified quality
                                </p>
                                <div>
                                    <a href="{{ route('industries.index') }}" class="bs-btn typ-borderNoneBlack">Learn
                                        More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/industry/Construction.webp') }}">
                        <div class="animate-icon"
                            data-lottie="{{ asset('assets/images/animation/home/construction.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">13</div>
                            <div class="title">Building &amp; Infrastructure</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">13</div>
                                <h2 class="title">Building &amp; Infrastructure</h2>
                                <p class="description-text">
                                    Shaping reliable, safe, and lasting infrastructure
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'building-infrastructure') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/Agriculture.png') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/agriculture.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">14</div>
                            <div class="title">Agriculture</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">14</div>
                                <h2 class="title">Agriculture</h2>
                                <p class="description-text">
                                    Encouraging safe, sustainable food production
                                </p>
                                <div>
                                    <a href="{{ route('industries.index') }}" class="bs-btn typ-borderNoneBlack">Learn
                                        More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/defence.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/defence.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">15</div>
                            <div class="title">Defence</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">15</div>
                                <h2 class="title">Defence</h2>
                                <p class="description-text">
                                    Supporting readiness with robust certifications
                                </p>
                                <div>
                                    <a href="{{ route('industries.index') }}" class="bs-btn typ-borderNoneBlack">Learn
                                        More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/electronics.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/electronics.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">16</div>
                            <div class="title">Electronics</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">16</div>
                                <h2 class="title">Electronics</h2>
                                <p class="description-text">
                                    Verifying reliability in fast-moving technology
                                </p>
                                <div>
                                    <a href="{{ route('industries.index') }}" class="bs-btn typ-borderNoneBlack">Learn
                                        More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/oil.webp') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/oil.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">17</div>
                            <div class="title">Oil & Gas</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">17</div>
                                <h2 class="title">Oil & Gas</h2>
                                <p class="description-text">
                                    Securing operations in high-risk
                                    environments
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'oil-gas') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide typ-position-left  set-bg"
                        data-img="{{ asset('assets/images/home/industry/Pharmaceuticals.png') }}">
                        <div class="animate-icon" data-lottie="{{ asset('assets/images/animation/home/pharma.json') }}"
                            style="width:50px; height:50px;">
                        </div>
                        <div class="verticalTitle">
                            <div class="number">18</div>
                            <div class="title">Pharmaceuticals</div>
                        </div>
                        <div class="content-box">
                            <div class="swiper-details">
                                <div class="number">18</div>
                                <h2 class="title">Pharmaceuticals</h2>
                                <p class="description-text">
                                    Upholding safety in life-saving medicines
                                </p>
                                <div>
                                    <a href="{{ route('industries.page.show', 'pharma') }}"
                                        class="bs-btn typ-borderNoneBlack">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section typ-global">
            <div class="container">
                <div class="global-counter-box" data-aos="fade" data-aos-delay="300">
                    <div class="bs-counter d-flex  " style="align-items: center;">
                        <div class="box"
                            style="font-size: 128px; line-height: 1.4; font-weight: 200; color: #fe9f37; min-width: 210px; letter-spacing: -7px; display: flex; align-items: flex-end;">
                            <div class="number"><span>10</span> +</div>

                        </div>
                        <div class="title">
                            Globally Trusted Certifications & Compliance Credentials
                        </div>
                    </div>

                </div>
                <p class="bs-para text-center maxw600 mx-auto" data-aos="fade" data-aos-delay="400">
                    Endorsed by leading national and international bodies, IRQS is trusted worldwide for its credibility,
                    compliance and commitment to quality.
                </p>
            </div>

            <div class="logo-sec" data-aos="fade" data-aos-delay="500">
                <div class="container">
                    <div class="bs-swiper typ-logo">
                        <div class="swiper logoSwiper">
                            <div class="swiper-wrapper">
                                @foreach ($accreditations as $accreditation)
                                    <div class="swiper-slide">
                                        <div class="logo-wrapper">
                                            <img class="img-fluid" src="{{ asset('storage/' . $accreditation->logo) }}"
                                                alt="{{ $accreditation->name }}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @if (isset($upcomingTrainings) && $upcomingTrainings->count() > 0)
            <section class="lyt-section typ-trainning set-bg" data-img="{{ asset('assets/images/trainning-bg.jpg') }}">
                <div class="container">
                    <div class="custom-display" data-aos="fade" data-aos-delay="300">
                        <div class="d-flex align-items-center justify-content-lg-end justify-content-md-end gap-4 mb-4">
                            <div class="bs-swipper-icons">
                                <div class="swiper-button-prev trainning-prev">
                                    <span class="icon icon-link-arrow"></span>
                                </div>
                                <div class="swiper-button-next trainning-next">
                                    <span class="icon icon-link-arrow"></span>
                                </div>
                            </div>
                            <div>
                                <a href="{{ route('training.calendar.index') }}" class="bs-btn">View All</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-padding-left-create">
                    <div class="training-wrapper">
                        <div class="leftBox" data-aos="fade" data-aos-delay="400">
                            <div>
                                <div class="common-heading">
                                    <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">UPCOMING TRAINING</div>
                                </div>
                                <div class="row mb-lg-5 mb-4">
                                    <div class="col-12">
                                        <h2 class="bs-heading typWhite">
                                            Advance your expertise with IRQS trainings
                                        </h2>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-display-mob">
                                <div
                                    class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4">
                                    <div class="bs-swipper-icons">
                                        <div class="swiper-button-prev trainning-prev">
                                            <span class="icon icon-link-arrow"></span>
                                        </div>
                                        <div class="swiper-button-next trainning-next">
                                            <span class="icon icon-link-arrow"></span>
                                        </div>
                                    </div>
                                    <div>
                                        <a href="{{ route('training.calendar.index') }}" class="bs-btn">View All</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="rightBox" data-aos="fade" data-aos-delay="400">


                            <div class="swiper training-swiper">
                                <div class="swiper-wrapper">
                                    @foreach ($upcomingTrainings as $training)
                                                        <div class="swiper-slide">
                                                            <div class="bs-training-box">
                                                                <div class="box-img">
                                                                    @if ($training->image_path)
                                                                        <img src="{{ asset('storage/' . $training->image_path) }}" class="img-fluid"
                                                                            alt="{{ $training->training_course }}">
                                                                    @endif
                                                                    <div class="date">
                                                                        <span>{{ $training->from_date->format('d M.') }}</span>{{
                                        $training->from_date->format('Y') }}
                                                                    </div>
                                                                </div>
                                                                <div class="tag">{{ $training->course_type }}</div>

                                                                <div class="content">
                                                                    <div class="heading">{{ $training->training_course }}</div>
                                                                    <div>
                                                                        <a href="{{ route('training.calendar.index') }}"
                                                                            class="bs-btn typ-borderNone typ-mar">Register</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                    @endforeach
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if (isset($blogs) && $blogs->count() > 0)
            <section class="lyt-section typ-trainning typ-blog">
                <div class="container-padding-left-create">
                    <div class="training-wrapper typ-blog-wrapper">
                        <div class="leftBox" data-aos="fade" data-aos-delay="400">
                            <div>
                                <div class="common-heading">
                                    <div class="line">
                                        <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid"
                                            alt="line-img">
                                    </div>
                                    <div class="bs-sub-heading">BLOGS & INSIGHTS</div>
                                </div>
                                <div class="row mb-lg-5 mb-4">
                                    <div class="col-12">
                                        <h2 class="bs-heading">
                                            Stay ahead with industry insights & updates
                                        </h2>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-display-mob">
                                <div
                                    class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4">
                                    <div class="bs-swipper-icons">
                                        <div class="swiper-button-prev blog-prev-mob">
                                            <span class="icon typ-black icon-link-arrow"></span>
                                        </div>
                                        <div class="swiper-button-next blog-next-mob">
                                            <span class="icon typ-black icon-link-arrow"></span>
                                        </div>
                                    </div>
                                    <div>
                                        <a href="{{ route('blog.index') }}" class="bs-btn typBlack">View All</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="rightBox" data-aos="fade" data-aos-delay="400">
                            <div class="container-right-space-target custom-display">
                                <div
                                    class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4">
                                    <div class="bs-swipper-icons">
                                        <div class="swiper-button-prev blog-prev">
                                            <span class="icon typ-black icon-link-arrow"></span>
                                        </div>
                                        <div class="swiper-button-next blog-next">
                                            <span class="icon typ-black icon-link-arrow"></span>
                                        </div>
                                    </div>
                                    <div>
                                        <a href="{{ route('blog.index') }}" class="bs-btn typBlack">View All</a>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper blog-swiper">
                                <div class="swiper-wrapper">
                                    <!-- <div class="swiper-slide">
                                                                                                                                                                                                                                                                                                  <div class="bs-training-box typ-blog-box">
                                                                                                                                                                                                                                                                                                    <div class="box-img">
                                                                                                                                                                                                                                                                                                      <img src="assets/images/blog/1.jpg" class="img-fluid" alt="training-1">
                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                    <div class="tag">BLOG</div>
                                                                                                                                                                                                                                                                                                    <div class="content">
                                                                                                                                                                                                                                                                                                      <div class="date"><span>22 APR.</span>2025</div>
                                                                                                                                                                                                                                                                                                      <div class="heading">5 Easy Steps to ISO Certification in Surat: Boost Your Business Today!</div>
                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                                                                </div> -->
                                    <!--
                                                                                                                                                                                                                                                                        @foreach ($blogs as $blog)
                                                                                                                                                            <div class="swiper-slide">
                                                                                                                                                                                                                                                                                <div class="bs-training-box typ-blog-box">
                                                                                                                                                                                                                                                                                    <div class="box-img">
                                                                                                                                                                                                                                                                                        <img src="{{ $blog->image_url }}" class="img-fluid"
                                                                                                                                                                                                                                                                                            alt="{{ $blog->title }}">
                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                    <div class="tag">BLOG</div>
                                                                                                                                                                                                                                                                                    <div class="content">
                                                                                                                                                                                                                                                                                        <div class="date">
                                                                                                                                                                                                                                                                                            <span>{{ $blog->updated_at->format('d M.') }}</span>{{ $blog->updated_at->format('Y') }}
                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                        <div class="heading">{{ $blog->title }}</div>
                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                            @endforeach -->


                                    @foreach ($blogs as $blog)
                                                        @php
                                                            $shapeClass = match (($loop->iteration - 1) % 3) {
                                                                0 => 'landscape', // 1st card
                                                                1 => 'portrait', // 2nd card
                                                                2 => 'square', // 3rd card
                                                            };
                                                        @endphp

                                                        <div class="swiper-slide {{ $shapeClass }}">
                                                            <a href="{{ route('blog.show', $blog->id) }}" class="text-decoration-none">
                                                                <div class="bs-training-box typ-blog-box {{ $shapeClass }}">
                                                                    <div class="box-img">
                                                                        @if ($blog->image)
                                                                            <img src="{{ $blog->image_url }}" class="img-fluid"
                                                                                alt="{{ $blog->title }}">
                                                                        @else
                                                                            <img src="{{ asset('assets/images/blog/1.jpg') }}" class="img-fluid"
                                                                                alt="No Image">
                                                                        @endif
                                                                    </div>
                                                                    <!-- <div class="tag">BLOG</div> -->
                                                                    <div class="content">
                                                                        <div class="date">
                                                                            <span>{{ $blog->updated_at->format('d M.') }}</span>{{
                                        $blog->updated_at->format('Y') }}
                                                                        </div>
                                                                        <div class="heading">{{ $blog->title }}</div>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                    @endforeach


                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="set-blog-bg" data-aos="fade" data-aos-delay="300">
                        <img src="{{ asset('assets/images/blog-bg.jpg') }}" class="img-fluid" alt="blogs-bg-img">
                    </div>
                </div>
                <!-- <style>
                                            .typ-blog-box.square .box-img {
                                                aspect-ratio: 1 / 1;
                                            }

                                            .typ-blog-box.portrait .box-img {
                                                aspect-ratio: 3 / 4;
                                            }

                                            .typ-blog-box.landscape .box-img {
                                                aspect-ratio: 16 / 9;
                                            }

                                            .typ-blog-box .box-img img {
                                                width: 100%;
                                                /* height: 100%;chnage beacuse of home// */
                                                height: auto;
                                                object-fit: cover;
                                                border-radius: 12px;
                                            }
                                        </style> -->

            </section>
        @endif

        <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>
        <!-- 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')

        {{-- Include enquiry form modal for Home page --}}
        @include('components.enquiry-form-wrapper', ['pageSource' => 'home', 'formType' => 'enquiry'])
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

        <!-- ====== Global Section Start ====== -->

        <!-- ====== Global Section End ====== -->


        <!-- ====== Optional Styling ====== -->
        <!-- <style>
                        .lyt-section.typ-global {
                            padding: 80px 0;
                            text-align: center;
                        }

                        .global-counter-box {
                            margin-bottom: 20px;
                        }

                        .count-number {
                            font-size: 64px;
                            font-weight: bold;
                            color: #0c4ca3;
                        }

                        .title {
                            font-size: 20px;
                            font-weight: 500;
                        }

                        .logo-sec {
                            margin-top: 40px;
                        }
                    </style> -->


        <!-- ====== JavaScript ====== -->
        <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> -->
        <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" /> -->

    </main>
@endsection