/********************************** Root variables ********************************/
/* Modify these variables if there is a change in the design system */
:root {
    /* Colours */
    --neutral-50: #f9f8f8;
    --neutral-100: #edeaea;
    --neutral-200: #dbd5d5;
    --neutral-300: #c8c1c0;
    --neutral-400: #b6acab;
    --neutral-500: #a49796;
    --neutral-600: #928281;
    --neutral-700: #695c5b;
    --neutral-800: #3f3737;
    --neutral-900: #151212;

    --sand-50: #fefdfc;
    --sand-100: #fbf9f6;
    --sand-200: #f7f2ed;
    --sand-300: #f3ece4;
    --sand-400: #efe5db;
    --sand-500: #ebdfd2;
    --sand-600: #dac4ab;
    --sand-700: #b88d5e;
    --sand-800: #745533;
    --sand-900: #4d3822;

    --red-50: #fef3f3;
    --red-100: #fddcda;
    --red-200: #fbb9b5;
    --red-300: #f99690;
    --red-400: #f7736b;
    --red-500: #f55046;
    --red-600: #f32d21;
    --red-700: #bb140a;
    --red-800: #700c06;
    --red-900: #4b0804;

    --blue-50: #eff5fd;
    --blue-100: #d0e2f8;
    --blue-200: #a1c4f2;
    --blue-300: #71a7eb;
    --blue-400: #428ae4;
    --blue-500: #1e6ed2;
    --blue-600: #1a60b8;
    --blue-700: #134683;
    --blue-800: #0b294f;
    --blue-900: #081c35;

    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    --error-50: #fef3f3;
    --error-100: #fddcda;
    --error-200: #fbb9b5;
    --error-300: #f9dd7e;
    --error-400: #f7736b;
    --error-500: #f55046;
    --error-600: #f32d21;
    --error-700: #bb140a;
    --error-800: #700c06;
    --error-900: #4b0804;

    --shade-0: #fbf9f6;
    --shade-100: #0a0a1e;

    /* Font sizes */
    --font-size-display-01: clamp(2.5rem, 1.136rem + 6.818vw, 6.25rem); 
    --font-size-display-02: clamp(2.125rem, 1.443rem + 3.409vw, 4rem);
    --font-size-h1: clamp(2.027rem, 1.377rem + 3.251vw, 3.815rem);
    --font-size-h2: clamp(1.802rem, 1.347rem + 2.273vw, 3.052rem);
    --font-size-h3: clamp(1.602rem, 1.297rem + 1.525vw, 2.441rem);
    --font-size-h4: clamp(1.424rem, 1.232rem + 0.962vw, 1.953rem);
    --font-size-h5: clamp(1.266rem, 1.158rem + 0.54vw, 1.563rem);
    --font-size-h6: clamp(1.125rem, 1.08rem + 0.227vw, 1.25rem);
    --font-size-p: clamp(1rem, 0.864rem + 0.76882vw, 1.375rem);
    --font-size-small: clamp(0.813rem, 0.744rem + 0.341vw, 1rem);

    /* Font family */
    --aeonik: "Aeonik", "Plus Jakarta Sans", sans- if;
    --clash-display: "ClashDisplay", sans-serif;
}


/************************************ Typefaces ***********************************/
/* Aeonik */
@font-face {
    font-family: "Aeonik";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-Regular.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-Regular.woff') format(woff);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-RegularItalic.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-RegularItalic.woff') format(woff);
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-Bold.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-Bold.woff') format(woff);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-BoldItalic.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-BoldItalic.woff') format(woff);
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-Black.woff') format(woff);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aeonik";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/Aeonik/Aeonik-BlackItalic.woff') format(woff);
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Clash Display */
@font-face {
    font-family: "ClashDisplay";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Medium.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Medium.woff') format(woff),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Medium.ttf') format(truetype);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ClashDisplay";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Semibold.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Semibold.woff') format(woff),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Semibold.ttf') format(truetype);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ClashDisplay";
    src: 
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Bold.woff2') format(woff2),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Bold.woff') format(woff),
        url('https://4538263.fs1.hubspotusercontent-na1.net/hubfs/4538263/fonts/ClashDisplay/ClashDisplay-Bold.ttf') format(truetype);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/******************************** General variables *******************************/

























.content-wrapper,
.dnd-section > .row-fluid {
    max-width: unset;
    margin: 0 auto;
}

/* Lists containing cards */
.refuel-cards__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.section--full-width {
    padding-left: 0;
    padding-right: 0;
}

/* Padding modifiers */
@media only screen and (max-width: 767px) {
    .v-padding--sm {
        padding-top: calc(12rem * 0.768);
        padding-bottom: calc(12rem * 0.768);
    }

    .v-padding--md {
        padding-top: calc(16rem * 0.768);
        padding-bottom: calc(16rem * 0.768);
    }

    .v-padding--lg {
        padding-top: calc(20rem * 0.768);
        padding-bottom: calc(20rem * 0.768);
    }
  
    .v-padding--xl {
        padding-top: calc(24rem * 0.768);
        padding-bottom: calc(24rem * 0.768);
    }

    .vb-padding--sm {
        padding-bottom: calc(12rem * 0.768);
    }

    .vb-padding--md {
        padding-bottom: calc(16rem * 0.768);
    }

    .vb-padding--lg {
        padding-bottom: calc(20rem * 0.768);
    }

    .vb-padding--xl {
        padding-bottom: calc(24rem * 0.768);
    }

    .vt-padding--sm {
        padding-top: calc(12rem * 0.768);
    }

    .vt-padding--md {
        padding-top: calc(16rem * 0.768);
    }

    .vt-padding--lg {
        padding-top: calc(20rem * 0.768);
    }

    .vt-padding--xl {
        padding-top: calc(24rem * 0.768);
    }

}

@media only screen and (min-width: 768px) {
    .v-padding--sm {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }

    .v-padding--md {
        padding-top: 16rem;
        padding-bottom: 16rem;
    }
  
    .v-padding--xl {
        padding-top: 24rem;
        padding-bottom: 24rem;
    }

    .v-padding--lg {
        padding-top: 20rem;
        padding-bottom: 20rem;
    }

    .vb-padding--sm {
        padding-bottom: 12rem;
    }

    .vb-padding--md {
        padding-bottom: 16rem;
    }

    .vb-padding--lg {
        padding-bottom: 20rem;
    }

    .vb-padding--xl {
        padding-bottom: 24rem;
    }

    .vt-padding--sm {
        padding-top: 12rem;
    }

    .vt-padding--md {
        padding-top: 16rem;
    }

    .vt-padding--lg {
        padding-top: 20rem;
    }

    .vt-padding--xl {
        padding-top: 24rem;
    }
}

:root {
  --section-x-padding: 1rem;
}

    .dnd-section,
    .content-container,
    .fullscreen_section {
        padding-left: var(--section-x-padding);
        padding-right: var(--section-x-padding);
    }

    body .dnd-section.refuel-section-lp-carousel {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .hl-padding {
        padding-left: var(--section-x-padding);
    }

@media only screen and (max-width: 767px) {
    .content-wrapper--vertical-spacing {
        padding-top: calc(24rem * 0.768);
        padding-bottom: calc(24rem * 0.768);
    }
}

@media only screen and (min-width: 768px) {
    .dnd-section,
    .content-container,
    .fullscreen_section,
    .hl-padding{
      --section-x-padding: 2rem;
    }
}

@media only screen and (min-width: 1024px) {
    .content-wrapper--vertical-spacing {
        padding-top: 24rem;
        padding-bottom: 24rem;
    }
  
    body .dnd-section.refuel-section-lp-carousel {
        padding-left: var(--section-x-padding) !important;
        padding-right: var(--section-x-padding) !important;
    }
}

@media only screen and (min-width: 1440px) {
    .dnd-section,
    .content-container,
    .fullscreen_section,
    .hl-padding{
      --section-x-padding: 8.25rem;
    }
}

@media only screen and (min-width: 1920px) {
    .dnd-section,
    .content-container,
    .fullscreen_section,
    .hl-padding {
      --section-x-padding: 10.25rem;
    }
}

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

.fullscreen_section>.row-fluid {
    margin-top: auto;
    margin-bottom: auto;
}








html {
    color: var(--shade-100);
    background-color: var(--sand-200);
    font-family: var(--aeonik);
    font-weight: 400;
    scroll-behavior: smooth;
}

/* Classes for icons */
.icon {
    display: block;
}

.icon--xs {
    font-size: 16px;
}

.icon--sm {
    font-size: 24px;
}

.icon--md {
    font-size: 32px;
}

.icon--lg {
    font-size: 40px;
}

.icon--xl {
    font-size: 48px;
}

.icon--xxl {
    font-size: 64px;
}

.icon--light-sand,
.icon--light-sand svg{
    color: var(--sand-200);
    fill: var(--sand-200);
}

.icon--sand,
.icon--sand svg{
    color: var(--sand-500);
    fill: var(--sand-500);
}

.icon--light-blue,
.icon--light-blue svg{
    color: var(--blue-200);
    fill: var(--blue-200);
}

.icon--blue,
.icon--blue svg{
    color: var(--blue-500);
    fill: var(--blue-500);
}

.icon--light-red,
.icon--light-red svg{
    color: var(--red-200);
    fill: var(--red-200);
}

.icon--red,
.icon--red svg{
    color: var(--red-500);
    fill: var(--red-500);
}

.icon--black,
.icon--black svg{
    color: var(--shade-100);
    fill: var(--shade-100);
}

@media only screen and (max-width: 767px) {
    .icon--xl {
        font-size: 40px;
    }

    .icon--xxl {
        font-size: 48px;
    }
}

/* Classes for round corners */
.round-corners {
    overflow: hidden;
    border-radius: 12px
}

@media only screen and (min-width: 768px) {
    .round-corners {
        border-radius: 28px;
    }
}

/* Classes for divider */
.content__divider {
    width: 100%;
    height: 2px;
}

.divider--thin {
    height: 1px;
}

.divider--red {
    background: var(--red-500);
}

.divider--blue {
    background: var(--blue-500);
}

.divider--light-sand {
    background: var(--sand-200);
}

.divider--sand {
    background: var(--sand-400);
}

.divider--black {
    background: var(--shade-100);
}

.divider--neutral {
    background: var(--neutral-400);
}

/* Class for reset margin */
.margin--0 {
    margin: 0;
}







h1,
.font-size--h1 {
    font-family: "ClashDisplay";
    font-size: var(--font-size-h1);
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
}

h2,
.font-size--h2,
h3,
.font-size--h3,
h4,
.font-size--h4,
h5,
.font-size--h5,
h6,
.font-size--h6 {
    font-family: var(--aeonik);
    font-weight: 700;
    margin: 0 0 0.76825em 0;
    line-height: 1.05;
}

h2,
.font-size--h2 {
    font-size: var(--font-size-h2);
}

h3,
.font-size--h3 {
    font-size: var(--font-size-h3);
}

h4,
.font-size--h4 {
    font-size: var(--font-size-h4);
}

h5,
.font-size--h5 {
    font-size: var(--font-size-h5);
}

h6,
.font-size--h5 {
    font-size: var(--font-size-h6);
}

p, ol, ul {
    font-size: var(--font-size-p);
    margin: 0 0 2rem 0;
    line-height: 1.4;
}

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

a {
    color: unset;
    text-decoration: underline;
    transition-duration: 0.2s; 
}

a:focus,
a:hover,
a:active {
    color: var(--sand-600);
}

/* Modifiers */
/* Display 01 - For extra-large headings or text */
.display-01 {
    font-family: var(--clash-display);
    font-size: var(--font-size-display-01);
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

/* Display 02 - For larger headings or text */
.display-02 {
    font-family: var(--aeonik);
    font-size: var(--font-size-display-02);
    font-weight: 400;
    line-height: 1;
}

/* Homepage H1 */
/*
@media only screen and (min-width: 768px) {
  @supports (animation-range: entry-crossing) {
      .fit-to-width {
          font-size: 17.5rem;
      }

      .fit-to-width > * {
          inline-size: max-content;
          transform-origin: 0 0;
          animation: apply-text-ratio linear;
          animation-timeline: view(inline);
          animation-range: entry-crossing;
          display: block;
      }

  }

  @keyframes apply-text-ratio {
    from {
      scale: 0;
      margin-block-end: -1lh;
    }
  }
}
*/

.fit-to-width {
  font-size: 19vw;
  text-wrap: nowrap;
  overflow-x: clip;
}

@media only screen and (min-width: 768px) {
  .fit-to-width {
    overflow-x: clip;
  }
}

/* Classes for text weight */
.font-weight--400 {
    font-weight: 400;
}

.font-weight--700 {
    font-weight: 700;
}

.font-weight--900 {
    font-weight: 900;
}

/* Classes for text colour */
.text--light-sand {
    color: var(--sand-200);
}

.text--sand {
    color: var(--sand-400);
}

.text--black {
    color: var(--shade-100);
}

.text--blue {
    color: var(--blue-500);
}

.text--red {
    color: var(--red-500);
}

.text--dark-red {
    color: var(--red-700);
}

/* Title pill */
/* Classes */
.title-pill {
    border-radius: 40rem;
    display: inline-flex;
    margin: 0 0 2.75rem;
    color: var(--sand-200);
}

.title-pill h1 {
    font-family: var(--aeonik);
    font-size: var(--font-size-p);
    margin: 0;
}

/* Modifiers */
.title-pill--blue {
    background: var(--blue-500);
}

.title-pill--dark-blue {
    background: var(--blue-700);
}

.title-pill--sand {
    background: var(--sand-400);
}

.title-pill--red {
    background: var(--red-700);
}

@media only screen and (max-width: 767px) {
    .title-pill {
        margin: 0 0 1.5rem;
        padding: 1rem 2rem;
    }
}

@media only screen and (min-width: 768px) {
    .title-pill {
        margin: 0 0 2.75rem;
        padding: 1.25rem 2.25rem;
    }
}









button,
button:link,
button:visited,
.button,
.button:link,
.button:visited,
.hs-button,
.hs-button:link,
.hs-button:visited {
    font-family: var(--aeonik);
    border-radius: 40rem;
    font-style: normal;
    line-height: unset;
    text-decoration: none;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    box-shadow: 0px 4px 4px 0px rgba(10, 10, 30, 0.10);
}

button:disabled,
.button:disabled,
.hs-button:disabled,
.button--primary:disabled,
.button--secondary:disabled,
.button--primary:disabled:focus,
.button--primary:disabled:hover,
.button--primary:disabled:active,
.button--secondary:disabled:focus,
.button--secondary:disabled:hover,
.button--secondary:disabled:active {
    background: var(--neutral-200);
    color: var(--neutral-500);
    cursor: not-allowed;
    box-shadow: 0px 4px 4px 0px rgba(10, 10, 30, 0.10) inset;
}

/* PRIMARY BUTTON */
.button--primary,
.button--primary:link,
.button--primary:visited {
    background: var(--shade-100);
    color: var(--sand-300);
}

.button--primary:focus,
.button--primary:hover {
    background: var(--blue-300);
    transition-duration: 0.2s;
}

.button--primary:active {
    background: var(--blue-400);
}

/* SECONDARY BUTTON */
.button--secondary,
.button--secondary:link,
.button--secondary:visited {
    background: var(--sand-300);
    color: var(--shade-100);
}

.button--secondary:focus,
.button--secondary:hover {
    background: var(--blue-100);
    transition-duration: 0.2s;
}

.button--secondary:active {
    background: var(--blue-200);
}

/* BUTTON SIZES */
.button--sm {
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 1.5rem;
}

.button--md {
    font-size: 1.25rem;
    font-weight: 400;
    padding: 0.5rem 1.75rem;
}

/* On mobile, larger buttons will be rendered smaller */
@media only screen and (max-width: 767px) {
    .button--md {
        font-size: 1rem;
        font-weight: 400;
        padding: 0.5rem 1.5rem;
    }
  
    .button--lg {
        font-size: 1.125rem;
        font-weight: 400;
        padding: 0.5rem 1.5rem;
    }

    .button--xl {
        font-size: 1.25rem;
        font-weight: 700;
        padding: 0.5rem 1.75rem;
    }

    .button--xl i.icon {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }
}

@media only screen and (min-width: 768px) {
    .button--lg {
        font-size: 1.375rem;
        font-weight: 400;
        padding: 0.75rem 2rem;
    }

    .button--xl {
        font-size: 1.75rem;
        font-weight: 700;
        padding: 1.25rem 2.25rem;
    }
}

/* Button text */
@media only screen and (max-width: 767px) {
  .button__text {
    text-wrap: wrap;
    max-width: 270px;
  }
}

/* REFUEL BUTTON */
.refuel-button {
    text-wrap: nowrap;
}

/* ICON BUTTON */
.icon-button {
    text-decoration: none;
}

.icon-button i {
    transition: 0.2s;
}

.icon-button:focus i,
.icon-button:hover i,
.icon-button:active i {
    margin-left: 1rem;
}

/* SOCIALS BUTTONS */
.refuel-socials {
    display: flex;
    gap: 0.5rem;
}

.refuel-socials a {
    display: block;
    padding: 0.5rem;
}

.refuel-socials a svg,
.refuel-socials a:link svg,
.refuel-socials a:visited svg {
    height: 1.5rem;
    width: 1.5rem;
    transition: 0.2s;
}

.social-icons--dark .refuel-socials a svg,
.social-icons--dark .refuel-socials a:link svg,
.social-icons--dark .refuel-socials a:visited svg{
    fill: var(--shade-100);
}

.social-icons--dark .refuel-socials a:focus svg,
.social-icons--dark .refuel-socials a:hover svg,
.social-icons--dark .refuel-socials a:active svg{
    fill: var(--blue-500);
}

.social-icons--light .refuel-socials a svg,
.social-icons--light .refuel-socials a:link svg,
.social-icons--light .refuel-socials a:visited svg{
    fill: var(--sand-400);
}

.social-icons--light .refuel-socials a:focus svg,
.social-icons--light .refuel-socials a:hover svg,
.social-icons--light .refuel-socials a:active svg{
    fill: var(--red-500);
}

.refuel-socials a,
.refuel-socials a:link,
.refuel-socials a:visited {
    font-size: 1.5rem;
    transition: 0.2s;
}

.social-icons--dark .refuel-socials a,
.social-icons--dark .refuel-socials a:link,
.social-icons--dark .refuel-socials a:visited {
    color: var(--shade-100);
}

.social-icons--dark .refuel-socials a:focus,
.social-icons--dark .refuel-socials a:hover,
.social-icons--dark .refuel-socials a:active {
    color: var(--blue-500);
}

.social-icons--light .refuel-socials a,
.social-icons--light .refuel-socials a:link,
.social-icons--light .refuel-socials a:visited {
    color: var(--sand-400);
}

.social-icons--light .refuel-socials a:focus,
.social-icons--light .refuel-socials a:hover,
.social-icons--light .refuel-socials a:active {
    color: var(--red-500);
}

@media only screen and (max-width: 768px){
  .refuel-button{
    text-wrap: wrap;
    text-align: left;
  }
}








form p,
form a,
span.form-separator {
    font-size: clamp(1.125rem, 1.034rem + 0.455vw, 1.375rem);
}

form ul {
    font-size: inherit;
}

form label {
    font-size: 1.125rem;
}

form legend {
    font-size: 1.188rem;
    font-weight: 700;
}

/* Input fields */
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
    background: var(--sand-200);
    border: var(--neutral-400) solid 1px;
    border-radius: 8px;
    font-size: 1.125rem;
    padding: 0.8rem;
    width: 100% !important;
}

form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
form input[type=file]:focus,
form select:focus,
form textarea:focus {
  border-color: var(--blue-500);
  outline: var(--blue-200) solid 2px;
}

form input[type=text]:active,
form input[type=email]:active,
form input[type=password]:active,
form input[type=tel]:active,
form input[type=number]:active,
form input[type=file]:active,
form select:active,
form textarea:active {
  border-color: var(--blue-500);
}

/* Placeholder text */
::-webkit-input-placeholder {
  color: var(--neutral-400);
}

::-moz-placeholder {
  color: var(--neutral-400);
}

:-ms-input-placeholder {
  color: var(--neutral-400);
}

::placeholder {
  color: var(--neutral-400);
}

/* Validation */
form input:invalid,
.hs-input.invalid.error {
    border-color: var(--error-500);
}

.hs-error-msg {
    color: var(--error-500);
    font-size: 1rem;
}

/* Form separator */
span.form-separator {
    display: inline-block;
    margin: 4rem 0;
    font-style: italic;
}

/* Checkbox input */
form input[type=checkbox] {
    display: inline-block;
    height: 0.9rem;
    width: 0.9rem;
}

form label[for=hs-login-widget-remember],
form label[for=hs-passwordless-auth-explicit-consent],
form label[for=hs-register-widget-explicit-consent] {
    display: inline-block;
}

/* Submit button */
form input[type=submit],
form .hs-button,
form input[type=submit]:link,
form .hs-button:link {
    border: none;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
}

/* Password */
form a.hs-login-widget-show-password,
form a.hs-register-widget-show-password,
form a.hs-reset-widget-show-password {
    display: block;
    text-align: right;
}

.form-input-validation-message,
.form-input-validation-message label,
form a.hs-login-widget-show-password,
form a.hs-register-widget-show-password,
form a.hs-reset-widget-show-password {
    font-size: 1rem;
}

/* Legal/privacy consent */
form .legal-consent-container a,
form .hsfc-DataPrivacyField a {
  font-size: inherit;
}

/* General email subscription form */
.hsForm_8a8b0a2b-29bc-4686-9346-c6c98a080d77 .hs_email .hs-input {
  width: 100% !important;
}
  
.hsForm_8a8b0a2b-29bc-4686-9346-c6c98a080d77 .legal-consent-container ul li label {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

.hsForm_8a8b0a2b-29bc-4686-9346-c6c98a080d77 .legal-consent-container ul li label input,
.hsForm_8a8b0a2b-29bc-4686-9346-c6c98a080d77 .legal-consent-container ul li label span {
  margin: 0 !important;
}

.hsForm_8a8b0a2b-29bc-4686-9346-c6c98a080d77 .hs_subscription_types ul li {
  margin: 0 !important;
}











/* Table */

table {
  background: var(--shade-100);
  border: 4px solid var(--shade-100);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

/* Table cells */

td,
th {
  padding: 0.5rem 0.75rem;
}

td {
  border-top: 4px solid var(--shade-100); 
  border-right: 4px solid var(--shade-100);
}

/* Classes for table/row/cell backgrounds */
.table-background--light-sand {
  background: var(--sand-200);
}

.table-background--red {
  background: var(--red-500);
}

.table-background--sand {
  background: var(--sand-500);
}

.table-background--blue {
  background: var(--blue-500);
}

.table-background--black {
  background: var(--shade-100);
}

.table-background--light-blue {
  background: var(--blue-50);
}

/* Classes for cell-text alignment */
.cell-text-align--center {
  text-align: center;
}

.cell-text-align--left {
  text-align: left;
}

.cell-text-align--right {
  text-align: right;
}








header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}








@media only screen and (max-width: 767px) {
    footer .footer__container .dnd-section {
        padding-top: 4.125rem;
        padding-bottom: 3.5rem;
    }

    footer .footer__lp-container .dnd-section {
        padding-top: 2.5rem;
        padding-bottom: 3.5rem;
    }
}

@media only screen and (min-width: 768px) {
    footer .footer__container .dnd-section {
        padding-top: 10rem;
        padding-bottom: 6.625rem;
    }

    footer .footer__lp-container .dnd-section {
        padding: 2.85rem 2rem 6.625rem;
    }
}

@media only screen and (min-width: 1024px) {
    footer .footer__container .dnd-section {
        padding-top: 10rem;
        padding-bottom: 3.625rem;
    }
}









/* CARDS */
/* Heading above cards */
.heading__container {
  gap: 1.5rem;
}

/* BLOGS */
/* Featured images */
.blog__featured-image {
    max-width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    flex: 1 1 auto;
    /* Allow images to grow and shrink */
    object-fit: cover;
}
/* BLOGS // END */

/** Override the default HubDB Search Field Suggestions border style as for some reason it ignores the first <li> **/
.refuel-hubdb-search .hubdb-search-field__suggestions li:not(:last-child) {
  border-bottom: 1px solid var(--neutral-500);
}

/* RC Icons */
.other-fa-icon.icon--xs svg {
  width: 16px;
  height: 16px;
}

.other-fa-icon.icon--sm svg {
  width: 24px;
  height: 24px;
}

.other-fa-icon.icon--md svg {
  width: 32px;
  height: 32px;
}

.other-fa-icon.icon--lg svg {
  width 40px;
  height: 40px;
}

.other-fa-icon.icon--xl svg {
  width: 48px;
  height: 48px;
}

.other-fa-icon.icon--xxl svg {
  width: 64px;
  height: 32px;
}


@media only screen and (max-width: 767px) {
  .other-fa-icon.icon--xl svg {
    width: 40px;
    height: 40px;
  }

  .other-fa-icon.icon--xxl {
    width: 48px;
    height: 48px;
    }
}








/* Hero section */
.refuel-section-page-header {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media only screen and (max-width: 767px) {
    .refuel-section-page-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* CTA banner section */
.refuel-section-cta-banner {
    min-height: 27.5rem;
}

.refuel-section-cta-banner .hs_cos_wrapper_type_text {
    font-size: var(--font-size-h3);
    font-weight: 700;
    line-height: 1.1;
}

@media only screen and (max-width: 767px) {
    div.refuel-section-cta-banner > .row-fluid {
        justify-content: space-between;
    }    
}

@media only screen and (min-width: 768px) {
    div.refuel-section-cta-banner .refuel-module-cta__container {
        text-align: end;
    }
}
/* CTA banner section // END */

/* Image/text sections */
@media only screen and (max-width: 767px) {
    .refuel-alternating-text-image-section > .row-fluid > .dnd-column > .dnd-row > .row-fluid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .refuel-alternating-text-image-section > .row-fluid > .dnd-column > .dnd-row:nth-child(odd):not(:first-child) > .row-fluid {
        flex-direction: column-reverse;
    }
}

@media only screen and (min-width: 768px) {
    .refuel-text-image-section > .row-fluid,
    .refuel-alternating-text-image-section .dnd-row > .row-fluid {
        gap: 4rem;
    }
}
/* Image/text sections // END */


.embedded-cta-audits {
  text-decoration: none;
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.embedded-cta-audits>div:first-child {
  width: 58%;
}

.embedded-cta-audits>div:last-child {
  width: 40%;
  text-align: center;
}

.embedded-cta-audits>div:last-child img {
  max-height: 250px;
}

.embedded-cta-audits p {
  font-weight: 700;
  font-size: 18px;
}

.embedded-cta-audits p:last-child {
  margin-bottom: 0;
}

.embedded-cta-audits .text__headline {
  font-family: "Clash Display", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
}

#hs_cos_wrapper_widget_1697596326229,
#hs_cos_wrapper_widget_1697586768903,
#hs_cos_wrapper_widget_1697596341296,
#hs_cos_wrapper_widget_1698018319459 {
  width: 100%;
}










.cta-google-ads{
  color: #ebdfd2;
  background: linear-gradient(110deg, #1e6ed2 60%, #0a0a1e 60%);
}


.cta-seo-audit {
  background: linear-gradient(110deg, #afd2ff 60%, #0a0a1e 60%);
  color: #0a0a1e;
}


.cta-hubspot-audit {
  background: linear-gradient(110deg, #afd2ff 60%, #0a0a1e 60%);
  color: #0a0a1e;
}


.cta-website-grader {
  color: #ebdfd2;
  background: linear-gradient(110deg, #1e6ed2 60%, #0a0a1e 60%);
}


.cta-google-ads:hover,
.cta-seo-audit:hover,
.cta-hubspot-audit:hover,
.cta-website-grader:hover{
  background: linear-gradient(110deg, #f55046 60%, #0a0a1e 60%);
  color: #0a0a1e;
  transition-duration: 0.2s;
}