/* Fleet Buttons Styles */
.fleet-buttons .active-btn {
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

.fleet-buttons .charter-btn.active-btn {
    background-color: #1E5B9F !important;
    color: white !important;
}

.fleet-buttons .sale-btn.active-btn {
    background-color: #1E5B9F !important;
    color: white !important;
}

/* Transition effects for yacht sections */
.charter-yachts, .sale-yachts {
    transition: opacity 0.3s ease-in-out;
}


/* Swiper container için genel stil düzenlemeleri */
.js-section-slider.charter-yachts,
.js-section-slider.sale-yachts {
   transition: opacity 0.3s ease;
   min-height: 500px; /* Minimum yükseklik tanımlayarak içeriğin kesilmesini önlüyoruz */
   height: auto !important; /* Swiper'ın otomatik yükseklik hesaplamasını override ediyoruz */
   overflow: visible !important; /* İçeriğin taşmasına izin veriyoruz */
}

/* Swiper wrapper için stil düzenlemeleri */
.js-section-slider .swiper-wrapper {
   height: auto !important; /* Wrapper'ın yüksekliğinin otomatik hesaplanmasını sağlıyoruz */
   min-height: 500px; /* Minimum yükseklik tanımlıyoruz */
}

/* Swiper slide için stil düzenlemeleri */
.js-section-slider .swiper-slide {
   height: auto !important; /* Slide'ların yüksekliğinin içeriğe göre ayarlanmasını sağlıyoruz */
   visibility: visible !important; /* Görünürlük sorunlarını önlüyoruz */
}

/* Görünürlük geçişleri için stil düzenlemeleri */
.js-section-slider.charter-yachts.active,
.js-section-slider.sale-yachts.active {
   opacity: 1;
   z-index: 2;
}

.js-section-slider.charter-yachts:not(.active),
.js-section-slider.sale-yachts:not(.active) {
   opacity: 0;
   z-index: 1;
}