@import url("sections/sertifikasi.css");
@import url("sections/alur-sertifikasi-page.css");
@import url("sections/mitra-page.css");
@import url("sections/contact-page.css");
@import url("sections/skema-detail.css");
@import url("sections/manage-skema.css");
@import url("sections/edit-skema.css");
@import url("sections/tuk.css");
@import url("sections/stats.css");


/* ======================
   GLOBAL
====================== */

html{
scroll-behavior: smooth;
}

/* SECTION OFFSET */

#about{
scroll-margin-top: 100px;
}

/*Text*/
.lsp-text{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#475569;
}


/* ======================
   BREADCRUMB
====================== */

.lsp-breadcrumb{
margin-top:85px;
padding:8px 0 4px;
text-align:center;
margin-bottom: -30px;
}

.lsp-breadcrumb .lsp-container{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
font-size:14px;
}

/* HOME */

.breadcrumb-home{
display:flex;
align-items:center;
gap:6px;
text-decoration:none;
color:#e2e8f0;   /* putih cerah */
transition:.2s;
}

.breadcrumb-home:hover{
color:#f8fafc;   /* hampir putih */
}

/* ICON */

.breadcrumb-home img{
width:16px;
height:16px;
opacity:0.9;
}

/* ARROW */

.breadcrumb-arrow{
width:14px;
height:14px;
opacity:0.6;
}

/* CURRENT PAGE */

.lsp-breadcrumb .current{
color:#f1f5f9;   /* lebih terang dari home */
font-weight:500;
}

.lsp-container{
max-width:1100px;
margin:auto;
padding:0 40px;
}

/* ======================
   SECTION TITLE
====================== */

.section-title{
font-size:34px;
text-align:center;
margin-bottom:50px;
position:relative;
}

/* garis bawah */

.section-title::after{
content:"";
display:block;
width:60px;
height:3px;
background:#f7931a;
margin:15px auto 0;
border-radius:2px;
}

/* ======================
   HEADER / NAVBAR
====================== */

.lsp-header{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
padding:20px 40px;
background:transparent;
color:white;
position:fixed;
width:100%;
top:0;
left:0;
z-index:999;
transition:all 0.3s ease;
}

.lsp-header.scrolled{
background:rgba(15,23,42,0.9);
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

/* LOGO */

.lsp-logo a{
font-size:22px;
font-weight:bold;
color:white;
text-decoration:none;
}

/* ======================
   MENU
====================== */

.lsp-menu{
display:flex;
justify-content:center;
gap:30px;
}

.lsp-menu a{
position:relative;
margin:0 15px;
color:white;
text-decoration:none;
transition:0.3s;
}

.lsp-menu a:hover{
color:#facc15;
}

/* underline animation */

.lsp-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#facc15;
transition:0.3s;
}

.lsp-menu a:hover::after{
width:100%;
}

/* BUTTON DAFTAR */

.lsp-daftar{
background:#334155;
color:white;
padding:10px 20px;
border-radius:6px;
text-decoration:none;
font-weight:500;
transition:0.3s;
margin-left:auto;
margin-right:10px;
}

.lsp-daftar:hover{
opacity:0.9;
color:white;
}

.lsp-daftar::after{
display:none;
}

/* ======================
   DROPDOWN
====================== */

.lsp-dropdown{
position:relative;
}

.lsp-dropdown-menu{
position:absolute;
top:100%;
left:0;
background:white;
min-width:200px;
border-radius:6px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
overflow:hidden;
display:none;
z-index:1000;
}

.lsp-dropdown-menu a{
display:block;
padding:12px 15px;
color:#1e293b;
text-decoration:none;
}

.lsp-dropdown-menu a:hover{
background:#f1f5f9;
}

.lsp-dropdown.active .lsp-dropdown-menu{
display:block;
}

/* ======================
   HERO SECTION
====================== */

.lsp-hero{
position:relative;
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
color:white;
padding-top: 40px;
}

.lsp-logo-hero{
width:180px;
margin-bottom:20px;
}

.lsp-hero-content{
position:relative;
z-index:2;
max-width:1200px;
margin:auto;
margin-top:100px;
}

.lsp-hero-content h1,
.lsp-hero-content h2,
.lsp-hero-content p{
color:white !important;
}

.lsp-hero-content h1{
font-size:32px;
letter-spacing:3px;
margin-bottom:10px;
}

.lsp-hero-content h2{
font-size:70px;
font-weight:bold;
margin:10px 0;
}

.hero-button{
display:inline-block;
margin-top:25px;
padding:12px 28px;
background:#1e40af; /* navy blue */
color:white;
text-decoration:none;
font-weight:600;
border-radius:8px;
letter-spacing:1px;
transition:all 0.3s ease;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.hero-button:hover{
background:#1d4ed8; /* lebih terang saat hover */
color:white;
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(0,0,0,0.35);
}

/* ======================
   BACKGROUND SLIDER
====================== */

.lsp-background{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
z-index:-1;
overflow:hidden;
background:#0f172a;
}

/* slide */

.bg-slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;

opacity:0;
transition:opacity 1.2s ease;

will-change:opacity;
}

/* slide aktif */

.bg-slide.active{
opacity:1;
}

/* images */

.bg-slide:nth-child(1){
background-image:url('https://plus.unsplash.com/premium_photo-1682144333631-eac578433ea1?q=80&w=1170&auto=format&fit=crop');
}

.bg-slide:nth-child(2){
background-image:url('https://images.unsplash.com/photo-1516937941344-00b4e0337589?w=1000&auto=format&fit=crop');
}

.bg-slide:nth-child(3){
background-image:url('https://images.unsplash.com/photo-1565008447742-97f6f38c985c');
}

/* ======================
   SECTION
====================== */

.lsp-section{
padding:80px 20px;
text-align:center;
}

.lsp-section h2{
font-size:32px;
margin-bottom:20px;
}

/* ======================
   WHY SECTION
====================== */

.lsp-why{
padding:70px 0;
text-align:center;
margin-bottom:80px;
}

/* TITLE */

.lsp-why-title{
font-size:34px;
margin-bottom:10px;
}

.lsp-why-sub{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#475569;
margin-bottom:50px;
}

/* ROW */

.lsp-why-row{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

/* BOX */

.lsp-why-box{
background:#f7931a;
color:white;
padding:30px;
border-radius:15px;
width:300px;
transition:0.3s;
}

/* hover effect */

.lsp-why-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

/* ICON */

.lsp-why-icon{
width:60px;
margin-bottom:15px;
}

/* TEXT */

.lsp-why-box h3{
margin-bottom:10px;
font-size:20px;
}

.lsp-why-box p{
font-size:14px;
line-height:1.6;
}

.lsp-why .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}

/* ======================
   ABOUT SECTION
====================== */

/* ABOUT INTRO */

.lsp-about-intro{
text-align:center;
max-width:800px;
margin:0 auto 50px;
}

.lsp-about-intro p{
color:#475569;
line-height:1.7;
margin-bottom:20px;
}

.lsp-about{
position:relative;
padding:80px 0;
overflow:hidden;
margin-top:80px;
}

/* background shape */

.lsp-about-shape{
position:absolute;
top:-120px;
right:-120px;
width:420px;
height:420px;
background:rgba(59,130,246,0.08);
border-radius:50%;
z-index:0;
}

/* layout */

.lsp-about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
position:relative;
z-index:1;
}

.lsp-about .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}


/* ABOUT TEXT */

.lsp-about-text{
text-align:center;
max-width:800px;
margin:0 auto;
}

.lsp-about-text p{
color:#475569;
line-height:1.7;
margin-bottom:20px;
}

/* button */

.about-button{
display:inline-block;
padding:12px 26px;
background:#1e40af;
color:white;
text-decoration:none;
border-radius:6px;
transition:0.3s;
}

.about-button:hover{
background:#1d4ed8;
}

/* image */

.lsp-about-image{
max-width:900px;
margin:0 auto 40px;
}

.about-image{
width:100%;
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* ======================
   LEGALITAS
====================== */

.lsp-legalitas{
margin-top:40px;
}

.lsp-legalitas h3{
font-size:22px;
margin-bottom:20px;
color:#0f172a;
}

.legalitas-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top: 40px;
}

.legalitas-card{
background:white;
padding:20px;
border-radius:10px;
border:1px solid #e2e8f0;
transition:0.3s;
}

.legalitas-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

.legalitas-card h4{
font-size:14px;
color:#64748b;
margin-bottom:6px;
}

.legalitas-card p{
font-weight:600;
color:#0f172a;
font-size:15px;
}

/* highlight lisensi */

.legalitas-card.highlight{
background:#1e40af;
color:white;
}

.legalitas-card.highlight h4{
color:#cbd5f5;
}

.legalitas-card.highlight p{
color:white;
}

/* ======================
   VISION SECTION
====================== */

.lsp-vision{
padding:80px 0;
}

.vision-box{
background:#0f172a;
color:white;
padding:60px;
border-radius:14px;
text-align:center;
margin-bottom:70px;
}

.vision-box h2{
font-size:34px;
margin-bottom:20px;
}

.vision-box p{
max-width:800px;
margin:auto;
line-height:1.8;
font-size:18px;
}

/* ======================
   VISION MISSION SECTION
====================== */

.lsp-vision-mission{
padding:90px 0;
}

.lsp-vision-mission .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}

/* ======================
   VISION & MISSION
====================== */

.lsp-vision-mission{
padding:90px 0;
}

.lsp-vision-mission .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}

/* ======================
   VISION
====================== */

.vision-content{
text-align:center;
margin-bottom:70px;
}

.vision-title{
font-size:34px;
margin-bottom:20px;
}

.vision-text{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#475569;
}

/* ======================
   MISSION
====================== */

.mission-title{
text-align:center;
font-size:32px;
margin-bottom:40px;
}

/* ======================
   MISSION LINK
====================== */

.mission-more{
display:flex;
justify-content:center;
margin-top:40px;
}

.mission-link{
display:inline-flex;
align-items:center;
gap:6px;
color:#1e40af;
text-decoration:none;
font-weight:500;
font-size:15px;
transition:.25s;
}

/* hover */

.mission-link:hover{
color:#1d4ed8;
}

/* arrow */

.arrow-icon{
width:16px;
height:16px;
transition:.25s;
}

/* arrow move */

.mission-link:hover .arrow-icon{
transform:translateX(4px);
}

/* arrow */

.mission-arrow{
width:18px;
height:18px;
transition:.25s;
}

/* arrow animation */

.btn-mission:hover .mission-arrow{
transform:translateX(4px);
}

/* GRID */

.mission-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* ======================
   MISSION CARD
====================== */

.mission-card{
background:#ffffff;
padding:30px;
border-radius:12px;
border:1px solid #e2e8f0;
transition:all .3s ease;
position:relative;
overflow:hidden;
}

/* hover */

.mission-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

/* number */

.mission-number{
font-size:38px;
font-weight:700;
color:#f7931a;
display:block;
margin-bottom:12px;
}

/* text */

.mission-card p{
color:#475569;
line-height:1.7;
font-size:15px;
}

/* center last item */

.mission-card:nth-child(7){
grid-column:2;
}

/* ======================
   CONTACT SECTION
====================== */

.contact-title{
text-align:center;
font-size:34px;
margin-bottom:50px;
position:relative;
}

.contact-title::after{
content:"";
display:block;
width:60px;
height:3px;
background:#f7931a;
margin:15px auto 0;
border-radius:2px;
}

.lsp-contact{
padding:90px 0;
}

.lsp-contact .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}

/* GRID */

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

/* IMAGE */

.contact-image img{
width:100%;
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* CONTENT */

.contact-content p{
max-width:850px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#475569;
margin-bottom:25px;
}

/* ======================
   CONTACT INFO
====================== */

.contact-info{
margin:25px 0;
}

.contact-item{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
font-size:15px;
color:#475569;
}

/* ICON SVG */

.contact-item svg,
.contact-item img{
width:20px;
height:20px;
flex-shrink:0;
color:#f7931a;
}

/* ======================
   CONTACT BUTTONS
====================== */

.contact-buttons{
display:flex;
gap:18px;
margin-top:25px;
flex-wrap:wrap;
}

/* BUTTON BASE */

.contact-buttons a{
display:flex;
align-items:center;
gap:10px;
padding:14px 26px;
border-radius:8px;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:all .25s ease;
}

/* BUTTON ICON */

.contact-buttons img,
.contact-buttons svg{
width:22px;
height:22px;
flex-shrink:0;
}

/* ======================
   WHATSAPP BUTTON
====================== */

.btn-wa{
background:#25D366;
color:white;
}

.btn-wa:hover{
background:#20b358;
color: white;
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* ======================
   EMAIL BUTTON
====================== */

.btn-email{
background:#ea4335;
color:white;
}

.btn-email:hover{
background:#d73b2d;
color: white;
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* ======================
   LOCATION SECTION
====================== */

.lsp-location{
padding:90px 0;
}

.lsp-location .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}

/* WRAPPER */

.location-wrapper{
position:relative;
margin-top:30px;
}

/* MAP */

.location-map iframe{
width:100%;
height:420px;
border:0;
border-radius:14px;
}

/* CARD */

.location-card{
position:absolute;
bottom:30px;
left:30px;
background:white;
padding:25px 30px;
border-radius:10px;
box-shadow:0 15px 35px rgba(0,0,0,0.15);
max-width:320px;
}

/* TITLE */

.location-title{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.location-title img{
width:22px;
height:22px;
}

.location-card p{
color:#64748b;
line-height:1.6;
margin-bottom:15px;
}

/* BUTTON */

.btn-map{
display:inline-block;
background:#1e40af;
color:white;
padding:10px 16px;
border-radius:6px;
text-decoration:none;
font-size:14px;
transition:.25s;
}

.btn-map:hover{
background:#1d4ed8;
color:white;
}

.location-card{
transition:.3s;
}

.location-card:hover{
transform:translateY(-3px);
}

/* ======================
   PARTNERS
====================== */

.lsp-partners{
padding:90px 0;
}

.lsp-partners .lsp-container{
background:#cfe4ff;
padding:60px;
border-radius:14px;
max-width:1100px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
backdrop-filter:blur(2px);
}

/* SLIDER */

.partners-slider{
overflow:hidden;
position:relative;
margin-top:40px;
}

/* FADE EFFECT */

.partners-slider::before,
.partners-slider::after{
content:"";
position:absolute;
top:0;
width:120px;
height:100%;
z-index:2;
}

.partners-slider::before{
left:0;
background:linear-gradient(to right,#fff,transparent);
}

.partners-slider::after{
right:0;
background:linear-gradient(to left,#fff,transparent);
}

/* TRACK */

.partners-track{
display:flex;
gap:60px;
align-items:center;
animation:partnersScroll 25s linear infinite;
}

/* PAUSE HOVER */

.partners-slider:hover .partners-track{
animation-play-state:paused;
}

/* LOGO */

.partners-track img{
height:55px;
opacity:0.6;
transition:.3s;
}

.partners-track img:hover{
opacity:1;
transform:scale(1.05);
}

/* ======================
   PARTNERS LINK
====================== */

.partners-more{
display:flex;
justify-content:center;
margin-top:50px;
}

.partners-link{
display:inline-flex;
align-items:center;
gap:6px;
color:#1e40af;
font-weight:500;
text-decoration:none;
font-size:15px;
transition:.25s;
}

.partners-link:hover{
color:#1d4ed8;
}

/* arrow */

.arrow-icon{
width:16px;
height:16px;
transition:.25s;
}

.partners-link:hover .arrow-icon{
transform:translateX(4px);
}

/* ANIMATION */

@keyframes partnersScroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* ======================
   RESPONSIVE
====================== */

@media (max-width:992px){

.mission-grid{
grid-template-columns:repeat(2,1fr);
}

.mission-card:nth-child(7){
grid-column:auto;
}

}

/* ======================
   MOBILE
====================== */

@media (max-width:768px){

.contact-grid{
grid-template-columns:1fr;
gap:35px;
}

.contact-content{
text-align:center;
}

.contact-buttons{
justify-content:center;
}

.contact-buttons a{
width:100%;
justify-content:center;
}

}

/* ======================
   FOOTER
====================== */

.lsp-footer{
background:#0f172a;
color:white;
text-align:center;
padding:30px;
margin-top:60px;
}

/* ======================
   MOBILE MENU
====================== */

.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px;
z-index:1003;
}

.menu-toggle span{
width:25px;
height:3px;
background:white;
display:block;
transition:0.3s;
}

.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

.menu-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:999;
pointer-events:none;
}

.menu-overlay.active{
opacity:1;
visibility:visible;
pointer-events:auto;
}





/* ======================
   RESPONSIVE MOBILE
====================== */

@media (max-width:768px){

/* CONTAINER */

.lsp-container{
padding:0 20px;
}

/* HEADER */

.lsp-header{
grid-template-columns:auto auto;
}

.menu-toggle{
display:flex;
}

/* HERO */

.lsp-hero{
padding:0 20px;
}

.lsp-hero-content{
margin-top:120px;
}

.lsp-logo-hero{
width:80px;
margin-bottom:15px;
}

.lsp-hero-content h1{
font-size:18px;
letter-spacing:2px;
}

.lsp-hero-content h2{
font-size:36px;
line-height:1.2;
}

.hero-button{
padding:10px 22px;
font-size:14px;
}

/* MOBILE SIDEBAR MENU */

.lsp-menu{
position:fixed;
top:0;
right:-100%;
height:100vh;
width:260px;
background:#0f172a;
flex-direction:column;
padding-top:40px;
transition:0.4s;
z-index:1002;
overflow-y:auto;
}

.lsp-menu.active{
right:0;
}

/* MENU LINKS */

.lsp-menu a{
display:block;
margin:3px 0;
padding:10px 20px;
text-align:left;
font-size:16px;
}

/* BUTTON DAFTAR HIDDEN */

.lsp-daftar{
display:none;
}

/* BUTTON DAFTAR DI MENU */

.lsp-menu::after{
content:"Daftar";
display:block;
margin:20px;
padding:10px;
background:#334155;
color:white;
text-align:center;
border-radius:6px;
}

/* DROPDOWN */

.lsp-dropdown{
width:100%;
position:relative;
}

/* SUBMENU */

.lsp-dropdown-menu{
position:relative;
top:0;
left:0;
width:100%;
background:none;
box-shadow:none;
border-radius:0;
display:none;
}

.lsp-dropdown-menu.show{
display:block;
}

/* SUBMENU LINKS */

.lsp-dropdown-menu a{
padding:10px 45px;
font-size:14px;
color:#cbd5f5;
display:block;
}

.lsp-dropdown-menu a:hover{
background:rgba(255,255,255,0.05);
}

/* WHY SECTION MOBILE */

.lsp-why-row{
flex-direction:column;
align-items:center;
gap:20px;
}

.lsp-why-box{
width:100%;
max-width:320px;
margin:auto;
}

/* ABOUT */

.lsp-about-grid{
grid-template-columns:1fr;
gap:30px;
text-align:center;
}

.lsp-about-image{
order:-1;
}

/* LEGALITAS */

.legalitas-grid{
grid-template-columns:1fr;
}

/* ======================
   VISION MOBILE
====================== */

.lsp-vision-mission .lsp-container{
padding:40px 25px;
}

.vision-title{
font-size:28px;
}

.vision-text{
font-size:16px;
}

.mission-title{
font-size:28px;
}

.mission-grid{
grid-template-columns:1fr;
}

.mission-card{
padding:25px;
}

/*contact mobile*/

.contact-grid{
grid-template-columns:1fr;
}

.contact-content{
text-align:center;
}

.contact-buttons{
justify-content:center;
}

/*Location*/

.location-card{
position:relative;
bottom:auto;
left:auto;
margin-top:20px;
max-width:100%;
}

.location-map iframe{
height:300px;
}

.partners-track{
gap:40px;
}

.partners-track img{
height:40px;
}

.lsp-breadcrumb{
margin-top:75px;
padding: 6px 0 2px;
margin-bottom: -80px;
}

.lsp-breadcrumb .lsp-container{
font-size:13px;
gap:6px;
}

.breadcrumb-home img{
width:14px;
}

.breadcrumb-arrow{
width:12px;
}

.sertifikasi-box,
.alur-box,
.mitra-box,
.contact-box,
.lsp-mitra-page .lsp-container{
background:#cfe4ff;
}

.contact-form{
background:#ffffff;
padding:30px 22px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-top:40px;
}

.sertifikasi-item{
display:flex;
align-items:center;
gap:20px;
padding:18px 22px;
border:1px solid #e2e8f0;
border-radius:10px;
background:#f8fafc;
transition:.25s;
}

.sertifikasi-list{
display:flex;
flex-direction:column;
gap:18px;
}

.sertifikasi-desc{
max-width:850px;
font-size: 18px;
margin:0 auto 50px;
text-align:center;
color:#475569;
line-height:1.8;
}

.sertifikasi-no{
font-size:20px;
font-weight:700;
color:#f7931a;
min-width:35px;
}

/* text */

.sertifikasi-item p{
margin:0;
font-size:15px;
color:#334155;
}

.alur-step ul{
display: inline-block ;
text-align: left;
margin-top: 10px;
padding-left:20px;
font-size:15px;
color:#475569;
line-height:1.6;
}

.alur-step:not(:last-child)::after{
content:"↓";
display:block;
text-align:center;
font-size:34px;
margin:22px 0;
color:#94a3b8;
}

.alur-step{
padding-bottom:10px;
}

}