@media (max-width:700px) {
    .text-box h1{
        font-size: 12px;
    }
    .nav-links ul li{
        display: block;
        color: black;
    }
    .nav-links{
        position: absolute;
        background-color:#008e46;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 10000;
        transition: 1s;
    }
    nav .fa-solid{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;
    }
    nav{
        height: 80px;
    }

    nav a img{
        height: 80px;
        width: 120px;
    }

    .search button{
        margin: 10px;
        font-size: 9px;
        color: #008e46;
    }
    .search button:hover{
      color: white;
      background-color: #008e46;
    }
    .search input{
        
        margin-left:-40px;
        padding: 9px 4px;
        font-size: 12px;
    }

    .slider {
        position: relative;
        width: 100%;
        max-width: 500px;
        height: 270px;
        /* margin: 50px auto; */
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      }

      section .about{
        display: grid;
        grid-template-columns: repeat(2,1fr);
      }

      .main{
        margin-top: -500px;

      }
      .main .men_text h1 span{
        font-size: 25px;
      }
      

      .hero-image{
        margin-left: auto;
        margin-top: 50px;
      }
      a.cta{
        margin-bottom: 200px;
      }
      .hero-text h1{
        font-size: 25px;
      }
      .hero-text p{
        font-size: 12px;
        text-align: justify;
      }
      .hero-text a{
        font-size: 8px;
        padding: 4px 8px;
      }
      .nav-links ul li{
        margin-top: 1px;
      }
} 
/* @media (max-width:300px){
   .header{
    height: 55vh;
   } */

   @media (max-width:430px){
    

    .search input, button{
      
    }
    
    
    .hero{
      margin-top: -400px;
    }
    .footer{
      margin-top: -120px;
    }

    .slider{
      height: 180px;
      width: 90%;
    }
   }