.elementor-kit-308{--e-global-color-primary:#CE0000;--e-global-color-secondary:#161616;--e-global-color-text:#AAAAAA;--e-global-color-accent:#003164;--e-global-color-713ac8f1:#61CE70;--e-global-color-702851bc:#FFF;--e-global-color-41186b2:#F0F0F0;--e-global-color-63894e6:#EAEAEA;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-text-font-family:"Roboto";--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:700;}.elementor-kit-308 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-308 h2{line-height:1.2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.elementor-button {
    cursor:pointer;
}

.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}


/* De geanimeerde lijn onder de titel (start met breedte 0) */
.animated-title::after {
    content: '';
    position: absolute;
    margin: 30px 0;
    left: 0;
    width: 0%; /* De lijn start met 0% breedte */
    height: 5px;
    background-color: #CE0000;
    opacity: 0; /* Lijn is in het begin onzichtbaar */
    transition: width 1s ease, opacity 0.5s ease-in-out; /* Animatie voor de lijn */
}

.animated-title.visible::after {
    width: 100%; /* Lijn groeit naar 100% */
    opacity: 1; /* Lijn wordt zichtbaar */
}

/* Specifieke kleur voor een andere titel */
.animated-title.white-line::after {
    background-color: #FFFFFF;
}


/* Stijlen voor Knoppen en formulierknop */
/* === Algemene Variabelen === */
.button-dark,
.button-light,
.e-form__buttons .elementor-button {
    --btn-size: 45px;
}

/* === Basis Button Setup === */
.button-dark .elementor-button,
.button-light .elementor-button,
.e-form__buttons .elementor-button {
    position: relative;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
    padding: 0 calc(var(--btn-size) / 2.5);
}

/* === Content Wrapper === */
.button-dark .elementor-button-content-wrapper,
.button-light .elementor-button-content-wrapper,
.e-form__buttons .elementor-button-content-wrapper {
    height: var(--btn-size);
    align-items: center;
}

/* === Background Cirkel === */
.button-dark .elementor-button-content-wrapper:before,
.button-light .elementor-button-content-wrapper:before,
.e-form__buttons .elementor-button-content-wrapper:before {
    content: "";
    display: block;
    position: absolute;
    width: var(--btn-size);
    height: var(--btn-size);
    margin: 0;
    left: 0;
    top: 0;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

/* === Tekst & Pijltje Setup === */
.button-dark .elementor-button-text,
.button-light .elementor-button-text,
.e-form__buttons .elementor-button-text {
    padding-left: calc(var(--btn-size) - 10px);
    position: relative;
    z-index: 1;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.button-dark .elementor-button-text:before,
.button-light .elementor-button-text:before,
.e-form__buttons .elementor-button-text:before {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 2px;
    background: none;
    top: 50%;
    left: -12px;
    margin-top: -1px;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.button-dark .elementor-button-text:after,
.button-light .elementor-button-text:after,
.e-form__buttons .elementor-button-text:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: calc(var(--btn-size) - (var(--btn-size) + 2px));
    margin-top: -5px;
    transform: rotate(45deg);
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

/* === Hover Effects === */
.button-dark .elementor-button:hover .elementor-button-content-wrapper:before,
.button-light .elementor-button:hover .elementor-button-content-wrapper:before,
.e-form__buttons .elementor-button:hover .elementor-button-content-wrapper:before {
    width: 100%;
}

.button-dark .elementor-button:hover .elementor-button-text,
.button-light .elementor-button:hover .elementor-button-text,
.e-form__buttons .elementor-button:hover .elementor-button-text {
    color: var(--arrow-color);
}

.button-dark .elementor-button:hover .elementor-button-text:before,
.button-light .elementor-button:hover .elementor-button-text:before,
.e-form__buttons .elementor-button:hover .elementor-button-text:before {
    background: var(--arrow-color);
    transform: translate(17px, 0);
}

.button-dark .elementor-button:hover .elementor-button-text:after,
.button-light .elementor-button:hover .elementor-button-text:after,
.e-form__buttons .elementor-button:hover .elementor-button-text:after {
    transform: translate(15px, 0) rotate(45deg);
}

/* === Specifieke Kleuren === */
.button-dark,
.e-form__buttons .elementor-button {
    --btn-color: #CE0000;
    --arrow-color: #fff;
}

.button-light {
    --btn-color: #ffffff;
    --arrow-color: #CE0000;
}

/* === Background Cirkel kleur === */
.button-dark .elementor-button-content-wrapper:before,
.e-form__buttons .elementor-button-content-wrapper:before {
    background: var(--btn-color);
}

.button-light .elementor-button-content-wrapper:before {
    background: var(--btn-color);
}

/* === Arrow Style === */
.button-dark .elementor-button-text:after,
.button-light .elementor-button-text:after,
.e-form__buttons .elementor-button-text:after {
    border-top: 2px solid var(--arrow-color);
    border-right: 2px solid var(--arrow-color);
}

/* Verberg de knoppen in de gestickte header */
.jupiterx-header-stick .button-light,
.jupiterx-header-stick .button-dark {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Zorg ervoor dat de knoppen in jupiterx-main zichtbaar blijven */
.jupiterx-main .button-light,
.jupiterx-main .button-dark {
    opacity: 1;
    visibility: visible;
}

/* Zorg ervoor dat de knoppen in jupiterx-footer zichtbaar blijven */
.jupiterx-footer .button-light,
.jupiterx-footer .button-dark {
    opacity: 1;
    visibility: visible;
}


/* projecten */
.hoverbox-project {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Content (titel, tekst) onderaan, half zichtbaar */
.hover-content {
  position: absolute;
  bottom: 0;
  transform: translateY(10%);
  transition: transform 0.3s ease;
}

/* Bij hover: schuift omhoog */
.hoverbox-project:hover .hover-content {
  transform: translateY(-15%);
}

/* Alleen de titel is standaard zichtbaar */
.hover-content p {
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}

/* Bij hover: tekst zichtbaar */
.hoverbox-project:hover .hover-content p {
  opacity: 1;
}

.hoverbox-project img {
  transition: transform 0.5s ease;
}

/* Bij hover: afbeelding wordt groter */
.hoverbox-project:hover img {
  transform: scale(1.1);
}


/* Initieel alleen het icoon tonen */
.hoverbox-project .jet-button__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 1s ease;
}

/* Knop-container schuift naar rechts */
.hoverbox-project .jet-button__container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translateX(0);
    transition: transform 0.4s ease-in-out;
}

/* Label begint onzichtbaar */
.hoverbox-project .jet-button__label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0.4s ease-in-out, opacity 0.3s ease-in-out 0.2s;
}

/* Bij hover: knop schuift én tekst komt in beeld met kleine delay */
.hoverbox-project:hover .jet-button__container {
    transform: translateX(20px);
}

.hoverbox-project:hover .jet-button__label {
    max-width: 20ch;  /* responsiever dan px */
    opacity: 1;
}


/* Mobiel: alle hover-effecten uitschakelen */
@media screen and (max-width: 767px) {
  .hover-content {
    transform: none !important;
    transition: none !important;
  }

  .hover-content p {
    opacity: 1 !important;
    transition: none !important;
  }

  .hoverbox-project img {
    transform: none !important;
    transition: none !important;
  }

  .jet-button__container {
    transform: none !important;
    transition: none !important;
  }

  .jet-button__label {
    max-width: 20ch !important;
    opacity: 1 !important;
    transition: none !important;
  }
}


/*Einde projecten *//* End custom CSS */