.floating-images {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.main-wrapper {
    position: relative;
    z-index: 10;
}

.floating {
    position: absolute;
    max-width: 700px;
    max-height: 700px;
    border-radius: 18px;
    opacity: .7;
    transform: rotate(-8deg);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.i1 {
    top: 5%;
    left: 3%;
}

.i2 {
    top: 8%;
    right: 5%;
    transform: rotate(12deg);
}

.i3 {
    bottom: 8%;
    left: 12%;
}

.i4 {
    bottom: 15%;
    right: 2%;
}

.i5 {
    bottom: 14%;
    left: 42%;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(var(--rot));
    }

    50% {
        transform: translateY(-18px) rotate(var(--rot));
    }
}

.i1 {
    --rot: -8deg;
    animation: float 7s ease-in-out infinite;
}

.i2 {
    --rot: 12deg;
    animation: float 9s ease-in-out infinite;
}

.i3 {
    --rot: -4deg;
    animation: float 8s ease-in-out infinite;
}

.i4 {
    --rot: -15deg;
    animation: float 10s ease-in-out infinite;
}

.i5 {
    --rot: 7deg;
    animation: float 6s ease-in-out infinite;
}

@media (max-width: 1368px) {
    .floating {
    position: absolute;
    max-width: 420px;
    max-height: 420px;
    border-radius: 18px;
    opacity: .7;
    transform: rotate(-8deg);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.i5 {
    bottom: 44%;
    left: 12%;
}
}

@media (max-width: 800px) {
    .floating {
    position: absolute;
    max-width: 260px;
    max-height: 260px;
    border-radius: 18px;
    opacity: .7;
    transform: rotate(-8deg);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.i5 {
    bottom: 44%;
    left: 12%;
}
}