/* === GERAL & RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* Para facilitar unidades rem */
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333333; /* Texto Principal */
    background-color: #F9FAFB; /* Fundo Claro */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* === TIPOGRAFIA === */
/* === TIPOGRAFIA === */
h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #4f378b; /* Primary */
    line-height: 1.3;
}

h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 0.75em; font-weight: 700; /* Já é centralizado pelo .banner-content */}
h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1em;
    text-align: center; /* <<< ADICIONE OU GARANTA QUE ESTÁ AQUI */
}
h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: 0.5em; /* Geralmente alinhado à esquerda nos cards */ }

/* Se você tiver uma regra mais específica para os títulos de seção, ajuste lá: */
.content-section h2 {
    /* font-size: clamp(1.8rem, 4vw, 2.5rem);  (Já definido acima) */
    /* margin-bottom: 35px; (Já definido acima como 1em) */
    /* color: #1E3A5F; (Já definido acima como #4f378b) */
    text-align: center; /* <<< GARANTA AQUI TAMBÉM PARA PREVALECER */
}

p {
    margin-bottom: 1.25em;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: #555555; /* Texto Secundário */
}
.section-subtitle {
    font-size: 18px;
    color: #555555;
    max-width: 700px;
    margin: -0.5em auto 2.5em auto; /* Ajuste para ficar mais perto do H2 */
    text-align: center;
}

a {
    color: #1dbdc5; /* Secondary */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #36ba98; /* Accent */
}

/* === BOTÕES CTA === */
.cta-button {
    display: inline-block;
    padding: 0.8em 1.8em;
    border-radius: 50px; /* Bem arredondado */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-button.primary-cta {
    background-color: #4f378b; /* Primary */
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(79, 55, 139, 0.3);
}
.cta-button.primary-cta:hover {
    background-color: #3e2a70; /* Primary mais escuro */
    box-shadow: 0 6px 16px rgba(79, 55, 139, 0.4);
    transform: translateY(-2px);
}

.cta-button.secondary-cta {
    background-color: transparent;
    color: #1dbdc5; /* Secondary */
    border-color: #1dbdc5;
}
.cta-button.secondary-cta:hover {
    background-color: #1dbdc5;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.cta-button.accent-cta {
    background-color: #F68A1E; /* Accent */
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(246, 138, 30, 0.3);
}
.cta-button.accent-cta:hover {
    background-color: #e07b1c; /* Accent mais escuro */
    box-shadow: 0 6px 16px rgba(246, 138, 30, 0.4);
    transform: translateY(-2px);
}

.cta-button.large-cta {
    padding: 1em 2.5em;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

/* === HEADER & VÍDEO BANNER === */
.site-header {
    height: 100vh;
    min-height: 450px; /* Altura mínima para mobile */
    position: relative;
    display: flex; /* Para centralizar banner-content se necessário */
    align-items: end;
    justify-content: center;
    display: flex;
}

.video-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover; /* Garante que o vídeo cubra a área */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(79, 55, 139, 0.85), rgba(29, 189, 197, 0.65)); /* Primary e Secondary com transparência */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-content {
    color: #fff;
    max-width: 750px; /* Ajuste conforme necessário */
    padding: 20px;
    z-index: 3;
}
.banner-content h1 { color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.banner-content p { color: #e0e0e0; opacity: 0.95; font-size: clamp(1rem, 3vw, 1.5rem); margin-bottom: 1.8em;}

/* === NAVEGAÇÃO === */
#main-nav {
    background-color: #FFFFFF;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 0.8rem 0; /* Ajuste de padding */
}
#main-nav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
#nav-placeholder { height: 0; }

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link .logo-svg {
    height: 35px; /* Ajuste o tamanho do logo */
    width: auto;
    display: block;
}

#nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}
#nav-menu li { margin-left: 1.5rem; /* Espaçamento entre itens no desktop */ }
.nav-link {
    color: #4f378b; /* Primary */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.2rem;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #36ba98; /* Accent */
    transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: #36ba98; /* Accent */ }

/* Menu Hamburguer (Mobile) */
.nav-toggle {
    display: none; /* Escondido por padrão, aparece no mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Acima do menu */
}
.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #4f378b; /* Primary */
    position: relative;
    transition: transform 0.3s ease;
}
.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: #4f378b; /* Primary */
    left: 0;
    transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Estado Ativo do Hamburguer (X) */
.nav-toggle[aria-expanded="true"] .hamburger { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
.nav-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); bottom: 0; }


/* === SEÇÕES DE CONTEÚDO === */
.content-section {
    padding: 3rem 0; /* Menor padding no mobile */
}
.alt-bg {
    background-color: #FFFFFF;
}

/* Seção Sobre Nós (Plataforma) */
.platform-overview {
    display: flex;
    flex-direction: column; /* Mobile first */
    align-items: center;
    gap: 2rem;
}
.platform-text p { text-align: left; }
.platform-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 5px 15px rgba(79, 55, 139, 0.1); */
}

/* Funcionalidades IA */
.features-ia-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: 1 coluna */
    gap: 1.8rem;
    margin-top: 2rem;
}
.feature-ia-item {
    background-color: #FFFFFF;
    padding: 1.8rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(79, 55, 139, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid #1dbdc5; /* Secondary */
}
.feature-ia-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(79, 55, 139, 0.12);
}
.feature-ia-icon {
    margin-bottom: 1rem;
    color: #4f378b; /* Primary */
}
.feature-ia-icon svg {
    width: 40px; /* Tamanho dos ícones */
    height: 40px;
}
.feature-ia-item h3 { color: #4f378b; font-size: 1.3rem; } /* Primary */
.feature-ia-item p { font-size: 0.9rem; }

/* Seção Planos */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: 1 coluna */
    gap: 2rem;
    margin-top: 2rem;
}
.pricing-plan {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(79, 55, 139, 0.1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(79, 55, 139, 0.15);
}
.pricing-plan.recommended {
    border: 2px solid #4f378b; /* Primary */
    position: relative;
    padding-top: 32px; /* Espaço para o badge */
}
.recommended-badge {
    position: absolute;
    top: -1px; /* Ajuste para alinhar com a borda */
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #F68A1E; /* Accent */
    color: #FFFFFF;
    padding: 0.4em 1.2em;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}
.plan-header { margin-bottom: 1.5rem; }
.plan-header h3 { color: #4f378b; font-size: 1.7rem; }
.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #4f378b; /* Primary */
    margin: 0.5rem 0;
}
.plan-price span { font-size: 1.2rem; font-weight: 400; vertical-align: super; margin-right: 2px;}
.plan-price .plan-period { font-size: 0.9rem; font-weight: 400; color: #555555; vertical-align: baseline; }
.plan-description { font-size: 0.9rem; color: #555555; min-height: 3em; }

.plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: left;
    flex-grow: 1; /* Para que o botão fique sempre no final */
}
.plan-features li {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start; /* Para ícones e texto multilinha */
}
.check-icon {
    color: #1dbdc5; /* Secondary */
    margin-right: 0.6rem;
    font-weight: bold;
    flex-shrink: 0; /* Para o ícone não encolher */
}
.plan-cta { width: 100%; margin-top: auto; /* Botão no final */ }
.custom-plan-note { text-align: center; margin-top: 4rem; font-size: 16px; }
.custom-plan-note a { font-weight: 500; }

/* Seção CTA Final */
.cta-final-section {
    background-color: #4f378b; /* Primary */
    color: #FFFFFF;
    padding: 3rem 0;
}
.cta-final-section h2 { color: #FFFFFF; }
.cta-final-section p { color: #e0e0e0; max-width: 650px; margin-left: auto; margin-right: auto; }
.cta-final-section .cta-button { margin-top: 1.5rem; }


/* === FOOTER === */
footer {
    background-color: #0a0e13; /* Um cinza bem escuro, quase preto */
    color: #a0aec0; /* Cinza azulado claro */
    padding: 3rem 0 1rem 0; /* Padding maior no topo */
    font-size: 0.9rem;
}
.footer-content {
    display: flex;
    flex-direction: column; /* Mobile first */
    text-align: center;
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-logo .logo-svg {
    height: 40px;
    margin: 0 auto 0.5rem auto; /* Centralizar logo */
}
.footer-logo p { font-size: 0.85rem; color: #718096; }

.footer-links h4, .footer-contact h4 {
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.footer-links ul { list-style: none; padding: 0; }
.footer-links ul li a {
    color: #a0aec0;
    display: block;
    padding: 0.3rem 0;
    transition: color 0.2s ease;
}
.footer-links ul li a:hover { color: #1dbdc5; /* Secondary */ }
.footer-contact p { margin-bottom: 0.5rem; font-size: 0.9rem; }

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #2d3748; /* Linha sutil */
    font-size: 0.85rem;
    color: #718096;
}

/* === MEDIA QUERIES (Desktop e Telas Maiores) === */
@media (min-width: 768px) {
    .content-section { padding: 4rem 0; }
    .cta-final-section { padding: 4rem 0; }
    footer { padding: 4rem 0 2rem 0; }

    .nav-toggle { display: none; } /* Esconde hamburguer no desktop */
    #nav-menu {
        display: flex; /* Menu volta a ser flex horizontal */
        flex-direction: row;
        position: static;
        background-color: transparent;
        width: auto;
        transform: none;
        padding: 0;
    }
    #nav-menu li { margin-left: 2rem; }

    .platform-overview {
        flex-direction: row;
        gap: 3rem;
    }
    .platform-text, .platform-image { flex: 1; }
    .platform-text { text-align: left; }

    .features-ia-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    .footer-logo, .footer-links, .footer-contact {
        flex: 1;
        margin-bottom: 0; /* Remove margem do mobile */
    }
    .footer-logo .logo-svg { margin: 0 0 0.5rem 0; } /* Alinhar à esquerda */
}

@media (min-width: 992px) {
    .features-ia-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas em desktop */
    }
    .pricing-plan.recommended {
        transform: scale(1.05); /* Destaca mais o recomendado */
    }
    .pricing-plan.recommended:hover {
        transform: scale(1.08) translateY(-10px);
    }
}

/* ... outros estilos de #main-nav ... */

/* Estilos para o Menu Mobile (quando #nav-menu.active) */
@media (max-width: 767px) { /* Aplicar somente em telas menores que o breakpoint do desktop */
    .nav-toggle { display: block; /* Mostra o botão hamburguer */ }

    #nav-menu {
        display: none; /* Escondido por padrão */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Abaixo do header da navegação */
        left: 0;
        width: 100%;
        background-color: #FFFFFF; /* Fundo do menu mobile */
        padding: 1rem 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-top: 1px solid #e0e0e0;
    }
    #nav-menu.active {
        display: flex; /* Mostra quando ativo */
    }

    #nav-menu li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .nav-link {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }
    #nav-menu li:last-child .nav-link { border-bottom: none; }
    .nav-link::after { display: none; /* Remove sublinhado no mobile */ }
    .nav-link:hover, .nav-link.active {
        background-color: #f8f8f8; /* Fundo suave no hover/ativo mobile */
        color: #F68A1E; /* Accent */
    }
}

/* ... (código CSS anterior) ... */

/* === HEADER & VÍDEO BANNER === */
.site-header {
    height: 100vh;
    min-height: 450px;
    position: relative;
    /* display: flex;  Removido, pois video-overlay já cuida do alinhamento */
    /* align-items: center; */
    /* justify-content: center; */
}

.video-banner {
    position: absolute; /* Mudança para absolute para garantir que ocupe o site-header */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgb(0 0 0 / 30%), rgb(0 0 0 / 30%));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Garante que o conteúdo do banner-content seja centralizado */
}

.banner-content.container { /* Garante que o banner-content use a largura do container mas centralize o texto */
    max-width: 850px;
    /* text-align: center; já está no video-overlay */
}


/* === SEÇÕES DE CONTEÚDO - AJUSTES PARA IMAGENS === */

/* Seção Sobre Nós (Plataforma) */
.platform-image img {
    width: 100%; /* Garante que a imagem seja responsiva dentro do seu container */
    max-width: 450px; /* Limita o tamanho máximo da imagem */
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 5px 15px rgba(79, 55, 139, 0.1); */
    margin: 0 auto; /* Centraliza a imagem se for menor que o container */
    display: block;
}

/* Imagem Introdutória para Funcionalidades IA */
.intro-feature-image {
    text-align: center; /* Centraliza a imagem */
    margin-bottom: 2.5rem; /* Espaçamento abaixo da imagem */
}
.intro-feature-image img {
    max-width: 100%;
    width: 600px; /* Defina uma largura máxima desejada */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(79, 55, 139, 0.1);
}

/* Imagem de Destaque para Planos */
.plan-feature-image {
    text-align: center;
    margin-bottom: 2.5rem; /* Espaçamento antes do grid de preços */
}
.plan-feature-image img {
    max-width: 100%;
    width: 700px; /* Defina uma largura máxima desejada */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(79, 55, 139, 0.1);
}


/* Seção CTA Final */
.cta-final-section .container {
    text-align: center; /* Garante que todo o conteúdo dentro do container seja centralizado */
}

.cta-final-section h2 {
    color: #FFFFFF;
}
.cta-final-section p {
    color: #e0e0e0;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto; /* Já centraliza o parágrafo se for menor que o container */
}
.cta-final-section .cta-button {
    margin-top: 1.5rem;
    /* Não precisa de display: block e margin: auto aqui se o .container já tem text-align: center */
}


/* === MEDIA QUERIES (Desktop e Telas Maiores) === */
/* ... (demais media queries) ... */

@media (min-width: 768px) {
    /* ... (outros estilos para 768px) ... */
    .site-header {
        /* Se precisar de ajustes de altura específicos para desktop no header */
    }
}

/* ... (todo o seu CSS anterior) ... */

/* === ANIMAÇÕES ON SCROLL === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Começa um pouco abaixo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--animation-delay, 0s); /* Usa a variável de delay ou 0s por padrão */
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Para animações de filhos dentro de um container já animado */
.animate-on-scroll.is-visible .animate-on-scroll-child {
    opacity: 0; /* Começa invisível */
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
    animation-delay: var(--animation-delay, 0s); /* Usa a variável CSS para delay */
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustes para imagens dentro de seções com animação */
.intro-feature-image, .plan-feature-image {
    /* A animação .animate-on-scroll-child já cuidará disso se aplicada ao container da imagem */
}


/* ... (todo o seu CSS anterior, incluindo o de animação on scroll) ... */
.carousel-container {
    display: flex;
    flex-wrap: wrap;
}

.carousel-slides {
    display: flex;
    gap: 20px; /* Espaçamento entre os slides */
    justify-content: flex-end;
    flex-wrap: wrap;
}

.carousel-slide {
    width: 300px;
}


.arrow {
  /* text-align: center; */
  margin: 2% 0;
  z-index: 9999;
  display: flex;
  justify-content: end;
  color: white;
  cursor: pointer;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.card-container {
    display: grid;
    /* 
      Para ocupar "3 espaços de largura no grid de 12 colunas",
      significa que cada card ocupa 3/12 = 1/4 da largura.
      Portanto, teremos 4 colunas.
      Usamos repeat(auto-fill, minmax(250px, 1fr)) para responsividade,
      mas para forçar 4 colunas em telas maiores, e menos em menores:
    */
    grid-template-columns: repeat(4, 1fr); /* 4 colunas de largura igual */
    gap: 20px; /* Espaçamento entre os cards */
    max-width: 1200px; /* Opcional: define uma largura máxima para o container */
    margin: 0 auto; /* Opcional: centraliza o container */
}

.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem não ultrapasse as bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%; /* Faz a imagem ocupar toda a largura do card */
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer, cortando se necessário */
    display: block; /* Remove espaço extra abaixo da imagem */
}

.card-content {
    padding: 15px;
}

.card-content p {
    font-size: 0.9em;
    line-height: 1.4;
    color: #555;
}

/* Media Queries para Responsividade */

/* Telas Médias (ex: tablets) - 2 colunas */
@media (max-width: 992px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Telas Pequenas (ex: smartphones) - 1 coluna */
@media (max-width: 576px) {
    .card-container {
        grid-template-columns: 1fr; /* Uma coluna */
    }
    .card img {
        height: auto; /* Deixa a altura da imagem ser automática em telas pequenas */
    }
}

.card-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333; /* Cor do título */
    margin-bottom: 16px;
}


.logo-carousel-container {
    width: 100%; /* Ajuste conforme necessário, ou use um valor fixo como 900px */
    overflow: hidden; /* Essencial para o efeito de carousel */
    position: relative;
    padding: 20px 0;
    /* border: 1px solid #ddd; */
    background-color: #fff;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}

.logo-track {
    display: flex;
    transition: transform 0.7s ease-in-out; /* Transição suave para o movimento */
}

.logo-item {
    flex: 0 0 auto; /* Não permite que os itens encolham ou cresçam */
    width: 150px;   /* Largura de cada logo */
    height: 80px;   /* Altura de cada logo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px; /* Espaçamento entre logos */
    box-sizing: border-box;
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1); /* Padrão: preto e branco */
    transition: filter 0.5s ease, transform 0.5s ease; /* Transição para cor e escala */
    opacity: 0.7; /* Um pouco de opacidade para os não ativos */
}

.logo-item.active img {
    filter: grayscale(0); /* Logo do meio: colorido */
    transform: scale(1.15); /* Aumenta um pouco o logo do meio */
    opacity: 1;
}


#dev {
    height: 100%;
    width: 100%;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background-color: #24a;
    color: white !important;
}

#dev > h3 {
    color: white !important;
}


.display-block {
  display: block;
}
.display-none {
  display: none !important;
}