@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    font-size: clamp(14px, 1vw, 18px);
}

body {
    font-family: "Inter", sans-serif !important;
    background: #000000 !important;
    color: var(--main-text) !important;
    overflow-x: hidden !important;
    /* padding-top: 105px; */
}

.first-red-section p {
    margin: 0;
}

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-wrapper.sticky {
    box-shadow: 0 2px 2px rgba(155, 155, 155, 0.1);
}

.nav-wrapper.scroll {
    background-color: var(--dark-bg);
    box-shadow: 0 2px 2px rgba(155, 155, 155, 0.1);
}

/* Modal Background */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    justify-content: center;
    align-items: center;
}

/* Modal Content */
.custom-modal-content {
    background-color: #1a1931;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: start;
    color: #fff;
}

/* Close Button */
.custom-modal-close {
    color: #aaa;
    float: right;
    font-size: 1.75rem;
    font-weight: bold;
    cursor: pointer;
}

.custom-modal-close:hover,
.custom-modal-close:focus {
    color: #fff;
    text-decoration: none;
}

.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.1em;
}

.flag-icon {
    width: 2rem;
    height: 2rem;
}

#topbar #topbar-content {
    padding-top: .5rem;
    padding-bottom: 1.5rem;
}

#topbar #topbar-content .brand {
    margin-right: 2.5rem;
}

#topbar .brand .main-logo {
    width: 11.25rem;
}

.cookies-accept-container{
  z-index: 9998;        /* preloader should be 9999 */
  position: fixed;
  left: 0; right: 0; bottom: -1px;
  background: var(--dark-bg);
  box-shadow: 0 -1px 2px rgba(255,255,255,.1);
  transition: opacity .25s ease, transform .25s ease;
}
.cookies-accept-container.is-hidden{
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}


.parallax-img {
    will-change: transform;
}

.content-container {
    position: relative;
    z-index: 1;
}

.main-section {
    overflow-x: hidden !important;
    padding-left: 6.944vw;
    padding-right: 6.944vw;
    padding-top: 0;
}

.section-full {
  padding-top: 3.75rem;        /* 60px */
  padding-bottom: 3.75rem;     /* 60px */
  padding-left: 6.944vw;
  padding-right: 6.944vw;
}

.section-full-y {
  padding-top: 4.25rem;        /* 100px */
  padding-bottom: 4.25rem;     /* 100px */
}


.section-spacing-x {
    padding-left: 6.944vw;
    padding-right: 6.944vw;
}

.max-header-w      { max-width: 38.125rem !important; } /* 610px */
.max-p-w           { max-width: 38.125rem !important; } /* 610px */

.max-header-w-small{ max-width: 31.875rem !important; } /* 510px */
.max-p-w-small     { max-width: 31.875rem !important; } /* 510px */

.max-p-w-big       { max-width: 50rem !important; }     /* 800px */


.title-section {
    background-color: var(--small-card-background);
}


:root {
    --main-text: #ffffff;
    --light-text: #ffffffe5;
    --muted-text: #ffffff99;
    --muted-text-footer: #ffffff80;
    --border-tabs: #ffffff26;
    --border-card-global: #ffffff30;
    --text-header: linear-gradient(to right, #ffffff 0%, #ffffff33 100%);
    --muted-text-market: linear-gradient(0deg, #808080, #808080),
        linear-gradient(0deg, #ffffff, #ffffff);
    --background-color: #ffffff;
    --small-card-background: #ffffff1a;
    --small-card-border: linear-gradient(93.76deg,
            rgba(255, 255, 255, 0.1152) 2.31%,
            rgba(255, 255, 255, 0.0576) 103.93%);
    --icons-card-border: #39ff14;
    --green-text: #08a214;
    --green-background: #219e11;
    --btn-outline-color: #ffffff;
    --btn-outline-border-color: #ffffff;
    --empty-img-bg: #d9d9d9;
    --left-of-cards-height: 0px;
    --darker-accent-color: #219e11;
    --btn-dark-hover: linear-gradient(0deg, #39ff14, #39ff14),
        linear-gradient(93.1deg, rgba(0, 145, 124, 0) 0%, #00917c 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    --btn-outline-color: linear-gradient(90deg, #219e11 0%, #38ef7d 100%);
    --border-live-market: linear-gradient(93.76deg,
            rgba(255, 255, 255, 0.1152) 2.31%,
            rgba(255, 255, 255, 0.0576) 103.93%);
    --bg-transparent: #ffffff1a;
    --btn-fill: linear-gradient(90deg, #00917c 0%, #2de06e 100%);
    --btn-text: #ffffff;
    --btn-border: #ffffff;
    --card-transparent: #f5f5f51a;
    --colored-card: linear-gradient(to right,
            rgba(57, 255, 20, 0.4) 0 40%,
            rgba(0, 55, 255, 0.4) 100%);
    /* --dark-main-bg:#000000; */
    --dark-bg: #000000;
    --border-color: #ffffff80;
    --menu-w: min(60rem, 63vw);
    --col-gap: 3.75rem;                         
    --vpad: 1.125rem;                          
    --line-color: rgba(255,255,255,.22); 

    --rem-min: 15px;                  /* smallest base (mobile/low res) */
  --rem-ideal: calc(1vw + 12px);    /* how fast it grows */
  --rem-max: 18px;
}

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

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

.muted-text {
    color: var(--muted-text) !important;
}

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

.dark-green {
    color: var(--darker-accent-color);
}

.text-header {
    color: #fff;

    background: linear-gradient(to right, #ffffff 0%, #ffffff33 250%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.muted-text-header {
    color: var(--muted-text-header) !important;
}

.muted-text-market {
    color: var(--muted-text-market) !important;
}

.muted-text-footer {
    color: var(--muted-text-footer) !important;
}

.br-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

.medium-br-bottom {
    border-bottom: 1px solid var(--medium-border-color) !important;
}

.line-height-22 {
    line-height: 22px;
}

.line-height-24 {
    line-height: 24px;
}

.line-height-25 {
    line-height: 25px;
}

.line-height-28 {
    line-height: 28px;
}

.line-height-30 {
    line-height: 30px;
}

.line-height-35 {
    line-height: 35px;
}

.line-height-68 {
    line-height: 68px;
}

.gap-10 {
    gap: 10px;
}

.py-88 {
    padding-bottom: 88px;
    padding-top: 88px;
}

h1,
h2,
h3,
h4,
h6 {
    color: var(--main-text);
}

.hero-content {
    position: relative;
    z-index: 1;
}

a {
    text-decoration: none !important;
}

.footer-bg a {
    text-decoration: underline !important;
}

a.basic-link {
    text-decoration: none !important;
    color: var(--main-text) !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

/*Font Size*/

/* :root, html { font-size: clamp(var(--rem-min), var(--rem-ideal), var(--rem-max)); } */

body{
  --gutter: clamp(16px, 3vw, 48px);                      /* center children horizontally */
}
body,  .wrapper, main {
  zoom: 1 !important;
  transform: none !important;
}

/* apply to every direct child (no extra wrapper needed) */
body > *:not(.full-bleed){
  margin-inline: auto;
}



/* 2) Replace px utilities with rem (must be AFTER any old px versions) */
.font-size-12 { font-size: 0.75rem !important; }
.font-size-13 { font-size: 0.8125rem !important; }
.font-size-14 { font-size: 0.875rem !important; }
.font-size-15 { font-size: 0.9375rem !important; }
.font-size-16 { font-size: 1rem !important; }
.font-size-18 { font-size: 1.125rem !important; }
.font-size-20 { font-size: 1.25rem !important; }
.font-size-21 { font-size: 1.3125rem !important; }
.font-size-24 { font-size: 1.5rem !important; }
.font-size-28 { font-size: 1.75rem !important; }
.font-size-32 { font-size: 2rem !important; }
.font-size-36 { font-size: 2.25rem !important; }
.font-size-42 { font-size: 2.625rem !important; }
.font-size-48,
div.font-size-48 h2 { font-size: 3rem !important; }

/* 3) (Optional) kill accidental page scaling */
body, .app, .wrapper, main {
  zoom: 1 !important;
  transform: none !important;
}

/* @media (min-width: 1200px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: calc(1.375rem + 1.5vw)!important;
  }
} */

.p-32      { padding: 2rem !important; }                 /* 32px */
.px-32     { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-16     { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-32     { padding-top: 2rem !important;  padding-bottom: 2rem !important; }

.py-24     { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }  /* 24px */
.pt-24     { padding-top: 1.5rem !important; }

.py-56     { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }  /* 56px */

.pb-24     { padding-bottom: 1.5rem !important; }        /* 24px */
.pb-40     { padding-bottom: 2.5rem !important; }        /* 40px */
.pb-48     { padding-bottom: 3rem !important; }          /* 48px */
.pb-100    { padding-bottom: 6.25rem !important; }       /* 100px */

.me-11     { margin-right: 0.6875rem; }                  /* 11px */
.me-24     { margin-right: 1.5rem; }                     /* 24px */
.mt-12     { margin-top: 0.75rem; }                      /* 12px */
.mt-50     { margin-top: 3.125rem; }                     /* 50px */
.mb-16     { margin-bottom: 1rem; }                      /* 16px */
.mb-24     { margin-bottom: 1.5rem; }                      /* 16px */
.mb-57     { margin-bottom: 3.5625rem; }
.my-16     { margin-top: 1rem; margin-bottom: 1rem; }    /* 16px */

.border-radius-35 { border-radius: 2.1875rem !important; } /* 35px */


.last-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* main */

/* Dark background button */
.btn-dark-bg,
.btn-dark-bg:focus {
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--green-background);
    border: none;
    text-decoration: none !important;
    color: var(--main-text);
    box-shadow: none !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 0;
    isolation: isolate;
    font-size: 1rem;           /* ~16px at base, grows with html */
    line-height: 1.5;          /* unitless, scales cleanly */
    min-height: 3.5rem;        /* ~56px */
    padding: 1rem 1.5rem;      /* ~16px 24px */
    border-radius: .75rem;
}

.btn-dark-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 140% at 10% 12%,
            rgba(0, 179, 163, 0.85) 0%,
            rgba(0, 179, 163, 0.6) 35%,
            rgba(0, 179, 163, 0) 60%),
        linear-gradient(108deg, #10b981 0%, #16a34a 100%);
    opacity: 0;
    transform: scale(1.02);
    will-change: opacity, transform;
    z-index: -1;
}

@keyframes btnHoverIn {
    from {
        opacity: 0;
        transform: scale(1.02);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes btnHoverOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.02);
    }
}

.btn-dark-bg:hover::before {
    animation: btnHoverIn 350ms ease forwards;
}

.btn-dark-bg:not(:hover)::before {
    animation: btnHoverOut 350ms ease forwards;
}

/* Outline button */
.btn.btn-main-outline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 3.5rem;                 /* 56px */
  /* or prefer min-height: 3.5rem; */

  padding: 1rem 1.5rem;           /* 16px 24px */
  border-radius: 0.75rem;         /* 12px */
  border: 0.125rem solid var(--btn-border); /* 2px */

  background: transparent;
  color: var(--btn-text);
  font-weight: 500;
  font-size: 1rem;                /* 16px */
  line-height: 1.5rem;            /* 24px */

  overflow: hidden;
  z-index: 0;
  isolation: isolate;
  transition: border-color 0.35s ease, color 0.35s ease, transform 0.2s ease;
}

.btn.btn-main-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--btn-fill);
  z-index: -1;
  opacity: 0;
  transform: scale(1.03);
  will-change: opacity, transform;
}


@keyframes btnFillIn {
    from {
        opacity: 0;
        transform: scale(1.03);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes btnFillOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.03);
    }
}

.btn.btn-main-outline:hover {
    color: var(--btn-text);
    /* box-shadow: 0 0 0 6px var(--btn-fill) inset; */

}

.btn.btn-main-outline:hover::before {
    animation: btnFillIn 420ms ease forwards;
}

.btn.btn-main-outline:not(:hover)::before {
    animation: btnFillOut 300ms ease forwards;
}

.btn.btn-main-outline:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {

    .btn.btn-main-outline,
    .btn.btn-main-outline::before {
        transition: none !important;
        animation: none !important;
        opacity: 1;
    }
}

.btn.btn-main-outline:active {
    border: 0.125rem solid transparent !important;
    color: var(--btn-outline-hover-color) !important;
}

.btn.btn-main-outline:hover:before,
.btn.btn-main-outline:hover:after,
.btn.btn-main-outline:active:before,
.btn.btn-main-outline:active:after {
    top: 0;
}

.btn-link.card {
    background-color: transparent;
    text-decoration: none !important;
    border: none;
    display: block;
    width: 100%;
    text-align: left;
    box-shadow: none;
    border-radius: 0.625rem;
    overflow: hidden;
}

.btn-link.card:hover {
    text-decoration: none;
}

b,
strong {
    font-weight: 600 !important;
}

.borderless-btn {
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    border: none;
    text-decoration: none !important;
    color: var(--main-text) !important;
}

.borderless-btn img,
.borderless-btn svg {
    transition: all 0.4s ease-in-out;
}

.borderless-btn:hover img {
    content: url("/svg/icons/dotted-arrow-green.svg") !important;
    transform: translateX(0.625rem);
}

.cookies-accept-container .borderless-btn:hover svg {
    transform: translateX(0.625rem);
}

.cookies-accept-container .borderless-btn:hover svg path {
    stroke: var(--icons-card-border);
}

#customModal .modal-content {
    background-color: #191819;
}

.btn-close-white {
    filter: invert(1);
    /* makes the icon white */
}

.modal-backdrop.show {
    z-index: 1040 !important;
    /* behind modal */
}

.modal.show {
    z-index: 1050 !important;
    /* above backdrop */
}

.borderless-btn:hover svg {
    transform: translateX(0.625rem);
}

.borderless-btn:hover {
    /* transform: scale(1.1); */
    font-weight: 600;
    color: var(--icons-card-border) !important;
}

/* footer styles */

.footer {
    background-color: #000000;
    padding-left: calc(6.944vw - 0.75rem);
    padding-right: calc(6.944vw - 0.75rem);
}

footer p {
    font-size: 0.875rem ;
}

footer a {
    color: var(--muted-text-footer);
}

footer a:hover {
    color: var(--icons-card-border);
}

/* topbar styles */

/* #topbar {
    padding-left: 6.944vw;
    padding-right: 6.944vw;
    background: var(--dark-main-bg);
    transition: all 0.6s ease;
}

#topbar .dropdown-menu,
.offcanvas .dropdown-menu {
    background-color: #fff;
}

#topbar .dropdown-menu li a:hover,
#topbar .dropdown-menu li a:focus {
    background-color: var(--border-color) !important;
}


.topbar .dropdown-toggle.arrow-link.nav-link.show::before{
  transform: rotate(180deg) !important;
  top: -0.3125rem !important;
}



.container{
    max-width: max-content!important;
}

.topbar .menuDropdown{
  --x: -50%;
  --y-open: 1.1rem;
  --y-closed: 2rem;
  --s-open: 1;
  --s-closed: .96;

  transform-origin: 50% 0;
  opacity: 0;
  transform: translate(var(--x), var(--y-closed)) scale(var(--s-closed));
  transition: transform 340ms cubic-bezier(.18,.9,.22,1), opacity 180ms ease-out;
  pointer-events: none;
}



.topbar .menuDropdown.show{
  transform: translate(-50%, 1.25rem) scale(1);    
}


.topbar.mega-menu-item:first-child .menuDropdown,
.navbar .mega-menu-item:first-child .menuDropdown{
  left: 0;
  right: auto;
  transform: translateY(2rem) scale(.98);
}



.topbar.mega-menu-item:last-child .menuDropdown,
.navbar .mega-menu-item:last-child .menuDropdown{
  left: auto;
  right: 0;
  transform: translateY(2rem) scale(.98);
}
.topbar.mega-menu-item:last-child .menuDropdown.show,
.navbar .mega-menu-item:last-child .menuDropdown.show{
  transform: translateY(1.25rem) scale(1);
}

.topbar .menuDropdown{
  border-radius: 1.5rem;
  width: max-content !important;  
  align-items: center;
}

#topbar .topbar .menuDropdown.show{
  background: rgba(255,255,255,0.10);         
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.15);
}


.topbar .menuDropdown.is-opening,
.topbar .menuDropdown.show{
  opacity: 1;
  transform: translate(-45%, 1.25rem) scale(1);
  pointer-events: auto;
}


.topbar .menuDropdown.is-hiding{
  opacity: 0;
  transform: translate(-50%, 2rem) scale(.98);
  pointer-events: none;
}

.topbar .mega-menu-item .dropdown-menu{
  background-color: #FFFFFF1A;
  border: 1px solid transparent;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  border-image: linear-gradient(93.76deg, rgba(255,255,255,0.1152) 2.31%, rgba(255,255,255,0.0576) 103.93%),
                 linear-gradient(93.83deg, rgba(57,255,20,0.2) 0%, rgba(57,255,20,0) 100%);
  border-image-slice: 1;
}

.vr{
    background-color: rgba(255,255,255,.22)!important;
    opacity: 1!important;
    width: 2px!important;
    min-height: 10em!important;
    height: 100%;
}

.topbar .menuDropdown .menu-col{
  list-style: none;
  display: grid;
  align-content: start;
  gap: 0.25rem;
}



.topbar .menuDropdown{       
  padding: var(--vpad) 1.25rem;               
}

.topbar .menuDropdown .menu-col{ padding-right: calc(var(--col-gap) / 2); }


@media (max-width: 992px){
  .navbar .mega-menu-item:nth-of-type(2) .menuDropdown,
  .navbar .mega-menu-item:nth-of-type(2) .menuDropdown.show,
  .navbar .mega-menu-item:nth-of-type(2) .menuDropdown.is-opening,
  .navbar .mega-menu-item:nth-of-type(2) .menuDropdown.is-hiding{
    transform: translate(-50%, 2rem) scale(.98);
  }
  .navbar .mega-menu-item:nth-of-type(2) .menuDropdown.show,
  .navbar .mega-menu-item:nth-of-type(2) .menuDropdown.is-opening{
    transform: translate(-50%, 1rem) scale(1);
  }
}



.topbar .menuDropdown .menu-img{
  height: 11rem;
  border-radius: 1rem;
  aspect-ratio: 6/3;
  padding-left: 3rem;
}


.topbar .menuDropdown .dropdown-item{ border-radius: .5rem; }
.topbar .menuDropdown .dropdown-item:hover{ background: var(--item-hover); }


.topbar .dropdown.show .dropdown-toggle::after{
  transform: rotate(180deg);
}
.topbar .dropdown-toggle::after{
  transition: transform .2s ease;  
}



@media (max-width: 992px){
  
  .topbar .menuDropdown .menu-media{
    grid-column: 1;
    height: 10rem;
  }
}

@media (max-width: 992px){
  .mega-menu-item .menuDropdown{
    width: min(92vw, var(--menu-w)) !important;
    min-width: 0 !important;            
    max-width: 92vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 2rem) scale(.98);
  }
  .mega-menu-item .menuDropdown.show{
    transform: translate(-50%, 1rem) scale(1);
    grid-template-columns: 1fr;      
  }
}

.topbar .mega-menu-item:has(> .dropdown-menu.show) .dropdown-toggle::before {
  transform: rotate(180deg);
  top: -30%;
}
.topbar .dropdown-toggle::before {
  transition: transform .4s ease;
}

.topbar .dropdown-menu .menu-option{
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
} */

/* Topbar base */
#topbar {
  padding-left: 6.944vw;
  padding-right: 6.944vw;
  background: var(--dark-main-bg);
  transition: background-color .3s ease;
}


#topbar .brand .main-logo { width: 10rem; }

/* Keep dropdown styling scoped */
#topbar .nav-title { position: relative; z-index: 50; }
#topbar .nav-links .nav-link { cursor: pointer; }

 #topbar .dropdown-item.menu-option:hover{
    color: var(--icons-card-border);
}

#topbar .dropdown-item.menu-option.active {
  color: var(--icons-card-border);
  background: transparent; /* or var(--item-hover) if you want a chip */
  font-weight: 600;
}

#topbar .arrow-link.nav-link[aria-expanded="true"]::before {
    transform: rotate(180deg);
    top: 0.0125rem;
}

/* --- Mega dropdown (desktop ≥992px) --- */
@media (min-width: 992px){
  #topbar .mega-menu-item { position: static; } 

  #topbar .menuDropdown {
    position: absolute;
    left: 0;
    right: 0;                 
    width: 100%;
    top: 100%;             
    margin-top: .7rem;
    border-radius: 1rem;

    background: rgba(255,255,255,0.10);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.15);

    padding: 1rem 1.25rem;

    opacity: 0;
    transform: scale(.92);
    transform-origin: top center;
    transition: transform 1.5s cubic-bezier(.18,.9,.22,1), opacity .3s ease;
    pointer-events: none;
    display: block;
    max-width: 900px;
  }

  #topbar .dropdown.show > .menuDropdown,
  #topbar .dropdown-menu.show.menuDropdown {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* Columns inside the dropdown */
  #topbar .menu-col {
    list-style: none;
    padding: .5rem 1rem .75rem 0;
    margin: 0;
    display: grid;
    gap: 1.25rem;
  }

  #topbar .menu-img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
    border-radius: .75rem;
  }

  /* Items */
  #topbar .dropdown-item.menu-option {
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
  }
  #topbar .dropdown-item.menu-option:hover,
  #topbar .dropdown-item.menu-option:focus {
    background: var(--item-hover);
  }

  /* Rotate arrow on open (Bootstrap uses .show on .dropdown) */
  #topbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
  }
  #topbar .dropdown-toggle::after {
    transition: transform .2s ease;
  }
}

/* --- Mobile (<992px): let Bootstrap handle it (no absolute centering) --- */
@media (max-width: 991.98px){
  #topbar .nav-topbar{
    justify-content: space-between;
  }
  
  #topbar .menuDropdown {
    position: static;
    width: 100%;
    margin-top: .5rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.10);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.15);
  }
}

/* Language dropdown (kept simple) */
#topbar .languageDropdown .dropdown-item.is-active { font-weight: 700; }

.vr{ background-color: rgba(255,255,255,.22)!important; opacity: 1!important; width: 2px!important; max-height: max-content !important;
  height: 100%;
  min-height: 2em!important;
}

#topbar .btn-dark-bg,
#topbar .btn-main-outline{
  min-height: 2.8rem !important;
  height: 2.8rem !important;
}

#topbar .languageDropdown{
  position: absolute;
  top: 100%;
  right: 0;
  margin-right: -0.625rem;               
  width: min(82rem, 85vw);
  border-radius: 1.5rem;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem 1.75rem;        
  padding: 1.125rem 1.25rem;  
  opacity: 0;
  transform:  translateY(15px) scale(.92);
  transform-origin: top center;
  pointer-events: none;
  transition:
    transform 1.5s cubic-bezier(.18,.9,.22,1), opacity 0.3s ease, visibility 0s;  
  will-change: transform, opacity;

  backface-visibility: hidden;
  overflow: clip;                
  will-change: transform, opacity;
  z-index: 1055;
}


#topbar .languageDropdown.show{
  opacity: 1;
  transform: translateY(15px) scale(1);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  #topbar .languageDropdown,
  #topbar .languageDropdown.show{
    transition: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}



#topbar .languageDropdown.show::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,
        transparent 24.9%, rgba(0,0,0,.08) 25%, rgba(0,0,0,.08) 25.1%, transparent 25.1%,
        transparent 49.9%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.08) 50.1%, transparent 50.1%,
        transparent 74.9%, rgba(0,0,0,.08) 75%, rgba(0,0,0,.08) 75.1%, transparent 75.1%);
    border-radius: 1.5rem ;
}


#topbar .languageDropdown li{ list-style: none; margin: 0; }


#topbar .dropdown-toggle::after{
    margin-left: .35rem;
    transition: transform .25s ease;
}
#topbar .language-selector::before {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: .35rem;
    transform: rotate(45deg);         
    transition: transform 0.5s ease; 
}


#topbar .language-selector[aria-expanded="true"]::before {
    transform: rotate(180deg);
    top: 0.3125rem;
}

@media (max-width: 768px){
    #topbar .languageDropdown{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
    #topbar .languageDropdown{ grid-template-columns: 1fr; }
}

@media (max-width: 1094px){
    .brand{ margin-right: 1.5rem; }

     #topbar .nav-links {
    gap: 0.2625rem!important;
  }
}

.brand{ margin-right: 3rem; }

@media (max-width: 1340px){
    #topbar {
        padding-left: 3.944vw;
        padding-right: 3.944vw;
    }

    #topbar #topbar-content .brand {
      margin-right: 1.2rem;
    }
}

@media (max-width: 1240px){
    #topbar {
        padding-left: 1.244vw;
        padding-right: 1.244vw;
    }
    #topbar .brand .main-logo {
        width: 6.875rem;
    }

    #topbar .nav-link {
        padding-right: 0.3125rem;
    }
}

#topbar .languageDropdown .checkmark img{
    width: 1.5625rem;
}

#topbar .login-btn,
#mobile-menu .login-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;                 /* 56px */
  width: 5.625rem;                /* 90px */
  border: 0.1875rem solid var(--main-text); /* 3px */
  border-radius: 0.75rem;         /* 12px */
  background-color: transparent;
  color: var(--main-text);
  font-size: 1rem;                /* 16px */
  gap: 0.75rem;                   /* 12px */
  padding: 1rem 1.5rem;           /* 16px 24px */
}

/* language selector */
#topbar .language-selector{
  position: relative;
  font-size: 0.8125rem;           /* 13px */
  border: none !important;
  color: var(--light-text);
}

#topbar .language-selector::after,
#mobile-menu .language-selector::after {
    display: none;
}

#topbar .nav-link {
    font-weight: 500;
    display: inline-block;
    position: relative;
    color: var(--light-text);
    padding-right: 0.75rem;
}

#topbar .nav-link.active,
#topbar .nav-link:hover {
    color: var(--main-text);
}

a.active__link,
#mobile-menu .accordion-button.active {
    color: var(--darker-accent-color) !important;
}

#topbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: -0.5625rem;            /* -9px */
  left: 50%;
  width: 0;
  height: 0.1875rem;             /* 3px */
  background-color: var(--main-text);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

#topbar .nav-link::after {
  position: relative;
}

#topbar .nav-link.arrow-link::after{
  content: "";
  position: absolute;
  left: -0.8125rem;
  right: 0;
  bottom: -0.5625rem;               
  height: 0.1875rem;               
  background-color: var(--main-text);
  opacity: 0;
  transform: translateX(-50%);
  transition: all 0.34s ease;
  pointer-events: none;
}

/* show only on hover/focus (and keep when dropdown is open if you like) */
#topbar .nav-link.arrow-link:hover::after,
#topbar .nav-link.arrow-link:focus-visible::after,
#topbar .dropdown.show > .nav-link.arrow-link::after{
  opacity: 1;
  transform: translateY(0);
}

#topbar .arrow-link.nav-link::before,
#topbar .language-selector::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.875rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9.37743 10.6325C9.29208 10.6325 9.21263 10.6189 9.13908 10.5916C9.06553 10.5644 8.99558 10.5176 8.92923 10.4514L5.74581 7.26795C5.64782 7.16984 5.59765 7.04653 5.59529 6.89802C5.59304 6.74962 5.64322 6.62407 5.74581 6.52136C5.84852 6.41877 5.97295 6.36748 6.1191 6.36748C6.26525 6.36748 6.38968 6.41877 6.49239 6.52136L9.37743 9.40658L12.2625 6.52136C12.3606 6.42338 12.4839 6.3732 12.6324 6.37084C12.7808 6.3686 12.9063 6.41877 13.0091 6.52136C13.1116 6.62407 13.1629 6.7485 13.1629 6.89465C13.1629 7.04081 13.1116 7.16524 13.0091 7.26795L9.82563 10.4514C9.75928 10.5176 9.68933 10.5644 9.61579 10.5916C9.54224 10.6189 9.46279 10.6325 9.37743 10.6325Z' fill='%23FFFFFFE5'/></svg>");
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s ease;
}

/* #topbar .arrow-link.nav-link.active::before,
#topbar .arrow-link.nav-link:hover::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9.37743 10.6325C9.29208 10.6325 9.21263 10.6189 9.13908 10.5916C9.06553 10.5644 8.99558 10.5176 8.92923 10.4514L5.74581 7.26795C5.64782 7.16984 5.59765 7.04653 5.59529 6.89802C5.59304 6.74962 5.64322 6.62407 5.74581 6.52136C5.84852 6.41877 5.97295 6.36748 6.1191 6.36748C6.26525 6.36748 6.38968 6.41877 6.49239 6.52136L9.37743 9.40658L12.2625 6.52136C12.3606 6.42338 12.4839 6.3732 12.6324 6.37084C12.7808 6.3686 12.9063 6.41877 13.0091 6.52136C13.1116 6.62407 13.1629 6.7485 13.1629 6.89465C13.1629 7.04081 13.1116 7.16524 13.0091 7.26795L9.82563 10.4514C9.75928 10.5176 9.68933 10.5644 9.61579 10.5916C9.54224 10.6189 9.46279 10.6325 9.37743 10.6325Z' fill='%23219E11'/></svg>");
} */

#topbar .nav-link:hover.arrow-link::after,
#topbar .nav-link.active.arrow-link::after {
    width: calc(100% + 0.875rem);
}

#topbar .nav-links {
  gap: 1.1875rem;              /* 35px */
}

@media (max-width:1200px){
  #topbar .nav-links {
  gap: 0.7rem;
}
}

#topbar .nav-buttons {
  gap: 0.5rem;                 /* 8px */
}

.recommended-span {
  height: 1rem;                /* 16px */
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;         /* 10px */
  border-radius: 2rem;         /* 32px */
  background-color: var(--medium-accent-color);
  color: var(--main-text);
  padding: 0.125rem 0.375rem !important;  /* 2px 6px */
}

#mobile-menu {
    background-color: var(--dark-main-bg);
}

.offcanvas .accordion-body a {
    color: var(--main-text);
}

.offcanvas .accordion-body a:hover {
    color: var(--darker-accent-color);
}

.offcanvas .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

.offcanvas .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='red' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}


.icon-circle-container {
  width: 4rem;                          /* 64px */
  height: 4rem;                         /* 64px */
  opacity: 1;
  gap: 0.625rem;                        /* 10px */
  border-radius: 3.75rem;               /* 60px */
  padding: 1rem;                        /* 16px */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.0625rem solid var(--icons-card-border); /* 1px */
}

.icon-circle-container .icon {
  font-size: 1.875rem;                  /* 30px */
  line-height: 1;
  display: inline-block;
  color: currentColor;
}

.transparent-card {
  opacity: 1;
  gap: 0.75rem;                         /* 12px */
  padding: 2.5rem 2rem !important;      /* 40px 32px */
  border-radius: 2.5rem !important;     /* 40px */
  min-height: 17.6875rem;               /* 283px */
  position: relative;
  overflow: hidden;
  background: var(--bg-transparent);
  transition: all 0.3s ease-in-out;
  border: 0.0625rem solid transparent !important; /* 1px */
  border-image: linear-gradient(93.7deg,
      rgba(255, 255, 255, 0.1152) 2.31%,
      rgba(255, 255, 255, 0.0576) 103.93%) 1 !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  overflow: hidden;
    backdrop-filter: blur(6px) saturate(120%);
}


.transparent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: radial-gradient(110% 100% at 15% 10%,
            rgba(0, 0, 0, 0.22),
            transparent 55%),
        radial-gradient(130% 110% at 100% 100%,
            rgba(0, 0, 0, 0.3),
            transparent 55%),
        linear-gradient(108.22deg,
            rgba(0, 55, 255, 0) 0%,
            rgba(0, 55, 255, 0.4) 100%),
        linear-gradient(0deg, rgba(57, 255, 20, 0.4), rgba(57, 255, 20, 0.4));
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
}

@keyframes cardHoverIn {
    from {
        opacity: 0;
        transform: scale(1.02);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cardHoverOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.02);
    }
}

.transparent-card:hover::before {
    animation: cardHoverIn 350ms ease forwards;
}

.transparent-card:not(:hover)::before {
    animation: cardHoverOut 350ms ease forwards;
}

.transparent-card:hover .icon-circle-container {
    border-color: var(--main-text);
}

@keyframes flipLeft {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(-90deg);
  }
  100% {
    transform: rotateY(0);
  }
}


.transparent-card:hover .icon-circle-container .icon-trader::before,
.transparent-card:hover .icon-circle-container .icon-market-range::before,
.transparent-card:hover .icon-circle-container .icon-trading-green::before,
.transparent-card:hover .icon-circle-container .icon-direction::before {
    animation: flipLeft 0.6s ease-in-out;
    display: inline-block;   
    transform-origin: center;
    color: var(--main-text);
}


#section-account .card-account {
    min-height: 50rem;
    align-items: center;
}


:root{
  --card-ease: cubic-bezier(.18,.9,.22,1);
  --card-dur-in: 1500ms;
  --card-dur-out: 2500ms;
  --card-delay-in: 40ms;
  --card-scale: 1.035;
  --card-lift:  -1rem;
}

/* ====== Base Card ====== */
.colored-card{
  position: relative;
  padding: 2rem;
  border-radius: 2.5rem;
  overflow: hidden;

  background:
    radial-gradient(110% 100% at 15% 10%, rgba(0, 0, 0, .22), transparent 55%),
    radial-gradient(130% 110% at 100% 100%, rgba(0, 0, 0, .30), transparent 55%),
    linear-gradient(108.22deg, rgba(0,55,255,0) 0%, rgba(0,55,255,.40) 100%),
    linear-gradient(0deg, rgba(57,255,20,.40), rgba(57,255,20,.40)),
    #000;

  max-height: 38.5rem;
  height: 100%;
  opacity: .94;

  /* GPU */
  transform: translate3d(0,0,0) scale(1);
  backface-visibility: hidden;
  will-change: transform, opacity, box-shadow;

  /* Default (OUT) timing — used when leaving hover/focus */
  --card-dur-current: var(--card-dur-out);
  --card-delay-current: 0ms;

  transition:
    transform var(--card-dur-current) var(--card-ease) var(--card-delay-current),
    box-shadow var(--card-dur-current) var(--card-ease),
    opacity .4s ease-in-out;
}

/* Background accent image layer */
.colored-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.85;
  z-index:0;

  /* subtle motion */
  transform: translate3d(0,0,0) scale(1) rotate(0.001deg);
  transition:
    transform var(--card-dur-current) var(--card-ease) var(--card-delay-current),
    opacity .4s ease-in-out;
}

.colored-card.card1::before{ background-image:url("/svg/bg-img/card1-bg.svg"); }
.colored-card.card2::before{ background-image:url("/svg/bg-img/card2-bg.png"); }
.colored-card.card3::before{ background-image:url("/svg/bg-img/card3-bg.png"); }

/* Content layering above ::before */
.colored-card > *{ position:relative; z-index:1; }

/* ====== Hover / Focus IN (slower) ====== */
.colored-card:is(:hover, :focus-within, :focus-visible){
  /* Switch to IN timing when entering this state */
  --card-dur-current: var(--card-dur-in);
  --card-delay-current: var(--card-delay-in);

  transform: translateY(var(--card-lift)) scale(var(--card-scale));
  cursor: pointer;
  box-shadow:
    0 1.375rem 3.75rem rgba(0,0,0,.35),
    0 0.375rem 1.125rem rgba(0,0,0,.25);
}

/* Background layer moves a touch for depth */
.colored-card:is(:hover, :focus-within, :focus-visible)::before{
  transform: translate3d(0,-6px,0) scale(1.04);
}

/* Optional: padding morph during hover if you want that effect */
#section-account .colored-card:is(:hover, :focus-within, :focus-visible){
  padding-bottom: 8rem;
  padding-top: 4rem;
}

/* CTA reveal stays smooth both directions */
.card-cta{
  position: absolute;
  left: 2rem; right: 2rem; bottom: 1.5rem;
  display:flex; justify-content:center;
  overflow:hidden;
  opacity:0;
  transform: translateY(3.75rem);
  pointer-events:none;
  transition:
    opacity var(--card-dur-current) ease,
    transform var(--card-dur-current) var(--card-ease);
}

#section-account .colored-card:is(:hover, :focus-within, :focus-visible) .card-cta{
  max-height: 5rem;
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Keep your existing item-specific rules */
#section-account .colored-card:hover .py-88{
  padding-top:0 !important;
  padding-bottom:9.375rem !important;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .colored-card,
  .colored-card::before,
  .card-cta{
    transition: none !important;
    transform: none !important;
  }
}

.second-transparent-card {
  opacity: 1;
  gap: 1rem;                  /* 16px */
  padding: 1.5625rem !important; /* 25px */
  border-radius: 1.25rem !important; /* 20px */
  background: var(--card-transparent) !important;
      backdrop-filter: blur(6px) saturate(120%);
}

.flexibility-content .paid-img {
  padding-right: 0.75rem;     /* 12px */
}


/*Markets */
#markets .marquee-wrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* TRACKS */
#markets .marquee-content{
  --gap: 1rem;
  --speed: 70;          
  --loop-dist: 0px;       
  --dur: 35s;             
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;     
  will-change: transform;
  height: 60px;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


#markets .marquee-rtl{ animation-name: marquee-rtl; animation-duration: var(--dur); }
#markets .marquee-ltr{ animation-name: marquee-ltr; animation-duration: var(--dur); }


#markets .marquee-wrapper:hover .marquee-content{
  animation-play-state: paused !important;
}


@keyframes marquee-rtl{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--loop-dist))); }
}
@keyframes marquee-ltr{
  from{ transform: translateX(calc(-1 * var(--loop-dist))); }
  to  { transform: translateX(0); }
}


#markets .market-instrument{
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  pointer-events: auto;
  width: 240px;                
  height: 3.25rem;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 4.125rem;
  background-color: var(--bg-transparent);
  border: 1px solid transparent;
  border-image: linear-gradient(93.7deg,
    rgba(255,255,255,0.1152) 2.31%,
    rgba(255,255,255,0.0576) 103.93%) 1;
  white-space: nowrap;
  justify-content: start;
}

#markets .market-instrument:hover{
  border: 0.125rem solid var(--main-text);
  padding: 0 0.5rem !important;
}



.global-card{
  opacity: 1;
  gap: 1rem;                          /* 16px */
  padding: 1.5625rem;                 /* 25px */
  border-radius: 1.25rem;             /* 20px */
  border: 0.051875rem solid var(--border-card-global); /* 0.83px */
  backdrop-filter: blur(1.5rem);      /* 24px */
  margin-right: 1.625rem;             /* 26px */
}

/* tunables */
.layer-stack{
  --gap: 5.3125rem;                   /* 85px */
  --reveal: 3.75rem;                  /* 60px */
  --shrink: 0.08;
  width: 25rem;                       /* 400px */
  aspect-ratio: 1 / 1;
  position: relative;
  isolation: isolate;
}


.layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    transition: transform 1.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.5s ease, opacity 1.5s ease;
    pointer-events: none;
}

.layer-top {
    z-index: 5;
    transform: translate(-50%, -90%) translateY(0) scale(1);
}

.layer-mid {
    z-index: 3;
    transform: translate(-50%, -100%) translateY(var(--gap)) scale(calc(1 - var(--shrink)));
    opacity: 0.95;
}

.layer-bot {
    z-index: 2;
    transform: translate(-50%, -90%) translateY(calc(var(--gap) * 2)) scale(calc(1 - var(--shrink) * 2));
    opacity: 0.85;
}

.layer-copy {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) translateY(0.375rem); /* 6px */
  z-index: 4;
  width: 78%;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s ease,
              transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.hover-reveal:hover .layer-top,
.hover-reveal:focus-within .layer-top {
  transform: translate(-50%, -80%) translateY(calc(-1 * var(--reveal))) scale(1.02);
  filter: drop-shadow(0 1rem 2.25rem rgba(0, 0, 0, 0.35)); /* 0 16px 36px */
}


.hover-reveal:hover .layer-mid,
.hover-reveal:focus-within .layer-mid {
    transform: translate(-50%, -110%) translateY(calc(var(--gap) + var(--reveal))) scale(calc(1 - var(--shrink)));
}

.hover-reveal:hover .layer-bot,
.hover-reveal:focus-within .layer-bot {
    transform: translate(-50%, -110%) translateY(calc(var(--gap) * 2 + var(--reveal) * 2)) scale(calc(1 - var(--shrink) * 2));
}

.hover-reveal:hover .layer-copy,
.hover-reveal:focus-within .layer-copy {
    opacity: 1;
    transform: translate(-50%, 10%) translateY(0);
    z-index: 5;
}

.layer-copy::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: 1rem;
    background: radial-gradient(120% 120% at 50% 50%,
            rgba(0, 0, 0, 0.35),
            transparent 70%);
    filter: blur(0.5rem);
    z-index: -1;
    opacity: 0.6;
}


#hero-about {
  position: relative;
  overflow: hidden;
}

#hero-about::before{
  content:"";
  position:absolute;
  top:-0.25rem;
  left:65%;
  transform: translateX(-50%);
  width:200%;
  height:90%;
  background: radial-gradient(ellipse at top, #219e11 0%, rgba(33,158,17,0) 70%);
  z-index:-1;
}

#hero-about .parallax{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh; /* ensure there is content after this section so the page can scroll */
}

#hero-about .parallax #mountain{
  position:absolute;
  inset:0 auto auto 0; /* top:0; left:0 */
  width:100%;
  pointer-events:none;
  will-change: transform;
  transform: translate3d(0,0,0);
      height: 100vh;
}

#title-banner, #text-banner{
  will-change: transform;
  transform: translate3d(0,0,0);
  position: relative; /* keep stacking context tidy */
  z-index: 1;
}

#text-banner .type-mask {
  white-space: nowrap;
  overflow: hidden;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: center;
  align-items: center;
  display: flex;
}

/* add this class when you want the animation to start */
#text-banner .type-mask.typing {
  animation: typing 2s steps(24, end) forwards;
}



@keyframes typing {
  from {
    width: 0;
  }
  to{
    width: 100%;
  }
}

#contact-section-1 {
    padding-top: 8.125rem;
    position: relative;
    overflow: hidden;
}

#contact-section-1::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    transform: translateX(-50%);
    width: 200%;
    height: 33%;
    background: radial-gradient(ellipse at top,
            #219e11 0%,
            rgba(33, 158, 17, 0) 70%);
    z-index: -1;
    left: 65%;
}

/* #section-vision {
    background-image: url(/img/bg-img/bg-mission-vision.png);
  background-repeat: no-repeat;
  background-size: cover;
  transform: none !important;
  will-change: auto;
  background-position: center;
} */

/* #section-vision .bg-vision {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    z-index: 0;
} */

#section-vision .colored-card {
    position: relative;
    z-index: 1;
    will-change: transform, opacity;
}

/* optional gradient/decoration layer */
/* #section-vision::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 200%;
    height: 80%;
} */

#section-vision .colored-card::before{

    transition: transform .7s ease-in-out, opacity .7s ease-in-out!important;
}

.colored-card:hover::before {
  transform: scale(1.15); 
  opacity: 1; 
}

.values-content,
#join-altum {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.values-content .values-title,
.values-content .values-text,
.values-content .second-transparent-card {
    position: relative;
    z-index: 1;
    will-change: transform, opacity;
}

/* #join-altum .join-img,
#join-altum .join-title,
#join-altum .join-text,
#join-altum .join-primary,
#join-altum .join-secondary {
    will-change: transform;
} */

.parx-wrap {
    display: flex;
    /* be a proper flex item */
    flex: 1 1 auto;
    /* stretch inside .d-flex align-items-stretch */
    width: 100%;
    /* height: 100%; */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.parx-wrap>* {
    width: 100%;
    height: 100%;
}

#contact-section-1 {
    position: relative;
    overflow: hidden;
    /* clip while moving */
    isolation: isolate;
    /* own stacking context */
    z-index: 0;
}

#contact-section-1 .parallax-left,
#contact-section-1 .parallax-right {
    will-change: transform, opacity;
}

.contact-content {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.contact-content .parx-wrap {
    display: flex;
    /* stay a proper flex child */
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.contact-content .parx-wrap>* {
    width: 100%;
    height: 100%;
}

.contact-content a{
    width:100%;
}

.card-mission::before {
    background-image: url("/svg/bg-img/mission-bg.svg");
}

.values-content {
    background-image: url(/svg/bg-img/section3-about-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: none !important;
    will-change: auto;
    gap: 3rem;
    position: relative;
}

#join-altum {
    overflow: hidden;
    background: radial-gradient(110% 100% at 15% 10%,
            rgba(0, 0, 0, 0.22),
            transparent 55%),
        radial-gradient(130% 110% at 100% 100%,
            rgba(0, 0, 0, 0.3),
            transparent 55%),
        linear-gradient(108.22deg,
            rgba(0, 55, 255, 0) 0%,
            rgba(0, 55, 255, 0.4) 100%),
        linear-gradient(0deg, rgba(57, 255, 20, 0.4), rgba(57, 255, 20, 0.4)),
        #000;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    transform-origin: bottom center;
}

.last-section-about {
    position: relative;
    /* container must be relative */
    z-index: 1;
}

.last-section-about::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/svg/bg-img/TTG-desktop-homepage.svg");
    background-repeat: no-repeat;
    background-size: 38.125rem 48rem;
    background-position: left bottom;
    opacity: 0.25;
    z-index: 0;
}

.dark-input{
  background-color: transparent !important;
  border: 0.0625rem solid var(--border-color) !important; /* 1px */
  color: var(--main-text) !important;
  padding: 0.875rem 1rem !important;                      /* 14px 16px */
  border-radius: 0.5rem !important;                       /* 8px */
}

/* CONTACT STYLES */

#contact-section-3 .btn-dark-bg {
    width: 100%;
}

.contact-form {
    width: 100%;
    margin: 0 auto;
}

.dark-input {
    background-color: transparent !important;
    border: 0.0625rem solid var(--border-color) !important;
    color: var(--border-color) !important;
    padding: 0.875rem 1rem !important;                      /* 14px 16px */
  border-radius: 0.5rem !important; 
}

.dark-input:focus {
    box-shadow: 0px 0px 15px 0px rgb(120, 144, 168) !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 1.4) !important;
}

.dark-input option {
    background-color: #1a1a2f;
    color: #fff;
}

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

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-select option[value=""][disabled] {
    color: var(--border-color) !important;
}

#contact-form select.dark-input option:first-child {
    color: var(--border-color) !important;
}

select.dark-input.placeholder-shown {
    color: var(--border-color) !important;
}

.iti {
    width: 100%;
}

.iti__flag-container {
    z-index: 9999 !important;
    padding: 0;
}

.iti__selected-flag {
    background-color: transparent !important;
    border-radius: 0.5rem 0 0 0.5rem;
    padding: 0.875rem 1rem !important;
}

.iti__country-list {
    background-color: #1a1a2f !important;
    border: 0.0625rem  solid var(--border-color);
}

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

.iti__country:hover {
    background-color: #2a2a3f !important;
}

#phone {
    background-color: transparent !important;
    border: 0.0625rem solid var(--border-color) !important;
    padding-left: 2.8125rem !important;
}

#phone:focus {
    border: 0.0625rem solid rgba(255, 255, 255, 1.4) !important;
}

#phone::placeholder {
    color: var(--border-color) !important;
}

/* Not sure */

.iti__selected-dial-code,
.iti__arrow {
  display: none !important;
}

.form-check-input {
  width: 1.375rem !important;          /* 22px */
  height: 1.375rem !important;         /* 22px */
  opacity: 1 !important;
  border-radius: 0.3125rem !important;  /* 5px */
  border: 0.0625rem solid var(--main-text) !important; /* 1px */
  background-color: transparent !important;
  margin-right: 1rem;                   /* 16px */
}

.form-check-input:focus {
  outline: 0;
  box-shadow: none !important;
}

.bg-call {
  gap: 0.75rem;                         /* 12px */
  opacity: 1;
  padding: 2rem;                         /* 32px */
  background: var(--bg-transparent);
  border-radius: 2.5rem;                 /* 40px */
  border: 0.0625rem solid transparent;   /* 1px */
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-image: linear-gradient(93.7deg,
      rgba(255, 255, 255, 0.1152) 2.31%,
      rgba(255, 255, 255, 0.0576) 103.93%) 1;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
}

.contact-content {
  background-image: url(/svg/bg-img/section8.svg),
                    url(/svg/bg-img/TTG-desktop-homepage.svg);
  background-repeat: no-repeat;
  background-size: cover, 36.25rem 41.25rem; /* 580px 660px */
  transform: none !important;
  will-change: auto;
  background-position: center, left bottom;
}



@media (min-width: 1400px) {
  .section-bg-image {
    padding-top: 3rem !important;
  }
}

@media (min-width: 992px) {
  .nav-wrapper:has(.mega-menu-container.active) #topbar {
    background-color: var(--dark-main-bg);
  }

  #holding-phone-img {
    margin-bottom: -5.625rem;             /* -90px */
    will-change: transform;
  }

  .first-red-section {
    height: 24.4375rem;                   /* 391px */
    max-height: 24.4375rem;               /* 391px */
  }

  .legal-download {
    max-height: 6.875rem;                 /* 110px */
  }

  h2.mb-lg-5 {
    margin-bottom: 2.5rem !important;     /* 40px */
  }

  .mb-lg-40 {
    margin-bottom: 2.5rem !important;     /* 40px */
  }
}

/* CUSTOM AOS DISTANCE*/
[data-aos="fade-up"] {
  -webkit-transform: translate3d(0, 1.25rem, 0) !important;   /* 20px */
  transform: translate3d(0, 1.25rem, 0) !important;
}
[data-aos="fade-up"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-down"] {
  -webkit-transform: translate3d(0, -1.25rem, 0) !important;  /* -20px */
  transform: translate3d(0, -1.25rem, 0) !important;
}
[data-aos="fade-down"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-left"] {
  -webkit-transform: translate3d(1.25rem, 0, 0) !important;   /* 20px */
  transform: translate3d(1.25rem, 0, 0) !important;
}
[data-aos="fade-left"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-right"] {
  -webkit-transform: translate3d(-1.25rem, 0, 0) !important;  /* -20px */
  transform: translate3d(-1.25rem, 0, 0) !important;
}
[data-aos="fade-right"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-up-right"] {
  -webkit-transform: translate3d(-1.25rem, 1.25rem, 0) !important; /* -20px, 20px */
  transform: translate3d(-1.25rem, 1.25rem, 0) !important;
}
[data-aos="fade-up-right"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-up-left"] {
  -webkit-transform: translate3d(1.25rem, 1.25rem, 0) !important;  /* 20px, 20px */
  transform: translate3d(1.25rem, 1.25rem, 0) !important;
}
[data-aos="fade-up-left"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-down-right"] {
  -webkit-transform: translate3d(-1.25rem, -1.25rem, 0) !important; /* -20px, -20px */
  transform: translate3d(-1.25rem, -1.25rem, 0) !important;
}
[data-aos="fade-down-right"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-down-left"] {
  -webkit-transform: translate3d(1.25rem, -1.25rem, 0) !important;  /* 20px, -20px */
  transform: translate3d(1.25rem, -1.25rem, 0) !important;
}
[data-aos="fade-down-left"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}


/* END CUSTOM AOS DISTANCE*/

/*ABOUT STYLES*/

.left-red-border {
    border-left: 0.25rem solid var(--darker-accent-color);
}

.left-white-border {
    border-left: 0.25rem solid var(--main-text);
}

.left-red-border-container:last-of-type .left-red-border-p {
    margin-bottom: 0 !important;
}

.left-border-in p {
    border-left: 0.25rem solid var(--darker-accent-color);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}



.cards-container>* {
    transition: filter 0.4s ease-out;
}

@media (max-width: 991.98px) {
    .section-full {
        padding-top: 2.8125rem;
        padding-bottom: 2.8125rem;
    }

    #navbarCollapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--dark-main-bg);
        transition: left 0.3s;
        z-index: 1050;
        overflow-y: auto;
        pointer-events: auto;
    }

    #navbarCollapse.show {
        left: 0;
    }

    .mega-menu-container {
        display: none !important;
    }

    #mobile-menu .accordion-button,
    #mobile-menu .accordion-item {
        border: none;
        background-color: transparent;
        box-shadow: none;
        color: var(--main-text);
    }

    #mobile-menu #mobile-login-btn,
    #mobile-menu #mobile-login-btn:active {
        flex: 0 0 75%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 2.5rem !important;
        border: 0.0625rem  solid white !important;
        background: var(--main-text);
        color: black;
    }

    #mobile-menu .language-selector-container {
        flex: 0 0 25%;
    }

    #mobile-menu .language-selector {
        font-size: 0.8125rem;
        color: var(--main-text);
        height: 2.5rem;
        width: 100%;
        border: 0.125rem solid white !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    /* #mobile-menu img {
        width: 100%;
    } */
    #holding-phone-img {
        position: relative;
    }

    #about-sub-section-1 {
        background-size: cover !important;
        width: 100%;
    }

    .big-card-left {
    border-radius: 2.1875rem 2.1875rem 0 0;   /* 35px 35px 0 0 */
    }

    .big-card-right {
    border-radius: 0 0 2.1875rem 2.1875rem;   /* 0 0 35px 35px */
    }

    .mb-lg-40 {
    margin-bottom: 1.5rem !important;         /* 24px */
    }
}
@media (max-width: 767.98px) {
  .section-full {
    padding-top: 1.875rem;                  /* 30px */
    padding-bottom: 1.875rem;               /* 30px */
    padding-left: 13.944vw;
    padding-right: 13.944vw;
  }

  .video-mobile {
    display: none !important;
  }

  .rounded-profile-bg {
    width: 3rem;                            /* 48px */
    min-width: 3rem;                        /* 48px */
    height: 3rem;                           /* 48px */
  }

  .collapse-img {
    max-height: 1.5rem;                     /* 24px */
    max-width: 1.5rem;                      /* 24px */
  }

    #legal-subsection-2::before {
        width: 60%;
    }

    .big-divided-card .btn.btn-light-bg {
        width: auto;
    }

    .big-divided-card .btn.btn-main-outline {
        width: auto;
    }

    .big-card-left,
    .big-card-right{
    padding: 2rem 1.5rem 2rem 1.5rem !important; /* 32px 24px 32px 24px */
    }

    #deposit-withdrawals-section-3 .p-32{
    padding: 1.25rem !important; /* 20px */
    }
    #deposit-withdrawals-section-3 .px-32{
    padding-left: 1.25rem !important;  /* 20px */
    padding-right: 1.25rem !important; /* 20px */
    }
    #deposit-withdrawals-section-3 .py-32{
    padding-top: 1.25rem !important;    /* 20px */
    padding-bottom: 1.25rem !important; /* 20px */
    }

    #affiliates-ibs-section-2 .p-32{
    padding: 1.5rem !important; /* 24px */
    }
    #affiliates-ibs-section-2 .px-32{
    padding-left: 1.5rem !important;  /* 24px */
    padding-right: 1.5rem !important; /* 24px */
    }
    #affiliates-ibs-section-2 .red-borderless-btn-container .borderless-btn span{
    margin-left: 0.75rem !important; /* 12px */
    }

}

@media (max-width: 575.98px) {
        #ready-trade .title-ready-trade{
            padding-right: 1rem;
            padding-left: 1rem;
        }

        .max-p-w-big       { max-width: 25rem !important; }

        .main-section,
        #topbar,
        .section-spacing-x {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }

        .trade-sec {
            padding-right: 4rem !important;
            padding-left: 4rem !important;
        }

        .section-full{
            padding-left: 2.5rem !important;
            padding-right: 2.5rem !important;
        }

        #landing-section-3 .btn-link.card h6 {
            font-size: 1.25rem !important;
        }

        #landing-section-3 .btn-link.card p {
            font-size: 1.125rem !important;
        }

        #landing-section-3 .btn-link-collapse {
    padding-left: 4.5rem;                   /* 72px */
    }

    .toggle-arrow {
    min-width: 2.3125rem;                   /* 37px */
    min-height: 2.25rem;                    /* 36px */
    }

    .number-circle {
    min-width: 2.375rem;                    /* 38px */
    height: 2.375rem;                       /* 38px */
    font-size: 0.875rem !important;         /* 14px */
    }

    .font-size-48 { font-size: 2.5rem !important; }   /* 40px */
    .font-size-42 { font-size: 2.1875rem !important; }/* 35px */
    .font-size-36 { font-size: 1.875rem !important; } /* 30px */
    .font-size-28 { font-size: 1.5rem !important; }   /* 24px */
    .font-size-24 { font-size: 1.25rem !important; }  /* 20px */

    .floating-card h6 { font-size: 0.875rem !important; } /* 14px */
    .floating-card p  { font-size: 0.75rem !important; }  /* 12px */

    .floating-cards-container {
    margin-top: -4.375rem !important;       /* -70px */
    }

}


@media (min-width: 1440px){
  .section-full {  /* 60px */
    padding-left: 8.944vw;
    padding-right: 8.944vw;
    }
}

@media (min-width: 1920px) {
    .section-full {
        padding-left: 11.944vw;
        padding-right: 11.944vw;
    }
}



/* @media (min-width: 1600px){
  body{ font-size: 1.1em; }   
  
}
@media (min-width: 1920px){
  body{ font-size: 1.2em; }  
  
} */

@media (max-width: 1270px){
  #topbar #topbar-content {
    padding: .51rem 0;
}
}

/* small screens: make the row horizontally scrollable */
@media (max-width: 991.98px){
  .tabs-viewport{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  /* hide scrollbars while keeping scrollability */
  .tabs-viewport::-webkit-scrollbar{ height: 0; }
  .tabs-viewport{ scrollbar-width: none; padding-bottom: .5rem !important; }


  #marketNav .nav-item{ flex: 0 0 auto; }
  #marketNav .tab-btn{ white-space: nowrap; }

  .section-full {
    padding-left: 12.944vw;
    padding-right: 12.944vw;
}
}


@media (max-width:899.6px){
    .global-card:last-child{
        margin-top: 20px !important;
    }
}

@media(min-width:1850px){
  #markets .market-instrument{
    width: 270px;
  }
}

.slider-wrapper {
  position: relative;
  width: var(--wrapper-width);
  margin: 0 auto;
  overflow: hidden;
  background: transparent;

  -webkit-mask-image: linear-gradient(to right, transparent, #0e1d02 6rem, #0e1d02 calc(100% - 6rem), transparent);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(to right, transparent, #0e1d02 6rem, #0e1d02 calc(100% - 6rem), transparent);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.slider {
  display: flex;
  align-items: center;
  background: transparent;
}

.slide-track {
  display: flex;
  align-items: center;
  will-change: transform;
  transform: translateZ(0);
  background: transparent;
}

.slide-track.is-ready {
  animation: scroll var(--scroll-duration) linear infinite;
}

.slide-set {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
}

.paid-img {
  height: 51px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  background: none;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--scroll-width)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-track.is-ready {
    animation: none !important;
  }
}