html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}
body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

        header {
            background-color: #0074D9; /* Blue color blending with #fefe9a */
            text-align: center;
            padding: 10px 0;
        }

        header h1 {
            margin: 5px 0;
            font-size: 32px;
            color: #fff;
        }

        header p {
            margin: 5px 0;
            color: #fefe9a;
            font-size: 16px;
        }
        
nav {
    background-color: #0056A3;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;               
    padding: 5px 0;                
    gap: 10px;                     
    box-sizing: border-box;        
    width: 100%;                   
   /* overflow-x: auto;     */         
}

nav a {
    color: #fff;
    text-align: center;
    padding: 6px 10px;             
    text-decoration: none;
    white-space: nowrap;           
    flex-shrink: 0;                
    line-height: 1.2;              
}

nav a:hover {
    background-color: #003f7d;
    border-radius: 5px;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: flex;
    align-items: center; /* Aligns the Services link with other links */
}

/* Adjusts the dropdown button to match other links */
.dropbtn {
    cursor: pointer;
    padding: 6px 10px;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center; /* Ensures text is vertically centered */
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Positions dropdown directly below the "Services" link */
    left: 0;
    background-color: #0056A3;
    min-width: 200px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 5px;
    overflow: hidden;
}

/* Dropdown links */
.dropdown-content a {
    color: white;
    padding: 10px;
    text-align: left;
    display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #003f7d;
}

        
        
        
/*nav {
    background-color: #0056A3;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;               // Allows items to wrap on smaller screens 
    padding: 5px 0;                // Reduced vertical padding (was 10px) 
    gap: 10px;                     // Slightly reduced gap between links 
    box-sizing: border-box;        // Ensures padding doesn't overflow 
    width: 100%;                   // Full-width navigation bar 
    overflow-x: auto;              // Adds horizontal scroll if needed 
}

nav a {
    color: #fff;
    text-align: center;
    padding: 6px 10px;             // Reduced vertical & horizontal padding 
    text-decoration: none;
    white-space: nowrap;           // Prevents text from breaking into multiple lines 
    flex-shrink: 0;                // Prevents items from shrinking to fit 
    line-height: 1.2;              // Controls text line height for compactness 
}

nav a:hover {
    background-color: #003f7d;
    border-radius: 5px;
}
*/

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    nav {
        gap: 5px;                  /* Tighter spacing on smaller screens */
        padding: 4px 0;            /* Reduced vertical padding */
    }

    nav a {
        padding: 5px 8px;          /* Compact padding for mobile devices */
    }
}




/*
 nav {
    background-color: #0056A3;
    display: flex;              // Enables flexbox 
    justify-content: center;    // Centers the links horizontally 
    padding: 10px 0;            // Adds some vertical padding 
    gap: 15px;                  // Adds space between links 
}

nav a {
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;

}

nav a:hover {
    background-color: #003f7d;
    border-radius: 5px;          // Slightly rounded corners on hover 
}
*/
        .content {
            padding: 20px;
            background-color: #fff;
            max-width: 800px;
            margin: 0 auto;
        }

        .content h1, .content h2 {
            color: #333;
            text-align: center;
        }

        .center-text {
            text-align: center;
        }

       .form-container {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px auto;  /* Center the form */
    border: 1px solid #ccc;
    width: 85%;          /* Match rangemap width */
    max-width: 1007px;   /* Match rangemap max width */
}

.form-container label {
    display: block;
    margin: 10px 0 5px;
    text-align: left;
}

.form-container input, .form-container textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}
.form-container input[type="checkbox"] {
    width: auto;
    margin: 0 8px 0 0;
    padding: 0;
    display: inline-block;
}

.form-container button {
    background-color: #0074D9;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.text-ok-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 15px 0;
    text-align: left;
}

.form-container .text-ok-row input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    flex: 0 0 auto;
}

.form-container .text-ok-row label {
    display: inline !important;
    margin: 0 !important;
    text-align: left;
}
.form-container input, .form-container textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}
.form-container button:hover {
    background-color: #0056A3;
}

        footer {
            background-color: #f1f1f1;
            text-align: center;
            padding: 10px 0;
        }

         .rangemap {
            width: 90%;
            max-width: 1007px;
            height: auto;
            aspect-ratio: 1007 / 780;
            border: 2px solid black;
            display: block;
            margin: 0 auto;
        }
        
        .contact-info {
    text-align: center;
    font-size: 18px;
    color: #333;
    margin: 20px 0;              /* Adds space above and below the text */
    line-height: 1.6;
}

.contact-info a {
    color: #0074D9;              /* Matches your site's blue color */
    font-weight: bold;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;  /* Underline on hover for better UX */
}
#issues-we-address {
    background-color: #f9f9f9;   /* Light background for better visibility */
    padding: 20px;
    margin: 20px auto;
    max-width: 800px;            /* Consistent with your content width */
    border: 1px solid #ddd;
    border-radius: 8px;
}

#issues-we-address h2 {
    text-align: center;
    color: #0074D9;              /* Matching the site's blue color */
}

.issues-list {
    list-style-type: disc;       /* Standard bullet points */
    padding-left: 40px;          /* Indentation for the bullets */
    font-size: 16px;
    line-height: 1.6;
    color: #333;                 /* Dark text for readability */
}

.issues-list li {
    margin-bottom: 8px;          /* Space between list items */
}
#brands-we-service {
    background-color: #f9f9f9;   /* Light background to match other sections */
    padding: 20px;
    margin: 20px auto;
    max-width: 800px;            /* Align with your content width */
    border: 1px solid #ddd;
    border-radius: 8px;
}

#brands-we-service h2 {
    text-align: center;
    color: #0074D9;              /* Matching the header blue color */
}

.brands-list {
    list-style-type: square;     /* Square bullets for a distinct look */
    padding-left: 40px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.brands-list li {
    margin-bottom: 8px;          /* Space between list items */
}
.content-section {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px auto;
    border: 1px solid #ccc;
    width: 85%;               /* Matches the form and rangemap width */
    max-width: 1007px;         /* Consistent with the rangemap and form max width */
    border-radius: 8px;
}

.content-section h2 {
    text-align: center;
    color: #0074D9;            /* Match header blue color */
    margin-bottom: 10px;
}

.content-section p {
    text-align: center;
    color: #555;
    margin-bottom: 15px;
}

.issues-list, .brands-list {
    list-style-type: square;   /* Uniform square bullets */
    padding-left: 40px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.issues-list li, .brands-list li {
    margin-bottom: 8px;        /* Space between items */
}

#blog > h2 {
    text-align: center;
    color: #0074D9;  /* Matching the color of 'Brands We Service' */
}

/* Ensure blog content headings revert to default color */
#blog h1 {
    color: #B22222;  /* Deep orange color for standout effect */
    text-align: center;
    margin-bottom: 15px;
}
#blog h2:not(:first-child) {
    color: #333;  /* Default text color */
}

#blog {
    background-color: #f9f9f9;   /* Light background for consistency */
    padding: 20px;
    margin: 20px auto;
    border: 1px solid #ccc;      /* Light gray border */
    border-radius: 8px;          /* Rounded corners */
    width: 85%;                  /* Match the width of other sections */
    max-width: 1007px;           /* Consistent with rangemap and form */
}
.responsive-logo {
    max-width: 100%;      /* Ensures the image never exceeds the container's width */
    height: auto;         /* Maintains the image's aspect ratio */
    display: block;       /* Removes extra space below the image */
    margin: 0 auto;       /* Centers the image horizontally */
}