.navbar {
      background-color: #6cab36;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      box-sizing: border-box;
    }

    .navbar .logo {
      color: white;
      font-size: 20px;
      text-decoration: none;
    }

    .navbar .menu {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .navbar .menu a {
      color: #ffffff;
      text-decoration: none;
      font-size: 18px;
      transition: color 0.3s;
    }

    .navbar .menu a:hover {
      color: #44745f;
    }

    .hamburger {
      display: none;
      font-size: 24px;
      color: white;
      background: none;
      border: none;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .navbar {
        flex-wrap: wrap;
      }

      .navbar .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #6cab36;
        padding: 10px 0;
      }

      .navbar .menu.show {
        display: flex;
      }

      .hamburger {
        display: block;
      }
      .buttons-img {
      max-width: 90px;
      }
      .button-row {
        gap: 12px;
      }

      .banner{
        display: block;
        max-width: 90%;
        margin: auto;
        
      }
      .main-content{
        max-width: 100%;
        
      }
    }

    @media (max-width: 800px) {
    .art-gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Allow smaller images for small screens */
    }
}