.email-header {
    margin-bottom: -4px;
}

.email:hover {
    animation: hoverColour 3s infinite;
    cursor: pointer;
}

@keyframes hoverColour {
    0%   { color: #b75600f7; }
    50%  { color: #006aff; }
    100% { color: #b75600f7; }
}

.icon img { transition: ease-out .3s; }
.icon img:hover { width: 110px; }

.section-social div {
    align-self: center;
}

.cu-social-links {
    display: flex;
    justify-content: center;
    width: 100%;
}

.cu-social-links a {
    text-decoration: none;
    padding: 20px;
}

.email-wrapper {
    white-space: nowrap; /* Prevent the email address from wrapping */
    overflow-x: auto; /* Add a scrollbar when the content exceeds the width */
    margin-bottom: -20px; /* Add spacing between email addresses */
}

.email {
    max-width: 500px; /* Adjust the value as needed */
    display: inline-block; /* Ensure each email address appears on a single line */
    margin-right: 10px; /* Add spacing to the left of email addresses */
}

.section-small-bottom div {
    align-self: flex-start; /* Align the emails to the top */
    padding: 10px;
    flex: 0 0 100%; /* Set the flex-basis to 100% to occupy the full width */
    max-width: 100%; /* Ensure the emails don't exceed the container's width */
    box-sizing: border-box; /* Include padding in the total width */
}

@media only screen and (max-width: 580px) {    
    .section-social div {
        padding: 10px;
        text-align: center;
    }
    
    .cu-social-links {
        display: flex;
        flex-direction: column; /* Display the links in a column */
        align-items: center; /* Center the links horizontally */
    }
    
    .cu-social-links a {
        text-decoration: none;
        padding: 20px;
    }

}