*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family:f1;
    scroll-behavior: smooth;
    
}
@font-face {
    font-family:f1;
    src: url(alfont_com_rpt-Regular.ttf);
}
@font-face {
    
    font-family:f2;
    src: url(arbfonts-rpt-Bold.ttf);
}

/*navbar style*/
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 5px auto 0 auto;
    border-bottom: 1px solid #141e27; 
    padding: 1vw 2vw;
}
.logo{
   width: 7vw;
}
nav ul{
    display: flex;  
    justify-content: space-between;
    width: 60%; 
    gap: 1vw;
}
nav a{
    color:#141e27;
    font-size: 1.6vw;
    font-weight: 500;
    font-family: f2;
    transition: all .50s ease ;
}
nav a:hover{
color:#5784ab;
}
/*home page style*/
.home{
    height: 100vh;
    position: relative;
    background: url(الصور-03.png) no-repeat;
    background-position:bottom left;
    background-size:62%  auto ;    
}
.text-home{ 
 text-align: center;
 width: 50%;
 position: absolute;
 top: 25%;
 right: 3%;
 line-height: 5.5vw;;

}
h1{
 font-size:4vw;
 color:#141e27;
 font-weight: 900;
 font-family: f2;
}
h3
{
 text-align: center;
 font-size: 3.5vw;
 font-weight: 500;
 color:#5784ab;
 
}
.icons-home{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}
 .icons-home p{
    color: #5784ab; 
    margin-top: 7vw;
    font-size: 1.5vw;
     font-weight: 500;
    line-height: 2vw;
    font-family: f1;
    
   }
.icons-home strong{
    font-size: 200%;
   color: #141e27;
   font-family: f2;
   }
.icons-home span{
    font-size: 200%;
    color: #5784ab;
    font-family: f2;
    font-weight: bold;
   }
   .icon1{
    text-align: right;
   }
.bnr{
 width: 100%;
 height:7.5vw;
 
 background-color: #141e27;
 position: absolute;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: space-evenly;
 border-radius: 2vw 2vw 0px 0;
  padding: 20px;
}
.bnr .row{
   text-align: center;
  
   line-height: 1.5vw;
  margin: 1vw 0;
 
   
 }
.bnr .row img{ 
 width:   3vw;
 height: auto;
 
}
.bnr .row p{

    color: #edecdd;
    font-size: 2vw;
    margin-bottom: 1vw;
   
  }
/*introduction style*/
.introduction
{
   height: 100vh;
   position: relative;
}
.introduction h2{
 
   align-items: center;
   font-size: 3.3vw;
   color: #141e27;
   position: relative;
   font-family: f2;
   width: 41.3vw;
}
.introduction h2::after{
    content: " ";
    height: 1px;
    width: 25vw;
    background-color: #141e27;
    display: block;
    position: absolute;
    left: 4vw;
    top: 60%;
}
.content-into{
 top: 5%;
  margin: 10vw auto;
  width: 80%;
  background-color: #5784ab;
  background:url(الصور-05.png) no-repeat  #5784ab;
  background-position: bottom;
  background-size: 100%   ;
  height: 44vw;
  border-radius: 4vw;
  position: relative;
}
.text-into{
   margin-right:6vw ; 
   position: absolute;
   top: 1.5vw;
   line-height:4vw; 
}
.content-into p{
    color: #fff;
    font-size: 2.5vw;
    font-family: f1;
   margin-top: 1vw;
     
}
.content-into img{
    width: 25vw;
}
 /*scroll up style*/
.up{
    position: fixed;
    bottom: 1vw;
     width:2.5vw;
    height: 2.5vw;
    background-color: #5784ab;
    border-radius: 50%;
    margin-right: 3vw;
    margin-bottom: 3vw;
    cursor: pointer;
     
} 
.up i{
    color: #141e27;
    font-size: 2.5vw;
    transition: all .50s ease ;
    position: absolute;
  
}
.hide{
    display: none;
}
.up i:hover{
    color:#edecdd
}
 /*about style*/
.about
{
    height: 100vh;
    position: relative;
    
}
.about .title{
    align-items: center;
    font-size: 3vw;
    color: #5784ab;
    position: relative;
    font-family: f2;
    text-align: center;
    width: 80%;  
    margin: 30px auto;
    

 
}
.about .title::after {
    content: " ";
    height: 1px;
    width: 32vw;
    background-color: #141e27;
    display: block;
    position: absolute;
    left: 0;
    top: 60%;
   
 
   

}
.about .title::before {
    content: " ";
    height: 1px;
    width: 32vw;
    background-color: #141e27;
    display: block;
    position: absolute;
    right: 0;
    top: 60%;
    
   
 
   

}
.container{
    border: 1px solid #141e27;
    height: 25vw;
    width: 20vw;
    margin: 3vw 0;
    border-radius: 2vw;
    
  
    transition: all .50s ease ;
    cursor: pointer;
    background-color: #141e27;
   


}
.content-about{
    position: relative;
    top: 10%;
}
.container h4{
    font-size: 2.7vw;
    font-weight: bold;
    position: relative;
    font-family: f2; 
    width: 90%;  
    margin: 1vw auto;
    color: #5784ab;
    align-items: center;
}
.container h4::after {
    content: " ";
    top: 50%;
    left: 0;
    height: 1px;
    width: 9.5vw ;
    position: absolute;
    background-color: #5784ab;
    display: block;
 }
.container p{
    width: 90%;
     
    margin: 0 auto;
    text-align: center;
    font-size: 1.80vw;
    color: #fff;
}
.s{
    display: flex;
 
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1vw;
}
.container:hover{
    scale: 1.1;
    box-shadow: 0px 9px 16px rgba(0, 0, 0, 0.9);
}
 
/*team work style*/
.team-work
{
    height: 100vh;
   position: relative;
    
}

.team-work h2{
   
   position: relative;
   font-size:3vw;
   font-family: f2;
   color: #5784ab;

}
.team-work h2::after{
    content: " ";
    height: 1px;
    width: 20vw;
    background-color: #141e27;
    position: absolute;
    top: 60%;
    left: 0%;
   
   

}
.content-team{
    
   display: flex;
  align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
     width: 90%;
     position: relative;
     top: 20%;
     gap: 5.5vw;
}
 
 
.content-team p{
    color: #141e27;
    font-size: 2.3vw;
     
 
}
.content-team img{
    width:40%;
    height: 40%;
    
}



/*team work style*/
.services{
    height: 100vh;
    position: relative;
    padding: 5vw;
}
.containr-ser{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #141e27;
    height: 22vw;
    width: 80vw;
    margin: 10vw  auto 0 auto;
    border-radius: 4vw;
    position: relative;
}
.containr-ser img{

     width: 35vw;
    
    position: absolute;
    left: 0;
    bottom: 0;
 }
.text-ser{
    position: absolute;
    right: 5vw;
    top: 1vw;
     
     
     
}

.text-ser h2{
   font-size: 3vw;
   color: #5784ab;
   font-family: f2;
   margin-bottom: 0.5vw;
}
.text-ser p{
    color: #fff;
    font-size: 2vw;
    line-height: 3vw;
}
.products{
    height: 100vh;
    position: relative;
      
}
.content-pro{
    height: 75vw;
}
.content-pro h2{
    width: 80%;
    position: relative;
    font-size:3vw;
    font-family: f2;
    color: #5784ab;
    margin: 0 auto; 
   
}
.content-pro h2::after{
    content: " ";
    height: 1px;
    width: 67vw;
    background-color: #141e27;
    display: block;
    position: absolute;
    top: 60%;
    left: 0;
}
.container-pro {
     top: 3vw;
    width: 22vw;
    height: 18.7vw;
    margin: 0 auto;
    border: #5784ab 1px solid;
    border-radius: 1.5vw;
    transition: all 0.8s ease;  
    position: relative;
    
}
.container-pro:hover {
    height: 30vw;
}
.container-pro h4{
    font-family: f2;
    font-size: 2vw;
    margin :    0 auto;
    width: fit-content;
    margin-bottom: .5vw;
    border-bottom:1px solid #141e27 ;
    text-align: center;
     
    
}
.container-pro p{
     font-size: 1.8vw;
     text-align: center;
     width: 17vw;
     margin: 0 auto;
     color: #5784ab;
     line-height: 2.5vw;     
}


.container-pro .img-container {
    background-color: #2a679c;
    width: 100%;
    height: 14.5vw;
    border-radius: 1.5vw;
    transition: transform 0.8s ease;  
    position: absolute;
    bottom: 0; 
   
}
 
.s2{
    display: flex;
    width: 80%;
    margin: 3vw auto;
    gap: 12vw;
     justify-content: center;
    height: 30vw;
}
.img1{
    position: absolute;
    width: 95%;
    top: 1vw;
    right: .5vw;
}
.img2{
    position: absolute;
    width: 85%;
    top: 1vw;
    right: 1.3vw;
}
.img3{
    position: absolute;
    width: 90%;
    bottom: 0vw;
    right: 1vw;
}
.img4{
    position: absolute;
    width: 70%;
    top: 1vw;
    right: 2.7vw;
}
.img5{
    position: absolute;
    width: 90%;
    top: 3vw;
    right: 1vw;
}
.img6{
    position: absolute;
    width: 80%;
    top: 2vw;
    right: 2vw;
}
.nhres{
    height: 100vh;
    position: relative;
}
.content-nhres h2{
    width: 80%;
    margin: 1vw auto;
    font-family: f2;
    font-size: 2.5vw;
}
.container-nhres{
     width: 80%;
     height: 41.2vw;
     background-color: #141e27;
     margin: 0 auto;
     display: flex;
     position: relative;
     border-radius: 3vw;
    }
.nhres img{
   position: absolute;
   width: 65%;
   bottom: 0;
}
 
.nhres .i1{
    top:4.2vw ;
    right: 35.5vw;
    position:absolute;
    font-size:2vw;
    color: #fff;
}
.nhres .i2{
    top:11vw ;
    right: 43vw;
    position:absolute;
    font-size:2vw;
    color: #fff;
}
.nhres .i3{
    top:18vw ;
    right: 46vw;
    position:absolute;
    font-size:2vw;
    color: #fff;
}
.nhres .i4{
    top:25.3vw ;
    right: 47.2vw;
    position:absolute;
    font-size:2vw;
    color: #fff;
}
.nhres .i5{
    top:31.6vw ;
    right: 46vw;
    position:absolute;
    font-size:2vw;
    color: #fff;
}
 
.content-shr{
    width: 80%;
    margin-bottom: 100px;
 
    margin: 0 auto;
}
.content-shr img {
     width: 100%;
    margin: 0 auto;
}
.content-shr h2{
    align-items: center;
    font-size: 3vw;
    color: #141e27;
    position: relative;
    font-family: f2;
    text-align: center;
    width: 100%;  
    margin:10vw auto 2vw auto;
   

 
}
.content-shr h2::after {
    content: " ";
    height: 1px;
    width: 32vw;
    background-color: #141e27;
    display: block;
    position: absolute;
    left: 0;
    top: 60%;
   
 
   

}
.content-shr h2::before {
    content: " ";
    height: 1px;
    width: 32vw;
    background-color: #141e27;
    display: block;
    position: absolute;
    right: 0;
    top: 60%;
    
   
 
   

}
.content-shr p{
   
    font-size: 2vw;
    color: #141e27;
    margin: 0 auto;
    width: 60%;
   

 
}

footer{
    margin-top: 10vw;
    background: url(end.png) repeat-x;
    background-position:center bottom;
    background-size: 50%;
    height: 30vw;
    background-color: #141e27;
    border-radius:2vw 2vw 0 0 ;
}
.content-f{
 
     
    margin: 2vw  auto;
    padding: 2vw;
}
.content-f img{
     position: absolute;
     right: 45%;
     width: 10vw;
     
}
 .content-f2{
    display: flex;
    justify-content: space-around;
   margin-top: 10vw;
 }
 
 .content-f2 .cs{
    display: flex;
     justify-content: end;
     align-items: center;
   
 
 }

 .content-f2 .call, .location,.socal{
    display: flex;
    align-items: center;
    gap: 1vw;
    
 }
 .content-f2 p{
    color: #edecdd;
    font-size: 1.5vw;
    
    text-align: center;
    
}
 
 .content-f2 i {
    color:#5784ab;
    font-size: 2vw;
    transition: all .5s ease;
    margin: .5vw;
 }
 .content-f2 i:hover {
   color: #edecdd;
   
 }
 @media (max-width:600px) {
    .logo{
        width: 15vw;
     }
     nav ul{
      
        width: 70%; 
        gap: 1vw;
    }
     nav a{
  
        font-size: 2.2vw;
   
    }
    .home{
        background-size: 150vw;
    }
    .text-home{
        
        width: 100%;
        position: sticky;
        margin: 15% auto;
        line-height: 10vw;
  
    }
    h1{
        font-size:7vw;
    }
    h3
    {
    font-size: 6vw;
    }
    .icons-home{
        gap: 3vw;
        justify-content: space-between;
        
        width: 80%;
        margin: 12vw auto;
    }
    .icons-home p{
        font-size: 3.5vw;
        line-height: 4.5vw;
        margin-top: 10vw;
    }
    .icons-home strong ,.icons-home span{
         font-size: 150%;
    }
    .bnr{
        width: 100%;
        height:15vw;
        
  
       }
       .bnr .row{
      
       
        line-height: 3vw;
     
      
        
      }
      .bnr .row img{ 
        width:   7vw;
       }
       .bnr .row p{
                font-size: 3vw;
       
       
      }

    .introduction
    {
    top:20%;
     height:70vw;
     position: relative;
   }
   .s{
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 3vw;
   }
   .about
{
    height: 150vw;
    position: relative;
    
}
   .container{
    height: 45vw;
    width: 35vw;
    margin: 2vw 0 5vw 0;
   }

   .container:focus{
    scale: 1.1;
    box-shadow: 0px 9px 16px rgba(0, 0, 0, 0.9);
}
.content-about{
    top: 3%;
    position:relative;
  
}
.container h4{
    font-size: 4vw;
    width: 80%;  
 
}
.container h4::after {
 
    width: 13vw ;
 
 }
.container p{
     font-size: 3.1vw;
}
.team-work
{
   height: 130vw;
   position: relative;
    
}
.content-team{
    
    display: block;
    margin: 0 auto;
    top:30%;
    width: 50%;
    text-align: center;
 
 }
 .team-work h2{
   text-align: right;
   width: 92%;
   margin-right: 2vw;
 
 }
 .team-work h2::after{
    width: 30vw;
}
 
.content-team p{
   
    font-size: 3vw;
}
.container-pro:focus {
    height: 30vw;
}
.content-team img{
    width:50vw;
    height: auto;
    margin-right: 4vw;
    margin-bottom: 5vw;
}

.services{
    height: 30vh;
    position: relative;
   
}

.container-pro {
 scale: 1.3;
   
}

.s2{
    margin-bottom: 20vw;
}
.nhres{
    height: 70vw;
}
.content-nhres h2{
    width: 80%;
    margin: 30vw auto 3vw auto;
    font-family: f2;
    font-size: 2.5vw;
}
 
 }