/* CSS Layout for iPhone 12 */

    .iphone-12 {
        background-color: #000;
        border-radius: 30px;
        width: 375px;
        height: 812px;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .iphone-12:before {
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 164px;
        height: 8px;
        background-color: #fff;
        border-radius: 4px;
    }

    .iphone-12:after {
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 50%;
    }

    .iphone-12 .screen {
        position: absolute;
        top: 48px;
        left: 16px;
        right: 16px;
        bottom: 60px;
        background-color: #fff;
        overflow: hidden;
    }

    .iphone-12 .home-button {
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 54px;
        background-color: #fff;
        border-radius: 50%;
    }




    .iphone-12 .screen iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

    /* CSS Layout for Google Pixel 7 */


    .google-pixel-7 {
        background-color: #000;
        border-radius: 30px;
        width: 412px;
        /* Width of Google Pixel 7 */
        height: 892px;
        /* Height of Google Pixel 7 */
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .google-pixel-7:before {
        position: absolute;
        top: -4px;
        /* Adjust the top position to cover the white line */
        left: 50%;
        transform: translateX(-50%);
        width: 186px;
        height: 8px;
        background-color: #fff;
        border-radius: 4px;
    }

    .google-pixel-7:after {
        position: absolute;
        bottom: -12px;
        /* Adjust the bottom position to cover the white line */
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 28px;
        background-color: #fff;
        border-radius: 50%;
    }

    .google-pixel-7 .pixelscreen {
        /* Adjust the positioning and dimensions */
        position: absolute;
        top: 64px;
        left: 24px;
        right: 24px;
        bottom: 80px;
        background-color: #fff;
        overflow: hidden;
    }

    .google-pixel-7 .pixel-home-button {
        /* Adjust the positioning */
        position: absolute;
        bottom: 2px;
        /* Adjust the bottom position to cover the extra home button */
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 54px;
        background-color: #fff;
        border-radius: 50%;
    }

    .google-pixel-7 .pixelscreen iframe {
        width: 100%;
        height: 100%;
        border: none;
    }