/* Background gradasi */
body {
     padding-top: 80px; /* Sesuaikan dengan tinggi header */
     background: linear-gradient(135deg, #ffd700, #ff8c00);
     color: #fff;
     font-family: 'Arial', sans-serif;
     margin: 0;
 }
 
 /* Header */
 .header {
     position: fixed; /* Membuat header tetap di atas */
     top: 0;          /* Posisikan di bagian paling atas */
     left: 0;         /* Posisikan di bagian paling kiri */
     width: 100%;     /* Lebar header 100% */
     z-index: 1000;   /* Pastikan header selalu di atas elemen lain */
     padding: 20px 0;
     background: rgb(8 8 8);
 }
 
 .header .logo img {
     height: 60px;
 }
 
 .header .buttons .btn {
     font-size: 0.9rem;
     padding: 8px 16px;
 }
 
 /* Hero Section */
 .hero {
     padding: 100px 0;
     background: rgba(255, 255, 255, 0.1);
 }
 
 .hero-content h1 {
     font-size: 2.5rem;
     font-weight: bold;
 }
 
 .hero-content p {
     font-size: 1.25rem;
 }
 
 .hero-content img {
     border-radius: 15px;
     max-width: 100%;
     height: auto;
 }

 /* Style untuk hero section */

 .col-md-6 {
     text-align: center;
     padding: 3px;
 }
 
 .hero {
     padding: 100px 0;
     background-image: url(//cdn.hub88.io/pragmatic/GatesOfOlympus_bg.jpg);
     background-size: cover;
 }
 
 .hero h1 {
     font-size: 3rem;
     font-weight: bold;
     margin-bottom: 20px;
 }
 
 .hero p {
     font-size: 1.5rem;
     margin-bottom: 30px;
 }
 
 .hero .btn-primary {
     background: #2575fc;
     border: none;
     border-radius: 10px;
     padding: 10px 20px;
     font-size: 1.1rem;
 }
 
 .hero .btn-primary:hover {
     background: #1a5bbf;
 }
 
 /* Responsif untuk tablet dan mobile */
 @media (max-width: 768px) {
     .hero {
         padding: 60px 0;
     }
 
     .hero h1 {
         font-size: 2rem;
     }
 
     .hero p {
         font-size: 1rem;
     }
 
     .hero .btn-primary {
         font-size: 1rem;
     }
 }
 
 @media (max-width: 576px) {
     .hero {
         padding: 40px 0;
     }
 
     .hero h1 {
         font-size: 1.75rem;
     }
 
     .hero p {
         font-size: 0.9rem;
     }
 
     .hero .btn-primary {
         font-size: 0.9rem;
     }
 }
 
 /* Card Promo */
 .promo-section {
     padding: 50px 0;
 }
 
 .promo-card {
     background: rgba(255, 255, 255, 0.9);
     border: none;
     border-radius: 15px;
     padding: 2rem;
     max-width: 800px;
     margin: 0 auto;
 }
 
 .promo-card .card-title {
     font-weight: bold;
     color: #2575fc;
     font-size: 1.75rem;
 }
 
 .promo-card .btn-primary {
     background: #2575fc;
     border: none;
     border-radius: 10px;
     padding: 10px 20px;
     font-size: 1rem;
 }
 
 .promo-card .btn-primary:hover {
     background: #1a5bbf;
 }

 /* Style untuk section */
.promo-section {
    padding: 50px 0;
    background: rgba(255, 255, 255, 0.1);
}

.promo-section h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
}

/* Style untuk accordion */
.accordion-item {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 10px;
    margin-bottom: 10px;
}

.accordion-button {
    font-weight: bold;
    color: #2575fc;
    background: rgba(255, 255, 255, 0.9);
    border: none;
}

.accordion-button:not(.collapsed) {
    color: #2575fc;
    background: rgba(255, 255, 255, 0.9);
}

.accordion-body {
    padding: 20px;
}

.accordion-body p {
    color: #000;
}

.accordion-body img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 15px;
}
 
 /* Responsif untuk tablet dan mobile */
 @media (max-width: 768px) {
     .hero {
         padding: 60px 0;
     }
 
     .hero-content h1 {
         font-size: 2rem;
     }
 
     .hero-content p {
         font-size: 1rem;
     }
 
     .promo-card {
         padding: 1.5rem;
     }
 
     .promo-card .card-title {
         font-size: 1.5rem;
     }
 
     .promo-card .btn-primary {
         font-size: 0.9rem;
     }
 }
 
 @media (max-width: 576px) {
     .hero {
         padding: 40px 0;
     }
 
     .hero-content h1 {
         font-size: 1.75rem;
     }
 
     .hero-content p {
         font-size: 0.9rem;
     }
 
     .promo-card {
         padding: 1rem;
     }
 
     .promo-card .card-title {
         font-size: 1.25rem;
     }
 
     .promo-card .btn-primary {
         font-size: 0.8rem;
     }
 }