/* Feature Cards Section */
.feature-cards-section {
    position: relative;
    z-index: 10;
    width: 100%;
}

.cards-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Container for overlapping cards */
.cards-grid {
    position: relative;
    width: 100%;
    height: 400px;
}

/* Card Items */
.card-item {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-item:hover {
    transform: translateY(-1px);
    /* box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2); */
    /* border-radius: 37px; */
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

/* Desktop Layout - Base Scale Factor: 1 */
.card-large-left {
    top: 0;
    left: 0;
    z-index: 1;
    transform: scale(1);
}

.card-medium-center-left {
    top: 164px;
    left: 248px;
    z-index: 2;
    transform: scale(1);
}

.card-medium-center-right {
    top: 178px;
    left: 260px;
    z-index: 2;
    transform: scale(1);
}

.card-medium-center-top {
    top: 0px;
    left: 410px;
    z-index: 2;
    transform: scale(1);
}

.card-large-right {
    top: 0px;
    left: 811px;
    z-index: 1;
    transform: scale(1);
}

.card-small-left {
    top: 216px;
    left: 815px;
    z-index: 2;
    transform: scale(1);
}

.card-small-right {
    top: 216px;
    left: 1027px;
    z-index: 2;
    transform: scale(1);
}

@media (max-width: 1400px) {
    .card-large-left {
        width: 391px;
        top: 0;
        left: 0;
        z-index: 1;
        transform: scale(1);
    }

    .card-medium-center-left {
        width: 519px;
        top: 157px;
        left: 232px;
        z-index: 2;
        transform: scale(1);
    }

    .card-medium-center-right {
        width: 519px;
        top: 157px;
        left: 232px;
        z-index: 2;
        transform: scale(1);
    }

    .card-medium-center-top {
        width: 381px;
        top: 0px;
        left: 366px;
        z-index: 2;
        transform: scale(1);
    }

    .card-large-right {
        width: 406px;
        top: 0px;
        left: 723px;
        z-index: 1;
        transform: scale(1);
    }

    .card-small-left {
        width: 403px;
        top: 192px;
        left: 725px;
        z-index: 2;
        transform: scale(1);
    }

    .card-small-right {
        top: 216px;
        left: 1027px;
        z-index: 2;
        transform: scale(1);
    }
}

/* Tablet Large - Scale Factor: 0.85 */
@media (max-width: 1200px) {
    .cards-container {
        padding: 0 40px;
    }

    .cards-grid {
        height: 340px;
    }

    .card-large-left {
        transform: scale(0.85);
    }

    .card-medium-center-left {
        top: calc(164px * 0.85);
        left: calc(248px * 0.85);
        transform: scale(0.85);
    }

    .card-medium-center-right {
        top: calc(164px * 0.85);
        left: calc(529px * 0.85);
        transform: scale(0.85);
    }

    .card-medium-center-top {
        top: calc(-12px * 0.85);
        left: calc(410px * 0.85);
        transform: scale(0.85);
    }

    .card-large-right {
        top: calc(-29px * 0.85);
        left: calc(818px * 0.85);
        transform: scale(0.85);
    }

    .card-small-left {
        top: calc(216px * 0.85);
        left: calc(815px * 0.85);
        transform: scale(0.85);
    }

    .card-small-right {
        top: calc(216px * 0.85);
        left: calc(1027px * 0.85);
        transform: scale(0.85);
    }
}

/* Tablet Medium - Scale Factor: 0.7 */
@media (max-width: 992px) {
    .cards-container {
        padding: 0 30px;
    }

    .cards-grid {
        height: 280px;
    }

    .card-large-left {
        transform: scale(0.7);
    }

    .card-medium-center-left {
        top: calc(164px * 0.7);
        left: calc(248px * 0.7);
        transform: scale(0.7);
    }

    .card-medium-center-right {
        top: calc(164px * 0.7);
        left: calc(529px * 0.7);
        transform: scale(0.7);
    }

    .card-medium-center-top {
        top: calc(-12px * 0.7);
        left: calc(410px * 0.7);
        transform: scale(0.7);
    }

    .card-large-right {
        top: calc(-29px * 0.7);
        left: calc(818px * 0.7);
        transform: scale(0.7);
    }

    .card-small-left {
        top: calc(216px * 0.7);
        left: calc(815px * 0.7);
        transform: scale(0.7);
    }

    .card-small-right {
        top: calc(216px * 0.7);
        left: calc(1027px * 0.7);
        transform: scale(0.7);
    }
}

/* Tablet Small - Scale Factor: 0.55 */
@media (max-width: 768px) {
    .feature-cards-section {
        padding: 30px 0 60px 0;
    }

    .cards-container {
        padding: 0 20px;
    }

    .cards-grid {
        height: 220px;
    }

    .card-large-left {
        transform: scale(0.55);
    }

    .card-medium-center-left {
        top: calc(164px * 0.55);
        left: calc(248px * 0.55);
        transform: scale(0.55);
    }

    .card-medium-center-right {
        top: calc(164px * 0.55);
        left: calc(529px * 0.55);
        transform: scale(0.55);
    }

    .card-medium-center-top {
        top: calc(-12px * 0.55);
        left: calc(410px * 0.55);
        transform: scale(0.55);
    }

    .card-large-right {
        top: calc(-29px * 0.55);
        left: calc(818px * 0.55);
        transform: scale(0.55);
    }

    .card-small-left {
        top: calc(216px * 0.55);
        left: calc(815px * 0.55);
        transform: scale(0.55);
    }

    .card-small-right {
        top: calc(216px * 0.55);
        left: calc(1027px * 0.55);
        transform: scale(0.55);
    }
}

/* Mobile - Scale Factor: 0.45 */
@media (max-width: 640px) {
    .cards-grid {
        height: 180px;
    }

    .card-large-left {
        transform: scale(0.45);
    }

    .card-medium-center-left {
        top: calc(164px * 0.45);
        left: calc(248px * 0.45);
        transform: scale(0.45);
    }

    .card-medium-center-right {
        top: calc(164px * 0.45);
        left: calc(529px * 0.45);
        transform: scale(0.45);
    }

    .card-medium-center-top {
        top: calc(-12px * 0.45);
        left: calc(410px * 0.45);
        transform: scale(0.45);
    }

    .card-large-right {
        top: calc(-29px * 0.45);
        left: calc(818px * 0.45);
        transform: scale(0.45);
    }

    .card-small-left {
        top: calc(216px * 0.45);
        left: calc(815px * 0.45);
        transform: scale(0.45);
    }

    .card-small-right {
        top: calc(216px * 0.45);
        left: calc(1027px * 0.45);
        transform: scale(0.45);
    }
}

/* Mobile Small - Scale Factor: 0.35 */
@media (max-width: 480px) {
    .cards-container {
        padding: 0 15px;
    }

    .cards-grid {
        height: 140px;
    }

    .card-large-left {
        top: calc(-288px * 0.35);
        left: calc(-382px * 0.35);
        transform: scale(0.35);
    }

    .card-medium-center-left {
        top: calc(35px * 0.35);
        left: calc(-2px * 0.35);
        transform: scale(0.35);
    }

    .card-medium-center-right {
        top: calc(33px * 0.35);
        left: calc(283px * 0.35);
        transform: scale(0.35);
    }

    .card-medium-center-top {
        top: calc(-106px * 0.35);
        left: calc(70px * 0.35);
        transform: scale(0.35);
    }

    .card-large-right {
        top: calc(-29px * 0.35);
        left: calc(818px * 0.35);
        transform: scale(0.35);
    }

    .card-small-left {
        top: calc(176px * 0.35);
        left: calc(659px * 0.35);
        transform: scale(0.35);
    }

    .card-small-right {
        top: calc(216px * 0.35);
        left: calc(1027px * 0.35);
        transform: scale(0.35);
    }
}