/* Para navegadores Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 5px; /* Largura da barra de rolagem */
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--cinza1-original-color);
}
* {
box-sizing: border-box;
}
:root {
/* paleta de cores */
--blue-original-color: #024fc7;
--blue2-original-color: #0241a6;
--green-original-color: #06ad04;
--cinza1-original-color: #969696;
--cinza2-original-color: #5e5e5e;
--white-original-color: #ffffff;
--offwhite-original-color: #F8F8F8;
}
html {
font-family: "Poppins", sans-serif;
height: 100%;
min-height: 100dvh;
overflow-x: hidden;
/* --------- */
scrollbar-width: thin;
scrollbar-color: #e2e2e2 transparent;
scroll-behavior: smooth;
}
body {
margin: 0 auto;
padding: 0;
scroll-margin-top: 950px;
overflow: hidden;
font-weight: 300;
background-color: var(--white-original-color);
position: relative; /*circles*/
}
.container_folder,
.etapas_all,
.vantagens_all,
.esteira_de_pp,
.relatorios_all,
.rel_atendimento_background,
.planos_all,
.whats_mobile,
.fixed_depoimentos,
.fixed_proposta,
.fixed_relatorios{
z-index: 10;
}
.circle_1::after{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 3em;
animation: circle1 10s infinite ease-in-out alternate;
z-index: -1;
}
.circle_1::before{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 60em;
right: 10em;
animation: circle2 10s infinite ease-in-out alternate;
z-index: -1;
}
@keyframes circle1 {
0% {
transform: translateY(0) translateX(0px);
opacity: 15%;
}
50% {
opacity: 5%;
}
100% {
transform: translateY(60px) translateX(-60px);
opacity: 15%;
}
}
@keyframes circle2 {
0% {
transform: translateY(0) translateX(0px);
opacity: 10%;
}
50% {
opacity: 0%;
}
100% {
transform: translateY(-60px) translateX(-60px);
opacity: 10%;
}
}
.animate-on-scroll {
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.scrolled {
opacity: 1;
transform: translateY(0);
}
.scrolled {
opacity: 1;
transform: translateY(0);
}
@media screen and (min-width: 1600px) {
.content_principal,
.section_two {
transform: scale(1.2);
transform-origin: top center;
}
}
/* */
.main1 {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0 0 1.4em;
width: 100%;
box-sizing: border-box;
position: absolute;
z-index: 1000;
}
.nav_icon.scrolled{
background-color: var(--white-original-color);
}
.nav_icon.scrolled::after,
.nav_icon.scrolled::before {
background-color: var(--white-original-color);
}
.main1.scrolled{
background-color: var(--blue-original-color); /* leve translucidez */
}
/* ===== LINKS AZUIS AO ROLAR ===== */
/* .main1.scrolled .header_menu a li {
color: var(--white-original-color);
} */
.main1.scrolled .header_menu .crie_sua:hover {
color: var(--white-original-color);
}
/* ===== BOTÃO “CRIE SUA CONTA” AO ROLAR ===== */
.main1.scrolled .btn_one {
background-color: transparent;
border: 2px solid var(--white-original-color);
}
.main1.scrolled .btn_one:hover {
background-color: var(--white-original-color);
}
.main1 .btn_one:hover {
border: 1.5px solid var(--white-original-color);
}
.main1.scrolled .btn_one a {
color: var(--white-original-color);
}
@media screen and (min-width: 879px){
.main1.scrolled{
background-color: transparent;
}
}
.img_logo {
padding: 1.6em 0 0 0;
}
.img_logo img {
width: 8em;
padding-left: 1em;
}
a {
text-decoration: none;
color: var(--blue-original-color);
}
.header_menu li {
padding: 1.5em;
border-bottom: 1px solid var(--white-original-color);
font-weight: 500;
}
.header_menu .btn_one li {
font-weight: 500;
}
.btn_one a{
color: var(--white-original-color);
transition: background-color .3s ease-in-out;
}
.header_menu{
position: absolute;
left: 0;
right: 0;
top: 70px;
max-height: 0;
height: 23em;
overflow: hidden;
background-color: var(--blue-original-color);
list-style: none;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
transition: max-height .0s;
}
.menu_btn {
position: absolute;
width: 1px;
height: 1px;
border: 0;
overflow: hidden;
}
.menu_btn:checked~.header_menu {
max-height: 100vh;
padding: 0 1rem 2rem;
}
/* .menu_btn:checked+.menu_icon .nav_icon {
background-color: transparent;
}
.menu_btn:checked~.header_menu.scrolled {
max-height: 100vh;
padding: 0 1rem 2rem;
} */
.menu_btn:checked+.menu_icon .nav_icon {
background-color: transparent;
}
.container_header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: transparent;
transition: backdrop-filter 0.4s ease, background-color 0.4s ease, box-shadow 0.3s ease;
}
/* ===== LOGO AZUL QUANDO SCROLLED ===== */
.container_header.scrolled .img_logo img {
content: url(../images/logo/logo_white.svg); /* altere o nome se o seu arquivo for outro */
transition: content 0.3s ease-in-out;
}
/* ===== LINKS DO MENU ===== */
.header_menu a li {
color: var(--white-original-color);
transition: color 0.3s ease-in-out;
}
nav .header_menu{
justify-content: space-between;
}
/* ===== LINKS AZUIS AO ROLAR ===== */
.container_header.scrolled .header_menu a li {
color: var(--white-original-color);
}
.container_header.scrolled .header_menu .crie_sua:hover {
color: var(--white-original-color);
}
/* ===== BOTÃO “CRIE SUA CONTA” AO ROLAR ===== */
.container_header.scrolled .btn_one {
background-color: var();
border: 2px solid var(--blue-original-color);
}
.container_header.scrolled .btn_one a {
color: var(--blue-original-color);
}
.container_header.scrolled .btn_one:hover {
background-color: var(--blue-original-color);
}
.header_menu:focus-within {
max-height: 100vh;
}
.main1 nav {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.menu_icon {
position: relative;
cursor: pointer;
padding: 0 1em;
height: 24px;
}
.nav_icon{
background-color: var(--white-original-color);
display: inline-block;
height: 2px;
width: 24px;
position: relative;
}
.nav_icon::after,
.nav_icon::before {
content: '';
background-color: var(--white-original-color);
display: inline-block;
height: 2px;
width: 24px;
position: absolute;
transition: transform .1s;
}
.nav_icon::after {
transform: translateY(8px);
}
.nav_icon::before {
transform: translateX(-8px);
}
.menu_btn:checked+.menu_icon .nav_icon::before {
transform: rotate(45deg);
height: 2px;
}
.menu_btn:checked+.menu_icon .nav_icon::after {
transform: rotate(-45deg);
height: 2px;
}
.menu_btn:focus-visible+.menu_icon {
outline: 2px solid black;
outline-offset: 3px;
}
@media screen and (min-width: 880px) {
.container_header.scrolled .img_logo img {
content: url(../images/logo/logo_ecorban.svg); /* altere o nome se o seu arquivo for outro */
transition: content 0.3s ease-in-out;
}
/* ===== LINKS AZUIS AO ROLAR ===== */
.container_header.scrolled .header_menu a li {
color: var(--blue-original-color);
}
.container_header.scrolled {
background-color: transparent; /* leve translucidez */
backdrop-filter: blur(5px) saturate(200%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.main1 {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0;
width: 100%;
height: 5em;
}
/* -------------- circle ---------------- */
.circle_1::after{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 3em;
animation: circle1 7s infinite ease-in-out alternate;
z-index: -1;
scale: 1.5;
}
.circle_1::before{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 80em;
right: 0em;
animation: circle2 7s infinite ease-in-out alternate;
z-index: -1;
scale: 1.5;
}
.circle_2::after{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 3em;
right: 0em;
animation: circle1 5s infinite ease-in-out alternate;
z-index: -1;
scale: .5;
}
.circle_2::before{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 100em;
left: 0em;
animation: circle2 5s infinite ease-in-out alternate;
z-index: -1;
scale: .5;
}
@keyframes circle1 {
0% {
transform: translateY(0) translateX(0px);
opacity: 15%;
}
50% {
opacity: 5%;
}
100% {
transform: translateY(60px) translateX(-60px);
opacity: 15%;
}
}
@keyframes circle2 {
0% {
transform: translateY(0) translateX(0px);
opacity: 10%;
}
50% {
opacity: 0%;
}
100% {
transform: translateY(-60px) translateX(-60px);
opacity: 10%;
}
}
/* -------------- circle ---------------- */
.header_menu {
margin: 0;
padding: 1em;
position: static;
max-height: 100px;
background-color: initial;
display: flex;
justify-content: center;
align-items: center;
}
.menu_icon {
display: none;
}
.img_logo {
padding: 0;
}
.img_logo img {
width: 10em;
padding-left: 1em;
}
a {
text-decoration: none;
color: var(--white-original-color);
font-weight: 500;
}
.header_menu li {
padding: .5em;
border-bottom: transparent;
margin: 0 1em;
transition: border-bottom .3s ease-in-out;
}
li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.li_m {
width: 8em;
}
a .li_m::after {
content: "";
width: 0%;
height: 1px;
background-color: var(--white-original-color);
position: absolute;
top: 2.5em;
left: 0em;
transition: width .5s ease-in-out;
}
a .li_m:hover::after {
width: 100%;
}
a .li_m{
transition: color .5s ease-in-out;
}
.btn_one {
padding: .2em;
margin: 0;
border: 2px solid var(--blue-original-color);
color: var(--blue-original-color);
border-radius: 50px;
background-color: var(--white-original-color);
margin-left: 2.2em;
transition: background-color .2s ease-in-out;
}
.btn_one:hover {
background-color: var(--blue-original-color);
}
.btn_one a{
color: var(--blue-original-color);
transition: color .2s ease-in-out
}
.btn_one a li:hover{
color: var(--white-original-color);
}
.header_menu .btn_one li {
color: var(--blue-original-color);
}
}
/* ---------- section two - hero_folder --------- */
.container_folder {
background: linear-gradient(
180deg,
rgba(2, 79, 199, 1) 11%,
rgba(3, 104, 173, 0.71) 32%,
rgba(4, 119, 83, 0.41) 55%,
rgba(5, 134, 40, 0.19) 75%,
rgba(5, 143, 13, 0.05) 91%,
rgba(6, 147, 4, 0) 100%
);
margin: 0;
padding: 6em 1.5em 1.5em 1.5em;
border-radius: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.content_one {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content_one h1 {
color: var(--white-original-color);
font-size: 1.6em;
font-weight: 300;
line-height: 1.2em;
}
.content_one h1 b {
font-weight: bold;
}
.content_one p{
color: var(--white-original-color);
width: 20;
font-size: .65em;
}
/* ---- btn_two ---- */
.btn_two {
margin: 3em 2em 4em ;
width: 14.75em;
}
.btn_two li{
background-color: var(--white-original-color);
padding: .5em 2em;
border-radius: 50px;
}
.btn_two a {
color: var(--blue-original-color);
text-decoration: none;
list-style: none;
font-weight: 500;
}
/* ==== btn_two -- end -- */
/* ----content_two ----- */
.content_two {
position: relative;
width: 20em;
}
.content_two>img {
width: 12em;
}
.computer_img{
display: none;
}
.balon_group1,
.balon_group2 {
position: absolute;
width: 10em;
}
.content_balon1 {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1em;
}
.content_balon1 img {
position: absolute;
}
.content_balon2 img {
position: absolute;
}
.content_balon1 img:nth-last-child(1) {
top: 7em;
right: 0em;
animation: icon_up1 3s infinite ease-in-out alternate;
}
.content_balon1 img:nth-last-child(2) {
top: 4em;
right: 1.5em;
animation: icon_up2 2s infinite ease-in-out alternate;
}
.content_balon1 img:nth-last-child(3) {
top: 1em;
right: -.5em;
animation: icon_up3 4s infinite ease-in-out alternate;
}
/* ----------------------- */
.content_balon2 img:nth-last-child(1) {
top: 7em;
left: 0em;
animation: icon_up4 4s infinite ease-in-out alternate;
}
.content_balon2 img:nth-last-child(2) {
top: 4em;
left: 1.5em;
animation: icon_up5 3s infinite ease-in-out alternate;
}
.content_balon2 img:nth-last-child(3) {
top: 0em;
left: 1em;
animation: icon_up6 2s infinite ease-in-out alternate;
}
.balon_group1 {
top: 0;
left: 10em;
}
.balon_group2 {
top: 12em;
right: 10em;
}
@keyframes icon_up1 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up2 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up3 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up4 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up5 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up6 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
/* ---------- section two - hero_folder --------- */
@media screen and (min-width: 650px){
.container_folder {
background: linear-gradient(
180deg,
rgba(2, 79, 199, 1) 11%,
rgba(3, 104, 173, 0.71) 32%,
rgba(4, 119, 83, 0.41) 55%,
rgba(5, 134, 40, 0.19) 75%,
rgba(5, 143, 13, 0.05) 91%,
rgba(6, 147, 4, 0) 100%);
margin: 0;
padding: 4em 1.5em 1.5em 1.5em;
border-radius: 0px;
opacity: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
@media screen and (min-width: 880px){
.container_folder {
padding: 2em 1.5em 1.5em 1.5em;
}
}
.content_one{
display: flex;
flex-direction: column;
align-items: center;
width: 30em;
}
.content_one h1 {
color: var(--white-original-color);
scale: 1.2;
font-weight: 300;
padding: 1em 1em 0 1em;
}
.content_one h1 b {
font-weight: bold;
}
.content_one p {
color: var(--white-original-color);
scale: 1;
margin: 0 0 1.5em 0;
}
/* ---- btn_two ---- */
.btn_two {
margin: 2em;
z-index: 998;
}
.btn_two li{
background-color: var(--white-original-color);
padding: .7em 2em;
border-radius: 50px;
transition: background-color .5s ease-in-out;
}
.btn_two li:hover{
background-color: var(--blue-original-color);
}
.btn_two a {
color: var(--blue-original-color);
text-decoration: none;
list-style: none;
font-weight: 500;
transition: color .5s ease-in-out;
}
.btn_two a:hover {
color: var(--white-original-color);
}
/* ==== btn_two -- end -- */
/* ----content_two ----- */
.content_two {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20em;
}
.celular_img{
display: none;
}
.computer_img{
display: flex;
}
.content_two>img {
width: 30em;
}
.balon_group1,
.balon_group2 {
position: absolute;
width: 17em;
}
.balon_group1 {
top: 0;
left: 10em;
}
.balon_group2 {
top: 3em;
right: 10em;
}
.content_balon1 {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1em;
}
.content_balon1 img {
position: absolute;
scale: 1.1;
}
.content_balon2 img {
position: absolute;
scale: 1.1;
}
.content_balon1 img:nth-last-child(1) {
top: 7em;
right: -1em;
animation: icon_up1 1.4s infinite ease-in-out alternate;
}
.content_balon1 img:nth-last-child(2) {
top: 4em;
right: 2.5em;
animation: icon_up2 2s infinite ease-in-out alternate;
}
.content_balon1 img:nth-last-child(3) {
top: 1em;
right: -2em;
animation: icon_up3 1.7s infinite ease-in-out alternate;
}
/* ----------------------- */
.content_balon2 img:nth-last-child(1) {
top: 10em;
left: -2em;
animation: icon_up4 1.4s infinite ease-in-out alternate;
}
.content_balon2 img:nth-last-child(2) {
top: 3em;
left: 3em;
animation: icon_up5 2s infinite ease-in-out alternate;
}
.content_balon2 img:nth-last-child(3) {
top: 0em;
left: 1em;
animation: icon_up6 1.7s infinite ease-in-out alternate;
}
@keyframes icon_up1 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up2 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up3 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up4 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up5 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up6 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
}
@media screen and (min-width: 880px){
.container_folder {
padding: 5em 1.5em 1.5em 1.5em;
}
.btn_two {
margin: 2em;
z-index: 999;
}
}
/* ------------------------- */
@media screen and (min-width: 1200px){
.container_folder {
background: linear-gradient(
180deg,
rgba(2, 79, 199, 1) 11%,
rgba(3, 104, 173, 0.71) 32%,
rgba(4, 119, 83, 0.41) 55%,
rgba(5, 134, 40, 0.19) 75%,
rgba(5, 143, 13, 0.05) 91%,
rgba(6, 147, 4, 0) 100%);
margin: 0;
padding: 5em 1.5em 1.5em 1.5em;
border-radius: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.content_one{
display: flex;
flex-direction: column;
align-items: center;
width: 50em;
}
.content_one h1 {
color: var(--white-original-color);
font-size: 2.7em;
font-weight: 300;
padding: 1em 0 0 0 ;
}
.content_one h1 b {
font-weight: bold;
}
.content_one p {
color: var(--white-original-color);
font-size: .9em;
margin: 0 0 1.5em 0;
line-height: 1.2em;
width: 40em;
}
/* ---- btn_two ---- */
.btn_two {
margin: 2em;
}
.btn_two li{
background-color: var(--white-original-color);
padding: .7em 2em;
border-radius: 50px;
transition: background-color .5s ease-in-out;
}
.btn_two li:hover{
background-color: var(--blue-original-color);
}
.btn_two a {
color: var(--blue-original-color);
text-decoration: none;
list-style: none;
font-weight: 500;
transition: color .5s ease-in-out;
}
.btn_two a:hover {
color: var(--white-original-color);
}
/* ==== btn_two -- end -- */
/* ----content_two ----- */
.content_two {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20em;
margin-top: 2em;
}
.celular_img{
display: none;
}
.computer_img{
display: flex;
}
.content_two>img {
width: 60em;
}
.balon_group1,
.balon_group2 {
position: absolute;
width: 15em;
}
.balon_group1 {
top: 5em;
left: 10em;
}
.balon_group2 {
top: 14em;
right: 10em;
}
.content_balon1 {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1em;
top: 0;
right: -10em;
height: 20em;
}
.content_balon2 {
left: -10em;
height: 20em;
}
.content_balon1 img {
position: absolute;
scale: 1.7;
}
.content_balon2 img {
position: absolute;
scale: 1.7;
}
.content_balon1 img:nth-last-child(1) {
top: 10em;
right: -8em;
width: 5em;
animation: icon_up1 3s infinite ease-in-out alternate;
}
.content_balon1 img:nth-last-child(2) {
top: 4em;
right: 1em;
width: 6em;
animation: icon_up2 2s infinite ease-in-out alternate;
}
.content_balon1 img:nth-last-child(3) {
top: -1em;
right: -5em;
width: 6em;
animation: icon_up3 4s infinite ease-in-out alternate;
}
/* ----------------------- */
.content_balon2 img:nth-last-child(1) {
bottom:-3em;
left: -13em;
width: 8em;
animation: icon_up4 3s infinite ease-in-out alternate;
}
.content_balon2 img:nth-last-child(2) {
top: 5em;
left: -8em;
width: 3.6em;
animation: icon_up5 4s infinite ease-in-out alternate;
}
.content_balon2 img:nth-last-child(3) {
left: -15em;
width: 8em;
animation: icon_up6 2s infinite ease-in-out alternate;
}
@keyframes icon_up1 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up2 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up3 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up4 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up5 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up6 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
}
/* ---------- section three --- etapas ----- */
.etapas_all {
margin: 1.5em .5em;
padding: 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.etapa1 {
margin: 2.5em 0;
}
.etapa1 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.etapa1 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
.etapa1 p {
font-size: .8em;
font-weight: 300;
color: var(--cinza2-original-color);
padding: 1em 0;
}
.etapa1 .lista_etapas {
list-style: none;
padding: 1em 1em 3em 1em;
margin: 0;
}
.etapa1 .lista_etapas li {
position: relative;
padding-left: .8em;
color: var(--blue-original-color);
}
.etapa1 .lista_etapas li::before {
content: "";
position: absolute;
left: -1em;
top: 0.3em;
width: 1em;
height: 1em;
background-image: url(../images/ui/bullet_etapas.svg);
background-size: contain;
background-repeat: no-repeat;
}
/* ---- btn_three ---- */
.btn_three a{
background-color: var(--green-original-color);
color: var(--white-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_three a:hover {
background-color: transparent;
outline: 1px solid var(--green-original-color);
color: var(--green-original-color);
}
/* ------- etapa 2 -------- */
.etapa2 {
margin: 1.5em 0;
position: relative;
height: 20em;
width: 19.5em;
}
@media screen and (min-width: 600px){
.etapa2 {
margin: 1.5em 0;
position: relative;
height: 20em;
width: 25em;
}
}
@media screen and (min-width: 800px){
.etapa2 {
margin: 1.5em 0;
position: relative;
height: 20em;
width: 30em;
}
}
.etapa2 img{
position: absolute;
top: 0;
}
.etapa2 img:nth-last-child(1){
width: 14.5em;
top: 7em;
right: 0em;
animation: icon_up7 2s infinite ease-in-out alternate;
}
.etapa2 img:nth-last-child(2) {
width: 15.5em;
animation: icon_up8 3s infinite ease-in-out alternate;
}
@keyframes icon_up7 {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
@keyframes icon_up8 {
from {
transform: translateY(0);
}
to {
transform: translateY(15px);
}
}
@media screen and (min-width: 880px){
.etapas_all {
margin: 0;
padding: 5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.etapa1 {
margin: 2.5em 0;
width: 100%;
}
.etapa1 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.etapa1 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
.etapa1 p {
font-size: .8em;
font-weight: 300;
color: var(--cinza2-original-color);
padding: 1em 0;
width: 80%;
}
.etapa1 .lista_etapas {
list-style: none;
padding: 1em 1em 3em 1em;
margin: 0;
}
.etapa1 .lista_etapas li {
position: relative;
padding-left: .8em;
color: var(--blue-original-color);
justify-content: start;
}
.etapa1 .lista_etapas li::before {
content: "";
position: absolute;
left: -1em;
top: 0.3em;
width: 1em;
height: 1em;
background-image: url(../images/ui/bullet_etapas.svg);
background-size: contain;
background-repeat: no-repeat;
}
/* ---- btn_three ---- */
.btn_three a{
background-color: var(--green-original-color);
color: var(--white-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
}
/* ------- etapa 2 -------- */
.etapa2 {
margin: 1.5em 0;
position: relative;
height: auto;
width: 100%;
}
.etapa2 img{
position: absolute;
top: 0;
}
.etapa2 img:nth-last-child(1){
width: 14.5em;
top: -2em;
right: 0em;
animation: icon_up7 2s infinite ease-in-out alternate;
}
.etapa2 img:nth-last-child(2) {
width: 15.5em;
top: -12em;
left: .5em;
animation: icon_up8 3s infinite ease-in-out alternate;
}
@keyframes icon_up7 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up8 {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
}
@media screen and (min-width: 1000px){
.etapas_all {
margin: 0 auto;
padding: 10em;
max-width: min-content;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.etapa1 {
margin: 2.5em 0;
width: 100%;
}
.etapa1 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.etapa1 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
.etapa1 p {
font-size: .8em;
font-weight: 300;
color: var(--cinza2-original-color);
padding: 1em 0;
width: 80%;
}
.etapa1 .lista_etapas {
list-style: none;
padding: 1em 1em 3em 1em;
margin: 0;
}
.etapa1 .lista_etapas li {
position: relative;
padding-left: .8em;
color: var(--blue-original-color);
justify-content: start;
}
.etapa1 .lista_etapas li::before {
content: "";
position: absolute;
left: -1em;
top: 0.3em;
width: 1em;
height: 1em;
background-image: url(../images/ui/bullet_etapas.svg);
background-size: contain;
background-repeat: no-repeat;
}
/* ---- btn_three ---- */
.btn_three a{
background-color: var(--green-original-color);
color: var(--white-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
}
/* ------- etapa 2 -------- */
.etapa2 {
margin: 1.5em 0;
position: relative;
height: auto;
width: 60em;
}
.etapa2 img{
position: absolute;
top: 0;
}
.etapa2 img:nth-last-child(1){
width: 20em;
top: -8em;
right: 0em;
animation: icon_up7 2s infinite ease-in-out alternate;
}
.etapa2 img:nth-last-child(2) {
width: 20.5em;
top: -13.5em;
left: .5em;
animation: icon_up8 3s infinite ease-in-out alternate;
}
@keyframes icon_up7 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up8 {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
}
/* ---------- */
.vantagens_all {
margin: 1.5em .5em;
padding: 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 5em;
}
.bloco1,
.bloco2 {
display: flex;
justify-content: center;
align-items: center;
gap: 5em;
flex-wrap: wrap;
margin-bottom: 5em;
}
.vantagens1 {
margin: 2.5em 0;
}
.vantagens1 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.vantagens1 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
.vantagens2 h2{
font-size: 1.2em;
font-weight: 600;
color: var(--cinza2-original-color);
margin: 0;
}
.vantagens2 p {
font-size: .9em;
font-weight: 300;
color: var(--cinza2-original-color);
}
.vant1,
.vant2,
.vant3 {
width: 15em;
height: 13em;
/* se for mexer no tamanho dos textos
- mexa aqui (coloque um background-color
para facilitar na mudança */
}
.vant1 img,
.vant2 img,
.vant3 img {
width: 4.3em;
margin: 0 0 1em 0;
}
@media screen and (min-width: 800px) {
.bloco1,
.bloco2 {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5em;
flex-wrap:nowrap;
margin-bottom: 2em;
}
}
@media screen and (min-width: 1000px) {
.bloco1,
.bloco2 {
gap: 5em;
flex-wrap: wrap;
margin-bottom: 5em;
}
}
/* ----------- section five --------- */
/* ------- zoom ------- */
/* .img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 0px solid #000;
width: 250px;
height: 250px;
background-repeat: no-repeat;
pointer-events: none;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: none;
} */
/* -------------------- */
.esteira_de_pp {
margin: 0;
padding: 1.5em 1.5em 5em 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: var(--offwhite-original-color);
}
.esteirapp_1{
position: relative;
width: 20em;
height: 20em;
}
.esteirapp_1 img {
position: absolute;
width: 100%;
}
.esteirapp_1 img:nth-last-child(1) {
width: 100%;
top: 3em;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
/* .esteirapp_1 img:nth-last-child(2) {
width: 11.5em;
top: 0;
right: 0;
animation: icon_up10 2s infinite ease-in-out alternate;
}
.esteirapp_1 img:nth-last-child(3) {
width: 19em;
top: 2.5em;
} */
@keyframes icon_up9 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up10 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
.esteirapp_2 {
margin-top: 3em;
}
.esteirapp_2 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.esteirapp_2 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
.esteirapp_2 li p {
font-size: .8em;
font-weight: 300;
color: var(--cinza2-original-color);
}
.list{
margin-top: 3em;
}
.list li {
position: relative;
color: var(--blue-original-color);
list-style: none;
margin-top: 1em;
}
.list li::before {
content: "";
position: absolute;
left: -2.5em;
top: 0.3em;
width: 1em;
height: 1em;
background-size: contain;
background-repeat: no-repeat;
}
.list li:nth-last-child(1):before,
.list li:nth-last-child(5):before {
background-image: url(../images/ui/esteira_bulletvazio.svg);
}
.list li:nth-last-child(2):before,
.list li:nth-last-child(3):before,
.list li:nth-last-child(4):before {
background-image: url(../images/ui/esteira_bulletsolido.svg);
}
/* --- btn_four ---- */
.btn_four{
margin: 4em 0 0 0;
}
.btn_four a{
background-color: var(--green-original-color);
color: var(--white-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_four a:hover {
background-color: transparent;
outline: 1px solid var(--green-original-color);
color: var(--green-original-color);
}
@media screen and (min-width: 600px) {
.esteira_de_pp{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.esteirapp_1{
scale: 1.2;
}
.esteirapp_2{
margin: 6em 0 0 0;
}
.list li p{
width: 30em;
margin: 0;
text-align: left;
}
}
@media screen and (min-width: 1000px) {
.esteira_de_pp {
width: 100%;
flex-direction: row;
margin: 0;
padding: 0 0 6em;
gap: 7em;
}
.esteirapp_1{
position: relative;
width: 30em;
height: 20em;
}
.esteirapp_1 img {
position: absolute;
}
.esteirapp_1 img:nth-last-child(1) {
width: 100%;
top: 0em;
left: -1em;
}
/* .esteirapp_1 img:nth-last-child(2) {
width: 15.5em;
top: 0em;
right: 2em;
}
.esteirapp_1 img:nth-last-child(3) {
width: 27em;
top: 2.5em;
} */
.list li {
position: relative;
color: var(--blue-original-color);
list-style: none;
margin-top: 1em;
}
}
/* ---- section six --------- */
.relatorios_all {
margin: 1.5em .5em;
padding: 1.5em 1.5em 5em 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.relatorios_1{
position: relative;
width: 20em;
height: 20em;
}
.relatorios_1 img {
position: absolute;
}
.relatorios_1 img:nth-last-child(1) {
width: 100%;
top: 0em;
right: 0em;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
.relatorios_1 img:nth-last-child(2) {
width: 19em;
top: 1em;
animation: icon_up10 2s infinite ease-in-out alternate;
}
/* .relatorios_1 img:nth-last-child(3) {
width: 19em;
top: 2.5em;
animation: icon_up11 3s infinite ease-in-out alternate;
} */
@keyframes icon_up9 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up10 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up11 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
.relatorios_2 {
margin-top: 7em;
}
.relatorios_2 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.relatorios_2 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
.relatorios_2 p {
font-size: .8em;
font-weight: 300;
color: var(--cinza2-original-color);
}
/* --- btn_four ---- */
.btn_five{
margin: 4em 0 0 0;
}
.btn_five a{
background-color: var(--green-original-color);
color: var(--white-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_five a:hover {
background-color: transparent;
outline: 1px solid var(--green-original-color);
color: var(--green-original-color);
}
@media screen and (min-width: 600px) {
.relatorios_all{
margin: 1.5em .5em;
display: flex;
justify-content: center;
align-items: center;
}
.relatorios_1{
height: 20em;
}
.relatorios_2{
margin: 11em 0 0 0;
}
.relatorios_2 p{
width: 30em;
margin: 0;
text-align: left;
}
}
@media screen and (min-width: 1000px) {
.relatorios_all {
width: 100%;
flex-direction: row-reverse;
margin: 1.5em .5em ;
padding: 0 0 6em;
gap: 7em;
}
.relatorios_1{
position: relative;
width: 30em;
height: 35em;
}
.relatorios_1 img {
position: absolute;
}
.relatorios_1 img:nth-last-child(1) {
width: 100%;
top: 3em;
right: -2em;
animation: icon_up9 2.5s infinite ease-in-out alternate;
}
@media screen and (min-width: 1300px) {
.relatorios_all {
gap: 0em;
}
.relatorios_1 img:nth-last-child(1) {
width: 90%;
top: 3em;
right: -2em;
}
}
.relatorios_1 img:nth-last-child(2) {
width: 22em;
top: 7.5em;
scale: 1.4;
animation: icon_up10 2s infinite ease-in-out alternate;
}
/* .relatorios_1 img:nth-last-child(3) {
width: 22em;
top: 1.5em;
animation: icon_up11 3s infinite ease-in-out alternate;
} */
.relatorios_2 p {
position: relative;
color: var(--cinza2-original-color);
list-style: none;
margin-top: 1em;
}
}
/* ---- section seven --------- */
/* --------------------------------------------------------------- */
/* .rel_atendimento_background{
display: flex;
justify-content: center;
align-items: center;
} */
/* --------------------------------------------------------------- */
.rel_atendimento_background {
background-color: var(--offwhite-original-color);
padding: 3em 0 ;
}
.rel_atendimento_all {
margin: 0em .5em;
padding: 1em 1.5em 5em 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
}
.rel_atendimento_1{
position: relative;
width: 20em;
height: 20em;
display: flex;
justify-content: center;
}
.rel_atendimento_1 img {
position: absolute;
}
.rel_atendimento_1 img:nth-last-child(1) {
width: 24.5em;
top: 3em;
left: 0em;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
/* .rel_atendimento_1 img:nth-last-child(2) {
width: 6.5em;
top: 5em;
z-index: 3;
right: 3em;
animation: icon_up10 2s infinite ease-in-out alternate;
}
.rel_atendimento_1 img:nth-last-child(3) {
width: 13em;
top: 2.5em;
right: 6em;
animation: icon_up11 3s infinite ease-in-out alternate;
} */
@keyframes icon_up9 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up10 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up11 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
.rel_atendimento_11 {
margin-top: 3em;
}
.rel_atendimento_11 h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.rel_atendimento_11 h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
/* --- btn_four ---- */
.btn_six{
margin: 2em 0 0 0;
padding-bottom: 2em;
}
.btn_six a{
background-color: transparent;
color: var(--green-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
border: 1px solid var(--green-original-color);
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_six a:hover {
background-color: var(--green-original-color);
color: var(--white-original-color);
}
@media screen and (min-width: 600px) {
.btn_six{
margin: 2em 0 0 0;
padding-bottom: 4em;
}
.rel_atendimento_11 h1{
width: 10em;
}
.rel_atendimento_all{
margin: 1.5em .5em;
display: flex;
justify-content: center;
align-items: center;
}
.rel_atendimento_1{
scale: 1.2;
}
.rel_atendimento_11{
margin: 6em 0 0 0;
}
}
@media screen and (min-width: 1000px) {
.rel_atendimento_all {
width: 100%;
flex-direction: row;
margin: 0em .5em ;
padding: 0;
gap: 5em;
}
.rel_atendimento_1{
position: relative;
width: 25em;
height: 13em;
margin-left: 5em;
}
.rel_atendimento_1 img {
position: absolute;
}
.rel_atendimento_1 img:nth-last-child(1) {
width: 18em;
top: -3em;
left: 5em;
scale: 1.5;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
/* .rel_atendimento_1 img:nth-last-child(2) {
width: 9em;
top: 1em;
z-index: 3;
right: 6em;
animation: icon_up10 2s infinite ease-in-out alternate;
}
.rel_atendimento_1 img:nth-last-child(3) {
width: 18em;
top: -2em;
right: 10em;
animation: icon_up11 3s infinite ease-in-out alternate;
} */
.rel_atendimento_11 h1{
width: 10em;
}
}
/* ------------------------ */
/* ---- section eight --------- */
.controle_atd_all {
background-color: var(--offwhite-original-color);
padding: 3em 0 ;
}
.controle_atd_all {
margin: 0em .5em;
padding: 1em 1.5em 5em 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
}
.controle_graphic{
position: relative;
width: 20em;
height: 25em;
display: flex;
justify-content: center;
}
.controle_graphic img {
position: absolute;
}
.controle_graphic img:nth-last-child(1) {
width: 23em;
top: 3em;
z-index: 2;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
/* .controle_graphic img:nth-last-child(2) {
display: none;
} */
/* .controle_graphic img:nth-last-child(3) {
width: 7.5em;
top: 10em;
right: 12em;
z-index: 4;
animation: icon_up11 3s infinite ease-in-out alternate;
} */
/* .controle_graphic img:nth-last-child(4) {
width: 16em;
top: 18em;
right: 2em;
z-index: 5;
animation: icon_up11 3.5s infinite ease-in-out alternate;
} */
@keyframes icon_up9 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up10 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes icon_up11 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
.controle_text {
margin-top: 3em;
}
.controle_text h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.controle_text h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
/* --- btn_four ---- */
.btn_six{
margin: 2em 0 0 0;
padding: 0 0 2em 0;
}
.btn_six a{
background-color: transparent;
color: var(--green-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
border: 1px solid var(--green-original-color);
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_six a:hover {
background-color: var(--green-original-color);
color: var(--white-original-color);
}
@media screen and (min-width: 600px) {
.btn_six{
margin: 2em 0 0 0;
padding-bottom: 4em;
}
.controle_text h1{
width: 10em;
}
.controle_atd_all{
margin: 0em .5em 1.5em;
display: flex;
justify-content: center;
align-items: center;
}
.controle_graphic{
height: 26em;
scale: 1.2;
}
.controle_graphic img:nth-last-child(1) {
width: 25em;
top: 5em;
z-index: 2;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
/* .controle_graphic img:nth-last-child(2) {
display: flex;
width: 25em ;
top: 5em;
right: auto;
z-index: 3;
animation: icon_up10 2s infinite ease-in-out alternate;
} */
.controle_text{
margin: 6em 0 0 0em;
padding-left: 6em;
}
}
@media screen and (min-width: 1000px) {
.controle_atd_all {
width: 100%;
flex-direction: row;
margin: 0em .5em ;
padding: 0;
gap: 3em;
}
.controle_graphic{
position: relative;
width: 25em;
height: 13em;
margin-left: 7em;
}
.controle_graphic img {
position: absolute;
}
.controle_graphic img:nth-last-child(1) {
width: 28em;
top: -3em;
z-index: 2;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
/* .controle_graphic img:nth-last-child(2) {
width: 18em;
top: -.5em;
left: 5em;
scale: 1.5;
animation: icon_up10 1.5s infinite ease-in-out alternate;
} */
/* .controle_graphic img:nth-last-child(3) {
width: 8em;
top: 7em;
right: 20em;
z-index: 4;
animation: icon_up11 3s infinite ease-in-out alternate;
}
.controle_graphic img:nth-last-child(4) {
width: 16em;
top: 15em;
right: 6em;
z-index: 5;
animation: icon_up11 3.5s infinite ease-in-out alternate;
} */
.controle_text h1{
width: 10em;
}
.controle_text,
.rel_atendimento_11,
.customizacao_text {
margin-top: 0em;
}
}
/* ---- section nine --------- */
.customizacao_all {
background-color: var(--offwhite-original-color);
padding: 3em 0 ;
}
.customizacao_all {
margin: 0em .5em;
padding: 1em 1.5em 5em 1.5em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
}
.customizacao_graphic{
position: relative;
width: 20em;
height: 20em;
display: flex;
justify-content: center;
}
.customizacao_graphic img {
position: absolute;
}
.customizacao_graphic img:nth-last-child(1) {
width: 25em;
top: 3em;
z-index: 2;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
@keyframes icon_up9 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
.customizacao_text {
margin-top: 3em;
}
.customizacao_text h3{
font-size: 1.2em;
font-weight: 300;
color: var(--cinza1-original-color);
margin: 0;
}
.customizacao_text h1{
font-size: 2em;
text-transform: uppercase;
color: var(--blue-original-color);
margin: 0;
}
/* --- btn_four ---- */
.btn_six{
margin: 2em 0 0 0;
padding: 0 0 2em 0;
}
.btn_six a{
background-color: transparent;
color: var(--green-original-color);
font-weight: 500;
padding: .5em 2em;
border-radius: 50px;
border: 1px solid var(--green-original-color);
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_six a:hover {
background-color: var(--green-original-color);
color: var(--white-original-color);
}
@media screen and (min-width: 600px) {
.btn_six{
margin: 2em 0 0 0;
padding-bottom: 4em;
}
.customizacao_text h1{
width: 10em;
}
.customizacao_all{
margin: 1.5em .5em;
display: flex;
justify-content: center;
align-items: center;
}
.customizacao_graphic img:nth-last-child(1) {
width: 30em;
top: 3em;
z-index: 2;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
.customizacao_text{
margin: 6em 0 0 0;
}
}
@media screen and (min-width: 1000px) {
.customizacao_graphic{
position: relative;
width: 25em;
height: 13em;
margin-left: 5em;
}
.customizacao_graphic img {
position: absolute;
}
.customizacao_graphic img:nth-last-child(1) {
width: 30em;
top: -10.5em;
z-index: 2;
animation: icon_up9 1.5s infinite ease-in-out alternate;
}
.customizacao_all {
width: 100%;
flex-direction: row;
margin: 1.5em .5em ;
padding: 0;
gap: 6em;
}
.customizacao_text {
margin-top: 0em;
margin-right: -5em;
}
}
/* */
.buttons {
display: flex;
gap: 10px;
justify-content: center;
}
.tab-btn {
padding: 16px 20px;
border: none;
cursor: pointer;
background: rgba(0, 53, 128, 0.102);
border-radius: 50px;
font-weight: 600;
transition: 0.3s;
color: var(--white-original-color);
}
.tab-btn.active {
background: var(--blue-original-color);
color: #fff;
}
.tab-section {
display: none;
padding: 0 20px 20px 20px;
border-radius: 12px;
transition: opacity 0.4s ease;
}
.tab-section.active {
display: block;
opacity: 1;
}
@media screen and (min-width: 1000px){
.rel_atendimento_background{
display: flex;
justify-content: center;
align-items: center;
gap: 0em;
height: 40em;
}
.buttons{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-btn {
padding: 15px 20px;
border: none;
cursor: pointer;
background: rgba(0, 53, 128, 0.102);
border-radius: 50px;
font-weight: 800;
transition: 0.3s;
color: var(--white-original-color);
}
.tab-btn.active {
background: var(--blue-original-color);
color: #fff;
}
.tab-section {
display: none;
padding: 0 20px 20px 20px;
border-radius: 12px;
transition: opacity 0.4s ease;
}
.tab-section.active {
display: block;
opacity: 1;
}
}
/* -------------- circle ---------------- */
.circle_3::after{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 60%;
animation: circle1 7s infinite ease-in-out alternate;
z-index: -1;
scale: 1.5;
}
.circle_3::before{
content: '';
border: 3em solid var(--blue-original-color);
border-radius: 50%;
width: 15em;
height: 15em;
opacity: 10%;
position: absolute;
top: 80%;
right: 0em;
animation: circle2 7s infinite ease-in-out alternate;
z-index: -1;
scale: 1.5;
}
.circle_4::after{
content: '';
border: 4em solid var(--blue-original-color);
border-radius: 50%;
width: 20em;
height: 20em;
opacity: 10%;
position: absolute;
top: 160%;
right: 0em;
animation: circle3 5s infinite ease-in-out alternate;
z-index: -1;
scale: .4;
}
.circle_4::before{
content: '';
border: 6em solid var(--blue-original-color);
border-radius: 50%;
width: 30em;
height: 30em;
opacity: 10%;
position: absolute;
top: 100%;
left: em;
animation: circle4 5s infinite ease-in-out alternate;
z-index: -1;
scale: .4;
}
@keyframes circle3 {
0% {
transform: translateY(0) translateX(0px);
opacity: 10%;
}
50% {
opacity: 5%;
}
100% {
transform: translateY(60px) translateX(-60px);
opacity: 10%;
}
}
@keyframes circle4 {
0% {
transform: translateY(0) translateX(0px);
opacity: 10%;
}
50% {
opacity: 0%;
}
100% {
transform: translateY(-60px) translateX(-60px);
opacity: 10%;
}
}
/* -------------- circle ---------------- */
/* -------------- planos ---------------- */
.planos_all {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.select-custom {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fbfbfb;
border: 1px solid var(--blue-original-color);
border-radius: 30px;
padding: 12px 40px 12px 20px;
font-size: 13px;
font-family: 'Poppins';
font-weight: 450;
color: var(--blue-original-color);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 16px;
}
.desconto_plano1,
.boleto_plano1{
opacity: 0%;
}
.select-custom:hover {
background-image: url("data:image/svg+xml;utf8,");
color: var(--blue-original-color);
}
.select-custom:focus {
outline: none;
box-shadow: 0 0 0 1px var(--cinza1-original-color);
}
.fade {
opacity: 0.3;
}
.plano1 h2:nth-of-type(2) {
transition: opacity 0.3s ease;
}
/* ----- design planos ------- */
.plano1_all {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 0;
margin: 0;
}
.plano1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.plano1 h3 {
text-transform: uppercase;
letter-spacing: .2em;
font-size: 1.3em;
font-weight: 300;
}
.plano1 h2 {
font-size: 2.5em;
color: var(--blue-original-color);
}
.plano1 li {
color: black;
}
.plano1 p{
color: black;
}
/* ---------------------------- */
.btn_contratar{
background-color: transparent;
border-radius: 50px;
padding: .5em 2em;
border: 2px solid var(--green-original-color);
margin-top: 4em;
transition: background-color .3s ease-in-out, color .3s ease-in-out, border .3s ease-in-out ;
}
.btn_contratar:hover{
background-color: var(--green-original-color);
}
.btn_contratar p{
color: var(--green-original-color);
font-weight: bold;
font-size: 1.2em;
padding: 0;
margin: 0;
}
.btn_contratar p:hover{
color: var(--white-original-color);
}
.desconto {
margin: 0.5em 0;
}
.desconto1 {
color: #4b4b4b;
margin: 0;
}
.desconto2 {
display: none;
}
.trimestral .desconto1,
.trimestral .desconto2,
.semestral .desconto1,
.semestral .desconto2,
.anual .desconto1,
.anual .desconto2{
border-radius: 50px;
padding: 0em 1em;
margin: 0;
color: var(--white-original-color);
}
.semestral .desconto1,
.semestral .desconto2{
background-color: var(--blue-original-color) ;
}
.trimestral .desconto1,
.trimestral .desconto2{
background-color: var(--blue-original-color) ;
}
.anual .desconto1,
.anual .desconto2{
background-color: var(--green-original-color) ;
}
.trimestral h2{
color: var(--blue-original-color);
}
.semestral h2{
color: var(--blue-original-color);
}
.anual h2{
color: var(--green-original-color) ;
}
/* ---- */
.renovado_adesao {
width: 19em;
font-size: .8em;
}
/* ------- falar whats ------ */
.whats a {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(2, 85, 2);
border-radius: 5px;
margin: 2em 0 1.5em 0;
padding: 0 1.4em;
gap: 1em;
transition: background-color .3s ease-in-out;
}
.whats a:hover{
background-color: rgb(5, 141, 5);
}
.whats a p{
color: var(--white-original-color);
font-size: .9em;
}
.whats img{
width: 1.2em;
}
/* -------------------------- */
input[type="checkbox"]:checked + label{
color: var(--blue2-original-color);
}
label{
color: rgb(22, 22, 22);
}
input{
background-color: var(--blue-original-color);
}
/* ============= version large =-======== */
.quant_usuarios {
scale: 1;
}
.plano1{
padding: 0em 2.5em;
position: relative;
margin: 0;
background-color: transparent; /* leve translucidez */
backdrop-filter: blur(5px) saturate(100%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
box-shadow: 0 4px 20px rgba(171, 170, 170, 0.421);
border-radius: 10px;
margin: 2em;
}
.planos_text{
margin: 5em 0 0 0;
}
.planos_text_h3h1{
padding: 0 3em;
}
.planos_text_h3h1 h3,
.planos_text_h3h1 h1{
padding: 0;
margin: 0;
width: 100%;
}
.planos_text_h3h1 h1{
text-transform: uppercase;
color: var(--blue-original-color);
}
.planos_text_h3h1 h3{
font-weight: 400;
color: var(--cinza1-original-color);
}
.plano1 a:nth-last-child(1){
border: 0;
}
.btn_contratar {
background-color: transparent;
color: var(--blue-original-color);
padding: .5em 2em;
font-size: 1.2em;
border-radius: 50px;
font-weight: 500;
border: 1px solid var(--blue-original-color);
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_contratar:hover {
background-color: var(--blue-original-color);
color: var(--white-original-color);
}
.btn_contratar_maisvendido {
color: var(--green-original-color);
padding: .5em 2em;
border: 1px solid var(--green-original-color);
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.btn_contratar_maisvendido:hover {
background-color: var(--green-original-color);
color: var(--white-original-color);
}
/* --------- mais vendido ---------- */
.mais_vendido1::after {
content: '';
position: absolute;
top: 0em;
right: 0;
width: 8em;
height: 8em;
border-top-right-radius: 10px;
border-bottom-left-radius: 100%;
}
.mais_vendido1 p{
color: var(--white-original-color);
position: absolute;
top: 0.2em;
right: .6em;
font-weight: 500;
margin-bottom: 1em;
z-index: 1000;
rotate: 45deg;
font-size: .85em;
}
.mais_vendido2::after {
content: '';
position: absolute;
top: 0em;
right: 0;
width: 8em;
height: 8em;
border-top-right-radius: 10px;
border-bottom-left-radius: 100%;
}
.mais_vendido2 p{
color: var(--white-original-color);
position: absolute;
top: 1.5em;
right: .6em;
font-weight: 500;
margin-bottom: 1em;
z-index: 1000;
rotate: 45deg;
font-size: .85em;
}
.arrow-up {
position: absolute;
width: 0;
height: 0;
rotate: 45deg;
top: -12px;
right: -3.25em;
border-left: 5em solid transparent;
border-right: 5em solid transparent;
border-bottom: 5em solid rgb(164, 0, 0);
}
@media screen and (min-width: 600px) {
.plano1_all{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 0;
}
.quant_usuarios {
scale: 1;
}
.plano1{
padding: 0 3.5em;
}
}
@media screen and (min-width: 700px) {
.plano1_all{
gap: 0em;
}
}
@media screen and (min-width: 1080px) {
.plano1{
padding: 0em 3.5em;
position: relative;
margin: 0;
background-color: transparent; /* leve translucidez */
backdrop-filter: blur(5px) saturate(100%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
box-shadow: 0 4px 20px rgba(171, 170, 170, 0.421);
border-radius: 10px;
margin: 4em 1em 1em 1em;
font-size: .8em;
}
.planos_text{
margin: 5em 0 0 0;
}
.planos_text_h3h1{
padding: 0 3em;
}
.planos_text_h3h1 h3,
.planos_text_h3h1 h1{
padding: 0;
margin: 0;
width: 100%;
}
/* --------- mais vendido ---------- */
.mais_vendido::after {
content: '';
position: absolute;
top: -3em;
right: 0;
background-color: rgb(164, 0, 0);
width: 8em;
height: 3em;
}
.mais_vendido p{
color: var(--white-original-color);
position: absolute;
top: -3.2em;
right: .6em;
font-weight: 500;
z-index: 1000;
}
}
/* */
.faq_text{
margin: 5em 0 0 0;
}
.faq_text_h3h1{
padding: 0 3em;
}
.faq_text_h3h1 h3,
.faq_text_h3h1 h1{
padding: 0;
margin: 0;
width: 100%;
}
.faq_text_h3h1 h1{
text-transform: uppercase;
color: var(--blue-original-color);
}
.faq_text_h3h1 h3{
font-weight: 400;
color: var(--cinza1-original-color);
}
.faq_all {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
flex-direction: column;
padding: 0;
}
.faq_all h2 {
margin: 1em 0 -.5em 0;
color: var(--blue-original-color);
}
.faq-container {
width: 100%;
max-width: 500px;
margin: 0 auto 4em auto;
padding: 20px;
color: var(--blue-original-color);
display: flex;
flex-direction: column;
gap: .5em;
}
.faq-container h4 {
font-weight: 400;
margin: 1em 1em;
}
.faq-container p {
color: white;
}
.faq-questao {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: 2px;
padding: .1em .0em;
margin: 0em;
cursor: pointer;
font-size: .8em;
font-weight: 300;
}
.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 0em;
margin: 0;
border-radius: 5px;
text-align: left;
width: 100%;
}
.faq-resposta li,
.faq-resposta p {
font-size: .8em;
color: var(--cinza1-original-color);
list-style-type: none;
}
.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_all {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
flex-direction: column;
padding: 0;
}
.faq-questao{
border-radius: 2px;
text-align: left;
transition: box-shadow .5s ease;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.faq-questao:hover {
box-shadow: 1px 1px 15px -2px rgba(40, 40, 40, 0.153);
}
.faq_all {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
flex-direction: column;
padding: 0;
}
.faq_all h2 {
margin: 1em 0 -.5em 0;
color: var(--blue-original-color);
}
.faq-container {
width: 100%;
max-width: 500px;
margin: 3em auto 10em auto;
padding: 20px;
color: var(--blue-original-color);
display: flex;
flex-direction: column;
gap: .5em;
}
.faq-container h4 {
font-weight: 400;
margin: 1em 1em;
}
.faq-container p {
color: white;
}
.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 1em;
margin: 0;
border-radius: 5px;
text-align: left;
width: 100%;
}
.faq-resposta ul{
text-align: left;
margin: 0;
padding: 1em 0;
}
.faq-resposta li{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.faq-resposta li,
.faq-resposta p {
font-size: .7em;
color: var(--cinza1-original-color);
}
}
@media screen and (min-width: 950px) {
.faq-container {
scale: 1.2;
}
}
/* */
.whats_mobile img{
height: 3em;
width: 3em;
border-radius: 100%;
position: fixed;
right: 20px;
bottom: calc(20px + env(safe-area-inset-bottom)); /* evita corte */
z-index: 10000;
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;
}
.fixed_depoimentos img,
.fixed_proposta img,
.fixed_relatorios img{
width: 1.7em;
transition: box-shadow .3s ease-in-out, border .3s ease-in-out, border-radius .3s ease-in-out;
}
.fixed_proposta{
width: 0px;
position: fixed;
right: 5.8em;
bottom: calc(3.6em + env(safe-area-inset-bottom)) !important; /* evita corte */
animation: moveFixed1 1s infinite ease-in-out alternate;
}
.fixed_proposta img:hover{
box-shadow: 0 4px 20px rgba(0, 32, 111, 0.3) ;
border: 50px;
border-radius: 50px;
}
.fixed_relatorios{
width: 0px;
position: fixed;
right: 3em;
bottom: calc(4.5em + env(safe-area-inset-bottom)) !important; /* evita corte */
animation: moveFixed2 1.5s infinite ease-in-out alternate;
}
.fixed_relatorios img:hover{
box-shadow: 0 4px 20px rgba(1, 27, 120, 0.3);
border: 50px;
border-radius: 50px;
}
.fixed_depoimentos{
width: 0px;
position: fixed;
right: 6.5em;
bottom: calc(1em + env(safe-area-inset-bottom)) !important; /* evita corte */
animation: moveFixed3 2s infinite ease-in-out alternate;
}
.fixed_depoimentos img:hover{
box-shadow: 0 4px 20px rgba(187, 0, 0, 0.3);
border: 50px;
border-radius: 50px;
}
@keyframes moveFixed1 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes moveFixed2 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes moveFixed3 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
/* */
@media screen and (min-width: 550px){
.fixed_depoimentos img,
.fixed_proposta img,
.fixed_relatorios img{
width: 100%;
}
.whats_mobile img{
height: 4em;
width: 4em;
position: fixed;
top: 39em;
right: 1em;
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;
}
.fixed_depoimentos img,
.fixed_proposta img,
.fixed_relatorios img{
width: 2em;
transition: box-shadow .3s ease-in-out, border .3s ease-in-out, border-radius .3s ease-in-out;
}
.fixed_proposta{
width: 0px;
position: fixed;
top: 37em;
right:6.5em;
animation: moveFixed1 1s infinite ease-in-out alternate;
}
.fixed_proposta img:hover{
box-shadow: 0 4px 20px rgba(187, 0, 0, 0.3);
border: 50px;
border-radius: 50px;
}
.fixed_relatorios{
width: 0px;
position: fixed;
top: 40em;
right: 8em;
animation: moveFixed2 1.5s infinite ease-in-out alternate;
}
.fixed_relatorios img:hover{
box-shadow: 0 4px 20px rgba(1, 27, 120, 0.3);
border: 50px;
border-radius: 50px;
}
.fixed_depoimentos{
width: 0px;
position: fixed;
top: 36.2em;
right: 3.2em;
animation: moveFixed3 2s infinite ease-in-out alternate;
}
.fixed_depoimentos img:hover{
box-shadow: 0 4px 20px rgba(0, 32, 111, 0.3);
border: 50px;
border-radius: 50px;
}
@keyframes moveFixed1 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes moveFixed2 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
@keyframes moveFixed3 {
from {
transform: translateY(0);
}
to {
transform: translateY(5px);
}
}
}
@media screen and (min-width: 1580px){
.whats_mobile img{
height: 4em;
width: 4em;
position: fixed;
top: 51em;
right: 1em;
border-radius: 100%;
transition: border .5s ease, background-color .5s ease, padding .5s ease, box-shadow .5s ease;
}
.fixed_proposta{
width: 0px;
position: fixed;
top: 49em;
right:6.5em;
animation: moveFixed1 1s infinite ease-in-out alternate;
}
.fixed_relatorios{
width: 0px;
position: fixed;
top: 52em;
right: 8em;
animation: moveFixed2 1.5s infinite ease-in-out alternate;
}
.fixed_depoimentos{
width: 0px;
position: fixed;
top: 48.2em;
right: 3.2em;
animation: moveFixed3 2s infinite ease-in-out alternate;
}
}
/* --------------------------- depoimentos ---------------------- */
.planos_text{
text-align: start;
}
.depoiments {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 4em;
}
.foto video{
width: 15.5em;
border-radius: 20px;
}
.text_aspas{
margin-top: 2em;
margin-bottom: 2em;
position:relative ;
}
.text_aspas img{
width: 2em;
}
.text_aspas h4{
font-size: .8em;
font-weight: 600;
color: var(--blue-original-color);
text-align: start;
}
.aspas1{
position: absolute;
top: -1em;
left: -1em;
z-index: -5;
animation: aspas1 4s infinite ease-in-out alternate;
}
.aspas2{
position: absolute;
bottom: 2.5em;
right: -1em;
z-index: -5;
animation: aspas2 3s infinite ease-in-out alternate;
}
@keyframes aspas1 {
0% {
transform: translateY(0) translateX(0px);
}
50% {
}
100% {
transform: translateY(-5px) translateX(5px);
}
}
@keyframes aspas2 {
0% {
transform: translateY(0) translateX(0px);
}
50% {
}
100% {
transform: translateY(-5px) translateX(5px);
}
}
.text_aspas p{
font-size: .8em;
font-weight: 300;
color: var(--cinza2-original-color);
width: 20em;
text-align: start;
}
.depoiments_all {
background-color: var(--offwhite-original-color);
padding: 3em 0 5em 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.depoimentos_swiper {
width: 100%;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination{
padding-top: 4em;
}
/* Estilo da paginação e setas */
.swiper-pagination-bullet {
background: var(--blue-original-color);
opacity: 0.5;
transition: 0.3s;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--green-original-color);
}
.swiper-button-next,
.swiper-button-prev {
color: var(--blue-original-color);
scale: .5;
}
.depoiments {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5em;
}
.text_aspas {
margin-top: 1.5em;
position: relative;
}
.text_aspas p {
font-size: 0.9em;
color: var(--cinza2-original-color);
max-width: 25em;
}
@media screen and (min-width:700px) {
.foto video{
width: 15.5em;
border-radius: 20px;
}
.foto{
position: relative;
}
.foto::after{
content: '';
background: linear-gradient(
180deg,
rgba(2, 79, 199, 1) 11%,
rgba(3, 104, 173, 0.71) 32%,
rgba(4, 119, 83, 0.41) 55%,
rgba(5, 134, 40, 0.19) 75%,
rgba(5, 143, 13, 0.05) 91%,
rgba(6, 147, 4, 0) 100%);
position: absolute;
top: -1em;
left: -1em;
width: 15.5em;
height: 28em;
border-radius: 25px;
z-index: -1;
}
.text_aspas{
margin-top: 2em;
margin-bottom: 2em;
position:relative ;
}
.text_aspas img{
width: 1.5em;
}
.text_aspas h4{
font-size: 1em;
font-weight: 600;
color: var(--blue-original-color);
text-align: start;
}
.aspas1{
position: absolute;
top: -1em;
left: -1em;
z-index: -5;
}
.aspas2{
position: absolute;
bottom: 2.5em;
right: -1em;
z-index: -5;
}
.text_aspas p{
font-size: 1em;
font-weight: 300;
color: var(--cinza2-original-color);
width: 15em;
text-align: start;
}
.depoiments{
flex-direction: row;
margin-bottom: 5em;
gap: 4em;
}
.depoimentos_swiper {
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--blue-original-color);
scale: .6;
margin: 0em;
}
}
@media screen and (min-width:1500px) {
.depoiments_all{
gap:3em;
}
.foto video{
width: 19.5em;
border-radius: 20px;
}
.foto{
position: relative;
}
.foto::after{
content: '';
background: linear-gradient(
180deg,
rgba(2, 79, 199, 1) 11%,
rgba(3, 104, 173, 0.71) 32%,
rgba(4, 119, 83, 0.41) 55%,
rgba(5, 134, 40, 0.19) 75%,
rgba(5, 143, 13, 0.05) 91%,
rgba(6, 147, 4, 0) 100%);
position: absolute;
top: -2.5em;
left: -2.5em;
width: 20.5em;
height: 30em;
border-radius: 25px;
z-index: -1;
}
.text_aspas{
margin-top: 2em;
margin-bottom: 2em;
position:relative ;
}
.text_aspas img{
width: 3em;
}
.text_aspas h4{
font-size: 1em;
font-weight: 600;
color: var(--blue-original-color);
text-align: start;
}
.aspas1{
position: absolute;
top: -2em;
left: -1em;
z-index: -5;
}
.aspas2{
position: absolute;
bottom: 1.5em;
right: -1em;
z-index: -5;
}
.text_aspas p{
font-size: 1em;
font-weight: 300;
color: var(--cinza2-original-color);
width: 30em;
text-align: start;
}
.depoiments{
flex-direction: row;
margin-bottom: 5em;
gap: 4em;
}
.depoimentos_swiper {
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}
.swiper-button-next,
.swiper-button-prev {
color: var(--blue-original-color);
scale: .6;
margin: 16em;
}
}
/* ------------------ logos ------------------ */
.carousel-section2 {
max-width: 10000px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.carousel-section2 {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding:0;
margin-bottom: 1em;
background-color: transparent;
height: 10em;
position: relative;
}
.carousel-container2 {
width: 100%;
max-width: 1000px;
overflow: hidden;
position: relative;
}
.carousel2 {
display: flex;
width: 540px; /* Permite que o conteúdo tenha o tamanho necessário */
animation: slide-left 60s linear infinite; /* Animação contínua de rolar à esquerda */
}
.gallery-item2 {
min-width: 16%;
padding: 0em;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}
.gallery-item2 img {
width: 200px;
height: 5em;
border-radius: 5px;
}
/* Animação para o carrossel mover para a esquerda */
@keyframes slide-left {
0% {
transform: translateX(0); /* Início do carrossel */
}
100% {
transform: translateX(-299.9999%); /* Move até o final do primeiro conjunto */
}
}
@media screen and (min-width: 400px) {
.gallery-item2 {
min-width: 20%;
padding: 0em;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}
.gallery-item2 img {
width: 200px;
height: 5em;
}
}
/* CSS para resoluções maiores */
@media screen and (min-width: 950px) {
.imagem_fundo_confiam {
position: absolute;
font-size: 7.85em;
opacity: 5%;
top: -3.5em;
width: 20em;
text-align: center;
line-height: normal;
}
.carousel-section2 {
height: 15.5em;
position: relative;
}
.clientes_confiam {
font-size: 2.7em;
margin-bottom: 1em;
margin-top: 1em;
}
.gallery-item2 {
min-width: 0%;
padding: 20px 0.5em;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-container2 {
width: 100%;
max-width: 2000px;
overflow: hidden;
position: relative;
}
.carousel2 {
display: flex;
width: max-content; /* Isso ajusta para o tamanho total dos itens */
animation: slide-left 90s linear infinite;
}
.gallery-item2 img {
width: 10em;
height: 10em;
margin: 0;
}
/* Animação para o carrossel mover para a esquerda */
@keyframes slide-left {
0% {
transform: translateX(0); /* Início do carrossel */
}
100% {
transform: translateX(-43.3333%); /* Move até o final do primeiro conjunto */
}
}
}
/* ---------- PAGINA CONTRATAR - FORMULÁRIO ---------- */
.form_section_two {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form_input{
color: var(--blue2-original-color);
background-color: transparent; /* leve translucidez */
backdrop-filter: blur(5px) saturate(100%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
box-shadow: 0 4px 20px rgba(171, 170, 170, 0.2);
}
.form_cont{
margin: 0;
}
.form_cont_h3h1{
padding: 0 1em 1em 1em;
}
.form_cont_h3h1 h3,
.form_cont_h3h1 h1{
padding: 0;
margin: 0;
width: 100%;
text-align: start;
}
.form_cont_h3h1 h1{
text-transform: uppercase;
color: var(--white-original-color);
}
.form_cont_h3h1 h3{
font-weight: 300;
color: var(--white-original-color);
}
/* ---- container form ----- */
.form_container{
background-color: transparent;
}
.form_fieldset{
border: none;
display: flex;
flex-direction: column;
align-items: start;
gap: .5em;
}
.form_fieldset input{
border-radius: 50px;
padding: 1em 1.5em;
border: 1px solid var(--white-original-color);
width: 100%;
color: var(--white-original-color);
}
.form_fieldset input:focus{
outline: 1px solid var(--cinza-original-color);
}
.form_fieldset input::placeholder{
color: var(--white-original-color);
font-family: Poppins;
}
.form_fieldset select{
background-color: transparent !important;
border-radius: 50px;
padding: .8em 1.5em;
border: 1px solid var(--white-original-color);
width: 100%;
color: var(--white-original-color);
font-family: Poppins;
}
.form_fieldset select:focus{
outline: 1px solid var(--white-original-color);
}
.form_select option:nth-last-child(2),
.form_select option:nth-last-child(3),
.form_select option:nth-last-child(4),
.form_select option:nth-last-child(5),
.form_select option:nth-last-child(6),
.form_select option:nth-last-child(7),
.form_select option:nth-last-child(8) {
color: var(--blue-original-color);
font-family: Poppins;
}
/* Botão */
.form_button {
font-family: Poppins;
background-color: var(--blue-original-color);
color: var(--white-original-color);
font-weight: 500;
padding: 1.2em 2em;
margin-top: 3em;
border-radius: 50px;
border: none;
transition: background-color .3s ease-in-out, outline .3s ease-in-out, color .3s ease-in-out ;
}
.form_button:hover {
background-color: var(--blue2-original-color);
color: var(--white-original-color);
cursor: pointer;
}
/* ---------- form resolution small - end ---------- */
/* ---------- form resolution medium - start ---------- */
@media screen and (min-width: 700px) {
.form_cont_h3h1 {
width: 100%;
}
.form_section_two {
margin-top: 5em;
}
.form_container {
width: 100%;
}
.form_section_two .article_principal h1 {
width: 100%;
font-size: 1.7em;
}
.form_input,
.form_select {
width: 100%;
}
.form_cont_h3h1,
.form_fieldset{
padding-left: 0;
}
.form_fieldset{
border: none;
display: flex;
flex-direction: column;
align-items: start;
gap: .5em;
}
}
/* ---------- form resolution large - start ---------- */
@media screen and (min-width: 950px) {
.form_input{
background-color: var(--offwhite-original-color) !important;
}
.form_fieldset input::placeholder{
color: #a1a1a1;
}
.form_fieldset select{
background-color: var(--offwhite-original-color) !important;
color: #a1a1a1;
}
.form_cont_h3h1 {
width: 100%;
}
.form_section_two {
margin-top: 5em;
}
.form_container {
width: 100%;
}
.form_section_two .article_principal h1 {
width: 100%;
font-size: 1.7em;
}
.form_input,
.form_select {
width: 100%;
}
.form_cont_h3h1,
.form_fieldset{
padding-left: 0;
}
}
/* ---------- form resolution extra large - start ---------- */
@media screen and (min-width: 1300px) {
.form_section_two {
margin-top: 0;
}
.form_section_two .article_principal h1 {
font-size: 2.1em;
}
}
@media screen and (min-width: 1600px) {
.form_section_two {
margin-top: 4em;
}
.form_section_two .article_principal h1 {
font-size: 2.1em;
}
}
/* -------- porque entregar dados ------------ */
.row{
display: flex;
flex-direction: column;
text-align: start;
}
.condition{
padding-top: 2em;
font-weight: 500;
text-align: start;
}
.condition input{
margin-left: 0;
}
.condition p{
margin: 1em 0 0 0;
}
.condition span {
font-size: .8em;
font-family: Poppins;
color: var(--white-original-color);
}
.condition span a{
text-decoration: underline;
color: var(--blue-original-color);
}
.dados_link {
color: var(--blue-original-color);
text-decoration: underline;
cursor: pointer;
font-size: .8em;
margin: 0;
text-decoration: none;
}
/* ==== Fundo do modal ==== */
.modal_fundo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none; /* escondido por padrão */
justify-content: center;
align-items: center;
z-index: 9999;
}
/* ==== Caixa do modal ==== */
.modal_conteudo {
background-color: #fff;
padding: 2em;
border-radius: 5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
max-width: 400px;
width: 85%;
text-align: left;
position: relative;
animation: aparecerModal 0.3s ease-in-out;
}
.modal_conteudo h3{
color: var(--blue-original-color);
}
.modal_conteudo p{
color: var(--cinza2-original-color);
font-size: .9em;
}
/* ==== Botão de fechar (X) ==== */
.modal_fechar {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 1.5em;
cursor: pointer;
color: var(--blue-original-color);
transition: color 0.2s ease-in-out;
}
.modal_fechar:hover {
color: #000;
}
/* ==== Botão inferior ==== */
.modal_botao {
margin-top: 1.5em;
background-color: var(--blue-original-color);
color: var(--white-original-color);
border: none;
border-radius: 50px;
padding: 0.6em 2em;
font-size: .7em;
cursor: pointer;
font-weight: 400;
font-family: Poppins;
transition: background-color 0.3s ease-in-out;
}
.modal_botao:hover {
background-color: #003580;
}
@keyframes aparecerModal {
from {
opacity: 0;
transform: translateY(-15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ---------- Colocando celular junto - section two - hero_folder --------- */
.container_folder_ctr{
display: none;
}
/* ---------- section two - hero_folder --------- */
@media screen and (min-width: 950px){
.container_folder_ctr{
display: flex;
}
.celular_img_ctr{
display: flex;
}
.computer_img_ctr{
display: none;
}
.divisionall_ctr{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap:5em;
}
.container_folder_ctr {
margin: 0;
padding: 0;
border-radius: 0px;
opacity: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
/* ----content_two ----- */
.content_two_ctr {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20em;
}
.content_two_ctr>img {
width: 30em;
}
.balon_group1_ctr,
.balon_group2_ctr {
position: absolute;
width: 17em;
}
.balon_group1_ctr {
top: 0;
left: 5em;
}
.balon_group2_ctr {
top: 25em;
right: 5em;
}
.content_balon1_ctr {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1em;
}
.content_balon1_ctr img {
position: absolute;
scale: 1.1;
}
.content_balon2_ctr img {
position: absolute;
scale: 1.1;
}
.content_balon1_ctr img:nth-last-child(1) {
top: 7em;
right: -1em;
animation: icon_up1 1.4s infinite ease-in-out alternate;
}
.content_balon1_ctr img:nth-last-child(2) {
top: 4em;
right: 2.5em;
animation: icon_up2 2s infinite ease-in-out alternate;
}
.content_balon1_ctr img:nth-last-child(3) {
top: 1em;
right: -2em;
animation: icon_up3 1.7s infinite ease-in-out alternate;
}
/* ----------------------- */
.content_balon2_ctr img:nth-last-child(1) {
top: 6em;
left: -2em;
animation: icon_up4 1.4s infinite ease-in-out alternate;
}
.content_balon2_ctr img:nth-last-child(2) {
top: 3em;
left: 3em;
animation: icon_up5 2s infinite ease-in-out alternate;
}
.content_balon2_ctr img:nth-last-child(3) {
top: 0em;
left: 1em;
animation: icon_up6 1.7s infinite ease-in-out alternate;
}
@keyframes icon_up1 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up2 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up3 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up4 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up5 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up6 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
}
/* ------------------------- */
@media screen and (min-width: 1200px){
.divisionall_ctr{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 4em 0 0 0;
gap:13em;
}
.container_folder_ctr {
margin: 0;
border-radius: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
/* ----content_two ----- */
.content_two_ctr {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20em;
margin-top: 2em;
}
.content_two_ctr>img {
width: 60em;
}
.balon_group1_ctr,
.balon_group2_ctr {
position: absolute;
width: 17em;
}
.balon_group1_ctr {
top: 0;
left: 5em;
}
.balon_group2_ctr {
top: 25em;
right: 5em;
}
.content_balon1_ctr {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1em;
}
.content_balon1_ctr img {
position: absolute;
scale: 1.1;
}
.content_balon2_ctr img {
position: absolute;
scale: 1.1;
}
.content_balon1_ctr img:nth-last-child(1) {
top: 7em;
right: -1em;
animation: icon_up1 1.4s infinite ease-in-out alternate;
}
.content_balon1_ctr img:nth-last-child(2) {
top: 4em;
right: 2.5em;
animation: icon_up2 2s infinite ease-in-out alternate;
}
.content_balon1_ctr img:nth-last-child(3) {
top: 1em;
right: -2em;
animation: icon_up3 1.7s infinite ease-in-out alternate;
}
/* ----------------------- */
.content_balon2_ctr img:nth-last-child(1) {
top: 6em;
left: -2em;
animation: icon_up4 1.4s infinite ease-in-out alternate;
}
.content_balon2_ctr img:nth-last-child(2) {
top: 3em;
left: 3em;
animation: icon_up5 2s infinite ease-in-out alternate;
}
.content_balon2_ctr img:nth-last-child(3) {
top: 0em;
left: 1em;
animation: icon_up6 1.7s infinite ease-in-out alternate;
}
@keyframes icon_up1 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up2 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up3 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up4 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up5 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
@keyframes icon_up6 {
from {
transform: translateY(0);
}
to {
transform: translateY(6px);
}
}
}
@media screen and (min-width: 1600px){
.divisionall_ctr{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 0;
gap:30em;
}
.computer_img_ctr{
display: flex;
margin: 0 0 0 -20em;
}
.celular_img_ctr{
display: none;
}
.balon_group1_ctr {
top: 0;
left: 5em;
}
.balon_group2_ctr {
top: 15em;
right: 30em;
}
.content_balon1_ctr {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1em;
}
.content_balon1_ctr img {
position: absolute;
scale: 1.5;
}
.content_balon2_ctr img {
position: absolute;
scale: 1.5;
}
.content_balon1_ctr img:nth-last-child(1) {
top: 13em;
right: -1em;
animation: icon_up1 1.4s infinite ease-in-out alternate;
}
.content_balon1_ctr img:nth-last-child(2) {
top: 6em;
right: 2.5em;
animation: icon_up2 2s infinite ease-in-out alternate;
}
.content_balon1_ctr img:nth-last-child(3) {
top: 1em;
right: -2em;
animation: icon_up3 1.7s infinite ease-in-out alternate;
}
/* ----------------------- */
.content_balon2_ctr img:nth-last-child(1) {
top: 7em;
left: 2em;
animation: icon_up4 1.4s infinite ease-in-out alternate;
}
.content_balon2_ctr img:nth-last-child(2) {
top: -5em;
left: 3em;
animation: icon_up5 2s infinite ease-in-out alternate;
}
.content_balon2_ctr img:nth-last-child(3) {
top: -10em;
left: 1em;
animation: icon_up6 1.7s infinite ease-in-out alternate;
}
}
/* */
.faq_text_ctr{
margin: 5em 0 0 0;
}
.faq_text_h3h1_ctr{
padding: 0 3em;
}
.faq_text_h3h1_ctr h3,
.faq_text_h3h1_ctr h1{
padding: 0;
margin: 0;
width: 100%;
}
.faq_text_h3h1_ctr h1{
text-transform: uppercase;
color: var(--blue-original-color);
}
.faq_text_h3h1_ctr h3{
font-weight: 400;
color: var(--white-original-color);
}
.faq_all_ctr {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
flex-direction: column;
padding: 0;
}
.faq_all_ctr h2 {
margin: 1em 0 -.5em 0;
color: var(--blue-original-color);
}
.faq-container_ctr {
width: 100%;
max-width: 500px;
margin: 0 auto 4em auto;
padding: 20px;
color: var(--blue-original-color);
display: flex;
flex-direction: column;
gap: .5em;
}
.faq-container_ctr h4 {
font-weight: 400;
margin: 1em 1em;
}
.faq-container_ctr p {
color: white;
}
.faq-questao_ctr {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px) saturate(100%);
border-radius: 5px;
padding: .1em .0em;
margin: 0em;
cursor: pointer;
font-size: .8em;
font-weight: 300;
border: 1px solid rgba(0, 0, 255, 0.073);
}
.faq-resposta_ctr {
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 1em;
margin: 0;
border-radius: 5px;
text-align: left;
width: 100%;
}
.faq-resposta_ctr li,
.faq-resposta_ctr p {
font-size: .8em;
color: rgb(125, 123, 123);
list-style-type: none;
text-align: start;
}
.faq_ctr.active .faq-resposta_ctr {
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_all_ctr {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
flex-direction: column;
padding: 0;
}
.faq-questao_ctr{
text-align: left;
transition: box-shadow .5s ease;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px) saturate(100%);
border-radius: 5px;
border: 1px solid rgba(0, 0, 255, 0.073);
}
.faq-questao_ctr:hover {
box-shadow: 1px 1px 15px -2px rgba(40, 40, 40, 0.153);
}
.faq_all_ctr {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
flex-direction: column;
padding: 0;
}
.faq_all_ctr h2 {
margin: 1em 0 -.5em 0;
color: var(--blue-original-color);
}
.faq-container_ctr {
width: 100%;
max-width: 100%;
margin: 3em auto 10em auto;
padding: 20px;
color: var(--blue-original-color);
display: flex;
flex-direction: column;
gap: .5em;
}
.faq-container_ctr h4 {
font-weight: 400;
margin: 1em 1em;
}
.faq-container_ctr p {
color: white;
}
.faq-resposta_ctr {
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 1em;
margin: 0;
border-radius: 5px;
text-align: left;
width: 100%;
}
.faq-resposta_ctr ul{
text-align: left;
margin: 0;
padding: 1em 0;
}
.faq-resposta_ctr li{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.faq-resposta_ctr li,
.faq-resposta_ctr p {
font-size: .7em;
color: rgb(125, 123, 123);
}
}
@media screen and (min-width: 950px) {
.faq-container_ctr {
scale: 1.2;
}
}
/* -------------------------------------------------------- */
/* ======== NOVO FOOTER PADRÃO ======== */
.footer {
background: linear-gradient(180deg, rgba(2,79,199,1) 0%, rgba(4,119,83,0.6) 100%);
color: var(--white-original-color);
padding: 4em 1.5em 2em;
position: relative;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 3em;
}
/* Seção superior */
.footer-top {
padding-bottom: 3em;
}
.footer-top h2 {
font-size: 1.8em;
font-weight: 600;
margin-bottom: .3em;
}
.footer-top h3 {
font-weight: 400;
opacity: .8;
padding-bottom: 3em;
}
.footer-btn {
margin: 2em 0 0 0;
font-size: 1.2em;
background-color: var(--green-original-color);
color: var(--white-original-color);
border: none;
border-radius: 50px;
padding: .5em 2.2em;
cursor: pointer;
font-weight: 500;
transition: all .3s ease-in-out;
}
.footer-btn:hover {
background-color: var(--white-original-color);
color: var(--green-original-color);
}
/* Parte inferior */
.footer-bottom {
display: grid;
grid-template-columns: 1fr;
gap: 2.5em;
text-align: left;
}
.footer-col h4 {
color: var(--white-original-color);
font-size: 1em;
margin-bottom: 1em;
font-weight: 600;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.footer-col ul li {
margin-bottom: .6em;
}
.footer-col ul li a {
color: rgba(255,255,255,0.8);
text-decoration: none;
font-size: .9em;
transition: color .3s ease-in-out;
}
.footer-col ul li a:hover {
color: var(--offwhite-original-color);
}
.footer-logo {
width: 8em;
margin-bottom: 1em;
}
.footer-desc {
color: rgba(255,255,255,0.8);
font-size: .9em;
line-height: 1.4em;
}
/* Redes sociais */
.footer-socials {
display: flex;
gap: 1em;
margin-top: 1em;
}
.footer-socials a {
color: rgba(255,255,255,0.7);
font-size: 1.3em;
transition: color .3s ease-in-out;
}
.footer-socials a:hover {
color: var(--offwhite-original-color);
}
/* Direitos */
.footer-rights {
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 2em;
padding-top: 1em;
font-size: .8em;
opacity: .7;
}
/* Responsividade */
@media screen and (min-width: 700px) {
.footer-bottom {
grid-template-columns: repeat(2, 1fr);
gap: 3em;
}
}
@media screen and (min-width: 1000px) {
.footer-bottom {
grid-template-columns: repeat(4, 1fr);
}
.footer {
text-align: left;
padding: 5em 2em 2em;
}
.footer-top {
text-align: center;
}
.footer-top h2{
font-size: 3em;
}
}
/* ===== Ajustes específicos para iPhone (Safari) ===== */
/* Corrige escala de fonte e mantém tamanho original */
html, body {
-webkit-text-size-adjust: 100%;
overflow-x: hidden !important;
}
/* Garante o negrito e tamanho do título */
.faq_text_h3h1 h1,
.planos_text_h3h1 h1,
.faq_text_h3h1_ctr h1 {
font-weight: 700 !important;
font-size: 2em !important; /* Ajuste se quiser maior */
color: var(--blue-original-color) !important;
}
/* Ajusta texto "Aqueles que confiam..." */
.carousel-section2 h3,
.carousel-section2 .clientes_confiam {
font-weight: 700 !important;
font-size: 2em !important;
color: var(--blue-original-color) !important;
}