.rkit-team-card {
background-color: white;
transition: all 0.5s;
overflow: hidden;
position: relative;
}
.pointer {
--pointer-size : 5px;
}
.rkit-team-card.pointer::before {
content: "";
height: var(--pointer-size);
width: 100%;
bottom: 0;
left: 0;
right: 0;
background: blue;
position: absolute;
z-index: 9999;
}
.rkit-team-card.pointer::after {
content: "";
position: absolute;
width: 0%;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: var(--pointer-size);
transition: width 0.5s ease;
background: #00cea6;
z-index: 99999;
}
.rkit-team-card:hover.pointer::after {
width: 100%;
}
.rkit-team__detail {
padding: 2rem;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
transition: all 0.5s;
}
.rkit-team__detail h4 {
margin-bottom: 0;
margin-top: 0;
}
.rkit-team__img {
display: flex;
transition: all 1s;
overflow: hidden;
}
.rkit-team__img img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
transition: transform 0.5s;
}
.rkit-team__img.move-left img {
transform: scale(1.2) translateX(8%);
}
.rkit-team__img.move-right img {
transform: scale(1.2) translateX(-8%);
}
.rkit-team__img.move-up img {
transform: scale(1.2) translateY(8%);
}
.rkit-team__img.move-down img {
transform: scale(1.2) translateY(-8%);
}
.rkit-team-card:hover .rkit-team__img.move-left img,
.rkit-team-card:hover .rkit-team__img.move-right img,
.rkit-team-card:hover .rkit-team__img.move-up img,
.rkit-team-card:hover .rkit-team__img.move-down img {
transform: scale(1.2) translateX(0%);
}
.rkit-team-card:hover .rkit-team__img.zoom-in img {
transform: scale(1.2);
}
.rkit-team__img.zoom-out img {
transform: scale(1.2);
}
.rkit-team-card:hover .rkit-team__img.zoom-out img {
transform: scale(1);
}
.rkit-team__role {
color: gray;
font-size: 15px;
margin-bottom: 0.5rem;
}
.rkit-team__description {
margin-bottom: 0.5rem;
}
.rkit-team__overlay {
overflow: hidden;
}
.rkit-team__overlay .rkit-team-card {
position: relative;
}
.rkit-team__overlay .rkit-team__detail {
visibility: hidden;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: translateY(100%);
transition: all 0.5s; color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.rkit-team__overlay .rkit-team__detail::after {
content: "";
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0; transition: all 0.5s;
background-color: rgba(0, 0, 0, 0.5);
color: white;
z-index: -1;
}
.rkit-team__overlay:hover .rkit-team__detail,
.rkit-team__overlay:hover .rkit-team__detail::after
{
visibility: visible;
transform: translateY(0%);
opacity: 1;
}
.rkit-team__overlay:hover .rkit-team__img {
filter: blur(5px);
}
.rkit-team__social {
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.rkit-team__social_item {
padding: 20px;
aspect-ratio: 1/1; display: flex;
justify-content: center;
align-items: center;
background: var(--color);
transition: all 0.5s;
}
.rkit-team__social_icon {
color: var(--icon-color);
fill: var(--icon-color);
}
.rkit-team__social_on_hover_top .rkit-team-card,
.rkit-team__social_on_hover_left .rkit-team-card,
.rkit-team__social_on_hover_right .rkit-team-card,
.rkit-team__social_on_hover_bottom .rkit-team-card {
position: relative;
overflow: hidden;
}
.rkit-team__social_on_hover_top .rkit-team__social,
.rkit-team__social_on_hover_left .rkit-team__social,
.rkit-team__social_on_hover_right .rkit-team__social,
.rkit-team__social_on_hover_bottom .rkit-team__social {
position: absolute;
display: flex;
opacity: 0;
transition: all 0.5s;
}
.rkit-team__social_on_hover_top .rkit-team__social ,
.rkit-team__social_on_hover_bottom .rkit-team__social {
flex-direction: row;
}
.rkit-team__social_on_hover_left .rkit-team__social, 
.rkit-team__social_on_hover_right .rkit-team__social {
flex-direction: column;
top: 0;
bottom: 0;
align-items: center;
}
.rkit-team__social_on_hover_top .rkit-team__social, 
.rkit-team__social_on_hover_bottom .rkit-team__social {
flex-direction: row;
left: 0;
right: 0;
justify-content: center;
}
.rkit-team__social_on_hover_left .rkit-team__social {
left: -50px;
}
.rkit-team__social_on_hover_left:hover .rkit-team__social {
left: 0;
opacity: 1;
}
.rkit-team__social_on_hover_right .rkit-team__social {
right: -50px;
}
.rkit-team__social_on_hover_right:hover .rkit-team__social {
right: 0;
opacity: 1;
}
.rkit-team__social_on_hover_top .rkit-team__social {
top: -50px;
}
.rkit-team__social_on_hover_top:hover .rkit-team__social {
top: 0;
opacity: 1;
}
.rkit-team__social_on_hover_bottom .rkit-team__social {
bottom: -50px;
}
.rkit-team__social_on_hover_bottom:hover .rkit-team__social {
bottom: 0;
opacity: 1;
}
.rkit-team__centered .rkit-team-card{
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rkit-team__centered .rkit-team__img {
border-radius: 50%;
overflow: hidden;
width: 50%;
min-width: 180px;
}
.rkit-team__centered .rkit-team__img img {
aspect-ratio: 1/1;
}
.rkit-team__centered .rkit-team__detail {
text-align: center;
justify-content: center;
align-items: center;
}
.facebook {
--color: #1877F2; --icon-color : #ffffff;
}
.twitter {
--color: #000000; --icon-color : #ffffff;
}
.pinterest {
--color: #E60023; --icon-color : #ffffff;
}
.linkedin {
--color: #0A66C2; --icon-color : #ffffff;
}
.quora {
--color: #B92B27; --icon-color : #ffffff;
}
.reddit {
--color: #FF4500; --icon-color : #ffffff;
}
.telegram {
--color: #26A5E4; --icon-color : #ffffff;
}
.viber {
--color: #665CAC; --icon-color : #ffffff;
}
.whatsapp {
--color: #25D366; --icon-color : #ffffff;
}
.line {
--color: #00B900; --icon-color : #ffffff;
}
.facebook:hover {
--color: #145DBF; --icon-color : #ffffff;
}
.twitter:hover {
--color: #1C1C1C; --icon-color : #ffffff;
}
.pinterest:hover {
--color: #B8001B; --icon-color : #ffffff;
}
.linkedin:hover {
--color: #004182; --icon-color : #ffffff;
}
.quora:hover {
--color: #8A211D; --icon-color : #ffffff;
}
.reddit:hover {
--color: #CC3700; --icon-color : #ffffff;
}
.telegram:hover {
--color: #007BA7; --icon-color : #ffffff;
}
.viber:hover {
--color: #514483; --icon-color : #ffffff;
}
.whatsapp:hover {
--color: #1EBE5C; --icon-color : #ffffff;
}
.line:hover {
--color: #009900; --icon-color : #ffffff;
}
.tiktok {
--color : #000000;
--icon-color : #ffffff;
}
.tiktok:hover {
--color : #1C1C1C;
--icon-color : #ffffff;
}
.github {
--color : #333333;
--icon-color : #ffffff;
}
.github:hover {
--color : #000000;
--icon-color : #ffffff;
}
.youtube {
--color : #ff0000;
--icon-color : #ffffff;
}
.youtube:hover {
--color : #CD201F;
--icon-color : #ffffff;
}
.instagram {
--color : #E1306C;
--icon-color : #ffffff;
}
.instagram:hover {
--color : #c13584;
--icon-color : #ffffff;
}
.dribbble {
--color :  #ea4c89;
--icon-color : #ffffff;
}
.dribbble:hover {
--color : #ca2e6a;
--icon-color : #ffffff;
}
.behance {
--color : #1769ff;
--icon-color :#ffffff;
}
.behance:hover {
--color:#153bbb;
--icon-color : #ffffff;
}