.modern-tabs {
   width: 100%;
   position: relative;
}

   .modern-tabs.modern-tabs-gradiant .modern-tabs-nav-item.active::after {
      background: linear-gradient(to right, var(--tab-primary-from) , var(--tab-primary-to));
   }

.modern-tabs-nav {
   display: flex;
   position: relative;
   gap: 0.5rem;
   overflow-x: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

   .modern-tabs-nav::-webkit-scrollbar {
      display: none;
   }

.modern-tabs-nav-item {
   padding: 0.75rem 1.25rem;
   color: var(--tab-text);
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

   .modern-tabs-nav-item:hover {
      color: var(--tab-primary);
   }

   .modern-tabs-nav-item.active {
      color: var(--tab-text-active);
   }

      .modern-tabs-nav-item.active::after {
         content: '';
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 4px;
         background-color: var(--tab-primary);
         border-radius: 2px 2px 0 0;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

.modern-tabs-content {
   position: relative;
   overflow: hidden;
}

.modern-tabs-pane {
   opacity: 0;
   visibility: hidden;
   height: 0;
   transition: opacity 0.3s ease;
}

   .modern-tabs-pane.active {
      opacity: 1;
      visibility: visible;
      height: auto;
   }

.modern-tabs-nav-indicator {
   position: absolute;
   bottom: -1px;
   height: 2px;
   background-color: var(--tab-primary);
   border-radius: 2px 2px 0 0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-tabs-sm .modern-tabs-nav-item {
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
}

.modern-tabs-lg .modern-tabs-nav-item {
   padding: 1rem 1.5rem;
   font-size: 1.125rem;
}

.modern-tabs-equal .modern-tabs-nav {
   gap: 0;
}

.modern-tabs-equal .modern-tabs-nav-item {
   flex: 1;
   justify-content: center;
   text-align: center;
}

@media (max-width: 640px) {
   .modern-tabs-nav {
      gap: 0.25rem;
   }

   .modern-tabs-nav-item {
      padding: 0.7rem 0.75rem;
      font-size: 0.875rem;
   }

   .modern-tabs-equal .modern-tabs-nav {
      gap: 0;
   }
}