/** Shopify CDN: Minification failed

Line 10:0 Unexpected "<"
Line 116:0 Unexpected "<"

**/


/* CSS from section stylesheet tags */
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .floating-images-section {
        width: 100%;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #DEDED2;
    }

    .image-container {
        position: relative;
        width: 100%;
        height: 50vh;
        min-height: 300px;
        max-height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .floating-img {
        position: absolute;
        border-radius: 15px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        transition: all 0.4s ease;
        object-fit: cover;
        border: 5px solid white;
        width: 60%;
        max-width: 400px;
        height: 70%;
        max-height: 350px;
    }

    .img-back {
        z-index: 1;
        transform: rotate(-5deg) translateX(-25%);
        animation: float-back 7s ease-in-out infinite;
    }

    .img-front {
        z-index: 2;
        transform: rotate(5deg) translateX(25%);
        animation: float-front 6s ease-in-out infinite;
    }

    .img-back:hover, .img-front:hover {
        transform: scale(1.05) rotate(0deg);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        z-index: 3;
    }

    @keyframes float-back {
        0% { transform: rotate(-5deg) translateX(-25%) translateY(0); }
        50% { transform: rotate(-6deg) translateX(-25%) translateY(-15px); }
        100% { transform: rotate(-5deg) translateX(-25%) translateY(0); }
    }

    @keyframes float-front {
        0% { transform: rotate(5deg) translateX(25%) translateY(0); }
        50% { transform: rotate(6deg) translateX(25%) translateY(-20px); }
        100% { transform: rotate(5deg) translateX(25%) translateY(0); }
    }

    /* Tablet and mobile: vertical overlap */
    @media (max-width: 1024px) {
        .image-container {
            margin-top: 40px;
            height: auto;
            min-height: 300px;
            flex-direction: column;
        }

        .floating-img {
            position: relative;
            width: 70%;
            height: auto;
            max-height: 300px;
            margin: -60px 0 0 0;
            transform: rotate(0deg) translateX(0) translateY(0) !important;
            animation: none !important;
        }

        .img-back { z-index: 1; margin-top: 0; }
        .img-front { z-index: 2; }
    }

    @media (max-width: 768px) {
        .floating-img { width: 75%; max-height: 250px; margin: -50px 0 0 0; }
    }

    @media (max-width: 480px) {
        .floating-img { width: 85%; max-height: 200px; margin: -40px 0 0 0; }
    }

    /* Large screens */
    @media (min-width: 1200px) {
        .image-container { max-height: 600px; }
        .floating-img { max-width: 450px; max-height: 400px; }
    }
</style>