.social {
    position: fixed;
    left: 0;
    top: 220px;
    display: flex;
    z-index: 1000; 
}
.social ul {
    list-style: none;    
}
.social ul li img{
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 8px 10px;
    text-decoration: none; 
    border: 1px solid #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: aak 500ms ease;
}
.social ul li .icon-index{background: #143470;}
.social ul li .icon-facebook{background: #143470;}
.social ul li .icon-tiktok{background: #143470;}
.social ul li .icon-whatsapp{background: #143470;}
.social ul li .icon-linkedin{background: #143470;}
.social ul li .icon-youtube{background: #143470;}
.social ul li .icon-mail{background: #143470;}


.social ul li img:hover {
    padding: 10px 20px;   
    ;
}
.social ul li .icon-index:hover{background: #ff6600}
.social ul li .icon-facebook:hover{background: #002970}
.social ul li .icon-tiktok:hover{background: #24f5ee}
.social ul li .icon-whatsapp:hover{background: #25d366}
.social ul li .icon-linkedin:hover{background: #0787BD}
.social ul li .icon-youtube:hover{background: #A93335}
.social ul li .icon-mail:hover{background: #ff6600}


@media (min-width:420px) and (max-width: 960px){
 .social {
    position: fixed;
    left: 0;
    top: 220px;
    display: flex;
    z-index: 100; 
}
.social ul {
    list-style: none;    
}
.social ul li img{
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 6px 8px;
    text-decoration: none; 
    border: 1px solid #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: aak 500ms ease;
}
.social ul li .icon-index{background: #143470;}
.social ul li .icon-facebook{background: #143470;}
.social ul li .icon-tiktok{background: #143470;}
.social ul li .icon-whatsapp{background: #143470;}
.social ul li .icon-linkedin{background: #143470;}
.social ul li .icon-youtube{background: #143470;}
.social ul li .icon-mail{background: #143470;}


.social ul li img:hover {
    padding: 6px 12px;
    background: #000;
    
}
.social ul li .icon-index:hover{background: #ff6600}
.social ul li .icon-facebook:hover{background: #002970}
.social ul li .icon-tiktok:hover{background: #24f5ee}
.social ul li .icon-whatsapp:hover{background: #25d366}
.social ul li .icon-linkedin:hover{background: #0787BD}
.social ul li .icon-youtube:hover{background: #A93335}
.social ul li .icon-mail:hover{background: #ff6600}
}
@media (min-width:0) and (max-width: 420px){
 .social {
    position: fixed;
    left: 0;
    top: 220px;
    display: flex;
    z-index: 100; 
}
.social ul {
    list-style: none;    
}
.social ul li img{
    display: inline-block;
    color: #fff;
    background: #000;
    padding: 4px 6px;
    text-decoration: none; 
    border: 1px solid #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: aak 500ms ease;
}
.social ul li .icon-index{background: #143470;}
.social ul li .icon-facebook{background: #143470;}
.social ul li .icon-tiktok{background: #143470;}
.social ul li .icon-whatsapp{background: #143470;}
.social ul li .icon-linkedin{background: #143470;}
.social ul li .icon-youtube{background: #143470;}
.social ul li .icon-mail{background: #143470;}


.social ul li img:hover {
    padding: 4px 10px;
    background: #000;
    
}
.social ul li .icon-index:hover{background: #ff6600;}
.social ul li .icon-facebook:hover{background: #002970}
.social ul li .icon-tiktok:hover{background: #24f5ee}
.social ul li .icon-whatsapp:hover{background: #25d366}
.social ul li .icon-linkedin:hover{background: #0787BD}
.social ul li .icon-youtube:hover{background: #A93335}
.social ul li .icon-mail:hover{background: #ff6600}
}