body {
    color: var(--primary-color);
  }

.hero-section {
    margin: 3rem auto;
    max-width: var(--section-width);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 4rem 0 3rem;
}

@media (max-width: 850px) {
    .tabs {
        flex-direction: column;
    }
}

.tab-content {
    display: none;
}

.description {
    margin-bottom: 4rem !important;
    padding: 0 1rem;
}

.tab-content p {
    margin-bottom: 3rem;
}

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

h3 {
    background-color: var(--interactive-color);
    padding: 1rem;
    border-radius: var(--standard-br);
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.2s ease;
}

h3:hover {
    background-color: var(--interactive-hover-color);
}

.content-description {
    display: none;
    margin: 1.5rem 1rem;
    color: var(--primary-color);
}

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