/*INTRO PAGE*/

.intro  {
  color: #2c2c2c;
}

.intro-expo-btn{
  width: 200px;
}

.intro-titles p{
  font-weight: 600;
  line-height: 20px;
  margin-inline: auto;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  animation: appear 2s forwards;
  animation-delay: 3s;
}

@keyframes appear{

  from{
    color: transparent;
  }
  to {
    color: #2c2c2c;
  }
}


svg path {
  fill: transparent;
  stroke: #2c2c2c;
  stroke-width: 2;
  stroke-dasharray: 500;
  stroke-dashoffset: 50;
  animation: textAnimation 3s ease-out 1 forwards;
}

@keyframes textAnimation {
  0% {
    stroke-dashoffset: 500;
  }
  80%{
    fill: transparent;
  }
  100% {
    fill: #2c2c2c;
    stroke-dashoffset: 50;
  }
}

/*telem*/
@media(max-width:999px){

  .title-fisga svg {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  }

  .intro-titles{
    position: absolute;
    bottom: 40%;
    width: 100vw;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .intro-titles *{
    margin: 5px;
  }
}


/*PC*/
@media(min-width: 999px){

  .title-fisga svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  }
  
  .intro-titles{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .intro-titles *{
    margin: 5%;
  }
}