.tabs-container { display: flex; justify-content: center; width: 100%; background-color: #fff; border-radius: 8px 8px 0 0; place-items: center; flex-wrap: wrap; }

.tab-button { padding: 15px 25px; cursor: pointer; font-weight: bold; color: #555; background-color: transparent; border: none; outline: none; transition: color 0.3s ease, background-color 0.3s ease; font-size: 1.1em; border-radius: 0px; }

.tab-button:hover { color: #8B0000; border-radius: 0px; }

.tab-button.active { color: #8B0000; border-bottom: 3px solid #8B0000; background-color: #fefefe; border-radius: 0px; }

/* Individual content sections */
.content-section { display: none; padding: 20px 0; line-height: 1.6; color: #333; }

/* Currently active (visible) content section */
.content-section.active { display: block; animation: fadeIn 0.5s ease-in-out; }

/* Section headings */
.content-section h2 { color: #8B0000; font-size: 2em; margin-bottom: 15px; border-bottom: 2px solid #D9B380; padding-bottom: 10px; }

.content-section h3 { font-size: 1.5em; margin-top: 25px; margin-bottom: 10px; }

/* Paragraphs within content sections */
.content-section p { margin-bottom: 1em; }

/* Lists within content sections */
.content-section ul, .content-section ol { margin-left: 20px; margin-bottom: 1em; }

.content-section li { margin-bottom: 0.5em; }

/* Fade-in effect when a section becomes active */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .content-area { padding: 15px; }
    .tab-button { padding: 10px 15px; font-size: 1em; }
    .content-section h2 { font-size: 1.8em; }
    .content-section h3 { font-size: 1.3em; }
}

@media (max-width: 480px) {
    .content-area { padding: 20px; }
    .tab-button { padding: 8px 10px; font-size: 0.9em; }
    .content-section h2 { font-size: 1.5em; }
}