/* ---------------- Ripple button ------------------- */
/*Explanation of How the Code Works:

	1.	JavaScript:
	•	The createRipple function is triggered when a button is clicked.
	•	A new <span> element is created and styled as a ripple using the .ripple class.
	•	The position of the ripple is calculated based on where the click occurred within the button.
	•	The ripple effect (a circular wave) expands from the click position, and the ripple element is removed after the animation completes to keep the DOM clean.
	2.	CSS:
	•	The .ripple-button class styles the button and sets position: relative and overflow: hidden to ensure that the ripple effect stays within the button.
	•	The .ripple class defines the appearance of the ripple and animates its expansion and fade-out using CSS animations.
	•	The @keyframes rule defines the animation, scaling the ripple from a small dot to a large circle while fading out the opacity.


    */
.ripple-button {
  position: relative; /* Ensures the ripple effect is positioned relative to the button */
  overflow: hidden; /* Prevents the ripple from overflowing the button's boundaries */
  padding: 10px 20px; /* Adds padding for better button aesthetics */
  border: none; /* Removes default border */
  background-color: #6200ea; /* Sets background color for the button */
  color: white; /* Sets text color */
  font-size: 16px; /* Sets font size */
  cursor: pointer; /* Changes cursor to pointer on hover */
  outline: none; /* Removes default outline */
  border-radius: 4px; /* Rounds button corners */
}

/* Ripple effect styles */
.ripple {
  position: absolute; /* Positions the ripple element absolutely inside the button */
  background: rgba(255, 255, 255, 0.6); /* Sets a semi-transparent white color for the ripple */
  border-radius: 50%; /* Makes the ripple a circle */
  transform: scale(0); /* Starts the ripple at 0 size */
  animation: ripple-effect 0.6s linear; /* Animates the ripple expansion over 0.6 seconds */
  pointer-events: none; /* Ensures ripple does not interfere with button clicks */
}

/* Keyframes for the ripple effect animation */
@keyframes ripple-effect {
  to {
    transform: scale(4); /* Expands the ripple size to 4 times its initial scale */
    opacity: 0; /* Fades the ripple out to complete transparency */
  }
}
/* ---------------CTA button  ----------------

    <!-- Example CTA Button -->
  <button class="cta-button">Sign Up Now</button>*/
.cta-button {
  display: inline-block; /* Makes the button size to content */
  padding: 12px 24px; /* Adds padding for a larger clickable area */
  border: none; /* Removes default button borders */
  border-radius: 8px; /* Rounds button corners for a modern look */
  background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Gradient background for visual appeal */
  color: white; /* Sets text color to white for contrast */
  font-size: 18px; /* Larger font size for better readability */
  font-weight: bold; /* Bold font weight to stand out */
  text-transform: uppercase; /* Uppercase text for emphasis */
  cursor: pointer; /* Changes cursor to pointer on hover */
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effects */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow to elevate button */
  outline: none; /* Removes default outline */
}

/* Hover effect for CTA button */
.cta-button:hover {
  transform: scale(1.05); /* Slightly scales up the button on hover */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Increases shadow size for depth effect */
}

/* Focus effect for CTA button (for keyboard navigation) */
.cta-button:focus {
  outline: 2px solid rgba(255, 126, 95, 0.5); /* Adds a visible focus outline */
  outline-offset: 4px; /* Offsets the outline for better visibility */
}

/* Active effect for CTA button (when clicking) */
.cta-button:active {
  transform: scale(0.98); /* Scales down slightly to mimic a button press */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Reduces shadow size to appear pressed */
}

/*  change the buttons width to 100% if the parent has text align to 'center' */
.button-full-width{
width: 100%;
}

/* make sticky */
.sticky-top-right{
    line-height: 1.2; /* Ensure text isn't squished */
  height: auto;     /* Prevent collapsing */
  min-height: 48px; /* Optional: Set a minimum button height */
      position: fixed;
    display: block;
    bottom: 4rem;
    right: 2rem;

    /*  if it's not in a container maker sure it stays to the right */
    margin-left: auto;
    z-index: 1000 ;
}
/* -------- yellow CTA -------- */
/* Base styles for the Yellow CTA button */
.yellow-cta-button {

  display: inline-block; /* Makes the button size to content */
  padding: 12px 24px; /* Adds padding for a larger clickable area */
  border: none; /* Removes default button borders */
  border-radius: 8px; /* Rounds button corners for a modern look */
  background: linear-gradient(135deg, #FCC838, #fc831a); /* Yellow-orange gradient background */
  color: white; /* Sets text color to white for contrast */
  font-size: 18px; /* Larger font size for better readability */
  font-weight: bold; /* Bold font weight to stand out */
  text-transform: uppercase; /* Uppercase text for emphasis */
  cursor: pointer; /* Changes cursor to pointer on hover */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow to elevate button */
  outline: none; /* Removes default outline */
  transition: transform 0.5s, box-shadow 0.5s; /* Smooth transition for hover effects */
  
}

/* Hover effect for Yellow CTA button */
.yellow-cta-button:hover {
  transform: scale(1.05); /* Slightly scales up the button on hover */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Increases shadow size for depth effect */
  /* background: linear-gradient(135deg, #fc831a, #f7b733); Changes gradient direction for effect */
}

/* Focus effect for Yellow CTA button (for keyboard navigation) */
.yellow-cta-button:focus {
  outline: 2px solid rgba(247, 183, 51, 0.5); /* Adds a visible focus outline with yellow tint */
  outline-offset: 4px; /* Offsets the outline for better visibility */
}

/* Active effect for Yellow CTA button (when clicking) */
.yellow-cta-button:active {
  transform: scale(0.98); /* Scales down slightly to mimic a button press */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Reduces shadow size to appear pressed */
}


/*  animated button */
/* Base styles for the animated button */
.animated-button {
  position: relative; /* Position relative to allow pseudo-element positioning */
  display: inline-block; /* Allows margin and padding */
  padding: 12px 24px; /* Padding for the button */
  border: none; /* Removes default button borders */
  background-color: #f9c536;; /* Initial transparent background */
  color: #ffffff;
  border: solid  1px;
  font-size: 16px; /* Font size */
  font-weight: bold; /* Font weight for emphasis */
  cursor: pointer; /* Pointer cursor on hover */
  overflow: hidden; /* Hide overflow for the pseudo-element */
  outline: none; /* Removes default outline */
  width: 100%;
  transition: transform 0.2s; /* Smooth transition for lift effect */
  z-index: 0; /* Set z-index to manage stacking context */
}

/* Pseudo-element for the fill effect */
.animated-button::before {
  content: ''; /* Creates a pseudo-element */
  position: absolute; /* Positions absolutely within the button */
  top: 0; /* Aligns to the top */
  left: 0; /* Aligns to the left */
  width: 100%; /* Full width initially */
  height: 100%; /* Full height */
  color: #fff;

  background-color: #000000;/* The fill color for the hover effect */
  transform: translateX(-100%); /* Initially hide the fill from the left */
  transition: transform 0.4s ease; /* Smooth transition for the fill effect */
  z-index: -1; /* Places the fill behind the text */
}

/* Hover effect for the button */
.animated-button:hover::before {
  transform: translateX(0); /* Fills the button from left to right */
}

/* Lift effect on hover */
.animated-button:hover {
    color:#fff;
  transform: translateY(-3px); /* Lifts the button slightly */
}

/* Active effect for pressing down */
.animated-button:active {
  transform: translateY(1px); /* Moves the button down slightly to mimic pressing */
}

/* Active effect for unfill from right to left */
.animated-button:active::before {
  transform: translateX(100%); /* Unfills the button from right to left */
  transition: transform 0.2s ease; /* Faster transition for unfill effect */
}