@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');

:root {
    --font-main: 'Poppins', sans-serif;
    --color-primary: #1A1A1A;
    --color-secondary: #EA4900;
    --color-tertiary: #969696;
    --color-white: #FFF;
}


.c-black {
    color: var(--color-primary) !important;
}

.c-orange {
    color: var(--color-secondary) !important;
}

.c-gray {
    color: var(--color-tertiary) !important;
}

.c-white {
    color: var(--color-white) !important;
}

.c-link {
    color: #00A3FF;
}

.bg-black {
    background-color: var(--color-primary) !important;
}

.bg-orange {
    background-color: var(--color-secondary) !important;
}

.bg-gray {
    background-color: var(--color-tertiary) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-light {
    background-color: #E2E4F2 !important;
}

.fill-orange {
    fill: var(--color-secondary);
}

.form-control {
    padding: 0.75rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500 !important;
}

.text-nowrap {
    text-wrap: nowrap !important;
}

body {
    font-family: var(--font-main);
    text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
    font-family: var(--font-main);
}

h1 {
    font-size: 47.8px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -1px;
    text-transform: uppercase;
}

h2 {
    font-size: 28.5px;
    font-weight: 600;
    line-height: 135%;
    text-transform: uppercase;
}

p {
    font-size: 19px;
    font-weight: 500;
    line-height: 145%;
    text-transform: uppercase;
}

.font-field {
    font-size: 22px;
    font-weight: 600;
    line-height: 175%;
    letter-spacing: -0.44px;
}

button.font-field {
    font-size: 22px;
    font-weight: 600;
    line-height: 175%;
    letter-spacing: -0.44px;
}

h1.component {
    font-size: 24.5px;
    font-weight: 600;
}

h2.component {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.font-field-component {
    font-size: 18px;
    font-weight: 600;
    line-height: 126.463%;
}

p.component {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 135%;
    text-transform: uppercase;
}

.b-white {
    border-color: var(--color-white) !important;
}

button.component {
    padding: 14px;
}

.btn-filled-blue svg,
.btn-filled svg,
.btn-outline svg,
.btn-noline svg {
    width: 30px;
}

.input {
    border-radius: 10px;
    border: 1px solid var(--color-tertiary);
    padding: 18px 8px;
}

.modal-line {
    height: 1px;
    background-color: var(--color-tertiary);
    width: 150px;
}

.aluno__content {
    display: flex;
    transition: .5s;
}

.form-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.form-row > * {
    width: calc(50% - 0.5rem);
}

.btn-filled {
    font-family: var(--font-main);
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
    gap: 10px;
    transition: .5s;
    background-color: var(--color-secondary);
    fill: var(--color-white);
    color: var(--color-white);
    border: 1.5px solid var(--color-secondary);
    text-transform: uppercase;
}

.btn-filled-blue {
    font-family: var(--font-main);
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
    gap: 10px;
    transition: .5s;
    background-color: #1769D2;
    fill: var(--color-white);
    color: var(--color-white);
    border: 1.5px solid #1769D2;
    text-transform: uppercase;
}

.btn-filled-blue:hover,
.btn-filled:hover {
    border-color: #FF793C;;
    background-color: #FF793C;;
    color: var(--color-white);
}

.btn-outline {
    font-family: var(--font-main);
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
    gap: 10px;
    transition: .5s;
    background-color: transparent;
    fill: var(--color-primary);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}

.btn-outline:hover {
    border-color: var(--color-tertiary);
    color: var(--color-tertiary);
}

.btn-noline {
    font-family: var(--font-main);
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    gap: 10px;
    transition: .5s;
    color: var(--color-tertiary);
    padding: 0 !important;
    background-color: transparent;
}

.btn-noline:hover {
    color: var(--color-secondary);
}

.btn-noline span::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width .4s;
}

.btn-noline span:hover::after {
    width: 100%;
    transition: width .4s;
}

.btn-fill-black {
    fill: var(--color-primary);
    color: var(--color-primary);
}

.btn-fill-black:hover {
    fill: var(--color-secondary);
    color: var(--color-secondary);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    transition: .5s;
    cursor: pointer;
}

.component-big {
    padding: 15px 0px;
}

.container-big {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.component-small {
    padding: 40px 0px;
}

.component-p {
    padding: 25px 0px
}

.display-gg,
.display-g,
.display-m,
.display-p {
    display: none;
}

.btn-scroll {
    padding: 12px 17px;
    height: fit-content;
    background-color: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.5s;
}

.btn-scroll:hover {
    background-color: #FF793B;
}

.container-cards {
    display: flex;
    gap: 19px;
    white-space: nowrap;
    overflow-x: hidden;
    transition: scroll-left 0.3s ease;
    padding: 20px 0
}

.font-bold {
    font-weight: 700;
}

.card {
    min-width: 300px;
    width: 300px;
    border: none;
    border-radius: 10px;
    position: relative;
    white-space: normal;
    transition: .5s;
    justify-content: space-between;
}

.card:hover {
    transform: translateY(-20px);
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.card__certificado {
    position: absolute;
    border-radius: 5px;
    background: #FFD100;
    padding: 8px;
    top: 8px;
    left: 8px;
    align-items: center;
}

.card__number {
    position: absolute;
    border-radius: 5px;
    padding: 8px;
    top: 8px;
    right: 8px;
}

.card__img {
    border-radius: 10px 10px 0px 0px;
    height: 150px;
    object-fit: cover;
}

.card__body {
    padding-left: 1rem;
    padding-right: 1rem;
}

.card__flag {
    padding: 2.5px 5px;
    border-radius: 3px;
}

.layout-container {
    display: flex;
    gap: 60px;
    flex-direction: column;
    align-items: stretch;
}

.inner-content-container {
    display: flex;
    gap: 30px;
    max-width: 50%;
    flex-direction: column;
}

.row-white-container {
    display: flex;
    gap: 60px;
    padding: 60px 60px;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
}

.column-white-container {
    display: flex;
    gap: 20px;
    padding: 60px 60px;
    flex-direction: column;
    border-radius: 10px;
}

.p-60-component {
    padding: 60px 0;
}

.spinner-border {
    position: fixed;
    z-index: 9999999;
    top: 45%;
}

.zindex-backdrop {
    z-index: 999999;
}

.gap-1.gap-sm-2.d-flex.flex-xl-row.flex-sm-column.flex-row.col-12.col-sm-6.justify-content-around.flexRevH {
    flex-direction: column !important;
}

.mw670{
    max-width: 670px;
}

.mw420{
    max-width: 426px;
}

div#offcanvasNavbar {
    width: 60%;
}

.tituloEmbasamentoLegal {
    background: #EA4900;
    border-radius: 10px;
    padding: 10px;
    color: #FFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 32px;
    text-align: center;
}

.descricaoEmbasamentoLegal {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.portariaEmbasamentoLegal {
    color: #333;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 32px;
}

.destaquePortaria {
    color: #EA4900;
    font-weight: 700;
}

.orgaoDestaque {
    color: #EA4900;
    font-size: 26px;
    font-weight: 700;
    line-height: 26px;
}

.embasamentoLegal {
    margin-bottom: 32px;
}

.orgaosEmbasamentoLegal {
    background: #E0E0E0;
    padding: 15px;
    border: none;
    border-radius: 10px;
}

.orgaoBold {
    color: #333;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}

.urlEmbasamento {
    color: #333;
    font-size: 26px;
    font-weight: 400;
    line-height: 30px;
    cursor: pointer;
    text-transform: lowercase;
}

.btn-whatsapp-pulse {
	background: #25d366;
	color: white;
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0;
	height: 0;
	padding: 35px;
	text-decoration: none;
	border-radius: 50%;
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
	}
}

.btn-whatsapp-pulse-border {
	bottom: 40px;
	right: 40px;
	animation-play-state: paused;
}

.btn-whatsapp-pulse-border::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	padding: 25px;
	border: 5px solid #25d366;
	opacity: 0.75;
	animation-name: pulse-border;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.titleProgressao {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-top: 25px;
}

.d-flex.flex-wrap.gap-1.card__body {
    justify-content: space-between;
}

h2.c-black.component.card__body {
    text-align: center;
}

.bg-orange.header__head {
    display: none !important;
}
button#btnLogarModal {
    margin-left: auto;
}
div.d-flex.justify-content-between.align-items-center.col-12 button#cta-criar {
    display: none;
}
@keyframes pulse-border {
	0% {
		padding: 25px;
		opacity: 0.75;
	}
	75% {
		padding: 50px;
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.titleValorAcademico {
    text-align: center;
    color: #fff;
    background: #EA4900;
    padding: 12px;
    font-weight: 600;
    font-size: 24px;
    border-radius: 14px;
}


@media (min-width: 1400px) {
    .display-gg {
        display: flex;
    }
}

@media (max-width: 1399px) and (min-width: 1000px) {
    .display-g {
        display: flex;
    }
}


@media (max-width: 999px) and (min-width: 600px) {
    .display-m {
        display: flex;
    }

    .mw670 {
        max-width: 467px;
    }
}

@media (max-width: 1400px) {
    .component-big {
        padding: 40px 0;
    }

    .container-big {
        gap: 20px;
    }

    .btn-filled-blue,
    .btn-filled,
    .btn-outline,
    .btn-noline {
        gap: 7px;
    }

    .btn-filled-blue svg,
    .btn-filled svg,
    .btn-outline svg,
    .btn-noline svg {
        width: 26px;
    }

    h1 {
        font-size: 41px;
        line-height: 110%;
        letter-spacing: -0.8px;
    }

    h2 {
        font-size: 22px;
        line-height: 130%;
    }

    p {
        font-size: 18px;
        line-height: 130%;
    }
    button.font-field {
        font-size: 18px;
        letter-spacing: -0.36px;
    }

    .font-field {
        font-size: 18px;
        letter-spacing: -0.36px;
    }

    h1.component {
        font-size: 19.5px;
        line-height: 125%;
    }

    h2.component {
        font-size: 15.5px;
        line-height: 135%;
        text-transform: uppercase;
    }

    .font-field-component {
        font-size: 15px;
        line-height: 126.463%;
    }

    p.component {
        font-size: 8.5px;
        line-height: 135%;
    }

    .btn-filled-blue,
    .btn-filled,
    .btn-outline {
        padding: 14px 20px !important;
    }

    .card {
        min-width: 263px;
        width: 263px;
    }

    .svg-cronometro {
        width: 43.816px;
        height: 51.119px;
    }

    .row-white-container {
        padding: 30px 30px;
        gap: 10px;
    }

    .p-60-component {
        padding: 30px 0;
    }

    .layout-container {
        gap: 30px;
    }
}

@media (max-width: 1024px) {
    .gap-1.gap-sm-2.d-flex.flex-xl-row.flex-sm-column.flex-row.col-12.col-sm-6.justify-content-around.flexRevH {
        flex-direction: column-reverse !important;
    }
    
    .mw670 {
        max-width: 467px;
    }
    h1 {
        font-size: 43px;
    }
}

@media (max-width: 1000px) {
    .form-row {
        flex-direction: column;
    }

    .form-row > * {
        width: 100%;
    }

    .component-big {
        padding: 30px 0px;
    }

    .container-big {
        gap: 15px;
    }

    .container {
        max-width: 100% !important;
        padding: 0 30px;
    }

    .btn-filled-blue svg,
    .btn-filled svg,
    .btn-outline svg,
    .btn-noline svg {
        width: 22px;
    }

    .btn-filled-blue,
    .btn-filled,
    .btn-outline,
    .btn-noline {
        gap: 5px;
    }

    h1 {
        font-size: 30px;
        line-height: 120%;
        letter-spacing: -0.6px;
    }

    h2 {
        font-size: 18px;
        line-height: 125%;
    }

    p {
        font-size: 12.5px;
        font-weight: 500;
        line-height: 140%;
    }

    button.font-field {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 175%;
        letter-spacing: -0.29px;
    }

    .font-field {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 175%;
        letter-spacing: -0.29px;
    }

    h1.component {
        font-size: 14.5px;
        line-height: 135%;
    }

    h2.component {
        font-size: 13px;
        line-height: 145%;
        text-transform: uppercase;
    }

    .font-field-component {
        font-size: 12.5px;
        line-height: 126.463%;
    }

    p.component {
        font-size: 8.5px;
        line-height: 135%;
    }

    .btn-filled-blue,
    .btn-filled,
    .btn-outline {
        padding: 12px 15px !important;
    }

    .card {
        min-width: 234.413px;
        width: 234.413px;
    }

    .svg-cronometro {
        width: 28.031px;
        height: 30.795px;
    }

    .row-white-container {
        padding: 30px 30px;
        gap: 10px;
    }

    .p-60-component {
        padding: 15px;
    }
}


@media (max-width: 768px) {
    h1 {
        font-size: 22px;
        line-height: 120%;
        letter-spacing: -0.6px;
    }

    .orgaosEmbasamentoLegal {
        padding: 8px !important;
    }

    .orgaoDestaque {
        font-size: 15px !important;
    }
    .orgaoBold {
        font-size: 15px !important;
    }
    .urlEmbasamento {
        font-size: 15px !important;
    }
    .titleValorAcademico {
        font-size: 16px !important;
    }

}


@media (max-width: 583px) and (min-width: 550px) {
    .d-flex.flex-row.container {
        flex-direction: column !important;
    }
}


@media (max-width: 559px) {
   .w-40mb{
    width: 40%;
   }
    .component-small{
        padding: 20px 0px;
    }

    .component-big {
        padding: 20px 0px;
    }

    .container-big {
        gap: 20px;
    }

    .container {
        padding: 0px 15px;
    }

    .btn-filled-blue svg,
    .btn-filled svg,
    .btn-outline svg,
    .btn-noline svg {
        width: 18px;
    }

    .btn-filled-blue,
    .btn-filled,
    .btn-outline,
    .btn-noline {
        gap: 2px;
    }

    h1 {
        font-size: 22px;
        line-height: 120%;
    }

    h2 {
        font-size: 16px;
        line-height: 135%;
    }

    p {
        font-size: 11.5px;
        line-height: 150%;
    }
    
    button.font-field {
        font-size: 14px;
        line-height: 125%;
    }

    .font-field {
        font-size: 14px;
        line-height: 125%;
    }

    .modal {
        z-index: 99999 !important;
    }

    h1.component {
        font-size: 13.5px;
        line-height: 135%;
    }

    h2.component {
        font-size: 12px;
        line-height: 110%;
        text-transform: uppercase;
    }

    .font-field-component {
        font-size: 12px;
        line-height: 145%;
    }

    p.component {
        font-size: 9px;
        line-height: 145%;
        text-transform: uppercase;
    }

    .card__certificado {
        padding: 5px;
    }

    .btn-filled-blue,
    .btn-filled {
        padding: 10px 10px !important;
    }

    .btn-outline{
        padding: 7px !important;
    }

    .display-p {
        display: flex;
    }

    .btn-scroll {
        padding: 6px 12px
    }

    .btn-scroll img {
        width: 10px;
        height: 20px;
    }

    .container-cards {
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 8px;
    }

    .svg-cronometro {
        width: 25px;
        height: 28px;
    }

    .layout-container {
        gap: 30px;
    }

    .row-white-container {
        padding: 20px;
        flex-direction: column;
        gap: 20px;
    }

    .column-white-container {
        padding: 20px;
        flex-direction: column;
        gap: 20px;
    }

    .inner-content-container {
        display: flex;
        gap: 10px;
        max-width: 100%;
        flex-direction: column;
    }

    .layout-container {
        display: flex;
        gap: 30px;
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
    }

    .p-60-component {
        padding: 0;
    }
    .d-flex.flex-row.container {
        flex-direction: column !important;
    }
}


@media (max-width: 480px) {
    .gap-3 {
        gap: 8px !important;
    }
    div.gap-1.gap-sm-2.d-flex.flex-xl-row.flex-sm-column.flex-row.col-12.col-sm-6.justify-content-around.flexRevH {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .mb-15{
        margin-bottom: 15px;
    }
}
@media (max-width: 425px) {
    .gap-1.gap-sm-2.d-flex.flex-xl-row.flex-sm-column.flex-row.col-12.col-sm-6.justify-content-around.flexRevH {
        flex-direction: row !important;
    }
    .orgaosEmbasamentoLegal {
        padding: 8px !important;
    }

    .orgaoDestaque {
        font-size: 15px !important;
    }
    .orgaoBold {
        font-size: 15px !important;
    }
    .urlEmbasamento {
        font-size: 12px !important;
    }
}

@media (max-width: 374px){
    .orgaosEmbasamentoLegal {
        padding: 8px !important;
    }

    .orgaoDestaque {
        font-size: 15px !important;
    }
    .orgaoBold {
        font-size: 15px !important;
    }
    .urlEmbasamento {
        font-size: 12px !important;
    }

}