@charset "utf-8";
/* CSS Document */
 
 @font-face {
    font-family: 'Maxis';
    src: url('../fonts/Maxis-ExtraBold.woff2') format('woff2'),
        url('../fonts/Maxis-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

@font-face {
    font-family: 'Maxis';
    src: url('../fonts/Maxis-SemiBold.woff2') format('woff2'),
        url('../fonts/Maxis-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

body {
	font-family: "Maxis", sans-serif;
	color: #000;
	font-size:16px;
	font-weight:normal;
	line-height: 1.8;
}
.mt-100 {
	margin-top: 100px;
}
.mb-20 {
	margin-bottom:20px;
}
.mt-80 {
	margin-top: 80px;
}

 
 
 
a {
	color:#15a648;
	text-decoration:none;
	transition: all .4s ease;
}
a:hover {
	color:#15a648;
	text-decoration:none;
	transition: all .4s ease;
	letter-spacing:0.5px;
}

.main-title{
	width:100%;
	display:flex;
	justify-content:center;
}


.main-title h2 {
	font-family: "Maxis", sans-serif;
	font-size:40px;
	line-height:49px;
	color:#000000;
	font-weight:bold;
	margin-top:0;
 
	text-transform:capitalize;
	position:relative;
}
 
.main-title h3 {
	font-family: "Maxis", sans-serif;
	font-size:30px;
	line-height:30px;
	color:#000000;
	font-weight:bold;
	margin-top:0;
	text-transform:uppercase;
}
 
 
/*=================================================
buttons
===================================================*/


.btn-wrap{
	display:flex;
	width:100%;
	align-items:center;
	justify-content:center;
}



.ClsButton {
	font-family: "Maxis", sans-serif !important;
	width:88px !important;
	height:inherit !important;
	font-size:14px !important;
	line-height:17px;
	color:#fff !important;
	font-weight:bold !important;
	text-transform:uppercase;
	border-radius:14px !important;
	background:#15a648;
 border: 2px solid #0000;
	position:relative;
	overflow:hidden;
}
.btn-primary, .button, .size, .ClsButton, .btn-more {
	font-size:14px;
	line-height:17px;
	letter-spacing:1.4px;
	color:#fff;
	font-weight:600;
	white-space:normal;
	text-decoration:none;
	padding:12px 29px;
	text-transform:uppercase;
	background:#15a648;
	border-radius:14px !important;
 	border: 2px solid #0000;
	position:relative;
	overflow:hidden;
	display:flex;
	justify-content:center;
	width:170px;
	 transition: all .4s ease;
}
 
 
.btn-primary:hover, .button:hover, .size:hover, .ClsButton:hover, .btn-more:hover {
	font-size:14px;
	color:#fff !important;
	font-weight:600;
	/*width:170px;*/
	text-decoration:none;
	padding:12px 29px;
	text-transform:uppercase;
	white-space:normal;
	border-radius:14px !important;
	border: 2px solid #0000;
	background:#15a648;
	letter-spacing: 2.5px !important;
    transition: all .4s ease;
}
.btn-primary:focus, .button:focus, .size:focus, .ClsButton:focus,.btn-more:focus,
.btn-primary:active, .button:active, .size:active, .ClsButton:active, .btn-more:active{
	color:#fff !important;
}


.arrow-link{
	font-size:14px;
	line-height:14px;
	color:#15a648;
	position:relative;
	width:136px;
	display:flex;
	align-items:center;
	position:relative;
}
.arrow-link span{
	font-size:14px;
	line-height:14px;
	color:#15a648;
	
	width:80%;
	letter-spacing:normal;
 
	
}
.arrow-link span::after{
	content: "";
    display: inline-block;
    position: absolute;
    right: 5px;
   
    right:0px;
    display: inline-flex;
    margin-left: 10px;
    background: url(../images/arrow-green.png) no-repeat;
    width: 24px;
    height: 11px;
    background-size: cover;
    transition: transform 0.3s ease;
    transform: translateX(-5px);
	margin-left:10px;
}
.arrow-link:hover span::after{
	 transition: transform 0.3s ease;
    transform: translateX(5px);
	letter-spacing:normal;
	
}



/*=========================================================================
sections and banners
===========================================================================*/

.sec-1, .sec-2, .sec-3, .sec-4, .sec-5, .sec-6{
	float:left;
	width:100%;
	margin-bottom:100px;
	
}

.banner-ir-home{
	background:url(../images/banner-home.png) no-repeat top right -100px;
	background-size:cover;
	padding:90px 0;
	 
}


/*inner pages banner*/

.banner-cmn{
	float:left;
	width:100%;
	background:url(../images/banner-home.png) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	/*margin-bottom:80px;*/
}

 
.banner-cont-text{
	display: flex;
    width: 100%;
    flex-direction: column;
}

.banner-corp{
		float:left;
	width:100%;
	background:url(../images/board-of-directors.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	margin-bottom:116px;
}

.banner-award{
		float:left;
	width:100%;
	background:url(../images/awards.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	margin-bottom:116px;
}

.banner-offices{
		float:left;
	width:100%;
	background:url(../images/location.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	margin-bottom:116px;
}

.banner-offer{
		float:left;
	width:100%;
	background:url(../images/reference-access-offer.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	margin-bottom:116px;
}

.banner-environment{
		float:left;
	width:100%;
	background:url(../images/environment.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	margin-bottom:116px;
}
 
.banner-policy{
		float:left;
	width:100%;
	background:url(../images/policy.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
	 
}
  
.banner-fininfo{
		float:left;
	width:100%;
	background:url(../images/financial-info.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
 }
 
 .banner-shrhldrinfo{
	 	float:left;
	width:100%;
	background:url(../images/disitribution-of-shareholding.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
 }
 
.banner-shrinfo{
		float:left;
	width:100%;
	background:url(../images/price-ticker.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
}

.banner-bursa{
		float:left;
	width:100%;
	background:url(../images/Bursa-Announcements.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
}
 
.banner-reports{
		float:left;
	width:100%;
	background:url(../images/reports.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
}

.banner-resources{
		float:left;
	width:100%;
	background:url(../images/Investor-Resources.jpg) no-repeat  center center;
	padding:90px 0;
	background-size:cover;
}
 
 
/*==============================================================
IR HOME PAGE  CSS STARTS HERE
================================================================*/


 .banner-cont{
	 display:flex;
	 width:100%;
	 flex-direction:column;
 }
 .small-header{
	 width:100%;
	 font-size:25px;
	 line-height:30px;
	 font-weight:bold;
	 color:#15a648;
	 margin-bottom:15px;
 }
 .hero-text{
	 width:100%;
	 font-size:50px;
	 line-height:60px;
	 font-weight:bold;
	 color:#03283A;
	 margin-bottom:30px;
 }
 .stk-qt-sec{
	 display:flex;
	 width:100%;
	 max-width:756px;
	 background:#fff;
	 border-radius:8px;
	 padding:30px;
 }
 .stk-wrap{
	 display:flex;
	 flex-wrap:wrap;
	 width:100%;
	 gap:30px;
 }
 .stk-qt{
	 width:30%;
 }
 .stk-title{
	 font-size:30px;
	 line-height:37px;
	 font-weight:600;
	 color:#15a648;
 }
 .stk-price{
	 font-size:40px;
	 line-height:49px;
	 color:#000000;
	 font-weight:bold;
 }
 
 .stk-hlv{
	 display:flex;
	 width:65%;
	 gap:30px;
 }
.stk-hlv .stk-hlv-box{
	display:flex;
	width:30%;
	flex-direction:column;
}
.stk-hlv .vol{
	display:flex;
	width:40%;
}
.stk-hlv-box span{
	width:100%;
	font-size:16px;
	line-height:37px;
	color:#03283A;
 
}
.stk-hlv-box .hlv-val{
	font-size:40px;
	 line-height:49px;
	 color:#283C54;
	 font-weight:bold;
}
.stk-foot, .stk-foot-wrap{
	display:flex;
	width:100%;
}
.eod{
	display:flex;
	width:50%;
	font-size:10px;
	line-height:12px;
	color: rgb(0 0 0 / 33%);
	align-items:center;
}
.btn-wrap{
	display:flex;
	justify-content:flex-end;
	width:50%;
 
	
}
 
/*=====================================
keyhighlights sec goes here
=======================================*/




/*=====================================
home page Bursa announcements goes
=======================================*/


.bursa-sec-wrap{
	display:flex;
	width:100%;
	flex-direction:column;
	justify-content:center;
}

.bursa-sec-wrap .main-title{
	width:100%;
	margin-bottom:86px;
}

.bursa-sec-wrap .main-title h2{
	text-align:center;
	margin-bottom:0;
}

.bursa-items-wrap{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	justify-content:center;
	margin-bottom:30px;
}

.bursa-item{
	  /*flex: 1 1 calc(25% - 22.5px);*/
	  flex:0 0 280px;
    /*min-width: 220px;*/ /* optional */
    box-sizing: border-box;
	background:#fff;
	border-radius:12px;
	padding:23px;
	box-shadow: -1px 1px 15px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: -1px 1px 15px 0px rgba(0,0,0,0.3);
-moz-box-shadow: -1px 1px 15px 0px rgba(0,0,0,0.3);
}
.bitem-wrap{
	width:100%;
}
.b-date{
	font-size:16px;
	line-height:19px;
	font-weight:600;
	margin-bottom:20px;
	color:#15a648;
	width:100%;
	text-align:left;
}
.b-link{
	width:100%;
}
.b-link a{
	font-size:20px;
	line-height:24px;
	color:#000000;
	font-weight:bold;
}
.b-link a:hover{
	color:#15a648;
	letter-spacing:normal;
}
.bursa-sec-wrap .btn-wrap{
	width:100%;
	justify-content:center;
}




/*=====================================
Quarterly Results goes hre
=======================================*/

.qr-sec-wrap{
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

.qr-cont-wrap{
	width:100%;
	display:flex;
	flex-direction:column;
	overflow:hidden;
}
.qr-title{
	width:100%;
	justify-content:center;
	display:flex;
	margin-bottom:20px;
}
.qr-title h2{
	color:#15a648;
	margin-bottom:0;
	font-weight:bold;
	font-size:40px;
	line-height:49px;
}


.qr-blocks-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
}

.qr-box{
	
	flex: 1 1 calc((100% - 60px) / 3);
	/*flex:0 0 370px;*/
	   box-sizing: border-box;
	background:#fff;
	border-radius:30px;
	padding:30px;
	position:relative;
	overflow:hidden;
}

.qr-bg{
	background:url(../images/qr-img.png) no-repeat;
	background-position:center center;
	background-size:cover;
	min-height:481px;
}

.pm-bg{
	background:url(../images/pm-img.png) no-repeat;
	background-position:center center;
	background-size:cover;
	min-height:481px;
}

.pt-bg{
	background:url(../images/pt-img.png) no-repeat;
	background-position:center center;
	background-size:cover;
	min-height:481px;
}


.qr-box-pos{
	position:absolute;
	width:82%;
	bottom:-21%;
	transition:bottom .5s ease;
	max-width:360px;
	white-space:normal;
	word-wrap:break-word;
   
	
}

/*.qr-box-cont{
	width:100%;
	display:inline-flex;
	
	 
}

.qr-box-cont::before{
	content:'';
	display:inline-flex;
	 border-left: 2px solid #15a648;
	margin-right:20px;
}*/
.qr-box-title{
	width:100%;
	font-size:30px;
	line-height:37px;
	font-weight:bold;
	color:#fff;
	margin-bottom:10px;
	
}
.qr-box-des{
	width:100%;
	font-size:16px;
	line-height:19px;
	color:#fff;
	margin-bottom:25px;
}

.qr-box-cont{
	width:100%;
	display:flex;
	position:relative;
	padding-left:22px;
}


.qr-box-cont::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:2px;
	height:37px;
	background:#15a648;

	transition:height .5s ease;
}

.pt-bg .qr-box-cont::before{
	height:70px;
}


.qr-box-cont-inner{
	width:100%;
}


.qr-box-des,
.qr-box-cont .btn-wrap{
	opacity:0;
	transform:translateY(30px);

	transition:
		opacity .4s ease,
		transform .4s ease;
}


/* Hover */

.qr-box:hover .qr-box-pos{
	bottom:30px;
}


.qr-box:hover .qr-box-cont::before{
	height:calc(100% - 0px);
}


.qr-box:hover .qr-box-des,
.qr-box:hover .btn-wrap{
	opacity:1;
	transform:translateY(0);
}

/*===========================================================
SECTION 5 
=============================================================*/



.h-ar-sec-wrap{
	width:100%;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
}

.ar-h-cover{
	flex:0 0 30%;
}

.ar-h-cover img{
	width:100%;
	max-height:421px;
	
}
.ar-h-cont{
	flex:0 0 70%;
	padding-left:5%;
}

.ar-h-cont-inner{
	display:flex;
	align-items:center;
	flex-direction:column;
	flex-wrap:wrap;
	gap:30px;
}

.ar-h-cont-inner .main-title{
	justify-content:flex-start;
}
.ar-h-cont-inner .main-title h2{
	margin-bottom:0;
}

.ar-h-desc, .ar-h-desc p{
	font-size:16px;
	line-height:19px;
	color:#000;
}

.ar-h-cont-inner .btn-wrap{
	width:100%;
	justify-content:flex-start;
	gap:10px;
}

.ar-h-cont-inner .btn-wrap a:first-child{
	width:260px;
}

/*===========================================================
SECTION 6
=============================================================*/

.h-sm-sec-wrap{
	display:flex;
	width:100%;
	 
	gap:60px;
}

.h-sm-img-sec{
	flex:0 0 55%;
}

.h-sm-cont-sec{
	flex:0 0 40%;
	display:flex;
	align-items:center;
}


.h-sm-inner{
	display:flex;
	flex-direction:column;
	width:100%;
}
.h-sm-inner .main-title{
	margin-bottom:30px;
	justify-content:flex-start;
}
.h-sm-inner .main-title h2{
	margin-bottom:0;
}
.h-sm-cont{
	display:flex;
	width:100%;
	 
	flex-direction:column;
	gap:20px;
}

.h-sm-title, .h-sm-title p{
	font-size:20px;
	line-height:24px;
	font-weight:bold;
	color:#000000;
}
.h-sm-txt, .h-sm-txt p, .h-sm-txt span{
	font-family: "Maxis", sans-serif !important;
	font-size:20px !important;
	line-height:24px !important;
	font-weight:normal;
	color:#000000;
}
.h-sm-txt strong, .h-sm-txt b{
	font-size:20px;
	line-height:24px;
	font-weight:bold;
	color:#000000;
}

.h-sm-txt > div:empty{
	display:none;
}


 .h-sm-foot{
	 display:flex;
	 width:100%;
	  flex-wrap:wrap;
	 gap:30px;
 }
.sm-link-box{
	 
    flex: 0 1 clamp(60px, 20vw, 120px);
 
	/*flex: 0 0 135px;*/
	display:flex;
	background:#fff;
	border-radius:13px;
	box-shadow: -1px 1px 15px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -1px 1px 15px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -1px 1px 15px 0px rgba(0,0,0,0.3);
	
	justify-content:center;
}

.sm-link-box a{
	display:inline-flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	text-align:center;
	font-size:16px;
	line-height:19px;
	font-weight:bold;
	color:#000;
	padding: clamp(8px, 1.5vw, 20px);
	
}

.sm-link-box a,
.sm-link-box {
    min-width: 0;
}
.sm-text{
	text-align:center;
	/*font-size:16px;*/
	font-size: clamp(12px, 1.2vw, 16px);
	line-height:19px;
	font-weight:bold;
	color:#000;
}

.lb-icon{
	width:100%;
	display:flex;
	margin-bottom:10px;
	align-items:center;
	justify-content:center;
}
.lts-icon{
	background:url(../images/letter-shareholders-icon.png) no-repeat;
	background-size:cover;
	background-position:center center;
	    width: clamp(28px, 4vw, 42px);
    height: clamp(24px, 3.3vw, 35px);
}
.nagm-icon{
	background:url(../images/notice-agm-icon.png) no-repeat;
	background-size:cover;
	background-position:center center;
  width: clamp(20px, 2.5vw, 26px);
    height: clamp(24px, 3.3vw, 35px);
}

.h-sm-foot .btn-wrap {
    flex: 1 1 auto;
    justify-content:flex-start;
	width:auto;
	display:flex;
}

/*===========================================================
SECTION 7
=============================================================*/


.h-irq-sec-wrap{
	display:flex;
	width:100%;
	gap:30px;
	align-items:center;
}
.irq-col{
	flex:1;
}

.irq-cont{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.irq-cont .main-title{
	justify-content:flex-start;
}

.irq-cont .main-title h2{
	margin-bottom:0;
}

.irq-cont .btn-wrap{
	width:100%;
	justify-content:flex-start;
}

.irq-cont .btn-wrap a{
	width:250px;
}

/*.irq-img{
	background:url(../images/irqueries.png) no-repeat;
	background-size:cover;
	background-position:center center;
	width:100%;
	height:471px;
	border-radius:30px;
}*/






/*==================================================================================
Quarterly Results css starts here
====================================================================================*/


.qrr-full-wrap{
	display:flex;
	flex-direction:column;
	width:100%;
	
}

.qrr-full-wrap .reports-title{
	width:100%;
	float:none;
	display:none;
}

.qrr-sec {
  
    display: flex;
 	flex-direction: column;
    gap: 60px;
}

.qrr-filter{
	display:flex;
	flex-direction:column;
	width:100%;
}

.qrr-head-sec{
	display:flex;
	flex-direction:column;
	border-top:1px solid #C2C2C2;
	border-bottom:1px solid #C2C2C2;
	gap:10px;
	margin-bottom:30px;
}
.qrr-qyr{
	width:100%;
	font-size:40px;
	line-height:49px;
	font-weight:bold;
	color:#000;
	margin-top:10px;
}
.qrr-pe-txt{
	width:100%;
	font-size:22px;
	line-height:27px;
	font-weight:bold;
	color:#000;
	margin-bottom:20px;
}


.qrr-cont-in{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
}


.qrr-qr-col{
	flex: 1 1 calc((100% - 60px) / 3);
	    background: #fff;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 7pxrgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 20px 20px 20px 20px;
	transition: all .4s ease;
	border: 1px solid #fff;
}

.qrr-qr-col:hover{
	border: 1px solid #15a648;
    transition: all .4s ease;
    transform: translateY(-10px);
}


.qrr-icon{
	display:flex;
	width:100%;
	margin-bottom:15px;
	
}
.qrr-icon img{
	width:70px;
	height:60px;
	object-fit:contain;
}

.qrr-title{
	font-size:22px;
	line-height:27px;
	font-weight:600;
	color:#000;
	margin-bottom:5px;
}
.pdf-size{
	font-size:14px;
	line-height:17px;
	color:#15a648;
}

.qrrr-foot{
	display:flex;
	width:100%;
	margin-top:60px;
	gap:10px;
}

.qrrr-foot a{
	display:flex;
	 
}



















/*==========  Mobile First Method  ==========*/


@media(max-width:1199px) {
}







/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
 
}
 @media (min-width: 992px) {
}
@media (max-width: 991px) {
	
.qr-box{
	
	flex: 1 1 calc((100% - 30px) / 2);
	
}

 
	
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
 
}
@media (min-width: 768px) {
}


/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
	
.banner-ir-home{
	background-position:center center;
	
}

.stk-qt {
    width:100%;
}	
.stk-hlv {
    display: flex;
    width: 100%;
    gap: 30px;
    flex-wrap: wrap;
}

.bursa-item{
	flex:0 0 100%;
}

.qr-box{
	
	flex: 1 1 100%;
 
}

.h-sm-sec-wrap{
	display:flex;
	width:100%;
	flex-wrap:wrap;
	gap:60px;
}
.h-sm-img-sec, .h-sm-cont-sec{
    flex: 0 0 100%;
}

 

.h-irq-sec-wrap{
	flex-wrap:wrap;
}

.irq-col{
	flex:0 0 100%;
}
.irq-img{
	order:-1;
}




 
 
}
 @media (max-width:576px) {
	 
.stk-hlv .stk-hlv-box{
	width:100%;
}


.ar-h-cover {
    flex: 0 0 100%;
}

.h-ar-sec-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
}
.ar-h-cont-inner .btn-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
 
}



/* Portrait phones and smaller */
@media (max-width: 480px) {
}
 @media(max-width:414px) {
}

/* Portrait i phones and smaller */
@media (max-width: 380px) {
}