/* Global Styles */
          body {
               font-family: 'Poppins', sans-serif;
               background-color: #fffacd;
               background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
               background-size: 20px 20px;
               color: #343a40;
               /* Warna teks gelap untuk kontras */
          }

          /* Navbar Sticky */
          .navbar {
               background-color: #080808 !important;
               padding: 1rem 0;
               position: sticky;
               top: 0;
               z-index: 1000;
          }

          .navbar-brand img {
               height: 60px;
          }

          .navbar-nav .nav-link {
               color: #fff !important;
               font-weight: 600;
               margin: 0 10px;
          }

          .navbar-nav .nav-link.btn {
               padding: 8px 20px;
               border-radius: 5px;
          }

          .navbar-nav .nav-link.btn-success {
               background-color: #ffc107;
               border: none;
          }

          .navbar-nav .nav-link.btn-warning {
               background-color: #757575;
               border: none;
          }

          /* Hero Section */
          .hero {
               background: linear-gradient(135deg, #6a11cb, #2575fc);
               height: 60vh;
               display: flex;
               align-items: center;
               justify-content: center;
               text-align: center;
               color: #fff;
               position: relative;
               overflow: hidden;
          }
          

          .hero::before {
               content: '';
               position: absolute;
               top: -50%;
               left: -50%;
               width: 200%;
               height: 200%;
               background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, transparent 10.01%);
               background-size: 20px 20px;
               animation: moveBackground 10s linear infinite;
               opacity: 0.5;
          }

          @keyframes moveBackground {
               0% {
                    transform: translate(0, 0);
               }

               100% {
                    transform: translate(50%, 50%);
               }
          }

          .hero h1 {
               font-size: 2.5rem;
               /* Ukuran font diperkecil */
               font-weight: 600;
               margin-bottom: 20px;
               position: relative;
               z-index: 1;
          }

          .hero p {
               font-size: 1.1rem;
               /* Ukuran font diperkecil */
               margin-bottom: 30px;
               position: relative;
               z-index: 1;
          }

          .hero .btn {
               font-size: 1rem;
               /* Ukuran font diperkecil */
               padding: 10px 25px;
               /* Ukuran tombol diperkecil */
               border-radius: 5px;
               position: relative;
               z-index: 1;
               background-color: #ff6f61;
               /* Warna tombol yang kontras */
               border: none;
               transition: background-color 0.3s ease;
          }

          .hero .btn:hover {
               background-color: #ff3b2f;
               /* Warna tombol saat hover */
          }

          /* Section Styling */
          section {
               scroll-margin-top: 70px;
               /* Scroll padding untuk navbar */
               padding: 60px 0;
          }

          section h2 {
               font-size: 2rem;
               /* Ukuran font diperkecil */
               font-weight: 600;
               margin-bottom: 40px;
               text-align: center;
          }

          /* Card Styling */
          .card {
               border: none;
               border-radius: 10px;
               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
               transition: transform 0.3s ease;
               text-align: center;
               background-color: rgba(255, 255, 255, 0.9);
               /* Card semi-transparan */
               color: #343a40;
               margin-bottom: 20px;
               /* Jarak antar card */
          }

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

          .card-title {
               font-size: 1.25rem;
               /* Ukuran font diperkecil */
               font-weight: 600;
          }

          .card-text {
               font-size: 0.9rem;
               /* Ukuran font diperkecil */
               color: #666;
          }

          /* Icon Styling */
          .icon {
               font-size: 2.5rem;
               color: #6a11cb;
               margin-bottom: 15px;
          }

          /* Statistik Box Styling */
          .card.text-center {
               border: none;
               border-radius: 10px;
               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
               transition: transform 0.3s ease;
          }

          .card.text-center:hover {
               transform: translateY(-10px);
          }

          .card.text-center .icon {
               font-size: 2.5rem;
               margin-bottom: 15px;
          }

          .card.text-center .card-title {
               font-size: 1.5rem;
               font-weight: 600;
          }

          .card.text-center .card-text.display-4 {
               font-size: 2.5rem;
               font-weight: 700;
               margin: 10px 0;
          }

          .card.text-center .card-text {
               font-size: 1rem;
               color: rgba(255, 255, 255, 0.8);
          }

          .card.text-center.bg-warning .card-text {
               color: #343a40;
               /* Warna teks gelap untuk background kuning */
          }
          
          
        /* Icon Sosial Media */
.social-media {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-media a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-media a:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


.social-media .whatsapp {
    background-color: #25d366;
}

.social-media .telegram {
    background-color: #0088cc;
}

.social-media .facebook {
    background-color: #1877f2;
}

.social-media .instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

          

          /* Footer */
          footer {
               background-color: #343a40;
               color: #fff;
               text-align: center;
               padding: 20px 0;
          }

          footer p {
               margin: 0;
          }