/* Reset Margin dan Padding */
  html,
  body {
      margin: 0;
      padding: 0;
      height: 100%;
  }
  .page-wrapper {
      display: flex;
      flex-direction: column;
      min-height: 50vh;
  }
/* Navbar */
#navbar {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1200px;
    z-index: 1000;
    background-color: #0a2e43;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 8px 20px; /* Kurangi padding atas-bawah */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
/* Kurangi padding container agar lebih rapat dengan navbar */
#navbar .container {
    padding: 0 10px; /* Kurangi padding samping */
    margin: 0 auto; /* Pastikan tetap center */
}

/* Navbar Container */
#navbar .container {
    max-width: 960px;
}

/* Logo */
#navbar .navbar-brand img {
    width: 40px;
    border-radius: 5px;
}

/* Teks Navbar */
#navbar .navbar-brand,
#navbar .nav-link {
    color: white !important;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Hover effect pada nav-link */
#navbar .nav-link:hover {
    color: #FFB81C !important;
    font-weight: bold;
}

/* Highlight menu aktif */
#navbar .nav-link.active {
    font-weight: bold;
    color: #FFB81C !important;
}

/* Dropdown menu */
#navbar .dropdown-menu {
    background-color: #0a2e43;
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#navbar .dropdown-item {
    color: white !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#navbar .dropdown-item:hover {
    background-color: #FFB81C !important;
}

/* Tombol highlight khusus */
#navbar .nav-link.highlight {
    background-color: #FFB81C;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#navbar .nav-link.highlight:hover {
    background-color: #0a2e43;
    color: #FFB81C !important;
}

#navbar .container {
    max-width: 1200px; /* Lebarkan container navbar */
}

/* Responsive: Perbesar ukuran di layar besar */
@media (min-width: 1200px) {
    #navbar {
        width: 85%; /* Untuk laptop besar, agak dikurangi agar tetap proporsional */
        max-width: 1300px;
    }
}

/* Responsive untuk mobile */
@media (max-width: 991px) {
    #navbar {
        width: 100%;
        border-radius: 0;
    }

    /* Pastikan hamburger menu bisa ditampilkan */
    .navbar-toggler {
        border: 1px solid white;
        padding: 5px 10px;
        background-color: #FFB81C;
        border-radius: 5px;
    }

    .navbar-toggler-icon {
        background-color: white;
        width: 24px;
        height: 3px;
        display: block;
        margin: 5px auto;
    }

    /* Saat hamburger menu dibuka */
    .navbar-collapse.show {
        background-color: #0a2e43;
        padding: 10px;
        border-radius: 10px;
    }
}

        .hero-wrapper {
            position: relative;
            min-height: 80vh; /* Full screen */
            overflow: hidden;
        }
        
        /* Menghapus margin/padding atas */
        #banner {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
        /* Agar gambar background tidak terpotong */
        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-image 0.5s ease-in-out;
            filter: brightness(70%);
            z-index: 0;
        }
        
        /* Pastikan tidak ada celah dengan navbar */
        .hero-section {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            display: flex;
            justify-content: flex-end; /* Menurunkan teks ke bawah */
            padding-bottom: 20vh; /* Atur jarak ke bawah */
        }
        
        .hero-section.active {
            opacity: 1;
            z-index: 1;
        }

        .blurred {
            filter: blur(3px) brightness(70%);
        }

        .hero-content {
            position: relative;
            z-index: 1;
            text-align: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            
        }

         .hero-section h1 {
            font-size: clamp(2rem, 5vw, 5rem);
            font-weight: 900;
            margin: 0;
            color: #2ca9c7;
            -webkit-text-stroke: clamp(0.5px, 0.3vw, 2px) #fff; /* Lebih fleksibel */
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

        /* Di layar mobile, outline lebih kecil */
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2.5rem;
                -webkit-text-stroke: 0.05px #fff;
            }
        }


        .hero-section p {
            font-size: clamp(1rem, 3vw, 2rem); /* Min 1rem, default 3vw, max 2rem */
            font-weight: bold;
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .hero-section {
                height: 200px;
                padding :5vh;
            }

            .hero-section h1 {
                font-size: 2.5rem;
            }

            .hero-section p {
                font-size: 1rem;
            }
        }
/* Slider Produk */
.produk-slider {
    position: relative;
    overflow: hidden;
    margin-top: -95px; /* Naikkan lebih tinggi */
    padding: 10px 0;
    z-index: 10;
    max-width: 1200px; /* Batas maksimum */
    margin-left: auto;
    margin-right: auto;
}

/* Container Swiper */
.produk-slider .swiper-container {
    max-width: 100%;
    margin: 5px auto;
}

/* Wrapper */
.produk-slider .swiper-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

/* Slide */
.produk-slider .swiper-slide {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: auto; /* Biarkan Swiper atur otomatis */
}

/* Card Produk */
.produk-slider .product-card-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f1f1f1;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    width: 180px;
    height: 200px; /* Tetapkan tinggi agar seragam */
    position: relative;
    transition: transform 0.3s;
    margin-top: -10px; /* Naikkan lebih sedikit */
}

.produk-slider .product-card-custom:hover {
    transform: scale(1.05);
}

/* Box Gambar */
.image-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    width: 100%;
    background: #fff;
}

/* Gambar Produk */
.produk-slider .product-card-custom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 120px;
    padding: 10px;
}

/* Footer Produk */
.produk-slider .product-card-custom .product-footer {
    background: #007bff;
    color: #fff;
    padding: 8px;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.produk-slider .product-card-custom .product-footer h4 {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
    .produk-slider .swiper-slide {
        max-width: calc(100% / 2.5); /* Tampilkan 2 produk per baris di tablet */
    }
    .produk-slider .product-card-custom {
        width: 160px;
        height: 200px; /* Sedikit lebih kecil di mobile */
    }
    .produk-slider {
        margin-top: -50px; /* Lebih tinggi di mobile */
        padding: 5px 0;
        max-width: 100%;
    }
    .hero-section {
        padding-bottom: 5vh; /* Lebih dekat ke slider */
    }
}

@media (max-width: 480px) {
    .produk-slider {
        margin-top: -30px; /* Awalnya -40px */
    }
    .produk-slider .swiper-slide {
        max-width: calc(100% / 1.5); /* 1-2 produk per baris di smartphone */
    }
    .produk-slider .product-card-custom {
        width: 150px;
        height: 200px;
    }
       .produk-slider {
        margin-top: -120px; /* Naik lebih jauh di HP kecil */
    }
}
  .experience-section h1 {
      font-size: 4rem;
      font-weight: bold;
  }

  .experience-section h4 {
      font-size: 1.5rem;
      color: #FFB81C;
  }


  /*user logo akhir*/

  /*untuk style tentang*/
  /* Section Styling */
  #tentang {
      background-color: #f8f9fa;
      /* Latar abu-abu muda */
      padding: 3rem 0;
  }

  /* Heading Styling */
  #tentang h2,
  #tentang h3 {
      font-weight: bold;
      color: #0045b5;
      /* Biru */
  }

  /* Paragraph Styling */
  #tentang p {
      font-size: 1rem;
      color: #6c757d;
      /* Teks abu-abu */
      line-height: 1.8;
  }

  /* Card Styling */
  #tentang .card {
      border: 1px solid #e0e0e0;
      /* Border ringan */
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      /* Efek bayangan */
  }

  #tentang .card:hover {
      transform: translateY(-5px);
      /* Efek hover */
  }

  #tentang .card-img-top {
      height: 150px;
      object-fit: cover;
      /* Memastikan gambar sesuai ukuran */
  }

  #tentang .card-body {
      text-align: center;
  }

  #tentang .btn-primary {
      background-color: #0045b5;
      border: none;
      font-size: 0.9rem;
      padding: 0.4rem 0.8rem;
  }

  #tentang .btn-primary:hover {
      background-color: #003399;
  }

  /* Grid Responsiveness */
  @media (max-width: 768px) {
      #tentang .card {
          width: 100%;
          /* Membuat card satu baris di layar kecil */
      }

      #tentang .d-flex {
          flex-direction: column;
          /* Elemen galeri vertikal di layar kecil */
      }
  }


  /*akhir tentang*/

  /* GALERI CARD STYLE */
  .gallery-card {
      width: 100%;
      max-width: 48%;
      border-radius: 10px;
      overflow: hidden;
      background-color: #f9f9f9;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

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

  .gallery-card:hover {
      transform: scale(1.05);
      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
  }

  .gallery-card .card-body {
      padding: 15px;
      text-align: center;
  }

  .gallery-card .card-title {
      font-size: 1rem;
      color: #0045b5;
      margin-bottom: 10px;
  }

  /* TIM CARD STYLE */
  .team-card {
      max-width: 300px;
      border-radius: 15px;
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
      transition: transform 0.3s ease;
  }

  .team-card img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      margin: 15px auto 10px;
      display: block;
  }

  .team-card:hover {
      transform: translateY(-10px);
      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
  }

  .team-card .card-title {
      font-size: 1.2rem;
      font-weight: bold;
      color: #333;
  }

  .team-card .text-muted {
      font-size: 0.9rem;
      color: #777;
      margin-bottom: 10px;
  }

  /* KONTROL TINGGI CARD */
  .card img {
      height: auto;
  }

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

      .gallery-card,
      .team-card {
          max-width: 100%;
          margin-bottom: 20px;
      }

      .gallery-card img,
      .team-card img {
          height: auto;
      }
  }

  /*akhir galery*/

  #timkinarya {
      background-color: #f9f9f9;
  }

  #timkinarya .swiper-container {
      padding: 20px 0;
  }

  #timkinarya .card {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  #timkinarya .card-title {
      font-size: 1.1rem;
      font-weight: bold;
      color: #333;
  }

  #timkinarya .card img {
      border: 3px solid #0045b5;
  }

  #timkinarya .swiper-button-next,
  #timkinarya .swiper-button-prev {
      color: #0045b5;
  }


  /*akhir tim kinarya*/
  /*galery*/
  /* Galeri Card Styling */
  .gallery-card {
      width: 90%;
      margin: auto;
      border: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* Sidebar Styling */
  .sidebar {
      padding: 20px;
      background-color: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .sidebar-section h4 {
      font-size: 1.2rem;
      margin-bottom: 20px;
      color: #333;
  }

  .sidebar-post {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
  }

  .sidebar-post img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 5px;
      margin-right: 15px;
  }

  .sidebar-post p {
      margin: 0;
      font-size: 0.9rem;
      color: #555;
  }

  .sidebar-post p strong {
      color: #333;
      font-size: 1rem;
  }

  .sidebar-post .text-muted {
      font-size: 0.8rem;
      color: #777;
  }

  .sidebar-post-link {
      text-decoration: none;
      color: inherit;
      transition: color 0.2s;
  }

  .sidebar-post-link:hover {
      color: #007bff;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .sidebar {
          padding: 10px;
      }

      .sidebar-post img {
          width: 60px;
          height: 60px;
      }

      .sidebar-post {
          flex-direction: row;
          justify-content: flex-start;
      }
  }

  /*akhir galery*/
  /* footer */
  #footercv {
      background-color: #002f45;
      padding: 10px 0; /* Kurangi padding atas dan bawah */
  }

  #footercv a {
      color: white;
      /* Warna default link adalah putih */
      transition: color 0.3s ease, font-weight 0.3s ease;
      /* Transisi untuk perubahan warna dan font weight */
  }

  /* Styling untuk bagian Layanan Kami */
  #footercv .footer-links ul {
      padding: 0;
      margin: 0;

  }

  /* Menghilangkan underline dari tautan */
  .footer-links a {
      color: #fff;
      text-decoration: none !important;
      border: none;
      /* Menghindari border yang bisa muncul */
      outline: none;
      /* Menghindari garis fokus */
  }


  #footercv a:hover {
      font-weight: bold;
      /* Menebalkan teks */
      color: #ffcc00;
      /* Mengubah warna teks menjadi kuning */
  }


  /* Menambahkan padding dan margin untuk elemen dalam Layanan Kami */
  #footercv .footer-links {
      padding: 15px;
      margin-top: 10px;
  }

  #footercv .footer-links h5 {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
  }

  /* Styling untuk list dalam footer */
  #footercv .footer-links ul li {
      margin-bottom: 8px;
      /* Menambahkan jarak antar list */
  }

  /* Responsif untuk layar lebih kecil */
  @media (max-width: 768px) {
      #footercv .footer-links {
          text-align: center;
      }
  }

  /* Load Screen */
  .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
  }

  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(22, 91, 132, 1);
      z-index: 1;
  }

  .logo {
      width: 100px;
      height: 100px;
      background: url('aset/logo/kinaryatama-logo.png') no-repeat center center;
      background-size: contain;
      animation: logo-animation 2s infinite;
      z-index: 2;
  }

  /* Keyframe Animation */
  @keyframes logo-animation {
      0% {
          transform: scale(0.1);
      }

      25% {
          transform: scale(1.0);
      }

      50% {
          transform: scale(0.9);
      }

      75% {
          transform: scale(1.0);
      }

      100% {
          transform: scale(0.9);
      }
  }

  /* Responsive Styles */
  @media (max-width: 768px) {
      .logo {
          width: 70px;
          /* Smaller logo for mobile screens */
          height: 70px;
      }

      .overlay {
          background-color: rgba(22, 91, 132, 0.9);
          /* Slightly transparent overlay on mobile */
      }
  }

  @media (max-width: 480px) {
      .logo {
          width: 50px;
          /* Even smaller logo for very small screens */
          height: 50px;
      }
  }

  /* loader web */

  /* Floating widget button style */
  .floating-widget-button {
      display: block;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #fff;
      color: #000;
      /* Adjusted text color for visibility */
      border: none;
      border-radius: 50%;
      padding: 15px;
      cursor: pointer;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      z-index: 9999;
  }

  /* Hover effect for floating button */
  .floating-widget-button:hover {
      background-color: #0a2e43;
      color: #fff;
  }

  /* Modal background style */
  .modal-background {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9998;
      overflow: auto;
  }

  /* Modal content style */
  .modal-call {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #0a2e43;
      color: #fff;
      padding: 20px;
      width: 90%;
      max-width: 500px;
      z-index: 9999;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  /* Form button alignment */
  .callCenterForm button {
      align-items: center;
  }

  /* Styling for the action buttons inside the modal */
  .tombol {
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: 5px;
  }

  /* Modal button style */
  .modal-call button {
      border-radius: 50px;
      padding: 10px 20px;
      width: 45%;
      background-color: #fff;
      color: #0a2e43;
      border: none;
      cursor: pointer;
  }

  .modal-call button:hover {
      background-color: #0a2e43;
      color: #fff;
  }

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

      /* Adjust the modal for smaller screens */
      .modal-call {
          width: 80%;
          padding: 15px;
      }

      /* Adjust button sizes for mobile screens */
      .modal-call button {
          padding: 8px 15px;
          width: 45%;
      }
  }

  @media (max-width: 480px) {

      /* Adjust for very small screens (mobile) */
      .modal-call {
          width: 90%;
          padding: 10px;
      }

      .floating-widget-button {
          padding: 12px;
      }

      .modal-call button {
          padding: 6px 12px;
          width: 100%;
      }
  }
  /*css baru*/
         .hero-wrapper {
            position: relative;
            min-height: 85vh; /* Full screen */
            overflow: hidden;
        }
        
        /* Menghapus margin/padding atas */
        #banner {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
        /* Agar gambar background tidak terpotong */
        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            filter: brightness(70%);
            background-repeat: no-repeat;
            transition: background-image 0.5s ease-in-out;
            z-index: 0;
        }
        
        /* Pastikan tidak ada celah dengan navbar */
        .hero-section {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            display: flex;
            justify-content: flex-end; /* Menurunkan teks ke bawah */
            padding-bottom: 15vh; /* Atur jarak ke bawah */
        }
        
        .hero-section.active {
            opacity: 1;
            z-index: 1;
        }

        .blurred {
            filter: blur(3px) brightness(70%);
        }

        .hero-content {
            position: relative;
            z-index: 1;
            text-align: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }

          .hero-section h1 {
            font-size: 5rem;
            font-weight: 900; /* Extra Bold */
            margin: 0;
            color: #2ca9c7; /* Warna teks utama */
            -webkit-text-stroke: 3px #fff; /* Outline teks */
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Bayangan teks */
        }

        .hero-section p {
            font-size: 2rem;
            font-weight: bold;
            margin-top: 10px;
        }

        @media (max-width: 768px) {
            .hero-section {
                max-width:100%;
            }

            .hero-section h1 {
                font-size: 2.5rem;
            }

            .hero-section p {
                font-size: 1rem;
            }
        }
        /* Section Logo */
.edu-section {
    padding: 50px 0;
    background-color: #f9f9f9;
    text-align: center;
}

/* Swiper Container */
.edu-logo-slider {
    width: 100%;
    overflow: hidden;
}

/* Styling untuk Slide Logo */
.edu-logo-slider .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Styling untuk Logo */
.edu-logo-item img {
    max-width: 100px; /* Ukuran default */
    height: auto;
    transition: transform 0.3s ease-in-out;
    object-fit: contain;
}

.edu-logo-item img:hover {
    transform: scale(1.1);
}

/* Nama Instansi */
.edu-logo-item p {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

/* Responsiveness */
@media (max-width: 768px) {
    .edu-logo-item img {
        max-width: 80px; /* Ukuran lebih kecil untuk HP */
    }
}

@media (max-width: 480px) {
    .edu-logo-item img {
        max-width: 70px;
    }
}

        /*untuk style running text */
        .marquee {
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }
        
        .marquee-content {
            display: flex;
            gap: 50px; /* Jarak antar teks */
            min-width: 100%;
            animation: marqueeScroll 10s linear infinite;
        }
        
        @keyframes marqueeScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); } /* Gerakan setengah dulu lalu looping */
        }
        
        h4 {
            font-size: 1.5rem; /* Ukuran font lebih besar */
            margin: 0;
        }
/*untuk card paket*/
.nav-tabs .nav-link.active {
            color: #007bff !important;
            font-weight: bold;
        }
        .tab-pane {
            padding: 20px;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 10px 10px;
            background: #ffffff;
        }
        .package-card img {
            max-width: 100%; /* Pastikan tidak melebihi lebar card */
            height: 120px;
            max-height: 120px; /* Batasi tinggi gambar */
            object-fit: cover; /* Agar tetap proporsional */
            border-radius: 5px;
        }

        .package-card {
            border: 1px solid #ced4da;
            border-radius: 15px;
            text-align: center;
            padding: 10px;
            margin: 5px 0;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        .package-card:hover {
            transform: scale(1.05);
        }
        .package-title {
            font-size: 1.1em; /* Kurangi ukuran font */
            font-weight: bold;
            margin-bottom: 10px;
        }
        .package-price {
            color: #28a745;
            font-weight: bold;
            font-size: 1em; /* Sesuaikan ukuran */
            margin: 10px 0;
        }
        .package-description {
            font-size: 0.9em;
        }
        .btn-tertarik {
            background-color: #59CE72;
            color: white;
            padding: 4px 15px; /* Tambah padding agar lebih besar */
            border-radius: 8px; /* Bikin lebih rounded */
            text-decoration: none;
            font-size: 0.9em; /* Perbesar font */
            display: inline-block; /* Pastikan ukuran mengikuti padding */
        }

        .btn-tertarik:hover {
            background-color: #DF761A;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
        .header {
            text-align: center;
            color: #343a40;
            font-weight: bold;
            margin-bottom: 30px;
        }
        .package-description {
            max-height: 80px; /* Batasi tinggi maksimum agar tidak terlalu panjang */
            overflow: hidden; /* Sembunyikan teks yang melebihi batas */
            text-overflow: ellipsis; /* Tambahkan efek elipsis (...) */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* Batasi ke 3 baris */
            -webkit-box-orient: vertical;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .package-description p {
            margin-bottom: 10px;
        }
        
        .package-description strong {
            font-weight: bold;
        }
        
        .package-description em {
            font-style: italic;
        }