* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #f0f0f0;
  background-image: linear-gradient(#ffffff, #f0f0f0);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.cls-1 {
  fill: transparent;
  -webkit-animation: fillBlack 2s ease-in-out forwards 1.4s;
  animation: fillBlack 2s ease-in-out forwards 1.4s;
}

.cls-2 {
  fill: transparent;
  stroke: #eb0d75;
  stroke-width: 2;
  stroke-dasharray: 3050; /* Adjust based on path length */
  stroke-dashoffset: 3050; /* Matches dasharray for starting point */
  -webkit-animation: draw 2s ease-in-out forwards,
    fill 2s ease-in-out 4s forwards;
  animation: draw 2s ease-in-out forwards, fill 2s ease-in-out 1.4s forwards;
}

@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes fill {
  to {
    fill: #eb0d75;
  }
}

@keyframes fill {
  to {
    fill: #eb0d75;
  }
}
@-webkit-keyframes fillBlack {
  to {
    fill: #221f1f;
  }
}
@keyframes fillBlack {
  to {
    fill: #221f1f;
  }
}
.contact {
  margin-top: 2rem;
  color: #221f1f;
}
.contact a {
  text-decoration: none;
  cursor: pointer;
  color: #221f1f;
}