
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: opacity 0.3s;
      opacity: 0;
      visibility: hidden;
    }

    .back-to-top.show {
      opacity: 1;
      visibility: visible;
    }
  </style>

  <script>
    const backToTopButton = document.getElementById('back-to-top');

    window.addEventListener('scroll', () => {
      if (window.scrollY > 300) {
        backToTopButton.classList.add('show');
      } else {
        backToTopButton.classList.remove('show')