/* 
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 */


/* 1) Define the keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(5px);
  }
}

/* 2) Base state: always present, but “fades out” */
.reveal_text {
  display: block !important;           /* override any display:none */
  opacity: 0;                          /* ensure starting at 0 */
  pointer-events: none;                /* non-interactive when hidden */
  animation: fadeOut 0.3s forwards;    /* run fadeOut immediately */
}

@media only screen and (max-width: 767px) {
  .reveal_text {
  opacity: 1 !important;
}
}

/* 3) Hover state: in the SAME section, swap to fadeIn */
.reveal_section:has(.reveal_icon:hover) .reveal_text {
  animation: fadeIn 0.3s forwards;     /* run fadeIn on hover */
  pointer-events: auto;                /* clickable when visible */
}

/* 4) SVG rotation (you’ve got this working already) */
.reveal_icon svg {
  transform-origin: center center !important;
  transition: transform 0.3s ease-in-out !important;
}

.reveal_icon:hover svg {
  transform: rotate(45deg) !important; /* arrow down */
}

.rotate_icon_down:hover svg {
	transform: rotate(-45deg) !important; /* arrow down */
}
.rotate_icon_down-left:hover svg {
	transform: rotate(45deg) !important; /* arrow down */
}

/* 5) Ensure pointer-cursor on the icon */
.reveal_icon,
.reveal_icon * {
  cursor: pointer !important;
}


.how_it_works_sticky.elementor-sticky--effects {
	background-color: white;
}


.rotate_icon svg {
  display: inline-block;
  transform-origin: center center;
  transition: transform 0.3s ease;
  /* your base 45° transform remains where you set it */
}

.rotate_icon.active svg {
  transform: rotate(-90deg) !important;
}




/* Sticky Header*/

.elementor-sticky--effects .e-con-inner {
    padding-top: 10px !important;
	transition: all 0.2s linear !important;
}