/* Twins Transport Bali - Custom Stylesheet 
    Fokus: Luxury UI/UX & Responsive Design
*/

/* Global & Typography */
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    scroll-behavior: smooth; 
}

.fw-800 { font-weight: 800; }
.fw-600 { font-weight: 600; }

/* Hero Section */
.hero-gradient { 
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('https://images.unsplash.com/photo-1537996194471-e657df975ab4?q=80&w=2000&auto=format&fit=crop'); 
    background-size: cover; 
    background-position: center; 
    min-height: 90vh; 
}

/* Destination Cards */
.card-destination { 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    border: none; 
    overflow: hidden; 
}

.card-destination:hover { 
    transform: translateY(-12px); 
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
}

.card-destination img { 
    transition: transform 0.6s ease; 
}

.card-destination:hover img { 
    transform: scale(1.1); 
}

/* Booking Form & Buttons */
.btn-whatsapp { 
    background-color: #25d366; 
    color: white; 
    border: none; 
    transition: 0.3s; 
}

.btn-whatsapp:hover { 
    background-color: #128c7e; 
    color: white; 
    transform: scale(1.02); 
}

.floating-label-input:focus { 
    box-shadow: none; 
    border-color: #0d6efd; 
}

/* Footer styling */
footer .text-primary {
    color: #0d6efd !important;
}

/* Menghilangkan efek hover default bootstrap pada tombol Book Now */
.nav-link.btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
    opacity: 1 !important;
}

/* Memastikan tombol tidak berubah saat kursor di atasnya */
.nav-link.btn-primary:hover, 
.nav-link.btn-primary:focus, 
.nav-link.btn-primary:active {
    background-color: #0d6efd !important;
    transform: none !important;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.3) !important;
}

/* Style tambahan agar teks navbar lain tetap manis */
.nav-item .nav-link.text-dark:hover {
    color: #0d6efd !important;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .hero-gradient {
        min-height: 70vh;
    }
    .display-2 {
        font-size: 2.5rem;
    }
}