/* Banner slider wrapper */
.banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;           /* simple horizontal slides container */
  scroll-behavior: smooth;
}

/* Each slide */
.banner-slider .slide {
  min-width: 100%;
  height: 420px;           /* change as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;             /* text color (change for contrast) */
  padding: 2rem;
  box-sizing: border-box;
  transition: background 300ms ease, opacity 300ms ease;
}

/* Background: IMAGE */
.slide.bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Example helper for applying image inline:
   <div class="slide bg-image" style="background-image:url('/path/to/img.jpg')">... */

/* Background: SOLID COLOR (uses CSS variable for easy overrides) */
.slide.bg-color {
  --slide-bg-color: #ffd1e0; /* default soft pink */
  background-color: var(--slide-bg-color);
}

/* Background: GRADIENT (soft / pastel) */
.slide.bg-gradient {
  background-image: linear-gradient(
    to right,
    rgba(255, 200, 220, 1),   /* soft pink */
    rgba(220, 160, 255, 0.9), /* light purple */
    rgba(255, 200, 120, 0.8)  /* warm peach/orange */
  );
}

/* Optional: vibrant & more saturated gradient */
.slide.bg-gradient--vibrant {
  background-image: li
/* @import url('http://example.com/example_style.css'); */

.primary-container.primary-container-header_section {
  min-height: 107px !important;
  display: flex;
  align-items: center; /* keeps logo and nav centered vertically */
  padding: 0 20px; /* optional: adjust spacing inside */
}
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/