/* hero section */
#hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

#hero .hero-bg {
  transition: 2s;
  z-index: -1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}

#hero .hero-bg.active {
  opacity: 1;
}

#hero .wrapper {
  width: 100%;
  justify-content: center;
  display: flex;
}

#hero .title {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 24px;
  animation: titleScroll linear forwards;
  animation-timeline: view();
  animation-range-start: 85vh;
  animation-range-end: 125vh;
}

#hero .title p {
  width: 840px;
}

#hero .title .buttons {
  display: flex;
  gap: 12px;
}

#hero-btn {
  width: 240px;
  border-radius: 24px;
}

#hero .bg-selector {
  position: absolute;
  bottom: 48px;
  display: flex;
  gap: 12px;
}

#hero .bg-selector .option {
  display: flex;
  align-items: flex-end;
  opacity: 0.5;
  cursor: pointer;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--white);
  overflow: hidden;
}

#hero .bg-selector .option .selected {
  transition: 0.5s;
  background-color: var(--white);
  width: 100%;
  height: 0%;
}

#hero .bg-selector .option.active .selected {
  height: 100%;
}


/* over ons */
#over {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#over .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 96px;
  width: 1440px;
}

#over .st-text {
  max-width: 500px;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.info .buttons {
  display: flex;
  gap: 8px;
}


/* diensten */
#diensten {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 112px 0px;}

#diensten .wrapper {
  z-index: 1;
  gap: 40px;
  display: flex;
  flex-direction: column;
  width: 1440px;
}

#diensten .diensten {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

#diensten .diensten .dienst {
  cursor: pointer;
  user-select: none;
  transition: 0.25s;
  width: calc((100% / 3) - 66px);
  padding: 28px;
  border-radius: 8px;
  /* background-color: var(--gray); */
  background-color: var(--white-opacity-2);
  border: 1px solid var(--white-opacity-3);
}

#diensten .diensten:hover .dienst {
  opacity: 0.85;
}

#diensten .diensten .dienst:hover {
  opacity: 1;
  filter: brightness(1.5);
  scale: 1.021;
}

#diensten .diensten .dienst:hover button span {
  margin-left: 4px;
}

#diensten .diensten .dienst span {
  transition: 0.25s;
  color: var(--purple);
  margin-bottom: 12px;
  font-size: 32px;
}

#diensten .diensten .dienst h3 {
  color: var(--white);
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
}

#diensten .diensten .dienst button {
  background-color: transparent;
  border: 1px solid var(--white-opacity);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  border-radius: 8px;
  padding: 0;
  width: 48px;
  height: 48px;
}

#diensten .diensten .dienst button:hover {
  filter: brightness(0.85);
}

#diensten .diensten .dienst button span {
  transition: 0.25s;
  color: var(--white);
  margin-bottom: 0;
  font-size: 25px;
}

#diensten .diensten .dienst button:hover span {
  margin-left: 4px;
}

#shadow-overlay {
  transition: 0.35s;
  opacity: 0;
}

#background-overlay {
  transition: 0.35s;
  opacity: 0.25;
  filter: grayscale(0.75) brightness(0.15);
  
}

#background-color-overlay {
  transition: 0.35s;
  opacity: 0;
}


/* blogs */
#blogs {
  padding: 112px 0px 88px 0px;
  height: auto;
}

#blogs .wrapper {
  display: flex;
  align-items: center;
  width: 1440px;
  flex-direction: column;
  gap: 40px;
}

#blogs .blogs {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

#blogs .blogs .blog {
  cursor: pointer;
  transition: 0.25s;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 600px;
  animation: revealScroll forwards;
  animation-timeline: view();
}

#blogs .blogs .blog:nth-child(1) {
  animation-range-end: 25vh;
}

#blogs .blogs .blog:nth-child(2) {
  animation-range-end: 45vh;
}

#blogs .blogs .blog:nth-child(3) {
  animation-range-end: 65vh;
}

#blogs .blogs .blog .cover {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--bg-2);
  width: 100%;
  height: 280px;
}

#blogs .blogs .blog:hover .cover::before {
  opacity: 0.65;
}

#blogs .blogs .blog:hover .cover img {
  scale: 1.025;
}

#blogs .blogs .blog .cover img {
  transition: 0.45s;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#blogs .blogs .blog .cover::before {
  position: absolute;
  transition: 0.25s;
  opacity: 0.75;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, black 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

#blogs .blogs .blog:hover .cover .date{
  opacity: 0;
  bottom: 10px;
}

#blogs .blogs .blog .cover .date {
  transition: 0.25s;
  position: absolute;
  bottom: 16px;
  left: 20px;
  color: var(--white);
  z-index: 1;
  font-size: 17px;
  font-weight: 500;
  opacity: 1;
}

#blogs .blogs .blog .cover .time {
  display: flex;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  align-items: center;
  opacity: 0.85;
  border-radius: 8px;
  position: absolute;
  bottom: 16px;
  right: 20px;
  z-index: 2;
  background-color: var(--purple);
  color: var(--white);
}

#blogs .blogs .blog .cover .time span {
  font-size: 18px;
}

#blogs .blogs .blog .info {
  margin-left: 8px;
  gap: 0px;
  color: var(--white);
}

#blogs .blogs .blog:hover .info h2 {
  color: var(--purple);
}

#blogs .blogs .blog .info h2 {
  transition: 0.45s;
  line-height: 22px;
  font-size: 24px;
  font-weight: 500;
}

#blogs .blogs .blog .info p {
  font-size: 22px;
}

#blogs .bekijk-meer {
  position: relative;
  transition: 0.25s;
  margin-top: 4px;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--purple);
  padding: 24px 48px 24px 48px;
}

#blogs .bekijk-meer::before {
  content: '';
  transition: 0.25s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--white-opacity-3);
  border-radius: 40px;
  scale: 1.15;
  opacity: 0;
}

#blogs .bekijk-meer:hover {
  opacity: 1;
}

#blogs .bekijk-meer:hover::before {
  opacity: 0.5;
  scale: 1;
}

#blogs .bekijk-meer p {
  transition: 0.25s;
  letter-spacing: 1px;
  font-size: 24px;
}


/* training */
#training .st-text {
  max-width: 540px;
}


/* reviews */
#reviews .reviews {
  width: 100%;
  height: 220px;
  display: flex;
  justify-content: center;
}

#reviews .reviews .reviews-wrapper {
  user-select: none;
  position: relative;
  overflow: hidden;
  display: flex;
  width: 1440px;
  height: 100%;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0));
}

#reviews .reviews .review {
  margin-top: 2px;
  opacity: 0.85;
  width: 372px;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--white-opacity);
  border-radius: 16px;
  padding: 24px 32px 24px 32px;
  transition: 0.25s;

  position: absolute;
  left: 100%;
  animation: moveLeftReviews 35s linear infinite forwards;
}

#reviews .reviews .review:nth-child(2) {
  animation-delay: calc(35s / 4*(4 - 1)* -1);
}

#reviews .reviews .review:nth-child(3) {
  animation-delay: calc(35s / 4*(4 - 2)* -1);
}

#reviews .reviews .review:nth-child(4) {
  animation-delay: calc(35s / 4*(4 - 3)* -1);
}



#reviews .reviews .review:hover {
  opacity: 1;
  scale: 1.021;
}

#reviews .reviews .review .stars {
  color: var(--purple);
  letter-spacing: -8px;
  line-height: 0px;
  margin-left: -4px;
}

#reviews .reviews .review .text {
  color: var(--white);
  font-size: 23px;
  font-weight: 300;
  opacity: 0.85;
}

#reviews .reviews .review .author {
  display: flex;
  gap: 8px;
  margin-left: -4px;
  color: var(--white);
}

#reviews .reviews .review .author h3 {
  font-weight: 400;
}

#reviews .buttons {
  margin-top: -8px;
  opacity: 0.85;
  display: flex;
  gap: 16px;
}

/* animations */
@keyframes fadeOverlay {
  0% {
    opacity: 0;
  } 50% {
    opacity: 0.50;
  }
}

@keyframes titleScroll {
  0% {
    opacity: 1;
  } 100% {
    opacity: 0;
    scale: 0.95;
    margin-top: 24vh;
  }
}

@keyframes revealScroll {
  0% {
    opacity: 0;
    transform: translateY(100px);
    scale: 0.95;
  } 100% {
    opacity: 1;
    transform: translateY(0px);
    scale: 1;
  }
}

@keyframes moveLeftReviews {
  to {
    left: -360px;
  }
}

/* media queries */
@media (max-width: 1500px) {
  .reviews-wrapper {
    width: 100% !important;
  }

  .reviews .review {
    width: 300px !important;
    padding: 18px 24px !important;
  }
}

@media (max-width: 1400px) {
  .reviews-wrapper {
    width: 100% !important;
  }

  .reviews .review {
    width: 264px !important;
    padding: 18px 24px !important;
  }

  .reviews .review .text {
    font-size: 20px !important;
  }
}

@media (max-width: 1300px) {
  .blogs .blog .info h2 {
    font-size: 22px !important;
  }
}

@media (max-width: 1200px) {
  .reviews-wrapper {
    width: 100% !important;
  }

  #reviews .reviews {
    height: 204px !important;
  }

  .reviews .review {
    width: 260px !important;
    padding: 18px 24px !important;
  }

  .reviews .review .text {
    font-size: 20px !important;
  }

  .diensten .dienst h3 {
    font-size: 21px !important;
  }

  .diensten .dienst button {
    width: 40px !important;
    height: 40px !important;
  }

  .diensten .dienst button span {
    font-size: 21px !important;
  }

  #blogs .blogs .blog .cover {
    height: 210px !important;
  }
  
  #diensten .diensten .dienst {
    width: calc((100% / 2) - 66px) !important;
  }

  #blogs .blogs {
    flex-direction: column;
    gap: 24px;
  }

  #blogs .blogs .blog {
    width: 100% !important;
  }

  #blogs .blogs .blog .cover {
    height: 280px !important;
  }
}

@media (max-width: 1150px) {

  @keyframes moveLeftReviews {
    to {
      left: -600px;
    }
  }

}


@media (max-width: 975px) {
  #reviews .reviews .review {
    padding: 16px 32px !important;
  }

  #hero .title p {
    max-width: calc(100% - 56px);
  }

  #hero .title {
    width: 100%;
  }

  @keyframes moveLeftReviews {
    to {
      left: -800px;
    }
  }
}

@media (max-width: 800px) {
  
}

@media (max-width: 750px) {
  .blogs .blog .info h2 {
    font-size: 20px !important;
  }

  .blogs .blog .info p {
    font-size: 20px !important;
  }

  #diensten .diensten .dienst {
    width: 100% !important;
  }

  #hero-btn {
    width: 200px;
  }

  #reviews .buttons {
    flex-direction: column;
    gap: 8px;
  }

  #leerbedrijf .buttons button {
    width: 172px;
  }

  #background-overlay {
    object-position: -40px;
    z-index: 0;
  }

  @keyframes moveLeftReviews {
    to {
      left: -900px;
    }
  }
}

@media (max-width: 550px) {
  @keyframes moveLeftReviews {
    to {
      left: -1000px;
    }
  }
}

@media (max-height: 900px) {
  #hero .title {
    animation: none;
    opacity: 1;
  }
}