/* Googlefont Poppins CDN Link */

:root {
  --primary-color: #c71585; /* Medium Violet Red (Darker Pink) */
  --accent-color: #ff69b4; /* Hot Pink (Vibrant Pink) */
  --border-radius: 12px;
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  outline: none;
  border: none;
  text-decoration: none;
}
body {
  min-height: 100vh;
}

html {
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  width: 10px; /* Lebar scrollbar */
}
body::-webkit-scrollbar-track {
  background: rgba(
    255,
    240,
    245,
    0.7
  ); /* Pink sangat pudar untuk track scrollbar */
  border-radius: 10px; /* Buat track scrollbar menjadi bulat */
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(
    255,
    209,
    220,
    0.9
  ); /* Pink pudar untuk bagian scrollbar */
  border-radius: 10px;
  border: 2px solid rgba(255, 240, 245, 0.7); /* Border pink sangat pudar untuk memberi efek ruang */
}

body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 180, 200, 1); /* Pink lebih gelap saat dihover */
}

/* Preloader background */

/* Style untuk Preloader */
#preloader-submit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: none; /* Awalnya disembunyikan */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Loader animasi */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #fcbbe3;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

/* Animasi spin */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* realtime clock */
.realtime-clock {
  color: #333;
  font-weight: bold;
  font-size: 13px;
  padding: 6px 12px;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0.9); /* Added scale transformation */
  white-space: nowrap;
}

/* Responsive: sembunyikan realtime clock di layar kecil */
@media (max-width: 768px) {
  .realtime-clock {
    display: none;
  }
}

@media (max-width: 480px) {
  .realtime-clock {
    display: none;
  }
}
/* toggle user */
.user-toggle-container {
  position: fixed;
  top: 70px; /* Diperkecil lagi dari 60px ke 70px */
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.user-toggle-btn {
  background-color: rgba(255, 209, 220, 0.7); /* Pink muda */
  color: #4a4a4a; /* Ganti warna teks agar lebih kontras dengan pink */
  padding: 5px 4px; /* Diperkecil lagi */
  border-top-left-radius: 5px; /* Diperkecil */
  border-bottom-left-radius: 5px; /* Diperkecil */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 150, 180, 0.5),
    0 0 10px rgba(255, 150, 180, 0.4); /* Diperkecil */
  font-size: 10px; /* Diperkecil */
}

.user-toggle-btn:hover {
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap saat hover */
  transform: scale(1.03); /* Sedikit diperkecil */
  box-shadow: 0 0 10px rgba(255, 150, 180, 0.8),
    0 0 20px rgba(255, 150, 180, 0.6); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate;
}

.user-login-panel {
  margin-right: 4px; /* Diperkecil */
  visibility: hidden;
  opacity: 0;
  transform: translateX(6px); /* Diperkecil */
  transition: all 0.3s ease;
}

.user-login-panel.visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.user-icon-container {
  width: 30px; /* Diperkecil dari 35px */
  height: 30px; /* Diperkecil dari 35px */
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap */
  border: 1px solid rgba(255, 150, 180, 0.9); /* Border diperkecil */
  border-radius: 5px; /* Diperkecil */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 0 6px rgba(255, 150, 180, 0.5),
    0 0 10px rgba(255, 150, 180, 0.4); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate;
}

.user-icon-container:hover {
  background-color: rgba(
    255,
    150,
    180,
    0.9
  ); /* Pink lebih gelap lagi saat hover */
  transform: scale(1.03); /* Sedikit diperkecil */
  box-shadow: 0 0 10px rgba(255, 150, 180, 0.8),
    0 0 20px rgba(255, 150, 180, 0.6); /* Diperkecil */
}

.user-icon-container i {
  font-size: 16px; /* Diperkecil dari 18px */
  color: #fff0f5; /* Warna icon agar kontras dengan pink */
}

@keyframes pulse-pink {
  0% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(255, 150, 180, 0.5),
      0 0 10px rgba(255, 150, 180, 0.4);
  }
  100% {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(255, 150, 180, 0.8),
      0 0 20px rgba(255, 150, 180, 0.6);
  }
}

a {
  text-decoration: none;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .user-toggle-container {
    top: 90px; /* Disesuaikan untuk layar kecil dari 80px ke 90px */
  }

  .user-toggle-btn {
    padding: 4px 3px; /* Diperkecil */
    font-size: 10px; /* Diperkecil */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 0 5px rgba(255, 150, 180, 0.5),
      0 0 8px rgba(255, 150, 180, 0.4);
  }

  .user-toggle-btn:hover {
    transform: scale(1.01);
    box-shadow: 0 0 8px rgba(255, 150, 180, 0.8),
      0 0 15px rgba(255, 150, 180, 0.6);
  }

  .user-icon-container {
    width: 25px; /* Diperkecil */
    height: 25px; /* Diperkecil */
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(255, 150, 180, 0.5),
      0 0 8px rgba(255, 150, 180, 0.4);
  }

  .user-icon-container:hover {
    transform: scale(1.01);
    box-shadow: 0 0 8px rgba(255, 150, 180, 0.8),
      0 0 15px rgba(255, 150, 180, 0.6);
  }

  .user-icon-container i {
    font-size: 12px; /* Diperkecil */
  }

  @keyframes pulse-pink {
    0% {
      transform: scale(1);
      box-shadow: 0 0 5px rgba(255, 150, 180, 0.5),
        0 0 8px rgba(255, 150, 180, 0.4);
    }
    100% {
      transform: scale(1.01);
      box-shadow: 0 0 8px rgba(255, 150, 180, 0.8),
        0 0 15px rgba(255, 150, 180, 0.6);
    }
  }
}

@media (max-width: 480px) {
  .user-toggle-container {
    top: 95px; /* Disesuaikan lagi untuk layar sangat kecil dari 85px ke 95px */
  }

  .user-toggle-btn {
    padding: 1px 1px; /* Diperkecil lagi */
    font-size: 8px; /* Diperkecil lagi */
  }

  .user-icon-container {
    width: 20px; /* Diperkecil lagi */
    height: 20px; /* Diperkecil lagi */
  }

  .user-icon-container i {
    font-size: 9px; /* Diperkecil lagi */
  }
}

/* === NAVBAR UTAMA === */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 49.5px;
  background-color: rgba(255, 209, 220, 0.9);
  box-shadow: 0 1.8px 5.4px rgba(0, 0, 0, 0.25);
  z-index: 99;
}

/* LOGO IMAGE */
.navbar img {
  height: 36px;
  width: 180px;
  transition: transform 0.1s ease;
}

.navbar img:hover {
  transform: scale(1.02);
}

/* WRAPPER NAV */
nav .navbar {
  height: 100%;
  max-width: 1080px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0 27px;
}

/* LOGO TEXT (jika ada, saat ini menggunakan gambar) */
.navbar .logo a {
  font-size: 23.4px;
  color: #000000;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 0 1.8px #000000;
}

/* LINK UTAMA */
nav .navbar .nav-links {
  line-height: 49.5px;
  height: 100%;
}

nav .navbar .links {
  display: flex;
}

nav .navbar .links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 9px;
}

/* LINK NORMAL */
nav .navbar .links li a {
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #000000;
  font-size: 11.7px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* HOVER: NEON PINK GLOW */
nav .navbar .links li a:hover {
  color: #cc0066;
  text-shadow: 0 0 2.7px #ff66b2, 0 0 5.4px #ff66b2;
  transform: translateY(-0.9px);
  animation: neonPulsePink 1.5s infinite alternate;
}

/* Rotasi panah saat hover di desktop (original behavior) */
.links li:hover .htmlcss-arrow,
.links li:hover .htmlcss-arrow6,
.links li:hover .js-arrow,
.links li:hover .js-arrow1,
.links li:hover .js-arrow2 {
  transform: rotate(180deg);
}

/* Arrow rotation for sub-menus in mobile (new rule for JS control) */
.navbar .links li .arrow.rotate {
  transform: rotate(180deg);
}

nav .navbar .links li .arrow {
  height: 100%;
  width: 16.2px;
  line-height: 49.5px;
  text-align: center;
  display: inline-block;
  color: #000000;
  transition: all 0.3s ease;
}

/* === SUBMENU === */
nav .navbar .links li .sub-menu {
  position: absolute;
  top: 49.5px;
  left: 0;
  line-height: 27px;
  width: 162px;
  background-color: rgba(255, 209, 220, 0.95);
  box-shadow: 0 0 5.4px rgba(255, 150, 180, 0.3);
  border-radius: 0 0 1.8px 1.8px;
  display: none;
  z-index: 2;
  animation: fadeSlideDown 0.4s ease forwards;
}

/* Menampilkan sub-menu saat hover di desktop */
nav .navbar .links li:hover .js-sub-menu,
nav .navbar .links li:hover .js-sub-menu1,
nav .navbar .links li:hover .js-sub-menu2 {
  display: block;
}

.navbar .links li .sub-menu li {
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 180, 200, 0.2);
}

.navbar .links li .sub-menu a {
  color: #333333;
  font-size: 11.7px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navbar .links li .sub-menu a:hover {
  color: #cc0066;
  text-shadow: 0 0 2.7px #ff66b2, 0 0 5.4px #ff66b2;
  animation: neonPulsePink 1.5s infinite alternate;
}

/* === SUB-SUBMENU === */
.navbar .links li .sub-menu .more-arrow,
.navbar .links li .sub-menu .more-arrow6,
.navbar .links li .sub-menu .more-arrow7 {
  line-height: 27px;
}

.navbar .links li .sub-menu .more-sub-menu,
.navbar .links li .sub-menu .more-sub-menu6,
.navbar .links li .sub-menu .more-sub-menu7 {
  position: absolute;
  top: 0;
  left: 100%;
  width: 99px;
  background-color: rgba(255, 180, 200, 0.95);
  border-radius: 0 1.8px 1.8px 1.8px;
  z-index: 1;
  display: none;
  animation: fadeSlideRight 0.3s ease forwards;
}

.links li .sub-menu .more:hover .more-sub-menu,
.links li .sub-menu .more:hover .more-sub-menu6,
.links li .sub-menu .more:hover .more-sub-menu7 {
  display: block;
}

/* === ANIMASI KEYFRAMES === */
@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-5.4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideRight {
  0% {
    opacity: 0;
    transform: translateX(-5.4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes neonPulsePink {
  0% {
    text-shadow: 0 0 2.7px #ff66b2, 0 0 5.4px #ff66b2;
    filter: drop-shadow(0 0 2.7px #ff66b2) drop-shadow(0 0 5.4px #ff66b2);
  }
  100% {
    text-shadow: 0 0 5.4px #ff66b2, 0 0 10.8px #ff66b2;
    filter: drop-shadow(0 0 5.4px #ff66b2) drop-shadow(0 0 10.8px #ff66b2);
  }
}

/* === SEARCHBOX === */
.navbar .search-box {
  position: relative;
  height: 27px;
  width: 27px;
  right: 60px; /* Posisi default untuk desktop */
}

.navbar .search-box i {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 27px;
  text-align: center;
  font-size: 16.2px;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Efek hover untuk ikon pencarian */
.navbar .search-box i:hover {
  color: #ff66b2;
  animation: neonPulsePink 1.5s infinite alternate;
}

/* Kotak input pencarian - DI SINI PERUBAHAN UTAMANYA */
.navbar .search-box .input-box {
  position: absolute;
  right: calc(100% - 30px); /* Disesuaikan agar lebih jauh ke kiri */
  top: 60px; /* Disesuaikan agar lebih jauh dari navbar dan tidak bentrok dengan clock */
  height: 45px; /* Diperkecil dari 50px */
  width: 240px; /* Diperkecil dari 260px */
  background: rgba(255, 209, 220, 0.7);
  border-radius: 4px; /* Diperkecil */
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

.navbar.showInput .search-box .input-box {
  top: 50px; /* Disesuaikan */
  opacity: 1;
  pointer-events: auto;
  background-color: rgba(255, 180, 200, 0.8);
}

.search-box .input-box::before {
  content: "";
  position: absolute;
  height: 12px; /* Diperkecil */
  width: 12px; /* Diperkecil */
  background-color: rgba(255, 180, 200, 0.8);
  right: 6px; /* Disesuaikan */
  top: -4px; /* Disesuaikan */
  transform: rotate(45deg);
}

.search-box .input-box input {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px; /* Diperkecil */
  transform: translate(-50%, -50%);
  height: 25px; /* Diperkecil dari 30px */
  width: 210px; /* Diperkecil dari 230px */
  outline: none;
  padding: 0 10px; /* Diperkecil */
  font-size: 14px; /* Diperkecil */
  border: none;
  background-color: #ffffff;
  color: #333;
}

/* --- Media Queries --- */

@media (max-width: 1920px) {
  nav .navbar .search-box {
    right: 60px;
  }
}

@media (max-width: 1080px) {
  nav .navbar .search-box {
    right: 50px;
  }
}

@media (max-width: 768px) {
  nav .navbar .search-box {
    right: 30px;
  }
  .navbar .nav-links {
    display: none;
  }
  .navbar .bx-menu {
    display: block;
  }
}

@media (max-width: 480px) {
  .navbar img {
    height: 30px;
    width: 150px;
  }
  nav .navbar .search-box {
    right: 20px;
  }
}

.navbar .nav-links .sidebar-logo {
  display: none;
}

.navbar .bx-menu {
  display: none;
}

@media (max-width: 800px) {
  .navbar .bx-menu {
    display: block;
  }

  nav .navbar .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 220px; /* Diperkecil dari 250px */
    width: 100%;
    background-color: rgba(255, 209, 220, 0.9);
    line-height: 30px; /* Diperkecil dari 35px */
    padding: 6px; /* Diperkecil */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Diperkecil */
    transition: all 0.5s ease;
    z-index: 1000;
  }

  .navbar .nav-links .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-logo .logo-name {
    font-size: 20px; /* Diperkecil dari 22px */
    color: #000000;
  }

  .sidebar-logo i,
  .navbar .bx-menu {
    font-size: 20px; /* Diperkecil dari 22px */
    color: #000000;
  }

  nav .navbar .links {
    display: block;
    margin-top: 12px; /* Diperkecil dari 15px */
  }

  nav .navbar .links li .arrow {
    line-height: 30px; /* Diperkecil dari 35px */
  }

  nav .navbar .links li {
    display: block;
  }

  nav .navbar .links li .sub-menu {
    position: relative;
    top: 0;
    box-shadow: none;
    display: none;
    width: auto;
    background-color: rgba(255, 209, 220, 0.95);
    border-radius: 0;
    animation: none;
  }

  .navbar .links li .sub-menu li {
    border-bottom: none;
    padding: 0 8px; /* Diperkecil */
  }

  .navbar .links li .sub-menu .more-sub-menu,
  .navbar .links li .sub-menu .more-sub-menu6,
  .navbar .links li .sub-menu .more-sub-menu7 {
    display: none;
    position: relative;
    left: 0;
    width: auto;
    background-color: rgba(255, 180, 200, 0.95);
    border-radius: 0;
    animation: none;
  }

  .navbar .links li .sub-menu .more-sub-menu li,
  .navbar .links li .sub-menu .more-sub-menu6 li,
  .navbar .links li .sub-menu .more-sub-menu7 li {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .links li:hover .htmlcss-arrow,
  .links li:hover .htmlcss-arrow6,
  .links li:hover .js-arrow,
  .links li:hover .js-arrow1,
  .links li:hover .js-arrow2 {
    transform: rotate(0deg);
  }

  nav .navbar .links li:hover .js-sub-menu,
  nav .navbar .links li:hover .js-sub-menu1,
  nav .navbar .links li:hover .js-sub-menu2,
  .links li .sub-menu .more:hover .more-sub-menu,
  .links li .sub-menu .more:hover .more-sub-menu6,
  .links li .sub-menu .more:hover .more-sub-menu7 {
    display: none;
  }
}

@media (max-width: 370px) {
  nav .navbar .nav-links {
    max-width: 100%;
  }
}

@media (max-width: 920px) {
  nav .navbar {
    max-width: 100%;
    padding: 0 15px; /* Diperkecil dari 20px */
  }

  nav .navbar .logo a {
    font-size: 24px; /* Diperkecil dari 25px */
  }

  nav .navbar .links li {
    padding: 0 6px; /* Diperkecil dari 8px */
    white-space: nowrap;
  }

  nav .navbar .links li a {
    font-size: 12px; /* Diperkecil dari 13px */
  }
}

/* Hero Start */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url("./img/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0) 150%,
    rgba(0, 0, 0, 0) 150%
  );
  mask-image: linear-gradient(rgba(0, 0, 0, 1) 90%, rgba(173, 55, 55, 0) 150%);
}

.hero .mask-container {
  position: absolute;
  /* background: salmon; */
  inset: 0;
  /* mask-image: url("../immanuel/img/header-bg.svg"); */
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}

.hero .content {
  padding: 1rem 5%; /* Diperkecil dari 1.4rem 7% */
  /* max-width: 60rem; */
  width: 100%;
  text-align: center;
  position: fixed;
  top: 40px; /* Diperkecil dari 50px */
}

.hero .content h1 {
  font-size: 4em; /* Diperkecil dari 5em */
  color: #fff;
  text-shadow: 2px 2px 2px rgba(1, 1, 3, 0.5); /* Diperkecil */
  line-height: 1.1; /* Disesuaikan */
}

.hero .content h1 span {
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.829); /* Diperkecil */
  color: var(--primary);
}

.hero .content p {
  font-size: 1.4rem; /* Diperkecil dari 1.6rem */
  margin-top: 0.8rem; /* Diperkecil dari 1rem */
  line-height: 1.3; /* Disesuaikan */
  font-weight: 100;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.774); /* Diperkecil */
  mix-blend-mode: difference;
}

.hero .content .cta {
  margin-top: 0.8rem; /* Diperkecil dari 1rem */
  display: inline-block;
  padding: 0.8rem 2.5rem; /* Diperkecil dari 1rem 3rem */
  font-size: 1.2rem; /* Diperkecil dari 1.4rem */
  color: #ffffff13;
  background-color: var(--primary);
  border-radius: 0.4rem; /* Diperkecil dari 0.5rem */
  box-shadow: 1px 1px 2px rgba(1, 1, 3, 0.5); /* Diperkecil */
}

.hero .content img {
  max-width: 90%; /* Sedikit diperkecil */
  height: auto;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.048); /* Diperkecil */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero .content img:hover {
  transform: scale(1.05); /* Sedikit diperkecil */
  opacity: 0.9;
}

.hero .content h1,
.hero .content p {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.hero .content h1:hover,
.hero .content p:hover,
.hero .content span:hover {
  color: var(--primary);
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9); /* Diperkecil */
}

/* Hero Ends */

/* slider header start */

.slider {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  margin-top: 50px;
  overflow: hidden;
  z-index: 0;
}

.slider > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain; /* atau cover jika lebih suka */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadeSlide 24s infinite ease-in-out;
}

.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 6s;
}

.slide:nth-child(3) {
  animation-delay: 12s;
}

.slide:nth-child(4) {
  animation-delay: 18s;
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Untuk layar menengah (tablet landscape) */
@media (max-width: 1024px) {
  .slider {
    height: 80%; /* Sesuaikan tinggi slider */
  }

  .slider > * {
    background-size: contain; /* Gunakan "contain" jika ingin gambar seluruhnya terlihat */
    background-position: center;
  }
}

/* Untuk layar kecil (tablet potret dan smartphone besar) */
@media (max-width: 768px) {
  .slider {
    height: 60%; /* Sesuaikan tinggi slider */
  }

  .slider > * {
    background-size: contain; /* Pastikan gambar tetap terlihat */
    background-position: center center; /* Fokus pada bagian tengah */
  }
}

/* Untuk layar sangat kecil (smartphone kecil) */
@media (max-width: 480px) {
  nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  section.hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .slider {
    height: 50%; /* Kurangi tinggi slider */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .slider > * {
    background-size: cover; /* Tetap gunakan cover agar tidak ada area kosong */
    background-position: center; /* Fokus pada bagian utama gambar */
  }
}

@keyframes slide {
  0% {
    left: 100%;
    width: 100%;
    opacity: 1;
  }

  5% {
    left: 0%;
  }

  25% {
    left: 0%;
  }

  30% {
    left: -100%;
    width: 100%;
    opacity: 1;
  }

  30.0001% {
    left: -100%;
    width: 0%;
    opacity: 0;
  }

  100% {
    left: 100%;
    width: 100%;
    opacity: 0;
  }
}

/* slider header ends */

/* about Start */
.about {
  padding: 3rem 10% 1rem; /* Padding atas diperkecil dari 4rem */
}

.about .row .content button {
  background-color: #e6a7b8; /* Pink yang sedikit lebih gelap */
  color: #fff; /* Teks putih masih akan terlihat baik di atas pink ini */
  border: none;
  padding: 8px 16px; /* Diperkecil dari 10px 20px */
  border-radius: 4px; /* Diperkecil dari 5px */
  cursor: pointer;
  font-size: 13px; /* Diperkecil dari 14px */
}
.about h2 {
  text-align: center;
  font-size: 1.8rem; /* Diperkecil dari 2rem */
  margin-bottom: 1.5rem; /* Margin bawah diperkecil dari 2.5rem */
  color: #d98fb3;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Diperkecil */
}
.about h2 span {
  color: #0000009c;
}
.about .row {
  display: flex;
  flex-direction: row-reverse; /* Menggeser gambar ke kanan */
}

.about .row .about-img {
  flex: 1 1 35rem; /* Disesuaikan dari 40rem untuk mengakomodasi gambar yang lebih kecil */
}

.about .row .about-img img {
  width: 90%; /* Diperkecil dari 100% */
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
  border-radius: 8px; /* Diperkecil dari 10px */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* Diperkecil */
  transition: transform 0.3s ease, box-shadow 0.3s ease, mask-position 0.3s ease;
}

.about .row .about-img img:hover {
  transform: scale(1.02); /* Membesarkan gambar sedikit */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* Membuat bayangan lebih intens */
  mask-position: center center;
}

.about .row .content {
  flex: 1 1 30rem; /* Disesuaikan */
  padding: 3rem 2rem; /* Padding atas diperkecil dari 4rem */
}

.about .row .content h3 {
  font-size: 1.1rem; /* Diperkecil dari 1.2rem */
  margin-bottom: 0.8rem; /* Diperkecil dari 1rem */
}

.about .row .content p {
  text-align: justify;
  margin-bottom: 0.6rem; /* Diperkecil dari 0.8rem */
  font-size: 0.95rem; /* Diperkecil dari 1rem */
  font-weight: 100;
  line-height: 1.5; /* Disesuaikan */
}
/* Untuk layar di bawah 768px (tablet dan smartphone) */
@media (max-width: 768px) {
  .about {
    padding: 2rem 4%; /* Diperkecil */
  }

  .about .row {
    flex-direction: column; /* Tetap kolom untuk responsivitas */
    align-items: center;
  }

  .about .row .about-img,
  .about .row .content {
    flex: 1 1 auto;
    padding: 1rem 1.5rem; /* Diperkecil dan disesuaikan */
  }

  .about .row .about-img img {
    width: 95%; /* Disesuaikan untuk responsivitas di layar kecil */
    border-radius: 7px; /* Kurangi border radius pada layar kecil */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* Kurangi intensitas bayangan */
  }

  .about h2 {
    font-size: 1.4rem; /* Kurangi ukuran font judul */
  }

  .about .row .content h3 {
    font-size: 0.9rem; /* Kurangi ukuran font subjudul */
  }

  .about .row .content p {
    font-size: 0.85rem; /* Kurangi ukuran font teks */
  }

  .about .row .content button {
    padding: 7px 14px; /* Kurangi padding pada tombol */
    font-size: 11px;
  }
}

/* Untuk layar di bawah 480px (smartphone kecil) */
@media (max-width: 480px) {
  .about h2 {
    font-size: 1.1rem; /* Sesuaikan ukuran font judul lagi */
  }

  .about .row .content p {
    font-size: 0.75rem; /* Kurangi ukuran font teks */
    line-height: 1.3;
  }

  .about .row .content button {
    padding: 5px 12px; /* Kurangi padding tombol */
    font-size: 10px;
  }

  .about .row .about-img img {
    width: 100%; /* Pastikan gambar mengisi lebar penuh di layar sangat kecil */
    border-radius: 4px; /* Kurangi border radius lagi */
  }
}

/* about Ends */

/* card siswa berperestasi start*/
/* Container untuk card siswa berprestasi */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center; /* Lebih konsisten dari space-around */
  padding: 0 10px;
}

/* Setiap card */
.card {
  position: relative;
  width: 300px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background-color: #fff;
}

/* Hover efek card */
.card:hover {
  transform: translateY(-10px);
}

/* Background image card */
.background-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
  transition: filter 0.3s ease;
}

.card:hover .background-image {
  filter: brightness(0.5);
}

/* Popup info nama siswa */
.popup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 12px 20px;
  text-align: center;
  border-radius: 0 0 20px 20px;

  border-top: 2px solid #ffffff44;
  border-left: 2px solid #ffffff22;
  border-right: 2px solid #ffffff22;

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

  display: none;
  font-weight: 600;
  font-size: 18px;
  user-select: none;
}

/* Popup header */
.popup h3 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Breakpoints */

/* Extra small devices (phones) */
@media (max-width: 400px) {
  .card {
    width: 90vw; /* almost full screen */
    height: auto;
    aspect-ratio: 3 / 4; /* jaga rasio proporsional */
  }
}

/* Small devices (portrait tablets and large phones) */
@media (max-width: 768px) {
  .card {
    width: 45vw;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* Medium devices (landscape tablets) */
@media (max-width: 992px) {
  .card {
    width: 30vw;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* Large devices (laptops/desktops) */
@media (min-width: 993px) {
  .card {
    width: 300px;
    height: 400px;
  }
}

/* card siswa berperestasi ends */

/* BLOG START */
.blogs {
  padding: 5rem 14.5% 1.4rem;
}

.blogs .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
}
.blogs .heading span {
  text-align: center;
  font-size: 2rem;

  color: #4070f4;

  padding-bottom: 10px; /* Sesuaikan nilai ini dengan kebutuhan padding bawah */
}

.blogs .heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #0000009c;
}
.blogs .box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.blogs .box-container .box {
  flex: 1 1 calc(33.333% - 1rem); /* Default 3 kolom pada layar besar */
  border-radius: 12px;
  border: 1px solid #000000;
}

.blogs .box-container .box .image {
  border-radius: 10px 10px 0px 0px;
  height: 25rem;
  overflow: hidden;
  width: 100%;
}

.blogs .box-container .box .image img {
  border-radius: 10px 10px 0px 0px;
  transition: transform 0.5s ease, border-radius 0.5s ease;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.blogs .box-container .box:hover .image img {
  transform: scale(1.5);
}

.blogs .box-container .box .content {
  padding: 2rem;
}
.blogs .box-container .box .content .title {
  font-size: 1rem;
  line-height: 1;
  color: #000000;
}

.blogs .box-container .box .content .title:hover {
  color: #000000;
}

.blogs .box-container .box .content span {
  color: #000000;
  display: block;
  padding-top: 1rem;
  font-size: 2rem;
}

.blogs .box-container .box .content p {
  font-size: 1rem;
  line-height: 1.8;
  color: #1107079f;
  padding: 1rem 0;
}
.blogs .box .content button {
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background-color: #4070f4;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 15px;
  font-weight: bold;
}

/* Hover effect untuk tombol */
.blogs .box .content button:hover {
  background-color: #4070f4;
  transform: scale(1.05);
}

/* Media Query untuk layar kecil (ponsel) */
@media (max-width: 600px) {
  .blogs .box-container {
    flex-direction: column;
  }

  .blogs .box-container .box {
    flex: 1 1 100%; /* Mengisi lebar penuh, berubah menjadi satu kolom */
  }
}

/* Media Query untuk layar sedang (tablet) */
@media (min-width: 601px) and (max-width: 768px) {
  .blogs .box-container .box {
    flex: 1 1 calc(50% - 1rem); /* Menjadi 2 kolom pada tablet */
  }
}

/* Media Query untuk layar besar (desktop) */
@media (min-width: 769px) {
  .blogs .box-container .box {
    flex: 1 1 calc(33.333% - 1rem); /* Default 3 kolom pada layar desktop */
  }
}

/* BLOGS ENDS */

/* CONTACT KAMI START */
/* Section Contact */
.contact {
  padding: 5rem 14.5% 1.4rem;
  background-color: #f9f9f9; /* Background untuk keseluruhan section */
}

.contact h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #000000;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Efek shadow gelap lembut */
}

.contact h2 span {
  color: #0000009c; /* Warna teks "Kontak" */
}

.contact p {
  text-align: center;
  max-width: 30rem;
  margin: auto;
  font-weight: 100;
  line-height: 1.6;
  color: #666; /* Warna teks deskripsi */
}

/* Row Container */
.contact .row {
  display: flex;
  flex-wrap: wrap;
  border-radius: 15px;
  margin-top: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
}

/* Map Style */
.contact .row iframe {
  flex: 1 1 50%; /* Atur map agar setengah lebar dari row */
  border-radius: 15px 0 0 15px;
  border: 0;
  width: 100%;
  height: 450px;
}

/* Form Style */
.contact .row form {
  flex: 1 1 50%;
  padding: 2rem;
  text-align: center;
  background-color: #f4f6f8; /* Background form */
  border-radius: 0 15px 15px 0;
}

/* Input Group */
.contact .row form .input-group {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding-left: 1rem;
}

.contact .row form .input-group i {
  margin-right: 10px;
  color: #888;
  font-size: 1.2rem;
}

.contact .row form .input-group input {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: none;
  outline: none;
  background: none;
  color: #333;
  border-radius: 8px;
}

/* Button Style */
.contact .row form .btn {
  margin-top: 1.5rem;
  padding: 1rem 3rem;
  font-size: 1rem;
  color: #ffffff;
  background-color: #4070f4;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact .row form .btn:hover {
  background-color: #3054c4; /* Warna saat tombol di-hover */
}

/* Responsive Styles */
@media (max-width: 900px) {
  .contact .row {
    flex-direction: column;
  }

  .contact .row iframe,
  .contact .row form {
    border-radius: 15px; /* Hilangkan sudut tajam untuk tampilan mobile */
    width: 100%;
  }

  .contact .row form {
    padding: 2rem 1rem;
  }
}

@media (max-width: 600px) {
  .contact h2 {
    font-size: 1.6rem;
  }

  .contact p {
    font-size: 0.9rem;
  }

  .contact .row form .input-group input {
    font-size: 0.9rem;
  }

  .contact .row form .btn {
    font-size: 0.9rem;
    padding: 0.8rem 2.5rem;
  }
}

/* CONTACS ENDS */

/* FOOTER SECTION */
footer {
  background-color: rgba(255, 209, 220, 0.9);
  width: 100%;
  left: 0;
  padding: 20px 0;
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  background: #ffffff;
}

footer .content .logo-details img {
  max-width: 500px; /* Sesuaikan ukuran gambar maksimal */
  height: 60px; /* Menjaga rasio gambar */
  margin-right: 10px; /* Beri jarak dari teks atau elemen lainnya */
  vertical-align: middle; /* Pusatkan gambar secara vertikal jika ada teks sebaris */
}

footer .content {
  max-width: 1450px;
  margin: auto;
  padding: 30px 40px 40px 40px;
}
footer .content .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.content .top .logo-details {
  color: #000000;
  font-size: 30px;
}
.content .top .media-icons {
  display: flex;
}
.content .top .media-icons a {
  height: 40px;
  width: 40px;
  margin: 0 8px;
  border-radius: 50%;
  display: flex;
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Horizontally centers the content */

  color: #000000;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1) {
  background: #4267b2;
}
.top .media-icons a:nth-child(1):hover {
  color: #4267b2;
  background: #fff;
}
.top .media-icons a:nth-child(2) {
  background: #1da1f2;
}
.top .media-icons a:nth-child(2):hover {
  color: #1da1f2;
  background: #fff;
}
.top .media-icons a:nth-child(3) {
  background: #e1306c;
}
.top .media-icons a:nth-child(3):hover {
  color: #e1306c;
  background: #fff;
}
.top .media-icons a:nth-child(4) {
  background: #0077b5;
}
.top .media-icons a:nth-child(4):hover {
  color: #0077b5;
  background: #fff;
}
.top .media-icons a:nth-child(5) {
  background: #ff0000;
}
.top .media-icons a:nth-child(5):hover {
  color: #ff0000;
  background: #fff;
}
footer .content .link-boxes {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
footer .content .link-boxes .box {
  width: calc(100% / 5 - 10px);
}
.content .link-boxes .box .link_name {
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
  text-decoration: underline;
  text-decoration-color: #000000;
  text-underline-offset: 7px;
}

.content .link-boxes .box li {
  margin: 6px 0;
  list-style: none;
}
.content .link-boxes .box li a {
  color: #050505;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease;
}
/* Efek hover pink baru untuk tautan di footer */
.content .link-boxes .box li a:hover {
  color: #cc0066; /* Warna teks pink lebih tua saat hover */
  text-shadow: 0 0 5px #ff66b2, 0 0 10px #ff66b2; /* Efek neon pink */
  transform: translateY(-1px);
  animation: neonPulsePink 1.5s infinite alternate; /* Pastikan nama animasi sesuai dengan keyframes pink */
  opacity: 1; /* Pastikan visibilitas penuh saat hover */
  text-decoration: none; /* Hapus underline untuk tampilan neon yang lebih bersih */
}

/* Definisi keyframes untuk animasi neonPulsePink */
@keyframes neonPulsePink {
  from {
    text-shadow: 0 0 5px #ff66b2, 0 0 10px #ff66b2;
  }
  to {
    text-shadow: 0 0 10px #ff66b2, 0 0 20px #ff66b2;
  }
}

.content .link-boxes .input-box {
  margin-right: 55px;
}
.link-boxes .input-box input {
  height: 40px;
  width: calc(100% + 55px);
  outline: none;
  border: 1px solid #000000;
  background: #ffffff;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  color: #000000;
  margin-top: 5px;
}
.link-boxes .input-box input::placeholder {
  color: #000000;
  font-size: 16px;
}
.link-boxes .input-box input[type="button"] {
  background: #fff;
  color: #0e0e0e;
  border: none;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.4s ease;
}
.input-box input[type="button"]:hover {
  opacity: 1;
}
footer .bottom-details {
  width: 100%;
  background: #ffffff;
}
footer .bottom-details .bottom_text {
  max-width: 1250px;
  margin: auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
  font-size: 14px;
  font-weight: 300;
  color: #000000;
  opacity: 0.8;
  text-decoration: none;
}
.bottom-details .bottom_text a:hover {
  opacity: 1;
  text-decoration: underline;
}
.bottom-details .bottom_text a {
  margin-right: 10px;
}

@media (max-width: 900px) {
  footer .content .link-boxes {
    flex-wrap: wrap;
  }
  footer .content .link-boxes .input-box {
    width: 40%;
    margin-top: 10px;
  }
}
@media (max-width: 700px) {
  footer {
    position: relative;
  }
  .content .top .logo-details {
    font-size: 26px;
  }
  .content .top .media-icons a {
    height: 35px;
    width: 35px;
    font-size: 14px;
    line-height: 35px;
  }
  footer .content .link-boxes .box {
    width: calc(100% / 3 - 10px);
  }
  footer .content .link-boxes .input-box {
    width: 60%;
  }
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a {
    font-size: 12px;
  }
}
@media (max-width: 520px) {
  footer::before {
    top: 145px;
  }
  footer .content .top {
    flex-direction: column;
  }
  .content .top .media-icons {
    margin-top: 16px;
  }
  footer .content .link-boxes .box {
    width: calc(100% / 2 - 10px);
  }
  footer .content .link-boxes .input-box {
    width: 100%;
  }
}
@media (max-width: 700px) {
  footer .content .logo-details img {
    max-width: 80px; /* Sesuaikan ukuran untuk layar kecil */
  }
}

@media (max-width: 520px) {
  footer .content .logo-details img {
    max-width: 60px; /* Sesuaikan ukuran lebih kecil jika layar sangat kecil */
  }
}
/* FOOTER SECTION ENDSSSS */

/* ALUMNI Header */
.header-alumni {
  text-align: center;
  font-size: 1.8em; /* Diperkecil dari 2em */
  font-weight: 700;
  color: #000000; /* Pink gelap */
  margin-bottom: 30px; /* Diperkecil dari 40px */
  text-transform: uppercase;
  letter-spacing: 1.5px; /* Diperkecil dari 2px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 700px; /* Diperkecil dari 800px */
  position: relative;
  padding-bottom: 8px; /* Diperkecil dari 10px */
}

/* Underline for the header */
.header-alumni::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px; /* Diperkecil dari 80px */
  height: 3px; /* Diperkecil dari 4px */
  background-color: #ec407a; /* Pink lebih cerah */
  border-radius: 1.5px; /* Diperkecil dari 2px */
}

/* Main container for the testimonial slider */
.slider-container {
  position: relative;
  max-width: 1250px; /* Diperkecil dari 1200px */
  width: 100%;
  overflow: hidden;
  border-radius: 10px; /* Diperkecil dari 12px */
  background-color: #fff0f5; /* Pink sangat muda */
  margin: 0 auto;
  box-shadow: 0 4px 10px rgba(255, 150, 180, 0.2); /* Shadow pink */
}

/* Wrapper for all testimonial slides */
.testimonial-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Individual testimonial slide */
.testimonial-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* Diperkecil dari 25px */
  box-sizing: border-box;
}

/* Alumni profile section */
.alumni-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px; /* Diperkecil dari 25px */
}

.alumni-profile img {
  /* Ukuran baru untuk foto profil */
  width: 120px; /* Diperkecil dari 150px */
  height: 120px; /* Diperkecil dari 150px */
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff; /* Diperkecil dari 5px */
  box-shadow: 0 0 0 2.5px #d81b60,
    /* Pink gelap */ 0 0 0 6px rgba(255, 150, 180, 0.3),
    /* Pink lebih muda */ 0 6px 15px rgba(0, 0, 0, 0.15); /* Diperkecil dari 0 8px 20px */
  margin-bottom: 10px; /* Diperkecil dari 12px */
}

.alumni-profile .name {
  font-size: 1.1em; /* Diperkecil dari 1.2em */
  font-weight: 600;
  color: #d81b60; /* Pink gelap */
  margin-bottom: 3px; /* Diperkecil dari 4px */
}

.alumni-profile .details {
  font-size: 0.85em; /* Diperkecil dari 0.9em */
  color: #666;
}

/* Testimonial content section */
/* Testimonial content section */
.testimonial-content-wrapper {
  position: relative;
  background-color: #fce4ec; /* Pink sangat muda */
  border-radius: 8px; /* Diperkecil dari 10px */
  padding: 20px 18px; /* Diperkecil dari 25px 20px */
  box-sizing: border-box;
  width: 95%; /* Diperkecil dari 100% */
  max-width: 900px; /* Menambahkan max-width untuk kontrol di layar besar */
  margin: 0 auto; /* Menengahkan elemen */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: inset 0 0.8px 2.5px rgba(255, 150, 180, 0.1); /* Inset shadow pink, diperkecil */
}

.testimonial-content-wrapper .quote-icon {
  position: absolute;
  top: -3px; /* Diperkecil dari -4px */
  right: 0px;
  font-size: 5em; /* Diperkecil dari 6em */
  color: rgba(255, 150, 180, 0.3); /* Pink transparan */
  line-height: 1;
  font-weight: 900;
  z-index: 1;
}

.testimonial-content {
  font-size: 0.9em; /* Diperkecil dari 1em */
  line-height: 1.4; /* Diperkecil dari 1.5 */
  color: #333;
  margin-bottom: 12px; /* Diperkecil dari 15px */
  position: relative;
  z-index: 2;
}

.testimonial-role {
  font-size: 1em; /* Diperkecil dari 1.1em */
  font-weight: 600;
  color: #555;
  align-self: flex-end;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

/* Pagination dots */
.slider-pagination {
  display: flex;
  justify-content: center;
  margin-top: -10px; /* Diperkecil dari -15px */
  position: relative;
  z-index: 5;
}

.pagination-dot {
  width: 8px; /* Diperkecil dari 10px */
  height: 8px; /* Diperkecil dari 10px */
  background-color: #f8bbd0; /* Pink muda untuk dot default */
  border-radius: 50%;
  margin: 0 3px; /* Diperkecil dari 0 4px */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination-dot.active {
  background-color: #d81b60; /* Pink gelap untuk dot aktif */
}

/* Media queries for responsiveness */
@media (min-width: 768px) {
  .testimonial-slide {
    flex-direction: row;
    align-items: flex-start;
    padding: 25px; /* Diperkecil dari 30px */
  }

  .alumni-profile {
    flex: 0 0 200px; /* Diperkecil dari 230px */
    margin-right: 25px; /* Diperkecil dari 30px */
    margin-bottom: 0;
  }

  .testimonial-content-wrapper {
    flex: 1;
    padding: 30px 25px; /* Diperkecil dari 40px 30px */
  }

  .testimonial-content-wrapper .quote-icon {
    font-size: 8em; /* Diperkecil dari 10em */
    top: -10px; /* Diperkecil dari -15px */
    right: 5px;
  }
}

@media (max-width: 480px) {
  .header-alumni {
    font-size: 1.5em; /* Diperkecil dari 1.8em */
    margin-bottom: 20px; /* Diperkecil dari 25px */
  }

  .testimonial-slide {
    padding: 10px; /* Diperkecil dari 15px */
  }

  .alumni-profile img {
    width: 100px; /* Diperkecil dari 120px */
    height: 100px; /* Diperkecil dari 120px */
  }

  .alumni-profile .name {
    font-size: 1em; /* Diperkecil dari 1.1em */
  }

  .alumni-profile .details {
    font-size: 0.75em; /* Diperkecil dari 0.8em */
  }

  .testimonial-content-wrapper {
    padding: 20px 10px; /* Diperkecil dari 25px 15px */
  }

  .testimonial-content-wrapper .quote-icon {
    font-size: 5em; /* Diperkecil dari 7em */
    top: -3px; /* Diperkecil dari -5px */
    right: 0px;
  }

  .testimonial-content {
    font-size: 0.8em; /* Diperkecil dari 0.9em */
  }

  .testimonial-role {
    font-size: 0.9em; /* Diperkecil dari 1em */
  }

  .pagination-dot {
    width: 6px; /* Diperkecil dari 8px */
    height: 6px; /* Diperkecil dari 8px */
    margin: 0 2px; /* Diperkecil dari 0 3px */
  }
}

.container-reviews {
  max-width: 1140px; /* Diperkecil dari 1350px */
  margin: 15px auto; /* Diperkecil dari 20px */
  padding: 15px; /* Diperkecil dari 20px */
  border: 0.8px solid rgba(255, 180, 200, 0.7); /* Diperkecil dari 1px */
  border-radius: 6px; /* Diperkecil dari 8px */
  box-shadow: 0 3px 5px rgba(255, 150, 180, 0.3); /* Diperkecil dari 0 4px 6px */
  background-color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(15px); /* Diperkecil dari 20px */
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.container-reviews:hover {
  transform: translateY(-3px); /* Diperkecil dari -5px */
  box-shadow: 0 4px 8px rgba(255, 150, 180, 0.5); /* Diperkecil dari 0 6px 10px */
}

.rating-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.rating-stars input {
  display: none;
}

.rating-stars label {
  font-size: 20px; /* Diperkecil dari 24px */
  color: rgba(
    255,
    220,
    230,
    0.7
  ); /* Pink sangat lembut untuk bintang default */
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label {
  color: #ffb300; /* Warna emas tetap untuk rating */
}

.rating-stars label:active {
  transform: scale(1.1); /* Diperkecil dari 1.2 */
}

button {
  background-color: rgba(255, 180, 200, 0.8); /* Pink cerah untuk tombol */
  color: #fff;
  border: none;
  padding: 8px 15px; /* Diperkecil dari 10px 20px */
  border-radius: 4px; /* Diperkecil dari 5px */
  cursor: pointer;
  font-size: 14px; /* Diperkecil dari 16px */
  transition: background-color 0.3s ease, transform 0.2s ease;
  animation: popIn 0.4s ease-out;
}

@keyframes popIn {
  from {
    transform: scale(0.9); /* Diperkecil dari 0.8 */
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

button:hover {
  background-color: rgba(255, 150, 180, 0.9); /* Pink lebih gelap saat hover */
}

button:active {
  transform: scale(0.97); /* Diperkecil dari 0.95 */
}

.review-list {
  margin-top: 15px; /* Diperkecil dari 20px */
  max-height: 250px; /* Diperkecil dari 300px */
  overflow-y: auto;
  border: 0.8px solid rgba(255, 180, 200, 0.7); /* Diperkecil dari 1px */
  padding: 8px; /* Diperkecil dari 10px */
  background-color: #ffffff;
  border-radius: 4px; /* Diperkecil dari 5px */
}

.review-list::-webkit-scrollbar {
  width: 6px; /* Diperkecil dari 8px */
}

.review-list::-webkit-scrollbar-track {
  background: rgba(255, 230, 240, 0.7);
  border-radius: 4px; /* Diperkecil dari 5px */
}

.review-list::-webkit-scrollbar-thumb {
  background: rgba(255, 180, 200, 0.8);
  border-radius: 4px; /* Diperkecil dari 5px */
  border: 1.5px solid #ffffff; /* Diperkecil dari 2px */
}

.review-item {
  border: 0.8px solid rgba(255, 200, 215, 0.7); /* Diperkecil dari 1px */
  padding: 8px; /* Diperkecil dari 10px */
  margin-bottom: 8px; /* Diperkecil dari 10px */
  border-radius: 4px; /* Diperkecil dari 5px */
  background-color: rgba(255, 230, 240, 0.7);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  animation: fadeIn 0.5s ease-out;
}

.review-item:hover {
  box-shadow: 0 3px 6px rgba(255, 150, 180, 0.3); /* Diperkecil dari 0 4px 8px */
  transform: translateY(-3px); /* Diperkecil dari -5px */
}

.review-item .stars {
  color: #ffb300;
  font-size: 16px; /* Diperkecil dari 18px */
}

input[type="text"],
textarea {
  width: calc(100% - 16px); /* Diperkecil dari 20px */
  padding: 8px; /* Diperkecil dari 10px */
  border: 0.8px solid rgba(255, 180, 200, 0.7); /* Diperkecil dari 1px */
  border-radius: 4px; /* Diperkecil dari 5px */
  outline: none;
  transition: border-color 0.3s ease;
  font-size: 13px; /* Menambahkan pengurangan ukuran font */
}

input[type="text"]:focus,
textarea:focus {
  border-color: rgba(255, 150, 180, 0.9);
}

textarea {
  resize: vertical;
}

.review-item {
  border: 0.8px solid #ddd; /* Diperkecil dari 1px */
  border-radius: 6px; /* Diperkecil dari 8px */
  padding: 12px; /* Diperkecil dari 15px */
  margin-bottom: 12px; /* Diperkecil dari 15px */
  word-wrap: break-word;
  overflow: hidden;
  box-sizing: border-box;
}

.review-item strong {
  font-size: 14px; /* Diperkecil dari 16px */
  color: #333;
}

.review-item p {
  margin: 8px 0 4px; /* Diperkecil dari 10px 0 5px */
  font-size: 12px; /* Diperkecil dari 14px */
  color: #555;
}

.review-item small {
  color: #aaa;
  font-size: 10px; /* Diperkecil dari 12px */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .container-reviews {
    max-width: 90%;
    padding: 12px;
    margin: 10px auto;
  }
  .rating-stars label {
    font-size: 18px;
  }
  button {
    padding: 7px 12px;
    font-size: 12px;
  }
  .review-list {
    max-height: 200px;
    padding: 6px;
  }
  .review-item {
    padding: 10px;
    margin-bottom: 10px;
  }
  .review-item strong {
    font-size: 13px;
  }
  .review-item p {
    font-size: 11px;
  }
  .review-item small {
    font-size: 9px;
  }
  input[type="text"],
  textarea {
    width: calc(100% - 12px);
    padding: 6px;
    font-size: 11px;
  }
}

/* Responsive adjustments for very small screens (phones) */
@media (max-width: 480px) {
  .container-reviews {
    max-width: 95%;
    padding: 8px;
    margin: 8px auto;
  }
  .rating-stars label {
    font-size: 16px;
  }
  button {
    padding: 5px 10px;
    font-size: 10px;
  }
  .review-list {
    max-height: 150px;
    padding: 4px;
  }
  .review-item {
    padding: 8px;
    margin-bottom: 8px;
  }
  .review-item strong {
    font-size: 12px;
  }
  .review-item p {
    font-size: 10px;
  }
  .review-item small {
    font-size: 8px;
  }
  input[type="text"],
  textarea {
    width: calc(100% - 8px);
    padding: 4px;
    font-size: 10px;
  }
}

/* Dark Glassmorphism Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0.8em 1.5em; /* Diperkecil dari 1em 2em */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10001;
  backdrop-filter: blur(8px); /* Diperkecil dari 10px */
  background: rgba(255, 209, 220, 0.7);
  border-top: 0.8px solid rgba(255, 255, 255, 0.2); /* Diperkecil dari 1px */
  color: rgba(0, 0, 0, 0.801);
  box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.1); /* Diperkecil dari 0 -4px 30px */
}

.cookie-banner a {
  color: #ffa500;
  text-decoration: underline;
}

.cookie-buttons button {
  margin-left: 8px; /* Diperkecil dari 10px */
  padding: 0.4em 0.8em; /* Diperkecil dari 0.5em 1em */
  cursor: pointer;
  border: none;
  border-radius: 20px; /* Diperkecil dari 25px */
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 255, 255, 0.2); /* Diperkecil dari 0 4px 15px */
}

#accept-all {
  background: rgba(0, 255, 170, 0.4);
  color: rgba(0, 0, 0, 0.801);
  border: 0.8px solid rgba(0, 255, 170, 0.5); /* Diperkecil dari 1px */
}

#cookie-settings {
  background: rgba(0, 140, 255, 0.4);
  color: rgba(0, 0, 0, 0.801);
  border: 0.8px solid rgba(0, 140, 255, 0.5); /* Diperkecil dari 1px */
}

/* Cookie Modal */
.cookie-modal {
  position: fixed;
  bottom: 60px; /* Diperkecil dari 80px */
  right: 15px; /* Diperkecil dari 20px */
  padding: 1em; /* Diperkecil dari 1.5em */
  background: rgba(255, 192, 203, 0.712); /* Changed to light pink */
  border-radius: 12px; /* Diperkecil dari 15px */
  backdrop-filter: blur(8px); /* Diperkecil dari 10px */
  border: 0.8px solid rgba(255, 255, 255, 0.25); /* Diperkecil dari 1px */
  color: rgba(0, 0, 0, 0.801);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); /* Diperkecil dari 0 0 20px */
  z-index: 10000;
  width: 250px; /* Diperkecil dari 300px */
  opacity: 0;
  transform: translateY(20px); /* Diperkecil dari 30px */
  transition: all 0.4s ease;
}

/* Styling for the "Simpan" (Save) button */
#save-preferences {
  background-color: rgba(0, 170, 85, 0.6); /* A shade of green */
  color: rgba(255, 255, 255, 0.9); /* White text for contrast */
  border: 0.8px solid rgba(0, 170, 85, 0.7); /* Diperkecil dari 1px */
  padding: 0.3em 0.8em; /* Diperkecil dari 0.4em 1em */
  border-radius: 15px; /* Diperkecil dari 20px */
  cursor: pointer;
  margin-top: 8px; /* Diperkecil dari 10px */
  margin-right: 4px; /* Diperkecil dari 5px */
}

/* Styling for the "Tutup" (Close) button */
#close-modal {
  background-color: rgba(255, 69, 0, 0.6); /* A shade of red */
  color: rgba(255, 255, 255, 0.9); /* White text for contrast */
  border: 0.8px solid rgba(255, 69, 0, 0.7); /* Diperkecil dari 1px */
  padding: 0.3em 0.8em; /* Diperkecil dari 0.4em 1em */
  border-radius: 15px; /* Diperkecil dari 20px */
  cursor: pointer;
  margin-top: 8px; /* Diperkecil dari 10px */
  margin-right: 4px; /* Diperkecil dari 5px */
}

/* Ensure general modal button styles don't override these specific ones */
.cookie-modal button {
  background-color: transparent;
  margin-top: 8px; /* Diperkecil dari 10px */
  margin-right: 4px; /* Diperkecil dari 5px */
  padding: 0.3em 0.8em; /* Diperkecil dari 0.4em 1em */
  border-radius: 15px; /* Diperkecil dari 20px */
  border: none;
  color: rgba(0, 0, 0, 0.801);
  cursor: pointer;
}

.cookie-modal.show {
  opacity: 1;
  transform: translateY(0);
}

.cookie-modal.hidden {
  display: none;
}

.cookie-modal .drag-bar {
  width: 100%;
  height: 6px; /* Diperkecil dari 8px */
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px; /* Diperkecil dari 4px */
  margin-bottom: 8px; /* Diperkecil dari 10px */
  cursor: move;
}

.cookie-modal label {
  display: block;
  margin-bottom: 6px; /* Diperkecil dari 8px */
  font-size: 0.9em; /* Menambahkan pengurangan ukuran font */
}

.cookie-modal button {
  margin-top: 8px; /* Diperkecil dari 10px */
  margin-right: 4px; /* Diperkecil dari 5px */
  padding: 0.3em 0.8em; /* Diperkecil dari 0.4em 1em */
  border-radius: 15px; /* Diperkecil dari 20px */
  border: none;
  background-color: rgba(0, 200, 255, 0.3);
  color: rgba(0, 0, 0, 0.801);
  cursor: pointer;
  font-size: 0.9em; /* Menambahkan pengurangan ukuran font */
}

/* Responsive Design */
@media (max-width: 1200px) {
  /* For larger tablets and small laptops */
  .cookie-banner {
    padding: 0.8em 1em; /* Diperkecil dari 1em 1.5em */
    flex-direction: column;
    align-items: center;
    bottom: 0;
  }

  .cookie-buttons button {
    margin-left: 0;
    margin-top: 8px; /* Diperkecil dari 10px */
  }

  .cookie-modal {
    width: 75%; /* Diperkecil dari 80% */
    bottom: 80px; /* Diperkecil dari 100px */
    right: 12.5%; /* Disesuaikan agar tetap di tengah */
  }
}

@media (max-width: 768px) {
  /* Adjusting position for smaller screens */
  .cookie-banner {
    padding: 0.6em; /* Diperkecil dari 1em */
    flex-direction: column;
    align-items: center;
    bottom: 0;
  }

  .cookie-buttons button {
    margin-left: 0;
    margin-top: 8px; /* Diperkecil dari 10px */
  }

  .cookie-modal {
    width: 85%; /* Diperkecil dari 90% */
    bottom: 80px; /* Diperkecil dari 100px */
    right: 7.5%; /* Disesuaikan agar tetap di tengah */
  }
}

@media (max-width: 480px) {
  /* Adjust layout for very small screens (mobile) */
  .cookie-banner {
    padding: 0.6em; /* Diperkecil dari 0.8em */
    flex-direction: column;
    align-items: center;
  }

  .cookie-buttons button {
    padding: 0.3em 0.8em; /* Diperkecil dari 0.4em 1em */
  }

  .cookie-modal {
    width: 75%; /* Diperkecil dari 80% */
    bottom: 60px; /* Diperkecil dari 80px */
    right: 12.5%; /* Disesuaikan agar tetap di tengah */
    padding: 0.8em; /* Diperkecil dari 1em */
  }
}

/* Widget Container */
.visitor-dashboard {
  position: fixed;
  bottom: 140px; /* Diperkecil dari 160px */
  left: 8px; /* Diperkecil dari 10px */
  display: flex;
  flex-direction: column;
  gap: 4px; /* Diperkecil dari 6px */
  background-color: rgba(255, 209, 220, 0.7);
  padding: 8px; /* Diperkecil dari 10px */
  border-radius: 10px; /* Diperkecil dari 12px */
  backdrop-filter: blur(5px); /* Diperkecil dari 6px */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Diperkecil dari 0 3px 8px */
  z-index: 9998;
  max-width: 120px; /* Diperkecil dari 150px */
  color: #000000;
  animation: fadeIn 0.5s ease;
  top: auto;
}

.visitor-heading {
  font-size: 12px; /* Diperkecil dari 14px */
  font-weight: bold;
  color: #000000;
  text-align: center;
  margin-bottom: 4px; /* Diperkecil dari 5px */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 2px; /* Diperkecil dari 3px */
}

.visitor-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px; /* Diperkecil dari 10px */
  padding: 5px; /* Diperkecil dari 6px */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
  color: #000000;
  min-width: 100px; /* Diperkecil dari 120px */
}

.visitor-card:hover {
  transform: translateY(-1px); /* Diperkecil dari -1.5px */
}

.visitor-icon {
  font-size: 14px; /* Diperkecil dari 16px */
  margin-bottom: 2px; /* Diperkecil dari 3px */
}

.visitor-title {
  font-size: 10px; /* Diperkecil dari 11px */
  font-weight: 600;
  margin-bottom: 0.5px; /* Diperkecil dari 1px */
  text-align: center;
}

.visitor-value {
  font-size: 12px; /* Diperkecil dari 14px */
  font-weight: bold;
  text-align: center;
}

.weekly .visitor-value {
  color: #007e33;
}
.monthly .visitor-value {
  color: #01579b;
}
.yearly .visitor-value {
  color: #e65100;
}
.total .visitor-value {
  color: #6a1b9a;
}

#showVisitorBtn {
  position: fixed;
  left: 10px; /* Diperkecil dari 15px */
  bottom: 10px; /* Diperkecil dari 15px */
  padding: 5px 10px; /* Diperkecil dari 6px 12px */
  font-size: 10px; /* Diperkecil dari 12px */
  background: #a8cff8;
  color: #000000;
  border: none;
  border-radius: 10px; /* Diperkecil dari 12px */
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Diperkecil dari 0 3px 8px */
  opacity: 0.8;
  display: none;
  transition: opacity 0.3s ease;
}

#showVisitorBtn:hover {
  opacity: 1;
}

.visitor-close-btn {
  position: absolute;
  top: 4px; /* Diperkecil dari 5px */
  right: 5px; /* Diperkecil dari 6px */
  background: transparent;
  border: none;
  color: #000000;
  font-size: 12px; /* Diperkecil dari 14px */
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 16px; /* Diperkecil dari 18px */
  height: 16px; /* Diperkecil dari 18px */
  text-align: center;
  user-select: none;
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  } /* Diperkecil dari 8px */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  } /* Diperkecil dari 8px */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE UNTUK HP BIASA ===== */
@media (max-width: 480px) {
  .visitor-dashboard {
    bottom: 130px; /* Diperkecil dari 150px */
    left: 5px; /* Diperkecil dari 6px */
    padding: 4px; /* Diperkecil dari 5px */
    gap: 2px; /* Diperkecil dari 3px */
    max-width: 80px; /* Diperkecil dari 100px */
  }

  .visitor-heading {
    font-size: 9px; /* Diperkecil dari 10px */
  }

  .visitor-card {
    min-width: 60px; /* Diperkecil dari 80px */
    padding: 2px; /* Diperkecil dari 3px */
  }

  .visitor-icon {
    font-size: 9px; /* Diperkecil dari 10px */
  }

  .visitor-title {
    font-size: 7px; /* Diperkecil dari 8px */
  }

  .visitor-value {
    font-size: 9px; /* Diperkecil dari 10px */
  }

  #showVisitorBtn {
    font-size: 9px; /* Diperkecil dari 10px */
    padding: 4px 6px; /* Diperkecil dari 5px 7px */
    bottom: 8px; /* Diperkecil dari 12px */
  }
}

/* ===== TAMBAHAN UNTUK HP SUPER KECIL < 360px ===== */
@media (max-width: 360px) {
  .visitor-dashboard {
    max-width: 70px; /* Diperkecil dari 90px */
    gap: 1px; /* Diperkecil dari 2px */
    padding: 2px; /* Diperkecil dari 3px */
  }

  .visitor-heading {
    font-size: 8px; /* Diperkecil dari 9px */
  }

  .visitor-card {
    min-width: 50px; /* Diperkecil dari 70px */
    padding: 1px; /* Diperkecil dari 2px */
  }

  .visitor-icon {
    font-size: 8px; /* Diperkecil dari 9px */
  }

  .visitor-title {
    font-size: 6px; /* Diperkecil dari 7px */
  }

  .visitor-value {
    font-size: 8px; /* Diperkecil dari 9px */
  }

  #showVisitorBtn {
    font-size: 8px; /* Diperkecil dari 9px */
    padding: 2px 4px; /* Diperkecil dari 3px 5px */
    bottom: 6px; /* Diperkecil dari 10px */
  }
}

/* Scroll to Top Button Styles */
/* Scroll to Top Button */
/* Tombol utama */
#scrollToTopBtn {
  position: fixed;
  bottom: 80px; /* Diperkecil dari 90px */
  right: 30px; /* Diperkecil dari 40px */
  z-index: 100;
  display: none; /* Keep this as `none` for JavaScript control */

  background-color: rgba(255, 209, 220, 0.7); /* Pink muda */
  color: #4a4a4a; /* Ganti warna teks/ikon agar lebih kontras dengan pink */
  border: none;
  outline: none;
  width: 50px; /* Diperkecil dari 60px */
  height: 50px; /* Diperkecil dari 60px */
  border-radius: 50%;
  font-size: 25px; /* Diperkecil dari 30px */
  cursor: pointer;
  /* Sesuaikan box-shadow dengan nuansa pink */
  box-shadow: 0 3px 10px rgba(255, 150, 180, 0.5); /* Diperkecil */
  transition: all 0.3s ease;

  display: flex; /* Override display: none for showing the button */
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 0;
}

#scrollToTopBtn:hover {
  background-color: rgba(255, 180, 200, 0.8); /* Pink lebih gelap saat hover */
  transform: scale(1.05); /* Diperkecil dari 1.1 */
  /* Sesuaikan box-shadow saat hover */
  box-shadow: 0 0 20px rgba(255, 150, 180, 0.8),
    0 0 40px rgba(255, 150, 180, 0.6); /* Diperkecil */
  animation: pulse-pink 1s infinite alternate; /* Ganti nama animasi */
}

@keyframes pulse-pink {
  /* Ganti nama keyframes */
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 150, 180, 0.5),
      0 0 20px rgba(255, 150, 180, 0.4); /* Diperkecil */
  }
  100% {
    transform: scale(1.05); /* Diperkecil dari 1.1 */
    box-shadow: 0 0 20px rgba(255, 150, 180, 0.8),
      0 0 40px rgba(255, 150, 180, 0.6); /* Diperkecil */
  }
}
/* ========== RESPONSIVE ========== */

/* Tablet */
@media (max-width: 992px) {
  #scrollToTopBtn {
    right: 25px; /* Diperkecil dari 30px */
    bottom: 110px; /* Diperkecil dari 120px */
    width: 45px; /* Diperkecil dari 55px */
    height: 45px; /* Diperkecil dari 55px */
    font-size: 22px; /* Diperkecil dari 26px */
  }
}

/* HP besar */
@media (max-width: 768px) {
  #scrollToTopBtn {
    right: 18px; /* Diperkecil dari 20px */
    bottom: 150px; /* Diperkecil dari 160px */
    width: 40px; /* Diperkecil dari 50px */
    height: 40px; /* Diperkecil dari 50px */
    font-size: 20px; /* Diperkecil dari 24px */
  }
}

/* HP kecil */
@media (max-width: 480px) {
  #scrollToTopBtn {
    right: 12px; /* Diperkecil dari 15px */
    bottom: 180px; /* Diperkecil dari 190px */
    width: 35px; /* Diperkecil dari 45px */
    height: 35px; /* Diperkecil dari 45px */
    font-size: 18px; /* Diperkecil dari 22px */
  }
}

/* HP sangat kecil (misal iPhone SE) */
@media (max-width: 360px) {
  #scrollToTopBtn {
    bottom: 200px; /* Diperkecil dari 210px */
    right: 8px; /* Diperkecil dari 10px */
    width: 30px; /* Diperkecil dari 40px */
    height: 30px; /* Diperkecil dari 40px */
    font-size: 16px; /* Diperkecil dari 20px */
  }
}

/* konten berita start */
.informasi-terbaru {
  padding: 10px 15px; /* Reduced padding */
  background: #fdfdfd;
  text-align: center;
}

.informasi-terbaru h2 {
  font-size: 24px; /* Reduced font size */
  font-weight: bold;
  margin-bottom: 20px; /* Reduced margin */
  border-bottom: 1px solid black; /* Reduced border thickness */
  display: inline-block;
  padding-bottom: 3px; /* Reduced padding */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Slightly softer shadow */
}

.card-containerku {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px; /* Reduced gap */
  max-width: 1200px; /* Reduced max-width */
  margin: 0 auto;
}

.info-card {
  background: white;
  border-radius: 6px; /* Reduced border-radius */
  width: 250px; /* Reduced width */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); /* Reduced shadow */
  padding-bottom: 15px; /* Reduced padding */
  transition: transform 0.3s ease;
}
.info-card:hover {
  transform: translateY(-3px); /* Slightly less pronounced hover effect */
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2); /* Reduced hover shadow */
}

.info-card img {
  width: 100%;
  height: 150px; /* Reduced height */
  object-fit: cover;
  border-radius: 6px 6px 0 0; /* Reduced border-radius */
  transition: transform 0.3s ease;
}

.info-card:hover img {
  transform: scale(1.03); /* Slightly less pronounced zoom */
}

.info-meta {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px; /* Reduced padding */
  font-size: 11px; /* Reduced font size */
  color: #555;
}
.info-meta span {
  display: flex;
  align-items: center;
  gap: 3px; /* Reduced gap */
}

.info-card h3 {
  font-size: 14px; /* Reduced font size */
  font-weight: 600;
  color: #111;
  padding: 0 12px; /* Reduced padding */
  margin: 8px 0; /* Reduced margin */
  text-align: left;
}
.btn-selengkapnya {
  display: inline-block;
  margin: 0 12px; /* Reduced margin */
  padding: 6px 14px; /* Reduced padding */
  border: 1px solid #111;
  color: #111;
  text-decoration: none;
  border-radius: 15px; /* Reduced border-radius */
  font-size: 11px; /* Reduced font size */
  position: relative;
  overflow: hidden;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-selengkapnya:hover {
  background-color: #111;
  color: white;
}

.pagination1 {
  margin-top: 20px; /* Reduced margin */
  display: flex;
  justify-content: center;
  gap: 8px; /* Reduced gap */
}

.pagination1 a {
  padding: 6px 10px; /* Reduced padding */
  border: 1px solid #111;
  border-radius: 4px; /* Reduced border-radius */
  text-decoration: none;
  color: #111;
  font-weight: bold;
  transition: all 0.3s ease;
}

.pagination1 a:hover,
.pagination1 a.active {
  background-color: #111;
  color: white;
}

/* Efek Fade-in saat scroll */
.fade-in {
  opacity: 0;
  transform: translateY(15px); /* Reduced translateY */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Slightly faster transition */
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Lazy Loading Gambar */
.lazy-load {
  opacity: 0;
  transition: opacity 0.5s ease-out; /* Slightly faster transition */
}

.lazy-load.loaded {
  opacity: 1;
}

/*detail- berita */
.detail-berita {
  width: 100%;
  max-width: 800px; /* Max width for readability */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Berita Frame */
.berita-frame {
  background-color: #ffffff; /* Keep white for content contrast */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(255, 192, 203, 0.3); /* Pinkish shadow */
  padding: 30px;
  overflow: hidden; /* Clear floats for images inside */
}

/* Judul Berita */
.berita-frame h2 {
  font-size: 2.2em;
  color: #c2185b; /* Darker pink/berry for heading */
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
}

/* Gambar Berita */
.berita-gambar {
  width: 100%;
  max-height: 450px; /* Limit image height */
  object-fit: cover; /* Cover the area, crop if necessary */
  border-radius: 8px;
  margin-bottom: 25px;
  display: block; /* Remove extra space below image */
  box-shadow: 0 2px 10px rgba(255, 192, 203, 0.2); /* Pinkish shadow */
}

/* Isi Berita */
.berita-isi {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 30px;
  text-align: justify;
}

.berita-isi p {
  margin-bottom: 1em;
}

.berita-isi img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 15px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 192, 203, 0.1); /* Pinkish shadow */
}

/* Meta Informasi */
.info-meta {
  display: flex;
  justify-content: center; /* Center align meta info */
  gap: 20px;
  font-size: 0.95em;
  color: #888; /* Slightly softer grey */
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ffe0e6; /* Light pink border */
}

.info-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tombol Kembali */
.btn-kembali {
  display: block;
  width: fit-content;
  margin: 30px auto 0 auto; /* Center the button */
  padding: 12px 25px;
  background-color: #ff69b4; /* Hot pink for button */
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4); /* Pink button shadow */
  text-align: center;
}

.btn-kembali:hover {
  background-color: #e0529a; /* Slightly darker pink on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 105, 180, 0.5); /* More prominent shadow on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  body {
    padding: 15px;
  }

  .berita-frame {
    padding: 20px;
  }

  .berita-frame h2 {
    font-size: 1.8em;
  }

  .berita-gambar {
    max-height: 300px;
  }

  .berita-isi {
    font-size: 1em;
  }

  .info-meta {
    flex-direction: column; /* Stack meta info on small screens */
    align-items: center;
    gap: 10px;
  }

  .btn-kembali {
    width: 90%; /* Make button wider on small screens */
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }

  .berita-frame {
    padding: 15px;
  }

  .berita-frame h2 {
    font-size: 1.5em;
  }

  .berita-gambar {
    max-height: 200px;
  }
}

/* konten berita ends */

/* Children Data Section Styling */
.children-data-section {
  background-color: #f0f4f8; /* Light blue-gray background */
  padding: 30px 20px; /* Reduced from 60px 40px */
  text-align: center;
  margin: 25px auto; /* Reduced from 50px auto */
  max-width: 900px; /* Reduced from 1200px */
  border-radius: 8px; /* Slightly reduced from 10px */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Reduced from 0 4px 12px */
}

.children-data-section h2 {
  font-size: 2em; /* Reduced from 2.8em */
  margin-bottom: 15px; /* Reduced from 20px */
  color: #607d8b; /* Blue Grey */
}

.children-data-section > p {
  font-size: 1em; /* Reduced from 1.2em */
  line-height: 1.5; /* Slightly reduced from 1.6 */
  margin-bottom: 30px; /* Reduced from 40px */
  color: #555;
}

.children-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* Minmax reduced from 250px */
  gap: 15px; /* Reduced from 25px */
  justify-content: center;
}

.child-card {
  background-color: white;
  padding: 15px; /* Reduced from 20px */
  border-radius: 6px; /* Slightly reduced from 8px */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* Reduced from 0 2px 8px */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.child-card:hover {
  transform: translateY(-3px); /* Reduced from -5px */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Reduced from 0 6px 16px */
}

.child-card img {
  width: 90px; /* Reduced from 120px */
  height: 90px; /* Reduced from 120px */
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px; /* Reduced from 15px */
  border: 2px solid #ffcdd2; /* Changed border color to light pink */
}

.child-card h3 {
  font-size: 1.2em; /* Reduced from 1.4em */
  color: #d32f2f; /* Changed title color to a slightly darker red/pink */
  margin-bottom: 3px; /* Reduced from 5px */
}

.child-card p {
  font-size: 0.85em; /* Reduced from 0.95em */
  color: #666;
  margin-bottom: 3px; /* Reduced from 5px */
}

/* Pagination Styling */
.pagination2 {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pagination2 button {
  background-color: #f8bbd0; /* Soft Pink */
  color: #4a148c; /* Darker purple for text on pink */
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
}

.pagination2 button:hover {
  background-color: #f48fb1; /* Slightly darker pink on hover */
}

.pagination2 button.active {
  background-color: #e91e63; /* Brighter pink for active button */
  color: white; /* White text for active button */
  font-weight: bold;
}

.pagination2 button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* Schedule & Activities Section Styling */
.schedule-activities-section {
  background-color: #f0fdf0; /* Very light green background */
  padding: 30px 20px; /* Reduced from 60px 40px */
  text-align: center;
  margin: 25px auto; /* Reduced from 50px auto */
  max-width: 900px; /* Reduced from 1200px */
  border-radius: 8px; /* Reduced from 10px */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Reduced from 0 4px 12px */
}

.schedule-activities-section h2 {
  font-size: 2em; /* Reduced from 2.8em */
  margin-bottom: 15px; /* Reduced from 20px */
  color: #4caf50; /* Green */
}

.schedule-activities-section > p {
  font-size: 1em; /* Reduced from 1.2em */
  line-height: 1.5; /* Slightly reduced from 1.6 */
  margin-bottom: 25px; /* Reduced from 40px */
  color: #555;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  ); /* Minmax reduced from 300px */
  gap: 20px; /* Reduced from 30px */
  justify-content: center;
}

.day-schedule-card {
  background-color: white;
  padding: 20px; /* Reduced from 25px */
  border-radius: 6px; /* Reduced from 8px */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); /* Reduced from 0 2px 8px */
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.day-schedule-card:hover {
  transform: translateY(-3px); /* Reduced from -5px */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Reduced from 0 6px 16px */
}

.day-schedule-card h3 {
  text-align: center;
  font-size: 1.5em; /* Reduced from 1.8em */
  color: #3f51b5; /* Indigo */
  margin-top: 0;
  margin-bottom: 10px; /* Reduced from 15px */
  border-bottom: 1px solid #e0e0e0; /* Reduced from 2px */
  padding-bottom: 8px; /* Reduced from 10px */
}

.day-schedule-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.day-schedule-card ul li {
  margin-bottom: 8px; /* Reduced from 10px */
  font-size: 0.95em; /* Slightly reduced from 1em */
  color: #555;
  display: flex;
  align-items: flex-start;
}

.day-schedule-card ul li i {
  margin-right: 8px; /* Reduced from 10px */
  color: #4caf50;
  font-size: 1.1em; /* Slightly reduced from 1.2em */
  flex-shrink: 0;
  margin-top: 2px; /* Reduced from 3px */
}

/* Responsive Design */
@media (max-width: 768px) {
  .close-button {
    font-size: 30px;
    top: 10px;
    right: 20px;
  }

  .donation-section,
  .news-articles-section,
  .current-needs-section,
  .donation-reports-section,
  .children-data-section,
  .schedule-activities-section,
  .visitor-register-section,
  .visitor-calendar-section {
    padding: 40px 20px;
  }

  .donation-section h2,
  .news-articles-section h2,
  .current-needs-section h2,
  .donation-reports-section h2,
  .children-data-section h2,
  .schedule-activities-section h2,
  .visitor-register-section h2,
  .visitor-calendar-section h2 {
    font-size: 2em;
  }

  .donation-section p,
  .news-articles-section > p,
  .current-needs-section > p,
  .donation-reports-section > p,
  .children-data-section > p,
  .schedule-activities-section > p,
  .visitor-register-section p,
  .visitor-calendar-section > p {
    font-size: 1em;
  }

  .donation-card,
  .article-card,
  .need-item-card,
  .child-card,
  .day-schedule-card,
  .registration-form {
    width: 100%; /* Full width on small screens */
  }

  .report-table {
    min-width: unset; /* Allow table to shrink on very small screens */
  }

  .calendar-grid .day-cell {
    min-height: 50px;
  }
}

@media (max-width: 480px) {
  .gallery-container {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .gallery-item img {
    height: 180px;
  }
}

/* Gallery Container */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 40px;
  max-width: 1200px;
  margin: 30px auto;
  background-color: white;
}

/* Gallery Item */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff; /* White background for items */
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 100%;
  height: 200px; /* Fixed size for thumbnail */
  object-fit: cover; /* Ensures the image fills the area without distortion */
  display: block;
  border-radius: 8px 8px 0 0; /* Rounded top corners */
}

/* Overlay Effect */
.gallery-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  text-align: center;
  border-radius: 0 0 8px 8px; /* Rounded bottom corners */
}

.gallery-item:hover .overlay {
  transform: translateY(0);
}

.gallery-item .overlay p {
  margin: 0;
  font-size: 0.9em;
  font-weight: bold;
}
/* Pagination Styling */
/* Pagination Styling */
.pagination-gallery {
  display: flex;
  justify-content: center; /* This is the key change to center the content */
  align-items: center;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  max-width: 1200px;
  margin: 20px auto; /* This also helps center the block itself */
}

.pagination-gallery button {
  /* Changed class name here */
  background-color: #e91e63; /* Pink button */
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.pagination-gallery button:hover {
  /* Changed class name here */
  background-color: #c2185b; /* Darker pink on hover */
  transform: translateY(-2px);
}

.pagination-gallery button:disabled {
  /* Changed class name here */
  background-color: #f06292; /* Lighter pink when disabled */
  cursor: not-allowed;
  transform: none;
}

.pagination-gallery .page-info {
  /* Changed class name here */
  font-size: 1.1em;
  color: #e91e63; /* Pink text for page info */
  font-weight: bold;
}
/* Lightbox Styling */
.lightbox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
  animation: zoomIn 0.3s ease-out; /* Zoom in animation */
}

.close-button {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.caption {
  margin-top: 15px;
  text-align: center;
  color: #ccc;
  font-size: 18px;
  padding: 8px 12px;
}

/* Animations */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Styling Bagian Staf */
.staff-section {
  padding: 40px 30px;
  max-width: 1100px;
  margin: 40px auto;
  background-color: rgba(255, 240, 245, 0.8); /* Pink muda transparan */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Styling Kartu Bolak-balik (Flip Card) */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
  perspective: 1000px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 8px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  color: #333; /* Warna teks disesuaikan agar kontras dengan pink muda */
}

.flip-card-front {
  background-color: rgba(255, 192, 203, 0.85); /* Pink muda agak transparan */
  color: #333; /* Warna teks disesuaikan */
  justify-content: flex-start;
  padding-top: 30px;
}

.flip-card-front img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 3px solid rgba(255, 255, 255, 0.8);
}

.flip-card-front h3 {
  font-size: 1.5em;
  margin-bottom: 3px;
  font-weight: 600;
}

.flip-card-front p {
  font-size: 0.95em;
  font-weight: 400;
  margin-top: 0;
}

.flip-card-back {
  background-color: rgba(
    255,
    160,
    180,
    0.9
  ); /* Pink yang sedikit lebih gelap dan lebih pekat untuk belakang */
  color: #fff; /* Warna teks disesuaikan */
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.flip-card-back p {
  font-size: 0.95em;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 15px;
}

.flip-card-back .btn {
  background-color: #ffd700; /* Kuning keemasan untuk tombol agar kontras */
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.flip-card-back .btn:hover {
  background-color: #ffc107; /* Kuning sedikit lebih gelap saat hover */
}

/* Styling Modal Biodata */
.biodata-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); /* Overlay sedikit lebih transparan */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.biodata-modal.show {
  opacity: 1;
  display: flex;
}

.modal-content {
  background-color: rgba(
    255,
    255,
    255,
    0.95
  ); /* Putih transparan untuk konten modal */
  margin: auto;
  padding: 25px;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  transform: translateY(-40px);
  transition: transform 0.3s ease-out;
  color: #333;
  text-align: center;
}

.biodata-modal.show .modal-content {
  transform: translateY(0);
}

.modal-content .close-btn {
  color: #888; /* Warna tombol close disesuaikan */
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 26px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-content .close-btn:hover,
.modal-content .close-btn:focus {
  color: #555;
}

.modal-content img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px auto;
  border: 4px solid rgba(255, 160, 180, 0.8); /* Border gambar modal mengikuti pink yang lebih gelap */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.modal-content h3 {
  font-size: 1.8em;
  color: #ff69b4; /* Pink cerah untuk judul modal */
  margin-bottom: 8px;
  font-weight: 700;
}

.modal-content p {
  font-size: 1em;
  color: #555;
  line-height: 1.7;
  margin-bottom: 12px;
  text-align: left;
}

.modal-content .role-detail {
  font-size: 1.1em;
  color: #ff69b4; /* Pink cerah untuk peran modal */
  font-weight: 600;
  margin-bottom: 15px;
}

/* Pagination Styling  staff*/
.pagination-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  padding: 8px 0;
  background-color: rgba(255, 228, 235, 0.7); /* Pink sangat muda transparan */
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pagination-btn {
  background-color: rgba(
    255,
    192,
    203,
    0.6
  ); /* Pink muda transparan untuk tombol */
  color: #424242;
  padding: 8px 15px;
  border-radius: 50%;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 35px;
  height: 35px;
  font-size: 0.9em;
}

.pagination-btn:hover:not(.active) {
  background-color: rgba(
    255,
    160,
    180,
    0.7
  ); /* Pink agak gelap transparan saat hover */
  color: #fff;
  transform: scale(1.08);
}

.pagination-btn.active {
  background-color: #ff69b4; /* Pink cerah untuk tombol aktif */
  color: white;
  transform: scale(1.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pagination-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Penyesuaian Responsif untuk layar kecil */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.8em;
  }
  .staff-section h2 {
    font-size: 2em;
  }
  .staff-grid {
    padding: 15px;
    gap: 10px;
  }
  .flip-card {
    height: 280px;
  }
  .flip-card-front img {
    width: 90px;
    height: 90px;
  }
  .modal-content {
    width: 98%;
    padding: 15px;
  }
  .modal-content img {
    width: 100px;
    height: 100px;
  }
  .modal-content h3 {
    font-size: 1.6em;
  }
  .modal-content p {
    font-size: 0.9em;
  }
  .pagination-btn {
    padding: 6px 12px;
    min-width: 30px;
    height: 30px;
    font-size: 0.8em;
  }
}
/* program & Kegiatan startt */
.program-section {
  padding: 40px 20px; /* Diperkecil dari 60px 40px */
  max-width: 1180px; /* Diperkecil dari 1330px */
  margin: 30px auto; /* Diperkecil dari 50px auto */
  background-color: #ffffff;
  text-align: center;
}

.program-section h2 {
  text-align: center;
  font-size: 1.8rem; /* Diperkecil dari 2rem */
  margin-bottom: 2rem; /* Diperkecil dari 3rem */
  color: #d98fb3;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Diperkecil dari 1px 1px 3px */
}

.program-section h2 span {
  color: #0000009c;
}

/* --- Slider Program Styling --- */
.program-slider-container {
  position: relative;
  overflow: hidden;
  padding: 15px 0; /* Diperkecil dari 20px 0 */
}

.program-slider-track {
  display: flex;
  gap: 20px; /* Diperkecil dari 30px */
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
.program-slider-track::-webkit-scrollbar {
  display: none;
}

/* Make the track scrollable only if more cards than visible */
.program-slider-track.scrollable {
  overflow-x: scroll;
}

/* Cursor when dragging */
.program-slider-track.active-dragging {
  cursor: grabbing;
}

/* Flip Card Styling */
.flip-card1 {
  background-color: transparent;
  min-width: 250px; /* Diperkecil dari 300px */
  flex-shrink: 0;
  height: 300px; /* Diperkecil dari 350px */
  perspective: 900px; /* Diperkecil dari 1000px */
  border-radius: 8px; /* Diperkecil dari 10px */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Diperkecil dari 0 4px 8px */
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.flip-card1:hover {
  transform: translateY(-3px); /* Diperkecil dari -5px */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Diperkecil dari 0 8px 16px */
}

.flip-card-inner1 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 8px; /* Diperkecil dari 10px */
}

.flip-card1:hover .flip-card-inner1 {
  transform: rotateY(180deg);
}

.flip-card-front1,
.flip-card-back1 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px; /* Diperkecil dari 10px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px; /* Diperkecil dari 20px */
  box-sizing: border-box;
  color: white;
}

/* Multi-colored Front Cards */
.flip-card1:nth-of-type(1) .flip-card-front1 {
  background: linear-gradient(to bottom right, #ff6b6b, #ee4e4e);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(2) .flip-card-front1 {
  background: linear-gradient(to bottom right, #4ecdc4, #3cb3a0);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(3) .flip-card-front1 {
  background: linear-gradient(to bottom right, #45b7d1, #308fac);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(4) .flip-card-front1 {
  background: linear-gradient(to bottom right, #fed766, #fbbf24);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(5) .flip-card-front1 {
  background: linear-gradient(to bottom right, #ff9f1c, #e08500);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(6) .flip-card-front1 {
  background: linear-gradient(to bottom right, #2ecc71, #25a55f);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(7) .flip-card-front1 {
  background: linear-gradient(to bottom right, #9b59b6, #7b4c93);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card1:nth-of-type(8) .flip-card-front1 {
  background: linear-gradient(to bottom right, #3498db, #297cb8);
  justify-content: flex-start;
  padding-top: 30px; /* Diperkecil dari 40px */
}

.flip-card-front1 img {
  width: 100px; /* Diperkecil dari 150px */
  height: 100px; /* Diperkecil dari 150px */
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px; /* Diperkecil dari 20px */
  border: 3px solid rgba(255, 255, 255, 0.8); /* Diperkecil dari 4px */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Diperkecil dari 0 2px 8px */
}

.flip-card-front1 h3 {
  font-size: 1.5em; /* Diperkecil dari 1.8em */
  margin-bottom: 4px; /* Diperkecil dari 5px */
  font-weight: 600;
}

.flip-card-front1 p {
  font-size: 1em; /* Diperkecil dari 1.1em */
  font-weight: 400;
  margin-top: 0;
}

/* Multi-colored Back Cards */
.flip-card-back1 {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px; /* Diperkecil dari 25px */
}

.flip-card1:nth-of-type(1) .flip-card-back1 {
  background: linear-gradient(to top left, #ee4e4e, #cc3d3d);
  color: white;
}

.flip-card1:nth-of-type(2) .flip-card-back1 {
  background: linear-gradient(to top left, #3cb3a0, #2e8b7a);
  color: white;
}

.flip-card1:nth-of-type(3) .flip-card-back1 {
  background: linear-gradient(to top left, #308fac, #26718e);
  color: white;
}

.flip-card1:nth-of-type(4) .flip-card-back1 {
  background: linear-gradient(to top left, #fbbf24, #daa500);
  color: white;
}

.flip-card1:nth-of-type(5) .flip-card-back1 {
  background: linear-gradient(to top left, #e08500, #c27000);
  color: white;
}

.flip-card1:nth-of-type(6) .flip-card-back1 {
  background: linear-gradient(to top left, #25a55f, #1f8d4f);
  color: white;
}

.flip-card1:nth-of-type(7) .flip-card-back1 {
  background: linear-gradient(to top left, #7b4c93, #623d78);
  color: white;
}

.flip-card1:nth-of-type(8) .flip-card-back1 {
  background: linear-gradient(to top left, #297cb8, #20629a);
  color: white;
}

.flip-card-back1 p {
  font-size: 1em; /* Diperkecil dari 1.1em */
  line-height: 1.6; /* Diperkecil dari 1.7 */
  text-align: left;
  margin-bottom: 15px; /* Diperkecil dari 20px */
}

.flip-card-back1 .btn {
  background-color: #ffc107;
  color: #333;
  padding: 8px 15px; /* Diperkecil dari 10px 20px */
  border-radius: 4px; /* Diperkecil dari 5px */
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Diperkecil dari 0 2px 4px */
}

.flip-card-back1 .btn:hover {
  background-color: #ffa000;
  transform: scale(1.02); /* Diperkecil dari 1.05 */
}

/* Slider Navigation Buttons */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 131, 143, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px; /* Diperkecil dari 40px */
  height: 30px; /* Diperkecil dari 40px */
  font-size: 1.2em; /* Diperkecil dari 1.5em */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Diperkecil dari 0 2px 5px */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-nav-btn:hover {
  background-color: #00838f;
  transform: translateY(-50%) scale(1.05); /* Diperkecil dari 1.1 */
}

.slider-nav-btn.left {
  left: 15px; /* Diperkecil dari 20px */
}

.slider-nav-btn.right {
  right: 15px; /* Diperkecil dari 20px */
}

.slider-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translateY(-50%);
  background-color: rgba(0, 131, 143, 0.4);
}

/* Styling Modal Detail Program */
.program-detail-modal1 {
  display: none;
  position: fixed;
  z-index: 1500; /* Diperkecil dari 2000 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7); /* Diperkecil dari 0.8 */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.program-detail-modal1.show {
  opacity: 1;
  display: flex;
}

.modal-content1 {
  background-color: white;
  margin: auto;
  padding: 20px; /* Diperkecil dari 30px */
  border-radius: 10px; /* Diperkecil dari 12px */
  max-width: 500px; /* Diperkecil dari 600px */
  width: 85%; /* Diperkecil dari 90% */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* Diperkecil dari 0 8px 16px */
  position: relative;
  transform: translateY(-40px); /* Diperkecil dari -50px */
  transition: transform 0.3s ease-out;
  color: #333;
  text-align: center;
}

.program-detail-modal1.show .modal-content1 {
  transform: translateY(0);
}

.modal-content1 .close-btn {
  color: #aaa;
  position: absolute;
  top: 10px; /* Diperkecil dari 15px */
  right: 20px; /* Diperkecil dari 25px */
  font-size: 24px; /* Diperkecil dari 30px */
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-content1 .close-btn:hover,
.modal-content1 .close-btn:focus {
  color: #777;
}

.modal-content1 h3 {
  font-size: 1.8em; /* Diperkecil dari 2.2em */
  color: #00838f;
  margin-bottom: 8px; /* Diperkecil dari 10px */
  font-weight: 700;
}

.modal-content1 p {
  font-size: 1em; /* Diperkecil dari 1.1em */
  color: #555;
  line-height: 1.6; /* Diperkecil dari 1.8 */
  margin-bottom: 12px; /* Diperkecil dari 15px */
  text-align: left;
  white-space: pre-wrap;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.8em; /* Diperkecil dari 2em */
  }
  .program-section h2 {
    font-size: 1.8em; /* Diperkecil dari 2.2em */
  }
  .program-slider-container {
    padding: 15px 0; /* Diperkecil dari 20px 0 */
  }
  .flip-card1 {
    min-width: 200px; /* Diperkecil dari 250px */
    height: 250px; /* Diperkecil dari 300px */
  }
  .flip-card-front1 img {
    width: 90px; /* Diperkecil dari 120px */
    height: 90px; /* Diperkecil dari 120px */
    margin-bottom: 10px; /* Diperkecil dari 15px */
  }
  .flip-card-front1 h3 {
    font-size: 1.2em; /* Diperkecil dari 1.5em */
  }
  .flip-card-front1 p {
    font-size: 0.9em; /* Diperkecil dari 1em */
  }
  .flip-card-back1 p {
    font-size: 0.9em; /* Diperkecil dari 1em */
    margin-bottom: 10px; /* Diperkecil dari 15px */
  }
  .flip-card-back1 .btn {
    padding: 6px 12px; /* Diperkecil dari 8px 15px */
    font-size: 0.9em; /* Diperkecil dari 1em */
  }
  .modal-content1 {
    width: 90%; /* Diperkecil dari 95% */
    padding: 15px; /* Diperkecil dari 20px */
  }
  .modal-content1 h3 {
    font-size: 1.5em; /* Diperkecil dari 1.8em */
  }
  .modal-content1 p {
    font-size: 0.9em; /* Diperkecil dari 1em */
  }
  .slider-nav-btn {
    width: 28px; /* Diperkecil dari 35px */
    height: 28px; /* Diperkecil dari 35px */
    font-size: 1em; /* Diperkecil dari 1.2em */
  }
}

/* Tambahan untuk HP Super Kecil < 480px */
@media (max-width: 480px) {
  .program-section {
    padding: 30px 15px; /* Diperkecil */
    margin: 20px auto; /* Diperkecil */
  }
  .program-section h2 {
    font-size: 1.5rem; /* Diperkecil */
    margin-bottom: 1.5rem; /* Diperkecil */
  }
  .program-slider-container {
    padding: 10px 0; /* Diperkecil */
  }
  .program-slider-track {
    gap: 15px; /* Diperkecil */
  }
  .flip-card1 {
    min-width: 180px; /* Diperkecil */
    height: 220px; /* Diperkecil */
  }
  .flip-card-front1 img {
    width: 70px; /* Diperkecil */
    height: 70px; /* Diperkecil */
    margin-bottom: 8px; /* Diperkecil */
  }
  .flip-card-front1 h3 {
    font-size: 1.1em; /* Diperkecil */
  }
  .flip-card-front1 p {
    font-size: 0.8em; /* Diperkecil */
  }
  .flip-card-back1 {
    padding: 15px; /* Diperkecil */
  }
  .flip-card-back1 p {
    font-size: 0.8em; /* Diperkecil */
    line-height: 1.5; /* Disesuaikan */
    margin-bottom: 8px; /* Diperkecil */
  }
  .flip-card-back1 .btn {
    padding: 5px 10px; /* Diperkecil */
    font-size: 0.8em; /* Diperkecil */
  }
  .slider-nav-btn {
    width: 24px; /* Diperkecil */
    height: 24px; /* Diperkecil */
    font-size: 0.9em; /* Diperkecil */
    left: 10px; /* Diperkecil */
    right: 10px; /* Diperkecil */
  }
  .modal-content1 {
    padding: 12px; /* Diperkecil */
    max-width: 400px; /* Diperkecil */
  }
  .modal-content1 h3 {
    font-size: 1.3em; /* Diperkecil */
  }
  .modal-content1 p {
    font-size: 0.8em; /* Diperkecil */
    line-height: 1.5; /* Disesuaikan */
  }
  .modal-content1 .close-btn {
    font-size: 20px; /* Diperkecil */
    top: 8px; /* Diperkecil */
    right: 15px; /* Diperkecil */
  }
}

/* Tambahan untuk HP Super Kecil < 360px */
@media (max-width: 360px) {
  .program-section {
    padding: 20px 10px; /* Diperkecil */
    margin: 15px auto; /* Diperkecil */
  }
  .program-section h2 {
    font-size: 1.3rem; /* Diperkecil */
    margin-bottom: 1rem; /* Diperkecil */
  }
  .program-slider-container {
    padding: 8px 0; /* Diperkecil */
  }
  .program-slider-track {
    gap: 10px; /* Diperkecil */
  }
  .flip-card1 {
    min-width: 150px; /* Diperkecil */
    height: 180px; /* Diperkecil */
  }
  .flip-card-front1 img {
    width: 60px; /* Diperkecil */
    height: 60px; /* Diperkecil */
    margin-bottom: 6px; /* Diperkecil */
  }
  .flip-card-front1 h3 {
    font-size: 0.9em; /* Diperkecil */
  }
  .flip-card-front1 p {
    font-size: 0.7em; /* Diperkecil */
  }
  .flip-card-back1 {
    padding: 10px; /* Diperkecil */
  }
  .flip-card-back1 p {
    font-size: 0.7em; /* Diperkecil */
    line-height: 1.4; /* Disesuaikan */
    margin-bottom: 6px; /* Diperkecil */
  }
  .flip-card-back1 .btn {
    padding: 4px 8px; /* Diperkecil */
    font-size: 0.7em; /* Diperkecil */
  }
  .slider-nav-btn {
    width: 20px; /* Diperkecil */
    height: 20px; /* Diperkecil */
    font-size: 0.8em; /* Diperkecil */
    left: 5px; /* Diperkecil */
    right: 5px; /* Diperkecil */
  }
  .modal-content1 {
    padding: 10px; /* Diperkecil */
    max-width: 300px; /* Diperkecil */
  }
  .modal-content1 h3 {
    font-size: 1.1em; /* Diperkecil */
  }
  .modal-content1 p {
    font-size: 0.7em; /* Diperkecil */
    line-height: 1.4; /* Disesuaikan */
  }
  .modal-content1 .close-btn {
    font-size: 18px; /* Diperkecil */
    top: 6px; /* Diperkecil */
    right: 10px; /* Diperkecil */
  }
}

/* cara donasi start */
.container-donasi {
  max-width: 1000px; /* Reduced from 1325px */
  width: 90%; /* Slightly more conservative for mobile */
  background-color: #ffffff;
  border-radius: 1rem; /* Reduced from 1.5rem */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Softer shadow */
  padding: 2rem; /* Reduced from 2.5rem */
  margin: 80px auto; /* Reduced margin */
  border-top: 8px solid #6366f1; /* Reduced from 10px */
  position: relative;
  z-index: 10;
}

.container-donasi h1 {
  text-align: center;
  color: #000000;
  font-size: 2.2rem; /* Reduced from default h1 size */
}

.container-donasi p {
  color: gray;
  margin: 8px 0; /* Reduced margin */
  font-size: 0.95rem; /* Slightly smaller text */
}

.container-donasi span {
  color: red;
}

.donation-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* Reduced from 2rem */
}

.donation-card {
  background-color: #ffffff;
  border-radius: 1rem; /* Reduced from 1.25rem */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); /* Softer shadow */
  padding: 1.5rem; /* Reduced from 2rem */
  flex: 1 1 calc(25% - 2rem); /* Adjusted for 4 cards, considering new gap */
  min-width: 250px; /* Reduced min-width */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid transparent; /* Reduced from 8px */
}

.donation-card:hover {
  transform: translateY(-8px); /* Reduced lift */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); /* Softer hover shadow */
}

/* Specific card accents */
.card-bank {
  border-color: #3b82f6;
} /* Blue */
.card-e-wallet {
  border-color: #10b981;
} /* Green */
.card-direct {
  border-color: #f59e0b;
} /* Amber */
.card-items {
  border-color: #8b5cf6;
} /* Violet */
.card-bca {
  border-color: #007bff;
} /* BCA Blue */
.card-cimb {
  border-color: #800080;
} /* CIMB Purple */

/* Card title colors */
.donation-card h3 {
  text-align: center;
  font-size: 1.6rem; /* Reduced from 1.85rem */
  font-weight: 700; /* Slightly less bold */
  color: #1e293b;
  margin-bottom: 1rem; /* Reduced from 1.25rem */
}

/* Details sections */
.bank-details,
.e-wallet-options {
  background-color: #f8fafc; /* Lighter background */
  padding: 1rem; /* Reduced from 1.25rem */
  border-radius: 0.75rem; /* Reduced from 0.85rem */
  margin-top: 1rem; /* Reduced from 1.25rem */
  margin-bottom: 1.5rem; /* Reduced from 1.75rem */
  border: 1px solid #e2e8f0; /* Lighter border */
}

.bank-details p,
.e-wallet-options p {
  margin: 0.5rem 0; /* Reduced margin */
  font-weight: 500; /* Slightly less bold */
  color: #475569;
  font-size: 0.9rem; /* Slightly smaller text */
}

.bank-details strong,
.e-wallet-options strong {
  color: #334155;
}

/* Lists within donation cards */
.bank-details ul {
  list-style-type: disc;
  padding-left: 1.25rem; /* Reduced indentation */
  margin-top: 0.6rem; /* Reduced margin */
}

.bank-details ul li {
  margin-bottom: 0.4rem; /* Reduced margin */
  color: #475569;
  font-size: 0.9rem; /* Slightly smaller text */
}

/* Buttons (General style for all buttons) */
.button-donasi {
  background-color: #6366f1;
  color: white;
  padding: 0.8rem 1.6rem; /* Reduced padding */
  border-radius: 0.75rem; /* Reduced from 0.85rem */
  font-weight: 600; /* Slightly less bold */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.1s ease-in-out,
    box-shadow 0.3s ease-in-out;
  width: 100%;
  margin-top: auto;
  box-shadow: 0 3px 6px rgba(99, 102, 241, 0.25); /* Softer shadow */
}

.button-donasi:hover {
  background-color: #4f46e5;
  transform: translateY(-2px); /* Reduced lift */
  box-shadow: 0 5px 10px rgba(79, 70, 229, 0.35); /* Softer hover shadow */
}

.button-donasi:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.15);
}

/* Specific button colors for copy/toggle states */
.btn-success {
  background-color: #10b981;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
  background-color: #059669;
  box-shadow: 0 5px 10px rgba(5, 150, 105, 0.35);
}

.btn-warning {
  background-color: #ef4444;
  box-shadow: 0 3px 6px rgba(239, 68, 68, 0.25);
}

.btn-warning:hover {
  background-color: #dc2626;
  box-shadow: 0 5px 10px rgba(220, 38, 38, 0.35);
}

/* QR Code Container */
.qr-code-container {
  text-align: center;
  margin-top: 1.5rem; /* Reduced margin */
  padding: 1rem; /* Reduced padding */
  background-color: #f0fdf4;
  border-radius: 0.85rem; /* Reduced from 1rem */
  border: 1px dashed #a7f3d0; /* Reduced from 2px */
}

.qr-code-container img {
  max-width: 180px; /* Reduced from 200px */
  height: auto;
  border-radius: 0.6rem; /* Reduced from 0.75rem */
  border: 2px solid #6ee7b7; /* Reduced from 3px */
  padding: 0.25rem; /* Reduced from 0.35rem */
}

/* General text styles */
.intro-paragraph {
  color: #4b5563;
  font-size: 0.95rem; /* Added font size for consistency */
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  text-align: center; /* Pastikan ini ada */
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  max-width: 450px;
  width: 90%;
  text-align: center;
  position: relative;
  transform: translateY(15px);
  transition: transform 0.3s ease-in-out;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-content h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 0.8rem;
}

.modal-content p {
  font-size: 1rem;
  color: #4a5568;
  text-align: center; /* Tambahkan ini jika p tidak di tengah */
  margin-bottom: 1.2rem;
}

.modal-close-button {
  background-color: #6366f1;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  margin: 0 auto; /* Ini yang membuat tombol di tengah */
  display: inline-block;
}

.modal-close-button:hover {
  background-color: #4f46e5;
}

/* Specific modal for QR codes */
.qr-modal-content img {
  margin: 1.2rem auto 0.8rem; /* Reduced margin */
  display: block;
  border: 2px solid #6366f1; /* Reduced from 3px */
  border-radius: 0.6rem; /* Reduced from 0.75rem */
  padding: 0.4rem; /* Reduced from 0.5rem */
  max-width: 220px; /* Reduced from 250px */
}

.qr-modal-content .bank-name-qr {
  font-weight: 600; /* Slightly less bold */
  color: #1e293b;
  margin-top: 0.4rem; /* Reduced margin */
  font-size: 1.1rem; /* Reduced from 1.2rem */
}

/* Donation Form Styles */
.donation-form-section {
  background-color: #ffffff;
  border-radius: 1rem; /* Reduced from 1.5rem */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Softer shadow */
  padding: 2.5rem; /* Reduced from 3rem */
  margin-top: 3rem; /* Reduced margin */
  border-top: 6px solid #10b981; /* Reduced from 8px */
  display: none;
}

.donation-form-section h2 {
  font-size: 2rem; /* Reduced from 2.5rem */
  font-weight: 700; /* Slightly less bold */
  color: #059669;
  text-align: center;
  margin-bottom: 2rem; /* Reduced from 2.5rem */
}

.form-group {
  margin-bottom: 1.2rem; /* Reduced margin */
}

.form-group label {
  display: block;
  font-weight: 500; /* Slightly less bold */
  color: #334155;
  margin-bottom: 0.5rem; /* Reduced margin */
  font-size: 1rem; /* Reduced from 1.1rem */
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="file"],
.form-group select,
.form-group input.nominal-input {
  /* Combined with nominal-input */
  width: 100%;
  padding: 0.7rem 0.9rem; /* Reduced padding */
  border: 1px solid #cbd5e0; /* Reduced from 2px */
  border-radius: 0.6rem; /* Reduced from 0.75rem */
  font-size: 0.95rem; /* Reduced from 1rem */
  color: #475569;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="file"]:focus,
.form-group select:focus,
.form-group input.nominal-input:focus {
  /* Combined with nominal-input */
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15); /* Softer shadow */
}

.form-checkbox {
  display: flex;
  align-items: center;
  margin-top: 1.5rem; /* Reduced margin */
  margin-bottom: 1.5rem; /* Reduced margin */
}

.form-checkbox input[type="checkbox"] {
  margin-right: 0.6rem; /* Reduced margin */
  width: 1.1rem; /* Reduced from 1.25rem */
  height: 1.1rem; /* Reduced from 1.25rem */
  border-radius: 0.2rem; /* Reduced from 0.25rem */
  border: 1px solid #94a3b8; /* Reduced from 2px */
  accent-color: #6366f1;
  cursor: pointer;
}

.form-checkbox label {
  font-weight: 400; /* Slightly less bold */
  color: #475569;
  cursor: pointer;
  font-size: 0.9rem; /* Added font size */
}

.submit-button-donasi {
  background-color: #6366f1;
  color: white;
  margin-top: 25px; /* Reduced margin */
  padding: 0.8rem 2rem; /* Adjusted padding, fixed 'rem' typo */
  border-radius: 0.75rem; /* Reduced from 0.85rem */
  font-weight: 600; /* Slightly less bold */
  font-size: 1.1rem; /* Reduced from 1.2rem */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, transform 0.1s ease-in-out,
    box-shadow 0.3s ease-in-out;
  width: 100%;
  box-shadow: 0 3px 6px rgba(99, 102, 241, 0.25);
}

.submit-button-donasi:hover:not(:disabled) {
  background-color: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(79, 70, 229, 0.35);
}

.submit-button-donasi:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: translateY(0);
}

.transfer-details-group,
.e-wallet-details-group {
  display: none;
}

/* Media query for responsive grid */
@media (max-width: 1024px) {
  .donation-cards-grid {
    gap: 1rem; /* Reduced from 1.5rem */
  }
  .donation-card {
    flex: 1 1 calc(50% - 1rem); /* Adjusted for 2 cards, considering new gap */
  }
  .donation-card h3 {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.4rem; /* Reduced from 1.6rem */
  }
  .container-donasi {
    padding: 1.5rem; /* Reduced from 2rem */
  }
  .donation-form-section {
    padding: 1.5rem; /* Reduced from 2rem */
  }
  .donation-form-section h2 {
    font-size: 1.8rem; /* Reduced from 2.2rem */
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 0.5rem; /* Reduced padding */
    padding-bottom: 0.5rem; /* Reduced padding */
    align-items: flex-start;
  }
  .container-donasi {
    padding: 1rem; /* Reduced from 1.5rem */
    margin: 0 auto;
    width: 98%;
  }
  .donation-cards-grid {
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Reduced from 1.5rem */
  }
  .donation-card {
    flex: 1 1 90%;
    padding: 1.2rem; /* Reduced from 1.75rem */
    width: 100%;
  }
  .donation-card h3 {
    font-size: 1.3rem; /* Reduced from 1.6rem */
  }
  .button-donasi {
    padding: 0.7rem 1.4rem; /* Reduced padding */
  }
  .donation-form-section {
    padding: 1rem; /* Reduced from 1.5rem */
  }
  .donation-form-section h2 {
    font-size: 1.6rem; /* Reduced from 1.8rem */
  }
}

/* kebutuhan terkini */
.needs-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem; /* Diperkecil dari 1.5rem */
}
.needs-item {
  background-color: #ebf8ff;
  padding: 0.8rem; /* Diperkecil dari 1.25rem */
  border-radius: 0.5rem; /* Diperkecil dari 0.75rem */
  margin-bottom: 0;
  border-left: 4px solid #63b3ed; /* Diperkecil dari 5px */
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Diperkecil dari 1rem */
  transition: background-color 0.3s ease;
  box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.1),
    0 0.5px 1px 0 rgba(0, 0, 0, 0.06); /* Diperkecil */
  width: 100%;
}
.needs-item:hover {
  background-color: #cce0f0;
}
.needs-item h3 {
  font-size: 0.9rem; /* Diperkecil dari 1.125rem */
  font-weight: 600;
  color: #2d3748;
}
.needs-item p {
  color: #4a5568;
  font-size: 0.8rem; /* Diperkecil dari default */
}
.needs-icon {
  font-size: 1.5rem; /* Diperkecil dari 1.8rem */
  color: #3182ce;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem; /* Diperkecil dari 3rem */
  }
  .needs-list-container {
    justify-content: flex-start;
  }
  .needs-item {
    width: calc(50% - 0.5rem); /* Diperkecil dari 0.75rem */
  }
}

/* Tambahan untuk HP Super Kecil < 480px */
@media (max-width: 480px) {
  .needs-list-container {
    gap: 0.8rem; /* Diperkecil */
  }
  .needs-item {
    padding: 0.6rem; /* Diperkecil */
    border-radius: 0.4rem; /* Diperkecil */
    border-left: 3px solid #63b3ed; /* Diperkecil */
    gap: 0.6rem; /* Diperkecil */
  }
  .needs-item h3 {
    font-size: 0.8rem; /* Diperkecil */
  }
  .needs-item p {
    font-size: 0.7rem; /* Diperkecil */
  }
  .needs-icon {
    font-size: 1.2rem; /* Diperkecil */
  }
}

/* Tambahan untuk HP Super Kecil < 360px */
@media (max-width: 360px) {
  .needs-list-container {
    gap: 0.6rem; /* Diperkecil */
  }
  .needs-item {
    padding: 0.5rem; /* Diperkecil */
    border-radius: 0.3rem; /* Diperkecil */
    border-left: 2px solid #63b3ed; /* Diperkecil */
    gap: 0.5rem; /* Diperkecil */
  }
  .needs-item h3 {
    font-size: 0.7rem; /* Diperkecil */
  }
  .needs-item p {
    font-size: 0.6rem; /* Diperkecil */
  }
  .needs-icon {
    font-size: 1rem; /* Diperkecil */
  }
}

/* Section Jadwalkan Kunjungan */
.booking-call-to-action {
  text-align: center;
  padding: 24px 0; /* Diperkecil dari 32px */
  background-color: rgba(255, 209, 220, 0.9);
  border-radius: 6px; /* Diperkecil dari 8px */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); /* Diperkecil */
}
.booking-call-to-action h2 {
  font-size: 24px; /* Diperkecil dari 30px */
  font-weight: 700;
  color: black;
  margin-bottom: 18px; /* Diperkecil dari 24px */
}
.booking-call-to-action p {
  font-size: 16px; /* Diperkecil dari 18px */
  color: black;
  margin-bottom: 24px; /* Diperkecil dari 32px */
  max-width: 500px; /* Diperkecil dari 600px */
  margin-left: auto;
  margin-right: auto;
}
.booking-button {
  background-color: rgba(144, 238, 144, 0.7);
  color: black;
  font-weight: 700;
  padding: 10px 24px; /* Diperkecil dari 12px 32px */
  border-radius: 9999px;
  box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1),
    0 3px 5px -2px rgba(0, 0, 0, 0.05); /* Diperkecil */
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
  outline: none;
  border: none;
  cursor: pointer;
}
.booking-button:hover {
  background-color: rgba(107, 180, 107, 0.8);
  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1),
    0 6px 8px -6px rgba(0, 0, 0, 0.1); /* Diperkecil */
  transform: scale(1.03); /* Diperkecil */
}

.booking-button:focus {
  box-shadow: 0 0 0 2px rgba(144, 238, 144, 0.5); /* Diperkecil dari 3px */
}

/* Responsive adjustments for Jadwalkan Kunjungan */
@media (max-width: 768px) {
  .booking-call-to-action {
    padding: 18px 0; /* Diperkecil */
  }
  .booking-call-to-action h2 {
    font-size: 20px; /* Diperkecil */
    margin-bottom: 14px; /* Diperkecil */
  }
  .booking-call-to-action p {
    font-size: 14px; /* Diperkecil */
    margin-bottom: 18px; /* Diperkecil */
    max-width: 400px; /* Diperkecil */
  }
  .booking-button {
    padding: 8px 20px; /* Diperkecil */
    font-size: 14px; /* Diperkecil */
  }
}

@media (max-width: 480px) {
  .booking-call-to-action {
    padding: 12px 0; /* Diperkecil */
  }
  .booking-call-to-action h2 {
    font-size: 16px; /* Diperkecil */
    margin-bottom: 10px; /* Diperkecil */
  }
  .booking-call-to-action p {
    font-size: 12px; /* Diperkecil */
    margin-bottom: 12px; /* Diperkecil */
    max-width: 300px; /* Diperkecil */
  }
  .booking-button {
    padding: 6px 16px; /* Diperkecil */
    font-size: 12px; /* Diperkecil */
  }
}

@media (max-width: 360px) {
  .booking-call-to-action {
    padding: 10px 0; /* Diperkecil */
  }
  .booking-call-to-action h2 {
    font-size: 14px; /* Diperkecil */
    margin-bottom: 8px; /* Diperkecil */
  }
  .booking-call-to-action p {
    font-size: 10px; /* Diperkecil */
    margin-bottom: 10px; /* Diperkecil */
    max-width: 250px; /* Diperkecil */
  }
  .booking-button {
    padding: 5px 12px; /* Diperkecil */
    font-size: 10px; /* Diperkecil */
  }
}

/* calender kunjungan */
.container-kunjungan {
  background-color: #ffffff;
  border-radius: 0.75rem; /* Smaller rounded corners */
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.05); /* Smaller shadow */
  padding: 1.5rem; /* Smaller padding */
  max-width: 1000px; /* Reduced max-width */
  width: 100%;
  border: 1px solid #f8bbd0;
  margin-top: 15px; /* Reduced top margin */
  margin-bottom: 15px; /* Reduced bottom margin */
  /* Added for centering */
  margin-left: auto;
  margin-right: auto;
}

/* Headings */
.container-kunjungan h1 {
  font-size: 1.75rem; /* Smaller text */
  font-weight: 800;
  text-align: center;
  color: #1a202c;
  margin-bottom: 1rem; /* Reduced margin */
}

.container-kunjungan h2 {
  font-size: 1.25rem; /* Smaller text */
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.75rem; /* Reduced margin */
}

.container-kunjungan h3 {
  font-size: 1rem; /* Smaller text */
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.75rem; /* Reduced margin */
}

/* Paragraphs */
.container-kunjungan p {
  font-size: 0.9rem; /* Smaller text */
  color: #4a5568;
  line-height: 1.5; /* Slightly tighter line height */
  margin-bottom: 1.5rem; /* Reduced margin */
  text-align: center;
}

/* User ID Display */
.user-id-display {
  background-color: #e0f7fa;
  color: #006064;
  padding: 0.5rem; /* Smaller padding */
  border-radius: 0.4rem; /* Smaller border-radius */
  margin-bottom: 0.75rem; /* Reduced margin */
  font-size: 0.8rem; /* Smaller font size */
  word-break: break-all;
  text-align: center;
  display: none;
}
.user-id-display.visible {
  display: block;
}

/* Info/Confirmation/Error Boxes */
.info-box {
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  color: #1976d2;
  margin-bottom: 1.5rem; /* Reduced margin */
  padding: 1rem; /* Smaller padding */
  border-radius: 0.4rem; /* Smaller border-radius */
}
.info-box h2 {
  color: inherit;
}
.info-box ol {
  list-style: decimal;
  list-style-position: outside;
  margin-left: 1.2rem; /* Adjusted margin */
  padding-left: 0;
  font-size: 0.9rem; /* Smaller text */
  color: inherit;
}
.info-box li {
  margin-bottom: 0.5rem; /* Reduced space */
  line-height: 1.4;
  padding-left: 0.3rem; /* Adjusted padding */
}
.info-box li span {
  font-weight: 600;
}

.confirmation-box {
  background-color: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #2e7d32;
  margin-top: 1.5rem; /* Reduced margin */
  padding: 1rem; /* Smaller padding */
  border-radius: 0.4rem; /* Smaller border-radius */
  text-align: center;
  display: none;
}
.confirmation-box.visible {
  display: block;
}
.confirmation-box p {
  margin-bottom: 0.4rem; /* Reduced margin */
  line-height: 1.4;
}
.confirmation-box p:first-child {
  font-size: 1rem; /* Smaller text */
  font-weight: 600;
}
.confirmation-box p:last-child {
  font-size: 0.9rem; /* Smaller text */
}
.confirmation-box span {
  font-weight: 700;
}

.error-box {
  background-color: #ffebee;
  border: 1px solid #ef9a9a;
  color: #c62828;
  margin-top: 1.5rem; /* Reduced margin */
  padding: 1rem; /* Smaller padding */
  border-radius: 0.4rem; /* Smaller border-radius */
  text-align: center;
  display: none;
}
.error-box.visible {
  display: block;
}
.error-box p {
  margin-bottom: 0.4rem; /* Reduced margin */
  line-height: 1.4;
}
.error-box p:first-child {
  font-size: 1rem; /* Smaller text */
  font-weight: 600;
}
.error-box p:last-child {
  font-size: 0.9rem; /* Smaller text */
}

/* Form Styles */
.form {
  margin-bottom: 1rem; /* Reduced space */
  display: none; /* Hidden by default */
}
.form.visible {
  display: block; /* Show when toggled */
}
.form > div {
  margin-bottom: 1rem; /* Reduced spacing between form groups */
}
.form label {
  display: block;
  color: #2d3748;
  font-size: 0.9rem; /* Smaller text */
  font-weight: 500;
  margin-bottom: 0.4rem; /* Reduced margin */
}
.form-input {
  width: 100%;
  padding: 0.6rem 0.8rem; /* Smaller padding */
  border-radius: 0.4rem; /* Smaller border-radius */
  border: 1px solid #f48fb1;
  background-color: #fff8fa;
  font-size: 0.9rem; /* Smaller text */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: #81d4fa;
  box-shadow: 0 0 0 2px rgba(129, 212, 250, 0.5); /* Smaller shadow */
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* Reduced gap */
}
@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.checkbox-group {
  display: flex;
  align-items: center;
  margin-top: 1rem; /* Space above checkbox */
  margin-bottom: 1.5rem; /* Space below checkbox */
}
.checkbox-group input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
  accent-color: #ec407a; /* Pink accent color */
}
.checkbox-group label {
  margin-bottom: 0; /* Override default label margin */
  font-size: 0.85rem; /* Smaller font for checkbox label */
  color: #4a5568;
}

/* Primary Button */
.btn-primary {
  width: 100%;
  padding: 0.75rem 1.5rem; /* Adjusted padding for better click area */
  background-color: #ec407a; /* Pink color */
  color: white;
  border: none;
  border-radius: 0.5rem; /* Slightly more rounded */
  font-size: 1rem; /* Standard font size */
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
  margin-top: 1rem; /* Space above button */
}

.btn-primary:hover:not(:disabled) {
  background-color: #d81b60; /* Darker pink on hover */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.btn-primary:disabled {
  background-color: #f8bbd0; /* Lighter pink when disabled */
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Calendar Section */
.calendar-section {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.1);
  border: 1px solid #f8bbd0;
}

.calendar-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 0.5rem; /* Space between buttons */
}

.calendar-navigation button {
  background-color: #fce4ec; /* Light pink background */
  color: #c2185b; /* Darker pink text */
  border: 1px solid #f48fb1;
  padding: 0.5rem 0.8rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0; /* Prevent buttons from shrinking */
}

.calendar-navigation button:hover {
  background-color: #f8bbd0; /* Slightly darker pink on hover */
  color: #ad1457;
}

.calendar-navigation h3 {
  margin: 0;
  flex-grow: 1; /* Allow header to take available space */
  text-align: center;
  font-size: 1.1rem;
  color: #c2185b;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem; /* Smaller gap */
  text-align: center;
  margin-top: 1rem;
}

.calendar-header-day {
  font-weight: 600;
  color: #c2185b; /* Pink color for day headers */
  padding: 0.5rem 0.2rem; /* Adjusted padding */
  font-size: 0.8rem; /* Smaller font size */
}

.calendar-day {
  padding: 0.6rem 0.2rem; /* Adjusted padding */
  border-radius: 0.3rem; /* Smaller border-radius */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  position: relative;
  font-size: 0.85rem; /* Smaller font size */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40px; /* Ensure minimum height for touch targets */
}

.calendar-day.current-month {
  background-color: #fce4ec; /* Light pink for current month days */
  color: #4a5568;
}

.calendar-day.other-month {
  background-color: #fdf4f6; /* Even lighter pink for other months */
  color: #a0aec0;
}

.calendar-day.today {
  background-color: #ffcdd2; /* Slightly darker pink for today */
  border: 2px solid #e57373;
  font-weight: 700;
  color: #b71c1c;
}

.calendar-day.has-visits {
  background-color: #f8bbd0; /* Highlight days with visits */
  font-weight: 600;
  border: 1px solid #ec407a;
}

.calendar-day.selected-date {
  background-color: #ec407a; /* Darker pink for selected date */
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: scale(1.05); /* Slight scale effect */
}

.calendar-day:hover:not(.other-month) {
  background-color: #f48fb1; /* Hover effect for current month days */
  color: white;
  transform: scale(1.02);
}

.calendar-date-number {
  display: block;
  margin-bottom: 0.2rem;
}

.visits-list-header {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #c2185b;
}

.loading-visits {
  text-align: center;
  padding: 1rem;
  display: none; /* Hidden by default */
  color: #4a5568;
  font-size: 0.9rem;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ec407a;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto 0.5rem auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.upcoming-visits-list {
  /* ... properti yang sudah ada ... */
  max-height: 200px; /* Atur tinggi maksimum */
  overflow-y: auto; /* Aktifkan scroll vertikal jika konten melebihi tinggi */
  -webkit-overflow-scrolling: touch; /* Untuk scrolling yang lebih halus di iOS */
  border-radius: 0.5rem; /* Tambahkan sedikit border-radius */
  padding-right: 10px; /* Berikan ruang untuk scrollbar agar tidak menutupi konten */
}
/* Gaya Scrollbar untuk WebKit browsers (Chrome, Safari, Edge) */
.upcoming-visits-list::-webkit-scrollbar {
  width: 8px; /* Lebar scrollbar */
}

.upcoming-visits-list::-webkit-scrollbar-track {
  background: #fce4ec; /* Warna track scrollbar (pink sangat muda) */
  border-radius: 10px;
}

.upcoming-visits-list::-webkit-scrollbar-thumb {
  background: #f8bbd0; /* Warna thumb scrollbar (pink muda) */
  border-radius: 10px;
}

.upcoming-visits-list::-webkit-scrollbar-thumb:hover {
  background: #f48fb1; /* Warna thumb scrollbar saat hover (pink sedikit lebih gelap) */
}
@media (max-width: 640px) {
  /* ... properti yang sudah ada ... */
  .upcoming-visits-list {
    max-height: 200px; /* Tinggi maksimum yang lebih kecil untuk perangkat seluler */
  }
}

.visit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 1px solid #f48fb1;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.visit-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.visit-item .visitor-name {
  font-weight: 700;
  color: #c2185b;
  margin-bottom: 0.2rem;
  text-align: left; /* Ensure text aligns left within item */
}

.visit-item .visitor-contact {
  font-size: 0.8rem;
  color: #718096;
  margin-bottom: 0;
  text-align: left; /* Ensure text aligns left within item */
}

.visit-item .visit-time {
  font-weight: 600;
  color: #4a5568;
  font-size: 0.9rem;
  flex-shrink: 0; /* Prevent time from shrinking */
}

.no-visits-message {
  text-align: center;
  color: #718096;
  font-style: italic;
  padding: 1rem;
  display: none; /* Hidden by default */
}
.no-visits-message.visible {
  display: block;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
  .container-kunjungan {
    padding: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .container-kunjungan h1 {
    font-size: 1.5rem;
  }
  .container-kunjungan h2 {
    font-size: 1.1rem;
  }
  .container-kunjungan p {
    font-size: 0.85rem;
  }
  .calendar-navigation {
    flex-direction: column;
    gap: 0.75rem;
  }
  .calendar-navigation button {
    width: 100%;
    padding: 0.6rem 0.5rem;
  }
  .calendar-navigation h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .calendar-grid {
    gap: 0.15rem;
  }
  .calendar-header-day,
  .calendar-day {
    font-size: 0.75rem;
    padding: 0.4rem 0.1rem;
    min-height: 35px;
  }
  .visit-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.6rem 0.8rem;
  }
  .visit-item .visit-time {
    margin-top: 0.5rem;
  }
}

/* Styling for the floating pop-up */
.floating-popup {
  position: fixed;
  right: 2px; /* Diperkecil dari 3px */
  top: 35%; /* Diperkecil dari 50% untuk naik ke atas */
  transform: translateY(-50%);
  width: 150px; /* Diperkecil dari 180px */
  max-width: 60vw; /* Diperkecil dari 70vw */
  background-color: rgba(255, 250, 250, 0.5);
  border: 0.6px solid #f8bbd0; /* Diperkecil dari 0.8px */
  border-radius: 4px; /* Diperkecil dari 6px */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07); /* Diperkecil dari 0 4px 8px */
  padding: 8px; /* Diperkecil dari 10px */
  z-index: 1000;
  max-height: 35vh; /* Diperkecil dari 40vh */
  overflow-y: auto;
  display: block;
  opacity: 0;
  animation: fadeInPopup 0.5s ease-out forwards;
}

.floating-popup.show {
  display: block;
}

.floating-popup.hide {
  animation: fadeOutPopup 0.3s ease-out forwards;
}

/* Fade-in animation for the pop-up */
@keyframes fadeInPopup {
  from {
    opacity: 0;
    transform: translateY(-55%); /* Disesuaikan untuk posisi baru */
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

/* Fade-out animation for the pop-up */
@keyframes fadeOutPopup {
  from {
    opacity: 1;
    transform: translateY(-50%);
  }
  to {
    opacity: 0;
    transform: translateY(-45%); /* Disesuaikan untuk posisi baru */
  }
}

.floating-popup h3 {
  margin-top: 0;
  color: #d81b60;
  text-align: center;
  font-size: 0.8rem; /* Diperkecil dari 1rem */
  font-weight: 800;
  margin-bottom: 6px; /* Diperkecil dari 8px */
  border-bottom: 0.6px solid #f8bbd0; /* Diperkecil dari 0.8px */
  padding-bottom: 4px; /* Diperkecil dari 6px */
}

.floating-popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.floating-popup ul li {
  padding: 6px 0; /* Diperkecil dari 8px */
  border-bottom: 0.6px solid #fde0eb; /* Diperkecil dari 0.8px */
  color: #4a4a4a;
  font-size: 0.7em; /* Diperkecil dari 0.8em */
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(6px); /* Diperkecil dari 8px */
  animation: fadeInSlideUp 0.5s forwards;
  animation-delay: var(--animation-delay);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 2px; /* Diperkecil dari 3px */
  margin-bottom: 3px; /* Diperkecil dari 4px */
  padding-left: 4px; /* Diperkecil dari 6px */
  transition: background-color 0.2s ease;
}

.floating-popup ul li:hover {
  background-color: rgba(255, 235, 238, 0.8);
}

.floating-popup ul li:first-child {
  border-top: none;
}

.floating-popup ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.floating-popup ul li i {
  margin-right: 4px; /* Diperkecil dari 6px */
  color: #ec407a;
  font-size: 0.8em; /* Diperkecil dari 0.9em */
}

/* Animation for each donor item */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(6px); /* Diperkecil dari 8px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Styling for the floating pop-up */
.floating-popup {
  position: fixed;
  right: 2px; /* Diperkecil dari 3px */
  top: 35%; /* Diperkecil dari 50% untuk naik ke atas */
  transform: translateY(-50%);
  width: 150px; /* Diperkecil dari 180px */
  max-width: 60vw; /* Diperkecil dari 70vw */
  background-color: rgba(255, 250, 250, 0.5);
  border: 0.6px solid #f8bbd0; /* Diperkecil dari 0.8px */
  border-radius: 4px; /* Diperkecil dari 6px */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07); /* Diperkecil dari 0 4px 8px */
  padding: 8px; /* Diperkecil dari 10px */
  z-index: 1000;
  max-height: 35vh; /* Diperkecil dari 40vh */
  overflow-y: auto;
  display: block;
  opacity: 0;
  animation: fadeInPopup 0.5s ease-out forwards;
}

.floating-popup.show {
  display: block;
}

.floating-popup.hide {
  animation: fadeOutPopup 0.3s ease-out forwards;
}

/* Fade-in animation for the pop-up */
@keyframes fadeInPopup {
  from {
    opacity: 0;
    transform: translateY(-55%); /* Disesuaikan untuk posisi baru */
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

/* Fade-out animation for the pop-up */
@keyframes fadeOutPopup {
  from {
    opacity: 1;
    transform: translateY(-50%);
  }
  to {
    opacity: 0;
    transform: translateY(-45%); /* Disesuaikan untuk posisi baru */
  }
}

.floating-popup h3 {
  margin-top: 0;
  color: #d81b60;
  text-align: center;
  font-size: 0.8rem; /* Diperkecil dari 1rem */
  font-weight: 800;
  margin-bottom: 6px; /* Diperkecil dari 8px */
  border-bottom: 0.6px solid #f8bbd0; /* Diperkecil dari 0.8px */
  padding-bottom: 4px; /* Diperkecil dari 6px */
}

.floating-popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.floating-popup ul li {
  padding: 6px 0; /* Diperkecil dari 8px */
  border-bottom: 0.6px solid #fde0eb; /* Diperkecil dari 0.8px */
  color: #4a4a4a;
  font-size: 0.7em; /* Diperkecil dari 0.8em */
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(6px); /* Diperkecil dari 8px */
  animation: fadeInSlideUp 0.5s forwards;
  animation-delay: var(--animation-delay);
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 2px; /* Diperkecil dari 3px */
  margin-bottom: 3px; /* Diperkecil dari 4px */
  padding-left: 4px; /* Diperkecil dari 6px */
  transition: background-color 0.2s ease;
}

.floating-popup ul li:hover {
  background-color: rgba(255, 235, 238, 0.8);
}

.floating-popup ul li:first-child {
  border-top: none;
}

.floating-popup ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.floating-popup ul li i {
  margin-right: 4px; /* Diperkecil dari 6px */
  color: #ec407a;
  font-size: 0.8em; /* Diperkecil dari 0.9em */
}

/* Animation for each donor item */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(6px); /* Diperkecil dari 8px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Styling for the close button */
.close-button {
  position: absolute;
  top: 2px; /* Diperkecil dari 4px */
  right: 5px; /* Diperkecil dari 8px */
  background: none;
  border: none;
  font-size: 0.7rem; /* Diperkecil dari 0.9rem */
  color: #9ca3af;
  cursor: pointer;
  padding: 0px; /* Diperkecil dari 1px */
  border-radius: 50%; /* Tetap ada border-radius untuk bentuk lingkaran */
  transition: color 0.2s ease; /* Hapus transisi background-color */
}

.close-button:hover {
  color: #d81b60;
  /* background-color: #f8bbd0; */ /* Hapus efek hover background */
}

/* Styling for new donation message */
/* Styling for new donation message */
.floating-popup {
  display: none; /* Sembunyikan secara default */
  position: fixed;
  bottom: 5px; /* Posisi di bawah, digeser jauh lebih ke atas */
  right: 30px; /* Posisi di kanan, digeser ke kiri sedikit */
  width: 250px; /* Lebar pop-up, perkecil */
  background-color: rgba(255, 192, 203, 0.7); /* Pink transparan */
  border-radius: 8px; /* Perkecil */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Perkecil bayangan */
  padding: 10px; /* Perkecil padding */
  box-sizing: border-box;
  z-index: 1000;
  overflow: hidden; /* This applies to the whole popup, not just the list */
  backdrop-filter: blur(3px); /* Efek blur untuk transparansi */
}

.floating-popup.show {
  animation: fadeIn 0.5s forwards;
  display: block; /* Make sure it's visible when 'show' class is added */
}

.floating-popup.hide {
  animation: fadeOut 0.5s forwards;
}

.floating-popup h3 {
  color: #c2185b; /* Warna judul, sesuaikan dengan tema pink */
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px; /* Perkecil margin */
  font-size: 1em; /* Perkecil ukuran font */
}

.floating-popup .close-button {
  position: absolute;
  top: 5px; /* Perkecil posisi */
  right: 5px; /* Perkecil posisi */
  background: none;
  border: none;
  font-size: 1em; /* Perkecil ukuran font */
  cursor: pointer;
  color: #888;
}

.floating-popup .close-button:hover {
  color: #555;
}

.floating-popup ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Changed: Set max-height to a larger value or 'none' for full visibility */
  max-height: 190px; /* Example: Increased height. Adjust as needed. */
  /* If you want it to always show all content without a scrollbar (and expand the popup) */
  /* max-height: none; */
  overflow-y: auto; /* Keep scrollbar if content exceeds max-height */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #d81b60 #f8bbd0; /* Firefox */
}

.floating-popup ul li {
  background-color: rgba(
    255,
    240,
    245,
    0.8
  ); /* Warna latar belakang list item, pink transparan */
  border: 1px solid rgba(255, 182, 193, 0.5); /* Border pink transparan */
  border-radius: 6px; /* Perkecil */
  padding: 8px 12px; /* Perkecil padding */
  margin-bottom: 6px; /* Perkecil margin */
  display: flex;
  align-items: center;
  font-size: 0.85em; /* Perkecil ukuran font */
  color: #333;
  animation: slideIn 0.5s ease-out var(--animation-delay, 0s) forwards;
  opacity: 0;
  transform: translateY(15px); /* Perkecil perpindahan */
}

.floating-popup ul li i {
  color: #c2185b; /* Warna ikon, sesuaikan dengan tema pink */
  margin-right: 8px; /* Perkecil margin */
  font-size: 1em; /* Perkecil ukuran font */
}

/* Styling for new donation message */
.new-donation-message {
  background-color: rgba(253, 224, 235, 0.8); /* Pink transparan */
  color: #880e4f;
  padding: 2px; /* Perkecil padding */
  margin-bottom: 3px; /* Perkecil margin */
  border-radius: 2px;
  text-align: center;
  font-weight: 600;
  font-size: 0.55em; /* Perkecil ukuran font */
  display: none;
  opacity: 0;
}

/* Keyframe untuk animasi */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(15px);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInOutMessage {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  1% {
    display: block;
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* Scrollbar styling for Webkit browsers (Chrome, Safari, Edge) */
.floating-popup ul::-webkit-scrollbar {
  /* Apply scrollbar styling to the ul, not the whole popup */
  width: 6px; /* Wider for better visibility */
}

.floating-popup ul::-webkit-scrollbar-track {
  background: #f8bbd0;
  border-radius: 4px;
}

.floating-popup ul::-webkit-scrollbar-thumb {
  background-color: #d81b60;
  border-radius: 4px;
  border: 0.3px solid #f8bbd0;
}

.floating-popup ul::-webkit-scrollbar-thumb:hover {
  background-color: #ec407a;
}

/* Responsiveness for tablet and phone screens */
@media (max-width: 768px) {
  .floating-popup {
    display: none !important; /* Hide popup on tablets and smaller */
  }
}

/* The following media query is redundant if the above covers it, but keeping it for completeness if specific behavior is desired */
@media (max-width: 480px) {
  .floating-popup {
    display: none !important; /* Hide pop-up on very small screens */
  }
}

/* Styles for dummy content */
.content-container {
  max-width: 400px; /* Diperkecil dari 500px */
  margin-left: auto;
  margin-right: auto;
  padding: 10px; /* Diperkecil dari 15px */
  background-color: #ffffff;
  border-radius: 3px; /* Diperkecil dari 4px */
  box-shadow: 0 0.8px 2px rgba(0, 0, 0, 0.1); /* Diperkecil dari 0 1px 3px */
  color: #4a4a4a;
  margin-bottom: 30px; /* Diperkecil dari 40px */
}

.content-container h1 {
  font-size: 1.2rem; /* Diperkecil dari 1.4rem */
  font-weight: bold;
  text-align: center;
  color: #d81b60;
  margin-bottom: 10px; /* Diperkecil dari 15px */
}

.content-container p {
  margin-bottom: 6px; /* Diperkecil dari 8px */
}

.dummy-area {
  height: 150px; /* Diperkecil dari 200px */
  background-color: #f3f4f6;
  border-radius: 3px; /* Diperkecil dari 4px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px; /* Diperkecil dari 8px */
}

.dummy-area p {
  color: #6b7280;
}

/* about Start */
.about1 {
  padding: 5rem 14.5% 1.4rem;
}

.about1 .row .content button {
  background-color: #4070f4;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.about1 h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #4070f4;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Efek shadow gelap lembut */
}
.about1 h2 span {
  color: #000000;
}
.about1 .row {
  display: flex;
}

.about1 .row .about-img {
  flex: 1 1 45rem;
}

.about1 .row .about-img img {
  width: 100%;
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease, mask-position 0.3s ease;
}

.about1 .row .about-img img:hover {
  transform: scale(1.03); /* Membesarkan gambar sedikit */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Membuat bayangan lebih intens */
  mask-position: center center; /* Contoh perubahan mask-position, jika diperlukan */
}

.about1 .row .content {
  flex: 1 1 35rem;
  padding: 3rem 1rem; /* Reduced padding-top from 5rem to 3rem */
}

.about1 .row .content h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.about1 .row .content p {
  color: #000000;
  text-align: justify;
  margin-bottom: 0;
  font-size: 0.95rem;
  font-weight: 10;
  line-height: 1.6;
}
/* Untuk layar di bawah 768px (tablet dan smartphone) */
@media (max-width: 768px) {
  .about1 {
    padding: 3rem 5%;
  }

  .about1 .row {
    flex-direction: column; /* Ubah tata letak menjadi kolom */
    align-items: center;
  }

  .about1 .row .about-img,
  .about1 .row .content {
    flex: 1 1 auto; /* Atur ulang fleksibilitas */
    padding: 2rem 1rem;
  }

  .about1 .row .about-img img {
    border-radius: 8px; /* Kurangi border radius pada layar kecil */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Kurangi intensitas bayangan */
  }

  .about1 h2 {
    font-size: 1.5rem; /* Kurangi ukuran font judul */
  }

  .about1 .row .content h3 {
    font-size: 1rem; /* Kurangi ukuran font subjudul */
  }

  .about1 .row .content p {
    font-size: 0.9rem; /* Kurangi ukuran font teks */
  }

  .about1 .row .content button {
    padding: 8px 16px; /* Kurangi padding pada tombol */
    font-size: 12px;
  }
}

/* Untuk layar di bawah 480px (smartphone kecil) */
@media (max-width: 480px) {
  .about1 h2 {
    font-size: 1.2rem; /* Sesuaikan ukuran font judul lagi */
  }

  .about11 .row .content p {
    font-size: 0.8rem; /* Kurangi ukuran font teks */
    line-height: 1.4;
  }

  .about1 .row .content button {
    padding: 6px 14px; /* Kurangi padding tombol */
    font-size: 11px;
  }

  .abou1 .row .about-img img {
    border-radius: 5px; /* Kurangi border radius lagi */
  }
}

/* about Ends */

/* container news */

/* Styling for the main news container */
.container-news {
  padding: 40px 15px; /* Tambahkan sedikit padding atas/bawah */
  background-color: #f9f9f9;
  font-family: "Arial", sans-serif;
}

/* Centering the content within the section */
.section-center {
  max-width: 900px;
  margin: 0 auto;
  text-align: center; /* Untuk menengahkan judul dan deskripsi */
}

/* Section title styling */
.section-title {
  font-size: 2em; /* Sedikit lebih besar untuk judul utama */
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
  position: relative;
  padding-bottom: 15px;
  display: inline-block;
}

.section-title::after {
  content: "";
  display: block;
  width: 500px; /* Lebar default untuk desktop/layar besar */
  height: 4px;
  background-color: #ff69b4; /* Changed from #007bff to pink */
  border-radius: 5px;
  margin: 8px auto 0; /* Centers the line horizontally and adds space above it */
}

/* Section description styling */
.section-description {
  font-size: 1.1em;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.5;
}

/* News grid container for responsive layout */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* Individual news item styling */
.news-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out;
}

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

/* News image container */
.news-image {
  width: 100%;
  height: 160px; /* Smaller image height */
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta information (date, views) */
.news-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 15px 5px;
  color: #888;
  font-size: 0.85em;
}

.news-meta svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  color: #888;
}

.news-meta span:not(:last-child) {
  margin-right: 15px;
}

/* News title styling */
.news-title {
  font-size: 1.15em; /* Slightly smaller title */
  color: #333;
  padding: 5px 15px;
  margin: 0;
  text-align: center; /* Centered as per your request */
  line-height: 1.4;
  max-height: 3.2em; /* Limit to 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* News description styling */
.news-description {
  font-size: 0.9em; /* Smaller description text */
  color: #555;
  padding: 0 15px 10px;
  text-align: left;
  line-height: 1.5;
  flex-grow: 1; /* Allows description to take available space */
  max-height: 4.5em; /* Limit to 3 lines for a compact look */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Read more link styling */
.read-more-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #ff69b4; /* Changed from #007bff to pink */
  text-decoration: none;
  padding: 10px 15px 15px;
  font-size: 0.9em;
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

.read-more-link:hover {
  color: #e04b9a; /* Changed from #0056b3 to darker pink */
}

.read-more-link svg {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  transition: margin-left 0.2s ease-in-out;
}

.read-more-link:hover svg {
  margin-left: 10px;
}

/* Message for no news */
.news-grid p {
  font-size: 1.1em;
  color: #777;
  padding: 20px;
  grid-column: 1 / -1; /* Ensures "no news" message spans all columns */
}

/* Call to action section */
.call-to-action {
  margin-top: 30px;
  padding: 20px;
  background-color: #ffeef7; /* Light pink background */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.call-to-action-text {
  font-size: 1.1em;
  color: #333;
  margin: 0;
}

/* Primary button styling */
.btn-primary {
  display: inline-block;
  background-color: #ff69b4; /* Changed from #007bff to pink */
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: #e04b9a; /* Changed from #0056b3 to darker pink */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.6em;
  }

  /* Penyesuaian garis di bawah judul utama untuk tablet/layar menengah */
  .section-title::after {
    width: 50px; /* Ukuran garis di tablet */
  }

  .news-grid {
    grid-template-columns: 1fr; /* Stack news items on smaller screens */
  }

  .news-image {
    height: 180px; /* Slightly taller images on small screens for better visibility */
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.4em;
  }

  /* Penyesuaian garis di bawah judul utama untuk ponsel */
  .section-title::after {
    width: 40px; /* Ukuran garis di ponsel */
    height: 3px; /* Mungkin sedikit lebih tipis di ponsel juga */
  }

  .news-image {
    height: 150px;
  }

  .news-title {
    font-size: 1em;
  }

  .news-description {
    font-size: 0.85em;
  }

  .btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* Styling untuk tombol WhatsApp mengambang */
.whatsapp-button {
  position: fixed;
  bottom: 150px; /* Posisi dari bawah */
  right: 30px; /* Default: Digeser sedikit ke kiri (menambah dari 20px) */
  background-color: #25d366; /* Warna hijau WhatsApp */
  color: white; /* Warna teks putih */
  border-radius: 9999px; /* Bentuk lingkaran penuh */
  width: 50px; /* Lebar tombol */
  height: 50px; /* Tinggi tombol */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem; /* Ukuran ikon */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Bayangan tombol */
  cursor: pointer; /* Kursor pointer saat diarahkan */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transisi halus */
  z-index: 1000; /* Z-index tinggi agar di atas elemen lain */
}

.whatsapp-button:hover {
  transform: scale(1.05); /* Sedikit membesar saat dihover */
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); /* Bayangan lebih gelap saat dihover */
}

/* Popup WhatsApp */
.whatsapp-popup {
  position: fixed;
  bottom: 150px; /* Sejajar dengan tombol WhatsApp */
  right: 84px; /* Default: Disesuaikan dengan posisi tombol baru (30px right + 50px lebar tombol + 4px jarak = 84px) */
  background-color: white; /* Latar belakang putih */
  border-radius: 0.8rem; /* Sudut membulat */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* Bayangan popup */
  width: 300px; /* Lebar popup */
  max-width: calc(
    100% - 70px
  ); /* Responsif untuk layar kecil, disesuaikan margin */
  opacity: 0; /* Awalnya tidak terlihat */
  transform: translateY(15px) scale(0.97); /* Transformasi awal untuk animasi */
  visibility: hidden; /* Awalnya tersembunyi */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Transisi animasi */
  z-index: 1001; /* Z-index lebih tinggi dari elemen lain */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Memastikan konten tetap di dalam sudut membulat */
}

.whatsapp-popup.show {
  opacity: 1; /* Terlihat saat kelas 'show' ditambahkan */
  transform: translateY(0) scale(1); /* Kembali ke posisi normal */
  visibility: visible; /* Terlihat */
}

/* Header popup */
.popup-header {
  background-color: #075e54; /* Warna header WhatsApp */
  color: white; /* Warna teks putih */
  padding: 0.8rem 1rem; /* Padding header */
  border-top-left-radius: 0.8rem; /* Sudut kiri atas membulat */
  border-top-right-radius: 0.8rem; /* Sudut kanan atas membulat */
  display: flex;
  justify-content: space-between; /* Spasi antara elemen */
  align-items: center; /* Penyelarasan vertikal */
}

.popup-header h3 {
  margin: 0; /* Hapus margin default */
  font-size: 1rem; /* Ukuran font header */
}

/* Tombol tutup popup */
.close-button1 {
  background: none; /* Tanpa latar belakang */
  border: none; /* Tanpa border */
  color: white; /* Warna teks putih */
  font-size: 1.4rem; /* Ukuran ikon tutup */
  cursor: pointer; /* Kursor pointer */
  padding: 0.2rem; /* Padding tombol */
  border-radius: 0.4rem; /* Sudut membulat */
  transition: background-color 0.2s ease; /* Transisi warna latar belakang */
}

.close-button1:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Latar belakang transparan saat dihover */
}

/* Isi popup */
.popup-body {
  padding: 1rem; /* Padding isi popup */
  display: flex;
  flex-direction: column; /* Tata letak kolom */
  gap: 0.8rem; /* Jarak antar elemen */
}

.popup-body p {
  font-size: 0.85rem; /* Ukuran font teks body */
  color: #555; /* Warna teks abu-abu */
  margin-bottom: 0.4rem; /* Spasi sebelum textarea */
}

.popup-body textarea {
  width: calc(100% - 16px); /* Lebar textarea, mengurangi padding */
  min-height: 80px; /* Tinggi minimum textarea */
  padding: 0.6rem 8px; /* Padding textarea */
  border: 1px solid #e2e8f0; /* Border textarea */
  border-radius: 0.4rem; /* Sudut membulat */
  resize: vertical; /* Hanya bisa diubah ukurannya secara vertikal */
  font-size: 0.9rem; /* Ukuran font */
  outline: none; /* Hapus outline saat fokus */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transisi halus */
}

.popup-body textarea:focus {
  border-color: #25d366; /* Warna border saat fokus */
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.2); /* Bayangan saat fokus */
}

.popup-body button {
  background-color: #25d366; /* Warna latar belakang tombol */
  color: white; /* Warna teks putih */
  padding: 0.65rem 1rem; /* Padding tombol */
  border-radius: 0.4rem; /* Sudut membulat */
  border: none; /* Tanpa border */
  cursor: pointer; /* Kursor pointer */
  font-size: 0.95rem; /* Ukuran font tombol */
  font-weight: 600; /* Ketebalan font */
  transition: background-color 0.2s ease, transform 0.2s ease; /* Transisi halus */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem; /* Jarak antar ikon dan teks */
}

.popup-body button:hover {
  background-color: #1da851; /* Warna latar belakang lebih gelap saat dihover */
  transform: translateY(-1px); /* Sedikit naik saat dihover */
}

/* Gaya kotak pesan (untuk notifikasi) */
.message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Pusatkan di layar */
  background-color: #333; /* Latar belakang gelap */
  color: white; /* Warna teks putih */
  padding: 0.8rem 1.2rem; /* Padding */
  border-radius: 0.6rem; /* Sudut membulat */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* Bayangan */
  z-index: 1001; /* Z-index tertinggi */
  opacity: 0; /* Awalnya tidak terlihat */
  visibility: hidden; /* Awalnya tersembunyi */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transisi halus */
  text-align: center; /* Teks di tengah */
  font-size: 0.85rem; /* Ukuran font */
  max-width: 70%; /* Batasi lebar pada layar kecil */
  box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar */
}

.message-box.show {
  opacity: 1; /* Terlihat saat kelas 'show' ditambahkan */
  visibility: visible; /* Terlihat */
}

/* Untuk layar sangat kecil (misalnya, ponsel kecil, di bawah 375px) */
@media (max-width: 375px) {
  .whatsapp-button {
    bottom: 190px; /* Pindah lebih ke atas */
    right: 5px; /* Geser lebih jauh ke kanan (mendekati tepi) */
    width: 35px; /* Tetap mini */
    height: 35px; /* Tetap mini */
    font-size: 1.4rem; /* Tetap mini */
  }

  .whatsapp-popup {
    bottom: 190px; /* Sejajar dengan tombol WhatsApp */
    right: 44px; /* Disesuaikan: 5px right + 35px lebar + 4px jarak = 44px */
    width: calc(100% - 30px); /* Disesuaikan untuk margin yang lebih kecil */
    max-width: 200px; /* Batasi lebar agar sangat kompak */
    border-radius: 0.5rem;
  }

  .popup-header {
    padding: 0.5rem 0.7rem;
  }

  .popup-header h3 {
    font-size: 0.75rem; /* Sedikit lebih kecil */
  }

  .close-button1 {
    font-size: 0.9rem; /* Sedikit lebih kecil */
  }

  .popup-body {
    padding: 0.5rem; /* Sedikit lebih kecil */
    gap: 0.3rem; /* Jarak antar elemen lebih rapat */
  }

  .popup-body p {
    font-size: 0.65rem; /* Sedikit lebih kecil */
  }

  .popup-body textarea {
    min-height: 45px; /* Sedikit lebih rendah */
    padding: 0.35rem 4px; /* Padding lebih kecil */
    font-size: 0.7rem; /* Sedikit lebih kecil */
  }

  .popup-body button {
    padding: 0.4rem 0.5rem; /* Padding lebih kecil */
    font-size: 0.7rem; /* Sedikit lebih kecil */
    gap: 0.2rem; /* Jarak ikon-teks lebih rapat */
  }

  .message-box {
    padding: 0.5rem 0.8rem;
    font-size: 0.6rem; /* Lebih kecil lagi */
    max-width: 85%; /* Beri sedikit lebih banyak ruang jika teksnya panjang */
  }
}

/* Untuk layar kecil (misalnya, ponsel, antara 376px dan 480px) */
@media (min-width: 376px) and (max-width: 480px) {
  .whatsapp-button {
    bottom: 200px; /* Pindah lebih ke atas */
    right: 10px; /* Geser lebih ke kanan */
    width: 40px; /* Tetap mini */
    height: 40px; /* Tetap mini */
    font-size: 1.6rem; /* Tetap mini */
  }

  .whatsapp-popup {
    bottom: 200px; /* Sejajar dengan tombol WhatsApp */
    right: 54px; /* Disesuaikan: 10px right + 40px lebar + 4px jarak = 54px */
    width: calc(100% - 40px); /* Disesuaikan untuk margin yang lebih kecil */
    max-width: 230px; /* Batasi lebar agar kompak */
    border-radius: 0.6rem;
  }

  .popup-header {
    padding: 0.6rem 0.8rem;
  }

  .popup-header h3 {
    font-size: 0.8rem;
  }

  .close-button1 {
    font-size: 1rem;
  }

  .popup-body {
    padding: 0.6rem;
    gap: 0.4rem;
  }

  .popup-body p {
    font-size: 0.7rem;
  }

  .popup-body textarea {
    min-height: 50px;
    padding: 0.4rem 5px;
    font-size: 0.75rem;
  }

  .popup-body button {
    padding: 0.45rem 0.6rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }

  .message-box {
    padding: 0.6rem 0.9rem;
    font-size: 0.7rem;
  }
}

/* Untuk layar sedang (misalnya, tablet, antara 481px dan 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .whatsapp-button {
    bottom: 210px; /* Pindah sedikit ke atas */
    right: 15px; /* Geser sedikit ke kanan */
    width: 45px; /* Ukuran sedikit lebih kecil dari default */
    height: 45px; /* Ukuran sedikit lebih kecil dari default */
    font-size: 1.8rem; /* Ukuran ikon sedikit lebih kecil */
  }

  .whatsapp-popup {
    bottom: 210px; /* Sejajar dengan tombol WhatsApp */
    right: 64px; /* Disesuaikan: 15px right + 45px lebar + 4px jarak = 64px */
    width: 260px; /* Pertahankan lebar konsisten untuk tablet */
    max-width: calc(100% - 50px);
  }
}

/* table */

.main {
  width: 1350px;
  background: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow-x: auto;
  display: contents;
  justify-content: center;
  align-items: center;
}

/* Mengatur tampilan tabel */
.data-table-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  padding: 5px;
}

.data-table {
  width: 90%;
  max-width: 900px;
  border-collapse: collapse;
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
  margin: auto;
}

.data-table thead {
  background-color: rgba(255, 180, 200, 0.8); /* Pink untuk header tabel */
  color: white;
}

.data-table th,
.data-table td {
  padding: 10px;
  border: 1px solid rgba(255, 200, 215, 0.7); /* Border pink lembut */
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  max-width: 150px;
}

.data-table tbody tr:nth-child(even) {
  background-color: rgba(
    255,
    240,
    245,
    0.5
  ); /* Pink sangat pudar untuk baris genap */
}

.data-table tbody tr:hover {
  background-color: rgba(255, 230, 240, 0.7); /* Pink lebih pudar saat hover */
  transform: scale(1.02);
  transition: transform 0.3s ease-in-out;
}

/* Responsif untuk layar kecil */
@media screen and (max-width: 768px) {
  .data-table-container {
    padding: 2px;
    justify-content: center;
  }

  .data-table {
    width: 100%;
    margin: auto;
  }

  .data-table th,
  .data-table td {
    padding: 6px;
    font-size: 12px;
    max-width: 120px;
  }
}

@media screen and (max-width: 480px) {
  .data-table-container {
    padding: 1px;
    justify-content: center;
  }

  .data-table {
    width: 100%;
    margin: auto;
  }

  .data-table th,
  .data-table td {
    padding: 4px;
    font-size: 10px;
    max-width: 100px;
  }
}

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

/* Pagination Controls */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.pagination-container button {
  background-color: rgba(255, 180, 200, 0.8); /* Pink untuk tombol paginasi */
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.pagination-container button:hover {
  background-color: rgba(255, 150, 180, 0.9); /* Pink lebih gelap saat hover */
}

#pagination-info {
  margin: 0 10px;
  font-size: 16px;
  font-weight: bold;
}

/* Input Search */
.search-container {
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}

.mark {
  background-color: yellow;
  color: black;
  padding: 2px 4px;
  border-radius: 3px;
}
.search-container input {
  width: 80%;
  max-width: 500px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 209, 220, 0.7); /* Pink muda untuk border */
  border-radius: 6px;
  font-size: 16px;
}

.search-container input:focus {
  outline: none;
  border-color: rgba(
    255,
    180,
    200,
    0.9
  ); /* Pink lebih cerah/buram saat fokus */
}

/* Kontainer umum */
/* CSS Variables for colors */
:root {
  --primary-pink: #ffd1dc; /* Light Pink */
  --secondary-pink: #ffb6c1; /* Slightly darker pink */
  --text-dark: #333;
  --text-light: #fff;
  --bg-light: #fff0f5; /* Lavender Blush, very soft */
  --accent-color: #ff69b4; /* Hot Pink for accent */
  --accent-darker: #e0509b; /* Slightly darker hot pink for hover */
  --shadow-color: rgba(0, 0, 0, 0.1);
}
.container-visi-misi {
  max-width: 900px; /* Diperkecil dari 1200px */
  margin: 0 auto;
  padding: 15px; /* Diperkecil dari 20px */
}

/* Header (jika ada, contoh penyesuaian) */
header .container-visi-misi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Untuk responsivitas */
}

/* Bagian Hero */
.hero-visi-misi {
  background: linear-gradient(
    135deg,
    var(--primary-pink) 0%,
    var(--secondary-pink) 100%
  );
  color: #000000;
  text-align: center;
  padding: 70px 15px; /* Diperkecil dari 100px 20px */
  border-bottom-left-radius: 30px; /* Diperkecil dari 50px */
  border-bottom-right-radius: 30px; /* Diperkecil dari 50px */
  margin-bottom: 30px; /* Diperkecil dari 40px */
  animation: fadeIn 1s ease-out;
}

.hero-visi-misi h1 {
  font-size: 2.8em; /* Diperkecil dari 3.5em */
  margin-bottom: 10px; /* Diperkecil dari 15px */
  font-weight: 700;
  text-shadow: 1px 1px 2px var(--shadow-color); /* Diperkecil */
}

.hero-visi-misi p {
  font-size: 1.1em; /* Diperkecil dari 1.3em */
  max-width: 600px; /* Diperkecil dari 800px */
  margin: 0 auto 20px; /* Diperkecil dari 30px */
  font-weight: 300;
}

/* Tombol */
.btn-visi-misi {
  background-color: var(--accent-color);
  color: var(--text-light);
  padding: 10px 25px; /* Diperkecil dari 12px 30px */
  text-decoration: none;
  border-radius: 20px; /* Diperkecil dari 30px */
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 3px 6px var(--shadow-color); /* Diperkecil dari 0 4px 8px */
}

.btn-visi-misi:hover {
  background-color: var(--accent-darker);
  transform: translateY(-2px); /* Diperkecil dari -3px */
  box-shadow: 0 5px 10px var(--hover-shadow-color); /* Diperkecil dari 0 6px 12px */
}

/* Bagian Konten (Visi & Misi) */
.section-card {
  background-color: var(--text-light);
  padding: 30px; /* Diperkecil dari 40px */
  margin-bottom: 20px; /* Diperkecil dari 30px */
  border-radius: 20px; /* Diperkecil dari 25px */
  box-shadow: 0 6px 12px var(--shadow-color); /* Diperkecil dari 0 8px 16px */
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  border: 1px solid transparent;
}

.section-card:hover {
  transform: translateY(-5px) scale(1.005); /* Diperkecil dari -8px dan 1.01 */
  box-shadow: 0 10px 20px var(--hover-shadow-color); /* Diperkecil dari 0 15px 30px */
  background-color: #fff9fb;
  border: 1px solid var(--accent-color);
}

.section-card h2 {
  color: var(--accent-color);
  font-size: 2em; /* Diperkecil dari 2.5em */
  margin-bottom: 15px; /* Diperkecil dari 20px */
  text-align: center;
  position: relative;
}

.section-card h2::after {
  content: "";
  display: block;
  width: 60px; /* Diperkecil dari 80px */
  height: 3px; /* Diperkecil dari 4px */
  background-color: var(--secondary-pink);
  margin: 8px auto 0; /* Diperkecil dari 10px */
  border-radius: 2px;
}

.section-card p,
.section-card ul {
  font-size: 1em; /* Diperkecil dari 1.1em */
  text-align: justify;
  margin-bottom: 10px; /* Diperkecil dari 15px */
}

.section-card ul {
  list-style: none;
  padding-left: 0;
}

.section-card ul li {
  position: relative;
  padding-left: 25px; /* Diperkecil dari 30px */
  margin-bottom: 8px; /* Diperkecil dari 10px */
}

.section-card ul li::before {
  content: "💖"; /* Emoji hati untuk bullet point */
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-size: 1.1em; /* Diperkecil dari 1.2em */
  top: 0;
}

/* Animasi */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  } /* Diperkecil dari 20px */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px); /* Diperkecil dari 30px */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Desain Responsif */
@media (max-width: 768px) {
  header .container-visi-misi {
    flex-direction: column;
    text-align: center;
  }

  .hero-visi-misi h1 {
    font-size: 2em; /* Diperkecil dari 2.5em */
  }

  .hero-visi-misi p {
    font-size: 0.9em; /* Diperkecil dari 1em */
  }

  .section-card {
    padding: 20px; /* Diperkecil dari 25px */
  }

  .section-card h2 {
    font-size: 1.8em; /* Diperkecil dari 2em */
  }
}

@media (max-width: 480px) {
  .hero-visi-misi {
    padding: 40px 10px; /* Diperkecil dari 60px 15px */
  }

  .hero-visi-misi h1 {
    font-size: 1.8em; /* Diperkecil dari 2em */
  }

  .section-card h2 {
    font-size: 1.5em; /* Diperkecil dari 1.8em */
  }
}

/* Header Judul*/
header {
  margin-top: 50px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--accent-color)
  ); /* Updated gradient colors */
  color: white;
  padding: 10px 15px; /* Reduced from 40px 20px */
  text-align: center;
  box-shadow: var(--shadow-light);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  pointer-events: none;
}

header h1 {
  margin: 0;
  font-size: 2.5em; /* Reduced from 3em */
  font-weight: 700;
  letter-spacing: 1.5px; /* Reduced from 2px */
  text-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.2); /* Reduced shadow */
}

header p {
  font-size: 1em; /* Reduced from 1.2em */
  margin-top: 8px; /* Reduced from 10px */
  font-weight: 300;
}

/* --- Media query for smaller screens --- */
@media (max-width: 600px) {
  header {
    margin-top: 40px; /* Moves the header up by reducing the top margin */
    padding: 30px 15px; /* Increases the header's height and width by adjusting padding */
  }

  header h1 {
    font-size: 2em; /* Adjusted for smaller screens */
  }

  header p {
    font-size: 1em; /* Adjusted for smaller screens */
  }
}
/* Media query for tablets and smaller devices */
@media (max-width: 768px) {
  header {
    padding: 30px 15px; /* Reduced padding for smaller screens */
  }

  header h1 {
    font-size: 2em; /* Reduced heading font size */
    letter-spacing: 1.5px;
  }

  header p {
    font-size: 1em; /* Reduced paragraph font size */
  }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
  header {
    margin-top: 30px; /* Reduced top margin */
    padding: 20px 10px; /* Further reduced padding for mobile */
  }

  header h1 {
    font-size: 1.5em; /* Significant reduction for mobile screens */
    letter-spacing: 1px;
  }

  header p {
    font-size: 0.9em; /* Smallest font size for readability */
    margin-top: 5px;
  }
}

/* sejarah */

/* Tambahan untuk container-sejarah */
/* Container Sejarah */
.container-sejarah {
  max-width: 1150px; /* Mengurangi lebar maksimum dari 1200px menjadi 900px */
  margin: 40px auto; /* Memberi margin dan memposisikan di tengah */
  padding: 20px; /* Padding internal */

  border-radius: 20px; /* Sudut membulat untuk seluruh konten */
}

/* H2 kini hanya berlaku di dalam .container-sejarah */
/* Container Sejarah */
.container-sejarah {
  max-width: 1150px; /* Mengurangi lebar maksimum dari 1200px menjadi 900px */
  margin: 40px auto; /* Memberi margin dan memposisikan di tengah */
  padding: 20px; /* Padding internal */
}

/* H2 kini hanya berlaku di dalam .container-sejarah */
/* Aturan H2 dihapus sesuai permintaan */

.sejarah-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 60px;
  gap: 30px;
}

.sejarah-item:nth-child(even) {
  flex-direction: row-reverse; /* Ganti urutan untuk item genap */
}

.sejarah-text {
  flex: 2;
  min-width: 300px;
  padding: 20px;
  background-color: #ffebf0; /* Pink lebih muda */
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.sejarah-text h3 {
  color: #e0a8b8; /* Pink sedikit lebih gelap */
  font-size: 1.8em;
  margin-top: 0;
  margin-bottom: 15px;
}

/* Justify paragraph text in sejarah-text */
.sejarah-text p {
  text-align: justify;
}

.sejarah-image {
  flex: 1;
  min-width: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sejarah-image img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan */
  transition: transform 0.3s ease, filter 0.3s ease;
  object-fit: cover; /* Memastikan gambar mengisi ruang dengan baik */
}

.sejarah-image img.portrait {
  width: 500px;
  height: 600px;
}

.sejarah-image img.landscape {
  width: 500px;
  height: 300px;
}

.sejarah-image img:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* Responsif */
@media (max-width: 768px) {
  .container-sejarah {
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
  }

  /* H2 responsif di dalam .container-sejarah */
  /* Aturan H2 responsif dihapus sesuai permintaan */

  .sejarah-item {
    flex-direction: column;
    margin-bottom: 40px;
  }

  .sejarah-item:nth-child(even) {
    flex-direction: column; /* Reset urutan untuk mobile */
  }

  .sejarah-text {
    padding: 15px;
  }

  .sejarah-image img.portrait,
  .sejarah-image img.landscape {
    width: 100%;
    height: auto;
    max-width: 350px; /* Batasi lebar gambar di mobile */
    max-height: none;
  }
}

@media (max-width: 480px) {
  /* H2 responsif di dalam .container-sejarah */
  /* Aturan H2 responsif dihapus sesuai permintaan */

  .sejarah-text h3 {
    font-size: 1.5em;
  }
}

/* legalitas   */
/* --- Container Legalitas Styling --- */
.container-legalitas {
  max-width: 1150px; /* Adjusted max-width to make it narrower */
  margin: 0 auto;
  padding: 40px; /* Moved padding from section to here */
  background-color: var(--white); /* Moved background from section to here */
  border-radius: 12px; /* Moved border-radius from section to here */
  box-shadow: 0 4px 10px var(--shadow); /* Moved box-shadow from section to here */
  width: 100%; /* Moved width from section to here */
}

/* --- Heading Styling --- */
.container-legalitas h2 {
  /* Targeting h2 within the new container */
  text-align: center;
  margin-bottom: 30px;
  font-size: 2em;
  color: var(--accent-pink);
  position: relative;
}

.container-legalitas h2::after {
  /* Targeting h2::after within the new container */
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--accent-pink);
  border-radius: 2px;
}

/* --- Legalitas Content Specifics --- */
#legalitas p {
  /* ID remains on the container-legalitas div */
  text-align: justify;
  margin-bottom: 15px;
  padding: 0 10px;
  font-size: 1.05em;
}

#legalitas ul {
  /* ID remains on the container-legalitas div */
  list-style: disc;
  margin: 0 10px 20px 30px;
  padding: 0;
}

#legalitas ul li {
  /* ID remains on the container-legalitas div */
  margin-bottom: 8px;
  padding: 5px 0;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border-radius: 5px;
}

#legalitas ul li:hover {
  /* ID remains on the container-legalitas div */
  background-color: var(--secondary-pink);
  transform: translateX(5px);
  cursor: pointer;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .container-legalitas {
    /* Targeting the new container */
    padding: 30px;
  }

  .container-legalitas h2 {
    /* Targeting h2 within the new container */
    font-size: 1.8em;
  }
}

@media (max-width: 480px) {
  .container-legalitas {
    /* Targeting the new container */
    padding: 20px;
  }

  .container-legalitas h2 {
    /* Targeting h2 within the new container */
    font-size: 1.5em;
  }

  #legalitas p {
    font-size: 1em;
  }

  #legalitas ul {
    margin-left: 20px;
  }
}