@charset "UTF-8";

:root,
[data-bs-theme=light] {
	--font: 'Inter', system-ui, sans-serif;
	--font-heading: 'Cormorant', serif;

	--primary-color: hsl(346 81% 54%);
	--primary-color-light: hsl(346 81% 64%);
	--primary-color-dark: hsl(346 81% 44%);

	--xxl: 7.5rem;
	--xl: 3.525rem;

	--bs-primary: var(--primary-color);
	--bs-primary-rgb: 233, 40, 84;

	--bs-light: hsl(33 61% 90%);
	--bs-light-rgb: 245, 231, 214;
	--bs-border-color: hsl(271 31% 18% / .24);

	--bs-dark: hsl(271 31% 18%);
	--bs-dark-rgb: 47, 32, 61;

	--bs-body-color: var(--bs-dark);

	--h1: clamp(2.9625rem, 5vw, 5.2625rem);
	--h1-home: clamp(2rem, 4vw, 5.2625rem);
	--h1-esp: clamp(2rem, 3.3vw, 4.5rem);
	--h2: clamp(2.21875rem, 3.9vw, 3.95rem);
	--h3: clamp(1.66875rem, 2.9vw, 2.9625rem);
	--h4: clamp(1.25rem, 2.2vw, 2.21875rem);
	--h5: clamp(1.15rem, 1.6vw, 1.66875rem);
	--h6: clamp(1.05rem, 1.25vw, 1.25rem);
	--lead: var(--h5);
	--navbar-height: 220px;

}

body {
	font-family: var(--font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--font-heading);
	margin-bottom: 1rem;
	font-weight: 600;

	em {
		font-style: normal;
		color: var(--primary-color);
	}
}

h1,
.h1 {
	font-size: var(--h1);
	line-height: 1.1;
}

.home h1 {
	font-size: var(--h1-home);
}

.home h1:lang(es),
.home h1:lang(en) {
	font-size: var(--h1-esp);
}

h2,
.h2 {
	font-size: var(--h2);
}

h3,
.h3 {
	font-size: var(--h3);
}

h4,
.h4 {
	font-size: var(--h4);
}

h5,
.h5 {
	font-size: var(--h5);
}

h6,
.h6 {
	font-size: var(--h6);
}

.lead {
	font-size: var(--lead);
	line-height: 1.4;
}

.container-fluid {
	padding-inline: 3vw;
}

@media (min-width: 1536px) {
	.container {
		max-width: 1470px;
	}
}

.inset-0 {
	inset: 0;
}

.p-xxl {
	padding: var(--xxl);
}

.p-xl {
	padding: var(--xl);
}

.px-xxl {
	padding-inline: var(--xxl)
}

.px-xl {
	padding-inline: var(--xl)
}

.pt-xxl {
	padding-top: var(--xxl);
}

.pb-xxl {
	padding-bottom: var(--xxl);
}

.py-xxl {
	padding-top: var(--xxl);
	padding-bottom: var(--xxl);
}

.mt-xxl {
	margin-top: var(--xxl);
}

.mb-xxl {
	margin-bottom: var(--xxl);
}

.my-xxl {
	margin-top: var(--xxl);
	margin-bottom: var(--xxl);
}

.pt-xl {
	padding-top: var(--xl);
}

.pb-xl {
	padding-bottom: var(--xl);
}

.py-xl {
	padding-top: var(--xl);
	padding-bottom: var(--xl);
}

.mt-xl {
	margin-top: var(--xl);
}

.mb-xl {
	margin-bottom: var(--xl);
}

.my-xl {
	margin-top: var(--xl);
	margin-bottom: var(--xl);
}


/*  navbar  */

.navbar {
	--bs-navbar-padding-x: 0;
	--bs-navbar-padding-y: 0;
	--bs-navbar-active-color: var(--primary-color);
	--bs-navbar-nav-link-padding-x: 1rem;
	--bs-navbar-brand-padding-y: 0;
	--bs-navbar-brand-margin-end: 0;

	height: var(--navbar-height);

	transition: box-shadow 200ms, height 200ms;

	&.affix {
		--navbar-height: 70px;
		background-color: hsl(33 61% 90% / .7);
		backdrop-filter: blur(.5rem);
	}
}

.navbar-brand {
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.navbar-brand-image {
	height: 200px;
	transition: height 200ms, background-color 200ms, padding 200ms;
}

.affix .container {
	position: relative;
}

.affix .navbar-brand {

	&::after {
		content: '';
		display: block;
		position: absolute;
		inset: -2rem -1rem;
		background-color: white;
		transform: skewY(-15deg);
		box-shadow: 0 0 2rem hsl(0 0% 0% / .15);
	}
}


.affix .navbar-brand-image {
	height: 80px;
	position: relative;
	z-index: 1;
}

.nav-link {
	color: var(--bs-dark);
	text-transform: uppercase;
	font-family: var(--font-heading);
}

.dropdown-menu {
	border: 0;
	padding: .75rem 1rem;
	border-radius: 0;
	box-shadow: 0 1rem 2.5rem -.5rem hsl(0 0% 0% / .25);
	background-color: hsl(0 0% 100% / .8);
}

.dropdown-item {
	padding: 0.25rem 0;
	transition: color 200ms, border-color 200ms;
	border-bottom: 1px solid transparent;

	&:hover,
	&:focus,
	&.active {
		color: var(--primary-color);
		background-color: transparent;
		border-bottom-color: var(--primary-color);
	}
}

.home {
	background-color: var(--bs-light);
}

/*  header  */

header {
	--header-radius: 8rem;
	border-radius: 0 0 var(--header-radius) var(--header-radius);
}

.home header {
	--h: 550px;
	min-height: var(--h);

	.header__img {
		min-height: var(--h);
	}
}

.slogan {
	padding-top: calc(var(--navbar-height)/2);
}

.header__img {
	height: 100vh;
	object-position: bottom;
}

.scroll {
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	text-decoration: none;
	color: var(--bs-body-color);
	font-family: var(--font-heading);
}

.scroll img {
	animation: scroll 2s linear  infinite forwards;
}

@keyframes scroll {
	0%, 50%, 100% {transform: translateY(0);}
	25% {transform: translateY(-5px);}
	75% {transform: translateY(5px);}
}

/*  main content */

.mix-multiply {
	z-index: 1;
	position: relative;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

.mix-darken {
	z-index: 1;
	position: relative;
	mix-blend-mode: darken;
	transform: translate3d(0, 0, 0);
}

.oferta__box {
	text-decoration: none;
	color: var(--bs-dark);
	background-color: var(--bs-light);
	transition: border-color 200ms;

	.bg-light {overflow: hidden;}

	.mix-multiply, .box__more {
		transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	&:hover {
		border-color: var(--bs-dark) !important;

		.mix-multiply {
			transform: scale(1.03);
		}

		.box__more {
			transform: translateX(5px);
		}
	}
}

.zigzag {
	position: relative;
	z-index: 2;

	&::after {
		content: '';
		display: block;
		width: 100%;
		height: 30px;
		background-image: url(../img/triangles.svg);
		background-position: center 0;
		background-repeat: repeat-x;

		position: absolute;
		bottom: -30px;
		left: 0;
	}
}

#poznaj-tajemnice {
	background-image: url(../img/bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

#mapa iframe {
	width: 100%;
	height: 500px;
	display: block;
}

.btn {
	--bs-btn-padding-x: 1.875rem;
	--bs-btn-padding-y: 1.25rem;
	--bs-btn-font-size: 1rem;
	--bs-btn-font-weight: 700;
	--bs-btn-line-height: 1.5;
}

.btn-primary {
	--bs-btn-bg: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-bg: var(--primary-color-light);
	--bs-btn-hover-border-color: var(--primary-color-light);
	--bs-btn-active-bg: var(--primary-color-dark);
	--bs-btn-active-border-color: var(--primary-color-dark);
}

.btn-outline-primary {
	--bs-btn-color: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-bg: var(--primary-color);
	--bs-btn-hover-border-color: var(--primary-color);
	--bs-btn-active-bg: var(--primary-color);
	--bs-btn-active-border-color: var(--primary-color);
}





/* footer */

footer {
	background-color: black;
	color: white;
}

footer a {
	text-decoration: none;
	color: white;
	transition: color 200ms;

	&:hover,
	&:focus {
		color: var(--primary-color-light);
	}
}

.list-unstyled li+li {
	margin-top: 0.75em;
}

.madeby {
	display: flex;
	align-items: center;

	small {
		font-size: 0.625rem;
		margin: 0.2em 0.2em 0 0;
	}
}


/*  sub content  */

.sub header {
	width: 100%;
	overflow: hidden;
	--f: 'Big Shoulders Display', sans-serif;
	background-color: var(--bs-light);

	padding-top: var(--navbar-height);
	padding-bottom: var(--xxl);

	.header__special {

		img {
			position: relative;
			z-index: 2;
		}

		h1 {
			z-index: 1;
		}

		h1,
		.h1 {
			position: absolute;
			font-family: var(--f);
			color: white;
			display: block;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			text-transform: uppercase;
			font-size: clamp(10rem, 30vw, 35.25rem);
		}

		h1:lang(en),
		.h1:lang(en),
		h1:lang(es),
		.h1:lang(es) {
			font-size: clamp(5rem, 23vw, 23rem);
		}

		.h1 {
			z-index: 3;
			-webkit-text-stroke-width: 3px;
			-webkit-text-stroke-color: white;
			text-stroke-width: 3px;
			text-stroke-color: white;
			color: transparent;
		}

	}
}

.gallery a {
	overflow: hidden;
	display: block;

	img {
		display: block;
		width: 100%;
		transition: transform 400ms ease;
	}

	&:hover img {
		transform: scale(1.1)
	}
}

.downloads a {
	text-decoration: none;
	color: black;
	border: 1px solid hsl(0 0% 90%);
	border-radius: .25rem;
	transition: color 200ms, border-color 200ms;

	&:hover {
		color: var(--primary-color);
		border-color: var(--primary-color);
	}
}

.form-control {
	border-radius: .25rem;

	&.error {
		border-color: red;
	}
}

.error-msg {
	color: red;
}

.langs {
	position: absolute;
	top: .5rem;
	right: .5rem;
	z-index: 99999;
}

.langs .dropdown-menu {
	max-width: fit-content;
	min-width: max-content;
	font-family: var(--font-heading);
	background-color: var(--bs-light);
}






/*  media query  */

@media (max-width: 1199px) {
	.navbar {
		--navbar-height: auto;
	}

	.navbar-brand {
		position: relative !important;
		left: 0;
		transform: none;
	}

	.navbar-brand-image {
		height: 150px;
	}

	.affix .navbar-brand {
		top: auto;
	}

	.affix .navbar-brand-image {
		border-radius: 50%;
		height: 65px;
		box-shadow: none;
		padding: 0;
	}

	.home header {
		--h: 400px;
	}
}


@media (max-width: 991px) {
	#poznaj-tajemnice {
		position: relative;
		isolation: isolate;

		&::after {
			content: '';
			display: block;
			inset: 0;
			background-color: hsl(0 0% 0% / .4);
			position: absolute;
			z-index: -1;
		}
	}

	footer {
		text-align: center;
	}

	.madeby {
		margin-top: 10px;

		small {
			margin: .15rem .3rem 0 0;
		}
	}

	main {
		overflow: hidden;
	}
}



@media (max-width: 767px) {
	.home header {
		--h: 430px;
		max-height: 500px;

		.header__img {
			max-height: 500px;
		}
	}

	.slogan {
		text-shadow: 0 .25rem 1rem var(--bs-light)
	}

	.header__img {
		opacity: .4 !important;
	}
}


@media (max-width: 575px) {
	:root {
		--navbar-height: 120px;
		--xxl: 4rem;
		--xl: 2rem;
	}

	.navbar-brand-image {
		height: 90px;
	}

	.header__img {
		--header-radius: 3rem;
	}

	.home header {
		--h: 350px;
		max-height: var(--h);

		.header__img {
			opacity: .4 !important;
			max-height: var(--h);
		}
	}

	.home header:lang(es) {
		--h: 420px
	}

	.scroll {display: none !important;}

	.slogan h1 {
		font-size: var(--h2);
	}

	.oferta__box {
		padding: 1rem !important;
	}

	#poznaj-tajemnice {
		background-position: left;

		&::after {background-color: hsl(0 0% 0% / .6);}
	}

	.header__special {
		h1, .h1 {
			-webkit-text-stroke-width: 2px !important;
			text-stroke-width: 2px !important;
			font-size: clamp(7rem, 10vw, 35rem) !important;
		}

		h1:lang(en),
		.h1:lang(en),
		h1:lang(es),
		.h1:lang(es) {
			font-size: clamp(5rem, 10vw, 23rem) !important;
		}
	}
}


@media (max-width: 435px) {
	.home header {
		background-color: var(--bs-light);
		border-radius: 0 0 3rem 3rem;
	}

	.slogan {padding-top: 100px;}
	.slogan h1 {font-size: var(--h4);}

	#tradycja,
	#poznaj-tajemnice {
		text-align: center;
	}

	#poznaj-tajemnice .d-flex.gap-4 {
		flex-direction: column;
		align-items: center;
	}

	.box__more {height: 2.5rem;}

	.home header {
		--h: 350px;
	}

	.home header:lang(en),
	.home header:lang(es) {
		--h: 400px
	}

}