.overflow-hidden {
  overflow: hidden;
}

/* Wrapper for animation elements */
.animation-wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
}

  /* Fire animation */
.fire-animation {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100px;
  height: 200px;
  transition: transform 1s ease-in-out;
}

.animation-wrapper:hover .fire-animation {
  transform: translateY(200px); /* Move down on hover */
}

/* Hover text */
.fire-text {
  position: absolute;
  bottom: -50px;
  left: -10px;
  width: 150px;
  height: 200px;
  text-align: center;
  background-color: transparent;
  transition: transform 1s ease-in-out;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
}

.animation-wrapper:hover .fire-text {
  transform: translateY(-60px);
}

.fire-animation .fire-goo {
  filter: url(#goop);
  position: absolute;
  width: 100%;
  height: 100%;
}

.fire-animation .fire-pit {
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 50px;
  height: 0px;
  background: #ff9800;
  border-radius: 15px;
}

.fire-animation figure {
  position: absolute;
  margin: 0 0 -7.5px;
  left: calc(50% - 17.5px);
  bottom: 0;
  width: 35px;
  height: 35px;
  background: #ff9800;
  border-radius: 100%;
}


@keyframes firecircle {
  0% {
    transform: translateY(0) scale(1);
    background: #ff9800;
  }

  100% {
    transform: translateY(-87.5px) scale(0);
    background: #ffc107;
  }
}

.fire-animation figure:nth-child(1) {
  animation: firecircle 1.2s 0.14s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 13px;
  margin-bottom: -19px;
}

.fire-animation figure:nth-child(2) {
  animation: firecircle 1.2s 0.28s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 1px;
  margin-bottom: -16px;
}

.fire-animation figure:nth-child(3) {
  animation: firecircle 1.2s 0.42s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 15px;
  margin-bottom: -12px;
}

.fire-animation figure:nth-child(4) {
  animation: firecircle 1.2s 0.56s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 13px;
  margin-bottom: -20px;
}

.fire-animation figure:nth-child(5) {
  animation: firecircle 1.2s 0.7s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 16px;
  margin-bottom: -12.5px;
}

.fire-animation figure:nth-child(6) {
  animation: firecircle 1.2s 0.84s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 12px;
  margin-bottom: -15px;
}

.fire-animation figure:nth-child(7) {
  animation: firecircle 1.2s 0.98s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 12.5px;
  margin-bottom: -12.5px;
}

.fire-animation figure:nth-child(8) {
  animation: firecircle 1.2s 1.12s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 18px;
  margin-bottom: -12px;
}

.fire-animation figure:nth-child(9) {
  animation: firecircle 1.2s 1.26s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 17.5px;
  margin-bottom: -16px;
}

.fire-animation figure:nth-child(10) {
  animation: firecircle 1.2s 1.4s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 17.5px;
  margin-bottom: -9.5px;
}

.fire-animation figure:nth-child(11) {
  animation: firecircle 1.2s 1.54s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 25px;
  margin-bottom: -17px;
}

.fire-animation figure:nth-child(12) {
  animation: firecircle 1.2s 1.68s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 6px;
  margin-bottom: -14.5px;
}

.fire-animation figure:nth-child(13) {
  animation: firecircle 1.2s 1.82s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 28.5px;
  margin-bottom: -13.5px;
}

.fire-animation figure:nth-child(14) {
  animation: firecircle 1.2s 1.96s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 26.5px;
  margin-bottom: -16.5px;
}

.fire-animation figure:nth-child(15) {
  animation: firecircle 1.2s 2.1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 11px;
  margin-bottom: -10px;
}

.fire-animation .smoke div {
  position: absolute;
  margin: 0 0 -7.5px;
  left: calc(50% - 17.5px);
  bottom: 0;
  width: 35px;
  height: 35px;
  background: #1D1128;
  border-radius: 100%;
}

@keyframes firesmokeleft {
  0% {
    transform: translateY(0) translateX(-25px) scale(0.3);
  }

  100% {
    transform: translateY(-87.5px) translateX(0) scale(1);
  }
}

@keyframes firesmokeright {
  0% {
    transform: translateY(0) translateX(25px) scale(0.3);
  }

  100% {
    transform: translateY(-87.5px) translateX(0) scale(1);
  }
}

.fire-animation .smoke div {
  animation: firesmokeleft 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
}


.fire-animation .smoke div:nth-child(1) {
  animation: firesmokeleft 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 8px;
  margin-bottom: -15.5px;
}

.fire-animation .smoke div:nth-child(2) {
  animation: firesmokeright 1.2s 0.5s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 6.5px;
  margin-bottom: -11.5px;
}

.fire-animation .smoke div:nth-child(3) {
  animation: firesmokeleft 1.2s 0.7s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 10px;
  margin-bottom: -8.5px;
}

.fire-animation .smoke div:nth-child(4) {
  animation: firesmokeright 1.2s 0.7s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 7.5px;
  margin-bottom: -12.5px;
}

.fire-animation .smoke div:nth-child(5) {
  animation: firesmokeleft 1.2s 0.9s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 10px;
  /* Adjust this value */
  margin-bottom: -10.5px;
}

.fire-animation .smoke div:nth-child(6) {
  animation: firesmokeright 1.2s 0.9s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 11px;
  /* Adjust this value */
  margin-bottom: -14.5px;
}

.fire-animation .smoke div:nth-child(7) {
  animation: firesmokeleft 1.2s 1.1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 11px;
  margin-bottom: -9.5px;
}

.fire-animation .smoke div:nth-child(8) {
  animation: firesmokeright 1.2s 1.1s cubic-bezier(0.5, 0.07, 0.64, 1) infinite;
  margin-left: 9.5px;
  margin-bottom: -13.5px;
}


.fire-text span {
    color: #fff; /* Change text color to white for better contrast */
    vertical-align: middle;
    text-decoration: none; /* Remove underline */
  }

.fire {
  color: #ff4500; /* Bright orange color for better visibility */
  animation: animation 1s ease-in-out infinite alternate;
  -moz-animation: animation 1s ease-in-out infinite alternate;
  -webkit-animation: animation 1s ease-in-out infinite alternate;
  -o-animation: animation 1s ease-in-out infinite alternate;
}

.burn {
  color: #ff8c00; /* Bright yellow-orange color for better visibility */
  animation: animation .65s ease-in-out infinite alternate;
  -moz-animation: animation .65s ease-in-out infinite alternate;
  -webkit-animation: animation .65s ease-in-out infinite alternate;
  -o-animation: animation .65s ease-in-out infinite alternate;
}

@keyframes animation {
  0% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #feec85,
      -10px -10px 20px #ffae34,
      10px -20px 25px #ec760c,
      -10px -30px 30px #cd4606,
      0 -40px 35px #973716,
      5px -45px 40px #451b0e;
  }
  100% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #fefcc9,
      -10px -10px 20px #feec85,
      11px -21px 30px #ffae34,
      -11px -29px 25px #ec760c,
      0 -41px 40px #cd4606,
      5px -45px 40px #973716;
  }
}

@-moz-keyframes animation {
  0% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #feec85,
      -10px -10px 20px #ffae34,
      10px -20px 25px #ec760c,
      -10px -30px 30px #cd4606,
      0 -40px 35px #973716,
      5px -45px 40px #451b0e;
  }
  100% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #fefcc9,
      -10px -10px 20px #feec85,
      11px -21px 30px #ffae34,
      -11px -29px 25px #ec760c,
      0 -41px 40px #cd4606,
      5px -45px 40px #973716;
  }
}

@-webkit-keyframes animation {
  0% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #feec85,
      -10px -10px 20px #ffae34,
      10px -20px 25px #ec760c,
      -10px -30px 30px #cd4606,
      0 -40px 35px #973716,
      5px -45px 40px #451b0e;
  }
  100% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #fefcc9,
      -10px -10px 20px #feec85,
      11px -21px 30px #ffae34,
      -11px -29px 25px #ec760c,
      0 -41px 40px #cd4606,
      5px -45px 40px #973716;
  }
}

@-o-keyframes animation {
  0% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #feec85,
      -10px -10px 20px #ffae34,
      10px -20px 25px #ec760c,
      -10px -30px 30px #cd4606,
      0 -40px 35px #973716,
      5px -45px 40px #451b0e;
  }
  100% {
    text-shadow: 0 0 10px #fefcc9,
      5px -5px 15px #fefcc9,
      -10px -10px 20px #feec85,
      11px -21px 30px #ffae34,
      -11px -29px 25px #ec760c,
      0 -41px 40px #cd4606,
      5px -45px 40px #973716;
  }
}