:root {
	--sand: #DED4C3;
	--green: #00AE9A;
	--dark-blue: #142f4e;
	--orange: #ca6431;
	--white-ish: #EFE9E1;
	--yellow: #faea7a;
	--orange-blah: #ffd798;

	--font-color: var(--dark-blue);

	--container-padding: 25px;
	--container-width: calc(1205px + var(--container-padding) * 2);

	--text-size: 16px;
	--text-line-height: 130%;
	--text-block-margin: 24px;

	--font-bit-bigger: calc(var(--text-size) * 1.2);

	--heading-font-size: 60px;
	--heading-line-height: normal;
}

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

body, html {scroll-behavior: smooth; overflow-x: clip;}

body, a, input, select, button, textarea {font-family: var(--font-inter); font-size: 20px; line-height: 130%;}
body, input, select, button, textarea {font-weight: normal;}
body, a, section {color: var(--font-color);}

h1, h2, h3, h4, h5, h6 {}
h1 {font-size: 46px; line-height: 65px; letter-spacing: -0.02em; font-family: var(--font-oswald); margin-bottom: 30px; font-weight: normal;}
h2 {font-size: 38px; line-height: normal; font-weight: normal; margin-bottom: 24px; letter-spacing: -0.02em; font-family: var(--font-oswald); max-width: max-content;}
h2::after {content: ''; display: block; width: 100%; height: 5.5px; background: var(--font-color); margin-top: 2px;}

body {background: var(--white-ish);}

.Container {margin-left: auto; margin-right: auto; max-width: var(--container-width); padding: 0 var(--container-padding);}

.Button {font-size: 14px; line-height: 150%; cursor: pointer; padding: 14px 24px; display: inline-flex; align-self: center; border-radius: 8px; background: var(--green); color: var(--sand); font-weight: bold; border: none; text-decoration: none;}
.BlueButton {background: var(--dark-blue); color: var(--green);}
.YellowButton {background: var(--orange-blah); color: var(--green) !important;}
.FullYellowButton {background: var(--yellow); color: var(--green) !important;}
.WhiteButton {background: var(--white-ish); color: var(--green) !important;}
.OrangeButton {background: var(--orange); color: var(--white-ish) !important;}

#Head {
	--logo-width-max: 250px;
	--logo-width-min: 150px;
	--logo-width-diff: 100px;
}
#Head {top: 0; transition: padding 0.3s ease; z-index: 2; width: 100%;}
#Head .Container {display: flex; justify-content: space-between; align-items: center; background: #DED4C3; border-radius: 0 0 10px 10px; padding-top: 16px; padding-bottom: 16px;}
#Head #Logo {transition: all 0.3s ease; display: flex;}
#Head #Logo img {height: auto; max-width: calc(var(--logo-width-max) - var(--logo-width-diff) * var(--scroll-progress, 0)); transition: height 0.3s ease;}
#Head nav {display: flex; align-items: center; gap: 4px;}
#Head nav a {padding: 14px 18px; font-size: 20px; line-height: 150%; font-weight: 600; text-decoration: none; color: var(--green); border-radius: 8px; transition: all 0.3s ease;}

#Head nav a:hover {background-color: rgba(0, 174, 154, 0.1);}


#Foot {position: relative; padding-top: 213px; padding-bottom: 81px; display: flex; gap: 25px; align-items: flex-end;}
#Foot::before {position: absolute; content: ''; top: 0; left: -100vw; right: -100vw; height: 100%; background: var(--green); z-index: -1;}

#Foot, #Foot a {color: var(--white-ish); text-decoration: none; line-height: 130%; font-weight: bold; transition: text-decoration 0.3s ease;}

#Foot a:hover {text-decoration: underline;}

#Foot > * {flex: 1;}
/*#Foot div:nth-of-type(2) {text-align: center;}*/
/*#Foot div:nth-of-type(3) {text-align: right;}*/
#Foot .Logo img {max-width: 250px;}

.Text, .Text :is(p, li, td, th) {font-size: var(--text-size); line-height: var(--text-line-height);}
.Text :is(p, ul, ol, table, .MediaGallery):not(:last-child) {margin-bottom: var(--text-block-margin);}

.BtnRight p:has(.Button) {text-align: right;}

@media (max-width: 1200px) {
	#Head {
		--logo-width-max: 200px;
		--logo-width-min: 100px;
		--logo-width-diff: 100px;
	}
	#Head nav a {padding: 12px 14px; font-size: 18px;}
}

@media (max-width: 1100px) {
	#Head nav a {font-size: 16px;}
}

@media (max-width: 1024px) {
	#Head {
		--logo-width-max: 150px;
		--logo-width-min: 100px;
		--logo-width-diff: 50px;
	}
	#Head nav a {padding: 10px 12px; font-size: 14px;}
}

@media (min-width: 800px) {
	#Head {position: fixed;}

	.Text > :is(p, ul, ol) {max-width: 730px;}
	:root {
		--text-size: 22px;
	}

	#Nav {display: none;}
	#BurgerMenu {display: none;}
}
@media (max-width: 800px) {
	.Button {font-size: 14px; padding: 7px 10px 9px 10px; min-height: 36px;}
}
@media (min-width: 800px) {
	.Button {font-size: 16px;}
}

@media (max-width: 768px) {
	#Head {z-index: 1000;}
	#Head .Container {padding-top: 10px; padding-bottom: 10px; align-items: center;}
	#Head #Logo img {height: 40px;}
	#MainNav {position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--sand); display: flex; flex-direction: column; align-items: flex-start; padding: 80px 30px 30px; gap: 0; z-index: 1000; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);}
	#MainNav.open {right: 0;}
	#MainNav a {width: 100%; padding: 16px 0; font-size: 20px; border-radius: 0; border-bottom: 1px solid rgba(0, 174, 154, 0.1);}
	#MainNav a:last-child {border-bottom: none;}

	body::before {content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; pointer-events: none; transition: opacity 0.3s ease; opacity: 0; background: rgba(0, 0, 0, 0.5);}
	body.menu-open {overflow: hidden;}
	body.menu-open::before {pointer-events: auto; opacity: 1;}
}

@media (max-width: 799px) {
	:root {--text-size: 16px; --text-block-margin: 16px; --font-bit-bigger: 18px; --heading-font-size: 32px; --heading-line-height: 38px;}
	body, a, input, select, button, textarea {font-size: 16px;}

	#Head #BurgerMenu {display: none;}
	#Head .Container {justify-content: center;}
	#Head #Logo img {height: 92px; width: auto; max-width: none;}

	.Heading {--text-line-height: 38px; --dash-width: 40px; --gap: 16px; margin-bottom: 40px;}
	.Heading::before {height: 3px; transform: translateY(1px);}

	#Nav {border-radius: 20px 20px 0 0; display: grid; grid-template-columns: max-content 1fr; background: #DED4C3; position: fixed; bottom: 0; z-index: 500; padding: 15px 0 15px calc(var(--container-padding) - 12px); align-items: center; overflow: hidden;}
	#Nav nav {display: flex; overflow: auto; gap: 11px; scroll-snap-type: x mandatory; padding-right: var(--container-padding); scrollbar-width: none; -ms-overflow-style: none;}
	#Nav nav::-webkit-scrollbar {display: none;}
	#Nav nav a {white-space: nowrap; border-radius: 8px; background: #EFE9E1; display: flex; justify-content: center; align-items: center; padding: 6px 4px; font-weight: 600; font-size: 20px; line-height: 150%; text-decoration: none; color: var(--green); scroll-snap-align: start; transition-duration: 150ms; transition-property: color, background-color;}
	#Nav nav a.Active {background: var(--green); color: var(--white-ish);}

	.BurgerBtn {display: flex; flex-direction: column; justify-content: space-around; width: 58px; height: 51.5px; background: transparent; border: none; cursor: pointer; padding: 12px; z-index: 1001; gap: 5.5px;}
	.BurgerBtn span {width: 100%; height: 5.5px; background: var(--green); border-radius: 99px; transition: all 0.3s ease; transform-origin: center;}

	.WidthShorterText > :is(p, ul, ol) {max-width: 330px;}
}

@media (max-width: 480px) {
	:root {--heading-font-size: 28px; --heading-line-height: 34px;}
	#Head nav a {padding: 8px 12px;}
}


@media (min-width: 801px) {
	.MobileOnly {display: none !important;}
}
@media (max-width: 800px) {
	.DesktopOnly {display: none !important;}
}@font-face {
	font-family: Oswald;
	src: url(/Preview/Projects/Korzo/Design/Fonts/Oswald-Regular.ttf);
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url(/Preview/Projects/Korzo/Design/Fonts/Inter.ttf) format('truetype');
	font-weight: 100 900;  /* Variable font weight range */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url(/Preview/Projects/Korzo/Design/Fonts/Inter-italic.ttf) format('truetype');
	font-weight: 100 900;  /* Variable font weight range */
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Macondo';
	src: url(/Preview/Projects/Korzo/Design/Fonts/Macondo-Regular.ttf) format('truetype');
	font-weight: 400;
	font-display: swap;
}

:root {
	--font-oswald: Oswald, Arial, sans-serif;
	--font-inter: Inter, Arial, sans-serif;
	--macondo: Macondo, Arial, sans-serif;
}.Intro.ArticleIntro h1, .Intro.ArticleIntro .Text, .Intro.ArticleIntro .Date {color: #142F4E;}
.Intro.ArticleIntro h1 {max-width: 100%;}
.Intro.ArticleIntro h1::before {background-color: #142F4E;}

.ArticleIntro h1:has(+ .Date) {margin-bottom: 20px;}
.ArticleIntro .Date {margin-bottom: 20px; font-weight: bold;}
.ArticleIntro .Image {display: grid; max-width: 100%; border-radius: 20px; overflow: hidden; margin-bottom: 8px;}
.ArticleIntro .Image :is(picture, img) {width: 100%; height: auto; display: flex;}

.ImageLabel {font-size: 16px; font-weight: 500; line-height: 30px; font-style: italic;}

.BackButton {margin-top: 40px;}

@media (min-width: 800px) {
	.Intro.ArticleIntro {display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding-top: 250px;}
	.Intro.ArticleIntro h1 {grid-column: span 2; margin-bottom: 50px;}
	.Intro.ArticleIntro .Date {font-size: 24px;}

	.Intro.ArticleIntro .BackButtonM {display: none;}
}
@media (max-width: 800px) {
	.Intro.ArticleIntro {display: grid; padding-top: 120px;}
	.ArticleIntro .ArticleInfo {order: 2; margin-top: 24px;}

	.Intro.ArticleIntro .BackButtonD {display: none;}
}:root {
}

.Intro {padding-top: 40px; padding-bottom: 40px; position: relative;}
.Intro .Bg {max-width: 100%; height: auto; z-index: -1; transform: translateY(-5%); pointer-events: none;}
.Intro .Text {text-align: right;}
.Intro h1, .Intro .Text {max-width: 560px; color: var(--green);}

@media (min-width: 800px) {
	.Intro {padding-top: 180px;}
	.Intro .Text {margin-left: auto; margin-right: 10%; max-width: none;}
	.Intro h1 {margin-left: auto; margin-right: 0; max-width: none;}
	.Intro .Text :is(p, ul, ol) {margin-left: auto; margin-right: 0;}

	.History article {--text-size: 18px;}

	.LongImage {margin-top: 40px;}
}
@media (min-width: 1135px) {
	.Intro .Bg {margin-top: -160px;}
}
@media (max-width: 799px) {
	.Intro h1 {text-align: left;}
	.Intro .Text > *:not(h1) {max-width: 90%; margin-left: auto; margin-right: 0;}

	.Intro .Bg {max-width: calc(100% + 2 * var(--container-padding)); margin-left: calc(var(--container-padding) * -1);}
}

.History {margin-bottom: 50px; position: relative; --font-color: var(--orange);}
.History .MainText {max-width: 965px; margin-bottom: 64px;}
.History .Text {line-height: 130%;}
.History .List {display: flex; gap: 50px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; position: relative; margin-bottom: 30px;}
.History .List.Dragging {scroll-snap-type: none; scroll-behavior: auto;}
.History .List::-webkit-scrollbar {display: none;}
.History .Image {aspect-ratio: 1 / 1; display: flex; max-width: 266px; margin-bottom: 41px; margin-left: auto; margin-right: auto;}
.History img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 9999px;}
.History article {flex: 0 0 250px; scroll-snap-align: start; text-align: center;}
.History h3 {font-size: 28px; font-weight: bold; letter-spacing: -0.02em; line-height: var(--heading-line-height); margin-bottom: 73px; text-align: center;}
.History h4 {font-size: 18px; line-height: 130%; font-weight: bold; margin-bottom: 6px; max-width: 85%; margin-left: auto; margin-right: auto;}

.History .Slider {position: absolute; left: var(--container-padding); right: var(--container-padding); height: 10px; border-radius: 999px; top: 430px; cursor: pointer; touch-action: none; user-select: none; z-index: 2;}
.History .Slider::before {position: absolute; content: ''; left: 0; border-radius: 999px; background: var(--orange); width: var(--pos); height: 100%;}
.History .Slider::after {position: absolute; content: ''; right: 0; border-radius: 999px; background: var(--orange); opacity: 0.5; width: calc(100% - var(--pos)); height: 100%;}
.History .Slider .Point {position: absolute; width: 40px; height: 40px; top: 50%; left: var(--pos); transform: translateY(-50%) translateX(-50%); border-radius: 999px; display: flex; justify-content: center; align-items: center;}
.History .Slider .Point::after {content: ''; display: block; width: 21px; height: 21px; border-radius: 99px; background: var(--orange);}
.History .Slider .Labels {position: absolute; top: 20px; display: flex; justify-content: space-between; width: 100%; font-size: 14px; font-style: italic; font-weight: 500;}

.History .MoreAboutHistory p:has(.Button) {text-align: right;}
.History .MoreAboutHistory p:not(:has(.Button)) {font-size: 20px; font-weight: bold;}

@media (max-width: 799px) {
	.History .MoreAboutHistory p:not(:has(.Button)) {max-width: 70%;}
}

.ArticleIntro {padding-bottom: 60px;}

@media (min-width: 800px) {
	.ArticleIntro {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 220px;}
}

@media (max-width: 800px) {
	.ArticleIntro {padding-top: 25px;}
}