/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Algemeen styling voor de hele pagina */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

/* Sidebar Styling */
.sidebar {
  width: 250px;
  background-color: #15342d;
  color: white;
  padding: 20px 20px 20px 40px;
  height: 100vh;
  box-sizing: border-box;
  position: fixed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.sidebar h2 {
  text-align: left;
  margin-bottom: 30px;
  font-size: 24px;
  color: white;
}

.title_sidebar{
  font-size: 10px;
  font-weight: 500;
  color: #8FF7D0;
  margin-bottom: 15px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 5px;
}

.sidebar ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 8px;
  border-radius: 8px;
  transition: all 0.3s
}

.sidebar ul li > a:hover,
.sidebar ul li.active > a {
  color: #8FF7D0;
  background-color: #0e2d24;
}

.sidebar ul li .arrow {
  font-size: 14px;
  transition: 0.3s;
}
.sidebar ul li.active .arrow {
  transform: rotate(180deg);
}


/* Submenu */
.sub-menu {
  display: none;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #0e2d24;
}

.sub-menu li a {
  padding: 8px 8px;
  font-size: 12px;
  color: #cdebd9;
  border-radius: 6px;
}

.sub-menu li a:hover {
  background-color: #0e2d24;
  color: #fff;
}


/* Hoofdcontent */
.content {
  margin-left: 250px;
  padding: 40px 60px;
  width: 100%;
  background-color: #f9f9f9;
  overflow: auto;
  max-width: 1150px;
}

h1 {
      font-size: 32px;
      color: #15342d;
      margin-bottom: 20px;
    }

.card {
  background-color: white;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Styling voor knoppen */
.btn {
  background-color: #15342d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background-color: #0e2d24;
}

/* Styling voor links in de inhoud */
a {
  color: #15342d;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }

  .content {
    margin-left: 0;
    padding: 10px;
  }

  .card {
    margin: 10px 0;
    padding: 15px;
  }

  h1 {
    font-size: 24px;
  }
}

@media (max-width: 500px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .content {
    margin-left: 0;
  }

  .sidebar ul li {
    margin: 10px 0;
  }
}

/* -------- INFO SECTION -------- */
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .info-box {
      background: #ffffff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    .info-box h3 {
      margin: 0;
      font-size: 20px;
      color: #15342d;
      margin-bottom: 10px;
    }

    .info-box p {
      margin: 0;
      line-height: 1.6;
    }