/* ==========================================
   VAISHVA YOG — CLEANED LAYOUTS STYLES
   ========================================== */

/* ─── 1. Main Page Sections ──────────────── */
section, header {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    /* Clear out any hidden fixed heights */
    height: auto;
    min-height: auto;
}

/* ─── 2. Global Content Containers ────────── */
/* This handles keeping all text and elements from touching the screen margins on mobile devices */
.section-container {
    width: 100%;
    max-width: 1140px; /* Standard elegant grid container frame max */
    margin: 0 auto;    /* Centers the entire block on the monitor screen */
    padding: 0 1.5rem; /* Creates an automatic 24px inner cushion for phone glass borders */
    box-sizing: border-box;
}

/* Specific narrow form alignment container wrapper */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ─── 3. Grid & Flex Layout Utilities ─────── */

/* General center flex wrapper */
.flex-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* ─── 4. Layout Layering Safety (z-index) ──── */
.navbar {
    z-index: 1000; /* Keeps navigation safely stuck on top of running page slides */
}

.lightbox-overlay {
    z-index: 2000; /* Keeps full view picture popups floating on top of navigation */
}