/* Reset and Basics */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #000000; background: #f4f4f4; }

/* Container for centering */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

/* Business Header (Top) */
.business-header {
    background: #003366;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo {
    height: 100px;
    max-width: 100%;
}
@media (max-width: 768px) {
    .logo {
        height: 70px;
    }
}

/* Company Name Header */
.company-name-header {
    background: #003366;
    color: #fff;
    padding: 10px 0;
    width: 100%;
}
.business-name {
    font-size: 2.5em; /* Increased for prominence across the page */
    color: #ff0000;
    text-align: center;
    display: block;
    width: 100%;
    text-shadow: 1px 1px 2px #000000;
    padding: 0 20px; /* Add padding to ensure text doesn’t touch edges */
    box-sizing: border-box; /* Include padding in width calculation */
}
@media (max-width: 768px) {
    .business-name {
        font-size: 1.8em; /* Adjusted for mobile to fit screen */
        padding: 0 10px;
    }
}

/* Location Section (Top) */
#location {
    background: #0066cc;
    color: #000000;
    padding: 15px 0;
    text-align: center;
    position: relative;
}
#location h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}
#location button {
    background: #ff6600;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
}
#location button:hover {
    background: #e65c00;
}
#location .location-result {
    margin-top: 10px;
    font-size: 1.1em;
    text-align: center;
}
#location .cta-button {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
}
@media (max-width: 768px) {
    #location {
        color: #000000;
    }
    #location .cta-button {
        position: static;
        display: block;
        margin: 10px auto;
    }
}

/* Header */
header { background: #003366; color: #000000; padding: 10px 0; }
nav ul { list-style: none; display: flex; justify-content: center; }
nav ul li { margin: 0 10px; }
nav a { color: #000000; text-decoration: none; }
.cta-button { background: #ff6600; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; }
@media (max-width: 768px) {
    nav ul { flex-direction: column; }
}

/* Hero Section */
#hero { background: #0066cc; color: #000000; text-align: center; padding: 30px 0; }
#hero h1 { font-size: 2.5em; }
#hero p { font-size: 1.2em; margin: 15px 0; }
#hero .cta-button {
    background: #ff6600;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 0;
}
#hero .cta-button:hover {
    background: #e65c00;
}
@media (max-width: 768px) {
    #hero { padding: 20px 0; }
    #hero h1 { font-size: 1.8em; }
    #hero p { font-size: 1em; }
}

/* Services Section */
#services { background: #fff; padding: 30px 0; }
#services h2 { text-align: center; margin-bottom: 15px; }
#services ul { list-style: disc; margin-left: 40px; }

/* About Section */
#about { background: #f4f4f4; padding: 30px 0; }
.service-image {
    max-width: 100%;
    height: auto;
    margin-top: 15px;
    min-width: 200px;
    min-height: 120px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}
@media (max-width: 768px) {
    .service-image {
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: auto;
    }
}

/* Contact Section */
#contact { background: #fff; padding: 30px 0; }

/* Footer */
footer { background: #003366; color: #000000; text-align: center; padding: 10px 0; font-size: 0.9em; }
@media (max-width: 768px) {
    footer { color: #000000; }
}