/* 
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 */
.elementor-element.img-zoom.elementor-widget.elementor-widget-image:hover { transform: scale(1.15);   border-radius:20px;   transition: transform 0.5s ease; }

.elementor-social-icon:hover{
    background-color: #FFAF00 !important;
    border-color:#fff;
}
.elementor-social-icon:hover svg{
    fill: #fff !important;
}

.elementor-social-icon:hover i{
    color: #fff !important;
}
/* 1. Hero Masking (Forced for Live) */
.hero-style2 {
    position: relative !important;
    overflow: hidden !important;

    /* Masking Logic */
    -webkit-mask-image: url("https://thetopichive.com/clients/one-goal-real-estate-investments-wp/wp-content/uploads/2026/05/hero-2-bg-mask.png") !important;
    mask-image: url("https://onegoalrei.com/wp-content/uploads/2026/05/hero-2-bg-mask.png") !important;

    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;

    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;

    -webkit-mask-position: bottom !important;
    mask-position: bottom !important;
}

/* 2. Side to Side Animation */
.imgsidetoside, 
.imgsidetoside img {
    display: inline-block !important;
    animation: deepRightReturn 15s ease-in-out infinite !important;
}

/* 3. Missing Keyframes (Iske bagair animation nahi chalegi) */
@keyframes deepRightReturn {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(30px); /* Jitna right lejana hai yahan change karein */
    }
    100% {
        transform: translateX(0);
    }
}
/* Image  'imgupdown'*/
.imgupdown img, 
.imgupdown {
    animation: slowUpDown 12s ease-in-out infinite;
}

@keyframes slowUpDown {
    0% {
        transform: translateY(0);  
    }
    50% {
        transform: translateY(-60px); 
    }
    100% {
        transform: translateY(0); 
}
	/* Container Base */
.workhover {
    position: relative;
    overflow: hidden !important;
    cursor: pointer;
}

.workhover::before {
    content: '';
    position: absolute;
    top: 100%; 
    left: -10%; 
    width: 250%; 
    height: 250%; 
    background: rgba(0, 0, 0, 0.55); 
    border-radius: 50%; /* Perfect Circle/Curve */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    pointer-events: none;
    transform: translate(0, 0);
}


.workhover:hover::before {
    top: 25%; 
    left: -50%; 
}

/* Content (Heading, Text, Button) */
.workhover .elementor-widget:not(.the-plus-icon) {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
    position: relative;
}

/* Hover: Content show hoga */
.workhover:hover .elementor-widget:not(.the-plus-icon) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s; 
}

/* Plus Icon Settings */
.workhover .the-plus-icon {
    position: absolute;
    bottom: 25px;
    left: 25px; 
    z-index: 3;
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s ease;
}

/* Hover: Plus Icon gayab */
.workhover:hover .the-plus-icon {
    opacity: 0;
    transform: scale(0);
}

.workhover:hover .elementor-widget:nth-child(1) { transition-delay: 0.15s; }
.workhover:hover .elementor-widget:nth-child(2) { transition-delay: 0.2s; }
.workhover:hover .elementor-widget:nth-child(3) { transition-delay: 0.25s; }

	
/* Container ko forced block aur visibility dena */
.slideimg .elementor-widget-container {
    display: flex !important;
    overflow: visible !important; /* Pehle check karne ke liye visible rakhein */
    width: 100% !important;
    min-height: 80px !important; /* Height lazmi den warna container 0px ho sakta hai */
    background: transparent !important;
}

/* Image ko force show karna */
.slideimg img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: 60px !important; /* Height match karein */
    flex-shrink: 0 !important;
    animation: marquee-train 20s linear infinite !important;
}

@keyframes marquee-train {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}