{% assign color = color | default: "#3d0456" %}
{% assign text_en_US = text_en_US | default: "" %}
{% assign text_es = text_es | default: "" %}
{% assign text_fr = text_fr | default: "" %}
{% assign text_de = text_de | default: "" %}
{% assign text_en_GB = text_en_GB | default: "" %}
{% assign text_nl = text_nl | default: "" %}
{% assign text_pt_BR = text_pt_BR | default: "" %}
{% assign button_text_en_US = button_text_en_US | default: "" %}
{% assign button_text_es = button_text_es | default: "" %}
{% assign button_text_fr = button_text_fr | default: "" %}
{% assign button_text_de = button_text_de | default: "" %}
{% assign button_text_en_GB = button_text_en_GB | default: "" %}
{% assign button_text_nl = button_text_nl | default: "" %}
{% assign button_text_pt_BR = button_text_pt_BR | default: "" %}
{% assign button_link = button_link | default: "" %}
{% assign subtitle_en_US = subtitle_en_US | default: "" %}
{% assign subtitle_es = subtitle_es | default: "" %}
{% assign subtitle_fr = subtitle_fr | default: "" %}
{% assign subtitle_de = subtitle_de | default: "" %}
{% assign subtitle_en_GB = subtitle_en_GB | default: "" %}
{% assign subtitle_nl = subtitle_nl | default: "" %}
{% assign subtitle_pt_BR = subtitle_pt_BR | default: "" %}
{% assign text_color = text_color | default: "white" %}
<div class="nintex-homepage-hero">
  <div class="nintex-header-animation">
    <div class="nintex-lines-animation">
      <svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
          stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
      </svg>
      <svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
          stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
      </svg>
      <svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
          stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
      </svg>

    </div>
    <div class="nintex-orbs-animation-wrapper nintex-container">
      <div class="nintex-orbs-animation">
        <div class="nintex-orbs-animation__orb"></div>
        <div class="nintex-orbs-animation__orb"></div>
        <div class="nintex-orbs-animation__orb"></div>
      </div>
    </div>
  </div>
  <div class="nintex-header-gradient"></div>
  <div class="header-content">
    <h1>
      <span class="lang-en-US">{{ text_en_US }}</span>
      <span class="lang-es">{{ text_es }}</span>
      <span class="lang-fr">{{ text_fr }}</span>
      <span class="lang-de">{{ text_de }}</span>
      <span class="lang-en-GB">{{ text_en_GB }}</span>
      <span class="lang-nl">{{ text_nl }}</span>
      <span class="lang-pt-BR">{{ text_pt_BR }}</span>
    </h1>
    {% if subtitle_en_US != "" %}
      <p class="nintex-hero-subtitle">
        <span class="lang-en-US">{{ subtitle_en_US }}</span>
        <span class="lang-es">{{ subtitle_es }}</span>
        <span class="lang-fr">{{ subtitle_fr }}</span>
        <span class="lang-de">{{ subtitle_de }}</span>
        <span class="lang-en-GB">{{ subtitle_en_GB }}</span>
        <span class="lang-nl">{{ subtitle_nl }}</span>
        <span class="lang-pt-BR">{{ subtitle_pt_BR }}</span>
      </p>
    {% endif %}
    {% if button_text_en_US != "" %}
      <a href="{{ button_link }}" target="_blank" class="nintex-hero-button">
        <span class="lang-en-US">{{ button_text_en_US }}</span>
        <span class="lang-es">{{ button_text_es }}</span>
        <span class="lang-fr">{{ button_text_fr }}</span>
        <span class="lang-de">{{ button_text_de }}</span>
        <span class="lang-en-GB">{{ button_text_en_GB }}</span>
        <span class="lang-nl">{{ button_text_nl }}</span>
        <span class="lang-pt-BR">{{ button_text_pt_BR }}</span>
      </a>
    {% endif %}
  </div>

</div>
<style>
  @keyframes nintex-wave {
    0% {
      transform: translateX(0)
    }

    to {
      transform: translateX(-50%)
    }
  }

  @keyframes nintex-wave-reverse {
    0% {
      transform: translateX(-50%)
    }

    to {
      transform: translateX(0)
    }
  }

  @keyframes floating {
    0% {
    transform: translateY(0);
}
50% {
    transform: translateY(10%);
}
100% {
    transform: translateY(0);
}
  }

  .nintex-homepage-hero {
    background-color: {{ color }};
    color: {{ text_color }};
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .nintex-header-animation {
    position: absolute;
    width: 100%;
    top: 50px;
  }

  .nintex-lines-animation {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 2;
  }
  
  .nintex-lines-animation svg {
    opacity: .2;
    left: 0;
    position: absolute;
    width: 400%;
  }

  .nintex-lines-animation svg:nth-child(1) {
    animation: nintex-wave 28s linear infinite;
    top: 24px;
  }

  .nintex-lines-animation svg:nth-child(2) {
    animation: nintex-wave-reverse 38s linear infinite;
    top: -40px;
  }

  .nintex-lines-animation svg:nth-child(3) {
    animation: nintex-wave 48s linear infinite;
    top: -20px;
  }

  .nintex-lines-animation svg path {
    stroke: white;
  }

  @media (min-width: 768px) {
    .nintex-lines-animation svg {
      width: 200%;
    }
  }

  .nintex-orbs-animation-wrapper {
    height: 100%;
    position: absolute;
    right: 50%;
    top: 0;
    translate: 50% 0;
    width: 100%;
    z-index: 1;
}
.nintex-orbs-animation {
    aspect-ratio: 1 / 1;
    height: 100%;
    max-height: 684px;
    pointer-events: none;
    position: absolute;
    right: 28%;
    top: -20px;
}
.nintex-orbs-animation__orb {
    animation: floating 7s ease 0s infinite;
    height: 50%;
    min-height: 345px;
    min-width: 345px;
    position: absolute;
    width: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--orb-rgb), var(--orb-alpha)) 0, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .987)) 8.1%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .951)) 15.5%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .55)) 47.1%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .45)) 52.9%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .049)) 84.5%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .013)) 91.9%, rgba(var(--orb-rgb), 0) 100%);

}
.nintex-orbs-animation__orb:nth-of-type(1){
  --orb-rgb: 132, 57, 166;
  --orb-alpha: 0.9;
  left: -100px;
    top: -75px;
}
.nintex-orbs-animation__orb:nth-of-type(2){
  --orb-rgb: 255, 109, 0;
  --orb-alpha: 0.7;
  animation-delay:1s;
  left: 100px;
    top: 50px;

}
.nintex-orbs-animation__orb:nth-of-type(3){
  --orb-alpha: 0.7;
  --orb-rgb: 237, 40, 145;
 animation-delay:2s;
 left: 50px;
    top: -100px;
}

.nintex-header-gradient {
     background: linear-gradient(90deg, {{ color }}, {{ color }} 50%, rgba(61, 4, 86, 0));
     position: absolute;
     z-index: 2;
     width: 50%;
     top: 0;
     left: 0;
     height: 100%;
 }

  .nintex-hero-button {
    background-color: {{ text_color }};
    color: {{ color }};
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: block;
    width: fit-content;
    margin: 50px auto 0 auto;
    transition: 0.3s ease;
  }

  .nintex-hero-button:hover {
    transform: scale(1.03);
  }

  .nintex-hero-subtitle{
    font-size: 18px;
    font-weight: 400;
  }

</style>