@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;900&display=swap');
html{ direction: ltr; width: 100%; overflow-x: hidden;  scroll-behavior: smooth;}
body{ direction: ltr; width: 100%; overflow-x: hidden;  scroll-behavior: smooth;}
*{font-family: 'Tajawal'} 
a{text-decoration: none;}
.appjad-image{position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;}
.appjad-image.re{padding-bottom: 60%; }
.appjad-image.to{padding-bottom: 130%; }
.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;}


.bg-white-75{background-color: rgba(255, 255, 255, 1);}
.bg-opal{background-color: #4CA0A8 !important; border:0 !important} 
.text-opal{color: #4CA0A8 !important;}
.bg-gray{background-color: #D1D3D4 !important;}
.text-gray{color: #D1D3D4 !important;}

.carousel-caption{
  top: 10% !important;
  width: 50%;
  text-align: justify !important;
  text-align: left;
}

.carousel-caption h2.h1{
  font-size:  4rem;
}
.carousel-caption p{
  font-size: 1.5rem;
}
.services{
  background-color: #54a9af;
  background-image: url(../images/services-bg.png) ;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;padding-bottom: 500px !important;
}

.services-top-bg{
  position: absolute;
  width: 100%;
  bottom: 0%;
  
}

.services .image-title{
  margin-top: -100px;
  height: 100%;;
}

.projects {
  background-color: #58595C;
  background-image: url(../images/projects-bg-1.png), url(../images/projects-bg-2.png);
  background-position: right bottom, right top;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, 100%;
  position: relative;
}
.projects-top-bg{
  position: absolute;
  width: 100%;
  bottom: 0%;
}


.projects .image-title{
  height: 60%;
}

.gallery {
  margin-top: -300px;

  position: relative;
  z-index: 9999 !important;
}

.gallery .swiper-slide{
  border-radius: 30px !important;
  overflow: hidden;
  border: 5px solid  rgba(209,211,212,1);
}
.contact input{
  border-top: #4CA0A8 solid 5px;
}
.contact .btn-primary{
  border-top: 0;
  background-color: #4CA0A8 !important;
}
.swiper-button-next,.swiper-button-prev{color: #4CA0A8 !important;}
.swiper-pagination{bottom: -50px !important;}
.swiper-pagination .swiper-pagination-bullet-active{background-color: #FFF !important;}
.swiper-pagination-partners {margin: auto;}


.footer{border-top: 10px #4CA0A8  solid;}

.up{width: 50px !important; height: 50px !important; z-index: 9999; line-height: 50px;  left: auto;}
@media (min-width: 992px) { /* 992px is the breakpoint for lg in Bootstrap */
  .w-lg-50 {
    width: 50%;
  }
}
@media (max-width: 768px) {
  .wi-fix-1{width: 80% !important;}
  .wi-fix-2{width: 20% !important;}
  .services .image-title{
    margin-top: 0;
    height: 80%;;
  }
  .gallery {
    margin-top: -200px;
  }
  .carousel-caption {
    top: 1% !important;
    width: 70%;
  }
  .carousel-caption h2.h1{
    font-size:  1.2rem;
  }
  .carousel-caption p{
    font-size: .8rem;
  }
}

.hover-item:hover {
	background-color: #58595B;
}