@media only screen and (max-width:768px) {
 
  
  #toggle-Menu{
      display: flex;
     }
   .header ul.showData {
      display: flex;
      flex-direction:column;
      background-color:#f4f4f5;
      justify-content: space-between;
      width: 70%;
        height: 250px;
        position: absolute;
        top: 41px;
        right: 18%;
      border-radius: 10px;
      border: 1px solid rgb(22, 145, 124);;
      text-decoration: none;
      padding: 25px;
      cursor: pointer;
    }
    .header ul.showData li {
      text-align: left;
      border-bottom: 1px solid rgb(22, 145, 124);
      width: 100%;
    }
    .header ul.showData li a{
      text-decoration: none;
      list-style: none;
      color: rgb(53, 131, 111);
    }
    .header ul {
      display: none;
    
   }
  }

    #search-form.active{
    display: inline-flex;
   }





   

  .input-group input:focus~label ,.input-group input:valid~label ,.input-group textarea:focus~label
 {
  top: -30px;
  font-size: 20px;
background-color: rgb(249 250 251);
}


.input-group input #text{
  text-wrap: wrap;
  width: fit-content;
 text-align: justify;
 }
 .submit{
  position: relative;
   font-size: 20px;
   margin-left:80%;
   padding: 5px;
   background-color: #ffffffbb;
   color: var(--text-color);
   width:16%;
   border: 1px solid var(--main-color);
   border-radius: 5px;
   cursor: pointer;
  
 }
 .submit:hover{
   background-color: var(--text-color);
     color: #fff;
 
 }
 .client::before{
    content: "f060"; /* Unicode أيقونة السهم لليسار */
    font-family: "Font Awesome 6 Free"; /* استدعاء الخط */
    font-weight: 900;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: white
 }
 .client::after{
  content: "f061"; /* Unicode أيقونة السهم لليمين */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(255, 0, 0);
 }