.fl-full-width .fl-page {
    width: 100% !important;
}

.fl-module.fl-module-photo.fl-node-45elhja9o673 {
    position: relative;
    z-index: 20;
}
.pp-flipbox-description br {
    display: none;
}
.hs_submit.hs-submit::before {
    content: "Your email will not be revealed to any third party. See our Privacy Policy.";
    margin: 10px 0px 15px;
    display: block;
}

.pp-modal-body {
    box-shadow: 0px 0px 60px #00E2FF !important;
}

.fl-node-r0kzg8nou1bq .fl-module {
    margin: auto;
}

.pp-modal-wrap .pp-modal-content, .pp-modal-wrap .pp-modal-content h3, .pp-modal-wrap .pp-modal-content p {
    color: #fff;
}

    .pp-modal-wrap .pp-modal-content h3 {
        margin-bottom: 14px;
        font-size: 30px;
    }

.fl-module.fl-module-rich-text.fl-rich-text.fl-node-r5bitp9lmsdq {
    max-width: 236px;
    margin: auto;
}

    .fl-module.fl-module-rich-text.fl-rich-text.fl-node-r5bitp9lmsdq br {
        margin-bottom: 24px;
    }

.fl-module.fl-module-rich-text.fl-rich-text.fl-node-hsdw0v92rgz6 {
    position: absolute;
    bottom: 74px;
    left: 0;
    right: 0;
}

.pp-flipbox.pp-flipbox-front {
}

    .pp-flipbox.pp-flipbox-front h3 {
        font-size: 26px;
    }

.pp-flipbox.pp-flipbox-front {
    padding: 20px 40px;
}

.pp-flipbox.pp-flipbox-back {
    padding: 20px 40px;
}

.fl-module.fl-module-pp-flipbox.fl-node-1zbof507ckv8 .pp-flipbox.pp-flipbox-back h3 {
    font-size: 18px;
}

.pp-flipbox.pp-flipbox-back h3 {
    font-size: 24px;
}

.pp-flipbox.pp-flipbox-back p {
    font-size: 13px;
}

/* ===== Circular flipboxes: cross-fade reveal (no 3D distortion) ===== */

/* Both faces: drop the 3D rotate, cross-fade instead */
.pp-flip-box .pp-flipbox-front,
.pp-flip-box .pp-flipbox-back {
    transform: none !important;
    backface-visibility: visible !important;
    transition: opacity 450ms ease, transform 450ms ease !important;
}

/* REST STATE — front shown & clickable, back hidden & click-proof */
.pp-flip-box .pp-flipbox-front {
    opacity: 1;
    transform: scale(1) !important;
    pointer-events: auto;
}

.pp-flip-box .pp-flipbox-back {
    opacity: 0;
    transform: scale(0.9) !important;
    pointer-events: none; /* stops the back link being clickable through the front */
}

/* DESKTOP — trigger on hover (only where the device actually hovers) */
@media (hover: hover) {
    .pp-flip-box .pp-flipbox-container:hover .pp-flipbox-front {
        opacity: 0;
        transform: scale(0.9) !important;
        pointer-events: none;
    }

    .pp-flip-box .pp-flipbox-container:hover .pp-flipbox-back {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto;
    }
}

/* TOUCH — keep the tap/click trigger (Power Pack adds .pp-hover on tap) */
@media (hover: none) {
    .pp-flip-box .pp-hover .pp-flipbox-front {
        opacity: 0;
        transform: scale(0.9) !important;
        pointer-events: none;
    }

    .pp-flip-box .pp-hover .pp-flipbox-back {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto;
    }
}

#spotlight .zone-text {
    margin: 0px auto 20px;
    max-width: 440px;
}

    #spotlight .zone-text h3,
    #spotlight .zone-text h3 span,
    #spotlight .zone-text h3 a{
        font-size: 14px;
        margin-bottom: 16px;
        color: #E182FD;
    }

.zone-text.twilight {
    margin: 44px 0 10px 15% !important;
}

.fl-module.fl-module-pp-flipbox {
    margin: 0px;
}

    .fl-module.fl-module-pp-flipbox.fl-node-1zbof507ckv8 .pp-flipbox-container {
        margin: 0 0 0 16% !important;
    }

.zone-text.midnight {
    margin: 44px 0 10px 56% !important;
}

.fl-module-pp-flipbox.fl-node-vxctpbjmwz2y .pp-flipbox-container {
    margin: 0 0 0 59% !important;
}

.zone-text.abyssal {
    margin: 44px 0 10px 19% !important;
}

.fl-module-pp-flipbox.fl-node-8mrjeb17ft02 .pp-flipbox-container {
    margin: 0px 0px 0px 21% !important;
}

.zone-text.hadal {
    margin: 20px 0 10px 58% !important;
}

.fl-module-pp-flipbox.fl-node-2nlzj947dv53 .pp-flipbox-container {
    margin: 0 0 0 60% !important;
}

.pp-flipbox.pp-flipbox-back a {
    color: #00E2FF;
    margin-top: 22px;
    position: relative;
    display: block;
}


.fl-node-r0kzg8nou1bq .pp-flip-box .pp-flipbox-container .pp-flipbox {
    background: #000;
    height: 340px !important;
    border-radius: 500px;
    text-align: center;
}

.pp-flipbox.pp-flipbox-front {
    box-shadow: 0px 0px 15px #00E2FF;
}

.pp-flipbox.pp-flipbox-back {
    box-shadow: 0px 0px 60px #00E2FF !important;
}


.fl-node-r0kzg8nou1bq .pp-flip-box .pp-flipbox-container {
    margin: auto;
    max-width: 340px;
}


.fl-module.fl-module-rich-text.fl-rich-text.fl-node-ki3ou08bqygj,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-ki3ou08bqygj span,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-ki3ou08bqygj p,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-ki3ou08bqygj a,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-1q94devuy0po,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-1q94devuy0po span,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-1q94devuy0po p,
.fl-module.fl-module-rich-text.fl-rich-text.fl-node-1q94devuy0po a {
    color: #777 !important;
    font-size: 12px !important;
}


/* ---- Page chrome (not part of the effect, just for the demo) ---- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    place-items: center;
}

/* ============================================================
       1) THE SPOTLIGHT WRAPPER
       The section that listens for mouse movement.
       Use position: relative so the masked layer can absolute-fill it.
       ============================================================ */
.spotlight {
    position: relative;
    overflow: hidden;
    /* Two CSS variables drive everything — JS updates these. */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-size: 320px; /* radius of the lit area */
}

/* ============================================================
       2) THE TWO STACKED LAYERS
       Both layers contain identical content. The BASE layer is
       dim. The REVEAL layer sits on top and is masked into a
       circle around the cursor.
       ============================================================ */
.spotlight__layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 6vw;
    text-align: center;
    pointer-events: none; /* never block mouse events */
}

/* BASE: the dim, "lights off" state */
.spotlight__layer--base {
}

/* Tell the browser --spotlight-size is a length, so it can be animated.
   Without this, transitions on custom properties are ignored. */
@property --spotlight-size {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

/* Closed by default, opens on hover, transitions both directions */
#spotlight {
    --spotlight-size: 0px;
    transition: --spotlight-size 0.6s ease;
}

    #spotlight:hover {
        --spotlight-size: 280px;
    }

/* REVEAL layer is now a DARK WASH over the whole section.
   The mask is INVERTED: transparent in the center (a hole that
   reveals the creatures behind) and opaque at the edges (the
   70% black wash). */
.spotlight__layer--reveal {
    z-index: 2; /* above the background creatures */
    background: rgba(0, 0, 0, 0.85); /* black wash at 70% */
    color: transparent; /* no revealed text here anymore */

    -webkit-mask-image: radial-gradient( circle var(--spotlight-size) at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 50%, /* hold full brightness out to 35% */
    rgba(0, 0, 0, 0.5) 80%, #000 100% );
    mask-image: radial-gradient( circle var(--spotlight-size) at var(--mouse-x) var(--mouse-y), transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 80%, #000 100% );
}


/* DEPTH LAYERING: flipbox cards ride on top of the wash.
   (Columns/modules here are all static/auto, so a simple z-index works.) */
#spotlight .fl-module-pp-flipbox,
#spotlight .fl-module-rich-text,
#spotlight .fl-module-heading,
#spotlight .fl-module-button,
.fl-node-r0kzg8nou1bq .fl-module-photo,
form {
    position: relative;
    z-index: 3;
}

/* ============================================================
       3) CONTENT STYLES
       The text or images that get revealed. Tweak freely.
       ============================================================ */
.spotlight__title {
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-transform: uppercase;
}

.spotlight__sub {
    margin-top: 1rem;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Tiny "move your mouse" hint — disappears on first move */
.hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: #555;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
}

.spotlight.is-active .hint {
    opacity: 0;
}

/* Touch devices don't have a cursor — show the reveal everywhere */
@media (hover: none) {
    .spotlight__layer--reveal {
        display: none;
    }
}



.animal.absolute {
    position: absolute;
}

#Penguin {
    top: 1%;
    left: 1%;
}

#Atlantic_swordfish {
    top: 0;
    left: 1%;
}

#Turtle {
    top: 1%;
    right: 30%;
}

#mesobot {
    top: 14%;
    left: 4%;
}

#manta_ray {
    top: 1%;
    right: -4%;
}

#fire_shrimp {
    top: 20%;
    right: 21%;
}

#salp {
    top: 21%;
    left: 10%;
}

#giant_squid {
    top: 30%;
    left: 15%;
}

#deep_sea_coral {
    top: 30%;
    right: 0%;
}

#sentry {
    top: 42%;
    left: 0;
    right: 0;
}

#grenadier {
    top: 47%;
    left: 5%;
}

#tripod_fish {
    top: 60%;
    right: 1%;
}

#snailfish {
    top: 68%;
    left: 3%;
}

#sea_spider {
    top: 75%;
    left: 0;
}

#owl_fish {
    top: 70%;
    right: 1%;
}

#deep_venture {
    top: 80%;
    right: 7%;
}

#forams {
    top: 89%;
    right: 5%;
}


/* Gentle float — animals drift up and down as if suspended in water */
@keyframes animal-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

.animal {
    /* JS sets the duration and delay per element below */
    animation: animal-float var(--float-duration, 6s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .animal {
        animation: none;
    }
}




/** HUBSPOT FORM****/

.hs-button.primary.large {
    background-color: #FFD100;
    min-width: 200px;
}

.fl-module.fl-module-heading.fl-heading.fl-heading-text.fl-node-oce5h4m20gsl {
    margin-top: 70px;
}

.fl-module.fl-module-rich-text.fl-rich-text.fl-node-50a31dtvg9mh {
    max-width: 780px;
}

#hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 {
    margin: 30px auto;
    max-width: 600px;
    width: 100%;
}

    #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 input {
        margin: 10px 0px;
        padding: 10px 18px;
    }

.fl-module.fl-module-html.fl-html.fl-node-2sl5c9fekqry {
    max-width: 600px;
    width: 100%;
}


#email-316dbb6e-381f-4515-9b4c-1e82a0bf93c0 {
    width: 100%;
}

.hs_recaptcha.hs-recaptcha.field.hs-form-field {
    float: right;
    display: none;
}

.hs_submit.hs-submit .hs-button.primary.large {
    margin: auto;
    text-align: center;
    width: auto;
    border-radius: 50px;
    border: none;
    padding: 15px 25px !important;
    color: #000;
}

.hs_submit.hs-submit {
    margin: auto;
    text-align: center;
}

#hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 fieldset {
    max-width: 600px !important;
}


.fl-node-otjcpqmbxe8f .fl-bg-video video {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
}


/*****Mobile Layout*******/
.spotlight.mobile-layout {
}

    .spotlight.mobile-layout .zone-text {
        margin: 50px auto 5px !important;
        max-width: 340px !important;
    }

    .spotlight.mobile-layout #Turtle {
        right: 1%;
    }

    .spotlight.mobile-layout #manta_ray {
        top: 9%;
        right: -10%;
        max-width: 400px;
    }

    .spotlight.mobile-layout #fire_shrimp {
        top: 21%;
        right: 14%;
    }

    .spotlight.mobile-layout #giant_squid {
        top: 29%;
        left: 2%;
        max-width: 375px;
    }

    .spotlight.mobile-layout #deep_sea_coral {
        top: 44%;
        max-width: 400px;
    }

    .spotlight.mobile-layout #snailfish {
        max-width: 240px;
        top: 72%;
    }

    .spotlight.mobile-layout #deep_venture {
        top: 61%;
        max-width: 250px;
    }

.fl-col-group.fl-node-tkl21gs3mnuj:before {
    content: "";
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}


.fl-node-0itgdlmfya56 .pp-flipbox-container .pp-flipbox {
    min-height: 340px;
    max-width: 340px;
    border-radius: 200px;
    margin: auto;
    background-color: #000;
    max-height: 340px;
    width: 340px;
}

.fl-node-0itgdlmfya56 .pp-flipbox-container {
    max-width: 340px;
    margin: auto;
}

.spotlight.mobile-layout .zone-text {
    margin: 50px auto 5px !important;
    max-width: 340px !important;
}

.spotlight.mobile-layout #fire_shrimp {
    top: 20%;
    right: 0%;
}

.spotlight.mobile-layout #giant_squid {
    top: 29%;
    left: 2%;
    max-width: 375px;
}

.spotlight.mobile-layout #deep_sea_coral {
    top: 44%;
    max-width: 400px;
}

.spotlight.mobile-layout #snailfish {
    max-width: 240px;
    top: 69%;
    left: -5%;
}

.spotlight.mobile-layout #deep_venture {
    top: 62%;
    max-width: 250px;
}

.fl-module.fl-module-pp-flipbox.fl-node-7giu0c9s3jym {
    margin-bottom: 220px;
}

.spotlight.mobile-layout .zone-text.twilight.fl-animated {
    margin-bottom: 100px !important;
}

.fl-module.zone-text.midnight {
    margin-top: 280px !important;
}

.fl-module.fl-module-pp-flipbox.fl-node-njs45zf2ci8l {
    margin-bottom: 238px;
}

.fl-module.fl-module-pp-flipbox.fl-node-pv1doa23q86x {
    margin-bottom: 220px;
}

.fl-module.fl-module-photo.fl-node-ye8tfusr7mb4 {
    z-index: 10;
    position: relative;
}
.mobile-page-section-submenu {
    display: block !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}


.spotlight.mobile-layout #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 input {
    width: 100% !important;
}


.spotlight.mobile-layout #hsForm_316dbb6e-381f-4515-9b4c-1e82a0bf93c0 {
    margin-top: 0px !important;
}




/* --------------------------------------------------------------------------
   BASE FALLBACK (no query)
   Safety net — applies only if a cell below is left empty.
   -------------------------------------------------------------------------- */
.fl-node-mnodcjf582bl .pp-spacer-module {
    height: 380px;
}


/* ==========================================================================
   W1 · HI-RES MONITORS  ·  width ≥ 1920px
   ========================================================================== */

/* W1 × H1 · tall ≥1080 */
@media screen and (min-width: 1920px) and (min-height: 1080px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 400px;
    }
}
/* W1 × H2 · 900–1079 */
@media screen and (min-width: 1920px) and (min-height: 900px) and (max-height: 1079px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 390px;
    }
}
/* W1 × H3 · 768–899 */
@media screen and (min-width: 1920px) and (min-height: 768px) and (max-height: 899px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 380px;
    }
}
/* W1 × H4 · 600–767 */
@media screen and (min-width: 1920px) and (min-height: 600px) and (max-height: 767px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 320px;
    }
}
/* W1 × H5 · ≤599 */
@media screen and (min-width: 1920px) and (max-height: 599px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 290px;
    }
}


/* ==========================================================================
   W2 · STANDARD DESKTOP  ·  width 1440–1919px
   ========================================================================== */

/* W2 × H1 · tall ≥1080 */
@media screen and (min-width: 1440px) and (max-width: 1919px) and (min-height: 1080px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 390px;
    }
}
/* W2 × H2 · 900–1079 */
@media screen and (min-width: 1440px) and (max-width: 1919px) and (min-height: 900px) and (max-height: 1079px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 385px;
    }
}
/* W2 × H3 · 768–899 */
@media screen and (min-width: 1440px) and (max-width: 1919px) and (min-height: 768px) and (max-height: 899px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 375px;
    }
}
/* W2 × H4 · 600–767 */
@media screen and (min-width: 1440px) and (max-width: 1919px) and (min-height: 600px) and (max-height: 767px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 300px;
    }
}
/* W2 × H5 · ≤599 */
@media screen and (min-width: 1440px) and (max-width: 1919px) and (max-height: 599px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 275px;
    }
}


/* ==========================================================================
   W3 · LAPTOP  ·  width 1024–1439px
   ========================================================================== */

/* W3 × H1 · tall ≥1080 */
@media screen and (min-width: 1024px) and (max-width: 1439px) and (min-height: 1080px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 380px;
    }
}
/* W3 × H2 · 900–1079 */
@media screen and (min-width: 1024px) and (max-width: 1439px) and (min-height: 900px) and (max-height: 1079px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 375px;
    }
}
/* W3 × H3 · 768–899 */
@media screen and (min-width: 1024px) and (max-width: 1439px) and (min-height: 768px) and (max-height: 899px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 360px;
    }
}
/* W3 × H4 · 600–767  (your 1350×600 reference → 280) */
@media screen and (min-width: 1024px) and (max-width: 1439px) and (min-height: 600px) and (max-height: 767px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 220px;
    }
}
/* W3 × H5 · ≤599 */
@media screen and (min-width: 1024px) and (max-width: 1439px) and (max-height: 599px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 260px;
    }
}


/* ==========================================================================
   W4 · TABLET  ·  width 768–1023px
   ========================================================================== */

/* W4 × H1 · tall ≥1080 */
@media screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 1080px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 340px;
    }
}
/* W4 × H2 · 900–1079 */
@media screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 900px) and (max-height: 1079px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 335px;
    }
}
/* W4 × H3 · 768–899 */
@media screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 768px) and (max-height: 899px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 325px;
    }
}
/* W4 × H4 · 600–767 */
@media screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 600px) and (max-height: 767px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 220px;
    }
}
/* W4 × H5 · ≤599 */
@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 599px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 240px;
    }
}


/* ==========================================================================
   W5 · MOBILE  ·  width ≤ 767px
   ========================================================================== */

/* W5 × H1 · tall ≥1080 */
@media screen and (max-width: 767px) and (min-height: 1080px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 300px;
    }
}
/* W5 × H2 · 900–1079 */
@media screen and (max-width: 767px) and (min-height: 900px) and (max-height: 1079px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 295px;
    }
}
/* W5 × H3 · 768–899 */
@media screen and (max-width: 767px) and (min-height: 768px) and (max-height: 899px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 285px;
    }
}
/* W5 × H4 · 600–767 */
@media screen and (max-width: 767px) and (min-height: 600px) and (max-height: 767px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 240px;
    }
    .fl-module.fl-module-photo.fl-node-1sojmrbfed7h .fl-module-content.fl-node-content {
        margin: 10px 20px !important;
    }
}
/* W5 × H5 · ≤599 */
@media screen and (max-width: 767px) and (max-height: 599px) {
    .fl-node-mnodcjf582bl .pp-spacer-module {
        height: 210px;
    }

}




@media screen and (max-width: 560px) {
    .fl-module.fl-module-photo.fl-node-1sojmrbfed7h .fl-module-content.fl-node-content {
        margin: 10px 20px !important;
    }
}