/* Contact Section */
#contact {
    text-align: center;
    padding: 1.875rem 0.938rem; /* Reduced from 2.5rem 1.25rem */
    background-color: var(--background-color); /* Dark background */
    color: var(--text-color);
}

#contact h2 {
    font-size: 1.172rem; /* Reduced from 1.563rem */
    color: var(--secondary-color); /* Neon Pink for Heading */
    margin-bottom: 1.406rem; /* Reduced from 1.875rem */
}

/* Contact Container */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.938rem; /* Reduced from 1.25rem */
}

/* Individual Contact Item */
.contact-item {
    background-color: var(--navbar-bg-color); /* Dark background for contact item */
    padding: 0.938rem; /* Reduced from 1.25rem */
    border-radius: 0.469rem; /* Reduced from 0.625rem */
    width: 20rem; /* Reduced from 21.875rem */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.188rem 0.469rem var(--shadow-color); /* Reduced from 0.25rem 0.625rem */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item a {
    color: var(--text-color); /* White text */
    font-size: 0.9rem; /* Reduced from 0.688rem */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.469rem; /* Reduced from 0.625rem */
    transition: color 0.3s ease;
    word-break: break-all; /* Prevent overflow for long text */
}

/* Icons in the Contact Links */
.contact-item a i {
    color: var(--secondary-color); /* Neon Pink for icons */
    transition: color 0.3s ease;
}

/* Hover Effects */
.contact-item:hover {
    transform: translateY(-0.234rem); /* Reduced from 0.313rem */
    box-shadow: 0 0.281rem 0.563rem rgba(0, 0, 0, 0.4); /* Reduced from 0.375rem 0.75rem */
}

.contact-item:hover a {
    color: var(--secondary-color); /* Neon Pink text on hover */
}

.contact-item:hover i {
    color: var(--text-color); /* White icon on hover */
}

/* Responsive Styling */
@media (max-width: 36rem) { /* Reduced from 48rem */
    .contact-item {
        width: 100%;
        max-width: 100%;
    }

    #contact h2 {
        font-size: 0.938rem; /* Reduced from 1.25rem */
    }
}