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

/*--------------
 Global CSS
----------------*/
:root {
	--main-color: #7857fe;
	--color-1: #e91e63;
	--color-2: #f5ae10;
	--color-3: #09d69c;
	--bg-dark: #2b2c2f;
	--main-to-dark-color: var(--main-color);
	--dark-to-main-color: var(--bg-dark);
	--shadow-black-100: 0 5px 15px rgba(0,0,0,0.1);
	--shadow-black-300: 0 5px 15px rgba(0,0,0,0.3);
	--black-900: #000000;
	--black-400: #555555;
	--black-100: #f7f7f7;
	--black-000: #ffffff;
	--black-alpha-100: rgba(0,0,0,0.05);
}
body {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	overflow-x: hidden;
	background-color: white;
	line-height: 1.5;
}
body.dark{
	background-color: var(--bg-dark);
	--black-100: #2a2a2f;
	--black-000: var(--bg-dark);
	--main-to-dark-color: var(--bg-dark);
	--dark-to-main-color: var(--main-color);
	--shadow-black-100: var(--shadow-black-300);
	--black-alpha-100: rgba(255,255,255,0.05);
	--black-900: #ffffff;
	--black-400: #bbbbbb;
}
*{
	margin: 0;
	padding: 0;
	outline: none!important;
}

/*-------------------
 Global UI
---------------------*/
 img{
	max-width: 100%;
	vertical-align: middle;
 }
 ul{
	list-style: none;
 }
 .btn-1{
	background-color: #ffffff;
	padding: 12px 30px;
	border: none;
	border-radius: 30px;
	color: var(--main-color);
	font-size: 16px;
	text-transform: capitalize;
	transition: all 0.5s ease;
	box-shadow: var(--shadow-black-300);
	font-weight: 500;
 }
 .btn-1:focus{
	box-shadow: var(--shadow-black-300);
 }
 .btn-1:hover{
	color: white;
	background-color: var(--main-color);
 }
 .btn-2{
	background-color: var(--main-color);
	padding: 12px 30px;
	border: none;
	border-radius: 30px;
	color: #ffffff;
	font-size: 16px;
	text-transform: capitalize;
	transition: all 0.5s ease;
	box-shadow: var(--shadow-black-100);
	font-weight: 500;
 }
 .btn-2:focus{
	box-shadow: var(--shadow-black-100);
 }
 .btn-2:hover{
	color: var(--main-color);
	background-color: #ffffff;
 }

/*------------------------
 Animation Section
--------------------------*/
 @keyframes spin_01 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
 }
 @keyframes bounceTop_01 {
	0%,100% { transform: translateY(-30px); }
	50% { transform: translateY(0px); }	
 }
 @keyframes pulse_01 {
	0% {
		transform: scale(0.94);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
	 }
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
	}
	100% {
		transform: scale(0.94);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
 }
 @keyframes spin {
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
 }

/*---------------------
 Global Efect
-----------------------*/
 .effect-wrap .effect{
	position: absolute;
	z-index: 1;
 }
 .effect-wrap .effect-1{
	top: 20%;
	left: 20%;
	font-size: 20px;
	color: var(--color-2);
	animation: spin_01 5s linear infinite;
 }
 .effect-wrap .effect-2{
	top: 10%;
	right: 5%;
	font-size: 25px;
	color: rgba(255, 255, 255, 0.5);
	animation: spin_01 7s linear infinite;
 }
 .effect-wrap .effect-3{
	bottom: 30%;
	left: 5%;
	font-size: 25px;
	color: var(--color-3);
	animation: bounceTop_01 3s linear infinite;
 }

/*--------------------
 Section Global
---------------------*/
 .section-padding{
	padding: 80px 0;
 }
 .section-title {
	margin-bottom: 60px;
 }
 .section-title h2 {
	font-size: 40px;
	color: var(--black-900);
	font-weight: 700;
 	text-transform: capitalize;
 	text-align: center;
 	margin: 0;
 }
 .section-title h2 span {
	color: var(--main-color);
 }

/*---------------------
 Owl Carousel
-----------------------*/
 .owl-carousel .owl-dots {
	padding: 0 15px;
	text-align: center;
	margin-top: 20px;
 }
 .owl-carousel button.owl-dot{
	height: 6px;
	width: 24px;
	background-color: #dddddd;
	display: inline-block;
	margin: 0 4px;
	border-radius: 5px;
 }
 .owl-carousel button.owl-dot.active {
	background-color: var(--main-color);
 }

/*-----------------
 Preloader Section
-------------------*//*
 .preloader{
 	position: fixed;
 	left: 0;
 	top: 0;
 	height: 100%;
 	width: 100%;
 	z-index: 2100;
 	background-color: var(--main-to-dark-color);
 }
 .preloader div {
 	display: block;
 	position: relative;
 	left: 50%;
 	top: 50%;
 	height: 150px;
 	width: 150px;
 	margin: -75px 0 0 -75px;
 	border-radius: 50%;
 	border: 3px solid transparent;
 	border-top-color: #ffffff;
 	border-radius: 50%;
 	animation: spin 2s linear infinite;
 }
 .preloader div::before{
 	content: '';
 	position: absolute;
 	top: 5px;
 	left: 5px;
 	right: 5px;
 	bottom: 5px;
 	border: 3px solid transparent;
 	border-radius: 50%;
 	border-top-color: var(--color-1);
 	animation: spin 3s linear infinite;
 }
 .preloader div::after{
 	content: '';
 	position: absolute;
 	top: 15px;
 	left: 15px;
 	right: 15px;
 	bottom: 15px;
 	border: 3px solid transparent;
 	border-radius: 50%;
 	border-top-color: var(--color-3);
 	animation: spin 1.5s linear infinite;
 }

/*-----------------
 Navbar Section
-------------------*/
 .navbar{
	background-color: transparent;
	padding: 20px 0;
	transition: all 0.5s  ease;
 }
 .navbar.navbar-shrink {
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
	background-color: var(--main-to-dark-color);
	padding: 10px 0;
 }
 .navbar > .container{
	padding: 0 15px;
 }

 .navbar .navbar-brand {
	font-size: 30px;
	color: #ffffff;
	font-weight: 500;
	text-transform: capitalize;
 }
 .navbar .nav-item{
	margin-left: 40px;
 }
 .navbar .nav-item .nav-link{
	font-size: 16px;
	color: #ffffff;
	text-transform: capitalize;
	font-weight: 400;
	padding: 5px 0;
	position: relative;
 }
 .navbar .nav-item .nav-link::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #ffffff;
	transition: all 0.5s ease;
	transform: scale(0);
 }
 .navbar .nav-item .nav-link.active::before,
 .navbar .nav-item .nav-link:hover::before {
	transform: scale(1);
 }

/*-----------------
 Home Section
-------------------*/
 .home {
 	min-height: 100vh;
 	padding: 150px 0;
 	background-color: var(--main-to-dark-color);
 	border-radius: 0 0 200px 0;
 	position: relative;
 	z-index: 1;
 	overflow-x: hidden; 
 }
 .home-text {

 }
 .home-text h1{
 	font-size: 45px;
 	font-weight: 700;
 	margin: 0 0 20px;
 	color: #ffffff;
 }
 .home-text p{
 	font-size: 18px;
 	line-height: 28px;
 	color: #Ffffff;
 	font-weight: 300;
 }
 .home .home-btn {
 	margin-top: 40px;
 }
  .home .home-btn .video-paly-btn {
  	margin-left: 30px;
  	height: 50px;
  	width: 50px;
  	padding: 0;
  	font-size: 16px;
  	animation: pulse_01 2s ease infinite;
  }
 .home .home-btn .video-paly-btn:hover{
 	animation: none;
 	box-shadow: var(--shadow-black-300);
 }
 .home .home-btn .video-paly-btn i {
 	line-height: 50px;
  }
 .home-img img {
 	max-width: 250px;
 	width: 100%;
 	box-shadow: var(--shadow-black-100);
 	border-radius: 18px;
 	animation: bounceTop_01 3s ease infinite;
 }
 .home-img {
 	position: relative;
 }
 .home-img .circle {
 	position: absolute;
 	z-index: 1;
 	height: 400px;
 	width: 400px;
 	border: 1px solid rgba(255, 255, 255, 0.2);
 	border-radius: 50%;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }
 .home-img .circle::before {
 	content: '';
 	position: absolute;
 	height: 60px;
 	width: 60px;
 	background-color: rgba(255, 255, 255, .4);
 	border-radius: 50%;
 	left: 30px;
 	top: 30px;
 	transform-origin: 170px 170px;
 	animation: spin_01 10s linear infinite;
 }

/*-----------------
 Popup Section
-------------------*/
 .video-popup {
	padding: 30px;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1999;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
 }
 .video-popup.open {
	opacity: 1;
	visibility: visible;
 }
 .video-popup-inner {
	width: 100%;
	max-width: 900px;
	position: relative;
 }
 .video-popup .video-popup-close {
	position: absolute;
	right: 0;
	top: -30px;
	height: 30px;
	width: 30px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	color: #ffffff;
 }
 .video-popup .iframe-box {
	height: 0;
	overflow: hidden;
	 padding-top: 56.25%;
 }
 .video-popup #play-1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
 }

/*-----------------
 Featurse Section
-------------------*/
 .features .feature-item {
 	box-shadow: var(--shadow-black-100);
 	margin: 15px;
 	padding: 30px;
 	border-radius: 10px;
 	text-align: center;
 	position: relative;
 	z-index: 1;
 	overflow: hidden;
 }
 .features .feature-item::before,
 .features .feature-item::after{
 	content: '';
 	position: absolute;
 	z-index: -1;
 	border-radius: 50%;
 	transition: all 0.5s ease;
 	opacity: 0;
 }
 .features .feature-item::before{
 	height: 20px;
 	width: 20px;
 	background-color: var(--color-1);
 	left: -20px;
 	top: 40%;
 }
 .features .feature-item:hover::before{
 	left: 10px;
 	opacity: 1;
 }
 .features .feature-item::after{
 	height: 30px;
 	width: 30px;
 	background-color: var(--color-2);
 	right: -30px;
 	top: 80%;
 }
 .features .feature-item:hover::after{
 	opacity: 1;
 	right: -15px;
 }
 .features .feature-item .icon {
 	height: 60px;
 	width: 60px;
 	margin: 0 auto 30px;
 	text-align: center;
 	font-size: 30px;
 	color: var(--main-color);
 	position: relative;
 	z-index: 1;
 	transition: all .5s ease;
 }
 .features .feature-item .icon::before{
 	content: '';
 	position: absolute;
 	left: 100%;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	background-color: var(--main-color);
 	transition: all .5s ease;
 	z-index: -1;
 	opacity: 0;
 }
 .features .feature-item:hover .icon{
 	color: #ffffff;
 	font-size: 20px;
 }
 .features .feature-item:hover .icon::before {
 	left: 0;
 	border-radius: 50%;
 	opacity: 1;
 }
 .features .feature-item .icon i{
 	line-height: 60px;
 }
 .features .feature-item h3{
 	font-size: 22px;
 	margin: 0 0 20px;
 	color: var(--black-900);
 	font-weight: 500;
 	text-transform: capitalize;
 }
 .features .feature-item p{
 	font-size: 16px;
 	line-height: 26px;
 	font-weight: 300;
 	color: var(--black-400);
 	margin: 0 0 15px;
 }

/*------------------
 Fun Facts Section
--------------------*/
 .fun-facts{
 	background-color: var(--black-100);

 }
 .fun-facts .section-title {
 	margin-bottom: 20px;
 }
 .fun-facts .section-title h3 {
 	text-align: left;
 }
 .fun-facts-img img {
 	max-width: 250px;
 	width: 100%;
 	box-shadow: var(--shadow-black-100);
 	border-radius: 18px;
 	animation: bounceTop_01 3s ease infinite;
 }
 .fun-facs-text p {
 	font-size: 16px;
 	line-height: 26px;
 	color: var(--black-400);
 	margin: 0 0 15px;
 	font-weight: 300;
 }
 .fun-fact-item{
 	padding: 40px 30px;
 	text-align: center;
 	box-shadow: var(--shadow-black-100);
 	border-radius: 10px;
 	margin-top: 30px;
 	transition: all 0.5s ease;
 }
 .fun-fact-item:hover{
 	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
 }
 .fun-fact-item h3{
 	font-size: 40px;
 	font-weight: 700;
 	color: #ffffff;
 	margin: 0 0 5px;
 }
 .fun-fact-item  span{
 	font-size: 16px;
 	text-transform: uppercase;
 	font-weight: 300;
 	margin: 0;
 	line-height: 26px;
 	display: block;
 	color: #ffffff;
 }
 .fun-fact-item.style-1 {
 	background-color: var(--color-1);
 }
 .fun-fact-item.style-2 {
 	background-color: var(--color-2);
 }
 .fun-fact-item.style-3 {
 	background-color: var(--color-3);
 }
 .fun-fact-item.style-4 {
 	background-color: var(--main-color);
 }

 /*-------------------
  App Screenshots
  --------------------*/

/*---------------------
 App Screenshots Section
-----------------------*/
 .screenshot-item {
 	margin: 15px;
 }
 .screenshot-item img{
 	width: 100%;
 	max-width: 250px;
    border-radius: 20px;
 	display: block;
 	margin: auto;
 }

/*---------------------
 App Download Section
-----------------------*/
 .app-download{
 	background-image: url('../img/download-app-bg.jpg');
 	background-position: center top;
 	background-attachment: fixed;
 	background-repeat: no-repeat;
 	position: relative;
 	z-index: 1;
 }
 .app-download .section-title h2{
 	color: #ffffff;
 }
 .app-download .info-text p{
 	color: #fff;
 }
 .app-download::before{
 	content: '';
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	z-index: -1;
 	background-color: var(--main-to-dark-color);
 	opacity: 0.4;
 }
 .app-download-item{
 	background-color: var(--black-000);
 	padding: 30px;
 	text-align: center;
 	border-radius: 10px;
 	box-shadow: var(--shadow-black-100);
 }
 .app-download-item i{
 	font-size: 30px;
 	color: var(--main-color);
 	display: inline-block;
 }
 .app-download-item i svg{
 	width: 55px;
 	fill: var(--main-color);
 	display: inline-block;
 }
 .app-download-item i svg path:nth-child(2){
 	fill: var(--black-000);
 }
 .app-download-item h3{
 	font-size: 22px;
 	color: var(--black-900);
 	margin: 20px 0;
 	font-weight: 500;
 	text-transform: capitalize;
 }
 .app-download-item p{
 	font-size: 16px;
 	color: var(--black-400);
 	font-weight: 300;
 	margin: 0 0 30px;
 	line-height: 26px;
 }

/*----------------------
 How It Works Section
------------------------*/
 .how-it-works-item{
 	padding: 30px;
 	text-align: center;
 	position: relative;
 	z-index: 1;
 }
 .how-it-works-item.line-right::before{
 	content: '';
 	position: absolute;
 	height: 2px;
 	width: 100%;
 	left: 50%;
 	top: 60px;
 	background-color: var(--main-color);
 	z-index: -1;
 }
 .how-it-works-item .step{
 	display: inline-block;
 	height: 60px;
 	width: 60px;
 	background-color: var(--main-color);
 	font-size: 30px;
 	text-align: center;
 	line-height: 60px;
 	border-radius: 50%;
 	color: #ffffff;
 	font-weight: 500;
 	margin: 0 0 15px;
 }
 .how-it-works-item h3{
 	margin: 20px 0;
 	font-size: 22px;
 	font-weight: 500;
 	color: var(--black-900);
 	text-transform: capitalize;
 }
 .how-it-works-item p{
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
 	color: var(--black-400);
 	line-height: 26px;
 }

/*-----------------------
 Beta-testers Section
-------------------------*/
 .beta-testers{
 	background-color: var(--black-100);
 }
 .beta-tester-item{
 	margin: 15px;
 	padding: 30px;
 	box-shadow: var(--shadow-black-100);
 	border-radius: 10px;
 	text-align: center; 
 }
 .beta-tester-item .img-box{
 	height: 100px;
 	width: 100px;
 	display: inline-block;
 	margin-bottom: 30px;
 	border: 4px solid var(--main-color);
 	border-radius: 50%;
 	position: relative;
 }
 .beta-tester-item .img-box img{
 	border-radius: 50%;
 	width: 100%;

 }
 .beta-tester-item .img-box i{
 	position: absolute;
 	height: 30px;
 	width: 30px;
 	background-color: var(--main-color);
 	border-radius: 50%;
 	color: #ffffff;
 	font-size: 12px;
 	line-height: 30px;
 	text-align: center;
 	left: calc(100% - 15px);
 	top: calc(50% - 15px);
 }
 .beta-tester-item p{
 	font-size: 16px;
 	margin: 0 0 20px;
 	color: var(--black-400);
 	line-height: 26px;
 	font-weight: 300;
 }
 .beta-tester-item h3{
 	font-size: 18px;
 	color: var(--black-900);
 	font-weight: 500;
 	margin: 0 0 5px;
 	text-transform: capitalize;
 }
 .beta-tester-item span{
 	display: block;
 	font-size: 16px;
 	color: var(--black-400);
 	font-weight: 300;
 }
 .beta-tester-item .rating{
 	margin-top: 10px;
 }
 .beta-tester-item .rating i{
 	display: inline-block;
 	font-size: 16px;
 	color: var(--color-2);
 }

/*----------------------
 Pricing Section
------------------------*/
 .pricing-plan{
 	box-shadow: var(--shadow-black-100);
 	border-radius: 10px;
 }
 .pricing-plan .pricing-header{
 	padding: 20px 30px;
 	border-bottom: 1px solid var(--black-alpha-100);
 }
 .pricing-plan .pricing-header h3{
 	text-align: center;
 	font-size: 30px;
 	color: var(--black-900);
 	font-weight: 500;
 	text-transform: capitalize;
 	margin: 0;
 }
  .pricing-plan .pricing-price{
 	padding: 40px 30px;
 	display: flex;
 	justify-content: center;
 	line-height: 0.7;
 }
 .pricing-plan .pricing-price .curency{
 	font-size: 16px;
 	font-weight: 300;
 	color: var(--black-400);
 	margin-right: 5px;
 	align-self: flex-start;
 }
 .pricing-plan .pricing-price .price{
 	font-size: 80px;
 	font-weight: 700;
 	color: var(--main-color);
 }
 .pricing-plan .pricing-price .period{
 	font-size: 14px;
 	font-weight: 300;
 	color: var(--black-400);
 	margin-right: 5px;
 	align-self: flex-end;
 	text-transform: uppercase;
 }
 .pricing-plan .pricing-body{
 	padding: 0 30px;
 }
 .pricing-plan .pricing-body ul li{
 	font-size: 16px;
 	font-weight: 300;
 	color: var(--black-400);
 	padding: 10px 0 10px 30px;
 	border-bottom: 1px solid var(--black-alpha-100);
 	line-height: 26px;
 	position: relative;
 }
 .pricing-plan .pricing-body ul li:last-child{
 	border-bottom: none;
 }
 .pricing-plan .pricing-body ul li i:not(.uncheck){
 	color: var(--main-color);
 	padding: 10px 0;
 	position: absolute;
 	left: 0;
 	top: 6px;
 }
 .pricing-plan .pricing-body ul li .uncheck{
 	color: #ff0000;
 	padding: 10px 0;
 	transform: rotate(45deg);
 	position: absolute;
 	left: 0;
 	top: 6px;
 }
 .pricing-plan .pricing-footer{
 	padding: 30px 30px 30px;
 	text-align: center;
 }

/*----------------------- 
 Team Section
-------------------------*/
 .team{
 	background-color: var(--black-100);
 }
 .team .team-item {
 	box-shadow: var(--shadow-black-100);
 	margin: 15px;
 	padding: 30px;
 	border-radius: 10px;
 	text-align: center;
 	position: relative;
 	z-index: 1;
 	overflow: hidden;
 }
 .team .team-item::before,
 .team .team-item::after{
 	content: '';
 	position: absolute;
 	z-index: -1;
 	border-radius: 50%;
 	transition: all 0.5s ease;
 	opacity: 0;
 }
 .team .team-item::before{
 	height: 20px;
 	width: 20px;
 	background-color: var(--color-1);
 	left: -20px;
 	top: 30%;
 }
 .team .team-item:hover::before{
 	left: 10px;
 	background-color: var(--color-1);
 	opacity: 1;
 }
 .team .team-item::after{
 	height: 30px;
 	width: 30px;
 	background-color: var(--color-3);
 	right: -30px;
 	top: 80%;
 }
 .team .team-item:hover::after{
 	opacity: 1;
 	right: -15px;
 }
 .team-item img {
 	border-radius: 6px;
 	max-width: 200px;
 	box-shadow: var(--shadow-black-100);
 	transition: all 0.5s ease;

 }
 .team-item img:hover{
 	box-shadow: var(--shadow-black-300);
 }
 .team-item h3 {
 	font-size: 18px;
 	color: var(--main-color);
 	font-weight: 500;
 	margin: 15px 0 5px;
 	text-transform: capitalize;
 	border-radius: 20px;
 	transition: all .5s ease;
 }
 .team-item h3:hover{
 	box-shadow: 0 0 4px #16c400;
 }
 .team-item p {
 	display: block;
 	font-size: 16px;
 	font-weight: 300;
 	color: var(--black-400);
 	text-transform: capitalize;
 }
 .team-item p span:nth-child(1):hover{
 	color: var(--main-color);
 }
 .team-item p span:nth-child(3):hover{
 	color: var(--color-1);
 }
 .team-item p span:nth-child(5):hover{
 	color: var(--color-2);
 }
 .team-item p span:nth-child(6):hover{
 	color: var(--color-3);
 }

/*-----------------------
 FAQ Section
-------------------------*/
 .faq .accordion-item:not(.last-child){
 	margin-bottom: 20px;
 }
 .faq .accordion-header{
 	box-shadow: var(--shadow-black-100);
 	padding: 20px 50px 20px 30px;
 	transition: all 0.5s ease;
 	cursor: pointer;
 	position: relative;
 }
 .faq .accordion-header::before{
 	content: "\f067";
 	font-family: 'Font Awesome 5 Free';
 	font-weight: 900;
 	position: absolute;
 	height: 30px;
 	width: 30px;
 	right: 10px;
 	top: 50%;
 	transform: translateY(-50%);
 	font-size: 16px;
 	text-align: center;
 	line-height: 30px;
 	color: var(--black-400);
 	transition: all 0.5s ease;
 }
 .faq .accordion-header:not(.collapsed)::before{
 	content: "\f068";
 	color: #ffffff;
 }
 .faq .accordion-header:not(.collapsed){
 	background-color: var(--main-color);
 	box-shadow: none;
 }
 .faq .accordion-header h3{
 	font-size: 18px;
 	font-weight: 500;
 	color: var(--black-400);
 	margin: 0;
 	transition: all 0.5s ease;
 }
 .faq .accordion-header:not(.collapsed) h3 {
 	color: #ffffff;
 }
 .faq .accordion-body{
 	padding: 20px 30px;
 	background-color: var(--black-100);
 }
 .faq .accordion-body p{
 	font-weight: 300;
 	font-size: 16px;
 	color: var(--black-400);
 	line-height: 26px;
 	margin: 0;
 }

/*----------------------
 Contact Section
------------------------*/
 .contact{
 	background-color: var(--black-100);
 }
 .contact-info h3{
 	font-size: 22px;
 	color: var(--black-900);
 	font-weight: 500;
 	margin: 0 0 40px;
 }
 .contact-info-item{
 	position: relative;
 	padding-left: 55px;
 	margin-bottom: 30px;
 }
 .contact-info-item i{
 	position: absolute;
 	height: 40px;
 	width: 40px;
 	left: 0;
 	top: 0;
 	border-radius: 50%;
 	font-size: 16px;
 	color: var(--main-color);
 	border: 1px solid var(--main-color);
 	text-align: center;
 	line-height: 38px;
 }
 .contact-info-item h4{
 	font-size: 18px;
 	font-weight: 400;
 	margin: 0 0 10px;
 	color: var(--black-900);
 }
 .contact-info-item p{
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
 	line-height: 26px;
 	color: var(--black-400);
 }
 .contact-info-item p a{
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
 	line-height: 26px;
 	color: var(--black-400);
 	text-decoration: none;
 }
 .contact-form .form-group {
 	margin-bottom: 25px;
 }
 .contact-form .form-control {
 	height: 52px;
 	border: 2px solid transparent;
 	box-shadow: var(--shadow-black-100);
 	border-radius: 10px;
 	padding: 0 24px;
 	color: var(--black-900);
 	background-color: var(--black-000);
 	transition: all 0.5s ease;
 }

 .contact-form textarea.form-control {
 	height: 120px;
 	padding-top: 12px;
 	resize: none;
 }
 .contact-form .form-control:focus{
 	border-color: var(--main-color);
 }

/*----------------------
 Footer Section
------------------------*/
 .footer{
 	background-color: var(--main-to-dark-color);
 	padding: 50px 0 0;
 }
 .footer-col h3{
 	font-size: 18px;
 	font-weight: 500;
 	color: #ffffff;
 	margin: 0 0 25px;
 	text-transform: capitalize;
 }
 .footer-col p{
 	font-size: 16px;
 	color: rgba(255, 255, 255, .9);
 	font-weight: 300;
 	line-height: 26px;
 	margin: 0;
 }
 .footer-col ul{
 	margin: 0;
 }
 .footer-col ul li:not(:last-child){
 	margin-bottom: 10px;
 }
 .footer-col ul li a{
 	font-size: 16px;
 	color: rgba(255, 255, 255, .9);
 	font-weight: 300;
 	display: block;
 	text-transform: capitalize;
 	transition: all 0.5s ease;
 	text-decoration: none;
 }
 .footer-col ul li a:hover{
 	padding-left: 6px;
 }
 .footer .copyright-text{
 	padding: 20px 0;
 	text-align: center;
 	font-size: 16px;
 	color: rgba(255, 255, 255, .9);
 	font-weight: 300;
 	margin: 50px 0 0;
 	border-top: 1px solid rgba(255, 255, 255, .2);
 }

/*-----------------------
 Toggle Theme - light and dark
------------------------*/
 .toggle-theme{
	position: fixed;
	right: 0;
	top: calc(50% - 20px);
	height: 40px;
	width: 40px;
	background-color: var(--dark-to-main-color);
	z-index: 1200;
	color: #ffffff;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: var(--shadow-black-300);
	font-size: 16px;
	text-align: center;
 }
 .toggle-theme i {
	line-height: 40px;
 }

/*----------------------
 Responsive Section
------------------------*/
 @media (max-width: 991px) {
 	.navbar-toggler{
 		background-color: var(--main-to-dark-color);
 		box-shadow: var(--shadow-black-300);
 		height: 34px;
 		width: 44px;
 		padding: 0;
 		font-size: 17px;
 		color: #ffffff;
 	}
 	.navbar-nav{
 		background-color: var(--main-to-dark-color);
 		box-shadow: var(--shadow-black-300);
 	}
 	.navbar .nav-item{
 		margin: 0;
 		padding: 5px 15px;
 	}
 	.navbar.navbar-shrink .navbar-toggler,
 	.navbar.navbar-shrink .navbar-nav{
 		background-color: var(--main-to-dark-color);
 	}
 	.home-img .circle {
 		height: 320px;
 		width: 320px;
 	}
 	.home-img .circle::before{
 		left: 18px;
 		top: 18px;
 		transform-origin: 142px 142px;
 	}
 	.home-text h1{
 		font-size: 40px;
 	}
 	.pricing-plan,
 	.how-it-works-item,
 	.app-download-item{
 		margin-bottom: 30px;
 	}
 	.how-it-works-item.line-right::before{
 		content: none;
 	}
 	.how-it-works-item{
 		box-shadow: var(--shadow-black-100);
 		border-radius: 10px;
 	}
 	.footer-col{
		margin-bottom: 30px;
	}
 }
 @media (max-width: 767px){
	.home-text{
		margin-bottom: 80px;
	}
	.fun-facts-img {
		margin-bottom: 30px;
	}
	.contact-form{
		margin-top: 20px;
	}
	.section-title h2{
		font-size: 35px;
	}
	.fun-facts .section-title h2{
		text-align: center;
	}
 }
 @media (max-width: 575px){
 	.home-text h1{
 		font-size: 30px;
 	}
 	.home-text p{
 		font-size: 16px;
 	}
 	.section-title h2{
		font-size: 30px;
	}
 }