body{
    margin:0;
    /*font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif;*/
    background:#f5f6f8;
    color:#3f4a54;
}

.hero{
    padding:70px 20px 50px;
    text-align:center;

    background:linear-gradient(
        135deg,
        #7f8b96,
        #d7dde3
    );

    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.hero h1{
    margin:0;
    font-size:3rem;
    font-weight:700;
}

.hero p{
    margin-top:15px;
    font-size:1.1rem;
    color:#4b5563;
}

.modules{
    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;
    padding:60px 20px;
}

.module-card{

    width:340px;

    background:white;

    border-radius:20px;

    padding:35px;

    text-align:center;

    cursor:pointer;

    border:2x solid #e5e7eb;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);

    transition:
    transform .25s ease,
    box-shadow .25s ease;

    opacity:0;

    animation:show .6s forwards;

    position:relative;
    overflow:hidden;
}

.module-card:nth-child(2){
    animation-delay:.15s;
}

.module-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);

}

.module-icon{

    font-size:60px;

    margin-bottom:20px;

}

.module-title{

    font-size:1.5rem;

    font-weight:600;

    margin-bottom:15px;

}

.module-description{

    color:#6b7280;

    line-height:1.6;

    min-height:55px;
}

.module-enter{

    margin-top:25px;

    font-weight:600;

    color:#4b5563;

    transition:.2s;
}

.module-card:hover .module-enter{

    transform:translateX(5px);

}

.module-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transition:.7s;
}

.module-card:hover::before{
    left:100%;
}

footer{

    text-align:center;

    padding:30px;

    color:#9ca3af;

    font-size:.9rem;
}

@keyframes show{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:768px){

    .hero h1{
        font-size:2.2rem;
    }

    .module-card{
        width:100%;
        max-width:360px;
    }

}