.tabgroup {
    color: #0B0B0B;
    margin-top: 14px;
	width: 100%; 
    position: relative;


}
.tabgroup .tablist {
    display: flex;
    border-block-end: 1px solid #582F67;

}
.tabgroup .tab {
    padding: 0.5em 1em;
    flex: 1 1 auto;
    position:relative;
	background-color: rgba(239, 240, 244, 0.8);
	
}

.tabgroup .tab.active {
	border-block-end: 2px solid #582F67;
	background-color: #EABBDF;
	color: #582F67;
}

.tabgroup .tab:hover {
	transition:ease-in-out 0.5s;
	background-color: #EABBDF;
    color: #582F67;

}
.tabgroup .tab.active::after {

	background-color:#582F67;
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	height:3px;
}

.tabgroup .contentlist {
	width:100%;
	position:relative;
	border: 0;
	max-width: 1000px;
	min-height: 70vh;

	contain: layout;
}
.tabgroup .content {
    color: #0D0611;
	background-color: rgba(239, 240, 244, 0.8);
	

	width:100%;
	position:absolute;
	top:0;
	left:0;
	padding: 1em;

	opacity:0;
	transition:ease-in 0.3s;
	pointer-events:none;
}

.tabgroup .content.active {
	opacity:1;
	pointer-events:initial;
	
}

.tabgroup .content p{
	width: 100%;
	
}

@media (max-width: 780px) {

	.tabgroup {
		position: relative;
		width: 103%;
		transform: translateX(-14%);
	}

    .tabgroup .contentlist {
        height: 180vh;
		padding-bottom: 2em;
    }

    .tabgroup .tablist {
        flex-wrap: wrap;
		justify-content: center;
		flex-direction: column;
		
    }

    .tabgroup .tab {
        flex: none; 
		width: 100%; 
        text-align: center;
		justify-content: center;
    }

    .tabgroup .content {
        overflow-wrap: break-word;
        word-break: break-word;
    }

}