@import url('https://fonts.googleapis.com/css2?family=Spicy+Rice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

*{margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Josefin Sans', sans-serif}


html, body{
	height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
.carousel-inner img{
	width: 100%;
	height: 100%;
	display: block;
}
.Jumbotron{
	padding: 1rem;
	background: gainsboro;
}
.compound_pic img{
	width: 100%;
	height: 100%;
}
.compound_img{
	max-width: 450px;
	max-height: 450px;
}
.images{
	padding: 0% 3% 0% 3%;
}

.images h4{
	padding-top: 15px;
}
.welcome{
	width: 75%;
	margin: 0 auto;
	padding-top: 2rem;
}
.welcome hr{
	border-top: 2px solid #b4b4b4;
	width: 95%;
	margin-top: .3rem;
	margin-bottom: 1rem;
}
#contact{
	background-color: #000000; 
	padding: 0% 10% 0% 10%;
}
#contact h4{
	padding-bottom: 20px;
	font-weight: bolder;
}
.section-1, .section-2{
	padding: 5%;
}
.input-fields{
	display: flex;
	flex-direction: column;
	
}

.input-fields .input,
textarea{
	margin: 10px 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid;
	padding: 10px;
}
footer{
	padding-top: 2rem;
}
.footer a{
	color: black;
}
.footer img{
	border: none;
}
hr.light{
	border-top: 1px solid #d5d5d5;
	width: 75%;
	margin-top: .8rem;
	margin-bottom: 1rem;
}
hr.light-100{
	border-top: 1px solid #d5d5d5;
	width: 100%;
	margin-top: .8rem;
	margin-bottom: 1rem;
}

/**Media Queries**/


@media(max-width: 768px){
	.heading{
		font-size: 200%;
		font-weight: bold;
	}
	.heading2{
		font-size: 160%;
		font-weight: bold;
	}
	.heading3{
		font-size: 130%;
		font-weight: bold;
	}
	.heading4{
		font-size: 100%;
		font-weight: bold;
	}
	.Jumbotron{
		display: none;
	}
	.compound_img{
		max-width: 300px;
		max-height: 300px;
	}
}
@media(max-width: 576px){
	.heading{
		font-size: 150%;
		font-weight: bold;
	}
	.heading2{
		font-size: 120%;
		font-weight: bold;
	}
	.carousel-indicators, .arrow{
		display: none;
	}
}