.home-hero-content-holder:before {
  display: block !important;
  position: relative;
  content: "";
  top: -35px;
  width: 100%;
  right: -100%;
  left: unset !important;
  background: var(--e-global-color-03ba8b4);
  height: 1px;
  opacity: 0;
}

.home-hero-content-holder:after {
  display: block !important;
  position: absolute;
  content: "";
  bottom: -35px;
  height: 500px;
  right: 0;
  left: unset !important;
  background: var(--e-global-color-03ba8b4);
  width: 1px;
  opacity: 0;
}

.start-animation-polygon .home-hero-content-holder:after,
.start-animation-polygon .home-hero-content-holder:before {
  transition-delay: 1s;
  opacity: 1;
}

.create-clippath {
  transition: ease-in-out 1.5s all !important;
}
@media only screen and (min-width: 1025px) {
  .create-clippath {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% calc(0% + 390px), calc(100% - 0px) 50%, 100% calc(100% - 390px));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .create-clippath {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% calc(0% + 645px), calc(100% - 0px) calc(50% + 126px), 100% calc(100% - 394px));
  }
  .create-clippath .home-hero-logo {
    transform: translate(100px, 260px);
  }
}
@media only screen and (max-width: 767px) {
  .create-clippath {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% calc(0% + 268px), 100% calc(50% + 16px), 100% calc(100% - 232px));
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .home-hero-logo {
    transform: translate(100px, 260px);
  }
}

@media only screen and (min-width: 1025px) {
  .start-animation-polygon .create-clippath {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% calc(0% + 64px), calc(100% - 420px) 50%, 100% calc(100% - 64px));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .start-animation-polygon .create-clippath {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% calc(0% + 321px), calc(100% - 409px) calc(50% + 126px), 100% calc(100% - 64px));
  }
  .start-animation-polygon .create-clippath .home-hero-logo {
    transform: translate(100px, 260px);
  }
}
@media only screen and (max-width: 767px) {
  .start-animation-polygon .create-clippath {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% calc(0% + 154px), 70% calc(50% + 16px), 100% calc(100% - 114px));
  }
}

.footer-top-holder .footer-heading div {
  overflow: hidden;
}
.footer-top-holder .footer-heading div span span {
  display: block;
  transform: translateY(80px);
  transition: ease-in-out 0.8s all;
}
.footer-top-holder.animated div span span {
  display: block;
  transform: translateY(0px);
}

.animation-home-hero .home-hero-logo,
.animation-home-hero .home-hero-logo-separator {
  opacity: 0;
  transition: ease-in-out 0.6s all;
}
.animation-home-hero .animation-holder {
  transition: clip-path 6s ease-in-out;
}
.animation-home-hero .animation-holder .home-hero-headings h1 div {
  overflow: hidden;
}
.animation-home-hero .animation-holder .home-hero-headings h1 div span {
  display: block;
  transform: translateY(50px);
}
.animation-home-hero .animation-holder .home-hero-headings h1 div.start-animation-heading span {
  transform: translateY(0);
  transition: ease-in-out 0.8s all;
}
.animation-home-hero .animation-holder .elementor-widget-image {
  overflow: hidden;
}
.animation-home-hero .animation-holder .elementor-widget-image img {
  transition: ease-in-out 2s all;
}
.animation-home-hero.start-animation .animation-holder .elementor-widget-image img {
  transform: translateX(0%);
}
.animation-home-hero.start-animation-polygon .animation-holder .polygon {
  transition: clip-path 2s ease-in-out;
}
.animation-home-hero.start-animation-polygon .animation-holder .polygon #clip-transformed {
  transform: translateX(200px);
}
.animation-home-hero.start-animation-polygon .animation-holder img {
  transform: translateX(0%);
}

.elementor-widget-heading .elementor-widget-container {
  overflow: hidden;
}
.elementor-widget-heading .elementor-widget-container h1 {
  display: block;
  transform: translateY(32px);
}
.elementor-editor-active .elementor-widget-heading .elementor-widget-container h1 {
  transform:none;
}
.elementor-widget-heading .elementor-widget-container h1.start-animation-heading {
  transform: translateY(0);
  transition: ease-in-out 1s all;
  animation-duration: 1s; /* Pas de duur aan naar wens */
  animation-timing-function: ease-in-out; /* Geeft een subtiele overgang */
}

/*# sourceMappingURL=hero-animation.css.map */