/* 
  Class: hover-arrow-effect
  Use this class on any Elementor container or section.
  On hover, it will display a right-bottom arrow (→) from inside the container without overflow.
*/
.hover-arrow-effect {
  position: relative;
  overflow: hidden;
}

.hover-arrow-effect::after {
  content: '→';
  position: absolute;
  bottom: 10px;
  right: 10px; /* Final position stays inside */
  font-size: 20px;
  color: #000;
  opacity: 0;
  transform: translateX(20px); /* Starts offset within container */
  transition: all 0.3s ease;
}

.hover-arrow-effect:hover::after {
  transform: translateX(0); /* Slides into view inside */
  opacity: 1;
}

/* You can add more custom button or hover styles below */