/* WageArmor brand palette — tokenized for central control + quick rollback.
   Contrast-tuned to WCAG 2.2 AA (2026-06-18 a11y audit). To revert a color, edit it here only. */
:root {
  --wa-gold: #feb91e;             /* brand gold — backgrounds, borders, gold-on-dark text */
  --wa-gold-text: #8a6a00;        /* dark gold for gold-colored TEXT on light bg (AA 4.5:1 on white) */
  --wa-gold-text-hover: #6e5400;  /* darker gold for link hover on light bg */
  --wa-ink: #2c2f31;              /* primary dark text (on white or on gold buttons) */
  --wa-text-muted: #6a6a6a;       /* muted/secondary text on white (AA 4.83:1) — was #797979/#a4a4a4/#84878a */
  --wa-surface-gray: #686868;     /* risk-card body — clearly darker than the #84878a header (intentional two-tone) + white text AA 4.97:1; was #bfbfbf (failed) */
}

/*UNIVERSAL*/

body {
  padding-bottom: 1rem;
}
* {
    font-family: 'Poppins', sans-serif;
}
h2{
  font-size: 3em;
  font-weight: 800;
  margin-top: 1.5rem;
}
h3 {
  font-size: 2.25em;
  font-weight: 700;
}
h4{
  font-size: 2.5rem;
  font-weight: 300;
}
h5{
  font-size: 1.75em;
  font-weight: 700;
}
p{
  font-size: 1.25em;
}
.row {
  margin-bottom: 1rem;
  margin-left: 0;
  margin-right: 0;
}
.row .row {
  margin-top: 1rem;
  margin-bottom: 0;
}
.container{
  padding-left: 0;
  padding-right: 0;
}
.no-btm-margin{
  max-width: 100%;
  margin: 0 auto;
}
[class*="col-"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.padded{
  padding: 50px 15px;
}
.no-padding{
  padding: 0;
}
a{
  color: var(--wa-ink); /* readable dark ink for content links (was light gray #a4a4a4). Gold reads brown when forced to AA, so links use ink; brand gold is reserved for decorative accents. */
}
a:hover{
  color: var(--wa-gold-text); /* dark gold on hover for feedback (AA on white) */
}
.wa-smaller-text{
  font-size: 1.15em;
}
.header-bg-vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-position: center;
  object-fit: cover;
}
.header-bg-vid:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgb(255, 0, 0);
}
/*BUTTONS*/
.wa-button-container{
  padding-top: 25px;;
}
.btn{
  font-weight: 700;
  border-width: 2px;
  border-radius: 25px;
  padding: 10px 15px;
}
.testimonial-btn{
  font-size: 1em;
}
.white-button{
  color: var(--wa-ink);
  background-color: #ffffff;
  border-color: #ffffff;
}
.yellow-button{
  color: var(--wa-ink);
  background-color: var(--wa-gold);
  border-color: var(--wa-gold);
}
.yellow-font{
  color: var(--wa-ink);
  background-color: var(--wa-gold);
  border-color: var(--wa-gold);
  border-radius:5px;padding:8px;display:inline-block;min-width:200px;
}
.outline-button, .white-button:hover, .yellow-button:hover{
    color: var(--wa-ink);
    background-color: transparent;
    border-color: var(--wa-ink);
}
.outline-button:hover{
  color: var(--wa-ink);
  background-color: var(--wa-gold);
  border-color: var(--wa-gold);
}
#light-outline{
  border-color: white;
}
.css-inverted #light-outline {
    background-color: var(--wa-gold);   /* gold fill by default (matches the site's filled buttons) */
    border-color: var(--wa-gold);
    color: var(--wa-ink) !important;    /* grey/dark text on the gold fill */
}
.css-inverted #light-outline:hover {
    filter: brightness(0.92);           /* subtle darken of the gold fill; grey text stays readable */
}
.nav-header-wrapper-lp, .nav-header-wrapper{
  padding-top: 1rem;
}
.landing-header-wrapper .wa-button-container a:hover,
.nav-header-wrapper-lp .wa-button-container a:hover{
	background:#ffffff !important;
}

/*INTERACTIVES*/
.hover-grow:hover{transform: scale(1.05);}

/* Keyboard focus visibility (WCAG 2.4.7/2.4.11). Gold ring + dark halo so the indicator is visible
   on BOTH light pages and the dark hero video. Only shows for keyboard focus (:focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--wa-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
  border-radius: 3px;
}
.white-button.shimmer {
  color: var(--wa-ink);
  background-color: #ffffff;
  border-color: #ffffff;
}
.yellow-button.shimmer {
  color: var(--wa-ink);
  background-color: var(--wa-gold);
  border-color: var(--wa-gold);
}
.shimmer {
  position: relative; /* set the position of the button to relative */
  overflow: hidden; /* hide any content that exceeds the button's dimensions */
  border: none; /* remove the button's border */
  padding: 12px 24px; /* set some padding for the button */
  font-size: 16px; /* set the font size for the button */
  cursor: pointer; /* set the cursor to a pointer on hover */
}
.shimmer:hover::after {
  content: ''; /* add an empty pseudo-element to the button */
  position: absolute; /* set the position of the pseudo-element to absolute */
  top: -50%; /* position the pseudo-element at the top of the button */
  left: -50%; /* position the pseudo-element at the left of the button */
  width: 300%; /* set the width of the pseudo-element to be twice the button's width */
  height: 300%; /* set the height of the pseudo-element to be twice the button's height */
  background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%); /* add a linear gradient to create the shimmering effect */
  animation: shimmer 2s; /* add the shimmer animation */
  transition: transform 0.3s ease;
}

@keyframes shimmer {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg); /* set the initial transform for the pseudo-element */
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg); /* set the final transform for the pseudo-element */
  }
}

.yellow-button.shimmer:hover::after {
  opacity: 0.85; /* set the opacity of the pseudo-element to create the grey shimmer effect when the button is hovered over */
}
/* Keep the gold shimmer CTA gold on hover (higher specificity than the header-wrapper white flip)
   so the white shimmer sweep reads as a shine across the gold instead of flickering on a white bg. */
.wa-button-container a.yellow-button.shimmer:hover {
  background-color: var(--wa-gold) !important;
  border-color: var(--wa-gold) !important;
  color: var(--wa-ink) !important;
}

/*NAV*/
.mega-menu{
	background: #fdf6d5;
}
.mega-menu .dropdown-header{
	background:var(--wa-gold);
	color: var(--wa-ink);
	border: none;
	border-radius: 6px;            /* match the site's rounded buttons/tokens (was a hard 2px) */
	margin-bottom: 0.65rem;
	padding: .45rem .85rem;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 1px 3px rgba(44, 47, 49, .2);  /* soft lift instead of the heavy dark 2px border */
}
/* Branded hover for the profession links — subtle gold tint + gentle right-nudge,
   replacing Bootstrap's flat gray highlight box. */
.mega-menu .dropdown-item{
	color: var(--wa-ink);
	border-radius: 6px;
	transition: background-color .15s ease, transform .15s ease;
}
.mega-menu .dropdown-item:hover,
.mega-menu .dropdown-item:focus{
	background-color: rgba(254, 185, 30, .2);   /* light brand-gold wash */
	color: var(--wa-ink);
	transform: translateX(.35rem);               /* nudge via transform — no reflow, so long links don't widen the column */
}
.mega-menu.bg-shield-image {
  background: url('/frontend/shield-background-light.webp') no-repeat bottom right;
  background-size: 27.9%;
  background-color: #fdf6d5;
  box-shadow: -5px -2px 8px 3px rgba(0, 0, 0, 0.75);
}
.bg-shield-image {
  background-position: 20px bottom 20px right !important;
}
.nav-item{
  font-weight: 700;
  font-size: 1.25em;
  padding-right: .5rem;
}
/* Top-level nav links — animated gold underline on hover/focus. The gold line reads on BOTH the dark
   hero video and the white-header pages, so it works in every nav context. */
.nav-link{
  position: relative;
}
.nav-link::before{               /* ::before so it never collides with Bootstrap's .dropdown-toggle::after caret */
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .15rem;
  height: 2px;
  background: var(--wa-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.nav-link:hover::before,
.nav-link:focus-visible::before{
  transform: scaleX(1);
}
/* Nav links on light-header pages (css-inverted context): Bootstrap's default #808080 fails AA on
   white (3.94:1). Darken to ink. 4-class selector to beat Bootstrap's .navbar-light .navbar-nav .nav-link.
   (Hero/home pages use .light-text = white over the dark video, untouched.) */
.navbar-light .navbar-nav .nav-link.css-inverted{
  color: var(--wa-ink);
}
.wa-nav-wrap{
  padding-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
  padding: 25px 5%; 
  margin: 0 auto;
  border-bottom: 1px solid #e6e6e6;
}
.wa-nav-wrap-no-border{
  padding-left: 5%;
  padding-right: 5%;
  margin: 0 auto;
  padding: 25px 5%; 
  margin: 0 auto;
}
.navbar-brand{
  width: 60%;
  max-width: 400px;
}
.navbar-light .navbar-toggler {
  color: rgb(121 121 121);
  border: none;
  padding-left: 15px;
}
.navbar-light .navbar-toggler:focus {
  outline: none;
}
.navbar-toggler-icon-light{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/*PAGE*/
.wa-page-wrapper{
  min-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#headline{
  color: white;
}

/*HEADER SECTION*/
.header-txt h3{
  color: var(--wa-gold); /* over the dark hero video — must stay light gold (axe contrast flag here is a false positive: it can't read the video bg) */
}
.header-txt h2{
  color: var(--wa-text-muted);
}
#header-section{
  padding: 50px 5% 0 5%;

}
.header-img-wrap{
  text-align: right;
}
#header-section > h2{
  font-size: 3.5em;
}
#insure-mobile-top-line{
  color: var(--wa-gold); /* mobile hero line — over dark video, keep light gold */
  margin-bottom: -10px;
}

/*PAGE CONTENT*/
.content-wrapper{
  min-width: 100%;
  margin: 0 auto;
}
.yellow-bg{
  background-color:var(--wa-gold);
}
.light-bg{
  background-color:#f2f2f2;
}
.grey-bg{
  background-color: #ededed;
}
.white-bg{
  background-color: white;
}
.no-border{
  border: none;
}
.wa-text-container{
  text-align: center;
  padding: 0 5%;
  color:var(--wa-text-muted);
}
.wa-text-container-landing{
  text-align: center;
  padding: 2% 10%;
  color:var(--wa-text-muted);
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
#landing-text-by-button{
  padding-right: 25px;
  font-weight: bold;
  margin-bottom: 0;
}
.pad-top{
  padding-top: 5%;
}

/*SHIELD SECTION*/
.wa-shield-row{
  text-align: center;
  padding: 0;
}
.shield-img{
  width: 100%;
  max-width: 475px;
  padding: 0 5%;
}
.landing-shield{
  padding: 0;
}
.wa-shield-text-box:hover, .professions-shield-text-box:hover{
  cursor: inherit;
}
.wa-shield-col:hover > .shield-img{
  filter: drop-shadow(2px 2px 4px #707070);
  transform: scale(1.025);
  transition: .15s ease-in-out;
}
.wa-shield-col:hover >  .wa-shield-text-box{
  transform: scale(1.025);
  transition: .15s ease-in-out;
}
.wa-shield-col:hover > a > .shield-img{
  filter: drop-shadow(2px 2px 4px #707070);
  transform: scale(1.025);
  transition: .15s ease-in-out;
}
.wa-shield-col:hover > a > .professions-shield-text-box{
  transform: scale(1.025);
  transition: .15s ease-in-out;
}
.wa-shield-col:hover > a > .wa-shield-text-box{
  transform: scale(1.025);
  transition: .15s ease-in-out;
}
.wa-shield-col:hover > a > .professions-shield-text-box{
  transform: scale(1.025);
  transition: .15s ease-in-out;
}
.landing-shield-col:hover, .landing-shield-text-box:hover{
  cursor: default;
}
.wa-shield-col{
  position: relative;
  display: inline-block;
  vertical-align: top;   /* align shields by their tops, not the inline-block baseline (which drifts when image dimensions differ, e.g. the .webp swap) */
  padding: 0;
  max-width: 500px;
  margin: 0 auto;
}
.wa-shield-text-box{
  position: absolute;
  z-index: 1;   
  height: 100%;
  text-align: center;
  width: 100%;
  padding: 56% 20% 16% 20%;
}
.wa-shield-text{
  display: inline-block;
  font-size: 200%;
  width: 100%;
  color: white;
}
.wa-shield-row a{
  color: #202020;
}

/*FORM SECTION*/
.wa-form-container img{
  max-width: 350px;
}

/*RISK CARDS*/
#risk-text-container{
  padding-right: 18%;
  padding-left: 18%;
}
#risk-text-container p{
  margin: 0 auto;
  padding: 20px 0;
}
.risk-cards{
  padding: 0 5%;
}
.card-header{
  background-color:#84878a;
  border: none;
  padding: 10%;
}
#first-card{
  padding: 10% 15%;
}
#yellow-card-header{
  background-color:var(--wa-gold);
  border: none;
}
#yellow-card-header h5{
  color: #4a4a4a;
}
#yellow-card p{
  color: white;
}
#yellow-card{
  background-color:#4a4a4a;
}
.risk-card-body{
  background-color: var(--wa-surface-gray);
  padding: 0% 15%;
}
.card-header h5{
  color: white;
  font-size: 1.75vw;
}
.risk-card-body p {
  font-size: 3.5em;
  font-weight: 800;
  line-height: 1.25em;
  padding: 25px;
  color: white;
}
.risk-card-split{
  display: none;
}
.source-text p{
  padding-top: 50px;
  font-size: .75em;
}
#odds-headline{
  font-size: 2em;
}

/*AWARD SECTION*/
.award-img{
  width: 65%;
}

/*QUESTION SECTION*/
.btn-pad-tb{
  padding-top: 25px;
  padding-bottom: 25px;
}

/*FOOTER*/
.wa-footer{
  max-width: 100%;
  margin: 0 auto;
  padding: 5% 15% 0 15%;
  border-top: 1px solid #e6e6e6;
}
.wa-footer p{
  font-size: .95em;
  color: var(--wa-text-muted);
}
/* Footer links — were the global #a4a4a4 (~2.49:1, too light). Dark ink for AA + underline so they're
   not distinguished by color alone (also clears link-in-text-block on the in-sentence "Click Here"). */
.wa-footer-link a{
  color: var(--wa-ink);
  text-decoration: underline;
}
.wa-footer-link a:hover{
  color: var(--wa-gold); /* brand gold hover (the underline keeps affordance) */
}
/* Content prose links (privacy/cookie) — ink + underline for affordance now that base links are ink. */
#tos-copy a { text-decoration: underline; }
/* Cookie-policy / content <code> cells — Bootstrap styles these pink (~3:1 on the light bg). */
#tos-copy code, .table code { color: var(--wa-ink); }
/* Body text sitting on gold sections — dark ink (was muted gray, ~3:1 on gold). */
.protect-text p, .wa-smaller-text { color: var(--wa-ink); }
.wa-footer-wrapper{
  max-width: 100%;
}
.wa-footer-link-col{
  position: relative;
  padding: 0;
  border: none;
}
.wa-footer-link-wrapper{
    width: 100%;
    text-align: right;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
}
.wa-footer-logo{
  padding-bottom: 25px;
  max-width: 300px ;
}
.wa-foooter-link{
  margin-bottom: 0;
}

/*PROFESSIONS PAGE*/
.professions-shield-text-box{
  padding: 20% 22% 10% 22%;
  color: var(--wa-text-muted);
}
.professions-shield-title{
  font-size: 4em;
  line-height: 1em;
  color: var(--wa-text-muted);
}
.testimonial-text{
  font-size: 2em;
}
.testimonial-cite{
  font-size: 1.5em;
}
.contact-row{
  margin-bottom: 0;
}
#coverage-text{
  padding: 2%;
}
.chart-text-headline{
  padding: 25px 0;
}
.chart-text-headline h3{
  font-size: 1.5em;
}
.prof-list-col{
  flex: 0 0 40%;
  max-width: 40%;
}
.chart-row{
  padding: 3% 6%;
}
#chart-headline{
  margin-top: 0;
}
.prof-list-heading{
  font-size: 1em;
  margin-bottom: 0;
}
.prof-list{
  list-style-type: none;
  padding-inline-start: 0;
  font-weight: 700;
  font-size: 1.15em;
  color: var(--wa-text-muted);
}
.cov-box-row{
  padding-top: 20px;
}
.wa-coverage-box{
  background-color: white;
  border: 2px solid black;
  padding: 25px;
  max-width: 475px;
  margin-left: 25px;
}
.wa-coverage-box-yellow{
  color: var(--wa-gold); /* brand gold — decorative "Without WageArmor" card accent (large display text) */
  background-color: white;
  border: 2px solid var(--wa-gold);
  padding: 25px;
  max-width: 475px;
}
#risk-shield-h4{
  font-size: 2em;
}
.center{
  display: flex;
  flex-direction: row;         
  justify-content: center;
  width: 100%;
}
.box-salary{
  margin-bottom: 0;
  margin-top: 25px;
}
.box-income{
  font-size: 4em;
  font-weight: 700;
  margin-bottom: -10px;
}
.box-italic{
  font-size: 1em;;
}
.slider-container{
  margin-top: 50px;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: #4C4C4C;
  border-radius: 20px;
  outline: none;
  max-width: 750px;
  min-width: 700px;
  opacity: 0.7;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 40px;
  background: url(/frontend/wa-slider-handle.webp);
  background-repeat: no-repeat;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: url(/frontend/wa-slider-handle.webp);
  cursor: pointer;
}
.range-labels {
  padding: 0;
  list-style: none;
  margin: 25px auto;
  max-width: 750px;
  display: contents;
}  
.range-labels li {
  position: relative;
  float: left;
  width: 90.25px;
  text-align: center;
  color: #7d7d7d;
  margin: 20px;
  font-weight: 700;
  font-size: 1.5em;
  cursor: pointer;
}

/*LANDING PAGE*/
.landing-header-txt{
  padding-left: 5%;
  padding-right: 0;
}
.content-wrapper-no-pad{
  padding: 0;
  width: 100%;
  max-width: 100%;
}
.landing-header-img{
  padding: 25px 0;
}
.landing-header-wrapper{
  padding: 7% 0;
}
.lp-testimonal-section{
  align-self: center;
  padding: 2% 0;
}
.lp-stats-section{
  align-self: center;
  padding: 0% 0;
}
.header-img-wrap-landing{
  text-align: right;
}
.landing-tall-img{
  max-width: 35%;
  align-self: flex-end;
}
.professions-shield-title-light, .professions-shield-body-light{
  color: white;
}
.landing-shield-text-box{
  padding: 25% 22% 10% 22%;
  color: var(--wa-text-muted);
}
.landing-shrink-text{
  font-size: 2em;
}
.landing-all-caps{
  font-size: 1.75em;
}
.landing-question-text{
  margin-top: .5em;
  margin-bottom: .5em;
  font-size: 2em;
}
#five-reasons-text{
  font-size: 1.25em;
  padding-top: 15px;
}
#five-reasons-headline{
  font-size: 2.25em;
}
.icon-headline{
  font-size: 1em;
  line-height: 1.1em;
}
.icon-content-txt{
  font-size: .85em;
  line-height: 1.25em;
}
.icon-col img{
  margin: 15px 0;
}
#icon-row-container{
  padding: 0 5%;
}
.landing-caption-text{
  font-size: .5em;
  font-style: italic;
  padding: 5% 7% 0 7%;
}
.family-section{
  padding: 50px 25px 0 25px;
  margin-bottom: 0;
}
#text-container-fam-section{
  padding-bottom: 25px;
}
.light-text{
  color: white !important;
}
.landing-headline{
  font-size: 3em;
}
.landing-contact-image-col{
  background-image: URL(/frontend/WA-ManDesk.webp);
  background-size: cover;
  min-height: 435px;
  background-position: left center;
}

/*ACCESSABILITY*/
.wa-shield-link:focus > .wa-shield-text-box h3{
  outline: 3px solid white;
}
.wa-shield-link:focus{
  outline: none;
}

/*MEDIA QUERIES*/
@media screen and (min-width: 1750px) {
  .wa-shield-row{
    max-width: 1800px;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto;
  }
  .testimonial-text{
    font-size: 2vw;
  }
  .testimonial-cite{
    font-size: 1.25vw;
  }
  .testimonial-btn{
    font-size: 1vw;
  }
}
@media screen and (max-width: 1750px) {
  .professions-shield-title{
    font-size: 3em;
  }
  .professions-shield-text-box{
    padding: 20% 25% 10% 25%;
  }
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: 1.25em;
  }
  .landing-shield-text-box{
    padding: 25% 16% 10% 16%;
  }
}
@media screen and (max-width: 1500px) {
  .wa-shield-text{
    font-size: 150%;
  }
  .professions-shield-title{
    font-size: 3em;
  }
  .professions-shield-text-box{
    padding: 20% 25% 10% 25%;
  }
  .landing-shield-text-box{
    padding: 25% 19% 10% 19%;
  }
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: 1.15em;
  }
}
@media screen and (max-width: 1400px) {
  .header-txt {
    font-size: 75%;
  }
  .header-img-wrap img{
    max-width: 550px;
  }
  .risk-card-body p {
    font-size: 2.5em;
  }
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: 1em;
  }
}
@media screen and (max-width: 1320px) {
  .nav-item {
    font-size: 1em;
  }
  .navbar-brand{
    max-width: 300px;
  }
}
@media screen and (max-width: 1280px) {
  .risk-card-split{
    display: block;
  }
  .card{
    width: 100%;
    margin: 0 auto;
  }
  .professions-shield-title{
    font-size: 2.5em;
  }
  .professions-shield-text-box p,.landing-shield-text-box p{
    font-size: 1em;
    line-height: 1.5em;
  }
  .card-header h5{
    font-size: 2.25em;
  }
  .risk-card-body p{
    font-size: 3em;
  }
}
@media screen and (max-width: 1225px) {
  .header-txt {
    font-size: 65%;
    margin-top: -25px;
  }
  .header-img-wrap img{
    max-width: 400px;
  }
  .header-img-wrap-landing img{
    max-width: 565px;
  }
  .question-text{
    font-size: 2.5em;
  }
  .landing-question-text{
    font-size: 2em;
  }
  .professions-shield-title{
    font-size: 2.5em;
  }
  .landing-shield-text-box{
    padding: 25% 16.5% 10% 16.5%;
  }
}
@media screen and (max-width: 1170px) {
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: .95em;
    line-height: 1.25em;
  }
  .professions-shield-text-box{
    padding: 20% 22% 10% 22%;
  }
}
@media screen and (max-width: 1120px) {
  .wa-shield-text{
    font-size: 2vw;
  }
  .professions-shield-title{
    font-size: 2em;
  }
  .testimonial-text{
    font-size: 1.5em;
  }
  .testimonial-cite{
    font-size: 1.25em;
  }
  .slider {
    min-width: 500px;
    max-width: 600px;
  }
  .range-labels {
    padding: 0;
    list-style: none;
    margin: 25px auto;
    max-width: 500px;
  }  
  .range-labels li {
    font-weight: 700;
    font-size: 1.25em;
  }
  .landing-tall-img{
    max-width: 35%;
  }
  .landing-text-container{
    font-size: 90%;
  }
  .landing-shield-text-box{
    padding: 28% 18% 10% 18%;
  }
  .landing-shield-text-box p{
    font-size: .85em;
    line-height: 1em;
  }
  .below-shield-text-box h5{
    font-size: 1.5em;
  }
  
}
@media screen and (max-width: 1030px) {
  .landing-shield-text-box p{
    font-size: .85em;
  }
}
@media screen and (min-width: 992px) {
  #nav-quote-button-mobile {
    display: none;
  }
  .landing-headline-spacer-col{
    max-width: 35%;
  }
}
@media screen and (max-width: 991px) {
  .nav-fill{
    padding-top: 25px;
  }
  .landing-headline-spacer-col{
    max-width: 20%;
  }
  #nav-quote-button{
    display: none;
  }
  .navbar-brand{
    width: 45%;
  }
  .wa-text-container{
    padding: 0;
  }
  #risk-text-container{
    padding: 0;
  }
  #risk-text-container h2{
    font-size: 3em;
  }
  .card-header h5{
    font-size: 1.75em;
  }
  .risk-card-body p{
    font-size: 2.5em;
  }
  .wa-footer{
    padding: 5% 10% 0 10%;
  }
  .wa-footer-link-wrapper{
    position: relative;
    padding-top: 25px;
    text-align: right;
  }
  .wa-footer-link-col p{
    text-align: center;
  }
  .wa-footer-logo{
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 2% 20%;
  }
  .wa-footer-contact-wrapper{
    padding-bottom: 25px;
    padding-top: 25px;
  }
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: .85em;
    line-height: 1.25em;
  }
  .professions-shield-text-box{
    padding: 20% 22% 10% 22%;
  }
  .professions-shield-title{
    font-size: 2.15em;
  }
  .landing-tall-img{
    max-width: 40%;
  }
  .landing-text-container{
    font-size: 70%;
  }
  .landing-button-container{
    padding-bottom: 0;
  }
  .landing-button-container button{
    font-size: 75%;
  }
}
@media screen and (max-width: 967px) {
  .header-txt {
    font-size: 50%;
    align-self: start !important;
    margin-top: 0;
  }
  .landing-header-txt{
    align-self: center !important;
  }
  .question-text{
    font-size: 2em;
  }
  .professions-shield-text-box p{
    font-size: .8em;
    line-height: 1.15em;
  }
  .professions-shield-text-box{
    padding: 20% 21% 10% 21%;
  }
  .landing-shield-text-box{
    padding: 23% 19% 10% 19%;
  }
  .landing-shield-text-box p{
    font-size: .75em;
    line-height: 1.15em;
  }
  .professions-shield-title{
    font-size: 2.05em;
  }
  .testimonial-text{
    font-size: 1.5em;
  }
  #landing-text-by-button{
    font-size: 1.25em;
  }
  .protect-text h4{
    font-size: 2em;
  }
  .below-shield-text-box h5{
    font-size: 1.25em;
  }
}
@media screen and (max-width: 810px) {
  .prof-list-col{
    display: none;
  }
  .chart-text-headline h2{
    text-align: center;
    font-size: 2.25em;
  }
  .chart-text-headline h3{
    text-align: center;
  }
  .chart-text-headline img{
    margin: 50px 0;
    max-width: 400px;
  }
  .chart-row{
    padding:10% 5% 2.5% 5%;
  }
}

@media screen and (min-width: 806px) {
  #insure-text-mobile{
    display: none;
  }
  #insure-text-desktop{
    display: block;
  }
}

@media screen and (max-width: 805px) {
  .headline{
    padding: 0 20%;
  }
  .landing-headline{
    font-size: 2em;
  }
  .landing-header-wrapper {
    padding: 10% 0 10% 0;
  }
  #insure-text-mobile{
    display: block;
  }
  #insure-text-desktop{
    display: none;
  }
  .header-txt {
    font-size: 75%;
    padding: 0 .5rem 2.5rem .5rem;
  }
  .header-img-wrap{
    text-align: center;
  }
  .header-img-wrap img{
    max-width: 400px;
  }
  .header-img-wrap-landing img{
    max-width: 725px;
  }
  .landing-header-txt{
    padding: 2% 5%;
  }
  .header-row{
    display: block;
    text-align: center;
  }
  .wa-shield-row{
    display: block;
  }
  .wa-shield-text{
    font-size: 5vw;
  }
  .shield-img{
    padding-bottom: 3%;
  }
  .wa-shield-text-box{
    padding: 45% 20% 0 20%;
  }
  #quote-headline{
    font-size: 3em;
  }
  .wa-form-container img{
    max-width: 350px;
    margin-top: 5%;
  }
  .form-section{
    display: block;
  }
  .professions-shield-text-box p{
    font-size: 1.25em;
    line-height: 1.35em;
  }
  .professions-shield-text-box{
    padding: 20% 20% 10% 20%;
  }
  .professions-shield-title{
    font-size: 3.5em;
  }
  .landing-tall-img{
    max-width: 100%;
    text-align: center;
    padding-top: 8%;
  } 
  .landing-shield-text-box{
    padding: 28% 20% 10% 20%;
  }
  .landing-shield-text-box p{
    font-size: 1em;
    line-height: 1.15em;
  }
  .wa-text-container-landing{
    display: block;
  }
  #landing-text-by-button{
    padding-bottom: 3%;
    font-size: 1.5em;
    padding-right: 0;
  }
  .landing-button-container{
    padding-bottom: 5px;
    padding-top: 0;
  }
  .landing-button-container button{
    font-size: 75%;
  }
  .card-header h5{
    font-size: 1.5em;
  }
  .risk-card-body p{
    font-size: 2.25em;
  }
  #header-section > h2{
    font-size: 4vw;
  }
}
@media screen and (max-width: 767px) {
  .wa-footer-link-wrapper{
    padding-top: 0;
  }
  .testimonial-text{
    font-size: 1.25em;
  }
}
@media screen and (max-width: 750px) {
  .risk-cards{
    display: block;
  }
  .risk-card-split{
    display: none;
  }
  .card-header h5{
    font-size: 2.25em;
  }
  .risk-card-body p{
    font-size: 3em;
  }
  .award-img{
    width: 100%;
  }
  .question-text{
    font-size: 1.75em;
  }
  .center{
    display: block;
  }
  .wa-coverage-box-yellow, .wa-coverage-box{
    max-width: none;
    width: 75%;
    margin: 0 auto;
  }
  .wa-coverage-box{
    margin-top: 25px;
  }
  .cov-box-row{
    padding-right: 0;
    padding-left: 0;
  }
  .slider {
    width: 100%;
    min-width: 250px;
    margin: 0 auto;
    display: flex;
  }
  .range-labels {
    padding: 0;
    list-style: none;
    margin: 25px auto;
    max-width: 600px;
  }  
  .range-labels li {
    margin: 20px;
    font-weight: 700;
    font-size: 1.15em;
  }
  .label-container{
    display: flex;
  }
  .icon-row{
    display: block;
    padding: 10% 0;
  }
  #odds-headline{
    font-size: 1.75em;
  }
  .protect-text h3{
    font-size: 1.75em;
  }
  .below-shield-text-box h5{
    font-size: 1.75em;
  }
  .icon-content-txt {
    font-size: 1.25em;
  }
  .icon-headline {
    font-size: 1.25em;
  }
}
@media screen and (max-width: 690px) {
  .contact-row{
    display: block;
  }
  .question-text{
    font-size: 3em;
  }
  .contact-text{
    padding: 10% 5%;
  }
  .testimonial-text{
    font-size: 1.75em;
  }
  .landing-button-container{
    padding-bottom: 25px;
    padding-top: 25px;
  }
  .landing-button-container{
    font-size: 120%;
  }
  .wa-smaller-text{
    font-size: 1.5em;
  }
  .landing-text-col{
    padding: 6% 2% 2% 2%;
  }
  .card-header h5{
    font-size: 1.5em;
  }
  .risk-card-body p{
    font-size: 2.5em;
  }
  .risk-cards {
    padding: 0;
  }
  #odds-headline{
    font-size: 1.5em;
  }
  .landing-header-wrapper {
    padding: 0 0 10% 0;
  }
  #coverage-text h3{
    font-size: 1.75em;
  }
  #risk-shield-h4{
    font-size: 1.5em;
  }
  .below-shield-text-box h5{
    font-size: 1.5em;
  }
  .headline{
    padding: 0 15%;
  }
  .lp-testimonal-section{
    padding: 10% 0 0 0;
  }
  .lp-stats-section{
    padding: 10% 0 0 0;
  }
}

@media screen and (max-width: 567px){
  .header-bg-vid{
    display: none;
  }
  .nav-header-wrapper-lp, .nav-header-wrapper{
    background-size: cover;
    background-position: center;
  }
  .nav-header-wrapper-lp{
    background-image: url(/frontend/WA-landing-video-cover.webp);
  }
  .nav-header-wrapper{
    background-image: url(/frontend/WA-home-video-cover.webp);
  }
}

@media screen and (max-width: 546px) {
  #odds-headline{
    font-size: 1.2em;
  }
  p{
    font-size: 1.05em;
  }
  .wa-coverage-box-yellow, .wa-coverage-box{
    width: 100%;
  }
  .range-labels li{
    margin: 20px 5px;
    font-size: .85em;
  }
  .box-income{
    font-size: 2.25em;
  }
  .box-salary{
    font-size: 2em;
  }
  .wa-coverage-box-yellow h3, .wa-coverage-box h3{
    font-size: 2em;
  }
  #risk-shield-h4{
    font-size: 2.25em;
  }
  .below-shield-text-box h5{
    font-size: 1.25em;
  }
  #header-section > h2{
    font-size: 2.75em;
    padding: 0;
  }
}


@media screen and (max-width: 465px) {
  .header-img-wrap img{
    max-width: 300px;
  }
  .wa-form-container img{
    max-width: 250px;
  }
  .question-text{
    font-size: 2.25em;
  }
  .wa-footer-logo{
    padding: 2% 0;;
  }
  .navbar-brand {
    width: 100%;
    margin: 0 auto;
    padding: 5% 2% 7% 2%;
  }
  #nav-quote-button-mobile{
    margin: 0 auto;
    padding-bottom: 25px;
  }
  .card-header h5{
    font-size: 1em;
  }
  .risk-card-body p{
    font-size: 2em;
  }
  .wa-shield-text{
    font-size: 6.5vw;
  }
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: .9em;
    line-height: 1.25em;
  }
  .professions-shield-text-box, .landing-shield-text-box{
    padding: 20% 20% 10% 20%;
  }
  .landing-shield-text-box{
    padding: 25% 20% 10% 20%;
  }
  .professions-shield-title{
    font-size: 2.5em;
  }
  #odds-headline{
    font-size: 1.5em;
  }
  .below-shield-text-box h5{
    font-size: 1em;
  }
  #coverage-text h3{
    font-size: 2em;
  }
  #header-section > h2{
    font-size: 2.8em;
  }
}
@media screen and (max-width: 365px) {
  .header-img-wrap img{
    max-width: 250px;
  }
  .professions-shield-title{
    font-size: 2em;
  }
  .professions-shield-text-box, .landing-shield-text-box{
    padding: 22% 15% 10% 15%;
  }
  .professions-shield-text-box p, .landing-shield-text-box p{
    font-size: .8em;
    line-height: 1.15em;
  }
  #odds-headline{
    font-size: 1.3em;
  }
  .below-shield-text-box h5{
    font-size: 1.38em;
  }
  .headline{
    padding: 0 5%;
  }
  #header-section> h2{
    font-size: 2em;
  }
}
.parent-container {
      width: 95%;
      height: 50px; /* Set the height of the bar */
      position: relative;
      margin-bottom:1.3rem;
    }

    .css-car-div .bar{
      background-color: #5e5e5e;
      height: 100%;
      width: 5%;
      position: absolute;
    }
	.css-car-div .text,.css-house-div .text,.css-salary-div .text{line-height:3rem;font-size:1.25rem;position:relative;}
	.css-car-div .text{left:6.5%;}
	.css-house-div .text{left:16.5%;}
	.css-salary-div .text{left:2.5%;}
	
	.css-house-div .bar{
      background-color: #5e5e5e;
      height: 100%;
      width: 15%;
      position: absolute;
    }
	
	.css-salary-div .bar {
      background-color: #f4bb47;
      height: 100%;
      width: 100%;
      position: absolute;
    }