/* Josefin Sans */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
/* Raleway */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --zwart: #000000;
    --wit: #FFFFFF;
    --charcoal: hsla(197, 37%, 24%, 1);
    --persian-green: #2a9d90;
    --rood: #ff614c;
    --paars: #d942ff;
    --grijs: hsla(0, 0%, 30%, 1);
    --lichtgrijs: hsla(0, 0%, 80%, 1);
    --donkergrijs: hsla(0, 0%, 5%, 1);
    --lichtblauw: rgba(138,252,255,1);
    --gradient-1: linear-gradient(60deg, #8afcff 0%, #d942ff 100%);
    --gradient-2: linear-gradient(135deg, rgba(138,252,255,1) 0%, var(--zwart) 50%, rgba(217,66,255,1) 100%);
    --border-color: color-mix(in lab, var(--wit), hsla(0, 0%, 0%, .1) 90%);
  }
:root {
    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
    --step-6: clamp(3.3592rem, 2.8691rem + 2.4507vi, 4.7684rem);
    --step-7: clamp(4.0311rem, 3.36rem + 3.3555vi, 5.9605rem);
    --step-8: clamp(4.8373rem, 3.9283rem + 4.5448vi, 7.4506rem);
  }
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-family: 'Raleway', sans-serif;
}
/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: var(--wit); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--lichtgrijs);
}
/* pagina kleuren */
#services{
  --paginakleur: var(--rood);
}
#home{
  --paginakleur: var(--persian-green);
}
#contact{
  --paginakleur: var(--paars);
}
#overons{
  --paginakleur: var(--lichtblauw);
}
body.light{
  --zwart: #FFFFFF;
  --wit: #000000;
  --charcoal: hsla(197, 37%, 24%, 1);
  --persian-green: #2a9d90;
  --rood: rgb(255, 97, 76);
  --paars: rgb(217, 66, 255);
  --grijs: hsla(0, 0%, 0%, 1);
  --lichtgrijs: hsla(0, 0%, 20%, 1);
  --donkergrijs: hsla(0, 0%, 5%, 1);
  --gradient-1: linear-gradient(60deg, rgba(138,252,255,1) 0%, rgb(217, 66, 255) 100%);
  --gradient-2: linear-gradient(135deg, rgba(138,252,255,1) 0%, var(--zwart) 50%, rgba(217,66,255,1) 100%);

}
body{
  background-color: var(--zwart);
  scroll-behavior: smooth;
}
body.noscroll{
  overflow: hidden;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  height: 125px;
  align-items: center;
  position: relative;
  width: 100%;
  top: 0;
  transition: .2s ease-in-out;
  z-index: 1001;
  position: absolute;
}

header.scroll {
  background-color: color-mix(in lab, var(--zwart), hsla(0, 0%, 100%, .1));
  /* background-color: hsla(0, 0%, 0%, .9); */
  backdrop-filter: blur(5px);
  --webkit-backdrop-filter: blur(5px);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  margin: 1rem;
  width: calc(100% - 2rem);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  /* animation: menufade .5s ease-in-out; */
  z-index: 1001;
}

@keyframes menufade{
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0);
  }
}
.logo{
  display: flex;
  align-items: baseline;
  text-decoration: none;
}
.logo h2{
  font-size: var(--step-4);
  color: var(--wit);
}
.logo h2::after{
  content: ' ';
  display: inline-block;
  height: .5rem;
  aspect-ratio: 1;
  margin-inline: -.25rem .25rem;
  background-color: var(--persian-green);
  border-radius: 50%;
}
.logo p{
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--grijs);
}

@media (max-width: 500px){
  .logo p{
    display: none;
  }
}
.hero{
  padding-top: 15rem;
  margin: auto;
}
.hero h1,
.contact h1{
  font-size: max(10vw, var(--step-8));
  color: var(--wit);
  font-weight: 600;
  text-align: center;
  text-transform: lowercase;
}

.contact h1::after,
.hero h1::after{
  content: ' ';
  display: inline-block;
  aspect-ratio: 1;
  height: 1vw;
  background-color: var(--paginakleur);
  background-size: contain;
  border-radius: 50%;
}
.hero{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero p{
  font-size: var(--step-6);
  color: var(--wit);
  font-weight: 500;
  text-align: center;
}

.changing-font{
  position: relative;
  overflow: clip;
  z-index: -1;
}
.changing-font p{
  --animation-speed: 12s;
  color: transparent;
  /* color: var(--persian-green); */
  font-size: var(--step-7);
  background: rgb(2,0,36);
  background: linear-gradient(60deg, rgba(138,252,255,1) 20%, rgb(255, 97, 76) 30%, rgb(217, 66, 255) 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* background-color: white; */
  animation: changing-font var(--animation-speed) infinite ease-in-out, font-color 3s infinite ease-in-out;
}
@keyframes font-color{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}
.changing-font p:nth-child(1){
  animation-delay: 0s;
}
.changing-font p:nth-child(2){
  animation-delay: calc(var(--animation-speed) / 4);
}
.changing-font p:nth-child(3){
  animation-delay: calc(var(--animation-speed) / 4 * 2);
}
.changing-font p:nth-child(4){
  animation-delay: calc(var(--animation-speed) / 4 * 3);
}
.changing-font p:nth-child(2),
.changing-font p:nth-child(3),
.changing-font p:nth-child(4){
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  transform: translateY(100%);
}
@keyframes changing-font{
  0%{
    transform: translateY(100%);
    opacity: 1;
  }
  7.5%{
    transform: translateY(-10%);
  }
  10%{
    transform: translateY(0);
  }
  20%{
    transform: translateY(0);
  }
  25%{
    transform: translateY(10%);
    opacity: 1;
  }
  30%{
    transform: translateY(-100%);
    visibility: hidden;
  }
  99%{
    transform: translateY(100%);
    visibility: hidden;
  }
  100%{
    visibility: visible;
    transform: translateY(100%);
  }

}

.onswerkhome{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 2rem;
  margin: 10rem 2rem 2rem 2rem;
}
.links{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid var(--border-color);
  aspect-ratio: 16/12;
  width: 400px;
}
@media (max-width: 1350px){
  .links{
    width: 300px;
  }
}
@media (max-width: 1030px){
  .links{
    width: 250px;
  }
}
.links p{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--lichtgrijs);
  font-size: var(--step-5);
  font-weight: 600;
  width: max-content;
  background: linear-gradient(220deg, rgba(138,252,255,1) 20%, rgb(255, 97, 76) 30%, rgb(217, 66, 255) 100%);
  background-size: 150%;
  -webkit-background-clip: text;
  animation: changing-font var(--animation-speed) infinite ease-in-out, font-color 3s infinite ease-in-out;
  transition: .5s ease-in-out;
}
.links p::after{
  content: ' ';
  display: inline-block;
  height: .5rem;
  aspect-ratio: 1;
  margin-left: .25rem;
  background-color: var(--persian-green);
  border-radius: 50%;
  transition: .5s ease-in-out;
}
.links::after{
  content: ' ';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, .3);
  background-color: color-mix(in lab, var(--zwart), hsla(0,0%,0%, 0) 90%);
  transition: .5s ease-in-out;
}
.onswerkhome img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .2s ease-out;
  opacity: .5;
}
.links:hover img{
  transform: scale(1.2);
}
.links:hover p{
  color: transparent;
}
.links:hover p::after{
  background-color: rgb(255, 97, 76);
}
.links:hover::after{
  background-color: hsla(0, 0%, 0%, .2);
}

/* menu */
.buttons{
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}
.menuToggle,
.contact_button{
  padding: 1rem 2rem;
  cursor: pointer;
  transition: .2s ease-in-out;
}
.menuToggle{
  z-index: 1001;
  position: relative;
  overflow: clip;
  border: 2px solid var(--border-color);
  border-radius: 20px;  
}
.contact_button{
  /* background-color: var(--persian-green); */
  border: 2px solid color-mix( in lab, var(--persian-green), var(--border-color));
  border-radius: 20px;
  position: relative;
  overflow: clip;
}
.contact_button::after,
.menuToggle::after{
  content: ' ';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gradient-1);
  z-index: -1;
  opacity: 0;
  transition: .3s ease-in-out;
}
.menuToggle:hover::after,
.contact_button:hover::after{
  opacity: .1;
}
body.light .menuToggle:hover::after,
body.light .contact_button:hover::after{
  opacity: .3;
}
#contact .contact_button{
  display: none;
}
.contact_button a{
  text-decoration: none;
  color: var(--wit);
}
.menuToggle p,
.contact_button a{
  font-size: var(--step-3);
  color: var(--wit);
  font-weight: 600;
  display: block;
  transition: .5s ease-out;
}
.menuToggle p::after,
.contact_button a::after{
  content: ' ';
  display: inline-block;
  height: .5rem;
  aspect-ratio: 1;
  margin-inline: .25rem 0;
  background-color: var(--persian-green);
  border-radius: 50%;
}
.contact_button a::after{
  background-color: var(--grijs);
}
.menu ul li[data-content="contact"]{
  display: none;
}
@media ( max-width: 1100px){
  .contact_button{
    display: none;
  }
  .menu ul li[data-content="contact"]{
    display: block;
  }
  .menu ul li[data-content="home"]{
    display: none;
  }
}
.menuToggle::before{
  content: "close";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  font-size: var(--step-3);
  color: var(--wit);
  font-weight: 600;
  display: block;
  transition: .5s ease-out;
}
.menuToggle.active p{
  transform: translateY(-150%)
}
.menuToggle.active::before{
  transform: translate(-50%, -50%);
}
.menu{
  --menu-animation: .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--zwart);
  transform: translate(100%, -100%) scale(0.5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: var(--menu-animation) ease-in-out;
  border-radius: 50%;
}
.menu.active{
  transform: none;
  border-radius: 0;
}
.menu ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5rem 0;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.menu ul li div{
  overflow: clip;
  transition: .3s ease-in-out .1s;
}
.menu ul li a{
  display: block;
  font-size: 10vh;
  font-weight: 600;
  color: var(--wit);
  text-decoration: none;
  transition: .5s ease-in-out;
  /* text-transform: uppercase; */
  translate: 0 200%;
}
.menu.active ul li a{
  translate: 0;
  transition: .5s ease-in-out calc(var(--menu-animation) + 0.1s * var(--delay));
}
.menu ul li::after{
  content: attr(data-content);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 40%);
  font-size: 35vw;
  font-weight: 800;
  color: hsla(0, 0%, 100%, .1);
  color: color-mix(in lab, var(--wit) , hsla(0, 0%, 0%, .1) 90%);
  opacity: 0;
  width: max-content;
  visibility: hidden;
  z-index: -1;
  transition: .2s ease-in-out , transform .2s ease-in-out;
}
.menu ul li:hover::after{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 20%);
  transition: .2s ease-in-out .3s, transform .4s ease-in-out .2s;
}
.menu ul li div:hover{
  transform: scale(1.1);
  opacity: 1;
}
.menu ul:has(li:hover) li:not(:hover) div{
  transform: scale(0.9);
  opacity: 0.5;
}
/* .mousecirkel{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50px;
  aspect-ratio: 1;
  background-color: var(--persian-green);
} */
@media (hover: hover) and (pointer: fine){
.mousecirkel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--step-8);
  aspect-ratio: 1;
  background-color: #fff;
  border: #000000 5px solid;
  border-radius: 50%;
  pointer-events: none; 
  transform: translate(-50%, -50%); 
  transition: scale .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out, width .2s ease-in-out .1s; 
  z-index: 2000;
  /* mix-blend-mode: multiply; */
  mix-blend-mode: difference;
  visibility: hidden;
  opacity: 0;
  scale: 1;
  transform-origin: center;
}
.mousecirkel.active {
  visibility: visible;
  opacity: 1;
}
}

/* mouse tracker */

@keyframes rotate {
  from {
    rotate: 0deg;
  }
  
  50% {
    scale: 1 1.5;
  }
  
  to {
    rotate: 360deg;
  }
}

@media (hover: hover) and (pointer: fine) {
#blob {
  background-color: white;
  height: 10vmax;
  aspect-ratio: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--gradient-1);
  /* background: beige; */
  background-size: 200%;
  animation: font-color 10s infinite ease-in-out;
  opacity: 0.8;
  z-index: -2;
  filter: blur(100px);
}
}

.blok{
  position: absolute;
  top: 5%;
  left: 50%;
  translate: -50% 0;
  width: 60vw;
  height: 60vh;
  /* background-color: red; */
  /* opacity: .2; */
  z-index: 0;
 }
 #tilt{
  display: block;
  transition: box-shadow 0.2s, transform 0.2s;
 }

 /* services homepage */
.homepagesections{
  display: flex;
  justify-content: space-evenly;
  gap: 2rem;
  margin: 2rem; 
  flex-wrap: wrap;
}
.homepagesec,
.pagesec{
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.pagesec > h2{
  text-transform: lowercase;
}
.pagesec{
  width: 75%;
  margin: auto;
  min-width: min(1400px, 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#first-section{
  height: max-content;
}
.homepagesec{
  width: 45%;
  margin: 0;
  min-width: min(900px, 100%);
  position: relative;
}
/* .homepagesec.odd{
  margin-left: 0;
  margin-right: auto;
} */
.homepagesec h2,
.pagesec h2,
#horizontal-scoll > h2{
  font-size: var(--step-8);
  width: max-content;
  color: var(--wit);
  font-weight: 600;
}
.homepagesec h2::after,
.pagesec h2::after,
#horizontal-scoll > h2::after{
  content: ' ';
  display: inline-block;
  height: 1rem;
  aspect-ratio: 1;
  margin-inline: .25rem 0;
  background-color: var(--grijs);
  background-color: color-mix(in lab, var(--paginakleur), hsla(0, 0%, 0%, .2));
  border-radius: 50%;
}
@media (max-width: 600px){
  .homepagesec h2,
  .pagesec h2,
  #horizontal-scoll > h2{
    font-size: var(--step-5);
  }
  .homepagesec h2::after,
.pagesec h2::after,
#horizontal-scoll > h2::after{
    height: .25rem;
  }
  .homepagesec,
  .pagesec{
    gap: 1rem;
    padding: .5rem;
  }
  .pagesec{
    min-height: auto;
  }
}
.homepagetext,
.pagetext{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem
}
.homepagetext, 
.pagetext{
  border-radius: 20px;
  border: 2px solid hsla(0, 0%, 50%, .2);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}
.contact::before,
.pagetext::before{
  content: ' ';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--zwart);
  background: var(--gradient-2);
  opacity: .1;
  /* background-size: 200%; */
  z-index: -1;
}
.homepagetext p,
.pagetext p{
  font-size: var(--step-0);
  color: var(--lichtgrijs);
  /* text-align: center; */
  width: 90%;
}
.homepagetext p{
  /* min-height: 250px; */
}
@media (max-width: 1250px){
  .homepagetext,
  .pagetext{
    padding: 2rem;
  }
  .homepagetext p{
    min-height: auto;
  }
}
.learnmore{
  padding: 1rem 2rem;
  border: 2px solid var(--border-color);
  font-size: var(--step-3);
  font-weight: 600;
  position: absolute;
  width: max-content;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
  scale: 0.5;
  opacity: 0;
  border-radius: 10px;
  transform-origin: left top;
  transition:opacity 50ms ease-in, scale 50ms ease-in-out;
  overflow: hidden;
  background-color: var(--zwart);
}
.pagetext ul li::after,
.pagetext ul li::before,
.hero ul li::after,
.hero ul li::before,
.learnmore::after,
.learnmore::before{
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.pagetext ul li::after,
.hero ul li::after,
.learnmore::after{
  background:var(--gradient-1);
  z-index: -2;
  opacity: .2;
}
.homepagetext.active .learnmore{
  opacity: 1;
  scale: 1;
  transition:opacity .4s ease-out .2s, scale .4s ease-out .2s;
}
.learnmore a{
  display: block;
  text-decoration: none;
  color: var(--wit);
  transition: .2s ease-in-out;
}
.learnmore a:hover{
  scale: 0.95;
}
.servicesrow{
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center;
}
.servicesrow .number{
  position: absolute;
  top: 60%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  font-size: 250px;
  color: var(--border-color);
  font-weight: 600;
  z-index: 1;
  font-family:'Josefin Sans' ,sans-serif;
}
.servicesrow > div{
  --border-width: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  width: 100%;
  max-width: max-content;
  border-radius: 10px;
  position: relative;
  border: 3px solid var(--border-color);
  z-index: 0;
  /* opacity: .8; */
  transition: .2s ease-in-out;
  min-width: 250px;
  min-height: 150px;
  overflow: hidden;
}
/* .servicesrow > div:hover{
  opacity: 1;
}
.servicesrow > div::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + calc(var(--border-width) * 2));
  height: calc(100% + calc(var(--border-width) * 2));
  border-radius: inherit;
  background: var(--gradient-2);
  background-size: 150%;
  z-index: -1;
  transition: background-position .2s ease-out;
  opacity: .3;
} */
/* .servicesrow > div::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100%);
  height: calc(100%);
  border-radius: inherit;
  z-index:-1;
  background: var(--zwart);
  opacity: .5;
} */
.servicesrow i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  color: var(--border-color);
}
.servicesrow p{
  font-size: var(--step-3);
  color: var(--wit);
  color: var(--lichtgrijs);
  font-weight: 600;
  z-index: 1;
  width: max-content;
  /* opacity: .6; */
}

/* individuele pagina's */
.pagetextsections{
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pagetext h3{
  font-size: var(--step-6);
  color: var(--wit);
  font-weight: 600;
  text-align: center;
  text-transform: lowercase;
}
.pagetext h4{
  font-size: var(--step-4);
  color: var(--wit);
  font-weight: 600;
  text-transform: lowercase;
}
.pagetextsec{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-radius: 20px;
  border: 2px solid var(--border-color);
  max-width: 800px;
  width: 100%;
}
#socialmedia .pagetextsec ul{
  justify-content: center;
}
.pagetextsec p{
  font-size: var(--step-0);
}
.pagetext ul{
  display: flex;
  /* flex-direction: column;  */
  flex-wrap: wrap;
  gap: .5rem;
  align-items: start;
  /* justify-content: center; */
  min-width: min(400px, 100%);
  width: 90%;
}
.pagetext ul li{
  font-size: var(--step-0);
  color: var(--wit);
  list-style: none;
  padding: 1rem;
  border-radius: 20px;
  /* border: 2px solid hsla(0, 0%, 100%, .2); */
  position: relative;
  /* overflow: clip; */
}
.pagetext ul li i{
  font-size: var(--step-2);
}
.pagetext ul li::after{
  border-radius: inherit;
  background-size: 200%;
  opacity: 0.3;
}
.hero{
  min-height: 500px;
}
.hero > ul{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  top: 0;
  transition: .2s ease-in-out;
}
@media (min-width: 1800px){
.hero ul.sticky{
  position: fixed;
  margin: 0;
  top: 1rem;
  height: 125px;
  z-index: 1001;
}
}
.hero > ul li{
  list-style: none;
  border-radius: 10px;
  padding: 1rem 2rem;
  border: 2px solid var(--border-color);
  position: relative;
  z-index: 1;
  transition: .2s ease-in-out;
  background-color: var(--zwart);
}
.hero ul li::after,
.hero ul li::before{
  border-radius:7.5px;
  transition: .2s ease-in-out .1s;
  opacity: 0.1;
  z-index: -1;
}
.hero > ul li a{
  text-decoration: none;
  font-size: var(--step-3);
  color: var(--lichtgrijs);
}
.hero .dropdown{
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  left: 5px;
  top: calc(100% + 1rem);
  transform: translateY(-100%);
  z-index: -1;
  opacity: 0;
  transition: transform .3s ease-in-out .2s, opacity .1s ease-in-out .3s;
}
.hero .dropdown li{
  width: max-content;
  padding: .75rem 1.5rem;
}
.hero .dropdown li a{
  font-size: var(--step-2);
}
@media (hover: hover) and (pointer: fine){
.hero > ul li:hover .dropdown{
  transform: translateY(0);
  opacity: 1;
  transition: transform .3s ease-in-out, opacity .1s ease-in-out .1s;
}
.hero li:hover{
  border: 2px solid hsla(0, 0%, 100%, .5);
}
.hero ul li:hover::before{
  background: color-mix(in lab, var(--zwart), hsla(0, 0%, 0%, .2) 30%);
}
}
@media ( max-width: 750px){
  .hero ul li{
  padding: 0.5rem 1rem;
}
.hero .dropdown li{
  padding: 0.25rem 0.75rem;
}
  .hero ul li a,
  .hero .dropdown li a{
    font-size: var(--step-1);
  }
}
/* contact page */
.contact{
  margin: 150px auto 2rem auto;
  border-radius: 20px;
  overflow: hidden;
  width: min(1300px, 95%);
  display: grid;
  place-items: center;
  padding: 1rem;
  gap: 1rem;
  position: relative;
  border: 2px solid var(--border-color);
}
.contactbox{
  display: flex;
  gap: 1rem;
  /* padding: 2rem; */
  align-items: center;
}
.contactform{
  width: 100%;
}
.contacttext{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}
.contact_col_1{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  width: 100%;
}
.contact_col_1 p{ 
  width: max-content;
  color: var(--wit);
  font-size: var(--step-1);
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.5rem;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  background: none;
  position: relative;
  overflow: hidden;
  background-color: rgba(138,252,255,0.1);
}
/* .contact_col_1 p::after{
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-1);
  z-index: -1;
  opacity: 0.1;
} */
.contact_col_2 p{
  color: var(--wit);
  font-size: var(--step-1);
  font-weight: 500;
  /* text-transform: uppercase; */
  padding: 0.25rem;
  text-align: center;
  margin: 0 auto;
}
.contactform form{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.field{
  position: relative;
  overflow: hidden;
}
.field input{
  width: 100%;
  padding: 1rem;
  font-size: var(--step-1);
  background: none;
  border: solid var(--border-color);
  border-width: 0 0 2px 0;
  color: var(--wit);
  border-radius: 5px;
  position: relative;
}
.field:focus-within::after{
  opacity: .1;
  border-radius: 5px;
}
.input:focus{
  outline: none;
  background-color: color-mix(in lab, var(--wit), hsla(0, 0%, 0%, .1) 90%);
}
.contactform #button{
  padding: 1rem;
  font-size: var(--step-2);
  color: var(--wit);
  border: 2px solid var(--border-color);
  background: none;
  border-radius: 5px;
  cursor: pointer;
  transition: .2s ease-in-out;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
}
/* .contactform #button::after{
  content: ' ';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gradient-1);
  background-size: 200%;
  z-index: -1;
  opacity: 0.05;
  transition: .2s ease-in-out;
} */
.contactform #button:hover{
  background-color: color-mix(in lab, var(--wit), hsla(0, 0%, 0%, .1) 90%);
}

@media ( max-width: 850px ){
  .contacttext{
    display: none;
  }
}
/* theme switcher */

.theme-toggle {
  width: var(--step-8);
  max-width: 150px;
  aspect-ratio: 7/3;
  border-radius: 1000px;
  padding: 2px;
  /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), white); */
  cursor: pointer;
  transition: 2s ease-in-out;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 10001;
}
@media ( max-width: 750px){
  .theme-toggle{
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s ease-in-out;
  }
  .noscroll .theme-toggle{
    visibility: visible;
    opacity: 1;
    transition: opacity .5s ease-in-out;

  }
  .noscroll .logo{
    opacity: 0;
    transition: .2s ease-in-out;
  }
}
.dark .theme-toggle {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), #595959);
}

.anchor {
  display: grid;
  position: relative;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.anchor::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -webkit-box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.sky {
  position: absolute;
  top: -1rem;
  left: -150%;
  width: 400%;
  aspect-ratio: 1/1;
  background-image: conic-gradient(
    #80bde0 5%,
    #e9bd83ff 20%,
    #f18f6fff 25%,
    #9d4862ff 30%,
    #372b53ff 45%,
    #372b53ff 55%,
    #9d4862ff 70%,
    #f18f6fff 75%,
    #e9bd83ff 80%,
    #80bde0 95%
  );
  background-size: 200%;
  background-position: center;
  border-radius: 50%;
  transition: 2000ms cubic-bezier(0.68, -0.15, 0.1, 1.05);
  rotate: 180deg;
}

.sky::before,
.sky::after {
  content: "";
  display: block;
  position: relative;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 1000px;
  transition: 500ms ease-in-out;
  left: 46%;
}

.sky::before {
  background-color: #ffe686;
  border: 3px solid #dec075;
  top: calc(2% + 10px);
}

.sky::after {
  background: rgb(234,234,241);
  /* background: radial-gradient(circle, rgba(0,0,0,0) 50%,rgb(241, 241, 234) 50%); */
  border: 3px solid #8e8da7;
  background-size: 175%;
  background-position: 100%;
  bottom: calc(-82% + 10px);
  /* box-shadow: inset -13px -20px 11px 7px rgb(255 255 255 / 50%); */
}
.theme-toggle:hover .sky::before,
.theme-toggle:hover .sky::after {
  scale: 1.1;
}
.light .sky {
  rotate: 0deg;
}
/* -------------- over ons ---------------------*/
.overons{
  /* width: 100%; */
}
.overons .pagetext{
  width: min(max-content,100%);
}
.overonsbox{
  width: 100%;
  display: flex;
  gap: 2rem;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.overons-col{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  /* border: 2px solid red; */
  /* text-align: center; */
}
.overonsbox img{
  object-fit: cover;
  width: 100%;
  height: auto;
  max-width: 400px;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 10px;
}

.overons-col::after{
  content: ' ';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* background: var(--gradient-2); */
  background-color: hsla(0, 0%, 0%, .2);
  backdrop-filter: blur(5px);
  border-radius: inherit;
  opacity: 0;
  z-index: 0;
  transition: .2s ease-in-out;
}
.overons-col-bottom{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
  bottom: 1rem;
  left: 50%;
  translate: -50% 200%;
  width: max-content;
  padding: 1rem 2rem;
  border-radius: 20px;
  /* background: color-mix(in lab, var(--zwart), hsla(0, 0%, 0%, .2) 50%); */
  transition: .2s ease-in-out .1s;
  z-index: 1;
  color: #fff;
}
.overons-col-bottom a,
.overons-col-bottom h4{
  text-decoration: none;
  color: #fff;
  font-size: var(--step-1);
  border: 2px solid var(--border-color);
  background-color: hsla(0, 0%, 0%, .2);
  padding: .5rem 1rem;
  border-radius: 10px;
  transition: .2s ease-in-out;
  text-transform: capitalize;
}
.overons-col-bottom a:hover{
  background-color: hsla(0, 0%, 100%, .2);
}
.overons-col ul{
  position: absolute;
  justify-content: left;
  top: 1rem;
  left: 1rem;
  translate: 0 -200%;
  margin: 0;
  transition: .2s ease-in-out .1s;
  z-index: 1;
}
.overons-col ul li{
  color: #fff;
}
.overons-col p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: 1;
  font-size: var(--step-0);
  color: #fff;
  opacity: 0;
  transition: .2s ease-in-out .1s;
}
.overons-col:hover .overons-col-bottom,
.overons-col:focus .overons-col-bottom{
  translate: -50% 0;
}
.overons-col:hover ul,
.overons-col:focus ul{
  translate: 0;
}
.overons-col:hover::after,
.overons-col:focus::after{
  opacity: 1;
}
.overons-col:hover p,
.overons-col:focus p,
.overons-col:active p{ 
  opacity: 1;
}
@media (max-width: 450px){
  .overons-col p{
    font-size: var(--step--2);
  }
}
/* horizontal-scroll */
#horizontal-scoll {
}
#horizontal-scoll > h2{
  width: max-content;
  margin: 0 auto;
  text-transform: lowercase;
}
.horizontal-scoll-wrapper {
  overflow: hidden;
  height: 550px;
}

.horizontal {
  display: flex;
  height: 100%;
  /* gap: 2rem; */
  padding: 2rem;
}

.horizontal > div {
  display: flex;
  flex-shrink: 0;
  /* padding: 0 5px; */
  counter-increment: card;
}

.horizontal > div:last-child {
  padding: 0 2rem 0 5px;
}
.horizontal .card{
  display: flex;
  align-items: stretch;
  width: 700px;
}
.horizontal .lijntjes{
  display: grid;
  place-items: center;
  height: auto;
  width: 200px;
  opacity: .5;
  user-select: none;
}
.light .horizontal .lijntjes{
  display: none;
}
.horizontal .card img{
  width: 100%;
  height: 75%;
  object-fit: cover;
  border-radius: 20px;
}

.horizontal .cardtext{
  /* display: flex;
  flex-direction: column;
  justify-content: safe; */
  /* gap: 2rem; */
  display: grid;
  width: 500px;
  grid-template-rows: .5fr 1fr;
  padding: 2rem;
  gap: 1rem;
  /* background: #6e4ce1; */
  border: 2px solid var(--border-color);
  border-radius: 40px;
  text-align: center;
  position: relative;
}
.horizontal .cardtext::after{
  content: counter(card);
  font-family:'Josefin Sans' ,sans-serif;
  position: absolute;
  bottom: -2.5rem;
  left: 2rem;
  /* border: 2px solid red; */
  font-size: 15rem;
  font-weight: 800;
  color: var(--border-color)
}
.horizontal .card h3{
  font-size: var(--step-4);
  color: var(--wit);
  font-weight: 600;
  margin: auto 0;
}
.horizontal .card p{
  font-size: var(--step-0);
  color: var(--lichtgrijs);
}
  @media (max-width: 1000px){
    .horizontal-scoll-wrapper{
      height: auto;
    }
    .horizontal{
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
    }
    .card .lijntjes{
      position: absolute;
      /* display: none; */
      left: 50%;
      top: 50%;
      translate: -75% 0;
      margin: 0 auto;
      transform: rotate(90deg);
      /* border: 2px solid green; */
      opacity: 1;
      width: 200px;
      height: auto;
      z-index: -1;
      opacity: .3;
    }
    .horizontal .card{
      width: max-content;
      /* display: flex; */
      align-items: center;
      flex-direction: column;
      position: relative;
      width: 100%;
    } 
    .horizontal .cardtext{
      overflow: hidden;
      background-color: var(--zwart);
      margin: 0 auto;
      min-height: 500px;
    }
    .horizontal .cardtext::after{
      font-size: 550px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--lichtgrijs);
      opacity: .2;
      /* z-index: -1; */
    }
  }
  @media (max-width: 575px){
    .horizontal .cardtext{
      width: 100%;
    }
  }
  /* @media (max-width: 450px){
    .card .lijntjes{
      display: none
    }
  } */
  /* ------------- foooter ------------------- */
footer{
  background-color: color-mix(in lab, var(--zwart), hsla(0, 0%, 100%, 0) 50%);
  padding: 2rem;
  /* border: solid var(--border-color);
  border-width: 1px 0 0 0;
  border-radius: 20px 20px 0 0; */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.footercontent{
  display: flex;
  justify-content: space-evenly;
  gap: 2rem;
}
.footercontent > div{
  width: 100%;
}
.footercontent a{
  font-size: var(--step-1);
  color: var(--wit);
  text-align: center;
  text-decoration: none;
  width: max-content;
}
.footerlinksbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footerlinks{
  display: flex;
  gap: 1rem; 
}
.socials{
  display: flex;
  gap: 1rem;
}
.footerbottom{
  width: max-content;
  margin: auto;
}
.contactinfobox{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.contactinfo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.contactinfo a:nth-child(2){
  font-family:'Josefin Sans' ,sans-serif;
  font-weight: 300;
}
.footercontent h2{
  font-size: var(--step-3);
  color: var(--wit);
  font-weight: 600;
}
.footerbottom{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.footerbottom p{
  font-size: var(--step--1);
  color: var(--lichtgrijs);
}
.logo-footer{
  margin: auto;
  display: flex;
  justify-content: center;
}
.footerbottomlinks{
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  justify-content: center;
  align-items: center;;
  width: 100%;
}
.footerbottomlinks a{
  color: var(--wit);
  text-decoration: none;
}
.footerbottomlinks p:nth-child(3){
  width: 100%;
  text-align: center;
}
.footerbottomlinks p:nth-child(1)::after{
  content: ' | ';
  color: var(--lichtgrijs);
}
footer a{
  transition: .2s ease-in-out;
}
footer a:hover{
  opacity: .8;
}
@media (max-width: 1350px){
  .footercontent{
    flex-wrap: wrap;
  }
  .footercontent > div{
    width: 100%;
  }
  .logo-footer{
    display: none;
  }
}