/*---------------

COLOR : #74c209;

--------------*/
 @media (max-width: 500px) {


nav{
	background-color: #151618;

} 	

}



.swal2-container {
  z-index: 10000 !important;
}

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

*:focus {
	outline: 0 !important;
}


@font-face {
	font-family: circular_std;
	src: url(../fonts/CircularStd-Medium.otf);
}

@font-face {
	font-family: circular_book;
	src: url(../fonts/CircularStd-Book.otf);
}


@font-face {
	font-family: bugaki_regular;
	src: url(../fonts/Bugaki-Regular.otf);
}

@font-face {
	font-family: poppins_extralight;
	src: url(../fonts/Poppins-ExtraLight.ttf);
}

@font-face {
	font-family: poppins_semibold;
	src: url(../fonts/Poppins-SemiBold.ttf);
}

@font-face {
	font-family: poppins_thin;
	src: url(../fonts/Poppins-Thin.ttf);
}





html, 
body {
	font-family: 'circular_book', serif;
	scroll-behavior: smooth;
	margin: 0!important;
	padding: 0!important;
	overflow-x: clip !important;
    width: 100%;
	font-smoothing:antialiased;
	background-color: #111214;
}




a{
	text-decoration: none !important;
	cursor: pointer;
}


nav{
	background-color: transparent;
	padding-top: 2vw !important;
	z-index: 9000;
}



#nav_section{
	padding-left: 7vw;
	padding-right: 7vw;
}

.main_logo_img{
	width: 13vw;
	height: auto;
	margin-top: -0.5vw;
}


#download_btn{
	padding: 0.8vw 1.8vw !important;
	color: #fff;
	font-size: 1vw;
	background-color: #151618;
	font-weight: 600;
	letter-spacing: 0.1vw;
	border:2px solid #33363d;
	border-radius: 10px;
}


.download_btn_img{
	margin-left: 1vw;
	width: 1.5vw;
	margin-top: -0.2vw;
}

.download_btn_img_2{
	margin-left: 1vw;
	width: 1.5vw;
	margin-top: -0.2vw;
}


.toggle_btns{
	background-color: transparent;
	margin-right: 1.5rem;
}

.toggle_btns_img{
	width: 1.5rem;
	height: auto;
}

.nav-link{
	font-size: 1vw;
	padding-left: 3vw !important;
	padding-right: 1vw !important;
	color: #777e90 !important;
}



#banner_section{
  background-image: url("../images/background_1.webp") !important; 
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-top: -6.2vw;
  padding-top: 14vw;
  padding-bottom: 30vw;
  overflow-x: hidden;
  width: 100%;
  
/*  overflow-y: hidden;*/ 

}

#banner_section h1{
	color: #fff;
	font-family: 'poppins_extralight', serif;
	font-size: 3.8vw;
}

#banner_section span{
	font-family: 'poppins_semibold', serif;
}

#banner_section p{
    color: #777e90 !important;
    font-size: 1vw;
    margin-top: 1.2vw;
    line-height: 1.3vw;
}


.watch_video_btn{
	padding: 0.8vw 2vw !important;
	color: #fff;
	background-color: #151618;
	font-weight: 600;
	font-size: 1vw;
	letter-spacing: 0.1vw;
	border:2px solid #33363d;
	border-radius: 10px;
	margin-top: 2vw;
	margin-right: 0.2vw;
	background-image: url("../images/watch_video_bg.png") !important; 
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	float: right;
}

.show_me_how_btn{
	padding: 0.8vw 2vw !important;
	color: #fff;
	background-color: #151618;
	font-weight: 600;
	font-size: 1vw;
	letter-spacing: 0.1vw;
	border:2px solid #33363d;
	border-radius: 10px;
	margin-top: 2vw;
	margin-left: 0.2vw;
	float: left;
}






.scroll_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.chevron {
  position: absolute;
  width: 2.1rem;
  height: 0.48rem;
  opacity: 0;
  transform: scale(0.3);
  -webkit-animation: move-chevron 3s ease-out infinite;
          animation: move-chevron 3s ease-out infinite;
}

.chevron:first-child {
  -webkit-animation: move-chevron 3s ease-out 1s infinite;
          animation: move-chevron 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  -webkit-animation: move-chevron 3s ease-out 2s infinite;
          animation: move-chevron 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: #777e90;
}

.chevron:before {
  left: 0;
  transform: skewY(30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skewY(-30deg);
}

@-webkit-keyframes move-chevron {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    transform: translateY(4.8rem) scale(0.5);
  }
}

@keyframes move-chevron {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    transform: translateY(4.8rem) scale(0.5);
  }
}



.scroll_p{
	color: #777e90;
	letter-spacing: 0.2rem;
}


.hand_one{
	position: absolute;
	top: 48%;
	left: 14%;
	width: 14vw;
	height: auto;
	animation-name: example;
	animation-duration: 5s;
    animation-iteration-count: infinite;
}


@keyframes example {
  0%   {transform: rotate(-0deg);}
  50%  {transform: rotate(-6deg);}
  100% {transform: rotate(0deg);}
}



.hand_two{
	position: absolute;
	top: 42%;
	left: 1%;
	width: 9vw;
	height: auto;
	transform: rotate(20deg);
	animation-name: example_two;
	animation-duration: 4s;
    animation-iteration-count: infinite;
}


@keyframes example_two {
  0%   {transform: rotate(-20deg);}
  50%  {transform: rotate(-26deg);}
  100% {transform: rotate(-20deg);}
}


.hand_three{
	position: absolute;
	top: 95%;
	left: 18%;
	width: 7vw;
	height: auto;
	transform: rotate(-12deg);
	animation-name: example_three;
	animation-duration: 4s;
    animation-iteration-count: infinite;
}


@keyframes example_three {
  0%   {transform: rotate(-12deg);}
  50%  {transform: rotate(-18deg);}
  100% {transform: rotate(-12deg);}
}

.phone_one{
	position: absolute;
	right: 3%;
	top: 42%;
	width: 36vw;
	height: auto;
	z-index: 200;
	animation: move-up-down 7s ease-in-out 2s infinite;
}


.phone_two{
	position: absolute;
	right: 0%;
	top: 85%;
	width: 31vw;
	height: auto;
	z-index: 100;
	animation: move-up-down 8s ease-in-out 2s infinite;
}


.heart_one{
	position: absolute;
	right: 10%;
	top: 85%;
	width: 4vw;
	z-index: 300;

}

.heart_two{
	position: absolute;
	right: 26%;
	top: 140%;
	width: 2.5vw;
	z-index: 300;

}


.commentor_logo_one{
	position: absolute;
	right: 35%;
	top: 100%;
	width: 4vw;
	z-index: 300;


}

.commentor_logo_two{
	position: absolute;
	right: -1%;
	top: 105%;
	width: 5vw;
	z-index: 300;


}



@keyframes move-up-down {
    0% {
        -webkit-transform: translateX(0) translateY(5px);
        transform: translateX(0) translateY(5px)
    }
    50% {
        -webkit-transform: translateX(0) translateY(-8px);
        transform: translateX(0) translateY(-8px)
    }
    100% {
        -webkit-transform: translateX(0) translateY(5px);
        transform: translateX(0) translateY(5px)
    }
}


#second_section{
	background-image: url("../images/background_2.webp") !important; 
	background-color: #cccccc; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	padding-left: 10vw;
	padding-right: 10vw;
	padding-bottom: 8vw;
	margin-top: -0.2vw;
	overflow-x: hidden;
	width: 100%;
}



#second_section h1{

	color: #fff;
	font-family: 'poppins_semibold', serif;
	font-size: 4.4vw;

}

#second_section span{
   font-family: 'poppins_extralight', serif;
}


.line{

	border-top: 3px solid #9058ff;
	width: 6.5vw;
	margin-top: 1.6vw;
}


#second_section h2{
   font-size: 1.2vw;
   color: #fff;
   margin-top: 2vw;
   max-width: 42ch;
   line-height: 1.5vw;
}

#second_section p{
   font-size: 1vw;
   color: #777e90;
   max-width: 55ch;
}

.btn_div{
	display: flex;
	margin-top: 1.6rem;
}


.money_img{

	width: 30vw;
	margin-top: -1vw;
}



#third_section{
	background-image: url("../images/background_3.webp") !important; 
	background-color: #cccccc; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	margin-top: -0.2vw;
	padding-bottom: 5vw;
	overflow-x: hidden;
	width: 100%;
}


.circular_img{

	width: 60vw;
	margin-left: -2vw;
}


.third_section_div{
	padding-left: 4vw;
}


#third_section h1{

	color: #fff;
	font-family: 'poppins_semibold', serif;
	font-size: 4.4vw;
	margin-top: 17vw;

}

#third_section span{
   font-family: 'poppins_extralight', serif;
}


#third_section h2{
   font-size: 1.2vw;
   color: #fff;
   margin-top: 2vw;
   max-width: 42ch;
   line-height: 1.5vw;
}

#third_section p{
   font-size: 1vw;
   color: #777e90;
   max-width: 55ch;
}



#fourth_section{
	background-image: url("../images/background_4.webp") !important; 
	background-color: #cccccc; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	padding-left: 12vw;
	padding-right: 12vw;
	padding-top: 8vw;
	padding-bottom: 5vw;
	margin-top: -0.2vw;
	overflow-x: hidden;
	width: 100%;
}


#fourth_section h1{

	color: #fff;
	font-family: 'poppins_semibold', serif;
	font-size: 4.4vw;

}

#fourth_section span{
   font-family: 'poppins_extralight', serif;
}


#fourth_section h2{
   font-size: 1.2vw;
   color: #fff;
   margin-top: 2vw;
   max-width: 42ch;
   line-height: 1.5vw;
}

#fourth_section p{
   font-size: 1vw;
   color: #777e90;
   max-width: 55ch;
}

.girl_img{

	width: 30vw;
	margin-top: -12vw;
}


#fifth_section{
	background-image: url("../images/background_6.webp") !important; 
	background-color: #cccccc; /* Used if the image is unavailable */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	margin-top: -0.2vw;
	padding-top: 40vw;
	padding-bottom: 8vw;
	padding-left: 12vw;
	padding-right: 12vw;
	overflow-x: hidden;
	width: 100%;
}

.big_download_img{

	width: 5vw;
}


#fifth_section h1{
	color: #777e90 !important;
	font-family: 'poppins_thin', serif;
	font-size: 5vw;
	font-weight: 500;
	margin-top: 3vw;
}

.store_btn_row{
	margin-top: 3rem;
}

.store_btn_1{
	border:none;
	background-color: transparent;
	color: #fff;
	font-size: 1.6vw;
	padding-left: 3vw;
	padding-right: 3vw;
	float: right !important;
}


.store_btn_2{
	border:none;
	background-color: transparent;
	color: #fff;
	font-size: 1.6vw;
	padding-left: 3vw;
	padding-right: 3vw;
	float: left !important;
}

.store_btn_img{
	width: 2.4vw;
	margin-right: 1.5vw;
	margin-top: -0.5vw;
}


.divider{
	border-right: 6px solid #212225;
}


footer{

	background-color: #111214;
	padding-left: 12vw;
	padding-right: 12vw;
	padding-top: 5vw;
	padding-bottom: 5vw;
}

.scroll_p{
	color: #777e90;
	font-size: 1vw;
	margin-top: -0.5vw;
}

.scroll_left_div{
	width: 100%;
	border-top: 2px solid #777e90;
}

.scroll_right_div{
	width: 100%;
	border-top: 2px solid #777e90;
}

#scroll_to_top_row{
	margin-top: -5.1vw;
}


.footer_logo{
	width: 13vw;
	height: auto;
	
}



.newsletter_input{
	background-color: #111214;
	color: #fff;
	padding: 1rem;
	border : 2px solid #212225;
	height: 3rem;
	border-radius: 15px;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff !important;
  opacity: 1; /* Firefox */
  font-size: 1rem !important; 
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff !important;
  font-size: 1rem !important; 
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff !important;
  font-size: 1rem !important; 
}


.submit_btn{
	background-image: linear-gradient(to right, #ff7b66 , #ee0148);
	color:#fff;
	height: 2.8rem;
	border-radius: 10px;
	border:none;
}


.submit_btn_arrow{
	width: 1rem;
	margin-left: 0.5rem;
}


footer h1{
	color: #fff;
	font-size: 1vw;
}

.footer_links{
	color: #69707f !important;
	margin-top: 1.2vw !important;
	font-size: 1vw;
}

.social_media{
	margin-top: 1.2vw;
	width: 1.2vw;
	margin-right: 1vw;
}


.line2{

	border-top: 3px solid #9058ff;
	width: 2vw;
	margin-top: 1.6vw;
}

.footer_hr{
	border-top: 2px solid #22242a !important;
	margin-top: 5vw;
}

.end_p{
	color: #fff;
	font-size: 0.8vw;
	margin-right: 1vw;
	margin-top: 1vw;
}

.standing_girl{
	position: absolute;
	width: 12vw;
	top: -18%;
}




@media (max-width: 992px) {   /* SLIDING NAVBAR IN MOBILE VIEW */



    .navbar-collapse {
        position: fixed;
        top: 0px;
        left: 0;
        padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 75%;
        height: 100%;
        background-color: #151618;
    }

    .navbar-collapse.collapsing {
        left: -75%;
        transition: height 0s ease;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 300ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 500ms ease-in-out;
    }

}