/*
Theme Name: Emarat
Theme URI: 
Author: Taha
Author URI:
Description: 
Requires at least: 5.3
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.9
License: GNU 
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Emarat
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

.-nin{
    position: relative;
    opacity: 50%;
}
.-nin::before{
    content: "";
    position: absolute;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: rgb(255, 208, 0);
    transition: 0.4s ease-in-out;
    z-index: 1;
    
}
.-nin:hover::before{
    width: 100%;

}
.-nin:hover{
    opacity: 100%;
}

li{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
}
.card{
   
    height: 350px;
    
    border-radius: 20px;
    border: 3px solid rgb(216, 216, 216); 
    font-size: 18px;
}
.card a{
    width: 70%;
    height: 40px;
}
.card button{
    width: 100%;
    height: 40px;
    background-color: rgb(255, 185, 7);
    border-radius: 15px;
    border: 0px;
    color: white;
}
.-text-card{
    color: rgb(161, 161, 161);
    transition: 1s all; 
    transition-delay: 0.7;
    transform: translateY(40px);
    opacity: 0;
}
.card:hover .-text-card{
    transform: translateY(0px);
    opacity: 1;
}

.-section{
    background-color: white;
    
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.-imagebox{
    width: calc(50% + 100px);
    height: 100%;
    background-color: rgb(255, 204, 75);
    border-left: 200px solid white;
    border-bottom: 400px solid transparent;
    position: absolute;
    right: 0;
}
.-box-project{
    width: 80%;
    height: 100%;
    /* background-color: aquamarine; */
    border-radius: 40px;
    filter: blur(0.5px);
    border: 3px solid rgb(255, 255, 255);
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    transition: 0.9s ease-in;
    transition-delay: 0.5;

}
.-box-project:hover{
    background-color: rgb(82, 82, 82);
   filter: blur(0px);

}
.-box-project p i{
    font-size: 14px;
    color: rgb(253, 253, 253);
    /* transition: transform .2s; Animation */
    transition: 0.9s ease-in;
    transition-delay: 0.5;
}
.-footer{
   position: relative;
    width: 100%;
    height: 450px;
    
}
.-img-footer{
    width: 100%;
    position: absolute;
    height: 100%;
}
.-footer div{
    opacity: 100%;
}
a{
    text-decoration: none;
    color: black;
}
.button{
   
    position: -webkit-sticky;
    position: sticky;
    bottom: 25px;
  
   
    z-index: 999;
}
.-title-page{
    position: relative;
    padding: 15px;
}
.-title-page::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 42%;
    border-radius: 15px;
    margin-top: 115px;  
    width: 17%;
    /* height: 100px; */
    border-bottom:3px solid orange ;
    overflow: hidden;
   
}

.-title-page::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 42%;
    border-radius: 15px;
    margin-top: 115px;  
    width: 1%;
   

    /* height: 100px; */
    border-bottom:3px solid rgb(255, 255, 255) ;
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes example {
    0%   {left: 41%;}
    
    100% {left: 59%;}
  }

  p{
    line-height: 2rem;
    
  }
  .--card-service{
    position: relative;
  }
  .--card-service-image{
    width: 85px;
    height: 85px;
    border-radius: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: -40px;
    left: 35%;
    box-shadow:  var(--bs-box-shadow)!important;
    
  }
  .-card-contact{
    position: relative;
    box-shadow: 0 0.75rem 1.25rem 0.0625rem rgba(64, 64, 64, 0.09);
  }
  .-card-contact::after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 10%;
    width: 80%;
    height: 20px ;
    background-color: #ffffff;
    box-shadow: 0 1.1875rem 1.75rem 0.3125rem rgba(64, 64, 64, 0.09);
    z-index: -1;
  }
  .--main-navbar li a{ 
    color: white;
     font-size: 22px;

  }
  .menu-item{
    position: relative  !important;
    opacity: 100% !important;
  }
  .menu-item::before{
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    width: 0% !important;
    height: 2px !important;
    background-color: rgb(255, 208, 0) !important;
    transition: 0.4s ease-in-out !important;
    z-index: 1 !important;
    
}
.menu-item:hover::before{
    width: 100% !important;

}
.menu-item:hover{
    opacity: 100% !important;
}
.comment-form{
    /* display: flex !important;
    justify-content: space-between !important; */
}
.comment-form textarea{
   width: 30% !important;
   height: 50px !important;
   border-radius: 20px !important;
   border: 2px solid white;
}
.comment-form input{
  background-color: rgb(255, 208, 0) !important;
  border-radius: 20px !important;
  border: 2px solid white;
  color: white;
  padding: 5px;
  margin-bottom: 5%;
}

.iconHover-main{
    opacity: 100%;
    transition: opacity 450ms ease-in, transform 400ms ease-in;
}
.iconHover-main:hover{
    opacity: 50%;
}








.fade-in {
    opacity: 0;
    transition: opacity 450ms ease-in;
}

.fade-in.appear {
    opacity: 1;
}

.form-left {
    transform: translateX(-50%);
}

.form-right {
    transform: translateX(50%);
    
}

.form-left,
.form-right {
    /* transition: opacity 250ms ease-in, transform 400ms ease-in; */
    transition: opacity 450ms ease-in, transform 600ms ease-in;
    opacity: 0;
}

/* .form-left.appear,
.form-right.appear {
    transform: translateX(0);
    opacity: 1;
} */
.form-left.appear{
    transform: translateX(15%);
    opacity: 1;
}
.form-right.appear {
    transform: translateX(0);
    opacity: 1;
}

.form-right1 {
    transition: opacity 250ms ease-in, transform 500ms ease-in;
    transition-delay: 600ms;
    opacity: 0;
}
.form-right1.appear {
    transform: translateX(0);
    opacity: 1;
}
.form-right1 {
    transform: translateX(50%);
    
}

.iconHover-main{
    opacity: 100%;
    transition: opacity 450ms ease-in, transform 400ms ease-in;
}
.iconHover-main:hover{
    opacity: 50%;
}
.--about-us-img{
    background: #E6ECF1 url(img/about-map.png) no-repeat ;
   
}
.--about-us-img div{
    padding: 20px;
}


.--solution-main-img{
    position: relative;
}

.--solution-main-part-1{
    position: absolute;
    top: 28%;
    right: 0;
    background: url(img/solution-part-img-1.png) no-repeat left top;
    background-size: 100%;
    width: 310px;
    height: 310px;
    text-align: center;
}
.--solution-main-part-2{
    position: absolute;
    top:0;
    right: 20%;
    background: url(img/solution-part-img-2.png) no-repeat left top;
    background-size: 100%;
    width: 310px;
    height: 310px;
    text-align: center;
}
.--solution-main-part-3{
    position: absolute;
    bottom:0;
    right:25%;
    background: url(img/solution-part-img-3.png) no-repeat left top;
    background-size: 100%;
    width: 310px;
    height: 310px;
    text-align: center;
}

.--footer{
    width: 100%;
    height: 480px;
    background: url(img/footer.jpg) no-repeat;
    background-size: cover;
}
.--logo-footer{
    border-radius: 15px;
    transition: 0.4s ease-in;
    transform: translateY(0);
    transition-delay:0.2;
    color:white;
}
.--logo-footer:hover{
    /* background-color: white; */
    color: rgb(255, 199, 96);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(71, 44, 2, 0.3) 0px 30px 60px -30px;
    transform: translateY(-10px);
}












@media screen and (max-width: 768px) {
   
    .menu-item{
        position: relative  !important;
        opacity: 100% !important;
      }
      .menu-item::before{
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        width: 0% !important;
        height: 2px !important;
        background-color:rgb(255, 208, 0) !important;
        transition: 0.4s ease-in-out !important;
        z-index: 1 !important;
        
    }
    .menu-item:hover::before{
        width: 20% !important;
    
    }
   .--card-service{
        position: relative;
      }
      .--card-service-image{
        width: 85px;
        height: 85px;
        border-radius: 100%;
        background-color: rgb(255, 255, 255);
        position: absolute;
        top: -40px;
        left: 40%;
        box-shadow:  var(--bs-box-shadow)!important;
        
      }
   
  }
  
  .--navbar-color-js{
    transition: 0.4s ease-in;
   
    transition-delay:0.2;
    background-color: black;
    color: white;
   
  }