/* ================================
   0) Fonts
   ================================ */
@font-face{
  font-family:"Poppins";
  src:url("https://6097324.fs1.hubspotusercontent-na1.net/hubfs/6097324/WC/Fonts/Poppins/Poppins-Light.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("https://6097324.fs1.hubspotusercontent-na1.net/hubfs/6097324/WC/Fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("https://6097324.fs1.hubspotusercontent-na1.net/hubfs/6097324/WC/Fonts/Poppins/Poppins-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("https://6097324.fs1.hubspotusercontent-na1.net/hubfs/6097324/WC/Fonts/Poppins/Poppins-Semibold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ================================
   1) HubL configuration
   ================================ */

































/* ================================
   2) Tokens (single source of truth)
   ================================ */
:root{
  /* Brand core */
  --highlight-red:#fa0000;
  --medium-red:#aa0000;
  --dark-red:#730000;
  --metal-gray:#3d4744;

  /* Support */
  --white:#ffffff;
  --black:#000000;
  --dark-gray:#1e1e1e;
  --dark-gray-muted:#535a5a;
  --medium-gray:#8c8c8c;
  --light-gray:#c8c8c8;
  --lightest-gray:#ebebeb;
   --dark-metal:#202221;

  /* Layout */
  --container-max: 1200px;
  --container-pad-xs:35.156px;
  --container-pad-sm:54.932px;
  --container-pad-xl:18px;

  /* A11y / motion */
  --focus-ring: 0 0 0 3px rgba(250, 0, 0, 0.35);
  --radius-1:2px;
  --radius-2:4px;

  /* Forms */
  --form-input:#33475b;
  --form-bg-light:#ffffff;
  --form-border:rgba(203,214,226,1);

  /* Footer */
  --Dark-Metal:#202221;
  
   /* ----------------
     Navigation
     ---------------- */
   --color-submenu: #F7F7F7;
  }

/* ================================
   3) Base reset + global a11y (remove duplicates from partials)
   ================================ */
*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family: Poppins, Arial, sans-serif;
  font-size: 1rem;
  line-height:1.6;
  color: var(--dark-gray);
  background:#fff;
}

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

a{ color: var(--highlight-red); }
a:hover{ color: var(--medium-red); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--radius-1);
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto!important; }
  *, *::before, *::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* Icon helper (keep here; referenced globally) */
.cta-arrow-icon{
  fill:var(--highlight-red);
  width:0.6rem;
  height:0.6rem;
}

/* ================================
   4) Partials
   ================================ */
/* ******************************************************************************
The intention of this file is to reset most of the different browser, built-in
CSS styles, so that it is an empty canvas for the themed specific stylesheets.
****************************************************************************** */
*, *:before, *:after {
  box-sizing: border-box;
}
/* ******************************************************************************
The intention of this file is to makes browsers render all elements more
consistently and in line with modern standards.
It precisely targets only the styles that need normalizing.
****************************************************************************** */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */
html {
  line-height: 1.15; /* Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}
/* Sections
========================================================================== */
body {
  margin: 0;/*** Remove the margin in all browsers.***/
}
main {
  display: block;/*** Render the `main` element consistently in IE. ***/
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}/*** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. ***/

/* Grouping content
========================================================================== */
hr {
  box-sizing: content-box; /* Add the correct box sizing in Firefox. */
  height: 0; /* Add the correct box sizing in Firefox. */
  overflow: visible; /* Show the overflow in Edge and IE. */
}
/* Text-level semantics
========================================================================== */
a {
  background-color: transparent;/*** Remove the gray background on active links in IE 10. ***/
}
b,
strong {
  font-weight: bolder;/*** Add the correct font weight in Chrome, Edge, and Safari. ***/
}
/* Embedded content
========================================================================== */
img {
  border-style: none;/*** Remove the border on images inside links in IE 10. ***/
}
/* Forms
========================================================================== */
button,input,optgroup,select,textarea {
  font-family: inherit; /* Change the font styles in all browsers. */
  font-size: 100%; /* Change the font styles in all browsers. */
  line-height: 1.15; /* Change the font styles in all browsers. */
  margin: 0; /* Remove the margin in Firefox and Safari. */
}
button,input { /* Show the overflow in Edge. */
  overflow: visible; /* Show the overflow in IE. */
}
button,select { /* Remove the inheritance of text transform in Firefox. */
  text-transform: none; /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
}
/*** Correct the inability to style clickable types in iOS and Safari. ***/
[type=button],[type=reset],[type=submit],button{
    -webkit-appearance:button
}
/*** Remove the inner border and padding in Firefox. ***/
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
    border-style:none;
    padding:0
}
/*** Restore the focus styles unset by the previous rule. ***/
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
    outline:1px dotted ButtonText
}
[type=checkbox],[type=radio]{
  box-sizing: border-box; /* Add the correct box sizing in IE 10. */
  padding: 0; /* Remove the padding in IE 10. */
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
  height: auto;/*** Correct the cursor style of increment and decrement buttons in Chrome. ***/
}
[type="search"] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari. */
  outline-offset: -2px; /* Correct the outline style in Safari. */
}
[type=search]::-webkit-search-decoration{
    -webkit-appearance:none; /*** Remove the inner padding in Chrome and Safari on macOS. ***/
}
::-webkit-file-upload-button{
  -webkit-appearance:button; /* Correct the inability to style clickable types in iOS and Safari. */
  font: inherit; /* Change font properties to `inherit` in Safari. */
}
/* Interactive
========================================================================== */
details {
  display: block; /*** Add the correct display in Edge, IE 10+, and Firefox. ***/
}
summary {
  display: list-item; /*** Add the correct display in all browsers. ***/
}

/* Misc
========================================================================== */
template {
  display: none; /*** Add the correct display in IE 10+. ***/
}
[hidden] {
  display: none; /*** Add the correct display in IE 10. ***/
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your
Drag and Drop (DND) sections look when editing content in the page editor.
****************************************************************************** */
dnd-section{
  padding:80px 20px;
}

.banner-area .dnd-section{
  padding:0;
}

.dnd-section > .row-fluid,
.page-center{
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--container-pad-xs);
  padding-right:var(--container-pad-xs);
}

.dnd-section .widget-type-cell{
  padding-left:0;
  padding-right:0;
}

@media (min-width:500px){
  .dnd-section > .row-fluid,
  .page-center{
    padding-left:var(--container-pad-sm);
    padding-right:var(--container-pad-sm);
  }
}

@media (min-width:1400px){
  .dnd-section > .row-fluid,
  .page-center{
    padding-left:var(--container-pad-xl);
    padding-right:var(--container-pad-xl);
  }
}

@media (max-width:767px){
  .dnd-section .widget-type-cell{
    padding-left:0;
    padding-right:0;
  }
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your
fonts apppear throughout your site.
****************************************************************************** */

html { font-size: 100%; }               /* 16 px base – keep the fallback line */

body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;                      /* 16 px */
  font-weight: 300;
  line-height: 1.5;
  color: var(--dark-gray);
  background: #fff;
}

p { margin: 0 0 1rem; }

/* Anchor Links */
a {
  color: #fa0000;
  text-decoration: none;
  transition: color 0.3s, text-decoration-color 0.3s;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 500;
  gap: .5rem;
}
a:hover { color: var(--medium-red); text-decoration: none; }

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* Headings */

h1, .h1 { font-weight: 700; font-size: clamp(1.8rem,1.5rem + 1.5vw,2.5rem); line-height:1.2; }
h2, .h2 { font-weight: 400; font-size: clamp(1.5rem,1.3rem + 1.2vw,2rem);   line-height:1.25;}
h3, .h3 { font-weight: 500; font-size: clamp(1.3rem,1.1rem + 1vw,1.625rem); line-height:1.3;}
h4, .h4 { font-weight: 500; font-size: clamp(1.1rem,0.95rem + .8vw,1.375rem); }
h5, .h5 { font-weight: 500; font-size: clamp(.95rem,.85rem + .6vw,1.125rem); }
h6, .h6 { font-weight: 400; font-size: clamp(.85rem,.75rem + .5vw,1rem); }

h1,h2,h3,h4,h5,h6 { margin:0.5rem 0; line-height:1.5; word-break:break-word; }

b,strong{
  font-weight: 600;
}

.text-muted { color: var(--dark-gray-muted) !important; }

.small-heading,
.eyebrow {
  font-weight: 500;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.small-heading{ font-size: 1.375rem; }
.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;   /* typical eyebrow style – change to none if you prefer */
}

.aside {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--light-gray);
  margin: .4rem 0;
  text-align: left;            /* usually sidebars are left‑aligned */
}
figcaption,
.caption {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dark-gray);
  margin: .4rem 0;
  text-align: center;
  letter-spacing: .04em;
}

blockquote {
  border-left: 4px solid var(--light-gray);
  padding-left: 1rem;
  margin: 1rem 0;
}

code{
    vertical-align:bottom
}

ul{
    margin-top:0;
    margin-bottom:1rem
}
ul ul{
    margin-bottom:0
}

hr {
  margin: 1rem 0;                     /* vertical spacing only */
  border: none;                       /* reset any default border */
  border-top: 1px solid var(--light-gray);
}

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

address{
    margin: 0 0 1rem; 
    font-family: inherit;          /* keep the same family (Poppins) */
    font-size: 0.875rem;           /* slightly smaller than body (≈14 px) */
    font-weight: 400;              /* regular weight – easy to scan */
    line-height: 1.4;              /* a touch looser than body’s 1.5 */
    font-style: normal;            /* remove the default italic */
    color: var(--light-gray);      /* subtle, readable colour */
}

:focus:not(:focus-visible) {
  outline: auto;                 /* preserve native outline for mouse users */
}

@media (max-width: 992px) {
  html { font-size: 1rem; }      /* 16 px = 1rem */
}
/* ---------------------------------------------------------------
   Global form styling
   --------------------------------------------------------------- */
form,
.submitted-message {
  border-color: #494a52;
  font-family: 'Poppins', sans-serif;
}

/* ---------------------------------------------------------------
   Form title
   --------------------------------------------------------------- */
h3.form-title {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Form container styling
   --------------------------------------------------------------- */
.hs-form {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;               /* 16 px base */
  line-height: 1.5;
  color: var(--form-input);
  background-color: var(--form-bg-light);
  max-width: 640px;              /* optional – keep forms from stretching too wide */
  margin: 0 auto;                /* centre on the page */
  padding: 1.5rem;
  border: 1px solid var(--form-border);
  border-radius: .4rem;
}

/* ---------------------------------------------------------------
   Fields & spacing
   --------------------------------------------------------------- */
.hs-form-field {
  margin-bottom: 1.4rem;
}
.field {
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------
   Labels & legends
   --------------------------------------------------------------- */
.hs-form label,
form label {
  font-weight: 500;
  color: rgba(51, 71, 91,
               1.0);
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
  text-align: left;
  line-height: 1.25rem;
  padding-top: 0;
}
form legend,
.hs-form legend {
  font-size: 0.875rem;
  color: rgba(51, 71, 91,
               1.0);
}

/* ---------------------------------------------------------------
   Help text
   --------------------------------------------------------------- */
form legend {
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------
   Input / textarea / select styling
   --------------------------------------------------------------- */
form input,
form select,
form textarea,
.hs-input,
input#hs-pwd-widget-password {
  border-color: rgba(203, 214, 226,
                     1.0);
  border-radius: 3px;
  background-color: rgba(245, 248, 250,
                         1.0);
  box-sizing: border-box;
  padding: 0 15px;
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  border-width: 1px;
  border-style: solid;
  color: #33475b;
}

/* Focus state */
form input:focus,
form select:focus,
form textarea:focus,
.hs-input:focus,
input#hs-pwd-widget-password:focus {
  border-color: rgba(82, 168, 236, .8);
  outline: 0;
}

/* Placeholder colors */
.hs-input:-moz-placeholder,
.hs-input::-webkit-input-placeholder {
  color: #bfbfbf;
}

/* Resize textarea (vertical only) */
form textarea {
  resize: vertical;
}

/* ----------------------------------------------------------------
   Checkbox / radio
   ---------------------------------------------------------------- */
.hs-input[type=checkbox],
.hs-input[type=radio] {
  cursor: pointer;
  width: auto;
  height: auto;
  padding: 0;
  margin: 3px 5px 3px 0;
  line-height: normal;
  border: 0;
  min-height: auto;
}

/* ----------------------------------------------------------------
   File input
   ---------------------------------------------------------------- */
form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* ----------------------------------------------------------------
   Rich text inside forms
   ---------------------------------------------------------------- */
form .hs-richtext,
form .hs-richtext p,
.hs-richtext,
.hs-field-desc,
.hs-dateinput:before {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
  color: #1e1e1e;
}
form .hs-richtext img,
.hs-richtext img {
  max-width: 100% !important;
}

/* ----------------------------------------------------------------
   Date picker customizations
   ---------------------------------------------------------------- */
.fn-date-picker .pika-table thead th,
.fn-date-picker .pika-table thead th {
  color: #FFF;
}
.fn-date-picker td.is-selected .pika-button,
.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}
.fn-date-picker td.is-today .pika-button {
  color: #fa0000;
}
.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* ----------------------------------------------------------------
   Buttons – primary & HubSpot specific
   ---------------------------------------------------------------- */
.hs-button,
.button--primary,
.hs_cos_wrapper_type_google_search .hs-button {
  background-color: rgba(61, 71, 68,
                         1.0);
  border-color: rgba(61, 71, 68,
                     1.0);
  border-radius: 3px;
  border-width: 1px;
  color: rgba(255, 255, 255,
              1.0);
  padding: 12px 24px;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  text-decoration: none;
  font-family: helvetica;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Hover / focus */
.hs-button:hover,
.hs-button:focus,
.button--primary:hover,
.button--primary:focus {
  background-color: rgba(250, 0, 0,
                         1.0);
  border-color: rgba(250, 0, 0,
                     1.0);
  color: rgba(255, 255, 255,
              1.0);
}

/* Active state */
.hs-button:active,
.button--primary:active {
  background-color: rgba(101, 111, 108,
                         1.0);
  border-color: rgba(101, 111, 108,
                     1.0);
  color: rgba(255, 255, 255,
              1.0);
}

/* Fallback default button colors (when theme vars aren’t used) */
.hs-button {
  background-color: #494a52;
  border-color: #494a52;
  color: #fff;
}
.hs-button:hover,
.hs-button:focus {
  background-color: #21222a;
  border-color: #21222a;
}
.hs-button:active {
  background-color: #71727a;
  border-color: #71727a;
}

/* ----------------------------------------------------------------
   Google search wrapper button tweaks (conditional)
   ---------------------------------------------------------------- */


/* ----------------------------------------------------------------
   Miscellaneous utilities
   ---------------------------------------------------------------- */
ul.no-list {
  list-style: none;
}
.field {
  margin-bottom: 18px;
}
select[multiple].hs-input {
  height: inherit;
}

/* ----------------------------------------------------------------
   GDPR / legal consent
   ---------------------------------------------------------------- */
.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* ----------------------------------------------------------------
   Validation messages
   ---------------------------------------------------------------- */
.hs-form-required {
  color: #EF6B51;
}
.hs-input.invalid.error,
.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* ----------------------------------------------------------------
   Captcha badge
   ---------------------------------------------------------------- */
.grecaptcha-badge {
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   Form fieldsets
   ---------------------------------------------------------------- */
form fieldset {
  max-width: 100% !important;
}

/* ----------------------------------------------------------------
   Inputs list (checkboxes / radios)
   ---------------------------------------------------------------- */
.inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}
.inputs-list input,
.inputs-list span {
  vertical-align: middle;
}

/* ----------------------------------------------------------------
   Date input icon
   ---------------------------------------------------------------- */
.hs-dateinput {
  position: relative;
}
.hs-dateinput:before {
  content: '\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

/* ----------------------------------------------------------------
   Submit button (generic styling)
   ---------------------------------------------------------------- */
form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* ----------------------------------------------------------------
   Font families (fallback)
   ---------------------------------------------------------------- */
.hs-default-font-element,
.hs-main-font-element,
.hs-form,
.hs-button {
  font-family: 'Poppins', sans-serif;
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your
menu items appear, including the link and hover effects.
****************************************************************************** */
.hs-menu-wrapper ul{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding-left:0;
    margin-bottom:0;
    list-style:none;
}
.hs-menu-item a{
    display:block;
    padding:.5rem 1rem;
    color:rgba(0,0,0,.5);
    text-decoration:none;
}
.hs-menu-item a:focus,.hs-menu-item a:hover{
    text-decoration:none;
    color:rgba(0,0,0,.7);
}
.hs-menu-item.active a{
    color:rgba(0,0,0,.9);
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your
tables look throughout your site.
****************************************************************************** */

table{
  border-collapse:collapse;
  border-color:var(--light-gray);
}

th, td{
  border:1px solid var(--light-gray);
  color:var(--dark-gray);
  padding:0.5rem 0.75rem;
}

thead th, thead td{
  background:var(--lightest-gray);
  color:var(--dark-gray);
  font-weight:600;
  text-align:inherit;
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your
modules look throughout your site.
****************************************************************************** */

/* ================================
   0) Tokens (fallbacks)
   If your theme already defines these, you can remove this block.
   ================================ */
:root{
  /* grid gutters (between items) */
  --grid-gutter-x:0px; /* equals 15px+15px legacy gutter */
  --grid-gutter-y:0px;
}

/* ================================
   0.1) Base + a11y
   ================================ */
*, *::before, *::after{ box-sizing:border-box; }

body{
  font-family:'Poppins', sans-serif;
  color:var(--dark-gray);
}

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

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto!important; }
  *, *::before, *::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* ================================
   1) Grid (Bootstrap-like)
   - Gap-based gutters when supported
   - Padding-based gutters fallback
   ================================ */
.row{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

/* Modern gutter system (gap) */
@supports (gap: 1rem){
  .row{
    gap:var(--grid-gutter-y) var(--grid-gutter-x);
    margin:0; /* no negative margins in gap mode */
  }

  .row > .col,
  .row > [class^="col-"],
  .row > [class*=" col-"]{
    padding:0; /* remove padding gutters when gap is active */
  }
}

/* Fallback (no flex gap) */
@supports not (gap: 1rem){
  .row{
    margin-right:-15px;
    margin-left:-15px;
    margin-top:-15px;
    margin-bottom:-15px;
  }

  .row > .col,
  .row > [class^="col-"],
  .row > [class*=" col-"]{
    padding-right:15px;
    padding-left:15px;
    padding-top:15px;
    padding-bottom:15px;
  }
}

/* No gutters (both modes) */
.no-gutters{
  margin:0!important;
}
@supports (gap: 1rem){
  .no-gutters{ gap:0!important; }
}
.no-gutters > .col,
.no-gutters > [class^="col-"],
.no-gutters > [class*=" col-"]{
  padding:0!important;
}

/* Column base */
.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-auto,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto{
  position:relative;
  width:100%;
}

/* Flexible auto columns */
.col{
  -ms-flex-preferred-size:0;
  flex-basis:0;
  -ms-flex-positive:1;
  flex-grow:1;
  max-width:100%;
}

.col-auto{
  -ms-flex:0 0 auto;
  flex:0 0 auto;
  width:auto;
  max-width:100%;
}

/* Percentage width columns */
.col-1{  -ms-flex:0 0  8.33333%; flex:0 0  8.33333%; max-width: 8.33333%; }
.col-2{  -ms-flex:0 0 16.66667%; flex:0 0 16.66667%; max-width:16.66667%; }
.col-3{  -ms-flex:0 0 25%;       flex:0 0 25%;       max-width:25%; }
.col-4{  -ms-flex:0 0 33.33333%; flex:0 0 33.33333%; max-width:33.33333%; }
.col-5{  -ms-flex:0 0 41.66667%; flex:0 0 41.66667%; max-width:41.66667%; }
.col-6{  -ms-flex:0 0 50%;       flex:0 0 50%;       max-width:50%; }
.col-7{  -ms-flex:0 0 58.33333%; flex:0 0 58.33333%; max-width:58.33333%; }
.col-8{  -ms-flex:0 0 66.66667%; flex:0 0 66.66667%; max-width:66.66667%; }
.col-9{  -ms-flex:0 0 75%;       flex:0 0 75%;       max-width:75%; }
.col-10{ -ms-flex:0 0 83.33333%; flex:0 0 83.33333%; max-width:83.33333%; }
.col-11{ -ms-flex:0 0 91.66667%; flex:0 0 91.66667%; max-width:91.66667%; }
.col-12{ -ms-flex:0 0 100%;      flex:0 0 100%;      max-width:100%; }

@media (min-width:576px){
  .col-sm{ -ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%; }
  .col-sm-auto{ -ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:100%; }

  .col-sm-1{  -ms-flex:0 0  8.33333%; flex:0 0  8.33333%; max-width: 8.33333%; }
  .col-sm-2{  -ms-flex:0 0 16.66667%; flex:0 0 16.66667%; max-width:16.66667%; }
  .col-sm-3{  -ms-flex:0 0 25%;       flex:0 0 25%;       max-width:25%; }
  .col-sm-4{  -ms-flex:0 0 33.33333%; flex:0 0 33.33333%; max-width:33.33333%; }
  .col-sm-5{  -ms-flex:0 0 41.66667%; flex:0 0 41.66667%; max-width:41.66667%; }
  .col-sm-6{  -ms-flex:0 0 50%;       flex:0 0 50%;       max-width:50%; }
  .col-sm-7{  -ms-flex:0 0 58.33333%; flex:0 0 58.33333%; max-width:58.33333%; }
  .col-sm-8{  -ms-flex:0 0 66.66667%; flex:0 0 66.66667%; max-width:66.66667%; }
  .col-sm-9{  -ms-flex:0 0 75%;       flex:0 0 75%;       max-width:75%; }
  .col-sm-10{ -ms-flex:0 0 83.33333%; flex:0 0 83.33333%; max-width:83.33333%; }
  .col-sm-11{ -ms-flex:0 0 91.66667%; flex:0 0 91.66667%; max-width:91.66667%; }
  .col-sm-12{ -ms-flex:0 0 100%;      flex:0 0 100%;      max-width:100%; }
}

@media (min-width:768px){
  .col-md{ -ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%; }
  .col-md-auto{ -ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:100%; }

  .col-md-1{  -ms-flex:0 0  8.33333%; flex:0 0  8.33333%; max-width: 8.33333%; }
  .col-md-2{  -ms-flex:0 0 16.66667%; flex:0 0 16.66667%; max-width:16.66667%; }
  .col-md-3{  -ms-flex:0 0 25%;       flex:0 0 25%;       max-width:25%; }
  .col-md-4{  -ms-flex:0 0 33.33333%; flex:0 0 33.33333%; max-width:33.33333%; }
  .col-md-5{  -ms-flex:0 0 41.66667%; flex:0 0 41.66667%; max-width:41.66667%; }
  .col-md-6{  -ms-flex:0 0 50%;       flex:0 0 50%;       max-width:50%; }
  .col-md-7{  -ms-flex:0 0 58.33333%; flex:0 0 58.33333%; max-width:58.33333%; }
  .col-md-8{  -ms-flex:0 0 66.66667%; flex:0 0 66.66667%; max-width:66.66667%; }
  .col-md-9{  -ms-flex:0 0 75%;       flex:0 0 75%;       max-width:75%; }
  .col-md-10{ -ms-flex:0 0 83.33333%; flex:0 0 83.33333%; max-width:83.33333%; }
  .col-md-11{ -ms-flex:0 0 91.66667%; flex:0 0 91.66667%; max-width:91.66667%; }
  .col-md-12{ -ms-flex:0 0 100%;      flex:0 0 100%;      max-width:100%; }
}

@media (min-width:992px){
  .col-lg{ -ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%; }
  .col-lg-auto{ -ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:100%; }

  .col-lg-1{  -ms-flex:0 0  8.33333%; flex:0 0  8.33333%; max-width: 8.33333%; }
  .col-lg-2{  -ms-flex:0 0 16.66667%; flex:0 0 16.66667%; max-width:16.66667%; }
  .col-lg-3{  -ms-flex:0 0 25%;       flex:0 0 25%;       max-width:25%; }
  .col-lg-4{  -ms-flex:0 0 33.33333%; flex:0 0 33.33333%; max-width:33.33333%; }
  .col-lg-5{  -ms-flex:0 0 41.66667%; flex:0 0 41.66667%; max-width:41.66667%; }
  .col-lg-6{  -ms-flex:0 0 50%;       flex:0 0 50%;       max-width:50%; }
  .col-lg-7{  -ms-flex:0 0 58.33333%; flex:0 0 58.33333%; max-width:58.33333%; }
  .col-lg-8{  -ms-flex:0 0 66.66667%; flex:0 0 66.66667%; max-width:66.66667%; }
  .col-lg-9{  -ms-flex:0 0 75%;       flex:0 0 75%;       max-width:75%; }
  .col-lg-10{ -ms-flex:0 0 83.33333%; flex:0 0 83.33333%; max-width:83.33333%; }
  .col-lg-11{ -ms-flex:0 0 91.66667%; flex:0 0 91.66667%; max-width:91.66667%; }
  .col-lg-12{ -ms-flex:0 0 100%;      flex:0 0 100%;      max-width:100%; }
}

@media (min-width:1200px){
  .col-xl{ -ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%; }
  .col-xl-auto{ -ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:100%; }

  .col-xl-1{  -ms-flex:0 0  8.33333%; flex:0 0  8.33333%; max-width: 8.33333%; }
  .col-xl-2{  -ms-flex:0 0 16.66667%; flex:0 0 16.66667%; max-width:16.66667%; }
  .col-xl-3{  -ms-flex:0 0 25%;       flex:0 0 25%;       max-width:25%; }
  .col-xl-4{  -ms-flex:0 0 33.33333%; flex:0 0 33.33333%; max-width:33.33333%; }
  .col-xl-5{  -ms-flex:0 0 41.66667%; flex:0 0 41.66667%; max-width:41.66667%; }
  .col-xl-6{  -ms-flex:0 0 50%;       flex:0 0 50%;       max-width:50%; }
  .col-xl-7{  -ms-flex:0 0 58.33333%; flex:0 0 58.33333%; max-width:58.33333%; }
  .col-xl-8{  -ms-flex:0 0 66.66667%; flex:0 0 66.66667%; max-width:66.66667%; }
  .col-xl-9{  -ms-flex:0 0 75%;       flex:0 0 75%;       max-width:75%; }
  .col-xl-10{ -ms-flex:0 0 83.33333%; flex:0 0 83.33333%; max-width:83.33333%; }
  .col-xl-11{ -ms-flex:0 0 91.66667%; flex:0 0 91.66667%; max-width:91.66667%; }
  .col-xl-12{ -ms-flex:0 0 100%;      flex:0 0 100%;      max-width:100%; }
}

/* Gutter utilities (Bootstrap-ish)
   Use on .row: class="row gx-3 gy-4" or "row g-2" */
.g-0{ --grid-gutter-x:0;    --grid-gutter-y:0; }
.g-1{ --grid-gutter-x:.25rem; --grid-gutter-y:.25rem; }
.g-2{ --grid-gutter-x:.5rem;  --grid-gutter-y:.5rem; }
.g-3{ --grid-gutter-x:1rem;   --grid-gutter-y:1rem; }
.g-4{ --grid-gutter-x:1.5rem; --grid-gutter-y:1.5rem; }
.g-5{ --grid-gutter-x:3rem;   --grid-gutter-y:3rem; }

.gx-0{ --grid-gutter-x:0; }
.gx-1{ --grid-gutter-x:.25rem; }
.gx-2{ --grid-gutter-x:.5rem; }
.gx-3{ --grid-gutter-x:1rem; }
.gx-4{ --grid-gutter-x:1.5rem; }
.gx-5{ --grid-gutter-x:3rem; }

.gy-0{ --grid-gutter-y:0; }
.gy-1{ --grid-gutter-y:.25rem; }
.gy-2{ --grid-gutter-y:.5rem; }
.gy-3{ --grid-gutter-y:1rem; }
.gy-4{ --grid-gutter-y:1.5rem; }
.gy-5{ --grid-gutter-y:3rem; }

/* ================================
   2) Flex utilities
   ================================ */
.flex-row{ -ms-flex-direction:row!important; flex-direction:row!important; }
.flex-column{ -ms-flex-direction:column!important; flex-direction:column!important; }
.flex-wrap{ -ms-flex-wrap:wrap!important; flex-wrap:wrap!important; }
.flex-fill{ -ms-flex:1 1 auto!important; flex:1 1 auto!important; }
.flex-grow-0{ -ms-flex-positive:0!important; flex-grow:0!important; }
.flex-grow-1{ -ms-flex-positive:1!important; flex-grow:1!important; }

.justify-content-start{ -ms-flex-pack:start!important; justify-content:flex-start!important; }
.justify-content-end{ -ms-flex-pack:end!important; justify-content:flex-end!important; }
.justify-content-center{ -ms-flex-pack:center!important; justify-content:center!important; }
.justify-content-between{ -ms-flex-pack:justify!important; justify-content:space-between!important; }

.align-items-start{ -ms-flex-align:start!important; align-items:flex-start!important; }
.align-items-end{ -ms-flex-align:end!important; align-items:flex-end!important; }
.align-items-center{ -ms-flex-align:center!important; align-items:center!important; }

.align-content-start{ -ms-flex-line-pack:start!important; align-content:flex-start!important; }
.align-content-end{ -ms-flex-line-pack:end!important; align-content:flex-end!important; }
.align-content-center{ -ms-flex-line-pack:center!important; align-content:center!important; }
.align-content-between{ -ms-flex-line-pack:justify!important; align-content:space-between!important; }

.align-self-auto{ -ms-flex-item-align:auto!important; -ms-grid-row-align:auto!important; align-self:auto!important; }
.align-self-start{ -ms-flex-item-align:start!important; align-self:flex-start!important; }
.align-self-end{ -ms-flex-item-align:end!important; align-self:flex-end!important; }
.align-self-center{ -ms-flex-item-align:center!important; -ms-grid-row-align:center!important; align-self:center!important; }

/* responsive flex utilities (kept) */
@media (min-width:576px){
  .flex-sm-row{ -ms-flex-direction:row!important; flex-direction:row!important; }
  .flex-sm-column{ -ms-flex-direction:column!important; flex-direction:column!important; }
  .flex-sm-wrap{ -ms-flex-wrap:wrap!important; flex-wrap:wrap!important; }
  .flex-sm-fill{ -ms-flex:1 1 auto!important; flex:1 1 auto!important; }
  .flex-sm-grow-0{ -ms-flex-positive:0!important; flex-grow:0!important; }
  .flex-sm-grow-1{ -ms-flex-positive:1!important; flex-grow:1!important; }

  .justify-content-sm-start{ -ms-flex-pack:start!important; justify-content:flex-start!important; }
  .justify-content-sm-end{ -ms-flex-pack:end!important; justify-content:flex-end!important; }
  .justify-content-sm-center{ -ms-flex-pack:center!important; justify-content:center!important; }
  .justify-content-sm-between{ -ms-flex-pack:justify!important; justify-content:space-between!important; }

  .align-items-sm-start{ -ms-flex-align:start!important; align-items:flex-start!important; }
  .align-items-sm-end{ -ms-flex-align:end!important; align-items:flex-end!important; }
  .align-items-sm-center{ -ms-flex-align:center!important; align-items:center!important; }

  .align-content-sm-start{ -ms-flex-line-pack:start!important; align-content:flex-start!important; }
  .align-content-sm-end{ -ms-flex-line-pack:end!important; align-content:flex-end!important; }
  .align-content-sm-center{ -ms-flex-line-pack:center!important; align-content:center!important; }
  .align-content-sm-between{ -ms-flex-line-pack:justify!important; align-content:space-between!important; }

  .align-self-sm-auto{ -ms-flex-item-align:auto!important; -ms-grid-row-align:auto!important; align-self:auto!important; }
  .align-self-sm-start{ -ms-flex-item-align:start!important; align-self:flex-start!important; }
  .align-self-sm-end{ -ms-flex-item-align:end!important; align-self:flex-end!important; }
  .align-self-sm-center{ -ms-flex-item-align:center!important; -ms-grid-row-align:center!important; align-self:center!important; }
}
@media (min-width:768px){
  .flex-md-row{ -ms-flex-direction:row!important; flex-direction:row!important; }
  .flex-md-column{ -ms-flex-direction:column!important; flex-direction:column!important; }
  .flex-md-wrap{ -ms-flex-wrap:wrap!important; flex-wrap:wrap!important; }
  .flex-md-fill{ -ms-flex:1 1 auto!important; flex:1 1 auto!important; }
  .flex-md-grow-0{ -ms-flex-positive:0!important; flex-grow:0!important; }
  .flex-md-grow-1{ -ms-flex-positive:1!important; flex-grow:1!important; }

  .justify-content-md-start{ -ms-flex-pack:start!important; justify-content:flex-start!important; }
  .justify-content-md-end{ -ms-flex-pack:end!important; justify-content:flex-end!important; }
  .justify-content-md-center{ -ms-flex-pack:center!important; justify-content:center!important; }
  .justify-content-md-between{ -ms-flex-pack:justify!important; justify-content:space-between!important; }

  .align-items-md-start{ -ms-flex-align:start!important; align-items:flex-start!important; }
  .align-items-md-end{ -ms-flex-align:end!important; align-items:flex-end!important; }
  .align-items-md-center{ -ms-flex-align:center!important; align-items:center!important; }

  .align-content-md-start{ -ms-flex-line-pack:start!important; align-content:flex-start!important; }
  .align-content-md-end{ -ms-flex-line-pack:end!important; align-content:flex-end!important; }
  .align-content-md-center{ -ms-flex-line-pack:center!important; align-content:center!important; }
  .align-content-md-between{ -ms-flex-line-pack:justify!important; align-content:space-between!important; }

  .align-self-md-auto{ -ms-flex-item-align:auto!important; -ms-grid-row-align:auto!important; align-self:auto!important; }
  .align-self-md-start{ -ms-flex-item-align:start!important; align-self:flex-start!important; }
  .align-self-md-end{ -ms-flex-item-align:end!important; align-self:flex-end!important; }
  .align-self-md-center{ -ms-flex-item-align:center!important; -ms-grid-row-align:center!important; align-self:center!important; }
}
@media (min-width:992px){
  .flex-lg-row{ -ms-flex-direction:row!important; flex-direction:row!important; }
  .flex-lg-column{ -ms-flex-direction:column!important; flex-direction:column!important; }
  .flex-lg-wrap{ -ms-flex-wrap:wrap!important; flex-wrap:wrap!important; }
  .flex-lg-fill{ -ms-flex:1 1 auto!important; flex:1 1 auto!important; }
  .flex-lg-grow-0{ -ms-flex-positive:0!important; flex-grow:0!important; }
  .flex-lg-grow-1{ -ms-flex-positive:1!important; flex-grow:1!important; }

  .justify-content-lg-start{ -ms-flex-pack:start!important; justify-content:flex-start!important; }
  .justify-content-lg-end{ -ms-flex-pack:end!important; justify-content:flex-end!important; }
  .justify-content-lg-center{ -ms-flex-pack:center!important; justify-content:center!important; }
  .justify-content-lg-between{ -ms-flex-pack:justify!important; justify-content:space-between!important; }

  .align-items-lg-start{ -ms-flex-align:start!important; align-items:flex-start!important; }
  .align-items-lg-end{ -ms-flex-align:end!important; align-items:flex-end!important; }
  .align-items-lg-center{ -ms-flex-align:center!important; align-items:center!important; }

  .align-content-lg-start{ -ms-flex-line-pack:start!important; align-content:flex-start!important; }
  .align-content-lg-end{ -ms-flex-line-pack:end!important; align-content:flex-end!important; }
  .align-content-lg-center{ -ms-flex-line-pack:center!important; align-content:center!important; }
  .align-content-lg-between{ -ms-flex-line-pack:justify!important; align-content:space-between!important; }

  .align-self-lg-auto{ -ms-flex-item-align:auto!important; -ms-grid-row-align:auto!important; align-self:auto!important; }
  .align-self-lg-start{ -ms-flex-item-align:start!important; align-self:flex-start!important; }
  .align-self-lg-end{ -ms-flex-item-align:end!important; align-self:flex-end!important; }
  .align-self-lg-center{ -ms-flex-item-align:center!important; -ms-grid-row-align:center!important; align-self:center!important; }
}

/* ================================
   3) Floats / Overflow / Position
   ================================ */
.float-left{ float:left!important; }
.float-right{ float:right!important; }
.float-none{ float:none!important; }

@media (min-width:576px){ .float-sm-left{float:left!important;} .float-sm-right{float:right!important;} .float-sm-none{float:none!important;} }
@media (min-width:768px){ .float-md-left{float:left!important;} .float-md-right{float:right!important;} .float-md-none{float:none!important;} }
@media (min-width:992px){ .float-lg-left{float:left!important;} .float-lg-right{float:right!important;} .float-lg-none{float:none!important;} }

.overflow-auto{ overflow:auto!important; }
.overflow-hidden{ overflow:hidden!important; }

.position-static{ position:static!important; }
.position-relative{ position:relative!important; }
.position-absolute{ position:absolute!important; }
.position-fixed{ position:fixed!important; }
.position-sticky{ position:-webkit-sticky!important; position:sticky!important; }

.fixed-top{ position:fixed; top:0; right:0; left:0; z-index:1030; }
.fixed-bottom{ position:fixed; right:0; bottom:0; left:0; z-index:1030; }

@supports ((position:-webkit-sticky) or (position:sticky)){
  .sticky-top{ position:-webkit-sticky; position:sticky; top:0; z-index:1020; }
}

/* a11y helper */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ================================
   4) Shadows / Sizing
   ================================ */
.shadow-sm{ box-shadow:0 .125rem .25rem rgba(33,47,54,.075)!important; }
.shadow{ box-shadow:0 .5rem 1rem rgba(33,47,54,.15)!important; }
.shadow-lg{ box-shadow:0 1rem 3rem rgba(33,47,54,.175)!important; }
.shadow-none{ box-shadow:none!important; }

.w-25{ width:25%!important; }
.w-50{ width:50%!important; }
.w-75{ width:75%!important; }
.w-100{ width:100%!important; }
.w-auto{ width:auto!important; }

.h-25{ height:25%!important; }
.h-50{ height:50%!important; }
.h-75{ height:75%!important; }
.h-100{ height:100%!important; }
.h-auto{ height:auto!important; }

.min-vw-100{ min-width:100vw!important; }
.vw-100{ width:100vw!important; }

/* ================================
   5) Spacing utilities (0–5) — SINGLE SOURCE
   ================================ */
/* margin */
.m-0{ margin:0!important; } .m-1{ margin:.25rem!important; } .m-2{ margin:.5rem!important; } .m-3{ margin:1rem!important; } .m-4{ margin:1.5rem!important; } .m-5{ margin:3rem!important; }
.mt-0{ margin-top:0!important; } .mt-1{ margin-top:.25rem!important; } .mt-2{ margin-top:.5rem!important; } .mt-3{ margin-top:1rem!important; } .mt-4{ margin-top:1.5rem!important; } .mt-5{ margin-top:3rem!important; }
.mb-0{ margin-bottom:0!important; } .mb-1{ margin-bottom:.25rem!important; } .mb-2{ margin-bottom:.5rem!important; } .mb-3{ margin-bottom:1rem!important; } .mb-4{ margin-bottom:1.5rem!important; } .mb-5{ margin-bottom:3rem!important; }
.ml-0{ margin-left:0!important; } .ml-1{ margin-left:.25rem!important; } .ml-2{ margin-left:.5rem!important; } .ml-3{ margin-left:1rem!important; } .ml-4{ margin-left:1.5rem!important; } .ml-5{ margin-left:3rem!important; }
.mr-0{ margin-right:0!important; } .mr-1{ margin-right:.25rem!important; } .mr-2{ margin-right:.5rem!important; } .mr-3{ margin-right:1rem!important; } .mr-4{ margin-right:1.5rem!important; } .mr-5{ margin-right:3rem!important; }
/* padding */
.p-0{ padding:0!important; } .p-1{ padding:.65rem!important; } .p-2{ padding:.5rem!important; } .p-3{ padding:1rem!important; } .p-4{ padding:1.5rem!important; } .p-5{ padding:3rem!important; }
.pt-0{ padding-top:0!important; } .pt-1{ padding-top:.65rem!important; } .pt-2{ padding-top:.5rem!important; } .pt-3{ padding-top:1rem!important; } .pt-4{ padding-top:1.5rem!important; } .pt-5{ padding-top:3rem!important; }
.pb-0{ padding-bottom:0!important; } .pb-1{ padding-bottom:.65rem!important; } .pb-2{ padding-bottom:.5rem!important; } .pb-3{ padding-bottom:1rem!important; } .pb-4{ padding-bottom:1.5rem!important; } .pb-5{ padding-bottom:3rem!important; }
.pl-0{ padding-left:0!important; } .pl-1{ padding-left:.65rem!important; } .pl-2{ padding-left:.5rem!important; } .pl-3{ padding-left:1rem!important; } .pl-4{ padding-left:1.5rem!important; } .pl-5{ padding-left:3rem!important; }
.pr-0{ padding-right:0!important; } .pr-1{ padding-right:.65rem!important; } .pr-2{ padding-right:.5rem!important; } .pr-3{ padding-right:1rem!important; } .pr-4{ padding-right:1.5rem!important; } .pr-5{ padding-right:3rem!important; }

/* ================================
   6) Color + Borders (DNOW tokens)
   ================================ */
.bg-white{ background-color:#fff!important; }

.border{ border:1px solid var(--lightest-gray)!important; }
.border-top{ border-top:1px solid var(--lightest-gray)!important; }
.border-right{ border-right:1px solid var(--lightest-gray)!important; }
.border-bottom{ border-bottom:1px solid var(--lightest-gray)!important; }
.border-left{ border-left:1px solid var(--lightest-gray)!important; }

.border-0{ border:0!important; }
.border-top-0{ border-top:0!important; }
.border-right-0{ border-right:0!important; }
.border-bottom-0{ border-bottom:0!important; }
.border-left-0{ border-left:0!important; }

.border-primary{ border-color:var(--highlight-red)!important; }
.border-secondary{ border-color:var(--metal-gray)!important; }
/* NOTE: border-info previously referenced --color-submenu; removed to avoid undefined token. Add back if you define it. */
.border-light{ border-color:var(--lightest-gray)!important; }
.border-white{ border-color:#fff!important; }

/* Radius */
.rounded-sm,
.rounded,
.rounded-lg{ border-radius:.125rem!important; }

.rounded-top{ border-top-left-radius:.125rem!important; border-top-right-radius:.125rem!important; }
.rounded-right{ border-top-right-radius:.125rem!important; border-bottom-right-radius:.125rem!important; }
.rounded-bottom{ border-bottom-right-radius:.125rem!important; border-bottom-left-radius:.125rem!important; }
.rounded-left{ border-top-left-radius:.125rem!important; border-bottom-left-radius:.125rem!important; }

.rounded-circle{ border-radius:50%!important; }
.rounded-0{ border-radius:0!important; }

/* ================================
   7) Display utilities
   ================================ */
.d-none{ display:none!important; }
.d-inline{ display:inline!important; }
.d-inline-block{ display:inline-block!important; }
.d-block{ display:block!important; }
.d-table{ display:table!important; }
.d-table-row{ display:table-row!important; }
.d-table-cell{ display:table-cell!important; }
.d-flex{ display:-ms-flexbox!important; display:flex!important; }
.d-inline-flex{ display:-ms-inline-flexbox!important; display:inline-flex!important; }

@media (min-width:576px){
  .d-sm-none{ display:none!important; }
  .d-sm-inline{ display:inline!important; }
  .d-sm-inline-block{ display:inline-block!important; }
  .d-sm-block{ display:block!important; }
  .d-sm-table{ display:table!important; }
  .d-sm-table-row{ display:table-row!important; }
  .d-sm-table-cell{ display:table-cell!important; }
  .d-sm-flex{ display:-ms-flexbox!important; display:flex!important; }
  .d-sm-inline-flex{ display:-ms-inline-flexbox!important; display:inline-flex!important; }
}
@media (min-width:768px){
  .d-md-none{ display:none!important; }
  .d-md-inline{ display:inline!important; }
  .d-md-inline-block{ display:inline-block!important; }
  .d-md-block{ display:block!important; }
  .d-md-table{ display:table!important; }
  .d-md-table-row{ display:table-row!important; }
  .d-md-table-cell{ display:table-cell!important; }
  .d-md-flex{ display:-ms-flexbox!important; display:flex!important; }
  .d-md-inline-flex{ display:-ms-inline-flexbox!important; display:inline-flex!important; }
}
@media (min-width:992px){
  .d-lg-none{ display:none!important; }
  .d-lg-inline{ display:inline!important; }
  .d-lg-inline-block{ display:inline-block!important; }
  .d-lg-block{ display:block!important; }
  .d-lg-table{ display:table!important; }
  .d-lg-table-row{ display:table-row!important; }
  .d-lg-table-cell{ display:table-cell!important; }
  .d-lg-flex{ display:-ms-flexbox!important; display:flex!important; }
  .d-lg-inline-flex{ display:-ms-inline-flexbox!important; display:inline-flex!important; }
}

/* Text utilities */
.text-white{ color:#fff!important; }

/* ========================================================================== */
/*  HubL Theme Bindings (_modules) — Tokenized
   ========================================================================== */

/* Icons */
body .icon svg{ fill:var(--highlight-red); }

/* Tiny-slider (tns) nav */
body .tns-nav button.tns-nav-active{ background-color:var(--highlight-red); }
body .tns-nav button:hover,
body .tns-nav button:focus{ background-color:var(--highlight-red); }

/* Social icon pills */
body .social-links__icon{ background-color:var(--highlight-red); }
body .social-links__icon svg{ fill:#fff; }
body .social-links__icon:hover svg,
body .social-links__icon:focus svg{ fill:var(--medium-red); }
body .social-links__icon:active svg{ fill:var(--dark-red); }

/* Team member description background */
body .team-member__description{
  background-color:var(--lightest-gray);
  color:var(--dark-gray);
  font-family:'Poppins', sans-serif;
}

/* Page center stays theme-controlled */
.page-center{
  max-width: 1400px;
  margin:0 auto;
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your headers look
when it comes to the logo, search field, language switcher and navigation.
You will also find the mobile menu styles below.
****************************************************************************** */

/* ================================
   Header shell
   ================================ */
.header-group{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  transition: background .25s ease-in-out;
  background-color: #fff;
}

.header-shadow{
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,.12);
}

/* ================================
   Navbar layout
   ================================ */
.navbar{
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .5rem 1rem;
}

nav#dnow-nav .navbar-inner{
  position: relative;
}

.logo-wrap img{
  padding-top: .8rem;
  padding-bottom: .8rem;
  max-width: 150px;
}

/* ================================
   Search
   ================================ */
.nav-search form{
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

.nav-search form .hs-search-field__input{
  display: block;
  margin: 0;
  margin-bottom: 0;
  width: 1%;
  min-height: 1px;
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;

  padding: .375rem .75rem;
  padding-left: 2.441rem;

  font-family: inherit;
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.6;

  color: var(--metal-gray);
  background: #fff;
  background-clip: padding-box;

  border-width: 1px;
  border-style: solid;
  border-color: var(--lightest-gray);

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.nav-search form .hs-search-field__input:focus{
  outline: 0;
  border-color: var(--highlight-red);
  box-shadow: var(--focus-ring);
  background-color: #fff;
}

.nav-search form button.search-submit{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;

  display: inline-block;
  margin: 0;

  font-family: inherit;
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;

  padding: .375rem .75rem;
  border-radius: .125rem;

  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  color: var(--highlight-red);

  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.nav-search form button.search-submit:hover{
  background-color: transparent;
  color: var(--medium-red);
}

/* ================================
   Header menu (desktop)
   ================================ */
.header-menu{
  margin-left: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  position: static;
}

.header-menu ul{
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  margin-left: auto;
}

.header-menu ul li{
  padding: 0;
  text-transform: none;
  display: inline-block;
}

.header-menu ul li a{
  text-decoration: none;
  display: block;
  padding: .5rem 1rem;
  font-size: .8rem;
}

.header-menu ul li:last-child a{
  padding-right: 0;
}

@media (max-width:1200px) and (min-width:992px){
  .header-menu ul li a{ padding: .5rem; }
}

.header__container{
  max-width: 1400px;
}

body .custom-menu-primary a,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a,
.header-menu ul li a{
  color: rgba(30, 30, 30, 1.0);
}

body .custom-menu-primary .submenu.level-1 > li > a:hover,
body .custom-menu-primary .submenu.level-1 > li > a:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus,
.header-menu ul li a:hover,
.header-menu ul li a:focus{
  color: rgba(250, 0, 0, 1.0);
}

body .custom-menu-primary a.active-branch,
body .header__language-switcher-label-current:active,
body .header__language-switcher .lang_list_class li a:active{
  color: rgba(30, 30, 30, 1.0);
}

body .custom-menu-primary .submenu.level-1 > li{
  background-color: #fff;
}

body .custom-menu-primary .submenu.level-1 > li.active-branch{
  background-color: rgba(0, 0, 0, 0.0);
}

body .custom-menu-primary .submenu.level-1 > li:hover,
body .custom-menu-primary .submenu.level-1 > li:focus{
  background-color: rgba(0, 0, 0, 0.0);
}

body .custom-menu-primary .submenu.level-1 > li > a.active-branch{
  color: rgba(30, 30, 30, 1.0);
  background-color: rgba(0, 0, 0, 0.0);
}

body .custom-menu-primary .submenu.level-1 > li > a.active-branch:hover{
  color: rgba(250, 0, 0, 1.0);
}

body .custom-menu-primary .submenu.level-1 > li > a.active-branch:after{
  background-color: rgba(30, 30, 30, 1.0);
}

body .custom-menu-primary .submenu.level-2{
  background-color: var(--color-submenu);
}

body .custom-menu-primary .submenu.level-2 > li > a{
  color: rgba(33, 47, 54, 1.0);
}

body .custom-menu-primary .submenu.level-2 .triangle-container .triangle{
  background-color: var(--color-submenu);
}

body .custom-menu-primary .submenu.level-2 .menu-item .menu-link:hover,
body .custom-menu-primary .submenu.level-2 .menu-item .menu-link:focus,
body .header__language-switcher .lang_list_class li:hover,
body .custom-menu-primary .submenu.level-2 .triangle-container.level-2.hover .triangle{
  background-color: rgba(0, 0, 0, 0.0);
  color: rgba(250, 0, 0, 1.0);
}

body .custom-menu-primary .submenu.level-2 .menu-item .menu-link.active-branch{
  color: rgba(33, 47, 54, 1.0);
  background-color: rgba(0, 0, 0, 0.0);
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a{
  font-family: Poppins, Arial, sans-serif;
}

.header__language-switcher-label-current:after{
  border-top-color: rgba(30, 30, 30, 1.0);
}

/* ================================
   Desktop breakpoint
   ================================ */
@media (min-width:992px){
  .navbar-expand-lg{
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  #mobile-nav{ display: none !important; }
}

/* ================================
   Mobile nav
   ================================ */
@media (max-width:991px){
  .logo-wrap img{
    max-width: 90px;
    display: block;
  }

  .slide-menu{
    display: none;
    position: fixed;
    top: 0;
    width: 350px;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background: #eef2f4;
    transition: transform .3s ease-in-out;
    transform: translateX(110%);
    will-change: transform;
    z-index: 1001;
    box-shadow: -2px 1px 3px 1px rgba(0,0,0,.12);
  }

  .nav{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

  .slide-menu .slider{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform .3s ease-in-out;
    transform: translateX(0);
    will-change: transform;
  }

  .slide-menu ul{
    padding-left: 0;
    list-style: none;
    position: relative;
    width: 350px;
    max-width: 100%;
    margin: 0;
    background-color: #fff;
    height: 100vh;
    display: block;
  }

  .slide-menu li{
    border-bottom: 1px solid var(--lightest-gray);
    width: 100%;
  }

  .slide-menu a{
    display: block;
    padding: 12px 24px;
    color: #212f36;
    text-decoration: none;
  }

  .slide-menu a:hover{ color: var(--highlight-red); }

  .slide-menu .next-control{
    cursor: pointer;
    overflow: hidden;
    float: right;
  }

  a:not([href]):not([tabindex]){
    color: inherit;
    text-decoration: none;
  }

  .slide-menu ul ul{
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    background-color: #eef2f4;
  }

  .slide-menu .back-control{
    background-color: #fff;
    text-align: center;
  }

  .slide-menu .back-control i{
    float: left;
    padding-right: 5px;
  }

  .slide-menu ul ul li:not(.back-control){ padding: .2rem 0; }

  #overlay{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 1000;
    cursor: pointer;
  }

  .slide-menu ul li.hs-menu-depth-1 > a{ background: #fff; }

  .slide-menu .next-control ~ .slide-menu .next-control{
    display: none !important;
  }

  .slide-menu .back-control:not(:first-child),
  .slide-menu .next-control:not(:first-child){
    display: none;
  }

  .mobile-open .slide-menu{
    transform: translateX(0) !important;
  }
}

/* ================================
   Small screen header coloring
   ================================ */
@media (max-width: 767px){
  .header__navigation{
    background-color: rgba(255, 255, 255, 1.0);
  }

  .header__navigation-toggle svg,
  .menu-arrow svg{
    fill: rgba(30, 30, 30, 1.0);
  }
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your
footer looks when it comes to spacing and other general styles.
****************************************************************************** */

//* ================================
   Accessibility: Skip Link
   ================================ */
.skip-link{
  position:absolute;
  top:-40px;
  left:0;
  background:var(--highlight-red);
  color:#fff;
  padding:10px;
  z-index:100;
  font-weight:700;
}
.skip-link:focus{ top:10px; }

/* ================================
   Footer base
   ================================ */
.footer{
  background-color:var(--dark-metal);
  display:flex;
  flex-direction:column;
  padding:80px 0 0;
  color:#fff;
}

/* ================================
   Layout: content area
   ================================ */
.footer-content{
  align-self:center;
  display:flex;
  justify-content:space-between;
  width:100%;
  max-width:95%;
  gap:20px;
  margin:20px 0;
}

@media (max-width:991px){
  .footer-content{
    max-width:100%;
    flex-wrap:wrap;
  }
}

/* ================================
   Company info block
   ================================ */
.company-info{
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  font-size: 0.7333rem;
  color:var(--lightest-gray);
  font-weight:600;
  line-height:23px;
  padding:0 20px;
}

/* Anchor wrapper for logo */
.company-info .logo{
  display:inline-flex;
  align-items:center;
  width:133px;
  padding-bottom:20px;
  text-decoration:none;
}

/* SVG inside the logo link */
.company-info .logo svg{
  width:133px;
  height:auto;
  display:block;
}

/* ================================
   Column titles
   ================================ */
.column-title{
  color:var(--lightest-gray) !important;
  font-size:1rem;
  font-style:normal;
  font-weight:600;
  line-height:23px;
}

/* ================================
   Link columns
   ================================ */
.footer-links{
  display:flex;
  flex-direction:row;
  align-self:flex-start;
}

.company-links-column{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-self:flex-start;
  padding-right:40px;
}

.regional-links-column{
  display:flex;
  flex-direction:column;
  line-height:normal;
  margin-left:auto;
  align-self:flex-start;
  padding-left:40px;
}

@media (max-width:991px){
  .regional-links-column{ width:100%; }
}

/* Nav containers */
.main-links{
  display:flex;
  flex-direction:column;
  font-size:18px;
  color:#fff;
  font-weight:400;
  letter-spacing:.54px;
  line-height:144%;
  padding-left:20px;
}

.secondary-links{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  font-size: 0.6875rem;
  font-style:normal;
  font-weight:600;
  line-height:18px;
  margin:auto 0;
  padding:0 20px;
  color:var(--light-gray);
}

/* ================================
   Links (AA-safe)
   - Default underline so links are not "color-only" (WCAG 1.4.1)
   - Hover/Focus also change color, but underline remains the non-color cue
   ================================ */
.footer a.link{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:currentColor;
  margin-top:9px;
}

.footer a.link:first-child{ margin-top:0; }

.footer a.link:hover{
  color:var(--highlight-red);
  text-decoration-thickness:2px;
}

.footer a.link:active{
  color:var(--dark-red);
}

/* ================================
   Focus visible (AA-safe) (WCAG 2.4.7)
   ================================ */
.footer a.link:focus-visible,
.company-info .logo:focus-visible,
.social-icons a:focus-visible{
  outline:2px solid var(--highlight-red);
  outline-offset:3px;
  border-radius:4px;
}

/* ================================
   Footer bottom bar
   ================================ */
.footer-bottom{
  border-top:1px solid rgba(61,71,68,1);
  border-bottom:1px solid rgba(61,71,68,1);
  background-color:var(--dark-metal);
  display:flex;
  gap:20px;
  font-weight:400;
  justify-content:space-between;
  padding:25px 60px;
  margin-top:27px;
}

@media (max-width:991px){
  .footer-bottom{
    max-width:100%;
    flex-wrap:wrap;
    padding:20px;
  }
}

/* ================================
   Social icons
   ================================ */
.social-icons{
  display:flex;
  gap:25px;
  white-space:nowrap;
  text-align:center;
  justify-content:flex-start;
}

.social-icons a{
  padding:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.social-icons a svg{
  width:25px;
  height:auto;
  display:block;
  fill:#fff;
  transition:fill .3s ease-in-out;
}

.social-icons a:hover svg{
  fill:var(--highlight-red);
}

.social-icons a:active svg{
  fill:var(--dark-red);
}

/* Keyboard parity: show the same affordance on focus */
.social-icons a:focus-visible svg{
  fill:var(--highlight-red);
}

/* ================================
   Legal / copyright row
   ================================ */
.legal{
  display:flex;
  gap:10px;
  font-size:12px;
  color:var(--lightest-gray);
  line-height:133%;
  margin:auto 0;
}

.separator{ padding:0 5px; }

.copyright{
  flex-grow:1;
  flex-basis:auto;
  font-size:12px;
  color:var(--lightest-gray);
  line-height:133%;
}

/* ================================
   Mobile footer refinements
   ================================ */
@media (max-width: 767px){

  .footer{ padding:56px 0 0; }

  .footer-content{
    flex-direction:column;
    align-items:stretch;
    max-width:100%;
    gap:28px;
    margin:16px 0 20px;
  }

  .company-info{ padding:0 20px; }

  .footer-links{
    flex-direction:column;
    gap:28px;
  }

  /* Tap comfort */
  .footer a.link{
    padding:4px 0;
    display:inline-block;
  }

  .company-links-column{ padding-right:0; }

  .regional-links-column{
    margin-left:0;
    padding-left:0;
    width:100%;
  }

  .main-links,
  .secondary-links{
    padding-left:20px;
    padding-right:20px;
  }

  .main-links{
    font-size:16px;
    letter-spacing:.3px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding:18px 20px;
  }

  .social-icons{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .legal{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* Hide the standalone separator between legal-links and copyright */
  .legal > .separator{ display:none; }

  .legal-links .separator{ padding:0 6px; }

  .copyright{ width:100%; }
}

/* ================================
   Reduced motion
   ================================ */
@media (prefers-reduced-motion: reduce){
  .footer a.link,
  .social-icons a svg{
    transition:none !important;
  }
}
/* ******************************************************************************
This file contains all the neccessary styles for your blog. The styles included
are for the listing and post templates, featured images and pagination.
Also for the post meta infromation like tags, author and published date
****************************************************************************** */

/* ================================
   0) Blog-local tokens (safe fallbacks)
   ================================ */
:root{
  --blog-bg-light: #eef2f4; /* keep as-is unless you want it tokenized */
  --blog-link: var(--highlight-red);
  --blog-link-hover: var(--medium-red);
  --blog-link-active: var(--dark-red);
  --blog-border: rgba(61, 71, 68, 0.25); /* derived from --metal-gray */
  --blog-card-border: var(--light-gray, #c8c8c8);
  --blog-text: var(--dark-gray);
}

/* ================================
   1) Utilities / Layout
   ================================ */
.bg-light { background-color: var(--blog-bg-light) !important; }

.pt-8, .py-8 { padding-top: 3.052rem !important; }
.pb-8, .py-8 { padding-bottom: 3.052rem !important; }

.fs-1 { font-size: 0.8rem !important; }

/* Match global typography */
.heading-font,
.body-font {
  font-family: 'Poppins', sans-serif !important;
}

/* Normalize blog wrapper typography (optional but consistent) */
.blog-main-wrap,
.blog-main-wrap.post {
  font-family: 'Poppins', sans-serif;
  color: var(--blog-text);
}

/* ================================
   2) Cards / Grid
   ================================ */
.blog-main-wrap .card{
  position:relative;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  min-width:0;
  word-wrap:break-word;
  background-color:#fff;
  background-clip:border-box;
  border:1px solid var(--blog-border);
  border-radius:.125rem;
}

#grid-container .card {
  height: 100%;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.07);
  border: 1px solid var(--blog-card-border);
}

.blog-main-wrap .card-body{
  -ms-flex:1 1 auto;
  flex:1 1 auto;
  color:var(--metal-gray);
}

/* ================================
   3) Blog Post Wrapper / Body
   ================================ */
.blog-main-wrap.post .page-center {
  margin-top: 2.441rem !important;
  margin-bottom: 0.025rem !important;
}

.blog-post__body {
  padding-top: 1.052rem !important;
  padding-bottom: 3.052rem !important;
}

.blog-post__body p {
  word-break: break-word;
}

.blog-main-wrap.post img {
  height: auto !important;
}

/* Tables inside post (base) */
.blog-main-wrap.post table td,
.blog-main-wrap.post table th {
  border: 0;
}

/* ================================
   4) Links (Blog-specific overrides)
   - Keeps global anchor styling, but ensures grid + pagination match DNOW tokens
   ================================ */
#grid-container a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

#grid-container a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

#grid-container .grid-items-wrapper a:hover {
  text-decoration: none;
  color: var(--blog-link-hover);
}

/* ================================
   5) Pagination (Bootstrap-like)
   ================================ */
.pagination {
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.125rem;
}

.pagination li.page-item { list-style: none; }

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  line-height: 1.25;
  color: var(--blog-link);
  background-color: transparent;
}

.page-link:hover {
  z-index: 2;
  color: var(--blog-link-hover);
  text-decoration: none;
  background-color: var(--blog-bg-light);
  border-color: var(--lightest-gray);
}

.page-link:focus-visible {
  z-index: 2;
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.125rem;
  border-bottom-left-radius: 0.125rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: var(--blog-link);
  border-color: var(--blog-link);
}

.page-link:active {
  color: var(--blog-link-active);
}

.blog-pagination.pagination {
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
  align-items: center;
}

/* ================================
   6) Misc
   ================================ */
span.font-weight-bold { font-weight: 700; } /* keep for legacy markup */

/* ================================
   7) Responsive
   ================================ */
@media (min-width: 500px) {
  .blog-post__body-content .container {
    padding-left: 54.932px;
    padding-right: 54.932px;
  }
}

@media (min-width: 768px) {
  .blog-main-wrap.post table img { max-width: inherit; }
}

@media (min-width: 1400px) {
  .blog-post__body-content .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 767px) {
  .blog-post__body .row { display: block; }
  .blog-post__body p { padding-right: 0 !important; }
}

@media (max-width: 575px) {
  .blog-pagination.pagination {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 479px) {
  .blog-main-wrap.post table {
    width: 100% !important;
    display: block !important;
  }

  .blog-main-wrap.post table td,
  .blog-main-wrap.post table th {
    width: 100% !important;
    display: block !important;
    height: auto !important;
  }

  .blog-main-wrap.post table tr,
  .blog-main-wrap.post table tbody {
    display: block !important;
  }
}

@media (max-width: 411px) {
  .blog-main-wrap.post h1 { font-size: 2rem; }
}

/* ========================================================================== */
/*  HubL Theme Bindings (_blog) — updated to DNOW typography/colors            */
/* ========================================================================== */

/* Keep theme-controlled max width */
.content-wrapper {
  max-width: 1400px;
}

/* Date border uses DNOW metal gray instead of body_color */
.blog-post__date {
  border-color: var(--metal-gray);
}

/* Blog meta + links: use DNOW dark gray for text baseline */
.blog-tag-filter__menu-link,
.blog-post__tag-link,
.blog-card__tag-link,
.blog-post__author-name,
.blog-card__title a {
  color: var(--dark-gray);
  font-family: 'Poppins', sans-serif;
}

/* Hover = medium red (DNOW) */
.blog-card__tag-link:hover,
.blog-card__title a:hover,
.blog-tag-filter__menu-link:hover,
.blog-post__tag-link:hover,
.blog-post__author-name:hover,
.blog-card__tag-link:focus,
.blog-card__title a:focus,
.blog-tag-filter__menu-link:focus,
.blog-post__tag-link:focus,
.blog-post__author-name:focus {
  color: var(--medium-red);
}

/* Active = dark red (DNOW) */
.blog-card__tag-link:active,
.blog-card__title a:active,
.blog-tag-filter__menu-link:active,
.blog-post__tag-link:active,
.blog-post__author-name:active {
  color: var(--dark-red);
}

/* Active filter indicator = highlight red */
.blog-tag-filter__menu-link--active-item:after {
  background-color: var(--highlight-red);
}

/* Blog pagination links (if your template uses these classes) */
.blog-pagination__link {
  color: var(--highlight-red);
}

.blog-pagination__link--active:after,
.blog-pagination__prev-link:after,
.blog-pagination__next-link:after {
  background-color: var(--highlight-red);
}

/* Post title: use Poppins and your global H2 weight conventions */
.blog-post__title{
  color:var(--dark-gray);
  font-family:'Poppins', sans-serif;
  font-size:clamp(1.5rem, 1.3rem + 1.2vw, 2rem);
  font-weight:400;
  line-height:1.25;
}

/* Author block background: use lightest gray to match DNOW neutrals */
.blog-post__author {
  background-color: var(--lightest-gray);
}

/* Comments reply-to: switch from theme.typography.* to DNOW tokens */
#comments-listing .comment-reply-to {
  color: var(--highlight-red);
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: var(--medium-red);
}

#comments-listing .comment-reply-to:active {
  color: var(--dark-red);
}

#comments-listing .comment-reply-to:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}
/* ******************************************************************************
This file contains all the neccessary styles to control how your landing pages
look if there is anything specific to your landing pages.
****************************************************************************** */
.body-container-wrapper{
    padding-top:99px;
}
.banner-section .dnd-section>.row-fluid{
    padding:0;
}
.breadcrumb-wrapper .hs-breadcrumb-menu:after,.breadcrumb-wrapper .hs-breadcrumb-menu:before{
    content:"";
    display:table;
    clear:both;
}
.breadcrumb-wrapper .hs-breadcrumb-menu-item{
    padding:0;
    color:#6c757d;
}
.breadcrumb-wrapper .hs-breadcrumb-menu{
    margin:1rem 0;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding:.75rem 0;
    border-radius:.125rem;
}
.breadcrumb-wrapper .hs-breadcrumb-menu-item+.hs-breadcrumb-menu-item{
    padding-left:.5rem;
}
.breadcrumb-wrapper .hs-breadcrumb-menu-item+.hs-breadcrumb-menu-item:before{
    content:"";
    color:#535a5a;
    display:inline-block;
    font-family:Ionicons;
    speak:none;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    text-rendering:auto;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding-left:4.5px;
    padding-right:14px;
}
.breadcrumb-wrapper span.hs-breadcrumb-menu-divider{
    display:none;
}
.btn{
  display:inline-block;
  font-weight:400;
  text-align:center;
  vertical-align:middle;
  user-select:none;
  background-color:transparent;
  border:1px solid transparent;
  padding:.375rem .75rem;
  font-size:1rem;
  line-height:1.6;
  border-radius:.125rem;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  cursor:pointer;
  color:var(--dark-gray);
}

.btn-primary{
  color:#fff;
  background-color:var(--highlight-red);
  border-color:var(--highlight-red);
}

.btn-primary:hover{
  color:#fff;
  background-color:var(--medium-red);
  border-color:var(--medium-red);
}

.btn-primary:active{
  background-color:var(--dark-red);
  border-color:var(--dark-red);
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}
.btn-outline-primary{
    color:#b42127;
    border-color:#b42127;
}
.btn-outline-primary:hover{
    color:#fff;
    background-color:#a91f25;
    border-color:#a91f25;
}
.btn-block{
    display:block;
    width:100%;
}
.btn-info {
    color: #fff!important;
    background-color: #17a2b8!important;
    border-color: #17a2b8!important;
}
.btn-info:hover{
  color:#fff;
  background-color:#138496!important;
  border-color:#117a8b!important;
}
/* btn Types Text with Arrow Icon*/
.brand-cta {
  display: inline-block;
}

/* Apply flex to anchor instead */
.brand-cta a {
  display: inline-flex;
  align-items: center;          /* vertical alignment */
  gap: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--highlight-red);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

/* SVG sizing + alignment */
.brand-cta a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform .2s ease;
}

/* Hover + focus */
.brand-cta a:hover,
.brand-cta a:focus-visible {
  border-color: var(--highlight-red);
}

/* Arrow animation */
.brand-cta a:hover svg {
  transform: translateX(3px);
}

/* Active state */
.brand-cta a:active {
  color: var(--medium-red);
}
.small-arrow a:hover .ion-ios-arrow-thin-right {
  transition: transform .3s ease-in-out 0s;
  transform: translateX(8px) translateY(0) translateZ(0) scaleX(1.25) scaleY(1.25) scaleZ(1);
}
.small-arrow a .ion-ios-arrow-thin-right {
  top: 8px;
}
.small-arrow a .ion-ios-arrow-thin-right {
  position: relative;
  top: 4px;
  display: inline-block;
  font-family: Ionicons,sans-serif;
  font-size: 150%;
  transition: transform .3s ease-in-out 0s;
  line-height: 0;
}
.card{
  background-color:#fff;
  border-top:3px solid var(--dark-red);
  box-shadow:0 2px 20px 0 rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  padding:24px;
  transform:scale(1);
  transition:transform .3s ease-in-out, box-shadow .3s ease-in-out;
  word-break:break-word;
}
.card:hover{
  box-shadow:0 2px 25px 0 rgba(0,0,0,.15);
  transform:scale(1.02);
}
.card-title {
    margin-bottom: .75rem;
  color: var(--metal-gray);
}
.card__title{
  display:flex;
  align-items:center;
  padding-bottom:10px;
}
.card__text{
  display:flex;
  flex:1 1 auto;
  line-height:1.5;
  padding:25px 0;
  color:var(--metal-gray);
}
.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}
.card-body{
  color: var(--metal-gray);
}
.img-fluid{
    max-width:100%;
    height:auto;
}
.table{
    width:100%;
    margin-bottom:1rem;
    color:#212f36;
}
.table td,
.table th{
  padding:.75rem;
  vertical-align:top;
  border-top:1px solid #d0dada!important;
}
.website-page .widget-type-section_header{
    margin-top:2.441rem;
}
.website-page .widget-type-section_header p{
    margin:0;
}
.website-page .body-container{
    padding-bottom:3.052rem;
}

.study-detail-container{
    padding-bottom:3.052rem;
}

.cst-approved-by-grp .title p:empty{
    display:none;
}
.banner-section .dnd-section>.row-fluid{
    max-width:none;
}
.text-right{
    text-align:right;
}
.dura-products-page .dnow-img-gallary .slick-slide img,.odessa-pumps .dnow-img-gallary .slick-slide img{
    width:100%!important;
}
.breadcrumb-wrapper ul:empty{
    margin:0;
}
@media (min-width:500px){
    .tvs-customer-section .dnd-section .widget-type-cell .homepage .cst-title-col-grp{
        padding-left:54.932px;
        padding-right:54.932px;
    }
}
@media (min-width:576px){
    .tvs-customer-section .dnd-section .widget-type-cell{
        max-width:767.9999999979999px;
    }
}
@media (min-width:768px){
    .tvs-customer-section .dnd-section .widget-type-cell{
        max-width:991.999999998px;
    }
    .homepage .cst-title-col-grp {
      max-width: 992px;
      margin-left: auto;
      margin-right: auto;
    }
    .downstream-grp .hs_cos_wrapper_type_rich_text,.offshore-catalog-grp .full-col-content-wrapper .col-md-12{
        -ms-flex:0 0 66.66667%;
        flex:0 0 66.66667%;
        max-width:66.66667%;
    }
    .odessa-pumps #grid-container .col-md-4{
        -ms-flex:0 0 33.33333%;
        flex:0 0 33.33333%;
        max-width:33.33333%;
    }
}
@media (min-width: 992px){
  .homepage .cst-title-col-grp {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .homepage-header.fixed .nav-search form .hs-search-field__input {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
  }

  .homepage-header.fixed .nav-search form button.search-submit, 
  .homepage-header.fixed .nav-search form button.search-submit:hover, 
  .homepage-header.fixed .custom-menu-primary ul.submenu.level-1>li>a, 
  .homepage-header.fixed .custom-menu-primary ul.submenu.level-1>li>a:hover {
    color: #fff;
  }

  .homepage-header.fixed .nav-search form input::-webkit-input-placeholder {
    color: #fff;
    opacity: .8;
  }

  .homepage-header.fixed .header-menu ul li a, 
  .homepage-header.fixed .header-menu ul li a:hover {
    color: #fff;
  }

  .homepage-header.fixed .custom-menu-primary {
    padding-top: 0px;
  }

  .homepage-header.fixed #main-nav>div {
    padding-bottom: 13px;
  }

  .homepage-header.fixed .nav-search form .hs-search-field__input:focus {
    background-color: transparent;
  }

  .homepage-header.fixed #main-nav>div.custom-menu-primary {
    padding: 0;
  }

  @-moz-document url-prefix() {
    .custom-menu-primary .navigation-primary {
      margin-bottom: 5px;
    }

    .homepage-header.fixed #main-nav > div {
      padding-bottom: 0;
    }
  }
}



@media (min-width: 1200px){
  .homepage .cst-title-col-grp {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width:1400px){
    .tvs-customer-section .dnd-section .widget-type-cell .homepage .cst-title-col-grp{
        padding-left:18px;
        padding-right:18px;
    }
}
.tvs-customer-section .dnd-section .widget-type-cell{
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-left:35.156px;
    padding-right:35.156px;
}
@media (max-width:1399px){
    .acquisitions-page .acquisitions-container .hs_cos_wrapper_type_rich_text,.acquisitions-page .cst-title-col-grp.my-10,.diversity-page .diversity-container .hs_cos_wrapper_type_rich_text{
        padding-left:54.932px;
        padding-right:54.932px;
    }
    .electrical-container .hs_cos_wrapper_type_rich_text{
        padding-left:109.932px;
        padding-right:109.932px;
    }
}
@media (max-width:1199px) and (min-width:992px){
    @-moz-document url-prefix(){
        .custom-menu-primary .navigation-primary{
            margin-bottom:8px;
        }
        .homepage-header.fixed #main-nav>div{
            padding-bottom:0;
        }
    }
}
@media (max-width:991px){
    .body-container-wrapper{
        padding-top:71px;
    }
    .breadcrumb-wrapper .hs-breadcrumb-menu-item+.hs-breadcrumb-menu-item:before{
        padding-right:12px;
    }
    .contact-content-wrapper .span6.widget-span:first-child{
        padding:0;
    }
    .contact-content-wrapper .span6.widget-span{
        width:100%;
    }
    .contact-content-wrapper .span6.widget-span .row-fluid [class*=span],.contact-content-wrapper .span6.widget-span:last-child{
        min-height:1px!important;
    }
    .product-service-page .product-slider-wrap .col-md-6{
        -ms-flex:0 0 100%;
        flex:0 0 100%;
        max-width:100%;
    }
    .location-content .span6.widget-span:first-child ul li a{
        min-height:25px;
    }
    @-moz-document url-prefix(){
        .homepage-header.fixed .slide-menu-control{
            margin-top:0!important;
        }
    }
    .acquisitions-page .banner p.my-2.my-md-4.mb-lg-8{
        padding-bottom:0;
    }
    .acquisitions-page .cst-right-col{
        margin-top:0;
    }
}
@media (max-width:767px){
    .region-page .hs_cos_wrapper_type_rich_text table tr td{
        height:auto!important;
        display:block;
        width:100%!important;
    }
    .location-content .dnd-section>.row-fluid{
        display:block;
    }
    .location-content .span6.widget-span{
        width:100%;
    }
    .sustainability-page .bottom-section .span6:last-child{
        margin-left:0;
    }
    .sustainability-page .bottom-section .span6{
        width:100%;
        margin-bottom:20px;
    }
    .procurement-page .top-sec .hs_cos_wrapper_type_rich_text{
        max-width:100%;
    }
    .card{
        margin:15px 0;
        width:auto;
    }
}
@media (max-width:575.98px){
    .table-responsive-sm{
        display:block;
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .contact-content-wrapper form .input{
        margin-right:0!important;
    }
    .contact-content-wrapper form .hs-form-field{
        width:100%!important;
        float:none!important;
    }
    .contact-content-wrapper form .hs-input{
        width:100%!important;
    }
}
@media (max-width:499px){
    .acquisitions-page .acquisitions-container .hs_cos_wrapper_type_rich_text,.acquisitions-page .cst-title-col-grp.my-10,.diversity-page .diversity-container .hs_cos_wrapper_type_rich_text,.electrical-container .hs_cos_wrapper_type_rich_text{
        padding-left:35.156px;
        padding-right:35.156px;
    }
}
@media (max-width:479px){
    .manufacturing-services-grp .hs_cos_wrapper_type_rich_text{
        column-count:auto;
    }
}
@media (max-width:411px){
    .website-page .widget-type-section_header h1{
        font-size:2rem;
    }
    .hiring-events-header .page-header.section-header h1{
        font-size:2rem;
    }
    .corporate-container h1{
        font-size:2rem;
    }
    .company-page .hs_cos_wrapper_type_rich_text h1,.sustainability-container h1{
        font-size:2rem;
    }
    .why-dnow-grp h1{
        font-size:2rem;
    }
    .pipe-valve-details .specifications-container table td{
        padding-left:10px!important;
        padding-right:10px!important;
        font-size:15px;
    }
}
/* ******************************************************************************
*********************************************************************************
This file contains all the neccessary styles to control how your
system pages look. These pages include the error pages (404 and 500),
password protected content and search listing results.
*********************************************************************************
****************************************************************************** */

.hs-search-field__suggestions {
  top: 100%;
  z-index: 1000;
  float: left;
  min-width: 160px;
  display: none;
  list-style: none;
  background-color: #fff;
  border: 1px solid #d0dada !important;
  background-clip: padding-box;
  box-shadow: rgba(0,0,0,.09) 0 1px 2px 1px;
  left: -100%;
  margin: 0;
  padding: .8rem 1.2rem !important;
  font-size: .8rem;
  position: absolute;
  z-index: 99999;
}
.hs-search-field--open .hs-search-field__suggestions {
  display: block;
}

.hs-search-field__suggestions #results-for {
  padding: .2rem .4rem !important;
  margin-bottom: .4rem !important;
  line-height: 1.563rem;
  border-bottom: 1px solid #d0dada;
  font-weight: normal !important;
}

.hs-search-field__suggestions #results-for:hover {
  outline: 0;
  color: #212f36;
  background-color: transparent;
}

.hs-search-field__suggestions li {
  padding: .2rem .4rem !important;
  line-height: 1.563rem;
  cursor: pointer;
  transition: background-color .1s ease,color 150ms ease;
  display: block;
}

.hs-search-field__suggestions li a {
  color: #212f36;
  text-decoration: none;
  display: block;
}

.hs-search-field__suggestions li:hover {
  outline: 0;
  color: #fff;
  background-color: #d4272e;
}

.hs-search-field__suggestions li a:hover {
  background-color: transparent;
  color: #fff;
}

.hs-search-field__suggestions li:hover a {
  color: #fff;
}

.error-page {
  padding: 10rem 0;
  text-align: center;
  position: relative;
}
.error-page:before {
  content: attr(data-error);
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ;
  font-size: 40vw;
  font-weight: bold;
  color: #F3F6F9;
  z-index: -1;
}

.query-input input {
  height: auto;
  display: block;
  padding: .375rem .75rem;
  font-weight: 400;
  line-height: 1.6;
  color: #535a5a;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d7dadb;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-size: 1.25rem;
  width: 100%;
}

.query-input .input-group-fixed-right {
  right: 15px;
  position: absolute;
  top: 0;
  z-index: 4;
}

.query-input .input-group-fixed-right button {
  color: #d4272e;
  background-color: transparent;
  border: 1px solid transparent;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  font-size: 1.25rem;
  line-height: 1.6;
  border-radius: .125rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  padding: .375rem .75rem;
}

.search-result-wrapper .hs-search-results {
  margin-top: .8rem;
}

.search-result-wrapper ul.hs-search-results__listing li {
  height: 100%;
  box-shadow: 0 1px 5px 1px rgba(0,0,0,.07);
  border: 1px solid #d7dadb;
  background-color: #fff;
  border-radius: .125rem;
  padding: 1.25rem;
}

.search-result-wrapper .hs-search-results__description {
  margin-top: .8rem;
  padding-top: 0;
  margin-bottom: 0;
}

.search-result-wrapper ul.hs-search-results__listing li a {
  font-family: inherit;
  margin: 0;
  color: #d4272e;
  font-size: inherit;
}

.search-result-wrapper ul.hs-search-results__listing li a:hover {
  color: #931b20;
}

.hs-search-results__pagination a {
  color: #d4272e !important;
  display: inline-block;
}

.hs_cos_wrapper_type_member_login .hs-form-field,
.hs_cos_wrapper_type_member_register .hs-form-field{
    margin-bottom: 10px;
}
@media screen and (min-width: 1100px) {
  .error-page:before {
    font-size: 20rem;
  }
}
.error-page_heading {
  margin-bottom: 1rem;
}

.systems-page {
  padding: 3rem 20px;
}
.systems-page .success {
  display: inline-block;
  margin: 2rem 0;
  min-width: 650px;
  background-color: #CDE3CC;
  border: 1.5px solid #4F7D24;
  border-radius: 6px;
  font-size: .75rem;
  color: #4F7D24;
  padding: .1rem .75rem;
}

.hs-search-results {
  margin-top: 2rem;
}
ul.hs-search-results__listing li {
  margin-bottom: 2rem;
}
.hs-search-results__title {
  font-family: Poppins, Arial, sans-serif;
  font-size: 1.25rem;
  color: #1e1e1e;
  text-decoration: underline;
  margin-bottom: .25rem;
}
.hs-search-results__title:hover {
  text-decoration: none;
}
.hs-search-results__description {
  padding-top: .5rem;
}
.hs-search-highlight {
  font-weight: bold;
}
.hs-search-results__pagination a {
  color: #1e1e1e;
}

.email-prefs .item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.email-prefs .item.disabled input:disabled {
  cursor: not-allowed;
}



.systems-page .form-container input[type="text"],
.systems-page .form-container input[type="email"],
.systems-page .form-container input[type="password"],
input#hs-pwd-widget-password {
  max-width: 767px;
  width: 100%;
  display: block;
}
input.email-edit.hs-input {
  width: 100% !important;
  max-width: 767px;
  display: block;
}
.systems-page .form-container .hs-form-field>label,
.systems-page .form-container .hs-input[type=checkbox] {
  display: inline-block;
}
.systems-page .form-container {
  margin-bottom: 20px;
}
.systems-page .success {
  min-width: auto;
  font-size: 1rem;
  max-width: 767px;
  width: 100%;
}
.systems-page {
  padding: 3rem 0;
}
.systems-page .form-container ul.no-list.hs-error-msgs, .systems-page .form-container ul.no-list.hs-error-msgs li {
  margin: 0;
}
.systems-page .form-container ul.no-list.hs-error-msgs {
  padding: 0;
  max-width: 767px;  
}
.systems-page .form-container .form-input-validation-message {
  font-size: inherit;
}
.error-404-pg .page-center.py-8 {
  padding-top: 0 !important;
}
.error-404-pg .my-7 {
  margin-bottom: 0rem!important;
}

@media (max-width: 411px) {
  .masthead-txt h1 {
    font-size: 2rem;
  }
}