/* body {
      font-family: Arial, sans-serif;
      background-color: #f5f3ff;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
  } */

  .containerdddd {
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      /* max-width: 1000px; */
      width: 100%;
      box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-wrap: wrap;
  }

  /* Sidebar Section */
  .sidebar {
      background: #000;
      color: white;
      padding: 40px 20px;
      width: 45%;
  }

  .tab-item {
      font-size: 22px;
      padding: 15px 20px;
      border-radius: 30px;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.4s;
      cursor: pointer;
      border: 2px solid transparent;
  }

  .tab-item span {
      background: #fff;
      color: #000;
      border-radius: 50%;
      padding: 5px 12px;
      font-size: 20px;
      font-weight: bold;
      transition: all 0.3s;
      position: relative;
  }

  .tab-item span::after {
      content: '';
      width: 20px;
      height: 20px;
      /* background: #000; */
      border-radius: 50%;
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
  }

  /* Active Tab Style */
  .tab-item:hover,
  .tab-item.active {
      background-image: linear-gradient(to right, #6ba0f3, #000);
      color: white;
      border-color: #6ba0f3;
  }

  .tab-item:hover span,
  .tab-item.active span {
      background: black;
      color: white;
  }

  /* Content Section */
  .content {
      padding: 40px;
      width: 55%;
  }

  h2 {
      font-size: 28px;
      margin-bottom: 20px;
  }

  p {
      font-size: 18px;
      color: #555;
      line-height: 1.7;
  }

  .button {
      background: black;
      color: white;
      padding: 12px 25px;
      display: inline-block;
      border-radius: 30px;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      transition: all 0.3s;
  }

  .button:hover {
      background: #444;
  }

  /* Content Box Animation */
  .content-box {
      display: none;
      animation: fadeIn 0.5s ease-in-out;
  }

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

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

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

  /* Responsive Design */
  @media (max-width: 768px) {
      .container {
          flex-direction: column;
      }

      .sidebar {
          width: 100%;
          text-align: center;
      }

      .content {
          width: 100%;
      }

      .tab-item {
          justify-content: center;
      }
  }

  /* Special Arrow Effect Half In Sidebar - Half In Content */
  .tab-item span {
      background: white;
      border: 3px solid #6ba0f3;
      color: #000;
      border-radius: 50%;
      position: relative;
  }

  .tab-item.active span::before {
      content: '';
      color: white;
      position: absolute;
      right: -10px;
      top: 50%;
      transform: translateY(-50%);
  }

  /* Adjust Arrow Movement */
  .tab-item:hover span {
      transform: translateX(5px);
  }

  .speaker-icon {
      font-size: 22px;
      font-weight: bold;
      color: #ff5722;
      margin-right: 10px;
  }

  /* CTA Text */
  .cta-text {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 15px;
  }

  /* CTA Button */
  .cta-button {
      background: black;
      color: white;
      padding: 12px 25px;
      display: inline-block;
      border-radius: 30px;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
      transition: all 0.3s;
      margin-top: 10px;
  }

  .cta-button:hover {
      background: #444;
  }