*{
	box-sizing:border-box;
	margin: 0;
	padding: 0; 
}
	.m-5{
		margin: 5px;
	}
	 .mx-5{
	 	margin: 0 5px;
	 }
	 .my-5{
	 	margin: 5px 0 ;
	 }
	 .p-10{
	 	padding: 20px;

	 }
	 .px-10{
	 	padding: 0 10px;
	 }
	 .py-10{
	 	padding: 10px 0;
	 }
	
	 	
	 }
	 .d-flex{
	 	display: flex;
	 }
	 .justify-content-center{
	 	justify-content: center;
	 }
	 .justify-content-between{
	 	justify-content: space-between;
	 }
	 .justify-content-around{
	 	justify-content: space-around;
	 }
	 	:root{
	 		--bg-primary:black;
	 		--bg-secondary:white;
	 		--text-primary: black; 
	 		--text-secondary:white;
	 		--white:white;
	 	}
	 	a{
	 		text-decoration: none;

	 	}
 	
	
	} 
	.active{
		background-color:white;
		color:white;
	}
	nav{
		position: sticky;
		top: 0;
		float: right;
		margin-right: 20px;

		
	}
	
	section{
		height: 300vh;
		line-height: 100%;
	}
	h1{
		color: black;
		font-size: 50px;
	}
	img{
		height: 500px;
		width: 900px;
	}
	.is-5{
		color: brown;
		font-size: 30px;
	}
	.is-6{
		color: white;
		font-size: 30px;
	}
	h1{
		color: black;
		font-size: 50px;
			}
		
		
		.is-7{
			color: black;
			font-size: 40px;
		}
		.nav-item:hover{
			color:white;
			background-color: black;
		}
		.is-8{
			color: red;
		}
		.is-10{
			background-image: url(Images/background.jpg); 
			background-size: cover;
			background-attachment: fixed;
		}
		.background-9{
			background-image:url(Images/bg7.jpg); ;
			background-attachment: fixed;
			background-size: cover;
		}
		.content{
			width: 100%;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
			color: white;

		}
		{
			width: 200px;
			padding: 15px 0;
			text-align: center;
			margin: 20px 10px;
			border-radius: 25px;
			font-weight: bold;
			border: 2px solid #009688;
			background: transparent;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		{
			background:#009688;
			height: 100%;
			width: 0;

			border-radius: 25px;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: -1;
			transition: 0.5s;

		}
		button:hover span{
			width: 100%
		}
		button:hover{
			border: none;
		}
		video{
			height: 50%;
			width: 50%
		}
		#media-yt iframe{
			height: 100%;
			width:100%;

		}
		.animation{
			height: 100px;
		}
		.is-11{
			text-align: left;
			padding: 0;
			margin:0;
			bottom:  100%;
			left:  50%;
		}
		.is-12{
			font-family: Lucida Sans Typewriter;
			font-size: 30px;
			letter-spacing: 5px;
			color: #bdb4b0;
		}
	.login{
		width: 500px;
		height: 450px;
		margin: 60px auto 0;
		text-align: center;
		padding: 25px;
		border: 3px solid black;
		border-radius: 70px 0 ;
	}
	.input-box{
		position: relative;
		width: 100%;
		height: 50px;
		border-bottom:2px solid #162938 ;
		margin: 30px 0;
		display: flex;
		/*overflow: hidden;*/

	}
	.input-box label{
		position: absolute;
		top: 50%;
		left: 5px;
		transform: translateY(-50%);
		font-size: 1em;
		color:#e0dddd;
		font-weight: 500;
		pointer-events: none; 
		transition: -5s;

	}
	.input-box input:focus~label,
	.input-box input:valid~label{
		top: -5px;
	}
	.input-box input{
		width: 100%;
		height: 100%;
		background:transparent;
		border: none;
		outline: none;

	}
	.input-box .icon{
		position: absolute;
		right: 8px;
		font-size: 1.2em;
		color: #e0dddd;
		line-height: 57px;
	}
	.remember-forgot{
		font-size: .9em;
		color:  #e0dddd;
		font-weight: 500;
		margin: -15px 0 15px;
		display: flex;
		justify-content: space-between;
	}
 		.remember-forgot label input{
 			accent-color:#162938;
 			margin-right: 3px;

 		}
 		`.remember-forgot a{
 			color: #162938;
 			text-decoration: none;
 		}
 		.remember-forgot a:hover {
 			text-decoration: underline;
 		}
 		.btn{
 			width: 100%;
 			height: 45px;
 			background: #162938;
 			border:none;
 			outline: none;
 			border-radius: 6px;
 			cursor: pointer;
 			font-size: 1em;
 			color: #fff;
 			font-weight: 500;
 		}
 		.login-register{
 			font-size: .9em;
 			color: #e0dddd;
 			text-align: center;
 			font-weight: 500;
 			margin: 25px 0 10px;
 		}
 		.login-register p a {
 			color: #e0dddd;
 			text-decoration: none;
 			font-weight: 600;
 		}
 		.login-register p a:hover{
 			text-decoration: underline;
 		}	
 		 .login.form-box  .icon-close{
 			position: absolute;
 			top: 0;
 			right: 0;
 			width: 45px;
 			height: 45px;
 			background: #162938;
 			z-index: 1;
 			font-size: 2em;
 			
 			display: flex;
 			justify-content: center;
 			align-items: center; 
 		}
 		.is-20{
 			color: red;
 			font-family: Arial Narrow;
 			font-size: 3em;
 		}	
 		.is-21{
 			color: #e92525;
 			font-family: Bahnschrift Light;
 			font-size: 2em;

 		}	
 		.card{
 			
 			padding: 2rem 1rem;
 			background:;
 			position: relative;
 			display:flex;
 			align-items: flex-end;
 			box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
 			transition: 0.5s ease-in-out;
 		}
 		.card:hover{
 			transform: translateY(30px);
 		}
 		.card:before{
 			content: ""
 			position:absolute;
 			top:0;
 			left: 0;
 			display: block;
 			width: 100%;
 			height: 100%;
 			background: linear-gradient(to bottom,rgba(0,176,155,0.5),rgba(150,201,61,1));
 			z-index: 2;
 			transition: 0.5s all;
 			opacity: 0;
 		}	
 		.card:hover:before{
 			opacity: 1;
 		}
 		.card.info{
 		position: relative;
 		z-index: 3;
 		color: #fff;
 		opacity: 1;
 		transform:translateY(30px);
 		transition: 0.5s all;
				}	
	.card:hover.info{
		opacity: 1;
		transform: translateY(0px);
	}
	.card img{
 			
 			object-fit: cover;
 			position: absolute;
 			top: 0;
 			left: 0;
 		}
 		.login .form-box .login{
 			display: none;
 		}
 		.form-box.login .icon-close{
 			position: absolute;
 			top: 0;
 			right: 0;
 			width:45px;
 			background: #162938;
 			font-size: 2em;
 			color: #fff;
 			display: flex;
 			justify-content: center;
 			align-items: center; 
 		}
 		.logo{
 			width: 200px;
 			position: absolute;
 			left: 0%;
 			height: 90px;
 		}