/* Reset básico */
* {
    margin: 0; /* Remove a margem padrão de todos os elementos */
    padding: 0; /* Remove o preenchimento padrão de todos os elementos */
    box-sizing: border-box; /* Inclui bordas e preenchimento no cálculo da largura e altura dos elementos */
}


body {
    font-family: Arial, sans-serif; /* Define a fonte padrão do corpo do documento */
    line-height: 1.6; /* Define a altura da linha para melhorar a legibilidade */
    background-color: #fff; /* Define a cor de fundo interna como branco */
    background-image: url('img/imgfundototal.png'); /* Define a imagem de fundo */
    color: #333; /* Define a cor do texto como cinza escuro */
    max-width: 1000px; /* Define a largura máxima do corpo do documento */
    margin: 0 auto; /* Centraliza o corpo do documento horizontalmente */
    padding: 20px; /* Adiciona um preenchimento de 20px ao redor do corpo do documento */
    border: 5px solid #CCFFF9; /* Adiciona uma borda de 5px de largura e cor */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra para dar um efeito de profundidade */
    position: relative; /* Define o posicionamento relativo para o pseudo-elemento */
    z-index: 1; /* Define o índice z para garantir que o conteúdo fique acima do pseudo-elemento */
}

body::before {
    content: ""; /* Adiciona um conteúdo vazio */
    position: fixed; /* Define o posicionamento fixo para cobrir toda a tela */
    top: 0; /* Define a posição superior como 0 */
    left: 0; /* Define a posição esquerda como 0 */
    width: 100%; /* Define a largura como 100% */
    height: 100%; /* Define a altura como 100% */
    background-color: #f0f8ff; /* Define a cor de fundo externa */
    z-index: -1; /* Define o índice z para garantir que fique abaixo do conteúdo */
}

header {
    background-image: url('img/RTU Brasil.png');	
	color: #fff; /* Define a cor do texto como branco */
    padding: 1rem 0; /* Adiciona um preenchimento de 1rem no topo e na base do cabeçalho */
    text-align: center; /* Centraliza o texto no cabeçalho */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra ao texto */
}

header .logo h1 {
    margin: 0; /* Remove a margem do elemento h1 dentro da classe logo */
}

nav ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0; /* Remove o preenchimento da lista */
    display: flex; /* Define a lista como um contêiner flexível */
    justify-content: center; /* Centraliza os itens da lista horizontalmente */
    flex-wrap: wrap; /* Permite que os itens da lista quebrem para a próxima linha, se necessário */
    background: linear-gradient(135deg, #007bff, #00aaff); /* Define um fundo gradiente para a lista de navegação */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra à lista de navegação */
}

nav ul li {
    margin: 0.5rem 1rem; /* Adiciona uma margem ao redor dos itens da lista */
}

nav ul li a {
    display: inline-block; /* Permite adicionar padding ao link */
    padding: 10px 15px; /* Adiciona espaço ao redor do texto do link */
    color: #ffffff; /* Define a cor do texto como branco */
    background-color: #007BFF; /* Define a cor de fundo inicial */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    text-decoration: none; /* Remove sublinhado dos links */
    transition: all 0.3s ease; /* Adiciona uma transição suave para as mudanças de estilo */
}

nav ul li a:hover {
    background-color: #0056b3; /* Muda a cor de fundo ao passar o mouse */
    color: #ffffff; /* Mantém a cor do texto como branco */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra maior ao texto dos links ao passar o mouse */
    transform: scale(1.1); /* Aumenta levemente o tamanho dos links ao passar o mouse */
}


.hero {
    background: linear-gradient(135deg, #00aaff, #e0e0e0); /* Define um fundo gradiente para a seção hero */
    color: #333; /* Define a cor do texto como cinza escuro */
    padding: 2rem 1rem; /* Adiciona um preenchimento ao redor da seção hero */
    text-align: center; /* Centraliza o texto na seção hero */
    margin-bottom: 1rem; /* Adiciona uma margem inferior à seção hero */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra à seção hero */
}

.hero h2 {
    margin-bottom: 1rem; /* Adiciona uma margem inferior ao elemento h2 */
    font-size: 2rem; /* Define o tamanho da fonte do elemento h2 */
    color: #007bff; /* Define a cor do texto do elemento h2 */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao texto do elemento h2 */
}

.section {
    background: #fff; /* Define a cor de fundo como branco */
    margin-bottom: 1rem; /* Adiciona uma margem inferior à seção */
    padding: 1rem; /* Adiciona um preenchimento à seção */
    border-radius: 5px; /* Adiciona bordas arredondadas à seção */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra à seção */
}

.section h2 {
    margin-bottom: 1rem; /* Adiciona uma margem inferior ao elemento h2 */
    font-size: 1.5rem; /* Define o tamanho da fonte do elemento h2 */
    color: #007bff; /* Define a cor do texto do elemento h2 */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao texto do elemento h2 */
}

.section p {
    margin-bottom: 0.5rem; /* Adiciona uma margem inferior ao parágrafo */
    text-align: justify; /* Justifica o texto do parágrafo */
    color: #333; /* Define a cor do texto como cinza escuro */
}

.section a {
    color: #ffffff; /* Define a cor do texto dos links */
    text-decoration: none; /* Remove a sublinha dos links */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao texto dos links */
    transition: all 0.3s ease-in-out; /* Adiciona uma transição suave a todas as propriedades */
}

.section a:hover {
    text-decoration: underline; /* Adiciona uma sublinha aos links ao passar o mouse */
    color: #DFDFDF; /* Muda a cor do texto dos links ao passar o mouse */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra maior ao texto dos links ao passar o mouse */
    transform: scale(1.1); /* Aumenta levemente o tamanho dos links ao passar o mouse */
}

blockquote {
    background: #f9f9f9; /* Define a cor de fundo como cinza claro */
    border-left: 10px solid #007bff; /* Adiciona uma borda esquerda azul */
    margin: 1rem 0; /* Adiciona uma margem superior e inferior ao bloco de citação */
    padding: 0.5rem 1rem; /* Adiciona um preenchimento ao bloco de citação */
    quotes: "\201C""\201D""\2018""\2019"; /* Define as aspas para o bloco de citação */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao bloco de citação */
}

blockquote p {
    display: inline; /* Define o parágrafo como inline */
    color: #007bff; /* Define a cor do texto como azul */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao texto */
}

footer {
    background: linear-gradient(135deg, #007bff, #00aaff); /* Define um fundo gradiente para o rodapé */
    color: #fff; /* Define a cor do texto como branco */
    text-align: center; /* Centraliza o texto no rodapé */
    padding: 1rem 0; /* Adiciona um preenchimento ao rodapé */
    margin-top: 2rem; /* Adiciona uma margem superior ao rodapé */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra ao texto */
}

.carrossel {
    overflow: hidden; /* Oculta o conteúdo que transborda */
    position: relative; /* Define a posição relativa para o carrossel */
    width: 100%; /* Define a largura do carrossel como 100% */
    margin-bottom: 1rem; /* Adiciona uma margem inferior ao carrossel */
}

.carrossel-inner {
    display: flex; /* Define o contêiner interno do carrossel como flexível */
    transition: transform 0.5s ease-in-out; /* Adiciona uma transição suave ao transformar */
}

.slide {
    min-width: 100%; /* Define a largura mínima do slide como 100% */
    box-sizing: border-box; /* Inclui bordas e preenchimento no cálculo da largura e altura */
    padding: 1rem; /* Adiciona um preenchimento ao slide */
}

.slide img {
    max-width: 100%; /* Define a largura máxima da imagem como 100% */
    border-radius: 5px; /* Adiciona bordas arredondadas à imagem */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra à imagem */
}

.slide p {
    text-align: center; /* Centraliza o texto no parágrafo */
    margin-top: 0.5rem; /* Adiciona uma margem superior ao parágrafo */
    color: #007bff; /* Define a cor do texto como azul */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao texto */
}
/* A classe .highlight é usada para destacar elementos específicos no HTML.
   Normalmente, ela é aplicada a textos ou parágrafos que precisam de ênfase visual. */
.highlight {
    font-weight: bold; /* Define o peso da fonte como negrito, tornando o texto mais destacado */
    color: #ff0000; /* Define a cor do texto como vermelho, chamando a atenção */
    font-size: 1.2em; /* Define o tamanho da fonte como 1.2 vezes o tamanho padrão, aumentando ligeiramente o texto */
    background-color: #f0f0f0; /* Define a cor de fundo como um cinza claro, criando um contraste suave com o texto */
    padding: 10px; /* Adiciona um preenchimento interno de 10 pixels em todos os lados, aumentando a área clicável e o espaçamento */
    border-radius: 5px; /* Define bordas arredondadas com um raio de 5 pixels, suavizando as bordas do elemento */
}

/* A classe .cta-button é usada para estilizar botões de chamada à ação (Call to Action).
   Esses botões são projetados para se destacar e incentivar os usuários a clicar neles. */
.cta-button {
    display: block; /* Define o elemento como um bloco, ocupando toda a largura disponível do contêiner pai */
    width: 100%; /* Define a largura do elemento como 100% do seu contêiner pai, garantindo que ele seja responsivo */
    max-width: 300px; /* Define a largura máxima do elemento como 300 pixels, limitando seu tamanho em telas maiores */
    margin: 20px auto; /* Adiciona uma margem de 20 pixels em cima e embaixo, e centraliza horizontalmente */
    padding: 15px 20px; /* Adiciona um preenchimento interno de 15 pixels em cima e embaixo, e 20 pixels nas laterais, aumentando a área clicável */
    background-color: #ff5722; /* Define a cor de fundo como laranja vibrante (#ff5722), tornando o botão visualmente atraente */
    color: #ffffff; /* Define a cor do texto como branco, criando um contraste claro com o fundo */
    font-size: 1em; /* Define o tamanho da fonte como 1 vez o tamanho padrão, garantindo legibilidade */
    font-weight: bold; /* Define o peso da fonte como negrito, tornando o texto do botão mais destacado */
    text-align: center; /* Centraliza o texto horizontalmente dentro do botão */
    border: none; /* Remove qualquer borda do elemento, criando um visual mais limpo */
    border-radius: 5px; /* Define bordas arredondadas com um raio de 5 pixels, suavizando as bordas do botão */
    cursor: pointer; /* Altera o cursor para uma mãozinha ao passar sobre o elemento, indicando que é clicável */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao redor do elemento, criando um efeito de elevação */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Define uma transição suave para a cor de fundo e transformação, melhorando a experiência do usuário */
    text-decoration: none; /* Remove o sublinhado do texto, criando um visual mais limpo */
}

/* Estilo adicional para o estado de foco e hover do botão CTA */
.cta-button:hover, .cta-button:focus {
    background-color: #e64a19; /* Muda a cor de fundo para um laranja mais escuro ao passar o mouse ou focar */
    transform: translateY(-2px); /* Move o botão ligeiramente para cima, criando um efeito de clique */
    color: #ffffff; /* Garante que a cor do texto permaneça branca ao passar o mouse ou focar */
    text-shadow: none; /* Remove qualquer sombra de texto para garantir clareza */
}
/* Media Queries para Responsividade */
@media (max-width: 1000px) {
    body {
        width: 100%; /* Define a largura do corpo como 100% */
    }

    nav ul {
        flex-direction: column; /* Define a direção dos itens da lista como coluna */
        align-items: center; /* Centraliza os itens da lista */
    }

    nav ul li {
        margin: 0.5rem 0; /* Adiciona uma margem superior e inferior aos itens da lista */
    }

    .hero {
        padding: 1rem; /* Adiciona um preenchimento à seção hero */
    }

    .section {
        padding: 1rem; /* Adiciona um preenchimento à seção */
    }
}

@media (max-width: 600px) {
    nav ul li a {
        font-size: 1rem; /* Define o tamanho da fonte dos links */
    }

    .hero h2 {
        font-size: 1.5rem; /* Define o tamanho da fonte do elemento h2 */
    }

    .hero p {
        font-size: 1rem; /* Define o tamanho da fonte do parágrafo */
    }

    .section {
        padding: 0.5rem; /* Adiciona um preenchimento à seção */
    }
}

/* Ajustes específicos para dispositivos móveis */
@media (max-width: 768px) {
    header {
        background-size: contain; /* Ajusta a imagem para caber dentro da tela */
        background-attachment: scroll; /* Permite que a imagem role com o conteúdo */
        height: auto; /* Ajusta a altura do header para o conteúdo */
    }
}
/* Estilos adicionais para a página de vídeos */
.video-gallery {
    display: flex; /* Define o contêiner da galeria de vídeos como flexível */
    flex-wrap: wrap; /* Permite que os itens da galeria quebrem para a próxima linha, se necessário */
    gap: 20px; /* Adiciona um espaçamento de 20px entre os itens da galeria */
    justify-content: center; /* Centraliza os itens da galeria */
}

.video-gallery iframe {
    flex: 1 1 calc(50% - 40px); /* Define a largura dos iframes como um terço do contêiner, menos 40px */
    max-width: 100%; /* Define a largura máxima dos iframes como 100% */
    height: 300px; /* Define a altura dos iframes */
    border: none; /* Remove a borda dos iframes */
}

@media (max-width: 768px) {
    .video-gallery iframe {
        flex: 1 1 calc(50% - 20px); /* Define a largura dos iframes como metade do contêiner, menos 20px */
        height: 200px; /* Define a altura dos iframes */
    }
}

@media (max-width: 480px) {
    .video-gallery iframe {
        flex: 1 1 100%; /* Define a largura dos iframes como 100% */
        height: 200px; /* Define a altura dos iframes */
    }
}