/* ==========================================================================
   System Rainbow - Responsive Styles
   Mobile-first media queries
   ========================================================================== */

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
  :root {
    --sr-section-padding: var(--sr-section-padding-mobile);
  }

  .sr-section__heading {
    font-size: var(--sr-font-size-2xl);
  }

  .sr-btn {
    padding: 12px 24px;
    font-size: var(--sr-font-size-sm);
    width: 100%;
  }

  .sr-cta-box {
    padding: var(--sr-space-xl) var(--sr-space-lg);
  }

  .sr-trust-badge__number {
    font-size: var(--sr-font-size-2xl);
  }

  .sr-feature {
    padding: var(--sr-space-lg);
  }

  .sr-feature__icon {
    width: 64px;
    height: 64px;
  }

  .sr-testimonial {
    padding: var(--sr-space-lg);
  }
}

/* --- Tablet (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sr-section__heading {
    font-size: var(--sr-font-size-2xl);
  }
}

/* --- Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
  .sr-btn + .sr-btn {
    margin-left: var(--sr-space-md);
  }
}