/*
Theme Name: V1
Theme URI: https://wa.me/201125437161
Author: Ahmed Abou Saif
Author URI: https://wa.me/201125437161
Description: Ahmed Abou Saif 
Version: 1.0

*/


.container {
    width: 100%;
    max-width: 1200px !important;
    position: relative;
    padding: 0;
}

* {
    padding: 0;
    outline: none;
    margin: 0;
}


a {
    text-decoration: none;
    transition: all 0.5s ease 0s;
    outline: none;
    color: #000;
}

a:hover {
    transition: all 0.5s ease 0s;
    outline: none;
    color: #b78f54;
}
ul,ol,li{
    list-style: none;
}


/*@font-face {
font-family:DIN;
font-style:normal;
font-weight:normal;
src:url("fonts/ArbFONTS-DINNEXTLTARABIC-LIGHT-1.ttf") format('truetype')
}
*/

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Dubai';
    src: url('fonts/Dubai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}



body {
    margin: 0;
    padding: 0;
    color: #000;
    /* font-family: Dubai; */
    font-family: Dubai;
    font-size: 16px;
    font-weight: 500;
    text-align: right;
    direction: rtl;
    background: #EEF7FF;
}

/*  */
h1,
h2,
h3,
h4,
h5,
h6{
  font-family: "Dubai";
}

/*  */
header{
    background: #fff;
    padding: 0 0 5px;
    border-bottom: 1px solid #E6E6E6;
    position: sticky;
    top: 0;
    z-index: 999;
}
header .top{
    color: #fff;
    background: #FFFFFF;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 1) 30%, rgba(13, 35, 65, 1) 30%);
    min-height: 30px;
    display: flex;
    align-items: center;
}
header .top .container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 4px 15px 0;
    padding: 0 140px 0 0;
    min-height: 30px;
}
.box-text{
    min-height: 30px;
    background: linear-gradient(310deg, rgba(255, 255, 255, 1) 10%, rgba(13, 35, 65, 1) 10%);   
}
@media (max-width: 769px) {
    .box-text{
        display: none !important;
    }
    header .top .container{
    padding: 0 0 0;
    background: #194466;
    display: flex;
    justify-content: center;
}
}

.box-text span{
    padding: 0 5px;
}
header .top .container .box{
    display: flex;
    color: #fff;
    direction: ltr;
    align-items: center;
    padding-right: 60px;
}
header .top .container .box ul{
    padding: 0 5px;
    margin: 0 auto 0 0;
    list-style: none;
}
header .top .container .box ul li{}
header .top .container .box ul li a{
    color: #fff;
    border: 1px solid #fff;
    padding: 0px 10px;
    border-radius: 5px;
    font-size: 12px;
}
header .top .container .box ul li a:hover{
    color: #E66039;
    background: #fff;
}
header .top .container .box a{
    color: #fff;
    text-decoration: none;
    outline: none;
    margin: 0 5px;
}
header .top .container .box a:hover{
    color: #E66039;
}
header > .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
}
header > .container img{
    width: auto;
    height: 58px;
}
@media (max-width: 769px) {
 header > .container img{
    height: 38px;
}   
}
header > .container .menuheader{
    display: flex;
    flex-wrap: wrap;
}
header > .container > div{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
}
header > .container .menuheader .topnav{
    display: flex;
    list-style: none;
    padding: 5px 20px 0;
    margin: 0;
}
header > .container .menuheader .topnav li{
    padding: 0 1px;
}
header > .container .menuheader .topnav li a{
    padding: 10px;
    display: flex;
    text-decoration: none;
    outline: none;
    color: #0D2341;
    font-weight: 500;
    font-size: 17px;
}
header > .container .menuheader .topnav li a:hover,
li.current-menu-item a

{
    color: #E66039 !important;
}
@media (max-width: 769px) {
.menuheader{
    position: fixed;
    top: 0;
    right: -320px;
    bottom: 0;
    height: 100vh;
    width: 300px;
    z-index: 999;
    background: #fff;
    padding: 50px 0;
    transition: all 0.5s ease 0s;
    box-shadow: 0 0 10px #ddd;
}
.open{
    right: 0 !important;
transition: all 0.5s ease 0s;

}
.menuheader ul{
    display: flex;
    flex-direction: column;
    width: 100%;
}
}
header > .container .profile{
    background: #E66039;
    border-radius: 5px 15px;
    color: #fff;
    text-decoration: none;
    outline: none;
    margin: 0 10px;
    display: flex;
    height: 43px;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    i{
        margin: 0 5px 0 0;
    }
}
header > .container .profile:hover{
    background: #000;
}
.tel{
    display: flex;
    position: relative;
    padding: 0 50px 0 0;
    color: #000000;
    font-size: 16px;
    flex-direction: column;
    direction: ltr;
}
.tel i{
    width: 43px;
    height: 43px;
    display: flex;
    background-color: #194466;
    background-image: url("img/call.gif");
    background-position: center center;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    align-items: center;
}
.tel strong{
    color: #E66039;
    width: 100%;
    margin: -4px 0 0;
}

.bar{
    width: 30px;
    height: 22px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    position: relative;
    cursor: pointer;
    display: none !important;
}
@media (max-width: 769px) {
    .profile{
        font-size: 0;
        i{
            font-size: 17px;
        }
    }
    .tel{
        width: 44px;
        padding: 0;
        font-size: 0;
        display: flex;
        
        
        strong{
            font-size: 0;
        }
    }
    .bar{
    display: block !important;
}
}

.bar i{
    border-top: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}
/*  */
.hero {
    position: relative;
    padding: 0;
}
.hero video{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    margin: 0 0 -8px;
}
.hero .cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);

}
.hero .cover .container{
    display: flex;
    flex-wrap: wrap;
}
.hero .cover .container .block{
    color: #272727;
    font-size: 18px;
}
.hero .cover .container .block strong{
    color: #194466;
    background-color: #E6603930;
    padding: 1px 15px;
    border-radius: 15px;
}
.hero .cover .container .block h1{
    color: #194466;
    font-weight: 700;
    margin: 5px 0 10px;
    font-size: 36px;
}

.more{
    background-color: #E66039;
    color: #fff;
    border-radius: 5px 15px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    height: 50px;
    min-width: 160px;
    margin: 5px;
    justify-content: center;
    
    i{
        margin: 0 5px 0 0;
    }
}
.more:hover{
    color: #fff;
    background-color: #194466;
}

a.contact{
    color: #194466;
    border-radius: 5px 15px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    height: 50px;
    min-width: 160px;
    margin: 5px;
    justify-content: center;
    border: 1px solid #194466;
    
    i{
        margin: 0 5px 0 0;
    }
}
a.contact:hover{
    color: #fff;
    background-color: #E66039;
    border: 1px solid #E66039;
}
/*  */
.ico{
    position: relative;
    z-index: 9;
    margin: -60px 0 0;
    padding: 0 15px;
}
.ico .container{
    background-color: #fff;
    border: 2px solid #E66039;
    box-shadow: 0px 4px 23.1px 0px #E660394D;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    align-items: center;
}
.ico .container .box{
    padding: 1px 20px;
    display: flex;
    position: relative;
    border-left: 1px solid #D2D2D2;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.ico .container .box:last-child{
    border: none;
}
@media (max-width: 769px) {
    .ico .container .box{
        border: none;
        margin: 5px 0;
    }
}

.ico .container .box i{
    width: 67px;
    height: 67px;
    border: 1px solid #194466;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ico .container .box i img{
    height: 54px;
    width: auto;
}
.ico .container .box h3{
    color: #194466;
    font-size: 18px;
    margin: 0 ;
    font-weight: 500;
    width: calc(100% - 80px);
}
.ico .container .box p{
    margin: 5px 0 00;
    color: #667063;
    font-size: 14px;
    width: 100%;
}
/*  */

.about{
    padding: 40px 10px;
}
.about .container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.about .container .block{
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    color: #667063;
    font-size: 17px;
}
.about .container .block video{
    width: 350px;
    height: 300px;
    max-width: 80%;
/*     object-fit: cover; */
    margin: 0 auto 0 0;
    border-radius: 20px 0 0;
}
.about .container .block > img{
    width: 250px;
    height: 250px;
    border-radius: 20px;
    position: relative;
    margin: 10px 0 0;
    max-width: 100%;
}
.about .container .block h3{
    color: #E66039;
    background-image: url("img/tit.svg");
    background-position: right center;
    background-repeat: no-repeat;
    padding: 0 25px 0 0;
    background-size: 20px auto;
    font-size: 20px;
    font-weight: 700;
}
.about .container .block h1{
    color: #194466;
    font-size: 28px;
    font-weight: 700;
}
.about .container .block p{padding: 0 0 0 4px;}
.about .container .block .see{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
}
.about .container .block .see .box{
    display: flex;
    position: relative;
    flex-wrap: wrap;
}
.about .container .block .see .box:last-child{
    width: 100% !important;
}
.about .container .block .see .box i{
    width: 50px;
    height: 50px;
    border: 1px solid #E6603942;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.about .container .block .see .box i img{
    height: 30px;
    width: auto;
}
.about .container .block .see .box h4{
    font-size: 22px;
    font-weight: 700;
    margin: -50px 60px 20px 0;
    width: 100%;
    color: #E66039;
}
.about .container .block .see .box ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.about .container .block .see .box ul li{
    width: 100%;
    color: #1F1014;
    padding: 4px 30px 2px 0;
    background-image: url("img/li.svg");
    background-repeat: no-repeat;
    background-position: right top 3px;
}

.about .container .block a{
    background-color: #E66039;
    color: #fff;
    border-radius: 5px 15px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    height: 50px;
    min-width: 160px;
    margin: 5px;
    justify-content: center;
    
    i{
        margin: 0 5px 0 0;
    }
}
.about .container .block a:hover{
    color: #fff;
    background-color: #194466;
}
/*  */
section{
    padding: 50px 10px;
    position: relative;
}
.services{}
.services .container{
    background-color: #fff;
    padding: 25px 10px;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.services .container h3{
    color: #E66039;
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
}
.services .container h3:after{
    content: "";
    width: 30px;
    height: 36px;
    background-image: url("img/tit.svg");
    background-size: 100% 100%;
    margin: 0 5px;
    display: inline-block;
}
.services .container h3::before{
    content: "";
    width: 30px;
    height: 36px;
    background-image: url("img/tit.svg");
    background-size: 100% 100%;
    margin: 0 5px;
    display: inline-block;
    transform: rotateY(180deg);
}
.services .container h1{
    color: #0D2341;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 10px;
}
.services .container p{
    color: #808080;
}
.services .container .services-slider{
    padding: 0 30px;
    margin: 20px 0 ;
}

.services-post{
    padding: 10px;
}
.services-post .box{
    position: relative;
    overflow: hidden;
}
.services-post .box a{
    position: relative;
    text-decoration: none;
    border-radius: 0 20px;
    overflow: hidden;
    outline: none;
    display: block;
}
.services-post .box a img{
    width: 100%;
    height: 240px;
    border-radius: 0 20px;
    object-fit: cover;
    transition: all 0.5s ease 0s;
transform: scale(1);
}
.services-post .box a:hover img{
    transition: all 0.5s ease 0s;
transform: scale(1.2);
}
.services-post .box a h4{
    background-color: #fff;
    font-size: 17px;
    padding: 10px 10px;
    text-align: center;
    color: #000;
    border-radius: 0 20px;
    position: absolute;
    bottom: 5px;
    right: 15px;
    left: 15px;
}
/*  */
.owl-prev{
    width: 32px;
    height: 32px;
    background-image: url("img/l.svg");
    background-size: 100% 100%;
    font-size: 0;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -16px;
}
.owl-next{
    width: 32px;
    height: 32px;
    background-image: url("img/r.svg");
    background-size: 100% 100%;
    font-size: 0;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -16px;
}
/*  */
.services-other{
    padding: 15px 20px;
}
.services-other .container{
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    background: initial;
}
.services-other .container .services-all{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
/*  */
.team{
    background-image: url("img/bild.svg");
    background-repeat: repeat-x;
    background-position: center bottom 60px;
    background-size: auto 150px;
    padding-bottom: 0;
}
.team .container{
    background: #FFFFFF;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%) !important;
    padding-bottom: 0;
}
.team-all{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.team-all .box{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    max-width: 20%;
    flex-direction: column;
    align-items: center;
}

.team-all .box:first-child,
.team-all .box:last-child{
    transform: translateY(200px);
}
.team-all .box:nth-child(2),
.team-all .box:nth-child(4){
    transform: translateY(100px);
}
@media (max-width: 769px) {
    .team-all .box{
        width: 100% !important;
        max-width: 100%;
    transform: translateY(0) !important;

    }
    .men{
        margin: 0 auto !important;
    }
}

.men{
    margin: 120px auto 0;
    width: 100%;
    max-width: 650px;
    height: auto;
}



.team-all .box i{
    width: 70px;
    height: 70px;
    border: 1px solid #E6603933;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 15px;
    border-radius: 50%;
    overflow: hidden;
}
.team-all .box img{
    height: 50px;
    width: auto;
}
.team-all .box h5{
   color: #194466;
   font-size: 17px;
   font-weight: 500;
   width: 100%;
   text-align: center;
}
.net{
    margin: -60px 0 0;
    height: 60px;
    background-image: url("img/net.svg");
    background-size: 100% auto;
}
/*  */
.numbers{
    padding: 0 15px;
}
.numbers .container{
    background-color: #081A33 !important;
    border-radius: 20px;
    color: #fff;
    background-image: url("img/n-bg.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 18% auto;
    position: relative;
}
.numbers .container::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("img/n-bg-2.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 18% auto;

}
.numbers .container h1{
    color: #fff;
}
.numbers .container p{
    color: #fff;
}
.numbers .container .num-item{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.numbers .container .num-item .box{
    position: relative;
    display: flex;
    flex-flow: wrap;
    color: #fff;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 200px;
    width: 200px;
    margin: 10px;
    background-image: url("img/num.gif");
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
}
.numbers .container .num-item .box h1{
    color: #E66039;
    font-size: 40px;
    margin: 0;
}
.numbers .container .num-item .box p{
    margin: 0;
}
/*  */
.mange{}
.mange .container{
    background: initial !important;
}
.mange .container .mange-man{
    margin: 40px auto 10px;
    display: flex;
    border: 1px solid #E6603980;
    padding: 0 15px 15px;
    border-radius: 10px;
    flex-direction: column;
    background: #fff;
    align-items: center;
}
.mange .container .mange-man i{
    width: 80px;
    height: 80px;
    border: 1px solid #E6E6E6;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -40px auto 10px;
    background-image: url("img/mange.gif");
    background-repeat: no-repeat;
    background-position:  center center;
    background-size: auto 60px;
    background-color: #fff;
    border-radius: 13px;
}
.mange .container .mange-man img{
    width: auto;
    height: 50px;
}
.mange .container .mange-man h4{
    color: #E66039;
    font-size: 20px;
    font-weight: 600;
}
/*  */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.tabs-buttons{
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 0;
}
@media (max-width: 769px) {
    .tabs-buttons{
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 0;
    overflow-y: scroll;
    width: 360px;
    margin: 0 auto;
}
}


.tabs-buttons .but{
    margin: 5px;
    padding: 10px;
    background: #fff;
    display: flex;
    border: 1px solid #E5E5E5;
    border-radius: 15px;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    width: 100%;
    cursor: pointer;
}
@media (max-width: 769px) {
    .tabs-buttons .but{
    width: 100%;
    min-width: 280px;
}
}

.tabs-buttons .but i{
    width: 53px;
    height: 53px;
    border-radius: 5px;
    border: 1px solid #E6E6E6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tabs-buttons .but img{
    width: auto;
    height: 40px;
}
.tabs-buttons .but span{
    color: #0D2341;
    font-size: 17px;
    font-weight: 600;
    margin: 10px 0;
}
.tabs-buttons .but p{
    margin: 0;
    color: #808080;
    font-size: 13px;
    line-height: 1.3;
}
.tabs-buttons .but.active{
    border-color: #E66039;
}

.tab-pane .box{
    padding: 5px;
}
.tab-pane .box div{
    display: flex;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    color: #0D2341;
    font-size: 20px;
    font-weight: 600;
    border: 1px solid #E5E5E5;
    text-align: center;
    flex-direction: column;
    align-items: center;
}
.tab-pane .box div span{
    color: #E66039;
    font-size: 30px;
    width: 44px;
    height: 44px;
    background-color: #FADFD7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tab-pane .box div p{
    margin: 0;
    color: #0d2341;
}
/*  */
.clint{
    padding-top: 0;
}
.clint .container{}
.clint .container .clint-slider{
    padding: 0 40px;
}
.clint .container .clint-slider .box{
    padding: 5px;
}
.clint .container .clint-slider .box span{
    height: 170px;
    width: 100%;
    border: 1px solid #1944661F;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #fff;
}
.clint .container .clint-slider .box img{
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}
/*  */
.projects{
    padding: 10px;
}
.projects .container{
    background: initial !important;
}
.pro-slider{
    padding: 0 40px;
    margin: 20px 0;
}
.projects-post{
    padding: 3px;
}
.projects-post a{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    border: 1px solid #19446626;
    background: #fff;
    border-radius: 15px;
    padding: 9px;
}
.projects-post a > img{
    width: 100%;
    height: 220px;
    border-radius: 15px;
    object-fit: cover;
}
.projects-post a .logoo{
    background-color: #fff;
    padding: 6px;
    height: 60px;
    width: 100px;
    border-radius: 5px;
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.projects-post a .logoo img{
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
}
.projects-post a h4{
    color: #24201C;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
    width: 100%;
}
.projects-post a .text{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.map{
    background-image: url("img/map.svg");
    background-repeat: no-repeat;
    background-position: right top;
    text-align: right;
    background-size: 30px auto;
    padding: 0 40px 0 0;
    color: #194466;
    width: 100%;
    margin: 0;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: rtl;
    font-size: 12px;
}
.area{
    background-image: url("img/area.svg");
    background-repeat: no-repeat;
    background-position: right top;
    text-align: right;
    background-size: 30px auto;
    padding: 0 40px 0 0;
    color: #194466;
    width: 100%;
    margin: 0 0 3px;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: rtl;
    font-size: 12px;
}
/*  */
.crit{
    padding-top: 0;
}
.crit .container{
    display: flex;
    flex-wrap: wrap;
}
.crit .container .nav-tabs{
    border: none;
    width: 100%;
    display: flex;
    justify-content: center;
}
.crit .container .nav-tabs .nav-link {
    color: #667063;
    font-size: 17px;
    font-weight: 600;
    padding: 20px 0;
    border: 1px solid #E5E5E5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 5px;
    border-radius: 15px;
    width: 120px;
}
.crit .container .nav-tabs .nav-link i{
    width: 35px;
    height: 35px;
    background-image: url("img/tab1.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 0 5px;
    filter: grayscale(1);
}
.crit .container .nav-tabs #nav-profile-tab i{
    background-image: url("img/tab2.svg");
}
.crit .container .nav-tabs #nav-contact-tab i{
    background-image: url("img/tab3.svg");
}

.crit .container .nav-tabs .nav-link.active{
    color: #000;
    border: 2px solid #E66039;

}
.crit .container .nav-tabs .nav-link.active i{
    filter: initial !important;
}
.tab-content{
    margin: 20px auto ;
}
.crit-item{
    padding: 10px;
}
.crit-item img{
    width: 100%;
    height: auto;
}
.owl-buttons{
    display: flex;
    justify-content: center;
}
.crit .owl-prev{
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    margin: 4px;
}
.crit .owl-next{
        position: relative;
    left: auto;
    top: auto;
    right: auto;
    margin: 4px;
}
/*  */
.faq {
    padding-top: 20px;
}
.faq .container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.faq .container img{
    width: 100% !important;
    height:auto !important;
    margin: -30px 0 0 !important;
}

/*  */


/* الاتجاه RTL */
.custom-accordion {
    direction: rtl;
    width: 100%;
}

/* إلغاء الشكل الافتراضى */
.custom-accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 14px;
    overflow: hidden;
}

/* الزرار */
.custom-accordion .accordion-button {
    background: #fff;
    color: #194466;
    font-weight: 700;
    font-size: 18px;
    padding: 20px;
    box-shadow: none;
    border-radius: 14px !important;
    display: flex;
    text-align: right;
    justify-content: space-between;
}

/* لما يكون مفتوح */
.custom-accordion .accordion-button:not(.collapsed) {
    background: #194466;
    color: #fff;
    border-radius: 14px 14px 0 0 !important;
}

/* إزالة ظل bootstrap */
.custom-accordion .accordion-button:focus {
    box-shadow: none;
}

/* جسم الإجابة */
.custom-accordion .accordion-body {
    background: #194466;
    color: #fff;
    padding: 0 20px 20px 20px;
    font-size: 16px;
    line-height: 1.7;
}

/* السهم */
.custom-accordion .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(180deg);
    filter: brightness(0) saturate(100%);
}

/* لما يكون مفتوح نخليه لفوق */
.custom-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
    filter: brightness(0) invert(1);
}
/*  */

.contactus{
    padding-top: 20px;
}
.contactus .container{
    justify-content: center;
    background: linear-gradient(180deg, rgba(53, 131, 238, 0.1) 0%, rgba(53, 131, 238, 0) 100%) !important;

}
.block-all{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
.contactus .container .block{
    padding: 20px;
}
.contactus .container .block h5{
    color: #E66039;
    font-size: 26px;
    font-weight: 600;
}
.coll{
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 15px 0;
}
.coll a{
    margin: 5px 0;
    display: flex;
    width: 100%;
    outline: none;
    text-decoration: none;
    background-color: #29A84B;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    align-items: center;
}
.coll a:hover{
    opacity: 0.8;
}
.coll a i{
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 5px;
    margin: 0 0 0 15px;
    background-image: url("img/wa.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px auto;
}
.coll a div{
    display: flex;
    width: calc(100% - 75px);
    flex-direction: column;
}
.coll a div strong{
    width: 100%;
    font-weight: 600;
    font-size: 18px;
}
.coll a.phone{
    background-color: #194466;
}
.coll a.phone i{
    background-image: url("img/tel.gif");
}
/*  */
.media{
    display: flex;
}
.media a{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}

/*  */
.span{
    margin: 6px 0;
    position: relative;
    min-height: 55px;
    display: flex;
    padding: 0 60px 0 0;
    color: #194466;
    flex-direction: column;
    direction: ltr;
    width: 100%;
}
.span i{
    width: 53px;
    height: 53px;
    position: absolute;
    top: 0;
    right: 0;
    background-size: 100% 100%;
}
.span strong{
    width: 100%;
    color: #E66039;
    font-weight: 600;
    font-size: 20px;
}
.icon1{
    background-image: url("img/phone.svg");
}
.icon2{
    background-image: url("img/adress.svg");
}
.icon3{
    background-image: url("img/mail.svg");
}

img.qr{
    width: 82px;
    height: 82px;
    margin-top: 15px;

}
/*  */
footer{
    background-color: #fff;
    border: 10px solid #EEF7FF;
    border-radius: 15px;
    padding: 30px 20px;
}
footer .container{
    display: flex;
    flex-wrap: wrap;
}

footer .container .foot{
    padding: 10px;
    color: #194466;
}
footer .container .foot h3{
    width: 100%;
    color: #e66039;
    font-size: 18px;
    margin: 0 0 20px;
    font-weight: 600;
}
footer .container .foot ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
}
footer .container .foot ul li{
    width: 100%;
    margin: 3px 0;
}
footer .container .foot ul li a{
    color: #194466;
    text-decoration: none;
    outline: none;
}
footer .container .foot ul li a:hover{
    color: #000000;
}
footer .container .foot img{
    height: 80px;
    width: auto;
    margin: 0 0 20px;
}
footer .container .foot p{
    color: #194466;
    font-size: 15px;
}

footer .container .foot .media{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
footer .container .foot .media a{
    background: #EEF7FF;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #000;
}
footer .container .foot .media a img{
        width: 36px;
    height: 36px;
}
footer .container .foot .media a:hover{
    background: #E66039;
    color: #fff;
}
footer .container .foot .media a i{
    color: #000;
}

footer .container .copy{
    border-top: 1px solid #44444430;
    padding: 10px 10px 0;
    text-align: center;
    color: #444;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer .container .copy a{
    color: #e66039;
    text-decoration: none;
    outline: none;
}
footer .container .copy a:hover{
    color: #333;
}
footer .container .copy .linksfooter{}
footer .container .copy .linksfooter a{
    color: #000;
    text-decoration: none;
    outline: none;
    padding: 5px 10px;
}
footer .container .copy .linksfooter a:hover{
        color: #00AEEF;
    text-decoration: none;
    outline: none;
}
/*  */
.app{
    width: 60px;
    height: 60px;
    background-color: #FFFFFF;
    background-image: url("img/wa.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60% auto;
    position: fixed;
    border-radius: 50%;
    left: 10px;
    bottom: 20px;
    z-index: 99;
    box-shadow: 0 0 10px #ddd;
}
.remove-from-wishlist{
    display: none;
}

form.mailpoet_form {
    position: relative;
}
.mailpoet_submit{
    position: absolute;
    left: 0;
    top: 0;
    padding: 14px !important;
    font-size: 16px !important;
}
.mailpoet_spacer{
    display: none !important;
}
.mailpoet_paragraph {
    width: 100% !important;
}
/*  */
.head{
    background-image: url("img/head.png");
    background-size: cover;
    padding: 0;
}
.head .cover{
    padding: 50px 20px;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(90deg, rgba(238, 247, 255, 0) 0%, #EEF7FF 67.71%);

}
.head .container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    color: #444;
}
.head .container span{
    color: #E66039;
    display: flex;
    width: 100%;
    align-items: flex-start;
}
.head .container span a{
    color: #081A33;
    text-decoration: none;
    display: inline-block;
    padding: 0 10px;
    line-height: normal;
    display: flex;
    align-items: center;
}
.head .container span a:hover{
    color: #E66039;
}

.head .container h1{
    color: #194466;
    max-width: 600px;
    font-size: 30px;
    font-weight: 600;
    margin: 10px 0;
}
.head .container p{
    max-width: 600px;
}
/*  */
.who{
    padding: 30px 15px;
}
.who .container{
    background: initial !important;
    padding: 0;
}
.who-all{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0 0;
}
.who-all .box{
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column;
    color: #667063;
    text-align: center;
    align-items: center;
    margin: 10px;
    line-height: 1.4;
    font-size: 14px;
}
.who-all .box i{
    background-color: #fff;
    border: 1px solid #194466;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px;
    overflow: hidden;
}
.who-all .box i img{
    height: 50px;
    width: auto;
}
.who-all .box h5{
    color: #194466;
    font-size: 20px;
    font-weight: 600;
}
/*  */
.gool{
    padding: 10px 5px;
}
.gool .container{
    display: flex;
    flex-direction: row;
}
.gool .container .block{
    padding: 20px;
}
.gool .container .block video{
    width: 100% !important;
    height: 300px !important;
    border-radius: 15px !important;
    object-fit: cover !important;
    max-width: 100%;
}
.gool .container .block {
    display: flex;
    flex-direction: column;
}
.gool .container .block ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.gool .container .block ul li{

    width: 100%;
    color: #1F1014;
    padding: 4px 30px 2px 0;
    background-image: url(img/li.svg);
    background-repeat: no-repeat;
    background-position: right top 3px;
}

/*  */
.say{}


/*  */
.box-say{
    padding: 10px;
}
.box-say .item{
    border: 1px solid #F3F3F3;
    border-radius: 15px;
    padding: 20px;
    background-color: #F3F3F3;
    display: flex;
    flex-wrap: wrap;
    color: #0C1921;
    font-size: 15px;
    text-align: right;
    background-image: url("img/qq.svg");
    background-position: left 10px top 10px;
    background-repeat: no-repeat;

}
.box-say .item .tite{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    padding: 0;
    margin: 0 0 10px;
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
}
.box-say .item .tite i{
    width: 60px;
    height: 60px;
    background-color: #f8f8f8;
    border: 1px solid #081A33;
    border-radius: 50%;
    background-image: url("img/say.gif");
    background-size: 36px auto;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 0 0 10px;
}
.box-say .item .tite h4{
    width: calc(100% - 70px);
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
}
.box-say .item .tite h4 span{
    width: 100%;
    font-size: 12px;
    color: #72826D;
    padding: 5px 0;
}
.box-say .item p{
    width: 100%;
    padding: 10px 0 0;
    margin: 0;
    color: #0C1921;
    font-size: 13px;
}
/*  */
.say-slider{
    margin: 0 auto;
    max-width: 1080px;
}
.say-slider .owl-next{
   position: relative;
    left: auto;
    top: auto;
    right: auto;
    margin: 4px;
}
.say-slider .owl-prev{
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    margin: 4px;
}
/*  */
.services-page{
    padding: 30px 10px;
}
.services-page .container{
    display: flex;
    flex-wrap: wrap;
}
/*  */
.projects{
    padding: 30px 10px;
}
.projects .container{
    display: flex;
    flex-wrap: wrap;
}
/*  */
.single{
    padding: 20px 10px;
}
.single .container{
    display: flex;
    flex-wrap: wrap;
}
.single .container .block{
    padding: 10px;
    color: #667063;
    display: flex;
    flex-wrap: wrap;
}
.single .container .block  img{
    width: 100%;
    height: auto;
    max-height: 450px;
    border-radius: 15px;
    object-fit: cover;
}
.title{
    color: #194466;
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 10px;
    width: 100%;
    text-align: right;
}
.single .container .block ul{
    padding: 0;
    margin: 0 0 15px;
    list-style: none;
}
.single .container .block ul li{
        width: 100%;
    color: #1F1014;
    padding: 4px 30px 2px 0;
    background-image: url(img/li.svg);
    background-repeat: no-repeat;
    background-position: right top 3px;
}
.single .container .block .box{
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
}
.single .container .block .box img.img{
    width: 100%;
    height: 147px;
    margin: 0 0 5px;
}
/*  */
.block-text{
    display: block !important;
}
.company{
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin: 0 0 6px;
}
.company div{
    display: flex;
    flex-direction: column;
    color: #194466;
    font-size: 15px;
    justify-content: center;
}
.company span{
    color: #E66039;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
}
.company i{
    background-color: #fff;
    padding: 5px;
    height: 80px;
    width: 130px;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 10px;
}
.company i img{
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
}








/* 
  font-family: "Dubai", serif;
    font-family: "Dubai", serif;

*/

@media (max-width: 769px) {}



/*::placeholder { 
color: #ffffff50;
}*/


/*
background-color: rgba(80,104,140,0.5);
transition: all 0.5s ease 0s;
transform: scale(1.2);

*/

.owl-carousel {
    direction: ltr !important;
    position: relative;
}
/* .hero video::-webkit-media-controls,
.serv-box video::-webkit-media-controls,
.creative  .creative-all .creative-row video::-webkit-media-controls,
.contact-page .container video::-webkit-media-controls

{
  display: none !important;
} */