@import url("//fonts.googleapis.com/earlyaccess/droidarabickufi.css");
body{
    margin: 0;
    padding: 0;
    background-color: #ecf0f1;
    color: #333;
    font-family: 'Droid Arabic Kufi', sans-serif;
    font-weight: normal;
    font-size: 14px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .2s ease-in-out;
}
*::selection {
    color: #fff; background: rgb(81, 188, 255);
}
*::-moz-selection {
    color: #fff; background: rgb(81, 188, 255);
}
.clear-fix:after{
    content: "";
    display: block;
    clear: both;
}
.dir-rtl{direction: ltr;}
.dir-ltr{direction: rtl;}
.wrapper{width: 90%;margin: auto;}
.btn{
    text-decoration: none;
    padding: 8px 10px;
    display: inline-block;
    border: 2px solid #444;
    color: #444;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
}
.btn-blue{
    background-color: #48a2df;
    border: 2px solid #48a2df !important;
    color: #fff !important;
}
.btn-blue:hover{
    border-color: #2980b9 !important;
    background-color: #2980b9;
}
.btn-blue-o{
    border: 2px solid #48a2df !important;
    color: #48a2df !important;
}
.btn-blue-o:hover{
    background-color: #48a2df;
    color: #fff !important;
}
.btn-white{
    background-color: #fff;
    border: none !important;
    color: #48a2df !important;
}
.btn-white:hover{box-shadow: 1px 1px 1px #2980b9;color: #2980b9 !important;}
.bd{border:1px dashed #ddd;}
.center{text-align: center;padding: 10px;}
.color-1{color: #c0392b; font-weight: bold;}
.v-h-l{
    float: right;
    width: 50%;
    padding: 20px;
}
.v-h-l iframe{
    width: 100%;
    height: 300px;
    border:0px solid rgba(0, 0, 0, .4);
    border-radius: 5px;
}
.v-h-r{
    text-align: right;
    color: #444;
    direction: rtl;
    float: right;
    width: 50%;
    padding: 20px;
}
.v-h-ll{
    text-align: right;
    color: #444;
    direction: rtl;
    float: right;
    width: 50%;
    padding: 20px;
}
/* Pop-up*/
.popup{
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 999999;
    background-color: rgba(0, 0, 0, .7);
    overflow: auto;
}
.popup .pop_inside{
    background-color: #fff;
    width: 50%;
    margin: 10% auto;
    position: relative;
    padding: 0px 0px 30px 0px;
    box-shadow: 0px 0px 10px #000;
}
.pop_img{
    background: url(../images/pop-up-box.jpg) no-repeat;
    background-size: cover;
    padding: 50px 0px 10px 0px;
}
.pop_img img{width: 100%;}
.popup .pop_inside .fa{
    position: absolute;
    width: 25px;
    height: 25px;
    top: -10px;
    right: -10px;
    background-color: #999;
    display: block;
    border-radius: 50%;
    padding: 3px;
    cursor: pointer;
}
.pop_txt{text-align: center;}
.pop_txt p{color: #555;padding: 20px;font-size: 14px;text-align: center;margin: 0px;}

/* Header */
.topfix{height: 117px;}
.menu{
    color: #444;
    font-size: 30px;
    float: right;
    margin-top: -60px;
    color: #124C87;
    cursor: pointer;
    display: none;
}
header{
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    border-bottom: 1px solid rgba(44, 62, 80,.1);
    position: fixed;
}

header .h-top {background-color: #2c3e50;}
header .h-top .h-top-l{float: left;}
.lang{
    text-align: center;
    color: rgba(255, 255, 255, .3);
    padding: 5px;
    cursor: pointer;
    position: relative;
}
.lang-choose{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 30%;
    opacity: 0;
}
.lang-choose a{
    display: block;
    padding: 5px;
    background-color: rgba(44, 62, 80,.9); 
    color: #fff;
    text-decoration: none;
}
.lang-choose a:hover{background-color: #fff;color: #333;}
.lang:hover .lang-choose{
    top: 100%;
    opacity: 1;
}
header .h-top .h-top-r{float: right;}
header .h-top .h-top-r a{
    text-align: center;
    color: rgba(255, 255, 255, .3);
    float: right;
    padding: 5px;
    width: 38px;
}
header .h-top .h-top-r a:last-of-type{
    border-right-width: 1px;
}
header .h-top .h-top-r a:hover{    
    color: rgba(255, 255, 255, 1);
}

header .h-bot{
    background-color: rgba(255, 255, 255, 1);
    padding: 5px;
}
header .h-bot .h-bot-l{float: right;width: 100px;padding: 10px;}
header .h-bot .h-bot-l img{width: 100%;}
header .h-bot .h-bot-r{float: right;}
.nav{list-style: none;padding: 0px;margin: 0px;}
.nav .nav-item{
    float: right;
    cursor: pointer;
}
.nav .nav-item .nav-link{
    text-decoration: none;
    margin: 15px 0px 15px 10px; 
    padding: 8px;
    display: block;
    color: #2980b9;
    font-weight: bold;
    font-size: 12px;
}
.nav .nav-item .nav-link:first-of-type{padding: 8px 0px 8px 8px;}
.nav .nav-item .nav-link:hover{color: #666;}
.login{
    border: 1px solid rgba(0, 0, 0, .3);
}
.nav-in{
    padding: 0px;
    margin: 0px;
    position: absolute;
    background-color: rgba(0, 0, 0, .7);
    margin-left: -8%;
    display: none;
    z-index: 200;
    border: 1px solid #2c3e50;
}
.nav-in li{
    list-style: none;
}
.nav-in li a{
    direction: rtl;
    text-align: right;
    text-decoration: none;
    padding: 8px;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}
.nav-in li a:hover{
    color: #2980b9;
    background-color: #fff;
}
/* .nav .nav-item:hover .nav-in{display: block;} */

/* Slider */
.sl{
    background: url(../images/bgvideo.png) #48a2df no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    min-width: 100%;    
    height: 560px;
    overflow: hidden;
}
.proname{
    text-align: center;
    font-size: 20px;
    color: #c0392b;
}
.sl .bgvideo{
    position: absolute;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    margin-top: -130px;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}
.sl .sl-all{
    background-color: rgba(44, 62, 80,.6);
    position: absolute;
    z-index: 10;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    padding: 100px 0px 0px 0px;
}
.sl .left{
    float: right;
    width: 50%;
}
.sl .left img{width: 100%;}
.sl .right{
    float: right;
    width: 45%;
    direction: rtl;
}
.sl .right h1{
    color: #fff;
    margin: 0px;
    padding: 0px 0px 10px 0px;
    font-size: 30px;
}
.down-ref{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 1000;
    font-size: 50px;
    bottom: 40px;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
}
.down-ref i{display: block;margin-top: 5px;}
/* Slider inside */
.slis,.slis2,.slis3,.slis4,.slis5,.slis5{
    padding: 15px 0px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    direction: rtl;
}
.slis{background: url("../images/pattern.png") #637A91;}
.slis2{background: url("../images/pattern.png") #2980b9;}
.slis3{background: url("../images/pattern.png") #EB585C;}
.slis4{background: url("../images/pattern.png") #27ae60;}
.slis5{background: url("../images/pattern.png") #8e44ad;}
.slis6{background: url("../images/pattern.png") #1abc9c;}

.box{
    position: relative;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px auto;
}
.box-num{
    position: absolute;
    background-color: #e74c3c;
    width: 30px;
    height: 30px;
    color: #fff;
    text-align: center;
    padding-top: 3px;
    border-radius: 50%;
    right: -10px;
    top: -10px;
}
.main-headng{
    color: #444;
    font-size: 25px;
    padding: 20px 10px;
    margin: 0px;
    text-align: center;
    direction: rtl;
}
.main-headng-i{
    color: #fff;
    font-size: 25px;
    padding: 20px 10px;
    margin: 0px;
    text-align: center;
    direction: rtl;
}
.main-p{
    color: #666;
    padding: 0px 40px 40px 40px;
    margin: 0px;
    text-align: center;
    direction: rtl;
    line-height: 1.7;
}
.main-p-i{
    color: #fff;
    padding: 0px 40px 40px 40px;
    margin: 0px;
    text-align: center;
    direction: rtl;
    line-height: 1.7;
}
.main-p-i-fix{
    width: 70%;
    margin: auto;
}
.box-cont{padding: 5px;}
.box-cont .img-t{
    width: 70%;
    margin: 30px auto;
    display: block;
}
.box-cont h2{
    color: #48a2df;
    font-size: 16px;
    padding: 5px;
    margin: 0px;
    text-align: center;
    direction: rtl;
}
.box-cont h3{
    color: #48a2df;
    font-size: 25px;
    padding: 5px;
    margin: 0px 0px 10px 0px;
    text-align: center;
    direction: rtl;
}
.box-cont-4{width: 25%;padding: 5px;float: right;}
.box-cont-3{width: 33.3%;padding: 5px;float: right;}
.box-cont-2{width: 50%;padding: 5px;float: right;}
.box-cont-in{}
.box-cont-in .icon{
    display: block;
    text-align: center;
    font-size: 70px;
    padding: 20px 0px 10px 0px;
    width: 100%;
}
.box-cont-in p{
    color: #555;
    font-size: 14px;
    padding:20px;
    margin: 0px;
    text-align: justify;
    direction: rtl;
    height: 137px;
    overflow: hidden;
    margin-bottom: 20px;    
}
.box-back .box-cont-in{
    box-shadow: 1px 1px 1px #bbb; 
}
.box-back .box-cont-in p{
    height: auto;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}
.readMore{
    direction: rtl;
    color: #2980b9;
    font-weight: bold;
    cursor: pointer;
    display: block;
    padding: 20px;
    margin-top: -35px;
}

.ex-l{ 
    margin: 0px;
    padding: 0px 0px;
    list-style: none;
    text-align: center;
}
.ex-r{ 
    margin: 0px;
    padding: 0px;
    list-style: none;
    direction: rtl;
}

.ex-l li{ 
    padding: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 1px #bbb;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 48%;
}
.ex-r li{ 
    padding: 20px;
    background-color: #eee;
    box-shadow: 1px 1px 1px #bbb;
    margin-bottom: 5px;
}
.ex-l li:nth-of-type(2n){
    color: #2980B9;
}
.ex-l li:hover{
    box-shadow: 0px 0px 5px #333;
    transition: all .2s ease-in-out;
    transform: scale(1.1);
}
.lang-pic{

}
.lang-pic img{
    width: 100%;
}
.lang-txt{
    
}
.section-w{
    background-color: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;    
    padding: 10px 10px 30px 10px;
}
.section-b{
    background-color: #eee;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;    
    padding: 10px 10px 30px 10px;
}
.section{
    padding: 10px 10px 30px 10px;
    margin: 10px auto;
}
.seie{
    font-family: Verdana, Geneva, sans-serif;
}
.main-img{
    width:100%;
    padding: 10px;
    text-align: center;
}
.main-img img{width: 60%;}
.htop:hover{
    box-shadow: 0px 0px 15px #999;
}
.box-danger{
    background-color: #e74c3c;
    padding: 20px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    border: 2px solid #c0392b;
    direction: rtl;
}
.box-info{
    background-color: #c1e4f2;
    padding: 20px;
    color: #637a91;
    border-radius: 3px;
    border: 1px solid #637a91;
    direction: rtl;
}


.hero{
    background: url('../images/pattern.jpg') repeat;
}
.hero-cover{
    padding: 30px 0px;
    background-color: rgba(41, 128, 185, .6);
}
.hero-index .box-cont-4{
    border-radius: 5px;
}
.hero-index .box-cont-4 h2{
    color: #fff;
}
.hero-index .box-cont-4 a{
    text-decoration: none;
}
.hero-index .box-cont-4:hover{
    background-color: #fff;
}
.hero-index .box-cont-4:hover img{
    transition: all .2s ease-in-out;
    transform: scale(1.2);
}
.hero-index .box-cont-4:hover h2{
    color: #444;
}

table{
    width: 100%;
    border-collapse: collapse;
}
td{
    margin: 0px;
    padding: 5px;
    border:1px solid #ccc; 
}
.td-l{
    background-color: #f2f2f2;
    text-align: center;
    font-size: 25px;
}

/* Form */
.box-form{
    width: 60%;
    margin: auto;
    border-radius: 3px;
    overflow: hidden;
}
.box-form img{width: 100%;float: right;}
.box-form .box-form-in{
    padding: 20px;
    background-color: #fff;
}
.form{direction: rtl;}
.form-group{
    padding: 5px 0px;
    overflow: hidden;
}
.form label{display: block;margin-bottom: 5px;}
.form input,.form textarea{
    display: block;
    width: 100%;
    padding: 8px;
    border:2px solid #ccc;
    border-radius: 3px;
    outline: none;
    direction: rtl;
}
.form textarea{height: 150px;}
.form input:focus, .form textarea:focus{
    background-color: #eee;
    border-color: #48a2df;
}
button{
    font-family: 'Droid Arabic Kufi', sans-serif; 
}
.fogt{
    float: right;
    text-decoration: none;
    color: #333;
}
.fogt:hover{text-decoration: underline;}

.video-in{
    width: 100%;
    height: 300px;
}
/* footer */
footer{
    position: relative;
    background-color: #2c3e50;
    padding: 20px 0px;
    color: #fff;
    direction: rtl;
    text-align: center;
}
footer .up{
    display: block;
    text-align: center;
    position: absolute;
    top:-20px;
    background-color: #222;
    width: 55px;
    font-size: 30px;
    left:50%;
    transform: translateX(-50%);
    color: #fff;
    cursor: pointer;
}
footer .up:hover{background-color: #2C3E50}
footer .social{
    font-size: 25px;
    color: #fff;
    padding: 6px 10px;
    display: inline-block;
}
footer .social:hover{
    background-color: #48a2df;
}

/**/
.v-container{
    text-align: right;
}
.v-item{}
.v-item h2{
    background-color: #fff;
    padding: 20px;
    font-size: 18px;
    color: #3498db;
    margin: 0px;
    overflow: hidden;
    cursor: pointer;
    border-top: 1px solid #eee;
}
.v-item h2 span{float: right;}
.v-item-v{
    background-color: rgba(0, 0, 0, .3);
    padding: 20px;
}
.v-item-v#active{display: block;}
.v-item-v-l{float: right;width: 50%;}
.v-v{}
.v-v iframe{
    width: 100%;
    height:300px;
    border:15px solid rgba(0, 0, 0, .4);
    border-radius: 5px;
}
.v-v video{width: 100%;border:3px solid #fff;border-radius: 3px;}
.v-item-v-r{float: right;width: 50%;color: #fff;padding: 0px 20px}
.v-control{}
.v-full{
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .5)
}

.cert{text-align: center;padding: 20px;}
.cert2{text-align: right;padding: 20px;direction: rtl;}

.lec-vid{
    margin: 20px 0px;
    text-align: center;
}
.lec-vid iframe{
    width:70%;
    height: 400px;
    margin: auto;
    border:15px solid rgba(0, 0, 0, .4);
    border-radius: 5px;
}


.contact-info{
    direction: rtl;
}

.imgInBox{
    background-color: #DCEFF3;
    width: 100%;
    padding: 20px 0px;
    height: 500px;
}
.imgInBox img{width: 100%;}
.all-images{padding: 30px 0px;}
.all-images img{width: 20%;padding: 10px;float: left;}
.all-images img:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.2);
}

.free-lectures .box-cont-4{
    padding: 10px;
}
.free-lectures .box-cont-4 img{
    width: 100%;
    cursor: pointer;
}
.free-lectures iframe{
    display: none;
}
.popup{
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}
.popup .popup-in{
    width: 60%;
    margin: 10% auto auto auto;
    background-color: #fff;
    box-shadow: 0px 0px 5px #222;
    padding: 10px;
    margin-bottom: 10px;
}
.popup .popup-in iframe{width: 100%;height: 350px;}

.langpics li{
    width: 32% !important;
}

.nav-footer{list-style: none;padding: 0px;margin: 0px;text-align: center;}
.nav-footer .nav-item{display: inline-block;}
.nav-footer .nav-item .nav-link{
    text-decoration: none;
    padding: 5px;
    display: block;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
}
.nav-footer .nav-item .nav-link:hover{text-decoration:underline;}

.certificates img{width: 800px !important;margin:auto;display: block;}