@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
	--color-white: white;
	--color-white-20: rgba(255, 255, 255, 0.2);
	--color-white-50: rgba(255, 255, 255, 0.5);
	--color-brown-light: rgb(249, 247, 245);
	--color-brown-light-20: rgba(249, 247, 245, 0.2);
	--color-brown-light-50: rgba(249, 247, 245, 0.5);
	--color-brown-light-80: rgba(249, 247, 245, 0.8);
	--color-brown-medium: #f3efea;
	--color-brown-darker: #1b1714;
	--color-brown-dark: #2d2a27;
	--color-brown-dark-12: rgba(45, 42, 39, 0.12);
	--color-brown-dark-20: rgba(45, 42, 39, 0.2);
	--color-brown-dark-50: rgba(45, 42, 39, 0.5);
	--color-brown-dark-60: rgba(45, 42, 39, 0.6);
	--color-brown-dark-80: rgba(45, 42, 39, 0.8);
	--color-orange: #d68c45;
	--color-orange-dark: #c77d37;
	--color-orange-light: rgba(214, 140, 69, 0.1);
}

/* colors */
.bg-brown-light {
	background-color: var(--color-brown-light);
}
.bg-brown-medium {
	background-color: var(--color-brown-medium);
}
.bg-brown-light-80 {
	background-color: var(--color-brown-light-80);
}
.bg-brown-dark {
	background-color: var(--color-brown-dark);
}
.bg-brown-darker {
	background-color: var(--color-brown-darker);
}
.bg-orange {
	background-color: var(--color-orange-dark);
}
.bg-orange-light {
	background-color: var(--color-orange-light);
}
.text-brown-light {
	color: var(--color-brown-light);
}
.text-brown-dark {
	color: var(--color-brown-dark);
}
.text-orange {
	color: var(--color-orange);
}

html,
body {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	color: var(--color-brown-dark);
	font-size: 16px;
	background-color: var(--color-brown-light);
}
.border-dark {
	border-color: var(--color-brown-dark-12);
}

h1 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: -2px;
	line-height: 115%;
}
h2 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: -1.5px;
	line-height: 115%;
}
h3 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: -1px;
	line-height: 115%;
}

.divider {
	width: 100%;
	height: 1px;
	background-color: var(--color-brown-dark-12);
}

/* nav */
.border-bottom {
	border-bottom: 1px solid var(--color-brown-dark-12);
}
nav a:hover,
footer a:hover {
	text-decoration: underline;
}

/* buttons and inputs */
input[type="email"] {
	padding: 12px 22px;
	color: var(--color-brown-dark);
	border: 1px solid var(--color-brown-dark-20);
}
.btn-sm {
	padding: 10px 22px;
}
.btn-lg {
	padding: 14px 26px;
}
.btn-transparent {
	color: var(--color-brown-dark);
}
.btn-transparent:hover {
	cursor: pointer;
	opacity: 0.8;
}
.btn-white {
	color: var(--color-brown-dark);
	background-color: var(--color-white);
}
.btn-white:hover {
	cursor: pointer;
	background-color: var(--color-white-50);
}
.btn-brown {
	background-color: var(--color-brown-dark);
	color: var(--color-white);
}
.btn-brown:hover {
	cursor: pointer;
	background-color: var(--color-brown-dark-50);
}
.btn-orange {
	color: var(--color-white);
	background-color: var(--color-orange);
}
.btn-orange:hover {
	background-color: var(--color-orange-dark);
	cursor: pointer;
}
.btn-outline {
	color: var(--color-brown-dark);
	border: 1px solid var(--color-brown-dark-20);
}
.btn-outline:hover {
	border: 1px solid var(--color-brown-dark);
	cursor: pointer;
}
.btn-outline-dark {
	color: var(--color-brown-light);
	border: 1px solid var(--color-brown-light-20);
}
.btn-outline-dark:hover {
	border: 1px solid var(--color-brown-light);
	cursor: pointer;
}
.tag-dark {
	padding: 8px 20px;
	color: var(--color-white);
	border: 1px solid var(--color-brown-light-50);
	letter-spacing: 1px;
}
.tag {
	padding: 8px 20px;
	color: var(--color-brown-dark);
	border: 1px solid var(--color-brown-dark-20);
	letter-spacing: 1px;
}
@media (max-width: 640px) {
	.btn-lg {
		padding: 12px 22px;
	}
}

/* hero */
.hero .subtitle {
	font-weight: 400;
	max-width: 38rem;
	line-height: 160%;
}
@media (max-width: 640px) {
	.hero .btn-lg {
		width: 280px;
	}
}

/* video */
.video {
	overflow: hidden;
}
.video:hover {
	cursor: pointer;
}
.video .bg {
	inset: 0;
	transition: transform 0.6s ease;
	background: url("assets/img/bg.webp") center/cover;
}
.video:hover .bg {
	transform: scale(1.05);
}
.video .bg:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		20deg,
		var(--color-brown-dark-80) 10%,
		transparent 70%
	);
}
.play-icon {
	border-radius: 100%;
	border: 1px solid var(--color-white-50);
}
.video:hover .play-icon,
.vertical-card:hover .play-icon {
	border: 1px solid var(--color-white);
}
@media (max-width: 640px) {
	.video .bg:after {
		background: linear-gradient(
			20deg,
			var(--color-brown-dark-80),
			transparent 70%
		);
	}
}

/* lesson */
.big-box:hover {
	cursor: pointer;
}
.big-box:hover .tag {
	border: 1px solid var(--color-brown-dark);
}
.big-box .bg {
	inset: 0;
	transition: transform 0.6s ease;
}
.big-box .bg-1 {
	background: url("assets/img/lesson-1.webp") center/cover;
}
.big-box .bg-2 {
	background: url("assets/img/lesson-2.webp") center/cover;
}
.big-box .bg-3 {
	background: url("assets/img/lesson-3.webp") center/cover;
}
.big-box .bg-4 {
	background: url("assets/img/volunteers.webp") center/cover;
}
.big-box .bg-5 {
	background: url("assets/img/church.webp") center/cover;
}
.big-box .bg-6 {
	background: url("assets/img/newsletter.webp") center/cover;
}
.big-box:hover .bg {
	transform: scale(1.05);
}

.vertical-card {
	overflow: hidden;
}
.vertical-card:hover {
	cursor: pointer;
}
.vertical-card .bg {
	inset: 0;
	transition: transform 0.6s ease;
}
.vertical-card .bg-1 {
	background: url("assets/img/lesson-1.webp") center/cover;
}
.vertical-card .bg-2 {
	background: url("assets/img/lesson-2.webp") center/cover;
}
.vertical-card .bg-3 {
	background: url("assets/img/lesson-3.webp") center/cover;
}
.vertical-card .bg-4 {
	background: url("assets/img/profile.webp") center/cover;
}
.vertical-card:hover .bg {
	transform: scale(1.05);
}
.vertical-card .bg:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	transition: all 0.6s ease;
	background: linear-gradient(
		20deg,
		var(--color-brown-dark-80) 20%,
		transparent 80%
	);
}
.vertical-card:hover .tag-dark {
	border: 1px solid var(--color-white);
}

/* questions */
.question:hover {
	cursor: pointer;
}
.question .arrow {
	border-radius: 100%;
	border: 1px solid var(--color-brown-dark-20);
}
.question:hover .arrow {
	border: 1px solid var(--color-brown-dark);
}

#pruvodci .subtitle {
	font-weight: 400;
	max-width: 35rem;
}

#map-close-btn {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 3rem;
	height: 3rem;
	border-radius: 3rem;
	background-color: var(--color-brown-light);
	cursor: pointer;
	position: absolute;
	top: 1rem;
	right: 1rem;
}
#map-close-btn:hover {
	opacity: 0.8;
}
@media (max-width: 640px) {
	#map-close-btn {
		justify-content: center;
		align-items: center;
		display: flex;
		width: 2rem;
		height: 2rem;
		border-radius: 2rem;
		background-color: var(--color-brown-light);
		cursor: pointer;
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
}