/*
Author       : themes_master
Template Name: Crptiam - Cryptocurrency ICO Landing Page HTML Template 
Version      : 1.0
*/

/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT DESIGN
    05. START BUY SELL DESIGN
    06. START TOKEN SALE DESIGN
    07. START ROADMAP DESIGN
    08. START DOWNLOAD DESIGN
    09. START TEAM DESIGN
    10. START ADVISOR DESIGN
    11. START PARTNER DESIGN
    12. START FAQ DESIGN
    13. START PROMOTION DESIGN
    14. START CONTACT DESIGN
    15. START BLOG DESIGN
    16. START FOOTER DESIGN
    17. START SECTION TOP DESIGN
  =============================================================*/

/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

body {
    color: #aab2cd;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    background: #151c2b;
    overflow-x: hidden;
}

html,
body {
    height: 100%;
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0px;
    margin-top: 0px;
    font-family: 'Quicksand', sans-serif;
    color: #fff;
    font-weight: 400;
    position: relative;
}

a {
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

p {
    margin-bottom: 0;
    position: relative;
}

ul,
li {
    margin: 0;
    padding: 0;
}

::-webkit-input-placeholder {
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
}

:-moz-placeholder {
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
}

::-moz-placeholder {
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
}

:-ms-input-placeholder {
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
}

.form-control::placeholder {
    color: #fff;
    opacity: 1;
}

fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}

/*START PRELOADER DESIGN*/

.preloader {
    background: #151c2b;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.spinner {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    font-size: 10px;
    text-indent: -12345px;
    z-index: 10000;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffaa17;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.status-mes h4 {
    color: #f7f7f7;
    position: relative;
    font-size: 24px;
    margin-top: 30px;
    text-transform: capitalize;
    letter-spacing: 1px;
}

.no-padding {
    padding: 0
}

/*END PRELOADER DESIGN*/

.section-padding {
    padding: 40px 0;
}

/*START SECTION TITLE DESIGN*/

.section-title {
    margin-bottom: 20px;
}

.section-title h1 {
    font-size: 40px;
    font-weight: 600;
    margin-top: 0;
    position: relative;
    text-transform: capitalize;
}

.hero-text h2 {
    font-size: 55px;
    line-height: 65px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.animated-hero-title {
    background: linear-gradient(90deg, #fff, #ffaa17, #fff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

h1.section-title-white {
    color: #fff;
    font-size: 40px;
    line-height: 70px;
    font-weight: 600;
    margin-top: 0;
    position: relative;
}

p.section-title-white {
    color: #fff;
}

@media only screen and (max-width:768px) {
    .section-title h1 {
        font-size: 40px;
    }
}

@media only screen and (max-width:480px) {
    .section-title h1 {
        font-size: 30px;
    }
}

.section-title span {
    background: #f5325c none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 10px auto;
    width: 100px;
}

.section-title-white {
    color: #fff;
    position: relative;
}

.section-title p {
    padding: 0 10px;
    width: 60%;
    margin: auto;
}

@media only screen and (max-width:480px) {
    .section-title p {
        padding: 0 10px;
        width: 90%;
        margin: auto;
    }
}

/*END SECTION TITLE DESIGN*/

/*START SCROLL TO TOP*/

.topcontrol {
    background: #ffaa17 none repeat scroll 0 0;
    border-radius: 30px;
    bottom: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 50px;
    line-height: 47px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    position: fixed;
    right: 5px;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 50px;
}

@media only screen and (max-width:768px) {
    .topcontrol {
        display: none;
    }
}

.topcontrol:hover {
    background: #222;
    color: #fff;
}

/*END SCROLL TO TOP*/

/*START BUTTON DESING*/

.btn_one {
    background: #ffaa17;
    padding: 10px 36px;
    border: 2px solid #ffaa17;
    color: #fff;
    border-radius: 30px;
    font-size: 16px;
    display: inline-block;
    font-weight: 500;
    position: relative;
    text-transform: capitalize;
    transition: 0.3s;
}

.btn_one:hover,
.btn_one:focus {
    background: none;
    color: #fff;
    border: 2px solid #fff;
}

.btn_two {
    background: rgba(255, 0, 102, 0.85);
    padding: 10px 36px;
    border: 2px solid rgba(255, 0, 102, 0.85);
    color: #fff;
    border-radius: 30px;
    position: relative;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    transition: 0.3s;
}

.btn_two:hover,
.btn_two:focus {
    background: #fff;
    color: #1d1e20;
    border: 2px solid #fff;
}

/*END BUTTON DESING*/

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

.navbar-brand img {
    width: 140px;
    height: auto;
}

.navbar-custom {
    background-color: transparent;
    padding: 20px 0;
    width: 100%;
    border-radius: 0px;
    z-index: 999;
    margin-bottom: 0px;
    border-bottom: 0px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.navbar-custom .navbar-toggler {
    color: #fff;
    font-size: 30px;
    padding: 0px;
}

.navbar-custom .navbar-brand {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5px;
}

.navbar-custom .navbar-nav li a {
    color: #fff !important;
    font-size: 16px;
    background-color: transparent !important;
    margin: 0 5px;
    letter-spacing: 0.5px;
    line-height: 24px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    text-transform: capitalize;
    font-weight: 500;
}

.navbar-custom .navbar-nav li a:hover,
.navbar-custom .navbar-nav li a:active,
.navbar-custom .navbar-nav li a.active {
    color: #fff !important;
}

.navbar-custom .navbar-nav .nav-item:last-child .nav-link {
    margin-right: 0;
    padding-right: 0;
}

.navbar-custom.nav-sticky {
    background-color: #1e2739 !important;
    padding: 15px 0px;
    border-bottom: none;
}

@media (max-width: 1023px) {
    .navbar-custom .nav-social {
        display: none;
    }
}

@media (max-height: 480px) {
    .navbar-nav {
        max-height: 200px;
        overflow-y: auto;
    }
}

@media (min-width: 200px) and (max-width: 812px) {
    .navbar-custom {
        background-color: #1e2739;
        padding: 10px 0px !important;
    }
}

@media (min-width: 200px) and (max-width: 768px) {
    .navbar-custom {
        background-color: #1e2739;
        padding: 10px 0px !important;
    }
}

.mdi-menu::before {
    content: "\F035C";
}

.mdi::before,
.mdi-set {
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/

.home_bg {
    position: relative;
    padding-bottom: 60px;
}

.hero-text h2 {
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    line-height: 68px;
    padding-top: 230px;
    margin-bottom: 20px;
}

@media only screen and (max-width:768px) {
    .hero-text h2 {
        font-size: 42px;
        line-height: 52px;
    }
}

@media only screen and (max-width:480px) {
    .hero-text h2 {
        font-size: 32px;
    }
}

.hero-text p {
    margin-top: 20px;
    color: #fff;
}

.home_btn {
    margin-top: 40px;
}

.home_btn a {
    margin-right: 10px;
}

/*START COUNTDOWN*/

.buy-icons {
    overflow: hidden;
    margin-top: 150px;
    padding: 40px;
    border: 2px solid #1e2739;
}

@media only screen and (max-width:480px) {
    .buy-icons {
        padding: 20px;
    }
}

.ca-starts-in .timer-area {
    margin: 40px 0;
}

.ca-starts-in h3 {
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 36px;
}

.ca-starts-in .timer-area div {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.ca-starts-in .timer-area div .cdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
    max-width: 25%;
    display: block;
    background: #1e2739;
    border-radius: 5px;
    text-align: center;
    margin-right: 16px;
    padding: 15px;
}

@media only screen and (max-width:480px) {
    .ca-starts-in .timer-area div .cdown {
        padding: 10px;
    }
}

.ca-starts-in .timer-area div .cdown:last-child {
    margin-right: 0;
}

.ca-starts-in .timer-area div .cdown .time-count {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
    font-weight: 700;
}

@media only screen and (max-width:480px) {
    .ca-starts-in .timer-area div .cdown .time-count {
        font-size: 22px;
    }
}

.ca-starts-in .timer-area div .cdown p {
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 14px;
    font-weight: 600;
}

.ca-starts-in a {
    margin-right: 10px;
}

.payment_img {
    margin-top: 30px;
}

.payment_img a img {
    display: inline-block;
    width: 60px;
    padding: 5px;
}

.buy-icons-img {
    padding-top: 200px;
}

@media only screen and (max-width:768px) {
    .buy-icons-img {
        padding-top: 80px;
    }
}

/*END COUNTDOWN*/

/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

.about_us {
    padding-bottom: 50px;
}

.single_about {
    padding: 0 10px;
    margin-bottom: 30px;
    border-radius: 5px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single_about img {
    float: left;
    width: 60px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.single_about h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    overflow: hidden;
}

.single_about p {
    overflow: hidden;
}

.about-img {
    text-align: center;
}

.about-img img {
    margin-bottom: 50px;
}

.about-text {}

.about-text h2 {
    margin-bottom: 30px;
    font-size: 60px;
    font-weight: 500;
}

@media only screen and (max-width:480px) {
    .about-text h2 {
        font-size: 40px;
    }
}

.about-text p {
    margin-bottom: 20px
}

.about-bold {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.about_btn {
    margin-top: 30px;
}

/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 05.START BUY SELL DESIGN
* ----------------------------------------------------------------------------------------
*/

.buy_sell_list {
    margin-bottom: 30px;
    background: #1e2739;
    padding: 30px;
    border-radius: 2px;
}

.buy_sell_list h4 {
    font-weight: 600;
    font-size: 20px;
}

.buy_sell_list img {
    float: left;
    margin-right: 20px;
    width: 60px;
    margin-bottom: 20px;
}

.buy_sell_list p {
    overflow: hidden;
}

@media only screen and (max-width:768px) {
    .portfolio_list_img {
        margin-top: 40px;
        margin-bottom: 40px;
        text-align: center;
    }
}

.how_to_buy_area {}

.single_how_to_buy {
    padding: 40px;
    padding-top: 0;
}

.single_how_to_buy img {
    width: 60px;
    margin-bottom: 20px;
}

.single_how_to_buy h4 {
    font-weight: 600;
    font-size: 20px;
}

.single_how_to_buy p {}

/*
* ----------------------------------------------------------------------------------------
* 05.END BUY SELL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 06.START TOKEN SALE DESIGN
* ----------------------------------------------------------------------------------------
*/

.token_sale_area {}

.token_content {
    margin-bottom: 50px;
}

.token_content h2 {
    margin-bottom: 15px;
    font-weight: 600;
}

.token_content p {}

.single_token {
    margin-bottom: 30px;
    padding: 25px 10px;
    border-radius: 500px;
}

.single_token h4 {
    font-weight: 600;
    font-size: 18px;
}

.single_token p {
    color: #fff;
}

.single_token_bg_one {
    background: #5fc0d8;
}

.single_token_bg_two {
    background: #6f4cf2;
}

.single_token_bg_three {
    background: #c660e8;
}

.single_token_bg_four {
    background: #05b169;
}

.single_token_bg_five {
    background: #f2924c;
}

.single_token_bg_six {
    background: #e8606f;
}

.single_token_bg_seven {
    background: #1652f0;
}

.single_token_bg_eight {
    background: #3DB2FF;
}

.currency_content {
    background: #1e2739;
    padding: 60px;
    border-radius: 5px;
}

.currency_content h3 {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
}

.currency_content p {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 30px;
}

.cryptonatorwidget {
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px;
}

.cryptonatorwidget input {
    border: 2px solid rgba(255, 255, 255, 0.2);
    height: 52px !important;
    margin-bottom: 5px;
    text-transform: capitalize;
    background: none;
    color: #fff;
    padding: 0 10px;
    border-radius: 2px;
    font-family: 'Poppins', sans-serif !important;
}

.cryptonatorwidget select {
    border: 2px solid rgba(255, 255, 255, 0.2);
    height: 52px !important;
    margin-bottom: 5px;
    text-transform: capitalize;
    background: none;
    color: #fff;
    padding: 0 10px;
    font-family: 'Poppins', sans-serif !important;
    border-radius: 2px;
}

.cryptonatorwidget>div {
    display: none;
}

.token-img h4 {
    font-weight: 600;
}

.fund-img h4 {
    font-weight: 600;
}

/*
* ----------------------------------------------------------------------------------------
* 06.END TOKEN SALE DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
 * ----------------------------------------------------------------------------------------
 * 07.START ROADMAP DESIGN
 * ----------------------------------------------------------------------------------------
*/

/* Final Professional Horizontal Roadmap */
.timeline {
    position: relative;
    width: 100%;
    margin: 250px auto 180px auto; /* Increased top margin significantly to clear title */
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(255, 170, 23, 0.4);
    top: 50%;
    left: 0;
    z-index: 1;
}

.time_contain {
    position: relative;
    width: 150px;
    z-index: 2;
    display: flex;
    justify-content: center;
}

/* The Dot on the Line */
.time_contain::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #151c2b;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    z-index: 5;
}

/* Vertical Connector Line */
.time_contain::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 80px;
    background: rgba(255, 170, 23, 0.3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* TOP Content (time_left) */
.time_left::before { bottom: 50%; } /* Line goes UP */
.time_left .time_content {
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}

/* BOTTOM Content (time_right) */
.time_right::before { top: 50%; } /* Line goes DOWN */
.time_right .time_content {
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.time_content {
    position: absolute;
    width: 260px;
    background: rgba(21, 28, 43, 0.98);
    padding: 20px;
    border: 1px solid rgba(255, 170, 23, 0.3);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.time_content:hover {
    border-color: #ffaa17;
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 15px 40px rgba(255, 170, 23, 0.2);
}

.time_content h2 {
    font-size: 16px;
    font-weight: 700;
    color: #ffaa17;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.time_content h2 span {
    font-size: 12px;
    color: #8892b0;
    display: block;
    margin-top: 2px;
}

.time_content p {
    font-size: 13px;
    color: #ccd6f6;
    line-height: 1.5;
    margin: 0;
}

/*
 * ----------------------------------------------------------------------------------------
 * 07.END ROADMAP DESIGN
 * ----------------------------------------------------------------------------------------
 */

/*
 * ----------------------------------------------------------------------------------------
 * 08.START DOWNLOAD DESIGN
 * ----------------------------------------------------------------------------------------
 */

.download_area {}

.app-text {
    overflow: hidden;
}

.app-text h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: capitalize;
}

.app-text p {
    margin-bottom: 50px;
    color: #fff;
}

.app-text ul {
    list-style: none;
    margin-top: 30px;
}

.app-text ul li {
    font-size: 20px;
    line-height: 36px;
    float: left;
    margin-right: 20px;
    position: relative;
    color: #fff;
    width: 250px;
    margin-bottom: 20px;
}

.app-text ul li span {
    font-size: 16px;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border-radius: 30px;
    margin-right: 10px;
    display: inline-block;
    border: 2px solid #1e2739;
}

.app_btn {
    margin-top: 30px;
}

.app_btn a {
    margin-right: 15px;
}

@media only screen and (max-width:480px) {
    .app_btn a {
        margin-bottom: 15px;
    }
}

.app_btn a i {
    margin-right: 8px;
}

@media only screen and (max-width:768px) {
    .app_img {
        margin-top: 40px;
        text-align: center;
    }
}

/*
 * ----------------------------------------------------------------------------------------
 * 08.END DOWNLOAD DESIGN
 * ----------------------------------------------------------------------------------------
 */

/*
* ----------------------------------------------------------------------------------------
* 09.START TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/

.team_member {
    padding-bottom: 50px;
    overflow: hidden;
}

.our-team {
    background: #1e2739;
    padding: 30px;
    margin-bottom: 30px;
}

.our-team img {
    width: 160px;
    height: 160px;
    border-radius: 500px;
    margin-bottom: 30px;
}

.our-team h3 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 15px;
}

.our-team ul {
    margin-bottom: 10px;
    list-style: none;
}

.our-team ul li {
    display: inline-block;
}

.our-team ul li a {
    margin: 0 10px;
    color: #fff;
    transition: 0.3s;
    display: inline-block;
    position: relative;
}

.our-team ul li a:hover {
    color: #ffaa17;
}

.our-team span {
    position: relative;
}

/*
* ----------------------------------------------------------------------------------------
* 09.END TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 10.START BOARD ADVISOR DESIGN
* ----------------------------------------------------------------------------------------
*/

.board_member {
    padding-bottom: 50px;
}

.our-board {
    margin-bottom: 30px;
}

.our-board img {
    width: 160px;
    height: 160px;
    border-radius: 500px;
    margin-bottom: 30px;
}

.our-board h3 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 15px;
}

.our-board ul {
    margin-bottom: 10px;
    list-style: none;
}

.our-board ul li {
    display: inline-block;
}

.our-board ul li a {
    margin: 0 10px;
    color: #fff;
    transition: 0.3s;
    display: inline-block;
    position: relative;
}

.our-board ul li a:hover {
    color: #ffaa17;
}

.our-board span {
    position: relative;
}

/*
* ----------------------------------------------------------------------------------------
* 10.END BOARD ADVISOR DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 11.START PARTNER DESIGN
* ----------------------------------------------------------------------------------------
*/

.partner_area {
    padding-bottom: 50px;
}

.partner-logo {}

.partner-logo img {
    margin-bottom: 30px;
    width: 100px;
}

/*
* ----------------------------------------------------------------------------------------
* 11.END PARTNER DESIGN
* ----------------------------------------------------------------------------------------
*/

/* ----------------------------------------------------------------------------------------
* 12.START FAQ DESIGN
* ----------------------------------------------------------------------------------------
*/

.faq1-area {}

.accordion-item {
    background-color: #1e2739;
    border: 0px solid #4a516b;
    margin-bottom: 30px;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 20px;
    color: #fff;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
    background: #1e2739;
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #1e2739;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
    content: "\f077";
    font-family: fontAwesome;
    font-size: 14px;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.02rem;
    margin-left: auto;
    content: "";
    transition: transform .2s ease-in-out;
    content: "\f077";
    font-family: fontAwesome;
    font-size: 14px;
}

.faq-img {
    margin-top: 30px;
}

@media only screen and (max-width:768px) {
    .faq-img {
        margin-top: 40px;
        text-align: center;
    }
}

/* ----------------------------------------------------------------------------------------
* 12.END FAQ DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
 * ----------------------------------------------------------------------------------------
 * 13.START PROMOTION DESIGN
 * ----------------------------------------------------------------------------------------
 */

.promotion_area {
    background: #1e2739;
    padding: 80px 0;
}

.newsletter_form {}

.newsletter_form h4 {
    margin-bottom: 30px;
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
}

.newsletter_form input {
    height: 55px;
    position: relative;
    padding: 10px 20px;
    width: 60%;
    margin-right: 10px;
    border-radius: 30px;
    border: 1px solid #fff;
}

@media only screen and (max-width:480px) {
    .newsletter_form input {
        margin-bottom: 15px;
    }
}

.newsletter_form input:focus {
    border: 1px solid #ffaa17;
}

/*
 * ----------------------------------------------------------------------------------------
 * 13.END PROMOTION DESIGN
 * ----------------------------------------------------------------------------------------
 */

/*
* ----------------------------------------------------------------------------------------
* 14.START CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/

.contact_us {}

.contact {
    margin-right: 30px;
}

@media only screen and (max-width:768px) {
    .contact {
        margin-bottom: 60px;
        margin-right: 0px;
    }
}

.contact h4 {
    font-weight: 700;
    font-size: 40px;
}

.contact p {
    margin-bottom: 40px;
}

.contact input {
    background: #1e2739;
    border-radius: 0px;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 30px;
    height: 70px;
    padding: 10px 10px 10px 30px;
    width: 100%;
    border: 1px solid #1e2739;
    position: relative;
}

.contact textarea {
    background: #1e2739;
    border-radius: 0px;
    margin-bottom: 30px;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 10px 10px 30px;
    width: 100%;
    border: 1px solid #1e2739;
    position: relative;
}

.contact input:focus {
    border: 1px solid #ffaa17;
    background: #1e2739;
    color: #fff;
    box-shadow: none;
    outline: 0 none;
}

.contact textarea:focus {
    border: 1px solid #ffaa17;
    background: #1e2739;
    color: #fff;
    box-shadow: none;
    outline: 0 none;
}

.contact button {
    width: 100%;
    font-size: 16px;
}

.address_bg {
    background: #1e2739;
    padding: 40px;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .1);
    border-radius: 3px;
}

.single_address {
    margin-bottom: 30px;
    border-bottom: 1px solid #3d4460;
    padding-bottom: 30px;
}

.single_address:last-child {
    border-bottom: 0px;
    margin-bottom: 0;
    padding-bottom: 0px;
}

@media only screen and (max-width:768px) {
    .single_address {
        margin-bottom: 70px;
    }
}

.address_br {
    float: left;
}

.single_address span {
    color: #ffaa17;
    font-size: 30px;
    margin-bottom: 20px;
    display: block;
    margin-right: 20px;
    position: relative;
}

.single_address h4 {
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
}

.single_address p {
    overflow: hidden;
}

.contact_btn {
    background: #ffaa17;
    padding: 10px;
    color: #fff;
    position: relative;
    text-transform: capitalize;
    font-weight: 600;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.contact_btn:hover {
    background: #1e2739;
    color: #fff;
}

.map {}

.map iframe {
    width: 100%;
    height: 500px;
    margin-bottom: -8px;
}

/*
* ----------------------------------------------------------------------------------------
* 14.END CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 15.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/

.blog_bg {
    background: #f4f5f7;
}

.blog_area {
    padding-bottom: 50px;
}

.single_blog {
    background: #1e2739;
    margin-bottom: 30px;
}

@media only screen and (max-width:768px) {
    .single_blog {
        margin-bottom: 30px;
    }
}

.blog-img {}

.blog-img img {
    position: relative;
}

@media only screen and (max-width:768px) {
    .blog-img img {
        width: 100%;
    }
}

.blog-img a {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    margin-top: 20px;
    position: relative;
}

.single_blog h2 {
    font-weight: 700;
    line-height: 30px;
    font-size: 20px;
    margin: 0 20px;
}

.single_blog h2 a {
    color: #fff;
}

.single_blog h2 a:hover {
    color: #ffaa17;
}

.single_blog span {
    text-transform: capitalize;
    padding: 0 10px;
    margin-bottom: 15px;
    display: inline-block;
    font-weight: 600;
    margin-top: 10px;
}

.single_blog span a {
    color: #ffaa17;
    position: relative;
}

.single_blog>a {
    margin: 20px 0;
    margin-bottom: 30px;
}

.single_blog>a:hover {}

/*BLOG PAGES DESIGN*/

.blog-page {}

.post-slide-blog {
    background: #1e2739 none repeat scroll 0 0;
    border-radius: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .08);
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    padding: 40px;
}

.blog-img img {
    position: relative;
}

@media only screen and (max-width:768px) {
    .blog-img img {
        width: 100%;
    }
}

.post-slide-blog h2 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
}

.post-slide-blog h2 a {
    color: #fff;
}

.post-slide-blog h2 a:hover {
    color: #ffaa17;
}

.post-slide-blog span {
    text-transform: capitalize;
    padding-right: 10px;
    margin-bottom: 15px;
    display: inline-block;
    font-weight: 600;
    margin-top: 20px;
}

.post-slide-blog span a {
    color: #ffaa17;
}

.post-slide-blog>a {
    margin-bottom: 0px;
}

.post-slide-blog p {
    margin-bottom: 30px;
}

/*START PAGINATION*/

ul.blog_pagination li a {
    border: 1px solid #1e2739;
    border-radius: 30px;
    color: #fff;
    display: block;
    font-size: 22px;
    font-weight: 500;
    background: #1e2739;
    height: 60px;
    line-height: 60px;
    position: relative;
    margin: 5px;
    text-align: center;
    width: 60px;
}

ul.blog_pagination li a:hover {
    color: #fff;
    background: #ffaa17;
    border: 1px solid #ffaa17;
}

/*END PAGINATION*/

/*START BLOG SIDEBAR DESIGN*/

.contact_form_blog {
    padding-top: 0px !important;
}

.blog_sidebar_title {
    border-bottom: 1px solid #303a4f;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: x;
    margin-bottom: 15px;
    margin-top: 0;
    padding-bottom: 10px;
    text-transform: capitalize;
}

.blog_search,
.latest_blog,
.advertisement_post,
.video_post,
.categories,
.tag,
.banner {
    margin-bottom: 30px;
    background: #1e2739;
    padding: 30px 30px;
    position: relative;
    border-radius: 10px;
    border-top: 3px solid #ffaa17;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
}

.tag {
    overflow: hidden;
}

@media only screen and (max-width:768px) {
    .blog_search {
        margin-top: 60px
    }
}

.blog_search {}

.blog_search input {
    background: none;
    border: 1px solid #303a4f;
    border-radius: 0;
    color: #fff;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    height: 50px;
}

.blog_search input:focus {
    background: none;
    border: 1px solid #ffaa17;
    color: #fff;
}

.single_latest_blog {
    overflow: hidden;
    border-bottom: 1px solid #303a4f;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.single_latest_blog h4 {
    color: #aab2cd;
    font-size: 15px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single_latest_blog:hover h4 {
    color: #ffaa17
}

.single_latest_blog span {
    color: #161616
}

.single_upcoming_event {
    margin-bottom: 20px;
}

.single_upcoming_event h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 28px;
    margin: 10px 0 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single_upcoming_event:hover h4 {
    color: #ffaa17
}

.single_upcoming_event span i {
    margin-right: 5px;
    color: #ffaa17
}

.single_upcoming_event span {
    color: #777
}

.categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.categories ul li {}

.categories ul li a {
    color: #aab2cd;
    display: block;
    font-size: 14px;
    padding: 5px 0;
    font-family: poppins;
    font-weight: 400;
}

.categories ul li a:hover {
    color: #ffaa17
}

.categories ul li a i {
    margin-right: 10px
}

.video_post iframe {
    width: 100%;
    height: 100%;
    border: medium none;
}

.tag a {
    border: 2px solid #303a4f;
    border-radius: 30px;
    color: #fff;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: 600;
    margin: 6px 4px;
    padding: 3px 15px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: none;
}

.tag a:hover {
    background: #ffaa17;
    color: #fff;
    border: 2px solid #ffaa17;
}

/*END BLOG SIDEBAR DESIGN*/

/*START BLOG SINGLE PAGE DESIGN*/

.bc_left {
    padding-left: 30px;
    font-style: italic;
    font-weight: 600;
}

.bc_bottom {
    margin-bottom: 30px;
}

.single_blog_post {
    margin-bottom: 60px
}

.single_blog_post img {
    width: 750px;
    height: 455px;
}

.blog_post_text h4 {
    margin: 30px 0
}

.author_part {
    margin-bottom: 30px;
    overflow: hidden;
    margin-top: 60px;
}

.single_author {
    background: #1e2739 none repeat scroll 0 0;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .08);
    overflow: hidden;
}

.author_part img {
    border: 4px solid #ffaa17;
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-right: 20px;
    width: 120px;
}

.author_part h4 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}

.author_part p {
    margin-bottom: 0
}

.blog_head_title {
    border-bottom: 1px solid #303a4f;
    margin: 0 0 30px;
    padding-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
}

.comments_part {
    margin-bottom: 60px;
}

.single_comment {
    margin-bottom: 30px;
    background: #1e2739;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .08);
    overflow: hidden;
}

.single_comment_mbnone {
    margin-bottom: 0px
}

.single_comment img {
    border: 4px solid #ffaa17;
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-right: 20px;
    width: 120px;
}

.single_comment h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.single_comment p {
    margin-bottom: 0
}

.comment-box {
    padding: 40px;
    border-radius: 10px;
}

.comment_form input,
.comment_form textarea {}

.comment_form textarea {}

@media only screen and (max-width:768px) {
    .comment_form textarea {
        width: 100%
    }
}

/*END BLOG SINGLE PAGE DESIGN*/

/*
* ----------------------------------------------------------------------------------------
* 15.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 16.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/

.footer {
    padding-bottom: 50px;
    padding-top: 80px;
}

.footer_menu {
    margin-bottom: 20px;
}

.footer_menu ul {
    list-style: none;
    text-align: center;
}

.footer_menu ul li {
    display: inline-block;
}

.footer_menu ul li a {
    color: #fff;
    padding: 0 10px;
    position: relative;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.footer_menu ul li a:hover {
    color: #ffaa17;
    text-decoration: underline;
}

/*START FOOTER SOCIAL DESIGN*/

.footer_profile {
    margin-bottom: 40px;
}

.footer_profile ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}

.footer_profile ul li {
    display: inline-block;
}

@media only screen and (max-width:480px) {
    .footer_profile ul li {
        margin: 2px;
    }
}

.footer_profile ul li a img {
    width: 60px;
}

.footer_profile ul li a {
    background: #1e2739;
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    position: relative;
    margin-right: 5px;
    border-radius: 50%;
    line-height: 40px;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: .3s;
    transition: .3s;
    color: #fff;
}

.footer_profile ul li a:hover {
    background: #ffaa17;
}

/*END FOOTER SOCIAL DESIGN*/

.footer_copyright {
    margin-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/*
* ----------------------------------------------------------------------------------------
* 16.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 15.START SECTION TOP DESIGN
* ----------------------------------------------------------------------------------------
*/

.section-top {
    padding-bottom: 100px;
    padding-top: 160px;
    position: relative;
}

.section-top-title h1 {
    color: #fff;
    font-weight: 600;
}

/*
* ----------------------------------------------------------------------------------------
* 15.END SECTION TOP DESIGN
* ----------------------------------------------------------------------------------------
*/

.single_about, .buy_sell_list, .single_how_to_buy, .our-team, .single_token {
    background: rgba(30, 39, 57, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.single_about:hover, .buy_sell_list:hover, .our-team:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 170, 23, 0.3);
}

.performance-stats div {
    background: rgba(255, 255, 255, 0.02);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Horizontal Roadmap */
.horizontal-roadmap {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 60px 0;
    overflow-x: auto;
}

.horizontal-roadmap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 170, 23, 0.3);
    z-index: 1;
}

.roadmap-item {
    flex: 1;
    min-width: 200px;
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 0 15px;
}

.roadmap-date {
    background: #ffaa17;
    color: #151c2b;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
}

.roadmap-date::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #ffaa17;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffaa17;
}

.roadmap-content {
    background: rgba(30, 39, 57, 0.6);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
}

.roadmap-content h4 {
    color: #ffaa17;
    margin-bottom: 10px;
}

/* Hero Badge */
.hero-badge {
    display: inline-block;
    background: rgba(255, 170, 23, 0.1);
    border: 1px solid #ffaa17;
    padding: 10px 20px;
    border-radius: 30px;
    margin-top: 20px;
    animation: pulse 2s infinite;
}

.hero-badge i {
    color: #ffaa17;
    margin-right: 10px;
}

/* High-Tech Strategy Modules */
.perspective-card {
    height: 380px;
    margin-bottom: 40px;
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
}

.perspective-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #ffaa17, transparent);
    opacity: 0; transition: 0.5s;
}

.perspective-card:hover {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 170, 23, 0.3);
    transform: translateY(-15px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}

.perspective-card:hover::before { opacity: 1; }

.p-card-inner {
    padding: 40px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-icon {
    width: 80px; height: 80px;
    background: rgba(255, 170, 23, 0.05);
    border: 1px solid rgba(255, 170, 23, 0.1);
    border-radius: 20px;
    margin: 0 auto 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    color: #ffaa17;
    transition: 0.5s;
}

.perspective-card:hover .p-icon {
    background: #ffaa17;
    color: #151c2b;
    box-shadow: 0 0 30px rgba(255, 170, 23, 0.4);
    transform: rotateY(360deg);
}

.p-card-inner h3 { font-size: 28px; font-weight: 800; margin-bottom: 15px; color: #fff; }
.p-card-inner p { font-size: 15px; color: rgba(255, 255, 255, 0.4); line-height: 1.6; }

.strategy-status {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 900;
    color: #00ff88;
    letter-spacing: 2px;
}

.status-bar {
    width: 70px; height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.status-fill {
    width: 100%; height: 100%;
    background: #00ff88;
    animation: barFlow 2s infinite linear;
}

@keyframes barFlow {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-lg-4 {
    display: flex;
    flex-direction: column;
}

/* Enhanced 3D Trading Cube */
.trading-3d-element {
    width: 300px;
    height: 300px;
    margin: 40px auto;
    perspective: 1500px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 25s infinite linear;
}

.cube-face {
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(21, 28, 43, 0.95);
    border: 1px solid rgba(255, 170, 23, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 50px rgba(255, 170, 23, 0.1);
    padding: 10px;
}

/* Dense Trading Candles Styling */
.candles-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 180px;
}

.candle {
    width: 8px;
    background: #00ff88;
    position: relative;
    border-radius: 1px;
    animation: growCandle 4s infinite alternate ease-in-out;
}

.candle:nth-child(2n) { animation-delay: 0.5s; }
.candle:nth-child(3n) { animation-delay: 1s; }
.candle:nth-child(4n) { animation-delay: 1.5s; }

.candle::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 1.5px;
    height: calc(100% + 20px);
    background: inherit;
    transform: translateX(-50%);
}

.candle.bear {
    background: #ff4d4d;
}

/* Liquidity Bubbles Styling */
.liquidity-bubbles {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.05) 0%, transparent 70%);
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    animation: bubblePulse 4s infinite ease-in-out;
}

.b1 { width: 40px; height: 40px; top: 20%; left: 20%; animation-delay: 0s; }
.b2 { width: 60px; height: 60px; top: 50%; left: 60%; animation-delay: 1s; background: rgba(255, 77, 77, 0.2); box-shadow: 0 0 20px rgba(255, 77, 77, 0.3); }
.b3 { width: 30px; height: 30px; top: 70%; left: 30%; animation-delay: 2s; }
.b4 { width: 50px; height: 50px; top: 10%; left: 70%; animation-delay: 3s; background: rgba(255, 170, 23, 0.2); box-shadow: 0 0 20px rgba(255, 170, 23, 0.3); }

.liquidity-label {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Premium Crypto Orbs Styling */
.crypto-assets-premium {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.asset-orb {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffaa17;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.1);
    animation: orbRotate 6s infinite linear;
}

.asset-orb:nth-child(2) { color: #5f7ad3; animation-direction: reverse; }
.asset-orb:nth-child(3) { color: #00ff88; }

/* Glowing RSI Premium Styling */
.rsi-wave-premium {
    width: 100%;
    padding: 20px;
    text-align: center;
}

.rsi-wave-premium svg {
    width: 100%;
    height: 60px;
    filter: drop-shadow(0 0 15px #00ff88);
}

.rsi-pulse {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(90deg, #ffaa17, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGlow 2s infinite alternate;
}

/* Trading Compass Styling */
.trading-compass {
    width: 180px;
    height: 180px;
}
/* Quantum Legacy Engine - Elite Redesign */
.quantum-neural-engine {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.1), transparent 70%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.engine-core {
    width: 200px;
    height: 200px;
    border: 2px solid rgba(0, 242, 255, 0.3);
    border-radius: 50%;
    position: relative;
    animation: coreSpin 20s infinite linear;
}

.engine-core::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border: 1px dashed #ffaa17;
    border-radius: 50%;
    animation: coreSpin 10s infinite linear reverse;
}

.mesh-node {
    width: 8px; height: 8px;
    background: #00f2ff;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 15px #00f2ff;
}

.mn1 { top: 0; left: 50%; transform: translateX(-50%); }
.mn2 { bottom: 0; left: 50%; transform: translateX(-50%); }
.mn3 { left: 0; top: 50%; transform: translateY(-50%); }
.mn4 { right: 0; top: 50%; transform: translateY(-50%); }

.engine-glow {
    position: absolute;
    width: 100%; height: 100%;
    background: repeating-conic-gradient(from 0deg, rgba(0, 242, 255, 0.1) 0deg 10deg, transparent 10deg 20deg);
    border-radius: 50%;
    animation: corePulse 4s infinite ease-in-out;
}

@keyframes coreSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes corePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.engine-data-label {
    position: absolute;
    bottom: -60px;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 8px;
    text-shadow: 0 0 15px #00f2ff;
}

.compass-ring {
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(255, 170, 23, 0.5);
    border-radius: 50%;
    animation: rotateCompass 10s infinite linear;
}

.compass-needle {
    width: 4px;
    height: 80px;
    background: linear-gradient(to bottom, #ffaa17, transparent);
    position: absolute;
    top: 50px;
    transform-origin: bottom center;
    animation: needleWobble 4s infinite ease-in-out;
}

.compass-coords {
    position: absolute;
    bottom: -30px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

/* New Aesthetic Animations */
@keyframes bubblePulse {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.4; }
    50% { transform: scale(1.2) translateY(-20px); opacity: 0.8; }
}

@keyframes orbRotate {
    0% { transform: perspective(500px) rotateY(0deg) translateY(0); }
    50% { transform: perspective(500px) rotateY(180deg) translateY(-10px); }
    100% { transform: perspective(500px) rotateY(360deg) translateY(0); }
}

@keyframes textGlow {
    from { filter: drop-shadow(0 0 2px #ffaa17); }
    to { filter: drop-shadow(0 0 10px #00ff88); }
}

@keyframes rotateCompass {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes needleWobble {
    0%, 100% { transform: rotate(45deg); }
    50% { transform: rotate(135deg); }
}

/* My Core Trading Disciplines - Ultimate v4 Holographic Cylinder */
.disciplines-terminal-v4 {
    width: 100%;
    padding: 0;
    position: relative;
    background: transparent;
    overflow: hidden;
}

.terminal-constellation {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.5), transparent);
    opacity: 0.5;
}

/* Header Spacing */
.disciplines-header-top {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.header-diamond-ring {
    width: 40px;
    height: 40px;
    border: 2px solid #ffaa17;
    transform: rotate(45deg);
    position: relative;
    box-shadow: 0 0 20px rgba(255, 170, 23, 0.4);
}

.premium-title { 
    font-size: 55px; 
    font-weight: 800; 
    color: #fff; 
    letter-spacing: -2px; 
    margin-bottom: 20px; 
    animation: titleGlowFade 3s ease-in-out infinite alternate;
}

@keyframes titleGlowFade {
    from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.1); transform: translateY(0); }
    to { text-shadow: 0 0 30px rgba(0, 242, 255, 0.4); transform: translateY(-5px); }
}

.premium-subtitle { font-size: 20px; color: rgba(255, 255, 255, 0.6); max-width: 800px; margin: 0 auto; line-height: 1.6; }

.terminal-main-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 0;
    position: relative;
}

.terminal-side-col {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    z-index: 10;
}

/* Glass Card v4 */
.discipline-glass-card {
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 40px;
    position: relative;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.discipline-glass-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 170, 23, 0.4);
}

.card-edge-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 25px;
    pointer-events: none;
    box-shadow: inset 0 0 30px rgba(0, 242, 255, 0.05);
}

.card-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.icon-orb-wrap {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.orb-ring {
    position: absolute;
    width: 100%; height: 100%;
    border: 1.5px solid rgba(0, 242, 255, 0.3);
    border-radius: 50%;
    animation: orbPulse 3s infinite alternate;
}

.icon-orb-wrap i { font-size: 30px; color: #ffaa17; filter: drop-shadow(0 0 10px #ffaa17); }

.text-wrap h3 { color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.text-wrap p { color: rgba(255, 255, 255, 0.4); font-size: 14px; line-height: 1.6; }

.card-footer-tags {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.card-footer-tags span {
    font-size: 11px;
    font-weight: 800;
    color: rgba(0, 242, 255, 0.8);
    letter-spacing: 2px;
}

/* Circuit Lines */
.circuit-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, #ffaa17, transparent);
    pointer-events: none;
}

.c-left-top { width: 100px; right: -100px; top: 50%; }
.c-left-bottom { width: 100px; right: -100px; top: 50%; }
.c-right-top { width: 100px; left: -100px; top: 50%; transform: rotate(180deg); }
.c-right-bottom { width: 100px; left: -100px; top: 50%; transform: rotate(180deg); }

.circuit-dot {
    position: absolute;
    width: 6px; height: 6px;
    background: #ffaa17;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffaa17;
    animation: dotFlow 2s infinite linear;
}

@keyframes dotFlow {
    from { left: 0; opacity: 0; }
    50% { opacity: 1; }
    to { left: 100%; opacity: 0; }
}

/* Holographic Chamber */
.holographic-chamber-wrap {
    width: 450px;
    display: flex;
    justify-content: center;
    position: relative;
}

.chamber-platform {
    width: 450px;
    height: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.holo-cylinder {
    width: 280px;
    height: 450px;
    position: relative;
    transform-style: preserve-3d;
}

.cylinder-top-cap {
    width: 100%; height: 40px;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border: 2px solid #ffaa17;
    border-radius: 50% / 20%;
    box-shadow: 0 -10px 40px rgba(255, 170, 23, 0.3);
}

.cylinder-glass {
    width: 100%; height: 370px;
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.05), rgba(0, 242, 255, 0.1) 50%, rgba(0, 242, 255, 0.05));
    border-left: 1px solid rgba(0, 242, 255, 0.2);
    border-right: 1px solid rgba(0, 242, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.cylinder-bottom-cap {
    width: 100%; height: 40px;
    background: linear-gradient(0deg, #1e293b, #0f172a);
    border: 2px solid #ffaa17;
    border-radius: 50% / 20%;
    box-shadow: 0 10px 40px rgba(255, 170, 23, 0.3);
}

/* Globe and Charts */
.holo-globe-wrap {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 242, 255, 0.1), transparent 70%);
    border-radius: 50%;
}

.globe-mesh {
    width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/grid-me-bright.png');
    background-size: 40px;
    border-radius: 50%;
    animation: rotateGlobe 20s infinite linear;
    opacity: 0.3;
}

@keyframes rotateGlobe {
    from { background-position: 0 0; }
    to { background-position: 200px 0; }
}

.holo-candlesticks {
    position: absolute;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0, 255, 136, 0.2) 10px, rgba(0, 255, 136, 0.2) 15px);
    mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    animation: dataScroll 10s infinite linear;
}

/* Neural Core Hub Animation */
.tag-inner {
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px; /* Matched height with cards */
}

.neural-core-viz {
    width: 150px;
    height: 150px;
    position: relative;
    margin-bottom: 25px;
}

.core-ring {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 2px solid rgba(255, 170, 23, 0.3);
    border-radius: 50%;
    animation: coreSpin 10s infinite linear;
}

.core-ring.inner {
    top: 20%; left: 20%; width: 60%; height: 60%;
    border-color: rgba(0, 242, 255, 0.3);
    animation-duration: 5s;
    animation-direction: reverse;
}

.core-brain-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: #ffaa17;
    filter: drop-shadow(0 0 20px #ffaa17);
    animation: brainPulse 2s infinite alternate;
}

@keyframes brainPulse {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    to { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.data-stream {
    position: absolute;
    width: 2px; height: 40px;
    background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
    animation: streamFlow 3s infinite linear;
}

@keyframes streamFlow {
    from { top: -50px; opacity: 0; }
    50% { opacity: 1; }
    to { top: 200px; opacity: 0; }
}

.main-tag { display: block; color: #ffaa17; font-weight: 900; font-size: 18px; letter-spacing: 3px; margin-bottom: 5px; }
.sub-tag { display: block; color: rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 700; letter-spacing: 2px; }

/* Section Spacing Fix */
.roadmap_area {
    padding-bottom: 120px;
}

.download_area {
    padding-top: 120px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ticker Bar v4 - Transparent Floating Style */
.ultimate-ticker-v4 {
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-around;
    padding: 25px 40px;
    margin-top: 50px;
    position: relative;
}

.ultimate-ticker-v4::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 170, 23, 0.4), transparent);
}

.ticker-item-v4 {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pair-icon { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pair-icon img { width: 100%; height: 100%; object-fit: cover; }
.coin-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; }
.btc { background: #f7931a; }
.gold { background: #d4af37; }

.pair-name { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.pair-price { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.4); }

.pair-pct { font-size: 14px; font-weight: 800; }
.pair-spark { width: 80px; height: 30px; }

@keyframes orbPulse {
    from { transform: scale(1); opacity: 0.3; }
    to { transform: scale(1.1); opacity: 0.6; }
}

@media (max-width: 1200px) {
    .terminal-main-grid { flex-direction: column; gap: 50px; }
    .holographic-chamber-wrap { order: -1; }
    .terminal-side-col { flex-direction: row; gap: 30px; }
    .ultimate-ticker-v4 { flex-wrap: wrap; gap: 40px; }
}

/* Vertical Discipline Graphic */
.vertical-discipline-graphic {
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    background: rgba(30, 39, 57, 0.6);
    border-radius: 20px;
    border: 1px solid rgba(255, 170, 23, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

@keyframes pulseGraphic {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px #ffaa17); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 40px #ffaa17); }
}

/* Capital Management Dashboard - Absolute Pixel-Perfect Match */
.capital-management-dashboard {
    width: 100%;
    padding: 80px 0;
    position: relative;
    font-family: 'Outfit', sans-serif;
}

.management-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 60px;
    position: relative;
}

.management-card {
    flex: 1;
    min-height: 280px;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(30px);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.rim-light {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    z-index: 5;
}

.growth-card { border-color: rgba(255, 170, 23, 0.2); }
.reserve-card { border-color: rgba(0, 255, 136, 0.2); }

.card-content {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* SVG Gauge Styles */
.gauge-container {
    width: 130px;
    height: 130px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 2;
}

.gauge-progress {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: 1s;
}

.gold-progress { stroke: #ffaa17; filter: drop-shadow(0 0 10px rgba(255, 170, 23, 0.5)); }
.cyan-progress { stroke: #00ff88; filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5)); }

.gauge-text {
    position: absolute;
    text-align: center;
}

.gauge-text .pct { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; }
.gauge-text .lbl { font-size: 9px; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px; margin-top: 5px; }

/* Info Section */
.info-section { flex: 1; text-align: left; }

.card-header {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gold-wrap { color: #ffaa17; border-color: rgba(255, 170, 23, 0.3); }
.cyan-wrap { color: #00ff88; border-color: rgba(0, 255, 136, 0.3); }

.title-wrap h3 { font-size: 20px; color: #fff; margin-bottom: 8px; font-weight: 700; }
.title-wrap p { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; }

/* Chart Area */
.chart-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chart-visual { width: 120px; height: 40px; }
.area-chart-svg { width: 100%; height: 100%; }

.chart-val-wrap { text-align: right; }
.chart-val-wrap .val { font-size: 20px; font-weight: 800; color: #ffaa17; display: block; }
.chart-val-wrap .lbl { font-size: 9px; color: rgba(255, 255, 255, 0.4); letter-spacing: 1px; }

/* Health Status */
.exact-health-status {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.health-left { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.health-right { display: flex; align-items: center; gap: 10px; }
.strong-text { font-size: 14px; font-weight: 800; color: #fff; }
.pulsing-dot { width: 8px; height: 8px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: dotPulse 2s infinite; }

/* Connector System */
.exact-connector {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.conn-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

.conn-line::after {
    content: '';
    position: absolute;
    width: 4px; height: 4px; background: #fff; border-radius: 50%; top: -1.5px;
}

.exact-connector .conn-line:first-child::after { right: 0; background: #ffaa17; }
.exact-connector .conn-line:last-child::after { left: 0; background: #00ff88; }

.conn-node {
    width: 60px;
    height: 60px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Footer System */
.exact-dashboard-footer {
    max-width: 850px;
    margin: 40px auto 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.footer-block { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.footer-divider { width: 1px; height: 25px; background: rgba(255, 255, 255, 0.05); }

@keyframes dotPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 991px) {
    .management-grid { flex-direction: column; }
    .exact-connector { height: 100px; width: 100%; transform: rotate(90deg); }
    .management-card { width: 100%; min-width: unset; }
    .exact-dashboard-footer { flex-wrap: wrap; gap: 20px; border-radius: 20px; }
}

@keyframes growCandle {
    0% { transform: scaleY(0.8); }
    100% { transform: scaleY(1.2); }
}

/* Vertical Discipline Graphic */
.vertical-discipline-graphic {
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    background: rgba(30, 39, 57, 0.6);
    border-radius: 20px;
    border: 1px solid rgba(255, 170, 23, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

@keyframes pulseGraphic {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px #ffaa17); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 40px #ffaa17); }
}

.data-wave {
    position: absolute;
    width: 200%;
    height: 100%;
    background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.1;
    animation: slideWave 20s infinite linear;
}

@keyframes pulseGraphic {
    0% { transform: scale(1); filter: drop-shadow(0 0 30px #ffaa17); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 50px #ffaa17); }
    100% { transform: scale(1); filter: drop-shadow(0 0 30px #ffaa17); }
}

@keyframes slideWave {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.front  { transform: rotateY(  0deg) translateZ(125px); }
.back   { transform: rotateY(180deg) translateZ(125px); }
.right  { transform: rotateY( 90deg) translateZ(125px); }
.left   { transform: rotateY(-90deg) translateZ(125px); }
.top    { transform: rotateX( 90deg) translateZ(125px); }
.bottom { transform: rotateX(-90deg) translateZ(125px); }

@keyframes rotateCube {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

/* Final Professional Horizontal Roadmap */
.timeline {
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 170, 23, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 170, 23, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 170, 23, 0); }
}

.tradingview-widget-container {
    background: rgba(30, 39, 57, 0.4);
    padding: 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    height: 350px;
}