.btn-style2 {
display: inline-flex;
align-items: center;
gap: 0px;
position: relative;
transition: all 400ms ease;
height: 56px;
line-height: 56px;
background: var(--theme-color1);
color: var(--theme-color2);
gap: 10px;
border-radius: 40px;
padding-right: 10px;
padding-left: 30px;
}
.btn-style2:hover {
padding-right: 38px;
padding-left: 10px !important;
gap: 0;
}
.btn-style2:hover .theme-btn-arrow-left {
scale: 1;
left: 10px;
}
.btn-style2:hover .theme-btn-arrow-right {
scale: 0;
}
.btn-style2:hover .theme-btn {
transform: translateX(55px);
color: var(--theme-color2);
}
.btn-style2 .theme-btn-arrow-left,
.btn-style2 .theme-btn-arrow-right {
height: 40px;
line-height: 40px;
width: 40px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--theme-color-white);
color: var(--theme-color2);
border-radius: 50%;
transition: 0.4s;
text-align: center;
}
[data-tm-layout=dark] .btn-style2 .theme-btn-arrow-left,
[data-tm-layout=dark] .btn-style2 .theme-btn-arrow-right {
color: #fff;
}
.btn-style2 .theme-btn-arrow-right i {
rotate: -30deg;
}
.btn-style2 .theme-btn-arrow-left {
scale: 0;
left: 0;
right: auto;
position: absolute;
}
.btn-style2 .theme-btn {
font-weight: 400;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: 0.4s;
}.tm-sc-list {
list-style: none;
transition: all 0.3s ease;
}
.tm-sc-list li {
transition: all 0.3s ease;
}
.tm-sc-list li i,
.tm-sc-list li svg {
margin-right: 5px;
}
.tm-sc-list li svg {
width: 16px;
}
.tm-sc-list li i {
transition: all 0.3s ease;
}
.tm-sc-list.tm-animate-hover.icon-rotate li:hover i {
transform: rotate(360deg);
}
.tm-sc-list.tm-animate-hover.icon-rotate-x li:hover i {
transform: rotateX(360deg);
}
.tm-sc-list.tm-animate-hover.icon-rotate-y li:hover i {
transform: rotateY(180deg);
}
.tm-sc-list.tm-animate-hover.icon-translate li:hover i {
transform: translate(-10px, 10px);
}
.tm-sc-list.tm-animate-hover.icon-translate-x li:hover i {
transform: translateX(-10px);
}
.tm-sc-list.tm-animate-hover.icon-translate-y li:hover i {
transform: translateY(-10px);
}
.tm-sc-list.tm-animate-hover.icon-scale li:hover i {
transform: scale(1.1);
}