@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/**************************************************************************************
									Generic  CSS
***************************************************************************************/
html {
	font-size: 10px;
}
body {
	font-family:'kanit', sans-serif;
	font-weight:400;
}
h1 {
	font-size: 8rem;
	font-weight:500;
	color:#08A559;
	margin: 0;
	padding: 0;
	line-height:1;
}
p {
	font-size: 1.8rem;
	white-space: pre-line;
}
span.line {
	display: inline-block;
	width:80px;
	height: 1px;
	background-color:#000;
	vertical-align: middle;
	margin-right:10px;
}
.align-center {
	align-items: center;
}
.dflex-center {
	display: flex;
	justify-content: center;
}
/**************************************************************************************
								Circle Button and animation
***************************************************************************************/
.transitions {
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.goTo-btn {
	position: relative;
	display: flex;
	align-items:center;
	justify-content: center;
	width: 150px;
	height:150px;
	border-radius:100%;
	border: 1px solid #D8FD98;
	overflow:hidden;
	text-decoration: none;
}
.hover-btn {
	width:50px;
	height:50px;
	border-radius:50px;
	background-color:#D8FD98;
	transform:translate3d(-50px, -70px, 0px);
	opacity:0;
	position: absolute;
	z-index:1;
}
.goTo-btn:hover .hover-btn {
	width:100%;
	height:100%;
	border-radius:150px;
	transform: translate3d(0px, 0px, 0px);
	opacity:1;
}
.goTo-btn .noHover, .goTo-btn .hover {
	position: relative;
	z-index: 2;
}
.goTo-btn .hover {
	display: none;
}
.goTo-btn:hover .noHover {
	display:none;
}
.goTo-btn:hover .hover {
	display:block;
}
.viewMore {
	position: relative;
	z-index:3;
	color:#161CCC;
	text-decoration: none;
	font-size: 1.6rem;
	font-weight:400;
}
.viewMore:after {
	content:url("../images/arrow-2.svg");
	width:8px;
	height:8px;
	padding-left: 10px;
}

#top-title {
	padding: 6% 0;

}


/**************************************************************************************
								Media Queries
***************************************************************************************/

@media (min-width:1920px) {
}
 @media (min-width:1280px) and (max-width:1880px) {
}
 @media (max-width: 1024px) {
 #top-title img {
max-width: 100%;
}
 #top-title h1 {
font-size: 6rem;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
 #top-title {
padding: 15% 0;
}
 h1 {
 font-size: 5rem;
 font-weight:500;
 color:#08A559;
 margin: 0;
 padding: 0;
 line-height:1;
}
}
 @media (max-width:1000px) {
 #top-title .topBanner {
text-align: center;
}
 #top-title h1 {
text-align: center;
}
 #top-title .goTo-btn {
margin: auto;
}
 #top-title p {
text-align: center;
margin:30px 0;
}
}
 @media (max-width:992px) {
 #top-title {
padding: 20% 0;
}
}
 @media (max-width:991px) {
 #top-title {
padding: 15% 0;
}
}
 @media (max-width:500px) {
 #top-title {
padding: 20% 0;
}
}

}