/* Contact Section */
#contact {
    background-color: var(--color-gray);
    padding: var(--spacing-md) 0;
    padding-top: calc(var(--spacing-md) + 10px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    color: var(--color-white);
    position: relative;
}

#contact::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0,10 L20,10 L20,10 C20,4.477 15.523,0 10,0 C4.477,0 0,4.477 0,10 L0,10 Z' fill='%23444'/%3E%3C/svg%3E");
    background-size: 20px 10px;
    background-repeat: repeat-x;
}

#contact .icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

#contact span {
    font-size: var(--font-size-lg);
    letter-spacing: 0.1em;
}

#contact address {
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-loose);
}

#contact p {
    font-style: normal;
    font-size: var(--font-size-sm);
}

#contact a {
    color: var(--color-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color var(--transition-fast);
}

#contact a:hover {
    border-bottom-color: var(--color-white);
}

#contact a:focus {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    #contact {
        gap: var(--spacing-sm);
    }

    #contact span {
        font-size: var(--font-size-md);
    }
}