@import url(https://fonts.bunny.net/css?family=poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);

:root {
	--bs-color-main: #036;
	--bs-color-second: #ff6a30;

	--bs-font-family: 'Poppins', Helvetica, sans-serif;
	--bs-font-main-color: #545454;
	--bs-font-text-headers-main-color: #003852;

	--bs-header-background: var(--bs-color-main);
	--bs-header-links-color: #fff;
	--bs-footer-background: var(--bs-header-background);
	--bs-hero-background: #a6d2ff;
	--bs-color-first-headline: var(--bs-color-main);

	--bs-border-radius: 8px;
	--bs-link-hover-color: var(--bs-color-second);

	--bs-button-background: var(--bs-color-second);
	--bs-button-hover-background: #e05428;

	--bs-hero-image-filter: blur(1px) opacity(42%);
	--bs-hero-height: 30em;
	--bs-top-position-heroText: 14em;
	--bs-h1-font-size: clamp(2.5rem, 2.5rem + 0.2286vw, 2.8rem);

	--logo-width: clamp(10em, 30%, 15em);
	--logo-width-mobile: clamp(8em, 55%, 12em);

	--bs-swiper-background-even: oklch(from var(--bs-color-second-background-dark) 98% 0.046 h);
	--bs-swiper-background-odd: oklch(from var(--bs-color-main-background-dark) 90% 0.07 h);
}

.hero {
	img {
		width: auto;
		left: 50%;
		transform: translateX(-50%);
	}
	.heroText h1 {
		text-shadow: rgba(145,151,161,40%) 0px 5px 4px;
	}
}