/* socail media */
.social-media-container-modern{
    width: 100%;
    margin: 0 auto;
    min-height: 400px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.social-item{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.social-item.up{
    transform: translateY(-70px);
}
.social-item.down{
    animation: social-item-down-anime 2s infinite alternate-reverse ease;
}
@keyframes social-item-down-anime {
    from{
        transform: translateY(-10px);
    }
    to{
        transform: translateY(10px);
    }
}
.social-item::after{
    content: "";
    width: 160px;
    height: 160px;
    background-color: rgba(255, 255, 255, 0.312);
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    transition: .7s;
    transform: translateY(120px) translateX(60px);
}
.social-item:hover::after{
    transform: translateY(0) translateX(0);
}
.social-item>svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 4rem;
    color: var(--color-white);
}
.si-telegram{
    background-color: var(--telegram-color);
}
.si-instagram{
    background-image: var(--instagram-color);
}
.si-facebook{
    background-color: var(--facebook-color);
}
.si-world{
    background-color: var(--world-color);
}
.si-twitter{
    background-color: var(--twitter-color);
}
@media only screen and (max-width: 1200px) {
    .social-item{
        width: 100px;
        height: 100px;
    }
    .social-item::after{
        content: "";
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.312);
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        transition: .7s;
        transform: translateY(60px) translateX(60px);
    }
}
/* /social media */