/* Tablet Styles (769px to 1024px) */

@media (min-width: 769px) and (max-width: 1024px) {
	/* -------------------- Global -------------------- */
	.page-title {
		font-size: 3rem;
	}

	.section-title {
		font-size: 2rem;
	}

	.subtitle {
		font-size: 1.4rem;
	}

	.body-text {
		font-size: 1rem;
	}

	/* -------------------- Header -------------------- */
	.header-bg {
		padding: 10px 15px;
	}

	.header {
		margin: 0 15px;
	}

	.logo img {
		height: 35px;
	}

	.menu-text {
		font-size: 0.9rem;
	}

	/* -------------------- Hero -------------------- */
	.hero-title {
		height: 5rem;
		background-size: contain;
	}

	.hero-subt span {
		font-size: 1.8rem;
	}

	.hero-subt2 {
		font-size: 1rem;
		width: 60%;
	}

	.hero-cta div {
		width: 10rem;
	}

	.hero-cta svg {
		height: 2rem;
	}

	/* -------------------- Video Cards -------------------- */
	.vid-container {
		margin-block: 2rem;
	}

	.media-box {
		width: 70vw;
	}

	.vid-tag {
		height: 10rem;
		width: 10rem;
		bottom: 2rem;
	}

	.vid-tag.L {
		inset-inline-start: -2rem;
	}

	.vid-tag.R {
		inset-inline-end: -2rem;
	}

	.counter {
		font-size: 2rem;
	}

	/* -------------------- Products -------------------- */
	.products-container {
		gap: 1.5rem;
		margin: 2rem;
	}

	.prd-title {
		font-size: 1.2rem;
	}

	.prd li {
		font-size: 0.9rem;
		padding: 2px 15px;
	}

	/* -------------------- Can Process -------------------- */
	.canprocess-container {
		padding: 40px 80px;
		gap: 1.5rem;
	}

	.cp h2 {
		font-size: 1.4rem;
	}

	.cp h3 {
		font-size: 1rem;
	}

	.cp::after {
		font-size: 200%;
		height: 50px;
	}

	/* -------------------- QC Section -------------------- */
	.qc-container {
		gap: 1rem;
	}

	.qc-box {
		height: 200px;
	}

	.qc-img {
		height: 250px;
	}

	/* -------------------- About Can (Grid) -------------------- */
	.about-can {
		gap: 1rem;
	}

	.c-cons {
		padding: 0.5rem;
	}

	.c-cons h4 {
		font-size: 1rem;
	}

	.c-cons li {
		font-size: 0.8rem;
	}

	/* -------------------- Contact Page -------------------- */
	.contact-box {
		gap: 0.8rem;
	}

	.item {
		padding: 15px;
	}

	.item h4 {
		font-size: 1rem;
	}

	/* -------------------- Our Team -------------------- */
	.our-team-container {
		height: 380px;
	}

	.our-team-card {
		width: 200px;
		height: 280px;
	}

	.member-name {
		font-size: 1.8rem;
	}

	.member-role {
		font-size: 1rem;
	}

	.nav-arrow {
		opacity: 0.6;
	}

	.nav-arrow svg {
		height: 40px;
	}

	.nav-arrow.left {
		left: 10px;
	}

	.nav-arrow.right {
		right: 10px;
	}

	/* -------------------- Timeline -------------------- */
	.tl-slide {
		width: 60%;
		margin-block: 5rem;
	}

	.tl-notes h2 {
		font-size: 1.5rem;
	}

	.tl-notes small {
		font-size: 1rem;
	}

	.tl-img {
		height: 15rem;
	}

	/* -------------------- Gallery -------------------- */
	.gallery {
		gap: 0.8rem;
		padding: 15px;
	}

	.gallery-img {
		min-height: 150px;
	}

	/* -------------------- Forms -------------------- */
	.customer-info-container {
		gap: 0.8rem;
	}

	.f {
		gap: 5px;
	}

	.f label {
		font-size: 0.8rem;
	}

	.f input,
	.f select,
	.f textarea {
		font-size: 0.85rem;
		padding: 2px 8px;
	}

	/* -------------------- Footer -------------------- */
	.footer-container {
		gap: 2rem;
		padding: 15px;
	}

	.footer-link {
		font-size: 0.9rem;
	}

	/* -------------------- Brief News Flip Cards -------------------- */
	.brief-news-container {
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.inner-flip {
		width: 220px;
		min-height: 300px;
	}

	.back-flip h2 {
		font-size: 1.2rem;
	}

	.back-flip h5 {
		font-size: 0.9rem;
	}

	/* -------------------- Customer Logos -------------------- */
	.customer-logo {
		height: 400px;
		padding: 2rem 0;
	}

	.logo-track img {
		height: 4rem;
	}

	/* -------------------- Statement Cards (About) -------------------- */
	.statement-container {
		margin: 20px;
		gap: 15px;
	}

	.statement-title {
		font-size: 2rem;
	}

	.upper-card {
		min-height: 150px;
	}

	.lower-card p {
		font-size: 0.9rem;
	}

	.statement-img {
		height: 60%;
		top: 70%;
	}

	/* -------------------- Order Wrapper -------------------- */
	.order-wrapper {
		gap: 0.8rem;
	}

	/* -------------------- Buttons -------------------- */
	.p-btn,
	.s-btn {
		font-size: 1rem;
		height: 50px;
	}
}