@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700;800;900&family=Tajawal:wght@500&display=swap');
html{ direction: ltr; width: 100%; overflow-x: hidden; scroll-behavior: smooth;}
*{ font-family: 'Raleway', sans-serif;  } 
a{text-decoration: none;}
.appjad-image{position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;}
.appjad-image.re{padding-bottom: 60%; }
.appjad-image.ro{ transform: translateY(-1px) rotate(0deg); }
.appjad-image img{position: absolute; left: 50%;top: 50%; min-height: 100%; width: 100%;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);transition: all .5s;
  transform: translate(-50%,-50%);object-fit: cover;object-position: center;}
body{width: 100%; overflow-x: hidden;}
/*.text-justify{text-align: justify;}*/
.text-facebook:hover{color: #1877f2 !important;}
.text-youtube:hover{color: #ff0000 !important;}
.text-linkedin:hover{color: #0072b1  !important;}
.text-twitter:hover{color: #1DA1F2  !important;}
.text-instagram:hover{color: #c32aa3 !important;}
 .logolead.w-25{width: 25%  !important;}
 
.carousel-item{height: 70vh; margin-bottom: 0 !important;}
.carousel-bg{height: 70%; background-size: cover;}
.h1,h2,h3,h4,h5,h6{ font-family: 'Raleway', sans-serif; }
.loader {  position: fixed;  background-color: #eeeeee; background-image: url(../images/bg-small.jpg?1); background-size: cover;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  display:flex ; background-size: cover;  justify-content: center;  z-index: 9999999999999999;}
.loader img{ align-items: center ;  align-self: center;}
.navbar-brand img{height: 55px !important;}
.leading{ height: 100vh; width: 100%; position: fixed; z-index: -1; }
.leading-bg{ width: 100%; height: 100%;  }
.navbar{background-color: #ECE9D8;}
.bg-1{background-color: #f4f2e8;}
.bg-2{background-color: #ece9d8;}
.bg-3 {background-color: #A2933E;}

.carousel-item{margin-bottom: 0 !important;}
.aboutus .text-justify{line-height: 55px;} 
.services{padding: 55px 0;}
.services .appjad-image{height: 350px; padding-bottom: 0;}
.services figure{position: relative; transition: .2s all ease;  }
.services figcaption{position: absolute; transition: .2s all ease; bottom: 0; width: calc(100% - 24px); background: rgba(0,0,0,.5);  padding: 21px; color: #FFF;}
.services figcaption a{color: #FFF;}
.services figcaption a:hover{text-decoration: none;}

.services figure:hover {transform: scale(1.05) !important}
.services figure:hover figcaption{background: rgba(255,255,255,.9); color: #111; transition: .3s all ease;}
.services figure:hover a{color: #111;  }
.services figure:hover a h4{color: #395740;}

.companies{background-image: url(../images/bg-small.jpg?1); background-size: cover; background-attachment: fixed;}
.companies figure{  transition: .2s all ease;}
.companies .filter { filter: opacity(0.5); }
.companies figure:hover {transform: scale(1.1) !important;}
.companies figure:hover .filter { filter: opacity(1); }

.reveal{  position: relative;  transform: translateY(150px);  opacity: 0;  transition: 1s all ease;}
.reveal.active{  transform: translateY(0);  opacity: 1;}


.googlemap {  position: relative;  padding-bottom: 20%; /* 4:3 ratio*/  height: 0;  overflow: hidden;}
.googlemap iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
footer{background-color: #2d4073; position: relative; z-index: 3;  }
.footer-logo{filter: brightness(0) invert(1);}
.contacts{font-family: 'Tajawal', sans-serif !important;}
.up{width: 50px !important; height: 50px !important; line-height: 50px; display: none; left: auto;}

@media (max-width: 768px) {
  .welcomegif{width: 100% !important; height: auto !important; }
  .loader img{width: 100% !important; height: auto !important; }
  .loader .logoloader{width: 80% !important; height: auto !important; }
  .companies{height: 70vh;}
  .carousel-item{height: 80vh;}
  .carousel-bg{height:80vh; background-size: cover;}
  .navbar-brand img{height: 34px !important;}
  .aboutus .text-justify {    line-height: normal;}
  .col-lg-3.item{width: 50%;}
  
  .logolead.w-25{width: 80%  !important;}
}