/* ================================
   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;

  /* 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.
****************************************************************************** */

/* ================================
   1) Footer Base
   ================================ */
.footer-group,
.footer-bottom {
  background-color: var(--Dark-Metal, #202221);
  color: #ffffff;
}

/* If your footer has other wrappers, keep text white consistently */
.footer-group *,
.footer-bottom * {
  color: inherit;
}

/* ================================
   2) Typography
   ================================ */
.footer-group h5,
.column-title,
.footer-menu .hs-menu-wrapper > ul > li > a {
  color: #ffffff;
}

.footer-group h5,
.column-title {
  margin-bottom: 1rem;
}

/* ================================
   3) Links (default state)
   ================================ */
.footer-group a,
.footer-menu .hs-menu-wrapper ul ul li a,
.link,
.main-links,
.legal a,
.copyright a {
  color: #ffffff;
  text-decoration: none;
}

.footer-group a {
  font-weight: 500;
  background-image: linear-gradient(to top, #ffffff 2px, transparent 0);
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: 0 100%;
  transition: background-size 0.25s ease-in-out, color 0.2s ease-in-out;
}

.footer-group a:hover {
  color: var(--highlight-red, #fa0000);
  background-image: linear-gradient(to top, var(--highlight-red, #fa0000) 2px, transparent 0);
  background-size: 100% 100%;
}

.footer-group a:active {
  color: var(--dark-red, #730000);
  background-image: linear-gradient(to top, var(--dark-red, #730000) 2px, transparent 0);
  background-size: 100% 100%;
}

/* Active menu item */
.footer-menu .hs-menu-wrapper ul ul li.hs-menu-item.active > a {
  color: var(--dark-red, #730000);
  background-image: linear-gradient(to top, var(--dark-red, #730000) 2px, transparent 0);
  background-size: 100% 100%;
}

/* ================================
   4) Accessibility: Focus Visible
   ================================ */
.footer-group a:focus-visible,
.footer-bottom a:focus-visible,
.social-icons a:focus-visible,
.social-footer-icon-wrap a:focus-visible {
  outline: 2px solid var(--highlight-red, #fa0000);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-group a,
  .social-icons a svg,
  .social-footer-icon-wrap a,
  .social-footer-icon-wrap a svg {
    transition: none !important;
  }

  .social-footer-icon-wrap a:hover {
    transform: none !important;
  }
}

/* ================================
   5) Footer Menu Structure (HubSpot)
   ================================ */
.footer-menu .hs-menu-wrapper ul {
  padding: 0;
  margin: 0 0 1rem;
  line-height: normal;
  list-style: none;
}

.footer-menu .hs-menu-wrapper ul li {
  display: block;
}

.footer-menu .hs-menu-wrapper > ul > li > a {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 700;
  padding: 0;
  cursor: default;        /* change to pointer if clickable */
  background-image: none; /* do not animate underline on headings */
}

/* To make these non-clickable, uncomment:
.footer-menu .hs-menu-wrapper > ul > li > a { pointer-events: none; }
*/

.footer-menu .hs-menu-wrapper ul ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu .hs-menu-wrapper ul ul li {
  margin: 0 0 0.8rem;
  padding: 0;
  width: 100%;
  line-height: 1.6;
}

.footer-menu .hs-menu-wrapper ul ul li:last-child {
  margin-bottom: 0;
}

.footer-menu .hs-menu-wrapper ul ul li a {
  display: inline-block;
  padding: 0;
}

/* ================================
   6) Region list (optional support)
   ================================ */
.footer-region-wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-region ul li {
  margin-bottom: 0.8rem;
}

/* ================================
   7) Social Icons
   ================================ */

/* Container list */
.social-footer-icon-wrap ul,
.social-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 25px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Link wrapper */
.social-footer-icon-wrap a,
.social-icons a {
  color: #ffffff;
  text-decoration: none;
  background-image: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.2s ease-in, color 0.15s ease-in-out;
}

/* Optional icon sizing */
.social-footer-icon-wrap a {
  font-size: 1.5rem; /* for icon-font implementations */
}

/* Inline SVG sizing + fill */
.social-icons a svg,
.social-footer-icon-wrap a svg {
  width: 25px;
  height: auto;
  fill: #ffffff;
  transition: fill 0.25s ease-in-out;
}

/* Hover */
.social-footer-icon-wrap a:hover,
.social-icons a:hover {
  color: var(--highlight-red, #fa0000);
  transform: scale(1.08);
}

.social-icons a:hover svg,
.social-footer-icon-wrap a:hover svg {
  fill: var(--highlight-red, #fa0000);
}

/* Active/pressed */
.social-footer-icon-wrap a:active,
.social-icons a:active {
  color: var(--dark-red, #730000);
}

.social-icons a:active svg,
.social-footer-icon-wrap a:active svg {
  fill: var(--dark-red, #730000);
}

.social-footer-icon-wrap a.ion-social-facebook:before,
.social-footer-icon-wrap a.ion-social-facebook:hover:before {
  color: currentColor;
  background-color: transparent;
}

/* ================================
   8) Legal / Copyright
   ================================ */
.copyright,
.legal {
  color: #ffffff;
}

/* Border alignment */
.copyright,
.footer-bottom {
  border-top: 1px solid rgba(61, 71, 68, 1);
}

.copyright {
  font-size: 0.8rem;
}

.copyright ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.copyright ul li {
  display: inline-block;
  margin-bottom: 0.4rem;
  margin-right: 2rem;
}

.copyright ul li:last-child {
  margin-right: 0;
}
/* ******************************************************************************
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;
  }
}