/* ============================================================ */
/* RESPONSIVE BANNER OVERRIDES                                  */
/* File: assets/css/banner-typography-override.css              */
/* ============================================================ */

/* Base banner styles with CSS variable height */
.breadcumd__banner,
section.banner__section-override,
.banner__section {
  --banner-height: 180px;
  height: var(--banner-height) !important;
  min-height: var(--banner-height) !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #1a0b2e !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ensure breadcrumb wrapper respects the new height */
.breadcumd__banner .breadcumd__wrapper {
  min-height: var(--banner-height) !important;
  padding: 0 15px !important;
}

/* Service banner content alignment */
section.banner__section-override .banner__content-override {
  min-height: var(--banner-height) !important;
  display: flex !important;
  align-items: center !important;
}

/* Slider/banner images on index/gallery */
.banner__section .banner__image {
  height: var(--banner-height) !important;
  min-height: var(--banner-height) !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #1a0b2e !important;
}

/* Responsive breakpoints */
@media (min-width: 320px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 200px;
  }
}

@media (min-width: 360px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 220px;
  }
}

@media (min-width: 375px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 230px;
  }
}

@media (min-width: 400px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 240px;
  }
}

@media (min-width: 414px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 260px;
  }
}

@media (min-width: 480px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 280px;
  }
}

@media (min-width: 576px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 350px;
  }
}

@media (min-width: 768px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 450px;
  }
}

@media (min-width: 800px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 480px;
  }
}

@media (min-width: 992px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 520px;
  }
}

@media (min-width: 1024px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 550px;
  }
}

@media (min-width: 1200px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 600px;
  }
}

@media (min-width: 1280px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 650px;
  }
}

@media (min-width: 1366px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 700px;
  }
}

@media (min-width: 1440px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 750px;
  }
}

@media (min-width: 1600px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 800px;
  }
}

@media (min-width: 1920px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 850px;
  }
}

@media (min-width: 2048px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 900px;
  }
}

@media (min-width: 2560px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 950px;
  }
}

@media (min-width: 3440px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 1000px;
  }
}

@media (min-width: 3840px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 1100px;
  }
}

@media (min-width: 4096px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 1150px;
  }
}

@media (min-width: 5120px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 1200px;
  }
}

@media (min-width: 7680px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 1300px;
  }
}

@media (min-width: 8192px) {
  .breadcumd__banner,
  section.banner__section-override,
  .banner__section {
    --banner-height: 1400px;
  }
}