.box3 {
    background-color: rgb(231, 225, 225);
    /* background-image:
    linear-gradient(
        to top right, #93b868, #885109
    ); */
    /*position: relative;*/
    width: 400px; /* حجم مناسب للصورة */
    height: 450px;
    position: absolute;
    top: 1500px;;
    right: 70px;
    z-index: 1;
    border-radius: 20px;
    box-shadow: inset 10px 10px 20px #a1a1a1,
    inset -10px -10px 20px #ffffff;

}
.note3{
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size: 18px;
    top: 1690px;;
    right:   190px;
    font-weight: bold;
    color: #333;
    position: absolute;
    z-index: 3;
}

.banner3 .product3 {
    width: 330px;
    height: 440px;
    position: absolute;
    top: 1530px;         /* نفس top تبع .box3 */
    right: 70px;         /* نفس right تبع .box3 */
    transform: translateX(-35%); /* بدون تحريك زائد */
    z-index: 2;
    transition: 0.7s ease-in-out;
    --left: -170px;
}

.banner3 .product3 .soda3 {
    background:
            url(../images/hair.png) var(--left) 52px  ,
            url(../images/shampoo.png);
    background-size: 345% auto,  auto 100%;
    background-repeat: repeat-x;
    width: 142px;
    height: 400px;
    /* aspect-ratio: 7.6 / 7.6; */
    background-blend-mode: multiply;
    mask-image: url(../images/shampoo.png);
    mask-size: auto 100%;
    transition: 0.7s;
}

.banner3 .product3.clicked {
    --left: 20px;
    transform: translateX(-70px) translateY(-50px);
}

.banner3 .product3.clicked + .note3 {
    opacity: 1;
}

.banner3 .product3.clicked + .note3 + .more-btn3 {
    opacity: 1;
    transform: translate(-50%, -5px);
}
.more-btn3 {
    display: block;
    position: absolute;
    top: 240%;
    right: 15%; /* عدّلي الرقم حسب ما يناسب المكان */
    transform: translateX(50%);
    background-color: #8B9B8B;
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 4px 8px #fff;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 3;
}