@import url("cFonts.css");
@layer reset, dev, base, theme, layout, widgets, blocks;

/* https://jakelazaroff.com/words/my-modern-css-reset/ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  ol, ul {
    list-style: none;
  }

  :not([class]) {
    h1&, h2&, h3&, h4&, h5&, h6& {
      text-wrap: balance;
    }

    ol&, ul& {
      padding-inline-start: 1.5em;
      list-style: revert;
    }
  }
}





:root {
	--hslColor__navy: 197 100% 17%;
	--hslColor__blue: 197, 100%, 28%;
	--hslColor__blue--light: 197, 100%, 35%;
	--hslColor__lime: 68, 100%, 78%;
	--hslColor__silver: 192, 23%, 91%;
	--hslColor__silver--light: 200, 14%, 91%;
	--hslColor__gray: 191, 14%, 70%;
	
	--color__navy: hsl(var(--hslColor__navy));
	--color__blue: hsl(var(--hslColor__blue));
	--color__blue--light: hsl(var(--hslColor__blue--light));
	--color__lime: hsl(var(--hslColor__lime));
	--color__silver: hsl(var(--hslColor__silver));
	--color__silver--light: hsl(var(--hslColor__silver--light));
	--color__gray: hsl(var(--hslColor__gray));
	--color__black: hsl(0, 0%, 0%);
	--color__white: hsl(0, 0%, 100%);
	
	--family1: aktiv-grotesk, sans-serif;
	
	--size__h1: 2.5rem;
	--size__h2: 1.875rem;
	--size__h3: 1.625rem;
	--size__h4: 1.4375rem;
	--size__h5: 1.3125rem;
	--size__body--big: 1.25rem;
	--size__body: 1rem;
	--size__body--small: 0.875rem;
	--size__preheading: 0.875rem;
	
	--lh__h1: 1.05;
	--lh__h2: 1.10;
	--lh__h3: 1.15;
	--lh__h4: 1.20;
	--lh__h5: 1.20;
	--lh__body--big: 1.35;
	--lh__body: 1.40;
	--lh__body--small: 1.40;
	--lh__preheading: 1.25;
	
	--weight__medium: 500;
	--weight__normal: 400;
	
	--spacer: 1.25rem;
		--spacing0: 0;
		--spacing1: calc(var(--spacer) * 0.25);
		--spacing2: calc(var(--spacer) * 0.5);
		--spacing3: var(--spacer);
		--spacing4: calc(var(--spacer) * 1.5);
		--spacing5: calc(var(--spacer) * 3);
		--spacing6: calc(var(--spacer) * 4);
		--spacing7: calc(var(--spacer) * 5);
	
	--gridGap: 1.25rem;
	--headerOffset: 8rem;
	--borderRadius: 1rem;
}




@layer layout {
	:root {
		--grid: grid;
			--w__gridOffsetLeft: 2;
			--w__gridOffsetRight: -2;
			--w__gridGap: 0.5em;
	}
	
	.masterWrapper {
		min-height: 100vh;
		display: flex;
		
		flex-direction: column;
	}

	.masterWrapper > * {
		flex: 0 0 auto;
	}

		.masterWrapper__body {
			flex: 1 1 auto;
		}


	.wrapper__masterLayout {
		flex: 1 0 auto;
	}

	.w {
		display: grid;
		grid-template-columns: 
			0
			repeat(4, minmax(0.5em, 1fr)) 
			0;
		
		align-content: start; 
		column-gap: var(--gridGap);
	}

		
		
		:where(.w > *) {
			grid-column: var(--w__gridOffsetLeft, 1) / var(--w__gridOffsetRight, -1);
		}
	 
	.ws { 
		display: grid;
		grid-template-columns: subgrid;
		
		grid-column: var(--w__gridOffsetLeft, 2) / var(--w__gridOffsetRight, -2);
	}

		:where(.ws > *) {
			grid-column: 1 / -1;
		}

		.ws--F {
			--w__gridOffsetLeft: 1;
			--w__gridOffsetRight: -1;
		}
		
			:where(.ws--F > *) {
				grid-column: calc(var(--w__gridOffsetLeft, 1) + 1) / calc(var(--w__gridOffsetRight, -1) - 1);
			}
		
		.ws--C, 
		.ws--B, 
		.ws--A {
			--w__gridOffsetLeft: 2;
			--w__gridOffsetRight: -2;
		}
		
	.flow > * + * {
		margin-top: var(--flow, 0.7em);
	}
	
	@media (min-width: 48em) {
		.w {
			display: grid;
			grid-template-columns: 
				0
				repeat(12, minmax(0.5em, 1fr)) 
				0;
			
			align-content: start; 
			column-gap: var(--gridGap);
		}
		
		.ws--A {
			--w__gridOffsetLeft: 2;
			--w__gridOffsetRight: -2;
		}
		 
		.ws--C, 
		.ws--B {
			--w__gridOffsetLeft: 3;
			--w__gridOffsetRight: -3;
		}
	}
	
	@media (min-width: 65em) {
		.ws--C {
			--w__gridOffsetLeft: 4;
			--w__gridOffsetRight: -4;
		}
	}
	
	@media (min-width: 114em) {
		.w {
			display: grid;
			grid-template-columns: 
				1fr
				repeat(12, minmax(0.5em, 113px)) 
				1fr;
			
			align-content: start; 
			column-gap: var(--gridGap);
		}
	}
}







@layer base {
	html {
		
	}
	
	[id] {
		scroll-margin-top: var(--header-height, 8em);
	}

	body {
		color: var(--color__navy);
		font-size: var(--size__body);
		line-height: 1.5;
		font-family: var(--family1);
	}

	h1, h2, h3, h4, h5 {
		leading-trim: both;
		text-edge: cap;
		font-weight: var(--weight__regular);
		
	}

	.text--h1, 
	h1 {
		font-size: var(--size__h1);
		line-height: var(--lh__h1);
		letter-spacing: -2%;
	}

	.text--h2, 
	h2 {
		font-size: var(--size__h2);
		line-height: var(--lh__h2);
		letter-spacing: -2%;
	}

	.text--h3, 
	h3 {
		font-size: var(--size__h3);
		line-height: var(--lh__h3);
		letter-spacing: -1.5%;
	}

	.text--h4, 
	h4 {
		font-size: var(--size__h4);
		line-height: var(--lh__h4);
		letter-spacing: -1.5%;
	}

	.text--h5, 
	h5 {
		font-size: var(--size__h5);
		line-height: var(--lh__h5);
		letter-spacing: -1%;
	}
	
	a {
		color: currentColor;
		text-decoration: none;
		transition: color .3s;
	}
	
	.body--big {
		font-size: var(--size__body--big);
		line-height: var(--lh__body--big);
	}
	
	.body--regular {
		font-size: var(--size__body);
		line-height: var(--lh__body);
	}
	
	.body--small {
		font-size: var(--size__body--small);
		line-height: var(--lh__body--small);
	}
	
	.nadnaslov {
		font-size: var(--size__preheading);
		line-height: var(--lh__preheading);
		text-transform: uppercase;
		font-weight: var(--weight__medium);
		letter-spacing: 5%;
	}
	
	.radius1 {
		overflow: hidden;
		border-radius: var(--borderRadius);
	}
	
	.b {
		--padding: 1rem 1.625rem;
		
		display: inline-block;
		padding: var(--padding);
		
		border-radius: 3rem;
		background-color: var(--colorBg, var(--color__navy));
		border: 1px solid var(--colorBorder, var(--color__navy));
		color: var(--colorText, var(--color__white));
		
		font-weight: var(--weight__medium);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		
		transition: 
			color .3s,
			background-color .3s,
			border-color .3s;
	}
	
	.b--primary:hover {
		--colorBg: var(--color__blue);
		--colorBorder: var(--color__blue);
	}
	
	.b--secondary {
		--colorBg: var(--color__white);
		--colorText: var(--color__navy);
		--colorBorder: var(--color__gray);
	}
	
		.b--secondary:hover {
			--colorBorder: var(--color__navy);
		}
	
	.b--ghost {
		--colorBg: transparent;
		--colorText: var(--color__navy);
		--colorBorder: var(--color__gray);
	}
	
		.b--ghost:hover {
			--colorBg: var(--color__navy);
			--colorText: var(--color__white);
			--colorBorder: var(--color__navy);
		}
	
	.b:has(.icon) {
		display: inline-flex;
		align-items: center; 
		gap: var(--spacing2);
	}
	
	.b .icon {
		flex: 0 0 auto;
		stroke: currentColor;
		fill: currentColor;
	}
}


.header__logo { 
	position: absolute;
	top: var(--gridGap);
	left: var(--gridGap);
	z-index: 80;

	display: inline-block;
	width: clamp(6.25rem, 10%, 8.75rem);
}

	.header__logo img {
		height: auto;
	}

#nav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 90;
	transform: translateX(calc(100% + 2rem));
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--gridGap);
	
	width: 100%;
	max-width: 60rem;
	height: 100dvh;
	
	background-color: var(--color__white);
	
	transition: transform .6s;
}

#nav[aria-hidden="false"] {
	transform: translateX(0);
}

.nav {
	--flow: 1.5rem;
}

.nav a:hover {
	color: var(--color__blue);
}

.nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

	#nav ul li + li {
		margin-top: var(--spacing3);
	}

.nav--main {
	font-size: var(--size__h1);
}

.nav--sec {
	margin-top: var(--spacing4);
	font-size: var(--size__h5);
}



.languages {
	position: absolute;
	top: calc((var(--gridGap) / 2) + (3.375rem / 2));
	right: 6em;
	
	font-size: var(--body--big);
}






#btnMenu {	
	position: fixed;
	top: var(--gridGap);
	right: var(--gridGap);
	z-index: 100;
	
	width: 3.375rem;
	aspect-ratio: 1;
	
	background-color: var(--color__white);
	border: 0;
	border-radius: 50%;
	
	transition: 
		transform .2s ease, 
		background-color .2s;
}

	#btnMenu:hover {
	}
	
	#btnMenu:hover::after {
		top: 30%;
	}

	#btnMenu:hover:before {
		top: 70%;
	}
	
	

#btnMenu span, 
#btnMenu:before, 
#btnMenu::after {
	position: absolute;
	
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	
	width: 1.625rem;
	height: 4px;
	
	border-radius: 2px;
	background-color: var(--color__navy);
	content: "";
	
	transition: top .3s, transform .6s;
}

	#btnMenu span {
		opacity: 1;
		transition: opacity .3s;
	}

	#btnMenu::after {
		top: 33%;
	}

	#btnMenu:before {
		top: 67%;
	}

#btnMenu[aria-expanded="true"] {
	transform: rotate(-90deg);
	transition: 
		transform .6s ease-in-out, 
		background-color .3s;
}

	#btnMenu[aria-expanded="true"] span {
		opacity: 0;
	}

	#btnMenu[aria-expanded="true"]:hover {
	}

	#btnMenu[aria-expanded="true"]::after {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#btnMenu[aria-expanded="true"]:before {
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}


.footer {
	--flow: 2rem;
}

.nav--footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing4);
}

.nav--footer h3 {
	white-space: nowrap;
}

.nav--footer h3 + ul {
	margin-top: 1rem;
}

.nav--footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing1) var(--spacing3);
}

.footnotes {
	--flow: 1rem;
	margin-top: calc(5 * var(--flow));
}

.nav--foot ul {
	display: flex;
	flex-direction: column;
	gap: var(--spacing4);
}

.nav--footer a[href^="mailto:"] {
	white-space: nowrap;
}




@layer theme {
	.theme {
	}
	
	.theme--first {
		padding-top: var(--headerOffset);
	}
	
	.theme--pad {
		padding-left: var(--gridGap);
		padding-right: var(--gridGap);
	}
	
	.theme--lime {
		background-color: var(--color__lime);
	}
	
	.theme--silver {
		background-color: var(--color__silver--light);
	}
	
	.theme--navy {
		background-color: var(--color__navy);
		color: var(--color__white);
	}
	
	.theme--image .b--primary,
	.theme--navy .b--primary {
		--colorBg: var(--color__white);
		--colorBorder: var(--color__white);
		--colorText: var(--color__navy);
	}
	
	.theme--image .b--primary:hover, 
	.theme--navy .b--primary:hover {
		--colorBg: hsl(197, 40%, 86%);
		--colorBorder: var(--colorBg);
		--colorText: var(--color__navy);
	}
	
	.theme--image .b--secondary, 
	.theme--navy .b--secondary {
		--colorBg: var(--color__navy);
		--colorText: var(--color__white);
		--colorBorder: var(--color__gray);
	}
	
	.theme--image .b--secondary:hover, 
	.theme--navy .b--secondary:hover {
		--colorBorder: var(--color__white);
	}
}













@layer widgets {
	
}







@media (min-width: 48em) {
	.nav--foot ul {
		flex-direction: row;
	}
	
	.nav--footer ul {
		flex-direction: column;
	}
	
	.footnotes {
		display: flex;
		gap: var(--gridGap);
	}
	
	.nav--foot {
		margin-top: 0;
	}
	
	#nav {
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	}
	
	#nav > div {
		margin-right: 20%;
	}
}

@media (min-width: 65em) {
	:root {
		--size__h1: 4rem;
		--size__h2: 2.75rem;
		--size__h3: 2rem;
		--size__h4: 1.75rem;
		--size__h5: 1.5rem;
		--size__body--big: 1.3125rem;
		--size__body: 1.125rem;
		--size__body--small: 0.875rem;
		--size__preheading: 0.9375rem;
		
		--lh__h1: 1.05;
		--lh__h2: 1.10;
		--lh__h3: 1.15;
		--lh__h4: 1.20;
		--lh__h5: 1.20;
		--lh__body--big: 1.40;
		--lh__body: 1.60;
		--lh__body--small: 1.60;
		--lh__preheading: 1.25;
		
		--headerOffset: 11rem;
		--borderRadius: 2rem;
	}
	
	
}

@media (min-width: 90em) {
	.nav--footer {
		flex-direction: row;
		gap: calc(var(--gridGap) * 2);
	}
}

@media (min-width: 100em) {
	:root {
		--gridGap: 2.5rem;
	}
}


@media (min-width: 116em) {
	.header__logo {
		left: max(0px, calc((100% - 1796px) / 2));
	}
	
	#btnMenu {
		right: calc((100% - 1796px) / 2);
	}
}