@import url('fonts.css');

:root {
  --font-primary: "Smitch Sans";
  --font-secondary: "SF Pro Display";
  --color-white: #fff;
  --color-black: #000;
  --color-red: #f44336;
  --color-blue: #2196f3;
  --color-pink: #e91e63;
  --color-purple: #9c27b0;
  --color-indigo: #3f51b5;
  --color-green: #4caf50;
  --color-orange: #ff9800;
  --color-brown: #795548;
  --color-grey: #9e9e9e;
  --color-grey-lighten-5: #fafafa;
  --color-grey-lighten-4: #f5f5f5;
  --color-grey-lighten-3: #eeeeee;
  --color-grey-lighten-2: #e0e0e0;
  --color-grey-lighten-1: #bdbdbd;
  --color-grey-darken-1: #757575;
  --color-grey-darken-2: #616161;
  --color-grey-darken-3: #424242;
  --color-grey-darken-4: #212121;
}

* {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  background-color: #fff;
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  font-weight: 400;
  line-height: 1.7;
  color: #000;
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
}

body.os-ios{
  font-family: var(--font-secondary);
}

body.os-android{
  font-family: var(--font-primary);
}

.container {
  padding: 2rem;
  margin: 0 auto;
  max-width: 80rem;
}

#fullsvg {
  left: 0px;
  top: 0px;
  position: absolute;
  margin: 0;
  pointer-events: none;
  width: 100%;
  min-height: 800px;
  height: 100%;
}

path{
  stroke: url(#gradient)
}

.top-section {
  padding: 2rem 0;
  max-width: 40rem;
 /*  margin: 0 auto; */
}

/* IOS */

.os-android .top-section h1 {
  color: #000000;
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 29px;  
  margin-bottom:15px;
}

.os-android .top-section p {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 10px;
}

.os-android .section .content h4 {
  color: #8A8A8A;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
}

.os-android .section .content h2 {
  color: #000000;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
}

.os-android .section .content p {
  color: #8A8A8A;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
}

.os-android .section .content p.brief {
  font-size: 14px;
  line-height: 1.6;
}
/* Android */

.os-ios .top-section h1 {
  color: #000000;
  font-style: normal;
  font-weight: 700;
  font-size: 23px;
  line-height: 27px;  
  margin-bottom:15px;
}

.os-ios .top-section p {
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  margin-bottom: 10px;
}

.os-ios .section .content h4 {
  color: #8A8A8A;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
}

.os-ios .section .content h2 {
  color: #000000;
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
}

.os-ios .section .content p {
  color: #8A8A8A;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
}

.os-ios .section .content p.brief {
  font-size: 15px;
  line-height: 1.6;
}

/*  */

.timeline {
  position: relative;
  min-height: 15rem;
  margin-top: 5rem;  
}


.section {
  display: flex;
  opacity: 0;  
  transition: 600ms ease;
  position: relative;
  z-index: 1;
  border-radius: 1rem;
  background-color: transparent;
  align-items: center;
  flex-direction: row-reverse;
  transform: translateX(0%);
  height: 1rem;
  /* min-height: 12rem; 
  transform: translateX(-100%); */
}


.bead {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  top: 0%;
  transform: translateX(-30%);
}

.energy-timeline .section .content p.brief{
  display:none
}
.energy-zone .section .content p.description{
  display:none
} 

/* Colur Types css */

.section.start_1 .bead{
  background-color: #FECB2E;
}
.section.start_2 .bead{
  /* background-color: #0A84FF; */
}

.section.peak_1 .bead,
.section.peak_2 .bead{
  background-color: #FF6229;
}

.section.dip .bead{
  background-color: #8A8A8A;
}

.section.end_1 .bead{
  /* background-color: #6CADFF; */
}
.section.end_2 .bead{
  background-color: #5AC9F9;
}

.section.start_2 .bead,
.section.end_1 .bead{
  /* visibility: hidden; */
}

/* Position */


.section .content {
  width: calc(65% - 2rem);
  position: relative;
  /* margin-top: -10%; */
  margin-top: 0%;
  transform: translateY(-40%);
}

.energy-timeline .section.start_1 .content {
  margin-top: 0%;
  transform: translateY(-20%);
}

.energy-timeline .section.end_2 .content {
  margin-top: 0%;
  transform: translateY(-60%);
}

.section.start_1 .content,
.section.end_1 .content {
  position: absolute;
  margin-top: 0%;
}

/* Energy Timeline */

.section.start_1 .bead,
.section.end_2 .bead{
  left: 0%;
}

.section.start_2 .bead,
.section.end_1 .bead{
  left: 8%;
}

.section.dip .bead{
  left: 12%;
}

.section.peak_1 .bead,
.section.peak_2 .bead{
  left: 20%;
}

/* Energy Zones */

.energy-zone .section.start_1 .bead,
.energy-zone .section.end_2 .bead{
  left: 0%;
}

.energy-zone .section.start_2 .bead,
.energy-zone .section.end_1 .bead{
  left: 25%;
}

.energy-zone .section.dip .bead{
  left: 50%;
}

.energy-zone .section.peak_1 .bead,
.energy-zone .section.peak_2 .bead{
  left: 80%;
}


/*---- Height -----*/

/* .section{
  min-height: 2rem;
} */

.section.start_1,
.section.start_2,
.section.peak_1,
.section.peak_2,
.section.dip,
.section.end_1,
.section.end_2{
  min-height: 10rem;
}

/* .energy-zone .section.end_2 */

.energy-zone .section.start_1,
.energy-zone .section.start_2,
.energy-zone .section.peak_1,
.energy-zone .section.peak_2,
.energy-zone .section.dip,
.energy-zone .section.end_1{
  min-height: 40rem;
}

.energy-zone .section.end_2{
  min-height: 20rem;
}


/* .section.start_1 .bead:before,
.section.end_2 .bead:before,
.section.start_2 .bead:before,
.section.end_1 .bead:before,
.section.dip .bead:before,
.section.peak_1 .bead:before,
.section.peak_2 .bead:before{
  content: '\2638';
  font-size: 22px;
  position: absolute;
  width: 30px;
  top: -10%;
  left: 2px;
  color: #fff;
  background: transparent;
} */
.timeline .section .bead div{
  display: none;
}
.timeline .section.start_1 .bead div,
.timeline .section.end_2 .bead div,
.timeline .section.start_2 .bead div,
.timeline .section.end_1 .bead div,
.timeline .section.dip .bead div,
.timeline .section.peak_1 .bead div,
.timeline .section.peak_2 .bead div {
  height: 30px;
  width: 30px;
  line-height: 28px;
  text-align: center;
  /* color: #fff;
  font-size: 25px; */
  display: block;
}

/* .bead:before { } */



.show-me:nth-child(n) {
  /* transform: none; */
  opacity: 1;
}

h1 {
  font-weight: 400;
  letter-spacing: 1px;
}
.scrollControl button {
  background-color: #0053C7;
  border-radius: 30px;
  color: white;
  padding: 10px 15px;
  text-align: center;
  width: 300px;
  font-size: 16px;
  margin: 4px 2px;
  border: none;
}


.scrollControl{
  text-align: center;
  padding: 10px;
  min-height: 50px;    
}

.energy-zone .scrollControl button{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin:10px auto;
  z-index: 101
}

.energy-zone .section .content{
  position: absolute;
  left: 0;
  right: 0;    
  width: 95%;
  margin: auto;
  z-index: 101;
  top: 50%;
}

.energy-zone .section.end_2 .content{
  /* top: -30vh; */
  top: 0;
  margin-top: -25%;
}


.energy-zone .section.start_1 .content,
.energy-zone .section.peak_1 .content,
.energy-zone .section.peak_2 .content,
.energy-zone .section.dip .content,
.energy-zone .section.end_2 .content{    
  padding: 15px;
  background: #FFFFFF;
  box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;    
}

.energy-zone.timeline-section::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background-size: cover;
  overflow: hidden;
  filter: blur(0px);
  z-index: 100;    
}

.energy-zone #fullsvg,
.energy-zone .section .bead {
  filter: blur(0.6px);
}

.section .content h2>div{
  display: none;
}

@media only screen and (max-width: 578px) {
  .energy-timeline .section.start_1 .content {
    position: absolute;
    margin-top: 0%;
    transform: translateY(-5%);
  }
}

@media only screen and (max-width: 425px) {

  .energy-timeline .timeline {
    margin-top: 4rem;
  }

  .energy-zone .timeline{
    margin-top: 0rem;
  }

  .energy-timeline .scrollControl .continue_button {
    width: 100%;
  }
  
  /* .energy-zone .section .content{
    display: inherit;
  } */

  .energy-timeline .section{
    margin-bottom: 3rem;
    z-index: 99;
    height: 1rem;    
  }

  .energy-zone .section {
    margin-bottom: 3rem;
    z-index: 99;
    height: 2rem; 
  }

  .energy-timeline .section .content {
    width: calc(65% - 2rem);
    position: relative;
    margin-top: 0%;
    transform: translateY(-10%);
  }
  
  .energy-timeline .section.start_1 .content {
    position: absolute;
    margin-top: 0%;
    transform: translateY(20%);
  }

  
  .energy-timeline .section.end_2 .content {
    position: absolute;
    margin-top: 0%;
    transform: translateY(-15%);
  }


  .energy-timeline .section.start_1,
  .energy-timeline .section.peak_1,
  .energy-timeline .section.peak_2,
  .energy-timeline .section.dip,
  .energy-timeline .section.end_1{
    min-height: 5rem;
  }

  .energy-timeline .section.start_2,
  .energy-timeline .section.end_2{
    min-height: 2rem;
  }

  .energy-timeline .section.start_1.start_2{
    min-height: 5rem;
  }

  .energy-zone .section.start_1,
  .energy-zone .section.peak_1,
  .energy-zone .section.peak_2,
  .energy-zone .section.dip,
  .energy-zone .section.end_1{
    min-height: 40rem;
  }

  .energy-zone .section.start_2,
  .energy-zone .section.end_2{
    min-height: 20rem;
  }

  .energy-timeline #fullsvg,
  .energy-zone #fullsvg{
    top: 10px;
  }

  .energy-zone #fullsvg,
  .energy-zone .section .bead{
    filter: blur(0.6px);
  }

  .energy-zone .section .content{
    position: absolute;
    left: 0;
    right: 0;    
    width: 95%;
    margin: auto;
    z-index: 101;
    top: 50%; /* 65%; */
  }

  .energy-zone .section.end_2 .content{
    /* top: -40vh; */
    top: 0;
    margin-top: -75%;
  }


  .energy-zone .section.start_1 .content,
  .energy-zone .section.peak_1 .content,
  .energy-zone .section.peak_2 .content,
  .energy-zone .section.dip .content,
  .energy-zone .section.end_2 .content{    
    padding: 15px;
    background: #FFFFFF;
    box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;    
  }

  .energy-zone .scrollControl button{
    position: fixed;
    bottom: 5rem;
    left: 0;
    right: 0;
    margin:10px auto;
    z-index: 101
  }

  .energy-zone.timeline-section::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background-size: cover;
    overflow: hidden;
    filter: blur(0px);
    z-index: 100;    
  }

  .energy-zone .section .content .energy_time{
    display: none;
  }

  .energy-zone .section .content h2{
    margin-bottom: 15px;
  }

  .energy-zone .section .content h2>div{
    height: 24px;
    width: 24px;
    line-height: 23px;    
    text-align: center;    
    margin-right: 10px;
    border-radius: 50%;
    display: inline-block;
    /* font-size: 20px;
    color: #fff;
    padding-top: 3px; */
  }

  .energy-zone .section.start_1 .content h2>div{
    background-color: #FECB2E;
  }
  .energy-zone .section.start_2 .content h2>div{
    background-color: #0A84FF;
  }
  
  .energy-zone .section.peak_1 .content h2>div,
  .energy-zone .section.peak_2 .content h2>div{
    background-color: #FF6229;
  }
  
  .energy-zone .section.dip .content h2>div{
    background-color: #8A8A8A;
  }
  
  .energy-zone .section.end_1 .content h2>div{
    background-color: #6CADFF;
  }
  .energy-zone .section.end_2 .content h2>div{
    background-color: #5AC9F9;
  }

 

  .energy-zone .section:last-child{
    min-height: 5rem;
  }

  .energy-zone .bead {
    top:10%;
  }

  .energy-zone .section.start_1 .bead,
  .energy-zone .section.end_2 .bead{
    left: 0%;
  }
  
  .energy-zone .section.start_2 .bead,
  .energy-zone .section.end_1 .bead{
    left: 45%;
  }
  
  .energy-zone .section.start_1.start_2 .bead{
    left: 0%;
  }
  
  .energy-zone .section.dip .bead{
    left: 45%;
  }
  
  .energy-zone .section.peak_1 .bead,
  .energy-zone .section.peak_2 .bead{
    left: 90%;
  }

  
  
  .energy-timeline .section.start_1 .bead,
  .energy-timeline .section.end_2 .bead{
    left: 0%;
  }

  .energy-timeline .section.start_2 .bead,
  .energy-timeline .section.end_1 .bead{
    left: 10%;
  }

  .energy-timeline .section.dip .bead{
    left: 15%;
  }

  .energy-timeline .section.peak_1 .bead,
  .energy-timeline .section.peak_2 .bead{
    left: 25%;
  }


  .energy-zone .scrollControl{
    text-align: center;
    padding: 10px;
    min-height: 50px;    
  }
  
}

/* Dark Mode */


body.dark-mode{
  color: #fff;
  background-color: #343434;
}


.dark-mode .top-section h1,
.dark-mode .section .content h2 {
  color: #fff;
}


.dark-mode .energy-zone .section.start_1 .content,
.dark-mode .energy-zone .section.peak_1 .content,
.dark-mode .energy-zone .section.peak_2 .content,
.dark-mode .energy-zone .section.dip .content,
.dark-mode .energy-zone .section.end_2 .content {
  background: #1C1C1C;
  box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.dark-mode .section .content h4,
.dark-mode .section .content p{
  color: #8E8E8E;
}

.dark-mode .energy-zone.timeline-section::after{
  opacity: 0.2;
}

.dark-mode .energy-zone .section .content h2 img{
  filter: invert(1);
}
/* Dark mode */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}