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

.hero{

    padding:90px 0;

    overflow:hidden;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.hero-content h1{

    font-size:4rem;

    line-height:1.1;

    margin:20px 0;

}

.hero-content h1 span{

    color:var(--powerbi);

}

.hero-content p{

    margin-bottom:35px;

    font-size:1.2rem;

    color:var(--cor-texto-secundario);

    line-height:1.8;

}

.hero-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:#EAF5ED;

    color:var(--excel);

    font-weight:700;

    font-size:.85rem;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:40px;

}

.btn-excel{

    background:var(--excel);

    color:#fff;

}

.btn-excel:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(33,115,70,.25);

}

.hero-features{

    display:flex;
    align-items:center;
    gap:38px;
    margin-top:10px;
    flex-wrap:wrap;

}

.hero-features div{

    display:flex;
    align-items:center;
    gap:8px;

    font-size:.95rem;
    font-weight:500;
    color:var(--cor-texto-principal);

    white-space:nowrap;

}

.hero-features i{

    font-size:1rem;
    color:var(--excel);
    flex-shrink:0;

}
.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:620px;

}
/* ==========================================================
   ELEMENTOS DECORATIVOS DA IMAGEM HERO
========================================================== */


.hero-image{

    position:relative;

}


/* Círculos de fundo */

.bg-circle{

    position:absolute;

    border-radius:50%;

    z-index:-1;

}


.bg-circle-1{

    width:420px;

    height:420px;

    background:#EAF5ED;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}


.bg-circle-2{

    width:300px;

    height:300px;

    background:#FFF4CC;

    top:10%;

    right:10%;

}


/* Cards flutuantes */

.floating-card{

    position:absolute;

    background:#fff;

    padding:18px 25px;

    border-radius:15px;

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

    display:flex;

    flex-direction:column;

}


.floating-card span{

    font-size:1.8rem;

    font-weight:800;

    color:var(--excel);

}


.floating-card small{

    color:var(--cor-texto-secundario);

}


/* Card alunos */

.card-1{

    top:20%;

    left:0;

}


/* Card aprovação */

.card-2{

    bottom:15%;

    right:0;

}

/* ==========================================================
   RESPONSIVO HERO - TABLET
========================================================== */

@media (max-width:992px){

    .hero{
        padding:70px 0;
    }

    .hero-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .hero-content h1{
        font-size:3rem;
    }

    .hero-content p{
        font-size:1.1rem;
    }

    .hero-buttons{
        justify-content:flex-start;
    }

    .hero-features{
        justify-content:flex-start;
    }

    .hero-image{
        justify-content:center;
    }

    .hero-image img{
        max-width:520px;
    }

}

/* ==========================================================
   RESPONSIVO HERO - MOBILE
========================================================== */

@media (max-width:576px){

    .hero{
        padding:50px 0;
    }

    .hero-container{
        gap:40px;
    }

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

    .hero-content p{
        font-size:1rem;
        line-height:1.6;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-features{
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .hero-image img{
        max-width:100%;
    }

    .bg-circle-1{
        width:280px;
        height:280px;
    }

    .bg-circle-2{
        width:180px;
        height:180px;
    }

    .floating-card{
        padding:12px 16px;
    }

    .floating-card span{
        font-size:1.3rem;
    }

    .card-1{
        top:5%;
        left:0;
    }

    .card-2{
        bottom:5%;
        right:0;
    }

}