/*globle */
body{
    margin: 0;
    font-family: 'Bitter', serif;
    font-family: 'IBM Plex Sans', sans-serif;
    font-family: 'Pacifico', cursive;
    font-family: 'Poppins', sans-serif;
    font-family: 'PT Sans', sans-serif;
    font-family: 'Readex Pro', sans-serif;
    font-family: 'Roboto', sans-serif;
}
/*globle classes */
.btn-primary{
    color: white;
    background-color:var(--primarycolor);
    border:var(--primarycolor);
    padding: 4px 14px;
    border-radius: 0;
}

.btn-primary:hover,
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    color: white;
    background-color: #c00a0a;
    border: #c00a0a;
}

.about .content span,
.heading-section span{
    color: var(--primarycolor);
    letter-spacing: 5px;
}

:root{
    --primarycolor:#F54C1E;
}

.texr-dark{color:#031333;}

/* start navbar */
.navbar {
    position: fixed;
    width: 100%;
    z-index:5;
    height:80px;
    background-color: white;
}

.navbar-expand-lg .navbar-nav .nav-link{color: #000;cursor: pointer}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link {color:#F54C1E !important;}

.navbar .navbar-nav .nav-item .active::after{
    content:'';
    border:1px solid red;
    display: block;
}

/* End navbar */


/** **/
.contact-us{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    background: #0000008c;
    z-index: 11;
    color: #fff;
    transform: scale(0);
    transition: all .8s ease;
}

.show-contact{transform: scale(1);}

.colse-contact-us{
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #000000;
    text-align: center;
    line-height: 41px;
    border-radius: 50%;
    font-size: 19px;
    font-weight: bold;
    cursor: pointer;   /** يجعل العنصر كانه للضغط وليس للنص**/
}
/** **/

/* start hero-section*/
.hero-section{background-color: #031333;}

.hero-section .content h1 span{color:var(--primarycolor);}

.hero-section .content h1{font-size: 56px;}
/* End hero-section*/

/* start features*/

.features .icon-dots rect{fill: var(--primarycolor);}
/* End features*/

/** start our services**/

.our-services{background-color: #031333; padding: 100px 0;}

/**
.container-gradient .content-gradient{
    background-image: linear-gradient(#00000014, #FD5C30);
    width: 636px;
    padding-top: 201px;
    padding-bottom: 74px;
    bottom: 0;
    left: -640px;
    transition: all .5s ease;
}

.container-gradient .service:hover .content-gradient{left: 0px;}
**/

.container-gradient .content-gradient{
    background-image: linear-gradient(#00000014, #FD5C30);
    width: 636px;
    padding-top: 201px;
    padding-bottom: 74px;
    bottom: 0;
    transform: scale(0);
    transition: all .5s ease;
}

 .container-gradient:hover .content-gradient{transform: scale(1);}

.our-services .connect-service p{font-size: 13px;}
/** End our services**/

.container-who-we-are{margin-bottom: 100px;}

.who-we-are .container-who-we-are .projection{
    bottom: -80px;
    left: -357px;
    transition: all .5s ease;
}

.who-we-are .container-who-we-are .img-3{
    top: -29px;
    left: -231px;
    transition: all .5s ease;
}

.who-we-are .container-who-we-are:hover .img-3{left: -49px;}

.who-we-are .container-who-we-are:hover .projection{left: 200px;}

.container-who-we-are-text li,
.container-who-we-are-text p{color: #818181;}

.item{
    background: #0000002e ;
    padding: 23px;
}

.owl-nav{
    text-align: center;
    margin-top: 15px;
}

.owl-prev,
.owl-next{
    width: 30px;
    height: 30px;
    background-color: red !important;
    border-radius: 50%;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 11px !important;
    margin-right: 10px;
}