* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(0, 0, 0);
}

#nome {
    color: white;
    left: 2%;
    top: 3%;
    position: fixed;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
}

#nome1 {
    font-size: 35px;
}

header {
    height: 60px;
    padding: 10px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

#conta {
    position: fixed;
    right: 2%;
    top: 3%;
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: rgb(66, 66, 86);
    border-color: rgb(255, 255, 255);
    border-width: 2px;
    border-style: inset;
}

.opçoes {
    font-weight: bold;
    list-style: none;
    display: inline-block;
    padding: 10px;
    background-color: rgb(0, 0, 0);
    border-radius: 25px;
    margin: 5px;
    border-color: rgb(171, 171, 171);
    border-width: 2px;
    border-style: inset;
    transition: background-color 0.6s ease;
}

.opçoes:hover {
    background-color: white;
    color: black;
    transform: scale(1.1);
}

.opçoes.active {
    background-color: white;
    color: black;
    transform: scale(1.1);
}

a {
    text-decoration: none;
    color: white;
}

section {
    height: calc(100vh - 80px);
    padding-top: 80px;
}

#inicio {
    background-color: rgb(0, 0, 0);
}

#img1 {
    opacity: 0.9;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 60px;
    position: relative;
}

#texto1 {
    color: white;
    font-size: 15px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    position: absolute;
    justify-content: center;
    align-items: center; 
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);
    z-index: 2; /* garante que o texto sempre fica na frente */
}

#texto2 {
    margin-top: 15px;
    font-size: 11px;
    font-weight: normal;
}

#titulo1 {
    font-size: 30px;
}

#titulo2 {
    margin-top: 15px;
    font-size: 39px;
    background-image: linear-gradient(to top, rgb(255, 253, 253), rgb(46, 46, 48));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#dist {
    margin: 10px;
}

.aimg {
    opacity: 0;
    animation: fadeIn3 7s ease forwards;
    z-index: 1; /* imagem atrás do texto */
}

@keyframes fadeIn3 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.aparecer {
    opacity: 0;
    animation: fadeIn 4s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.aparecer2 {
    opacity: 0;
    animation: fadeIn2 2s forwards;
}

@keyframes fadeIn2 {
    to {
        opacity: 1;
    }
}

.subir {
    opacity: 0;
    transform: translateY(40px); /* começa mais embaixo */
    animation: subir 1s ease-out forwards; /* animação */
}

.subir2 {
    opacity: 0;
    transform: translateY(20px); /* começa mais embaixo */
    animation: subir2 1s ease-out forwards; /* animação */
}

@keyframes subir {
    to {
        opacity: 1;
        transform: translateY(0); /* volta para posição normal */
    }
}

@keyframes subir2 {
    to {
        opacity: 1;
        transform: translateY(0); /* volta para posição normal */
    }
}

#sobre {
    background-color: rgb(0, 0, 0);
}

.brilho {
  color: white;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.5),
    0 0 4px rgba(255, 255, 255, 0.3);
  animation: glow 3s infinite alternate;
}

@keyframes glow {
  from {
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.5),
      0 0 4px rgba(255, 255, 255, 0.3);
  }
  to {
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.6),
      0 0 8px rgba(255, 255, 255, 0.4);
  }
}

#conteudo {
    position: relative;
    height: 95%;
    width: 45%;
    background-color: rgb(0, 0, 0);
    top: 3%;
    border-radius: 30px;
}

#tituloc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    color: white;
    padding: 20px;
    position: absolute;
    top: 0%;
}

#textoc{
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: left;
    position: absolute;
    top: 20%;
}

#img2 {
  top: 32%;
  position: relative;
  opacity: 0;
}

/* Quando entra na tela, ativa a animação */
#img2.visivel {
  animation: fadeIn3 10s ease forwards;
}

/* Sua animação existente */
@keyframes fadeIn3 {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#produtos {
    background-image: linear-gradient(to right, black, rgb(18, 17, 17));
}

#videoc {
    height: 85%;
    width: 45%;
    background-color: rgb(0, 0, 0);
    float: right;
    border-radius: 30px;
    position: relative;
    top: 3%;
}

#meuVideo {
  position: relative;
  top: 10%;  
  width: 100%;
  height: 70%;
  object-fit: cover;
}

/* ======== Animações iniciais ======== */
.aparecer3 {
     opacity: 0;
}
.aparecer4 {
    opacity: 0; /* invisível inicialmente */
}

/* ======== Fade-in do título ======== */
.aparecer3.ativo {
    animation: fadeIn3 2s forwards;
}

@keyframes fadeIn3 {
    to {
        opacity: 1;
    }
}

/* ======== Fade-in do parágrafo ======== */
.aparecer4.ativo {
    animation: fadeIn4 3s forwards;
}

@keyframes fadeIn4 {
    to {
        opacity: 1;
    }
}

#serviços {
    background-color: rgb(0, 0, 0)
}

#caixa {
    width: 90%;
    height: 90%;
    background-image: linear-gradient(to right, black, rgb(18, 17, 17));
    top: 5%;
    display: grid;
    gap: 1px;
    margin: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    align-items: center;
    justify-content: center;
    
}

.carro {
    position: relative; /* necessário para posicionar o texto sobre a imagem */
    overflow: hidden;
    height: 250px;
    width: 370px;
    background-color: rgb(24, 23, 23);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
    transition: 0.3s ease;
    opacity: 0; /* invisível até rolar */
    border: 1px inset rgb(255, 255, 255);
}

/* Classe adicionada via JS quando entra na tela */
.carro.aparecer {
    animation: fadeIn5 1s ease forwards;
}

@keyframes fadeIn5 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.carro img {
    width: 98%;
    height: 97%;
    transition: 0.5s ease;
    filter: brightness(50%);
}

.carro:hover {
    box-shadow: 0 0 40px rgb(255, 255, 255);
    transform: scale(1.05);
}

.carro .textoimg {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 2px 3px 0 black;
}

.carro:hover img {
    filter: blur(3px) brightness(60%);
}

.carro:hover .textoimg {
    opacity: 1;
}

#caixasv {
    margin-bottom: 15px;
    padding: 20px;
    top: 2%;
    position: relative;
    height: 70%;
    width: 40%;
    background-color: rgb(0, 0, 0);
    
}

#titulosv {
    font-size: 50px;
}

.lista {
    margin-top: 15px;
    padding: 5px;
    list-style: none;
}

.lista:hover {
    color: rgb(182, 182, 219);
}

#suporte {
    width: 100%;
    height: 25%;
    background-color: rgb(0, 0, 0);
    display: flex;               
    justify-content: flex-end;
    align-items: center;   
    border-top: 1px inset rgb(255, 255, 255);
}

.redes {
    margin: 0 10px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #fff;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.5s;
    background: rgba(0, 0, 0, 0);
    color: var(--color);
    font-size: 2.5em;
    --webkit-box-reflect: below 5px  linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4))
}

.redes:hover {
    background: var(--color);
    color: #050801;
    box-shadow: 0 0 5px var(--color),
    0 0 25px var(--color),
    0 0 50px var(--color),
    0 0 200px var(--color);
}

.codetheworld-io {
    display: flex;               /* deixa os links lado a lado */
    gap: 5px;                   /* espaçamento entre os ícones */
}

#inf {
    padding: 20px;
    top: 2%;
    position: relative;
    height: 70%;
    width: 30%;
    background-color: rgb(0, 0, 0);
}

#org {
    display: flex;             /* deixa os filhos lado a lado */
    justify-content: flex-start; /* alinha tudo à esquerda */
    align-items: flex-start;
    margin: 30px;
}