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: #000000;
	padding: 10px 30px;
	border: 3px solid #000000;
	border-radius: 30px;
	font-size: 25px;
	box-shadow: 1px 2px 2px 1px;
	transition: 0.3s ease-in-out;
}
.landing a:hover{
	background: grey;
	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 h4{
	font-weight: bold;
}
.about img{

} 
.about h5{
	font-size: 18px;
	font-weight: bold;
	color: #6600ff;
} 
.brands{  
	margin-top: 5vh; 
} 
.brands h4{
	font-size: 20px;
	font-weight: bold;
}
.brands .col-sm-4{
	margin-top: 4vh;
}
.topics{
	height: 400px;
	border-radius: 25px;
	padding: 20px; 
	color: white;
}
.topics h4{
	font-size: 40px;
}
.plum{
	background: linear-gradient(to bottom right, #363636, #000000);
}
.navy{
	background: linear-gradient(to bottom right, #c78126, #735d41);
}
.velvet{
	background: linear-gradient(to bottom right, #eb172d, #2c0f12);
}
.emerald{
	background: linear-gradient(to bottom right, #9d0eb0, #2d1e2f);
}
.teal{
	background: linear-gradient(to bottom right, #415373, #141e30);
}
.topics div:nth-child(1){
	height:40%;
	width: 100%;
}
.topics div:nth-child(2){
	height:60%;
	width: 100%;
}
.topics img{
	height: 94%;
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
}
/*styling for about section ends*/
 
/* Animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.show {
  opacity: 1;
  transform: translateY(0);
}





.pricing{
	background: #fcfcfc;
	padding: 40px;
}
.pricing h1{
	font-weight: bold;
	margin-bottom: 5vh;
}
.price{
	margin-left: auto;
	margin-right: auto;
	width: 25%;
	border-radius: 20px;
	background: white;
	box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff; 
	padding: 15px;
}
.price-box{ 
	width: 100%;
	padding: 15px;
	border-radius: 20px;
	background: linear-gradient(to bottom right, #fcfcfc, #f5f5f5);
}
.price-box h2{
	font-weight: bold;
}
.price-info{ 
}
.price button{
	padding: 10px 30px;
	font-size: 15px;
	width: 100%;
	background: black;
	border-radius: 30px; 
	border: 3px solid #000000;
	transition: 0.3s ease-in-out;
}
.price button:hover{
	background: gray;
	transition: 0.3s ease-in-out;
}
.price a{
	text-decoration: none;
	color: white;
}
.price-info li{
	list-style: none;
	margin-top: 2vh;
}  
.price-info span{
	color: lightgrey;
	margin-right: 1vh;
}

.instructor{
	margin-top: 4vh;
}
.instructor h1{
	font-size: 150px;
	font-weight: bold;
	position: absolute;
	z-index: -2000;
}
.instructor img{
	height: 450px;
	width: 500px;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	z-index: 1000;
	margin-top: 30vh;
} 
.instructor li{
	list-style: none;
	margin-top: 5vh;
}
.instructor h4,h3{
	font-weight: bold;
}







/*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: grey;
	font-size: 25px;
	transition: 0.3s ease-in-out;
}
.footer a:hover{
	color: black;
	transition: 0.3s ease-in-out;
}