:root {
  --animate-duration: 1s;
}

sl-hero .modal-container {
  height: auto;
  min-height: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100% !important;
}
sl-hero .partner-gradient {
  background: rgb(4, 66, 146);
  background: linear-gradient(270deg, rgb(4, 66, 146) 0%, rgb(51, 158, 226) 100%);
  background-size: cover;
}
sl-hero .bg-gradient-1 {
  background: linear-gradient(145deg, rgb(150, 7, 50) 0%, rgb(0, 17, 85) 30%, rgb(0, 17, 85) 60%, rgb(4, 69, 200) 100%) !important;
  background-size: cover;
}
sl-hero .modal-header {
  border-bottom: 1px solid #adadad;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  height: auto;
  justify-content: center;
  padding-top: 19px;
  padding-bottom: 79px;
}
sl-hero .modal-header-half-text {
  padding-top: 44px;
  padding-bottom: 99px;
}
sl-hero .back-button .clickable:active {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
}
sl-hero .back-button .clickable:focus-visible {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
}
@media (hover: hover) {
  sl-hero .back-button .clickable:hover {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
  }
}
sl-hero .modal-detail-container {
  margin-top: -56px;
}
@media (max-width: 480px) {
  sl-hero .modal-header {
    padding-bottom: 52px;
  }
  sl-hero .modal-detail-container {
    margin-top: -20px;
  }
}
sl-hero .flex-align {
  display: flex;
  align-items: baseline;
}