.section.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  display: flex;
  align-self: center;
  justify-content: center;
  height: 720px;
}

.section.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(270deg, rgba(19, 26, 81, 0.00) 15.39%, rgba(19, 26, 81, 0.70) 97.02%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 16%, rgba(0, 0, 0, 0.50) 99%);
  height: 100%;
  width: 50%;
}

.section.hero .center-column {
  height: 720px;
  position: absolute;
  display: flex;
  top: 0;
  left: auto;
  max-width: 1440px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 120px 0px 120px 80px;
}

.section.hero .center-column .content-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 50%;
}

.section.hero .center-column .eyebrow {
  font-family: "Inter", sans-serif;
  color: var(--secondary-scale-secondary-450-logo-color, #F8991D);
  font-weight: 600;
}

.section.hero .center-column h1 {
  color: var(--white, #FFFFFF);
  font-weight: 400;
}

.section.hero .center-column .text-lg {
  color: var(--white, #FFFFFF);
  font-family: "Inter", sans-serif;
  width: 564.956px;
}

.section.hero .center-column .button-container a {
  text-decoration: none;
}

.section.hero .center-column .button-container button {
  display: flex;
  color: var(--white, #FFFFFF);
  min-width: 60px;
  padding: 13px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--secondary-brand, #CB5011);
  border: none;
  height: 52px;
  font-family: "Inter", sans-serif;
}

.section.hero .center-column .button-container button:hover {
  cursor: pointer;
  background-color: var(--secondary-600, #E56411);
}

.section.hero .center-column .button-container button:active {
  cursor: pointer;
  background-color: var(--secondary-700, #CB5011);
  box-shadow: inset 0 0 0 3px var(--border-dark, #131A51);
}

.section.hero .calendar-container {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0px 40px 40px 0px;
  flex-direction: column;
  justify-content: right;
  align-items: right;
}

.section.hero .calendar-container a {
  text-decoration: none;
}

.section.hero .calendar-container button {
  display: flex;
  background-color: #CB5011E5;
  color: var(--white, #FFFFFF);
  border-radius: 375px;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  width: 60px;
  overflow: hidden;
  transition: width 0.5s ease;
  padding: 0 18px;
  border: none;
  cursor: pointer;
}

.section.hero .calendar-container button img {
  min-height: 30px;
  min-width: 30px;
}

.section.hero .calendar-container button:hover {
  width: 189px;
}

.section.hero .calendar-container button span {
  display: inline;
  padding-bottom: 5px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease 0.2s, max-width 0.4s ease, padding 0.4s ease;
  text-align: left;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.section.hero .calendar-container button:hover span {
  opacity: 1;
  max-width: 189px;
  width: 60px;
  padding-left: 15px;
}

.section.hero svg {
  width: 12px;
  height: 12px;
  fill: none;
}

.section.hero svg path {
  fill: white;
}

.section.hero .background-container {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  min-height: 0;
}

.section.hero video {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top;
  z-index: -1;
  overflow: hidden;
  min-height: 0;
}

.section.hero img.background {
  width: 100%;
  height: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top;
  z-index: -1;
  overflow: hidden;
  min-height: 0;
}

@media screen and (max-width: 1500px) {
  .section.hero video {
    width: 100%;
    aspect-ratio: inherit;
    min-height: 720px;
    aspect-ratio: unset;
  }

}

@media screen and (max-width: 975px) {
  .section.hero .center-column .content-container {
    width: 684px;
  }

  .section.hero .center-column .text-lg {
    width: 100%;
  }

  .section.hero .overlay {
    width: 100%;
  }

  .section.hero span.center-column {
    height: 100%;
    padding: 120px 0px 120px 32px;
  }

  .section.hero {
    height: 586px;
  }

  .section.hero .calendar-container{
    padding: 0px 23px 10px 0px;
  }
}

@media screen and (max-width: 640px) {
  .section.hero .center-column {
    align-items: center;
  }

  .section.hero .center-column .content-container {
    width: 100%;
    text-align: center;
  }

  .section.hero span.center-column {
    padding: 24px 18px 0px 18px;
  }

  .section.hero .overlay {
    background: 
    linear-gradient(180deg, rgba(19, 26, 81, 0.70) 34.96%, rgba(19, 26, 81, 0.00) 86.99%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.50) 34.17%, rgba(0, 0, 0, 0.00) 86.83%);
  }

  .section.hero .center-column h1 {
    font-size: 42px;
  }
}