:root {
    --circle-size: 600px;
    --mouse-y: 0;
    --mouse-x: 0;
}

* {
    font-family: "Exo 2", sans-serif;
}

html,
body {
    color: #f9f9fa;
    position: relative;
    background-color: #0e0e12;
    /*
        FROM WOPE: #0a0118
        ORIGINAL FROM FIGMA: #0E0E12
    */
    ;
}

header {
    opacity: 1;
    padding: 30px;
    max-height: 110px;
    transition: opacity 0.5s;
}

header img {
    height: 50px;
}

main {
    height: auto !important;
    overflow: hidden;
}

main,
main header,
main footer {
    height: auto;
    z-index: 1 !important;
    transition: all ease-in-out 0.5s;
}

body:not(.active) main #full-video {
    opacity: 0;
    display: block;
    pointer-events: none;
    /* height: 0px !important; */
    padding-top: 0%;
    transition: all ease-in-out 0.3s;
}

section {
    height: calc(100vh - 220px);
}

footer {
    opacity: 1;
    padding: 30px;
    max-height: 110px;
    border-top: 1px solid #3a3a4a;
    transition: opacity 0.5s;
}

footer .row {
    min-height: 50px;
}

/* WHEN ACTIVE */

body.active header,
body.active footer {
    opacity: 0 !important;
    height: 0px !important;
    transition: all ease-in-out 0.3s;
}

body.active main #full-video {
    opacity: 1;
    /* OLD 56.25% */
    /* height: 50vh; */
    pointer-events: all;
    padding-top: 42.1875%;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    border: 0.978px solid #2a2a2a;
    box-shadow: 0px 3.912px 3.912px 0px rgba(0, 0, 0, 0.25);
    transition: all ease-in-out 0.5s;
}

body.active section {
    /* display: block; */
    padding: 20px 0;
    align-self: center !important;
    min-height: 100% !important;
    transition: all ease-in-out 0.5s;
}

body.active section .btn-close.show {
    top: -100px;
    opacity: 1 !important;
    /* visibility: visible; */
    pointer-events: all;
    left: 50% !important;
    transform: translateX(-50%);
    transition: all ease-in-out 0.5s;
}

body.active section .btn-play-container {
    opacity: 0 !important;
    height: 0 !important;
    transition: all ease-in-out 0.3s;
}

body.active section .title,
body.active section .title-highlight {
    font-size: 15px;
    transition: all ease-in-out 0.5s;
}

body.active .box-video {
    height: 100% !important;
    margin-bottom: 0 !important;
    align-items: center !important;
}

body.active .video-container video {
    opacity: 0.06 !important;
    transition: all ease-in-out 0.5s;
}

[data-delay]:not(.show) {
    opacity: 0;
    /* position: absolute; */
    user-select: none;
    pointer-events: none;
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
}

[data-delay].show {
    opacity: 1;
    /* position: initial; */
    user-select: auto;
    pointer-events: all;
    transition: all ease-in-out 1s;
    -webkit-transition: all ease-in-out 1s;
    -moz-transition: all ease-in-out 1s;
    -ms-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
}

/* CLASSES */
.title {
    color: #f9f9fa;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 42px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: all ease-in-out 0.5s;
}

.title-highlight {
    color: #f9f9fa;
    leading-trim: both;
    text-edge: cap;
    font-size: 42px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    background: linear-gradient(269deg, #7b5eea 1.09%, #423b7b 95.43%);
    -webkit-background-clip: text;
    color: transparent;
    transition: all ease-in-out 0.5s;
}


.btn-close {
    opacity: 0 !important;
    /* visibility: hidden; */
    pointer-events: none;
    border-radius: 50%;
    border: 1px solid #3a3a4a !important;
    background: rgba(249, 249, 250, 0.05);
    height: 30px;
    width: 30px;
    padding: 15px;
    font-size: 30px;
    display: block;
    color: white;
    position: absolute;
    top: -100px  !important;
    left: 50% !important;
    transform: translateX(-50%);
    box-sizing: content-box;
    line-height: 0;
    text-align: center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    transition: all ease-in-out 0.3s;
}

.btn-close:hover {
    color: white;
}

body:not(.active) .btn-play-container {
    opacity: 1;
    height: 100%;
    transition: all ease-in-out 0.5s;
}

/*
.btn-play {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);

    backdrop-filter: blur(15px);
}

.btn-cta, .btn-play {
    z-index: 999;
    color: #F9F9FA;
    font-size: 20px;
    height: fit-content;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 255px;
    border: 1px solid #3A3A4A !important;
    background: rgba(249, 249, 250, 0.05);

    box-shadow: 0px 0px 9.7px 0px rgba(0, 0, 0, 0.50);
}

.btn-cta { padding: 18px 22px; }
.btn-play { padding: 20px; }

.btn-cta > .btn-border, .btn-play > .btn-border {
    position: relative;
    border-radius: 255px;
    background: rgba(249, 249, 250, 0.10);

    box-shadow: 0px 0px 9.7px 0px rgba(0, 0, 0, 0.74);
}

.btn-cta .btn-border  { padding: 18px 40px; }
.btn-play .btn-border { padding: 18px 24px; }

.btn-cta .btn-border::before, .btn-play .btn-border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 255px;
    border: 1px solid transparent;
    background: linear-gradient(240deg,#8B61FF,#6B6B6B) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}*/

.light-efx:after {
    content: "";
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    background: radial-gradient(var(--circle-size, 600px) circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.08),
            transparent 40%);
}

.light-efx:hover:after {
    opacity: 1 !important;
    transition: opacity 0.5s;
}

.copy {
    color: #9090a7;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.sublinks {
    color: #c3c3cf;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

.sublinks-divider {
    color: #2a2a2a;
}

/* BG VIDEO */
.video-container {
    top: -15vh;
    left: -15vw;
    width: 130vw;
    height: 130vh;
    position: fixed;
    overflow: hidden;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

.video-container:after {
    /* background: linear-gradient(179.02deg, rgba(0, 0, 0, 0) 32.31%, rgba(0, 0, 0, .53) 61.05%, rgba(0, 0, 0, .85) 76.78%, #000000 96.01%, #000000 105.43%); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 75%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    content: "";
    filter: drop-shadow(0px 4px 234px rgba(0, 0, 0, .76));
}

.video-container video {
    width: 100%;
    height: 100%;
    /* opacity: 0.1; */
    object-fit: cover;
    pointer-events: none;
    /* mix-blend-mode: luminosity; */
    transition: all ease-in-out 0.3s;
}

/* BTN */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: inherit;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

*:focus {
    outline: none;
}

* {
    box-sizing: border-box;
}

button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

button {
    background-color: transparent;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button {
    overflow: visible;
}

button {
    text-transform: none;
}

svg {
    display: block;
}

/* ! GLOW */
.glowbox {
    isolation: isolate;
    overflow: hidden;
    border-radius: 999px;
    display: inline-block;
    position: relative;
}

.glowbox-active .glowbox-animations,
.glowbox-active .glowbox-borders-masker {
    opacity: 1;
}

.glowbox-animations,
.glowbox-borders {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.glowbox-animations:before,
.glowbox-borders:before {
    content: "";
    float: left;
    padding-top: 100%;
}

.glowbox-animations:after,
.glowbox-borders:after {
    clear: both;
    content: "";
    display: block;
}

.glowbox-animations {
    opacity: 0;
    pointer-events: none;
    transition: 1s ease opacity;
}

.glowbox-animations * {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.glowbox-borders,
.glowbox-glow,
.glowbox-stars {
    animation: borderTurn var(--animation-speed) infinite linear;
    background-image: conic-gradient(from 0 at 50% 50%,
            rgba(139, 97, 255, 1) 0deg,
            rgba(106, 106, 134, 0) 60deg,
            rgba(106, 106, 134, 0) 300deg,
            rgba(106, 106, 134, 1) 360deg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.glowbox-stars-masker {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
    mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: auto;
    mask-size: auto;
}

.glowbox-glow {
    filter: blur(8px);
    opacity: 0.12;
}

.glowbox-borders {
    animation-name: borderTurnWithTranslate;
}

.glowbox-borders-masker {
    border-radius: 999px;
    content: "";
    height: 100%;
    inset: 0;
    left: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    padding: 1px;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: 1s ease opacity;
    width: 100%;
}

.glowbox-button {
    font-feature-settings: "cv06"on, "calt"off, "liga"off;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 24px;
}

.glowbox-button {
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* border: 1px solid;
    border-image: linear-gradient(200deg, rgba(139, 97, 255, 1), rgba(106, 106, 134, 1)) 1; */

    border-radius: 999px;
    cursor: pointer;
    padding: 7px 24px;
    position: relative;
    z-index: 1;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}

.glowbox-button:after {
    content: "";
    background: radial-gradient(85% 120% at 50% 120%,
            rgba(139, 97, 255, 0.24) 0%,
            rgba(106, 106, 134, 0) 100%);
    border-radius: 999px;
    height: calc(100% + 4px);
    left: -2px;
    opacity: 0;
    position: absolute;
    top: -2px;
    transition: 1s all;
    width: calc(100% + 4px);
}

.glowbox-button:hover:after {
    opacity: 0.7;
}

.glowbox-button span {
    /* background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 8.85%,
    #ffffff 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;*/
    display: block;
    color: white;
}

/* BTN PLAY */
.home-btn-play-title {
    font-feature-settings: "cv06"on, "calt"off, "liga"off;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 28px;
}

.home-btn-play-description {
    font-feature-settings: "cv06"on, "calt"off, "liga"off;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 24px;
}

.home-btn-play {
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    height: 104px;
    justify-content: center;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: 0.3s cubic-bezier(0.6, 0.6, 0, 1) width;
    width: 104px;
    z-index: 20;
}

.home-btn-play .glowbox {
    min-width: 72px;
    transition: 0.3s cubic-bezier(0.6, 0.6, 0, 1) width;
    width: 72px;
}

.home-btn-play .glowbox-button {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    height: 72px;
    padding: 12px 28px;
    position: relative;
    width: 100%;
}

.home-btn-play .glowbox-button span {
    align-items: center;
    color: unset;
    display: flex;
    -webkit-text-fill-color: unset;
}

.home-btn-play-text {
    isolation: isolate;
    overflow: hidden;
    left: 68px;
    opacity: 0;
    position: absolute;
    text-align: left;
    transform: translate(-4px);
    transition: 0.3s cubic-bezier(0.6, 0.6, 0, 1) transform,
        0.3s cubic-bezier(0.6, 0.6, 0, 1) opacity;
    width: 142px;
}

.home-btn-play-title {
    color: #fff;
}

.home-btn-play-description {
    color: #fff;
    opacity: 0.7;
}

@media (min-width: 1248px) {
    .home-btn-play:hover {
        width: 295px;
    }

    .home-btn-play:hover .glowbox {
        width: 261px;
    }

    .home-btn-play:hover .home-btn-play-text {
        opacity: 1;
        transform: translate(0);
    }
}

button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0px;
}

button {
    overflow: visible;
}

button {
    text-transform: none;
}

button {
    appearance: button;
}

@keyframes borderTurn {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes borderTurnWithTranslate {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* BTN CTA */
/* .glowbox-button {
background: radial-gradient(107.5% 107.5% at 50% 215%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%),
            rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
cursor: pointer;
padding: 7px 24px;
position: relative;
z-index: 1;
}

.glowbox-button:after {
background: radial-gradient(85% 120% at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 999px;
content: "";
height: calc(100% + 4px);
left: -2px;
opacity: 0;
position: absolute;
top: -2px;
transition: 1s all;
width: calc(100% + 4px);
}

.glowbox-button:hover:after {
opacity: 0.7;
}

.glowbox-button span {
display: flex;
align-items: center;
} */

.home-btn-cta {
    display: inline-flex;
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    justify-content: center;
    padding: 18px;
    /* height: 104px; */
    /* top: 350px; */
    transition: 0.3s cubic-bezier(0.6, 0.6, 0, 1) width;
    /* width: 104px; */
    z-index: 20;
}

.home-btn-cta .glowbox-button {
    padding: 12px 24px;
    display: inline-flex;
}

.home-btn-cta-title {
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    color: white;
}

.home-btn-cta span {
    display: flex;
    align-items: center;
}

.home-btn-cta svg {
    fill: white;
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.home-btn-cta:hover .glowbox-button:after {
    opacity: 0;
}

/* 
**************************************************
********************* MEDIA **********************
**************************************************
*/

/* DESKTOP | ULTRAWIDE */

@media only screen and (min-width: 1440px) {}

/* TABLET | LAPTOP */

@media only screen and (min-width: 1024px) and (max-width: 1440px) and (orientation: landscape) {

    header,
    footer {
        height: max-content !important;
        max-height: max-content !important;
    }

    section {
        height: calc(100vh - 270px);
    }

    .title,
    .title-highlight {
        font-size: 35px;
    }

    .btn-close {
        top: -120px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        transition: all ease-in-out 0.3s;
    }
}

/* MOBILE | SMALL DEVICES */

@media only screen and (max-width: 1024px) {
    main {
        height: 100%;
        overflow: auto !important;
        --bs-gutter-x: 1.5rem !important;
        --bs-gutter-y: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    section {
        height: auto !important;
    }

    footer {
        max-height: fit-content !important;
    }

    .btn-cta {
        padding: 14px 16px;
    }

    .btn-cta .btn-border {
        padding: 14px 30px;
    }

    .home-btn-play {
        top: auto;
        left: auto;
        transform: none;
        position: relative;
        margin: 3rem 0;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    body.active .box-video {
        width: 90%;
        margin: 0 auto;
    }

    .btn-close,
    body.active section .btn-close.show {
        position: relative;
        top: 0 !important;
        left: auto !important;
        margin: 0 auto !important;
        transform: none !important;
        margin-bottom: 2rem !important;
    }

    .title,
    .title-highlight {
        font-size: 26px;
    }
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {

    header,
    footer {
        height: max-content !important;
        max-height: max-content !important;
    }

    section {
        min-height: calc(100vh - 270px);
    }

    section video {
        height: auto !important;
        width: 95% !important;
    }

    section p {
        font-size: 14px;
    }

    body.active section .btn-close {
        top: -150px !important;
        left: 50% !important;
        transform: translateX(-50%);
        transition: all ease-in-out 0.5s;
    }

    body.active section .btn-close.show {
        z-index: 0 !important;
        top: -20px !important;
        left: 50% !important;
        transition: all ease-in-out 0.5s;
    }

    .title,
    .title-highlight {
        font-size: 22px;
        text-justify: distribute;
        transition: all ease-in-out 0.5s;
    }

    .btn-close {
        top: -120px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%);
        transition: all ease-in-out 0.3s;
    }
}