/* ==========================================================
   COURSES
========================================================== */

.courses{

    padding:100px 0;

}


/* ==========================================================
   CABEÇALHO
========================================================== */

.section-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}


.section-header span{

    display:inline-block;

    margin-bottom:15px;

    color:var(--excel);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

}


.section-header h2{

    margin-bottom:18px;

    font-size:2.7rem;

    line-height:1.2;

}


.section-header p{

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

    font-size:1.1rem;

    line-height:1.8;

}


/* ==========================================================
   GRID
========================================================== */

.courses-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


/* ==========================================================
   CARD
========================================================== */

.course-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

}


.course-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.08);

}


/* ==========================================================
   BANNER
========================================================== */

.course-banner{

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

}


/* ==========================================================
   TEXTURA SUAVE DOS BANNERS
========================================================== */

.course-banner::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.08;

    background-image:
        radial-gradient(
            circle at 20% 20%,
            #fff 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 80% 70%,
            #fff 0 5px,
            transparent 6px
        );

}


/* ==========================================================
   CORES DOS CURSOS
========================================================== */


/* ----------------------------------------------------------
   EXCEL
---------------------------------------------------------- */

.course-banner.excel{

    background:
        linear-gradient(
            135deg,
            #0F7B43,
            #28A745
        );

}


/* ----------------------------------------------------------
   POWER BI
---------------------------------------------------------- */

.course-banner.powerbi{

    background:
        linear-gradient(
            135deg,
            #E8B400,
            #FFD84C
        );

}


/* ----------------------------------------------------------
   SQL
---------------------------------------------------------- */

.course-banner.sql{

    background:
        linear-gradient(
            135deg,
            #075985,
            #0EA5E9
        );

}


/* ==========================================================
   LOGO EXCEL
========================================================== */

.excel-logo{

    position:relative;

    width:76px;

    height:54px;

    display:block;

    z-index:2;

}


/* ==========================================================
   DOCUMENTO / PLANILHA DO EXCEL
========================================================== */

.excel-document{

    position:absolute;

    top:2px;

    right:0;

    width:50px;

    height:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    padding:9px 6px 9px 15px;

    box-sizing:border-box;

    border-radius:5px;

    background:#fff;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

}


/* ==========================================================
   LINHAS DA PLANILHA
========================================================== */

.excel-document span{

    position:relative;

    display:block;

    width:100%;

    height:3px;

    border-radius:2px;

    background:#107C41;

}


/* ==========================================================
   DIVISÕES DA PLANILHA
========================================================== */

.excel-document span::after{

    content:"";

    position:absolute;

    top:-4px;

    left:40%;

    width:3px;

    height:11px;

    border-radius:2px;

    background:#107C41;

}


/* ==========================================================
   DOBRA DO DOCUMENTO
========================================================== */

.excel-document::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:12px;

    height:12px;

    background:#DFF3E7;

    clip-path:polygon(
        0 0,
        100% 100%,
        100% 0
    );

}


/* ==========================================================
   X DO EXCEL
========================================================== */

.excel-x{

    position:absolute;

    top:7px;

    left:0;

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-sizing:border-box;

    border-radius:6px;

    background:#107C41;

    color:#fff;

    font-family:Arial,sans-serif;

    font-size:1.7rem;

    font-weight:800;

    line-height:1;

    letter-spacing:-1px;

    z-index:3;

    box-shadow:0 4px 9px rgba(0,0,0,.18);

}


/* ==========================================================
   BORDA SUTIL DO X
========================================================== */

.excel-x::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:6px;

    border:1px solid rgba(255,255,255,.15);

    pointer-events:none;

}


/* ==========================================================
   ÍCONES POWER BI E SQL
========================================================== */

.course-banner i{

    color:#fff;

    font-size:2.6rem;

    position:relative;

    z-index:2;

}


/* ==========================================================
   CORPO DO CARD
========================================================== */

.course-body{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:30px;

}


.course-body h3{

    margin-bottom:12px;

    font-size:1.5rem;

    font-weight:700;

}


.course-body p{

    margin-bottom:25px;

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

    line-height:1.7;

}


/* ==========================================================
   LISTA
========================================================== */

.course-body ul{

    margin:0;

    padding-left:18px;

}


.course-body li{

    margin-bottom:12px;

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

}


/* ==========================================================
   RODAPÉ
========================================================== */

.course-footer{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

    padding-top:30px;

}


.course-price small{

    display:block;

    margin-bottom:5px;

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

}


.course-price strong{

    font-size:1.8rem;

    color:var(--cor-texto);

}


/* ==========================================================
   BOTÃO
========================================================== */

.btn-course{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:13px 26px;

    border-radius:10px;

    background:var(--excel);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}


.btn-course:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   BOTÃO POWER BI
========================================================== */

.btn-course.yellow{

    background:#F2C811;

    color:#222;

}


/* ==========================================================
   BOTÃO SQL
========================================================== */

.btn-course.blue{

    background:#0EA5E9;

    color:#fff;

}


/* ==========================================================
   RESPONSIVO TABLET
========================================================== */

@media(max-width:1100px){

    .courses-grid{

        grid-template-columns:repeat(2,1fr);

        gap:25px;

    }

}


/* ==========================================================
   RESPONSIVO TABLET PEQUENO
========================================================== */

@media(max-width:850px){

    .courses-grid{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   RESPONSIVO MOBILE
========================================================== */

@media(max-width:768px){

    .courses{

        padding:70px 0;

    }


    .section-header{

        margin-bottom:40px;

    }


    .section-header h2{

        font-size:2.2rem;

    }


    .section-header p{

        font-size:1rem;

    }


    .course-banner{

        height:80px;

    }


    .course-body{

        padding:25px;

    }


    .course-footer{

        flex-direction:column;

        align-items:stretch;

        gap:20px;

    }


    .course-price strong{

        font-size:1.6rem;

    }


    .btn-course{

        width:100%;

    }


    /* ------------------------------------------------------
       LOGO EXCEL NO MOBILE
    ------------------------------------------------------ */

    .excel-logo{

        transform:scale(.95);

    }

}