/* --- Firstview Section --- */
.firstview {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	color: var(--theme-black-base);

	& picture {
		width: 100%;
	}

	.background {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.content {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 100%;
		z-index: 3;
		max-width: 1200px;
		padding: 40px;
		display: flex;
		flex-direction: column;

		.content-text {
			max-width: 600px;

			.content-title {
				font-size: 3.5rem;
				font-family: "Koh Santepheap", serif;
				font-weight: bold;
				line-height: 1.2;
				margin-bottom: 20px;

			}

			.content-subtitle {
				font-size: 1.8rem;
				font-family: "Koh Santepheap", serif;
				font-weight: normal;
				line-height: 1.4;
				margin-bottom: 25px;
			}

			.content-description {
				font-size: 1.1rem;
				line-height: 1.7;
			}
		}
	}

	.content-logo {
		position: absolute;
		right: 0;
		top: 50%;
		max-width: 600px;

		& img {
			max-width: 100%;
			height: auto;
		}
	}

	@media screen and (max-width: 768px) {
		min-height: unset;
		height: unset;

		.content {
			flex-direction: column;
			justify-content: center;
			text-align: center;
			padding: 30px 20px;

			.content-text {
				position: absolute;
				bottom: 0;
				text-align: left;

				.content-title {
					font-size: 2rem;
					margin-bottom: 0;
				}

				.content-subtitle {
					font-size: 1.2rem;

				}

				.content-description {
					/* display: none; */
				}
			}

			.content-logo {
				flex-basis: auto;
				max-width: 55%;
				justify-content: center;
				margin-bottom: 20px;
				order: 1;
			}
		}
	}
}


/* --- about-section --- */
.about {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 3rem;
	padding: 10rem 0 14rem;
	background-color: var(--theme-beige);

	@media screen and (max-width: 768px) {
		flex-direction: column;
		padding: 5rem 0 5rem;
	}

	.image {
		flex: 6;

		img {
			max-width: 100%;
			height: auto;
			display: block;
		}

		@media screen and (max-width: 768px) {
			margin-bottom: 20px;
		}
	}

	.text {
		flex: 4;
		text-align: right;
		padding-right: 4rem;

		.title {
			position: relative;
			font-size: 9rem;
			margin-bottom: 3rem;
			padding-bottom: 2rem;

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				right: 0;
				width: 130px;
				height: 15px;
				background: linear-gradient(to right, #9AC042, #48A851);
			}
		}

		.subtitle {
			font-size: 2.4rem;
			line-height: 1.6;
			margin-bottom: 15px;
			color: var(--theme-black-soft);
		}

		.body {
			font-size: 1.5rem;
			line-height: 1.6;
			text-align: left;
		}

		@media screen and (max-width: 768px) {
			text-align: left;
			padding: 0 2rem;

			.title {
				font-size: 4rem;
				&::after{
					right: unset;
					left: 0;
				}
			}

			.subtitle {
				font-size: 1.5rem;
			}
		}
	}
}

/* --- Business Description Section --- */
.biz-desc {
	padding: 4rem 0;
	color: var(--theme-white);
	background-color: var(--theme-black-base);

	.inner {
		max-width: 1100px;
		margin: 0 auto;

		.title {
			position: relative;
			font-size: 4.8rem;
			font-weight: bold;
			text-align: left;
			margin-bottom: 10rem;
			padding-bottom: 3rem;

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 130px;
				height: 15px;
				background: linear-gradient(to right, #9AC042, #48A851);
			}
		}

		.items {
			display: grid;
			gap: 55px;
			grid-template-columns: repeat(3, 1fr);

			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(1, 1fr);
			}
				.item {
				position: relative;
				overflow: hidden;
				display: flex;
				flex-direction: column;

			
				.image img {
					width: 100%;
					height: 200px;
					object-fit: cover;
					display: block;
				}

				.content {
					padding: 1rem 0;
					display: flex;
					flex-direction: column;
					flex-grow: 1;

					.content-title {
						font-size: 2.4rem;
						font-weight: bold;
						margin-top: 0;
						margin-bottom: 1rem;
					}

					.content-text {
						font-size: 1.5rem;
						line-height: 1.7;
						margin-bottom: 20px;
						flex-grow: 1;
					}
					.link{
						text-decoration: none;
						text-align: center;
						font-size: 1.2rem;
						color: var(--theme-white);
						width: 140px;;
						margin-left: auto;
						border: 1px solid;
						border-image: linear-gradient(to right, #9AC042, #48A851);
						border-image-slice: 1;
						padding: .5rem;
						&:hover{
							color: var(--theme-black-base);
							background-image: none;
							background-color: var(--theme-beige);
						}
					}
		
				}	
			}
		}	
	}

	@media screen and (max-width: 768px) {
		.inner {
			padding: 0 2rem;
			.title{
				font-size: 4rem;
			}
		}
	}
}

/* --- News Release Section --- */
.news-release {
	padding: 11rem 0 18rem;
	background-color: var(--theme-beige);

	.inner {
		max-width: 820px;
		margin: 0 auto;

		.title {
			position: relative;
			font-size: 4.8rem;
			font-weight: bold;
			text-align: left;
			color: var(--theme-black-soft);
			margin-bottom: 5rem;
			padding-bottom: 3rem;

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 130px;
				height: 15px;
				background: linear-gradient(to right, #9AC042, #48A851);
			}
		}

		.list {
			margin-bottom: 30px;

			& a {
				display: flex;
				align-items: center;
				padding: 15px;
				margin-bottom: 15px;
				text-decoration: none;
				color: var(--theme-white);
				background-color: rgba(51, 51, 51, 0.8);

				&:hover {
					opacity: 0.7;
				}

				.date {
					font-size: 1.2rem;
					margin-left: 7.5rem;
					margin-right: 13rem;
					white-space: nowrap;
					flex-shrink: 0;
				}

				.news-title {
					font-size: 1.5rem;
					font-weight: normal;
					line-height: 1.5;
					flex-grow: 1;
				}
			}
		}

		.archive-link {
			text-align: right;

			.archive-link {
				position: relative;
				display: inline-block;
				padding: 12px 28px;
				color: var(--theme-white);
				text-decoration: none;
				font-weight: bold;
				overflow: hidden;
				z-index: 0;
				background: linear-gradient(to right, #9AC042, #48A851);

				&:hover {
					background: none;
					background-color: var(--theme-black-base);
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		padding: 5rem 2rem;

		.inner {
			.title{
				font-size: 4rem;
			}
			.list {
				& a {
					.date {
						margin-left: 1rem;
						margin-right: 1rem;
					}
				}
			}

		}
	}
	@media screen and (max-width: 768px) {
		.archive-link {
			text-align: center;

			.archive-link {
				padding: 10px 20px;
			}
		}
	}
}