/* Fixed Global Background for About & Services Sections */

/* This creates a fixed background that appears behind both about and services sections */
body.show-fixed-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1000; /* Ensures it's below all content */
  pointer-events: none; /* Makes sure it doesn't interfere with interaction */
  background-image: url('../images/yego.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95; /* Further increased opacity to make the image more visible */
  transform: scale(1.05);
  animation: subtle-zoom 25s infinite alternate ease-in-out;
  transition: opacity 0.8s ease; /* Smooth fade in/out when sections change */
}

@keyframes subtle-zoom {
  0% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Mobile support for fixed backgrounds */
@media (max-width: 767px) {
  body.show-fixed-bg::before {
    position: absolute;
    background-attachment: scroll;
    animation: none;
    transform: scale(1.02);
    opacity: 0.2;
  }
}

/* iOS specific fix for fixed backgrounds */
@supports (-webkit-touch-callout: none) {
  /* iOS devices */
  body.show-fixed-bg::before {
    background-attachment: scroll;
    position: absolute;
  }
}