:root {
    --corPrincipalc: #072258;
    --corPrincipal: #051637;
    --laranja:#F09061;

}

html {
    scroll-behavior: smooth;
}

a{
    text-decoration: none !important;
}

#red{
    color:red;
}

#orange{
    color: var(--laranja);
}

.linha{
    background-color: #0e4da4;
    padding:10px 0px;

    h1{
        text-align: center;
        font-size: 15px;
        color: white;
        font-weight: 500;
    }
}

.headline{
    padding:50px;
    width: 100%;
    background-image: url('media/FundoHeadline.png');
    background-position: center;
    background-size:cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:15px;

    img{
        width: 60%;
    }

    p:nth-of-type(1){
        margin-top: 15px;
        font-size: 48px;
        font-weight: 700;
        color: #FE6B40
    }

    a:nth-of-type(1){
        transition: 200ms;
        border-radius: 10px;
        text-align: center;
        width: 60%;
        padding:15px 0px;
        font-weight: 600;
        font-size: 21px;
        color: white;
        background-color: #176BE0;

        &:hover{
            transition: 200ms;
            background-color: #1253af;
        }
    }

    p:nth-of-type(2){
        text-align: center;
        width: 40%;
        font-weight: 700;
        font-size: 32px;
    }

    p:nth-of-type(3){
        font-size: 32px;
        width:40%;
        font-style:italic;
        text-align: center;
    
    }

    a:nth-of-type(2){
        transition: 200ms;
        font-size: 21px;
        font-weight: 600;
        color: white;
        background-color: #008300;
        padding:15px 0px;
        width: 30%;
        text-align: center;
        border-radius: 10px;

        &:hover{
            transition: 200ms;
            background-color: #0b640b;
        }
    }
}

.container1{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:40px;
    background: linear-gradient(to bottom, var(--corPrincipal), var(--corPrincipalc));

    .container-video{
        display: flex;
        justify-content: center; /* Centraliza o vídeo */
        align-items: center;
        width: 100%; /* Ajuste a largura conforme necessário */
        max-width: 100%;
        position: relative;

    iframe{
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* Garante a proporção correta */
        border: none;
        }
    }
}

.container2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    padding: 40px;

    a:nth-of-type(1){
        background-color: #007BFF;
        color:white;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        width: 30%;
        padding: 15px 0px;
        border-radius: 15px;
        transition: 200ms;

        &:hover{
            transition: 200ms;
            background-color: #0e4da4;
        }
    }

    h1{
        color: rgb(33, 33, 33);
        font-size: 45px;
    }

    .modulos-tabela {
        width: 50%;
        border-collapse: separate; /* Mantém os cantos arredondados */
        border-spacing: 0; /* Remove espaços entre as células */
        background-color: white;
        border-radius: 10px; /* Bordas arredondadas */
        overflow: hidden; /* Garante que as bordas arredondadas sejam visíveis */
    }
    
    /* Estiliza o cabeçalho com gradiente */
    .modulos-tabela thead tr {
        background-image: linear-gradient(275deg, #00C5FF, #007BFF);
        color: white;
    }
    
    /* Arredonda os cantos superiores da tabela */
    .modulos-tabela thead tr:first-child th:first-child {
        border-top-left-radius: 10px;
    }
    
    .modulos-tabela thead tr:first-child th:last-child {
        border-top-right-radius: 10px;
    }
    
    /* Arredonda os cantos inferiores da tabela */
    .modulos-tabela tbody tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }
    
    .modulos-tabela tbody tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }
    
    /* Remove bordas do cabeçalho */
    .modulos-tabela th {
        border: none;
        padding: 15px;
        font-size: 18px;
        text-align: left;
    }
    
    /* Adiciona bordas apenas nas células do corpo */
    .modulos-tabela td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
    
    /* 🔹 Faz os '#' ficarem AZUIS e com PESO 600 🔹 */
    .modulos-tabela td:first-child {
        color: #007BFF; /* Azul */
        font-weight: 600; /* Negrito */
        text-align: center; /* Centraliza os números */
    }
    
    
}

.container3{
    background: linear-gradient(var(--corPrincipal), var(--corPrincipalc));
    display: flex;
    justify-content: center;
    padding:20px;
    img{
        width: 30%;
    }
}
.container4{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:10px;
    background-image: url(media/fundobranco.png);

    img{
        width: 100%;
        max-width: 650px;
    }
    h1{
        font-size: 50px;
        text-shadow: 0px 0px 15px rgb(203, 203, 203);
        text-align: center;
    }
    a:nth-of-type(1){
        background-color: #007BFF;
        color:white;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        width: 30%;
        padding: 15px 0px;
        border-radius: 15px;
        transition: 200ms;

        &:hover{
            transition: 200ms;
            background-color: #0e4da4;
        }
    }
}
.container5{
    background: linear-gradient(to bottom, var(--corPrincipal), var(--corPrincipalc));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    padding:30px 0px 30px 0px;
    position: relative;
    z-index: 5;
    h1{
        text-align: center;
        width: 50%;
        font-size: 45px;
        color:#1176d0;
    }

    .container-video{
        display: flex;
        justify-content: center; /* Centraliza o vídeo */
        align-items: center;
        width: 100%; /* Ajuste a largura conforme necessário */
        max-width: 100%;
        position: relative;

    iframe{
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* Garante a proporção correta */
        border: none;
        }
    }
    a:nth-of-type(1){
        background-color: #007BFF;
        color:white;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        margin-top:20px;
        width: 30%;
        padding: 15px 0px;
        border-radius: 15px;
        transition: 200ms;

        &:hover{
            transition: 200ms;
            background-color: #0e4da4;
        }
    }
    a:nth-of-type(2){
        background-color: #007BFF;
        color:white;
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        width: 30%;
        padding: 15px 0px;
        border-radius: 15px;
        transition: 200ms;

        &:hover{
            transition: 200ms;
            background-color: #0e4da4;
        }
    }

    img{
        width: 100%;
        max-width: 700px;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .container5{
        h1{
            width: 100%;
        }
    }
    .headline{
        img{
            width: 80%;
        }

        p:nth-of-type(1){
            text-align: center;
            font-size: 40px;
        }

        p:nth-of-type(2){
            width: 80%;
            font-size: 25px;
        }

        p:nth-of-type(3){
            font-size: 25px;
            width: 80%;
        }

        a:nth-of-type(1){
            width: 80%;
        }
        a:nth-of-type(2){
            width: 80%;
        }
    }

    .container2{
        .modulos-tabela {
            width: 100%;
        }

}
    .container3{
        img{
            width: 90%;
        }
    }
}

/* Estiliza o contêiner da tabela */
.tabela-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-x: hidden; /* Padrão: sem scroll */
}

/* Faz a tabela rolar na horizontal entre 320px e 425px */
@media screen and (max-width: 425px) and (min-width: 320px) {

    .container1{
        padding: 0;
    }
    .container5{
        h1{
            width: 90%;
            font-size: 25px !important;
        }
        a:nth-of-type(1){
            width: 100%;
        }
        a:nth-of-type(2){
            width: 100%;
        }
        }

    .container4{
        h1{
            font-size: 30px;
        }
        a:nth-of-type(1){
            width: 100%;
        }
    }
    .container2{
        a:nth-of-type(1){
            width: 100%;
        }
    }
    .headline{
        padding: 10px 5px 10px 5px;
        img{
            width: 100%;
        }

        p:nth-of-type(1){
            text-align: center;
            font-size: 25px;
        }

        p:nth-of-type(2){
            width: 80%;
            font-size: 18px;
        }

        p:nth-of-type(3){
            font-size: 14px;
            width: 80%;
        }

        a:nth-of-type(1){
            font-size: 15px;
            width: 80%;
        }
        a:nth-of-type(2){
            font-size: 15px;
            width: 80%;
        }
    }

    .tabela-container {
        display: flex;
        justify-content: start;
        align-items: start;
        overflow-x: auto; /* Permite rolagem horizontal */
        white-space: nowrap; /* Impede quebra de texto para manter a largura */
    }

    .modulos-tabela {
        min-height: 600px;
        width: 425px; /* Mantém a tabela grande o suficiente para forçar o scroll */
    }

}