body {
    font-family: 'Nunito', sans-serif;
    background-color: #f7e9cf; /* Creamy background from logo */
    color: #5D4037; /* Dark brown text from logo */
}

.font-brand {
    font-family: 'Nunito', sans-serif;
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Service list container animation */
#serviceList {
    transition: opacity 0.25s ease-in-out;
}

#serviceList.fade-out {
    opacity: 0;
}

#serviceList.fade-in {
    opacity: 1;
}

/* Individual card fade-in animation */
.card {
    opacity: 0;
    transform: translateY(10px);
    animation: cardFadeIn 0.4s ease-out forwards;
}

.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }
.card:nth-child(6) { animation-delay: 250ms; }
.card:nth-child(7) { animation-delay: 300ms; }
.card:nth-child(8) { animation-delay: 350ms; }

@keyframes cardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.animate-shake {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}



.category-btn.active {
    background-color: #E59F48; /* Orange from logo */
    color: #ffffff;
    font-weight: bold;
}

.brand-accent-bg { background-color: #E59F48; }
.brand-accent-text { color: #E59F48; }
.brand-secondary-bg { background-color: #FDF0D5; } /* A lighter cream */
.brand-secondary-bg-hover:hover { background-color: #FBE6B9; }
.brand-accent-ring:focus {
    outline: 2px solid #E59F48;
    outline-offset: 2px;
}

/* Overflow modal styling */
#overflow-modal {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#overflow-modal .bg-white {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

#overflow-modal[style*="opacity: 1"] .bg-white {
    transform: scale(1);
}