/* =========================
   RESPONSIVIDADE TABLET
========================= */

@media (max-width: 1024px){

  .hero h1{
    font-size:64px;
  }

  .section-title h2{
    font-size:48px;
  }

  .services-grid,
  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

}

/* =========================
   RESPONSIVIDADE MOBILE
========================= */

@media (max-width: 768px){

  /* NAVBAR */

  .navbar{
    padding:18px 20px;
  }

  nav{
    display:none;
  }

  .btn-nav{
    padding:12px 18px;
    font-size:14px;
  }

  .logo h2{
    font-size:22px;
  }

  .logo-icon{
    width:42px;
    height:42px;
    font-size:18px;
  }
  .logo-icon img {
    height: 180px;
    margin-left: 100px;
}

  /* HERO */

  .hero{
    padding:140px 20px 80px;
    min-height:auto;
  }

  .badge{
    font-size:13px;
    padding:10px 18px;
    line-height:1.5;
  }

  .hero h1{
    font-size:42px;
    line-height:1.15;
  }

  .hero p{
    font-size:18px;
    line-height:1.7;
    margin-top:25px;
  }

  .hero-buttons{
    flex-direction:column;
    width:100%;
    margin-top:35px;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    text-align:center;
  }

  /* SECTIONS */

  .section,
  .about,
  .contact{
    padding:80px 20px;
  }

  .section-title{
    margin-bottom:50px;
  }

  .section-title h2{
    font-size:34px;
    line-height:1.25;
  }

  .section-title p{
    font-size:18px;
    line-height:1.7;
  }

  /* GRIDS */

  .services-grid,
  .process-grid,
  .stats,
  .diferenciais-grid{
    grid-template-columns:1fr;
  }

  /* CARDS */

  .card,
  .process-card,
  .diferencial-card,
  .stat-card{
    padding:30px;
    border-radius:24px;
  }

  .card h3,
  .process-card h3,
  .diferencial-card h3{
    font-size:26px;
  }

  .card p,
  .process-card p,
  .diferencial-card p{
    font-size:16px;
  }

  /* ABOUT */

  .stat-card h3{
    font-size:48px;
  }

  /* CONTACT */

  .contact-box{
    padding:60px 25px;
    border-radius:30px;
  }

  .contact-box h2{
    font-size:38px;
    line-height:1.2;
  }

  .contact-box p{
    font-size:18px;
    line-height:1.7;
  }

  .contact-buttons{
    flex-direction:column;
    margin-top:35px;
  }

  /* FOOTER */

  footer{
    flex-direction:column;
    gap:20px;
    text-align:center;
    padding:30px 20px;
  }

}

/* =========================
   CELULARES PEQUENOS
========================= */

@media (max-width: 480px){

  .hero h1{
    font-size:34px;
  }

  .section-title h2{
    font-size:28px;
  }

  .contact-box h2{
    font-size:30px;
  }

  .hero p,
  .section-title p,
  .contact-box p{
    font-size:16px;
  }

  .card,
  .process-card,
  .diferencial-card,
  .stat-card{
    padding:24px;
  }

}