@media (max-width: 768px) {
     .header-container {
         flex-direction: column;
         gap: 1rem;
     }

     .main-nav ul {
         flex-wrap: wrap;
         justify-content: center;
         gap: 1rem;
     }

     .hero-section {
         flex-direction: column-reverse;
         /* Lägger texten överst på mobilen för snabbast möjliga budskap */
         text-align: center;
         padding: 3rem 1rem;
         gap: 2rem;
     }

     .hero-text h1 {
         font-size: 2.2rem;
     }

     .service-row {
         flex-direction: column;
         gap: 1.5rem;
     }
 }