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

#preloader {
  animation: preloaderFade 0.75s ease forwards;
  animation-delay: 0.6s;
}

@keyframes preloaderFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#hero-section {
  opacity: 0;
  animation: heroFade 0.75s ease forwards;
  animation-delay: 0.65s;
}

@keyframes heroFade {
  to {
    opacity: 1;
  }
}

#home-logo {
  opacity: 0;
  transform: scale(0.8);
  animation: logoIn 0.6s ease forwards;
  animation-delay: 0.8s;
}

@keyframes logoIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.elementor-editor-active #preloader {
	display: none !important;
}

.elementor-editor-active #hero-section {
	opacity: 1;
}

.elementor-editor-active #home-logo {
	opacity: 1;
	transform: scale(1);
}

body:not(.elementor-editor-active) .load-img {
  position: relative;
  overflow: hidden;
}

body:not(.elementor-editor-active) .load-img img {
  width: 100%;
  height: auto;
  display: block;
  transform: scaleX(1) scaleY(1);
}

body:not(.elementor-editor-active) .load-img-left img {
  clip-path: inset(0 100% 0 0); 
  opacity: 0;
  transform-origin: left center; 
  transition:
    clip-path 2s ease-out,
    opacity 2s ease-out,
    transform 2s ease-out;  
}

body:not(.elementor-editor-active) .load-img-left.is-visible img {
  clip-path: inset(0 10% 0 0); 
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

body:not(.elementor-editor-active) .load-img-left.is-visible:hover img {
  clip-path: inset(0 0 0 0);
  transform: scaleX(1.05) scaleY(1.08); 
  transition:
    clip-path 1s ease-out,         
    transform 1.5s ease-out 0.3s,
    opacity 1s ease-out;
}

body:not(.elementor-editor-active) .load-img-right img {
  clip-path: inset(0 0 0 100%); 
  opacity: 0;
  transform-origin: right center;
  transition:
    clip-path 2s ease-out,
    opacity 2s ease-out,
    transform 2s ease-out;  
}

body:not(.elementor-editor-active) .load-img-right.is-visible img {
  clip-path: inset(0 0 0 10%); 
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

body:not(.elementor-editor-active) .load-img-right.is-visible:hover img {
  clip-path: inset(0 0 0 0);
  transform: scaleX(1.05) scaleY(1.08); 
  transition:
    clip-path 1s ease-out,         
    transform 1.5s ease-out 0.3s,
    opacity 1s ease-out;
}

@media (max-width: 768px) {
  body:not(.elementor-editor-active) .load-img-left img {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition:
      clip-path 1.5s ease-out,
      opacity 1.2s ease-out;
  }

  body:not(.elementor-editor-active) .load-img-left.is-visible img {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
  }

  body:not(.elementor-editor-active) .load-img-left.is-visible:hover img {
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  body:not(.elementor-editor-active) .load-img-right img {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
    transition:
      clip-path 1.5s ease-out,
      opacity 1.2s ease-out;
  }

  body:not(.elementor-editor-active) .load-img-right.is-visible img {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
  }

  body:not(.elementor-editor-active) .load-img-right.is-visible:hover img {
    clip-path: inset(0 0 0 0);
    transform: none;
  }

}


.hover-img {
  transition: transform 1s ease-out;  
}

.hover-img:hover {
  transform: scale(1.1); 
}

.active-link span {
	color: #fff !important;	
}