body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: white;
  font-family: "Open Sans", sans-serif;
}

/* ===== NAVBAR ===== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 10px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.logo img {
  height: 50px;
  margin-left: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px; /* jarak antar link */
  margin-left: auto; /* dorong grup nav ke kanan */
  margin-right: 2.5rem; /* geser dikit ke kiri (dari tombol) */
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  color: #003475;
  font-size: 22px;
  font-weight: 600;
  position: relative;
  padding-right: 20px; /* ruang buat panah */
  text-decoration: none; /* hilangin garis bawah */
  display: inline-block; /* biar rapih */
}

.nav-links li a:hover,
.nav-links li a:active {
  color: #c7c7c7;
}

.hire-btn {
  background-color: #f66263;
  color: white;
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 22px;
  margin-right: 3rem;
  text-decoration: none;
}

.hire-btn:hover {
  background-color: #e72727;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  color: #ffffff;
}

/* ===== Hamburger Menu ===== */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 1200;
  position: relative;
  margin-right: 30px;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background: #003475;
  margin: 4px 0;
  transition: all 0.3s ease;
}

/* ===== saat jadi X (warna putih) ===== */
.menu-toggle.active span {
  background: #fff;
}

/* ===== animasi jadi X ===== */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(43deg) translate(8px, 8px);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: rotate(-43deg) translate(8px, -8px);
}

/* ===== Responsive Navbar Sidebar ===== */
@media (max-width: 768px) {
  /* tombol menu (☰ / ✖) */
  .menu-toggle {
    display: flex;
    position: fixed;
    top: 20px;
    right: 40px; /* pojok kanan */
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 1101; /* lebih tinggi dari sidebar */
  }

  /* sidebar */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* sembunyi di luar layar kanan */
    height: 100%;
    width: 50%; /* sidebar hanya 30% lebar layar */
    max-width: 320px; /* opsional */
    background: #003475;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 30px;
    transition: right 0.3s ease-in-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    margin: 0; /* pastikan tidak ada margin */
  }

  .nav-links.show {
    right: 0; /* muncul dari kanan */
  }

  /* item menu */
  .nav-links li {
    margin: 10px 0;
    width: 100%;
  }

  .nav-links li a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .nav-links li a:hover,
  .nav-links li a:active {
    color: #c7c7c7;
  }

  .nav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .nav-links li a::after {
    content: "›";
    font-size: 25px;
    color: #fff;
  }

  /* tombol hire */
  .hire-btn {
    display: block;
    margin-top: 25px;
    background-color: #f66263;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  }

  .hire-btn:hover {
    background-color: #e72727;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  }
}

/* ===== Responsive Navbar untuk Mobile Kecil (≤320px) ===== */
@media (max-width: 320px) {
  .navbar {
    padding: 6px 10px;
    height: 50px; /* fix tinggi biar nggak terlalu besar */
  }

  .logo img {
    height: 35px; /* kecilin logo */
    margin-left: 9px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    margin-right: -10px;
    margin-top: -40px;
    z-index: 3000; /* lebih tinggi dari sidebar */
  }

  .menu-toggle span {
    width: 22px; /* lebih kecil */
    height: 2.5px;
    margin-left: -40px;
    background: #003475;
    transition: all 0.3s ease;
  }

  /* ===== animasi jadi X ===== */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 5px);
  }

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

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

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* sembunyi dulu */
    height: 100vh; /* penuh tinggi layar */
    width: 40vw; /* penuh lebar layar */
    background: #003475;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 25px;
    transition: right 0.3s ease-in-out;
    z-index: 2000;
    margin: 0; /* pastikan tidak ada margin */
    box-shadow: none; /* opsional */
  }

  /* saat aktif */
  .nav-links.show {
    right: 0;
  }

  .nav-links li {
    margin: 1px 0;
  }

  .nav-links li a {
    color: #fff;
    font-size: 14px; /* perkecil font menu */
  }

  .nav-links li a:hover,
  .nav-links li a:active {
    color: #c7c7c7;
  }

  .nav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .nav-links li a::after {
    content: "›";
    font-size: 25px;
    color: #fff;
  }

  .hire-btn {
    font-size: 14px;
    padding: 6px 14px;
    margin-left: 0px;
    margin-top: 5px;
  }

  .hire-btn:hover {
    background-color: #e72727;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    color: #ffffff;
  }
}

/* ===== Responsive Navbar untuk Mobile ukuran M (≤375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .navbar {
    padding: 6px 10px;
    height: 50px; /* fix tinggi biar nggak terlalu besar */
  }

  .logo img {
    height: 35px; /* kecilin logo */
    margin-left: 9px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    margin-right: -10px;
    margin-top: -40px;
    z-index: 3000; /* lebih tinggi dari sidebar */
  }

  .menu-toggle span {
    width: 22px; /* lebih kecil */
    height: 2.5px;
    margin-left: -40px;
    background: #003475;
    transition: all 0.3s ease;
  }

  /* ===== animasi jadi X ===== */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 5px);
  }

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

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

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* sembunyi dulu */
    height: 100vh; /* penuh tinggi layar */
    width: 40vw; /* penuh lebar layar */
    background: #003475;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 25px;
    transition: right 0.3s ease-in-out;
    z-index: 2000;
    margin: 0; /* pastikan tidak ada margin */
    box-shadow: none; /* opsional */
  }

  /* saat aktif */
  .nav-links.show {
    right: 0;
  }

  .nav-links li {
    margin: 1px 0;
  }

  .nav-links li a {
    color: #fff;
    font-size: 14px; /* perkecil font menu */
  }

  .nav-links li a:hover,
  .nav-links li a:active {
    color: #c7c7c7;
  }

  .nav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .nav-links li a::after {
    content: "›";
    font-size: 25px;
    color: #fff;
  }

  .hire-btn {
    font-size: 14px;
    padding: 6px 14px;
    margin-left: 0px;
    margin-top: 5px;
  }

  .hire-btn:hover {
    background-color: #e72727;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    color: #ffffff;
  }
}

/* ===== Responsive Navbar untuk Mobile ukuran L (≤425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .navbar {
    padding: 6px 10px;
    height: 50px; /* fix tinggi biar nggak terlalu besar */
  }

  .logo img {
    height: 35px; /* kecilin logo */
    margin-left: 9px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    margin-right: -10px;
    margin-top: -40px;
    z-index: 3000; /* lebih tinggi dari sidebar */
  }

  .menu-toggle span {
    width: 22px; /* lebih kecil */
    height: 2.5px;
    margin-left: -40px;
    background: #003475;
    transition: all 0.3s ease;
  }

  /* ===== animasi jadi X ===== */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 5px);
  }

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

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

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* sembunyi dulu */
    height: 100vh; /* penuh tinggi layar */
    width: 45vw; /* penuh lebar layar */
    background: #003475;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 25px;
    transition: right 0.3s ease-in-out;
    z-index: 2000;
    margin: 0; /* pastikan tidak ada margin */
    box-shadow: none; /* opsional */
  }

  /* saat aktif */
  .nav-links.show {
    right: 0;
  }

  .nav-links li {
    margin: 2px 0;
  }

  .nav-links li a {
    color: #fff;
    font-size: 14px; /* perkecil font menu */
  }

  .nav-links li a:hover,
  .nav-links li a:active {
    color: #c7c7c7;
  }

  .nav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .nav-links li a::after {
    content: "›";
    font-size: 25px;
    color: #fff;
  }

  .hire-btn {
    font-size: 14px;
    padding: 6px 14px;
    margin-left: 0px;
    margin-top: 5px;
  }

  .hire-btn:hover {
    background-color: #e72727;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    color: #ffffff;
  }
}

/* ===== HERO SECTION ===== */
.home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90vh;
  position: relative;
  background-image: url(assets/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 120px;
  padding: 0 5%;
  transform: translateY(90px);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 45%;
  padding-left: 100px;
}

.hero-text h1 {
  font-size: clamp(28px, 5vw, 65px);
  font-family: "Montserrat", sans-serif;
  word-spacing: 2px;
  margin-bottom: 20px;
  margin-left: -60px;
}

.red-line {
  width: clamp(12rem, 40vw, 37rem); /* lebih panjang */
  height: 3.5px;
  background-color: #ff5c5c;
  margin: 20px 0;
  margin-left: -60px;
}

.hero-text p {
  margin-bottom: 40px;
  font-size: clamp(16px, 2.5vw, 35px);
  line-height: 1.5;
  max-width: 500px;
  color: #fff;
  margin-left: -60px;
}

.view-btn {
  background-color: transparent;
  border: 2px solid #f66263;
  color: #f66263;
  font-size: clamp(26px, 2vw, 20px);
  padding: clamp(6px, 1.2vw, 10px) clamp(15px, 2vw, 20px);
  cursor: pointer;
  margin-left: -60px;
  border-radius: 6px;
  box-shadow: 0 5px 10px #3a3a3a;
  transition: 0.3s ease;
  text-decoration: none;
}

.view-btn:hover {
  background-color: #003475;
  color: white;
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* ===== Tablet (≤768px) ===== */
@media (max-width: 768px) {
  .hero {
    min-height: 70vh;
    padding: 40px 30px;
  }

  .hero-text {
    padding-left: 40px; /* tetap kiri tapi lebih rapat */
    max-width: 90%;
    text-align: left; /* pastikan tetap kiri */
  }

  .hero-text h1 {
    font-size: 45px; /* perkecil judul */
    margin-left: -20px;
  }

  .hero-text p {
    font-size: 20px;
    max-width: 100%;
    margin: 15px 0 25px; /* rapetin jarak */
    margin-left: -20px;
  }

  .red-line {
    margin: 20px 0; /* tetap kiri */
    width: 110%;
    margin-left: -20px;
  }
  .view-btn {
    font-size: 20px;
    padding: 8px 16px;
    margin-left: -20px;
  }

  .view-btn:hover {
    background-color: #003475;
    color: white;
    border: 3px solid #f66263;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  }
}

/* ===== Mobile ukuran M (≤375px) ===== */
@media (max-width: 375px) {
  .home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5vh;
    position: relative;
    background-image: url(assets/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 120px;
    padding: 0 5%;
    transform: translateY(60px);
  }

  .hero-text {
    padding-left: 10px;
    max-width: 100%;
    text-align: left;
  }

  .hero-text h1 {
    font-size: 23px;
    margin-left: 0;
    transform: translateY(30px);
    line-height: 1.2;
  }

  .hero-text p {
    font-size: 11px;
    margin-left: 0;
    transform: translateY(5px);
    line-height: 1.4;
  }

  .red-line {
    width: 70%;
    height: 2.5px;
    margin-left: 0;
    transform: translateY(15px);
  }

  .view-btn {
    font-size: 9px;
    padding: 3px 9px;
    margin-left: 0;
    margin-top: 0; /* jangan negatif */
    display: inline-block;
    transform: translateY(-15px);
  }

  .view-btn:hover {
    background-color: #003475;
    color: white;
    border: 2px solid #f66263;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  }
}

/* ===== Mobile ukuran L (≤425px) ===== */
@media (max-width: 425px) {
  .home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5vh;
    position: relative;
    background-image: url(assets/background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 120px;
    padding: 0 5%;
    transform: translateY(60px);
  }

  .hero-text {
    padding-left: 10px;
    max-width: 100%;
    text-align: left;
  }

  .hero-text h1 {
    font-size: 23px;
    margin-left: 0;
    transform: translateY(30px);
    line-height: 1.2;
  }

  .hero-text p {
    font-size: 11px;
    margin-left: 0;
    transform: translateY(5px);
    line-height: 1.4;
  }

  .red-line {
    width: 70%;
    height: 2.5px;
    margin-left: 0;
    transform: translateY(15px);
  }

  .view-btn {
    font-size: 9px;
    padding: 3px 9px;
    margin-left: 0;
    margin-top: 0; /* jangan negatif */
    display: inline-block;
    transform: translateY(-15px);
  }

  .view-btn:hover {
    background-color: #003475;
    color: white;
    border: 2px solid #f66263;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  }
}

/* ===== PARTNERS SECTION ===== */
.partners {
  padding: 20px 0;
  margin-top: 20px; /* kasih jarak antar section */
  text-align: center;
  transform: translateY(120px);
}

.partners h2 {
  font-size: 35px;
  color: #003475;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  transform: translateY(-50px);
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(150px, 1fr)
  ); /* default fleksibel */
  align-items: center;
  justify-items: center;
  gap: 30px;
  width: 100%;
  transform: translateY(-40px);
}

.partner-logos img {
  max-height: 500px;
  width: auto;
  filter: grayscale(20%);
  transition: all 0.3s ease;
}

.partner-logos img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
/* ===== Tablet (481px – 768px) ===== */
@media (max-width: 768px) {
  .partner-logos {
    grid-template-columns: repeat(5, 1fr); /* tampil 4 sejajar */
    gap: 2px;
  }

  .partners h2 {
    transform: translateY(-70px);
  }

  .partner-logos img {
    max-height: 70px;
  }

  /* pastikan semua logo muncul di tablet */
  .partner-logos img {
    display: block;
  }

  .partner-logos img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
  }
}

/* ===== Mobile Kecil (≤320px) ===== */
@media (max-width: 320px) {
  .partner-logos {
    grid-template-columns: repeat(3, 1fr); /* tetap 3 logo sejajar */
    gap: 10px; /* rapetin biar muat */
    transform: translateY(-160px);
  }

  .partner-logos img {
    max-height: 48px; /* perkecil supaya pas */
    margin-top: 40px;
  }

  /* sembunyikan logo ke-4 dan seterusnya */
  .partner-logos img:nth-child(n + 4) {
    display: none;
  }

  .partners h2 {
    font-size: 20px; /* lebih kecil biar proporsional */
    transform: translateY(-90px);
  }

  .partner-logos img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
  }
}

/* ===== Mobile Ukuran M (≤375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .partner-logos {
    grid-template-columns: repeat(3, 1fr); /* tetap 3 logo sejajar */
    gap: 10px; /* rapetin biar muat */
    transform: translateY(-160px);
  }

  .partner-logos img {
    max-height: 48px; /* perkecil supaya pas */
    margin-top: 40px;
  }

  /* sembunyikan logo ke-4 dan seterusnya */
  .partner-logos img:nth-child(n + 4) {
    display: none;
  }

  .partners h2 {
    font-size: 22px; /* lebih kecil biar proporsional */
    transform: translateY(-100px);
  }
}

/* ===== Mobile Ukuran L (≤425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .partner-logos {
    grid-template-columns: repeat(3, 1fr); /* tetap 3 logo sejajar */
    gap: 10px; /* rapetin biar muat */
    transform: translateY(-160px);
  }

  .partner-logos img {
    margin-top: 40px;
    max-height: 48px; /* perkecil supaya pas */
  }

  /* sembunyikan logo ke-4 dan seterusnya */
  .partner-logos img:nth-child(n + 4) {
    display: none;
  }

  .partners h2 {
    font-size: 22px; /* lebih kecil biar proporsional */
    transform: translateY(-90px);
  }
}

/*==== SERVICES SECTION ====*/
.services {
  padding: 20px 7.5%;
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
  transform: translateY(150px);
}

.services-title {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 700;
  color: #003475;
  margin-bottom: 50px;
}

.services-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px; /* jarak antar card */
  justify-items: stretch; /* semua card ambil lebar penuh */
}

/* Container untuk text & tombol */
.services-text {
  max-width: 400px;
  margin: 0 auto;
  margin-left: 160px;
  color: #fff;
  font-size: 35px;
  transform: translateY(-50px);
}

/* Kotak biru */
.text-services {
  width: 100%;
  max-width: 490px;
  height: 220px;
  margin: 20px auto;
  background: #003475;
  border-radius: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 0.5rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* teks di atas, tombol di bawah */
  padding: 30px;
}

.text-services p {
  color: white;
  font-size: 22px;
  text-align: center;
  transform: translateY(-85px);
  line-height: 1.3;
  margin: 0;
}

/* Tombol di dalam kotak biru */
.btn-start {
  align-self: flex-end; /* tombol geser ke kanan */
  padding: 10px 25px;
  background-color: #ff5c5c;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  transform: translate(-170px, -75px); /* geser kanan 15px */
}

.btn-start:hover {
  background-color: #c52828;
}

/* Klik / active effect */
.text-services:active {
  transform: translateY(2px); /* turun sedikit saat diklik */
  transition: all 0.2s ease; /* lebih cepat untuk efek klik */
}

/* Kotak layanan */
.service-system {
  width: 100%;
  max-width: 530px; /* sama dengan biru */
  margin: -300px auto;
  background: #fff;
  padding: 0 0 30px 20px; /* sama dengan biru */
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  height: 250px; /* fix sama dengan biru */
  display: flex;
  flex-direction: column;
  margin-left: 37.7rem;
  justify-content: flex-start;
  border-radius: 5px;
}

.icon-system {
  width: 80px;
  height: 950px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003475;
  margin-left: 15px;
  transform: translateY(40px);
  border-radius: 7px;
}

.icon-system ion-icon {
  font-size: 60px;
  color: #fff;
}

/* Text */
.icon-titel {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #003475;
  margin-left: 15px;
  transform: translateY(16px);
}

.icon-tulisan {
  font-size: 20px;
  line-height: 1.6;
  color: #3a3a3a;
  margin-left: 15px;
  transform: translateY(-30px);
}

.service-app {
  width: 100%;
  max-width: 530px; /* sama dengan biru */
  margin: 20px auto;
  background: #fff;
  padding: 0 0 30px 20px; /* sama dengan biru */
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  height: 250px; /* fix sama dengan biru */
  display: flex;
  margin-left: 75rem;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 5px;
}

.icon-app {
  width: 80px;
  height: 950px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003475;
  margin-left: 15px;
  transform: translateY(40px);
  border-radius: 7px;
}

.icon-app ion-icon {
  font-size: 60px;
  color: #fff;
}

/* Text */
.icon-TITLE {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #003475;
  margin-left: 15px;
  transform: translateY(16px);
}

.icon-aksara {
  font-size: 20px;
  line-height: 1.6;
  color: #3a3a3a;
  margin-left: 15px;
  transform: translateY(-30px);
}

.service-it {
  width: 100%;
  max-width: 530px; /* sama dengan biru */
  margin: 20px auto;
  background: #fff;
  padding: 0 0 30px 20px; /* sama dengan biru */
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  height: 250px; /* fix sama dengan biru */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 5px;
  margin-left: 0.5rem;
}

.icon-itt {
  width: 80px;
  height: 950px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003475;
  margin-left: 15px;
  transform: translateY(40px);
  border-radius: 7px;
}

.icon-itt ion-icon {
  font-size: 60px;
  color: #fff;
}

/* Text */
.icon-judul {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #003475;
  margin-left: 15px;
  transform: translateY(16px);
}

.icon-teks {
  font-size: 20px;
  line-height: 1.6;
  color: #3a3a3a;
  margin-left: 15px;
  transform: translateY(-30px);
}

.service-intership {
  width: 100%;
  max-width: 530px; /* sama dengan biru */
  margin: -300px auto 60px auto; /* naik 20px */
  background: #fff;
  padding: 0 0 30px 20px; /* sama dengan biru */
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  height: 250px; /* fix sama dengan biru */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 37.7rem;
  border-radius: 5px;
}

.icon-intership {
  width: 80px;
  height: 950px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003475;
  margin-left: 15px;
  transform: translateY(40px);
  border-radius: 7px;
}

.icon-intership ion-icon {
  font-size: 60px;
  color: #fff;
}

/* Text */
.icon-titles {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #003475;
  margin-left: 15px;
  transform: translateY(16px);
}

.icon-seratan {
  font-size: 20px;
  line-height: 1.6;
  color: #3a3a3a;
  margin-left: 15px;
  transform: translateY(-30px);
}

.service-education {
  width: 100%;
  max-width: 530px; /* sama dengan biru */
  margin: -340px auto 60px auto;
  background: #fff;
  padding: 0 0 30px 20px; /* sama dengan biru */
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  height: 250px; /* fix sama dengan biru */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 5px;
  margin-left: 75rem;
}

.text-services:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); /* jauh lebih hitam */
}
.service-system:hover,
.service-app:hover,
.service-it:hover,
.service-intership:hover,
.service-education:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); /* jauh lebih hitam */
}

/* Icon Box */
.icon-education {
  width: 80px;
  height: 950px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #003475;
  margin-left: 15px;
  transform: translateY(40px);
  border-radius: 7px;
}

.icon-education ion-icon {
  font-size: 60px;
  color: #fff;
}

/* Text */
.icon-title {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #003475;
  margin-left: 15px;
  transform: translateY(16px);
}

.icon-tulis {
  font-size: 20px;
  line-height: 1.6;
  color: #3a3a3a;
  margin-left: 15px;
  transform: translateY(-30px);
}

/* ===== Responsive Tablet (max 768px) ===== */
@media (max-width: 768px) {
  .services {
    margin-top: -70px; /* tarik section services naik */
    padding: 20px 10%;
    background-color: #fff;
    font-family: "Open Sans", sans-serif;
  }

  .services-layout {
    grid-template-columns: 1fr; /* 1 kolom */
    max-width: 100%; /* full container */
    justify-items: flex-start; /* sejajar kiri */
    padding: 0 20px; /* beri padding kiri-kanan */
    position: relative; /* anchor buat button absolute */
  }

  .services h3 {
    font-size: 25px;
    margin-left: -50px;
    transform: translateY(-10px);
    text-align: left; /* sejajar kiri */
  }

  .text-services {
    width: 100%;
    max-width: 315px;
    height: 80px;
    margin: 20px auto;
    background: #003475;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 63px 20px;
    transition: all 0.3s ease;
    transform: translateY(30px);
    margin-left: -75px;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* teks di atas, tombol di bawah */
    margin-bottom: 25px;
  }

  .text-services p {
    color: white;
    font-size: 15px;
    line-height: 1.6;
    transform: translateY(-80px);
    margin: 0;
  }
  .btn-start {
    font-size: 18px;
    padding: 7px 10px;
    transform: translate(-95px, -75px); /* geser kanan 15px */
  }

  .service-system {
    width: 100%;
    max-width: 300px;
    margin: 20px 0;
    background: #fff;
    padding: 27px 20px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 330px;
    margin-top: -200px;
  }

  .icon-system {
    width: 50px;
    height: 50px;
    transform: translateY(-10px);
    margin-left: 30px;
  }

  .icon-system ion-icon {
    font-size: 30px;
  }

  .icon-titel {
    font-size: 20px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 30px;
    margin-top: -40px;
    transform: translateY(30px);
  }

  .icon-tulisan {
    font-size: 15.5px;
    margin-top: -20px;
    margin-left: 30px;
    transform: translateY(35px);
  }

  .service-app {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 45px 5px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -55px;
    margin-top: -5px;
  }

  .icon-app {
    width: 50px;
    height: 50px;
    transform: translateY(-30px);
    margin-left: 40px;
  }

  .icon-app ion-icon {
    font-size: 30px;
  }

  .icon-TITLE {
    font-size: 20px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 40px;
    margin-top: -40px;
    transform: translateY(25px);
  }

  .icon-aksara {
    font-size: 15.5px;
    margin-top: -20px;
    margin-left: 40px;
    transform: translateY(40px);
  }

  .service-it {
    width: 200%;
    max-width: 320px;
    margin: 20px 0;
    background: #fff;
    padding: 45px 11px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 330px;
    margin-top: -236px;
  }

  .icon-itt {
    width: 50px;
    height: 50px;
    transform: translateY(-30px);
    margin-left: 28px;
  }

  .icon-itt ion-icon {
    font-size: 30px;
  }

  .icon-judul {
    font-size: 20px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 30px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-teks {
    font-size: 15.5px;
    margin-top: -20px;
    margin-left: 30px;
    transform: translateY(30px);
  }

  .service-intership {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 40px 5px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -55px;
    margin-top: -6px;
  }

  .icon-intership {
    width: 50px;
    height: 50px;
    transform: translateY(-30px);
    margin-left: 40px;
  }

  .icon-intership ion-icon {
    font-size: 30px;
  }

  .icon-titles {
    font-size: 20px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 40px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-seratan {
    font-size: 15.5px;
    margin-top: -20px;
    margin-left: 40px;
    transform: translateY(25px);
  }

  .service-education {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 39px 0px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 330px;
    margin-top: -250px;
    min-height: 40px;
  }

  .icon-education {
    width: 50px;
    height: 50px;
    transform: translateY(-30px);
    margin-left: 40px;
  }

  .icon-education ion-icon {
    font-size: 30px;
  }

  .icon-title {
    font-size: 20px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 40px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulis {
    font-size: 15.5px;
    margin-top: -20px;
    margin-left: 40px;
    transform: translateY(25px);
  }
}
/* ===== Responsive Mobile Kecil (max 320px) ===== */
@media (max-width: 320px) {
  .services {
    margin-top: -190px;
    padding: 10px 6%;
  }

  .services-title {
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
  }

  /* === Card CTA biru === */
  .text-services {
    width: 100%;
    max-width: 315px;
    height: 80px;
    margin: 20px auto;
    background: #003475;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 40px 29px;
    transition: all 0.3s ease;
    transform: translateY(30px);
    margin-left: -30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* teks di atas, tombol di bawah */
    margin-bottom: 25px;
  }

  .text-services h3 {
    font-size: 15px;
    transform: translateY(20px);
    margin-left: -73px;
  }

  .text-services p {
    margin-bottom: 12px;
    font-size: 11px;
    transform: translateY(-45px);
  }

  .btn-start {
    align-self: flex-end; /* tombol geser ke kanan */
    padding: 5px 10px;
    background-color: #ff5c5c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    transition: 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    transform: translate(-80px, -55px); /* geser kanan 15px */
  }

  .btn-start:hover {
    background: #e63939;
  }

  /* === Card 1: Digital Business System === */
  .service-system {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 25px;
    min-height: 40px;
  }

  .icon-system {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-system ion-icon {
    font-size: 20px;
  }

  .icon-titel {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulisan {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 2: Application Development === */
  .service-app {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 55px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-app {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-app ion-icon {
    font-size: 20px;
  }

  .icon-TITLE {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-aksara {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 3: IT Consulting === */
  .service-it {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 55px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-itt {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-itt ion-icon {
    font-size: 20px;
  }

  .icon-judul {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-teks {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 4: Internship === */
  .service-intership {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-intership {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-intership ion-icon {
    font-size: 20px;
  }

  .icon-titles {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-seratan {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 5: Education === */
  .service-education {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-education {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-education ion-icon {
    font-size: 20px;
  }

  .icon-title {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulis {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .services {
    margin-top: -190px;
    padding: 10px 6%;
  }

  .services-title {
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
  }

  /* === Card CTA biru === */
  .text-services {
    width: 100%;
    max-width: 315px;
    height: 80px;
    margin: 20px auto;
    background: #003475;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 40px 29px;
    transition: all 0.3s ease;
    transform: translateY(30px);
    margin-left: -30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* teks di atas, tombol di bawah */
    margin-bottom: 25px;
  }

  .text-services h3 {
    font-size: 15px;
    transform: translateY(20px);
    margin-left: -45px;
  }

  .text-services p {
    margin-bottom: 12px;
    font-size: 11px;
    transform: translateY(-45px);
  }

  .btn-start {
    font-size: 10px;
    margin-right: 15px;
    margin-top: 20px; /* tambah jarak ke bawah */
  }

  .btn-start:hover {
    background: #e63939;
  }

  /* === Card 1: Digital Business System === */
  .service-system {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 25px;
    min-height: 40px;
  }

  .icon-system {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-system ion-icon {
    font-size: 20px;
  }

  .icon-titel {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulisan {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 2: Application Development === */
  .service-app {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 55px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-app {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-app ion-icon {
    font-size: 20px;
  }

  .icon-TITLE {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-aksara {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 3: IT Consulting === */
  .service-it {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 55px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-itt {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-itt ion-icon {
    font-size: 20px;
  }

  .icon-judul {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-teks {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 4: Internship === */
  .service-intership {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-intership {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-intership ion-icon {
    font-size: 20px;
  }

  .icon-titles {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-seratan {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 5: Education === */
  .service-education {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-education {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-education ion-icon {
    font-size: 20px;
  }

  .icon-title {
    font-size: 15px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulis {
    font-size: 11px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }
}

/* ===== Responsive Mobile Ukuran L (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .services {
    margin-top: -190px;
    padding: 10px 6%;
    margin-left: 15px;
  }

  .services-title {
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
  }

  /* === Card CTA biru === */
  .text-services {
    width: 100%;
    max-width: 315px;
    height: 80px;
    margin: 20px auto;
    background: #003475;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 40px 29px;
    transition: all 0.3s ease;
    transform: translateY(30px);
    margin-left: -30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* teks di atas, tombol di bawah */
    margin-bottom: 25px;
  }

  .text-services h3 {
    font-size: 19px;
    transform: translateY(20px);
    margin-left: -40px;
  }

  .text-services p {
    margin-bottom: 18px;
    font-size: 11px;
    transform: translateY(-50px);
  }

  .btn-start {
    font-size: 12px;
    margin-right: 20px;
    margin-top: 8px; /* tambah jarak ke bawah */
  }

  .btn-start:hover {
    background: #e63939;
  }

  /* === Card 1: Digital Business System === */
  .service-system {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 25px;
    min-height: 40px;
  }

  .icon-system {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-system ion-icon {
    font-size: 20px;
  }

  .icon-titel {
    font-size: 18px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulisan {
    font-size: 13px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 2: Application Development === */
  .service-app {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 55px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-app {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-app ion-icon {
    font-size: 20px;
  }

  .icon-TITLE {
    font-size: 18px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-aksara {
    font-size: 13px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 3: IT Consulting === */
  .service-it {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 55px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-itt {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-itt ion-icon {
    font-size: 20px;
  }

  .icon-judul {
    font-size: 18px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-teks {
    font-size: 13px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 4: Internship === */
  .service-intership {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-intership {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-intership ion-icon {
    font-size: 20px;
  }

  .icon-titles {
    font-size: 18px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-seratan {
    font-size: 13px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }

  /* === Card 5: Education === */
  .service-education {
    width: 100%;
    max-width: 345px;
    margin: 20px 0;
    background: #fff;
    padding: 50px 10px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    height: auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: -9px;
    margin-top: 20px;
    min-height: 40px;
  }

  .icon-education {
    width: 40px;
    height: 40px;
    transform: translateY(-30px);
    margin-left: 5px;
  }

  .icon-education ion-icon {
    font-size: 20px;
  }

  .icon-title {
    font-size: 18px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: #003475;
    margin-left: 3px;
    margin-top: -40px;
    transform: translateY(20px);
  }

  .icon-tulis {
    font-size: 13px;
    margin-top: -20px;
    margin-left: 3px;
    transform: translateY(40px);
  }
}

/* ===== HOW IT WORK SECTION ===== */
.how-it-works {
  background: #ffffff;
  text-align: center;
}

.how-subtitle {
  color: #003475;
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-left: -86rem;
  transform: translateY(120px);
}

.how-title {
  font-size: 48px;
  font-weight: 700;
  color: #222;
  margin-bottom: 60px;
  margin-left: -22rem;
  transform: translateY(110px);
}

/* ================= CARD 1 ================= */
.step-pendahuluan {
  width: 450px;
  margin: 40px auto;
  display: block;
  margin-left: 90px;
  margin-top: 150px;
}
.step-number1 {
  font-size: 50px;
  color: #b8b4b4;
  margin-left: -600px;
  margin-top: -280px;
}
.step-card h1 {
  font-size: 30px;
  font-weight: bold;
  margin-left: -420px;
  margin-top: -5px;
  color: #003475;
}
.step-card p.text-1 {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  margin-left: 685px;
  max-width: 900px;
  margin-top: -20px;
  text-align: left;
}

/* ================= CARD 2 ================= */
.step-nego {
  width: 390px;
  margin: 40px auto;
  display: block;
  margin-right: 50px;
  margin-top: -20px;
}
.step-number2 {
  font-size: 50px;
  color: #b8b4b4;
  margin-left: 780px;
  margin-top: -280px;
}
.step-card h2 {
  font-size: 30px;
  font-weight: bold;
  color: #003475;
  margin-top: -10px;
  margin-left: 680px;
}
.step-card p.text-2 {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  margin-left: 525px;
  max-width: 900px;
  margin-top: -20px;
  text-align: right;
}

/* ================= CARD 3 ================= */
.step-perancangan {
  width: 390px;
  margin: 40px auto;
  display: block;
  margin-left: 140px;
  margin-top: -30px;
}
.step-number3 {
  font-size: 50px;
  color: #b8b4b4;
  margin-left: -600px;
  margin-top: -320px;
}
.step-card h3 {
  font-size: 30px;
  font-weight: bold;
  margin-left: -240px;
  margin-top: -5px;
  color: #003475;
}
.step-card p.text-3 {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  margin-left: 685px;
  max-width: 900px;
  margin-top: -20px;
  text-align: left;
}

/* ================= CARD 4 ================= */
.step-proses {
  width: 280px;
  margin: 40px auto;
  display: block;
  margin-right: 100px;
  margin-top: 20px;
}
.step-number4 {
  font-size: 50px;
  color: #b8b4b4;
  margin-left: 780px;
  margin-top: -330px;
}
.step-card h4 {
  font-size: 30px;
  font-weight: bold;
  color: #003475;
  margin-top: -10px;
  margin-left: 450px;
}
.step-card p.text-4 {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  margin-left: 525px;
  max-width: 900px;
  margin-top: -40px;
  text-align: right;
}

/* ================= CARD 5 ================= */
.step-laporan {
  width: 500px;
  margin: 40px auto;
  display: block;
  margin-left: 50px;
  margin-top: 30px;
}
.step-number5 {
  font-size: 50px;
  color: #b8b4b4;
  margin-left: -600px;
  margin-top: -320px;
}
.step-card h5 {
  font-size: 30px;
  font-weight: bold;
  margin-left: -320px;
  margin-top: -5px;
  color: #003475;
}
.step-card p.text-5 {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  margin-left: 680px;
  max-width: 900px;
  margin-top: -50px;
  text-align: left;
}

/* ====== RESPONSIVE TABLET (≤768px) ====== */
@media (max-width: 768px) {
  .how-it-works {
    background: #ffffff;
    text-align: center;
  }

  .how-subtitle {
    color: #003475;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-left: -33rem;
    transform: translateY(180px);
  }

  .how-title {
    font-size: 33px;
    font-weight: 700;
    color: #222;
    margin-bottom: 60px;
    margin-left: 20px;
    transform: translateY(170px);
    text-align: left;
  }

  /* ================= CARD 1 ================= */
  .step-pendahuluan {
    width: 300px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 200px;
  }
  .step-number1 {
    font-size: 40px;
    color: #b8b4b4;
    margin-left: 85px;
    margin-top: -220px;
  }
  .step-card h1 {
    font-size: 25px;
    font-weight: bold;
    margin-left: 240px;
    margin-top: -5px;
    color: #003475;
  }
  .step-card p.text-1 {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-left: 410px;
    max-width: 300px;
    margin-top: -20px;
    text-align: left;
  }

  /* ================= CARD 2 ================= */
  .step-nego {
    width: 300px;
    margin: 40px auto;
    display: block;
    margin-left: 400px;
    margin-top: 40px;
  }
  .step-number2 {
    font-size: 40px;
    color: #b8b4b4;
    margin-left: -30px;
    margin-top: -220px;
  }
  .step-card h2 {
    font-size: 25px;
    font-weight: bold;
    color: #003475;
    margin-top: -10px;
    margin-left: -120px;
  }
  .step-card p.text-2 {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-left: 90px;
    max-width: 300px;
    margin-top: -20px;
    text-align: right;
  }

  /* ================= CARD 3 ================= */
  .step-perancangan {
    width: 280px;
    margin: 40px auto;
    display: block;
    margin-left: 60px;
    margin-top: 60px;
  }
  .step-number3 {
    font-size: 40px;
    color: #b8b4b4;
    margin-left: 85px;
    margin-top: -270px;
  }
  .step-card h3 {
    font-size: 25px;
    font-weight: bold;
    margin-left: 385px;
    margin-top: -5px;
    color: #003475;
  }
  .step-card p.text-3 {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-left: 410px;
    max-width: 300px;
    margin-top: -20px;
    text-align: left;
  }

  /* ================= CARD 4 ================= */
  .step-proses {
    width: 240px;
    margin: 40px auto;
    display: block;
    margin-left: 400px;
    margin-top: 40px;
  }
  .step-number4 {
    font-size: 40px;
    color: #b8b4b4;
    margin-left: -30px;
    margin-top: -280px;
  }
  .step-card h4 {
    font-size: 25px;
    font-weight: bold;
    color: #003475;
    margin-top: -10px;
    margin-left: -310px;
  }
  .step-card p.text-4 {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-left: 90px;
    max-width: 300px;
    margin-top: -30px;
    text-align: right;
  }

  /* ================= CARD 5 ================= */
  .step-laporan {
    width: 300px;
    margin: 40px auto;
    display: block;
    margin-left: 60px;
    margin-top: 60px;
  }
  .step-number5 {
    font-size: 40px;
    color: #b8b4b4;
    margin-left: 85px;
    margin-top: -250px;
  }
  .step-card h5 {
    font-size: 25px;
    font-weight: bold;
    margin-left: 325px;
    margin-top: -5px;
    color: #003475;
  }
  .step-card p.text-5 {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-left: 410px;
    max-width: 300px;
    margin-top: -40px;
    text-align: left;
  }
}

/* ====== RESPONSIVE MOBILE (≤320px) ====== */
@media (max-width: 320px) {
  .how-it-works {
    background: #ffffff;
    text-align: center;
  }

  .how-subtitle {
    color: #003475;
    font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-left: -4rem;
    transform: translateY(150px);
  }

  .how-title {
    font-size: 25px;
    font-weight: 700;
    color: #222;
    margin-bottom: 60px;
    margin-left: 30px;
    max-width: 400px;
    transform: translateY(150px);
    text-align: left;
  }

  /* ================= CARD 1 ================= */
  .step-pendahuluan {
    width: 250px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 200px;
  }
  .step-number1 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -190px;
    margin-top: -30px;
  }
  .step-card h1 {
    font-size: 17px;
    font-weight: bold;
    margin-left: -90px;
    margin-top: -5px;
    color: #003475;
  }
  .step-card p.text-1 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 50px;
    max-width: 600px;
    margin-top: -10px;
    text-align: left;
  }

  /* ================= CARD 2 ================= */
  .step-nego {
    width: 250px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 30px;
  }
  .step-number2 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: 190px;
    margin-top: -30px;
  }
  .step-card h2 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: 140px;
  }
  .step-card p.text-2 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 26px;
    max-width: 250px;
    margin-top: -15px;
    text-align: right;
  }

  /* ================= CARD 3 ================= */
  .step-perancangan {
    width: 230px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 30px;
  }
  .step-number3 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -200px;
    margin-top: -30px;
  }
  .step-card h3 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: -5px;
  }
  .step-card p.text-3 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 40px;
    max-width: 600px;
    margin-top: -15px;
    text-align: left;
  }

  /* ================= CARD 4 ================= */
  .step-proses {
    width: 200px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 50px;
  }
  .step-number4 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: 200px;
    margin-top: -30px;
  }
  .step-card h4 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: 10px;
  }
  .step-card p.text-4 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 26px;
    max-width: 250px;
    margin-top: -15px;
    text-align: right;
  }

  /* ================= CARD 5 ================= */
  .step-laporan {
    width: 200px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 50px;
  }
  .step-number5 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -200px;
    margin-top: -30px;
  }
  .step-card h5 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: -50px;
  }
  .step-card p.text-5 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 43px;
    max-width: 600px;
    margin-top: -25px;
    text-align: left;
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .how-it-works {
    background: #ffffff;
    text-align: center;
  }

  .how-subtitle {
    color: #003475;
    font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-left: -9rem;
    transform: translateY(150px);
  }

  .how-title {
    font-size: 25px;
    font-weight: 700;
    color: #222;
    margin-bottom: 60px;
    margin-left: 20px;
    max-width: 400px;
    transform: translateY(150px);
    text-align: left;
  }

  /* ================= CARD 1 ================= */
  .step-pendahuluan {
    width: 250px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 200px;
  }
  .step-number1 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -240px;
    margin-top: -30px;
  }
  .step-card h1 {
    font-size: 17px;
    font-weight: bold;
    margin-left: -145px;
    margin-top: -5px;
    color: #003475;
  }
  .step-card p.text-1 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 50px;
    max-width: 600px;
    margin-top: -10px;
    text-align: left;
  }

  /* ================= CARD 2 ================= */
  .step-nego {
    width: 250px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 30px;
  }
  .step-number2 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: 190px;
    margin-top: -30px;
  }
  .step-card h2 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: 140px;
  }
  .step-card p.text-2 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 56px;
    max-width: 250px;
    margin-top: -15px;
    text-align: right;
  }

  /* ================= CARD 3 ================= */
  .step-perancangan {
    width: 230px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 30px;
  }
  .step-number3 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -255px;
    margin-top: -30px;
  }
  .step-card h3 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: -60px;
  }
  .step-card p.text-3 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 40px;
    max-width: 600px;
    margin-top: -15px;
    text-align: left;
  }

  /* ================= CARD 4 ================= */
  .step-proses {
    width: 200px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 50px;
  }
  .step-number4 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: 200px;
    margin-top: -30px;
  }
  .step-card h4 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: 10px;
  }
  .step-card p.text-4 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 55px;
    max-width: 250px;
    margin-top: -15px;
    text-align: right;
  }

  /* ================= CARD 5 ================= */
  .step-laporan {
    width: 200px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 50px;
  }
  .step-number5 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -254px;
    margin-top: -30px;
  }
  .step-card h5 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: -105px;
  }
  .step-card p.text-5 {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-left: 43px;
    max-width: 600px;
    margin-top: -25px;
    text-align: left;
  }
}

/* ===== Responsive Mobile Ukuran L (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .how-it-works {
    background: #ffffff;
    text-align: center;
  }

  .how-subtitle {
    color: #003475;
    font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-left: -10rem;
    transform: translateY(150px);
  }

  .how-title {
    font-size: 25px;
    font-weight: 700;
    color: #222;
    margin-bottom: 60px;
    margin-left: 35px;
    max-width: 400px;
    transform: translateY(150px);
    text-align: left;
  }

  /* ================= CARD 1 ================= */
  .step-pendahuluan {
    width: 280px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 200px;
  }
  .step-number1 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -290px;
    margin-top: -30px;
  }
  .step-card h1 {
    font-size: 17px;
    font-weight: bold;
    margin-left: -195px;
    margin-top: -5px;
    color: #003475;
  }
  .step-card p.text-1 {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-left: 50px;
    max-width: 350px;
    margin-top: -10px;
    text-align: left;
  }

  /* ================= CARD 2 ================= */
  .step-nego {
    width: 280px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 30px;
  }
  .step-number2 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: 190px;
    margin-top: -30px;
  }
  .step-card h2 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: 140px;
  }
  .step-card p.text-2 {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-left: 30px;
    max-width: 300px;
    margin-top: -15px;
    text-align: right;
  }

  /* ================= CARD 3 ================= */
  .step-perancangan {
    width: 270px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 30px;
  }
  .step-number3 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -310px;
    margin-top: -30px;
  }
  .step-card h3 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: -110px;
  }
  .step-card p.text-3 {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-left: 40px;
    max-width: 400px;
    margin-top: -15px;
    text-align: left;
  }

  /* ================= CARD 4 ================= */
  .step-proses {
    width: 240px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 50px;
  }
  .step-number4 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: 250px;
    margin-top: -30px;
  }
  .step-card h4 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: 65px;
  }
  .step-card p.text-4 {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-left: 55px;
    max-width: 300px;
    margin-top: -15px;
    text-align: right;
  }

  /* ================= CARD 5 ================= */
  .step-laporan {
    width: 260px;
    margin: 40px auto;
    display: block;
    margin-left: 50px;
    margin-top: 50px;
  }
  .step-number5 {
    font-size: 35px;
    color: #b8b4b4;
    margin-left: -300px;
    margin-top: -30px;
  }
  .step-card h5 {
    font-size: 17px;
    font-weight: bold;
    color: #003475;
    margin-top: -7px;
    margin-left: -155px;
  }
  .step-card p.text-5 {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-left: 43px;
    max-width: 600px;
    margin-top: -25px;
    text-align: left;
  }
}

/* ===== PORTOFOLIO SECTION =====*/
.portofolio {
  background: #ffffff;
  text-align: center;
}

.portofolio-subtitle {
  color: #003475;
  font-size: 45px;
  font-weight: bold;
  margin-left: -90rem;
  transform: translateY(60px);
}

.portofolio-title {
  font-size: 45px;
  font-weight: 700;
  margin-left: -37rem;
  transform: translateY(23px);
  color: #222;
}

/* Slick wrapper */
.portofolio-slider {
  width: 95%;
  margin: 0 auto;
  transform: translateY(10px);
}

/* Card Portofolio 1 */
.portofolio-card1 {
  background: #003475;
  color: #ffffff;
  padding: 0px 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 500px;
  height: 400px;
  margin: 10px;
}

/* Card Portofolio 2 */
.portofolio-card2 {
  background: #003475;
  color: #ffffff;

  padding: 5px 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 300px;
  height: 400px;
  margin: 10px;
}

/* Card Portofolio 3 */
.portofolio-card3 {
  background: #003475;
  color: #ffffff;

  padding: 23px 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 300px;
  height: 400px;
  margin: 10px;
}

/* Card Portofolio 4 */
.portofolio-card4 {
  background: #003475;
  color: #ffffff;
  padding: 26px 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 300px;
  height: 400px;
  margin: 10px;
}

/* Card Portofolio 5 */
.portofolio-card5 {
  background: #003475;
  color: #ffffff;

  padding: 9px 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 300px;
  height: 400px;
  margin: 10px;
}

/* Card Portofolio 6 */
.portofolio-card6 {
  background: #003475;
  color: #ffffff;

  padding: 8px 90px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 300px;
  height: 400px;
  margin: 10px;
}

.portofolio-card1 img {
  max-width: 49%;
  object-fit: cover;
  border-radius: 3px;
  position: relative;
  top: -130px; /* geser ke atas sesuai kebutuhan */
  margin-left: 250px;
  margin-right: 0;
}

.portofolio-card2 img {
  max-width: 50%;
  object-fit: cover;
  border-radius: 3px;
  position: relative;
  top: -130px; /* geser ke atas berbeda */
  margin-left: 250px;
  margin-right: 0;
}

.portofolio-card3 img {
  max-width: 47%;
  object-fit: cover;
  border-radius: 3px;
  position: relative;
  top: -120px; /* geser ke atas berbeda */
  margin-left: 260px;
  margin-right: 0;
}

.portofolio-card4 img {
  max-width: 47%;
  object-fit: cover;
  border-radius: 3px;
  position: relative;
  top: -115px; /* geser ke atas berbeda */
  margin-left: 260px;
  margin-right: 0;
}

.portofolio-card5 img {
  max-width: 48%;
  object-fit: cover;
  border-radius: 3px;
  position: relative;
  top: -130px; /* geser ke atas berbeda */
  margin-left: 255px;
  margin-right: 0;
}

.portofolio-card6 img {
  max-width: 47%;
  object-fit: cover;
  border-radius: 3px;
  position: relative;
  top: -130px; /* geser ke atas berbeda */
  margin-left: 258px;
  margin-right: 0;
}

/* Tahun */
.portofolio-year1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: -75px;
  transform: translateY(25px);
}
.portofolio-year2,
.portofolio-year3,
.portofolio-year4,
.portofolio-year5,
.portofolio-year6 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: -75px;
  transform: translateY(10px);
}

/* Nama */
.portofolio-name1,
.portofolio-name2,
.portofolio-name3,
.portofolio-name4,
.portofolio-name5,
.portofolio-name6 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: -30px;
  position: relative;
  margin-left: -75px;
}

.portofolio-name1::after,
.portofolio-name2::after,
.portofolio-name3::after,
.portofolio-name4::after,
.portofolio-name5::after,
.portofolio-name6::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0; /* mulai dari kiri teks */
  width: 55px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* Deskripsi */
.portofolio-card1 p,
.portofolio-card2 p,
.portofolio-card3 p,
.portofolio-card4 p,
.portofolio-card5 p,
.portofolio-card6 p {
  font-size: 16px;
  line-height: 1.5;
  margin-left: -80px;
  transform: translateY(30px);
}

/* ===== TABLET 768px ===== */
@media (max-width: 768px) {
  .portofolio {
    margin-top: 50px;
    padding: 0 20px; /* biar ada jarak kiri kanan */
  }
  .portofolio-subtitle {
    color: #003475;
    font-size: 35px;
    font-weight: bold;
    margin-left: -490px;
    transform: translateY(60px);
  }

  .portofolio-title {
    font-size: 32px;
    font-weight: 700;
    margin-left: 30px;
    text-align: left;
    color: #222;
    transform: translateY(20px);
  }

  /* Card umum */
  .portofolio-card1 {
    display: flex;
    justify-content: space-between; /* teks kiri, gambar kanan */
    align-items: flex-start;
    background: #003475;
    color: white;
    border-radius: 12px; /* sudut lebih halus */
    padding: 40px 90px; /* isi lebih lega */
    margin-bottom: 30px; /* jarak antar card */
    width: 100%; /* penuh container */
    min-height: 280px; /* bikin lebih tinggi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* biar lebih menonjol */
  }
  .portofolio-card2 {
    display: flex;
    justify-content: space-between; /* teks kiri, gambar kanan */
    align-items: flex-start;
    background: #003475;
    color: white;
    border-radius: 12px; /* sudut lebih halus */
    padding: 48px 90px; /* isi lebih lega */
    margin-bottom: 30px; /* jarak antar card */
    width: 100%; /* penuh container */
    min-height: 280px; /* bikin lebih tinggi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* biar lebih menonjol */
  }
  .portofolio-card3 {
    display: flex;
    justify-content: space-between; /* teks kiri, gambar kanan */
    align-items: flex-start;
    background: #003475;
    color: white;
    border-radius: 12px; /* sudut lebih halus */
    padding: 58px 90px; /* isi lebih lega */
    margin-bottom: 30px; /* jarak antar card */
    width: 100%; /* penuh container */
    min-height: 280px; /* bikin lebih tinggi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* biar lebih menonjol */
  }
  .portofolio-card4 {
    display: flex;
    justify-content: space-between; /* teks kiri, gambar kanan */
    align-items: flex-start;
    background: #003475;
    color: white;
    border-radius: 12px; /* sudut lebih halus */
    padding: 75px 90px; /* isi lebih lega */
    margin-bottom: 30px; /* jarak antar card */
    width: 100%; /* penuh container */
    min-height: 280px; /* bikin lebih tinggi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* biar lebih menonjol */
  }
  .portofolio-card5 {
    display: flex;
    justify-content: space-between; /* teks kiri, gambar kanan */
    align-items: flex-start;
    background: #003475;
    color: white;
    border-radius: 12px; /* sudut lebih halus */
    padding: 50px 90px; /* isi lebih lega */
    margin-bottom: 30px; /* jarak antar card */
    width: 100%; /* penuh container */
    min-height: 280px; /* bikin lebih tinggi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* biar lebih menonjol */
  }
  .portofolio-card6 {
    display: flex;
    justify-content: space-between; /* teks kiri, gambar kanan */
    align-items: flex-start;
    background: #003475;
    color: white;
    border-radius: 12px; /* sudut lebih halus */
    padding: 48px 90px; /* isi lebih lega */
    margin-bottom: 30px; /* jarak antar card */
    width: 100%; /* penuh container */
    min-height: 280px; /* bikin lebih tinggi */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* biar lebih menonjol */
  }

  /* teks paragraf */
  .portofolio-card1 p {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-left: -60px; /* reset dulu */
    padding-right: -250px; /* kasih jarak ke gambar */
    transform: translateY(150px);
  }
  .portofolio-card2 p {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-left: -60px; /* reset dulu */
    padding-right: -250px; /* kasih jarak ke gambar */
    transform: translateY(130px);
  }
  .portofolio-card3 p {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-left: -60px; /* reset dulu */
    padding-right: -250px; /* kasih jarak ke gambar */
    transform: translateY(140px);
  }
  .portofolio-card4 p {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-left: -60px; /* reset dulu */
    padding-right: -250px; /* kasih jarak ke gambar */
    transform: translateY(120px);
  }
  .portofolio-card5 p {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-left: -60px; /* reset dulu */
    padding-right: -250px; /* kasih jarak ke gambar */
    transform: translateY(120px);
  }
  .portofolio-card6 p {
    flex: 1;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    margin-left: -60px; /* reset dulu */
    padding-right: -250px; /* kasih jarak ke gambar */
    transform: translateY(120px);
  }

  /* gambar */
  .portofolio-card1 img {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
    transform: translateY(-150px);
    margin-left: -10px;
  }
  .portofolio-card2 img {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
    transform: translateY(-140px);
    margin-left: -10px;
  }
  .portofolio-card3 img {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
    transform: translateY(-135px);
    margin-left: -10px;
  }
  .portofolio-card4 img {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
    transform: translateY(-125px);
    margin-left: -10px;
  }
  .portofolio-card5 img {
    max-width: 180px;
    height: auto;
    flex-shrink: 0;
    transform: translateY(-135px);
    margin-left: -10px;
  }
  .portofolio-card6 img {
    max-width: 178px;
    height: auto;
    flex-shrink: 0;
    transform: translateY(-135px);
    margin-left: -10px;
  }

  /* Tahun */
  .portofolio-year1 {
    font-size: 20px;
    opacity: 0.8;
    margin-left: -60px;
    transform: translateY(120px);
  }
  .portofolio-year2 {
    font-size: 20px;
    opacity: 0.8;
    margin-left: -60px;
    transform: translateY(105px);
  }
  .portofolio-year3 {
    font-size: 20px;
    opacity: 0.8;
    margin-left: -60px;
    transform: translateY(95px);
  }
  .portofolio-year4 {
    font-size: 20px;
    opacity: 0.8;
    margin-left: -60px;
    transform: translateY(78px);
  }
  .portofolio-year5 {
    font-size: 20px;
    opacity: 0.8;
    margin-left: -60px;
    transform: translateY(104px);
  }
  .portofolio-year6 {
    font-size: 20px;
    opacity: 0.8;
    margin-left: -60px;
    transform: translateY(104px);
  }

  /* Nama */
  .portofolio-name1 {
    font-size: 18px;
    font-weight: bold;
    margin-left: -60px;
    transform: translateY(100px);
  }
  .portofolio-name2 {
    font-size: 17px;
    font-weight: bold;
    margin-left: -60px;
    transform: translateY(100px);
  }
  .portofolio-name3 {
    font-size: 18px;
    font-weight: bold;
    margin-left: -60px;
    transform: translateY(90px);
  }
  .portofolio-name4 {
    font-size: 18px;
    font-weight: bold;
    margin-left: -60px;
    transform: translateY(75px);
  }
  .portofolio-name5 {
    font-size: 18px;
    font-weight: bold;
    margin-left: -60px;
    transform: translateY(95px);
  }
  .portofolio-name6 {
    font-size: 18px;
    font-weight: bold;
    margin-left: -60px;
    transform: translateY(100px);
  }
}

/* ===== MOBILE (≤320px) ===== */
@media (max-width: 320px) {
  .portofolio {
    margin: 0;
    padding: 0 15px; /* biar ada jarak kiri kanan dikit */
  }

  /* Subtitle */
  .portofolio-subtitle {
    text-align: center;
    font-size: 20px;
    margin-left: -140px;
    margin-top: 50px; /* turun sedikit natural */
    transform: none; /* hapus translate */
  }

  /* Title */
  .portofolio-title {
    text-align: left;
    font-size: 20px;
    margin-left: 30px;
    margin-top: -8px; /* kasih jarak dikit */
    transform: none; /* hapus translate */
  }

  /* Container untuk slider */
  .portofolio-wrapper {
    display: flex;
    overflow-x: auto; /* bisa geser horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0; /* jarak biar card ga terlalu mepet */
    margin: 0;
    gap: 12px; /* jarak antar card */
  }

  /* ====== CARD 1 ====== */
  .portofolio-card1 {
    flex: 0 0 85%; /* biar muat di layar 320px */
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card1 img {
    max-width: 90%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(10px);
  }

  .portofolio-year1 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name1 {
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(140px);
  }

  .portofolio-card1 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
  }

  /* ====== CARD 2 ====== */
  .portofolio-card2 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    max-width: 70%;
    text-align: left;
  }

  .portofolio-card2 img {
    max-width: 89%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(5px);
  }

  .portofolio-year2 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name2 {
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(138px);
  }

  .portofolio-card2 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    transform: translateY(135px);
  }

  /* ====== CARD 3 ====== */
  .portofolio-card3 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    width: 190%;
    text-align: left;
  }

  .portofolio-card3 img {
    max-width: 86%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-3px);
  }

  .portofolio-year3 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name3 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(135px);
  }

  .portofolio-card3 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    margin-top: 29px;
  }

  /* ====== CARD 4 ====== */
  .portofolio-card4 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card4 img {
    max-width: 90%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-10px);
  }

  .portofolio-year4 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name4 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(140px);
  }

  .portofolio-card4 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    margin-top: 30px;
    transform: translateY(135px);
  }

  /* ====== CARD 5 ====== */
  .portofolio-card5 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card5 img {
    max-width: 90%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(5px);
  }

  .portofolio-year5 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(145px);
  }

  .portofolio-name5 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(135px);
  }

  .portofolio-card5 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    transform: translateY(135px);
  }

  /* ====== CARD 6 ====== */
  .portofolio-card6 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card6 img {
    max-width: 88%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(5px);
  }

  .portofolio-year6 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(145px);
  }

  .portofolio-name6 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(130px);
  }

  .portofolio-card6 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    transform: translateY(130px);
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .portofolio {
    margin: 0;
    padding: 0 15px; /* biar ada jarak kiri kanan dikit */
  }

  /* Subtitle */
  .portofolio-subtitle {
    text-align: center;
    font-size: 20px;
    margin-left: -190px;
    margin-top: 50px; /* turun sedikit natural */
    transform: none; /* hapus translate */
  }

  /* Title */
  .portofolio-title {
    text-align: left;
    font-size: 20px;
    margin-left: 30px;
    margin-top: -8px; /* kasih jarak dikit */
    transform: none; /* hapus translate */
  }

  /* Container untuk slider */
  .portofolio-wrapper {
    display: flex;
    overflow-x: auto; /* bisa geser horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0; /* jarak biar card ga terlalu mepet */
    margin: 0;
    gap: 12px; /* jarak antar card */
  }

  /* ====== CARD 1 ====== */
  .portofolio-card1 {
    flex: 0 0 85%; /* biar muat di layar 320px */
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card1 img {
    max-width: 80%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(10px);
  }

  .portofolio-year1 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name1 {
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(140px);
  }

  .portofolio-card1 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
  }

  /* ====== CARD 2 ====== */
  .portofolio-card2 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    max-width: 70%;
    text-align: left;
  }

  .portofolio-card2 img {
    max-width: 79%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(5px);
  }

  .portofolio-year2 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name2 {
    font-size: 12px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(138px);
  }

  .portofolio-card2 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    transform: translateY(135px);
  }

  /* ====== CARD 3 ====== */
  .portofolio-card3 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    width: 190%;
    text-align: left;
  }

  .portofolio-card3 img {
    max-width: 76%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-3px);
  }

  .portofolio-year3 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name3 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(135px);
  }

  .portofolio-card3 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    margin-top: 29px;
  }

  /* ====== CARD 4 ====== */
  .portofolio-card4 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card4 img {
    max-width: 80%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-10px);
  }

  .portofolio-year4 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name4 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(140px);
  }

  .portofolio-card4 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    margin-top: 30px;
    transform: translateY(135px);
  }

  /* ====== CARD 5 ====== */
  .portofolio-card5 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card5 img {
    max-width: 80%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(5px);
  }

  .portofolio-year5 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(145px);
  }

  .portofolio-name5 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(135px);
  }

  .portofolio-card5 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    transform: translateY(135px);
  }

  /* ====== CARD 6 ====== */
  .portofolio-card6 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card6 img {
    max-width: 78%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(5px);
  }

  .portofolio-year6 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(145px);
  }

  .portofolio-name6 {
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(130px);
  }

  .portofolio-card6 p {
    font-size: 11px;
    line-height: 1.4;
    margin: 5px 0;
    transform: translateY(130px);
  }
}

/* ===== Responsive Mobile Ukuran L (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .portofolio {
    margin: 0;
    padding: 0 15px; /* biar ada jarak kiri kanan dikit */
  }

  /* Subtitle */
  .portofolio-subtitle {
    text-align: center;
    font-size: 20px;
    margin-left: -240px;
    margin-top: 50px; /* turun sedikit natural */
    transform: none; /* hapus translate */
  }

  /* Title */
  .portofolio-title {
    text-align: left;
    font-size: 20px;
    margin-left: 25px;
    margin-top: -8px; /* kasih jarak dikit */
    transform: none; /* hapus translate */
  }

  /* Container untuk slider */
  .portofolio-wrapper {
    display: flex;
    overflow-x: auto; /* bisa geser horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0; /* jarak biar card ga terlalu mepet */
    margin: 0;
    gap: 12px; /* jarak antar card */
  }

  /* ====== CARD 1 ====== */
  .portofolio-card1 {
    flex: 0 0 85%; /* biar muat di layar 320px */
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 5px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card1 img {
    max-width: 70%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-50px);
  }

  .portofolio-year1 {
    font-size: 18px;
    margin: 5px 0;
    transform: translateY(160px);
  }

  .portofolio-name1 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(150px);
  }

  .portofolio-card1 p {
    font-size: 15px;
    line-height: 1.4;
    margin: 19px 0;
  }

  /* ====== CARD 2 ====== */
  .portofolio-card2 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    max-width: 70%;
    text-align: left;
  }

  .portofolio-card2 img {
    max-width: 69%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-55px);
  }

  .portofolio-year2 {
    font-size: 18px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name2 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(138px);
  }

  .portofolio-card2 p {
    font-size: 15px;
    line-height: 1.4;
    margin: 19px 0;
    transform: translateY(135px);
  }

  /* ====== CARD 3 ====== */
  .portofolio-card3 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    width: 190%;
    text-align: left;
  }

  .portofolio-card3 img {
    max-width: 66%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-70px);
  }

  .portofolio-year3 {
    font-size: 18px;
    margin: 5px 0;
    transform: translateY(165px);
  }

  .portofolio-name3 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(155px);
  }

  .portofolio-card3 p {
    font-size: 15px;
    line-height: 1.4;
    margin: 37px 0;
    margin-top: 29px;
  }

  /* ====== CARD 4 ====== */
  .portofolio-card4 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card4 img {
    max-width: 70%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-75px);
  }

  .portofolio-year4 {
    font-size: 18px;
    margin: 5px 0;
    transform: translateY(150px);
  }

  .portofolio-name4 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(140px);
  }

  .portofolio-card4 p {
    font-size: 15px;
    line-height: 1.4;
    margin: 35px 0;
    margin-top: 30px;
    transform: translateY(135px);
  }

  /* ====== CARD 5 ====== */
  .portofolio-card5 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card5 img {
    max-width: 70%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-60px);
  }

  .portofolio-year5 {
    font-size: 18px;
    margin: 5px 0;
    transform: translateY(145px);
  }

  .portofolio-name5 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(135px);
  }

  .portofolio-card5 p {
    font-size: 15px;
    line-height: 1.4;
    margin: 21px 0;
    transform: translateY(135px);
  }

  /* ====== CARD 6 ====== */
  .portofolio-card6 {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #003366;
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
  }

  .portofolio-card6 img {
    max-width: 68%;
    margin: 0 auto 10px auto;
    display: block;
    transform: translateY(-60px);
  }

  .portofolio-year6 {
    font-size: 18px;
    margin: 5px 0;
    transform: translateY(145px);
  }

  .portofolio-name6 {
    font-size: 17px;
    font-weight: 700;
    margin: 12px 0;
    transform: translateY(130px);
  }

  .portofolio-card6 p {
    font-size: 15px;
    line-height: 1.4;
    margin: 20px 0;
    transform: translateY(130px);
  }
}

/* ===== CTA SECTION ===== */
.cta {
  background: #ffffff;
  padding: 80px 0; /* buang padding samping, biar full lebar */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0; /* hapus space kosong di bawah */
}

.cta-box {
  background: #003475;
  color: #ffffff;
  text-align: center;
  padding: 80px 50px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(4, 47, 94, 2); /* biru shadow */
  max-width: 90%;
  width: 95%;
  margin: 0 auto;
  transform: none;
}

.cta-box h2 {
  font-size: 50px;
  margin-bottom: 15px;
  font-weight: 700;
  transform: none;
}

.cta-box h1 .highlight {
  color: #f66263;
  font-weight: 700;
}

.cta-box h2 .highlight-red {
  color: #f66263;
  font-weight: 700;
}

.cta-box p {
  font-size: 35px;
  margin-bottom: 25px;
  opacity: 0.9;
  transform: none;
}

.cta-btn {
  display: inline-block;
  background: #f66263;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 25px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  transform: none;
}

.cta-btn:hover {
  background: #e72727;
}

/* ===== RESPONSIVE CTA SECTION ===== */

/* Tablet: max-width 768px */
@media screen and (max-width: 768px) {
  .cta {
    transform: none; /* hapus translate biar normal */
    margin-bottom: 0; /* hilangin space kosong bawah */
    padding: 50px 20px 40px; /* kasih padding bawah secukupnya */
  }

  .cta-box {
    padding: 50px 30px;
    margin: 0 auto; /* biar center */
    transform: none; /* hapus geser naik, biar lebih ke bawah */
    border-radius: 14px;
  }

  .cta-box h2 {
    font-size: 30px;
    margin-bottom: 15px; /* jarak antar elemen lebih natural */
    transform: none;
  }

  .cta-box p {
    font-size: 17px;
    margin-bottom: 20px;
    transform: none;
  }

  .cta-btn {
    font-size: 15px;
    padding: 10px 18px;
    transform: none;
  }
}

/* Mobile: max-width 320px */
@media screen and (max-width: 320px) {
  .cta {
    margin-top: 80px;
  }

  .cta-box {
    padding: 5px 60px;
    transform: translateY(-60px);
    border-radius: 8px;
  }

  .cta-box h2 {
    font-size: 14px;
    transform: translateY(7px);
  }

  .cta-box p {
    font-size: 8px;
    transform: translateY(-4px);
  }

  .cta-btn {
    font-size: 9px;
    padding: 6px 12px;
    transform: translateY(-20px);
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .cta {
    margin-top: 80px;
  }

  .cta-box {
    padding: 5px 60px;
    transform: translateY(-60px);
    border-radius: 8px;
  }

  .cta-box h2 {
    font-size: 14px;
    transform: translateY(7px);
  }

  .cta-box p {
    font-size: 8px;
    transform: translateY(-4px);
  }

  .cta-btn {
    font-size: 9px;
    padding: 6px 12px;
    transform: translateY(-20px);
  }
}

/* ===== Responsive Mobile Ukuran  (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .cta {
    margin-top: 80px;
  }

  .cta-box {
    padding: 5px 60px;
    transform: translateY(-60px);
    border-radius: 8px;
  }

  .cta-box h2 {
    font-size: 18px;
    transform: translateY(7px);
  }

  .cta-box p {
    font-size: 13px;
    transform: translateY(-4px);
  }

  .cta-btn {
    font-size: 12px;
    padding: 6px 12px;
    transform: translateY(-20px);
  }
}

/* ===== Contact Section ===== */
.contact-section {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 40px;
}

.contact-logo img {
  width: 350px;
  margin-left: 450px;
  margin-top: 30px;
}

.contact-details h3 {
  color: #003475;
  margin-bottom: 10px;
  font-size: 50px;
  margin-top: -20px;
  margin-left: -100px;
}

.contact-details p {
  color: #000;
  margin-bottom: 10px;
  font-size: 25px;
  margin-top: 90px;
  margin-left: 20px;
}

.contact-item img {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 15px;
  margin-left: 50px;
  transform: translateY(-40px);
}

.contact-item h4 {
  color: #000;
  margin-bottom: 10px;
  font-size: 25px;
  margin-top: 20px;
  font-weight: bold;
  margin-left: 130px;
}

.contact-item p {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  margin-top: -80px;
  margin-left: 130px;
}

.contact-item-2 img {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 15px;
  margin-left: 50px;
  transform: translateY(-45px);
}

.contact-item-2 h5 {
  color: #000;
  margin-bottom: 10px;
  font-size: 25px;
  margin-top: 60px;
  font-weight: bold;
  margin-left: 130px;
}

.contact-item-2 p {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  margin-top: -85px;
  margin-left: 130px;
}

.contact-item-3 img {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 15px;
  margin-left: 50px;
  transform: translateY(-45px);
}

.contact-item-3 h6 {
  color: #000;
  margin-bottom: 10px;
  font-size: 25px;
  margin-top: 60px;
  font-weight: bold;
  margin-left: 130px;
}

.contact-item-3 p {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  margin-top: -85px;
  margin-left: 130px;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 80px;
  margin-left: 25px;
}

.social-icons a img {
  width: 60px;
  height: 60px;
  margin-left: 30px;
}

.contact-item a,
.contact-item-2 a,
.contact-item-3 a {
  text-decoration: none; /* hilangkan garis bawah */
  color: #000; /* pastikan warnanya tetap hitam */
}

@media screen and (max-width: 768px) {
  .contact-section {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 40px;
  }

  .contact-logo img {
    width: 290px;
    margin-left: 50px;
    transform: translateY(-70px);
  }

  .contact-details h3 {
    color: #003475;
    margin-bottom: 10px;
    font-size: 30px;
    margin-top: -20px;
    margin-left: -160px;
  }

  .contact-details p {
    color: #000;
    margin-bottom: 10px;
    font-size: 17px;
    margin-top: 15px;
    margin-left: -90px;
  }

  .contact-item img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    margin-left: -20px;
    transform: translateY(-40px);
  }

  .contact-item h4 {
    color: #000;
    margin-bottom: 10px;
    font-size: 19px;
    margin-top: 20px;
    font-weight: bold;
    margin-left: 70px;
  }

  .contact-item p {
    color: #000;
    margin-bottom: 10px;
    font-size: 17px;
    margin-top: -80px;
    margin-left: 70px;
  }

  .contact-item-2 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    margin-left: -20px;
    transform: translateY(-45px);
  }

  .contact-item-2 h5 {
    color: #000;
    margin-bottom: 10px;
    font-size: 19px;
    margin-top: 60px;
    font-weight: bold;
    margin-left: 70px;
  }

  .contact-item-2 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 17px;
    margin-top: -85px;
    margin-left: 70px;
  }

  .contact-item-3 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    margin-left: -20px;
    transform: translateY(-45px);
  }

  .contact-item-3 h6 {
    color: #000;
    margin-bottom: 10px;
    font-size: 19px;
    margin-top: 60px;
    font-weight: bold;
    margin-left: 70px;
  }

  .contact-item-3 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 17px;
    margin-top: -85px;
    margin-left: 70px;
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 80px;
    margin-left: -50px;
  }

  .social-icons a img {
    width: 50px;
    height: 50px;
    margin-left: 30px;
  }

  .contact-item a,
  .contact-item-2 a,
  .contact-item-3 a {
    text-decoration: none; /* hilangkan garis bawah */
    color: #000; /* pastikan warnanya tetap hitam */
  }
}

@media screen and (max-width: 320px) {
  .contact-section {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 40px;
  }

  .contact-logo img {
    width: 190px;
    margin-left: 20px;
    transform: translateY(-180px);
  }

  .contact-details h3 {
    color: #003475;
    margin-bottom: 10px;
    font-size: 20px;
    margin-top: -90px;
    margin-left: -230px;
  }

  .contact-details p {
    color: #000;
    margin-bottom: 10px;
    font-size: 12px;
    margin-top: 200px;
    margin-left: -280px;
  }

  .contact-item img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    width: 20px;
    height: 20px;
    margin-left: -280px;
    transform: translateY(-35px);
  }

  .contact-item h4 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .contact-item-2 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    width: 20px;
    height: 20px;
    gap: 15px;
    margin-left: -280px;
    transform: translateY(-30px);
  }

  .contact-item-2 h5 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item-2 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .contact-item-3 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    width: 20px;
    height: 20px;
    margin-left: -280px;
    transform: translateY(-30px);
  }

  .contact-item-3 h6 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item-3 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-left: -310px;
  }

  .social-icons a img {
    width: 20px;
    height: 20px;
  }

  .contact-item a,
  .contact-item-2 a,
  .contact-item-3 a {
    text-decoration: none; /* hilangkan garis bawah */
    color: #000; /* pastikan warnanya tetap hitam */
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .contact-section {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 40px;
  }

  .contact-logo img {
    width: 190px;
    margin-left: 50px;
    transform: translateY(-180px);
  }

  .contact-details h3 {
    color: #003475;
    margin-bottom: 10px;
    font-size: 20px;
    margin-top: -90px;
    margin-left: -230px;
  }

  .contact-details p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: 200px;
    margin-left: -300px;
  }

  .contact-item img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    width: 20px;
    height: 20px;
    margin-left: -280px;
    transform: translateY(-35px);
  }

  .contact-item h4 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .contact-item-2 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    width: 20px;
    height: 20px;
    gap: 15px;
    margin-left: -280px;
    transform: translateY(-30px);
  }

  .contact-item-2 h5 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item-2 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .contact-item-3 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    width: 20px;
    height: 20px;
    margin-left: -280px;
    transform: translateY(-30px);
  }

  .contact-item-3 h6 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item-3 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-left: -310px;
  }

  .social-icons a img {
    width: 20px;
    height: 20px;
  }

  .contact-item a,
  .contact-item-2 a,
  .contact-item-3 a {
    text-decoration: none; /* hilangkan garis bawah */
    color: #000; /* pastikan warnanya tetap hitam */
  }
}

/* ===== Responsive Mobile Ukuran L (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .contact-section {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 40px;
  }

  .contact-logo img {
    width: 190px;
    margin-left: 90px;
    transform: translateY(-180px);
  }

  .contact-details h3 {
    color: #003475;
    margin-bottom: 10px;
    font-size: 20px;
    margin-top: -90px;
    margin-left: -230px;
  }

  .contact-details p {
    color: #000;
    margin-bottom: 10px;
    font-size: 15px;
    margin-top: 200px;
    margin-left: -350px;
  }

  .contact-item img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    width: 20px;
    height: 20px;
    margin-left: -280px;
    transform: translateY(-35px);
  }

  .contact-item h4 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .contact-item-2 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    width: 20px;
    height: 20px;
    gap: 15px;
    margin-left: -280px;
    transform: translateY(-30px);
  }

  .contact-item-2 h5 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item-2 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .contact-item-3 img {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
    width: 20px;
    height: 20px;
    margin-left: -280px;
    transform: translateY(-30px);
  }

  .contact-item-3 h6 {
    color: #000;
    margin-bottom: 10px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    margin-left: -240px;
  }

  .contact-item-3 p {
    color: #000;
    margin-bottom: 10px;
    font-size: 13px;
    margin-top: -55px;
    margin-left: -240px;
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-left: -310px;
  }

  .social-icons a img {
    width: 20px;
    height: 20px;
  }

  .contact-item a,
  .contact-item-2 a,
  .contact-item-3 a {
    text-decoration: none; /* hilangkan garis bawah */
    color: #000; /* pastikan warnanya tetap hitam */
  }
}

/* ===== ABOUT US SECTION ===== */
.about {
  background: #ffffff;
  transform: translateY(180px);
}

.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1100px;
  margin: auto;
  flex-wrap: wrap;
}

/* Gambar */
.about-image {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.about-image img {
  width: 220%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  margin-left: -400px;
}

/* Text */
.about-text {
  flex: 1.2;
  min-width: 300px;
  margin-left: 150px;
}

.about-text h2 {
  color: #003475;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 90px;
  margin-left: -62rem;
}

.about-text p {
  font-size: 25px;
  line-height: 1.5;
  color: #003475;
  margin-bottom: 4px;
  margin-left: 20px;

  transform: translateY(-100px);
}

.about-text .highlight-red {
  color: #ff5c5c;
  font-weight: 600;
}

/* Tombol */
.about-button {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.btn {
  padding: 12px 20px;
  border-radius: 2px;
  font-size: 25px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: transparent;
  border: 2px solid #f66263;
  color: #f66263;
  font-size: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-100px);
}

.btn-primary:hover {
  background: #c52828;
  color: #fff;
}

.btn-secondary {
  background-color: #f66263;
  color: #fff;
  border: none;
  font-size: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-100px);
}

.btn-secondary:hover {
  background-color: #c52828;
}

/* ===== RESPONSIVE TABLET (≤768px) ===== */
@media (max-width: 768px) {
  .about {
    transform: none;
    margin: 0;
    padding: 40px 20px 0;
  }

  .about-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .about-image img {
    max-width: 67%;
    margin: 20px auto 0;
    margin-top: 25px;
    transform: none;
    margin-left: -100px;
  }

  .about-text h2 {
    font-size: 28px;
    margin: 0 0 15px 0;
    transform: none;
    margin-top: -340px;
    margin-left: -730px;
  }

  .about-text p {
    font-size: 16px;
    text-align: left;
    margin: 0 auto 10px auto;
    max-width: 90%;
    line-height: 1.2;
    margin-left: 220px;
    transform: translateY(-40px);
  }

  .about-button {
    justify-content: center;
    margin: 0 auto;
    transform: translate(50px, 60px); /* geser X=30px, Y=40px ke bawah */
  }

  .btn {
    font-size: 14px;
    padding: 9px 15px;
  }
}

/* ===== RESPONSIVE MOBILE (≤320px) ===== */
@media (max-width: 320px) {
  .about {
    margin: 0;
    padding: 40px 15px 0; /* rapat kanan kiri */
  }

  .about-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    width: 100%;
  }

  .about-image img {
    max-width: 70%; /* biar lebih besar tapi masih responsif */
    margin: 0 auto 15px auto; /* center */
    display: block;
  }

  .about-text h2 {
    font-size: 18px;
    margin: 10px 0; /* hapus margin negatif */
    text-align: center;
  }

  .about-text p {
    font-size: 12px;
    text-align: center;
    margin: 0 auto 15px auto;
    max-width: 90%;
    line-height: 1.4;
  }

  .about-button {
    display: flex;
    justify-content: center;
    margin: 10px auto 0 auto;
    transform: none; /* hapus geseran */
  }

  .btn {
    font-size: 14px;
    padding: 4px 8px;
  }
}
/* ===== RESPONSIVE MOBILE (≤320px) ===== */
@media (max-width: 320px) {
  .about {
    transform: none;
    margin: 0;
    padding: 40px 20px 0;
    max-width: 100%;
    overflow-x: clip; /* potong space kanan */
  }

  .about-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 100%;
    overflow-x: clip; /* potong space kanan */
  }

  .about-image img {
    max-width: 50%;
    margin: 20px auto 0;
    margin-top: -16px;
    transform: none;
    margin-left: 15px;
  }

  .about-text h2 {
    font-size: 18px;
    margin: 0 0 15px 0;
    transform: none;
    margin-top: -175px;
    margin-left: -490px;
  }

  .about-text p {
    font-size: 10px;
    text-align: left;
    margin: 0 auto 10px auto;
    max-width: 90%;
    line-height: 1.2;
    margin-left: -145px;
    transform: translateY(150px);
  }

  .about-button {
    justify-content: center;
    margin: 0 auto;
    transform: translate(-200px, 260px); /* geser X=30px, Y=40px ke bawah */
  }

  .btn {
    font-size: 14px;
    padding: 2px 4px;
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .about {
    transform: none;
    margin: 0;
    padding: 40px 20px 0;
    max-width: 100%;
    overflow-x: clip; /* potong space kanan */
  }

  .about-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 100%;
    overflow-x: clip; /* potong space kanan */
  }

  .about-image img {
    max-width: 55%;
    margin: 20px auto 0;
    margin-top: -16px;
    transform: none;
    margin-left: 15px;
  }

  .about-text h2 {
    font-size: 18px;
    margin: 0 0 15px 0;
    transform: none;
    margin-top: -193px;
    margin-left: -490px;
  }

  .about-text p {
    font-size: 11px;
    text-align: left;
    margin: 0 auto 10px auto;
    max-width: 90%;
    line-height: 1.2;
    margin-left: -125px;
    transform: translateY(160px);
  }

  .about-button {
    justify-content: center;
    margin: 0 auto;
    transform: translate(-180px, 260px); /* geser X=30px, Y=40px ke bawah */
  }

  .btn {
    font-size: 14px;
    padding: 2px 4px;
  }
}

/* ===== Responsive Mobile Ukuran L (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .about {
    transform: none;
    margin: 0;
    padding: 40px 20px 0;
    max-width: 100%;
    overflow-x: clip; /* potong space kanan */
  }

  .about-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 100%;
    overflow-x: clip; /* potong space kanan */
  }

  .about-image img {
    max-width: 80%;
    margin: 20px auto 0;
    margin-top: -16px;
    transform: none;
    margin-left: 15px;
  }

  .about-text h2 {
    font-size: 20px;
    margin: 0 0 15px 0;
    transform: none;
    margin-top: -285px;
    margin-left: -490px;
  }

  .about-text p {
    font-size: 14px;
    text-align: left;
    margin: 0 auto 10px auto;
    max-width: 90%;
    line-height: 1.2;
    margin-left: -125px;
    transform: translateY(250px);
  }

  .about-button {
    justify-content: center;
    margin: 0 auto;
    transform: translate(-180px, 350px); /* geser X=30px, Y=40px ke bawah */
  }

  .btn {
    font-size: 14px;
    padding: 2px 4px;
  }
}

/* ===== TEAM SECTION ===== */
.team-section {
  background: #ffffff;
  text-align: center;
  margin: 0; /* hapus margin bawaan */
  padding: 60px 20px 0; /* buang padding bawah */
  transform: translateY(200px); /* biar gak ngangkat terlalu tinggi */
}

.team-title {
  font-size: 30px;
  font-weight: 700;
  color: #003475;
  margin: 0 0 10px 0; /* rapetin spacing */
  transform: none;
}

.team-subtitle {
  color: #000000;
  font-size: 25px;
  margin: 0 0 30px 0; /* rapetin bawah subtitle */
  transform: none;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 0; /* hapus space bawah grid */
}

.team-card {
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: none;
}

.team-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 5px;
}

.team-card h3 {
  font-size: 30px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 10px; /* rapetin spacing */
}

.team-card .role {
  font-size: 25px;
  color: #000000;
  margin: 0;
  transform: none;
}

.team-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 2);
  transform: translateY(-12px);
}

/* ===== RESPONSIVE TABLET (≤768px) ===== */
@media (max-width: 768px) {
  .team-section {
    transform: translateY(20px);
    padding: 10px 30px;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 foto per baris */
    gap: 20px; /* kasih jarak antar foto */
  }

  .team-title {
    font-size: 24px;
  }

  .team-subtitle {
    font-size: 20px;
  }

  .team-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 5px;
  }

  .team-card h3 {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 10px; /* rapetin spacing */
  }

  .team-card .role {
    font-size: 15px;
    color: #000000;
    margin: 0;
    transform: none;
  }
}

/* ===== RESPONSIVE MOBILE (≤320px) ===== */
@media (max-width: 320px) {
  .team-section {
    transform: translateY(220px);
    padding: 0 20px;
    margin: 0;
    margin-left: 2px;
  }

  .team-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; /* kasih jarak antar baris card */
    justify-items: stretch;
  }

  .team-card {
    border-radius: 8px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); /* bayangan lebih hitam */
  }

  .team-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    margin-left: -3px;
  }

  .team-card h3 {
    font-size: 15px;
    font-weight: bold;
    color: #000;
    margin: 3px 0;
  }

  .team-card .role {
    font-size: 12px;
    color: #333;
    margin: 0;
  }

  .team-title {
    font-size: 16px;
    margin: 0 0 3px 0;
    text-align: center;
    transform: translateY(-20px);
  }

  .team-subtitle {
    font-size: 15px;
    margin: 0 0 8px 0;
    text-align: center;
    transform: translateY(-20px);
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .team-section {
    transform: translateY(220px);
    padding: 0 20px;
    margin: 0;
    margin-left: 2px;
  }

  .team-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; /* kasih jarak antar baris card */
    justify-items: stretch;
  }

  .team-card {
    border-radius: 8px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); /* bayangan lebih hitam */
  }

  .team-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    margin-left: -3px;
  }

  .team-card h3 {
    font-size: 15px;
    font-weight: bold;
    color: #000;
    margin: 3px 0;
  }

  .team-card .role {
    font-size: 12px;
    color: #333;
    margin: 0;
  }

  .team-title {
    font-size: 16px;
    margin: 0 0 3px 0;
    text-align: center;
    transform: translateY(-20px);
  }

  .team-subtitle {
    font-size: 15px;
    margin: 0 0 8px 0;
    text-align: center;
    transform: translateY(-20px);
  }
}

/* ===== Responsive Mobile Ukuran L (max 425px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .team-section {
    transform: translateY(320px);
    padding: 0 20px;
    margin: 0;
    margin-left: 2px;
  }

  .team-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; /* kasih jarak antar baris card */
    justify-items: stretch;
  }

  .team-card {
    border-radius: 8px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); /* bayangan lebih hitam */
  }

  .team-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    margin-left: -3px;
  }

  .team-card h3 {
    font-size: 15px;
    font-weight: bold;
    color: #000;
    margin: 3px 0;
  }

  .team-card .role {
    font-size: 12px;
    color: #333;
    margin: 0;
  }

  .team-title {
    font-size: 16px;
    margin: 0 0 3px 0;
    text-align: center;
    transform: translateY(-20px);
  }

  .team-subtitle {
    font-size: 15px;
    margin: 0 0 8px 0;
    text-align: center;
    transform: translateY(-20px);
  }
}

/* ===== Footer ===== */
.footer {
  background: #003475;
  color: #fff;
  margin-top: 300px; /* kasih jarak dari section sebelumnya */
  padding: 0;
}

/* Grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; /* dirapetin dari 30px */
}

/* About / Logo */
.footer-about {
  max-width: 380px;
  text-align: center;
  margin: 0 auto;
}

.footer-logo {
  display: block;
  margin: 0 auto 12px; /* rapetin jarak bawah logo */
  max-height: 140px;
  padding-bottom: 6px; /* lebih tipis */
  border-bottom: 4px solid #ff5c5c;
  width: 240px;
  object-fit: contain;
}

/* Text */
.footer-about p {
  font-size: 23px;
  line-height: 1.3; /* rapetin antar baris */
  margin-bottom: 10px; /* lebih rapet dari 18px */
}

/* Social Icons */
.footer-social a {
  display: inline-block;
  margin: 0 8px; /* lebih rapet dari 10px */
  font-size: 22px;
  color: #fff;
  transition: color 0.3s ease;
}

/* Column */
.footer-col h4 {
  font-size: 23px;
  margin-bottom: 8px; /* rapetin dari 15px */
  font-weight: 700;
  line-height: 1.2;
  transform: translateY(3px);
}

.footer-col h5 {
  font-size: 23px;
  margin-bottom: 8px; /* rapetin dari 15px */
  font-weight: 700;
  line-height: 1.2;
  transform: translateY(-15px);
}

.footer-coll h6 {
  font-size: 23px;
  margin-bottom: 8px; /* rapetin dari 15px */
  font-weight: 700;
  line-height: 1.2;
  transform: translateY(-30px);
}

.footer-col p a {
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  line-height: 1.5; /* rapetin teks */
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 5px; /* rapetin dari 28px */
  transform: translateY(-15px);
}

.footer-col ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 22px; /* sedikit lebih kecil biar balance */
  line-height: 1.3;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: #fff;
}

.footer-coll ul li {
  margin-bottom: 5px; /* rapetin dari 28px */
  transform: translateY(-30px);
}

.footer-coll ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 22px; /* sedikit lebih kecil biar balance */
  line-height: 1.3;
  transition: color 0.3s ease;
}

.footer-coll ul li a:hover {
  color: #fff;
}

.footer-col {
  font-size: 20px; /* rapet dan lebih konsisten */
}

.footer-col ul,
.footer-coll ul,
.footer-col-1 ul {
  list-style: none; /* hilangin bullet */
  padding: 0;
  margin: 0;
}

/* Bagian utama (biru) */
.footer-main {
  background: #003475;
  color: #fff;
  padding: 40px 25px; /* lebih rapet dari 50px 30px */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px 12px 0 0;
}

/* Bagian bawah putih */
.footer-bottom {
  background: #fff;
  text-align: center;
  font-size: 18px; /* lebih kecil dari 20px */
  color: #003475;
  padding: 8px 15px; /* lebih rapet dari 12px 18px */
  border: 4px solid #003475;
  border-radius: 0;
  line-height: 1.3; /* rapet */
}

/* Responsif */
/* ===== Tablet (≤768px) ===== */
@media (max-width: 768px) {
  .footer {
    transform: translateY(90px); /* hilangkan geser ke bawah */
    margin: 0; /* hapus semua margin */
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: start;
    text-align: left;
    gap: 20px;
  }

  .footer-main {
    background: #003475;
    color: #fff;
    padding: 50px 20px 50px; /* kurangi padding atas & bawah */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
  }

  .footer-logo {
    max-height: 90px;
    border-bottom: 3px solid #ff5c5c;
    width: 185px;
    margin-left: 30px;
    margin-top: 0; /* hapus jarak atas */
  }

  .footer-about p {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: #ffffff;
    margin: 10px auto; /* tetap rapih */
    max-width: 1000px;
    padding-left: 15px; /* geser dikit ke kanan */
  }

  .footer-col h4 {
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    transform: none; /* hilangkan transform */
    margin-bottom: 10px;
  }

  .footer-col p {
    font-size: 14px;
    line-height: 1.4;
  }

  .footer-col p a {
    font-size: 13px;
    line-height: 1.4;
  }

  .footer-col h5 {
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 20px; /* makin rapet */
    transform: translateY(-6px);
  }

  .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 20px;
  }

  .footer-col ul li {
    margin: 0; /* hapus jarak antar li */
    padding: 0;
  }

  .footer-col ul li a {
    font-size: 14px;
    line-height: 1.9; /* pas rapat */
    display: block; /* biar barisannya konsisten */
  }

  .footer-coll h6 {
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px; /* makin rapet */
    transform: translateY(-17px);
  }

  .footer-coll ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-coll ul li {
    margin: 0; /* hapus jarak antar li */
    padding: 0;
  }

  .footer-coll ul li a {
    font-size: 14px;
    line-height: 1.9; /* pas rapat */
    display: block; /* biar barisannya konsisten */
  }

  .footer-bottom {
    background: #fff;
    text-align: center;
    font-size: 14px;
    color: #003475;
    padding: 5px 30px;
    border: 2px solid #003475;
    border-radius: 0;
  }
}
/* ===== Mobile (≤320px) ===== */
@media (max-width: 320px) {
  .footer {
    margin-top: 260px; /* kasih jarak kecil di atas */
    padding-top: 0;
    padding-bottom: 0;
    transform: none; /* biar ga ngangkat */
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
    justify-items: start;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-logo {
    max-height: 90px;
    border-bottom: 3px solid #ff5c5c;
    width: 230px;
    margin: 10px 0 0 15px;
    display: block;

    /* trik geser garis */
    transform: translateX(-19px); /* geser logo + garis ke kiri */
  }

  .footer-about {
    text-align: center;
    width: 80%;
    margin-top: 0;
  }

  .footer-about p {
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #ffffff;
    margin: 10px auto;
    max-width: 700px;
  }

  .footer-col p {
    margin: 2px 0; /* rapetin atas bawah */
    line-height: 1.3; /* rapetin baris */
    font-size: 11px;
  }

  .footer-col p a {
    margin: 0;
    line-height: 1.3;
    font-size: 11px;
    display: inline-block;
  }

  .footer-col {
    width: 100%;
    margin: 0 0 15px 0;
    font-size: 11px;
    text-align: left;
  }

  .footer-col h4 {
    font-size: 13px;
    margin: 5px 0;
    text-align: left;
  }

  .footer-col h5 {
    font-size: 13px;
    margin: 5px 0;
    text-align: left;
    transform: translateY(-20px);
  }

  .footer-col ul {
    margin: 0; /* hapus margin default UL */
    padding: 0; /* hapus padding default UL */
    list-style: none; /* hapus bullet */
    margin-top: -5px;
  }

  .footer-col ul li {
    margin: 2px 0; /* jarak antar item (kecil banget) */
    padding: 0;
  }

  .footer-col ul li a {
    font-size: 11px;
    display: block;
    line-height: 1.3; /* rapetin antar baris */
    margin: 0; /* hapus margin bawaan */
  }

  .footer-coll h6 {
    font-size: 13px;
    margin: 5px 0;
    transform: translateY(-20px);
    text-align: left;
  }

  .footer-coll ul {
    margin: 0; /* hapus margin default UL */
    padding: 0; /* hapus padding default UL */
    list-style: none; /* hapus bullet */
    margin-top: 15px;
  }

  .footer-coll ul li {
    margin: 2px 0; /* jarak antar item (kecil banget) */
    padding: 0;
  }

  .footer-coll ul li a {
    font-size: 11px;
    display: block;
    line-height: 1.3; /* rapetin antar baris */
    margin: 0; /* hapus margin bawaan */
  }

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

  .footer-bottom {
    font-size: 13px;
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  .footer {
    margin-top: 260px; /* kasih jarak kecil di atas */
    padding-top: 0;
    padding-bottom: 0;
    transform: none; /* biar ga ngangkat */
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
    justify-items: start;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-logo {
    max-height: 90px;
    border-bottom: 3px solid #ff5c5c;
    width: 250px;
    margin: 10px 0 0 15px;
    margin-left: 30px;
    display: block;

    /* trik geser garis */
    transform: translateX(-20px); /* geser logo + garis ke kiri */
  }

  .footer-about {
    text-align: center;
    width: 80%;
    margin-top: 0;
  }

  .footer-about p {
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #ffffff;
    margin: 10px auto;
    max-width: 700px;
  }

  .footer-col p {
    margin: 2px 0; /* rapetin atas bawah */
    line-height: 1.3; /* rapetin baris */
    font-size: 14px;
  }

  .footer-col p a {
    margin: 0;
    line-height: 1.3;
    font-size: 14px;
    display: inline-block;
  }

  .footer-col {
    width: 100%;
    margin: 0 0 15px 0;
    font-size: 13px;
    text-align: left;
  }

  .footer-col h4 {
    font-size: 15px;
    margin: 5px 0;
    text-align: left;
  }

  .footer-col h5 {
    font-size: 15px;
    margin: 5px 0;
    text-align: left;
    transform: translateY(-20px);
  }

  .footer-col ul {
    margin: 0; /* hapus margin default UL */
    padding: 0; /* hapus padding default UL */
    list-style: none; /* hapus bullet */
    margin-top: -5px;
  }

  .footer-col ul li {
    margin: 2px 0; /* jarak antar item (kecil banget) */
    padding: 0;
  }

  .footer-col ul li a {
    font-size: 14px;
    display: block;
    line-height: 1.3; /* rapetin antar baris */
    margin: 0; /* hapus margin bawaan */
  }

  .footer-coll h6 {
    font-size: 15px;
    margin: 5px 0;
    transform: translateY(-20px);
    text-align: left;
  }

  .footer-coll ul {
    margin: 0; /* hapus margin default UL */
    padding: 0; /* hapus padding default UL */
    list-style: none; /* hapus bullet */
    margin-top: 15px;
  }

  .footer-coll ul li {
    margin: 2px 0; /* jarak antar item (kecil banget) */
    padding: 0;
  }

  .footer-coll ul li a {
    font-size: 14px;
    display: block;
    line-height: 1.3; /* rapetin antar baris */
    margin: 0; /* hapus margin bawaan */
  }

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

  .footer-bottom {
    font-size: 13px;
  }
}

/* ===== Responsive Mobile Ukuran M (max 375px) ===== */
@media (min-width: 376px) and (max-width: 425px) {
  .footer {
    margin-top: 380px; /* kasih jarak kecil di atas */
    padding-top: 0;
    padding-bottom: 0;
    transform: none; /* biar ga ngangkat */
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
    justify-items: start;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-logo {
    max-height: 90px;
    border-bottom: 3px solid #ff5c5c;
    width: 280px;
    margin: 10px 0 0 15px;
    margin-left: 30px;
    display: block;

    /* trik geser garis */
    transform: translateX(-20px); /* geser logo + garis ke kiri */
  }

  .footer-about {
    text-align: center;
    width: 80%;
    margin-top: 0;
  }

  .footer-about p {
    font-size: 16px;
    line-height: 1.4;
    text-align: center; /* biar rata kiri */
    color: #ffffff;
    margin: 10px auto;
    max-width: 700px;
    margin-left: -20px; /* geser ke kiri dikit */
  }

  .footer-col p {
    margin: 2px 0; /* rapetin atas bawah */
    line-height: 1.3; /* rapetin baris */
    font-size: 14px;
  }

  .footer-col a {
    margin: 0;
    line-height: 1.3;
    font-size: 15px;
    display: inline-block;
  }

  .footer-col {
    width: 100%;
    margin: 0 0 15px 0;
    font-size: 14px;
    text-align: left;
  }

  .footer-col h4 {
    font-size: 16px;
    margin: 5px 0;
    text-align: left;
  }

  .footer-col h5 {
    font-size: 16px;
    margin: 5px 0;
    text-align: left;
    transform: translateY(-20px);
  }

  .footer-col ul {
    margin: 0; /* hapus margin default UL */
    padding: 0; /* hapus padding default UL */
    list-style: none; /* hapus bullet */
    margin-top: -5px;
  }

  .footer-col ul li {
    margin: 2px 0; /* jarak antar item (kecil banget) */
    padding: 0;
  }

  .footer-col ul li a {
    font-size: 14px;
    display: block;
    line-height: 1.3; /* rapetin antar baris */
    margin: 0; /* hapus margin bawaan */
  }

  .footer-coll h6 {
    font-size: 16px;
    margin: 5px 0;
    transform: translateY(-20px);
    text-align: left;
  }

  .footer-coll ul {
    margin: 0; /* hapus margin default UL */
    padding: 0; /* hapus padding default UL */
    list-style: none; /* hapus bullet */
    margin-top: 15px;
  }

  .footer-coll ul li {
    margin: 2px 0; /* jarak antar item (kecil banget) */
    padding: 0;
  }

  .footer-coll ul li a {
    font-size: 14px;
    display: block;
    line-height: 1.3; /* rapetin antar baris */
    margin: 0; /* hapus margin bawaan */
  }

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

  .footer-bottom {
    font-size: 14px;
  }
}