/*==========================================================
    FLOATING SOCIAL MEDIA
==========================================================*/

.container-media{
    position:fixed;
    top:50%;
    right:0;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:99999;
}

/*==========================
    BOTÓN
==========================*/

.social-btn{
    position:relative;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    overflow:visible;
    border-radius:30px 0 0 30px;
    transition:.35s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.20);
}

.social-btn i{
    font-size:28px;
    transition:.45s ease;
    z-index:3;
}

/*==========================
    LABEL
==========================*/

.social-label{

    position:absolute;

    right:58px;
    top:50%;

    transform:translateY(-50%) translateX(25px);

    padding:12px 18px;

    border-radius:30px 0 0 30px;

    white-space:nowrap;

    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;

    color:#fff;

    opacity:0;

    pointer-events:none;

    transition:.35s ease;

}

/*==========================
    HOVER GENERAL
==========================*/

.social-btn:hover{

    transform:translateX(-8px);

}

.social-btn:hover i{

    transform:rotate(360deg) scale(1.15);

}

.social-btn:hover .social-label{

    opacity:1;
    transform:translateY(-50%) translateX(0);

}

/*==========================================================
    FACEBOOK
==========================================================*/

.facebook{
    background:#1877F2;
}

.facebook .social-label{
    background:#1877F2;
}

.facebook:hover{
    box-shadow:0 0 25px rgba(24,119,242,.65);
}

/*==========================================================
    WHATSAPP
==========================================================*/

.whatsapp{
    background:#25D366;
}

.whatsapp .social-label{
    background:#25D366;
}

.whatsapp:hover{
    box-shadow:0 0 25px rgba(37,211,102,.65);
}

/*==========================================================
    INSTAGRAM
==========================================================*/

.instagram{
    background:linear-gradient(
        45deg,
        #F58529 0%,
        #FEDA77 18%,
        #DD2A7B 45%,
        #8134AF 70%,
        #515BD4 100%
    );
}

.instagram .social-label{
    background:linear-gradient(
        45deg,
        #F58529,
        #DD2A7B,
        #8134AF
    );
}

.instagram:hover{
    box-shadow:0 0 25px rgba(221,42,123,.65);
}

/*==========================================================
    LINKEDIN
==========================================================*/

.linkedin{
    background:#0A66C2;
}

.linkedin .social-label{
    background:#0A66C2;
}

.linkedin:hover{
    box-shadow:0 0 25px rgba(10,102,194,.65);
}

/*==========================================================
    TIKTOK
==========================================================*/

.tiktok{
    background:linear-gradient(
        135deg,
        #25F4EE 0%,
        #000000 35%,
        #000000 65%,
        #FE2C55 100%
    );
}

.tiktok .social-label{
    background:linear-gradient(
        90deg,
        #25F4EE,
        #000000,
        #FE2C55
    );
}

.tiktok:hover{

    box-shadow:
        0 0 6px #25F4EE,
        0 0 12px #FE2C55,
        0 0 20px rgba(0,0,0,.35);

}

/*==========================================================
    YOUTUBE
==========================================================*/

.youtube{
    background:#FF0000;
}

.youtube .social-label{
    background:#FF0000;
}

.youtube:hover{
    box-shadow:0 0 25px rgba(255,0,0,.65);
}

/*==========================================================
    X (TWITTER)
==========================================================*/

.twitter{
    background:#000;
}

.twitter .social-label{
    background:#000;
}

.twitter:hover{
    box-shadow:0 0 25px rgba(0,0,0,.55);
}

/*==========================================================
    EMAIL
==========================================================*/

.email{
    background:linear-gradient(
        135deg,
        #EA4335,
        #FBBC05,
        #34A853,
        #4285F4
    );
}

.email .social-label{
    background:#EA4335;
}

.email:hover{
    box-shadow:0 0 25px rgba(234,67,53,.60);
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:768px){

    .container-media{
        gap:10px;
    }

    .social-btn{

        width:50px;
        height:50px;

    }

    .social-btn i{

        font-size:24px;

    }

    .social-label{

        right:50px;
        font-size:13px;
        padding:10px 15px;

    }

}

@media(max-width:480px){

    .container-media{

        gap:8px;

    }

    .social-btn{

        width:46px;
        height:46px;

    }

    .social-btn i{

        font-size:22px;

    }

    .social-label{

        right:46px;
        font-size:12px;
        padding:8px 14px;

    }

}