/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.custom-h1-hero {
	color: #FFCA00;
	font-family: Genaminto;
	font-size: 78px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}

.custom-h2 {
	color: #33745B;
	font-family: Genaminto;
	font-size: 45px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	letter-spacing: -0.9px;
}

.custom-btn .elementor-button-icon svg {
	width: 24px;
}

/* 1. Base State: Icon starts naturally on the left */
.custom-btn .elementor-button-content-wrapper {
  align-items: center;
  gap: 10px;
}

.custom-btn .elementor-button-icon {
  display: inline-flex;
  opacity: 1;
  transform: translateX(0);
  /* Smooth reset when you stop hovering */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.custom-btn .elementor-button-icon svg {
  width: 24px;
  height: 24px;
}

/* 2. Hover State: Animate the icon away, then re-introduce it on the right */
.custom-btn a:hover .elementor-button-icon {
  /* Instantly changes layout order smoothly because the animation handles the visual positioning */
  order: 2; 
  
  /* Fires the custom keyframe that handles the exit, position swap, and entry */
  animation: teleportIconRight 0.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

/* Optional: Smoothly nudge the text slightly left on hover to balance the gap change */
.custom-btn .elementor-button-text {
  transition: transform 0.3s ease;
}
.custom-btn a:hover .elementor-button-text {
  transform: translateX(-4px);
}

/* 3. The Keyframe Magic */
@keyframes teleportIconRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  /* Halfway through, the icon completely fades out on the left */
  35% {
    opacity: 0;
    transform: translateX(-15px);
  }
  /* A tiny fraction of a second where it shifts to the right side invisibly */
  36% {
    opacity: 0;
    transform: translateX(15px);
  }
  /* Smoothly slides into its final destination on the right side */
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media(max-width :767px) {
	.custom-h1-hero {
		font-size: 36px;
		line-height: 40px;
	}
	
	.custom-h2 {
		font-size: 32px;
		line-height: 40px;
	}
}