/* ==========================
   Soul Healing AI
   Responsive Styles
========================== */

/* Large Laptops */
@media (max-width: 1400px){
  .hero h1{font-size:58px;}
  .hero-right lottie-player{width:380px;height:380px;}
}

/* Laptop */
@media (max-width:1200px){
  section{padding:80px 6%;}
  .navbar{padding:16px 6%;}
  .hero{gap:30px;}
  .hero h1{font-size:52px;}
  .section h2{font-size:42px;}
}

/* Tablet */
@media (max-width:992px){

  nav{
    gap:18px;
    flex-wrap:wrap;
  }

  .hero{
    grid-template-columns:1fr;
    text-align:center;
    min-height:auto;
    padding-top:50px;
  }

  .hero-left p{
    margin:0 auto;
  }

  .hero-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
  }

  .secondary-btn{
    margin-left:0;
  }

  .stats{
    justify-content:center;
    flex-wrap:wrap;
  }

  .hero-right{
    margin-top:30px;
  }

  .hero-right lottie-player{
    width:320px;
    height:320px;
  }

  .grid,
  .pricing,
  .steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width:768px){

  body{
    font-size:15px;
  }

  .navbar{
    flex-direction:column;
    gap:16px;
    position:relative;
  }

  nav{
    justify-content:center;
  }

  nav a:not(.btn){
    display:none;
  }

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

  section{
    padding:70px 22px;
  }

  .badge{
    font-size:13px;
  }

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

  .hero p{
    font-size:16px;
  }

  .hero-right lottie-player{
    width:260px;
    height:260px;
  }

  .section h2{
    font-size:34px;
  }

  .grid,
  .pricing,
  .steps{
    grid-template-columns:1fr;
  }

  .stats{
    gap:15px;
  }

  .stats div{
    flex:1;
    min-width:110px;
  }

  .chat-box{
    padding:18px;
  }

  .cta{
    padding:80px 22px;
  }

  .cta h2{
    font-size:34px;
  }

  footer{
    padding:25px 20px;
  }
}

/* Small Phones */
@media (max-width:480px){

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

  .hero p{
    font-size:15px;
  }

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

  .hero-buttons{
    flex-direction:column;
  }

  .hero-right lottie-player{
    width:220px;
    height:220px;
  }

  .stats{
    flex-direction:column;
  }

  .card,
  .plan,
  .faq-item,
  .step{
    padding:22px;
  }

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

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

/* Ultra Wide */
@media (min-width:1600px){
  .hero{
    max-width:1500px;
    margin:auto;
  }
}