:root{
    --tajawal: "Tajawal", sans-serif;
    --cairo: "Cairo", sans-serif;
    --white: #fff;
    --black: #000;
    --blue: #005D99;
    --lightblue: #0D5B94;
    --skyblue: #6ADBFF;
    --offwhite: #F5F5F5;
}
*{
    padding: 0;
    margin: 0;
    direction: rtl;
}
a{
    text-decoration: none;
}
.footer{
    direction: rtl;
    background-color: var(--blue);
    text-align: right;
    padding: 5vh 0 2vh;
    font-weight: 400;
}
.footer-container{
    border-bottom: 1px solid var(--offwhite);
    padding: 0 5vh 3vh;
    font-family: var(--tajawal);
}
.footer-row{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 80%;
    margin: 0 auto;
}
.footer-col{
    margin: 0 auto;
    width: 17.5%;
}
.footer-col:first-child{
    width: 35%;
}
.footer-col:last-child{
    width: 30%;
}
.footer-logo{
    width: 125px;
}
.footer-description{
    color: var(--white);
    margin-top: 5px;
    font-weight: 300;
    font-size: 14px;
    width: 75%;
}
.footer-title{
    font-weight: 700;
    text-transform: capitalize;
    color: var(--white);
    font-size: 18px;
    font-family: var(--tajawal);
}
.footer-list{
    list-style: none;
    padding: 0;
    text-align: right;
}
.footer-list-contact{
    text-align: right;
}
.footer-list li{
    color: var(--white);
    margin: 1vh 0;
    font-size: 14px;
    font-weight: 300;
}
.footer-social-list-col{
    text-align: center;
}
.footer-social-list{
    list-style: none;
    margin: 45px auto 15px;
    padding: 0;
}
.footer-social-list li{
    display: inline-block;
    margin: auto 1vh;
}
.footer-social-icon{
    color: var(--white);
    font-size: 25px;
}
.footer-social-title{
    color: var(--white);
    font-size: 13px;
    font-weight: 400;
}
.copyright{
    font-family: var(--tajawal);
    text-align: center;
    color: var(--white);
    margin: 2vh auto 1vh;
    font-size: 14px;
    direction: ltr;
    font-weight: 300;
}
@media only screen and (max-width : 650px){
    .footer{
        text-align: center;
    }
    .footer-row{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        margin: 0 auto;
    }
    .footer-col{
        margin: 1vh auto;
        width: 100%;
    }
    .footer-col:first-child{
        width: 100%;
    }
    .footer-col:last-child{
        width: 100%;
    }   
    .footer-description{
        width: 85%;
        margin: 15px auto;
    }
    .footer-social-list{
        margin: 25px auto 15px;
    }
    .footer-list{
        text-align: center;
    }
}