body{font-weight:normal!important}
h1{font-size:24px;}
h2{font-size: 20px;}
h3{font-size: 18px;}
h4{font-size: 16px;}
.hero{position:relative;height:450px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.hero img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1}
.hero h1.logo{font-family:'Roboto',sans-serif;font-weight:800;font-size:3rem;color:#fff;position:relative;z-index:2;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
.hero h2.tagline{font-size:1.5rem;color:#fff;position:relative;z-index:2;text-shadow:2px 2px 4px rgba(0,0,0,0.5)}
.icon-residential{color:#3498db}
.icon-commercial{color:#e74c3c}
.icon-maintenance{color:#f1c40f}
#spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}
#formResponse{margin-bottom:20px}
.position-relative{position:relative}
#submitButton .spinner-border {display: none;}
#formResponse {margin-bottom: 20px;}
.position-relative {position: relative;}
.nav-link {
    position: relative; /* Make the element a positioned container */
    color: #333; /* Default color for links */
    font-weight: bold;
    text-decoration: none; /* Remove default underline */
    font-weight: bold; font-size: 20px;
    margin-left: 20px;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{color: #5a0000;}
.nav-link::after {
    content: ''; /* Required for the pseudo-element */
    position: absolute;
    left: 0;
    bottom: -5px; /* Adjust the distance between the text and the underline */
    width: 0; /* Start with no width */
    height: 2px; /* Set the height of the underline */
    background-color: #5a0000; /* Set the color of the underline */
    transition: width 0.3s ease; /* Add transition for smooth animation */
}

.nav-link:hover::after {
    width: 100%; /* Expand the underline to the full width of the link on hover */
}
.hero .tagline-container {
    position: absolute;
    top: 50%;
    left:65%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    padding: 20px 40px; /* Add padding around the text */
    z-index: 1; /* Ensures the container is above the image */
    border-radius: 10px;
}
/* Border Animation */
.hero .tagline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid white;
    border-radius: 10px;
    box-sizing: border-box;
    opacity: 0; /* Start with an invisible border */
    animation: drawAndFadeBorder 5s forwards; /* Run the animation */
}

/* Keyframe animation */
@keyframes drawAndFadeBorder {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    25% {
        width: 100%;
        height: 0;
        opacity: 1;
    }
    50% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    75% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0; /* Fade out the border */
    }
}
.hero .tagline {
    color: white; /* Text color */
    font-size: 2rem;
    text-align: center; /* Center the text inside the container */
}

@media (max-width:768px) {
.address{padding:20px; margin-top:20px; background-color:#f8f9fa}
}