.container-tabs {
	margin: 0 auto;
	max-width: var(--width-feature);

	--color: var(--black);
	--color-hover: var(--primary-color-800);
	--text-color: var(--color);
	--button-color: var(--color);
	--border-color: var(--gray-200);
	--title-text-mobile: var(--font-weight-bold) 40px/120% var(--font-body);
	--title-text-tablet: var(--font-weight-bold) 50px/120% var(--font-body);
	--title-text-desktop: var(--font-weight-bold) 60px/120% var(--font-body);
	--description-text-mobile: var(--font-weight-normal) var(--text-base)/var(--leading-normal) var(--font-body);
	--description-text-tablet: var(--font-weight-normal) var(--text-xl)/var(--leading-normal) var(--font-body);
	--tab-btn-text-mobile: var(--font-weight-bold) var(--text-base)/120% var(--font-body);
	--tab-btn-text-tablet: var(--font-weight-bold) var(--text-xl)/120% var(--font-body);
}

/* Tab Active/Inactive Functionality */
.container-tabs .tab-outer {
	opacity: 1;
	transition: opacity 150ms ease;
	overflow: hidden;
}

.container-tabs .tab-outer.animating {
	opacity: 0;
}

.inner-tab-cont:not(.active),
.inner-tab-cont:not(.active) .contentRender,
.container-tabs .tab-outer > div.contentRender:not(.active):not(.contentRender_name_plugins_common_custom_tab_inner) {
	opacity: 0;
	height: 0;
	overflow: hidden;
	pointer-events:none;
}

.container-tabs .tabs-header,
.container-tabs .tabs-footer {
	display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 auto 30px;
    padding: 0 var(--space-5);
    max-width: var(--width-base);
}

@media screen and (min-width: 40em) {
	.container-tabs .tabs-header,
	.container-tabs .tabs-footer {
		margin-bottom: var(--space-10);
	}
}

.container-tabs .tabs-header .title-cont {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-10);
	max-width: 736px;
	text-align: center;
}

.container-tabs .tabs-header .title-cont .title {
    font: var(--title-text-mobile);
    color: var(--text-color);
	letter-spacing: 0.8px;
}

@media screen and (min-width: 40em) {
	.container-tabs .tabs-header .title-cont .title {
		font: var(--title-text-tablet);
		letter-spacing: 1px;
	}
}

@media screen and (min-width: 64em) {
	.container-tabs .tabs-header .title-cont .title {
		font: var(--title-text-desktop);
		letter-spacing: 1px;
	}
}

@media screen and (min-width: 64em) {
	.container-tabs .tabs-header .title-cont .title {
		letter-spacing: 1.2px;
	}
}

.container-tabs .tabs-header .title-cont .description {
	font: var(--description-text-mobile);
	color: var(--gray-dark);
	letter-spacing: 0.2px;
}

@media screen and (min-width: 40em) {
	.container-tabs .tabs-header .title-cont .description {
		font: var(--description-text-tablet);
		letter-spacing: 0.4px;
	}
}

/*Tabs*/
.container-tabs .tabs-ctr {
	width: 100%;
	overflow: hidden;
}

.container-tabs .tabs {
	display: flex;
    flex-direction: row;
    justify-content: start;
    gap: var(--space-4);
    overflow-x: auto;
	scrollbar-width: none;
}

.container-tabs .tabs::-webkit-scrollbar { 
	height: 0; /* Safari and Chrome */
}

.container-tabs .tabs li:first-of-type {
    margin-left: auto;
}

.container-tabs .tabs li:last-of-type {
    margin-right: auto;
}

.container-tabs .tabs button {
	padding: 0 var(--space-2);
	width: max-content;
	font: var(--tab-btn-text-mobile);
	color: var(--black);
	letter-spacing: 0.4px;
	background-color: transparent;
}

@media screen and (min-width: 40em) {
	.container-tabs .tabs button {
		font: var(--tab-btn-text-tablet);
	}
}

.container-tabs .tabs button:focus {
	outline: none;
}

.container-tabs .tabs button:focus-visible {
	outline: var(--gray-dark) solid 1px;
    outline-offset: 2px;
}

.container-tabs .tabs button:hover {
	color: var(--gray-dark);
}

.container-tabs .tabs li.active button {
	color: var(--blue);
}

.container-tabs .tabs li button::after {
	content: '';
	display: block;
	margin-top: 5px;
	height: 3px;
	width: 100%;
	border-radius: 5px;
	background-color: var(--gray-dark);
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.container-tabs .tabs li.active button::after {
	opacity: 1;
	background-color: var(--blue);
}

.container-tabs .tabs li:hover button::after {
	opacity: 1;
}

/* View All */
.container-tabs .tabs-footer .view-all {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--gray-100);
	border-radius: var(--rounded-full);
	background-color: var(--button-color);
	text-decoration: none;
}

@media (hover: hover) {
	.container-tabs .tabs-footer .view-all:hover {
		--button-color: var(--color-hover);
		text-decoration: none;
	}
}