/* ==================== MEDIA QUERIES ===================== */





/* Tablet */


@media screen and (max-width: 1024px) {





  .hero p {


    font-size: var(--font-size-base);


  }





  .menu ul {


    gap: var(--spacing-xs);


  }





  .cta-iniziale p {


    font-size: var(--font-size-base);


  }


}





/* Mobile */


@media screen and (max-width: 768px) {


  .logo-container {


    padding: var(--spacing-xs);


  }





  .logo-container img {


    max-height: 80px;


  }





  .hero-content {


    padding: var(--spacing-sm);


  }








  .hero p {


    font-size: var(--font-size-base);


  }





  .cta-iniziale .container {


    padding-inline: var(--spacing-sm);


  }





  .cta-iniziale p {


    font-size: var(--font-size-base);


  }





  .cta-button {


    padding: var(--spacing-xs) var(--spacing-sm);


    font-size: var(--font-size-base);


  }





  .menu ul {


    gap: var(--spacing-sm);


    text-align: center;


  }





  .social-icons {


    justify-content: center;


  }


}





/* Small Mobile */


@media screen and (max-width: 480px) {





  .hero p {


    font-size: 1rem;


  }





  .cta-button {


    font-size: 0.95rem;


  }





  .arrow-down {


    width: 24px;


    height: 24px;


  }





  .menu-icons img {


    width: 30px;


    height: 30px;


  }


}





/* Mobile Hero and Menu refinement */


@media screen and (max-width: 768px) {


  .hero {


    padding: 120px 16px 60px;


    height: 100vh;


  }








  .hero p {


    font-size: 1rem;


    line-height: 1.5;


  }





  .hero-content {


    padding: 0 1rem;


  }





  #menu-overlay {


    padding: 2rem 1.2rem;


    gap: 1.8rem;


  }





  .menu-icons img {


    width: 36px;


    height: 36px;


  }





  .menu-links a {


    font-size: 1.8rem;


  }


}





/* iPhone 5s / max 360px */


@media screen and (max-width: 360px) {


  .hero {


    padding: 100px 12px 40px;


  }





  .hero p {


    font-size: 0.85rem;


    line-height: 1.4;


  }





  .arrow-down {


    width: 20px;


    height: 20px;


  }





  .menu-links a {


    font-size: 1.2rem;


    line-height: 1.4;


    text-align: center;


    display: inline-block;


    width: 100%;


  }





  .menu-icons img {


    width: 28px;


    height: 28px;


  }





  #menu-overlay {


    padding: 1.5rem 1rem;


    gap: 1.2rem;


  }





  .menu-links {


    gap: 0.6rem;


  }





  .menu-icons {


    gap: 14px;


    margin-top: 1.2rem;


  }


}