/* Sticky Social Media Bar */
.sticky-social-bar {
position: fixed; /* Makes it stick to the viewport */
top: 50%; /* Starts at the middle vertically */
right: 0; /* Aligns to the right edge */
transform: translateY(-50%); /* Adjusts it perfectly to the vertical center */
display: flex; /* Arranges icons in a column */
flex-direction: column; /* Stacks items vertically */
z-index: 1000; /* Ensures it’s above most other content */
background-color: transparent; /* Or a slight background if preferred */
padding: 0;
margin: 0;
}
.sticky-social-bar a {
display: flex;
justify-content: center;
align-items: center;
width: 50px; /* Width of each icon container */
height: 50px; /* Height of each icon container */
margin-bottom: 5px; /* Space between icons */
color: #fff; /* Icon color */
background-color: #007bff; /* Default background color (Duracet blue) */
text-decoration: none;
font-size: 22px; /* Icon size */
border-radius: 8px 0 0 8px; /* Rounded left corners, sharp right */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.3s ease;
}
/* Hover effects for individual icons (optional: change colors for specific brands) */
.sticky-social-bar a:hover {
transform: translateX(-10px); /* Slides out slightly on hover */
background-color: #0056b3; /* Darker blue on hover */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sticky-social-bar a:nth-child(1):hover { /* LinkedIn */
background-color: #0077B5; /* LinkedIn Brand Color */
}
.sticky-social-bar a:nth-child(2):hover { /* Twitter/X */
background-color: #1DA1F2; /* Twitter Brand Color */
}
.sticky-social-bar a:nth-child(3):hover { /* Facebook */
background-color: #1877F2; /* Facebook Brand Color */
}
.sticky-social-bar a:nth-child(4):hover { /* Instagram */
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
background-color: #285AEB;
}
/* Add more :nth-child(X):hover rules for other social media platforms if you add them */
/* Hide on very small screens if it becomes too intrusive */
@media (max-width: 600px) {
.sticky-social-bar {
display: none; /* Hide the bar */
}
}
/* Optionally, place it slightly differently on tablets */
@media (min-width: 601px) and (max-width: 992px) {
.sticky-social-bar {
right: 0; /* Keep it on the right */
top: 60%; /* Or adjust vertical position */
transform: translateY(-60%);
}
.sticky-social-bar a {
width: 45px;
height: 45px;
font-size: 20px;
}
}