:root {
    --navy: #0A1F3E;
    --gold: #D4AF37;
    --cream: #F5F5F5;
    --charcoal: #333333;
    --burgundy: #800020;
}

body {
    background-color: var(--cream);
    color: var(--charcoal);
    font-family: 'Lora', serif;
}

.bg-navy {
    background-color: var(--navy);
}

.text-navy {
    color: var(--navy);
}

.bg-cream {
    background-color: var(--cream);
}

.text-charcoal {
    color: var(--charcoal);
}

.text-gold {
    color: var(--gold);
}

.border-navy {
    border-color: var(--navy);
}

.focus\:ring-gold:focus {
    --tw-ring-color: var(--gold);
}

.bg-gradient-to-r.from-navy {
    --tw-gradient-from: var(--navy);
}

.bg-gradient-to-r.to-gold {
    --tw-gradient-to: var(--gold);
}

.bg-gradient-to-r.from-gold {
    --tw-gradient-from: var(--gold);
}

.bg-gradient-to-r.to-navy {
    --tw-gradient-to: var(--navy);
}

.hover\:bg-burgundy:hover {
    background-color: var(--burgundy);
}

@keyframes welcome {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    50% {
        transform: scale(1.1) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.animate-welcome {
    animation: welcome 1s ease-in-out;
}

@keyframes pulse-whatsapp {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 10px 5px rgba(212, 175, 55, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

.animate-pulse-whatsapp {
    animation: pulse-whatsapp 2s infinite;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-in-out;
}

.shadow-glow {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

#carousel-images img {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

#carousel-images img:not(.hidden) {
    transform: scale(1.05);
    opacity: 1;
}

#carousel-images img.hidden {
    transform: scale(1);
    opacity: 0.7;
}

.dot {
    transition: background-color 0.3s;
}

.dot.active {
    background-color: var(--navy);
}

.dot:hover {
    background-color: var(--burgundy);
}

@media (max-width: 768px) {
    #menu {
        display: none;
    }
    #mobile-menu.hidden {
        display: none;
    }
    #mobile-menu {
        display: block;
    }
}