body {
  background: linear-gradient(135deg, #000 60%, #5a1a43 100%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

.join-btn {
  background-color: #ff66b2;
  color: #fff;
  border-radius: 30px;
  padding: 10px 25px;
  transition: 0.3s;
}

.join-btn:hover {
  background-color: #e0559e;
}



/* Responsif */
@media (max-width: 768px) {
  .hero {
    text-align: center;
  }

  .hero img {
    margin-top: 30px;
  }
}

h1, h2, h3, h4, h5, p {
  font-family: 'Playfair Display', serif;
}
.hero img {
  width: 50%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  }


  /* Font setup */
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    line-height: 1.2;
}

.hero-subtext {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
}

.btn-pink {
    background-color: #ff4fb0;
    color: #fff;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

.btn-pink:hover {
    background-color: #ff69b4;
}

.btn-outline-pink {
    border: 2px solid #ff4fb0;
    color: #ff4fb0;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}

.btn-outline-pink:hover {
    background-color: #ff4fb0;
    color: #fff;
}

.hero-img {
    max-width: 90%;
    height: auto;
}

/* Responsive tweak */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-section {
        text-align: center;
    }

    .hero-img {
        max-width: 70%;
        margin-top: 2rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.7rem;
    }

    .btn-pink, .btn-outline-pink {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }
}
/* Stats */

.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #6a0d6a; /* Ungu tua */
  font-weight: 700;
}

.stat-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

/* Responsif */
@media (max-width: 768px) {
  .stat-number {
    font-size: 1.6rem;
  }

  .stat-text {
    font-size: 1rem;
  }
}
/* Media Partners */

    .crypto-bar {
      padding: 25px 0;
      text-align: center;
    }

    .crypto-item {
      display: inline-flex;
      align-items: center;
      margin: 0 30px;
    }

    .crypto-item img {
      width: 35px;
      height: 35px;
      margin-right: 10px;
    }

    .crypto-item span {
      font-weight: 500;
      color: #f5f5f5;
      letter-spacing: 1px;
      font-size: 1rem;
    }


    @media (max-width: 768px) {
      .crypto-item {
        margin: 10px;
        flex-direction: column;
      }

      .crypto-item span {
        font-size: 0.9rem;
        margin-top: 5px;
      }
    }

/* SUbcription */
    .subscribe-section {
      /* background-color: #0d0b0b; */
      padding: 60px 20px;
      text-align: center;
    }

    .subscribe-section h2 {
      font-size: 2rem;
      font-weight: 700;
      color: #fff;
    }

    .subscribe-section p {
      color: #ff33cc;
      max-width: 600px;
      margin: 15px auto 30px;
      font-size: 1rem;
    }

    .subscribe-form {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .subscribe-form input[type="email"] {
      background-color: #1a1a1a;
      border: none;
      color: #fff;
      padding: 10px 20px;
      border-radius: 10px;
      width: 280px;
      outline: none;
      transition: 0.3s ease;
    }

    .subscribe-form input[type="email"]:focus {
      background-color: #222;
    }

    .subscribe-form button {
     color: #fff;
  transition: 0.3s;
      background-color: #ff33cc;
      border: none;
      font-weight: 500;
      padding: 10px 25px;
      border-radius: 10px;
      transition: 0.3s ease;
    }

    .subscribe-form button:hover {
      background-color: #fff;
      color: #ff66b2;
    }



    /* educrypto */

    
.crypto-section {
  background: linear-gradient(135deg, #000 40%, #8a2a67 100%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.crypto-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.crypto-subtitle {
  color: #ff66b2;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.crypto-heading {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.crypto-list {
  list-style: none;
  padding-left: 0;
}

.crypto-list li {
  color: #ff66b2;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.crypto-icon {
  width: 160px;
  height: 160px;
  border-radius: 15px;
  background: linear-gradient(145deg, #ff66b2, #7a1a5b);
  padding: 20px;
}

/* Responsif */
@media (max-width: 768px) {
  .crypto-title {
    font-size: 2rem;
    text-align: center;
  }

  .crypto-subtitle {
    text-align: center;
  }

  .crypto-list {
    text-align: center;
  }

  .crypto-icon {
    width: 130px;
    height: 130px;
  }
}

/* page news */
/* Default Filter Button */
.category-btn {
    color: #ff4d88;
    border: 1px solid #ff4d88;
    font-weight: 600;
    transition: 0.3s;
}

/* Hover */
.category-btn:hover {
    background: white;
    color: #ff4d88 !important;
    border-color: white;
}

/* Active Category */
.category-btn.active {
    background: #ff4d88;
    color: white !important;
    border-color: #ff4d88;
}

.category-btn.active:hover {
    background: white;
    color: #ff4d88 !important;
}

/* Pagination Container */
.pagination {
    --bs-pagination-bg: #0f0f0f;
    --bs-pagination-border-color: #222;
    --bs-pagination-color: #ff4d88;
    --bs-pagination-hover-color: #ff4d88;
    --bs-pagination-hover-bg: #ffffff;
    --bs-pagination-hover-border-color: #ffffff;
    --bs-pagination-focus-color: #ff4d88;
    --bs-pagination-focus-bg: #ffffff;

    --bs-pagination-active-bg: #ff4d88;
    --bs-pagination-active-border-color: #ff4d88;
    --bs-pagination-active-color: white;

    font-weight: 600;
}

/* Make pagination rounded like WoMic */
.pagination .page-link {
    border-radius: 8px !important;
    background-color: #0f0f0f;
}

.pagination .active .page-link {
    color: white !important;
    background-color: #ff4d88 !important;
    border-color: #ff4d88 !important;
}