@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,900;1,500&display=swap');

:root{
	--Blue-color: #7857fe; /*Blue*/
	--DG-color:  #272A33; /*Dark Grey*/
	--MD-color:  #6D758E; /*Mid Dark Grey*/
	--LG-color:  #A7B2D9;/*Light Grey*/
	--y-color: #F1B008; /*Yellow*/
	--main-color:  #ffffff;
	--color-1:  #e91e63;
	--color-2:  #f5ae63;
	--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);

}
*{
	margin: 0;
	padding: 0;
	outline: none!important;
}
img{
	max-width: 100%;
	vertical-align: middle;
}

ul{
	list-style: none;
}

.navbar{
	background-color: var(--y-color);
	opacity: .8;
	padding: 20px 0;
	transition: all 0.5s ease;

}
.navbar.navbar-shrink{
	box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
	background-color: var(--y-color);
	padding: 10px 0;
}

.navbar > .container{
	padding:0 15px;
}
.navbar .navbar-brand{
	font-size: 30px;
	color: #ffffff;
	font-weight: 500;
	text-transform: capitalize;
}
.navbar-toggler button{
	color: white;
	background-color: white;
}

.navbar .nav-item{
	margin-left:  40px;
}

.navbar .nav-item .nav-link{
color: #ffffff;
font-size: 16px;
text-transform: capitalize;
font-size: 400;
padding: 5px 0;
position: relative;
}

.navbar .nav-item .nav-link::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	right: 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);
}
body{
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	overflow: scroll;
	background-color: var(--MD-color);
	line-height: 1.5;
}
.section-padding{
	padding: 60px 0;
}
.section-title h2{
	font-size: 40px;
	color: var(--black-900);
	font-weight: 700;
	text-transform: capitalize;
	text-align: center;
}
.section-title h1{
	font-size: 40px;
	color: var(--main-color);
	font-weight: 700;
	text-transform: capitalize;
	text-align: center;
}
.section-title h2 span{
color: var(--y-color);
text-shadow: var(--black-100);
}
.section-title h1 span{
	color: var(--y-color);
	text-shadow: var(--black-100);
	}
/* Home Section*/
.home{
	min-height: 100vh;
	padding: 100px 0;
	background-color: var(--main-color);
	border-radius: 0 500px 0 500px;
}

.logo img{
	max-width: 110px;
	width: 100%;
	animation: bounceSide_01 4s ease infinite;
	/*margin-left: 15%;*/
	margin-top: 13%;
}

.logoContainer{
margin-left: 37%;
margin-right: 38%;
		margin-bottom: 20px;
}

.home-text h1{
	font-size: 45px;
	font-weight: 700;
	color: var(--DG-color);
	margin: 0 0 20px;
	opacity: .9;
}
.home-text .H2{
	padding: 20px 0 0 0 ;
	color: var(--y-color);
}
.home-text p{
	font-size: 16px;
	line-height: 24px;
	color: #272A33;
	font-style: italic;
	opacity: .8;
	margin: 0;
}

.home-btn img{
max-height: 75px;
}

.btn-1:focus{
	box-shadow: var(--shadow-black-300);
}
.btn-1:hover{
	color: #6D758E;
	background-color: var(--main-color);
}
.home .home-btn{
	margin-top: 40px;
}

.container-email{
text-align: center;
	color: white;
	float: right;
	position: relative;

}
.email-box{
	height: 40px;
	display: flex;
	justify-content: center;
}
.email-box i{
	background: #2f3542;
	width: 40px;
	line-height: 40px;
	padding: 0 10px;
	border-radius: 4px;
}

.inputEmail, .btn{
	border:  none;
	outline: none;
}
.inputEmail{
	width: 0px;
	transition: 0.6s;
}
.email-box:hover > .inputEmail, .inputEmail:focus{
	width: 260px;
	padding: 0 10px;
}

.btn{
	background: #2f3542;
	color: white;
	padding: 0 10px;
	text-transform: uppercase;
	cursor: pointer;
}

.img {
	height: 200;
}

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

@keyframes bounceTop_01{
	0%, 100%{
		transform: translateY(-20px);
	}
	50%{
		transform: translateY(0px);
	}
}

@keyframes bounceSide_01{
	0%, 100%{
		transform: scale(1.1);
	}
	50%{
		transform: scale(1);
	}
}

@keyframes pulse_01{
0%{
transform: scale(0.94);
box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
70%{
transform: scale(1);
box-shadow: 0 0 0 12px rgba(255,255,255,0);
}
100%{
transform: sclae(0,94);
box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
}

.home-img img{
	max-width: 250px;
	width: 100%;
	box-shadow: var(--shadow-black-100);
	border-radius: 25px;
	animation: bounceTop_01 3s ease infinite;
}

.home-img{
	position: relative;
	margin-top: 40px;
}

.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,0.4);
	border-radius: 50%;
	top: 30px;
	left: 30px;
	transform-origin: 170px 170px;
	animation: spin_01 10s linear infinite;
}

.feature-item{
	background-color: var(--black-000);
}

.features .feature-item{
	box-shadow: var(--shadow-black-100);
	margin: 15px;
	padding: 30px;
	border-radius: 10px;
	text-align: center;
}

.features .feature-item .icon{
	height: 100px;
	width: 100px;
	text-align: center;
	margin: 0 auto;
	color: #ffffff;
}
.features .feature-item img{
	max-width: 100px;
	max-height: 100px;
	min-height: 80px;
	stroke: var(--y-color);
}
.features .feature-item h3{
	font-size: 28px;
	margin: 0 0 10px;
	color: var(--black-900);
	font-weight: 500;
	text-transform: capitalize;
}
.features .feature-item h4{
	font-size: 18px;
	margin: 0 0 10px;
	color: var(--y-color);
	font-weight: 300;
	font-style: italic;
	text-transform: capitalize;
}
.features .feature-item p{
	font-size: 16px;
	line-height: 26px;
	font-weight: 300;
	color: var(--DG-color);
	margin: 0;
}

/* Fun Facts Section*/
.fun-facts{
	background-color: var(--DG-color);
}
.fun-facts .section-title{
	margin-bottom: 20px;
}
.fun-facts .section-title h2{
	text-align: left;
}
.fun-facts-img img{
	max-width: 250px;
	width: 100%;
	border-radius: 25px;
	box-shadow: var(--shadow-black-100);
	animation: bounceTop_01 3s ease infinite;
}
.fun-facts-text p{
	font-size: 16px;
	line-height: 26px;
	color: white;
	margin: 0 0 15px;
	font-weight: 300;
}
.fun-facts-items{
	padding: 30px 25px;
	text-align: center;
	box-shadow: var(--shadow-black-100);
	border-radius: 10px;
	margin-top: 30px;
}
.fun-facts-items h3{
	font-size: 30px;
	font-size: 700;
	color: var(--DG-color);
	margin: 0 0 8px;
}
.fun-facts-items span{
	font-size: 16px;
	text-transform: uppercase;
	font-size: 300;
	margin: 0;
	line-height: 26px;
	display: block;
	color: var(--MD-color);
}
.fun-facts-items.style-1{
background-color: var(--y-color);
}
.fun-facts-items.style-2{
background-color: var(--y-color);
}
.fun-facts-items.style-3{
background-color: var(--color-3);
}
.fun-facts-items.style-4{
background-color: var(--y-color);
}

.screenshot-item img{
	width: 100%;
	max-width: 250px;
	border-radius: 15px;
	margin-top: 40px;
}

.app-screenshots{
	background-color: var(--LG-color);
}
.app-screenshots h2{
color: var(--main-color);
}

.team{
	background-color: var(--y-color);
}

.team .section-title span{
color: #ffffff;
}

.team-item{
	padding: 15px;
	margin: 15px;
	border-radius: 10px;
	box-shadow: var(--shadow-black-100);
	background-color: #ffffff;
}

.team-item h3{
	font-size: 22px;
	color: var(--DG-color);
	font-weight: 500;
	margin: 15px 0 8px;
	text-transform: capitalize;
	text-align: center;
}

.team-item span{
	display: block;
	font-size: 16px;
	font-weight: 300;
	color: var(--black-400);
	text-transform: capitalize;
	text-align: center;
}

.team-item img{
	width: 100%;
	max-width: 220px;
	border-radius: 15px;
	margin-top: 10px;
}

.contact{
	background-color: #ffffff;
}

.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(--y-color);
text-align: center;
line-height: 38px;

}


.contact-info-item h3{
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 10px;
	color: var(--DG-color);
}

.contact-info-item p{
	font-size: 16px;
	font-weight: 300;
	margin: 0;
	line-height: 26px;
	color: var(--MG-color);
}

.contact-form .form-group{
	margin-bottom: 25px;
}

.contact-form .form-control{
height: 52px;
/*border: 1px solid ;*/
box-shadow: var(--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: 140px;
padding-top: 12px;
}

.contact-form .form-control:focus{
	border-color: var(--y-color);
}

/* Footer */

.footer{
	background-color: var(--MG-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,0.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,0.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: 5px;
}

.footer .copyright-text{
	margin: 50px 0 0;
	padding: 20px 0;
	text-align: center;
	font-size: 16px;
	color: rgba(255,255,255,0.9);
	font-weight: 300;
	border-top: 1px solid rgba(255,255,255,0.2);
}

@media(max-width: 991px){
	.navbar-toggler{
		background-color: var(--dark-to-main-color);
		box-shadow: var(--shadow-black-300);
		height: 34px;
		width: 44px;
		padding: 0;
		font-size: 17px;
		color: #ffffff;
	}
	.navbar-nav{
		background-color: var(--dark-to-main-color);
		box-shadow: var(--shadow-black-300);
	}
.navbar .nav-item{
	margin: 0;
	padding: 5px 15px;
}

.navbar.navbar-shrink .navbar-nav{
	background-color: var(--y-color);
}

}