/* Import Tailwind CSS base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Styles */
body {
    font-family: 'Inter', sans-serif;
}

.hero-bg {
    /* HERO IMAGE: Replace this URL with your own image path.
      Recommended dimensions: 1920px width by 1080px height.
    */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/1.jpg);
    background-size: cover;
    background-position: center;
}

.testimonial-slide {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.testimonial-slide.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Apply styles using @layer to extend Tailwind's utilities */
@layer components {
    .nav-link {
        @apply text-gray-600 hover:text-amber-600 transition-colors font-medium relative after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-0 after:h-[2px] after:bg-amber-500 after:transition-all after:duration-300;
    }
    .nav-link.active, .nav-link:hover {
        @apply after:w-full text-amber-600;
    }
    .nav-link-mobile {
        @apply text-gray-600 hover:text-amber-600 transition-colors text-lg font-medium;
    }
    .nav-link-mobile.active {
        @apply text-amber-600 font-bold;
    }
    .form-input {
        @apply w-full bg-white border-gray-300 text-gray-900 rounded-md p-3 focus:ring-amber-500 focus:border-amber-500 transition shadow-sm;
    }
    .gallery-image {
        @apply rounded-lg shadow-lg w-full h-full object-cover cursor-pointer hover:opacity-80 transition-opacity;
    }
    .testimonial-nav-btn {
        @apply absolute top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full hover:bg-amber-500 text-gray-800 hover:text-white transition-colors shadow-md;
    }
}