/* assets/css/social-icons.css - From Uiverse.io by _7754 */
.social-container-uiverse {
    display: flex;
    column-gap: 28px;
    justify-content: center;
    padding: 20px 0;
}

.social-container-uiverse .icon {
    display: inline-flex;
    width: 60px;
    height: 60px;
    text-decoration: none;
    font-size: 25px;
    outline: 2px solid white;
    border-radius: 50%;
    transition-property: outline-offset, outline-color, background-color;
    transition-duration: 0.25s;
    color: white;
}

.social-container-uiverse .icon:hover {
    outline-offset: 4px;
}

.social-container-uiverse .icon svg {
    margin: auto;
    width: 31px;
}

.social-container-uiverse .icon-instagram:hover {
    background-color: #e4405f;
    outline-color: #e4405f;
}

/* WhatsApp icon styling */
.social-container-uiverse .icon-whatsapp:hover {
    background-color: #31A73B;
    outline-color: #31A73B;
}

/* Footer Unification */
.footer .social-container-uiverse {
    justify-content: flex-start;
    padding: 10px 0;
}

@media (max-width: 768px) {
    .footer .social-container-uiverse {
        justify-content: center;
    }
}

.social-container-uiverse .icon-dis:hover {
    background-color: rgb(76, 0, 255);
    outline-color: rgb(76, 0, 255);
}

.social-container-uiverse .icon-github:hover {
    background-color: #333;
    outline-color: #333;
}

.social-container-uiverse .icon-in:hover {
    background-color: #0a66c2;
    outline-color: #0a66c2;
}

.social-container-uiverse .icon-twitter:hover {
    background-color: #1da1f2;
    outline-color: #1da1f2;
}

.social-container-uiverse .icon:hover svg {
    animation: shake 0.25s;
}

@keyframes shake {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-15deg);
    }
}