/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* Nexa Colors */
  --primary-main: #18171a;
  --secondary-main: #515151;
  --tertiary-white: #fff;
  --tertiary-light-grey: #f2f2f2;
  --tertiary-medium-grey: #b2b2b2;
  --tertiary-deep-Grey: #767879;
  --tertiary-medium-dark-grey: #7b7777;
  --tertiary-black: #000;
  --Nero-black: #1D1D1D;
  --fiord: #4c5f65;
  --fiord-dark: #4B5E64;
  --big-stone: #374348;
  --smalt-blue: #4E6168;
  --primary-red: #F00;
  --primary-green: #008000;
  --cinnabar-red: #DC3545;
  --tertiary-red: #C2220A;
  --tertiary-green: #028C45;
  --tertiary-lite-green: #298555;
  /* Gray Secondary Colour */
  --secondary-gray-60: #f2f2f2f2;
  --secondary-gray-80: #f7f7f7;
  --secondary-gray-90: #ddd;
  --secondary-gray-800: #575a5e;
  --inactive-content: #939393;
  --bars-unselected: #ccc;
  --grayish-blue: #c9d3d7;
  --mystic-grey: #DBDCDB;
  --questionnaire-white: #d9d9d9;

  /* AEM colors */
  --link-color: #035fe6;
  --link-hover-color: #136ff6;
  --background-color: white;
  --light-color: #eee;
  --dark-color: #ccc;
  --nav-background-color: #f2f2f2;

  /* Smart Finance Colors */
  --dark-grey-shade-1: #777;
  --dark-grey-shade-7: #767879;
  --dark-grey-shade-8: #777;
  --dark-grey-shade-9: #18171a;
  --dark-grey-shade-10: #333;
  --dark-grey-shade-11: #636363;
  --black-shade-6: rgb(0 0 0 / 90%);
  --tertiary-tight-grey: #f2f2f2;
  --calender-light-grey: #b7b5b5;
  --black-075: rgb(0 0 0 / 0.75);
  --gainsboro: #DEDCDC;

  /* Arena Colors */
  --Primary-main-arena: #171C8F;
  --white-smoke: #F5F5F5;
  --white-smoke-dark: #F9F9F9;
  --dark-blue: #01044B;
  --suva-grey: #8d8d8d;
  --egyptian-blue: #171D9B;
  --summer-sky: #398BD7;
  --suva-grey-light: #8E8E8E;

  /* gradient colors */
  --calender-gradient: linear-gradient(to bottom, #08c, #04c);

  /* shadow */
  --toast-shadow: 0px 0px 14px 0px rgb(188 187 187);
  --drop-down-shadow: 0px 0px 12px 0px rgb(0 0 0 / 0.12);
  --white-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(54deg) brightness(106%) contrast(101%);
  --black-filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(2%) hue-rotate(152deg) brightness(100%) contrast(100%);
  --blue-filter: brightness(0) saturate(100%) invert(5%) sepia(97%) saturate(5288%) hue-rotate(244deg) brightness(131%) contrast(101%);

  /* Font sizes desktop */
  --fs-6px: 0.375rem;
  --fs-8px: 0.5rem;
  --fs-10px: 0.625rem;
  --fs-12px: 0.75rem;
  --fs-14px: 0.875rem;
  --fs-16px: 1rem;
  --fs-18px: 1.125rem;
  --fs-20px: 1.25rem;
  --fs-22px: 1.375rem;
  --fs-24px: 1.5rem;
  --fs-26px: 1.625rem;
  --fs-28px: 1.75rem;
  --fs-32px: 2rem;
  --fs-38px: 2.375rem;
  --fs-40px: 2.5rem;
  --fs-48px: 3rem;
  --fs-50px: 3.125rem;
  --fs-56px: 3.5rem;
  --fs-58px: 3.625rem;
  --fs-64px: 4rem;

  /* Font weights */
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Widths */

  /* Max widths */

  /* Margins */
  --m-5px: 5px;
  --m-8px: 8px;
  --m-10px: 10px;
  --m-12px: 12px;
  --m-13px: 13px;
  --m-15px: 15px;
  --m-16px: 16px;
  --m-20px: 20px;
  --m-24px: 24px;
  --m-28px: 28px;
  --m-30px: 30px;
  --m-32px: 32px;
  --m-35px: 35px;
  --m-36px: 36px;
  --m-40px: 40px;
  --m-48px: 48px;
  --m-42px: 42px;
  --m-56px: 56px;
  --m-60px: 60px;
  --m-64px: 64px;
  --m-250px: 250px;

  /* Paddings */
  --p-0px: 0;
  --p-5px: 5px;
  --p-8px: 8px;
  --p-10px: 10px;
  --p-12px: 12px;
  --p-13px: 13px;
  --p-16px: 16px;
  --p-20px: 20px;
  --p-22px: 22px;
  --p-24px: 24px;
  --p-30px: 30px;
  --p-32px: 32px;
  --p-48px: 48px;
  --p-55px: 55px;
  --p-64px: 64px;

  /* border */
  --border-1: 1px;

  /* nav height */
  --nav-top-height: 30px;
  --nav-height: 48px;
  --nav-total-height: 122px;
  --nav-height-mobile: 7.1rem;
  --nav-top-height-arena: 64px;
  --date-content: '*';
  --slant: 8px;
  --slant-s: 8px;
  --slant-l: 11px;

  /* 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));
}

body.nexa {
  font-family: 'Fira Sans', 'Fallback Font', sans-serif;
  color: var(--primary-main);

  /* 56px */
  --heading-xxl-nexa: 3.5rem;
  /* 48px */
  --heading-xl-nexa: 3rem;
  /* 40px */
  --heading-l-nexa: 2.5rem;
  /* 32px */
  --heading-m-nexa: 2rem;
  /* 24px */
  --heading-s-nexa: 1.5rem;
  /* 20px */
  --heading-xs-nexa: 1.25rem;
  /* 18px */
  --body-xl-nexa: 1.125rem;
  /* 16px */
  --body-m-nexa: 1rem;
  /* 14px */
  --body-s-nexa: 0.875rem;
  /* 12px */
  --body-xs-nexa: 0.75rem;
  /* 10px */
  --body-xxs-nexa: 0.625rem;
  /* 9px */
  --body-xxxs-nexa: 0.563rem;
  --lh-14px-nexa: 0.875rem;
  --lh-16px-nexa: 1rem;
  --lh-18px-nexa: 1.125rem;
  --lh-20px-nexa: 1.25rem;
  --lh-24px-nexa: 1.5rem;
  --lh-25_3px-nexa: 1.581rem;
  --lh-32px-nexa: 2rem;
  --lh-36px-nexa: 2.25rem;
  --lh-40px-nexa: 2.5rem;
  --lh-44px-nexa: 2.75rem;
  --lh-46px-nexa: 2.875rem;
  --lh-48px-nexa: 3rem;
  --lh-54px-nexa: 3.375rem;
  --lh-56px-nexa: 3.5rem;
  --lh-64px-nexa: 4rem;

  /* gradient colors */
  --gradient-1: linear-gradient(60.18deg, #c9d3d7 3.71%, #ebebeb 104.51%);
  --gradient-2: linear-gradient(88deg, #18171a 49.21%, rgb(24 23 26 / 0) 95.09%);
  --gradient-3: linear-gradient(225deg, #cee5e9 -4.54%, #dac8c6 115.1%);
  --gradient-4: linear-gradient(60deg, #c9d3d7 3.71%, #ebebeb 104.51%);
  --gradient-5: linear-gradient(222deg, #cee5e9 0%, #dac8c6 100%);
  --gradient-6: linear-gradient(212deg, rgb(157 207 218 / 0.65) -61.57%, rgb(24 23 26 / 0.65) 100.57%);
  --gradient-7: linear-gradient(34deg, #C9D3D7 18.09%, #EBEBEB 102.51%, #EBEBEB 102.51%);
  --gradient-8: linear-gradient(212deg, rgb(157 207 218 / 0.40) -61.57%, rgb(24 23 26 / 0.40) 100.57%), #FFF;
  --gradient-9: linear-gradient(212deg, rgb(157 207 218 / 0.40) -61.57%, rgb(22 29 31 / 0.40) 100.57%);
  --gradient-10: linear-gradient(60deg, #C9D3D7 3.71%, #EBEBEB 104.51%);
  --gradient-11: linear-gradient(238deg, rgb(56 79 110 / 0.60) -11.12%, rgb(91 91 91 / 0.60) 111.5%);
  --gradient-12: linear-gradient(90deg, #E2E5E6 -0.08%, #E9EAEA 99.92%);
  --gradient-13: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0.00) 51.14%, rgb(0 0 0 / 0.00) 100%);
  --gradient-14: linear-gradient(326deg, rgb(0 0 0 / 0.00) 37.07%, #000 72.89%);
  --gradient-15: linear-gradient(212deg, rgb(157 207 218 / 1) -61.57%, rgb(24 23 26 / 1) 100.57%);
}

body.arena {
  font-family: roboto, 'Fallback Font', sans-serif;
  color: var(--tertiary-black);

  /* 40px */
  --heading-xxl-arena: 2.5rem;
  /* 32px */
  --heading-xl-arena: 2rem;
  /* 24px */
  --heading-l-arena: 1.5rem;
  /* 20px */
  --heading-m-arena: 1.25rem;
  /* 18px */
  --heading-md-arena: 1.125rem;
  /* 16px */
  --heading-s-arena: 1rem;
  /* 14px */
  --body-xs-arena: 0.875rem;
  /* 12px */
  --body-xxs-arena: 0.75rem;
  /* 10px */
  --body-xxxs-arena: 0.625rem;
  --lh-14px-arena: 0.875rem;
  --lh-16px-arena: 1rem;
  --lh-18px-arena: 1.125rem;
  --lh-20px-arena: 1.25rem;
  --lh-24px-arena: 1.5rem;
  --lh-28px-arena: 1.75rem;
  --lh-30px-arena: 1.875rem;
  --lh-38px-arena: 2.375rem;
  --lh-40px-arena: 2.5rem;
  --lh-48px-arena: 3rem;

  /* gradient colors */
  --gradient-1-arena: linear-gradient(224deg, rgb(23 29 155 / 0.10) 26.64%, rgb(255 98 0 / 0.10) 79.05%), #FFF;
  --gradient-2-arena: linear-gradient(239deg, rgb(23 29 155 / 0.10) 21.17%, rgb(255 98 0 / 0.10) 104.5%);
  --gradient-3-arena: linear-gradient(34deg, #C9D3D7 18.09%, #EBEBEB 102.51%, #EBEBEB 102.51%);
  --nav-shadow: drop-shadow(0 0 4px rgb(0 0 0 / 0.19));
  --car-filter-shadow: 0 0 10.8px 0 rgb(169 169 169 / 0.11);
  --car-filter-hover: linear-gradient(0deg, rgb(57 139 215 / 0.1) 11.17%, rgb(255 255 255 / 0.1) 68.17%);
}

select,
input,
button {
  font-family: inherit;
}

.heading2 {
  font-style: normal;
  font-weight: var(--fw-700);
  color: var(--tertiary-black);
  font-size: var(--heading-l-nexa);
  letter-spacing: calc(var(--heading-l-nexa) * 0.02);
  line-height: var(--lh-40px-nexa, var(--lh-30px-arena));

  @media (width >=1024px) {
    font-size: var(--heading-xxl-nexa);
    letter-spacing: calc(var(--heading-xxl-nexa) * 0.02);
    line-height: var(--lh-56px-nexa, var(--lh-40px-arena));
  }
}

.heading4 {
  font-style: normal;
  font-weight: var(--fw-300);
  color: var(--tertiary-white);
  font-size: var(--heading-xs-nexa);
  line-height: var(--lh-24px-nexa, var(--lh-30px-arena));

  @media (width >=1024px) {
    font-size: var(--heading-m-nexa);
    line-height: var(--lh-48px-nexa, var(--lh-40px-arena));
  }
}

.heading5 {
  margin: 0;
  font-style: normal;
  font-weight: var(--fw-500);
  color: var(--tertiary-white);
  font-size: var(--heading-xs-nexa);
  letter-spacing: calc(var(--heading-xs-nexa) * 0.02);
  line-height: var(--lh-27px-nexa, var(--lh-30px-arena));

  @media (width >=1024px) {
    line-height: var(--lh-36px-nexa, var(--lh-40px-arena));
  }

  @media (width >=1366px) {
    font-size: var(--heading-m-nexa);
    letter-spacing: calc(var(--heading-m-nexa) * 0.02);
  }
}

.heading6 {
  margin: 0;
  font-style: normal;
  font-weight: var(--fw-500);
  color: var(--tertiary-light-grey);
  font-size: var(--heading-xs-nexa);
  letter-spacing: calc(var(--heading-xs-nexa) * 0.02);
  line-height: normal;

  @media (width >=768px) {
    line-height: var(--lh-36px-nexa, var(--lh-40px-arena));
  }

  @media (width >=1024px) {
    font-size: var(--heading-m-nexa);
    letter-spacing: calc(var(--heading-m-nexa) * 0.02);
  }
}

.body-text {
  font-style: normal;
  font-weight: var(--fw-300);
  font-size: var(--body-s-nexa);
  line-height: var(--lh-20px-nexa, var(--lh-30px-arena));

  @media (width >=1024px) {
    font-size: var(--body-xl-nexa);
  }
}

.body-text-xs {
  margin: 0;
  font-style: normal;
  font-weight: var(--fw-400);
  color: var(--tertiary-light-grey);
  font-size: var(--body-xs-nexa);
  line-height: var(--lh-18px-nexa, var(--lh-30px-arena));

  @media (width >=1024px) {
    line-height: var(--lh-24px-nexa, var(--lh-30px-arena));
  }

  @media (width >=1366px) {
    font-size: var(--body-m-nexa);
  }
}

.body-text-s {
  margin: 0;
  font-style: normal;
  font-weight: var(--fw-400);
  color: var(--tertiary-light-grey);
  font-size: var(--body-s-nexa);
  line-height: var(--lh-24px-nexa, var(--lh-30px-arena));

  @media (width >=1024px) {
    font-size: var(--body-m-nexa);
  }
}

body.arena * {
  letter-spacing: normal;
}

/* headings styles */
/* mobile: 40px/48px/700 */
/* desktop: 56px/64px/700 */
.display {
  font-size: var(--heading-l-nexa, var(--heading-xl-arena));
  line-height: var(--lh-48px-nexa, var(--lh-38px-arena));
  font-weight: var(--fw-700);
  letter-spacing: calc(1em * 0.02);

  @media (width >=1024px) {
    font-size: var(--heading-xxl-nexa, var(--heading-xxl-arena));
    line-height: var(--lh-64px-nexa, var(--lh-48px-arena));
  }
}

/* mobile: 32px/40px/700 */
/* desktop: 48px/56px/700 */
.heading {
  font-size: var(--heading-m-nexa, var(--heading-l-arena));
  line-height: var(--lh-40px-nexa, var(--lh-30px-arena));
  font-weight: var(--fw-700);
  letter-spacing: calc(1em * 0.02);

  @media (width >=1024px) {
    font-size: var(--heading-xl-nexa, var(--heading-xl-arena));
    line-height: var(--lh-56px-nexa, var(--lh-40px-arena));
  }
}

/* mobile: 18px/24px/normal */
/* dekstop: 24px/32px/normal */
.sub-heading {
  font-size: var(--body-xl-nexa, var(--heading-m-arena));
  line-height: var(--lh-24px-nexa, var(--lh-24px-arena));
  letter-spacing: calc(1em * 0.02);

  @media (width >=1024px) {
    font-size: var(--heading-s-nexa, var(--heading-l-arena));
    line-height: var(--lh-32px-nexa, var(--lh-28px-arena));
  }
}

/* mobile: 16px/20px/normal */
/* desktop: 18px/24px/normal */
.text-large {
  font-size: var(--body-m-nexa, var(--heading-s-arena));
  line-height: var(--lh-20px-nexa, var(--lh-20px-arena));

  @media (width >=1024px) {
    font-size: var(--body-xl-nexa, var(--heading-s-arena));
    line-height: var(--lh-24px-nexa, var(--lh-20px-arena));
  }
}

/* mobile: 14px/18px/normal */
/* desktop: 16px/20px/normal */
/* desktop.variant1: 18px/24px/normal */
/* variant 2
* mobile: 14px/20px/normal
* desktop: 32px/44px/normal */
.text-medium {
  font-size: var(--body-s-nexa, var(--body-xs-arena));
  line-height: var(--lh-18px-nexa, var(--lh-18px-arena));

  @media (width >=1024px) {
    font-size: var(--body-m-nexa, var(--body-xs-arena));
    line-height: var(--lh-20px-nexa, var(--lh-20px-arena));

    &.text-medium--variation-1 {
      font-size: var(--body-xl-nexa);
      line-height: var(--lh-24px-nexa);
    }
  }

  &.text-medium--variation-2 {
    font-weight: var(--fw-300);
    line-height: var(--lh-20px-nexa);

    @media (width >=1024px) {
      font-size: var(--heading-m-nexa);
      line-height: var(--lh-44px-nexa);
    }
  }

  &.text-medium--variation-3 {
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: var(--lh-20px-nexa);

    strong {
      font-weight: var(--fw-500);
    }

    @media (width >=1024px) {
      line-height: normal;
      font-size: var(--heading-xs-nexa);
    }
  }
}

/* mobile: 12px/16px/normal */
/* dekstop: 12px/18px/normal */
.text-small,
.caption {
  font-size: var(--body-xs-nexa, var(--body-xxs-arena));
  line-height: var(--lh-16px-nexa, var(--lh-16px-arena));

  @media (width >=1024px) {
    line-height: var(--lh-18px-nexa, var(--lh-18px-arena));
  }
}

/* desktop: 14px/20px/normal */
.caption {
  &.caption--variant-1 {
    color: var(--secondary-main);
    line-height: var(--lh-20px-nexa, var(--lh-18px-arena));
    font-size: var(--body-s-nexa, var(--body-xs-arena));
  }

  @media (width >=1024px) {
    font-size: var(--body-s-nexa, var(--body-xs-arena));
    line-height: var(--lh-20px-nexa, var(--lh-20px-arena));
  }
}

/* mobile: 12px/16px/normal */
/* tablet: 18px/20px/normal */
/* desktop: 18px/20px/normal */
.heading-sm {
  font-size: var(--body-xs-nexa, var(--body-xxs-arena));
  line-height: var(--lh-16px-nexa, var(--lh-14px-arena));

  @media (width >=768px) {
    font-size: var(--body-m-nexa, var(--body-xs-arena));
    line-height: var(--lh-20px-nexa, var(--lh-18px-arena));
  }

  @media (width >=1024px) {
    font-size: var(--body-xl-nexa, var(--heading-s-arena));
    line-height: var(--lh-24px-nexa, var(--lh-20px-arena));
  }
}

/* headings font weight */
.font-bold {
  font-weight: var(--fw-700);
}

.font-semibold {
  font-weight: var(--fw-600);
}

.font-medium {
  font-weight: var(--fw-500);
}

.font-regular {
  font-weight: var(--fw-400);
}

.font-light {
  font-weight: var(--fw-300);
}

.text-underline {
  text-decoration: underline;
}

/* headings light color */
.display,
.heading,
.sub-heading,
.text-large,
.text-medium,
.text-small,
.caption,
.heading-sm,
.footer-text-medium,
.footer-text-medium-xs {
  &.light {
    color: var(--tertiary-white);
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

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

html {
  overflow-x: hidden;
  width: 100vw;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body,
body.appear {
  font-size: var(--fs-22px);
  margin: 0;
  line-height: 1.5;
  background-color: var(--background-color);
  display: none;
  width: 100%;
  height: auto;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

body.appear {
  display: block;
  overflow: unset;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 997;
  background-color: var(--primary-main);
}

/* for CLS issue */
.header-wrapper .header:not([data-block-status='loaded']) {
  height: 114px;

  @media (width >=1200px) {
    height: 64px;
  }
}

a:any-link {
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
}

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

button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;

  &:not(:disabled) {
    cursor: pointer;
  }
}

/* Grid System responsive */
@media screen and (width >=768px) {
  :root {
    --grid-columns: 8;
    --grid-gutter-width: 24px;
    --nav-total-height: 112px;
    --container-margin: 56px;
  }
}

@media screen and (width >=1024px) {
  :root {
    --grid-columns: 12;
    --grid-gutter-width: 24px;
  }
}
@media screen and (width >=1200px){
  :root{
      --nav-top-height: 64px;
  }
}

@media screen and (width >=1200px) {
  :root {
    --nav-top-height: 64px;
  }
}

@media screen and (width >=1600px) {
  :root {
    --container-margin: 60px;
  }
}

/* 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)));
}

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

.g-sm-7 {
  width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 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)));
  }
}

/* scrollbar */
::-webkit-scrollbar {
  width: 3px;
  background-color: var(--primary-main);
  border-left: none;
}

::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px #000 ; */
  background-color: #767879;
  border-left: 2px solid white;
}

::-webkit-scrollbar-thumb {
  background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="2" height="2" xmlns:xlink="http://www.w3.org/1999/xlink" transform="matrix(6.123233995736766e-17,1,-1,6.123233995736766e-17,0,0)"><path d="M0 0 C7.8750069 6.75000592 7.8750069 6.75000592 11.10746425 9.98211509 C11.84707099 10.71921831 12.58667773 11.45632153 13.3486968 12.21576121 C14.14050215 13.00990773 14.9323075 13.80405425 15.74810696 14.62226582 C16.60881258 15.481518 17.4695182 16.34077018 18.35630581 17.2260603 C20.73940247 19.60614185 23.12024924 21.98843367 25.50016295 24.3716954 C28.09187512 26.96594883 30.68648952 29.55729696 33.28073126 32.14902037 C37.82514155 36.6898211 42.36769102 41.23247671 46.90902138 45.77635765 C53.66182809 52.5329467 60.41749019 59.28667533 67.17371664 66.03984461 C79.23850252 78.09936436 91.3004256 90.16174426 103.36113443 102.22534131 C113.9118469 112.77856806 124.46348674 123.33086646 135.01605415 133.88223839 C135.7156781 134.58178595 136.41530205 135.28133351 137.13612672 136.00207948 C139.97597159 138.84161303 142.81582 141.68114304 145.65567423 144.52066723 C172.29580061 171.15773445 198.93300944 197.79771753 225.5689152 224.4390051 C249.25190743 248.12674607 272.93748787 271.81189615 296.62524414 295.49487305 C323.2264563 322.09073596 349.82605909 348.68820675 376.42304999 375.28829116 C379.2555822 378.12114411 382.08811837 380.95399311 384.9206562 383.78684044 C385.61812169 384.48438501 386.31558718 385.18192957 387.03418799 385.90061186 C397.5851079 396.45267116 408.13726482 407.00349238 418.69001579 417.55372047 C430.67942956 429.54028221 442.66706965 441.52861455 454.65233695 453.51932237 C461.36724859 460.23718122 468.08354798 466.95364568 474.80181237 473.66815162 C479.28028919 478.14439828 483.75696775 482.62243784 488.23214212 487.10198614 C490.78768666 489.65992599 493.34404078 492.21704301 495.90256488 494.77200291 C498.64865408 497.5143053 501.39092811 500.26040152 504.13278103 503.00693989 C504.94097454 503.81279224 505.74916806 504.61864459 506.58185229 505.4489167 C507.3039344 506.17350233 508.02601651 506.89808796 508.76997989 507.64463073 C509.39857544 508.27329403 510.02717098 508.90195734 510.67481488 509.54967104 C512 511 512 511 512 512 C343.04 512 174.08 512 0 512 C0 343.04 0 174.08 0 0 Z " fill="%23fff" transform="translate(0,0)"></path></svg>');
  background-repeat: no-repeat;
  background-size: auto;
  cursor: pointer;
  position: relative;
  background-position: top left;
  background-color: var(--primary-main);
}

::-webkit-scrollbar-thumb::after {
  content: 'abcd';
  position: absolute;
  top: 0;
  width: 10px;
}


/* CTA styles */
.btn {
  font-size: var(--body-m-nexa, var(--body-xs-arena));
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-24px-nexa, var(--lh-18px-arena));
  text-align: center;
  border: none;
  text-decoration: none;
  padding: 8px 20px;
  clip-path: polygon(0 var(--slant-l), var(--slant-s) 0, 100% 0, 100% calc(100% - var(--slant-l)), calc(100% - var(--slant-s)) 100%, 0 100%);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s linear;

  @media (width >=1024px) {
    font-size: var(--body-xl-nexa, var(--heading-s-arena));
    padding: 8px 20px;
    gap: 12px;
  }

  &.btn-primary,
  &.btn-secondary,
  &.btn-primary-outline,
  &.btn-secondary-outline {
    &:hover {
      background-color: var(--secondary-main);
      transition: background 0.2s linear;
    }

    &:disabled {
      background: var(--tertiary-deep-Grey);
    }
  }

  &.btn-lg {
    font-size: 1.125rem;
    line-height: 1.5rem;
    padding: 14px 28px;
  }

  &.lg-btn-lg {
    @media (width >=1024px) {
      font-size: 1.125rem;
      line-height: 1.5rem;
      padding: 14px 28px;
    }
  }

  &.btn-primary {
    background-color: var(--primary-main);
    color: var(--tertiary-white);
  }

  &.btn-secondary {
    background-color: var(--tertiary-white);
    color: var(--primary-main);

    &:hover {
      color: var(--tertiary-white);
    }
  }

  &.btn-primary-outline {
    background: linear-gradient(to bottom right, var(--tertiary-black) 50%, #0000 55%) top left, linear-gradient(to top left, var(--tertiary-black) 50%, #0000 55%) bottom right;
    background-size: calc(var(--slant-s) + 1 * var(--border-1)) calc(var(--slant-l) + 1 * var(--border-1));
    background-repeat: no-repeat;
    box-shadow: 0 0 0 200px inset var(--s, #0000), 0 0 0 var(--border-1) inset var(--tertiary-black);
    color: var(--tertiary-black);

    &:hover {
      color: var(--tertiary-white);
      box-shadow: 0 0 0 200px inset var(--s, #0000), 0 0 0 var(--border-1) inset var(--secondary-main);
      background-image: linear-gradient(to bottom right, var(--secondary-main) 50%, #0000 55%) top left, linear-gradient(to top left, var(--secondary-main) 50%, #0000 55%) bottom right;
    }
  }

  &.btn-primary-outline-2 {
    background: linear-gradient(to bottom right, var(--tertiary-black) 50%, #0000 55%) top left, linear-gradient(to top left, var(--tertiary-black) 50%, #0000 55%) bottom right;
    background-size: calc(var(--slant-s) + 1 * var(--border-1)) calc(var(--slant-l) + 1 * var(--border-1));
    background-repeat: no-repeat;
    box-shadow: 0 0 0 200px inset var(--s, #0000), 0 0 0 var(--border-1) inset var(--tertiary-black);
    color: var(--tertiary-black);

    &:hover {
      border: none;
      color: var(--tertiary-black);
      background-color: var(--tertiary-light-grey);
    }
  }

  &.btn-secondary-outline {
    background: linear-gradient(to bottom right, var(--tertiary-white) 50%, #0000 55%) top left, linear-gradient(to top left, var(--tertiary-white) 50%, #0000 55%) bottom right;
    background-size: calc(var(--slant-s) + 1 * var(--border-1)) calc(var(--slant-l) + 1 * var(--border-1));
    background-repeat: no-repeat;
    box-shadow: 0 0 0 200px inset var(--s, #0000), 0 0 0 var(--border-1) inset var(--tertiary-white);
    color: var(--tertiary-white);
  }

  &.btn-rectangle {
    @media (width <1024px) {
      font-size: 0.875rem;
      padding: 8px 16px;
      line-height: var(--lh-20px-nexa);
      clip-path: none;
      box-shadow: none;
      padding-inline: 16px;
      background: transparent;
      border: 1px solid var(--primary-main);
    }
  }

  &:hover:not(:disabled) {
    cursor: pointer;
  }
}

/* stylelint-disable-next-line no-duplicate-selectors */
body.arena {
  .btn {
    clip-path: none;

    &.btn-primary {
      background: var(--Primary-main-arena);
      color: var(--white-smoke);
    }

    &.btn-secondary {
      background: var(--tertiary-white);
      color: var(--tertiary-black);
    }

    &.btn-primary-outline,
    &.btn-primary-outline-2 {
      border: 1px solid var(--Primary-main-arena);
      color: var(--Primary-main-arena);
      background: none;
      box-shadow: none;
    }

    &.btn-secondary-outline {
      border: 1px solid var(--tertiary-white);
      color: var(--tertiary-white);
      background: none;
    }

    &.btn-primary,
    &.btn-secondary,
    &.btn-primary-outline,
    &.btn-secondary-outline,
    &.btn-primary-outline-2 {
      &:hover {
        background-color: var(--dark-blue);
        color: var(--tertiary-white);
      }
    }
  }

  header {
    background: none;
  }
}

/* dropdown style */
.form-dropdown {
  position: relative;

  .dropdown-toggle {
    display: none;
  }

  .dropdown-label {
    display: block;
    cursor: pointer;
    position: relative;
  }

  .dropdown-label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    background: url('/icons/form_arrow_drop_down.svg') no-repeat;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }

  .dropdown-toggle:checked+.dropdown-label::after {
    transform: translateY(-50%) rotate(-180deg);
  }

  .dropdown-list {
    position: absolute;
    background: var(--tertiary-white);
    border: 1px solid var(--bars-unselected);
    border-top: 0;
    overflow-y: auto;
    max-height: 11rem;
    width: 100%;
    margin: 0;
    display: none;
    z-index: 1;
    cursor: pointer;
  }

  .dropdown-toggle:checked+.dropdown-label+.dropdown-list {
    display: block;
  }

  .dropdown-list li {
    padding: 12px 17px 12px 16px;
    cursor: pointer;
    color: var(--secondary-main);

    @media (width >=1024px) {
      padding: 12px 16px;
    }
  }

  .dropdown-list li:hover {
    background-color: var(--tertiary-light-grey);
  }
}

/* dialog modal style */
dialog.modal-wrapper {
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: unset;
  max-height: none;
  overflow-y: auto;
  margin: 0 auto;
  padding: 40px 0;
  border: 0;
  outline: none;
  background-color: transparent;

  &[open] {
    display: flex;
  }

  @media (width >=768px) {
    justify-content: center;
  }

  &::backdrop {
    background: var(--black-075);
    backdrop-filter: blur(6px);
  }

  .scroll-container {
    overflow: hidden scroll;
    scrollbar-width: none;
  }

  .modal-box {
    background: var(--tertiary-white);
    position: relative;
  }

  .modal-separator {
    position: relative;

    &::before {
      position: absolute;
      content: '';
      height: 16px;
      display: block;
      right: 0;
      left: 0;
      top: -15px;
      background: var(--tertiary-white);
      clip-path: polygon(48% 0, 100% 0, 100% 100%, 45% 100%);

      @media (width >=768px) {
        clip-path: polygon(48% 0, 100% 0, 100% 100%, 46% 100%);
      }

      @media (width >=1024px) {
        clip-path: polygon(70% 0, 100% 0, 100% 100%, 69% 100%);
        height: 24px;
        top: -23px;
      }

      @media (width >=1366px) {
        clip-path: polygon(53% 0, 100% 0, 100% 100%, 51% 100%);
      }

      @media (width >=1920px) {
        clip-path: polygon(49% 0, 100% 0, 100% 100%, 47% 100%);
      }
    }
  }

  .close-button-wrap {
    top: 0;
    z-index: 1;
    right: 16px;
    width: 24px;
    height: 24px;
    position: absolute;

    .close-button {
      border: none;
      outline: none;
      background: url(/icons/popup-close.svg);
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }
}

html:has(.prevent-document-scroll) {
  overflow: hidden;
}