:root{
    --logo-1-color: #6C0017;
    --logo-2-color: #AC0041;
    --logo-3-color: #ED1372;
    --pink-4-color: #ed13d9;
    --logo-3-shadow: rgba(237,19,114,0.63);
    /* -webkit-transform: translateZ(0); */
    --logo-1-opposite: #9CFFE8;
    --logo-2-opposite: #53FFBE;
    --logo-3-opposite: #12EC8D;
    --logo-pink-filer: brightness(0) saturate(100) invert(19%) sepia(71%) saturate(5373%) hue-rotate(323deg) brightness(94%) contrast(98%)
}

a {
    text-decoration: none;
}

.no-scroll {
    overflow: hidden;
}

.selectDisable{
    user-select: none;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

.selectDisable2{
    user-select: none;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

@font-face {
    font-family: 'bahn';
    src: url(/static/fonts/bahnschrift.ttf);
}
@font-face {
    font-family: 'logo-font-main';
    src: url(/static/fonts/ReSc.ttf);
}

@font-face {
    font-family: 'logo-font-main-2';
    src: url(/static/fonts/CS-Regular.ttf);
}

@font-face {
    font-family: 'built-titling';
    src: url(/static/fonts/built-titling/built-titling-bd.otf);
}

/* Poppins Thin */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
  
/* Poppins Extra-Light */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* Poppins Light */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Poppins Regular */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
  
/* Poppins Medium */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
  
/* Poppins Semi-Bold */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Poppins Bold */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
  
/* Poppins Extra-Bold */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
  
/* Poppins Black */
@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}



/* input:invalid{
    border: 2px solid red;
} */

/*======================
    404 page
=======================*/


.page_404{
    padding:40px 0;
    background:#fff;
    font-family: 'Arvo', serif;
}

.page_404  img{ width:100%;}

.four_zero_four_bg{
    background-image: url(/static/images/dribble_1.gif);
    height: 400px;
    background-position: center;
}


.four_zero_four_bg h1{
    font-size:80px;
}

.four_zero_four_bg h3{
	font-size:80px;
}

.link_404{
	color: #fff!important;
    padding: 10px 20px;
    background: #39ac31;
    margin: 20px 0;
    display: inline-block;
}

.contant_box_404{
    margin-top:-50px;
}

.container.login-message{
    transition: all 1s ease;
}

.login-message-overflower{
    width: 100%;
    overflow: hidden;
}

.loading-spinner{
    z-index: 9999999;
    width: 100vw; height: 100vh;
    background: #fff;
    visibility: visible;
    display: flex;
    align-items: center;
    transform: translateZ(0);
    justify-content: center;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    position: fixed;
    top: 0; left: 0;
}

.loading-spinner--hidden{
    opacity: 0;
    visibility: hidden;
}

.loading-spinner::after{
    content: "";
    width: 75px; height: 75px;
    border: 15px solid #ddd;
    border-top-color: #ed13d9;
    border-radius: 50%;
    -webkit-animation: loading 1s ease-in-out infinite;
            animation: loading 1s ease-in-out infinite;
}



.fixed-position {
    position: fixed;
 }

.strokeme {
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.main-body{
    position: static;
    margin: 0;
    padding: 0;
    background-color: transparent;
    height: 100%;
    width: 100vw;
    overflow-x: clip;
}

.home-body-div{
    position: relative;
    overflow: hidden;
}

.home-logo-container{
    z-index: 10;
    position: relative;
    display: block;
    top: 7vh;
    opacity: 0;
    transition: 2s ease;
    margin-inline: auto;
    height:50%;
    width: 100%;
    max-width: 30em;
    transform: translate3d(0,-20vh,0);
}

.home-logo-container.show{
    opacity: 1;
    transform: translate3d(0,0,0);
}

.home-animated-logo{
    display: block;
    margin-inline: auto;
    width: 75%;
    -o-object-fit: cover;
       object-fit: cover;
}

.home-logo-suncity{
    display: block;
    margin-bottom: 1em;
    position: relative;
    margin-inline: auto;
}

.home-logo-tanningsalon{
    display: block;
    position: relative;
    margin-inline: auto;
    width: 90%;
}

.home-stars-container{
    display: block;
    position: relative;
    pointer-events: none;
    display: flex;
    opacity: 0;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.home-stars1{
    position: absolute;
    display: block;
    top: 160px;
    width: 100%;
    opacity: 0;
    transition: 0.5s ease;
    margin-inline: auto;
    -o-object-fit: contain;
       object-fit: contain;
    transform: translate3d(-90px,-100px,0) rotate3d(0,0,1,90deg);
}

.home-stars2{
    position: relative;
    top: 50px;
    left: 20px;
    display: block;
    width: 100%;
    opacity: 0;
    transition: 0.5s ease;
    margin-inline: auto;
    -o-object-fit: contain;
       object-fit: contain;
    transform: translate3d(-100px,-100px,0) rotate3d(0,0,1,180deg);
}

.home-stars3{
    position: relative;
    display: block;
    top: -333px;
    left: 100px;
    width: 100%;
    opacity: 0;
    transition: 0.5s ease;
    margin-inline: auto;
    -o-object-fit: contain;
       object-fit: contain;
    transform: translate3d(-110px,-100px,0) rotate3d(0,0,1,175deg);
}

/* .home-logo-container::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;
    transition: all 1s linear;
    width: 100%;
    height: 20%;
}

.home-logo-container.reveal-ts::after{
    transform: translate3d(150%,0,0);
} */

.home-logo-container.scroll{
    transition: 0s;
}


.homepage-grey-bg-first{
    z-index: -9999;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    min-height: 100vw;
    transition: 0.65s all ease-in;
    transform: scale3d(0,0,0);
    background: #5d5d5d;
}

.homepage-grey-bg-first.expand{
    transform: scale3d(1,1,1);
}

.homepage-grey-bg-second{
    z-index: -9998;
    position: relative;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    min-height: 110vw;
    transition: 0.65s all ease-in;
    transform: scale(0);
    background: #5d5d5d;
}

.homepage-pink-nav-holder{
    z-index: -9995;
    position: absolute;
    top: 0;
    right: 0;
    height: 88vh;
    min-height: 98vw;
    border-radius: 0 0 0 0em;
    transition: 0.5s all ease-in-out;
    width: 80vw;
    /* background: radial-gradient(circle at top right, var(--logo-3-color) 1000px, rgba(237, 19, 114, 0.7)); */
    background: rgb(237,19,114);
    background: linear-gradient(45deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 300% 300%;
    -webkit-animation: backgroundGradientAnim 5s ease 0.5s infinite ;
            animation: backgroundGradientAnim 5s ease 0.5s infinite ;
    /* background: radial-gradient(18% 28% at 24% 50%, #FFCECEFF 7%, #073AFF00 100%),radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%),radial-gradient(70% 53% at 36% 76%, #ED1372 0%, #073AFF00 100%),radial-gradient(42% 53% at 15% 94%, #B86565FF 7%, #073AFF00 100%),radial-gradient(42% 53% at 34% 72%, #A85050FF 7%, #073AFF00 100%),radial-gradient(18% 28% at 35% 87%, #A65656FF 7%, #073AFF00 100%),radial-gradient(31% 43% at 7% 98%, #D4D4D4FF 24%, #073AFF00 100%),radial-gradient(21% 37% at 72% 23%, #FFB06D9C 24%, #073AFF00 100%),radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%, #073AFF00 100%),radial-gradient(74% 86% at 67% 38%, #D06DFFF5 24%, #073AFF00 100%),linear-gradient(125deg, #ED1372 1%, #4C00FCFF 100%);; */
    /* box-shadow: 4px 2px 3px 2px #ffffffb2; */
    transform: translate3d(105%,0,0);
}


.homepage-pink-nav-holder.slide{
    transform: translate3d(0,0,0);
    border-radius: 0 0 0 1em;
}

.navbar.navbar-transprent.bg-transprent.fixed-top{
    width: 100vw;
    top: 0px;
    z-index: 1044;
    background-color: transparent!important;
}

.homepage-black-main-bg{
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 5000;
    left: -2px;
    top: -1px;
    background: #000;
    width: 83vw;
    height: 80vh;
    min-height: 90vw;
    transition: 0.7s all ease-in-out;
    transform: translate3d(0,0,0);
    border-radius: 0 0 2em 0;
    /* box-shadow: 1px 1px 1px 1px #00000088; */
}

.homepage-black-main-bg.menu-open{
    transform: translate3d(-70%,0,0)!important;
    border-radius: 0 0 1em 0;
}

.homepage-black-main-bg.loading{
    transform: translate3d(-104%,0,0)!important;
    border-radius: 0 0 0 0;
}

.homepage-black-main-bg.scroll{
    transition: 0s;
}

.city-container{
    margin-top: auto;
    width: 100%;
    opacity: 1;
    transition: all 1s ease-in-out;
}




.city-outline{
    z-index: 49;
    display: block;
    position: absolute;
    left: -8px;
    width: 194%;
    bottom: 12vh;
    transform: translate3d(0,200%,0);
    opacity: 0.2;
    transition: 2s ease;
    filter: drop-shadow(0px -2px 3px #ffffffcc)
    drop-shadow(0px -4px 6px #ffffffbb)
    drop-shadow(0px -7px 12px #ffffffaa)
    drop-shadow(0px -12px 20px #ffffff99)
    drop-shadow(0px -18px 30px #ffffff88);
    -webkit-filter: drop-shadow(0px -2px 3px #ffffffcc)
    drop-shadow(0px -4px 6px #ffffffbb)
    drop-shadow(0px -7px 12px #ffffffaa)
    drop-shadow(0px -12px 20px #ffffff99)
    drop-shadow(0px -18px 30px #ffffff88);
}

.animated-city{
    display: block;
    position: absolute;
    max-width: 100%;

    width: 194%;
    bottom: 12vh;
    transform: translate3d(0,200%,0);
    opacity: 0.2;
    transition: 2s ease;
}

.animated-city.show{
    transform: translate3d(0,0,0);
    opacity: 1;
}

.city-outline-black{
    z-index: 50;
    display: block;
    position: absolute;
    left: -8px;
    width: 194%;
    bottom: 12vh;
    transform: translate3d(0,200%,0);
    opacity: 0;
    transition: 2s ease;
    -webkit-filter: drop-shadow(10px -20px 6px #000000ce);
            filter: drop-shadow(10px -20px 6px #000000ce);

}

.city-outline.show{
    transform: translate3d(0,0,0);
    opacity: 1;
}

.city-outline-black.show{
    transform: translate3d(0,0,0);
    opacity: 1;
}

.city-wrapper{
    -webkit-animation: animateGlow 2.5s ease-in 3s infinite alternate;
    animation: animateGlow 2.5s ease-in 3s infinite alternate;
}




/* drop-shadow(0px -1px 1px #ffffffcc)
drop-shadow(0px -2px 3px #ffffffbb)
drop-shadow(0px -3px 5px #ffffffaa)
drop-shadow(0px -5px 10px #ffffff99)
drop-shadow(0px -8px 15px #ffffff88)

drop-shadow(0px -1px 1px #ffffffcc)
drop-shadow(0px -2px 3px #ffffffbb)
drop-shadow(0px -3px 6px #ffffffaa)
drop-shadow(0px -5px 10px #ffffff99)
drop-shadow(0px -8px 15px #ffffff88) */

.city-grey-filter-container{
    display: block;
    z-index: 59;
    position: relative;
    bottom: 12vh;;
    overflow: hidden;
    opacity: 0;
    transition: 2s ease;
    transform: translate3d(211%, 0, 0);
}

.city-grey-filter-container.show{
    transform: translate3d(0,0,0);
    opacity: 1;
}


.city-grey-filter{
    position: relative;
    left: -8px;
    width: 105%;
    transition: 1.5s ease-in;
}

.city-grey-filter.slide{
    transform: translate3d(0, 200%, 0);
}

.hero-book-now-section{
    z-index: 99;
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    margin-inline: auto;
    transform: translate3d(-50%,0,0);
}


.hero-book-button {
  position: relative;
  bottom: 10vh;
  display: inline;
  align-items: center;
  font-family: 'built-titling';
  font-weight: 500;
  font-size: 18px;
  padding: 0.9em 1.4em 0.82em 1.4em;
  color: white;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0,25vh,0);
  margin-inline: auto;
  background: black;
  border: 2px solid white;
  letter-spacing: 0.05em;
  border-radius: 20em;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: inset 0 0 0 0 #1f1f1f;
  /* -webkit-transition: box-shadow ease-out 0.4s;
  -moz-transition: box-shadow ease-out 0.4s;
  transition: box-shadow ease-out 0.4s; */
}

.hero-book-button a{
    color: white;
}

.hero-book-button.show{
  transform: translate3d(0,0,0);
}

/* .hero-book-button:hover {
    transition: all 0.2s ease; */
    /* box-shadow: 0 0.5em 1.5em -0.5em var(--logo-3-color); */
    /* transform: scale3d(0.98,0.98,0.98);
    box-shadow: inset 0 0 0 50px var(--logo-3-color);
  } */

  .hero-book-button:active {
    transition: all 0.2s ease;
    /* box-shadow: 0 0.3em 1em -0.5em var(--logo-3-color); */
    transform: scale3d(0.96,0.96,0.96);
    -webkit-transform: scale3d(0.96,0.96,0.96);
    box-shadow: inset 0 0 0 50px #1f1f1f;
  }


.nav-logo-container{
    position: relative;
    top: -35px;
    transition: 0.5s ease-in-out;
    transform: translate3d(0, -250px, 0);
}

.nav-logo-container.show{
    transform: translate3d(0, 30px, 0);
}

.nav-logo{
    display: block;
    margin-inline: auto;
    width: 60%;
    max-width: 60vw;
    -webkit-filter: drop-shadow(1px 1px 1px #000000dd);
            filter: drop-shadow(1px 1px 1px #000000dd);
}



.navbar-brand{
    overflow: hidden;
}

.navbar-brand-img{
    -webkit-filter: brightness(100) saturate(100%);
            filter: brightness(100) saturate(100%);
    margin-right: 1em;
    margin-left: 0.5em;
    width: 95px;
    height: 40px;
    transition: 0.4s ease-in-out;
    transform: translateX(-200%);

}


.navbar-toggler:focus-visible{
    outline: none!important;
}

.navbar-toggler{
    z-index: 40;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease-in-out;
    color: white;
    padding: 0.25rem 0.25rem;
    font-size: 1.5rem;
}

.navbar-toggler:focus{
    box-shadow: none;
}

model-viewer{
    width: 200px;
    height: 200px;
}

.navbar-toggler-icon.open{
    transform: rotate(90deg)!important;
    transition:  all 0.4s ease-in;
    -webkit-filter: drop-shadow(1px -1px 1px #000000dd);
            filter: drop-shadow(1px -1px 1px #000000dd);

    
    /* animation: 1s spinMenuIcon;
    animation-timing-function: ease-in, linear, ease-out; */
}


.nav-menu{
    z-index: 35;
    position: absolute;
    background: #00000000;
    width: 80vw;
    height: 88vh;
    min-height: 100vw;
    transition:  transform 0.5s ease-in;
    transform: translateX(100%) translate3d(0,0,0);
    right: 0;
    top: 0;
    border-radius: 0 0 0 1em;
    padding-top: 1em;
    font-family: 'bahn';
    background: rgba(237,19,114,1);
    background: linear-gradient(45deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 300% 300%;
    -webkit-animation: backgroundGradientAnim 5s ease 0.5s infinite ;
            animation: backgroundGradientAnim 5s ease 0.5s infinite ;
}

.nav-menu.open{
    transform: translateX(0) translate3d(0,0,0);
}

.navbar-menu-items-container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1vh 5px;
    grid-template-areas:
        "."
        "."
        "."
        "."
        "."
        ".";
    justify-content: space-between;
    align-content: center;
    justify-items: center;
    align-items: center;
    font-size: 1.3em;
    font-weight: 600;
    color: #fff;
}

.nav-item{
    transform: translate3d(0, -450px, 0);
    transition: 0.5s ease-in-out;
}

.nav-item.show{
    transform: translate3d(0, 0, 0);
}



.nav-menu-bottom-links{
    position: absolute;
    /* background: #000; */
    bottom: 0px;
    width: 100%;
}

.nav-book-now-button{
    display: flex;
    text-decoration: none;
    margin-inline: auto;
    width: 10em;
    max-width: 80%;
    height: 2.5em;
    border-radius: 1.5em;
    color: #000;
    justify-content: center;
    align-items: center;
    font-family: 'bahn';
    font-size: 1.4em;
    font-weight: 800;
    background-color: #fff;
    mix-blend-mode: lighten;
    margin-bottom: 1.3em;
    user-select: none;
    cursor: pointer;
}

.nav-phone-container{
    display: flex;
    width: 100%;
    height: 27px;
    margin-bottom: 1.6em;
    padding-left: 13vw;
    

}

.nav-phone-icon::before{
    display: block;
    content: url(/static/icons/phone-icon.svg);
    width: 27px;
    height: 27px;
}

.nav-phone-icon{
    margin-right: 2em;
}

.nav-phone-us{
    font-family: 'bahn';
    font-size: 1em;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.2px;
    color: #fff!important;
}

.nav-email-container{
    display: flex;
    width: 100%;
    height: 27px;
    /* justify-content: center; */
    margin-bottom: 1.2em;
    padding-left: 13vw;
}

.nav-email-icon{
    margin-right: 2em;
}

.nav-email-icon::before{
    display: block;
    content: url(/static/icons/email-icon.svg);
    width: 27px;
    height: 27px;
}

.nav-email-us{
    font-family: 'bahn';
    display: block;
    font-size: 1em;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.2px;
    color: #fff!important;
}

.nav-address-container{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 1em;
}

.nav-address::before{
    display: block;
    content: url(/static/icons/map-icon.svg);
    -webkit-filter: invert(100%);
            filter: invert(100%);
    width: 13px;
    height: 13px;
    margin-right: 3px;
}

.nav-address{
    display: flex;
    font-family: 'bahn';
    font-size: 14px;
    line-height: 14px;
    height: 14px;
    font-weight: 100;
    margin-inline: auto;
    text-align: center;
    /* text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.2px; */
    color: #fff!important;
}

/* .nav-book-now-button span{
    font-family: 'bahn';
    width: 12em;
    height: 3em;
    font-weight: 800;
    font-size: 1.4em;
    line-height: 1.5em;
    mix-blend-mode: lighten;
    margin-inline: auto;
    margin-block: auto;
    color: #000;
    background-color: #fff;
} */



/* .about-us-title-homepage{
    display: grid;
    margin-bottom: 2em;
} */

/* .about-us-title-homepage-bg-left{
    z-index: -10;
    transition: all 0.5s ease;
    transform: translate3d(-100%,0,0);
    grid-area: 1 / 1 / 2 / 2;
    background: var(--logo-3-color);
} */

/* .about-us-title-homepage-bg-right{
    z-index: -10;
    transition: all 0.5s ease;
    transform: translate3d(100%,0,0);
    grid-area: 1 / 2 / 2 / 3;
    background: var(--logo-3-color);
} */

/* .about-us-title-homepage-bg-left.show, .about-us-title-homepage-bg-right.show{
    transform: translate3d(0,0,0);
} */


/* .about-us-title{
    grid-area: 1 / 1 / 2 / 3;
    display: block;
    font-family: 'built-titling';
    margin-inline: auto;
    text-align: center;
    font-size: 2em;
    transition: all 1s ease;
    transition-delay: 0.3s;
    opacity: 0;
    line-height: 3em;
    margin-bottom: 0;
    color: white;
} */

/* .about-us-title.show{
    transition-delay: 0.5s;
    opacity: 1;
} */

.about-us-image-homepage-container{
    width: 95vw;
    margin-bottom: -100px;
    display: block;
    margin-inline: auto;
    transition: 1s ease;
    transform: translate3d(-60%,0,0);
}

.about-us-image-homepage-container.show{
    transform: translate3d(0,0,0);
}

.about-us-homepage-section .about-us-city{
    position: relative;
    display: block;
    z-index: 94;
    margin-top: -100px;
    margin-inline: auto;
    transition: 0.8s ease;
    transition-delay: 0.8s;
    top: 65px;
    transform: translate3d(0,120px,0);
    max-width: 330px;
    width: 92vw;
    -webkit-filter: drop-shadow(4px -5px 6px #00000055);
            filter: drop-shadow(4px -5px 6px #00000055);
}

.about-us-homepage-section .about-us-city.show{
    transform: translate3d(0,0,0);
}

.about-us-homepage-section .about-us-image{
    display: block;
    position: relative;
    margin-inline: auto;
    z-index: 99;
    height: 240px;
    width: 340px;
    max-width: 95vw;
    -o-object-fit: cover;
       object-fit: cover;
}

.about-us-homepage-section .background-pink-box{
    display: block;
    position: relative;
    z-index: 95;
    left: 130px;
    margin-inline: auto;
    top: -250px;
    transform: translate3d(-15px,15px,0);
    transition: 0.5s ease;
    opacity: 1;
    height: 150px;
    width: 100%;
    max-width: 100px;
    background: rgba(237,19,114,1);
    background: linear-gradient(225deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 300% 300%;
    -webkit-animation: backgroundGradientAnim 5s ease 0.5s infinite ;
            animation: backgroundGradientAnim 5s ease 0.5s infinite ;
    
}



.about-us-homepage-section .background-pink-box.show{
    transform: translate3d(0,0,0);
}

.free-spin-anchor{
    text-decoration: underline;
    color: #000;
    user-select: none;
    cursor: pointer;
}

.about-us-homepage-section p{
    display: block;
    font-family: 'bahn';
    margin-inline: auto;
    text-align: center;
    padding-inline: 0.2em;
    overflow: hidden;
    transition: all 1s ease;
    transform: scale3d(0,0,0);
    margin: 1em;
}

.pink-line-l-container, .pink-line-r-container{
    overflow: hidden;
    margin-inline: auto;
    height: 2px;
    width: 100%;
}

.pink-line-l{
    transform: translate3d(-120%,0,0);
}
.pink-line-r{
    transform: translate3d(120%,0,0);
}

.pink-line-l, .pink-line-r{
    border-top: 2px solid;
    border-color: #ed13d9;
    margin-inline: auto;
    opacity: 1;
    transition: all 1s ease;
    width: 84vw;
    margin-block: 0;
}

.pink-line-l.show, .pink-line-r.show{
    transform: translate3d(0,0,0);
}

.black-overlay-l, .black-overlay-r{
    position: relative;
    top: -2px;
    height: 2px;
    width: 84vw;
    transition: all 1s ease;
    margin-inline: auto;
    background: #000;
    z-index: 2;
}

.black-overlay-l{
    transform: translate3d(-120%,0,0);
}
.black-overlay-r{
    transform: translate3d(120%,0,0);
}

.black-overlay-l.hide{
    transform: translate3d(120%,0,0);
}

.black-overlay-r.hide{
    transform: translate3d(-120%,0,0);
}

.black-overlay-l.show, .black-overlay-r.show{
    transform: translate3d(0,0,0);
}

.about-us-homepage-section p.show{
    transform: scale3d(1,1,1);
}


.navbar-toggler[aria-expanded='false']{

    transform: rotate(0deg);
}

.navbar-toggler[aria-expanded='true']{
    transform: rotate(-90deg);
}

.navbar-toggler-icon{
    -webkit-filter: brightness(100) saturate(0);
            filter: brightness(100) saturate(0);
    transition: 0.4s ease-in-out;
    transform: translateX(200%);
    -webkit-filter: drop-shadow(1px 1px 1px #000000dd);
            filter: drop-shadow(1px 1px 1px #000000dd);
    /* animation: moveNavIcon 2s ease-in-out 1s infinite alternate; */
    background-image: url(/static/images/nav_button.svg);
}

.offcanvas-title{
    text-align: center;
    padding-right: 1rem;
}

.nav-item-r{
    margin-bottom: 0.25em;
    margin-top: 0.25em;
    padding-inline: 0.5em;
}

.navbar-nav.justify-content-end{
    padding-inline: 1em;
}


.navbar-nav .nav-link-r:link {
    color: #fff;
    font-weight: bold;
    font-size: 100%;
    
}

.navbar-nav .nav-link-r:visited {
    color: #fff;
    font-weight: bold;
    font-size: 100%;
}

.navbar-nav .nav-link-r:hover{
    color: var(--logo-2-color);
}

.navbar-nav .nav-link-r.active{
    color: var(--pink-4-color);
}

.navbar-brand-img-light{
    -webkit-filter: brightness(100%) saturate(100%);
            filter: brightness(100%) saturate(100%);
    margin-right: 1em;
    margin-left: 0.5em;
    width: 80%;
    height: auto;
}



.navbar-brand-img-dark{
    -webkit-filter: brightness(0) saturate(100%);
            filter: brightness(0) saturate(100%);
    margin-right: 1em;
    margin-left: 0.5em;
    width: 80%;
    height: auto;
}

.bg-body-tertiaryy {
    background-color: black;
    /* border-end-start-radius: .2em;
    border-end-end-radius: .2em; */
    padding-bottom: 10px;
    z-index: 2;
}

.navbar-nav .nav-link:link {
    color: #fff;
    font-weight: bold;
    font-size: 100%;
}

.navbar-nav .nav-link:visited {
    color: #fff;
    font-weight: bold;
    font-size: 100%;
}

.navbar-nav .nav-link:hover{
    color: var(--logo-2-color);
}

.navbar-nav .nav-link.active{
    color: var(--pink-4-color);
}


.navbar-nav{
    align-items: center;
    /* justify-content: center; */

}

nav-item.active{
    color: var(--pink-4-color);
}

.collapse.navbar-collapse{
    justify-content: space-between;

}


.book-now-button{
    background: rgba(237,19,114,1);
    background: linear-gradient(45deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 400% 400%;
    -webkit-animation: backgroundGradientAnim 10s ease infinite ;
            animation: backgroundGradientAnim 10s ease infinite ;
    border: none;
    font-weight: bold;
    padding: 1em 1.2em;
    border-radius: 0.4em;
    font-size: 2vmax;
    box-shadow: -4px 4px 8px #33333388;
    vertical-align: middle;
    text-align: center;
    line-height: 150%;
    /* transform: scale(0); */
    transition: 0.2s ease-in-out;
}

.book-now-button:hover{
    border-color: var(--logo-2-color);
    border-radius: 0.5em;
    background: var(--logo-2-color);
    box-shadow: -2px 2px 4px #33333388;
    transform: translateY(4px);
}

.btn-primary.book-now-button:active{
    background: #8d1372;
    border-color: #8d1372;
    border-radius: 0.6em;
    box-shadow: -1px 1px 2px #33333388;
}


.card.text-bg-dark{
    border-radius: 0px;
    background-color: transparent!important;
    background-image: url(/static/images/beach-home.jpg);
    margin-bottom: 25px;
    --bs-card-border-color: none;
    height: 95vh;
    width: auto;
    transition: 0.3s ease-in-out;
    background-repeat: no-repeat;
    background-position: center, bottom;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    /* background: inherit; */
    /* filter: grayscale(100%); */
    opacity: 0.4;
    /* opacity: 0; */
}

.card.text-bg-dark::before{
    content: '';
    position: absolute;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
    background: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    -webkit-filter: blur(5px);
            filter: blur(5px);
}



.card-img-overlay{
    display: flex;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container-fluid{
    border-radius: 0px;
    overflow: hidden;

}

.col-sm{
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    min-height: 400px;
    margin-bottom: 50px;
    align-items: left;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.col-sm.col1{
    position: relative;
    left: 40px;
    background: var(--pink-4-color);
    /* background: rgba(240, 46, 170, 0.8); */
    background: radial-gradient(circle at top center, rgba(240, 46, 170, 1) 50px, rgba(240, 46, 170, 0.8));
    text-align: left;
    margin-left: -50px;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 1em 0 0 1em;
    box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
    /* box-shadow: -3px 3px 6px #000000cc; */

}

.col-sm.col1 .btn.btn-primary{
    background: rgba(255,231,0,1);
    border-color: transparent;
    color: black;
    font-family: 'bahn';
    font-weight: bold;
    box-shadow: -2px 2px 5px #000000a9;
    
    
}

.col-sm.col2{
    position: relative;
    right: 40px;
    /* background: rgba(237, 19, 114, 0.8); */
    /* background: radial-gradient(circle at top center, rgba(237, 19, 114, 1) 70px, rgba(237, 19, 114, 0.8)); */
    background: radial-gradient(circle at top center, rgba(240, 46, 170, 0.8) 50px, rgba(240, 46, 170, 1));
    text-align: right;
    margin-right: -50px;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 0 1em 1em 0;
    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
    /* box-shadow: rgba(237, 19, 114, 0.4) 5px 5px, rgba(237, 19, 114, 0.3) 10px 10px, rgba(237, 19, 114, 0.2) 15px 15px, rgba(237, 19, 114, 0.1) 20px 20px, rgba(237, 19, 114, 0.05) 25px 25px; */
    /* box-shadow: 3px 3px 6px #000000cc; */
    /* background: linear-gradient(180deg, rgba(172,0,65,1) 80%, rgba(237,19,114,1) 100%); */
}



.col-sm.col2 .btn.btn-primary{
    background: rgba(255,231,0,1);
    border-color: transparent;
    color: black;
    font-family: 'bahn';
    font-weight: bold;
    box-shadow: 2px 2px 5px #000000a9;
}

.col-sm.col3{
    position: relative;
    left: 40px;
    /* background: rgba(240, 46, 170, 0.8); */
    /* background: radial-gradient(circle at top center, rgba(240, 46, 170, 1) 70px, rgba(240, 46, 170, 0.8)); */
    background: radial-gradient(circle at top center, rgba(240, 46, 170, 1) 50px, rgba(240, 46, 170, 0.8));
    text-align: left;
    margin-left: -50px;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 1em 0 0 1em;
    box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;
    /* box-shadow: -3px 3px 6px #000000cc; */
}

.col-sm.col3 .btn.btn-primary{
    background: rgba(255,231,0,1);
    border-color: transparent;
    color: black;
    font-family: 'bahn';
    font-weight: 800;
    box-shadow: -2px 2px 5px #000000a9;
}

.btn.btn-primary.btn-lg{
    margin-top: auto;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.grid-header{
    font-family: 'bahn';
    font-weight: bold;
    color: whitesmoke;
    margin-top: 80px;
    text-align: center;

   background-image: linear-gradient(
      -225deg,
      #9126a3 0%,
      #231557 25%,
      #44107a 50%,
      #1f51ff 75%,
      #ff37ee 100%
    );

    /* background-image: linear-gradient(
        -225deg,
        #ff0000 0%,
        #ff7f00 10%,

        #7fff00 20%,
        #00ff7f 30%,
        #00ffff 40%,
        #007fff 50%,
        #0000ff 60%,
        #7f00ff 70%,
        #ff00ff 80%,
        #ff007f 90%,
        #ff0001 100%
      );
    background-size: auto auto; */
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: textclip 3s linear infinite;
            animation: textclip 3s linear infinite;
    /* backdrop-filter: blur(10px); */
    /* margin-bottom: 10px; */
    /* padding-left: 10px; */
}




.grid-header-circle-left{
    position: relative;
    z-index: 5;
    top: -80px;
    left: 50px;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    /* background: radial-gradient(circle, rgba(255,231,0,1) 60%, rgba(242,57,169,1) 100%); */
    background: radial-gradient(circle at top center, rgba(255,231,0,1) 70px, #ffc020);
    /* background: #04d9ff; */
    box-shadow: -1px 2px 5px #000000a9;
    margin-bottom: -50px;
    -webkit-backdrop-filter: blur(100px);
            backdrop-filter: blur(100px);

    /* background: linear-gradient(
        -225deg,
        #231557 0%,
        #44107a 29%,
        #ff1361 67%,
        #fff800 100%
      );
      background-size: auto auto;
      background-clip: border-box;
      background-size: 200% auto;
      color: #fff;
      -webkit-text-fill-color: transparent;
      -webkit-text-fill-color: transparent;
      animation: textclip 2s linear infinite; */
}

.grid-header-circle-right{
    position: relative;
    z-index: 5;
    top: -80px;
    left: 70px;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: radial-gradient(circle at top center, rgba(255,231,0,1) 70px, #ffc020);
    /* background: #04d9ff; */
    box-shadow: 1px 2px 5px #000000a9;
    margin-bottom: -50px;
    -webkit-backdrop-filter: blur(100px);
            backdrop-filter: blur(100px);
}



/* .grid-header-circle::before{
    content: '';
    position: absolute;
    box-shadow: inset 0 0 1000px #04d9ff; */
    /* background: inherit; */
    /* border-radius: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    width: 200px;
    filter: blur(10px);
} */

.horizontal-line{
    height: 4px;
    /* width: 50%; */
    justify-self: center;
    background-color: white;
    border-radius: 2px;
    border-top-style: none;
    margin-inline: 10px;
}

.grid-paragraph{
    font-family: 'bahn';
    font-weight: lighter;
    color: whitesmoke;
    margin-top: 5px;
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.row.home-grid{
    justify-content: space-evenly;
    overflow-x: clip;
}

.container-fluid.text-center.home-grid{
    background: #1f1f1f00;
    
}

.reveal.left{
    position: relative;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.75s;
}

.reveal.right{
    position: relative;
    transform: translateX(-100%);
    opacity: 0;
    transition: all 0.75s;
}

.reveal.active{
    transform: translateY(0%);
    opacity: 1;
}


.meh{
    height: 500px;
}

.carousel.slide{
    background-color: white;
    margin-top: 30px;
    margin-left: 20vw;
    margin-right: 20vw;
}

.btn.btn-sign-up{
    color: white;
    font-size: 16px;
    box-shadow: -1.5px 1.5px 5px #3d3d3d;
    margin: 0 auto;
    text-align: center
}

.btn.btn-sign-up:hover{
    border-color: var(--logo-2-color);
    border-radius: 0.5em;
    background: var(--logo-2-color);
    box-shadow: -1.5px 1.5px 5px #888888;
    transform: translateY(2px);
}

.btn.btn-sign-up:active{
    background: #8d1372;
    border-color: #8d1372;
    border-radius: 0.6em;
    box-shadow: -1px 1px 3px #888888;
    color: white;
}

.submit-box{
    display: flex;
    justify-content: center;
}

.iti--separate-dial-code{
    width: 100%;
    min-height: (1.5em + 1rem + calc(var(--bs-border-width) * 2));
    height: 2.5em;
    font-size: 1em;
}


#_phone{
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    border-color: #dee2e6;
    border-style: solid;
    border-width: 1px;
    outline-width: 1px;
}

#_phone:focus-visible{
    border-width: 1px;
    outline: none;
    border-style: solid;
    border-color: var(--pink-4-color);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.063), 0 0 8px var(--logo-3-shadow);
}



.iti__selected-flag{
    border-top-left-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
}

.sign-up-legend{
    text-align: center;
}

.sign-in-form-container{
    width: 90%;
}

.form-group.col-md-4{
    margin-bottom: 10px;
    font-size: 1em;
}

.form-group label{
    color: white;
}

.alert{
    display: flex;
    justify-content: center;
    margin-inline: auto;
}

.close-alert-btn{
    position: relative;
    margin-left: auto;
    background: none;
    border: none;
    place-self: right;
    font-size: 1.5rem;
    line-height: 1rem;
}


.skin-type-info-btn{
    font-weight: 500;
    width: 80%;
    display: block;
    border: none;
    background: rgba(237,19,114,1);
    background: linear-gradient(45deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 400% 400%;
    -webkit-animation: backgroundGradientAnim 10s ease infinite ;
            animation: backgroundGradientAnim 10s ease infinite ;
    border-radius: 6px;
    text-align: center;
    margin-top: 5px;
    margin-inline: auto;
    color: white;
    box-shadow: -2px 2px 6px #888888;
    transition: 400ms ease;
}


.skin-type-info-btn:active{

    box-shadow: -1px 1px 4px #888888;
    border-radius: 4px;
    color: white;
    transform: scale(0.98);
}

.modal-skin-types{
    position: fixed;
    top: 70px;
    left: 50%;
    z-index: 9999;
    padding: 1em;
    width: min(90vw, 40rem);
    max-height: 80vh;
    border: 0;
    font-size: 0.7rem;
    box-shadow: 0 0 1em rgb(0 0 0 / 0.3);
    border-radius: 10px;
    scrollbar-color: #000;
    pointer-events: none;
    background: #fff;
    color: #000;
    opacity: 0;
    transition: all 0.2s ease;
    transform: scaleY(0) translateX(-50%);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.modal-skin-types-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    transition: all 0.2s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.modal-skin-types.open{
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
    pointer-events: inherit;
}

.modal-skin-types-overlay.open{
    pointer-events: all;
    opacity: 1;
}


.skin-modal-title-container{
    display: flex;
    justify-content: space-between;
}

.skin-modal-title{
    font-family: 'logo-font-main';
    font-size: 2.7rem;
    text-align: center;
    align-self: flex-end;
    flex-grow: 2;
}

.close-modal-x{

    display: block;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    font-size: 2rem;
    font-weight: 600;
    height: 50%;
    background-color: white;
    border-color: white;
    border-style: hidden;
    transition: all 0.1s ease-in;
}

.close-modal-x:active{
    border: 0px solid;
    font-size: 2rem;
    background-color: white;
    transform: scale(0.97);
    /* border-color: white;
    border-style: hidden; */
}

.close-modal-x:focus-visible{
    border: 0px;
    outline: none;
}

.close-modal-btn{
    display: block;
    background: var(--pink-4-color);
    border-color: var(--pink-4-color);
    font-weight: 300;
    border-radius: 0.4em;
    font-size: 1.4vmax;
    box-shadow: -3px 3px 4px #888888;
    margin-inline: auto;
    text-align: center;
    line-height: 1em;
    padding-inline: 1em;
    padding-block: 0.5em;
    transition: 0.5s ease;
    color: white;
    border-style: none;
    }

.close-modal-btn:hover{
    border-color: var(--logo-2-color);
    border-radius: 0.5em;
    background: var(--logo-2-color);
    box-shadow: -2px 2px 3px #888888;
    /* transform: translateY(2px); */
}

.close-modal-btn:active{
    background: #8d1372;
    border-color: #8d1372;
    border-radius: 0.6em;
    box-shadow: -1px 1px 2px #888888;
}

.signup-contact-pref-container{
    margin-inline:6px;
    margin-block:16px;
    background:white;
    color:black;
    padding:10px;
    border-radius:0.8rem;
    box-shadow: 0 0 1em rgb(0 0 0 / 0.3);
}


.horizontal-line-title{
    border-top-style: none;
    height: 4px;
    background-color: var(--pink-4-color);
    opacity: 0.6;
    border-radius: 2px;
}

.horizontal-line-sub{
    border-top-style: none;
    height: 2px;
    background-color: var(--pink-4-color);
    opacity: 1;
    border-radius: 1px;
}

.modal-type-title{
    font-family: 'logo-font-main';
    text-align: center;
    font-size: 1.4rem;
}

.modal-type-title span{
    font-size: 1.05rem;
    font-family: 'logo-font-main-2';
}

.modal-type-text{
    font-family: 'bahn';
    line-height: 1rem;
    font-size: 0.9rem;
}

.form-control{
    font-size: 1em;
}

.form-control:focus {
    border-color: var(--pink-4-color);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.063), 0 0 8px var(--logo-3-shadow);
  }


.dropdown-container{
    font-family: Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.dropdown{
    min-width: 15em;
    position: relative;
    margin: 2em;
    font-family: 'bahn';
    border-radius: 0.6em;
}

.dropdown *{
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.select{
    background: rgb(208,0,90);
    background: linear-gradient(180deg, rgba(208,0,90,1) 0%, rgba(231,104,160,1) 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 8px 2px #00000066;
    align-items: center;
    /* border: 2px var(--logo-3-color) solid; */
    border-radius: 1em;
    padding: 0.7em;
    cursor: pointer;
    transition: all 0.2s ease-in;
    font-weight: 900;
    font-size: 1.2em;
}

.select::after{
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: 50%;
    border-radius: 0.92em 0.92em 0.4em 0.4em;
    transition: all 0.1s ease-in;

	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.select-clicked{
    border: 2px #ffffff00 solid;
    transform: scale(0.99);
    box-shadow: 0px 0px 2px 0px #00000066;
}

.select-clicked::after{
    content: '';
	position: absolute;
    /* transform: scale(1.02); */
    top: 0px;
	left: 0px;
	width: calc(100% + 0px);
    /* transition: all 0.2s ease-in; */
	height: 58%;
    border-radius: 0.88em 0.88em 0.1em 0.1em;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.form-group.reset-password label{
    font-family: 'bahn';
    margin-left: 1rem;
    margin-bottom: 0.4rem;
}

.caret{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    transition: 0.3s;
}

.caret-rotate{
    transform: rotate(180deg);
}

.menu{
    list-style: none;
    padding: 0.2em 0.5em;
    background: var(--pink-4-color);
    border: 1px var(--logo-3-color);
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
    border-radius: 1em;
    color: #fff;
    position: absolute;
    top: 3.65em;
    /* left: 50%; */
    width: 100%;
    /* transform: translateX(-50%); */
    opacity: 1;
    display: none;
    transition: all 0.2s ease;
    z-index: 1;
    box-shadow: 0px 1px 8px 2px #00000066;

}

.menu::after{
    pointer-events: none; 
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: 50%;
    border-radius: 0.92em 0.92em 0.1em 0.1em;
    transition: all 0.2s ease-in;

	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.menu li{
    padding: 0.7em 0.5em;
    margin: 0.3em 0;
    border-radius: 0.5em;
    cursor: pointer;
    font-weight: 600;
}

.menu li:hover{
    background: var(--logo-2-color);
}

.menu .active{
    background: var(--logo-2-color);
    
}

.menu-open{
    display: block;
    opacity: 1;
    box-shadow: 0px -1px 2px 0px #00000066;
    transform: scale(0.99);
}

.account-title{
    display: block;
    text-align: center;
    font-family: 'bahn';
}

.account-main{
    display: block;
    padding-block: 2rem;
    margin-inline: auto;
    padding-inline: 1rem;
    place-items: center;
    max-width: 50rem;
    justify-self: center;

}

.personal-info-block{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
    flex-wrap: wrap;


}

p{
    margin: 1em;
}

.personal-title{
    font-family: 'bahn';
    font-weight: 700;
}

.personal-detail{
    font-family: 'bahn';
    text-align: right;
}

.personal-detail.phone-num p{
    margin-bottom: 0;
}

.personal-detail.phone-num .verify-num-msg{
    margin-top: 0;
    margin-bottom: 1em;
}

.request-otp-code-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-otp-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.otp-form-container{
    display: flex;
}

.otp-loader {
    border: 6px solid #fff;
    border-top: 6px solid #ed13d9;
    border-radius: 50%;
    margin-block: auto;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
}

.verify-otp-loader {
    border: 6px solid #fff;
    border-top: 6px solid #ed13d9;
    border-radius: 50%;
    margin-block: auto;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
}

.otp-form{
    margin-inline: auto;
    width: 100%;
}

.btn-otp{
    color: white;
    max-width: 10em;
    font-size: 16px;
    max-height: 4em;
    align-self: flex-end;
}

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

.typing-section {
    display: inline;
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
    margin-inline: auto;
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'bahn';
    font-weight: 200;
    margin-top: 1em;
}

.typed-cursor{
    transition: 0.5s ease-in-out;

}

.spins-container-grid {
    display: grid;
    font-family: 'bahn';
    max-width: 800px;
    /* width: 80vw; */
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-template-rows: 1fr;
    gap: 12px 12px;
    grid-template-areas:
      ".";
    justify-content: space-between;
    align-content: center;
    justify-items: center;
    align-items: center;
    margin-bottom: 2rem;
}

.spin-item{
    display: none;
    background: #fff;
    border: 1px #000000aa solid;
    border-radius: 6px;
    width: 80vw;
    max-width: 20rem;
    min-height: 200px;
    padding: 1rem;
    margin-inline: auto;
    box-shadow: 1px 1px 3px #00000088;

}

.spin-item p{
    margin: 0;
}

.spin-date-container{
    display: flex;
    justify-content: space-between;
}

.spin-time-container{
    display: flex;
    justify-content: space-between;
}

.prize-container{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.prize-status-container{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.load-more-spins{
    display: block;
    margin: auto;
    height: 40px;
    padding: 0 40px;
    border: 0;
    border-radius: 5px;
    background-color: var(--pink-4-color);
    color: #f1f1f1;
    font-size: 1em;
    cursor: pointer;
    transition: 300ms linear;
    font-family: 'bahn';
    font-weight: 500;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}


/* Account Details */

.account-details-container{
    width: 100%;
    display: block;
    margin-top: 16px;
    /* padding: 2vw; */
    /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1); */
    /* border-radius: 20px; */
}

.tab-box{
    display: flex;
    width: 100%;
    max-width: 50rem;
    margin-inline: auto;
    justify-content: space-around;
    align-items: center;
    border-bottom: 4px solid #bbb;
    position: relative;

}

.tab-box .tab-btn{
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500;
    color: #bbb;
    background: none;
    border: none;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-box .tab-btn.active{
    transform: scale3d(1.04, 1.04, 1.04);
    color: #fff;
}

.account-det-line{
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 90px;
    height: 4px;
    border-radius: 5px;
    background-color: rgba(237,19,217,1);
    transition: all 0.3s ease-in-out;
}

.details-content hr{
    margin-inline: auto;
    max-width: 55rem;
}

.details-content-box .details-content{
    display: none;
    -webkit-animation: moving 0.5s ease;
            animation: moving 0.5s ease;
}

.details-content-box .details-content.active{
    display: block;
}

.bookings-container-grid{
    display: block;
    row-gap: 1em;
    margin-top: 16px;
    max-width: 50rem;
    transform: translate3d(0, 0, 0);
    margin-inline: auto;
    transition: 0.2s linear;
}

.bookings-container-grid.open{
    transform: translate3d(0, 210px, 0);
}

.booking-item{
    font-family: 'bahn';
    display: none;
    /* transform: scale(0); */
    background: white;
    /* background: linear-gradient(315deg, #ed1372, #ed7513); */
    /* background: linear-gradient(165deg, rgba(237,19,114,1) 43%, rgba(190,85,0,1) 100%); */
    border-radius: 0.3rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid #5d5d5d44;
    justify-content: space-between;
    color: black;
    opacity: 1;
    margin-inline: 0.5em;
    transition: all 0.3s ease-in-out;
    margin-bottom: 1.2em;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    -moz-user-select: none;
         user-select: none; /* Standard syntax */
}
/* 
.booking-item:hover{
    opacity: 0.9;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.34);;
    border-radius: 0.7em;
    background: linear-gradient(165deg, rgba(237,19,114,0.5) 43%, rgba(190,85,0,0.5) 100%);

} */

.booking-item:active{
    opacity: 0.8;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
    border-radius: 0.5em;
}

.load-more-bookings{
    display: block;
    margin: auto;
    height: 40px;
    padding: 0 40px;
    border: 0;
    border-radius: 5px;
    background-color: var(--pink-4-color);
    color: #f1f1f1;
    font-size: 1em;
    cursor: pointer;
    transition: 300ms linear;
    font-family: 'bahn';
    font-weight: 500;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}



.load-more-bookings:active{
    opacity: 0.8;
    border-radius: 2px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

.booking-item-s{
    text-align: left;
    flex-grow: 2;
}

.booking-item-date{
    margin-left: 0.5em;
}


.bookings-right-arrow{
    align-self: center;
    font-weight: 900;
    font-size:1.2em;
    padding-block: 0;
    margin-block: 0;
    margin-left: 0;
    margin-right: 0.5em;
}

.booking-id{
    display: none;
    align-self: center;
    font-weight: 100;
    font-size:0.8em;
    padding-block: 0;
    margin-block: 0;
    margin-right: 0;
    margin-inline: 0.5em;
}

.bookings-text{
    margin: 0.5em;
    font-size: 0.9em;
    font-weight: 900;
    text-align: center;
}

.booking-title{
    font-weight: 400;
    margin-bottom: 0;
    
}

.booking-detail{
    margin-top: 0;
}

.booking-detailed-hr{
    border-top: 1px solid white;
}

.booking-info-container{
    display: flex;
    font-family: 'bahn';
    flex-direction: column;
    margin-inline: auto;
    max-width: 50em;
    padding-inline: 0.2rem;
    background: white;
    border-radius: 0.5rem;
    color: #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    
}

.booking-date-time-c{
    display: flex;
    flex-direction: column;
    /* align-items: c; */
}

.id-sale-date-time{
    display: flex;
    justify-content: space-between;
    font-weight: 900;
}

#sale-date-time{
    text-align: center;
    justify-self: center;
    margin-block: auto;
}

#booking-id{
    text-align: center;
}

.booking-date-time{
    display: grid;
    font-family: 'bahn';
    font-weight: 500;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 2em;
    margin-inline: auto;
    grid-template-areas:
    ". ."
    ". .";
}

.booking-items-grid{
    display: grid;
    grid-template-columns: 0.1fr 5fr 1.4fr;
    gap: 1em 0px;
}

/* .booking-date{
    display: flex;
    justify-content: space-around;
}

.booking-time{
    display: flex;
    justify-content: space-around;
} */

#receipt-p{
    margin: 0.2em;
}

#receipt-products{
    margin-block: auto;
    
}

#receipt-products-price{
    margin-block: auto;
    margin-right: 0.6em;
    text-align: right;
    margin-left: 0;
    
}

#receipt-products-title{
    -webkit-margin-end: auto!important;
            margin-inline-end: auto!important;
    -webkit-margin-after: 1.4em;
            margin-block-end: 1.4em;
    -webkit-margin-before: 0.6em;
            margin-block-start: 0.6em;
    font-weight: 800;
}

#receipt-products-title-price{
    -webkit-margin-after: 1.4em;
            margin-block-end: 1.4em;
    -webkit-margin-before: 0.6em;
            margin-block-start: 0.6em;
    font-weight: 800;
    margin-right: 0.6em;
    margin-left: 0;
    text-align: right;
}

p[id="receipt-products-title q"]{
    -webkit-margin-start: 0.5em;
            margin-inline-start: 0.5em;
    -webkit-margin-end: auto!important;
            margin-inline-end: auto!important;
    -webkit-margin-after: 1.4em;
            margin-block-end: 1.4em;
    -webkit-margin-before: 0.6em;
            margin-block-start: 0.6em;
    font-weight: 800;
}

#booking-mins{
    margin-inline: auto;
}

.email-contact-pref{
    max-width: 50rem;
    margin-inline: auto;
    background: white;
    margin-inline: auto;
    width: 95vw;
    padding-bottom: 8px;
    border-radius: 0.5rem;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}

.email-contact-pref .contact-pref-title{
    font-family: 'logo-font-main';
    font-size: max(2.5rem, 4vw)!important;
    margin-inline: 8px;
    display: block;
    text-align: center;
    color: black;
}

.email-contact-pref-selectors-container{
    margin-inline: 16px;
}

.email-contact-pref-list{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 10px
    /* border: 1px solid #aaa; */
}

.email-contact-pref-list-item{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.email-contact-pref-list-item span{
    color: black;
    font-family: 'bahn';
    font-weight: 100;
}

.email-contact-pref-list-item label{
    display: flex;
    justify-content: left;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.email-contact-pref-checkbox{
    margin-right: 10px;
}

.email-contact-pref-checkbox[type="checkbox"] {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
    outline: none;
    transition: all 0.15s ease;
}

.email-contact-pref-checkbox[type="checkbox"]::before {
    content: '\2713';
    color: white;
    text-align: center;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 20px;
    transform: translate(-50%, -50%) scale(0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    transition: all 0.15s ease;
}

.email-contact-pref-checkbox[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
    background-color: #ed13d9;
}

.apply-email-pref{
    height: 50px;
}

.apply-consent-spinner{
    position: absolute;
    display: none;
    transition: all 0.2s ease;
    top: 0;
    opacity: 0;
    left: calc(50% - 25px);
    width: auto;
    pointer-events: none;
}


/* Booking Screen */

.booking-terms-check-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-inline: 16px;
    margin-top: 16px;
    transition: all 0.15s ease;
}

.terms-required-text{
    color: #FF0000;
    font-size: 0.8rem;
    margin-left: 0.1rem;
    opacity: 0;
    transition: all 0.15s ease;
}


.booking-terms-check-container input[type="checkbox"] {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
    outline: none;
    transition: all 0.15s ease;
}

.booking-terms-check-container input[type="checkbox"]::before {
    content: '\2713';
    color: white;
    text-align: center;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    transition: all 0.15s ease;
}

.booking-terms-check-container input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
    background-color: #ed13d9;
}


.booking-terms-modal{
    position: fixed;
    top: 70px;
    left: 50%;
    z-index: 9999;
    padding: 1em;
    width: min(90vw, 40rem);
    max-height: 80vh;
    border: 0;
    font-size: 0.7rem;
    box-shadow: 0 0 1em rgb(0 0 0 / 0.3);
    border-radius: 10px;
    scrollbar-color: #000;
    pointer-events: none;
    background: #000;
    color: #fff;
    opacity: 0;
    transition: all 0.2s ease;
    transform: scale(0) translateX(-50%);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.booking-terms-modal p{
    margin: 0;
}

.booking-terms-modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    transition: all 0.2s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.booking-terms-modal.open{
    opacity: 1;
    transform: scale(1) translateX(-50%);
    pointer-events: all;
}

.booking-terms-modal-overlay.open{
    pointer-events: all;
    opacity: 1;
}


/* .booking-terms-modal::-webkit-backdrop{
    background: linear-gradient(315deg, #ed1372, #2bceed);
    opacity: 0.2;
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
}

.booking-terms-modal::backdrop{
    background: linear-gradient(315deg, #ed1372, #2bceed);
    opacity: 0.2;
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
} */

.next-page-button-container{
    display: flex;
    margin-inline: auto;
    max-width: 50em;
    justify-content: center;
    margin-top: 2em;
}

.pages-container{
    width: 100%;
    overflow: hidden;
}

/* .pages{
    display: flex;
    width: 300%;
    box-sizing: border-box;
} */

.page{
    display: none;
    width: 100vw;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* flex-direction: column; */
    gap: 10px;
    transition: all 0.6s ease-in-out;
    -webkit-animation: moving 0.5s ease;
            animation: moving 0.5s ease;
}

.page.active{
    display: block;
}

.page.three{
    position: relative;
}


.switch-field {
	display: grid;
    flex-direction: column;
	margin-bottom: 36px;
	overflow: hidden;
    margin-inline: auto;
    max-width: 50em;
    font-weight: 700;
    font-family: 'bahn';
}

.for-radio{
    width: 100%;
    height: 100%;
}

.for-radio:nth-child(1):after{
    content: '1';
    font-family: 'logo-font-main-2';
    position: absolute;
    top: 3px;
    left: 8px;
}

.for-radio:nth-child(2):after{
    content: '2';
    font-family: 'logo-font-main-2';
    position: absolute;
    top: 3px;
    left: 8px;
}

.for-radio:nth-child(3):after{
    content: '3';
    font-family: 'logo-font-main-2';
    position: absolute;
    top: 3px;
    left: 8px;
}

.for-radio:nth-child(4):after{
    content: '4';
    font-family: 'logo-font-main-2';
    position: absolute;
    top: 3px;
    left: 8px;
}


.bed-img-container{
    width: 100%;
    height: 100%;
}


.for-radio:nth-child(1){grid-area: column-1; position: relative;}
.for-radio:nth-child(2){grid-area: column-2; position: relative;}
.for-radio:nth-child(3){grid-area: column-3; position: relative;}
.for-radio:nth-child(4){grid-area: column-4; position: relative;}


.beds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px 5px;
    grid-template-areas:
      "column-1 column-2"
      "column-3 column-4";
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    padding: 1em;
}

.for-radio:nth-child(1) .booking-bed-img{
    padding: 0.2rem;
}
.for-radio:nth-child(2) .booking-bed-img{
    padding: 0.8rem;
}
.for-radio:nth-child(3) .booking-bed-img{
    padding: 0.9rem;
}
.for-radio:nth-child(4) .booking-bed-img{
    padding: 0.2rem;
    min-height: 100%;
}




.booking-bed-img{
    display: block;
    /* max-height: 100%; */
    width: 100%;
    margin-inline: auto;
    padding: 1em;
    background-color: #e4e4e4;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}


.booking-bed-img.bed-5{
    /* opacity: 0.63; */
    -webkit-filter: blur(1px);
            filter: blur(1px);
    /* filter: grayscale(50%) */
    /* box-shadow: none; */
}


[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


[type=radio] + div img{
    cursor: pointer;
    min-height: 100%;
}

[type=radio]:checked + div img {
    border-radius: 5px;
    /* background: radial-gradient(49% 81% at 45% 47%, #FFE20345 0%, #073AFF00 100%),radial-gradient(115% 91% at 17% 50%, #ED1372 0%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #FFDB00FF 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #ED1372 1%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #ED1372 0%, #FF0000FF 100%); */
    background: rgba(237,19,114,1);
    background: linear-gradient(45deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 300% 300%;
    -webkit-animation: backgroundGradientAnim 5s ease infinite ;
            animation: backgroundGradientAnim 5s ease infinite ;
    
    box-shadow: none;
}


.bed-minutes-container{
    max-width: 50em;
    display: flex;
    flex-direction: column;
    justify-items: center;
}

#bed-minutes{
    margin-inline: auto;
    font-family: 'bahn';
    cursor: pointer;
    width: 15em;
    font-size: 1.1em;
    height: 2em;
    margin-bottom: 1em;
    border-radius: 0.5rem;
}

#date{
    margin-inline: auto;
    font-family: 'bahn';
    width: 15em;
    font-size: 1.1em;
    height: 2em;
    margin-bottom: 1em;
    border: none;
    border-radius: 0.5rem;
}

#time{
    margin-inline: auto;
    font-family: 'bahn';
    width: 15em;
    font-size: 1.1em;
    height: 2em;
    margin-bottom: 1em;
    border: none;
    border-radius: 0.5rem;
}

.booking-hr{
    color: white;
    margin-inline: 0.5rem;
}

.booking-hr-dark{
    color: black;
    margin-inline: 0.5rem;
}

.select-bed-title{
    font-family: 'bahn';
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-inline: auto;
    color: white;
}


.bed-minutes-title{
    font-family: 'bahn';
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-inline: auto;
    color: white;
}

.bed-minutes-title + select {
    text-align: center;
    margin-inline: auto;
}

.bed-date-title + input {
    text-align: center;
    margin-inline: auto;
}

.bed-time-title + input {
    text-align: center;
    margin-inline: auto;
}

.bed-date-title{
    font-family: 'bahn';
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-inline: auto;
    color: white;
}

.bed-time-title{
    font-family: 'bahn';
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 0.5em;
    margin-inline: auto;
    color: white;
}

.bed-date-container{
    max-width: 50em;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin-inline: auto;
}

.bed-date-container input{
    cursor: pointer;
}

.datepicker-container{
    text-align: center;
}

.bed-time-container{
    max-width: 50em;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin-inline: auto;
}

.bed-time-container input{
    cursor: pointer;
}

#ui-datepicker-div{width: 300px; left: 0!important;}

.ui-timepicker-list{
    text-align: center;
}

.ui-timepicker-wrapper .ui-timepicker-list li{
    padding-right: 5px!important;
}

.ui-timepicker-wrapper{
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-top-right-radius: 0rem;
    border-top-left-radius: 0rem;
}

.ui-timepicker-wrapper.ui-timepicker-positioned-top{
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

.move-page{
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    border: none;
    background: rgba(237,19,114,1);
    background: linear-gradient(45deg, rgba(237,19,114,1) 0%, rgba(237,19,217,1) 50%, rgba(158,19,237,1) 100%);
    background-size: 400% 400%;
    -webkit-animation: backgroundGradientAnim 10s ease infinite ;
            animation: backgroundGradientAnim 10s ease infinite ;
    border-radius: 6px;
    text-align: center;
    margin-top: 5px;
    margin-inline: auto;
    color: white;
    box-shadow: -2px 2px 6px #00000048;
    transition: 400ms ease;
}

.move-page:active{
    box-shadow: -1px 1px 2px #00000048;
}

.page-2-move-container{
    display: flex;
    justify-content: space-around;
}

.page-2-move-container button{
    width: 120px;
}

.page-3-move-container{
    display: flex;
    justify-content: space-around;
}

.page-3-move-container button{
    width: 120px;
}

.move-page.checkout-page{
    background: rgb(15,168,37);
    background: linear-gradient(90deg, rgba(15,168,37,1) 0%, rgba(57,150,44,1) 50%, rgba(28,138,66,1) 100%);
    background-size: 400% 400%;
    -webkit-animation: backgroundGradientAnim 10s ease infinite ;
            animation: backgroundGradientAnim 10s ease infinite ;
}

.booking-container{
    display: grid;
    flex-direction: column;
	margin-bottom: 36px;
    margin-inline: auto;
    padding-inline: 1em;
    height: auto;
    width: 100vw;
    max-width: 50em;
    font-weight: 700;
    font-family: 'bahn';
    text-align: center;
    color: white;
}


.booking-container-confirm{
    display: grid;
    flex-direction: column;
	margin-bottom: 36px;
    margin-inline: auto;
    height: auto;
    width: 100vw;
    max-width: 50em;
    font-weight: 700;
    font-family: 'bahn';
    text-align: center;
    color: white;
}

.booking-container-main{
    max-width: 50em;
    font-weight: 700;
    font-family: 'bahn';
    text-align: center;
    color: white;
    margin-inline: auto;
}

.booking-container-details{
    background: white;
    border-radius: 0.5rem;
    color: black;
    margin-inline: 0.3rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.booking-container-details h3{
    padding-top: 12px;
}

.booking-date-time-details{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.9em;
    color: black;
}

.booking-date-time-details span{
    font-weight: 100;
}

.booking-date-time-details p{
    margin: 6px;
}

.booking-bed-details-grid{
    display: grid;
    columns: 1fr;
}

.booking-bed-details{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.9em;
    color: black;
}

.booking-products-container{
    display: flex;
    flex-direction: column;
    margin-inline: 8px;
    color: black;
}

.booking-products-container .product-name{
    margin-block: auto;
    line-height: 1rem;
}

.booking-products-container .product-price{
    margin-block: auto;
    margin-inline: auto;
}

.booking-details-total{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: black;
}

.sort-filter-text-container{
    cursor: pointer;
}

.sort-and-filter-container{
    background: white;
    margin-bottom: 1rem;
    color: black;
    margin-inline: 16px;
    border-radius: 1rem;
    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

.sort-filter-text{
    display: inline-block;
    margin: 0.5rem;
    margin-inline: auto;
    cursor: pointer;
    user-select: none
}

.sort-filter-text::after{
    content: '▼';
    display: inline-block;
    font-size: 0.8rem;
    transform: rotate(0deg) translate(0, 0);
    transition: all 0.3s ease-in-out;
}

.sort-filter-text.open::after{
    transform: rotate(180deg) translate(0, 2px);
}

.sort-and-filter-dropdown-container{
    position: relative;
    overflow: hidden;
    width: 100%;
}

.sort-filter-arrow.open{
    transform: rotate(180deg);
}

.sort-and-filter-dropdown{
    transition: all 0.3s ease-in-out;
}

.sort-container{
    margin-top: 12px;
    margin-bottom: 10px;
}

.sort-options-container{
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

.sort-options-container label {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-inline: auto;
    margin-bottom: 10px;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
    user-select: none;
}

.sort-options-container input[type="radio"] {
    position: relative;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
    outline: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.sort-options-container input[type="radio"]:checked {
    border-color: #ed13d9;
    background-color: #ed13d9;
}

.brand-filter-container{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #aaa;
    align-items: center;
    user-select: none;
    cursor: pointer;
}

.no-selected-container{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ed13d9;
    opacity: 0;
}


.volume-filter-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    user-select: none;
    cursor: pointer;
}

.brands-selector-container{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background: #ffffff;
    transition: all 0.15s ease-in-out;
    transform: translate3d(101%,0,0);
}

.brands-filter-top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.brands-filter-top-bar p:nth-child(2){
    font-family: 'logo-font-main';
    font-size: 2rem;
    margin: 1rem;
}

.back-from-filter{
    font-family: 'logo-font-main';
    font-weight: 900;
    font-size: 1.8rem;
    margin: 1rem;
    cursor: pointer;;
}

.volume-selector-container{
    position: absolute;
    z-index: 2;
    width: 100%;
    /* height: 100%; */
    top: 0;
    left: 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background: #ffffff;
    transition: all 0.15s ease-in-out;
    transform: translate3d(101%,0,0);
}

.volume-filter-top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.volume-filter-top-bar p:nth-child(2){
    font-family: 'logo-font-main';
    font-size: 2rem;
    margin: 1rem;
}

.brands-filter-list{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding-left: 0;
    /* border: 1px solid #aaa; */
}

.brand-filter-list-item{
    outline: 1px solid #aaa;
    margin-top: 1px;
    margin-left: 1px;
}



.brand-filter-list-item label{
    display: flex;
    align-items: center;
    justify-content: left;
    margin-block: 12px;
    cursor: pointer;
}


.brands-filter-list input{
    margin-right: 10px;
    margin-left: 2rem;
}

.brands-filter-list input[type="checkbox"]{
    position: relative;
    -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
    outline: none;
    transition: all 0.15s ease;
}

.brands-filter-list input[type="checkbox"]:checked {
    border-color: #ed13d9;
    background-color: #ed13d9;
}


.volume-filter-list{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding-left: 0;
    /* border: 1px solid #aaa; */
}

.volume-filter-list-item{
    outline: 1px solid #aaa;
    margin-top: 1px;
    margin-left: 1px;
}



.volume-filter-list-item label{
    display: flex;
    align-items: center;
    justify-content: left;
    margin-block: 12px;
    user-select: none;
    cursor: pointer;
}


.volume-filter-list input{
    margin-right: 10px;
    margin-left: 2rem;
}

.volume-filter-list input[type="checkbox"]{
    position: relative;
    -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
    outline: none;
    transition: all 0.15s ease;
}

.volume-filter-list input[type="checkbox"]:checked {
    border-color: #ed13d9;
    background-color: #ed13d9;
}


.brands-clear-selection-btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-right-radius: 0.98rem;
    border-bottom-left-radius: 0.98rem;
    border: none;
    outline: none;
    transition: 0.3s ease;
    background: #ed13d9;
    height: 2.4rem;
    opacity: 0;
    pointer-events: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
}

.brands-clear-selection-btn:active{
    background: #9b3290;
}

.volume-clear-selection-btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-right-radius: 0.98rem;
    border-bottom-left-radius: 0.98rem;
    border: none;
    outline: none;
    transition: 0.3s ease;
    background: #ed13d9;
    height: 2.4rem;
    opacity: 0;
    pointer-events: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
}

.volume-clear-selection-btn:active{
    background: #9b3290;
}

.apply-filters-btn-container{
    position: absolute;
    bottom: 0;
    width: 100%;
}

.apply-filter-btn{
    width: 100%;
    border-bottom-right-radius: 0.98rem;
    border-bottom-left-radius: 0.98rem;
    border: none;
    outline: none;
    transition: 0.3s ease;
    background: #ed13d9;
    height: 2.5rem;
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
    user-select: none;
}

.apply-filter-btn:active{
    background: #9b3290;
}

.products-container-grid{
    display: grid;
    position: relative;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1rem;
    margin-inline: auto;
    color: #000;
}

.products-loader-container{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    border-radius: 1rem;
    background: #fff;
    pointer-events: none;
    transition: all 0.1s ease-out;
}

.products-loader-container.hide{
    opacity: 0;
}

.products-loader-container::after{
    content: "";
    display: block;
    position: -webkit-sticky;
    position: sticky;
    margin-top: 15px;
    top: 15px;
    width: 50px; height: 50px;
    border: 10px solid #ddd;
    border-top-color: #ed13d9;
    border-radius: 50%;
    -webkit-animation: loading 1s ease-in-out infinite;
            animation: loading 1s ease-in-out infinite;
}

.product-container{
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    justify-content: space-between;
    font-weight: 400;
    font-size: 0.8em;
    height: 18rem;
    padding: 0.5em;
    align-items: center;
    border-radius: 0.5rem;
    max-width: 20em;
}

.product-image{
    max-height: 50%;
    max-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.product-name{
    line-height: 0.8rem;
    margin-bottom: auto;
    margin-inline: auto;
}

.stock-amt-tag{
    display: inline;
    margin-top: auto;
    margin-inline: 0;
}

.product-price{
    flex-shrink: 2;
    margin-top: 0;
    margin-bottom: 0.3rem;
}


.add-product-button{
    background: var(--pink-4-color);
    border-color: var(--pink-4-color);
    font-family: 'bahn';
    font-weight: bold;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4em;
    border: 2px solid var(--pink-4-color);
    font-size: 0.71rem;
    box-shadow: -1px 2px 4px #33333388;
    text-align: center;
    line-height: 130%;
    color: white;
    transition: 0.2s ease-in-out;
    width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.out-of-stock-msg{
    font-family: 'bahn';
    font-weight: 900;
    color: var(--pink-4-color);
    font-size: 0.71rem;
    border-radius: 0.4em;
    margin: 0;
    text-align: center;
    line-height: 130%;
    padding: 0.5rem 0.1rem;
    border: 2px solid var(--pink-4-color);
    box-shadow: -1px 2px 4px #33333388;
    width: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.products-pagination {
    display: flex;

    justify-content: center;
    margin-top: 1rem;
    font-family: 'bahn';

}
  
.products-pagination button {
    background-color: #fff;
    border: none;
    border-radius: 0.6rem;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    color: black;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}
  
.products-pagination button.active {
    background-color: #ed13d9;
    color: white;
    font-weight: 900;
}

@media (hover: hover) {
    .add-product-button:hover {
        opacity: 0.8;
        border-radius: 0.3em;
        box-shadow: 0px 1px 3px #33333388;
    }
    .load-more-bookings:hover {
        opacity: 0.8;
        border-radius: 4px;
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
    }
    .select:hover {
        background: var(--logo-2-color);
    }
    .navbar-toggler:hover{
        text-decoration: none;
    }
    .hero-book-button:hover{
        transition: all 0.2s ease;
        transform: scale3d(0.98,0.98,0.98);
        -webkit-transform: scale3d(0.98,0.98,0.98);
        /* box-shadow: inset 0 0 0 50px #c21d87; */
        box-shadow: inset 0 0 0 50px #1f1f1f;
    }
    .booking-item:hover{
        opacity: 0.9;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.34);;
        border-radius: 0.7em;
        background: linear-gradient(165deg, rgba(237,19,114,0.5) 43%, rgba(190,85,0,0.5) 100%);
    
    }
    .apply-filter-btn:hover{
        background: #ee3adc;
    }
    .apply-filter-btn:active{
        background: #9b3290;
    }

    .brands-clear-selection-btn:hover{
        background: #ee3adc;
    }
    .brands-clear-selection-btn:active{
        background: #9b3290;
    }

    .volume-clear-selection-btn:hover{
        background: #ee3adc;
    }
    .volume-clear-selection-btn:active{
        background: #9b3290;
    }

    .sort-options-container input[type="radio"]:checked:hover {
        border-color: #b10ea0;
    }
    .sort-options-container input[type="radio"]:hover {
        border-color: #000;
    }
    .brands-filter-list input[type="checkbox"]:checked:hover {
        border-color: #b10ea0;
    }
    .brands-filter-list input[type="checkbox"]:hover {
        border-color: #000;
    }

    .btn-send-message:hover{
        background-color: var(--logo-3-color);
    }

    .skin-type-info-btn:hover{
        background: var(--logo-2-color);
        color: white;
    }

  }

.add-product-button:active{
    opacity: 0.7;
    border-radius: 2px;
    box-shadow: 0px 1px 3px #333333cb;
}

img.mfp-img {
    background-color: white;
    background-clip: content-box;

}

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.15s ease-out;
  }
  /* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
  }
  /* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
  }
  
  /* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all 0.15s ease-out;
  }
  /* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
  }
  /* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
  }



/* booking screen spinner */
.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #ed13d9; 
    border-radius: 50%;
    margin-inline: auto;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
  }

.loader-time {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #ed13d9;
    border-radius: 50%;
    margin-inline: auto;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
}



.receipt-container {
display: grid;
grid-template-columns: 0.1fr 0.15fr 0.1fr 1.5fr 0.4fr 0.1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
    ". . . . . .";
align-items: center;
justify-items: center;
font-size: 0.85rem;
font-weight: 300;
}

.booking-credit-details{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.9rem;
}

.quantity{
    margin-inline: auto;
}

.plus-button{
    max-width: 0.9rem;
    margin-bottom: 4px;
    margin-right: 0.1rem;
    transition: all 0.1s ease;
}
.plus-button:active{
    opacity: 0.7;
}

.minus-button{
    max-width: 0.9rem;
    margin-bottom: 4px;
    transition: all 0.1s ease;
}
.minus-button:active{
    opacity: 0.7;
}

.delete-button{
    max-width: 1rem;
    margin-bottom: 4px;
    transition: all 0.1s ease;
}
.delete-button:active{
    opacity: 0.6;
}

.booking-date-time-details-confirmation{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.9rem;
}

.booking-date-time-details-confirmation p{
    margin: 6px;
}

.booking-bed-details-confirmation-grid{
    display: grid;
    columns: 1fr;
}

.booking-bed-details-confirmation{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.9rem;
}



.booking-credit-details-confirmation{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.9rem;
}

.bed-info-price-confirmation{
    margin-right: 16px;
}

.booking-products-container-confirmation{
    display: flex;
    flex-direction: column;
    
}

.booking-details-total-confirmation{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.booking-details-total-confirmation #total-price-confirmation{
    margin-right: 16px;
}

.receipt-container-confirmation {
    display: grid;
    grid-template-columns: 0.1fr 1.5fr 0.2fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        ". . . . . .";
    align-items: center;
    justify-items: center;
    font-size: 0.9rem;
    font-weight: 300;
    height: 34px;
    margin-right: 13px;
}

.receipt-container-confirmation p{
    margin-block: auto;
    line-height: 1rem;
}

.booking-details-total-grid{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        ". .";
    align-items: center;
    justify-items: right;
    margin-left: auto;

}

#total-price{
    margin-left: 0;
    width: 56px;
}

.booking-credits-container{
    background: white;
    color: black;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    margin-inline: 0.3rem;
    margin-top: 16px;
    padding-block: 8px;
}


.credits-selection-container{
    margin-bottom: 12px;
}

.credits-buttons-container{
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
}

.credits-clear-btn{
    opacity: 0;
    transition: 0.2s ease;
    cursor: pointer;
    user-select: none;
    width: 100px;
    height: 2rem;
    color: white;
    border-radius: 0.5rem;
    background: var(--pink-4-color);
    border: var(--pink-4-color);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.credits-clear-btn:active{
    background: var(--pink-4-color, 0.8);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.credits-apply-btn{
    opacity: 0;
    transition: 0.2s ease;
    cursor: pointer;
    width: 100px;
    height: 2rem;
    color: white;
    user-select: none;
    background: rgb(15,168,37);
    border: rgb(15,168,37);
    border-radius: 0.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.credits-apply-btn:active{
    background: rgba(15,168,37,0.8);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.credits-booking-confirmation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 6px 5px;
    
    grid-auto-flow: row;
    justify-content: space-between;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
      ". ."
      ". ."
      ". ."
      ". .";
  }

.credits-booking-confirmation-grid p{
    font-size: 1rem;
    margin: 5px;
    line-height: 1rem;
}


/* TAN CHARGE */

.battery-blocker{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #000;
    transition: all 0.3s ease;
    z-index: 1000;
}

.battery-blocker.white{
    background-color: #fff;
}

.battery-container{
    display: flex;
    position: relative;
    margin-bottom: 1.2rem;
}

.battery-img{
    margin-inline: auto;
    -o-object-fit: contain;
       object-fit: contain;
    width: 30vw;
    max-width: 100px;
    opacity: 1;
    transition: all 0.8s ease-in-out;
}

#charge-bar-container {
    position: relative;
    /* border-radius: 15px; */
    background-color: black;
    margin-inline: 8px;
    margin-block: 3rem;
}

#charge-marker-0 {
    display: block;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 2px;
    border-radius: 15px;
    height: 50px;
    background: var(--logo-3-color);
}

#charge-marker-0::after{
    content: 'Untanned';
    position: absolute;
    font-family: 'bahn';
    bottom: -22px;
    left: 0px;
}

#charge-marker-20 {
    display: block;
    position: absolute;
    left: 20%;
    top: -20px;
    width: 2px;
    height: 50px;
    background: var(--logo-3-color);
}

#charge-marker-20::after{
    content: 'Pale';
    display: block;
    text-align: center;
    position: absolute;
    font-family: 'bahn';
    top: -22px;
    left: -14px;
}

#charge-marker-40 {
    display: block;
    position: absolute;
    left: 40%;
    top: 0%;
    width: 2px;
    height: 50px;
    background: var(--logo-3-color);
}

#charge-marker-40::after{
    content: 'Light';
    position: absolute;
    font-family: 'bahn';
    bottom: -22px;
    left: -16px;
}

#charge-marker-60 {
    display: block;
    position: absolute;
    left: 60%;
    top: -20px;
    width: 2px;
    height: 50px;
    background: var(--logo-3-color);
}

#charge-marker-60::after{
    content: 'Warm';
    position: absolute;
    font-family: 'bahn';
    top: -22px;
    left: -16px;
}

#charge-marker-80 {
    display: block;
    position: absolute;
    left: 80%;
    top: 0%;
    width: 2px;
    height: 50px;
    background: var(--logo-3-color);
}

#charge-marker-80::after{
    content: 'Golden';
    position: absolute;
    font-family: 'bahn';
    bottom: -22px;
    left: -22px;
}

#charge-marker-100 {
    display: block;
    position: absolute;
    left: 100%;
    top: -20px;
    width: 2px;
    height: 50px;
    background: var(--logo-3-color);
}

#charge-marker-100::after{
    content: 'Bronzed';
    position: absolute;
    font-family: 'bahn';
    top: -22px;
    left: -58px;
}

/* .charge-bar-container-2{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.battery-bar-list{
    display: flex;
}

.battery-bar-list li{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 1vw;
}

.battery-bar-list li .icons {
    font-size: 25px;
    color: #1b761b;
    margin: 0 60px;
}

.battery-bar-list li .label {
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: bold;
    color: #1b761b;
}

.battery-bar-list li .step {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #d7d7c3;
    margin: 16px 0 10px;
    display: grid;
    place-items: center;
    color: ghostwhite;
    position: relative;
    cursor: pointer;
}

.step::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 3px;
    background-color: #d7d7c3;
    right: 30px;
}

.first::after {
    width: 0;
    height: 0;
}

.battery-bar-list li .step .awesome {
    display: none;
}

.battery-bar-list li .step p {
    font-size: 0.8rem;
}

.battery-bar-list li .active {
    background-color: #1b761b;
}

li .active::after {
    background-color: #1b761b;

}

.battery-bar-list li .active p {
    display: none;
}

.battery-bar-list li .active .awesome {
    display: flex;
} */

#charge-bar {
    width: 0%;
    position: relative;
    height: 30px;
    background-color: var(--logo-3-color);
    text-align: center;
    line-height: 30px;
    font-family: 'Poppins';
    font-weight: 700;
    color: white;
    z-index: 2;
}



#charge-level-text-container{
    padding-inline: 0.6rem;
    margin-bottom: 1.8rem;
}

#charge-level-title{
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

#charge-level-description{
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Poppins';
    font-weight: 500;
}

.battery-book-now-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'bahn';
    font-weight: 900;
    color: white;
    background: var(--logo-3-color);
    border-radius: 1rem;
    width: 130px;
    transition: 0.3s ease;
    border: none;
    height: 50px;
    margin-inline: auto;
    opacity: 0;
    box-shadow: 0px 2px 3px #22222277;
}

.battery-book-now-btn:active{
    background: var(--logo-3-color);
    box-shadow: 1px 1px 2px #22222277;
}

.tanning-battery-disclamer-container{
    position: relative;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    display: block;
    color: #fff;
}

.tanning-battery-disclamer-container p{
    color: #000;
    text-align: center;
}


.tanning-battery-disclamer-container a{
    position: relative;
    top: -50px;
    color: #000!important;
    text-decoration: underline;
    font-size: 0.7rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-tb-disclamer{
    position: fixed;
    top: 70px;
    left: 50%;
    z-index: 9999;
    padding: 1em;
    width: min(90vw, 40rem);
    max-height: 80vh;
    border: 0;
    font-size: 0.7rem;
    box-shadow: 0 0 1em rgb(0 0 0 / 0.3);
    border-radius: 10px;
    scrollbar-color: #000;
    pointer-events: none;
    background: #000;
    color: #fff;
    opacity: 0;
    transition: all 0.2s ease;
    transform: scaleY(0) translateX(-50%);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.modal-tb-disclamer-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    transition: all 0.2s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.modal-tb-disclamer.open{
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
    pointer-events: all;
}

.modal-tb-disclamer-overlay.open{
    pointer-events: all;
    opacity: 1;
}

.close-tb-disclamer-x{
    display: block;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    font-size: 2rem;
    font-weight: 600;
    height: 50%;
    background-color: #000;
    border-color: #000;
    color: #fff;
    border-style: hidden;
    transition: all 0.1s ease-in;
}

.close-tb-disclamer-x:active{
    border: 0px solid;
    font-size: 2rem;
    background-color: #000;
    transform: scale(0.97);
    /* border-color: white;
    border-style: hidden; */
}

.close-tb-disclamer-x:focus-visible{
    border: 0px;
    outline: none;
}

.close-tb-disclamer-modal-btn{
    display: block;
    background: var(--pink-4-color);
    border-color: var(--pink-4-color);
    font-weight: 300;
    border-radius: 0.4em;
    font-size: 1.4vmax;
    box-shadow: -3px 3px 4px #222222;
    margin-inline: auto;
    text-align: center;
    line-height: 1em;
    padding-inline: 1em;
    padding-block: 0.5em;
    transition: 0.5s ease;
    color: white;
    border-style: none;
    }

.close-tb-disclamer-modal-btn:hover{
    border-color: var(--logo-2-color);
    border-radius: 0.5em;
    background: var(--logo-2-color);
    box-shadow: -2px 2px 3px #222222;
    /* transform: translateY(2px); */
}

.close-tb-disclamer-modal-btn:active{
    background: #8d1372;
    border-color: #8d1372;
    border-radius: 0.6em;
    box-shadow: -1px 1px 2px #222222;
}

.modal-tb-disclamer h2{
    font-size: 2.7rem;
}

.modal-term-container-accept-title{
    font-family: 'logo-font-main';
    font-size: 2rem;
    margin: 0.2rem;
    color: #000;
}

.modal-term-container-accept p{
    font-size: 0.8rem!important;
    margin-inline: 0rem;
}

/* WHEEL SPIN */

.main-body-spin{

    position: static;
    margin: 0;
    padding: 0;
    background-color: #000;
    /* height: 100vh; */
    min-height: 100vw;
    width: 100vw;
    overflow-x: clip;
}

.the_wheel
{
    z-index: 4;
    overflow-x: hidden;
    overflow: hidden;
    /* padding-inline: 10px; */
}

.main-container-wheel{
    min-height: max(100vw, 100vh, 720px);
    /* max-height: 95vh; */
    overflow: hidden;
    color: #fff;
    background: #5d5d5d;
}

.main-container-wheel h1{
    font-family: 'logo-font-main';
    font-size: 52px;
    -webkit-margin-after: 0;
            margin-block-end: 0;
}

.wheel-img{
    z-index: 500;
    width: 750px;
    -o-object-fit: contain;
       object-fit: contain;
    position: relative;
    top: 846px;
    margin-top: -980px;
    opacity: 1;
    /* -webkit-filter: drop-shadow(0px 5px 5px #000);
    filter: drop-shadow(0px, 0px, 5px, #000); */
}

.wheel-background-container{
    z-index: 101;
    position: relative;
    display: block;
    pointer-events: none;
    display: flex;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.wheel-background-container.menu-open{
    transform: translate(-50%, -38.8%);
}

.wheel-background-glow{
    z-index: 99;
    position: absolute;
    width: 322px;
    height: 322px;
    border-radius: 50%;
    background: #1f50ff00;
    top: 90px;
    transition: all 0s ease;
    opacity: 0;
    /* box-shadow: 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; */

    box-shadow: 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff, 0 0 150px #fff;
}

.wheel-inset-shadow{

    position: absolute;
    width: 316px;
    height: 316px;
    border-radius: 50%;
    background: #1f50ff00;
    top: 92px;
    z-index: 111;
    opacity: 1;
    box-shadow: inset 0px 0px 22px 22px #000
}

.circle-container {
    position: relative;
    display: block;
    pointer-events: none;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 100%;
    /* height: 100%; */
    /* overflow: hidden; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform-style: preserve-3d;
}

.good-luck-image-container{
    z-index: 1001;
    position: relative;
    display: block;
    pointer-events: none;
    display: flex;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.good-luck-image{
    position: absolute;
    top: -70px;
    width: min(70vw, 400px);
    height: auto;
    opacity: 0;
    transition: all 0.3s ease-in;
    transform: scale3d(0,0,0);
    -o-object-fit: contain;
       object-fit: contain;
}



.good-luck-image.show{
    opacity: 1;
    transform: scale3d(0.8,0.8,0.8);
}

.no-spins-image-container{
    z-index: 1001;
    position: relative;
    display: block;
    pointer-events: none;
    display: flex;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.no-spins-image{
    position: absolute;
    top: -70px;
    width: min(70vw, 400px);
    height: auto;
    opacity: 0;
    transition: all 0.3s ease-in;
    transform: scale3d(0,0,0);
    -o-object-fit: contain;
       object-fit: contain;
}



.no-spins-image.show{
    opacity: 1;
    transform: scale3d(0.8,0.8,0.8);
}

/* .good-luck-image.show.hide{
    opacity: 0;
    
} */

.spin_button{
    z-index: 1000;
    position: relative;
    cursor: pointer;
    -o-object-fit: contain;
       object-fit: contain;
    top: 280px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    box-shadow: 0px 0px 8px #000000aa;
    transition: 0.5s ease;
    transform: scale3d(1,1,1);
}


.spin_button.spin{
    -webkit-animation: spinSpinButton 0.5s ease-in-out 0.5s 1;
            animation: spinSpinButton 0.5s ease-in-out 0.5s 1;
    transform: scale3d(0.96,0.96,1);
    box-shadow: 0px 0px 3px #000000;
}

.spin_button.press{
    transform: scale3d(0.96,0.96,1);
    box-shadow: 0px 0px 3px #000000;
}




.winwheel{

    margin-bottom: 120px;
}
canvas {
    z-index: 100;
    position: relative;
    display: block;
    margin: 0 auto;
    top: 77px;
}

.prizes-info-container{
    margin-block: 10px;
    display: flex;
    width: 100vw;
    position: relative;
    overflow: hidden;
    padding-inline: 1em;
    justify-content: space-around;
}

.prizes-info-container p{

    font-family: 'bahn';
    font-weight: bolder;
    text-align: center;
    line-height: 1em;
    margin-top: 0.2em;
    padding-bottom: 0.1em;
}

.bottle-color-code{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: #000 2px solid;
    background: linear-gradient(to top, #ffe683 0%, #f7d870 33%, #e7bb4d 66%, #b78728 100%);

}


.sachet-color-code{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: #000 2px solid;
    background: linear-gradient(to top, #eb88e2 0%, #ee65e2 33%, #ed35dc 66%, #ed13d9 100%);
}

.sunshot-color-code{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: #000 2px solid;
    background: linear-gradient(to top, #8e8e8e 0%, #636363 33%, #343434 66%, #000000 100%);
}


.none-color-code{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: #000 2px solid;
    background: linear-gradient(to top, #c2c2c2 0%, #acacac 33%, #9f9f9f 66%, #505050 100%);
}


.light:nth-child(1) {

  transform: rotate(0deg) translate(152px) rotate(0deg);
}

.light:nth-child(2) {
  transform: rotate(30deg) translate(152px) rotate(-30deg);
}

.light:nth-child(3) {
  transform: rotate(60deg) translate(152px) rotate(-60deg);
}

.light:nth-child(4) {
  transform: rotate(90deg) translate(152px) rotate(-90deg);
}

.light:nth-child(5) {
  transform: rotate(120deg) translate(152px) rotate(-120deg);
}

.light:nth-child(6) {
  transform: rotate(150deg) translate(152px) rotate(-150deg);
}

.light:nth-child(7) {
  transform: rotate(180deg) translate(152px) rotate(-180deg);
}

.light:nth-child(8) {
  transform: rotate(210deg) translate(152px) rotate(-210deg);
}

.light:nth-child(9) {
  transform: rotate(240deg) translate(152px) rotate(-240deg);
}

.light:nth-child(10) {
  transform: rotate(270deg) translate(152px) rotate(-270deg);
}

.light:nth-child(11) {
  transform: rotate(300deg) translate(152px) rotate(-300deg);
}

.light:nth-child(12) {
  transform: rotate(330deg) translate(152px) rotate(-330deg);
}


.light {

    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* background-color: rgb(255, 200, 0); */
    box-shadow: 0px 0px 0px pink;
    position: absolute;
    /* transition: all 0.3s ease; */
    top: 245px;
    /* left: 95px; */
    /* opacity: 0.5; */

}

.light.glow{
    -webkit-animation: lightGlow 0.5s ease 1.1s infinite alternate;
            animation: lightGlow 0.5s ease 1.1s infinite alternate;

}

.circle-container.spin .light.spin{
    -webkit-animation: lightGlow 0.2s ease 0s infinite alternate;
            animation: lightGlow 0.2s ease 0s infinite alternate;
}

.light.solid{
    box-shadow: 0px 0px 3px #FF69B4,
                3px 0px 5px #FF69B4,
                0px 3px 5px #FF69B4,
                -3px 0px 5px #FF69B4,
                0px -3px 5px #FF69B4,
                inset 0px 0px 3px #ed1372;

}



.wheel-city-container{
    z-index: 0;
    position: relative;
    display: block;
    pointer-events: none;
    display: flex;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}

.wheel-city-black{
    z-index: 0;
    width: 100vw;
    position: absolute;
    top: 0;
    margin-inline: auto;

    /* margin-top: -880px; */
}

.prize-notification-container{
    z-index: 9000;
    box-shadow: 0px -1px 8px #000000cc;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    background: #00000077;
    border-top: 2px #ffffff55 solid;
    width: 100%;
    height: 100px;
    transition: all 0.5s ease;
    transform: translate3d(0,120px,0);
}

.prize-notification-container.show{
    transform: translate3d(0,0,0);
}

.prize-text-container{
    display: flex;
    width: 80%;
    height: 60%;
    border-radius: 5px;
    align-items: center;
    justify-content: space-between;
    background: #00000099;
    border: 2px #e7bb4dee solid;
    box-shadow: inset 0px 0px 12px 2px #000000cc;
    padding-inline: 0.5em;
}

.emoji-left{
    flex-shrink: 2;
}

.emoji-right{
    flex-shrink: 2;
}

.prize-text{
    text-align: center;
    flex-grow: 2;
}

.prize-text p{
    color: white;
    font-family: 'bahn';
    font-weight: 900;
}

.stars-container{
    z-index: 9998;
    position: relative;
    display: block;
    pointer-events: none;
    display: flex;
    opacity: 0;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.stars-container span{
    position: absolute;
    top: 38px;
    align-items: center;
    transition: all 1.5s ease-out;
}

.stars-container span.size1{
    font-size: 0.8em;
    color: white;
    color: white;
    text-shadow: 0 0 0.8px #ffffff66, 0 0 2.4px #ffffffaa, 0 0 4px #ffffff;
}

.stars-container span.size2{
    font-size: 1.6em;
    color: white;
    text-shadow: 0 0 1.6px #ffffff66, 0 0 5.8px #ffffffaa, 0 0 8px #ffffff;
}

.stars-container span.size3{
    font-size: 2.2em;
    color: white;
    text-shadow: 0 0 2.2px #ffffff66, 0 0 6.6px #ffffffaa, 0 0 11px #ffffff;
}

.stars-container span.size4{
    font-size: 3em;
    color: white;
    text-shadow: 0 0 3px #ffffff66, 0 0 9px #ffffffaa, 0 0 15px #ffffff;
}

.stars-container span.size1.small{
    font-size: 0.4em;
    opacity: 0;
    color: white;
    color: white;
    text-shadow: 0 0 0.8px #ffffff66, 0 0 2.4px #ffffffaa, 0 0 4px #ffffff;
}

.stars-container span.size2.small{
    font-size: 0.6em;
    opacity: 0;
    color: white;
    text-shadow: 0 0 1.6px #ffffff66, 0 0 5.8px #ffffffaa, 0 0 8px #ffffff;
}

.stars-container span.size3.small{
    font-size: 0.8em;
    opacity: 0;
    color: white;
    text-shadow: 0 0 2.2px #ffffff66, 0 0 6.6px #ffffffaa, 0 0 11px #ffffff;
}

.stars-container span.size4.small{
    font-size: 1.2em;
    opacity: 0;
    color: white;
    text-shadow: 0 0 3px #ffffff66, 0 0 9px #ffffffaa, 0 0 15px #ffffff;

}

.terms-conditions-container{
    position: relative;
    z-index: 1000;
    width: 100vw;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    display: block;
    color: #fff;
}

.terms-conditions-container p{
    position: absolute;
    bottom: 0px;
    left: 50%; 
    transform: translate(-50%, -50%);
}


.terms-conditions-container a{
    color: #fff;
    text-decoration: underline;
    font-size: 0.7rem;
}

.modal-ts-cs{
    position: fixed;
    top: 70px;
    left: 50%;
    z-index: 9999;
    padding: 1em;
    width: min(90vw, 40rem);
    max-height: 80vh;
    border: 0;
    font-size: 0.7rem;
    box-shadow: 0 0 1em rgb(0 0 0 / 0.3);
    border-radius: 10px;
    scrollbar-color: #000;
    pointer-events: none;
    background: #000;
    color: #fff;
    opacity: 0;
    transition: all 0.2s ease;
    transform: scaleY(0) translateX(-50%);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.modal-ts-cs-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    transition: all 0.2s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.modal-ts-cs.open{
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
    pointer-events: all;
}

.modal-ts-cs-overlay.open{
    pointer-events: all;
    opacity: 1;
}

.close-ts-cs-x{
    display: block;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
    font-size: 2rem;
    font-weight: 600;
    height: 50%;
    background-color: #000;
    border-color: #000;
    color: #fff;
    border-style: hidden;
    transition: all 0.1s ease-in;
}

.close-ts-cs-x:active{
    border: 0px solid;
    font-size: 2rem;
    background-color: #000;
    transform: scale(0.97);
    /* border-color: white;
    border-style: hidden; */
}

.close-ts-cs-x:focus-visible{
    border: 0px;
    outline: none;
}

.close-ts-cs-modal-btn{
    display: block;
    background: var(--pink-4-color);
    border-color: var(--pink-4-color);
    font-weight: 300;
    border-radius: 0.4em;
    font-size: 1.4vmax;
    box-shadow: -3px 3px 4px #222222;
    margin-inline: auto;
    text-align: center;
    line-height: 1em;
    padding-inline: 1em;
    padding-block: 0.5em;
    transition: 0.5s ease;
    color: white;
    border-style: none;
    }

.close-ts-cs-modal-btn:hover{
    border-color: var(--logo-2-color);
    border-radius: 0.5em;
    background: var(--logo-2-color);
    box-shadow: -2px 2px 3px #222222;
    /* transform: translateY(2px); */
}

.close-ts-cs-modal-btn:active{
    background: #8d1372;
    border-color: #8d1372;
    border-radius: 0.6em;
    box-shadow: -1px 1px 2px #222222;
}

.modal-ts-cs h2{
    font-size: 2.7rem;
}

/* .modal-ts-cs[open]{
    opacity: 1;
    transform: scale(1);
    pointer-events: inherit;
}

.modal-ts-cs[open]{
    opacity: 1;
    transform: scale(1);
    pointer-events: inherit;
}

.modal-ts-cs::-webkit-backdrop{
    background: linear-gradient(315deg, #ed1372, #2bceed);
    opacity: 0.2;
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
}

.modal-ts-cs::backdrop{
    background: linear-gradient(315deg, #ed1372, #2bceed);
    opacity: 0.2;
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
} */

.modal-term-container{
    text-align: left;
    margin-bottom: 0.5em;
}

/* CONTACT US PAGE */

.contact-us-title{
    display: block;
    margin-inline: auto;
    text-align: center;
    font-weight: 700;
    font-size: 4em;
    color: #fff;
    
    font-family: 'logo-font-main';
}

.contact-us-grid-container{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    row-gap: 2em;
    margin-inline: 1.5em;
}

.contact-form-container{
    border: 1px #000 solid;
    height: 100%;
    color: white;

}
.contact-form-container h3{
    text-align: center;
    font-size: 2.2rem;
    margin-block: 0.8em;
    font-family: 'logo-font-main';
}

.contact-form-container form{
    margin-bottom: 1em;
}

.get-in-touch-form{
    padding-inline: 1em;
    display: flex;
    flex-direction: column;
}


.get-in-touch-form .text-field.cc-contact-field.w-input{
    margin-bottom: 2em;
    font-family: 'bahn';
    border: 1px #00000066 solid;
    padding-left: 1.2rem;
    height: 2.2em;
    border-radius: 0.2em;
}

.get-in-touch-form .text-field.cc-contact-field.w-input::-webkit-input-placeholder{
    color: #aaaaaa;
    font-family: 'bahn';
}

.get-in-touch-form .text-field.cc-contact-field.w-input::-moz-placeholder{
    color: #aaaaaa;
    font-family: 'bahn';
}

.get-in-touch-form .text-field.cc-contact-field.w-input:-ms-input-placeholder{
    color: #aaaaaa;
    font-family: 'bahn';
}

.get-in-touch-form .text-field.cc-contact-field.w-input::-ms-input-placeholder{
    color: #aaaaaa;
    font-family: 'bahn';
}

.get-in-touch-form .text-field.cc-contact-field.w-input::placeholder{
    color: #aaaaaa;
    font-family: 'bahn';
}

.get-in-touch-form textarea.text-field.cc-textarea.cc-contact-field.w-input {
    resize: none;
    height: 10em;
    border-radius: 0.2em;
    margin-bottom: 2em;
    border: 1px #00000066 solid;
    padding-left: 1.2rem;
}

.get-in-touch-form label{
    font-family: 'logo-font-main';
    font-size: 1.4rem;
    margin-bottom: 0.3em;
    margin-left: 1.2rem;
}

.btn-send-message{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'bahn';
    font-weight: 900;
    color: white;
    background: var(--pink-4-color);
    border-radius: 1rem;
    width: 130px;
    transition: 0.3s ease;
    border: none;
    height: 50px;
    margin-inline: auto;
    box-shadow: 3px 3px 5px #22222277;
}

.btn-send-message:active{
    background: var(--logo-3-color);
    box-shadow: 1px 1px 3px #22222277;

}

.contact-info-container{
    font-family: 'bahn';
    border: 1px #000 solid;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: white;
}

.contact-info-container hr{
    margin-inline: 30%;
}

.contact-address-container{
    text-align: center;
}

.contact-hours-container{
    text-align: center;
}

.contact-email-phone-container{
    text-align: center;
}

.contact-email-phone-container a{
    color: white;
    text-decoration: underline;
}

.location-map-container{
    margin-top: 3rem;
    margin-inline: auto;
    display: flex;
    justify-content: center;
}

.location-map{
    width: 100%;
    max-width: 60rem;
}

/* PRODUCTS PAGE */

.lotions-title{
    display: block;
    margin-inline: auto;
    text-align: center;
    font-weight: 700;
    font-size: 4em;
    color: #000;
    font-family: 'logo-font-main';
}

.lotions-container-grid {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr;
    gap: 12px 10px;
    grid-template-areas:
      "."
      "."
      "."
      "."
      "."
      ".";
    justify-content: space-between;
    align-content: center;
    justify-items: center;
    align-items: center;
}

.product-page-image{
    -o-object-fit: contain;
       object-fit: contain;
    width: 90%;
    margin-top: 16px;
    margin-inline: 1em;
}

.product-description-container h3{
    font-size: 3rem;
    font-family: 'logo-font-main';
}

.product-description-container h3 span{
    font-size: 2.5rem;
    font-family: 'logo-font-main-2';
}

.product-description-container p{
    margin-bottom: 20px;
}

.warning-image{
    position: absolute; bottom: 4.5rem; left: 4px; width: 20vw;
}

.bottom-location-container{
    z-index: 99999;
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 0px;
    width: 100%;
    background: #ffffff00;
    opacity: 0;
    transition: transform 0.3s ease-in-out;
    user-select: none;

}

.bottom-location-container.open{
    transform: translate3d(0,0,0);
}

.bottom-location-btn-container{
    background: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    width: fit-content;
    height: fit-content;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.bottom-location-btn-container p{
    margin-inline: 1rem;
    margin-block: 0.5rem;
    text-decoration: underline;
    user-select: none;
}

.bottom-change-location-container{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: fit-content;
    font-family: 'Poppins', sans-serif;
    border-top-right-radius: 12px;
}

.bottom-change-location-container h3{
    text-align: center;
}

.bottom-change-location-container p{
    text-align: center;
}

.bottom-change-location-btns{
    display: flex;
    justify-content: space-between;
}

.bottom-change-location-btns button{
    background: #ed13d9;
    border: none;
    border-radius: 0.4rem;
    padding: 0.4rem;
    color: #fff;
}

.swal2-actions{
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-around !important;
}



@media only screen and (max-width: 305px) {
.products-container-grid{ grid-template-columns: repeat(2, 1fr); }
.tab-box .tab-btn{font-size: 0.875rem;}
}

@media only screen and (min-width: 40rem) {
.products-container-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (min-width: 60rem) {
.products-container-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (min-width: 80rem) {
.products-container-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* for larger screens and Tablets only */
@media only screen and (min-width: 767px) and (min-height: 767px){
    .warning-image{
        position: absolute; bottom: 4rem; left: 4px; max-width: 120px;
    }
    .navbar-brand-img-dark{
        width: 100%;
        margin: 0px;
    }
    .navbar-brand-img-light{
        width: 100%;
        margin: 0px;
    }
    .sign-up-form-container{
        width: 100%;
    }

    .sign-in-form-container{
        width: 40%;
    }

    .alert{
        width: 50%;
    }
    .modal-skin-types{
        max-width: 55vw;
    }

    .modal-type-title{
        font-size: 2.8vh;
    }
    .otp-form{
        width: 40%;
    }
    .bookings-text{
        font-size: 1.2em;
    }
    .booking-id{
        font-size: 1em;
    }
    .bookings-right-arrow{
        font-size: 2em;
    }
    .products-container-grid{ grid-template-columns: repeat(5, 1fr); }

    .contact-us-grid-container{
        margin-inline: auto;
        max-width: 80rem;
        grid-template-columns: 3fr 1fr;
        grid-template-rows: 1fr;
        -moz-column-gap: 2em;
             column-gap: 2em;
    }
    .lotions-container-grid {
        text-align: left;
        display: grid;
        grid-template-columns: 0.5fr 1.5fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 12px 10px;
        grid-template-areas:
          "."
          "."
          ".";
    }
    .product-page-image{
        width: 100%;
        margin-left: 20px;
    }
    .main-container-wheel{
        max-height: 1400px;
    }
    .product-description-container h3{
        margin-left: 16px;
    }

}

/* for phone screens only*/
@media only screen and (max-width: 767px){
    .grid-header{
        font-size: 32px;
    }
    .grid-paragraph{
        font-size: 17px;
        font-weight: 600;
    }
    .col-sm{
        padding-left: 0px;
        padding-right: 0px;
    }
    .carousel.slide{
        min-height: 0px;
        margin-left: 2vw;
        margin-right: 2vw;
    }
}

/* KEYFRAMES */

@-webkit-keyframes backgroundBookGradientAnim {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

@keyframes backgroundBookGradientAnim {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

@-webkit-keyframes loading{
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);}
}

@keyframes loading{
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);}
}



@-webkit-keyframes lightGlow {
    0%{
        box-shadow: 0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    inset 0px 0px 8px #ed1372;
    }
    100%{
        box-shadow: 0px 0px 3px #FF69B4,
                    3px 0px 5px #FF69B4,
                    0px 3px 5px #FF69B4,
                    -3px 0px 5px #FF69B4,
                    0px -3px 5px #FF69B4,
                    inset 0px 0px 3px #ed1372;
    }

}

@keyframes lightGlow {
    0%{
        box-shadow: 0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    0px 0px 3px #FF69B4,
                    inset 0px 0px 8px #ed1372;
    }
    100%{
        box-shadow: 0px 0px 3px #FF69B4,
                    3px 0px 5px #FF69B4,
                    0px 3px 5px #FF69B4,
                    -3px 0px 5px #FF69B4,
                    0px -3px 5px #FF69B4,
                    inset 0px 0px 3px #ed1372;
    }

}


@-webkit-keyframes animateGlow {
    0% {
        opacity: 1;
      }

    100% {
        opacity: 0.2;
      }
}



@keyframes animateGlow {
    0% {
        opacity: 1;
      }

    100% {
        opacity: 0.2;
      }
}

@-webkit-keyframes backgroundGradientAnim {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

@keyframes backgroundGradientAnim {
	0% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

@-webkit-keyframes textclip {
    to {
      background-position: 200% center;
    }
}

@keyframes textclip {
    to {
      background-position: 200% center;
    }
}


@-webkit-keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


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

@-webkit-keyframes spinSpinButton {
    from{
        transform: rotate3d(0,0,1,0deg);
    }
    to{
        transform: rotate3d(0,0,1,360deg);
    }
}

@keyframes spinSpinButton {
    from{
        transform: rotate3d(0,0,1,0deg);
    }
    to{
        transform: rotate3d(0,0,1,360deg);
    }
}

@-webkit-keyframes moving {
    from{transform: translate3d(50px,0,0);opacity: 0;}
    to{transform: translate3d(0,0,0);opacity: 1;}
}

@keyframes moving {
    from{transform: translate3d(50px,0,0);opacity: 0;}
    to{transform: translate3d(0,0,0);opacity: 1;}
}