@charset "UTF-8";
/*!
 * Copyright 2024 Blueberry Markets Technology Team
 */

/* BOOTSTRAP ICONS */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* CUSTOM CSS */
@import url("./font.css");
@import url("./customLanguage.css");
@import url("./videoHeroBanner.css");
@import url("./heroBanner.css");
@import url("./section.css");
@import url("./blogs.css");
@import url("./article.css");
@import url("./pagination.css");
@import url("./flag.css");
@import url("./review.css");
@import url("./table.css");
@import url("./form.css");
@import url("./blockgridlayout.css");
@import url("./header.css");
@import url("./footer.css");
@import url("./videoCarousel.css");
@import url("./sections.css");
/* for the sections */
@import url("./breadcrumbs.css");

@import url("./colors.css");

:root {
  --bb-max-width-1536: 96rem;
  /* buttons */
  --bb-btn-rounded: 3.75rem;

  /* blueberry colors */
  --bb-black: #231F20;
  --bb-blue: #0046f3;
  --bb-dark: #272123;
  --bb-white: #e9e9e9;

  /* colors */
  --black: #000;
  --blue-gray: #94A3B8;
  --golden: #FFBB00;
  --neutral-dark: #8593A0;
  --neutral-dark-light: #A0AAAA;
  --neutral-light: #CACED4;
  --white: #fff;
  --yellow: #e7fb83;

  /* font */
  --bb-font-aeonik: 'Aeonik';

  /* font weight */
  --bb-font-regular: 400;
  --bb-font-bold: 700;

  /* font sizes */
  --bb-font-10: 0.625rem;
  --bb-font-11: 0.688rem;
  --bb-font-12: 0.75rem;
  --bb-font-13: 0.813rem;
  --bb-font-14: 0.875rem;
  --bb-font-15: 0.938rem;
  --bb-font-16: 1rem;
  --bb-font-17: 1.063rem;
  --bb-font-18: 1.125rem;
  --bb-font-19: 1.188rem;
  --bb-font-20: 1.25rem;
  --bb-font-22: 1.375rem;
  --bb-font-24: 1.5rem;
  --bb-font-26: 1.625rem;
  --bb-font-30: 1.875rem;
  --bb-font-31: 1.938rem;
  --bb-font-32: 2rem;
  --bb-font-36: 2.25rem;
  --bb-font-40: 2.5rem;
  --bb-font-44: 2.75rem;
  --bb-font-54: 3.4rem;
  --bb-font-55: 3.438rem;
  --bb-font-66: 4.125rem;
  --bb-font-70: 4.44rem;

  /* spacings */
  --bb-padding-40: 2.5rem;

  --bb-unset: unset;
  --bb-border-radius: 2.0rem;
}

html, body {
  font-weight: var(--bb-font-regular);
  font-family: var(--bb-font-aeonik), sans-serif;
}

h1 {
  font-size: var(--bb-font-40);
  line-height: 2.875rem;
}

h2 {
  font-size: var(--bb-font-30);
  line-height: 2.25rem;
}

h3 {
  font-weight: var(--bb-font-bold);
  font-size: var(--bb-font-11);
  line-height: 1.125rem;
}

h4 {
  font-weight: var(--bb-font-bold);
  line-height: 1.85rem;
}

p {
  font-size: var(--bb-font-14);
  line-height: 1.375rem;
}

a.btn {
  font-size: var(--bb-font-20);
}

@media (min-width: 768px) {
  a.btn {
    font-size: var(--bb-font-14);
    max-width: 18.188rem;
  }

  h1 {
    font-size: var(--bb-font-55);
  }
}

@media (min-width: 1536px) {
  h1 {
    font-size: var(--bb-font-66);
    line-height: 4.625rem;
  }

  h2 {
    font-size: var(--bb-font-54);
    line-height: 3.275rem;
  }

  h3 {
    font-weight: var(--bb-font-bold);
    font-size: var(--bb-font-16);
    line-height: 2.775rem;
  }

  a.btn {
    font-size: var(--bb-font-18);
  }

  p {
    font-size: var(--bb-font-17);
    line-height: 1.688rem;
    letter-spacing: 0.022rem;
  }
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, p {
  margin-bottom: var(--bb-unset);
}

.align-items-center {
  align-items: center;
}


.with-letter-spacing {
  letter-spacing: 10.952px;
}

.d-mobile {
  display: block;
}

/*
 * XS and SM Screens Devices
*/

/* Backgrounds */
.bg-hero-banner {
  background-color: #272123;
}

.bg-black,
.table.bg-bb-black> :not(caption)>*>* {
  background-color: var(--bb-black) !important;
}

.bg-yellow,
.table.bg-bb-yellow> :not(caption)>*>* {
  background-color: var(--yellow);
}

.bg-bb-white,
.table.bg-bb-white> :not(caption)>*>* {
  background-color: var(--bb-white);
}

.bg-bb-black,
.table.bg-bb-black> :not(caption)>*>* {
  background-color: var(--bb-black) !important;
}

.bg-bb-blue,
.table.bg-bb-blue> :not(caption)>*>* {
  background-color: var(--bb-blue);
}

.bg-neutral-dark,
.table.bg-neutral-dark> :not(caption)>*>* {
  background-color: var(--neutral-dark);
}

.bg-dark,
.table.bg-dark> :not(caption)>*>* {
  background-color: var(--bb-dark);
}

.bg-black,
.bg-bb-black,
.bg-dark {
  color: var(--white);
}

.bg-white,
.table.bg-white> :not(caption)>*>* {
  background-color: var(--white);
}

.bg-neutral-light,
.table.bg-neutral-light> :not(caption)>*>* {
  background-color: var(--bb-white);
}

.bg-transparent,
.table.bg-transparent> :not(caption)>*>* {
  background-color: transparent;
}

/* Text Colors */
.text-bb-black,
.table.text-bb-black> :not(caption)>*>* {
  color: var(--bb-black) !important;
}

.text-bb-white,
.table.text-bb-white> :not(caption)>*>* {
  color: var(--bb-white);
}

.text-neutral-dark,
.table.text-neutral-dark> :not(caption)>*>* {
  color: var(--neutral-dark);
}

.text-neutral-light,
.table.text-neutral-light> :not(caption)>*>* {
  color: var(--neutral-light);
}

/* Buttons */
.btn {
  border: none;
}

.btn-primary {
  background-color: var(--bb-blue);
}

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

.btn-tertiary {
  background-color: var(--yellow);
  color: var(--bb-black);
}

.btn-tertiary:hover {
  color: var(--bb-white) !important;
}

.btn-outline,
.btn-outline-dark {
  background-color: inherit;
}

.btn-outline {
  background-color: inherit;
  border: 1px solid var(--white);
  color: var(--white);
}

.btn-outline:hover {
  background-color: inherit;
  border: 1px solid var(--white);
  color: var(--white);
}

.btn-outline-dark {
  background-color: inherit;
  border: 1px solid var(--black);
  color: var(--black);
}

.btn-outline-dark:hover {
  background-color: inherit;
  border: 1px solid var(--black);
  color: var(--black);
}

.btn-white {
  background-color: var(--white);
}

.btn-rounded {
  border-radius: var(--bb-btn-rounded);
}

.btn-yellow {
  background-color: var(--yellow);
}


.btn-gray {
  background-color: var(--neutral-dark);
  color: var(--white);
}

.btn-with-icon {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  width: 100%;
}

/* Texts */
.text-black {
  color: var(--bb-black);
}

.text-bold {
  font-weight: var(--bb-font-bold);
}

.text-gray {
  color: var(--neutral-dark);
}

.text-small {
  font-size: var(--bb-font-11);
  color: var(--neutral-dark);
}

.text-white {
  color: var(--white);
}

/* Spacings */
.p-40 {
  padding: var(--bb-padding-40) 0;
}

.px-15 {
  padding-left: 60px;
  padding-right: 60px;
}

.py-15 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.pt-40 {
  padding-top: var(--bb-padding-40);
}

.pb-15 {
  padding-bottom: 60px;
}

.pb-40 {
  padding-bottom: var(--bb-padding-40);
}

.bi-x-lg {
  font-size: 2rem;
}

.white {
  background-color: var(--white);
}

.black {
  background-color: var(--black);
}

.yellow {
  background-color: var(--yellow);
}

.bb-white {
  background-color: var(--bb-white);
}

.bb-black {
  background-color: var(--bb-black);
}

.bb-blue {
  background-color: var(--bb-blue);
}

.neutral-dark {
  background-color: var(--neutral-dark);
}

.neutral-light {
  background-color: var(--neutral-light);
}

.border-color-white {
  border-color: var(--white);
}

.border-color-black {
  border-color: var(--black);
}

.border-color-yellow {
  border-color: var(--yellow);
}

.border-color-bb-black {
  border-color: var(--bb-black);
}

.border-color-bbb-white {
  border-color: var(--bb-white);
}

.border-color-bb-blue {
  border-color: var(--bb-blue);
}

.border-color-neutral-dark {
  border-color: var(--neutral-dark);
}

.border-color-neutral-light {
  border-color: var(--neutral-light);
}

.border-color-transparent {
  border-color: var(--black);
}

.bb-link-black-color {
  color: var(--bb-link-black);
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
  font-weight: bold;
}

.flex {
  display: flex;
}

.justify-items-center {
  justify-items: center;
}

.mx-14 {
  margin-left: 56px;
  margin-right: 56px;
}

.my-7 {
  margin-top: 72px !important;
  margin-bottom: 72px !important;
}

.mt-6 {
  margin-top: 60px !important;
}

.mt-7 {
  margin-top: 72px !important;
}

.px-6 {
  padding-right: 3.5rem !important;
  padding-left: 3.5rem !important;
}

.h-5 {
  height: 20px !important;
}

.h-6 {
  height: 24px !important;
}

.h-8 {
  height: 32px !important;
}

.h-10 {
  height: 40px !important;
}

.h-12 {
  height: 48px !important;
}

.h-14 {
  height: 56px !important;
}

.h-16 {
  height: 64px !important;
}

.h-17 {
  height: 68px !important;
}

.h-80 {
  height: 320px !important;
}

.w-12 {
  width: 48px !important;
}

.w-14 {
  width: 56px !important;
}

.w-16 {
  width: 64px !important;
}

.w-20 {
  width: 80px !important;
}

.w-24 {
  width: 96px !important;
}

.w-100 {
  width: 400px !important;
}

.w-1\/3 {
  width: 30% !important;
}

.w-2\/5 {
  width: 40% !important;
}

.w-4\/5 {
  width: 80% !important;
}

.w-9\/10 {
  width: 90% !important;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.size-8 {
  width: 32px;
  height: 32px;
}

.size-16 {
  width: 64px;
  height: 64px;
}

.size-17 {
  width: 68px;
  height: 68px;
}

.size-78 {
  width: 312px;
  height: 312px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-62xl {
  border-radius: 496px;
}

.text-xs {
  font-size: 12px !important;
}

.text-sm {
  font-size: var(--bb-font-14);
}

.text-2xl {
  font-size: 24px !important;
}

.text-3xl {
  font-size: 30px !important;
}

.text-4xl {
  font-size: 36px !important;
}

.text-5xl {
  font-size: 48px !important;
}

.border-link-color {
  border-color: var(--bs-link-color) !important;
}

.border-bb-black {
  border-color: var(--bb-black) !important;
}

.border-bb-white {
  border-color: var(--bb-white) !important;
}

.border-neutral-dark {
  border-color: var(--neutral-dark) !important;
}

.border-neutral-light {
  border-color: var(--neutral-light) !important;
}

.bb-navtab-content .row {
  max-width: 100%;
}

.bb-navtab-content .nav-tabs {
  border-width: 0;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.bb-navtab-content .nav-link {
  border: solid !important;
  border-width: var(--bs-border-width);
  border-radius: 9999px !important;
  border-color: var(--bb-white) !important;
  background-color: var(--bb-white);
  color: var(--bs-gray) !important;
  padding: 0;
  font-size: var(--bb-font-11);
  line-height: 1.563rem;
}

section.cfd-shares .bb-navtab-content .nav-link {
  background-color: inherit;
  color: var(--bs-gray) !important;
  padding: 0;
  font-size: var(--bb-font-11);
  line-height: 1.563rem;
  border-color: inherit;
  border-radius: unset;
}

section.cfd-shares .bb-navtab-content .nav-link {
  color: var(--bs-gray) !important;
  padding: 0;
  font-size: var(--bb-font-11);
  line-height: 1.563rem;
  border-width: 0 !important;
  border-radius: 0 !important;
  border-color: var(--bb-white) !important;
  border: none !important;
}

.bb-navtab-content hr {
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  left: 50%;
  width: 100vw;
}

.bb-navtab-content .nav-link.active {
  border: solid !important;
  border-radius: 9999px !important;
  color: var(--bs-link-color) !important;
  border-width: var(--bs-border-width) !important;
  font-weight: bold;
}

.bb-navtab-content .nav-link:hover {
  background-color: var(--neutral-light);
  color: var(--bb-white);
  border-radius: 9999px !important;
}

section.cfd-shares .bb-navtab-content .nav-link.active {
  border: solid !important;
  border-radius: 9999px !important;
  color: var(--bs-link-color) !important;
  border-width: var(--bs-border-width) !important;
  font-weight: bold;
}

section.cfd-shares .bb-navtab-content .nav-link:hover {
  background-color: inherit;
  color: var(--bb-white);
  border-radius: 9999px !important;
}

.livespread-table thead {
  border-color: var(--bb-blue) !important;
  border-top: solid;
  border-top-width: var(--bs-border-width);
  border-bottom: solid;
  border-bottom-width: var(--bs-border-width);
}

.livespread-table th {
  font-weight: normal;
}

.livespread-table tbody {
  border-color: var(--bs-table-color);
  border-top: solid;
  border-top-width: var(--bs-border-width);
  border-bottom: solid;
  border-bottom-width: var(--bs-border-width);
}

.livespread-table td {
  height: 70px;
}

@media (min-width: 576px) {
  .w-24-sm {
    width: 96px !important;
  }

  .w-2\/5-sm {
    width: 40% !important;
  }

  .h-10-sm {
    height: 40px;
  }

  .size-16-sm {
    width: 60px;
    height: 60px;
  }

  .px-4-sm {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .text-sm-sm {
    font-size: 14px !important;
    line-height: 20px;
  }

  .text-2xl-sm {
    font-size: 24px !important;
    line-height: 32px;
  }

  .text-3xl-sm {
    font-size: 30px !important;
    line-height: 32px;
  }

  .text-5xl-sm {
    font-size: 48px !important;
    line-height: 32px;
  }

  .text-6xl-sm {
    font-size: 60px !important;
    line-height: 1;
  }

  .justify-content-evenly-sm {
    justify-content: space-evenly !important;
  }
}

/* Medium Devices */
@media (min-width: 768px) {
  .d-mobile {
    display: none;
  }

  .border-end-md {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }

  .border-black-md {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
  }

  .border-start-md {
    border-left: var(--bs-border-width) var(--bs-border-style) !important;
  }

  .border-top-0-md {
    border-top: 0 !important;
  }

  .mx-14-md {
    margin-left: 56px;
    margin-right: 56px;
  }

  .mt-5-md {
    margin-top: 3rem !important;
  }

  .mt-7-md {
    margin-top: 72px !important;
  }

  .w-3-md {
    width: 12px !important;
  }

  .w-14-md {
    width: 56px !important;
  }

  .w-18-md {
    width: 72px !important;
  }

  .w-24-md {
    width: 96px !important;
  }

  .w-28-md {
    width: 112px !important;
  }

  .w-100-md {
    width: 400px !important;
  }

  .w-177-md {
    width: 708px !important;
  }

  .w-1\/20-md {
    width: 5% !important;
  }

  .w-1\/10-md {
    width: 10% !important;
  }

  .w-1\/5-md {
    width: 20% !important;
  }

  .w-1\/4-md {
    width: 25% !important;
  }

  .w-1\/3-md {
    width: 30% !important;
  }

  .w-2\/5-md {
    width: 40% !important;
  }

  .w-1\/2-md {
    width: 50% !important;
  }

  .w-2\/3-md {
    width: 70% !important;
  }

  .w-4\/5-md {
    width: 80% !important;
  }

  .h-4-md {
    height: 16px !important;
  }

  .h-5-md {
    height: 20px !important;
  }

  .h-9-md {
    height: 36px !important;
  }

  .h-13-md {
    height: 52px !important;
  }

  .h-20-md {
    height: 80px;
  }

  .h-24-md {
    height: 96px;
  }

  .h-40-md {
    height: 160px;
  }

  .h-50-md {
    height: 200px;
  }

  .h-98-md {
    height: 392px;
  }

  .w-full-md {
    width: 100%;
  }

  .size-11-md {
    width: 44px;
    height: 44px;
  }

  .size-16-md {
    width: 60px;
    height: 60px;
  }

  .rounded-18xl-md {
    border-radius: 144px;
  }

  .rounded-19xl-md {
    border-radius: 152px;
  }

  .rounded-37xl-md {
    border-radius: 296px;
  }

  .rounded-full-md {
    border-radius: 9999px;
  }

  .px-4-md {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }

  .px-8-md {
    padding-left: 32px;
    padding-right: 32px;
  }

  .px-10-md {
    padding-left: 40px;
    padding-right: 40px;
  }

  .px-12-md {
    padding-left: 48px;
    padding-right: 48px;
  }

  .px-14-md {
    padding-left: 56px;
    padding-right: 56px;
  }

  .px-15-md {
    padding-left: 60px;
    padding-right: 60px;
  }

  .px-20-md {
    padding-right: 80px !important;
    padding-left: 80px !important;
  }

  .px-25-md {
    padding-right: 100px !important;
    padding-left: 100px !important;
  }

  .px-30-md {
    padding-right: 120px !important;
    padding-left: 120px !important;
  }

  .px-40-md {
    padding-right: 160px !important;
    padding-left: 160px !important;
  }

  .px-44-md {
    padding-right: 176px !important;
    padding-left: 176px !important;
  }

  .text-2xs-md {
    font-size: 11px !important;
    line-height: 16px;
  }

  .text-xs-md {
    font-size: 12px !important;
    line-height: 16px;
  }

  .text-xl-md {
    font-size: 20px !important;
    line-height: 28px;
  }

  .text-2xl-md {
    font-size: 24px !important;
    line-height: 32px;
  }

  .text-3xl-md {
    font-size: 30px !important;
    line-height: 32px;
  }

  .text-4xl-md {
    font-size: 36px !important;
    line-height: 40px;
  }

  .text-6xl-md {
    font-size: 60px !important;
    line-height: 1;
  }

  .justify-content-evenly-md {
    justify-content: space-evenly !important;
  }

  .bb-navtab-content hr {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    position: relative;
    width: 100%;
  }
}

/* Large Screen Devices */
@media (min-width: 992px) {
  .px-9-lg {
    padding-right: 96px !important;
    padding-left: 96px !important;
  }

  .mt-9-lg {
    margin-top: 96px !important;
  }

  .w-5-lg {
    width: 20px !important;
  }

  .w-24-lg {
    width: 96px !important;
  }

  .w-28-lg {
    width: 112px !important;
  }

  .w-32-lg {
    width: 128px !important;
  }

  .w-36-lg {
    width: 144px !important;
  }

  .w-56-lg {
    width: 224px !important;
  }

  .w-1\/7-lg {
    width: 14.29% !important;
  }

  .w-1\/6-lg {
    width: 16.67% !important;
  }

  .w-1\/5-lg {
    width: 20% !important;
  }

  .w-1\/3-lg {
    width: 30% !important;
  }

  .w-1\/2-lg {
    width: 50% !important;
  }

  .w-4\/5-lg {
    width: 80% !important;
  }

  .w-full-lg {
    width: 100% !important;
  }

  .h-7-lg {
    height: 28px !important;
  }

  .h-9-lg {
    height: 36px !important;
  }

  .h-14-lg {
    height: 56px !important;
  }

  .h-16-lg {
    height: 64px !important;
  }

  .h-24-lg {
    height: 96px !important;
  }

  .h-60-lg {
    height: 240px !important;
  }

  .h-61-lg {
    height: 244px !important;
  }

  .h-167-lg {
    height: 668px !important;
  }

  .size-16-lg {
    width: 64px;
    height: 64px;
  }

  .size-17-lg {
    width: 68px;
    height: 68px;
  }

  .rounded-37xl-lg {
    border-radius: 296px;
  }

  .rounded-48xl-lg {
    border-radius: 336px;
  }

  .rounded-62xl-lg {
    border-radius: 496px;
  }

  .text-lg-lg {
    font-size: 18px !important;
    line-height: 28px;
  }

  .text-xl-lg {
    font-size: 20px !important;
    line-height: 28px;
  }

  .text-2xl-lg {
    font-size: 24px !important;
    line-height: 32px;
  }

  .text-5xl-lg {
    font-size: 48px !important;
    line-height: 1;
  }

  .text-6xl-lg {
    font-size: 60px !important;
    line-height: 1;
  }

  .text-7xl-lg {
    font-size: 72px !important;
    line-height: 1;
  }

  .justify-content-evenly-lg {
    justify-content: space-evenly !important;
  }
}

/* X-Large Screen Devices */
@media (min-width: 1200px) {
  .size-16-xl {
    width: 64px;
    height: 64px;
  }

  .text-2xl-xl {
    font-size: 24px !important;
    line-height: 32px;
  }

  .text-6xl-xl {
    font-size: 60px !important;
    line-height: 1;
  }
}

@media (min-width: 1536px) {
  section.livespread .bb-navtab-content .nav-link {
    font-size: var(--bb-font-20);
  }

  section.cfd-shares .bb-navtab-content .nav-link {
    font-size: var(--bb-font-20);
  }

  .cfd-shares .bb-navtab-content .nav-tabs {
    padding-bottom: 0;
  }
}

/* XX-Large Screen Devices */

.pulsing-element {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50%, rgb(222, 237, 143) 0%, rgba(255, 255, 255, 1) 65%);
  position: absolute;
  z-index: -2;
  animation: pulse 3s ease infinite;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.pulsing-element.active {
  opacity: 1;
}

@keyframes pulse {
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1.2);
  }
}

a:hover {
  background-color: transparent;
  color: var(--black);
  border-color: inherit;
  opacity: 0.8;
}

.btn {
  max-height: 3.438rem;
}

.trade-button {
  max-height: 2.188rem;
}