/* Reset e estilo global */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        body {
            font-family: 'Arial', sans-serif;
            color: #333;
            background-color: #f9f9f9;
            padding-top: 80px; /* Espaço para o cabeçalho fixo */
        }
    
        /* --------------- Cabeçalho fixo -------------- */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #0d66dc;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 10%;
            z-index: 1000;
            box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.1);
            transition: top 0.3s ease-in-out;
        }
    
        header img {
            height: 60px; /* Ajustado para responsividade */
        }
    
        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
    
        nav ul li a {
            text-decoration: none;
            color: #fff;
            font-weight: bold;
            transition: color 0.3s ease;
        }
    
        nav ul li a:hover {
            color: #f3f3f3;
        }
    
        /* Estilo responsivo */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                align-items: flex-start;
                padding: 10px 5%;
            }
    
            header img {
                height: 50px; /* Ajusta tamanho da logo */
            }
    
            nav ul {
                flex-direction: column;
                gap: 10px;
                display: none; /* Esconde o menu inicialmente */
                width: 100%;
                padding: 10px 0;
                background-color: #0d66dc;
            }
    
            nav ul li {
                text-align: left;
                padding: 5px 0;
            }
    
            .menu-toggle {
                display: block;
                font-size: 24px;
                cursor: pointer;
            }
    
            .menu-active nav ul {
                display: flex;
            }
        }
    
        @media (max-width: 480px) {
            header img {
                height: 50px; /* Reduz ainda mais para telas pequenas */
            }
    
            nav ul {
                padding: 10px;
            }
    
            nav ul li a {
                font-size: 14px;
            }
        }
    
       /* ------------- Banner's principais ------------- */
.hero-carousel {
    position: relative; /* Define a posição como relativa para permitir o posicionamento absoluto dos slides */
    height: 50vh; /* Define a altura do carrossel como 50% da altura da tela */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse os limites do carrossel */
}

/* Slides individuais */
.hero-slide {
    position: absolute; /* Posiciona os slides de forma absoluta em relação ao carrossel */
    top: 0; /* Alinha o slide ao topo */
    left: 100%; /* Coloca os slides fora da tela inicialmente (à direita) */
    width: 100%; /* Cada slide ocupará 100% da largura do carrossel */
    height: 100%; /* Cada slide ocupará 100% da altura do carrossel */
    display: flex; /* Utiliza o flexbox para centralizar o conteúdo do slide */
    justify-content: center; /* Alinha o conteúdo horizontalmente ao centro */
    align-items: center; /* Alinha o conteúdo verticalmente ao centro */
    flex-direction: column; /* Alinha os itens do slide de forma vertical */
    transition: left 0.5s ease-in-out; /* Define a animação de transição quando o slide muda */
    opacity: 50%; /* Inicialmente, os slides terão 50% de opacidade (semi-translúcidos) */
    pointer-events: none; /* Impede interação com slides inativos */
    background: linear-gradient(135deg, #0d66dc, #e20001); /* Define um gradiente de fundo para o slide */
}

/* Overlay semi-transparente sobre os slides */
.hero-slide::before {
    content: ''; /* Cria um pseudo-elemento vazio para o overlay */
    position: absolute; /* Posiciona o overlay sobre o slide */
    top: 0; /* Alinha o overlay ao topo do slide */
    left: 0; /* Alinha o overlay à esquerda do slide */
    width: 100%; /* Faz o overlay ocupar toda a largura do slide */
    height: 100%; /* Faz o overlay ocupar toda a altura do slide */
    background: #f3f3f318; /* Define um fundo semi-transparente para escurecer o slide */
    z-index: 0; /* Coloca o overlay atrás do conteúdo do slide */
}

/* Slide ativo */
.hero-slide.active {
    left: 0; /* Muda a posição do slide para dentro da tela (mostra o slide) */
    opacity: 1; /* Torna o slide totalmente visível */
    pointer-events: auto; /* Permite interação com o slide ativo */
}

/* Imagem de fundo do slide */
.hero-slide img {
    position: absolute; /* Posiciona a imagem de fundo de forma absoluta dentro do slide */
    width: 100%; /* A imagem ocupará toda a largura do slide */
    height: 100%; /* A imagem ocupará toda a altura do slide */
    object-fit: cover; /* Faz a imagem cobrir a área do slide sem distorcer, mas podendo cortar */
}

/* Conteúdo sobreposto no slide */
.hero-content {
    position: relative; /* Permite que o conteúdo fique acima da imagem e do overlay */
    z-index: 1; /* Coloca o conteúdo sobre o slide */
    color: white; /* Define a cor do texto como branco */
    text-align: center; /* Alinha o texto ao centro */
    max-width: 500px; /* Define uma largura máxima para o conteúdo, evitando que fique muito largo */
    padding: 15px; /* Adiciona um espaço interno para o conteúdo */
}

/* Controles do carrossel (botões de navegação) */
.hero-controls {
    position: absolute; /* Posiciona os controles de navegação sobre o carrossel */
    top: 50%; /* Centraliza os botões verticalmente no meio do carrossel */
    width: 100%; /* Os controles ocuparão toda a largura do carrossel */
    display: flex; /* Utiliza o flexbox para distribuir os botões nas extremidades */
    justify-content: space-between; /* Distribui os botões nas extremidades do carrossel */
    transform: translateY(-50%); /* Ajusta o posicionamento vertical para garantir o centro exato */
    pointer-events: none; /* Evita interação com a área do carrossel, permitindo apenas nos botões */
}

/* Estilo dos botões de navegação */
.hero-controls button {
    background: rgba(0, 0, 0, 0.6); /* Define o fundo dos botões com um tom semi-transparente */
    border: none; /* Remove a borda dos botões */
    color: white; /* Define a cor do texto como branca */
    padding: 10px 20px; /* Adiciona um padding interno para aumentar o tamanho do botão */
    font-size: 1rem; /* Define o tamanho da fonte para o texto do botão */
    cursor: pointer; /* Altera o cursor para uma mãozinha ao passar sobre o botão */
    border-radius: 50px; /* Torna os botões arredondados */
    transition: background 0.3s ease, transform 0.2s ease; /* Adiciona uma transição suave para a cor e o efeito de zoom */
    pointer-events: all; /* Permite interação com os botões */
}

/* Botão da esquerda (navegação para o slide anterior) */
.hero-controls button:first-child {
    margin-left: 20px; /* Adiciona um espaçamento à esquerda do botão */
}

/* Botão da direita (navegação para o próximo slide) */
.hero-controls button:last-child {
    margin-right: 20px; /* Adiciona um espaçamento à direita do botão */
}

/* Efeito de hover nos botões (quando o mouse passa sobre o botão) */
.hero-controls button:hover {
    background: rgba(0, 0, 0, 0.8); /* Escurece o fundo do botão ao passar o mouse */
    transform: scale(1.1); /* Aumenta ligeiramente o tamanho do botão para um efeito de zoom */
}

/* Responsividade - Ajustes para telas menores (dispositivos móveis) */
@media (max-width: 768px) {
    .hero-carousel {
        height: 40vh; /* Diminui a altura do carrossel em dispositivos menores */
    }

    /* Ajuste no conteúdo do slide */
    .hero-content {
        font-size: 0.9rem; /* Diminui o tamanho da fonte para telas menores */
        padding: 10px 20px; /* Ajusta o padding interno do conteúdo */
    }

    /* Ajuste no tamanho dos botões */
    .hero-controls button {
        font-size: 0.9rem; /* Diminui o tamanho da fonte dos botões */
        padding: 8px 15px; /* Ajusta o padding interno dos botões */
    }
}


       /* ------------ Seção Geral - Define o estilo para todas as seções da página ------------- */
section {
    padding: 80px 10%; /* Adiciona espaçamento interno de 80px no topo e 10% das laterais da tela */
    text-align: center; /* Centraliza o texto dentro da seção */
}

/* Título da Seção - Estilo do título da seção */
.section-title {
    font-size: 2.5rem; /* Define o tamanho da fonte do título */
    color: #0d66dc; /* Define a cor do título como azul */
    margin-bottom: 30px; /* Adiciona uma margem inferior de 30px para separar o título do conteúdo abaixo */
}

/* Estilos do Carrossel - Define o estilo geral do carrossel */
.carousel {
    display: flex; /* Utiliza o Flexbox para alinhas os itens (cards) de forma flexível */
    align-items: center; /* Alinha os itens verticalmente no centro */
    justify-content: center; /* Centraliza os itens horizontalmente */
    position: relative; /* Define a posição do carrossel como relativa para poder posicionar os botões sobre ele */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse os limites do carrossel */
    width: 100%; /* O carrossel ocupará toda a largura disponível */
}

/* Contêiner do Carrossel - Responsável por agrupar todos os itens do carrossel */
.carousel-container {
    display: flex; /* Utiliza o Flexbox para dispor os cards de forma horizontal */
    transition: transform 0.5s ease; /* Transição suave ao mover o contêiner de um item para outro */
}

/* Cartões de Destaque - Estilo dos cards dentro do carrossel */
.feature-card {
    background: white; /* Cor de fundo branca para cada cartão */
    border-radius: 10px; /* Cantos arredondados nos cartões */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave ao redor do cartão */
    padding: 20px; /* Espaçamento interno de 20px ao redor do conteúdo do cartão */
    width: 300px; /* Largura fixa de 300px para cada cartão */
    margin: 0 10px; /* Margem de 10px entre os cartões */
    transition: transform 0.3s ease; /* Transição suave ao aplicar transformação (ex: ao passar o mouse) */
}

/* Imagem dentro do Cartão - Ajuste da imagem dentro de cada cartão */
.feature-card img {
    width: 100%; /* A imagem ocupa toda a largura do cartão */
    height: auto; /* A altura da imagem se ajusta automaticamente para manter a proporção */
    border-radius: 10px; /* Cantos arredondados para a imagem */
    margin-bottom: 15px; /* Adiciona margem inferior de 15px para separar a imagem do texto */
}

/* Título dentro do Cartão - Estilo do título do cartão */
.feature-card h3 {
    font-size: 1.5rem; /* Tamanho da fonte do título do cartão */
    color: #e20001; /* Cor vermelha para o título */
    margin-bottom: 10px; /* Adiciona uma margem inferior para separar o título do conteúdo abaixo */
}

/* Texto dentro do Cartão - Estilo do texto do cartão */
.feature-card p {
    font-size: 1rem; /* Tamanho da fonte do texto */
    color: #555; /* Cor cinza escuro para o texto */
}

/* Estilo dos Botões de Navegação do Carrossel */
.carousel-button {
    background-color: transparent; /* O fundo dos botões é transparente */
    border: none; /* Remove a borda dos botões */
    font-size: 2rem; /* Tamanho grande para os ícones dos botões */
    color: #0d66dc; /* Cor azul para os botões */
    cursor: pointer; /* Altera o cursor para uma mãozinha ao passar sobre o botão */
    position: absolute; /* Posiciona os botões de forma absoluta dentro do carrossel */
    top: 50%; /* Alinha os botões verticalmente no meio do carrossel */
    transform: translateY(-50%); /* Ajusta a posição para garantir que os botões fiquem exatamente no centro vertical */
    z-index: 1; /* Garante que os botões fiquem sobre os outros elementos do carrossel */
}

/* Botão de Navegação para o Slide Anterior */
.prev {
    left: 10px; /* Posiciona o botão à esquerda com um espaçamento de 10px */
}

/* Botão de Navegação para o Próximo Slide */
.next {
    right: 10px; /* Posiciona o botão à direita com um espaçamento de 10px */
}

        

        /* ------------- Seção de Produtos ------------- */
        .products {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }

        .product-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }

        .product-card img {
            width: 100%;
            height: auto;
            margin-bottom: 15px;
        }

        .product-card h3 {
            font-size: 1.5rem;
            color: #e20001;
            margin-bottom: 10px;
        }

        .product-card p {
            font-size: 1rem;
            color: #555;
            margin-bottom: 15px;
        }

        .product-card a {
            display: inline-block;
            background-color: #0d66dc;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .product-card a:hover {
            background-color: #e20001;
        }

    
        /* -------------- Rodapé -------------- */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        footer p {
            margin-bottom: 10px;
        }

        footer a {
            color: #0d66dc;
            text-decoration: none;
        }

        footer a:hover {
            color: #e20001;
        }
        
        /* -------------- Estilo para a seção "Sobre o JKill" -------------- */
        #sobre {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 5%;
            background-color: #f1f1f1;
        }
    
        .about-container {
            display: flex;
            flex-wrap: wrap; /* Permite quebrar linha para telas menores */
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            max-width: 800px;
            margin: 10px auto;
        }
    
        .about-image,
        .about-content {
            width: 45%; /* Define largura padrão */
        }
    
        .about-image {
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
    
        .about-content {
            color: #333;
            font-size: 1rem;
            line-height: 1.4;
            text-align: left;
        }
    
        .about-content ul {
            list-style: disc;
            padding-left: 15px;
            margin-top: 10px;
        }
    
        .about-content ul li {
            margin-bottom: 8px;
            color: #555;
        }
    
        /* Estilo responsivo para telas menores */
        @media (max-width: 768px) {
            .about-image,
            .about-content {
                width: 100%; /* Ocupa 100% da largura */
            }
    
            .about-container {
                flex-direction: column; /* Organiza itens em coluna */
                text-align: center; /* Centraliza o conteúdo */
            }
    
            .about-content {
                font-size: 1.0rem; /* Reduz o tamanho da fonte */
            }
        }
    
        @media (max-width: 480px) {
            #sobre {
                padding: 30px 3%; /* Reduz o padding */
            }
    
            .about-container {
                gap: 10px; /* Reduz o espaço entre elementos */
            }
    
            .about-content {
                font-size: 0.9rem; /* Ajusta o tamanho da fonte para telas muito pequenas */
            }
        }