section {
    position: relative;
    overflow: hidden;
}

.floating-elements {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.floating-item {
    position: absolute;
    animation: float 5s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}


.reel {
    width: clamp(100px, 30vw, 180px);
    top: 5%;
    left: 5%;
    transform: rotate(-20deg);
}

.camera {
    width: clamp(80px, 10vw, 150px);
    top: 20%;
    right: 5%;
    transform: rotate(15deg);
}

.mic {
    width: clamp(40px, 6vw, 90px);
    bottom: 10%;
    left: 45%;
    transform: rotate(-25deg);
}

.storyboard {
    width: clamp(80px, 15vw, 200px);
    top: 10%;
    left: 8%;
    transform: rotate(18deg);
}

.chair {
    width: 200px;
    top: 130px;
    left: 10%;
}

.speak {
    width: 200px;
    bottom: 10px;
    left: 75%;
}

.light {
    width: 200px;
    bottom: 10px;
    left: 75%;
    transform: rotate(30deg);
}

.storyboard1 {
    width: clamp(80px, 15vw, 200px);
    top: 130px;
    left: 10%;
    transform: rotate(-18deg);
}

.element {
    width: clamp(80px, 15vw, 200px);
    top: 130px;
    left: 10%;
    transform: rotate(-18deg);
}

.storyboard-service {
    width: clamp(80px, 15vw, 200px);
    top: 450px;
    left: 10%;
    transform: rotate(-18deg);
}

.camera-service {
    width: clamp(80px, 13vw, 200px);
    top: 60rem;
    left: 60%;
    transform: rotate(-18deg);
}

.speak-service {
    width: clamp(80px, 15vw, 200px);
    top: 95rem;
    left: 10%;
    transform: rotate(-18deg);
}

.brand-service {
    width: clamp(80px, 13vw, 200px);
    top: 130rem;
    left: 60%;
    transform: rotate(-18deg);
}

.marketing-service {
    width: clamp(80px, 12vw, 200px);
    top: 165rem;
    left: 10%;
    transform: rotate(-18deg);
}

.costume-service {
    width: clamp(80px, 15vw, 200px);
    top: 200rem;
    left: 60%;
    transform: rotate(-10deg);
}

.reel1 {
    width: clamp(80px, 15vw, 200px);
    top: 130px;
    left: 10%;
    transform: rotate(-18deg);
}

/* .clapper{
    width:80px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-10deg);
} */


@keyframes float {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }

}

@media (max-width:980px) {
    .storyboard-service {
        width: clamp(80px, 15vw, 200px);
        top: 120px;
        left: 20%;
        transform: rotate(-18deg);
    }

    .camera-service {
        width: clamp(80px, 13vw, 200px);
        top: 57rem;
        left: 30%;
        transform: rotate(-18deg);
    }

    .speak-service {
        width: clamp(80px, 15vw, 200px);
        top: 104rem;
        left: 30%;
        transform: rotate(-18deg);
    }

    .brand-service {
        width: clamp(80px, 13vw, 200px);
        top: 153rem;
        left: 30%;
        transform: rotate(-18deg);
    }

    .marketing-service {
    width: clamp(80px, 12vw, 200px);
    top: 202rem;
    left: 60%;
    transform: rotate(-18deg);
}

.costume-service {
    width: clamp(80px, 15vw, 200px);
    top: 250rem;
    left: 60%;
    transform: rotate(-10deg);
}
}

@media (max-width:768px) {

    .reel {
        width: 110px;
        top: 30px;
        left: 15px;
    }

    .camera {
        width: 80px;
        top: 270px;
        right: 20px;
    }

    .storyboard {
        width: 160px;
        top: 150px;
        left: 320px;
    }

    .mic {
        width: 80px;
        bottom: 30px;
        left: 75%;
    }

    .chair {
        width: 100px;
        top: 130px;
        left: 10%;
    }

    .speak {
        width: 100px;
        bottom: 10px;
        left: 75%;
    }

    .light {
        width: 100px;
        bottom: 10px;
        left: 75%;
    }

    .storyboard1 {
        width: 100px;
        top: 130px;
        left: 10%;
    }

    .element {
        width: 100px;
        top: 130px;
        left: 10%;
    }

    .storyboard-service {
        width: clamp(80px, 15vw, 200px);
        top: 130px;
        left: 50%;
        transform: rotate(-18deg);
    }

    .camera-service {
        width: clamp(80px, 13vw, 200px);
        top: 18%;
        left: 60%;
        transform: rotate(-18deg);
    }

    .speak-service {
        width: clamp(80px, 15vw, 200px);
        top: 34%;
        left: 55%;
        transform: rotate(-18deg);
    }

    .brand-service {
        width: clamp(80px, 13vw, 200px);
        top: 50%;
        left: 55%;
        transform: rotate(-18deg);
    }

    .marketing-service {
    width: clamp(80px, 12vw, 200px);
    top: 66%;
    left: 60%;
    transform: rotate(-18deg);
}

.costume-service {
    width: clamp(80px, 15vw, 200px);
    top: 83%;
    left: 60%;
    transform: rotate(-10deg);
}

.reel1 {
        width: 100px;
        top: 130px;
        left: 10%;
    }

}


@media (max-width:380px) {

    .reel {
        width: 110px;
        top: 20px;
        left: 15px;
    }

    .camera {
        width: 90px;
        top: 320px;
        right: 20px;
    }

    .storyboard {
        width: 160px;
        top: 60px;
        left: 220px;
    }

    .mic {
        width: 80px;
        bottom: 30px;
        left: 75%;
    }

    .chair {
        width: 100px;
        top: 130px;
        left: 8%;
    }

    .speak {
        width: 100px;
        bottom: 10px;
        left: 75%;
    }

    .light {
        width: 100px;
        bottom: 10px;
        left: 70%;
    }

    .storyboard1 {
        width: 100px;
        top: 130px;
        left: 6%;
    }

    .element {
        width: 90px;
        top: 150px;
        left: 6%;
    }

    .storyboard-service {
        width: clamp(80px, 15vw, 200px);
        top: 125px;
        left: 60%;
        transform: rotate(-18deg);
    }

    .camera-service {
        width: clamp(80px, 13vw, 200px);
        top: 17%;
        left: 65%;
        transform: rotate(-18deg);
    }

    .speak-service {
        width: clamp(80px, 15vw, 200px);
        top: 33%;
        left: 55%;
        transform: rotate(-18deg);
    }


    .brand-service {
        width: clamp(80px, 13vw, 200px);
        top: 49%;
        left: 55%;
        transform: rotate(-18deg);
    }

    .marketing-service {
    width: clamp(80px, 12vw, 200px);
    top: 66%;
    left: 60%;
    transform: rotate(-18deg);
}

.costume-service {
    width: clamp(100px, 16vw, 200px);
    top: 82%;
    left: 60%;
    transform: rotate(-10deg);
}

.reel1 {
        width: 90px;
        top: 150px;
        left: 6%;
    }
}