/* ==========================================================================
   1. CORE VERTICAL CENTERING & STICKY FOOTER CONTAINER SYSTEM
   ========================================================================== */
/* 2. Prevent the page from ever scrolling horizontally */
html, body {
  margin: 0;
  padding: 0;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important; /* Locks out horizontal screen shifting */
}
/* Master viewport container wrapping Header, Main Page, and Footer */
.app-layout-grid {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Takes full window height */
  width: 100%;
}
/* The parent container holding your home page view templates */
.app-main-content {
  flex: 1 0 auto; /* Pushes the footer permanently to the bottom edge */
  width: 100%;
  position: relative;

  /* ─── ADD VERTICAL CENTERING ENGINE ON MAIN CONTAINER ─── */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers content vertically between header & footer */
  align-items: center;     /* Centers content horizontally */

  /* Restores background layout image stretching seamlessly */
  background: url('bg.ce0b7bae8643c1337991.jpg') no-repeat center center fixed;
  background-size: cover;
}
/* ==========================================================================
   2. DESKTOP VIEW SETTINGS (Side-by-Side: Text Left, Image Right)
   ========================================================================== */
#content {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  padding: 40px 20px;
  box-sizing: border-box;

  /* Sets columns side-by-side */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}
.text-column {
  flex: 1;
  text-align: left;
}
.main-text {
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}
.image-container {
  flex-shrink: 0;
}
.circle-img {
  width: 256px;
  height: 256px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 768px) {

  /* CHANGE THIS FROM 'fixed' TO 'absolute' */
  .top-navbar {
    position: absolute; /* Pinned to the top of the DOCUMENT, not the window viewport */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
  }

  .app-main-content {
    /* Keep routed page headers below the absolute app header. */
    justify-content: flex-start;

    /* Since the header is absolute, it takes up 60px of space at the top.
       Adding padding-top ensures your bio layout content doesn't get hidden underneath it */
    padding-top: 60px !important;
    box-sizing: border-box;
  }

  #content {
    padding: 30px 5%;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 35px;
  }
}
/* 1. Force padding and borders to be calculated INSIDE widths globally */
*, *:before, *:after {
  box-sizing: border-box !important;
}
/* 3. Sanitize your master outer containers */
.app-layout-grid,
.app-main-content {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/*# sourceMappingURL=styles.2edd31f59518663649ed.css.map*/