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

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

	--container-width: 1288px;
	--container-padding: 15px;

	--text-size: 20px;
	--text-line-height: 150%;
	--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: 150%;}
body, input, select, button, textarea {font-weight: normal;}
body, a {color: var(--font-color);}

h1, h2, h3, h4, h5, h6 {}
h1 {font-size: 120px; line-height: 100px;}
h2 {font-size: 50px; line-height: 50px; margin-bottom: 24px;}

body {background: var(--sand);}

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

.Button {font-size: 20px; 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: 600; border: none; text-decoration: none;}

#Head {padding-top: 54px; display: flex; justify-content: space-between; align-items: flex-end; transition: padding 0.3s ease;}
#Head #Logo {transition: all 0.3s ease;}
#Head #Logo img {height: auto; 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);}

.BurgerBtn {display: none; flex-direction: column; justify-content: space-around; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 8px; z-index: 1001;}
.BurgerBtn span {width: 100%; height: 3px; background: var(--green); border-radius: 2px; transition: all 0.3s ease; transform-origin: center;}
.BurgerBtn.active span:nth-child(1) {transform: translateY(10px) rotate(45deg);}
.BurgerBtn.active span:nth-child(2) {opacity: 0; transform: translateX(-20px);}
.BurgerBtn.active span:nth-child(3) {transform: translateY(-9px) rotate(-45deg);}

#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;}

.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);}

.Heading {
	--text-line-height: 65px;
	--dash-width: 73px;
	--gap: 22px;
}
.Heading {margin-bottom: 88px; font-size: var(--heading-font-size); font-weight: normal; line-height: var(--heading-line-height); letter-spacing: -0.02em; font-family: var(--font-oswald); color: var(--green); position: relative; padding-left: calc(var(--dash-width) + var(--gap));}
.Heading::before {content: ''; display: block; position: absolute; left: 0; top: calc(var(--text-line-height) / 2); transform: translateY(11px); width: var(--dash-width); height: 4px; background: var(--green);}

@media (max-width: 1200px) {
	#Head {padding-top: 40px;}
	#Head #Logo img {height: 50px;}
	#Head nav a {padding: 12px 14px; font-size: 18px;}
}

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

@media (max-width: 1024px) {
	#Head {padding-top: 32px;}
	#Head #Logo img {height: 40px;}
	#Head nav a {padding: 10px 12px; font-size: 14px;}
}

@media (max-width: 768px) {
	.BurgerBtn {display: flex;}
	#Head {padding-top: 20px; padding-bottom: 20px; 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.menu-open {overflow: hidden;}
	body.menu-open::before {content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; animation: fadeIn 0.3s ease;}
}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

@media (max-width: 768px) {
	:root {--container-padding: 20px; --text-size: 16px; --text-line-height: 140%; --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;}
	h1 {font-size: 40px; line-height: 44px;}
	h2 {font-size: 32px; line-height: 38px; margin-bottom: 16px;}
	.Button {font-size: 16px; padding: 12px 20px; min-height: 44px;}
	#Foot {padding-top: 60px; padding-bottom: 40px; flex-direction: column; gap: 24px; text-align: center;}
	#Foot > * {flex: none;}
	#Foot div:nth-of-type(2) {text-align: center;}
	#Foot div:nth-of-type(3) {text-align: center;}
	.Heading {--text-line-height: 38px; --dash-width: 40px; --gap: 16px; margin-bottom: 40px;}
	.Heading::before {height: 3px; transform: translateY(1px);}
}

@media (max-width: 480px) {
	:root {--container-padding: 16px; --text-size: 15px; --heading-font-size: 28px; --heading-line-height: 34px;}
	h1 {font-size: 36px; line-height: 40px;}
	h2 {font-size: 28px; line-height: 34px;}
	#Head nav a {font-size: 13px; padding: 8px 12px;}
	.Button {font-size: 15px; padding: 10px 18px;}
}@font-face {
	font-family: Oswald;
	src: url(/Grace/Projects/Korzo/Design/Fonts/Oswald-Regular.ttf);
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url(/Grace/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(/Grace/Projects/Korzo/Design/Fonts/Inter-italic.ttf) format('truetype');
	font-weight: 100 900;  /* Variable font weight range */
	font-style: italic;
	font-display: swap;
}

:root {
  --font-oswald: Oswald, Arial, sans-serif;
  --font-inter: Inter, Arial, sans-serif;
}:root {
}

.Intro {padding-top: 237px; padding-bottom: 506px; position: relative;}
.Intro .Bg {position: absolute; left: 15%; top: 0; right: 0; width: auto; height: auto; z-index: -1; transform: translateY(-5%);}
.Intro h1, .Intro .Text {max-width: 560px; color: var(--green);}
.Intro h1 {margin-bottom: 88px; font-size: 60px; font-weight: normal; line-height: 65px; letter-spacing: -0.02em; font-family: var(--font-oswald);}
.Intro .Text {
	--text-size: var(--font-bit-bigger);
	--text-line-height: 30px;
}

.Topics {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 55px; margin-bottom: 130px;}
.Topics .Text {
	--text-line-height: 130%;
}
.Topics .Icon {height: 76px; margin-bottom: 36px;}
.Topics .Icon img {width: auto; height: 100%;}
.Topics h3 {font-size: var(--font-bit-bigger); font-weight: bold; margin-bottom: 4px;}
.Topics article:nth-of-type(4n + 2) {color: var(--green);}
.Topics article:nth-of-type(4n + 3) {color: var(--orange);}

.Partners {padding-bottom: 114px;}
.Partners .Heading {margin-bottom: 187px;}
.PList {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 99px; color: var(--green);}
.PList .Logo {height: 132px; margin-bottom: 53px;}
.PList .Logo img {height: 100%; width: auto;}
.PList h3 {font-size: var(--font-bit-bigger); font-weight: bold; margin-bottom: 32px;}
.PList h3 span {display: block;}

@media (min-width: 801px) {
	.MobileOnly {display: none;}
}
@media (max-width: 800px) {
	.DesktopOnly {display: none;}
}

@media (max-width: 768px) {
	.Intro {padding-top: 60px; padding-bottom: 120px;}
	.Intro .Bg {left: 0; right: -50%; width: 150%; height: auto; transform: translateY(-10%);}
	.Intro h1 {font-size: 32px; line-height: 38px; margin-bottom: 40px; max-width: 100%;}
	.Intro .Text {--text-size: 16px; --text-line-height: 24px; max-width: 100%;}
	.Topics {grid-template-columns: 1fr; gap: 40px;}
	.Topics .Icon {height: 60px; margin-bottom: 24px;}
	.Topics h3 {font-size: 18px;}
	.Partners {padding-bottom: 60px;}
	.Partners .Heading {margin-bottom: 60px;}
	.PList {grid-template-columns: 1fr; gap: 60px;}
	.PList .Logo {height: 80px; margin-bottom: 32px;}
	.PList h3 {font-size: 18px; margin-bottom: 20px;}
}

@media (max-width: 480px) {
	.Topics {gap: 28px;}
	.Topics .Icon {height: 48px; margin-bottom: 16px;}
	.Topics h3 {font-size: 16px;}
	.PList {gap: 48px;}
	.PList .Logo {height: 64px; margin-bottom: 24px;}
	.PList h3 {font-size: 16px; margin-bottom: 16px;}
}