/* Define the base transition for the boat image */
.boat {
    transition: transform 0.5s ease-out;  /* Smooth transition for transform changes */
    will-change: transform;  /* Tell the browser that we will be changing the transform property */
  }
  
  /* When the boat has the 'scrolled' class, apply the scroll-dependent transform */
  .boat.scrolled {
    transform: translateY(var(--scroll-y)) scale(var(--scale)); /* Apply translateY and scale transformations */
  }
  
  /* Optional: Define custom properties for the scroll position and scale if needed */
  :root {
    --scroll-y: 0;   /* Default value for scroll position */
    --scale: 1;      /* Default value for scale */
  }

  .react-parallax-content {
    height: 160vh !important;
  }

  /* Animated bounce for scroll arrow */
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .animate-bounce {
    animation: bounce 2s infinite;
  }