/* ================================
   FIXED NAVBAR + RESPONSIVE FULL SCREEN SLIDER
================================ */

:root {
  --somda-header-height: 168px;
  --somda-slider-height: calc(100svh - var(--somda-header-height));
}

body {
  padding-top: var(--somda-header-height);
}

.banner-navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99990;
}

/* ================================
   SLIDER
================================ */

.slider-section {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: var(--somda-slider-height);
  min-height: 0;
  overflow: hidden;
  background: #12394a;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.slider-state-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-message {
  margin: 0;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}

.slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.7s ease-in-out,
    visibility 0.7s ease-in-out;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.slide-item.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.slide-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.slide-item-link:hover,
.slide-item-link:focus,
.slide-item-link:active {
  color: inherit;
  text-decoration: none;
}

.slide-item-link .slide-title {
  transition: opacity 0.25s ease;
}

.slide-item-link:hover .slide-title {
  opacity: 0.92;
}

.slide-image {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.slide-image-empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #12394a 0%, #1d546c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-image-empty p {
  margin: 0;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.48) 34%,
    rgba(0, 0, 0, 0.18) 62%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.slide-content {
  position: absolute;
  left: 50%;
  bottom: 76px;
  z-index: 3;
  width: min(100% - 40px, 900px);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.slide-title {
  margin: 0;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  opacity: 1;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.dot:hover {
  transform: scale(1.08);
}

.dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.active-dot {
  background: #ffffff;
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1399px) {
  :root {
    --somda-header-height: 162px;
    --somda-slider-height: clamp(500px, calc(100svh - var(--somda-header-height)), 620px);
  }

  .slide-content {
    bottom: 70px;
    width: min(100% - 36px, 860px);
  }

  .slide-title {
    font-size: 20px;
  }

  .slider-dots {
    bottom: 34px;
  }
}

@media (max-width: 1199px) {
  :root {
    --somda-header-height: 152px;
    --somda-slider-height: clamp(420px, calc(100svh - var(--somda-header-height)), 540px);
  }

  .slide-content {
    bottom: 62px;
    width: min(100% - 34px, 800px);
  }

  .slide-title {
    font-size: 18px;
    line-height: 1.36;
  }

  .slider-dots {
    bottom: 30px;
  }

  .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 991px) {
  :root {
    --somda-header-height: 146px;
    --somda-slider-height: clamp(340px, 52vw, 455px);
  }

  .slide-content {
    bottom: 55px;
    width: min(100% - 30px, 720px);
  }

  .slide-title {
    font-size: 16px;
    line-height: 1.34;
  }

  .slider-dots {
    bottom: 26px;
    gap: 8px;
  }

  .dot {
    width: 11px;
    height: 11px;
    border-width: 1.8px;
  }

  .slider-message,
  .slide-image-empty p {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  :root {
    --somda-header-height: 130px;
    --somda-slider-height: clamp(255px, 50vw, 340px);
  }

  .slide-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.54) 38%,
      rgba(0, 0, 0, 0.2) 68%,
      rgba(0, 0, 0, 0.08) 100%
    );
  }

  .slide-content {
    bottom: 42px;
    width: min(100% - 26px, 640px);
  }

  .slide-title {
    font-size: 14px;
    line-height: 1.32;
  }

  .slider-dots {
    bottom: 20px;
    gap: 7px;
  }

  .dot {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
  }

  .slider-message,
  .slide-image-empty p {
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  :root {
    --somda-header-height: 126px;
    --somda-slider-height: clamp(205px, 49vw, 270px);
  }

  .slide-content {
    bottom: 34px;
    width: min(100% - 22px, 520px);
  }

  .slide-title {
    font-size: 12.5px;
    line-height: 1.3;
  }

  .slider-dots {
    bottom: 16px;
    gap: 6px;
  }

  .dot {
    width: 8px;
    height: 8px;
    border-width: 1.4px;
  }

  .slider-message,
  .slide-image-empty p {
    font-size: 13px;
  }
}

@media (max-width: 500px) {
  :root {
    --somda-header-height: 92px;
    --somda-slider-height: clamp(190px, 48vw, 240px);
  }
}

@media (max-width: 420px) {
  :root {
    --somda-header-height: 88px;
    --somda-slider-height: clamp(170px, 47vw, 210px);
  }

  .slide-content {
    bottom: 29px;
    width: min(100% - 18px, 390px);
  }

  .slide-title {
    font-size: 11.5px;
    line-height: 1.25;
  }

  .slider-dots {
    bottom: 13px;
    gap: 5px;
  }

  .dot {
    width: 7px;
    height: 7px;
    border-width: 1.3px;
  }

  .slider-message,
  .slide-image-empty p {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  :root {
    --somda-header-height: 84px;
    --somda-slider-height: clamp(150px, 46vw, 180px);
  }

  .slide-content {
    bottom: 25px;
    width: min(100% - 16px, 340px);
  }

  .slide-title {
    font-size: 10.5px;
    line-height: 1.22;
  }

  .slider-dots {
    bottom: 11px;
  }

  .dot {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 240px) {
  :root {
    --somda-header-height: 78px;
    --somda-slider-height: 140px;
  }
}