:root {
	--cAccent: #d3bc5f; /* gold */
	--cText: black;
	--cSecond: #666;
	--cBack: white;
}

@font-face {
	font-family: "CMU sans serif";
	src: url("fonts/cmunss.ttf");
}
@font-face {
	font-family: "CMU serif";
	src: url("fonts/cmunrm.ttf");
}
@font-face {
	font-family: "Jost-Bold";
	src: url("fonts/Jost-Bold.ttf");
}
@font-face{
	font-family: "Kingshare";
	src: url("fonts/Kingshare.ttf");
}
@font-face {
	font-family: "Light-Stories";
	src: url("fonts/Light_Stories.ttf");
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: white;
}

nav {
	display: flex;
	justify-content: center;
	align-items:flex-end;
	text-align: center;

	height: fit-content;
	padding: 4px 0;
	margin: 0;
}

.navcontainer {
	display: flex;
	flex-wrap:wrap;
	flex-grow: 0;
	justify-content: space-around;
	text-align: center;
	padding: 0px 0 4px 0;
	margin: 0 3vw;
	row-gap: 12px;
}
.navcontainer a {
	margin: auto 3vw;
}

a {
	color: var(--cAccent);
	font-family: 'CMU sans serif';
	font-size: medium;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	transition: ease;
}

#logo {
	height:80px;
}




#hero {
	background-image: url("img/coaching.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
	align-content: center;
}
.hero-text {
	font-family: "Jost-Bold";
	font-size: 3.5vw;
	text-align: center;
	color: white;
	padding: 25vw 1vw 18vw 1vw;
}


#intro {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10vw;
	margin-top: 5vw;
}
.intro-text-container {
	color: #d4aa00;
	padding: 4vw;
}
.intro-text {
	font-family: "Light-Stories";
	font-size: 3vw;
}
.signature {
	font-family: "Kingshare";
	font-size: 3vw;
	text-align: right;
	margin-top: 10px;
	padding-right: 0.1vw;
}
#intro-ryan-pic {
	width: 20vw;
	height: auto;
}

#info {
	align-items: center;
	max-width: 100vw;
}
.group-wrap, .group-wrap-reverse  {
	display: flex;
	flex-direction: row;
	background-color: #333;
}
.info-text, .info-image {
	flex: 1;
	width: 50%;
	height: fit-content;
	margin: auto;
}
.info-text {
	color: white;
	background-color: #333;

	font-family: "Jost-Bold";
	font-size: 3vw;
	text-align: center;
	align-content: center;
	padding: 0 2vw;
	margin: auto;
}


#services {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;

	background-image: url("./img/fevo-bwblurdark.png");
	background-size: cover;

	padding: 20px;
}

.container {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.card {
	background-color: var(--cBack);
	outline: var(--cBack) solid 3px;
	border: var(--cAccent) solid 3px;
	box-shadow: var(--cAccent) 0 0 24px 5px;
	font-family: 'CMU Serif';

	display: grid;
	align-items: end;
	justify-content: center;
	text-align: center;

	/* max-width maintaining ratio, so cards always fit on screen */
	width: 324px;
	max-width: 66vw;
	height: fit-content;
	min-height:200px;

	margin: 20px;
	padding: 10px;
}

.card .footer {
	justify-content: flex-end;
}

/* card inner elements */

.card p {
	color: #666;
	font-size: 16pt;
	margin: 0;
	padding: 6px;
}

.card .price {
	color: black;
	font-size: 22pt;
}

button {
	display: inline-block;

	width: 150px;
	height: 50px;

	margin: 8px auto;
	padding: auto;

	background-color: var(--cAccent);
	color: white;
	border-radius: 5px;
	border: solid var(--cAccent);
	
	font-family: "CMU serif";
	font-size: 16pt;

	cursor: pointer;
}

.sale-banner {
	margin: 0;
	width: 100%;
	max-width: 240px;
	height: auto;
	justify-self: center;
}

/*** TESTIMONIALS ***/
#testimonials {
	display: flex;
	justify-content: space-evenly;
	background-color: white;
	padding: 40px 0;
}


#testimonial-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#testimonial-image-container {
	margin: 0;
}
#testimonial-image {
	width: calc(25vw + 200px);
}
#testimonial-text-container {
	display: block;
	margin-top: auto;
	margin-bottom: auto;
	align-self: center;
	width: calc(25vw + 200px);
}
#testimonial-text {
	color: black;
	font-family: "Light-Stories";
	/* font-size set by script */
	text-align: center;
}
#client-info {
	margin-top: 1vh;

	color: #666;
	font-family: "Light-Stories";
	font-size: calc(1.6vw + 8pt);
	text-align: center;
}
.button-container {
	height: auto;
	padding-top: calc(10vw + 40px);
}
.gallery-btn {
	height: 40px; 
	cursor:pointer;
}
#left-btn { margin-left: 16px;}
#right-btn { margin-right: 16px;}


#about {
	padding: 40px;
	background-image: url("./img/fevo-bwblurdark.png");
	background-size: cover;
}

.panel {
	background-color: var(--cBack);
	outline: var(--cBack) solid 3px;
	border: var(--cAccent) solid 3px;
	box-shadow: var(--cAccent) 0 0 24px 5px;

	font-family: 'CMU Serif';
	text-align: justify;
	font-size: calc(1vw + 4pt);

	margin: 20px;
	padding: 20px;
	width: 33vw;
}

/* CONTACT */
#contact {
	padding: 4vw 8vw;
	text-align: center;
}
.plaintext {
	font-family: 'CMU sans serif';
	font-size: x-large;
}
.boldtext {
	font-family: "Jost-Bold";
	font-size: xx-large;
}
.map {
	margin: 2vw 0;
}
#map-image {
	margin: 0;
	border-radius: 24px;
	width: 40vw;
}
#map-text {
	margin: 0;
}


.contact-form {
	max-width: 600px;
	margin: 30px auto;
	padding: 1em;
	background: #f9f9f9;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: left;
}
.contact-form h2 {
	margin-top: 0;
}
.contact-form .form-group {
	margin-bottom: 1em;
}
.contact-form .form-group label {
	display: block;
	margin-bottom: 0.5em;
}
.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
	width: 100%;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: 5px;
}
.contact-form button {
	width: fit-content;
	padding: 0.7em 1.5em;
	background: #007BFF;
	border: none;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
	font-family: 'CMU Sans Serif';
	font-size: medium;
}
.contact-form button:hover {
	background: #0056b3;
}
	

footer {
	background-color: #333;
	color: white;
	display: flex;
	text-align: center;
	justify-content: space-evenly;
	align-items: center;
	padding: 20px;
}
#legal {
	flex: 2;
}
#little-guy {
	flex: 1;
}
#little-guy img {
	height: 30px;
}
#socials {
	flex: 1;
}
#socials img {
	height: 40px;
}

/* Switch for tall displays */
@media (max-aspect-ratio: 1/1) {
	#logo {
		height: 60px;
	}
	.navcontainer {
		flex-direction: column;
	}

	#hero {
		height: 33vh;
	}
	.hero-text {
		font-size: 4vw;
	}

	#intro-ryan-pic {
		display: none;
	}

	.intro-text, .signature {
		font-size: 3vh;
	}

	/* INFO */
	.group-wrap {
		flex-direction: column;
		height: 100vh;
	}
	.group-wrap-reverse {
		flex-direction: column-reverse;
		height: 100vh;
	}

	.info-image {
		width: 100%;
		height: fit-content;
		flex: 0;
	}
	.info-text {
		font-size: 3vh;
		width: 95%; /* bodge fix */
		flex: 1;
	}

	#map-image {
		width: 60vw;
	}
}