@import url("https://use.typekit.net/fjh5lfz.css");

@import url("https://use.typekit.net/fjh5lfz.css");

@import url("https://use.typekit.net/fjh5lfz.css");

@import url("https://use.typekit.net/fjh5lfz.css");

/* Para navegadores Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 5px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do fundo da barra de rolagem */
}



::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color); /* Cor ao passar o mouse sobre o polegar */
}



* {
    box-sizing: border-box;
    
}

:root {
 
    /* paleta de cores */
    --green-1-postit-color: #6e8947;
    --yellow-1-postit-color: #b7945c;
    --red-1-postit-color: #ba6056;

    --green-1-escuro-color: #4d6132;
    --yellow-1-escuro-color: #826941;
    --red-1-escuro-color: #7f423b;

    --green-2-original-color: #88cd5d;
    --yellow-2-original-color: #ffcc66;
    --red-2-original-color: #ff8c73;

    --green-3-transp-color: #e0ebd492;
    --yellow-3-transp-color: #fbefd0;
    --red-3-transp-color: #fedfd9;
    
    --yellow-4-fundo1-color: #fdefc557;
    --green-4-fundo2-color: #caf99c3a;
    --red-4-fundo3footer-color: #fedfd9;

    --font2-relation: "relation-one", sans-serif;
    --font1-relation: "aktiv-grotesk", sans-serif;
}

html {
    font-family: 'Relation';
    height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    /* --------- */
    scrollbar-width: thin; 
    scrollbar-color: #d3d3d3 white; 
    
}


body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    scroll-margin-top: 950px; /* Ajuste conforme necessário */
    overflow: hidden;
    /* background: url('./imagem_fundo_granulado/fundo_granulado.png') no-repeat center center fixed;
    background-size: cover; */
    background-image: url('./imagem_fundo_granulado/fundo_granulado.png'); /* Atualize o caminho para o correto */
    background-repeat: repeat; /* Repete o fundo horizontal e verticalmente */
    background-size: auto; /* Mantém o tamanho original da imagem */
    font-family: var(--font1-relation);
    font-weight: 300;

}
.header_all,
.section_intro_all,
.section_vant_all,
.mission_all,
.planos,
.quemsomos,
.mv,
.faq_all,
.frase_final,
.footer_all {
    max-width: 2000px;
    margin: 0 auto;
    width: 100%; 
    box-sizing: border-box; 
}



    /* animacao para scroll */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

    /* p/ background menu scroll */

.scrolled1 {
    opacity: 1;
    transform: translateY(0);
}

.fundo_church {
    background: url('./background_begin/church_fundo_black.png') no-repeat center center ;
    background-size: cover;
    
}


.header_all {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .75em;
    padding-bottom: .5em;
    z-index: 2;
    height: 120px;

}


.header_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    z-index: 1000; /* Certifique-se de que o valor é suficientemente alto */
    width: 100%;
    padding: 0 20px;
    background-color: transparent; 
    transition: background-color 0.3s ease, top 0.3s ease; /* Adicionando transição suave */
}


.scrolled {
    background-color: rgba(0, 0, 0, 0.692);
}

.header_nav img {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 3em;
    width: 18.8em;
    margin: 2em 0 2em 0;
    
}

.header_nav ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0 auto;
}

.header_nav li {
    list-style-type: none;
    
}

.header_nav .button_contat1,
.button_contat3,
.button_contat4,
.button_contat5,
.button_contat2 {
    text-decoration: none;
    color: white;
    padding: 1em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: .5em 0 0 0;
    font-size: 1.18em;
}



/* ---------- menu principal - maiores resolucoes 950 ------------ */

@media screen and (min-width: 950px) {

    .header_all {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .75em;
        padding-bottom: .5em;
        z-index: 0;
        height: 120px;
        
    }


    .header_nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 20em;
        position: fixed;
        top: 0;
        z-index: 1000; /* Certifique-se de que o valor é suficientemente alto */
        width: 100%;
        padding: 0 20px;
        background-color: transparent; 
        transition: background-color 0.3s ease, top 0.3s ease; /* Adicionando transição suave */
    }


    .scrolled {
        background-color: rgba(255, 255, 255, 0.959);
    }

    .header_nav img {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0em;
        width: 10.5em;
        margin: 4em 0 0 3em;
    }

    .header_nav ul {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin: 0;
    }

    .header_nav li {
        list-style-type: none;

    }

    .header_nav .button_contat1,
    .button_contat2,
    .button_contat3, 
    .button_contat4 {
        text-decoration: none;
        color: black;
        text-transform: normal;
        border: none;
        border-radius: 0;
        letter-spacing: 1px;
        padding: 1em .5em;
        margin: 2em 2em;
    }
    li {
        position: relative;
    }
 
    li  a::after {
        content: "";
        width: 0%;
        height: 2px;
        background-color: var(--yellow-2-original-color);
        position: absolute;
        margin-top: 1em;
        top: 4em;
        transition: width .5s ease-in-out;
    }
    li   a:hover::after {
        width: 100%;
    }


}
/* ---------- menu principal - maiores resolucoes ------------ */

@media screen and (min-width: 1300px) {

    .header_all {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .75em;
        padding-bottom: .5em;
        z-index: 0;
        height: 120px;


    }


    .header_nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 50em;
        position: fixed;
        top: 0;
        z-index: 1000; /* Certifique-se de que o valor é suficientemente alto */
        width: 100%;
        padding: 0 20px;
        background-color: transparent; 
        transition: background-color 0.3s ease, top 0.3s ease; /* Adicionando transição suave */
    }



    .scrolled {
        background-color: rgba(255, 255, 255, 0.959);
    }

    .header_nav img {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0em;
        width: 10.5em;
        margin: 2em 0 0 3em;
    }

    .header_nav ul {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin: 0;
    }

    .header_nav li {
        list-style-type: none;

    }

    .header_nav .button_contat1,
    .button_contat2,
    .button_contat3, 
    .button_contat4 {
        text-decoration: none;
        color: black;
        text-transform: normal;
        border: none;
        border-radius: 0;
        letter-spacing: 1px;
        padding: 1em .5em;
        margin: 2em 2em;
    }
    li {
        position: relative;
    }
 
    li  a::after {
        content: "";
        width: 0%;
        height: 2px;
        background-color: var(--yellow-2-original-color);
        position: absolute;
        margin-top: 1em;
        top: 4em;
        transition: width .5s ease-in-out;
    }
    li   a:hover::after {
        width: 100%;
    }


}

@media screen and (min-width: 1430px) {
    .header_nav {
        
        gap: 60em;
        
    }
}


/* ----- introduction ----- */

.section_intro_all {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    margin: 3.5em auto 0;
    height: auto;
    transform: scale(1); /* Escala inicial (100%) */
    transform-origin: top top; /* Define o ponto de origem para a escala */
    transition: transform 0.3s ease; /* Transição suave ao redimensionar */
}
.intro_text {
    margin-top: 3em;

}
.intro_text h1{
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 300;
    font-size: 1.8em;
    margin-bottom: 0;
    text-align: center;
    color: white;
    text-shadow: 0px 5px 10px rgb(0, 0, 0);
}
.intro_text p{
    font-family: "relation-one", sans-serif;
    font-size: 1.6em;
    color: var(--yellow-2-original-color);
    margin-top: .5em;
    text-align: center;
    text-shadow: 0px 5px 10px rgb(0, 0, 0);
}
.intro_text h3{
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    text-align: center;
    background-color: var(--yellow-2-original-color);
    color: white;
    width: 9em;
    margin: 2em auto 4em auto;
    padding: .5em 1.5em;
    border-radius: 0px 15px;
    border: 2px solid var(--yellow-2-original-color);
    transition: background-color .5s ease-in-out;
        
}
.intro_text a{
    text-decoration: none;
    text-shadow: 0px 1px 10px rgb(0, 0, 0);
}
.intro_text h3:hover{
    background-color: transparent;
    border: 2px solid white;
}
.intro_text h3:active{
    background-color: var(--yellow-2-original-color);
}
.intro_text h3 a{  
    text-decoration: none;
    color: white; 
}
.intro_text h3{  
    text-shadow: 0px 1px 15px rgba(0, 0, 0, 0.409);
}

/* --- */
.intro_design {
    margin: 0 0 0;
    position: relative;
    width: 18.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro_design img {
    width: 10em;
    border-radius: 80px 80px 0 0;
    z-index: 7;
}


/* .vitral_sol_green::after {
    content: '';
    position: absolute;
    z-index: 1;
    background-color: var(--green-2-original-color);
    top: 5em;
    left: 1.2em;
    width: 8em;
    height: 12em;
    border-radius: 100px 100px 0 0;
} */
.vitral_lin_green::before {
    content: '';
    position: absolute;
    z-index: 5;
    border: 2px solid var(--red-2-original-color);
    top: 5.8em;
    left: 2em;
    width: 8em;
    height: 12em;
    border-radius: 70px 70px 0 0;
}

/*  */
.vitral_sol_yellow::after {
    content: '';
    position: absolute;
    z-index: 2;
    background-color: var(--yellow-2-original-color);
    top: 2em;
    right: 3.2em;
    width: 10em;
    height: 14em;
    border-radius: 70px 70px 0 0;
}
.vitral_lin_yellow::before {
    content: '';
    position: absolute;
    z-index: 4;
    border: 2px solid var(--yellow-2-original-color);
    top: -.5em;
    left: 3.5em;
    width: 10em;
    height: 14.5em;
    border-radius: 90px 90px 0 0;
}

/*  */
/* .vitral_sol_red::after {
    content: '';
    position: absolute;
    z-index: 3;
    background-color: var(--yellow-2-original-color);
    top: 1em;
    right: .5em;
    width: 5em;
    height: 7.5em;
    border-radius: 50px 50px 0 0;
    transition: background-color .5s ease-in-out;
} */

.vitral_lin_red::before {
    content: '';
    position: absolute;
    z-index: 6;
    border: 2px solid var(--red-2-original-color);
    top: 1.5em;
    right: 2em;
    width: 5em;
    height: 7.5em;
    border-radius: 50px 50px 0 0;
    
}

/*  */

/* ----- introduction - maiores resolucoes 1  */
@media screen and (min-width: 950px) {
    .section_intro_all {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0;
        margin: -5em auto;
        height: 45em;
        transform: scale(0.8); /* Reduz para 80% */
    }

    .intro_text {
        margin-top: -4em;
        z-index: 8;
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
    }
    .intro_text h1{
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 300;
        font-size: 4em;
        width: 12em;
        margin-bottom: 0;
        text-align: left;
    }
    .intro_text p{
        font-family: "relation-one", sans-serif;
        font-size: 3em;
        color: var(--yellow-2-original-color);
        margin: 0;
        text-align: left;
    }
    .intro_text h3{
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 600;
        font-size: 1.1em;
        text-align: center;
        background-color: var(--yellow-2-original-color);
        color: white;
        width: 9em;
        margin: 2em auto 4em auto;
        padding: .5em 1.5em;
        border-radius: 0px 15px;
        border: 2px solid var(--yellow-2-original-color);
        transition: background-color .5s ease-in-out;
        
    }
    .intro_text a{
        text-decoration: none;
        text-shadow: 0px 1px 10px rgb(0, 0, 0);
        
    }
    .intro_text h3:hover{
        background-color: transparent;
        border: 2px solid white;
    }
    .intro_text h3:active{
        background-color: var(--yellow-2-original-color);
    }
    .intro_text h3 a{  
        text-decoration: none;
        color: white; 
    }
    .intro_text h3{  
        text-shadow: 0px 1px 15px rgba(0, 0, 0, 0.409);
    }
        
    /* --- */
    .intro_design {
        margin: 0 0 0;
        position: relative;
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .intro_design img {
        width: 20em;
        border-radius: 200px 200px 0 0;
        z-index: 7;
        margin: -5em 10em 0 0 ;
    }
    
    /* .vitral_sol_green::after {
        content: '';
        position: absolute;
        z-index: 1;
        background-color: var(--green-3-transp-color);
        top: 5em;
        left: -8em;
        width: 17em;
        height: 23em;
        border-radius: 200px 200px 0 0;
    } */
    .vitral_lin_green::before {
        content: '';
        position: absolute;
        z-index: 5;
        border: 2px solid var(--red-2-original-color);
        top: 6.5em;
        left: -7.5em;
        width: 17em;
        height: 22.5em;
        border-radius: 200px 200px 0 0;
    }
    
    /*  */
    .vitral_sol_yellow::after {
        content: '';
        position: absolute;
        z-index: 2;
        background-color: var(--yellow-2-original-color);
        top: 2em;
        right: 5.5em;
        width: 20em;
        height: 24.5em;
        border-radius: 100px 100px 0 0;
    }
    .vitral_lin_yellow::before {
        content: '';
        position: absolute;
        z-index: 4;
        border: 2px solid var(--yellow-2-original-color);
        top: -5em;
        left: -4.5em;
        width: 20em;
        height: 28.5em;
        border-radius: 200px 200px 0 0;
    }
    
    /*  */
    /* .vitral_sol_red::after {
        content: '';
        position: absolute;
        z-index: 3;
        background-color: var(--red-3-transp-color);
        top: -4em;
        right: 1.2em;
        width: 10em;
        height: 15.5em;
        border-radius: 90px 90px 0 0;
        
    } */
    
    .vitral_lin_red::before {
        content: '';
        position: absolute;
        z-index: 6;
        border: 2px solid var(--red-2-original-color);
        top: -3em;
        right: 2em;
        width: 10em;
        height: 15.5em;
        border-radius: 90px 90px 0 0;
        
    }

}

/* ----- introduction - maiores resolucoes 2  */
@media screen and (min-width: 1300px) {
   .section_intro_all {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0;
        margin: -5em auto;
        height: 45em;
        transform: scale(0.8); /* Reduz para 80% */
    }

    .intro_text {
        margin-top: -4em;
        z-index: 8;
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
    }
    .intro_text h1{
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 300;
        font-size: 4em;
        width: 12em;
        margin-bottom: 0;
        text-align: left;
    }
    .intro_text p{
        font-family: "relation-one", sans-serif;
        font-size: 3em;
        color: var(--yellow-2-original-color);
        margin: 0;
        text-align: left;
    }
    .intro_text h3{
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 600;
        font-size: 1.1em;
        text-align: center;
        background-color: var(--yellow-2-original-color);
        color: white;
        width: 9em;
        margin: 2em auto 4em auto;
        padding: .5em 1.5em;
        border-radius: 0px 15px;
        border: 2px solid var(--yellow-2-original-color);
        transition: background-color .5s ease-in-out;
        
    }
    .intro_text a{
        text-decoration: none;
        text-shadow: 0px 1px 10px rgb(0, 0, 0);
        
    }
    .intro_text h3:hover{
        background-color: transparent;
        border: 2px solid white;
    }
    .intro_text h3:active{
        background-color: var(--yellow-2-original-color);
    }
    .intro_text h3 a{  
        text-decoration: none;
        color: white; 
    }
    .intro_text h3{  
        text-shadow: 0px 1px 15px rgba(0, 0, 0, 0.409);
    }
        
    /* --- */
    .intro_design {
        margin: 0 0 0;
        position: relative;
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .intro_design img {
        width: 20em;
        border-radius: 200px 200px 0 0;
        z-index: 7;
        margin: -5em 10em 0 0 ;
    }
    
    /* .vitral_sol_green::after {
        content: '';
        position: absolute;
        z-index: 1;
        background-color: var(--green-3-transp-color);
        top: 5em;
        left: -8em;
        width: 17em;
        height: 23em;
        border-radius: 200px 200px 0 0;
    } */
    .vitral_lin_green::before {
        content: '';
        position: absolute;
        z-index: 5;
        border: 2px solid var(--red-2-original-color);
        top: 6.5em;
        left: -7.5em;
        width: 17em;
        height: 22.5em;
        border-radius: 200px 200px 0 0;
    }
    
    /*  */
    .vitral_sol_yellow::after {
        content: '';
        position: absolute;
        z-index: 2;
        background-color: var(--yellow-2-original-color);
        top: 2em;
        right: 5.5em;
        width: 20em;
        height: 24.5em;
        border-radius: 100px 100px 0 0;
    }
    .vitral_lin_yellow::before {
        content: '';
        position: absolute;
        z-index: 4;
        border: 2px solid var(--yellow-2-original-color);
        top: -5em;
        left: -4.5em;
        width: 20em;
        height: 28.5em;
        border-radius: 200px 200px 0 0;
    }
    
    /*  */
    /* .vitral_sol_red::after {
        content: '';
        position: absolute;
        z-index: 3;
        background-color: var(--red-3-transp-color);
        top: -4em;
        right: 1.2em;
        width: 10em;
        height: 15.5em;
        border-radius: 90px 90px 0 0;
        
    } */
    
    .vitral_lin_red::before {
        content: '';
        position: absolute;
        z-index: 6;
        border: 2px solid var(--red-2-original-color);
        top: -3em;
        right: 2em;
        width: 10em;
        height: 15.5em;
        border-radius: 90px 90px 0 0;
        
    }

}

/* --------- faixa ---------- */

.information_more1 {
    display: none;
}

.information_more2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 2em;
    background-color: white;
    
}

.information_more2 article {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: .5em;
    margin: 1.3em auto;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green-2-original-color);

}

.img_logo_alone2 img{
    display: none;
}


.information_more2 p {
    font-size: .7em;
    color: var(--green-1-escuro-color);
    letter-spacing: .2em;
    text-align: center;
    font-weight:500;
}

.p_gestao2 p,
.p_organiza2 p,
.p_missao2 p {
    border-right: 1px solid var(--green-1-escuro-color);
    padding-right: .5em;
    margin: 0;
}

/* ----------------------------- */

@media screen and (min-width: 950px) {

    .information_more2 {
        display: none;
    }

    .information_more1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: var(--yellow-1-escuro-color);
    }
    .information_more1 article {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: .5em;
        margin: 1.3em 0;
        padding: 0 0 0 32px;
        width: 44em;
        background-color: var(--yellow-1-escuro-color);

    }

    .img_logo_alone1 img{
        width: 2em;
    }


    .information_more1 p {
        font-size: .8em;
        color: var(--yellow-2-original-color);
        padding-left: 3em;
        padding-bottom: 0;
        letter-spacing: .4em;
    }

    .p_gestao1 p,
    .p_organiza1 p,
    .p_missao1 p {
        border-right: .1px solid var(--yellow-2-original-color);
        border-bottom: none;
        padding-right: 3em;
        padding-bottom: 0em;
        margin: 0;
    }

}



/* -------------- destaques ---------- */

.destaques {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto 5em auto;
    padding: 0;
}

.img_membros {
    margin: 0 auto;
    padding: 0 0 0 2em;
}
.img_membros img {
    width: 100%;
    height: auto;
    margin: 0 auto 2em auto;
    padding: 0;
}


/* --- */
.img_membros2 {
    margin: 0 auto;
    padding: 0 2em 0 0;
    width: 100%;
    height: auto;
}
.img_membros2 img {
    width: 100%;
    height: auto;
    margin: 0 auto 2em auto;
    padding: 0;
}
/*  ---  */

.destaque1 {
    margin: 1em 0;
}

.destaques h1 b {
    font-family: "relation-one", sans-serif;
    font-weight: 300;
    font-size: 2em;
    margin: 0 auto .5em;
    text-align: center;
    color: var(--red-2-original-color);
}
.destaques h1 {
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 200;
    font-size: 2em;
    margin: 0 auto 3em;
    text-align: center;
    line-height: 1.2em;
    padding: 5em;

}
.destaque_yellow{
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.content_membros {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 2em 0 2em;
    color: var(--green-1-escuro-color);
}
.content_membros h2{
    border-bottom: 1px solid var(--green-1-escuro-color);
    padding-bottom: .1em;
    width: 100%;
    margin-top: .3em;
    font-family: "relation-one", sans-serif;
    font-size: 2.2em;
}
.content_membros h4{
    margin: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 250;
    letter-spacing: .2em;
    font-size: .8em;
}

.content_membros p{
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 200;
    font-size: 1.1em;
}


/* ---------- colors ------- */

.green{
    color: var(--green-1-escuro-color);
}
.yellow{
    color: var(--yellow-1-escuro-color);
}
.red{
    color: var(--red-1-escuro-color);
}





/*  -------- 600 -------- */

@media screen and (min-width: 600px) {
    .content_membros {
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .content_membros h4,
    .content_membros h2,
    .content_membros p{
        width:70%;
    }
    
}
@media screen and (min-width: 700px) {
    
    .destaque1{
        display: flex;
        justify-content: center;
        flex-direction: row-reverse;
        align-items: flex-end;
        margin: 3em 0;  
    }
    .destaque_yellow{
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: flex-end;
        margin: 3em 0;  
    }
    .content_membros h4,
    .content_membros h2,
    .content_membros p{
        width:60%;
        margin-top: 0;
    }
    .img_membros {
        margin: 0 auto;
        padding: 0;
        width: 60em;
    }
    .img_membros img {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;

    }


/* --- */
    .img_membros2 {
        margin: 0 auto;
        padding: 0 ;
        width: 60em;
    }
    .img_membros2 img {
        width: 100%;
        height: auto;
        margin: 0 ;
        padding: 0;
    }   

    
/*  ---  */
    .content_membros h2{
        border-bottom: 1px solid var(--green-1-escuro-color);
        padding-bottom: .1em;
        width: 60%;
        margin-top: 0;
        font-family: "relation-one", sans-serif;
        font-size: 3.5em;
    }
}

@media screen and (min-width: 1300px) {
    .destaques h1 b {
        font-family: "relation-one", sans-serif;
        font-weight: 300;
        font-size: 2em;
        margin: 0 auto .5em;
        text-align: center;
        color: var(--red-2-original-color);
    }
    .destaques h1 {
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        font-size: 3.3em;
        margin: 0 auto 3em;
        text-align: center;
        line-height: 1.2em;
    
    }
}


/* ------- nossa missao --------- */
.mission_all {
    background-color: var(--yellow-4-fundo1-color);
    height: 800px;
    padding-top: 1em;
}
.intro_design2 {
    margin: 0 0 0;
    position: relative;
    width: 18.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.intro_design2 img {
    width: 10em;
    height: 16em;
    border-radius: 80px 80px 0 0;
    z-index: 10;
}


.vitral_sol_green2::after {
    content: '';
    position: absolute;
    z-index: 1;
    background-color: var(--green-3-transp-color);
    top: 1em;
    left: 0em;
    width: 6em;
    height: 8em;
    border-radius: 100px 100px 0 0;
}
.vitral_lin_green2::before {
    content: '';
    position: absolute;
    z-index: 5;
    border: 2px solid var(--green-2-original-color);
    top: 1.5em;
    left: -.7em;
    width: 6em;
    height: 8em;
    border-radius: 70px 70px 0 0;
}

/*  */
.vitral_sol_yellow2::after {
    content: '';
    position: absolute;
    z-index: 2;
    background-color: var(--yellow-3-transp-color);
    top: 2.5em;
    right: 1.3em;
    width: 7em;
    height: 10em;
    border-radius: 70px 70px 0 0;
}
.vitral_lin_yellow2::before {
    content: '';
    position: absolute;
    z-index: 4;
    border: 2px solid var(--yellow-2-original-color);
    top: 2.5em;
    right: .5em;
    width: 7em;
    height: 9em;
    border-radius: 90px 90px 0 0;
}

/*  */
.vitral_sol_red2::after {
    content: '';
    position: absolute;
    z-index: 3;
    background-color: var(--red-3-transp-color);
    top: 2em;
    right: 5.2em;
    width: 10em;
    height: 15em;
    border-radius: 50px 50px 0 0;
    transition: background-color .5s ease-in-out;
}

.vitral_lin_red2::before {
    content: '';
    position: absolute;
    z-index: 6;
    border: 2px solid var(--red-2-original-color);
    top: 2.7em;
    right: 5.7em;
    width: 10em;
    height: 15em;
    border-radius: 50px 50px 0 0;
    
}

/* ------- title ------- */

.artetitle_content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1.5em;
}

.art_and_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.art_and_title h2 {
    font-size: 5em;
    font-family: "relation-one", sans-serif;
    font-weight: 200;
    margin: 0;
    z-index: 11;
    color: var(--red-2-original-color);
}


.art_and_title h2:first-child {
    margin: 0 1.5em -.5em 0;
}
.art_and_title h2:last-child {
    margin: -.3em 0 0 1.2em;
}

/* --------- text mission ------- */

.mission_text {
    margin: 1em;
    
}
.mission_text p {
    text-indent: 15px;
    font-size: 1.1em;
    font-weight: 200;
}


/* ------------------------------------------ */

@media screen and (min-width: 950px) {

    .mission_all {
        background-color: var(--yellow-4-fundo1-color);
        height: 800px;
        padding-top: .1em;
    }
    .intro_design2 {
        margin: 0 0 0;
        position: relative;
        width: 18.5em;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .intro_design2 img {
        width: 20em;
        height: 30em;
        border-radius: 200px 200px 0 0;
        z-index: 10;
    }
    
    
    .vitral_sol_green2::after {
        content: '';
        position: absolute;
        z-index: 1;
        background-color: var(--green-3-transp-color);
        top: 1em;
        left: -7em;
        width: 10em;
        height: 15em;
        border-radius: 100px 100px 0 0;
    }
    .vitral_lin_green2::before {
        content: '';
        position: absolute;
        z-index: 5;
        border: 2px solid var(--green-2-original-color);
        top: 2em;
        left: -8.2em;
        width: 10em;
        height: 15em;
        border-radius: 100px 100px 0 0;
    }
    
    /*  */
    .vitral_sol_yellow2::after {
        content: '';
        position: absolute;
        z-index: 2;
        background-color: var(--yellow-3-transp-color);
        top: 5em;
        right: -6em;
        width: 12em;
        height: 20em;
        border-radius: 100px 100px 0 0;
    }
    .vitral_lin_yellow2::before {
        content: '';
        position: absolute;
        z-index: 4;
        border: 2px solid var(--yellow-2-original-color);
        top: 4em;
        right: -7em;
        width: 12em;
        height: 19em;
        border-radius: 100px 100px 0 0;
    }
    
    /*  */
    .vitral_sol_red2::after {
        content: '';
        position: absolute;
        z-index: 3;
        background-color: var(--red-3-transp-color);
        top: 5em;
        left: -3.2em;
        width: 20em;
        height: 27em;
        border-radius: 100px 100px 0 0;
        transition: background-color .5s ease-in-out;
    }
    
    .vitral_lin_red2::before {
        content: '';
        position: absolute;
        z-index: 6;
        border: 2px solid var(--red-2-original-color);
        top: 6.8em;
        left: -4.2em;
        width: 20em;
        height: 26em;
        border-radius: 100px 100px 0 0;
        
    }
    
    /* ------- title ------- */
    
    .artetitle_content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 10em;
        margin: 10em auto 10em 5em;
        width: 100%;
    }
    
    .art_and_title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        margin: 0;
    }
    
    .art_and_title h2 {
        font-size: 8em;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        margin: 0;
        z-index: 11;
        color: var(--red-2-original-color);
    }
    
    .art_and_title h2:first-child {
        top: -.5em;
        left: -1em;
        position: absolute;
    }
    .art_and_title h2:last-child {
        bottom: -.5em;
        right: -1em;
        position: absolute;
    }
    
    /* --------- text mission ------- */
    
    .mission_text {
        margin: 0;
        width: 400px;
        font-size: 1.2em;
        font-weight: 200;
        z-index: 12;
    }
    .mission_text p {
        text-indent: 15px;
        font-size: 1.1em;
    }
    
}

/* ------------------------------------------ */

@media screen and (min-width: 1300px) {
    .mission_all {
        background-color: var(--yellow-4-fundo1-color);
        height: 800px;
        padding-top: .1em;
    }
    .intro_design2 {
        margin: 0 0 0;
        position: relative;
        width: 18.5em;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .intro_design2 img {
        width: 20em;
        height: 30em;
        border-radius: 200px 200px 0 0;
        z-index: 10;
    }
    
    
    .vitral_sol_green2::after {
        content: '';
        position: absolute;
        z-index: 1;
        background-color: var(--green-3-transp-color);
        top: 1em;
        left: -7em;
        width: 10em;
        height: 15em;
        border-radius: 100px 100px 0 0;
    }
    .vitral_lin_green2::before {
        content: '';
        position: absolute;
        z-index: 5;
        border: 2px solid var(--green-2-original-color);
        top: 2em;
        left: -8.2em;
        width: 10em;
        height: 15em;
        border-radius: 100px 100px 0 0;
    }
    
    /*  */
    .vitral_sol_yellow2::after {
        content: '';
        position: absolute;
        z-index: 2;
        background-color: var(--yellow-3-transp-color);
        top: 5em;
        right: -6em;
        width: 12em;
        height: 20em;
        border-radius: 100px 100px 0 0;
    }
    .vitral_lin_yellow2::before {
        content: '';
        position: absolute;
        z-index: 4;
        border: 2px solid var(--yellow-2-original-color);
        top: 4em;
        right: -7em;
        width: 12em;
        height: 19em;
        border-radius: 100px 100px 0 0;
    }
    
    /*  */
    .vitral_sol_red2::after {
        content: '';
        position: absolute;
        z-index: 3;
        background-color: var(--red-3-transp-color);
        top: 5em;
        left: -3.2em;
        width: 20em;
        height: 27em;
        border-radius: 100px 100px 0 0;
        transition: background-color .5s ease-in-out;
    }
    
    .vitral_lin_red2::before {
        content: '';
        position: absolute;
        z-index: 6;
        border: 2px solid var(--red-2-original-color);
        top: 6.8em;
        left: -4.2em;
        width: 20em;
        height: 26em;
        border-radius: 100px 100px 0 0;
        
    }
    
    /* ------- title ------- */
    
    .artetitle_content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 10em;
        margin: 10em auto 10em 5em;
        width: 100%;
    }
    
    .art_and_title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        margin: 0;
    }
    
    .art_and_title h2 {
        font-size: 8em;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        margin: 0;
        z-index: 11;
        color: var(--red-2-original-color);
    }
    
    .art_and_title h2:first-child {
        top: -.5em;
        left: -1em;
        position: absolute;
    }
    .art_and_title h2:last-child {
        bottom: -.5em;
        right: -1em;
        position: absolute;
    }
    
    /* --------- text mission ------- */
    
    .mission_text {
        margin: 0;
        width: 450px;
        font-weight: 200;
        z-index: 12;
    }
    .mission_text p {
        text-indent: 30px;
        font-size: 1.1em;
    }
}

/* ----------- planos ---------- */

.planos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: black;
    height: auto;
    background-color: transparent;

}

.planos_title {
    font-size: 2.5em;
    color: black;
    padding: 1em 1em 0 1em;
    margin-bottom: 1em;
    display: block;
    text-align: center;
    font-family: "relation-one", sans-serif;
    font-weight: 200;
}

/* font-family: "aktiv-grotesk", sans-serif;
font-family: "relation-one", sans-serif; */

.container-plan1 {
    flex: 1;
    padding: 1em 3em 2em;
    margin-top: 6em;
    margin-bottom: 2em;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid var(--green-2-original-color);

}
.container-plan {
    flex: 1;
    padding: 1em 1.5em 2em;
    margin-bottom: 2em;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: none;
}


.border_plan_quant {
    width: 12em;
    padding: 0;
    display: block;
    text-align: center;
    margin-bottom: 2em;
}

.plan_quant {
    margin: 0;
    padding: 0;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 300;
    font-size: 1.6em;
}

.plan_quant b {
    text-transform: uppercase;
    font-weight: 300;
    
}
.color1 {
    color: var(--red-2-original-color);
}
.color2 {
    color: var(--red-2-original-color);
}
.color3 {
    color: var(--green-2-original-color);
    margin-top: .5em;
}
.pricing-plan p {
    margin-top: 0;

}

.plan_valor {
    color: black;
    font-size: 33px;
    font-weight: bold;
}

.plan_detalhes {

    color: #a9a9a9;
    padding-left: 16px;
    line-height: 1.8;

}


.plan_quero {
    text-decoration: none;
    border-radius: 10px;
    font-size: 23px;
    font-weight: bold;
    padding: .5em 2em;
    text-align: center;
    color: white;
    border: 1px solid var(--red-2-original-color);
    background-color: var(--red-2-original-color);
    transition: background-color .5s;
}
.plan_quero:hover {
    background-color: var(--red-1-postit-color);
}

.plan_detalhes li::marker {
    color: #a9a9a9;
}

.color {
    background-color: var(--green-2-original-color);
    color: white;
    border: 1px solid var(--green-2-original-color);
}
.color:hover {
    background-color: var(--green-1-postit-color);
}
ul {
    padding-bottom: 1em;
}
.maisvendido_container {
    background-color: rgb(252, 65, 65);
    color: white;
    height: 1.7em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8em;
    border-radius: 10px 10px 0 0;
    margin-bottom:1.5em;
    margin: 1em 1em 0 0;
    padding: 1.2em 0 ;
}

.mv {
    width: 100%;
    display: flex;
    justify-content:right;
    align-items: center;
    position: absolute;
    top: -3.4em;
}



/* <!-- -------- planos - maiores resolucoes ------ --> */

@media screen and (min-width: 950px) {
    .planos {
        height: 52em;
        position: relative;
        background-color: transparent;
    }
    .media_queries {
        display: flex;
        gap: 0em;
        padding: 0 3em 3em 3em;
    }
    ul {
        padding-bottom: 1em;
    }
    .planos_title{
        font-size: 3.5em;
        color: black;
        padding: 0 0 .4em 0;
        display: block;
        text-align: center;
        margin-bottom: 1em;

    }

    .container-plan {
        flex: 1;
        padding: 2.5em 5em;
        margin-bottom: 2em;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }
    .container-plan1 {
        flex: 1;
        padding: 2.5em 5em;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid var(--green-2-original-color);
        margin-top: 0em;

    }
    .color3 {
        margin-top: 0em;
    }
    
    .container-plan1 p {
        padding-bottom: 0em;
    }
    .maisvendido_container {
        background-color: rgb(252, 65, 65);
        color: white;
        height: 1.7em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 8em;
        border-radius: 10px 10px 0 0;
        margin-bottom:1.5em;
        margin: 1em 1em 0 0;
        padding: 1.2em 0 ;
    }
   
    .mv {
        width: 100%;
        display: flex;
        justify-content:right;
        align-items: center;
        position: absolute;
        top: -3.4em;
    }

    .plan_quero {
        text-decoration: none;
        border-radius: 10px;
        font-size: 23px;
        font-weight: bold;
        padding: .5em 2em;
        text-align: center;
        color: white;
        border: 1px solid var(--red-2-original-color);
        background-color: var(--red-2-original-color);
    }
  
    
    .plan_detalhes li::marker {
        color: #a9a9a9;
    }
    
    .color {
        border: 1px solid var(--green-2-original-color);
        background-color: var(--green-2-original-color);
        color: white;
        transition: background-color .5s ease-in-out;
    }
    .color:hover {
        background-color: var(--green-1-postit-color);
    }
    
    .border_mobile {
        border-radius: 0px;
        border-left: 1px solid #e1e1e1d8;
    }
}

/* ------------- 1300 ------------ */

@media screen and (min-width: 1300px) {
    .planos {
        height: 52em;
        position: relative;
        background-color: transparent;
    }
    .media_queries {
        display: flex;
        gap: 0em;
        padding: 0 3em 3em 3em;
    }
    ul {
        padding-bottom: 1em;
    }
    .planos_title{
        font-size: 3.5em;
        color: black;
        padding: 0 0 .4em 0;
        display: block;
        text-align: center;
        margin-bottom: 1em;

    }

    .container-plan {
        flex: 1;
        padding: 2.5em 5em;
        margin-bottom: 2em;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }
    .container-plan1 {
        flex: 1;
        padding: 2.5em 5em;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid var(--green-2-original-color);
        margin-top: 0em;

    }
    .color3 {
        margin-top: 0em;
    }
    
    .container-plan1 p {
        padding-bottom: 0em;
    }
    .maisvendido_container {
        background-color: rgb(252, 65, 65);
        color: white;
        height: 1.7em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 8em;
        border-radius: 10px 10px 0 0;
        margin-bottom:1.5em;
        margin: 1em 1em 0 0;
        padding: 1.2em 0 ;
    }
   
    .mv {
        width: 100%;
        display: flex;
        justify-content:right;
        align-items: center;
        position: absolute;
        top: -3.4em;
    }

    .plan_quero {
        text-decoration: none;
        border-radius: 10px;
        font-size: 23px;
        font-weight: bold;
        padding: .5em 2em;
        text-align: center;
        color: white;
        border: 1px solid var(--red-2-original-color);
        background-color: var(--red-2-original-color);
    }
  
    
    .plan_detalhes li::marker {
        color: #a9a9a9;
    }
    
    .color {
        border: 1px solid var(--green-2-original-color);
        background-color: var(--green-2-original-color);
        color: white;
        transition: background-color .5s ease-in-out;
    }
    .color:hover {
        background-color: var(--green-1-postit-color);
    }
    
    .border_mobile {
        border-radius: 0px;
        border-left: 1px solid #e1e1e1d8;
    }
}




/* <!-- -------- faq - mobile ------ --> */

.faq_all {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    flex-direction: column;
    padding: 0em 0em 2em;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 200;
    background-color: #a9a9a919;
    
}

.faq_all h2 {
    margin: 1em 0 0 0;
    color: black;
    font-size: 3em;
    font-family: "relation-one", sans-serif;
    font-weight: 200;
}

.faq-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    color: black;
}

.faq-container p {

    font-size: .9em;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 300;
}
.faq-container h4 {
    font-size: 1em;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 600;
}

.faq-questao1,
.faq2,
.faq3,
.faq4 {
    background-color: #ffcc66d5;
    border-radius: 50px 0 0 50px;
    padding: .1em 1.5em;
    margin: 1em;
    cursor: pointer;
    font-size: .85em;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 200;
    text-align: center;
    
}

.faq2 {
    border-radius: 0 50px 50px 0;
}
.faq3 {
    border-radius: 50px 0 0 50px;
}
.faq4 {
    border-radius: 0 50px 50px 0;
}


.faq-resposta {
    max-height: 0; /* Escondido inicialmente */
    overflow: hidden; /* Para não mostrar o conteúdo quando estiver fechado */
    transition: max-height 0.3s ease-out; /* Transição suave ao abrir e fechar */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: .1em 2em;
    margin: 0;
    border-radius: 5px;
    text-align: left;
    width: 100%;
    

}

.faq.active .faq-resposta {
    max-height: 300px; /* Altura para o conteúdo expandido, ajuste conforme o conteúdo */
}

/* FAQ para telas maiores */
@media screen and (min-width: 950px) {
    


    .faq-questao1,
    .faq2,
    .faq3,
    .faq4 {
        background-color: #ffcc66d5;
        border-radius: 50px 0 0 50px;
        padding: .1em 1.5em;
        margin: 1em;
        cursor: pointer;
        font-size: .85em;
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        transition: box-shadow .5s ease-in-out;
    }

    .faq2 {
    border-radius: 0 50px 50px 0;
    }
    .faq3 {
    border-radius: 50px 0 0 50px;
    }
    .faq4 {
    border-radius: 0 50px 50px 0;
    }
    
    .faq-questao1:hover {
        box-shadow: 1px 1px 10px -2px rgb(200, 159, 77);
    }
    
    .faq-container {
        font-size: 1.1em;
        padding: 0 20px 50px 20px;
        width: 30em;
        max-width: 800px;
        text-align: center;
    }

    .faq_all h2 {
        font-size: 4em;
        margin: 1em 0 .2em 0;
    }
}
/* FAQ para telas maiores */
@media screen and (min-width: 1300px) {
    


    .faq-questao1,
    .faq2,
    .faq3,
    .faq4 {
        background-color: #ffcc66d5;
        border-radius: 50px 0 0 50px;
        padding: .1em 1.5em;
        margin: 1em;
        cursor: pointer;
        font-size: .85em;
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        transition: box-shadow .5s ease-in-out;
    }

    .faq2 {
    border-radius: 0 50px 50px 0;
    }
    .faq3 {
    border-radius: 50px 0 0 50px;
    }
    .faq4 {
    border-radius: 0 50px 50px 0;
    }
    
    .faq-questao1:hover {
        box-shadow: 1px 1px 10px -2px rgb(200, 159, 77);
    }
    
    .faq-container {
        font-size: 1.1em;
        padding: 0 20px 50px 20px;
        width: 30em;
        max-width: 800px;
        text-align: center;
    }

    .faq_all h2 {
        font-size: 4em;
        margin: 1em 0 .2em 0;
    }
}
/* -------- whats fixed ------- */


.whats_mobile img{
    width: 0px;
    position: fixed;
    top: 35em;
}
/* ---------- 950 -------- */

@media screen and (min-width: 950px) {

    .whats_mobile img{
        height: 4em;
        width: 4em;
        position: fixed;
        top: 90%;
        right: 1%;
        border: 5px solid white;
        border-radius: 100%;
        transition: border .5s ease, background-color .5s ease, padding .5s ease, box-shadow .5s ease;
    }
    .whats_mobile img:hover{
        border-radius: 100%;
        border: 5px solid white;
        background-color: green;
        padding: .3em;
        box-shadow: 1px 3px 12px #ffffffb2;
    }
}

/* ---------- 1300 -------- */
@media screen and (min-width: 1300px) {
    .whats_mobile img{
        height: 4em;
        width: 4em;
        position: fixed;
        top: 89%;
        right: 1%;
        border: 5px solid white;
        border-radius: 100%;
        transition: border .5s ease, background-color .5s ease, padding .5s ease, box-shadow .5s ease;
    }
    .whats_mobile img:hover{
        border-radius: 100%;
        border: 5px solid white;
        background-color: green;
        padding: .3em;
        box-shadow: 1px 3px 12px #ffffffb2;
    }
}


/* ------------ frase final -------------- */

.frase_final {
    margin: 2em auto 3em;
    width: 350px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.frase_all {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    
}
.frase_all p{
    text-align: center;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 200;
    font-size: 1.1em;
}
.frase_final h2:first-child {
    position: absolute;
    top: -.3em;
    left: .5em;
    font-size: 2.8em;
    font-family: "relation-one", sans-serif;
    font-weight: 200;
    color: var(--red-2-original-color);

}
.frase_final h2:last-child {
    position: absolute;
    top: .7em;
    right: .5em;
    font-size: 2.8em;
    font-family: "relation-one", sans-serif;
    font-weight: 200;
    color: var(--green-2-original-color);
}

/* --------- 950 ---------- */

@media screen and (min-width: 950px) {
    .frase_final {
        margin: 2em auto 3em;
        width: 1000px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .frase_all {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        
    }
    .frase_all p{
        text-align: center;
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        font-size: 3em;
    }
    .frase_final h2:first-child {
        position: absolute;
        top: -.2em;
        left: 0em;
        font-size: 9em;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        color: var(--red-2-original-color);
    
    }
    .frase_final h2:last-child {
        position: absolute;
        top: .7em;
        right: 0em;
        font-size: 9em;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        color: var(--green-2-original-color);
    }
}

@media screen and (min-width: 1300px) {
    .frase_final {
        margin: 2em auto 3em;
        width: 1000px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .frase_all {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        
    }
    .frase_all p{
        text-align: center;
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        font-size: 3em;
    }
    .frase_final h2:first-child {
        position: absolute;
        top: -.2em;
        left: 0em;
        font-size: 9em;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        color: var(--red-2-original-color);
    
    }
    .frase_final h2:last-child {
        position: absolute;
        top: .7em;
        right: 0em;
        font-size: 9em;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        color: var(--green-2-original-color);
    }
}


/* ------------- footer ----------- */

.footer_all {
    background-color: var(--red-1-postit-color);
    margin: 0;
}
.footer_all h4 {
    text-align: center;
    color: white;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 200;
    font-size: .8em;
    padding: 2em 0 1.5em 0;
    margin: 0;
}


.redes_sociais img{
    width: 2em;
    height: 2em;
}
.logo_and_frase img {
    width: 11.5em ;
    
}
.logo_and_frase {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 2em;
}

/* --- */

.entre_contato {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1em auto;
    font-size: 2.5em;
    padding: .5em 0;

}
.entre_contato a{
    text-decoration: none;
    color: white;
    font-family: "relation-one", sans-serif;
    font-weight: 200;
    border: 1px solid white;
    padding: .5em 1em;
    border-radius: 15px;
    
}
.entre_contato p{
    margin: 0;
}

/* ---- */

.redes_sociais {
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
}
.redes_sociais img {
    margin: 0;
    padding: 0;
}
.rede1_insta,
.rede2_whats,
.rede3_email {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: .5em;
    transition: padding .5s ease-in-out;
    text-align: start;
    margin-left: 5em;
}
.rede1_insta:hover,
.rede2_whats:hover,
.rede3_email:hover {
    padding: .4em;
}
.rede1_insta a,
.rede2_whats a,
.rede3_email a {
    text-decoration: none;
    color: white;
}

/* --------- 950 ---------- */

@media screen and (min-width: 950px) {
    .footer_all {
        background-color: var(--red-1-postit-color);
        margin: 0 auto;         
    }
    .footer_all h4 {
        text-align: center;
        color: white;
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        font-size: .8em;
        padding: 0em 0 1.5em 0;
        margin: 0;
    }

    .footer_content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    
    .redes_sociais img{
        width: 2em;
        height: 2em;
    }
    .logo_and_frase img {
        width: 11.5em ;
        
    }
    .logo_and_frase {
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0em;
        width: 300px;
    }
    
    /* --- */
    
    .entre_contato {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1em 2em;
        font-size: 2.5em;
        padding: 0;
        text-align: center;
    
    }
    .entre_contato a{
        text-decoration: none;
        color: white;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        width: 100%;
        text-align: center;
        border: 1px solid white;
        padding: .5em 2em;
        transition: background-color .5s ease-in-out, border .5s ease-in-out, color .5s ease-in-out;
    }
    .entre_contato a:hover{
        background-color: white;
        color: var(--red-1-postit-color);
        border: 1px solid var(--red-1-postit-color);
    }
    .entre_contato p{
        margin: 0;
    }
    
    /* ---- */
    
    .redes_sociais {
        display: flex;
        justify-content: center;
        align-items: left;
        flex-direction: column;
        padding: 0;
        width: 300px;
    }
    .redes_sociais p {
        margin: .5em ;
    }
    .redes_sociais img {
        margin: 0;
        padding: 0;
    }
    .rede1_insta,
    .rede2_whats,
    .rede3_email {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: .5em;
        text-align: start;
        margin-left: 2.5em;
    }
    .rede1_insta a:hover,
    .rede2_whats a:hover,
    .rede3_email a:hover {
        border-bottom: 1px solid white;
    }
    .rede1_insta a,
    .rede2_whats a,
    .rede3_email a {
        text-decoration: none;
        color: white;
        transition: border-bottom .5s ease-in-out;
        padding: 0;
}
}
/* --------- 1300 --------- */

@media screen and (min-width: 1300px) {
    .footer_all {
        background-color: var(--red-1-postit-color);
        margin: 0 auto; 

    }
    .footer_all h4 {
        text-align: center;
        color: white;
        font-family: "aktiv-grotesk", sans-serif;
        font-weight: 200;
        font-size: .8em;
        padding: 0em 0 1.5em 0;
        margin: 0;
    }

    .footer_content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    
    .redes_sociais img{
        width: 2em;
        height: 2em;
    }
    .logo_and_frase img {
        width: 11.5em ;
        
    }
    .logo_and_frase {
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0em;
        width: 300px;
    }
    
    /* --- */
    
    .entre_contato {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1em 2em;
        font-size: 2.5em;
        padding: 0;
        text-align: center;
    
    }
    .entre_contato a{
        text-decoration: none;
        color: white;
        font-family: "relation-one", sans-serif;
        font-weight: 200;
        width: 100%;
        text-align: center;
        border: 1px solid white;
        padding: .5em 2em;
        transition: background-color .5s ease-in-out, border .5s ease-in-out, color .5s ease-in-out;
    }
    .entre_contato a:hover{
        background-color: white;
        color: var(--red-1-postit-color);
        border: 1px solid var(--red-1-postit-color);
    }
    .entre_contato p{
        margin: 0;
    }
    
    /* ---- */
    
    .redes_sociais {
        display: flex;
        justify-content: center;
        align-items: left;
        flex-direction: column;
        padding: 0;
        width: 300px;
    }
    .redes_sociais p {
        margin: .5em ;
    }
    .redes_sociais img {
        margin: 0;
        padding: 0;
    }
    .rede1_insta,
    .rede2_whats,
    .rede3_email {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: .5em;
        text-align: start;
        margin-left: 2.5em;
    }
    .rede1_insta a:hover,
    .rede2_whats a:hover,
    .rede3_email a:hover {
        border-bottom: 1px solid white;
    }
    .rede1_insta a,
    .rede2_whats a,
    .rede3_email a {
        text-decoration: none;
        color: white;
        transition: border-bottom .5s ease-in-out;
        padding: 0;
}
}