/* =========================================================
   RESPONSIVE - APPILO 2025 MODERNIZED
   Framework: Bootstrap 5.3.8
   Author: Hostex Dev Team
   ========================================================= */

/* ---------- GENERAL ---------- */
@media (max-width: 1399px) {
  section { overflow-x: hidden; }
  .appilo-menu { padding: 0 15px; }
  .banner-static .banner-moc-box img { max-width: 95%; }
}

/* ---------- DESKTOP < 1200px ---------- */
@media (max-width: 1199px) {
  .banner-static .banner-content h3 { font-size: 40px; line-height: 1.2; }
  .banner-static .banner-moc-box img { margin-top: 40px; }
  .sign-up-btn { right: 10px; }
}

/* ---------- LAPTOP < 1024px ---------- */
@media (max-width: 1024px) {
  img { max-width: 100%; height: auto; }
  .navbar-nav .nav-link { padding: 10px 15px; }
  .banner-static .banner-content { text-align: center; }
  .banner-static .banner-content h3 br,
  .features-style-one .feature-style-content h3 br,
  .features-style-one .feature-style-content p br,
  .blog-style-one .single-blog-post .text-box h3 br { display: none; }
  .banner-static .banner-moc-box { text-align: center; margin-top: 40px; }
  .fun-fact .single-fun-fact { margin-bottom: 30px; }
  .how-app-work-section .download-btn { padding: 15px 40px; }
  .footer-bottom .container { padding: 0 15px; }
}

/* ---------- TABLET < 991px ---------- */
@media (max-width: 991px) {
  .navbar-nav { text-align: center; }
  .navbar-nav .nav-item { margin: 8px 0; }
  .navbar-collapse { background: #0e0f1f; padding: 20px 0; }
  .navbar-light .navbar-toggler {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .navbar-nav .nav-link { color: #fff !important; }
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    background: #111;
    text-align: center;
    margin-top: 10px;
  }
  .sign-up-btn { position: absolute; right: 20px; top: 15px; }
  .app-features { padding-top: 80px; }
}

/* ---------- SMALL TABLETS < 850px ---------- */
@media (max-width: 850px) {
  .banner-static .banner-content p { color: #190a32; }
}

/* ---------- TABLETS / MID DEVICES < 768px ---------- */
@media (max-width: 768px) {
  .sec-title { margin-bottom: 50px; }
  .banner-static { text-align: center; padding-top: 120px; }
  .banner-static .banner-moc-box { margin-top: 60px; }
  .banner-static .banner-content h3 { font-size: 34px; }
  .features-style-one .feature-style-content {
    text-align: center;
    padding-bottom: 40px;
  }
  .features-style-one img {
    display: block;
    margin: 0 auto 40px;
  }
  .testimonials-style-one .title h3 {
    text-align: center;
    margin-bottom: 30px;
  }
  .single-testimonial { text-align: center; }
  .single-testimonial .img-box {
    display: block;
    margin: 0 auto 20px;
  }
  .footer-widget { margin-bottom: 40px; }
  footer.footer .subscribe-form {
    display: block;
    text-align: center;
  }
  footer.footer .subscribe-form input {
    width: 100%;
    margin-bottom: 15px;
  }
  footer.footer .subscribe-form button { width: 200px; }
}

/* ---------- MOBILE < 576px ---------- */
@media (max-width: 576px) {
  .banner-static .banner-content h3 { font-size: 28px; }

  /* ✅ FIX: botones alineados a la izquierda, uno debajo del otro */
  .banner-static .banner-content {
    text-align: left !important;
    padding-left: 8%; /* margen interno visual equilibrado */
  }

  .banner-static .banner-content .thm-btn {
    display: block !important;
    width: 200px !important;
    margin: 10px 0 !important;
    text-align: center !important;
  }

  .fun-fact .single-fun-fact { margin-bottom: 25px; }
  .pricing-section .single-pricing { margin-top: 40px; }
  .pricing-section .single-pricing.popular { margin-top: 40px; }
  .app-secreenshots img {
    max-width: 90%;
    margin: 0 auto;
    display: block;
  }
  .footer-bottom { text-align: center; margin-top: 30px; }
  .footer-bottom .container { flex-direction: column; }
  .footer-bottom p { margin: 5px 0; }
}

/* ---------- MOBILE XS < 400px ---------- */
@media (max-width: 400px) {
  .banner-static .banner-content h3 { font-size: 24px; }
  .banner-static .banner-moc-box { margin-top: 40px; }
  .banner-static .banner-content p { font-size: 15px; }
  .how-app-work-section .download-btn {
    display: block;
    width: 200px;
    margin: 10px auto;
  }
  .app-features { padding-top: 40px; }
  .fun-fact { padding-bottom: 40px; }
  .footer-widget { max-width: 350px; margin: 0 auto 40px; }
}

/* ---------- ULTRA SMALL (IPHONE SE) ---------- */
@media (max-width: 320px) {
  .banner-static { padding-top: 100px; }
  .banner-static .banner-content h3 { font-size: 22px; }
  .banner-static .banner-content .thm-btn { width: 180px !important; }
  .how-app-work-section .download-btn {
    width: 180px;
    padding: 10px 15px;
  }
}