*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root {
    --back: #000;
    --main-letter: #F6B10C;
    --letter-contrast: #ffffff;
    --ice: #fffafa;
    --back-nav2: #ffffff70;

    /* NAVBAR STYLE */ 
    --back-nav: #00000070;
    
}  

body{
    background: var(--back);
    color: var(--main-letter);
    overflow-x: hidden;
    overflow-y: scroll; /* Adiciona uma barra de rolagem vertical na página inteira */
}

::-webkit-scrollbar {
    width: 5px; /* Largura da barra de rolagem */
    background-color: transparent; /* Cor de fundo transparente */
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-letter); /* Cor da barra de rolagem */
    border-radius: 5px; /* Borda arredondada */
}

/* NAVBAR */
.navbar{
    background-color: var(--back-nav);
    transition: background-color 0.4s ease-out;
    padding-left: 5%;
    padding-right: 5%;
}

/* Defina a cor inicial */
.navbar.initial-color {
    background-color: #00000070; /* Cor inicial */
}

/* Define a cor desejada após o scroll */
.navbar.scroll-color {
    background-color: #000; /* Cor após o scroll */
}

.logo{
    color: var(--main-letter);
    text-decoration: none;
    border-radius: 5px;
}

.navbar-brand{
    color: var(--main-letter);
}

.nav-item a{
    color: var(--main-letter);
    transition: all 0.4s ease-out;
    border-radius: 5px;
    font-weight: bold;
}

.nav-item a:hover{
    transition: all 0.4s ease-in;
    color: #111;
    background: linear-gradient(90deg, #975d14, #fdf184, #975d14);
    border-radius: 5px;
}

.offcanvas{
    background: var(--back);
}
.offcanvas-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20%;
    font-size: 30px;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espaçamento entre os itens */
}

/* Para manter os logos das redes sociais em linha */
.navbar-nav .nav-item:last-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaçamento entre os logos */
}

/* HOME */

.btn-see-all {
    position: absolute;
    top: 25px; /* Ajuste este valor conforme necessário */
    padding: 10px 20px;
    background: linear-gradient(90deg, #975d14, #fdf184, #975d14);
    color: #111;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}


.homeDesktop {
    position: relative;
    height: 100vh; /* Faz com que a section ocupe toda a altura da tela */
    background-size: cover;
    background-position: center right;
    /* display: flex; */
    align-items: center;
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    text-align: right; /* Alinha o texto à direita */
    color: white; /* Cor do texto */
    overflow: hidden;
    position: relative; /* Garante que os elementos filhos mantenham-se dentro desta seção */
    box-shadow: 0 100px 20px -105px #00000080;
}

/* Estilo para ajustar o tamanho do contêiner do carrossel */
.carousel-container-home {
    width: 100%; /* Define a largura para ocupar 100% do contêiner pai */
    height: 100vh; /* Define a altura para ocupar 100% da seção */
    box-shadow: 0 -15px 20px 10px hsla(0, 94%, 37%, 0.97);
}

.fas-fa-icons{
    color: var(--main-letter);
    font-size: 25px;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1); /* Começa na escala normal */
    }
    50% {
        transform: scale(1.2); /* Aumenta para 120% do tamanho original */
    }
    100% {
        transform: scale(1); /* Retorna ao tamanho original */
    }
}

/* Estilo para ajustar o tamanho das imagens */
.carousel-item-home img {
    width: 100%; /* Ajusta a largura para ocupar 100% do contêiner do carousel */
    height: 100vh; /* Ajusta a altura para ocupar 100% do contêiner do carousel */
    object-fit: contain; /* Garante que a imagem cubra todo o espaço sem distorção */
    animation: zoomInOut 5s infinite; /* Executa a animação por 10 segundos (5s de zoom + 5s de retorno) em loop */
}

.carousel-container-home .carousel-item img {
    width: 100%;
    height: 100vh;
    object-fit: contain;
    transform: translateY(-20%); /* Ajusta o deslocamento vertical da imagem */
}

.container-car {
    width: 100%; /* Ocupa 100% da largura */
    padding-left: 0; /* Remove qualquer padding à esquerda */
    padding-right: 5; /* Remove qualquer padding à direita */
}

.col-md-9, .col-md-3 {
    padding-left: 0;
    padding-right: 0;
}

.table-info-car {
    background-color: black !important; /* Define o fundo da tabela como preto */
    color: #F6B10C !important; /* Define a cor do texto */
    border-color: #F6B10C !important; /* Define a cor das bordas */
}

.table-info-car td {
    background: var(--back);
    color: #F6B10C !important; /* Define a cor do texto nas células */
    border-color: #F6B10C !important; /* Define a cor da borda das células */
    padding: 10px !important; /* Mantém o espaçamento das células */
}

.table-info-car tr {
    background-color: black !important; /* Define o fundo de cada linha como preto */
}

.roww, .roww-table {
    margin: 0; /* Remove margens entre colunas */
}

.carousel-item img {
    width: 100%;
    height: 100vh; /* A imagem ocupa 100% da altura da viewport */
    object-fit: center; /* Ajusta a imagem para cobrir o contêiner */
    object-position: center; /* Centraliza o conteúdo da imagem */
}


.card-cars-home{
    background: transparent;
    border: 0;
    color: var(--ice);
    font-size: 18px;
    width: 100%;
}

.img-icon-cardhome{
    max-width: 35px;
}

.text-overlay {
    font-size: 70px;
    padding-right: 5%;
    width: 600px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto para contraste */
}

.title-span{
    color: var(--main-letter);
}

.banner img{
    width: 100%;
    height: 140px;
}

.banner-inverter img{
    width: 100%;
    height: 140px;
    rotate: 180deg;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.card-container-home{
    width: 50%;
    top: 40%;
}

.slide-in {
    animation: slideIn 1s ease-in-out forwards;
    opacity: 0;
}
.card-title-info{
    font-size: 30px;
}

@media (max-width: 950px) {
    .home{
        height: 100vh;
    }
    .banner-sec{
        display: none;
    }
    .card-container-home{
        width: 75%;
        top: 100%;
    }
    .carousel-inner-home{
        height: 90vh;
    }
    .card-cars-home{
        background: transparent;
        color: var(--ice);
        border-radius: 15px;
        /* padding-top: 18%; */
        /* padding-bottom: 2%; */
        padding-left: 2%;
        padding-right: 2%;
    }
    .card-title-info{
        font-size: 22px;
    }
    .carousel-container-home .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: translateY(0%); /* Ajusta o deslocamento vertical da imagem */
    }
    .text-overlay {
        font-size: 50px;
        padding-right: 5%;
        width: 600px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto para contraste */
    }
}

/* SOME CARS */

.SomeCars{
    padding-top: 5%;
    padding-bottom: 8%;
    background-image: url(../img/media/CARBONFIBER2.png);
    background-size: cover;
    background-position: center;
}

.title-somecars {
    text-align: center;
}

.title-somecars h2 {
    border-bottom: 2px solid #f6b10c; /* Cor e espessura da linha - ajuste conforme necessário */
    padding-bottom: 10px; /* Espaçamento entre o texto e a linha - ajuste conforme necessário */
    display: inline-block; /* Faz com que a linha apenas abranja a largura do texto */
} 

.card-text {
    text-align: center;
    font-size: 18px;
}

.card{
    border-radius: 15px;
}

.row{
    padding-left: 5%; 
    padding-right: 5%;
    width: 100%;
}

.card img{ 
    padding-top: 1%; 
    padding-left: 1%; 
    padding-right: 1%; 
    padding-bottom: 1%;
}

.card-img-top {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

.see-more-card{
    background: linear-gradient(90deg, #975d14, #fdf184, #975d14);
    border: 0;
    padding-left: 3%;
    padding-right: 3%;
    color: var(--back);
    border-radius: 5px;
} 

.see-more-card:hover{
    transition: all 0.30s ease-in-out;
    background: var(--back);
    border-color: var(--black);
    padding-left: 3%;
    padding-right: 3%;
    color: var(--main-letter);
    border-radius: 5px;
}

.final-section{
    padding-top: 3%;
    align-items: center;
    justify-content: center;
}

/* Adicione uma classe para ocultar os elementos inicialmente */
.slide-in-somecars {
    opacity: 0;
    transform: translateY(-50px); /* Altere o eixo de movimento para vertical */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Adicione animação quando os elementos estão visíveis */
.slide-in-somecars.active {
    opacity: 1;
    transform: translateY(0); /* Movimento vertical para cima */
}

@media (max-width: 700px) {
    .SomeCars{
        padding-top: 10%;
    }
    .title-somecars h2{
        font-size: 30px;
    }
    .card-text{
        font-size: 20px;
    }
    .img-icon-cardhome{
        max-width: 30px;
    }
}

/* Estilos para o footer */
.back-footer{
    background-color: var(--main-letter);
    padding-top: 15px;
}
.footer-dark {
    padding:50px 0;
    color:#f0f9ff;
    background: var(--back);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-left: 16px;
    margin-right: 16px;
}

.footer-dark h3 {
    margin-top:0;
    margin-bottom:12px;
    font-weight:bold;
    font-size:16px;
}

.footer-dark ul {
    padding:0;
    list-style:none;
    line-height:1.6;
    font-size:14px;
    color: white;
    margin-bottom:0;
}

.footer-dark ul a {
    color:inherit;
    text-decoration:none;
    color: white;
    opacity:0.6;
}

.footer-dark ul a:hover {
    opacity:0.8;
}

.footer-dark .item.text {
    margin-bottom:36px;
}

.footer-dark .item.text p {
    opacity:0.6;
    margin-bottom:0;
}

.footer-dark .item.social {
    text-align:center;
}

.footer-dark .item.social > a {
    font-size:20px;
    width:36px;
    height:36px;
    line-height:36px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,0.4);
    margin:0 8px;
    color:#fff;
    text-decoration: none;
    opacity:0.75;
}

.footer-dark .item.social > a:hover {
    opacity:0.9;
}

.footer-dark .copyright {
    text-align:center;
    padding-top:24px;
    color: white;
    text-decoration: none;
    opacity:0.3;
    font-size:13px;
    margin-bottom:0;
} 

.img-footer{
    width: 150px;
}

@media (max-width:700px) {
    .footer-dark .item:not(.social) {
        text-align:center;
        padding-bottom:20px;
    }

    .footer-dark .item.text {
        margin-bottom:0;
    }

    .footer-dark .item.social {
        text-align:center;
        margin-top:20px;
    }
}

/* ABOUT PAGE */
.about{
    height: 100vh;
    /* background-image: url(../img/back.jpg);
    background-position: center;
    background-size: cover; */
}

.container{
    padding-top: 5%;
}

.title-about{
    font-size: 40px;
    padding-top: 5%;
    color: var(--letter-contrast);
    text-align: center;
}

.about-text{
    padding-top: 2%;
}

.about-logo{
    text-align: center;
    padding-top: 5%;
}

.title-text-about{
    font-size: 30px;
}

.location{
    align-items: center;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
}

.location h1{
    color: var(--letter-contrast);
    padding-bottom: 5%;
}

/* Adicione uma classe para ocultar os elementos inicialmente */
.slide-in-abouttitle {
    opacity: 0;
    transform: translateX(0px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Adicione animação quando os elementos estão visíveis */
.slide-in-abouttitle.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 700px) {
    .img-logo-about{
        width: 100%;
    }

    .about-logo{
        text-align: center;
        padding-top: 20%;
    }

    .location iframe {
        width: 300px; /* Define a largura do iframe para 100% da largura disponível */
        height: 300px; /* Define a altura do iframe para um valor adequado para dispositivos móveis */
    }
}

/* CONTACT */
.contact-form{
    padding-top: 5%;
}

/* STAND */
.stand-home-section{
    height: 100vh;
    background-image: url(../img/cars/nissan2.png);
    background-position: center;
    background-size: cover;
}

.stand-home-section p{
    padding-top: 8%;
    padding-left: 5%;
    font-size: 85px;
    max-width: 800px;
}

.stand-home-section img{
    animation: arrowBounce 1s infinite;
    position: absolute; /* Torna a posição da seta absoluta */
    bottom: 10px; /* Ajusta o posicionamento a partir do fundo */
    left: 50%; /* Coloca a seta no centro horizontal */
    transform: translateX(-50%); /* Ajusta o centro horizontal */
}

@keyframes arrowBounce {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -30%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
} 

.card-cars{
    background: var(--letter-contrast);
    color: var(--back);
    max-width: 950px;
    border-radius: 15px;
    padding-top: 1%; 
    padding-left: 1%; 
    padding-right: 1%; 
    padding-bottom: 1%;
}

.card-cars img{ 
    padding-bottom: 1%;
}

@media (max-width: 700px) {
    .section-cars{
        max-width: 100%;
        margin: 0 auto;
    }
    .title-somecars{
        padding-top: 10%;
    } 
    .stand-home-section p{
        padding-top: 40%;
        text-align: center;
        font-size: 40px;
    }
}

/* CAR */
.barra-navegacao{
    padding-top: 7%;
    padding-left: 8%;
    font-size: 20px;
}

.carinfo{
    padding-bottom: 5%;
    /* background-image: url(../img/media/CARBONFIBER2-old.jpg); */
    background-size: cover;
    background-position: center;
}
.card-comments{
    background: url(../img/media/CARBONFIBER.jpg);
    color: white;
    background-position: center;
    background-size: cover;
}

/* Estilo para ajustar o tamanho do contêiner do carrossel */
.carousel-container {
    max-width: 100vh; /* Define o tamanho máximo do contêiner do carrossel */
    margin: 0 auto;
}

.wider-card {
    max-width: 400px; /* Ajuste o valor conforme necessário */
}

/* Estilo para ajustar o tamanho das imagens */
.carousel-item img {
    width: 350px;
    height: 100vh;
    object-fit: contain;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.card-for-car{
    padding-top: 5%;
    padding-left: 60px;
    border: 0;
    padding-right: 60px;
}

.table-info-car{
    color: white;
}

@media (max-width: 700px) {
    .carinfo{
        padding-top: 12%;
    }
    .barra-navegacao{
        padding-top: 10%;
    }
    .carousel-item img {
        width: 350px;
        align-items: center;
    }
}

/* POLICIES */
.accordion-body{
    background: #111;
    color: var(--main-letter);
}

.img-accordion{
    width: 80%;
}

/* Estilizando o botão do acordeão */
.accordion-button {
    background: #111;
    color: white;
}

/* Estilizando o botão do acordeão quando estiver aberto */
.accordion-button:not(.collapsed) {
    /* Adicione estilos específicos para o botão quando estiver aberto */
    background: #111;
    color: white;
}

.PoliciesAccordion{
    padding-top: 5%;
    padding-bottom: 5%;
    background-image: url(../img/media/CARBONFIBER2.png);
    background-size: cover;
    background-position: center;
}

.accordion-button {
    background-color: #111;
    color: white;
    padding-right: 30px; /* Ajuste o padding para acomodar o ícone */
    position: relative;
}

.arrow-icon {
    position: absolute;
    right: 10px; /* Ajuste conforme necessário */
    top: 50%;
    transform: translateY(-50%);
    color: #F6B10C; /* Cor desejada para a seta */
}

@media (max-width: 700px){
    .PoliciesAccordion{
        padding-top: 20%;
    }
}