.hero {
	align-content: center;
	padding-block-start: 3.5rem;
	padding-block-end: var(--spacing-400);
}

/* Tablet (portrait) */
@media only screen and (max-width: 1025px) {
	.hero {
		padding-block-start: 9rem;
		padding-block-end: var(--spacing-200);
	}
}

.hero .even-columns {
	grid-template-columns: 550px 1fr;
	gap: 0;
}

.content {
	align-content: center;
}

.hero .image {
	display: flex;
	justify-content: center;
}

.hero .image img {
	height: 90%;
	align-self: center;
	border-radius: 1.5rem;
	object-fit: cover;
}

/* Mobile */
@media screen and (max-width: 768px) {
	.hero .even-columns {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 700px;
		gap: 2rem;
	}
	.content {
		text-align: center;
		margin-inline: auto;
	}
	.hero .image img {
		height: 80%;
	}
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1025px) {
	.hero .even-columns {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 700px;
	}
	.content {
		text-align: center;
		margin-inline: auto;
	}
	.hero .image img {
		height: 100%;
	}
}

.service {
	margin-block-end: 3rem;
}

.service .even-columns {
	display: grid;
	grid-template-rows: 100px 1fr;
}

.service__heading {
	display: grid;
	grid-template-rows: 30px 2fr;
	gap: 1rem;
}

.service-list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
}

.service-card {
	border-radius: 1.5rem;
	padding: 1rem;
	min-height: 400px;
	position: relative;
	overflow: hidden;
}

.service-card::before,
.product-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background: radial-gradient(
		circle,
		rgba(0, 0, 0, 0) 10%,
		rgba(0, 0, 0, 0.5) 100%
	); */
	/* background-image: url("/assets/image/defaultPic.png"); */
	background-color: var(--clr-background-100);
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
	z-index: 0;
	transition: all 0.6s ease;
}

.service-card:hover::before,
.product-card:hover::before {
	transform: scale(1.1);
}

.service-card p,
.service-card h3,
.product-card p,
.product-card h3 {
	position: relative;
	z-index: var(--z-index-100);
	color: black;
	/* text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.9); */
}

.link {
	justify-self: center;
	align-self: center;
}

/* Mobile */
@media screen and (max-width: 768px) {
	.service .even-columns {
		grid-template-rows: 100px 1fr 50px;
	}
	.service-list {
		grid-template-columns: 1fr;
	}
	.service-card {
		min-height: 250px;
	}
}

/* Tablet (portrait) */
@media only screen and (min-width: 768px) and (max-width: 1025px) {
	.service .even-columns {
		grid-template-rows: 100px 1fr 100px;
	}
	.service-list {
		grid-template-columns: 1fr 1fr;
	}
	.service-card {
		min-height: 250px;
	}
}

/* Tablet (landscape) */
@media only screen and (min-width: 1025px) and (max-width: 1281px) {
	.service-list {
		grid-template-columns: 1fr 1fr;
	}
	.service-card {
		min-height: 250px;
	}
}

.product .even-columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 1em;
}

.product__heading {
	display: grid;
	grid-template-rows: 30px 2fr 1fr;
	gap: 1rem;
	padding: 2rem 0 2rem 0;
}

.product-card {
	border-radius: 1.5rem;
	padding: 1rem;
	height: 300px;
	position: relative;
	overflow: hidden;
}

/* Mobile */
@media screen and (max-width: 768px) {
	.product .even-columns {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 1rem;
	}
	.product__heading {
		display: grid;
		grid-template-rows: 30px 1fr 2fr;
		justify-items: center;
		padding: 0;
		text-align: center;
	}
	.product-card {
		height: 250px;
	}
	.link {
		margin-top: 5rem;
	}
}

/* Tablet (portrait) */
@media only screen and (min-width: 768px) and (max-width: 1025px) {
	.product .even-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}
	.product__heading {
		display: grid;
		grid-template-rows: 30px 1fr 2fr;
		justify-items: center;
		padding: 0;
		text-align: center;
		grid-column: span 2;
	}
	.product-card {
		height: 250px;
	}
	.link {
		align-self: center;
	}
}

/* Tablet (landscape) and Desktop */
@media only screen and (min-width: 1025px) {
	.product .even-columns {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 100px;
		gap: 1em;
	}
	.product .link {
		grid-column: span 3;
	}
}

.inner-padding {
	padding: 5rem;
}

.background-fill {
	background-color: var(--clr-background-100);
}

.license .even-columns {
	display: grid;
	grid-template-rows: 50px 1fr 5px 50px;
	gap: 3rem;
}

.license-list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
}

.license-card {
	background-color: var(--clr-background-200);
	height: 200px;
}

.license-card img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.license__more {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 200px;
	align-items: center;
}

.license__more a {
	justify-self: center;
}

/* Mobile */
@media screen and (max-width: 768px) {
	.license .even-columns {
		display: grid;
		grid-template-rows: auto 1fr 5px auto;
		gap: 3rem;
	}
	.license-list {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.license-card {
		height: 175px;
	}
	.license__more {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 180px;
		align-items: center;
	}
	.license__more a {
		justify-self: center;
	}
}

/* Tablet (portrait) */
@media only screen and (min-width: 768px) and (max-width: 1025px) {
	.license-card img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		scale: 0.9;
	}
}

.customer-gallery__heading {
	display: grid;
	grid-template-rows: 1fr;
	gap: 1rem;
	padding: 2rem 0 2rem 0;
	justify-content: center;
	margin-bottom: 5rem;
}

.customer-list {
	width: 90%;
	max-width: 1536px;
	margin-inline: auto;
	position: relative;
	height: 100px;
	margin-top: 2rem;
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1) 20%,
		rgba(0, 0, 0, 1) 90%,
		rgba(0, 0, 0, 0)
	);
}

@keyframes scrollLeft {
	to {
		left: -200px;
	}
}

.customer {
	width: 200px;
	height: 100px;
	/* background-color: var(--clr-background-100); */
	background-color: transparent;
	border-radius: 6px;
	position: absolute;
	left: max(calc(200px * 8), 100%);
	animation-name: scrollLeft;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.customer img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	align-items: center;
}

.list1 .customer {
	width: 200px;
	height: 100px;
	/* background-color: var(--clr-background-100); */
	border-radius: 6px;
	position: absolute;
	left: max(calc(200px * 8), 100%);
	animation-name: scrollLeft;
	animation-duration: 30s; /* Original speed */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.list2 .customer {
	width: 200px;
	height: 100px;
	/* background-color: var(--clr-background-100); */
	border-radius: 6px;
	position: absolute;
	left: max(calc(200px * 8), 100%);
	animation-name: scrollLeft;
	animation-duration: 40s; /* Slower speed */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.list1 .cus1 {
	animation-delay: calc(30s / 8 * (8 - 1) * -1);
}
.list1 .cus2 {
	animation-delay: calc(30s / 8 * (8 - 2) * -1);
}
.list1 .cus3 {
	animation-delay: calc(30s / 8 * (8 - 3) * -1);
}
.list1 .cus4 {
	animation-delay: calc(30s / 8 * (8 - 4) * -1);
}
.list1 .cus5 {
	animation-delay: calc(30s / 8 * (8 - 5) * -1);
}
.list1 .cus6 {
	animation-delay: calc(30s / 8 * (8 - 6) * -1);
}
.list1 .cus7 {
	animation-delay: calc(30s / 8 * (8 - 7) * -1);
}
.list1 .cus8 {
	animation-delay: calc(30s / 8 * (8 - 8) * -1);
}

.list2 .cus1 {
	animation-delay: calc(40s / 8 * (8 - 1) * -1);
}
.list2 .cus2 {
	animation-delay: calc(40s / 8 * (8 - 2) * -1);
}
.list2 .cus3 {
	animation-delay: calc(40s / 8 * (8 - 3) * -1);
}
.list2 .cus4 {
	animation-delay: calc(40s / 8 * (8 - 4) * -1);
}
.list2 .cus5 {
	animation-delay: calc(40s / 8 * (8 - 5) * -1);
}
.list2 .cus6 {
	animation-delay: calc(40s / 8 * (8 - 6) * -1);
}
.list2 .cus7 {
	animation-delay: calc(40s / 8 * (8 - 7) * -1);
}
.list2 .cus8 {
	animation-delay: calc(40s / 8 * (8 - 8) * -1);
}

.service-card-1::before {
	background-image: url("/assets/image/service-osT/Product_Design-03.png");
}
.service-card-2::before {
	background-image: url("/assets/image/service-osT/Vertical_Injection-03.png");
}
.service-card-3::before {
	background-image: url("/assets/image/service-osS/Over_Mold-04.png");
}
.service-card-4::before {
	background-image: url("/assets/image/service-osS/Insert_Mold-05.png");
}

.product-card-1::before {
	background-image: url("/assets/image/product-osT/PDIP_SOIC-11.jpg");
}
.product-card-2::before {
	background-image: url("/assets/image/product-osT/Single_and_Matrix-07.jpg");
}
.product-card-3::before {
	background-image: url("/assets/image/product-osS/Insert_Molding-09.jpg");
}
.product-card-4::before {
	background-image: url("/assets/image/product-osS/Micro-09.jpg");
}
.product-card-5::before {
	background-image: url("/assets/image/product-osS/FMCG-13.jpg");
}