/* Custom scrollbar for a softer feel */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #FDFCF8;
        }
        ::-webkit-scrollbar-thumb {
            background: #C8D5B9;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #b9c7aa;
        }

        /* Active nav link style */
        .nav-link.active {
            color: #EABF9F;
            border-bottom: 2px solid #EABF9F;
            padding-bottom: 2px;
        }
        .nav-link {
            transition: all 0.3s ease;
            border-bottom: 2px solid transparent;
            padding-bottom: 2px;
            cursor: pointer; /* Ensure all nav-links are clickable */
        }
        .nav-link:hover {
            color: #EABF9F;
        }
        
        /* Custom button style */
        .btn {
            @apply py-3 px-8 rounded-full text-white bg-peach transition-all duration-300 ease-in-out;
        }
        .btn:hover {
            @apply shadow-lg shadow-peach/40 -translate-y-0.5;
        }
        .btn-secondary {
             @apply py-3 px-8 rounded-full text-peach bg-transparent border border-peach transition-all duration-300 ease-in-out;
        }
        .btn-secondary:hover {
            @apply bg-peach text-white shadow-lg shadow-peach/40 -translate-y-0.5;
        }
        .btn-logout {
             @apply py-2 px-6 rounded-full text-soft-gray bg-cream/70 hover:bg-cream transition-all duration-300 ease-in-out;
        }

        /* Hero Slider */
        .hero-slider {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 2s ease-in-out;
            animation: kenburns 30s infinite;
        }
        .hero-slide.active {
            opacity: 1;
        }
        .hero-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(253, 252, 248, 0.3) 0%, rgba(253, 252, 248, 0.8) 80%, #FDFCF8 100%);
        }

        @keyframes kenburns {
            0%, 100% {
                transform: scale(1) translate(0, 0);
                opacity: 1;
            }
            50% {
                transform: scale(1.1) translate(-5px, 5px);
                opacity: 1;
            }
        }
        
        /* Masonry-like grid with varying spans */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            grid-auto-rows: 250px;
            gap: 1rem;
        }
        .gallery-item {
            @apply relative rounded-lg overflow-hidden shadow-md cursor-pointer transition-all duration-500 ease-in-out;
        }
        .gallery-item:hover {
            @apply shadow-xl shadow-cream/50 -translate-y-1 z-10;
        }
        .gallery-item img {
            @apply w-full h-full object-cover transition-transform duration-500 ease-in-out;
        }
        .gallery-item:hover img {
            @apply scale-110;
        }
        .gallery-item .overlay {
            @apply absolute inset-0 bg-black/60 opacity-0 transition-opacity duration-500 ease-in-out flex flex-col justify-end p-4;
        }
        .gallery-item:hover .overlay {
            @apply opacity-100;
        }

        /* Varying grid item spans for masonry effect */
        @media (min-width: 768px) {
            .gallery-item.span-h-2 { grid-row: span 2 / span 2; }
            .gallery-item.span-w-2 { grid-column: span 2 / span 2; }
            .gallery-item.span-all-2 { 
                grid-row: span 2 / span 2; 
                grid-column: span 2 / span 2; 
            }
            .gallery-grid {
                 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                 grid-auto-flow: dense;
            }
        }
        
        /* FAQ Accordion */
        .faq-question {
            transition: background-color 0.3s ease;
        }
        .faq-question svg {
            transition: transform 0.3s ease;
        }
        .faq-question.active svg {
            transform: rotate(180deg);
        }
        .faq-answer {
            transition: max-height 0.5s ease-in-out;
            overflow: hidden;
            max-height: 0;
        }
        .faq-answer.open {
            max-height: 300px; /* Adjust as needed */
        }
        
        /* Article Styles */
        .article-content h3 {
            @apply text-3xl font-heading font-semibold mt-10 mb-4;
        }
        .article-content p {
            @apply text-lg text-soft-gray/80 mb-6;
        }
        .article-content blockquote {
            @apply border-l-4 border-peach pl-6 italic text-xl text-soft-gray my-8;
        }
        .article-content ul {
            @apply list-disc list-inside text-lg text-soft-gray/80 mb-6 pl-4;
        }
        .article-content li {
            @apply mb-2;
        }