/* ===========================================================
   1. CSS Variables (mescladas e consolidadas)
   As variáveis abaixo definem as cores e estilos base.
=========================================================== */
:root {
    --bg-color: #121212;
    --bg-color-heder: #000000;
    --card-bg: #1e1e1e;
    --text-color: #f2f2f2;
    --primary-color: #2a3d75;
    --primary-color-hover: #212f5b;
    --secondary-color: #d67c26;
    --secondary-color-hover: #a55f1e;
    --btn-hover: #333;
    --border-color: #333;
    --hover-color: #333;
  }
  
  /* ===========================================================
     2. Global Styles & Reset
  =========================================================== */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Headings e Parágrafos */
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
  }
  
  /* Parágrafos com espaçamento e largura máxima */
  p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: auto;
  }
  
  /* ===========================================================
     3. Scrollbar Customizado
  =========================================================== */
  ::-webkit-scrollbar {
    width: 10px;  /* Rolagem vertical */
    height: 10px; /* Rolagem horizontal */
  }
  
  ::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-hover);
  }
  
  /* ===========================================================
     4. Navbar
  =========================================================== */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Garante que o header fique sobre outros elementos */
    background-color: var(--bg-color-heder); /* Exemplo de fundo */
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
  }
  
  .menu .logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
  }
  
  .menu-links {
    list-style: none;
    display: flex;
    gap: 20px;
  }
  
  .menu-links li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 400;
    transition: color 0.3s;
  }
  
  .menu-links li a:hover {
    color: #198640;
  }
  
  .menu-toggle {
    display: none;
  }
  
  /* ===========================================================
     5. Hero Section
  =========================================================== */
  .hero {
    width: 100%;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-color);
    margin-top: 20px;
  }
  
  .hero-container {
    display: flex;
    max-width: 1200px;
    margin-top: 30px;
    width: 100%;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .hero-image img {
    margin-bottom: 20px;
    width: 80%;
    max-width: 450px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  }
  
  .hero-text {
    flex: 1;
    max-width: 500px;
    text-align: left;
    margin-left: 20px;
  }
  
  .hero-text h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: bold;
  }
  
  .hero-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #ccc;
  }
  
  /* ===========================================================
     6. Botões & Transições
  =========================================================== */
  /* Transição aplicada a botões e links */
  button, a {
    transition: all 0.3s ease-in-out;
  }
  
  /* Estilo base dos botões (.btn) – OBS.: Quando houver declarações repetidas, 
     os valores definidos mais abaixo prevalecem */
  .btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: 0.3s ease-in-out;
  }
  
  /* Botões primários e secundários */
  .btn-primary {
    background: var(--primary-color);
    color: var(--text-color);
  }
  
  .btn-primary:hover {
    background: #1ebe5d;
  }
  
  .btn-secondary {
    background: var(--secondary-color);
    color: var(--text-color);
  }
  
  .btn-secondary:hover {
    background: var(--primary-color);
  }
  
  /* Botão WhatsApp */
  .btn-whatsapp {
    background-color: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .btn-whatsapp:hover {
    background-color: #1DB954;
  }
  
  /* Container de botões de CTA */
  .cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* ===========================================================
     7. Ícones de Redes Sociais
  =========================================================== */
  .social-media {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
  }
  
  .social-media a {
    color: var(--text-color);
    font-size: 1.5rem;
    transition: 0.3s;
  }
  
  .social-media a:hover {
    color: #25D366;
  }
  
  /* ===========================================================
     8. Seção de Serviços
  =========================================================== */
  .services {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
  }
  
  /* Títulos da seção de serviços – valores definidos abaixo prevalecem */
  .services h2 {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: center;
    color: #000000;
  }
  
  /* Container responsivo usando grid */
  .services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 15px auto;
  }
  
  /* ===============================
     Cards de Serviço Alinhados
     =============================== */
     .service-card,
     .service-category {
       /* Organiza os itens verticalmente e centraliza o conteúdo */
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
     
       /* Estilos básicos do card */
       background: white;
       border-radius: 12px;
       padding: 20px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
     }
     
     /* Efeito hover para os cards */
     .service-card:hover,
     .service-category:hover {
       transform: translateY(-5px);
       box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
     }
     
     /* ===============================
        Imagem do Card
        =============================== */
        .service-card img,
        .service-category img {
          /* A imagem ocupa 100% do contêiner, mas não ultrapassa 100px de largura */
          width: 100%;
          max-width: 221px !important;
          aspect-ratio: 121 / 83 !important;
          object-fit: cover; /* Garante que a imagem se ajuste sem distorção */
          border-radius: 10px;
          margin-bottom: 15px;
        }
        
     
     /* ===============================
        Título e Descrição
        =============================== */
     .service-card h3,
     .service-category h3 {
       font-size: 1.3rem;
       margin-bottom: 10px;
       color: #212121;
     }
     
     .service-card p,
     .service-category p {
       font-size: 1rem;
       color: #555;
       margin-bottom: 15px;
     }
     
     /* ===============================
        Botão de Ação
        =============================== */
     /* Ao usar margin-top: auto, o botão é empurrado para o final do card */
     .service-card .btn,
     .service-category .btn {
       margin-top: auto;
       display: inline-block;
       padding: 10px 20px;
       background: var(--primary-color); /* Use sua variável ou cor desejada */
       color: var(--text-color);
       border-radius: 8px;
       text-decoration: none;
       transition: background 0.3s ease, transform 0.2s ease;
     }
     
     .service-card .btn:hover,
     .service-category .btn:hover {
       background: var(--btn-hover); /* Valor definido mais abaixo prevalece */
       transform: scale(1.05);
     }
     
  
     /* Container principal: utiliza flex para alinhar a imagem e o conteúdo */
    .about-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 40px;
      padding: 40px;
      background: #000000; /* Fundo suave para contraste com o texto */
    }
  
    /* Imagem: centralizada, com borda arredondada e sombra para destaque */
    .about-image {
      flex: 1 1 300px;
      text-align: center;
    }
  
    .about-image img {
      width: 100%;
      max-width: 350px;
      border-radius: 10px;
    }
  
    /* Conteúdo textual: alinhamento à esquerda e tipografia aprimorada */
    .about-content {
      flex: 1 1 300px;
      text-align: left;
      color: var(--text-color);
    }
  
    .about-content h2 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: var(--primary-color); /* Cor principal para destacar o título */
    }
  
    .about-content p {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 15px;
    }
  
  
  /* ===========================================================
     9. Testimonials (Tema Dark)
  =========================================================== */
  
/* Seção de depoimentos com tema dark */
.testimonials {
  background: #121212;
  padding: 50px 20px;
  text-align: center;
  color: #f5f5f5;
  overflow: hidden;
}

.testimonials h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  text-transform: uppercase;
}

/* Container do slider */
.slider {
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
}

/* Container dos slides */
.slides {
  display: flex;
  width: 100%;
  /* Supondo que cada slide ficará 3 segundos, o tempo total será: 3s * número_de_slides */
  animation: slideAnimation 9s infinite; /* Neste exemplo, 3 slides = 9s total */
}

/* Cada slide exibirá 4 imagens em grid (2 colunas x 2 linhas) */
.slide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  min-width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* Estilização dos cartões de depoimentos */
.testimonial-card {
  background: var(--bg-color);
  
  overflow: hidden;
}

.testimonial-card img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

/* Animação para deslizar entre os slides */
/* 
   Neste exemplo, a animação assume 3 slides:
   - 0% a 33.33%: primeiro slide visível
   - 33.33% a 44.44%: transição para o segundo slide
   - 44.44% a 77.77%: segundo slide visível
   - 77.77% a 88.88%: transição para o terceiro slide
   - 88.88% a 100%: terceiro slide visível
   Ajuste os tempos se a quantidade de slides for diferente.
*/
/* @keyframes slideAnimation {
  0% { transform: translateX(0%); }
  33.33% { transform: translateX(0%); }
  44.44% { transform: translateX(-100%); }
  77.77% { transform: translateX(-100%); }
  88.88% { transform: translateX(-200%); }
  100% { transform: translateX(-200%); }
} */

@keyframes slideAnimation {
  0% { transform: translateX(0%); }
  45% { transform: translateX(0%); }
  55% { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}


.testimonials-celulares {
  text-align: center;
  background-color: var(--bg-color);
  padding: 40px 0;
  color: #fff;
}

.slider-celular {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slides-celular {
  display: flex;
  transition: transform 0.5s ease;
}

.slide-celular {
  display: flex;
  flex: 0 0 100%; /* Garante que cada slide ocupe 100% da largura */
  justify-content: center; /* Alinha as imagens no centro */
  align-items: center;
}

.testimonial-card-celular {
  margin: 0 10px;
  max-width: 100%; /* Assegura que a imagem se ajuste ao slide */
  display: flex;
  justify-content: center;
}

.testimonial-card-celular img {
  width: 100%; /* As imagens ocupam toda a largura do slide */
  max-width: 400px; /* Ajuste para não ficar maior que 400px */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

  
  /* ===== Seção FAQ - Tema Claro ===== */
  .faq {
    background: var(--text-color);               /* Fundo claro */
    color: #333;                    /* Texto escuro para boa legibilidade */
    padding: 60px 20px;
  }
  
  .faq h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--primary-color);                 /* Cor de destaque para o título */
  }
  
  /* Container centralizado e com largura máxima */
  .faq-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* Estilo de cada item de FAQ */
  .faq-item {
    border-bottom: 1px solid var(--text-color);
    padding: 20px 0;
    transition: background 0.3s ease;
  }
  
  .faq-item:last-child {
    border-bottom: none;
  }
  
  /* Botão da pergunta */
  .faq-question {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    transition: background 0.3s ease;
  }
  
  .faq-question:hover {
    background: #f9f9f9;
  }
  
  /* Ícone da pergunta com animação de rotação */
  .faq-question .icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
  }
  
  /* Quando o item está ativo, rotaciona o ícone */
  .faq-item.active .faq-question .icon {
    transform: rotate(45deg);
  }
  
  /* Estilo da resposta: com transição suave para expandir */
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 0 15px;
  }
  
  .faq-item.active .faq-answer {
    opacity: 1;
    max-height: 300px;  /* Valor que acomode o conteúdo */
    padding: 15px;
  }
  
  .faq-answer p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
  }
  
  
  /* ===== Seção Parceiros + Rodapé ===== */
  .partners-footer {
    background: #121212;  /* Preto suave para o fundo */
    color: var(--text-color);
    padding: 60px 20px;
    text-align: center;
  }
    .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background: var(--bg-color-header);
      color: var(--text-color);
      flex-wrap: wrap;
      text-align: center;
      gap: 100px;
  
  }
  
  /* ===== Estilização dos Parceiros ===== */
  .partners-container h2 {
    font-size: 2.5rem;
    color: var(--primary-color); /* Cor azul para destaque */
    margin-bottom: 30px;
  }
  
  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
  }
  
  .partner img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .partner img:hover {
    transform: scale(1.1);
  }
  
  /* ===== Estilização do Rodapé ===== */
  .footer {
    border-top: 1px solid #333; /* Linha sutil separando */
    padding-top: 20px;
  }
  
  .contact-info p {
    font-size: 1rem;
    margin: 5px 0;
    color: #ccc;
  }
  
  .contact-info i {
    color: var(--primary-color);
    margin-right: 10px;
  }
  
  .social-media {
    margin-top: 15px;
  }
  
  .social-media a {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: color 0.3s ease, transform 0.3s ease;
  }
  
  .social-media a:hover {
    color: var(--text-color);
    transform: scale(1.2);
  }
  
  
  
  
  /* ===========================================================
     10. Partners
  =========================================================== */
  
  .marquee {
    width: 100%;
    overflow: hidden;
  }
  
  .marquee__inner {
    display: flex;
    /* Como duplicamos os logos, definimos a largura total como o dobro */
    width: calc(200%);
    animation: scroll 20s linear infinite;
  }
  
  .partners {
    background: var(--text-color);
    overflow: hidden; /* Oculta a rolagem */
    position: relative;
    padding: 50px 20px;
    text-align: center;
  }
  
  .partners h2 {
    font-size: 2rem;
    color: #222;
    margin-bottom: 30px;
    font-weight: bold;
  }
  
  /* Grid de parceiros */
  .partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  
  .partner {
    flex: 0 0 auto; /* Garante que os itens não encolham */
    width: 150px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .partner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
  }
  
  .partner img:hover {
    transform: scale(1.1);
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%); /* Move 50% da largura total, equivalente a uma sequência completa */
    }
  }
  
  
  /* ===========================================================
     12. Serviços Carousel (Adicionais)
  =========================================================== */
  .services-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--primary-color) var(--text-color); /* Firefox */
  }
  
  .services-carousel::-webkit-scrollbar {
    height: 8px;
  }
  
  .services-carousel::-webkit-scrollbar-track {
    background: var(--text-color);
    border-radius: 10px;
  }
  
  .services-carousel::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
  }
  
  .services-carousel::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
  }
  
  /* ===========================================================
     13. Responsive Styles
  =========================================================== */
  .testimonials-celulares {
    display: none;
  }
  
  @media screen and (max-width: 768px) {
    .testimonials-computadores{
      display: none;
    }
    .testimonials-celulares {
      display: block;
    }
    
    .testimonial-card-celular img {
        max-width: 400px;
    }
    .menu-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background-color: var(--bg-color);
        width: 200px;
        padding: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }

    .menu-links.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }
    
    .about-content {
      text-align: center;
    }
  
    /* Navbar: esconder links e exibir menu toggle */
    .menu-links {
      display: none;
    }
    .menu-toggle {
      font-size: 24px;
      cursor: pointer;
      color: var(--text-color);
    }
    
    /* Hero: empilhar conteúdo */
    .hero-container {
      flex-direction: column;
      text-align: center;
  }

  .hero-text {
      text-align: center;
      margin: 0;
      padding: 0;
  }

  .cta-buttons {
      justify-content: center;
  }

  .social-media {
      justify-content: center;
  }

    .cta-buttons {
      justify-content: center;
    }

    .services h2 {
      font-size: 24px;
  }
  
  .services-container {
      grid-template-columns: 1fr;
      gap: 10px;
  }

  .service-card {
      padding: 12px;
  }

  .service-card h3 {
      font-size: 1rem;
  }

  .service-card p {
      font-size: 0.85rem;
  }

  .service-card img {
      max-width: 70px;
  }

  .service-card .btn {
      font-size: 0.85rem;
      padding: 6px 14px;
  }
    
    /* About (caso exista seção About) */
    .about-container {
      flex-direction: column;
      text-align: center;
      padding: 20px;
    }
  
    .about-content {
      max-width: 90%;
      text-align: center;
    }
  
    .about-content h2 {
      font-size: 1rem;
    }
  
    .about-content p {
      font-size: 1rem;
    }
  
    .about-image img {
      max-width: 80%;
    }
  
    
    /* Testimonials: ajustar grid */
    .testimonials h2 {
      font-size: 1rem;
    }
    .testimonials-grid {
      grid-template-columns: 1fr;
    }

    .testimonial-card {
      flex: 0 0 calc(50% - 20px);
    }
    .marquee__inner {
      animation-duration: 15s; /* Torna o scroll um pouco mais rápido */
  }
  .partners-container h2 {
    font-size: 1.3rem;
  }

  .partner {
      width: clamp(60px, 18vw, 120px);
      height: clamp(40px, 10vw, 80px);
  }

    .contact-info {
      text-align: center;
    }
  
    .social-media {
      margin-top: 10px;
    }
  }

  @media screen and (max-width: 480px) {
    .testimonial-card-celular img {
      max-width: 350px;
  }
    .hero-text h1 {
        font-size: 1.8rem;
    }
  
    .hero-text p {
        font-size: 1rem;
    }
  
    .btn {
        width: 100%;
        justify-content: center;
    }

    .partners h2 {
      font-size: 1.5rem;
  }

  .partner {
      width: 80px;
      height: 60px;
  }
  .testimonial-card {
    flex: 0 0 calc(25% - 20px);
  }
  }
  
  /* ===========================================================
     Fim do CSS
  =========================================================== */