@media (max-width: 576px){


*{

      box-sizing: border-box;
}
header{
      margin: 0;
      width: 576px;
}

html, body {
  margin: 0;
  /* padding: 10px; */
  overflow-x: hidden;
  /* background-color: rgb(220, 193, 246); [for check the responsiveness] */
  max-width: 100%;
} 

.navbar{
      margin-bottom:120px ;
      margin-top: 10px;
      align-items: center;
      padding: 10px 5px 0px 10px;
      position: absolute;
      /* width: 100%; */
}

.one, .two, .three{
      display: none;
}
.four{
      font-size: large;
      display: block;
      /* margin-top: 15px; */
}
.hero-content{
      display: flex;
      flex-direction: column-reverse;
      position: relative;
      justify-content: flex-start;
  width: 100%;
  /* margin-left: calc(-50vw + 50%); */
      margin-bottom: 30px;

      
}
.hero-title{
      padding: 10px ;
}
.hero{
      margin-top: 100px;
      width: 100%;
      
}
.hero-content img{
       /* width: 100%; */
       height: auto;
   display: block;
   margin-bottom: 10px;
   
}

.hero-content h1{
      margin-top: 30px;
}

.our-plants{
margin-bottom: 20px;
padding: 20px;
width: 100%;
}

.our-plants-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      width: 100%;
}

.our-plants-grid button{
      font-size: 10px;
      padding: 12px 45px;
       white-space: nowrap;
}

section .plant-lover-s-3{
      margin-bottom: 0px;
      flex-direction: column;
      /* width: 450px; */
      width: 100%; /*[its worked great]*/
      padding: 20px;
      height: auto;
}

.trusted{
      display: none;
}


.deals-section{
      align-items: center;
      justify-content: center;
      padding: 20px;
}

.deals-section h1{
      font-size: large;
}

.deals-container{
      flex-direction: column;
      align-items: center;
      display: block;
      margin-top: 30px;
      gap: 10px;
      
}
.small-deals{
      gap:0;
      
}
.deal-card, .large {
   width: 100%;
  max-width: 100%;
  height: 180px;
  margin: 0 auto 20px;
}

.deal-card img,
.large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px; /* optional */
}

.deal-card.small {
  height: 300px;
}


.colorful-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.colorful-title input {
  padding: 7px;
  margin-top: 8px;
  width: 190px;
}

.colorful-title button {
  padding: 7px 15px;
    margin-top: 8px;
    width: 90px;

}
.form{
      display: flex;
}

.colorful-s-5 {
  margin-bottom: 30px;
  width: 100%;
  height: 200px;
}

.colorful-s-img-5 {
  width: 100%;
  height: 100%;
  position: relative;
}


.footer-s-6{
      padding-left: 20px;
      flex-direction: column;
      gap: 0;
}



}