/* ================================
   Responsive CSS
   Focus: Mobiele schermen, grotere mobiele schermen, tablets
   ================================ */

/* Standaardstijlen voor mobiele telefoons (tot 480px breed) */
@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem !important;
    align-items: left;
  }

  .hero-subtitle {
    font-size: 1.2rem !important;
    margin: 0;
  }

  .enkel-mobiel-index {
    display: block;
    width: 80%; /* Adjust this percentage to make it smaller */
    max-width: 300px; /* Optional: Set a maximum width */
    margin: 0 auto; /* Centers the image */
    text-align: center;
    margin-bottom: 70px;
}


  .image-vertical {
    width: 100%;
  }

  .about h2 {
    font-size: 1.5rem !important;
  }

  .over-ons-paragraaf {
    font-size: 1.2rem !important;
  }

  .overons-section {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slide-in-left 0.7s ease-in-out;
  }

  .overons-content {
    width: 100%;
  }

  .image-column {
    display: none;
  }

  .image-column-mobiel {
    display: block;
  }

  .over-ons-paragraaf {
    margin: 0 !important;
  }

  .special-heading-diensten {
    text-align: center;
    font-size: 1.5rem !important;
    color: var(--blue);
  }

  .button-desktop {
    display: none !important;
  }

  .button-mobile {
    display: block;
  }

  .mobiel-font {
    font-size: 1.5rem;
    text-align: center;
  }

  .geen-ruimte {
    padding-bottom: 0;
  }
}

/* Grotere mobiele schermen (481px tot 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .hero-title {
    font-size: 1.5rem !important;
    align-items: left;
  }

  .hero-subtitle {
    font-size: 1.2rem !important;
    margin: 0;
  }

  .enkel-mobiel-index {
    display: block;
    width: 100%;
    text-align: center;
  }

  .enkel-mobiel-index img {
    max-width: 100%;
    height: auto;
    display: inline-block;
  }

  .image-vertical {
    width: 100%;
  }

  .about h2 {
    font-size: 1.5rem !important;
  }

  .over-ons-paragraaf {
    font-size: 1.2rem !important;
  }

  .overons-section {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slide-in-left 0.7s ease-in-out;
  }

  .overons-content {
    width: 50%;
  }

  .image-column {
    display: none;
  }

  .image-column-mobiel {
    display: block;
  }

  .over-ons-paragraaf {
    margin: 0 !important;
  }

  .special-heading-diensten {
    text-align: center;
    font-size: 1.5rem !important;
    color: var(--blue);
  }

  .button-desktop {
    display: none !important;
  }

  .button-mobile {
    display: block;
  }

  .mobiel-font {
    font-size: 1.5rem;
    text-align: center;
  }

  .geen-ruimte {
    padding-bottom: 0;
  }

  .mobiel-breedte {
    width: 50% !important;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
  }
}

/* Tablets (768px tot 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}