/* Global Centering for All Pages */
/* Ensures consistent horizontal centering across all templates */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--index-text-main, #e0e0e0);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background: var(--index-body-bg,
        radial-gradient(800px 420px at 8% 0%, rgba(31, 95, 70, 0.34) 0%, rgba(10, 17, 20, 0) 65%),
        radial-gradient(680px 380px at 92% 12%, rgba(21, 76, 58, 0.24) 0%, rgba(10, 17, 20, 0) 70%),
        linear-gradient(180deg, #070f14 0%, #0a1115 52%, #0a0f13 100%));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Main container wrapper for centered content */
.main-container,
.container,
.page-wrapper,
.content-wrapper {
    width: 100%;
    max-width: min(1200px, calc(100vw - 2rem));
    margin: 0 auto;
}

/* Header/Navigation centering */
.header,
.navbar,
.toolbar,
.top-bar,
.main-header {
    width: 100%;
    max-width: min(1200px, calc(100vw - 2rem));
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Button bar centering */
.button-bar,
.btn-bar,
.action-bar,
.control-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}