/* SPEAKERS SECTION */
.speakers__left {
  flex-shrink: 0;
  width: 25%;
  --delay: 0s;
  z-index: 100;
  background: linear-gradient(
    270deg,
    rgba(7, 24, 45, 0) 0%, 
    rgba(7, 24, 45, .5) 15%,
    rgba(7, 24, 45, 1) 100%);
}

.speakers-wrapper {
  max-width: 1440px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 31px;
  position: relative;
}

.speakers {
  background: linear-gradient(
      90deg,
      var(--New-Blue, #07182d) 48.03%,
      #121b52 75.24%,
      #062560 92.36%,
      #042764 99.36%
    ),
    var(--New-Blue, #07182d);
}

.speakers__heading--red {
  margin-bottom: 24px;
  font-size: 44px;
  font-weight: 350;
  color: var(--color-red);
  font-style: normal;
  line-height: 115%;
  opacity: 0;
  animation-name: rise;
  animation-duration: 1.8s;
  animation-delay: var(--delay);
  animation-fill-mode: forwards;
  position: relative;
}
.speakers__paragraph {
  margin-bottom: 24px;
  padding: 3px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  background-image: linear-gradient(
    to right,
    #fff 0%,
    #fff 50%,
    #fea800 74%,
    #f15a23 81%,
    #ff007f 87%,
    #07182d 100%
  );
  background-position-x: 300%;
  background-repeat: no-repeat;
  background-size: 200% 300px;
  color: transparent;
  background-color: #07182d;
  background-clip: text;
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: text-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 4s;
}

.speakers__button {
  border: 8px solid white;
  display: flex;
  height: 38px;
  width: 100%;
  padding: 12px 24px;
  margin-top: var(--Half-Margin, 12px);
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 35px;
  border: none;
  text-wrap-mode: nowrap;

  background-image: linear-gradient(
    to right,
    #ffa700 0%,
    #ff027e 50%,
    #ff4fa5 62%,
    #ffb5e3 82%,
    white 100%
  );
  background-position-x: 200%;
  background-repeat: no-repeat;
  background-size: 200% 100px;
  background-color: #fff;
  animation-fill-mode: forwards;
  animation-name: cta-burn;
  animation-delay: 0.3s;
  animation-duration: 2.5s;
  color: rgba(24, 32, 47, 0);

  background-position-x: 200%;
  background-repeat: no-repeat;
  background-size: 200% 100px;
  background-color: #fff;
  animation-fill-mode: forwards;
  animation-name: cta-burn;
  animation-delay: calc(var(--delay) + 0.3s);
  animation-duration: 2.5s;
  color: rgba(24, 32, 47, 0);
}

.speakers__button--inverted {
  background-image: linear-gradient(
    to right,
    #ffa700 0%,
    #ff027e 50%,
    #b00459 62%,
    #3c0028 82%,
    #07182d 100%
  );
  animation-name: cta-burn-inv;
  background-color: #07182d;
}
.speakers__span {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 115%;
}
.speakers__span--description {
  width: 99px;
}

.speakers__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* overflow: hidden; */
  --initdelay: 0.6s;
}

.speakers__view {
  display: flex;
  padding: 1px;
}

.speakers__card {
  /* width: 283px; */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  --dim: 80%;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: calc(var(--dim) - 18px);
  min-width: 0;
  margin-right: 24px;
  --delay: var(--initdelay);
  
  opacity: 0;
  transition: opacity;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.speakers__card.is-in-view {
  opacity: 1;
  
}

.speakers__card + .speakers__card {
  --delay: calc(var(--initdelay) + 0.3s);
}

.speakers__card + .speakers__card + .speakers__card {
  --delay: calc(var(--initdelay) + 0.6s);
}

.speakers__card--image {
  align-self: stretch;
  border-radius: var(--Half-Margin, 12px);
  object-fit: cover;
  box-shadow: 0 0px 14px 0 rgba(17, 20, 56, 0);
  animation-name: rise;
  animation-duration: 1.8s;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-delay: var(--delay);
  position: relative;
}
.speakers__card--wrapper {
  background-image: linear-gradient(
    to right,
    #fff 0%,
    #fff 16%,
    #fea800 52%,
    #f15a23 62%,
    #ff007f 74%,
    #07182d 100%
  );
  background-color: #07182d;
  background-position-x: 300%;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  border-radius: 12px;
  box-shadow: 0 0px 14px 0 rgba(17, 20, 56, 0);
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: speaker-rise;
  animation-delay: calc(var(--delay) + 0.2s);
  animation-duration: 2.5s;
  position: relative;
}

.speakers__image {
  width: 100%;
}

.speakers__card--description {
  display: flex;
  height: 195px;
  margin: 1px;
  padding: var(--Margin, 24px) var(--Zilch, 0px) var(--Double-Margin, 48px)
    var(--Zilch, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Half-Margin, 12px);
  align-self: stretch;
  border-radius: 11px;
  background: var(--New-Blue, #07182d);
}

.speakers__card--description h3 {
  display: flex;
  padding: 0 var(--Margin, 24px);
  align-items: center;
  gap: 10px;
  align-self: stretch;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: rise;
  animation-delay: calc(var(--delay) + 0.25s);
  animation-duration: 1.8s;
  position: relative;
}
.speakers__card--description .horizontalrule {
  width: 100%;
  height: 1px;
  border: 0;
  background-image: linear-gradient(
    to right,
    #fff 0%,
    #fff 16%,
    #fea800 52%,
    #f15a23 62%,
    #ff007f 74%,
    #07182d 100%
  );
  background-position-x: 300%;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-color: #07182d;

  animation-fill-mode: forwards;
  animation-name: speaker-border;
  animation-delay: 0.2s;
  animation-duration: 2.5s;
  position: relative;
}
.speakers__card--description p {
  padding: 0px var(--Margin, 24px);
  align-items: center;
  gap: 10px;
  align-self: stretch;
  font-style: italic;
  opacity: 0;

  animation-fill-mode: forwards;
  animation-name: rise;
  animation-delay: calc(var(--delay) + 0.2s);
  animation-duration: 1.8s;
  position: relative;
}

.speakers__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  animation-name: appear;
  animation-fill-mode: forwards;
  animation-duration: 2.5s;
  animation-delay: calc(var(--initdelay) + 0.2s);
  position: relative;
}
.speakers__toggle--arrow {
  display: flex;
  align-items: center;
  gap: 24px;
}
.speakers__toggle--arrowleft,
.speakers__toggle--arrowright {
  width: 65px;
  height: 65px;
  border: 1px solid rgb(246, 244, 244);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow_left {
  background: url(../assets/arrow_left.svg) no-repeat center / contain;
  width: 28px;
  height: 28px;
  margin-left: 10px;
}

.arrow_right {
  background: url(../assets/arrow_right.svg) no-repeat center / contain;
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.speakers__toggle--dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 55%;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 7px;
  border-radius: 10px;
  background-color: #00a5e294;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.dot.active {
  width: 40px;
  background-color: white;
}
.dot.inactive {
  width: 20px;
  background-color: #00a5e294;
}



/* HOVER STATES */
.speakers__toggle--arrowleft:hover,
arrow_left:hover {
  border: 1px solid #00a5e2;
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
.speakers__toggle--arrowright:hover,
arrow_right:hover {
  border: 1px solid #00a5e2;
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

/* HOVER STATES */
.speakers__button:hover {
  cursor: pointer;
  background: #fea800 !important;
}