/* =========================================================
   ASD TRADERS
   TRADING GUIDES PAGE
========================================================= */


/* =========================================================
   COMMON
========================================================= */

.trading-guides-page {

    overflow:hidden;

}

.trading-guides-page .section {

    padding:90px 0;

}

.tg-section-heading {

    max-width:780px;

    margin:0 auto 55px;

    text-align:center;

}

.tg-eyebrow {

    display:inline-block;

    margin-bottom:14px;

    color:#39A8FF;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.8px;

    text-transform:uppercase;

}

.tg-section-heading h2 {

    color:#fff;

    font-size:42px;

    line-height:1.2;

    margin-bottom:18px;

}

.tg-section-heading p {

    color:#9CB0CC;

    font-size:17px;

    line-height:1.8;

}


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

.tg-hero {

    position:relative;

    min-height:600px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(57,168,255,.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(99,102,241,.10),
            transparent 32%
        ),
        #06101C;

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

}

.tg-hero::after {

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(57,168,255,.45),
        transparent
    );

}

.tg-hero-glow {

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    filter:blur(90px);

    pointer-events:none;

}

.tg-glow-one {

    top:-220px;
    left:-140px;

    background:rgba(57,168,255,.14);

}

.tg-glow-two {

    right:-160px;
    bottom:-240px;

    background:rgba(99,102,241,.12);

}

.tg-hero-content {

    position:relative;

    z-index:2;

    max-width:820px;

    padding:100px 0;

}

.tg-badge {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 16px;

    margin-bottom:24px;

    color:#8CCFFF;

    background:rgba(57,168,255,.09);

    border:1px solid rgba(57,168,255,.20);

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.tg-hero h1 {

    margin:0 0 24px;

    color:#fff;

    font-size:64px;

    line-height:1.08;

    letter-spacing:-2px;

}

.tg-hero h1 span {

    color:#39A8FF;

}

.tg-hero p {

    max-width:760px;

    margin:0;

    color:#9CB0CC;

    font-size:19px;

    line-height:1.85;

}

.tg-hero-actions {

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:34px;

}


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

.tg-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:50px;

    padding:0 24px;

    border-radius:10px;

    font-size:15px;

    font-weight:700;

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

}

.tg-btn:hover {

    transform:translateY(-2px);

}

.tg-btn-primary {

    color:#fff;

    background:#1689E8;

    border:1px solid #1689E8;

    box-shadow:0 10px 30px rgba(22,137,232,.20);

}

.tg-btn-primary:hover {

    background:#2498F5;

    border-color:#2498F5;

}

.tg-btn-outline {

    color:#D8E7F7;

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

    border:1px solid rgba(255,255,255,.14);

}

.tg-btn-outline:hover {

    color:#fff;

    border-color:rgba(57,168,255,.55);

    background:rgba(57,168,255,.07);

}


/* =========================================================
   GUIDE CARDS
========================================================= */

.tg-intro {

    background:#07121F;

}

.tg-guide-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.tg-guide-card {

    position:relative;

    padding:30px 26px;

    background:#0B1928;

    border:1px solid rgba(255,255,255,.09);

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.16);

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

}

.tg-guide-card:hover {

    transform:translateY(-5px);

    background:#0E2032;

    border-color:rgba(57,168,255,.28);

    box-shadow:0 16px 35px rgba(0,0,0,.22);

}

.tg-guide-card.tg-featured {

    background:
        linear-gradient(
            145deg,
            rgba(57,168,255,.075),
            rgba(255,255,255,.018)
        );

    border-color:rgba(57,168,255,.18);

}

.tg-guide-top {

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:26px;

    margin-bottom:18px;

}

.tg-guide-number {

    color:#5CB8FF;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

}

.tg-guide-label {

    padding:5px 9px;

    color:#70C8FF;

    background:rgba(57,168,255,.08);

    border:1px solid rgba(57,168,255,.14);

    border-radius:999px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.8px;

}

.tg-guide-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    width:55px;
    height:55px;

    margin-bottom:22px;

    color:#5CB8FF;

    background:rgba(57,168,255,.08);

    border:1px solid rgba(57,168,255,.14);

    border-radius:14px;

    font-size:19px;

}

.tg-guide-card h3 {

    margin-bottom:12px;

    color:#fff;

    font-size:20px;

}

.tg-guide-card > p {

    min-height:78px;

    margin-bottom:20px;

    color:#8FA4BD;

    font-size:14px;

    line-height:1.75;

}

.tg-guide-list {

    display:flex;

    flex-direction:column;

    gap:9px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.07);

}

.tg-guide-list span {

    display:flex;

    align-items:center;

    gap:8px;

    color:#B7C8D9;

    font-size:12px;

}

.tg-guide-list i {

    color:#5ED594;

    font-size:10px;

}


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

.tg-process {

    background:#06101C;

}

.tg-process-grid {

    display:grid;

    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;

    align-items:stretch;

    gap:12px;

}

.tg-process-card {

    position:relative;

    padding:30px 23px;

    background:#0B1928;

    border:1px solid rgba(255,255,255,.09);

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.16);

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

}

.tg-process-card:hover {

    transform:translateY(-4px);

    background:#0E2032;

    border-color:rgba(57,168,255,.28);

    box-shadow:0 14px 32px rgba(0,0,0,.20);

}

.tg-process-number {

    display:block;

    margin-bottom:20px;

    color:#5CB8FF;

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

}

.tg-process-icon {

    display:flex;

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

    width:52px;
    height:52px;

    margin-bottom:20px;

    color:#5CB8FF;

    background:rgba(57,168,255,.08);

    border:1px solid rgba(57,168,255,.14);

    border-radius:13px;

}

.tg-process-card h3 {

    margin-bottom:10px;

    color:#fff;

    font-size:19px;

}

.tg-process-card p {

    margin:0;

    color:#879CB5;

    font-size:13px;

    line-height:1.75;

}

.tg-process-connector {

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    color:#4F83A7;

    font-size:12px;

}


/* =========================================================
   MARKET DATA
========================================================= */

.tg-data {

    background:#07121F;

}

.tg-data-box {

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:60px;

    align-items:center;

    padding:55px;

    background:
        linear-gradient(
            135deg,
            rgba(57,168,255,.07),
            rgba(255,255,255,.018)
        );

    border:1px solid rgba(57,168,255,.14);

    border-radius:22px;

}

.tg-data-content {

    max-width:430px;

}

.tg-data-content h2 {

    margin-bottom:18px;

    color:#fff;

    font-size:38px;

    line-height:1.25;

}

.tg-data-content p {

    margin-bottom:25px;

    color:#91A5BD;

    font-size:16px;

    line-height:1.85;

}

.tg-text-link {

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#5CB8FF;

    font-size:14px;

    font-weight:700;

    transition:
        gap .25s ease,
        color .25s ease;

}

.tg-text-link:hover {

    gap:14px;

    color:#8CCFFF;

}

.tg-data-items {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.tg-data-item {

    display:flex;

    align-items:center;

    gap:13px;

    padding:18px;

    background:#0B1928;

    border:1px solid rgba(255,255,255,.09);

    border-radius:13px;

    box-shadow:0 7px 22px rgba(0,0,0,.14);

}

.tg-data-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:43px;
    height:43px;

    color:#5CB8FF;

    background:rgba(57,168,255,.08);

    border:1px solid rgba(57,168,255,.14);

    border-radius:11px;

    font-size:15px;

}

.tg-data-item strong {

    display:block;

    margin-bottom:4px;

    color:#fff;

    font-size:13px;

}

.tg-data-item span {

    color:#7188A2;

    font-size:11px;

    line-height:1.5;

}


/* =========================================================
   CHECKLIST
========================================================= */

.tg-checklist {

    background:#06101C;

}

.tg-checklist-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.tg-check-item {

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:23px;

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

    border:1px solid rgba(255,255,255,.07);

    border-radius:15px;

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

}

.tg-check-item:hover {

    transform:translateY(-3px);

    border-color:rgba(57,168,255,.20);

}

.tg-check-icon {

    display:flex;

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

    flex-shrink:0;

    width:42px;
    height:42px;

    color:#63D997;

    background:rgba(70,205,125,.08);

    border:1px solid rgba(70,205,125,.14);

    border-radius:11px;

    font-size:13px;

}

.tg-check-item strong {

    display:block;

    margin-bottom:5px;

    color:#fff;

    font-size:14px;

}

.tg-check-item p {

    margin:0;

    color:#8298B1;

    font-size:12px;

    line-height:1.7;

}


/* =========================================================
   PLATFORM JOURNEY
========================================================= */

.tg-platform {

    background:#07121F;

}

.tg-platform-box {

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:70px;

    align-items:center;

    padding:55px;

    background:
        linear-gradient(
            135deg,
            rgba(57,168,255,.07),
            rgba(255,255,255,.018)
        );

    border:1px solid rgba(57,168,255,.14);

    border-radius:22px;

}

.tg-platform-content {

    max-width:500px;

}

.tg-platform-content h2 {

    margin-bottom:18px;

    color:#fff;

    font-size:38px;

    line-height:1.25;

}

.tg-platform-content p {

    margin-bottom:25px;

    color:#91A5BD;

    font-size:16px;

    line-height:1.85;

}

.tg-journey {

    display:flex;

    flex-direction:column;

}

.tg-journey-step {

    display:flex;

    align-items:center;

    gap:15px;

}

.tg-journey-step > span {

    display:flex;

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

    flex-shrink:0;

    width:45px;
    height:45px;

    color:#5CB8FF;

    background:rgba(57,168,255,.08);

    border:1px solid rgba(57,168,255,.16);

    border-radius:12px;

    font-size:11px;

    font-weight:800;

}

.tg-journey-step strong {

    display:block;

    margin-bottom:3px;

    color:#fff;

    font-size:14px;

}

.tg-journey-step small {

    color:#758BA5;

    font-size:11px;

}

.tg-journey-line {

    width:1px;

    height:21px;

    margin-left:22px;

    background:rgba(57,168,255,.20);

}


/* =========================================================
   NOTICE
========================================================= */

.tg-notice {

    background:#06101C;

}

.tg-notice-box {

    display:flex;

    align-items:flex-start;

    gap:30px;

    padding:45px;

    background:
        linear-gradient(
            135deg,
            rgba(57,168,255,.07),
            rgba(255,255,255,.018)
        );

    border:1px solid rgba(57,168,255,.14);

    border-radius:20px;

}

.tg-notice-icon {

    display:flex;

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

    flex-shrink:0;

    width:68px;
    height:68px;

    color:#5CB8FF;

    background:rgba(57,168,255,.09);

    border:1px solid rgba(57,168,255,.18);

    border-radius:18px;

    font-size:26px;

}

.tg-notice-content h2 {

    margin-bottom:16px;

    color:#fff;

    font-size:34px;

}

.tg-notice-content p {

    max-width:850px;

    margin-bottom:14px;

    color:#91A5BD;

    font-size:16px;

    line-height:1.85;

}

.tg-notice-content p:last-child {

    margin-bottom:0;

}


/* =========================================================
   MORE RESOURCES
========================================================= */

.tg-resources {

    background:#07121F;

}

.tg-resource-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.tg-resource-card {

    display:flex;

    align-items:center;

    gap:17px;

    padding:25px;

    background:#0B1928;

    border:1px solid rgba(255,255,255,.09);

    border-radius:15px;

    box-shadow:0 7px 22px rgba(0,0,0,.14);

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

}

.tg-resource-card:hover {

    transform:translateY(-4px);

    background:#0E2032;

    border-color:rgba(57,168,255,.28);

    box-shadow:0 14px 32px rgba(0,0,0,.20);

}

.tg-resource-icon {

    display:flex;

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

    flex-shrink:0;

    width:50px;
    height:50px;

    color:#5CB8FF;

    background:rgba(57,168,255,.08);

    border:1px solid rgba(57,168,255,.14);

    border-radius:13px;

}

.tg-resource-card h3 {

    margin-bottom:5px;

    color:#fff;

    font-size:16px;

}

.tg-resource-card p {

    margin:0;

    color:#8298B1;

    font-size:13px;

    line-height:1.6;

}

.tg-resource-arrow {

    margin-left:auto;

    color:#4E7EA2;

    font-size:13px;

    transition:
        transform .25s ease,
        color .25s ease;

}

.tg-resource-card:hover .tg-resource-arrow {

    color:#5CB8FF;

    transform:translateX(4px);

}


/* =========================================================
   CTA
========================================================= */

.tg-cta {

    padding-top:30px !important;

    padding-bottom:100px !important;

    background:#07121F;

}

.tg-cta-box {

    padding:70px 30px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(57,168,255,.12),
            transparent 55%
        ),
        rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

}

.tg-cta-box h2 {

    margin-bottom:16px;

    color:#fff;

    font-size:42px;

}

.tg-cta-box p {

    max-width:650px;

    margin:0 auto;

    color:#91A5BD;

    font-size:17px;

    line-height:1.8;

}

.tg-cta-actions {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:30px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:992px){

    .trading-guides-page .section {

        padding:75px 0;

    }

    .tg-hero {

        min-height:auto;

    }

    .tg-hero-content {

        padding:85px 0;

    }

    .tg-hero h1 {

        font-size:52px;

    }

    .tg-guide-grid {

        grid-template-columns:repeat(2,1fr);

    }

    .tg-process-grid {

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .tg-process-connector {

        display:none;

    }

    .tg-data-box {

        grid-template-columns:1fr;

        gap:40px;

    }

    .tg-platform-box {

        grid-template-columns:1fr;

        gap:45px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:576px){

    .trading-guides-page .section {

        padding:60px 0;

    }

    .tg-hero-content {

        padding:70px 0;

        text-align:center;

    }

    .tg-badge {

        font-size:11px;

    }

    .tg-hero h1 {

        font-size:38px;

        line-height:1.12;

        letter-spacing:-1px;

    }

    .tg-hero p {

        font-size:16px;

        line-height:1.75;

    }

    .tg-hero-actions {

        justify-content:center;

    }

    .tg-btn {

        width:100%;

    }

    .tg-section-heading {

        margin-bottom:38px;

    }

    .tg-section-heading h2 {

        font-size:31px;

    }

    .tg-section-heading p {

        font-size:15px;

    }

    .tg-guide-grid {

        grid-template-columns:1fr;

        gap:16px;

    }

    .tg-guide-card {

        padding:27px 23px;

    }

    .tg-guide-card > p {

        min-height:auto;

    }

    .tg-process-grid {

        grid-template-columns:1fr;

        gap:14px;

    }

    .tg-process-card {

        padding:26px 23px;

    }

    .tg-data-box {

        padding:30px 24px;

    }

    .tg-data-content {

        text-align:center;

    }

    .tg-data-content h2 {

        font-size:29px;

    }

    .tg-data-content p {

        font-size:15px;

    }

    .tg-data-items {

        grid-template-columns:1fr;

    }

    .tg-checklist-grid {

        grid-template-columns:1fr;

        gap:14px;

    }

    .tg-check-item {

        padding:21px;

    }

    .tg-platform-box {

        padding:30px 24px;

        gap:35px;

    }

    .tg-platform-content {

        text-align:center;

    }

    .tg-platform-content h2 {

        font-size:29px;

    }

    .tg-platform-content p {

        font-size:15px;

    }

    .tg-notice-box {

        flex-direction:column;

        padding:30px 24px;

        gap:24px;

        text-align:center;

    }

    .tg-notice-icon {

        margin:0 auto;

    }

    .tg-notice-content h2 {

        font-size:29px;

    }

    .tg-notice-content p {

        font-size:15px;

    }

    .tg-resource-grid {

        grid-template-columns:1fr;

        gap:14px;

    }

    .tg-resource-card {

        padding:22px;

    }

    .tg-cta {

        padding-top:15px !important;

        padding-bottom:70px !important;

    }

    .tg-cta-box {

        padding:50px 22px;

    }

    .tg-cta-box h2 {

        font-size:31px;

    }

    .tg-cta-box p {

        font-size:15px;

    }

}