*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  
}
.contaner{
    width: 100%;

   
}
header{
    height: 100vh;
    width: 100%;
}
nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 11%;
position: relative;
    
    width: 100%;
    background-color: rgb(16, 117, 248);
z-index: 2;
}

nav img{
    width: 100px;
    height: 90px;
    border-radius: 50%;
}
nav ul{
    display: flex;
    justify-content: space-between;
 list-style: none;
 width: 30%;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-size: 20px;


}
nav a{
    text-decoration: none;
    color: white;
}
.background{
    height: 100%;
width: 100%;
}
.text{
height: 200px;
width: 40%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%);
color:white;
font-size: 30px;
z-index: 1;
width: 50%;
border-radius: 20px;

} 


.text h2{
    margin-top: 15px;
}
    .text button{
        margin-top: 20px;
        border: none;
        width: 150px;
        height: 25px;
        background-color: #145fe1;
        color: aliceblue;
        border-radius: 10px;
    } 
    .backimg{
        
        background-attachment:fixed;
        background-image: url(img/araby\ ai\ images\ \(2\).png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        
        
        background-position:center ;
        
        height: 100%;
        
    }
    
    
    
    
    
    section{
        width: 60%;
        margin: auto;
        height: 100vh;
    }

    #What-we-offer h1{
 
        text-align: center;
        margin: 200px 0 50px 0;
        font-size: 40px;
        }
    .conter{
     background-color: rgb(17, 122, 241); 
        width: 70%;
        height: 80%;
        display: flex;
        align-items: center;
        margin-bottom: 50px;
    }
    .conter img{
    width: 30%;
    height: 60%;
    
}
.conter p{
    color: aliceblue;
    direction: rtl;
    opacity: .6;
    margin: 10px;
    font-size: 25px;
}
.conter p span{
    color: rgb(86, 248, 10);
    font-weight:900;
    font-size: 30px;
}
.conter ul{
    direction:rtl;
    width: 40%;
    font-size: 20px;
    
}
.foot{
    height: 100vh;
    width: 100%;
    position: relative;
    top: 300px;
    background-color: #145fe1;
}

.foot .img{
    width: 20%;
    height: 40%;
    
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    
    
}
.foot .img img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    
}
.foot::before{
    content: "";
    background: rgb(0, 0,0,0.7);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.masge{
    height: 50px;
    width: 300px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%);
}
.masge i{
    margin-left: 40px;
    font-size: 40px;
    
    
}
.conter span {
    
    width: 40%;
    color:  rgb(86, 248, 10);
    font-size: 30px;
    font-weight:900;
    direction: rtl;
    margin-right: 10px;
    
            }
            .foot h1{
            
                
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #145fe1;
            }
            .conter2{
                float: right;
            }
            @media(min-width:1000px) and (max-width:1700px){
   
        nav{
            height: 10%;
        }
        nav img{
            width: 70px;
            height: 60px;
        }
        .conter{
            
            width: 600px;
            height: 25%;
            margin-bottom: 50px;

        }
        .conter img{
            height: 100%;  
        }
        
        
        .conter ul{
        width: 70%;
        font-size: 20px;
    }
    .conter span {
        width: 40%;
        font-size: 20px;
    }
    nav ul{
        
        width: 40%;
        
         font-size: 20px;
         
         
        }
        .foot .img{
            height: 20%;
            }
            .foot h1{
     font-size: 20px;
     
    }
    .text h1{
        font-size: 30px;
    }
    .text h2{
        font-size: 25px;
    }
    .text span{
        font-size: 50px;
    }
        
}
    @media(min-width:600px) and (max-width:999px){
        
        nav{
            height: 8%;
        }
        nav img{
            width: 80px;
            height: 70px;
        }
        nav ul{
            width: 50%;    
            font-size: 18px;
        }
        .text h1{
            font-size: 20px;
        }
        .text h2{
            font-size: 20px;
        }
        .text span{
            font-size: 30px;
        }
        .conter{
            
            width: 450px;
            height: 250px;
            margin-bottom: 50px;
            
            
        }
        .conter p{
            margin: 10px;
            font-size: 20px;
        }
        .conter p span{

            font-size: 25px;
        }
        .conter img{
            height: 100%;  
        }

        
        .conter ul{
            width: 70%;
            font-size: 15px;
        }
       .conter span {
           width: 50%;
font-size: 16px;
        }
        .foot .img{
            height: 35%;
            width: 50%;
        }
        .foot h1{
            font-size: 20px;
            text-align: center;
            width: 90%;
            
        }
        
    }
    @media(min-width:400px) and (max-width:599px){
    
        nav{
            height: 7%;
            width: 100%;
        }
        nav img{
            width: 60px;
            height: 50px;
        }
        nav ul{
            width: 60%;
            font-size: 14px;
        }
        .backimg{
            width: 100%;
            
            height: 60%;
            
            
        }
        .text{
            width: 90%;
            top: 71%;
            color: #145fe1;
        }
        .text h1{
            font-size: 25px;
          margin-top: 20px;
        }
        .text h2{
            font-size: 25px;
        }
        .text span{
            font-size: 30px;
        }
        .conter{
            
            width: 100%;
            height: 220px;
            margin-bottom: 50px;
            float: none;
            
        }
        .conter img{
            height: 100%;  
        }

        
        .conter ul{
            width: 70%;
            font-size: 12px;
        }
       .conter span {
           width: 60%;
        font-size: 14px;
        }
        section{
            width: 90%;
            
        }
        .conter p{
            
            
            margin: 10px;
            font-size: 20px;
            }
            .conter p span{
                font-size: 25px;
            }
            .foot .img{
                height: 20%;
                width: 45%;
            }
            .foot h1{
                font-size: 15px;
                text-align: center;
                width: 90%;
                
            }
  
            #What-we-offer h1{
                font-size: 30px;
                margin: 100px 0 20px  0;
                }
        }

        
    @media(min-width:200px) and (max-width:399px){

        .backimg{
            width: 100%;
            
            height: 60%;
            
            
        }
 
        nav{
            height: 8%;
            width: 100%;    
        }
        nav img{
            width: 60px;
            height: 50px;
        }
        nav ul{
            width: 60%;
           
            font-size: 8px;
           }
           .text{
           
               width: 90%;
            top: 71%;   
           }
           .text h1{
            margin-top: 25px;
            font-size: 15px;
            color:#145fe1;
     
        }
        .text h2{
            font-size: 15px;
            color:#145fe1;
        }
        .text span{
            font-size: 20px;
        }
        .conter{
       
            width: 100%;
        height: 200px;
margin-bottom: 50px;
float: none;


}
#What-we-offer h1{
font-size: 30px;
margin: 100px 0 20px  0;
}

.conter img{
    height: 100%;  
    
}


.conter ul{    
            width: 700px;
            font-size: 10px;
            list-style: none;
            padding: 0;
        }
        
        .conter span { 
        width: 700PX;
       text-align: center;
        font-size: 8px;
        margin: 0;
        
        }
        section{
            width: 90%;
            }
            .conter p{
            margin: 0px;
            font-size: 10px;
            }
            .conter p span{
                                 font-size: 18px;
            } 
            .foot .img{
                height: 20%;
                width: 45%;
                }
                .foot h1{
         font-size: 10px;
        text-align: center;
         width: 90%;
 
    
                }
                .masge{

                    width: 150px;

                }
                .masge i{
                    margin-left: 20px;
                    font-size: 20px;
                
                  
                }

    }
    @media(min-width:50px) and (max-width:199px){
        .backimg{
            width: 100%;
    
    
            height: 70%;
         
        }
        #What-we-offer h1{
            font-size: 30px;
            margin: 100px 0 20px  0;
            }
        nav{
            height: 7%;
        }
        nav img{
            width: 50px;
            height: 40px;
        }
        nav ul{
            width: 60%;
            font-size: 6px;
           }
           .text{
               width: 90%;
               top: 60%;
           }
           .text h1{
            font-size: 12px;
            margin-top: 20px;
        }
        .text h2{
            font-size: 12px;
        }
        .text span{
            font-size: 15px;
        }
        .conter{
       
            width: 100%;
        height: 200px;
margin-bottom: 50px;
float: none;

        }
        .conter img{
            height: 100%;  
         
        }
        .conter ul{
            width: 1000px;
   
        font-size: 8px;
    list-style: none;
    padding: 0;
    }
  
       .conter span {
        width: 700PX;
        font-size: 8px;
        margin: 0;
        
        }
        section{
            width: 90%;

            }
            .conter p{
         

            margin: 0px;
            font-size: 8px;
            }
            .conter p span{
                                 font-size: 10px;
            } 

          .foot .img{
                height: 20%;
                width: 80%;
                }
                .foot h1{
         font-size: 6px;
        text-align: center;
         width: 90%;
 
    
                }
                .masge{

                    width: 50px;

                }
                .masge i{
                    margin-left:0;
                    font-size: 10px;
                
                  
                }

    }