/* General Body Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Set overall background to white */
}

/* Main Content Container - FIX for layout breaking */
main.content-container {
    max-width: 1200px;
    margin: 0 auto; /* Center the content */
    display: block;
    background-color: #ffffff;
}

main.content-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header Styles - Black Background */
header {
    background-color: #000000;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

/* Logo Area - FIX for logo and text alignment */
.logo-area a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff; /* Ensure h1 text is white */
}

.logo-area img {
    height: 40px;
    margin-right: 10px;
}

.logo-area h1 {
    font-size: 1.5em;
    margin: 0;
}

/* Navigation Styles */
.main-nav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; }
.main-nav li { margin-left: 20px; }
.main-nav a { font-weight: bold; padding: 10px; display: block; color: #ffffff; text-decoration: none; }
.main-nav a:hover { color: #ff0000; }

/* Counsel Section - FIX for background colors */
.counsel-section { background-color: #f7f7f7; padding: 50px 20px; }
.counsel-content-wrapper { display: flex; max-width: 1200px; margin: 0 auto; gap: 0; }

.counsel-left {
    flex: 1;
    background-color: #fcf3cf; /* Yellowish background */
    padding: 40px;
    box-sizing: border-box;
}
.counsel-right {
    flex: 1;
    background-color: #ffffff; /* White background for the form */
    padding: 40px;
    box-sizing: border-box;
}

/* Restoring counsel section text styles */
.counsel-left .caption { font-size: 1.2em; color: #555; }
.counsel-left .main-question { font-size: 2.5em; font-weight: bold; color: #333; margin: 10px 0; }
.counsel-left .phone-number { font-size: 2em; color: #ff6600; font-weight: bold; }
.counsel-left hr { border: 1px solid #ff6600; width: 50px; margin: 20px 0; }
.counsel-left .description { color: #666; line-height: 1.6; }
.counsel-right h2 { font-size: 2em; margin-bottom: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group .required { color: red; }
.form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.checkbox-group { display: flex; align-items: center; }
.checkbox-group input { width: auto; margin-right: 10px; }
.counsel-right button[type="submit"] { width: 100%; padding: 15px; background-color: #ff6600; color: white; border: none; border-radius: 5px; font-size: 1.2em; cursor: pointer; }


/* Footer & Other sections */
footer .hooter img { width: 100%; display: block; }
.more-button-section { text-align: center; padding: 20px 0; }
.more-button { display: inline-block; padding: 10px 30px; border: 1px solid #ccc; background-color: #f8f8f8; color: #333; text-decoration: none; font-weight: bold; border-radius: 5px; }


/* Hamburger & Responsive */
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; }
.hamburger-btn span { display: block; width: 25px; height: 3px; background-color: #ffffff; margin: 5px 0; }

@media (max-width: 768px) {
    .main-nav { display: none; position: absolute; top: 60px; left: 0; width: 100%; background-color: #000000; }
    .main-nav.is-active { display: block; }
    .main-nav ul { flex-direction: column; }
    .main-nav li { margin: 0; width: 100%; text-align: center; border-bottom: 1px solid #333; }
    .hamburger-btn { display: block; }
    .counsel-content-wrapper { flex-direction: column; }
}