.mobilmenu {
      transition: 0.6s ease-in;
  }

  /* Custom Styles & Chart Constraints */
  body {

      background-color: #f8fafc;

      color: #334155;
  }


  .chart-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      height: 350px;
      max-height: 400px;
      background: white;
      padding: 1rem;
      border-radius: 0.75rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  @media (min-width: 768px) {
      .chart-container {
          height: 380px;
      }
  }

  /* Tab Transitions */
  .tab-content {
      display: none;
      animation: fadeIn 0.4s ease-out forwards;
  }

  .tab-content.active {
      display: block;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(15px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }


  .timeline-container {
      position: relative;
      padding-left: 2.5rem;
  }

  .timeline-line {
      position: absolute;
      left: 1.25rem;
      top: 0;
      bottom: 0;
      width: 4px;
      background-color: #cbd5e1;
      border-radius: 2px;
  }

  .timeline-item {
      position: relative;
      margin-bottom: 2rem;
  }

  .timeline-dot {
      position: absolute;
      left: -1.85rem;
      top: 0.25rem;
      width: 1.25rem;
      height: 1.25rem;
      background-color: #0284c7;
      border: 3px solid #f8fafc;
      border-radius: 50%;
      z-index: 10;
      transition: transform 0.2s, background-color 0.2s;
  }

  .timeline-item:hover .timeline-dot {
      transform: scale(1.3);
      background-color: #0369a1;
  }


  .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
  }

  .accordion-item.active .accordion-content {
      max-height: 200px;

  }

  .accordion-item.active .icon-rotate {
      transform: rotate(180deg);
  }