.footer{
    background-color: #192d36;
    background-blend-mode: overlay;
    background-size: cover;
    padding-inline: 50px;
    padding-top: 50px;
    color: #ffffff;
}
.footer h4{
    font-size: 1.5vw;
}
.footer-wrap{
    margin-bottom: 5vw;
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
}
.footer ul{
   padding-left: 0vw;
}
.footer li{
    margin-bottom: 1vw;
    font-size: 1vw;
}
.footer-one ul, .footer-two ul, .footer-three ul, .footer-four ul{
    list-style-type: none;
}
.footer a{
    text-decoration: none;
    color: #ffffff;
}
.fooIcon{
    width: 1.5vw;
    height: 1.5vw;
}

.social a{
    text-decoration: none;
    font-size: 2.5vw;
    transition: .5s ease;
    color:#3784db;
    text-shadow: var(--boxShadow);
}
.social a:hover{
    color: #ffffff;
}
.social p{
    width: 30vw;
    font-size: 1.2vw;
}
.foo-hr{
    margin: 0;
    padding: 0;
    color: #2a4a58;
}
.copy_right{
    flex: 100%;
    text-align: center;
    background-color: #0f2027;
    padding-inline: 50px;
    padding-block: 20px;
}
.copy_right code{
    font-size: 1vw;
    color: #ffffff;
}
/* ---------------------------------------------------- screen 751 px--------  */
@media screen and (max-width: 751px){
   .footer{
    padding-inline: 20px;
}
.footer h4{
    font-size: 3.5vw;
}
.footer-wrap{
    grid-template-columns: auto auto;
    justify-content:space-around;
}
.footer li{
    font-size: 2vw;
}

.fooIcon{
    width: 2vw;
    height: 2vw;
}

.social a{
    font-size: 3.5vw;
}
.social p{
    width: 35vw;
    font-size: 2vw;
}
.copy_right{
    padding-inline: 20px;
}
.copy_right code{
    font-size: 2vw;
}
}
/* ---------------------------------------------------- screen 500 px--------  */
@media screen and (max-width: 500px){
    .footer-wrap{
        grid-template-columns: auto;
        justify-content:space-between;
    }
    .footer h4{
        font-size: 5.6vw;
    }
    .footer li{
        font-size: 4vw;
    }
    
    .fooIcon{
        width: 3.6vw;
        height: 3.6vw;
    }
    
    .social a{
        font-size: 8vw;
    }
    .social p{
        width: 100%;
        font-size: 4vw;
    }
    .copy_right{
        padding-inline: 20px;
    }
    .copy_right code{
        font-size: 3vw;
    }
}