/* =========================================================
   SAPB Main Website - SSDC-inspired background
   SVG file: css/background.svg
   Presentation only; existing layouts and interactions retained.
   ========================================================= */
body {
    background:
        radial-gradient(ellipse 44% 45% at 50% 54%, rgba(168, 211, 255, .43), transparent 85%),
        linear-gradient(115deg, rgba(218, 235, 255, .35), transparent 34%),
        linear-gradient(245deg, rgba(218, 235, 255, .40), transparent 34%),
        #f7fbff;
    min-height: 100vh;
}

/* Two independent edge ornaments, as on the SSDC dashboard. */
body::before,
body::after {
    content: "";
    position: fixed;
    top: 20%; /* below the main website navigation */
    width: clamp(180px, 22vw, 410px);
    height: 540px;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    background: url("background.svg") left top / 100% 100% no-repeat;
}
body::before { left: 0; }
body::after { right: 0; transform: scaleX(-1); }

/* Only the content sections are layered above the decoration.
   Avoid applying position/z-index to all body children (header, popups, etc.). */
.services,
.about,
.customer-card-container,
.products-card-container,
.logo-slider,
.contact-section,
.logo-carousel2 {
    position: relative;
    z-index: 1;
}

/* These sections used opaque shorthand backgrounds that hid the SVG. */
.services,
.logo-slider,
.contact-section {
    background: transparent;
}

@media (max-width: 650px) {
    body::before,
    body::after { display: none; }
}

@media (max-width: 768px) {
  .slide {
    min-width: 120px;
    margin: 0 5px;
  }

  .slide img {
    height: 100px;
  }
}