#logo {
  margin-top: 16em;
  margin-left: 30%
}

#arch {
  margin-top: 16em;
  margin-left: 30%;
  display: inline;
  animation: 
  color-change infinite ease 0.5s;
}

#arch path {
  stroke-dasharray: 784.2883911132812px;
  stroke-dashoffset: 782.2883911132812px;
  animation: 
  line-animation 2s ease-in-out forwards 0.5s;
 }

 #heart {
  margin-top: 18em;
  margin-left: 10%;
  display: inline;
  animation: 
  color-change infinite ease 0.9s;
}

#logo path:nth-child(1) {
 stroke-dasharray: 381.54461669921875px;
 stroke-dashoffset: 381.54461669921875px;
 animation: line-animation 2s ease forwards 0.5s;
}
#logo path:nth-child(2) {
  stroke-dasharray: 85px;
  stroke-dashoffset: 85px;
  animation: line-animation 10s ease forwards 1s;

 }
 #logo path:nth-child(3) {
  stroke-dasharray: 301.8318786621094px;
  stroke-dashoffset: 301.8318786621094px;
  animation: line-animation 2s ease forwards 1.5s;

 }
 #logo path:nth-child(4) {
  stroke-dasharray: 212.250244140625px;
  stroke-dashoffset: 212.250244140625px;
  animation: line-animation 2s ease forwards 2s;

 }
 #logo path:nth-child(5) {
  stroke-dasharray: 383.6781921386719px;
  stroke-dashoffset: 383.6781921386719px;
  animation: line-animation 2s ease forwards 2.5s;

 }
 #logo path:nth-child(6) {
  stroke-dasharray: 422.8726806640625px;
  stroke-dashoffset: 422.8726806640625px;
  animation: line-animation 2s ease forwards 3s;

 }
 #logo path:nth-child(7) {
  stroke-dasharray: 328.8961181640625px;
  stroke-dashoffset: 328.89611816406258px;
  animation: line-animation 2s ease forwards 3.5s;

 }
 #logo path:nth-child(8) {
  stroke-dasharray: 370.9111022949219px;
  stroke-dashoffset: 370.9111022949219px;
  animation: line-animation 2s ease forwards 2.6s;

 }

@keyframes line-animation {
  to{
    stroke-dashoffset: 0;
  }
}

@keyframes color-change {
  from {
    fill: rgb(252, 17, 0);
  }
  to{
    fill: rgb(252, 29, 0);
    opacity: 0.5;
  }
}

  @media screen and (max-width: 770px) {

    .hero-image {
      flex-direction: column;
      justify-content: flex-end;
      letter-spacing: 2px;
      padding: 2em;
      text-align: center;
    }
  
    .hero-image-text {
      width: 100%;
      font-size: 1.5rem;
      font-weight: 400;
    }
  
    .buttons {
      flex-direction: row;
      align-items: center;
      margin-right: 0;
    }

  .section {
    width: 90%;
  }
  }

  @media screen and (max-width: 480px) {
    .hero-image {
      letter-spacing: 4px;
      margin-top: 2em;
      height: 150px;
    }
  
    .hero-image-text {
      width: 100%;
      font-size: 0.8rem;
      font-weight: 400;
    }
  
 

  }