#landingpage1, #landingpage2 {
    background-color:  black;
   
}

/* ------------------------------------------- */
/* Carrocel de Services - #Landingpage1 */
/* ------------------------------------------- */

.carrocel-container {
    width: 600px;
    height: 300px; /* IMPORTANTE: Altura de uma única imagem visível */
    
    /* MOSTRA A BARRA DE ROLAGEM */
    overflow-y: scroll; 
    
    /* Configura o alinhamento: rolar no eixo Y e forçar a parada */
    scroll-snap-type: y mandatory;
    
    border: 2px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* * O Track: Remove a necessidade de transformações complexas.
 * Permite que as imagens se empilhem verticalmente.
 */
.carrocel-track {
    display: flex;
    flex-direction: column; 
}

/* * As Imagens: Define a altura e o ponto de parada ('snap')
 */
.carrocel-track img {
    width: 100%;
    height: 300px; 
    object-fit: cover;
    
    /* ESSENCIAL: Garante que a rolagem pare no início de cada imagem */
    scroll-snap-align: start; 
}

/* Estilos dos botões (Mantidos do código anterior) */
.carrocel-controls {
    margin-top: 20px;
}

.carrocel-controls button {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: rgb(88, 76, 223);
    color: white;
    font-size: 16px;
}

.carrocel-controls button:hover {
    background-color: rgb(10, 193, 10);
    color: black;
}

/* ------------------------------------------- */
/*  hero-content-wrapper-landingpage2 */
/* ------------------------------------------- */

.hero-images-landingpage2 {
    display: flex; /* Transforma o contêiner do vídeo em um flex container */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    width: calc(100% / 3); /* Define a largura para 1/3 da largura da tela */
    height: calc(100vh / 3); /* Define a altura para 1/3 da altura da tela */
    display: flex;
    align-items: center;
    min-height: 50%; /* Garante que a seção ocupe a altura total da tela */
    flex-direction: row; /* Organiza os itens em linha */
    padding: 40px; /* Espaçamento interno */
    gap: 100px; /* Espaçamento entre as imagens */
}

.hero-images-landingpage2 img {
    width: 100%; /* Faz com que a imagem preencha 100% da largura de seu contêiner */
    height: 100%; /* Faz com que a imagem preencha 100% da altura de seu contêiner */
    object-fit: cover; /* Garante que a imagem não fique esticada, cobrindo o espaço */
    border-radius: 15px; /* Adiciona cantos arredondados às imagens */
    margin-left: auto;
}

/* ======================================= */
/* MEDIA QUERY: AJUSTE FINAL DO CARROSSEL DE LANDINGPAGES (MAX-WIDTH: 600px) */
/* ======================================= */
@media (max-width: 600px) {

    /* 1. Contêiner principal do carrossel: Garante que ele não transborde */
    .carrocel-container {
        overflow-x: hidden; 
        overflow-y: auto;
        width: 100%; 
    }

    /* 2. O Track do carrossel (Onde as imagens estão lado a lado) */
    .carrocel-track {
        display: flex; 
        width: auto; 
    }

    /* 3. AS IMAGENS: Define largura maior e força uma altura menor para criar o retângulo */
    .carrocel-track img {
        /* Define a largura para ocupar quase toda a tela (similar ao websites) */
        width: 90vw; /* Usando 90vw para usar o máximo espaço lateral */
        
        /* Define uma altura menor para criar a proporção retangular (e usar o espaço vertical) */
        height: 60vw; 
        
        /* Garante que a imagem preencha a área, cortando o que não couber (se necessário) */
        object-fit: cover;
        
        flex-shrink: 0; 
        margin-right: 15px; 
    }
}