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

:root {
    --g950: #071a0e;
    --g900: #0d2b18;
    --g800: #143d22;
    --g700: #1a5430;
    --g600: #216b3d;
    --g500: #2a8a4f;
    --g400: #3aad65;
    --g300: #5dc97f;
    --g200: #a8e6bf;
    --g100: #e8f8ee;
    --gold: #e6b800;
    --gold-b: #ffd700;
    --gold-l: #ffe566;
    --gold-d: #b8920a;
    --gold-n: #FFBE00;
    --white: #ffffff;
    --bg: #f5f7f9;
    --fg: #111827;
    --fg2: #374151;
    --fg3: #6b7280;
    --fg4: #9ca3af;
    --bdr: #e5e7eb;
    --bdr2: #d1d5db;
    --gold-2: #e5c68b;
    --green: #21b88a;
    --red: #d65a5a;
    --bg-light: #f9f9f9;
    --r: .75rem;
    --rl: 1rem;
    --rxl: 1.4rem;
    --sh-sm: 0 1px 3px rgba(0,0,0,.06);
    --sh-md: 0 4px 16px rgba(0,0,0,.08);
    --sh-lg: 0 12px 40px rgba(0,0,0,.1);
    --sh-grn: 0 8px 30px rgba(26,84,48,.25);
    --sh-gld: 0 6px 24px rgba(230,184,0,.3);
    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --radius: 18px;
}

html {
    scroll-behavior: smooth
}

body {
    font-family: "Shabnam","Vazirmatn",sans-serif;
    background: var(--bg);
    color: var(--fg);
    direction: rtl;
    line-height: 1.8;
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit
}

ul {
    list-style: none
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: #f1f5f9
}

::-webkit-scrollbar-thumb {
    background: var(--g600);
    border-radius: 3px
}
.page-content-wrapper{
    padding-top:130px;
}
.home-landing .page-content-wrapper {
    padding-top: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tag-video-web iframe {
    overflow: hidden;
    border-radius: 12px;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* ============ ANIMATIONS ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(.92)
    }

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

@keyframes float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

@keyframes floatSlow {
    0%,100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-18px) rotate(1.5deg)
    }
}

@keyframes pulse {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.3)
    }
}

@keyframes shine {
    0% {
        left: -60%
    }

    100% {
        left: 120%
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes goldFloat {
    0%,100% {
        transform: translateY(0px) rotate(0deg) scale(1)
    }

    50% {
        transform: translateY(-22px) rotate(-.4deg) scale(1.015)
    }
}

@keyframes goldGlow {
    0%,100% {
        opacity: .3;
        transform: scale(1)
    }

    50% {
        opacity: .65;
        transform: scale(1.15)
    }
}

@keyframes particleDrift {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: .9
    }

    60% {
        opacity: .5
    }

    100% {
        transform: translateY(-70px) translateX(var(--px,4px)) scale(0);
        opacity: 0
    }
}

@keyframes progressFill {
    from {
        height: 0
    }

    to {
        height: 100%
    }
}

@keyframes phonePop {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.95)
    }

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

@keyframes vaultPulse {
    0%,100% {
        transform: scale(1);
        opacity: .6
    }

    50% {
        transform: scale(1.15);
        opacity: 1
    }
}

@keyframes liveGlow {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(74,222,128,.6)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(74,222,128,0)
    }
}

@keyframes priceFlash {
    0% {
        transform: scale(1)
    }

    30% {
        transform: scale(1.15);
        color: var(--gold-b)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes hexSpin {
    0%,100% {
        transform: rotate(0deg) scale(1)
    }

    50% {
        transform: rotate(3deg) scale(1.02)
    }
}

@keyframes screenFade {
    from {
        opacity: 0;
        transform: scale(.97)
    }

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

@keyframes scanLine {
    0% {
        top: 0%
    }

    100% {
        top: 100%
    }
}

@keyframes heroFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg)
    }

    33% {
        transform: translateY(-18px) rotate(1deg)
    }

    66% {
        transform: translateY(-8px) rotate(-.5deg)
    }
}

@keyframes bankFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes ingotFloat {
    0%,100% {
        transform: translateY(0) rotate(-1deg)
    }

    50% {
        transform: translateY(-18px) rotate(1deg)
    }
}

@keyframes bankCoinFloat {
    0% {
        transform: translateY(0) scale(.8);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: .7
    }

    100% {
        transform: translateY(-80px) translateX(var(--cx,10px)) scale(.4);
        opacity: 0
    }
}

@keyframes shadowPulse {
    0%,100% {
        transform: scaleX(1);
        opacity: .3
    }

    50% {
        transform: scaleX(.72);
        opacity: .12
    }
}

@keyframes greenParticle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0
    }

    10% {
        opacity: .8
    }

    90% {
        opacity: .4
    }

    100% {
        transform: translateY(-150px) translateX(var(--gx,20px));
        opacity: 0
    }
}

@keyframes rotateOrb {
    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg)
    }

    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg)
    }
}

@keyframes shimmerGold {
    0% {
        background-position: -300% 0
    }

    100% {
        background-position: 300% 0
    }
}

@keyframes revealLine {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes numberRoll {
    from {
        transform: translateY(20px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes shirazGlow {
    0%,100% {
        filter: drop-shadow(0 0 12px rgba(230,184,0,.3))
    }

    50% {
        filter: drop-shadow(0 0 28px rgba(230,184,0,.65))
    }
}

@keyframes domeFloat {
    0%,100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-8px) scale(1.01)
    }
}

@keyframes archGlow {
    0%,100% {
        opacity: .6
    }

    50% {
        opacity: 1
    }
}

@keyframes branchPop {
    0% {
        transform: scale(0);
        opacity: 0
    }

    60% {
        transform: scale(1.15);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

/* Scroll-reveal base */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--ease-out),transform .8s var(--ease-out)
}

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0)
    }

.reveal-left {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .8s var(--ease-out),transform .8s var(--ease-out)
}

    .reveal-left.revealed {
        opacity: 1;
        transform: translateX(0);
        text-align: right;
    }

.reveal-right {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .8s var(--ease-out),transform .8s var(--ease-out);
    text-align: right;
}

    .reveal-right.revealed {
        opacity: 1;
        transform: translateX(0)
    }

.reveal-scale {
    opacity: 0;
    transform: scale(.93);
    transition: opacity .8s var(--ease-out),transform .8s var(--ease-out)
}

    .reveal-scale.revealed {
        opacity: 1;
        transform: scale(1)
    }

.d1 {
    transition-delay: .1s
}

.d2 {
    transition-delay: .2s
}

.d3 {
    transition-delay: .3s
}

.d4 {
    transition-delay: .4s
}

.d5 {
    transition-delay: .5s
}

.d6 {
    transition-delay: .6s
}

.d7 {
    transition-delay: .7s
}

.d8 {
    transition-delay: .8s
}

/* ============ HEADER ============ */
.hdr {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--bdr);
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
    transition: all .4s
}

    .hdr.scrolled {
        background: rgba(255,255,255,.88);
        box-shadow: 0 2px 20px rgba(0,0,0,.1)
    }

.hi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px
}

.hr2 {
    display: flex;
    align-items: center;
    gap: 2.5rem
}

.logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer
}

.lm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg,var(--g700),var(--g500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 3px 12px rgba(26,84,48,.35);
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease-spring)
}

    .lm::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
        animation: shine 3s ease-in-out infinite
    }

.logo:hover .lm {
    transform: scale(1.1) rotate(-5deg)
}

.lt {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--g800)
}

.ls {
    font-size: .62rem;
    color: var(--fg3);
    font-weight: 300;
    margin-right: .2rem
}

.nav {
    display: flex;
    gap: 1.75rem
}

    .nav a {
        font-size: .84rem;
        color: var(--fg2);
        font-weight: 500;
        position: relative;
        transition: color .3s;
        padding: .2rem 0
    }

        .nav a::after {
            content: "";
            position: absolute;
            width: 0;
            height: 1.5px;
            bottom: -2px;
            right: 0;
            background: var(--g600);
            transition: width .35s var(--ease-out)
        }

        .nav a:hover {
            color: var(--g700)
        }

            .nav a:hover::after {
                width: 100%
            }

.hl {
    display: flex;
    align-items: center;
    gap: 1.25rem
}

.pchip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem 1rem;
    border-radius: 999px;
    background: var(--g100);
    border: 1px solid rgba(42,138,79,.2);
    transition: all .3s
}

    .pchip:hover {
        background: rgba(42,138,79,.1);
        border-color: rgba(42,138,79,.35)
    }

    .pchip .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--g400)
    }

    .pchip .lb {
        font-size: .68rem;
        color: var(--fg3)
    }

    .pchip .vl {
        font-size: .8rem;
        font-weight: 700;
        color: var(--g700)
    }

.btn-lg {
    padding: .52rem 1.4rem;
    border-radius: var(--r);
    font-size: .84rem;
    font-weight: 700;
    background: var(--g700);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 2px 8px rgba(26,84,48,.3)
}

    .btn-lg:hover {
        background: var(--g800);
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 6px 20px rgba(26,84,48,.4)
    }
    .btn-lg:focus, .btn-lg:active, .btn-lg:hover {
        color: white !important;
    }

.dropdown-toggle.btn-lg {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 40px;
}
.landing-account-settings .dropdown-toggle.btn-lg::after {
    font-size: 20px;
}
.mtog {
    display: none;
    background: none;
    border: none;
    color: var(--fg);
    cursor: pointer;
    padding: .3rem;
    border-radius: 8px;
    transition: background .3s
}

    .mtog:hover {
        background: var(--g100)
    }

@media(max-width:1150px) {
    .nav, .pchip {
        display: none
    }
    .investing-user-info {
        display: none
    }
    .mtog {
        display: block
    }
    /* .btn-lg{display:none} */
}

/* ============ HERO ============ */
.hero {
    min-height: 100vh;
    padding: 8rem 0 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,var(--g900),var(--g800),var(--g700))
}

.hbg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 65% 25%,rgba(33,107,61,.35) 0%,transparent 65%),radial-gradient(ellipse 50% 50% at 15% 75%,rgba(20,61,34,.6) 0%,transparent 60%)
}

.hnoise {
    position: absolute;
    inset: 0;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../landing/investing/css/#n)'/%3E%3C/svg%3E");
    background-size: 200px
}

.hgrid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(58,173,101,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(58,173,101,.05) 1px,transparent 1px);
    background-size: 55px 55px
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none
}

.ob1 {
    width: 550px;
    height: 550px;
    top: -10%;
    right: -8%;
    background: radial-gradient(circle,rgba(42,138,79,.18) 0%,transparent 70%);
    animation: float 12s ease-in-out infinite
}

.ob2 {
    width: 380px;
    height: 380px;
    bottom: -5%;
    left: -5%;
    background: radial-gradient(circle,rgba(26,84,48,.15) 0%,transparent 70%);
    animation: float 9s ease-in-out 2s infinite reverse
}

.ob3 {
    width: 250px;
    height: 250px;
    top: 45%;
    left: 42%;
    background: radial-gradient(circle,rgba(230,184,0,.07) 0%,transparent 70%);
    animation: float 7s ease-in-out 1s infinite
}

.hex {
    position: absolute;
    opacity: .07;
    animation: hexSpin 8s ease-in-out infinite
}

.hx1 {
    width: 120px;
    height: 120px;
    top: 18%;
    left: 7%
}

.hx2 {
    width: 80px;
    height: 80px;
    top: 55%;
    right: 4%;
    animation-delay: 2s
}

.gold-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden
}

.gp {
    position: absolute;
    border-radius: 50%;
    animation: particleDrift var(--dur,6s) var(--delay,0s) ease-in-out infinite
}

.gp-dot {
    background: var(--gold-b);
    box-shadow: 0 0 4px rgba(255,215,0,.8)
}

.gp-star {
    background: transparent;
    border: 1px solid rgba(255,215,0,.6);
    transform: rotate(45deg)
}

.gp-ring {
    background: transparent;
    border: 1.5px solid rgba(255,215,0,.4);
    border-radius: 50%
}

.hero-in {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: calc(100vh - 13rem);
    padding-bottom: 5rem
}

@media(max-width:1024px) {
    .hero-in {
        grid-template-columns: 1fr 1fr;
        gap: 1rem
    }
}

.hbadge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem 1rem;
    border-radius: 999px;
    background: rgba(230,184,0,.12);
    border: 1px solid rgba(230,184,0,.35);
    font-size: .72rem;
    color: var(--gold-b);
    font-weight: 700;
    margin-bottom: 1.5rem;
    width: fit-content;
    animation: fadeInUp .6s var(--ease-out) both
}

.bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-b);
    animation: pulse 2s ease-in-out infinite
}

.hero h1 {
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 900;
    line-height: 1.45;
    margin-bottom: 1.25rem;
    color: #fff;
    animation: fadeInUp .7s var(--ease-out) .1s both
}

    .hero h1 .lg {
        background: linear-gradient(90deg,var(--gold-b),var(--gold-l),var(--gold-b));
        background-size: 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        animation: shimmer 4s linear infinite
    }

@media screen and (max-width:1024px) {
    .hero h1 .lg {
        display: inline;
        margin-right: 1rem;
    }
}

.hdesc {
    font-size: .95rem;
    color: white;
    max-width: 30rem;
    line-height: 2;
    margin: 2rem 0;
    animation: fadeInUp .7s var(--ease-out) .2s both
}

.trow {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
    animation: fadeInUp .7s var(--ease-out) .3s both
}

.tchip {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255,255,255,.99);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    transition: all .35s var(--ease-spring)
}

    .tchip:hover {
        background: rgba(255,255,255,.14);
        transform: translateY(-3px) scale(1.04);
        border-color: rgba(255,255,255,.25)
    }

.trow2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
    animation: fadeInUp .7s var(--ease-out) .3s both
}

.tchip2 {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    color: #202020;
    border: 1px solid rgba(255,255,255,.12);
    transition: all .35s var(--ease-spring);
    text-align: right;
}
/* .tchip2:hover{background:rgba(255, 255, 255, 0.771);transform:translateY(-3px) scale(1.04);border-color:rgba(255, 255, 255, 0.716)} */
.ctaw {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: var(--rl);
    overflow: hidden;
    max-width: 460px;
    backdrop-filter: blur(20px);
    transition: all .35s;
    animation: fadeInUp .7s var(--ease-out) .4s both
}

    .ctaw:focus-within {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(230,184,0,.15)
    }

    .ctaw input {
        flex: 1;
        border: none;
        outline: none;
        padding: 1rem 1.25rem;
        font-size: .9rem;
        background: transparent;
        color: #fff;
        direction: rtl;
    }
        .ctaw input:focus, .ctaw input:active {
            color: #fff !important;
        }

        .ctaw input::placeholder {
            color: rgba(255,255,255,.32)
        }

.btn-cta {
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg,var(--gold-n),var(--gold-n));
    color: var(--g950);
    font-weight: 900;
    font-size: .85rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .35s var(--ease-spring)
}

    .btn-cta:hover {
        background: linear-gradient(90deg,var(--gold-n),var(--gold-n),var(--gold-n));
        transform: scale(1.04)
    }

.hstats {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.1);
    animation: fadeInUp .7s var(--ease-out) .5s both
}

.hst .sv {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--gold-n);
    display: block;
    line-height: 1.2
}

.hst .sl {
    font-size: .68rem;
    color: rgba(255,255,255,.42);
    margin-top: .15rem;
    display: block
}

.img-hst {
    width: 50px;
}

.tpanel {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(28px);
    border-radius: var(--rxl);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
    animation: fadeInUp .8s var(--ease-out) .3s both
}

.tpannel-price {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.pbanner-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: var(--r);
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden
}

    .pbanner-new::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
        animation: shimmer 4s infinite
    }

@media(max-width:900px) {
    .pbanner-new .change-price-precent {
        display: none;
    }

    .pbanner-new {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ade80;
    animation: liveGlow 1.5s ease-in-out infinite
}

.pbanner-lbl {
    font-size: 1rem;
    color: rgba(255,255,255,.9);
    font-weight: 600
}

.pbanner-price {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gold-n);
    text-shadow: 0 0 20px rgba(230,184,0,.4)
}

.pbanner-unit {
    font-size: .67rem;
    color: rgba(255,255,255,.4);
    margin-top: .1rem
}

.ttitle {
    font-size: .92rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: rgba(255,255,255,.9)
}

.htabs {
    display: flex;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    margin-bottom: 1.1rem
}

.htab {
    flex: 1;
    padding: .65rem;
    font-size: .82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all .35s;
    font-family: inherit
}

    .htab.buy.active {
        background: linear-gradient(135deg,var(--g700),var(--g500));
        color: #fff
    }

    .htab.sell.active {
        background: linear-gradient(135deg,#7a1a1a,#b52a2a);
        color: #fff
    }

    .htab:not(.active) {
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.9)
    }

.trade-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: .9rem
}

.fgrp label {
    display: block;
    font-size: .75rem;
    color: rgba(255,255,255,.55);
    margin-bottom: .35rem;
    font-weight: 600
}

.inp-h {
    width: 100%;
    padding: .65rem .9rem;
    border-radius: var(--r);
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: .85rem;
    outline: none;
    transition: all .35s
}
    .inp-h:focus, .inp-h:active, .inp-h:hover {
        color: white !important;
    }

    .inp-h::placeholder {
        color: rgba(255,255,255,.8)
    }

    .inp-h:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(230,184,0,.15)
    }

.inp-suffix {
    position: relative
}

    .inp-suffix input {
        padding-left: 2.5rem
    }

.inp-sfx {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    pointer-events: none;
    font-weight: 600
}

.btn-gold {
    width: 100%;
    padding: .85rem;
    border-radius: var(--r);
    font-weight: 900;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg,var(--g700),var(--g500));
    color: white;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    display: block;
    text-align: center;
}

    .btn-gold:hover {
        transform: translateY(-3px)
    }
    .btn-gold:hover, .btn-gold:focus, .btn-gold:active {
        color:white;
    }
    .btn-gold.sell {
        background: linear-gradient(135deg,#b52a2a,#e03535);
        color: #fff
    }

.tnote {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: center;
    font-size: .65rem;
    color: rgba(255,255,255,.3);
    margin-top: .9rem
}

.hero-wave {
    position: relative;
    z-index: 5;
    line-height: 0;
    margin-top: -2px
}

    .hero-wave svg {
        display: block;
        width: 100%
    }

/* ============ SECTIONS ============ */
.sec {
    padding: 4rem 0
}

.sec-bg {
    background: var(--bg)
}

.stitle {
    text-align: center;
    margin-bottom: 3.5rem
}

    .stitle h2 {
        font-size: clamp(1.6rem,3vw,2rem);
        font-weight: 900;
        color: var(--fg);
        margin-bottom: .5rem
    }

        .stitle h2 .grn {
            color: var(--g700)
        }

        .stitle h2 .gld {
            color: var(--gold-d)
        }

    .stitle p {
        color: var(--fg3);
        max-width: 28rem;
        margin: 0 auto;
        font-size: .88rem
    }

.sdiv {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg,var(--g600),var(--g400));
    border-radius: 2px;
    margin: .7rem auto 0
}

.card {
    background: #fff;
    border-radius: var(--rxl);
    border: 1px solid var(--bdr);
    box-shadow: var(--sh-sm);
    transition: all .4s
}

    .card:hover {
        box-shadow: var(--sh-md)
    }

.btn-g {
    width: 100%;
    padding: .875rem;
    border-radius: var(--r);
    font-weight: 700;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    background: var(--g700);
    color: #fff;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 3px 12px rgba(26,84,48,.25)
}

    .btn-g:hover {
        background: var(--g800);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(26,84,48,.35)
    }

.btn-ol {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 2rem;
    border-radius: var(--r);
    font-weight: 700;
    font-size: .9rem;
    background: none;
    color: var(--g700);
    border: 2px solid var(--g600);
    cursor: pointer;
    transition: all .35s var(--ease-spring)
}

    .btn-ol:hover {
        background: var(--g700);
        color: #fff;
        transform: translateY(-2px)
    }



/* ============ PROCESS ============ */
.process-sec {
    padding: 4rem 0;
    background: var(--bg);
    overflow: hidden
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto
}

@media(max-width:1024px) {
    .process-grid {
        grid-template-columns: 2fr;
        gap: 3rem
    }
    .phone-wrap {

        max-width: 230px;
        margin-top: 0px;
    }
}
/* .phone-wrap{display:flex;justify-content:center;align-items:center;position:relative} */
.phone-wrap {
    position: relative;
    width: 320px;
    margin: auto;
    max-width: 230px;
    margin-top: -30px;
}

.phone-screen {
    display: none;
}

    .phone-screen.active {
        display: block;
    }

    .phone-screen img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
    }

.phone-glow {
    position: absolute;
    width: 260px;
    height: 380px;
    background: radial-gradient(ellipse,rgba(42,138,79,.25) 0%,transparent 70%);
    filter: blur(40px);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none
}

.phone-outer {
    width: 240px;
    height: 490px;
    border-radius: 40px;
    background: linear-gradient(160deg,#2a2a2a,#1a1a1a 40%,#111);
    box-shadow: 0 10px 20px rgba(0,0,0,.10),0 0 0 1px rgba(255,255,255,.08);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: phonePop .8s var(--ease-out) .4s both
}

.phone-btn-vol {
    position: absolute;
    right: -4px;
    top: 100px;
    width: 4px;
    height: 28px;
    background: #333;
    border-radius: 2px 0 0 2px
}

.phone-btn-vol2 {
    position: absolute;
    right: -4px;
    top: 140px;
    width: 4px;
    height: 28px;
    background: #333;
    border-radius: 2px 0 0 2px
}

.phone-btn-pwr {
    position: absolute;
    left: -4px;
    top: 130px;
    width: 4px;
    height: 44px;
    background: #2e2e2e;
    border-radius: 0 2px 2px 0
}

.phone-inner {
    width: 214px;
    height: 464px;
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
    position: relative
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 0 0 14px 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.phone-notch-cam {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #222;
    border: 1.5px solid #333
}

.phone-notch-spk {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: #222
}

.phone-scan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,transparent,rgba(58,173,101,.6),transparent);
    animation: scanLine 2.5s linear infinite;
    pointer-events: none;
    z-index: 5;
    opacity: .5
}

.steps-wrap {
    /* position:relative; */
    padding-right: 0rem
}

.steps-line {
    position: absolute;
    right: 2rem;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--bdr);
    border-radius: 1px;
    overflow: hidden
}

.steps-line-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,var(--g600),var(--g400));
    transform-origin: top;
    animation: progressFill 1.5s ease-out .5s both
}

.step-item {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    position: relative;
    margin-bottom: 2.5rem;
    cursor: pointer;
    transition: all .3s
}

    .step-item:last-child {
        margin-bottom: 0
    }

.step-icon-wrap {
    flex-shrink: 0;
    position: relative;
    z-index: 2
}

.step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bdr);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
    transition: all .4s var(--ease-spring);
    position: relative
}

    .step-num svg {
        width: 22px;
        height: 22px;
        color: var(--g600);
        transition: color .3s
    }

.step-item.active .step-num, .step-item:hover .step-num {
    background: var(--g700);
    border-color: var(--g700);
    box-shadow: 0 8px 24px rgba(26,84,48,.3);
    transform: scale(1.1)
}

    .step-item.active .step-num svg, .step-item:hover .step-num svg {
        color: #fff
    }

.step-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold-n);
    color: var(--g950);
    font-size: .6rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center
}

.step-content h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--fg);
    margin-bottom: .4rem;
    line-height: 1.4
}

.step-content p {
    font-size: .8rem;
    color: var(--fg3);
    line-height: 1.9
}

@media(max-width:600) {
    .step-content p {
        font: 0.625rem;
    }
}

.step-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    padding: .2rem .75rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: var(--g100);
    color: var(--g700);
    border: 1px solid rgba(42,138,79,.2)
}

.process-cta-box {
    margin-top: 2rem;
    margin-right: 2rem;
    background: linear-gradient(135deg,var(--g800),var(--g700));
    border-radius: var(--rl);
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(58,173,101,.3);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap
}

    .process-cta-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
        animation: shimmer 4s infinite
    }

.process-cta-text h3 {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .15rem
}

.process-cta-text p {
    font-size: .75rem;
    color: rgba(255,255,255,.55)
}

.process-cta-form {
    display: flex;
    gap: .6rem;
    flex: 1;
    min-width: 240px
}

    .process-cta-form input {
        flex: 1;
        padding: .7rem 1rem;
        border-radius: var(--r);
        background: rgba(255,255,255,.15);
        border: 1.5px solid rgba(255,255,255,.25);
        color: #fff;
        font-size: .85rem;
        outline: none;
        font-family: inherit;
        transition: all .3s
    }
    .process-cta-form input:focus {
       color:white !important;
    }

        .process-cta-form input::placeholder {
            color: rgba(255,255,255,.4)
        }

        .process-cta-form input:focus {
            border-color: var(--gold-b)
        }

.process-cta-submit {
    padding: .7rem 1.2rem;
    border-radius: var(--r);
    background: linear-gradient(135deg,var(--gold-n),var(--gold-n));
    color: var(--g950);
    font-weight: 900;
    font-size: .82rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .35s var(--ease-spring)
}

    .process-cta-submit:hover {
        transform: translateY(-2px)
    }




/* ============ MARKET ANALYSIS ============ */
.market-sec {
    padding: 4rem 0;
    background: var(--bg);
    position: relative;
    overflow: hidden
}

    .market-sec::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 50% at 20% 60%,rgba(42,138,79,.04) 0%,transparent 70%)
    }

.market-grid-lines {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3.5rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    align-items: center;
    text-align: right;
}

@media(max-width:900px) {
    .market-grid-lines {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }
}

.chart-panel {
    background: #fff;
    border: 1.5px solid var(--bdr);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.07)
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
    gap: .5rem;
    background: var(--bg)
}

.chart-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    animation: liveGlow 1.5s ease-in-out infinite;
    flex-shrink: 0
}

.chart-price-live {
    display: flex;
    align-items: center;
    gap: .6rem
}

.chart-price-val {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--fg)
}

.chart-price-lbl {
    font-size: .6rem;
    color: var(--fg3);
    margin-top: .1rem
}

.chart-tfs {
    display: flex;
    gap: .35rem
}

.chart-tf {
    padding: .3rem .75rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    border: 1.5px solid var(--bdr);
    background: #fff;
    color: var(--fg3);
    cursor: pointer;
    font-family: inherit;
    transition: all .3s
}

    .chart-tf.active {
        background: var(--g700);
        border-color: var(--g700);
        color: #fff
    }

.chart-body {
    padding: .75rem 1rem;
    position: relative;
    background: #fff
}

.chart-svg-wrap {
    width: 100%;
    height: 160px;
    position: relative
}

    .chart-svg-wrap svg {
        width: 100%;
        height: 100%
    }

.chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 1.25rem;
    border-top: 1px solid var(--bdr);
    background: var(--bg)
}

.chart-stat {
    text-align: center
}

.chart-stat-lbl {
    font-size: .58rem;
    color: var(--fg4);
    display: block;
    margin-bottom: .15rem
}

.chart-stat-val {
    font-size: .82rem;
    font-weight: 700
}

    .chart-stat-val.hi {
        color: #16a34a
    }

    .chart-stat-val.lo {
        color: #dc2626
    }

    .chart-stat-val.chg-up {
        color: #16a34a
    }

    .chart-stat-val.chg-dn {
        color: #dc2626
    }

.market-text .market-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(42,138,79,.08);
    border: 1px solid rgba(42,138,79,.2);
    font-size: .7rem;
    color: var(--g600);
    font-weight: 700;
    margin-bottom: 1.25rem
}

.market-text h2 {
    font-size: clamp(1.6rem,3vw,2.2rem);
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: .9rem;
    color: var(--fg)
}

    .market-text h2 span {
        color: var(--g700)
    }

.market-text p {
    font-size: 1rem;
    color: #202020;
    line-height: 2;
    margin-bottom: 1.75rem
}

.market-features {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 2rem
}

.market-feature-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 12px;
    transition: all .35s var(--ease-spring)
}

    .market-feature-row:hover {
        background: rgba(42,138,79,.06);
        border-color: rgba(42,138,79,.2);
        transform: translateX(-4px)
    }

.mf-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(42,138,79,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .mf-icon svg {
        width: 15px;
        height: 15px;
        color: var(--g600)
    }

.mf-text {
    font-size: .8rem;
    color: var(--fg2);
    font-weight: 500
}

.btn-market {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 2.2rem;
    background: linear-gradient(135deg,var(--g700),var(--g500));
    color: #fff;
    font-weight: 900;
    font-size: .92rem;
    border: none;
    border-radius: var(--rl);
    cursor: pointer;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 6px 24px rgba(26,84,48,.3)
}

    .btn-market:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 14px 40px rgba(26,84,48,.45)
    }

    .btn-market:hover, .btn-market:focus {
        color: white;
    }

/* ============ WHY SECTION ============ */

.why-section {
    display: none;
    background: var(--bg)
}

.why-card-wrap {
    position: relative;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(18px);
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 8px 48px rgba(0,0,0,.07);
    padding: 2.5rem 2rem 4.5rem;
    overflow: visible;
    margin-top: 2rem
}

.why-vault-area {
    position: absolute;
    top: -20px;
    left: 1.5rem;
    width: 180px;
    height: 160px;
    pointer-events: none;
    z-index: 10
}

@media(max-width:900px) {
    .why-vault-area {
        display: none
    }
}

.why-vault-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 30px;
    top: 20px;
    background: radial-gradient(circle,rgba(255,215,0,.18) 0%,transparent 70%);
    border-radius: 50%;
    animation: vaultPulse 3s ease-in-out infinite
}

.why-vault-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.2))
}

.why-cta-wrap {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20
}

.why-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 2.8rem;
    background: linear-gradient(135deg,var(--g600),#1e8a45);
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(42,138,79,.5);
    transition: all .35s var(--ease-spring);
    white-space: nowrap
}

    .why-cta-btn:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 14px 40px rgba(42,138,79,.6)
    }

.fgrid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto
}

@media(max-width:900px) {
    .fgrid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:560px) {
    .fgrid {
        grid-template-columns: 1fr
    }
}

.fcard {
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: var(--rxl);
    box-shadow: 0 4px 20px rgba(42,138,79,.06);
    transition: all .4s var(--ease-spring)
}

    .fcard:hover {
        transform: translateY(-8px);
        border-color: rgba(42,138,79,.3);
        box-shadow: var(--sh-grn)
    }

.fico {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--g100);
    border: 1px solid rgba(42,138,79,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .9rem;
    transition: all .4s var(--ease-spring)
}

.fcard:hover .fico {
    transform: scale(1.12) rotate(-6deg);
    background: rgba(42,138,79,.15)
}

.fico svg {
    width: 22px;
    height: 22px
}

.fcard h3 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .45rem;
    color: var(--fg)
}

.fcard:hover h3 {
    color: var(--g700)
}

.fcard p {
    font-size: .8rem;
    color: var(--fg3);
    line-height: 1.85
}

/* ============ WHY BECOME ============ */
.why-become-sec {
    padding: 4rem 0;
    background: var(--bg);
    position: relative;
    overflow: hidden
}

    .why-become-sec::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 60% at 30% 50%,rgba(42,138,79,.04) 0%,transparent 70%)
    }

.wb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

@media(max-width:900px) {
    .wb-grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }
}

.wb-img-side {
    position: relative
}

.tag-video-web {
    border-radius: 2%;
}

.wb-img-main {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.14),0 8px 24px rgba(42,138,79,.1);
    position: relative
}

    .wb-img-main img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        display: block;
        transition: transform .6s var(--ease-out)
    }

    .wb-img-main:hover img {
        transform: scale(1.04)
    }

.wb-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,transparent 50%,rgba(13,43,24,.7) 100%);
    border-radius: 24px
}

.wb-img-badge {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--rl);
    padding: .85rem 1.2rem
}

.wb-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--gold),var(--gold-b));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem
}

.wb-badge-text h4 {
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .1rem
}

.wb-badge-text span {
    font-size: .68rem;
    color: rgba(255,255,255,.65)
}

.wb-float-card {
    position: absolute;
    top: -1.5rem;
    left: -2rem;
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 0 12px 36px rgba(0,0,0,.12),0 4px 12px rgba(42,138,79,.1);
    border: 1px solid rgba(42,138,79,.1);
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 180px;
    transition: transform .3s var(--ease-spring)
}

    .wb-float-card:hover {
        transform: translateY(-4px) scale(1.03)
    }

.wb-float-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(42,138,79,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0
}

.wb-float-val {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--g700);
    display: block;
    line-height: 1
}

.wb-float-lbl {
    font-size: .62rem;
    color: var(--fg3);
    margin-top: .1rem;
    display: block
}

.wb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(42,138,79,.08);
    border: 1px solid rgba(42,138,79,.2);
    font-size: .7rem;
    color: var(--g600);
    font-weight: 700;
    margin-bottom: 1.25rem
}

.wb-title {
    font-size: clamp(1.7rem,3.5vw,2.4rem);
    font-weight: 900;
    line-height: 1.35;
    color: var(--fg);
    margin-bottom: .85rem
}

    .wb-title .accent {
        background: linear-gradient(135deg,var(--g700),var(--g400));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

.wb-desc {
    font-size: .88rem;
    color: var(--fg1);
    line-height: 2;
    margin-bottom: 0rem;
    display: none;
}

.wb-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 2rem;
    display: none;
}

.wb-feat {
    display: flex;
    align-items: flex-start;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    transition: all .35s var(--ease-spring)
}

    .wb-feat:hover {
        background: rgba(42,138,79,.06);
        border-color: rgba(42,138,79,.25);
        transform: translateY(-3px)
    }

.wb-feat-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(42,138,79,.12);
    border: 1px solid rgba(42,138,79,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem
}

.wb-feat-text h4 {
    font-size: .8rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: .15rem
}

.wb-feat-text p {
    font-size: .7rem;
    color: var(--fg3);
    line-height: 1.6
}

.wb-stats-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: linear-gradient(135deg,rgba(26,84,48,.05),rgba(42,138,79,.03));
    border: 1px solid rgba(42,138,79,.12);
    border-radius: var(--rl)
}

.wb-stat {
    flex: 1;
    text-align: center
}

.wb-stat-val {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--g700);
    display: block;
    line-height: 1.2
}

.wb-stat-lbl {
    font-size: .62rem;
    color: var(--fg3);
    margin-top: .2rem;
    display: block
}

.wb-cta {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg,var(--g700),var(--g500));
    color: #fff;
    font-weight: 900;
    font-size: .95rem;
    border: none;
    border-radius: var(--rl);
    cursor: pointer;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 6px 28px rgba(26,84,48,.35)
}

    .wb-cta:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 14px 44px rgba(26,84,48,.55)
    }

/* ============ SHIRAZ SECTION ============ */
.shiraz-sec {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg,#0a1e12 0%,#112a1c 50%,#071509 100%)
}

.shiraz-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 30% 40%,rgba(33,107,61,.3) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 80% 70%,rgba(230,184,0,.06) 0%,transparent 60%)
}

.shiraz-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(58,173,101,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(58,173,101,.04) 1px,transparent 1px);
    background-size: 55px 55px
}

.shiraz-noise {
    position: absolute;
    inset: 0;
    opacity: .02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../landing/investing/css/#n)'/%3E%3C/svg%3E");
    background-size: 200px
}

.shiraz-orb1 {
    position: absolute;
    width: 500px;
    height: 500px;
    top: -10%;
    right: -5%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(42,138,79,.18) 0%,transparent 70%);
    filter: blur(80px);
    animation: float 12s ease-in-out infinite
}

.shiraz-orb2 {
    position: absolute;
    width: 350px;
    height: 350px;
    bottom: -5%;
    left: -5%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(230,184,0,.07) 0%,transparent 70%);
    filter: blur(80px);
    animation: float 9s ease-in-out 2s infinite reverse
}

.shiraz-inner {
    position: relative;
    z-index: 5
}

.shiraz-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(255,215,0,.1);
    border: 1px solid rgba(255,215,0,.25);
    font-size: .7rem;
    color: var(--gold-b);
    font-weight: 700;
    margin-bottom: 1.25rem
}

.shiraz-title {
    font-size: clamp(1.6rem,3vw,2.2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.4;
    margin-bottom: .85rem
}

    .shiraz-title span {
        background: linear-gradient(90deg,var(--gold-b),var(--gold-l));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

.shiraz-desc {
    font-size: .88rem;
    color: rgba(255,255,255,.55);
    line-height: 2;
    margin-bottom: 2rem;
    max-width: 30rem
}

.shiraz-landmarks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem
}

@media(max-width:600px) {
    .shiraz-landmarks {
        grid-template-columns: 1fr
    }
}

.landmark-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all .4s var(--ease-spring);
    position: relative;
    overflow: hidden
}

    .landmark-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(255,215,0,.03) 0%,transparent 60%);
        pointer-events: none;
        border-radius: 20px
    }

    .landmark-card:hover {
        transform: translateY(-8px);
        background: rgba(255,255,255,.08);
        border-color: rgba(255,215,0,.25);
        box-shadow: 0 20px 50px rgba(0,0,0,.4),0 0 40px rgba(255,215,0,.1)
    }

        .landmark-card:hover .landmark-svg {
            animation: shirazGlow .3s forwards
        }

.landmark-svg {
    width: 180px;
    height: 130px;
    margin: 0 auto .85rem;
    display: block;
    transition: all .4s;
    animation: domeFloat 5s ease-in-out infinite
}

.landmark-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--gold-l);
    margin-bottom: .35rem
}

.landmark-desc {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    line-height: 1.7
}

.branches-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem
}

.branch-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(58,173,101,.25);
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    transition: all .35s var(--ease-spring);
    cursor: pointer;
    animation: branchPop .5s var(--ease-spring) var(--bd,.1s) both
}

    .branch-chip:hover {
        background: rgba(42,138,79,.2);
        border-color: rgba(58,173,101,.55);
        transform: translateY(-3px) scale(1.05)
    }

    .branch-chip svg {
        color: var(--g400)
    }

.shiraz-cta {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 2.4rem;
    background: linear-gradient(135deg,var(--gold),var(--gold-b));
    color: var(--g950);
    font-weight: 900;
    font-size: .92rem;
    border: none;
    border-radius: var(--rl);
    cursor: pointer;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 6px 28px rgba(230,184,0,.4)
}

    .shiraz-cta:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 14px 40px rgba(230,184,0,.55)
    }

.shiraz-stat-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    margin-top: 1.5rem
}

.shiraz-stat {
    text-align: center;
    padding: .85rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    transition: all .3s
}

    .shiraz-stat:hover {
        background: rgba(255,215,0,.07);
        border-color: rgba(255,215,0,.18)
    }

.shiraz-stat-val {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--gold-b);
    display: block
}

.shiraz-stat-lbl {
    font-size: .62rem;
    color: rgba(255,255,255,.42);
    margin-top: .2rem;
    display: block
}

/* ============ GALLERY + PHYSICAL ============ */
.gallery-physical-wrap {
    padding: 4rem 0;
    background: linear-gradient(180deg,#f8f6f1,#fefcf8 40%,#f9f7f2 70%,#f5f3ee);
    position: relative;
    overflow: hidden
}

.gallery-1 {
    display: none;
}

.gp-bg-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0
}

.gp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: float 12s ease-in-out infinite
}

.gp-orb1 {
    width: 600px;
    height: 600px;
    top: -15%;
    right: -10%;
    background: radial-gradient(circle,rgba(230,184,0,.12) 0%,rgba(255,215,0,.05) 40%,transparent 70%)
}

.gp-orb2 {
    width: 500px;
    height: 500px;
    bottom: -10%;
    left: -8%;
    background: radial-gradient(circle,rgba(184,146,10,.1) 0%,rgba(230,184,0,.04) 40%,transparent 70%);
    animation-delay: 4s
}

.gp-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(184,146,10,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(184,146,10,.03) 1px,transparent 1px);
    background-size: 60px 60px
}

.gold-rain-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none
}

.slider-section {
    padding: 0 0;
    position: relative;
    z-index: 2
}

.slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: right;
}

.slider-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(184,146,10,.9);
    margin-bottom: .4rem
}

.slider-title {
    font-size: clamp(1.5rem,3.5vw,2rem);
    font-weight: 900;
    color: var(--fg);
    margin: 0 0 .3rem
}

.slider-title-accent {
    background: linear-gradient(135deg,#c9a020,#e6b800,#ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.slider-sub {
    font-size: .82rem;
    color: var(--fg3);
    margin: 0
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.6rem;
    background: rgba(184,146,10,.08);
    border: 1.5px solid rgba(184,146,10,.35);
    color: #8a6e00;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: all .4s var(--ease-spring);
    white-space: nowrap
}

    .view-all-btn:hover {
        background: rgba(184,146,10,.18);
        border-color: rgba(184,146,10,.6);
        transform: translateY(-3px) scale(1.04)
    }

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem
}

.carousel-wrap {
    overflow: hidden;
    flex: 1;
    padding: .5rem 0 1.5rem
}

.carousel-track {
    display: flex;
    gap: 1.5rem;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    direction: rtl
}

.c-arrow-side {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(184,146,10,.3);
    color: var(--gold-d);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 4px 16px rgba(184,146,10,.12);
    flex-shrink: 0
}

    .c-arrow-side:hover {
        background: linear-gradient(135deg,var(--gold),var(--gold-b));
        border-color: var(--gold);
        color: var(--g950);
        transform: scale(1.12);
        box-shadow: 0 8px 24px rgba(184,146,10,.3)
    }

.c-arrow-side-g {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(42,138,79,.3);
    color: var(--g600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 4px 16px rgba(42,138,79,.1);
    flex-shrink: 0
}

    .c-arrow-side-g:hover {
        background: linear-gradient(135deg,var(--g600),var(--g400));
        border-color: var(--g500);
        color: #fff;
        transform: scale(1.12);
        box-shadow: 0 8px 24px rgba(42,138,79,.25)
    }

    .c-arrow-side svg, .c-arrow-side-g svg {
        width: 18px;
        height: 18px
    }

.carousel-dots-row {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .5rem
}

.c-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(184,146,10,.2);
    cursor: pointer;
    transition: all .35s
}

    .c-dot.active {
        width: 24px;
        border-radius: 4px;
        background: rgba(184,146,10,.7)
    }

.c-dot-g {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(42,138,79,.2);
    cursor: pointer;
    transition: all .35s
}

    .c-dot-g.active {
        width: 24px;
        border-radius: 4px;
        background: rgba(42,138,79,.6)
    }

.jcard {
    flex: 0 0 260px;
    min-width: 260px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: all .4s var(--ease-spring);
    background: #fff;
    border: 1px solid rgba(230,184,0,.2);
    box-shadow: 0 4px 20px rgba(184,146,10,.08)
}

    .jcard:hover {
        transform: translateY(-12px);
        box-shadow: 0 24px 56px rgba(184,146,10,.22);
        border-color: rgba(230,184,0,.5)
    }

.jcard-img {
    width: 100%;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0
}

    .jcard-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease
    }

.jcard:hover .jcard-img img {
    transform: scale(1.1)
}

.jcard-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform: skewX(-15deg);
    transition: left .7s;
    pointer-events: none;
    z-index: 2
}

.jcard:hover .jcard-shine {
    left: 150%
}

.jcard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.25) 100%)
}

.jcard-badge {
    position: absolute;
    top: .65rem;
    right: .65rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    z-index: 3;
    backdrop-filter: blur(6px)
}

.jcard-badge-hot {
    background: linear-gradient(135deg,#c9a020,#ffd700);
    color: #2a1200
}

.jcard-badge-new {
    background: linear-gradient(135deg,#216b3d,#3aad65);
    color: #fff
}

.jcard-badge-sale {
    background: linear-gradient(135deg,#c03030,#e04040);
    color: #fff
}

.jcard-body {
    padding: 1.1rem 1.2rem 1.25rem
}

.jcard-cat {
    font-size: .62rem;
    font-weight: 700;
    color: #9a7800;
    letter-spacing: .5px;
    margin-bottom: .3rem;
    text-transform: uppercase
}

.jcard-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--fg);
    margin-bottom: .6rem;
    line-height: 1.4
}

.jcard-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8rem
}

.jcard-price {
    font-size: .92rem;
    font-weight: 900;
    color: var(--g700)
}

.jcard-wt {
    font-size: .65rem;
    color: var(--fg3);
    background: rgba(0,0,0,.05);
    padding: .2rem .55rem;
    border-radius: 6px
}

.jcard-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem;
    background: linear-gradient(135deg,rgba(26,84,48,.08),rgba(26,84,48,.04));
    border: 1px solid rgba(26,84,48,.2);
    border-radius: 10px;
    color: var(--g700);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .35s var(--ease-spring)
}

    .jcard-btn:hover {
        background: linear-gradient(135deg,var(--g700),var(--g500));
        color: #fff;
        border-color: transparent;
        transform: scale(1.02)
    }

.pcard2 {
    flex: 0 0 260px;
    min-width: 260px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    transition: all .4s var(--ease-spring);
    background: #fff;
    border: 1px solid rgba(42,138,79,.2);
    box-shadow: 0 4px 20px rgba(42,138,79,.08)
}

    .pcard2:hover {
        transform: translateY(-12px);
        box-shadow: 0 24px 56px rgba(42,138,79,.2);
        border-color: rgba(58,173,101,.45)
    }

.pcard2-img {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg,#1a3a25,#0d2b18)
}

    .pcard2-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease
    }

.pcard2:hover .pcard2-img img {
    transform: scale(1.1)
}

.pcard2-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    transform: skewX(-15deg);
    transition: left .7s;
    pointer-events: none;
    z-index: 2
}

.pcard2:hover .pcard2-shine {
    left: 150%
}

.pcard2-badge {
    position: absolute;
    top: .65rem;
    right: .65rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    background: linear-gradient(135deg,#216b3d,#3aad65);
    color: #fff;
    z-index: 3
}

.pcard2-body {
    padding: 1rem 1.2rem 1.2rem
}

.pcard2-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--fg);
    margin-bottom: .35rem
}

.pcard2-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem
}

.pcard2-wt {
    font-size: .7rem;
    font-weight: 600;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: rgba(42,138,79,.1);
    color: var(--g600);
    border: 1px solid rgba(42,138,79,.2)
}

.pcard2-karat {
    font-size: .65rem;
    color: var(--fg4)
}

.pcard2-price {
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: .7rem;
    color: var(--g700)
}

    .pcard2-price small {
        font-size: .65rem;
        font-weight: 400;
        color: var(--fg4);
        margin-right: .25rem
    }

.pcard2-btn {
    width: 100%;
    padding: .6rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 700;
    background: rgba(42,138,79,.08);
    color: var(--g600);
    border: 1px solid rgba(42,138,79,.2);
    cursor: pointer;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem
}

    .pcard2-btn:hover {
        background: var(--g700);
        color: #fff;
        border-color: transparent;
        transform: scale(1.02)
    }

.gallery-divider {
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(184,146,10,.2),rgba(42,138,79,.15),transparent);
    margin: 0 2rem
}






/* new */

.gallery-physical-wrap .wrapper-i{
    max-width: 960px;
    margin: 0 auto;
    padding: 0 18px;
}

/* LOGO */
.page-brand {
    text-align: center;
    margin-bottom: 32px;
}

.logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #7a5c1e, #c9932a);
    padding: 0.5rem 1.4rem 0.5rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(201, 147, 42, 0.3);
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
}
/* SECTION */
.section-slider {
    /* margin-bottom: 44px; */
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.section-bar {
    width: 4px;
    height: 26px;
    border-radius: 99px;
    flex-shrink: 0;
}

.section-gold .section-bar {
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

.sction-two-gallery {
    display: none;
}

.section-silver .section-bar {
    background: linear-gradient(180deg, var(--silver-light), var(--silver));
}

.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    flex: 1;
}

.section-all {
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.section-gold .section-all {
    color: var(--gold);
}

.section-silver .section-all {
    color: var(--silver);
}

/* SLIDER */
.slider-wrap {
    position: relative;
}

/* دکمه‌های ناوبری — فقط دسکتاپ، بدون بکگراند */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s var(--ease-spring), opacity 0.2s;
}

    .nav-btn svg {
        width: 28px;
        height: 28px;
        pointer-events: none;
    }

.nav-prev {
    left: -42px;
}

.nav-next {
    right: -42px;
}

.section-gold .nav-btn {
    color: var(--gold);
}

.section-silver .nav-btn {
    color: var(--silver);
}

.nav-btn:hover {
    transform: translateY(-50%) scale(1.2);
}

.nav-btn:active {
    transform: translateY(-50%) scale(0.9);
}

.nav-btn.disabled {
    opacity: 0.25;
    pointer-events: none;
}

/* موبایل: دکمه‌ها مخفی */
@media (max-width: 620px) {
    .nav-btn {
        display: none;
    }

    .wrapper-i {
        padding: 0 14px;
    }
}

/* TRACK */
.slider-track {
    display: flex;
    gap: 12px;
    padding: 8px 2px 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .slider-track::-webkit-scrollbar {
        display: none;
    }
    /* فضای انتها — کارت آخر کامل دیده بشه */
    .slider-track::after {
        content: "";
        flex: 0 0 2px;
    }

/* CARD */
.card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    border: 1.5px solid transparent;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}

.section-gold .card {
    border-color: rgba(201, 147, 42, 0.15);
}

.section-silver .card {
    border-color: rgba(110, 127, 141, 0.12);
}

.card:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13); */
}

@media (max-width: 620px) {
    .card {
        flex: 0 0 70vw;
    }
}

.card-img-wrap {
    position: relative;
    height: 150px;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.card:hover .card-img {
    transform: scale(1.07);
}

.card-img-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 50%, rgba(0, 0, 0, 0.38) 100% );
}

.card-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.section-gold .card-badge {
    background: rgba(255, 215, 0, 0.22);
    border: 1px solid rgba(255, 215, 0, 0.35);
}

.section-silver .card-badge {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.card-body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.card-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.35;
}

.card-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.chip {
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.64rem;
    font-weight: 700;
}

.section-gold .chip {
    background: #fef3d0;
    color: #7a5c1e;
    border: 1px solid rgba(201, 147, 42, 0.2);
}

.section-silver .chip {
    background: var(--silver-soft);
    color: var(--silver);
    border: 1px solid rgba(110, 127, 141, 0.2);
}

.price-label {
    font-size: 0.6rem;
    color: var(--text-light);
    margin-bottom: 2px;
}

.card-price {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.section-gold .card-price {
    color: var(--gold);
}

.section-silver .card-price {
    color: var(--silver);
}

.price-unit {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-light);
    margin-right: 3px;
}

/* BUY BUTTON — بدون افکت سفید، با brightness */
.btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 4px;
    padding: 10px 0;
    border: none;
    border-radius: 11px;
    font-family: "shabnam", Tahoma, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    /* transition:
          transform 0.2s var(--ease-spring),
          filter 0.2s; */
}
    /* .btn-buy{
          display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--g700), var(--g500));
    color: #fff;
    font-weight: 900;
    font-size: .95rem;
    border: none;
    border-radius: var(--rl);
    cursor: pointer;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 6px 28px rgba(26, 84, 48, .4);
    } */

    .btn-buy:hover {
        filter: brightness(1.1);
        transform: translateY(-2px);
    }

    .btn-buy:active {
        transform: scale(0.96);
        filter: brightness(0.92);
    }

.section-gold .btn-buy {
    background: linear-gradient(135deg, var(--g700), var(--g500));
    color: #fff;
    box-shadow: 0 4px 14px rgba(7, 142, 7, 0.35);
}

.section-silver .btn-buy {
    background: linear-gradient( 135deg, var(--silver-light) 0%, var(--silver) 100% );
    color: #fff;
    box-shadow: 0 4px 14px rgba(110, 127, 141, 0.3);
}

/* DOTS */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.dot {
    height: 6px;
    width: 6px;
    border-radius: 99px;
    background: #d0c5a8;
    cursor: pointer;
    transition: width 0.3s, background 0.3s;
}

.section-gold .dot.active {
    width: 22px;
    background: var(--gold);
}

.section-silver .dot.active {
    width: 22px;
    background: var(--silver);
}

/* DIVIDER */
.divider {
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(201, 147, 42, 0.3), transparent );
    margin: 0 0 44px;
}

/* ===== PARTICLE CANVAS ===== */
#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}


.wrapper-i {
    position: relative;
    z-index: 1;
}







/* ============ INVESTMENT ============ */
.invest-sec {
    padding: 4rem 0;
    background: var(--bg);
    position: relative;
    overflow: hidden
}

.invest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center
}

@media(max-width:900px) {
    .invest-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }
}

.invest-visual-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--fg);
    line-height: 1.5;
    margin-bottom: .5rem
}

    .invest-visual-title span {
        color: var(--g700)
    }

.invest-visual-desc {
    font-size: 1rem;
    color: var(--fg1);
    line-height: 2;
    margin-bottom: 1.5rem
}

.invest-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.75rem;
    display: none;
}

.invest-feature {
    padding: .9rem 1rem;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(42,138,79,.15);
    border-radius: var(--rl);
    transition: all .35s var(--ease-spring);
    display: flex;
    align-items: center;
}

    .invest-feature:hover {
        background: rgba(42,138,79,.08);
        border-color: rgba(42,138,79,.3);
        transform: translateY(-3px)
    }

.invest-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(42,138,79,.15);
    border: 1px solid rgba(42,138,79,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .55rem
}

    .invest-feature-icon svg {
        width: 17px;
        height: 17px;
        color: var(--g600)
    }

.invest-feature h4 {
    font-size: .82rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: .2rem;
    margin-right: .3rem;
}

.invest-feature p {
    font-size: .72rem;
    color: var(--fg3);
    line-height: 1.7
}

.btn-invest-page {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg,var(--g700),var(--g500));
    color: #fff;
    font-weight: 900;
    font-size: .95rem;
    border: none;
    border-radius: var(--rl);
    cursor: pointer;
    font-family: inherit;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 6px 28px rgba(26,84,48,.4)
}

    .btn-invest-page:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 14px 44px rgba(26,84,48,.55);
        color: #fff;
    }

.invest-right-card {
    background-color: transparent;
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(42,138,79,.18)
}

    .invest-right-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(255,215,0,.1) 0%,transparent 70%);
        animation: goldGlow 5s ease-in-out infinite
    }

.invest-img-div {
    display: flex;
    justify-content: center;
}

    .invest-img-div img {
        width: 240px;
        height: 240px;
        margin-bottom: .3rem;
    }

@media(max-width:768px) {
    .invest-img-div img {
        width: 150px;
        height: 150px;
        margin-bottom: .3rem;
    }
}

.bank-building-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
    display: none;
}

.bank-anim-container {
    position: relative;
    animation: bankFloat 5s ease-in-out infinite
}

.bank-coins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 10
}

.invest-single-ingot {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
    display: none;
}

.ingot-anim-wrap {
    animation: ingotFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 12px 24px rgba(255,215,0,.45));
    position: relative
}

.invest-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2
}

.invest-stat {
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--green);
    border-radius: 12px;
    padding: .75rem .5rem;
    text-align: center;
    transition: all .3s
}

    .invest-stat:hover {
        background: rgba(255,215,0,.08);
        border-color: rgba(255,215,0,.2)
    }

.invest-stat-val {
    font-size: .95rem;
    font-weight: 900;
    color: #202020;
    display: block;
    margin-bottom: .15rem
}

.invest-stat-lbl {
    font-size: .58rem;
    color: #202020
}

.invest-fund-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.5);
    border-radius: var(--r);
    margin-bottom: .4rem;
    transition: all .3s;
    position: relative;
    z-index: 2
}

    .invest-fund-row:hover {
        background: rgba(255,255,255,.09)
    }

.invest-fund-row-label {
    font-size: .74rem;
    color: #202020
}

.invest-fund-row-val {
    font-size: .82rem;
    font-weight: 700;
    color: #202020
}

.invest-btns {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
    position: relative;
    z-index: 2
}

.btn-ol-dark {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem 1rem;
    border-radius: var(--rl);
    font-weight: 700;
    font-size: .85rem;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.7);
    border: 1.5px solid rgba(255,255,255,.18);
    cursor: pointer;
    transition: all .35s var(--ease-spring);
    white-space: nowrap;
    font-family: inherit
}

    .btn-ol-dark:hover {
        background: rgba(255,255,255,.14);
        color: #fff;
        transform: translateY(-2px)
    }



/* ============ FAQ ============ */
.faqlist {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.faqitem {
    overflow: hidden;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: var(--rxl);
    box-shadow: 0 4px 16px rgba(42,138,79,.05);
    transition: all .3s
}

    .faqitem:hover {
        border-color: rgba(42,138,79,.3);
        transform: translateY(-2px)
    }

.faqq {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    text-align: right;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--fg);
    font-weight: 600;
    font-size: .92rem;
    transition: color .3s
}

.faqitem:hover .faqq {
    color: var(--g700)
}

.faqq svg {
    flex-shrink: 0;
    margin-right: 1rem;
    color: var(--g500);
    transition: transform .3s
}

.faqa {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease
}

.faqitem.open .faqa {
    max-height: 200px
}

.faqitem.open .faqq svg {
    transform: rotate(180deg)
}

.faqa p {
    padding: 0 1.25rem 1.25rem;
    font-size: .83rem;
    color: var(--fg2);
    line-height: 1.85;
    text-align: right;
}



/* ============ COMPARE ============= */
.sec-compare {
    padding: 4rem 0;
    background: var(--bg)
}

.comparison-wrapper {
    background: var(--bg);
    width: 100%;
}

    .comparison-wrapper h2 {
        text-align: center;
        margin-bottom: 40px;
        color: #333;
    }


.comparison-table {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    position: relative;
}


.row-item {
    display: contents;
}

.comparison-wrapper .cell {
    padding: 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    min-height: 60px;
    z-index: 2;
}

.cell-confirm {
    padding: 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    z-index: 2;
}

.comparison-wrapper .label-cell {
    justify-content: flex-start;
    padding-right: 25px;
    font-weight: 500;
    color: #444;
}


.comparison-wrapper .middle-col {
    position: relative;
    font-weight: bold;
}


.comparison-table::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 0;
    left: 50%;
    transform: translateX(-95%);
    width: calc(25% + 20px);
    border: 2px solid var(--gold);
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(229, 198, 139, 0.5);
    z-index: 1;
    pointer-events: none;
}

.header-cell {
    font-weight: bold;
    color: #000;
    border-bottom: none;
    padding-bottom: 30px;
}


.comparison-wrapper .icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .comparison-wrapper .icon svg {
        width: 14px;
        height: 14px;
        fill: #fff;
    }

.bg-green {
    background-color: var(--green);
}

.bg-red {
    background-color: var(--red);
}


@media (max-width: 768px) {
    .comparison-table::before {
        display: none;
    }

    .comparison-table {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 20px 5px;
        scrollbar-width: none;
    }

        .comparison-table::-webkit-scrollbar {
            display: none;
        }


    .mobile-slide {
        flex: 0 0 85%;
        scroll-snap-align: center;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .compare-slide {
        border: 2px solid var(--gold);
        box-shadow: 0 10px 25px rgba(229, 198, 139, 0.3);
    }

    .slide-title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }

    .mobile-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f9f9f9;
    }

        .mobile-row:last-child {
            border-bottom: none;
        }

        .mobile-row .text {
            flex: 1;
            text-align: right;
            font-size: 14px;
        }

        .mobile-row .status {
            margin-left: 15px;
        }


    .row-item,
    .header-cell {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}



/* ============ BLOG - LIGHT ============ */
.blog-section {
    padding: 4rem 0;
    background: var(--bg);
    position: relative;
    overflow: hidden
}

    .blog-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 50% at 70% 30%,rgba(42,138,79,.05) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 20% 70%,rgba(230,184,0,.04) 0%,transparent 60%)
    }

.blog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 2
}

    .blog-header h2 {
        font-size: clamp(1.6rem,3vw,2rem);
        font-weight: 900;
        color: var(--fg);
        margin-bottom: .4rem
    }

        .blog-header h2 span {
            color: var(--g700)
        }

    .blog-header p {
        color: var(--fg3);
        font-size: .88rem
    }

.blog-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.4rem;
    background: rgba(42,138,79,.08);
    border: 1.5px solid rgba(42,138,79,.25);
    border-radius: 999px;
    color: var(--g600);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .35s var(--ease-spring);
    cursor: pointer
}

    .blog-view-all-btn:hover {
        background: rgba(42,138,79,.15);
        border-color: rgba(42,138,79,.5);
        transform: translateY(-2px) scale(1.03)
    }

.blgrid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

@media(max-width:900px) {
    .blgrid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:500px) {
    .blgrid {
        grid-template-columns: 1fr
    }
}
/* Light blog cards */
.blcard {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bdr);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    transition: all .4s var(--ease-spring);
    position: relative
}

    .blcard:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 60px rgba(0,0,0,.1),0 8px 24px rgba(42,138,79,.08);
        border-color: rgba(42,138,79,.2)
    }

.blimg {
    width: 100%;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 18px 18px 0 0
}

    .blimg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
        filter: brightness(.95)
    }

.blcard:hover .blimg img {
    transform: scale(1.08);
    filter: brightness(1)
}

.blimg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.2) 100%)
}

.blbadge {
    position: absolute;
    top: .85rem;
    right: .85rem;
    padding: .28rem .9rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    z-index: 2
}

    .blbadge.tag-news {
        background: rgba(26,84,48,.9);
        color: #fff
    }

    .blbadge.tag-edu {
        background: rgba(100,40,180,.9);
        color: #fff
    }

    .blbadge.tag-analysis {
        background: rgba(160,80,0,.9);
        color: #fff
    }

.blbody {
    padding: 1.4rem 1.5rem 1.6rem
}

    .blbody h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: .6rem;
        line-height: 1.6;
        color: var(--fg)
    }

    .blbody p {
        font-size: .8rem;
        color: var(--fg3);
        line-height: 1.9
    }

.bldate {
    font-size: .68rem;
    color: var(--fg4);
    margin-top: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem
}

    .bldate svg {
        color: var(--g500)
    }

.bl-read-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--g600);
    transition: all .35s;
    cursor: pointer
}

    .bl-read-more:hover {
        color: var(--g700);
        gap: .7rem
    }

/* ============ LICENSES ============ */
.license-sec {
    padding: 4rem 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--bdr)
}

.license-intro {
    max-width: 52rem;
    margin: 0 auto 2.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--rl);
    background: rgba(42,138,79,.06);
    border: 1px solid rgba(42,138,79,.15);
    font-size: .84rem;
    color: var(--fg3);
    line-height: 1.9;
    text-align: center
}

.licgrid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1rem
}

@media(max-width:768px) {
    .licgrid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:480px) {
    .licgrid {
        grid-template-columns: repeat(2,1fr)
    }
}

.licc {
    padding: 1.4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--bdr);
    border-radius: var(--rxl);
    transition: all .4s var(--ease-spring);
    box-shadow: var(--sh-sm)
}

    .licc:hover {
        transform: translateY(-6px);
        box-shadow: var(--sh-grn);
        border-color: rgba(42,138,79,.3)
    }

.lico {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--g100);
    border: 1px solid rgba(42,138,79,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--ease-spring)
}

.licc:hover .lico {
    transform: scale(1.12) rotate(-6deg);
    background: rgba(42,138,79,.15)
}

.lico svg {
    width: 24px;
    height: 24px
}

.licc span {
    font-size: .68rem;
    font-weight: 600;
    color: var(--fg2)
}

/* ============ REFERRAL ============ */
.refwrap {
    background: var(--g900);
    padding: 4rem 0
}

.refgrid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 60rem;
    margin: 0 auto;
    text-align: right;
}

@media(max-width:768px) {
    .refgrid {
        grid-template-columns: 1fr;
        gap: 2rem
    }
}

.reftxt h3 {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.5;
    color: #fff
}

    .reftxt h3 .gld {
        color: var(--gold-b)
    }

.reftxt p {
    font-size: .9rem;
    color: rgba(255,255,255,.8);
    line-height: 2;
    margin-bottom: 1.75rem
}

.btn-ref {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2.5rem;
    border-radius: var(--r);
    background: linear-gradient(135deg,var(--gold-n),var(--gold-n));
    color: var(--g950);
    font-weight: 900;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: all .35s var(--ease-spring);
    box-shadow: 0 4px 20px rgba(230,184,0,.4)
}

    .btn-ref:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 12px 36px rgba(230,184,0,.55)
    }

.refvis {
    display: flex;
    align-items: center;
    justify-content: center
}

.refring {
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 2px dashed rgba(230,184,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float 6s ease-in-out infinite;
    position: relative
}

.refinr {
    width: 172px;
    height: 172px;
    border-radius: 50%;
    background: rgba(20,61,34,.6);
    border: 1px solid rgba(230,184,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    backdrop-filter: blur(10px)
}

    .refinr svg {
        width: 46px;
        height: 46px
    }

    .refinr span {
        font-size: .7rem;
        color: var(--gold-b);
        font-weight: 700
    }

.rfl {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(13,43,24,.9);
    border: 1px solid rgba(230,184,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

.rf1 {
    color: white;
    top: -8px;
    left: 50%;
    animation: float 4s ease-in-out infinite
}

.rf2 {
    bottom: 8px;
    right: -12px;
    animation: float 5s ease-in-out 1s infinite
}

.rf3 {
    top: 38%;
    left: -18px;
    animation: float 4.5s ease-in-out .5s infinite
}

/* ============ FOOTER ============ */
.foot {
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--bdr);
    padding-top: 4rem;
    text-align: right;
}

.fgrid-ft {
    display: grid;
    grid-template-columns: 1.5fr 1fr 3fr;
    gap: 2rem;
    margin-bottom: 2.5rem
}

@media(max-width:900px) {
    .fgrid-ft {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .fgrid-ft {
        grid-template-columns: 1fr
    }
}
.certificates-items a {
    max-width: 70px;
    height: 70px;
    overflow: hidden;
    margin: 3px;
}
.fbrand .fn {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--g800);
    display: block;
    margin-bottom: .6rem
}

.fbrand p {
    font-size: .8rem;
    color: var(--fg3);
    line-height: 1.9;
    margin-bottom: 1rem
}

.slinks {
    display: flex;
    gap: .5rem
}

.slink {
    width: 2rem;
    height: 2rem;
    border-radius: var(--r);
    background: var(--g100);
    border: 1px solid rgba(42,138,79,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg3);
    font-size: .8rem;
    transition: all .35s var(--ease-spring)
}

    .slink:hover {
        color: var(--g700);
        border-color: rgba(42,138,79,.4);
        transform: translateY(-3px) scale(1.1)
    }

.fcol h4 {
    font-weight: 800;
    margin-bottom: .85rem;
    color: var(--fg);
    font-size: .88rem
}

.fcol ul {
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.fcol a {
    font-size: .8rem;
    color: var(--fg3);
    transition: all .3s
}

    .fcol a:hover {
        color: var(--g700);
        padding-right: .3rem
    }

.foot-lic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem
}

.foot-lic {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    background: var(--g100);
    border: 1px solid rgba(42,138,79,.2);
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 600;
    color: var(--g700);
    transition: all .3s
}

    .foot-lic:hover {
        background: rgba(42,138,79,.12);
        transform: translateY(-1px)
    }

    .foot-lic svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0
    }

.fconts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0;
    border-top: 1px solid var(--bdr)
}

.fcont {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--fg3)
}

    .fcont svg {
        color: var(--g500)
    }

.fbot {
    border-top: 1px solid var(--bdr);
    padding: 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
}

    .fbot p {
        font-size: .7rem;
        color: var(--fg4)
    }

/* Mobile nav */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px,85vw);
    height: 100vh;
    background: #fff;
    z-index: 200;
    box-shadow: -8px 0 30px rgba(0,0,0,.12);
    transition: right .35s var(--ease-out);
    overflow-y: auto;
    padding: 1.5rem 1.25rem 2rem;
    display: flex;
    flex-direction: column
}

    .mobile-nav.open {
        right: 0
    }

.mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem
}

.mnav-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    color: var(--fg);
    border-radius: 8px;
    transition: background .3s
}

    .mnav-close:hover {
        background: var(--g100)
    }

.mnav-links a {
    display: flex;
    align-items: center;
    padding: .85rem 1rem;
    border-radius: var(--r);
    font-size: .95rem;
    font-weight: 600;
    color: var(--fg2);
    transition: all .25s;
    border-bottom: 1px solid var(--bdr)
}

    .mnav-links a:hover {
        background: var(--g100);
        color: var(--g700);
        padding-right: 1.4rem
    }

.mnav-price {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    border-radius: var(--r);
    background: var(--g100);
    border: 1px solid rgba(42,138,79,.2);
    margin: 1.25rem 0
}

.mnav-cta {
    width: 100%;
    padding: .85rem;
    border-radius: var(--r);
    font-size: .9rem;
    font-weight: 700;
    background: var(--g700);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .3s;
    margin-top: auto;
    font-family: inherit;
    text-align: center;
}

.mnav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s
}

    .mnav-overlay.open {
        opacity: 1;
        pointer-events: all
    }

.price-flash {
    animation: priceFlash 1s ease-out
}

@media(max-width:768px) {
    .hero {
        padding: 6rem 0 0
    }

    .hero-in {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding-bottom: 3rem;
        min-height: auto;
        text-align: center
    }

    .hero h1 {
        text-align: center
    }

    .hbadge {
        margin: 0 auto 1.25rem
    }

    .hdesc {
        margin: 0 auto 1.5rem;
        max-width: 100%;
        text-align: center
    }

    .trow {
        justify-content: center
    }

    .ctaw {
        flex-direction: column;
        max-width: 100%;
        border-radius: var(--r)
    }

        .ctaw input {
            padding: .9rem 1.1rem;
            text-align: center
        }

    .btn-cta {
        width: 100%;
        padding: .9rem
    }

    .hstats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        padding-top: 1.5rem;
        margin-top: 1.5rem
    }

    .hst {
        text-align: center;
        flex: 1;
        min-width: 80px
    }

    .hstats-img {
        display: none;
    }

    .trade-cols {
        grid-template-columns: 1fr
    }

    .sec {
        padding: 3.5rem 0
    }

    .stitle {
        margin-bottom: 2rem
    }

    .invest-features {
        grid-template-columns: 1fr
    }

    .pgrid {
        grid-template-columns: 1fr 1fr
    }

    .process-cta-box {
        flex-direction: column
    }

    .fgrid-ft {
        grid-template-columns: 1fr
    }

    .wb-features-grid {
        grid-template-columns: 1fr
    }

    .install-benefits {
        grid-template-columns: 1fr
    }

    .shiraz-sec .grid-2 {
        grid-template-columns: 1fr
    }
}

@media(max-width:548px) {
    .ctaw {
        display: none;
    }

    .hstats {
        display: none;
    }
}

@media(max-width:400px) {
    .pgrid {
        grid-template-columns: 1fr !important
    }
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center
}

@media(max-width:900px) {
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }
}


@font-face {
    font-family: shabnam;
    font-style: normal;
    font-weight: normal;
    src: url('../landing/investing/fonts/shabnam/Shabnam-FD.eot');
    src: url('../landing/investing/fonts/shabnam/Shabnam-FD.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('../landing/investing/fonts/shabnam/Shabnam-FD.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('../landing/investing/fonts/shabnam/Shabnam-FD.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../landing/investing/fonts/shabnam/Shabnam-FD.ttf') format('truetype');
}

@font-face {
    font-family: shabnam;
    font-style: normal;
    font-weight: 200;
    src: url('../landing/investing/fonts/shabnam/Shabnam-Thin-FD.eot');
    src: url('../landing/investing/fonts/shabnam/Shabnam-Thin-FD.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('../landing/investing/fonts/shabnam/Shabnam-Thin-FD.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Thin-FD.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Thin-FD.ttf') format('truetype');
}

@font-face {
    font-family: shabnam;
    font-style: normal;
    font-weight: 400;
    src: url('../landing/investing/fonts/shabnam/Shabnam-Light-FD.eot');
    src: url('../landing/investing/fonts/shabnam/Shabnam-Light-FD.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('../landing/investing/fonts/shabnam/Shabnam-Light-FD.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Light-FD.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Light-FD.ttf') format('truetype');
}

@font-face {
    font-family: shabnam;
    font-style: normal;
    font-weight: 500;
    src: url('../landing/investing/fonts/shabnam/Shabnam-Medium-FD.eot');
    src: url('../landing/investing/fonts/shabnam/Shabnam-Medium-FD.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('../landing/investing/fonts/shabnam/Shabnam-Medium-FD.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Medium-FD.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Medium-FD.ttf') format('truetype');
}

@font-face {
    font-family: shabnam;
    font-style: normal;
    font-weight: bold;
    src: url('../landing/investing/fonts/shabnam/Shabnam-Bold-FD.eot');
    src: url('../landing/investing/fonts/shabnam/Shabnam-Bold-FD.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('../landing/investing/fonts/shabnam/Shabnam-Bold-FD.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Bold-FD.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../landing/investing/fonts/shabnam/Shabnam-Bold-FD.ttf') format('truetype');
}


:root {
    --theme-dark-color: #132E35;
    --theme-md-color: #132E35;
    --theme-light-color: #2D4A53;
    --main-color: #024442;
    --secondary-color: #244A53;
    --hover-color: #FFB300;
    --title-font: shabnam;
}

body {
    font-family: shabnam;
    color: #244a53;
}

.top-notif-header {
    display: none;
}

.mobile-header {
    display: none;
}


.pdl-0 {
    padding-left: 0px;
}

.pdr-0 {
    padding-right: 0px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sidebar-2 {
    display: none;
}

.footer-license-mobile {
    display: none
}

a:hover, a:focus {
    color: #000000;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.mb-100 {
    margin-bottom: 100px !important;
}

.investing-pages .container {
    max-width: 1200px;
}

.investing-pages .main-header {
    display: none;
}

.investing-pages footer.main-footer {
    display: none;
}

.investing-pages .header {
    box-shadow: 0 0 10px rgba(83, 4, 119, 0.2);
    border-bottom: 1px solid #ffffff1e;
    height: 60px;
    background-color: var(--theme-md-color);
    width: 100%;
}

.header__content {
    display: flex;
    justify-content: center;
    height: 60px;
    align-items: center;
    color: white;
    font-weight: 300;
    position: relative;
}

    .header__content .left-menu {
        left: 0;
        position: absolute;
        top: 18px;
    }

    .header__content .header-info .rate-price {
        color: #ffb300;
        font-weight: bold;
    }

    .header__content .left-menu a {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .header__content .left-menu a span {
            color: white;
            margin-right: 6px;
        }

        .header__content .left-menu a .link-title {
            border-bottom: 1px solid white;
        }

        .header__content .left-menu a:hover span, .header__content .left-menu a:hover svg path {
            color: #FFB300;
            fill: #FFB300;
        }

        .header__content .left-menu a:hover .link-title {
            border-color: #FFB300;
        }

    .header__content .header-name {
        text-decoration: underline;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

.landing-menu {
    margin: 50px auto 50px auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

    .landing-menu .main-menu ul {
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

        .landing-menu .main-menu ul li {
            margin: 4px;
            padding: 8px;
        }

            .landing-menu .main-menu ul li a {
                font-family: var(--title-font);
                font-weight: 400;
                color: black;
            }

            .landing-menu .main-menu ul li.active a {
                font-weight: bold;
                color: black;
                border-bottom: 2px solid var(--hover-color);
                padding: 6px 6px;
            }

            .landing-menu .main-menu ul li:hover:not(.active) {
                background-color: #f9af0324;
                border-radius: 6px;
            }

    .landing-menu .landing-logo {
        display: flex;
    }

        .landing-menu .landing-logo .logo--img {
            border-left: 3px solid #d7d7d7;
            padding-left: 10px;
            margin-left: 10px;
        }

        .landing-menu .landing-logo .logo--info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

            .landing-menu .landing-logo .logo--info .info--title {
                font-family: var(--title-font);
                color: black;
                font-weight: bold;
                font-size: 1.5rem;
            }

            .landing-menu .landing-logo .logo--info .info--sub-title {
                font-family: var(--title-font);
                font-size: 10px;
                color: black;
                font-weight: 500;
            }

    .landing-menu .landing-account-settings .user-profile-btn {
        background-color: var(--secondary-color);
        display: flex;
        color: white;
        padding: 5px 20px;
        border-radius: 15px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        background: rgb(45,74,83);
        background: linear-gradient(180deg, rgba(45,74,83,1) 0%, rgba(103,129,137,1) 70%, rgba(161,177,183,1) 100%);
        width: 200px;
    }

        .landing-menu .landing-account-settings .user-profile-btn .user-name {
            margin-left: 10px;
            margin-right: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            width: 95px;
            direction: ltr;
        }

.dropdown-menu {
    width: 200px;
    border-radius: 10px;
    border: 1px solid #132e358c;
    margin-top: 6px;
}

    .dropdown-menu .dropdown-inner {
        padding: 10px 15px;
        font-size: 14px;
        color: #0D0E0F;
    }

        .dropdown-menu .dropdown-inner .dropdown-link {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #dddddd;
            padding-bottom: 10px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #0D0E0F;
        }

            .dropdown-menu .dropdown-inner .dropdown-link:hover {
                color: #4d6a70;
            }

        .dropdown-menu .dropdown-inner .dropdown-link-red {
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #dddddd;
            padding-top: 15px;
            margin-top: 10px;
            color: red;
            align-content: center;
            align-items: center;
        }

        .dropdown-menu .dropdown-inner .dropdown-inner--row {
            margin-bottom: 15px;
        }

            .dropdown-menu .dropdown-inner .dropdown-inner--row .row-title {
                text-align: right;
            }

            .dropdown-menu .dropdown-inner .dropdown-inner--row .row-info {
                display: flex;
                justify-content: space-between;
                padding: 5px 0px;
            }

            .dropdown-menu .dropdown-inner .dropdown-inner--row .row-info-value {
                color: black;
                font-weight: bold;
            }

            .dropdown-menu .dropdown-inner .dropdown-inner--row .row-info-value-prefix {
            }

            .dropdown-menu .dropdown-inner .dropdown-inner--row .info-text-banners {
                margin-top: 50px;
            }

.landing-account-settings .dropdown-toggle::after {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    border: none;
    margin: 0px;
    font-size: 28px;
    width: auto;
    height: auto;
}

.landing-account-settings .dropdown-menu:before {
    opacity: 0;
}

.info-text-banners .text-banner-item {
    border: 1px solid #cbcbcb;
    border-radius: 20px;
    padding: 30px;
    margin: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

    .info-text-banners .text-banner-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #ffffff, #ffffff);
        transition: opacity 0.5s ease-in;
        z-index: -2;
    }

    .info-text-banners .text-banner-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #244a53, #819498);
        opacity: 0;
        transition: opacity .5s ease-in;
        z-index: -1;
    }

    .info-text-banners .text-banner-item:hover::after {
        opacity: 1;
    }
    /*    .info-text-banners .text-banner-item:hover {
        background-image: linear-gradient(to bottom, #244a53, #819498);
        transition: background-image 1s ease-in;
    }*/

    .info-text-banners .text-banner-item:hover,
    .info-text-banners .text-banner-item:hover .item--title,
    .info-text-banners .text-banner-item:hover .item--detail {
        color: white;
    }

    .info-text-banners .text-banner-item .item--icon {
    }

        .info-text-banners .text-banner-item .item--icon img {
            max-width: 64px;
        }

    .info-text-banners .text-banner-item .item--title {
        font-family: var(--title-font);
        font-weight: 500;
        color: black;
        margin-top: 20px;
        font-size: 20px;
    }

    .info-text-banners .text-banner-item .item--detail {
        padding-top: 20px;
        min-height: 90px;
        color: #5A636A;
        font-size: 16px;
        font-weight: 300;
        height: 55px;
        overflow: hidden;
    }

.investing-layout-main {
    min-height: 500px;
}

.investing-footer {
    background-color: #C7DBE1;
    margin-top: 100px;
}

.footer-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #c0c2c2;
    padding: 40px 0px 15px 0px;
    margin-bottom: 40px;
}

.footer-bar--logo {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .footer-bar--logo .logo--info {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        margin-right: 15px;
    }

        .footer-bar--logo .logo--info .info--title {
            font-family: var(--title-font);
            color: black;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .footer-bar--logo .logo--info .info--sub-title {
            font-family: var(--title-font);
            font-size: 10px;
            color: black;
            margin-right: 4px;
            font-weight: bold;
        }

.footer-copyright {
    text-align: center;
    padding: 50px 0px 30px 0px;
}

    .footer-copyright .footer-copyright--contact {
        font-size: 15px;
        color: #132E35;
    }

        .footer-copyright .footer-copyright--contact .ph-div {
            margin: 0px 4px 0px 4px;
        }

        .footer-copyright .footer-copyright--contact .ph-number {
            margin: 0px 4px 0px 4px;
            font-weight: bold;
            font-size: 15px;
        }

.footer-detail .info-about {
}

    .footer-detail .info-about .info-about-title {
        font-family: var(--title-font);
        color: #0D0E0F;
        font-weight: bold;
        margin-bottom: 20px;
        font-size: 16px;
    }

    .footer-detail .info-about .info-about-sub-title {
        color: #0D0E0F;
        font-weight: 400;
        font-size: 16px;
    }

    .footer-detail .info-about .info-about-address {
        margin-top: 70px;
        color: #5A636A;
        font-weight: 400;
        font-size: 15px;
    }

.footer-links ul {
    text-align: center;
    display: flex;
    flex-direction: column;
}

    .footer-links ul li {
        margin-bottom: 20px;
    }

        .footer-links ul li a {
            font-size: 16px;
            color: #0D0E0F;
            font-weight: 400;
        }

        .footer-links ul li:hover a {
            color: #ffb300;
        }

.investing-page-content {
    margin: 50px auto 50px auto;
}

.investing-action-sidebar {
    position: sticky;
    top: 0px;
}

    .investing-action-sidebar .sidebar-content {
        background: var(--g700);
        color: white;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 1px 1px 1px 1px gray;
        padding: 30px 18px;
        box-shadow: 0px 0px 18px 1px #727272;
    }

        .investing-action-sidebar .sidebar-content ul {
        }

            .investing-action-sidebar .sidebar-content ul li {
                margin-bottom: 26px;
                padding: 8px 10px;
                border-radius: 10px;
            }

                .investing-action-sidebar .sidebar-content ul li.active {
  
                    background-color: var(--gold-n);
                }

                .investing-action-sidebar .sidebar-content ul li:hover:not(.active) {
                    background-color: #6C6B3B;
                }

                .investing-action-sidebar .sidebar-content ul li.active a {
                    color: #0D0E0F;
                    font-weight: 500;
                    font-size: 16px;
                }

                .investing-action-sidebar .sidebar-content ul li:hover:not(.active) a {
                    color: white;
                }

                .investing-action-sidebar .sidebar-content ul li.active a svg path {
                    fill: black;
                }

                .investing-action-sidebar .sidebar-content ul li:hover:not(.active) a svg path {
                    fill: white;
                }

                .investing-action-sidebar .sidebar-content ul li.investing-plan-menu.active a svg path {
                    fill: black;
                    stroke: black
                }

                .investing-action-sidebar .sidebar-content ul li.investing-plan-menu:hover a svg path {
                    fill: white;
                    stroke: #ffffff;
                }


                .investing-action-sidebar .sidebar-content ul li a {
                    color: white;
                    font-family: var(--title-font);
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    font-weight: 400;
                    font-size: 16px;
                }

                    .investing-action-sidebar .sidebar-content ul li a .item-icon {
                        margin-left: 12px;
                    }

.investing-form {
    height: 100%;
    padding: 30px 60px;
    box-shadow: 0px 0px 14px -3px #727272;
    border-radius: 30px;
    padding-top: 100px;
}

.dashboard-page {
    padding: 30px 60px;
}

.dashboard-info {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 35px;
}

    .dashboard-info .dash-credit {
    }

    .dashboard-info .dash-credit--title {
        font-family: var(--title-font);
        color: #132E35;
        font-weight: bold;
        font-size: 22px;
        margin-bottom: 20px;
    }

    .dashboard-info .dash-credit--content {
    }

        .dashboard-info .dash-credit--content .credit-value {
            background-color: #1a5430;
            color: white;
            padding: 5px 25px;
            border-radius: 20px;
            margin-left: 12px;
            font-weight: bold;
            font-size: 24px;
        }

        .dashboard-info .dash-credit--content .value-label {
            font-weight: 500;
            font-size: 20px;
        }

    .dashboard-info .dash-total {
        border: 2px solid #ffb300;
        border-radius: 20px;
        padding: 20px 30px;
    }

    .dashboard-info .dash-total--title {
        font-family: var(--title-font);
        margin-bottom: 20px;
        color: #132E35;
        font-weight: bold;
        font-size: 22px;
    }

    .dashboard-info .dash-total--content {
    }

        .dashboard-info .dash-total--content .total-value {
            font-family: var(--title-font);
            color: #244a53;
            font-weight: bold;
            font-size: 24px;
        }

        .dashboard-info .dash-total--content .value-label {
            font-weight: 500;
            font-size: 20px;
        }

.dash-row-info {
    margin-top: 40px;
}

    .dash-row-info .row-content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-bottom: 20px;
    }

        .dash-row-info .row-content .row-info-title {
            font-family: var(--title-font);
            color: black;
        }

            .dash-row-info .row-content .row-info-title .info-icon svg {
                max-width: 26px;
            }

            .dash-row-info .row-content .row-info-title .info-title {
                color: #0D0E0F;
                font-size: 16px;
                font-weight: 400;
            }


        .dash-row-info .row-content .row-info-value {
        }

            .dash-row-info .row-content .row-info-value .info-title {
                font-family: var(--title-font);
                color: #0D0E0F;
                font-weight: bold;
                font-size: 20px;
            }

            .dash-row-info .row-content .row-info-value .info-dub-title {
                margin-right: 15px;
                font-size: 15px;
                color: #5A636A;
                font-weight: 500;
            }

.empty-list {
    margin-top: 70px;
    text-align: center;
}

    .empty-list .empty-list--icon {
    }

    .empty-list .empty-list--title {
        font-family: var(--title-font);
        font-weight: bold;
        margin: 15px;
    }

    .empty-list .empty-list--detail {
        margin-bottom: 40px;
    }

.btn-cta-1 {
    background-color: var(--secondary-color);
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px 20px;
    min-width: 120px;
}

    .btn-cta-1:hover {
        background-color: var(--main-color);
    }

.form-content .control-label {
    display: flex;
    align-items: center;
    height: 100%;
    font-family: var(--title-font);
    color: #0D0E0F;
    font-weight: 500;
    font-size: 18px;
}

    .form-content .control-label span {
        font-weight: normal;
        color: #515151;
        margin-right: 4px;
        font-size: 12px;
    }

    .form-content .control-label img {
        margin-left: 12px;
    }

.form-content .form-info-title {
    text-align: center;
}

    .form-content .form-info-title .icon {
        margin-bottom: 10px;
    }

    .form-content .form-info-title h3 {
        font-family: var(--title-font);
        font-size: 16px;
        font-weight: bold;
    }

.form-content .form-content--row {
    margin-bottom: 15px;
    position: relative;
}

.form-content .form-detail {
    text-align: center;
    padding: 20px 50px;
    border-top: 1px solid #e0e0e0;
    margin-top: 30px;
}

.form-content .form-control {
    font-size: 15px;
    border: 2px solid #244a53;
    border-radius: 10px;
    height: 50px;
    color: #244a53;
    font-weight: 500;
}

.form-content .form-btn {
    text-align: center;
}

.form-content .gold-color .form-control {
    border: 2px solid #ffb300;
    color: black;
    font-weight: bold;
    text-shadow: 1px 1px 0px #ffb300;
}

.form-content .gold-color input::placeholder {
    text-shadow: none;
    color: #ffb300;
}

.form-content input::placeholder {
    text-shadow: none;
    color: #244a53;
}

.sub-info-left {
    text-align: left;
    color: black;
    padding-left: 15px;
}

.form-content .back-button {
    text-align: left;
    padding-left: 15px;
    font-weight: bold;
    position: relative;
    top: -20px;
}

.form-content hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.form-content .bold-select select {
    font-family: var(--title-font);
    color: black;
    font-size: 15px;
    padding: 10px;
    width: 95%;
    height: 53px;
    border-radius: 6px;
}

.form-content .alert-1 {
    font-size: 14px;
    color: #5A636A;
    position: absolute;
    width: 88%;
    padding-top: 10px;
}

.form-content .form-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 25px 0px;
}

    .form-content .form-info .form-info--title {
        font-family: var(--title-font);
        color: black;
        font-weight: bold;
    }

    .form-content .form-info .form-info--value {
        /*        padding-left: 20px;*/
    }

        .form-content .form-info .form-info--value .prefix {
            margin-right: 6px;
            font-weight: 500;
            font-size: 16px;
        }

        .form-content .form-info .form-info--value .price-info {
            font-family: var(--title-font);
            color: #000000;
            font-weight: bold;
            font-size: 22px;
            text-shadow: 1px 1px 2px #f7ae00;
        }

        .form-content .form-info .form-info--value .price-info-highlight {
            font-family: var(--title-font);
            color: white;
            font-weight: bold;
            font-size: 18px;
            background-color: #244a53;
            border-radius: 25px;
            padding: 3px 17px;
        }

.btn-cta-2, .btn-cta-2:active, .btn-cta-2:focus {
    background-color: var(--hover-color);
    color: black !important;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    overflow: hidden;
}

    .btn-cta-2:hover {
        background-color: #cd9000;
        color: black;
    }

    .btn-cta-2[disabled] {
        background-color: #c39f4a;
        cursor: no-drop
    }

        .btn-cta-2[disabled]:hover {
            color: #e7e7e7 !important;
        }

.bank-accounts--list {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

    .bank-accounts--list li {
        border: 1px solid gray;
        border-radius: 6px;
        margin: 10px;
        padding: 15px;
        min-width: 200px;
        align-items: center;
    }

        .bank-accounts--list li:hover {
            background-color: #ebebeb;
        }

        .bank-accounts--list li .card-name {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: bold;
            color: #0D0E0F;
        }


        .bank-accounts--list li .bank-no {
            text-align: center;
            direction: ltr;
        }

.delete-form .btn-delete {
    border: none;
    background: none;
}

.inner-page-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    margin-bottom: 25px;
}

    .inner-page-title .icon {
        margin-left: 10px;
    }

    .inner-page-title .content {
        font-family: var(--title-font);
        color: black;
        font-weight: bold;
        font-size: 15px;
    }

.modal.preview-form {
    top: 8%;
}

.preview-form .modal-content {
    border-radius: 15px;
    overflow: hidden;
}

    .preview-form .modal-content .modal-header {
        background-color: var(--secondary-color);
    }

        .preview-form .modal-content .modal-header h5,
        .preview-form .modal-content .modal-header button {
            color: white !important;
            font-weight: 500;
        }

.preview-form .preview-form--title {
    background-color: var(--main-color);
    background-color: var(--secondary-color);
    padding: 15px;
    color: white;
    font-family: var(--title-font);
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

.preview-form .preview-form--price {
}

    .preview-form .preview-form--price .action-title {
        font-family: var(--title-font);
        color: #0D0E0F;
        font-size: 18px;
        font-weight: 400;
    }

    .preview-form .preview-form--price .action-value {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .preview-form .preview-form--price .action-value-price {
        font-family: var(--title-font);
        color: #f7ae00;
        font-size: 24px;
        font-weight: bold;
    }

    .preview-form .preview-form--price .action-subTitle {
        margin-right: 6px;
        color: #5A636A;
        font-weight: 500;
        font-size: 16px;
    }

.preview-form .preview-form--tips {
    background-color: #cdcdcd;
    border-radius: 8px;
    margin: 30px 0px;
    text-align: right;
    padding: 20px 30px;
}

    .preview-form .preview-form--tips ul {
    }

        .preview-form .preview-form--tips ul li {
            list-style: disc;
            margin-bottom: 5px;
            font-size: 12px;
        }

.preview-form--btn .btn {
    width: 100%;
    max-width: 500px;
}

.preview-form .preview-form--content {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preview-form--bankNames {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    justify-content: space-between;
}

    .preview-form--bankNames .customer-bank {
        border: 1px solid #244a53;
        border-radius: 8px;
        width: 150px;
        height: 97px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #0D0E0F;
        font-weight: 500;
    }

        .preview-form--bankNames .customer-bank .bank-icon {
        }

        .preview-form--bankNames .customer-bank .bank-title {
        }

        .preview-form--bankNames .customer-bank .card-number {
            direction: ltr;
        }


.error-form {
    height: 100%;
    box-shadow: 0px 0px 14px -3px #727272;
    border-radius: 15px;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

    .error-form .error-form--title {
        background-color: #EF0F0F;
        padding: 15px;
        color: white;
        font-family: var(--title-font);
        font-weight: bold;
        font-size: 16px;
        text-align: center;
    }

    .error-form .error-form--content {
        padding: 20px;
    }

    .error-form .error-detail--title {
        font-family: var(--title-font);
        text-align: center;
        font-weight: bold;
        margin-bottom: 20px;
        color: #ef0f0f;
    }

    .error-form .error-detail--subtitle ul li {
        border-bottom: 1px solid #e8e8e8;
        padding: 15px 0px;
    }

.success-windows {
    height: 100%;
    box-shadow: 0px 0px 14px -3px #727272;
    border-radius: 15px;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

    .success-windows .success-windows--title {
        background-color: #10911F;
        padding: 15px;
        color: white;
        font-family: var(--title-font);
        font-weight: bold;
        font-size: 16px;
        text-align: center;
    }

    .success-windows .success-windows--content {
        padding: 30px 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .success-windows .success-windows--price .action-title {
        font-family: var(--title-font);
        color: black;
        font-size: 20px;
        margin-bottom: 11px;
    }

    .success-windows .success-windows--price .action-value {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .success-windows .success-windows--price .action-value-price {
        font-family: var(--title-font);
        color: #10911f;
        font-size: 22px;
        font-weight: bold;
    }

    .success-windows .success-windows--price .action-subTitle {
        margin-right: 6px;
    }

.list-info {
    margin-top: 10px;
}

    .list-info ul li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: auto;
        border-bottom: 1px solid #c6c6c6;
        padding: 15px 5px;
    }

        .list-info ul li .info-title {
            font-weight: 500;
            color: #0D0E0F;
        }

        .list-info ul li .info-value {
            font-size: 15px;
            font-weight: 500;
        }

        .list-info ul li:last-child {
            border: none;
        }

.list ul li .info-title {
}

.list ul li .info-value {
}

.gold-bold-color {
    color: #f7ae00 !important;
    font-weight: bold;
}

.info-highlight {
    background-color: #FFF4D9;
    max-width: 450px;
    margin: auto;
    width: 100%;
    border-radius: 12px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    min-height: 50px;
    padding: 5px 15px;
    align-items: center;
}

    .info-highlight .highlight-title {
        font-family: var(--title-font);
        font-weight: 500;
        color: #0D0E0F;
    }

.bold-price-gold {
    color: #f7ae00 !important;
    font-weight: bold;
    font-size: 20px;
    font-family: var(--title-font);
}

.bold-price {
    font-weight: 900;
    font-size: 17px;
    font-family: var(--title-font);
    color: #244a53;
}

.price-prefix {
    margin-right: 6px;
    font-weight: 400;
    color: #5A636A;
}

.radio-list {
    padding: 0px 12px;
    margin-top: 20px;
}

    .radio-list .radio-list--title {
        font-family: var(--title-font);
        color: black;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .radio-list .radio-list--sub-title {
        font-size: 12px;
        color: gray;
    }

.radio-list--options {
    margin-top: 15px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .radio-list--options .r-btn {
        border: 1px solid gray;
        border-radius: 6px;
        padding: 4px;
        margin: 3px;
        font-weight: 500;
    }

    .radio-list--options label {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

.r-btn input[type="radio"]:checked + label {
    color: white;
    background-color: #244a53;
    border-radius: 4px;
}

.r-btn input[type="radio"] {
    opacity: 0.011;
    z-index: 100;
}

.r-btn label,
.r-btn input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.r-btn {
    margin: 0 5px 0 0;
    width: 100px;
    height: 40px;
    position: relative;
}

.old-price-info {
    font-family: var(--title-font);
    color: #244a53;
    font-weight: bold;
    font-size: 15px;
    text-decoration: line-through;
}

.buy-plan-form .old-price-info {
    margin-right: 20px;
    margin-bottom: 15px;
    position: relative;
    bottom: 6px;
}

.info-row-1 {
    display: flex;
    justify-content: space-between;
    background-color: #D5DBDD;
    margin: auto;
    margin-bottom: 40px;
    padding: 15px 15px;
    border-radius: 8px;
    margin-left: 15px;
}

    .info-row-1 .info-title {
        font-family: var(--title-font);
        font-weight: bold;
        color: black;
    }

    .info-row-1 .info-value .price-info {
        color: #244a53;
        font-size: 16px;
        font-family: var(--title-font);
        font-weight: bold;
    }

.gray-label {
    width: 120px;
    height: 60px;
    background-color: #D5DBDD;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px;
}

    .gray-label .label-title {
        font-family: var(--title-font);
        color: #244a53;
        font-size: 13px;
    }

    .gray-label .label-value {
        font-family: var(--title-font);
        font-weight: bold;
        font-size: 16px;
        color: #244a53;
    }

.preview-header {
    display: flex;
    justify-content: space-between;
}

.buy-gold-plan-preview-form .list-info ul li {
}

.top-form-header {
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
    top: 8px;
    text-align: center;
}

    .top-form-header .h-content {
        background-color: #ffb300;
        font-size: 14px;
        padding: 10px 40px;
        height: 20px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        color: #2f2f2f;
        font-weight: 400;
    }

        .top-form-header .h-content span {
            font-weight: bold;
            color: black;
        }

.inner-tab-link {
}

    .inner-tab-link a {
        color: red;
    }

    .inner-tab-link ul {
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        border: 1px solid gray;
        max-width: 100%;
        margin: auto;
        margin-bottom: 60px;
        border-radius: 20px;
        padding: 0px;
        height: 48px;
        overflow: hidden;
    }

        .inner-tab-link ul li {
            display: block;
            width: 50%;
            height: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            color: black;
            border-radius: 20px;
        }

            .inner-tab-link ul li.active {
                background-color: #1a5430;
                color: white;
            }

                .inner-tab-link ul li.active a {
                    color: white;
                }

            .inner-tab-link ul li a {
                font-family: var(--title-font);
                color: inherit;
                color: #244a53;
                font-weight: 500;
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

.bank-name-icon {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

    .bank-name-icon .bankName {
        font-weight: bold;
    }

    .bank-name-icon .bankIcon {
        margin-left: 10px;
    }

.bankNameFinder, .ibanNumber {
    direction: ltr;
    text-align: center;
}

.investing-pages .form-content .ValidInput {
    border: 2px dashed green !important;
    box-shadow: 0px 0px 11px -3px green !important;
}

.investing-pages .form-content .notValid {
    border: 2px dashed red !important;
    box-shadow: 0px 0px 11px -3px red !important;
}

.select_wrap {
    max-width: 400px;
    position: relative;
    user-select: none;
}

    .select_wrap select {
        position: absolute;
        width: 0px !important;
        height: 0px !important;
        opacity: 0;
    }

    .select_wrap .default_option {
        background: #fff;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
        border: 1px solid #244a53;
        margin: 0px;
        color: #244a53;
        padding-left: 30px;
    }

        .select_wrap .default_option li {
            padding: 10px 20px;
        }

        .select_wrap .default_option:before {
            content: "";
            position: absolute;
            top: 14px;
            left: 18px;
            width: 24px;
            height: 24px;
            background-image: url(../landing/investing/images/icons/down.svg);
            background-repeat: no-repeat;
            // transform: translateY(-50%);
            transition: 0.2s ease;
            opacity: 0.3;
        }

    .select_wrap .select_ul {
        position: absolute;
        top: 55px;
        left: 0;
        width: 100%;
        background: #fff;
        border-radius: 5px;
        display: none;
        box-shadow: 0px 1px 11px -1px gray;
        z-index: 99;
    }

        .select_wrap .select_ul li {
            padding: 10px 20px;
            cursor: pointer;
        }

            .select_wrap .select_ul li:first-child:hover {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            .select_wrap .select_ul li:last-child:hover {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }

            .select_wrap .select_ul li:hover {
                background: #fff4dd;
            }

    .select_wrap .option {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .select_wrap .option .icon {
            width: 32px;
            height: 32px;
        }

        .select_wrap .option span {
            margin-left: 10px;
            direction: ltr;
            font-size: 12px;
            font-weight: bold;
        }

    .select_wrap.active .select_ul {
        display: block;
    }

    .select_wrap.active .default_option:before {
        transform: rotate(180deg);
    }

.form-content .input-error {
    border: 2px dashed red;
}

.input-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

    .input-container .input-control {
        width: 100%;
    }

    .input-container .input-postfix {
        margin-right: 10px;
        font-weight: bold;
    }

.wallet-deposit-form {
}

    .wallet-deposit-form .form-content--row {
        margin-bottom: 35px;
    }

.sub-info-left--content {
    text-align: left;
    width: 100%;
    display: block;
    bottom: -25px;
    position: absolute;
    color: #132E35;
    font-weight: 500;
}

.sub-info-left-price-1 {
    text-align: right;
    width: 100%;
    display: block;
    bottom: -28px;
    position: absolute;
    color: #132E35;
    font-weight: 400;
    padding-right: 6px;
}

.numeric {
    text-align: center !important;
    direction: ltr !important;
}

.text-yellow-shadow {
    font-family: var(--title-font);
    font-weight: bold;
    font-size: 22px;
    color: #FFB300 !important;
    /* text-shadow: 1px 1px 2px #f7ae00;*/
}

.field-validation-error2 {
    width: 100%;
    text-align: center;
    display: block;
    color: red;
    padding-top: 8px;
}

.table-list {
}

    .table-list table thead tr {
        border-bottom: 1px solid gray;
    }

        .table-list table thead tr th {
            text-align: center;
            color: black;
            padding-bottom: 15px;
        }

    .table-list table tbody tr:hover {
        background-color: #2a4f5717;
    }

    .table-list table tbody tr:first-child {
    }

    .table-list table tbody tr td {
        text-align: center;
        padding: 15px 1px;
        color: #0D0E0F;
        font-weight: 400;
        border-bottom: 5px solid #ffffff;
    }

    .table-list .price-td {
        color: black;
        font-weight: bold;
    }

        .table-list .price-td .sub-title {
            color: gray;
            font-size: 11px;
        }

    .table-list .gold-td {
        color: black;
    }

        .table-list .gold-td .g-title {
            min-width: 26px;
            display: inline-block;
            color: #FFB300;
            color: #000000;
            font-weight: 500;
        }

        .table-list .gold-td .sub-title {
            color: #ffb300;
            color: #505050;
            font-size: 11px;
            font-weight: bold;
        }

    .table-list .payment-status-Pending,
    .table-list .payment-status-Failure {
        color: red;
    }

    .table-list .payment-status-Success {
        color: green;
    }

    .table-list .payment-status-Pending .icon,
    .table-list .payment-status-Failure .icon {
        position: relative;
        top: -1px;
    }

    .table-list .payment-status-Success .icon {
        position: relative;
        top: -2px;
    }

.customer-report .table-list .buy td {
    background-color: #00968880;
}

.customer-report .table-list .sale td {
    background-color: #cee6f9;
}

.tr-st-Pending td, .tr-st-Failure td {
}

    .tr-st-Pending td:first-child, .tr-st-Failure td:first-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }


    .tr-st-Pending td:last-child, .tr-st-Failure td:last-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

.table-list .list-month {
    min-width: 80px;
}

.buy-gold-page .form-input-info-right {
    text-align: right;
    position: absolute;
    top: auto;
    bottom: -30px;
}

    .buy-gold-page .form-input-info-right .gold-color {
        color: #000000;
        font-weight: bold;
        font-size: 16px;
        text-shadow: 1px 1px 2px #f7ae00;
    }

.buy-gold-page .form-input-info-left {
    text-align: left;
    position: relative;
}

    .buy-gold-page .form-input-info-left .inline-btn {
        position: absolute;
        width: 140px;
        left: 0px;
        top: 10px;
        border-radius: 4px;
    }

.inline-btn {
    background-color: #CDCDCD;
    border: none;
    color: #284d56;
    font-size: 12px;
    padding: 5px 10px;
}

    .inline-btn:hover {
        background-color: #a8a6a6;
    }


.modal.success-modal-windows {
    top: 8%;
}

    .modal.success-modal-windows .modal-content {
        border-radius: 15px;
        overflow: hidden;
    }

        .modal.success-modal-windows .modal-content .modal-header {
            background-color: #10911F;
            justify-content: center;
        }

            .modal.success-modal-windows .modal-content .modal-header h5,
            .modal.success-modal-windows .modal-content .modal-header button {
                color: white
            }

.success-modal-windows .success-modal-windows--title {
    background-color: var(--main-color);
    background-color: var(--secondary-color);
    padding: 15px;
    color: white;
    font-family: var(--title-font);
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}


.success-modal-windows .success-modal-windows--price .action-title {
    font-family: var(--title-font);
    color: var(--secondary-color);
    font-size: 20px;
}

.success-modal-windows .success-modal-windows--price .action-value {
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-modal-windows .success-modal-windows--price .action-value-price {
    font-family: var(--title-font);
    color: #10911f;
    font-size: 20px;
    font-weight: bold;
}

.success-modal-windows .success-modal-windows--price .action-subTitle {
    margin-right: 6px;
}

.success-modal-windows .success-modal-windows--tips {
    background-color: #cdcdcd;
    border-radius: 8px;
    margin: 30px 0px;
    text-align: right;
    padding: 20px 30px;
}

    .success-modal-windows .success-modal-windows--tips ul {
    }

        .success-modal-windows .success-modal-windows--tips ul li {
            list-style: disc;
            margin-bottom: 5px;
            font-size: 12px;
        }

.success-modal-windows--btn .btn {
    width: 100%;
    max-width: 500px;
}

.success-modal-windows .success-modal-windows--content {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.success-modal-windows--bankNames {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

    .success-modal-windows--bankNames .customer-bank {
        border: 1px solid #244a53;
        border-radius: 8px;
        width: 150px;
        height: 97px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.success-modal-windows--content .list-info ul li .info-title {
    font-weight: normal;
}

.modal-header {
    justify-content: center;
}

.wallet-withdraw-page .form-input-info-right {
    text-align: right;
    font-size: 12px;
    position: relative;
    top: 5px;
    padding-right: 0;
}

    .wallet-withdraw-page .form-input-info-right .price-color {
        color: #000000;
        font-weight: bold;
        font-size: 16px;
        text-shadow: 1px 1px 2px #f7ae00;
    }

.wallet-withdraw-page .form-input-info-left {
    text-align: left;
    position: relative;
}

    .wallet-withdraw-page .form-input-info-left .inline-btn {
        position: absolute;
        width: 140px;
        left: 0px;
        top: 10px;
        border-radius: 4px;
        color: #132E35;
        font-size: 13px;
    }

.wallet-withdraw-page .form-content--row.bold-select {
    margin-top: 80px;
}

.result-loader {
    text-align: center;
    min-height: 350px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.table-icon {
    background: no-repeat;
    border: none;
    width: 24px;
    height: 24px;
}

.receipt-windows .list-info ul li .info-title {
    font-weight: normal;
}

.receipt-windows .time {
    color: gray;
    font-size: 12px;
}

.btn-cta-3 {
    color: var(--main-color) !important;
    border: 1px solid #a8a8a8;
    display: block;
    border-radius: 8px;
    padding: 6px;
}

    .btn-cta-3:hover {
        background-color: #024442;
        color: white !important;
    }

        .btn-cta-3:hover svg path {
            fill: white;
        }

.payment-status-Success {
    color: green
}

.payment-status-Pending,
.payment-status-Failure {
    color: red;
}

.receipt-windows .list-info {
    margin-top: 40px;
}

.data-table .td-buttons a {
    margin-left: 10px
}

.buy-sale-receipt .list-info {
    margin-top: 0px;
}

.receipt-windows .payment-status-Success .icon {
    position: relative;
    top: 0px;
}

.receipt-windows .payment-status-Pending .icon,
.receipt-windows .payment-status-Rejected .icon {
    position: relative;
    top: -2px;
}

.font-body-m {
    font-weight: 400;
    font-size: 16px;
}

.font-body-l {
    font-weight: 300;
    font-size: 17px;
}

.font-button-l {
    font-weight: 400;
    font-size: 16px;
}

.font-overline-l {
    font-weight: 500;
    font-size: 14px;
}

.error-info {
    color: red;
    font-weight: bold;
    text-shadow: 0px 0px 0px #980000;
    display: block;
    height: 22px;
    margin-top: 25px;
}

    .error-info strong {
        border-bottom: 1px solid black;
    }

#gateway-required-hint .error-info {
    margin-top: 0px;
    height: auto
}

.sub-info-left-btn {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    bottom: -40px;
}

    .sub-info-left-btn .inline-btn {
        border-radius: 4px;
        color: #132E35;
        font-size: 13px;
    }

    .sub-info-left-btn .sub-info--content {
        color: #132E35;
        font-weight: 500;
    }

.form-input-info-right {
    text-align: right;
    position: relative;
    top: 5px;
    color: #244a53;
    font-weight: bold;
    font-size: 16px;
    padding-right: 10px;
}

.buy-gold-page .buy-gold-form-row {
    min-height: 170px;
}

.sale-gold-page .loading-status {
    position: absolute;
    bottom: -20px;
    font-weight: bold;
}

.sale-gold-page .form-input-info-right {
    text-align: right;
    position: relative;
    top: 5px;
    color: #244a53;
    font-weight: bold;
    font-size: 16px;
    padding-right: 10px;
}

    .sale-gold-page .form-input-info-right .gold-color {
        color: #000000;
        font-weight: bold;
        font-size: 16px;
        text-shadow: 1px 1px 2px #f7ae00;
    }

.sale-gold-page .form-input-info-left {
    text-align: left;
    position: relative;
}

    .sale-gold-page .form-input-info-left .inline-btn {
        position: absolute;
        width: 140px;
        left: 0px;
        top: 10px;
        border-radius: 4px;
    }

.label-info-box {
    background-color: #DFDFDF;
    width: 100%;
    height: 48px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

    .label-info-box .price-content {
    }

        .label-info-box .price-content .price-content-value {
            font-weight: bold;
            font-size: 20px;
        }

        .label-info-box .price-content .prefix {
            font-weight: 500;
            margin-right: 6px;
        }

.info-row-2 {
    text-align: center;
    margin-top: 10px;
    display: block;
    padding-top: 10px;
    font-weight: 500;
    font-style: italic;
}

    .info-row-2 p {
    }

.BuyGoldPlan-page-preview .price-row .gold-bold-color {
    font-family: var(--title-font);
    font-size: 24px;
    font-weight: bold;
}

.plans-table .row-checked td,
.plans-table .row-checked td label,
.plans-table .row-checked td span {
    font-weight: bold !important
}

.plans-table td label {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.table-list.plans-table table tbody tr td {
    padding: 5px 1px;
    font-size: 16px;
    text-align: right;
}

.table-list.plans-table table thead tr th span {
    font-weight: 300;
    font-size: 12px;
}

.table-list.plans-table table tbody tr td .custom-radio input {
}

.table-list.plans-table table tbody tr td .custom-radio span {
    margin-right: 10px;
}

.plans-table {
    max-height: 260px;
    overflow: auto;
    margin-top: 20px;
}

    .plans-table table thead th {
        background: white;
        position: sticky;
        top: 0;
        text-align: right !important;
        z-index: 1;
    }

    .plans-table .price-r {
    }

    .plans-table .price-gold-r {
        color: #e19e02;
    }

    .plans-table .price-r span {
        font-weight: 400;
        margin-right: 10px;
    }

    .plans-table .price-gold-r span {
        font-weight: 400;
        margin-right: 10px;
        color: #0D0E0F;
    }

.custom-radio {
    margin: 0.5rem;
    position: relative
}

    .custom-radio input[type=radio] {
        position: absolute;
        opacity: 0;
    }

        .custom-radio input[type=radio] + .radio-label:before {
            content: "";
            background: #f4f4f4;
            border-radius: 100%;
            border: 1px solid #b4b4b4;
            display: inline-block;
            width: 1.4em;
            height: 1.4em;
            position: relative;
            top: 0em;
            margin-right: 1em;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease;
        }

        .custom-radio input[type=radio]:checked + .radio-label:before {
            background-color: #294e57;
            box-shadow: inset 0 0 0 4px #f4f4f4;
        }

        .custom-radio input[type=radio]:focus + .radio-label:before {
            outline: none;
            border-color: #3197EE;
        }

        .custom-radio input[type=radio]:disabled + .radio-label:before {
            box-shadow: inset 0 0 0 4px #f4f4f4;
            border-color: #b4b4b4;
            background: #b4b4b4;
        }

        .custom-radio input[type=radio] + .radio-label:empty:before {
            margin-right: 0;
        }

.BuyGoldPlan-page .inner-tab-link ul {
    margin-bottom: 30px;
}

.BuyGoldPlan-page .form-input-info-right {
    position: absolute;
    top: auto;
    bottom: -28px;
}

.alert-form-info .alert-form--content {
    padding: 20px;
}

.alert-form-info .modal-content .modal-header {
    background-color: var(--secondary-color);
}

    .alert-form-info .modal-content .modal-header h5, .alert-form-info .modal-content .modal-header button {
        color: white !important;
        font-weight: 500;
    }

.alert-form-info .alert-form-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .alert-form-info .alert-form-title .title-icon {
    }

    .alert-form-info .alert-form-title .title-content {
        padding-right: 10px;
        line-height: 23px;
        font-weight: bold;
        font-size: 16px;
        text-align: justify;
    }

.alert-form-info .alert-form-msg {
    margin: 40px auto;
    text-align: justify;
    text-align-last: center;
    font-weight: 500;
}

.alert-form-info .alert-info-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modal.alert-form-info {
    top: 9%;
}

.alert-form-info .btn-cta-1 {
    min-width: 150px;
}

.alert-form-info .btn-cta-3 {
    background-color: transparent;
    padding: 8px 20px;
    min-width: 150px;
}

    .alert-form-info .btn-cta-3:hover {
        background-color: #024442;
        color: white;
    }

.btn-bar-center {
    text-align: center;
}

.investing-back-top {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

    .investing-back-top .icon {
    }

    .investing-back-top .btn-title {
        color: black;
        font-weight: 500;
    }

.customer-wallet-page .toman.input-postfix {
    position: relative;
    left: 15px;
}

.table-list tr:nth-child(odd) td {
}

.table-list tr:nth-child(even) td {
    background-color: #f1f1f1;
}

.info-alert-bg {
    background-color: #fffbf2;
    border: 2px solid #fde9c2;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
}

    .info-alert-bg .info-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

        .info-alert-bg .info-row .info-title {
            font-weight: 500;
        }

        .info-alert-bg .info-row .info-value {
        }

            .info-alert-bg .info-row .info-value .number-value {
                font-size: 18px;
                font-weight: bold;
            }

            .info-alert-bg .info-row .info-value .price-prefix {
                font-size: 15px;
            }

.wallet-status-bar {
    text-align: left;
    margin-top: 6px;
}

#wallet-not-available {
    font-weight: 500;
    color: red;
}

#wallet-available {
    font-weight: 500;
    color: green;
}

.btn-cta-2 svg {
}

    .btn-cta-2 svg path {
        fill: black;
    }

.footer-links .footer-link-title {
    text-align: center;
    font-weight: 500;
    color: black;
    margin-bottom: 16px;
}

.plans-table tr th.th-1 {
    min-width: 100px;
}

.plans-table tr th.th-2 {
    min-width: 100px;
}

.plans-table tr th.th-3 {
    min-width: 200px;
}

.investing-pages .investing-conditions .customAccordion .acHead {
    background-color: white;
    border: 1px solid #c7c7c7;
    font-weight: 500;
}

.investing-pages .investing-conditions .acplus {
    left: 24px;
    right: auto;
}

.investing-inner-page .page-title {
    border-bottom: none;
}

    .investing-inner-page .page-title h1 {
        font-size: 26px;
        line-height: 1.375;
        font-weight: 500;
    }

        .investing-inner-page .page-title h1 span {
            color: #ffb300;
            font-weight: bold;
        }

.investing-inner-page .page-sub-title {
    color: black;
    font-size: 15px;
    font-weight: bold;
    margin: 20px auto;
}

.investing-inner-page .info-text-banners {
    display: none;
}

.investing-inner-page .customAccordion .acHead {
    background-color: #C7DBE1;
    font-weight: 500;
}

    .investing-inner-page .customAccordion .acHead[aria-expanded='true'] {
        background-color: #FFB300;
    }

.investing-inner-page .customAccordion .accordion-item .prd-acBody {
    margin-top: -10px;
    padding-top: 30px;
}

.investing-inner-page .customAccordion .accordion-item .collapse.show .prd-acBody,
.investing-inner-page .customAccordion .accordion-item .collapsing .prd-acBody {
    background-color: white;
    border: 1px solid #ffb300;
    border-radius: 8px;
    border-top: none;
}

.investing-inner-page .faq-shortcut ul li a {
    width: 195px;
    height: 195px;
}

.cta-box1 {
    margin: 70px auto;
    text-align: center;
    border: 1px solid #ffb300;
    padding: 35px 20px;
    border-radius: 14px;
}

    .cta-box1 .cta-box1-title {
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 20px;
        color: black;
    }

    .cta-box1 .cta-box1-body {
        font-size: 15px;
        font-weight: 500;
        color: #000000cf;
    }

.boxed-card-items {
}

    .boxed-card-items .title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 19px;
        font-weight: bold;
    }

    .boxed-card-items ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .boxed-card-items ul li {
            flex-grow: 1;
            width: 32%;
            height: 150px;
        }

            .boxed-card-items ul li .item {
                background-color: #C7DBE1;
                display: flex;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                border-radius: 12px;
                height: 100%;
                text-align: center;
            }

            .boxed-card-items ul li span {
                font-size: 15px;
                font-weight: 500;
                color: black;
                padding: 20px;
            }

.contact-info {
    background-color: #132E35;
}

.investing-conditions .accordion-item .admin-small-btn {
    left: 90px;
}

.preview-form--content .text-content {
    height: 300px;
    overflow: auto;
    text-align: right;
}

    .preview-form--content .text-content ul {
        padding-right: 20px;
    }

    .preview-form--content .text-content li {
        list-style: disc !important;
    }

.text-content {
    text-align: right;
    direction: rtl;
}

.amount-text {
    position: relative;
    top: 10px;
    font-weight: 500;
}

.cta-banner-1 {
    background-color: #244a53;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 12px 0px gray;
    margin-top: 50px;
    background: linear-gradient(45deg, #244a53, #244a53, #12333a, #416e78);
    background-size: 300% 300%;
    animation: gradientAnimation 10s ease infinite;
}

    .cta-banner-1 .title-area p {
        color: white;
        margin: 0px;
        font-size: 20px;
    }

    .cta-banner-1 .cta-area {
    }

    .cta-banner-1 .banner-inner {
        border: 1px solid #ffb3007a;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 150px;
    }

    .cta-banner-1 .gold-btn {
        color: #000000;
        border: 1px solid #FFB300;
        border-radius: 15px;
        padding: 10px 10px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFB300;
        font-size: 18px;
        height: 60px;
    }

        .cta-banner-1 .gold-btn:hover {
            background-color: #ffb30012;
            color: #FFB300;
        }

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.referral-dashboard .cards {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

    .referral-dashboard .cards .info {
        box-shadow: 0px 0px 11px -4px #009688;
        height: 70px;
        padding: 10px;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

        .referral-dashboard .cards .info span {
            font-size: 13px;
        }

        .referral-dashboard .cards .info strong {
            font-size: 18px;
        }

.referral-dashboard .table-title {
    text-align: center;
    margin-bottom: 18px;
}

    .referral-dashboard .table-title span {
        border-bottom: 1px solid black;
    }

.referral-dashboard table th,
.referral-dashboard table td {
    text-align: center;
}

.referral-dashboard table .btn-copy {
    background-color: #888;
    color: #FFFFFF;
}

.referral-dashboard-alert {
    color: black;
    font-weight: 500;
    text-align: center;
}

    .referral-dashboard-alert span {
        border-bottom: 1px solid #ff9797;
    }

.page-public-info {
    border-bottom: 1px solid;
    margin-bottom: 40px;
    padding-bottom: 20px;
    font-weight: 400;
    color: black;
}

@media (max-width: 1170px) {
    body {
        direction: rtl;
    }

    ul {
        padding: 0px;
    }

        ul li {
            list-style: none
        }

    .top-pages-header {
        display: none
    }

    .investing-form {
        overflow: hidden;
        box-shadow: none;
        border: 1px solid #C7DBE1;
    }

    .info-text-banners {
        overflow: hidden;
    }

    .investing-form {
        padding: 25px 15px;
        padding-top: 60px;
    }

    .header__content .left-menu {
        display: none;
    }

    .investing-pages .header {
        position: relative;
    }

    div.header {
        display: none;
    }

    .footer {
        display: none;
    }

    .wrapper {
        padding: 0px;
    }

    .footer-license {
        display: none;
    }
    /*Side Bar */
    #investing-sidebar-btn {
    }

    .investing-pages .header {
        height: 45px;
    }

    .header__content {
        height: 45px;
    }

    .mobile-header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        margin-top: 25px;
        border-bottom: 1px solid #f1f1f1;
        padding-bottom: 20px;
    }

        .mobile-header .landing-logo {
            display: flex;
        }

            .mobile-header .landing-logo .logo--img {
                padding-left: 5px;
                margin-left: 5px;
            }

            .mobile-header .landing-logo .logo--info {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                line-height: 17px;
            }

                .mobile-header .landing-logo .logo--info .info--title {
                    font-family: var(--title-font);
                    color: black;
                    font-weight: bold;
                    font-size: 16px;
                }

                .mobile-header .landing-logo .logo--info .info--sub-title {
                    font-family: var(--title-font);
                    font-size: 10px;
                    color: black;
                    font-weight: 500;
                }

    .header-second {
        display:block;
        padding: 5px 0px 0px 0px !important;
        background-color: #132e35;
        height: 36px;
        border-top: 1px solid #9d9d9d;
        text-align: center;
    }

        .header-second a {
            color: white;
            font-size: 12px;
        }

    .sidebar-2 {
        display: block;
        width: 300px;
        background: #ffffff;
        position: absolute;
        height: 100%;
        top: 0;
        right: -300px;
        transition: right 0.5s ease;
        left: auto;
        z-index: 999;
    }

        .sidebar-2.visible {
            right: 0px;
            transition: right 0.7s ease;
        }

        .sidebar-2 .sidebar-2-body {
            padding: 30px 20px;
        }

        .sidebar-2 .sidebar-2-header .landing-logo {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
        }

            .sidebar-2 .sidebar-2-header .landing-logo .logo--info {
                text-align: right;
                padding-right: 10px;
                line-height: 15px;
            }

                .sidebar-2 .sidebar-2-header .landing-logo .logo--info .info--title {
                    color: black;
                    font-weight: bold;
                    font-size: 21px;
                    font-family: var(--title-font);
                }

                .sidebar-2 .sidebar-2-header .landing-logo .logo--info .info--sub-title {
                    font-family: var(--title-font);
                    font-size: 10px;
                    color: black;
                    font-weight: 500;
                    position: relative;
                    bottom: -3px;
                }

    .sidebar-2-btn {
        border: none;
        background: none;
        position: absolute;
        left: 0px;
        top: -3px;
    }

    .sidebar-2-header {
        position: relative;
    }

    .sidebar-2-user-info .investing-user-info {
        background-color: #FFF4D9;
        padding: 15px;
        margin-top: 20px;
        border-radius: 6px;
    }

    .investing-user-info .user-info-header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #FFB300;
        padding-bottom: 10px;
        margin-bottom: 20px;
        color: black;
        font-weight: 500;
        gap: 10px;
    }

    .user-info-ul .info--row {
        margin-top: 15px;
    }

        .user-info-ul .info--row .row-title {
            text-align: right;
            font-weight: 500;
            color: black;
        }

        .user-info-ul .info--row .row-info {
            display: flex;
            justify-content: flex-end;
            padding: 5px 0px;
            gap: 10px;
            font-weight: 500;
            color: black;
        }

            .user-info-ul .info--row .row-info .row-info-value {
                color: black;
                font-weight: bold;
            }

            .user-info-ul .info--row .row-info .row-info-value-prefix {
                color: #4d4d4d;
            }

    .btn-type-100 {
        color: #FFB300 !important;
        border-radius: 6px;
        border: 1px solid #FFB300;
        display: block;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .btn-type-100:hover {
            background-color: #fff4d9;
        }

    .btn-type-200 {
        color: #EF0F0F !important;
        border-radius: 6px;
        border: 1px solid #EF0F0F;
        display: block;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .btn-type-200:hover {
            background-color: #fff4d9;
        }

    .sidebar-2-user-info .btn-type-100 {
        margin-top: 20px;
    }

    .gold-color {
        color: #FFB300 !important;
    }

    .sidebar-2-menu {
        margin: 10px auto;
    }

        .sidebar-2-menu ul {
            margin: 0px;
            padding: 0px;
        }

        .sidebar-2-menu li {
            list-style: none;
            text-align: right;
            border-bottom: 1px solid #dbdbdb;
            width: 100%;
            padding-bottom: 15px;
            padding-top: 15px;
        }

            .sidebar-2-menu li a {
                color: black;
                font-weight: 400;
            }

            .sidebar-2-menu li.active a {
                color: #FFB300;
                font-weight: bold;
            }

    #investing-overlay {
        display: none;
        position: absolute;
        background-color: #00000096;
        width: 100%;
        height: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        z-index: 99;
    }

    .investing-action-sidebar {
        position: relative;
    }

        .investing-action-sidebar .sidebar-content {
            background: none;
            box-shadow: none;
            color: black;
            padding: 0px;
            border-radius: 0px;
        }

            .investing-action-sidebar .sidebar-content ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                padding: 0px;
            }

                .investing-action-sidebar .sidebar-content ul li {
                    list-style: none;
                    flex-grow: 0;
                    width: 33%;
                    text-align: center;
                    height: 80px;
                    min-width: 100px;
                    border: none;
                    padding: 0px 0px;
                }

                    .investing-action-sidebar .sidebar-content ul li a {
                        color: black;
                        flex-direction: column;
                        font-size: 12px;
                        justify-content: space-evenly;
                        height: 100%;
                        box-shadow: 1px 1px 10px -3px #009688;
                        border-radius: 8px;
                        margin: 6px 6px 6px 6px;
                    }
                        .investing-action-sidebar .sidebar-content ul li a svg {
                            max-width: 22px;
                        }

                        .investing-action-sidebar .sidebar-content ul li a svg path {
                            fill: black;
                        }

                    .investing-action-sidebar .sidebar-content ul li.investing-plan-menu a svg path {
                        stroke: black;
                    }

                    .investing-action-sidebar .sidebar-content ul li a .item-icon {
                        margin-left: 0px;
                        display: none;
                    }

                    .investing-action-sidebar .sidebar-content ul li.active a {
                        font-size: 13px;
                        border: 1px solid #009688;
                        background-color: #009688;
                        color: white;
                    }
                    .investing-action-sidebar .sidebar-content ul li.active {
                        background: none !important;
                    }

    .dashboard-page {
        padding: 35px 7px 5px 7px;
    }

    .dashboard-info {
        flex-direction: column-reverse;
    }

        .dashboard-info .dash-credit {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            padding-right: 0px;
        }

        .dashboard-info .dash-total {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .dashboard-info .dash-total {
            border: 1px solid #ffb300;
            padding: 15px 25px;
            border-radius: 8px;
            padding-left: 45px;
        }

        .dashboard-info .dash-total--title {
            font-size: 16px;
            margin: 0;
        }

        .dashboard-info .dash-total--content .total-value {
            font-size: 16px;
        }

        .dashboard-info .dash-total--content .value-label {
            font-size: 16px;
        }

        .dashboard-info .dash-credit--title {
            font-size: 16px;
        }

        .dashboard-info .dash-credit--content .credit-value {
            font-size: 16px;
            border-radius: 10px;
        }

        .dashboard-info .dash-credit--content .value-label {
            font-size: 16px;
        }

    .top-form-header {
        top: 4px;
    }

        .top-form-header .h-content {
            font-size: 13px;
            padding: 7px 30px;
        }

    .investing-page-content {
        margin: 25px auto 20px auto;
    }

    .info-text-banners .col-md-6 {
        padding: 0px 15px;
    }

    .info-text-banners .text-banner-item {
        background: linear-gradient(to bottom, #244a53, #819498);
        margin: 10px 15px;
        border-radius: 30px;
    }

        .info-text-banners .text-banner-item .item--title {
            color: white;
            text-align: center;
            font-size: 16px;
        }

        .info-text-banners .text-banner-item .item--detail {
            color: white;
            direction: rtl;
            text-align: center;
            font-size: 14px;
            min-height: 110px;
        }
    .investing-action-sidebar .sidebar-content ul li:hover:not(.active) {
        
        background-color:transparent !important;
    }

    .investing-action-sidebar .sidebar-content ul li:hover:not(.active) a{
        background-color: #009688;
    }

    .footer-bar--logo .logo--img img {
        max-width: 48px;
    }

    .investing-back-top .btn-title {
        font-size: 15px;
        font-weight: 400;
    }

    .footer-detail .info-about .info-about-title {
        text-align: center;
    }

    .footer-detail .info-about .info-about-sub-title {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-detail .info-about .info-about-address {
        text-align: center;
    }

    .info-about-address {
        display: none
    }

    .footer-links ul {
        padding: 0px;
    }

        .footer-links ul li {
            list-style: none
        }

    .footer-links {
        margin-top: 40px;
    }

    .footer-copyright {
        background-color: #2A444B;
        padding: 15px 0px 15px 0px;
    }

        .footer-copyright .footer-copyright--contact {
            font-size: 13px;
            color: white;
        }

            .footer-copyright .footer-copyright--contact span.hl {
                color: #ffb300;
                font-weight: bold;
            }

            .footer-copyright .footer-copyright--contact .ph-number {
                color: #ffb300;
            }

            .footer-copyright .footer-copyright--contact i svg path {
                fill: #ffb300;
            }

    .footer-license-mobile {
        text-align: center;
    }

        .footer-license-mobile .info-about-address-mobile {
            margin: 16px auto;
            color: black;
            font-size: 11px;
        }

    .font-body-m {
        font-weight: 400;
        font-size: 14px;
    }

    .dash-row-info .row-content .row-info-title .info-title {
        font-size: 15px;
    }

    .dash-row-info .row-content .row-info-value .info-title {
        font-size: 16px;
    }

    .dash-row-info .row-content .row-info-value .info-dub-title {
        font-size: 13px;
    }

    .inner-tab-link ul li {
        border-radius: 8px;
        width: 96%;
        margin: auto;
        height: 40px;
    }

        .inner-tab-link ul li a {
            font-weight: 400;
            font-size: 12px;
            text-align: center;
        }

    .inner-tab-link ul {
        border: 1px solid #c8c8c8;
        border-radius: 6px;
        margin-bottom: 40px;
        flex-direction: column;
        height: auto;
    }

    .form-content .control-label {
        font-weight: 400;
        font-size: 16px;
        margin-bottom: 12px;
    }

    .form-content .form-control {
        border: 1px solid #244a53;
        border-radius: 6px;
    }

    .input-container .input-postfix {
        font-weight: 500;
        position: relative;
        top: 10px;
        min-width: 60px;
        font-size: 15px;
    }

    .customer-wallet-page #Amount {
        max-width: 290px;
    }

    .form-content .alert-1 {
        font-size: 11px;
        text-align: right;
    }

    .select_wrap .default_option {
        border-radius: 6px;
        padding-right: 5px;
    }

    .m-alert-info {
        font-size: 11px;
        color: #3d3d3d;
        font-weight: 500;
    }

    .btn-cta-2, .btn-cta-2:active, .btn-cta-2:focus {
        display: block;
        width: 100%;
        border-radius: 6px;
        padding: 15px;
    }

    .wallet-deposit-form .form-detail {
        padding: 10px 10px;
        border: none;
        margin-top: 10px;
    }

    .btn-cta-1 {
        padding: 15px 20px;
        display: block;
        width: 100%;
    }

    .preview-form .preview-form--price .action-title {
        margin-bottom: 10px;
    }

    .preview-form--bankNames .customer-bank {
        width: 140px;
        height: 89px;
        font-weight: 400;
        font-size: 14px;
    }

    .wallet-withdraw-page .form-input-info-left .inline-btn {
        left: 16px;
    }

    .buy-gold-page #ValueInGold, .buy-gold-page #ValueInToman,
    .sale-gold-page #ValueInGold, .sale-gold-page #ValueInToman {
        max-width: 280px;
    }

    .ValueInGold-container {
        margin-bottom: 40px;
    }

    .buy-gold-page .sub-info-left-btn,
    .sale-gold-page .sub-info-left-btn {
        justify-content: flex-start;
    }

    .sub-info-left-btn .sub-info--content {
        margin-right: 15px;
    }

    #follow-deposit {
        margin-bottom: 15px;
    }

    #wallet-not-available {
        font-weight: 40;
        color: red;
        font-size: 15px;
    }

    .info-alert-bg .info-row .info-title {
        font-weight: 500;
        font-size: 14px;
    }

    .list-info ul li .info-title {
        font-size: 14px;
        font-weight: 400;
        color: #0D0E0F;
        text-align: right;
    }

    .error-info-container {
        margin-top: 30px;
    }

    .error-info {
        margin-top: 0px;
        text-align: center;
        font-weight: 500;
    }

    .sale-gold-page hr {
        margin: 0px;
    }

    .plans-table {
        max-height: none
    }

    .mobile-none {
        display: none !important
    }

    .BuyGoldPlan-page {
    }

    table {
        width: 100%;
    }

    .plans-table tr th.th-1 {
        min-width: 100px;
    }

    .plans-table tr th.th-2 {
        min-width: 100px;
    }

    .plans-table tr th.th-3 {
        min-width: 100px;
    }

    .table-list table thead tr th {
        font-size: 13px;
        text-align: center !important;
        font-weight: 500;
    }

    .table-list.plans-table table tbody tr td {
        font-size: 14px;
    }

    .label-info-box {
        border-radius: 4px;
    }

    .btn-cta-3 {
        padding: 10px;
    }

    .pink-theme .investing-layout-main a {
        color: black;
    }

    .back-button {
        left: -20px;
        top: 0px;
    }

        .back-button a {
            font-size: 14px;
            font-weight: 500;
        }

    .form-content .form-info .form-info--title {
        font-weight: 500;
        font-size: 15px;
    }

    .info-row-1 {
        width: 100%;
    }

    .info-row-2 p {
        font-size: 12px;
        padding-bottom: 10px;
    }

    .ValueInToman-container {
        margin-bottom: 40px;
    }

    .BuyGoldPlan-page .label-info-box.gold-bg {
        background-color: #FFF0CC;
    }

    .inner-page-title .content {
        font-weight: 500;
        font-size: 13px;
        text-align: right;
    }

    .bank-accounts .not-approved .bank-accounts--list {
        margin-top: 20px;
    }

    .bank-accounts--list li .card-name {
        font-weight: 500;
        font-size: 13px;
    }

    .bank-accounts--list li .bank-no {
        font-size: 13px;
    }

    .bank-accounts--list li {
        border-radius: 4px;
        padding: 10px;
        min-width: 170px;
        margin: 2px;
    }

    .customer-report {
        position: relative;
    }

        .customer-report table, .customer-report thead, .customer-report tbody, .customer-report th, .customer-report td, .customer-report tr {
            display: block;
        }


            .customer-report thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .customer-report tr {
            margin: 0 0 1rem 0;
            box-shadow: 0px 0px 14px -7px #9f9f9f;
            border-radius: 6px;
        }

            .customer-report tr:nth-child(odd) {
            }

        .customer-report td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

    .table-list tr:nth-child(even) td {
        background-color: #fbfbfb;
    }

    .table-icon {
        background: no-repeat;
        border: none;
        width: 35px;
        height: 24px;
    }

    .bank-accounts-page .form-detail {
        padding: 10px;
        font-size: 13px;
    }

    .footer-license-mobile {
        display: block
    }

    .select_wrap .default_option li {
        padding: 10px 10px;
    }

    .report-list .report-item {
        background-color: #E8F4E9;
        margin-bottom: 20px;
        border-radius: 10px;
        padding: 12px;
        text-align: right;
        position: relative;
    }
    .report-list .report-item.buy{
   
    }
        .report-list .report-item.sale {
            background-color: #6ba4ff;
        }
        .report-list .report-item .item--row {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-top: 15px;
            gap: 15px;
            color: black;
            font-size: 15px;
        }

            .report-list .report-item .item--row.item-title {
                font-weight: 500;
                margin-top: 0px;
            }

            .report-list .report-item .item--row .row-title {
            }

            .report-list .report-item .item--row .row-value {
            }

        .report-list .report-item .item-status {
            position: absolute;
            left: 12px;
            top: 10px;
            font-size: 14px;
        }

        .report-list .report-item .item-buttons {
            position: absolute;
            left: 14px;
            bottom: 14px;
        }

        .report-list .report-item .item--row .item-price {
            font-weight: 500;
        }

        .report-list .report-item .item--row .item-gold {
            color: #f7ae00 !important;
            font-weight: bold;
        }

    .report-item.tr-st-Pending,
    .report-item.tr-st-Failure {
        background-color: #FEE7E7 !important;
    }

    .investing-inner-page .faq-shortcut ul li {
        width: 47%;
        height: 110px;
        flex-grow: 1;
    }

        .investing-inner-page .faq-shortcut ul li a {
            width: 100%;
            height: 100%;
            color: white;
        }

            .investing-inner-page .faq-shortcut ul li a span {
                font-weight: 500;
            }

            .investing-inner-page .faq-shortcut ul li a svg {
                max-width: 40px;
            }

    .boxed-card-items ul li {
        width: 48%;
    }

        .boxed-card-items ul li .item {
            border-radius: 16px;
        }

    .cta-box1 .cta-box1-title {
        font-size: 18px;
    }

    .page-title-noborder h1 {
        font-size: 23px;
    }

    .investing-inner-page .customAccordion h3 {
        padding-right: 3px;
    }

    .persian-amount {
        text-align: right
    }

    .investing-action-sidebar .sidebar-content ul li {
        margin-bottom: 6px;
    }
    .cta-banner-1 .banner-inner {
        flex-direction: column;
        text-align: center;
    }
    .cta-banner-1 .title-area p {
        margin-bottom: 38px;
        margin-top: 10px;
    }
    .cta-banner-1 .banner-inner {
        height: 190px;
    }
    #gateway-required-hint .error-info {
        margin-top: 15px;
    }
}