/* ======================================= */
/* FOOTER */
/* ======================================= */
.footer{
    position: relative;
    
    color: var(--light);
    
    background: url("../images/bg/footer-bg.webp") center center / cover no-repeat;
    
    z-index: 1;
}

.footer-inside{
    padding-top: 10px;
    
    background-color: rgba(0,0,0,0.8);
}

.footer-logo-container{
    margin-top: -104px;
}

.footer-logo{
    display: block;
    
    width: 188px;
    margin: 0 auto;
    
    background: url("../images/footer-logo.svg") center center / 100% no-repeat;
}

.footer-logo:before{
    content: "";
    
    display: block;
    padding-top: 100%;
}

.footer-body{
    max-width: 820px;
    margin: 0 auto;
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-info{
    display: flex;
    justify-content: space-between;
}

.footer-info__col{
    padding: 0 10px;
}

.contact-info{
    display: inline-flex;
    align-items: center;
    
    color: var(--light);
    font: 400 15px/1.362 var(--font);
}

.contact-info--link{
    white-space: nowrap;
}

.contact-info__icon{
    line-height: 0;
    
    margin-right: 8px;
}

.contact-info__label p:not(:first-child){
    margin-top: 5px;
}

.info-icon{
    width: 26px;
    height: 26px;
}

.info-icon.line{
    fill: var(--primary);
}

.info-icon.outline{
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.2381;
    stroke-miterlimit: 10;
}

.social{
    font-size: 0;
    line-height: 0;
    text-align: center;
}

.social__col{
    display: inline-block;
    
    padding: 0 20px;
}

.social__link{
    display: block;
    
    line-height: 0;
    
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px var(--common);
    background-color: rgba(255,255,255,0.8);    
}

.icon-elem{
    width: 40px;
    height: 40px;
}

.icon-elem.line{  
    fill: var(--common);
}

.icon-elem.line.vk{
    fill: #07f;    
}

.icon-elem.line.wh{
    fill: #00c200; 
}

.icon-elem.line.tg{
    fill: #2ba0d9; 
}


@media screen and (min-width: 1025px){
    .social__link{
        transition: background-color var(--dur) ease-in-out;
    }
    
    .social__link:hover{
        background-color: var(--light);
    }
}

.copyrights{
    font-size: 14px;
    line-height: 19px;
    text-align: center;
}

@media screen and (max-width: 1024px){
    .footer-logo-container{
        margin-top: -70px;
    }
    
    .footer-logo{
        width: 120px;
    }
}

@media screen and (max-width: 767px){
    .footer-info{
        display: block;
    }
    
    .footer-info__col:not(:first-child){
        padding-top: 24px;
    }
}

@media screen and (max-width: 374px){
    .social__col{
        padding: 0 10px;
    }
}

@media screen and (min-width: 1025px){
    .whatsapp-button{
        display: none;
    }
}

.whatsapp-button{
    position: fixed;
    left: 20px;
    bottom: 20px;
    
    width: 65px;
    height: 65px;
    
    border-radius: 50%;
    box-shadow: 0 19px 38px 0 rgba(34, 36, 43, .3);
    background: url(../images/icons/wp.svg) center center / 46px no-repeat #1bd741;
    
    z-index: 10;
}

.whatsapp-button:active{
    transform: translateY(1px);
}