/* ========== ROOT ========== */

:root {

    --theme1: #167c52;
    --theme2: #ff8200;
    --theme3: #a45d12;
    --text: #5d5d5d; /* #000 */
    --text2: #545f71;
    --azul-primario: #0038ea;
    --azul-secundario: #002cd0;
    --azul-terciario: #0029bc;
    --amarelo: #ffa811;
    --color-texto: #000;
    --titulo-beneficios: #032399;
    --titulo-depoimentos: #545f71;
    --texto-depoimentos: #6c757d;
    --background-you: #141131;
    --background-rodape: #1627a1;
    --background-formulario: #052288;
}

/* ========== RESET ========== */

/* A GAMBIARRA DO FORMULÁRIO DE LEAD */

@media screen and (min-width: 1024px) {
    .desktop {
        display: block !important;
    }
}

@media screen and (max-width: 1024px) {
    .mobile {
        display: block !important;
    }
}

/* =================================== GRID =================================== */

@media screen and (min-width: 1024px) {
    .content-row {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =================================== /GRID =================================== */

/* =================================== COLOR =================================== */

span.color-theme2 {
    color: var(--theme2);
}

/* =================================== /COLOR =================================== */

@media screen and (max-width: 1024px) {
    .hide-mobile {
        display: none;
    }
}

/* ========== DEFAULT ========== */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    font-size: 200%;
}

h2 {
    font-size: 175%;
}

h3 {
    font-size: 150%;
}

h4 {
    font-size: 125%;
}

h5 {
    font-size: 100%;
}

h6 {
    font-size: 75%;
}

.danger {
    color: var(--danger);
}

.information {
    color: var(--information);
}

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

.margin {
    margin: 0.75em;
}

.margin-top {
    margin-top: 0.75em;
}

.margin-bottom {
    margin-bottom: 0.75em;
}

.title-v1,
.title-v2,
.title-v3,
.subtitle-v1 {
    display: inline-block;
    position: relative;
}

.title-v3 {
    font-size: 400%;
    font-weight: 400;
    color: var(--theme1);
}

@media screen and (max-width: 1024px) {
    .title-v3 {
        font-size: 200%;
    }
}

.title-v1::after,
.title-v2::after,
.title-v3::after,
.subtitle-v1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25%;
    height: 0.1em;
    background-color: var(--theme2);
}

.title-v2::after {
    width: 15%;
    background-color: var(--white);
}

.subtitle-v1::after,
.subtitle-v3::after {
    width: 100%;
}

.title-light,
.title-light-v2 {
    font-size: 400%;
    font-weight: 400;
    color: var(--theme1);
    display: inline-block;
    position: relative;
}

.title-light::before,
.title-light-v2::before {
    content: "";
    position: absolute;
    /* top: 0; */
    left: 0;
    width: 25%;
    height: 0.1em;
    background-color: var(--theme2);
}

.title-light::before {
    top: 0;
}

.title-light-v2::before {
    bottom: 0;
}

@media screen and (max-width: 1024px) {
    .title-light,
    .title-light-v2 {
        font-size: 200%;
    }
}

.title-light-alt {
    text-align: center;
    font-size: 400%;
    font-weight: 400;
    color: var(--white);
    /* display: inline-block; */
    position: relative;
}

.title-light-alt::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 25%;
    margin: auto;
    height: 0.1em;
    background-color: var(--theme2);
}

@media screen and (max-width: 1024px) {
    .title-light-alt {
        font-size: 200%;
    }
}

/* TODO REMOVER???!!!*/
.image-preview {
    width: 100%;
    height: 10em;
    box-sizing: border-box;
    border: 0.1em solid var(--border);
    background-color: var(--background);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* =================================== HERO SECTION =================================== */

.hero-section {
    padding: 1em 0;
    object-fit: cover;
    position: relative;
    min-height: 25em;
}

.hero-section-title {
    font-size: 200%;
    color: var(--white);
    background:rgba(22, 124, 81, 0.75);
    padding: 0.5em 0.75em;
    border-radius: 1em;
}

.hero-section-content {
    text-align: justify;
    margin-top: 1em;
    font-size: 115%;
    max-width: 23.5em;
    color: var(--white);
    background:rgba(22, 124, 82, 0.75);
    padding: 0.5em 0.75em;
    border-radius: 1em;
}

.hero-section .button {
    font-size: 125%;
    margin-top: 0.75em;
}

@media screen and (max-width: 1024px) {
    .hero-section-title,
    .hero-section-content,
    .hero-section .button {
        font-size: 85%;
    }

    .hero-section-content {
        margin-top: 15em;
    }
}

/* =================================== /HERO SECTION =================================== */

/* =================================== PRESENTATION DEFAULT =================================== */

/*.presentation.default > h1 {
    color: var(--color-theme-alternate);
}*/

.presentation.default > p {
    text-align: justify;
    margin-top: 1em;
    font-size: 115%;
    font-weight: 300;
}

.presentation.default > .information {
    margin-top: 1.5em;
    display: flex;
}

.presentation.default > .information > div {
    flex-basis: calc(50% - 0.5em);
}

.presentation.default > .information > div:first-child {
    margin-right: 1em;
}

@media (max-width: 1024px) {
    .presentation.default > .information {
        flex-direction: column;
    }

    .presentation.default > .information > div:first-child {
        margin-bottom: 1em;
        margin-right: 0;
    }
}

/* =================================== /PRESENTATION DEFAULT =================================== */

/* =================================== PANEL CONTENT HEADER =================================== */

.panel-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =================================== /PANEL CONTENT HEADER =================================== */

/* =================================== LIST CARD =================================== */

.list-card {
    box-shadow: 0 0.1em 0.2em var(--shadow);
    background-color: var(--white);
    padding: 1em;
}

.list-card-header {
    
}

.list-card.pending {
    color: var(--white);
    background-color: rgb(182, 55, 55);
}

.list-card.ongoing {
    color: var(--white);
    background-color: rgb(62, 62, 202); 
}

.list-card.finished {
    color: var(--white);
    background-color: rgb(42, 119, 42);
}

.list-card:not(:last-child) {
    margin-bottom: 1em;
}

.list-card-title {
    font-weight: bold;
}

.list-card-title,
.list-card-description {
    margin-bottom: 0.5em;
}

/* =================================== /LIST CARD =================================== */

/* =================================== CARD LEAD =================================== */

.card-lead {
    /* color: var(--white); */
    box-shadow: 0 0.1em 0.2em var(--shadow);
    background-color: var(--white);
    /* border-radius: 1em; */
    padding: 1em;
}

.card-lead.pending {
    color: var(--white);
    background-color: rgb(182, 55, 55);
}

.card-lead.ongoing {
    color: var(--white);
    background-color: rgb(62, 62, 202); 
}

.card-lead.finished {
    color: var(--white);
    background-color: rgb(42, 119, 42);
}

.card-lead:not(:last-child) {
    margin-bottom: 1em;
}

.card-lead-title {
    font-weight: bold;
}

.card-lead-title,
.card-lead-description {
    margin-bottom: 0.5em;
}

/* =================================== /CARD LEAD =================================== */

/* =================================== NAVIGATION SAMPLE SOCIAL =================================== */

.navigation.sample.social {
    display: flex;
    justify-content: space-between;
}

.navigation.sample.social > a {
    width: 3em;
}

.navigation.sample.social > a:not(:last-child) {
    margin-right: 0.75em;
}

/* =================================== /NAVIGATION SAMPLE SOCIAL =================================== */

.beneficios-v2 {
    /* color: var(--white); */
    background-color: transparent;
    background-image: linear-gradient(91deg, var(--theme1) 0%, var(--theme1) 100%);
}

.beneficios-v2 .presentation.default h1,
.beneficios-v2 .presentation.default p
{
    color: var(--white);
}

.beneficios-v2 .col.card {
    /* text-align: center; */
    box-shadow: 0px 10px 26px 3px rgba(0, 0, 0, 0.5);
    margin: 1em;
    padding: 1em;
    background-color: var(--white);
    border-radius: 1.5em;
}

.beneficios {
    margin: 1em;
    padding: 1em;
    background-color: transparent;
    background-image: linear-gradient(91deg, var(--theme1) 0%, var(--theme1) 100%);
    box-shadow: 0px 10px 26px 3px rgba(0, 0, 0, 0.28);
    border-radius: 2em;
}

.beneficios .title,
.beneficios .subtitle {
    text-align: center;
    color: var(--white);
}

.beneficios .title {
    font-size: 250%;
}

.beneficios .subtitle {
    font-size: 150%;
}

.beneficios .card {
    margin: 0.75em;
    padding: 0.5em 1em;
    text-align: center;
    background-color: var(--white);
    border-radius: 1.5em;
}

.beneficios .card h2 {
    font-size: 200%;
}

.beneficios .card .card-icon {
    color: #EFC822;
    font-size: 7em;
    display: block;
}

/* =================================== CUSTOM LIST V1 =================================== */

ul.custom-list-v1 {
    margin: 0.75em 0;
    padding: 0;
}

ul.custom-list-v1 > li {
    list-style:none;
    position: relative;
    padding-left: 1.5em;
    line-height: 2;
}

ul.custom-list-v1 > li:before {
    position: absolute;
    left: 0;
    color: var(--theme1);
}

ul.custom-list-v1 > li:before {
    content:"\2794"; 
}

/* =================================== /CUSTOM LIST V1 =================================== */

/* =================================== CUSTOM LIST V2 =================================== */

ul.custom-list-v2 {
    list-style: none;
    /* max-width: 40em; */
    padding: 1em;
    border-radius: 1em;
}

ul.custom-list-v2 > li {
    padding: 0.5em 0 0.5em 0;
}

ul.custom-list-v2 > li:nth-child(odd) {
    text-align: left;
    border-left: 0.75em solid var(--theme1);
    padding-left: 0.25em;
    border-bottom: 0.75em solid rgb(53, 187, 131);
}

ul.custom-list-v2 > li:nth-child(even) {
    text-align: right;
    border-right: 0.75em solid var(--theme1);
    padding-right: 0.25em;
    border-bottom: 0.75em solid rgb(53, 187, 131);
}

/* =================================== /CUSTOM LIST V2 =================================== */

.button {
    background-color: var(--theme2);
}

.card {
    color: var(--text);
}