body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff;
}

.font-weight-bold {
    font-weight: 700;
}


/* Hero Section */
.hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
    background-color: #fff; /* White background */
    max-width:1000px;
    margin:0px auto;
}

.hero .display-4 {
    font-size: 2.5rem; /* Larger heading for both desktop and mobile */
    color: #161616;
}

.hero .lead {
    font-size: 1.25rem; /* Larger paragraph text */
    color: #333; /* Black text color */
    max-width:530px;
    margin:0px auto;
}

@media (max-width: 768px) {
    .hero .display-4 {
        font-size: 2.2rem; /* Slightly smaller heading for mobile, but still larger than default */
    }

    .hero .lead {
        font-size: 1.15rem; /* Slightly smaller for mobile */
    }

    .hero .d-flex {
        flex-direction: column; /* Stack buttons on mobile */
    }
}

.our-difference {background-color:#ffffff!important;}

.our-difference .lead {
    font-size: 1.25rem; /* Larger paragraph text */
    color: #333; /* Black text color */
    max-width:530px;
    margin:0px auto;
}

.services .lead {
    font-size: 1.25rem; /* Larger paragraph text */
    color: #333; /* Black text color */
    max-width:530px;
    margin:0px auto;
}


.text-success {
    color: #009341 !important;
}

.btn-primary {
    background-color: #009341;
    border-color: #009341;
}

.btn-outline-primary {
    border-color: #009341;
    color: #009341;
}


.card-title {
    color: #161616;
}

.card a {
    color: #00622c!important;
    align-self: center!important;
}


.card-text {
    color: #161616;
}

footer {
    background-color: #161616;
}

footer p {
    margin: 0;
}


/* Sections */

.parallax-section {
    background-image: url('images/homepage/ugly_termites.webp');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 650px; /* Default height for larger screens */
}

/* Mobile-specific adjustments */
@media only screen and (max-width: 767px) {
    .parallax-section {
        background-size: 100% auto;
        height: auto; /* Height will adjust based on the content */
        min-height: 300px; /* Ensures the section has a minimum height on mobile */
        background-attachment: scroll; /* Disables fixed background on mobile */
    }
}



.bg-light-gray {
    background-color: #f7f7f7;
}


/* Custom Buttons */

.btn {
    padding: 12px 20px; /* Increase padding for a larger look */
    border-radius: 0; /* No rounded corners */
    font-size: 1rem; /* Ensure legible font size for ADA compliance */
}

.btn-primary {
    background-color: #00622c; /* Green button background color */
    color: #fff; /* White text color */
    border: 1px solid #28a745; /* Green border */
}

.btn-primary:hover {
    background-color: #009341; /* Darker green on hover */
    border-color: #218838; /* Dark green border on hover */
}

.btn-outline-primary {
    color: #000000; /* Green text for outline button */
    border: 3px solid #28a745; /* Thicker green border (3px) */
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: #28a745; /* Green background on hover */
    color: #fff; /* White text on hover */
}

.btn-outline-secondary {
    color: #6c757d;
    border: 3px solid #6c757d; /* Thicker outline (3px) for secondary outline button */
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: #6c757d; /* Gray background on hover */
    color: #fff; /* White text on hover */
}

.btn:focus, .btn:active {
    outline: 3px solid #218838; /* Dark green outline for better focus visibility */
}


/* Footer */
footer {
    background-color: #161616;
    padding: 20px 0;
}

footer p {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    text-align: left;
}

.logo-container img.footer-logo {
    max-height: 3rem; /* Adjust the logo size */
}

@media (max-width: 768px) {
    footer p, .logo-container {
        text-align: center;
    }

    .logo-container {
        padding-top: 10px; /* Add padding between copyright and logo on mobile */
    }
}


.custom-gray-bg {
    background-image: url(/images/bg_light_gray.webp);
    background-repeat: repeat;
    background-size: auto;
}

@media (max-width: 768px) {
    .navbar-logo {
        height: 4rem!important;
    }

    .navbar .btn-outline-primary {margin:2em!important;}
}