/* Start Footer  */
footer{
    padding-top: 700px;
}
footer .container > img{
    position: absolute;
    bottom: -30px;
    left: -133px;
    z-index: -1;
}
footer .container{
    direction: ltr;
    width: 531px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
footer .social{
    display: grid;
    grid-template-columns: repeat(2, minmax(70px, 1fr));
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    justify-items: start;
    padding: 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
footer .social a{
    text-decoration: none;
    color: #fff;
}
footer .social a i{
    margin-right: 10px;
    font-size: 15px;
}
footer .container .box1{
    background-color: #FB5058;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -60px;
    left: -58px;
    border-radius: 8px;
    z-index: -1;
    overflow: hidden;
}
footer .container .box1 svg{
    width: 100%;
    height: 100%;
    transform: translateX(-50px);
}
footer .container .box2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #4A4A4A;
    top: -100px;
    right: 155px;
    border-radius: 10px;
    z-index: -2;
    overflow: hidden;
}
footer .container .box2::before,
footer .container .box1::before{
    content: "";
    background: url(../images/bg-footer.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width:660px) {
    footer .social{
        background: #000;
    }
    footer .container > img{
        display: none;
    }
}
@media (max-width:400px) {
    footer .container .social{
        grid-template-columns: auto;
    }
    footer .container{
        width: 80%;
    }
}
/* End Footer  */