.app-grid-container {
            display: grid;
            /* Desktop Default: Three equal columns */
            grid-template-columns: repeat(3, 1fr); 
            gap: 3rem; 
            padding: 2rem;
            max-width: 1400px; 
            margin: 0 auto;
        }

        /* This wrapper now only sets the max size/aspect ratio and centers the screen */
        /* --------------------------- */
        .phone-frame {
            position: relative;
            width: 100%; 
            /* Fixed max-width for desktop to keep the visual size consistent */
            /* max-width: 285px; */
            /* height: 560px; */ 
            
            /* REMOVE all frame visual styling */
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            padding: 0; /* Remove inner frame padding */
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s ease;
        }

        /* The actual screen area */
        .screen-container {
            width: 100%;
            flex-grow: 1; 
            overflow: hidden;
            /* Give the screen container a soft border radius and shadow */
            border-radius: 12px; 
            background-color: white;
            position: relative; 
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        .screen-image {
            width: 100%;
            height: 100%;
            /* object-fit: cover; */
            display: block;
            transition: opacity 0.3s ease;
        }
        
        /* Notch is globally removed for the clean screen look */
        .notch {
            display: none !important;
        }

        /* --------------------------- */
        /* Navigation Arrow Styles (Always Visible) */
        /* --------------------------- */
        .nav-arrow {
            width: 40px;
            height: 40px;
            padding: 0;
            line-height: 1;
            font-size: 1.2rem;
            font-weight: 700;
            user-select: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

              /* KEY: Hide arrow by default */
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.1s;
            z-index: 10;
            /* margin-left: -14%; */
            /* margin-bottom: -84%; */
            /* margin-top: 71%; */
        }
        
        /* Remove desktop hover dependency for visibility */
        .app-card-group:hover .nav-arrow {
            opacity: 1; /* Ensure this rule doesn't accidentally hide it */
        }
        .nav-arrow:hover {
            transform: scale(1.1);
        }

        /* --------------------------- */
        /* Mobile/Tablet Responsiveness (<= 992px) */
        /* Only adjusts card styling and height for max space */
        /* --------------------------- */
        @media (max-width: 992px) { 
            .app-grid-container {
                /* Layout change: Stacked single column */
                grid-template-columns: 1fr; 
                gap: 2rem;
                padding: 1rem;
            }
            
            /* Removes the bootstrap card styling on mobile */
            .app-card-group {
                border: none !important; 
                box-shadow: none !important; 
                background-color: transparent !important; 
                padding: 0 !important; 
            }

            /* Makes the screen fluid on mobile, using viewport height */
            .phone-frame {
                max-width: 100% !important; 
                width: 100% !important;
                height: 70vh !important; 
            }
            
            /* Adjust arrows for better mobile spacing */
            .nav-arrow {
                margin: 0 1rem !important;
            }
        }
 .nav-right {
    margin-right: -15%;
    margin-bottom: -13%;
    margin-top: -376px;
    float: right;
}

.nav-left {
    margin-left: -14%;
    margin-bottom: -84%;
    margin-top: 71%;
}