.template-8401 button {
    transition: color .4s;
}

.template-8401 .tab-content:has( > p:only-child:empty) {
    display: none !important;
}

/**** Hover effect on img ****/

.template-8401.img_hover_1 .tab-link {
	display: block;
	height: 100%;
	position: relative;
}

.template-8401.img_hover_1 .tab-link:before {
	content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
	transition: opacity 0.3s;
    background-color: #393e467d;
	opacity: 0;
}

.template-8401.img_hover_1 .tab-link.is-active:before,
.template-8401.img_hover_1 .tab-link:hover:before {
	opacity: .75;
}

.template-8401.img_hover_1 .tab-link:after {
    content: '\2b';
    width: 58px;
    height: 58px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
	opacity: 0;
	transition: opacity 0.3s;
    margin: -29px 0 0 -29px;
    font-size: 50px;
    line-height: 58px;
	border-radius: 50%;
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.081);
    text-align: center;
    font-family: 'FontAwesome';
    z-index: 3;
}

.template-8401.img_hover_1 .tab-link.is-active:after,
.template-8401.img_hover_1 .tab-link:hover:after {
	opacity: 1;
}

/**** Active tab effects ****/

.template-8401.active-color-3 .tab-link.is-active {
    color: var(--color-3);
}

.template-8401.active-color-4 .tab-link.is-active {
    color: var(--color-4);
}

.template-8401.active-color-bg-3 .tab-link.is-active {
    background-color: var(--color-3);
    color: var(--color-1);
}

.template-8401.active-color-bg-4 .tab-link.is-active {
    background-color: var(--color-4) !important;
    color: var(--color-2) !important;
}

.template-8401 .tab-link.is-active {
    position: relative;
}

.template-8401 .tab-link.is-hidden {
    display: none !important;
}

.template-8401.active-border-bottom-color-3 .tab-link,
.template-8401.active-border-bottom-color-3 .tab-link.is-active{
    transition: 0.1s;
    border-bottom: 0px solid !important;
}


.template-8401.active-border-bottom-color-3 .tab-link:hover,
.template-8401.active-border-bottom-color-3 .tab-link.is-active{
    border-bottom: 4px solid var(--color-3)!important;
}

/* Diskret active tab design */

.template-8401 .tabs-contents,
.template-8401 .active-1 {
    border-radius: 20px;
    transition: 0.3s;
}

.template-8401 .active-1:has(> .tab-link.is-active) {
    background: var(--color-5);
}

@media (min-width: 767.92px) {
    
    .template-8401 .tabs-contents {
        border-radius: 0 0 20px 20px !important;
    }
    
    .template-8401 .active-1 {
        border-radius: 20px 20px 0 0 !important;
    }
}