body {
    background-color: #004734; 
    font-family: Arial, sans-serif;
    margin: 0;
 
    color: #ffffff;
  }
  
  
  .container {
    width: 80%;
    margin: auto;
    background-color: #ffffff;
    color: #000000;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  

  h1, h2 {
    color: #005844;
  }
  
  
  ul {
    list-style-type: disc;
    padding-left: 25px;
  }
  
  ul li {
    margin-bottom: 8px;
  }
  
  
  .button {
    background-color: #004734;
    color: #ffffff;
    border: none;
    padding: 24px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    
  }
  
  .button:hover {
    background-color: #003926;
  }
  
  
  form input[type="email"] {
    padding: 8px;
    width: 100%;
    
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  form label {
    font-weight: bold;
  }

  .pic {width: 45%;
    }

  .pic img {width: 100%;}

  .menu-item
                    {
                         flex: 1;
    min-width: 120px; /* makes it wrap naturally */
    text-align: center;
                        background-color: white;
                        padding-top: 10px;
                        padding-bottom: 10px;
                        text-align: center;
                        justify-content: center;
                        border-radius: 10px;
                        

                    
                    
                    
                    }
                    .index
{  
      background-color: #004734;
      padding: 30px;
      text-align:justify;
      font-size: 25px;
      font-weight: 600;
      width: 70%;
       margin: auto;
      
     
      border-radius: 15px;
      display: flex;
      justify-content: space-evenly}

                    .menu-item a
                    {
                        text-decoration: none;
                        color: #004734;
                        font-weight: bold;
                    }

                    .menu-item:hover
                    {
                        background-color: #20b67e;
                        border-radius: 10px
                    }

                    .menu-item:hover a
                    {
                        color: #ffffff;
                    }
                    
                    .menu-item:hover
                    { 
                        background-color: #20b67e;
                        border-radius: 10px
                    }
                    header {
                        background-color: #004734;
                        padding: 30px;
                        text-align:justify;
                        font-size: 25px;
                        font-weight: 600;
                        width: 70%;
                         margin: auto;
                        
                       
                        border-radius: 15px;
                        display: flex;
                        justify-content: space-evenly;
                        margin-bottom: 10px;

                      }
                      .house{display: flex;
                    text-align: justify;
                         padding: 30px;
                         width: 90%;
                         border: 4px solid;
                         border-radius: 10px;
                         border-color:#005844;
                         padding-top: 10px;
                         margin-bottom: 10px;
                         justify-content: space-between;
                         }
                .description {width: 40%;
                            
                            font-size: large;
                            font-style: italic;
                            padding-left: 20px;}

                            .houses {width: 100%;
                            }
                 @media only screen and (max-width: 480px) {
                      .container{
                     display: grid;
grid-template-columns: 1fr;
flex-wrap: wrap; 
                      }
                      .index {
                            flex-wrap: wrap;
                            width: 100%;
                            display: flex;

                        }
                        .menu-item
                    {
                        width: 100%;
                        background-color: white;
                        padding-top: 10px;
                        padding-bottom: 10px;
                        text-align: center;
                        justify-content: center;
                        border-radius: 10px;
                        gap: 20px;
                        margin: 20px;

                    
                    
                    
                    }
                    .menu-item-current
                    {
                        width: 100%;
                        background-color: rgb(0, 0, 0);
                        padding-top: 10px;
                        padding-bottom: 10px;
                        text-align: center;
                        justify-content: center;
                        border-radius: 10px;
                        margin-left: 20px;
                    
                    
                    
                    }
                    
                    }
                     @media only screen and (max-width: 768px) and (min-width: 481px) {
                      .container{
                        display: grid;
grid-template-columns: 1fr;
flex-wrap: wrap;
                      }
                       .index {
                            flex-wrap: wrap;
                            width: 100%;
                            display: grid;
                            
                        }
                        .menu-item
                    {
                        width: 100%;
                        background-color: white;
                        padding-top: 10px;
                        padding-bottom: 10px;
                        text-align: center;
                        justify-content: center;
                        border-radius: 10px;
                        gap: 20px;
                        margin: 20px;
                        height: fit-content;

                    
                    
                    
                    }
                    .menu-item-current
                    {
                        width: 100%;
                        background-color: rgb(0, 0, 0);
                        padding-top: 10px;
                        padding-bottom: 10px;
                        text-align: center;
                        justify-content: center;
                        border-radius: 10px;
                        margin-left: 20px;
                    
                    
                    
                    }
                    
                    }
                    @media only screen and (max-width: 1280px) and (min-width: 769px) {
                      .container{
                        display: grid;
grid-template-columns: 1fr;
flex-wrap: wrap;
                      }
                      .index {
                            flex-wrap: wrap;
                            width: 100%;
                            display: grid;
                        }
                        .menu-item
                    {
                        width: 100%;
                        background-color: white;
                        
                        text-align: center;
                        justify-content: left;
                        border-radius: 10px;
                        gap: 10px;
                        margin: 20px;

                    
                    
                    
                    }
                    .menu-item-current
                    {
                        width: 100%;
                        background-color: rgb(0, 0, 0);
                        padding-top: 10px;
                        padding-bottom: 10px;
                        text-align: center;
                        justify-content: left;
                        border-radius: 10px;
                        margin-left: 20px;
                    
                    
                    
                    }}
                    @media only screen and (min-width: 1280px) {.index {
                            flex-wrap: wrap;
                            width: 100%;
                            display: flex;
                            width: 100%;
                            margin: 20px;
                            gap: 10px;
                        }}