/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
overflow-x:hidden;
background:#000;
color:rgba(255,255,255,0.9);
font-family:"Lexend Exa";
scroll-behavior: smooth;
}

/* HEADER */
header{
display:flex;
align-items:center;
padding:4vw;
background:#000;
}

header img{
width:60px;
}

.logo {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 10px;
}


.menu{
display:none;
flex-direction:column;
position:absolute;
top:60px;
right:20px;
background:#d6d6d6;
padding:20px;
border-radius:8px;
list-style:none;
gap:15px;
z-index: 1000;
}

.menu:hover {
  background: #c2c2c2;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.menu a {
  position: relative;
  color: black;
  text-decoration: none;
  transition: 0.3s;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #AF8600;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

.menu.active{
display:flex;
}

.menu-toggle {
  font-size: 28px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  color: #AF8600;
  transform: scale(1.1);
}

/* SECTIONS */
section{
display:flex;
flex-direction:column;
padding:10vw 5vw;
}

/* HERO */
.back{
width:100%;
height:90vh;
background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../imagens/safira.png");
background-size:cover;
background-position:center;
}

.inicial{
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:0 20px;
}

.inicial p{
font-size:clamp(20px,6vw,32px);
font-weight:600;
}

/* SOBRE */
.sobre{
flex-direction: column;
background:#fff;
color:#000;
padding-top: 100px;
}

.titulo_sobre{
font-size:18px;
border-bottom:1px solid #AF8600;
padding-bottom:8px;
margin-bottom:30px;
text-align:left;
}

.conteudo{
max-width:100%;
margin:auto;
font-size:16px;
line-height:1.6;
text-align:left;
}

.botao{
display:flex;
justify-content:center;
margin-top:30px;
}

/* PROJETOS */
.projetos{
flex-direction:column;
background:#000000;
color:#ffffff;
}

.titulo_projeto{
font-size:18px;
border-bottom:1px solid #AF8600;
padding-bottom:8px;
margin-bottom:30px;
text-align:left;
}


/* ================= */
/* CARROSSEL FIXO */
/* ================= */

.carrossel{
position:relative;
width:100%;
overflow:hidden;
}

.lista_projetos{
display:flex;
transition:transform 0.5s ease;
width:100%;
}

.card_projeto{
min-width:100%;
display:flex;
justify-content:center;
align-items:center;
}

.card_projeto a{
width:100%;
display:flex;
justify-content:center;
}

.card_projeto img{
width:90%;
border-radius:12px;
}

/* BOTÕES */
.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:#000;
color:#fff;
border:none;
font-size:18px;
padding:8px 12px;
cursor:pointer;
border-radius:5px;
z-index:10;
}

.prev{ left:10px; }
.next{ right:10px; }

.prev:hover,
.next:hover{
background:#333;
}

.titulo_video{
display:flex;
justify-content:center;
align-items:center;
font-size:15px;
border-bottom:1px solid #AF8600;
padding-bottom:8px;
width:100%;
margin:0 auto 40px auto;
text-align:center;
gap: 50px;
color: #000000;
}


.video {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #000;
  padding: 60px 20px;
}

/* TÍTULO */
.titulo_video {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  border-bottom: 2px solid #AF8600;
  padding-bottom: 10px;
  margin-bottom: 50px;
}

/* CONTAINER PRINCIPAL */
.video-container {
  display: flex;
  flex-direction: column; /* MOBILE: um embaixo do outro */
  align-items: center;
  gap: 30px;
}

.video-box, .texto-video {
  flex: 1;
}

.video-box video {
  width: 100%;
  max-width: 600px;
  border-radius: 20px;
}

/* TEXTO */
.texto-video {
  max-width: 450px;
}

.texto-video p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ================= */
/* FOOTER CORRETO */
/* ================= */

footer{
background:#000000;
color:#ffffff;
display:flex;
flex-direction:column;
align-items:center;
}

.conteudoFooter{
display:flex;
flex-direction:column;
gap:30px;
padding:10vw 5vw;
text-align:center;
width:100%;
}

.logoFooter{
width:100%;
}

.logoFooter h3{
font-size:18px;
letter-spacing:3px;
}

.secoesFooter{
display:flex;
justify-content:center;
width:100%;
}

.social ul{
display:flex;
gap:20px;
list-style:none;
justify-content:center;
}

.social img{
width:28px;
cursor:pointer;
}

/* --- 1. FADE IN SIMPLES (Aparece no lugar) --- */
.fade-in {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.fade-in.visible {
  opacity: 1;
}

/* --- 2. FADE IN ESQUERDA (Vem da esquerda) --- */
.fade-in1 {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in1.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- 3. FADE IN DIREITA (Vem da direita) --- */
.fade-in2 {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in2.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ================= */
/* 💻 DESKTOP */
/* ================= */

@media (min-width:900px){

header{
padding:1vw 4vw;
}

header img{
width:80px;
}

section{
flex-direction:row;
padding:7vw;
}

/* HERO */
.back{
height:88vh;
}

.inicial{
text-align:center;
}

.inicial p{
font-size:4vw;
}

/* SOBRE */
.titulo_sobre{
font-size:25px;
width:600px;
}

.conteudo{
max-width:800px;
font-size:18px;
}

/* PROJETOS */
.titulo_projeto{
font-size:25px;
width: 280px;
}

/* CARROSSEL */
.card_projeto{
min-width:100%;
}

.card_projeto img{
width:60%;
}

/* BOTÕES */
.prev,
.next{
font-size:30px;
padding:10px 15px;
}
.titulo_video{
width:800px;
font-size:25px;
margin-bottom: 150px;
}

  .video-container {
    flex-direction: row; /* PC: lado a lado */
    justify-content: center;
    align-items: center;
    padding-left: 100px;
    padding-right: 100px;
  }

  .video-box{
    flex: 1,2;
  }
  .texto-video{
      flex: 1;
  }

/* FOOTER */

.conteudoFooter{
flex-direction:row;
text-align:left;
padding:7vw;
font-size: 30px;
}

.logoFooter h3{
font-size:24px;
font-weight:500;
letter-spacing:4px;
}


.logoFooter{
width:100%;
}

.secoesFooter{
justify-content:flex-end;
align-items:flex-end;
}


}