*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Segoe UI',sans-serif;

    background:
    linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)
    ),
    url('../images/bg-dashboard.jpeg')
    center/cover no-repeat;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;
}

.role-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;
}

.role-box{

    width:100%;

    max-width:950px;

    background:#fff;

    border-radius:28px;

    padding:70px 60px;

    text-align:center;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.3);

    animation:fadeUp .6s ease;
}

.role-box h1{

    font-size:58px;

    margin-bottom:18px;

    color:#111;

    line-height:1.1;
}

.subtitle{

    font-size:22px;

    color:#666;

    margin-bottom:55px;
}

.role-cards{

    display:flex;

    gap:30px;

    justify-content:center;

    flex-wrap:wrap;
}

.role-card{

    width:320px;

    background:#fff;

    border:2px solid #e8e8e8;

    border-radius:24px;

    padding:35px;

    text-decoration:none;

    transition:0.35s;

    color:#111;
}

.role-card:hover{

    transform:translateY(-8px);

    border-color:#14a800;

    box-shadow:
    0 20px 40px rgba(20,168,0,0.18);
}

.role-icon{

    width:110px;

    height:110px;

    border-radius:22px;

    margin:auto;

    margin-bottom:28px;

    background:
    linear-gradient(
    135deg,
    #dfffd9,
    #b5ff73
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    color:#111;
}

.role-card h2{

    font-size:36px;

    margin-bottom:14px;
}

.role-card p{

    font-size:18px;

    color:#666;

    line-height:1.5;
}

.bottom-text{

    margin-top:55px;

    font-size:18px;

    color:#555;
}

.bottom-text a{

    color:#14a800;

    text-decoration:none;

    font-weight:700;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

@media(max-width:900px){

    .role-box{

        padding:45px 30px;
    }

    .role-box h1{

        font-size:42px;
    }

    .subtitle{

        font-size:18px;
    }

    .role-card{

        width:100%;
    }
}