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

/* ==========================
   Animation Variables
========================== */

:root {
    --hero-duration: 1.8s;
    --hero-easing: cubic-bezier(.22, 1, .36, 1);
    --float-duration: 6s;
}

/* ==========================
   Hero Image
========================== */

.hero-image-container {
    position: relative;
}

/*
 * Animations are triggered by a `.is-visible` class that the
 * IntersectionObserver script adds when the element scrolls into view.
 *
 * IMPORTANT: the "hidden" starting state is only applied when JS is
 * available (html.js-anim). If JS ever fails, content stays fully
 * visible instead of being stuck invisible.
 */

.hero-image-wrapper.is-visible {
    animation: slideInFromTop var(--hero-duration) var(--hero-easing) forwards;
}

.hero-image-inner {
    overflow: hidden;
    height: 100%;
    border-radius: 10px;
}
.logo-flex

.hero-image-inner.is-visible {
    animation: slideInFromBottom var(--hero-duration) var(--hero-easing) forwards;
}

.hero-image-inner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    object-fit: cover;
}

.hero-image-inner.is-visible img {
    animation: imageReveal var(--hero-duration) var(--hero-easing) forwards;
}

/* ==========================
   Floating Elements
========================== */

/* Hidden start state — only when JS will animate them */
.js-anim .hero-float-wrapper,
.js-anim .hero-float-opposite-wrapper {
    opacity: 0;
    filter: blur(15px);
}

.hero-float-wrapper.is-visible {
    animation:
        blurFadeIn var(--hero-duration) ease forwards,
        floatUpDown var(--float-duration) ease-in-out var(--hero-duration) infinite;
}

.hero-float-opposite-wrapper.is-visible {
    animation:
        blurFadeIn var(--hero-duration) ease forwards,
        floatDownUp var(--float-duration) ease-in-out var(--hero-duration) infinite;
}

/* ==========================
   Blur Reveal Utility
========================== */

.js-anim .blur-reveal {
    opacity: 0;
    filter: blur(15px);
    will-change: opacity, filter;
}

/* Hidden start state for the slide-in-from-right elements, so they
   don't flash in fully-rendered before the animation starts. */
.js-anim .user-profile-lists li.elementor-icon-list-item,
.js-anim .sliderLeft-animation {
    opacity: 0;
    /*transform: translateX(150%);*/
    filter: blur(10px);
    will-change: transform, opacity, filter;
}

.blur-reveal.is-visible {
    animation: blurFadeIn var(--hero-duration) ease forwards;
}

/* ==========================
   User Profile Animation
========================== */

.user-profile-lists li.elementor-icon-list-item.is-visible,
.sliderLeft-animation.is-visible {
    animation: slideInFromRight var(--hero-duration) var(--hero-easing) forwards;
}

.user-profile-lists ul li.elementor-icon-list-item:nth-child(2) {
    animation-delay: 150ms;
}

.user-profile-lists ul li.elementor-icon-list-item:nth-child(3) {
    animation-delay: 300ms;
}

/* ==========================
   Accessibility: respect reduced motion
========================== */

@media (prefers-reduced-motion: reduce) {

    .js-anim .hero-float-wrapper,
    .js-anim .hero-float-opposite-wrapper,
    .js-anim .blur-reveal,
    .js-anim .user-profile-lists li.elementor-icon-list-item,
    .js-anim .sliderLeft-animation {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .is-visible {
        animation: none !important;
    }

}

/* ==========================
   Helper Classes
========================== */

.flex-icon-wrapper .elementor-icon-wrapper {
    display: flex;
}

.overflow-hidden {
    overflow: hidden;
}

.user-profile-lists.elementor-icon-list-items {
    flex-wrap: nowrap !important;
    overflow: hidden;
}

.user-profile-lists li.elementor-icon-list-item,
.user-profile-lists li.elementor-icon-list-item svg {
    margin: 0 !important;
}

.user-profile-lists li.elementor-icon-list-item .elementor-icon-list-text {
    display: none;
}

.user-profile-lists ul li.elementor-icon-list-item:not(:first-child) {
    margin-left: -12px !important;
}

.hero-content-wrapper {
    max-width: 31.375rem;
}
.hero-btn-col a {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ==========================
   Keyframes
========================== */

@keyframes slideInFromTop {

    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }

}

@keyframes slideInFromBottom {

    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }

}

@keyframes imageReveal {

    from {
        transform: scale(1.5);
        filter: blur(8px);
    }

    to {
        transform: scale(1);
        filter: blur(0);
    }

}

@keyframes blurFadeIn {

    from {
        opacity: 0;
        filter: blur(15px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }

}

@keyframes slideInFromRight {

    from {
        opacity: 0;
        transform: translateX(150%);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }

}

@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}

@keyframes floatDownUp {

    0%,
    100% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0);
    }

}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ==========================
   Other Elements Style
========================== */

body {
    padding: 0.75rem;
}
header .hfe-site-logo-container {
    display: flex;
}
header nav.hfe-dropdown ul {
    padding: 18px;
}
header nav.hfe-dropdown {
    overflow: hidden;
}
.hero-content-wrappert {
    max-width: 31.375rem;
}
.text-p-last-mb-0 > p:last-child {
    margin-bottom: 0 !important;
}
.secondary-btn a {
    word-wrap: break-word !important;
    word-break: break-word !important;
}
.secondary-btn svg {
    fill: #CDA552;
}
.reveal-track{ 
    position:relative; overflow:visible 
}
.reveal-pin{
    min-height:100vh;
    display:flex; flex-direction:column; 
    justify-content:center;
    will-change:transform;
}
.reveal-heading .word{ 
    display:inline-block; 
    white-space:nowrap 
}
.reveal-heading .char{ 
    color:#cfcfcf 
}   /* default dim; overridden by data-dim */
.heading-box {
    color: var(--e-global-color-secondary);
    font-size: 16px;
    display: block;
    font-weight: 700;
    line-height: 2.5;
}
.primary-btn .elementor-button-link {
    background: linear-gradient(135deg, rgb(242, 231, 188) 0%, rgb(205, 165, 82) 52%, rgb(169, 124, 44) 100%) !important;
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
    overflow: hidden;
    text-decoration: none;
    display: inline-flex;
}
.primary-btn .elementor-button-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .62), transparent);
    transform: skewX(-22deg);
    transition: left .7s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}
.primary-btn .elementor-button-link:hover::before {
    left: 155%;
}
.hero-h1-span {
    font-size: 21px;
    line-height: 1.1; 
    display:block;
    color: #8a6a25;
    margin-top:20px;
}
.gradient-icon-box .elementor-icon {
    background: linear-gradient(135deg, rgb(242, 231, 188), rgb(205, 165, 82));
    border-radius: 14px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(169, 124, 44, 0.8) 0px 8px 20px -10px;
}
/*.engagement-grid .card-num {
    background: linear-gradient(135deg, rgb(242, 231, 188), rgb(205, 165, 82)) text;
    color: transparent;
}
.engagement-grid .card-line {
    flex: 1 1 0%;
    height: 1px;
    background: linear-gradient(90deg, rgba(205, 165, 82, 0.6), transparent);
}
.engagement-grid .elementor-heading-title {
    display: flex;
    align-items: center;
    gap: 16px;
}*/
.tabs-book .elementor-icon-list-items {
    gap: 9px !important;
}
.tabs-book .elementor-icon-list-item {
    padding: 8px 15px;
    border-radius: 40px;
    border: 1px solid rgba(245, 241, 232, 0.16);
}
.book-img-col {
    background: radial-gradient(circle at 30% 20%, rgba(205, 165, 82, 0.28), transparent 60%), rgb(33, 27, 18) !important;
}
.engagement-types .elementor-icon-list-item {
    padding: 12px 0px !important;
    border-bottom: 1px solid rgba(27, 23, 18, 0.08);
}
.signature-grid {
    position: relative;
}
#signature-col-one {
    position: sticky;
    top: 0;
    align-self: start;
}
/* ==========================
   Responsive
========================== */

@media (max-width: 767px) {

    .hero-image-wrapper .elementor-image-box-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        text-align: start;
    }
    #signature-col-one {
        position: static;
    }

}