/* ============================================================
   CYBER OVERLAY
============================================================ */
/* This section defines the styles for the cyber overlay effect in the "Services" 
section of the home page. 
 The overlay consists of a grid pattern created using repeating linear gradients,
 which adds a futuristic and dynamic visual element to the section. 
 The use of transparency in the gradients allows the underlying content to remain
 visible while still benefiting from the enhanced aesthetics provided by the overlay. 
 By applying this effect, we can create a more engaging and visually appealing
  experience for visitors, encouraging them to explore the services offered by the business. */
#section-services > .services-cyber-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 0;

  border-radius: 10px;

  /* FIXED: Added the 3 missing radial gradients from Master */
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(200, 0, 30, 0.04) 2px,
      rgba(200, 0, 30, 0.04) 4px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(0, 110, 141, 0.06) 40px,
      rgba(0, 110, 141, 0.06) 41px
    ),
    radial-gradient(ellipse 600px 300px at 10% 50%, rgba(200, 0, 30, 0.20), transparent 50%),
    radial-gradient(ellipse 600px 300px at 90% 50%, rgba(0, 110, 141, 0.15), transparent 50%),
    radial-gradient(ellipse 800px 200px at 50% 100%, rgba(255, 255, 255, 0.06), transparent 60%);

  /* FIXED: Added missing opacity */
  opacity: 1;
}

/* ============================================================
   CORNER BRACKETS
============================================================ */
/* This section defines the styles for the corner accent brackets in the "Services"
 section of the home page. 
 The brackets are created using pseudo-elements and are positioned in the top-left
  and bottom-right corners of the section. 
 They feature a bold border with a vibrant color, adding a distinctive and stylish 
 accent to the section. 
 The hover effect allows the brackets to expand slightly, enhancing their visibility
  and adding an interactive element to the design. 
 These styles work together to create a visually appealing and attention-grabbing 
 accent that complements the overall aesthetic of the "Services" section. */
/* Top red aura */
#section-services::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: radial-gradient(
    ellipse 70% 100% at 50% 0%,
    rgb(107, 0, 0),
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Bottom white aura */
#section-services::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: radial-gradient(
    ellipse 70% 100% at 50% 100%,
    rgba(255, 255, 255, 0.28),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   BACKGROUND ANIMATION LAYER
============================================================ */
/* This section defines the styles for the animated background layer in the "Services" section of the home page. 
 The background layer features radial gradients that create a dynamic and visually appealing effect,
  with a diagonal flow animation that adds movement and interest to the section. 
 The opacity of the background layer is set to create a subtle overlay effect, allowing
  the content of the section to remain clear and readable while still benefiting from the visual enhancement provided by the animated background. 
 A hover effect is included to increase the opacity of the background layer, 
 further enhancing its visibility and impact when users interact with the section. 
 These styles work together to create an engaging and attractive backdrop 
 for the "Services" section, encouraging visitors to explore further. */
.services_background_Animated {
  position: absolute;
  inset: 0;

  border-radius: 12px;

  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(520px 260px at 12% 22%, rgba(200, 0, 30, 0.10), transparent 55%),
    radial-gradient(520px 260px at 88% 78%, rgba(0, 110, 141, 0.08), transparent 55%);

  background-size: 180% 180%;

  animation: diagonalFlow 34s linear infinite;

  opacity: 0.22;

  transition: opacity 300ms ease;
}

/* Hover */
#section-services:hover .services_background_Animated {
  opacity: 0.38;
}

/* Z-index — target only heading and grid, not the overlay */
#section-services > .services__heading,
#section-services > .services__grid {
  position: relative;
  z-index: 2;
}