@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  /* https://betterprogramming.pub/is-there-a-horizontal-scrollbar-on-your-website-10-ways-to-prevent-it-39b3a5e81cf#43e5 */
  overflow-x: hidden;
}

*,
html,
body {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px;
}

*,
*:before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mainContainer main {
  flex: 1;
}

/* Global Utils */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.decorative-border {
  position: relative;
}

.decorative-border::after {
  background-color: rgba(223, 43, 64, 1);
  bottom: -16px;
  content: '';
  height: 9px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 63px;
}

.decorative-border.left::after {
  left: 0;
  transform: none;
}

/*********** Typography ************/
h1 {
  font-size: var(--font-53);
  line-height: var(--line-height-56);
  font-weight: 800;
}

.container > h1 {

  font-size: var(--font-53) !important;
  line-height: var(--line-height-56) !important;
  font-weight: 800 !important;
  color: black !important;
  padding-bottom: 20px !important;
  position: relative !important;
}

.container > p:before {
  /* width: 63px;
  height: 9px;
  background: #DF2B40;
  flex: none;
  order: 0;
  flex-grow: 0;
  position: absolute !important;
  display: block !important
  content: " "; */
}

.container > p {
  font-family: 'Be Vietnam Pro' !important;
  font-size: var(--font-16) !important;
  /* line-height: var(--line-height-64) !important; */
  color: var(--gray-2) !important;
  font-weight: 500 !important;
}

@media (min-width: 990px) {
  .container > h1 {
    padding-left: 25% !important;
  }

  .container > p {
    padding-left: 25% !important;
  }
}


h2 {
  font-size: var(--font-53);
  line-height: var(--line-height-56);
  font-weight: 800;
}

h3 {
  font-size: var(--font-43);
  line-height: var(--line-height-48);
  font-weight: 800;
}

h4 {
  font-size: var(--font-34);
  line-height: var(--line-height-40);
}

h5 {
  font-size: var(--font-28);
  line-height: var(--line-height-32);
  font-weight: 800;
}

h6 {
  font-size: var(--font-22);
  line-height: var(--line-height-24);
  font-weight: 800;
}

a {
  cursor: pointer;
  color: var(--purple-1);
  text-decoration: none;
}

@media (max-width: 768px) {
  .page-header {
    text-align: initial !important;
  }
  .container > h1 {
    
    font-size: 37px !important;
    line-height: 1.3em !important;

  }
}

a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

/********** Links ***********/
.link {
  color: var(--white-0);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-17);
  line-height: var(--spacing-24);
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
}

.link:visited {
  text-decoration: none;
  color: white;
}

.link::after {
  content: '';
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 3px;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 1px;
  transform: rotate(-45deg);
}

.link.no-icon::after {
  display: none;
}

.link.on-light {
  color: var(--navy-1);
  border-color: var(--navy-1);
}

.link.on-light {
  color: var(--navy-1);
  border-color: var(--navy-1);
}

.link.secondary {
  color: var(--purple-1);
}

.link.small {
  font-size: var(--font-14);
}

.link.small::after {
  margin-bottom: 0;
}

/* INPUT */

lightning-input {
  border: none !important;
}

input, select {
  border: 1px solid var(--navy-4) !important;
  border-radius: 6px !important;
  color: var(--navy-2) !important;
  height: 50px !important;
  font-weight: 450 !important;
}
input[type="submit"] {
  color: white !important;
  background-color: var(--navy-2);
}

input:focus,
input:active,
input:focus-visible {
  border-color: var(--purple-2);
  outline: none;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-24) var(--spacing-16);
}

/********* HEADER **********/
.header ul {
  list-style: none;
  display: flex;
}

.header ul li {
  margin: 1rem;
  list-style-type: none;
}

.header ul li a.link {
  font-size: var(--font-14);
}

/********* FOOTER **********/
.footer {
  padding: var(--spacing-24) 0;
  background-color: var(--gray-5);
}

.footer .inner-content {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-14);
}

.footer .copyright {
  color: var(--gray-1);
  display: inline-block;
}

.footer a.link {
  font-weight: normal;
  font-size: var(--font-14);
}

.footer .social-links {
  display: flex;
}

.footer .social-links li {
  margin-right: var(--spacing-16);
  list-style-type: none;
}

@media print {
  .footer {
    display: none;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* This is a trick to allow the element with this class name to be full viewport width at any size, without the max-width container affecting the size */
@media screen and (min-width: 1199px) {
  .full-width {
    margin-left: calc(-100vw / 2 + var(--max-width) / 2);
    margin-right: calc(-100vw / 2 + var(--max-width) / 2);
  }
}

/* BREAKPOINT-XL */
@media screen and (max-width: 1168px) {
  .inner-content {
    padding-inline: var(--spacing-16);
  }

  h1 {
    font-size: $font-43;
    line-height: $line-height-56;
  }

  .full-width .inner-content {
    padding-inline: var(--spacing-16);
  }
}

/* BREAKPOINT-LG */
@media screen and (max-width: 768px) {
  .content-block {
    font-size: $font-17;
    line-height: $spacing-24;
  }
}

.overflow-hidden {
  overflow: hidden !important;
}
span.valign-middle {
	position: relative;
	top: 19px;
}

#auraErrorMessage {
  display: none !important;
}