body {
	margin: auto !important;
	line-height: normal;
	max-width: 100%;
}



:root {
	/* fonts */
	/* --font: "IBM Plex Sans Thai";
	--font1: "Gill Sans";
	--font-montserrat: Montserrat;
	--font-bricolage-grotesque: "Bricolage Grotesque"; */
	--font-product: "Product Sans";

	/* font sizes */
	--font-size: 1.25rem;
	--font-size-base: 1rem;
	--font2-size: 64px;
	--font-size-lgi: 1.188rem;
	--font-size-7xl: 1.625rem;
	--font1-size: 3.75rem;
	--font-size-17xl: 2.25rem;
	--font-size-29xl: 3rem;
	--font-size-21xl: 2.5rem;
	--font-size-5xl: 1.5rem;
	--font-size-lg: 1.125rem;
	--font-size-mid: 1.063rem;
	--font-size-46xl: 4.063rem;
	--font-size-20xl: 2.438rem;
	--font-size-33xl: 3.25rem;

	/* Colors */
	--color-white: #fff;
	--color-gainsboro: #e6e6e6;
	--color-darkslategray: #31363f;
	--color-gray-100: #959191;
	--color-gray-200: rgba(255, 255, 255, 0.06);
	--color-lightgray: #d4d4d4;
	--linear: #535353;
	--color-lightseagreen: #32afa9;
	--color-dimgray-100: #535353;
	--color-darkcyan-100: #00a1a6;
	--color-darkcyan-200: rgba(0, 161, 166, 0.09);
	--color-whitesmoke: #efefef;
	--color-darkgray: #adadad;

	/* Gaps */
	--gap-3xl: 1.375rem;
	--gap-24xl: 2.687rem;
	--gap-68xl: 5.437rem;
	--gap-174xl: 12.062rem;
	--gap-5xl: 1.5rem;
	--gap-29xl: 3rem;
	--gap-77xl: 6rem;
	--gap-6xl: 1.562rem;
	--gap-14xl: 2.062rem;
	--gap-base: 1rem;
	--gap-9xs: 0.25rem;
	--gap-xl: 1.25rem;
	--gap-18xl: 2.312rem;
	--gap-138xl-6: 9.85rem;
	--gap-20xl: 2.437rem;
	--gap-60xl: 4.937rem;
	--gap-46xl: 4.062rem;
	--gap-13xl: 2rem;
	--gap-xs: 0.75rem;
	--gap-44xl: 3.937rem;
	--gap-12xl: 1.937rem;
	--gap-lgi: 1.187rem;
	--gap-10xl: 1.812rem;
	--gap-15xl: 2.125rem;
	--gap-mid: 1.062rem;
	--gap-7xl: 1.625rem;
	--gap-23xl: 2.625rem;
	--gap-52xl: 4.437rem;
	--gap-123xl: 8.875rem;
	--gap-4xl: 1.437rem;
	--gap-6xs: 0.437rem;
	--gap-5xs: 0.5rem;
	--gap-30xl: 3.062rem;
	--gap-48xl: 4.187rem;
	--gap-4xs: 0.562rem;
	--gap-22xl: 2.562rem;
	--gap-lg: 1.125rem;
	--gap-16xl: 2.187rem;
	--gap-19xl: 2.375rem;
	--gap-2xl: 1.312rem;
	--gap-0: 0rem;

	/* Paddings */
	--padding-156xl: 10.937rem;
	--padding-13xl: 2rem;
	--padding-40xl: 3.687rem;
	--padding-38xl: 3.562rem;
	--padding-xl: 1.25rem;
	--padding-smi: 0.812rem;
	--padding-29xl: 3rem;
	--padding-sm: 0.875rem;
	--padding-18xl-5: 2.343rem;
	--padding-16xl: 2.187rem;
	--padding-9xs: 0.25rem;
	--padding-xs-7: 0.731rem;
	--padding-12xs-1: 0.006rem;
	--padding-48xl-5: 4.218rem;
	--padding-24xl: 2.687rem;
	--padding-25xl: 2.75rem;
	--padding-90xl: 6.812rem;
	--padding-68xl: 5.437rem;
	--padding-12xs: 0.062rem;
	--padding-base: 1rem;
	--padding-4xs: 0.562rem;
	--padding-106xl: 7.812rem;
	--padding-17xl: 2.25rem;
	--padding-2xs-5: 0.656rem;
	--padding-xs: 0.75rem;
	--padding-3xl: 1.375rem;
	--padding-5xl: 1.5rem;
	--padding-8xl: 1.687rem;
	--padding-7xl: 1.625rem;
	--padding-mini: 0.937rem;
	--padding-186xl: 12.812rem;
	--padding-141xl: 10rem;
	--padding-243xl: 16.375rem;
	--padding-12xl: 1.937rem;
	--padding-160xl: 11.187rem;
	--padding-70xl: 5.562rem;
	--padding-2xs: 0.687rem;
	--padding-103xl: 7.625rem;
	--padding-64xl: 5.187rem;
	--padding-35xl: 3.375rem;
	--padding-8xs: 0.312rem;
	--padding-57xl: 4.75rem;
	--padding-84xl: 6.437rem;
	--padding-48xl: 4.187rem;
	--padding-32xl: 3.187rem;
	--padding-60xl: 4.937rem;
	--padding-20xl: 2.437rem;
	--padding-139xl: 9.875rem;
	--padding-xs-5: 0.718rem;
	--padding-sm-5: 0.843rem;
	--padding-mini-5: 0.906rem;
	--padding-44xl: 3.937rem;
	--padding-19xl: 2.375rem;
	--padding-31xl-5: 3.156rem;
	--padding-36xl-5: 3.468rem;
	--padding-78xl: 6.062rem;
	--padding-377xl: 24.75rem;
	--padding-9xl: 1.75rem;
	--padding-238xl: 16.062rem;
	--padding-10xl: 1.812rem;
	--padding-109xl: 8rem;
	--padding-6xl: 1.562rem;
	--padding-176xl: 12.187rem;
	--padding-126xl: 9.062rem;
	--padding-271xl: 18.125rem;
	--padding-7xs: 0.375rem;
	--padding-63xl: 5.125rem;
	--padding-3xs: 0.625rem;

	/* Border radiuses */
	--br-3xs: 10px;
	--br-20xl: 39px;
	--br-15xl-5: 34.5px;
	--br-xl: 20px;
	--br-16xl: 35px;
	--br-mini: 15px;
	--br-11xl: 30px;
}




/* Font-face declarations for Gill Sans */
/* @font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-01.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-Bold-02.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-BoldItalic-04.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-Italic-03.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-Light-08.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-LightItalic-09.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-SemiBold-05.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-SemiBoldItalic-06.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Gill Sans';
    src: url('../public/fonts/GillSans-UltraBold-07.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
} */

/* @font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Black.ttf') format('truetype');        
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Bold.ttf') format('truetype');        
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-BlackItalic.ttf') format('truetype');        
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Medium.ttf') format('truetype');        
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-BoldItalic.ttf') format('truetype');        
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-ThinItalic.ttf') format('truetype');        
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Light.ttf') format('truetype');        
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Italic.ttf') format('truetype');        
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Regular.ttf') format('truetype');        
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Thin.ttf') format('truetype');        
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-MediumItalic.ttf') format('truetype');        
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-LightItalic.ttf') format('truetype');        
    font-weight: 300;
    font-style: italic;
    font-display: swap;
} */

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Black.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Bold.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-BlackItalic.woff2') format('woff2'),
        url('../public/fonts/ProductSans-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Medium.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-BoldItalic.woff2') format('woff2'),
        url('../public/fonts/ProductSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-ThinItalic.woff2') format('woff2'),
        url('../public/fonts/ProductSans-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Light.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Italic.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Regular.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-Thin.woff2') format('woff2'),
        url('../public/fonts/ProductSans-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-MediumItalic.woff2') format('woff2'),
        url('../public/fonts/ProductSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../public/fonts/ProductSans-LightItalic.woff2') format('woff2'),
        url('../public/fonts/ProductSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}






/* Global font-family usage */
body, p, a, span, li, input, button {
    font-family: var(--font-product);
}

body.home, .home p, .home a, .home span, .home li, .home input, .home button {	
	font-family: var(--font-product);
}

html.overflow-hidden { overflow: hidden; }


/* Footer Styles */
.footer {
	width: 110.219rem;
	padding: 0 var(--padding-13xl);
	box-sizing: border-box;
	text-align: left;
	font-size: var(--font-size);
	font-family: var(--font);
}

.footer-content {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--gap-174xl);
	padding-top: 42px;
}

.footer-top {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: var(--padding-xs-7) 0 0;
	box-sizing: border-box;
}

.footer-navigation {
	width: 57.594rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 0 0 var(--padding-12xs-1);
	box-sizing: border-box;
	gap: var(--gap-46xl);
	flex-shrink: 0;
	max-width: 100%;
	z-index: 2;
}

.footer-links {
	align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 var(--padding-9xs) 0 0;
	gap: var(--gap-xl);
}

.footer-menus {
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--gap-xs);
}

.footer-social {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap-xl);
	max-width: 100%;
}

.footer-social-and-c-t-a {
	align-self: stretch;
	backdrop-filter: blur(19px);
	border-radius: var(--br-3xs);
	background-color: var(--color-gray-200);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	padding: var(--padding-18xl-5) var(--padding-16xl);
	box-sizing: border-box;
	z-index: 2;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--gap-6xl);
	max-width: 100%;
}

.footer-c-t-a {
	align-self: stretch;
	border-radius: var(--br-3xs);
	background: linear-gradient(78.3deg, #08bbbf, #9ad63c);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: var(--padding-40xl) var(--padding-38xl);
	gap: var(--gap-14xl);
	z-index: 2;
	text-align: center;
	font-size: var(--font2-size);
	font-family: var(--font1);
}

.footer-navigation-and-copyrigh {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--gap-138xl-6);
}

/* Animations */

/* Shine effect class */

.main.column {
	/* background: linear-gradient(180deg, #2e2e2e, #242424); */
	background: #000;
}


/* Hollow border effect with hover animation */
.nbutton {
	position: relative;
	display: inline-block;
	padding: 13px 27px;
	font-size: 16px;
	color: #08BBBF;
	text-decoration: none;
	border-radius: 39px;
	background: none;
	border: 2px solid transparent; /* Default transparent border */
	background-image: linear-gradient(white, white), 
		linear-gradient(90deg, #08BBBF, #9AD63C);
	background-origin: border-box;
	background-clip: content-box, border-box;
	z-index: 1;
}

.nbutton:hover {
	background-image: linear-gradient(white, white), 
		linear-gradient(90deg, #08BBBF, #9AD63C);
	background-size: 300% 100%; /* Increase size for animation */
	background-position: 100% 0;
	animation: border-move 1.5s linear infinite;
}

@keyframes border-move {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 100% 0;
	}
}



.nbutton::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: 39px;
	background: linear-gradient(90deg, #08BBBF, #9AD63C);
	z-index: -1;
	pointer-events: none;
}


.shine {-webkit-mask-image: linear-gradient(-75deg, rgb(0 0 0 / 75%) 30%, #ffffff 50%, rgb(0 0 0 / 75%) 70%);-webkit-mask-size: 200%;animation: shine 2s linear infinite;color: transparent !important;text-align: center;background: linear-gradient(34deg, #08bbbf, #9ad63c);background-clip: text;line-height: 121%;}


@keyframes shine {
	from {
		-webkit-mask-position: 150%;
	}
	to {
		-webkit-mask-position: -50%;
	}
}

@keyframes growLeft {
	0% {
		opacity: 0;
		transform: scale(0.98);
		clip-path: inset(0 100% 0 0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes growRight {
	0% {
		opacity: 0;
		transform: scale(0.98);
		clip-path: inset(0 0 0 100%);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes growBottom {
	0% {
		opacity: 0;
		transform: scale(0.98);
		clip-path: inset(100% 0 0 0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		clip-path: inset(0 0 0 0);
	}
}

@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.grow-animation-left {
	opacity: 0;
}

.grow-animation-left.visible {
	animation: growLeft 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: transform, opacity, filter;
	backface-visibility: hidden;
}

.grow-animation-right {
	opacity: 0;
}

.grow-animation-right.visible {
	animation: growRight 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: transform, opacity, filter;
	backface-visibility: hidden;
	display: none;
}

.grow-animation-bottom {
	opacity: 0;
}

.grow-animation-bottom.visible {
	animation: growBottom 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	will-change: transform, opacity, filter;
	backface-visibility: hidden;
}

.reveal-right-animation {
	opacity: 0;
}

.reveal-right-animation.visible {
	animation: growRight 2s ease-out forwards;
}

.slide-in-animation {
	opacity: 0;
}

.slide-in-animation.visible {
	animation: slideIn 2s ease-out forwards;
}

/* Footer Media Queries */
@media screen and (max-width: 1725px) {
	.footer-bottom {
		flex: 1;
	}
	.footer-content {
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1325px) {
	.footer-navigation {
		gap: var(--gap-13xl);
	}
	.footer-navigation-and-copyrigh {
		gap: var(--gap-60xl);
	}
	.footer-content {
		gap: var(--gap-77xl);
	}
}

@media screen and (max-width: 900px) {
	.footer-navigation {
		gap: var(--gap-base);
	}
	.footer-navigation-and-copyrigh {
		gap: var(--gap-20xl);
	}
	.footer-bottom,
	.footer-top {
		min-width: 100%;
	}
	.footer-content {
		gap: var(--gap-29xl);
	}
}

@media screen and (max-width: 450px) {
	.footer-links {
		flex-wrap: wrap;
	}
	.footer-navigation-and-copyrigh {
		gap: var(--gap-xl);
	}
	.footer-social {
		flex-wrap: wrap;
	}
	.footer-c-t-a {
		padding-left: var(--padding-xl);
		padding-right: var(--padding-xl);
		box-sizing: border-box;
		gap: var(--gap-base);
	}
	.footer-content {
		gap: var(--gap-5xl);
	}
}


body {
	width: 100%;
	height: 100%;
	position: relative;
	@media screen and (max-width: 900px) {
		overflow: hidden;
	}
}


.top {
	position: relative;
	color: white;
	display: flex;
	align-content: space-between;
	height: 100%;
	position: relative;
	height: 543px;
	padding: 240px 0px 100px 0px;
}
.top::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.60);
	z-index: 1;
}
.top::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.00) 100%);
	z-index: 1;
}

.h2a6276-2-parent {
	position: absolute;
	z-index: 0;
	height: 100%;
	width: 100%;
	top: 0px;
	bottom: 0px;		
}

.h2a6276-1-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.h2a6276-2-icon {
	position: absolute;
	height: 100%;
	object-fit: cover;
}
.page-template-page-expertise .h2a6276-1-icon { object-position: center 78%; }

.home-content-parent {
	z-index: 1;
	width: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0 8rem;	
	position: relative;
	z-index: 10;

	@media screen and (max-width: 1725px) {
		padding: 0 8rem;
	}
	
}

.mask-group-icon9 {
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.home-company{
	color: #fff;
	font-family: var(--font-product);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 15px;	
}


.top .company3 {
	color: #FFF;
	text-shadow: 0px 29px 131px rgba(0, 0, 0, 0.07), 0px 18.796px 76.72px rgba(0, 0, 0, 0.05), 0px 11.17px 41.726px rgba(0, 0, 0, 0.04), 0px 5.8px 21.288px rgba(0, 0, 0, 0.04), 0px 2.363px 10.674px rgba(0, 0, 0, 0.03), 0px 0.537px 5.155px rgba(0, 0, 0, 0.02);
	font-family: var(--font-product);
	font-size: 64px;
	font-style: normal;
	font-weight: 500;
	line-height: 121%; /* 77.44px */	
	letter-spacing: 0;
}
#breadcrumbs > span {
    display: flex;
    gap: 5px;    
}

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

	.top {
		height: 277px;
		position: relative;
		color: white;
		display: flex;
		padding: 120px 20px 40px 20px;
		overflow: hidden;
	}
	.home-content-parent {
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-width: fit-content;
		max-width: 100%;
		margin: auto;
		padding: 0 20px;
	}

	.h2a6276-2-icon {
		position: absolute;
		height: 100%;
	}

	.h2a6276-1-icon {
		height: 100%;
		position: absolute;
		object-fit: cover;
		object-position: center;
		width: 100%;
	}

	.top .company3 {
		color: #FFF;
		text-shadow: 0px 29px 131px rgba(0, 0, 0, 0.07), 0px 18.796px 76.72px rgba(0, 0, 0, 0.05), 0px 11.17px 41.726px rgba(0, 0, 0, 0.04), 0px 5.8px 21.288px rgba(0, 0, 0, 0.04), 0px 2.363px 10.674px rgba(0, 0, 0, 0.03), 0px 0.537px 5.155px rgba(0, 0, 0, 0.02);
		font-family: var(--font-product);
		font-size: 36px;
		font-style: normal;
		font-weight: 700;
		line-height: 121%;
		letter-spacing: -0.64px;
	}

	.bottom-wave {
		height: auto;
		position: relative;
		max-width: 100%;
		padding-bottom: 130px !important;
		background: linear-gradient(180deg, #242424, #242424);
		width: 100%;
	}

	.sec2 {
		gap: var(--gap-13xl);
		flex-wrap: wrap;
		padding: var(--padding-xl) var(--padding-xl) var(--padding-186xl);
		padding-bottom: 0px;
		height: fit-content;
		padding: 200px 20px 50px 20px;
	}


	.image, .integration-description {
		min-width: 100%;
		position: relative;
		height: fit-content;
		text-align: center;
		display: flex;
		align-items: center;
	}


	.social-icons {
		flex-direction: column !important;
		padding: var(--padding-9xs) 0 0;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
	}

	.youtube-negative-parent {
		width: 100%;
		height: 1.625rem;
		flex-direction: row;
		gap: var(--gap-18xl);
		display: flex;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.ui.heading.size-_____ {
		font-size: 24px !important;
	}

	.columnvector-5 {
		margin-top: 0px;
		position: relative;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.footer-c-t-a {
		width: 100%;
	}

	.wed-love-to {
		white-space: normal;
	}
}

.case-slider {
	width: 100%;
}

footer  ul {
	list-style-type: none !important;
	line-height: 1.5;
	columns: 2;
	gap: 70px;
}

.contact-info {
	height: 9.688rem;
	width: 17.563rem;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--gap-xs);
	color: white;
}

.copyright-2024 {
	width: fit-content;
	position: absolute;
	line-height: 149%;
	text-align: center;
	display: inline-block;
	bottom: 63px;
	left: 40px;
	color: white;
}

.footer-c-t-a {
	padding: 50px !important;
	color: white;
}




.typing-effect {
    opacity: 0;
}

.typing-effect.typing-visible {
    opacity: 1;
}

/* Faster transition for characters */
.char {
    display: inline-block; 
    opacity: 0.3; 
    transform: translateY(10px);
    transition: opacity 0.05s ease, transform 0.05s ease; /* Changed from 0.1s to 0.05s */
}

.char.visible {
    opacity: 1;
    transform: translateY(0);
}


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

.section__read-more::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(90deg, #08BBBF, #9AD63C);
	border-radius: 30px;
	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);	
}
#breadcrumbs a:hover, #breadcrumbs a:focus { color: #9ad63c; }
.project-assessment-wrapper{display: flex; align-items: center; gap:20px; align-self: center;}
.project-assessment-wrapper button{padding: 20px 23px; white-space: nowrap; display: flex; align-items: center; justify-content: center; transition: 0.4s !important; min-width: 245px; height: 67px; line-height: 1.1; }
.project-assessment-wrapper button:hover{transform: scale(1.06) !important;}
.project-assessment-wrapper button.project-assessment-button{max-width: max-content; height: auto; line-height: 1; width: 100%; margin-top: 0;}
.project-assessment-wrapper button.project-assessment-button small{font-size: 16px; font-weight: normal;}
.integration-description .project-assessment-wrapper{margin-left: -175px; align-self: flex-end;}
.project-assessment-wrapper button.free-consult-btn, .project-assessment-wrapper button.free-consult-meet-btn { min-width: 220px; height: 67px; line-height: 1.1; padding-top: 0; padding-bottom: 0; }
.project-assessment-wrapper button.free-consult-meet-btn { min-width: 320px; }


.modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(255 255 255 / 66%); overflow-x: hidden; overflow-y: auto; font-family: var(--font);}
.modal .modal-container{margin: 30px 15px; display: flex ; align-items: center; justify-content: center; min-height: calc(100% - (30px * 2));}
.modal .modal-content{background: linear-gradient(180deg, #242424, #242424); padding: 50px; border-radius: 24px; width: 100%; max-width: 880px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); position: relative; color: #fff;}
.modal .modal-content .modal-body{height: 100%;}
.modal .close-modal{color: #fff; float: left; font-size: 40px; cursor: pointer; position: absolute; top: 20px; right: 13px; line-height: 0.5; cursor: pointer;}
.modal .botton{opacity: 1; font-size: var(--font-size-mid); text-transform: capitalize; align-items: center; line-height: normal; font-weight: bold; font-family: var(--font);}
.modal .modal-content .sow-modal-content{ font-size: 16px; letter-spacing: 0.5px; line-height: 1.5; }

#emailAssessmentModal input[type="file"]{visibility: hidden;}
.modal .form-group{display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px; }
.modal .form-group p{display: flex; flex-direction: column;}
.modal .form-group p label{font-weight: 500; font-family: var(--font);}
.modal .form-group input.wpcf7-form-control{height: 50px; border-radius: 12px; border: 1px solid #666; width: 100%; max-width: 350px; padding: 10px 20px; font-family: var(--font); font-size: 18px; outline: none;}
.modal .form-group input.wpcf7-form-control:focus{border-color: #00FF99;}
.modal .form-group input.wpcf7-form-control.wpcf7-not-valid{border-color: #f00;}
.modal .wpcf7-not-valid-tip{position: absolute; top: calc(100% + 3px);}
.modal iframe{width: 100%; color: #fff; background: white; height: 500px; margin-top: 20px; border-radius: 10px;}


.modal .modal-content .send_assement_doc { position: relative; }
.modal .modal-content .btn-box { position: relative; }
.modal .modal-content .btn-box .loader{ display:none; }
.modal .modal-content .btn-box .loading .send_assement_doc { opacity: 0.5; }
.modal .modal-content .btn-box .loading .send_assement_doc:before { background: linear-gradient(90deg, #ccc, #ccc); }


.modal .modal-content .loader { width: 32px; height: 32px; position: absolute; left: 75px; top: 28px;  }



.wpcf7 form.sent .wpcf7-response-output{font-size: 18px; border-color: #46b450;}

.set-requirements-and{height: auto !important;}
/* .new-specialization-content-wrapper{padding-top: 56px !important;} */

.new-hiro{padding-top: 331px 0 180px !important;}
.new-hiro .main-content{padding: 0;}
.new-hiro .main-content .the-complete-journey{text-align: left; width: 100%;}
.new-image-content{flex-direction: column;}
.new-image-content .project-assessment-wrapper{margin-top: 40px;}
.development-manufacture-section{position: relative; padding-bottom: 0;} 
.development-manufacture-section .sec2{position: relative;}
/* .development-manufacture-section .sec2:after{ content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: color(srgb-linear 0 0 0 / 0.5); } */
.development-manufacture-section .full-service-description{z-index: 1; position: relative;}

section.hiro.new-hiro:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 50%; background: #000; z-index: 1; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.00) 100%); }
.new-hiro .main-content-parent { z-index: 2; }

.error404 .blog { height: auto; }
.error404 .blog .column { gap: 0 }
.error404 .blog-column__breadcrumbs { padding: 0 8rem; }
.error404 .blog-column__breadcrumbs-row-1, .error404 .dhi-group { gap: 0 }
.error404 .dhi-group .group-346  { width: auto; height: auto; margin: 0 5px; }
.error-404__header { text-align: center; }
.error-404__header .blog-section__description { width: 100%; margin: 10px 0 20px; }
.error-404__header .contact-menu-item { color: #fff; font-weight: 700; display: inline-block; transition: all 0.4s ease-in-out; }
.error-404__header .contact-menu-item:hover, .error-404__header .contact-menu-item:focus { transform: scale(1.06); }
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background: linear-gradient(78.3deg, #08bbbf, #9ad63c);
    color: #fff;
    width: 45px;
	height: 45px;
    border-radius: 50%;
    text-decoration: none;    
    z-index: 1000;
    transition: opacity 0.3s;
}
.blog .main.column { gap: 0; }
#back-to-top img { width: 22px; }
.single-post .post-content ol, .single-post .post-content ul { padding-left: 10px; font-size: 22px; }
.justify-center{justify-content: center;}
.project-assessment-wrapper.justify-center{margin-top: 20px;}




@media (min-width: 1200px) and (max-width: 1366px) {
	.integration-description .project-assessment-wrapper { margin-left: -246px; }
}

@media (max-width: 1560px) {
	.top .company3 { font-size: 40px; }
	.new-hiro .main-content .the-complete-journey{font-size: 40px;}
	.top { height: 450px; padding: 120px 0 0 0; }	
	/* .section__read-more { width: 170px !important; height: 55px !important; font-size: 20px !important; } */
}

@media (max-width: 1366px) {
	.new-image-content .project-assessment-wrapper { margin-top: 20px; }
	.home-content-parent { padding-left: 73px; padding-right: 73px; }
}

@media (max-width: 1325px) {
	.integration-description .project-assessment-wrapper{margin-left: 0; align-self: center;}
	.home-content-parent { padding-left: 30px; padding-right: 30px; }
/* 	.project-assessment-wrapper{ flex-direction: column;} */
}

@media (max-width: 1199px) {
	.new-hiro .main-content .the-complete-journey{font-size: 30px;}	
	.new-image-content .project-assessment-wrapper { margin-top: 20px; }
	.project-assessment-wrapper button { padding: 15px 20px; }	
	.section__read-more { height: 52px !important; }
	.project-assessment-wrapper button.project-assessment-button small { font-size: 14px; }
	.top { height: 300px; padding: 75px 0 0 0; }
	.top .company3 { font-size: 35px; }
	.home-content-parent { padding: 0 20px; height: auto; gap: 25px; }
	.single-post .post-content ol, .single-post .post-content ul { padding-left: 15px; }
	.mask-group-icon9 { width: 35%; }	
	.new-hiro .main-content { margin-top: -30px; }
	.home-company { margin-bottom: 10px; }
	.top .company3 { font-size: 30px; }
	.project-assessment-wrapper button.free-consult-btn, .project-assessment-wrapper button.free-consult-meet-btn, .project-assessment-wrapper button { height: 52px; min-width: 200px; }
	.project-assessment-wrapper button.free-consult-meet-btn { min-width: 290px; }
	.modal .modal-content .loader { width: 24px; height: 24px; left: 55px; top: 24px; }
}

/* @media (max-width: 992px) {
	.new-hiro{padding-top: 30px !important;}
	.new-hiro .main-content .the-complete-journey{font-size: 24px; }	
} */
@media (max-width: 991px) {	
	.error404 .blog-column__breadcrumbs { padding: 0 20px; }
	.top { height: 250px; }
	.top .company3 { font-size: 25px; }
	.home-content-parent { height: auto; gap: 15px; padding: 0; }		
	.new-image-content .project-assessment-wrapper { margin-bottom: 0 !important; }	
}

@media (max-width: 767px) {	
	.new-image-content .project-assessment-wrapper { gap: 15px; }
	.modal .modal-content{padding: 20px;}
	.modal .section__read-more{margin-top: 0; height: 50px;}
	.wpcf7 form .wpcf7-response-output { margin: 1em 0 0; padding: 10px; border-width: 1px; font-size: 15px; line-height: 1.2; }
	.modal .wpcf7-not-valid-tip{font-size: 16px;}
	.new-hiro { padding-top: 40px !important; } 
	.contact-menu-item{padding: 14px;}
	.project-assessment-wrapper button.project-assessment-button small { font-size: 12px; }
	.project-assessment-wrapper { flex-direction: column; }
	.new-hiro .main-content .the-complete-journey { padding: 0; }
	.project-assessment-wrapper button { padding: 9px 20px; min-height: 52px; }
	.project-assessment-wrapper button.project-assessment-button { max-width: 100%; width: auto; }
	#back-to-top { width: 36px; height: 36px; right: 15px; bottom: 15px; }
	#back-to-top img { width: 18px; }
	.top { height: 200px; }
	.top .company3 { font-size: 20px; }
	.home-company { font-size: 14px; margin-bottom: 5px; }
	.home-content-parent { gap: 5px; padding: 0 }
	.ui.heading.size-_____ { font-size: 20px !important; }
	
	.project-assessment-wrapper button{min-width: 205px;}
	.project-assessment-wrapper button.free-consult-meet-btn { min-width: 258px; }
	.modal .modal-content .loader { top: 15px; }
}