.elementor-986 .elementor-element.elementor-element-50e9785{--display:flex;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-986 .elementor-element.elementor-element-ad1189d .elementor-button{background-color:#EFEFEF85;fill:#030101;color:#030101;border-radius:10px 10px 10px 10px;padding:05px 10px 05px 10px;}.elementor-986 .elementor-element.elementor-element-ad1189d .elementor-button-content-wrapper{flex-direction:row;}.elementor-986 .elementor-element.elementor-element-ad1189d .elementor-button .elementor-button-content-wrapper{gap:4px;}/* Start custom CSS for button, class: .elementor-element-ad1189d *//* forest page css */
/*=========================================================
FINASHLP MEDITATION V2
forest.css
PART 1
Reset + Root + Body + Loader + Background Video
=========================================================*/

/*==============================
Google Font
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
RESET
==============================*/

*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
/*
html{
scroll-behavior:smooth;
}*/

body{

font-family:'Poppins',sans-serif;

background:#05080d;

color:#ffffff;

overflow:hidden;

width:100%;

height:100vh;

}

/*==============================
ROOT COLORS
==============================*/

:root{

--primary:#56f7ff;

--secondary:#7d6bff;

--glass:rgba(255,255,255,.08);

--glass2:rgba(255,255,255,.15);

--text:#ffffff;

--text2:#c9d4dc;

--shadow:0 15px 45px rgba(0,0,0,.45);

--radius:24px;

--blur:blur(25px);

--gradient:

linear-gradient(

135deg,

rgba(255,255,255,.10),

rgba(255,255,255,.03)

);

}

/*==============================
SCROLLBAR
============================= 

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#05080d;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

/*==============================
COMMON
==============================*/

img{

max-width:100%;

display:block;

}

button{

font-family:'Poppins',sans-serif;

cursor:pointer;

border:none;

outline:none;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

/*==============================
LOADER
==============================*/

#loader{

position:fixed;

inset:0;

background:

linear-gradient(

180deg,

#04070c,

#08111d,

#05080d

);

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

transition:.8s;

}

.loader-content{

text-align:center;

width:360px;

}

.loader-logo{

width:120px;

margin:auto;

margin-bottom:25px;

animation:

floatLogo 3s ease infinite;

}

.loader-ring{

width:90px;

height:90px;

border-radius:50%;

margin:auto;

border:6px solid rgba(255,255,255,.10);

border-top:6px solid var(--primary);

animation:loaderSpin 1s linear infinite;

margin-bottom:25px;

}

.loader-content h2{

font-size:28px;

font-weight:700;

margin-bottom:12px;

}

.loader-content p{

color:#b8c3cc;

margin-bottom:25px;

}

/*==============================
LOADING BAR
==============================*/

.loading-bar{

width:100%;

height:8px;

background:rgba(255,255,255,.08);

border-radius:50px;

overflow:hidden;

}

.loading-progress{

width:0%;

height:100%;

background:

linear-gradient(

90deg,

#5ef8ff,

#7c5cff,

#00ffb3

);

animation:loadingBar 4s linear forwards;

}

/*==============================
FULLSCREEN VIDEO
==============================*/

#videoSection{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-20;

}

#bgVideo{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:100%;

height:100%;

object-fit:cover;

filter:

brightness(.65)

contrast(1.05)

saturate(1.1);

animation:

zoomVideo 30s linear infinite alternate;

}

/*==============================
VIDEO OVERLAY
==============================*/

.video-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.25),

rgba(0,0,0,.45),

rgba(0,0,0,.75)

);

}

/*==============================
FOG
==============================*/

.fog-layer{

position:absolute;

inset:0;

background:

radial-gradient(

circle,

rgba(255,255,255,.05),

transparent 70%

);

mix-blend-mode:screen;

animation:

fogMove 40s linear infinite;

opacity:.7;

}

/*==============================
LIGHT RAYS
==============================*/

.light-rays{

position:absolute;

inset:0;

background:

repeating-linear-gradient(

115deg,

rgba(255,255,255,.08) 0,

rgba(255,255,255,.03) 3px,

transparent 8px,

transparent 18px

);

mix-blend-mode:screen;

opacity:.25;

animation:

raysMove 18s linear infinite;

}

/*==============================
PARTICLES
==============================*/

.particles{

position:absolute;

inset:0;

pointer-events:none;

background-image:

radial-gradient(circle,#ffffff 1px,transparent 1px);

background-size:90px 90px;

opacity:.12;

animation:

particleMove 60s linear infinite;

}

/*==============================
FLOATING LEAVES
==============================*/

.floating-leaves{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

}

.floating-leaves span{

position:absolute;

display:block;

width:28px;

height:28px;

background:url("assets/images/leaf.png");

background-size:cover;

opacity:.85;

animation:leafFall linear infinite;

}

.floating-leaves span:nth-child(1){

left:5%;

animation-duration:18s;

animation-delay:0s;

}

.floating-leaves span:nth-child(2){

left:15%;

animation-duration:15s;

animation-delay:3s;

}

.floating-leaves span:nth-child(3){

left:30%;

animation-duration:21s;

animation-delay:6s;

}

.floating-leaves span:nth-child(4){

left:45%;

animation-duration:17s;

animation-delay:2s;

}

.floating-leaves span:nth-child(5){

left:60%;

animation-duration:19s;

animation-delay:8s;

}

.floating-leaves span:nth-child(6){

left:75%;

animation-duration:22s;

animation-delay:5s;

}

.floating-leaves span:nth-child(7){

left:88%;

animation-duration:16s;

animation-delay:4s;

}

.floating-leaves span:nth-child(8){

left:96%;

animation-duration:20s;

animation-delay:7s;

}

/*==============================
KEYFRAMES
==============================*/

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}

@keyframes floatLogo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes loadingBar{

0%{

width:0;

}

100%{

width:100%;

}

}

@keyframes zoomVideo{

0%{

transform:translate(-50%,-50%) scale(1);

}

100%{

transform:translate(-50%,-50%) scale(1.12);

}

}

@keyframes fogMove{

0%{

transform:translateX(-8%);

}

100%{

transform:translateX(8%);

}

}

@keyframes raysMove{

0%{

transform:translateX(-30px);

}

100%{

transform:translateX(30px);

}

}

@keyframes particleMove{

0%{

background-position:0 0;

}

100%{

background-position:0 1000px;

}

}

@keyframes leafFall{

0%{

transform:

translateY(-120px)

rotate(0deg);

}

100%{

transform:

translateY(120vh)

rotate(720deg);

}

}

/*==============================
END OF PART 1
NEXT:
Welcome Screen
Glassmorphism Cards
Top Navigation
Buttons
Animated Title
==============================*/

/*=========================================================
FINASHLP MEDITATION V2
forest.css
PART 2
Welcome Screen + Glass UI + Top Navigation
=========================================================*/

/*==============================
WELCOME SCREEN
==============================*/

#welcomeScreen{

position:absolute;

top:0;
left:0;

width:100%;
height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:40px;

z-index:50;

}

/*==============================
GLASS CARD
==============================*/

.glass-card{

width:680px;

max-width:95%;

padding:55px 60px;

border-radius:32px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(25px);

-webkit-backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.18);

box-shadow:

0 25px 60px rgba(0,0,0,.45),

0 0 60px rgba(90,255,255,.08);

text-align:center;

animation:

cardFade 1.5s ease;

position:relative;

overflow:hidden;

}

/*==============================
SHINE EFFECT
==============================*/

.glass-card::before{

content:"";

position:absolute;

top:-120%;

left:-35%;

width:180px;

height:250%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:rotate(25deg);

animation:shineMove 6s linear infinite;

}

/*==============================
LOGO
==============================*/

.logo-box{

width:120px;

height:120px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

rgba(255,255,255,.08);

box-shadow:

0 0 30px rgba(90,255,255,.25);

}

.logo-box img{

width:90px;

animation:logoPulse 4s infinite;

}

/*==============================
TITLE
==============================*/

.glass-card h1{

font-size:62px;

font-weight:800;

line-height:1.1;

margin-bottom:18px;

letter-spacing:.5px;

}

.glass-card h1 span{

display:block;

margin-top:10px;

background:

linear-gradient(

90deg,

#56f7ff,

#89b4ff,

#7d6bff

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*==============================
DESCRIPTION
==============================*/

.glass-card p{

font-size:18px;

line-height:1.9;

color:var(--text2);

max-width:520px;

margin:auto;

margin-bottom:40px;

}

/*==============================
BUTTONS
==============================*/

.welcome-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

margin-bottom:45px;

}

.welcome-buttons button{

padding:17px 38px;

font-size:16px;

font-weight:700;

border-radius:60px;

transition:.35s;

}

/* START BUTTON */

#startMeditation{

background:

linear-gradient(

135deg,

#56f7ff,

#6f8dff

);

color:#041019;

box-shadow:

0 0 30px rgba(86,247,255,.45);

}

#startMeditation:hover{

transform:translateY(-4px) scale(1.05);

box-shadow:

0 12px 40px rgba(86,247,255,.45);

}

/* VR BUTTON */

#enterVR{

background:

rgba(255,255,255,.08);

color:#fff;

border:1px solid rgba(255,255,255,.18);

}

#enterVR:hover{

background:rgba(255,255,255,.18);

transform:translateY(-4px);

}

/*==============================
INFO BOXES
==============================*/

.welcome-info{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.welcome-info div{

width:150px;

padding:22px;

border-radius:22px;

background:

rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

transition:.35s;

}

.welcome-info div:hover{

transform:translateY(-8px);

background:

rgba(255,255,255,.12);

}

.welcome-info h3{

font-size:30px;

margin-bottom:8px;

color:#56f7ff;

}

.welcome-info p{

font-size:14px;

margin:0;

color:#d7e4ec;

}

/*==============================
TOP BAR
==============================*/

#topBar{

position:fixed;

top:0;

left:0;

width:100%;

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 35px;

background:

rgba(0,0,0,.15);

backdrop-filter:blur(18px);

border-bottom:

1px solid rgba(255,255,255,.08);

z-index:200;

}

.left-area{

display:flex;

align-items:center;

gap:15px;

font-size:20px;

font-weight:700;

}

.mini-logo{

width:45px;

height:45px;

border-radius:50%;

}

.right-area{

display:flex;

align-items:center;

gap:15px;

}

.right-area button{

padding:12px 22px;

border-radius:40px;

background:

rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

color:#fff;

font-weight:600;

transition:.3s;

}

.right-area button:hover{

background:

linear-gradient(

90deg,

#56f7ff,

#7d6bff

);

color:#000;

transform:translateY(-2px);

}

/*==============================
ANIMATIONS
==============================*/

@keyframes cardFade{

from{

opacity:0;

transform:

translateY(40px)

scale(.96);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

@keyframes shineMove{

0%{

left:-40%;

}

100%{

left:140%;

}

}

@keyframes logoPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

.glass-card{

padding:40px;

}

.glass-card h1{

font-size:48px;

}

.welcome-info{

gap:18px;

}

}

@media(max-width:768px){

#topBar{

padding:0 15px;

height:70px;

}

.left-area span{

display:none;

}

.glass-card{

padding:30px 25px;

}

.glass-card h1{

font-size:38px;

}

.glass-card p{

font-size:15px;

}

.welcome-buttons{

flex-direction:column;

}

.welcome-buttons button{

width:100%;

}

.welcome-info{

flex-direction:column;

align-items:center;

}

.welcome-info div{

width:100%;

max-width:280px;

}

}

/*==============================
END OF PART 2

NEXT PART

Guided Text
Breathing Circle
Floating Timer
Music Player
Progress Bar

==============================*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-45a10ce *//*=========================================================
PREKSHA MEDITATION
FOREST.CSS
PART 1
Global • Loader • Background • Welcome Screen • Top Bar
=========================================================*/

/*==============================
RESET
==============================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#07131d;

color:#fff;

overflow:hidden;

width:100%;
height:100vh;

}

/*==============================
ROOT COLORS
==============================*/

:root{

--primary:#46d9ff;

--secondary:#7862ff;

--glass:rgba(255,255,255,.08);

--glassBorder:rgba(255,255,255,.15);

--shadow:0 20px 60px rgba(0,0,0,.35);

--radius:28px;

}

/*==============================
VIDEO
==============================*/

#videoSection{

position:fixed;

inset:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-10;

}

#bgVideo{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:100%;

height:100%;

object-fit:cover;

}

/*==============================
LAYERS
==============================*/

.videoOverlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(5,8,15,.35),

rgba(5,8,15,.60)

);

}

.gradientLayer{

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

transparent,

rgba(0,0,0,.35));

}

.lightLayer{

position:absolute;

inset:0;

background:url("https://www.transparenttextures.com/patterns/stardust.png");

opacity:.08;

animation:lightMove 20s linear infinite;

}

.fogLayer{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.06),

transparent

);

filter:blur(80px);

animation:fogMove 25s linear infinite;

}

@keyframes fogMove{

0%{

transform:translateX(-100%);

}

100%{

transform:translateX(100%);

}

}

@keyframes lightMove{

0%{

background-position:0 0;

}

100%{

background-position:1000px 1000px;

}

}

/*==============================
LOADER
==============================*/

#loader{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:#050b12;

z-index:9999;

transition:.8s;

}

.loader-wrapper{

text-align:center;

}

.loader-logo{

width:140px;

margin-bottom:30px;

animation:logoFloat 3s ease infinite;

}

.loader-ring{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

border:5px solid rgba(255,255,255,.1);

border-top:5px solid var(--primary);

animation:spin 1s linear infinite;

}

.loader-wrapper h2{

margin-top:25px;

font-size:34px;

font-weight:700;

}

.loader-wrapper p{

margin-top:15px;

opacity:.8;

}

.loader-progress{

margin:35px auto 0;

width:320px;

height:7px;

border-radius:20px;

background:rgba(255,255,255,.1);

overflow:hidden;

}

.loader-bar{

height:100%;

width:0;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

animation:loadingBar 3s linear forwards;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes logoFloat{

50%{

transform:translateY(-12px);

}

}

@keyframes loadingBar{

100%{

width:100%;

}

}

/*==============================
WELCOME
==============================*/

#welcomeScreen{

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

z-index:100;

}

.welcomeCard{

width:680px;

max-width:92%;

padding:60px;

text-align:center;

border-radius:35px;

background:var(--glass);

backdrop-filter:blur(25px);

border:1px solid var(--glassBorder);

box-shadow:var(--shadow);

}

.welcomeLogo{

width:120px;

margin-bottom:25px;

}

.welcomeCard h1{

font-size:60px;

font-weight:800;

line-height:1.15;

}

.welcomeCard h1 span{

display:block;

background:

linear-gradient(

90deg,

#42d9ff,

#8d70ff

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.welcomeCard p{

margin-top:28px;

font-size:20px;

line-height:1.9;

opacity:.9;

}

.welcomeButtons{

margin-top:40px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.welcomeButtons button{

padding:18px 40px;

border:none;

border-radius:60px;

cursor:pointer;

font-size:18px;

font-weight:700;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

color:#fff;

transition:.35s;

}

.welcomeButtons button:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.welcomeFeatures{

margin-top:45px;

display:flex;

justify-content:space-around;

gap:20px;

flex-wrap:wrap;

}

.welcomeFeatures h3{

font-size:30px;

color:var(--primary);

}

.welcomeFeatures p{

font-size:15px;

margin-top:8px;

opacity:.8;

}

/*==============================
TOP BAR
==============================*/

#topBar{

position:fixed;

top:18px;

left:50%;

transform:translateX(-50%);

width:94%;

max-width:1500px;

padding:15px 28px;

display:flex;

justify-content:space-between;

align-items:center;

border-radius:24px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

z-index:999;

}

.topLeft,
.topCenter,
.topRight{

display:flex;

align-items:center;

gap:15px;

}

.topLogo{

width:45px;

height:45px;

border-radius:50%;

}

.topCenter span{

font-size:20px;

font-weight:700;

letter-spacing:.5px;

}

#topBar button{

padding:12px 22px;

border:none;

border-radius:50px;

cursor:pointer;

font-weight:600;

background:rgba(255,255,255,.08);

color:#fff;

transition:.3s;

}

#topBar button:hover{

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

}

/*==============================
SUBTITLE
==============================*/

#subtitleContainer{

position:absolute;

top:120px;

left:50%;

transform:translateX(-50%);

width:min(900px,90%);

text-align:center;

z-index:50;

}

#guidedTitle{

font-size:52px;

font-weight:700;

margin-bottom:18px;

text-shadow:0 10px 30px rgba(0,0,0,.4);

}

#guidedSubtitle{

font-size:22px;

line-height:1.8;

opacity:.95;

}

/*==============================
BREATHING
==============================*/

#breathingGuide{

position:absolute;

bottom:130px;

left:50%;

transform:translateX(-50%);

z-index:60;

}

.breathOuter{

width:170px;

height:170px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.08);

backdrop-filter:blur(15px);

animation:breathe 8s ease infinite;

}

.breathInner{

width:120px;

height:120px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(

180deg,

var(--primary),

var(--secondary)

);

box-shadow:0 0 35px rgba(70,217,255,.4);

}

#breathText{

font-size:20px;

font-weight:700;

}

@keyframes breathe{

0%{

transform:scale(.8);

}

50%{

transform:scale(1.25);

}

100%{

transform:scale(.8);

}

}
/*=========================================================
PREKSHA MEDITATION
FOREST.CSS
PART 2
VR Scene • Control Bar • Volume • Timer
Progress • Complete Screen • Responsive
=========================================================*/

/*==============================
VR SCENE
==============================*/

#vrSceneContainer{

position:fixed;

inset:0;

width:100%;

height:100%;

z-index:1;

}

#forestScene{

width:100%;

height:100%;

background:transparent;

}

a-scene{

position:absolute !important;

width:100% !important;

height:100% !important;

top:0;

left:0;

}

/*==============================
CONTROL BAR
==============================*/

#controlBar{

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%);

z-index:999;

width:auto;

}

.controlGlass{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

padding:18px 28px;

border-radius:70px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.15);

box-shadow:0 15px 45px rgba(0,0,0,.35);

}

.controlBtn{

width:65px;

height:65px;

border-radius:50%;

border:none;

cursor:pointer;

font-size:24px;

font-weight:700;

background:rgba(255,255,255,.08);

color:#fff;

transition:.35s;

}

.controlBtn:hover{

transform:translateY(-5px);

background:linear-gradient(

90deg,

#42d9ff,

#7c63ff

);

box-shadow:0 10px 30px rgba(66,217,255,.35);

}

.controlBtn.vr{

width:110px;

border-radius:50px;

font-size:18px;

}

.controlBtn.danger:hover{

background:#ff4444;

}

/*==============================
VOLUME PANEL
==============================*/

#volumePanel{

position:fixed;

top:120px;

right:25px;

display:flex;

flex-direction:column;

gap:18px;

z-index:999;

}

.volumeCard{

width:260px;

padding:18px;

border-radius:20px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

}

.volumeCard h3{

font-size:16px;

margin-bottom:12px;

font-weight:600;

}

.volumeCard input{

width:100%;

cursor:pointer;

}

/*==============================
TIMER
==============================*/

#timerContainer{

position:fixed;

top:120px;

left:30px;

padding:20px 28px;

border-radius:22px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

z-index:999;

}

#timerText{

font-size:42px;

font-weight:700;

letter-spacing:2px;

}

/*==============================
PROGRESS
==============================*/

#progressContainer{

position:fixed;

bottom:120px;

left:50%;

transform:translateX(-50%);

width:min(650px,90%);

height:8px;

border-radius:50px;

background:rgba(255,255,255,.15);

overflow:hidden;

z-index:999;

}

#progressFill{

width:0;

height:100%;

background:linear-gradient(

90deg,

#42d9ff,

#7b63ff

);

transition:.4s;

}

/*==============================
SESSION COMPLETE
==============================*/

#sessionComplete{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.82);

backdrop-filter:blur(8px);

z-index:99999;

}

.completeCard{

width:650px;

max-width:92%;

padding:60px;

text-align:center;

border-radius:35px;

background:#0d1621;

border:1px solid rgba(255,255,255,.12);

box-shadow:0 20px 70px rgba(0,0,0,.45);

}

.completeIcon{

font-size:70px;

margin-bottom:20px;

}

.completeCard h2{

font-size:42px;

margin-bottom:18px;

}

.completeCard p{

font-size:20px;

line-height:1.8;

opacity:.9;

margin-bottom:35px;

}

.completeCard button{

padding:16px 34px;

margin:10px;

border:none;

border-radius:50px;

cursor:pointer;

font-size:18px;

font-weight:700;

background:linear-gradient(

90deg,

#42d9ff,

#7b63ff

);

color:#fff;

transition:.35s;

}

.completeCard button:hover{

transform:translateY(-4px);

}

/*==============================
RANGE SLIDER
==============================*/

input[type=range]{

-webkit-appearance:none;

height:6px;

border-radius:30px;

background:rgba(255,255,255,.2);

outline:none;

}

input[type=range]::-webkit-slider-thumb{

-webkit-appearance:none;

width:18px;

height:18px;

border-radius:50%;

background:#42d9ff;

cursor:pointer;

}

/*==============================
A-FRAME
==============================*/

.a-enter-vr-button{

bottom:100px !important;

right:20px !important;

background:#111 !important;

border-radius:50px !important;

padding:10px 20px !important;

}

.a-loader-title{

display:none !important;

}

.a-loader{

background:#07131d !important;

}

/*==============================
ANIMATIONS
==============================*/

.fadeIn{

animation:fadeIn .8s ease forwards;

}

.fadeOut{

animation:fadeOut .8s ease forwards;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeOut{

from{

opacity:1;

}

to{

opacity:0;

}

}

.float{

animation:float 5s ease-in-out infinite;

}

@keyframes float{

50%{

transform:translateY(-12px);

}

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){

#volumePanel{

right:15px;

top:auto;

bottom:150px;

}

.volumeCard{

width:210px;

}

#guidedTitle{

font-size:38px;

}

#guidedSubtitle{

font-size:18px;

}

#timerContainer{

top:20px;

left:20px;

}

}

@media(max-width:768px){

#topBar{

flex-direction:column;

gap:15px;

padding:15px;

}

.controlGlass{

gap:10px;

padding:12px 16px;

}

.controlBtn{

width:52px;

height:52px;

font-size:18px;

}

.controlBtn.vr{

width:90px;

font-size:15px;

}

#volumePanel{

position:fixed;

left:50%;

transform:translateX(-50%);

bottom:110px;

right:auto;

width:92%;

}

.volumeCard{

width:100%;

}

#timerContainer{

left:50%;

transform:translateX(-50%);

top:85px;

}

#progressContainer{

bottom:95px;

}

.breathOuter{

width:120px;

height:120px;

}

.breathInner{

width:85px;

height:85px;

}

#breathText{

font-size:15px;

}

.completeCard{

padding:35px;

}

.completeCard h2{

font-size:30px;

}

.completeCard p{

font-size:17px;

}

}/* End custom CSS */