.floating-icons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.floating-icon {
    position: absolute;
    animation: float 15s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
    opacity: var(--start-opacity, 1);
    animation-duration: var(--animation-duration, 20s);
    animation-delay: var(--animation-delay, 0s);
}

@keyframes float {
    0% {
        transform: translate(0,0) rotate(0deg) scale(var(--scale,1));
    }

    25% {
        transform: translate(15px,15px) rotate(5deg) scale(var(--scale,1));
    }

    50% {
        transform: translate(-10px,20px) rotate(-3deg) scale(var(--scale,1));
    }

    75% {
        transform: translate(10px,-15px) rotate(2deg) scale(var(--scale,1));
    }

    100% {
        transform: translate(-15px,-20px) rotate(-5deg) scale(var(--scale,1));
    }
}

@media (max-width: 768px) {
    .floating-icon {
        transform: scale(0.8);
    }
}

@media (max-width: 480px) {
    .floating-icon {
        transform: scale(0.6);
    }
}

/* Define more subtle animation paths for very slow movement */
/* Animation 1: Vertical movement with minimal horizontal shift */
@keyframes float-1 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }

    25% {
        transform: translate3d(2px, -8px, 0) rotate(calc(var(--rotate, 0deg) - 0.5deg));
    }

    50% {
        transform: translate3d(3px, 0px, 0) rotate(var(--rotate, 0deg));
    }

    75% {
        transform: translate3d(0px, 8px, 0) rotate(calc(var(--rotate, 0deg) + 0.5deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }
}

/* Animation 2: Diagonal movement with emphasis on vertical */
@keyframes float-2 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }

    25% {
        transform: translate3d(-3px, -10px, 0) rotate(calc(var(--rotate, 0deg) + 0.7deg));
    }

    50% {
        transform: translate3d(0px, 2px, 0) rotate(var(--rotate, 0deg));
    }

    75% {
        transform: translate3d(-2px, 7px, 0) rotate(calc(var(--rotate, 0deg) - 0.4deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }
}

/* Animation 3: Horizontal and vertical movement combined */
@keyframes float-3 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }

    25% {
        transform: translate3d(5px, -6px, 0) rotate(calc(var(--rotate, 0deg) - 0.3deg));
    }

    50% {
        transform: translate3d(-4px, 9px, 0) rotate(var(--rotate, 0deg));
    }

    75% {
        transform: translate3d(3px, -7px, 0) rotate(calc(var(--rotate, 0deg) + 0.6deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }
}

/* Animation 4: Up-down wave pattern */
@keyframes float-4 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }

    20% {
        transform: translate3d(-2px, -9px, 0) rotate(calc(var(--rotate, 0deg) - 0.2deg));
    }

    40% {
        transform: translate3d(1px, 2px, 0) rotate(calc(var(--rotate, 0deg) + 0.1deg));
    }

    60% {
        transform: translate3d(0px, -5px, 0) rotate(var(--rotate, 0deg));
    }

    80% {
        transform: translate3d(3px, 7px, 0) rotate(calc(var(--rotate, 0deg) + 0.3deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }
}

/* Animation 5: Vertical bobbing motion */
@keyframes float-5 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }

    20% {
        transform: translate3d(1px, 8px, 0) rotate(calc(var(--rotate, 0deg) + 0.4deg));
    }

    40% {
        transform: translate3d(-2px, -6px, 0) rotate(calc(var(--rotate, 0deg) - 0.2deg));
    }

    60% {
        transform: translate3d(2px, -10px, 0) rotate(calc(var(--rotate, 0deg) - 0.6deg));
    }

    80% {
        transform: translate3d(-1px, 4px, 0) rotate(calc(var(--rotate, 0deg) + 0.2deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--rotate, 0deg));
    }
}

.section-card {
    z-index: 3;
    position: relative;
}

.features-container {
    position: relative;
    min-height: 570px;
    margin-top: 1rem;
}

/*Backdrop replacements START*/
.rotated-backdrop {
    top: -5%;
    left: -5%;
    width: 110%;
    height: 130%;
}

@media (max-width: 1400px) {
    .rotated-backdrop {
        top: -5%;
        height: 125%;
        transform: rotate(-2deg);
    }
}

@media (max-width: 1200px) {
    .rotated-backdrop {
        top: -10%;
        height: 125%;
        transform: rotate(-2deg);
    }
}

@media (max-width: 992px) {
    .rotated-backdrop {
        top: -10%;
        height: 130%;
        transform: rotate(-2deg);
    }
}

@media (max-width: 768px) {
    .rotated-backdrop {
        top: -10%;
        height: 120%;
        transform: rotate(-2deg);
    }
}

@media (max-width: 480px) {
    .rotated-backdrop {
        top: -10%;
        height: 120%;
        transform: rotate(-2deg);
    }
}

@media (min-width: 768px) {
    .backdrop-header::after {
        width: 110%; /* or use scaleX(1.05) in transform */
        left: -5%;
    }
}

.backdrop-header-container {
    margin-top: 9rem;
    padding-left: 20%;
}

@media (max-width: 768px) {
    .features-container {
        min-height: unset;
    }

    .backdrop-header-container {
        margin-top: 0rem;
        padding-left: 0;
        justify-content: center;
    }

    .backdrop-header {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .backdrop-header-container {
        margin-top: 0rem;
    }
}
/*Backdrop replacements END*/

.why-picfony wa-card {
    border: none;
    background-color: transparent!important;
    box-shadow: 0 0 0px rgba(0,0,0,0.0);
    border-radius: 1rem;
    transition: transform 0.3s ease;
}

    .why-picfony wa-card:hover {
        transform: translateY(-5px);
    }

.why-picfony wa-card::part(body) {
    padding:0px;
}

/* === Try-It-Out Phone Mock-up ====================================== */
.tryitout-phone-frame {
    position: relative;
    width: 240px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    cursor: pointer;
    height: 440px;
}

    .tryitout-phone-frame img {
        width: 100%;
        display: block;
    }

.tryitout-phone-screen {
    position: absolute;
    top: 13px;
    left: 11px;
    width: 90%;
    height: 94%;
    overflow: hidden;
    border-radius: 12px;
}

    .tryitout-phone-screen iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 300%;
        height: 300%;
        transform: scale(0.3333);
        transform-origin: 0 0;
        border: none;
        background: #fff;
        pointer-events: none;
        max-width: 300%;
    }

    .tryitout-phone-screen video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        z-index: 1;
        pointer-events: none;
        background: #fff;
    }

.tryitout-phone-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
}