/* Main layout styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

/* Main content wrapper - this is essential for sticky footer */
.main-content {
  flex: 1 0 auto; /* Flex grow | shrink | basis */
}

/* Ensure sections take up available space */
.section {
  width: 100%;
}

/* Footer positioning */
.footer-bottom {
  flex-shrink: 0; /* Prevent footer from shrinking */
  width: 100%;
  margin-top: auto; /* Push to bottom when content is short */
}