@charset "utf-8";
/* CSS Document */

@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;
	 font-size:1.6rem;	
}
h1{
	font-size: 8rem;
	font-weight:500;
	color:#08A559;
	margin: 0; 
	padding: 0;
	line-height:1;
}
h2 {
	font-size: 6rem;
	font-weight:500;
	color:#08A559;
}
p{
	font-size: 1.8rem;
	/*white-space: pre-line;	*/
}



a{
	color:#1D2CF3;
	text-decoration:none;
}
a:hover{
	color:#C9F31E;
}



/**************************************************************************************
								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;
}






/**************************************************************************************
								Key Highlights
***************************************************************************************/
#keyHighlights {
	padding: 26% 6% 6%;
	margin: auto;
}
#keyHighlights a {margin: 30px auto 0;}

#keyHighlights h2 {text-align: center; margin-bottom: 30px;}
#keyHighlights .highlights {
	display: flex;
	justify-content: center;
	align-items: center;
}

#keyHighlights .turnover,
#keyHighlights .ebitda,
#keyHighlights .dividend{
	width:55vh;
	height:55vh;
	border-radius: 50%;
	border:1px solid #E2E2E2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#keyHighlights .turnover{
	transform: translateX(20px);
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	-ms-transform: translateX(20px);
	-o-transform: translateX(20px);
}

#keyHighlights h3,
.total span:first-child,
.total span:last-child{
	font-size: 3rem;
	font-weight: 500;
	text-align: center;
}

#keyHighlights h3 {min-height: 70px;}

#keyHighlights .dividend {
	transform: translateX(-20px);
	-webkit-transform: translateX(-20px);
	-ms-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	-ms-transform: translateX(-20px);
	-o-transform: translateX(-20px);
}
#keyHighlights .total span:nth-child(2) {
	font-size: 13rem;
	color:#D0FF80;
	font-weight: 500;
}

#keyHighlights .percentage {
	border-top:1px solid rgba(112, 112, 112, 0.3);
	width: 80%;
	padding-top:20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#keyHighlights .percentage span {
	font-size:4rem;
	font-weight: 500;
	display: inline-block;
}

#keyHighlights .percentage:before {
	content:url("../images/percentDown.svg");
}


@media (min-width:1921px){
 
	#keyHighlights {padding: 20% 6% 6%;}
	#keyHighlights .turnover, #keyHighlights .ebitda, #keyHighlights .dividend {
		width: 402px;
		height:402px;
	}
 
}

@media (min-width:1025px) and (max-width:1920px){
 
	
	#keyHighlights{padding: 320px 100px 6% }
	#keyHighlights .turnover, #keyHighlights .ebitda, #keyHighlights .dividend{
		width: 402px;
		height:402px;
		border-radius: 60%;
	}
	#keyHighlights h3 {
	    min-height: auto;
	    transform: translateY(50px);
	}

	 
}

@media (max-width: 1024px){
 

	#keyHighlights .total span:nth-child(2) {font-size: 8rem;}

	#keyHighlights h3 {font-size: 2.4rem; min-height: 57px; transform: translateY(25px);}
	#keyHighlights .percentage span {font-size: 2.8rem;}
	#keyHighlights .turnover, #keyHighlights .ebitda, #keyHighlights .dividend {height: 300px; width: 300px;}

 
}

@media (max-width:1000px){
 

	#keyHighlights {padding: 6%}
	#keyHighlights .highlights {flex-direction:column; row-gap:30px;}
	#keyHighlights .turnover,
	#keyHighlights .dividend {transform:translateX(0); }
	#keyHighlights .turnover, #keyHighlights .ebitda, #keyHighlights .dividend{ width:300px; height:300px;}
	 
}

@media (max-width:500px){
 
h2 {font-size: 3.2rem; text-align: center;}
	#keyHighlights .total span:nth-child(2) {font-size: 6rem;}

 

}
@media (max-width: 480px) {
    h2, .pageTitle h3 {
        font-size: 25px !important;
        line-height: 27px !important;
    }
}