@font-face { 
	font-family: Celtic; 
	src: url('./celtic.TTF') format('truetype'); 
}
body {
	background-color: #C8D0E2; 
}
.btn-filled {
	padding: 6px 16px;
	border-radius: 0px; 
	color:#F9F9F9;
	background-color: #36935E;
}
.btn-menu {
	border-radius: 6px; 
	background-color: #2B2D40;
	font-family: Celtic;
	font-weight: bold;
	letter-spacing: 1px;
	color: #F9F9F9;
}
.btn-menu:hover {
	background-color: #414562;
	color: #F9F9F9;
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.con-white {
	background: #F7F7F7;
	margin-top: 10px;
	padding: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 5px solid #728CA8;
}
.end-image{
	align-self: flex-end;
	margin-top: auto;
	transform: scale(1, -1);
}
#hero-heading, #hero-desc {
	position: relative;
	z-index: 3;
}
.highlighted {
	color: #36935E;
}
html * {
	font-family: Arial;
	font-style: normal;
}
h1, h2, h3, h4, h5, h1 span, h2 span{
	font-family: Celtic; 
	font-weight: bold;
	letter-spacing: 1px;
	color: #2B2D40;
}
nav {
	background-color: transparent;
	top: 0;
	width: 100%;
	z-index: 100;
	height: 56px;
}
.navbar-toggler {
	border: none;
	font-size: 200% !important;
}
#site-logo {
	height: 36px;
}
.small-line {
	 width: 70px;
	 height: 3px;
	 margin: 8px auto;
	 background-color:#FC275B;
}
.box-shadow {
	box-shadow: 0px 0px #888;
}
#hero-desc {
	width: 50% !important;
}
.rectangle-card, .rectangle-card img {
	border-radius: 0 !important;
}
.bi-star, .bi-star-fill, .bi-star-half {
	color: #FFAA00;
}
@media (max-width: 767px) {
	nav {
		min-height: 60px !important;
    }
	.navbar-collapse {
		text-align: left;
		background-color: #F7F7F7;
		padding: 2%;
		position: absolute;
		top: 60px !important;
		left: 0;
		width: 100% !important;
	}
	#site-logo {
		height: 41px;
	}
	.navbar-collapse li a {
		color: #101010 !important;
    }
}

footer {
	background-color: #2B2D40;
}
.jumbotron {
	padding-bottom: 113px;
	border-radius: 0;
	overflow: hidden;
	width: 100% !important;
	background-image: url('./forest-pic.webp');
}
.jumbotron p {
	position: relative;
	z-index: 20;
}
.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  height: 150px;
  width: 100%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  overflow: hidden;
}
.grow:hover {
	height: 100%;
	max-height: auto;
}