@extends('front.layout.app')
@section('content')

<style>
header {
    background: #011452;
    padding: 0;
}
.pro-bg {
    margin-top: 142px;
}
.pro-bg::before{
    content: unset !important;
}
.cat-bg-img {
    position: absolute;
    object-fit: cover;
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0;
}
</style>
<main>

    <section class="pro-bg">
        <img src="images/cat-bg.png" class="img-fluid cat-bg-img" alt="">
        <h3 class="mb-5 pb-3 pt-5">IT, Cyber Security</h3>
    </section>

    <section class="services org mt-5">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <div class="row gx-5 gy-5">
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s1.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>

                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>
                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s2.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s3.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s1.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s2.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s3.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s1.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s2.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="card">
                                <div class="height"><img class="card-img-top" src="images/s3.png" alt="Card image cap">
                                </div>
                                <div class="padd">
                                    <div class="card-body">
                                        <a href="javascript:;">
                                            <h5 class="card-title">Web Design</h5>
                                            <p class="card-text">Lorem Ipsum is simply dummy
                                                text of the printing and typesetting
                                            </p>
                                        </a>

                                    </div>
                                    <ul class=" list-group-flush">
                                        <li class="list-group-item d-flex">
                                            <div class="star"><i class="fa-sharp fa-solid fa-star"></i>
                                            </div>
                                            <div class="rat">4.8</div>
                                            <div class="rev">(1 Review)</div>
                                        </li>
                                    </ul>
                                    <hr>
                                    <div class="card-body d-flex justify-content-between">
                                        <a href="#" class="card-link"><img src="images/av.png" class="img-fluid">
                                            <span class="user">John Powell</span></a>
                                        <a href="#" class="card-link strt">Starting at: <span
                                                class="start">$124</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="btn-div text-center mt-5 pt-3">
                <button class="btn" onclick="location.href = 'javascript:;'">
                    View All </button>
            </div>
        </div>
    </section>

</main>

@endsection