*{
     font-family: "Inter", sans-serif;
}
.hero-section{
     display: flex;
     position: relative;
     width: 100%;
     height: 300px;
     justify-content: center;
     align-items: center;
     background-color: #CFF0DC;

}
.hero-section::before,
.hero-section::after{
     content: ' ';
     position: absolute;
     width: 400px;
     height: 300px;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     
    
}
.hero-section::before{
     left: 0;
     background-image: url(./assets/hero-leaf1.png);
     
}
.hero-section::after{
     right: 0;
     background-image: url(./assets/hero-leaf2.png);
}
.content{
     
     text-align: center;
}
.active{
   background-color: #15803D;
   color: white;  
}

@media (max-width: 768px) {

     .hero-section{
          min-height: 200px;
          padding:1.5rem 1rem;
     }



     .hero-section::before,
     .hero-section::after{
          width: 35%;
          max-width: 200px;
          opacity: 0.8;
          background-size: contain;
          background-position: bottom;
     }
     
}