@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Document */

html {
	margin:0;
	padding:0;
	overflow-x: hidden;
	box-sizing: border-box;
}
body {
	margin:0;
	padding:0;
	overflow-x: hidden;
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
}
.navbar {
	background: rgba(0, 0, 0, 0.0);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .05rem;
	color: #625c50;
}
.navbar-brand img {
	height: 4rem;
	margin: 1rem 0 2rem 2rem;
}
.navbar-nav {
	align-items: center;
	margin-right: 5rem;
}
.navbar-nav li {
	padding-right: 1.5rem;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
	color: #f78d2b;
}
.navbar-toggler {
	margin-right: 2rem;
}
.navbar-nav {
	background-color:rgba(236,233,228,0.80);
	margin-bottom:2rem;
}
#home {
	background-image: url("../images/background-placeholder.jpg");
	width: 100%;
	height: 100vh;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
#home h1 {
	margin-left: 2rem;
	margin-bottom: 1.5rem;
	margin-top: 0;
	width:21rem;
	text-transform: uppercase;
	font-weight: 400;
	color: #625c50;
	letter-spacing: 0.075rem;
	background-color:rgba(236,233,228,0.65);
}
#home h1 span {
	font-weight:700;
}
#home h5 {
	margin-left: 2rem;
	margin-right: 2rem;
	width: 23rem;
	color: #625c50;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75rem;
	background-color:rgba(236,233,228,0.65);
}
#home h5 span {
	font-weight:550;
}
#home button.btn {
	margin-left: 2rem;
	margin-top: 1.5rem;
	border-color: #f78d2b;
	font-weight: 400;
	color: #ece9e4;
	background-color: #f78d2b;
}
#home button.btn:hover {
	background-color: #f36f09;
	border-color: #f36f09;
}
#services, #contact {
	background-image:url("../images/background-fade.png");
	background-position: top left;
	background-repeat: repeat-x;
	background-color: #71686b;
	padding-bottom: 6rem; 
}
h2.titleDarkMode {
	padding-top:3rem;
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
	font-weight: 400;
	color: #ece9e4;
	filter: drop-shadow(5px 5px 7px black);
}
h2.titleLightMode {
	padding-top: 3rem;
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
	font-weight: 400;
	color: #625c50;
}
h2.titleDarkMode span, h2.titleLightMode span {
	font-weight:600;
}
p.textDarkMode {
	margin: 2rem 1rem 3rem 1rem;
	color: #ece9e4;
	font-weight: 300;
	line-height: 1.75rem;
	text-align: center;
	font-size: 20px;
}
p.textLightMode {
	margin: 2rem 1rem 3rem 1rem;
	color: #625c50;
	font-weight: 300;
	line-height: 1.75rem;
	text-align: center;
	font-size: 20px;
}
p.textDarkMode span, p.textLightMode span {
	font-weight:550;
}
.card {
	background-color: #ece9e4;
	padding-bottom: 1.5rem;
	margin-left: 3.5rem;
	margin-right: 3.5rem;
}
.card-body p {
	text-align: center;
	color: #625c50;
}
.card-body h5 {
	text-align: center;
	color: #625c50;
}
.card-img-top {
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
}
#services button.btn {
	border-color: #f78d2b;
	font-weight: 400;
	color: #f78d2b;
	margin-top: .5rem;
}
#services button.btn:hover {
	color: #ece9e4;
	background-color: #f78d2b;
}
#about {
	background-color: #ece9e4;
	padding-bottom: 1rem;
}
#contact label {
	color: #ece9e4;
	font-weight:400;
	padding-bottom: 0;
}
#contact input, #contact textarea {
	color: #625c50;
	background-color: #ece9e4;
}
#contact button.btn {
	background-color: #f78d2b;
	font-weight: 400;
	color: #ece9e4;
	border: none;
}
#contact button.btn:hover {
	background-color: #f36f09;
}
#contact .form-text {
	color: #ece9e4;
}
#contact .socialIcons {
	text-align: center;
}
#contact .socialIcons a {
	text-decoration: none;
}
#contact .formRow {
	margin: 2rem;
}
#contact .formRow button {
	margin-top: 3rem;
}
#contact svg {
	margin: 0 1.5rem;
	fill: #ece9e4;
}
#contact a svg:hover {
	fill: #f78d2b;
}
#footer {
	background-color: #ece9e4;
	padding-bottom: 1rem;
	padding-top:1px;
}
#footer p.copyright {
	text-align: center;
	color: #ADA69A;
}

/* RESPONSIVE CONTENT */

/* Extra (xl) large devices (larger desktops, 1200px and up) */
@media (min-width: 1200px) {
	
}


/* Large (lg) devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
}


/* Medium (md) devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#services .row {
		max-width: 1190px;
		margin-left: auto!important;
		margin-right: auto!important;
	}
	p.textDarkMode, p.textLightMode {
		max-width: 900px;
		margin-left: auto!important;
		margin-right: auto!important;
	}
	#contact .formRow {
		max-width: 700px;
		margin-left: auto!important;
		margin-right: auto!important;
	}
	.navbar-brand img {
		height: 6rem!important;
		margin: 2rem 0 2rem 5rem!important;
	}
	.navbar-nav {
		background-color:rgba(236,233,228,0.00)!important;
	}
	#home h1 {
		margin-left: 5rem!important;
		width: 27.5rem!important;
		background-color:rgba(236,233,228,0.00)!important;
	}
	#home h5 {
		margin-left: 5rem!important;
		background-color:rgba(236,233,228,0.00)!important;
		width:30rem!important;
	}
	#home button.btn {
		margin-left: 5rem!important;
		border-color: #f78d2b!important;
		color: #f78d2b!important;
		background-color:rgba(0,0,0,0.00)!important;
	}
	#home button.btn:hover {
		color: #ece9e4!important;
		background-color: #f78d2b!important;
	}
}



/* Small (sm) devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.card {
		margin:0;
	}
	#services .row {
		margin-left: 2rem;
		margin-right: 2rem;
	}
	p.textDarkMode, p.textLightMode {
		margin:2rem 1rem 3rem 1rem;
	}
	.navbar-brand img {
		height: 5rem;
		margin: 2rem 0 2rem 4rem;
	}
	#home h1 {
		margin-left: 4rem;
		margin-bottom: 1.5rem;
		width: 23rem;
	}
	#home h5 {
		margin-left: 4rem;
		font-size: 21px;
		width:29rem;
	}
	#home button.btn {
		margin-left: 4rem;
	}
}


/* BOOTSTRAP BREAK POINTS:

Extra small (xs) devises (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) {...}

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) {...}

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) {...}

Extra (xl) large devices (larger desktops, 1200px and up)
@media (min-width: 1200px) {...}

*/