body{
    background:url("../images/bg.webp") center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

section , footer{
    overflow: hidden;
    max-width: 100%;
    height: auto;
    padding: 30px 0px;
    margin-top: 70px;
}

ul{
    list-style: none;
    padding: 0px;
}

li{
    list-style: none;
    cursor: pointer;
}

a{
    text-decoration: none !important;
}

h4{
    font-family: 'Tajawal', sans-serif;
    font-size: 22px;
    color: #333
}

p{
    font-family: 'Cairo';
    line-height: 28px;
}

img{
    max-width: 100%;
    height: auto;
}

button{
    box-sizing: border-box;
    height: 40px;
    text-align: center;
}

hr{
    background-color: #03AAEB;
    height: 5px;
    width: 100px;
    border-radius: 5px;
}

/* scroll to top */
.scrollTop{
    position: fixed;
    background-color : #ddd;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ddd;
    right: 4%;
    bottom: 10px;
    z-index: 999;
    padding: 5px;
    transition: all 0.4s ease-in-out 0s;
    opacity: 0;
}
.scrollTop span a{
    font-size: 14px;
    font-family: 'Cairo';
    color: #03AAEB;
    text-transform: uppercase;
    padding: 3px;
}
/*end the scroll */

/*start the whatsapp */
.whatsapp{
    background-color: transparent;
    width: auto;
    height: 50px;
    position: fixed;
    left: 2%;
    bottom: 15px;
    z-index: 9999;
}
/*end the whatsapp */
/*start the yafta section */
.yafta {
    margin-top: 0px;
}
.yafta img{
    border: 2px solid #03AAEB;
}
/*start css to the header */
header{
    width: 100%;
    height: auto;
    overflow: hidden;
    top: 0px;
}
header .top-header{
    background-color: #03AAEB;
    padding : 5px 0px;
    text-align: right
}
header .top-header ul li{
    display: inline-block;
    margin-right: 12px;
}
header .top-header ul li a{
    color: #fff;
    font-size: 11px;
}
.navbar{
    background-color: #fff;
    width: 100%;
    height: auto;
    padding: 10px 30px;
    max-width: 100%;
    border-radius: 0px !important
}
.navbar .navbar-header button{
    background-color: transparent;
    border : 1px solid #03AAEB;
}
.navbar .navbar-header button span{
    background-color: #03AAEB
}
.navbar .navbar-collapse {
    float: left;
    margin-left: 0;
}
.navbar .navbar-collapse  li a{
    color: #2B2D34;
    font-size: 15px;
    font-weight: bold;
    transition: all .3s;
    font-family: 'Tajawal', sans-serif;
        padding: 21px 4px !important;
}
.navbar .navbar-collapse  li a:hover{
    background-color: transparent;
    color: #03AAEB;
    transition: .5s ease-in-out
}
.navbar .navbar-collapse  li:last-child{
    background-color: #03AAEB;
}
.navbar .navbar-collapse  li:last-child a{
    color: #fff
}
.navbar .navbar-collapse  li:last-child:hover{
    background-color: #0E6B9F;
    transition: .3s
}
.navbar .navbar-collapse  li:last-child:hover a{
    color: #fff;
    transition: .3s 
}
@media only screen and (max-width: 767px) {
    .navbar .collapse{
        margin-top: -5px;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin-right: 0px;
    }
    .navbar .navbar-collapse {
        background-color: #0E6B9F;
        float: right;
        width: 100%;
        margin-top: 30px;
    }
    .navbar .navbar-collapse  li{
        width: 100%;
        height: 50px;
        padding: 0px 10px;
        border-bottom: 1px dotted #fff
    }
    .navbar .navbar-collapse  li a{
        color: #fff
    }

}
/*
@media screen and (max-width: 874px) and (min-width: 768px){
    .navbar .navbar-brand img{
        margin-right: 250px !important; 
        margin-top: -10px;

    }
    .navbar .collapse{
        margin-left: 100px;
    }
}
@media screen and (max-width: 479px) {
    .navbar .navbar-brand{
        margin-top: -5px;
    }
    .navbar .navbar-brand img{
        max-width: 100%;
        width: 100px;
        height: auto ;
        margin-right: 0px;
    }
}
/*start css to the wrap section */
.wrap{
    background: url('../images/pexels-photo-433313.jpeg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    margin-top: -20px !important; 
    text-align: right;
    padding :0px !important;
}
.wrap .inside-wrap{
    background: rgba(0,0,0,.6);
    background-size: cover;
    width: 100%;
    height: auto;
    margin-top: -20px !important;
}
.wrap .row{
    margin: 160px 0px;
}
.wrap h2{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
}
.wrap p{
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    margin : 25px 0px;
    font-size: 17px;
}
.wrap button{
    width: 160px;
    height: 60px;
    margin:10px;
}
.wrap button:first-of-type{
    background-color: #03AAEB;
    border: 1px solid #03AAEB;
}
.wrap button:first-of-type a{
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
}
.wrap button:first-of-type:hover{
    background-color: #fff;
    transition: .5s ease-out;
    border: 1px solid #fff
}
.wrap button:first-of-type:hover a{
    color: #0E6B9F;
    transition: .5s ease-out
}
.wrap button:last-of-type{
    background-color: #fff;
    border: 1px solid #fff;
}
.wrap button:last-of-type a{
    color: #0E6B9F;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
}
.wrap button:last-of-type:hover{
    background-color: #0E6B9F;
    transition: .5s ease-out;
    border: 1px solid #0E6B9F
}
.wrap button:last-of-type:hover a{
    color: #fff;
    transition: .5s ease-out
}
button.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

/*start css to the reason section */
.reason{
    text-align: center;
}
.reason h2{
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    margin: 20px 0px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase
}
.reason .row{
    margin-top: 30px;
}
.reason iframe{
    max-width: 100%;
    margin: 20px 0px;
    border: 5px dotted #03AAEB;
    box-shadow: 2px 2px 4px #03AAEB;
}
.reason .why{
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #fff;
    width: 100%;
    max-width: 100%;
    height: 350px;
    padding: 20px;
    margin-top: 20px;
}
.reason i{
    margin: 20px 0px;
    font-size: 40px;
    color: #03AAEB
}
.reason h5{
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    margin : 20px 0px;
    color: #010101;
    font-weight: bold;
}
.reason p{
    font-size: 12px;
    margin: 15px 0px;
}
.reason .why:hover{
    box-shadow: 2px 2px 4px #03AAEB;
    transition: .5s;
}
/*start css to the gallery section */
.gallery{
    background: url('../images/Group 238.jpg') center no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
.gallery h2{
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    margin: 20px 0px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.gallery p{
    margin-top: 20px;
    text-align: center;
}
.gallery .row{
    margin-top: 45px;
}
.gallery .row .col-md-4{
    margin-top: 30px;
}
.gallery .box{
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #F9FAFB;
    border: 1px solid #F9FAFB;
    text-align: right;
    padding: 30px 20px;
    margin-top: 20px;
    box-shadow: 2px 2px 4px #ccc;
}
.gallery .box:hover{
    box-shadow: 2px 2px 4px #ddd
}
.gallery .box h6{
    color: #02AEF0;
    font-weight: bold;
    text-align: center;
    font-size: 25px;
    font-family: 'Tajawal', sans-serif;
}
.gallery .box span{
    background-color: #03AAEB;
    color: #fff;
    width: auto;
    height: auto;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin : 25px 0px;
    border-radius: 2px;
    font-family: 'Tajawal', sans-serif;
}
.gallery .box ul{
    margin: 40px 0px;
}
.gallery .box ul li{
    font-family: 'Cairo';
    font-size: 14px;
    margin-top: 10px;
    color: #333;
    border-bottom: 1px dotted #2B2D34;
    padding: 5px;
}
.gallery .box ul li:nth-child(1),
.gallery .box ul li:nth-child(3),
.gallery .box ul li:nth-child(5),
.gallery .box ul li:nth-child(7),
.gallery .box ul li:nth-child(9),
.gallery .box ul li:nth-child(11)
{
    background-color: #F2F4F6
}
.gallery .box a{
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
}
.gallery .box button{
    background-color: #0E6B9F;
    border: 1px solid #0E6B9F;
    width: 100%;
    height: 40px;
    color: #fff;
    border-radius: 20px;
}
.gallery .box button:hover {
    background-color: #f9f9f9;
    color: #0E6B9F;
}
.gallery .box button:hover a{
    color: #0E6B9F
}
.gallery .box.two ul{
    margin-top: 40px;
}
.gallery #compare{
    text-align: center;
    vertical-align: middle;
    background-color: #0E6B9F;
    width: 160px;
    height: 45px;
    border-radius: 5px;
    border : 1px solid #0E6B9F;
    margin-bottom: 30px;
}
.gallery #compare a{
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 18px;
    padding: 7px 0px;
}
/*start css to the share section */
.share{
    text-align: center;
    font-family: 'Tajawal', sans-serif;
}
.share .share-box{
    padding: 25px 0px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
}
.share .share-box h2{
    color: #03AAEB;
    font-weight: bold;
}
.share .share-box ul li{
    margin-top: 10px;
    cursor: auto;
}
.share-box ul li:first-child{
    color: #0E6B9F;
    font-weight: bold;
    margin-top: 20px !important;
}
/*start css to the our-projects section */
.our-projects{
    text-align: center;
}
.our-projects h2{
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    margin: 20px 0px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.our-projects i{
    color: #03AAEB;
    margin: 20px 0px;
}
.our-projects .row{
    margin-top: 20px;
}
.our-projects .project-box{
    margin-top: 20px;
    max-width: 100%;
    text-align: center;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ddd;
    padding-bottom: 15px;
}
.our-projects .project-box img{
    width: 100%;
    max-width: 100%;
}
.our-projects .project-box a{
    color: #000;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
}
.our-projects .project-box #second{
    margin: 5px 0px !important;
    display: block;
    text-align: center;
}
.our-projects .project-box a:last-child{
    color: #03AAEB;
}
/*start css to the team-work section */
.team-work{
    text-align: center;
}
.team-work h2{
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
    font-size: 25px;
}
.team-work p{
    color: #777;
    font-family: 'Cairo';
    font-size: 16px;
    line-height: 30px;
    margin : 15px 0px;
}
.team-work .chat-box{
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    margin-top: 20px;
    padding: 20px 0px;
    box-shadow: 2px 2px 4px #f6f6f6;
}
.team-work .chat-box h4{
    color: #0E6B9F;
    font-size: 25px;
    margin:10px 0px;
    font-family: 'Tajawal', sans-serif;
}
.team-work .chat-box li{
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    letter-spacing: .5px;
}
.team-work .chat-box li i{
    color: #0E6B9F;
    font-size: 20px;
}
/*start css to the contact section */
.contact img{
    margin: 70px 0px;
    height: 250px;
    text-align: center;
}
.contact h2{
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
    font-size: 25px;
}
.contact p{
    color: #777;
    font-family: 'Cairo';
    font-size: 14px;
    line-height: 30px;
    margin : 15px 0px;
}
.contact a{
    color: #03AAEB;
}
.contact form{
    margin-top: 70px;
}
.contact form input , 
.contact form textarea{
    outline: none;
    width: 100%;
    height: 45px;
    border-radius: 40px;
    resize: none;
    background: #f9fafb;
    padding: 17px 30px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    transition: all .3s;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    font-family: 'Tajawal', sans-serif;
}
.contact form textarea{
    height: 100px;
}
.contact button{
    text-align: center;
    background-color: #27BEE1;
    border: 1px solid #27BEE1;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    max-width: 100%;
    width: 160px;
    height: 50px;
    font-size: 25px;
    border-radius: 40px;
}
/*==================================================
=================== about page ====================*/
.about h2{
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    margin: 20px 0px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #03AAEB;
}
.about i{
    color: #03AAEB;
    text-align: center;
    margin : 10px 0px;
}
.about p{
    color: #2B2D34;
    font-size: 16px;
    line-height: 26px;
    font-family: 'Tajawal', sans-serif;
    margin: 15px 0px;
}
/*=================================================
================= compare page ====================*/
.banner .row:first-child{
    text-align: center;
    margin : 5px 0px;
}
.banner h3{
    text-align: center;
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-size: 32px;
    font-weight: bold
}
.banner a{
    color: #0E6B9F;
    font-size: 17px;
    font-family: 'Cairo';
    margin: 30px 10px;
}
.banner span{
    display: block;
    color: #fff;
    margin: 30px 0px;
    font-size: 17px;
    letter-spacing: .3px;
    font-family: 'Cairo';
    background-color: #03AAEB;
    padding: 10px 0px;
    box-sizing: border-box;
    border: 1px solid #03AAEB;
    box-shadow: 2px 2px 4px #03AAEB;
}
.banner table{
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 7px;
    margin-top: 25px;
    border-collapse: collapse;
}
table tr:nth-child(1),
table tr:nth-child(5),
table tr:nth-child(7),
table tr:nth-child(9),
table tr:nth-child(11),
table tr:nth-child(13),
table tr:nth-child(15),
table tr:nth-child(17),
table tr:nth-child(19),
table tr:nth-child(21),
table tr:nth-child(23),
table tr:nth-child(25),
table tr:nth-child(27),
table tr:nth-child(29),
table tr:nth-child(31),
table tr:nth-child(33),
table tr:nth-child(35),
table tr:nth-child(37),
table tr:nth-child(39),
table tr:nth-child(41),
table tr:nth-child(43),
table tr:nth-child(45),
table tr:nth-child(47),
table tr:nth-child(49),
table tr:nth-child(51),
table tr:nth-child(53) ,
table tr:nth-child(55) ,
table tr:nth-child(57) ,
table tr:nth-child(59) ,
table tr:nth-child(61) , 
table tr:nth-child(63) ,
table tr:nth-child(65) ,
table tr:nth-child(67) ,
table tr:nth-child(69) ,
table tr:nth-child(71) ,
table tr:nth-child(73) ,
table tr:nth-child(75) ,
table tr:nth-child(77) ,
table tr:nth-child(79) ,
table tr:nth-child(81) ,
table tr:nth-child(83) ,
table tr:nth-child(85) 
{
    background-color: #F9FAFB;
}
.banner table tr:first-child th{
    color: #03AAEB;
    font-size: 20px;
}
.banner table th{
    color: #333;
    font-size: 14px;
    font-family: 'Tajawal', sans-serif;
}
.banner table #address{
    color: #212121
}
table, th, td {
    border: 1px solid rgb(233, 230, 230);
    padding: 5px;
    font-family: 'Tajawal', sans-serif;
    width: auto;
}
table #links a{
    font-size: 11px;
    margin: 4px;
    color: #777;
    border-right: 1px dotted #0E6B9F;
}
.banner table h5{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #03AAEB;
    padding: 5px 0px;
}
table tr:nth-child(3){
    background-color: #F2F4F6
}
.baqa4{
    box-shadow: 2px 2px 4px #f6f6f6;
    overflow: hidden;
    background-color: #fff;
    padding: 20px;
}
.baqa4 ul{
    text-align: left;
    margin-top: 20px;
}
.baqa4 ul li{
    list-style: none;
    text-align: left;
    font-size: 17px;
    margin-top: 7px;
    cursor: auto;
}
.baqa4 p{
    text-align: right;
    font-size: 17px;
    margin-top: 10px;
}
.banner .row:last-child a{
    color: #fff;
    font-size: 16px;
    font-family: 'Tajawal', sans-serif;
}
.banner button{
    background-color: #03AAEB;
    border: 1px solid #03AAEB;
    text-align: center;
    width: 160px;
    height: 50px;
    margin-top: 50px;
    color: #fff;
}
.banner button:hover{
    background-color: transparent;
    color: #03AAEB;
    transition: .5s ease-out;
}
.banner h4{
    color: #03AAEB;
    text-align: center;
    font: 20px;
    font-weight: bold;
    margin-top: 20px;
}
.banner p{
    color: #2B2D34;
    font-size: 16px;
    font-family: 'Tajawal', sans-serif;
    text-align: center;
    margin: 15px 0px;
}
.banner .box{
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #F2F4F6;
    text-align: center;
    padding: 10px;
    box-shadow: 2px 2px 4px #ddd;
    max-width: 100%;
    height: auto;
    margin-top: 50px;
}
.banner .box h5{
    font-family: 'Tajawal', sans-serif;
    color: #03AAEB;
    font-size: 16px;
    font-weight: bold;
}
.banner .box span{
    font-size: 15px;
    font-family: 'Tajawal', sans-serif;
}
/*================================================
================== stablish page ================*/
.yafta h6{
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    font-weight: bold;
    margin-top: 50px;
}
.yafta span{
    color: #212121;
    font-family: 'Tajawal', sans-serif;
    font-size: 18px;
}
.stablish form{
    background-color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 5px;
    overflow: hidden;
    margin : 15px 0px;
    text-align: center
} 
.stablish form img{
    margin: 7px 0px;
}
.stablish form h4{
    color: #03AAEB;
    font-size: 25px;
    margin: 10px 0px;
}
.stablish form p{
    color: #212121;
    font-size: 17px;
    letter-spacing: .5px;
    margin: 10px 0px;
    font-family: 'Tajawal', sans-serif;
}
.stablish form label{
    font-family: 'Tajawal', sans-serif;
    color: #212121;
    margin: 10px 0px;
    text-align: right;
    float: right
}
.stablish form input{
    border-radius: 0px;
    box-sizing: border-box;
    color: #2B2D34;
    font-family: 'Cairo';
    border: 1px solid #ccc;
    height: 35px;
    border-radius: 2px;
    box-shadow: 2px 2px 4px #ddd;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px
}
.stablish form span{
    color: #212121;
    font-size: 12px;
    letter-spacing: .1px;
    margin: 5px 0px;
    display: block;
    font-family: 'Tajawal', sans-serif;
}
.stablish form button{
    width: 100%;
    float: right;
    margin : 10px 0px;
    text-align: center;
    color: #fff;
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    font-weight: bold 
}
.stablish form .form-group button{
    background-color: #0E6B9F;
    border: 1px solid #0E6B9F;
}
.stablish form .form-group button:hover{
    background-color: #f9f9f9;
    color: #0E6B9F;
    transition: .2s ease-in-out
}
.stablish form button{
    background-color: #03AAEB;
    border: 1px solid #03AAEB;
}
.stablish form button:hover{
    background-color: #f9f9f9;
    color: #03AAEB;
    transition: .2s ease-in-out
}
.stablish form select{
    width: 100%;
    height: 40px;
    margin-top: 10px;
    padding: 10px 0px;
}
.stablish form select option{
    margin-top: 12px;
    font-family: 'Cairo';
    font-size: 14px;
}
/*=======================================================
================ types page and the intership page and friends page ============================*/
.types .types-top{
    background-color: #fff;
    width: 100%;
    height: auto;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
}
.types .types-top h2{
    color: #03AAEB;
    font-size: 30px;
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
    margin: 10px 0px;
}
.types .types-top a{
    background-color: #03AAEB;
    color: #fff;
    padding: 10px;
    margin: 15px 0px !important;
    font-family: 'Tajawal', sans-serif;
}
.types .row{
    margin: 20px;
}
.types .conta{
    background-color: #f9f9f9;
    border: 1px solid #F2F4F6;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 25px;
}
.types .conta:hover {
    border-bottom: 2px solid #03AAEB;
    transition: .5s;
}
.types .conta .img-box img{
    max-width: 100%;
    height: auto;
}
.types .conta .text-box {
    padding : 15px;
}
.types .conta .text-box h4{
    color: #212121;
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0px;
}
.types .conta .text-box button{
    background-color: #03AAEB;
    border: 1px solid #03AAEB;
    width: 100%;
    height: 40px;
    text-align: center;
    margin: 10px 0px;
}
.types .conta .text-box button a{
    color: #fff;
    font-size: 15px;
    font-family: 'Tajawal', sans-serif;
}
.types .conta button:hover{
    background-color: #fff;
    transition: .5s ease-in
}
.types .conta button:hover a{
    color: #03AAEB;
    transition: .5s ease-in-out
}
.friends .conta{
    background-color: #fff;
    padding: 10px;
    text-align: center;
    box-shadow: 2px 2px 4px #27BEE1;
    font-family: 'Tajawal', sans-serif;
}
.friends .conta img{
    width: 120px;
    height: 60px !important;
}

/*=====================================================
===================== drop page ===================*/
.drop{
    text-align: center;
}
.drop .row{
    margin-top: 30px;
}
.drop h4{
    color: #03AAEB;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
}
.drop i{
    color: #03AAEB;
    margin-top: 15px;
}
.drop p{
    font-family: 'Tajawal', sans-serif;
    text-align: right;
    font-size: 17px;
    line-height: 27px;
    margin: 15px 0px;
}
.drop a{
    text-align: right;
    color: #0E6B9F;
    font-size: 17px;
    margin:10px 0px;
}
.drop img{
    border: 3px solid #03AAEB;
    margin-top: 25px;
}
.drop img:hover{
    box-shadow: 2px 2px 4px #03AAEB;
    transition: .5s;
}
/*==========================================================
============== invest-yallayaaraby page ====================*/
.invest h2{
    color: #03AAEB;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    text-align: center;
    margin-bottom: 5px;
}
.invest i{
    color: #03AAEB;
}
.invest p{
    margin: 10px 0px;
    text-align: right;
    font-size: 16px;
    letter-spacing: .2px;
    line-height: 30px;
}
.invest h5{
    background-color: #fff;
    color: #03AAEB;
    border: 1px solid #fff;
    box-sizing: border-box;
    font-size: 25px;
    font-family: 'Tajawal', sans-serif;
    padding: 10px;
    margin: 20px 0px;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-shadow: 2px 2px 4px #f6f6f6;
}
.invest a{
    font-size: 16px;
    color: #0E6B9F;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
    margin: 5px 0px !important;
}
.invest li{
    font-family: 'Tajawal', sans-serif;
    color: #212121;
    margin: 10px 0px;
    font-size: 16px;
}
/*==========================================================
======================= bank page =========================*/
.bank {
    margin-top: 0px;
}
.bank h4{
    color: #03AAEB;
    font-size: 35px;
    margin: 20px;
    font-family: 'Tajawal', sans-serif;
}
.bank i{
    color: #03AAEB;
    margin-top: 10px;
}
.bank p{
    font-size: 17px;
    font-family: 'Tajawal', sans-serif;
    margin-top: 20px;
}
.bank h5{
    font-family: 'Tajawal', sans-serif;
    color: #03AAEB;
    font-size: 20px;
    margin: 20px 0px;
}
.bank ul li{
    margin-top: 10px;
    font-size: 17px;
    font-family: 'Tajawal', sans-serif;
    list-style-type: decimal;
}
.bank .box{
    background: #ddd;
    max-width: 100%;
    height: 120px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
}
.bank .box h6{
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-size: 17px;
    margin : 10px 0px;
}
.bank .box a{
    margin-top: 20px;
}
/*===========================================================
================== condition page =========================*/
.condition h2{
    color: #2B2D34;
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    font-weight: bold;
    margin: 10px 0px;
}
.condition h4{
    color: #03AAEB;
    margin-top: 20px;
    font-weight: bold;
}
.condition p{
    font-size: 16px;
    color: #2B2D34;
    line-height: 30px;
}
.condition ul li{
    list-style-type: disc;
    margin: 5px 0px;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
}
/*=====================================================
===================== payment page ===================*/
.payment{
    text-align: right;
    margin-top: 10px;
}
.payment h4{
    color: #03AAEB;
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
    font-size: 30px;
    margin: 10px 0px;
}
.payment p{
    color: #2B2D34;
    font-size: 17px;
    font-family: 'Tajawal', sans-serif;
    margin: 15px 0px;
}
.payment i{
    margin: 2px;
    color: #03AAEB;
}
.payment h5 , 
.payment h6{
    font-family: 'Tajawal', sans-serif;
    color: #03AAEB;
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0px;
}
.payment li{
    font-family: 'Tajawal', sans-serif;
    color: #212121;
    font-size: 17px;
}
.payment .row{
    margin: 20px 0px;
}
/*=========================================================
=================== video-introduction page ===============*/
.video-introduction{
    text-align: center;
    margin-top: 25px;
}
.video-introduction h2{
    color: #03AAEB;
    font-size: 40px;
    font-family: 'Tajawal', sans-serif;
    margin:15px 0px;
}
.video-introduction p{
    color: #777;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
    margin: 10px 0px;
}
.video-introduction iframe{
    margin: 20px 0px;
    max-width: 100%;
    border: 5px dotted #03AAEB;
    box-shadow: 2px 2px 4px #03AAEB;
}
/*=========================================================
 ================= product page ============================*/
.product .row{
    margin-top: 30px;
}
 .product h4{
    text-align: center;
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-size: 32px;
    font-weight: bold;
    margin-top: 10px;
}
.product p{
    font-size: 17px;
    font-family: 'Tajawal', sans-serif;
}
.product p:first-of-type{
    margin-top: 30px;
}
.product h5{
    color: #03AAEB;
    font-size: 18px;
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
    margin-top: 30px;
}
.product img{
    max-width: 100%;
    height: 150px;
    margin-top: 50px;
    width: 100%;
}
.product h6{
    color: #03AAEB;
    font-size: 15px;
    margin-top: 20px;
    font-family: 'Tajawal', sans-serif;
}
/*===========================================================
/* start css to the footer section */
footer{
    background-color: #FBFBFC;
    padding-bottom: 0px;
}
footer h4{
    margin: 20px 0px;
    font-weight: bold
}
footer hr{
    text-align: right;
    margin-right: 0px;
    width: 40px;
    height: 2px;
    background-color: #03AAEB;
    margin: 7px 0px;
}
footer p{
    color: #212121;
    font-size: 14px;
    margin-top: 15px;
}
footer .social{
    margin-top: 15px;
}
footer .social li{
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: #02AEF0;
    text-align: center;
    padding: 7px;
    border-radius: 50%;
    margin: 2px;
}
footer a{
    color: #2B2D34;
}
footer .social li a i{
    color: #fff
}
footer .social li:hover {
    background-color: rgb(197, 224, 224);
    transition: all .3s ease-in-out;
}
footer .social li:hover a i{
    color: #02AEF0;
    transition: .3s ease-in-out;
}
footer ul{
    margin-top: 20px;
}
footer ul li {
    margin-top: 12px;
    font-family: 'Cairo';
    font-size: 12px;
}
footer #information li i{
    color: #03AAEB;
    font-size: 15px;
    padding-left: 10px;
}
footer .footer-banner{
    text-align: center;
    padding: 10px 0px;
    background-color: rgb(220, 225, 230);
    margin-top: 65px;
}
footer .footer-banner h6{
    font-size: 14px;
    font-family: 'Tajawal', sans-serif;
    color: #333
}
footer .footer-banner li{
    display: inline-block;
    margin: 5px;
}
footer .footer-banner li a{
    color: #0E6B9F;
    font-family: 'Tajawal', sans-serif;
}



.yafta{
    text-align: center;
}
.yafta h2{
    font-family: 'Tajawal', sans-serif;
    color: #03AAEB;
    font-size: 40px;
    margin: 20px 0px;
}
.yafta .fa-star{
    color: #27BEE1;
    margin: 5px;
}
.yafta .phone{
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 10px;
    margin-top: 20px;
}
.yafta .phone li{
    display: inline-block;
    cursor: auto;
    margin: 15px;
}
.yafta h6{
    color: #03AAEB;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: bold;
    margin-top: 15px;
}
.yafta span{
    color: #212121;
    font-family: 'Tajawal', sans-serif;
    font-size: 16px;
}
.yafta .phone i{
    color: #0E6B9F;
}


.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 9px !important;
}



/* css to the bck section */

.bck-x{
    margin-top: 0px;
}
iframe{
    max-width: 100%;
}
/*================================================
================ information page ======================*/

.descreption h3{
    color: #1A5AB4;
    font-family: 'Tajawal', sans-serif;
    font-size: 28px;
}
.descreption 
p{
    color: #012;
    font-size: 16px;
    font-family: 'Tajawal', sans-serif;
    line-height: 30px;
    margin: 7px;
}

.descreption li{
    font-family: 'Tajawal', sans-serif;
    color: #012;
    font-size: 16px;
    margin: 3px 0px;
}
.descreption #sub{
    padding: 10px;
}
.descreption #sub li{
    color: #29303B;
    font-family: 'Tajawal', sans-serif;
}
.descreption h5{
    color: #3873AE;
    font-size: 20px;
    margin-top: 20px;
    font-family: 'Tajawal', sans-serif;
}
.descreption h6{
    color: #276597;
    font-family: 'Tajawal', sans-serif;
    margin-top: 25px;
    font-size: 17px;
}

.descreption #trust{
    margin: 10px 7px 25px 0px
}
.descreption #content li{
    list-style: decimal;
}

.descreption h4{
    color: #1A5AB4;
    font-family: 'Tajawal', sans-serif;
    font-size: 20px;
    margin: 20px 0px;
}


.code{
position: absolute;
    z-index: 55555555;
    font-size: 25px;
    left: 13%;
    top: 56%;
    width: 74%;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;


}

.namearabic{
    position: absolute;
    z-index: 55555555;
    font-size: 36px;
    left: 13%;
    top: 38%;
    /* background: #000; */
    width: 75%;
    text-align: center;
        font-weight: bold;
    text-transform: capitalize;

 }
 
 
 

.code2{

position: absolute;
    z-index: 55555555;
    font-size: 43px;
    left: 31%;
    top: 48%;
    width: 65%;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    /* background: #000;*/


}


.code3{

position: absolute;
    z-index: 55555555;
    font-size: 32px;
    left: 31%;
    top: 58%;
    width: 65%;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    /* background: #000;*/


}

.namearabic2{
 position: absolute;
    z-index: 55555555;
    font-size: 53px;
    left: 28%;
    top: 29%;
    /* background: #000; */
    width: 70%;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;

 }