/* Import Fonts */

@font-face {
    font-family: "Stinger-Italics";
    src: url(../fonts/StingerTrial-LightItalic.ttf);
}

@font-face {
    font-family: "Serenity";
    src: url(../fonts/simple-serenity-serif.otf);
}

@font-face {
    font-family: "Hara-Bold";
    src: url(../fonts/Hauora-Bold.otf);
}

@font-face {
    font-family: "Hara-ExtraBold";
    src: url(../fonts/Hauora-ExtraBold.otf);
}

@font-face {
    font-family: "Hara-ExtraLight";
    src: url(../fonts/Hauora-ExtraLight.otf);
}

@font-face {
    font-family: "Hara-Light";
    src: url(../fonts/Hauora-ExtraLight.otf);
}

@font-face {
    font-family: "Hara-Medium";
    src: url(../fonts/Hauora-Medium.otf);
}

@font-face {
    font-family: "Hara-Regular";
    src: url(../fonts/Hauora-Regular.otf);
}

@font-face {
    font-family: "Hara-SemiBold";
    src: url(../fonts/Hauora-SemiBold.otf);
}

/* Loading */

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; /* Customize the background color */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 9999999;
}

#loading-progress {
    font-family: "Serenity", "serif";
    font-size: 5rem;
}

.loading-progress-span {
    font-family: "Serenity", "serif";
    font-size: 5rem;
}

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

html {
    scrollbar-width: none;
    scroll-behavior: smooth;
}

body {
    background-color: #0a0a0a;
    color: white;
    height: 100%;
    width: 100%;
    font-family: "Hara-Medium", "serif";
}

a {
    text-decoration: none;
}

:root {
    --b: #0a0a0a;
    --b1: #0f0f0f;
    --w: #fff;
    --t: #ffffff7a;
    --p1: #ff5e00;
    --p2: #67b3ee;
    --g00: #ffffff00;
    --g02: #ffffff05;
    --g06: #ffffff0f;
    --g16: #ffffff29;
    --g24: #ffffff3d;
    --g32: #ffffff52;
    --g48: #ffffff7a;
    --g56: #ffffff8f;
    --fancybox-bg: #0a0a0a;
    --lgP: 2.5rem;
    --mdP: 1rem;
    --pink: #ff38bb;
}

/* Button */

button {
    width: max-content;
}

button a {
    color: white;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

.button-light {
    border: none;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 95, 255, 1) 61%,
        rgba(255, 0, 232, 1) 100%
    );
    background-size: 200% 200%; /* Allow space for gradient animation */
    padding: 1rem 4rem;
    border-radius: 50px;
    transition: background-position 0.5s ease-in-out, padding 0.5s ease-in-out;
    color: white;
}

.button-light:hover {
    background-position: 100% 0; /* Animate the gradient position */
    transition: background-position 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.button-dark {
    border: none;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 95, 255, 1) 61%,
        rgba(255, 0, 232, 1) 100%
    );
    background-size: 200% 200%; /* Allow space for gradient animation */
    padding: 1rem 4rem;
    border-radius: 50px;
    transition: background-position 0.5s ease-in-out, padding 0.5s ease-in-out;
    border: 1px solid var(--g16);
    color: white;
}

.button-dark:hover {
    background-position: 100% 0; /* Animate the gradient position */
    transition: background-position 0.5s ease-in-out, padding 0.5s ease-in-out;
}

/* Globals */

.reveal-svg {
    opacity: 0;
    transform: translateY(100px);
}

.line {
    overflow: hidden !important;
    position: relative;
}

.word {
    overflow: hidden !important;
    position: relative;
}

.mobile-view {
    display: none !important;
}

.desktop-view {
    display: block !important;
}

.lg-head {
    font-family: "Serenity", "serif";
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.bg-w {
    background-color: white;
    color: #0a0a0a;
}

.mt-1rem {
    margin-top: 5rem;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.lg-btn-set-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lg-btn {
    text-align: center;
    font-family: "Serenity", "serif";
    font-size: var(--lgP);
    display: grid;
    width: 100%;
    place-content: center;
    padding: 5rem;
    border-radius: 1.5rem;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 95, 255, 1) 61%,
        rgba(255, 0, 232, 1) 100%
    );
    background-size: 200% 200%; /* Allow space for gradient animation */
    color: white;
    border: 1px solid var(--g16);
    transition: background-position 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.lg-btn:hover {
    padding: 8rem 1rem; /* Increase padding smoothly */
    background-position: 100% 0; /* Animate the gradient position */
    transition: background-position 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.card-btn-set-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.card-btn {
    text-align: center;
    font-family: "Serenity", "serif";
    font-size: var(--lgP);
    display: grid;
    width: 100%;
    place-content: center;
    height: 400px;
    border-radius: 1.5rem;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 95, 255, 1) 61%,
        rgba(255, 0, 232, 1) 100%
    );
    background-size: 200% 200%;
    color: white;
    border: 1px solid var(--g16);
    transition: background-position 0.5s ease-in-out;
}

.card-btn:hover {
    background-position: 100% 0;
    transition: background-position 0.5s ease-in-out;
}

.card-btn svg {
    width: 100%;
    fill: white;
    margin-bottom: 1.5rem;
}

.z-center {
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: "Hara-Regular", "serif";
}

.slash {
    color: var(--pink);
    font-family: "Hara-Bold", "serif";
    margin-right: 1rem;
}

.section {
    padding-top: 15rem;
    padding-bottom: 15rem;
}

.big-p {
    font-size: var(--lgP);
    line-height: calc(var(--lgP) + 1rem);
}

.md-p {
    font-size: var(--mdP);
    /* line-height: calc(var(--lgP) + 1rem); */
}

/* Header */

.header {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999999;
    display: flex;
    justify-content: center;
}

.header .nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    padding: 0 4px;
    margin: 0 2px;
    background: #00000036;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 50px;
    border: 1px solid var(--g16);
}

.header .nav-bar a {
    height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    color: var(--w);
    position: relative;
}

.header .nav-bar a span {
    transition: 0.4s ease-out;
}

.hover {
    display: block;
    overflow: hidden;
    height: 22px;
    position: relative;
    z-index: 5;
}

.hover span {
    display: block;
    transition: 0.4s ease-out;
}

@media (pointer: fine) {
    a:hover .hover span,
    button:hover .hover span {
        transform: translateY(-100%);
    }
}

/*//////// HAMBURGER //////*/

:root {
    --bar-width: 35px;
    --bar-height: 1px;
    --hamburger-gap: 6px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger-menu-first,
.hamburger-menu-second,
.hamburger-menu-third {
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: white;
    border-radius: 50px;
    transform-origin: left center;
    transition: opacity var(--animation-timing), width var(--animation-timing),
        rotate var(--animation-timing), translate var(--animation-timing);
}

.burger-container {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    cursor: pointer;
}

.remove-hamburger-menu-second {
    opacity: 0;
    width: 0;
}

.rotate-hamburger-menu-first {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}

.rotate-hamburger-menu-third {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

/* Menu */
.mobile-burger-container {
    padding: 0rem 4rem;
}

.mobile-menu-link-container-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 11111;
    visibility: hidden;
}

.mobile-menu-link-container-overlay-opened {
    background-color: rgb(0 0 0 / 7%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    visibility: visible;
}

.menu-opened-no-scroll {
    overflow: hidden !important;
}

.mobile-menu-link-container {
    display: block;
    position: fixed;
    top: 9rem;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 11111111;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    border-radius: 1rem 1rem 0rem 0rem;
    overflow: hidden;
    /* background-color: #0a0a0a; */
    background-color: #0a0a0ab0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--g16);
}

.mobile-menu-opened {
    transform: translateY(0%) !important;
    transition: transform 1s cubic-bezier(1, 0.51, 0, 0.97);
}

.main-mobile-menu-link-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-mobile-menu-link-inner-container {
    flex-grow: 1;
}

.menu-link-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.main-menu-link-inner {
    display: grid;
    place-content: center;
    padding: 2rem;
}

.mobile-main-menu-link {
    font-family: "Serenity", "serif";
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.menu-link-container span {
    overflow: hidden;
    position: relative;
}

.mobile-main-menu-link:hover {
    color: var(--pink);
    transition: all 0.3s ease-in-out;
}

.menu-enroll-container {
    margin-top: 5rem;
    text-align: center;
}

/* Home page */

.hero::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    background-color: rgb(0 0 0 / 9%);
}

.hero {
    height: 100dvh;
    overflow: hidden;
    display: grid;
    place-content: center;
}

.hero .container {
    z-index: 1;
}

.hero-media-container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.hero-media-container video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hero-content {
    z-index: 1;
}

#scroll-down-animation {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.mouse {
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    border: 2px solid #fff;
    height: 50px;
    width: 30px;
    position: relative;
}

.move {
    position: absolute;
    background-color: #fff;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: move 2s linear infinite;
}

@keyframes move {
    0% {
        transform: translate(-50%, 5px);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, 20px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 40px);
        opacity: 0;
    }
}

/* Meet Me */

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.marquee {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin: 3rem 0rem;
}

.marquee span {
    text-transform: uppercase;
    will-change: transform;
    transform: translateX(0);
    white-space: nowrap;
    animation: marquee 10s linear infinite;
    margin: 0px 4rem;
    color: var(--g24);
    font-size: var(--lgP);
    font-family: "Hara-ExtraBold";
}

.marquee span i {
    margin: 0px 0.3rem;
}

/* Onlyfans Model */

.onlyfans-image-container {
    height: 40vh;
    overflow: hidden;
    position: relative;
    margin: 5rem 0rem;
    border-radius: 1.5rem;
}

.onlyfans-image-container img {
    object-fit: cover;
}

/* Gallery */

.gallery-container {
    margin-top: 15rem;
}

.content-gallery {
    grid-column-gap: 7vw;
    display: grid;
    grid-area: 1 / 1 / 2 / 2;
    grid-template-areas:
        "... img-main img-main ..."
        "... img-main img-main ..."
        "img-left img-main img-main title-right"
        "img-left img-main img-main img-right"
        "title-left img-main img-main img-right"
        "title-left img-main img-main img-right";
    grid-template-columns: 18% 1fr 1fr 18%;
    grid-template-rows: 10vh 15vh auto 1fr auto 1fr;
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

.gallery-img {
    background-position: 50% 20%;
    background-size: cover;
    position: relative;
    will-change: transform;
}

.gallery-img-left {
    grid-area: img-left;
}

.gallery-title-left {
    font-size: 4vw;
    grid-area: title-left;
    justify-self: end;
    margin-top: 2rem;
}

.gallery-img-main {
    grid-area: img-main;
}

.gallery-img {
    background-position: 50% 20%;
    background-size: cover;
    position: relative;
    will-change: transform;
}

.gallery-title-main {
    font-family: Tall, "sans-serif";
    align-content: center;
    display: grid;
    font-size: 20vh;
    grid-area: img-main;
    grid-template-areas:
        "letter-1 ..."
        "... letter-3"
        "letter-2 ..."
        "... letter-4";
    grid-template-rows: repeat(4, 17vh);
    justify-items: center;
    line-height: 1;
    padding: 20vh 0 10vh;
}

.gallery-title {
    font-family: "Serenity", "serif";
    color: white;
    line-height: 1;
    margin: 0;
    position: relative;
    will-change: transform;
    z-index: 10;
}

.gallery-description {
    align-self: center;
    font-style: italic;
    grid-area: 2 / 3 / 3 / 5;
    justify-self: center;
    line-height: 1;
    max-width: 400px;
    text-transform: uppercase;
    z-index: 10;
}

.gallery-img-right {
    grid-area: img-right;
}
.gallery-img {
    background-position: 50% 20%;
    background-size: cover;
    position: relative;
    will-change: transform;
}

.gallery-title-right {
    font-size: 4vw;
    grid-area: title-right;
}

/* Socials */

.social-cta_socials__E7V_3 {
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}

section.social-cta_socials__E7V_3 ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding: 0px !important;
}

section.social-cta_socials__E7V_3 ul li {
    border: 1.5px solid #ff38bb;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 -1px -1px 0;
    transition: 0.3s ease;
}

section.social-cta_socials__E7V_3 ul a {
    align-items: center;
    display: flex;
    fill: white;
    transition: all 0.2s var(--circ-in-out);
    padding: 28px;
    height: 100%;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

section.social-cta_socials__E7V_3 ul a:hover {
    background-color: #ff38b93d;
    transition: 0.5s ease-in-out;
}

section.social-cta_socials__E7V_3 ul li img,
section.social-cta_socials__E7V_3 ul li svg {
    min-width: 32px;
    transition: all 0.2s var(--circ-in-out);
    transition-delay: 0.05s;
    max-height: 32px;
    max-width: 32px;
    display: block;
    fill: var(--color-primary);
}

section.social-cta_socials__E7V_3 ul a p {
    transition: all 0.2s var(--circ-in-out);
    color: var(--fill);
    font-weight: 700;
    position: absolute;
    font-size: 12px;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 36%);
    text-transform: capitalize;
    margin: 0px;
}

/* News Letter */

input {
    border: 1px solid #ff38bb;
    background-color: transparent;
    padding: 1rem 0.8rem;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: var(--mdP);
    outline: none;
    transition: 0.5s ease-in-out;
    width: 100%;
}

input:focus-visible {
    text-align: center;
    font-size: var(--mdP);
    outline: 1px solid #ff38bb;
    transition: 0.5s ease-in-out;
}

.news-letter-form {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

#message {
    display: grid;
    place-content: center;
    margin-top: 1rem;
}

.news-letter-success-alert,
.news-letter-danger-alert {
    font-family: "Serenity", "serif";
    width: max-content;
    background-color: transparent;
    color: white;
    border: none;
    padding: 0px;
}

/* Footer */

.footer-section {
    position: relative;
    overflow: hidden;
}

.footer-main-content-container {
    position: relative;
    z-index: 1;
}

.footer-section img {
    position: absolute;
    bottom: -30rem;
    right: 0px;
    left: 0px;
    width: 100%;
}

.footer-logo-container {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: "Hara-Medium", serif;
}

.footer-logo-container svg {
    width: 50%;
}

/* Rates Page*/
.rate-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-family: "Serenity", "Serif";
    font-size: 2.5rem;
}

.booking-rate-container {
    margin-bottom: 5rem;
}

.rate-head i {
    font-size: 4rem;
    color: #ff38bb;
}

.rates-body-container {
    margin-top: 2rem;
}

.rate-inner p {
    font-family: "Hara-Medium", "serif";
    margin: 0px !important;
    padding: 0px !important;
}

.rate-inner {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--g16);
}

.promo-contact-button {
    margin-top: 5rem;
}

.z-hero {
    height: 50dvh;
    overflow: hidden;
    display: flex;
    align-items: end;
    justify-content: center;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 35%,
        rgba(255, 0, 232, 1) 70%,
        rgba(0, 95, 255, 1) 100%
    );
}

.z-hero img {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.z-hero::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    background: linear-gradient(
        0deg,
        rgba(10, 10, 10, 1) 61%,
        rgba(10, 10, 10, 0) 100%
    );
}

.home-hero {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 35%,
        rgba(255, 0, 232, 1) 70%,
        rgba(0, 95, 255, 1) 100%
    );
}

.home-hero::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    background: linear-gradient(
        0deg,
        rgba(10, 10, 10, 1) 61%,
        rgba(10, 10, 10, 0) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content svg {
    width: 20%;
}

.top-7 {
    padding-top: 7rem !important;
}

.hero img {
    position: absolute;
    width: 100%;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

.footer-link {
    color: rgb(255, 255, 255);
}

.footer-brand-logo {
    width: 70px !important;
    position: relative !important;
    bottom: 0 !important;
    height: auto;
    animation: rotateLogo 4s linear infinite;
}

@keyframes rotateLogo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Zeee */

.zee-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 2rem;
}

.zee-img img {
    width: 100%;
}

.cal-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem;
}

.cal-img img {
    width: 60%;
    margin-bottom: 2rem;
}

.cal-space {
    height: 14rem;
}

.bold-text {
    font-family: "Hara-Bold", "serif";
}

.cal-hero {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        90deg,
        rgba(212, 0, 203, 1) 0%,
        rgba(0, 0, 0, 1) 35%,
        rgba(255, 0, 232, 1) 70%,
        rgba(0, 95, 255, 1) 100%
    );
}

.cal-hero::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    background: linear-gradient(
        0deg,
        rgba(10, 10, 10, 1) 61%,
        rgba(10, 10, 10, 0) 100%
    );
}

.z-9 {
    z-index: 9 !important;
}

.cal-container {
    padding-top: 15rem;
}

.cal-maq {
    padding: 7rem 0rem;
}

.cal-slide {
    background-color: #d400cb;
    color: #e4e4e4 !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem;
    border-radius: 100px;
}

.cal-features {
    position: relative;
    overflow: hidden;
    height: 80vh;
    margin-top: 15rem;
}

.cal-features img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.features-col {
    margin-top: -20%;
    z-index: 9;
    height: max-content;
    padding: 4rem 2rem;
    border-radius: 1.5rem;
}

.features-col h5 {
    text-align: center;
    margin-bottom: 1rem !important;
}