/* Custom Styles for Kinery Excavating */
:root {
    --color-coral-50: #fff0ed;
    --color-coral-100: #ffd6cc;
    --color-coral-400: #ff8d79;
    --color-coral-500: #e76f51;
    --color-coral-600: #d65a3b;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tailwind Custom Config Override for Colors */
.bg-coral-50 { background-color: var(--color-coral-50); }
.bg-coral-100 { background-color: var(--color-coral-100); }
.bg-coral-400 { background-color: var(--color-coral-400); }
.bg-coral-500 { background-color: var(--color-coral-500); }
.bg-coral-600 { background-color: var(--color-coral-600); }
.bg-coral-900 { background-color: #450a0a; }
.text-coral-500 { color: var(--color-coral-500); }
.text-coral-400 { color: var(--color-coral-400); }
.border-coral-500 { border-color: var(--color-coral-500); }
.border-coral-200 { border-color: var(--color-coral-200); }

/* Animation Classes */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Mobile Menu Transition */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#mobile-menu.open {
    max-height: 300px;
    opacity: 1;
}