* { 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: #0E7ABD; 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: 75px; 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;}

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; font-size:18px; color: #fff; background-color: #022649; transition: all .15s linear; border-radius: 100px; padding: 16px 28px; }
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; font-size:18px; color: #fff; background-color: #022649; transition: all .15s linear; border-radius: 100px; padding: 16px 28px; display:inline-block; text-decoration: none;}
.button:hover {background-color: #50D6FF; color:#022649; }

.cta {text-align: center;}

ul {padding-left: 13px;}

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: 70px;}
  h2 {font-size: 48px;}
  h3 {font-size: 26px;}
}
@media only screen and (max-width: 1023px) {
  h1 {font-size: 60px; margin-top: 85px; }
  h1 span strong {display: block;}
  h2 {font-size: 40px;}
  h3 {font-size: 23px;}
}
@media only screen and (max-width: 767px) {
  h1 {font-size: 40px; margin-top: 70px; }
  h2 {font-size: 30px;}
  h3 {font-size: 18px;}
}
@media only screen and (max-width: 479px) {
  h1 {font-size: 14vw;}
}


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


/* header *********************************************************************************************/
header {background:#fff; }
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: 80px;}
.navigation-top { background: #fff; padding: 12px 0 12px 20px; 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 8px; transition: all .15s linear; letter-spacing: 0.015em; font-size: 13px;}
.navigation-top nav ul li a:hover {color: #0E7ABD;}
.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: 60px;}
}
@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: 20px;}
#section-intro:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.45; 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;}

#section-intro .khas {background: rgba(0, 0, 0, 0.25); font-size: 30px; font-family: "Inter Tight", sans-serif; line-height:1.2em; font-optical-sizing: auto; font-weight: 900; font-style: normal; display: inline-block; padding: 27px 40px 30px 40px; margin-bottom: 10px; border-radius: 20px;}

#section-hero {padding-bottom: 80px;}

@media only screen and (max-width: 1199px) {
  #section-hero { padding-bottom: 60px;}
}
@media only screen and (max-width: 1023px) {
  #section-hero { padding-bottom: 50px;}
  #section-intro .khas {font-size: 27px; padding: 25px 35px 25px 35px; border-radius: 15px;}
  #section-intro h2 {font-size: 22px;}
}
@media only screen and (max-width: 767px) {
  #section-intro:before {background-size: 150% auto;}
  #section-intro .khas {font-size: 24px; padding: 20px 30px 21px 30px; }
  #section-intro h2 {font-size: 18px;}
}
@media only screen and (max-width: 479px) {
  #section-intro .khas {font-size: 20px; padding: 20px 30px 20px 30px; }
  #section-intro h2 {font-size: 16px;}
}



/* section: Kelayakan *************************************************************************************/
#section-kelayakan {padding-bottom: 80px;}
#section-kelayakan .intro {text-align: center; margin-left: auto; margin-right: auto; max-width:500px;}

.kelayakan-wrapper {display: flex; justify-content: center; max-width: 850px; margin: auto;}
.kelayakan-wrapper > div {width: calc(33.33% - 10px); margin-left:5px; margin-right: 5px; border:1px solid rgba(255,255,255,0.65); padding:20px 50px; text-align: center;}
.kelayakan-wrapper > div img {width: 150px; margin: auto;}

.kelayakan-wrapper-2 {position: relative; max-width: 850px; margin:30px auto;}
.kelayakan-wrapper-2 > div:first-child {background: #fff; border-radius: 20px; color: #001133; text-align: center; padding: 50px 50px; margin-right: 150px; margin-top:130px; margin-bottom:130px;}
.kelayakan-wrapper-2 > div:first-child p {text-align: justify;}
.kelayakan-wrapper-2 > div:first-child .wrap {margin-right:250px;}
.kelayakan-wrapper-2 > div:first-child img {width: 200px; margin: auto;}
.kelayakan-wrapper-2 > div:last-child {position: absolute; top: -130px; right: 0; width: 450px;}

.kelayakan-summary {background: rgba(0,0,0,0.15); padding: 50px; max-width: 850px; margin: auto; border-radius: 20px; margin-bottom:20px; }
.kelayakan-summary h3 {margin-bottom: 0;}

@media only screen and (max-width: 1199px) {
  #section-kelayakan {padding-bottom: 60px;}
}
@media only screen and (max-width: 1023px) {
  .kelayakan-wrapper-2 > div:first-child {border-radius: 15px; padding: 40px 40px; margin-right: 120px; margin-top:120px; margin-bottom:80px;}
  .kelayakan-wrapper-2 > div:first-child img {width: 180px; }
  .kelayakan-wrapper-2 > div:last-child {width: 400px;}
  .kelayakan-summary {padding: 40px; border-radius: 15px; }
}
@media only screen and (max-width: 767px) {
  .kelayakan-wrapper {flex-direction: column; max-width: 300px;}
  .kelayakan-wrapper > div {width: unset; margin: unset; margin-bottom:20px;}
  .kelayakan-wrapper-2 > div:first-child {max-width: 300px; margin: auto;}
  .kelayakan-wrapper-2 > div:first-child .wrap {margin-right:unset; padding-bottom: 100px;}
  .kelayakan-wrapper-2 > div:first-child img {width: 130px;}
  .kelayakan-wrapper-2 > div:last-child {position: unset; width:300px; margin:-150px auto auto auto; }
  .kelayakan-summary { max-width: 450px;}
}
@media only screen and (max-width: 479px) {
}


/* section: Siapa *************************************************************************************/
#section-siapa {padding-bottom: 80px;}

.siapa-wrapper {display: flex; justify-content: center; flex-wrap: wrap; margin: auto;}
.siapa-wrapper > div { width:calc(25% - 30px); margin:0 15px 30px 15px; }
.siapa-wrapper > div > div:last-child {border:1px solid rgba(255,255,255,0.65); padding: 15px; height: 90px; display: flex; align-items: center; text-align:center; margin-top:7px; }
.siapa-wrapper > div > div:last-child p {margin: 0; width: 100%;}

.siapa-wrapper-2 {display: flex; justify-content: center; align-items: center; max-width:450px; margin:30px auto 40px auto;}
.siapa-wrapper-2 > div:first-child {width: 200px; margin-right:15px;}
.siapa-wrapper-2 > div:last-child {}

@media only screen and (max-width: 1199px) {
  #section-siapa {padding-bottom: 60px;}
}
@media only screen and (max-width: 1023px) {
  .siapa-wrapper > div { width:calc(25% - 10px); margin:0 5px 20px 5px; }
}
@media only screen and (max-width: 767px) {
  .siapa-wrapper > div { width:calc(33.33% - 10px); }
  .siapa-wrapper > div:nth-child(4), .siapa-wrapper > div:nth-child(6) {margin-left: 1.5%;}
  .siapa-wrapper-2 > div:first-child {width: 150px;}
}
@media only screen and (max-width: 479px) {
  .siapa-wrapper figure {margin: 0;}
  .siapa-wrapper > div { width:100%; margin:unset; display:flex; justify-content:center; align-items: stretch; margin-bottom:10px; }
  .siapa-wrapper > div:nth-child(4), .siapa-wrapper > div:nth-child(6) {margin-left: unset;}
  .siapa-wrapper > div > div:first-child {width: 35%;}
  .siapa-wrapper > div > div:last-child {height: unset; margin: unset; width: 65%;}
}


/* section: Program *************************************************************************************/
#section-program {padding-bottom: 80px;}

.program-wrapper {display: flex; justify-content: center; align-items: stretch;}
.program-wrapper > div { text-align:center; border:1px solid rgba(255,255,255,0.65); padding: 20px; width:calc(25% - 30px); margin:0 15px 15px; }
.program-wrapper > div img {width: 230px; margin: auto;}
.program-wrapper > div > div:first-child {}
.program-wrapper > div > div:last-child {}

@media only screen and (max-width: 1199px) {
  #section-program {padding-bottom: 60px;}
  .program-wrapper > div img {width: 180px; }
}
@media only screen and (max-width: 1023px) {
  .program-wrapper {flex-wrap: wrap; max-width: 650px; margin: auto;}
  .program-wrapper > div { padding: 15px; width:calc(50% - 20px); margin:0 10px 20px 10px; }
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
  .program-wrapper > div { width:calc(100% - 20px); max-width:300px; }
}


/* section: Program *************************************************************************************/
#section-kelayakan-program {position: relative; padding-bottom: 400px;}
#section-kelayakan-program:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('images/bg-2.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;}

#section-kelayakan-program .container {position: relative; z-index: 2; }

.kelayakan-program-wrapper {max-width: 550px; margin:auto;}
.kelayakan-program-wrapper > div {display: flex; justify-content: center; align-items: flex-start;}
.kelayakan-program-wrapper > div > div:first-child {width: 45px; margin-right: 10px;}
.kelayakan-program-wrapper > div > div:last-child {width:calc(100% - 55px);padding-top: 6px; }
.kelayakan-program-wrapper > div > div:last-child h3 {text-align: left; margin-bottom: 15px;}

.kelayakan-program-wrapper-2 {position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start;}
.kelayakan-program-wrapper-2 > div {width:calc(20% - 30px); margin: 0 15px;}
.kelayakan-program-wrapper-2 > div img {margin:auto;} 
.kelayakan-program-wrapper-2 > div > div {text-align: center;}
.kelayakan-program-wrapper-2 > div > div:first-child { align-content: flex-end; height:70px; margin-bottom: 5px;}
.kelayakan-program-wrapper-2 > div:nth-child(1) img {width: 142px;} 
.kelayakan-program-wrapper-2 > div:nth-child(2) img {width: 130px;} 
.kelayakan-program-wrapper-2 > div:nth-child(3) img {width: 140px;} 
.kelayakan-program-wrapper-2 > div:nth-child(4) img {width: 124px;} 
.kelayakan-program-wrapper-2 > div:nth-child(5) img {width: 68px;} 

@media only screen and (max-width: 1199px) {
  #section-kelayakan-program {position: relative; padding-bottom: 300px;}
}
@media only screen and (max-width: 1023px) {
  .kelayakan-program-wrapper-2 > div:nth-child(1) img {width: 122px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(2) img {width: 110px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(3) img {width: 120px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(4) img {width: 104px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(5) img {width: 58px;} 
}
@media only screen and (max-width: 767px) {
  #section-kelayakan-program {padding-bottom: 40vw;}
  #section-kelayakan-program:before {background-size: 150% auto;}
  .kelayakan-program-wrapper {max-width: 400px;}
  .kelayakan-program-wrapper-2 {flex-wrap: wrap;}
  .kelayakan-program-wrapper-2 > div {width:calc(33.33% - 30px); margin-bottom: 20px;}
}
@media only screen and (max-width: 479px) {
  .kelayakan-program-wrapper-2 > div > div:first-child {height: 50px;}
  .kelayakan-program-wrapper-2 > div {width:calc(50% - 30px); }
  .kelayakan-program-wrapper-2 > div:nth-child(1) img {width: 102px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(2) img {width: 90px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(3) img {width: 90px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(4) img {width: 84px;} 
  .kelayakan-program-wrapper-2 > div:nth-child(5) img {width: 38px;} 
}


/* section: Program *************************************************************************************/
#section-bidang {position: relative; padding-bottom: 700px; margin-top: -150px;}
#section-bidang:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('images/bg-3.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;}

#section-bidang h2 span {display: block;}

#section-bidang .container {position: relative; z-index: 2; }

.bidang-intro {max-width: 520px; margin: 0 auto 40px auto; text-align: center;}

.bidang-program {display: flex; justify-content: center; align-items: center; margin-bottom: 80px;}
.bidang-program:nth-child(even) {flex-direction: row-reverse;}
.bidang-program > div {margin: 0 20px;}

.bidang-program .details {width: calc(55% - 40px);}
.bidang-program .details h3 {text-align: left; background: rgba(0,0,0,0.3); border-radius:20px; padding:20px; }
.bidang-program .details .details-wrap {padding:0 20px 20px; }
.bidang-program .details .comptia {width: 110px;}
.bidang-program .details .siemens {width: 120px;}
.bidang-program .details p {}
.bidang-program .details ul {}
.bidang-program .details .remarks {}
.bidang-program .details .siapa-list {display: flex; justify-content: flex-start; flex-wrap:wrap; }
.bidang-program .details .siapa-list > div {margin: 0 5px 10px 5px; border:1px solid rgba(255,255,255,0.65); padding: 20px; width: calc(20%  - 10px);}
.bidang-program .details .siapa-list > div:last-child {width: 100%;} 
.bidang-program .details .siapa-list-2 > div {width: calc(33.33%  - 10px);}
.bidang-program .details .remarks {color: #001133; background-color: #fff; border-radius:10px; padding:20px; margin-top:-15px; margin-bottom:25px;}
.bidang-program .details .cta {text-align:left;}

.bidang-program .pic {width: calc(45% - 40px); background-image: url('images/program-bg.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 50px 0;}
.bidang-program .pic > div:first-child {width: 50%; margin-left: 30%; margin-bottom: 20px;}
.bidang-program .pic > div:last-child {width: 70%}

.bidang-summary {max-width: 600px; margin:150px auto 0 auto; text-align: justify;}
.bidang-summary h3 {text-align: justify;}

@media only screen and (max-width: 1199px) {
  #section-bidang { padding-bottom: 550px;}
  .bidang-program {margin-bottom: 50px;}
}
@media only screen and (max-width: 1023px) {
  #section-bidang { padding-bottom: 400px;}
  .bidang-program {flex-direction:column-reverse; max-width: 700px; margin-left: auto; margin-right: auto;}
  .bidang-program:nth-child(even) {flex-direction:column-reverse;}
  .bidang-program .details {width: calc(100% - 40px);}
  .bidang-program .pic {width: calc(70% - 40px); }
  .bidang-program .pic > div:first-child {width: 50%; margin-left: 50%; margin-bottom: 20px;}
  .bidang-program .pic > div:last-child {width: 70%}
}
@media only screen and (max-width: 767px) {
  #section-bidang {margin-top: -20vw; padding-bottom: 60vw;}
  #section-bidang:before {background-size: 150% auto;}
  .bidang-program .pic {width: calc(85% - 40px); }
  .bidang-program .details .siapa-list > div {width: 100%; padding:5px 10px; margin-bottom: 5px;}
  .bidang-program .details .remarks {padding:10px 20px;}
  .bidang-summary {margin-top:100px }
}
@media only screen and (max-width: 479px) {
  .bidang-program .pic {width: calc(100% - 40px); }
  .bidang-program .details {width: 100%;}
  .bidang-program .details h3 {border-radius:10px; padding:20px;}
}


/* section: Trainers *************************************************************************************/
#section-trainer {position: relative; padding-bottom: 550px; margin-top: -350px;}
#section-trainer:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('images/bg-4.webp'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto;}

#section-trainer .container {position: relative; z-index: 2; }

#section-trainer h2 span {display: block;}
#section-trainer .intro {max-width: 700px; margin:0 auto 70px auto; text-align:center; }

.trainer-wrapper {display: flex; justify-content: center; align-items: center; margin-bottom: 80px;}
.trainer-wrapper:nth-child(even) {flex-direction: row-reverse;}
.trainer-wrapper > div {margin: 0 20px; text-align: left;}
.trainer-wrapper > div h3, .trainer-wrapper > div h4 {text-align: left;}

.trainer-wrapper .pic {width: calc(42% - 40px); }
.trainer-wrapper .details {width: calc(58% - 40px);}

.trainer-wrapper .trainer-details {display: flex; justify-content: center; align-items: flex-start; margin-bottom: 30px;}
.trainer-wrapper .trainer-details h4 {margin:0;}
.trainer-wrapper .trainer-details > div:first-child {margin-right:20px; width: calc(40% - 20px);}
.trainer-wrapper .trainer-details > div:last-child {width: 60%;}

.trainer-summary {background: rgba(0,0,0,0.15); padding: 50px; max-width: 850px; margin: auto; border-radius: 20px; margin-bottom:20px; }

@media only screen and (max-width: 1199px) {
  #section-trainer {padding-bottom: 400px; }
  .trainer-wrapper {margin-bottom: 50px;}
}
@media only screen and (max-width: 1023px) {
  #section-trainer {margin-top: -150px;}
  #section-trainer h2 strong {display: block;}
  .trainer-wrapper { align-items: flex-start; }
  .trainer-summary {padding: 40px; border-radius: 15px; }
}
@media only screen and (max-width: 767px) {
  #section-trainer {margin-top: -30vw; padding-bottom: 45vw;}
  #section-trainer:before {background-size: 150% auto;}
  .trainer-wrapper,.trainer-wrapper:nth-child(even) {flex-direction: column;}
  .trainer-wrapper .pic {width: calc(75% - 40px); margin:auto auto 20px auto;}
  .trainer-wrapper .details {width: calc(90% - 40px); margin:auto;}
}
@media only screen and (max-width: 479px) {
  .trainer-wrapper > div h3 {text-align: center;}
  .trainer-wrapper .pic {width: 90%;}
  .trainer-wrapper .details {width: 100%;}
  .trainer-wrapper .trainer-details {flex-direction: column;}
  .trainer-wrapper .trainer-details > div:first-child {width: 90%; margin:auto;}
  .trainer-wrapper .trainer-details > div:last-child {width: 90%; margin:auto;}
}

/* section: Mengapa memilih sgacademy *********************************************************************/
#section-sgacademy {position: relative; padding-bottom: 80px; margin-top: -350px;}

.sgacademy-wrapper {max-width: 570px; margin: auto;}

@media only screen and (max-width: 1199px) {
  #section-sgacademy {padding-bottom: 60px; margin-top: -250px;}
  #section-sgacademy h2 span {display: block;}
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
  #section-sgacademy {margin-top: -30vw;}
}
@media only screen and (max-width: 479px) {
}

/* section: 7 sebab  *************************************************************************************/
#section-sebab {padding-bottom: 80px; }
#section-sebab h2 span {display: block;}

.sebab-wrapper {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.sebab-wrapper > div {margin: 0 50px 50px 50px; width: calc(33.33% - 100px); text-align: justify;}
.sebab-wrapper > div > div:first-child { align-content: center; height: 110px; margin-bottom: 7px;}
.sebab-wrapper > div > h3 {margin-bottom: 10px;}
.sebab-wrapper > div > div img {margin: auto;}
.sebab-wrapper > div:nth-child(1) img {width: auto; height: 110px;}
.sebab-wrapper > div:nth-child(2) img {width: auto; height: 110px;}
.sebab-wrapper > div:nth-child(3) img {width: auto; height: 70px;}
.sebab-wrapper > div:nth-child(4) img {width: auto; height: 110px;}
.sebab-wrapper > div:nth-child(5) img {width: auto; height: 110px;}
.sebab-wrapper > div:nth-child(6) img {width: auto; height: 110px;}

.sebab-summary {background: rgba(0,0,0,0.15); padding: 50px; max-width: 850px; margin: auto; border-radius: 20px; margin-bottom:
20px; }
.sebab-summary h3 {text-align: left;}
.sebab-summary .cta {margin-top: 40px;} 

@media only screen and (max-width: 1199px) {
  #section-sebab {padding-bottom: 60px; }
  .sebab-wrapper > div {margin: 0 30px 40px 30px; width: calc(33.33% - 60px);}
}
@media only screen and (max-width: 1023px) {
  .sebab-wrapper > div {margin: 0 25px 50px 25px; width: calc(50% - 50px);}
  .sebab-summary {padding: 40px; border-radius: 15px; }
}
@media only screen and (max-width: 767px) {
  .sebab-wrapper > div {margin: 0 15px 30px 15px; width: calc(50% - 30px); text-align: left;}
  .sebab-wrapper > div:nth-child(1) img {height: 90px;}
  .sebab-wrapper > div:nth-child(2) img {height: 90px;}
  .sebab-wrapper > div:nth-child(3) img {height: 50px;}
  .sebab-wrapper > div:nth-child(4) img {height: 90px;}
  .sebab-wrapper > div:nth-child(5) img {height: 90px;}
  .sebab-wrapper > div:nth-child(6) img {height: 90px;}
}
@media only screen and (max-width: 479px) {
  .sebab-wrapper > div { width: calc(100% - 30px); }
}

/* section: Tempat Kemahiran Menjadi Kerjaya ***********************************************************/
#section-kerjaya {padding-bottom: 80px; }
.kerjaya-intro {display: flex; justify-content: center; align-items: center; max-width:900px; margin:auto; }
.kerjaya-intro h2 {text-align: left;}
.kerjaya-intro > div:first-child {width: 45%;}
.kerjaya-intro > div:last-child {width: 55%; margin-left: -20px;}

.kerjaya-wrapper {display: flex; justify-content: center; align-items: flex-start; }
.kerjaya-wrapper > div {margin: 0 80px 50px 80px; width: calc(50% - 160px);}
.kerjaya-wrapper h3 {text-align: left;}
.kerjaya-wrapper > div > div:first-child { align-content: flex-end; height: 130px; margin-bottom: 7px;}
.kerjaya-wrapper > div > div img {margin: auto;}
.kerjaya-wrapper > div:nth-child(1) img {height:120px; width:auto;}
.kerjaya-wrapper > div:nth-child(2) img {height:130px; width:auto;}

.peserta-list {display: flex; justify-content: center; align-items: flex-start; margin-bottom:50px; }
.peserta-list > div {color: #001133; background-color: #fff; border-radius:10px; padding:20px; margin:0 10px 20px 10px; text-align:center; }

@media only screen and (max-width: 1199px) {
  #section-kerjaya {padding-bottom: 60px; }
  .kerjaya-wrapper > div {margin: 0 40px 50px 40px; width: calc(50% - 80px);}
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (max-width: 767px) {
  .kerjaya-intro {flex-direction: column; margin:auto; margin-bottom: 30px; max-width: 400px;}
  .kerjaya-intro h2 {text-align: center; margin:auto; margin-bottom: 10px; max-width:300px;}
  .kerjaya-intro > div:first-child {width: 80%; max-width: 400px;}
  .kerjaya-intro > div:last-child {width: 100%; margin-left: unset; margin-top: -30px;}
  .kerjaya-wrapper {flex-direction: column;}
  .kerjaya-wrapper h3 {text-align: center;}
  .kerjaya-wrapper > div {margin: 0 auto 50px auto; width: 100%; max-width: 400px;}
  .kerjaya-wrapper > div:nth-child(1) img {height:100px; }
  .kerjaya-wrapper > div:nth-child(2) img {height:110px; }
  .peserta-list {flex-direction: column;}
  .peserta-list > div {margin:0 auto 20px auto; width: 100%; max-width: 400px;}
}
@media only screen and (max-width: 479px) {
}


/* section: Pendaftaran ***********************************************************************************/
#section-pendaftaran {padding-bottom: 80px; border-top:rgba(255,255,255,0.4) solid 1px; padding-top:70px; }
#section-pendaftaran .intro {text-align: center; margin-top:-20px; margin-bottom: 40px;}
.pendaftaran-wrapper { background: #fff; border-radius: 40px; padding:60px 40px; margin: auto; width: 90%; max-width: 800px; position:relative; color: #001133;}

.pendaftaran-wrapper h4 {margin-top: 0; margin-bottom: 30px; text-align: center; color: #001133;}
.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;} 
}



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