.tf-team-carousel .item-team .featured-post img {
height: 400px;
object-fit: cover;
-webkit-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-khtml-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-moz-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-ms-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
-o-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);
}
.tf-team-carousel .item-team:hover .featured-post img {
transform: scale(1.05);
}
.tf-team-carousel .item-team .featured-post {
position: relative;
overflow: hidden;
}
.tf-team-carousel.style1 .item-team .featured-post::after {
content: '';
background: #00000099;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
}
.tf-team-carousel.style1 .item-team:hover .featured-post::after {
opacity: 1;
visibility: visible;
}
.tf-team-carousel.style1 .item-team h6 {
font-size: 24px;
font-weight: 600;
line-height: 32px;
color: #181818;
margin: 0;
margin-bottom: 4px;
}
.dark-light .tf-team-carousel.style1 .item-team h6,
.dark-light .tf-team-carousel.style1 .item-team p {
color: #fff;
}
.tf-team-carousel.style1 .item-team p {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #5E5A56;
margin: 0;
}
.tf-team-carousel.style1 .list-social {
display: flex;
gap: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.tf-team-carousel.style1 .list-social a {
background: #fff;
color: #1F2124;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
}
.tf-team-carousel.style1 .item-team:hover .list-social {
opacity: 1;
visibility: visible;
}
.tf-team-carousel.style1 .list-social a:hover {
background: var(--theme-primary-color);
color: #fff;
}
.tf-team-carousel.style1 .item-team .social a {
background: #F3F5F7;
width: 48px;
height: 48px;
border-radius: 50%;
color: #181818;
font-size: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tf-team-carousel.style1 .item-team .social a:hover {
background: var(--theme-primary-color);
color: #fff;
}
.tf-team-carousel.style1 .item-team .social {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.tf-team-carousel.style1 .item-team .content {
position: relative;
}
.tf-team-carousel .owl-carousel .owl-dots {
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(180deg);
bottom: -8.4%;
display: flex;
gap: 16px;
}
.tf-team-carousel .owl-dots .owl-dot {
width: 8px;
height: 8px;
line-height: 8px;
border-radius: 50%;
position: relative;
display: inline-block;
overflow: unset;
background: transparent;
border: 1px solid #181818;
}
.tf-team-carousel .owl-dots .owl-dot::after {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: "";
width: 20px;
height: 20px;
overflow: visible;
border: 1px solid #181818;
opacity: 0;
padding: 0;
}
.tf-team-carousel .owl-dots .owl-dot.active::after {
opacity: 1;
}
.tf-team-carousel .owl-dots .owl-dot:hover,
.tf-team-carousel .owl-dots .owl-dot.active {
opacity: 1;
background: #181818;
}
.dark-light .tf-team-carousel .owl-dots .owl-dot:hover,
.dark-light .tf-team-carousel .owl-dots .owl-dot.active {
background: #fff;
}
.dark-light .tf-team-carousel .owl-dots .owl-dot::after,
.dark-light .tf-team-carousel .owl-dots .owl-dot {
border: 1px solid #fff;
}
.tf-team-carousel.style1 .item-team {
border-radius: 24px;
overflow: hidden;
}
.tf-team-carousel.style1 .item-team .featured-post img {
height: 494px;
}
.tf-team-carousel.style1 .item-team .content {
padding: 24px 24px 24px 24px;
}
.tf-team-carousel.style1 .item-team h6 {
font-size: 24px;
font-weight: 600;
line-height: 33.6px;
color: #2C2E33;
margin-bottom: 4px;
}
.tf-team-carousel.style1 .item-team p {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #5C5E61;
}
.tf-team-carousel.style1 .list-social a {
background: #FFFFFF4D;
backdrop-filter: blur(20px);
color: #fff;
font-size: 25px;
}
.tf-team-carousel.style1 .list-social a:hover {
background: var(--theme-primary-color);
color: #fff;
}
.tf-team-carousel.style1 .item-team .list-social {
top: 60%;
}
.tf-team-carousel.style1 .item-team:hover .list-social {
top: 50%;
} .tf-team-carousel.style2 .featured-post img {
height: 290px;
width: 100%;
object-position: top;
}
.tf-team-carousel.style2 .featured-post {
border-radius: 16px;
margin-bottom: 25px;
}
.tf-team-carousel.style2 .list-social {
border-radius: 16px;
background: #000;
display: flex;
align-items: center;
display: inline-flex;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
}
.tf-team-carousel.style2 .item-team:hover .list-social {
bottom: 16px;
opacity: 1;
visibility: visible;
}
.tf-team-carousel.style2 .list-social a {
color: #fff;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
position: relative;
}
.tf-team-carousel.style2 .list-social li:last-child a::after {
display: none;
}
.tf-team-carousel.style2 .list-social a::after {
content: '';
width: 1px;
height: 16px;
background: #fff;
opacity: 0.2;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.tf-team-carousel.style2 .list-social a:hover {
color: var(--theme-primary-color);
}
.tf-team-carousel.style2 .item-team {
text-align: center;
}
.tf-team-carousel.style2 h6 {
font-size: 20px;
font-weight: 600;
line-height: 30px;
color: #2C2E33;
margin-bottom: 2px;
}
.tf-team-carousel.style2 p {
font-size: 12px;
font-weight: 400;
line-height: 18px;
color: #5C5E61;
}
.tf-team-carousel .owl-dots.disabled {
display: none;
} .tf-team-carousel.style3 .item-team {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.tf-team-carousel.style3 h6 {
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: #fff;
margin-bottom: 3px;
}
.tf-team-carousel.style3 p {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
color: #fff;
}
.tf-team-carousel.style3 .content {
background: #1F2124;
padding: 24px 24px 24px 24px;
border-radius: 16px;
padding-right: 100px;
position: absolute;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
bottom: -10px;
left: 8px;
right: 8px;
}
.tf-team-carousel.style3 .item-team:hover .content {
bottom: 8px;
opacity: 1;
visibility: visible;
}
.tf-team-carousel.style3 .list-infor {
display: flex;
align-items: center;
gap: 8px;
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
.tf-team-carousel.style3 .list-infor a {
border: 1px solid #FFFFFF1A;
background: transparent;
color: #fff;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.tf-team-carousel.style3 .list-infor a:hover {
background: var(--theme-primary-color);
border-color: var(--theme-primary-color);
color: #fff;
}
.tf-team-carousel.style3 .featured-post img {
height: 494px;
}
.tf-team-carousel .list-social,
.tf-team-carousel.style3 .content {
z-index: 5;
}
.tf-team-carousel .hover-flash-img .featured-post {
position: relative;
}
.tf-team-carousel .hover-flash-img .featured-post::before {
position: absolute;
top: 0px;
left: -75%;
z-index: 2;
display: block;
content: "";
width: 50%;
height: 100%;
transform: skewX(-25deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
}
.tf-team-carousel .hover-flash-img:hover .featured-post::before {
-webkit-animation: flashshine 1.5s;
animation: flashshine 1.5s;
}
@keyframes flashshine {
100% {
left: 125%;
}
}