@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');


@font-face {
    font-family: 'droid_arabic_kufibold';
    src: url('../font/droidkufibold-webfont.woff2') format('woff2'),
         url('../font/droidkufibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'droid_arabic_kufiregular';
    src: url('../font/droidkufiregular-webfont.woff2') format('woff2'),
         url('../font/droidkufiregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
	margin: 0px;
	padding: 0px;
}
html::-webkit-scrollbar-thumb {

    background: linear-gradient(180deg,#000000,#000000);
    border-radius: 0px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
    background-color: #6969691c;
}
html::-webkit-scrollbar {
    width: 20px;
    height: 10px;
}

body{
	margin:0;
	padding:0;
	font-family: 'Poppins', 'droid_arabic_kufibold', sans-serif;
}

a{
 text-decoration: none; 
}

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




/*loader*/
.ctn-preloader {
  align-items: center;
  cursor: none;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 900;
}

.ctn-preloader video {
  align-items: center;
  cursor: none;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900;
}
.ctn-preloader .loader-section {
  background-color: #004f81;
  height: 100%;
  width:100%;
  position: fixed;
  top: 0;
  width: calc(100% + 1px);
}
.ctn-preloader .loader-section.section-left {
  left: 0;
}
.ctn-preloader .loader-section.section-right {
  right: 0;
}
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}
/*@media screen and (max-width: 767px) {

  .ctn-preloader video {
    width:50%;
  }
}

@media screen and (max-width: 500px) {
  .ctn-preloader  video {
    width:50%;
  }
}
*/
/*loader-end*/
/*section1*/
/*navbar*/
.arabic-font{
   font-family: 'droid_arabic_kufibold';
   font-weight:600;
}
.arabic-font a{
padding-bottom: 2px;
}
.saudi-flag{
    position: relative;
    width: 10%;
    right: 10px;
    margin-bottom: 2px;
}
.responsive-bar{
    display: none;
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    margin: 2% 10%;
    height: 120px;
    padding: 10px 50px;
    background-color: #fff;
    box-sizing: border-box;
    transition: .5s;
    z-index: 99;
    border-radius: 100px;
}
nav.black{
    width:100%;
    margin:0;
    border-radius:0;
    background: #fff;
    height: 120px;
    padding: 10px 50px;
    z-index:999;
    -webkit-box-shadow: 0px 7px 34px -8px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 7px 34px -8px rgba(0,0,0,0.43);
box-shadow: 0px 7px 34px -8px rgba(0,0,0,0.43);
}
nav .logo{
    float: left;
}
nav .logo img{
    height:100px;
    transition: .5s;
}
nav.black .logo img{
    height: 100px;
}
nav > ul {
    width:auto;
    margin: 0 auto;
    padding: 0;
      position: relative;
    top:15px;
}
nav > ul > li{
    list-style: none;
    display: inline-block;
    float:right;
}
nav > ul > li > a:hover{
    color: #ccc !important;
    text-decoration:none;
}
nav > ul > li > a{
    text-decoration: none;
    text-transform: uppercase; /*for capitalisation of letters */
    line-height: 80px;
    padding: 5px 20px;
    font-size:14px!important;
    transition: .5s;
        color:#000;   
}
nav.black > ul > li > a{
    color: #000;
    line-height: 60px;
}

@media(max-width:768px){
    .responsive-bar{
        display: block;
        width: 100%;
        height: 80px;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px 20px;
        box-sizing: border-box;
        z-index:999;
    }
    .responsive-bar .logo img{
        float: left;
        height:75px;  
    }
    .responsive-bar .menu h4{
    float: right;
    color: #000;
    margin: 0;
    padding: 0;
    line-height: 70px;
    cursor: pointer;
    font-size: 18px;
    text-transform: uppercase;
    }
    nav{
        padding: 0;
    }
    nav,
    nav.black{
    background: #262626;
    height: auto;
    padding: 0;
    }
    nav .logo{
        display: none;
    }
    nav ul{
        position: absolute;
        width: 100%;
        top: 60px;
        left: 0;
        background: #f7f7f7;
        float: none;
        display: none;
    }
    nav ul.active{
        display: block;
    }
    nav ul li{
        width: 100%;
    }
    nav ul li a{
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        line-height: 30px !important;
        color: #000;
        
    }

    nav > ul{
        width: 100%;
        display: none;
    }
    nav > ul > li{
        display: block;
        text-align: center;
    }
    .active{
        display: block;
    }
}

/*end*/
/*section1*/


/*section2*/

/*slider*/


.slider{
    background-color:#000;
    width:100%;
}

.slider-caption h1{
  
  font-size:55px;
  font-weight:600;
  text-align:center;
  vertical-align:middle;
}


.carousel-caption {top: 42% !important;}
.black-overlay{position:absolute;top:0;left:0;height:100%;width:100%;background-color: #0707075c;}

.button {
    display: inline-block;
    background: var(--danger);
    color: #fff;
    margin-top: 15px;
    text-transform: uppercase;
    padding: 10px 45px;
    border-radius: 50px;
    box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    -webkit-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

.button:hover {
  box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(0px, -10px) scale(1.2);
          transform: translate(0px, -10px) scale(1.2);
          text-decoration: none;
          color: white;
}

.carousel-control-prev-icon {opacity: 0.2;}
.carousel-control-next-icon {opacity: 0.2;}

/*animate-btn*/

.animated-btn {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    background: #ffffff5e;
    position: absolute;
    z-index: 99;
    top: 46%;
    left: 10%;
}

.animated-btn::before, .animated-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: #ffffff1f;
    animation: ripple-1 2s infinite ease-in-out;
    z-index: -1;
}

.animated-btn::after {
    background: #ffffff1f;
    animation: ripple-2 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

@keyframes ripple-1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.animated-btn i{ position: absolute;top: 23px;right:0;left:0;bottom: 0;font-size:20px;}


.video-overlay {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.80);
  opacity: 0;
  transition: all ease 500ms;
}

.video-overlay.open {
  position: fixed;
  z-index: 1000;
  opacity: 1;
}

.video-overlay-close {
  position: absolute;
  z-index: 1000;
  top: 35px;
  right: 50px;
  font-size:50px;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
}

.video-overlay-close:hover {
  color: #ccc;
  text-decoration:none;
}

.video-overlay iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0 0 15px rgba(0,0,0,0.75);
}


/*animate-btn end*/

/*section2end*/




/*section3*/

.section3-heading h1{font-weight:700;}
.section3-para p{font-weight:400;width: 580px;max-width:600px;}
.section3-years h1{font-weight:700;position:relative;font-size:5rem;}
.section3-years a .button{position:absolute;right:0;top:70%;padding: 7px 25px;border-radius: 50px;}
.section3-years a .button:hover {-webkit-transform: translate(0px, -10px) scale(1.1);transform: translate(0px, -10px) scale(1.1);
}
.section3-years .sub-txt{font-weight:600;position:absolute;font-size:30px;top:10px;}

.section3-years h1:after{
content: "EXPERIENCE";
    position: relative;
    font-weight: 600;
    font-size: 30px;
    left:0px;
    top:0px;
}

/*section3end*/


/*section4*/

.section4{background-color:#cccccc14;}
.section4-heading h1{font-weight:700;}
.section4-para{font-weight:400;padding:25px 80px;}
.section4 .button{padding: 6px 25px;text-transform:inherit;border-radius:0;background-color:#004F81;}
.section4 .button:hover {
box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(0px, -10px) scale(0.8);
transform: translate(0px, -10px) scale(0.8);
}

.indicators-clr li{width: 40px;height: 5px;margin-right: 10px;background-color:#000;}
.box-height{height:580px;}


/*section4end*/


/*section5*/
.section5{background-color:#004F81;}
.section5-heading h1{color:#fff;font-weight:600;}
.font-size-adjst{font-size:45px;}
/*saction5end*/


/*section6*/
.section6-para{padding-bottom:1rem !important;}
.counter {background-color: transparent;padding: 20px 20px;border-left: 1px solid #fff;}
.count-title {font-size: 55px;margin-top: 10px;margin-bottom: 0;text-align: center;color: #fff;font-weight: 600;}
.count-text {font-size: 25px;margin-bottom: 0;position: relative;color: #fff;top: -50px;font-weight: 500;}
.fa-2x {margin: 0 auto;float: none;display: table;color: #4ad1e5;}
.section6-heading h1{font-weight:700;}
.section6-para p{font-weight:400;width: 580px;max-width:600px;}

/*section6end*/



/*section7*/

.section7{position:relative;width:100%;background-image:url(../img/background-img.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover;}
.section7-heading h1{font-weight:600;color:#fff;position:relative;}
.section7-heading a{float: right;position: relative;right: 0;left: 0;top: -55px;}
.hover {overflow: hidden;position: relative;padding-bottom: 95%;}

.hover-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  transition: all 0.4s;
}

.hover img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.hover-content {
  position: relative;
  z-index: 99;
}


/* DEMO 2 ============================== */
.hover-2 .hover-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
}

.hover-2-title {
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 99;
  transition: all 0.3s;
}

.hover-2-description {
  width: 100%;
  position: absolute;
  bottom: 0;
  opacity: 0;
  left: 0;
  text-align: center;
  z-index: 99;
  transition: all 0.3s;
}

.hover-2:hover .hover-2-title {
  transform: translateY(-1.5rem);
}

.hover-2:hover .hover-2-description {
  bottom: 0.5rem;
  opacity: 1;
}

.hover-2:hover .hover-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
}


/*section7end*/



/*section8*/

.section8-heading h1{font-weight:600;}
/*.client-box{padding-bottom:50% !important;}*/
.client-logo-pad{padding-bottom:15px;padding-top:35px;}


/*section8end*/



/*footer*/

.bg-navy {background-color:#085386 !important;}
.space-2, .space-top-2 {padding-top: 4rem !important;}
.opacity-xs {opacity: .2;}
hr {margin-top: 1rem;margin-bottom: 1rem;border: 0;border-top: 0.0625rem solid #e7eaf3;}
.space-1, .space-top-1 {padding-top: 2rem !important;}
.space-1, .space-bottom-1 {padding-bottom: 2rem !important;}
.nav-x-0 .nav-link {padding-right: 0;padding-left: 0;}
.nav-white .nav-link {color: rgba(255, 255, 255, 0.7);}

.btn-icon.btn-xs {
    font-size: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
}

.btn-icon {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0;
}


.btn-soft-light {
    color: #f7faff;
    background-color: rgba(247, 250, 255, 0.1);
    border-color: transparent;
}

.media-body {
    font-size:12px;
    padding-top: 2px;
}

.copyright-ys a{
  text-decoration:none;
  color:#ffcc00;
}
.copyright-ys a:hover{
  text-decoration:none;
  color:#ffcc008a;
}

.list-inline-item a:hover{color:#be1d2c;}


/*footer*/





/*About Page Start*/
.page-holder {
  min-height: 50vh;
}
.display-on-mob{
  display:none !important;
}

.align-abt-ban{
    padding-bottom: 6rem !important;
    padding-top: 12rem !important;
}

.bg-cover {
  background-size: cover !important;
}

.about-page-txt{
  text-align:justify;
  font-size:15px;
  padding:15px 0px;
  font-weight:400;
}





.video-background-holder {
  position: relative;
  background-color: black;
  height: calc(65vh - 100px);
  min-height: 25rem;
  width:100%;
  overflow: hidden;
}

.video-background-holder video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}






.certificate{padding-bottom:100px;}
.about-page-h1{
  font-size:35px;
  font-weight:700;
}

.bg-img{
  background-image:url(../img/about/bgparallax-09.png);
  background-position:center;
  background-repeat:no-repeat;
  width:100%;

}



/*contact page*/

.pulled-up-section {margin-top: -4rem;}
.h4{font-weight:600;padding-top: 15px;padding-bottom:8px;}
.text-muted a{text-decoration:none;color:#6c757d;}
.text-muted a:hover{text-decoration:none;color:#000;}
.text-primary {color: #0CDA90 !important;}
.icon-block {
    width: 50px;
    height: 50px;
    border-radius: .25rem;
    background:#004f812e;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #004f81;
    font-size: 0.9rem;
}
.icon-block i{font-size:18px;}
.with-pattern-full::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/pattern.f152d319.svg) repeat;
    background-size: 20rem;
    background-position: top left;
    opacity: 0.04;
}

.contact-form h2{font-weight:700;padding-top:25px;padding-bottom:8px;}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color:inherit; 
    outline: 0;
    box-shadow:inherit; 
}
.contact-map{position:relative;height:auto;overflow:hidden;width:100%;}


/*end-contact page*/



/*Career-page*/


.height-adjst{height:100%;}
.career-head{font-size:3rem;color:#000;}
.career-head2{font-size:4rem;color:#004f81;}
.txt-values {font-size: 20px;line-height: 1.5;font-weight: 600;padding-top: 15px;}
.career-sub-ul{list-style: decimal;padding-left: 15px;padding-top: 20px;}
.career-sub-ul li{list-style: decimal;padding-left: 15px;padding-top:5px;}

.nav-pills-custom .nav-link {
    color: #aaa;
    background: #fff;
    position: relative;
}

.nav-pills-custom .nav-link.active {
    color: #45b649;
    background: #fff;
}


/* Add indicator arrow for the active tab */
@media (min-width: 992px) {
    .nav-pills-custom .nav-link::before {
        content: '';
        display: block;
        border-top: 8px solid transparent;
        border-left: 10px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        opacity: 0;
    }
}

.nav-pills-custom .nav-link.active::before {
    opacity: 1;
}

.position{background-image:url(../img/bgparallax-09.png);background-repeat:no-repeat}
.career-form-experiance li{
  list-style:none;
  font-weight:600;
  float:left;
}

.space-exp{padding-left:15px;padding-right:25px;font-weight:400;}
.modal-dialog {
    max-width: 75%;
    margin: 6rem auto;
}
.modal-header h5{
    font-weight: 700;
    font-size: 25px;
    padding: 35px 0;
    width:100%;
    text-align:center;
    max-width:100%;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #000;
}

.body-popup{padding:5rem;}

.margin-3rem{margin-bottom:3rem;}
label{font-weight:600;margin-bottom:18px;}




/*career page end*/



/*service ppage 1*/

.upercase{text-transform:uppercase;}
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}


/*service page End*/





a.lightbox img {
height: auto;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
z-index:999;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}


li.navbar-dropdown {
  position: relative;
}

 li.navbar-dropdown:hover .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
  margin-left: -3rem;
}

 li.navbar-dropdown .dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 0;
  top: 100%;
  transform: translateY(50px);
  left: 0;
  width: 250px;
  background-color: #fff;
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 111;
  transition: 0.4s all;
}
 li.navbar-dropdown .dropdown a {
  font-weight: 400;
}
.navbar-dropdown .dropdown a:hover {
  padding-left: 30px;
}
.navbar-links li a:hover {
  color: #ff3f34;
}
.head_drop_ul{
  list-style: none;
}
.head_drop_ul li{
  padding:10px 0 10px 20px;
  border-bottom: 1px solid #ddd;
}
.head_drop_ul li a{
      display: block;
  color: #000;
}
.head_drop_ul li a:hover{
  text-decoration: none;
  background: #085386;
  color: #fff !important;
}
.head_drop_ul li:hover{
    padding:10px 0 10px 20px;
  background: #085386;
    color: #fff !important;
}
.head_drop_ul li:hover a{
  padding-left: 20px !important;
  background: #085386;
    color: #fff !important;
}
 li.active a {
    color: #DC3545!important;
    font-weight: 600;
}
.post-slide{
height:360px;
}
.about-text{
  overflow:auto;
  width:200px;
  height:200px;
}
@media only screen and (max-width: 1199px) and (min-width: 320px){
  .about-text{
    overflow:auto;
    width:100%;
    height:auto;
  }
  .img{
 position: relative;
 left:90px;
 width:200px;
 height: 100px;
}
}
.img{
  width:200px;
  height:100px;
}