* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
    background: #fff;
    color: #222;
}

/* Hero */
.hero {
    background: linear-gradient(rgba(0, 102, 204, 0.7), rgba(0, 102, 204, 0.3)),
        url(pexels-suzyhazelwood-3652092.jpg) center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 20px;
}

/* About */
.about {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    background: #ffffff;
}

.about img {
    width: 45%;
    border-radius: 15px;
    margin-right: 40px;
}

.about .text {
    flex: 1;
}

.about h2 {
    color: #0066cc;
    margin-bottom: 20px;
    text-align: center;
}

.about p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #0066cc;
}

.about-content {
    max-width: 1500px;
    margin: auto;
    padding: 20px;
    text-align: center;
}

.about-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.feature-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 50px;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    color: #0066cc;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card i {
    color: #fff;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 14px;
    color: #0066cc;
}

.about-cta {
    margin-top: 50px;
    font-weight: 600;
    color: #007bff;
    font-size: 18px;
}


/* Services */
.services {
    padding: 10px;
    background: #ffffff;
    text-align: center;
}

.services h2 {
    color: #0066cc;
    margin-bottom: 50px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.card {
    background: #0066cc;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-8px);
}

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

.card h3 {
    color: #fff;
    margin: 20px 0 10px;
}

.card p {
    padding: 0 20px 20px;
    color: #fff;
}

/* Contact */
.contact {
    padding: 40px 30px;
    text-align: center;
    background: #ffffff;
}

.contact h2 {
    color: #0066cc;
    margin-bottom: 30px;
}

.contact-box {
    max-width: 1000px;
    margin: 0 auto;
    background: #f0f8ff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    color: #0066cc;
}

.contact-box p {
    margin: 15px 0;
    font-size: 1rem;
    color: #0066cc;
}

.contact-box i {
    color: red;
    margin-right: 10px;
}

/* Header */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px 0;
}

.logo img {
    height: 50px;
    border-radius: 30px;
}

.navmenu ul {
    list-style: none;
    display: flex;
    gap: 25px;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-left: 460px;
    margin-bottom: 10px;
    padding-left: -50px;
}

/* FORCE ALL FONT AWESOME ICONS TO ALWAYS BE VISIBLE */
i.fas,
i.fab,
i.fa-solid,
i.fa {
    color: #0066cc !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FIX WHITE EMAIL ICON IN CONTACT SECTION */
.contact-box a i {
    color: #0066cc !important;
}

/* FIX FEATURE CARD ICONS IN ABOUT SECTION */
.feature-card i {
    color: #0066cc !important;
}


.navmenu a {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    color: #0066cc;
    background-color: lightblue;
    padding: 10px;
    border-radius: 10px;
    border-left: 2px solid red;
    border-top: 2px solid red;
    border-bottom: 2px solid #0066cc;
    border-right: 2px solid #0066cc;
}

.navmenu a:hover,
.navmenu .active {
    background-color: #0066cc;
    color: white;
}


.mobile-nav-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #0066cc;
}

/* Responsive */
@media (max-width: 991px) {
    .navmenu ul {
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 15px;
        background: #fff;
        width: 220px;
        padding: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .navmenu.active ul {
        display: flex;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .navmenu ul li a .logo {
        display: block;
    }
}

.btn {
    color: white;
    background-color: red;
    width: fit-content;
    padding: 10px;
    text-decoration: none;
    border-radius: 10px;
    margin-top: 10px;
}

/* Footer */
footer {
    background: #0066cc;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 0.9rem;
}

@media(max-width: 700px) {
    header {
        padding: 2px;
    }

    nav {
        display: list-item;
        position: relative;
        padding-left: 100px;
    }

    nav a {
        border: none;
        font-size: small;
        padding-left: 80px;
        text-align: left;
    }

    nav a .btn {
        display: none;
    }

    nav a:hover {
        display: none;
    }
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #ffffff;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #0066cc;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    font-size: 17px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* border-radius: 12px; */
}

/* Change the color of links on hover */
.topnav a:hover {
    color: #0066cc;
    border-bottom: 2px solid #0066cc;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:last-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        border: none;
    }

}