body{
font-family: Arial, sans-serif;
margin:0;
background:#f4f4f4;
}

header{
background:#7b5e57;
color:rgb(7, 7, 7);
text-align:center;
padding:20px;
}

header img{
width:120px;
border-radius: 100px;

}

nav{
background:#f4e1d2;
padding:10px;
text-align:center; 
}

nav a{
color:rgb(0, 0, 0);
margin:15px;
text-decoration:none;
font-weight:bold;
}

nav a:hover{
color:#7b5e57;
}

section{
padding:40px;
}

h2{
text-align:center;
margin-bottom:30px;
}

.details {
  flex: 1;
  text-align: left;
}


.gallery{
display:flex;
align-items:flex-start;
justify-content:center;
gap:20px;
margin-bottom:30px;
width:500px;
}

.gallery img{
width:250px;
height:170px;
object-fit:cover;
border-radius:8px;
flex-shrink:0;
}

.gallery div{
flex:1;
}

#events{
display:flex;
flex-direction:column;
align-items:center;

}

.cards{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.card{
background:white;
padding:20px;
margin:15px;
border-radius:10px;
box-shadow:0 2px 5px rgba(0,0,0,0.2);
width:220px;
text-align:center;
}

.feedback{
background:#fff;
padding:20px;
margin:10px;
border-left:5px solid #7b5e57;
}


.contact{
text-align:center;
}

footer{
background:#7b5e57;
color:white;
text-align:center;
padding:20px;
}


/* Fix for the gallery width to make it look better on screens */
.gallery {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%; /* Changed from 500px to 100% for better centering */
    max-width: 600px;
}

/* Ensure images don't distort */
.gallery img {
    width: 250px;
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}