*{
    background-color: rgb(238, 238, 238);
	font-family: 'Times New Roman', Times, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


.header-headline{
	background-color: white;
	width: 100%;
	height: 100px;
	display: flex;
	margin-bottom: 10px;
	box-shadow: 4px 4px rgba(231, 224, 224, 0.2);



}

.header-headline a{
	font-family: 'Times New Roman', Times, sans-serif;
	font-size: large;
  	color: black;
  	text-decoration: none;
  	font-weight: 500;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s;
	flex: 1;
	background-color: white;
}

.header-headline a:hover{
	opacity: 1;
	text-decoration: underline;


}


.header-image{
  height: 100px;
  width: 150px;
  object-fit: contain;
  flex: 1;
  margin-left: 20px;
  background-color: white;
}



.heading{
  color: black;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bolder;
  font-style: italic;
  width: 80px;
  padding-top: 15px;
  font-size: larger;
  flex: 1;
  min-width: fit-content;
  margin-left: 5px;
  margin-top: 20px;
  vertical-align: middle;
  background-color: white;
}


.homepage{
	margin-left: 30%;
}

.service, .about, .contact{
	margin-left: 2%;
}

input::placeholder{
	font-family: 'Times New Roman', Times, sans-serif;
	color: black;
	font-style: italic;
	opacity: 1;
	font-weight: 500;
}



.search-bar{
	margin-left: 2%;
	opacity: 0.8;
	height: 10px;
	border: 0;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 20px;
	margin-right: 50px;
	flex: 1;
	background-color: white;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.15s;
}


.search-bar:hover{
	opacity: 1;
	box-shadow: 6px 6px rgba(231, 224, 224, 0.2);
	background-color: rgb(238, 238, 238);
	border: 0;
	
}



.service, .about, .contact, .homepage{
	padding-left: 15px;
	cursor: pointer;
	transition: text-decoration 0.15s, color 0.15s;
	margin-top: 20px;
	margin-bottom: 15px;
	padding: 10px;
}


.homepage:hover{
	text-decoration: underline;
}

.homepage:active{
	color: rgb(129, 168, 168);
}


.about:hover{
	text-decoration: underline;
}

.about:active{
	color: rgb(129, 168, 168);
}



.service:hover{
	text-decoration: underline;
}

.service:active{
	color: rgb(129, 168, 168);
}

.contact:hover{
	text-decoration: underline;
}

.contact:active{
	color:rgb(129, 168, 168);
}


.join-container{
	display: flex;
	width: 8%;
	margin-left: 46%;
	margin-bottom: 3%;
	margin-top: 3%;

}


.join-now-button{
	color: white;
	border: 0px;
	border-radius: 10px;
	background-color: rgb(53, 50, 50);
	cursor: pointer;
	font-weight: bold;
	font-size: 15px;
	transition: opacity 0.15s;
	height: 38px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	transition: box-shadow 0.15s;
	flex: 1;
	opacity: 0.8;


	

}

.join-now-button:hover{
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
	opacity: 1;


}

.join-now-button:active{
	opacity: 0.5;
}

.description1{
  width: 50%;
  font-family: 'Times New Roman', Times, sans-serif;
  font-size: 20px;
  display: flex;
  background-color: rgb(238, 238, 238);
  margin: 35px;
  margin-left: 25%;


}




.paragraph1{
	text-align: justify;
	flex: 1;
	padding: 10px;
	transition: background-color 0.15s, opacity 0.15s, color 0.15s;
  	cursor: pointer;
	opacity: 0.8;
	background-color: white;
	border-radius: 25px;
	padding: 20px;
	cursor: pointer;
	transition: all 0.15s;


	
}

.paragraph1:hover{
	opacity: 1;
    background-color: rgb(238, 238, 238);
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

}


.footer{

	display: flex;
    background-color: white;
	margin: 0;
	margin-top: 4.5%;
	padding: 0;

}

.footer a{
	font-family: 'Times New Roman', Times, sans-serif;
	font-size: large;
  	color: black;
  	text-decoration: none;
  	font-weight: 500;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.15s;
	flex: 1;
	background-color: white;
}

.footer a:hover{
	opacity: 1;
	text-decoration: underline;


}

.footer-image{
  height: 80px;
  width: 150px;
  object-fit: contain;
  background-color: white;
  flex: 1;

}