.about-page {
  background-color: #1A1F25;
  color: #F3F3E9;      
}
.titel{
    font-family: 'MonumentExtendedUltraBold', sans-serif ;
}
.under-titel{
    font-family: 'MonumentExtended', sans-serif;
}

.under-titel{
    font-weight: 300;
}
.small-text {
  font-weight: 200;
  font-size: clamp(0.85rem, 1vw + 0.5rem, 1.2rem);
  line-height: 1.4;
}

.mid-text {
  font-weight: 300;
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.4rem);
  line-height: 1.4;
}

.mid-text bold{
  font-weight: 800;
}
.bolder{
  font-weight: 400;
}

.fa-square{
  font-size: clamp(0.85rem, 1vw + 0.5rem, 2rem);
  margin-right: 5px;
  color: #F5C252;
}
.about-page {
  background-color: #1A1F25;
}

.about-page h2 {
  font-family: 'MonumentExtended', sans-serif;
  color: #fff;
}

.about-page p {
  color: #ccc;
  line-height: 1.6;
}

.procces-card{
  border: solid 3px #F5C252;
  border-radius: 5px;
  padding:10px ;
}

.photo-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    height: 40vh; /* Set a consistent height for both rows */
}

.photo-row img {
    flex: 1; /* Changed from flex-grow: 1 */
    object-fit: cover;
    height: 100%; /* Fill the row height */
    border-radius: 8px;
    min-width: 0; /* Prevents overflow on small screens */
}

@media (max-width: 1024px) and (min-width: 769px) {
    .photo-row {
        height: 200px; /* hoogte iets kleiner dan desktop */
        gap: 0.75rem;  /* eventueel iets minder ruimte tussen foto’s */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .photo-row {
        height: 135px; /* Smaller height on tablets */
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .photo-row {
        height: 110px; /* Even smaller on mobile */
        gap: 0.25rem;
    }
     .about-page {
    padding-bottom: 1rem !important; /* alleen de onderkant kleiner */
  }
}


.mobile-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.thick{
  font-family: 'MonumentExtended', sans-serif;
}


.photo-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    overflow: hidden; /* Belangrijk voor de animatie */
}

.photo-row img {
    flex: 1;
    object-fit: cover;
    height: 100%;
    border-radius: 8px;
    min-width: 0;
    /* Beginstaat voor animatie */
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
}

.mobile-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    /* Beginstaat voor mobiele animatie */
    transform: scale(0.8);
    opacity: 0;
}

.section-title {
    opacity: 0;
    transform: translateY(30px);
}