/*
 * Globals
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
 body{
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  /* font-variation-settings: "slnt" 0; */
  color: #000;
  font-weight: 300;
  letter-spacing: 0.04rem;
  line-height:150%;
  overflow-x: hidden;
  /* min-height: 90vh; */
  min-height: 1082px;
  /* background-color: #fff; */
  /* background:  linear-gradient(to right, #EB1E25 0%, #E41D23 2%, #A8151A 17%, #750E12 33%, #4A090B 48%, #2A0506 62%, #120202 76%, #040000 89%, #000000 100%);; */
  background: #EB1E25;
background: linear-gradient(90deg, rgba(235, 30, 37, 1) 0%, rgba(228, 29, 35, 1) 8%, rgba(168, 21, 26, 1) 17%, rgba(117, 14, 18, 1) 40%, rgba(74, 9, 11, 1) 59%, rgba(70, 9, 10, 1) 66%, rgba(42, 5, 6, 1) 82%, rgba(4, 0, 0, 1) 100%);
}

/* start Home  css */

#boxhomeheaderbg{
    background-image: url(img/header-bg-top.jpg);
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 100vh;
    padding: 15px 0 0 0 ;
    margin: 0;

}

#boxheader{
  height: 948px;
  /* background-image: url(img/bg.png); */
  background-size: cover;
  background-position: center;
}

#boxheader p{
  font-size: large;
}

.logo{
  width: 100%;
}

.logo_pertamina{
  width: 95%;
}

.vl_logo {
  border-left: 1px solid rgb(255, 255, 255);
}

.vr_line_r {
  border-left: 1px solid rgb(255, 255, 255);
  height: 250px;
  width: 1px;
}

/* start navigation  */

.navbar{
  z-index: 1000;
  border-radius: 20px;
}

.fixed-top{
  border-radius: 0;
}
.nav-item{
  margin:0;
  padding:0 3px;
}

.nav-link{
  border-bottom: #fff 1px solid;
  transition: all ease-in-out .2s;
  font-size: .87rem;
  padding-left: 4px !important;
  padding-right: 4px !important;
  color: #000;
}

.nav-link:hover{
  border-bottom: #ee3f3f 1px solid;
}
/* end navigation  */

.boxtextheader{
  margin-top:10vh;
  color: #fff;
}

.boxtextheader h1{
  font-weight: 900 !important;
  font-size: 2.5rem;
}

#boxabout{
 min-height: 100vh;
 /* background: url(img/bg_about.png); */
 background: #fff;
 background-position: left center;
 background-size: cover;
 background-repeat: no-repeat;
 padding: 10vh 0 10vh 0;
}

#boxabout .boxtext{
  margin-top:165px;
}

#boxabout h1{
  font-size: 3.5em;
  font-weight: bold;
}

#boxabout  p{
  font-size: larger;
  background-color: #fffc;

}

.border-danger {
  background-color: #E7262A !important;
}

.bg-danger{
  border-color: #E7262A !important;
}

#bosherderbtn:hover{
  background-color: #A60E11 !important;
  color: #fff !important;
}

@media(max-width:768px) {
  #boxhomeheaderbg{
    background-position: bottom right;
    background-size: cover;
    
  }

  #boxheader{
    height: 520px;
  }

  .boxtextheader{
    margin-top:0;
  }
  .boxtextheader h1{
    font-size: 1.7rem;
  }

  .boxtextheader .btn{
    font-size:0.9rem;
    font-weight: bold;
  }

  #boxabout h1{
    font-size: 1.9rem;
  }


  
}
/* TIMLINE */
#boxtimelin{
  margin-top: 30px;
  background-color: #fff;
}
#boxtimelin img{
  max-width: 100%;
}


#boxtimelin h2{
  font-size: 2rem;
}

#boxtimelin p{
  font-size: large;
}


@media(max-width:768px) {
  #boxtimelin h2{
    font-size: 2rem;
  }
  
}

/* BOX KATEGORI*/

#boxcategori{
    min-height: 100vh;
    background: url(img/bg-home-kategori.jpg);
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
}

#boxcategori .boxtext h2{
  font-size: 2rem;
}

#boxcategori .boxtext p{
  font-size: large;
}

.boxitemcat{
  background-image: url(img/bg.png);
  background-size: 650%;
  background-position: center center;
  color: #fff;
  overflow: hidden;
  transition: transform .2s; /* Animation */
}

.boxitemcat:hover{
  transform: scale(1.05);
}



.boxitemcat .card-show-detal{
  background-color: #fff;
  color: var(--bsb-tl-color);
  padding: 30px;
  position: absolute;
  bottom: -300px;
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}

.boxitemcat:hover .card-show-detal{
  top:0;
  bottom: 0;
  border:1px solid #f02536;
}

@media(max-width:768px) {
  #boxcategori .boxtext h2{
    font-size: 1.9rem;
  }
  
}

/* END KATEGORI */

/* START LANGKAH REGISTRASI */
#boxlangkahregis{
  background-color: #fff;
}z

#boxlangkahregis h2{
  font-size: 3rem;
}

#boxlangkahregis p{
  font-size: large;
}


#boxlangkahregis img{
  max-width: 100%;
}

@media(max-width:768px) {
  #boxlangkahregis h2{
    font-size:2rem;
  }
  
}

/* END LANGKAH REGISTRASI */

/* START MILESTONE */

#boxmilstone{
  background: var(--bs-light);
  min-height: 40vh;
}

.hori-timeline .events {
  border-top: 3px solid #e9ecef;
}
.hori-timeline .events .event-list {
  display: block;
  position: relative;
  text-align: center;
  padding-top: 70px;
  margin-right: 0;
}
.hori-timeline .events .event-list:before {
  content: "";
  position: absolute;
  height: 36px;
  border-right: 2px dashed #dee2e6;
  top: 0;
}
.hori-timeline .events .event-list .event-date {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  width: 75px;
  margin: 0 auto;
  border-radius: 4px;
  padding: 2px 4px;
}
@media (min-width: 1140px) {
  .hori-timeline .events .event-list {
      display: inline-block;
      width: 30%;
      padding-top: 45px;
  }
  .hori-timeline .events .event-list .event-date {
      top: -12px;
  }
}
.bg-soft-primary {
  background-color: rgba(64,144,203,.3)!important;
}
.bg-soft-success {
  background-color: rgba(71,189,154,.3)!important;
}
.bg-soft-danger {
  background-color: rgba(231,76,94,.3)!important;
}
.bg-soft-warning {
  background-color: rgba(249,213,112,.3)!important;
}

#boxmilstone .card {
  border: none;
  margin-bottom: 24px;
  -webkit-box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
  box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
}

/* END MILESTONE */

/* START HUBUNGI KAMI */

#boxhubungikami{
  /* border-top: #ffffff 2px solid; */
  background-image: url(img/bg-footer.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}
#boxhubungikami h4{
  font-size: 3rem;
}

@media(max-width:768px) {
  #boxhubungikami h4{
    font-size:2rem;
  }
  
}
/* END HUBUNGI KAMI */

footer{
  /* background-image: url(img/bg.png);
  background-size: cover;
  background-position: bottom center; */
  color: #fff;
  min-height: 100%;
  /* border-top: #ffffff 2px solid; */

}

/* START NAVIGATION  */

.navbar {
  border-bottom: #ee3f3f 2px solid;
  font-weight: bold;
}

/* END NAVIGATION  */


/* START NAV STEP REGIS */


.nav-step {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  margin-bottom: 1.875rem;
}

.nav-step .nav-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  text-align: center;
}

.nav-step .nav-step-item:not(:last-child) {
  margin-right: 1.95rem;
}

.nav-step .nav-step-item .number {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffa5a5;
  font-weight: 500;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
  z-index: 2;
}

.nav-step .nav-step-item .number:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -100%;
  margin: auto;
  height: 1px;
  width: 100%;
  background: #ff6f6f;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
}

.nav-step .nav-step-item:not(:last-child) .number:before {
  opacity: 1;
  visibility: visible;
}

.nav-step .nav-step-item .label {
  font-weight: 400;
  color: var(--color3);
  margin-bottom: 0;
}

.nav-step .nav-step-item.active .number {
  background: #ee3f3f;
  color: #fff;
}

.nav-step .nav-step-item.active .number:before {
  background: #ee3f3f;
}

.nav-step .nav-step-item.active .label {
  color: var(--color);
}

/* END NAV STEP REGIS */



/* START REGIS PAGE */

.reg-check-kategori {
  position: absolute;
  right: 10px;
  font-size: 2rem;
}

.reg-check-subkategori {
  position: absolute;
  right: 10px;
  font-size: 2rem;
}

/* END REGIS PAGE */

/* START WHATS NEW PAGE */

#boxwhatsnewtop{
  background-image: url(img/new-bg-top.png);
  background-position: bottom right;
  background-size: 30% auto;
  background-repeat: no-repeat;
  padding-bottom: 10vh;
}

#boxnewkategori{
  background-color: #fff;
  padding: 60px 0 ;
}

#boxnewgoglobalprogram{
  background-image: url(img/bg-go-global-program.png);
  background-position: bottom right;
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 20vh 0 ;
}

#boxfonderempower{
  background-color: #fff;
  padding: 10vh 0 ;

}

#box2daypitch{
  padding: 10vh 0 ;

}

#box2daypitch h2{
 font-size: 3rem;
 font-weight: bold; 
 text-transform: uppercase;
 line-height: 3.5rem
}

#boxcelebrityjudge{
  background-color: #fff;
  padding:60px 0;
}


/* END WHATS NEW PAGE */

/* START MEMBER AREA */
.boxmemberstep{
  transition: transform .5s ease;
}

.reg-check-member{
  position: absolute;
  right: -20px;
  top:-20px;
  font-size: 3rem !important;
  color: #35f02e;
}

.boxmemberstep h5{
  font-size: 1.1rem;
}

.boxmemberstep .bi {
  font-size: 4rem;
}

.boxmemberstep:hover{
  transform: scale(1.1);
}

#boxdatadiri{
  /* background-color: #1265b5; */
  border-color:#1265b5 ;
  color: #1265b5 ;
}

#boxirl{
  /* background-color: #a8c93d; */
  border-color: #5a7700;
    color: #5a7700;
}

#boxdataperusahaan{
  /* background-color: #f02536; */
  border-color:#f02536 ;
  color: #f02536 ;
}


.boxidisable:hover{
  background-color: #8a8a8a !important;
  color: #2e2e2e;

}

@media(max-width:576px) {
  #member-usaha-box .nav-step .nav-step-item:not(:last-child){
    margin-right: 0.5rem;
  }
  #member-usaha-box .nav-step .nav-step-item .number{
    width : 2rem;
    height: 2rem;
    font-size: 1rem;
  } 
}


/* END MEMBER AREA */

/* START WORKSHOP PAGES */

.blog-home5 {
	color: #8d97ad;
  font-weight: 300;
}

.blog-home5 h1, .blog-home5 h2, .blog-home5 h3, .blog-home5 h4, .blog-home5 h5, .blog-home5 h6 {
  color: #1f2229;
}

.blog-home5 .card-title {
	font-size: 18px;
}

.blog-home5 .subtitle {
    color: #000000;
    line-height: 24px;
}

.blog-home5 .card.card-shadow {
    -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
    box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}

.blog-home5 .b-h-box .card-img-overlay {
  bottom: 0px;
  top: auto;
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  height: 35%;
}

.blog-home5 .b-h-box .card-title {
    color: #ffffff;
}

.blog-home5 .b-h-box {
	color: #ffffff;
}

.blog-home5 .b-h-box .card-text {
  display: none;
}

.blog-home5 .b-h-box:hover {
  color: #8d97ad;
}

.blog-home5 .b-h-box:hover .card-img-overlay {
  height: 100%;
  background: #ffffff;
  border: 3px solid rgba(120, 130, 140, 0.13);
}

.blog-home5 .b-h-box:hover .card-title {
  color: #263238;
  margin: 15px 0;
}

.blog-home5 .b-h-box:hover .card-text {
  display: block;
}

.blog-home5 .bg-danger-gradiant {
    background: #ff4d7e;
    background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
    background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
    background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
    background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
    background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}

.blog-home5 .font-14 {
	font-size: 14px;
}

@media (max-width:768px) {
	.blog-home5 .b-h-box .card-img-overlay {
		height: 40%;
	}
}

/* END WORKSHOP PAGES */

/* START TENTANG KAMI PAGES */
.tentang-kami-pages h2 {
  font-size: 4.5rem;
  font-weight:bold;
  padding-left: 6%;
  color: #000;
  line-height: 70px;
}

.tentang-kami-pages p{
  font-size: larger;
    text-align: justify;
    padding-left: 6%;
}

/* END TENTANG KAMI PAGES */

.boxfooterh{
  height: 160px;
}

#overlay{	
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-left: 4px #e14d2f solid;
  border-top: 4px #2e93e6 solid;
  border-right: 4px #afc522 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}
.is-hide{
  display:none;
}