/* Responsive styles for mobile and tablet devices */
@media (max-width: 767px) {
    .container {
        padding: 0 5%; /* Set horizontal padding to 5% */
        width: auto; /* Allow width to be controlled by padding and viewport */
        max-width: 90vw; /* Ensure container fits within viewport width */
        box-sizing: border-box; /* Include padding in width calculation */
        margin: 0 auto; /* Center the container */
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 33%; /* Maintain padding for larger devices */
        width: auto; /* Default width for larger devices */
        max-width: none; /* Remove maximum width restriction */
        box-sizing: border-box; /* Include padding in width calculation */
    }
}