:root {
    --bg: #0b0d12;

    --surface: #12151c;
    --surface-2: #171b23;
    --surface-3: #1c212b;

    --tron: #ff3b5c;
    --tron-soft: rgba(255, 59, 92, .12);
    --tron-glow: rgba(255, 59, 92, .24);

    --purple: #8b5cf6;
    --purple-soft: rgba(139, 92, 246, .12);

    --green: #27d9a1;
    --green-soft: rgba(39, 217, 161, .12);

    --blue: #4f7cff;

    --text: #f5f7fa;
    --muted: #8f96a3;
    --muted-light: #b9bec8;

    --line: rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .13);

    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family: "Inter", sans-serif;

    color: var(--text);

    overflow-x: hidden;

    background:
        radial-gradient(
            ellipse 700px 500px at 8% -5%,
            rgba(255, 59, 92, .10),
            transparent 65%
        ),
        radial-gradient(
            ellipse 600px 500px at 95% 20%,
            rgba(139, 92, 246, .08),
            transparent 65%
        ),
        radial-gradient(
            ellipse 700px 500px at 50% 100%,
            rgba(79, 124, 255, .045),
            transparent 70%
        ),
        #0b0d12;
}

/* =========================================
GLOBAL
========================================= */

::selection {
background: var(--green);
color: #03100b;
}

a,
button,
input,
img {
transition:
color .2s ease,
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease,
opacity .2s ease;
}

a {
color: inherit;
}

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

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

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

.border-top {
border-color: var(--line) !important;
}

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

.rounded-4 {
border-radius: var(--radius-lg) !important;
}

.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
h1,
h2,
h3,
h4,
h5 {
letter-spacing: -.035em;
}

/* =========================================
AMBIENT LIGHT
========================================= */

.background-blur {
    position: fixed;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

    z-index: -1;

    opacity: .08;
}

.blur-green {
    width: 300px;
    height: 300px;

    top: 15%;
    left: -150px;

    background: #27d9a1;
}

.blur-blue {
    width: 420px;
    height: 420px;

    right: -250px;
    top: 35%;

    background: #4f7cff;
}

.blur-purple {
    width: 500px;
    height: 500px;

    bottom: -350px;
    left: 35%;

    background: #8b5cf6;
}

/* =========================================
HEADER / NAVIGATION
========================================= */

header,
.navbar {
position: relative;
z-index: 20;

```
border-bottom: 1px solid rgba(255, 255, 255, .045);

background: rgba(5, 8, 7, .72);

backdrop-filter: blur(18px);
```

}

header .container,
.navbar .container {
min-height: 64px;
}

header a img,
.navbar-brand img {
display: block;

```
width: auto;

filter:
    drop-shadow(0 0 14px rgba(0, 227, 154, .14));
```

}

header a:hover img,
.navbar-brand:hover img {
transform: translateY(-1px);
}

header .text-secondary {
font-size: .86rem;

```
transition: color .2s ease;
```

}

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

/* =========================================
BUTTONS
========================================= */

.btn {
font-family: inherit;

```
font-weight: 600;

transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
```

}

.btn-connect {
    min-height: 46px;

    padding: 0 20px;

    border: 1px solid rgba(39, 217, 161, .3);

    border-radius: 13px;

    color: #06120e;

    background: #27d9a1;

    font-size: .88rem;
}

.btn-connect:hover {
    color: #06120e;

    background: #3be5b0;

    transform: translateY(-2px);

    box-shadow:
        0 10px 35px rgba(39, 217, 161, .2);
}

/* =========================================
PRIMARY ACTION
========================================= */

.btn-send {
position: relative;

```
min-height: 58px;

margin-top: 0;

border: 1px solid rgba(0, 227, 154, .25);

border-radius: 15px;

color: #03100b;

background:
    linear-gradient(
        135deg,
        #00e39a,
        #00c987
    );

font-weight: 700;

letter-spacing: -.01em;

box-shadow:
    0 12px 30px rgba(0, 227, 154, .09);
```

}

.btn-send:hover {
color: #03100b;

```
transform: translateY(-2px);

border-color: rgba(0, 227, 154, .55);

box-shadow:
    0 16px 40px rgba(0, 227, 154, .19);
```

}

.btn-send:active {
transform: translateY(0);
}

/* =========================================
HERO / INTRO
========================================= */

.hero {
min-height: auto;

```
padding: 90px 0 70px;
```

}

section {
position: relative;
}

section.py-5 {
padding-top: 80px !important;
padding-bottom: 80px !important;
}

.hero h1,
main > section:first-child h1 {
max-width: 950px;

```
font-weight: 700;

line-height: .98;
```

}

.hero p,
main > section:first-child p {
line-height: 1.75;
}

.small {
letter-spacing: .08em;
text-transform: uppercase;
}

/* =========================================
MARKET STATUS PANELS
========================================= */

.p-4.border.rounded-4,
.p-3.p-md-4.border.rounded-4 {
position: relative;

```
background:
    linear-gradient(
        145deg,
        rgba(255, 255, 255, .025),
        rgba(255, 255, 255, .008)
    );

border: 1px solid var(--line) !important;

box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025);

overflow: hidden;
```

}

.p-4.border.rounded-4::before,
.p-3.p-md-4.border.rounded-4::before {
content: "";

```
position: absolute;

left: 0;
top: 0;

width: 2px;
height: 100%;

background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 227, 154, .6),
    transparent
);

opacity: .45;
```

}

.p-4.border.rounded-4:hover {
border-color: var(--line-strong) !important;

```
transform: translateY(-2px);
```

}

/* =========================================
MARKET INDICATOR
========================================= */

.bi-circle-fill {
font-size: .38rem;

```
vertical-align: middle;

filter:
    drop-shadow(0 0 7px rgba(0, 227, 154, .75));
```

}

/* =========================================
MAIN WORKSPACE
========================================= */

#transfer .row > .col-lg-8 > .border,
.col-lg-8 > .border.rounded-4 {
position: relative;

```
background:
    linear-gradient(
        145deg,
        rgba(16, 25, 21, .94),
        rgba(7, 12, 10, .94)
    );

border-color: var(--line-strong) !important;

box-shadow:
    0 30px 80px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .025);
```

}

#transfer .row > .col-lg-8 > .border::after,
.col-lg-8 > .border.rounded-4::after {
content: "";

```
position: absolute;

width: 260px;
height: 260px;

right: -130px;
top: -130px;

border-radius: 50%;

background: var(--green);

filter: blur(110px);

opacity: .035;

pointer-events: none;
```

}

/* =========================================
   FORM
   ========================================= */

.form-label {
    display: block;

    margin-bottom: 9px;

    color: var(--muted);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;
}


/* Bootstrap override */

.form-control {
    width: 100%;

    min-height: 58px;

    padding: 0 18px;

    border: 1px solid var(--line);

    border-radius: 14px;

    background-color: #080c11 !important;
    background-image: none !important;

    color: #f5f7fa !important;

    font-size: .95rem;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .018);

    -webkit-text-fill-color: #f5f7fa !important;
    caret-color: var(--green);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.form-control:hover {
    background-color: #080c11 !important;

    border-color: rgba(255, 255, 255, .13);
}


.form-control:focus {
    background-color: #080f0c !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    border-color: rgba(39, 217, 161, .5) !important;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(39, 217, 161, .07),
        inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}


.form-control::placeholder {
    color: #59635f !important;

    opacity: 1;

    -webkit-text-fill-color: #59635f !important;
}


.form-control[readonly] {
    cursor: default;

    background-color: #080d0b !important;

    color: var(--muted-light) !important;

    -webkit-text-fill-color: var(--muted-light) !important;
}


/* =========================================
   AMOUNT FIELD
   ========================================= */

.amount-wrapper {
    position: relative;
}


.amount-input {
    padding-right: 125px;

    background-color: #080c11 !important;

    color: #f5f7fa !important;

    font-size: 1.15rem;

    font-weight: 600;

    -webkit-text-fill-color: #f5f7fa !important;
}


.amount-input:focus {
    background-color: #080f0c !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    border-color: rgba(39, 217, 161, .5) !important;
}


.amount-input::placeholder {
    color: #59635f !important;

    font-weight: 400;

    -webkit-text-fill-color: #59635f !important;
}


/* =========================================
   COIN SELECTOR
   ========================================= */

.coin {
    position: absolute;

    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 9px;

    border: 1px solid var(--line);

    border-radius: 10px;

    background: rgba(255, 255, 255, .025);

    color: var(--muted-light);

    font-size: .82rem;

    font-weight: 600;

    pointer-events: none;
}


.coin img {
    width: 27px;
    height: 27px;

    object-fit: contain;
}


.coin:hover {
    border-color: rgba(255, 255, 255, .15);

    background: rgba(255, 255, 255, .045);
}


/* =========================================
   SWAP ARROW
   ========================================= */

.rounded-circle.border {
    width: 42px;
    height: 42px;

    border-color: var(--line-strong) !important;

    background: var(--surface);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .25);
}


.rounded-circle.border:hover {
    border-color: rgba(39, 217, 161, .35) !important;

    background: var(--green-soft);

    transform: rotate(180deg);
}
/* =========================================
MARKET PRICE
========================================= */

#trxPrice {
letter-spacing: -.055em;

```
line-height: 1;
```

}

#priceChange {
display: inline-flex;

```
align-items: center;

min-height: 26px;

padding: 4px 9px;

border-radius: 8px;

background: rgba(0, 227, 154, .07);

color: var(--green);
```

}

/* =========================================
CHART
========================================= */

.chart-wrapper {
position: relative;

```
width: 100%;
height: 310px;

margin-top: 10px;

overflow: hidden;
```

}

#trxChart {
width: 100% !important;
height: 100% !important;
}

/* =========================================
DATA ROWS
========================================= */

.fee {
min-height: 28px;

```
padding: 4px 0;

color: var(--muted-light);

font-size: .88rem;
```

}

.fee strong {
color: var(--text);

```
font-weight: 600;
```

}

.border-top {
padding-top: 20px !important;
}

/* =========================================
ICONS
========================================= */

.bi-lightning-charge,
.bi-graph-up-arrow,
.bi-wallet2,
.bi-shield-check,
.bi-clock-history,
.bi-diagram-3,
.bi-broadcast {
filter:
drop-shadow(0 0 12px rgba(0, 227, 154, .12));
}

/* =========================================
INFORMATION CARDS
========================================= */

.col-md-4 > .border.rounded-4 {
background: rgba(8, 14, 11, .55);

```
transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
```

}

.col-md-4 > .border.rounded-4:hover {
background: rgba(12, 22, 17, .8);

```
border-color: rgba(0, 227, 154, .18) !important;

transform: translateY(-4px);
```

}

/* =========================================
PROCESS GRID
========================================= */

.overflow-hidden.border.rounded-4 {
background: rgba(8, 13, 11, .55);

```
border-color: var(--line-strong) !important;
```

}

.overflow-hidden.border.rounded-4 > div {
min-height: 230px;

```
transition:
    background .25s ease;
```

}

.overflow-hidden.border.rounded-4 > div:hover {
background: rgba(255, 255, 255, .018);
}

.overflow-hidden .border-start {
border-color: var(--line) !important;
}

.overflow-hidden .small {
color: #65706b !important;
}

/* =========================================
SECONDARY SERVICE
========================================= */

section a.btn-outline-light {
min-height: 52px;

```
display: inline-flex;

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

border-radius: 14px;

padding-left: 22px;
padding-right: 22px;

background: rgba(255, 255, 255, .015);
```

}

section a.btn-outline-light:hover {
background: rgba(0, 227, 154, .05);

```
border-color: rgba(0, 227, 154, .3);

color: var(--green);
```

}

/* =========================================
FOOTER
========================================= */

footer {
margin-top: 50px;

```
border-top: 1px solid var(--line);

background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, .008),
        transparent
    );
```

}

footer img {
opacity: .9;

```
filter:
    grayscale(.25)
    drop-shadow(0 0 12px rgba(0, 227, 154, .08));
```

}

footer .small {
letter-spacing: 0;

```
text-transform: none;
```

}

/* =========================================
LEGACY SUPPORT
========================================= */

.send-card {
background:
linear-gradient(
145deg,
rgba(13, 21, 18, .9),
rgba(7, 12, 10, .9)
);

```
border: 1px solid var(--line);

border-radius: var(--radius-lg);

padding: 40px;

box-shadow:
    0 30px 80px rgba(0, 0, 0, .28);
```

}

.send-card:hover {
border-color: var(--line-strong);
}

.feature {
transition:
transform .25s ease,
opacity .25s ease;
}

.feature:hover {
transform: translateY(-3px);
}

.showcase {
position: relative;

```
padding: 80px 0;
```

}

.showcase-image {
max-width: 120px;

```
width: 100%;
height: auto;

filter:
    drop-shadow(
        0 0 35px rgba(0, 227, 154, .2)
    );
```

}

.showcase-image:hover {
transform: scale(1.04);
}

/* =========================================
RESPONSIVE
========================================= */

@media (max-width: 991.98px) {

```
section.py-5 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}


.hero,
main > section:first-child {
    padding-top: 65px !important;
}


.display-2,
.display-3 {
    font-size: 3.6rem;
}


.chart-wrapper {
    height: 260px;
}
```

}

@media (max-width: 767.98px) {

```
header .container,
.navbar .container {
    min-height: 58px;
}


header,
.navbar {
    padding: 12px 0 !important;
}


.btn-connect {
    min-height: 42px;

    padding: 0 15px;

    border-radius: 11px;

    font-size: .8rem;
}


.hero,
main > section:first-child {
    padding-top: 50px !important;
}


.display-2,
.display-3 {
    font-size: 2.8rem;

    line-height: 1.02;
}


.lead {
    font-size: 1rem;

    line-height: 1.65;
}


section.py-5 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
}


.send-card {
    padding: 25px 20px;

    border-radius: 22px;
}


.chart-wrapper {
    height: 220px;
}


.amount-input {
    font-size: 1rem;
}


.coin {
    right: 10px;
}


.overflow-hidden.border.rounded-4 > div {
    min-height: auto;
}


.overflow-hidden .border-start {
    border-left: 0 !important;

    border-top: 1px solid var(--line) !important;
}


footer {
    margin-top: 20px;
}
```

}

@media (max-width: 420px) {

```
.display-2,
.display-3 {
    font-size: 2.35rem;
}


.btn-connect {
    padding: 0 12px;
}


.coin {
    padding: 5px 7px;
}


.coin img {
    width: 24px;
    height: 24px;
}
```

}

/* =========================================
   BRAND
   ========================================= */

.brand-logo {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--text);

    line-height: 1;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.brand-logo:hover {
    color: var(--text);

    opacity: .92;

    transform: translateY(-1px);
}


/* geometric mark */

.brand-mark {
    position: relative;

    width: 27px;
    height: 27px;

    display: flex;

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

    transform: rotate(45deg);
}


.brand-mark span {
    position: absolute;

    display: block;

    border-radius: 3px;

    background: var(--tron);

    box-shadow:
        0 0 16px rgba(255, 59, 92, .18);
}


.brand-mark span:nth-child(1) {
    width: 9px;
    height: 9px;

    top: 0;
    left: 9px;
}


.brand-mark span:nth-child(2) {
    width: 9px;
    height: 9px;

    bottom: 0;
    left: 0;
}


.brand-mark span:nth-child(3) {
    width: 9px;
    height: 9px;

    right: 0;
    bottom: 9px;
}


.brand-name {
    font-size: 1.6rem;

    font-weight: 800;

    letter-spacing: .075em;
}


.brand-tron {
    color: #f5f7fa;
}


.brand-stake {
    color: var(--tron);
}


.nav-link-custom {
    color: var(--muted);

    font-size: .86rem;

    font-weight: 500;

    text-decoration: none;

    transition:
        color .2s ease;
}


.nav-link-custom:hover {
    color: var(--text);
}