/* ============================================
   Om Sai Online Services - Responsive Styles
   ============================================ */

/* ---- 1400px ---- */
@media (max-width: 1400px) {
  .section-padding {
    padding: 80px 0;
  }
}

/* ---- 1200px ---- */
@media (max-width: 1200px) {
  .navbar-nav .nav-link {
    padding: 8px 10px !important;
    font-size: 0.85rem;
  }

  .nav-actions .btn-call-nav,
  .nav-actions .btn-wa-nav {
    padding: 7px 12px;
    font-size: 0.78rem;
  }

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

  .floating-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
}

/* ---- 992px (Tablet Landscape) ---- */
@media (max-width: 992px) {
  .nav-actions {
    display: none;
  }

  .section-padding {
    padding: 70px 0;
  }

  .hero-section {
    min-height: auto;
    padding: 80px 0 100px;
    text-align: center;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-visual {
    margin-top: 48px;
  }

  .about-image-wrap {
    margin-bottom: 32px;
  }

  .about-image-wrap img {
    height: 360px;
  }

  .process-timeline {
    flex-wrap: wrap;
  }

  .process-timeline::before {
    display: none;
  }

  .process-step {
    flex: 0 0 calc(50% - 10px);
    margin-bottom: 30px;
  }

  .contact-info-card {
    margin-bottom: 30px;
  }

  .footer-widget {
    margin-bottom: 30px;
  }
}

/* ---- 768px (Tablet Portrait) ---- */
@media (max-width: 768px) {
  .top-bar {
    font-size: 0.75rem;
    text-align: center;
  }

  .top-bar .row > div {
    margin-bottom: 4px;
  }

  .top-bar .row > div:last-child {
    margin-bottom: 0;
  }

  .navbar-brand-wrap img {
    width: 48px;
    height: 48px;
  }

  .brand-text .brand-name {
    font-size: 0.9rem;
  }

  .brand-text .brand-tag {
    font-size: 0.62rem;
  }

  .section-padding {
    padding: 60px 0;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .hero-section {
    padding: 60px 0 80px;
  }

  .hero-section h1 {
    font-size: 1.9rem;
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-card-main {
    padding: 28px;
  }

  .hero-card-main img {
    width: 140px;
    height: 140px;
  }

  .floating-icon {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .about-image-wrap img {
    height: 300px;
  }

  .counter-item {
    margin-bottom: 28px;
  }

  .counter-section {
    padding: 50px 0;
  }

  .gallery-item {
    height: 220px;
  }

  .testimonial-inner {
    padding: 28px 20px;
  }

  .page-banner {
    padding: 60px 0 45px;
  }

  .map-wrap {
    height: 300px;
  }

  .contact-form-wrap,
  .contact-info-card {
    padding: 28px 22px;
  }

  .cta-section {
    padding: 50px 0;
  }

  .floating-btns {
    bottom: 16px;
    right: 16px;
  }

  .floating-btn {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
  }

  .hero-wave svg {
    height: 50px;
  }
}

/* ---- 576px (Mobile Landscape) ---- */
@media (max-width: 576px) {
  .section-padding {
    padding: 50px 0;
  }

  .section-header {
    margin-bottom: 36px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons a {
    width: 100%;
    max-width: 280px;
  }

  .process-step {
    flex: 0 0 100%;
  }

  .process-step .step-num {
    width: 64px;
    height: 64px;
    font-size: 1.2rem;
  }

  .btn-primary-custom,
  .btn-secondary-custom,
  .btn-outline-custom,
  .btn-whatsapp,
  .btn-outline-white {
    padding: 10px 22px;
    font-size: 0.88rem;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form button {
    width: 100%;
    border-radius: 50px;
    height: 44px;
  }

  .footer-policy-links {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .gallery-item {
    height: 200px;
  }

  .brand-text .brand-tag {
    display: none;
  }

  .about-experience-badge {
    padding: 14px 18px;
  }

  .about-experience-badge .num {
    font-size: 1.5rem;
  }
}

/* ---- 425px ---- */
@media (max-width: 425px) {
  .navbar-brand-wrap {
    gap: 8px;
  }

  .navbar-brand-wrap img {
    width: 42px;
    height: 42px;
  }

  .brand-text .brand-name {
    font-size: 0.82rem;
  }

  .hero-section h1 {
    font-size: 1.65rem;
  }

  .floating-icon.fi-1,
  .floating-icon.fi-3 {
    left: 0;
  }

  .floating-icon.fi-5 {
    right: 0;
  }

  .service-card-body {
    padding: 32px 18px 20px;
  }

  .error-page .error-code {
    font-size: 5rem;
  }
}

/* ---- 375px ---- */
@media (max-width: 375px) {
  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .counter-item .counter-number {
    font-size: 1.8rem;
  }

  .why-card,
  .mvv-card,
  .service-item {
    padding: 24px 18px;
  }
}

/* ---- 320px ---- */
@media (max-width: 320px) {
  .brand-text .brand-name {
    font-size: 0.75rem;
    max-width: 140px;
  }

  .hero-section h1 {
    font-size: 1.45rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons a {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }

  .floating-btns {
    bottom: 12px;
    right: 10px;
    gap: 8px;
  }

  .floating-btn {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}