* { box-sizing: border-box;}

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

section {overflow: hidden;}

@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) {
}

.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: #034747; margin: 0; font-family: "Roboto", sans-serif; color: #fff; 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:#fff; text-align: center; line-height: 1.1em; margin-top: 0;}
h1 {font-size: 50px; text-align: center; margin-bottom: 20px; margin-top: 100px; text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3); }
h2 {font-size: 50px; line-height: 1.15em; margin-bottom: 40px;}
h3 {font-size: 26px; margin-bottom: 30px;}
h4 {font-size: 16px; margin-bottom: 20px;}
h5 {font-size: 16px; margin-bottom: 20px; color:#fff; text-align:left;}

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

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) {
  h1 {font-size: 73px;}
  h2 {font-size: 48px;}
  h3 {font-size: 26px;}
}
@media only screen and (max-width: 1023px) {
  h1 {font-size: 65px;}
  h2 {font-size: 40px;}
  h3 {font-size: 23px;}
}
@media only screen and (max-width: 767px) {
  h1 {font-size: 55px;}
  h2 {font-size: 30px;}
  h3 {font-size: 18px;}
}
@media only screen and (max-width: 479px) {
  h1 {font-size: 8vw;}
}


#section-thankyou {background: #000;}
#section-thankyou h3 {text-align: center; margin:40px 20px; }


/* header *********************************************************************************************/
header {background:#dbdbdb; }
header .container {position: relative;}

.header-wrapper { display: flex; justify-content: space-between; align-items: center; transition: all .15s linear; padding-top:9px; padding-bottom: 11px;}
.logo {width: 350px;}
.navigation-top { background: #fff; padding: 12px; border-radius: 20em;}
.navigation-top.mobile-menu-active {background-color: #0E7ABD; 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: 500; text-transform: uppercase; text-decoration: none; color: #000; display: inline-block; padding: 3px; margin:3px 12px; transition: all .15s linear; letter-spacing: 0.015em; font-size: 13px;}
.navigation-top nav ul li a:hover {color: #079c9c;}
.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: #000; text-align: right; display: none; padding: 8px 13px; position: absolute; z-index: 100; right: 20px; top: 73px;}
.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 {}

.navigation-top nav ul li.language-link a {color: #fff; background-color: #ea1149; border-radius: 5px; padding: 3px 10px;}
.navigation-top nav ul li.language-link a:hover {color: #fff; background-color: #000;} 
.navigation-dropdown nav ul li.language-link a {color: #fff; background-color: #ea1149; border-radius: 5px; display: inline-block; padding: 5px 10px; margin-right: 10px; margin-top: 7px;}
.navigation-dropdown nav ul li.language-link a:hover {color: #fff; background-color: #bb3054;}


@media only screen and (max-width: 1279px) {
  .logo {width: 70px;}
  .navigation-top { padding: 8px 0 8px 13px;}
  .navigation-top nav ul.desktop {display: none;}
  .navigation-top nav ul.mobile {display: flex;}
}
@media only screen and (max-width: 1023px) {
  .logo {width: 230px;}
}
@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: Intro *************************************************************************************/
#section-intro {position: relative; text-align:center; overflow:hidden; padding-bottom: 80px;}
#section-intro:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.35; background-image: url('images/bg-1.webp'); background-repeat: no-repeat; background-position: top center; background-size: 100% auto;}
#section-intro .container {position: relative;}
#section-intro h2 {font-weight: 400; font-family: "Roboto", sans-serif; text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3); font-size: 25px;}
#section-intro h1 span, #section-intro h2 span {display: block;}


@media only screen and (max-width: 1199px) {
  #section-intro { padding-bottom: 60px;}
  #section-intro h2 {font-size: 30px;}
}
@media only screen and (max-width: 1023px) {
  #section-intro { padding-bottom: 50px;}
  #section-intro h2 {font-size: 25px;}
}
@media only screen and (max-width: 767px) {
  #section-intro h2 {font-size: 22px;}
}
@media only screen and (max-width: 479px) {
  #section-intro h2 {font-size: 16px;}
}

/* section: Kelayakan *************************************************************************************/
#section-kelayakan {padding-bottom: 80px;}

.kelayakan-wrapper {display: flex; justify-content: center;}
.kelayakan-wrapper > div {width: 25%; margin-left:5%; margin-right: 5%;}
.kelayakan-wrapper > div .kelayakan-icon {margin-bottom: 10px;}
.kelayakan-wrapper > div .kelayakan-icon img {height: 200px; width: auto; margin: auto;}
#section-kelayakan p {text-align:center;}
.akademik {display: flex; justify-content: center; align-items: center;}
.akademik > div {margin-bottom: 8px;}
.akademik > div:first-child {width: 80px;}
.akademik > div:first-child img { width:65px;}
.akademik > div:last-child {width: calc(100% - 80px);}

@media only screen and (max-width: 1199px) {
  #section-kelayakan {padding-bottom: 60px;}
  .kelayakan-wrapper > div .kelayakan-icon img {height: 160px;}
  .kelayakan-wrapper > div h3 {margin-bottom: 15px;}
}
@media only screen and (max-width: 1023px) {
  #section-kelayakan {padding-bottom: 50px;}
  .kelayakan-wrapper > div .kelayakan-icon img {height: 130px;}
  .kelayakan-wrapper > div h3 {margin-bottom: 10px;}
}
@media only screen and (max-width: 767px) {
  .kelayakan-wrapper {flex-direction: column;}
  .kelayakan-wrapper > div {width: unset; margin: unset; margin-bottom:20px;}
  .kelayakan-wrapper > div .kelayakan-icon img {height: 100px;}
  .akademik {width: 300px; margin: auto;}
  .akademik > div:first-child {width: 65px;}
  .akademik > div:first-child img { width:55px;}
  .akademik > div:last-child {width: calc(100% - 65px);}
}
@media only screen and (max-width: 479px) {
  .akademik {width: 100%; max-width:320px; }
}

/* section: Tahukah Anda *************************************************************************************/
#section-tahukah {padding-bottom: 80px;}

.tahukah-wrap-1 {display: flex; justify-content: space-between; align-items: center; width: 80%; margin: 0 auto 40px auto;}
.tahukah-wrap-1 > div {position: relative; }
.tahukah-wrap-1 > div:first-child {width: 38%;}
.tahukah-wrap-1 > div:first-child p {width: 70%;}
.tahukah-wrap-1 > div:last-child {width: 44%;}
.tahukah-1b {position: absolute; right: -28%; width: 57%; top: 45%;}
.tahukah-wrap-1 .pic {margin-bottom: 20px;}

.tahukah-wrap-2 {display: flex; justify-content: center; align-items: center; background-color:rgba(0,0,0,0.1); border-radius: 30px; padding:30px 80px; width:65%; margin:0 auto 30px auto;} 
.tahukah-wrap-2 > div:first-child {width: 80px;}
.tahukah-wrap-2 > div:first-child img { width:65px;}
.tahukah-wrap-2 > div:last-child { text-align: center; width: calc(100% - 80px);}

.tahukah-wrap-3 {width: 100%; max-width: 480px; margin: auto;}
.tahukah-point {display: flex; justify-content: center; align-items: center; margin-bottom: 7px;}
.tahukah-point > div:first-child {width: 40px;}
.tahukah-point > div:first-child img { width:30px;}
.tahukah-point > div:last-child { text-align: left; width: calc(100% - 40px);}

@media only screen and (max-width: 1199px) {
  #section-tahukah {padding-bottom: 60px;}
  .tahukah-wrap-2 {border-radius: 25px; padding:25px 70px; } 
}
@media only screen and (max-width: 1023px) {
  #section-tahukah {padding-bottom: 50px;}
  .tahukah-wrap-2 {border-radius: 20px; padding:20px 60px; width:90%; max-width: 750px; margin:0 auto 20px auto;} 
}
@media only screen and (max-width: 767px) {

  .tahukah-wrap-1 { flex-direction: column; width: unset; width: 350px; margin: 0 auto 30px auto;}
  .tahukah-wrap-1 > div {position: relative; }
  .tahukah-wrap-1 > div:first-child {width: unset; margin-bottom:30px; }
  .tahukah-wrap-1 > div:first-child .pic {width: 250px;}
  .tahukah-wrap-1 > div:first-child p {width: unset; margin-right: 122px;}
  .tahukah-wrap-1 > div:last-child {width: unset;}
  .tahukah-wrap-1 > div:last-child .pic {width: 300px; margin: auto;}
  .tahukah-1b {position: absolute; right: 0; width: 160px; top: 109px;}
  .tahukah-wrap-1 .pic {margin-bottom: 10px;}

  .tahukah-wrap-2 {border-radius: 20px; padding:15px 30px; width:100%; margin:0 auto 15px auto;} 
  .tahukah-wrap-2 > div:first-child {width: 65px;}
  .tahukah-wrap-2 > div:first-child img { width:55px;}
  .tahukah-wrap-2 > div:last-child { width: calc(100% - 65px);}

  .tahukah-wrap-3 {max-width: 350px; }
  .tahukah-point {margin-bottom: 7px;}
  .tahukah-point > div:first-child {width: 30px;}
  .tahukah-point > div:first-child img { width:20px;}
  .tahukah-point > div:last-child { width: calc(100% - 30px);}
}
@media only screen and (max-width: 479px) {
  .tahukah-wrap-1 {width: 280px}
  .tahukah-wrap-1 > div:first-child .pic {width: 200px;}
  .tahukah-wrap-1 > div:first-child p { margin-right: 105px;} 
  .tahukah-wrap-1 > div:last-child .pic {width: 260px;}
  .tahukah-1b { right: 7px; width: 131px; top: 93px;}
}


/* section: Mengapa SG *************************************************************************************/
#section-mengapa {position: relative; text-align:center; overflow:hidden; padding-bottom: 450px;}
#section-mengapa:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; background-image: url('images/bg-2.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;}
#section-mengapa .container {position: relative;}

.mengapa-wrapper {position: relative; z-index: 2;}
.mengapa-wrapper .mengapa-content-wrap {text-align:center; position:absolute; width:100%; } 
.mengapa-wrapper .mengapa-content-wrap figure {height: auto; margin: auto; }
.mengapa-wrapper .mengapa-content-wrap article > div {position: absolute; width: 20%; }
.mengapa-wrapper .pic {display: flex; justify-content: center; align-items: flex-end; margin-bottom: 15px; }
.mengapa-1 { left:40%; }
.mengapa-2 { top:170px; left:18%; }
.mengapa-3 { top:170px; right:18%; }
.mengapa-4 { top:410px; left:6%; }
.mengapa-5 { top:410px; right:6%; }
.mengapa-6 { top:670px; }
.mengapa-7 { top:670px; right:0; }
.mengapa-8 { top:920px; left:11%; }
.mengapa-9 { top:920px; right:11%; }
.mengapa-10 { top:1170px; left:28%; }
.mengapa-11 { top:1170px; right:28%; }

.mengapa-1 .pic figure {width: 140px;}
.mengapa-2 .pic figure {width: 170px;}
.mengapa-3 .pic figure {width: 230px;}
.mengapa-4 .pic figure {width: 190px;}
.mengapa-5 .pic figure {width: 130px;}
.mengapa-6 .pic figure {width: 180px;}
.mengapa-7 .pic figure {width: 150px;}
.mengapa-8 .pic figure {width: 160px;}
.mengapa-9 .pic figure {width: 190px;}
.mengapa-10 .pic figure {width: 195px;}
.mengapa-11 .pic figure {width: 210px;}

.mengapa-sg-wrapper .mengapa-sg {position: relative; width: 70%; margin: 270px auto 300px auto;}
.mengapa-sg-wrapper .mengapa-sg h3 {margin-bottom: 0;}

.award-wrapper {width: 100%; max-width: 600px; margin: auto;}

@media only screen and (max-width: 1299px) {
  .mengapa-10 { top:1120px; left:26%; }
  .mengapa-11 { top:1120px; right:26%; }
  .mengapa-sg-wrapper .mengapa-sg {position: relative; width: 70%; margin: 260px auto 380px auto;}
}
@media only screen and (max-width: 1199px) {
  .mengapa-1 { left:40%; }
  .mengapa-2 { top:80px; left:18%; }
  .mengapa-3 { top:80px; right:18%; }
  .mengapa-4 { top:320px; left:6%; }
  .mengapa-5 { top:320px; right:6%; }
  .mengapa-6 { top:550px; }
  .mengapa-7 { top:550px; right:0; }
  .mengapa-8 { top:800px; left:11%; }
  .mengapa-9 { top:800px; right:11%; }
  .mengapa-10 { top:1000px; left:27%; }
  .mengapa-11 { top:1000px; right:27%; }

  .mengapa-1 .pic figure {width: 130px;}
  .mengapa-2 .pic figure {width: 160px;}
  .mengapa-3 .pic figure {width: 220px;}
  .mengapa-4 .pic figure {width: 180px;}
  .mengapa-5 .pic figure {width: 120px;}
  .mengapa-6 .pic figure {width: 170px;}
  .mengapa-7 .pic figure {width: 140px;}
  .mengapa-8 .pic figure {width: 150px;}
  .mengapa-9 .pic figure {width: 180px;}
  .mengapa-10 .pic figure {width: 185px;}
  .mengapa-11 .pic figure {width: 200px;}

  .mengapa-sg-wrapper .mengapa-sg {position: relative; width: 70%; margin: 260px auto 360px auto;}
}
@media only screen and (max-width: 1023px) {
  #section-mengapa {padding-bottom: 300px;}
  .mengapa-wrapper .mengapa-content-wrap {position: unset;}
  .mengapa-wrapper .mengapa-content-wrap article {display: flex; justify-content: center; flex-wrap: wrap;}
  .mengapa-wrapper .mengapa-content-wrap article > div {position: unset; width:calc(25% - 40px); margin:0 20px 40px 20px;}

  .mengapa-wrapper .mengapa-content-wrap article > div figure {width: auto; }
  .mengapa-wrapper .mengapa-content-wrap article > div figure img {width: auto; height: 90px;}

  .mengapa-sg-wrapper .mengapa-sg {position: unset; margin: -70px auto -50px auto;}
}
@media only screen and (max-width: 767px) {
  #section-mengapa {padding-bottom: 200px;}
  .mengapa-wrapper .mengapa-content-wrap article > div { width:calc(33% - 30px); margin:0 15px 30px 15px;}
  .mengapa-wrapper .mengapa-content-wrap article > div figure img { height: 80px;}
}
@media only screen and (max-width: 479px) {
  #section-mengapa {padding-bottom: 150px;}
  .mengapa-wrapper .mengapa-content-wrap article > div { width:calc(50% - 30px); margin:0 10px 20px 10px;}
  .mengapa-wrapper .mengapa-content-wrap article > div figure img { height: 70px;}
  .mengapa-sg-wrapper .mengapa-sg { width: 70%; margin: -30px auto -30px auto;}
}

/* section: Program *************************************************************************************/
#section-program {margin-top: -220px; padding-bottom: 80px;}
#section-program h2 span {display: block;}

.program-wrap {display: flex; justify-content: center; align-items: center;}
.program-wrap:nth-child(even) {flex-direction: row-reverse;}
.program-wrap > div {margin:40px 40px 0 40px;}
.program-wrap > div:first-child {width: calc(45% - 80px);}
.program-wrap > div:first-child pic {}
.program-wrap > div:last-child {width: calc(50% - 80px);}
.program-wrap > div:last-child .program-name {position:relative; background-color:rgba(0,0,0,0.1); border-radius: 30px; padding:40px 60px 60px 60px; margin-right:50px; }
.program-wrap > div:last-child .program-name h3 {text-align: left; margin-bottom:5px;}
.program-wrap > div:last-child .program-name h4 {text-align: left; font-weight: 400; font-size: 18px; margin-bottom: 7px;}
.program-wrap > div:last-child .program-name .partner img {height: 30px; width: auto;}
.program-wrap > div:last-child .program-name .partner2 img {height: 50px; width: auto;}
.program-wrap > div:last-child .cta {position: absolute; right: -50px; bottom: -15px;}
.program-wrap > div:last-child .program-detail {padding:30px 60px; margin-right:50px;}
.program-wrap > div:last-child .program-detail ul {list-style: none; margin:0; padding: 0 0 0 25px;}
.program-wrap > div:last-child .program-detail ul li:first-child {border-top: solid 1px rgba(255,255,255,0.4);}
.program-wrap > div:last-child .program-detail ul li { padding: 7px 0; margin: 0 0 7px 0; border-bottom: solid 1px rgba(255,255,255,0.4);}

@media only screen and (max-width: 1199px) {
  .program-wrap > div {margin:30px 30px 0 30px;}
  .program-wrap > div:first-child {width: calc(45% - 60px);}
  .program-wrap > div:last-child {width: calc(50% - 60px);}
  .program-wrap > div:last-child .program-name { border-radius: 25px; padding:30px 45px 55px 45px; margin-right:30px; }
  .program-wrap > div:last-child .cta {position: absolute; right: -30px; bottom: -15px;}
  .program-wrap > div:last-child .program-detail {padding:30px 45px; margin-right:30px;}
}
@media only screen and (max-width: 1023px) {
  #section-program {margin-top: -180px; padding-bottom: 50px;}
  .program-wrap {width: 100%; max-width: 750px; margin: auto;}
  .program-wrap:nth-child(odd) {flex-direction: column-reverse;}
  .program-wrap:nth-child(even) {flex-direction: column-reverse;}
  .program-wrap > div {margin:0;}
  .program-wrap > div:first-child {width:100%; max-width: 350px; margin-bottom: 40px; margin-top: -20px;}
  .program-wrap > div:last-child {width:100%;}
  .program-wrap > div:last-child .program-name { border-radius: 20px; padding:30px 35px 55px 35px; margin-right:30px; }
  .program-wrap > div:last-child .program-detail {padding:30px 0 30px 35px; }
}
@media only screen and (max-width: 767px) {
  #section-program {margin-top: -50px; padding-bottom: 40px;}
  .program-wrap > div:last-child .program-name { border-radius: 15px; padding:20px 25px 45px 25px; margin-right:30px; }
  .program-wrap > div:last-child .program-detail {padding:25px 0 25px 25px; }
  .program-wrap > div:last-child .program-detail ul { padding: 0 0 0 20px;}
}
@media only screen and (max-width: 479px) {
  .program-wrap > div:last-child .program-name { border-radius: 15px; padding:20px 20px 45px 20px; margin-right:30px; }
  .program-wrap > div:last-child .program-detail {padding:20px 0 20px 20px; }
  .program-wrap > div:last-child .program-name .partner img {height: 22px;}

}


/* section: Maklumat Lanjut *************************************************************************************/
#section-maklumat-lanjut { text-align:center; padding-bottom: 310px;}
#section-maklumat-lanjut:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; background-image: url('images/bg-3.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;}
#section-maklumat-lanjut .container {position: relative; padding-top: 100px;}
#section-maklumat-lanjut h3 {margin-bottom:40px;}

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-maklumat-lanjut { text-align:center; padding-bottom: 200px;}
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}

/* section: Testimoni *************************************************************************************/
#section-testimoni {position:relative; z-index:2; margin-top: -80px; padding-bottom: 80px;}
#section-testimoni h3 {margin-bottom: 5px;}
#section-testimoni .stars {max-width: 300px; margin-left: auto; margin-right: auto;}

.testimoni-wrapper {columns: 2; column-gap: 2.5%; margin: 2.5%;}
.testimoni-wrap { background: #fff; color: #001133; border-radius: 20px; transition: all .25s linear; padding:20px 40px 40px 40px; position: relative; margin-bottom: 5%; break-inside: avoid;}
.testimoni-wrap h4 { color: #001133; margin-top:20px; margin-bottom:20px; }
.testimoni-wrap .pic img {height:100px; width: auto; margin: auto;}

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-testimoni {padding-bottom: 50px;}
  #section-testimoni h2 {margin-bottom: 15px;}
  #section-testimoni h3 {margin-bottom: 5px;}
  #section-testimoni .stars {max-width: 200px;}
  .testimoni-wrap { border-radius: 15px; padding:15px 30px 30px 30px; }
  .testimoni-wrap h4 { margin-top:15px; margin-bottom:15px; }
  .testimoni-wrap .pic img {height:70px;}
}
@media only screen and (max-width: 767px) {
  .testimoni-wrapper {columns: 1; }
}
@media only screen and (max-width: 479px) {
  #section-testimoni .stars {max-width: 160px; margin-bottom: 20px;}
  .testimoni-wrap { padding:15px 20px 20px 20px; }
  .testimoni-wrap .pic img {height:57px;}
}


* section: gallery **************************************************************************************/
#section-gallery { margin-bottom:100px;}
#section-gallery h3 {}
#section-gallery h3 > div:first-child {display: flex; justify-content: center; align-items: center; font-size: 80px; margin-bottom: 15px; color: #3345aa;}
#section-gallery h3 > div:first-child figure {width: 40px; margin-right: 8px;}
#section-gallery h3 > div:last-child {}
.gallery-wrapper {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.gallery-wrapper > div { width:calc(25% - 10px);}

@media only screen and (max-width: 1199px) {
}
@media only screen and (max-width: 1023px) {
  #section-gallery { margin-bottom:80px; }
}
@media only screen and (max-width: 767px) {
  .gallery-wrapper {max-width: 450px; margin: auto;}
  .gallery-wrapper > div { width:calc(50% - 10px);}
}
@media only screen and (max-width: 479px) {
}


/* section: videos ***********************************************************************************/
#section-videos { padding-top: 350px; padding-bottom: 100px; margin-top:-280px; }
#section-videos:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.3; background-image: url('images/bg-4.webp'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
#section-videos .container {position: relative; z-index: 2; }
.videos-wrapper {display: flex; justify-content: center; }
.videos-wrapper > div {margin: 0 30px; width: calc(30% - 60px);}
.videos-wrapper a img {transition: all 0.2s linear; }
.videos-wrapper a:hover img {box-shadow: 0 0 20px rgba(255,255,255,0.7); }

@media only screen and (max-width: 1199px) {
  .videos-wrapper > div {margin: 0 20px; width: calc(30% - 40px);}
}
@media only screen and (max-width: 1023px) {
  .videos-wrapper > div {margin: 0 15px; width: calc(33% - 30px);}
}
@media only screen and (max-width: 767px) {
  #section-videos { padding-top: 0; padding-bottom: 50px; margin-top:0; }
  .videos-wrapper {flex-direction: column;}
  .videos-wrapper > div {margin: 0 auto 25px auto; width: 300px;}
}
@media only screen and (max-width: 479px) {
  .videos-wrapper > div { width: 250px;}
}


/* section: Tempat Kerja ***********************************************************************************/
#section-graduan-bekerja { margin-top: -200px; padding-bottom: 80px;}

.graduan-bekerja-buttons {display: flex; justify-content: center; margin-bottom: 30px;}
.graduan-bekerja-buttons > div {margin: 0 10px;}
.graduan-bekerja-buttons .button.inactive {background-color: unset; border-color: #fff;}
.graduan-bekerja-buttons .button.inactive:hover {background-color: #50D6FF; color:#022649; }

.graduan-bekerja-list {}
.graduan-bekerja-list > div {background: #fff; border-radius: 40px; padding: 40px; text-align: center; max-width:760px; margin: auto; }
.graduan-bekerja-list > div h3 {color: #001133;} 
.graduan-bekerja-list > div figure {display:inline-block; margin: 0 5px 10px 5px;}
.graduan-bekerja-list > div img {width: auto; height:70px;}
.graduan-bekerja-list > div.inactive {display: none; }

@media only screen and (max-width: 1199px) {
  .graduan-bekerja-list > div {border-radius: 25px; padding: 30px; }
}
@media only screen and (max-width: 1023px) {
  .graduan-bekerja-buttons > div {margin: 0 5px;}
  .graduan-bekerja-buttons .button {padding: 8px 20px;}
  .graduan-bekerja-list > div {border-radius: 20px; padding: 25px; }
  .graduan-bekerja-list > div figure { margin: 0 4px 8px 4px;}
  .graduan-bekerja-list > div img { height:60px;}
}
@media only screen and (max-width: 767px) {
  #section-graduan-bekerja { margin-top:0; padding-bottom: 60px;}
  .graduan-bekerja-buttons {flex-wrap: wrap;}
  .graduan-bekerja-buttons > div {margin: 0 5px 10px 5px;}
}
@media only screen and (max-width: 479px) {
}


/* section: Pendaftaran ***********************************************************************************/
#section-pendaftaran {padding-bottom: 80px; padding-top:80px;}
.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;}
}


/* section: contact ***********************************************************************************/
#section-contact {padding-bottom: 100px;}
.contact-wrapper { margin: auto; width: 700px; position:relative;}

.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 > div:last-child {margin-bottom: 0;}
.contact-wrapper form label {font-weight:500; font-size: 17px; width: 150px; text-align: left;}
.contact-wrapper form input[type=text],
.contact-wrapper form select {padding: 10px; font-size: 17px; width: 400px; border-radius: 0; border:1.5px solid #000; color:#000; }
.contact-wrapper form button[type=submit] {font-size: 17px; margin-top: 20px;}
.contact-wrapper form button[type=submit]:hover {}

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


/* footer *********************************************************************************************/
footer {} 
.footer-contact-details {border-top:rgba(255,255,255,0.4) solid 1px; text-align: center; line-height:21px; padding-top:70px; }
.footer-contact-details h3 {margin-bottom: 20px;}
.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; align-items: center; }
.footer-social ul li {margin:0 10px 10px 10px;}
.footer-social ul li a {}
.footer-social ul li a figure {width: 35px;} 
.copyright {text-align: center; padding:20px 0; border-top:rgba(255,255,255,0.4) solid 1px; } 

@media only screen and (max-width: 1199px) {
  .footer-contact-details { padding-top:60px; }
  .footer-social {padding-bottom: 60px;}
}
@media only screen and (max-width: 1023px) {
  .footer-contact-details { padding-top:40px; }
  .footer-social {padding-bottom: 40px;}
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
  .footer-social ul li {margin:0 6px 10px 6px;}
  .footer-social ul li a figure {width: 30px;} 
}



/*trainers section *************************************************************/

.trainers-section {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; position: relative;}
.section-head-left {width: 50%;}
.section-head-right {width: 40%; text-align: right; color: white;}
.section-head-left h1 {font-size: var(--body--h1-Font-Size); color: white; width: 100%; max-width: 1200px; margin-top: 100px; margin: 0px auto;}
.section-heading {display: flex; justify-content: space-between; padding: 0px 130px;    max-width: 1300px; margin: 20px auto;}
.section-head-left h3 {font-size: 16px;    color: #00D1D1; width: 100%; max-width: 1200px; margin-top: 120px; margin: 0px auto; font-weight: 400;}
.trainer-box {margin-top: 169px;  background-color: rgba(0,0,0,0.1); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 20px; width: 500px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);    text-align: center; border-radius: 30px;}
.trainer-img-1 {z-index: 10000; position: absolute; max-width: 370px; top: 0px;}
.trainer-image {z-index: 102000; position: absolute; max-width: 392px; top: 20px;}
.trainer-image2 {z-index: 102000; position: absolute; max-width: 392px; top: 20px;}
.trainer-heading {background-color: #00D1D1; color: white; text-transform: uppercase; padding: 10px; width: 100%; margin-top: 115px; margin-bottom: 20px; border-radius: 15px;}
.trainer-heading2 {background-color: #00D1D1; color: white; text-transform: uppercase; padding: 10px; width: 100%; margin-top: 115px; margin-bottom: 20px; border-radius: 15px;}
.trainer-description {margin-bottom: 10px;}
.trainer-icons {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.trainer-icons-2 {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.trainer-description {line-height: 20px; text-align: left; padding:0px 40px 0px; }
.trainer-images {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.trainer-images-2 {display: flex; justify-content: center; gap: 10px; margin-top: 50px;}
.trainer-icon {width: 45px; height: 45px;}
.trainer-icon-2 {width: 45px; height: 45px;}
/* Responsive styles */
@media (max-width: 910px) {
    .trainer-box { width: 100%;    }
    .section-heading {
        margin-top: 80px; padding: 0px 0px; display: flex; flex-direction: column;    }
    .section-head-left { width: 90%;    }
    .section-head-right { width: 100%; text-align: left; padding: 20px 30px;    }
    .section-head-left h1 { font-size: var(--body--h1-Font-Size); color: white; width: 100%; padding: 0px 30px; max-width: 1200px; margin-top: 100px; margin: 0px auto;    }
    .section-head-left h3 {font-size: 20px; width: 100%; padding: 0px 30px; max-width: 1200px; margin-top: 120px; margin: 0px auto; font-weight: 400;    }
   .trainer-image {z-index: 102000; position: absolute; max-width: 310px; top: 888px;   }
   .trainer-image2 {z-index: 102000; position: absolute; max-width: 310px; top: 810px;   }
    .trainer-img-1 {z-index: 10000; position: absolute; max-width: 290px; top: 30px;    }
    .trainer-box {margin-top: 129px; background-color: #002121; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 20px; width: 500px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center;    }
	.trainer-description {line-height: 20px; text-align: left; padding:0px; }

   .trainer-heading {background-color: #00D1D1; color: white; padding: 10px; width: 100%; font-size: 18px; margin-top: 106px; margin-bottom: 23px;  z-index: 9999999;   }
   .trainer-heading2 {background-color: #00D1D1; color: white; padding: 10px; width: 100%; font-size: 18px; margin-top: 90px; margin-bottom: 8px;  z-index: 9999999;   }
    .trainer-description {margin-bottom: 10px;    }
    .trainer-icons {display: flex;justify-content: center; gap: 10px; margin-top: 20px;    }
    .trainer-icons-2 {display: flex; justify-content: center; gap: 10px; margin-top: 20px;    }
    .trainer-description {line-height: 21px; font-size: 16px;    }
    .trainer-images {display: flex; justify-content: center; gap: 10px; margin-top: 20px;    }
    .trainer-images-2 {display: flex; justify-content: center; gap: 10px; margin-top: 50px;    }
    .trainer-icon {width: 45px; height: 45px;    }
    .trainer-icon-2 {width: 45px; height: 45px;    }

}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*trainers section2 *************************************************************/

.trainers-section2 {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; position: relative;}
.trainers-section2 .section-head-left {width: 50%;}
.trainers-section2 .section-head-right {width: 40%; text-align: right; color: white;}
.trainers-section2 .section-head-left h1 {font-size: var(--body--h1-Font-Size); color: white; width: 100%; max-width: 1200px; margin-top: 100px; margin: 0px auto;}
.trainers-section2 .section-heading {display: flex; justify-content: space-between; padding: 0px 130px;    max-width: 1300px; margin: 20px auto;}
.trainers-section2 .section-head-left h3 {font-size: 16px;    color: #00D1D1; width: 100%; max-width: 1200px; margin-top: 120px; margin: 0px auto; font-weight: 400;}
.trainer2-box {margin-top: 169px;  background-color: rgba(0,0,0,0.1); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 20px; width: 500px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);    text-align: center; border-radius: 30px;}
.trainer2-img-1 {z-index: 10000; position: absolute; max-width: 370px; top: 0px;}
.trainer2-image {z-index: 102000; position: absolute; max-width: 392px; top: 20px;}
.trainer2-image2 {z-index: 102000; position: absolute; max-width: 392px; top: 2px;}

.trainer2-heading {background-color: #00D1D1; color: white; text-transform: uppercase; padding: 10px; width: 100%; margin-top: 115px; margin-bottom: 20px; border-radius: 15px; z-index: 9999999;}
.trainer2-heading2 {background-color: #00D1D1; color: white; padding: 10px; width: 100%; margin-top: 115px; margin-bottom: 18px; border-radius: 15px;  z-index: 9999999;   }
.trainer2-description {margin-bottom: 10px;}
.trainer2-icons {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.trainer2-icons-2 {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.trainer2-description {line-height: 20px; text-align: left; padding:0px 40px 0px;}
.trainer2-images {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.trainer2-images-2 {display: flex; justify-content: center; gap: 10px; margin-top: 50px;}
.trainer2-icon {width: 45px; height: 45px;}
.trainer2-icon-2 {width: 45px; height: 45px;}
/* Responsive styles */
@media (max-width: 910px) {
    .trainer2-box { width: 100%;    }
    .trainers-section2 .section-heading {
        margin-top: 80px; padding: 0px 0px; display: flex; flex-direction: column;    }
    .trainers-section2 .section-head-left { width: 90%;    }
    .trainers-section2 .section-head-right { width: 100%; text-align: left; padding: 20px 30px;    }
    .trainers-section2 .section-head-left h1 { font-size: var(--body--h1-Font-Size); color: white; width: 100%; padding: 0px 30px; max-width: 1200px; margin-top: 100px; margin: 0px auto;    }
    .trainers-section2 .section-head-left h3 {font-size: 20px; width: 100%; padding: 0px 30px; max-width: 1200px; margin-top: 120px; margin: 0px auto; font-weight: 400;    }
   .trainer2-image {z-index: 102000; position: absolute; max-width: 310px; top: 888px;   }
   .trainer2-image2 {z-index: 102000; position: absolute; max-width: 310px; top: 700px;   }
    .trainer2-img-1 {z-index: 10000; position: absolute; max-width: 290px; top: 30px;    }
    .trainer2-box {margin-top: 129px; background-color: #002121; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 20px; width: 500px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center;    }


.trainer2-description {line-height: 20px; text-align: left; padding:0px; }
   .trainer2-heading {background-color: #00D1D1; color: white; text-transform: uppercase; padding: 10px; width: 100%; font-size: 18px; margin-top: 94px;  /*margin-bottom: 150px;*/  z-index: 9999999;}
   .trainer2-heading2 {background-color: #00D1D1; color: white; text-transform: uppercase; padding: 10px; width: 100%; font-size: 18px; margin-top: 58px;  /*margin-bottom: 150px;*/  z-index: 9999999;}
    .trainer2-description {margin-bottom: 10px;    }
    .trainer2-icons {display: flex;justify-content: center; gap: 10px; margin-top: 20px;    }
    .trainer2-icons-2 {display: flex; justify-content: center; gap: 10px; margin-top: 20px;    }
    .trainer2-description {line-height: 21px; font-size: 16px;    }
    .trainer2-images {display: flex; justify-content: center; gap: 10px; margin-top: 20px;    }
    .trainer2-images-2 {display: flex; justify-content: center; gap: 10px; margin-top: 50px;    }
    .trainer2-icon {width: 45px; height: 45px;    }
    .trainer2-icon-2 {width: 45px; height: 45px;    }

}

 
 
 
/* section: 4 Items ***********************************************************************************/
#section-fouritems { padding-top: 275px; /*padding-bottom: 140px;*/ margin-top:-280px; }
#section-fouritems:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.3; }
#section-fouritems .container {position: relative; z-index: 2; }
.fouritems-wrapper {display: flex; justify-content: center; }
.fouritems-wrapper > div {margin: 0 30px; width: calc(30% - 60px);}
.fouritems-wrapper a img {transition: all 0.2s linear; }
.fouritems-wrapper a:hover img {box-shadow: 0 0 20px rgba(255,255,255,0.7); }

.fouritems-box {
        margin-top: 129px;
        background-color: #002121;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        width: 500px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }
	
	

@media only screen and (max-width: 1199px) {
  .fouritems-wrapper > div {margin: 0 20px; width: calc(30% - 40px);}
}
@media only screen and (max-width: 1023px) {
  .fouritems-wrapper > div {margin: 0 15px; width: calc(33% - 30px);}
}
@media only screen and (max-width: 767px) {
  #section-fouritems { padding-top: 0; /*padding-bottom: 50px; */margin-top:0; }
  .fouritems-wrapper {flex-direction: column;}
  .fouritems-wrapper > div {margin: 0 auto 25px auto; width: 300px;}
}
@media only screen and (max-width: 479px) {
  .fouritems-wrapper > div { width: 250px;}
}



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

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

.read-more {cursor: pointer;}






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