/* pallete: 2B2D42 8D99AE EDF2F4 D90429 474B24*/

.dm-sans-400-normal {
  font-family: "DM Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.header {
  background: #EDF2F4;
}

.logo {
  width: 500px; /* Adjusted logo width for desktop */
  padding: 10px;
  max-width: 20%;
  height: auto;
}
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #EDF2F4;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align items to the right */
}
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #EDF2F4;
  display: flex;
  align-items: center; /* Vertically center items */
}

.navbar li {
  float: none;
  display: flex;
  align-items: center;
}

.navbar li:first-child { /* Target the first list item (logo) */
  margin-right: auto; /* Push the logo to the left */
}

.navbar li:not(:first-child) { /* Target all list items EXCEPT the first (logo) */
  margin-left: 20px; /* Add spacing between links */
}


.navbar-link {
  display: block;
  color: #2B2D42;
  transition: color 150ms linear, background-color 150ms linear;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


.navbar-link.active {
  background-color: #D90429;
  color: #EDF2F4;
}

.navbar-link:hover {
  background-color: #2B2D42;
  color: #EDF2F4;
}

.statementsection {
  height: 60vh; /* Restored height for desktop */
  background-size: cover;
  padding: 100px; /* Restored padding for desktop */
  display: grid;
  place-items: center;
}

.statement {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 50px; /* Restored padding for desktop */
  border-radius: 10px;
  color: #EDF2F4;
  font-size: 4rem; /* Restored font size for desktop */
  text-align: center;
}

h1 {
  font-size: 3rem; /* Restored font size for desktop */
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  font-size: 1.5rem; /* Restored font size for desktop */
  text-align: center;
}

.error-number {
  font-size: 7rem;
}

.link {
  color: #D90429;
}

.news-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

.news-item {
  background-color: #00000020;
  flex: 1 0 300px; /* Adjusted minimum width for desktop */
  margin: 10px;
  padding: 15px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
}

.news-image {
  border-radius: 10px;
}

/* Media query for smaller screens */
@media (max-width: 768px) { /* Slightly larger breakpoint */
  .navbar {
    flex-wrap: wrap;
    justify-content: center; /* Center on mobile */
}

.navbar li {
    flex: 1; /* Distribute available space equally on mobile */
    margin: 0; /* Remove left margin on mobile */
    text-align: center;
}

.navbar li:first-child {
    margin: 0;  /* Remove margins on mobile */
    flex: 1; /* Make logo take full width on its line */
}
.navbar li:not(:first-child){
    margin: 0; /* Remove spacing between links on mobile */
}

.navbar-link {
    padding: 10px;
}


  .statement {
    font-size: 2rem; /* Adjusted font size for mobile */
    padding: 20px;
  }
  .statementsection {
    height: 40vh; /* Adjusted height for mobile */
    padding: 50px; /* Adjusted padding for mobile */
  }
  h1 {
    font-size: 2rem; /* Adjusted font size for mobile */
  }
  .news-item {
    flex: 1 0 90%; /* Make news items take full width on smaller screens */
  }
  .logo {
    max-width: 75px;
  }
}