.allpro {
    background: white;
    height: 650px;
}

.collection {
    text-align: center;
    font-family: 'Biski Trial', sans-serif;
    font-weight: bold;
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #555;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(144, 160, 145, 1);
    animation: glow 1.5s infinite alternate;
    position: relative;
}

.collection::after {
    content: '';
    display: block;
    width: 90px;
    height: 5px;
    background: linear-gradient(45deg, #8B9B8B, #a8e6cf);
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

@keyframes glow {
    0%   { text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), 0 0 5px rgba(139, 155, 139, 0.6); }
    50%  { text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), 0 0 15px rgba(139, 155, 139, 1); }
    100% { text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), 0 0 5px rgba(139, 155, 139, 0.6); }
}

.box {
    background-color: rgb(231, 225, 225);
    width: 400px;
    height: 450px;
    position: absolute;
    top: 1500px;
    left: 70px;
    z-index: 1;
    border-radius: 20px;
    box-shadow: inset 10px 10px 20px #a1a1a1,
    inset -10px -10px 20px #ffffff;
}

.note {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size: 18px;
    top: 30%;
    left: 150px;
    font-weight: bold;
    color: #333;
    position: absolute;
    z-index: 3;
}

.banner {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.banner .product {
    width: 400px;
    height: 450px;
    position: absolute;
    bottom: 210px;
    left: 300px;
    transform: translateX(-68%);
    z-index: 1;
    transition: 0.7s;
    --left: -220px;
}

.banner .product .soda {
    background:
            url(../images/deodraint.png) var(--left) 120px no-repeat,
            url(../images/can.png) no-repeat;
    background-size: 225% auto, auto 80%;
    width: 330px;
    height: 440px;
    background-blend-mode: multiply;
    mask-image: url(../images/can.png);
    mask-size: auto 80%;
    transition: 0.7s;
}





/* ✅ زر معرفة المزيد */
.more-btn {
    display: block;
    position: absolute;
    top: 40%;
    left: 10%;
    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;
}



.banner .product.clicked {
    --left: 60px;
    transform: translateX(-115px) translateY(-50px);
}

.banner .product.clicked + .note {
    opacity: 1;
}

.product.clicked + .note + .more-btn {
    opacity: 1;
    transform: translate(-50%, -5px);
}