.wp-block-interactive-content {
	font-family: "Raleway", sans-serif;
}

/* ====== MOBILE VERSION ====== */
@media only screen and (max-width: 991px) {
	.wp-block-interactive-content.desktop-only {
		display: none;
	}

	.wp-block-interactive-content .accordion-hero {
		padding: 40px 30px 30px;
		background: #ccc;
	}

	.wp-block-interactive-content .accordion-hero img {
		display: block;
		max-width: 185px !important;
		width: 100% !important;
		margin: 0 auto;
	}

	.mobile-accordion__item {
		border-bottom: 1px solid #ccc;
	}

	.mobile-accordion__item .accordion-header {
		width: 100%;
		text-align: left;
		background: none;
		border: none;
		padding: 10px 24px;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.mobile-accordion__item .accordion-title {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		font-family: "Raleway", sans-serif;
		font-size: 14px;
		line-height: 1.15em;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: #002d5b;
	}

	.mobile-accordion__item .accordion-title img {
		width: 80px !important;
		height: 80px !important;
		object-fit: contain;
	}

	.mobile-accordion__item .select-icon {
		font-size: 15px;
		color: #d5a619;
		transition: all 0.3s ease-out;
	}

	.mobile-accordion__item .accordion-body {
		display: none;
		padding: 20px 24px;
		color: #484848;
	}

	.mobile-accordion__item .component__definition,
	.mobile-accordion__item .component__outcomes {
		margin-bottom: 20px;
	}

	.mobile-accordion__item .component__definition h5,
	.mobile-accordion__item .component__outcomes h5 {
		font-size: 15px;
		font-weight: 700;
		margin-bottom: 0;
	}

	.mobile-accordion__item .component__definition p span,
	.mobile-accordion__item .component__outcomes p span {
		font-weight: 600 !important;
	}

	.mobile-accordion__item.active .select-icon {
		transform: rotate(45deg);
	}

	.mobile-accordion__item .tab-link {
		display: inline-block;
		padding: 10px 20px;
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1px;
		border-radius: 4px;
		text-decoration: none;
	}

	.mobile-accordion__item .tab-link:first-of-type {
		color: #d5a619;
		border: 2px solid #d5a619;
		background: transparent;
	}

	.mobile-accordion__item .tab-link:last-of-type {
		background: #d5a619;
		color: #fff;
		border: 2px solid #d5a619;
	}

	.mobile-accordion__item .tab-link:not(:last-of-type) {
		margin-bottom: 15px;
		display: inline-block;
	}
}

/* ====== DESKTOP VERSION ====== */
@media only screen and (min-width: 992px) {
	.wp-block-interactive-content.mobile-only {
		display: none;
	}

	.wp-block-interactive-content {
		padding: 55px 0;
	}

	.wp-block-interactive-content .tabs-wrapper {
		display: flex;
		width: 100%;
	}

	.wp-block-interactive-content .tabs-sidebar {
		width: 60%;
		position: relative;
		border-right: 1px solid #ccc;
	}

	.wp-block-interactive-content .main-title {
		text-align: center;
		margin-bottom: 40px;
		font-family: "Martel", serif !important;
		font-style: italic;
		color: #d5a619;
	}

	.wp-block-interactive-content .buttons-wrapper {
		position: relative;
		width: 100%;
		margin: 0 auto;
		max-width: 694px;
		padding: 200px;
	}

	.wp-block-interactive-content .main-image {
		margin: 0 auto;
		width: 250px;
	}

	.wp-block-interactive-content .main-image img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: contain;
	}

	.wp-block-interactive-content .tab-buttons {
		list-style: none;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
	}

	.wp-block-interactive-content .tab-button {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 90px;
		cursor: pointer;
		text-align: center;
		transition: all 0.3s ease-in-out;
	}

	.wp-block-interactive-content .tab-button .tab-icon-wrapper {
		position: relative;
	}

	/* ====== ADDITIONAL TAB ICON LINES ====== */
	.wp-block-interactive-content .tab-button:nth-of-type(1) .tab-icon-wrapper:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 40px;
		height: 3px;
		background: #b79257;
		transform: translate(-100%, -50%);
	}

	.wp-block-interactive-content .tab-button:nth-of-type(2) .tab-icon-wrapper:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 40px;
		height: 3px;
		background: #b79257;
		transform: translate(-100%, -18px) rotate(65deg);
	}

	.wp-block-interactive-content .tab-button:nth-of-type(3) .tab-icon-wrapper:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 40px;
		height: 3px;
		background: #b79257;
		transform: translate(0%, -18px) rotate(-65deg);
	}

	.wp-block-interactive-content .tab-button:nth-of-type(4) .tab-icon-wrapper:before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		width: 40px;
		height: 3px;
		background: #b79257;
		transform: translate(100%, -50%);
	}

	.wp-block-interactive-content .tab-button:nth-of-type(5) .tab-icon-wrapper:before {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		width: 40px;
		height: 3px;
		background: #b79257;
		transform: translate(90%, -5px) rotate(53deg);
	}

	.wp-block-interactive-content .tab-button:nth-of-type(6) .tab-icon-wrapper:before {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		width: 40px;
		height: 3px;
		background: #b79257;
		transform: translate(-40%, -5px) rotate(-53deg);
	}

	.wp-block-interactive-content .tab-button .tab-icon-wrapper .tab-icon {
		width: 100%;
	}

	.wp-block-interactive-content .tab-button .tab-icon #border-path {
		opacity: 0.1;
		transition: opacity 0.3s ease-in-out;
	}

	.wp-block-interactive-content .tab-button:hover .tab-icon #border-path,
	.wp-block-interactive-content .tab-button.active .tab-icon #border-path {
		opacity: 1;
	}

	.wp-block-interactive-content .links .nectar-button.see-through.accent-color {
		border-color: rgba(0, 0, 0, .75);
		color: #444;
	}

	#interactive-content .tab-panel-content .links .see-through.accent-color {
		border-color: rgba(0, 0, 0, .75);
		color: #444;
	}

	.wp-block-interactive-content .tab-title {
		margin-top: 10px;
		padding: 0;
		font-family: "Raleway", sans-serif;
		font-size: 13px;
		line-height: 16px;
		font-weight: 700;
		text-transform: uppercase;
		color: #002d5b;
	}

	.wp-block-interactive-content .tabs-content {
		width: 40%;
		display: flex;
		flex-direction: column;
		padding: 20px 5%;
		padding-top: 100px;
	}

	.wp-block-interactive-content .tabs-content .tab-panel-header h3 {
		max-width: calc(100% - 90px);
	}

	.wp-block-interactive-content .tab-panel {
		display: none;
		opacity: 0;
		transform: translateX(30px);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.wp-block-interactive-content .tab-panel.active {
		display: block;
	}

	.wp-block-interactive-content .tab-panel.visible {
		opacity: 1;
		transform: translateX(0);
	}

	.wp-block-interactive-content .tab-panel-content ul {
		margin-left: 20px;
	}

	.wp-block-interactive-content .tab-panel-header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
		margin-bottom: 15px;
	}

	.wp-block-interactive-content .tab-panel-header h6 {
		font-family: "Martel", serif;
		color: #002d5b;
		margin-bottom: 0;
	}

	.wp-block-interactive-content .tab-content-icon {
		flex: 0 0 90px;
		width: 90px !important;
		height: auto;
	}

	.wp-block-interactive-content .tab-link:first-of-type {
		color: #d5a619;
		border: 2px solid #d5a619;
		background: transparent;
	}

	.wp-block-interactive-content .tab-link:last-of-type {
		background: #d5a619;
		color: #fff;
		border: 2px solid #d5a619;
	}

	.wp-block-interactive-content .tab-link:not(:last-of-type) {
		margin-bottom: 15px;
	}
}