/* iPhone Pro ou maior */
@media (max-width: 430px) {

  #loginForm{
    width: 90vw !important;
  }

  #registerForm{
    width: 90vw !important;
  }

  #row1{
    height: 140vh !important;
  }

  #row3 {
    height: auto !important;
}

  #header{
    position: absolute  !important;
    /* transform: scale(0.9); */
}

}





  a{
      font-style: none;
      text-decoration: none;
      
  }

  ul {
      list-style: none;
      padding: 0; /* Remove o padding padrão */
      margin: 0;  /* Remove a margem padrão */
  }

  #row1{
      /* background-color: var(--color-primary); */
      height: 85vh;
      background-image: url('../app/assets/images/bg.jpg'); 
      background-size: cover; 
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

  }

  #header{
      position: absolute;
      top: 0;
      height: 70px;
      display: flex;
      width: 100%;
      justify-content: space-around;
      
  }

  #brand-header{
            
              background: rgba(255, 255, 255, 0.068);
              border-radius: var(--border-radius-md);
              backdrop-filter: blur(1.5px);
              -webkit-backdrop-filter: blur(1.5px);
              padding: var(--spacing-4);
              text-align: center;
  }




  #row2{
      height: auto;
      background-color: var(--color-gray-400) ;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      padding: var(--spacing-5);
      
      
  }

  #logo1{
      /* position: absolute; */
      width: 300px;
      height: 300px;
      /* left: 10vw */
  }


  /* Container para agrupar as features */
  #row2 .features-container {
      display: flex;
      flex-wrap: wrap;      /* Se quiser que quebre linha em telas menores */
      gap: var(--spacing-4);
      max-width: 1200px;    /* Limite de largura */
      margin: 0 auto;       /* Centraliza dentro do row2 */
      padding: var(--spacing-4);
    }
    
    /* Cada “feature” individual */
    #row2 .feature {
      background-color: var(--color-white);
      color: var(--color-gray-900);
      border-radius: var(--border-radius-md);
      box-shadow: var(--box-shadow-sm);
      padding: var(--spacing-4);
      flex: 1 1 200px; /* Ajuste para controlar quantos cabem por linha */
      min-width: 250px;
      text-align: center;
      transition: transform 0.2s ease;
    }
    
    #row2 .feature:hover {
      transform: translateY(-3px);
      box-shadow: var(--box-shadow-md);
    }
    
    /* Ícone (font-awesome, por exemplo) */
    #row2 .feature i {
      font-size: 2rem;
      color: var(--color-primary);
      margin-bottom: var(--spacing-2);
    }
    
    /* Título da feature */
    #row2 .feature h3 {
      font-size: var(--font-size-md);
      margin-bottom: var(--spacing-2);
      color: var(--color-primary);
    }
    
    /* Descrição da feature */
    #row2 .feature p {
      font-size: var(--font-size-sm);
      color: var(--color-gray-800);
    }
    

  #row3 {
      height: 800px;
      background-color: var(--color-primary);
  }

  /* Container geral dos depoimentos */
  #row3 .testimonials {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
      padding: var(--spacing-4);
    }
    
    /* Título da seção */
    #row3 .testimonials h2 {
      font-size: 2rem;
      color: var(--color-white);
      margin-bottom: var(--spacing-4);
    }
    
    /* Cada “testimonial” */
    #row3 .testimonial {
      background-color: var(--color-gray-100);
      color: var(--color-gray-800);
      border-radius: var(--border-radius-md);
      box-shadow: var(--box-shadow-sm);
      padding: var(--spacing-4);
      margin: var(--spacing-2);
      transition: transform 0.2s ease;
    }
    
    /* Efeito de hover */
    #row3 .testimonial:hover {
      transform: translateY(-3px);
      box-shadow: var(--box-shadow-md);
    }
    



  /* Container principal da seção de planos */
  #row4 .pricing {
      padding: var(--spacing-4);
      text-align: center;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    /* Título principal da seção */
    #row4 .pricing h2 {
      font-size: 2rem;
      color: var(--color-gray-900);
      margin-bottom: var(--spacing-4);
    }
    
    /* Container que agrupa os planos */
    #row4 .plans {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-4);
      justify-content: center;
    }
    
    /* Cada plano */
    #row4 .plan {
      background-color: var(--color-white);
      border-radius: var(--border-radius-md);
      box-shadow: var(--box-shadow-sm);
      padding: var(--spacing-4);
      flex: 1 1 250px; 
      max-width: 300px;
      transition: transform 0.2s ease;
      text-align: center;
    }
    
    #row4 .plan:hover {
      transform: translateY(-3px);
      box-shadow: var(--box-shadow-md);
    }
    
    #row4 .plan h3 {
      margin-bottom: var(--spacing-2);
      color: var(--color-primary);
    }
    
    #row4 .plan p {
      color: var(--color-gray-700);
      margin-bottom: var(--spacing-4);
    }
    
    /* Botão dentro do plano */
    #row4 .plan a.btn {
      background-color: var(--color-primary);
      color: var(--color-white);
      text-transform: uppercase;
      font-weight: bold;
    }
    
    #row4 .plan a.btn:hover {
      background-color: var(--color-secondary);
    }
    

    #footer {
      height: 300px;
      background-color: var(--color-gray-100);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-4);
      text-align: center;
      color: var(--color-gray-700);
    }
    
    #footer p {
      margin: var(--spacing-1) 0;
    }
    
    #footer a {
      color: var(--color-primary);
      text-decoration: none;
      margin: 0 var(--spacing-1);
    }
    
    #footer a:hover {
      text-decoration: underline;
    }