.tabs-wrapper {
      display: flex;
      align-items: center;
      padding: 0;
      gap: 0;
      position: relative;
      }

      .arrow-btn {
      flex-shrink: 0;
      width: 50px;
      border: none;
      background: white;
      color: #0066cc;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.3s ease;
      border-right: 1px solid #e0e0e0;
      }

      .arrow-btn:hover:not(:disabled) {
      background: #f5f5f5;
      }

      .arrow-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      }

      .arrow-btn.right {
      border-right: none;
      border-left: 1px solid #e0e0e0;
      }
 
      .tabs-container {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      display: flex;
      gap: 0;
      }

      .tabs-container::-webkit-scrollbar {
      height: 3px;
      }

      .tabs-container::-webkit-scrollbar-track {
      background: transparent;
      }

      .tabs-container::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 2px;
      }

      .tab-button {
      flex: 0 0 auto;
      padding: 10px 20px;
      border: none;
      background: transparent;
      color: #333;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.3s ease;
      position: relative;
      border-bottom: 4px solid transparent;
      margin-bottom: -1px;
      }

      .tab-button:hover {
        color: #0066cc;
      }

      .tab-button.active {
         background: #0066cc;
         color: white;
         border-bottom-color: #0066cc;
         border-radius: 4px;
      }

      .content-area {
         display: none;
         padding: 40px;
         animation: fadeIn 0.4s ease;
      }

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

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

      .content-title {
      font-size: 28px;
      font-weight: 700;
      color: #333;
      margin-bottom: 20px;
      }

      .content-text {
      color: #666;
      line-height: 1.8;
      margin-bottom: 20px;
      font-size: 15px;
      }

      .features-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 15px;
      margin-top: 20px;
      }

      .feature-item {
      display: flex;
      gap: 12px;
      padding: 15px;
      background: #f9f9f9;
      border-radius: 6px;
      border-left: 4px solid #0066cc;
      }

      .feature-item i {
      flex-shrink: 0;
      color: #0066cc;
      font-size: 18px;
      margin-top: 2px;
      }

      .feature-item span {
      color: #666;
      font-size: 14px;
      line-height: 1.6;
      }
      /* Info Box */
      .info-box {
      background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
      color: white;
      padding: 25px;
      border-radius: 6px;
      margin-top: 20px;
      }
      .info-box h4 {
      font-size: 16px;
      margin-bottom: 15px;
      }
      .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 15px;
      }
 
      .badge-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
      }

      .badge {
      background: #e0e0e0;
      color: #333;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      }

      .badge.blue {
      background: rgba(0, 102, 204, 0.1);
      color: #0066cc;
      }
 
      .button-group {
      margin-top: 30px;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      }
      @media (max-width: 768px) { 
      .arrow-btn { width: 45px;font-size: 16px;}
      .tab-button {padding: 12px 16px;font-size: 13px;} 
      .features-list {grid-template-columns: 1fr;}
      .info-grid {grid-template-columns: repeat(2, 1fr);}
      .button-group {flex-direction: column;}    
      }


      @media (max-width: 480px) {   
      .content-area {padding: 2px;}
      .arrow-btn { width: 40px;font-size: 14px;}
      .tab-button {padding: 10px 12px; font-size: 12px;}
      .content-title {font-size: 18px;}
      .info-grid {grid-template-columns: 1fr;}
      }