html {
      scroll-behavior: smooth;
    }

    body {
      background-color: #e8f6fc;
      font-family: 'Segoe UI', sans-serif;
      padding-top: 80px;
    }

    .navbar {
      background: rgba(27, 128, 236, 0.8);
      backdrop-filter: blur(10px);
      transition: background-color 0.4s ease;
      z-index: 1000;
    }

    .navbar-brand,
    .nav-link,
    .footer {
      color: white !important;
    }

    .navbar-brand strong {
      font-size: 1.2rem;
      letter-spacing: 1px;
    }

    .nav-link {
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-link:hover,
    .nav-link.active {
      color: #ffe600 !important;
      transform: scale(1.05);
    }

    .hero {
      background: linear-gradient(to right, #00c6ff, #0072ff);
      color: white;
      padding: 100px 0;
    }

    .section {
      padding: 60px 0;
    }

    .cta {
      background-color: #00aaff;
      color: white;
      padding: 30px;
      border-radius: 10px;
      text-align: center;
    }

    .footer {
      background-color: #005f9e;
      color: white;
      padding: 20px 0;
      text-align: center;
    }

    .navbar .nav-link i {
      margin-right: 6px;
    }
  
      
    /* Modern Package Cards */
    .pricing-card {
      border: none;
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .pricing-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .pricing-card.popular {
      transform: scale(1.05);
      z-index: 1;
    }

    .pricing-card.premium {
      border: 2px solid #ffc107;
    }

    .text-gradient {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .price-tag {
      font-size: 2.5rem;
      font-weight: bold;
      color: #2c3e50;
      margin: 1rem 0;
    }

    .price-tag .currency {
      font-size: 1.5rem;
      vertical-align: top;
    }

    .price-tag .period {
      font-size: 1rem;
      color: #7f8c8d;
    }

    .feature-list li {
      padding: 0.5rem 0;
      font-size: 0.9rem;
    }

    .modern-card .card-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      position: relative;
      overflow: hidden;
    }

    .modern-card .card-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .modern-card:hover .card-header::before {
      animation-duration: 1s;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .pricing-card {
        margin-bottom: 2rem;
      }
    }
  

  
    /* MPJS Explanation Section */
    .info-cards {
      margin: 2rem 0;
    }
    
    .info-card {
      background: white;
      padding: 1.5rem;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      text-align: center;
    }
    
    .info-card:hover {
      transform: translateY(-5px);
    }
    
    .illustration-container {
      position: relative;
    }
    
    .illustration-card {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding: 3rem;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
    .text-gradient {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
      
  
    .text-gradient {
      background: linear-gradient(90deg, #0d6efd 60%, #5bc0f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    .hover-lift {
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .hover-lift:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 8px 32px rgba(13,110,253,0.10);
    }