.hero-section {
    padding-top: 0;
    position: relative;
}

.office-scene {
    position: relative;
    width: min(560px, 100%);
    margin: 0 auto;
    aspect-ratio: 14 / 11;
    border-radius: 18px;
    overflow: hidden;
    /*background: #d8d8d8;*/
    /*box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);*/
    /*max-height: calc(100vh - 206px); !* به‌جای height *!*/
    height: auto;
    z-index: 1;
}

.food-overlay {
    position: absolute;
    inset: 0;
    width: min(560px, 100%);
    margin: 0 auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 2;
}

.food-overlay.is-visible {
    opacity: 1;
}

.food-overlay-item {
    position: absolute;
    max-width: none;
}

.food-overlay-item--10 {
    width: 26%;
    top: 47%;
    left: 42%;
}

.food-overlay-item--11 {
    width: 20%;
    top: 45%;
    left: 16%;
}

.food-overlay-item--12 {
    width: 26%;
    top: 65%;
    left: -13%;
}

.food-overlay-item--13 {
    width: 20%;
    top: 76%;
    left: 21%;
}

.food-overlay-item--14 {
    width: 26%;
    top: 78%;
    left: 46%;
}

.food-overlay-item--15 {
    width: 20%;
    top: 50%;
    left: 72%;
}

.food-overlay-item--16 {
    width: 26%;
    top: 40%;
    left: 95%;
}

.food-overlay-item--17 {
    width: 20%;
    top: 72%;
    left: 99%;
}

.food-overlay-item--18 {
    width: 32%;
    top: 77%;
    left: 69%;
}

.office-item {
    position: absolute;
    max-width: none;
    will-change: transform, opacity;
    transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease;
    transform-origin: center;
}

.office-item--monitor {
    width: 100%;
    top: 0%;
    left: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.96);
}

.office-item--plant {
    width: 22%;
    top: 33%;
    left: 8%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.office-item--keyboard {
    width: 34%;
    top: 27%;
    left: 30%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.office-item--notebook {
    width: 32%;
    top: 57%;
    left: 32%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.office-item--mouse {
    width: 13%;
    top: 45%;
    left: 68%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.office-item--pen {
    width: 12%;
    top: 60%;
    left: 15%;
    transform: translate3d(0, 0, 0) rotate(-22deg) scale(1);
}

.office-item--phone {
    width: 11%;
    top: 56%;
    left: 79%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}

.office-item--cup {
    width: 18%;
    top: 27%;
    left: 70%;
    transform: translate3d(8%, 9%, 0) scale(0.7);
}

.office-scene.is-active .office-item--monitor {
    transform: translate3d(0, -1.2%, 0) scale(1);
}

.office-scene.is-active .office-item--plant {
    transform: translate3d(1%, 19%, 0) rotate(-3deg) scale(1.02);
}

.office-scene.is-active .office-item--keyboard {
    transform: translate3d(4%, 9%, 0) rotate(-14deg) scale(1.03);
}

.office-scene.is-active .office-item--notebook {
    transform: translate3d(7%, 14%, 0) rotate(17deg) scale(1.05);
}

.office-scene.is-active .office-item--mouse {
    transform: translate3d(-6%, 13%, 0) rotate(9deg) scale(1.03);
}

.office-scene.is-active .office-item--pen {
    transform: translate3d(8%, 14%, 0) rotate(0deg) scale(1.03);
}

.office-scene.is-active .office-item--phone {
    transform: translate3d(-10%, 28%, 0) rotate(-10deg) scale(1.04);
}

.office-scene.is-active .office-item--cup {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 768px) {
    .office-scene {
        border-radius: 12px;
        aspect-ratio: 4 / 4.5;
    }

    .office-item--monitor {
        width: 95%;
        position: relative;
        display: block;
        margin: auto;
    }

    .food-overlay-item--10 {
        width: 28%;
        top: 37%;
        left: 35%;
    }

    .food-overlay-item--11 {
        width: 20%;
        top: 29%;
        left: 11%;
    }

    .food-overlay-item--12 {
        width: 20%;
        top: 30%;
        left: 67%;
    }

    .food-overlay-item--13 {
        width: 22%;
        top: 54%;
        left: 20%;
    }

    .food-overlay-item--14 {
        width: 27%;
        top: 47%;
        left: 59%;
    }

    .food-overlay-item--15 {
        width: 35%;
        top: 65%;
        left: 34%;
    }

    .food-overlay-item--16 {
        width: 11%;
        top: 47%;
        left: 10%;
    }

    .food-overlay-item--17 {
        width: 26%;
        top: 75%;
        left: 7%;
    }

    .food-overlay-item--18 {
        width: 18%;
        top: 71%;
        left: 66%;
    }

    .office-item--plant {
        width: 22%;
        top: 17%;
        left: 4%;
    }

    .office-item--keyboard {
        width: 40%;
        top: 17%;
        left: 27%;
    }

    .office-item--notebook {
        width: 50%;
        top: 39%;
        left: 16%;
    }

    .office-item--mouse {
        width: 13%;
        top: 28%;
        left: 79%;
    }

    .office-item--pen {
        width: 16%;
        top: 41%;
        left: 4%;
    }

    .office-item--phone {
        width: 13%;
        top: 36%;
        left: 75%;
    }

    .office-item--cup {
        width: 19%;
        top: 17%;
        left: 80%;
    }

    .office-scene.is-active .office-item--keyboard {
        transform: translate3d(3%, 8%, 0) rotate(-14deg) scale(1.02);
    }

    .office-scene.is-active .office-item--notebook {
        transform: translate3d(4%, 12%, 0) rotate(17deg) scale(1.03);
    }

    .office-scene.is-active .office-item--mouse {
        transform: translate3d(-5%, 10%, 0) rotate(9deg) scale(1.02);
    }

    .office-scene.is-active .office-item--pen {
        transform: translate3d(6%, 10%, 0) rotate(-5deg) scale(1.02);
    }

    .office-scene.is-active .office-item--phone {
        transform: translate3d(-8%, 22%, 0) rotate(-10deg) scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .office-item {
        transition: none;
    }

    .office-scene .office-item {
        transform: none;
        opacity: 1;
    }
}