/*=========== TABLE OF CONTENTS ===========
1. Common CSS
2. Page CSS
==========================================*/

/*-------------------------------------
1. Common CSS
--------------------------------------*/
.showcase-productcard__image-2 {
	height: 516px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.showcase-productcard__info-2 {
	gap: var(--space-xl);
	display: flex;
	align-self: stretch;
	flex-direction: column;
	align-items: flex-start;
}

.showcase-productcard__title {
	text-shadow: 0px 1px 5px #00000004;
	@media only screen and (max-width: 1050px) {
		font-size: 26px;
	}

	@media only screen and (max-width: 550px) {
		font-size: 24px;
	}
}

.showcase-productcard__description {
	font-family: Montserrat !important;
	text-transform: lowercase;
	text-shadow: 0px 1px 5px #00000004;
}

.showcase-productcard__image {
	height: 516px;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.showcase-productcard__info {
	margin-right: 28px;
	gap: var(--space-xl);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	@media only screen and (max-width: 1050px) {
		margin-right: 0px;
	}
}

/*-------------------------------------
2. Page CSS
--------------------------------------*/
.columnarrowup {
	gap: 98px;
	display: flex;
	flex-direction: column;
	@media only screen and (max-width: 1440px) {
		gap: 98px;
	}

	@media only screen and (max-width: 1050px) {
		gap: 73px;
	}

	@media only screen and (max-width: 550px) {
		gap: 49px;
	}
}

.header-7 {
	height: 408px;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	background-image: url(../public/images/img_header.png);
	background-size: cover;
	background-repeat: no-repeat;
	@media only screen and (max-width: 1440px) {
		height: auto;
	}

	@media only screen and (max-width: 1050px) {
		height: auto;
	}
}

.group-312 {
	color: #d4d4d4ff !important;
	font-family: Gill Sans !important;
	font-size: 18px;
	font-weight: 400;
	width: 4.88px;
	height: 24px;
	@media only screen and (max-width: 1440px) {
		font-size: 15px;
	}
}

.pagetitle {
	margin-bottom: 38px;
	margin-left: 178px;
	letter-spacing: -0.64px;
	align-self: flex-end;
	text-shadow: 0px 1px 5px #00000004;
	@media only screen and (max-width: 1440px) {
		font-size: 48px;
	}

	@media only screen and (max-width: 1050px) {
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 0px;
	}
}

.stackvector_one-2 {
	height: auto;
	position: relative;
	padding: 100px 8rem;
}

.columnvector-9 {
	flex: 1;
	position: relative;
	left: 0px;
	bottom: 0px;
	right: 0px;
	top: 0px;
	height: max-content;
	margin: auto;
}

.rowvector_one-1 {
	z-index: 2;
	display: flex;
	align-items: flex-start;

	@media only screen and (max-width: 1050px) {
		flex-direction: column;
	}
}

.showcase__image {
	height: 392px;
	margin-top: auto;
	top: 40%;
	width: auto;
	object-fit: contain;
	position: absolute;
	left: 0px;

	@media only screen and (max-width: 1050px) {
		width: 100%;height: auto;width: 50%;left: auto;right: -72px;transform: scale(-1);
	}
}

.showcase__content {
	padding-left: var(--space-12xl);
	padding-right: var(--space-12xl);
	gap: 68px;
	align-self: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 0px;
	
	
	
	@media only screen and (max-width: 1050px) {
		align-self: stretch;
		padding-left: 20px;
		padding-right: 20px;
	}

	@media only screen and (max-width: 550px) {
		gap: var(--space-11xl);
	}
}

.showcase__description {
	gap: var(--space-16xl);
	display: flex;
	align-self: stretch;
	flex-direction: column;
	align-items: flex-start;
	@media only screen and (max-width: 550px) {
		gap: var(--space-10xl);
	}
}

.showcase__description-text {
	color: var(--gray_200) !important;
	width: 40%;
	line-height: 149%;
	@media only screen and (max-width: 1440px) {
		width: 100%;
	}

	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.showcase-productcard-3 {
	gap: 46px;
	display: flex;
	align-self: stretch;
	flex-direction: column;
	align-items: flex-start;
	transition: all 0.3s ease-in-out;
	@media only screen and (max-width: 1440px) {
		padding-left: 20px;
		padding-right: 20px;
	}

	@media only screen and (max-width: 1050px) {


		padding-left: 20px;
		padding-right: 20px;
		height: fit-content;


	}
}
.showcase-productcard__image-2:hover { transform: scale(1.05) !important; }
.columnvector-10 {
	margin-top: -292px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.showcase__image-1 {
	height: 666px;
	z-index: 1;
	width: 10%;
	position: relative;
	object-fit: contain;
}

.footer_one-7 {
	height: 658px;
	margin-top: -256px;
	position: relative;
	background-image: url(../public/images/img_footer_background.png);
	background-size: cover;
	background-repeat: no-repeat;
	align-self: stretch;
}

.stacksubheading-1 {
	height: 834px;
	z-index: 3;
	flex: 1;
	position: absolute;
	top: 20px;
	right: 0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
}

.contact-background-2 {
	margin-left: -116px;
	padding-left: var(--space-15xl);
	padding-right: var(--space-15xl);
	gap: var(--space-14xl);
	width: 42%;
	transform: rotate(170deg);
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	right: 6%;
	bottom: 0px;
	top: 0px;
	margin-top: auto;
	margin-bottom: auto;
	height: max-content;
	@media only screen and (max-width: 1440px) {
		margin-left: 0px;
	}

	@media only screen and (max-width: 1050px) {
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 0px;
	}

	@media only screen and (max-width: 550px) {
		padding-left: var(--space-3xl);
		padding-right: var(--space-3xl);
	}
}

.showcase__arrow-up-1 {
	height: 24px;
	position: absolute;
	bottom: 43%;
	right: 17%;
	margin: auto;
}

.showcase-productcard-1 {
	gap: 46px;
	z-index: 8;
	width: 44%;
	position: absolute;
	display: flex;
	flex-direction: column;
	bottom: -794px;
	right: 9%;
	margin: auto;
}

.showcase__arrow-up {
	height: 24px;
	z-index: 4;
	position: absolute;
	right: 17%;
	bottom: 0px;
	top: 0px;
	margin-top: auto;
	margin-bottom: auto;
}

.footer-11 {
	margin-left: 38px;
	margin-right: 38px;
	gap: var(--space-2xl);
	z-index: 5;
	position: absolute;
	flex-direction: column;
	flex: 1;
	display: flex;
	align-items: flex-start;
	bottom: 0px;
	right: 0px;
	left: 0px;
	@media only screen and (max-width: 1440px) {
		margin-left: 0px;
		margin-right: 0px;
	}

	@media only screen and (max-width: 1050px) {
		margin-left: 0px;
		margin-right: 0px;
	}
}

.footer__logo-row {
	padding-left: var(--space-md);
	padding-right: var(--space-md);
	align-self: center;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	@media only screen and (max-width: 1440px) {
		padding-left: 20px;
		padding-right: 20px;
	}

	@media only screen and (max-width: 1050px) {
		flex-direction: column;
		padding-left: 20px;
		padding-right: 20px;
	}
}

.footer__logo-8 {
	height: 62px;
	margin-top: 10px;
	width: 172px;
	object-fit: contain;
}

.footer__social-column {
	align-self: center;
	width: 28%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.footer__social-links {
	z-index: 6;
	background-color: var(--white_a700_0f);
	align-self: stretch;
	position: relative;
	border-radius: var(--radius-md);
}

.footer__follow-us {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	padding: var(--space-10xl) var(--space-11xl);
	@media only screen and (max-width: 550px) {
		padding: var(--space-3xl);
	}
}

.footer__follow-us-title {
	color: transparent !important;
	margin-bottom: 308px;
	background: linear-gradient(34deg, #08bbbf, #9ad63c);
	background-clip: text;
}

.footer__social-icons-8 {
	margin-top: 8px;
	width: 40%;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.footer__icon--arrow-up {
	height: 24px;
	margin-top: -12px;
	margin-right: 148px;
	position: relative;
	@media only screen and (max-width: 1050px) {
		margin-right: 0px;
	}
}

.footer__links-row-7 {
	width: 92%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	@media only screen and (max-width: 1440px) {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	@media only screen and (max-width: 1050px) {
		flex-direction: column;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
}

.footer__links-column-7 {
	width: 34%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.footer__links-list {
	width: 74%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	@media only screen and (max-width: 1440px) {
		width: 100%;
	}

	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.footer__links-8 {
	align-self: center;
	width: 22%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer__services-column {
	gap: var(--space-sm);
	display: flex;
	width: 30%;
	flex-direction: column;
	align-items: center;
}

.footer__copyright-15 {
	margin-top: 146px;
	z-index: 7;
	align-self: flex-start;
	position: relative;
}

.footer__copyright--duplicate {
	margin-top: -2px;
	margin-right: 82px;
	position: relative;
	@media only screen and (max-width: 1050px) {
		margin-right: 0px;
	}
}

.footer__contact-stack {
	height: 504px;
	width: 54%;
	position: relative;
	@media only screen and (max-width: 1050px) {
		width: 100%;
	}
}

.footer__contact-column {
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	left: 0px;
	top: 9.34px;
	margin: auto;
}

.footer__cta-column-7 {
	gap: var(--space-10xl);
	background: linear-gradient(34deg, #08bbbf, #9ad63c);
	width: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	right: -0.47px;
	top: 0px;
	padding: 58px 56px;
	margin: auto;
	border-radius: var(--radius-md);
	@media only screen and (max-width: 1050px) {
		padding: 20px;
	}

	@media only screen and (max-width: 550px) {
		padding: var(--space-3xl);
	}
}

.footer__image-8 {
	height: 480px;
	width: 90%;
	object-fit: contain;
	position: absolute;
	left: 7px;
	bottom: 0px;
	top: 0px;
	margin-top: auto;
	margin-bottom: auto;
}

.showcase-productcard {
	gap: 46px;
	z-index: 8;
	position: absolute;
	width: 44%;
	display: flex;
	flex-direction: column;
	right: 9%;
	bottom: 0px;
	top: 0px;
	margin-top: auto;
	margin-bottom: auto;
	height: max-content;
}


.section__read-more {
	width: 180px;
	position: relative;
	padding-left: var(--space-8xl);
	padding-right: var(--space-8xl);
	text-transform: capitalize;
	font-size: 18px;
	height: 56px;
	min-width: 152px;
	color: var(--white_a700) !important;
	border: 2px solid transparent;
	border-radius: 28px !important;
	background: transparent;
	z-index: 1;
	overflow: hidden;
	transition: all 0.3s ease;
	font-family: "IBM Plex Sans Thai";
	margin-top: 10px;
	margin: 0px;
	margin-top: 19px;
	overflow: visible;
}

.section__read-more::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(90deg, #08BBBF, #9AD63C);
	border-radius: 50px;
	z-index: -1;
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	border: 2px solid transparent;
	padding: 2px;

}
.section__read-more:hover::before {
	background: linear-gradient(90deg, #9AD63C, #08BBBF);
	transform: rotate(180deg);
}

.section__read-more:hover {
	transform: scale(1.05) !important;
	transition: all 0.3s ease !important;
}

.showcase-grid {
	display: flex;
	gap: 50px;
}

.modal .modal-content .section__read-more {
    height: 50px !important; 
	line-height: 30px;
}

@media only screen and (max-width: 1050px) {

	.showcase-grid {
		display: flex;
		width: 100%;
		max-width: 100%;
		position: relative;
		flex-direction: column;
	} 

	.stackvector_one-2 {
		height: auto;
		position: relative;
		padding: 50px 20px 20px;
	}

	.showcase-productcard__image-2 {
		height: 447px;
		width: 100%;
		object-fit: cover;
		border-radius: var(--radius-lg);
	}
	.showcase__description { gap: 50px; }
	.showcase-productcard__title { font-size: 20px; }
	.showcase-productcard__description { font-size: 14px !important; }
	.section__read-more { height: 45px; font-size: 16px; min-width: 140px; width: 140px; margin-top: 10px; }	
	
}
@media (max-width: 1199px) {
	.page-template-archive-case .showcase__image { display: none; }
	.modal .modal-content .section__read-more { font-size: 18px !important; }
}
@media (max-width: 991px) {
	.showcase__content { padding-left: 0; padding-right: 0; }
	.showcase-grid { flex-direction: row; flex-wrap: wrap; gap: 30px 20px; }		
}
@media (max-width: 767px) {
	.stackvector_one-2 { padding-top: 30px; }
	.showcase-grid { flex-direction: column; }	
	.modal .modal-content p { font-size: 14px;	}
}