/* WebP Image Optimization CSS - Modern Browser Support */
/* This file provides WebP fallbacks for all background images in the website */

/* Primary page banner */
@supports (background-image: url("image.webp")) {
  .page-banner {
    background: linear-gradient(rgba(13, 31, 62, 0.7), rgba(22, 62, 114, 0.7)),
      url("../images/background.webp") !important;
  }
}

/* Services section backgrounds */
@supports (background-image: url("image.webp")) {
  .services-section {
    background: linear-gradient(rgba(13, 31, 62, 0.9), rgba(22, 62, 114, 0.9)),
      url("../images/background 3.webp") !important;
  }

  .manufacturing-section {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Manufacturing.webp") !important;
  }

  .financial-section {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Financial.webp") !important;
  }
}

/* Case study backgrounds */
@supports (background-image: url("image.webp")) {
  .case-study-1 {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Healthcare Automation.webp") !important;
  }

  .case-study-2 {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Financial.webp") !important;
  }

  .case-study-3 {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/E-Commerce.webp") !important;
  }

  .case-study-4 {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Manufacturing.webp") !important;
  }

  .case-study-5 {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Real Estate.webp") !important;
  }

  .case-study-6 {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/Logistics.webp") !important;
  }
}

/* Portfolio and contact sections */
@supports (background-image: url("image.webp")) {
  .portfolio-section,
  .contact-section,
  .cta-section {
    background: linear-gradient(rgba(13, 31, 62, 0.9), rgba(22, 62, 114, 0.9)),
      url("../images/background.webp") center/cover !important;
  }

  .newsletter-section {
    background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
      url("../images/background 2.webp") center/cover !important;
  }
}

/* Mobile-first responsive images */
@media (max-width: 768px) {
  @supports (background-image: url("image.webp")) {
    .page-banner,
    .services-section,
    .portfolio-section,
    .contact-section,
    .cta-section {
      background: linear-gradient(rgba(13, 31, 62, 0.9), rgba(22, 62, 114, 0.9)),
        url("../images/background-mobile.webp") center/cover !important;
    }

    .manufacturing-section {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Manufacturing-mobile.webp") center/cover !important;
    }

    .financial-section {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Financial-mobile.webp") center/cover !important;
    }

    .case-study-1 {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Healthcare Automation-mobile.webp") center/cover !important;
    }

    .case-study-2 {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Financial-mobile.webp") center/cover !important;
    }

    .case-study-3 {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/E-Commerce-mobile.webp") center/cover !important;
    }

    .case-study-4 {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Manufacturing-mobile.webp") center/cover !important;
    }

    .case-study-5 {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Real Estate-mobile.webp") center/cover !important;
    }

    .case-study-6 {
      background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
        url("../images/Logistics-mobile.webp") center/cover !important;
    }
  }
}

/* Image loading optimization */
.webp-supported img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Lazy loading support */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* WebP fallback for browsers that don't support @supports */
.no-webp .page-banner {
  background: linear-gradient(rgba(13, 31, 62, 0.7), rgba(22, 62, 114, 0.7)),
    url("../images/background.png");
}

.no-webp .services-section {
  background: linear-gradient(rgba(13, 31, 62, 0.9), rgba(22, 62, 114, 0.9)),
    url("../images/background 3.webp");
}

.no-webp .manufacturing-section {
  background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
    url("../images/Manufacturing.webp");
}

.no-webp .financial-section {
  background: linear-gradient(rgba(13, 31, 62, 0.8), rgba(22, 62, 114, 0.8)),
    url("../images/Financial.webp");
}