:root{
    --bg-color-grad-1: #171649;
    --bg-color-grad-2: #004aad;
    --bg-color-grad-3: #f5f5f5;
    --bg-color-grad-4: silver;   
    --bg-color-grad-5: #38b6ff;
    
    --font-primaria: #f5f5f5;
    --font-secundaria: #182469;
    --font-terciaria: #bb0b0b;
}

*{
    font-family: 'Montserrat', sans-serif !important; 
    line-height: 1.2rem !important;
}

.webpage {
    background-color: var(--bg-color-grad-4); 
    text-align: left;
    justify-content: center;
}

.bloco-topo{
    display: flex;
    justify-content: center;
    color:var(--font-primaria);
    height: auto !important;
    background-image: url(/assets/img/bkg/top_bkg_1400.webp);
    background-repeat: repeat;
    background-size: 100vw;
}

.bloco-topo img{
    width: 90vw !important;
    height: auto;
}

.bloco-1{
    align-items: center;
    background: var(--bg-color-grad-3);
    color:var(--font-secundaria);
    height: auto !important;
    background-image: url(/assets/img/textures/texture_1400.webp);
    background-repeat: repeat;
    background-size: 100vw;
}

.texto-1{
    font-size: 1.2rem;
    text-align: center;
}

.texto-2{
    letter-spacing: 1px !important; 
    text-align: left !important;
}



.bloco-2{
    align-items: center;
    background: var(--bg-color-grad-3);
    color:var(--font-secundaria);
    height: auto !important;
    background-image: url(/assets/img/textures/texture_1400.webp);
    background-repeat: repeat;
    background-size: 100vw;
}

.card-header{
    color: var(--font-terciaria);
    font-size: 1.2rem;
    text-align: center;
    justify-content: center;
}

.card-body{
    background: linear-gradient(90deg, var(--bg-color-grad-1), var(--bg-color-grad-2));
    color: var(--font-primaria);
}

.botao-inscricao{
    align-self: center;
    background-color: var(--font-terciaria);
    color: var(--font-primaria);
    box-shadow: 0px 6px 10px rgba(29,29,29);
}

.texto-5{
    font-size: 0.7rem;
}

.texto-7{
    text-align: left;
}
.quebra-imagem-1{
    width: 100vw;
    display: flex;
}

.bloco-3{
    background: var(--bg-color-grad-3);
    color:var(--font-secundaria);
    height: auto !important;
    background-image: url(/assets/img/textures/texture_1400.webp);
    background-repeat: repeat;
    background-size: 100vw;
}

.texto-8{
    
}

.bloco-4{
    background: linear-gradient(90deg, var(--bg-color-grad-1), var(--bg-color-grad-2));
    color:  var(--font-primaria);
    text-align: center;
}

.bloco-4 p{
    line-height: 1.2rem;
}

.bloco-4 svg{
    color: var(--bg-color-grad-5);
    width: 32px !important;
    height: 32px !important;
}

.bloco-5{
    background: var(--bg-color-grad-3);
    color:var(--font-secundaria);
    font-size: 1.2rem;
    line-height: 1.4rem !important;
    height: auto !important;
    background-image: url(/assets/img/textures/texture_1400.webp);
    background-repeat: repeat;
    background-size: 100vw;
}

.texto-13{
    line-height: 1.5rem !important;
}

.texto-14, .texto-15, .texto-16, .texto-17{
    font-size: 1.2rem;
    line-height: 1.4rem !important;
    text-align: left !important;
}

.bloco-5 a{
    text-decoration: none;
}

.card-header-2{
    color: var(--font-terciaria);
    font-size: 1.2rem;
    text-align: center;
    justify-content: center;
}

.card-header-2 p{
    border: 0.2rem solid var(--bg-color-grad-5);
    border-radius: 2rem;
    padding: 0.5rem;
}

.texto-18{
    text-align: center;
}

.bloco-6{
    color:var(--font-primaria);
    text-align: center !important;
    line-height: 1.2rem;
    vertical-align: middle;

    background-image: url(/assets/img/bkg/top_bkg_1400.webp);
    background-repeat: repeat;
    background-size: 100vw;
}

.texto-19 svg{
    margin: auto;
    height: 1rem !important;
    width: auto !important;
}

.texto-20{
    font-size: 0.7rem;
}

.bloco-1, .bloco-2, .bloco-3, .bloco-4, .bloco-5, .bloco-6 {
    margin: auto;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    body{
        background-color: var(--bg-color-grad-4);
    }

    .webpage{
        margin: auto; 
    }

    .texto-1{
        margin-top: 2rem !important;
        font-size: 1.5rem !important;
    }

    .texto-2{
        font-size: 1.4rem !important;
        text-align: center;
        justify-content: center;
    }

    .texto-3{
        font-size: 1.4rem !important;
        justify-content: center;
    }

    .bloco-wide{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.5rem;
    }
    
    .bloco-texto-wide-1{
        max-width: 50%;
        font-size: 1.2rem;
        padding: 1rem !important;
    }
   
    .texto-7{
        margin-top: 1.5rem !important;
    }

    .texto-8{
        font-size: 1.6rem !important;
        text-align: center;
        justify-content: center;
        line-height: 2rem !important;
    }

    .bloco-4{
        font-size: 1.4rem !important;
        line-height: 1.8rem !important;
        padding: 2rem !important;
    }

    .bloco-5{
        font-size: 1.4rem !important;
        line-height: 1.8rem !important;
        padding: 2rem !important;
    }

    .bloco-5 p{
        font-size: 1.4rem !important;
        line-height: 1.8rem !important;
    }

    .card-header-2{
        color: var(--font-terciaria);
        font-size: 1.2rem;
        text-align: center;
        justify-content: center;
        max-width: 40vw !important;
        margin: auto;
    }
    
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

    body{
        background-color: var(--bg-color-grad-4);
    }

    .webpage{
        max-width: 75vw !important;
        margin: auto; 
    }

    .bloco-wide{
        padding: 0.8rem !important;
    }

    .quebra-imagem-1{
        max-width: 75vw !important;
    }

}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .webpage{
        max-width: 65vw !important;
        margin: auto; 
    }

    .bloco-wide{
        padding: 0.8rem !important;
    }

    .quebra-imagem-1{
        max-width: 65vw !important;
    }

    .card-header-2{
        max-width: 30vw !important;
    }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .webpage{
        max-width: 50vw !important;
        margin: auto; 
    }

    .quebra-imagem-1{
        max-width: 50vw !important;
    }

    .card-header-2{
        max-width: 25vw !important;
    }
}

/* // XX-Large devices (Wider desktops, 1680px and up) */
@media (min-width: 1680px) { 
    .webpage{
        max-width: 50vw !important;
        margin: auto; 
    }

    .quebra-imagem-1{
        max-width: 50vw !important;
    }

    .card-header-2{
        max-width: 25vw !important;
    }
}