body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0B1F33; /* voorkomt witte rand als iets misgaat */
}

/* Navbar */
.custom-navbar {
  background: rgba(11, 31, 51, 0.85);
  backdrop-filter: blur(6px);
}


.hero {
  height: 65vh;
  min-height: 500px;
  width: 100%;
  margin-top: 80px;
  box-sizing: border-box;           /* zorgt dat padding niet je layout sloopt */
  background: url("../img/ijsselstreek-bg.png") no-repeat center center;
  background-size: contain;
  background-color: #0B1F33;
  position: relative;
}


/* Cards sectie */
.cards-section {
  padding: 80px 20px;
  background: #F4F6F8;
}

.fun-card {
  border-radius: 16px;
  padding: 30px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(11, 31, 51, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;  
}



.fun-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(11, 31, 51, 0.25);
}

.fun-card h3 {
  font-weight: 700;
  margin-bottom: 15px;
  color: #0B1F33;
}

.fun-card p {
  font-size: 1.05rem;
  color: #333;
}

.fun-card .btn {
  margin-top: auto;
}


/* Knoppen iets chiquer */
.btn-primary {
  background-color: #1E4F91;
  border-color: #1E4F91;
}

.btn-primary:hover {
  background-color: #163E73;
  border-color: #163E73;
}

.btn-success {
  background-color: #4A90E2;
  border-color: #4A90E2;
}

.btn-success:hover {
  background-color: #357ABD;
  border-color: #357ABD;
}

.helpdesk-section {
  padding: 80px 20px;
  background: #0B1F33;
  color: white;
}

.helpdesk-item {
  background: rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 30px;
  font-size: 1.1rem;
  font-weight: 600;
}

.stats-section {
  padding: 80px 20px;
  background: #F4F6F8;
}

.stat-box {
  background: white;
  border-radius: 16px;
  padding: 30px;
  font-size: 2rem;
  font-weight: bold;
  color: #0B1F33;
  box-shadow: 0 8px 20px rgba(11,31,51,0.15);

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-box small {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
}

.quote-section {
  padding: 90px 20px;
  background: linear-gradient(135deg, #163E73, #1E4F91);
}

.quote-card {
  background: white;
  color: #0B1F33;
  border-radius: 20px;
  padding: 50px 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 15px 40px rgba(11,31,51,0.25);
  position: relative;
}

.quote-card i {
  font-size: 3rem;
  color: #4A90E2;
  margin-bottom: 20px;
  display: block;
}

.quote-card blockquote {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.quote-sub {
  font-size: 0.95rem;
  color: #555;
  font-style: italic;
}


.survival-section {
  padding: 80px 20px;
  background: #0B1F33;
  color: white;
}

.survival-item {
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 30px;
  height: 100%;
}

.survival-item i {
  font-size: 2.5rem;
  color: #4A90E2;
  margin-bottom: 15px;
}

.survival-item p {
  margin: 0;
  font-weight: 600;
}

.helpdesk-section {
  padding: 80px 20px;
  background: #0B1F33;
  color: white;
}

.helpdesk-item {
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 30px;
  height: 100%;
}

.helpdesk-item i {
  font-size: 2.5rem;
  color: #4A90E2;
  margin-bottom: 10px;
}

.helpdesk-item p {
  margin: 0;
  font-weight: 600;
}

.cards-section, .stats-section {
    background: #dbdbdb !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero {
    height: 40vh;
    min-height: 280px;
    background-size: cover;   /* op mobiel liever vullen dan contain */
  }

  .cards-section {
    padding: 50px 15px;
  }

  .fun-card {
    padding: 24px;
  }

  .fun-card h3 {
    font-size: 1.25rem;
  }

  .fun-card p {
    font-size: 0.95rem;
  }

  .btn-lg {
    width: 100%; /* knop full-width op mobiel, lekker tappable */
  }
}

@media (max-width: 576px) {
  .hero {
    margin-top: 70px; /* iets minder ruimte op kleine schermen */
  }
}