/* Enhanced Social Icons with Animations */
.social-icons-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    padding: 1rem 0 !important;
}

.social-icon-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    padding: 1.2rem 0.5rem !important;
    border-radius: 15px !important;
    text-align: center !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)) !important;
    border: 2px solid transparent !important;
    outline: none !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.social-icon-item::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s ease, height 0.6s ease !important;
    pointer-events: none !important;
}

.social-icon-item:hover::before {
    width: 200% !important;
    height: 200% !important;
}

.social-icon-item i,
.social-icon-item svg {
    font-size: 2rem !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    z-index: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
}

.social-icon-item span {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    z-index: 1 !important;
    text-transform: uppercase !important;
    opacity: 0.95 !important;
}

.social-icon-item:hover {
    transform: translateY(-8px) scale(1.08) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.4) !important;
    border-color: rgba(255,255,255,0.3) !important;
    animation: float 2s ease-in-out infinite !important;
}

.social-icon-item:hover i,
.social-icon-item:hover svg {
    transform: scale(1.2) rotate(5deg) !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) !important;
}

@keyframes float {
    0%, 100% { transform: translateY(-8px) scale(1.08); }
    50% { transform: translateY(-13px) scale(1.08); }
}

/* Individual Platform Colors */
.social-icon-item.whatsapp-link:hover {
    background: linear-gradient(145deg, #25d366, #128c7e) !important;
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.5) !important;
}

.social-icon-item.instagram-link:hover {
    background: linear-gradient(145deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    box-shadow: 0 12px 35px rgba(225, 48, 108, 0.5) !important;
}

.social-icon-item.facebook-link:hover {
    background: linear-gradient(145deg, #1877f2, #0d65d9) !important;
    box-shadow: 0 12px 35px rgba(24, 119, 242, 0.5) !important;
}

.social-icon-item.threads-link:hover {
    background: linear-gradient(145deg, #000000, #1a1a1a) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7) !important;
}

.social-icon-item.youtube-link:hover {
    background: linear-gradient(145deg, #ff0000, #cc0000) !important;
    box-shadow: 0 12px 35px rgba(255, 0, 0, 0.5) !important;
}

.social-icon-item.snapchat-link:hover {
    background: linear-gradient(145deg, #fffc00, #ffd700) !important;
    color: #000000 !important;
    box-shadow: 0 12px 35px rgba(255, 252, 0, 0.5) !important;
}

.social-icon-item.snapchat-link:hover i,
.social-icon-item.snapchat-link:hover svg,
.social-icon-item.snapchat-link:hover span {
    color: #000000 !important;
}

.social-icon-item.x-link:hover {
    background: linear-gradient(145deg, #000000, #14171a) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7) !important;
}

.social-icon-item.telegram-link:hover {
    background: linear-gradient(145deg, #0088cc, #0077b5) !important;
    box-shadow: 0 12px 35px rgba(0, 136, 204, 0.5) !important;
}

.social-icon-item.tiktok-link:hover {
    background: linear-gradient(145deg, #000000 0%, #69C9D0 50%, #EE1D52 100%) !important;
    box-shadow: 0 12px 35px rgba(238, 29, 82, 0.5) !important;
}

/* Remove all underlines */
.social-icon-item,
.social-icon-item:hover,
.social-icon-item:active,
.social-icon-item:focus,
.social-icon-item:visited {
    text-decoration: none !important;
    outline: none !important;
    border-bottom: none !important;
}

/* Responsive Design */
@media (max-width: 968px) {
    .social-icons-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .social-icons-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .social-icons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}