header {
top: 45px;
background-color: unset;
height: auto;
}
header .container .dir .sub-menu {
top: 95px;
}
#banner {
position: relative;
height: 1028px;
background-image: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/quem-somos/bg-banner.webp);
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
}
#banner .overlay {
background: linear-gradient(180deg, rgba(23, 28, 36, 0.68) 42.58%, var(--preto) 107.1%);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}
#banner .container {
width: 1730px;
max-width: 90%;
margin: 0 auto;
position: relative;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 15.3%;
}
#banner .container>.titulo {
font-weight: 700;
font-size: 3.438rem;
line-height: 5.156rem;
text-align: center;
display: inline-block;
margin: 0 auto;
text-transform: uppercase;
margin-bottom: 22px;
color: #fff;
width: 85%;
}
#banner .container>.titulo span {
background-color: var(--verde);
color: var(--preto);
padding: 0.4% 1.6%;
display: block;
}
#banner .container>.texto {
font-weight: 400;
font-size: 24px;
text-align: center;
color: #fff;
margin-bottom: 52px;
}
#banner .container>.btn {
font-weight: 700;
font-size: 16px;
color: #fff;
transition: var(--transicao);
border: 1px solid #fff;
border-radius: 67px;
display: flex;
column-gap: 10px;
align-items: center;
padding: 14px 25.5px;
margin-bottom: 40px;
}
#banner .container>.btn:hover {
color: var(--preto);
background-color: var(--verde);
border: 1px solid var(--verde);
}
#banner .container .box-kpis {
display: flex;
width: 1440px;
max-width: 100%;
margin: 0 auto;
column-gap: 10.7%;
align-items: flex-end;
margin-top: auto;
margin-bottom: 9%;
}
#banner .container .box-kpis .kpi.primeiro {
font-family: var(--raleway);
font-weight: 500;
font-size: 1.375rem;
line-height: 1.733rem;
letter-spacing: 1.76px;
color: #fff;
}
#banner .container .box-kpis .kpi.primeiro span {
font-weight: 600;
}
#banner .container .box-kpis .kpi .numero {
font-weight: 700;
font-size: 2.125rem;
color: var(--verde);
}
#banner .container .box-kpis .kpi .numero .menor {
font-weight: 400;
font-size: 1.375rem;
letter-spacing: 0.44px;
text-transform: uppercase;
}
#banner .container .box-kpis .kpi .texto {
color: #fff;
text-transform: uppercase;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.23px;
}
#banner video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#banner .redes {
padding: 8px 10px;
border-radius: 23px;
border: 1px solid var(--verde);
display: flex;
column-gap: 9px;
row-gap: 10px;
position: absolute;
left: 50px;
top: 29%;
flex-direction: column;
z-index: 1;
}
#banner .redes a {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 2px solid;
backdrop-filter: blur(10px);
background-color: #fff;
opacity: 0.3;
border-radius: 50%;
transition: var(--transicao);
text-decoration: none;
border: none;
}
#banner .redes a:hover {
opacity: 1;
} #clientes {
width: 100%;
padding-top: 43px;
padding-bottom: 54px;
position: relative;
}
#clientes .swiper .swiper-slide {
width: auto;
align-content: center;
}
#clientes .swiper::before {
content: '';
width: 100px;
height: 100%;
position: absolute;
z-index: 2;
background: linear-gradient(90deg, #ffffff 0%, rgba(226, 228, 227, 0) 100%);
left: 0;
bottom: 0;
}
#clientes .swiper::after {
content: '';
width: 100px;
height: 100%;
position: absolute;
z-index: 2;
background: linear-gradient(270deg, #ffffff 0%, rgba(226, 228, 227, 0) 100%);
right: 0;
bottom: 0;
}
#clientes .swiper .swiper-slide img {
filter: grayscale(1);
transition: var(--transicao);
}
#clientes .swiper .swiper-slide:hover img {
filter: none;
}
#clientes .swiper .swiper-wrapper {
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
align-items: center;
}
#clientes .titulo {
font-family: var(--poppins);
font-weight: 500;
font-size: 18px;
text-transform: uppercase;
color: var(--azul);
text-align: center;
padding: 0 5%;
margin-bottom: 43px;
}
#clientes .titulo b {
font-weight: 700;
}
#clientes .bolinhas {
position: absolute;
top: 39px;
left: 5%;
display: flex;
column-gap: 9px;
}
#clientes .bolinhas .bolinha {
width: 10px;
height: 10px;
border-radius: 50%;
animation: trocaCores 3s infinite;
}
#clientes .bolinhas .bolinha-01 {
background-color: #BDFF63; animation-delay: 0s;
}
#clientes .bolinhas .bolinha-02 {
background-color: var(--azul); animation-delay: 1s;
}
#clientes .bolinhas .bolinha-03 {
background-color: var(--preto); animation-delay: 2s;
} #operacao {
position: relative;
background: var(--preto);
padding-top: 134px;
margin-bottom: 139px;
background-image: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/home/warning.svg);
background-position: left bottom;
background-size: contain;
background-repeat: no-repeat;
}
#operacao::before {
content: '';
width: 100%;
height: 117px;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
z-index: 1;
}
#operacao .container {
width: 1420px;
max-width: 90%;
margin: 0 auto;
position: relative;
z-index: 2;
}
#operacao .container .topo {
display: flex;
justify-content: space-between;
column-gap: 40px;
margin-bottom: 48px;
flex-direction: column;
align-items: center;
}
#operacao .container .topo .titulo {
font-weight: 300;
font-size: 3rem;
text-transform: uppercase;
color: var(--verde);
margin-bottom: 21px;
}
#operacao .container .topo span {
font-weight: 600;
position: relative;
}
#operacao .container .topo .risco::before {
content: '';
position: absolute;
bottom: -10px;
background-image: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/home/risco.svg);
width: 100%;
height: 18px;
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
}
#operacao .container .topo .texto {
font-weight: 300;
font-size: 18px;
line-height: 26px;
color: #fff;
width: 769px;
text-align: center;
max-width: 50%;
}
#operacao .container .box-cards {
width: 100%;
max-width: 100%;
display: flex;
column-gap: 2.06%;
row-gap: 40px;
flex-wrap: wrap;
}
#operacao .container .box-cards .card { flex-direction: column;
border-radius: 15px;
position: relative;
width: 23.45%;
min-height: 350px;
background-color: #fff;
padding: 35px;
transition: var(--transicao);
border: 1px solid transparent;
overflow: hidden;
justify-content: flex-end;
box-shadow: 0px 0px 6.5px 1px #00000017;
}
#operacao .container .box-cards .card:hover {
box-shadow: 0px 0px 10.4px 4px #E9000066;
border: 1px solid #E90000;
}
#operacao .container .box-cards .card .titulo {
font-weight: 700;
font-size: 24px;
line-height: 129%;
color: var(--preto);
margin-bottom: 33px;
transition: var(--transicao);
position: relative;
bottom: -54%;
}
#operacao .container .box-cards .card:hover .titulo {
color: #E90000;
font-size: 20px;
bottom: -21%;
}
#operacao .container .box-cards .card .texto {
font-weight: 400;
font-size: 14px;
color: var(--preto);
transition: var(--transicao);
position: relative;
bottom: -89%;
}
#operacao .container .box-cards .card:hover .texto {
opacity: 1;
bottom: -13%;
}
#operacao .container .box-cards .card .icone {
display: block;
margin-bottom: 19px;
position: absolute;
top: 30px;
left: 30px;
}
#operacao picture {
position: absolute;
height: auto;
bottom: 0;
right: 0;
z-index: 1;
width: 39%;
max-width: 774px;
}
#operacao .img-operacao picture img {
width: 100%;
height: auto;
}
#operacao .container .box-cards .card .linha {
display: block;
width: 77.7%;
height: 2px;
background-color: #CECFD1;
position: absolute;
bottom: 35px;
}
#operacao .container .box-cards .card .linha .cor {
width: 17%;
display: block;
height: 100%;
background-color: #E90000;
}
#operacao>.linhas {
position: absolute;
right: 17px;
top: 0;
height: 100%;
display: flex;
column-gap: 20px;
}
#operacao>.linhas .linha {
display: inline-block;
background: linear-gradient(180deg, #BDFF63 0%, var(--azul) 100%);
width: 5px;
height: 100%;
opacity: 0.2;
background-size: 100% 300%;
animation: moveBackground 5s ease infinite;
}
@keyframes moveBackground {
0% {
background-position: 0% 0%;
}
50% {
background-position: 0% 100%;
}
100% {
background-position: 0% 0%;
}
} #depoimentos {
margin-bottom: -338px;
position: relative;
}
#depoimentos>.titulo {
padding: 0 5%;
font-family: var(--raleway);
font-weight: 400;
font-size: 2.875rem;
text-transform: uppercase;
color: #1717FF;
text-align: center;
margin-bottom: 22px;
}
#depoimentos>.titulo span {
font-weight: 700;
}
#depoimentos>.texto {
font-weight: 400;
font-size: 18px;
text-align: center;
color: var(--preto);
width: 769px;
max-width: 90%;
margin: 0 auto 56px;
}
#depoimentos .swiper-slide {
border-radius: 21px;
min-height: 543px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: rgb(0, 0, 82);
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 333px;
}
#depoimentos .swiper-slide .overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 27.18%, #000000 97.97%);
position: absolute;
border-radius: 21px;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#depoimentos .swiper-slide .logo {
position: absolute;
left: 20px;
top: 20px;
}
#depoimentos .swiper-slide .bottom {
position: relative;
padding: 0 5% 25px;
}
#depoimentos .swiper-slide .bottom .play {
width: 84px;
height: 84px;
display: block;
margin: 0 auto 35px;
cursor: pointer;
transition: var(--transicao);
}
#depoimentos .swiper-slide .bottom .play:hover {
transform: scale(1.1);
}
#depoimentos .swiper-slide .bottom .play svg {
width: 100%;
height: 100%;
}
#depoimentos .swiper-slide .bottom .separador {
height: 1.5px;
width: 257px;
max-width: 95%;
margin: 0 auto 20px;
background-color: #edeff74d;
position: relative;
display: block;
}
#depoimentos .swiper-slide .bottom .separador .cor {
height: 100%;
width: 19%;
background-color: var(--verde);
display: block;
}
#depoimentos .swiper-slide .bottom .nome {
font-family: var(--raleway);
font-weight: 700;
font-size: 20px;
text-align: center;
color: #fff;
margin-bottom: 4px;
}
#depoimentos .swiper-slide .bottom .cargo,
#depoimentos .swiper-slide .bottom .empresa {
font-weight: 300;
font-size: 16px;
text-align: center;
color: #fff;
}
#depoimentos .area-setas {
width: 1440px;
max-width: 90%;
margin: 0 auto;
display: flex;
justify-content: end;
column-gap: 30px;
margin-top: 42px;
}
#depoimentos .area-setas .seta {
cursor: pointer;
color: var(--verde);
}
#depoimentos .area-setas .depoimento-anterior {
transform: scaleX(-1);
}
#depoimentos .area-setas .swiper-button-disabled {
opacity: 0.3;
} #time-vendas {
position: relative;
margin-bottom: 115px;
}
#time-vendas .container {
width: 1440px;
max-width: 90%;
margin: 0 auto;
position: relative;
}
#time-vendas .container .topo {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 45px;
column-gap: 30px;
}
#time-vendas .container .topo .titulo {
font-weight: 400;
font-size: 2.5rem;
text-transform: uppercase;
color: #fff;
width: 657px;
max-width: 50%;
}
#time-vendas .container .topo .titulo span {
font-weight: 700;
color: var(--verde);
}
#time-vendas .container .topo .titulo .quebra-linha {
font-weight: 800;
}
#time-vendas .container .topo .texto {
font-weight: 400;
font-size: 16px;
color: #fff;
width: 659px;
max-width: 50%;
}
#time-vendas .container .box-cards {
display: flex;
flex-wrap: wrap;
column-gap: 1.9%;
row-gap: 30px;
position: relative;
z-index: 1;
}
#time-vendas .container .box-cards .card {
box-shadow: 0px 0px 6.5px 1px #00000017;
width: 49%;
min-height: 188px;
border-radius: 15px;
padding: 25px 36px;
transition: var(--transicao);
display: flex;
align-items: center;
column-gap: 40px;
border: 1px solid transparent;
background: #fff;
position: relative;
}
#time-vendas .container .box-cards .card::after {
content: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/home/seta-link.svg);
position: absolute;
top: 20px;
right: 22px;
filter: brightness(0) saturate(100%) invert(7%) sepia(6%) saturate(3669%) hue-rotate(178deg) brightness(90%) contrast(90%);
}
#time-vendas .container .box-cards .card:hover {
box-shadow: 0px 0px 5.6px 2px var(--azul)54;
border: 1px solid;
border-image-source: linear-gradient(180deg, #BDFF63 0%, var(--azul) 100%);
}
#time-vendas .container .box-cards .card:hover::after {
filter: brightness(0) saturate(100%) invert(95%) sepia(55%) saturate(787%) hue-rotate(25deg) brightness(94%) contrast(116%);
}
#time-vendas .container .box-cards .card .icone svg {
color: var(--preto);
transition: var(--transicao);
}
#time-vendas .container .box-cards .card.invisivel {
visibility: hidden;
pointer-events: none;
}
#time-vendas .container .box-cards .card.imagem::before {
content: '';
background-image: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/home/detalhe-time-vendas-cortada.webp);
width: 83.65%;
height: 21vw;
max-height: 397px;
position: absolute;
right: 9.4%;
bottom: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
pointer-events: none;
}
#time-vendas .container .box-cards .card .linha {
height: 100%;
width: 2px;
background-color: #CECFD1;
position: relative;
}
#time-vendas .container .box-cards .card .linha::before {
content: '';
height: 48px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--azul);
}
#time-vendas .container .box-cards .card .area-texto .titulo {
font-weight: 700;
font-size: 20px;
color: var(--preto);
margin-bottom: 14px;
transition: var(--transicao);
}
#time-vendas .container .box-cards .card .area-texto .texto {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--preto);
transition: var(--transicao);
}
#time-vendas .container .box-cards .card:hover .icone svg {
color: var(--azul);
}
#time-vendas .container .img-time-vendas {
position: absolute;
top: 6%;
right: 11%;
display: none;
}
#time-vendas .container .bolinhas {
position: absolute;
top: 24px;
right: 0;
display: flex;
gap: 9px;
flex-direction: column;
}
#time-vendas .container .bolinha {
width: 10px;
height: 10px;
border-radius: 50%;
animation: trocaCores 3s infinite;
}
#time-vendas .container .bolinha-01 {
background-color: #BDFF63; animation-delay: 0s;
}
#time-vendas .container .bolinha-02 {
background-color: var(--azul); animation-delay: 1s;
}
#time-vendas .container .bolinha-03 {
background-color: var(--preto); animation-delay: 2s;
} #mudar-jogo {
position: relative;
margin-bottom: 173px;
}
#mudar-jogo .container {
width: 1422px;
max-width: 90%;
margin: 0 auto;
position: relative;
}
#mudar-jogo .img-mudar-jogo {
position: absolute;
right: 0;
top: 101px;
height: 100%;
}
#mudar-jogo .img-mudar-jogo img {
position: sticky;
top: 10px;
}
#mudar-jogo .container .topo {
display: flex;
justify-content: space-between;
column-gap: 30px;
margin-bottom: 60px;
}
#mudar-jogo .container .topo .titulo {
font-weight: 400;
font-size: 3rem;
text-transform: uppercase;
color: var(--preto);
margin-bottom: 16px;
}
#mudar-jogo .container .topo .titulo .quebra-linha {
font-weight: 800;
}
#mudar-jogo .container .topo .texto {
font-weight: 400;
font-size: 16px;
color: var(--preto);
width: 659px;
max-width: 50%;
margin-bottom: 45px;
}
#mudar-jogo .container .box-cards {
display: flex;
flex-wrap: wrap;
column-gap: 2.9%;
row-gap: 61px;
position: relative;
z-index: 1;
width: 73.5%;
margin-bottom: 85px;
}
#mudar-jogo .container .box-cards .card {
box-shadow: 0px 0px 6.5px 1px #00000017;
width: 48.51%;
border-radius: 15px;
padding: 50px 40px 46px 40px;
;
transition: var(--transicao);
display: flex;
align-items: center;
column-gap: 40px;
border: 1px solid transparent;
background: #fff;
position: relative;
}
#mudar-jogo .container .btn {
font-weight: 700;
font-size: 16px;
color: #fff;
transition: var(--transicao);
background-color: var(--azul);
border: 1px solid #fff;
border-radius: 67px;
display: inline-flex;
column-gap: 10px;
align-items: center;
padding: 14px 25.5px;
margin-bottom: 40px;
}
#mudar-jogo .container .btn:hover {
color: var(--preto);
background-color: var(--verde);
border: 1px solid var(--verde);
}
#mudar-jogo .container .box-cards .card .icone {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #fff;
box-shadow: 0px -5px 7.1px 0px #00000017;
top: -24px;
}
#mudar-jogo .container .box-cards .card .icone svg {
color: var(--azul);
transition: var(--transicao);
}
#mudar-jogo .container .box-cards .card.invisivel {
visibility: hidden;
pointer-events: none;
}
#mudar-jogo .container .box-cards .card.imagem::before {
content: '';
background-image: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/home/detalhe-time-vendas-cortada.webp);
width: 83.65%;
height: 21vw;
max-height: 397px;
position: absolute;
right: 9.4%;
bottom: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
pointer-events: none;
}
#mudar-jogo .container .box-cards .card .linha {
height: 100%;
width: 2px;
background-color: #CECFD1;
position: relative;
}
#mudar-jogo .container .box-cards .card .linha::before {
content: '';
height: 48px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--azul);
}
#mudar-jogo .container .box-cards .card .area-texto .titulo {
font-weight: 700;
font-size: 20px;
color: var(--preto);
margin-bottom: 14px;
transition: var(--transicao);
}
#mudar-jogo .container .box-cards .card .area-texto .texto {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: var(--preto);
transition: var(--transicao);
}
#mudar-jogo .container .img-time-vendas {
position: absolute;
top: 6%;
right: 11%;
display: none;
}
#mudar-jogo .container .bolinhas {
position: absolute;
top: 24px;
left: -103px;
display: flex;
gap: 9px;
flex-direction: column;
}
#mudar-jogo .container .bolinha {
width: 10px;
height: 10px;
border-radius: 50%;
animation: trocaCores 3s infinite;
}
#mudar-jogo .container .bolinha-01 {
background-color: #BDFF63; animation-delay: 0s;
}
#mudar-jogo .container .bolinha-02 {
background-color: var(--azul); animation-delay: 1s;
}
#mudar-jogo .container .bolinha-03 {
background-color: var(--preto); animation-delay: 2s;
} #bg-azul {
background-color: var(--preto);
padding-top: 429px;
padding-bottom: 130px;
margin-bottom: 120px;
background-image: url(//www.sucessoemvendas.com.br/wp-content/themes/sucessoemvendas/consultoria-em-vendas/home/linha-bg-azul.svg);
background-position: right bottom;
background-size: contain;
background-repeat: no-repeat;
} #video {
position: relative;
}
#video .container {
width: 1440px;
max-width: 90%;
margin: 0 auto;
}
#video .container .box-video {
width: 100%;
border-radius: 30px;
position: relative;
height: 694px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#video .container .box-video .overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 99%);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 30px;
}
#video .container .box-video .borda {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(189, 255, 99, 0.74) 0%, rgba(23, 23, 255, 0.74) 100%);
border-radius: 30px;
}
#video .container .box-video .bg {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
border-radius: 30px;
}
#video .container .box-video .play {
width: 200px;
height: 200px;
backdrop-filter: blur(10px);
background: #D9D9D933;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #FFFFFF33;
position: relative;
z-index: 2;
cursor: pointer;
}
#video .container .box-video .play svg {
position: relative;
left: 4%;
}
#video .container .titulo {
font-weight: 500;
font-size: 3rem;
color: var(--verde);
text-align: center;
text-transform: uppercase;
margin-bottom: 14px;
}
#video .container .titulo b {
font-weight: 700;
display: block;
}
#video .container .texto {
font-weight: 300;
font-size: 16px;
text-align: center;
width: 783px;
max-width: 100%;
margin: 0 auto;
color: #fff;
margin-bottom: 44px;
} #cases {
overflow: hidden;
position: relative;
margin-bottom: 118px;
}
#cases>.titulo {
font-weight: 400;
font-size: 2.813rem;
margin-bottom: 14px;
text-align: center;
text-transform: uppercase;
color: var(--verde);
padding: 0 5%;
}
#cases>.titulo b {
display: block;
font-weight: 700;
}
#cases>.texto {
font-weight: 400;
font-size: 16px;
text-align: center;
color: #fff;
margin-bottom: 49px;
padding: 0 5%;
}
#cases .container {
width: 1440px;
max-width: 90%;
margin: 0 auto;
position: relative;
}
#cases .swiper {
overflow: visible;
margin-bottom: 35px;
}
#cases .swiper .swiper-wrapper {
align-items: stretch;
}
#cases .swiper .swiper-slide {
padding: 35px;
border-radius: 15px;
display: flex;
column-gap: 40px;
box-shadow: 0px 0px 18.6px 4px #FFFFFF21;
max-width: 1080px;
height: auto;
background: var(--preto);
}
#cases .swiper .swiper-slide-active {
box-shadow: 0px 0px 15px 5px #BDFF634F;
}
#cases .swiper .swiper-slide .esq {
min-width: 424px;
max-width: 42%;
height: 417px;
border-radius: 15px;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
#cases .swiper .swiper-slide .esq .overlay {
background: #0002068C;
width: 100%;
height: 100%;
border-radius: 15px;
position: absolute;
}
#cases .swiper .swiper-slide .esq .logo {
position: relative;
z-index: 1;
max-width: 90%;
}
#cases .swiper .swiper-slide .dir .titulo {
font-weight: 700;
font-size: 2rem;
line-height: 2.313rem;
color: #fff;
margin-bottom: 4px;
}
#cases .swiper .swiper-slide .dir .subtitulo {
font-family: var(--raleway);
font-weight: 700;
font-size: 18px;
line-height: 37px;
color: #fff;
margin-bottom: 18px;
}
#cases .swiper .swiper-slide .dir .separador {
width: 100%;
display: block;
margin-bottom: 25px;
height: 1px;
background-color: #EDEFF7;
}
#cases .swiper .swiper-slide .dir>.texto {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #fff;
margin-bottom: 34px;
}
#cases .swiper .swiper-slide .dir .area-texto ul,
#cases .swiper .swiper-slide .dir .area-texto ol {
list-style: none;
display: flex;
flex-direction: column;
row-gap: 19px;
}
#cases .swiper .swiper-slide .dir .area-texto li {
font-family: var(--raleway);
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #fff;
}
#cases .swiper .swiper-slide .dir .area-texto p {
font-family: var(--raleway);
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #fff;
margin-bottom: 10px;
}
#cases .swiper .swiper-slide .dir .area-texto b {
color: var(--verde);
font-weight: 700;
font-size: 18px;
}
#cases .swiper .swiper-slide .dir .kpis {
display: flex;
justify-content: space-between;
column-gap: 20px;
}
#cases .swiper .swiper-slide .dir .kpis .kpi .cima {
color: #fff;
display: block;
}
#cases .swiper .swiper-slide-active .dir .kpis .kpi .cima {
color: var(--verde);
}
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .simbolo {
margin-right: -5px;
}
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .simbolo,
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .numero {
font-weight: 700;
font-size: 2rem;
}
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .texto {
font-weight: 700;
font-size: 1.375rem;
text-transform: uppercase;
}
#cases .swiper .swiper-slide .dir .kpis .kpi .sub {
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
color: #fff;
}
#cases .swiper .swiper-slide .dir .veja {
font-weight: 700;
font-size: 14px;
color: #fff;
margin-top: auto;
margin-bottom: 28px;
}
#cases .swiper .swiper-slide-active .dir .veja {
color: var(--verde);
}
#cases .swiper .swiper-slide .dir {
flex-direction: column;
display: flex;
}
#cases .area-setas {
display: flex;
column-gap: 30px;
}
#cases .area-setas .seta {
cursor: pointer;
color: var(--verde);
}
#cases .area-setas .case-anterior {
transform: scaleX(-1);
}
#cases .area-setas .swiper-button-disabled {
opacity: 0.3;
}
#cases .linhas {
position: absolute;
width: 50%;
top: 52%;
display: flex;
flex-direction: column;
row-gap: 20px;
}
#cases .linhas .linha {
width: 100%;
height: 5px;
display: block;
background: linear-gradient(90deg, #1717FF 0%, #BDFF63 100%);
animation: moveBackgroundHorizontal 5s ease infinite;
background-size: 300% 100%;
}
@keyframes moveBackgroundHorizontal {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
#cases .container .bolinhas {
position: absolute;
top: -33%;
right: 0;
display: flex;
gap: 9px;
flex-direction: column;
}
#cases .container .bolinha {
width: 10px;
height: 10px;
border-radius: 50%;
animation: trocaCores 3s infinite;
}
#cases .container .bolinha-01 {
background-color: #BDFF63; animation-delay: 0s;
}
#cases .container .bolinha-02 {
background-color: var(--azul); animation-delay: 1s;
}
#cases .container .bolinha-03 {
background-color: var(--preto); animation-delay: 2s;
} #blog {
position: relative;
margin-bottom: 160px;
}
#blog .container {
width: 1440px;
max-width: 90%;
margin: 0 auto;
position: relative;
}
#blog .container>.topo {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 20px;
margin-bottom: 46px;
flex-wrap: wrap;
row-gap: 30px;
}
#blog .container>.topo .titulo {
font-weight: 700;
font-size: 2.625rem;
color: var(--preto);
}
#blog .container>.topo .confira {
font-family: var(--raleway);
background-color: var(--azul);
width: 315px;
height: 43px;
font-size: 16px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
border-radius: 100px;
padding: 15px 16px 15px 30px;
transition: var(--transicao);
}
#blog .container>.topo .confira:hover {
background-color: var(--preto);
}
#blog .container>.titulo span {
font-weight: 300;
}
#blog .container .box-cards {
display: flex;
column-gap: 30px;
align-items: stretch;
}
#blog .container .box-cards .card {
width: 460px;
min-height: 556px;
height: fit-content;
background-color: #fff;
box-shadow: 0px 10px 10px 0px #0000001C;
border-radius: 15px;
transition: var(--transicao);
}
#blog .container .box-cards .card:hover {
transform: translateY(-10px);
}
#blog .container .box-cards .card .topo {
border-radius: 15px 15px 0 0;
height: 50%;
width: 100%;
position: relative;
}
#blog .container .box-cards .card .topo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px 15px 0 0;
display: block;
}
#blog .container .box-cards .card .topo .categoria {
position: absolute;
bottom: -21px;
left: 45px;
border-radius: 100px;
font-family: var(--raleway);
font-weight: 600;
font-size: 14px;
text-align: center;
background-color: var(--preto);
transition: var(--transicao);
color: #fff;
padding: 12px 20.4px;
}
#blog .container .box-cards .card .topo .categoria:hover {
background-color: var(--azul);
}
#blog .container .box-cards .card .bottom {
display: flex;
height: 50%;
flex-direction: column;
padding: 52px 45px 38px 45px;
}
#blog .container .box-cards .card .bottom .titulo {
display: block;
font-weight: 700;
font-size: 18px;
margin-bottom: 17px;
color: var(--preto);
transition: var(--transicao);
}
#blog .container .box-cards .card .bottom .titulo:hover {
color: var(--azul);
}
#blog .container .box-cards .card .bottom .texto {
font-weight: 400;
font-size: 14px;
letter-spacing: 1%;
color: var(--preto);
margin-bottom: 20px;
}
#blog .container .box-cards .card .bottom .area-infos {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20px;
}
#blog .container .box-cards .card .bottom .area-infos .datas {
display: flex;
flex-direction: column;
row-gap: 4px;
}
#blog .container .box-cards .card .bottom .area-infos .datas .data {
font-weight: 400;
font-size: 12px;
color: var(--preto);
display: flex;
column-gap: 11px;
}
#blog .container .box-cards .card .bottom .area-infos .seta {
color: var(--preto);
transition: var(--transicao);
}
#blog .container .box-cards .card .bottom .area-infos .seta:hover {
color: var(--azul);
}
#blog .container .bolinhas {
position: absolute;
top: 0;
left: -90px;
display: flex;
gap: 9px;
flex-direction: column;
}
#blog .container .bolinha {
width: 10px;
height: 10px;
border-radius: 50%;
animation: trocaCores 3s infinite;
}
#blog .container .bolinha-01 {
background-color: #BDFF63; animation-delay: 0s;
}
#blog .container .bolinha-02 {
background-color: var(--azul); animation-delay: 1s;
}
#blog .container .bolinha-03 {
background-color: var(--preto); animation-delay: 2s;
} #youtube-blog {
overflow: hidden;
margin-bottom: 144px;
}
#youtube-blog .container {
width: 1400px;
max-width: 90%;
margin: 0 auto;
position: relative;
}
#youtube-blog .container>.topo {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 58px;
}
#youtube-blog .container>.topo .titulo {
font-weight: 300;
font-size: 2.625rem;
line-height: 122%;
color: #000;
width: 629px;
max-width: 50%;
}
#youtube-blog .container>.topo .titulo span {
background-color: var(--azul);
padding: 0px 13px;
color: #fff;
font-weight: 700;
display: inline-block;
}
#youtube-blog .container>.topo .texto {
font-weight: 400;
font-size: 16px;
color: var(--preto);
width: 659px;
max-width: 50%;
}
#youtube-blog .container .swiper-youtube {
overflow: visible;
margin-bottom: 12px;
}
#youtube-blog .container .swiper-blog {
overflow: visible;
}
#youtube-blog .container .swiper-youtube .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
box-shadow: 0px 4px 10px 0px #00000033;
max-width: 669px;
height: 377px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#youtube-blog .container .swiper-youtube .swiper-slide .play {
cursor: pointer;
}
#youtube-blog .container .swiper-blog .swiper-slide {
display: flex;
max-width: 669px;
height: auto;
border-radius: 15px;
box-shadow: 0px 4px 10px 0px #00000033;
}
#youtube-blog .container .swiper-blog .swiper-slide .imagem {
width: 50%;
height: auto;
position: relative;
border-radius: 15px 0 0 15px;
}
#youtube-blog .container .swiper-blog .swiper-slide .imagem img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 15px 0 0 15px;
}
#youtube-blog .container .swiper-blog .swiper-slide .dir {
height: auto;
width: 50%;
padding: 25px 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .categoria {
font-weight: 600;
font-size: 14px;
text-align: center;
background-color: var(--preto);
border-radius: 100px;
color: #fff;
padding: 10px 18px;
display: block;
margin-bottom: 15px;
transition: var(--transicao);
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .categoria:hover {
background-color: var(--azul);
}
#youtube-blog .container .swiper-blog .swiper-slide .titulo {
font-weight: 700;
font-size: 18px;
color: #000;
display: block;
margin-bottom: 25px;
transition: var(--transicao);
}
#youtube-blog .container .swiper-blog .swiper-slide .titulo:hover {
color: var(--azul);
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .area-infos {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20px;
margin-top: auto;
width: 100%;
}
#youtube-blog .container .swiper-wrapper {
padding: 15px 0;
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .area-infos .datas {
display: flex;
flex-direction: column;
row-gap: 4px;
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .area-infos .datas .data {
font-weight: 400;
font-size: 12px;
color: var(--preto);
display: flex;
column-gap: 11px;
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .area-infos svg {
color: var(--preto);
transition: var(--transicao);
}
#youtube-blog .container .swiper-blog .swiper-slide .dir .area-infos .seta:hover,
#youtube-blog .container .swiper-blog .swiper-slide:hover .dir .area-infos svg {
color: var(--azul);
}
#youtube-blog .area-setas {
display: flex;
column-gap: 30px;
}
#youtube-blog .area-setas .seta {
cursor: pointer;
color: var(--azul);
}
#youtube-blog .area-setas .blog-anterior {
transform: scaleX(-1);
}
#youtube-blog .area-setas .swiper-button-disabled {
opacity: 0.3;
}
#youtube-blog .container .bolinhas {
position: absolute;
top: 24px;
left: -103px;
display: flex;
gap: 9px;
flex-direction: column;
}
#youtube-blog .container .bolinha {
width: 10px;
height: 10px;
border-radius: 50%;
animation: trocaCores 3s infinite;
}
#youtube-blog .container .bolinha-01 {
background-color: #BDFF63; animation-delay: 0s;
}
#youtube-blog .container .bolinha-02 {
background-color: var(--azul); animation-delay: 1s;
}
#youtube-blog .container .bolinha-03 {
background-color: var(--preto); animation-delay: 2s;
}
@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1600px) {
#banner {
height: 790px;
}
#banner .container {
padding-top: 14.2%;
}
#operacao .container .box-cards .card .titulo {
font-size: 20px;
}
#operacao .container .box-cards .card {
min-height: 440px;
}
#mudar-jogo .container .box-cards {
width: 61.5%;
}
}
@media screen and (max-width: 1440px) {
#time-vendas .container .box-cards .card {
width: 49%;
}
#video .container .box-video {
height: 50vw;
}
#video .container .box-video .play {
width: 15%;
height: 27%;
}
#video .container .box-video .play svg {
height: auto;
width: 32%;
}
#banner .container>.texto {
font-size: 16px;
}
#operacao .container .box-cards .card:hover .titulo {
bottom: -12%;
}
#operacao .container .box-cards .card:hover .texto {
bottom: -4%;
}
}
@media screen and (max-width: 1366px) {
header {
top: 20px;
}
#banner .container .box-kpis {
margin-bottom: 4%;
}
#banner {
height: 665px;
}
#time-vendas .container .box-cards .card {
column-gap: 16px;
}
}
@media screen and (max-width: 1280px) {
#banner .container .box-kpis .kpi .texto {
font-size: 14px;
}
#operacao .container .topo .texto {
font-size: 16px;
}
#operacao .container .box-cards {
row-gap: 22px;
justify-content: center;
}
#operacao .container .box-cards .card {
padding: 25px;
}
#blog .container .box-cards .card .bottom {
padding: 52px 30px 38px 30px;
}
#mudar-jogo .img-mudar-jogo {
width: 45%;
}
#mudar-jogo .container .box-cards {
width: 70.5%;
}
}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 1080px) {
#banner .redes {
left: 2%;
}
}
@media screen and (max-width: 1024px) {
header {
top: 0px;
}
#banner {
height: auto;
padding-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
}
#banner .container {
padding-top: 140px;
}
#banner .redes {
position: unset;
flex-direction: row;
left: unset;
top: unset;
}
#banner .container .box-kpis .kpi.primeiro {
width: 100%;
margin: 0 auto;
text-align: center;
}
#banner .container .box-kpis {
flex-wrap: wrap;
row-gap: 35px;
column-gap: 60px;
justify-content: center;
margin-bottom: 60px;
}
#banner .container .box-kpis .kpi .numero,
#banner .container .box-kpis .kpi .texto {
text-align: center;
}
#operacao .container .box-cards {
width: 100%;
margin-bottom: 40px;
}
#operacao .container .topo {
flex-direction: column;
row-gap: 15px;
}
#operacao .container .topo .titulo,
#operacao .container .topo .texto {
text-align: center;
width: 100%;
max-width: 100%;
}
#operacao {
padding-top: 80px;
margin-bottom: 80px;
}
#operacao picture {
position: relative;
width: 500px;
max-width: 90%;
display: block;
text-align: center;
margin: 0 auto;
}
#operacao .container .box-cards .card .titulo {
font-size: 18px;
}
#time-vendas .container .box-cards .card.imagem::before,
#time-vendas .container .box-cards .card.invisivel {
display: none;
}
#time-vendas .container .box-cards {
justify-content: center;
margin-bottom: 40px;
}
#time-vendas .container .box-cards .card {
width: 100%;
}
#time-vendas .container>.titulo,
#time-vendas .container>.texto {
width: 100%;
max-width: 100%;
text-align: center;
}
#time-vendas .container .bolinhas {
top: 0;
}
#time-vendas .container .img-time-vendas {
position: unset;
width: 500px;
max-width: 100%;
display: block;
margin: 0 auto;
}
#cases .swiper .swiper-slide {
flex-direction: column;
row-gap: 30px;
}
#cases .swiper .swiper-slide .dir .veja {
margin-top: 40px;
margin-bottom: 0;
}
#cases .swiper .swiper-slide .dir .kpis {
flex-wrap: wrap;
gap: 20px;
}
#cases .swiper .swiper-slide .esq {
min-width: unset;
max-width: 100%;
}
#cases .swiper .swiper-slide .esq .logo {
max-width: 90%;
width: 340px;
}
#cases .swiper .swiper-slide .dir .subtitulo {
font-size: 16px;
line-height: 25px;
}
#cases .swiper .swiper-slide .dir .titulo {
font-size: 24px;
line-height: normal;
margin-bottom: 16px;
}
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .simbolo,
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .numero {
font-size: 2rem;
line-height: 4rem;
display: inline-block;
}
#cases .swiper .swiper-slide .dir .kpis .kpi .cima .texto {
font-weight: 700;
line-height: 3.5rem;
}
#bg-azul {
margin-bottom: 80px;
padding-bottom: 12vw;
}
#blog .container .box-cards {
flex-direction: column;
row-gap: 40px;
}
#blog .container .box-cards .card {
width: 100%;
min-height: auto;
}
#blog .container .box-cards .card .topo {
height: 300px;
}
#cases {
margin-bottom: 80px;
}
#blog {
margin-bottom: 80px;
}
#operacao .container .box-cards .card {
width: 31.9%;
min-height: unset;
display: flex;
}
#operacao .container .box-cards .card:hover .titulo {
color: var(--preto);
font-size: 18px;
}
#operacao .container .box-cards .card .titulo,
#operacao .container .box-cards .card .texto,
#operacao .container .box-cards .card .linha,
#operacao .container .box-cards .card .icone {
position: unset;
}
#operacao .container .box-cards .card .titulo {
margin-bottom: 10px;
}
#operacao .container .box-cards .card .linha {
display: block;
width: 100%;
margin-top: auto;
}
#operacao .container .box-cards .card .texto {
margin-bottom: 40px;
}
#mudar-jogo .container .box-cards {
width: 100%;
margin-bottom: 60px;
}
#mudar-jogo .img-mudar-jogo {
width: auto;
position: unset;
margin: 0 auto;
max-width: 90%;
text-align: center;
}
#mudar-jogo {
margin-bottom: 80px;
}
#depoimentos .swiper-slide {
max-width: unset;
}
#time-vendas .container .topo {
flex-direction: column;
row-gap: 40px;
}
#time-vendas .container .topo .titulo,
#time-vendas .container .topo .texto {
width: 100%;
max-width: 100%;
}
#youtube-blog .container>.topo {
align-items: center;
flex-direction: column;
row-gap: 16px;
}
#youtube-blog .container > .topo .titulo {
font-size: 34px;
}
#youtube-blog .container>.topo .titulo,
#youtube-blog .container>.topo .texto {
width: 100%;
max-width: 100%;
}
#youtube-blog .container>.topo .titulo span {
display: block;
width: fit-content;
}
#mudar-jogo .container .topo {
flex-direction: column;
row-gap: 16px;
margin-bottom: 20px;
}
#mudar-jogo .container .topo .texto {
width: 100%;
max-width: 100%;
}
#mudar-jogo .container .topo .titulo {
margin-bottom: 0;
}
}
@media screen and (max-width: 996px) {}
@media screen and (max-width: 768px) {
#banner .container>.texto {
font-size: 14px;
}
#banner .container .box-kpis .kpi.primeiro {
font-size: 14px;
line-height: 19px;
}
#clientes {
padding-top: 68px;
}
#operacao .container .box-cards .card {
width: 48%;
}
#operacao .container .box-cards .card {
width: 48.9%;
}
}
@media screen and (max-width: 600px) {
#time-vendas .container .bolinhas {
top: -60px;
}
#mudar-jogo .container .box-cards .card {
width: 100%;
padding: 50px 30px 46px 30px;
}
#youtube-blog .container .swiper-blog .swiper-slide {
flex-direction: column;
}
#youtube-blog .container .swiper-blog .swiper-slide .imagem {
width: 100%;
border-radius: 15px 15px 0 0;
}
#youtube-blog .container .swiper-blog .swiper-slide .imagem img {
border-radius: 15px 15px 0 0;
}
#youtube-blog .container .swiper-blog .swiper-slide .dir {
width: 100%;
}
}
@media screen and (max-width: 490px) {
#banner .container .box-kpis {
align-items: center;
flex-direction: column;
}
#banner .container>.btn {
font-size: 14px;
}
#operacao .container .box-cards .card {
width: 100%;
}
#time-vendas .container .box-cards .card {
width: 100%;
flex-direction: column;
}
#time-vendas .container .box-cards .card .linha::before {
content: '';
height: 100%;
width: 48px;
}
#time-vendas .container .box-cards .card .linha {
height: 2px;
width: 100%;
background-color: #CECFD1;
display: block;
margin: 15px 0;
}
#cases .swiper .swiper-slide .esq {
height: 239px;
}
}
@media screen and (max-width: 460px) {}
@media screen and (max-width: 430px) {}
@media screen and (max-width: 400px) {
}
@media screen and (max-width: 360px) {}
@media screen and (max-width: 330px) {}
@media screen and (max-width: 280px) {}