@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap");

body {
	font-family: Work Sans;
	background-color: #f6f6fa;
	color: #343f4f;
}

@keyframes slide-up {
	0% {
		transform: translateY(200px);
		/* Posisi awal elemen di bawah */
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		/* Posisi akhir elemen (di atas) */
		opacity: 1;
	}
}

.img-thumb {
	overflow: hidden;
}

.img-thumb:hover img {
	transform: scale(1.4);
	transition: transform 0.3s ease-in-out;
}

.navbar {
	padding: 20px 0px;
	transition: background-color 0.3s;
}

.garis {
	margin-top: -20px;
}

.navbar .navbar-brand {
	font-size: 24px;
	font-weight: 400;
}

.navbar ul li .actives {
	color: #4e4aff;
	font-weight: 700;
}

.navbar ul li .actives::after {
	content: "\2022";
	/* Unicode untuk bullet point (lingkaran) */
	color: #4e4aff;
	font-weight: 700;
	margin-left: 10px;
	/* Jarak antara bulatan dan teks */
	width: 14px;
	/* Ukuran total elemen (bulatan + border) */
	height: 14px;
	border: 0.4px solid #c8c7ff;
	/* Lebar border */
	border-radius: 50%;
	/* Membuatnya bulat */
	display: inline-flex;
	/* Agar elemen bulatan dan teks bersamaan dan dapat diatur secara vertikal dan horizontal */
	justify-content: center;
	/* Menengahkan secara horizontal */
	align-items: center;
	/* Menengahkan secara vertikal */
	padding: 0px 0 0 0;
	/* Menghapus padding */
}

/* Gaya navbar ketika digulir */
.navbar.navbar-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	/* Warna latar belakang yang Anda inginkan saat digulir */
	z-index: 1000;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-see-more {
	border: 1px solid #1b1818;
	padding: 10px 30px;
	display: flex;
	border-radius: 43px;
	cursor: pointer;
	justify-content: center;
	text-decoration: none;
	color: #000;
}

.btn-see-more:hover {
	background-color: #4e4aff;
	color: #fff;
	border: 1px solid #fff;
}

.btn-see-more p {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.02em;
	margin-bottom: 0;
}

.title-header {
	color: #4e4aff;
}

/* hero */
#hero {
	margin-top: 60px;
}

#hero .bg-hero {
	width: 100%;
}

#hero .hero-md {
	display: flex;
	gap: 14px;
	margin-bottom: 10px;
}

#hero .bg-hero-sm {
	display: none;
}

#hero .hero-sm {
	display: none;
}

#hero .logo-outline {
	width: 129px;
	height: 114px;
	align-self: center;
}

#hero .start-blue {
	width: 23px;
	height: 23px;
	display: flex;
	align-self: center;
}

#hero .img-plus {
	width: 52px;
}

#hero span {
	color: #343f4f;
}

#hero .trans {
	font-size: 32px;
	font-weight: 100;
	line-height: 45px;
	letter-spacing: 0.15em;
	align-self: center;
	display: flex;
	margin: 0;
}

#hero .extra {
	font-size: 48px;
	font-weight: 700;
	line-height: 67px;
	letter-spacing: 0.15em;
	animation: slide-up 0.4s;
}

#hero .extra span {
	animation: slide-up 0.5s;
}

#hero .for {
	font-size: 48px;
	font-weight: 300;
	line-height: 67px;
	letter-spacing: 0.15em;
	margin-left: 62px;
}

#hero .through {
	font-size: 22px;
	font-weight: 300;
	line-height: 31px;
	letter-spacing: 0.215em;
	margin-bottom: 0px;
	animation: slide-up 0.6s;
}

#hero .graphic {
	animation: slide-up 0.8s;
	font-size: 58px;
	font-weight: 700;
	line-height: 81px;
	letter-spacing: 0.02em;
	margin-left: 20px;
	align-self: center;
	display: flex;
	margin-bottom: 0;
}

#hero .sosmed-sm {
	display: none;
}

#hero .sosmed {
	margin-top: 30px;
	justify-content: evenly;
}

#hero .sosmed-item {
	gap: 40px;
	display: flex;
}

#hero .sosmed .line {
	background-color: #666464;
	height: 1px;
	width: 100%;
}

#hero a span:hover {
	text-decoration: underline;
}

#hero .sosmed img {
	width: 24px;
	height: 24px;
	align-self: center;
}

#hero .sosmed .item {
	font-size: 24px;
	font-weight: 500;
	line-height: 34px;
	letter-spacing: 0.02em;
	display: flex;
	text-decoration: none;
}

#hero .sosmed .item img {
	margin-right: 10px;
}

/* akhir hero */

/* service */
#service {
	padding-top: 140px;
}

#service .elevate {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0em;
}

#service .where {
	font-size: 22px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: 0em;
	margin-top: 10px;
}

#service .content-card {
	margin-top: 80px;
}

#service .card {
	border: none;
	background-color: transparent;
}

#service .card-header {
	background-color: #F0F0F0;
	border-radius: 50px 0px 0px 0px;
	border: none;
	height: 423px;
	padding: 20px 50px 50px 50px;
}

#service .card-body {
	background-color: #4e4aff;
	border-radius: 50px 0px 0px 0px;
	position: relative;
}

#service .vertical-text {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	font-size: 32px;
	font-weight: 400;
	letter-spacing: 0em;

	/* Tambahkan kode berikut untuk mengatur teks di tengah secara vertikal */
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	height: 40%;
	/* Mengisi tinggi elemen (harus memiliki parent dengan tinggi yang telah ditentukan) */
}

#service .btn-lights {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #fff;
	border: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0em;
	padding: 10px 16px;
	border-radius: 12px 0 0 0;
}

#service .isi-card {
	padding: 20px 30px 30px 30px;
}

#service .number {
	color: #fff;
	font-family: Work Sans;
	font-size: 40px;
	font-style: normal;
	font-weight: 300;
	line-height: 55.733px;
	/* 139.333% */
}

#service .line {
	height: 1px;
	align-self: center;
	background-color: #fff;
	margin-left: 67px;
	margin-top: 40px;
	margin-bottom: 32px;
}

#service .isi-card .row {
	margin-left: 52px;
}

#service .row .list {
	color: #E9E9FA;
	font-family: "Work Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

#service .content-card .d-flex span {
	font-size: 16px;
	font-weight: 350;
	line-height: 30px;
	letter-spacing: 0em;
	color: #fff;
	text-decoration: none;
	border: 1px solid #fff;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: default;
}

#service .title-card {
	color: #FFF;
	font-family: Work Sans;
	font-size: 72px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	letter-spacing: 0em;
	color: #fff;
	margin-left: 12px;
}

#service .deskripsi-card {
	color: #fff;
	margin-bottom: 40px;
	font-size: 20px;
	font-weight: 350;
	line-height: 35px;
	letter-spacing: 0em;
}

#service .title-sm {
	display: none;
}

/* akhir service */

/* portfolio_lama */
#portfolio_lama {
	padding-top: 60px;
}

#portfolio_lama .explor {
	max-width: 62%;
	margin: 12px auto 24px auto;
	font-size: 42px;
	font-weight: 700;
	line-height: 59px;
	letter-spacing: 0em;
}

#portfolio_lama .we-strive {
	max-width: 70%;
	margin: auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: 0em;
	margin-top: 24px;
}

#portfolio_lama .content {
	padding-top: 0px;
}

#portfolio_lama .content .col-12 {
	padding-bottom: 50px;
}

#portfolio_lama p {
	margin: 0;
}

#portfolio_lama .content .isi-content-luar {
	padding-bottom: 50px;
}

#portfolio_lama .content .title {
	font-size: 32px;
	font-weight: 600;
	line-height: 160%;
	/* 51.2px */
	letter-spacing: 0.64px;
	text-transform: uppercase;
}

#portfolio_lama .content .title-content {
	color: #343f4f;
	font-family: Work Sans;
	font-size: 22px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	/* 35.2px */
	margin-top: 20px;
	display: block;
	text-decoration: none;
}

#portfolio_lama .content .title-content:hover {
	text-decoration: underline;
}

#portfolio_lama .content i {
	cursor: pointer;
}

#portfolio_lama .isi-content1 .row,
.isi-content2 .row,
.isi-content3 .row {
	margin-top: 50px;
}

/* akhir portfolio_lama */

/* portfolio */
#portfolio {
	padding-top: 60px;
}

#portfolio .making {
	max-width: 80%;
	margin: 12px auto 24px auto;
	font-size: 42px;
	font-weight: 700;
	line-height: 59px;
	letter-spacing: 0em;
}

#portfolio .we-present {
	max-width: 75%;
	margin: auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: 0em;
	margin-top: 24px;
}

#portfolio .content {
	padding-top: 60px;
}

#portfolio .blue-background {
	text-align: center;
	position: relative;
}

#portfolio .centered-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

#portfolio .centered-text .case {
	color: #f6f6fa;
	font-size: 28px;
	font-weight: 600;
	line-height: 160%;
	/* 51.2px */
	letter-spacing: 0.64px;
	text-transform: uppercase;
	margin: 0;
}

#portfolio .centered-text .nomor {
	color: #f6f6fa;
	font-size: 15px;
	font-weight: 400;
	line-height: 160%;
	/* 24px */
	letter-spacing: 0.3px;
	text-decoration-line: underline;
	text-transform: uppercase;
	margin-left: 5px;
}

#portfolio .content .title {
	font-size: 32px;
	font-weight: 600;
	line-height: 160%;
	/* 51.2px */
	letter-spacing: 0.64px;
	text-transform: uppercase;
}

#portfolio .content .view {
	color: #343f4f;
	font-size: 24px;
	font-weight: 300;
	line-height: 160%;
	/* 38.4px */
	letter-spacing: 0.48px;
	align-self: center;
}

#portfolio .btn-see-more {
	border: 1px solid #fff;
	color: #fff;
	border-radius: 18px 18px 0 0;
	border-bottom: none;
}

#portfolio .btn-see-more:hover {
	background-color: #fff;
	color: #343f4f;
	border: 1px solid #fff;
	border-bottom: none;
}

#portfolio .isi {
	color: #fff;
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	line-height: 140%;
	/* 44.8px */
	margin-bottom: 30px;
}

#portfolio .image-container-md {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#portfolio .content img {
	max-width: 424px;
	/* padding: 6px; */
}

#portfolio .content .img-thumb {
	margin: 6px;
	overflow: hidden;
	border-radius: 24px;
}

#portfolio .image-container-md img {
	max-width: 412px;
}

#portfolio .image-container-md .isi-content {
	position: absolute;
	text-align: center;
	margin-bottom: 5px;
	border-radius: 5px;
	z-index: 1;
	/* Jika Anda ingin konten ini menutupi gambar, jika tidak, hilangkan baris ini */
	transition: opacity 0.3s ease;
	bottom: 0px;
}

#portfolio .image-container-sm {
	display: none;
}

/* akhir portfolio */

/* about us */
#about {
	padding-top: 140px;
}

#about .who {
	font-size: 40px;
	font-weight: 700;
	line-height: 56px;
	letter-spacing: 0em;
}

#about .we-are {
	font-size: 20px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: 0em;
}

#about .see-all {
	/* margin-left: 88px; */
	margin-top: -34px;
	display: block;
	font-size: 24px;
	font-weight: 400;
	line-height: 42px;
	letter-spacing: 0em;
	color: #4e4aff;
}

/* akhir about us */

/* project */
#project {
	padding-top: 140px;
}

#project .got {
	font-size: 58px;
	font-weight: 700;
	line-height: 81px;
	letter-spacing: 0.02em;
}

#project .lets {
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
	letter-spacing: 0em;
}

#project .btn-line {
	margin-top: 50px;
}

/* akhir project */

/* footer */
footer {
	background-color: #1b1818;
	padding: 80px 0px 40px 0px;
	margin-top: -59px;
	color: #fff;
}

footer .bg {
	width: 87%;
	margin-top: -30px;
	background-image: url("../img/bg-footer.png");
	background-size: cover;
	/* Menyesuaikan ukuran gambar dengan elemen */
	background-repeat: no-repeat;
	/* Menghindari pengulangan gambar */
	height: 300px;
}

footer .title {
	font-size: 20px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0em;
	margin-bottom: 32px;
}

footer a {
	font-size: 16px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: 0em;
	display: block;
	color: #fff;
	text-decoration: none;
	margin-bottom: 10px;
}

footer a:hover {
	text-decoration: underline;
}

/* akhir footer */

@media (max-width: 1400px) {
	#hero .trans {
		font-size: 27px;
		font-weight: 300;
		line-height: 45px;
		letter-spacing: 0.15em;
		align-self: center;
		display: flex;
		margin: 0;
	}

	#hero .extra {
		font-size: 42px;
		font-weight: 700;
		line-height: 67px;
		letter-spacing: 0.15em;
		animation: slide-up 0.4s;
	}

	#hero .for {
		font-size: 42px;
		font-weight: 300;
		line-height: 67px;
		letter-spacing: 0.15em;
		margin-left: 62px;
	}

	#hero .through {
		font-size: 20px;
		font-weight: 300;
		line-height: 31px;
		letter-spacing: 0.215em;
		margin-bottom: 0px;
		animation: slide-up 0.6s;
	}

	#hero .graphic {
		animation: slide-up 0.8s;
		font-size: 50px;
		font-weight: 700;
		line-height: 81px;
		letter-spacing: 0.02em;
		margin-left: 20px;
		align-self: center;
		display: flex;
		margin-bottom: 0;
	}

	#hero .sosmed-item {
		gap: 20px;
		display: flex;
	}

	#service .deskripsi-card {
		color: #fff;
		margin-bottom: 40px;
		font-size: 19px;
		font-weight: 350;
		line-height: 35px;
		letter-spacing: 0em;
	}

	#service .vertical-text {
		writing-mode: vertical-lr;
		transform: rotate(180deg);
		font-size: 32px;
		font-weight: 400;
		letter-spacing: 0em;
		color: #343F4F;

		/* Tambahkan kode berikut untuk mengatur teks di tengah secara vertikal */
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		height: 40%;
		/* Mengisi tinggi elemen (harus memiliki parent dengan tinggi yang telah ditentukan) */
	}

	#portfolio .image-container-md .isi-content {
		position: absolute;
		text-align: center;
		margin-bottom: 0px;
		border-radius: 5px;
		z-index: 1;
		/* Jika Anda ingin konten ini menutupi gambar, jika tidak, hilangkan baris ini */
		transition: opacity 0.3s ease;
		bottom: 0;
	}

	#portfolio .centered-text .case {
		color: #f6f6fa;
		font-size: 24px;
		font-weight: 600;
		line-height: 160%;
		/* 51.2px */
		letter-spacing: 0.64px;
		text-transform: uppercase;
		margin: 0;
	}

	#portfolio .content img {
		max-width: 355px;
		/* padding: 6px; */
	}

	#portfolio .content .img-thumb {
		margin: 6px 3px;
		overflow: hidden;
		border-radius: 18px;
	}

	#portfolio .image-container-md img {
		max-width: 345px;
	}

	footer {
		background-color: #1b1818;
		padding: 80px 0px 40px 0px;
		margin-top: -51px;
		color: #fff;
	}
}

@media (max-width: 767.98px) {

	/* hero */
	#hero {
		margin-top: 40px;
	}

	#hero .bg-hero {
		width: 75%;
		display: flex;
		margin: 0 auto 20px auto;
	}

	#hero .img-plus {
		width: 24px;
		align-self: center;
	}

	#hero .trans {
		font-size: 30px;
	}

	#hero .extra {
		font-size: 30px;
	}

	#hero .for {
		font-size: 30px;
		margin-left: 40px;
	}

	#hero .through {
		font-size: 22px;
		font-weight: 300;
		line-height: 31px;
		letter-spacing: 0.215em;
		margin-bottom: 0px;
	}

	#hero .graphic {
		font-size: 30px;
		margin-left: 20px;
	}

	#hero .sosmed .line {
		width: 140px;
	}

	/* akhir hero */

	/* service */
	#service {
		padding-top: 80px;
	}

	#service .elevate {
		font-size: 30px;
		margin-bottom: 10px;
	}

	#service .where {
		font-size: 18px;
	}

	#service .content-card {
		margin-top: 50px;
	}

	#service .card-header {
		height: 290px;
	}

	#service .card {
		margin-bottom: 20px;
	}

	#service .number {
		margin: 0;
		color: #fff;
		font-size: 40px;
		font-weight: 700;
		line-height: 56px;
		letter-spacing: 0em;
	}

	#service .title-card {
		font-size: 28px;
	}

	#service .deskripsi-card {
		font-size: 18px;
	}

	#service .isi-card {
		padding: 20px 40px 40px 40px;
	}

	#service .vertical-text {
		writing-mode: vertical-lr;
		transform: rotate(270deg);
		font-size: 32px;
		font-weight: 400;
		letter-spacing: 0em;
		margin: auto;

		/* Tambahkan kode berikut untuk mengatur teks di tengah secara vertikal */
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		/* Mengisi tinggi elemen (harus memiliki parent dengan tinggi yang telah ditentukan) */
	}

	/* akhir service */

	/* portfolio_lama */
	#portfolio_lama {
		padding-top: 30px;
	}

	#portfolio_lama .explor {
		max-width: 100%;
		margin: 12px auto 20px auto;
		font-size: 30px;
		line-height: 46px;
	}

	#portfolio_lama .we-strive {
		max-width: 100%;
		font-size: 18px;
		margin-top: 0px;
	}

	/* akhir portfolio_lama */

	/* portfolio */
	#portfolio {
		padding-top: 80px;
	}

	#portfolio .making {
		max-width: 100%;
		margin: 12px auto 20px auto;
		font-weight: 700;
		line-height: 46px;
		font-size: 30px;
	}

	#portfolio .we-present {
		max-width: 100%;
		margin: auto;
		font-size: 18px;
		font-weight: 400;
		line-height: 35px;
		letter-spacing: 0em;
	}

	#portfolio .card1 {
		margin-top: 50px;
	}

	#portfolio .card2 {
		margin-top: 50px;
	}

	#portfolio .card .title-card {
		font-size: 20px;
	}

	#portfolio .card .title-big {
		font-size: 26px;
		line-height: 46px;
		margin: 16px 0px 12px 0px;
	}

	#portfolio .card .keterangan {
		font-size: 16px;
	}

	#portfolio .content img {
		max-width: 240px;
		padding: 6px;
	}

	#portfolio .image-container-md img {
		max-width: 240px;
	}

	/* akhir portfolio */

	/* about us */
	#about {
		padding-top: 80px;
	}

	#about .who {
		font-size: 30px;
		font-weight: 700;
		line-height: 46px;
	}

	#about .we-are {
		font-size: 16px;
		font-weight: 400;
		line-height: 35px;
	}

	/* akhir about us */

	/* project */
	#project {
		padding-top: 80px;
	}

	#project .got {
		font-size: 30px;
		font-weight: 700;
		line-height: 46px;
		letter-spacing: 0.02em;
	}

	#project .lets {
		font-size: 16px;
		font-weight: 300;
		line-height: 28px;
		letter-spacing: 0em;
	}

	#project .btn-line {
		margin-top: 50px;
	}

	/* akhir project */

	/* footer */
	footer {
		background-color: #1b1818;
		padding: 80px 0px 40px 0px;
		margin-top: -49px;
		color: #fff;
	}

	footer .bg {
		width: 87%;
		margin-top: -30px;
		background-image: url("../img/bg-footer.png");
		background-size: cover;
		/* Menyesuaikan ukuran gambar dengan elemen */
		background-repeat: no-repeat;
		/* Menghindari pengulangan gambar */
		height: 300px;
	}

	footer .title {
		font-size: 20px;
		font-weight: 600;
		line-height: 35px;
		letter-spacing: 0em;
		margin-bottom: 32px;
	}

	footer a {
		font-size: 16px;
		font-weight: 400;
		line-height: 35px;
		letter-spacing: 0em;
		display: block;
		color: #fff;
		text-decoration: none;
		margin-bottom: 10px;
	}

	/* akhir footer */
}

@media (max-width: 400px) {
	.title-header {
		color: #4e4aff;
		font-size: 12px;
	}

	.navbar {
		padding: 12px 0px;
		transition: background-color 0.3s;
	}

	.garis {
		margin-top: -4px;
	}

	/* hero */
	#hero {
		margin-top: 34px;
	}

	#hero .hero-md {
		display: none;
	}

	#hero .hero-sm {
		display: flex;
		/* justify-content: space-between; */
		gap: 14px;
	}

	#hero .logo-outline {
		width: 71px;
		height: 63px;
	}

	#hero .start-blue {
		width: 8px;
		height: 8px;
		margin: 0px 8px;
		align-self: center;
	}

	#hero .bg-hero {
		display: none;
	}

	#hero .bg-hero-sm {
		width: 100%;
		display: flex;
		margin: 20px 0px 24px 0px;
	}

	#hero .img-plus {
		width: 24px;
		align-self: center;
	}

	#hero .trans {
		font-size: 15px;
		align-self: center;
	}

	#hero .extra {
		font-size: 24px;
		font-weight: 700;
		line-height: 34px;
		letter-spacing: 0.15em;
	}

	#hero .for {
		margin-left: 20px;
		color: #343f4f;
		font-size: 24px;
		font-weight: 300;
		line-height: 140%;
		/* 33.6px */
		letter-spacing: 3.6px;
		text-transform: uppercase;
	}

	#hero .through {
		font-size: 12px;
		font-weight: 300;
		line-height: 31px;
		letter-spacing: 0.215em;
		margin-bottom: 0px;
	}

	#hero .graphic {
		font-size: 28px;
		font-weight: 700;
		line-height: 33px;
		letter-spacing: 0.02em;
		margin: 0;
	}

	#hero .sosmed .line {
		width: 140px;
	}

	#hero .sosmed {
		display: none;
	}

	#hero .sosmed-sm {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	#hero .sosmed-sm .line {
		background-color: #666464;
		height: 1px;
		width: 160px;
		align-self: center;
	}

	#hero .sosmed-sm img {
		width: 16px;
		height: 16px;
		align-self: center;
	}

	#hero .sosmed-sm .item {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.02em;
		margin-left: 4px;
		display: flex;
		text-decoration: none;
	}

	#hero .sosmed-sm .item img {
		margin-right: 4px;
	}

	.garis hr {
		margin: 0;
	}

	/* akhir hero */

	/* service */
	#service {
		padding-top: 60px;
	}

	#service .elevate {
		font-size: 28px;
		font-weight: 700;
		line-height: 39px;
		letter-spacing: 0em;
	}

	#service .where {
		font-size: 16px;
		font-weight: 400;
		line-height: 26px;
		letter-spacing: 0em;
	}

	#service .content-card {
		margin-top: 30px;
	}

	#service .card-header {
		height: auto;
		padding: 16px 20px 16px 20px;
		border-radius: 30px 0px 0px 0px;
	}

	#service .card-header-sm {
		display: flex;
	}

	#service .card {
		margin-bottom: 20px;
	}

	#service .line {
		height: 1px;
		align-self: center;
		background-color: #fff;
		margin-left: auto;
		margin-top: 16px;
		margin-bottom: 20px;
		margin-left: 44px;
	}

	#service .number {
		margin: 0;
		color: #fff;
		font-size: 24px;
		font-weight: 400;
		line-height: 56px;
		letter-spacing: 0em;
	}
	#service .isi-card .row {
		margin-left: 30px;
	}

	#service .title-card {
		color: #FFF;
		font-family: Work Sans;
		font-size: 40px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: 0em;
		margin-left: 10px;
		color: #fff;
	}

	#service .deskripsi-card {
		font-size: 16px;
		font-weight: 350;
		line-height: 22px;
		margin-bottom: 24px;
	}

	#service .isi-card {
		padding: 14px 18px 60px 18px;
	}

	#service .isi-card .btn {
		font-size: 14px;
	}

	#service .vertical-text {
		display: none;
	}

	#service .card-header hr {
		display: none;
	}

	#service .title-sm {
		display: flex;
		align-self: center;
		margin: auto;
		font-size: 18px;
		font-weight: 400;
		line-height: 36px;
		letter-spacing: 0em;
		color: #000;
	}

	/* akhir service */

	/* portfolio_lama */
	#portfolio_lama {
		padding-top: 80px;
	}

	#portfolio_lama .explor {
		max-width: 100%;
		margin: 8px auto 16px auto;
		font-size: 28px;
		line-height: 39.2px;
	}

	#portfolio_lama .we-strive {
		max-width: 100%;
		font-size: 16px;
		margin-top: 0px;
		line-height: 25.6px;
	}

	#portfolio_lama .content {
		padding-top: 40px;
	}

	#portfolio_lama .content .col-12 {
		padding-bottom: 10px;
	}

	#portfolio_lama .content .isi-content-luar {
		padding-bottom: 10px;
	}

	#portfolio_lama .content .title {
		font-size: 18px;
		font-weight: 600;
		line-height: 36px;
		/* 200% */
		text-transform: uppercase;
	}

	#portfolio_lama .isi-content1 .row,
	.isi-content2 .row,
	.isi-content3 .row {
		margin-top: 20px;
	}

	#portfolio_lama .content .title-content {
		color: #343f4f;
		font-family: Work Sans;
		font-size: 22px;
		font-style: normal;
		font-weight: 600;
		line-height: 160%;
		/* 35.2px */
		margin-top: 10px;
		margin-bottom: 24px;
	}

	/* akhir portfolio_lama */

	/* portfolio */
	#portfolio {
		padding-top: 60px;
	}

	#portfolio .making {
		max-width: 100%;
		margin: 8px auto 16px auto;
		font-weight: 700;
		line-height: 39.2px;
		font-size: 28px;
	}

	#portfolio .we-present {
		max-width: 100%;
		margin: auto;
		font-size: 16px;
		font-weight: 400;
		line-height: 25px;
		letter-spacing: 0em;
	}

	#portfolio .content {
		padding-top: 40px;
	}

	#portfolio .content .title {
		font-size: 18px;
		font-weight: 600;
		line-height: 160%;
		/* 28.8px */
		letter-spacing: 0.36px;
		text-transform: uppercase;
	}

	#portfolio .content .view {
		font-size: 14px;
		font-weight: 300;
		line-height: 160%;
		/* 22.4px */
		letter-spacing: 0.28px;
	}

	#portfolio .btn-see-more p {
		font-size: 12px;
	}

	#portfolio .isi {
		color: #fff;
		font-family: Work Sans;
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: 140%;
		/* 25.2px */
		align-self: top;
		margin-bottom: 10px;
	}

	#portfolio .content img {
		max-width: 170px;
		padding: 4px;
	}

	#portfolio .content .image-container-sm img {
		max-width: 345px;
		padding: 4px;
		justify-content: center;
		margin: 0 auto;
	}

	#portfolio .image-container-sm {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#portfolio .image-container-sm .isi-content {
		position: absolute;
		z-index: 1;
		/* Jika Anda ingin konten ini menutupi gambar, jika tidak, hilangkan baris ini */
		transition: opacity 0.3s ease;
		bottom: 0;
	}

	#portfolio .image-container-md {
		display: none;
	}

	#portfolio .centered-text .case {
		color: #f6f6fa;
		font-size: 10px;
		font-weight: 600;
		line-height: 160%;
		/* 51.2px */
		letter-spacing: 0.64px;
		text-transform: uppercase;
		margin: 0;
	}

	#portfolio .centered-text .nomor {
		font-size: 6px;
	}

	#portfolio .d-md-block {
		justify-content: center;
	}

	/* akhir portfolio */

	/* about us */
	#about {
		padding-top: 60px;
	}

	#about .who {
		font-size: 28px;
		font-weight: 700;
		line-height: 39.2px;
		text-align: center;
		margin: 8px 0px 16px 0px;
	}

	#about .col-md-6 .d-flex img {
		display: none;
	}

	#about .col-md-6 .d-flex .align-self-center {
		display: flex;
		justify-content: center;
		gap: 5px;
		margin: auto;
	}

	#about .col-md-6 .d-flex .align-self-center img {
		display: flex;
	}

	#about .we-are {
		font-size: 16px;
		font-weight: 400;
		line-height: 25.6px;
		text-align: center;
	}

	#about .see-all {
		margin-top: -22px;
		display: block;
		font-size: 14px;
		font-weight: 400;
		line-height: 23px;
		letter-spacing: 0em;
	}

	/* akhir about us */

	/* project */
	#project {
		padding-top: 60px;
	}

	#project .got {
		font-size: 28px;
		text-align: center;
		font-weight: 700;
		line-height: 44px;
		letter-spacing: 0.02em;
	}

	#project .lets {
		font-size: 16px;
		font-weight: 300;
		line-height: 28px;
		letter-spacing: 0em;
		text-align: center;
		margin-bottom: 40px;
	}

	#project .btn-line {
		display: none;
	}

	/* akhir project */

	/* footer */
	footer {
		background-color: #1b1818;
		padding: 80px 0px 40px 0px;
		margin-top: -34px;
		color: #fff;
	}

	footer .bg {
		width: 100%;
		margin-top: -30px;
		background-image: url("../img/bg-footer.png");
		background-size: cover;
		/* Menyesuaikan ukuran gambar dengan elemen */
		background-repeat: no-repeat;
		/* Menghindari pengulangan gambar */
		height: 300px;
	}

	footer .title {
		font-size: 16px;
		font-weight: 600;
		line-height: 35px;
		letter-spacing: 0em;
		margin-bottom: 10px;
	}

	footer a {
		font-size: 14px;
		font-weight: 400;
		line-height: 35px;
		letter-spacing: 0em;
		display: block;
		color: #fff;
		text-decoration: none;
		margin-bottom: 4px;
	}

	/* akhir footer */
}