/* === SEÇÃO ROADMAP === */
.section-roadmap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; 
    text-align: center;

}

.roadmap-bg{
    background: url("../image/frame_3/img_fundo_mentoria.png") center/cover no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* === SOBREPOSIÇÃO DA IMAGEM DE FUNDO === */
.section-roadmap::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 33, 61, 0.6);
    z-index: 1;
}

/* === SUBTÍTULO === */
.section-subtitle {
    font-size: 3.5vw;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 5vh;
}

/* === GRID DOS MÓDULOS === */
.grid-modulos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Se ajusta automaticamente */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 5vh;
}


/* === CAIXAS DOS MÓDULOS === */
.modulo-box {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #14213D;;
    padding: 3vh 2vw;
    height: auto;  
    border-radius: 45px;
    border: 3px solid #FFF;
}

/* === ÍCONES DOS MÓDULOS === */
.modulo-box img {
    width: 6vw; /* Adapta dinamicamente */
    height: auto;
    margin-bottom: 2vh;
}


/* === RESPONSIVIDADE === */

/* TELAS GRANDES (DESKTOP) */
@media (min-width: 1025px) {
    .section-title { font-size: 50px; }
    .section-subtitle { font-size: 40px; }
    .modulo-box { font-size: 22px; }
    .btn-primary { font-size: 20px; }
}

/* TELAS MÉDIAS (TABLETS) */
@media (max-width: 1024px) {
    .section-title { font-size: 40px; }
    .section-subtitle { font-size: 30px; }
    .modulo-box { font-size: 20px; }
    .grid-modulos { grid-template-columns: repeat(2, 1fr); }
    .btn-primary { font-size: 18px; width: 80%; }
}

/* TELAS PEQUENAS (CELULARES) */
@media (max-width: 768px) {
    .section-title { font-size: 30px; }
    .section-subtitle { font-size: 25px; }
    .modulo-box { font-size: 18px; padding: 5vh 3vw; }
    .grid-modulos { grid-template-columns: repeat(1, 1fr); }
    .btn-primary { font-size: 16px; width: 100%; }
}