.rkit-textual-showcase {
overflow: visible;
}
.rkit-textual-showcase-container{
overflow: visible; 
width: 100%;
display: flex;
flex-direction: row;  
justify-content: center; 
}
.rkit-textual-showcase-content{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap : 20px;
}
.rkit-textual-showcase-item{
display: flex;
width: auto;
height: auto;
text-wrap: nowrap; 
justify-content: center;
} .rkit-textual-text {
display: inline-block;
position: relative;
text-align: center; 
-webkit-background-clip: text;
background-clip: text;
background-color: transparent;  
z-index: 1;
}
.rkit-textual-text svg {
fill: none;
stroke: black;
stroke-width: 12px;
stroke-miterlimit: 10;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
stroke-linecap: round;
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 20px);
opacity: 0;
transform: translate(-50%, -50%);
z-index: -1;
height: calc(100% + 15px);
overflow: visible;
animation : handdrawn 1000ms infinite alternate;
}
@keyframes handdrawn {
0% {
stroke-dashoffset: 1500;
opacity: 0;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.rkit-textual-text-container{
display: block;
width: auto;
opacity: 1;
}
.rkit-textual-icon{
display: inline-block;
font-size: 3rem;
width: 3rem;
color: black;
fill: black;
}
.image-showcase img{
display: block;
width: auto;
height: 100%;
overflow: hidden;
}
.image-showcase { 
width: auto;
height: auto;
overflow: hidden;
opacity : 1;
} .icon-showcase{
display: block;
width: auto;
height: auto;
opacity : 1;
}
.icon-showcase:hover .icon_hide{
visibility: hidden;
}
.icon-showcase:hover .icon_show{
visibility: visible;
} .rkit-textual-showcase-item:hover .hide-yes{
opacity : 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
} .rkit-textual-showcase-item:hover .rkit-textual-text-container-hover{
opacity : 1;
visibility: visible;
}
.rkit-textual-showcase-item:hover .icon-showcase-hover{
opacity : 1;
visibility: visible;
}
.rkit-textual-showcase-item:hover .image-showcase-hover{
opacity : 1;
visibility: visible;
}  .rkit-textual-text-hover {
display: inline-block;
position: relative;
text-align: center;
line-height: 2;
-webkit-background-clip: text;
background-clip: text;
background-color: transparent;  
z-index: 1;
}
.rkit-textual-text-hover svg {
fill: none;
stroke: black;
stroke-width: 12px;
stroke-miterlimit: 10;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
stroke-linecap: round;
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 20px);
opacity: 0;
transform: translate(-50%, -50%);
z-index: -1;
height: calc(100% + 15px);
overflow: visible;
animation : handdrawn-hover 1000ms infinite alternate;
}
@keyframes handdrawn-hover {
0% {
stroke-dashoffset: 1500;
opacity: 0;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.rkit-textual-text-container-hover{
display: flex;
position: absolute;
align-items: center;
justify-content: center; 
align-self : center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
text-align: center;
width: auto;
}
.image-showcase-hover img{
display: block;
width: auto;
height: 100%;
overflow: hidden;
}
.image-showcase-hover { 
display: flex;
position: absolute;
align-items: center;
justify-content: center; 
align-self : center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
text-align: center;
width: auto;
height: auto;
overflow: hidden;
} .icon-showcase-hover{
display: flex;
position: absolute;
align-items: center;
justify-content: center;
align-self : center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
text-align: center;
width: auto;
color: black;
fill: black;
}
.rkit-textual-icon-hover{
display: inline-block;
font-size: 3rem;
width: 3rem;
color: black;
fill: black;
}