* { box-sizing: border-box;}

/* font: 
Roboto: Regular 400, Medium 500, Bold 700
Inter Tight: Regular 400, Black 900
*/

.mobileMenuBlocker {z-index: 45; position: fixed; top: 0; left:0; width: 100%; height:100%; display: none; }
/*modal box*/ .jquery-modal.blocker {z-index: 999;}
.scrollToTop { text-align:center; font-weight: bold; text-decoration: none; position:fixed; bottom:8px; right:8px; display:none; z-index: 5; opacity: 0.7; width: 40px; height: 40px;}
.scrollToTop:hover { opacity: 1;}


body { background: #f3f3f3; margin: 0; font-family: "Roboto", sans-serif; color: #000; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px;}
h1, h2, h3, h4, h5, h6 { font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; color:#000; text-align: center; line-height: 1.1em; margin-top: 0;}
.heading-ai {color: #3345aa;}
h1 {font-size: 55px; }
h2 {font-size: 55px; line-height: 1.15em; }
h3 {font-size: 35px; }
h4 {font-size: 25px; }

a {text-decoration: underline; color: #6b8fb9; }
a:hover {color: #000;}
button { cursor: pointer; font-family: "Roboto", sans-serif; border: none; text-transform: uppercase; font-weight: 500; color: #fff; background-color: #000; transition: all .15s linear; border-radius: 100px; padding: 12px 25px; }
button:hover {background-color: #6b8fb9; color:#fff; }
.button { cursor: pointer; font-family: "Roboto", sans-serif; border: none; text-transform: uppercase; font-weight: 500; color: #fff; background-color: #ff2828; transition: all .15s linear; border-radius: 100px; padding: 12px 25px; display:inline-block; text-decoration: none;}
.button:hover {background-color: #000; color:#fff; }

figure {margin: 0;}
img {width: 100%; height: auto; display: block;} 
main {}
section {display:block; width: 100%; position: relative;} 
.container { margin: auto; width: 100%; padding: 0 20px; max-width: 1400px; }

@media only screen and (max-width: 1199px) {
  h2 {font-size: 51px;}
  h3 {font-size: 32px;}
}
@media only screen and (max-width: 1023px) {
  h1 {font-size: 73px;}
  h2 {font-size: 47px;}
  h3 {font-size: 28px;}
}
@media only screen and (max-width: 767px) {
  h1 {font-size: 73px;}
  h2 {font-size: 32px;}
  h3 {font-size: 23px;}
}
@media only screen and (max-width: 479px) {
  h1 {font-size: 9vw;}
  
}


/* header *********************************************************************************************/
header {position:absolute; width: 100%; z-index: 999;}
header .container {position: relative;}

.header-wrapper { display: flex; justify-content: space-between; align-items: center; transition: all .15s linear; margin-top: 10px;}
.logo {width: 300px;}
.navigation-top { background: #c5c5c5; padding: 12px 20px; border-radius: 1em;}
.navigation-top.mobile-menu-active {background-color: #6b8fb9; color: #fff;}
.navigation-top nav {}
.navigation-top nav ul {list-style: none; margin: 0; padding: 0; }
.navigation-top nav ul.desktop {display: flex;}
.navigation-top nav ul.mobile {display: none;}
.navigation-top nav ul li {}
.navigation-top nav ul li a { font-weight: 600; text-transform: uppercase; text-decoration: none; color: #000; display: inline-block; padding: 3px; margin:3px 10px; transition: all .15s linear; letter-spacing: 0.015em;}
.navigation-top nav ul li a:hover {color: #034f7e;}
.navigation-top.mobile-menu-active nav ul li a {color: #fff;}
.navigation-top .mobile-link figure {display:inline-block; width: 15px; height: auto;}

.navigation-dropdown {background: #185aa7; text-align: right; display: none; float: right; padding: 8px 13px; border-radius: 23px;}
.navigation-dropdown nav {}
.navigation-dropdown nav ul {list-style: none; margin: 0; padding:5px 0; }
.navigation-dropdown nav ul li {}
.navigation-dropdown nav ul li a {text-decoration: none; color: #fff; display:block; font-weight: 500; text-transform: uppercase; transition: all .15s linear; letter-spacing: 0.015em; padding:10px; }
.navigation-dropdown nav ul li a:hover {color: #000;}

@media only screen and (max-width: 1199px) {
  .navigation-top { padding: 8px 13px;}
  .navigation-top nav ul.desktop {display: none;}
  .navigation-top nav ul.mobile {display: flex;}
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
  .logo {margin-right: 15px;}
  .navigation-top { padding: 2px 0px; border-radius: 0.5em;}
  .mobile-link span {display: none;}
}




/* section: about *************************************************************************************/
#section-about {background-image: url(images/main.jpg); background-repeat: no-repeat; background-size: cover; background-position: right top; height: 52vw;     top: 84px;}
#section-about h1 {text-align: left; margin-bottom: 40px;}
#section-about h1 .usaii {display: block; padding-left: 5px; font-size: 39px; line-height: 42px; margin-bottom:10px; }
#section-about h1 .certified-ai-programs {display: block; line-height: 67px; margin-bottom: 20px;}
#section-about h1 .in-malaysia {display: block; font-weight: 600; padding-left: 1px; font-size: 22px; line-height: 26px; } 
/*section-about article {position: absolute; top: 200px; width: 60%;}*/
.about-wrapper {padding-right: 50%; padding-top: 11vw;}
.about-wrapper article {}
.about-wrapper article > p:before {content: ""; display: block; border-top: solid #000 1.5px; width:200px; padding-bottom:40px; }
.about-wrapper article > p {margin-bottom: 40px; width: 600px;}
.about-wrapper article > a {} 

@media only screen and (max-width: 1199px) {
  #section-about { height: 84vw;}
  .about-wrapper article > p {width: 450px;}
}
@media only screen and (max-width: 1023px) {
  #section-about {background-position: right -25vw top; height: 120vw;}  
  #section-about h1 .usaii { font-size: 35px; }
  #section-about h1 .certified-ai-programs {}
  #section-about h1 .in-malaysia { font-size: 26px; } 
  .about-wrapper { padding-top: 25vw;}
  .about-wrapper article > p:before {padding-bottom:30px; }
  .about-wrapper article > p {margin-bottom: 30px; width: 370px;}
}
@media only screen and (max-width: 767px) {
  #section-about {height: unset; background-size: 196%; background-position: top right;}
  #section-about h1 {text-align: center;}
  .about-wrapper {padding-right: unset; padding-top: 86vw; padding-bottom: 15vw;}
  .about-wrapper article {text-align: center;}
  .about-wrapper article > p {width: unset;}
  .about-wrapper article > p:before {margin-left: auto; margin-right: auto;}
}
@media only screen and (max-width: 479px) {
  #section-about h1 .usaii {font-size: 10vw; line-height: 11vw;}
  #section-about h1 .certified-ai-programs {line-height: 12vw;}
  #section-about h1 .in-malaysia { font-size: 5vw; line-height: 6vw; font-weight:500;} 
  .about-wrapper { padding-bottom: 50vw;}
}

/* section: programs **********************************************************************************/
#section-programs {background-repeat: no-repeat; background-image: url(images/bg-1.webp); background-size: contain; background-position: center bottom -100px;}

.programs-info {margin-bottom:80px;}
.programs-info-wrapper {} 

.program {margin: 110px auto 40px auto; background: #fff; border-radius: 25px; padding:20px; width: 900px; display: flex; justify-content: center;}
.program.program-4 {width: 450px;}

.program-about { text-align: center; background-color: #6b8fb9; color:#fff; padding: 20px; border-radius: 20px; width: 45%;}
.program-4 .program-about {width: 100%;}
.program-about > div {margin-top: -100px;}
.program-about > div img {width: 80px; margin:0 auto 15px auto; display:inline;}
.program-about > h3 {color: #fff; margin-bottom: 10px;}
.program-about > p {margin-bottom: 20px;}
.program-about .apply {margin-bottom: 0; text-align: center;}
.program-about .apply .button {}
.program-about .apply .button:hover {background-color: #fff; color: #000;}

.program-details-wrapper { padding: 20px; width: 55%;}
.program-details-wrapper > h4 {text-align: left; font-size: larger;}
.program-details-wrapper .program-details {}
.program-details-wrapper .program-details > div {display: flex; justify-content: flex-start; margin-bottom: 15px; }
.program-details-wrapper .program-details > div > div:first-child {width: 120px;}
.program-details-wrapper .program-details > div > div:last-child {width: calc(100% - 120px);}

.program-dates {display: flex;}

.program-dates-selection {width: 100px;}
.program-dates-selection > div {position: relative; border: #aaa solid 1px; color: #aaa; width: 90px; padding:4px; cursor: pointer; transition:all 0.15s linear;}
.program-dates-selection > div:not(:first-child) {margin-top: 5px; }
.program-dates-selection > div.active {border-color: #177de2 !important; color:#177de2 !important;}
.program-dates-selection > div:hover {background: #177de2; color: #fff;}
.program-dates-selection > div.active:hover {background: unset; color:#177de2;}
.program-dates-selection > div.active::before {content: ''; position: absolute; background-repeat: no-repeat; background-image: url(images/dates-arrow.svg); background-size: cover; width: 10px; height:18px; right:-7px; }

.program-dates-breakdown {width: calc(100% - 110px); border: solid 1px #000; padding: 4px 10px;}
.program-dates-breakdown > div {display: none;}
.program-dates-breakdown > div.active {display: block;}
.program-dates-breakdown > div > div {display: flex; }
.program-dates-breakdown > div > div > div:first-child {width: 90px;}
.program-dates-breakdown > div > div > div:last-child {width: calc(100% - 100px);}

.programs-posters {padding-bottom: 120px; }
.programs-posters-wrapper {display: flex; justify-content: center;}
.programs-posters-wrapper > div {padding: 0 20px; width: 350px;}
.programs-posters-wrapper > div figure {position: relative; display: block;} 
.programs-posters-wrapper > div figure .download {position: absolute; bottom: 20px; width:100%; text-align:center; } 
.programs-posters-wrapper > div figure .button {background-color: #fff; color: #000; background-image:url(images/icon-download.svg); background-repeat:no-repeat; background-position: left 22px center; background-size: 15px; padding-left: 42px; } 
.programs-posters-wrapper > div figure .button:hover {background-color: #6b8fb9; color:#fff; }

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-programs {background-position: center bottom;}
  .program {flex-direction: column; width: 450px; padding: 15px;}
  .program-about {width: 100%;}
  .program-about > div img {width:100%; max-width: 180px;}
  .program-details-wrapper {width: 100%;}
  .programs-posters {padding-bottom: 80px; }
}
@media only screen and (max-width: 767px) {
  #section-programs {background-size:180%; background-position: left bottom;}
  .program {width: 100%; max-width: 450px; padding: 15px;}
  .program.program-4 {width: 100%; max-width: 450px; }
  .program-about > div img {max-width: 160px;}
  .programs-posters-wrapper {flex-wrap: wrap; }
  .programs-posters-wrapper > div {width: 350px; margin-bottom: 40px;}
}
@media only screen and (max-width: 479px) {
  .program {padding: 10px;}
  .program-details-wrapper { padding: 10px; }
}
@media only screen and (max-width: 440px) {
  .program-details-wrapper .program-details > div > div:first-child {width: 85px;}
  .program-details-wrapper .program-details > div > div:last-child {width: calc(100% - 85px);}
  .program-dates-breakdown > div > div {flex-direction: column;}
  .program-dates-breakdown > div > div:not(:first-child) {margin-top: 10px; }
  .program-dates-breakdown > div > div > div:first-child {width: 100%;}
  .program-dates-breakdown > div > div > div:last-child {width: 100%;}
}

/* section: programs *********************************************************************************
#section-programs {background-repeat: no-repeat; background-image: url(images/bg-1.jpg); background-size: contain; background-position: center bottom -100px;}

.programs-info {margin-bottom:80px; }
.programs-info-wrapper {} 
.programs-info-wrapper article {display: block; margin: auto; border-radius: 25px; padding: 30px; width: 100%; max-width: 650px;}
.programs-info-wrapper h3 {text-align: left;}
.programs-info-wrapper .apply {margin-bottom: 0; text-align: right;}
.programs-info-wrapper .apply .button { margin-right: -15px; margin-bottom: -15px;}
.programs-info-wrapper .program-1 {background-color: #fff; margin-bottom: 15px;}
.programs-info-wrapper .program-2 {background-color: #6b8fb9; color:#fff; margin-bottom: 15px;} 
.programs-info-wrapper .program-2 h3 {color: #fff;}
.programs-info-wrapper .program-2 .button:hover {color:#000; background-color: #fff;}

.programs-info-wrapper .program-3 {background-color: #336caa; color:#fff; margin-bottom: 15px;} 
.programs-info-wrapper .program-3 h3 {color: #fff;}
.programs-info-wrapper .program-3 .button:hover {color:#000; background-color: #fff;}

.programs-posters {padding-bottom: 120px; }
.programs-posters-wrapper {display: flex; justify-content: center;}
.programs-posters-wrapper > div {padding: 0 20px; width: 350px;}
.programs-posters-wrapper > div figure {position: relative; display: block;} 
.programs-posters-wrapper > div figure .download {position: absolute; bottom: 20px; width:100%; text-align:center;  } 
.programs-posters-wrapper > div figure .button {background-color: #fff; color: #000; background-image:url(images/icon-download.svg); background-repeat:no-repeat; background-position: left 22px center; background-size: 15px; padding-left: 42px; } 
.programs-posters-wrapper > div figure .button:hover {background-color: #6b8fb9; color:#fff; }

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-programs {background-position: center bottom;}
  .programs-posters {padding-bottom: 80px; }
  .programs-info-wrapper article { max-width: 550px;}
}
@media only screen and (max-width: 767px) {
  #section-programs {background-size:180%; background-position: left bottom;}}
  .programs-posters-wrapper {flex-wrap: wrap; }
  .programs-posters-wrapper > div {width: 350px; margin-bottom: 40px;}
}
@media only screen and (max-width: 479px) {
}
*/


/*section: registration */

#registration { background-color:#dfdfdf; padding:70px 0px 40px;}
#registration .container {display:flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 50px; } 
#registration .fleft {display: inline-block; text-align: left; padding-right: 20px; width: 560px; }
#registration .fleft hr {display: inline-block;}
#registration .fleft .requirement > div {display:table-cell; vertical-align: middle; padding-bottom: 50px;}
#registration .fleft .requirement > div:first-child {text-align:center; padding-right:15px;}
#registration .fleft .requirement > div:last-child {}
#registration .fleft .requirement .academic > div {display:table-cell; vertical-align: top; }
#registration .fleft .requirement .academic > div:first-child {width:80px;}
#registration .fright {display: inline-block; box-sizing: border-box; background-color: #fff; padding:30px 35px; width: 460px; box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.3);}
#registration div:last-child {justify-content:center  }


@media screen and (max-width: 1279px) {
#registration .fleft {padding-right: 15px; width: 490px; }
	/*#registration .fleft .requirement > div {padding-bottom: 20px;}
	#registration .fleft .requirement > div:first-child {padding-right:15px;}
	#registration .fleft .requirement .academic > div:first-child {width:80px;}*/
		#registration .fright {padding:40px 50px; width: 390px; }
}

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

}
@media only screen and (max-width: 1023px) {
#registration .fleft {padding-right: 15px; width: 45%; }
	/*#registration .fleft .requirement > div {padding-bottom: 20px;}
	#registration .fleft .requirement > div:first-child {padding-right:15px;}
	#registration .fleft .requirement .academic > div:first-child {width:80px;}*/
			#registration .fright {padding:35px 45px; width: 50%; }
}
@media only screen and (max-width: 767px) {
#registration .container {justify-content: center; margin: 0 auto 50px; }
#registration .fleft {padding-right: 0; width: 90%; max-width: 500px; display: block; margin-left: auto; margin-right: auto; }
				#registration h3.leftAlign {text-align: center;}
				#registration hr.leftAlign {display:block;} 
	/*#registration .fleft .requirement > div {padding-bottom: 20px;}
	#registration .fleft .requirement > div:first-child {padding-right:15px;}
	#registration .fleft .requirement .academic > div:first-child {width:80px;}*/
				#registration .fright {padding:30px 40px; width: 90%; max-width: 450px; display: block; margin-left: auto; margin-right: auto; }
}

@media only screen and (max-width: 598px) {
#registration .container {justify-content: center; margin: 0 auto 50px; }
#registration .fleft {padding-right: 0; width: 90%; max-width: 500px; display: block; margin-left: auto; margin-right: auto; }
				#registration h3.leftAlign {text-align: center;}
				#registration hr.leftAlign {display:block;} 
	/*#registration .fleft .requirement > div {padding-bottom: 20px;}
	#registration .fleft .requirement > div:first-child {padding-right:15px;}
	#registration .fleft .requirement .academic > div:first-child {width:80px;}*/
					#registration .fright {padding:25px 15px; width: 100%; max-width: 450px; display: block; margin-left: auto; margin-right: auto; }
}
					
@media only screen and (max-width: 479px) {
#registration .container {justify-content: center; margin: 0 auto 50px; }
}


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

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

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

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

}



/* section: trainers **********************************************************************************/
#section-trainers {margin-bottom: 80px;}
.trainers-wrapper article {display:flex; justify-content: center; margin: 0 auto 50px; } 
.trainers-wrapper article h3 {text-align: left;}
.trainers-wrapper article > div {margin: auto 10px;}
.trainers-wrapper article > div:first-child {width: 280px; } 
.trainers-wrapper article > div:last-child {width: 500px; } 

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
  #section-trainers {margin-bottom: 60px;}
  .trainers-wrapper article {flex-wrap: wrap;}
  .trainers-wrapper article h3 {text-align: center;}
  .trainers-wrapper article > div:first-child {width: 100%; margin-bottom:20px; } 
  .trainers-wrapper article > div:last-child {width: 100%; margin-bottom: -20px;} 
  .trainers-wrapper article figure {max-width: 230px; margin-left: auto; margin-right: auto;}
}
@media only screen and (max-width: 479px) {
  .trainers-wrapper article figure {max-width: 190px; }
}

/* section: advisers **********************************************************************************/
#section-advisers { background-color:#fff; padding:40px 0px;}
.advisers-wrapper {display:flex; flex-wrap: wrap; width: 1000px; margin: 0 auto;}
.advisers-wrapper article {width: 50%; padding: 0 40px; margin-bottom: 20px;}
.advisers-wrapper article figure {margin-bottom: 20px;}
#section-advisers ul {list-style-image: url(images/blue-bullet.png);}
#section-advisers li {margin-bottom: 20px; padding-left:5px; }

@media only screen and (max-width: 1199px) {
  .advisers-wrapper {width: 850px;}
}
@media only screen and (max-width: 1023px) {
  .advisers-wrapper {width: 750px;}
  .advisers-wrapper article {padding: 0 30px;}
}
@media only screen and (max-width: 767px) {
  #section-advisers {margin-bottom: 20px;}
  .advisers-wrapper {width: 90%;}
  .advisers-wrapper article {width: 100%;}
  .advisers-wrapper article figure {max-width: 300px; margin-left: auto; margin-right: auto;}
}
@media only screen and (max-width: 479px) {
  .advisers-wrapper {width: 100%;}
}

/* section: why us ************************************************************************************/
#section-whyus {background-image: url(images/chip-2.jpg); background-repeat: no-repeat; background-size: 100%; height: 43vw; padding-top:40px; background-color:#032f60;}
#section-whyus .container {display: flex; height: 100%; align-items: center; text-align:center;}
#section-whyus .container p {color:#fff; text-align:center; padding-bottom:40px; font-size:20px; font-weight:bold;}
#section-whyus .container span {color:#FF0000; text-align:center; padding-bottom:40px; font-size:20px; font-weight:bold;}
.whyus-wrapper {display:flex; flex-wrap: wrap; width: 1000px; margin: 0 auto;}
.whyus-wrapper h2 {text-align: left; color:#fff; font-size:42px; text-align:center;} 
.whyus-wrapper article {}
.whyus-wrapper article > div {display: flex; align-items: flex-start;}
.whyus-wrapper article > div > h3 {text-align: left; font-family: "Roboto", sans-serif; font-size: 17px; font-weight: 500; width: 38%;}
.whyus-wrapper article > div > p {margin: 0; width: 62%; text-align:left; color:#fff;}
#section-whyus ul {list-style-image: url(images/white-bullet.png);}
#section-whyus li {margin-bottom: 20px; padding-left:5px; text-align:left; color:#fff;}

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-whyus {background-size: 150%; background-position: left 60% center; height: 140vw;}
}
@media only screen and (max-width: 767px) {
  #section-whyus {margin-bottom: 60px; height: unset; background-size: 67vw; background-position: left top -6vw;}
  .whyus-wrapper {padding-left: unset; padding-top: unset; padding-bottom: unset;}
  .whyus-wrapper h2 { padding-left: 34%; height: 57vw; display: flex; flex-wrap: wrap; align-content: center; font-size:32px;}
  .whyus-wrapper h2 .heading-ai {padding-left: 8px; padding-right: 8px;}
}
@media only screen and (max-width: 479px) {
  #section-whyus {background-image: url(images/chip.jpg); background-size:100vw; background-position:center top -6vw; padding-top:90vw; margin-bottom:30px; }
  .whyus-wrapper h2 {padding-left: unset; height: unset; text-align:center; justify-content: center; }
  .whyus-wrapper article > div {flex-wrap: wrap;}
  .whyus-wrapper article > div > h3 {width: 100%;}
  .whyus-wrapper article > div > p {width: 100%;}
}



/* section: why us ************************************************************************************/
#section-careers { height: 33vw; padding-top:40px; background-color:#f3f3f3;}
#section-careers .container {display: flex; height: 100%; align-items: center; text-align:center;}
.careers-wrapper {display:flex; flex-wrap: wrap; width: 1000px; margin: 0 auto;}
.careers-wrapper h2 {text-align: left; color:#000; font-size:42px; text-align:center;} 
.careers-wrapper article {}
.careers-wrapper article > div {display: flex; align-items: flex-start; margin-bottom: 30px;color:}
.careers-wrapper article > div > h3 {text-align: left; font-family: "Roboto", sans-serif; font-size: 17px; font-weight: 500; width: 38%;}
.careers-wrapper article > div > p {margin: 0; width: 62%; text-align:left; color:#000;}
#section-careers ul {list-style-image: url(images/blue-bullet.png);}
#section-careers li {margin-bottom: 20px; padding-left:5px; text-align:left; color:#000;}

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-careers {background-size: 150%; background-position: left 60% center; height: 140vw;}
}
@media only screen and (max-width: 767px) {
  #section-careers {margin-bottom: 60px; height: unset; background-size: 67vw; background-position: left top -6vw;}
  .careers-wrapper {padding-left: unset; padding-top: unset; padding-bottom: unset;}
  .careers-wrapper h2 { padding-left: 34%; height: 57vw; display: flex; flex-wrap: wrap; align-content: center; font-size:32px;}
  .careers-wrapper h2 .heading-ai {padding-left: 8px; padding-right: 8px;}
}
@media only screen and (max-width: 479px) {
  #section-careers { top -6vw; padding-top:15vw; margin-bottom:30px; }
  .careers-wrapper h2 {padding-left: unset; height: unset; text-align:center; justify-content: center; }
  .careers-wrapper article > div {flex-wrap: wrap;}
  .careers-wrapper article > div > h3 {width: 100%;}
  .careers-wrapper article > div > p {width: 100%;}
}



/* section: categories ********************************************************************************/
#section-categories {margin-bottom: 60px;}
.categories-wrapper {display:flex; justify-content: center;}
.categories-wrapper article { position: relative; text-align: center; width: 33.33%; border-radius: 30px; padding: 40px; margin: 70px 20px 40px 20px;}
.categories-wrapper article h3 {margin-bottom: 20px;}
.categories-wrapper article.white {background-color: #fff;} 
.categories-wrapper article.blue {background-color: #6b8fb9; color:#fff;} 
.categories-wrapper article.blue h3 {color: #fff;}
.categories-wrapper article figure {margin-top: -100px; width: min-width: 200px; margin:-100px auto 20px auto;}
.categories-wrapper article p.apply {margin-top:40px; /*position: absolute; bottom: 0; width: 100%;*/}
.categories-wrapper article.blue .button:hover {background-color: #fff; color:#000; }

@media only screen and (max-width: 1199px) {
  .categories-wrapper article { border-radius: 20px; padding: 30px 14px; margin: 65px 1px 35px 1px;}
}
@media only screen and (max-width: 1023px) {
  .categories-wrapper {flex-wrap: wrap;}
  .categories-wrapper article { width: 400px; } 
}
@media only screen and (max-width: 767px) {
  .categories-wrapper article figure {min-width: unset; /*max-width: 350px; */margin-top: -110px;}
  categories-wrapper h2 { padding-left: 34%; height: 57vw; display: flex; flex-wrap: wrap; align-content: center; font-size:32px;}
}

@media only screen and (max-width: 479px) {
  #section-categories {margin-bottom: 30px;}
  .categories-wrapper article figure {/*max-width: 200px; */margin-top: -80px;}
   categories-wrapper h2 { padding-left: 34%; height: 57vw; display: flex; flex-wrap: wrap; align-content: center; font-size:32px;}
}

/* section: first step ********************************************************************************/
#section-first-step {background-image: url(images/bg-3.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center; height: 45vw; text-align: right;}
#section-first-step .first-step-wrapper { position: absolute; text-align: center; width: 500px; right: 2vw; bottom: 9vw;
}

@media only screen and (max-width: 1199px) {
  #section-first-step .first-step-wrapper { width: 450px; right: 2vw; bottom: 5vw;}  
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
  #section-first-step {margin-bottom: 30px; background-size: 130%; background-position: center right; height: 70vw;}
  #section-first-step .first-step-wrapper {width: 100%; right:0; }
}
@media only screen and (max-width: 479px) {
  #section-first-step {margin-bottom: 40px;}
  #section-first-step {background-size: 160%; height: 107vw;background-position: top right; }
  #section-first-step .first-step-wrapper {bottom: 8vw;}
}

/* section: demand ************************************************************************************/
#section-demand {background-image: url(images/malaysia.jpg); background-repeat: no-repeat; background-size: 75%; background-position: right -20vw center; height: 70vw;}
#section-demand .container {display: flex; height: 100%; align-items: center;}
.demand-wrapper {padding-right: 55%; }
.demand-wrapper h2 {text-align: left;} 
.demand-wrapper article {margin-top: 35px;}
.demand-wrapper article > div {display: flex; align-items: flex-start; margin-bottom: 30px;}
.demand-wrapper article > div > h3 {text-align: left; font-family: "Roboto", sans-serif; font-size: 17px; font-weight: 500; width: 33%;}
.demand-wrapper article > div > p {margin: 0; width: 67%;}

@media only screen and (max-width: 1199px) {
  #section-demand {height: 75vw;}
}
@media only screen and (max-width: 1023px) {
  #section-demand { background-size: 85%; background-position: right -25vw center; height: 100vw;}
  .demand-wrapper {padding-right: 45%; }
}
@media only screen and (max-width: 767px) {
  #section-demand {height: unset; background-position: right -20vw top; margin-bottom: 30px;}
  .demand-wrapper {padding-right: unset; }
  .demand-wrapper h2 {padding-right: 35%; height: 68vw; display: flex; flex-wrap: wrap; align-content: center;}
  .demand-wrapper h2 div {padding-right: 8px; }
  .demand-wrapper h2 .heading-ai {padding-left: 8px; padding-right: 8px;}
}
@media only screen and (max-width: 479px) {
  #section-demand {background-size: 100%; height: unset; background-position: center top; padding-top: 85vw;}
  .demand-wrapper h2 {padding-right: unset; text-align: center; justify-content: center;}
  .demand-wrapper article > div {flex-wrap: wrap;}
  .demand-wrapper article > div > h3 {width: 100%;}
  .demand-wrapper article > div > p {width: 100%;}
}


/* section: jobs **************************************************************************************/
#section-jobs { margin-bottom:100px; background-color:#dfdfdf; padding:80px 0px;}
.jobs-wrapper {background-color: #fff; padding: 40px; border-radius: 40px; position: relative; }

/*.job-list-show-all {position:absolute; bottom:-5px; text-align: center; width: 100%; background-image: url('images/job-gradient.webp'); background-repeat: no-repeat; background-position: bottom center; background-size: auto 100%; height: 200px;}
.job-list-show-all .button {margin-top: 110px; border: #022649 solid 3px; background-color: #50D6FF; color:#022649; padding-left:80px; padding-right:80px; }
.job-list-show-all .button:hover {border: #50D6FF solid 3px; color: #fff; background-color: #022649; }*/

/*
.job-list-show-all {position:absolute; bottom: 40px; left: 40px; text-align: center; width: calc(100% - 80px); background-image: url(images/job-gradient.webp); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; height: 100%;}
.job-list-show-all .button {margin-top: 120px; background-image: url(images/arrow-show-all.svg); background-repeat: no-repeat; background-position: center right 25px; background-size: auto 10px; padding-right: 50px;}
.job-list-show-all .button:hover {}
*/
.job-list-show-all {z-index: 2; position:absolute; bottom:40px; text-align: center; background-image: url('images/job-gradient.webp'); background-repeat: no-repeat; background-position: bottom center; background-size: auto 100%; width: calc(100% - 80px); aspect-ratio: 9.3214;}
.job-list-show-all-button {z-index: 3; width: calc(100% - 80px); position: absolute; text-align: center; bottom: -20px;}
.job-list-show-all-button .button {background-image: url(images/arrow-show-all.svg); background-repeat: no-repeat; background-position: center right 25px; background-size: auto 10px; padding-right: 50px;}

.job-list {max-width:1200px; margin-left:auto; margin-right:auto; text-align: center;}
.job-list > div {display: inline-block !important; margin: 0 20px 20px 20px; width: auto; height:auto; transition: linear 0.2s all;}
.job-list img {width: auto; height: 70px;}
.job-list > div.hidden {visibility:hidden; height: 0; width:0; margin:0; }

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-jobs { margin-bottom:80px; }
  .jobs-wrapper { padding: 30px; border-radius: 30px;}
  .job-list-show-all {bottom:30px; width: calc(100% - 60px);}
  .job-list-show-all-button {width: calc(100% - 60px);}
  .job-list > div {margin: 0 10px 10px 10px;}
  .job-list img {width: auto; height: 60px;}
}
@media only screen and (max-width: 767px) {
  #section-jobs { margin-bottom:60px; }
  .jobs-wrapper { padding: 20px; border-radius: 20px;}
  .job-list-show-all {bottom:20px; width: calc(100% - 40px)}
  .job-list-show-all-button {width: calc(100% - 40px);}
  .job-list > div {display: inline-block; margin: 0 5px 5px 5px;}
  .job-list img {width: auto; height: 50px;}
}
@media only screen and (max-width: 479px) {
}


/* section: contact ***********************************************************************************/
#section-contact {margin-bottom: 100px;}
.contact-wrapper { margin: auto; text-align: center; background-color: #6b8fb9; color:#fff; width: 700px; border-radius: 20px; padding: 30px;}
.contact-wrapper p:first-child {margin-top: 0; margin-bottom: 30px;}
.contact-wrapper form {}
.contact-wrapper form > div {display: flex; align-items: center; justify-content: center; margin-bottom: 15px;}
.contact-wrapper form label {font-weight:500; font-size: 17px; width: 120px; text-align: left;}
.contact-wrapper form input[type=text],
.contact-wrapper form select {padding: 10px; font-size: 17px; width: 300px; border-radius: 0; border:none; color:#000; }
.contact-wrapper form button[type=submit] {font-size: 17px; margin-top: 20px;}
.contact-wrapper form button[type=submit]:hover {color:#000; background-color: #fff;}

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-contact {margin-bottom: 80px;}
  .contact-wrapper { width: 500px; }
}
@media only screen and (max-width: 767px) {
  #section-contact {margin-bottom: 60px;}
  .contact-wrapper { width: 90%; }
  .contact-wrapper form label {width: 100px;}
  .contact-wrapper form input[type=text],
  .contact-wrapper form select {width: 320px;}
}
@media only screen and (max-width: 479px) {
  #section-contact {margin-bottom: 40px;}
  .contact-wrapper {width: 100%; border-radius: 15px; padding: 20px;}
  .contact-wrapper form > div  {flex-wrap: wrap;}
  .contact-wrapper form label {width: 100%;}
  .contact-wrapper form input[type=text],
  .contact-wrapper form select {width: 100%;}
}


/* footer *********************************************************************************************/
footer {} 
.footer-contact-details {/*border-top:#000 solid 1px;*/ text-align: center; font-size:17px; font-weight:500; line-height:21px; padding-top:10px; }
.footer-contact-details .address {margin-bottom: 20px;}
.footer-contact-details .email {margin-bottom: 30px;}
.footer-social {padding-bottom: 70px;}
.footer-social ul {list-style: none; margin: 0; padding: 0; display:flex; justify-content: center; }
.footer-social ul li {margin:0 10px 10px 10px;}
.footer-social ul li a {}
.footer-social ul li figure {width: 35px;} 
.copyright {text-align: center; padding:20px 0;border-top:#000 solid 1px; } 

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  .footer-contact-details { padding-top:50px; }
  .footer-social {padding-bottom: 50px;}
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}



/* section: Pendaftaran ***********************************************************************************/
#section-pendaftaran {padding-bottom: 10px;}
.pendaftaran-wrapper { background: #fff; border-radius: 40px; padding:52px 40px 20px; margin: auto; width: 90%; max-width: 800px; position:relative; color: #001133;}

.pendaftaran-wrapper p:first-child {margin-top: 0; margin-bottom: 30px;}
.pendaftaran-wrapper form {}
.pendaftaran-wrapper form > div {display: flex; align-items: center; justify-content: center; margin-bottom: 15px;}
.pendaftaran-wrapper form > div:last-child {margin-bottom: 0;}
.pendaftaran-wrapper form label {font-weight:500; font-size: 17px; width: 150px; text-align: left;}
.pendaftaran-wrapper form input[type=text],
.pendaftaran-wrapper form select {padding: 10px; font-size: 17px; width: 400px; border-radius: 0; border:1.5px solid #000; color:#000; }
.pendaftaran-wrapper form button[type=submit] {font-size: 17px; margin-top: 20px;}
.pendaftaran-wrapper form button[type=submit]:hover {}

@media only screen and (max-width: 1199px) {
  .pendaftaran-wrapper { border-radius: 25px; padding:50px 30px; max-width: 700px; }
}
@media only screen and (max-width: 1023px) {
  #section-pendaftaran {padding-bottom: 50px;}
  .pendaftaran-wrapper { border-radius: 20px; padding:40px 20px; max-width: 500px; }
  .pendaftaran-wrapper form label {width: 150px; font-size: 15px; }
  .pendaftaran-wrapper form input[type=text], 
  .pendaftaran-wrapper form select {width: 270px; font-size: 15px; }
}
@media only screen and (max-width: 767px) {
  #section-pendaftaran {padding-bottom: 60px;}
  .pendaftaran-wrapper { border-radius: 15px; padding:30px; }
  .pendaftaran-wrapper { width: 90%; max-width:420px; }
  .pendaftaran-wrapper form > div {flex-direction: column; align-items: flex-start;}
  .pendaftaran-wrapper form label {width: 100%; padding-bottom:3px;  font-size: 14px; }
  .pendaftaran-wrapper form input[type=text],
  .pendaftaran-wrapper form select {width: 100%; font-size: 14px; }
  .pendaftaran-wrapper form button[type=submit] {font-size: 14px; margin-top: 15px;}
}
@media only screen and (max-width: 479px) {
  #section-pendaftaran {}
  .pendaftaran-wrapper {width: 100%; border-radius: 15px;}
  .pendaftaran-wrapper .pendaftaran-content-wrap {padding: 30px;}
}




/* modal *********************************************************************************************/
.modal {
  display: none; position: fixed; z-index: 9999; padding-top: 100px; 
  left: 0;top: 0; width: 100%; height: 100%; 
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.75); /*transition: all .15s linear;*/
}

.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 50%;}

.modal-close {color: #fff; float: right; font-size: 15px; font-weight: bold;}
.modal-close:hover,
.modal-close:focus {color: #000; text-decoration: none; cursor: pointer;}

.read-more {cursor: pointer;}


@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  .footer-contact-details { padding-top:50px; }
  .footer-social {padding-bottom: 50px;}
}
@media only screen and (max-width: 767px) {
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 96%;}
}
@media only screen and (max-width: 479px) {
}



/*xxxxxxxxxxxx  whatsapp button xxxxxxxxxxxxxxxxxx*/

#nta-wa-gdpr {
  vertical-align: text-top !important;
  padding: 0 !important;
  margin: 0 !important;
}
.nta-wa-gdpr {
  font-size: 11px;
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  border-radius: 4px;
}
.nta-wa-gdpr a {
  text-decoration: underline;
  color: inherit;
}
.pointer-disable {
  pointer-events: none;
}
.nta-woo-products-button:before,
.nta-woo-products-button:after {
  content: "";
  display: block;
  clear: both;
}
.wa__button {
  border-bottom: none !important;
}
.wa__btn_w_img:hover {
  text-decoration: none;
}
.wa__button,
.wa__btn_popup,
.wa__button *,
.wa__btn_popup *,
.wa__btn_popup :before,
.wa__button :before,
.wa__button :after,
.wa__btn_popup :after,
.wa__popup_chat_box,
.wa__popup_chat_box *,
.wa__popup_chat_box :before,
.wa__popup_chat_box :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wa__button {
  position: absolute;
  width: 300px;
  min-height: 64px;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-box-shadow: 0px 4px 8px 1px rgba(32, 32, 37, 0.09);
  -moz-box-shadow: 0px 4px 8px 1px rgba(32, 32, 37, 0.09);
  box-shadow: 0px 4px 8px 1px rgba(32, 32, 37, 0.09);
}
.wa__btn_txt {
  display: inline-block;
  font-size: 12px;
  line-height: 1.33em;
}
.wa__btn_w_icon .wa__btn_txt {
  padding: 16px 20px 15px 71px;
}
.wa__button_text_only .wa__btn_txt,
.wa__r_button.wa__btn_w_img.wa__button_text_only .wa__btn_txt,
.wa__sq_button.wa__btn_w_img.wa__button_text_only .wa__btn_txt {
  padding-top: 25px;
  padding-bottom: 24px;
}
.wa__btn_w_icon .wa__btn_txt .wa__btn_title {
  padding-left: 2px;
  font-size: 14px;
}
.wa__cs_info {
  margin-bottom: 2px;
}
.wa__btn_status {
  color: #f5a623;
  font-size: 9px;
  padding: 2px 0 0;
  font-weight: 700;
}
.wa__cs_info .wa__cs_name,
.wa__cs_info .wa__cs_status {
  display: inline-block;
}
.wa__cs_info .wa__cs_name {
  font-size: 12px;
  line-height: 1.36em;
}
.wa__stt_online .wa__cs_info .wa__cs_name {
  color: #d5f0d9;
}
.wa__stt_offline .wa__cs_info .wa__cs_name {
  color: #76787d;
}
.wa__cs_info .wa__cs_status {
  width: 36px;
  height: 14px;
  margin-left: 3px;
  padding: 1px;
  font-size: 9px;
  line-height: 1.34em;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.98);
  position: relative;
  top: -1px;
  left: 0px;
  text-align: center;
}
.wa__stt_online .wa__cs_info .wa__cs_status {
  background: #62c971;
}
.wa__stt_offline .wa__cs_info .wa__cs_status {
  background: #b9bbbe;
}
.wa__stt_online {
  background: #2db742;
  cursor: pointer;
  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  backface-visibility: hidden;
  will-change: transform;
}
.wa__stt_online .wa__btn_txt {
  position: relative;
  z-index: 4;
}
.wa__r_button.wa__stt_online:before {
  border-radius: 50vh;
}
.wa__sq_button.wa__stt_online:before {
  border-radius: 5px;
}
.wa__stt_online:before {
  content: "";
  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  will-change: opacity;
}
.wa__button.wa__stt_online:focus,
.wa__button.wa__stt_online:active,
.wa__button.wa__stt_online:hover {
  box-shadow: 0px 4px 8px 1px rgba(32, 32, 37, 0.19);
  -webkit-transform: translate(0, -3px);
  -moz-transform: translate(0, -3px);
  -ms-transform: translate(0, -3px);
  transform: translate(0, -3px);
}
.wa__button.wa__stt_online:focus:before,
.wa__button.wa__stt_online:active:before,
.wa__button.wa__stt_online:hover:before {
  opacity: 1;
}
.wa__stt_online.wa__btn_w_icon .wa__btn_icon img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  transition: 0.2s ease all;
}
.wa__stt_offline {
  background: #ebedf0;
  color: #595b60;
  box-shadow: none;
  cursor: initial;
}
.wa__stt_offline.wa__btn_w_icon .wa__btn_txt {
  padding: 8px 20px 6px 71px;
}
.wa__stt_offline.wa__r_button.wa__btn_w_img .wa__btn_txt {
  padding: 8px 20px 8px 100px;
}
.wa__stt_offline.wa__sq_button.wa__btn_w_img .wa__btn_txt {
  padding: 8px 20px 8px 70px;
}
.wa__btn_w_icon .wa__btn_icon {
  position: absolute;
  top: 50%;
  left: 16px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.wa__btn_w_icon .wa__btn_icon img {
  width: 41px;
  height: 69px;
}
.wa__btn_w_img {
  position: relative;
  width: 300px;
  margin: 20px 0 20px;
}
.wa__btn_w_img .wa__cs_img {
  position: absolute;
  top: 50%;
  left: 0px;
  text-align: center;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.wa__cs_img_wrap {
  width: 56px;
  height: 56px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #000;
  position: relative;
  overflow: hidden;
}
.wa__btn_w_img .wa__cs_img img {
  max-width: 100%;
  height: auto;
  -webkit-transition: 0.2s ease transform;
  -moz-transition: 0.2s ease transform;
  transition: 0.2s ease transform;
}
.wa__btn_w_img .wa__cs_img:after {
  content: "";
  background: #fff
    url("wa.png") center center
    no-repeat;
  background-size: 21px;
  display: block;
  width: 27px;
  height: 27px;
  position: absolute;
  top: 20px;
  right: -14px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(39, 38, 38, 0.3);
  -moz-box-shadow: 0px 4px 6px 0px rgba(39, 38, 38, 0.3);
  box-shadow: 0px 4px 6px 0px rgba(39, 38, 38, 0.3);
}
.wa__stt_offline.wa__btn_w_img .wa__cs_img:after {
  content: "";
  background: #fff
    url("wa.png") center center
    no-repeat;
  background-size: 21px;
  display: block;
  width: 27px;
  height: 27px;
  position: absolute;
  top: 20px;
  right: -14px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(39, 38, 38, 0.3);
  -moz-box-shadow: 0px 4px 6px 0px rgba(39, 38, 38, 0.3);
  box-shadow: 0px 4px 6px 0px rgba(39, 38, 38, 0.3);
}
.wa__btn_w_img .wa__btn_txt {
  padding: 14px 20px 12px 103px;
}
.wa__r_button {
  border-radius: 50vh;
}
.wa__sq_button {
  border-radius: 5px;
}
.wa__sq_button.wa__btn_w_img {
  width: 270px;
  margin-left: 30px;
}
.wa__r_button.wa__btn_w_img .wa__cs_img {
  left: -5px;
}
.wa__sq_button.wa__btn_w_img .wa__cs_img {
  left: -35px;
}
.wa__sq_button.wa__btn_w_img .wa__btn_txt {
  padding: 10px 20px 10px 70px;
  display: table-cell;
  vertical-align: middle;
  height: 66px;
}
.wa__btn_txt .wa__btn_title {
}
.wa__r_button.wa__btn_w_img .wa__btn_txt {
  padding: 8px 20px 8px 100px;
  display: table-cell;
  vertical-align: middle;
  height: 66px;
}
.wa__r_button.wa__btn_w_img .wa__cs_info .wa__cs_status {
  margin-left: 3px;
}
.wa__popup_chat_box {
  position: fixed;
  bottom: 10rem;
  right: 5rem;
  width: 350px;
  max-width: calc(100% - 50px);
  border-radius: 1.5rem;
  webkit-box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  -webkit-transition: 1s ease all;
  -moz-transition: 1s ease all;
  transition: 1s ease all;
  will-change: transform, visibility, opacity;
  visibility: hidden;
  overflow: hidden;
  z-index: 9999;
  opacity: 0;
}
.wa__popup_chat_box:hover,
.wa__popup_chat_box:focus,
.wa__popup_chat_box:active {
  -webkit-box-shadow: 0px 10px 10px 4px rgba(32, 32, 37, 0.23);
  -moz-box-shadow: 0px 10px 10px 4px rgba(32, 32, 37, 0.23);
  box-shadow: 0px 10px 10px 4px rgba(32, 32, 37, 0.23);
}
.wa__popup_chat_box.wa__active {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}
.wa__popup_chat_box .wa__popup_heading {
  position: relative;
  padding: 15px 43px 17px 74px;
  color: #fff;
  background: rgb(86, 166, 30);
  background: -moz-linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(2, 35, 116, 1) 0%,
    rgba(26, 56, 190, 1) 100%
  );
}
.wa__popup_chat_box .wa__popup_heading_sm {
  padding: 12px 15px 17px 74px;
}
.wa__popup_chat_box .wa__popup_heading:before {
  content: "";
  background: url("wa.png")
    center top no-repeat;
  background-size: 33px;
  filter: invert(1) grayscale(100%) brightness(2);
  display: block;
  width: 55px;
  height: 33px;
  position: absolute;
  top: 20px;
  left: 12px;
}
.wa__popup_chat_box .wa__popup_heading_sm:before {
  top: 19px;
  left: 11px;
}
.wa__popup_chat_box .wa__popup_heading .wa__popup_title {
  padding-top: 2px;
  padding-bottom: 3;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
}
.wa__popup_chat_box .wa__popup_heading .wa__popup_intro {
  padding-top: 4px;
  font-size: 12px;
  line-height: 20px;
}
.wa__popup_chat_box .wa__popup_heading_sm .wa__popup_intro {
  padding-top: 0px;
}
.wa__popup_chat_box .wa__popup_heading .wa__popup_intro a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.wa__popup_chat_box .wa__popup_heading .wa__popup_intro a:hover,
.wa__popup_chat_box .wa__popup_heading .wa__popup_intro a:focus,
.wa__popup_chat_box .wa__popup_heading .wa__popup_intro a:active {
  text-decoration: underline;
}
.wa__popup_chat_box .wa__popup_notice {
  font-size: 12px;
  font-weight: 500;
  padding: 0 3px;
  color: #606060;
}
.wa__popup_chat_box .wa__popup_content {
  background: #fff;
  padding: 13px 20px 21px 19px;
  text-align: center;
}
.wa__popup_chat_box .wa__popup_content_left {
  text-align: left;
}
.wa__popup_chat_box .wa__popup_avatar {
  position: absolute;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 10px;
  top: 9px;
}
.wa__popup_chat_box .wa__popup_avatar.nta-default-avt {
  -webkit-border-radius: unset;
  -moz-border-radius: unset;
  border-radius: unset;
}
.wa__popup_chat_box .wa__stt {
  padding: 13px 40px 12px 74px;
  position: relative;
  text-decoration: none;
  display: table;
  width: 100%;
  background: #f5f7f9;
  border-radius: 7px;
}
.wa__popup_chat_box .wa__stt:after {
  content: "";
  background: url("wa.png") 0 0
    no-repeat;
  position: absolute;
  right: 14px;
  top: 26px;
  width: 20px;
  height: 20px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}
.wa__popup_chat_box .wa__stt.wa__stt_offline:after {
  background-image: url("wa.png");
}
.wa__popup_chat_box .wa__stt.wa__stt_online {
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  transition: 0.2s ease all;
}
.wa__popup_chat_box .wa__stt.wa__stt_online:hover,
.wa__popup_chat_box .wa__stt.wa__stt_online:active,
.wa__popup_chat_box .wa__stt.wa__stt_online:focus {
  background: #fff;
  -webkit-box-shadow: 0px 7px 15px 1px rgba(55, 62, 70, 0.07);
  -moz-box-shadow: 0px 7px 15px 1px rgba(55, 62, 70, 0.07);
  box-shadow: 0px 7px 15px 1px rgba(55, 62, 70, 0.07);
}
.wa__popup_content_list .wa__popup_content_item {
  margin: 14px 0 0;
  -webkit-transform: translate(0, 20px);
  -moz-transform: translate(0, 20px);
  transform: translate(0, 20px);
  will-change: opacity, transform;
  opacity: 0;
}
.wa__popup_chat_box.wa__pending
  .wa__popup_content_list
  .wa__popup_content_item {
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  transition: 0.4s ease all;
  -webkit-transition-delay: 2.1s;
  -moz-transition-delay: 2.1s;
  transition-delay: 2.1s;
}
.wa__popup_chat_box.wa__pending
  .wa__popup_content_list
  .wa__popup_content_item:nth-child(1) {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.wa__popup_chat_box.wa__pending
  .wa__popup_content_list
  .wa__popup_content_item:nth-child(2) {
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.wa__popup_chat_box.wa__pending
  .wa__popup_content_list
  .wa__popup_content_item:nth-child(3) {
  -webkit-transition-delay: 0.7s;
  -moz-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.wa__popup_chat_box.wa__lauch .wa__popup_content_list .wa__popup_content_item {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
.wa__popup_content_list .wa__popup_content_item .wa__member_name {
  font-size: 16px;
  color: #363c47;
  line-height: 1.188em !important;
}
.wa__popup_content_list .wa__popup_content_item .wa__member_duty {
  font-size: 12px;
  color: #333;
  padding: 2px 0 0;
  line-height: 1.125em !important;
}
.wa__popup_content_list .wa__popup_content_item .wa__member_status {
  color: #f5a623;
  font-size: 10px;
  padding: 5px 0 0;
  line-height: 1.125em !important;
}
.wa__popup_content_list .wa__popup_content_item .wa__popup_txt {
  display: table-cell;
  vertical-align: middle;
  min-height: 48px;
  height: 48px;
}
.wa__popup_content_list .wa__popup_content_item .wa__stt_offline {
  border-left-color: #c0c5ca;
}
.wa__popup_avt_list {
  font-size: 0;
  margin: 7px 0 24px;
}
.wa__popup_avt_list .wa__popup_avt_item {
  display: inline-block;
  position: relative;
  width: 46px;
}
.wa__popup_avt_list .wa__popup_avt_img {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid #fff;
  left: -7px;
}
.wa__popup_call_btn {
  background: #2db742;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 275px;
  max-width: 100%;
  font-size: 16px;
  padding: 14px 10px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  margin: 25px 0 15px;
  -webkit-box-shadow: 0px 8px 17px 2px rgba(13, 15, 18, 0.2);
  -moz-box-shadow: 0px 8px 17px 2px rgba(13, 15, 18, 0.2);
  box-shadow: 0px 8px 17px 2px rgba(13, 15, 18, 0.2);
}
.wa__popup_call_btn.wa__popup_call_btn_lg:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  background: url("wa.png") 0 0
    no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  vertical-align: top;
  top: 0px;
  margin-right: -19px;
  left: -31px;
  -webkit-transition: 0.2s ease background-image;
  -moz-transition: 0.2s ease background-image;
  transition: 0.2s ease background-image;
}
.wa__popup_call_btn.wa__popup_call_btn_lg:hover:before,
.wa__popup_call_btn.wa__popup_call_btn_lg:focus:before,
.wa__popup_call_btn.wa__popup_call_btn_lg:active:before {
  background-image: url("wa.png");
}
.wa__popup_chat_box_gray {
  border-radius: 2px 2px 8px 8px;
}
.wa__popup_chat_box_gray .wa__popup_heading_gray {
  background: #f8f8f8;
  border-top: 3px solid #2db742;
  color: #868c9a;
  font-weight: 500;
}
.wa__popup_chat_box_gray .wa__popup_heading_gray .wa__popup_title {
  color: #595b60;
}

.wa__popup_chat_box_gray .wa__popup_heading_gray:before {
  content: "";
  background: url("wa.png")
    center top no-repeat;
  background-size: 33px;
  display: block;
  width: 55px;
  height: 33px;
  position: absolute;
  top: 20px;
  left: 12px;
}
.wa__popup_chat_box_gray .wa__popup_heading_gray .wa__popup_intro a {
  color: #595b60;
}
.wa__popup_chat_box_ct {
  width: 384px;
  text-align: center;
}
.wa__popup_chat_box_ct .wa__popup_heading_ct {
  text-align: center;
  padding: 18px 0 18px;
}
.wa__popup_chat_box_ct .wa__popup_heading_ct:before {
  content: "";
  background: url("wa.png")
    center top no-repeat;
  background-size: 30px;
  display: block;
  width: 30px;
  height: 31px;
  position: absolute;
  top: 15px;
  left: 72px;
}
.wa__popup_chat_box_ct .wa__popup_heading_ct .wa__popup_title {
  padding-left: 22px;
  padding-bottom: 14px;
}
.wa__popup_chat_box_ct .wa__popup_heading_ct .wa__popup_intro {
  margin-top: -5px;
  line-height: 12px;
}
.wa__popup_chat_box_ct .wa__popup_ct_avt_list:after {
  content: "";
  clear: both;
  display: block;
}
.wa__popup_chat_box_ct .wa__popup_ct_content {
  background: #fff;
  padding: 0 0 14px;
}
.wa__popup_chat_box_ct .wa__popup_ct_content .wa__popup_notice {
  padding-top: 18px;
  padding-bottom: 15px;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item {
  width: 33%;
  float: left;
  font-size: 10px;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item a {
  text-decoration: none;
  color: #989b9f;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item .wa__popup_ct_txt {
  padding-top: 8px;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item .wa__member_name {
  color: #363c47;
  font-size: 13px;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item .wa__member_duty {
  color: #989b9f;
  padding: 3px 0 0;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item .wa__member_stt_online {
  color: #2db742;
  font-size: 9px;
  line-height: 12px;
  display: inline-block;
  padding: 3px 0 0 16px;
  background: url("wa.png") 0
    3px no-repeat;
  background-size: 12px auto;
  -webkit-background-size: 12px auto;
  -moz-background-size: 12px auto;
}
.wa__popup_chat_box_ct .wa__popup_ct_content_item .wa__member_stt_offline {
  color: #f5a623;
  font-size: 9px;
  line-height: 12px;
  padding: 2px 0 0;
}
.wa__popup_chat_box_ct .wa__popup_ct_avatar img {
  border-radius: 50%;
}
.wa__popup_chat_box_ct .wa__popup_ct_call_btn {
  width: 97px;
  font-size: 11px;
  padding: 9px 10px 11px;
  margin: 15px 0 15px;
}
.wa__btn_popup {
  position: fixed;
  cursor: pointer;
  bottom: 3rem;
  right: 5rem;
  z-index: 9999;
}
.wa__btn_popup .wa__btn_popup_icon {
  width: 56px;
  height: 56px;
  background: rgb(86, 166, 30);
  background: -moz-linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  webkit-box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}
.wa__btn_popup .wa__btn_popup_icon:before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: transparent
    url("wa.png") center center
    no-repeat;
  background-size: 30px auto;
  -webkit-background-size: 30px auto;
  -moz-background-size: 30px auto;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  transition: 0.4s ease all;
  filter: invert(1) grayscale(100%) brightness(2);
}
.wa__btn_popup .wa__btn_popup_icon:after {
  content: "";
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: transparent
    url("wa-close.png") center center
    no-repeat;
  background-size: 14px auto;
  -webkit-background-size: 14px auto;
  -moz-background-size: 14px auto;



  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  -webkit-transform: scale(0) rotate(-360deg);
  -moz-transform: scale(0) rotate(-360deg);
  -ms-transform: scale(0) rotate(-360deg);
  transform: scale(0) rotate(-360deg);
  filter: invert(1) grayscale(100%) brightness(2);
}
.wa__btn_popup.wa__active .wa__btn_popup_icon:before {
  opacity: 0;
  -webkit-transform: scale(0) rotate(360deg);
  -moz-transform: scale(0) rotate(360deg);
  -ms-transform: scale(0) rotate(360deg);
  transform: scale(0) rotate(360deg);
}
.wa__btn_popup.wa__active .wa__btn_popup_icon:after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
.wa__btn_popup .wa__btn_popup_txt {
  position: absolute;
  width: 180px;
  right: 100%;
  background: rgb(86, 166, 30);
  background: -moz-linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(86, 166, 30, 1) 0%,
    rgba(105, 202, 59, 1) 100%
  );
  background: linear-gradient(
    0deg,
    rgba(2, 35, 116, 1) 0%,
    rgba(26, 56, 190, 1) 100%
  );
  font-size: 14px;
  text-align: left;
  color: #fff;
  top: 0;
  padding: 12px 1rem 12px 1rem;
  margin-right: 15px;
  border-radius: 1.5rem;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  transition: 0.4s ease all;
  webkit-box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 16px -16px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}
.wa__btn_popup .wa__btn_popup_txt span {
  display: block;
}
.wa__btn_popup.wa__active .wa__btn_popup_txt {
  -webkit-transform: translate(0, 15px);
  -moz-transform: translate(0, 15px);
  -ms-transform: translate(0, 15px);
  transform: translate(0, 15px);
  opacity: 0;
  visibility: hidden;
}

@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
.wa__popup_chat_box .wa__popup_notice {
  font-size: 12px;
  font-weight: 500;
  padding: 0 3px;
  color: #606060;
}

.wa__popup_chat_box.wa__active {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  left:25px;
}
}

/*xxxxxxxxxxxx  whatsapp button xxxxxxxxxxxxxxxxxx*/