#startfoto {
  overflow: hidden; /* Verberg eventuele overloop buiten de container */
  width: 100%; /* Neem de volledige breedte van de viewport in */
  position: relative;
}
.welkom-tekst .citaat {
  font-size: 1.375rem;
  font-family: var(--fonts-type);
}
/* #startfoto .welkom-tekst p {
   display: block; 
} */
.overons-div {
  max-width: 1150px;
  margin: 0 auto;
  background-color: var(--alternate-background-color);
}
.content-div {
  margin: 20px 0;
}
.content-div img {
  width: 300px;
  margin-left: 20px;
  border-radius: 8px;
}
.content-div .tekst {
  float: left;
  margin-right: 20px;
}
.tekst {
  text-align: left; /* Tekst links uitlijnen */
}
.image-container {
  margin: 0;
  margin-bottom: 2rem;
  width: 70%;
  display: inline-block;
  background-color: var(--alternate-background-color);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.image-container .right-text {
  float: right;
  width: 60%;
  text-align: left;
}
.right-text .form {
  width: 40%;
}

.image-container .left-text {
  float: left;
  width: 60%;
  text-align: left;
}
.image-container .left-image {
  float: left;
  width: 34%;
}

.image-container .left-image.medium-image {
  width: 49%;
}
.image-container .left-image.medium-image2 {
  width: 35%;
}
.image-container .big-image {
  width: 50%;
}
.image-container .right-image {
  float: right;
  width: 36%;
  max-width: 50%;
}
.image-container p.right-text {
  float: right;
  width: 100%;
  text-align: left;
  margin-left: 20px;
}
.image-container .right-text.overons {
  width: 49%;
}
.image-container .right-div {
  width: 60%;
  float: right;
  padding: 2rem;
}
.image-container .right-div h2 {
  margin: 0;
  margin-bottom: 1rem;
}
.image-container .right-div p {
  margin: 0;
  margin-bottom: 1rem;
  width: 100%;
  text-align: left;
}
.image-container h2.right-text {
  float: right;
  margin: 1rem;
  text-align: right;
}
.image-container p {
  float: left;
  width: 90%;
}
.oplossing {
  margin: 0;
  width: 100%;
  display: inline-block;
  background-color: var(--alternate-background-color);
}
.oplossing img {
  float: left;
  width: 20%;
}
.oplossing p {
  max-width: fit-content;
  margin: 3%;
  margin-left: auto;
  margin-right: auto;
  color: var(--primary-color);
  text-align: center;
}
.oplossing h3 {
  font-size: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--primary-color);
  width: fit-content;
  margin-bottom: 10px;
}
.gallerij {
  margin: 7px;
  width: 250px;
  height: 400px;
  float: left;
}
.gallerij img {
  width: 100%;
  height: auto;
  border: none;
}
.gallerij img:hover {
  transform: scale(1.08);
}
.gallerij-overons {
  display: inline-block;
}

.gallery {
  padding: 0 4px;
  width: 80%;
  margin: auto;
  overflow: hidden; /* Add this line for clearfix */
}
.column {
  float: left;
  width: 20%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  transition: transform 0.2s;
}
.column img:hover {
  transform: scale(1.2);
}
.folder-text {
  width: 60%;
  float: right;
}
.padded-container {
  padding: 25px;
}
.centered-tekst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centered-tekst .hometekst {
  font-family: var (--alternate-fonts-type);
  font-size: 3.125rem;
}
.centered-tekst .citaat {
  font-size: 1.375rem;
  font-family: var(--fonts-type);
}
img.uitverkocht {
  filter: grayscale(100%);
}
.map {
  width: 100%;
  height: 300px;
}
.image-container .right-text.half-width,
.image-container .left-text.half-width {
  width: 50%;
}
@media screen and (max-width: 800px) {
  .image-container .left-image,
  .image-container .right-image,
  .image-container .left-text,
  .image-container .right-text,
  .image-container .right-text.overons,
  .image-container .left-image.left-image.medium-image,
  .image-container .right-div,
  .image-container .left-image.left-image.medium-image2 {
    width: 100%;
    margin-bottom: 1rem;
  }
  .image-container {
    width: 90%;
  }
  .folder-text {
    width: 100%;
    float: none;
  }
  .folder-text ul {
    padding-left: 10px;
  }
  .image-container .right-text.half-width,
  .image-container .left-text.half-width {
    width: 100%;
  }
  .oplossing p {
    max-width: 80%;
  }
  #startfoto .welkom-tekst {
    width: 80%;
    text-align: center;
    margin: 0 auto;
  }
  .padded-container {
    padding: 0px;
  }
}
.flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  align-items: start; /* Ensures items are of equal height */
  gap: 2rem; /* Adds space between the items */
  max-width: 90%;
  margin: 0 auto; /* Centers the container */
  padding-bottom: 2rem;
}

.flex-image-container {
  flex: 1 1 30%; /* Allows the image to grow and shrink, starting at 45% width */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
}

.flex-image-container img {
  max-width: 100%;
  height: auto; /* Maintains the aspect ratio */
  display: block;
}

.flex-text-container {
  flex: 1 1 30%; /* Allows the text to grow and shrink, starting at 45% width */
  display: flex;
  flex-direction: column; /* Stacks the text elements vertically */
  justify-content: center; /* Centers the text vertically */
  text-align: left;
  align-self: center;
}

.flex-text-container h1 {
  margin-bottom: 0px;
  margin-top: 40px;
}

.flex-text-container p {
  margin: 0; /* Remove default margins */
}
#addToShoppingCartForm .flex-container {
  gap: 0px;
  max-width: 100%;
  align-items: center;
}
#addToShoppingCartForm .info-button {
  margin-bottom: 0;
  margin-top: 0;
}
/* Responsive design: stack items vertically on smaller screens */
@media (max-width: 1250px) {
  .flex-image-container {
    max-width: 400px;
    margin: auto;
  }
  #addToShoppingCartForm .flex-container {
    align-items: end;
  }
}
@media (max-width: 1000px) {
  .flex-container {
    flex-direction: column; /* Stacks items vertically */
  }
}