/* Responsive Images Global Styles */

.responsive-image-container {
  position: relative;
  overflow: hidden;
  background-color: #f3f4f6;
}

/* Hero section specific responsive styles */
.hero-section .responsive-image-container::before {
  padding-bottom: 60%; /* Adjust based on your background image aspect ratio */
}

/* Audience section circular images */
.audience .responsive-image-container {
  border-radius: 50%;
}

.audience .responsive-image-container::before {
  padding-bottom: 100%; /* Square aspect ratio for circular images */
}

/* Solution section images */
.solution-image-container .responsive-image-container::before {
  padding-bottom: 66.67%; /* 3:2 aspect ratio */
}

/* Optimize for different screen sizes */
@media (max-width: 768px) {
  .hero-section .responsive-image-container::before {
    padding-bottom: 75%; /* Taller on mobile */
  }
}

/* Improve loading performance */
.responsive-image-container img {
  will-change: opacity;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .responsive-image-container .placeholder-image,
  .responsive-image-container .final-image {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .responsive-image-container {
    border: 1px solid currentColor;
  }
}