.fade-in { opacity:0; transform: translateY(40px); transition: all 0.8s ease-out; }
.fade-in.visible { opacity:1; transform: translateY(0); }
.button-animate { transition: all 0.3s ease; }
.button-animate:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.3);}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.mobile-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 50;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 16rem; 
    padding: 1.5rem;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

#nav-menu.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background-color: #b91c1c; 
    padding: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 100%;
}

#nav-menu.active li {
    margin: 0.5rem 0;
}

#nav-menu.active a {
    display: block;
    padding: 0.25rem 1rem;
    font-size: 1rem; 
}

@media (min-width: 768px) {
    .desktop-padding-top {
        padding-top: calc(1rem + 36px) !important; 
    }
}

.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 100; display: none; justify-content: center; align-items: center;
}
.modal-content {
    background: white; padding: 2rem; border-radius: 12px; max-width: 400px; width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}