:root {
	--background-colour-main-page: #062847;
	--background-colour-sections: #ffffff;
	--navbar-backgroud: #031aaa;
	--dark-blue-background: #020F64;
	--accent-colour: #eafc05;
	--lightText-colour: #fff;
	--darkText-colour: #130f36;
}

body {
	background: var(--dark-blue-background);
	margin: 0px;
	font-family: sans-serif;
	font-size:medium;
}

.navBar {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-around;
	height: fit-content;
	max-width: 1920px;

	margin: 0px auto;
	padding: 1rem;

	border-radius: 0px 0px 10px 10px;
	background-color: var(--navbar-backgroud);
	box-shadow: 0 15px var(--accent-colour);
}

.navDeet {
	color: white;
}

#navEmail::before {
	background-image: url("/assets/mail-svgrepo-com.svg");
}

#navPhone::before {
	background-image: url("/assets/phone-svgrepo-com.svg");
}


.navDeet::before {
	--icon-size: 1.5em;

	content: "";
	display: inline-block;
	height: var(--icon-size);
	aspect-ratio: 1;
	background-size: var(--icon-size);
	filter: invert(100%);
	vertical-align: middle;

	margin-right: 0.5em;
}



#logo-and-header>hgroup {
	height: 10rem;
	align-content: center;
	margin: 0px 0px 0px 10px;
}

#logo-and-header>hgroup>h1 {
	font-size: 3.5rem;
	font-weight: 800;
	margin: 0px;
}

#logo-and-header>hgroup>p {
	font-size: 1.5rem;
	font-weight: 200;

	margin: 0px;
}

#logo-and-header {
	display: flex;
	flex-direction: row;
	font-size: 2rem;
	font-style: normal;
	text-decoration: none;
	color: var(--lightText-colour);
	height: fit-content;
}

#contact-btn-container {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 0px;
}

#logo-image {
	height: 10rem;
	aspect-ratio: auto 350/316;
}

.navBtn {
	font-style: normal;
	background-color: var(--navbar-backgroud);
	color: var(--lightText-colour);
	text-align: center;
	height: fit-content;
	align-self: center;

	font-size: 1em;
	font-weight: bold;
	text-decoration: none;

	padding: 0.5em 1em;
	border: 5px solid var(--lightText-colour);
	border-radius: 25px;
	transition: 0.5s;


}

.navBtn:hover {
	background-color: var(--accent-colour);
	border: 5px solid var(--accent-colour);
	;
	color: var(--background-colour-main-page);
}

.section {

	margin: 3rem auto;
	width: clamp(50%, 70rem, 80%);
	height: fit-content;

	background-color: var(--background-colour-sections);
	border-radius: 10px;
	padding: 0px;
}

.text-div {
	padding: 20px;
}

.text-div> h2{
	font-size:2rem;
	margin:0px;
}

.img-div {

	display: grid;
	grid-template:
		"head img"
		"text img";
	grid-template-rows: 5em min-content;
	grid-template-columns: 3fr 1fr;
	/*
    margin: 3rem auto;
	min-width: 75%;
	max-width: min(80%,50rem);*/
	padding: 0px;
	gap: 1em;
}

.img-div>h2 {
	grid-area: head;
	margin: 20px 0px 20px 20px;
	padding: 0px;
	font-size: 2rem;
}

.img-div>.text-bit {
	grid-area: text;
	margin: 0.5rem 0px 20px 20px;
}

.img-div>img {
	max-height: 100%;
	height: clamp(3rem,100%,100%);
	max-width: 100%;
	aspect-ratio: 768/956;
	width: clamp(200px,100%,100%);
	grid-area: img;
	border-radius: 0px 10px 10px 0px;
	justify-self: right;

	object-fit: cover;
	object-position: top;
}

#heroDiv {
	display: none;
}

#contact-details {
	display: flex;
	flex-direction: column;

	font-style: normal;
	font-weight: 600;
}

#contact-details>a {
	margin: 0.5rem;
}

.img-grid{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:1.5rem;
	justify-content: space-evenly;
	background: none;;
}

.img-grid > div{
	aspect-ratio:1.6;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 30%;
}

.img-grid>div>div{
	height: 100%;
    position: relative;
}

.img-grid>.example{
	background:#eafc05;
}

footer{
	width: 100%;
	justify-content: center;
	align-items:center;
}

footer>small>p{
	text-align: center;
	color:white;
}

@media screen and (max-width:65rem) {

	#logo-and-header>hgroup>h1 {
		font-size: 3rem;
		align-self: flex-end;
	}

	#logo-and-header {
		align-items: center;
		justify-content: center;
	}

	.navBar {
		flex-direction: column;
		justify-items: center;
	}

	#contact-btn-container {
		flex-direction: row;
		flex-wrap: wrap;
	}

	#contact-btn-container>a {
		margin: 10px;
	}

	.section {
		width:90%;
		/*font-size: small;*/
	}

	#logo-and-header>img,
	#logo-and-header>hgroup {
		height: 6rem;
	}

	.img-div{
		grid-template-columns: 2fr 1fr;
	}
}


@media screen and (max-width:55rem) {
	.navBar {
		flex-direction: column;
	}

	#logo-and-header {
		margin: 10px;
		flex-direction: column;
	}

	#logo-and-header>hgroup {
		margin: auto;
	}

	#logo-and-header>hgroup>h1 {
		font-size: 2rem;
		align-self: flex-end;
	}

	.hide-when-narrow {
		display: none;
	}

	#contact-btn-container {
		flex-direction: row;
		flex-wrap: wrap;
	}

	#contact-btn-container>a {
		margin: 10px;
	}
}

@media screen and (max-width:30rem) {
	h1 {
		font-size: 1.2rem;
	}
}


@media screen and (orientation:portrait)
{
	.img-div {
		grid-template:
			"head"
			"text"
			"img";
		grid-template-rows: min-content min-content auto;
		grid-template-columns: 1fr;
	}

	.img-div>.text-bit,
	.img-div>h2{
		margin: 10px 20px;
	}


	.img-div>img{
		object-fit: cover;
		object-position: 50% 5%;
		width:100%;
		height: 20rem;
		border-radius:0px 0px 10px 10px;
	}

	.img-grid > div{
		aspect-ratio:1.6;
		flex-grow: 1;
		flex-basis: 40%;
	}

	.slideshow-text{
		padding:0px !important;
	}

	.slideshow-text>p{
		margin:0.5em;
	}
}