/* Contact Us Section */
#contact-us {
    padding: 20px 10px; /* Reduced padding for mobile */
    background-color: black;
    text-align: center;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.contact-container {
    max-width: 800px; /* Ensure it spans full viewport width */
    margin: 0 auto;
    background-color: black;
    padding: 20px; /* Adjust padding for a better fit */
    border-radius: 10px;
    box-sizing: border-box; /* Include padding and borders in width calculation */
    overflow-x: hidden; /* Prevent overflow on mobile */
}

.contact-container h2 {
    text-align: center;
    font-size: 28px; /* Slightly smaller for mobile */
    margin-bottom: 20px;
    color: white;
    text-transform: uppercase;
    border-bottom: 2px solid red; /* Accent underline */
    padding-bottom: 10px;
    width: 100%; /* Ensure it spans full width */
    max-width: 800px; /* Limit max width for alignment */
    margin-left: auto;
    margin-right: auto;
}

.contact-container p {
    color: white;
    margin-bottom: 15px;
}

/* Form Styling */
#contact-form {
    display: grid;
    gap: 15px;
    width: 100%; /* Ensure the form fits the container */
    box-sizing: border-box; /* Include padding in width */
}

.form-group {
    text-align: left;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Prevent element width overflow */
}

.form-group label {
    font-size: 14px;
    color: white;
    display: block;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; /* Fit the form group container */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box; /* Include padding in width */
}

textarea {
    resize: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #5193f7;
    outline: none;
    box-shadow: 0 0 5px #5193f7;
}

.submit-button {
    background-color: #5193f7;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Stretch button to container width */
    max-width: 400px; /* Limit the button's max width */
    margin: 0 auto; /* Center the button */
}

.submit-button:hover {
    background-color: #669ff3;
}

.recaptcha-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically if container has height */
    overflow: hidden; /* Prevent scrollbars */
    width: 100%; /* Adjust to fit parent width */
    margin: 20px 0; /* Spacing around the container */
    box-sizing: border-box; /* Ensure padding is included in dimensions */
}

.g-recaptcha {
    transform: scale(1); /* Adjust scaling if needed */
    transform-origin: center; /* Ensure scaling is centered */
    width: auto; /* Allow it to resize dynamically */
    height: auto; /* Prevent fixed height causing scroll issues */
}


@media (max-width: 768px) {
    #contact-us {
        padding: 10px;
        background-color: black;
    }

    .contact-container {
        max-width: 100%; /* Fit container to screen */
        padding: 15px; /* Adjust padding for a tighter fit */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 8px; /* Reduce padding for smaller screens */
        font-size: 14px; /* Adjust font size */
    }

    .submit-button {
        font-size: 14px; /* Smaller button font size for mobile */
        max-width: 90%; /* Reduce max width */
    }
    .recaptcha-container {
        margin: 10px 0; 
    }
    .g-recaptcha {
        transform: translateX(-25px); 
        transform-origin: center; 
    }
}