/*==================================================
    GLOBAL
==================================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Poppins',sans-serif;
    background:#f8f9fa;
    color:#333;
    overflow-x:hidden;
}
section{
    overflow:hidden;
}

/*==================================================
    TOP BAR
==================================================*/
.topbar{
    background:#083b73;
    color:#fff;
    padding:8px 0;
    font-size:14px;
}
.topbar a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.topbar a:hover{
    color:#FFC107;
}


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

#navbar{
   background:#083b73;
    padding:12px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    transition:all .35s ease;
    z-index:999;
}

#navbar.scrolled{
     background:#ffffff;
    
    padding:8px 0;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}


/*==================================================
    LOGO
==================================================*/

.navbar-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
    padding:0;
}

.logo-img{
    height:60px;
    margin-right:14px;
    transition:all .35s ease;
 filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.8))
        drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

#navbar.scrolled .logo-img{
    height:50px;
     filter:drop-shadow(0 2px 4px rgba(0,0,0,.30));
}

.logo-text{

    font-family:'LetoSans-Bold';
    font-size:22px;
      font-weight:900;
    /*color:#005BAC;*/
    color:#FFFFFF;
    text-shadow:
  0 1px 2px rgba(0,0,0,.8),
    0 3px 6px rgba(0,0,0,.5),
    0 8px 18px rgba(0,0,0,.3);
        /**/

    white-space:nowrap;
    letter-spacing:.1px;

    transform:scale(1);
    transform-origin:left center;

    transition:
        color .35s ease,
        transform .35s ease,
        letter-spacing .35s ease;

}

#navbar.scrolled .logo-text{

    color:#005BAC;

    transform:scale(.88);

    letter-spacing:.1px;
    text-shadow:
    0 2px 8px rgba(0,0,0,.60);

}



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

#navbar .nav-link{

     color:#ffffff;
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:600;
    padding:15px 18px;
    position:relative;
    transition:all .3s ease;

}

#navbar.scrolled .nav-link{

    color:#005BAC;

}

#navbar .nav-link:hover,
#navbar.scrolled .nav-link:hover{

    color:#FFC107;

}

#navbar .nav-link.active,
#navbar.scrolled .nav-link.active{

    color:#FFC107;

}

/* Garis bawah menu */

#navbar .nav-link::after{

    content:"";
    position:absolute;
    left:18px;
    bottom:8px;
    width:0;
    height:3px;
    background:#FFC107;
    border-radius:50px;
    transition:.3s;

}

#navbar .nav-link:hover::after,
#navbar .nav-link.active::after{

    width:calc(100% - 36px);

}


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

.dropdown-menu{

    border:none;
    border-radius:12px;
    overflow:hidden;
    padding:8px 0;
    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.dropdown-item{

    padding:11px 20px;
    font-size:15px;
    transition:.25s;

}

.dropdown-item:hover{

    background:#005BAC;
    color:#ffffff;
    padding-left:28px;

}


/*==================================================
    TOGGLER
==================================================*/

.navbar-toggler{

    border:2px solid #005BAC;

}

.navbar-toggler:focus{

    box-shadow:none;

}

#navbar.scrolled .navbar-toggler{

    border-color:#ffffff;

}

#navbar.scrolled .navbar-toggler-icon{

    filter:brightness(0) invert(1);

}


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

@media(max-width:991px){

    .logo-img{
           height:50px;
      }
    .logo-text{
        font-size:15px;
        color:#555;
         margin-left:-10px;
    }
      #navbar.scrolled .logo-text{
        color:#005BAC;
    }
        .navbar-collapse{
        margin-top:15px;
        background:#ffffff;
        border-radius:12px;
        padding:15px;
    }
    #navbar.scrolled .navbar-collapse{
       /*background:#083b73; di danti putih */ 
        background:#ffffff;
        font-size:15px;

    }
    #menu{
    background:#ffffff;
    border-radius:10px;
    padding:15px;
    width:100%;
    margin-top:12px;
}
   #menu.show{
        background:#fff;
        border-radius:10px;
        padding:15px;
    }
    #navbar.scrolled #menu{
      background:#ffffff;
}
    #navbar.scrolled #menu .nav-link{
    color:#16324F !important;
}

    #navbar .container{
        display:flex;
         align-items:center;
        justify-content:space-between;
        flex-wrap:wrap;
    }
    .navbar-brand{
        display:flex;
        align-items:center;
        flex:1;
        margin-bottom:0;
    }
    .navbar-toggler{
        margin-left:auto;
        flex-shrink:0;
    }
    

 
}

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

.btn-primary{

    background:#005BAC;

    border:none;

}

.btn-primary:hover{

    background:#00448a;

}

.btn-warning{

    background:#FFC107;

    border:none;

    color:#222;

    font-weight:600;

    border-radius:40px;

    padding:11px 30px;

    transition:.35s;

}

.btn-warning:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.20);

}


/*==========================================
            HERO
==========================================*/
.hero{
    position:relative;
    height:620px;
    overflow:hidden;
}

/* background */
.hero-bg{
    position:absolute;
    inset:0;
    background:url("../img/worker.png") center/cover no-repeat;
    z-index:1;
}
/* overlay */
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(0,90,150,.20) 35%,
        rgba(0,90,150,.65) 55%,
        rgba(0,74,124,.95) 100%
    );
    z-index:2;
}
/* worker */
.hero-worker{
    position:absolute;
    left:0;
    bottom:0;
    height:95%;
    z-index:3;
}
/* text */
.hero-text{
    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
     width:min(620px, 90%);
    color:#fff;
    z-index:4;
}

.hero-text h1{
    font-size:60px;
    font-weight:800;
}
.hero-text h2{
    color:#ffd500;
    font-family:Pacifico,cursive;
    font-size:50px;
}

.hero-text h4{
    font-size:28px;
}

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


/* Tablet */
@media (max-width:992px){

    .hero{
        height:520px;
    }

    .hero-worker{
        height:82%;
    }

    .hero-text{
        width:420px;
        right:4%;
    }

    .hero-text h1{
        font-size:40px;
        line-height:1.2;
    }

    .hero-text h2{
        font-size:36px;
    }

    .hero-text h4{
        font-size:22px;
    }

}


/* Mobile */
@media (max-width:768px){

    .hero{
        height:auto;
        min-height:720px;
    }

    /* Background tetap */
    .hero-bg{
        background-position:center;
    }

    /* Overlay dibuat lebih gelap */
    .hero-overlay{
        background:linear-gradient(
            to bottom,
            rgba(0,74,124,.55),
            rgba(0,74,124,.92)
        );
    }

    /* Orang diperkecil */
    .hero-worker{

        left:-60px;
        bottom:0;

        height:55%;
        max-height:400px;

        opacity:.95;
    }

    /* Teks menjadi rata tengah */
    .hero-text{

        position:relative;

        top:auto;
        right:auto;

        transform:none;

        width:100%;

        padding:70px 25px 30px;

        text-align:center;
    }

    .hero-text h1{
        font-size:34px;
    }

    .hero-text h2{
        font-size:30px;
    }

    .hero-text h4{
        font-size:20px;
    }

}





/*batas hero*/

/*==================================================
    PROGRAM
==================================================*/

.program{

    padding:90px 0;

}

.program .card{

    border:none;

    border-radius:18px;

    transition:.35s;

    overflow:hidden;

}

.program .card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}




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

@media(max-width:991px){

.content{

    padding-top:180px;

    text-align:center;

}

.content h1{

    font-size:42px;

}

.content p{

    font-size:18px;

    margin:auto;

}

.navbar-collapse{

    background:#083b73;

    border-radius:15px;

    padding:20px;

    margin-top:15px;

}

}

@media(max-width:768px){

.content h1{

    font-size:34px;

}

.content p{

    font-size:16px;

}

.topbar{

    text-align:center;

}

.navbar-brand img{

    height:50px;

}

}

/* TESTIMONI */

.card-testimoni{
background:#fff;
padding:30px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
height:100%;
}

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

.card-testimoni h5{
margin-top:20px;
margin-bottom:5px;
color:#0b3d91;
}

.card-testimoni span{
font-size:14px;
color:#777;
}


/* CLIENT */

.client img{
max-height:70px;
object-fit:contain;
filter:grayscale(100%);
transition:.3s;
}

.client img:hover{
filter:none;
transform:scale(1.05);
}


/* ARTIKEL */

.artikel-card{
border:none;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.artikel-card img{
height:220px;
width:100%;
object-fit:cover;
}


.artikel-card h5{
font-weight:600;
color:#123;
}

.artikel-card a{
color:#0b3d91;
font-weight:600;
text-decoration:none;
}

/*==================================================
    SECTION BACKGROUND VARIASI
==================================================*/


/* PROGRAM TRAINING */
.program{
    background:#ffffff;
}


/* SECTION TENTANG / KEUNGGULAN */
.about,
.keunggulan{
    
}


/* JADWAL TRAINING */
.jadwal{
    background:#ffffff;
}


/* TESTIMONI */
.testimoni{

    background:linear-gradient(
        135deg,
        #eaf4ff,
        #ffffff
    );

}


/* CLIENT */
.client{

    background:#f8f9fa;

}


/* ARTIKEL */
.artikel{

    background:#ffffff;

}


/*variasi*/
section h2{

    font-weight:700;
    color:#083b73;

}


section h2::after{

    content:"";

    display:block;

    width:60px;

    height:4px;

    background:#FFC107;

    margin:15px auto;

    border-radius:10px;

}


section p{

    color:#666;

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

.footer{

background:#061b35;

color:#ddd;

padding:70px 0 0;

}


.footer-logo{

height:65px;

background:#fff;

padding:8px;

border-radius:10px;

}


.footer h5{

color:#fff;

font-size:20px;

font-weight:700;

margin-bottom:25px;

position:relative;

}


.footer h5::after{

content:"";

display:block;

width:45px;

height:3px;

background:#FFC107;

margin-top:10px;

}


.footer p{

font-size:14px;

line-height:1.8;

color:#bbb;

}


.footer-menu{

list-style:none;

padding:0;

}


.footer-menu li{

margin-bottom:12px;

}


.footer-menu a{

color:#bbb;

text-decoration:none;

transition:.3s;

}


.footer-menu a:hover{

color:#FFC107;

padding-left:5px;

}



.footer-social a{

display:inline-flex;

align-items:center;

justify-content:center;

width:38px;

height:38px;

background:#083b73;

color:#fff;

border-radius:50%;

margin-right:8px;

text-decoration:none;

transition:.3s;

}


.footer-social a:hover{

background:#FFC107;

color:#222;

}



.footer-bottom{

margin-top:50px;

padding:20px 0;

background:#041225;

text-align:center;

}


.footer-bottom p{

margin:0;

font-size:14px;

}

/*==================================================
 ABOUT PAGE
==================================================*/


.page-header{

background:linear-gradient(
135deg,
#083b73,
#005BAC
);

padding:120px 0 80px;

color:#fff;

text-align:center;

}


.page-header h1{

font-size:48px;

font-weight:700;

}



.profil h2{

color:#083b73;

font-weight:700;

}



.visi-misi{

background:#f1f6fb;

padding:80px 0;

}



.vm-card{

background:#fff;

padding:35px;

border-radius:20px;

height:100%;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.vm-card h3{

color:#005BAC;

margin-bottom:20px;

}



.unggul-card{

background:#fff;

padding:30px;

border-radius:18px;

text-align:center;

height:100%;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}



.unggul-card:hover{

transform:translateY(-8px);

}



.unggul-card h4{

color:#083b73;

}

/*==================================================
 TRAINING PAGE
==================================================*/


.training-intro{

background:#fff;

}



.training-intro p{

max-width:750px;

}



.training-list{

background:#f1f6fb;

padding:80px 0;

}



.training-card{

background:#fff;

padding:35px;

border-radius:20px;

height:100%;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}



.training-card:hover{

transform:translateY(-10px);

}



.icon-box{

width:65px;

height:65px;

background:#005BAC;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:28px;

margin-bottom:20px;

}



.training-card h4{

color:#083b73;

font-weight:700;

}



.training-card a{

color:#005BAC;

text-decoration:none;

font-weight:600;

}



.training-feature{

background:#083b73;

color:#fff;

padding:70px 0;

}



.training-feature h3{

font-size:40px;

color:#FFC107;

}



.alur-training{

background:#fff;

}



.step{

width:70px;

height:70px;

margin:auto;

background:#005BAC;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

font-weight:bold;

margin-bottom:20px;

}

/*==================================================
 JADWAL PAGE
==================================================*/


.jadwal-list{

background:#f1f6fb;

}



.jadwal-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

height:100%;

transition:.35s;

}



.jadwal-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.15);

}



.jadwal-header{

background:#083b73;

padding:25px;

color:#fff;

}



.jadwal-header h4{

margin:0;

font-size:20px;

}



.jadwal-body{

padding:30px;

}



.jadwal-body p{

margin-bottom:15px;

color:#555;

}



.jadwal-body i{

color:#005BAC;

width:25px;

}



.status-open{

display:inline-block;

background:#d1f7dc;

color:#16803c;

padding:7px 15px;

border-radius:20px;

font-size:13px;

font-weight:600;

}

/*==================================================
 ARTIKEL PAGE
==================================================*/


.artikel-list{

background:#f1f6fb;

}



.artikel-card{

background:#fff;

border-radius:20px;

overflow:hidden;

height:100%;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}



.artikel-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.15);

}



.artikel-card img{

width:100%;

height:240px;

object-fit:cover;

}



.artikel-body{

padding:30px;

}



.artikel-date{

font-size:13px;

color:#005BAC;

font-weight:600;

margin-bottom:10px;

}



.artikel-body h4{

font-size:20px;

font-weight:700;

color:#083b73;

line-height:1.4;

}



.artikel-body p{

color:#666;

line-height:1.7;

}



.artikel-body a{

text-decoration:none;

color:#005BAC;

font-weight:600;

}



.artikel-body a:hover{

color:#FFC107;

}

/*==================================================
 DETAIL ARTIKEL
==================================================*/


.detail-artikel{

background:#f1f6fb;

}



.artikel-detail-card{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.artikel-detail-card h1{

font-size:36px;

font-weight:700;

color:#083b73;

margin:20px 0;

}



.artikel-detail-card h3{

color:#005BAC;

margin-top:35px;

}



.artikel-detail-card p{

line-height:1.9;

color:#555;

font-size:16px;

}



.artikel-detail-card li{

margin-bottom:10px;

color:#555;

}



.artikel-meta{

color:#005BAC;

font-size:14px;

font-weight:600;

}




/* SIDEBAR */


.artikel-sidebar{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.artikel-sidebar h4{

color:#083b73;

font-weight:700;

margin-bottom:20px;

}



.artikel-sidebar ul{

list-style:none;

padding:0;

}



.artikel-sidebar li{

border-bottom:1px solid #eee;

padding:12px 0;

}



.artikel-sidebar a{

text-decoration:none;

color:#555;

}



.artikel-sidebar a:hover{

color:#005BAC;

}

/*==================================================
 KONTAK PAGE
==================================================*/


.kontak{

background:#f1f6fb;

}



.kontak-info,
.kontak-form{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.kontak-info h2,
.kontak-form h2{

color:#083b73;

font-weight:700;

margin-bottom:25px;

}



.kontak-item{

display:flex;

gap:20px;

margin-top:25px;

}



.kontak-item i{

width:45px;

height:45px;

background:#005BAC;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.kontak-item h5{

margin:0;

font-size:16px;

color:#083b73;

}



.kontak-item p{

margin:5px 0;

color:#666;

}



.kontak-form .form-control{

border-radius:12px;

padding:12px;

border:1px solid #ddd;

}



.kontak-form .form-control:focus{

border-color:#005BAC;

box-shadow:none;

}



.map-section{

background:#fff;

}
/*==================================================
 DETAIL TRAINING
==================================================*/


.detail-training{

background:#f1f6fb;

}



.training-detail-card,
.training-sidebar{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.training-detail-card h2{

color:#083b73;

font-weight:700;

margin-bottom:20px;

}



.training-detail-card h3{

color:#005BAC;

margin-top:35px;

font-size:22px;

}



.training-detail-card p,
.training-detail-card li{

color:#555;

line-height:1.8;

}



.training-sidebar h4{

color:#083b73;

font-weight:700;

margin-bottom:25px;

}



.info-training{

display:flex;

gap:15px;

margin-bottom:25px;

}



.info-training i{

width:45px;

height:45px;

background:#005BAC;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.info-training p{

margin:5px 0;

color:#666;

}



.mini-jadwal{

background:#fff;

padding:25px;

border-radius:15px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.mini-jadwal h5{

color:#083b73;

font-weight:700;

}



.mini-jadwal span{

background:#d1f7dc;

color:#16803c;

padding:7px 15px;

border-radius:20px;

font-size:13px;

}

/* FORM PENDAFTARAN */

.form-daftar{

background:#f1f6fb;

}


.form-card{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.form-card h2{

color:#083b73;

font-weight:700;

margin-bottom:15px;

}


.form-card label{

font-weight:600;

color:#083b73;

margin-bottom:8px;

}


.form-card .form-control{

border-radius:12px;

padding:12px;

}


.form-card .form-control:focus{

border-color:#005BAC;

box-shadow:none;

}

/*==================================================
13. FLOATING BUTTON
==================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(0,0,0,.20);

    z-index:999;

    transition:.35s;

}

.whatsapp-float:hover{

    transform:translateY(-6px) scale(1.05);

}

.back-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#0E5D87;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    background:#69B345;

    transform:translateY(-5px);

}