.page-background {
    background: #3e4553 url(./84b2bfae1450b6be9932.png) no-repeat;
    background-size: cover;
}

.fp-overflow {
    position: relative !important;
}

.fp-auto-height {
    min-height: unset !important;
}

.fp-auto-height .fp-overflow {
    min-height: unset !important;
}

.audio-toggle {
    bottom: 3.25rem;
    cursor: pointer;
    height: 1.5rem;
    left: 3.5rem;
    position: fixed;
    width: 1.5rem;
    z-index: 99
}

.audio-toggle svg {
    opacity: 0.4;
}

.orange-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #E74E1B;
}

.green-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #008080;
}

.section-1 .heading {
    left: 13.7rem;
    position: absolute;
    top: 31vh;
    width: 46rem;
}

.section-1 .content {
    left: 13.7rem;
    position: absolute;
    top: 48vh;
    width: 42rem;
}

.section-1 .section-cta {
    left: 13.7rem;
    position: absolute;
    top: 70vh;
}

.section-character-image {
    position: fixed;
    bottom: -5%;
    right: 100%;
    transform: translateX(0%);
    width: 50%;
    object-fit: contain;
    max-height: 85%;
    opacity: 0;
    transition: all 2s ease-in-out, opacity 1s ease-in-out;
}

.section-character-image-1 {
    right: 0%;
    transform: translateX(0%);
    opacity: 1;
}

.section-character-image-2 {
    right: 100%;
    transform: translateX(80%);
    bottom: -15%;
    opacity: 1;
}

.section-character-image-3 {
    right: 100%;
    transform: translateX(80%);
    bottom: -5%;
    opacity: 1;
}

.section-1-circle {
    top: 50%;
    right: 25%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgb(62, 69, 83);
    transform: translate(150%, -35%);
    opacity: 0;
    transition: all 1s ease-in-out;
}

.section-1-circle.show {
    transform: translate(50%, -35%);
    opacity: 1;
}

.section-2-3-left-content-wrapper {
    position: fixed;
    top: 50%;
    left: 25%;
    width: 25%;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.section-2-3-left-content-wrapper.show {
    opacity: 1;
    transition: opacity 1s 1.5s ease-in-out;
}

.section-2 .right-content-wrapper,
.section-3 .right-content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-40%);
    width: 50%;
    padding-right: 10%;
    padding-left: 5%;
}

.section-2 .content-box,
.section-3 .content-box {
    background-color: #1E232C;
    border-radius: 7px;
    padding: 3vw 1.9vw;
}

.section-4 .content-wrapper {
    max-width: 860px;
    margin: auto;
}

.section-4 .content-wrapper .content {
    padding-left: 40px;
    padding-right: 40px;
}

.section-5 .content-wrapper {
    max-width: 860px;
    margin: auto;
}

.section-5 .content-wrapper .content {
    padding-left: 40px;
    padding-right: 40px;
}

.section-5 .content-wrapper .content-box {
    background-color: #1E232C;
    border-radius: 7px;
}

.section-6 .content-wrapper {
    max-width: 41vw;
    margin: auto;
}

.section-circle {
    top: 0;
    left: 50%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: all 1s ease-in-out, background-color 2s ease-in-out;
}

.section-6-orange-circle {
    background-color: #E74E1B;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.section-7-green-circle {
    background-color: #008080;
    left: 0 !important;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.section-7 .content-wrapper {
    max-width: 80vw;
    margin: auto;
}

.section-7 .content-box {
    background-color: #1E232C;
    border-radius: 7px;
}

.section-7 .title-wrapper {
    height: 100px;
}

.section-7 .green-dot {
    background-color: #008080;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    transform: translate(-125%, -18%);
}

.section-7 .orange-dot {
    background-color: #E74E1B;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    transform: translate(-125%, -18%);
}