/* Start global rules */
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box
}
body{    background-color: #fafafa}
.bodyen{
    font-family: 'Roboto', sans-serif;
}
ul {
    padding-left: 1rem;
}
.dirtl{direction: rtl}

img{width: 100%}
h1, .h1{color: #e84393}
.bodyar .navbar-nav .nav-link, .bodyar .navbar-brand {
    font-family: 'Aref Ruqaa', serif;
}
/* End global rules */

/* Start Bootstrap styling */
.navbar-brand {
    background: -webkit-linear-gradient(#74b9ff,#0652dd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-nav .active,
.navbar-light .navbar-nav .nav-link:hover{outline: 0;   color: #0984e3 !important}
.navbar-light .navbar-brand,
.navbar-toggler:focus,
.btn-check:focus+.btn,
.btn:focus{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none
}
@media(max-width:767px){
    .navbar-nav{text-align: center;   flex-direction: column-reverse}
    .navbar-collapse{margin-top: 2rem}
}
/* End Bootstrap styling */
section{    background-color: #f5f6fa}
.contact{height: 61vh}
    .containner{   margin: 1px auto }
    .text-pri{color:#0652DD !important}
    .fa-brands{font-size: 1rem}
    button.btn {color: #fafafa;    width: 150px}
    .nav-link:focus,
    .nav-link:hover {color: #1877f2}
    .github:focus,
    .github:hover{color:#6e5494}
    .linkedin:focus,
    .linkedin:hover{color:#f5987e}
    .deviant:focus,
    .deviant:hover{color:#05cc47}
    .pinterest:focus,
    .pinterest:hover{color:#e60023}
    .outline-success{border-color: #2ecc71}
    .outline-success:hover {
        color: #fff;
        background-color: #2ecc71;
        border-color: #2ecc71
    }
    .list-group-item{ 
        background-color: #f5f6fa !important;
        border-bottom: 1px solid #0652dd1c !important
    }
    p, li{color: #636e72}
    h5.text-secondary {  font-size: 1rem}
    .pro-img{border: 1px solid #19a3bb}
    @media(min-width:768px){
        .containner{max-width: 75%}
    }
    @media(min-width:991px){
        .containner{max-width: 65%}
        .skills .pro-img, .free .pro-img{height: 100%}
        .free{height: 250px}
    table tbody tr{height: 55px;   line-height: 55px}
    }
    @media(min-width:1200px){
        .containner{max-width: 55%}
    }
@media(max-width:990px){
    .upper{
        background:url(../../images/aboutm1.jpg) no-repeat;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        background-size:cover;
        height: 100vh;
        color:#fafafa;
        height: 50vh
    }
    .upper img{display: none}
}
 footer{
    background-color: #0652DD;
    color: #dfe6e9;
    font-size: .9rem
}