:root {
    --primary-color: #27ae60;
    --secondary-color: #7251d1;
    --gradient-start: #51d172;
    --gradient-end: #32bd56;
    --text-color: #444444;
    --secondary-text-color: #f5f5f5;
    --bg-color: #333333;
    --secondary-bg-color: #424242;
}

#contact-support {
    background-color: var(--bg-color); /* Match other sections */
    padding: 2rem 1rem; /* Default padding */
    text-align: center; /* Center the content */
}

#contact-support h3 {
    font-size: calc(2rem + 0.9vw);
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

#contact-support .underline {
    width: 25%; /* Control the length of the line */
    height: 4px; /* Thickness of the line */
    background-color: var(--secondary-color); /* Purple color */
    margin: 0 auto 1rem auto; /* Center the line */
}

#contact-support .hours-of-opperation,
p {
    text-align: center;
    color: var(--secondary-text-color);
}

.contact-widget {
    max-width: 800px; /* Center the iframe and constrain its width */
    margin: 0 auto;
    background-color: var(
        --secondary-bg-color
    ); /* Add subtle contrast background */
    padding: 1rem;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.contact-widget iframe {
    border: none; /* Remove iframe border */
    width: 100%; /* Ensure iframe fills container */
    height: 500px; /* Fixed height */
    border-radius: 10px; /* Match container rounding */
}

@media (min-width: 768px) {
    #contact-support {
        padding: 3rem 10rem; /* Add larger padding for bigger screens */
    }

    #contact-support .underline {
        width: 8%; /* Adjust line length for larger screens */
    }
}