/*!
Theme Name: PADDAP
Theme URI: http://underscores.me/
Author: PADDAP
Author URI: https://paddap.nl
Description: This is the boilerplate theme of PADDAP Digital Agency
Version: 1.0.0
Tested up to: 6.0.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paddap
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PADDAP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


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


:root {
	/* Typography */
	--body-font: "Montserrat";
	--header-font: "Montserrat";

	/* Colors */
	--black: #414141;
	--white: rgb(255, 255, 255);
	--geel: #FFC551;
	--brand-color: rgb(104, 169, 166);
	--groenig: #008080;

	/* Utility */
	--container-max-width: 1280px;
	--small-container-max-width: 800px;
	--container-padding: calc((100vw - var(--container-max-width)) / 2);
	--small-container-padding: calc((100vw - var(--small-container-max-width)) / 2);

	--section-padding: 80px;
	--navbar-height: 50px;

	/* Transitions */
	--transition-easing: cubic-bezier(.62,.03,.6,.98);

	--fast-transition: all .2s var(--transition-easing);
	--medium-transition: all .3s var(--transition-easing);
	--slow-transition: all .6s var(--transition-easing);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	scroll-behavior: smooth;
}

body,
p,
a,
a:visited,
a:hover {
	font-family: var(--body-font);
	color: var(--black);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font);
}
h1 {
	font-size: 24px;
	line-height: 150%;
}
h2 {
	font-size: 100px;
	line-height: 100%;
}
h3 {
	font-size: 38px;
	line-height: 150%;
	font-weight: 400;
}
h4 {
	font-size: 24px;
	line-height: 150%;
	font-weight: 400;
}
h5 {
	font-size: 10px;
	line-height: 150%;
}
p {
	font-size: 18px;
	line-height: 170%;
}
a {
	font-size: 18px;
	line-height: 150%;
}
section {
	margin-top: var(--section-padding);	
}

/* Utility Classes */
.container {
	max-width: var(--container-max-width);
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.small-container {
	max-width: var(--small-container-max-width);
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.btn-group {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
}
/* END Utility Classen */


/* Button Classes */
a.btn {
	padding: 8px 40px;
	border-radius: 37px;
	background: var(--geel);
	color: var(--black);
	display: flex;
	min-width: 200px;
	border: 2px solid var(--geel);
	transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
	align-items: center;
	justify-content: center;
}

a.btn:hover {
	background: var(--groenig);
	color: var(--white);
	border: solid 2px var(--groenig);
}

.btn__inner {
	position: relative;
	z-index: 1;
}
/* END Button Classen */

/* NAVBAR CSS */

.navbar.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 30px;
	height: var(--navbar-height);
}

.navbar.container img{
	width: 150px;
}

.site-info h5{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	background: #26596A;
}

/* END NAVBAR CSS */

/* USP CSS */

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

.usps__inner {
	padding-top: var(--section-padding);
}

.usp-item__text p {
	text-align: center;
}

.usp-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.usp-item__text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* END USP CSS */

/* hero2 CSS */
.hero2__titel-wrapper {
	display: flex;
	justify-content: center;
}

.hero2__tussenstuk {
	width: 4px;
	background: var(--geel);
	margin-left: 20px;
	margin-right: 20px;
}

.hero2__inner {
	padding-top: 40px;
	display: flex;
	justify-content: center;
}

.hero2__inner p {
	text-align: center;
	width: 75%;
}

/* END hero2 CSS */

/* Video CSS */
.video__inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 16 / 9;
}

.video-thumbnail {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background-color: var(--black);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	z-index: 1;
}

.play-button {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: var(--geel);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.play-button::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 20px solid var(--white);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-left: 5px;
}

.video-player {
	width: 100%;
	height: 100%;
	background: var(--black);
	border-radius: 8px;
	border: solid 8px var(--black);
	display: none; 
}



/* END Video CSS */

/* Tekst CSS */
.tekst {
	padding: 40px 20px;
	background-color: #f9f9f9;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.tekst__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
}

.tekst__content {
	font-family: Arial, sans-serif;
	color: #333;
}

.tekst__content h2 {
	font-size: 24px;
	margin-bottom: 16px;
}

.tekst__content p {
	font-size: 16px;
	line-height: 1.6;
}

.tekst__content a {
	color: #007bff; 
	text-decoration: none;
}

.tekst__content a:hover {
	text-decoration: underline;
}

.tekst__image img {
	width: 100%;
	max-width: 400px;
	display: block;
	margin: 0 auto;
}
/* END Tekst CSS */

/* hero1 CSS */

.hero1__titel-wrapper {
	display: flex;
	justify-content: center;
}

.hero1__inner {
	padding-top: 40px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;

}

.hero1__inner p {
	text-align: center;
	width: 75%;
}

/* END hero1 CSS */

/* Footer CSS */

.footer {
	padding: 40px 20px;
	background-color: #f9f9f9; 
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
}

.footer__text {
	font-family: Arial, sans-serif;
	color: #333;
}

.footer__text p {
	margin: 16px 0px;
	white-space: nowrap;
}


.footer__text h4 span {
	font-weight: 700;
}


.footer__text strong {
	font-weight: bold;
	color: #000;
}

.btn-group.footerbtngroup {
	display: flex;
	gap: 16px;
	justify-content: flex-start;
	margin-top: 24px;
}

.footer__image img {
	width: 100%;
	max-width: 200px; 
	border-radius: 50%; 
	display: block;
	margin: 0 auto;
}

/* END Footer CSS */

@media (max-width: 768px) {

	.navbar.container img {
		width: 160px;
	}

	.navbar.container {
		align-items: center;
		gap: 24px;
	}

	.hero2__titel-wrapper {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: flex-start;
	}

	.hero2__inner p {
		text-align: left;
		width: 100%;
	}

	.btn__inner {
		font-size: 17px;
	}

	.usps__inner {
	}

	.usp-item__text p {
		display: flex;
		justify-content: center;
		text-align: center;
	}

	.swiper-pagination-bullet-active {
		background: var(--geel)!important;

	}

	.tekst__grid {
		grid-template-columns: 1fr;
	}

	.hero1__inner p {
		text-align: left;
		width: 100%;
	}

	.hero1__titel-wrapper {
		justify-content: flex-start;
	}

	.footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer__image img {
		margin-top: 20px;
	}

	.footer__text p {
		margin: 16px 0px;
		white-space: pre-wrap;
	}

	.btn-group.footerbtngroup {
		justify-content: center;
	}
}