/* Responsive Styles */

/* Use a media query to apply different styles for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
	/* Change the top bar to a column layout and center the text alignment */
	.top-bar {
		flex-direction: column;
		text-align: center;
	}

	/* Remove the margin from the top bar sections */
	.top-bar-section {
		margin: 0 0 10px 0;
	}
}

/* Additional styles to enhance the layout, if needed.*/
/* Use a media query to apply different styles for screens with a maximum width of 768px */
@media only screen and (max-width: 768px) {
	/* Change the wrap container to a column layout */
	.page-wrapper {
		flex-direction: column; /* Transition to vertical layout on mobile devices. */
	}

	/* Make the primary and wrap sidebar elements full width */
	.sidebar-right,
	.sidebar-left {
		order: -1; /* Move the sidebar to the top on mobile devices */
		max-width: 100%; /* Full-width sidebars */
	}
}