*{

	margin: 0;
	padding: 0;
	
}

body{
	width: 100%;
	background-image: url("../images/bg2.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center top;
	background-size: cover;
	padding: 0;
	margin: 0;
	font-family: "Raleway", "san-serif";
	clear: both;
	color: #e9c202;


}

.tint{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,120,2,0.5);
	z-index: -6;
}



.menu-logo{
	position: fixed;
	top: 0;
	display: none;
	width:100px;
}

.menu-btn{
	position: fixed;
	top: 5px;
	right:10px;
	width: 25px;
	display: none;
	z-index: 6;
}

.nav-container{
	position: fixed;
	top:100vh;
	left:25%;
	min-width: 150px;
	width: 25%;
	height: 100%;
	background-image: linear-gradient(to right, #00ae02, #007802);
	background-size: cover;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.75);
	transition: 0.6s ease;
	z-index: 5;
}






 .covid-message{
    position: fixed;
    top:-200%;
    left: 2%;
    width: 76%;
    height: 76vh;
    background-color: rgba(0,0,0,0.8);
    padding: 5% 10%;
    border-radius: 5px;
    transition: 1s ease-out;
	z-index: 6;

}

.covid-message img{
    display: block;
    margin: 20px auto;
	max-width: 300px;

}

.covid-message h2{
    color: rgba(120,200,71, 1);
    text-align: center;
}

.covid-message p{
    text-align: center;
    color: white;
}

.exit-btn{
    width: 50px;
    padding: 10px 15px;
    background-color: #e9c202;
    border-radius: 5px;
    text-align: center;
    margin: 20px auto;
	color: #006600;

}     

.big-font{
	font-size: 150%;
}

.vertical-line-right{
	width: 90%;
	height: 100%;
	border-right: 1px solid #e9c202;
}

.vertical-line-left{
	width: 97%;
	height: 100%;
	border-right: 1px solid #e9c202;
}

.logo-container{

	width: 90%;
	margin: 0 auto;
	padding: 10% 0;
}
.logo{

	width: 100%;
	display: block;
}

.navigation{
	width: 90%;
	margin: 0 auto;
	text-align: center;
	color: #e9c202;
}

.navigation li{
	padding: 5px 0;
	border-bottom: 1px solid #007802;
	text-decoration: none;
	list-style: none;
}


.navigation li:hover, .navigation li:active{
	border-bottom: 1px solid #e9c202;

}

a{

	text-decoration: none;
	color:#e9c202;
	transition: 0.3s ease;
}

li a:hover {

	padding-left: 10px;
}


.contact-details{
	margin-top: 30px;
	text-align: center;
}

.copyrights-container{
	position: absolute;
	bottom: 1%;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	font-size: 70%;
	color: #e9c202;
}

.welcome{

	position: fixed;
	right: 100px;
	top: -50vh;
	width: 30%;
	background-color: rgba(0,0,0,0);
	padding: 25px;
	color: white;
	font-family: "Raleway", "san-serif";
	font-weight: 300;
	transition: 0.75s ease;
	z-index: 1;
}

h1, h3{
	font-weight: 300;
}
h1{
	color: #e9c202;
}

h3{
	width: 90%;
}

.buttons{
	width: 90%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 10%;
	margin-top: 20px;
	text-align: center;

}

.explore-btn{
	background: #e9c202;
	border: none;
	color: #006600;
	padding: 15px 0px;
}

.enrol-btn{

	background: none;
	border: 2px solid #e9c202;
	color: white;
	padding: 15px 0px;
	font-weight: 600;

}

.buttons a:hover{
	padding-top: 10px;
	padding-bottom: 20px;

}




 @media (max-width: 769px) {



.nav-container{
		 	
	left: 0;

}


.contact-details{

	font-size: 70%;
}

.copyrights-container{
	display: none;
}

.welcome{

	right: 20px;
	width: 50%;
	padding: 0;
}




}


@media(max-width: 414px){


.menu-logo{

	display: block;
	width: 120px;
	left: 35%;
}

.menu-btn{

	display: block;
	
}


.nav-container{

	width: 100%;
	left: -95%;
	transition: 0.5s ease;
}


.nav-container:hover{

	left:0;
}

.welcome{

	right: 2%;
	width: 80%;
	padding: 0;
}

}