@media only screen  and (min-width:200px) and (max-width:575px) 
{

   body{
      margin-bottom:35px;
   }

.Truck{
   display: none;
}
.Icons
   {
       display:flex;
   }
   header{
    display: flex;
    flex-direction: column;
    position:sticky;
    top: 0px;
    z-index: 999;
   }
   header button{
      display: none;
   }

.banner{
   width: 100%;
   height: 700px;
}
   .banner .bannermid{
    width:100%;
    display: flex;
    flex-direction: column;
}
.banner .bannermid .content{
    padding:20px 10px;
}

.banner .bannermid .content img{
  width:90px;
  padding-left: 10px;
}
.banner .bannermid .content h2{
   font-size: 20px;
}
.banner .bannermid .content h3{
   font-size:17px;
}
.banner .bannermid .content p{
font-size:13;
}
.banner .bannermid .Form{
   margin:10px;
}
.banner .bannermid .Form form
   {
   padding:10px 20px;
   border-radius: 10px;
}
.midSection {
        flex-direction: column;
    }

    .midService{
      flex-direction: column;
      
    }
    .midService .item1
    {
      width: 98%;
      margin: 1%;
    }
    
    .midService .item1 .content button{
       padding: 10px 40px;
     
   }
 .IconAreaMid{
   flex-direction: column;
   gap: 10px;
 }
 .IconAreaMid .IconSection img{
   margin-left:50px;
}
.AchiventSectionMid{
   flex-direction: column;
   margin: auto;
   display:inline;
   text-align: center;
}

.HappyMid{
   flex-direction: column;
   position: relative;
   z-index:0;
}
.HappyMid .content{
   width: 100%;
   padding-top: 120px;
}
.HappyMid .profile{
    width:30%;
    height: 165px;
    z-index:0;
    background-color:yellow;
    text-align: center;
    position: absolute;
    top:5px;left:100px;
    
}
.PosterMid{
   flex-direction: column;
   
}

.Posters{
  flex-basis: 15%;
  margin: 2px;
  text-align: center;
  border-color:white;
}
.Posters img{
    width:180px;
    border-radius: 10px;
    border-color:white;
    
}
.Posters:hover img{
   border: 1px solid cyan;
   transition: 1s;
}














}