@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
:root {
    --black: black;
    --white: #ffffff;
    --lightGray: #D9D9D9;
    --orange: #E58F5A;
    --dark-orange: #d86219;
    --red: #AB2222;
    --dark-blue: #011A41;
    --light-blue: #254578;
    --dark-gray: #36392D;
    --light-gray: #233942;
    --gray: #9B9191;
  }

  .content {max-width: 85vw; margin: 0 auto;}

/* 1. Box Sizing - Makes layouts more predictable */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
  }
  
  /* 2. Remove default list styles */
  ul, ol {
    list-style: none;
  }
  
  /* 3. Remove default button and link styles */
  a {
    text-decoration: none;
    color: inherit;
  }

/* 4. Apply a default font family */
body {
    font-size: 1.125rem; /* 18px */
    background-color: var(--lightGray);
    color: var(--black);
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    }
      
  button {
    all: unset;
    cursor: pointer;
  }
  h1, h2, h3 {    font-family: "Cormorant", serif;;  }
  h1 {font-size: 4.75rem;}
  h2 {font-size: 4rem;}
  h3 {font-size: 3.25rem;}
  h4 {font-size: 2.875rem;}
  h5 {font-size: 2.5rem;}

  /* 5. Improve text rendering */
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  
  /* 6. Images & Media should not exceed their containers */
  img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* 7. Remove input and textarea outlines but keep accessibility */
  input, textarea, select {
    border: none;
    outline: none;
  }
  /* 8. Make tables more readable */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  /* 9. Ensure consistent cursor styles */
  button, [type="button"], [type="submit"] {cursor: pointer;}
  /* 10. Every section on same width */
section {
    margin: 100px auto;

  }

    /* 11. Button styles */
.primary-button, .secondary-button {
  padding: 15px;
  color: var(--white);
}
.primary-button {background-color: var(--dark-blue);}

.primary-button:hover {
  background-color: var(--light-blue);
  transition: all 1s ease-out;
}

.secondary-button {background-color: var(--orange);}

.secondary-button:hover {
  background-color: var(--dark-orange);
  transition: all 1s ease-out;
}

.small-header-title {
  color: var(--red);
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-size: 18px;
}

.banner-subpages {
  height: 40vh;
  margin-top: 50px;
  background-color: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.breadcrumbs {text-align: center;}
.breadcrumbs > a {cursor: pointer;}

  /* 12. Header Image */
.header-image {
  position: relative;
  width: 100%;
  height: 80vh;
  background: url('/images/banner.webp') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

/* Dark overlay */
.header-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* adjust 0.5 for more/less darkness */
  z-index: 1;
}

/* Make sure content stays above overlay */
.header-image * {
  position: relative;
  z-index: 2;
}


.header-image h1 {margin-bottom: 10px;}


/* 13. about us */

.about-us-container, .history-container {  
  display: grid;
  padding-bottom: 75px;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
}

.image-about-container {
      position: relative;
      width: 300px;
      height: 400px;
  }
  .about-image {
      position: absolute;
      width: 100%;
      height: auto;
  }
  .about-image:first-child {
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
  }
  .about-image:last-child {
      width: 100%;
      top: 30%;
      left: 60%;
      z-index: 2;
  }
  .about-us-text > a > button {
    margin: 20px 0px;
  }

/* 13. Our team */
  .our-team-container {   
    padding: 50px 0px;
    background-color: var(--orange);
}

.our-team-header {
    display: flex;
    justify-content: space-between;
}
.our-team-right > a > .primary-button {margin: 20px 0px;}
.our-team-title {color: var(--light-gray);}

.carousel-container {
        position: relative;
        text-align: center;
    }
.carousel {
    display: flex;
    overflow: hidden;
    gap: 30px;
}
.arrow-container {
    display: flex;
    justify-content: left;
    gap: 20px;
    margin-bottom: 10px;
}
.carousel-item img {
  height: 350px;     /* or whatever fixed height you want */
  width: auto;       /* keeps aspect ratio */
  object-fit: cover; /* crops nicely if container size is fixed */
}

.carousel-arrow {
    color: var(--black);
    border: 1px solid var(--black);
    border-radius: 50%; 
    width: 40px;  
    height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousalTitle {
    margin: 10px 0px;
    font-weight: bold;
}
.carousalFunction {font-size: 14px;}

    /* 14. History */
  .history-image {width: 100%;}
  .history-text > h4 {margin-bottom: 20px;}
  .history-image-text > p, .history-text > a > .secondary-button {margin: 20px 0px;}


  .year-header {
    display: flex;
    gap:0px;
    color: var(--gray);
}

.year-header > p {
    margin: 20px 0px; 
    border-right:  1px solid var(--gray);
    cursor: pointer;
    padding: 10px;
}

.year-header > .active {
    font-weight: bold;
    color: var(--black);
}
.top-row-historie-image, .bottom-row-historie-image {height: 70%;}
.historie-image {height: 100%;}


.historie-container-historie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 50px;
}


    /* 15. Gallery */
  .gallery-container {
    padding: 10px;
  grid-area: c;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 200px;
  grid-gap: 20px;
  grid-auto-flow: dense;
  overflow: auto;
  padding-right: 20px;  
  }


  .gallery-container >div{
  z-index: 1;
  position: relative;
  padding: 0;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0,0,0,.2), 
              5px 5px 25px rgba(0,0,0,.1);
  }
  .gallery-container > div > img{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  }


  .vertical{grid-row: span 2;}
  .horizontal{grid-column: span 2;}
  .big{
  grid-row: span 2;
  grid-column: span 2;
  }

  .selector-gallery {
    display: flex;
    gap: 20px;
}
.selector-gallery button.active-gallery {
    font-weight: bold;
    color: var(--black)
}
.gallerij-special {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.gallerij-special div {
    overflow: hidden;
}
.gallerij-special img {
    width: 100%;
    height: auto;
    display: block;
}
.section .error{
  font-size: 150px;
  color: var(--orange);

text-align: center;}

.page{
  margin: 2rem 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.contact-container {  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.history-wrapper {margin-top: 50px;}
.form-container {
            margin: 20px 0px;
        }
        .form-group {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

        }
        .form-group input, .form-field {
            background-color: transparent;
            padding: 20px 10px;
            border: 1px solid var(--gray);  
        }
        .form-group input {
            width: 48%;
        }
        .form-field {
            width: 100%;
            margin-bottom: 15px;
        }

.contact-maps > iframe {
    height: 500px;
    border: none;
}
.back-home{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 20%;
}   

.year-header { justify-content: center; margin: 50px 0px;}

/* Tablet responsive */
@media (max-width: 1047px) {
  .about-us-container {
    display: flex;
    flex-direction: column-reverse; 
}

}

/* telefoon responsive */
    @media (max-width: 768px) {
      .header-image h1 {font-size: 3.5rem;}
.about-us-container-home {
    display: flex;
    margin-bottom: 350px;
    flex-direction: column-reverse; 
}

.about-image {
    position: static;
    margin-bottom: 10px;
}

.special-about {padding-bottom: 300px;}

/* About us */
.our-team-container {   padding: 0px 0px;}
.our-team-container > section {
  padding: 50px 20px;
  margin: 0;
}
.our-team-header {display: block;}

.gallery-container {
  padding: 20px 20px;
}
/* History */
.history-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.history-phone {display: none;}
.history-text > a > .secondary-button {margin: 0;}

.year-header {display: block;}
.year-header > p {
  border: none;
}
.histore-header {
  margin: 0;
}
      
      .historie-container-historie, .contact-container {
      grid-template-columns: 1fr; 
      gap: 30px;
      }
      
      .top-row-historie-image,
      .bottom-row-historie-image {
      height: auto;
      }
      
      .top-row-historie-text,
      .bottom-row-historie-text {
      padding: 10px;
      }
      
      .bottom-row-historie-text {
      order: -1;
      }
      .back-home {width: 100%;}

}