@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 1;
}

html {
    scroll-behavior: smooth;
    scroll-padding: 75px;
    height: 100%;
}

a{
    text-decoration: none !important;
    cursor: pointer;
}

checkbox{
    margin: 0 !important;
}

button{
    cursor: pointer;
}

body{
    background: rgb(245, 245, 245);
}

nav{
    background: white;
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 10px 5px rgba(139, 134, 134, 0.075);
    position: fixed;
    top: 0;
    z-index: 2;
}

nav a{
    text-decoration: none;
    font-weight: 700;
    font-size: 22px;
    color: rgb(32, 32, 32);
}

.logo-nav{
    height: 80px;
}

.front-container{
    width: 80%;
    margin: 15vh auto;
}

.titulos{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.front-titulo{
    font-size: 48px;
    text-transform: uppercase;
    color: rgb(44, 44, 44);
    margin: 0;
}

.sub-titulo{
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgb(44, 44, 44);
    margin: 0;
}

.observacao{
    font-size: 12px;
    color: rgb(138, 138, 138);
    text-transform: uppercase;
    font-style: italic;
    margin: 0;
}

.card{
    width: 250px;
    height: 350px;
    background: rgb(224, 224, 224);
    color: rgb(133, 133, 133);
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 25px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.05);
    transition: .2s;
}

.card:hover{
    background: rgb(0, 81, 255);
    color: rgb(0, 41, 129);
    transform: scale(1.025);
    box-shadow: 0 5px 10px rgba(61, 28, 28, 0.3);
    transition: .2s;
}

.card-icon{
    font-size: 80px;
}

.unidade-link{
    text-decoration: none;
}

.unidades{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 50px;
    margin: 75px 0;
}

.bolsas-footer{
    background: #001530;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: relative;
    padding: 25px 0;
}   

.bolsas{
    width: 95%;
    height: 100px;
    margin-top: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.bolsas-footer::before{
    content: "OPÇÕES DE BOLSAS";
    background: rgb(255, 0, 0);
    color: #ffffff;
    font-size: 16px;
    border-radius: .5rem;
    padding: 5px 15px;
    font-weight: 600;
    position: absolute;
    letter-spacing: 1px;
    top: -15px;
    left: 5%;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.bolsas div{
    background: rgb(0, 44, 139);
    padding: 5px 15px;
    border-radius: 1rem;
    font-weight: 600;
    color: white;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.bolsa-atencao{
    position: relative;
}

.bolsa-atencao::after{
    content: "";
    color: white;
    background: red;
    width: 15px;
    height: 15px;
    border-radius: 2rem;
    position: absolute;
    top: -5px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.icone-atencao{
    background: red;
    width: 15px;
    height: 15px; 
    border-radius: 2rem;
}

.footer-aviso{
    font-size: 14px;
    font-weight: 600;
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.front-info{
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    color: rgb(128, 128, 128);
}


.atencao-info{
    color: #FF9900;
}

.link-titulo{
    text-transform: uppercase;
    font-size: 26px;
    color: rgb(19, 19, 19);
    margin: 0;
}

.links-importantes{
    margin: 100px 0;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
}

.link-importante{
    color: rgb(13, 13, 13);
    font-weight: 600;
    text-transform: uppercase;
    height: 50px;
    margin: 25px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    transition: .2s;
}

.link-importante:hover{
    color:rgb(172, 172, 172);
    transition: .2s;
}

.links-botoes{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
}

.link-icon{
    font-size: 28px;
}

.link-item{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
}

.vestibular{
    margin-top: 25px;
}

.vest-pre{
    font-size: 16px;
    font-weight: 500;
    color: rgb(99, 99, 99);
    margin: 0 !important;
}

.vest-titulo{
    text-transform: uppercase;
    color: rgb(44, 44, 44);
    margin: 0;
}

.vest-aviso{
    text-transform: uppercase;
    color: rgb(44, 44, 44);
    margin: 0;
    font-size: 1em;
}


.vest-selectbox{
    width: 100%;
    height: 60px;
    padding: 5px;
    margin-top: 25px;
    font-weight: 600;
    border-radius: .5rem;
    background: rgb(255, 255, 255);
    border: 0;
    color: rgb(121, 121, 121);
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
    transition: .2s;
    text-align: center;
}

.vest-selectbox option{
    border: 0;
}

.barra{
    width: 100%;
    height: 5px;
    border-radius: 1rem;
    background: rgb(212, 212, 212);
}

.vest-subtitulo{
    color: rgb(139, 139, 139);
    text-transform: uppercase;
}

.semvest-subtitulo{
    color: rgb(199, 199, 199);
    text-transform: uppercase;
}

.flex-vestheader{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 25px 0 0 0;
}

.vest-selectbox:hover{
    transform: scale(1.1);
}

.vest-selectbox:focus{
    padding: 5px;
    font-weight: 600;
    color: rgb(61, 61, 61);
    border-radius: .5rem .5rem 0 0;
}

.radio-vest{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
    margin-top: 25px;
}

.radio-elemento{
    width: 100%;
    height: 60px;
    font-size: 14px;
    background: white;
    color: rgb(61, 61, 61);
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: .5rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
    transition: .2s;
    text-align: center;
}

.input-elemento{
    cursor: pointer;
    margin: 0;
}

.radio-enem{
    margin: 0;
}

.radio-elemento:hover{
    color: rgb(61, 61, 61);
    transform: scale(1.1);
    transition: .2s;
}

.separador-vertical{
    width: 5px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(236, 236, 236);
    border-radius: 1rem;
    margin: 0 50px;
}

.select-vest{
    width: 100%;
}

.sem-vest{
    width: 100%;
}

.vestibulares{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
    margin: 50px 0 75px 0;
}

.btn{
    border: 0;
    width: 100%;
    height: 50px;
    color: white;
    background: rgb(0, 81, 255);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: .5rem;
    transition: .2s;
}

.btn:hover{
    background:rgb(0, 44, 139);
    color: rgb(255, 255, 255);
    transform: scale(1.02);
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
    transition: .2s;
}

.btn-cadastro{
    border: 0;
    width: 80%;
    height: 50px;
    color: white;
    background: rgb(0, 81, 255);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: .5rem;
    transition: .2s;
}

.btn-cadastro:hover{
    background:rgb(0, 44, 139);
    color: rgb(255, 255, 255);
    transform: scale(1.02);
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
    transition: .2s;
}

.btn-spacer{
    margin-top: 50px;
}

.voltar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-voltar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: rgb(138, 138, 138);
}

.btn-voltar:hover{
    color: rgb(59, 59, 59);
}

.voltar-icon{
    font-size: 20px;
}

.btn-cpf{
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cpf a{
    text-decoration: none;
    color: white;
}

.cpf-acoes{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    color: white;
}

.bolsa-input{
    width: 100%;
    height: 50px;
    border: 0;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
    border-radius: .5rem;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: .2s;
}

.bolsa-input:focus{
    outline: none;
    transform: scale(1.05);
    box-shadow: 0px 8px 10px rgba(0,0,0,.1);
    transition: .2s;
}

.cpf-form{
    margin-top: 25px;
}

.cpf-info{
    width: 100%;
    margin: 50px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
    font-size: 14px;
    font-weight: 500;
}

.mais-info{
    text-decoration: none;
    color: rgb(59, 59, 59);
}

.mais-info:hover{
    color: rgba(0,81,255,1);
}

.cadastro-acoes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    color: white;
    padding: 50px;
}

.aviso-termos{
    font-size: 14px;
    font-weight: 500;
    color: rgb(46, 46, 46);
}

.aviso-termos a{
    text-decoration: none;
    color: rgb(0, 81, 255);
}

.aviso-termos a:hover{
    text-decoration: underline;
}

.cadastro-form{
    margin-top: 25px;
}

.input-titulo{
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
    color: rgb(44, 44, 44);
}

.bolsa-form{
    width: 100%;
    height: 50px;
    border: 0; 
    border-radius: .5rem;
    font-size: 16px;
    font-weight: 500;
    padding: 0 15px;
    background:rgb(240, 240, 240);
}

.bolsa-form:focus{
    outline: none;
}

.bolsa-form:read-only{
    background: rgb(240, 240, 240);
}

.incricao{
    grid-area: incricao;
}

.nome{
    grid-area: nome;
}

.cpf{
    grid-area: cpf;
}

.rg{
    grid-area: rg;
}

.curso{
    grid-area: curso;
}

.form-titulo{
    grid-area: titulo;
}

.nota-enem{
    grid-area: nota;
}

.ano-enem{
    grid-area: ano;
}

.cadastro-vestibular{
    background: white;
    height: 100%;
    box-shadow: 0px 5px 5px rgba(0,0,0,.2);
    border-radius: .5rem;
    margin-bottom: 50px;
}

.dados-pessoais{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "titulo titulo"
    "incricao nome"
    "cpf rg"
    "nota ano"
    "curso curso";
    gap: 15px;
    background: white;
    position: relative;
    margin: 25px 0;
    padding: 80px 50px 0 50px;
}

.dados-pessoais::before{
    content: "Dados pessoais";
    position: absolute;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: rgb(36, 36, 36);
    padding: 5px 25px;
    font-size: 16px;
    border-radius: .5rem;
    top: 25px;
    left: -15px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.familiares-container{
    margin: 50px 0 0 0;
    padding: 50px 50px 0 50px;
    position: relative;
}

.familiares-container::before{
    content: "Família";
    position: absolute;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: rgb(36, 36, 36);
    padding: 5px 25px;
    font-size: 16px;
    border-radius: .5rem;
    top: 15px;
    left: -15px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.familiares{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.btn-familiar{
    border: 0;
    background: white;
    color: rgb(29, 29, 29);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: .5rem;
}

.btn-familiar:hover{
    text-decoration: underline;
}

.familiar-checkbox{
    all: unset !important;
}

.check-click{
    margin: 0 !important;
}

.check-label{
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
}

.familiar-check{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgb(29, 29, 29);
}

.familiar-checkbox{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    border-radius: .5rem;
    color: rgb(29, 29, 29);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.familiar-check:hover, .familiar-check label:hover{
    color: rgb(156, 156, 156);
    cursor: pointer;
}

.acoes-familiar a, .limpar-familiares{
    text-decoration: none;
    color: rgb(19, 19, 19);
    font-weight: 600;
    text-transform: uppercase;
}

.adicionar-familiar{
    all: unset;
}

.limpar-familiares, .adicionar-familiar{
    display: flex;
    align-items: center;
    gap: 10px;
}

.adicionar-familiar:hover{
    color: rgb(0, 192, 0);
    cursor: pointer;
}

.limpar-familiares{
    color: rgb(255, 67, 67);
}

.limpar-familiares:hover{
    color: rgb(255, 67, 67);
    transform: scale(1.1);
    cursor: pointer;
    transition: .2s;
}

.familiares-opcoes{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;

}

.acoes-familiar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.separador-vertical-mini{
    width: 3px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(236, 236, 236);
    border-radius: 1rem;
    margin: 0 25px;
}

.separador-vertical-mini-unidade{
    width: 3px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(236, 236, 236);
    border-radius: 1rem;
    margin: 0 25px;
}

.limpar-section{
    display: flex;
    align-items: center;
    justify-content: center;
}


.form-subtitulo{
    color: rgb(49, 49, 49);
    text-transform: uppercase;
}

.form-subtitulo-secundary{
    color: rgb(199, 199, 199);
    text-transform: uppercase;
}

.nomes-familiares{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 25px;
}

.outros-dados-container{
    padding: 50px 50px 0 50px;
    position: relative;
}

.outros-dados-container::before{
    content: "Renda & Bolsa";
    position: absolute;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: rgb(36, 36, 36);
    padding: 5px 25px;
    font-size: 16px;
    border-radius: .5rem;
    top: 15px;
    left: -15px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1); 
}

.outros-dados{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin: 25px 0;
}

.outros-dados-selectbox{
    width: 100%;
    height: 50px;
    padding: 5px;
    font-size: 16px;
    margin-top: 10px;
    font-weight: 500;
    border-radius: .5rem;
    background: rgb(240, 240, 240);
    border: 0;
    color: rgb(121, 121, 121);
    transition: .2s;
}

.outros-dados-selectbox option{
    border: 0;
}

.email{
    grid-area: email;
}

.telefone{
    grid-area: telefone;
}

.celular{
    grid-area: celular;
}


.qrcode-front {
    width: 250px;
    margin: 0 auto;
}

.qrcode-front > img {
    width: 250px;
    object-fit: cover;
}


.dados-pessoais-enem{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "nome nome"
    "cpf rg"
    "email email"
    "telefone celular"
    "endereco endereco"
    "curso curso"
    "instituicao semestre"
    "nota ano";
    gap: 15px;
    background: white;
    position: relative;
    margin: 25px 0;
    padding: 80px 50px 0 50px;
}

.dados-pessoais-enem::before{
    content: "Dados pessoais";
    position: absolute;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: rgb(36, 36, 36);
    padding: 5px 25px;
    font-size: 16px;
    border-radius: .5rem;
    top: 25px;
    left: -15px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.container-renda{
    padding: 50px;
    position: relative;
}

.container-renda::before{
    content: "Renda";
    position: absolute;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: rgb(36, 36, 36);
    padding: 5px 25px;
    font-size: 16px;
    border-radius: .5rem;
    top: 15px;
    left: -15px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1); 
}

.curso-selectbox{
    width: 100%;
    height: 50px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    border-radius: .5rem;
    background: rgb(240, 240, 240);
    border: 0;
    color: rgb(121, 121, 121);
}

.curso-selectbox option{
    border: 0;
}

.semestre{
    grid-area: semestre;
}

.instituicao{
    grid-area: instituicao;
}

.endereco{
    grid-area: endereco;
}

.dados-pessoais-transferencia{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "nome nome"
    "cpf rg"
    "email email"
    "telefone celular"
    "endereco endereco"
    "curso curso"
    "instituicao semestre"
    "nota ano";
    gap: 15px;
    background: white;
    position: relative;
    margin: 25px 0;
    padding: 80px 50px 0 50px;
}

.dados-pessoais-transferencia::before{
    content: "Dados pessoais";
    position: absolute;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-weight: 600;
    background: rgb(36, 36, 36);
    padding: 5px 25px;
    font-size: 16px;
    border-radius: .5rem;
    top: 25px;
    left: -15px;
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
}

.final-container{
    width: 60%;
    /*height: 100vh;*/
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.final-card{
    background: white;
    border-radius: .5rem;
    display: grid;
    grid-template-columns: .55fr 1fr;
    grid-template-areas: 
    "icone info";
    box-shadow: 0px 5px 5px rgba(0,0,0,.1);
    overflow: hidden;
}

.final-header{
    height: 100%;
    width: 100%;
    border-radius: .5rem 0 0 .5rem;
    grid-area: icone;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    color: rgb(255, 255, 255);
    background: rgb(0, 255, 34);
    background: linear-gradient(135deg, rgba(0,255,34,1) 0%,rgba(0,214,7,1) 100%);
    color: rgb(0, 145, 19);
    padding: 25px;
}

.big-icon{
    font-size: 12em;
}

.final-titulo{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 38px;
    color: rgb(0, 187, 25);
}

.final-barra{
    width: 100%;
    height: 5px;
    border-radius: 2rem;
    background: rgb(236, 236, 236);
    margin-top: 25px;
}

.final-nome{
    color: rgb(37, 37, 37);
    font-size: 18px;
    font-weight: 600;
}

.final-instrucao{
    font-size: 14px;
    font-weight: 500;
    color: rgb(37, 37, 37);
}

.final-info{
    grid-area: info;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    padding: 25px;
}

.final-acoes{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    color: white;
    margin: 25px 0;
}

.download-btn{
    width: 100%;
    text-align: center;
    font-size: 12px;
}

.btn-sair{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: rgb(141, 141, 141);
    transition: .2s;
}

.btn-sair:hover{
    transform: scale(1.1);
    color: rgb(255, 67, 67);
    transition: .2s;
}

.final-textos{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}

.erro-header{
    height: 100%;
    width: 100%;
    border-radius: .5rem 0 0 .5rem;
    grid-area: icone;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    color: rgb(255, 255, 255);
    background: rgb(255, 0, 0);
    background: linear-gradient(135deg, rgba(255,0,4,1) 0%,rgba(188,0,3,1) 100%);
    color: rgb(80, 0, 0);
    padding: 25px;
}

.erro-titulo{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 38px;
    color: rgb(255, 0, 0);
}

/* @media (max-height: 650px){
    .final-container{
        margin: 15vh auto;
    }
} */

.transferencia-container {
    margin-top: 100px;
}

.transferencia-grid {

    display: grid;
}

.transferencia-grid {

    max-width: 92vw;
    margin: 0 auto;
}

.transferencia-grid-topo {
    grid-area: topo;
    text-align: center;
    text-transform: uppercase;
}

.transferencia-grid-mensagem {
    text-align: center;
    font-size: 2em;
    grid-area: conteudo;
}

.transferencia-grid-bt {
    text-align: center;
    grid-area: bt;
}

.transferencia-grid-template {
    grid-template-areas: 
    "topo"
    "conteudo"
    "bt"

}

.transferencia-bt-interno {
    padding-top: 25px;
}


@media (max-width: 1021px){

    .qrcode-front {
        width: 200px;
        padding: 10px;
        margin: 0 auto;
    }

    .qrcode-front > img {
        width: 200px;
        object-fit: cover;
    }
    
    .radio-elemento{
        font-size: 11px;
    }

    .vestibulares{
        margin: 50px 0;
    }

    .big-icon{
        font-size: 9em;
        transition: .2s;
    }

    .final-titulo{
        font-size: 32px;
    }

    .final-instrucao{
        font-size: 12px;
    }

    .download-btn{
        font-size: 10px;
    }

    .erro-titulo{
        font-size: 32px;
    }
}

@media (max-width: 900px){

    .qrcode-front {
        width: 200px;
        padding: 10px;
        margin: 0 auto;
    }

    .qrcode-front > img {
        width: 200px;
        object-fit: cover;
    }

    .titulos{
        gap: 25px;
    }

    .front-titulo{
        font-size: 32px;
    }

    .sub-titulo{
        font-size: 14px;
    }

    .unidades{
        flex-wrap: wrap;
        margin: 50px;
    }

    .titulos{
        gap: 15px;
    }

    .vestibulares{
        flex-wrap: wrap;
    }

    .separador-vertical{
        width: 100%;
        height: 5px;
        margin: 25px 0;
    }

    .radio-elemento{
        font-size: 14px;
    }

    .btn{
        font-size: 12px;
    }

    .btn-voltar, .btn-sair{
        font-size: 12px;
    }

    .voltar-icon{
        font-size: 16px;
    }

    .cpf-acoes{
        flex-wrap: wrap;
        gap: 25px;
    }

    .atencao-info{
        font-size: 12px;
    }

    .front-info{
        font-size: 12px;
        text-align: center;
    } 
    
    .cpf-info{
        align-items: center;
    }

    .form-subtitulo{
        font-size: 14px;
    }

    .limpar-familiares{
        font-size: 14px;
        margin-bottom: 25px;
    }

    .aviso-termos{
        font-size: 12px;
        text-align: center;
    }

    .outros-dados-container{
        padding: 50px 25px 25px 25px;
    }

    .familiares-opcoes{
        flex-wrap: wrap;
        gap: 25px;
    }

    .familiares-container{
        padding: 50px 25px 25px 25px;
    }

    .dados-pessoais{
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "incricao incricao"
        "nome nome"
        "cpf rg"
        "nota ano"
        "curso curso";
        gap: 10px;
        padding: 80px 25px 25px 25px;
    }

    .dados-pessoais-transferencia{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "nome nome"
        "cpf rg"
        "email email"
        "telefone celular"
        "curso curso"
        "instituicao instituicao"
        "semestre semestre"
        "nota ano";
        gap: 10px;
    }

    .familiares-opcoes{
        font-size: 13px;
    }

    .familiar-checkbox{
        font-size: 13px;
    }

    .form-subtitulo-secundary{
        font-size: 14px;
    }

    .input-titulo{
        font-size: 14px;
    }

    .bolsa-form{
        width: 100%;
        height: 40px;
        font-size: 14px;
    }

    .container-renda{
        padding: 50px 25px 25px 25px;
    }
    
    .curso-selectbox{
        height: 40px;
        font-size: 14px;
    }

    .dados-pessoais-transferencia{
        padding: 50px 25px 25px 25px;
    }

    .final-card{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "icone" 
        "info";
    }

    .final-header{
        border-radius: .5rem .5rem 0 0 ;
    }

    .final-info{
        gap: 25px;
    }

    .final-container{
        margin: 15vh auto;
        width: 85%;
        height: 100%;
    }

    .final-titulo{
        font-size: 38px;
    }

    .final-instrucao{
        font-size: 14px;
    }

    .final-barra{
        margin: 0;
    }

    .final-textos{
        margin: 0;
    }

    .big-icon{
        font-size: 7em;
    }

    .links-importantes{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 25px;
    }
    
    .link-importante{
        align-items: center;
        justify-content: flex-start;
    }

    .separador-vertical-mini-unidade{
        width: 80%;
        height: 3px;
        visibility: hidden;
    }

    .erro-header{
        border-radius: .5rem .5rem 0 0 ;
    }

    .erro-titulo{
        font-size: 38px;
    }

    .cadastro-acoes{
        padding: 25px 25px 50px 25px;
    }

}

@media (max-width: 630px){

    .qrcode-front {
        width: 100%;
        padding: 10px;
        margin: 0 auto;
    }

    .qrcode-front > img {
        width: 100%;
        object-fit: cover;
    }


    nav{
        height: 65px;
    }

    html {
        scroll-padding: 65px;
    }

    .logo-nav{
        height: 65px;
    }

    .front-container{
        width: 85%;
        margin: 15vh auto;
    }

    .final-container{
        width: 85%;
        margin: 15vh auto;
    }

    .bolsas{
        justify-content: flex-start;
        overflow-x: scroll;
    }

    .links-botoes{
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0px;
    }

    .link-importante{
        margin: 12.5px 0;
    }

    .titulos{
        gap: 10px;
    }

    .card{
        width: 225px;
        height: 300px;
        font-size: 18px;
        flex-direction: column;
        gap: 25px;
        transition: .2s;
    }
    
    .card-icon{
        font-size: 60px;
    }

    .bolsas-footer::before{
        font-size: 12px;
        padding: 5px 15px;
    }

    .radio-vest{
        flex-direction: column;
    }

    .radio-elemento{
        font-size: 12px;
    }

    .footer-aviso{
        font-size: 10px;
        font-weight: 400;
    }

    .icone-atencao{
        background: red;
        width: 10px;
        height: 10px; 
        border-radius: 2rem;
    }

    .btn{
        font-size: 11px;
    }
    
    .outros-dados{
        flex-wrap: wrap;
        gap: 5px;
    }

    .outros-dados-container{
        padding: 50px 15px 15px 15px;
    }

    .familiares-container{
        padding: 50px 15px 15px 15px;
    }

    .dados-pessoais{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "incricao"
        "nome"
        "cpf"
        "rg"
        "nota"
        "ano"
        "curso";
        gap: 10px;
        padding: 80px 15px 0 15px;
    }

    .dados-pessoais-enem{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "nome"
        "cpf"
        "rg"
        "email"
        "telefone"
        "celular"
        "endereco"
        "curso"
        "instituicao" 
        "semestre"
        "nota"
        "ano";
        gap: 10px;
        padding: 80px 15px 0 15px;
    }

    .dados-pessoais-transferencia{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "nome"
        "cpf"
        "rg"
        "email"
        "telefone"
        "celular"
        "curso"
        "instituicao"
        "semestre"
        "nota"
        "ano";
        gap: 10px;
        padding: 80px 15px 0 15px;
        font-size: 12px;
    }

    .dados-pessoais-transferencia::before{
        padding: 5px 12px;
        font-size: 14px;
    }

    .dados-pessoais::before{
        padding: 5px 12px;
        font-size: 14px;
    }

    .familiares-container::before{
        padding: 5px 12px;
        font-size: 14px;
    }

    .outros-dados-container::before{
        padding: 5px 12px;
        font-size: 14px;
    }

    .container-renda::before{
        padding: 5px 12px;
        font-size: 14px; 
    }

    .dados-pessoais-enem::before{
        padding: 5px 12px;
        font-size: 14px; 
    }

    .separador-vertical-mini{
        width: 80%;
        height: 3px;
    }

    .familiares-opcoes{
        flex-direction: column;
    }

    .form-subtitulo-secundary{
        font-size: 12px;
    }

    .container-renda{
        padding: 50px 15px 15px 15px;
    }

        
    .curso-selectbox{
        font-size: 12px;
    }

    .big-icon{
        font-size: 5em;
    }

    .final-titulo{
        font-size: 24px;
    }

    .final-nome{
        font-size: 14px;
    }

    .final-instrucao{
        font-size: 12px;
    }

    .erro-titulo{
        font-size: 24px;
    }

    .cadastro-acoes{
        padding: 15px 15px 50px 15px;
    }


}