/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  line-height: 1.6;
  color: #333;
}

/* ================= CONTAINER ================= */
.container {
  width: 90%;
  max-width: 1100px;
  margin: auto;
}

/* ================= HEADER ================= */
.header {
  background: #0c1f3f;
  color: white;
  padding: 15px 0;
  position: relative;
  z-index: 10;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 50px;
}

.logo span {
  color: white;
  font-size: 22px;
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 20px;
}

.nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.nav a:hover,
.nav a.active {
  color: #00d4ff;
}

/* HAMBURGER */
.hamburger {
  font-size: 26px;
  color: white;
  cursor: pointer;
  display: none;
}

/* MOBILE MENU */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #132a52;
  position: absolute;
  width: 100%;
  top: 100%;   /* tepat di bawah header */
  left: 0;
  text-align: center;
  z-index: 999;
}

.mobile-menu a {
  padding: 15px;
  color: white;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mobile-menu a:hover {
  background: #1d3b70;
}

.mobile-menu.show {
  display: flex;
  animation: slideDown 0.3s ease-in-out;
}

/* ANIMATION */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .nav {
    display: none;  /* sembunyikan desktop nav */
  }
}

/* ================= HERO ================= */
.hero {
  background: 
    linear-gradient(rgba(13,27,42,0.75), rgba(13,27,42,0.75)),
    url("https://images.unsplash.com/photo-1509391366360-2e959784a276")
    center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 110px 20px;
}

/* ================= BUTTON ================= */
.btn {
  display: inline-block;
  background: #f9a825;
  color: #000;
  padding: 12px 25px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  transition: 0.3s;
}

.btn:hover {
  opacity: 0.9;
}

.btn.white {
  background: #fff;
  color: #0c1f3f;
}

/* ================= SECTION ================= */
.section {
  padding: 60px 0;
}

.section h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* ================= CARDS ================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.card {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s;
}

.skema-img {
  width: 90px;
  margin-bottom: 15px;
}

/* ================= CONTACT ================= */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
}

.contact-form,
.contact-info {
  flex: 1;
  min-width: 320px;
}

.contact-form form label {
  display: block;
  margin: 8px 0 4px;
  font-weight: bold;
}

.contact-form form input,
.contact-form form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact-form form button {
  margin-top: 15px;
  padding: 12px 25px;
  border: none;
  background: #f9a825;
  color: #000;
  border-radius: 30px;
  cursor: pointer;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.contact-item i {
  color: #00bcd4;
  font-size: 18px;
  min-width: 20px;
}

.contact-item a {
  text-decoration: none;
  color: #333;
  transition: 0.3s;
}

.contact-item a:hover {
  color: #00bcd4;
}

.map-container {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= FOOTER ================= */
.footer {
  background-color: #1a1a1a;
  color: #fff;
  padding: 30px 0;
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo img {
  width: 200px;
}

.footer-logo span {
  font-size: 20px;
  font-weight: bold;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  text-align: right;
  gap: 10px;
}

.footer-contact a {
  color: white;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-social {
  margin-top: 15px;
}

.footer-social a {
  color: white;
  margin-right: 15px;
  font-size: 20px;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #00bcd4;
}

/* ================= ABOUT ================= */
.about-flex {
  display: flex;
  align-items: center;
  gap: 40px;
}

.about-text, .about-image {
  flex: 1;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* ================= LIST ================= */
.misi-list {
  margin-top: 20px;
  padding-left: 20px;
}

.misi-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .about-flex {
    flex-direction: column;
  }

  .contact-container {
    flex-direction: column;
  }

  .footer-flex {
    flex-direction: column;
    text-align: right;
    gap: 50px;
  }
}


.footer {
  background-color: #1a1a1a;
  color: #fff;
  padding: 30px 0;
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* LOGO */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo img {
  width: 190px;  /* Ukuran logo sama di semua halaman */
}

.footer-logo span {
  font-size: 20px;
  font-weight: bold;
}

/* KONTAK */
.footer-contact {
  display: flex;
  flex-direction: column;
  text-align: right;
  gap: 10px;
}

.footer-contact p {
  margin: 5px 0;
}

/* LINK & SOCIAL MEDIA */
.footer-contact a {
  color: white;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-social {
  margin-top: 10px;
}

.footer-social a {
  color: white;
  margin-right: 15px;
  font-size: 20px;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #00bcd4;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .footer-flex {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .footer-contact {
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}



/* ===== GALERI FOTO ===== */
.gallery {
  padding: 60px 0;
  background: #f4f6f9;
}

.gallery h2 {
  text-align: center;
  margin-bottom: 30px;
}

.gallery-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.gallery-slider::-webkit-scrollbar {
  height: 8px;
}

.gallery-slider::-webkit-scrollbar-thumb {
  background: #0a3d62;
  border-radius: 10px;
}

.gallery-item {
  min-width: 280px;
  flex: 0 0 auto;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.05);
}



.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

.nav a:hover {
  color: #00b4d8;
}

.nav a.active {
  color: #00b4d8;
  font-weight: bold;
}


.hero h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
}

/* ================= SECTION ================= */
.section {
  padding: 70px 0;
}

.bg-light {
  background: #f1f5f9;
}

.bg-dark {
  background: #1b263b;
  color: #fff;
}

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

.section-title.white {
  color: #fff;
}

/* ================= TWO COLUMN ================= */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.stats {
  display: flex;
  gap: 20px;
}

.stats div {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.stats h3 {
  color: #0d1b2a;
  font-size: 24px;
}

/* ================= CARD ================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 55px;
}

.card {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.card i {
  font-size: 28px;
  margin-bottom: 15px;
  color: #00b4d8;
}

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

/* ================= TIMELINE ================= */
.timeline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.timeline-item {
  background: #243447;
  padding: 25px;
  border-radius: 8px;
  flex: 1;
  min-width: 250px;
  text-align: center;
}

/* ================= FOOTER ================= */
.footer {
  background: #0d1b2a;
  color: #fff;
  padding: 40px 0;
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}


.footer-social a {
  color: #fff;
  margin-right: 15px;
  font-size: 18px;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #00b4d8;
}

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

  .two-col {
    grid-template-columns: 1fr;
  }

  .nav {
    position: absolute;
    top: 70px;
    right: 0;
    background: #0d1b2a;
    flex-direction: column;
    width: 220px;
    padding: 20px;
    display: none;
  }

  .nav.open {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

.hero-profil {
  background: url("../assets/poto\ 3.jpeg") no-repeat center center/cover;
  height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.hero-profil h1 {
  font-size: 48px;
  font-weight: 700;
}

.hero-profil p {
  font-size: 18px;
  margin-top: 10px;
}

/* HERO PROGRAM BACKGROUND */
.hero-program {
  background: url("../assets/poto\ 4.jpeg") no-repeat center center/cover;
  height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.hero-program {
  font-size: 48px;
  font-weight: 700;
}

.hero-program {
  font-size: 18px;
  margin-top: 10px;
}


.hero-contact {
   background: url("../assets/solar-panel.jpg") no-repeat center center/cover;
  background-size: cover;
  height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

.hero-contact {
  font-size: 48px;
  font-weight: 700;
}

.hero-contact {
  font-size: 18px;
  margin-top: 10px;
}


.about-text {
  padding: 20px;
}

.about-text h2 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 15px;
  position: relative;
}

.section-title {
  margin-top: 40px;
}

.about-text p {
  line-height: 1.9;
  text-align: justify;
  color: #444;
  margin-bottom: 18px;
}

.misi-list {
  list-style: none;
  padding-left: 0;
}

.misi-list li {
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
  line-height: 1.8;
}

.misi-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0a7d5e; /* bisa ganti warna sesuai brand */
  font-weight: bold;
}

/* DROPDOWN */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #0a3d62;
  min-width: 220px;
  top: 35px;
  left: 0;
  flex-direction: column;
  border-radius: 6px;
}

.dropdown-content a {
  padding: 10px 15px;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .dropdown-content {
    position: static;
    background: #0a3d62;
  }
}

/* LAYANAN */

.section-subtitle{
text-align:center;
margin-bottom:40px;
color:#555;
}

.layanan{
background:#f5f8fb;
}

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
}

.card{
background:#fff;
padding:30px;
border-radius:12px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.card i{
font-size:38px;
color:#0a3d62;
margin-bottom:15px;
}

.card h3{
margin-bottom:10px;
font-size:18px;
}

.card p{
font-size:14px;
color:#555;
}

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

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

/* card terakhir di tengah */
.card-grid .card:last-child{
grid-column:2/3;
}

.card{
background:white;
padding:35px 25px;
border-radius:12px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.card i{
font-size:40px;
color:#0a3d62;
margin-bottom:15px;
}

.card h3{
margin-bottom:10px;
font-size:18px;
}

.card p{
font-size:14px;
color:#555;
}

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

@media(max-width:768px){

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

.card-grid .card:last-child{
grid-column:auto;
}

}

/* ===== MENU & HEADER ===== */

.header{
background:linear-gradient(90deg,#021c2c,#0a3d62);
color:#fff;
padding:10px 0;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.logo img{
height:80px;
}

.logo span{
font-weight:700;
font-size:22px;
}

/* ===== NAV ===== */

.nav{
display:flex;
gap:25px;
}

.nav a{
color:#fff;
text-decoration:none;
font-weight:500;
padding:8px 12px;
border-radius:6px;
transition:0.3s;
}

.nav a:hover{
background:rgba(255,255,255,0.1);
color:#f1c40f;
}

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

.hero{
text-align:center;
padding:120px 20px;
color:white;
}

.hero h1{
font-size:42px;
margin-bottom:10px;
}

.hero p{
font-size:18px;
opacity:0.9;
}

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

.section{
padding:80px 0;
background:#f5f7fb;
}

/* ===== CARD GRID ===== */

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

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

.card{
background:white;
padding:30px;
border-radius:15px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}

/* ===== IMAGE ===== */

.card img{
width:90px;
margin-bottom:15px;
padding:12px;
background:#f1f5f9;
border-radius:50%;
}

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

.card h3{
font-size:18px;
margin-bottom:10px;
color:#0a3d62;
}

/* ===== TEXT ===== */

.card p{
font-size:14px;
color:#555;
line-height:1.6;
}

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

.btn{
display:inline-block;
margin-top:12px;
padding:10px 22px;
background:#f1c40f;
color:#000;
text-decoration:none;
border-radius:25px;
font-weight:600;
font-size:14px;
transition:0.3s;
}

.btn:hover{
background:#e0b400;
transform:scale(1.05);
}

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

@media(max-width:1000px){

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

}

@media(max-width:600px){

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

}

.section-title{
text-align:center;
font-size:30px;
margin-bottom:10px;
}

.section-subtitle{
text-align:center;
color:#666;
margin-bottom:30px;
}

.nav i{
font-size:12px;
margin-left:5px;
}

.dropdown:hover i{
transform:rotate(180deg);
transition:0.3s;
}

/* TRAINING SECTION */

.training{
display:flex;
justify-content:center;
padding:60px 20px;
background:#f5f7fb;
}

/* CARD */

.training-card{
width:420px;
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
transition:0.3s;
}

.training-card:hover{
transform:translateY(-5px);
}

/* IMAGE */

.training-image img{
width:100%;
display:block;
}

/* CONTENT */

/* INFO */

.training-info{
margin-bottom:20px;
}

.training-info p{
margin:8px 0;
font-size:16px;
color:#333;
}

.training-info i{
color:#0a3d62;
margin-right:8px;
}

/* PRICE */

.price-old{
text-decoration:line-through;
color:#888;
margin-left:10px;
}

/* BUTTON */

.btn-training{
display:block;
text-align:center;
background:#143f56;
color:white;
padding:15px;
border-radius:10px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.btn-training:hover{
background:#0d2f40;
}

/* DROPDOWN */

.dropdown{
position:relative;
}

.dropdown-content{
display:none;
position:absolute;
background:#0a3d62;
min-width:220px;
border-radius:8px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.dropdown-content a{
display:block;
padding:12px 15px;
color:#fff;
text-decoration:none;
}

.dropdown-content a:hover{
background:#f1c40f;
color:#000;
}

.dropdown:hover .dropdown-content{
display:block;
}

.dropdown-content a{
display:block;
padding:12px 16px;
color:#ffffff;
text-decoration:none;
font-size:14px;
}

/* hover */
.dropdown-content a:hover{
background:#f1c40f;
color:#000000;
}

.dropdown-content{
display:none;
position:absolute;
background:#0a3d62;
min-width:220px;
border-radius:8px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.struktur{
background:#f4f7fb;
padding:80px 0;
text-align:center;
}

.section-subtitle{
color:#666;
margin-bottom:40px;
}

.org-level{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.org-card{
background:white;
padding:30px;
border-radius:12px;
width:220px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
transition:0.3s;
}

.org-card:hover{
transform:translateY(-6px);
}

.org-card img{
width:100px;
height:100px;
border-radius:50%;
margin-bottom:15px;
}

.org-card h3{
font-size:18px;
color:#0a3d62;
margin-bottom:5px;
}

.org-card p{
font-size:14px;
color:#777;
}

.visi-misi{
padding:80px 0;
background:#f4f7fb;
}

/* VISI */
.visi-box{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-bottom:30px;
text-align:center;
}

/* MISI */
.misi-box{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-bottom:40px;
}

.misi-box ul{
padding-left:20px;
}

.misi-box li{
margin-bottom:10px;
}

/* NILAI */

.nilai-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.nilai-card{
background:white;
padding:25px;
text-align:center;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.nilai-card i{
font-size:32px;
color:#0a3d62;
margin-bottom:10px;
}

.nilai-card:hover{
transform:translateY(-6px);
}

/* RESPONSIVE */

@media(max-width:768px){

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

}
/* MANAJEMEN */

.manajemen{
background:#f5f7fb;
text-align:center;
}

.manajemen-text{
max-width:800px;
margin:auto;
line-height:1.8;
color:#555;
font-size:16px;
}

/* DIREKSI */

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

.direksi-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:center;
transition:0.3s;
}

.direksi-card:hover{
transform:translateY(-6px);
}

.direksi-card h3{
color:#0a3d62;
margin-bottom:10px;
}

/* RESPONSIVE */

@media(max-width:768px){

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

}

.struktur{
background:#f5f7fb;
padding:80px 0;
text-align:center;
}

.section-subtitle{
color:#666;
margin-bottom:50px;
}

/* BAGAN */

.org-chart{
display:flex;
flex-direction:column;
align-items:center;
}

/* TOP */

.org-top{
margin-bottom:20px;
}

/* LINE */

.line{
width:3px;
height:50px;
background:#ccc;
margin-bottom:20px;
}

/* BOTTOM */

.org-bottom{
display:flex;
gap:60px;
}

/* CARD */

.org-card{
background:white;
padding:30px;
border-radius:12px;
width:220px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transition:0.3s;
}

.org-card:hover{
transform:translateY(-6px);
}

/* FOTO */

.org-card img{
width:100px;
height:100px;
border-radius:50%;
margin-bottom:15px;
}

/* TEXT */

.org-card h3{
color:#0a3d62;
margin-bottom:5px;
}

/* HIGHLIGHT DIREKTUR UTAMA */

.org-card.utama{
background:#0a3d62;
color:white;
}

.org-card.utama h3{
color:white;
}

/* MOBILE */

@media(max-width:768px){

.org-bottom{
flex-direction:column;
align-items:center;
gap:30px;
}

}

.visi-misi{
padding:80px 0;
background:#f5f7fb;
}

/* VISI */

.visi-box{
background:white;
padding:35px;
border-radius:10px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-bottom:30px;
}

/* MISI */

.misi-box{
background:white;
padding:35px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-bottom:40px;
}

.misi-box ul{
padding-left:20px;
}

.misi-box li{
margin-bottom:12px;
line-height:1.7;
}

/* NILAI */

.nilai-title{
text-align:center;
margin-bottom:30px;
}

.nilai-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-bottom:50px;
}

.nilai-card{
background:white;
padding:25px;
text-align:center;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.nilai-card i{
font-size:35px;
color:#0a3d62;
margin-bottom:10px;
}

.nilai-card:hover{
transform:translateY(-6px);
}

/* KOMITMEN */

.komitmen{
background:#0a3d62;
color:white;
padding:40px;
border-radius:10px;
text-align:center;
margin-bottom:40px;
}

/* TAGLINE */

.tagline{
text-align:center;
font-weight:bold;
font-size:18px;
color:#0a3d62;
}

/* RESPONSIVE */

@media(max-width:768px){

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

}

.nilai-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
max-width:900px;
margin:auto;
}

/* card ke 4 dan 5 di tengah */
.nilai-grid .nilai-card:nth-child(4){
grid-column:1 / 2;
justify-self:end;
}

.nilai-grid .nilai-card:nth-child(5){
grid-column:3 / 4;
justify-self:start;
}

.hero-profil{
background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('assets/energi-bg.jpg');
background-size:cover;
background-position:center;
padding:120px 20px;
text-align:center;
color:white;
}

.hero-profil h1{
font-size:42px;
margin-bottom:10px;
}

.hero-profil p{
font-size:18px;
opacity:0.9;
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.two-col img{
width:100%;
border-radius:10px;
}

.profil-perusahaan{
padding:80px 0;
text-align:center;
background:#f4f7fb;
}

.profil-subtitle{
color:#555;
margin-top:10px;
}

.profil-section{
padding:70px 0;
}

.bg-light{
background:#f1f5f9;
}

.profil-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

.profil-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:center;
transition:0.3s;
}

.profil-card:hover{
transform:translateY(-6px);
}

.profil-card i{
font-size:35px;
color:#0a3d62;
margin-bottom:10px;
}

.timeline{
display:flex;
justify-content:space-between;
gap:30px;
margin-top:40px;
}

.timeline-item{
background:white;
padding:30px;
border-radius:10px;
flex:1;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.profil-komitmen{
background:#0a3d62;
color:white;
text-align:center;
padding:70px 0;
}

@media(max-width:768px){

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

.timeline{
flex-direction:column;
}

}

.direksi-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.upload-box{
position:relative;
border:2px dashed rgba(255,255,255,0.4);
padding:25px;
border-radius:10px;
text-align:center;
cursor:pointer;
transition:0.3s;
}

.upload-box:hover{
background:rgba(255,255,255,0.1);
}

.upload-box input{
position:absolute;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
top:0;
left:0;
}

.upload-box p{
margin:0;
font-size:14px;
}

.preview{
margin-top:10px;
max-width:120px;
border-radius:10px;
}

.training-section{
padding:80px 20px;
background:#f5f7fb;
text-align:center;
}

.training-title{
font-size:30px;
margin-bottom:10px;
}

.training-sub{
color:#666;
max-width:600px;
margin:auto;
margin-bottom:50px;
}

.training-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
justify-items:center;
}

.training-card{
background:white;
border-radius:14px;
width:260px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
position:relative;
}

.training-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.training-img{
width:100%;
height:140px;
object-fit:cover;
}

.badge{
position:absolute;
top:10px;
left:10px;
background:#ff4b2b;
color:white;
padding:4px 10px;
border-radius:20px;
font-size:11px;
font-weight:600;
}

.training-body{
padding:18px;
text-align:left;
}

.training-date{
font-size:13px;
color:#888;
margin-bottom:8px;
}

.training-name{
font-size:15px;
margin-bottom:15px;
}

.training-price{
display:flex;
gap:10px;
margin-bottom:15px;
}

.price-box{
background:#f4f6fb;
padding:10px;
border-radius:8px;
text-align:center;
flex:1;
}

.price-box strong{
display:block;
color:#0a58ca;
}

.price-box small{
text-decoration:line-through;
color:#999;
}

.training-info{
font-size:13px;
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:15px;
color:#555;
}

.btn-training{
display:block;
text-align:center;
background:linear-gradient(45deg,#00c6ff,#0072ff);
color:white;
padding:9px;
border-radius:6px;
text-decoration:none;
font-size:14px;
font-weight:600;
}

.training-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:40px;
align-items:start;
margin-top:40px;
}

.training-info-box{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
text-align:left;
}

.training-info-box h3{
margin-bottom:15px;
}

.training-info-box ul{
padding-left:18px;
line-height:1.7;
color:#555;
}

.training-extra{
margin-top:20px;
font-size:14px;
color:#333;
}

.training-section{
padding:80px 20px;
background:#f5f7fb;
text-align:center;
}

.container{
max-width:1000px;
margin:auto;
}

.training-title{
font-size:30px;
margin-bottom:10px;
}

.training-sub{
color:#666;
max-width:600px;
margin:auto;
margin-bottom:40px;
}

.training-layout{
display:grid;
grid-template-columns:320px 1fr;
gap:30px;
align-items:start;
margin-top:40px;
}

/* CARD */

.training-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.training-img{
width:100%;
height:160px;
object-fit:cover;
}

.training-body{
padding:18px;
text-align:left;
}

.training-date{
font-size:14px;
color:#777;
margin-bottom:10px;
}

.training-name{
font-size:16px;
margin-bottom:15px;
}

.training-price{
display:flex;
gap:10px;
margin-bottom:15px;
}

.price-box{
background:#f1f4f9;
padding:10px;
border-radius:8px;
flex:1;
text-align:center;
}

.price-box strong{
display:block;
color:#0a58ca;
}

.btn-training{
display:block;
background:linear-gradient(45deg,#00c6ff,#0072ff);
color:white;
text-align:center;
padding:10px;
border-radius:6px;
text-decoration:none;
font-weight:600;
}

/* INFO BOX */

.training-info-box{
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
text-align:left;
}

.training-info-box ul{
padding-left:18px;
line-height:1.7;
color:#555;
}

.training-extra{
margin-top:20px;
font-size:14px;
color:#333;
}

.training-card{
position:relative;
}

.discount-badge{
position:absolute;
top:12px;
left:12px;
background:#ff3b30;
color:white;
padding:6px 12px;
font-size:12px;
font-weight:600;
border-radius:20px;
}

.old-price{
text-decoration:line-through;
color:#999;
font-size:13px;
}

.new-price{
color:#0a58ca;
font-size:18px;
font-weight:bold;
}

.hero-training{
padding:110px 20px 80px;
background:linear-gradient(135deg,#f5f7fb,#eef3f8);
text-align:center;
}

.hero-container{
max-width:1000px;
margin:auto;
}

.hero-training h1{
font-size:44px;
font-weight:700;
line-height:1.3;
}

.hero-training h1 span{
color:#264653;
}

.hero-sub{
margin-top:10px;
color:#666;
font-size:16px;
}

.hero-buttons{
margin-top:25px;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
}

.btn{
text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

.btn.online{
background:#2f4858;
}

.btn.offline{
background:#2c3e80;
}

.btn.sertifikasi{
background:#8c1d40;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(0,0,0,0.2);
filter:brightness(1.1);
}

.hero-stats{
max-width:1000px;
margin:60px auto 0;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.stat-card{
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.stat-card h2{
font-size:30px;
margin-top:5px;
}

.stat-card.highlight{
box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

@media(max-width:768px){

.hero-training h1{
font-size:30px;
}

.hero-stats{
grid-template-columns:1fr 1fr;
}

}

.training-title{
  font-size:28px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  max-width:650px;
  margin:auto;
}

.training-title{
  font-size:26px;
  font-weight:700;
  line-height:1.5;
  text-align:left;
  max-width:700px;
  margin:20px auto;
  color:#222;
}

@media (max-width:768px){

.training-title{
  font-size:22px;
  padding:0 20px;
}

}
.training-section{
padding:60px 20px;
background:#f4f6f9;
}

.training-card{
max-width:1000px;
margin:auto;
display:flex;
gap:40px;
align-items:center;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.training-image img{
width:320px;
border-radius:10px;
}



.training-title{
font-size:28px;
font-weight:700;
color:#222;
margin-bottom:10px;
}

.training-subtitle{
color:#666;
margin-bottom:20px;
line-height:1.5;
}

.training-info p{
margin:10px 0;
font-size:16px;
}

.price{
color:#1a7f37;
font-weight:700;
}

.price-old{
text-decoration:line-through;
color:#999;
margin-left:8px;
}

.btn-training{
display:inline-block;
margin-top:20px;
background:#1a7f37;
color:white;
padding:12px 28px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.btn-training:hover{
background:#14632b;
}

@media(max-width:768px){

.training-card{
flex-direction:column;
text-align:left;
}

.training-image img{
width:100%;
}

.training-title{
font-size:22px;
}

}

.training-section{
padding:40px 15px;
background:#f4f6f9;
}

.training-container{
max-width:700px;
margin:auto;
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.training-banner{
width:100%;
display:block;
}


.training-container{
max-width:500px;
margin:auto;
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 8px 30px rgba(0,0,0,0.08);
}


.training-info{
margin-top:20px;
}

.training-info p{
margin:8px 0;
font-size:15px;
}


.training-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:30px;
}

.training-card{
background:#fff;
border-radius:12px;
padding:15px;
text-align:center;
box-shadow:0 6px 20px rgba(0,0,0,0.1);
}

.training-card img{
width:100%;
border-radius:10px;
margin-bottom:10px;
}

.training-card h3{
font-size:18px;
margin-bottom:8px;
}

.training-card .date{
font-size:14px;
color:#666;
margin-bottom:10px;
}

.training-card .price span{
text-decoration:line-through;
color:#999;
font-size:13px;
margin-left:5px;
}

.btn-training{
display:inline-block;
margin-top:10px;
padding:8px 16px;
background:#007bff;
color:#fff;
border-radius:6px;
text-decoration:none;
}


.training-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
margin-top:40px;
}

.training-card{
background:#fff;
border-radius:12px;
padding:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
max-width:420px;
width:100%;
margin:auto;
}

.training-content{
text-align:left;
}

.training-content h3{
font-size:20px;
line-height:1.5;
margin-bottom:15px;
color:#0a3d62;

/* penting */
word-break:normal;
white-space:normal;
}

.training-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
margin-top:40px;
}

.training-card{
background:#fff;
border-radius:12px;
padding:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
max-width:420px;
margin:auto;

/* penting */
display:block;
}

.training-image img{
width:100%;
border-radius:10px;
margin-bottom:15px;
}

.training-content{
text-align:left;
}

.training-content h3{
font-size:20px;
margin-bottom:10px;
line-height:1.4;
}

.date{
color:#666;
margin-bottom:10px;
}

.price{
margin:6px 0;
}

.price-old{
text-decoration:line-through;
color:#999;
margin-left:6px;
}

.btn-training{
display:inline-block;
margin-top:10px;
padding:8px 18px;
background:#0d6efd;
color:white;
border-radius:6px;
text-decoration:none;
}

.training-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-top:40px;
}

.training-card{
background:#fff;
border-radius:12px;
padding:20px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
transition:0.3s;
}

.training-card:hover{
transform:translateY(-5px);
}

.training-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;
}

@media(max-width:768px){
.training-grid{
grid-template-columns:1fr;
}
}

.org-middle{
display:flex;
justify-content:center;
gap:50px;
flex-wrap:wrap;
}

.org-col{
display:flex;
flex-direction:column;
align-items:center;
}

.org-child{
margin-top:30px;
}

.org-card.small{
width:200px;
}

@media(max-width:768px){

.org-middle{
flex-direction:column;
align-items:center;
gap:40px;
}

}

.org-chart{
max-width:1100px;
margin:auto;
text-align:center;
}

.org-top{
display:flex;
justify-content:center;
margin-bottom:40px;
}

.org-middle{
display:flex;
justify-content:center;
align-items:flex-start;
gap:60px;
}

.org-column{
display:flex;
flex-direction:column;
align-items:center;
}

.org-card{
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
width:220px;
margin-bottom:20px;
}

.org-card img{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;
}

.org-card h3{
font-size:16px;
margin:5px 0;
}

.org-card p{
font-size:13px;
color:#555;
}

.org-card.small{
width:200px;
}

.org-ga{
margin-top:10px;
}

.line-vertical{
width:2px;
height:40px;
background:#bbb;
margin:0 auto 40px;
}

/* MOBILE */

@media(max-width:768px){

.org-middle{
flex-direction:column;
gap:40px;
}

}

.program-intro{
text-align:center;
max-width:750px;
margin:auto;
margin-bottom:60px;
}

.program-intro h2{
font-size:34px;
color:#0a3d62;
margin-bottom:10px;
}

.program-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.program-item{
background:#fff;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.program-item:hover{
transform:translateY(-5px);
}

.program-icon{
font-size:32px;
color:#f1c40f;
margin-bottom:10px;
}

.program-item h3{
color:#0a3d62;
margin-bottom:10px;
}

.keunggulan-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.keunggulan-item{
text-align:center;
}

.keunggulan-item i{
font-size:28px;
color:#f1c40f;
margin-bottom:10px;
}

.flow-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.step-card{
background:#fff;
padding:25px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.target-list{
max-width:600px;
margin:auto;
line-height:1.8;
}

.fasilitas-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:25px;
text-align:center;
margin-top:40px;
}

.fasilitas-item i{
font-size:28px;
color:#f1c40f;
margin-bottom:10px;
}

.cta-daftar{
text-align:center;
background:#0a3d62;
color:#fff;
padding:60px 20px;
margin-top:60px;
}

.btn-daftar{
display:inline-block;
background:#f1c40f;
color:#0a3d62;
padding:12px 25px;
border-radius:6px;
text-decoration:none;
font-weight:600;
margin-top:15px;
}

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

@media (max-width:768px){

.section{
padding:50px 20px;
}

.section-title{
font-size:26px;
}

.section-subtitle{
font-size:14px;
}

/* PROGRAM */

.program-list{
grid-template-columns:1fr;
gap:20px;
}

.program-item{
padding:20px;
}

/* KEUNGGULAN */

.keunggulan-grid{
grid-template-columns:1fr;
gap:20px;
}

/* PENDAFTARAN */

.flow-grid{
grid-template-columns:1fr;
gap:20px;
}

/* FASILITAS */

.fasilitas-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

/* CTA */

.cta-daftar{
padding:40px 20px;
}

.btn-daftar{
width:100%;
max-width:250px;
}

}

.target-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.target-card{
background:#fff;
padding:25px;
border-radius:12px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.target-card:hover{
transform:translateY(-5px);
}

.target-card i{
font-size:30px;
color:#f1c40f;
margin-bottom:10px;
}

.target-card h4{
margin-bottom:8px;
color:#0a3d62;
}

.target-card p{
font-size:14px;
color:#555;
}

/* ================= PROGRAM 3-2 CENTER ================= */

.program-list{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:30px;
margin-top:50px;
}

/* 3 card pertama */

.program-item:nth-child(1),
.program-item:nth-child(2),
.program-item:nth-child(3){
grid-column:span 2;
}

/* 2 card bawah di tengah */

.program-item:nth-child(4){
grid-column:2 / span 2;
}

.program-item:nth-child(5){
grid-column:4 / span 2;
}


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

@media (max-width:992px){

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

.program-item{
grid-column:auto !important;
}

}

@media (max-width:600px){

.program-list{
grid-template-columns:1fr;
}

}

/* ===== TATA CARA PENDAFTARAN ===== */

.flow-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:25px;
margin-top:40px;
}

.flow-grid .step-card{
grid-column:span 2;
}

/* card ke 5 di tengah */

.flow-grid .step-card:nth-child(5){
grid-column:4 / span 2;
}

/* ===== TARGET PESERTA ===== */

.target-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:25px;
margin-top:40px;
}

.target-card{
grid-column:span 2;
}

/* card terakhir di tengah */

.target-card:nth-child(5){
grid-column:4 / span 2;
}

@media (max-width:768px){

.flow-grid,
.target-grid{
grid-template-columns:1fr 1fr;
}

.flow-grid .step-card,
.target-card{
grid-column:auto !important;
}

}

@media (max-width:500px){

.flow-grid,
.target-grid{
grid-template-columns:1fr;
}

}