body {  
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://lexacdn.vip/assets/GS/bg/bgggg.webp');  
      background-size: cover;  
      background-position: center;  
      color: #0080ff;  
      font-family: 'Nunito', sans-serif;  
    }  

    .navbar-custom {  
      background-color: rgba(22, 27, 34, 0.9);  
      padding: 1rem 0;  
      border-bottom: 1px solid #444;  
    }  

    .navbar-brand .navbar-item img {  
      max-height: 3rem;  
    }  

    .navbar-menu {  
      background-color: rgba(22, 27, 34, 0.9);  
    }  

    .navbar-item {  
      color: #c9d1d9;  
      transition: color 0.3s ease;  
    }  

    .navbar-item:hover {  
      color: #58a6ff;  
    }  

    .button-custom {  
      background-color: #58a6ff;  
      color: #fff;  
      box-shadow: 0 0 5px #58a6ff, 0 0 10px #58a6ff, 0 0 20px #58a6ff, 0 0 40px #58a6ff;  
      border-radius: 20px;  
      padding: 0.75rem 1.5rem;  
      font-size: 1.25rem;  
      margin: 0.5rem;  
    }  

    .button-custom:hover {  
      background-color: #1f6feb;  
      box-shadow: 0 0 10px #1f6feb, 0 0 20px #1f6feb, 0 0 30px #1f6feb, 0 0 40px #1f6feb;  
    }  

    .neon-text {  
      color: #58a6ff;  
      text-shadow: 0 0 5px #58a6ff, 0 0 10px #58a6ff, 0 0 20px #58a6ff, 0 0 40px #58a6ff;  
      font-size: 2.5rem;  
    }  

    .hero-body {  
      padding: 2rem;  
    }  

    .feature-box {  
      background-color: rgba(22, 27, 34, 0.9);  
      border: 1px solid #444;  
      padding: 1rem;  
      margin: 0.5rem;  
      border-radius: 8px;  
      text-align: center;  
      transition: all 0.3s ease;  
    }  

    .feature-box:hover {  
      transform: scale(1.05);  
      box-shadow: 0 0 20px rgba(88, 166, 255, 0.5);  
    }  

    .feature-icon {  
      font-size: 2rem;  
      margin-bottom: 0.5rem;  
      color: #58a6ff;  
    }  

    .feature-title {  
      font-size: 1.25rem;  
      color: #c9d1d9;  
      margin-bottom: 0.5rem;  
    }  

    .feature-subtitle {  
      font-size: 1rem;  
      color: #8b949e;  
    }  

    footer {  
      background-color: rgba(22, 27, 34, 0.9);  
      color: #8b949e;  
      text-align: center;  
      padding: 1rem 0;  
      border-top: 1px solid #444;  
      margin-top: 2rem;  
    }  

    @media (min-width: 768px) {  
      .neon-text {  
        font-size: 3rem;  
      }  

      .feature-box {  
        margin: 1rem;  
      }  
    }  

    /* Gaya Slider */  
    .swiper-container {  
      width: 100%;  
      height: 400px; /* Tinggi awal slider */  
      position: relative;  
    }  

    .swiper-slide {  
      text-align: center;  
      font-size: 18px;  
      background: #fff;  
      display: flex;  
      justify-content: center;  
      align-items: center;  
    }  
    .carousel-img {  
      width: 100%;  
      background-color: transparent;  
    }  
    
    .swiper-pagination-bullet {  
      position: relative;  
      bottom: 20px;  
    }  

    /* Menghilangkan overlay semi transparan */  
    .swiper-slide::before {  
      display: none;  
    }  

    .swiper-button-prev,  
    .swiper-button-next {  
      background-color: rgba(0, 0, 0, 0.7);  
      color: white;  
      width: 40px;  
      height: 40px;  
      border-radius: 50%;  
    }  

    .swiper-button-prev::after,  
    .swiper-button-next::after {  
      font-size: 1.5rem;  
    }  

    /* Media query untuk responsivitas */  
    @media (max-width: 768px) {  
      .swiper-container {  
        height: 200px; /* Sesuaikan tinggi slider di perangkat kecil */  
      }  

      .neon-text {  
        font-size: 1.5rem; /* Sesuaikan ukuran teks di perangkat kecil */  
      }  

      .button-custom {  
        font-size: 1rem; /* Sesuaikan ukuran tombol di perangkat kecil */  
        padding: 0.5rem 1rem;   
      }  
    }