.mail-icon-hover {
	position: relative;
	display: inline-block;
}

.mail-icon-hover::after {
	content: "Email Me";
	position: absolute;
	bottom: 110%;
/* show above icon */
	left: 50%;
	transform: translateX(-50%);
	background: white;
	color: blue;
	padding: 6px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease;
	font-size: 14px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.mail-icon-hover:hover::after {
	opacity: 1;
	visibility: visible;
}

/*Tableau Tooltip*/
.tableau-tooltip {
	position: relative;
	display: inline-block;
}

.tableau-tooltip::after {
	content: "My Tableau Public Site";
/* Tooltip text */
	position: absolute;
	bottom: 110%;
/* Tooltip appears above the link */
	left: 50%;
	transform: translateX(-50%);
/* Center horizontally */
	background: white;
	color: blue;
	padding: 6px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
/* Initially hidden */
	visibility: hidden;
/* Initially hidden */
	transition: opacity .3s ease;
/* Smooth fade-in effect */
	font-size: 14px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Subtle shadow for the tooltip */
	z-index: 10;
}

.tableau-tooltip:hover::after {
	opacity: 1;
/* Make the tooltip visible */
	visibility: visible;
/* Tooltip is shown on hover */
}

/*My YouTube Page Tooltip CSS Code*/
.youtube-tooltip {
	position: relative;
	display: inline-block;
}

.youtube-tooltip::after {
	content: "YouTube Page";
/* Tooltip text */
	position: absolute;
	bottom: 110%;
/* Tooltip appears above the element */
	left: 50%;
	transform: translateX(-50%);
/* Center horizontally */
	background: white;
	color: blue;
/* YouTube's classic red color */
	padding: 6px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
/* Initially hidden */
	visibility: hidden;
/* Initially hidden */
	transition: opacity .3s ease;
/* Smooth fade-in effect */
	font-size: 14px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Subtle shadow for the tooltip */
	z-index: 10;
}

.youtube-tooltip:hover::after {
	opacity: 1;
/* Make the tooltip visible */
	visibility: visible;
/* Tooltip is shown on hover */
}/*LinkedIn Tooltip CSS Code */
	
}

.linkedin-tooltip::after {
	content: "Let's Connect on LinkedIn";
/* Tooltip text */
	position: absolute;
	bottom: 110%;
/* Tooltip appears above the element */
	left: 50%;
	transform: translateX(-50%);
/* Center horizontally */
	background: white;
	color: blue;
/* Standard color (blue) */
	padding: 6px 10px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
/* Initially hidden */
	visibility: hidden;
/* Initially hidden */
	transition: opacity .3s ease;
/* Smooth fade-in effect */
	font-size: 14px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/* Subtle shadow for the tooltip */
	z-index: 10;
}

.linkedin-tooltip:hover::after {
	opacity: 1;
/* Make the tooltip visible */
	visibility: visible;
/* Tooltip is shown on hover */
}