/* For screen sizes up to 768 pixels (e.g., mobile devices) */
@media screen and (max-width: 768px) {
    /* Add responsive styles here */
    .container {
        padding: 10px; /* Adjust the padding for smaller screens */
    }
    /* Adjust other styles as needed for mobile layout */
    /* For example, you can stack elements vertically and reduce font sizes */
}

/* For screen sizes between 768px and 1024px (e.g., tablets) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Add responsive styles here */
}

/* For screen sizes above 1024px (e.g., desktops) */
@media screen and (min-width: 1025px) {
    /* Add responsive styles here */
}