#page-tentang-kami {
	.container {
		display: grid;
		gap: 1rem;

		@media (min-width: 1366px) {
			grid-template-columns: 1fr 500px;
		}

		#ptk-right {
			width: 100%;
			aspect-ratio: 16/9;
			overflow: hidden;
			iframe {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

#section-jasa {
	.container {
		gap: 1rem;

		#sja-bot {
			ul.sja-list {
				display: flex;
				flex-direction: column;
				gap: 1rem;

				li {
					padding: 0.3rem 0.5rem 0.3rem 1.5rem;
					position: relative;
					font-weight: var(--fw-700);

					&:before {
						content: "";
						width: 7px;
						height: 7px;
						border-radius: 50%;
						position: absolute;
						border: 2px solid var(--cp-text-primary);
						top: 50%;
						left: 0.5rem;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
}

#section-clients {
	.container {
		gap: 1rem;

		@media (min-width: 1024px) {
			display: grid;
			grid-template-columns: 300px 1fr;
		}
		@media (min-width: 1366px) {
			display: grid;
			grid-template-columns: 400px 1fr;
		}

		#scl-left {
			gap: 1rem;

			ul {
				gap: 1rem;
				li {
					border-bottom: 1px dashed var(--trans-dark-3);
					padding-bottom: 1rem;

					&:last-child {
						@media (min-width: 1024px) {
							border-bottom: none;
						}
					}
				}
			}
		}

		#scl-right {
			ul {
				columns: 2;
				font-size: var(--fs-12);

				@media (min-width: 768px) {
					font-size: var(--fs-14);
					columns: 3;
				}
				@media (min-width: 1366px) {
					columns: 4;
				}
				li {
					margin-bottom: 5px;
				}
			}
		}
	}
}

#section-portfolio {
	.container {
		gap: 1rem;

		#spo-bot {
			ul.portfolio-list {
				display: grid;
				gap: 1rem;

				@media (min-width: 412px) {
					grid-template-columns: repeat(2, 1fr);
				}
				@media (min-width: 1024px) {
					grid-template-columns: repeat(3, 1fr);
				}

				li.portfolio-item {
					padding: 0.5rem;

					h3 {
						margin: 4px 0;
					}
				}
			}
		}

		#spo-add {
			margin-top: 0.5rem;
		}
	}
}

#section-testimonial {
	.container {
		gap: 1rem;

		#ste-bot {
			display: grid;
			gap: 1rem;

			@media (min-width: 640px) {
				grid-template-columns: repeat(2, 1fr);
			}

			.testimonial-card {
				width: calc(100% - 1rem);
				position: relative;

				&:nth-child(even) {
					blockquote {
						@media (min-width: 412px) {
							position: relative;
							right: -5rem;
						}
						@media (min-width: 540px) {
							right: 0;
						}
					}
				}

				blockquote {
					margin: 0;
					background: var(--trans-light-9);
					padding: 1rem;
					font-style: italic;
					font-size: var(--fs-13);
					@media (min-width: 412px) {
						max-width: 300px;
					}
					@media (min-width: 540px) {
						max-width: calc(100% - 1rem);
					}
					p {
						margin: 4px 0;
					}
				}

				footer.testimonial-author {
					position: relative;
					display: flex;
					gap: 0.5rem;
					margin-top: 0.5rem;
					font-size: var(--fs-12);
					font-weight: var(--fw-700);

					.icon {
						width: 25px;
						height: 25px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
}

#section-faq {
	background-color: var(--cp-text-primary);
	color: var(--cp-bg-primary);
	a {
		color: var(--cp-bg-primary);
		text-decoration: underline;
	}
	.container {
		gap: 1rem;

		@media (min-width: 769px) {
			max-width: 768px;
		}

		.faq-top {
			h2 {
				color: var(--cp-bg-primary);
			}
		}

		.faq-bot {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			.faq {
				display: flex;
				flex-direction: column;
				text-align: left;

				button.question {
					color: var(--cp-1-light);
					text-align: left;
					padding: 0.3rem;
					line-height: normal;
					font-weight: var(--fw-700);
					border-bottom: 1px dashed var(--trans-light-1);
				}

				.answer {
					padding: 0.3rem;
				}
			}
		}
	}
}

#section-scope {
	.container {
		gap: 1rem;

		.bot {
			ul.scope-list {
				column-count: 2;
				column-gap: 1rem;
				font-size: var(--fs-12);

				@media (min-width: 390px) {
					column-count: 3;
				}
				@media (min-width: 640px) {
					column-count: 4;
				}
				@media (min-width: 768px) {
					column-count: 5;
					font-size: var(--fs-13);
				}
				@media (min-width: 991px) {
					column-count: 6;
				}
				@media (min-width: 1365px) {
					column-count: 7;
					font-size: var(--fs-14);
				}

				li {
					margin-bottom: 4px;
				}
			}
		}
	}
}