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

      body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          background-color: #0a0a14;
          color: #fff;
          height: 100vh;
          overflow-x: hidden;
      }

      /* Navigation */
      .nav {
          position: sticky;
          top: 0;
          z-index: 200;
          width: 100%;
          backdrop-filter: blur(10px);
          background: rgba(20, 20, 30, 0.85);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .nav-container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          height: 70px;
      }

      /* Logo */
      .logo {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          transition: transform 0.3s ease;
          flex-shrink: 0;
      }

      .logo:hover {
          transform: translateY(-2px);
      }

      .logo-icon {
          background: linear-gradient(135deg, #644fff, #ff52a4);
          width: 40px;
          height: 40px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
      }

      .logo-svg {
          width: 24px;
          height: 24px;
          color: white;
      }

      .logo-text {
          font-size: 20px;
          font-weight: 700;
          background: linear-gradient(135deg, #644fff, #ff52a4);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      /* Menu */
      .nav-menu {
          display: flex;
          align-items: center;
          gap: 30px;
          flex: 1;
          /* Keep flex: 1 for nav-menu to occupy space */
      }

      .nav-links {
          display: flex;
          gap: 30px;
          align-items: center;
          flex: 1;
          /* Allow nav-links to take available space */
          margin-left: 40px;
          /* Add margin here when nav-links are present */
      }

      .nav-buttons {
          display: flex;
          gap: 15px;
          align-items: center;
          flex-shrink: 0;
          margin-left: auto;
          /* Push buttons to the right */
      }

      .nav-links {
          display: flex;
          gap: 30px;
          align-items: center;
          flex: 1;
      }

      .nav-group {
          position: relative;
      }

      .nav-section {
          padding: 15px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          min-width: 200px;
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          margin-top: 10px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      }

      .nav-group:hover .nav-section {
          display: block;
      }

      .nav-section-title {
          font-size: 12px;
          font-weight: 600;
          color: #888;
          margin-bottom: 10px;
          padding-bottom: 8px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          text-transform: uppercase;
      }

      .nav-link {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          color: #fff;
          text-decoration: none;
          border-radius: 8px;
          font-size: 14px;
          transition: all 0.3s ease;
          white-space: nowrap;
      }

      .nav-section .nav-link {
          display: block;
          width: 100%;
          padding: 8px 0;
          margin: 4px 0;
      }

      .nav-section .nav-link:hover {
          color: #644fff;
          transform: translateX(4px);
      }

      .nav-icon {
          font-style: normal;
          font-size: 16px;
      }

      /* Auth Buttons */
      .nav-buttons {
          display: flex;
          gap: 15px;
          align-items: center;
          flex-shrink: 0;
      }

      .nav-btn {
          padding: 10px 24px;
          border-radius: 20px;
          font-weight: 500;
          transition: all 0.3s ease;
          text-decoration: none;
          font-size: 14px;
          white-space: nowrap;
      }

      .login-btn {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: white;
      }

      .login-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          transform: translateY(-2px);
      }

      .signup-btn {
          background: linear-gradient(135deg, #644fff, #ff52a4);
          color: white;
          border: none;
      }

      .signup-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(100, 79, 255, 0.3);
      }

      /* Responsive */
      @media (max-width: 768px) {
          .nav-container {
              height: 60px;
          }

          .nav-menu {
              position: fixed;
              top: 60px;
              left: 0;
              right: 0;
              flex-direction: column;
              background: rgba(20, 20, 30, 0.98);
              margin: 0;
              gap: 0;
              max-height: calc(100vh - 60px);
              overflow-y: auto;
              transform: translateX(-100%);
              transition: transform 0.3s ease;
          }

          .nav-menu.active {
              transform: translateX(0);
          }

          .nav-links {
              flex-direction: column;
              gap: 0;
              width: 100%;
          }

          .nav-section {
              position: static;
              display: none;
              margin: 10px 0;
          }

          .nav-buttons {
              width: 100%;
              padding: 20px;
              gap: 10px;
          }

          .nav-btn {
              flex: 1;
              text-align: center;
          }
      }

      .hero {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 60px 5% 60px;
          /* Adjust original padding for bottom and horizontal */
          padding-top: 70px;
          /* Explicitly set top padding to clear sticky nav */
          position: relative;
          width: 100%;
          /* Ensure it takes full width to allow proper centering */
      }


      .hero-title {
          font-size: 64px;
          font-weight: 700;
          margin: 0 auto 20px;
          line-height: 1.2;
          max-width: 800px;
          text-align: center !important;
      }

      .hero-title span {
          background: linear-gradient(135deg, #644fff, #ff52a4);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      .hero-subtitle {
          font-size: 20px;
          color: #bbb;
          max-width: 600px;
          margin-bottom: 40px;
          line-height: 1.6;
          margin-left: auto;
          margin-right: auto;
      }

      .cta-buttons {
          display: flex;
          gap: 20px;
          margin-bottom: 60px;
          justify-content: center;
      }

      .cta-btn {
          padding: 15px 30px;
          border-radius: 10px;
          font-size: 18px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
      }

      .primary-btn {
          background: linear-gradient(135deg, #644fff, #ff52a4);
          border: none;
          color: #fff;
      }

      .primary-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 20px rgba(100, 79, 255, 0.3);
      }

      .secondary-btn {
          background-color: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #fff;
      }

      .secondary-btn:hover {
          background-color: rgba(255, 255, 255, 0.15);
          transform: translateY(-3px);
      }

      .demo-container {
          position: relative;
          width: 80%;
          max-width: 1200px;
          aspect-ratio: 16/9;
          border-radius: 15px;
          overflow: hidden;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
          margin-left: auto;
          margin-right: auto;
      }

      .demo-video {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .features {
          padding: 100px 5%;
      }

      .section-title {
          font-size: 36px;
          font-weight: 700;
          text-align: center;
          margin-bottom: 20px;
      }

      .section-subtitle {
          font-size: 18px;
          color: #bbb;
          text-align: center;
          max-width: 700px;
          margin: 0 auto 60px;
          line-height: 1.6;
      }

      .feature-cards {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 30px;
      }

      .feature-card {
          background-color: rgba(20, 20, 30, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          padding: 30px;
          width: 340px;
          transition: all 0.3s;
          cursor: pointer;
      }

      .feature-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
          border-color: rgba(100, 79, 255, 0.3);
      }

      .feature-icon {
          width: 60px;
          height: 60px;
          background: linear-gradient(135deg, rgba(100, 79, 255, 0.2), rgba(255, 82, 164, 0.2));
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
      }

      .feature-icon svg {
          width: 30px;
          height: 30px;
          stroke: #644fff;
      }

      .feature-title {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 15px;
      }

      .feature-description {
          color: #bbb;
          font-size: 16px;
          line-height: 1.6;
          margin-bottom: 20px;
      }

      .feature-link {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #644fff;
          font-weight: 500;
          text-decoration: none;
          transition: gap 0.3s;
      }

      .feature-link:hover {
          gap: 12px;
      }

      .feature-image {
          height: 160px;
          width: 100%;
          border-radius: 8px;
          overflow: hidden;
          margin-top: 15px;
      }

      .feature-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s;
      }

      .feature-card:hover .feature-image img {
          transform: scale(1.05);
      }

      .workflow {
          padding: 80px 5%;
          background-color: rgba(15, 15, 25, 0.6);
          position: relative;
          overflow: hidden;
      }

      .workflow-steps {
          display: flex;
          justify-content: space-between;
          margin-top: 60px;
          position: relative;
          max-width: 1200px;
          margin: 60px auto 0;
      }

      .workflow-steps::before {
          content: '';
          position: absolute;
          top: 40px;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg,
                  rgba(100, 79, 255, 0.5),
                  rgba(255, 82, 164, 0.5));
          z-index: 0;
      }

      .workflow-step {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          position: relative;
          z-index: 1;
          flex: 1;
          max-width: 250px;
          padding: 0 15px;
      }

      .step-number {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: linear-gradient(135deg, #644fff, #ff52a4);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 20px;
          color: #fff;
          box-shadow: 0 10px 20px rgba(100, 79, 255, 0.3);
      }

      .step-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 10px;
      }

      .step-description {
          color: #bbb;
          font-size: 14px;
          line-height: 1.6;
      }

      .testimonials {
          padding: 100px 5%;
      }

      .testimonial-carousel-wrapper {
          position: relative;
      }

      .testimonial-carousel {
          display: flex;
          gap: 30px;
          padding: 20px 0;
          margin-top: 40px;
          overflow: hidden;
          scroll-behavior: smooth;
      }

      .carousel-nav {
          position: absolute;
          top: 50%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          transform: translateY(-50%);
      }

      .prev-btn,
      .next-btn {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #fff;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          font-size: 24px;
          cursor: pointer;
          transition: all 0.3s;
      }

      .prev-btn:hover,
      .next-btn:hover {
          background: rgba(255, 255, 255, 0.2);
      }

      .carousel-dots {
          display: flex;
          justify-content: center;
          margin-top: 20px;
      }

      .dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          margin: 0 5px;
          cursor: pointer;
          transition: all 0.3s;
      }

      .dot.active {
          background: #fff;
      }

      .testimonial-card {
          flex: 0 0 400px;
          scroll-snap-align: start;
          background-color: rgba(20, 20, 30, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          padding: 30px;
          transition: all 0.3s;
      }

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

      .testimonial-header {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
      }

      .testimonial-avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 15px;
      }

      .testimonial-avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .testimonial-author {
          display: flex;
          flex-direction: column;
      }

      .author-name {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 5px;
      }

      .author-title {
          color: #bbb;
          font-size: 14px;
      }

      .testimonial-stars {
          display: flex;
          color: #ff9a00;
          font-size: 14px;
          margin-bottom: 15px;
      }

      .testimonial-content {
          color: #ddd;
          font-size: 16px;
          line-height: 1.6;
      }

      .pricing {
          padding: 100px 5%;
          background-color: rgba(15, 15, 25, 0.6);
      }

      .pricing-plans {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 30px;
          margin-top: 60px;
      }

      .pricing-plan {
          background-color: rgba(20, 20, 30, 0.7);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          padding: 40px;
          width: 300px;
          position: relative;
          transition: all 0.3s;
      }

      .pricing-plan:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
      }

      .popular-badge {
          position: absolute;
          top: -15px;
          right: -15px;
          background: linear-gradient(135deg, #644fff, #ff52a4);
          color: #fff;
          padding: 5px 15px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 600;
      }

      .plan-name {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 15px;
      }

      .plan-price {
          font-size: 48px;
          font-weight: 700;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          gap: 5px;
      }

      .price-currency {
          font-size: 24px;
          font-weight: 500;
          align-self: flex-start;
      }

      .price-period {
          font-size: 16px;
          color: #bbb;
          font-weight: 500;
          margin-left: 5px;
      }

      .plan-description {
          color: #bbb;
          font-size: 14px;
          margin-bottom: 30px;
          line-height: 1.6;
      }

      .plan-features {
          margin-bottom: 30px;
      }

      .plan-feature {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 15px;
          color: #ddd;
          font-size: 14px;
      }

      .plan-feature svg {
          width: 16px;
          height: 16px;
          stroke: #644fff;
          flex-shrink: 0;
      }

      .plan-btn {
          width: 100%;
          padding: 12px;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s;
          text-align: center;
      }

      .plan-btn.primary {
          background: linear-gradient(135deg, #644fff, #ff52a4);
          border: none;
          color: #fff;
      }

      .plan-btn.primary:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 20px rgba(100, 79, 255, 0.3);
      }

      .plan-btn.secondary {
          background-color: transparent;
          border: 1px solid rgba(100, 79, 255, 0.5);
          color: #fff;
      }

      .plan-btn.secondary:hover {
          background-color: rgba(100, 79, 255, 0.1);
      }

      .faq {
          padding: 100px 5%;
      }

      .faq-list {
          max-width: 800px;
          margin: 60px auto 0;
      }

      .faq-item {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding: 20px 0;
      }

      .faq-question {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          cursor: pointer;
          transition: color 0.3s;
      }

      .faq-question:hover {
          color: #644fff;
      }

      .faq-question svg {
          width: 20px;
          height: 20px;
          stroke: #bbb;
          transition: transform 0.3s;
      }

      .faq-answer {
          color: #bbb;
          font-size: 16px;
          line-height: 1.6;
          margin-top: 15px;
          display: none;
      }

      .faq-item.active .faq-question {
          color: #644fff;
      }

      .faq-item.active .faq-question svg {
          transform: rotate(180deg);
          stroke: #644fff;
      }

      .faq-item.active .faq-answer {
          display: block;
      }

      .cta {
          padding: 80px 5%;
          text-align: center;
          background: linear-gradient(135deg, rgba(100, 79, 255, 0.1), rgba(255, 82, 164, 0.1));
          border-radius: 20px;
          margin: 0 5% 100px;
      }

      .cta-title {
          font-size: 36px;
          font-weight: 700;
          margin-bottom: 20px;
      }

      .cta-subtitle {
          font-size: 18px;
          color: #bbb;
          max-width: 600px;
          margin: 0 auto 40px;
          line-height: 1.6;
      }

      .footer {
          background-color: rgba(10, 10, 20, 0.8);
          padding: 80px 5% 30px;
      }

      .footer-content {
          display: flex;
          flex-wrap: wrap;
          gap: 40px;
          margin-bottom: 50px;
      }

      .footer-links-group {
          display: flex;
          flex-wrap: wrap;
          gap: 40px;
          margin-left: auto;
      }

      .input-panel,
      .result-panel {
          flex: 1;
          padding: 30px;
          position: relative;
          overflow-y: auto;
      }

      .input-panel {
          border-right: 1px solid #2c2c2c;
      }

      .panel-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30px;
      }

      .panel-title {
          font-size: 24px;
          font-weight: 500;
      }

      .status {
          font-size: 18px;
          color: #9e9e9e;
          margin-left: 10px;
      }

      .form-group {
          margin-bottom: 30px;
      }

      .form-label {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          font-size: 16px;
      }

      .info-icon {
          width: 18px;
          height: 18px;
          border: 1px solid #666;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          margin-left: 8px;
          color: #999;
          cursor: help;
      }

      select,
      textarea,
      input[type="text"],
      input[type="number"],
      input[type="file"] {
          width: 100%;
          background-color: rgba(20, 20, 20, 0.8);
          border: 1px solid #444;
          border-radius: 8px;
          padding: 12px 15px;
          color: #fff;
          font-size: 14px;
      }

      select option {
          background-color: #141414;
          color: #fff;
      }


      textarea {
          min-height: 150px;
          resize: vertical;
      }

      .hint {
          color: #888;
          font-size: 14px;
          margin-top: 10px;
          line-height: 1.5;
      }

      .model-params {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;
          margin-top: 15px;
      }

      @media (max-width: 768px) {
          .model-params {
              grid-template-columns: 1fr;
          }
      }

      .action-buttons {
          display: flex;
          justify-content: flex-end;
          gap: 15px;
          margin-top: 50px;
      }

      .reset-btn {
          background-color: transparent;
          border: 1px solid #444;
          color: #fff;
          padding: 12px 30px;
          border-radius: 8px;
          cursor: pointer;
          font-size: 16px;
      }

      .run-btn {
          background-color: #644fff;
          border: none;
          color: #fff;
          padding: 12px 30px;
          border-radius: 8px;
          cursor: pointer;
          font-size: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      #progress,
      #response {
          margin-top: 20px;
          padding: 15px;
          border-radius: 8px;
          width: 100%;
      }

      .success {
          background-color: rgba(39, 174, 96, 0.2);
          color: #2ecc71;
      }

      .error {
          background-color: rgba(231, 76, 60, 0.2);
          color: #e74c3c;
      }

      .progress {
          background-color: rgba(243, 156, 18, 0.2);
          color: #f39c12;
      }

      .progress-bar-container {
          width: 100%;
          background-color: #2c2c2c;
          border-radius: 8px;
          overflow: hidden;
          margin-top: 10px;
      }

      .progress-bar {
          height: 8px;
          background-color: #644fff;
          width: 0;
          transition: width 0.3s ease;
      }

      .result-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
          flex-grow: 1;
      }

      .result-icon {
          width: 120px;
          height: 120px;
          margin-bottom: 20px;
      }

      .result-video {
          max-width: 100%;
          border-radius: 8px;
          margin-top: 20px;
      }

      .shortcut {
          display: inline-block;
          padding: 2px 6px;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
          font-size: 12px;
          margin-left: 5px;
      }

      /* Model-specific parameter containers */
      .model-params-container {
          display: none;
      }

      .model-params-container.active {
          display: block;
      }

      .preview-image {
          max-width: 100%;
          max-height: 200px;
          border-radius: 8px;
          margin-top: 15px;
          display: none;
      }

      .footer-description {
          color: #bbb;
          font-size: 14px;
          line-height: 1.6;
          margin-bottom: 20px;
          max-width: 350px;
      }

      .social-links {
          display: flex;
          gap: 15px;
      }

      .social-link {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s;
      }

      .social-link svg {
          width: 18px;
          height: 18px;
          stroke: #fff;
      }

      .social-link:hover {
          background-color: #644fff;
          transform: translateY(-3px);
      }

      .footer-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 20px;
      }

      .footer-links {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .footer-link {
          color: #bbb;
          text-decoration: none;
          font-size: 14px;
          transition: color 0.3s;
      }

      .footer-link:hover {
          color: #fff;
      }

      .copyright {
          text-align: center;
          color: #666;
          font-size: 14px;
          padding-top: 30px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
      }

      @media (max-width: 1024px) {
          .hero-title {
              font-size: 48px;
          }

          .workflow-steps {
              flex-wrap: wrap;
              justify-content: center;
              gap: 40px;
          }

          .workflow-step {
              width: 40%;
          }

          .workflow-steps::before {
              display: none;
          }
      }

      @media (max-width: 768px) {
          .nav-links {
              display: none;
          }

          .hero-title {
              font-size: 36px;
          }

          .hero-subtitle {
              font-size: 18px;
          }

          .cta-buttons {
              flex-direction: column;
              gap: 15px;
              width: 100%;
              max-width: 300px;
          }

          .workflow-step {
              width: 80%;
          }

          .footer-content {
              flex-direction: column;
              gap: 40px;
          }

          .footer-column {
              width: 100%;
          }
      }

      @media (max-width: 480px) {
          .hero-title {
              font-size: 32px;
          }

          .testimonial-carousel {
              padding: 20px 0;
          }

          .testimonial-card {
              flex: 0 0 280px;
              padding: 20px;
          }
      }


      /* Desktop Navigation Defaults */
      .nav-container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 64px;
      }

      .nav-menu {
          display: flex;
          /* Default to flex for desktop */
          align-items: center;
          gap: 20px;
          /* Space between nav-links and nav-buttons */
      }

      .nav-links {
          display: flex;
          /* Default to flex for desktop */
          gap: 20px;
          align-items: center;
      }

      .nav-buttons {
          display: flex;
          /* Default to flex for desktop */
          gap: 15px;
          align-items: center;
      }

      .menu-toggle {
          display: none;
          /* Hidden by default on desktop */
      }

      /* Mobile Navigation Styles */
      @media (max-width: 768px) {
          .nav-container {
              padding: 0 15px;
              /* Adjust for mobile padding */
          }

          .menu-toggle {
              display: flex;
              /* Show hamburger on mobile */
              flex-direction: column;
              justify-content: space-around;
              width: 30px;
              height: 20px;
              cursor: pointer;
              z-index: 101;
          }

          .menu-toggle .bar {
              width: 100%;
              height: 3px;
              background-color: #fff;
              border-radius: 10px;
              transition: all 0.3s ease-in-out;
          }

          .nav-menu {
              display: none;
              /* Hide the entire nav-menu by default on mobile */
              flex-direction: column;
              /* Stack items vertically when active */
              position: absolute;
              top: 64px;
              left: 0;
              width: 100%;
              background-color: rgba(20, 20, 20, 0.98);
              padding: 20px 0;
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
              z-index: 99;
          }

          .nav-menu.active {
              display: flex;
              /* Show when active */
          }

          .nav-menu .nav-links,
          .nav-menu .nav-buttons {
              display: flex;
              /* Ensure they are flex within the active menu */
              flex-direction: column;
              /* Stack them */
              width: 100%;
              align-items: center;
              /* Center items */
          }

          .nav-menu .nav-link {
              padding: 15px 30px;
              width: 100%;
              text-align: center;
          }

          .nav-menu .nav-buttons {
              margin-top: 20px;
          }

          .nav-menu .nav-btn {
              width: calc(100% - 60px);
              /* Adjust width for padding */
              margin: 5px auto;
          }

          .nav-menu .nav-dropdown .dropdown-content {
              position: static;
              /* Remove absolute positioning for mobile dropdowns */
              box-shadow: none;
              background-color: rgba(30, 30, 30, 0.98);
              width: 100%;
              border-radius: 0;
          }


          .nav-menu .nav-dropdown.active .dropdown-content {
              display: block;
              /* Show when active (clicked) */

          }
      }