.div-block {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  margin-left: 0;
  display: flex;
}


.about-hero-sect {
  grid-column-gap: 43px;
  grid-row-gap: 43px;
  text-align: left;
  justify-content: center;
  align-items: center;
  display: flex;
}

.about-hero-txt-wrapper {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-flow: column;
  max-width: 445px;
  margin-left: 0;
  display: flex;
}

.about-hero-header {
  font-size: 45px;
}

.text-span {
  color: var(--light-green);
}

.text-span-2 {
  color: #0f5662;
}

.boeken-btn {
  background-image: linear-gradient(0deg, #65b33e, var(--light-green));
  text-align: left;
  border-radius: 12px;
  order: 0;
  align-self: center;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 16px;
  display: block;
}

.text-block {
  font-size: 16px;
}

.image {
  border-radius: 17px;
}

.vision-card {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  margin: 50px;
  display: flex;
}

.vision-card-txt {
  background-color: #fff;
  border-radius: 17px;
  max-width: 500px;
  padding: 17px;
  box-shadow: 0 2px 9px 2px #0003;
}

.image-2 {
  border-radius: 17px;
}

.steps-sect {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  margin: 38px 38px 38px 117px;
  display: flex;
}

.steps-wrapper {
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  justify-content: center;
  align-items: center;
  margin: 20px 20px 20px 0;
}

.steps-card {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  text-align: left;
  background-color: #fff;
  border-radius: 20px;
  flex-flow: column;
  flex: 0 auto;
  order: 0;
  justify-content: space-between;
  align-self: auto;
  align-items: flex-start;
  max-width: 300px;
  padding: 21px;
  display: flex;
  box-shadow: 0 2px 12px #0003;
}

.about-txt {
  max-width: 500px;
  font-size: 16px;
}

.nav-link-current {
  color: #a4c66d;
  align-self: auto;
  font-size: 18px;
  text-decoration: none;
}

@media (min-width: 1600px) {
  .about-hero-sect,
  .vision-sect,
  .steps-sect {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
 
  .about-hero-header {
    font-size: 56px;
  }
 
  .steps-sect {
    margin-left: auto;
  }
 
  .vision-card {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}
 
/* =====================================================================
   2. SMALL DESKTOP / LAPTOP (992px – 1199px)
   ===================================================================== */
@media (max-width: 1199px) {
  .steps-sect {
    margin: 38px 30px;
  }
 
  .vision-card {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    margin: 40px 30px;
  }
}
 
/* =====================================================================
   3. TABLET (768px – 991px)
   Hero and vision cards go from side-by-side to stacked. Steps wrap
   to two columns.
   ===================================================================== */
@media (max-width: 991px) {
  /* Nav (shared with home page — safe to repeat here in case this
     file is used standalone) */
  .nav-wrapper {
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 16px 20px;
  }
 
  .nav-button-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }
 
  /* Hero */
  .about-hero-sect {
    flex-direction: column;
    text-align: center;
    padding: 30px 24px;
  }
 
  .about-hero-txt-wrapper {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
 
  .about-hero-header {
    font-size: 36px;
  }
 
  .about-hero-sect .image {
    width: 100%;
    max-width: 500px;
  }
 
  /* Vision */
  .vision-card {
    flex-direction: column;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    margin: 30px 20px;
    text-align: center;
  }
 
  .vision-card-txt {
    max-width: 100%;
    order: 2;
  }
 
  .vision-card .image-2 {
    width: 100%;
    max-width: 500px;
    order: 1;
  }
 
  /* Steps */
  .steps-sect {
    margin: 30px 20px;
    text-align: center;
  }
 
  .about-header {
    font-size: 30px;
  }
 
  .steps-wrapper {
    flex-wrap: wrap;
    row-gap: 24px;
  }
 
  .steps-card {
    max-width: 340px;
    width: calc(50% - 28px);
    align-items: center;
    text-align: center;
  }
 
  .boeken-btn {
    align-self: center;
  }
 
  /* Footer */
  .footer-block-wrapper .div-block {
    flex-wrap: wrap;
    grid-column-gap: 40px;
    grid-row-gap: 32px;
  }
}
 
/* =====================================================================
   4. LARGE PHONE / SMALL TABLET (576px – 767px)
   ===================================================================== */
@media (max-width: 767px) {
  .about-hero-header {
    font-size: 30px;
  }
 
  .about-txt {
    max-width: 100%;
    font-size: 15px;
  }
 
  .vision-card {
    margin: 24px 16px;
  }
 
  .steps-card {
    width: 100%;
    max-width: 400px;
  }
 
  .steps-sect {
    margin: 24px 16px;
  }
}
 
/* =====================================================================
   5. PHONE (480px – 575px)
   ===================================================================== */
@media (max-width: 575px) {
  .logo {
    width: 68px;
  }
 
  .nav-link,
  .nav-link-current {
    font-size: 14px;
  }
 
  .about-hero-header {
    font-size: 26px;
  }
 
  .about-hero-txt-wrapper {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
 
  .boeken-btn {
    width: 100%;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }
 
  .vision-card-txt {
    padding: 16px;
  }
 
  .vision-card .heading,
  .vision-card .heading-2 {
    font-size: 20px;
  }
 
  .steps-card {
    padding: 18px;
  }
 
  .heading-3,
  .heading-4,
  .heading-5 {
    font-size: 17px;
  }
 
  .footer-block-wrapper .div-block {
    flex-direction: column;
    row-gap: 24px;
  }
 
  .footer-block-btm-txt-wrapper {
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
    text-align: center;
  }
}
 
/* =====================================================================
   6. SMALL PHONE (≤479px)
   ===================================================================== */
@media (max-width: 479px) {
  .about-hero-sect {
    padding: 24px 16px;
  }
 
  .about-hero-header {
    font-size: 22px;
  }
 
  .about-txt {
    font-size: 14px;
  }
 
  .vision-card {
    margin: 18px 12px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
 
  .vision-card-txt {
    padding: 14px;
  }
 
  .steps-sect {
    margin: 18px 12px;
  }
 
  .about-header {
    font-size: 24px;
  }
 
  .steps-card {
    padding: 16px;
    max-width: 100%;
  }
 
  .steps-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
 
/* =====================================================================
   7. EMBEDDED CONTEXTS / VERY NARROW VIEWPORTS (≤360px)
   ===================================================================== */
@media (max-width: 360px) {
  .about-hero-header {
    font-size: 20px;
  }
 
  .logo {
    width: 56px;
  }
 
  .nav-link,
  .nav-link-current {
    font-size: 13px;
  }
 
  .vision-card .heading,
  .vision-card .heading-2 {
    font-size: 18px;
  }
 
  .steps-card img {
    width: 36px;
  }
 
  .heading-3,
  .heading-4,
  .heading-5 {
    font-size: 15px;
  }
}