OwlCyberSecurity - MANAGER

Edit File: _our-team.scss

.ova-our-team {

&:hover {
		.share-button {
			transition: all .5s ease;
			background-color: var(--primary);
			border: 1px solid var(--primary);
            .share-icon {
            	transition: all .5s ease;
             	-webkit-transition-delay: 0.1s;
			    transition-delay: 0.1s;
			    -webkit-transform: scale(0.95) rotateY(360deg);
			    transform: scale(0.95) rotateY(360deg);
            }
            .socials {
				transition: all .5s ease;
				top: calc( 100% + 10px);
				opacity: 1;
				visibility: visible;
				z-index: 1;
				&.top {
					top: unset;
					bottom: calc( 100% + 10px);
				}
			}
		}
	}

.image {
		display: flex;
		position: relative;
		overflow: hidden;
		img {
			display: block;
			width: 100%;
			max-height: 450px;
			object-fit: cover;
		}
	}

.share-button {
		transition: all .5s ease;
		position: relative;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		background-color: #0D0E0F;
		border: 1px solid #232526;
		cursor: pointer;
		.share-icon {
			transition: all .3s ease;
			-webkit-transition-delay: 0.1s;
		    transition-delay: 0.1s;
		    -webkit-transform: scale(1) rotateY(0deg);
		    transform: scale(1) rotateY(0deg);
		    line-height: 1;
		    i {
                font-size: 20px;
                line-height: 1;
				color: #fff;  
			}
		}
		.socials {
			transition: all .5s ease;
			margin: 0;
			padding: 0;
			list-style: none;

position: absolute;
			top: 0;
			opacity: 0;
			visibility: hidden;

display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 10px;

&.top {
				top: unset;
				bottom: 0;
			}

li {
				&:hover {
					a {
						background-color: var(--primary);
						border: 1px solid var(--primary);
					}
				}
				a {
					transition: all .3s ease;
					width: 50px;
					height: 50px;
					border-radius: 50%;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					background-color: #0D0E0F;
					border: 1px solid #232526;
					i {
						display: inline-flex;
						color: #fff;
					}
				}
			}
		}
	}

.info {
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 40px 20px 20px 20px;

.divider {
			width: 1px;
			height: 47px;
			background-color: #232526;
		}

.name {
			margin: 0 0 4px 0;
			font-size: 25px;
			font-weight: 500;
			text-transform: capitalize;
		}

.job {
			margin: 0;
			font-size: 14px;
			color: #787F84;
		}
	}

}