header {
    background-color: #DBC065;
    padding: 30px 30px;
}

/* Questions:
how to add space between each section?
how to alighn the cards in the middle


 * */


.Navigation { /* how to add gaps */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.hero_section{
     /* Set a height, often 100vh for a full page hero section */
    height: 60vh; 
    background-color: #3a3f2d; 
    background-image: url("My images for coding/hero jazz img (1).jpg");
    background-size: cover; /* image covers the whole area */
    background-position: top; 
    position: relative; 
    display: flex; 
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 20px; 
}
.hero-content {
    z-index: 1; 
}

.contact{
     background-image: url("My images for coding/download.webp");
     background-size: cover; /* image covers the whole area */
    background-position: top; 
}
.hero-content h1{
    font-family: "Limelight", sans-serif;
     font-size: 50px;
}

.hero-content p{
    background-color: #363368;
    border-radius: 20px; 
    border: 4px solid #DBC065;
    padding: 20px;
         font-size: 20px;
    

}

.hero h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 1em;
}

.cta-button {
  
    display: inline-block;
    padding: 10px 20px;
    background-color: #cb6b42; 
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.cta-button:hover{
    background-color:#ca5d2e;
    transform: scale(1.1);
}

.dish{
    margin: 5px;
    padding: 15px;
    left: 554px;
    top: 1240px;
    
}


.section1, .Dine_in {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0; /* first number is top and bottom. second is left and right */
   min-width: 60% ; 
}


.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background-color: #363368;
   padding: 40px; 
    margin: 40px;
    text-align: center;
    border-radius: 20px; 
    border: 7px solid #DBC065;
    min-width: 60% ;
    height: auto;
    color: #DBC065;
    
    
}

.bot{
    height:auto;
    gap: 2rem;
}


.Jazzmood{
   font-family: "Limelight", sans-serif;
    font-size: 50px
}

a{
    color:#DBC065;
}

.Dish {
    display: flex;
    align-items: center;
   min-width: 60% ;
    gap: 6%;
    
}

.food_description{
    align-content: normal;
    display:flex;
    flex-direction: column;
    gap: 2rem;
    width: 50%;
}
.food_description h2{
    font-size: 40px;
        
}


body{ /*effects everything on the page*/
   background-color: #705C71; 
   text-align: center;
   color: #FFFFFF;
   font-size: 1rem;
   letter-spacing: 1.5px;
   margin: 29;
   padding: 0;
} 
   /* background-color: #e6855d;*/


.contact_info{
    display: flex;
    gap: 20px;
}

.carousel{
    width: 90%;
    display: flex;
    flex: 0 0 15em;
    
}

.scroll-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 15s infinite alternate;
 
}

@keyframes spin{
    from {translate: 0;}
    to {translate: -10%;}
}


.scroll-container img {
    
    /* Ensure images display side-by-side */
    /* Set a consistent height for all images */
    height: 25vh; 
    /* Maintain aspect ratio */

    /* Add some spacing between images */
    margin-right: 10px; 
}

.jazz_img, img{
    max-width: 100%;
    height: auto;
}


footer {
  background-color: #DBC065;
  padding: 50px;
  text-align: center;
}