@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 255, 255);
    background-image: url("ensaiols3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Alinha os elementos na coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: flex-start; /* Alinha os elementos no topo */
    height: 100vh; /* Ocupa 100% da altura da janela */
    padding-top: 20px; /* Adiciona um espaço no topo */
}

#body2 {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 255, 255);
    background-image: url("ensaiols5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Alinha os elementos na coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: flex-start; /* Alinha os elementos no topo */
    height: 100vh; /* Ocupa 100% da altura da janela */
    padding-top: 20px; /* Adiciona um espaço no topo */
}

#body3 {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 255, 255);
    background-image: url("ensaiols4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Alinha os elementos na coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: flex-start; /* Alinha os elementos no topo */
    height: 150vh; /* Ocupa 100% da altura da janela */
    padding-top: 20px; /* Adiciona um espaço no topo */
    overflow: hidden;
}

#body4 {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 255, 255);
    background-image: url("lspb.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Alinha os elementos na coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: flex-start; /* Alinha os elementos no topo */
    height: 150vh; /* Ocupa 100% da altura da janela */
    padding-top: 20px; /* Adiciona um espaço no topo */


}


.titulo {
    font-size: 60px;
    font-family: fontetitulo;
    text-align: center;
    margin-bottom: 10px; /* Adiciona espaço abaixo do título */
    color: white; /* Cor do texto */
    text-shadow: 
        -4px -4px 0 #d35400, /* Sombra para o canto superior esquerdo */
        2px -2px 0 #d35400,  /* Sombra para o canto superior direito */
        -2px 2px 0 #d35400,  /* Sombra para o canto inferior esquerdo */
        2px 2px 0 #d35400;   /* Sombra para o canto inferior direito */
}


#subt{
    font-size: 40px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-bottom: 5px;
}



.social-container {
    display: flex; /* Usa flexbox para alinhar os botões na horizontal */
    gap: 20px; /* Espaçamento entre os botões */
    justify-content: center; /* Centraliza os botões horizontalmente */
    margin-top: 20px; /* Adiciona espaço acima da barra de botões */
}

.main-btn {
    background-color: black;
    border: 3px solid #d35400;
    box-shadow: 0 0 15px #000000;
    color: #ffffff;
    padding: 10px 15px; /* Ajusta o padding para todos os botões */
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    width: 70px; /* Define a largura dos botões */
    height: 70px; /* Define a altura dos botões */
    display: flex; /* Permite que o conteúdo do botão seja centralizado */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    
}

.main-btn:hover {
    background-color: #ffffff; /* Cor de fundo ao passar o mouse */
}

.button-group {
    display: solid; /* Usa flexbox para alinhar os botões na horizontal */
    justify-content: center; /* Centraliza os botões horizontalmente */
    margin-top: -10px; /* Adiciona espaço acima dos botões retangulares */
    gap: 20px; /* Espaçamento entre os botões retangulares */
}

.rect-btn {
    background-color: #000000; /* Cor de fundo dos botões */
    color: white; /* Cor da fonte */
    border: 3px solid #d35400;
    box-shadow: 0 0 15px #d35400;
    padding: 20px 20px; /* Ajusta o padding */
    border-radius: 5px; /* Arredondamento suave dos cantos */
    font-size: 18px; /* Tamanho da fonte */
    cursor: pointer; /* Muda o cursor para pointer */
    margin: 0 5px; /* Espaço ao redor dos botões */
    transition: background-color 0.3s; /* Transição suave na cor de fundo */
    margin-top: 10px;
}

.rect-btn:hover {
    background-color: #c65a00; /* Cor de fundo ao passar o mouse */
}


.fa-brands, .fa-solid {
    color: #EF7527; /* Aplica a mesma cor para ícones */
};

.image-container {
    text-align: center; /* Centraliza a imagem */
    margin-top: 20px; /* Adiciona espaço acima da imagem */
}

.responsive-image {
    max-width: 30%; /* Faz a imagem responsiva */
    height: auto; /* Mantém a proporção da imagem */
    border: 5px solid #ffffff; /* Borda ao redor da imagem, se desejado */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 0 15px #d35400;
}

.carousel-container {
    position: relative; /* Permite posicionar os botões sobre a imagem */
    max-width: 750px; /* Define uma largura máxima para o carrossel */
    margin: 20px auto; /* Centraliza o carrossel */
    overflow: hidden; /* Esconde as imagens que não estão ativas */
    border: 5px solid #000000; /* Borda ao redor da imagem, se desejado */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 0 15px #d35400;
}

.carousel {
    display: flex; /* Exibe as imagens em linha */
    transition: transform 0.5s ease; /* Transição suave para o movimento */
}

.carousel-image {
    min-width: 100%; /* Cada imagem ocupa 100% da largura do contêiner */
    height: auto; /* Mantém a proporção da imagem */
    display: none; /* Esconde todas as imagens inicialmente */
}

.carousel-image.active {
    display: block; /* Mostra apenas a imagem ativa */
}

.carousel-button {
    position: absolute; /* Posiciona os botões sobre as imagens */
    top: 50%; /* Alinha os botões verticalmente no meio */
    transform: translateY(-50%); /* Centraliza verticalmente os botões */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente para os botões */
    color: white; /* Cor do texto */
    border: none; /* Remove bordas */
    padding: 10px; /* Adiciona espaço ao redor do texto */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
}

.carousel-button.prev {
    left: 10px; /* Botão anterior à esquerda */
}

.carousel-button.next {
    right: 10px; /* Botão seguinte à direita */
}



iframe {
    border: 10px solid #000000; /* Adiciona uma borda laranja */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra para um efeito visual agradável */
}

#carouselExampleIndicators {
    max-width: 100%; /* Definindo largura máxima de 80% da tela */
    margin: auto; /* Centralizando horizontalmente */
}


.carousel-item iframe {
    width: 60vw; /* Define a largura do vídeo como 80% do container pai */
    height: 500px; /* Mantém a altura do vídeo */
    margin: 0 auto; /* Centraliza o vídeo horizontalmente */
    display: block; /* Garante que o iframe seja tratado como um bloco */
}


.text-container {
    max-width: 700px; /* Define a largura máxima para o contêiner de texto */
    margin: 20px auto; /* Centraliza o contêiner na tela e adiciona margem superior */
    padding: 10px 20px; /* Adiciona espaço ao redor do texto */
    text-align: center; /* Centraliza o texto dentro do contêiner */
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semitransparente */
    color: white; /* Cor do texto */
    border-radius: 10px; /* Arredonda as bordas do contêiner */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Adiciona sombra para um efeito visual agradável */
    margin-top: -10px;
}

.text-content {
    font-family: 'Poppins', sans-serif; /* Fonte do texto */
    font-size: 18px; /* Tamanho do texto */
    line-height: 1.6; /* Espaçamento entre linhas */
}

#btnr {
    margin-top: -10px;
}


.container {
    display: flex; /* Exibe os contêineres em linha */
    justify-content: space-around; /* Espaçamento entre os contêineres */
    flex-wrap: wrap; /* Permite quebrar a linha se necessário */
    margin: 20px; /* Margem ao redor da linha de contêineres */
}

.integrante {
    background-color: rgba(255, 123, 7, 0.87); /* Fundo levemente transparente */
    border-radius: 10px; /* Bordas arredondadas */
    padding: 10px;
    text-align: center; /* Centraliza o texto */
    margin: 10px; /* Espaço entre os contêineres dos integrantes */
    width: 18%; /* Largura de cada contêiner */
}

.integrante img {
    max-width: 100%; /* A imagem ocupa a largura total do contêiner */
    border-radius: 10px; /* Bordas arredondadas na imagem */
}

.nome {
    font-size: 22px; /* Tamanho do texto do nome */
    margin-top: 10px; /* Espaço acima do nome */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra de texto */
    color: #ffffff; /* Cor do texto */
}

.descricao {
    font-size: 14px; /* Tamanho do texto da descrição */
    margin-top: 5px; /* Espaço acima da descrição */
    color: #000000;
}

/* Ajustes gerais para telas menores (tablets e celulares) */
@media (max-width: 767px) {
    .titulo {
        font-size: 40px; /* Reduz o tamanho da fonte do título */
    }

    .text-container {
        max-width: 90%; /* Aumenta a largura para telas menores */
    }

    .container {
        flex-direction: column; /* Muda os contêineres para uma única coluna */
        align-items: center; /* Centraliza os itens */
    }

    .integrante {
        width: 80%; /* Aumenta a largura para ocupar mais espaço nas telas menores */
    }

    .descricao {
        font-size: 12px; /* Ajusta o tamanho do texto da descrição para telas menores */
    }

    .rect-btn {
        padding: 15px 15px; /* Reduz o padding dos botões retangulares */
        font-size: 16px; /* Ajusta o tamanho da fonte para botões menores */
    }

    .carousel-image {
        width: 100%; /* Ajusta a largura das imagens do carrossel para ocupar a tela toda */
    }

    
}

/* Ajustes específicos para celulares (telas menores que 768px) */
@media (max-width: 767px) {



    body {
        max-width: 100%; /* Garante que o corpo não ultrapasse a largura da tela */
        padding: 0; /* Remove o padding do body se houver */
    }

    .text-container, .container, .integrante, iframe, .carousel {
        width: 100%; /* Ocupa toda a largura da tela */
        max-width: 100%; /* Não ultrapassa a largura da tela */
        box-sizing: border-box; /* Inclui padding e borda no cálculo de largura */
    }

    .titulo {
        font-size: 50px; /* Reduz o tamanho do título */
        margin-left: 0; /* Remove a margem esquerda */
        text-align: center;
        margin-bottom: -10px;
        margin-top: 15px;
    }

    .rect-btn {
        font-size: 16px; /* Ajusta o tamanho dos botões */
        width: 120%; /* Deixa os botões ocuparem toda a largura */
        padding: 10px; /* Ajusta o padding */
        margin: 5px 0; /* Espaço entre os botões */
        margin-left: 30px;
        
    }

    iframe {
        width: 800%; /* A largura do vídeo ocupará toda a largura disponível */
        height: 200px; /* Ajusta a altura para manter a proporção adequada */
    }

    .container {
        flex-direction: column; /* Alinha os integrantes em uma coluna */
        align-items: center; /* Centraliza o conteúdo */
    }

    .integrante {
        width: 90%; /* Ajusta a largura dos cards de integrantes */
        margin: 5px; /* Reduz as margens laterais */
    }

    .social-container {
        gap: 20px; /* Espaçamento entre os botões */
        margin-top: 20px; /* Adiciona espaço acima da barra de botões */
        margin-left: 0; /* Remove a margem esquerda */
        flex-direction: row; /* Alinha os botões na vertical */
        align-items: center; /* Centraliza os botões */
        justify-content: center;
        flex-wrap: wrap;
    }

    .social-container .main-btn {
        display: inline-block; /* Permite que os botões fiquem lado a lado */
    }

    .text-container {
        margin-top: 20px;
    }

    .text-content {
        font-size: 14px; /* Tamanho do texto */
        line-height: 1.6; /* Espaçamento entre linhas */
    }

    #btnr {
        margin-left: 0px;
    }





 /* Altera a ordem dos botões para garantir que eles apareçam corretamente */
.social-container .main-btn:nth-child(1) {
    order: 1; /* Instagram acima */
}
.social-container .main-btn:nth-child(2) {
    order: 2; /* Telefone acima */
}
.social-container .main-btn:nth-child(3) {
    order: 3; /* YouTube abaixo */
}
.social-container .main-btn:nth-child(4) {
    order: 4; /* Spotify abaixo */
}

/* Adiciona uma regra para ajustar a largura dos botões */
.social-container .main-btn {
    max-width: 100%; /* Define uma largura que permita que os botões fiquem lado a lado */

}
.button-group {
    margin-right: 100px;
}

.carousel-item iframe {
    width: 80vw; /* Define a largura do vídeo como 80% do container pai */
    height: 300px; /* Mantém a altura do vídeo */
    margin: 0 auto; /* Centraliza o vídeo horizontalmente */
    display: block; /* Garante que o iframe seja tratado como um bloco */
}

#subt{
   
    margin-bottom: -170px;
}

}