@font-face {
    font-family: 'Trench'; 
    src: url(../fonts/TrenchThin-16R0.otf) format('opentype'); 
  
  }
  
@font-face {
    font-family: 'Nexa'; 
    src: url(../fonts/Nexa-ExtraLight.ttf) format('truetype'); 
  
  }

@font-face {
    font-family: 'Nexa Heavy'; 
    src: url(../fonts/Nexa-Heavy.ttf) format('truetype'); 
  
  }
  

@font-face {
    font-family: 'STERION'; 
    src: url(../fonts/Sterion-BLLld.ttf) format('truetype'); 
  
  }
  

*,
*::before ,
*::after {
    box-sizing: border-box;
    
  }

  body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: black;
}


.header_container {
  position: relative;
  margin-top: 160px;
 
}

.header-title {
  margin: 0 0 1rem 0;
 padding: 4px;
 font-size: 6rem; 
 font-family: 'Nexa', sans-serif;
 font-weight: 500;
 letter-spacing: -3px;
 line-height: 1.2;
 background-image: linear-gradient(to right, #f3f3f3, #ec1dff, #ec1dff, #f3f3f3);
 color: #000;
 background-size: 200% auto; 
 background-clip: text;
 background-position: 0% center; 
 margin-bottom: 100px;
 transform: scaleX(0.8);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; 
  text-align: center;
 filter: drop-shadow(0 0 0rem #0ff);
 animation: filterglowoff 4s ease-out infinite alternate-reverse, animatedText 6s infinite alternate-reverse;
}




@keyframes filterglowoff {
    from {
        filter: drop-shadow(0 0 0.75rem #ec1dff);
    }
    to {
        filter: drop-shadow(0 0 0rem #ec1dff);
       }
}



@keyframes animatedText {
    to {
        background-position: 200% center;
       }
      
    }
      


.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:  url('../images/logo_background.svg') round;       
    background-size: 25% 25%;
    background-position: 0 0, 50% 0;
    filter: brightness(0%) blur(5px);
    -webkit-box-shadow: inset 3px -7px 104px 200px rgba(0,0,0,1);
    -moz-box-shadow: inset 3px -7px 104px 200px rgba(0,0,0,1);
    box-shadow: inset 3px -7px 104px 200px rgba(0,0,0,1);
    animation: moveBackground 20s linear infinite, unblur 7s ease forwards;
    z-index: 0;
}




@keyframes moveBackground {
    0% {
        background-position: 0 0, 50% 0; 
    }
    100% {
        background-position: 100% 100%, 150% 100%; 
    }
}

@keyframes unblur {
    to {
        filter: brightness(18%) blur(1px) ;
        -webkit-box-shadow: inset 3px -7px 104px 73px rgba(0,0,0,1);
        -moz-box-shadow: inset 3px -7px 104px 73px rgba(0,0,0,1);
        box-shadow: inset 3px -7px 104px 73px rgba(0,0,0,1);
    }
}

.concept { 
  position: relative;
  display: flex;
  margin-top: 200px;
  flex-direction: row;
  justify-content: center;
  height: 48.69vh;
}


.svg1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 99%;
  min-height: 99%;
  z-index: 2;
  filter: drop-shadow(0 0 0.5rem #0ff);
  opacity: 0;
  transition: opacity 1s ease-in-out;

}

.svg1.visible {
  opacity: 0.9;
}

.svg2 {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  filter: drop-shadow(0 0 0.5rem #ec1dff);
  z-index: 2;
  opacity: 0; 
  transition: opacity 1s ease;
  transition-delay: 0.2s;
}



.svg1 svg {
  width: 100%;
}

.concept-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  position: relative;
  z-index: 99;
  width: 50%;
}

.concept-content p {
  opacity: 0;
  margin-bottom: 2rem;
  font-size: 1.3rem;
  font-family:'Abel', sans-serif;
  filter: drop-shadow(0px 0px 0px #000000);
  transition: all 0.8s ease;

}


.concept-content p.visible {
  opacity: 1;
  transition-delay: 0.7s;
  font-size: 1.3rem;

}

.concept-content p.hidden {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;

}

.concept-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 150px 150px 0 150px;
  gap: 2rem;
}



.concept_logo {
  width: 20%;
  min-width: 20%;
  opacity: 0;
  margin-bottom: 20px;
  margin-right: 38rem;
  align-self: flex-start;
  filter: invert(1) drop-shadow(-2px 0px 0px #ec1dff69) drop-shadow(2px 0px 0px #30ff1d6c);
  transition: all 0.8s ease;
  


}

.concept_logo.visible {
  opacity: 1;
  margin-right: 41rem;
  transition-delay: 0.7s;
}



.concept_image {
  width: 18%;
  height: 100%;
  position: relative;
  z-index: 99;
  opacity: 0;
  margin-bottom: 170px;
  transition: all 0.8s ease;
}

.concept_image img {
  width: 100%;
}

.concept_image.visible {
  opacity: 1;
  transition-delay: 0.5s;
}

.mission {

  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}

.mission_container {

  position: relative;
  margin-top: 60px;
  margin-left: 30px;
  z-index: 4;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 70%;
  gap: 3rem;
  opacity: 0;
  transition: all 1s ease;
  transition-delay: 0.2s;
}

.mission_title {
  font-size: 3rem;
  filter: drop-shadow(0px 0px 0.5rem rgba(255, 255, 255, 0.411));
  color: white;
  font-weight: 600;
}

.mission_container p {
  margin-bottom: 2rem;
  font-size: 1.3rem;
  font-family:'Abel', sans-serif;
  color: white;
  position: relative;
  z-index: 4;
}



.mission-content {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  z-index: 99;
  height: 50%;

}

.svg_back {
  margin-top: 8px;
  z-index: 3;
  transform: scaleX(-1);
  
}

.mission svg {
  fill: #ec1dff;      
}



.fusion {
  margin: 0;
  font-family: 'STERION', sans-serif;
  font-weight: 100;
  opacity: 0; 
  transition: opacity 1s ease;

}

h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 200;
 
}

.fusion img {
  width: 80%;
}
.hero {
  font-size: clamp(40px, 10vw, 100px);
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  filter: drop-shadow(0 1px 3px);
}

.layers {
  position: relative;

}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  margin-top: 60px;
  line-height: 1.6;
  font-size: 3.5rem;
  z-index: -1;
}



.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}




.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
  position: relative;
  padding: 200px 0;
  text-align: center;
}

.about-section {
  display: flex;
  position: relative;
  justify-content:center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 48%;
  z-index: 3;
  margin-top: 200px;
  margin-bottom: 200px;

}

.svg3 {  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 99%;
  min-height: 99%;
  z-index: 2;
  filter: drop-shadow(0 0 0.5rem #0ff);
  opacity: 0;
  transition: opacity 1s ease-in-out;

}

.svg3.visible {
  opacity: 0.9;
}


.about-container {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  margin-top: 50px;
  flex-direction: column;
  opacity: 0;
  position: relative;
  z-index: 4;
  transition: opacity 1s ease;
}


.about-section p {
  text-align: left;
  width: 100%;
  height: fit-content;
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  font-weight: 200;
  color: black;
  filter: drop-shadow(0px 0px 0px #000000);
}



.history_title {
  font-size: 3rem;
  color: black;
  font-weight: 600;
  text-align: center;
  padding-top: 5%;
}

.text-image_box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  padding-bottom: 5%;
  margin-left: 15px;
  margin-right: 15px;
  gap: 15px;
}

.text-image_box img {
  width: 25%;
}


@media (max-width: 1710px) {

  .concept_image {
      display: none;
  }

  .svg_front {
      display: none;
  }

  .svg_back {
      display: none;
  }

  .svg1 {
      background-color: #00f7f7;
  }

  .svg2 {
      background-color: #ec1dff;
  }

  .svg3 {
    background-color: #00f7f7;
}

.concept-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 50px 0 50px;
}
  .concept-content {
      display: flex;
      flex-direction: column; 
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 50px;
  }


  .concept_logo {
      width: 10%;
      min-width: 10%;
      align-self: center;
      margin-right: 0;
  }
  .concept_logo.visible {
      min-width: 10%;
      align-self: center;
      margin-right: 0;
  }
  .mission_title, .history_title {
    font-size: 2.5rem;
  }
.mission_container p, .about-section p {
    font-size: 1rem;
}
}

@media (max-width: 1040px) {
  .header-title {
    font-size: 4rem;
  }
  .hero-text {
      font-size: 1rem;
      width: 100%;
      height: 50%;
  }

  .concept-content p {
      font-size: 0.8rem;
  }

  .concept-content p.visible {
      font-size: 0.8rem;
  }

  .concept_logo {
      width: 20%;
      min-width: 20%;
  }
  .mention_modal-content {
      top: 0px;
  }
}