:root {
  --text-sm: clamp(0.85rem, 1.1vw, 1.3rem);
  --text-base: clamp(1rem, 1.1vw, 1.4rem);
  --text-lg: clamp(1.25rem, 1.6vw, 1.75rem);
  --heading-xs: clamp(1rem, 0.8vw, 1.2rem);
  --heading-sm: clamp(1rem, 1vw, 1.5rem);
  --heading-md: clamp(1.5rem, 2vw, 2.5rem);
  --heading-lg: clamp(2rem, 3.5vw, 4.5rem);
  --link-md: clamp(1rem, 1.3vw, 1.4rem);
}

body {
  font-size: var(--text-base);
}

h1 {
  font-size: var(--heading-lg);
}

h2 {
  font-size: var(--heading-md);
}

h3 {
  font-size: var(--heading-sm);
}

p {
  font-size: var(--text-base);
}







:root {
    --space-xs: clamp(8px, 1vw, 16px);
    --space-sm: clamp(16px, 2vw, 32px);
    --space-md: clamp(40px, 4.5vw, 100px);
    --space-lg: clamp(60px, 8vw, 120px);
    --space-xl: clamp(80px, 12vw, 180px);
}









:root {
    --container-width: 1400px;
    --page-padding: 200px;
}

@media (max-width: 768px) {
    :root {
        --page-padding: 40px;
    }
}











.small_header{
  text-transform: uppercase;
  color: #9a7e4f;
  font-size: var(--text-sm);
}











#CybotCookiebotDialog {
    box-shadow: 0 -4px 20px rgb(0 0 0 / 48%) !important;
}

.slide-in{
  opacity: 0;
  transition: all 1s ease-out;
}


.show {
  opacity: 1;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  text-decoration: none;
  letter-spacing: 1px;
  list-style: none;
}

::selection {
    background: #725d39;
    color: #101010;
}

body, html {
  overflow-x: hidden;
}

a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
}

a[href^="tel:"]:visited,
a[href^="tel:"]:active,
a[href^="tel:"]:hover {
    color: inherit;
}

.mobile_nav{
  display: none;
}

body{
    background-color: #191919;
}

main{
  display: flex;
  flex-direction: column;
}

.home_header{
  position: relative;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: unset !important;
}

.swiper-slide img {
  width: 100%;
  height: 100svh;
  object-fit: cover;
  transition: transform 10s linear;
  display: block;
}

.mySwiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(0 0 0 / 85%), rgb(0 0 0 / 25%));
  /* background: rgb(0 0 0 / 55%); */
  pointer-events: none;
  z-index: 1;
  left: -1;
  right: -1;
}

.slide-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-width)
    );

    height: calc(100% - 110px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;

    text-align: left;
    z-index: 2;
}

.slide-text h1 {
  font-weight: 400;
  color: #ece9e3;
}

.slide-text p {
  color: rgb(170, 170, 170);
  line-height: 1.5;
  width: 60%;
}

.slider_btn_container{
  display: flex;
  gap: 20px;
}

.slide-text a{
  text-decoration: none;
  transition: 0.3s;
  font-size: var(--link-md);
}


.slider_btn_gold{
  background-color: #9a7e4f;
  color: #ece9e3;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.slider_btn_white{
  border: solid 2px #ece9e3;
  color: #ece9e3;
  padding: 10px 30px;
}

.slider_btn_gold:hover{
  background-color: #725d39;
}

.slider_btn_white:hover{
  background-color: #ece9e3;
  color: #101010;
}


.mySwiper .swiper-slide-active img {
  transform: scale(1.1);
}

.mouse{
  margin: 50px auto;
  width: 100px;
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
}

.mouse-icon{
   width: 25px;
   height: 45px;
   border: 2px solid #ece9e3;
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}

.mouse-wheel{
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: #ece9e3;
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}

@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}

@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}

@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}

/* Over Marijn section */
.over_home_section{
  display: flex;
  justify-content: space-between;
  gap: 10%;
  padding-block: var(--space-lg);

  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;

}

.over_home_right{
  position: relative;
  width: 50%;
  margin-left: 100px;
}

.over_foto_marijn{
  width: 100%;
  height: 90%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  aspect-ratio: 1/1.5;
  margin-bottom: 50px;
}

.gedraaid_logo_container{
  background-color: #101010;
  position: absolute;
  left: -150px;
  top: 50px;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: end;
  padding: 50px;
}

.over_logo_gedraaid{
  width: 75px;
}

.over_home_text{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.over_home_text_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
  width: 50%;
}

.over_home_text h2{
    color: #ece9e3;
}

.over_home_text p{
    color: rgb(170, 170, 170);
    line-height: 1.5;
}

.over_home_link{
  text-decoration: none;
  color: #ece9e3;
  background-color: #9a7e4f;
  padding: 10px 30px;
  display: flex;
  width: fit-content;
  transition: 0.3s;
  font-size: var(--link-md);
}

.over_home_link:hover{
  background-color: #725d39;
}

.dark_background_section{
  background-color: #101010;
}


/* opdrachtgevers home section */
.mySwiper2 .swiper-slide img {
  filter: grayscale(100%);
  transition: filter 0.3s;
  max-height: 160px;
  max-width: 70%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.mySwiper2 .swiper-slide img:hover {
  filter: grayscale(0%);
}

.mySwiper2 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.opdrachtgevers_slider_section h2{
  color: #9a7e4f;
  text-align: center;
  padding-block-end: var(--space-md);
}

.opdrachtgevers_slider_section{
  padding-block-start: var(--space-lg);
}





.reviews_section {
  padding: 100px 0;
  padding-block: var(--space-xl);
  overflow: hidden;
}

.review_title{
  color: #ece9e3;
  text-align: center;
  margin-block-end: var(--space-md);
  padding: 0 15%;
}

.reviewsSwiper {
  width: 100%;
  overflow: visible;
  padding-bottom: 10px !important;

  overflow: visible;
}


















.review_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.review_stars {
  color: #9a7e4f;
  letter-spacing: 3px;
  font-weight: 800;
}


















.review_text_container {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.review_text {
    position: relative;
    max-height: 180px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.review_text.expanded {
    max-height: var(--review-height);
}

.review_text.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, #191919);
    pointer-events: none;
}

.read_more_btn {
  color: #9a7e4f;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--heading-sm);
  font-weight: 400;
  transition: 0.3s;
}

.read_more_btn:hover {
  color: #725d39;
}






















.review_container{
  background-color: #191919;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 15px;
  transition: 0.3s;
  margin: 0 40px;
  box-shadow: 0 4px 15px rgb(0, 0, 0);
}

.review_details_container{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review_btn{
  color: #9a7e4f;
  border: solid 2px #9a7e4f;
  background-color: transparent;
  padding: 10px 30px;
  cursor: pointer;
  font-size: var(--link-md);
  width: fit-content;
  transition: 0.3s;
  display: flex;
  margin: 0 auto;
  margin-block-start: var(--space-md);
}

.review_btn:hover{
  background-color: #9a7e4f;
  color: #191919;
}

.review_container p{
  color: rgb(255, 255, 255);
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
}

.review_details{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review_divider{
    height: 2px;
    background: #9a7e4f;
    width: 20%;
}

.review_container h2{
  color: rgb(170, 170, 170);
  font-weight: 400;
}

.review_container h3{
  color: rgb(170, 170, 170);
  font-weight: 400;
}

.review_container h3:empty{
  display: none;
}

/* projecten home section */
.projecten_text_container{
  display: flex;
  justify-content: space-between;
  gap: 15%;
  padding-block-end: var(--space-md);

  width: min(
      calc(100% - (var(--page-padding) * 2)),
      var(--container-width)
  );
  margin-inline: auto;
}

.projecten_text_left{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.white_h2{
  color: #ece9e3;
}

.gold_h3{
  color: #9a7e4f;
  white-space: nowrap;
  font-weight: 400;
  font-size: var(--text-lg);
}

.white_paragraph{
  color: rgb(170, 170, 170);
  line-height: 1.5;
}

.mySwiper3{
  overflow: visible !important;
}

.mySwiper3 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-link {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    box-shadow: 0 4px 15px rgb(0, 0, 0);
}

.project-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.project-link:hover img {
    transform: scale(1.05);
}

.slide-content{
  height: 100%;
}

.pagination_container{
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
  margin-block: var(--space-md);
  margin-block-end: var(--space-lg);
}

.swiper-button-next,
.swiper-button-prev {
  color: #9a7e4f !important;
  position: relative !important;
  margin-top: 0 !important;
  transition: 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #725d39 !important;
}

.swiper-button-next svg, .swiper-button-prev svg{
  display: none;
}

.swiper-pagination3 .swiper-pagination-bullet {
  background: #515151;
  opacity: 1;
  width: 13px;
  height: 13px;
}

.swiper-pagination3 .swiper-pagination-bullet-active {
  background: #9a7e4f;
}

.swiper-pagination3{
  position: relative !important;
}

.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
  left: 0 !important;
  transform: none !important;
}

.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: auto !important;
}

.contact_fixed_image{
  background-image: linear-gradient(to right, rgb(0 0 0 / 94%), rgb(0 0 0 / 52%)), url(../img/2Werkplaats.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 65%;
  height: 50vh;
  display: flex;
  align-items: center;
}

.usps_section{
  padding-block: var(--space-lg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.682), rgba(0, 0, 0, 0.5)), url(../img/Keuken3/IMG-20260306-WA0043.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.usps_container{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  width: min(
      calc(100% - (var(--page-padding) * 2)),
      var(--container-width)
  );
  margin-inline: auto;
}

.usps_section_about {
  margin-block: var(--space-lg);
}

.usp_container {
  color: #ece9e3;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background-color: #101010;
  padding: 30px;
  flex: 1 1 200px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 38%);
}

.usp_container h2 {
  line-height: 1.5;
}

.usp_container p{
  color: rgb(170, 170, 170);
}

.usp_wrapper {
  position: relative;
  width: 70px;
  height: 70px;
}

.usp {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #202020;
  color: #9a7e4f;
  clip-path: polygon(
      50% 0%,
      93% 25%,
      93% 75%,
      50% 100%,
      7% 75%,
      7% 25%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

.vragen_home_section{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 150px;
  padding: 0 15%;
  padding-bottom: 150px;
  margin-top: 100px;
}

.vragen_left_container{
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 50px;
}

.adviesgesprek_container{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 400px;
}

.adviesgesprek_container h3{
  color: #ece9e3;
  font-size: var(--heading-md);
}

.adviesgesprek_container p{
  color: rgb(170, 170, 170);
  line-height: 1.5;
}

.vragen_afbeelding{
  width: 30vw;
  height: 80vh;
  object-fit: cover;
}

.vragen_informatie_container{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.info_item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.info_icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: #9a7e4f;
}

.vragen_informatie_container h2{
  margin-bottom: 10px;
}

.vragen_informatie_container h3{
  color: #ece9e3;
  font-weight: 400;
  font-size: var(--text-lg);
}

.vragen_informatie_container a{
  color: #ece9e3;
  font-weight: 400;
  font-size: var(--text-lg);
  transition: 0.3s;
}

.vragen_informatie_container a:hover{
  color: rgb(170, 170, 170);
}

.vragen_right{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header_content_container{
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header{
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* about pagina */
.header_about {
  background-image:
  linear-gradient(rgba(0, 0, 0, 0.682), rgba(0,0,0,0.5)),
  url(../img/Montage.webp);
}

.header_contact {
  background-image: 
  linear-gradient(rgba(0, 0, 0, 0.682), rgba(0,0,0,0.5)),
  url(../img/header.webp);
}

.header_projecten {
  background-image: 
  linear-gradient(rgba(0, 0, 0, 0.682), rgba(0,0,0,0.5)),
  url(../img/Marijnworking.webp);
}

.header_notfound{
  height: 80vh;
  background-position: right;

  background-image: 
  linear-gradient(to right, rgb(0 0 0 / 88%), rgba(0, 0, 0, 0.5)), url(../img/Marijnworking.webp);
}

.header_h1{
  color: #ece9e3;
  font-weight: 400;
}

.header_p{
  color: rgb(170, 170, 170);
  width: 50%;
  font-weight: 400;
  line-height: 1.5;
}

.about_text_container{
  display: flex;
  flex-direction: column;
  background-color: #101010;
}

.about_text_container_socials{
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-block-start: var(--space-lg);
}

.over_socials_container{
  display: flex;
  flex-direction: column;
  gap: 20px;

      width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;

}

.about_text_h2{
  color: #9a7e4f;
  text-transform: uppercase;
}

.about_left{
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.about_text_p_white{
  line-height: 1.5;
  color: #ece9e3;
  border-left: solid 2px #9a7e4f;
  padding-left: 20px;
  margin-top: 20px;
}

.werkplaats_afbeelding{ 
  width: clamp(300px, 17vw, 450px);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.about_text_right{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.about_text_p_top{
  color: #ece9e3;
  line-height: 1.5;
}

.about_text_p{
  color: rgb(170, 170, 170);
  line-height: 1.5;
}

.socials_text_p{
  color: #ece9e3;
  line-height: 1.5;
  width: 50%;
  border-left: solid 2px #9a7e4f;
  padding-left: 20px;
}

.over_top_container{
  display: flex;
  gap: 150px;
  padding-block: var(--space-lg);

    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
}

.over_text_below{
  padding: 50px 15%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.erkend_leerbedrijf{
  width: clamp(100px, 7vw, 150px);
  height: clamp(100px, 7vw, 150px);
}













.mySlides{
  display: none;
  width: 100%;
}

.mySlides img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  vertical-align: middle;
}

.slideshow-container {
  position: relative;
  margin-block-start: var(--space-lg);
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 150px;
}

.slideshow_left_container {
    width: 50%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}

.slideshow_left_container .mySlides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.slideshow_left_container .mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.visuals_section{
      width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;

}

.slideshow_right_container{
  display: flex;
  flex-direction: column;
  width: 50%;
}

.slideshow_btn{
  color: #9a7e4f;
  border: solid 2px #9a7e4f;
  background-color: transparent;
  padding: 10px 30px;
  cursor: pointer;
  font-size: var(--link-md);
  width: fit-content;
  transition: 0.3s;
  display: flex;
  margin-block-start: var(--space-sm);
}

.slideshow_btn:hover{
  background-color: #9a7e4f;
  color: #ece9e3;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #9a7e4f;
  font-weight: bold;
  font-size: 18px;
  transition: 0.3s;
  border-radius: 0;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.645);
}

.next {
  right: 0;
}

.prev:hover, .next:hover {
  color: #725d39;
}

.numbertext {
  color: #101010;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.slideshow_text{
  color: #ece9e3;
  border-left: solid 2px #9a7e4f;
  padding-left: 20px;
  margin-block-start: 20px;
  line-height: 1.5;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}























.contact_btm_section {
  position: relative;
  margin-block: var(--space-lg);
}

.contact_btm_img{
  width: 40%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
}

.contact_left_container{
  width: 50%;
}

.contact_btm_container{
  display: flex;
  align-items: center;
  justify-content: end;
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
  height: 80vh;
}






/* contact pagina begin */
.contact_top_section{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-lg);
  gap: 10%;

  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}

.contact_container{
  width: 50%;
}

.form_header_text{
  color: #9a7e4f;
  margin-bottom: 20px;
}

form{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff00 inset !important;
  -webkit-text-fill-color: #ece9e3 !important;
  transition: background-color 9999s ease-in-out 0s;
}

.form_input{
  border: none;
  background-color: transparent;
  border-bottom: solid 2px #ece9e3;
  font-size: var(--text-base);
  padding: 20px 0;
  width: 100%;
  color: #ece9e3;
}

.form_input::placeholder{
  color: rgb(170, 170, 170);
}

textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}

input:focus{
  outline: none;
}

textarea:focus{
  outline: none;
}

.form_send_btn{
  color: #ece9e3;
  background-color: #9a7e4f;
  padding: 10px 30px;
  border: none;
  width: fit-content;
  cursor: pointer;
  transition: 0.3s;
  font-size: var(--link-md);
  margin-top: 20px;
  transition: 0.3s;
}

.form_send_btn:hover{
  background-color: #725d39;
}

.contact_maps_section{
  display: flex;
  justify-content: space-between;
  gap: 10%;
  padding-block: var(--space-lg);

  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}

.map-container{
  width: 50%;
}

iframe{
  aspect-ratio: 1 / 1;
}

.contact_social_container{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}

.contact_social_container h2{
  color: #9a7e4f;
  text-transform: uppercase;
}

.text_container{
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: solid 2px #9a7e4f;
  padding-left: 20px;
  line-height: 1.5;
}

.text_contact_top{
  color: #ece9e3;
}

.text_contact_btm{
  color: rgb(170, 170, 170);
}

.contact_media_links_container{
  display: flex;
  gap: 10px;
  width: 30vw;
}

.contact_media_links_container a{
  text-decoration: none;
}

.projecten_page_container{	
  display: flex;
}

.project-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  padding-left: 20px;
  border-left: solid 2px #9a7e4f;
  margin-top: 20px;
}

.project-title{
  text-transform: uppercase;
  color: #9a7e4f;
  margin: 20px 0;
}

.card{
  width: calc(30% - 5px);
}

.project_title{
  color: #ece9e3;
  font-size: var(--text-lg);
}

.project_hyperlink{
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.img_project_div{
  overflow: hidden;
  height: auto;
  width: 100%;
  aspect-ratio: 1/1;
}

.projecten_page_image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.goverlay{
  background: #1e1e1ed1 !important;
      backdrop-filter: blur(10px);

}

.gnext, .gprev {
  background-color: rgba(0, 0, 0, 0.363) !important;
  border: none !important;
  border-radius: 0 !important;
  transition: 0.3s;
  aspect-ratio: 1/1;
  height: unset !important;
  width: 50px !important;
  transition: 0.3s !important;
}

.gnext path,
.gprev path {
  transition: 0.3s !important;
}

.gnext:hover path,
.gprev:hover path {
    fill: #9a7e4f !important;
}

.gnext path, .gprev path{
  fill: #ece9e3 !important;

}


.project_gray_text{
  color: #9a7e4f;
  font-weight: 400;
  text-transform: uppercase;
}

.project_date_text{
  color: rgb(170, 170, 170);
  font-weight: 400;
}

.bekijk_project_btn{
  color: rgb(170, 170, 170);
  font-size: var(--text-base);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.3s;
}

.bekijk_project_btn:hover{
  color: #9a7e4f;
}

.project_hyperlink:hover .bekijk_project_btn svg{
  fill: #9a7e4f;
  transition: 0.3s;
}

.project_hyperlink:hover .bekijk_project_btn{
  color: #9a7e4f;
}

.project_hyperlink:hover .projecten_page_image{
  transform: scale(1.05);
}

.bekijk_project_btn svg{
  fill: rgb(170, 170, 170);
  width: 15px;
  height: auto;
  display: block;
}

.grid {
  gap: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#app{
  display: flex;
  flex-direction: column;
  gap: 100px;
}







.pager {
  display:flex;
  justify-content: center;
  gap:10px;
  align-items:center;
}

.pager-btn{
  border: 2px solid #9a7e4f;
  color: #9a7e4f;
  background-color: transparent;
  cursor:pointer;
  font-size: 1rem;
  height: 40px;
  padding: 0 10px;
  transition: 0.3s;
}

.pager-btn:disabled {
  padding:8px 10px;
  border: 2px solid #9a7e4f;
  color: #9a7e4f;
  background-color: transparent;
  cursor:pointer;
}

.pager-btn:not(:disabled):hover {
  background-color: #9a7e4f;
  color: #101010;
}

.pager-btn:disabled { opacity:0.5; cursor:default; }
.pager-btn.active, .pager-btn.page-num.active {
  background-color: #9a7e4f;
  color: #101010;
}

.pager-btn.active:hover{
  background-color: #725d39;
  border: 2px solid #725d39;
}

.pager-btn.page-num {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.project_hyperlink_jouw_project{
  display: block;
  text-decoration: none;
  color: #ece9e3;
  background-color: #202020;
  padding: 50px;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.project_hyperlink_jouw_project h2{
  color: #ece9e3;
}

.project_hyperlink_jouw_project p{
  color: rgb(170, 170, 170);
}

.opdrachtgevers_projecten_section{
  background-color: #101010;
  padding-bottom: 100px;
  margin-top: var(--space-lg);
}

.projects-row{
  width: min(
      calc(100% - (var(--page-padding) * 2)),
      var(--container-width)
  );
  margin-inline: auto;
}

.project-controls{
  margin-block: var(--space-lg);
}

.scroll-btn{
  width: fit-content;
  background-color: #9a7e4f;
  border: none;
  color: #ece9e3;
  padding: 10px 30px;
  font-size: var(--link-md);
  cursor: pointer;
  transition: 0.3s;
}

.scroll-btn:hover{
  background-color: #725d39;
}

.project-detail{
    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
}

.project_top_div{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block: var(--space-lg);
}

.back{
  color: #ece9e3;
  transition: 0.3s;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--text-base);
  width: fit-content;
}

a.back:hover svg {
  fill: #9a7e4f;
}

a.back:hover {
  color: #9a7e4f;
}

.back svg{
  width: 15px;
  height: auto;
  display: block;
  fill: #ece9e3;
  transition: 0.3s;
  transform: scaleX(-1);
}

.Title_date_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project_details_h2{
  color: #ece9e3;
  font-weight: 400;
}

.project-content, .project-description{
  color: #ece9e3;
  line-height: 1.5;
}

.project-gallery-wrapper{
  display: flex;
  flex-direction: column;
  gap: 100px;
}

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

.project-gallery-grid > :nth-child(-n+2) img {
  height: 100%;
}

.project-gallery-grid .item-1 { grid-column: 1; grid-row: 1; }
.project-gallery-grid .item-2 { grid-column: 2; grid-row: 1; }
.project-gallery-grid .item-3 { grid-column: 1 / span 2; grid-row: 2; }

.project-gallery-grid img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  display: block;
}

.project-gallery-grid .gallery-item,
.project-gallery.extra .gallery-item {
    overflow: hidden;
}

.project-gallery-grid .gallery-item img,
.project-gallery.extra .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.project-gallery-grid .gallery-item:hover img,
.project-gallery.extra .gallery-item:hover img {
    transform: scale(1.05);
}

.glightbox:focus{
  outline: none;
}

.glightbox-clean .gclose{
  top: 30px !important;
  right: 30px !important;
  opacity: unset !important;
  background-color: rgba(0, 0, 0, 0.363) !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 40px !important;
}

.glightbox-clean .gclose path,
.glightbox-clean .gclose path {
  transition: 0.3s !important;
}

.glightbox-clean .gclose:hover path,
.glightbox-clean .gclose:hover path {
    fill: #9a7e4f !important;
}

.lightbox-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #ece9e3;
    font-size: 1rem;
    z-index: 9999;
}

.gslide-image img{
  max-height: 85vh !important;
}

.extra{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.gallery-item{
  height: 50vh;
}

.project-gallery-grid .item-3{
  height: 60vh;
}

.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.not_found_p{
  line-height: 1.5;
  color: rgb(170, 170, 170);
  width: 50%;
}

.error_border_container{
  padding-left: 20px;
  border-left: solid 2px #9a7e4f;
  display: flex;
  flex-direction: column;
  gap: 20px;
}






.privacy_section{
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #ece9e3;
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
  padding-block: var(--space-lg);
}

.privacy_section h2{
  margin-block-start: var(--space-sm);
  color: #9a7e4f;
  font-weight: 400;
}

.privacy_section p{
  line-height: 1.5;
}

.privacy_section ul{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.privacy_section ul li{
  list-style: inside;
}

.privacy_mail{
  color: rgb(170, 170, 170) !important;
  transition: 0.3s;
}

.privacy_mail:hover{
  color: #ece9e3 !important;
}





@media (max-width: 1024px) {
  .nav_standard{
    display: none !important;
  }

  .mobile_nav{
    display: block;
  }

  .not_found_p{
    width: 100%;
  }

  .slide-text{
    width: 100%;
    left: 0;
    padding: 200px;
    height: 100%;
    transform: unset;
  }

  .header_p{
    width: 100%;
  }

  .mouse{
    margin: 25px auto;
  }

  .over_home_section{
    flex-direction: column;
    gap: 50px;
  }

  .over_home_text_container{
    width: 100%;
  }

  .over_home_right{
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
    margin-left: 0;
    width: 100%;
  }

  .over_home_link{
    margin-top: 20px;
  }

  .gedraaid_logo_container{
    width: 70%;
    left: 0;
    top: 0;
    padding: 30px;
    height: 100%;
    margin-top: 30px;
  }

  .over_foto_marijn{
    width: 70%;
    margin-bottom: 0;
  }

  .over_logo_gedraaid{
    width: 45px;
  }

  .review_container{
    margin: 0;
  }

  .project-link:hover{
    transform: translateY(-0px);
  }

  .vragen_afbeelding{
    width: 100%;
  }

  .vragen_home_section{
    flex-direction: column;
    padding: 0;
    gap: 100px;
  }

  .vragen_left_container{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .vragen_right {
    margin: 100px 15%;
    margin-top: 0;
  }









  /* Over marijn */

.over_top_container{
  gap: 50px;
  flex-direction: column;
}

.socials_text_p{
  width: 100%;
}

.slideshow-container{
  flex-direction: column;
  gap: 50px;
  align-items: start;
}

.slideshow_right_container{
  width: 100%;
}

.slideshow_left_container{
  width: 100%;
}

.contact_btm_container{
  width: 100%;
  margin: unset;
  flex-direction: column;
  align-items: start;
  height: unset;
  gap: var(--space-xl);
}

.contact_btm_img{
  width: 80vw;
  position: relative;
}

.contact_btm_section{
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: start;
  margin-bottom: 50px;
}

.contact_left_container{
      width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
}

.contact_container{
  width: 100%;
}

.form_input{
  width: 100%;
}








/* projecten */
.project-intro {
    width: 100%;
}

#results{
  width: unset;
}

.card{
  width: calc(40% - 5px);
}


/* contact */
.contact_top_section{
  flex-direction: column;
  gap: 50px;
}

.contact_maps_section {
  flex-direction: column;
  gap: 50px;
}

.map-container{
  width: 100%;
}

iframe{
  width: 100%;
}

.contact_social_container{
  width: 100%;
}
}




@media (max-width: 768px) {
  .nav_standard{
    display: none !important;
  }

  .mobile_nav{
    display: block;
  }

  


  .slide-text p{
    width: 100%;
  }

  .slide-text{
    width: 100%;
    left: 0;
    padding: 40px;
  }

  .slider_btn_container{
    flex-direction: column;
  }

  .slider_btn_container a{
    width: fit-content;
  }





  .opdrachtgevers_slider_section h2{
    padding: 50px 15%;
  }

  .opdrachtgevers_slider_section{
    padding: 0;
  }

  .mySwiper2 .swiper-slide img {
    max-height: 75px;
    max-width: 100%;
    padding: 0 10px;
  }

  .reviews_parent{
    flex-direction: column;
  }

  .projecten_text_container{
    flex-direction: column;
    gap: 20px;
  }

  .gold_h3{
    white-space: wrap;
  }



  .usps_section{
    flex-wrap: wrap;
    gap: 50px;
    background-attachment: scroll;
  }

  .usp{
    width: 65px;
    height: 65px;
  }

  .vragen_afbeelding{
    width: 100%;
    height: 50vh;
  }

  .vragen_home_section{
    flex-direction: column;
    padding: 0;
    gap: 50px;
  }

  .vragen_right {
    margin: 50px 15%;
    margin-top: 0;
  }










  /* projecten */
  .grid{
    display: flex;
    flex-direction: column;
  }

  #results{
    width: 100%;
  }

  .card{
    width: 100%;
  }

  .project_hyperlink_jouw_project{
    padding: 50px;
    gap: 30px;
  }

  .project_top_div{
    margin-bottom: 50px;
  }

  .Title_date_container{
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }

  .project-gallery-grid{
    /* display: flex;
    flex-direction: column; */
    gap: 20px;
  }

  .gallery-item{
    height: 30vh;
  }

  .project-gallery-grid .item-3{
    height: auto;
  }

  .extra{
    display: flex;
    flex-direction: column;
  }
}


:disabled{
  opacity: 0.5;
}

:disabled:hover{
  background-color: #9a7e4f;
  cursor: default;
}