:root {
	/* fonts */
	--body-font: "mukta", sans-serif;
	--header-font: "Anek Telugu", sans-serif;
	--navbar-font: "Lato", sans-serif;
	--home-font: "oooh baby", sans-serif;

	/* Color */
	--blue-green-1: #d2ebe4;
	--blue-green-1-rgba: rgba(210, 235, 228, 0.5);
	--blue-green-2: #8ceed2;
	--lineair: linear-gradient(#d2ebe4, #8ceed2);
	--black: #222826;
	--black-75: rgba(34, 40, 38, 0.75);
	--black-50: rgba(34, 40, 38, 0.5);
	--black-25: rgba(34, 40, 38, 0.25);
	--black-10: rgba(34, 40, 38, 0.1);
	--black-5: rgba(34, 40, 38, 0.05);
	--bg-white: #fff;

	/* size */
	--h1-size: 6.25rem;
	--h2-size: 4.1rem;
	--h3-size: 3.125rem;
	--body-size: 1.06rem;
	--navbar-size: 1.5rem;
	--footer-size: 0.625rem;
	--quote-size: 2.5rem;

	/* line-height */
	--footer-height: 12px;
	--body-height: 130%;

	/* spacing */
	--spacing: 8px;
	--h1-spacing: 66px;
	--h2-spacing: 64px;

	/* standard width */
	--standard-width: 1144px;

	/* box-shadow */
	--button-box-shadow: 4px 5px rgba(34, 40, 38, 0.3);
	--img-box-shadow: 0px 0px 30px rgba(34, 40, 38, 0.3);
	--img-box-shadow-hover: 0px 0px 10px rgba(34, 40, 38, 0.3);
}

/* General styles */
html,
body {
	width: 100%;
	overflow-x: hidden;
	position: relative;
	scroll-behavior: smooth;
}

body {
	font-family: var(--body-font);
	color: var(--black);

	margin: 0;
	box-sizing: border-box;
	padding: 0;
	background-color: var(--bg-white);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

main {
	width: 100%;
	padding: calc(var(--spacing) * 2);
	box-sizing: border-box;
	/* background-color: #f7f9fc; */
}

/* Header styles */
h1 {
	position: relative;
	width: 100%;
	top: 0;
	margin: 0;
	padding: 0 calc(var(--spacing) * 4);
	box-sizing: border-box;
	text-align: center;
	font-family: var(--home-font);
	font-size: var(--h1-size);
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: 90px;
}
/* h2 styles */
.h2 h2 {
	font-family: var(--home-font);
	font-size: 10vw;
	font-weight: 500;
	height: fit-content;
	margin: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 7) 0;

	width: fit-content;
	letter-spacing: 0.9945px;
	text-align: center;
	line-height: 75px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

@media only screen and (max-width: 546px) {
	.h2 h2 {
		line-height: 50px;
	}
}
@media only screen and (max-width: 350px) {
	.h2 h2 {
		font-size: 35px;
		line-height: calc(var(--spacing) * 5);
	}
}
@media only screen and (min-width: 806px) {
	main .hero .section-container .h2 h2 {
		font-size: 70.6px;
	}
}
@media only screen and (min-width: 525px) {
	main .h2 h2::after {
		bottom: -20px;
	}
}

.h2 h2::after {
	content: "";
	height: 2px;
	width: 25%;
	background-color: var(--black);
	position: absolute;
	bottom: 0;
}

.h2 {
	display: flex;
	justify-content: center;
}

/* Hero styles */
.hero {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	bottom: 0;
}

/* text styles */
.body-text {
	font-size: var(--body-size);
	color: var(--black-50);
	line-height: var(--body-height);
	letter-spacing: 0.225px;
	margin: calc(var(--spacing) * 5) 0;
}

/* selection styles */
p.body-text::selection,
h2::selection,
body img::selection,
p.body-text span::selection,
span.body-text::selection,
.card h3::selection,
h3::selection,
div#swal2-html-container::selection,
a::selection,
#bg-error h1::selection,
#quote-of-the-day #date::selection,
.scrollUpButton::selection {
	background-color: var(--blue-green-1);
}

h1::selection,
.quote::selection,
cite::selection,
.menu li ::selection,
.navbar img::selection,
.quote-wrapper img::selection,
.header img::selection,
footer p::selection,
footer img::selection,
button::selection,
input::selection,
textarea::selection,
#btn span::selection,
#logo-quote::selection {
	background-color: var(--blue-green-2);
}

/* Quote Styles */
.quote {
	font-family: var(--home-font);
	font-style: italic;
	font-size: var(--quote-size);
	letter-spacing: 0.48px;
	line-height: 39px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.quote cite {
	display: block;
	font-weight: bold;
}

.quote cite::before {
	content: "—";
	margin: 0 calc(var(--spacing) * 0.5) 0 0;
}

.quote cite::after {
	content: "—";
	margin: 0 0 0 calc(var(--spacing) * 0.5);
}

/* image styles */
main .main-img {
	border-radius: 10px;
	box-shadow: var(--img-box-shadow);
	object-fit: cover;
	transition: all 0.5s ease;
}

main .main-img:hover {
	transform: scale(0.9);
	box-shadow: var(--img-box-shadow-hover);
}

/* opsomming styles */
.sum {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.sum-block {
	padding: var(--spacing);
	background-color: var(--blue-green-1-rgba);
	border-radius: 10px;
	box-shadow: var(--img-box-shadow-hover);
}

.sum-block,
.opmerking {
	position: relative;
	display: flex;
	height: fit-content;
	justify-content: start;
	align-items: start;

	margin: calc(var(--spacing) * 4) calc(var(--spacing) * 5) 0 0;
	box-sizing: border-box;
}

.col-right .sum-block {
	margin-right: 0;
	margin-left: calc(var(--spacing) * 5);
}

.sum-block .sum-book,
.opmerking .opm-icon {
	width: 18px;
	height: 18px;
	opacity: 0.5;
	margin: 1px var(--spacing) 0 0;
}

/* .sum-block .sum-book {
	height: 36px;
	width: 36px;
	position: absolute;
	top: -20px;
	left: -20px;
} */
.sum-block .sum-text,
.opmerking .opm-text {
	margin: 0;
}

/* opmerking styles */
/* General card styles */
.card {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	box-shadow: var(--img-box-shadow);
	border-radius: 20px;
	box-sizing: border-box;
	position: relative;
}

.card h3 {
	font-family: var(--home-font);
	font-size: var(--h3-size);
	font-weight: normal;
	width: max-content;
	letter-spacing: 0.7461px;
	color: var(--black-50);
	margin: calc(var(--spacing) * 5) 0;
	position: relative;
	top: 0;
}

.card .card-text {
	margin: 0;
	height: 35%;
	font-size: 1rem;
	line-height: 115%;
	/* dit kan later nog door mama's voorkeur worden aangepast */
	/* text-align: justify; */
}

/* primary card styles */
.card-primary {
	width: 100%;
	max-width: calc(var(--spacing) * 52);
	height: calc(var(--spacing) * 62);
	margin: 0;
	padding: 0 calc(var(--spacing) * 4);
}

.card-primary #bg {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: -1;
	border-radius: 20px;
	opacity: 0.6;
}

.card-primary img.card-primary-img {
	width: calc(var(--spacing) * 16);
	height: calc(var(--spacing) * 15);
	margin: 20px 0;
	position: absolute;
	bottom: 0;
}

/* secondary card styles */
.card-secondary {
	width: 100%;
	height: calc(var(--spacing) * 45);
	margin: 0 20px;
	overflow: hidden;
}

.card-secondary .wave-prijs {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/golf-card-3.svg");
	background-size: cover;
	background-repeat: no-repeat;
	animation: waveAnimate 60s linear infinite;
	opacity: 0.4;
	z-index: -1;
}

.card-secondary h3 {
	height: calc(var(--spacing) * 11.5);
	width: fit-content;
	text-align: center;
	max-width: calc(var(--spacing) * 30);
	margin: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 2) 0;
	line-height: calc(var(--spacing) * 5);
	word-break: break-word;
}

.card-secondary .card-secondary-text {
	height: fit-content;
}

.card-secondary .prijs {
	font-weight: 600;
	font-size: 2rem;
	margin: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 3) 0;
}

.card-secondary .card-secondary-img {
	width: calc(var(--spacing) * 9);
	height: calc(var(--spacing) * 8);
	margin: 0 0 calc(var(--spacing) * 3) 0;
}

/* card-3 conact styles*/
.card-3 {
	width: calc(var(--spacing) * 30);
	height: fit-content;
	min-height: calc(var(--spacing) * 10);
	box-shadow: var(--img-box-shadow);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.card-3 img.img-card-3 {
	width: calc(var(--spacing) * 4);
	height: calc(var(--spacing) * 4);
	color: var(--black);
	opacity: 0.5;
	margin: var(--spacing) 0 var(--spacing) 0;
}

.card-3 p.card-3-text {
	margin: 0 0 calc(var(--spacing) * 2) 0;
	width: fit-content;
	max-width: calc(var(--spacing) * 26);
	text-align: center;
}

.card-3 .wave-2 {
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/golf-card-3.svg");
	/* background-color: var(--blue-green-1); */
	background-position: -0px;
	background-size: 800%;
	background-repeat: no-repeat;
	animation: waveAnimate 40s linear infinite;
	opacity: 0.4;
	z-index: -1;
}
.hero .contact .col-right a {
	text-decoration: none;
}

.hero .contact .col-right a:hover .card-3 {
	box-shadow: var(--img-box-shadow-hover);
	transition: box-shadow 0.3s ease;
}

/* a styles */
a {
	color: var(--blue-green-2);
	text-decoration: none;
}

@keyframes waveAnimate {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: 100%;
	}
}

/* decoration styles */
.dec-cirkel {
	width: calc(var(--spacing) * 35);
	height: calc(var(--spacing) * 35);
	border-radius: 50%;
	background-color: var(--blue-green-1);
	filter: blur(85px);
	position: absolute;
	opacity: 0.6;
}

/* scroll animation */

.right.ScrollAnimate {
	animation: ScrollAnimateRight 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.left.ScrollAnimate {
	animation: ScrollAnimateLeft 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.op.ScrollAnimate {
	animation: ScrollAnimateOp 2s ease;
}

.down.ScrollAnimate {
	animation: ScrollAnimateDown 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.flip.ScrollAnimate {
	backface-visibility: hidden;
	animation: ScrollAnimateFlip 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

#quote-of-the-day.ScrollAnimate {
	animation: ScrollAnimateScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.card-primary.ScrollAnimate {
	animation: ScrollAnimateScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.img-gallery .main-img.ScrollAnimate {
	animation: ScrollAnimateScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

.card-secondary.ScrollAnimate {
	animation: ScrollAnimateScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}

@keyframes ScrollAnimateRight {
	from {
		opacity: 0;
		/* filter: blur(5px); */
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		/* filter: blur(0); */
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ScrollAnimateLeft {
	from {
		opacity: 0;
		/* filter: blur(5px); */
		transform: translate3d(-100%, 0, 0);
	}
	to {
		opacity: 1;
		/* filter: blur(0); */
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ScrollAnimateDown {
	from {
		/* opacity: 0; */
		/* filter: blur(5px); */
		transform: translate3d(0, -100px, 0);
	}
	to {
		/* opacity: 1; */
		/* filter: blur(0); */
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ScrollAnimateScale {
	from {
		opacity: 0;
		/* filter: blur(5px); */
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		/* filter: blur(0); */
		transform: scale(1);
	}
}

@keyframes ScrollAnimateFlip {
	from {
		opacity: 0;
		/* filter: blur(5px); */
		transform: perspective(2500px) rotateX(-100deg);
	}
	to {
		opacity: 1;
		/* filter: blur(0); */
		transform: perspective(2500px) rotateX(0);
	}
}

@keyframes ScrollAnimateOp {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* scroll up button */
/* .wrapperButtonScrollUp {
	width: 100vw;
	height: 100vh;
	position: fixed;
} */
.scrollUpButton {
	width: calc(var(--spacing) * 7);
	height: calc(var(--spacing) * 7);
	background-color: var(--blue-green-1);
	border-radius: 50%;
	position: fixed;
	bottom: calc(var(--spacing) * 4);
	right: calc(var(--spacing) * 4);
	box-shadow: var(--img-box-shadow);
	opacity: 0.7;
}

@media only screen and (max-width: 746px) {
	.scrollUpButton {
		width: calc(var(--spacing) * 5);
		height: calc(var(--spacing) * 5);
	}
}
/* layout styles */

/* Section-container zorgt ervoor dat de width niet groter kan zijn dan 1144px */
.section-container {
	width: 100%;
	max-width: var(--standard-width);
	margin: 0;
	box-sizing: border-box;
}

/* Bij elk nieuw deel/sectie moet je een een container maken die dislay flex heeft en justify-content center heeft. Dat zorgt ervoor dat de content gecenterd is. */
/* Als je een achtergrond wilt die wel over heel het scherm is moet je doen als hieronder en moet je op die container de achtergrond zetten. */
/* html layout gaat dan als volgt: 
<div class="section [NAME SECTION]">
    <div class="section-container">
        CONTENT
    </div>
</div>*/
.section {
	width: 100%;
	display: flex;
	justify-content: center;
}