@media (max-width: 600px) {
  html { font-size: 16px; } /* 16px */

h1 { font-size: 4.210rem; /* 67.36px */ }
h2 { font-size: 3.158rem; /* 50.56px */ }
h3 { font-size: 2.369rem; /* 37.92px */ }
h4 { font-size: 1.777rem; /* 28.48px */ }
h5 { font-size: 1.333rem; /* 21.28px */ }
small { font-size: 0.750rem; /* 12px */ }

    nav h1{
    font-size: 2.369rem;
    }
  .hero-button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  .hero-button:hover {
    background-color: var(--background);
    color: var(--text);
    outline: 1px solid white;
  }

  .hero-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Optional: Center align items */
    gap: 0rem;
    margin-top:5vh;
  }
  
   .hero-image {
    width: 90vw;
    object-fit: cover;
    border-radius: 1rem;
    margin-top: 2rem;
  }

  .hamburger{
    display: block;
  }

  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu{
    display: block;   
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    background-color:var(--background);
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-items{
    margin: 1rem 0;
  }

  .nav-menu.active{
    left: 0;
    font-size:1.2rem;
  }
  
  /* Hide nav items by default on mobile */
  .nav-items {
    display: flex;
    flex-direction:column;
    list-style: none;
    gap: 1rem;
  }
  



}

@media (max-width: 732px) {

    .hero-button {
      
      }

}