/* Fonts */

@font-face {
    font-family: Wadik;
    src: url('./fonts/Wadik.otf');
}

@font-face {
    font-family: Montserrat;
    src: url('./fonts/Montserrat-Regular.otf');
}

/* No Select */

.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

input,
textarea,
button,
select,
a,
svg,
div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::selection {
    background-color: #f7971e;
}

/* Loading Page */

.loadingPage {
    position: fixed;
    background-image: linear-gradient(to bottom, #1a1926, 50%, #3e0a3d);
    width: 100vw;
    height: 100vh;
    z-index: 90000000000000000000000000000000000000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Defaults */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    color: #ffffff;
    scroll-behavior: smooth;
    /* cursor: none; */
}

body {
    background-color: #3f0b28;
    box-sizing: border-box;
    z-index: 100;
    font-size: 10px;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    font-family: Wadik;
}

.webgl {
    position: fixed;
    outline: none;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    z-index: 100000000;
    pointer-events: none;
}

main {
    position: absolute;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #ffffff;
}

/* Responsive */

/* Max-Width 1080px */

@media screen and (max-width: 1180px) {

    /* Responsive Commons */

    .dnToggleDiv {
        display: none;
    }

    .testimonialsButtonsMobileDiv {
        display: flex !important;
        background-color: transparent !important;
    }

    .cursorFollowerDiv {
        display: none !important;
    }

    .testimonialsSliderIndicatorsContainerDiv {
        display: none !important;
    }

    .headerTextResponsive {
        font-size: 3.5rem !important;
    }

    .footerMiddleDiv {
        flex-direction: column !important;
    }

    .footerCompetitionsDiv {
        padding-left: 0 !important;;
        flex-direction: column !important;
    }

    .footerTrustPilotDiv {
        padding-right: 0 !important;
        border-right: none !important;
    }

    .footerCompetitionsText {
        width: 90vw !important;
        text-align: center !important;
    }

    .footerEmailSubmitDiv {
        width: 90vw !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .othersSwordsDiv {
        display: none !important;
    }

    @media (orientation: portrait) {
        /* Portrait */

        html {
            font-size: 10px;
        }

        .chatBubbleDiv, .torch, .scrollDownDiv, .heroHandPhotoDiv, .gem, .leaderboardsCrownPhoto, .appShowcaseOverlaysActualLeftDiv, .appKnightLottie, .chooseChallengeScrollLeftPhoto, .chooseChallengeScrollRightPhoto, #buyChallengeDefault {
            display: none !important;
        }

        .mobileMenuDiv {
            display: flex !important;
        }

        .CTAButtonAnimate {
            transform: scale(0.8) !important;
        }

        .navLogoPhoto {
            transform: scale(0.75);
        }

        .navBar {
            position: absolute !important;
            padding: 0 !important;
            justify-content: flex-start !important;
        }

        .navMenuDiv {
            display: none !important;
        }

        .navBurgerMenuMobileDiv {
            display: flex !important;
        }
        
        .heroOverlaysContainerDiv {
            padding: 0 !important;
            align-items: center !important;
        }

        .heroHeaderDiv {
            width: 90vw !important;
            font-size: 5rem !important;
            line-height: 5rem !important;
            text-shadow: 0 0 1px #000000;
            text-align: center !important;
        }

        .heroSubHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .heroCTADiv {
            width: 100vw !important;
            justify-content: center !important;
            flex-direction: column !important;
        }

        .CTAButton {
            margin: 0 !important;
        }

        .ourTeamSection, .reverseSection, .newsSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .ourTeamTextDiv, .reverseTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .ourTeamHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamVideoContainerDiv, .reverseVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .ourTeamVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .ourTeamVideoBackgroundPhoto {
            width: 90vw !important;
        }    

        .footerLinksContainerDivMobileOnly {
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footerLinksContainerDiv {
            width: 90vw !important;
            flex-direction: column !important;
        }

        .footerLinkText {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }

        .footerTextDiv {
            width: 90vw !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .footerText {
            text-align: center !important;
        }

        .footerButton {
            margin-top: 2.5rem !important;
            margin-left: 0 !important;
        }

        .footerBottomDiv {
            width: 90vw !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .footerBootomLeft {
            text-align: left !important;
        }

        .footerBottomLinkText {
            text-align: right !important;
        }

        .othersSection {
            flex-direction: column !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .othersContainerOverlaysDiv {
            width: 100vw !important;
            justify-content: center !important;
        }

        .othersBackgroundPhoto {
            height: 65rem !important;
        }

        .othersContainerText {
            margin-block: 2rem !important;
        }

        .othersContainerDiv {
            margin-block: 2rem !important;
        }

        #othersContainerDiv1, #othersContainerDiv2 {
            transform: none !important;
            opacity: 1 !important;
        }

        .videoIframe {
            width: 90vw !important;
            height: calc(90vw * 37/65) !important;
        }

        .contactOverlaysText {
            width: 90vw !important;
        }
    }
      
    @media (orientation: landscape) {
        /* Landscape */

        html {
            font-size: 10px;
        }

        .chatBubbleDiv, .torch, .scrollDownDiv, .heroHandPhotoDiv, .gem, .leaderboardsCrownPhoto, .appShowcaseOverlaysActualLeftDiv, .appKnightLottie, .chooseChallengeScrollLeftPhoto, .chooseChallengeScrollRightPhoto, #buyChallengeDefault {
            display: none !important;
        }

        .mobileMenuDiv {
            display: flex !important;
            flex-direction: row-reverse !important;
            align-items: flex-start !important;
        }

        .CTAButtonAnimate {
            transform: scale(0.8) !important;
        }

        .navLogoPhoto {
            transform: scale(0.75);
        }

        .navBar {
            position: absolute !important;
            padding: 0 !important;
            justify-content: flex-start !important;
        }

        .navMenuDiv {
            display: none !important;
        }

        .navBurgerMenuMobileDiv {
            display: flex !important;
        }
        
        .heroOverlaysContainerDiv {
            padding: 0 !important;
            align-items: center !important;
        }

        .heroHeaderDiv {
            width: 90vw !important;
            font-size: 5rem !important;
            line-height: 5rem !important;
            text-shadow: 0 0 1px #000000;
        }

        .heroSubHeaderDiv {
            width: 90vw !important;
        }

        .heroCTADiv {
            width: 100vw !important;
            justify-content: center !important;
            flex-direction: column !important;
        }

        .CTAButton {
            margin: 0 !important;
        }

        .ourTeamSection, .reverseSection, .newsSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .ourTeamTextDiv, .reverseTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .ourTeamHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamVideoContainerDiv, .reverseVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .ourTeamVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .ourTeamVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .footerLinksContainerDivMobileOnly {
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footerLinksContainerDiv {
            width: 90vw !important;
            flex-direction: column !important;
        }

        .footerLinkText {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }

        .footerTextDiv {
            width: 90vw !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .footerText {
            text-align: center !important;
        }

        .footerButton {
            margin-top: 2.5rem !important;
            margin-left: 0 !important;
        }

        .footerBottomDiv {
            width: 90vw !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .footerBootomLeft {
            text-align: left !important;
        }

        .footerBottomLinkText {
            text-align: right !important;
        }

        .othersSection {
            flex-direction: column !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .othersContainerOverlaysDiv {
            width: min(90vw, 80rem) !important;
            justify-content: center !important;
        }

        .othersBackgroundPhoto {
            height: 65rem !important;
        }

        .othersContainerText {
            margin-block: 2rem !important;
        }

        .othersContainerDiv {
            margin-block: 2rem !important;
        }

        #othersContainerDiv1, #othersContainerDiv2 {
            transform: none !important;
            opacity: 1 !important;
        }

        .videoIframe {
            width: 88vw !important;
            height: calc(88vw * 37/65) !important;
        }

        .contactOverlaysText {
            width: 90vw !important;
        }
    }
}

#buyChallengeMobile {
    display: none;
}

.navBurgerMenuMobileDiv {
    position: fixed;
    z-index: 999999;
    display: none;
    width: 100vw;
    height: 10rem;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.navBurgerMenuButton {
    width: 10rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: auto;
}

.navSword1 {
    transform: scale(0.15);
    position: absolute;
}

.navSword2 {
    transform: scale(0.15);
    position: absolute;
}

/* Cursor Follower */
.cursorFollowerDiv {
    position: fixed;
    z-index: 9999999999999999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.cursorFollowerContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
}

.cursorFollower {
    position: absolute;
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dab661;
    opacity: 0;
}

.cursorFollowerSwords {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cursorFollowerSword1 {
    transform: scale(0.25);
}

.cursorFollowerSword2 {
    transform: scaleY(-0.25) scaleX(0.25);
    margin-top: -25rem;
}

/* Nav Bar */
.navBar {
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Wadik;
    padding-left: 15rem;
    padding-right: 15rem;
    pointer-events: none;
}

.navMenuDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.navMenu {
    margin-left: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navMenuText {
    pointer-events: auto;
    cursor: pointer;
    font-size: 1.5rem;
    text-shadow: 0 0 2px #000000;
}

.currentNavBackgroundPhoto {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.navMenuButton {
    pointer-events: auto !important;
    margin-left: -3rem;
    margin-right: 0 !important;
}

/* Mobile Menu */
.mobileMenuDiv {
    position: fixed;
    z-index: 999990;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, #1a1926, 50%, #3e0a3d);
    pointer-events: auto;
    display: none;
    padding-top: 12.5rem;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
}

.mobileMenuSelection {
    font-size: 2.5rem;
    margin-right: 3.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mobileMenuSelectionDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
}

.mobileMenuSelectionLink {
    text-decoration: none;
    color: #ffffff;
}

.chatBubbleContainerMobile {
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-left: 2rem;
}

/* Scroll Down Div */
.scrollDownDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    z-index: 9999;
}

.scrollDownScreenDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    pointer-events: none;
}

.scrollDownContainerDiv {
    width: 15rem;
    height: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-bottom: 2rem;
}

.scrollDownTextDiv {
    transform: rotateZ(90deg);
}

/* Chat Bubble Div */
.chatBubbleDiv {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 5rem;
    padding-bottom: 1rem;
    overflow: hidden;
    pointer-events: none;
}

.chatBubbleMobileDiv {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 5rem;
    padding-bottom: 1rem;
    overflow: hidden;
    pointer-events: none;
}

.chatBubblePhoto {
    cursor: pointer;
    pointer-events: auto;
}

.chatBubbleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chatBubbleText {
    margin-top: 1rem;
    height: 3rem;
    width: 10rem;
    text-align: center;
}

.chatBubbleTextMobile {
    margin-top: 1rem;
    height: 3rem;
    width: 10rem;
    text-align: center;
}

/* Hero Section */
.heroSection {
    position: relative;
    z-index: 0;
    width: 100vw;
    height: 90rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #36188c;
}

.sunsetLayerDiv {
    position: absolute;
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: translateY(-4.5rem);
    overflow: hidden;
}

.sun {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background-color: #fb9062;
    transform: translateX(80rem);
    box-shadow: 0 0 2rem 5px #fb9062;
}

.doorGlowDivs {
    position: absolute;
    transform: translateX(25.9rem) translateY(-7.8rem) scale(1.15);
    filter: contrast(1) brightness(1);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.aboutUsHeroDoorGlowPhoto1Div, .aboutUsHeroDoorGlowPhoto2Div, .aboutUsHeroDoorGlowPhoto3Div, .aboutUsHeroDoorGlowPhoto4Div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutUsHeroDoorGlowPhoto1, .aboutUsHeroDoorGlowPhoto2, .aboutUsHeroDoorGlowPhoto3, .aboutUsHeroDoorGlowPhoto4 {
    position: absolute;
    filter: contrast(1) brightness(1);
}

.doorGlow1LogoPhoto {
    position: absolute;
    z-index: 1;
    opacity: 0.4;
    transform: rotateY(20deg) translateX(3rem);
}

.spearGlowDivs {
    position: absolute;
    transform: translateX(-23.4rem) translateY(8.7rem) scale(1.15);
    filter: contrast(1) brightness(1);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.aboutUsHeroSpearGlowPhoto1Div, .aboutUsHeroSpearGlowPhoto2Div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutUsHeroSpearGlowPhoto1, .aboutUsHeroSpearGlowPhoto2 {
    position: absolute;
    filter: contrast(1) brightness(1);
}

.heroLayerPhotos {
    position: absolute;
    overflow: hidden;
}

.heroImageLayersDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    transform: scale(1.01);
}

.heroRockDivs {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(0.6rem) translateY(-0.8rem);
}

.dr1Photo, .br1Photo, .mr1Photo, .fr1Photo {
    position: absolute;
}

.heroFilterLayer {
    position: absolute;
    z-index: 300;
    width: 100vw;
    height: 100%;
    background-image: linear-gradient(to bottom, #00000000,85%, #3f0b28);
}
/* Hero Overlays */

.heroOverlaysDiv {
    position: absolute;
    z-index: 3000;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: auto;
}

.heroOverlaysContainerDiv {
    width: 100vw;
    padding-left: 15rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 20rem;
}

.heroHeaderDiv {
    width: 60rem;
    font-size: 6rem;
    line-height: 8rem;
}

.heroSubHeaderDiv {
    width: 60rem;
    font-size: 1.7rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.heroCTADiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.CTAButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-right: 7rem;
    cursor: pointer;
    font-family: Wadik;
    pointer-events: auto;
}

.CTAButtonText {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discordButtonLogoPhoto {
    margin-left: 1rem;
}

/* Reverse Section */

.reverseSection {
    position: relative;
    z-index: 10;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0rem;
    padding-bottom: 10rem;
    flex-direction: row-reverse;
    margin-top: -12.5rem;
}

.reverseTextDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 13.5rem;
}

.reverseVideoContainerDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 2rem;
}

.reverseOverlaysDiv {
    position: absolute;
    z-index: 2;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

/* Out Team Section */

.ourTeamSection {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-color: #3f0b28;
}

.ourTeamTextDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 27rem;
}

.ourTeamHeaderDiv {
    font-size: 5rem;
    width: 10rem;
    margin-bottom: 6.5rem;
}

.ourTeamBodyDiv {
    font-size: 1.8rem;
    width: 52rem;
    font-family: Montserrat;
    line-height: 3rem;
}

.ourTeamVideoContainerDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2rem;
}

.ourTeamVideoDiv {
    background-color: black;
    width: 65rem;
    height: 37rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ourTeamVideoBackgroundPhoto {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.ourTeamPurpleGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.ourTeamPinkGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.ourTeamPurpleGemDiv, .ourTeamPinkGemDiv {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ourTeamOverlaysDiv {
    position: absolute;
    z-index: 2;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.ourTeamTorchDiv {
    width: 27rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Others Section */
.othersSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3f0b28;
    padding-block: 7.5rem;
}

.othersContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: 8rem;
    border-radius: 3rem;
}

.othersContainerOverlaysDiv {
    position: absolute;
    width: 58rem;
    height: 50rem;
    padding: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.othersContainerText {
    line-height: 3rem;
    font-family: Montserrat;
    font-size: 1.8rem;
}

.othersSwordsDiv {
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    filter: brightness(1);
    pointer-events: none;
}

.othersSwordsFan1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 100%;
    transform: rotateZ(90deg) translateY(-18rem) translateX(-33.5rem) scale(0.7);
}

.othersSwordFan1Photo {
    position: absolute;
    transform-origin: center 45rem;
}

.othersSwordsFan2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 100%;
    transform: rotateZ(-90deg) translateY(-18rem) translateX(-33.5rem) scale(0.7) scaleX(-1);
}

.othersSwordFan2Photo {
    position: absolute;
    transform-origin: center 45rem;
}

.fan4 {
    z-index: 4;
}

.fan3 {
    z-index: 3;
}

.fan2 {
    z-index: 2;
}

.fan1 {
    z-index: 1;
}

.fan0 {
    z-index: 0;
}

.swordsRotateDiv1 {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: 0 -33rem;
}

.swordsRotateDiv2 {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: 0 33rem;
}

/* Testimonials Section */

.testimonialsSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-color: #3f0b28;
}

.testimonialsHeader {
    font-size: 4rem;
    margin-top: 2rem;
}

.testimonialsSliderContainerDiv {
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.testimonialsSliderDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    padding-left: 15rem;
    padding-right: 15rem;
    pointer-events: none;
}

.testimonialsCardDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3rem;
    margin-right: 3rem;
}

.testimonialsSliderIndicatorsContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

.testimonialsIndicatorDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

.testimonialsIndicator {
    position: absolute;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #dab661;
    opacity: 0;
}

.testimonialsCardTextDiv {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30rem;
}

.testimonialsCardTextHeader {
    font-size: 2.4rem;
}

.testimonialsCardTextBody {
    font-size: 1.5rem;
    font-family: Montserrat;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.testimonialsCardTextRating {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonialsStarPhoto {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Mobile Only - Testimonials */
.testimonialsButtonsMobileDiv {
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    height: 10rem;
}

.testimonialsBackButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-right: 2rem;
    pointer-events: auto;
}

.testimonialsNextButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-left: 2rem;
    pointer-events: auto;
}

.testimonialsBackButtonPhoto {
    transform: scale(0.35) rotateZ(-90deg);
}

.testimonialsNextButtonPhoto {
    transform: scale(0.35) rotateZ(90deg);
}

/* News Section */

.newsSection {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-image: linear-gradient(to bottom, #3f0b28,#10064d);
}

.newsButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 5rem;
    pointer-events: auto;
}

.newsButtonText {
    position: absolute;
    z-index: 1;
    font-size: 1.6rem;
}

.newsRedGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.newsYellowGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.newsRedGem, .newsYellowGem {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contact Section */

.contactSection {
    position: relative;
    z-index: 875;
    width: 100vw;
    height: 80rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-image: linear-gradient(to top, #401639, 60%, #10064d);
    padding-top: 5rem;
    pointer-events: none;
}

.contactBackgroundDiv {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}

.contactOverlaysDiv {
    width: 100vw;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 10rem;
}

.contactOverlaysText {
    width: 80rem;
    font-size: 2.6rem;
    line-height: 3.6rem;
    font-family: Montserrat;
    margin-bottom: 10rem;
    pointer-events: auto;
}

.footerKnightLottie  {
    position: absolute;
    transform: scale(0.5) translateY(42rem) translateX(-100rem);
}

.footerKnightLottieNonContact {
    position: absolute;
    transform: scale(0.5) translateY(38.5rem) translateX(-100rem);
}

/* Footer Section */

.footerSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-image: linear-gradient(to bottom, #4e1137, 30%, #3e0a3d);
    margin-top: -2px;
}

.footerContainerDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.footerLinksContainerDiv {
    width: calc(100vw - 30rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerLinkText {
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.footerTrustPilotDiv {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: 5rem;
    border-right: 1px solid #ffffff3a;
}

.footerTrustPilotRatingDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    color: #ffffff;
    font-family: Montserrat;
    font-size: 1rem;
}

.footerRatingLinkText {
    color: #ffffff;
}

.footerTextDiv {
    width: calc(100vw - 30rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerText {
    text-align: left;
    font-family: Montserrat;
    font-size: 1.2rem;
}

.footerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 5rem;
}

.footerButtonText {
    position: absolute;
}

.footerBottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15rem;
    padding-right: 15rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 5rem;
}

.footerBottomLinkText {
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
}

.footerLogoPhoto {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.footerMiddleDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerCompetitionsText {
    font-size: 1.2rem;
    text-align: left;
    line-height: 2rem;
}

.footerEmailSubmitDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ffffff5a;
}

.footerCompetitionsDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 5rem;
}

.footerEmailInput {
    width: 40rem;
    height: 3.5rem;
    background-color: transparent;
    border: none;
    color: #ffffff;
    padding-left: 1rem;
}

.footerEmailSubmitButton {
    height: 4rem;
    width: 10rem;
    font-family: Montserrat;
    color: #f7971e;
    font-weight: bolder;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    margin-left: 2px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Torch Glow */

.torchGlow {
    position: absolute;
    z-index: -3;
    background-color: #ff4202;
    box-shadow: 0 0 6.5rem 6.5rem #ff4202;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

/* Current Link Text */

.currentLinkText {
    color: #f7971e !important;
}

/* CTA Button Center */

.CTAButtonCenter {
    margin: 0 !important;
}

/* Video IFRAME */

.videoIframe {
    cursor: pointer;
    pointer-events: auto;
    width: 65rem;
    height: 37rem;
    border: none;
    outline: none;
}

/* D/N Toggle */

.dnToggleDiv {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translateX(-15rem);
}

.dnToggleMobileDiv {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 99999999;
}

.dnSliderContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
}

.dnSliderBody {
    position: relative;
    width: 8rem;
    height: 4rem;
    border-radius: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 5px 1px #0000005a;
    background-color: #092236;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

.dnButtonBody {
    width: 2.75rem;
    height: 2.75rem;
    background-color: #FEFCD7;
    border-radius: 50%;
    transform: translateX(2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.crescentBody {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: #092236;
    transform: translateX(-0.7rem);
}

.stars {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.star1 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(-0.5rem) translateY(-0.7rem);
    border-radius: 50%;
}

.star2 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(-2rem) translateY(0.65rem);
    border-radius: 50%;
}

.star3 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(0.5rem) translateY(0rem);
    border-radius: 50%;
}

.cloud {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.cloud1 {
    position: absolute;
    width: 2.5rem;
    height: 0.6rem;
    border-radius: 0.3rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.8rem);
}

.cloud2 {
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.35rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.5rem) translateY(-0.5rem);
}

.cloud3 {
    position: absolute;
    width: 3.75rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.7rem) translateY(0.5rem);
}

/* D/N Toggle */
.day {
    opacity: 0;
    display: none;
}

.treeBranch2 {
    transform: scaleX(-1);
}