/* الكود الحالي لتنسيق العنصر مع الأنيميشن */
.elementor-widget-container {
    padding: 0; /* إزالة التباعد الافتراضي */
    margin: 0; /* إزالة الهامش الافتراضي */
}

.puiux-advanced-card {
    position: relative;
    overflow: hidden;
    width: 300px; /* جرب تعديل العرض بما يتناسب مع التصميم */
    height: 400px; /* جرب تعديل الارتفاع بما يتناسب مع التصميم */
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%);
    transition: all 0.6s ease-in-out;
}

.puiux-advanced-card .swiper-slide {
    transition: width 0.6s ease-in-out; /* حركة سلسة لتغيير العرض */
}

.puiux-advanced-card .item {
    width: 100%; /* العرض الكامل للحاوية */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}

.puiux-advanced-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.puiux-advanced-card:hover .overlay {
    opacity: 1;
}

.puiux-advanced-card .content {
    animation: uniqueAnimation 1s ease forwards;
    opacity: 0;
}

.puiux-advanced-card:hover .content {
    opacity: 1;
}

@keyframes uniqueAnimation {
    0% {
        transform: scale(0) rotate(-720deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(360deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}