:root {
    --primary: #DC2626;
    --secondary: #EF4444;
    --light: #f8f9fa;
    --gray: #6C757D;
    --black: #2C3E50;
    --success: #00c39a;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--light);
}



.fade-up-onload {
    opacity: 0;
    transform: translateY(-40px);
    transition: all 0.4s ease-out;
}


.fade-up-onload.active {
    opacity: 1;
    transform: translateY(0);
}



/* Fade Right*/
.fade-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}


/* Fade-Up */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Zoom In*/
.zoom-in {
    opacity: 0;
    transform: translateY(2px) scale(0.92);
    /* Very small movement & tiny zoom */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.zoom-in.fade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* End normal */
}