/*------------------------------------------------------------------
[Table of contents]
1. Import libraries
2. Custom properties
3. General Styles
4. Typography
5. Navs and Tabs
6. Breadcrumb
7. Buttons
8. Utilities
9. Sections
10.Boxes and Cards
11.Accordion
12.Form
13.Responsive Layouts
-------------------------------------------------------------------*/
/* ---------------------------- */
/* Import libraries */
/* ---------------------------- */
/* Google Fonts e Bootstrap agora sao carregados via ';
initial-value: 0deg;
inherits: false;
}
/* Wrapper: posiciona o botão sobre o banner e faz o efeito de flutuar */
#main-carousel .banner-cta-wrap {
position: absolute;
z-index: 5;
left: 18%;
bottom: 8%;
transform: translateX(-50%);
animation: bannerFloat 3s ease-in-out infinite;
}
/* Luzes circulando ao redor do botão */
#main-carousel .banner-cta-wrap::before {
content: "";
position: absolute;
inset: -7px;
border-radius: 16px;
z-index: 0;
background: conic-gradient(from var(--bcta-ang),
#ff5a4d, #ffffff 8%, #ff5a4d 20%,
#ff5a4d 42%, #ffd36e 50%, #ff5a4d 62%,
#ff5a4d 82%, #ffffff 90%, #ff5a4d 100%);
filter: blur(7px);
opacity: .95;
animation: bannerLights 2.6s linear infinite;
}
/* O botão fica acima das luzes, cobrindo o centro do brilho */
#main-carousel .banner-cta {
position: relative;
z-index: 1;
margin: 0;
white-space: nowrap;
padding: clamp(9px, 1.1vw, 15px) clamp(18px, 2vw, 34px);
font-size: clamp(13px, 1.3vw, 17px);
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
@keyframes bannerFloat {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-9px); }
}
@keyframes bannerLights {
to { --bcta-ang: 360deg; }
}
/* Mobile/tablet-retrato: o botão flutuando sobre a arte fica em cima da moça/texto
(recorte estreito do banner). Em vez de sobrepor o conteúdo do banner, o botão
passa a ficar centralizado, "por cima" da divisa entre o banner e a seção
seguinte (metade sobre a arte, metade sobre a próxima seção). O wrap ficou
fora do carousel (que tem overflow:hidden por causa do zoom Ken Burns), então
nada corta o botão quando ele avança sobre a seção abaixo. */
@media (max-width: 767.98px) {
#main-carousel .banner-cta-wrap {
left: 50%;
bottom: -20px;
}
#main-carousel .banner-cta {
padding: 10px 20px;
font-size: 13px;
}
}
/* Acessibilidade: desliga as animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
#main-carousel .banner-cta-wrap,
#main-carousel .banner-cta-wrap::before {
animation: none;
}
}
/* No mobile a arte 3:1 fica baixa demais (parece uma faixa fina).
Aumentamos a altura e recortamos as laterais (mantém moça + texto,
corta um pouco os veículos à direita) para ficar proporcional. */
@media (max-width: 767.98px) {
#main-carousel .carousel-item img {
height: clamp(210px, 56vw, 300px);
object-fit: cover;
object-position: 32% center;
}
}
.kb-carousel .carousel-item.active {
transition: transform .6s ease-in-out 0s, opacity ease-in-out .6s;
}
.kb-carousel > .carousel-inner > .carousel-item > img,
.kb-carousel > .carousel-inner > .carousel-item > a > img {
opacity: 0.8;
animation: kenburns 20000ms linear 0s infinite alternate;
}
.kb-carousel .carousel-item-next.carousel-item-start .carousel-caption,
.kb-carousel .carousel-item-prev.carousel-item-end .carousel-caption {
z-index: 0;
opacity: 0;
}
/* ---------------------------- */
/* Sections */
/* ---------------------------- */
.hero {
font-family: var(--font);
height: 90vh;
}
.why {
border-bottom: 1px solid var(--divider-color);
overflow: hidden;
}
.section.project {
padding-bottom: 0px;
}
.warranty {
padding: 15vh 0;
}
.info-lb-overlay {
width: 75%;
background-color: rgba(17, 17, 17, 0.8);
left: 8%;
bottom: 8%;
border-radius: 24px;
}
.reviews {
overflow: hidden;
}
/* ---------------------------- */
/* Boxes and Cards */
/* ---------------------------- */
.logo-box {
max-width: 185px;
}
.why-box {
overflow: hidden;
border-top: 1px solid var(--divider-color);
border-right: 1px solid var(--divider-color);
height: 100%;
}
.why-box .why-box-inner {
height: 100%;
padding: 40px 30px;
color: #fff;
background-color: var(--secondary-color);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.why-box.active {
border-left: 1px solid var(--divider-color);
}
.why-box:hover .why-box-inner {
background-color: var(--primary-color);
color: var(--heading-color);
}
.why-box a,
.why-box i {
transition: all 0.3s ease;
}
.why-box:hover a,
.why-box:hover i {
color: var(--heading-color) !important;
}
.why-box.active a,
.why-box.active i {
color: var(--heading-color) !important;
}
.why-box.active:hover .why-box-inner {
background-color: var(--secondary-color) !important;
}
.why-box.active:hover a,
.why-box.active:hover i {
color: var(--primary-color) !important;
}
.why-icon {
font-size: 50px;
}
.client-logos img{
width: 100%;
height: 52px;
object-fit: contain;
margin: 0px 10px;
}
.service-box {
position: relative;
background-color: var(--secondary-color);
width: 100%;
height: 100%;
max-height: 500px;
transition: all 0.3s ease;
}
.service-box:hover .service-wrap {
transform: translateY(0);
}
.service-box:hover .bg-overlay-2 {
opacity: 0.8;
}
.service-box .btn-cta-secondary {
padding: 3px 15px;
border-radius: 50px;
}
.service-box .btn-cta-secondary:hover {
background-color: var(--primary-color) !important;
border-color: var(--primary-color);
}
.service-content {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
padding: 40px;
width: 100%;
height: 100%;
min-height: 440px;
}
.service-info {
overflow: hidden;
}
.service-wrap {
transform: translateY(40px);
transition: all 0.3s ease;
}
/* Mais Serviços - Carousel */
.services-slide .service-box {
height: 500px;
margin: 0 10px;
}
.services-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--divider-color);
background-color: var(--secondary-color);
color: var(--heading-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.services-arrow:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.services-prev {
left: 16px;
}
.services-next {
right: 16px;
}
@media (max-width: 767.98px) {
.services-arrow {
width: 38px;
height: 38px;
font-size: 16px;
}
.services-prev {
left: 8px;
}
.services-next {
right: 8px;
}
}
.testimonial-box {
padding: 30px;
background-color: var(--secondary-color);
border-radius: 16px;
margin: 0px 10px;
}
.testimonial-box img {
width: 60px;
height: 60px;
border-radius: 50px;
}
.testimonial-box p {
font-size: 20px;
}
.testimonial-video {
aspect-ratio: 16 / 9;
}
.testimonial-video video {
object-position: center;
}
.testimonial-video a {
z-index: 2;
transition: transform 0.3s ease;
}
.testimonial-video:hover a {
transform: translate(-50%, -50%) scale(1.1);
}
.step-number {
background-color: var(--secondary-color);
color: var(--text-color);
font-weight: 700;
font-size: 25px;
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.card {
background-color: var(--background-alt-color);
color: var(--text-color);
border: 0;
}
.blog {
transition: all 0.3s ease;
border-radius: 16px;
overflow: hidden;
}
.blog-content {
padding: 30px;
}
.blog-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.blogs-title {
transition: color 0.3s ease;
color: var(--text-color);
text-decoration: none;
}
.blogs:hover .blogs-title {
color: var(--primary-color);
}
.blogs-cover {
transition: transform 0.5s ease;
transform-origin: center center;
}
.blogs:hover .blogs-cover {
transform: scale(1.05) rotate(1deg);
}
.blog .category-blog {
position: absolute;
top: 20px;
right: 20px;
border-radius: 5px;
padding: 2px 8px;
background-color: var(--primary-color);
z-index: 1;
}
.blog:hover img {
transform: scale(1.05) rotate(2deg);
opacity: .8;
}
.blog h4,
.blog img {
transition: .3s;
color: var(--heading-color);
}
.blog:hover h4,
.recent:hover a {
color: var(--primary-color);
}
.recent a {
color: var(--heading-color);
}
.social-box {
display: flex;
gap: 16px;
}
.social-box a {
background-color: var(--secondary-color);
color: var(--primary-color);
align-content: center;
text-align: center;
padding: 7px 0;
transition: all 0.3s ease-in-out;
}
.social-box a:hover {
background-color: var(--primary-color);
color: var(--accent-color);
}
.card-team-label {
background-color: var(--accent-color);
opacity: 85%;
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: 70%;
}
.card-service-label {
background-color: rgba(17, 17, 17, 0.6);
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%) translateY(0);
width: 90%;
max-height: 130px;
overflow: hidden;
transition: all 0.4s ease;
}
.card-service-label .card-text {
color: var(--text-color-2);
opacity: 0;
transition: opacity 0.4s ease;
}
.group-card:hover .card-service-label {
transform: translateX(-50%) translateY(-25%);
max-height: 400px;
}
.group-card:hover .card-service-label .card-text {
opacity: 1;
}
.footer {
background-image: linear-gradient(180deg, var(--background-alt-color) 0%, var(--transparent-1-color) 100%);
}
.footer a {
color: var(--text-color);
transition: color ease .3s;
}
.footer a:hover {
color: var(--placeholder-color);
}
.footer-logo-box {
height: 60px;
}
.icon-contact,
.icon-social {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
border: 1px solid var(--primary-color);
color: var(--heading-color);
transition: .3s;
}
.icon-contact {
width: 60px;
height: 60px;
}
.icon-social {
width: 30px;
height: 30px;
font-size: 14px;
}
.icon-contact:hover,
.icon-social:hover {
background-color: var(--primary-color);
}
a.icon-contact:hover {
color: var(--heading-color);
}
.footer-contact-row {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 24px;
}
.footer-contact-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1 1 0;
min-width: 0;
}
.footer-contact-item .icon-contact {
margin-bottom: 10px;
}
.footer-contact-item p,
.footer-contact-item h5 {
max-width: 100%;
overflow-wrap: break-word;
}
.footer-contact-item h5 {
font-size: 16px;
white-space: nowrap;
}
.icon-contact-sm {
width: 48px;
height: 48px;
font-size: 14px;
}
.footer-map-wrap {
width: 100%;
height: 220px;
overflow: hidden;
}
.footer-map-wrap iframe {
display: block;
}
@media (max-width: 575.98px) {
.footer-contact-item h5 {
font-size: 14px;
}
.footer-contact-item p {
font-size: 12px !important;
}
.icon-contact-sm {
width: 42px;
height: 42px;
font-size: 12px;
}
.footer-map-wrap {
height: 180px;
}
}
.icon-quote {
width: 70px;
height: 70px;
border-radius: 100px;
margin-top: -60px;
background-color: var(--secondary-color);
border: 5px solid var(--primary-color);
}
.top-header .icon-social {
width: 40px;
height: 40px;
font-size: 15px;
}
.footer-terms {
transition: .3s;
}
/* Barra final do footer (copyright / logo / termos): em telas estreitas
empilha centralizado em ordem fixa; a partir do breakpoint md vira uma
grade de 3 colunas (1fr auto 1fr) para o logo ficar sempre no centro
exato da barra, independente da largura do texto dos dois lados. */
.footer-bottom-bar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
}
.footer-bottom-bar > * {
max-width: 100%;
overflow-wrap: break-word;
}
@media (min-width: 768px) {
.footer-bottom-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
text-align: left;
}
.footer-bottom-copyright {
justify-self: start;
}
.footer-bottom-logo {
justify-self: center;
}
.footer-bottom-bar .footer-terms {
justify-self: end;
}
}
/* No mobile, align-items-center centraliza cada como bloco individual,
e como cada link tem um texto de largura diferente, o ícone de cada linha
fica numa posição x diferente (bloco mais largo = ícone mais à esquerda).
Aqui o vira um bloco do tamanho do maior item, centralizado na coluna,
com os itens alinhados à esquerda dentro dele — ícones ficam todos na
mesma coluna. */
@media (max-width: 767.98px) {
.footer-menu-list {
align-items: flex-start !important;
width: fit-content;
margin-left: auto !important;
margin-right: auto !important;
}
}
.footer-terms a:hover {
color: var(--text-color) !important;
}
.regulamento-card {
transition: transform .3s, box-shadow .3s;
border: 1px solid transparent;
}
.regulamento-card:hover {
transform: translateY(-6px);
border-color: var(--primary-color);
}
.app-store-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 10px;
border: 1px solid var(--divider-color);
background-color: var(--background-alt-color);
color: var(--heading-color);
transition: .3s;
}
.app-store-btn:hover {
border-color: var(--primary-color);
background-color: var(--primary-color);
color: var(--heading-color);
}
.app-store-btn i {
font-size: 26px;
line-height: 1;
}
.app-store-btn .app-store-btn-text {
display: flex;
flex-direction: column;
line-height: 1.15;
text-align: left;
}
.app-store-btn .app-store-btn-text small {
font-size: 11px;
opacity: .85;
}
.app-store-btn .app-store-btn-text span {
font-size: 15px;
font-weight: 600;
}
/* ---------------------------- */
/* Accordion */
/* ---------------------------- */
.accordion .accordion-item {
border: none;
border-radius: 0;
background-color: transparent;
border-bottom: var(--accent-color-2) 2px solid;
}
.accordion .accordion-header {
border-bottom: 1px solid var(--primary-color);
}
.accordion .accordion-button {
font-family: var(--font);
padding: 20px 0px;
font-size: 22px;
font-weight: 600;
background-color: transparent;
color: var(--text-color);
border: none;
border-bottom: none !important;
box-shadow: none !important;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23DF3B34' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
background-size: 30px;
background-position: center;
transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23DF3B34' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.accordion-button::after {
transition: all 0.5s;
}
.accordion .accordion-body {
color: var(--text-color);
padding: 10px 0px;
}
.accordion .accordion-body-2 {
color: var(--text-color-2);
padding: 10px 15px 10px 100px;
}
/* ---------------------------- */
/* Form */
/* ---------------------------- */
.form label {
font-size: 18px;
font-weight: 500;
display: none;
}
/* Checkbox (ex.: aceite de notificações) precisa do rótulo visível */
.form .form-check {
display: flex;
align-items: center;
gap: 8px;
padding-left: 0;
}
.form .form-check-label {
display: inline;
font-size: 15px;
font-weight: 400;
}
.form .form-check-input {
width: 1.15em;
height: 1.15em;
margin: 0;
padding: 0;
border: 1px solid var(--divider-color);
border-radius: 4px;
background-color: var(--background-alt-color);
float: none;
flex-shrink: 0;
}
.form .form-check-input:checked {
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.form .form-check-input:focus {
border: 1px solid var(--primary-color);
box-shadow: none;
}
.form input,
.form textarea,
.form select {
background-color: transparent;
color: var(--text-color);
border-radius: 0px;
outline: none;
padding: 0;
font-size: 16px;
border: none;
border-bottom: 1px solid var(--primary-color);
}
.form textarea {
max-height: 158px;
}
.form select option {
color: var(--heading-color);
background-color: #1E1F23;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
box-shadow: none;
border: solid 2px var(--accent-color-2);
background-color: transparent;
color: var(--text-color);
border: none;
border-bottom: 1px solid var(--primary-color);
}
.form input::placeholder,
.form textarea::placeholder {
color: var(--placeholder-color);
font-size: 14px;
}
/* ---------------------------- */
/* Responsive Layouts */
/* ---------------------------- */
@media only screen and (max-width: 1199.98px) {
h1 {
font-size: 75px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 22px;
}
p,a {
font-size: 18px;
}
.heading-2 {
font-size: 46px;
}
.achievement-unit {
font-size: 18px;
}
.top-header .icon-social {
width: 30px;
height: 30px;
}
.big-title {
font-size: 250px;
}
.big-title-2 {
font-size: 250px;
}
.mt-n280 {
margin-top: -150px;
}
.mt-n220 {
margin-top: -100px;
}
.px-md-20 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.hero {
height: 90vh;
}
.why .col-12:nth-child(3) {
border-left: 1px solid var(--divider-color);
}
.service-content {
padding: 30px;
}
.faq-title {
border-bottom: none;
}
.faq-title h3 {
border-bottom: 1px solid var(--primary-color);
}
.img-ratio-321 {
position: relative;
aspect-ratio: 21 / 9;
overflow: hidden;
}
.img-ratio-121 {
position: relative;
aspect-ratio: 21 / 9;
overflow: hidden;
}
.info-lb-overlay {
width: 90%;
left: 5%;
bottom: 15%;
}
.footer-logo-box {
width: 100%;
display: flex;
}
}
@media only screen and (min-width: 991.98px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
top: 40px;
}
.dropdown .dropdown-menu {
display: none;
}
.dropdown:hover .dropdown-toggle::after {
border-top: 0;
border-bottom: 0.3em solid;
}
.nav-link.icon-submenu {
padding: 0px !important;
}
}
@media only screen and (max-width: 991.98px) {
h1 {
font-size: 56px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 28px;
}
p,a {
font-size: 17px;
}
.dropdown-menu {
width: 100%;
border-radius: 0;
padding: 5px;
}
.dropdown-item {
margin: 10px 0;
}
.nav-item.dropdown {
position: relative;
}
.nav-item.dropdown .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.icon-submenu {
padding: 0px 5px;
}
}
@media only screen and (max-width: 768.98px) {
h1 {
font-size: 38px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p,a {
font-size: 16px;
}
.big-title {
font-size: 90px;
}
.big-title-2 {
font-size: 90px;
}
.mt-n280 {
margin-top: -65px;
}
.mt-n220 {
margin-top: 40px;
}
.max-w-200 {
max-width: 100%;
}
.mb-n90 {
margin-bottom: -120px;
}
.no-bottom-left-radius {
border-bottom-left-radius: 10px !important;
}
.hero {
height: 80vh;
}
.why .col-12:nth-child(2),
.why .col-12:nth-child(4) {
border-left: 1px solid var(--divider-color);
}
.nav-pills .nav-link {
text-align: center;
}
.footer-logo-box {
height: 100px;
justify-content: center;
}
}
@media only screen and (max-width: 576.98px) {
h1 {
font-size: 38px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
p, a {
font-size: 16px;
}
.hero {
height: 85vh;
}
.service-icon {
width: 55px;
height: 55px;
}
.info-lb-overlay {
bottom: 27.5%;
bottom: 10%;
}
.img-ratio-321 {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.img-ratio-113 {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.card-team-label {
background-color: var(--accent-color);
opacity: 85%;
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: 90%;
}
.footer-logo-box {
height: 80px;
}
}