:root {
    --white: #ffffff;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --yellow-400: #d4af37;
    --yellow-500: #eab308;
}

.hero-image {
    background-attachment: fixed;
}

.side-panel {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.side-panel.open {
    opacity: 1;
    transform: translateX(0);
}