@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
*{
    font-family: 'Almarai', sans-serif;
    
}
:root{
    /* --skyblue: rgb(0, 183, 255); */
}
body{
  overflow-x:hidden;
}
img{
  object-fit: cover !important;
}
a {
    text-decoration: none !important;
}
p {
    text-align: justify;
}
.nav-top{
    background-color: rgb(136, 136, 136);
}
 h1, .footer h5, .abouts h5{
  font-weight: bold !important;
    color: #ffcb0f !important;
}
  h3{
  color: #292929;
}
h2, h3,h4,h5,h6{
  
  font-weight: bold !important;
}
.top_nav {
    background: #ffcb0f none repeat scroll 0 0;
    overflow: hidden;
    padding: 10px 0;
}
.top_nav a{
    color: black;
}
.list-icon a:hover{
    color: #555;
}
.navbar-icon{
    font-size: 30px;
    color: rgb(179, 179, 179);
    /* background-color: white; */
    border-radius: 50px;
}
.navbar{
    background-color: rgba(37, 37, 37, 0.898);
}
/* .navbar-brand{
    color: white !important;
} */
.nav-link{
  padding: 0px 20px !important;
    color: white !important;
}
@media(max-width:991px){
  .nav-link{
    padding: 15px 0px !important;
  }
}
.nav-link:hover{
    color: #ffcb0f !important;
}
.nav-item .active{
    color: #ffcb0f !important;
}
/* .nav-item .dropdown-item .active{
  color: white !important;
} */
.navbar-toggler{
  border-radius: 0px !important;
  border: none !important;
}
.navbar-toggler:focus{
  box-shadow: none !important;
}
.dropdown-menu{
    border-radius: 0px !important;
}
.dropdown-item:hover{
    color: white !important;
    background-color: #ffcb0f !important;
}
.carosel-img{
    height: 550px !important;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
.slider-style-seven{
    position: relative;
  }
  
  .slider-style-seven .slide {
    position: relative;
    padding: 125px 0px 205px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .slider-style-seven .slide:before{
    position: absolute;
    content: '';
    background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.329) 50%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }
  /* .slider-style-seven .content-box h1{
    
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(255, 255, 255);
  } */
  .slider-style-seven .content-box h1{
    position: relative;
    display: block;
    font-size: 50px;
    line-height: 58px;
    /* color: #fff; */
    color: rgb(126,217,87);
    font-weight: 700;
    /* margin-bottom: 34px; */
    opacity:0;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  
  
  @media(max-width:768px){
    .slider-style-seven .content-box h1{
      
      font-size: 40px;
      line-height: 38px;
    }
    .slider-style-seven .content-box {
        top: 25%  !important; 
         position: absolute !important;
    }
    
  }
  .slider-style-seven .active .content-box h1{
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 500ms;
  }
  
  .slider-style-seven .content-box .text{
    position: relative;
    display: block;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    /* margin-bottom: 37px; */
    opacity:0;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  .slider-style-seven .active .content-box .text{
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    transition-delay: 1000ms;
  }
  
  .slider-style-seven .content-box .btn-box a{
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border: 3px solid #fff;
    background: transparent;
    text-align: center;
    padding: 14px 46.5px;
  }
  
  .slider-style-seven .content-box .btn-box a:hover{
    background: #ff5e85;
    border-color: #ff5e85;
  }
  
  .slider-style-seven .content-box .btn-box{
    position:relative;
    display: block;
    opacity:0;
    -webkit-transition: all 1500ms ease;
    -moz-transition: all 1500ms ease;
    -ms-transition: all 1500ms ease;
    -o-transition: all 1500ms ease;
    transition: all 1500ms ease;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
  
  .slider-style-seven .active .content-box .btn-box{
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition-delay: 1500ms;
  }
  
  .slider-style-seven .content-box{
    position: relative;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
  }

  @media(max-width:768px){
    /* .content-box h5{
      display: none !important;
    } */
    .slider-style-seven .owl-nav .owl-prev i,
    .slider-style-seven .owl-nav .owl-next i{
      padding: 5px !important;

    }
    .slider-style-seven .owl-nav{

      top: 90% !important;

    }
    /* .position-fixed {
      width: 40px;
    } */
  }
  
  /* .slider-style-seven .owl-nav{
    position: absolute;
    display: block !important;
    
    top: 80%;
    display: flex;
    right: 10%;
     
  } */
  
  .slider-style-seven .owl-nav .owl-prev i,
  .slider-style-seven .owl-nav .owl-next i{
    padding: 15px;
    background-color: var(--primary);
    color: white;
    border: 2px solid transparent;
  }
  .slider-style-seven .owl-nav .owl-prev i:hover,
  .slider-style-seven .owl-nav .owl-next i:hover{
  
    background-color:transparent;
  
    border: 2px solid var(--primary);
  }
  
  
  /* .slider-style-seven .owl-nav,
  .slider-style-seven .owl-dots{
    display: none;
  } */
  
  .slider-style-seven.home-8 .slide{
    padding: 275px 0px 155px 0px;
  }
  
  .slider-style-seven.home-8 .content-box{
    margin: 0px;
  }
  
  .slider-style-seven.home-8 .slide:before {
    position: absolute;
    content: '';
    /* background-image: -webkit-linear-gradient(90deg, rgba(122, 81, 249, 0.6) 50%, rgba(252, 241, 247, 0.6) 100%); */
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }
  
  .slider-style-seven.home-8 .content-box h5{
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 5px;
    margin-bottom: 8px;
    text-transform: uppercase;
    -webkit-animation: zoom-fade 5s infinite linear;
    animation: zoom-fade 5s infinite linear;
  }
  
  .slider-style-seven.home-8 .content-box{
    max-width: 830px;
  }
  
  .slider-style-seven.home-8 .content-box .btn-box a:hover{
    background: #7951f8;
    border-color: #7951f8;
  }
  
  .slider-style-seven.home-8 .owl-dots {
    position: absolute;
    display: block;
    /* left: 50%; */
    bottom: 0%;
    /* transform: translateY(-50px); */
    /* max-width: 1200px; */
    width: 100%;
    margin: 0 auto;
  }
  
  .slider-style-seven.home-8 .owl-theme .owl-dots .owl-dot span {
    position: relative;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 0px 5px;
    cursor: pointer;
    transition: all 500ms ease;
  }
  
  .slider-style-seven.home-8 .owl-theme .owl-dots .owl-dot.active span{
    width: 17px;
    height: 17px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: transparent;
    top: 3px;
  }
.top-content{
    font-size: 20px !important;
    color: rgb(163, 162, 162);
    opacity: 0.7 !important;
    letter-spacing: 1px;
}
.slides{
    position: relative !important;
   }
   /* .slides .owl-nav .owl-prev .bi,
   .slides .owl-nav .owl-next .bi{
    border: 2px solid var(--primary);
    color: white;
    
   } */
   /* .owl-theme .owl-nav [class*=owl-]{
    background-color: transparent;
   } */
/* 
   .owl-theme .owl-nav [class*=owl-]:hover{
    background-color: transparent;
   }

   .slides .owl-nav{
    position: absolute;
    top:100%;
    margin-bottom: 10px;
   }


   .slides-carousel .owl-nav .bi{
    padding: 20px;
    background-color: white;
    color: black;
    font-weight: bold;
    margin: 20px;
    gap: 1rem;

   }
   .slides-carousel .owl-nav{
    position:absolute;

    display: flex;
    flex-direction: column;
    right: 0;
    top: 80%;

   } */

.card{
    border: 2px solid transparent !important;
    border-radius: 0px !important;
    box-shadow: 10px 0px 10px rgb(215, 215, 215);
    height: 100% !important;
    transition: .5s;
    overflow: hidden;
}
.card:hover{
    border: 2px  solid #ffcb0f !important;
    
    
}
.card-bodys{
  left: 0;
  right: 0;
  bottom: 100px;
  height: 0px;
  opacity:0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
    transition: .5s ease-in-out;
   
    
}
.card-heads{
  transition: .5s ease-in-out
}
.card:hover .card-bodys{
  background-color: #292929;
  color: white;
   opacity: 1;
  bottom: 0;
  height: 100% !important;
}
.card:hover .card-heads{
      /* opacity: 0; */
   
      margin-bottom: -300px;
      height:0% !important;
}
 



.card-icon{
    font-size: 50px;
    color: #ffcb0f;
}
.project-img{
    width: 100% !important;
    height: 350px !important;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
 .pro-head{
    background-color: rgba(0, 0, 0, 0.592);
    /* transition: .5s; */
    bottom: 0px;
    width: 100%;   
}
.testimonial{
    background-image: url(../images/background-white-img.jpg);
    object-fit: cover;
    background-position:center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.quote-icon{
    font-size: 60px;
    color: rgb(151, 150, 150);
    opacity: 0.9 !important;
}
.cards{
    /* background-color: #e6e3e3; */
    /* border-radius: 50px; */
    /* height: 100% !important; */
}
/* .cards:hover{
    background-color: #ffcb0f;
    color: white;
} */
.about-us{
    background: linear-gradient(90deg,#555, #ffcb0f);
    width: 100%;
    height: 150px !important;
}
.vm-img{
  height: 450px !important;
  width: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
/* .about-us h1{
    font-size: 70px !important;
}
@media(max-width:){
  .about-us h1{
    font-size: 70px !important;
}
} */
/* .vision::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 100%;
    background: #a3a2a2;
    z-index: -1;
    transition: 0.5s ease-in-out;
}
.vision:hover::before{
    width: 100%;
    
}
.mission::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 100%;
    background: #555;
    z-index: -1;
    transition: 0.5s ease-in-out;
}
.mission:hover::before{
    width: 100%;
} */
.cards-team:hover{
    box-shadow: 10px 10px 20px rgb(179, 179, 179) !important;
    transition: .5s;
}
.team{
    background-position: center;
    background-size: cover;
    object-fit: cover;
}
.team-icon{
    font-size: 20px;
    background-color: #ffcb0f;
    color: white;
    border-radius: 50px;
}
.team-icon:hover{
    background-color: #8c8c8c;
}
.project{
    height: 350px !important;
    width: 100%;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
.car img{
    height: 150px !important;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}
@media(max-width: 768px){
  .car img{
    height: 250px !important;
  }
}
.cardss{
    transition: .5s all;
    overflow: hidden;
}
.cardss:hover img{
    transform: scale(1.1);
    transition: .5s;
}
.cardss .position-absolute a{
    display: none;
    padding: 10px 20px;
    background-color: var(--primary);
    color: white;
    border: 2px solid transparent;
}
.cardss:hover .position-absolute a{
    display: block;  
}
.cardss:hover .position-absolute a:hover{
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff ;
}
.cardss .position-absolute h5{
    color: white;
}
.cardss{
    transition: .5s all !important;
}
.cardss .position-absolute{
    content: "";
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    align-items: center;
    justify-content: center;
    margin: auto;
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
    color: white;
    overflow: hidden;
    border-top: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    transition: .5s all !important;

}
 .cardss:hover .position-absolute{
    top:0;
    bottom: 0%;
    height: 100%;
}
.gallery-img{
  height: 250px !important;
  background-position: center;
  background-size: cover;
  object-fit: cover;
}
.contact{
    background-color: #c0c0c0;
}
input, textarea{
   border: 1px solid whitesmoke !important;
   border-radius: 0px !important;
}
input:focus, textarea:focus{
    box-shadow: none !important;
    border: 1px solid #ffcb0f !important;
}
.btn{
    border: 2px solid #ffcb0f;
    background-color: #ffcb0f !important;
    color: white !important;
    border-radius: 0px !important;
    font-weight: 900 !important;
    transition: .5s !important;
}
.btn:hover{
    background-color: white !important;
    color: #ffcb0f !important;
}
.contact-detail{
    background-color: #ffcb0f;
    height: 100% !important;
}
.cont-icon{
    background-color: #8c8c8c !important;
    color: white !important;
    font-size: 20px;
    transition: .5s;
}
.cont-icon:hover{
    background-color: white !important;
    color: #ffcb0f !important;
}


.footer{
    background-image: url(../images/carousel-3.jpg) !important;
    background-color: rgba(0, 0, 0, 0.806);
    background-blend-mode: multiply;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.footer-icon{
    font-size: 30px;
    background-color: #555;
    border-radius: 50px;
}
.footer-icon:hover, .footer-cont-icon:hover{
    background-color: #ba9201;
}
.footer-link li a:hover{
    color: #ffcb0f !important;
}
.footer-cont-icon{
    font-size: 20px;
    color: white;
    /* border-radius: 50px; */
    background-color: #707070;
}
.whatsapp {
  /* padding: 10px; */
  background-color: #ffcb0f;
  /* margin: 3px; */
}
.services .car{
  box-shadow: 0px 0px 10px rgb(226, 226, 226);
   
}