/* Base tab styles */
.ccc-tabs-section {
  width: 100%;
  margin-bottom: var(--ccc-space-8);
}
.ccc-tabs-section h2 {
    font-family: BioRhyme !important;  
    font-size: 35px !important;
    text-transform: none !important;
    line-height: 2.5rem !important;
}

.ccc-tabs-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Tab navigation */
.ccc-tabs-nav {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  margin-bottom: -1px;
}

@media (max-width: 760px) {
  .ccc-tabs-nav {
    flex-direction: column;
    margin-bottom: 0;
  }
}

/* Tab buttons */
.ccc-tabs-nav button {
  background-color: var(--ccc-light-gray);
  border: none;
  outline: none;
  cursor: pointer;
  padding: var(--ccc-space-5);
  transition: all var(--ccc-transition-normal);
  font-family: 'Gibson Semi Bold', sans-serif;
  font-size: 1.3em;
  color: var(--ccc-theme-color);
  position: relative;
  min-width: 200px;
  text-align: left;
}

.ccc-tabs-nav button:hover {
  background-color: var(--ccc-theme-color);
  color: var(--ccc-white);
}

.ccc-tabs-nav button.active {
  background-color: var(--ccc-theme-color);
  color: var(--ccc-white);
  font-weight: bold;
}

/* Tab content */
.ccc-tab-content {
  display: none;
  padding: var(--ccc-space-5);
  animation: fadeEffect 0.5s ease-in-out;
  border-top: 1px solid var(--ccc-theme-color);
}

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

/* Vertical variation */
.ccc-tabs-container.vertical {
  flex-direction: row;
}

.ccc-tabs-container.vertical .ccc-tabs-nav {
  flex-direction: column;
  width: 30%;
}

.ccc-tabs-container.vertical .ccc-tabs-content {
  width: 70%;
}

.ccc-tabs-container.vertical .ccc-tab-content {
  border-top: none;
  border-left: 1px solid var(--ccc-theme-color);
  margin-left: -1px;
}

@media (max-width: 760px) {
  .ccc-tabs-container.vertical {
    flex-direction: column;
  }
  
  .ccc-tabs-container.vertical .ccc-tabs-nav,
  .ccc-tabs-container.vertical .ccc-tabs-content {
    width: 100%;
  }
  
  .ccc-tabs-container.vertical .ccc-tab-content {
    border-left: none;
    border-top: 1px solid var(--ccc-theme-color);
    margin-left: 0;
  }
}

/* Theme variations */
.ccc-tabs-container.solid .ccc-tabs-nav button {
  background-color: var(--ccc-white);
}

.ccc-tabs-container.soligradientd .ccc-tabs-nav button {
  background-color: var(--ccc-theme-gradient);
}


.ccc-tabs-container.solid .ccc-tabs-nav button:hover,
.ccc-tabs-container.solid .ccc-tabs-nav button.active {
  background-color: var(--ccc-theme-color);
}

.ccc-tabs-container.gradient .ccc-tabs-nav button.active {
  background: var(--ccc-theme-gradient);
}

/* Animation */
@keyframes fadeEffect {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}