.container {
  overflow: hidden;
}
.toggle-btn {
  display: none;
}
.example-area {
  flex-wrap: wrap;
  gap: 15px;
}

@media (width <= 991px) {
  .toggle-btn {
    display: block;
    margin-right: 20px;
    font-size: 1.5rem;
  }

  .hover-links {
    display: none;
  }

  .example-card {
    width: calc(50% - 15px);
  }
}

@media (width <= 767px) {
  .header-section {
    flex-direction: column-reverse;
  }
  .header-left {
    width: 100%;
  }

  .primary-btn {
    width: 100%;
    text-align: center;
    
  }
  .feature-col {
    flex-direction: column;
    
  }
  #feature-rev{
    flex-direction: column-reverse;
  }
  .footer-section {
    flex-direction: column;
    align-items: center;
  }
}
@media (width <= 479px) {
    :root{
        --padding-inline-section: 5px;
    }
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.5rem;
    }
    p{
        font-size: 1rem;
        color:black
    }
    .feature-card {
        min-width: 100%;
    }
  }