@charset "utf-8";
/* CSS Document */
.container {
    position: relative;
    width: 600px; /* Adjust based on your image size */
    height: 400px;
	margin: 0 auto; /* Center horizontally */
}



.pc-image {
    width: 100%;
    height: auto;
}

.screen {
    position: absolute;
    top: 14%; /* Adjust based on your PC image */
    left: 20%;
    width: 62%;
    height: 53%;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.screenImg {
    position: absolute;
    top: 14%; /* Adjust based on your PC image */
    left: 20%;
    width: 62%;
    height: 53%;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.scrolling-content {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    animation: scroll 15s linear infinite; /* Increase duration for slower scrolling */
	animation-delay: 0s; /* Add a 5-second delay before the animation starts */
}

/* Media Query for Mobile Devices */
@media (max-width: 767px) {
    .container {
        width: 90%; /* Adjust the container width for smaller screens */
        height: auto; /* Adjust height if needed */
        margin: 0 auto; /* Center horizontally */
    }

    .screenImg {
        top: 14%; /* Adjust top position for better alignment on mobile */
        left: 20%; /* Adjust left position for better alignment on mobile */
        width: 62%; /* Use more of the screen width on mobile */
        height: 45%; /* Adjust the height to fit the mobile screen better */
    }
}

@keyframes scroll {
    0% {
        top: 0%; /* Start with the image in view */
    }
    20% {
        top: 0%; /* Shorter pause at the start */
    }
    80% {
        top: -880%; /* Scroll the image fully out of view */
    }
    100% {
        top: -880%; /* Hold the image off-screen for the last 20% (3 seconds pause) */
    }
}