/* --- Fonts --- */

@font-face { font-family: 'BwNistaGrot-Bd'; src: url('../fonts/BwNistaGrot-Bd.otf') format('opentype'); }
@font-face { font-family: 'BwNistaGrot-BdIt'; src: url('../fonts/BwNistaGrot-BdIt.otf') format('opentype'); }
@font-face { font-family: 'BwNistaGrot-Md'; src: url('../fonts/BwNistaGrot-Md.otf') format('opentype'); }
@font-face { font-family: 'BwNistaGrot-MdIt'; src: url('../fonts/BwNistaGrot-MdIt.otf') format('opentype'); }
@font-face { font-family: 'BwNistaGrot-Rg'; src: url('../fonts/BwNistaGrot-Rg.otf') format('opentype'); }
@font-face { font-family: 'BwNistaGrot-RgIt'; src: url('../fonts/BwNistaGrot-RgIt.otf') format('opentype'); }
@font-face { font-family: 'BwNistaGrot-xBd'; src: url('../fonts/BwNistaGrot-xBd.otf') format('opentype'); }

@font-face { font-family: 'GeistMono-Bold'; src: url('../fonts/GeistMono-Bold.otf') format('opentype'); }
@font-face { font-family: 'GeistMono-Medium'; src: url('../fonts/GeistMono-Medium.otf') format('opentype'); }
@font-face { font-family: 'GeistMono-Regular'; src: url('../fonts/GeistMono-Regular.otf') format('opentype'); }
@font-face { font-family: 'GeistMono-SemiBold'; src: url('../fonts/GeistMono-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'GeistMono-Thin'; src: url('../fonts/GeistMono-Thin.otf') format('opentype'); }

@font-face { font-family: 'Mona-Sans-Medium'; src: url('../fonts/Mona-Sans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Mona-Sans-SemiBold'; src: url('../fonts/Mona-Sans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Mona-Sans-Bold'; src: url('../fonts/Mona-Sans-Bold.ttf') format('truetype'); }

*, *:after, *:before{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Mona-Sans-Medium';
	font-size: 16px;
	line-height: 1.38;
	letter-spacing: normal;
	color: #333333;
	margin: 0px;
	padding: 0px;
	opacity: 1;
}

p {
	margin: 0px;
}

img {
	max-width: 100%;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
	flex-wrap: nowrap;
	--bs-gutter-x: 0px;
}

.row>* {
	width: auto;
}

/* --- Navigation --- */

.nav-row {
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: transparent;
	position: fixed;
	top: 0;
	z-index: 1;
	transition: 0.3s ease-out;
/*	border-bottom: solid 1px #f6efea;*/
}

.nav-bg {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #fff;
}

.nav-row .logo {
	float: left;
	width: 25vw;
	padding-left: 8vw;
}

.nav-row .logo p.name-logo {
	font-family: 'BwNistaGrot-xBd';
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: normal;
	color: #2d2d2d;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
}

.nav-row .logo p.name-desc {
/*	opacity: 0.8;*/
	font-family: 'GeistMono-Medium';
	font-size: 12px;
	line-height: 1.75;
	letter-spacing: normal;
	color: #2d2d2d;
	text-align: left;
	opacity: 0.7;
}

.nav-row .home-nav {
	float: right;
	width: 75vw;
}

ul.navmenu {
	list-style: none;
	margin-bottom: 0px;
	position: relative;
	float: right;
	display: block;
}

ul.navmenu li {
	display: inline-block;
	margin-right: 30px;
}

ul.navmenu li a.main {
/*	opacity: 0.8;*/
	font-family: 'GeistMono-Medium';
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: normal;
	color: #2d2d2d;
	text-align: left;
	text-decoration: none;
}

ul.navmenu li:last-child a.main {
	font-family: 'GeistMono-Bold';
	line-height: 1;
	color: #4f0af5;
}

ul.navmenu li.get-quote {
	font-family: 'GeistMono-SemiBold';
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: normal;
	color: #ffffff;
	background-color: #4f0af5;
	padding: 1vw 2vw;
	border-radius: 25px;
}

ul.navmenu li a:hover,
ul.navmenu li.active a {
	color: #4f0af5;
	transition: width 0.3s ease;
}

.nav-btn {
	width: 25px;
	height: 13px;
	z-index: 2;
	position: fixed;
	right: 6vw;
	top: 5.3vw;
	cursor: pointer;
	float: right;
	/*width: 4vw;*/
}

.one,
.three {
	position: relative;
	width: 100%;
	height: 3px;
	background-color: #ff7171;
	margin: 5px auto;
	backface-visibility: hidden;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	z-index: 21;
}

.menu_overlay {
	width: 100vw;
	height: 88vh;
	position: fixed;
	top: 0;
	overflow: hidden;
	color: #fff;
	z-index: 100;
	transform: translateY(-110%);
	transition: transform 0.8s ease;
	box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
}

.menu_overlay .fas {
	width: 25px;
	height: 13px;
	position: fixed;
	right: 6vw;
	top: 5.3vw;
	color: #ff7171;
	transition: all 0.3s ease;
	z-index: 100;
	cursor: pointer;
}
.menu_overlay .fas:hover {
	color: #ff7171;
}

.side {
	height: 88vh;
	position: absolute;
	top: 0;
	z-index: 10;
}

.side1 {
	height: 100%;
	right: 0;
	width: 56%;
	background-color: #ffffff;
}

.side2 {
	background-color: #ff7171;
	left: 0;
	width: 44%;
	transform: translateY(-90%);
	transition: transform 1s ease;
	transition-delay: 0.2s;
}

#menuBtn {
	display: none;
}

.fas {
  font-size: 2rem;
  color: #222;
}

.fas:hover {
  color: #4b134f;
}

/* --- Landing Page --- */

.landing-page .section-1 .content {
	padding: 12vw 16vw 6vw;
}

.landing-page .section-1 p.hello-head,
.landing-page .section-1 p.intro-head,
.project-page .studio-section p.studio-head {
	font-family: 'BwNistaGrot-xBd';
	line-height: 1.25;
	letter-spacing: normal;
	padding-bottom: 2vw;
}

.landing-page .section-1 p.hello-head {
	font-size: 40px;
	color: #2D2D2D;
}

.landing-page .section-1 p.intro-head,
.project-page .studio-section p.studio-head {
	font-size: 25px;
	color: #333333;
}

.section-1 p.intro-desc,
.section-1 p.resume-mail,
.section-2 .proj-detail p.proj-desc,
.section-3 .content p.skill-desc,
.project-page .studio-section p.studio-desc,
.projects-section .proj-detail p.proj-desc {
	font-family: 'Mona-Sans-Medium';
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.2px;
	color: #333333;
	padding-bottom: 2vw;
}

.section-1 p.resume-mail,
.studio-section p.shoot-email {
	font-family: 'Mona-Sans-Bold';
}

.section-1 p.resume-mail a,
.studio-section p.shoot-email a {
	color: #4F0AF5;
	transition: transform 0.3s ease-out;
}

.section-1 p.resume-mail a:hover,
.studio-section p.shoot-email a:hover {
	color: #3400B0;
	transition: transform 0.3s ease-out;
}

.landing-page .section-1 .row {
	padding-top: 3vw;
}

.landing-page .section-1 .row .column {
	margin-right: 6vw;
}

.section-1 .column p.work-stats,
.impact-row .column p.impact-num {
	font-family: 'GeistMono-Thin';
	font-size: 50px;
	line-height: 0.9;
	letter-spacing: -2px;
	color: #333333;
	padding-bottom: 10px;
}

.section-1 .column p.stats-desc {
	font-family: 'Mona-Sans-Bold';
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 0.3px;
	color: #333333;
	padding-bottom: 2vw;
}

.section-1 .column-3 p.stats-desc {
	width: 33vw;
}

.landing-page .section-2 .content {
	padding: 4vw 8vw;
}

/*.landing-page .section-2 .row-1 .sandbox-video {
	border: 1px solid rgb(243, 243, 243);
	border-radius: 4px;
}*/

.section-2 .row {
	padding-bottom: 5vw;
	display: flex;
	flex-wrap: nowrap;
}

.section-2 .row-2,
.section-2 .row-3,
.section-2 .row-4,
.section-2 .row-5 {
	padding-top: 5vw;
}

.section-2 .row .proj-img,
.projects-section .row .proj-img {
	float: left;
	width: 28vw;
	margin-right: 5vw;
}

.section-2 .row .proj-img img,
.section-2 .row .proj-img video {
	margin-bottom: 15px;
}

.section-2 .row .proj-detail,
.projects-section .row .proj-detail {
	float: right;
	width: 52vw;
	padding-top: 2.5vw;
}

.section-2 .proj-img a,
.studio-section a.back-home,
.projects-section .proj-detail a,
.individual-project .studio-projects a,
.individual-project .project-list a.back-home,
.individual-project .project-list a,
.project-page .home-back a {
	font-family: 'GeistMono-Bold';
	font-size: 14px;
	line-height: 1;
	letter-spacing: normal;
	color: #4F0AF5;/*
	margin-top: 20px;*/
	text-decoration: none;
}

.section-2 .proj-img a:hover,
.studio-section a.back-home:hover,
.projects-section .proj-detail a:hover,
.individual-project .studio-projects a:hover,
.individual-project .project-list a:hover,
.project-page .home-back a:hover {
	color: #3400B0;
	transition: transform 0.3s ease-out;
}

.section-2 .content hr,
.project-page .content hr {
	height: 0.5px;
	color: #2D2D2D;
	opacity: 20%;
}

.section-2 .content p.select-work,
.section-2 .proj-detail p.proj-year,
.section-2 .proj-detail p.proj-type,
.section-2 .previous-work p.prev-head ,
.section-3 .content p.skill-exp,
.projects-section .proj-detail p.proj-vert,
.projects-section .proj-detail p.proj-type {
	font-family: 'GeistMono-Medium';
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: normal;
	color: #2D2D2D;
	opacity: 0.7;
	padding-bottom: 15px;
	text-transform: uppercase;
}

.section-2 .proj-detail p.proj-head,
.projects-section .proj-detail p.proj-head {
	font-family: 'BwNistaGrot-Bd';
	font-size: 20px;
	line-height: 1.75;
	letter-spacing: normal;
	color: #333333;
	padding-bottom: 20px;
	width: 34vw;
}

.section-2 .proj-detail p.proj-desc {
	width: 48vw;
	padding-bottom: 20px;
}

.section-2 .proj-detail p.proj-achi {
	font-family: 'Mona-Sans-SemiBold';
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.3px;
	color: #2D2D2D;
	background-image: linear-gradient(to right, rgba(240,211,255,0.75) 0%, rgb(210,210,255,0.75) 16%, rgb(215,234,255,0.75) 37%, rgb(255,235,210,0.75) 59%, rgb(254,226,227,0.75) 80%, rgb(255,255,255,0.75) 100%);
	padding: 12px;
	border-radius: 8px;
}

.section-2 .previous-work {
	text-align: center;
	padding-top: 5vw;
}

.section-2 .content p.select-work,
.section-2 .previous-work p.prev-head,
.section-3 .content p.skill-exp {
	opacity: 1;
}

.section-2 .previous-work img {
	height: 2.1vw;
	width: auto;
	margin-top: 2vw;
}

.landing-page .section-3 .content {
	padding: 8vw;
	text-align: center;
}

.section-3 .content p.skill-head {
	font-family: 'BwNistaGrot-xBd';
	font-size: 25px;
	line-height: 1.6;
	color: #333333;
	letter-spacing: normal;
	padding-bottom: 2vw;
}

.section-3 .content p.skill-desc {
	width: 79vw;
	padding-left: 6vw;
}

.section-3 .exp-list {
	padding-top: 4vw;
	padding-bottom: 4vw;
	display: flex;
	flex-wrap: no-wrap;
}

.section-3 .exp-list .column {
	width: 16vw;
	margin-right: 2vw;
}

.section-3 .column p.exp-desc {
	font-family: 'Mona-Sans-SemiBold';
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 0.3px;
	color: #333333;
	padding-bottom: 2vw;
}

.section-3 .exp-list .column  img {
	width: 80px;
	height: auto;
	margin-bottom: 20px;
}

.section-3 a.work-avail {
	display: inline-block;
	width: 70vw;
	padding: 18px;
	background-color: #4f0af5;
	font-family: 'GeistMono-SemiBold';
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
	color: #F8F4F1;
	text-decoration: none;
	border-radius: 32px;
	transition: transform 0.3s ease-out;
}

.arrow::after {
	display: inline-block;
	padding-left: 4px;
	content: "\2192";
	transition: transform 0.3s ease-out;
	color: #4f0af5;
}

.arrow:hover::after {
	color: #3400B0;
	transform: translateX(4px);
}

.arrow-before::before {
	display: inline-block;
	padding-right: 4px;
	content: "\2190";
	transition: transform 0.3s ease-out;
	color: #4f0af5;
}

.arrow-before:hover::before {
	color: #3400B0;
	transform: translateX(-4px);
}

.project-list .disabled:hover::before {
	color: #4f0af5;
	transform: translateX(0px);
}

ul.navmenu li.get-quote .arrow::after {
	display: inline-block;
	content: "\2192";
	transition: transform 0.3s ease-out;
	color: #4f0af5;
	padding-left: 0px;
}

/* --- Footer --- */

footer {
	height: 100%;
	width: auto;
	position: relative;
}

footer .content {
	padding: 4vw 8vw;
}

footer p.proj-trademark {
	flex-grow: 0;
	font-family: 'Mona-Sans-Medium';
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: normal;
	width: 60vw;
	color: #333333;
	opacity: 0.6;
	padding-top: 3vw;
	padding-bottom: 5vw;
}

footer .copyright-row {
	display: flex;
	flex-wrap: nowrap;
}

.copyright-row p.copyright,
ul.social-media li a {
	font-family: 'BwNistaGrot-Md';
	font-size: 14px;
	line-height: 1.71;
	letter-spacing: normal;
	text-align: left;
	color: #2d2d2d;
}

.copyright-row .copyright-name {
	float: left;
	width: 34vw;
}

.copyright-row .auth-social {
	margin: 0px;
	float: right;
	width: 50vw;
}

.auth-social ul.social-media {
	text-align: right;
}

ul.social-media li {
	display: inline;
	margin-right: 3vw;
}

ul.social-media li:last-child {
	margin-right: 0px;
}

ul.social-media li a {
	text-decoration: none;
}

/* --- Projects --- */

.project-page .content {
	padding: 4vw 8vw;
}

.project-page .studio-section {
	padding: 8vw;
}

.studio-section .studio-logo {
	padding-top: 2.5vw;
	padding-bottom: 2.5vw;
}

.studio-section .studio-logo img {
	height: 30px;
	width: auto;
}

.project-page .studio-section p.studio-head {
	width: 45vw;
}

.project-page .studio-section p.desc1,
.project-page .studio-section p.shoot-email {
	font-family: 'Mona-Sans-SemiBold';
	padding-bottom: 5px;
}

.project-page .studio-section p.studio-desc {
	width: 67vw;
	padding-bottom: 0px;
}

.project-page .projects-section .row {
	padding-bottom: 5vw;
	padding-top: 5vw;
	display: flex;
	flex-wrap: nowrap;
}

.project-page .projects-section .row-1 {
	padding-top: 0vw;
}

.projects-section .row-2 p.proj-head,
.projects-section .row-4 p.proj-head {
	width: 40vw;
}

.projects-section .proj-detail p.proj-desc {
	width: 45vw;
}

.project-page .home-back {
	padding-left: 8vw;
}

/* --- Mobile Responsive --- */
@media screen and (max-width: 1040px) {
	.nav-row .logo {
		width: 40vw;
	}

	.nav-row .home-nav {
		width: 60vw;
	}

	.landing-page .section-1 .content {
		padding: 15vw 12vw 6vw;
	}

	.landing-page .section-1 p.hello-head {
		font-size: 32px;
	}

	.landing-page .section-1 p.intro-head,
	.section-3 .content p.skill-head,
	.project-page .studio-section p.studio-head {
		font-size: 22px;
	}

	.landing-page .section-2 .content {
		padding: 4vw 12vw;
	}

	.landing-page .section-2 .row {
		flex-wrap: wrap;
	}

	.section-2 .row .proj-img,
	.projects-section .row .proj-img {
		width: 55vw;
		margin-right: 0px;
	}

	.section-2 .row .proj-detail,
	.projects-section .row .proj-detail {
		width: 70vw;
		padding-top: 3vw;
	}

	.section-2 .proj-detail p.proj-head,
	.section-2 .proj-detail p.proj-desc,
	.projects-section .proj-detail p.proj-head,
	.projects-section .proj-detail p.proj-desc {
		width: 65vw;
	}

	.section-3 .column p.exp-desc {
		font-size: 16px;
	}

	footer p.proj-trademark {
		width: 70vw;
		font-size: 14px;
		line-height: 1.6;
	}

	.project-page .content {
		padding: 7vw 10vw;
	}

	.project-page .studio-section {
		padding: 8vw 2vw;
	}

	.studio-section .studio-logo img {
		height: 25px;
		width: auto;
	}

	.project-page .studio-section p.studio-head {
		width: 65vw;
	}

	.project-page .projects-section .row {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 720px) {
	.landing-page .section-1 .content {
		padding: 17vw 12vw 6vw;
	}

	.nav-row .home-nav ul.navmenu{
		display: none;
	}

	.section-2 .previous-work img {
		height: 3.1vw;
		width: auto;
		margin-top: 3vw;
	}

	.section-3 .exp-list {
		flex-wrap: wrap;
	}

	.section-3 .column p.exp-desc {
		font-size: 14px;
	}

	.section-3 .exp-list .column {
		width: 25vw;
		margin-bottom: 3vw;
	}

	.project-page .content {
		padding: 9vw 10vw;
	}

	.project-page .studio-section p.studio-desc {
		width: 75vw;
	}
}

@media screen and (max-width: 550px) {
	.nav-row .logo {
		width: 60vw;
	}

	.landing-page .section-1 .content {
		padding-top: 22vw;
	}

	.section-1 .column p.work-stats {
		font-size: 40px;
	}

	.section-1 .column p.stats-desc {
		font-size: 14px;
	}

	.section-1 .column-3 p.stats-desc {
		width: 30vw;
	}

	.landing-page .section-2 .content {
		padding: 6vw 10vw;
	}

	.landing-page .section-1 p.intro-head,
	.section-2 .proj-detail p.proj-head,
	.section-3 .content p.skill-head,
	.projects-section .proj-detail p.proj-head,
	.project-page .studio-section p.studio-head {
		font-size: 18px;
	}

	.section-2 .row .proj-img,
	.section-2 .row .proj-detail,
	.projects-section .row .proj-img,
	.projects-section .row .proj-deail {
		width: 75vw;
	}

	.section-2 .proj-detail p.proj-head,
	.section-2 .proj-detail p.proj-desc,
	.projects-section .proj-detail p.proj-head,
	.projects-section .proj-detail p.proj-desc {
		width: 70vw;
		line-height: 1.5;
	}

	.section-2 .proj-detail p.proj-achi {
		font-size: 14px;
	}

	.section-3 a.work-avail {
		width: 80vw;
	}

	.section-3 .exp-list .column {
		width: 37vw;
		margin-right: 5vw;
		text-align: left;
	}

	.section-1 p.intro-desc,
	.section-1 p.resume-mail,
	.section-2 .proj-detail p.proj-desc,
	.section-3 .content p.skill-desc,
	.project-page .studio-section p.studio-desc,
	.projects-section .proj-detail p.proj-desc {
		padding-bottom: 3vw;
		line-height: 1.5;
	}

	.project-page .studio-section {
		padding: 13vw 2vw;
	}

	.studio-section .studio-logo {
		padding-top: 4vw;
		padding-bottom: 4vw;
	}

	footer p.proj-trademark {
		width: 80vw;
	}

	footer .copyright-row {
		flex-wrap: wrap;
	}

	ul.social-media li {
		margin-right: 4.5vw;
	}

	footer .copyright-row .copyright-name,
	.copyright-row .auth-social {
		width: 60vw;
		padding-bottom: 10px;
	}

	.auth-social ul.social-media {
		text-align: left;
		padding-left: 0;
	}
}

/* --- Individual Project --- */

.individual-project {
	padding-top: 10vw;
}

.project-content img {
	width: 100%;
	height: auto;
}

.individual-project .studio-projects {
	padding-left: 8vw;
	padding-top: 3vw;
	padding-bottom: 25px;
}

.individual-project h1.project-heading {
	font-family: 'BwNistaGrot-xBd';
	font-size: 38px;
	line-height: 1.5;
	letter-spacing: normal;
	color: #2d2d2d;
	padding-bottom: 3vw;
	width: 70vw;
	padding-left: 8vw;
	margin: 0px;
}

.individual-project .section-1 .brand-over-section {
	padding: 7vw 8vw 3vw;
}

.individual-project .brand-over-section p.row-head,
.section-row .section-heading p.section-head,
.impact-section .impact-row p.impact-desc,
.type-row .section-heading p.section-head {
	font-family: 'BwNistaGrot-Bd';
	font-size: 24px;
	line-height: 1.67;
	letter-spacing: normal;
	color: #2d2d2d;
}

.brand-over-section .overview-row p.overview-head {
	font-family: 'BwNistaGrot-Md';
	font-size: 18px;
	line-height: 1.67;
	letter-spacing: normal;
	color: #2d2d2d;
}

.brand-over-section .overview-row,
.individual-project .section-row {
	display: flex;
	flex-wrap: nowrap;
}

.brand-over-section .overview-row p.overview-desc {
	font-family: 'GeistMono-Medium';
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
	color: #2d2d2d;
	text-transform: uppercase;
}

.brand-over-section .overview-row .column {
	width: 25vw;
	margin-right: 3vw;
}

.individual-project .section-1 .section-row {
	padding: 2vw 8vw;
}

.individual-project .section-1 .row2 {
	padding-bottom: 7vw;
}

.individual-project .content-row {
	padding: 7vw 8vw;
}

.section-row .section-heading,
.type-row .section-heading {
	float: left;
	width: 28vw;
}

.section-row .section-info,
.type-row .section-info {
	float: right;
	width: 56vw;
}

.section-heading p.section-head {
	width: 22vw;
}

.section-info ul.desc-list {
	padding-left: 20px;
	margin: 0px;
}

.section-info p.section-desc,
.section-info ul.desc-list li {
	font-family: 'Mona-Sans-Medium';
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: normal;
	color: #2d2d2d;
	width: 53vw;
}

.section-info ul.desc-list li {
	padding-bottom: 15px;
}

.impact-section .content {
	padding: 7vw 8vw 2vw;
}

.impact-section .section-row {
	padding-bottom: 3.5vw;
}

.impact-section .section-heading {
	width: 28vw;
}

.impact-row .column {
	width: 25vw;
	margin-right: 2.5vw;
}

.impact-row .column p.impact-num {
	font-size: 80px;
	color: #4F0AF5;
}

.impact-section a.company-website {
	text-decoration: none;
}

.individual-project .project-list {
	padding-top: 5vw;
}

.individual-project .project-list a.back-home {
	width: 12vw;
}

.individual-project .slider-text {
	padding-left: 7vw;
}

@media screen and (max-width: 1040px) {
	.individual-project {
		padding-top: 10vw;
	}

	.individual-project h1.project-heading {
		font-size: 32px;
		width: 75vw;
	}

	.individual-project .brand-over-section p.row-head,
	.section-row .section-heading p.section-head,
	.type-row .section-heading p.section-head {
		font-size: 22px;
	}


	.impact-section .impact-row p.impact-desc {
		font-size: 20px;
	}

	.section-info p.section-desc,
	.section-info ul.desc-list li {
		width: 55vw;
	}

	.impact-section .section-row {
		padding-bottom: 5vw;
	}

	.impact-row .column p.impact-num {
		font-size: 60px;
	}
}

@media screen and (max-width: 720px) {
	.individual-project {
		padding-top: 15vw;
	}

	.individual-project h1.project-heading {
		font-size: 28px;
		width: 80vw;
	}

	.individual-project .brand-over-section p.row-head,
	.section-row .section-heading p.section-head,
	.type-row .section-heading p.section-head {
		font-size: 21px;
	}

	.brand-over-section .overview-row p.overview-desc {
		font-size: 14px;
	}

	.section-info p.section-desc,
	.section-info ul.desc-list li {
		width: 55vw;
	}

	.impact-section .impact-row p.impact-desc {
		font-size: 20px;
	}

	.impact-section .section-row {
		padding-bottom: 5vw;
	}

	.impact-row .column p.impact-num {
		font-size: 60px;
	}
}

@media screen and (max-width: 550px) {
	.individual-project {
		padding-top: 24vw;
	}

	.individual-project h1.project-heading {
		font-size: 20px;
		width: 85vw;
	}

	.brand-over-section .overview-row .column-1 {
		width: 60vw;
	}

	.brand-over-section .overview-row .column-2,
	.brand-over-section .overview-row .column-3 {
		width: 40vw;
		padding-top: 10px;
		margin-right: 4vw;
	}

	.brand-over-section .overview-row .column-3 {
		margin-right: 0px;
	}

	.brand-over-section .overview-row,
	.individual-project .section-row {
		flex-wrap: wrap;
	}

	.individual-project .section-row {
		padding: 6vw 10vw;
	}

	.individual-project .brand-over-section p.row-head,
	.section-row .section-heading p.section-head,
	.type-row .section-heading p.section-head {
		font-size: 18px;
	}

	.section-row .section-heading,
	.section-row .section-heading p.section-head {
		width: 60vw;
		padding-bottom: 7px;
	}

	.section-info p.section-desc,
	.section-info ul.desc-list li {
		width: 80vw;
		font-size: 14px;
	}

	.individual-project .project-list a.back-home {
		width: 30vw;
	}

	.impact-section .section-row {
		padding: 0vw;
		padding-bottom: 5vw;
	}

	.impact-section .impact-row {
		padding-top: 4vw;
	}

	.impact-section .impact-row p.impact-desc {
		font-size: 14px;
	}

	.impact-row .column {
		width: 27vw;
	}

	.impact-row .column p.impact-num {
		font-size: 40px;
	}
}

/* --- 1. Guide.ai --- */
.guide-ai .client-img1,
.guide-ai .section-2 .client-img2,
.guide-ai .section-5 .client-img5,
.guide-ai .section-7 .client-img7 {
	margin-left: 8vw;
	width: 84vw;
}

.guide-ai .section-3 p.section-head {
	width: 23vw;
}

.guide-ai .section-5 p.section-desc {
	width: 51vw;
}

.guide-ai .project-list a.back-home,
.hilo .project-list a.next-project {
	pointer-events: none;
	cursor: default;
	color: rgba(79, 10, 245, 0.7);
}

.guide-ai .project-list .arrow-before::before,
.hilo .project-list .arrow::after {
	color: rgba(79, 10, 245, 0.7);
}

.guide-ai .project-list a.back-home:hover,
.hilo .project-list a.next-project:hover {
	color: #4F0AF5;
}

@media screen and (max-width: 550px) {
	.guide-ai .section-3 p.section-head {
		width: 50vw;
	}

	.guide-ai .section-5 p.section-desc {
		width: 80vw;
	}
}

/* --- 2. Recko --- */
.recko h1.project-heading {
	width: 78vw;
}

.recko .client-img1,
.recko .section-2 .client-img2,
.recko .section-3 .client-img4 {
	margin-left: 8vw;
	width: 82vw;
}

.recko .section-2 .brand-narrative,
.recko .section-3 .brand-collateral {
	margin: 0px auto;
	padding-left: 8vw;
	animation-delay: 0.1s;
}

.recko .section-2 .brand-narrative {
	padding-top: 7vw;
	padding-bottom: 7vw;
}

.recko .section-2 .client-img3 {
	width: 41vw;
	display: flex;
}

.recko .section-2 .geometric {
	background-color: #F8F9FB;
}

.recko .section-3 .client-img4 {
	height: auto;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
	margin-bottom: 7vw;
}

.recko .section-3 .client-img4 video {
	position: relative;
	width: 100%;
	height: auto;
	outline: none;
	z-index: 1;
}

.recko .section-3 .client-img5 {
	width: 39vw;
	margin-right: 4vw;
}

.recko .section-3 .client-img5 img {
	width: 100%;
	height: auto;
}

.recko .section-5 .client-img7,
.recko .section-5 .client-img8 {
	width: 100%;
}

@media screen and (max-width: 550px) {
	.recko h1.project-heading {
		width: 85vw;
	}
}

/* --- 3. Hanto --- */
.hanto h1.project-heading {
	width: 90vw;
}

.hanto .section-1 .row2 {
	padding-bottom: 7vw;
}

.hanto .client-img1,
.hanto .section-2 .client-img3,
.hanto .section-3 .client-img4,
.hanto .section-3 .client-img5 {
	margin-left: 8vw;
	width: 84vw;
}

.hanto .section-2 .client-img2 {
	margin-left: 23vw;
	width: 54vw;
	margin-bottom: 15vw;
}

.hanto .client-img4,
.hanto .client-img6 {
	margin-bottom: 7vw;
}

/* --- 4. Plivo --- */
.plivo h1.project-heading {
	width: 83vw;
}

.plivo .client-img1,
.plivo .section-2 .client-img3,
.plivo .section-3 .client-img4 {
	margin-left: 8vw;
	width: 84vw;
}

.plivo .section-4 p.section-head {
	width: 23vw;
}

.plivo .client-img2,
.plivo .client-img4 {
	margin-bottom: 7vw;
}

@media screen and (max-width: 550px) {
	.plivo h1.project-heading {
		width: 85vw;
	}

	.plivo .section-4 p.section-head {
		width: 60vw;
	}
}

/* --- 5. Easiloan --- */
.easiloan h1.project-heading {
	width: 83vw;
}

.easiloan .section-1 .row1 p.section-desc {
	width: 54vw;
}

.easiloan .section-1 .row2 {
	padding-bottom: 7vw;
}

.easiloan .section-2 .client-img2,
.easiloan .section-3 .client-img3 {
	margin-left: 8vw;
	width: 84vw;
}

.easiloan .client-img3,
.easiloan .client-img4 {
	margin-bottom: 7vw;
}

@media screen and (max-width: 550px) {
	.easiloan .section-1 .row1 p.section-desc {
		width: 80vw;
	}
}

/* --- 6. Linkage --- */
.linkage .section-2 p.section-desc {
	width: 53vw;
}

.linkage .client-img1,
.linkage .section-2 .client-img2,
.linkage .section-4 .client-img4,
.linkage .section-5 .client-img6 {
	margin-left: 8vw;
	width: 84vw;
}

.linkage .section-5 .client-img5 {
	margin-bottom: 7vw;
}

@media screen and (max-width: 550px) {
	.linkage .section-2 p.section-desc {
		width: 80vw;
	}
}

/* --- 7. HILO --- */
.hilo h1.project-heading {
	width: 86vw;
}

.hilo .client-img1,
.hilo .client-img5 {
	margin-left: 8vw;
	width: 84vw;
}

.hilo .section-3 .brand-images {
	margin: 0px auto;
	padding-left: 9vw;
	padding-bottom: 7vw;
}

.hilo .section-3 .client-img3 {
	width: 39vw;
	display: flex;
}

.hilo .section-3 .custom-style {
	margin-right: 4vw;
}

.hilo .client-img5 {
	margin-bottom: 7VW;
}

@media screen and (max-width: 550px) {
	.hilo .section-3 p.section-head {
		width: 80vw;
	}
}

/* --- 8. Custiv --- */
.custiv h1.project-heading {
	width: 70vw;
}

.custiv .overview-row .column-3 {
	width: 27vw;
}

.custiv .client-img1,
.custiv .section-2 .client-img2,
.custiv .section-3 .client-img4,
.custiv .section-4 .client-img6 {
	margin-left: 8vw;
	width: 84vw;
}

.custiv .client-img2,
.custiv .client-img4,
.custiv .client-img6 {
	margin-bottom: 7vw;
}

@media screen and (max-width: 550px) {
	.custiv h1.project-heading {
		width: 85vw;
	}

	.custiv .overview-row .column-3 {
		width: 40vw;
	}
}