/* ==================================================
   LOGILIFT - RESPONSIVE DESIGN
   Fichier : assets/css/responsive.css
   Description : adaptation mobile, tablette, desktop
   ================================================== */

/* ===============================
   TABLETTES (max-width: 1024px)
   =============================== */
@media (max-width: 1024px) {
  section {
    padding: 70px 8%;
  }

  .hero-content h1 {
    font-size: 3rem;
  }

  .navbar {
    padding: 20px 8%;
    margin-bottom: 30px;
  }
}

/* ===============================
 MOBILES (max-width: 1067px)
   =============================== */
@media (max-width: 1067px) {
  .navbar {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
   
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
  }

  /* HERO */
  .hero {
    text-align: center;
  }

  .hero-content {
    
    margin-top: 300px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  /* SERVICES */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* STATS */
  .stats {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* WHY US */
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* CTA */
  .cta h2 {
    font-size: 1.8rem;
  }

  .imlogo{
    width: 300px;
    height: 300px;
}
}

/* ===============================
   MOBILES (max-width: 768px)
   =============================== */
@media (max-width: 768px) {
  /* NAVBAR */
  .navbar {
    flex-direction: column;
    gap: 15px;
   
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  /* HERO */
  .hero {
    text-align: center;
  }

  .hero-content {
    
    margin-top: 300px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  /* SERVICES */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* STATS */
  .stats {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* WHY US */
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* CTA */
  .cta h2 {
    font-size: 1.8rem;
  }

  .imlogo{
    width: 200px;
    height: 200px;
}
}

/* ===============================
MOBILES (max-width: 600px)
   =============================== */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 10px;
   
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
  }

  /* HERO */
  .hero {
    text-align: center;
  }

  .hero-content {
    
    margin-top: 300px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }

  /* SERVICES */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* STATS */
  .stats {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* WHY US */
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* CTA */
  .cta h2 {
    font-size: 1.8rem;
  }

  .imlogo{
    width: 200px;
    height: 200px;
}
}


/* ===============================
   PETITS MOBILES (max-width: 480px)
   =============================== */
@media (max-width: 480px) {
  section {
    padding: 60px 6%;
  }
 

  .hero-content {
    
    margin-top: 20px;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 14px 28px;
  }

  footer {
    font-size: 0.9rem;
  }

  .whatsapp,
  .top {
    width: 48px;
    height: 48px;
  }

  .imlogo{
    width: 100px;
    height: 100px;
}
}

/* ===============================
   PETITS MOBILES (max-width: 405px)
   =============================== */
@media (max-width: 401px) {
  section {
    padding: 60px 6%;
  }
 

.hero-content {
    
    margin-top: 200px;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 14px 28px;
  }

  footer {
    font-size: 0.9rem;
  }

  .whatsapp,
  .top {
    width: 48px;
    height: 48px;
  }

  .imlogo{
    width: 100px;
    height: 100px;
}
}




/* ===============================
   PETITS MOBILES (max-width: 360px)
   =============================== */
@media (max-width: 360px) {
  section {
    padding: 60px 6%;
  }
 

  .hero-content {
    
    margin-top: 200px;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 14px 28px;
  }

  footer {
    font-size: 0.9rem;
  }

  .whatsapp,
  .top {
    width: 48px;
    height: 48px;
  }

  .imlogo{
    width: 100px;
    height: 100px;
}
}


/* ===============================
   PETITS MOBILES (max-width: 320px)
   =============================== */