.rkit-team-card {

    background-color: #F7F7F7;

    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;

    /* background-color: rgba(0, 0, 0, 0.5); */

    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;

    /* transform: translateY(10%); */

    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;

    /* width: 35px; */

    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; /* Facebook Blue */

    --icon-color : #ffffff;

}



.twitter {

    --color: #000000; /* X (Twitter) Black */

    --icon-color : #ffffff;

}



.pinterest {

    --color: #E60023; /* Pinterest Red */

    --icon-color : #ffffff;

}



.linkedin {

    --color: #0A66C2; /* LinkedIn Blue */

    --icon-color : #ffffff;

}



.quora {

    --color: #B92B27; /* Quora Red */

    --icon-color : #ffffff;

}



.reddit {

    --color: #FF4500; /* Reddit Orange */

    --icon-color : #ffffff;

}



.telegram {

    --color: #26A5E4; /* Telegram Blue */

    --icon-color : #ffffff;

}



.viber {

    --color: #665CAC; /* Viber Purple */

    --icon-color : #ffffff;

}



.whatsapp {

    --color: #25D366; /* WhatsApp Green */

    --icon-color : #ffffff;

}



.line {

    --color: #00B900; /* LINE Green */

    --icon-color : #ffffff;

}



.facebook:hover {

    --color: #145DBF; /* Facebook Darker Blue */

    --icon-color : #ffffff;

}



.twitter:hover {

    --color: #1C1C1C; /* X (Twitter) Darker Black */

    --icon-color : #ffffff;

}



.pinterest:hover {

    --color: #B8001B; /* Pinterest Darker Red */

    --icon-color : #ffffff;

}



.linkedin:hover {

    --color: #004182; /* LinkedIn Darker Blue */

    --icon-color : #ffffff;

}



.quora:hover {

    --color: #8A211D; /* Quora Darker Red */

    --icon-color : #ffffff;

}



.reddit:hover {

    --color: #CC3700; /* Reddit Darker Orange */

    --icon-color : #ffffff;

}



.telegram:hover {

    --color: #007BA7; /* Telegram Darker Blue */

    --icon-color : #ffffff;

}



.viber:hover {

    --color: #514483; /* Viber Darker Purple */

    --icon-color : #ffffff;

}



.whatsapp:hover {

    --color: #1EBE5C; /* WhatsApp Darker Green */

    --icon-color : #ffffff;

}



.line:hover {

    --color: #009900; /* LINE Darker Green */

    --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;

}