/* Yellow Bar Hover Effect for Headings */

/* Base heading styles with yellow bar */
.heading-with-bar {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  cursor: pointer; /* Show cursor on hover */
}

.heading-with-bar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: #FFC635; /* Warm yellow color */
  border-radius: 2px;
  
  /* Animation properties */
  animation: float 2s infinite ease-in-out;
  box-shadow: 0 2px 5px rgba(255, 198, 53, 0.3);
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

/* Hover effect for the bar */
.heading-with-bar:hover::after {
  height: 6px;
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 4px 8px rgba(255, 198, 53, 0.5);
}

/* For centered headings */
.heading-with-bar.centered::after {
  left: 50%;
  transform: translateX(-50%);
  width: 50px; /* Smaller fixed width for centered bars */
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

/* Hover effect for centered bars */
.heading-with-bar.centered:hover::after {
  width: 80px;
  height: 6px;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 198, 53, 0.5);
}

/* Animation for the floating effect */
@keyframes float {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 198, 53, 0.3);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 7px 10px rgba(255, 198, 53, 0.2);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 198, 53, 0.3);
  }
}

/* For centered headings */
@keyframes float-centered {
  0% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 2px 5px rgba(255, 198, 53, 0.3);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 7px 10px rgba(255, 198, 53, 0.2);
  }
  100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 2px 5px rgba(255, 198, 53, 0.3);
  }
}

/* Pause floating animation on hover */
.heading-with-bar:hover::after {
  animation-play-state: paused;
}

.heading-with-bar.centered::after {
  animation: float-centered 2s infinite ease-in-out;
}

/* Apply to section titles */
.tp-section-2-title.heading-with-bar::after,
.tp-footer-widget-title.heading-with-bar::after {
  bottom: -10px;
}