*{
    margin: 0%;
    padding: 0%;
  }
  /*تجاوب مع حاسوب*/
  body{
     direction: center;
     }
      .call-btn i{
            margin-right: 5px;
          }
          .fixed-icons {
  display: inline-block;
  bottom: 20px;
                    right: 20px;
                    z-index: 9999;
                  }
  
                  .fixed-icons .call-icon {
                    display: flex;
                    align-items:center;
                    justify-content: flex-end;
                    width: 90px;
                    height: 30px;
                    padding: 5px;
                    background-color: #007bff;
                    border-radius: 5px;
                    color: #fff;
                    text-decoration: none;
                    margin-right: 900px;
                  }
  
                  .fixed-icons .call-icon i {
                    margin-right: 5px;
                  }
  
                  .fixed-icons .call-icon span {
                    margin-left: 5px;
                  }
  
     
     .header {
      
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 65px;
      z-index: 9999;
  }
     .header{
     background-color: #026b89;
     
     margin-top: -15px;
     }
  .header ul li{
     float: right;
      margin: 15px;
     color: #fff;
     font-weight: bold;
      list-style: none;
    }
    .header ul li a{
      color: #fff;
      display: block;
  
    }
  .logo p{
     float: left;
      margin: 15px;
      color: #fff;
     font-weight: bold;
     font-size: 22px;
   }
  .slider{
      background-image: url(./q/4.webp);
      height: 450px;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: -33px;
   }
  .slider h1{
     direction: rtl;
     color: #fff;
     font-size: 50px;
     padding-top:  100px;
     padding-right:65%;
   } 
   
     
   .slider h2{
     float: left;
     padding-left: 100px;
     background-color: #026b89;
     width: 90px;
     padding: 10px;
     margin-left: 70px;
     color: #fff;
     border: #fff solid 2px;
   } 
  
    .خدماتنا h3{
     text-align: center;
     border-bottom: #ccc solid 2px;
     font-size: 50px;
     color: #026b89;
   }
   .خدماتنا p{
     text-align: center;
     font-size: 23px;
   }
    .بطاريات{
     width: 240px;
     height: 400px;
     float: right;
      margin: 10px;
      border: #ccc solid 2px;
  
  
   }
   .بطاريات img{
      width: 240px;
      border: #026b89 solid 2px;
       height: 250px;

   }
   .بطاريات h2{
     border-bottom: #ccc solid 2px;
     padding-bottom: 10px;
     text-align:center;
   }
  .بطاريات h3{
     float: left;
     padding-left: 100px;
     background-color: #026b89;
     width: 90px;
     padding: 10px;
     margin-left: 70px;
     color: #fff;
     border: #fff solid 2px;
   }
   .بطاريات h4{
     border-bottom: #ccc solid 2px;
     padding-bottom: 10px;
     text-align:center;
     padding: 10px;
   }
   p{
     margin: 5px; 
   }
   .contact{
    background-color: #026b89;
    clear: both;
   }
   .contact h1{
    text-align: center;
     border-bottom: #fff solid 2px;
     font-size: 40px;
     color: #fff;
     padding: 20px;
   }
  
   .for input{
     width: 500px;
     height: 25px;
   }
  
   .for button{
     color: #fff;
     background-color: #026b89;
     margin: 10px;
     font-size: 16px;
     font-weight: bold;
     padding: 5px;
     padding-right: 30px;
     padding-left: 30px;
   }
   .cont{
     width: 1000px;
   }
   .related-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border: #026b89 solid 2px;
  }

  .related-item {
    flex-basis: calc(33.33% - 20px);
    margin: 10px;
    text-align: center;
   

  }

  .related-item img {
    width: 100%;
    height: auto;
    border: #026b89 solid 2px;
  }

  main {
    margin-top: 80px; /* ارتفاع الهيدر + الهوامش العلوية */
    padding: 20px;
  }
  .related-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border: #026b89 solid 2px;
  }

  .related-item {
    flex-basis: calc(33.33% - 20px);
    margin: 10px;
    text-align: center;
   

  }

  .related-item img {
    width: 100%;
    height: auto;
    border: #026b89 solid 2px;
  }

  

  .خدماات {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
   
   border: #026b89 solid 2px;
    margin-top: 5px;
    max-width: 100%;
  }
  

  

  
.خدماات h2 {
  align-items: center;
  background-color: #026b89;
    margin-top: 0px;
    font-size: 30px;
    color: #fff;
   
  }
  
.section-content {
    margin-left: 20px;
  }
  .section-contennt {
    margin-right:0px;
    text-align: center;
  }

  

  .خدماات {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
   border: #026b89;
   border: #026b89 solid 2px;
    margin-top: 5px;
    max-width: 100%;
  }
  

  

  
.خدماات h2 {
  background-color: #026b89;
    margin-top: 0px;
    font-size: 24px;
    color: #fff;
   
  }
  
   /*تجاوب مع الهاتف  0 الى 600*/
   @media screen and (max-width:600px) {
       
    .fixed-icons .call-icon {
    margin-right: 260px;
   
  }
  
    .header ul li{
      font-size: 8px;
      margin : 5px;
      margin-top: 15px;
  
     }
   
  
  
    .slider{
      background-image: url(./q/4.webp);
      height: 400px;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: -33px;
   }
  
    .slider h1{
      direction: rtl;
      color: #fff;
      font-size: 50px;
      padding-top:  10px;
      padding-right:20%;
    } 
  
    .logo p{
    
      font-size:15px;
    }
    .contact{
      background-color: #026b89;
      clear: both;
     }
     .contact h1{
      text-align: center;
       border-bottom: #fff solid 2px;
       font-size: 40px;
       color: #fff;
       padding: 20px;
     }
    
     .for input{
       width: 90%;
       height: 25px;
     }
    
     .for button{
       color: #fff;
       background-color: #026b89;
       margin: 10px;
       font-size: 16px;
       font-weight: bold;
       padding: 5px;
       padding-right: 30px;
       padding-left: 30px;
     }
     .cont{
       width: 50%;
     }
  
     .بطاريات{
      width: 40%;
      height: 365px;
      float: center;
       margin: 10px;
       border: #ccc solid 2px;
   
   
    }
    .بطاريات img{
       width: 144px;
       border: #026b89 solid 2px;
   
      height: 150px;
    }
    .بطاريات h2{
      border-bottom: #ccc solid 2px;
      padding-bottom: 10px;
      text-align:center;
    }
   .بطاريات h3{
      float: center;
      background-color: #026b89;
      width: 90px;
      padding: 10px;
        margin-left: 23px;
  
      color: #fff;
      border: #fff solid 2px;
    }
    .بطاريات h4{
      border-bottom: #ccc solid 2px;
      padding-bottom: 10px;
      text-align:center;
      padding: 10px;
    }
    
  
  
  
   }