@extends('layouts.website')

@section('content')
<main>
    <section class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner">
        <div class="swiper main">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="background-wrapper set-bg" data-img="{{ asset('assets/images/Cyber/cyber-security-banner.webp') }}">
                        <div class="container">
                            <div class="hero-wrapper">
                                <h1 class="title">Cybersecurity Services <br><span>Protecting Your Digital Future</span></h1>
                                <p class="subtitle marB42">Comprehensive cybersecurity solutions to safeguard your business against evolving digital threats and ensure compliance with industry standards.</p>
                                <div class="custom-btn-group mb-2">
                                    <a href="#services" class="bs-btn typ-fill">Explore Services</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="lyt-section typWhite typ-overview-discover typ-credi typ-iot" id="services">
        <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">Our Cybersecurity Services</div>
            </div>
            <div class="row mb-4 align-items-end">
                <div class="col-lg-7 col-12">
                    <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                        Comprehensive Protection for Evolving Cyber Threats
                    </h2>
                </div>
            </div>
        </div>
        <div class="container typ-excell">
            <div class="accre-excell">
                <div class="accre-excell-img">
                    <img src="{{ asset('assets/images/Cyber/cyber-security-services.webp') }}" class="img-fluid" alt="cybersecurity-services">
                </div>
                <div class="accre-excell-para">
                    <p class="bs-para mb-5">
                        Our cybersecurity services provide end-to-end protection for your digital infrastructure. From vulnerability assessments to incident response, we offer comprehensive solutions tailored to your organization's specific needs and industry requirements.
                    </p>
                    <p class="bs-para">
                        With expert analysts, advanced tools, and real-world experience, we help you build a robust security posture that adapts to the ever-changing threat landscape. Whether you're a small business or a large enterprise, our solutions scale to meet your requirements.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="bs-certification-listing lyt-section">
        <div class="container py-5">
            <div class="row">
                <div class="col-lg-8 col-12">
                    <div class="common-heading" data-aos="fade" data-aos-delay="300">
                        <div class="line">
                            <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                        </div>
                        <div class="bs-sub-heading typWhite text-uppercase">Why Choose IRQS <span class="ms-1">CYBERSECURITY?</span></div>
                    </div>
                    <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                        Expert-Led Security Solutions
                    </h2>
                </div>
            </div>
            <div class="row g-4 align-items-end mt-5">
                <div class="col-md-6 col-lg-3 d-flex">
                    <div class="custom-card small-card w-100">
                        <div class="card-tag">01</div>
                        <div class="card-text">Industry-Certified Security Experts</div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 d-flex">
                    <div class="custom-card tall-card w-100">
                        <div class="card-tag">02</div>
                        <div class="card-text">Tailored Security Solutions</div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 d-flex">
                    <div class="custom-card small-card w-100">
                        <div class="card-tag">03</div>
                        <div class="card-text">Advanced Threat Detection</div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 d-flex">
                    <div class="custom-card tall-card w-100">
                        <div class="card-text">24/7 Security Monitoring</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="lyt-section typ-certified p-0">
        <div class="container-padding-left-create">
            <div class="certified-wrapper">
                <div class="leftBox lyt-section">
                    <div class="maxw400">
                        <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                            Ready to secure your digital assets? <span>Get started today!</span>
                        </h2>
                        <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                            Connect with our cybersecurity experts for a comprehensive security assessment and customized protection strategy.
                        </p>
                        <a href="{{ route('contact.index') }}" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400">Get Started</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>
    </a>
    <div class="sticky-btn">
        <a href="">
            <img src="{{ asset('assets/images/btn.svg') }}" class="img-fluid" alt="button">
        </a>
    </div>
</main>
@endsection