/* ==========================================================================
   1. GLOBAL ARCHITECTURE CORE RESETS
   ========================================================================== */
@layer shell-base, page-content;

/* ==========================================================================
   2. MASTER SHELL ARCHITECTURE LAYER
   ========================================================================== */
@layer shell-base {

  html {
    font-size: 100%;
    box-sizing: border-box;
  }

  /* Core Reset Fix: Protects layout margin flexibility across all sub-pages */
  *, *:before, *:after {
    box-sizing: inherit;
    padding: 0;
  }

  /* Restores margin fluidity to structural block tags so page layouts can use auto-margins */
  body, div, h1, h2, h3, p, ul, li, section, main, header, footer, aside, figure, figcaption {
    margin: 0;
  }

  body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #f3e7ce;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: transparent !important; /* Preserves iframe/embed transparency matches */
  }

  body.TN-menu-active {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
  }

  .TB-site-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    background-image: url('../images/page/Main-Back.gif');
    background-position: center center;
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
  }

  /* ==========================================================================
     3. BRAND BRANDING & LAYOUT HEADERS
     ========================================================================== */
  .TB-main-header {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .TB-header-top-bar {
    background-color: #656565;
    padding: 8px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .TB-search-container {
    display: flex;
    flex-direction: column;
    width: 250px;
  }

  .TB-search-container form {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .TN-nav-search-input {
    flex: 1;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
  }

  .TN-nav-search-btn {
    padding: 6px 12px;
    background: #444;
    color: #fff;
    border: 1px solid #444;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }

  .TB-search-link {
    color: #bbb;
    font-size: 0.75rem;
    text-decoration: none;
    margin-top: 4px;
  }

  .TB-search-link:hover {
    text-decoration: underline;
  }

  .TB-header-middle-bar {
    background-color: transparent;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
  }

  .TB-logo-slot {
    flex: 0 0 346px;
  }

  .TB-logo-slot img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .TB-header-text {
    flex: 1;
    text-align: center;
  }

  .TB-header-text h1 {
    font-size: 1.75rem;
    color: #222;
    margin: 0;
    font-family: sans-serif;
  }

  .TB-phone-link {
    color: inherit;
    text-decoration: none;
  }

  @media (max-width: 992px) {
    .TB-header-middle-bar {
      flex-direction: column;
      justify-content: center;
      padding: 20px;
    }
    .TB-logo-slot {
      flex: 0 1 auto;
    }
    .TB-header-spacer {
      display: none;
    }
    .TB-header-text h1 {
      font-size: 1.5rem;
      line-height: 1.4;
    }
  }

  @media (min-width: 993px) {
    .TB-header-spacer {
      flex: 0 0 346px;
      visibility: hidden;
    }
  }

  .TB-header-bottom-bar {
    background-color: #656565;
    padding: 0 20px;
    min-height: 48px;
    position: relative;
    z-index: 1000;
  }

  /* ==========================================================================
     4. UNIFIED NAVIGATION FRAMEWORK DEFINITIONS
     ========================================================================== */
  .TN-nav-toggle,
  .TN-mobile-close-bar,
  .TN-mobile-back-row {
    display: none;
  }

  .TN-nav-container {
    width: 100%;
    background-color: #656565;
  }

  .TN-nav-list,
  .TN-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .TN-trigger-text,
  .TN-flat-link {
    font-family: sans-serif;
    text-decoration: none;
    cursor: pointer;
  }

  .TN-arrow {
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
  }

  /* Cleaned: Removed !important variable overrides */
  .TN-nav-list li:empty,
  .TN-sub-list li:empty {
    display: none;
  }

  /* ==========================================================================
     5. DESKTOP WORKFLOW HOVER & CLICK ENGINE (Strictly Above 992px Viewports)
     ========================================================================== */
  @media (min-width: 993px) {
    .TN-nav-list {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }

    .TN-nav-list > li {
      position: relative;
      flex: 1;
      text-align: center;
    }

    .TN-nav-list > li > .TN-trigger-text,
    .TN-nav-list > li > .TN-flat-link {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 16px 10px;
      color: #ffffff;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      background: transparent;
      border: none;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-nav-list > li > .TN-flat-link:hover,
    .TN-nav-list > li:has(.d-click-active) > .TN-trigger-text {
      background-color: #4e4e4e;
      color: #ffffff;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-nav-list > li > .TN-trigger-text .TN-arrow {
      transform: rotate(90deg);
      color: #ffffff;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-nav-list .TN-submenu {
      position: absolute;
      background-color: #ffffff;
      min-width: 290px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.18);
      border: 1px solid #ddd;
      opacity: 0;
      visibility: hidden;
      z-index: 9999;
      text-align: left;
      display: block;
      height: auto;
      left: 0;
      top: 100%;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-nav-list .TN-submenu.d-click-active {
      opacity: 1;
      visibility: visible;
    }

    .TN-nav-list > li > .TN-submenu {
      top: 100%;
      left: 0;
      border-top: 3px solid #4e4e4e;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-nav-list > li > .TN-submenu .TN-sub-list .TN-submenu {
      top: 0;
      left: 100%;
      border-left: 3px solid #4e4e4e;
    }

    /* Cleaned: Removed unnecessary !important flags and multi-line formatting fixed */
    .TN-sub-list li a,
    .TN-sub-list li .TN-trigger-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      color: #222222;
      background-color: #ffffff;
      font-size: 14px;
      font-weight: normal;
      border-bottom: 1px solid #eee;
      white-space: nowrap;
      text-align: left;
      width: 100%;
      box-sizing: border-box;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-sub-list li .TN-trigger-text .TN-arrow {
      color: #4e4e4e;
    }

    /* Cleaned: Removed unnecessary !important flags */
    .TN-sub-list li:hover > a,
    .TN-sub-list li:hover > .TN-trigger-text {
      background-color: #f4f4f4;
      color: #4e4e4e;
    }
  }

  /* ==========================================================================
     6. MOBILE MODULAR SCREEN OVERLAYS (Strictly Below 992px Viewports)
     ========================================================================== */
  @media (max-width: 992px) {
    /* Cleaned: Removed unnecessary !important flags */
    .TN-nav-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #656565;
      color: #ffffff;
      border: none;
      padding: 12px 20px;
      font-size: 16px;
      font-weight: bold;
      width: 100%;
      font-family: sans-serif;
      cursor: pointer;
    }

    /* Maintained: Required platform layout overrides for smooth JavaScript touch locking */
    .TN-nav-container {
      position: fixed !important;
      top: 48px !important;
      left: -100% !important;
      width: 100% !important;
      height: calc(100vh - 48px) !important;
      background-color: #656565 !important;
      transition: left 0.3s ease !important;
      z-index: 99999 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    .TN-nav-container.TN-open {
      left: 0 !important;
    }

    .TN-mobile-close-bar {
      display: block !important;
      background-color: #656565 !important;
      color: #ffffff !important;
      padding: 16px 20px;
      text-align: right;
      font-family: sans-serif;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      border-bottom: 1px solid #555555 !important;
    }

    .TN-nav-container .TN-nav-list {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }

    .TN-nav-container .TN-nav-list li {
      position: relative !important;
      width: 100% !important;
      display: block !important;
    }

    .TN-nav-container .TN-submenu {
      position: fixed !important;
      top: 103px !important;
      left: 100% !important;
      width: 100% !important;
      height: calc(100vh - 103px) !important;
      background-color: #656565 !important;
      opacity: 1 !important;
     visibility: visible !important;
     transition: left 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 100000 !important;
    box-shadow: none !important;
   border: none !important;
  }
   .TN-nav-container .TN-submenu.m-panel-active {
left: 0 !important;
}
.TN-mobile-back-row {
display: block !important;
background-color: #555555 !important;
color: #ffffff !important;
font-weight: bold !important;
padding: 18px 20px !important;
font-family: sans-serif !important;
font-size: 16px !important;
cursor: pointer !important;
border-bottom: 1px solid #656565 !important;
}
.TN-nav-list > li > a,
.TN-nav-list > li > .TN-trigger-text,
.TN-submenu > .TN-sub-list > li > a,
.TN-submenu > .TN-sub-list > li > .TN-trigger-text,
.TN-sub-list > li > a,
.TN-sub-list > li > .TN-trigger-text {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 18px 20px !important;
color: #ffffff !important;
background-color: #656565 !important;
border-bottom: 1px solid #777777 !important;
font-family: sans-serif !important;
font-size: 16px !important;
text-decoration: none !important;
width: 100% !important;
box-sizing: border-box !important;
font-weight: normal !important;
}
li.TN-has-children > a > .TN-arrow,
li.TN-has-children > .TN-trigger-text > .TN-arrow {
display: inline-block !important;
color: #ffffff !important;
transform: rotate(0deg) !important;
}
.TN-nav-container li:empty,
.TN-nav-list li:empty,
.TN-sub-list li:empty,
.TN-submenu div:empty,
.TN-submenu ul:empty {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.TN-submenu:has(.m-panel-active) {
overflow-y: hidden !important;
}
.TN-submenu .TN-submenu {
top: 0 !important;
height: 100% !important;
}
}
/* ==========================================================================
7. RESPONSIVE 3-COLUMN STRUCTURE CORE LAYOUT
========================================================================== */
.TB-content-container {
display: grid;
grid-template-columns: 1fr;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
}
@media (min-width: 992px) {
.TB-content-container {
grid-template-columns: 280px 1fr 280px;
}
}
@media (max-width: 991px) {
.TB-sidebar-left,
.TB-sidebar-right {
display: none !important;
}
}
.TB-sidebar-left,
.TB-sidebar-right,
.TB-main-body {
padding: 20px;
box-sizing: border-box;
}
.TB-sidebar-left,
.TB-sidebar-right {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.TB-stacked-media {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
margin-top: 15px;
}
.TB-media-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 180px;
}
.TB-media-item img {
width: 100%;
height: auto;
object-fit: contain;
}
.TB-shape-round img {
clip-path: circle(50% at center);
}
.TB-shape-oval img {
clip-path: ellipse(50% 35% at center);
}
.TB-media-item figcaption {
font-size: 1.0rem;
text-align: center;
margin-top: 4px;
color: #000;
}
/* ==========================================================================
CLEAN TEMPLATE FOOTER CONFIGURATION (Prefix: TF-)
========================================================================== */
/* Cleaned: Removed unnecessary !important flags */
.TB-content-container .TF-main-footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
grid-column: 1 / -1;
flex-basis: 100%;
clear: both;
width: 100%;
max-width: 860px;
margin: 40px auto 20px auto;
padding: 10px;
box-sizing: border-box;
background-color: transparent;
}
/* Cleaned: Removed unnecessary !important flags */
.TF-main-footer .TF-footer-illustration {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
/* Cleaned: Removed unnecessary !important flags */
.TF-main-footer .TF-footer-illustration img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
padding: 10px 0;
}
/* Cleaned: Removed unnecessary !important flags */
.TF-main-footer .TF-footer-copyright {
font-family: Arial, sans-serif;
font-size: 0.95rem;
line-height: 1.5;
color: #222222;
margin: 15px 0;
text-align: center;
width: 100%;
}
/* ==========================================================================
GLOBAL ULTRA-WIDE MONITOR ADJUSTMENTS (Screens 1400px and up)
========================================================================== */
@media (min-width: 1400px) {
/* Cleaned: Removed unnecessary !important flags */
main.TB-main-body {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
main.TB-main-body {
display: flex;
flex-direction: column;
min-height: 100%;
}
}
} /* SYSTEM SAFEGUARD CLOSURE */