/* Importar fonte do Google Fonts (opcional, mas recomendado para um visual mais profissional) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* Cores Principais */
:root {
    --primary-blue: #0A1C3C; /* Azul escuro do fundo */
    --accent-silver: #C0C0C0; /* Prata para detalhes */
    --light-gray: #F8F8F8; /* Cinza claro para fundos/textos */
    --dark-gray: #343a40; /* Cinza escuro para textos/elementos */
    --white: #FFFFFF;
}

body {
    font-family: 'Roboto', sans-serif; /* Mantendo Roboto como principal */
    color: var(--dark-gray);
    background-color: var(--white);
    line-height: 1.6; /* Melhora a legibilidade do corpo de texto */
}

/* Você pode aplicar isso a uma seção específica ou ao body se quiser que cubra tudo */
.background-pattern {
    background-image: url('../img/bg_siteplaysteel 0x0.jpg'); /* Ajuste o caminho da imagem se necessário */
    background-repeat: repeat; /* Repetir a imagem para cobrir a área */
    background-size: 273px; /* Tamanho da repetição do padrão, ajuste conforme a imagem */
    /* Você pode usar isso como um overlay ou fundo de seções específicas */
}

/* Estilo do Cabeçalho Fixo */
#main-header {
    background-color: var(--primary-blue); /* Fundo do menu superior */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1030; /* Garante que o menu fique acima de outros elementos */
}

#main-header .navbar-brand img {
    /* Estilo da logo no menu */
    height: 50px; /* Tamanho da logo */
    filter: brightness(1.8); /* Ajusta o brilho da logo se ela for escura e você quiser destacá-la no fundo azul */
}

#main-header .navbar-nav .nav-link {
    color: var(--white) !important; /* Cor dos links do menu */
    font-weight: 400;
    padding: 0.8rem 1.2rem;
    transition: all 0.3s ease-in-out;
}

#main-header .navbar-nav .nav-link:hover,
#main-header .navbar-nav .nav-link.active {
    color: var(--accent-silver) !important; /* Cor ao passar o mouse ou item ativo */
}

/* Estilo para Dropdowns no Menu Superior */
#main-header .dropdown-menu {
    background-color: var(--primary-blue); /* Fundo do submenu */
    border: none;
    border-radius: 0;
}

#main-header .dropdown-menu .dropdown-item {
    color: var(--white);
    padding: 0.8rem 1.5rem;
    transition: background-color 0.3s ease-in-out;
}

#main-header .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Um leve destaque ao passar o mouse */
    color: var(--accent-silver);
}


/* Seção do Slide (apenas um placeholder visual por enquanto) */
#hero-slider {
    background-color: var(--dark-gray); /* Um cinza escuro temporário para o slide */
    padding-top: 150px; /* Espaçamento para não ficar atrás do header fixo */
    padding-bottom: 100px;
    min-height: 500px; /* Altura mínima para visualização */
    display: flex; /* Para centralizar o texto verticalmente */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center;
    background-image: url('https://via.placeholder.com/1500x500/0A1C3C/FFFFFF?text=Slide+PlaySteel+-+Imagem+1'); /* Imagem de placeholder */
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--white); /* Cor do texto no slide */
}

#hero-slider h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#hero-slider p {
    font-size: 1.5rem;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


/* Estilo do Rodapé */
#main-footer {
    background-color: var(--primary-blue);
    color: var(--white);
}

#main-footer img {
    filter: brightness(1.8); /* Ajusta o brilho da logo */
}

#main-footer .footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Traço branco mais suave */
    margin: 1.5rem 0;
}

#main-footer .list-unstyled li {
    margin-bottom: 0.5rem;
}

#main-footer .list-unstyled a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

#main-footer .list-unstyled a:hover {
    color: var(--accent-silver);
}

/* Estilo para Dropdown no Rodapé (Catálogo) */
#main-footer .dropdown-footer .dropdown-menu {
    background-color: var(--primary-blue); /* Fundo do submenu */
    border: none;
    border-radius: 0;
}

#main-footer .dropdown-footer .dropdown-item {
    color: var(--white);
    padding: 0.5rem 1rem;
}

#main-footer .dropdown-footer .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-silver);
}


/* Estilo dos Botões Flutuantes (Corrigido para o canto inferior direito e visibilidade do ícone) */
#back-to-top,
#whatsapp-button {
    position: fixed;
    bottom: 20px; /* Distância do fundo */
    right: 20px; /* Distância da direita */
    width: 50px; /* Largura do botão */
    height: 50px; /* Altura do botão */
    display: flex; /* Para centralizar o ícone */
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Tamanho do ícone (ajuste se preferir maior ou menor) */
    color: var(--white); /* Cor do ícone - GARANTE A VISIBILIDADE */
    z-index: 1000; /* Garante que fiquem acima de outros elementos */
    opacity: 0; /* Inicia invisível */
    visibility: hidden; /* Inicia invisível */
    transition: all 0.3s ease-in-out;
    text-decoration: none; /* Garante que não tenha sublinhado se for um link */
}

#whatsapp-button {
    right: 80px; /* 80px à esquerda do botão de subir ao topo */
    background-color: #25D366; /* Cor do WhatsApp */
    border-color: #25D366;
}

#back-to-top {
    background-color: var(--primary-blue); /* Cor do botão subir ao topo */
    border-color: var(--primary-blue);
}

#back-to-top i, #whatsapp-button i {
    color: var(--white); /* Força a cor branca para os ícones */
}

/* Media Queries para responsividade do rodapé (opcional, mas bom para organização) */
@media (min-width: 768px) {
    #main-footer .footer-column {
        border-right: 1px solid rgba(255, 255, 255, 0.1); /* Traços verticais */
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #main-footer .footer-column:last-child {
        border-right: none;
    }
}

/* Ajustes para o Carrossel */
#hero-slider {
    padding-top: 0; /* Remove o padding do slide para que o carrossel ocupe a altura total */
    min-height: auto; /* Deixa o Bootstrap controlar a altura */
    display: block; /* Volta para o display padrão */
    background-image: none; /* Remove a imagem de placeholder do CSS */
}

#carouselExampleCaptions {
    position: relative;
    width: 100%;
    /* Altura do carrossel, ajuste conforme desejar. Use 'vh' para altura relativa à viewport */
    /* ou um 'min-height' com 'max-height' para controle mais fino */
    height: 700px; /* Exemplo de altura fixa para o carrossel */
    overflow: hidden; /* Garante que nada transborde */
}

#carouselExampleCaptions .carousel-item {
    height: 100%; /* Faz o item ocupar 100% da altura do carrossel */
}

#carouselExampleCaptions .hero-img {
    object-fit: cover; /* Faz a imagem cobrir todo o espaço, cortando se necessário */
    height: 100%; /* A imagem ocupa 100% da altura do item */
    width: 100%; /* A imagem ocupa 100% da largura do item */
    filter: brightness(0.6); /* Escurece a imagem para o texto se destacar, ajuste de 0 a 1 */
}

#carouselExampleCaptions .carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100px; /* Desce a legenda para não colidir com o menu */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra para o texto */
    color: var(--white);
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%); /* Degradê sutil na parte de baixo */
}

#carouselExampleCaptions .carousel-caption h1 {
    font-size: 4.5rem; /* Ajuste o tamanho do título */
    font-weight: 700;
    margin-bottom: 1rem;
}

#carouselExampleCaptions .carousel-caption p {
    font-size: 1.8rem; /* Ajuste o tamanho do parágrafo */
    font-weight: 300;
    max-width: 800px; /* Limita a largura do parágrafo */
    line-height: 1.5;
}

/* Responsividade para o Carrossel e Textos */
@media (max-width: 1200px) {
    #carouselExampleCaptions .carousel-caption h1 {
        font-size: 3.5rem;
    }
    #carouselExampleCaptions .carousel-caption p {
        font-size: 1.5rem;
    }
}

@media (max-width: 992px) {
    #carouselExampleCaptions {
        height: 500px; /* Altura menor para tablets */
    }
    #carouselExampleCaptions .carousel-caption h1 {
        font-size: 2.8rem;
    }
    #carouselExampleCaptions .carousel-caption p {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    #carouselExampleCaptions {
        height: 400px; /* Altura menor para celulares */
    }
    #carouselExampleCaptions .carousel-caption h1 {
        font-size: 2.2rem;
    }
    #carouselExampleCaptions .carousel-caption p {
        font-size: 1rem;
    }
    #carouselExampleCaptions .carousel-caption {
        padding-top: 80px; /* Ajuste o padding para celulares */
    }
}

@media (max-width: 576px) {
    #carouselExampleCaptions .carousel-caption h1 {
        font-size: 1.8rem;
    }
    #carouselExampleCaptions .carousel-caption p {
        font-size: 0.9rem;
    }
    #carouselExampleCaptions .carousel-caption {
        background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%); /* Mais escuro no celular */
    }
}

/* Cores de Fundo para Seções */
.bg-light-gray {
    background-color: var(--light-gray);
}

.text-primary-blue {
    color: var(--primary-blue) !important;
}

/* Estilo para os Cards de Produto */
.product-card {
    border: none;
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem arredondada não vaze */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.product-card:hover {
    transform: translateY(-5px); /* Efeito de levantar */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important; /* Sombra mais forte no hover */
}

.product-card .card-img-top {
    height: 200px; /* Altura fixa para as imagens dos produtos */
    object-fit: cover; /* Garante que a imagem preencha sem distorcer */
}

.product-card .card-body {
    padding: 1.5rem;
}

.product-card .card-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.product-card .btn-outline-primary {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    transition: all 0.3s ease-in-out;
}

.product-card .btn-outline-primary:hover {
    background-color: var(--primary-blue);
    color: var(--white);
    border-color: var(--primary-blue);
}

/* Estilo para o Modal de Cookies */
#cookieConsentModal .modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    background-color: var(--white);
    color: var(--dark-gray);
}

#cookieConsentModal .modal-header {
    background-color: var(--primary-blue);
    color: var(--white);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 1rem 1.5rem;
}

#cookieConsentModal .modal-title {
    font-weight: 600;
}

#cookieConsentModal .modal-body {
    padding: 1.5rem;
    line-height: 1.6;
}

#cookieConsentModal .modal-body a {
    color: var(--primary-blue);
    font-weight: 500;
}

#cookieConsentModal .modal-footer {
    border-top: none;
    padding: 1rem 1.5rem;
}

#cookieConsentModal .btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    transition: all 0.3s ease-in-out;
}

#cookieConsentModal .btn-primary:hover {
    background-color: var(--accent-silver);
    border-color: var(--accent-silver);
    color: var(--primary-blue);
}

#cookieConsentModal .btn-outline-secondary {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
    transition: all 0.3s ease-in-out;
}

#cookieConsentModal .btn-outline-secondary:hover {
    background-color: var(--dark-gray);
    color: var(--white);
}

/* Estilo para a Seção de Parallax Infinito Horizontal */
.parallax-section {
    background-image: url('../img/paralax.webp'); /* Sua imagem de fundo do folder */
    background-size: cover; /* Cobre a área */
    background-position: center;
    background-attachment: fixed; /* O efeito parallax: fundo fixo enquanto conteúdo rola */
    height: 200px; /* Altura da seção parallax */
    display: flex;
    align-items: center;
    overflow: hidden; /* Esconde o conteúdo que transborda horizontalmente */
    position: relative;
}

.parallax-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay escuro para o texto se destacar */
    z-index: 1;
}

.parallax-content {
    width: 100%;
    position: relative;
    z-index: 2;
    white-space: nowrap; /* Impede que o texto quebre linhas */
    animation: scrollParallax 60s linear infinite; /* Animação de rolagem */
}

/* Duplica o conteúdo para criar o loop infinito */
.parallax-text-wrapper {
    display: inline-block; /* Mantém os spans lado a lado */
}

.parallax-text {
    font-size: 2.5rem; /* Tamanho da fonte */
    font-weight: 700;
    color: var(--white);
    padding: 0 30px; /* Espaçamento entre as repetições do texto */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Animação de Rolagem Horizontal */
@keyframes scrollParallax {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* Rola até a metade para o loop parecer infinito */
}

/* Responsividade para o texto do Parallax */
@media (max-width: 992px) {
    .parallax-text {
        font-size: 1.8rem;
        padding: 0 20px;
    }
    .parallax-section {
        height: 150px;
    }
}

@media (max-width: 768px) {
    .parallax-text {
        font-size: 1.2rem;
        padding: 0 15px;
    }
    .parallax-section {
        height: 120px;
    }
    @keyframes scrollParallax {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); } /* Aumenta a velocidade para textos menores */
    }
}

@media (max-width: 576px) {
    .parallax-text {
        font-size: 0.9rem;
        padding: 0 10px;
    }
    .parallax-section {
        height: 100px;
    }
}

/* Estilo para a Seção de Depoimentos */
#testimonials-carousel {
    background-color: var(--white); /* Fundo branco para contrastar */
}

.testimonial-card {
    background-color: var(--light-gray); /* Fundo do card do depoimento */
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex; /* Para centralizar o conteúdo verticalmente dentro do card */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

.testimonial-card .quote-icon {
    font-size: 2.5rem;
    color: var(--accent-silver); /* Cor do ícone de aspas */
}

.testimonial-card p {
    font-style: italic;
    color: var(--dark-gray);
    font-size: 1.1rem;
}

.testimonial-card h6 {
    font-size: 1rem;
    margin-top: 1rem;
}

/* Esconder os controles de navegação do carrossel em telas muito pequenas */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
    width: 5%; /* Reduz a largura dos botões de controle */
    opacity: 0.8;
}

/* Ajustes de responsividade para depoimentos */
@media (max-width: 767.98px) {
    /* Em telas pequenas, mostrar apenas 1 depoimento por vez */
    #testimonialCarousel .carousel-inner .carousel-item > .row > [class*='col-'] {
        display: block; /* Volta para display block para ocupar 100% da largura */
        width: 100%;
        max-width: 400px; /* Limita a largura do card para não ficar muito largo */
        margin-left: auto;
        margin-right: auto;
    }

    #testimonialCarousel .carousel-inner .carousel-item.active {
        display: flex; /* Mantém o item ativo flexível */
        justify-content: center; /* Centraliza o card ativo */
    }

    /* Oculta os outros depoimentos quando a tela é pequena */
    #testimonialCarousel .carousel-inner .carousel-item:not(.active) .row > [class*='col-']:not(:first-child) {
        display: none;
    }
}

/* Títulos Globais */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif; /* Mantenha Roboto para títulos ou considere uma segunda fonte */
    font-weight: 700; /* Títulos mais impactantes */
    color: var(--primary-blue); /* Cor azul para os títulos */
    margin-bottom: 1.5rem; /* Espaçamento padrão abaixo dos títulos */
}

h1 { font-size: 3.5rem; } /* Tamanho maior para o título principal da página (se não estiver no slide) */
h2 { font-size: 2.5rem; } /* Títulos de seção */
h3 { font-size: 2rem; }
/* ... e assim por diante para h4, h5, h6 se for usá-los */

/* Espaçamento entre Seções */
section {
    padding: 6rem 0; /* Aumenta o padding vertical das seções para dar mais 'respiro' */
}

/* Ajustes no Header */
#main-header .navbar-nav .nav-link {
    padding: 1rem 1.5rem; /* Aumenta o padding dos links do menu para mais 'respiro' */
}

/* Ajustes no Carrossel (Hero Slider) */
#carouselExampleCaptions {
    height: 700px; /* Ajusta a altura do carrossel para mais impacto */
}

#carouselExampleCaptions .carousel-caption {
    padding-top: 150px; /* Desce um pouco mais a legenda */
}

#carouselExampleCaptions .carousel-caption h1 {
    font-size: 5rem; /* Título maior no slide */
    margin-bottom: 1.5rem;
}

#carouselExampleCaptions .carousel-caption p {
    font-size: 2rem; /* Parágrafo maior no slide */
    margin-top: 1rem;
}

/* Ajustes para os Cards de Produto */
.product-card .card-body {
    padding: 2rem; /* Aumenta o padding interno dos cards */
}

.product-card .card-title {
    font-size: 1.8rem; /* Título maior para os produtos */
    margin-bottom: 1.2rem;
}

.product-card .card-text {
    line-height: 1.7; /* Melhora a legibilidade do texto nos cards */
    min-height: 80px; /* Garante que todos os cards tenham altura de texto similar */
}

/* Ajustes na Seção de Parallax */
.parallax-section {
    height: 350px; /* Aumenta a altura da seção parallax */
}

.parallax-text {
    font-size: 3rem; /* Texto maior na parallax */
    padding: 0 40px;
}

/* Ajustes nos Depoimentos */
#testimonials-carousel {
    padding: 6rem 0; /* Consistent padding */
}

.testimonial-card {
    padding: 2.5rem !important; /* Mais padding interno nos depoimentos */
}

.testimonial-card p {
    font-size: 1.2rem; /* Texto maior nos depoimentos */
    line-height: 1.8;
}

.testimonial-card h6 {
    font-size: 1.1rem;
}

/* Ajustes no Rodapé */
#main-footer {
    padding: 4rem 0; /* Aumenta o padding do rodapé */
}

#main-footer .footer-column h5 {
    color: var(--accent-silver); /* Títulos das colunas em prata/cinza para contraste */
    margin-bottom: 1.5rem;
}

#main-footer .list-unstyled li {
    margin-bottom: 0.8rem; /* Aumenta espaçamento entre itens da lista */
}

#main-footer .list-unstyled a {
    color: var(--white);
    font-size: 0.95rem;
}

/* Responsividade Geral - Acompanhando os novos tamanhos */
@media (max-width: 1200px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }
    #carouselExampleCaptions .carousel-caption h1 { font-size: 4rem; }
    #carouselExampleCaptions .carousel-caption p { font-size: 1.8rem; }
    .parallax-text { font-size: 2.5rem; }
}

@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    section { padding: 4rem 0; } /* Ajusta padding para telas menores */
    #carouselExampleCaptions { height: 600px; }
    #carouselExampleCaptions .carousel-caption h1 { font-size: 3.2rem; }
    #carouselExampleCaptions .carousel-caption p { font-size: 1.5rem; }
    .parallax-text { font-size: 1.8rem; }
    .testimonial-card p { font-size: 1.1rem; }
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    section { padding: 3rem 0; }
    #carouselExampleCaptions { height: 450px; }
    #carouselExampleCaptions .carousel-caption h1 { font-size: 2.5rem; }
    #carouselExampleCaptions .carousel-caption p { font-size: 1.2rem; }
    .parallax-text { font-size: 1.4rem; }
    .testimonial-card p { font-size: 1rem; }
    .product-card .card-text { min-height: auto; } /* Remove min-height em mobile */
}

@media (max-width: 576px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    #carouselExampleCaptions { height: 350px; }
    #carouselExampleCaptions .carousel-caption h1 { font-size: 2rem; }
    #carouselExampleCaptions .carousel-caption p { font-size: 1rem; }
    .parallax-text { font-size: 1.1rem; }
    .testimonial-card p { font-size: 0.9rem; }
}

/* Estilo para Cabeçalhos de Páginas Internas (Ex: Quem Somos) */
.page-header-section {
    position: relative;
    height: 400px; /* Altura do banner */
    background-size: cover;
    background-position: center;
    margin-top: 80px; /* Espaçamento para o cabeçalho fixo */
    display: flex; /* Para centralizar o título */
    flex-direction: column;
    justify-content: center;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7); /* Sombra no título */
    overflow: hidden; /* Garante que nada vaze */
}

.page-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay escuro para o texto */
    z-index: 1;
}

.page-header-section h1 {
    color: var(--white);
    font-size: 4rem;
    z-index: 2; /* Garante que o título fique acima do overlay */
}

/* Estilo para a Seção de História */
#historia-section img {
    max-height: 400px;
    object-fit: cover;
}

/* Estilo para Visão, Missão e Valores Cards */
#valores-section .card {
    border: none;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#valores-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

#valores-section .card-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

#valores-section .card-text {
    line-height: 1.7;
}

/* Estilo para o Box dos 10 Princípios */
.principles-box {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 3rem !important;
    border-radius: 15px; /* Cantos arredondados */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra suave */
}

.principles-box h2 {
    color: var(--white); /* Título dos princípios em branco */
}

.principles-box .principles-list {
    padding-left: 0; /* Remove padding padrão de lista */
    list-style: none; /* Remove marcadores de lista padrão */
}

.principles-box .principle-item {
    font-size: 1.2rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, color 0.3s ease-in-out;
    cursor: pointer;
}

.principles-box .principle-item:last-child {
    border-bottom: none; /* Remove a linha do último item */
}

.principles-box .principle-item i {
    color: var(--accent-silver); /* Cor do ícone de check */
}

/* Efeito ao passar o mouse nos princípios */
.principles-box .principle-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil */
    transform: translateX(10px); /* Move ligeiramente para a direita */
    color: var(--accent-silver); /* Muda a cor do texto */
}

.principles-box .principle-item:hover i {
    color: var(--white); /* Muda a cor do ícone no hover */
}


/* Responsividade para quem_somos.html */
@media (max-width: 992px) {
    .page-header-section {
        height: 300px;
    }
    .page-header-section h1 {
        font-size: 3rem;
    }
    #historia-section .col-md-6.order-md-2 {
        order: 1 !important; /* Inverte a ordem da imagem e texto em telas menores */
    }
    #historia-section .col-md-6.order-md-1 {
        order: 2 !important;
    }
    .principles-box {
        padding: 2rem !important;
    }
    .principles-box .principle-item {
        font-size: 1.1rem;
        padding: 0.6rem 0;
    }
}

@media (max-width: 768px) {
    .page-header-section {
        height: 250px;
        margin-top: 70px;
    }
    .page-header-section h1 {
        font-size: 2.5rem;
    }
    .principles-box .principle-item {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .page-header-section {
        height: 200px;
        margin-top: 60px;
    }
    .page-header-section h1 {
        font-size: 2rem;
    }
    .principles-box .principle-item {
        font-size: 0.9rem;
    }
}