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

/* Hover Labels For Accessibility  */
selector .elementor-form .elementor-field-label {
    position: absolute;
    right: 60px;
    transition-duration: .2s;
}

selector .elementor-field-label.active-label{
    transform: translateY(-30px);
    color: var(--e-global-color-secondary) !important;
    background: var(--e-global-color-primary);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 16px !important;
}


/* Elegant Fade In-Out - Hide all elements until they Visible in the Viewport */
.elementor-widget:not(.disable-fade-in) {
    opacity: 0;
    transition-property: opacity,transform;
    transform: translate3d(0,34px,0);
    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
    transition-duration: .5s;
}
/* Elegant Fade In-Out - Show */
.elementor-widget.show,
.e-preview--show-hidden-elements .elementor-widget,
.elementor-editor-active .elementor-widget,
.elementor-location-floating_buttons .elementor-widget,
.e-con.disable-fade-in .elementor-widget {
    opacity: 1;
    transform: none;
}

/* Float Up Hover Animation for CTA*/
.ycta .elementor-cta__title,
.ycta .elementor-cta__button-wrapper {
  transition: transform 0.7s cubic-bezier(.7,0,.3,1);
}

.ycta .elementor-cta__content {
  transition: background 1s cubic-bezier(.7,0,.3,1);
}

/* הובר */
.ycta:hover .elementor-cta__title,
.ycta:hover .elementor-cta__button-wrapper {
  transform: translateY(-14px);
}

/* Stretching an image to the edge of the screen */
body {
    --page-content-width: 1140px; /* Adjust to the content area's width on your page */
    --content-padding: 45px; /* Adjust to the inline paddings (Horizontal paddings) you've set for the containers on your page. */
    --viewport-width: 90vw;
    --custom-padding: max(calc((var(--viewport-width) - var(--page-content-width)) / 2), var(--content-padding));
}

@media (min-width: 1025px) {
    .align-to-content {
        padding-inline-start: var(--custom-padding)!important;
    }
}