*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins', sans-serif;
  background:#f8fafc;
  color:#0f172a;
}

/* NAVBAR */

nav{
  width:100%;

  padding:10px 10%;

  position:fixed;
  top:0;
  left:0;
  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  background:transparent;

  transition:0.4s ease;
}

nav.scrolled{
  background:#0b1220;

  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(255,255,255,0.05);

  padding:6px 10%;
}

nav.scrolled .logo-img{
  width:38px;
  height:38px;
}

nav.scrolled .logo{
  font-size:16px;
}

/* LOGO */

.logo-container{
  display:flex;
  align-items:center;
  gap:18px; /* tambah ruang antara logo & teks */
}

.logo-img{
  width:48px;
  height:48px;

  object-fit:contain;

  transition:0.4s ease;
}

.logo-img:hover{
  transform:rotate(8deg) scale(1.08);
}

.logo{
  color:#FFD700;

  font-size:20px;
  font-weight:600;

  transition:0.4s ease;
}

/* MENU */

nav ul{
  display:flex;
  gap:25px;
  list-style:none;
}

nav ul li a{
  text-decoration:none;
  color:white;

  position:relative;
  padding-bottom:5px;

  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
}

nav ul li a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;

  width:0%;
  height:2px;
  background:#FFD700;

  transition:0.3s;
}

nav ul li a:hover{
  color:#FFD700; /* kuning logo */
}

nav ul li a:hover::after{
  width:100%;
}

/* HERO */

.hero{
  height:100vh;

  background:
  linear-gradient(
    to bottom,
    rgba(15,23,42,0.85) 0%,     /* atas gelap (teks) */
    rgba(15,23,42,0.55) 45%,    /* tengah soften */
    rgba(15,23,42,0.25) 70%,    /* bawah makin cerah */
    rgba(15,23,42,0.10) 100%    /* bawah paling “clear” (jentera nampak) */
  ),
  url('hero.jpg');

  background-size:cover;
  background-position:center;
}

.hero-content h1{
  font-size:76px;
  font-weight:700;
  color:#E0E0E0;
}

.hero-content p{
  font-size:20px;
  margin-bottom:30px;
  color:#ddd;

  animation:fadeUp 1.5s ease;
}

.btn{
  display:inline-block;
  padding:14px 34px;

  background:#FFD700;   /* kuning logo */
  color:#111111;        /* teks hitam gelap */

  font-weight:700;
  text-decoration:none;

  border-radius:6px;    /* kecil je, bukan bulat */
  border:none;          /* buang border hitam */

  text-transform:uppercase;
  letter-spacing:1px;

  transition:0.3s;

  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

.btn:hover{
  background:#e6c200; /* kuning sikit gelap */
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.highlight{
  color:#FFD700;
}

/* SECTION */

section{
  padding:120px 10% 100px;
  scroll-margin-top:90px;
}

#services .section-title{
  color:#0f172a; /* navy gelap, corporate */
}

.section-title::after{
  width:70px;
  height:5px;
  background:#f59e0b;
}

.about p{
  margin-top:30px;
  line-height:1.8;
  color:#555;
}

/* ================= SERVICES ================= */

.services{
  background:#ffffff;

  padding-top:100px;
  padding-bottom:100px;
}



/* ================= SERVICES GRID ================= */

.services-grid{
  margin-top:60px;

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;
}



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

.service-card{
  background:#1e293b;

  border-radius:20px;

  overflow:hidden;

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

  transition:0.4s ease;
}

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



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

.service-image{
  width:100%;
  height:240px;

  overflow:hidden;
}

.service-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:0.4s ease;
}

.service-card:hover .service-image img{
  transform:scale(1.05);
}



/* ================= CONTENT ================= */

.service-content{
  padding:28px;
}

.service-content h3{
  color:#ffffff;

  font-size:24px;
  font-weight:700;

  line-height:1.5;

  margin-bottom:10px;
}



/* ================= SUBTITLE ================= */

.service-subtitle{
  display:block;

  color:#d4af37;

  font-size:14px;

  font-weight:600;

  letter-spacing:1px;

  margin-bottom:20px;
}



/* ================= LIST ================= */

.service-list{
  padding-left:18px;
}

.service-list li{
  color:#cbd5e1;

  line-height:1.8;

  margin-bottom:14px;

  font-size:15px;
}



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

@media(max-width:768px){

  .services-grid{
    grid-template-columns:1fr;

    gap:25px;
  }

  .service-image{
    height:220px;
  }

}

/* ================= PROJECTS ================= */

.projects{
  background:#0f172a;

  padding-top:100px;
  padding-bottom:100px;
}

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



/* ================= PROJECT GRID ================= */

.project-grid{
  margin-top:60px;

  display:grid;

  grid-template-columns:
  repeat(3, 1fr);

  gap:30px;
}



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

.project-card{
  background:#1e293b;

  border-radius:20px;

  overflow:hidden;

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

  transition:0.4s ease;
}

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



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

.project-image{
  width:100%;
  height:240px;

  overflow:hidden;
}

.project-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:0.4s ease;
}

.project-card:hover .project-image img{
  transform:scale(1.05);
}

/* ================= PROJECT VALUE ================= */

.project-value{
  color:#d4af37;

  font-weight:600;

  margin-bottom:14px;
}

/* ================= PROJECT CONTENT ================= */

.project-content{
  padding:25px;
}

.project-content h3{
  color:#ffffff;

  font-size:22px;
  font-weight:700;

  line-height:1.5;

  margin-bottom:12px;
}

.project-client{
  display:block;

  color:#d4af37;

  font-weight:600;

  margin-bottom:12px;
}

.project-location{
  color:#cbd5e1;

  margin-bottom:14px;

  font-size:14px;
}

.project-scope{
  color:#94a3b8;

  line-height:1.8;

  font-size:15px;
}



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

@media(max-width:768px){

  .project-grid{
    grid-template-columns:1fr;

    gap:25px;
  }

  .project-image{
    height:220px;
  }

}

/* ================= WHY CHOOSE US ================= */

.why-us{
  background:#ffffff;

  padding-top:100px;
  padding-bottom:100px;
}



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

.why-grid{
  margin-top:60px;

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;
}



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

.why-card{
  background:#1e293b;

  border-radius:20px;

  overflow:hidden;

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

  transition:0.4s ease;
}

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



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

.why-image{
  width:100%;
  height:220px;

  background:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:25px;
}

.why-image img{
  width:100%;
  height:100%;

  object-fit:contain;
}



/* ================= CONTENT ================= */

.why-content{
  padding:28px;
}

.why-content h3{
  color:#ffffff;

  font-size:24px;
  font-weight:700;

  line-height:1.5;

  margin-bottom:12px;
}



/* ================= SUBTITLE ================= */

.why-subtitle{
  display:block;

  color:#d4af37;

  font-size:14px;

  font-weight:600;

  letter-spacing:1px;

  margin-bottom:20px;
}



/* ================= LIST ================= */

.why-list{
  padding-left:18px;
}

.why-list li{
  color:#cbd5e1;

  line-height:1.8;

  margin-bottom:14px;

  font-size:15px;
}



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

@media(max-width:768px){

  .why-grid{
    grid-template-columns:1fr;

    gap:25px;
  }

  .why-image{
    height:200px;
  }

}

/* REVEAL ANIMATION */

.reveal{
  opacity:0;

  transform:translateY(40px);

  transition:
  opacity 0.6s ease,
  transform 0.6s ease;

  will-change:transform, opacity;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* HERO ANIMATION */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(50px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* RESPONSIVE */

@media(max-width:768px){

  nav{
    flex-direction:column;
    gap:15px;
    background:#0f172a;
  }

  nav ul{
    gap:15px;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:16px;
  }

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

}
/* ================= CERTIFICATES ================= */

.certificates{
  background:#ffffff;
}

/* GRID */

.cert-grid{
  margin-top:50px;

  display:grid;

  gap:30px;
}

/* CARD */

.cert-card{
  background:#f8fafc;

  border-radius:20px;

  padding:25px;

  display:flex;
  align-items:center;

  gap:30px;

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

  transition:0.4s ease;
}

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

  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

/* ================= LEFT SIDE ================= */

.cert-thumb{
  width:200px;
  height:240px;

  flex-shrink:0;

  background:#ffffff;

  border:2px solid #FFD700;

  border-radius:14px;

  padding:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* IMAGE */

.cert-img{
  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;

  display:block;
}

/* ================= RIGHT SIDE ================= */

.cert-content{
  flex:1;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  min-height:240px;
}

.cert-content h3{
  font-size:26px;

  font-weight:700;

  color:#111827;

  margin-bottom:10px;
}

/* META */

.cert-meta{
  color:#FFD700;

  font-size:14px;

  font-weight:600;

  letter-spacing:1px;

  text-transform:uppercase;

  margin-bottom:18px;
}

/* DESCRIPTION */

.cert-desc{
  color:#64748b;

  line-height:1.8;

  font-size:15px;
}

/* BUTTON */

.cert-btn{
  align-self:flex-start;

  margin-top:25px;
}

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

@media(max-width:768px){

  .cert-card{
    flex-direction:column;

    text-align:center;
  }

  .cert-thumb{
    width:100%;
    max-width:240px;

    height:300px;
  }

  .cert-content{
    min-height:auto;
  }

  .cert-btn{
    align-self:center;
  }

}

/* ================= EXECUTIVE TEAM ================= */

.team{
  background:#f8f9fa;

  color:#0f172a;

  padding-top:100px;
  padding-bottom:100px;
}

.team .section-title{
  text-align:center;

  color:#0f172a;
}

.team-intro{
  max-width:900px;

  margin:30px auto 0;

  text-align:center;

  color:#64748b;

  line-height:1.9;
}

/* GRID */

.team-grid{
  display:grid;

  gap:35px;
}

/* TOP ROW */

.top-row{
  margin-top:70px;

  grid-template-columns:repeat(3,1fr);
}

/* BOTTOM ROW */

.bottom-row{
  margin-top:90px;

  grid-template-columns:repeat(2,1fr);

  width:72%;

  margin-left:auto;
  margin-right:auto;
}

/* CARD */

.team-card{
  background:#ffffff;

  padding:50px 45px 70px;

  border-radius:18px;

  border-top:4px solid #d4af37;

  min-height:430px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  transition:0.4s ease;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
}

.team-card:hover{
  transform:translateY(-10px);

  box-shadow:
  0 20px 40px rgba(0,0,0,0.12);
}

/* ICON */

.team-icon{
  width:78px;
  height:78px;

  border:1.5px solid rgba(212,175,55,0.5);

  background:#f8fafc;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  margin-bottom:24px;

  transition:0.4s ease;
}

.team-icon i{
  font-size:28px;

  color:#d4af37;
}

/* NAME */

.team-card h3{
  font-size:24px;

  font-weight:700;

  line-height:1.5;

  color:#0f172a;

  margin-bottom:12px;
}

/* POSITION */

.position{
  display:block;

  margin-bottom:24px;

  color:#d4af37;

  font-size:12px;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:2px;

  position:relative;

  padding-bottom:14px;
}

.position::after{
  content:'';

  position:absolute;

  left:50%;
  transform:translateX(-50%);

  bottom:0;

  width:40px;
  height:2px;

  background:#d4af37;
}

/* DESCRIPTION */

.team-card p{
  color:#64748b;

  line-height:1.9;

  font-size:14px;

  margin-top:auto;
}

/* RESPONSIVE */

@media(max-width:992px){

  .top-row,
  .bottom-row{
    grid-template-columns:1fr;

    width:100%;
  }

}

/* ================= HORIZONTAL FINANCIAL CARD ================= */

.financial-card-horizontal{
  display:flex;
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  margin-top:40px;

  transition:0.4s ease;
}

.financial-card-horizontal:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* LEFT IMAGE BOX */
.financial-image{
  width:220px;
  background:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;
}

.financial-image img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* RIGHT CONTENT */
.financial-content{
  flex:1;
  padding:30px;
  text-align:left;
}

.financial-content h3{
  color:#0f172a;
  font-size:22px;
  margin-bottom:10px;
}

.financial-sub{
  display:block;
  color:#64748b;
  margin-bottom:15px;
  font-size:14px;
}

.financial-content ul{
  padding-left:18px;
  margin:0;
}

.financial-content li{
  color:#64748b;
  line-height:1.8;
  margin-bottom:8px;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
  .financial-card-horizontal{
    flex-direction:column;
  }

  .financial-image{
    width:100%;
  }
}

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

.footer{
  background:#0f172a;

  padding-top:90px;
  padding-bottom:30px;

  color:#ffffff;
}

/* GRID */

.footer-grid{
  display:grid;

  grid-template-columns:
  1.2fr 1fr 1fr;

  gap:60px;

  align-items:flex-start;
}

/* ================= COLUMN 1 ================= */

.footer-about{
  padding-left:30px; /* 🔥 ruang dari divider kiri */
}

/* LOGO */

.footer-logo{
  width:180px;

  margin-bottom:25px;
}

/* DESCRIPTION */

.footer-about p{
  color:#cbd5e1;

  line-height:1.9;

  font-size:15px;

  max-width:320px;
}

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

.footer-title{
  color:#d4af37;

  font-size:18px;

  font-weight:700;

  margin-bottom:25px;

  letter-spacing:1px;
}

/* ================= QUICK LINKS ================= */

.footer-links{
  list-style:none;

  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:14px;
}

.footer-links a{
  color:#ffffff;

  text-decoration:none;

  transition:0.3s ease;
}

.footer-links a:hover{
  color:#d4af37;

  padding-left:5px;
}

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

.footer-contact p{
  color:#cbd5e1;

  line-height:1.9;

  margin-bottom:15px;
}

.footer-contact i{
  color:#d4af37;

  margin-right:10px;
}

/* ================= COPYRIGHT ================= */

.footer-bottom{
  margin-top:70px;

  padding-top:25px;

  border-top:1px solid rgba(255,255,255,0.08);

  text-align:center;
}

.footer-bottom p{
  color:#94a3b8;

  font-size:14px;

  letter-spacing:0.5px;
}

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

@media(max-width:768px){

  .footer{
    padding-top:70px;
  }

  .footer-grid{
    grid-template-columns:1fr;

    gap:45px;
  }

.footer-about{
  padding-left:35px;
}

  .footer-logo{
    width:160px;
  }

}