/* Reset e Estilos Base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #000000; }

    html, body {
  overflow-x: hidden;
}
    
    /* Cabeçalho Fixo */
    .nav-bar {
      background: rgba(255,255,255,0.95);
      padding: 1rem 2rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    }
    .logo { 
      font-weight: 700;
      color: #2b1700;
      font-size: 1.5rem;
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(135deg, #2b1700 0%, #4a3000 100%);
      color: rgb(255, 255, 255);
      padding: 8rem 1rem 4rem;
      text-align: center;
    }
    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Cards Interativos */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      background: rgb(255, 255, 255);
    }
    .feature-card {
      background: rgb(255, 255, 255);
      border-radius: 15px;
      padding: 2rem;
      box-shadow: 0 5px 25px rgba(43,23,0,0.1);
      transition: transform 0.3s;
    }
    .feature-card:hover {
      transform: translateY(-10px);
    }

    /* Casos de Sucesso com Slider */
    .case-slider {
      max-width: 1000px;
      margin: 3rem auto;
      padding: 2rem;
      background: #ffffff;
      border-radius: 15px;
    }
    .case-item {
      text-align: center;
      padding: 2rem;
      background: rgb(255, 255, 255);
    }
    .case-stats {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      background: rgb(255, 255, 255);
    }
    .stat-box {
      background: rgb(255, 255, 255);
      padding: 50px;
      border-radius: 10px;
      text-align: center;
      text-justify: distribute;
      width: 70%;
    }
    .stat-img {      width: 100px;
      margin-bottom: 10px;
      height: auto;

    }

    .text {
        box-sizing: border-box;
        width: 100%;
        max-width: 100vw; /* Limita a largura máxima à largura da viewport */
        padding: 4rem 2rem;

        text-align: left;
        font-family:Tahoma;
        overflow-x: hidden; /* Previne transbordamento horizontal */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
    }

    .text h1 {
        font-size: clamp(3rem, 5vw, 4rem); /* Tamanho de fonte responsivo */
        margin-bottom: 1rem;
        color: #ffffff;
        line-height: 1.2;
        font-weight:700 ;
    }

    .text p {
        font-size: clamp(2rem, 3vw, 2rem); /* Tamanho de fonte responsivo */
        color: #ffffff;
        line-height: 1.5;
        max-width: 100%; /* Garante que não ultrapasse o container */
        word-wrap: break-word; /* Quebra palavras longas */
        font-weight:700 ;
    }

    
  .celular-grid {
    /* background-image: url("./assets/img/swift-in-field.jpg") !important; */
    background-size: cover !important;
    background-position: center !important;


  }



/* Container do celular e telas */
.phone-container {
  position:relative;
  width: 380px;
  height: 520px;
  left:800px
}

.celular-img {
  width: 100%;
  height: -50%;
  position: relative;
  object-fit: cover;
  z-index: 100;
  border-radius: 15px;
  left: -10%; /* Ajuste para centralizar a tela */

  


}

.slides-container {
  position: absolute;
  top: -26%; /* Ajuste conforme necessidade */
  left: -3%; /* Ajuste para centralizar a tela */
  width: 90%; /* Ajuste para caber na tela do celular */
  height: 150%;
  transform: scale(58%);

  z-index: 1;
}


.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.screen-img {
  position: absolute;
  width: 110%;
  height:110%;
  left: -11dvh;
  top:-15px;
  
  border-radius: 5px; /* Ajuste conforme o design do celular */
}
.description-container {

      color: #8f2525;
      padding: 8rem 1rem 4rem;
      text-align: left;
      font-family:Arial, Helvetica, sans-serif;
      font-size:x-large;


}



    /* Botão WhatsApp */
    .whatsapp-section {
      background: #2b1700;
      color: white;
      padding: 3rem 2rem;
      text-align: center; ;
    }
    .whatsapp-btn {
      background: #25D366;
      color: white;
      padding:1rem 2.5rem;
      border-radius: 30px;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s;
      font-weight: 500;
      border: 2px solid transparent;
      font-size: 1.2rem;
    }
    .whatsapp-btn:hover {
      background: white;
      color: #25D366;
      border-color: #25D366;
    }

    /* Planos com Comparativo */
    .pricing-comparison {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      max-width: 1500px;
      margin: 3rem auto;
      padding: 0 4rem;
      background: rgb(255, 255, 255);
    }
    .plan-card {
      border: 2px solid #e9ecef;
      border-radius: 15px;
      padding: 2rem;
      position: relative;
      background: rgb(255, 255, 255);
    }
    .plan-card.highlight {
      border-color: #2b1700;
      transform: scale(1.05);
      box-shadow: 0 10px 30px rgba(43,23,0,0.15);
    }

    /* Elementos Visuais */
    .icon-lg {
      font-size: 2.5rem;
      color: #2b1700;
      margin-bottom: 1rem;
    }
    .btn {
      background: #2b1700;
      color: white;
      padding: 1rem 2.5rem;
      border-radius: 30px;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s;
      font-weight: 500;
      border: 2px solid transparent;
    }
    .btn:hover {
      background: white;
      color: #2b1700;
      border-color: #2b1700;
    }
    .feature-card:hover {
      background: #2b1700;
      color: white;
      border-color: white;
    }
    .feature-card:hover .fa-magnifying-glass-dollar,
    .feature-card:hover .fa-seedling,
    .feature-card:hover .fa-arrow-trend-up {
      filter: brightness(1.5);
      transform: scale(1.1);
      color: rgb(5, 64, 5);
    }


    /* Media Queries para Responsividade */
    @media (max-width: 768px) {
      html, body {
    background-color: #ffffff !important;
  }

      .text {
            padding: 2rem 1rem;
            text-align: center;
        }
        
        .text h1 {
            font-size: 1.8rem; /* Tamanho fixo para melhor legibilidade */
            margin-bottom: 1rem;
        }
        
        .text p {
            font-size: 1rem;
            text-align: center; /* Melhor alinhamento para mobile */
            hyphens: auto; /* Hifenização automática */
        }
    



      .nav-bar { padding: 0.5rem 1rem; }
      .hero { padding: 6rem 1rem 3rem; }
      .hero h1 { font-size: 2rem; }
      .feature-grid { grid-template-columns: 1fr; padding: 1rem; background: white !important;}
      .case-slider { margin: 2rem auto; padding: 1rem; background: white !important;}
      .case-stats { flex-direction: column; align-items: center; background: white !important;}
      .stat-box { width: 100%; margin-bottom: 1rem;background: white !important; }
      .pricing-comparison { grid-template-columns: 1fr; padding: 0 1rem; background: white !important;}
      .plan-card { padding: 1.5rem;background: white !important; }
      .whatsapp-section { padding: 3rem 1rem; }
      footer { padding: 2rem 1rem; background: white !important;}
      .feature-grid {
    background: white !important; /* Garante que o fundo seja branco */
  }
      .phone-container{position:relative;left:100px;
       }



  .pricing-comparison {
    background: white !important;
  }
    
}