body{
	font-family:"Nunito", sans-serif; 
	height: 100%;
	width: 100%; 
	margin: 0;
}  

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Pavanam&family=Quicksand:wght@300&display=swap');





/*styling for animation */
.loader{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
} 
.loads{
	height: 100px;
	width: 100px;
	opacity: 1;
	animation: opaque 2s; 
}

@keyframes opaque{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	} 
}

.main_show{
	opacity: 1;
	animation: opaque 3s;
}

 
/* styling for animation ends*/






















.resp_nav{
   	display: none;
}  
.navbar{
	height: 8vh;
	background: white;
}
.navbar img{
	height: 8vh;
	width: 9vh;
}
.navbar a{
	text-decoration: none;
	color: #262626;
	transition: 0.3s ease-in-out;	
}
.navbar-nav li>a:hover{
	background: none;
}
.navbar-right a:hover{
	color: #6600ff;
	transition: 0.3s ease-in-out;
}
.active a{
	color: #6600ff;
	font-weight: bold;
}





/* styling for landing page */

.landing{
	margin-top: 15vh;
}
.landing h1{ 
	font-size: 50px; 
	font-weight: bold;
	color: black;
}
.landing b{ 
	color: #6600ff;
} 
.landing h3{
	margin-bottom: 20px;	
}
.landing a{
	text-decoration: none;
	color: white;
	background: #6600ff;
	padding: 10px 30px;
	border-radius: 30px;
	font-size: 25px;
	box-shadow: 1px 2px 2px 1px;
	transition: 0.3s ease-in-out;
}
.landing a:hover{
	background: #262626;
	transition: 0.3s ease-in-out;
}
.landing a>span{
	margin-left: 20px;
}
.landing img{
	margin-top: 20px;
	border-radius: 10px;
}


/* Scroller styling */
 
.card h1{
	font-size: 30px; 
	width: 100%; 
}
.scroller {
  height: 1.2em;
  line-height: 1.2em;
  position: relative;
  overflow: hidden; 
  width: 100%;
  margin-top: 50px; 
}
.scroller > span {
  position: absolute;
  top: 0;
  animation: slide 5s infinite;
  font-weight: normal;
  color: #262626;
  
}
@keyframes slide {
  0% {
    top: 0;
  }
  25% {
    top: -1.2em;
  }
  50% {
    top: -2.4em;
  }
  75% {
    top: -1.2em;
  }
}















/* styling for about begins */

.about{
	margin-top: 15vh; 
	padding: 20px;
}
.about h1{
	font-weight: bold;
}
.about li{
	list-style: none;
	width: 50%;
	float: left;
	margin-top: 10px;
}
.about b{
	color: #6600ff;
}
.about h4{
	font-weight: bold;
} 
.about h4:after{
	width: 50px;
	height: 1px;
	background: #6600ff;
	content: "";
	display: block;
	margin-top: 5px;
	margin-bottom: 20px;
	border-radius: 2px;
	animation: expand 1s infinite;
}
  
@keyframes expand{
	0%,100%{
		width: 10px;
	}
	50%{
		width: 50px;
	} 

}

.about img{
	height: 60%;
	width: 60%;
}
.about h5{
	font-size: 18px;
	font-weight: bold;
	color: #6600ff;
} 
.brands{  
	margin-top: 20vh;
} 
 
.brands .col-xs-4{ 
	margin-bottom: 2vh;
}

/* styling for about section ends*/


















/* styling for pricing section begins*/

.pricing{
	margin-top: 8vh;
	opacity: 1;
	animation: opaque 2s;
}	
@keyframes opaque{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.pricing h1{
	font-weight: bold;  
}

.price-box{
	height: 600px;
	padding: 10px 20px; 
	border-radius: 10px;
	margin-top: 4vh;
}
.purple{
	border: 2px solid #6600ff;
}
.grey{
	border: 2px solid #e6e6e6;
}
.price-head{
	height: 20%;
}
.price-head h3{
	font-weight: bold;
}
.price{
	height: 25%;
}
.price h2{
	font-weight: bold;
	margin-top: -1.5vh;
	margin-bottom: 0.5vh;
}
.price p{
	color: #8c8c8c;
}
.price span{
	font-size: 9px;
}
.price b{
	font-weight: bold;	 
}
.features{
	height: 40%;
}
.features h5{
	font-weight: bold; 
	margin-top: 3vh;
}
.features li{
	list-style: none;
}
.features span{
	color: #6600ff;
	margin-right: 2vh;
} 
.get-pack a{
	text-decoration: none;
	padding: 10px 30px;
	border-radius: 30px;
	color: white;
	background: #6600ff;
	transition: 0.3s ease-in-out;
}
.get-pack a:hover{
	background: #262626;
	transition: 0.3s ease-in-out;
}   

.showMore{ 
	box-shadow: 1px 2px 2px 1px lightgrey;
	padding: 10px 30px;
	width: 100%; 
	cursor: pointer;
	border: none; 
	margin-top: 5vh; 
}
.showMore span{
	margin-left: 10px;
}

/*styling for pricing section ends*/



















/*styling for team section begins*/
.team{
	background: white;
	margin-top: 15vh;
	padding: 20px 0 50px; 
}
.team h1{
	font-weight: bold;
}
.team .role{
	text-align: center;
	margin-top: 5vh;
	width: 25%;
	float: left;
}

.team .role img{
	height: 50px;
	width: 100px;
	border: 1px solid #fafafa; 
	object-fit: cover;
	background: white;
}
.team h5{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 1vh;
	color: #262626;
}
.team span{
	 color: darkgrey;
}





















/*styling for contact page*/
.contact{
	padding-top: 15vh; 
	padding-bottom: 10vh; 
	background: #6600ff;
	color: white;
}
.contact h1{
	font-weight: bold; 
	margin-bottom: 5vh;
}
.contact h5{
	font-weight: bold;
}
.contact b{
	color: white;
} 
.contact li{
	list-style: none; 
	padding-right: 10px;
}
.info{
	margin-top: 5vh;
}
.contact-info{
	display: flex;
	padding: 10px;
	border: 1px solid white;
	border-radius: 10px;
} 
.contact-info span{
	color: white;
	margin-top: 10px;
}
.chat h4{
	margin-bottom: 5vh;
}
.chat a{
	background: white;
	padding: 10px 30px;
	border-radius: 30px;
	color: black;
	transition: 0.3s ease-in-out; 
	text-decoration: none; 
	font-size: 20px;
}
.chat a:hover{
	background: #262626;
	transition: 0.3s ease-in-out;
	color: white;
}  
.flex{
	margin-top: 3vh;
}
.fl-one{
	width: 49%;
	float: left;
} 
.fl-one a{
	color: white;
}
.fl-two{
	width: 49%;
	float: right;
}
.fl-two a{
	text-decoration: none;
	color: white;
}

/*styling for contact section ends*/







/*styling for footer begins*/
.footer{
	margin-top: 10vh;
	text-align: center;
	padding-bottom: 5vh; 
}  
.footer img{
	height: 60px;
	width: 60px;
}
.footer ul{
	border-bottom: 1px solid #e6e6e6;
	padding: 10px;
	margin-bottom: 10px;
}
.footer li{
	list-style: none;
	display: inline-block;
	margin: 0 10px;
}
.footer a{
	text-decoration: none;
	color: #6600ff;
}