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

header{
background:#0b3c5d;
color:white;
padding:15px 0;
}

/* Align everything in the header */
.header-container {
  display: flex;
  justify-content: space-between; /* Puts logo/title on left, nav on right */
  align-items: center;           /* Centers items vertically */
  padding: 10px 20px;
}

/* Group logo and H1 together */
.logo-area {
  display: flex;
  align-items: center;
  gap: 15px; /* Adds space between the logo and the text */
}

/* Control the logo size */
.logo {
  height: 50px;    /* Adjust based on your preference */
  width: auto;     /* Keeps the aspect ratio perfect */
}

/* Optional: remove margin from H1 to keep it perfectly centered with the logo */
h1 {
  margin: 0;
  font-size: 1.5rem;
}

.container{
width:90%;
margin:auto;
}

nav a{
color:white;
margin-right:20px;
text-decoration:none;
font-weight:bold;
}

.hero{
height:400px;
background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url('images/lake_tana.png') center/cover;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
}

.hero h2{
font-size:40px;
}

.section{
padding:60px 10%;
background:white;
margin-bottom:20px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}

.gallery img{
width:100%;
border-radius:8px;
}

.contact{
background:#e9f2f9;
}

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