.boats {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; /* زیر banner و navigation */
    pointer-events: none; /* برای جلوگیری از تداخل با کلیک‌ها */
}

.boat {
    position: absolute;
    width: 60px; /* اندازه قایق */
    height: auto;
    bottom: 20%; /* موقعیت اولیه روی آب */
    will-change: transform;
    animation: float 8s infinite ease-in-out; /* انیمیشن عمودی آرام */
}

.boat-ripples {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* زیر قایق‌ها */
    pointer-events: none;
    background: transparent; /* برای jQuery Ripples */
}

/* انیمیشن عمودی برای شبیه‌سازی تکون خوردن روی موج */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

/* تنظیمات خاص برای هر قایق */
.boat:nth-child(1) {
    bottom: 15%;
    animation-delay: 0s;
}

.boat:nth-child(2) {
    bottom: 18%;
    animation-delay: 1s;
}

.boat:nth-child(3) {
    bottom: 22%;
    animation-delay: 2s;
}

.boat:nth-child(4) {
    bottom: 17%;
    animation-delay: 3s;
}

.boat:nth-child(5) {
    bottom: 20%;
    animation-delay: 4s;
}