/* 
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 */
span.hero-accent-text{
    font-style: italic;
    color: #daa520;
}

.hero-right{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}

.hero-right::before,
.hero-right::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-right::before{
    width: clamp(220px, 80vw, 380px);
    height: clamp(220px, 80vw, 380px);
    border: 1px solid rgba(255,255,255,.15);
    animation: ring1 18s ease-in-out infinite alternate;
}

.hero-right::after{
    width: clamp(260px, 95vw, 470px);
    height: clamp(260px, 95vw, 470px);
    border: 1px solid rgba(255,255,255,.08);
    animation: ring2 24s ease-in-out infinite alternate;
}

.hero-right::before{
    transform: translate(-50%, -50%) rotate(25deg);
}

.hero-right::after{
    transform: translate(-50%, -50%) rotate(-20deg);
}

.hero-image{
    animation: heroFloat 10s cubic-bezier(.45,.05,.55,.95) infinite;
    transform-origin: center center;
    will-change: transform;
}

@keyframes heroFloat{
    0%{
        transform: translateY(0px) rotate(-2deg) scale(1);
    }

    25%{
        transform: translateY(-6px) rotate(-1deg) scale(1.01);
    }

    50%{
        transform: translateY(-12px) rotate(2deg) scale(1.03);
    }

    75%{
        transform: translateY(-5px) rotate(1deg) scale(1.015);
    }

    100%{
        transform: translateY(0px) rotate(-2deg) scale(1);
    }
}

@keyframes ring1{
    0%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-48%) scale(1.04);
    }

    100%{
        transform:translate(-50%,-50%) scale(1);
    }
}

@keyframes ring2{
    from{
        transform: translate(-50%, -50%) rotate(-20deg);
    }
    to{
        transform: translate(-50%, -50%) rotate(-35deg);
    }
}

.card-product{
    position: relative;
    overflow: hidden;
    border-radius: 30px; /* Sesuaikan */
    z-index: 1;
}

.card-product::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: #DAA520; /* Ganti warna */
    z-index: -1;
}