.app-card {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 200px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .app-card:hover {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .app-card.large {
            width: 100%;
            height: 534px;
            border-radius: 20px;
        }

        .app-card.small {
            width: 100%;
            height: 257px;
            border-radius: 20px;
        }

        .phone-mockup {
            width: 100%;
            height: auto;
            margin-bottom: 20px;
        }

        .phone-big {
            position: absolute;
            top: -330px;
            left: 50%;
            transform: translateX(-50%);
            width: 396px;
            height: 379px;
            display: block;
            max-width: 100%;
            object-fit: contain;
        }

        .phone-small {
            position: absolute;
            bottom: -95px;
            right: 20px;
            width: 170px;
            height: 170px;
            opacity: 1;
            object-fit: contain;
        }

        .card-content h5 {
            color: white;
            margin-bottom: 15px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .card-content p {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
        }

        .app-link {
            color: white;
            text-decoration: none;
            text-align: left;
        }

        .app-link:hover {
            color: rgba(255, 255, 255, 0.8);
        }

        /* Background gradients for different cards */
        .our-card1 {
            background-image: url('https://d2q4gipm2ebkzp.cloudfront.net/img/our-apps/our-card1.webp');
        }

        .our-card2 {
            background-image: url('https://d2q4gipm2ebkzp.cloudfront.net/img/our-apps/our-card2.webp');
        }

        .our-card3 {
            background-image: url('https://d2q4gipm2ebkzp.cloudfront.net/img/our-apps/our-card3.webp');
        }

        .our-card4 {
            background-image: url('https://d2q4gipm2ebkzp.cloudfront.net/img/our-apps/our-card5.webp');
        }

        .our-card5 {
            background-image: url('https://d2q4gipm2ebkzp.cloudfront.net/img/our-apps/our-card4.webp');
        }

        /* Tablet (768px to 1199px) - 2 cards per row */
        @media (max-width: 991.98px) and (min-width: 768px) {

            .app-card.large,
            .app-card.small {
                height: 344px;
                width: 100%;
            }

            /* .card-content {
                padding: 10px;
            } */

            .phone-small {
                position: relative !important;
                /* transform: none !important; */
                top: 70px !important;
                left: -1px !important;
                right: auto !important;
                bottom: auto !important;
                margin: 0 auto 15px;
                display: block;
                width: 121px;
                height: 121px;


                object-fit: contain;
            }

            .phone-big {
                position: relative !important;
                /* transform: none !important; */
                top: 75px !important;
                left: 84px !important;
                right: auto !important;
                bottom: auto !important;
                margin: 0 auto 15px;
                display: block;
                width: 120px;
                height: 120px;
                object-fit: contain;
            }

            .phone-mockup {
                height: 130px;
            }

            .container,
            .container-md,
            .container-sm {
                max-width: 950px;
            }
        }



        /* Mobile (below 768px) - 1 card per row */
        @media (max-width: 767px) {

            .app-card.large,
            .app-card.small {
                width: 100%;
                height: auto;
                min-height: 280px;
                padding: 10px;
            }

            .card-content {
                text-align: left;
                padding: 29px;
            }

            .phone-mockup {
                height: 120px;

            }

            .phone-big {
                position: relative !important;
                /* transform: none !important; */
                top: 30px !important;
                left: 97px !important;
                right: auto !important;
                bottom: auto !important;
                margin: 0 auto;
                display: block;
                width: 191.66041564941406px;
                height: 181.55514526367188px;
                object-fit: contain;
            }

            .phone-small {
                position: relative !important;
                top: 19px !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                margin: 0 auto;
                display: block;
                width: 191.66041564941406px;
                height: 181.55514526367188px;
                object-fit: contain;
            }
        }

        /* Extra small screens */
        @media (max-width: 480px) {
            .app-card {
                padding: 15px;
                min-height: 250px;
            }

            .phone-mockup {
                height: 80px;
            }

            .phone-big,
            .phone-small {

                height: 150px;
            }
        }

        /* Large desktop optimization */
        @media (min-width: 1400px) {
            .phone-big {
                width: 450px;
                height: 430px;
                top: -350px;
            }
            .phone-small {
                width: 180px;
                height: 200px;
                bottom: -87px;
            }
        }

        /* Medium desktop */
        @media (max-width: 1399px) and (min-width: 1200px) {
            .phone-big {
                width: 350px;
                height: 330px;
                top: -280px;
            }

            .phone-small {
                width: 187px;
                height: 187px;


                bottom: -80px;
            }
        }