* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* overflow-x: hidden; */
}
html {
	/* margin: 0; */
	/* padding: 0; */
}
body {
	background: #27283e;
	color: white;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	position: relative;
}
.yellowColor {
	color: #f9f871;
}
.whiteColor {
	color: #e5e5e5;
}
.goldColor {
	color: #b8950a;
}
.ctaColor {
	color: #b8950a;
}
.container {
	padding-inline: 10rem;
}
.wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.heading {
	display: flex;
	justify-content: center;
	font-family: 'Iceberg', cursive;
	margin-bottom: 2rem;
	font-size: 2rem;
}
.logo {
	/* font-family: 'Iceberg', cursive; */
	font-family: 'Indie Flower', cursive;
	font-size: 1.5rem;
	/* font-family: 'Space Grotesk', sans-serif; */
}
.portofolio {
	/* position: relative; */
}

.portofolioNavbar .navbarWrapper {
	/* margin-top: 2rem; */
	padding-top: 2rem;
}
.navbarWrapper .closeMenu {
	display: none;
}
.navbarWrapper .burgerMenu {
	display: none;
}
.portofolioNavbar .listMenu {
	display: flex;
	gap: 4rem;
}

.listMenu li {
	display: inline-block;
}
li .active {
	color: #f9f871;
}
li a {
	text-decoration: none;
	color: white;
	font-family: 'Iceberg', cursive;
	transition: .5s;
}
li a:hover {
	color: #f9f871;
	font-size: 1.1rem;
}

.heroPortofolio {
	margin-block: 3rem;
}
.heroPortofolio .heroWrapper {
}
.heroWrapper .heroContent {
	padding-right: 6rem;
}
.heroContent .contentDesc {
	font-family: 'Iceberg', cursive;
	font-size: 48px;
	/* width: 35rem; */
}
.heroContent .contentDetail {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	margin-block: 1rem;
}
.contentCta {
	background: #ffefca;
	display: flex;
	justify-content: space-between;
	width: max-content;
	padding: .5rem 2rem;
	color: black;
	font-family: 'Iceberg', cursive;
	cursor: pointer;
	transition: .5s;
	/* text-decoration: none; */
}
.contentCta:hover {
	background: #f9f871;
}
.workContent a {
	text-decoration: none;
}
.heroImage {
	/* background: aqua; */
}
.heroImage img {
	height: 22rem;
}
.aboutPortofolio {
	margin-block: 3rem;
}
.aboutWrapper .content {
	text-align: justify;
	font-size: clamp(1.3rem, 2.1vw, 1.75rem);
	line-height: 3rem;
	font-family: 'Space Grotesk', sans-serif;
	padding-right: 4rem;
}
.aboutWrapper .aboutImage {
	/* height: 25rem; */
	height: clamp(20rem, 28vw, 25rem);
}
.aboutImage img {
	height: 100%;
}
.workPortofolio .workContainer {
	display: grid;
	gap: 4rem;
}
.workWrapper .workContent {
	display: grid;
	align-items: center;
	gap: 2rem;
}
.workContent .workTitle {
	font-family: 'Iceberg', cursive;
	font-size: 2rem;
}
.workContent .workDesc {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1.5rem;
	/* background: yellow; */
}
.workContainer .workWrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.workWrapper .workImage {
	height: 15rem;
	display: flex;
	justify-content: right;
}
.workWrapper .multiImage {
	column-gap: 1rem;
}
.workImage img {
	height: 100%;
}
.contactPortofolio {
	margin-block: 3rem;
}
.contactPortofolioWrapper {
	/* display: grid;
	justify-content: center; */
}
.contactContainer {
	display: flex;
	align-items: center;
	gap: 2rem;
	color: #f9f871;
	font-family: 'Iceberg', cursive;
	margin-bottom: 2rem;
	font-size: 2rem;
}
.contactContainer svg {
	fill: #b8950a;
}
.modal {
	display: none; /* Hidden by default */
	grid-template-columns: repeat(4, 1fr);
	position: fixed; /* Stay in place */
	justify-content: center;
	align-items: center;
	padding-inline: 4rem;
	/* gap: 1rem; */
	z-index: 1; /* Sit on top */
	padding-top: 10px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100vw; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
	max-width: 100vw;
	max-height: 95vh;
}

/* Add Animation */
.modal-content,
#caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
	}
}

@keyframes zoom {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

/* The Close Button */
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width: 1200px) {
	.container {
		padding-inline: 6rem;
	}
	.heroImage img {
		height: clamp(15rem, 28.5vw, 20rem);
	}
	.heroContent .contentDesc,
	.heading {
		font-size: clamp(1.5rem, 3vw, 48px);
	}
	.heroContent .contentDetail {
		font-size: clamp(1rem, 2vw, 28px);
	}
	.heroWrapper .heroContent {
		padding-right: clamp(1rem, 3.5vw, 4rem);
	}
	.contentCta {
		font-size: .8rem;
		padding: .4rem 1.5rem;
	}
	.aboutWrapper .content {
		font-size: clamp(1rem, 2.2vw, 1.5rem);

		line-height: clamp(1rem, 3.5vw, 3rem);
		padding-right: clamp(1rem, 5.5vw, 4rem);
	}
	.aboutWrapper .aboutImage {
		height: clamp(15rem, 25vw, 18rem);
	}
	/* .workPortofolio .workContainer {
		display: grid;
		gap: 4rem;
	}
	*/
	.workWrapper .workContent {
		gap: 1.5rem;
	}
	.workContent .workTitle {
		font-size: clamp(1.1rem, 2.5vw, 2rem);
	}
	.workContent .workDesc {
		font-size: clamp(.9rem, 2.2vw, 1.5rem);
	}
	.workWrapper .workImage {
		height: clamp(10rem, 19vw, 15rem);
	}
	.modal {
		gap: .5rem;
	}

	.modal-content {
		max-height: 77vh;
	}
}
@media only screen and (max-width: 800px) {
	.heroImage img {
		height: clamp(11rem, 30vw, 15rem);
	}
	.heroContent .contentDesc,
	.heading,
	.contactContainer {
		font-size: clamp(1.3rem, 3.7vw, 2rem);
	}
	.heroContent .contentDetail {
		font-size: clamp(1rem, 2.5vw, 1.5rem);
		text-align: justify;
	}
	.heroWrapper .heroContent {
		padding-right: 2rem;
	}
	.portofolioNavbar .listMenu {
		/* display: flex; */
		gap: 2rem;
	}
	.contentCta {
		font-size: .7rem;
		padding: .4rem 1.2rem;
	}
	.aboutWrapper .content {
		line-height: 2rem;
	}
	.aboutWrapper .aboutImage {
		height: clamp(13rem, 27vw, 15rem);
	}
	.workWrapper .workContent {
		gap: 1rem;
	}
	.workContent .workTitle {
		font-size: clamp(1.1rem, 4.7vw, 1.3rem);
	}
	.workContent .workDesc {
		font-size: clamp(.9rem, 4vw, 1.1rem);
	}
	.workWrapper .workImage {
		height: clamp(7rem, 20vw, 10rem);
	}
	.modal {
		grid-template-columns: repeat(3, 1fr);
	}
	.modal-content {
		max-height: 80vh;
	}
}
@media only screen and (max-width: 660px) {
	.container {
		padding-inline: 4rem;
	}

	.heroWrapper .heroContent {
		padding-right: 1rem;
	}

	.heroWrapper .heroImage {
		/* order: -1; */
		/* display: flex;
		justify-content: center;
		height: 174px; */
	}
	.heroImage img {
		height: clamp(7rem, 27vw, 11rem);
	}
	.aboutPortofolio .wrapper {
		display: grid;
	}

	.aboutWrapper .aboutImage {
		display: grid;
		justify-content: center;
		margin-top: 1rem;
	}
	.aboutImage img {
		height: clamp(13rem, 27vw, 15rem);
	}
	.workPortofolio .workContainer {
		gap: clamp(2rem, 20vw, 8rem);
	}

	.workPortofolio .wrapper {
		display: grid;
		gap: 2rem;
	}
	.workContainer .workWrapper {
		display: grid;
		grid-template-columns: initial;
		grid-template-rows: 1fr 1fr;
		gap: 2rem;
	}
	.workContent .workTitle {
		font-size: clamp(1.1rem, 4.7vw, 1.6rem);
	}
	.workContent .workDesc {
		font-size: clamp(.9rem, 4vw, 1.4rem);
	}
	.workWrapper .workImage {
		display: grid;
		justify-content: center;
	}
	.workWrapper .multiImage {
		display: flex;
		margin-bottom: 6rem;
	}
	.workImage img {
		height: clamp(8rem, 35vw, 15rem);
	}
	.modal {
		gap: 1.5rem;
		grid-template-columns: repeat(2, 1fr);
	}
	.modal-content {
		max-height: 80vh;
	}
}
@media only screen and (max-width: 490px) {
	.wrapper {
		display: grid;
	}
	.portofolioNavbar .navbarWrapper {
		display: flex;
	}

	.navbarWrapper .navbarBurger {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #27283e;
		display: grid;
		align-items: center;
		height: 100vh;
	}
	.portofolioNavbar .listBurger {
		display: grid;
		justify-content: center;
		gap: 5rem;
	}
	.navbarWrapper .burgerMenu {
		display: block;
	}
	.navbarMenu {
		display: none;
	}

	.portofolioNavbar .listMenu {
		/* display: none; */
	}
	.heroContent .contentDesc,
	.heading {
		/* font-size: clamp(1rem, 5.7vw, 2rem); */
		font-size: clamp(1.1rem, 4.9vw, 2rem);
	}
	.heroContent .contentDetail {
		font-size: clamp(1rem, 3.5vw, 1.5rem);
	}
	/* .heroWrapper .heroContent {
		padding-right: 0rem;
	} */
	.heroImage {
		margin-bottom: 2rem;
	}
	.heroImage img {
		height: clamp(10rem, 30vw, 12rem);
	}

	.aboutWrapper .content {
		line-height: 1.7rem;
	}
	/* .workPortofolio .wrapper {
		display: grid;
		gap: 1rem;
	} */
	.workPortofolio .workContainer {
		gap: clamp(2rem, 10vw, 4rem);
	}
	.workWrapper .workImage {
		justify-content: left;
	}
	.contactContainer {
		font-size: clamp(.9rem, 4.2vw, 1.25rem);
		gap: 1rem;
	}
	.modal {
		gap: 1.5rem;
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.modal-content {
		max-height: 60vh;
	}
}