#fire-container {
    position: absolute;
    top: -5vh;
    right: -3vw;
    width: 7rem; /* Adjusted width */
    height: 7rem; /* Adjusted height */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align flames to the bottom */
  }
  
  /* Ensure other fire-related styles remain unchanged */
  .flame {
      box-sizing: border-box;
      position: absolute;
      transform: scale(1.5) translateY(-20px);
  }
  @media screen and (max-width: 768px) {
      .flame {
          transform: scale(0.85) translateY(-10px);
      }
      .number {
        font-size: 1rem;
        }
  }
  .wht { 
      color: white; animation: burn-wht 1.8s linear infinite; 
      box-shadow: 0 0 1rem white;}
  .ylw { 
      color: gold;  top: 1.8rem; animation: burn-ylw 1.6s linear infinite; 
      box-shadow: 0 0 1rem gold; opacity: .9}
  .orng { 
      color: orange; top: 3.6rem; animation: burn-orng 0.4s linear infinite; 
      box-shadow: 0 0 1rem orange; opacity: .8}
  .red { 
      color: crimson; top: 5.4rem; animation: burn-red 1s linear infinite;
      opacity: .7;}
  .flm-part {
      background-color: currentColor;
      border-radius: 50%;
      position: relative;
      transform: rotate(60deg) skewX(0deg) scale(1);
      border-color: currentColor;
      width: 2rem;
      height: 2rem;
  }
  .flm-part.flipped {
      transform: rotate(120deg) skewX(0deg) scale(1);
  }
  .flm-part::before {
      content: "";
      position: absolute;
      border-radius: 0 0 0 100%;
      border-bottom-style: solid;
      border-bottom-color: inherit;
      height: .5rem;
      width: 2rem;
      left: -1rem;
      top: -.5rem;
      border-bottom-width: 2rem;
  }
  .flm-part.flipped::before {
      border-radius: 100% 0 0 0;
      border-bottom: 0 solid transparent;
      border-top-style: solid;
      border-top-color: inherit;
      border-top-width: 2rem;
      height: .5rem;
      width: 2rem;
      left: -1rem;
      top: 0;
  }
  .number {
      position: absolute;
      color: rgb(0, 0, 0); 
      font-size: 2.5rem;
      left: 50%; /* Center horizontally */
      transform: translateX(-50%);
      z-index: 2;
      padding: 15px; /* Increased padding for better cartoony look */
      text-align: center;
      -webkit-text-fill-color: white; /* Override color with text fill */
      -webkit-text-stroke: 2px black; /* Add black stroke around the text */
  }
  @keyframes sway {
      0%, 100% { transform: translateX(-50%); } /* Center position */
      50% { transform: translateX(-50%) rotateZ(2deg); } /* Sway to the right */
  }
  .intensity-low .number {
      transform: translateX(-50%) translateY(0); /* No translateY for low intensity */
  }
  .intensity-medium .number {
      transform: translateX(-50%) translateY(3px); /* Move down slightly for medium intensity */
  }
  .intensity-high .number {
      transform: translateX(-50%) translateY(9px); /* Move down slightly more for high intensity */
  }
  @keyframes burn-wht {
      0% { transform: rotate(60deg) skewX(0deg) scale(1)}
      20% { transform: rotate(50deg) skewX(-3deg) scale(1.1)}
      40% { transform: rotate(60deg) skewX(0deg) scale(1)}
      60% { transform: rotate(70deg) skewX(3deg) scale(1.1)}
      100% {transform: rotate(60deg) skew(0deg) scale(1)}
  }
  @keyframes burn-ylw {
      0% { transform: rotate(120deg) skewX(0deg) scale(1.4)}
      20% { transform: rotate(110deg) skewX(10deg) scale(1.5)}
      40% { transform: rotate(120deg) skewX(0deg) scale(1.4)}
      60% { transform: rotate(130deg) skewX(-10deg) scale(1.5)}
      100% {transform: rotate(120deg) skew(0deg) scale(1.4)}
  }
  @keyframes burn-orng {
      0% { transform: rotate(65deg) skewX(0deg) scale(1.6)}
      20% { transform: rotate(60deg) skewX(-15deg) scale(1.7)}
      40% { transform: rotate(65deg) skewX(0deg) scale(1.6)}
      60% { transform: rotate(70deg) skewX(2deg) scale(1.7)}
      100% {transform: rotate(65deg) skew(0deg) scale(1.6)}
  }
  @keyframes burn-red {
      0% { transform: rotate(120deg) skewX(0deg) scale(1.8)}
      20% { transform: rotate(118deg) skewX(5deg) scale(2)}
      40% { transform: rotate(120deg) skewX(0deg) scale(1.8)}
      60% { transform: rotate(122deg) skewX(-5deg) scale(2)}
      100% {transform: rotate(120deg) skew(0deg) scale(1.8)}
  }
  /* Fire intensity levels */
  .intensity-low .orng,
  .intensity-low .red {
      display: none;
  }
  .intensity-medium .orng {
      display: block;
  }
  .intensity-medium .red {
      display: none;
  }
  .intensity-high .orng,
  .intensity-high .red {
      display: block;
  }
  .intensity-hidden .flame,
  .intensity-hidden .number
  {
    display: none;
  }