h2, h1 {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1;
}

.characters-title img, .epic-adventure img, .divider {
  width: 20vw;
  max-width: 220px;
  min-width: 180px;
  margin: 4px 0px 10px 0px;
}
@media (max-width: 400px) {
  .characters-title img, .epic-adventure img, .divider {
    width: 80%;
    max-width: 80%;
  }
}

.char-columns, .char-desc-container {
  transition: all 0.3s ease;
}

/*---Set Up------------------------------------*/
html, body {
  font-size: 18px;
  line-height: 140%;
  font-family: "Signika", Verdana, sans-serif;
  color: #081129;
  text-rendering: optimizeLegibility;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: #081129;
  scroll-behavior: smooth;
  min-width: 300px;
}
@media (max-width: 1200px) {
  html, body {
    font-size: 16px;
  }
}
@media (max-width: 766px) {
  html, body {
    font-size: 14px;
  }
}

/*---Headers------------------------------------*/
h1 {
  font-family: "Lora", Times New Roman, Serif;
  font-size: 2.25rem;
}

h2 {
  font-family: "Lora", Times New Roman, Serif;
  font-size: 1.75rem;
}

/*---SPACERS------------------------------------*/
.spacer-tiny {
  padding: 0.5rem 0;
}

.spacer-small {
  padding: 2rem 0;
}

.clear {
  clear: both;
  padding-bottom: 50px;
}

/*---DIVIDER------------------------------------*/
/*---BADGE------------------------------------*/
.badge {
  display: inline-block;
  padding: 16px 44px;
  background-color: #FFA600;
  color: #885800;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  user-select: none;
}

/*---NAVBAR------------------------------------*/
.navbar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  z-index: 9999;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #081129;
  backdrop-filter: blur(3px);
  padding: 0 24px;
}

.logo img {
  display: flex;
  width: 96px;
  height: auto;
  align-self: center;
}

/* Navigation links container */
.nav-links {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  margin-right: 136px;
}
@media (max-width: 766px) {
  .nav-links {
    justify-content: flex-end;
    margin-right: 0px;
    width: 100%;
  }
}

/* Navigation links list */
.nav-links ul {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin: 0 4px;
}

/* Navigation link styles */
.nav-links a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 300;
  text-transform: uppercase;
  padding: 5px 10px;
  letter-spacing: 0.05rem;
  transition: color 0.3s ease;
  line-height: 100%;
}

.nav-links a:hover {
  color: #FFA600;
}

/*---VIDEO PLAYER------------------------------------*/
:root {
  --shimmer-hue-1: 190deg;
  --shimmer-sat-1: 100%;
  --shimmer-lit-1: 90%;
  --shimmer-hue-2: 210deg;
  --shimmer-sat-2: 95%;
  --shimmer-lit-2: 85%;
  --shimmer-hue-3: 230deg;
  --shimmer-sat-3: 90%;
  --shimmer-lit-3: 80%;
}

@property --mask {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spin {
  0% {
    --mask: 0deg;
  }
  100% {
    --mask: 360deg;
  }
}
/* Positioning */
.video-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16/9;
  background: transparent;
  overflow: hidden;
}

/* Play button */
.play-btn {
  position: relative;
  font-size: 2.75rem;
  color: white;
  background: transparent;
  border: 0px solid white;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  isolation: isolate;
  margin-top: -6rem;
  padding-left: 0.75rem;
}
@media (max-width: 1400px) {
  .play-btn {
    margin-top: -6.5rem;
    width: 130px;
    height: 130px;
  }
}
@media (max-width: 766px) {
  .play-btn {
    margin-top: 0;
    width: 100px;
    height: 100px;
  }
}

.play-btn:hover {
  transform: scale(1.1);
}

/* Shimmer ring */
.play-btn .shimmer {
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  mask-image: conic-gradient(from var(--mask, 0deg), transparent 0%, transparent 10%, black 36%, black 45%, transparent 50%, transparent 60%, black 85%, black 95%, transparent 100%);
  animation: spin 3s linear infinite;
}

.play-btn .shimmer::before,
.play-btn .shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.play-btn .shimmer::before {
  box-shadow: 0 0 4px 2px hsl(var(--shimmer-hue-1), 90%, 85%, 0.8), 0 0 8px 4px hsl(var(--shimmer-hue-2), 100%, 70%, 0.7), 0 0 12px 6px hsl(var(--shimmer-hue-3), 90%, 75%, 0.5);
}

.play-btn .shimmer::after {
  box-shadow: inset 0 0 2px 2px hsl(var(--shimmer-hue-2), 80%, 95%, 0.9), inset 0 0 6px 8px hsl(var(--shimmer-hue-2), 100%, 80%, 0.7);
}

/* Overlay */
.video-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 999999999;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Video container */
.video-container {
  position: relative;
  width: 80%;
  aspect-ratio: 16/9;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Close button */
.close-btn {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.firefly-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.firefly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}
@media (max-width: 766px) {
  .firefly {
    width: 1.2vw;
    height: 1.2vw;
    margin: -0.6vw 0 0 5vw;
  }
}
.firefly::before, .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}
@media (max-width: 766px) {
  .firefly::before, .firefly::after {
    transform-origin: -5vw;
  }
}
.firefly::before {
  background: #fff;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}
.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 13s;
}
.firefly:nth-child(1)::after {
  animation-duration: 13s, 9324ms;
  animation-delay: 0ms, 6773ms;
}

@keyframes move1 {
  0% {
    transform: translateX(8vw) translateY(37vh) scale(0.52);
  }
  3.5714285714% {
    transform: translateX(-13vw) translateY(-21vh) scale(0.61);
  }
  7.1428571429% {
    transform: translateX(34vw) translateY(-3vh) scale(0.57);
  }
  10.7142857143% {
    transform: translateX(46vw) translateY(9vh) scale(0.9);
  }
  14.2857142857% {
    transform: translateX(58vw) translateY(-15vh) scale(0.7);
  }
  17.8571428571% {
    transform: translateX(-4vw) translateY(32vh) scale(0.74);
  }
  21.4285714286% {
    transform: translateX(-29vw) translateY(58vh) scale(0.65);
  }
  25% {
    transform: translateX(-8vw) translateY(4vh) scale(0.55);
  }
  28.5714285714% {
    transform: translateX(19vw) translateY(56vh) scale(1);
  }
  32.1428571429% {
    transform: translateX(-4vw) translateY(-30vh) scale(0.7);
  }
  35.7142857143% {
    transform: translateX(48vw) translateY(-26vh) scale(0.7);
  }
  39.2857142857% {
    transform: translateX(55vw) translateY(-2vh) scale(0.69);
  }
  42.8571428571% {
    transform: translateX(-37vw) translateY(-24vh) scale(0.87);
  }
  46.4285714286% {
    transform: translateX(40vw) translateY(47vh) scale(0.45);
  }
  50% {
    transform: translateX(34vw) translateY(15vh) scale(0.58);
  }
  53.5714285714% {
    transform: translateX(-21vw) translateY(27vh) scale(0.79);
  }
  57.1428571429% {
    transform: translateX(-19vw) translateY(-10vh) scale(0.75);
  }
  60.7142857143% {
    transform: translateX(-32vw) translateY(-39vh) scale(0.39);
  }
  64.2857142857% {
    transform: translateX(-39vw) translateY(5vh) scale(0.7);
  }
  67.8571428571% {
    transform: translateX(44vw) translateY(32vh) scale(0.8);
  }
  71.4285714286% {
    transform: translateX(8vw) translateY(53vh) scale(0.45);
  }
  75% {
    transform: translateX(44vw) translateY(59vh) scale(0.31);
  }
  78.5714285714% {
    transform: translateX(10vw) translateY(-31vh) scale(0.75);
  }
  82.1428571429% {
    transform: translateX(36vw) translateY(-38vh) scale(0.43);
  }
  85.7142857143% {
    transform: translateX(-16vw) translateY(30vh) scale(0.8);
  }
  89.2857142857% {
    transform: translateX(-2vw) translateY(-35vh) scale(0.53);
  }
  92.8571428571% {
    transform: translateX(22vw) translateY(24vh) scale(0.68);
  }
  96.4285714286% {
    transform: translateX(53vw) translateY(1vh) scale(0.8);
  }
  100% {
    transform: translateX(32vw) translateY(11vh) scale(0.96);
  }
}
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 14s;
}
.firefly:nth-child(2)::after {
  animation-duration: 14s, 5196ms;
  animation-delay: 0ms, 5091ms;
}

@keyframes move2 {
  0% {
    transform: translateX(59vw) translateY(25vh) scale(0.45);
  }
  4.1666666667% {
    transform: translateX(-35vw) translateY(13vh) scale(0.57);
  }
  8.3333333333% {
    transform: translateX(11vw) translateY(38vh) scale(0.54);
  }
  12.5% {
    transform: translateX(39vw) translateY(7vh) scale(0.33);
  }
  16.6666666667% {
    transform: translateX(7vw) translateY(60vh) scale(0.61);
  }
  20.8333333333% {
    transform: translateX(6vw) translateY(39vh) scale(0.88);
  }
  25% {
    transform: translateX(44vw) translateY(37vh) scale(0.31);
  }
  29.1666666667% {
    transform: translateX(-30vw) translateY(-4vh) scale(0.5);
  }
  33.3333333333% {
    transform: translateX(29vw) translateY(60vh) scale(0.97);
  }
  37.5% {
    transform: translateX(15vw) translateY(55vh) scale(0.42);
  }
  41.6666666667% {
    transform: translateX(26vw) translateY(24vh) scale(0.35);
  }
  45.8333333333% {
    transform: translateX(56vw) translateY(-8vh) scale(0.33);
  }
  50% {
    transform: translateX(-6vw) translateY(18vh) scale(0.82);
  }
  54.1666666667% {
    transform: translateX(41vw) translateY(-15vh) scale(0.52);
  }
  58.3333333333% {
    transform: translateX(9vw) translateY(8vh) scale(0.87);
  }
  62.5% {
    transform: translateX(-39vw) translateY(59vh) scale(0.4);
  }
  66.6666666667% {
    transform: translateX(-27vw) translateY(19vh) scale(0.71);
  }
  70.8333333333% {
    transform: translateX(36vw) translateY(53vh) scale(0.26);
  }
  75% {
    transform: translateX(53vw) translateY(27vh) scale(0.52);
  }
  79.1666666667% {
    transform: translateX(-28vw) translateY(-33vh) scale(0.49);
  }
  83.3333333333% {
    transform: translateX(-10vw) translateY(-6vh) scale(0.6);
  }
  87.5% {
    transform: translateX(-15vw) translateY(50vh) scale(0.49);
  }
  91.6666666667% {
    transform: translateX(-35vw) translateY(34vh) scale(0.93);
  }
  95.8333333333% {
    transform: translateX(-28vw) translateY(8vh) scale(0.66);
  }
  100% {
    transform: translateX(0vw) translateY(18vh) scale(0.3);
  }
}
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 13s;
}
.firefly:nth-child(3)::after {
  animation-duration: 13s, 7439ms;
  animation-delay: 0ms, 4195ms;
}

@keyframes move3 {
  0% {
    transform: translateX(50vw) translateY(19vh) scale(1);
  }
  5% {
    transform: translateX(21vw) translateY(-2vh) scale(0.92);
  }
  10% {
    transform: translateX(55vw) translateY(-35vh) scale(0.91);
  }
  15% {
    transform: translateX(-19vw) translateY(-34vh) scale(0.29);
  }
  20% {
    transform: translateX(-20vw) translateY(-3vh) scale(0.71);
  }
  25% {
    transform: translateX(-14vw) translateY(45vh) scale(0.47);
  }
  30% {
    transform: translateX(-34vw) translateY(33vh) scale(0.59);
  }
  35% {
    transform: translateX(6vw) translateY(-32vh) scale(0.93);
  }
  40% {
    transform: translateX(-35vw) translateY(37vh) scale(0.66);
  }
  45% {
    transform: translateX(-37vw) translateY(38vh) scale(0.76);
  }
  50% {
    transform: translateX(-21vw) translateY(-18vh) scale(0.92);
  }
  55% {
    transform: translateX(45vw) translateY(35vh) scale(0.38);
  }
  60% {
    transform: translateX(-3vw) translateY(-28vh) scale(0.82);
  }
  65% {
    transform: translateX(45vw) translateY(1vh) scale(0.91);
  }
  70% {
    transform: translateX(37vw) translateY(22vh) scale(0.91);
  }
  75% {
    transform: translateX(-15vw) translateY(-26vh) scale(0.69);
  }
  80% {
    transform: translateX(48vw) translateY(-27vh) scale(0.77);
  }
  85% {
    transform: translateX(36vw) translateY(-28vh) scale(0.53);
  }
  90% {
    transform: translateX(-30vw) translateY(-31vh) scale(0.62);
  }
  95% {
    transform: translateX(-30vw) translateY(-21vh) scale(0.48);
  }
  100% {
    transform: translateX(25vw) translateY(52vh) scale(0.52);
  }
}
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 9s;
}
.firefly:nth-child(4)::after {
  animation-duration: 9s, 7984ms;
  animation-delay: 0ms, 985ms;
}

@keyframes move4 {
  0% {
    transform: translateX(-17vw) translateY(41vh) scale(0.71);
  }
  4.7619047619% {
    transform: translateX(53vw) translateY(14vh) scale(0.39);
  }
  9.5238095238% {
    transform: translateX(3vw) translateY(43vh) scale(0.71);
  }
  14.2857142857% {
    transform: translateX(-28vw) translateY(-16vh) scale(0.55);
  }
  19.0476190476% {
    transform: translateX(-22vw) translateY(5vh) scale(0.49);
  }
  23.8095238095% {
    transform: translateX(54vw) translateY(-15vh) scale(0.79);
  }
  28.5714285714% {
    transform: translateX(6vw) translateY(39vh) scale(0.38);
  }
  33.3333333333% {
    transform: translateX(46vw) translateY(23vh) scale(0.81);
  }
  38.0952380952% {
    transform: translateX(43vw) translateY(-20vh) scale(0.3);
  }
  42.8571428571% {
    transform: translateX(-32vw) translateY(-32vh) scale(0.55);
  }
  47.619047619% {
    transform: translateX(-32vw) translateY(-7vh) scale(0.77);
  }
  52.380952381% {
    transform: translateX(60vw) translateY(37vh) scale(0.55);
  }
  57.1428571429% {
    transform: translateX(35vw) translateY(9vh) scale(0.8);
  }
  61.9047619048% {
    transform: translateX(-17vw) translateY(51vh) scale(0.82);
  }
  66.6666666667% {
    transform: translateX(-33vw) translateY(-19vh) scale(0.5);
  }
  71.4285714286% {
    transform: translateX(43vw) translateY(-21vh) scale(0.66);
  }
  76.1904761905% {
    transform: translateX(29vw) translateY(15vh) scale(0.32);
  }
  80.9523809524% {
    transform: translateX(-14vw) translateY(57vh) scale(0.5);
  }
  85.7142857143% {
    transform: translateX(20vw) translateY(-24vh) scale(0.27);
  }
  90.4761904762% {
    transform: translateX(-9vw) translateY(60vh) scale(0.3);
  }
  95.2380952381% {
    transform: translateX(19vw) translateY(51vh) scale(0.65);
  }
  100% {
    transform: translateX(31vw) translateY(16vh) scale(0.31);
  }
}
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 12s;
}
.firefly:nth-child(5)::after {
  animation-duration: 12s, 5683ms;
  animation-delay: 0ms, 7014ms;
}

@keyframes move5 {
  0% {
    transform: translateX(41vw) translateY(-12vh) scale(0.57);
  }
  4.7619047619% {
    transform: translateX(-8vw) translateY(-34vh) scale(0.66);
  }
  9.5238095238% {
    transform: translateX(55vw) translateY(45vh) scale(0.8);
  }
  14.2857142857% {
    transform: translateX(-9vw) translateY(-25vh) scale(0.79);
  }
  19.0476190476% {
    transform: translateX(26vw) translateY(27vh) scale(0.48);
  }
  23.8095238095% {
    transform: translateX(-1vw) translateY(-20vh) scale(0.31);
  }
  28.5714285714% {
    transform: translateX(6vw) translateY(-20vh) scale(0.86);
  }
  33.3333333333% {
    transform: translateX(-29vw) translateY(-30vh) scale(0.62);
  }
  38.0952380952% {
    transform: translateX(48vw) translateY(-9vh) scale(0.54);
  }
  42.8571428571% {
    transform: translateX(-8vw) translateY(35vh) scale(0.27);
  }
  47.619047619% {
    transform: translateX(59vw) translateY(32vh) scale(0.93);
  }
  52.380952381% {
    transform: translateX(50vw) translateY(-12vh) scale(0.91);
  }
  57.1428571429% {
    transform: translateX(44vw) translateY(38vh) scale(0.85);
  }
  61.9047619048% {
    transform: translateX(-26vw) translateY(-28vh) scale(0.27);
  }
  66.6666666667% {
    transform: translateX(46vw) translateY(40vh) scale(0.91);
  }
  71.4285714286% {
    transform: translateX(28vw) translateY(0vh) scale(0.87);
  }
  76.1904761905% {
    transform: translateX(25vw) translateY(13vh) scale(0.93);
  }
  80.9523809524% {
    transform: translateX(24vw) translateY(40vh) scale(0.89);
  }
  85.7142857143% {
    transform: translateX(7vw) translateY(-10vh) scale(0.69);
  }
  90.4761904762% {
    transform: translateX(-38vw) translateY(-39vh) scale(0.79);
  }
  95.2380952381% {
    transform: translateX(7vw) translateY(-35vh) scale(0.78);
  }
  100% {
    transform: translateX(-32vw) translateY(54vh) scale(0.54);
  }
}
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 16s;
}
.firefly:nth-child(6)::after {
  animation-duration: 16s, 9944ms;
  animation-delay: 0ms, 4449ms;
}

@keyframes move6 {
  0% {
    transform: translateX(-11vw) translateY(46vh) scale(0.84);
  }
  4% {
    transform: translateX(0vw) translateY(12vh) scale(0.29);
  }
  8% {
    transform: translateX(4vw) translateY(7vh) scale(0.9);
  }
  12% {
    transform: translateX(50vw) translateY(-19vh) scale(0.4);
  }
  16% {
    transform: translateX(-28vw) translateY(24vh) scale(0.85);
  }
  20% {
    transform: translateX(38vw) translateY(38vh) scale(0.72);
  }
  24% {
    transform: translateX(49vw) translateY(4vh) scale(1);
  }
  28% {
    transform: translateX(18vw) translateY(24vh) scale(0.47);
  }
  32% {
    transform: translateX(20vw) translateY(-12vh) scale(0.98);
  }
  36% {
    transform: translateX(36vw) translateY(-24vh) scale(0.78);
  }
  40% {
    transform: translateX(36vw) translateY(-2vh) scale(0.73);
  }
  44% {
    transform: translateX(-39vw) translateY(14vh) scale(0.69);
  }
  48% {
    transform: translateX(26vw) translateY(-35vh) scale(0.44);
  }
  52% {
    transform: translateX(-19vw) translateY(-4vh) scale(0.42);
  }
  56% {
    transform: translateX(19vw) translateY(56vh) scale(0.34);
  }
  60% {
    transform: translateX(56vw) translateY(31vh) scale(0.45);
  }
  64% {
    transform: translateX(50vw) translateY(21vh) scale(0.4);
  }
  68% {
    transform: translateX(-24vw) translateY(-36vh) scale(0.47);
  }
  72% {
    transform: translateX(48vw) translateY(58vh) scale(0.43);
  }
  76% {
    transform: translateX(25vw) translateY(24vh) scale(0.44);
  }
  80% {
    transform: translateX(3vw) translateY(37vh) scale(0.87);
  }
  84% {
    transform: translateX(52vw) translateY(-3vh) scale(0.73);
  }
  88% {
    transform: translateX(-37vw) translateY(-24vh) scale(0.73);
  }
  92% {
    transform: translateX(14vw) translateY(50vh) scale(0.63);
  }
  96% {
    transform: translateX(-29vw) translateY(43vh) scale(0.89);
  }
  100% {
    transform: translateX(0vw) translateY(29vh) scale(1);
  }
}
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 14s;
}
.firefly:nth-child(7)::after {
  animation-duration: 14s, 7444ms;
  animation-delay: 0ms, 3507ms;
}

@keyframes move7 {
  0% {
    transform: translateX(-8vw) translateY(14vh) scale(0.96);
  }
  5.8823529412% {
    transform: translateX(27vw) translateY(-32vh) scale(0.74);
  }
  11.7647058824% {
    transform: translateX(60vw) translateY(21vh) scale(0.45);
  }
  17.6470588235% {
    transform: translateX(18vw) translateY(49vh) scale(0.84);
  }
  23.5294117647% {
    transform: translateX(44vw) translateY(50vh) scale(0.58);
  }
  29.4117647059% {
    transform: translateX(-8vw) translateY(-5vh) scale(0.79);
  }
  35.2941176471% {
    transform: translateX(41vw) translateY(19vh) scale(0.7);
  }
  41.1764705882% {
    transform: translateX(-28vw) translateY(51vh) scale(0.86);
  }
  47.0588235294% {
    transform: translateX(16vw) translateY(4vh) scale(0.33);
  }
  52.9411764706% {
    transform: translateX(29vw) translateY(-4vh) scale(0.93);
  }
  58.8235294118% {
    transform: translateX(-25vw) translateY(35vh) scale(0.39);
  }
  64.7058823529% {
    transform: translateX(60vw) translateY(18vh) scale(0.98);
  }
  70.5882352941% {
    transform: translateX(-14vw) translateY(58vh) scale(0.82);
  }
  76.4705882353% {
    transform: translateX(-37vw) translateY(-26vh) scale(0.51);
  }
  82.3529411765% {
    transform: translateX(-24vw) translateY(-21vh) scale(0.36);
  }
  88.2352941176% {
    transform: translateX(57vw) translateY(52vh) scale(0.79);
  }
  94.1176470588% {
    transform: translateX(7vw) translateY(11vh) scale(0.87);
  }
  100% {
    transform: translateX(-33vw) translateY(39vh) scale(0.68);
  }
}
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 16s;
}
.firefly:nth-child(8)::after {
  animation-duration: 16s, 9354ms;
  animation-delay: 0ms, 4590ms;
}

@keyframes move8 {
  0% {
    transform: translateX(-14vw) translateY(47vh) scale(0.99);
  }
  4% {
    transform: translateX(57vw) translateY(23vh) scale(0.64);
  }
  8% {
    transform: translateX(-29vw) translateY(53vh) scale(0.83);
  }
  12% {
    transform: translateX(-21vw) translateY(7vh) scale(0.93);
  }
  16% {
    transform: translateX(-16vw) translateY(-24vh) scale(0.63);
  }
  20% {
    transform: translateX(-35vw) translateY(-15vh) scale(0.69);
  }
  24% {
    transform: translateX(-18vw) translateY(46vh) scale(0.71);
  }
  28% {
    transform: translateX(-23vw) translateY(54vh) scale(0.26);
  }
  32% {
    transform: translateX(-21vw) translateY(9vh) scale(0.99);
  }
  36% {
    transform: translateX(29vw) translateY(11vh) scale(0.79);
  }
  40% {
    transform: translateX(-17vw) translateY(43vh) scale(0.91);
  }
  44% {
    transform: translateX(24vw) translateY(21vh) scale(0.49);
  }
  48% {
    transform: translateX(-4vw) translateY(-39vh) scale(0.35);
  }
  52% {
    transform: translateX(-16vw) translateY(-8vh) scale(0.83);
  }
  56% {
    transform: translateX(39vw) translateY(-13vh) scale(0.63);
  }
  60% {
    transform: translateX(44vw) translateY(23vh) scale(0.46);
  }
  64% {
    transform: translateX(11vw) translateY(47vh) scale(0.31);
  }
  68% {
    transform: translateX(-39vw) translateY(0vh) scale(0.26);
  }
  72% {
    transform: translateX(-6vw) translateY(-34vh) scale(0.33);
  }
  76% {
    transform: translateX(-9vw) translateY(37vh) scale(0.66);
  }
  80% {
    transform: translateX(17vw) translateY(18vh) scale(0.66);
  }
  84% {
    transform: translateX(38vw) translateY(-5vh) scale(0.61);
  }
  88% {
    transform: translateX(-33vw) translateY(44vh) scale(0.81);
  }
  92% {
    transform: translateX(3vw) translateY(3vh) scale(0.82);
  }
  96% {
    transform: translateX(53vw) translateY(-2vh) scale(0.6);
  }
  100% {
    transform: translateX(46vw) translateY(13vh) scale(0.77);
  }
}
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 11s;
}
.firefly:nth-child(9)::after {
  animation-duration: 11s, 6496ms;
  animation-delay: 0ms, 2793ms;
}

@keyframes move9 {
  0% {
    transform: translateX(10vw) translateY(4vh) scale(0.79);
  }
  4.5454545455% {
    transform: translateX(-21vw) translateY(-4vh) scale(0.3);
  }
  9.0909090909% {
    transform: translateX(48vw) translateY(-5vh) scale(0.7);
  }
  13.6363636364% {
    transform: translateX(-21vw) translateY(-33vh) scale(0.38);
  }
  18.1818181818% {
    transform: translateX(34vw) translateY(3vh) scale(0.7);
  }
  22.7272727273% {
    transform: translateX(-23vw) translateY(26vh) scale(0.66);
  }
  27.2727272727% {
    transform: translateX(52vw) translateY(38vh) scale(0.65);
  }
  31.8181818182% {
    transform: translateX(28vw) translateY(35vh) scale(0.36);
  }
  36.3636363636% {
    transform: translateX(-18vw) translateY(58vh) scale(0.73);
  }
  40.9090909091% {
    transform: translateX(-39vw) translateY(-13vh) scale(0.6);
  }
  45.4545454545% {
    transform: translateX(25vw) translateY(-26vh) scale(0.29);
  }
  50% {
    transform: translateX(43vw) translateY(-24vh) scale(0.98);
  }
  54.5454545455% {
    transform: translateX(54vw) translateY(-24vh) scale(0.51);
  }
  59.0909090909% {
    transform: translateX(47vw) translateY(-38vh) scale(0.31);
  }
  63.6363636364% {
    transform: translateX(-17vw) translateY(10vh) scale(0.75);
  }
  68.1818181818% {
    transform: translateX(-23vw) translateY(18vh) scale(0.74);
  }
  72.7272727273% {
    transform: translateX(30vw) translateY(53vh) scale(0.55);
  }
  77.2727272727% {
    transform: translateX(21vw) translateY(8vh) scale(0.85);
  }
  81.8181818182% {
    transform: translateX(-37vw) translateY(41vh) scale(0.42);
  }
  86.3636363636% {
    transform: translateX(-36vw) translateY(-27vh) scale(0.87);
  }
  90.9090909091% {
    transform: translateX(-26vw) translateY(43vh) scale(0.69);
  }
  95.4545454545% {
    transform: translateX(44vw) translateY(36vh) scale(0.54);
  }
  100% {
    transform: translateX(22vw) translateY(-27vh) scale(0.89);
  }
}
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 10s;
}
.firefly:nth-child(10)::after {
  animation-duration: 10s, 9281ms;
  animation-delay: 0ms, 7728ms;
}

@keyframes move10 {
  0% {
    transform: translateX(52vw) translateY(-33vh) scale(0.84);
  }
  4.1666666667% {
    transform: translateX(10vw) translateY(-16vh) scale(0.34);
  }
  8.3333333333% {
    transform: translateX(48vw) translateY(-1vh) scale(0.78);
  }
  12.5% {
    transform: translateX(56vw) translateY(19vh) scale(0.33);
  }
  16.6666666667% {
    transform: translateX(9vw) translateY(0vh) scale(0.29);
  }
  20.8333333333% {
    transform: translateX(54vw) translateY(-16vh) scale(0.97);
  }
  25% {
    transform: translateX(-26vw) translateY(-29vh) scale(0.9);
  }
  29.1666666667% {
    transform: translateX(24vw) translateY(44vh) scale(0.86);
  }
  33.3333333333% {
    transform: translateX(-35vw) translateY(-33vh) scale(0.83);
  }
  37.5% {
    transform: translateX(-38vw) translateY(22vh) scale(0.27);
  }
  41.6666666667% {
    transform: translateX(17vw) translateY(0vh) scale(0.61);
  }
  45.8333333333% {
    transform: translateX(-24vw) translateY(27vh) scale(0.33);
  }
  50% {
    transform: translateX(24vw) translateY(-7vh) scale(0.98);
  }
  54.1666666667% {
    transform: translateX(-36vw) translateY(1vh) scale(0.36);
  }
  58.3333333333% {
    transform: translateX(-38vw) translateY(21vh) scale(0.75);
  }
  62.5% {
    transform: translateX(38vw) translateY(47vh) scale(0.38);
  }
  66.6666666667% {
    transform: translateX(52vw) translateY(-19vh) scale(0.61);
  }
  70.8333333333% {
    transform: translateX(-38vw) translateY(16vh) scale(0.64);
  }
  75% {
    transform: translateX(48vw) translateY(-18vh) scale(0.68);
  }
  79.1666666667% {
    transform: translateX(58vw) translateY(44vh) scale(0.91);
  }
  83.3333333333% {
    transform: translateX(28vw) translateY(36vh) scale(0.54);
  }
  87.5% {
    transform: translateX(-29vw) translateY(26vh) scale(0.58);
  }
  91.6666666667% {
    transform: translateX(54vw) translateY(50vh) scale(0.49);
  }
  95.8333333333% {
    transform: translateX(-5vw) translateY(-19vh) scale(0.52);
  }
  100% {
    transform: translateX(40vw) translateY(-16vh) scale(0.46);
  }
}
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 13s;
}
.firefly:nth-child(11)::after {
  animation-duration: 13s, 6060ms;
  animation-delay: 0ms, 639ms;
}

@keyframes move11 {
  0% {
    transform: translateX(44vw) translateY(25vh) scale(0.99);
  }
  4.5454545455% {
    transform: translateX(1vw) translateY(41vh) scale(0.91);
  }
  9.0909090909% {
    transform: translateX(49vw) translateY(20vh) scale(0.67);
  }
  13.6363636364% {
    transform: translateX(13vw) translateY(-39vh) scale(0.49);
  }
  18.1818181818% {
    transform: translateX(-26vw) translateY(28vh) scale(0.47);
  }
  22.7272727273% {
    transform: translateX(-15vw) translateY(44vh) scale(0.82);
  }
  27.2727272727% {
    transform: translateX(51vw) translateY(-17vh) scale(0.56);
  }
  31.8181818182% {
    transform: translateX(2vw) translateY(-12vh) scale(0.52);
  }
  36.3636363636% {
    transform: translateX(55vw) translateY(11vh) scale(0.35);
  }
  40.9090909091% {
    transform: translateX(-19vw) translateY(45vh) scale(0.32);
  }
  45.4545454545% {
    transform: translateX(-36vw) translateY(-1vh) scale(0.78);
  }
  50% {
    transform: translateX(-4vw) translateY(33vh) scale(0.36);
  }
  54.5454545455% {
    transform: translateX(57vw) translateY(-12vh) scale(0.82);
  }
  59.0909090909% {
    transform: translateX(51vw) translateY(24vh) scale(0.55);
  }
  63.6363636364% {
    transform: translateX(16vw) translateY(-15vh) scale(0.72);
  }
  68.1818181818% {
    transform: translateX(41vw) translateY(16vh) scale(0.59);
  }
  72.7272727273% {
    transform: translateX(-28vw) translateY(12vh) scale(0.82);
  }
  77.2727272727% {
    transform: translateX(60vw) translateY(-36vh) scale(0.81);
  }
  81.8181818182% {
    transform: translateX(16vw) translateY(20vh) scale(0.69);
  }
  86.3636363636% {
    transform: translateX(28vw) translateY(36vh) scale(0.71);
  }
  90.9090909091% {
    transform: translateX(27vw) translateY(17vh) scale(0.99);
  }
  95.4545454545% {
    transform: translateX(-27vw) translateY(23vh) scale(0.36);
  }
  100% {
    transform: translateX(60vw) translateY(-18vh) scale(0.39);
  }
}
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 13s;
}
.firefly:nth-child(12)::after {
  animation-duration: 13s, 5513ms;
  animation-delay: 0ms, 8480ms;
}

@keyframes move12 {
  0% {
    transform: translateX(23vw) translateY(35vh) scale(0.98);
  }
  5.2631578947% {
    transform: translateX(38vw) translateY(40vh) scale(0.5);
  }
  10.5263157895% {
    transform: translateX(29vw) translateY(13vh) scale(0.53);
  }
  15.7894736842% {
    transform: translateX(47vw) translateY(20vh) scale(0.93);
  }
  21.0526315789% {
    transform: translateX(-33vw) translateY(-22vh) scale(0.75);
  }
  26.3157894737% {
    transform: translateX(10vw) translateY(-30vh) scale(0.97);
  }
  31.5789473684% {
    transform: translateX(44vw) translateY(27vh) scale(0.65);
  }
  36.8421052632% {
    transform: translateX(12vw) translateY(-9vh) scale(0.98);
  }
  42.1052631579% {
    transform: translateX(-30vw) translateY(-28vh) scale(0.3);
  }
  47.3684210526% {
    transform: translateX(-28vw) translateY(-24vh) scale(0.32);
  }
  52.6315789474% {
    transform: translateX(57vw) translateY(26vh) scale(0.62);
  }
  57.8947368421% {
    transform: translateX(26vw) translateY(39vh) scale(0.61);
  }
  63.1578947368% {
    transform: translateX(-16vw) translateY(-36vh) scale(0.68);
  }
  68.4210526316% {
    transform: translateX(-31vw) translateY(28vh) scale(0.64);
  }
  73.6842105263% {
    transform: translateX(3vw) translateY(34vh) scale(0.65);
  }
  78.9473684211% {
    transform: translateX(5vw) translateY(-27vh) scale(0.33);
  }
  84.2105263158% {
    transform: translateX(48vw) translateY(59vh) scale(0.56);
  }
  89.4736842105% {
    transform: translateX(40vw) translateY(53vh) scale(0.83);
  }
  94.7368421053% {
    transform: translateX(-2vw) translateY(-17vh) scale(0.84);
  }
  100% {
    transform: translateX(-19vw) translateY(-5vh) scale(0.6);
  }
}
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 13s;
}
.firefly:nth-child(13)::after {
  animation-duration: 13s, 5251ms;
  animation-delay: 0ms, 2961ms;
}

@keyframes move13 {
  0% {
    transform: translateX(52vw) translateY(-21vh) scale(0.82);
  }
  4.1666666667% {
    transform: translateX(24vw) translateY(59vh) scale(0.72);
  }
  8.3333333333% {
    transform: translateX(46vw) translateY(6vh) scale(0.91);
  }
  12.5% {
    transform: translateX(59vw) translateY(29vh) scale(0.99);
  }
  16.6666666667% {
    transform: translateX(2vw) translateY(2vh) scale(0.43);
  }
  20.8333333333% {
    transform: translateX(-13vw) translateY(52vh) scale(0.92);
  }
  25% {
    transform: translateX(48vw) translateY(41vh) scale(0.64);
  }
  29.1666666667% {
    transform: translateX(-29vw) translateY(-19vh) scale(0.31);
  }
  33.3333333333% {
    transform: translateX(13vw) translateY(-20vh) scale(0.42);
  }
  37.5% {
    transform: translateX(-31vw) translateY(49vh) scale(0.75);
  }
  41.6666666667% {
    transform: translateX(56vw) translateY(47vh) scale(0.31);
  }
  45.8333333333% {
    transform: translateX(28vw) translateY(37vh) scale(0.56);
  }
  50% {
    transform: translateX(-2vw) translateY(7vh) scale(0.87);
  }
  54.1666666667% {
    transform: translateX(-33vw) translateY(38vh) scale(0.79);
  }
  58.3333333333% {
    transform: translateX(34vw) translateY(32vh) scale(0.47);
  }
  62.5% {
    transform: translateX(-24vw) translateY(-18vh) scale(0.82);
  }
  66.6666666667% {
    transform: translateX(50vw) translateY(44vh) scale(0.41);
  }
  70.8333333333% {
    transform: translateX(-7vw) translateY(-3vh) scale(0.95);
  }
  75% {
    transform: translateX(29vw) translateY(17vh) scale(0.74);
  }
  79.1666666667% {
    transform: translateX(54vw) translateY(19vh) scale(0.52);
  }
  83.3333333333% {
    transform: translateX(0vw) translateY(5vh) scale(0.58);
  }
  87.5% {
    transform: translateX(8vw) translateY(20vh) scale(0.79);
  }
  91.6666666667% {
    transform: translateX(16vw) translateY(36vh) scale(0.41);
  }
  95.8333333333% {
    transform: translateX(-36vw) translateY(36vh) scale(0.26);
  }
  100% {
    transform: translateX(7vw) translateY(33vh) scale(0.62);
  }
}
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 18s;
}
.firefly:nth-child(14)::after {
  animation-duration: 18s, 10371ms;
  animation-delay: 0ms, 1068ms;
}

@keyframes move14 {
  0% {
    transform: translateX(-30vw) translateY(-7vh) scale(0.4);
  }
  3.8461538462% {
    transform: translateX(42vw) translateY(-32vh) scale(0.67);
  }
  7.6923076923% {
    transform: translateX(-7vw) translateY(-23vh) scale(0.94);
  }
  11.5384615385% {
    transform: translateX(-20vw) translateY(-12vh) scale(0.33);
  }
  15.3846153846% {
    transform: translateX(0vw) translateY(33vh) scale(0.65);
  }
  19.2307692308% {
    transform: translateX(-32vw) translateY(4vh) scale(0.77);
  }
  23.0769230769% {
    transform: translateX(35vw) translateY(11vh) scale(0.38);
  }
  26.9230769231% {
    transform: translateX(0vw) translateY(-33vh) scale(0.67);
  }
  30.7692307692% {
    transform: translateX(-17vw) translateY(17vh) scale(0.59);
  }
  34.6153846154% {
    transform: translateX(39vw) translateY(47vh) scale(0.77);
  }
  38.4615384615% {
    transform: translateX(-17vw) translateY(30vh) scale(0.71);
  }
  42.3076923077% {
    transform: translateX(-7vw) translateY(-29vh) scale(0.74);
  }
  46.1538461538% {
    transform: translateX(60vw) translateY(38vh) scale(0.99);
  }
  50% {
    transform: translateX(26vw) translateY(29vh) scale(0.5);
  }
  53.8461538462% {
    transform: translateX(-17vw) translateY(54vh) scale(0.29);
  }
  57.6923076923% {
    transform: translateX(4vw) translateY(-21vh) scale(0.85);
  }
  61.5384615385% {
    transform: translateX(30vw) translateY(60vh) scale(0.35);
  }
  65.3846153846% {
    transform: translateX(-15vw) translateY(-31vh) scale(0.49);
  }
  69.2307692308% {
    transform: translateX(-39vw) translateY(-22vh) scale(0.89);
  }
  73.0769230769% {
    transform: translateX(-35vw) translateY(27vh) scale(0.99);
  }
  76.9230769231% {
    transform: translateX(16vw) translateY(18vh) scale(0.59);
  }
  80.7692307692% {
    transform: translateX(-9vw) translateY(-25vh) scale(0.41);
  }
  84.6153846154% {
    transform: translateX(12vw) translateY(33vh) scale(0.39);
  }
  88.4615384615% {
    transform: translateX(-26vw) translateY(27vh) scale(0.48);
  }
  92.3076923077% {
    transform: translateX(-5vw) translateY(13vh) scale(0.91);
  }
  96.1538461538% {
    transform: translateX(-39vw) translateY(7vh) scale(0.63);
  }
  100% {
    transform: translateX(41vw) translateY(-39vh) scale(0.53);
  }
}
.firefly:nth-child(15) {
  animation-name: move15;
}
.firefly:nth-child(15)::before {
  animation-duration: 11s;
}
.firefly:nth-child(15)::after {
  animation-duration: 11s, 9235ms;
  animation-delay: 0ms, 812ms;
}

@keyframes move15 {
  0% {
    transform: translateX(12vw) translateY(40vh) scale(0.92);
  }
  3.5714285714% {
    transform: translateX(-4vw) translateY(-2vh) scale(0.36);
  }
  7.1428571429% {
    transform: translateX(-21vw) translateY(21vh) scale(0.48);
  }
  10.7142857143% {
    transform: translateX(-26vw) translateY(-16vh) scale(0.38);
  }
  14.2857142857% {
    transform: translateX(-5vw) translateY(-33vh) scale(0.34);
  }
  17.8571428571% {
    transform: translateX(16vw) translateY(-12vh) scale(0.28);
  }
  21.4285714286% {
    transform: translateX(29vw) translateY(37vh) scale(0.31);
  }
  25% {
    transform: translateX(20vw) translateY(36vh) scale(0.33);
  }
  28.5714285714% {
    transform: translateX(44vw) translateY(47vh) scale(0.3);
  }
  32.1428571429% {
    transform: translateX(-36vw) translateY(-22vh) scale(0.75);
  }
  35.7142857143% {
    transform: translateX(21vw) translateY(25vh) scale(0.48);
  }
  39.2857142857% {
    transform: translateX(2vw) translateY(26vh) scale(0.43);
  }
  42.8571428571% {
    transform: translateX(13vw) translateY(-4vh) scale(0.47);
  }
  46.4285714286% {
    transform: translateX(-6vw) translateY(-26vh) scale(0.56);
  }
  50% {
    transform: translateX(-11vw) translateY(-11vh) scale(0.72);
  }
  53.5714285714% {
    transform: translateX(-30vw) translateY(-16vh) scale(0.77);
  }
  57.1428571429% {
    transform: translateX(-22vw) translateY(33vh) scale(0.45);
  }
  60.7142857143% {
    transform: translateX(-8vw) translateY(-4vh) scale(0.65);
  }
  64.2857142857% {
    transform: translateX(58vw) translateY(54vh) scale(0.4);
  }
  67.8571428571% {
    transform: translateX(54vw) translateY(36vh) scale(0.83);
  }
  71.4285714286% {
    transform: translateX(-34vw) translateY(-15vh) scale(0.86);
  }
  75% {
    transform: translateX(18vw) translateY(-15vh) scale(0.4);
  }
  78.5714285714% {
    transform: translateX(34vw) translateY(-36vh) scale(0.56);
  }
  82.1428571429% {
    transform: translateX(5vw) translateY(60vh) scale(0.42);
  }
  85.7142857143% {
    transform: translateX(-27vw) translateY(51vh) scale(1);
  }
  89.2857142857% {
    transform: translateX(-6vw) translateY(39vh) scale(0.91);
  }
  92.8571428571% {
    transform: translateX(54vw) translateY(-31vh) scale(0.69);
  }
  96.4285714286% {
    transform: translateX(60vw) translateY(-2vh) scale(0.28);
  }
  100% {
    transform: translateX(-6vw) translateY(4vh) scale(0.62);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}
/*---HERO------------------------------------*/
/* Hero section styles */
.hero {
  background: url("/images/soullis-calling-hero-bg.jpg") no-repeat center center/cover;
  height: 80vh;
  min-height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  padding-bottom: 6rem;
}

.hero-logo {
  width: 44vw;
  max-width: 650px;
  min-width: 300px;
  margin-bottom: 0rem;
  margin-top: 12rem;
}
@media (max-width: 1400px) {
  .hero-logo {
    width: 42vw;
  }
}
@media (max-width: 500px) {
  .hero-logo {
    width: 44vw;
    margin-top: 0rem;
  }
}

/* ---- HERO BACKGROUND VIDEO ---- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100vh;
  min-width: 177.78vh; /* fallback for tall screens */
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.hero-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* dim overlay */
  z-index: 1;
}

/* Make sure hero content stays on top */
.hero-content {
  position: relative;
  z-index: 3;
}

/*---EPIC ADVENTURE SECTION------------------------------------*/
.epic-adventure {
  background: linear-gradient(to bottom, #081129 40%, #173278);
  width: calc(60vw - 8rem);
  max-width: calc(860px - 8rem);
  padding: 40px 4rem;
  border-radius: 44px;
  text-align: center;
  margin: -150px auto 20px;
  position: relative;
  z-index: 1;
  font-weight: 400;
}
@media (max-width: 766px) {
  .epic-adventure {
    width: calc(80vw - 8rem);
    padding: 40px 4rem;
  }
}
@media (max-width: 400px) {
  .epic-adventure {
    width: calc(100% - 3rem);
    padding: 5rem 1.5rem 5rem 1.5rem;
    border-radius: 0px;
  }
}

.epic-adventure h2 {
  color: #FFA600;
}

.epic-adventure p {
  color: #CBD9FF;
}

/*---CHARACTER SECTION CONTAINER------------------------------------*/
.characters-section {
  width: 100%;
  margin-top: -200px;
  position: relative;
  color: #001A63;
}
@media (max-width: 1200px) {
  .characters-section {
    margin-top: -210px;
  }
}
@media (max-width: 766px) {
  .characters-section {
    margin-top: -180px;
  }
}
@media (max-width: 500px) {
  .characters-section {
    margin-top: -250px;
  }
}

/*---INDIVIDUAL CHARACTER CONTAINER------------------------------------*/
.char-desc-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.char-valenne-bg {
  background-image: url("/images/char-valenne-bg.jpg");
}

.char-marlon-bg {
  background-image: url("/images/char-marlon-bg.jpg");
}

.char-luntra-bg {
  background-image: url("/images/char-luntra-bg.jpg");
}

.characters-title {
  margin: 0 auto;
  padding: 300px 0 50px 0;
  text-align: center;
  width: 100%;
}
@media (max-width: 766px) {
  .characters-title {
    padding: 250px 0 0 0;
    margin-bottom: -3rem;
  }
}

/*---CHARACTER INFO AND IMAGE COLUMNS------------------------------------*/
.char-columns {
  display: flex;
  max-width: 80%;
  margin: 0 auto;
  flex: 1;
  position: relative;
  z-index: 2; /* To ensure it appears above the background blur */
}
@media (max-width: 1400px) {
  .char-columns {
    max-width: 90%;
  }
}
@media (max-width: 766px) {
  .char-columns {
    flex-direction: column;
    align-items: center;
  }
}

.char-columns-reverse {
  flex-direction: row-reverse;
}
@media (max-width: 766px) {
  .char-columns-reverse {
    flex-direction: column;
    align-items: center;
  }
}

/*---CHARACTER INFO------------------------------------*/
.char-info-col {
  position: relative;
  border-radius: 44px;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  width: calc(40% - 10rem);
  max-width: 450px;
  margin: 9rem 5rem 5rem 5rem;
  /*  Glass border gradient overlay  */
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.15);
}
.char-info-col::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.15) 100%);
  /* Standard + WebKit masks for compatibility */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}
@media (max-width: 1400px) {
  .char-info-col {
    width: calc(40% - 10rem);
    max-width: 350px;
  }
}
@media (max-width: 1200px) {
  .char-info-col {
    width: 100%;
    max-width: 350px;
    margin: 5rem 0rem 0rem 0rem;
  }
}
@media (max-width: 766px) {
  .char-info-col {
    max-width: calc(860px - 4rem);
    width: calc(80vw - 4rem);
    padding: 40px 3rem;
    margin: 2rem auto 0 auto;
  }
}
/* Character name */
.character-name {
  margin: 0;
  padding-bottom: 0.4rem;
}

/* Character subtext */
.subtext {
  font-weight: 600;
}

/* Character badges */
.stat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.char-badge {
  background-color: #001A63;
  color: #CBD9FF;
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.char-badge i {
  margin: -2px 8px 0px 0px;
}

.char-desc {
  padding-top: 0.5rem;
  margin-bottom: 0;
}

/*---CHARACTER IMAGE------------------------------------*/
.char-img-col {
  flex: 1;
  position: relative;
  z-index: 2;
  margin: 0px;
  padding: 0px;
}

.character-image {
  padding-bottom: 0px;
  min-width: 560px;
  width: 32vw;
  display: block;
  z-index: 5;
}
@media (max-width: 1400px) {
  .character-image {
    width: 40vw;
  }
}
@media (max-width: 1200px) {
  .character-image {
    justify-self: flex-start;
  }
}
@media (max-width: 766px) {
  .character-image {
    width: 100%;
    min-width: 300px;
  }
}

/*---ELEMENTS SECTION------------------------------------*/
.elements-section {
  background-image: url("/images/world-map-bg.jpg");
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
}

.elements-wrap {
  width: 80%;
  display: flex;
  gap: 6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto;
  padding: 10rem 0;
  justify-content: center;
}
@media (max-width: 766px) {
  .elements-wrap {
    flex-direction: column-reverse;
    width: 100%;
    gap: 2rem;
    padding: 8rem 0;
    text-align: center;
  }
}

/* Style for left and right columns */
.left-col, .right-col {
  flex: 1;
  width: 50%;
  max-width: 500px;
}
@media (max-width: 766px) {
  .left-col, .right-col {
    width: 80%;
    max-width: 80%;
  }
}

.elements-image {
  width: 80%;
}
@media (max-width: 766px) {
  .elements-image {
    width: 90%;
    max-width: 90%;
  }
}

/*---SCROLLING TEXT SECTION------------------------------------*/
.scrolling-section {
  background: #FFA600;
  color: #081129;
  padding: 1rem 0;
}

.scrolling-text {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #FFA600;
}

.scrolling-text .rail {
  display: flex;
}

.scrolling-text .rail h2 {
  white-space: nowrap;
  margin: 0 0 0 0;
  color: var(--color-surface-white);
}

.bullet {
  margin: 0 3rem;
}
@media (max-width: 766px) {
  .bullet {
    color: #FFA600;
  }
}

/*---CALLING CTA SECTION------------------------------------*/
.calling-section {
  display: flex;
  background-image: url("/images/calling-bg.jpg");
  background-size: cover;
  background-position: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 10%;
  color: #FFFFFF;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.calling-wrap {
  width: 50%;
  max-width: calc(860px - 8rem);
}
@media (max-width: 766px) {
  .calling-wrap {
    width: 90%;
    max-width: 90%;
  }
}

/*---NEWS SECTION------------------------------------*/
.news-section {
  background: linear-gradient(to bottom, #081129 40%, #173278);
  width: 100%;
}

.news-wrap {
  width: 80%;
  display: flex;
  gap: 6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto;
  padding: 10rem 0;
  justify-content: center;
  color: #CBD9FF;
  flex-direction: row;
  /* Email sharing disclosure */
}
@media (max-width: 1200px) {
  .news-wrap {
    flex-direction: column;
    width: 100%;
    gap: 2rem;
    padding: 8rem 0;
    text-align: center;
  }
}
.news-wrap h2 {
  color: #FFA600;
}
.news-wrap .left-col {
  text-align: center;
  max-width: 440px;
}
.news-wrap .right-col {
  width: 100%;
  max-width: 600px;
}
@media (max-width: 500px) {
  .news-wrap .right-col {
    width: 80%;
  }
}
.news-wrap .disclosure {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #5D667E;
  line-height: 1.4;
  max-width: 420px;
  margin-left: 0px;
  margin-right: auto;
  text-align: left;
}
@media (max-width: 1200px) {
  .news-wrap .disclosure {
    text-align: center;
    margin: 1rem auto 0 auto;
    width: 90%;
  }
}

/*---EMAIL SUBSCRIBE FORM------------------------------------*/
.email-subscribe-wrapper {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.email-subscribe-form {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.email-subscribe-form input[type=email]:focus {
  outline: none;
}
@media (max-width: 1200px) {
  .email-subscribe-form {
    flex-direction: column;
    width: 90%;
    gap: 0.5rem;
    text-align: center;
    margin: 0 auto;
  }
}

.email-subscribe-form input[type=email] {
  flex: 1;
  min-width: 200px;
  padding: 16px 24px;
  border-radius: 50px;
  font-size: 1rem;
  border: none;
  font-family: "Signika", Verdana, sans-serif;
  color: #081129;
  letter-spacing: 0.02rem;
}

.email-subscribe-form button {
  padding: 0.75rem 1.5rem;
  background-color: #FFA600;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 16px 24px;
  color: #885800;
  font-weight: 700;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-family: "Signika", Verdana, sans-serif;
}

.email-subscribe-form button:hover {
  background-color: darkorange;
}

.success-message {
  margin-top: 1rem;
  font-size: 1rem;
  color: #FFA600;
  display: none;
  text-align: left;
}
@media (max-width: 1200px) {
  .success-message {
    text-align: center;
  }
}

.success-message.visible {
  display: block;
}

.error-msg {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 5px;
  display: none;
  text-align: left;
}
@media (max-width: 1200px) {
  .error-msg {
    text-align: center;
  }
}

.error-msg.visible {
  display: block;
}

/*---FOOTER------------------------------------*/
footer {
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  padding: 3rem 3rem 1rem 3rem;
  color: #5D667E;
}
footer .logo img {
  width: 160px;
  padding-bottom: 1.5rem;
}
footer .links {
  font-size: 1.2rem;
  padding-bottom: 3rem;
}
footer .links span {
  padding: 0 0.2rem;
}
footer .disclosure {
  font-size: 0.8rem;
}
footer a {
  color: #5D667E;
}
footer a:hover {
  color: #FFFFFF;
}

/*---ERROR PAGE------------------------------------*/
.error-page-wrap {
  height: 100vh;
  width: calc(100vw - 6rem);
  background: linear-gradient(to bottom, #081129 20%, #173278);
  padding: 20vh 3rem 0 3rem;
}

.error-page {
  color: #FFFFFF;
  text-align: center;
}
.error-page .badge {
  margin-top: 2rem;
}
.error-page .badge:hover {
  background-color: darkorange;
}