*{
    font-weight: bolder;
    color: rgb(34, 0, 0);
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{

    background:linear-gradient(135deg,#b30a0a,#fee506);

    min-height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:50px 20px;
}

/* HERO SECTION */
.hero{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    background:linear-gradient(135deg,#ff512f,#f09819);
    color:#fff;
}

.hero:hover{
    background:#f26303;
    color:#fff;
    transform:translateY(-5px);
}

.hero-content{
    max-width:750px;
}
.hero-content img{
    width: 200px;
    margin-bottom: 20px;
    
}

.hero h1{
    font-size:3.5rem;
    margin-bottom:20px;
    letter-spacing:2px;
}

.hero p{
    font: bolder;
    text-align: justify;
    color: #000000;
    font-size:1.15rem;
    line-height:1.8;
    margin-bottom:35px;
}

.hero-btn{
    display:inline-block;
    padding:15px 40px;
    background:#fff;
    color:#ff512f;
    text-decoration:none;
    border-radius:50px;
    font-weight:bold;
    font-size:18px;
    transition:.3s;
}

.hero-btn:hover{
    background:#222;
    color:#fff;
    transform:translateY(-5px);
}

.title{
    text-align: center;
    font-size:80px;
    color:#230501;
    margin-bottom:15px;
    margin-top: 30px;
}

.subtitle{
    text-align: center;
    color:#000000;
    margin-bottom:50px;
    font-weight: bold;
}

.chart{

    width:100%;
    max-width:1300px;
}

.level{

    display:flex;
    justify-content:center;
    gap:70px;
    margin:40px 0;
    position:relative;
}



/* Profile Cards */

.card{

    position:relative;

    width:200px;

    background:rgb(202, 120, 13);

    border-radius:18px;

    padding:25px;

    text-align:center;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 12px 25px #fa6400;

    border:3px solid transparent;
}

.card:hover{

    transform:translateY(-12px) scale(1.05);

    border-color:#fa6400;

    box-shadow:0 20px 40px rgba(79,124,255,.35);
}

.card img{
    margin-top: -20;

    margin-left: -27px;
    width:200px;

    height:200px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #973000;

    margin-bottom:15px;

    transition:.3s;
}

.card:hover img{

    transform:scale(1.08) rotate(3deg);
}

.card h3{

    color:#b30a0a;

    margin-bottom:8px;
}

.card p{
    font-weight: bolder;

    color:#000000;
}

/* Responsive */

@media(max-width:1000px){

.level{

    flex-wrap:wrap;
}

.level2::before,
.level3::before,
.card::before,
.vertical{

    display:none;
}

}