:root {
  --color-dark:#112D54;
  --e-global-color-accent: #549FFF;
  --gradient:linear-gradient(0deg, rgba(33,120,247,1) 0%, rgba(84,159,255,1) 100%);;
  --font-body:'Inter';
  --font-title:'Open Sans';
}

body {
    background-image: url(https://raflesenergindo.id/wp-content/uploads/2023/12/bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: var(--font-body);
}

h1,h2,h3,h4,h5,h6 {font-family: var(--font-title);}
.homesection {
    padding: 10rem 0;
  }
  #hero {
    background-image: url('../background.jpg'); padding: 0 0 5rem; background-size: cover; background-position: center; background-color: rgba(7, 26, 55, 0.9); background-blend-mode: multiply;
  }
  .headwrap {
    padding: 2rem 0;
  }
  .header {
    background: #fff;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .topbar {background: var(--gradient); padding: 12px 0;}
  .toplist {margin:0}
  .toplist li {margin: 0 15px 0 0; display: inline-block;}
  .toplist li a {display: flex; color: #fff;font-size: 14px; align-items: center;}
  .toplist li a i {margin-right: 5px; padding: 5px; background: rgba(255, 255, 255, 0.16); color: #fff; border-radius: 4px; width: 25px; text-align: center;}
  .toplist .icon-background {width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; padding: 5px; margin-right: 5px; background: rgba(255, 255, 255, 0.16);}
  .topbar-wrapper {display: flex;justify-content: center;align-items: center;font-size: 13px;color: #f7f7f7;}
  .wrap-header {text-align: center; background: var(--color-dark); padding: 20px 0;}
  .site-header img {width: 14rem;padding: 10px;background: #fff;border-radius: 10px;}
  .wrap-header.sticky{position:fixed;top:0;width:100%;z-index:99;animation:scrollme 300ms linear forwards}
  .wrap-header .container{display:flex;align-items:center;justify-content:space-between}
  .headright a {font-family:var(--font-body);color: rgba(255, 255, 255, 0.9);padding: 0.625rem 1.25rem;border-radius: 8px;line-height: 1.5;cursor: pointer;transition: all 0.15s ease-in;display: inline-block;}
  
.herotitle {
    max-width: 650px;
    text-align: center;
    margin: 10rem auto 5rem;
  }
  .herotitle h1 {
    font-size: 44px;
    margin-bottom: 15px;
    background: linear-gradient(to bottom,#FFF 38%,#509cfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 7px 9px rgba(175,208,253,0.43);text-transform: uppercase;
  }
  .herotitle span {
    color: #f7f7f7;line-height: 32px;
  }
  #serv{padding: 0 0 6rem;}
  .container-search{max-width: 750px; margin: -3rem auto 6rem;}
  .wrap-search{background: #fff; padding: 10px; border-radius: 7px; box-shadow: 0 8px 15px -5px rgba(28, 24, 102, 0.18);}
  .search-bar{display: flex; align-items: center; position: relative;}
  .search-bar input{font-size: 16px; padding: 18px 15px; border: 1.8px dashed rgba(1, 1, 1, 0.31); width: 100%; transition: all .3s ease; border-radius: 8px;}
  .search-bar input::placeholder{color:#606060;font-weight:400}
  .btn-track{font-weight: bold;border: 0; padding: 12px 30px; font-size: 16px; border-radius: 8px; box-shadow: 0 6px 9px -7px rgba(1,1,1,0.05); display: flex; align-items: center; position: absolute; right: 15px;color: #fff;
    background-color: var(--e-global-color-accent);
    border: 1px solid;
    border-color: var( --e-global-color-accent );
    box-shadow: 0px 12px 25px 5px rgba(83.99999999999999, 159.00000000000014, 255, 0.35);}
    .btn-gradient{background:var(--bs-primary);background:-webkit-linear-gradient(to right,var(--bs-primary),var(--bs-secondary));background:linear-gradient(to right,var(--bs-primary),var(--bs-secondary));color:#fff}
    .btn-light{
      color: #fff;
      background-color: var(--e-global-color-accent);
      border: 1px solid;
      border-color: var( --e-global-color-accent );
      box-shadow: 0px 12px 25px 5px rgba(83.99999999999999, 159.00000000000014, 255, 0.35);}
      .btn-llight:hover{
        color: #fff;
        background-color: var(--e-global-color-accent);
        border: 1px solid;
        border-color: var( --e-global-color-accent );
        box-shadow: 0px 12px 25px 5px rgba(83.99999999999999, 159.00000000000014, 255, 0.35);}  
      .btn-track svg{margin-left:5px}
  .search-bar input:focus-visible{outline: 0; border: 1.8px solid var(--bs-secondary);}

.title1 {background: linear-gradient(to bottom,#FFF 38%,#509cfe 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 0 7px 9px rgba(175,208,253,0.43);}
.sertif{display:flex;margin:3rem 0;columns:2;gap:20px}
.item_sertif{width:50%;float:left; padding: 10px 10px 10px 10px;
  background-color: #FFFFFF1F;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  border-color: var(--e-global-color-accent);
  border-radius: 14px 14px 14px 14px;}
.wrap_sertif,.wrap_sertif img{border-radius:15px;width:100%}
.isi_sertif{position:absolute;bottom:-77px;z-index:2;padding:1.5rem;transition:all .3s ease;}
.btn-xl{padding: 16px 32px;}
.wrap_sertif{position:relative;overflow:hidden}
.isi_sertif h3{color:#f7f7f7;background: linear-gradient(to bottom,#FFF 38%,#509cfe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 7px 9px rgba(175,208,253,0.43);}
.isi_sertif p{color:#f7f7f7;font-size: 16px;}
.isi_sertif a{display: inline-block;border: 0;
  line-height: 1.5;text-align: center;
  vertical-align: middle;
  cursor: pointer;user-select: none;font-size: 14px;
  border-radius: 8px;
  transition: all 0.15s ease-in;}
.wrap_sertif:hover .isi_sertif{bottom:0}
.wrap_sertif:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 40%,#000 57%);opacity:.6;height:100%;bottom:0;content:"";display:block;width:100%;position:absolute;z-index:1}

#site-footer{background:#000A27;border-top-right-radius:5rem}
.footer-widget{padding:6rem 0 4rem}
.footer-widget .cntr{align-items: center;display:flex;justify-content:space-between}
.footer-widget .cntr h4{font-size:26px;width:60%;background:linear-gradient(to bottom,#FFF 38%,#509cfe 100%);background-clip:border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 7px 9px rgba(175,208,253,0.43);text-transform:uppercase;font-weight:700}
.footer-widget .cntr a{padding:16px 32px!important; border-radius: 8px;}
.footer-credits .cntr{padding-top:20px;padding-bottom:20px;border-top:1px solid rgba(255,255,255,0.21);border-bottom:1px solid rgba(255,255,255,0.21);display:flex;align-items:center;justify-content:space-between}
.copyr{font-family: var(--font-title); margin:0;color:#b1b1b1;font-size:14px}
.copyr a{color:#b1b1b1}
.foot-menu{display:flex;list-style:none;margin:0}
.foot-menu li{margin:0 0 0 15px;}
.foot-menu li a{color:#b1b1b1}
.foot-bottom .cntr{padding:2.5rem 0;display:flex;justify-content:space-between}
.logofoot img{width:220px}
.sosfoot{display:flex;list-style:none;margin:0}
.sosfoot li a{font-size:18px;color:#f7f7f7}
.sosfoot li{margin:0 0 0 20px}
.w700{max-width: 700px;}

.m-0{margin:0 !important}
.p-0{padding:0 !important}
.m-t-15{margin-top:15px !important}.m-l-15{margin-left:15px !important}.m-r-15{margin-right:15px !important}.m-b-15{margin-bottom:15px !important}
.m-t-30{margin-top:30px !important}.m-l-30{margin-left:30px !important}.m-r-30{margin-right:30px !important}.m-b-30{margin-bottom:30px !important}
.m-t-40{margin-top:40px !important}.m-l-40{margin-left:40px !important}.m-r-40{margin-right:40px !important}.m-b-40{margin-bottom:40px !important}
.m-t-10{margin-top:10px !important}.m-l-10{margin-left:10px !important}.m-r-10{margin-right:10px !important}.m-b-10{margin-bottom:10px !important}
.m-t-7{margin-top:7px !important}.m-l-7{margin-left:7px !important}.m-r-7{margin-right:7px !important}.m-b-7{margin-bottom:7px !important}
.p-t-15{padding-top:15px !important}.p-l-15{padding-left:15px !important}.p-r-15{padding-right:15px !important}.p-b-15{padding-bottom:15px !important}
.p-t-10{padding-top:10px !important}.p-l-10{padding-left:10px !important}.p-r-10{padding-right:10px !important}.p-b-10{padding-bottom:10px !important}


.foot-menu li:hover a{color: #fff;}


.ustep{margin:0 0 3rem;width:100%;display:inline-block}
.instep{margin:0;padding:0;list-style:none;display:flex}
.instep li{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;width:100%}
.imgdok{padding:1rem;border-radius:100%;background-image:linear-gradient(310deg,#627594 0%,#a8b8d8 100%)}
.imgdok img{width:50px}
.instep li b{color:#FFF; font-size:16px;padding:0 9%;margin:1rem 0}
.instep li span {color: #FFFFFFB5}
.done .imgdok{background-image:linear-gradient(90deg,#24ae73 0%,#1dac41 100%) !important;     box-shadow: 0 12px 20px -5px rgba(84,159,255,0.40);}
.instep li:last-child:after{display:none}
.instep li:after{content:"";padding:1.5px;width:45%;position:absolute;left:78%;top:21%;background:#8E9FBE}
.done:after{background:#1dac41 !important}

.notfound{max-width:750px;margin:0 auto}.wrapnot{padding:1rem;background:#ffd8d8;color:#ff2525;font-size:16px;font-weight:700;border-radius:8px;display:flex;align-items:center;justify-content:center}.wrapnot svg{padding:10px;background:#ff2525;stroke:#fff;margin-right:10px;border-radius:7px}

.info-berkas {
  background: linear-gradient(to bottom, #082751, #244A7E);
  background-clip: border-box;
  border: 1px solid #2178F7;
  color: #ffffffe7;
  margin-bottom: 1.2rem;
}

.text-pengumuman {font-size: 16px;margin: 0;}
.footnote h3{color:#fff;font-weight:700;font-size:24px;margin:0 0 1.2rem}
.footnote{padding:0 0 0 1rem}
.listnote{display:grid;grid-gap:10px;padding:1rem;background:linear-gradient(to bottom,#082751,#244A7E);background-clip:border-box;border:1px solid #2178F7;margin:0 0 1.5rem;border-radius:10px;box-shadow:0 0 2rem 0 rgba(136,152,170,0.15)}
.listnote p{margin:0;color:rgba(255,255,255,0.77)}
.listnote span{color:rgba(255,255,255,0.84);display:flex;align-items:center;grid-gap:7px}
.listnote span svg{width:20px;height:20px}

@media (max-width:768px){
  .site-header{margin: 0 auto;}
  .site-header img{width: 14rem;}
  .topbar .toplist li:nth-child(1),
    .topbar .toplist li:nth-child(2) {
        display: none;
    }
  .titlebg{width:90% !important;font-size:18px;letter-spacing:.3px}
  .container{padding: 0 10px; margin: 0;}
    .headright{display: none;}
    .navbar-logo img{width:250px}
.navbar-logo{text-align:center}
.header{justify-content:center}
.herotitle{margin:2rem auto}
.herotitle h1{font-size:26px}
.herotitle span{font-size:12px;line-height:21px}
.btn-track b{display:none;}
.container-search{padding:0 15px}
.btn-track{padding:12px 13px}
.btn-track svg{margin:0}.sertif{columns:1;flex-wrap:wrap}
.item_sertif{width:100%}
.wrap_sertif,.wrap_sertif img{border-radius:10px}
.isi_sertif h3{font-size:16px}
.isi_sertif p{font-size:12px}
.btn-xl{padding:10px 26px;font-size:12px}
.isi_sertif{padding:1rem;bottom:-58px}
#site-footer{border-top-right-radius:3rem}
.footer-widget .cntr{flex-direction: column; justify-content: start; align-items: start;}
.footer-widget .cntr h4{width:100%;font-size:16px;text-align:left;line-height:30px;margin-bottom:2rem}
.footer-credits .cntr{justify-content:start;flex-direction:column;align-items: flex-start;}
.copyr{font-size:12px}.foot-menu{padding: 0; margin-top: 1rem;}
.foot-menu li{font-size: 12px; margin: 0 15px 0 0;}
.foot-bottom .cntr{flex-direction:column;justify-content:start}
.sosfoot{padding:0;margin:1rem 0 0}
.sosfoot li{margin:0 15px 0 0}

.infoot ul{flex-direction:column;align-items:baseline}
.infoot ul li{font-size:14px;margin-bottom:1rem}
.infoot ul li:last-child{margin:0}
.instep{flex-wrap:wrap}
.instep li{width:50%;margin-bottom:2rem}
.instep li b{padding: 0;font-size:14px}
.instep li span{font-size:14px}
.instep li:nth-child(2n):after{display:none}
.instep li::after{top:25%}
}

@media (max-width:450px){
  .wrapnot{flex-direction:column;text-align:center}.wrapnot svg{margin:0 0 10px}
.instep li::after{top: 22%; width: 40%; left: 80%;}
}

.img-result img {
	object-fit: cover;
	width: 50%;
}
.icon-shape {
	width: 70px;
	height: 70px;
	background-position: center;
	border-radius: 0.75rem;
	object-fit: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bg-gradient{
  background:linear-gradient(90deg, #1D1665 0%, #0077A2 100%)!important;
}
.titlebg {
	width: 50%;
	padding: 10px 23px;
	border-radius: 25px 0 25px 0px;
	color: #fff;
}
.inner-result {
	position: relative;
}
.line {position: absolute; top: 20%; background-color: #222226; width: 61%; height: 3px; right: -35%;}
.inner-result h6{padding: 0 5%; text-align: center; margin: 1rem 0 10px;}


.btn-hover:hover{
  transform: translateY(-3px);
  transition:all .3s ease-in-out;
}

.btn-hover{
  transform:translateY(0);
  transition:all .3s ease-in-out;
}
.notfoundnote{padding:1rem;margin:0;background:rgba(255,255,255,0.07);border:1px solid var(--bs-danger);border-radius:8px;color:#fff}