/* Raghav Social Buttons with YouTube and Adjusted Height */
.raghav-social-container {
  position: fixed;
  left: 20px;
  top: 60%;
  transform: translateY(-45%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1;
  padding: 40px 20px 40px 30px; /* Increased height to accommodate extra icon */
  clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0% 100%);
  border-radius: 15px;
  overflow: hidden;
}

/* Blowing Background Effect */
.raghav-social-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: linear-gradient(
    135deg,
    #FFD700 10%,
    #800080 30%,
    #000000 50%,
    #FF0000 70%, /* Added red for YouTube */
    #0077B5 80%,
    #FFFFFF 90%
  );
  background-size: 200% 200%;
  animation: raghav-blow-effect 12s ease infinite;
  z-index: -1;
  transform: rotate(-5deg);
}

/* YouTube Button Color */
.raghav-youtube-btn {
  background-color: #FF0000; /* YouTube red */
}

/* Rest of the styles remain the same */
.raghav-social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.raghav-social-btn:hover {
  transform: scale(1.1) translateX(5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.raghav-blog-btn { background-color: #FFD700; }
.raghav-linkedin-btn { background-color: #0077B5; }
.raghav-whatsapp-btn { background-color: #800080; }
.raghav-instagram-btn { background-color: #000000; }
.raghav-cuturl-btn { background-color: #00BFFF; }

.raghav-custom-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .raghav-social-container {
    display: none;
  }
}

.raghav-tooltip {
  position: relative;
  display: inline-block;
}

.raghav-tooltip .raghav-tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  left: 125%;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
}

.raghav-tooltip:hover .raghav-tooltiptext {
  visibility: visible;
  opacity: 1;
}

@keyframes raghav-blow-effect {
  0%, 100% {
    background-position: 0% 0%;
    transform: rotate(-5deg) scale(1);
  }
  25% {
    background-position: 50% 25%;
    transform: rotate(-3deg) scale(1.02);
  }
  50% {
    background-position: 100% 50%;
    transform: rotate(-7deg) scale(1.01);
  }
  75% {
    background-position: 25% 75%;
    transform: rotate(-4deg) scale(1.03);
  }
}


/* Updated CSS with Scroll Top Button */
.raghav-hex-column {
  position: fixed;
  right: 30px;
  top: 55%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

/* Scroll Top Button Specific Styles */
.raghav-top-btn {
  background: #9b59b6 !important;
  display: none !important; /* Hidden by default */
}

.raghav-top-btn.visible {
  display: flex !important; /* Shown when scrolled */
}

/* Rest of your existing styles... */
.raghav-hex-btn {
  width: 56px;
  height: 64px;
  background: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  text-decoration: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

/* Button Colors */
.raghav-tools-btn { background: #3498db; }
.raghav-books-btn { background: #e74c3c; }
.raghav-bookshop-btn { background: #2ecc71; }
.raghav-news-btn { background: #f39c12; }

/* Hover Effects */
.raghav-hex-btn:hover {
  transform: translateX(-5px) scale(1.1);
  z-index: 2;
}

/* Tooltip styles... */
.raghav-hex-btn::after {
  content: attr(title);
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  font-family: Arial, sans-serif;
}

.raghav-hex-btn:hover::after {
  opacity: 1;
}

/* Hide on small screens */
@media (max-width: 992px) {
  .raghav-hex-column {
    display: none;
  }
}


 /* Hexagonal Buttons */
.hex-buttons-container {
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hex-btn {
   width: 56px;
    height: 64px;
    background: #4a6bff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hex-btn.visible {
    opacity: 1;
    visibility: visible;
}

.hex-btn:hover {
    transform: scale(1.1);
}

.hex-services-btn {
    background: #4a6bff;
}

.hex-services-btn:hover {
    background: #3a5bef;
}

.hex-home-btn {
    background: #ff6b4a;
}

.hex-home-btn:hover {
    background: #ef5b3a;
}

/* Hide on mobile devices (screen width less than 768px) */
@media only screen and (max-width: 768px) {
    .hex-buttons-container {
        display: none;
    }
}