.contact-container {
    display: flex;                         /* Use flexbox for layout */
    flex-wrap: wrap;                       /* Allow wrapping to the next line */
    width: 100%;                           /* Ensure full width */
    box-sizing: border-box;                /* Include padding/borders in width calculation */
    padding: 10px;                         /* Padding inside the container */
    margin: 0 auto;                        /* Center the container */
    overflow-x: hidden;                    /* Prevent horizontal overflow */
    gap: 10px;                             /* Space between items */
}

.contact-column {
    background-color: white !important;    /* Force white background */
    color: black !important;               /* Force black text */
    padding: 20px;                         /* Padding inside each container */
    border: 1px solid #ccc;                /* Optional: Add border for clarity */
    flex: 1 1 calc(33.333% - 20px);        /* Grow and shrink as needed with 3 items per row */
    min-width: 325px;                      /* Ensure minimum width */
    max-width: calc(100% - 10px);          /* Prevent containers from overflowing */
    box-sizing: border-box;                /* Include padding and border in width */
    border-radius: 10px;                   /* Rounded corners */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); /* Light shadow for effect */
}

/* Styles for links */
.contact-column a {
    color: #1f537e !important;             /* Link color */
    text-decoration: underline !important; /* Underline links */
}

.contact-column a:hover {
    color: #1f537e !important;             /* Hover state for links */
}

/* Media Queries */
@media (max-width: 1100px) {
    .contact-column {
        flex: 1 1 calc(50% - 20px);        /* Two items per row on medium screens */
    }
}

@media (max-width: 768px) {
    .contact-column {
        flex: 1 1 100%;                    /* Full width on smaller screens */
    }
}