body{
	font-family:"Nunito", sans-serif; 
	height: 100%;
	width: 100%; 
	margin: 0;
	background: #f2f2f2;
}  

@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: rgba(255, 255, 255, 0);
	backdrop-filter: blur(10px);
}
.navbar img{
	height: 6vh;
	width: 18vh;
	margin-top: 1vh;
}
.navbar a{
	margin-top: 1vh;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	transition: 0.3s ease-in-out;	
}
.navbar-nav li>a:hover{
	background: none;
}
.navbar-right a:hover{
	color: #f2f2f2;
	transition: 0.3s ease-in-out;
}
.navbar .btn{
	margin-top: 10px;
	background: #000000;
	padding: 10px 20px;
	border-radius: 30px;
	color: white;
	border: none;
}
.navbar .btn:hover{
	background: #262626;
}



/* styling for landing page */

.landing{
	margin-top: 0vh;
	height: 100vh;
	background: linear-gradient(to right, rgba(106, 90, 205, 1.0),rgba(130, 175, 210, 1.0));
	background-position: center;
	background-size: cover;
	color: white;
}
.land-text{
	margin-top: 25vh;
}
.landing p{
	font-size: 20px;
	width: 50%;
}
.landing h1{ 
	font-size: 65px; 
	font-weight: bold;
}
.landing a{
	text-decoration: none;
	color: white;
	background: #000000;
	padding: 10px 30px;
	border-radius: 30px;
	font-size: 15px;
	transition: 0.3s ease-in-out;
	margin-top: 5vh;
}
.landing a:hover{
	background: #262626;
	transition: 0.3s ease-in-out;
}  

.rowdan{
	width: 80%;
	margin-left: auto;
	margin-right: auto; 
}
.rowdan div{
	width: 25%;
	float: left;
}
 














/* styling for about begins */

.about{ 
	padding: 20px;
	padding-bottom: 10vh; 
}
.about h1{
	font-weight: bold;
	margin-top: 10vh; 
} 
.about p{
	font-size: 20px; 
}
.brands{  
	margin-top: 5vh; 
} 
.brands .col-sm-4{
	margin-top: 4vh;
}
.topics{ 
	border-radius: 25px;
	border: 2px solid lightgrey; 
	padding: 20px;
	height: 180px;
	text-align: center;
}
.topics h4{
	font-size: 20px; 
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
}  
.topics img{
	height: 50px;
	width: 50px;  
	margin-bottom: 2vh;
	margin-right: auto;
	margin-left: auto;
}
/*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);
}



.test{
	width: 100%;
	margin-right: auto;
	margin-right: auto;
} 
.test div{
	width: 27%;
	float: left;
	margin: 2vh;
	border-radius: 10px;
	padding: 20px;
}
.test div img{
	height: 50px;
	width: 50px;
	border-radius: 100px;
	object-fit: cover;
	margin-right: 5px;
}
.test p{
	font-size: 14px;
	font-weight: normal;
}
.test span{
	color: #FFBB01;
}

.cl1{
	background: white;
}
.cl2{
	background: #F3DBF1;
}
.cl3{
	background: #E7F3DB;
}
.cl4{
	background: #F3EDDB;
}
.cl5{
	background: #DBE6F3;
}



.statement span{
	font-size: 11px;
	color: rgb(106, 90, 205);
	margin-right: 1vh;
}

.writeup{
	background: rgb(106, 90, 205);
	padding: 40px;
	margin-top: 7vh;
	color: white;
}
.writeup h1{
	font-weight: bold;
}
.writeup img{
	height: 250px;
	width: 200px;
	object-fit: cover;
	border-radius: 8px;
}


.writeup-two{ 
	background: #F3EDDB;
	padding: 40px;
	padding-top: 8vh;
}
.writeup-two h1{
	font-weight: bold;
}
.writeup-two img{
	height: 250px;
	width: 200px;
	object-fit: cover;
	border-radius: 8px;
}


.writeup-three{ 
	background: #E7F3DB;
	padding: 40px;
	padding-top: 8vh;
}
.writeup-three h1{
	font-weight: bold;
}
.writeup-three img{
	height: 250px;
	width: 200px;
	object-fit: cover;
	border-radius: 8px;
}


.footer{ 
	background: #000000;
	padding: 40px;
	padding-top: 8vh;
	color: white;
}
.footer li{
	list-style: none;
}
.footer a{
	text-decoration: none;
	color: white;
}
.footer p{
	margin-top: 6vh;
}




.signbox{
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}
.signbox li{
	list-style: none;
	margin-top: 2vh;
}
.signbox input{
	width: 100%;
	padding: 10px 30px;
	border-radius: 30px;
	border: 1px solid rgb(106, 90, 205);
	color: black;
}
.signbox select{
	width: 50%;
	padding: 10px 30px;
	border-radius: 30px;
	color: black;
	border: 1px solid rgb(106, 90, 205);
}
.signbox ::placeholder{
	color: black;
}
.signbox button{
	width: 100%;
	padding: 10px 30px;
	border-radius: 30px;
	border: 1px solid rgb(106, 90, 205);
	background: black;
	color: white;
}



.box{
	margin-top: 0vh;
	height: 160vh;
	background: linear-gradient(to right, rgba(106, 90, 205, 1.0),rgba(130, 175, 210, 1.0));
	background-position: center;
	background-size: cover;
	color: white;
}
.box .land-text h1{
	font-size: 35px;
}
.land-text{
	margin-top: 25vh;
}
.box p{
	font-size: 20px; 
	color: white;
	margin-top: 3vh;
}
.box h1{ 
	font-size: 65px; 
	font-weight: bold;
}
.box a{
	color: black;
}