.container-tabs {
	padding: 0 var(--space-2);
	margin: 0 auto;
	max-width: var(--width-feature);
	position: relative;

	--color: var(--primary-color-700);
	--color-hover: var(--primary-color-800);
	--text-color: var(--blue-00);
	--button-color: var(--color);
	--border-color: var(--blue-00);
	--active-bg-color: var(--blue-00);
	--active-text-color: var(--blue-04);
}

.container-tabs::after {
	content: '';
	pointer-events: none;
	background-image: url("https://assets.simpleviewinc.com/simpleview/image/upload/v1/clients/estespark-redesign/tab_panel_bg_7e288575-4d2c-4ba9-8134-d66e4e16128f.jpg");
	background-repeat: no-repeat;
	background-position: 46% 40%;
    opacity: 0.25;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 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;
	pointer-events:none;
}

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

.container-tabs .tabs-header .title-cont {
	margin-bottom: var(--space-4);
}

.container-tabs .tabs-header .title-cont .title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
	text-transform: uppercase;
}

/*Tabs*/
.container-tabs .tabs {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
	gap: 16px;
}

.container-tabs .tabs button {
	padding: 6px 16px;
	background-color: transparent;
	line-height: var(--leading-relaxed);
	border: 1px solid var(--border-color);
	width: max-content;
	color: var(--white);
}

.container-tabs .tabs li.active button {
	background-color: var(--active-bg-color);
	color: var(--active-text-color);
	font-weight: 500;
}

.container-tabs .inner-tab-cont .contentRender_name_plugins_core_textbox {
	padding: 0;
}

.container-tabs .inner-tab-cont .contentRender_name_plugins_core_textbox p {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-1) var(--space-3) 0;
	margin-bottom: 4px;
	line-height: 1.5;
}

/* 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;
	}

	.container-tabs .tabs li button:hover {
		background-color: var(--sw-key-color-hover);
		transition: background-color var(--transition-appendix);
	}
}

@media screen and (min-width: 375px) {
	.container-tabs::after {
		background-position: 46% 43%;
	}
}

@media screen and (min-width: 40em) {
	.container-tabs::after {
		background-position: 50% 65%;
	}

	.container-tabs .tabs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
		/* width: 800px; */

	}

	.container-tabs .tabs button {
		font-size: 0.875rem;
		width: 100%;
	}
}

@media (min-width: 64em) {
	.container-tabs {
		padding: 80px 0;
	}

	.container-tabs::after {
		background-position: 45% 75%;
	}

	.container-tabs .tabs-header {
		margin: 0 auto 34px;
	}

	.container-tabs .tabs-header .title-cont {
		margin-bottom: var(--space-8);
	}
	.container-tabs .tabs-header .title-cont .title {
		font-size: var(--text-5xl);
	}

	.container-tabs .tabs {
		width: 800px;
	}

	.container-tabs .tabs button,
	.container-tabs .inner-tab-cont .contentRender_name_plugins_core_textbox p {
		font-size: 1.25rem;
	}
}

@media screen and (min-width: 90em) {
	.container-tabs::after {
		background-size: 100%;
		background-position: 45% 72%;
	}
}