/* Features Section 3 - Tailwind Responsive Styles */

.features-section-3 {
  @apply bg-white pt-20 pb-20 relative overflow-hidden;
}

/* Mobile section padding */
@media (max-width: 768px) {
  .features-section-3 {
    @apply pt-12 pb-12;
  }
}

.features-3-container {
  @apply max-w-screen-xl mx-auto px-6 relative z-10;
}

/* Mobile container */
@media (max-width: 768px) {
  .features-3-container {
    @apply px-4;
  }
}

.features-3-content {
  @apply flex flex-col lg:flex-row items-center gap-12;
}

/* Mobile content layout */
@media (max-width: 768px) {
  .features-3-content {
    @apply flex-col gap-8;
  }
}

.features-3-left {
  @apply flex-1 lg:pr-8;
}

.features-3-heading {
  @apply font-fira font-semibold text-5xl leading-tight text-rafinera-dark mb-6;
  letter-spacing: -0.01em;
}

/* Mobile heading */
@media (max-width: 768px) {
  .features-3-heading {
    @apply text-3xl text-center mb-4;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .features-3-heading {
    @apply text-[28px];
  }
}

.features-3-subheading {
  @apply font-fira font-normal text-xl leading-relaxed text-rafinera-gray mb-8;
}

/* Mobile subheading */
@media (max-width: 768px) {
  .features-3-subheading {
    @apply text-base text-center mb-6;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .features-3-subheading {
    @apply text-sm;
  }
}

.features-3-cta {
  @apply inline-flex items-center gap-3 bg-rafinera-dark text-white px-8 py-4 rounded-xl font-fira font-medium text-lg transition-all duration-300 ease-in-out hover:bg-rafinera-green hover:transform hover:-translate-y-0.5;
}

/* Mobile CTA */
@media (max-width: 768px) {
  .features-3-cta {
    @apply mx-auto px-6 py-3 text-base;
  }
}

.features-3-right {
  @apply flex-1 lg:pl-8;
}

.features-3-image {
  @apply w-full h-[400px] lg:h-[500px] rounded-3xl overflow-hidden shadow-lg;
}

/* Mobile image */
@media (max-width: 768px) {
  .features-3-image {
    @apply h-[300px] rounded-2xl;
  }
}

.features-3-main-image {
  @apply w-full h-full object-cover;
}

/* Background decoration */
.features-3-bg {
  @apply absolute top-0 right-0 w-1/2 h-full opacity-5 z-0;
}

/* Mobile background */
@media (max-width: 768px) {
  .features-3-bg {
    @apply hidden;
  }
}

/* Features list styling */
.features-3-list {
  @apply space-y-4 mb-8;
}

.features-3-item {
  @apply flex items-start gap-3;
}

.features-3-icon {
  @apply w-6 h-6 text-rafinera-green flex-shrink-0 mt-0.5;
}

.features-3-text {
  @apply font-fira font-normal text-base leading-relaxed text-rafinera-gray;
}

/* Mobile features list */
@media (max-width: 768px) {
  .features-3-list {
    @apply mb-6;
  }
  
  .features-3-text {
    @apply text-sm;
  }
}