/* =========================================
   BRAND COLORS
   (Matched with Usmaniya Institutions logo)
========================================= */
:root {
    --brand-blue: #1F4BAE;
    --brand-blue-dark: #0A64A4;
    --brand-gold-light: #D9A63A;
    --brand-gold-dark: #A87A17;
    --shadow-blue: rgba(31, 75, 174, 0.35);
    --shadow-gold: rgba(217, 166, 58, 0.35);
}

/* =========================================
   ANIMATION CLASSES
========================================= */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

.animate-fade-up-delay {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease 0.2s forwards;
}

.animate-fade-up-delay-2 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease 0.4s forwards;
}

.animate-fade-up-delay-3 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease 0.6s forwards;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   BRAND HOVER & GLOW EFFECTS
========================================= */
.brand-glow-blue {
    transition: 0.3s ease;
}

.brand-glow-blue:hover {
    box-shadow: 0 0 20px var(--shadow-blue);
}

.brand-glow-gold {
    transition: 0.3s ease;
}

.brand-glow-gold:hover {
    box-shadow: 0 0 20px var(--shadow-gold);
}

.brand-hover-blue:hover {
    color: var(--brand-blue);
    transform: translateY(-3px);
}

.brand-hover-gold:hover {
    color: var(--brand-gold-light);
    transform: translateY(-3px);
}

/* =========================================
   KEYFRAME ANIMATIONS
========================================= */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================
   FLOATING SHAPES
========================================= */
.shape { animation: float 6s ease-in-out infinite; }

.shape-1 { animation-delay: 0s; }
.shape-2 { animation-delay: 2s; }
.shape-3 { animation-delay: 4s; }
.shape-4 { animation-delay: 1s; }

/* =========================================
   HOVER ANIMATIONS
========================================= */
.stat-card:hover .stat-icon {
    animation: pulse 1s ease;
    color: var(--brand-gold-light);
}

.feature-card:hover .feature-icon {
    animation: pulse 1s ease;
    color: var(--brand-blue);
}

/* =========================================
   SCROLL REVEAL
========================================= */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}