.index {
    align-items: center;
    justify-content: center;
    height: 100vh;
    display: flex;
    margin: 0;
    padding: 0;
    font-family: Arial,sans-serif;
    background-color: #000000f5;
    text-align: center;
    overflow: hidden;
    position: relative; /*Adiciona posicionamento relativo para o posicionamento absoluto dos botões */
}

body{
    
        align-items: center;
        justify-content: center; 
        height: 100vh; 
         /* display: flex; */

        background-color: #648f7e;
        /* text-align: center; */
 
        /* overflow: hidden; */
} 



#menu-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
     background-color: rgba(155, 63, 63, 0); 
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
}


#menu-button svg {
    width: 20px;
    height: 25px;
    margin-right: 10px;
    fill: white;

}

.menu {
    position: fixed;
    top: 0;
    right: -450px;
    background-color: rgb(38, 70, 70);
    color: white;
    width: 400px;
    height: 100%;
    padding: 10px;
    z-index: 1;
     transition: right 0.5s; /* Adiciona transição para o efeito de deslizar */
     
}
.fabricio{
    white-space: nowrap;
    color: rgb(39, 197, 189);
}

.menu ul {
    list-style: none;
    padding: 0;
}

.menu li {
    margin-bottom: 10px;
}

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


/* /////////////////////////////////////////////         PARTE 2       //////////////////////////////////////////////////// */

/*//////////entrevista//////////*/


.image-container {
    text-align: center;
   
    height: 80%;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    
}





.controls {
    position: absolute; /* Define o posicionamento absoluto */
    bottom: 10px; /* Ajusta a distância do fundo */
    left: 10px; /* Ajusta a distância da esquerda */
}

button {
    padding: 10px 20px;
    margin: 0 10px;
}

body { 
    font-family: Arial, sans-serif;
     margin: 0; 
     padding: 0; 
    }
.header {
      color: blue;
      text-align: center ;
      font-size: 24px;
      padding: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      
    }
  
  
.header img{
    width:300px;
    margin-right: 30%;
    display:flex;
    }
.header h1{
    margin-left: 40px;
}

.centralizado{
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}

.centralizado h1{
    font-size: 40px;
    margin-left: 10px;
}

.centralizado p{
    word-wrap: break-word;
    margin-left:10px;
    text-align: justify;
 
}

.centralizado_met{
    overflow-y: scroll;
   
}

.centralizado_met h1{
    font-size: 40 px;
    margin-left: 10px;
}



.text-animation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #648f7e;
}

.text-animation {
    font-size: 2em;
    color: white;
    animation: fadeOut 3s forwards;
}