:root {
    --cor-1: #FFE47D;
    --cor-2: #1B8ED8;
    --cor-3: #088B3A;
    --text-dark-1: #333;
    --text-dark-2: #666;
    --text-dark-3: #b4b4b4;
    --text-light-1: #fff;
    --icon-1: rgba(255,255,255, 0.6);
    --line-1: #EBEBEB;
    --bg-color-1: #fff;
    --bg-color-2: #EAEAEA;
    --bg-color-3: #EAEAEA;
    --bg-color-4: #222;
    --bg-color-5: #444;
    --gradient-1: linear-gradient(324.7deg, #00CBFF -14.26%, #1E85D2 113.36%);
    --gradient-2: linear-gradient(322.44deg, #76B73F 5.34%, #088B3A 118.08%);
    --gradient-3: linear-gradient(141.34deg, #FDCA04 -10.26%, #FFE47D 112.39%);
    --animate-duration: 1s;
}

* {
    padding:0;
    margin:0;
    vertical-align:baseline;
    list-style:none;
    border:0;
    font-family: 'Poppins', sans-serif;
    font-size: 62.5%;
    box-sizing: border-box;
    color: var(--text-dark-1);
}

/* ###################### ICONS ###################### */
.fone {
    mask: url('../img/icon/fone.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/fone.svg') no-repeat center / contain;
}

.cadeado {
    mask: url('../img/icon/cadeado.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/cadeado.svg') no-repeat center / contain;
}

.boleto {
    mask: url('../img/icon/boleto.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/boleto.svg') no-repeat center / contain;
}

.cone {
    mask: url('../img/icon/cone.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/cone.svg') no-repeat center / contain;  
}

.furto {
    mask: url('../img/icon/furto.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/furto.svg') no-repeat center / contain;  
}

.assistencia {
    mask: url('../img/icon/assistencia.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/assistencia.svg') no-repeat center / contain;  
}

.guincho {
    mask: url('../img/icon/guincho.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/guincho.svg') no-repeat center / contain;  
}

.vidro {
    mask: url('../img/icon/vidro.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/vidro.svg') no-repeat center / contain;  
}

.app {
    mask: url('../img/icon/shield.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/shield.svg') no-repeat center / contain;  
}

.separador {
    mask: url('../img/icon/separador.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/separador.svg') no-repeat center / contain;     
}

.quem-somos {
    mask: url('../img/img_quem_somos.svg') no-repeat center / contain;
    -webkit-mask: url('../img/img_quem_somos.svg') no-repeat center / contain; 
}

.pdf {
    mask: url('../img/icon/pdf.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/pdf.svg') no-repeat center / contain;    
}

.horario {
    mask: url('../img/icon/horario.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/horario.svg') no-repeat center / contain;   
}

.pesquisar {
    mask: url('../img/icon/pesquisar.svg') no-repeat center / contain;
    -webkit-mask: url('../img/icon/pesquisar.svg') no-repeat center / contain;   
}

/* ###################### BODY ###################### */
.on {
    opacity: 1;
    transition: opacity 2s;
    animation: opacityOn 2s;
}

.off {
    opacity: 0;
    transition: opacity 2s;
    animation: opacityOff 2s;
}

.visible {
    display: block;
}

.hide {
    display: none;
}

/* ###################### BODY ###################### */
body { overflow: overlay; }
body > section,
body > header { display: flex; justify-content: center;}

/* ###################### HEADER - 1 ###################### */
#header-admin { position: absolute; z-index: 100; width: 100vw; height: 60px; display: flex; justify-content: center;}
#header-admin .wrapper { width: 85vw; max-width: 1370px; height: 100%; display: flex; justify-content: space-between;}

#header-menu { width: 100vw; position: fixed; z-index: 100; top: 60px; display: flex; align-items: center; justify-content: center; transition: top .2s;}
#header-menu .wrapper { height: 80px; padding: 0 0px ;background-color: var(--bg-color-1);  display: flex; align-items: center; justify-content: center; }
#header-menu .wrapper .container { position: relative; width: 100%; max-width: 1320px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
#header-menu .wrapper .container > a { height: 57px; margin: 0; padding: 0; }
#header-menu .normal { 
    width: 1370px; 
    border-radius: 5px; 
    transition: width .8s, border-radius 1s;
}
#header-menu .scroll { 
    width: 100%; 
    border-radius: 0px; 
    box-shadow: 0 0px 3px 1px #cccccc50;
    transition: width .8s, border-radius 1s;
}

#header-admin .block { display: flex; margin: 0 20px;}
#header-admin .block span { display: flex; align-items: center;}
#header-admin .block span a { font-size: 1.3rem; font-weight: 600; line-height: 1.95rem; margin-left: 5px; color: var(--cor-1); text-decoration: none;}
#header-admin .block span a:hover { text-decoration: underline;}
#header-admin .block span:nth-child(1){ margin-right: 20px; }
#header-admin .icon { width: 13px; height: 12px; background-color: var(--icon-1); }

#header-menu nav#menu-h { display: flex; align-items: stretch; height: 100%;}
#header-menu nav#menu-h a { font-size: 1.3rem; font-weight: 600; color: var(--text-dark-1); height: calc(100%-5px); padding: 5px 15px 0; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; border-bottom: 5px solid transparent;}
#header-menu nav#menu-h a:hover  { background: #cccccc50; border-bottom: 5px solid #cccccc50}
#header-menu nav#menu-h a.active { color: var(--cor-2); border-bottom: 5px solid var(--cor-2);}

#header-menu.menu-2 { top: 44px;}

/* #header-menu a.menu-burguer { display: none; width: 24px; height: 20px; flex-direction: column; justify-content: space-between;}
#header-menu a.menu-burguer span{ width: 100%; height: 3px; background-color: #333;} */
#header-menu a.menu-burguer { display: none; position: absolute; z-index: 200; width: 60px; height: 60px; top: 10px; right: 0; cursor: pointer;}
#header-menu a.menu-burguer .burguer-left { border-radius: 10px; background-color: #333; position: absolute; height: 4px; width: 30px; top: 30px; left: 0px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
#header-menu a.menu-burguer .burguer-right {border-radius: 10px; background-color: #333; position: absolute; height: 4px; width: 30px; top: 30px; left: 0px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
/* #header-menu a.menu-burguer .burguer-left:before { background-color: #333; position: absolute; height: 4px; width: 30px; content: ""; top: -10px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
#header-menu a.menu-burguer .burguer-left:after { background-color: #333; position: absolute; height: 4px; width: 30px; content: ""; top: 10px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;} */
#header-menu a.menu-burguer .burguer-right:before {border-radius: 10px; background-color: #333; position: absolute; height: 4px; width: 30px; content: ""; top: -10px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
#header-menu a.menu-burguer .burguer-right:after {border-radius: 10px; background-color: #333; position: absolute; height: 4px; width: 30px; content: ""; top: 10px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}

#header-menu a.menu-burguer.active .burguer-left {border-radius: 10px;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: transparent;}
/* #header-menu a.menu-burguer.active .burguer-left:before { 
    -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(6px, 6px);
    transform: rotateZ(45deg) scaleX(1.4) translate(6px, 6px);
} */
/* #header-menu a.menu-burguer.active .burguer-left:after { 
    -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(6px, -6px);
    transform: rotateZ(-45deg) scaleX(1.4) translate(6px, -6px);
} */

#header-menu a.menu-burguer.active .burguer-right {  -webkit-transition-duration: 0.5s; transition-duration: 0.5s; background: transparent;}
#header-menu a.menu-burguer.active .burguer-right:before { 
    -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-6px, 6px);
    transform: rotateZ(-45deg) scaleX(1.4) translate(-6px, 6px);
}
#header-menu a.menu-burguer.active .burguer-right:after { 
    -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-5px, -6px);
    transform: rotateZ(45deg) scaleX(1.4) translate(-5px, -6px);
}

/* ###################### HEADER - MOBILE ###################### */

#header-menu #mobile-background { width: 100vw; height: 100vh; position: fixed; background-color: rgba(0, 0, 0, 0.6); left: -100vw; top: 0; transition: left 1s;}
#header-menu #mobile-nav {
    display: block; width: 350px;  height: 100vh; padding: 90px 40px 20px; position: fixed; z-index: 100; top: 0; right: -350px; background: var(--bg-color-1); transition: right 1s;}

#header-menu #mobile-nav span { font-size: 4.2rem; margin-bottom: 50px; }

#header-menu #mobile-nav .items-menu {display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px;}
#header-menu #mobile-nav .items-menu h4 {font-size: 1.7rem; font-weight: 700; color: var(--text-dark-1); text-transform: uppercase; text-decoration: none; cursor: pointer;}
#header-menu #mobile-nav .items-menu a {font-size: 1.5rem; font-weight: 600; color: var(--text-dark-1); text-transform: uppercase; text-decoration: none; cursor: pointer;}



/* ###################### HEADER - 2 ###################### */
#header-admin2 { position: absolute; z-index: 100; width: 100vw; height: 44px; display: flex; justify-content: center; margin: 0 auto; background: var(--gradient-2);}
#header-admin2 .container { width: 85vw; max-width: 1370px; height: 44px; display: flex; justify-content: space-between; margin: 0 auto; }

#header-admin2 .block { display: flex; margin: 0 20px;}
#header-admin2 .block span { display: flex; align-items: center;}
#header-admin2 .block span a { font-size: 1.3rem; font-weight: 600; line-height: 1.95rem; margin-left: 5px; color: var(--cor-1); text-decoration: none;}
#header-admin2 .block span a:hover { text-decoration: underline;}
#header-admin2 .block span:nth-child(1){ margin-right: 20px; }
#header-admin2 .icon { width: 13px; height: 12px; background-color: var(--icon-1); }

/* ###################### BASICOS ###################### */
.box { width: 80vw; max-width: 1150px; height: 100%; display: flex; }
.box-content { padding: 210px 0 0 0;}
/* .btn { font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; padding: 15px 25px; border-radius: 100px; text-decoration: none; text-transform: uppercase; transition: opacity .5s;} */
.btn { 
    position: relative;
    font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; 
    padding: 15px 25px; border-radius: 100px; 
    text-decoration: none; text-transform: uppercase; 
    /* -webkit-backface-visibility: hidden; */
    z-index: 1;
}
/* .btn:hover { opacity: 0.8; } */

/* ###################### TOP ###################### */
#top { 
    width: 100vw; 
    height: 75vh;
    min-height: 660px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
    background-image: url('../img/header_main.jpg');
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#top .box { flex-direction: column; align-items: center; justify-content: flex-start;}
#top .box .title-box { width: 100%; height: 70%; display: flex; justify-content: center; align-items: flex-end; }
#top .box .title-box h2 { width: 80%; height: 160px; color: #fff; font-size: 6rem; font-style: italic; line-height: 7rem; text-align: center; }


#top #top-separador { width: 50%; height: 40px; position: relative; overflow: hidden; display: flex;  justify-content: center; align-items: flex-end;   }
#top #top-separador .separador-box{ position: absolute; top: -35px; width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; animation-name: fadeIn; animation-duration: 2s; animation-delay: 2s; animation-fill-mode: forwards; }
#top #top-separador .line { width: 15%; height: 2px; background-color: var(--bg-color-2); opacity: 0.5; }
#top #top-separador .icon { width: 26px; height: 26px; background: var(--bg-color-2); opacity: 0.5; margin: 0 20px;}

@keyframes fadeIn {
    from {
        opacity: 0;
        top: -35px;    
    }
    to {
        opacity: 1;
        top: 0px;
    }

}

/* ###################### HISTORIA ###################### */
#historia {
    width: 100vw; 
    height: 15vh;
    background: var(--gradient-2);
}

#historia .box { align-items: center; justify-content: space-between; }
#historia p { font-size: 1.6rem; font-weight: 500; font-style: italic; line-height: 2.4rem; width: 40%; color: var(--text-light-1)}
#historia a { padding: 15px 25px; background-color: var(--bg-color-1); border-radius: 100px; text-decoration: none;}
#historia a:hover {
    opacity: 0.5;
    transition: opacity .5s;
}
#historia a span{ 
    font-size: 1.3rem; 
    font-weight: 600;
    background: var(--gradient-2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ###################### SERVIÇOS - PLANOS / PROTEÇÃO ###################### */

#servicos { width: 100vw; display: flex; align-items: center; flex-direction: column;}
#servicos #protecao.box,
#servicos #planos.box { flex-direction: column; align-items: center; min-height: 45vh; justify-content: center; }

#servicos #protecao.box .double-block,
#servicos #planos.box .double-block{ display: flex; }

#servicos #protecao.box .left,
#servicos #planos.box .left { width: 50%; display: flex; flex-direction: column; align-items: flex-start; }

#servicos #protecao.box .left h3,
#servicos #planos.box .left h3 { font-size: 3.6rem; font-weight: 700; line-height: 5.4rem; margin-bottom: 8px;}

#servicos #protecao.box .left p,
#servicos #planos.box .left p { width: 80%; font-size: 1.5rem; font-weight: 300; line-height: 2.25rem; margin-bottom: 20px;}

#servicos #protecao.box .btn-container,
#servicos #planos.box .btn-container { width: 100%; display: flex; justify-content: flex-start;}

#servicos #protecao.box .btn-container .btn-protecao { background: var(--gradient-2);  color: var(--text-light-1); }
#servicos #protecao.box .btn-container .btn-protecao:after {
    position: absolute;
    top: 0; left: 0;
    content: 'Saiba mais';
    font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; 
    padding: 15px 25px; border-radius: 100px; 
    width: 100%; height: 100%;
    color: var(--cor-3);  
    background: var(--bg-color-1);
    border: 1px solid var(--cor-3);
    white-space: nowrap;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: 2;
}

#servicos #protecao.box .btn-container .btn-protecao:hover:after {
    opacity: 1;
}



#servicos #planos.box .btn-container .btn-planos { background: var(--gradient-1); color: var(--text-light-1);}
#servicos #planos.box .btn-container .btn-planos:after {
    position: absolute;
    top: 0; left: 0;
    content: 'Saiba mais';
    font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; 
    padding: 15px 25px; border-radius: 100px; 
    width: 100%; height: 100%;
    color: var(--cor-2);  
    background: var(--bg-color-1);
    border: 1px solid var(--cor-2);
    white-space: nowrap;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: 2;
}

#servicos #planos.box .btn-container .btn-planos:hover:after {
    opacity: 1;
}

#servicos #protecao.box .right,
#servicos #planos.box .right { width: 50%; display: flex; align-items: center; justify-content: space-between; }

#servicos #protecao.box .right .item,
#servicos #planos.box .right .item { display: flex; flex-direction: column; align-items: center; width: 172px;}

#servicos #protecao.box .right .item .icon-box,
#servicos #planos.box .right .item .icon-box {
    width: 56px; height: 56px;
}

#servicos #protecao.box .right .item .icon { width: 55px; height: 51px; background: var(--gradient-2); margin-bottom: 22px;}
#servicos #planos.box .right .item .icon { width: 55px; height: 51px; background: var(--gradient-1); margin-bottom: 22px;}


#servicos #protecao.box .right .item .title-text,
#servicos #planos.box .right .item .title-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#servicos #protecao.box .right .item h4,
#servicos #planos.box .right .item h4 { font-size: 1.5rem; font-weight: 600; line-height: 2.2rem; margin-bottom: 6.5px;}

#servicos #protecao.box .right .item p,
#servicos #planos.box .right .item p { font-size: 1.3rem; font-weight: 400; line-height: 1.95rem; text-align: center; height: 50px;}

/* ###################### SERVIÇOS - SEPARADOR ###################### */
#servicos #separador.box { align-items: center; position: relative;}
#servicos #separador.box .line { width: 100%; height: 1px; background-color: var(--line-1); }
#servicos #separador.box .box-icon { width: 48px; height: 16px; background-color: #fff; position: absolute; left: calc(50% - 24px);}
#servicos #separador.box .box-icon .icon { width: 26px; height: 26px; background: var(--line-1); position: absolute; left: calc(50% - 13px);}

/* ###################### SERVIÇOS - ACESSO ###################### */
#servicos #acesso.box { height: 10vh; min-height: 160px; margin: 40px 0 60px 0;}
#servicos #acesso.box .container-acesso { 
    width: 100%; height: 100%;
    display: flex; 
    border-radius: 6px; 
    background-color: var(--bg-color-2); 
    position: relative;
    overflow: hidden;
}
#servicos #acesso.box .container-acesso img { position: absolute; z-index: 0; height: 138.83px; transform: matrix(1.2, -0.3, 0.3, 1.2, -29, 42); opacity: 0.8;}

#servicos #acesso.box .container-acesso .left { 
    width: 60%; 
    padding: 35px 69px;  
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#servicos #acesso.box .container-acesso .left h3 { position: relative; z-index: 5; font-size: 2rem;  font-weight: 600; line-height: 3rem; margin: 0 0 4px 0;}
#servicos #acesso.box .container-acesso .left p { position: relative; z-index: 5; font-size: 1.5rem; font-weight: 300; color: var(--text-dark-2); line-height: 2.25rem;}
#servicos #acesso.box .container-acesso .right { 
    width: 40%; 
    padding: 35px 69px;  
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#servicos #acesso.box .container-acesso .right .btn-acesso { background: var(--gradient-1); color: var(--text-light-1);}
#servicos #acesso.box .container-acesso .right .btn-acesso:after {
    position: absolute;
    top: 0; left: 0;
    content: 'Acessar área do associado';
    font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; 
    padding: 15px 25px; border-radius: 100px; 
    width: 100%; height: 100%;
    color: var(--cor-2);  
    background: var(--bg-color-1);
    border: 1px solid var(--cor-2);
    white-space: nowrap;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: 2;
}

#servicos #acesso.box .container-acesso .right .btn-acesso:hover:after {
    opacity: 1;
}
/* ###################### NOTÍCIAS ###################### */
#ultimas-noticias { width: 100vw; display: flex; align-items: center; padding: 64px 0; background-color: var(--bg-color-3) ;}
#ultimas-noticias .box { display: flex; flex-direction: column; align-items: flex-start;}

#ultimas-noticias .box .title h2{ font-size: 3.6rem; line-height: 5.4rem; font-weight: 700; margin: 0 0 48px 0;}

#ultimas-noticias .box .container-cards{ width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 52px; padding: 0 0 60px 0;}
#ultimas-noticias .box .container-cards a ,
#page-noticias .box .container-cards a { text-decoration: none; }
#ultimas-noticias .box .container-cards .post-card ,
#page-noticias .box .container-cards .post-card { width: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px;}
#ultimas-noticias .box .container-cards .post-card .img-card ,
#page-noticias .box .container-cards .post-card .img-card { width: 100%; height: 220px; }
#ultimas-noticias .box .container-cards .post-card .img-card figure,
#page-noticias .box .container-cards .post-card .img-card figure { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
#ultimas-noticias .box .container-cards .post-card .content-card,
#page-noticias .box .container-cards .post-card .content-card { width: 100%; min-height: 250px; background-color: var(--bg-color-1); padding: 24px 35px 24px 27px; }
#ultimas-noticias .box .container-cards .post-card .content-card h3 ,
#page-noticias .box .container-cards .post-card .content-card h3 { font-size: 2rem; font-weight: 600; line-height: 2.3rem; margin: 0 0 15px 0; }
#ultimas-noticias .box .container-cards .post-card .content-card p ,
#page-noticias .box .container-cards .post-card .content-card p { font-size: 1.5rem; font-weight: 300; line-height: 2.25rem; color: var(--text-dark-2);  margin: 0 0 6px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
#ultimas-noticias .box .container-cards .post-card .content-card .leia-mais ,
#page-noticias .box .container-cards .post-card .content-card .leia-mais {font-size: 1.5rem; font-weight: 500; line-height: 2.25rem;  color: var(--cor-2); text-decoration: underline; }

#ultimas-noticias .box .container-btn{ width: 100%; display: flex; justify-content: center;}
#ultimas-noticias .box .container-btn .btn-noticias{ background: var(--gradient-1); color: var(--text-light-1);}
#ultimas-noticias .box .container-btn .btn-noticias:after {
    position: absolute;
    top: 0; left: 0;
    content: 'Ir para as notícias';
    font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; 
    padding: 15px 25px; border-radius: 100px; 
    width: 100%; height: 100%;
    color: var(--cor-2);  
    background: var(--bg-color-1);
    border: 1px solid var(--cor-2);
    white-space: nowrap;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: 2;
}

#ultimas-noticias .box .container-btn .btn-noticias:hover:after {
    opacity: 1;
}

/* ###################### FOOTER ###################### */
/* ###################### FOOTER - CONTADORES  ###################### */
footer { height: auto; }
footer .contadores { width: 100%; height: 300px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;}

footer .contadores .associados,
footer .contadores .veiculos,
footer .contadores .protecoes { height: 100%;  position: relative;}

footer .contadores .associados { background-color: var(--cor-3)}
footer .contadores .veiculos { background: var(--cor-2); }
footer .contadores .protecoes { background: var(--cor-1); } 

footer .contadores .associados figure,
footer .contadores .veiculos figure,
footer .contadores .protecoes figure {mix-blend-mode: hard-light; width: 100%; height: 100%; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center;}

footer .contadores .associados .content,
footer .contadores .veiculos .content ,
footer .contadores .protecoes .content {width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center;}

footer .contadores .associados .contar ,
footer .contadores .veiculos .contar ,
footer .contadores .protecoes .contar {width: 100%; height: 80px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}

footer .contadores .associados .contar .num,
footer .contadores .veiculos .contar .num,
footer .contadores .protecoes .contar .num {height: 80px;  }


footer .contadores .associados span,
footer .contadores .veiculos span,
footer .contadores .protecoes span {  font-size: 7.8rem; font-weight: 600; line-height: 10rem; color: var(--text-light-1)}

footer .contadores .associados h4,
footer .contadores .veiculos h4,
footer .contadores .protecoes h4 { font-size: 1.7rem; font-weight: 500; line-height: 2.55rem; color: var(--cor-1)}

/* ###################### FOOTER - RODAPE - APP-BOX ###################### */

footer #rodape { width: 100%; background: var(--bg-color-4); display: flex; flex-direction: column; align-items: center;}
footer #rodape #app-box.box { display: flex; justify-content: center; padding: 70px 0 0 0}

footer #rodape #app-box .app-store { width: 100%; height: 96px; background: rgba(255,255,255, 0.1); border-radius: 6px; margin: 0 0 50px 0; position: relative; display: flex; justify-content: flex-end; padding: 0 28px;}
footer #rodape #app-box .app-store img.abs { position: absolute; bottom: 0px; left: 20px;}

footer #rodape #app-box .app-store .content { width: 85%; display: flex; justify-content: space-between;}
footer #rodape #app-box .app-store .text {  height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-right: 60px;}
footer #rodape #app-box .app-store .text h4 { font-size: 1.3rem; font-weight: 600; line-height: 1.95rem; color: var(--text-light-1); opacity: 0.7; text-transform: uppercase; white-space: nowrap;}
footer #rodape #app-box .app-store .text p { font-size: 2rem; font-weight: 600; line-height: 3rem; color: var(--text-light-1);}
footer #rodape #app-box .app-store .link { display: flex; align-items: center; justify-content: flex-end;}
footer #rodape #app-box .app-store .link span { font-size: 1.1rem; font-weight: 600; line-height: 1.65rem; color: var(--text-light-1); opacity: 0.7; margin-right: 18px;}

/* ###################### FOOTER - RODAPE - INFO CONTATO ###################### */
footer #rodape #info-contato.box { max-width: 1290px; display: flex; flex-direction: row; min-height: 330px; }

footer #rodape #info-contato.box .sobre { display: flex; flex: 1.3; flex-direction: column; align-items: flex-start; }
footer #rodape #info-contato.box .links ,
footer #rodape #info-contato.box .acesso-rapido { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
footer #rodape #info-contato.box .contato { display: flex; flex: 1; flex-direction: column; align-items: flex-end; }

footer #rodape #info-contato.box .sobre img {opacity: 0.75; margin-bottom: 3.2rem}
footer #rodape #info-contato.box .sobre p { width: 70%; font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; color: #fff}

footer #rodape #info-contato.box .links h4,
footer #rodape #info-contato.box .acesso-rapido h4 { color: var(--text-light-1); font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; margin: 1.9rem 0 2.2rem 0;}
footer #rodape #info-contato.box .contato h4 {color: var(--bg-color-4); font-size: 1.6rem; font-weight: 500; line-height: 2.4rem; margin: 1.9rem 0 2.6rem 0;}

footer #rodape #info-contato.box .links .link { display: flex; flex-direction: column; align-items: flex-start;}
footer #rodape #info-contato.box .links .link a{ font-size: 1.4rem; font-weight: 400; line-height: 3rem; color: var(--cor-1); text-decoration: none;}
footer #rodape #info-contato.box .links .link a:hover { text-decoration: underline;}


footer #rodape #info-contato.box .acesso-rapido .link { display: flex; flex-direction: column; align-items: flex-start;}
footer #rodape #info-contato.box .acesso-rapido .link a{ font-size: 1.4rem; font-weight: 400; line-height: 3rem; color: var(--cor-1); text-decoration: none;}
footer #rodape #info-contato.box .acesso-rapido .link a:hover { text-decoration: underline;}

footer #rodape #info-contato.box .contato .fones { display: grid; grid-template-columns: auto ; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; row-gap: 9px; align-items: center; justify-content: flex-end; text-align: right;}

footer #rodape #info-contato.box .contato .fones span { width: auto;}
footer #rodape #info-contato.box .contato .fones label { font-size: 1.4rem; font-weight: 300; line-height: 2.1rem; color: var(--text-light-1); margin-right: 10px; text-align: right;}
footer #rodape #info-contato.box .contato .fones a { font-size: 1.5rem; font-weight: 500; line-height: 2.25rem; color: var(--cor-1); text-decoration: none; }
footer #rodape #info-contato.box .contato .fones a:hover { text-decoration: underline; }

footer #separador.box { max-width: 1290px; align-items: center; position: relative;}
footer #separador.box .line { width: 100%; height: 1px; background-color: var(--bg-color-2); opacity: 0.2; }
footer #separador.box .box-icon { width: 48px; height: 16px; background-color: var(--bg-color-4); position: absolute; left: calc(50% - 24px);}
footer #separador.box .box-icon .icon { width: 26px; height: 26px; background: var(--bg-color-2); position: absolute; left: calc(50% - 13px); opacity: 0.2;}

footer #copyright {padding: 40px}
footer #copyright p {width: 100%; font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; text-align: center; color: var(--text-dark-3);}

/* ###################### QUEM SOMOS ###################### */

#quem-somos { width: 100vw; background-color: var(--bg-color-1);}
#quem-somos .box { flex-direction: column; align-items: flex-start; padding-bottom: 100px; }
#quem-somos .box  h2 { font-size: 4.2rem; font-weight: 700; line-height: 6.3rem; margin: 0 0 43px 0;}

#quem-somos .box .content-image {display: flex; }

#quem-somos .box .content { display: flex; flex-direction: column; flex: 1; }
#quem-somos .box .content .text { padding: 0 80px 0 0; display: flex; align-items: flex-start;}
#quem-somos .box .content .text p { font-size: 1.6rem; line-height: 2.8rem; font-weight: 300; margin: 0 0 20px 0; }
#quem-somos .box .content a.btn-termo { width: 85%; display: flex; align-items: center; padding: 22px 97px; background-color: var(--bg-color-2); font-size: 1.4rem; font-weight: 500; line-height: 3rem; text-decoration: none; border-radius: 10px; margin-bottom: 25px;}
#quem-somos .box .content a.btn-termo .icon { width: 29px; height: 36px; background: var(--gradient-2); margin-right: 17px; }

#quem-somos .box .img { flex: 1; padding: 0 0 0 0;}
#quem-somos .box .img .icon { width: 445px; height: 360px; background: var(--gradient-2); }

/* ###################### PROTEÇÕES ###################### */

#protecoes,
#planos-auxilio {width: 100vw; background-color: var(--bg-color-1);}
#protecoes .box,
#planos-auxilio .box {display: flex; flex-direction: column;}
#protecoes .box h2,
#planos-auxilio .box h2 {font-size: 4.2rem; font-weight: 700; line-height: 6.3rem; margin: 0 0 43px 0;}

#protecoes .catalog,
#planos-auxilio .catalog { display: grid; grid-template-columns: 1fr; gap: 79px; margin-bottom: 160px;}
#protecoes .catalog .item-catalog,
#planos-auxilio .catalog .item-catalog { display: flex;}
#protecoes .catalog .item-catalog .img-item ,
#planos-auxilio .catalog .item-catalog .img-item { flex: 1; }
#protecoes .catalog .item-catalog img ,
#planos-auxilio .catalog .item-catalog img { margin-right: 50px; width: 335px; height: 226px; border-radius: 10px; }

#protecoes .catalog .item-catalog .content-item ,
#planos-auxilio .catalog .item-catalog .content-item { flex: 2; display: flex; flex-direction: column;}

#protecoes .catalog .item-catalog .content-item .title ,
#planos-auxilio .catalog .item-catalog .content-item .title { display: flex; align-items: center; margin-bottom: 15px;}
#protecoes .catalog .item-catalog .content-item .title .icon { width: 32px; height: 30px; background: var(--gradient-2); margin-right: 15px}
#planos-auxilio .catalog .item-catalog .content-item .title .icon { width: 32px; height: 30px; background: var(--gradient-1); margin-right: 15px}
#protecoes .catalog .item-catalog .content-item .title h3,
#planos-auxilio .catalog .item-catalog .content-item .title h3 { font-size: 2rem; font-weight: 700; line-height: 3rem;}

#protecoes .catalog .item-catalog .content-item .text ,
#planos-auxilio .catalog .item-catalog .content-item .text { margin-right: 70px}
#protecoes .catalog .item-catalog .content-item .text p ,
#planos-auxilio .catalog .item-catalog .content-item .text p { font-size: 1.6rem; font-weight: 300; line-height: 2.8rem;  }
#planos-auxilio .catalog .item-catalog .content-item .text p span { font-size: 1.3rem; font-weight: 500; line-height: 2.8rem;  }

/* ###################### CONTATOS ###################### */
#contatos {width: 100vw; background-color: var(--bg-color-1);}
#contatos .box {display: flex; flex-direction: column;}
#contatos .box h2 {font-size: 4.2rem; font-weight: 700; line-height: 6.3rem; margin: 0 0 43px 0;}
#contatos .box .entre-contato { display: flex;}

#contatos .box .entre-contato form {flex: 2.5; }
#contatos .box .entre-contato .formulario { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 200px 1fr; row-gap: 34px; column-gap: 52px; }
#contatos .box .entre-contato .formulario .item-single { display: flex; flex-direction: column; }
#contatos .box .entre-contato .formulario .item-double { display: flex; flex-direction: column; grid-column: 1 / span 2;}
#contatos .box .entre-contato .formulario .item-single label ,
#contatos .box .entre-contato .formulario .item-double label { font-size: 1.4rem; font-weight: 500; line-height: 3rem; margin-bottom: 4px;}
#contatos .box .entre-contato .formulario .item-single input ,
#contatos .box .entre-contato .formulario .item-double textarea { width: 100%; font-size: 1.7rem; padding: 10px 20px; border-radius: 6px; background: var(--bg-color-2); }
#contatos .box .entre-contato .formulario .item-single select { width: 100%; font-size: 1.7rem; padding: 10px 20px; border-radius: 6px; background: var(--bg-color-1); border: 1px solid var(--line-1); border-radius: 6px; }
#contatos .box .entre-contato .formulario .item-single select option { width: 100%; font-size: 1.7rem; padding: 10px 20px; border-radius: 6px; background: var(--bg-color-1); border: 1px solid var(--line-1); border-radius: 6px; }
#contatos .box .entre-contato .formulario .item-single button {width: fit-content; background: var(--gradient-1); color: var(--text-light-1); cursor: pointer;}
#contatos .box .entre-contato .formulario .item-single button:after {
    position: absolute;
    top: 0; left: 0;
    content: 'Enviar mensagem';
    font-size: 1.3rem; line-height: 1.95rem; font-weight: 600; 
    padding: 15px 25px; border-radius: 100px; 
    width: 100%; height: 100%;
    color: var(--cor-2);  
    background: var(--bg-color-1);
    border: 1px solid var(--cor-2);
    white-space: nowrap;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: 2;
}

#contatos .box .entre-contato .formulario .item-single button:hover:after {
    opacity: 1;
}


#contatos .box .entre-contato .atendimento { flex: 1; padding-left: 62px; }
#contatos .box .entre-contato .atendimento .block { display: flex; flex-direction: column;}
#contatos .box .entre-contato .atendimento .block span.title { display: flex; align-items: center; margin-top: 37px; margin-bottom: 18px ;}
#contatos .box .entre-contato .atendimento .block span .icon { width: 24px; height: 24px; background: var(--gradient-2); margin-right: 14px;}
#contatos .box .entre-contato .atendimento .block span h4{ font-size: 1.5rem; font-weight: 600; line-height: 2.25rem;}

#contatos .box .entre-contato .atendimento .block .telefones span { display: flex; justify-content: flex-end; margin-bottom: 7px; }
#contatos .box .entre-contato .atendimento .block .horarios span { display: flex; justify-content: flex-end; margin-bottom: 7px;}

#contatos .box .entre-contato .atendimento .block .telefones { display: flex; flex-direction: column; margin-bottom: 37px;}
#contatos .box .entre-contato .atendimento .block .telefones div { display: flex; justify-content: space-between; padding-right: 0px;}
#contatos .box .entre-contato .atendimento .block .telefones div .label { font-size: 1.5rem; line-height: 2.2rem; font-weight: 400; color: var(--text-dark-2); }
#contatos .box .entre-contato .atendimento .block .telefones div .info { font-size: 1.5rem; line-height: 2.2rem; font-weight: 600;  }

#contatos .box .entre-contato .atendimento .block .horarios { display: flex; flex-direction: column; margin-bottom: 37px;}
#contatos .box .entre-contato .atendimento .block .horarios div { display: flex; justify-content: space-between; padding-right: 0px;}
#contatos .box .entre-contato .atendimento .block .horarios div .label { font-size: 1.5rem; line-height: 2.2rem; font-weight: 400; color: var(--text-dark-2); }
#contatos .box .entre-contato .atendimento .block .horarios div .info { font-size: 1.5rem; line-height: 2.2rem; font-weight: 600;  }

#contatos .box .localizacao { width: 100%;  display: flex; flex-direction: column; margin-bottom: 160px;}
#contatos .box .localizacao h4{ font-size: 2rem; font-weight: 700; line-height: 3rem; margin-bottom: 20px;}
#contatos .box .localizacao .map { width: 100%; height: 40vh; border-radius: 6px; margin-bottom: 20px;}
#contatos .box .localizacao  p.nome{ font-size: 1.5rem; font-weight: 600; line-height: 2.25rem;}
#contatos .box .localizacao  p.local{ font-size: 1.5rem; font-weight: 400; line-height: 2.25rem;}


/* ###################### NOTÍCIAS - PAGE ###################### */
#page-noticias {width: 100vw; background-color: var(--bg-color-1);}
#page-noticias .box {display: flex; flex-direction: column;}

#page-noticias .box .title-icon {display: flex; justify-content: space-between; align-items: center; margin: 0 0 43px 0;}
#page-noticias .box .title-icon h2 {font-size: 4.2rem; font-weight: 700; line-height: 6.3rem;}
#page-noticias .box .title-icon .box-search {position: relative; display: flex; width: 42px; height: 42px; justify-content: flex-end; overflow: hidden; transition: width 1s;}
#page-noticias .box .title-icon .box-search.open { width: 325px; transition: width 1s;}
#page-noticias .box .title-icon .box-search input { width: 100%; background-color: var(--bg-color-2); border-radius: 0px; font-size: 1.4rem; line-height: 2.3rem; font-weight: 400; padding-left: 50px;}
#page-noticias .box .title-icon .box-search button { position: absolute; top: 1px; left: 1px; padding: 11px; background-color: var(--bg-color-3); border-radius: 0px; cursor: pointer;}
#page-noticias .box .title-icon .box-search button .icon { width: 18px; height: 18px; background: var(--bg-color-5); opacity: 0.2;}

/* SLIDER */
#page-noticias .box .group-slider {display: flex; flex-direction: column; margin-bottom: 60px;}
#page-noticias .box .group-slider .slideshow-container { width: 100%; height: 40vh; position: relative; margin: auto; overflow: hidden; border-radius: 6px;}
#page-noticias .box .group-slider .slideshow-container .mySlides { display: none; width: 100%; height: 100%; background: var(--bg-color-5);}
#page-noticias .box .group-slider .slideshow-container .mySlides picture { mix-blend-mode: overlay; position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
#page-noticias .box .group-slider .slideshow-container .mySlides .content { position: absolute; width: 100%; height: 100%; padding: 40px 60px 40px;}
#page-noticias .box .group-slider .slideshow-container .mySlides .content .description { width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#page-noticias .box .group-slider .slideshow-container .mySlides .content .ticket { width: fit-content ;font-size: 1.3rem; font-weight: 700; line-height: 1.95rem; background: var(--gradient-3); color: var(--text-light-1); text-transform: uppercase; padding: 5px 15px; margin-bottom: 37px;}
#page-noticias .box .group-slider .slideshow-container .mySlides .content h2 { font-size: 2.7rem; font-weight: 600; line-height: 3.2rem; color: var(--text-light-1); margin-bottom: 20px;}
#page-noticias .box .group-slider .slideshow-container .mySlides .content .data { font-size: 1.5rem; font-weight: 400; line-height: 2.25rem; color: var(--text-light-1); opacity: 0.6;}

#page-noticias .box .group-slider .group-dots{ display: flex; justify-content: center; align-items: center; height: 12px; margin-top: 28px;}
#page-noticias .box .group-slider .group-dots .dot {  height: 8px; width: 8px; margin: 0 10px; background: #bbb; border-radius: 50%; transition: background-color 0.6s ease; }

#page-noticias .box .group-slider .group-dots .active {
    background-color: var(--cor-2);
    height: 12px; 
    width: 12px;
  }
  
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}


/* ALGUMAS ESTILOS ESTÃO COM "#ultimas-noticias" */
#page-noticias .box h3.subtitle { font-size: 2rem; font-weight: 700; line-height: 3rem; margin-bottom: 32px;}
#page-noticias .box .container-cards{ width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 52px; padding: 0 0 40px 0;}
#page-noticias .box .container-cards .post-card { width: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; border: 1px solid var(--line-1)}


/* ###################### PAGINAÇÃO ###################### */
#page-noticias .box .paginacao {width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 140px;}
#page-noticias .box .paginacao a { font-size: 1.5rem; font-weight: 600; line-height: 2.3rem; padding: 9px 16px; text-decoration: none; border-radius: 6px; border: 1px solid var(--line-1)}
#page-noticias .box .paginacao a.active { opacity: 0.3; border: none;}


/* ###################### NOTÍCIAS FULL- PAGE ###################### */
/* ###################### NOTÍCIAS FULL- TOP ###################### */
#top-noticias {
    width: 100vw; 
    height: 60vh;
    min-height: 660px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6 ));
    position: relative;
}

#top-noticias picture { mix-blend-mode: overlay; position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
#top-noticias .box { position: absolute; flex-direction: column; align-items: center; justify-content: center;}
#top-noticias .box h2 { color: #fff; font-size: 5rem; line-height: 5.5rem; text-align: center; margin-top: 100px;}
#top-noticias .box span { color: #fff; font-size: 2rem; line-height: 3rem; text-align: center; margin-top: 13px; opacity: 0.6;}

/* ###################### NOTÍCIAS FULL- CONTENT-NOTICIA ###################### */

#content-noticia {width: 100vw; background-color: var(--bg-color-1);}
#content-noticia .box {display: flex; flex-direction: column;}

/* BREADCRUMBS */
#content-noticia .box ul {display: flex; padding: 55px 0;}
#content-noticia .box li {font-size: 1.4rem; font-weight: 500; line-height: 2.1rem;}
#content-noticia .box li a {font-size: 1.4rem; font-weight: 700; line-height: 2.1rem; color: var(--cor-2); text-decoration: none;}
#content-noticia .box li+li:before { padding: 8px; color: var(--line-1); content: "/\00a0";}

/* CONTENT */
#content-noticia .box .content h2 { font-size: 3.6rem; line-height: 4.4rem; font-weight: 700; margin-bottom: 28px}
#content-noticia .box .content p { font-size: 1.7rem; line-height: 2.55rem; font-weight: 300; margin-bottom: 50px}
#content-noticia .box .content img { width: 100%; height: 50vh; object-fit: cover; margin-bottom: 50px; object-position: center;}
#content-noticia .box .content .fonte { font-size: 1.7rem; line-height: 2.55rem; font-weight: 300; margin-bottom: 84px}
#content-noticia .box .content .fonte span { font-size: 1.7rem; line-height: 2.55rem; font-weight: 700; }

.opacity-on {
    animation: opacityOn 2s;
} 

/* KEYFRAMES */
@keyframes opacityOn {
    0% { opacity: 0;}
    100% {opacity: 1;}
}

@keyframes opacityOff {
    0% { opacity: 1;}
    100% {opacity: 0;}
}

/* WHATSAPP */
a.whatsapp {
    position: fixed;
    width: 50px;
    z-index: 99;
    bottom: 2.5%;
    left: 2.5%;
}

#modal-sucess {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    z-index: 200;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
}

#modal-sucess .modal-content {
    width: 512px;
    height: 294px;
    margin: auto;
    position: relative;
    top: calc(50% - 147px);
    background: var(--gradient-2);
    display: flex;
    flex-direction: column;
}

#modal-sucess .modal-content .header {
    width: 100%;
    padding: 14px 16px;
    display: flex;
    justify-content: flex-end;
}

#modal-sucess .modal-content .header img {
    cursor: pointer;
}


#modal-sucess .modal-content .content {
    display: flex;
    flex-direction: column;
    padding: 28px 85px 45px;
}

#modal-sucess .modal-content .content .text {
    width: 80%;
    font-size: 3.2rem;
    line-height: 3.2rem;
    font-weight: 500;
    color: var(--text-light-1);
    margin-bottom: 30px ;
}

#modal-sucess .modal-content .content a { width: fit-content; padding: 15px 25px; background-color: var(--bg-color-1); border-radius: 100px; text-decoration: none; cursor: pointer;}
#modal-sucess .modal-content .content a:hover {opacity: 0.5; transition: opacity .5s;}
#modal-sucess .modal-content .content a span{ 
    font-size: 1.3rem; 
    font-weight: 600;
    background: var(--gradient-2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}