/* add global styles that can be loaded post LCP here */
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
  }
  code,
  kbd,
  samp {
    font-family: monospace, sans-serif;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }

  button{
    font-family: var(--body-font-arena);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
    @media (width >=1024px) {
      font-size: 1rem;
    }
  }

  button,
  input {
    overflow: visible;
  }

  button,
  select {
    text-transform: none;
  }

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    appearance: button;
  }

  button::-moz-focus-inner,
  [type='button']::-moz-focus-inner,
  [type='reset']::-moz-focus-inner,
  [type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  button:-moz-focusring,
  [type='button']:-moz-focusring,
  [type='reset']:-moz-focusring,
  [type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
  }

  progress {
    vertical-align: baseline;
  }

  textarea {
    overflow: auto;
  }

  [type='checkbox'],
  [type='radio'] {
    box-sizing: border-box;
    padding: 0;
  }

  [type='number']::-webkit-inner-spin-button,
  [type='number']::-webkit-outer-spin-button {
    height: auto;
  }

  [type='search'] {
    appearance: textfield;
    outline-offset: -2px;
  }

  [type='search']::-webkit-search-decoration {
    appearance: none;
  }

  ::-webkit-file-upload-button {
    appearance: button;
    font: inherit;
  }

  details {
    display: block;
  }

  summary {
    display: list-item;
  }

  template {
    display: none;
  }

  [hidden] {
    display: none;
  }
  /* -row- */
  .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .row {
    display: flex;
    flex-flow: row wrap;
    margin-right: -8px;
    margin-left: -8px;
  }

  [class*='col-'] {
    flex-basis: 100%;
    max-width: 100%;
    padding-right: 8px;
    padding-left: 8px;
  }

  .row.reverse {
    flex-direction: row-reverse;
  }

  .col-xs-1 {
    flex-basis: 8.3333%;
    max-width: 8.3333%;
  }

  .col-xs-2 {
    flex-basis: 16.6667%;
    max-width: 16.6667%;
  }

  .col-xs-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-xs-4 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }

  .col-xs-5 {
    flex-basis: 41.6667%;
    max-width: 41.6667%;
  }

  .col-xs-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-xs-7 {
    flex-basis: 58.3333%;
    max-width: 58.3333%;
  }

  .col-xs-8 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
  }

  .col-xs-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-xs-10 {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
  }

  .col-xs-11 {
    flex-basis: 91.6667%;
    max-width: 91.6667%;
  }

  .col-xs-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  @media (width >=768px) {
    .container {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-right: 56px;
      padding-left: 56px;
    }

    .row {
      display: flex;
      flex-flow: row wrap;
      margin-right: -12px;
      margin-left: -12px;
    }

    [class*='col-'] {
      flex-basis: 100%;
      max-width: 100%;
      padding-right: 12px;
      padding-left: 12px;
    }

    .col-sm-1 {
      flex-basis: 8.3333%;
      max-width: 8.3333%;
    }

    .col-sm-2 {
      flex-basis: 16.6667%;
      max-width: 16.6667%;
    }

    .col-sm-3 {
      flex-basis: 25%;
      max-width: 25%;
    }

    .col-sm-4 {
      flex-basis: 33.3333%;
      max-width: 33.3333%;
    }

    .col-sm-5 {
      flex-basis: 41.6667%;
      max-width: 41.6667%;
    }

    .col-sm-6 {
      flex-basis: 50%;
      max-width: 50%;
    }

    .col-sm-7 {
      flex-basis: 58.3333%;
      max-width: 58.3333%;
    }

    .col-sm-8 {
      flex-basis: 66.6667%;
      max-width: 66.6667%;
    }

    .col-sm-9 {
      flex-basis: 75%;
      max-width: 75%;
    }

    .col-sm-10 {
      flex-basis: 83.3333%;
      max-width: 83.3333%;
    }

    .col-sm-11 {
      flex-basis: 91.6667%;
      max-width: 91.6667%;
    }

    .col-sm-12 {
      flex-basis: 100%;
      max-width: 100%;
    }
  }

  @media (width >=1200px) {
    .container {
      width: 1200px;
      max-width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-right: 56px;
      padding-left: 56px;
    }

    .col-md-1 {
      flex-basis: 8.3333%;
      max-width: 8.3333%;
    }

    .col-md-2 {
      flex-basis: 16.6667%;
      max-width: 16.6667%;
    }

    .col-md-3 {
      flex-basis: 25%;
      max-width: 25%;
    }

    .col-md-4 {
      flex-basis: 33.3333%;
      max-width: 33.3333%;
    }

    .col-md-5 {
      flex-basis: 41.6667%;
      max-width: 41.6667%;
    }

    .col-md-6 {
      flex-basis: 50%;
      max-width: 50%;
    }

    .col-md-7 {
      flex-basis: 58.3333%;
      max-width: 58.3333%;
    }

    .col-md-8 {
      flex-basis: 66.6667%;
      max-width: 66.6667%;
    }

    .col-md-9 {
      flex-basis: 75%;
      max-width: 75%;
    }

    .col-md-10 {
      flex-basis: 83.3333%;
      max-width: 83.3333%;
    }

    .col-md-11 {
      flex-basis: 91.6667%;
      max-width: 91.6667%;
    }

    .col-md-12 {
      flex-basis: 100%;
      max-width: 100%;
    }
  }

  @media (width >=1366px) {
    .container {
      width: 1366px;
      max-width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-right: 56px;
      padding-left: 56px;
    }

    .col-lg-1 {
      flex-basis: 8.3333%;
      max-width: 8.3333%;
    }

    .col-lg-2 {
      flex-basis: 16.6667%;
      max-width: 16.6667%;
    }

    .col-lg-3 {
      flex-basis: 25%;
      max-width: 25%;
    }

    .col-lg-4 {
      flex-basis: 33.3333%;
      max-width: 33.3333%;
    }

    .col-lg-5 {
      flex-basis: 41.6667%;
      max-width: 41.6667%;
    }

    .col-lg-6 {
      flex-basis: 50%;
      max-width: 50%;
    }

    .col-lg-7 {
      flex-basis: 58.3333%;
      max-width: 58.3333%;
    }

    .col-lg-8 {
      flex-basis: 66.6667%;
      max-width: 66.6667%;
    }

    .col-lg-9 {
      flex-basis: 75%;
      max-width: 75%;
    }

    .col-lg-10 {
      flex-basis: 83.3333%;
      max-width: 83.3333%;
    }

    .col-lg-11 {
      flex-basis: 91.6667%;
      max-width: 91.6667%;
    }

    .col-lg-12 {
      flex-basis: 100%;
      max-width: 100%;
    }
  }

  @media (width >=1920px) {
    .container {
      width: 1920px;
      max-width: 100%;
      margin-right: auto;
      margin-left: auto;
      padding-right: 56px;
      padding-left: 56px;
    }

    .col-xl-1 {
      flex-basis: 8.3333%;
      max-width: 8.3333%;
    }

    .col-xl-2 {
      flex-basis: 16.6667%;
      max-width: 16.6667%;
    }

    .col-xl-3 {
      flex-basis: 25%;
      max-width: 25%;
    }

    .col-xl-4 {
      flex-basis: 33.3333%;
      max-width: 33.3333%;
    }

    .col-xl-5 {
      flex-basis: 41.6667%;
      max-width: 41.6667%;
    }

    .col-xl-6 {
      flex-basis: 50%;
      max-width: 50%;
    }

    .col-xl-7 {
      flex-basis: 58.3333%;
      max-width: 58.3333%;
    }

    .col-xl-8 {
      flex-basis: 66.6667%;
      max-width: 66.6667%;
    }

    .col-xl-9 {
      flex-basis: 75%;
      max-width: 75%;
    }

    .col-xl-10 {
      flex-basis: 83.3333%;
      max-width: 83.3333%;
    }

    .col-xl-11 {
      flex-basis: 91.6667%;
      max-width: 91.6667%;
    }

    .col-xl-12 {
      flex-basis: 100%;
      max-width: 100%;
    }
  }

  /*
        Arena Style Begins
    */

  :root {
    /* Colors Palette */
    --primary-black: #000;
    --secondary-black: #1d1d1d;
    --neutrals-headings: #1d1d1d;
    --neutrals-sub-texts-paragraphs: #000;
    --secondary-white: #fdfdfd;
    --ternary-black: #181818;
    --primary-blue: #19458B;
    --ternary-blue: #171c8f33;
    --raisin-black: #231f20;
    --secondary-main: #515151;

    /* Blue Primary Colour */
    --primary-blue-50: #eff0ff;
    --primary-blue-75: #E0ECFF;
    --primary-blue-100: #cbcdff;
    --primary-blue-200: #a7abff;
    --primary-blue-300: #8489ff;
    --primary-blue-350: #164b91;
    --primary-blue-400: #5c62f5;
    --primary-blue-500: #4046d3;
    --primary-blue-550: #1A4993;
    --primary-blue-600: #292fb1;
    --primary-blue-700: #171c8f;
    --primary-blue-800: #0a0e6d;
    --primary-blue-900: #01044b;
    --primary-text: #171d9b;
    --fill-inside: #171d9b;
    --checked-color: #34408a;
    --secondary-blue: #D1E3FF;

    /* Read Primary Colour */
    --primary-red-500: #f00;
    --primary-red-515: #ff1515;
    --primary-red-545: #dc3545;
    --primary-red: #F0373A;
    --secondary-red: #f8dada;

    /* Blue Secondary Colour */
    --secondar-blue-500: #00b4e4;

    /* Gray Secondary Colour */
    --secondary-gray-10: #fff;
    --secondary-gray-20: #f5f5f5;
    --secondary-gray-50: #f4f4f4;
    --secondary-gray-80: #f7f7f7;
    --secondary-gray-90: #f8f9fa;
    --secondary-gray-100: #ededed;
    --secondary-gray-200: #d8d8d8;
    --secondary-gray-300: #c4c4c4;
    --secondary-gray-400: #aeafaf;
    --secondary-gray-500: #97999b;
    --secondary-gray-600: #818487;
    --secondary-gray-700: #6c6f72;
    --secondary-gray-800: #575a5e;
    --secondary-gray-900: #434649;
    --secondary-gray-1000: #bebebe;
    --neutrals-heading: #1d1d1d;
    --inactive-content: #939393;
    --bars-unselected: #ccc;
    --tags: #c4c4c4;
    --light-gray-text: #d2d2d2;
    --dark-gray-text: #474747;
    --shimmer-gray: #e0e0e0;
    --suva-gray: #8E8E8E;
    --shady-lady-gray: #969696;
    --white-smoke: #F8F8F8;
    --hover-gray-arena: rgba(196, 196, 196, 0.2);
    --ghost-gray: #D6D6D7;
    --gray-name: #A09C9C;
    --light-gray: #F0F0F0;
    --light-gray-1: #C8C8CD;
    --semantics-caution: #F0B529;
    /* Ancent Colours */
    --accent-colours-vibrant-sections-1: #fcbe62;
    --accent-colours-vibrant-sections-2: #398bd7;
    --accent-colours-vibrant-sections-3: #00bca4;
    --accent-colours-vibrant-sections-4: #e15f67;
    --accent-colours-vibrant-sections-5: #C563B1;
    --semantics-background-info-link: #DDE4EF;
    --semantics-text-or-icon-error: #C70F12;

    /* Font */
    --body-font-arena: 'roboto', 'roboto-fallback', sans-serif;

    /* Nexa colors */
    --primary-main: #18171a;
    --tertiary-white: #fff;
    --tertiary-light-grey: #f2f2f2;
    --tertiary-medium-grey: #b2b2b2;
    --tertiary-deep-Grey: #767879;
    --tertiary-black: #000;

    /* Toast message bg color */
    --semantics-caution :#F0B529;
    --primary-toast-arena-green: #37b200;
    --secondary-toast-arena-green: #e7f6e1;
    --tertiary-toast-arena-green: rgba(55, 178, 0, 0.2);
    --tea-green: #d7f0cc;
    --lily-white: #f6f8f8;
    --secondary-toast-arena-blue: #e0ecff;
    --secondary-toast-text-arena-green: #2f9900;
    --secondary-toast-text-arena-gray: #6c6c6c;
    --toast-color: #1a4993;

    /* AEM colors */
    --link-color: #035fe6;
    --link-hover-color: #136ff6;
    --link-backgroud-color: #04c;
    --list-highlight-color: #5897fb;
    --background-color: white;
    --light-color: #eee;
    --dark-color: #ccc;
    --darker-color: #999;
    --text-color: black;
    --nav-background-color: #f2f2f2;
    --radio-checked-color: #408cf4;
    --primary-color: var(--tertiary-black);

    /* Smart Finance Colors */
    --tertiary-red: #dc3545;
    --tertiary-blue: #408cf4;
    --grey-shade-0: #4a4a4a;
    --grey-shade-1: #e7e7e7;
    --grey-shade-2: #fbfbfb;
    --grey-shade-3: #eeeff2;
    --grey-shade-4: rgba(238, 238, 238, 0.3);
    --grey-shade-5: #fcfcfc;
    --grey-shade-6: #757474;
    --grey-shade-7: #b3b3b3;
    --grey-shade-8: #eee;
    --grey-shade-9: #dbdbdb;
    --grey-shade-10: #D9D9D9;
    --grey-shade-11: #323232;
    --grey-shade-12: #d0d0d0;
    --dark-grey-shade-1: #777;
    --dark-grey-shade-2: #707070;
    --dark-grey-shade-3: #999;
    --dark-grey-shade-4: #7c7c7c;
    --light-grey-shade-1: #d3d3d3;
    --light-grey-shade-2: #f4f4f4;
    --light-grey-shade-3: #c5c5c5;
    --light-grey-shade-4: #f3f3f3;
    --light-grey-shade-5: #d1d1d1;
    --light-grey-shade-6: #8d8d8d;
    --light-grey-shade-7: #c9d3d7;
    --light-grey-shade-8: #d9d9d9;
    --blue-shade-1: #164b91;
    --blue-shade-2: #06f;
    --blue-shade-3: #649ef5;
    --blue-shade-4: #408cf4;
    --black-shade-1: rgba(0, 0, 0, 0.5);
    --black-shade-2: rgba(0, 0, 0, 0.4);
    --black-shade-3: rgba(0, 0, 0, 0.1);
    --black-shade-4: rgba(0, 0, 0, 0.2);
    --black-shade-5: rgba(0, 0, 0, 0.76);
    --tertiary-green: #28a745;
    --red-shade-1: #f00;
    --red-shade-2: #c2220a;
    --red-shade-3: #ffc0b6;
    --red-shade-4: #C70F12;
    --red-shade-5: #FCD7D8;
    --sf-primary-color: var(--blue-shade-1);
    --light-orange-e50: #fe8e50;
    --grey-shade-1: rgba(196, 196, 196, 0.2);
    --slider-bg: rgba(255, 255, 255, 0.4);

    /* gradients */
    --gradient-1: linear-gradient(60.18deg, #c9d3d7 3.71%, #ebebeb 104.51%);
    --gradient-2: linear-gradient(to bottom, #08c, #04c);
    --gradient-3: linear-gradient(225deg, #cee5e9 -4.54%, #dac8c6 115.1%);
    --gradients-accent-section-bg-1: linear-gradient(228deg, rgba(23, 29, 155, 0.10) 31.52%, rgba(255, 98, 0, 0.10) 111.9%);
    --blue-filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(6397%) hue-rotate(249deg) brightness(56%) contrast(101%);

    /* fonts */
    --body-font-family: 'roboto', 'roboto-fallback';
    --fixed-font-family: 'Fira Sans', sans-serif;
    --body-heading-font-family: var(--body-font-arena);
    --service-font-family:'roboto', 'roboto-fallback';

    /* body sizes */
    --body-font-size-m: 22px;
    --body-font-size-s: 18px;
    --body-font-size-xs: 16px;
    --body-font-size-xxs: 14px;
    --body-font-size-xxxs: 12px;
    --body-font-size-xxxxs: 10px;
    --body-font-size-l:24px;

    /* body weight */
    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-550: 550;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    /* heading sizes */
    --heading-font-size-xxl: 48px;
    --heading-font-size-xl: 40px;
    --heading-font-size-l: 32px;
    --heading-font-size-regular: 28px;
    --heading-font-size-m: 24px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
    --heading-font-size-xxs: 15px;

    /* Font Variables */
    --heading-font-24-des:24px;

    /* line-height */
    --heading-lh-28-des:28px;

    /* margin and fine spaces */
    --space-1px: 0.06rem;
    --space-2px: 0.13rem;
    --space-3px: 0.19rem;
    --space-4px: 0.25rem;
    --space-5px: 0.313rem;
    --space-6px: 0.375rem;
    --space-7px: 0.438rem;
    --space-8px: 0.5rem;
    --space-9px: 0.563rem;
    --space-10px: 0.625rem;
    --space-11px: 0.688rem;
    --space-12px: 0.75rem;
    --space-13px: 0.813rem;
    --space-14px: 0.875rem;
    --space-15px: 0.938rem;
    --space-16px: 1rem;
    --space-17px: 1.063rem;
    --space-18px: 1.125rem;
    --space-24px: 1.5rem;
    --space-32px:2rem;
    --space-28px:1.75rem;

    /* nav height */
    --nav-height: 64px;

    /* font-variables -kepler*/
  --heading-font-1-mob: 1.25rem;
  --heading-font-2-mob: 2.5rem;
  --heading-font-3-mob: 1.75rem;
  --heading-font-4-mob: 1.25rem;
  --heading-font-5-mob: 1.375rem;
  --heading-font-6-mob: 2rem;
  --heading-font-7-mob: 3.875rem;
  --heading-font-8-mob: 1rem;
  --heading-font-9-mob: 3rem;
  --heading-font-11-mob-text-small: 0.75rem;
  --heading-font-12-mob: 1.125rem;
  --heading-font-15-mob-sub-heading: 1.5rem;
  --heading-font-16-mob-display: 2.25rem;
  --heading-font-17-mob-text-medium: 1.625rem;
  --heading-font-19-mob-text-small: 0.625rem;

  --heading-lh-1--mob-display: 2.375rem;
  --heading-lh-2--mob-display: 3.375rem;
  --heading-lh-3--mob-heading: 1.625rem;
  --heading-lh-4--mob-text-medium: 1.125rem;
  --heading-lh-5--mob: 1.5rem;
  --heading-lh-6-mob-display: 2.875rem;
  --heading-lh-6-mob-display-2: 2.688rem;
  --heading-lh-8-mob-display: 2rem;
  --heading-lh-9-mob-display: 3.625rem;
  --heading-lh-10-mob-text-small: 0.875rem;
  --heading-lh-11-mob-display: 2.5rem;
  --heading-lh-12-mob: 1.35rem;
  --heading-lh-13-mob: 2.25rem;
  --heading-lh-14-mob-sub-heading: 1.375rem;
  --heading-lh-15-mob-sub-heading: 1.1875rem;
  --heading-lh-16-mob-text-large: 1.1875rem;
  --heading-lh-17-mob-text-normal: normal;
  --heading-lh-18-mob-text-small: 1.813rem;
  --heading-lh-19-mob-display: 1.25rem;
  --heading-lh-20-mob-display:1.0625rem;
  --heading-lh-19-mob-text-small: 1.75rem;
  --heading-lh-20-mob-text-small: 1.063rem;


  --heading-font-0-desc: 0.875rem;
  --heading-font-1-des: 2rem;
  --heading-font-2-des: 2.5rem;
  --heading-font-3-des: 2rem;
  --heading-font-4-des: 3.625rem;
  --heading-font-5-des: 3rem;
  --heading-font-6-des: 2.25rem;
  --heading-font-7-des: 1.25rem;
  --heading-font-12-des: 1.5rem;
  --heading-font-13-des: 3rem;
  --heading-font-14-des: 1.625rem;
  --heading-font-15-des: 4rem;
  --heading-font-16-des: 1.125rem;
  --heading-font-17-des: 1.75rem;
  --heading-font-18-des: 1.875rem;
  --heading-font-19-des: 1.375rem;


  --heading-lh-1-des-display: 2.25rem;
  --heading-lh-2-1-des: 3rem;
  --heading-lh-2-des-display: 3.375rem;
  --heading-lh-3-des-display: 4.375rem;
  --heading-lh-4-des-display: 3.625rem;
  --heading-lh-5-des-display: 2.25rem;
  --heading-lh-6-des: 1.25rem;
  --heading-lh-7-des: 2rem;
  --heading-lh-8-des: 2.68rem;
  --heading-lh-9-des-sub-heading: 1.75rem;
  --heading-lh-10-des: 1.625rem;
  --heading-lh-11-des-text-small: 1.125rem;
  --heading-lh-12-des: 1.875rem;
  --heading-lh-13-des: 4rem;
  --heading-lh-15-des: 1.8125rem;
  --heading-lh-16-des-display: 2.375rem;
  --heading-lh-17-des-text-medium: 1.375rem;
  --heading-lh-18-des-display: 2.6875rem;
  --heading-lh-19-des-display: 3.625rem;
  --heading-lh-20-des-text-small: 1.1875rem;

  --keplar-fw-700: 500;

    /* ----------------------
       COLOURS BASE PALETTE
       -------------------------- */

    /* Grid System */
    --grid-columns: 4;
    --grid-gutter-width: 16px;
    --container-margin: 20px;
    --grid-formula: (((100vw - var(--container-margin) - var(--container-margin)) - (var(--grid-gutter-width) * (var(--grid-columns) - 1))) / var(--grid-columns));

    /* gradients */
    --gradient-4: linear-gradient(228deg, rgba(23, 29, 155, 0.20) 31.52%, rgba(255, 98, 0, 0.20) 111.9%);
    --gradient-5: linear-gradient(359deg, rgba(215, 116, 58, 0.1) -48.53%, rgba(255, 255, 255, 0.1) 43.7%);
    --gradient-6: linear-gradient(228deg, rgba(23, 29, 155, 0.10) 31.52%, rgba(255, 98, 0, 0.10) 111.9%);

    /* Configurator */
    --modal-backdrop-color: rgba(0,0,0,0.8);
    --range-color: #CEE5E9;
    --light-border-color: #e5e5e5;

    /* Box Shadow */
    --selected-item-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 1);
    /* Corporate page colors */
  --dialog-background: #fefefe;
  --dialog-close-blue: #18498e;
  }

  /* Grid System */
  @media screen and (width >=768px) {
    :root {
      --grid-columns: 8;
      --grid-gutter-width: 24px;
    }
  }

  @media screen and (width >=1024px) {
    :root {
      --grid-columns: 12;
      --grid-gutter-width: 24px;
      --container-margin: 56px;
    }
  }

  @media (width >=768px) {
    :root {
      --slant: 10px;
      --slant-s: 10px;
      --slant-l: 13px;
    }
  }

  /* end Grid System */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--primary-font-arena);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  p {
    font-family: var(--body-font-arena);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
  }

  h1,
  .heading-1 {
    font-size: 4rem;
    line-height: 5rem;
    /* 125% */
  }

  h2,
  .heading-2 {
    font-size: 3rem;
    line-height: 4.0625rem;
    /* 135.417% */
  }

  h3,
  .heading-3 {
    font-size: 24px;
    line-height: 2.0625rem;
    /* 137.5% */
  }

  h4,
  .heading-4 {
    font-size: 18px;
    line-height: 1.375rem;
    /* 122.222% */
  }

  /* ----------------------
       BUTTONS STYLE
       -------------------------- */

  .button,
  a.button,
  button.button,
  input[type='button'],
  input[type='submit'],
  input[type='reset'] {
    display: inline-flex;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--body-font-arena);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
    transition: all 0.3s linear;
    position: relative !important;
    @media (width >=1024px) {
      font-size: 1rem;
    }
  }

  /* button primary blue style */
  .button-primary-blue {
    background-color: var(--primary-blue-700);
    color: var(--secondary-gray-20);
    border: 1px solid var(--primary-blue-700);
    text-align: center;
    letter-spacing: 1.12px;
  }

  .button-primary-blue:hover {
    border: 1px solid var(--primary-blue-900);
    color: var(--tertiary-white);
    background-color: var(--primary-blue-900);
  }

  .button-primary-blue:disabled,
  .button-primary-blue.disabled {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border: 1px solid var(--secondary-gray-300);
  }

  /* button secondary blue style */
  .button-secondary-blue {
    color: var(--primary-blue-700);
    border: 1px solid var(--primary-blue-700);
    text-align: center;
    letter-spacing: 1.12px;
    background-color: transparent;
  }

  .button-secondary-blue:hover {
    border: 1px solid var(--primary-blue-900);
    color: var(--tertiary-white);
    background-color: var(--primary-blue-900);
  }

  .button-secondary-blue:disabled,
  .button-secondary-blue.disabled {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border: 1px solid var(--secondary-gray-300);
  }

  /* button primary light icon button style */
  .button.button-primary-blue.button-icon {
    padding-left: 40px;
  }

  .button-primary-blue.button-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    z-index: 1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23FDFDFD"/></svg>');
  }

  .button-primary-blue.button-icon:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-primary-blue.button-icon:active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="white"/></svg>');
  }

  .button-primary-blue.button-icon:disabled::before,
  .button-primary-blue.button-icon.disabled::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%236C6F72"/></svg>');
  }

  /* button primary dark style */
  .button-primary-white {
    background-color: var(--secondary-white);
    color: var(--primary-blue-700);
    border: 1px solid var(--secondary-white);
  }

  .button-primary-dark:disabled,
  .button-primary-dark.disabled {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border: 1px solid var(--secondary-gray-300);
  }

  /* button primary dark icon button style */
  .button.button-primary-dark.button-icon {
    padding-left: 62px;
  }

  .button-primary-dark.button-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 36px;
    z-index: 1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-primary-dark.button-icon:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-primary-dark.button-icon:active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-primary-dark.button-icon:disabled::before,
  .button-primary-dark.button-icon.disabled::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%236C6F72"/></svg>');
  }

  /* button secondary light style */
  .button-secondary-light {
    background-color: var(--secondary-white);
    color: var(--primary-blue-700);
    border: 1px solid var(--primary-blue-700);
  }

  .button-secondary-light:hover {
    color: var(--primary-blue-700);
    background-color: var(--primary-blue-100);
    border: 1px solid var(--primary-blue-700);
  }

  .button-secondary-light:active {
    background-color: var(--primary-blue-400);
    color: var(--secondary-white);
    border: 1px solid var(--primary-blue-400);
  }

  .button-secondary-light:disabled,
  .button-secondary-light.disabled {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border: 1px solid var(--secondary-gray-300);
  }

  /* button secondary light icon button style */
  .button.button-secondary-light.button-icon {
    padding-left: 62px;
  }

  .button-secondary-light.button-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 36px;
    z-index: 1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-secondary-light.button-icon:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-secondary-light.button-icon:active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="white"/></svg>');
  }

  .button-secondary-light.button-icon:disabled::before,
  .button-secondary-light.button-icon.disabled::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%236C6F72"/></svg>');
  }

  /* button secondary dark style */
  .button-secondary-white {
    color: var(--secondary-white);
    border: 1px solid var(--secondary-white);
  }

  .button-secondary-white:disabled,
  .button-secondary-white.disabled {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border: 1px solid var(--secondary-gray-300);
  }

  /* button secondary light icon button style */
  .button.button-secondary-dark.button-icon {
    padding-left: 62px;
  }

  .button-secondary-dark.button-icon::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 36px;
    z-index: 1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-secondary-dark.button-icon:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-secondary-dark.button-icon:active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%23171D9B"/></svg>');
  }

  .button-secondary-dark.button-icon:disabled::before,
  .button-secondary-dark.button-icon.disabled::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M7.5 8.49999H3.66667V7.49999H7.5V3.66666H8.5V7.49999H12.3333V8.49999H8.5V12.3333H7.5V8.49999Z" fill="%236C6F72"/></svg>');
  }

  /* button secondary clear style */
  .button-secondary-clear {
    color: var(--secondary-white);
  }

  .button-secondary-clear:hover {
    color: var(--tertiary-white);
    background-color: var(--primary-blue-900);
  }

  .button-secondary-clear:active {
    background-color: var(--primary-blue-400);
    color: var(--secondary-white);
    border: 1px solid var(--primary-blue-400);
  }

  .button-secondary-clear:disabled,
  .button-secondary-clear.disabled {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border: 1px solid var(--secondary-gray-300);
  }

  /* button secondary clear icon button style */
  .button.button-secondary-clear.button-icon {
    padding-left: 40px;
  }

  .button-secondary-clear.button-icon::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    z-index: 1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15.7885L7.73075 11.5192L8.78475 10.4348L11.25 12.9V4.5H12.75V12.9L15.2153 10.4348L16.2693 11.5192L12 15.7885ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V14.9808H6V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V14.9808H19.5V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="white"/></svg>');
  }

  .button-secondary-clear.button-icon:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15.7885L7.73075 11.5192L8.78475 10.4348L11.25 12.9V4.5H12.75V12.9L15.2153 10.4348L16.2693 11.5192L12 15.7885ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V14.9808H6V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V14.9808H19.5V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="white"/></svg>');
  }

  .button-secondary-clear.button-icon:active::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15.7885L7.73075 11.5192L8.78475 10.4348L11.25 12.9V4.5H12.75V12.9L15.2153 10.4348L16.2693 11.5192L12 15.7885ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V14.9808H6V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V14.9808H19.5V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="white"/></svg>');
  }

  .button-secondary-clear.button-icon:disabled::before,
  .button-secondary-clear.button-icon.disabled::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15.7885L7.73075 11.5192L8.78475 10.4348L11.25 12.9V4.5H12.75V12.9L15.2153 10.4348L16.2693 11.5192L12 15.7885ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V14.9808H6V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V14.9808H19.5V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="white"/></svg>');
  }

  .button-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    width: 100%;
    height: 34px;
    font-family: var(--body-font-arena);
    font-size: 0.875rem;
    font-weight: var(--fw-400);
    line-height: 1.125rem;
    background-color: transparent;
    border: 0;
    cursor: pointer;

    &.button-cta--black-outline {
      border: 1px solid var(--primary-blue-700);
      color: var(--primary-blue-700);

      /* &:hover {
        border: 1px solid var(--tertiary-black);
        background: var(--tertiary-light-grey);
        color: var(--tertiary-black);
      } */

      &:disabled {
        border: 1px solid var(--tertiary-medium-grey);
        color: var(--tertiary-medium-grey);
      }
    }

    &.button-cta--black-bg {
      background: var(--primary-blue-700);
      color: var(--secondary-gray-20);
      border: 1px solid transparent;

      /* &:hover {
        border: 1px solid var(--tertiary-white);
        background: var(--secondary-main);
      } */

      &:disabled {
        border: 1px solid var(--tertiary-light-grey);
        background: var(--tertiary-medium-grey);
        color: var(--tertiary-light-grey);
      }
    }
  }

  /* button link style */
  .button.primary__btn {
    display: inline-block;
    height: 64px;
    width: 64px;
    padding: inherit;
    background-color: var(--secondary-gray-300);
  }

  .menu__bgoverlay {
    position: fixed;
    pointer-events: auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.43);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
  }

  @media (width >=768px) {
    :root {
      --nav-height: 64px;
    }

    h1,
    .heading-1 {
      font-size: 84px;
      line-height: normal;
    }

    h2,
    .heading-2 {
      font-size: 64px;
      line-height: normal;
    }

    h3,
    .heading-3 {
      font-size: 48px;
      line-height: normal;
    }

    h4,
    .heading-4 {
      font-size: 24px;
      line-height: normal;
    }

    p {
      font-size: 16px;
      line-height: 24px;
      /* 133.333% */
    }

    .button,
    a.button,
    button.button,
    input[type='button'],
    input[type='submit'],
    input[type='reset'] {
      display: inline-flex;
      padding: 0.75rem 1.5rem;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-style: normal;
      font-weight: 400;
      /* 128.571% */
    }

    .button-secondary-white:hover {
      background-color: var(--primary-blue-900);
      color: var(--secondary-white);
      border: 1px solid var(--primary-blue-900);
    }

    .button-primary-white:hover {
      background-color: var(--primary-blue-900);
      color: var(--secondary-white);
      border: 1px solid var(--primary-blue-900);
    }
  }

  /*
        Arena Style Ends
    */

  @media (width >=999px) {
    :root {
      --heading-font-size-xxl: 60px;
      --heading-font-size-xl: 48px;
      --heading-font-size-l: 36px;
      --heading-font-size-m: 30px;
      --heading-font-size-s: 24px;
      --heading-font-size-xs: 22px;
      --nav-height: 64px;
    }
  }

  

  h1 {
    font-size: var(--heading-font-size-xxl);
  }

  h2 {
    font-size: var(--heading-font-size-xl);
  }

  h3 {
    font-size: var(--heading-font-size-l);
  }

  h4 {
    font-size: var(--heading-font-size-m);
  }

  h5 {
    font-size: var(--heading-font-size-s);
  }

  h6 {
    font-size: var(--heading-font-size-xs);
  }

  p,
  dl,
  ol,
  ul,
  pre,
  blockquote {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  code,
  pre {
    font-family: var(--fixed-font-family);
    font-size: var(--body-font-size-s);
  }

  code {
    padding: 0.125em;
  }

  pre {
    overflow: scroll;
  }

  main pre {
    background-color: var(--light-color);
    padding: 1em;
    border-radius: 0.25em;
    overflow-x: auto;
    white-space: pre;
  }

  /* links */
  a:any-link {
    text-decoration: none;
  }

  .hidden {
    display: none !important;
  }

  .flex {
    display: flex;
  }

  .icon img {
    height: 100%;
    width: 100%;
  }

  /* Smart Finace Style Begins */
  .blackButton a,
  .blackButton button,
  .btn-black {
    background-color: #164b91!important;
    color: #fff !important;
    cursor: pointer;

    &:hover {
      color: #164b91 !important;
      border-color: #164b91 !important;
      background-color: #fff !important;
    }
  }

  .whiteButton a,
  .whiteButton button {
    color: #164b91 !important;
    border-color: #164b91 !important;
    cursor: pointer;

    &:hover {
      background-color: #164b91 !important;
      color: #fff !important;
    }
  }

  [type='radio'].radio-style {
    height: 21px;
    width: 21px;
    accent-color: #007bff;
    padding: 0;
  }

  .modal {
    &.modal--arena{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 100vw;
      height: 100vh;
      position: fixed;
      z-index: 1000;
      border: 1px;
      border-radius: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0 auto;
      overflow: hidden;
    }
  }

  .popUpmain {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;

    .modal-content {
      padding: 1.5625rem;
      position: relative;
      max-width: 31.25rem;
      margin: auto;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      width: 100%;
      pointer-events: auto;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 0.3rem;
      outline: 0;

      .close {
        position: absolute;
        right: 0.625rem;
        top: 0.625rem;
        padding-top: 1.0625rem;
        background: url('../../commons/icons/cross.webp') no-repeat;
        width: 1.0625rem;
        height: 1.0625rem;
        cursor: pointer;
      }

      .popupContent {
        text-align: center;

        p {
          font-size: 1.0625rem;
          word-break: break-word;
          font-weight: 400;
        }

        .blackButton {

          button,
          a {
            text-decoration: none;
            padding: 0.6875rem 0.75rem 0.5625rem 0.75rem;
            display: inline-block;
            font-size: 0.9375rem;
            color: var(--tertiary-white);
            font-weight: 400;
            transition: 0.5s;
            text-transform: uppercase;
            background:  var(--blue-shade-1);
            border:  var(--blue-shade-1) solid 1px;
            min-width: 6.875rem;
            text-align: center;

            &:hover {
              background: var(--tertiary-white);
              color:  var(--blue-shade-1);
            }
          }
        }
      }

      /* Added for YY8 */

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

      .hide-content {
        display: none !important;
      }

      .whiteButton {

        button,
        a {
          text-decoration: none;
          padding: 0.6875rem 0.75rem 0.5625rem 0.75rem;
          display: inline-block;
          font-size: 0.9375rem;
          color:  var(--blue-shade-1);
          font-weight: 400;
          transition: 0.5s;
          text-transform: uppercase;
          background: var(--tertiary-white);
          border: var(--tertiary-black) solid 1px;
          min-width: 6.875rem;
          text-align: center;

          &:hover {
            background:  var(--blue-shade-1);
            color: var(--tertiary-white);
          }
        }
      }

      h2.popup-title {
        font-size: 1.5625rem;
        width: 100%;
        text-align: center;
        font-weight: bold;
        margin-bottom: 10px;
      }

      p.popup-description {
        text-align: center;
        font-weight: normal;
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 1.25rem;
      }
    }

    .popupContent.red {
      p {
        margin: 1.25rem;
      }

      h2 {
        color: #f00;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        margin: 0;
      }

      .blackButton {
        button {
          min-width: unset;
          background-color: #f00 !important;
          border: #f00 solid 1px !important;

          &:hover {
            background-color: #fff !important;
            border-color: #000 !important;
          }
        }
      }
    }

    .cibilPopupContent {
      display: flex;
      flex-direction: column;
      align-items: center;

      .cibilLogo {
        margin-bottom: 2.0625rem;
      }

      p {
        font-size: 0.975rem;
        font-weight: 400;
        color: #4f4f4f;
        text-align: left;
        margin-bottom: 1.25rem;
        line-height: 1.5;
      }

      .cibilButtMain {
        a {
          text-transform: none;
          font-weight: 600;
          padding: 0.5625rem 0.75rem;
          font-size: 1rem;

          &:hover {
            border: 1px solid #000;
          }
        }
      }
    }
  }

  .popUpmain#amt_error_popup {
    z-index: 1007;
  }

  .modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  .popUpmain.fade-in {
    transition: transform 0.5s ease-out;
  }
  #customer-verification-popup,
  .verification-popup-withdraw,
  #view-pincode-popup {
    .loginBoxContainer {
      width: 100%;
      float: left;
    }

    .loginSignUpBox {
      width: 100%;
      background: var(--tertiary-white);
      float: left;
      padding: 3.125rem 1.875rem;
    }

    .loginLeftBox {
      width: 100%;
      float: left;
      position: relative;
      padding: 0 1.875rem;
    }

    .clearfix::after {
      display: block;
      clear: both;
      content: '';
    }

    .form-group {
      margin-bottom: 1rem;
    }

    .sub-btn {
      display: inline-block;
      background: var(--sf-primary-color);
      border: 1px solid var(--tertiary-black);
      color: var(--tertiary-white);
      padding: 0.5rem 0.9375rem;
      text-decoration: none;
      vertical-align: top;
      text-transform: uppercase;
      width: auto;
      margin: 0;
      cursor: pointer;
      margin-top: 0.5rem;
      font-size: 0.9375rem;
    }

    .ph-message {
      text-align: center;
      margin: 0 0 1.25rem 0;
      font-weight: light;
      font-size: 0.9375rem;
      color: var(--tertiary-black);
      line-height: 1.5rem;
    }

    .ph-message span {
      font-weight: bold;
    }

    .otp-finance .input-group-otp {
      position: relative;
    }

    .loginLeftBox input {
      width: 100%;
      float: left;
      outline: none;
      font-size: 0.875rem;
      color: var(--tertiary-black);
      text-align: left;
      border: 0;
      border-bottom: #8f8f8f solid 1px;
      padding: 0.625rem 0;
      font-weight: 400;
      margin-bottom: 0.625rem;
    }

    .nf-error {
      color: red;
      font-size: 0.9rem;
      padding: 0.3125rem 0 0.625rem;
      display: none;
    }

    input[type='text'],
    input[type='number'] {
      width: 100%;
      float: left;
      outline: none;
      font-size: 0.875rem;
      color: var(--tertiary-black);
      text-align: left;
      border: 0;
      border-bottom: #8f8f8f solid 1px;
      padding: 0.625rem 0;
      font-weight: 400;
      margin-bottom: 0.625rem;
    }

    .resend0_dealer_login_ps.disabled {
      opacity: 0.4;
    }

    .rfiotperror {
      font-size: 10px;
      color: red;
      position: relative;
      text-align: left;
      float: left;
      width: 100%;
      top: 3px;
      display: none;
    }
  }
  .block {
    display: block;
  }

  .d-flex {
    display: flex;
  }

  .d-inline-block {
    display: inline-block;
  }

  .d-block {
    display: block;
  }

  .f-left {
    float: left;
  }

  .d-none {
    display: none;
  }

  .sf-d-none {
    display: none !important;
  }

  .sf-d-block {
    display: block !important;
  }

  .loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99999;
  }

  .loadingDiv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }

  .preApprovedLoader {
    background: white url('../../commons/icons/delayLoader.gif') no-repeat center center;
    width: 350px;
    height: 150px;
    background-size: contain;
  }

  .notPreApprovedLoader {
    background: white url('../../commons/icons/Loader.gif') no-repeat center center;
    width: 250px;
    height: 150px;
    background-size: contain;
  }
  body:has(.car-detail-banner) {
    .notPreApprovedLoader, .loadingOverlay, .loadingDiv, .preApprovedLoader {
      display: none;
    }
  }

  #modalPreApprovedOffers{
    .model-dialog {
      max-width: 800px;
      margin: 1.75rem auto;
    }

    .modal-dialog .modal-content {
      margin-top: 0 !important;
      padding: 2px;
      border: 0 !important;
      background-color: transparent !important;
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      pointer-events: auto;
      background-clip: padding-box;
      border-radius: .3rem;
      outline: 0;
      max-width: 800px;
    }

    .modalPreApprovedOffers_close {
      width: 27px;
      height: 27px;
      background-color: #fff !important;
      border-radius: 50%;
      border: 1px solid #2b3494 !important;
      opacity: 1 !important;
      position: absolute;
      right: 35px;
      top: 37px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-body {
      position: relative;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      padding: 0;
    }

    .paOffers-finance {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      text-align: center;
    }

    .btn {
      display: inline-block;
      margin-bottom: 0;
      font-weight: 400;
      text-align: center;
      touch-action: manipulation;
      cursor: pointer;
      border: 1px solid transparent;
      white-space: nowrap;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857;
      border-radius: 4px;
    }

    .paOffers-finance__text {
      font-size: 16px;
      font-weight: 500;
      display: block;
      text-transform: uppercase;
      margin-bottom: 3px;
      text-align: center;
      color: #000;
    }

    .list-pa-financer {
      background-color: #fff;
      margin-bottom: 0;
      column-gap: 35px;
      padding: 0 30px !important;
      border: 1px solid #7d91cd;
      border-radius: 8px;
      max-width: 500px;
      display: inline-grid;
      grid-auto-flow: column;
      list-style: none;
    }

    .list-pa-financer>* {
      overflow: hidden;
      display: flex;
      height: 45px;
      align-items: center;
    }

    .btn-view-more {
      background-color: #fff;
      font-weight: 500;
      font-size: 9px;
      text-transform: uppercase;
      color: #000;
      display: block;
      max-width: 56px;
      padding: 2px;
      border: 1px solid #d5d6ea;
      transition: all ease 0.3s;
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
    }

    .btn-interested {
      background-color: var(--sf-primary-color);
      border: 1px solid var(--sf-primary-color);;
      font-size: 20px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      border-radius: 0;
      line-height: 1;
      display: block;
      max-width: 230px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px;
      transition: all ease 0.3s;

      &:hover {
        border-color: #164b91;
        color: #164b91;
        background-color: #fff;
      }
    }

    #close_banner {
      background: url(../commons/icons/banner-close-icon.webp);
      top: auto;
      right: auto;
      height: .5625rem;
      width: .5625rem;
      background-position: center;
      background-repeat: no-repeat;
    }

    .pa-image {
      background: url(../commons/icons/pa-image.webp) no-repeat;
      background-size: 800px 600px;
      width: 50rem;
      height: 37.5rem;

    }
    .pa-image-arena {
      background: url(../commons/icons/pa-image-arena.webp) no-repeat;
      background-size: 800px 600px;
      width: 50rem;
      height: 37.5rem;

    }
    @media only screen and (max-width: 999px) {
        .modalPreApprovedOffers_body div {
            background-size: 100% auto;
            max-width: 100%;
            min-height: 18.75rem;
            width: 100vw;
        }

        .paOffers-finance__large {
            bottom: -15px;
        }
    }

    @media only screen and (max-width: 500px) {
        .modalPreApprovedOffers_body div {
            max-height: 18.75rem;
        }
    }

    @media only screen and (min-width:500px) and (max-width: 999px) {
        .modalPreApprovedOffers_body div {
            max-height: 25rem;
        }
    }
    }

  .sf-journey-start-container  .sf-journey-start-wrapper .block.sf-journey-start{
    .request-otp-step-input {
      .mobile-number {
        border-color: #b0b0b0 ;

        &:focus {
          border-color: var(--Tertiary-White, #FFF);
        }
      }
    }
  }
  .basic-user-details-step .basic-user-details-step-fields {
    input {
      background: transparent ;
      border:1px solid #b0b0b0 ;
      &:focus {
        border-color: var(--Tertiary-White, #FFF);
      }
    }
  }
  #sbi-bank-list-popup {
    .modal-content {
      width: 100% !important;
      max-width: 59.375rem;
    }}
    @media (max-width: 999px) {
      .compareLoanOfferPage .pageTitle {
          background: #164b91 !important;
          color: #ffffff;
      }
  }
  /* Smart Finace Style Ends */

  .text-lg-1,
  .text-lg-2,
  .text-lg-3,
  .text-sm-1,
  .text-sm-2,
  .text-sm-3,
  .text-sm-4 {
    font-family: var(--font-primary-arena);
  }

  .text-sm-1 {
    font-size: 1.625rem;
  }

  .text-sm-2 {
    font-size: 1rem;
  }

  .text-sm-3 {
    font-size: 0.75rem;
  }

  .text-sm-4 {
    font-size: 0.625rem;
  }

  .italic {
    font-style: italic;
  }

  .normal {
    font-weight: normal;
  }

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

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

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

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

  .break-word {
    word-wrap: break-word;
    white-space: nowrap;
  }

  @media (width >=768px) {
    .text-lg-1 {
      font-size: 1.75rem;
    }

    .text-lg-2 {
      font-size: 1.5rem;
    }

    .text-lg-3 {
      font-size: 1rem;
    }

    .text-lg-4 {
      font-size: 0.875rem;
    }

    .text-lg-5 {
      font-size: 0.75rem;
    }
  }

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

  /* Grid system */
  .g-container {
    width: 100%;
    padding-inline: var(--container-margin);
  }

  .g-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--grid-gutter-width);
  }

  [class^='g-lg-'],
  [class^='g-sm'],
  [class^='g-md'] {
    width: 100%;
    /* Default to full width */
  }

  .g-sm-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-sm-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-sm-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-sm-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  @media screen and (width >=768px) {
    .g-md-1 {
      width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
    }

    .g-md-2 {
      width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
    }

    .g-md-3 {
      width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
    }

    .g-md-4 {
      width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
    }

    .g-md-5 {
      width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
    }

    .g-md-6 {
      width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
    }

    .g-md-7 {
      width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
    }

    .g-md-8 {
      width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
    }
  }

  /* Media Queries for desktop */
  @media screen and (width >=1024px) {
    .g-lg-1 {
      width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
    }

    .g-lg-2 {
      width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
    }

    .g-lg-3 {
      width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
    }

    .g-lg-4 {
      width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
    }

    .g-lg-5 {
      width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
    }

    .g-lg-6 {
      width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
    }

    .g-lg-7 {
      width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
    }

    .g-lg-8 {
      width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
    }

    .g-lg-9 {
      width: calc((var(--grid-formula) * 9) + (var(--grid-gutter-width) * (9 - 1)));
    }

    .g-lg-10 {
      width: calc((var(--grid-formula) * 10) + (var(--grid-gutter-width) * (10 - 1)));
    }

    .g-lg-11 {
      width: calc((var(--grid-formula) * 11) + (var(--grid-gutter-width) * (11 - 1)));
    }

    .g-lg-12 {
      width: calc((var(--grid-formula) * 12) + (var(--grid-gutter-width) * (12 - 1)));
    }
  }

  /* Media Queries for Large desktop */
  @media screen and (width >=1366px) {
    .g-xl-1 {
      width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
    }

    .g-xl-2 {
      width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
    }

    .g-xl-3 {
      width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
    }

    .g-xl-4 {
      width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
    }

    .g-xl-5 {
      width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
    }

    .g-xl-6 {
      width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
    }

    .g-xl-7 {
      width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
    }

    .g-xl-8 {
      width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
    }

    .g-xl-9 {
      width: calc((var(--grid-formula) * 9) + (var(--grid-gutter-width) * (9 - 1)));
    }

    .g-xl-10 {
      width: calc((var(--grid-formula) * 10) + (var(--grid-gutter-width) * (10 - 1)));
    }

    .g-xl-11 {
      width: calc((var(--grid-formula) * 11) + (var(--grid-gutter-width) * (11 - 1)));
    }

    .g-xl-12 {
      width: calc((var(--grid-formula) * 12) + (var(--grid-gutter-width) * (12 - 1)));
    }
  }


  /* API Errors style | START */
  .error-msg-wrapper {
    padding-block: 48px;
  }

  .error-msg-box {
    h2 {
      font-size: 24px;
      line-height: normal;
      font-weight: 600;
      margin: 0 0 16px;
      font-family: var(--primary-font-arena);
      letter-spacing: 0.02em;
    }

    .error-msg-content {
      display: flex;
      justify-content: space-between;
      gap: 5px;
      background: var(--secondary-red);
      padding: 20px 15px;

      &.error-grey {
        background: var(--tertiary-light-grey);

        p {
          color: var(--inactive-content);
        }
      }

      p {
        color: var(--primary-red);
        font-size: 14px;
        line-height: 20px;
        margin: 0;

        strong {
          font-weight: 500;
        }
      }

      img {
        align-self: flex-start;
      }
    }
  }

  @media screen and (width >=1024px) {
    .error-msg-wrapper {
      padding-block: 80px;
    }

    .error-msg-box {
      h2 {
        font-size: 32px;
        margin: 0 0 40px;
      }

      .error-msg-content {
        padding: 12px 16px;
      }
    }
  }

  /* API Errors style | END */

  /* scroll */

  ::-webkit-scrollbar {
    width: 4px;
    background-color: var(--primary-blue-700);
    border-left: none;
  }

  ::-webkit-scrollbar-track {
    /* -webkit-box-shadow: inset 0 0 6px #000 ; */
    background-color: var(--secondary-gray-20);
    border-left: 4px solid var(--secondary-gray-10);
  }

  ::-webkit-scrollbar-thumb {
    background-repeat: no-repeat;
    background-size: auto;
    cursor: pointer;
    position: relative;
    background-position: top left;
    background-color: var(--primary-blue-700);
  }

  ::-webkit-scrollbar-thumb::after {
    content: 'abcd';
    position: absolute;
    top: 0;
    width: 10px;
  }
  @media(min-width:999px){
  .carExchangeMain {
    & .carExchangeForm {
        & .carExchangeFormStep {
            & .form-section {
                &:first-child {
                    & .rightButt {
                        & .whiteButton {
                            &:nth-child(2) {
                                margin-left: 135px !important;

                            }
                        }
                        & .whiteButton.inf{
                          &:nth-child(2) {
                            margin-left: 5px !important;

                        }
                        }
                    }
                }
            }
        }
    }
}
}