@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .hero-btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-lg bg-primary text-white transition-all duration-300 hover:bg-primary-hover hover:scale-105;
    }

    .hero-btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-lg border-2 border-white text-white transition-all duration-300 hover:bg-white hover:text-gray-900;
    }

    .whatsapp-btn {
        @apply inline-flex items-center gap-2 px-4 py-2 bg-success text-white rounded-lg font-semibold text-sm transition-colors duration-300 hover:bg-success-hover;
    }

    .yacht-card {
        @apply bg-white rounded-2xl overflow-hidden border-none shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
    }

    .yacht-card .card-img-wrapper {
        @apply relative pt-[66.67%] overflow-hidden;
    }

    .yacht-card .card-img-top {
        @apply absolute top-0 left-0 w-full h-full object-cover transition-transform duration-300;
    }

    .yacht-card:hover .card-img-top {
        @apply scale-105;
    }

    .yacht-card .card-body {
        @apply flex-1 flex flex-col justify-between p-6;
    }

    .navbar {
        @apply backdrop-blur-md bg-white/95 py-3;
    }

    .nav-link {
        @apply text-gray-700 font-medium px-4 py-2 transition-colors duration-200 hover:text-primary;
    }
}