/*
  Responsive rules.
  Android analogy: these are like layout folders for phone/tablet sizes.
*/
@media (max-width: 991px) {
    .nav-actions { align-items: stretch; margin-top: 12px; }
    .hero-slide { min-height: 350px; padding: 28px 0; text-align: left; }
    .hero-slide .row { flex-wrap: nowrap; }
    .hero-slide .col-lg-6 { width: 50%; }
    .hero-slide .section-kicker { justify-content: flex-start; }
    .hero-actions { justify-content: flex-start; }
    .hero-product-card { height: 280px; min-height: 280px; margin: 0 0 0 auto; }
    .hero-product-card img { height: 220px; }
    .offer-card, .download-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 767px) {
    .section-padding { padding: 68px 0; }
    .top-info-bar { display: none; }
    .hero-slide { min-height: 350px; padding: 36px 0 58px; text-align: center; }
    .hero-slide .row { flex-wrap: wrap; }
    .hero-slide .col-lg-6 { width: 100%; }
    .hero-slide h1 { max-width: none; font-size: 30px; line-height: 1.1; }
    .hero-slide p { max-width: none; margin-bottom: 20px; }
    .hero-slide .section-kicker { justify-content: center; }
    .hero-actions { justify-content: center; }
    .hero-slide .col-lg-6:last-child { display: none; }
    .app-gallery-swiper { padding-inline: 42px; }
    .app-gallery-card img { height: 350px; }
    .product-card, .feature-card, .step-card, .testimonial-card, .stat-card, .blog-card, .contact-card, .contact-form { padding: 22px; }
    .footer-bottom { flex-direction: column; }
}
@media (max-width: 459px) {
    .hero-slide { min-height: 350px; padding: 32px 0 54px; }
    .hero-slide h1 { font-size: 26px; }
    .hero-slide p { font-size: 0.95rem; }
    .hero-slide .btn { font-size: 1rem; }
    .hero-actions .btn { width: 100%; }
    .download-actions { flex-direction: column; width: 100%; }
    .store-button { width: 100%; }
}