/* Contact Us Styling */
.contact-us {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 5px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    margin-top: 35px;
    width: 93%; /* On small screens, try to be 90% wide */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    outline: 0.15rem solid var(--color-primary);
    border-radius: 1rem;
}

 .contact-us h1 {
     color: var(--color-header);
     font-family: var(--font-heading);
     font-size: 2.5em;
     margin-bottom: 20px;
     text-transform: capitalize;
     text-shadow: 0px 0px 10px var(--shadow-color);
 }

.contact-details p {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--color-primary);
    text-shadow: 0px 0px 5px var(--shadow-color);
    white-space: nowrap; /* Prevent text from wrapping */
}

.contact-details a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-details a:hover {
    color: var( --color-hover);
}

/* --- Styles for Tablets (e.g., iPads) --- */
@media (min-width: 768px) and (max-width: 1368px) {

    .contact-us h1 {
        font-size: 2.2em;
    }

    .contact-details p {
        font-size: 1em;
    }
}

/* --- Styles for Mobile --- */
@media (max-width: 700px) {
    .contact-us {
        width: 82%;
        padding: 20px 15px;
    }

    .contact-us h1 {
        font-size: 2em;
    }

    .contact-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-details p {
        font-size: 0.8em;
        line-height: 0em;
    }
}