:root {

    --blue: #087ea4;
    --blue-dark: #07546e;
    --cyan: #35c3e8;
    --orange: #f47c20;
    --red: #dc3545;

    --ink: #111820;
    --muted: #66727d;

}


/* =========================================================
   BASE
========================================================= */

html {

    scroll-behavior: smooth;

    scroll-padding-top: 80px;

}


body {

    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;

    color: var(--ink);

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    background:
        rgba(6, 15, 21, 0.95);

    backdrop-filter:
        blur(12px);

}


.navbar-brand {

    letter-spacing: -0.4px;

}


.navbar-brand span {

    color: var(--cyan);

}


.nav-link {

    font-weight: 600;

}


.navbar-scrolled {

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.25);

}


/* =========================================================
   HERO
========================================================= */

.hero-section {
		background: url('../../images/hero.png');
		background-size: cover;
		background-position: center;
        position: relative;
		min-height: 100vh;
		width: 100%;
		background-repeat: no-repeat;
}

.hero-overlay {
	position: absolute;
	inset: 0;
}

.eyebrow {
	display: inline-block;
	font-size: 1.0rem;
	font-weight: 800;
	letter-spacing: 2px;
	color: white;
	background-color: #0B7CA4;
	border-radius: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.eyebrow.dark {

}

.fw-black {
	font-weight: 900;
	letter-spacing: -2px;

}

.lead {
	color: white;

}

.hero-section h1 span {
	display: block;
	color: var(--cyan);

}

.hero-section .lead {
	
}

.hero-stats strong {
	display: block;
	font-size: 1.5rem;

	
	
	
}

.hero-stats small {
	display: block;
	color: black;
	text-align: center;
}



.coverage {
	background-color: white;
	border-radius: 10px;
	text-align: center;
	padding-left: 10px;
	padding-bottom: 5px;
}













/* =========================================================
   BUTTONS
========================================================= */

.btn-primary {

    background:
        var(--blue);

    border-color:
        var(--blue);

}


.btn-primary:hover {

    background:
        #066984;

    border-color:
        #066984;

}


/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip {

    background:
        #101920;

    color: #fff;

}


.trust-item {

    padding: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    border-right:
        1px solid #29323a;

}


.trust-item:last-child {

    border-right: 0;

}


.trust-item i {

    font-size: 1.7rem;

    color: #43c0e5;

}


.trust-item strong,
.trust-item small {

    display: block;

}


.trust-item small {

    color: #aeb8c0;

}


/* =========================================================
   SECTIONS
========================================================= */

.section-padding {

    padding: 100px 0;

}


.section-heading {

    max-width: 720px;

}


.section-heading p {

    color: var(--muted);

    font-size: 1.05rem;

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {

    height: 100%;

    background: #fff;

    border:
        1px solid #e4e8eb;

    border-radius: 18px;

    padding: 30px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    box-shadow:
        0 8px 25px rgba(15, 30, 40, 0.045);

}

.service-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 20px 42px rgba(15, 30, 40, 0.11);
	border-color: #a9dcea;
}

.service-card h3 {
	font-size: 1.18rem;
	margin-top: 20px;
}

.service-card p {
	color: var(--muted);
	line-height: 1.7;
}

.service-card a {
	color: var(--blue);
	text-decoration: none;
	font-weight: 700;
}

.service-icon {
	width: 56px;
	height: 56px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	font-size: 1.55rem;
}


.service-icon.blue {
	background: #e8f7fb;
	color: var(--blue);
}

.service-icon.orange {
	background: #fff1e6;
	color: #e76f16;
}

.service-icon.green {
	background: #eaf8f0;
	color: #278554;
}

.service-icon.purple {
	background: #f2edff;
	color: #7250ba;
}

.service-icon.teal {
	background: #e6f8f7;
	color: #178b85;
}

.service-icon.red {
	background: #ffeded;
	color: #d84b51;
}

/* =========================================================
   ABOUT
========================================================= */

.photo-card {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 30px 30px 0 var(--blue);
}

.photo-card img {
	width: 100%;
	height: 620px;
	object-fit: cover;
}

.check-list {
	margin: 28px 0;
}

.check-list div {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 14px 0;
	font-weight: 600;
}

.check-list i {
	color: var(--blue);
}

/* =========================================================
   EMERGENCY SECTION
========================================================= */

.emergency-section {

    padding: 75px 0;

    background:
        linear-gradient(
            110deg,
            #a91f2a,
            #dc3545
        );

}


.emergency-section .eyebrow {

    color: #ffe4e7;

}


/* =========================================================
   PROCESS
========================================================= */

.process-card {

    position: relative;

    height: 100%;

    padding: 35px;

    border:
        1px solid #e1e6e9;

    border-radius: 18px;

    background: #fff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.process-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.08);

}


.process-card > i {

    display: block;

    font-size: 2.5rem;

    color: var(--blue);

    margin: 20px 0;

}


.process-number {

    color: var(--blue);

    font-weight: 900;

    letter-spacing: 1px;

}


.process-card p {

    color: var(--muted);

    line-height: 1.7;

}


/* =========================================================
   REVIEWS
========================================================= */

.review-card {

    height: 100%;

    padding: 32px;

    border:
        1px solid #e3e7ea;

    border-radius: 18px;

    background: #fff;

}


.stars {

    color: #f4b400;

    letter-spacing: 3px;

    margin-bottom: 18px;

}


.review-card p {

    line-height: 1.75;

}


.review-card strong,
.review-card small {

    display: block;

}


.review-card small {

    color: var(--muted);

    margin-top: 4px;

}


/* =========================================================
   FAQ
========================================================= */

.accordion-item {

    border: 0;

    border-bottom:
        1px solid #ddd;

    background: transparent;

}


.accordion-button {

    background:
        transparent !important;

    box-shadow:
        none !important;

    font-weight: 700;

    padding: 22px 0;

}


.accordion-body {

    padding:
        0 0 22px;

    color:
        var(--muted);

    line-height: 1.7;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-detail {

    display: flex;

    gap: 16px;

    margin: 25px 0;

}


.contact-detail > i {

    font-size: 1.35rem;

    color: var(--blue);

}


.contact-detail strong,
.contact-detail span {

    display: block;

}


.contact-detail span {

    color: var(--muted);

    margin-top: 3px;

}


.contact-form {

    background:
        #f4f7f8;

    padding: 35px;

    border-radius: 22px;

}


.form-control,
.form-select {

    padding: 13px 15px;

    border-radius: 10px;

    border:
        1px solid #dce2e6;

}


.form-control:focus,
.form-select:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 0.2rem
        rgba(8, 126, 164, 0.12);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        #0d141a;

    color: #fff;

}


.footer h5 {

    font-size: 0.95rem;

}


.footer a {

    display: block;

    color: #adb8c1;

    text-decoration: none;

    margin: 8px 0;

}


.footer a:hover {

    color: #fff;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .section-padding {

        padding:
            75px 0;

    }


    .hero-section h1 {

        font-size:
            2.8rem;

    }


    .trust-item {

        border-right:
            0;

        border-bottom:
            1px solid #29323a;

    }


    .photo-card img {

        height:
            380px;

    }


    .photo-card {

        box-shadow:
            12px 12px 0 var(--blue);

    }


    .hero-stats {

        gap:
            20px !important;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    .service-card,
    .process-card {

        transition:
            none;

    }

}
3. assets/js/main.js
document.addEventListener("DOMContentLoaded", function () {

    /*
     * Close the mobile menu after
     * selecting a navigation link.
     */

    const navLinks =
        document.querySelectorAll(".navbar .nav-link");


    navLinks.forEach(function (link) {

        link.addEventListener("click", function () {

            const menu =
                document.querySelector(".navbar-collapse");


            if (menu.classList.contains("show")) {

                bootstrap.Collapse
                    .getOrCreateInstance(menu)
                    .hide();

            }

        });

    });


    /*
     * Add a shadow to the navigation
     * when the user scrolls.
     */

    const navbar =
        document.querySelector(".navbar");


    window.addEventListener(
        "scroll",
        function () {

            if (window.scrollY > 40) {

                navbar.classList.add(
                    "navbar-scrolled"
                );

            } else {

                navbar.classList.remove(
                    "navbar-scrolled"
                );

            }

        },
        { passive: true }
    );

});