/* RESET */
:root {
    --header: #08b5b4;
    --cor01a: #ff6c6a;
    --cor01b: #b54d4b;
    --cor02a: #a86ea4;
    --cor02b: #774e74;
    --cor03a: #6063bb;
    --cor03b: #4b4d92;
    --cor-btn: #18224f;
    --footer: #0d132b;
    --font-size-base: 16px;    
}

html {scroll-behavior: smooth;font-size: var(--font-size-base);}
body {position: relative;margin: 0;}
body,
body * {
    padding: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-family: "Poppins", sans-serif;
    font-style: normal;
}
body * {margin: 0;}
a {
    text-decoration: none;
    display: block;
}
ul {list-style: none;margin: 0;padding: 0;}
picture,
figure,
svg,
img {
    width:100%;
    display: block;
    list-style: none;
    line-height: 0;
    margin: 0;
}
a {display: inline-block; outline:none;cursor: pointer;}

/* ANIMAÇÃO */
@keyframes barra {
    0% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
}

/* PRESET */
body {padding-top: 100px;}

h1,
h2,
h3 {
font-weight: 700;
-webkit-font-smoothing: antialiased;
color: #fff;
text-transform: uppercase;
}

.flex,
nav,
header,
.wrap,
.menu,
.menu ul,
.swiper-slide,
.area,
#mudanca,
#mudanca .graficos,
#carrosseis,
#seu-sucesso,
#evasao-escolar,
#impacto-comunidade,
#simples-seguro,
#vamos-juntos,
#impacto,
#comunidade,
#comunidade .boxes,
#impacto-comunidade .area .row,
#banner,
#conteudo,
#como-funciona .box .txt,
#como-funciona .box .ico,
#como-funciona .passo,
#como-funciona .passo .descricao,
#como-funciona .passos .num,
#fundadores,
#area-governanca,
#area-governanca .governanca,
#area-governanca .estrutura,
.estrutura .nivel,
#parcerias,
#signatarios,
.box-signatarios,
#por-tras,
.box-por-tras,
.box-por-tras .pessoas,
#como-aderir,
#como-aderir .wrap .row,
#como-aderir .row .box .txt,
#como-aderir .box .ico,
#porque-doar,
#porque-doar .item,
.parceiros,
.parceiros li,
.breadcrumb,
.box,
footer,
footer ul,
footer .wrap,
footer .empresa {display: flex;}

.box,
#carrosseis .carrosel-depoimentos,
#carrosseis .carrosel-pessoas {
border-radius: 32px;
}

.wrap {
    position: relative;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    width: 100%;
    max-width: 1260px;
    margin: 0 32px;
}

.box > img,
.box > div {
    border-radius: 32px;
}

.box h2,
.area h2 {
    position: relative;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 4rem;
}

.box h2::after,
.area h2::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2rem;
    background-color: var(--cor-btn);
    width: 63px;
    height: 8px;
}
.box h2::after {left: 0;}

.box img {
    max-width: 642px;
}

.box .conteudo {
    flex-flow: column nowrap;
    justify-content: center;
    padding: 4rem;
}
.box .conteudo p {color: #fff;}

.box .btn {
    align-self: flex-start;
    margin-top: 3.25rem;
}

.btn,
.estrutura .nome {
    border-radius: 32px;
    padding: 6px 25px;
    background-color: var(--cor-btn);
    border: 2px solid var(--cor-btn);
    color: #fff;
    font-weight: 700;
    transition: all 300ms ease;
    text-transform: uppercase;
    text-align: center;
}
.btn:hover,
.btn2:hover {
    background-color: #fff;
    color: var(--cor-btn);
}

.btn2 {
    border-radius: 32px;
    padding: 6px 25px;
    background-color: transparent;
    border: 2px solid var(--cor-btn);
    color: var(--cor-btn);
    font-weight: 700;
    transition: all 300ms ease;
    text-transform: uppercase;
    text-align: center;
}

.swiper-slide {
    justify-content: center;
    align-items: center;
}

.obs {
    font-size: 0.8rem;
    margin-bottom: 1.75rem;
    text-align: center;
}

#banner,
#conteudo {
    justify-content: center;
    align-items: stretch;
}

.breadcrumb {
    width: 100%;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    height: 71px;
    gap: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    border-bottom: 1px solid #c0d5e5;
    margin-bottom: 6.25rem;
}
.breadcrumb .home {max-width: 23px;}
.breadcrumb .seta {max-width: 6px;}

#seu-sucesso,
#evasao-escolar,
#impacto-comunidade,
#simples-seguro,
#vamos-juntos,
#comunidade,
#mudanca {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 6.25rem 0;
}