/* Base elements */
@font-face { 
	font-family: DM Sans;
	src: url('../assets/DMSans-Regular.ttf');
	font-weight: 400;
}
@font-face { 
	font-family: DM Sans Medium;
	src: url('../assets/DMSans-Regular.ttf');
	font-weight: 500;
}
html, body { margin: 0px; }
body { font-family: DM Sans; }
h1, h2 { font-family: DM Sans Medium; font-size: 68px; line-height: 101%; letter-spacing: -0.007em; white-space: nowrap; margin: 0px; }
h3 { font-family: DM Sans Medium; font-size: 38px; line-height: 114%; letter-spacing: -0.002em; font-weight: 500; margin-top: 0px; }
h4 { font-family: DM Sans Medium; font-size: 32px; line-height: 114%; letter-spacing: -0.002em; font-weight: 700; margin-top: 0px; }
hr { width: 100%; height: 5px; border: none; transform: translate(0px, 6px); }
div { box-sizing: border-box; }
img { height: 100%; }
p { margin-top: 0px; } p:last-child { margin-bottom: 0px; }

/* Layout */
.h-100 { height: 100vh; }
.w-50 { width: 50%; }
.w-100 { width: 100%; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: end; }
.decoration-none { text-decoration: none; }
.fit-cover { object-fit: cover; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.text-right { text-align: right; }
.std-padding { padding: 50px 60px; }

/* Page wide */
.text-lime { color: #D7F0A0; }
.text-woodland { color: #45502E; }
.text-moondust { color: #DBE1CD; }
.bg-lime { background-color: #D7F0A0; }
.bg-woodland { background-color: #45502E; }
.bg-moondust { background-color: #DBE1CD; }
.text-container-xsml { font-size: 18px; max-width: 360px; border-bottom: 1px solid #45502E; padding: 5px 0px; }
.text-container { max-width: 33.854166666666664vw; width: 100%; font-size: calc(12px + 0.520831vw); }
.text-container-small { width: 100%; font-size: calc(10px + 0.520831vw); }
.text-container-full { font-size: calc(16px + 0.520831vw); }
.btn-moondust { font-family: DM Sans Medium; font-size: 18px; border: 1px solid #DBE1CD; color: #DBE1CD; padding: 7px 20px; border-radius: 40px; text-decoration: none; display: inline-block; position: relative; z-index: 1; overflow: hidden; }
.btn-moondust:hover { color: #45502E; transition: color 0.35s; }
.btn-moondust::after { content: ""; background: #DBE1CD; position: absolute; z-index: -1; padding: 0.85em 0.75em; display: block; transition: all 0.35s; top: 0; bottom: 0; left: -100%; right: 100%; }
.btn-moondust:hover::after { left: 0; right: 0; top: 0; bottom: 0; transition: all 0.35s; }
.btn-woodland { font-family: DM Sans Medium; font-size: 18px; border: 1px solid #45502E; color: #45502E; padding: 7px 30px; border-radius: 40px; text-decoration: none; display: inline-block; position: relative; z-index: 1; overflow: hidden; }
.btn-woodland:hover { color: #DBE1CD; transition: color 0.35s; }
.btn-woodland::after { content: ""; background: #45502E; position: absolute; z-index: -1; padding: 0.85em 0.75em; display: block; transition: all 0.35s; top: 0; bottom: 0; left: -100%; right: 100%; }
.btn-woodland:hover::after { left: 0; right: 0; top: 0; bottom: 0; transition: all 0.35s; }
footer a { color: #45502E; }
footer img { transform: translate(0px, 2px); }
footer .copyright { font-size: 12px; }

/* Section */
#ventures { gap: 50px; }
#ventures header { gap: 30px; }
#ventures-next { gap: 40px; font-size: 18px; line-height: 130%; cursor: pointer; }
#ventures-next:hover img { transform: translate(0px, -10px); transition: transform 0.5s ease-out; }
#ventures-next-mobile { display: none; }

.page-slides { transition: all 0.5s ease; }
.slide-nav { width: 65px; top: 60px; right: 60px; }
.slide-nav a { transform: rotate(0deg); transform-origin: center; transition: all 0.5s; font-size: 0px; }
.slide-nav img { width: 65px; }
.slide-nav a.rotate-90 { transform: rotate(90deg); transform-origin: center; transition: all 0.5s; display: inline-block; }
.page-slide:nth-child(2) ul { border-bottom: 1px solid #D7F0A0; padding: 10px 0px 0px 0px; list-style: none; }
.page-slide:nth-child(2) li { border-top: 1px solid #D7F0A0; padding: 10px 0px 10px 40px; }
.page-slide:nth-child(2) li:before { content: "•"; position: absolute; left: 15px; }

#work { background-image: url('../assets/chair.webp'); background-position: center; background-size: cover; }
#work > div { width: 50%; align-items: start; }
#work a { margin-top: 15px; }

#about { gap: 50px; padding-bottom: 110px; transition: all 0.5s ease-out; }
#about .content-container { gap: 50px; }
#about .content-container > div:first-child { gap: 40px; }

.mobile { display: none; }

/* Device responsive */
@media screen and (max-width: 1700px) {
	#about .content-container > div:first-child > div:first-child { width: 35%; font-size: 25px; }
	#about .content-container > div:first-child > div:last-child { width: 65%; }
  	#about .content-container > div:first-child,
  	#about .content-container > div:last-child { width: auto; }
}
@media screen and (max-width: 1440px) {
	#ventures .content-container > div:first-child > div:first-child, .text-container { max-width: 70%; }
	#support .text-container { max-width: 100%; }
	#about .content-container > div:first-child > div:first-child { font-size: 22px; }
	#about .text-container-small { font-size: 18px; }
	#about .content-container > div:first-child { width: 65% }
  	#about .content-container > div:last-child { width: 35%; }
  	#about img { width: 100%; }
}
@media screen and (max-width: 1280px) {
	h1, h2 { font-size: 50px; }
	#about { padding-bottom: 60px; }
	#about .content-container > div:first-child > div:first-child { font-size: 20px; }
	#about .text-container-small { font-size: 16px; }
	.slide-nav img { width: 45px; }
	.slide-nav { right: 30px; }
}
@media screen and (max-width: 1024px) {
	h1, h2 { font-size: 38px; }
	h3 { font-size: 28px; }
	.std-padding { padding: 40px 50px; }
	#ventures .content-container { gap: 50px; }
	#ventures .content-container > div { width: 50%; gap: 20px }
	#ventures .content-container > div:first-child > div:first-child, 
	#ventures .content-container div:last-child > img { object-fit: cover; object-position: top; }
	#ventures .content-container > div:first-child > div:first-child, .text-container { max-width: unset; font-size: 20px; }
	#ventures-next { display: none; }
	#ventures-next-mobile { display: flex; gap: 15px; }
	#support .page-slide:nth-child(2) .text-container { font-size: 17.5px; }
	#about .content-container > div:first-child { width: 70% }
  	#about .content-container > div:last-child { width: 30%; }
  	.slide-nav { justify-content: end; margin-top: 1px; }
  	.page-slide:nth-child(2) li { padding: 10px 0px 10px 20px; }
  	.page-slide:nth-child(2) li:before { left: 6px; }
  	#work { background-position: right; }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  	#ventures .content-container > div:last-child { gap: 40px; }
  	#support .page-slide:nth-child(2) .text-container { font-size: 20px; }
}
@media screen and (max-device-width: 440px) {
	h1, h2 { line-height: 110%; }
	h3 { font-size: 24px; }
	hr { display: none; }
	.std-padding { padding: 25px 30px; }
	.mobile { display: block; }
	.desktop { display: none; }
	.w-50 { width: 100%; }
	#ventures { height: auto; }
	#ventures header { display: block; }
	#ventures .content-container > div { width: 100%; }
	#ventures .content-container > div:last-child { display: none; }
	#ventures img.mobile { width: 100%; height: auto; margin-bottom: 22px; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; }
	#ventures .content-container > div:first-child > div:first-child { font-size: 16px; }
	#ventures .content-container > div:first-child > div:first-child p:first-child, .text-container { font-size: 22px; }
	#ventures-next { display: flex; font-size: 16px; flex-direction: row-reverse; margin-top: 180px; gap: 80px; }
	#ventures .content-container div:last-child > img { width: 30px; object-fit: contain; object-position: center; }
	#support { flex-direction: column; gap: 50px; justify-content: space-between; }

	#support .slide { transform: translate(0px, 0px); bottom: 0; }
	#support .slide-container { width: 100%; }
	#support .text-container { font-size: 16px; }
	#support .page-slide { display: flex; flex-direction: column; }
	#support .slide-nav { top: 30px; text-align: right; }

	#work { flex-direction: column; gap: 50px; background-image: url('../assets/chair-mob.webp'); }
	#work > div { width: 100%; }
	#about { height: auto; padding-bottom: 25px; }
	#about .content-container { flex-direction: column; }
	#about .content-container > div:first-child { flex-direction: column; width: 100%; gap: 22px; }
	#about .content-container > div:first-child > div:first-child,
	#about .content-container > div:first-child > div:last-child { width: 100%; }
	#about .content-container > div:last-child { display: none; }
	#about .content-container > div:first-child > div:last-child { gap: 50px; }
	#about .mobile { width: 100%; }
	footer > div { flex-direction: column; }
	footer .w-50 { flex-direction: column-reverse; gap: 70px; }
	footer .text-right { text-align: left; }
	footer .copyright { padding: 10px 0px; border-bottom: 1px solid #45502E; }
	footer h4 { margin-bottom: 0px; font-size: 7.038834951456311vw; }
}
@media screen and (max-device-width: 375px) {
	#ventures-next { gap: 45px; }
	.text-container-xsml { font-size: 16px; }
	#support .text-container, 
	#support .page-slide:nth-child(2) .text-container { font-size: 14px; }
	#support .page-slide:nth-child(2) ul { padding: 0px 0px 0px 0px; }
	#support > div:first-child { align-items: end; }
	.slide-nav a { display: inline-block; font-size: 0px; }
	.slide-nav a img { width: 36.13px; }
}

/* Height responsive */
@media screen and (min-width: 1920px) and (max-height: 960px) {
	#ventures .content-container { gap: 50px; }
	#ventures .content-container > div:first-child, 
	#ventures .content-container > div:last-child { width: auto; }  
	#ventures .content-container > div:first-child > div:first-child { max-width: 70%; }
	
	#support .text-container { max-width: calc(100% - 60px); }

	#about .content-container > div:first-child > div:first-child { width: 35%; }
	#about .content-container > div:first-child > div:last-child { width: 65%; }
  	#about .content-container > div:first-child,
  	#about .content-container > div:last-child { width: auto; }
}
@media screen and (min-width: 1920px) and (max-height: 720px) {
	#about .content-container > div:first-child > div:first-child { width: 30%; }
	#about .content-container > div:first-child > div:last-child { width: 70%; }
}