/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
@media all and (min-width: 768px) {
   .navbar .nav-item .dropdown-menu {
      display: none;
   }

   .navbar .nav-item:hover .nav-link {
      color: #0072BC;
   }

   .navbar .nav-item:hover .dropdown-menu {
      display: block;
   }

   .navbar .nav-item .dropdown-menu {
      margin-top: 0;
   }
}


.dropdown-item:hover {
   background-color: #0072BC;
   color: white !important
}

a.navbar-brand {
   white-space: normal;
   text-align: center;
   word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
   color: #0366d6;
}

hr {
   border: none;
   height: 5px;
   /* Set the hr color */
   color: #333; /* old IE */
   background-color: #333; /* Modern Browsers */
}

/*.textoverimg {
  position: relative;*/
/* Restrict the max width if you want */
/*max-width: 600px;
}

  .textoverimg img {*/
/* Responsive image */
/*width: 100%;
  }

  .textoverimg figcaption {*/
/* Position the text */
/*position: absolute;
    top: 0;
    left: 0;
    color: #fff;
  }*/

.spsIconText {
   color: dimgray !important;
   font-weight:bold;
   
   /*text-transform: uppercase;*/
}

.spsFooter {
    color:white;
    padding:0;
}

.spsFencePro {
   color: #0072BC;
}

.spsHeadings {
   color: #163669;
   font-weight: bold;
   margin: 0 auto;
   /*text-align: center;*/
}

.spsBackGroundOneSource {
   background-color: #0072BC;
   color: white;
}

.spsHRResources {
   /*background-image: url("../Images/HRTemplate.jpg");
  background-repeat: no-repeat;*/
   /*background-color: #163669;*/
   color: Black;
   font-size: large;
   font-weight: bold;
   margin: 0 auto;
   padding: 10px;
   width: 1200px;
   height: 450px;
}

.spsContactFormat {
   background-color: white;
   border-width: 3px;
   border-color: #163669;
   border-style: solid;
   color: black;
   font-size: large;
   font-weight: bold;
   margin: 0 auto;
   padding: 20px;
   /*text-align: center;*/
   width: 100%;
   align-items: center;
   justify-content: center;
}

.spsProdViewer {
   background-color: white;
   border-width: 3px;
   border-color: #163669;
   border-style: solid;
}

.spsToolsFormats {
   background-color: #0072BC;
   border-width: thick;
   border-color: #163669;
   border-style: solid;
   color: white;
   font-size: large;
   font-weight: bold;
   margin: 0 auto;
   padding: 20px;
   /*text-align: center;*/
   width: 100%;
   align-items: center;
   justify-content: center;
}

.spsBranchFormats {
   background-color: #163669;
   border-bottom-width: thick;
   border-color: #163669;
   border-style: solid;
   color: white;
   font-size: large;
   font-weight: bold;
   margin: 0 auto;
   padding: 4;
   /*text-align: center;*/
   width: 100%;
   align-items: center;
   justify-content: center;
}

.spsCheckBoxFormat {
   height: 20px;
   width: 20px;
   border-width: 2px;
}

.spsProdLabel {
   background-color: #163669;
   color: white;
   font-size: large;
   font-weight: bold;
   margin: 0 auto;
   margin-bottom: 10px;
   /*text-align: center;*/
   width: 220px;
}

.spsProdItemBold {
   font-weight: bold;
   font-size: 1.1em;
}

.spsCELabel {
   color: white;
   font-size: large;
   font-weight: bold;
   margin: 0 auto;
   margin-bottom: 10px;
   /*text-align: center;*/
   width: 225px;
}

.CEDefender {
   background-color: #163669;
}

.CEFortress {
   background-color: darkgreen;
}

.CEProtector {
   background-color: darkred;
}

.CESpartan {
   background-color: coral;
}

.CETitan {
   background-color: darkgoldenrod;
}

.CEGladiator {
   background-color: #636363;
}

.CEEnforcer {
   background-color: black;
}


.ProductInfoChart {
   font-family: Calibri, sans-serif;
   font-size: 1.1em;
   font-style: normal;
   font-weight: bold;
   margin: 0 auto;
   /*padding: 1px 1px 1px 1px;*/
   /*text-align: center;*/
   text-decoration: none;
   vertical-align: bottom;
   white-space: nowrap;
}

.ProductInfoTitle {
   background-color: #163669;
   color: white;
   /*text-align:center;*/
   font-size: 1.2em;
}

.ProductInfoItem {
   background-color: white;
   color: darkgreen;
   /*text-align: center;*/
}

.ProductInfoHeader {
   background-color: lightgray;
   color: black;
}

.ProductInfoGauge {
   color: blue;
}

.ProductInfoWall {
   color: darkred;
}



.btn-primary {
   color: #fff;
   background-color: #1b6ec2;
   border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
   color: #fff;
   background-color: #1b6ec2;
   border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
   font-size: 14px;
}

@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

.border-top {
   border-top: 1px solid #e5e5e5;
}

.border-bottom {
   border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
   font-size: 1rem;
   line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
   position: relative;
   min-height: 100%;
}

body {
   /* Margin bottom by footer height */
   margin-bottom: 25px;
   /* background-color: white; /* #163669; SPS Blue */
  /* background-image: url("bak.jpg");
   background-position: center;*/
}

img {
   max-width: 100%;
   height: auto;
}

.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   white-space: nowrap;
   line-height: 60px; /* Vertically center the text there */
}

/* The alert message box */
.alert {
   padding: 10px;
   background-color: lightcyan;
   border-color: darkblue;
   border-radius: 25px;
   border-style: solid;
   border-width: 2px;
   color: black;
   font-size: 1.3em;
   font-weight: bold;
   margin-bottom: 15px;
}

/* The close button */
.closebtn {
   margin-left: 15px;
   color: black;
   font-weight: bold;
   float: right;
   font-size: 22px;
   line-height: 20px;
   cursor: pointer;
   transition: 0.3s;
}

/* ==========================================================================
   Shared "hr-" page redesign classes (2026 refresh)
   Used by: Resources/HumanResources, Resources/CreditDepartment,
   Resources/Library, Tools/PlateCalc, Products/* pages.
   Hero navy (#163669) matches .spsBranchFormats / the site footer bar.
   Centralized here (rather than per-page <style> blocks) because this
   project's scoped/isolated component CSS (.razor.css) is not wired up in
   App.razor (the *.styles.css link is commented out) - site.css is already
   linked on every page, so this is the one place that reliably applies.
   ========================================================================== */

.hr-page {
   max-width: 1200px;
   margin: 0 auto;
}

.hr-hero {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   background: #163669;
   color: #fff;
   border-radius: 10px;
   padding: 1.1rem;
   margin-bottom: 1rem;
}

.hr-hero svg { flex-shrink: 0; }

.hr-hero h1 {
   margin: 0;
   font-size: 1.7em;
   font-weight: bold;
   color: #fff;
}

.hr-hero p {
   margin: 0.15rem 0 0;
   color: #c9d3ee;
   font-size: 0.95em;
}

.hr-intro {
   text-align: center;
   font-size: 1.1em;
   color: #333;
   line-height: 1.6;
   max-width: 900px;
   margin: 0 auto 1.5rem;
}

.hr-columns {
   display: flex;
   gap: 2rem;
   flex-wrap: wrap;
   align-items: flex-start;
}

.hr-links-col, .hr-side-col { min-width: 0; }
.hr-links-col { flex: 1 1 480px; }
.hr-side-col {
   flex: 1 1 320px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.hr-section { margin-bottom: 1.75rem; }

.hr-section-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.6rem;
   padding-bottom: 0.35rem;
   border-bottom: 2px solid var(--hr-accent, #163669);
}

.hr-section-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--hr-accent, #163669);
   color: #fff;
   flex-shrink: 0;
}

.hr-section-title {
   color: #222;
   font-size: 1.15em;
   font-weight: bold;
   margin: 0;
}

.hr-card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 0.6rem;
}

.hr-card {
   position: relative;
   display: flex;
   align-items: center;
   gap: 0.6rem;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-left: 4px solid var(--hr-accent, #163669);
   border-radius: 8px;
   padding: 0.55rem 0.7rem;
   color: #222;
   font-size: 0.92em;
   font-weight: 600;
   text-decoration: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hr-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   color: var(--hr-accent, #163669);
   text-decoration: none;
}

.hr-card-icon { color: var(--hr-accent, #163669); flex-shrink: 0; }

.hr-card-text em {
   display: block;
   font-weight: normal;
   font-size: 0.85em;
   color: #666;
   font-style: normal;
   margin-top: 0.15rem;
}

.hr-card-external {
   position: absolute;
   top: 0.4rem;
   right: 0.5rem;
   color: #999;
}

.hr-external-badge {
   color: #666;
   font-weight: normal;
   font-size: 0.9em;
}

.hr-feature-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.75rem;
   margin-bottom: 1.75rem;
}

.hr-feature-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.4rem;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   padding: 1rem 0.5rem;
   text-align: center;
   text-decoration: none;
   color: #333;
   font-weight: 600;
   font-size: 0.9em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hr-feature-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   color: #163669;
}

.hr-feature-card img {
   width: 56px;
   height: 56px;
   object-fit: contain;
}

.hr-mfg-note {
   background: #f6f9fe;
   border: 1px solid #d9e6f7;
   border-radius: 8px;
   padding: 0.7rem 1rem;
   color: #163669;
   font-weight: 600;
   text-align: center;
   margin-bottom: 1.5rem;
}

.hr-product-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 1rem;
   margin-bottom: 2rem;
}

.hr-product-card {
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hr-product-card img { width: 100%; display: block; }
.hr-product-card-body { padding: 0.9rem 1rem; }

.hr-product-card-body h3 {
   margin: 0 0 0.4rem;
   color: #163669;
   font-size: 1.1em;
   font-weight: bold;
}

.hr-product-card-body p {
   margin: 0;
   font-size: 0.88em;
   color: #444;
   line-height: 1.5;
}

.hr-info-card, .hr-colors-card, .hr-calc-card, .hr-preview-card, .hr-table-card {
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hr-info-card, .hr-colors-card, .hr-calc-card { padding: 0.85rem 1.1rem; }
.hr-preview-card, .hr-table-card { overflow: hidden; }

.hr-info-card-header, .hr-holiday-card-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.5rem;
   color: #163669;
}

.hr-info-card-header h2, .hr-holiday-card-header h2 {
   margin: 0;
   font-size: 1.15em;
   font-weight: bold;
   color: #163669;
}

.hr-info-card p {
   margin: 0;
   color: #333;
   font-size: 0.95em;
   line-height: 1.35;
   text-align: left;
}

.hr-colors-card h3 {
   margin: 0 0 0.5rem;
   color: #163669;
   font-size: 1.2em;
   font-weight: bold;
}

.hr-colors-card p { color: #444; line-height: 1.6; }
.hr-colors-card img { max-width: 100%; margin-top: 0.5rem; border-radius: 6px; }

.hr-notice {
   display: flex;
   gap: 0.6rem;
   background: #fff8ec;
   border: 1px solid #f3d9a6;
   border-left: 4px solid #eb9c1a;
   border-radius: 8px;
   padding: 0.8rem 1rem;
}

.hr-notice svg { flex-shrink: 0; color: #b8790f; margin-top: 0.1rem; }
.hr-notice p { margin: 0; color: #5c4508; font-size: 0.9em; line-height: 1.5; }
.hr-notice strong { display: block; color: #3d2e05; margin-bottom: 0.2rem; }

/* Holidays list (HumanResources) */
.hr-holiday-row {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   padding: 0.4rem 0.3rem;
   border-radius: 6px;
   font-size: 0.92em;
}

.hr-holiday-row:nth-child(odd) { background: #f6f7fb; }
.hr-holiday-row.hr-next { background: #eaf6ee; outline: 1px solid #bfe6cb; }
.hr-holiday-name { color: #222; font-weight: 600; }
.hr-holiday-date { color: #555; white-space: nowrap; }

.hr-next-badge {
   display: inline-block;
   margin-left: 0.5rem;
   padding: 0.05rem 0.4rem;
   border-radius: 999px;
   background: #1baf7a;
   color: #fff;
   font-size: 0.7em;
   font-weight: bold;
   vertical-align: middle;
}

.hr-year-divider {
   margin: 0.75rem 0 0.4rem;
   font-size: 0.8em;
   font-weight: bold;
   color: #999;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

/* Calculator forms (PlateCalc) */
.hr-calc-card { margin-bottom: 1.25rem; }

.hr-field-row {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.4rem 0;
}

.hr-field-row + .hr-field-row { border-top: 1px solid #f0f0f3; }

.hr-field-label {
   flex: 0 0 170px;
   text-align: right;
   color: #333;
   font-weight: 600;
   font-size: 0.95em;
}

.hr-field-input, .hr-search-input {
   padding: 0.4rem 0.6rem;
   border: 1px solid #ccced6;
   border-radius: 6px;
   font-size: 0.95em;
}

.hr-field-input { flex: 1; max-width: 160px; }
.hr-search-input { width: 100%; padding: 0.55rem 0.8rem; margin-bottom: 1rem; }

.hr-field-input:focus, .hr-search-input:focus {
   outline: none;
   border-color: #2a78d6;
   box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.15);
}

.hr-calc-button-row { display: flex; justify-content: flex-end; margin-top: 1rem; }

.hr-calc-button, .hr-back-button {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.12s ease;
}

.hr-calc-button {
   background: #2a78d6;
   color: #fff;
   border: none;
   padding: 0.55rem 1.3rem;
   font-size: 0.95em;
}

.hr-calc-button:hover { background: #1f5db0; }

.hr-back-button {
   background: #fff;
   border: 1px solid #ccced6;
   padding: 0.45rem 0.9rem;
   color: #163669;
   font-size: 0.9em;
   margin-bottom: 1rem;
}

.hr-back-button:hover { background: #f0f4fa; }

.hr-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.hr-result-card {
   background: #f6f9fe;
   border: 1px solid #d9e6f7;
   border-radius: 10px;
   padding: 0.9rem 1rem;
   text-align: center;
}

.hr-result-label {
   color: #555;
   font-size: 0.85em;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   margin: 0 0 0.3rem;
}

.hr-result-value { color: #163669; font-size: 1.7em; font-weight: bold; }
.hr-result-unit { font-size: 0.5em; font-weight: 600; color: #555; margin-left: 0.25rem; }

/* File browser (Library) */
.hr-file-list { display: flex; flex-direction: column; gap: 0.4rem; }

.hr-file-row {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   width: 100%;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-left: 4px solid #163669;
   border-radius: 8px;
   padding: 0.55rem 0.7rem;
   color: #222;
   font-size: 0.92em;
   font-weight: 600;
   text-align: left;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hr-file-row:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   color: #163669;
}

.hr-file-row.hr-file-active { border-left-color: #2a78d6; background: #f0f4fa; }
.hr-file-row svg { flex-shrink: 0; color: #163669; }
.hr-file-row.hr-file-folder svg { color: #eb9c1a; }

.hr-file-in {
   display: block;
   font-weight: normal;
   color: #777;
   font-size: 0.85em;
   margin-top: 0.1rem;
}

.hr-no-results { color: #888; font-style: italic; padding: 0.5rem; }

.hr-preview-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   background: #163669;
   color: #fff;
   padding: 0.7rem 1rem;
}

.hr-preview-title {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.hr-preview-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.hr-preview-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 6px;
   padding: 0.35rem 0.7rem;
   color: #fff;
   font-size: 0.85em;
   font-weight: 600;
   cursor: pointer;
}

.hr-preview-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* Spec/dimension charts (Products/*) */
.hr-chart-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   font-size: 0.85em;
   font-weight: 600;
   color: #444;
   margin-bottom: 1rem;
}

.hr-chart-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

.hr-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.hr-chart-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.hr-table-scroll { overflow-x: auto; }

.hr-spec-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.85em;
   white-space: nowrap;
}

.hr-spec-table caption {
   caption-side: top;
   background: #163669;
   color: #fff;
   font-weight: bold;
   font-size: 1.05em;
   padding: 0.55rem 0.8rem;
   text-align: left;
}

.hr-spec-table th, .hr-spec-table td {
   padding: 0.4rem 0.6rem;
   text-align: center;
   border-bottom: 1px solid #eee;
}

.hr-spec-table thead tr.hr-group-row th { background: #f6f7fb; color: #222; font-weight: bold; }
.hr-spec-table thead tr.hr-col-row th { background: #fafbfc; color: #555; font-weight: 600; font-size: 0.9em; }

.hr-spec-table tbody th:first-child, .hr-spec-table tbody td:first-child {
   text-align: left;
   font-weight: bold;
   color: #163669;
   background: #f9fafc;
}

.hr-spec-table tbody tr:nth-child(odd) { background: #fcfcfd; }
.hr-spec-table tbody tr:hover { background: #f0f4fa; }

.hr-lbs { color: #222; font-weight: bold; }
.hr-wall { color: #2a78d6; }
.hr-gauge { color: #b8790f; }

/* Catalog product grid (ProductListingStandard.razor) */
.hr-catalog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 0.9rem;
   margin: 1rem 0;
}

.hr-catalog-grid-wide {
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.hr-catalog-card {
   display: block;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   overflow: hidden;
   text-decoration: none;
   color: #222;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.hr-catalog-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   text-decoration: none;
   color: #163669;
}

.hr-catalog-card img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.hr-catalog-card-wide img { aspect-ratio: 16 / 10; }

.hr-catalog-card-body { padding: 0.6rem 0.75rem; }
.hr-catalog-card-body h5 { margin: 0; font-size: 0.95em; font-weight: bold; color: #163669; }
.hr-catalog-id { margin: 0.25rem 0 0; font-size: 0.85em; color: #666; }

/* Simple photo gallery grid */
.hr-photo-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 0.75rem;
   margin: 1rem 0;
}

.hr-photo-grid img {
   width: 100%;
   display: block;
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Repeated "heading + text (+ image)" content blocks (Fabric/Wood/etc.) */
.hr-info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.hr-info-block {
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   padding: 1rem 1.2rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hr-info-block h3 {
   margin: 0 0 0.5rem;
   color: #163669;
   font-size: 1.15em;
   font-weight: bold;
}

.hr-info-block p { color: #444; line-height: 1.6; margin: 0 0 0.6rem; }
.hr-info-block img { max-width: 100%; border-radius: 6px; }

/* Logo/brochure link tiles (VendorPartner, etc.) */
.hr-logo-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 0.75rem;
   margin: 1rem 0;
}

.hr-logo-card {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   padding: 1rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hr-logo-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hr-logo-card img { max-width: 100%; height: auto; }

/* Prominent call-to-action button (used in hero areas) */
.hr-cta-button {
   display: inline-block;
   margin-top: 0.75rem;
   background: #fff;
   color: #163669;
   border-radius: 6px;
   padding: 0.6rem 1.2rem;
   font-weight: bold;
   text-decoration: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.hr-cta-button:hover { background: #eef3fb; text-decoration: none; color: #0f2450; }

/* Simple prev/image/next gallery browser (About, etc.) */
.hr-about-gallery {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin: 0 auto;
   max-width: 760px;
}

.hr-about-arrow {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #163669;
   color: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   transition: background 0.12s ease, transform 0.12s ease;
}

.hr-about-arrow:hover { background: #0f2450; transform: translateY(-1px); }

.hr-about-image {
   flex: 1;
   width: 100%;
   max-width: 620px;
   border-radius: 10px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Key-figure summary row (CustomerPayment, etc.) */
.hr-stat-row {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.hr-stat {
   flex: 1;
   min-width: 200px;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   padding: 1rem 1.2rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   text-align: center;
}

.hr-stat-label {
   display: block;
   color: #666;
   font-size: 0.85em;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 0.3rem;
}

.hr-stat-value {
   display: block;
   color: #163669;
   font-size: 1.5em;
   font-weight: bold;
}

/* Image + table/content two-column block (Kennel tiers, etc.) */
.hr-split-block {
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
   margin-bottom: 1.75rem;
   align-items: flex-start;
}

.hr-split-block img { flex: 0 0 280px; max-width: 100%; border-radius: 8px; }
.hr-split-block .hr-split-content { flex: 1 1 320px; min-width: 0; }
.hr-split-block .hr-split-note { color: #444; font-size: 0.9em; line-height: 1.6; margin-top: 0.5rem; }

/* Named style cards (Centurion Steel Defender/Titan/etc.) */
.hr-style-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1rem;
   margin: 1rem 0;
}

.hr-style-card {
   display: block;
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   overflow: hidden;
   text-decoration: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hr-style-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.hr-style-card img { width: 100%; display: block; }

.hr-style-label {
   text-align: center;
   color: #fff;
   font-weight: bold;
   font-size: 1.1em;
   padding: 0.5rem;
}

/* Contact form */
.hr-form-card {
   background: #fff;
   border: 1px solid #e6e6ea;
   border-radius: 10px;
   padding: 1.3rem 1.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hr-form-label {
   display: block;
   font-weight: 600;
   color: #333;
   font-size: 0.9em;
   margin: 0.9rem 0 0.3rem;
}

.hr-form-label:first-child { margin-top: 0; }

.hr-checkbox-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 0.5rem;
   margin: 0.5rem 0 1rem;
}

.hr-checkbox-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background: #f6f7fb;
   border: 1px solid #e6e6ea;
   border-radius: 6px;
   padding: 0.5rem 0.7rem;
   font-size: 0.9em;
   color: #333;
}

.hr-checkbox-item input { width: 16px; height: 16px; }

.hr-form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
}

.hr-form-subgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.hr-form-subgrid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; }

.hr-contact-input, .hr-contact-textarea {
   width: 100%;
   padding: 0.45rem 0.6rem;
   border: 1px solid #ccced6;
   border-radius: 6px;
   font-size: 0.95em;
   font-family: inherit;
}

.hr-contact-textarea { resize: vertical; }

.hr-contact-input:focus, .hr-contact-textarea:focus {
   outline: none;
   border-color: #2a78d6;
   box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.15);
}

.hr-required-note { color: #666; font-size: 0.85em; margin-top: 0.75rem; }

.hr-form-message {
   margin-top: 1rem;
   padding: 0.7rem 1rem;
   background: #f6f9fe;
   border: 1px solid #d9e6f7;
   border-radius: 8px;
   color: #163669;
   font-weight: 600;
}

/* End shared "hr-" redesign classes */

   /* When moving the mouse over the close button */
   .closebtn:hover {
      color: black;
   }