/* ===================== */
/* HERO HOME */
/* ===================== */
.hero-home{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin-top:40px;

    flex-wrap:wrap;
}

/* LEFT */
.hero-left{

    flex:1;

    min-width:300px;
}

.badge{

    display:inline-block;

    background:rgba(255,255,255,0.15);

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    margin-bottom:18px;
}

.hero-left h2{

    color:white;

    font-size:52px;

    line-height:1.1;

    margin-bottom:20px;
}

.hero-left p{

    color:#ffe4e6;

    font-size:17px;

    max-width:650px;

    margin-bottom:30px;
}

/* BUTTONS */
.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;
}

.hero-btn{

    text-decoration:none;

    padding:14px 22px;

    border-radius:14px;

    font-weight:bold;

    transition:.3s;
}

.primary-btn{

    background:white;

    color:#b91c1c;
}

.primary-btn:hover{

    transform:translateY(-3px);
}

.secondary-btn{

    border:2px solid rgba(255,255,255,0.3);

    color:white;
}

.secondary-btn:hover{

    background:rgba(255,255,255,0.1);
}

/* RIGHT */
.hero-right{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:20px;

    min-width:280px;
}

/* CARDS */
.math-card{

    background:white;

    color:#991b1b;

    border-radius:24px;

    padding:24px;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.15);
}

.math-card h3{

    margin-bottom:10px;
}

.math-card span{

    font-size:26px;

    font-weight:bold;
}

.floating-card{

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

.small-card{

    width:240px;

    margin-right:80px;
}

/* SECTION */
.section-title{

    text-align:center;

    margin-bottom:30px;
}

.section-title p{

    color:#6b7280;
}

/* GRID */
.modules-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:25px;
}

/* MODULE CARD */
.module-card{

    text-decoration:none;

    color:inherit;

    background:white;

    border-radius:28px;

    padding:30px;

    transition:.35s;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.08),
        0 0 0 6px #ffe4e6;
}

.module-card:hover{

    transform:
        translateY(-8px)
        scale(1.02);

    box-shadow:
        0 18px 35px rgba(239,68,68,0.18);
}

/* ICON */
.module-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #ef4444,
        #b91c1c
    );

    color:white;

    font-size:32px;

    margin-bottom:20px;
}

.module-card h3{

    color:#991b1b;

    margin-bottom:12px;
}

.module-card p{

    color:#6b7280;

    font-size:15px;
}

/* FOOTER */
.footer{

    margin-top:60px;

    padding:25px;

    text-align:center;

    color:#6b7280;
}

/* FLOAT */
@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }
}

/* ACTIVE */
.active-link{

    background:white;

    color:#b91c1c !important;
}

/* RESPONSIVE */
@media(max-width:900px){

    .hero-left h2{

        font-size:40px;
    }

    .hero-home{

        flex-direction:column;
    }

    .hero-right{

        align-items:center;
    }

    .small-card{

        margin-right:0;
    }
}

@media(max-width:600px){

    .hero-left h2{

        font-size:32px;
    }

    .hero-left p{

        font-size:15px;
    }

    .hero-btn{

        width:100%;

        text-align:center;
    }
}