/* ============================
   MOBILE RESPONSIVE FIX
   ============================ */

@media (max-width: 860px) {

  /* Header */
  .brand img{
    height: 70px;
  }

  .nav-wrap{
    padding: 0 14px;
  }

  .nav a{
    font-size: 13px;
  }

  /* Hero Section */
  .hero{
    height: 70vh;
  }
  .hero h1{
    font-size: 22px;
    padding: 0 20px;
  }

  /* Sections */
  section{
    padding: 40px 18px;
  }

  h2{
    font-size: 26px;
  }

  p{
    font-size: 16px;
  }

  /* Cards Grid */
  .grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card{
    padding: 20px;
  }
  .card h3{
    font-size: 17px;
  }
  .card p{
    font-size: 14.5px;
  }

  /* Social Icons */
  .social-icons a{
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* Floating Buttons */
  .whatsapp{
    bottom: 80px;
    font-size: 14px;
    padding: 8px 12px;
  }

  .quote{
    bottom: 30px;
    font-size: 14px;
    padding: 10px 14px;
  }
}

@media (max-width: 480px){

  .hero{
    height: 60vh;
  }

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

  .card{
    padding: 18px;
  }

  .brand img{
    height: 60px;
  }
}