@{
    ViewData["Title"] = "Services";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

	<div class="container py-4 album bg-grey">
			<header class="pb-3 mb-4 border-bottom">
        <span class="fs-4"><i class="bi bi-box-fill"></i> Services</span>
			</header>
    <div class="container px-4 py-5 bg-body-tertiary rounded-3" id="hanging-icons">
        <h1 class="display-6 fw-bold">Services</h1>
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-bar-chart-steps" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Product Management</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-kanban" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Product Owner</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-clipboard2-data-fill" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Business Analysis</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
        </div>
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-code-slash" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Software Development</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-diagram-3-fill" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Systems Analysis</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-rulers" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Computer-aided design (CAD)</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
        </div>
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-camera-fill" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Photography</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-camera-reels-fill" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Videography</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="bi bi-hdd-network-fill" width="1em" height="1em"></i>
                </div>
                <div>
                    <h3 class="fs-2 text-body-emphasis">Networking</h3>
                    <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
                    <a href="/Contact" class="btn btn-primary">
                        Enquire Today!
                    </a>
                </div>
            </div>
            </div>
        </div>
    </div>
    </div>