.tm-interactive-tabs-content {
position: relative;
}
.tm-interactive-tabs-content .tab {
display: none;
}
.tm-interactive-tabs-content .active-tab .content-box {
opacity: 1;
visibility: visible;
left: 0;
}
.tm-interactive-tabs.tabs-default .features-list {
position: relative;
list-style: none;
padding: 0px;
margin: 0px;
}
.tm-interactive-tabs.tabs-default .features-list li {
position: relative;
font-size: 34px;
line-height: 1.2em;
color: #858585;
font-weight: 500;
border-top: 1px solid rgba(240, 240, 240, 0.2);
padding: 21px 0;
cursor: pointer;
transition: all 300ms ease;
}
@media (max-width: 991.98px) {
.tm-interactive-tabs.tabs-default .features-list li {
font-size: 24px;
}
}
.tm-interactive-tabs.tabs-default .features-list li .icon {
position: absolute;
right: 0;
top: 0;
font-size: 24px;
color: #e5e5e5;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms ease;
}
.tm-interactive-tabs.tabs-default .features-list li.active-btn {
border-top: 1px solid rgba(240, 240, 240, 0.5);
color: var(--theme-color2);
}
.tm-interactive-tabs.tabs-default .features-list li.active-btn i {
transform: rotate(180deg) scale(-1);
color: var(--theme-color1);
}
.tm-interactive-tabs.tabs-default .features-list li:first-child {
border-top: 0;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn {
position: relative;
padding: 10px 10px;
padding-left: 100px;
background-color: #f7f7f7;
font-size: 16px;
color: #000000;
font-weight: 600;
display: flex;
align-items: center;
cursor: pointer;
min-height: 90px;
margin-bottom: 20px;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:last-child {
margin-bottom: 0;
}
@media (max-width: 991.98px) {
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:after, .tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn::before {
display: none;
}
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn .sub-icon {
margin-left: 10px;
font-size: 12px;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:hover {
color: #fff;
background-color: var(--theme-color1);
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:hover .icon {
background-color: var(--theme-color4);
color: #fff;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:hover:before {
background-color: var(--theme-color4);
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn.active-btn {
color: #fff;
background-color: var(--theme-color1);
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn.active-btn .icon {
background-color: var(--theme-color4);
color: #fff;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn.active-btn:before {
background-color: var(--theme-color4);
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn.active-btn:after {
border-left: 20px solid var(--theme-color4);
opacity: 1;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:before {
position: absolute;
left: 100%;
top: 50%;
content: "";
height: 74px;
margin-top: -37px;
width: 5px;
background-color: var(--theme-color1);
transition: all 300ms ease;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn:after {
position: absolute;
left: 100%;
top: 50%;
margin-top: -37px;
margin-left: 5px;
content: "";
border-top: 37px solid transparent;
border-bottom: 37px solid transparent;
opacity: 0;
transition: all 300ms ease;
}
.tm-interactive-tabs.tabs-skin-style1 .tab-buttons .tab-btn .icon {
position: absolute;
left: 10px;
top: 10px;
height: 70px;
width: 70px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color1);
font-size: 36px;
transition: all 300ms ease;
}