/* 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;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* 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 {
    background-color: #3c0b26;
    font-size: 10px;
    color: #ffffff;
    scroll-behavior: smooth;
    /* cursor: none; */
}

body {
    background-color: #3c0b26;
    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;
    }

    .videosButtonsMobileDiv {
        display: none !important;
    }

    .contactInfoOverlaysDiv {
        width: 100% !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;
    }

    textarea, input, label {
        width: 90vw !important;
    }

    .contactFormButtonDiv  {
        width: 90vw !important;
        justify-content: center !important;
    }

    .contactInfoAddressText, .contactInfoPhoneText {
        font-size: 1.6rem !important;
    }
    
    .contactInfoEmailText {
        font-size: 1rem !important;
    }
    

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

        .heroSection {
            height: 60rem !important;
        }

        .contactInfoSection {
            height: auto !important;
        }

        .contactInfoDiv {
            height: 70rem !important;
            margin-top: 0 !important;
        }

        .heroVolcanoDiv {
            z-index: 3 !important;
        }

        .contactInfoBackgroundPhoto {
            display: none !important;
        }

        .contactInfoOverlaysDiv {
            height: auto !important;
            width: 100% !important;
            align-items: center !important;
            flex-direction: column !important;
        }
    
        .contactInfoSpotlight {
            display: none !important;
        }
    
        .contactInfoCategories {
            width: 100% !important;
        }

        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 */

        .contactInfoAddressText, .contactInfoPhoneText {
            font-size: 1.2rem !important;
        }
        
        .contactInfoEmailText {
            font-size: 1rem !important;
        }

        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: 80rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #0f0022;
}

.heroCastlePhotoDay {
    position: absolute;
    transform: translateX(9.8rem) translateY(-20.5rem);
}

.heroKnightLottie {
    position: absolute;
    transform: scale(0.3);
}

.heroDragonLottie {
    position: absolute;
    transform: scale(0.8) translateX(69rem) translateY(-25rem);
}

.heroBackgroundPhotoDay {
    filter: brightness(1.5);
}

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

.heroFogPhoto {
    position: absolute;
    z-index: 2;
    opacity: 0.2;
    filter: invert(1) contrast(1);
}

.heroVolcanoPhoto {
    position: absolute;
    z-index: 1;
    filter: brightness(0.7);
}

.heroVolcanoGlowPhoto {
    position: absolute;
    z-index: 6;
    filter: brightness(1.15);
    transform: translateY(-16.75rem) translateX(-5.7rem);
}

.heroVolcanoGlowTopPhoto {
    position: absolute;
    z-index: 7;
}

.heroMidRocksPhoto {
    position: absolute;
    z-index: 2; 
}

.heroLeftRocksPhoto {
    position: absolute;
    z-index: 3; 
}

.heroRightRocksPhoto {
    position: absolute;
    z-index: 2; 
}

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

.heroMoonPhoto {
    position: absolute;
    z-index: 7;
    transform: translateX(35rem) translateY(-20rem);
}

.heroFilterLayer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    background-image: linear-gradient(to bottom, #00000000, 70%,#0f0022);
    background-color: #0000003a;
}

/* 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;
}

/* Contact Info Section */

.contactInfoSection {
    position: relative;
    z-index: 99;
    width: 100vw;
    background-image: linear-gradient(to bottom, #0f0022, 70%, #10064d);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.contactInfoDiv {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10rem;
    margin-bottom: 10rem;
}

.contactInfoOverlaysDiv {
    position: absolute;
    width: 133rem;
    height: 36rem;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    overflow: hidden;
}

.contactInfoCategories {
    width: calc(100%/3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    perspective: 40rem;
}

.contactInfoSpotlight {
    margin-top: -3rem;
    width: 0rem;
    height: 0rem;
    border-radius: 50%;
    box-shadow: 0 0 14rem 10rem #f7971ef0;
    margin-bottom: 10.5rem;
}

.contactInfoPhotos {
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactInfoText {
    height: 10rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateX(45deg);
    transform-origin: 50% 100%;
}

.contactInfoAddressText, .contactInfoPhoneText {
    font-size: 2rem;
}

.contactInfoEmailText {
    font-size: 1.4rem;
}

.contactFormDiv {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactInfoTorchDiv {
    position: absolute;
    z-index: 10;
    width: 100vw;
    height: 36rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.contactInfoTorch {
    position: absolute;
}

#torch1 {
    transform: translateX(-67rem) scaleX(-1);
}

#torch2 {
    transform: translateX(67rem);
}

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

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

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

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

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

/* Contact Section */

.contactSection {
    position: relative;
    z-index: 0;
    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;
}

.contactFilterDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background-image: linear-gradient(to bottom, #10064d, 20%, #10064d00);
}

.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;
}

.contactFormOverlaysDiv {
    position: absolute;
    width: 133rem;
    height: 80rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

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

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

/* Form */

.contactFormHeader {
    font-size: 2.6rem;
    margin-bottom: 3rem;
}

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

textarea {
    width: 80rem;
    height: 24.4rem;
    outline: none;
    border: none;
    resize: none;
    padding-inline: 2rem;
    padding-block: 1.5rem;
    font-family: Montserrat;
    font-size: 1.2rem;
    background-color: #2e2e2e;
    color: #ffffff;
}

input {
    width: 80rem;
    height: 4.4rem;
    outline: none;
    border: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-inline: 2rem;
    font-family: Montserrat;
    font-size: 1.2rem;
    background-color: #2e2e2e;
    color: #ffffff;
}

label {
    height: 3rem;
    width: 80rem;
    text-align: left;
    font-size: 1.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.submitButton {
    background-color: transparent;
    color: #ffffff;
    outline: none;
    border: none;
}

.contactFormButtonDiv {
    width: 84rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2rem !important;
}

/* 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 */

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

.torchGlow {
    position: absolute;
    z-index: -3;
    background-color: #ff4202;
    box-shadow: 0 -2.5rem 8rem 4rem #ff4202;
    width: 0rem;
    height: 5rem;
    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;
}