/* -----------------------------------------------------------------------------
| Custom Styles for Airmove Landing Page
| - Includes mobile responsiveness and specific component styling
----------------------------------------------------------------------------- */

/* Custom Font Class (as provided by user) */
.h {
    font-family: 'Muli', sans-serif;
}

/* 1. Mobile Hero Background Image (Max Width 767px) */
/* Overrides the default background for screens up to 767px */
@media (max-width: 767px) {
    .hero-section {
        background-image: url('assets/hero-mob-image.avif') !important;
    }
}

/* 2. Mobile Hero Minimum Height Adjustment (CRITICAL: for screens 375px and smaller) */
@media (max-width: 475px) {
    .hero-section {
        min-height: 900px !important; /* Forces height to 900px on small mobile devices */
    }
}

/* 3. Feature Card Icon Decoration */
.icon-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ef4444; /* red-500 */
    border-radius: 0.75rem; /* rounded-xl */
    top: -6px;
    left: 6px;
    z-index: 1;
    transform: rotate(10deg);
}

/* 4. Testimonial Slider Styles */
.testimonial-card {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
.testimonial-card.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
/* Custom styles for pagination dots */
.dot {
    transition: all 0.5s ease;
}
.dot.active {
    background-color: #374151; /* gray-700 */
    width: 2rem; /* w-8 */
}

/* 5. FAQ Accordion Styles */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.accordion-item.active .arrow-icon {
    transform: rotate(180deg);
}
.arrow-icon {
    transition: transform 0.3s ease-in-out;
}

/* 6. Easy-Fast Section Layout */
.easy-fast-section {
  display: flex;
  justify-content: center;
}

.easy-fast-steps {
  padding-left: 0;
}

.easy-fast-caption {
  color: #444;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  font-size: 1.14rem;
}

.easy-fast-heading {
  font-size: 2.45rem;
  font-family: 'Muli', sans-serif;
  font-weight: 900;
  color: #222;
  margin-bottom: 34px;
  line-height: 1.16;
}

.easy-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 34px;
}

.easy-step-num {
  background: #fa6469;
  color: #fff;
  border-radius: 12px;
  font-family: 'Muli', sans-serif;
  font-weight: 900;
  font-size: 2.1rem;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  box-shadow: 0 6px 20px rgba(250,100,105,0.05);
  flex-shrink: 0;
}

.easy-step-title {
  font-family: 'Muli', sans-serif;
  font-weight: 900;
  font-size: 1.14rem;
  color: #111;
  margin-bottom: 6px;
}

.easy-step-desc {
  font-size: 1.02rem;
  color: #555;
  max-width: 460px;
}

/* Responsive Overrides for Easy-Fast Section */
@media (max-width: 900px) {
  .easy-fast-grid {
    justify-items: center;
  }
  .easy-fast-steps {
    padding-left: 0;
  }
}

@media (max-width: 520px) {
  
  .easy-fast-heading { font-size: 1.42rem; }
  .easy-step-num { font-size: 1.46rem; width: 38px; height: 38px; }
}