:root {
      --primary-yellow: #FFD600;
      --soft-yellow: #FFF59D;
      --dark-bg: #1a1a1a;
      --pure-black: #000000;
      --pure-white: #FFFFFF;
      --text-dark: #2d2d2d;
      --text-light: #6b7280;
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-800: #1f2937;
      --accent-pink: #FF6B9D;
      --accent-blue: #4A90E2;
      --accent-purple: #9B59B6;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      overflow-x: hidden;
      scroll-behavior: smooth;
      background: var(--pure-white);
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
      
    }

    /* ============ LOADING BAR ============ */
    #bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--pure-black));
      z-index: 9999;
      box-shadow: 0 0 10px var(--primary-yellow);
      transition: width 0.3s ease;
    }

    /* ============ HERO CAROUSEL FIXED ============ */
    .carousel {
      position: relative;
      z-index: 1;
    }

    .carousel-item {
      height: 650px;
      position: relative;
      overflow: hidden;
    }

    .carousel-item img {
      object-fit: cover;
      height: 100%;
      width: 100%;
      filter: brightness(0.35);
      transition: transform 8s ease;
    }

    .carousel-item.active img {
      transform: scale(1.1);
    }

    .carousel-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      z-index: 10;
      width: 85%;
    }

    .carousel-overlay h1 {
      font-size: 4rem;
      font-weight: 900;
      text-shadow: 0 4px 30px rgba(0,0,0,0.8);
      margin-bottom: 20px;
      color: var(--pure-white);
      letter-spacing: -1px;
    }

    .carousel-overlay .highlight {
      color: var(--primary-yellow);
      position: relative;
      display: inline-block;
    }

    .carousel-overlay p {
      font-size: 1.5rem;
      margin-top: 15px;
      text-shadow: 0 2px 15px rgba(0,0,0,0.8);
      color: var(--soft-yellow);
      font-weight: 500;
    }

    /* ============ HERO SECTION ============ */
    .hero-section {
      background: linear-gradient(135deg, var(--pure-white) 0%, var(--gray-100) 100%);
      padding: 100px 20px;
      position: relative;
      overflow: hidden;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255, 214, 0, 0.1), transparent);
      border-radius: 50%;
      top: -300px;
      right: -300px;
      animation: float 20s infinite ease-in-out;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-30px) rotate(180deg); }
    }

    .hero-section h1 {
      font-size: 3.5rem;
      font-weight: 900;
      color: var(--pure-black);
      margin-bottom: 20px;
    }

    .hero-section .highlight {
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-section p {
      font-size: 1.3rem;
      color: var(--text-light);
    }

    .hero-btn {
      padding: 15px 40px;
      font-size: 1.1rem;
      font-weight: 700;
      border-radius: 50px;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      margin: 10px;
      border: 3px solid transparent;
    }

    .hero-btn-primary {
      background: var(--pure-black);
      color: var(--primary-yellow);
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    .hero-btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.3);
      background: var(--dark-bg);
      color: var(--primary-yellow);
    }

    .hero-btn-secondary {
      background: transparent;
      color: var(--pure-black);
      border: 3px solid var(--pure-black);
    }

    .hero-btn-secondary:hover {
      background: var(--pure-black);
      color: var(--primary-yellow);
      transform: translateY(-3px);
    }

    /* ============ TRENDING COURSES SECTION (GEN-Z) ============ */
    .trending-section {
      padding: 80px 20px;
      background: var(--pure-white);
    }

    .course-card {
      background: var(--pure-white);
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      transition: all 0.4s ease;
      height: 100%;
      border: 2px solid transparent;
    }

    .course-card:hover {
      transform: translateY(-10px) rotate(1deg);
      box-shadow: 0 20px 50px rgba(255, 214, 0, 0.3);
      border-color: var(--primary-yellow);
    }

    .course-image {
      height: 200px;
      background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      color: white;
    }

    .course-content {
      padding: 25px;
    }

    .course-badge {
      background: var(--primary-yellow);
      color: var(--pure-black);
      padding: 5px 15px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 700;
      display: inline-block;
      margin-bottom: 10px;
    }

    .course-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--pure-black);
      margin-bottom: 10px;
    }

    .course-meta {
      display: flex;
      gap: 15px;
      margin-top: 15px;
      color: var(--text-light);
      font-size: 0.9rem;
    }

    .course-meta i {
      color: var(--primary-yellow);
    }

    /* ============ FEATURES SECTION ============ */
    .features-section {
      padding: 80px 20px;
      background: var(--gray-100);
    }

    .section-title {
      font-size: 2.8rem;
      font-weight: 900;
      color: var(--pure-black);
      margin-bottom: 50px;
      position: relative;
      display: inline-block;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 5px;
      background: var(--primary-yellow);
      border-radius: 3px;
    }

    .feature-card {
      background: var(--pure-white);
      padding: 40px 30px;
      border-radius: 25px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      transition: all 0.4s ease;
      height: 100%;
      border: 3px solid transparent;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 214, 0, 0.1), transparent);
      transform: rotate(45deg);
      transition: all 0.6s ease;
    }

    .feature-card:hover::before {
      top: 100%;
      right: 100%;
    }

    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(255, 214, 0, 0.3);
      border-color: var(--primary-yellow);
    }

    .feature-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      font-size: 2rem;
      color: var(--pure-white);
      transition: transform 0.3s ease;
      font-weight: 900;
    }

    .feature-card:hover .feature-icon {
      transform: rotate(360deg) scale(1.1);
    }

    .feature-card h3 {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--pure-black);
      margin-bottom: 15px;
    }

    .feature-card p {
      color: var(--text-light);
      line-height: 1.7;
    }

    /* ============ STATISTICS SECTION ============ */
    .stats-section {
      background: var(--pure-black);
      padding: 80px 20px;
      color: white;
      position: relative;
      overflow: hidden;
    }

    .stats-section::before {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 214, 0, 0.1), transparent);
      border-radius: 50%;
      bottom: -200px;
      left: -200px;
    }

    .stat-item {
      text-align: center;
      padding: 30px;
      position: relative;
      z-index: 1;
    }

    .stat-number {
      font-size: 4rem;
      font-weight: 900;
      display: block;
      margin-bottom: 10px;
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-label {
      font-size: 1.1rem;
      color: var(--pure-white);
      font-weight: 600;
    }

    /* ============ SOCIAL PROOF / COMMUNITY (GEN-Z) ============ */
    .community-section {
      padding: 80px 20px;
      background: linear-gradient(135deg, var(--soft-yellow), var(--primary-yellow));
    }

    .community-card {
      background: var(--pure-white);
      border-radius: 25px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s ease;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .community-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    .community-icon {
      font-size: 3rem;
      margin-bottom: 15px;
    }

    .community-card h4 {
      font-weight: 700;
      color: var(--pure-black);
      margin-bottom: 10px;
    }

    /* ============ TESTIMONIALS ============ */
    .testimonials-section {
      padding: 80px 20px;
      background: var(--pure-white);
    }

    .testimonial-card {
      background: var(--gray-100);
      padding: 40px;
      border-radius: 25px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      position: relative;
      transition: all 0.3s ease;
      height: 100%;
      border-left: 5px solid var(--primary-yellow);
    }

    .testimonial-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    .testimonial-card::before {
      content: '"';
      position: absolute;
      top: 20px;
      left: 30px;
      font-size: 5rem;
      color: var(--primary-yellow);
      opacity: 0.3;
      font-family: Georgia, serif;
    }

    .testimonial-text {
      font-size: 1.1rem;
      color: var(--text-dark);
      line-height: 1.8;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .author-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--pure-white);
      font-size: 1.5rem;
      font-weight: 900;
    }

    .author-info h5 {
      margin: 0;
      font-weight: 700;
      color: var(--pure-black);
    }

    .author-info p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-light);
    }

    .rating {
      color: var(--primary-yellow);
      font-size: 1.2rem;
      margin-top: 5px;
    }

    /* ============ FAQ SECTION ============ */
    .faq-section {
      padding: 80px 20px;
      background: var(--gray-100);
    }

    .faq-item {
      background: var(--pure-white);
      border-radius: 15px;
      padding: 25px;
      margin-bottom: 15px;
      box-shadow: 0 3px 15px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      border-left: 4px solid var(--primary-yellow);
    }

    .faq-item:hover {
      box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    }

    .faq-item summary {
      font-weight: 700;
      color: var(--pure-black);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .faq-item summary i {
      color: var(--primary-yellow);
    }

    .faq-item p {
      margin-top: 15px;
      color: var(--text-light);
      line-height: 1.7;
    }

    /* ============ CONTACT FORM ============ */
    .contact-section {
      padding: 80px 20px;
      background: var(--pure-black);
      color: white;
    }

    .contact-form {
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(20px);
      padding: 40px;
      border-radius: 25px;
      border: 2px solid var(--primary-yellow);
    }

    .form-label {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--primary-yellow);
    }

    .form-control {
      border-radius: 12px;
      padding: 12px 20px;
      border: 2px solid rgba(255,214,0,0.3);
      background: rgba(255,255,255,0.1);
      color: white;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      background: rgba(255,255,255,0.15);
      border-color: var(--primary-yellow);
      box-shadow: 0 0 0 3px rgba(255,214,0,0.2);
      color: white;
    }

    .form-control::placeholder {
      color: rgba(255,255,255,0.5);
    }

    .submit-btn {
      background: var(--primary-yellow);
      color: var(--pure-black);
      padding: 15px 40px;
      border: none;
      border-radius: 50px;
      font-weight: 800;
      font-size: 1.1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(255,214,0,0.4);
    }

    /* ============ MODERN CHATBOT ============ */
    #chat-icon {
      position: fixed;
      bottom: 25px;
      right: 25px;
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      border-radius: 50%;
      width: 65px;
      height: 65px;
      color: var(--pure-white);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(255,214,0,0.5);
      z-index: 1100;
      transition: all 0.3s ease;
      animation: pulse 2s infinite;
    }

    #chat-icon:hover {
      transform: scale(1.1);
      box-shadow: 0 10px 35px rgba(255,214,0,0.7);
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 8px 25px rgba(255,214,0,0.5); }
      50% { box-shadow: 0 8px 35px rgba(255,214,0,0.8); }
    }
     

    #chatbox {
      position: fixed;
      bottom: 100px;
      right: 25px;
      width: 400px;
      max-height: auto;
      border: none;
      border-radius: 25px;
      background: var(--pure-white);
      display: none;
      flex-direction: column;
      box-shadow: 0 15px 50px rgba(0,0,0,0.3);
      overflow: hidden;
      z-index: 1050;
      animation: slideIn 0.4s ease;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #chatbox.minimized {
      height: 60px;
      max-height: 60px;
    }
      #chatbox.close {
      display: hidden;
    }
    
      #chatbox.open {
      max-height: 400px;
    }

    #chatbox-header {
      background: linear-gradient(135deg, var(--pure-black), var(--dark-bg));
      color: var(--primary-yellow);
      padding: 18px 20px;
      font-weight: 700;
      font-size: 1.1rem;
      cursor: default;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #chatbox-header span {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .chat-action-btn {
      color: var(--primary-yellow);
      background: rgba(255,214,0,0.1);
      border: none;
      font-size: 18px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      margin-left: 5px;
    }

    .chat-action-btn:hover {
      background: rgba(255,214,0,0.2);
    }

    #chatbox-messages {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: var(--gray-100);
      max-height: 400px;
    }

    #chatbox-messages::-webkit-scrollbar {
      width: 6px;
    }

    #chatbox-messages::-webkit-scrollbar-thumb {
      background: var(--primary-yellow);
      border-radius: 10px;
    }

    .chat-message {
      margin-bottom: 15px;
      animation: messageSlide 0.3s ease;
      clear: both;
      overflow: hidden;
    }

    @keyframes messageSlide {
      from {
        opacity: 0;
        transform: translateX(-10px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .user-message {
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      color: var(--pure-white);
      padding: 12px 18px;
      border-radius: 18px 18px 5px 18px;
      display: inline-block;
      max-width: 80%;
      float: right;
      font-weight: 600;
      box-shadow: 0 3px 10px rgba(255,214,0,0.3);
      word-wrap: break-word;
    }

    .bot-message {
      background: var(--pure-white);
      color: var(--pure-black);
      padding: 12px 18px;
      border-radius: 18px 18px 18px 5px;
      display: inline-block;
      max-width: 80%;
      float: left;
      border: 2px solid var(--gray-200);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      word-wrap: break-word;
    }

    .typing-indicator {
      display: inline-block;
      padding: 12px 18px;
      background: var(--pure-white);
      border-radius: 18px;
      float: left;
      border: 2px solid var(--gray-200);
    }

    .typing-indicator span {
      height: 8px;
      width: 8px;
      float: left;
      margin: 0 1px;
      background-color: var(--primary-yellow);
      display: block;
      border-radius: 50%;
      opacity: 0.4;
      animation: typing 1s infinite;
    }

    .typing-indicator span:nth-of-type(1) { animation-delay: 0s; }
    .typing-indicator span:nth-of-type(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-of-type(3) { animation-delay: 0.4s; }

    @keyframes typing {
      0%, 60%, 100% { opacity: 0.4; }
      30% { opacity: 1; }
    }

    .input-container {
      display: flex;
      padding: 15px 20px;
      background: var(--pure-white);
      border-top: 2px solid var(--gray-200);
      gap: 10px;
    }

    .input-container input[type="text"] {
      flex: 1;
      padding: 12px 20px;
      border: 2px solid var(--gray-200);
      border-radius: 25px;
      font-size: 1rem;
      outline: none;
      transition: all 0.3s ease;
    }

    .input-container input[type="text"]:focus {
      border-color: var(--primary-yellow);
      box-shadow: 0 0 0 3px rgba(255,214,0,0.1);
    }

    .input-container button {
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      color: var(--pure-white);
      border: none;
      border-radius: 25px;
      padding: 12px 25px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .input-container button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(255,214,0,0.4);
    }

    /* ============ SCROLL TO TOP BUTTON ============ */
    #scrollToTop {
      position: fixed;
      bottom: 25px;
      left: 25px;
      background: linear-gradient(135deg, var(--primary-yellow), var(--accent-pink));
      color: var(--pure-white);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 5px 20px rgba(255,214,0,0.4);
      transition: all 0.3s ease;
      z-index: 1000;
      font-weight: 900;
    }

    #scrollToTop:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 30px rgba(255,214,0,0.6);
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 768px) {
      .hero-section h1,
      .carousel-overlay h1 {
        font-size: 2.5rem;
      }

      .section-title {
        font-size: 2rem;
      }

      #chatbox {
        width: 90%;
        right: 5%;
      }

      .carousel-item {
        height: 450px;
      }

      .stat-number {
        font-size: 3rem;
      }
    }