/* general use */

/* section 1 */
#sec-1-the-wallet img {
    width: 100%;
    max-width: 500px;
}


/* section 2 */
.desktop-view {
    display: flex !important;
}

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


/*
#sec-2-the-wallet .container-1 p, #sec-2-the-wallet .container-2 p{font-size: var(--font-size-20); line-height: 30px;}
#sec-2-the-wallet .container-1 p, .container-1 h2{margin: 0;}

#sec-2-the-wallet .container-1{display: flex; margin-bottom: var(--spacing-160) !important;}
#sec-2-the-wallet .container-1 .left-col,#sec-2-the-wallet .container-1 .right-col{width: 50%; display: flex; align-items: center;}
#sec-2-the-wallet .container-1 .left-col{padding-right: 128px;}

#sec-2-the-wallet .container-2{display: flex; flex-direction: column;}
#sec-2-the-wallet .container-2 .col-12{display: flex;}
#sec-2-the-wallet .container-2 .row-1{align-items: center;}
#sec-2-the-wallet .container-2 .row-1 .right-col{display: flex;}
#sec-2-the-wallet .container-2 .row-2 .left-col{display: flex; flex-direction: column;}
#sec-2-the-wallet .container-2 .row-2 .left-col > a{margin-top: auto;}
#sec-2-the-wallet .container-2 .row-2 p{margin: 0;}

#sec-2-the-wallet .container-2 .row-2 a{width: fit-content;}
#sec-2-the-wallet .container-2 .left-col{width: 50%; padding-right: 128px;}
#sec-2-the-wallet .container-2 .left-col h3{margin: auto;}
#sec-2-the-wallet .container-2 .right-col{width: 50%;}
#sec-2-the-wallet .container-2 .right-col img{max-width: 400px; width: 100%; margin: auto;}
#sec-2-the-wallet .container-2 .right-col.desktop-view{display: flex; flex-direction: column; gap: var(--spacing-40);}
*/



/* section 3 */
.desktop-tabs {
    display: block;
    position: relative;
}

.mobile-tabs {
    display: none;
}

.skip-tabs {
    display: flex;
    opacity: 0;
    height: 0;
    position: absolute;
    top: -65px;
}

.back-to-tabs {
    display: flex;
    opacity: 0;
    height: 0;
}

.back-to-tabs:focus-visible {
    margin-top: var(--spacing-16);
    width: fit-content;
    opacity: 1;
    height: auto;
    padding: var(--spacing-16);
    border-radius: var(--spacing-8);
    border: 1px solid var(--color-primary);
}

.skip-tabs:focus-visible {
    width: fit-content;
    opacity: 1;
    height: auto;
    padding: var(--spacing-16);
    border-radius: var(--spacing-8);
    border: 1px solid var(--color-primary);
}

#sec-3-the-wallet .title {
    text-align: center;
    margin: auto;
    margin-bottom: var(--spacing-40);
}

#sec-3-the-wallet .desktop-tabs .inter {
    display: flex !important;
    flex-direction: column;
    gap: var(--spacing-40);
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select {
    position: relative;
    list-style: none;
    padding: 0;
    display: grid;
    margin: auto;
    grid-template-columns: 1fr 1.3fr 1.5fr 1.3fr;
    width: 100%;
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item:first-child{
    position: absolute;
    width: 100%;
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab {
    background-color: transparent;
    border: none;
    outline: none;
    font-size: var(--font-size-20);
    text-align: center;
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: var(--spacing-8) 0;
    width: 100%;
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab>span {
    width: 0;
    height: 0;
    opacity: 0;
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab:focus-visible {
    outline: 2px dashed var(--color-primary);
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab:hover:not(.active-tab) {
    background-color: var(--color-surface-soft-blue-light);
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-surface-soft-blue-light);
    content: '';
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab.active-tab {
    font-family: var(--font-family-b);
}

#sec-3-the-wallet .desktop-tabs .inter .tabs-select>.tablist-item>.tab.active-tab::after {
    background-color: #7A79E4;
    content: '';
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont {
    display: none;
    min-height: 700px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont.active-tab-container {
    display: flex;
}

/* tab-cont general */
#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item {
    min-width: 160px;
    max-width: 310px;
    min-height: 170px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-16);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item>img {
    width: 120px;
    height: 120px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom {
    display: flex;
    gap: var(--spacing-16);
    align-items: center;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom.text-before>button {
    order: 2;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button {
    display: flex;
    position: relative;
    cursor: pointer;
    outline: none;
    border: none;
    color: white;
    background-color: #0E47CB;
    padding: var(--spacing-8);
    border-radius: var(--spacing-8);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>svg {
    pointer-events: none;
    transition: 0.5s ease;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>svg>path {
    transition: 0.3s ease;
    transform-origin: center;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button:hover {
    background-color: #082B7A
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button:hover>svg {
    animation: scale-plus 1s linear;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button.popup-open {
    background-color: #9FB5EA;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button.popup-open>svg>path {
    fill: #0E47CB;
    transform: rotate(45deg);
    transform-origin: center;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>p {
    margin: 0;
    color: #0E47CB;
    letter-spacing: 2.88px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>p>span {
    font-size: var(--font-size-14);
    line-height: 20px;
    margin-top: var(--spacing-4);
    display: block;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .tab-item-button:focus-visible {
    outline: 2px dashed var(--color-primary) !important;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item.item-no-button>.item-bottom>button {
    display: none;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item.item-no-img>img {
    display: none;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>.popup {
    display: none;
    min-width: 400px;
    position: absolute;
    background: white;
    padding: var(--spacing-24) var(--spacing-16);
    border-radius: 16px;
    z-index: 30;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>.popup>h4 {
    margin-bottom: var(--spacing-8);
    text-align: left;
    font-size: var(--font-size-20);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>.popup>h4>span {
    display: block;
    font-size: var(--font-size-14);
    font-family: var(--font-family-b);
    margin-top: var(--spacing-4);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>.popup>p {
    margin: 0;
    text-align: left;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item .item-bottom>button>.popup-active {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item-placeholder {
    min-width: 220px;
    max-width: 265px;
    min-height: 170px;
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .lines {
    min-width: 250px;
    justify-content: center;
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-cont .item button {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter button.popup-open::after {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    rotate: 45deg;
    background-color: white;
}

#sec-3-the-wallet .desktop-tabs .inter .btn-arch-top.popup-open::after {
    top: -17px;
    left: 50%;
    translate: -50%;
}

#sec-3-the-wallet .desktop-tabs .inter .btn-arch-bottom.popup-open::after {
    bottom: -17px;
    left: 50%;
    translate: -50%;
}

#sec-3-the-wallet .desktop-tabs .inter .btn-arch-right.popup-open::after {
    right: -17px;
    top: 50%;
    translate: 0 -50%;
}

#sec-3-the-wallet .desktop-tabs .inter .btn-arch-left.popup-open::after {
    left: -17px;
    top: 50%;
    translate: 0 -50%;
}

@keyframes scale-plus {
    0% {
        scale: 1;
    }

    50% {
        scale: 1.2;
    }

    100% {
        scale: 1;
    }
}


/* tab 1 */
#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont {
    border-radius: var(--spacing-16);
    overflow: hidden;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .left-col {
    justify-content: space-between;
    width: 65%;
    background-color: var(--color-surface-soft-blue-light);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-40);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .right-col {
    padding: var(--spacing-40);
    flex: 1;
    background-color: #D6D9F9;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-40);
    align-items: center;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .row-1 {
    display: flex;
    justify-content: space-between;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .row-2 {
    display: flex;
    justify-content: center;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .row-3 {
    display: flex;
    justify-content: space-between;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-1 .item-bottom>button>.popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-2 .item-bottom>button>.popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-3 .item-bottom>button>.popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-4 .item-bottom>button>.popup {
    bottom: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-5 .item-bottom>button>.popup {
    bottom: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-6 .item-bottom>button>.popup {
    right: 122%;
    bottom: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-7 .item-bottom>button>.popup {
    right: 122%;
    bottom: -145px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-7 .item-bottom>button>.popup>p {
    font-size: 16px !important;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .right-col>p {
    max-width: 235px;
    font-size: var(--font-size-14);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 2.24px;
    text-transform: uppercase;
}

/* buttons little arch for popup */
/* #sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-1 button.popup-open::after,
    #sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-2 button.popup-open::after,
        #sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-3 button.popup-open::after{bottom: -17px; left: 50%; translate: -50%;}
#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-4 button.popup-open::after,
    #sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-5 button.popup-open::after{top: -17px; left: 50%; translate: -50%;}
#sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-6 button.popup-open::after,
    #sec-3-the-wallet .desktop-tabs .inter .tab-1-cont .item-7 button.popup-open::after{left: -17px; top: 50%; translate: 0 -50%;} */


/* tab 2 */
#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .one-col {
    gap: var(--spacing-24);
    padding: clamp(16px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-soft-blue-light);
    border-radius: var(--spacing-16);
    overflow: hidden;
    width: 100%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .one-col .row-1 {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    gap: var(--spacing-24);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .one-col .row-1 .lines-1 {
    display: flex;
    align-items: center;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .one-col .row-2 {
    display: flex;
    gap: var(--spacing-24);
    margin: 0 auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .one-col .row-2 .lines {
    justify-content: unset;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .one-col .row-2 .lines>img {
    height: 80%;
    padding-left: 15%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .item-1 .item-bottom>button>.popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .item-2 .item-bottom>button>.popup {
    top: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .item-3 .item-bottom>button>.popup {
    top: 122%;
    left: -50px;
}

/* buttons little arch for popup */
/* #sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .item-1 button.popup-open,
    #sec-3-the-wallet .desktop-tabs .inter .tab-2-cont .item-2 button.popup-open{bottom: -17px; left: 50%; translate: -50%;} */

/* tab 3 */
#sec-3-the-wallet .desktop-tabs .item-no-image>.item-bottom>button {
    background-color: #4E5169 !important;
}

#sec-3-the-wallet .desktop-tabs .item-no-image>.item-bottom>button:hover {
    background-color: #2f313f !important;
}

#sec-3-the-wallet .desktop-tabs .item-no-image>.item-bottom>button.popup-open {
    background-color: #abaec0 !important;
}

#sec-3-the-wallet .desktop-tabs .item-no-image>.item-bottom>button.popup-open>svg>path {
    fill: white !important;
}

#sec-3-the-wallet .desktop-tabs .item-no-image>.item-bottom>p {
    color: #4E5169 !important;
    letter-spacing: 2.88px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col {
    gap: var(--spacing-24);
    padding: clamp(16px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-soft-blue-light);
    border-radius: var(--spacing-16);
    overflow: hidden;
    width: 100%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .row-1 {
    display: flex;
    gap: var(--spacing-24);
    margin: 0 auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-1>img {
    margin: 15% 0 0 35%;
    height: 70%;
    width: 50%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-1>.item-no-image {
    position: absolute;
    top: 15%;
    left: -30%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-1>.item-no-image .popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .row-2 {
    display: flex;
    gap: var(--spacing-24);
    margin: 0 auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .row-2 .item-2 {
    translate: -20%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .row-2>.item-4 {
    padding-top: 2%;
    translate: -22%;
    z-index: 20;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .row-2>.item-4 .popup {
    top: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-2>img {
    width: 50%;
    height: 70%;
    margin-top: auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-2>.item-no-image {
    position: absolute;
    top: 15%;
    left: -30%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-2>.item-no-image .popup {
    top: -10px;
    left: 122%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .row-3 {
    display: flex;
    gap: var(--spacing-24);
    margin: 0 auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-3>img {
    margin-right: 45%;
    height: 70%;
    width: 50%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-3>.pid-image {
    position: absolute;
    left: 1%;
    top: 10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-3>.item-no-image {
    position: absolute;
    top: 50%;
    right: -50%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .one-col .lines-3>.item-no-image .popup {
    bottom: 122%;
    right: -10px;
}

/* buttons little arch for popup */
/* #sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .lines-1 .item button.popup-open{bottom: -17px;} */

/* tab 4 */
#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont {
    flex-direction: column;
    gap: var(--spacing-40);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 {
    padding: var(--spacing-60);
    background-color: var(--color-surface-soft-blue-light);
    display: flex;
    border-radius: var(--spacing-16);
    overflow: hidden;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-2 {
    padding: var(--spacing-60);
    background-color: var(--color-surface-soft-blue-light);
    display: flex;
    border-radius: var(--spacing-16);
    overflow: hidden;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-3 {
    padding: var(--spacing-60);
    background-color: var(--color-surface-soft-blue-light);
    display: flex;
    border-radius: var(--spacing-16);
    overflow: hidden;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .txt-col {
    width: 33%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .txt-col>h4 {
    margin-bottom: var(--spacing-24);
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .graph-col {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: var(--spacing-40);
}

/* tab 4 1 */
#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 {
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .item-1 {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .item-2 {
    position: absolute;
    top: -13%;
    left: -75%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .item-2 .popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .item-3 {
    position: absolute;
    top: 4%;
    left: 69%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .item-3 .item-bottom>p {
    white-space: nowrap;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .item-3 .popup {
    top: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .lines-1 {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .lines-1>.line-image {
    height: 75%;
    margin-top: auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-1 .lines-1>.pid-image {
    position: absolute;
    top: 43%;
    left: 25%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-2 {
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-2 .lines-2 {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-2 .lines-2>.line-image {
    height: 70%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-2 .lines-2>.item-4 {
    position: absolute;
    left: -40%;
    top: 45%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-cont .tab-4-1 .graph-col .row-2 .item-4 .popup {
    bottom: 122%;
    left: -10px;
}

/* tab 4 2 */
#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .lines {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .row-1 {
    padding-top: var(--spacing-40);
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .lines-1 .line-image {
    height: 70%;
    margin-top: auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-1 {
    position: absolute;
    left: -27%;
    top: 11%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-1 .popup {
    position: absolute;
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .lines-2 .line-image {
    height: 70%;
    margin-top: auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .lines-2 .abs-image-inside-line {
    position: absolute;
    left: 18%;
    top: 47%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-3 {
    position: absolute;
    left: 35%;
    top: -33%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-3 .popup {
    position: absolute;
    top: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-4 {
    position: absolute;
    left: 35%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-4 .popup {
    position: absolute;
    top: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .lines-3 .line-image {
    height: 70%;
    margin-right: 56%;
    max-width: 150px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .lines-3 .abs-image-inside-line {
    position: absolute;
    top: 15%;
    left: -4%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-5 .item-bottom p {
    max-width: 185px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-6 {
    position: absolute;
    top: 56%;
    right: -5%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-6 .popup {
    position: absolute;
    bottom: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .row-2 {
    display: flex;
    justify-content: space-between;
}

/* tab 4 3 */
#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .row-1 {
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .row-2 {
    display: flex;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-1 {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-2 .item-bottom>p {
    width: 50%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-2 {
    position: absolute;
    top: -7%;
    left: -75%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-2 .popup {
    top: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .lines {
    position: relative;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .lines-1 .line-image {
    height: 70%;
    margin-top: auto;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .lines-1 .abs-image-inside-line {
    position: absolute;
    top: 45%;
    left: 30%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-3 {
    position: absolute;
    top: 20%;
    right: -58%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-3 .popup {
    top: 122%;
    right: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-4 {
    position: absolute;
    top: 50%;
    left: -45%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-4 .popup {
    bottom: 122%;
    left: -10px;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-4 .item-bottom>p {
    width: 50%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .lines-2 .line-image {
    height: 70%;
}

#sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .lines-2 .abs-image-inside-line {
    position: absolute;
    right: 30%;
    top: 5%;
}

/* section 4 */
.sec-4-mobile {
    display: none !important;
}

#sec-4-the-wallet .part-1 .left-col {
    display: flex;
    align-items: center;
    padding-right: var(--spacing-40);
}

#sec-4-the-wallet .part-1 .left-col>img {
    width: 100%;
    max-width: 400px;
    margin: auto;
    display: flex;
    align-items: center;
}

#sec-4-the-wallet .part-1 .right-col>p,
#sec-4-the-wallet .right-col>h2 {
    margin-bottom: var(--spacing-24);
}

#sec-4-the-wallet .part-1 .right-col>a {
    margin-top: var(--spacing-16);
}

#sec-4-the-wallet .part-2 .pink-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    position: relative;
    background-color: #FDEEEF;
    padding: var(--spacing-80);
    border-radius: var(--spacing-16);
    margin-top: var(--spacing-160);
}

#sec-4-the-wallet .part-2 .pink-container .header-cont {
    width: 100%;
    max-width: 600px;
}

#sec-4-the-wallet .part-2 .pink-container .header-cont .page-reference {
    margin-bottom: var(--spacing-8);
    color: #D9747E !important;
}

#sec-4-the-wallet .part-2 .pink-container .header-cont>h2 {
    margin-bottom: var(--spacing-40);
}

#sec-4-the-wallet .part-2 .pink-container .header-cont>.p-1 {
    margin-bottom: var(--spacing-40);
}

#sec-4-the-wallet .part-2 .pink-container>img {
    position: absolute;
    right: 7%;
    top: -10%;
    width: clamp(150px, 30vw, 450px);
}

#sec-4-the-wallet .part-2 .bottom-row {
    display: flex;
    gap: var(--spacing-24);
}

#sec-4-the-wallet .part-2 .bottom-row .left-col {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

#sec-4-the-wallet .part-2 .bottom-row .left-col>p {
    margin: 0;
    background-color: #F7DDDF;
    padding: var(--spacing-40);
    border-radius: var(--spacing-16);
}

#sec-4-the-wallet .part-2 .bottom-row .divider {
    width: 2px;
    height: 100%;
    background-color: #F7DDDF;
}

#sec-4-the-wallet .part-2 .bottom-row .right-col {
    flex: 1;
}

#sec-4-the-wallet .part-2 .bottom-row .right-col>p:first-child {
    margin-bottom: var(--spacing-24);
}

#sec-4-the-wallet .part-2 .bottom-row .right-col>p:last-child {
    margin-top: var(--spacing-40);
}




/* section 5 */
#sec-5-the-wallet .cols>div:first-child {
    display: flex;
}

/* #sec-5-the-wallet .cols > div:last-child{} */
#sec-5-the-wallet .desktop-view {
    width: 100%;
}

#sec-5-the-wallet img {
    width: 100%;
    max-width: 400px;
    margin: auto;
}

#sec-5-the-wallet h2 {
    margin-bottom: var(--spacing-40);
}

#sec-5-the-wallet p {
    margin-bottom: var(--spacing-40);
}


/* section 6 */
#sec-6-the-wallet .desktop-view .h2{
    margin-bottom: var(--spacing-8);
}

#sec-6-the-wallet .cols .h3{
    margin-bottom: var(--spacing-40);
}

#sec-6-the-wallet .pause-btn,
#sec-7-the-wallet .pause-btn {
    position: relative;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
    width: 36px;
    height: 36px;
    padding: var(--spacing-8);
    gap: var(--spacing-16);
    border-radius: 8px;
    min-width: 36px;
}

#sec-6-the-wallet .pause-btn:hover,
#sec-7-the-wallet .pause-btn:hover {
    background: var(--color-primary-2);
    border-color: var(--color-primary);
}

#sec-6-the-wallet .pause-btn.pause::after,
#sec-7-the-wallet .pause-btn.pause::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('/digital-building-blocks/sites/download/attachments/791609471/icon-pause.svg');
    background-size: contain;
    background-repeat: no-repeat;
    top: 7px;
    left: 7px;
}

#sec-6-the-wallet .pause-btn.play::after,
#sec-7-the-wallet .pause-btn.play::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('/digital-building-blocks/sites/download/attachments/791609471/icon-play.svg');
    background-size: contain;
    background-repeat: no-repeat;
    top: 5px;
    left: 5px;
}

/* section 7 */

#sec-7-the-wallet p {
    font-size: var(--font-size-20);
    font-weight: 400;
    line-height: 30px;
}

#sec-7-the-wallet .control-row .left-col p {
    margin: 0;
}

#sec-7-the-wallet .control-row .right-col {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#sec-7-the-wallet .marq-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#sec-7-the-wallet .marq-wrapper::before {
    content: '';
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 5%;
    background: linear-gradient(to left, transparent, #FFFFFF);
}

#sec-7-the-wallet .marq-wrapper::after {
    content: '';
    z-index: 5;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 5%;
    background: linear-gradient(to right, transparent, #FFFFFF);
}

#sec-7-the-wallet .marq-container {
    display: flex;
    flex-direction: row;
}

#sec-7-the-wallet .marq-container .marq-item {
    min-width: 342px;
    width: 342px;
    height: 142px;
    background-color: var(--color-surface-soft-blue);
    border-radius: var(--spacing-8);
    padding: var(--spacing-16) var(--spacing-24);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: var(--spacing-24);
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top {
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top img {
    margin-right: var(--spacing-16);
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top .marq-item-inner-top-right {
    display: flex;
    flex-direction: column;
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top .marq-item-inner-top-right .title {
    margin: 0;
    color: var(--color-primary-4);
    font-weight: 700;
    line-height: 28px;
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top .marq-item-inner-top-right .description {
    margin: 0;
    font-size: var(--font-size-14);
    line-height: 20px;
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-bottom .active-indicator {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-4);
    border-radius: var(--spacing-24);
    background-color: var(--color-surface-green-light);
    padding: var(--spacing-2) var(--spacing-8);
    width: fit-content;
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-bottom .active-indicator p {
    margin: 0;
    font-size: var(--font-size-12);
    line-height: 18px;
}

#sec-7-the-wallet .marq-container .marq-item .marq-item-inner-bottom .active-indicator .dot {
    color: #33722A;
}

#sec-7-the-wallet .marq-container {
    animation: marquee-p 20s linear infinite;
}

#sec-7-the-wallet .marq-container.paused-animation {
    animation-play-state: paused !important;
}

#sec-7-the-wallet .disclaimer {
    background-color: var(--color-surface-soft-blue-light);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-16);
    border-radius: var(--spacing-8);
    max-width: min(496px, 100%);
    align-self: end;
}

#sec-7-the-wallet .disclaimer>p {
    margin: 0 0 0 var(--spacing-8);
    padding: 0;
    font-size: var(--font-size-12);
    font-weight: 600;
    line-height: 14px;
}

@keyframes marquee-p {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media(max-width: 1230px) {

    #sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .lines-2>.item {
        left: -17% !important;
        top: 8% !important;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .lines-3 .pid-image {
        left: 10% !important;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-3-cont .lines-3>img {
        margin-right: 25% !important;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-4-1,
    .inter .tab-4-2,
    .inter .tab-4-3 {
        flex-direction: column;
        gap: var(--spacing-40);
        padding: var(--spacing-16) !important;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-4-1 .txt-col,
    .inter .tab-4-2 .txt-col,
    .inter .tab-4-3 .txt-col {
        width: 100%;
        order: 1;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-4-1 .graph-col,
    .inter .tab-4-2 .graph-col,
    .inter .tab-4-3 .graph-col {
        order: 2;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-4-2 .graph-col .item-1 {
        left: -1%;
        top: 4%;
    }

    #sec-3-the-wallet .desktop-tabs .inter .tab-4-3 .graph-col .item-3 {
        right: -48%;
        top: 10%;
    }

    .sec-4-desktop .left-col img {
        width: unset !important;
        max-width: unset !important;
        translate: -45%;
    }

}

@media (max-width: 768px) {

    /* section 2 */
    .desktop-view {
        display: none !important;
    }

    .mobile-view {
        display: flex !important;
    }

    /* section 3 */
    .desktop-tabs {
        display: none;
    }

    .mobile-tabs {
        display: block;
    }

    #sec-3-the-wallet .title {
        font-size: var(--font-size-44);
        line-height: 48px;
    }

    /* section 4 */
    .sec-4-desktop {
        display: none !important;
    }

    .sec-4-mobile {
        display: block !important;
    }

    #sec-4-the-wallet h2,
    #sec-4-the-wallet .d-block {
        font-size: var(--font-size-44);
        line-height: 48px;
    }

    #sec-4-the-wallet .part-1 .left-col {
        padding-right: 1rem !important;
    }

    #sec-4-the-wallet .part-2 .pink-container>img {
        display: none;
    }

    #sec-4-the-wallet .part-2 .pink-container {
        padding: var(--spacing-60) 1.5rem;
        margin-top: var(--spacing-60);
        margin-left: -1rem;
        margin-right: -1rem;
    }

    #sec-4-the-wallet .part-2 .bottom-row {
        flex-direction: column;
        gap: var(--spacing-60);
    }

    #sec-4-the-wallet .part-2 .bottom-row .left-col,
    .bottom-row .right-col {
        width: 100%;
    }

    #sec-4-the-wallet .part-2 .bottom-row .left-col>p {
        padding: var(--spacing-40) var(--spacing-24);
    }

    #sec-4-the-wallet .part-2 .bottom-row .divider {
        width: 100%;
        height: 2px;
    }

    /* section 5 */
    #sec-5-the-wallet h2 {
        margin-bottom: var(--spacing-24);
    }

    /* section 7*/
    #sec-7-the-wallet .marq-mobile-double-wrapper {
        width: 100%;
        gap: var(--spacing-16);
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #sec-7-the-wallet .marq-mobile-double-wrapper:before {
        content: '';
        z-index: 5;
        position: absolute;
        top: 0;
        left: -10px;
        height: 100%;
        width: 10%;
        background: linear-gradient(to left, transparent, #FFFFFF);
    }

    #sec-7-the-wallet .marq-mobile-double-wrapper:after {
        content: '';
        z-index: 5;
        position: absolute;
        top: 0;
        right: -10px;
        height: 100%;
        width: 10%;
        background: linear-gradient(to right, transparent, #FFFFFF);
    }

    /*    #sec-7-the-wallet .marq-wrapper::before {content: ''; z-index: 5; position: absolute; top: 0; left: 0; height: 100%; width: 5%; background: linear-gradient(to left, transparent, #FFFFFF);}*/
    #sec-7-the-wallet .marq-wrapper::before {
        content: none;
    }

    #sec-7-the-wallet .marq-wrapper::after {
        content: none;
    }

    #sec-7-the-wallet .marq-wrapper.second-line .marq-container:first-of-type {
        margin-left: -130px;
    }

    #sec-7-the-wallet .marq-wrapper .marq-container .marq-item {
        margin: 0 var(--spacing-16) 0 0;
        min-width: 237px;
        width: 237px;
        height: 100px;
        background-color: var(--color-surface-soft-blue);
        border-radius: var(--spacing-8);
        padding: var(--spacing-16);
    }

    #sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top .marq-item-inner-top-right .title {
        font-weight: 700;
        line-height: 20px;
        font-size: var(--font-size-12);
    }

    #sec-7-the-wallet .marq-container .marq-item .marq-item-inner-top .marq-item-inner-top-right .description {
        font-size: var(--font-size-10);
        line-height: 14px;
    }

    #sec-7-the-wallet .marq-container .marq-item .marq-item-inner-bottom .active-indicator {
        gap: var(--spacing-2);
        border-radius: var(--spacing-40);
        padding: var(--spacing-2) var(--spacing-8);
    }

    #sec-7-the-wallet .marq-container .marq-item .marq-item-inner-bottom .active-indicator p {
        font-size: var(--font-size-10);
        line-height: 12px;
    }

    #sec-7-the-wallet .marq-container {
        animation: marquee-p 18s linear infinite;
    }

    #sec-7-the-wallet .marq-wrapper.second-line .marq-container {
        animation: marquee-p 24s linear infinite;
    }

    #sec-7-the-wallet .mobile-btn-container {
        margin-top: 8px;
    }

    #sec-7-the-wallet .disclaimer {
        background-color: var(--color-surface-soft-blue-light);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-16);
        border-radius: var(--spacing-8);
        max-width: min(372px, 100%);
        align-self: end;
    }

    #sec-7-the-wallet .disclaimer>p {
        margin: 0 0 0 var(--spacing-8);
        padding: 0;
        font-size: var(--font-size-12);
        font-weight: 600;
        line-height: 14px;
    }

    #sec-7-the-wallet .disclaimer {
        background-color: var(--color-surface-soft-blue-light);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-16);
        margin-right: var(--spacing-24);
        border-radius: var(--spacing-8);
        width: 100%;
        align-self: end;
    }

    #sec-7-the-wallet .disclaimer>p {
        margin: 0 0 0 var(--spacing-8);
        padding: 0;
        font-size: var(--font-size-12);
        font-weight: 600;
        line-height: 14px;
    }
}