/* ==========================================================
   HERO SECTION
========================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(circle at top right,
        rgba(37,99,235,.08),
        transparent 45%),
        var(--color-bg);
}

/* Layout
========================================================== */

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

/* Left Content
========================================================== */

.hero-content {
    max-width: 620px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    padding: .6rem 1rem;

    border-radius: 999px;

    background: rgba(37,99,235,.08);

    color: var(--color-primary);

    font-size: .9rem;
    font-weight: 600;

    margin-bottom: 1.75rem;
}

.hero-title {
    font-size: clamp(2.8rem,5vw,4.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-heading);
}

.hero-title span{
    color: var(--color-secondary);
}

.hero-description{
    font-size:1.1rem;
    line-height:1.8;
    color:var(--color-text);
    margin-bottom:2.5rem;
}

/* Buttons
========================================================== */

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:3rem;
}

/* Statistics
========================================================== */

.hero-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1rem;

}

.hero-stat-card{

    background:var(--color-surface);

    border-radius:18px;

    padding:1.5rem;

    box-shadow:var(--shadow-md);

    transition:all .3s ease;

    text-align:center;

}

.hero-stat-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.hero-stat-card h3{

    color:var(--color-secondary);

    font-size:2rem;

    margin-bottom:.35rem;

}

.hero-stat-card p{

    margin:0;

    color:var(--color-muted);

    font-size:.95rem;

}

/* Right Column
========================================================== */

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image-wrapper{

    position:relative;

    width:100%;

    max-width:520px;

}

.hero-main-image{

    width:100%;

    display:block;

    border-radius:28px;

    box-shadow:var(--shadow-xl);

}

/* Floating Cards
========================================================== */

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:1rem;

    background:#fff;

    padding:1rem 1.25rem;

    border-radius:16px;

    box-shadow:var(--shadow-lg);

    animation:float 4s ease-in-out infinite;

}

.floating-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:rgba(37,99,235,.08);

    font-size:1.3rem;

}

.floating-card strong{

    display:block;

    color:var(--color-heading);

    margin-bottom:2px;

}

.floating-card small{

    color:var(--color-muted);

}

.card-admission{

    top:40px;

    left:-40px;

}

.card-support{

    bottom:40px;

    right:-40px;

    animation-delay:1.8s;

}

/* Animation
========================================================== */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Responsive
========================================================== */

@media(max-width:991px){

    .hero{

        padding:80px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        grid-template-columns:repeat(3,1fr);

    }

    .hero-image-wrapper{

        max-width:450px;

        margin:auto;

    }

    .card-admission{

        left:0;

    }

    .card-support{

        right:0;

    }

}

@media(max-width:767px){

    .hero{

        padding:60px 0;

    }

    .hero-title{

        font-size:2.4rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    .floating-card{

        position:static;

        margin-top:1rem;

        animation:none;

    }

    .hero-image-wrapper{

        display:flex;

        flex-direction:column;

        gap:1rem;

    }

}