:root{
    --white: #fff;

    --gray-50: #f2f2f2;
    --gray-100: #f3f3f3;
    --gray-200: #e1e1e1;
    --gray-300: #e5e5e5;
    --gray-400: #636363;
    --gray-500: #8f8f8f;
    --gray-800: #888888;
    --gray-850: #817a78;
    --gray-900: #6a6a6a;
    --gray-950: #666666;

    --pink-400: #fb255d;
    --pink-500: #f42165;
    --pink-600: #f32165;

    --purple-300: #aa499a;
    --purple-500: #bf1499;
    --purple-800: #bf0896;
    --purple-900: #951b81;

    --red-500: #F75A68;
    --red-800: #ff3838;

    --green-100: #80afac;
    --green-200: #01a09a;
    --green-500: #8be983;
    --green-700: #009999;
    --green-800: #0b877e;
    --green-850: #008178;
    --green-900: #003633;

    --blue-100: #6685a5;
    --blue-800: #525785;

    --black: #181818;
}

:focus{
    outline: transparent;
    color: var(--purple-800);
}

@font-face {
    font-family: 'Como-bold';
    src:    url('../fonts/como-bold-webfont.woff') format('woff'),
            url('../fonts/como-bold-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Como-light';
    src: url('../fonts/como-light-webfont.woff') format('woff'), 
        url('../fonts/como-light-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-black';
    src: url('../fonts/roboto/roboto-black-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-black-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-blackitalic';
    src: url('../fonts/roboto/roboto-blackitalic-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-blackitalic-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-bolditalic';
    src: url('../fonts/roboto/roboto-bolditalic-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-bold';
    src: url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-italic';
    src: url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-lightitalic';
    src: url('../fonts/roboto/roboto-lightitalic-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-lightitalic-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-light';
    src: url('../fonts/roboto/roboto-light-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-light-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-mediumitalic';
    src: url('../fonts/roboto/roboto-mediumitalic-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-mediumitalic-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-medium';
    src: url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-regular';
    src: url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-thinitalic';
    src: url('../fonts/roboto/roboto-thinitalic-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-thinitalic-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-thin';
    src: url('../fonts/roboto/roboto-thin-webfont.woff') format('woff'), 
        url('../fonts/roboto/roboto-thin-webfont.woff2') format('woff2');
}

body{
    font-family: 'Como-light', sans-serif;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container{
    width: 66%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container-header{
    font-family: 'Roboto-light', sans-serif;
    width: 90%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

i{
    font-size: 0.875rem;
}

a{
    text-decoration: none;
    color: var(--gray-500);
}

a:hover, i:hover{
    color: var(--pink-500);
}

ul{
    margin: 0;
}

body{
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
};

body, input, textarea, button{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

.mb-30{
    margin-bottom: 30px;
}

.mb-100{
    margin-bottom: 100px;
}

.pt-10{
    padding-top: 10px;
}

.pb-100{
    padding-bottom: 100px;
}

.bold{
    font-weight: bolder;
}

.diretoria{
    padding-bottom: 200px;
}

.diretoria ul{
    padding-top: 20px;
    font-size: 1rem;
    font-family: 'Roboto-regular';
    color: var(--gray-900);
}

.diretoria ul li{
    padding-top: 10px;
    display: flex;
}

.diretoria div i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--pink-400);
    margin: 0px 20px 0px 0px;
}

.background-black{
    background-color: var(--black);
}

.top-bar{
    height: 45px;
}

.contacts i{
    color: var(--green-500);
    margin: 10px;
}

.contacts a{
    font-size: 0.875rem;
    color: var(--gray-500);
}

.contacts a:hover{
    color: var(--green-500);
}

.contacts div{
    margin: 10px;
    display: flex;
    align-items: center;
}

.align-top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.policies{
    font-size: 0.75rem;
}

.sociais i{
    font-size: 1.5625rem;
    color: var(--white);
}

.sociais i:hover{
    color: var(--pink-500);
}

.social-media{
    margin-left: 14px;
}

.logo{
    margin-left: 20px;
}

.pos-absolute{
    position: absolute;
    width: 100%;
    background-color: var(--white);
}

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

.menu{
    font-family: 'Como-light', sans-serif;
    display: flex;
    list-style-type: none;
    font-size: 1.25rem;
}

.menu li{
    margin-right: 25px;
}

.button-cta{
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-cta i{
    font-size: 1.5rem;
    margin-right: 20px;
}

.text-banner{
    width: 70%;
    display: flex;
    justify-items: flex-end;
    color: var(--white);
    text-shadow: 1px 1px black;
}

.text-banner h1{
    font-family: 'Como-light', sans-serif;
    font-weight: bold;
    font-size: 4.5rem;
}

.hero{
    height: 915px;
    display: flex;
    align-items: flex-end;
}

.button{
    margin: 32px 0px 40px 0px;
    width: 200px;
    height: 60px;
    border-radius: 10px;
    background-color: var(--green-800);
    background: linear-gradient(to right, var(--green-800), var(--green-900));
    display: flex;
    align-items: center;
    justify-content: center;
}

.button a{
    font-family: 'Roboto-regular';
    color: var(--white);
}

.button-cta-slide p{
    margin: 0;
}

.button .button-cta-slide p:hover{
    color: var(--green-100);
}

.information-bubble{
    display: flex;
    background: linear-gradient(to right, var(--pink-500), var(--purple-800));
    width: 240px;
    height: 110px;
    border-radius: 10px 10px 0 10px;
}

.bubble{
    position: absolute;
    display: flex;
    z-index: 2;
    transform: translate(-50%, 100%);
}

.lines{
    position: absolute;
    z-index: 0;
    margin-left: 40px;
}

.information-bubble img{
    margin: 16px 5px 16px 15px;
}

.information-bubble p{
    margin: 22px 10px 22px 0px;
    color: var(--white);
    font-size: 0.75rem;
    line-height: 1rem;
}

.information-bubble span{
    font-family: 'Como-bold';
    line-height: 1.5rem;
    font-size: 2rem;
    font-weight: bolder;
}

.bubble-complete{
    display: flex;
    background: linear-gradient(to bottom left, transparent 50%, var(--purple-800) 50%);
    width: 20px;
    height: 20px;
    margin-left: -1px;
}

.main-img{
    z-index: 1;
}

.secundary-img{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
}

.secundary-img div{
    position: absolute;
    z-index: 2;
    border-radius: 10px;
    transform: translate(0%, -25%);
    padding: 5px;
    background-color: var(--white);
}

.about{
    background-color: var(--white);
    padding-top: 100px;
}

.about .image-content{
    display: flex;
    align-items: center;
}

.about-title{
    font-family: 'Roboto-light', sans-serif;
}

.about-title span{
    color: var(--red-800);
}
.about-title p{
    justify-content: left;
    color: var(--gray-900);
}

.about-title h1{
    font-family: 'Como-bold', sans-serif;
    font-size: 3rem;
}

.about-content{
    font-family: 'Roboto-light', sans-serif;
    color: var(--gray-900);
    font-size: 1.125rem;
}

.about-content span{
    font-weight: bold;
}

.about-list{
    display: flex;
    flex-direction: column;
    margin: 30px 0px;
}

.about-list div{
    font-family: 'Roboto-regular';
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}

.about-list div p{
    margin: 0;
}

.about-list div i{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--pink-400);
    margin: 0px 20px 0px 0px;
}

.button .button-cta-slide p{
    font-family: 'Roboto-regular', sans-serif;
    margin: 0;
    color: var(--white);
}

.about .button{
    font-family: 'Roboto-regular', sans-serif;
    margin: 0;
    color: var(--white);
}

.about .button p:hover{
    color: var(--green-100);
}

.title{
    display: flex;
    justify-content: center;
    font-family: 'Roboto-light', sans-serif;
    color: var(--gray-900);
    font-size: 1.125rem;
    font-weight: 700;
}

.title span{
    color: var(--red-800);
    margin-right: 5px;
}

.service{
    background-color: var(--white);
}

.service h1{
    font-size: 2.875rem;
    font-family: 'Como-bold', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-background{
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background-color: var(--gray-100);
    transform: translate(30%, 30%);
    z-index: 0;
}

.service-chart{    
    padding: 50px 100px 50px 50px;
}

.border-service-chart{
    z-index: 2;
    border: solid 1px;
    border-color: var(--gray-200);
    border-radius: 8px;
}

.service-chart h1{
    font-size: 1.375rem;
}

.button-next{
    display: flex;
    align-items: center;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border-color: var(--gray-200);
    box-shadow: 0px 7px 20px var(--gray-200);
}

.button-next i{
    width: 50px;
}

.align-circle-background{
    position: relative;
    padding-right: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
}

.service-chart p{
    font-family: 'Roboto-regular', sans-serif;
    color: var(--gray-900);
    font-size: 0.84rem;
}

.service-chart div{
    display: flex;
    justify-content: space-between;
}

.icon{
    margin-right: -70px;
    z-index: 2;
}

.button-next:hover{
    background: linear-gradient(to right, var(--pink-600), var(--purple-500));
}

.associados{
    height: 420px;
    margin-bottom: 320px;
}

.associados .title{
    font-family: 'Como-bold', sans-serif;
    color: var(--white);
    flex-direction: column;
}

.associados .title p{
    font-size: 1.25rem;
    margin-bottom: 0;
    line-height: 0.9;
}

.associados .title .number{
    font-size: 6.25rem;
    color: var(--white);
}

.associados .title .textTitle{
    font-size: 2.8125rem;
    color: var(--white);
}

.associados .description{
    padding: 80px 100px 50px 30px;
}

.associados .description .text{
    border-left: 1px solid var(--green-100);
    padding-left: 60px;
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    color: var(--white);
}

.carousel-associacao{
    height: 450px;
    position: absolute;
    display: flex;
    width: 90%;
    transform: translate(-14%, 0px);
}

.carousel-associacao div{
    border-radius: 15px;
    overflow: hidden;
    margin-right: 10px;
    width: 25%;
}

.carousel-associacao div a{
    display: flex;
    height: 100%;
    width: 100%;
}

.carousel-associacao div img{
    height: 450px;
}

.field-associe{
    display: flex;
    justify-content: space-between;
    width: 60%;
    background-color: var(--gray-300);
    border-radius: 30px;
    align-items: center;
}

.field-associe img{
    margin: 10px 0;
}

.field-associe p{
    font-family: 'Roboto-regular';
    font-size: 1.25rem;
    margin: 0 40px;
    color: var(--gray-400);
}

.news{
    background-color: var(--gray-50);
    padding-bottom: 300px;
}

.news .title{
    padding-bottom: 40px;
}

.news-block{
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.news-block .info{
    background-color: #fff;
    display: flex;
    width: 90%;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px 0px 12px 12px;
    transform: translateY(75%);
    padding: 20px 30px;
    height: 230px;
}

.news-block .info .data{
    font-family: 'Roboto-regular';
    color: var(--white);
    font-size: 0.75rem;
    background-color: var(--green-800);
    width: max-content;
    padding: 5px 25px;
    border-radius: 10px;
}

.news-block .info .text{
    margin-top: 20px;
    font-family: 'Como-bold';
    color: var(--black);
    font-size: 1.375rem;
}

.news-block .info .cta{
    font-family: 'Como-light';
    color: var(--black);
    font-size: 0.75rem;
}

.newsletter {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(to right, var(--green-200) 0%, var(--green-200) 40%, var(--blue-800) 50%, var(--purple-900) 60%, var(--purple-900) 100%);
    border-radius: 15px;
    transform: translateY(-50%);
}

.newsletter .text{
    font-family: 'Como-light';
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    color: var(--white);
    padding: 20px 0px 30px 0px;
}

.newsletter .text i{
    font-size: 3rem;
    color: var(--white);
    margin-right: 30px;
}

.newsletter .text p{
    margin-bottom: 0px;
}

.newsletter .text p span{
   font-weight: bold;
}

.newsletter .email{
    width: 540px;
    border-bottom: 2px var(--white);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.newsletter .email .content{
    display: flex;
    justify-content: space-between;
}

.newsletter .email textarea{
    border: none;
    background: none;
    box-shadow: none;
    resize: none; 
    outline: none; 
    padding: 10px 0px; 
    margin: 0;
}

.newsletter .email textarea::placeholder{
    color: var(--white);
    font-size: 1rem;
}

.border-textarea{
    height: 2px;
    background: linear-gradient(to right, var(--blue-100) 0%,  var(--purple-300) 30%);
    width: 100%;
}

.footer{
    background-color: var(--white);
}

.footer .subtitle{
    font-family: 'Roboto-regular';
    color: var(--gray-950);
    font-size: 0.9375rem;
    padding: 20px 0px 10px 0px;
}

.footer .social-media i{
    font-size: 40px;
    color: var(--green-700);
}

.footer .logo{
    margin: 0;
}

.footer .social-media{
    margin: 0;
}

.footer-content div div{
    padding: 0;
}

.footer .title{
    padding-top: 20px;
    font-family: 'Como-light';
    color: var(--green-700);
}

.footer .title h4{
    font-size: 1.25rem;
    font-weight: 600;
}

.footer .contacts .links{
    width: 100%;
}

.footer .social-media{
    width: 100%;
}

.footer .photos-instagram img{
    width: 90%;
}

.footer .logo img{
    width: 100%;
}

.navigation{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navigation .menu-footer{
    padding-top: 25px;
    font-family: 'Roboto-regular';
    text-decoration: none;
    font-size: 0.9375rem;
}

.footer-content .instagram{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-content .contacts{
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Roboto-regular';
    color: var(--gray-950);
}

.footer-content .contacts .links{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-content .contacts .links i{
    margin: 0;
    padding: 0px 10px 0px 0px;
    color: var(--green-700);
    font-size: 14px;
}

.box-text-banner{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.box-text-banner .text-banner-pages h1{
    font-family: 'Como-bold';
    color: var(--white);
}

.quem-somos{
    padding-top: 50px;
    background-color: var(--white);
}

.quem-somos .imagem{
    padding-left: 150px;
    position: relative;
    z-index: 1;
}

.quem-somos .imagem img{
    width: 90%;
}

.quem-somos .details{
    position: relative;
    z-index: -1;
    transform: translate(-5%, -110%);
    border-radius: 10px;
    height: 80%;
    overflow: hidden;
}

.details .details-line{
    background: linear-gradient(0deg, #e0e0e0, #fff 50%, #fff 100%);
    height: 100%;
    background-size: 1px 5px;
    transform: rotate(-45deg) translateX(16%) translateY(9%);
    pointer-events: none;
    width: 170%;
}

.quem-somos .box-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 200px;
}

.quem-somos .title{
    font-size: 1.125rem;
}

.quem-somos .text h1{
    font-size: 2.875rem;
    font-family: 'Como-bold';
}

.quem-somos .text p{
    padding-top: 10px;
    font-size: 1.125rem;
    font-family: 'Roboto-regular';
    color: var(--gray-900);
}

.core-values .content{
    padding-top: 80px;
    display: flex;
    align-items: flex-start;
    width: 75%;
    flex-direction: column;
}

.core-values .content .mission-vision{
    display: flex;
}

.core-values .content .mission-vision .box{
    width: 50%;
}

.core-values .box{
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 15px;
    margin: 0 15px 10px 0;
    padding: 40px;
}

.core-values .box h1{
    text-transform: uppercase;
    font-family: 'Como-bold';
    font-size: 1.5rem;
}

.core-values .box p{
    padding-top: 20px;
    font-family: 'Roboto-regular';
    font-size: 1.125rem;
    color: var(--gray-900);
}

.core-values .box ul{
    padding-top: 20px;
}

.core-values .box li{
    font-family: 'Roboto-regular';
    font-size: 1.125rem;
    color: var(--gray-900);
}

.core-values .box li span{
    font-family: 'Roboto-bold';
    color: var(--red-800);
}

.core-values .plant{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.core-values .plant img{
    position: absolute;
    transform: translate(-20%, 10%);
    width: 25%;
}

.atuacao{
    padding-top: 50px;
    background: linear-gradient(180deg, var(--white) 0%, var(--white) 95%, var(--gray-100) 96%, var(--gray-200) 100%);
}

.atuacao .content{
    display: flex;
    flex-direction: column;

}

.atuacao .content .box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0px 2px 2px var(--gray-200);
    height: 300px;
    align-items: stretch;
    margin-bottom: 60px;
    overflow: hidden;
}

.atuacao .content .box .text{
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 0px 0px 40px;
}

.atuacao .content .box .text h1{
    font-family: 'Como-bold';
    text-transform: uppercase;
    font-size: 1.375rem;
}

.atuacao .content .box .text p{
    padding-top: 20px;
    font-family: 'Roboto-regular';
    font-size: 1.25rem;
    color: var(--gray-900);
}

.atuacao .content .box .details{
    width: 55%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
}

.atuacao .content .box .circle{
    border-radius: 50%;
    background-color: var(--gray-100);
    height: 210px;
    width: 210px;
    transform: translate(25%, 25%);

}

.atuacao .content .box .circle i{
    color: var(--pink-400);
    font-size: 50px;
    transform: translate(100%, 100%);
}

.noticias{
    padding-top: 50px;
    background: linear-gradient(180deg, var(--white) 0%, var(--white) 95%, var(--gray-100) 96%, var(--gray-200) 100%);
}

.noticias .box{
    height: 300px;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    margin-bottom: 500px;
}

.noticias .box .content{
    background-color: var(--white);
    height: 270px;
    border-radius: 10px;
    width: 90%;
    transform: translateY(80%);
    padding: 30px 30px 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.noticias .box .content .data{
    font-family: 'Roboto-regular';
    color: var(--white);
    font-size: 0.75rem;
    background-color: var(--pink-400);
    width: max-content;
    padding: 5px 25px;
    border-radius: 10px;
}

.noticias .box .content .text{
    margin-top: 20px;
    font-family: 'Como-bold';
    color: var(--black);
    font-size: 1rem;
}

.noticias .box .content .text h1{
    font-size: 1.375rem;
}

.noticias .box .content .text p{
    font-family: 'Roboto-regular';
    color: var(--gray-900);
    font-size: 1rem;
}

.noticias .box .content .cta{
    font-family: 'Como-bold';
}

.noticias .box .content .cta a{
    color: var(--black);
    font-size: 0.75rem;
    display: flex;
}

.noticias .box .content .cta a:hover{
    color: var(--red-800);
}

.noticias .box .content .cta a i{
    transform: scaleX(2.5);
    display: flex;
    font-size: 16px;
    margin-right: 10px;
}

.pag-associados{
    padding-top: 50px;
    background: linear-gradient(180deg, var(--white) 0%, var(--white) 95%, var(--gray-100) 96%, var(--gray-200) 100%);
}

.pag-associados .img{
    margin-top: 15px;
    height: 310px;
    border-radius: 10px;
}

.pag-associados .container{
    margin-top: 60px;
}

.contato-page{
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: linear-gradient(180deg, var(--white) 0%, var(--white) 95%, var(--gray-100) 96%, var(--gray-200) 100%);
}

.contato-page .map{
    display: flex;
    justify-content: space-around;
}

.contato-page .contact-info{
    display: flex;
    align-items: center;
    width: 90%;
}

.contato-page .content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 80%;
}

.contato-page .content .text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contato-page .content .text .title h1{
    font-family: 'Como-bold';
    font-size: 2.125rem;
    color: var(--black);
    margin-bottom: 20px;
}

.contato-page .content .text .description p{
    font-family: 'Roboto-regular';
    font-size: 1.25rem;
    color: var(--gray-500);
}

.contato-page .content .endereco{
    padding-top: 40px;
    border-top: solid 1px var(--gray-200);
    font-family: 'Como-bold';
    font-size: 1.25rem;
    color: var(--black);
    margin-bottom: 20px;
}

.contato-page .content .telefone{
    display: flex;
    font-family: 'Como-bold';
    width: 100%;
}

.contato-page .content .telefone i{
    font-size: 64px;
    color: var(--green-500);
}

.contato-page .content .telefone .content span{
    color: var(--black);
    font-size: 2.8125rem;
    padding-left: 10px;
}

.contato-page .content .telefone .content p{ 
    color: var(--black);
    font-size: 1.5rem;
    margin: 0;
}

.indoor-banner{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: url('../images/background-banner.png') center center; 
    background-repeat: no-repeat;  
    height: 460px; 
    background-color: white;
    background-size:cover;
}

.menu-extras {
    float: right;
}

.menu-extras .menu-item {
    border-color: #8c98a4;
}

.navbar-toggle {
    border: 0;
    position: relative;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.navbar-toggle .lines {
    width: 25px;
    display: block;
    position: relative;
    margin: 30px 0 26px 10px;
    height: 18px;
}

.navbar-toggle span {
    height: 2px;
    width: 100%;
    background-color: #3c4858;
    display: block;
    margin-bottom: 5px;
    transition: transform .5s ease;
}

.navbar-toggle span:last-child {
    margin-bottom: 0;
}

.menu-mobile{
    display: none;
    flex-direction: column;
    position: relative;
}

.menu-mobile li{
    padding: 10px 0px;
}

.submenu-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    padding: 10px;
}

.submenu:hover .submenu-items {
    display: block;
}

.submenu {
    position: relative;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: var(--gray-500);
    text-decoration: none;
}

.submenu-items li a {
    white-space: nowrap;
}

.box-text .button{
    font-family: 'Roboto-regular', sans-serif;
    margin: 0;
    color: var(--white);
}

.pagination a{
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid var(--bs-gray-500);
}

.pagination span{
    font-family: 'Roboto-regular';
    padding: 10px 2px;
    color: var(--gray-850);
}

.noticia-interna .img{
    display: flex;
    justify-content: center;
}

.noticia-interna img{
    padding: 20px;
    height: 500px;
    width: auto;
}

.portal{
    padding-bottom: 100px;
}

.noticia-interna h2{
    font-family: 'Como-bold';
    font-size: 2.8125rem;
}

.noticia-interna p{
    font-family: 'Roboto-regular';
    font-size: 1.25rem;
    color: var(--gray-850);
}

.pagination{
    display: flex;
    justify-content: center;
}

.noticias-button{
    margin-top: 50px;
}

.noticias-button a{
    font-family: 'Roboto-regular';
    color: var(--white);
    background-color: var(--green-200);
    padding: 10px 20px;
    border-radius: 8px;
}

@media(min-width: 1024px){
    .menu-extras {
        display: none;
    }
}

@media(max-width: 1023px){
    .menu{
        display: none;
    }

    #topnav .top-bar{
        display: none !important;
    }

    .submenu:hover .submenu-items {
        display: contents;
    }
}

@media(max-width: 1200px){
    .about .image-content {
        margin: 50px 0px 100px 20%;
        height: 350px;
    }
}

@media(min-width: 1200px) and (max-width: 1400px){
    .about .image-content {
        margin-left: -12%;
    }

    .about {
        padding-left: 5%;
    }
}

@media(max-width: 1800px){

    .container {
        width: 80%;
    }

    .indoor-banner{ 
        height: 350px; 
    }

    .contato-page .map {
        padding-left: 100px;
    }

    .quem-somos {
        margin-bottom: 150px;
    }

    .quem-somos .box-text {
        padding-right: 80px;
    }

    .news-block .info {
        transform: translateY(60%);
        height: 270px;
    }

    .news-block {
        height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .field-associe {
        width: 80%;
    }

    .carousel-associacao{
        height: 400px;
        transform: translate(-5%, 0px);
    }

    .icon {
        margin-right: -25px;
    }

    .about {
        padding-top: 50px;
    }

    .service-chart {
        padding: 50px 50px 50px 50px;
    }

    .container-header .logo{
        width: 40%;
    }

    .container-header .logo img{
        width: 90%;
    }

    .container-header .menu{
        font-size: 1rem;
        width: 100%;
    }

    .about .container{
        width: 90%;
        margin-left: 10%;
        padding-right: 5%;
    }

    .hero{
        height: 700px;
    }

    .text-banner h1 {
        font-size: 3.5rem;
    }
}

@media(min-width: 1440px) and (max-width: 1800px){
    .hero{
        height: 800px;
    }
}

@media(min-width: 1650px) and (max-width: 1800px){
    .carousel-associacao {
        height: 400px;
        transform: translate(-8%, 0px);
    }
}

@media(max-width: 1324px){

    .indoor-banner{ 
        height: 300px; 
    }

    .contato-page .content {
        width: 100%;
    }

    .contato-page .map {
        padding-left: 50px;
    }

    .core-values .plant img {
        transform: translate(-10%, 12%);
    }

    .quem-somos {
        margin-bottom: 250px;
    }

    .news-block .info {
        height: auto;
    }

    .news-block {
        height: 240px;
    }

    .field-associe{
        width: 80%;
    }

    .associados {
        margin-bottom: 200px;
    }

    .carousel-associacao{
        height: 300px;
        transform: translate(-5%, 0px);
    }

    .circle-background {
        transform: translate(50%, 50%);
    }

    .icon {
        margin-right: -10px;
        z-index: 2;
    }

    .service-chart {
        padding: 20px 20px 20px 20px;
    }

    .container{
        width: 80%;
    }

    .container-header .logo{
        width: 20%;
    }

    .container-header .logo img{
        width: 100%;
    }

    .container-header .menu {
        font-size: 0.75rem;
        width: 60%;
        padding-left: 10px;
    }

    .container-header .button-cta {
        width: 20%;
    }

    .container-header .button-cta img{
        width: 90%;
    }
    
    .contacts div{
        margin: 0;
    }

    .contacts .phone{
        width: 33%;
    }

    .social-media {
        width: 50%;
    }

    .hero{
        height: 600px;
    }

    .text-banner h1 {
        font-size: 2.5rem;
    }

    .button {
        width: 170px;
        height: 50px;
    }

    .about {
        padding-top: 10px;
    }

    .about .container{
        width: 90%;
        margin-left: 10%;
        padding-right: 5%;
    }

    .news {
        padding-bottom: 350px;
    }
    
}

@media (max-width: 1023px){
    .container-header .button-cta {
        display: none;
    }

    .container-header .logo {
        width: 50%;
        display: flex;
        justify-content: center;
    }

    .header {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .menu-extras {
        width: 20%;
    }
}

@media (max-width: 992px){
    .col-atuacao{
        display: flex;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .border-service-chart{
        width: 60%;
    }

    .carousel-associacao {
        height: 250px;
        transform: translate(-6%, 0px);
    }

    .col-news{
        padding-bottom: 100px;
    }

    .news {
        padding-bottom: 150px;
    }

    .container-header .button-cta img {
        transform: scale(1.5);
    }

    .button-cta i {
        padding-right: 50px;
    }

    .container-header .button-cta {
        width: 30%;
    }
}


@media (max-width: 768px){
    .about .image-content {
        margin: 50px 0px 100px 10%;
        height: 350px;
        transform: scale(0.9);
    }

    .carousel-associacao{
        display: none;
    }

    .associados {
        margin-bottom: 50px;
    }

    .field-associe p {
        font-size: 0.9375rem;
    }

    .container-header .button-cta img {
        transform: scale(1);
    }
    
    .menu-extras {
        width: 20%;
    }

    .container-header .logo {
        width: 50%;
        display: flex;
        justify-content: center;
    }

    .header {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .text-banner h1 {
        font-size: 2rem;
    }

    .quem-somos .box-text {
        padding-left: 80px;
    }

    .quem-somos .imagem {
        padding-left: 10%;
        margin-bottom: -30%;
    }

    .portal .imagem {
        padding-left: 10%;
        margin-bottom: 0;
    }

    .atuacao .content .box .details {
        display: none;
    }

    .atuacao .content .box .text {
        width: 100%;
    }

    .contato-page .content .telefone .content span {
        font-size: 1.75rem;
    }

    .contato-page .content .telefone .content p {
        font-size: 1.25rem;
    }

    .contato-page .contact-info {
        width: 100%;
    }
    
}

@media (max-width: 767px){
    .contato-page .content {
        padding: 20px 15%;
    }
}

@media (max-width: 668px){
    .about .image-content {
        margin: 40px 0px 40px -8%;
        height: 350px;
        transform: scale(0.6);
    }

    .newsletter {
        flex-direction: column;
    }

    .border-textarea {
        background: linear-gradient(var(--gray-100));
    }

    .newsletter .email .content {
        justify-content: space-around;
    }

    .newsletter .text p {
        font-size: 0.9375rem;
    }

    .newsletter .text {
        padding: 10px 0px 0px 0px;
    }

    .newsletter .email {
        padding: 10px;
    }
}

@media (max-width: 576px){
    .footer-content .instagram {
        align-items: center;
    }

    .footer-content .contacts{
        align-items: center;
    }

    .footer-content .contacts .links{
        align-items: center;
    }

    .footer .social-media {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .associados .description {
        padding: 40px 40px 50px 10px;
    }

    .newsletter .email {
        width: 100%;
    }

    .field-associe {
        display: flex;
        flex-direction: column;
    }

    .about .image-content {
        margin: 40px 0px 40px -10%;
    }

    .associados .description .text {
        padding: 20px 5px;
    }
    
    .col-news {
        padding-bottom: 200px;
    }

    .border-service-chart {
        width: 100%;
    }

    .core-values .content .mission-vision {
        flex-direction: column;
    }

    .core-values .content .mission-vision .box {
        width: 100%;
        background-color: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 15px;
        margin: 0 15px 10px 0;
        padding: 40px;
    }

    .core-values .box {
        width: 100%;
    }

    .core-values .plant {
        display: none;
    }

    .contato-page .content .telefone .content span {
        font-size: 1.5rem;
    }

    .contato-page .telefone .content {
        padding: 0;
    }

}

@media (max-width: 470px){
    .about .image-content {
        margin: 40px 0px 40px -20%;
        transform: scale(0.5);
    }

    .service-chart {
        padding: 10px 5px 10px 10px;
    }

    .contato-page .content .telefone i{
        display: none;
    }

    .contato-page .content .telefone .content span {
        font-size: 1.25rem;
    }

    .contato-page .content .telefone .content p {
        font-size: 1rem;
    }
}

@media (max-width: 400px){
    .about .image-content {
        margin: 40px 0px 40px -30%;
        transform: scale(0.5);
    }

    .col-news {
        padding-bottom: 300px;
    }
}

@media (max-width: 370px){
    .about .image-content {
        margin: 40px 0px 40px -40%;
        transform: scale(0.4);
    }

    .noticias .box {
        height: 400px;
    }
}