body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        html {
            /* Custom Scrollbar for Firefox */
            scrollbar-width: thin;
            scrollbar-color: #F59E0B #111D17; /* thumb-color track-color */
        }
        .gradient-text-brand {
            background: linear-gradient(90deg, theme('colors.brand.400'), theme('colors.brand.300'));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .text-shadow-subtle {
            text-shadow: 0px 2px 10px rgba(0,0,0,0.3);
        }
        .swiper-pagination-bullet {
            background: theme('colors.brand.300') !important; 
            opacity: 0.6 !important;
            width: 10px !important;
            height: 10px !important;
            transition: all 0.3s ease;
        }
        .swiper-pagination-bullet-active {
            background: theme('colors.brand.500') !important; 
            opacity: 1 !important;
            width: 24px !important;
            border-radius: 5px !important;
        }
        .card-hover-effect {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .card-hover-effect:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .header-glass {
            background: rgba(10, 30, 20, 0.8); 
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(var(--color-brand-rgb), 0.1);
        }
        /* Custom Scrollbar for WebKit browsers (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #111D17; /* Direct hex value for base.800 */
        }
        ::-webkit-scrollbar-thumb {
            background: #F59E0B; /* Direct hex value for brand.500 */
            border-radius: 5px;
            border: 2px solid #111D17; /* Direct hex value for base.800 */
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #D97706; /* Direct hex value for brand.600 */
        }
        .swiper-slide img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        .btn-primary {
            @apply bg-brand-500 text-base-900 hover:bg-brand-600 font-semibold py-3 px-6 sm:px-8 rounded-lg inline-block transition duration-300 shadow-md hover:shadow-lg text-sm sm:text-base;
        }
        .btn-secondary {
            @apply border-2 border-brand-500 hover:bg-brand-500 hover:text-base-900 text-brand-400 font-semibold py-3 px-6 sm:px-8 rounded-lg inline-flex items-center justify-center transition duration-300 shadow-md hover:shadow-lg text-sm sm:text-base;
        }
        .text-high-contrast {
            color: theme('colors.base.50');
        }
        .text-medium-contrast {
            color: theme('colors.base.200');
        }
        .text-low-contrast {
            color: theme('colors.base.400');
        }
        .section-title {
            @apply text-3xl sm:text-4xl md:text-5xl font-bold text-high-contrast mb-4 sm:mb-5;
        }
        .section-subtitle {
            @apply text-base sm:text-lg text-medium-contrast max-w-3xl mx-auto mb-10 md:mb-16;
        }
        .title-decorator {
            @apply w-16 sm:w-20 h-1 bg-gradient-to-r from-brand-500 to-brand-400 mx-auto mt-4 sm:mt-5 rounded-full;
        }

        /* Scroll Animation Styles */
        .scroll-animate {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            transition-delay: var(--scroll-animation-delay, 0s);
        }
        .scroll-animate.is-visible {
            opacity: 1;
            transform: translateY(0);
        }