/* Success Message */
.alert-success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    padding: 15px;
    margin-bottom: 20px;
}

/* Error Message */
.alert-danger {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
    padding: 15px;
    margin-bottom: 20px;
}

/* Validation Errors */
.alert-danger ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Add this CSS in your stylesheets or in a style tag within your HTML */

body {
    margin: 0;
    font-family: 'Verdana', sans-serif;
    font-size: 13px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

header {
    background-color: #ffffff;
    color: #006400; /* Dark green text */
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Verdana', sans-serif;
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    transition: transform 0.3s ease; /* Add smooth transition effect */
}

.header-nav ul.show-menu {
    transform: translateY(0); /* Show the menu below the button */
}

.header-nav ul li {
    margin-right: 0px;
    position: relative; /* Add position relative to the list item */
}

.header-nav ul li a {
    text-decoration: none;
    color: #006400; /* Dark green text */
    font-weight: bold;
    transition: color 0.3s ease;
    font-size: 13px;
    display: block;
    padding: 12px;
}

.header-nav ul li a:hover {
    color: #00ff00; /* Lighter green on mouseover */
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 450px;
    max-width: 100%;
    margin-right: 10px;
}

.menu-button {
    display: none; /* Hide the menu button by default on larger screens */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

/* Nav menu dropdown */
.header-nav ul .dropdown {
    position: relative;
    display: inline-block;
}

.header-nav ul .dropdown .dropbtn {
    text-decoration: none;
    color: #006400; /* Dark green text */
    font-weight: bold;
    transition: color 0.3s ease;
    font-size: 13px;
}

.header-nav ul .dropdown:hover .submenu {
    display: block;
}

.header-nav ul .submenu {
    display: none;
    position: absolute;
    top: 100%; /* Adjust the top position as needed */
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.header-nav ul .submenu a {
    color: #006400; /* Dark green text */
    text-decoration: none;
    padding: 12px;
    display: block;
    white-space: nowrap; /* Prevent text from wrapping */
}

.header-nav ul .submenu a:hover {
    background-color: #f2f2f2;
}

/* Mobile Styles */
@media only screen and (max-width: 980px) {
    header {
        flex-direction: column;
        text-align: center;
    }

    .logo img {
        width: 100%;
        margin-bottom: 10px;
        max-width: 450px;
    }

    .header-nav {
        order: 2; /* Change the order for mobile layout */
    }

    .header-nav ul {
        flex-direction: column;
        background-color: #ffffff; /* White background for the menu */
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        display: none; /* Hide the menu off-screen initially */
    }

    .header-nav ul.show-menu {
        top: 20px;
        display: block;
        position: relative;
    }

    .header-nav ul li {
        margin-right: 0;
        text-align: center;
    }

    .menu-button {
        display: block; /* Show the menu button on smaller screens */
    }
}

/* Styles for the main content */
main {
    font-size: 13px;
}
main h1,h2,h3,h4,p {
    margin-left: 15px;
}

main h1 {
    color: #006400; /* Dark green text */
    font-size: 20px;
}
main h2 {
    color: #006400; /* Dark green text */
    font-size: 17px;
}
main h3 {
    color: #006400; /* Dark green text */
    font-size: 15px;
}

.services {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 40px;
}

.service {
    width: calc(33.33% - 20px); /* Adjust the width and margin as needed */
    margin-bottom: 20px;
}

.service img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: Add border-radius for rounded corners */
    aspect-ratio: 15 / 9; /* Adjust the aspect ratio as needed */
}

.service h3 {
    margin-top: 10px;
    color: #006400; /* Dark green text */
}

.additional-info {
    margin-top: 20px;
}

/* Media query for screens with a maximum width of 768px (typical for mobile devices) */
@media only screen and (max-width: 768px) {
    .services {
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
        margin-bottom: 0;
    }

    .service {
        padding: 2%; /* Adjust the padding for mobile devices */
        margin-bottom: 5px;
        margin-top: 5px;
        width:100%;
    }
}

/* Styles for the footer */
footer {
    background-color: #f2f2f2; /* Slightly grey background */
    padding: 15px;
    color: #333; /* Dark grey text color */
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 13px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.copyright {
    font-size: 12px;
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.footer-nav ul li {
    margin-right: 20px;
}

.footer-nav ul li a {
    text-decoration: none;
    color: #333; /* Dark grey text color */
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: #666; /* Grey color on mouseover */
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .footer-nav {
        display: none; /* Hide the navigation on smaller screens */
    }
}

#app {
    max-width: 1100px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



/* Target elements within the form with the class 'contact-form' */
.contact-form label,
.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-form button {
    display: block;
    margin-bottom: 10px; /* Add some space between elements */
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    margin-bottom: 10px; /* Add some space between elements */
    display: block;
    width: 100%; /* Make the elements fill the width of the container */
    padding: 10px; /* Add padding to make the elements larger */
    margin-bottom: 15px; /* Add some space between elements */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    border: 1px solid #ccc; /* Add a light gray border */
    border-radius: 6px; /* Add rounded corners */
}

.contact-form input[type="submit"] {
    width: 70px;
}

.contact {
    margin-bottom: 30px; 
}


#app {
    max-width: 1100px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.contact-form select {
    height: 68px; /* Match the height of input elements for consistency */
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing of the textarea */
}

.contact-form input[type="submit"] {
    background-color: #4285f4;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form input[type="submit"]:hover {
    background-color: #3c77d1;
}