/*--------------------------------------------------------------------------
Template  : Kryptix - Bitcoin & Cryptocurrency Landing Page HTML Template
Author    : Vectorlab
web       : http://thevectorlab.net/
Email     : dkmosa@gmail.com
Version   : 1.0
--------------------------------------------------------------------------*/
/*-------------------------------
Table of contents
---------------------------------

1. typography
2. buttons
3. app header
4. hero banner
5. sections
6. forms
7. road map timeline
8. app footer
9. responsive

-------------------------------*/
/*-------------------------------
typography
-------------------------------*/
body
{
    font-family: 'Jost', serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;

    color: #3c434f; 

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
}

body,
html
{
    height: 100%;
}

a
{
    color: #08499e;
}
a:hover
{
    color: #08499e;
}

a,
a:hover
{
    -webkit-transition: all .3s;
            transition: all .3s;
    text-decoration: none;

    outline: 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6
{
    font-family: 'Jost', sans-serif;
    font-weight: bold;
}

.h1,
h1
{
    font-size: 3rem;
}

.h2,
h2
{
    font-size: 2.3rem;
}

p
{
    margin-bottom: 3rem;
}

.text-purple-color
{
    color: #ffffff;
}

.text-paste-color
{
    color: #ffffff;
}

.text-primary
{
    color: #0f95d7 !important;
}

a.text-primary:focus,
a.text-primary:hover
{
    color: #0e86c2 !important;
}

.sm-txt
{
    font-size: 14px;
}

.gray-txt
{
    color: #707070;
}

img
{
    max-width: 100%;
    height: auto;

    vertical-align: top; 

    border: 0 none;
    outline: 0;
}

.view-link
{
    position: relative; 

    color: #3c434f;
}
.view-link:after
{
    font-family: 'fontawesome';

    position: absolute;
    top: 0;
    right: -20px;

    width: 15px;
    height: 15px;

    content: '\f105';
    -webkit-transition: all .3s;
            transition: all .3s;

    color: #3c434f;
}
.view-link:hover:after
{
    right: -30px;

    -webkit-transition: all .3s;
            transition: all .3s;

    color: #08499e;
}

.view-link-light
{
    position: relative; 

    color: #fff;
}
.view-link-light:after
{
    font-family: 'fontawesome';

    position: absolute;
    top: 0;
    right: -20px;

    width: 15px;
    height: 15px;

    content: '\f105';
    -webkit-transition: all .3s;
            transition: all .3s;

    color: #fff;
}
.view-link-light:hover
{
    color: #fff;
}
.view-link-light:hover:after
{
    right: -30px;

    -webkit-transition: all .3s;
            transition: all .3s;

    color: #fff;
}

.rounded
{
    border-radius: .4rem !important;
}

.ls2
{
    letter-spacing: 2px;
}

.pre-title
{
    font-size: 12px;
}

.card
{
    border-radius: .5rem;
}

.card-img-top
{
    border-top-left-radius: calc(.5rem - 1px);
    border-top-right-radius: calc(.5rem - 1px);
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme
{
    color: #fff; 
    background: #323945;
}
.dark-theme .gray-txt
{
    color: #fff;
}
.dark-theme .gray-txt a
{
    color: #8969ff;
}
.dark-theme .gray-txt a:hover
{
    color: #08499e;
}
.dark-theme .view-link,
.dark-theme .view-link:after
{
    color: #fff;
}
.dark-theme .view-link:hover,
.dark-theme .view-link:hover:after
{
    color: #08499e;
}

/*-------------------------------
buttons
-------------------------------*/
.btn
{
    font-family: 'Jost', sans-serif; 
    font-size: 12px;
    font-weight: bold;

    display: inline-block;

    padding: .8rem 3rem;
}
.btn:focus
{
    outline: none;
    box-shadow: none;
}

.btn-group-sm > .btn,
.btn-sm
{
    padding: .6rem 1.5rem !important;
}

.btn-pill
{
    border-radius: 50px;
}

.btn-purple
{
    color: #fff; 
    background: #08499e;
}
.btn-purple:hover
{
    color: #fff; 
    background: #08499e;
}

.btn-purple-default
{
    color: #fff; 
    background: #08499e;
}
.btn-purple-default:hover
{
    color: #fff; 
    background: #6951d3;
}

.btn-white
{
    color: #3c434f;
    background: #fff;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .05);
}
.btn-white:hover
{
    color: #fff; 
    background: #08499e;
}

/* .btn-purple-shadow
{
    box-shadow: 5px 5px 40px 0 #5498ffb8;
}
.btn-purple-shadow:hover
{
    box-shadow: 5px 5px 40px 0 rgba(110, 220, 170, .72);
} */

.btn-gradient
{
    color: #fff;
    border: none;
    background-image: -webkit-linear-gradient(left, #08499e 0%, #4facfe 100%);
    background-image:         linear-gradient(to right, #08499e 0%, #4facfe 100%); 
    box-shadow: 5px 5px 40px 0 rgba(110, 220, 170, .72);
}
.btn-gradient:hover
{
    color: #fff;
    background-image: -webkit-linear-gradient(left, #4facfe 0%, #08499e 100%);
    background-image:         linear-gradient(to right, #4facfe 0%, #08499e 100%);
}

.btn-gradient.btn:not(:disabled):not(.disabled):active
{
    color: #fff;
    background-image: -webkit-linear-gradient(left, #4facfe 0%, #08499e 100%);
    background-image:         linear-gradient(to right, #4facfe 0%, #08499e 100%);
}

.btn-green
{
    color: #fff;
    border: none;
    background-image: -webkit-linear-gradient(left, #08499e 0%, #4facfe 100%);
    background-image:         linear-gradient(to right, #08499e 0%, #4facfe 100%);
}
.btn-green:hover,
.btn-green:focus,
.btn-green:active
{
    color: #fff;
    background: #4facfe;
    background-image: -webkit-linear-gradient(left, #4facfe 0%, #08499e 100%);
    background-image:         linear-gradient(to right, #4facfe 0%, #08499e 100%);
}

.buy-token
{
    position: relative;
    top: -8px;

    color: #3c434f !important; 
    background: #fff;
}
.buy-token:hover
{
    color: #fff !important; 
    background: #08499e;
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .btn-gradient
{
    box-shadow: none;
}

.dark-theme .btn-white
{
    color: #fff; 
    background: #3c434f;
}
.dark-theme .btn-white:hover
{
    color: #fff; 
    background: #08499e;
}

/*-------------------------------
app header
-------------------------------*/
.app-header
{
    position: absolute;
    z-index: 100;

    width: 100%;
    padding-top: 2rem;

    -webkit-transition: all .3s ease;
            transition: all .3s ease;
}
.app-header .navbar
{
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;

    padding: .5rem 0;

    letter-spacing: 1px; 
    text-transform: uppercase;
}
@media (min-width: 768px)
{
    .app-header .navbar-expand-md .navbar-nav .nav-link
    {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}
.app-header .nav-item .nav-link
{
    color: #fff;
}
.app-header .nav-item .nav-link:hover
{
    color: #08499e;
}
.app-header .nav-item .active
{
    color: #ffffff;
}
.app-header .nav-item .dropdown-menu
{
    z-index: 200; 

    width: 14rem;
    margin-top: 0rem;

    border: none;
    background: #3c434f;
}
.app-header .nav-item .dropdown-menu .dropdown-item
{
    font-size: 11px;

    padding: .5rem 1.5rem;

    color: #fff;
}
.app-header .nav-item .dropdown-menu .dropdown-item:hover,
.app-header .nav-item .dropdown-menu .dropdown-item:focus,
.app-header .nav-item .dropdown-menu .dropdown-item.active
{
    color: #08499e; 
    background: transparent;
}
.app-header .nav-item .dropdown-menu:before
{
    font-family: fontawesome;
    font-size: 25px;

    position: absolute;
    top: -22px;
    bottom: -15px;
    left: 15%;

    height: 22px; 
    margin-left: -7px;

    content: '\f0d8';

    color: #3c434f;
}
.app-header .navbar-collapse
{
    margin-top: .8rem;
}

.navbar-sticky
{
    position: fixed;
    z-index: 110; 
    top: 0;

    padding-top: 0;

    -webkit-transition: all .3s ease;
            transition: all .3s ease;

    background: #fff;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .07);
}
.navbar-sticky .nav-item .nav-link
{
    color: #3c434f;
}
.navbar-sticky .nav-item .active
{
    color: #08499e;
}

.navbar-purple.navbar-sticky
{
    position: fixed;
    top: 0;

    padding-top: 0;

    -webkit-transition: all .3s ease;
            transition: all .3s ease; 

    background: #4a62ff;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .07);
}
.navbar-purple.navbar-sticky .nav-item .nav-link
{
    color: #fff;
}
.navbar-purple.navbar-sticky .nav-item .nav-link:hover
{
    color: #ffffff;
}
.navbar-purple.navbar-sticky .nav-item .active
{
    color: #ffffff;
}

.dropdown:hover .dropdown-menu
{
    display: block;
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .navbar-sticky
{
    -webkit-transition: all .3s ease;
            transition: all .3s ease; 

    background:#08499e;
    box-shadow: none;
}
.dark-theme .navbar-sticky .nav-item .nav-link
{
    color: #fff;
}
.dark-theme .navbar-sticky .nav-item .active
{
    color: #dddddd;
}

/*-------------------------------
hero banner
-------------------------------*/
.hero-banner
{
    position: relative;

    height: 100%;
}
.hero-banner .banner-img
{
    position: absolute;
    top: 0; 
    right: 0;
}
.hero-banner .hero-text
{
    position: absolute;
    top: 50%;

    display: inherit;

    width: 100%; 

    -webkit-transform: translateY(-40%);
        -ms-transform: translateY(-40%);
            transform: translateY(-40%);
}
.hero-banner .hero-title
{
    font-size: 48px;

    margin-bottom: 1rem; 

    color: #08499e;
}
.hero-banner .here-sub-title
{
    font-size: 24px;
    font-weight: 300;
    line-height: normal;

    margin-bottom: 3rem; 

    color: #707070;
}

.creative-banner
{
    position: relative;

    overflow: hidden; 

    height: 100%;

    background: -webkit-linear-gradient(230deg, #4a62ff 0%, #08499e 100%);
    background:         linear-gradient(220deg, #4a62ff 0%, #08499e 100%);
}
.creative-banner .hero-text
{
    z-index: 10; 
    top: 50%;

    -webkit-transform: translateY(-30%);
        -ms-transform: translateY(-30%);
            transform: translateY(-30%);
}
.creative-banner .banner-img
{
    position: relative;
    top: -20%;
}
.creative-banner .hero-footer
{
    position: absolute;
    z-index: 1; 
    bottom: -10px;
    left: 0;

    width: 100%;
    height: 200px;

    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}
@media (min-width: 1600px)
{
    .creative-banner .hero-footer
    {
        height: 300px;
    }
}

.bubble-set
{
    position: relative; 

    max-width: 1400px;
    margin: 0 auto;
}
.bubble-set div
{
    position: absolute;

    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
}
.bubble-set .bubble-lg
{
    top: calc(100% - 300px); 
    left: 2%;

    width: 950px;
    height: 950px;
}
.bubble-set .bubble-md
{
    top: -300px; 
    right: -10%;

    width: 835px;
    height: 835px;
}
.bubble-set .bubble-sm
{
    top: 0; 
    right: 15%;

    width: 535px;
    height: 535px;
}

.intro-banner
{
    height: 80%;
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .hero-banner .here-sub-title
{
    color: #fff;
}

/*-------------------------------
section style
-------------------------------*/
.section-gap
{
    padding: 5rem 0;
}

.section-gap-sm
{
    padding: 3rem 0;
}

.section-gray-bg
{
    background: #f6f6fc;
}

.section-dark-bg
{
    color: #fff; 
    background: #3c434f;
}
.section-dark-bg .card-body p
{
    color: #3c434f;
}

.section-title
{
    margin-bottom: 5rem;
}
.section-title h2
{
    font-size: 48px;
    font-weight: bold;

    margin-bottom: 0;
}
.section-title h3
{
    font-size: 36px;
    font-weight: bold;

    margin-bottom: 0;
}

.card
{
    border: none;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .05);
}

.box-show
{
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .08);
}

.col-gap
{
    padding-right: 30px;
    padding-left: 30px;
}

/*-------------------------------
feature list
-------------------------------*/
.feature-gradient
{
    color: #fff;
    background-image: -webkit-linear-gradient(left, #2196f3 0%, #5c71ff 100%);
    background-image:         linear-gradient(to right, #2196f3 0%, #5c71ff 100%);
    /* margin-bottom: -100px; */

}

.f-icon
{
    font-size: 3rem;
}

/*-------------------------------
accordion
-------------------------------*/
.accordion .card
{
    margin-bottom: 10px;

    border: 1px solid #eaeaf5; 
    border-radius: 4px !important;
    box-shadow: none;
}

.accordion .card:first-of-type,
.accordion .card:not(:first-of-type):not(:last-of-type)
{
    border-bottom: 1px solid #eaeaf5 !important;
}

.accordion .card-header
{
    padding: 0;

    border-bottom: none;
    border-radius: 4px !important; 
    background: transparent;
}
.accordion .card-header h5
{
    font-size: 16px;

    margin-bottom: 0;
}
.accordion .card-header a.collapsed
{
    position: relative;

    border-radius: 4px;
    background: #f6f6fc;
}
.accordion .card-header a.collapsed:after
{
    font-family: 'fontawesome'; 
    font-size: 14px;

    position: absolute;
    top: 35%;
    right: 20px;

    content: '\f105';
}
.accordion .card-header a
{
    position: relative; 

    display: block;

    padding: 1.5rem 1.5rem;

    cursor: pointer;

    border-radius: 4px 4px 0 0;
    background: #fff;
}
.accordion .card-header a:after
{
    font-family: 'fontawesome'; 
    font-size: 14px;

    position: absolute;
    top: 35%;
    right: 20px;

    content: '\f107';
}

.accordion .card-body
{
    border-radius: 0 0 4px 4px;
}
.accordion .card-body p
{
    font-size: 14px;

    margin-bottom: 10px;
}

/*-------------------------------
registration link style
-------------------------------*/
.signin-row
{
    position: relative; 

    display: inline-block;

    width: 100%;

    background: #08499e;
}
.signin-row:after
{
    position: absolute; 
    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    content: '';

    background: #08499e;
}

.login-bg,
.registration-bg
{
    position: relative; 

    float: left;

    width: 50%;
    padding: 3rem 0rem;

    color: #fff;
}
.login-bg .title,
.registration-bg .title
{
    font-family: 'Jost', sans-serif; 
    font-size: 24px;
    font-weight: bold;
}
.login-bg p,
.registration-bg p
{
    margin-bottom: 0;
}
.login-bg:hover,
.registration-bg:hover
{
    color: #fff;
}
.login-bg:hover:after,
.registration-bg:hover:after
{
    right: 5%;
}
.login-bg:after,
.registration-bg:after
{
    font-family: 'fontawesome';
    font-size: 2rem;

    position: absolute;
    top: 50%;
    right: 10%;

    width: 15px;
    height: 15px;
    margin-top: -20px;

    content: '\f105';
    -webkit-transition: all .3s;
            transition: all .3s;
}

.login-bg
{
    z-index: 100;

    padding-left: 3rem;
}

@media (max-width: 768px)
{
    .signin-row
    {
        overflow: hidden;
    }
    .signin-row:after
    {
        position: absolute; 
        top: 50%;
        right: 0;

        width: 100%;
        height: 100%;

        content: '';
    }
    .login-bg
    {
        padding-left: 0;
    }
}

@media (max-width: 667px)
{
    .login-bg,
    .registration-bg
    {
        width: 100%;
    }
}

/*-------------------------------
steps
-------------------------------*/
.js_steps_carousel
{
    position: relative;
}
.js_steps_carousel .owl-dots
{
    position: relative; 

    float: left;

    width: 60%;
}
.js_steps_carousel .owl-dots .owl-dot
{
    font-size: 3rem;
    line-height: 130px;

    position: relative; 

    display: inline-block;

    width: 160px;
    height: 130px;
    margin-bottom: 5%;
    margin-left: 5%;

    text-align: center;

    color: #3c434f;
    border-radius: 5px;
    background: #fff;
}
.js_steps_carousel .owl-dots .owl-dot.active,
.js_steps_carousel .owl-dots .owl-dot:hover
{
    color: #fff; 
    background-image: -webkit-linear-gradient(left, #08499e 0%, #4facfe 100%);
    background-image:         linear-gradient(to right, #08499e 0%, #4facfe 100%);
}
.js_steps_carousel .owl-dots .owl-dot:after
{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 20%;

    width: 100%;
    height: 1px;

    content: '';
    -webkit-animation: moving 1s linear infinite;
            animation: moving 1s linear infinite; 

    background: url(../img/line.png) repeat 0 0;
}

@-webkit-keyframes moving
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 40px 0;
    }
}

@keyframes moving
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 40px 0;
    }
}
.js_steps_carousel .owl-dots .owl-dot:nth-child(4):before
{
    position: absolute;
    z-index: -1;
    top: -20px;
    left: 36%;

    width: 30%;
    height: 1px;

    content: '';
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); 
    -webkit-animation: moving 1s linear infinite;
            animation: moving 1s linear infinite;

    background: url(../img/line.png) repeat 0 0;
}
.js_steps_carousel .owl-dots .owl-dot:nth-child(3):after,
.js_steps_carousel .owl-dots .owl-dot:nth-child(4):after
{
    left: 0;
}
.js_steps_carousel .owl-dots .owl-dot:nth-child(4)
{
    position: relative;
    right: 70px;

    float: right;
}
.js_steps_carousel .owl-dots .owl-dot:nth-child(5)
{
    position: relative;
    right: 70px;

    float: right;
}
.js_steps_carousel .owl-dots .owl-dot:nth-child(5):after
{
    -webkit-animation: moving-r 1s linear infinite !important;
            animation: moving-r 1s linear infinite !important;
}

@-webkit-keyframes moving-r
{
    from
    {
        background-position: 40px 0;
    }
    to
    {
        background-position: 0 0;
    }
}

@keyframes moving-r
{
    from
    {
        background-position: 40px 0;
    }
    to
    {
        background-position: 0 0;
    }
}
.js_steps_carousel .owl-stage-outer
{
    z-index: 1000; 

    float: right;

    width: 40%;

    color: #fff;
}
.js_steps_carousel .steps-content
{
    display: inline-block;

    width: 40%;
    margin-top: 5%;
}

.steps-shadow .owl-dot
{
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .05);
}

/*-------------------------------
team social link
-------------------------------*/
.js_team_member .owl-stage-outer
{
    min-height: 550px;
}

.js_team_member .owl-dots
{
    margin-bottom: 3rem; 

    text-align: center;
}
.js_team_member .owl-dots .owl-dot
{
    display: inline-block;

    width: 12px;
    height: 12px;
    margin: 0 8px;

    border-radius: 50%; 
    background: #e7e0ff;
}
.js_team_member .owl-dots .owl-dot.active
{
    background: #08499e;
}

.team-row .owl-item:nth-child(even)
{
    margin-top: 190px;
}

.team-social a
{
    margin-right: 1rem; 

    color: #b0b0b0;
}
.team-social a:hover
{
    color: #08499e;
}

/*-------------------------------
ico-progress
-------------------------------*/
.ico-progress
{
    position: relative;

    overflow: visible; 

    height: 25px;

    border-radius: 1.25rem;
    background: #f5f3fa;
}
.ico-progress .progress-bar:first-child
{
    border-radius: 1.25rem 0 0 1.25rem;
}
.ico-progress .progress-purple
{
    position: relative; 

    background: #08499e;
}
.ico-progress .progress-purple-light
{
    position: relative; 

    background: #A3C9F0;
}
.ico-progress .progress-purple-lighter
{
    position: relative; 

    background: #E6F0FA;
}
.ico-progress .progress-caption-top
{
    position: absolute;
    top: -30px;
    right: 10px;

    color: #3c434f;
}
.ico-progress .progress-caption-top:after
{
    position: absolute;
    top: 5px;
    right: -11px; 

    width: 1px;
    height: 20px;

    content: '';

    background: #d7ccfd;
}
.ico-progress .progress-caption-bottom
{
    position: absolute;
    top: 50px;
    right: -20%;

    color: #3c434f;
}
.ico-progress .progress-caption-bottom:before
{
    font-family: fontawesome;
    font-size: 18px;

    position: absolute;
    top: -20px;
    bottom: -15px;
    left: 50%;

    margin-left: -7px;

    content: '\f0d8';

    color: #08499e;
}

.bonus-bar
{
    position: relative;

    padding-right: 10px;
}
.bonus-bar:after
{
    position: absolute;
    top: 5px;
    right: 0; 

    width: 1px;
    height: 20px;

    content: '';

    background: #d7ccfd;
}

/*-------------------------------
advisor boar
-------------------------------*/
.js_advisory_board
{
    position: relative;
}
.js_advisory_board .owl-stage-outer
{
    margin-top: 15rem;
}
.js_advisory_board .owl-dots
{
    position: absolute;
    top: 5%;
    left: 0;

    width: 100%; 

    text-align: center;
}
.js_advisory_board .owl-dot
{
    display: inline-block;

    width: 135px;
    margin: 0 2rem;
}
.js_advisory_board .owl-dot .advisor-thumb,
.js_advisory_board .owl-dot img
{
    opacity: .3; 
    border-radius: 50%;
}
.js_advisory_board .owl-dot.active .advisor-thumb,
.js_advisory_board .owl-dot.active img
{
    opacity: 1;
}

/*-------------------------------
count down
-------------------------------*/
.count-down .count-block
{
    display: inline-block;

    margin: 0 20px;
}
.count-down .count-block h2
{
    font-weight: bold;

    margin: 0;

    color: #08499e;
}
.count-down .count-block span
{
    font-family: 'Jost', sans-serif; 
    font-size: 14px;
    font-weight: bold;

    text-transform: uppercase;

    color: #bdbdbd;
}

.count-down .colon
{
    font-family: 'Jost', sans-serif;
    font-size: 40px;
    font-weight: bold;

    position: relative;
    top: -30px;

    margin: 0 .5rem; 

    color: #c9baff;
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .section-gray-bg
{
    background: #2a303b;
}

.dark-theme .section-dark-bg
{
    background: #2a303b;
}
.dark-theme .section-dark-bg .card-body p
{
    color: #fff;
}

.dark-theme .card
{
    background: #3c434f;
}

.dark-theme .accordion .card
{
    border: none; 
    background: #2a303b;
}

.dark-theme .accordion .card:first-of-type,
.dark-theme .accordion .card:not(:first-of-type):not(:last-of-type)
{
    border-bottom: none !important;
}

.dark-theme .accordion .card-header
{
    background: transparent;
}
.dark-theme .accordion .card-header a
{
    background: #2a303b;
}

.dark-theme .accordion .card-body
{
    background: #2a303b;
}

.dark-theme .text-dark
{
    color: #fff !important;
}

.dark-theme .ico-progress .progress-caption-top,
.dark-theme .ico-progress .progress-caption-bottom
{
    color: #fff;
}

.dark-theme .signin-row
{
    margin-bottom: -5px;
}

/*-------------------------------
form
-------------------------------*/
.contact-form .form-control,
.login-form .form-control
{
    line-height: 2.2; 

    border-color: #eaeaf5;
}
.contact-form .form-control:focus,
.login-form .form-control:focus
{
    border-color: #08499e;
    box-shadow: none;
}

.contact-form .btn.disabled,
.contact-form .btn:disabled,
.login-form .btn.disabled,
.login-form .btn:disabled
{
    opacity: 1;
}

.telegram-section
{
    margin-bottom: 230px;
}

#contact-box
{
    margin-top: -320px;
}

.subscribe-from .form-control
{
    line-height: 2; 

    padding: .5rem 1.5rem;

    color: #fff;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 40px;
    background: transparent;
}
.subscribe-from .form-control:focus
{
    box-shadow: none;
}

.subscribe-from button
{
    line-height: 2; 

    border-radius: 40px;
}

.help-block
{
    font-size: 14px;
}

.help-block.with-errors
{
    color: #fe413b;
}

#msgSubmit
{
    font-size: 14px;
    font-weight: normal;

    margin-top: 2rem;

    color: #fe413b !important;
}

.subscribe-from .form-control::-webkit-input-placeholder
{
    color: #fff;
}

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

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

.subscribe-from .form-control:-ms-input-placeholder
{
    color: #fff;
}

.subscribe-from .form-control::-ms-input-placeholder
{
    color: #fff;
}

.subscribe-from .form-control::-webkit-input-placeholder
{
    color: #fff;
}

.subscribe-from .form-control::-moz-placeholder
{
    color: #fff;
}

.subscribe-from .form-control:-ms-input-placeholder
{
    color: #fff;
}

.subscribe-from .form-control::placeholder
{
    color: #fff;
}

.login-banner-img
{
    position: absolute;

    width: 100%;
    height: 100%;
}

.forgot-link
{
    color: #3c434f;
}

.modal-content
{
    overflow: hidden; 

    border: none;
    border-radius: .5rem;
}

@media (min-width: 576px)
{
    .modal-dialog
    {
        max-width: 700px;
    }
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .login-form
{
    color: #3c434f;
}

/*-------------------------------
road map timeline
-------------------------------*/
.road-map-bg
{
    position: relative;

    overflow: hidden; 

    color: #fff;
    background: #08499e;
}
.road-map-bg .section-title
{
    position: relative; 
    z-index: 100;
}
.road-map-bg:before
{
    position: absolute;
    top: -20%;
    left: -5%;

    width: 900px;
    height: 900px;

    content: '';

    opacity: .5; 
    border-radius: 50%;
    background-image: -webkit-linear-gradient(right,#08499e 0%, #4a62ff 100%);
    background-image: linear-gradient(to left,#08499e 0%, #4a62ff 100%);
}
.road-map-bg:after
{
    position: absolute;
    top: -30%;
    right: -5%;

    width: 800px;
    height: 800px;

    content: '';

    opacity: .5; 
    border-radius: 50%;
    background-image: -webkit-linear-gradient(right,#08499e 0%,#4a62ff 100%);
    background-image: linear-gradient(to left,#08499e 0%, #4a62ff 100%);
}

.js_road_map
{
    position: relative;

    display: block;
}
.js_road_map:before
{
    position: absolute;
    top: 148px;
    left: 0;

    width: 100%;
    height: 1px;

    content: '';

    background: #fff;
}
.js_road_map .owl-nav
{
    position: absolute;
    z-index: 2; 
    top: 96px;
    left: 0;

    width: 100%;
}
.js_road_map .owl-prev,
.js_road_map .owl-next
{
    font-size: 36px;
    line-height: 50px;

    position: absolute;
    z-index: 2;
    top: 0;

    width: 50px;
    height: 50px;

    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
    text-align: center;

    opacity: .3; 
    color: #fff;
}
.js_road_map .owl-prev:hover,
.js_road_map .owl-next:hover
{
    opacity: 1;
}
.js_road_map .owl-prev
{
    left: -50px;
}
.js_road_map .owl-next
{
    right: -50px;
}

.roadmap-timeline-list
{
    position: relative;

    width: 200px; 
    margin-bottom: 30px;
    padding: 20px 10px;

    text-align: center;
}
.roadmap-timeline-list .rm-date
{
    position: relative;

    margin-top: 3.5rem;
}
.roadmap-timeline-list .rm-date span
{
    opacity: .5;
}
.roadmap-timeline-list .rm-date:before,
.roadmap-timeline-list .rm-date:after
{
    position: absolute;
    left: 50%;

    content: '';
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    border-radius: 50%;
}
.roadmap-timeline-list .rm-date:before
{
    z-index: 10; 
    top: -25px;

    width: 16px;
    height: 16px;

    background: #fff;
}
.roadmap-timeline-list .rm-date:after
{
    top: -29px;

    width: 24px;
    height: 24px;

    border: 1px solid #fff;
    background: #08499e;
}
.roadmap-timeline-list .rm-info
{
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;

    position: relative;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 100%;
    height: 90px;
    padding: 1rem 2rem;

    border-radius: 100px;
    background: #08499e;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, .08); 

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}
.roadmap-timeline-list .rm-info:after
{
    font-family: fontawesome;
    font-size: 25px;

    position: absolute;
    bottom: -15px;
    left: 50%;

    margin-left: -7px; 

    content: '\f0d7';

    color: #08499e;
}

.roadmap-timeline-list.alt .rm-date
{
    margin-top: 5rem;
    margin-bottom: 4rem;
}
.roadmap-timeline-list.alt .rm-date:before
{
    z-index: 10; 
    top: 40px;

    width: 16px;
    height: 16px;

    background: #fff;
}
.roadmap-timeline-list.alt .rm-date:after
{
    top: 36px;

    background: #08499e;
}

.roadmap-timeline-list.alt .rm-info:after
{
    top: -16px; 

    content: '\f0d8';
}

.roadmap-timeline-list.active .rm-date span
{
    opacity: 1;
}

.roadmap-timeline-list.active .rm-info
{
    color: #08499e; 
    background: #fff;
}
.roadmap-timeline-list.active .rm-info:after
{
    color: #fff;
}

/*-------------------------------
dark theme
-------------------------------*/
/*-------------------------------
blog
-------------------------------*/
.blog-banner
{
    position: relative;

    height: 50%;
}

.blog-post .blog-post-header img
{
    width: 100%;
    height: auto;
}

.blog-post h2
{
    font-size: 1.5rem;
}
.blog-post h2 a
{
    color: #3c434f;
}
.blog-post h2 a:hover
{
    color: #08499e;
}

.blog-post .post-meta
{
    font-size: .9rem;

    color: #707070;
}
.blog-post .post-meta a
{
    color: #3c434f;
}
.blog-post .post-meta a:hover
{
    color: #08499e;
}

.blog-post .post-date
{
    font-size: .8rem;
}

.js_post_carousel
{
    position: relative;
}
.js_post_carousel .owl-nav
{
    position: absolute;
    right: 10px;
    bottom: 10px;

    width: 100%;

    text-align: right;

    color: #fff;
}
.js_post_carousel .owl-nav .owl-prev,
.js_post_carousel .owl-nav .owl-next
{
    line-height: 40px;

    display: inline-block;

    width: 70px;
    height: 40px;
    margin-left: 5px;

    text-align: center;

    border-radius: 50px; 
    background: rgba(0, 0, 0, .3);
}
.js_post_carousel .owl-nav .owl-prev:hover,
.js_post_carousel .owl-nav .owl-next:hover
{
    background: rgba(0, 0, 0, .8);
}

.video-fit,
.audio-fit
{
    position: relative;

    width: 100%;
    padding-top: 50%;
}

.audio-fit
{
    padding-top: 20%;
}

.video-fit iframe,
.video-fit object,
.video-fit embed,
.audio-fit iframe
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border: none;
}

.blockquote-custom
{
    font-size: 1.25rem; 

    position: relative;

    padding: 25px 0 0 50px;
}
.blockquote-custom:before
{
    font-family: fontawesome;
    font-size: 30px;
    font-style: italic;

    position: absolute;
    top: 0; 
    left: 0;

    display: block;

    content: '\f10d';
}

.custom-pagination
{
    display: inline-block;
}
.custom-pagination li
{
    display: inline-block;

    margin: 0 .2rem;
}
.custom-pagination li a
{
    padding: 5px 12px;

    color: #707070;
    border: 1px solid #eaeaf5;
    border-radius: 50px;
}
.custom-pagination li a:hover
{
    color: #08499e;
    border-color: #08499e;
}
.custom-pagination li.active a
{
    color: #08499e;
    border-color: #08499e;
}

.search-row
{
    position: relative;

    width: 100%;
}

.search-btn
{
    font-size: 14px;
    line-height: 36px; 

    position: absolute;
    top: 50%;
    right: 1px;

    overflow: hidden;

    width: 40px;
    height: 40px;
    margin-top: -20px;

    color: #707070;
    border: none;
    outline: none;
    background: transparent;
}

.search-row input
{
    width: 100% !important;
    height: 40px;

    border-radius: 4px;
    box-shadow: none;
}

.comments-title
{
    font-size: 1rem;
}

ul.comments
{
    margin: 0;
    padding: 0; 

    list-style: none;
}
ul.comments li
{
    padding: 10px 0 0 55px;
}
ul.comments li img.avatar
{
    width: 55px; 
    height: 55px;
}
ul.comments li .comment
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 10px;
    margin-left: -55px;
}
ul.comments li .avatar
{
    margin-top: 1rem;
}
ul.comments .comment-block
{
    position: relative;

    width: 100%; 
    padding: 20px 20px 30px;

    border-radius: 5px;
}
ul.comments .comment-block p
{
    font-size: .9rem; 

    margin-bottom: 0;
}
ul.comments .comment-block .comment-by
{
    font-size: 1em;
    line-height: 21px;

    display: inline-block;

    margin: 0;
    padding: 0 0 5px 0; 

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}
ul.comments .comment-block .comment-by .comment-author
{
    font-weight: 700;
}
ul.comments .comment-block .comment-by .comment-date
{
    font-size: .8rem; 

    margin: 0 1rem;
    padding: 0 1rem;

    border-right: 1px solid #eaeaf5;
    border-left: 1px solid #eaeaf5;
}
ul.comments .comment-block .comment-by .comment-reply
{
    font-size: .8rem;
}

.leave-comment .form-control
{
    border: 1px solid #eaeaf5;
}

.widget
{
    display: inline-block;

    width: 100%;
    margin-bottom: 4rem;
}
.widget .widget-title
{
    margin-bottom: 2rem;
    padding-bottom: .5rem;

    border-bottom: 1px solid #eaeaf5;
}
.widget .widget-title h3
{
    font-size: 1.2rem;
}
.widget ul li
{
    font-size: 14px; 

    padding: 12px 0 5px;
}
.widget ul li a
{
    position: relative;

    padding-left: 15px; 

    color: #707070;
}
.widget ul li a:after
{
    font-family: 'FontAwesome';
    font-size: 15px;
    line-height: 20px;

    position: absolute;
    top: 0; 
    left: 0;

    content: '\f105';
}
.widget ul li a:hover
{
    color: #08499e;
}

.tagcloud a
{
    font-size: 13px; 

    display: inline-block;

    margin: 0 5px 5px 0;
    padding: 3px 10px;

    color: #fff;
    border-radius: 40px;
    background: #3c434f;
}
.tagcloud a:hover
{
    background: #08499e;
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .blog-post h2 a
{
    color: #fff;
}
.dark-theme .blog-post h2 a:hover
{
    color: #08499e;
}

.dark-theme .blog-post .post-meta
{
    color: #fff;
}

.dark-theme .blog-post .post-meta a,
.dark-theme .custom-pagination li a,
.dark-theme .widget ul li a
{
    color: rgba(255, 255, 255, .6);
}
.dark-theme .blog-post .post-meta a:hover,
.dark-theme .custom-pagination li a:hover,
.dark-theme .widget ul li a:hover
{
    color: #08499e;
}

.dark-theme .bg-light
{
    background-color: rgba(0, 0, 0, .2) !important;
}

/*-------------------------------
app footer
-------------------------------*/
.app-footer
{
    font-family: 'Jost', sans-serif; 

    padding: 0rem 0 0rem 0;
}
.app-footer h4,
.app-footer h6
{
    margin-bottom: 2rem;
}
.app-footer p
{
    font-size: 14px;
}
.app-footer a
{
    font-size: 11px;
    font-weight: 400; 

    text-transform: uppercase;

    color: #3c434f;
}
.app-footer a:hover
{
    color: #08499e;
}
.app-footer .copyright
{
    font-size: 12px;
}
.app-footer .secondary-footer
{
    padding-top: 2rem; 

    border-top: 1px solid #eaeaf5;
}
.app-footer .social-links
{
    margin-right: 2rem;
}
.app-footer .social-links a
{
    font-size: 16px;

    margin: 0 10px;
}
.app-footer .btn-language
{
    font-size: 14px;
    font-weight: 300;

    padding: 0;

    cursor: pointer; 

    border: none;
    background: transparent;
}
.app-footer .btn-language:focus
{
    outline: none;
}
.app-footer .dropdown-menu
{
    list-style: none;

    text-align: left;

    border: none;
    border-radius: 4px; 
    background-color: #08499e;
}
.app-footer .dropdown-item
{
    font-size: 14px;

    cursor: pointer; 

    color: #fff;
}
.app-footer .dropdown-item:hover
{
    background: #08499e;
}
.app-footer .payment-cards img
{
    margin-right: 2rem;
}

/*-------------------------------
dark theme
-------------------------------*/
.dark-theme .app-footer
{
  /* background: #2a303b; */
    background-image: linear-gradient(to right, #0e4899 0%, #0e4899 100%);

}
.dark-theme .app-footer a
{
    color: #fff;
}
.dark-theme .app-footer a:hover
{
    color: #08499e;
}
.dark-theme .app-footer .secondary-footer
{
    border-top: 1px solid #323945;
}
.dark-theme .app-footer .social-links a
{
    color: #fff;
}
.dark-theme .app-footer .social-links a:hover
{
    color: #c8c9cb;
}
.dark-theme .app-footer .btn-language
{
    color: #fff;
}
.dark-theme .app-footer .btn-language:focus
{
    outline: none;
}
.dark-theme .app-footer .dropdown-menu
{
    background-color: #08499e;
}
.dark-theme .app-footer .dropdown-item
{
    color: #fff;
}
.dark-theme .app-footer .dropdown-item:hover
{
    background: #08499e;
}

/*-------------------------------
responsive style
-------------------------------*/
@media (max-width: 1199px)
{
    .js_steps_carousel .owl-dots .owl-dot
    {
        font-size: 2rem;
        line-height: 90px;

        width: 110px;
        height: 95px;
    }
    .js_steps_carousel .owl-dots
    {
        width: 52%;
    }
}

@media (max-width: 1024px)
{
    .app-header
    {
        padding-top: 0;

        background: #fff;
    }
    .app-header .nav-item .nav-link
    {
        color: #cecece;
    }
    .app-header.navbar-purple
    {
        background: #4a62ff;
    }
    .app-header.navbar-purple .nav-item .nav-link
    {
        color: #fff;
    }
    .app-header.navbar-purple .navbar-toggler
    {
        color: #fff;
    }
    .dark-theme .app-header
    {
        background: #000;
    }
    .dark-theme .app-header .nav-item .nav-link
    {
        color: #fff;
    }
    .dark-theme .app-header.navbar-purple
    {
        background: #000;
    }
    .dark-theme .app-header.navbar-purple .nav-item .nav-link
    {
        color: #fff;
    }
    .hero-banner
    {
        background: #08499e;
    }
    .hero-banner .hero-title
    {
        font-size: 36px;
    }
    .hero-banner .hero-title,
    .hero-banner .here-sub-title,
    .hero-banner .gray-txt
    {
        color: #fff;
    }
    .hero-banner .here-sub-title,
    .hero-banner .gray-txt
    {
        font-weight: 400;
    }
    .hero-banner .gray-txt a
    {
        color: #4facfe;
    }
    .section-title h2,
    .section-title h3
    {
        font-size: 30px;
    }
    .btn-gradient
    {
        box-shadow: none;
    }
    .section-gap
    {
        padding: 3rem 0;
    }
    .section-gap-sm
    {
        padding: 1rem 0;
    }
    .partner-brand
    {
        margin-bottom: 0rem;
    }
    .section-title,
    p
    {
        margin-bottom: 2rem;
    }
    .h2,
    h2
    {
        font-size: 1.5rem;
    }
    .h4,
    h4
    {
        font-size: 1.2rem;
    }
    .js_steps_carousel .owl-dots .owl-dot
    {
        font-size: 2rem;
        line-height: 90px;

        width: 130px;
        height: 90px;
    }
    .js_steps_carousel .steps-content
    {
        margin-top: 1%;
    }
    .js_steps_carousel .owl-dots
    {
        width: 60%;
    }
}

@media (max-width: 991px)
{
    .app-header .navbar-expand-md .navbar-nav .nav-link
    {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .hero-banner
    {
        height: 75%;
    }
    .login-bg p,
    .registration-bg p
    {
        font-size: 12px;
    }
    .js_steps_carousel .owl-dots .owl-dot
    {
        font-size: 2rem;
        line-height: 80px;

        width: 100px;
        height: 80px;
    }
    .js_steps_carousel .steps-content
    {
        margin-top: 1%;
    }
    .js_steps_carousel .owl-dots .owl-dot:nth-child(4),
    .js_steps_carousel .owl-dots .owl-dot:nth-child(5)
    {
        right: 40px;
    }
    .creative-banner
    {
        height: 100% !important;
    }
    .creative-banner .hero-text
    {
        -webkit-transform: translateY(-30%);
            -ms-transform: translateY(-30%);
                transform: translateY(-30%);
    }
    .creative-banner .banner-img
    {
        width: 100%;
        height: auto;
        margin-top: 10%;
    }
    .creative-banner .hero-footer
    {
        display: none;
    }
    .blog-banner
    {
        height: 50% !important;
    }
    .blog-banner h1
    {
        margin-top: 5%;
    }
}

@media (max-width: 768px)
{
    .hero-banner
    {
        height: 60%;
    }
    .creative-banner .banner-img
    {
        position: relative;
        top: -15%;
    }
    .login-bg,
    .registration-bg
    {
        width: 100%;
    }
    .app-footer .social-links
    {
        margin-right: 0;
    }
    .count-down .count-block
    {
        margin: 0 10px;
    }
    .count-down .colon
    {
        font-size: 30px;

        top: -25px;
    }
    .js_team_member .owl-stage-outer
    {
        min-height: 500px;
    }
}

@media (max-width: 767px)
{
    .navbar-brand img
    {
        height: 35px;
    }
    .navbar-toggler:focus
    {
        outline: none;
    }
    .navbar-toggler-icon
    {
        height: auto;
    }
    .buy-token
    {
        position: relative;
        top: 0;

        display: block; 

        margin-top: 10px;
    }
    .dark-theme .navbar-toggler-icon
    {
        color: #fff;
    }
    .hero-banner .hero-title
    {
        font-size: 2rem;
    }
    .hero-banner .here-sub-title,
    .login-bg .title,
    .registration-bg .title
    {
        font-size: 1.2rem;
    }
    .section-title h2,
    .section-title h3,
    .h3,
    h3
    {
        font-size: 1.5rem;
    }
    .js_steps_carousel .owl-dots,
    .js_steps_carousel .owl-stage-outer,
    .js_steps_carousel .steps-content
    {
        width: 100%;
    }
    .js_steps_carousel .owl-dots .owl-dot
    {
        font-size: 1.5rem;
        line-height: 60px;

        width: 60px;
        height: 60px;
    }
    .js_steps_carousel .owl-dots .owl-dot:nth-child(4),
    .js_steps_carousel .owl-dots .owl-dot:nth-child(5)
    {
        right: auto;
        left: 0;
    }
    .js_steps_carousel .owl-dots .owl-dot:nth-child(4)
    {
        position: static;
        right: auto;
        left: 0;

        float: none;
    }
    .js_steps_carousel .owl-dots .owl-dot:nth-child(5)
    {
        float: none;
    }
    .js_steps_carousel .owl-dots .owl-dot:nth-child(4):before,
    .js_steps_carousel .owl-dots .owl-dot:nth-child(5):after
    {
        background: none;
    }
    .js_steps_carousel .owl-dots .owl-dot:nth-child(1)
    {
        margin-left: 0;
    }
    .js_steps_carousel .owl-dots .owl-dot:after
    {
        top: 35%;
        left: 0;

        width: 70%;
    }
    .js_steps_carousel .owl-dots
    {
        position: absolute;
    }
    .js_steps_carousel .owl-stage-outer
    {
        margin-top: 100px;
    }
    .accordion .card-header h5
    {
        font-size: 1rem;
    }
    .col-gap
    {
        padding-right: 15px;
        padding-left: 15px;
    }
    .partner-brand
    {
        margin-bottom: 2rem;
    }
    .accept-card .card-body
    {
        padding: .5rem;
    }
    .js_advisory_board .owl-stage-outer
    {
        margin: 0 15px;
    }
    .js_advisory_board .owl-stage-outer p
    {
        display: inline;
    }
    .js_advisory_board .owl-dot
    {
        width: 50px;
        margin: 0 .5rem;
    }
    .js_advisory_board .owl-stage-outer
    {
        margin-top: 5rem;
    }
    .js_team_member .owl-stage-outer
    {
        min-height: 450px;
    }
    .app-header .nav-item .dropdown-menu
    {
        width: 100%;
        margin-top: 0;
    }
    .app-header .nav-item .dropdown-menu:before
    {
        content: '';
    }
    .login-banner-img
    {
        display: none;
    }
    .blog-post h2
    {
        font-size: 1rem;
    }
    .blog-banner
    {
        height: 30% !important;
    }
    .blog-banner h1
    {
        margin-top: 8%;
    }
}

@media (max-width: 640px)
{
    .hero-banner .hero-title
    {
        font-size: 1.3rem;
    }
    .hero-banner .here-sub-title,
    .login-bg .title,
    .registration-bg .title,
    .h4,
    h4
    {
        font-size: 1rem;
    }
    .btn
    {
        font-size: 11px;

        padding: .5rem 2rem;
    }
    body,
    .sm-txt
    {
        font-size: 12px;
    }
    .partner-brand
    {
        margin-bottom: .5rem;
    }
    .section-title h2,
    .section-title h3,
    .h3,
    h3,
    .h2,
    h2
    {
        font-size: 1.1rem;
    }
    .login-bg,
    .registration-bg
    {
        padding: 1rem 2rem;
    }
    .app-footer .payment-cards img
    {
        margin-right: 1rem;
        margin-bottom: .5rem;
    }
    .js_steps_carousel .owl-dots .owl-dot
    {
        font-size: 1.2rem;
        line-height: 40px;

        width: 40px;
        height: 40px;
    }
    .js_steps_carousel .owl-stage-outer
    {
        margin-top: 60px;
    }
    .accordion .card-header h5
    {
        font-size: .8rem;
    }
    .roadmap-timeline-list
    {
        width: auto;
    }
    .count-down .colon
    {
        font-size: 30px;

        top: -15px;

        margin: 0 .1rem;
    }
    .count-down .count-block span
    {
        font-size: 10px;
    }
    .creative-banner .here-sub-title
    {
        margin-bottom: 1rem;
    }
    .js_team_member .owl-stage-outer
    {
        min-height: 300px;
    }
    .team-row .owl-item:nth-child(even)
    {
        margin-top: 0;
    }
    .btn-group-sm > .btn,
    .btn-sm
    {
        padding: .3rem .5rem !important;
    }
    ul.comments li img.avatar
    {
        width: 30px;
        height: 30px;
    }
    ul.comments li .comment
    {
        margin-left: -30px;
    }
    ul.comments li
    {
        padding: 10px 0 0 30px;
    }
}

@media (max-width: 359px)
{
    .js_steps_carousel .owl-dots .owl-dot
    {
        font-size: 1rem;
        line-height: 30px;

        width: 30px;
        height: 30px;
    }
    .js_steps_carousel .owl-stage-outer
    {
        margin-top: 50px;
    }
}

footer.app-footer {
    margin-top: 100px;
}


.social-links a i {
    font-size: 28px;   /* increase size */
}


.app-footer p {
    font-size: 18px;
    margin-left: 20px;
}



@media (max-width: 1024px) {
    .section-title, p {
        margin-bottom: 1rem;
    }
}




.banner-img {
    animation: floatY 3s ease-in-out infinite;
}

@keyframes floatY {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}



@media (max-width: 1024px) {
    .dark-theme .app-header.navbar-purple {
        background: #0e4899;
    }
}

@media (max-width: 1024px) {
.col-md-6.text-md-right.wow.fadeInUp {
    margin-top: -12px;
}
}



@media (max-width: 767px) {
    .col-md-6.text-md-right.wow.fadeInUp {
        margin-top: -21px;
    }
}

@media (max-width: 575px) {
    .col-md-6.text-md-right.wow.fadeInUp {
        margin-top: -21px;
    }
}
@media (max-width: 767.98px) {
    .col-md-6.text-md-right.wow.fadeInUp {
        margin-top: -21px;
    }
}




/* ===============================
   COMMUNITY CROWDFUNDING – PREMIUM BG
================================ */


/* ======================================================
   COMMUNITY CROWDFUNDING – PREMIUM LEDGER STYLE (ALL-IN-ONE)
   ====================================================== */

/* ---------- SECTION BACKGROUND ---------- */
/* ======================================================
   COMMUNITY CROWDFUNDING – LEDGER STYLE (FULL + FIXED)
   ====================================================== */

/* ---------- SECTION BACKGROUND ---------- */
/* =========================================
   SECTION BACKGROUND + SVG WATERMARK
   ========================================= */


#about .section-gray-bg {
    position: relative;
    background: radial-gradient(
        ellipse at top,
        #2b3240 0%,
        #1f2531 45%,
        #171c26 100%
    );
    overflow: hidden;
}  



/* Subtle grid + vignette */


#about .section-gray-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.45)),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: auto, 70px 70px, 70px 70px;
    z-index: 0;
} 




#about .section-gray-bg::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(120,160,255,0.08),
        transparent 60%
    );
    animation: ledgerGlow 10s ease-in-out infinite;
    z-index: 0;
}


@keyframes ledgerGlow {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(6%,4%); }
    100% { transform: translate(0,0); }
}

/* Content safety */
#about .container {
    position: relative;
    z-index: 2;
}

/* ======================================================
   CARD (LEDGER PANEL + ANIMATED BORDER)
   ====================================================== */

#about .card {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.015)
    );
    backdrop-filter: blur(10px);
    box-shadow:
        0 25px 60px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .45s ease, box-shadow .45s ease;
    z-index: 1;
}

/* WORKING animated gradient border */
#about .card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px; /* border thickness */
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        #5fa9ff,
        #7b7cff,
        #5fa9ff
    );
    background-size: 300% 300%;
    animation: borderMove 6s linear infinite;

    /* mask magic (critical) */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}

@keyframes borderMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

#about .card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 40px 90px rgba(0,0,0,.8),
        0 0 0 1px rgba(120,160,255,.25);
}

/* ---------- CARD BODY (INNER SWEEP) ---------- */
#about .card-body {
    position: relative;
    z-index: 2;
}

#about .card-body::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 14px;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(120,160,255,.25),
        transparent
    );
    animation: innerSweep 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes innerSweep {
    0%   { transform: translateX(-80%); opacity: 0; }
    40%  { opacity: .35; }
    100% { transform: translateX(80%); opacity: 0; }
}

/* ======================================================
   PROGRESS BAR – DATA FLOW
   ====================================================== */

.ico-progress {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.ico-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.35) 45%,
        transparent 60%
    );
    animation: ledgerFlow 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ledgerFlow {
    0%   { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

/* ======================================================
   CTA BUTTON – ENTERPRISE SWEEP
   ====================================================== */

#about .btn-purple {
    position: relative;
    overflow: hidden;
}

#about .btn-purple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
    transform: translateX(-120%);
    animation: btnSweep 4s ease-in-out infinite;
}

@keyframes btnSweep {
    0%   { transform: translateX(-120%); }
    40%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
/* ==========================================
   ANIMATED GRADIENT BORDER — CORNER STYLE
   ========================================== */
/* ================================
   CARD WITH TRUE ANIMATED BORDER
   ================================ */

#about .card {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.015)
    );
    backdrop-filter: blur(10px);
    box-shadow:
        0 25px 60px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden; /* IMPORTANT */
}

/* animated border layer */
#about .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px; /* BORDER THICKNESS */

    background: linear-gradient(
        90deg,
        #00c6ff,
        #7b7cff,
        #c77dff,
        #00c6ff
    );
    background-size: 400% 100%;
    animation: borderStroke 6s linear infinite;

    /* THIS IS THE KEY PART */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
    z-index: 1;
}

/* keep content above border */
#about .card > * {
    position: relative;
    z-index: 2;
}

/* border motion */
@keyframes borderStroke {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}



/* =========================================
   BACKGROUND SVG ICONS – SQUARE GRID FLOW
   ========================================= */

/* =====================================================
   BACKGROUND SVG ICON GRID — VISIBLE & ANIMATED
   ===================================================== */

/* icon wrapper */


/* =====================================================
   ICON POSITIONS + SOURCES
   ===================================================== */

/* =====================================================
   BACKGROUND SVG ICON PATTERN (WATERMARK STYLE)
   ===================================================== */


/* =====================================================
   BACKGROUND SVG ICON PATTERN (WATERMARK STYLE)
   ===================================================== */




/* =========================================
   TOKEN SECTION – WHITE ANIMATED BORDER
   (ADD-ON ONLY – SAFE)
   ========================================= */

/* =========================================
   TOKEN SECTION – WHITE ANIMATED BORDER
   (ADD-ON ONLY – SAFE)
   ========================================= */
/* ====================================================
   TOKEN / NETWORK CARDS – GRADIENT BORDER (HOVER)
   ==================================================== */

#token .card.box-show {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

/* STATIC GRADIENT BORDER */
#token .card.box-show::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px; /* border thickness */
    border-radius: inherit;

    background: linear-gradient(
        135deg,
        #00c6ff,
        #7b7cff,
        #c77dff
    );

    /* keep only border */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
    opacity: 0.9;
    transition: opacity .3s ease;
}

/* HOVER → ANIMATED BORDER */
#token .card.box-show:hover::after {
    background-size: 300% 300%;
    animation: gradientBorderHover 4s linear infinite;
    opacity: 1;
}

/* HOVER GLOW */
#token .card.box-show:hover {
    box-shadow:
        0 20px 60px rgba(0,198,255,.35),
        0 0 30px rgba(123,124,255,.25);
}

/* BORDER ANIMATION */
@keyframes gradientBorderHover {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}


box-shadow:{

 0 15px 40px rgba(0,198,255,.25),
    0 0 20px rgba(123,124,255,.2);
}
   

--------
/* =========================================
   WHY BIGBEE – SECTION BACKGROUND
   ========================================= */

#whyBIGBEE {
    background:
        radial-gradient(circle at top, #2a3240, #1c222c 70%);
    padding: 80px 0;
}

/* =========================================
   FORCE GAP BETWEEN BOXES (THIS FIXES IT)
   ========================================= */

#whyBIGBEE .row.text-md-left > div {
    margin-bottom: 32px;              /* vertical gap */
    padding-left: 18px;               /* horizontal gap */
    padding-right: 18px;
}

/* =========================================
   TURN COLUMN INTO CARD
   ========================================= */

#whyBIGBEE .row.text-md-left > div {
    position: relative;
    background: linear-gradient(180deg, #0e141d, #0a0f16);

    border-radius: 18px;
    padding: 25px 25px 3px 25px;
    overflow: hidden;

    transition: transform .35s ease, box-shadow .35s ease;
}

/* =========================================
   GRADIENT BORDER (ONLY BORDER, NOT BG)
   ========================================= */

#whyBIGBEE .row.text-md-left > div::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;

    background: linear-gradient(
        120deg,
        #3fd0ff,
        #7b7cff,
        #3fd0ff
    );
    background-size: 300% 300%;
    animation: borderMove 6s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}

@keyframes borderMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* =========================================
   HOVER EFFECT
   ========================================= */

#whyBIGBEE .row.text-md-left > div:hover {
    transform: translateY(-6px);
    box-shadow:
        0 25px 60px #3fd0ff,
        0 0 30px #3fd0ff;
}

/* =========================================
   ICON STYLE + ANIMATION
   ========================================= */

#whyBIGBEE .row.text-md-left > div i {
    font-size: 36px;
    color: #3fd0ff;
    display: inline-block;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 15px rgba(56, 203, 247, 0.6));

    animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* =========================================
   TEXT COLORS
   ========================================= */

#whyBIGBEE h5 {
    color: #ffffff;
}

#whyBIGBEE p {
    color: rgba(255,255,255,.7);
    font-size: 15px;
    line-height: 1.6;
}

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

@media (max-width: 767px) {
    #whyBIGBEE .row.text-md-left > div {
        padding: 26px 22px;
        margin-bottom: 24px;
    }
}












/* =========================================
   TOKENOMICS SECTION – PREMIUM UPGRADE
   (NO HTML CHANGES REQUIRED)
   ========================================= */

.section-gray-bg {
    position: relative;
    background:
        radial-gradient(circle at top, #2a3240 0%, #1f2531 45%, #171c26 100%);
    overflow: hidden;
}

/* subtle grid + vignette */
.section-gray-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.45)),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
    z-index: 0;
}

/* animated ambient glow */
.section-gray-bg::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(123,124,255,0.12),
        transparent 60%
    );
    animation: tokenGlow 12s ease-in-out infinite;
    z-index: 0;
}

@keyframes tokenGlow {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(5%,4%); }
    100% { transform: translate(0,0); }
}

/* keep content above bg */
.section-gray-bg .container {
    position: relative;
    z-index: 2;
}

/* =========================================
   HEADINGS & TEXT POLISH
   ========================================= */

.section-gray-bg h6.pre-title {
    color: #9bb6ff;
    letter-spacing: 2px;
}

.section-gray-bg h2 {
    text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.section-gray-bg p {
    color: rgba(255,255,255,.75);
}

/* =========================================
   GRAPH IMAGE – FLOAT + GLOW
   ========================================= */

.section-gray-bg img {
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
    /* animation: graphFloat 6s ease-in-out infinite; */
}

@keyframes graphFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

/* =========================================
   CTA BUTTON – GLOW + SWEEP
   ========================================= */

.section-gray-bg .btn-purple {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 15px 40px rgba(0,198,255,.35),
        inset 0 0 0 1px rgba(255,255,255,.15);
}

.section-gray-bg .btn-purple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform: translateX(-120%);
    animation: btnSweep 4s ease-in-out infinite;
}

@keyframes btnSweep {
    0%   { transform: translateX(-120%); }
    40%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

/* =========================================
   SECOND BLOCK (SCALABLE INFRASTRUCTURE)
   ========================================= */

.section-gray-bg .col-gap {
    position: relative;
}

.section-gray-bg .col-gap::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 22px;
    background: linear-gradient(
        120deg,
        rgba(123,124,255,.12),
        transparent 60%
    );
    opacity: .4;
    pointer-events: none;
}




/* =====================================================
   BIGBEE ECOSYSTEM PARTICIPATION LAYER – PREMIUM WOW
   ===================================================== */



img.my-5 {
   animation: graphFloat 6s ease-in-out infinite;
}


img.my-99 {
    animation: graphFloat 6s ease-in-out infinite;
}







/* =====================================================
   BIGBEE ECOSYSTEM PARTICIPATION – PREMIUM MAKEOVER
   ===================================================== */




-------
--------



/* =========================================================
   HOW BIGBEE WORKS – PREMIUM FIX (NO HTML CHANGE)
   ========================================================= */


/* ================================
   FAQ – PREMIUM DARK STYLE
   ================================ */

#faq {
    position: relative;
    background: radial-gradient(
        ellipse at top,
        #2b3240 0%,
        #1f2531 45%,
        #171c26 100%
    );
    overflow: hidden;
}

/* subtle grid overlay */
#faq::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* keep content above bg */
#faq .container {
    position: relative;
    z-index: 2;
}

/* ================================
   ACCORDION CARD
   ================================ */

#faq .accordion .card {
    position: relative;
    background: rgba(20, 26, 36, 0.95);
    border-radius: 14px;
    margin-bottom: 18px;
    border: none;
    /* box-shadow:
        0 18px 40px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.05); */
    overflow: hidden;
}

/* animated gradient border */
#faq .accordion .card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        #00c6ff,
        #7b7cff,
        #c77dff,
        #00c6ff
    );
    background-size: 400% 400%;
    animation: faqBorder 8s linear infinite;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}

@keyframes faqBorder {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

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

#faq .card-header {
    padding: 0;
    background: transparent;
    border: none;
}

#faq .card-header a {
    display: block;
    padding: 22px 56px 22px 24px;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    background: transparent;
    position: relative;
}

/* PLUS / MINUS */
#faq .card-header a::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #7b7cff;
    transition: transform .3s ease;
}

#faq .card-header a:not(.collapsed)::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
    color: #00c6ff;
}

/* ================================
   BODY
   ================================ */

#faq .card-body {
    padding: 0 24px 22px;
    color: rgba(255,255,255,.8);
    font-size: 14.5px;
    line-height: 1.6;
    animation: faqFade .35s ease;
    background-color: #171d26;
}

@keyframes faqFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   HOVER EFFECT
   ================================ */

/* #faq .accordion .card:hover {
    box-shadow:
        0 30px 70px rgba(0,198,255,.25),
        0 0 25px rgba(123,124,255,.25);
} */

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

@media (max-width: 767px) {

    #faq .card-header a {
        font-size: 15px;
        padding: 18px 46px 18px 18px;
    }

    #faq .card-body {
        font-size: 14px;
        padding: 0 18px 18px;
    }

    #faq .card-header a::after {
        right: 16px;
        font-size: 20px;
    }
}


#faq .collapse,
#faq .collapsing {
    transition: height .25s ease;
}




div#faq {
    margin-bottom: 100px;
}



/* ===============================
   HERO BUTTON – PREMIUM ANIMATED
   =============================== */

.herobtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 34px;
    border-radius: 999px;
    
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;

    background: transparent;
    z-index: 1;
    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* ===== ANIMATED GRADIENT BORDER ===== */
.herobtn::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px; /* border thickness */
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #00c6ff,
        #7b7cff,
        #c77dff,
        #00c6ff
    );
    background-size: 400% 100%;
    animation: borderStroke 6s linear infinite;

    /* MASK MAGIC (REQUIRED) */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
    z-index: -1;
}

/* ===== OPTIONAL SOFT GLOW ===== */
.herobtn {
    box-shadow:
        0 10px 30px rgba(47,140,255,0.35);
}

/* ===== HOVER ===== */
.herobtn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 45px rgba(123,124,255,0.45);
        color: white;
}

/* ===== BORDER ANIMATION ===== */
@keyframes borderStroke {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}









/* =========================================
   PARTICIPATION LAYER – PREMIUM CTA STYLE
   ========================================= */


/* =========================================
   FOOTER MATCH (SECOND IMAGE STYLE)
   ========================================= */



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




/* ================================
   WHY BIGBEE – ALIGNMENT FIX
================================ */

/* Section spacing */
#whyBIGBEE {
    padding: 80px 0;
}

/* Make each feature behave like a card */
#whyBIGBEE .row.text-md-left > div[class*="col-"] {
    margin-bottom: 30px; /* vertical gap */
}

/* Card styling using column itself */
#whyBIGBEE .row.text-md-left > div[class*="col-"] {
    background: radial-gradient(
        120% 120% at 0% 0%,
        #0b1220 0%,
        #050a14 100%
    );
    border-radius: 18px;
    padding: 28px 26px;
    border: 1px solid rgba(90,140,255,0.45);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Equal height rows (desktop only) */
@media (min-width: 768px) {
    #whyBIGBEE .row.text-md-left {
        display: flex;
        flex-wrap: wrap;
    }

    #whyBIGBEE .row.text-md-left > div[class*="col-"] {
        display: flex;
        flex-direction: column;
    }
}

/* Hover lift (subtle) */
#whyBIGBEE .row.text-md-left > div[class*="col-"]:hover {
    transform: translateY(-6px);
    box-shadow:
        0 10px 10px #3fd0ff,
        0 0 0 1px #3fd0ff;
}

/* Icon alignment */
#whyBIGBEE .f-icon {
    font-size: 28px;
    margin-bottom: 14px;
    color: #4da3ff;
}

/* Title alignment */
#whyBIGBEE h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffffff;
}

/* Paragraph alignment */
#whyBIGBEE p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin-bottom: 0;
}

/* Center text ONLY on mobile */
@media (max-width: 767px) {
    #whyBIGBEE .row.text-md-left {
        text-align: center;
    }

    #whyBIGBEE .f-icon {
        margin-left: auto;
        margin-right: auto;
    }
}



.row.text-md-left.text-center {
    column-gap: 40px;
}




/* =====================================================
   TOKEN SECTION – PREMIUM BLOCKCHAIN BACKGROUND
   ===================================================== */

#token {
    position: relative;
    overflow: hidden;
    background: radial-gradient(
        ellipse at top,
        #2b3240 0%,
        #1f2531 45%,
        #171c26 100%
    );
}

/* GRID + VIGNETTE */
#token::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.45)),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: auto, 70px 70px, 70px 70px;
    z-index: 0;
}

/* MOVING GLOW LAYER */
#token::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(120,160,255,0.12),
        transparent 60%
    );
    animation: tokenGlowMove 12s ease-in-out infinite;
    z-index: 0;
}

/* Glow animation */
@keyframes tokenGlowMove {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(6%,4%); }
    100% { transform: translate(0,0); }
}

/* Keep content above background */
#token .container {
    position: relative;
    z-index: 2;
}



#token .card.box-show {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.015)
    );
    backdrop-filter: blur(10px);
}



.card.box-show.py-md-5.wow.fadeInUp {
    animation: iconFloat 3s ease-in-out infinite;
}



/* ===============================
   TYPEWRITER HEADING EFFECT
   =============================== */

/* ===============================
   WHY BIGBEE – PREMIUM BACKGROUND
   =============================== */

/* =========================================
   WHY BIGBEE – ADVANCED ANIMATED BACKGROUND
   ========================================= */
/* =========================================
   WHY BIGBEE – ADVANCED ANIMATED BACKGROUND
   ========================================= */
/* ================================
   WHY BIGBEE – MATCHED BACKGROUND
   ================================ */

#whyBIGBEE {
    position: relative;
    background:
        radial-gradient(circle at 20% 15%, rgba(0, 140, 255, 0.12), transparent 45%),
        radial-gradient(circle at 80% 25%, rgba(124, 77, 255, 0.12), transparent 45%),
        linear-gradient(180deg, #2f3743 0%, #2b323d 100%);
    overflow: hidden;
}

/* Soft animated depth layer */
#whyBIGBEE::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03), transparent 55%);
    animation: subtleShift 22s ease-in-out infinite;
    pointer-events: none;
}

/* Very faint grid (matches other sections) */
#whyBIGBEE::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: 0.15;
    pointer-events: none;
}

/* Depth animation (slow & classy) */
@keyframes subtleShift {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* Keep content clean above background */
#whyBIGBEE .container {
    position: relative;
    z-index: 2;
}
#whyBIGBEE .col-md-4 {
    transition: transform 0.35s ease;
}

#whyBIGBEE .col-md-4:hover {
    transform: translateY(-6px);


}
@media (max-width: 768px) {
    #whyBIGBEE::after {
        opacity: 0.08;
    }
}



/* ================================
   WHY BIGBEE – NEON BACKGROUND
   ================================ */

#whyBIGBEE {
    position: relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 140, 255, 0.18), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(80, 120, 255, 0.16), transparent 50%),
        linear-gradient(180deg, #2f3743 0%, #2b323d 100%);
    overflow: hidden;
}

/* Subtle animated neon flow */
#whyBIGBEE::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(0, 140, 255, 0.12), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(90, 120, 255, 0.1), transparent 55%);
    animation: neonBgMove 26s ease-in-out infinite;
    pointer-events: none;
}

/* Faint grid (already matches your site) */
#whyBIGBEE::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: 0.12;
    pointer-events: none;
}

@keyframes neonBgMove {
    0% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

#whyBIGBEE .container {
    position: relative;
    z-index: 2;
}



/* ================================
   WHY BIGBEE – NEON BACKGROUND
   ================================ */

#whyBIGBEE {
    position: relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 140, 255, 0.18), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(80, 120, 255, 0.16), transparent 50%),
        linear-gradient(180deg, #2f3743 0%, #2b323d 100%);
    overflow: hidden;
}

/* Subtle animated neon flow */
#whyBIGBEE::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(0, 140, 255, 0.12), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(90, 120, 255, 0.1), transparent 55%);
    animation: neonBgMove 26s ease-in-out infinite;
    pointer-events: none;
}

/* Faint grid (already matches your site) */
#whyBIGBEE::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: 0.12;
    pointer-events: none;
}

@keyframes neonBgMove {
    0% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

#whyBIGBEE .container {
    position: relative;
    z-index: 2;
}
#whyBIGBEE .f-icon {
    font-size: 28px;
    color: #00b4ff;
    filter: drop-shadow(0 0 6px rgba(0,180,255,0.6));
    transition: filter 0.35s ease;
}

#whyBIGBEE .col-md-4:hover .f-icon {
    filter: drop-shadow(0 0 14px rgba(0,180,255,0.9));
}
@media (max-width: 768px) {
    #whyBIGBEE .col-md-4 {
        animation: none;
        filter: drop-shadow(0 0 8px rgba(0,140,255,0.3));
    }
}


/* =========================================
   NEON TECH BACKGROUND – LIKE REFERENCE
   ========================================= */

.neon-tech-bg {
    position: relative;
    background:
        /* grid */
        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),
        /* soft neon glow */
        radial-gradient(circle at 20% 25%, rgba(100,140,255,0.18), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(160,120,255,0.16), transparent 45%),
        /* base */
        linear-gradient(180deg, #2b3140 0%, #1f2533 100%);

    background-size:
        48px 48px,
        48px 48px,
        100% 100%,
        100% 100%,
        100% 100%;

    overflow: hidden;
}



.neon-tech-bg::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(
        circle,
        rgba(120,160,255,0.12),
        transparent 60%
    );
    animation: techFloat 18s ease-in-out infinite;
    z-index: 0;
}

@keyframes techFloat {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(4%,3%); }
    100% { transform: translate(0,0); }
}

.neon-tech-bg > .container {
    position: relative;
    z-index: 2;
}
.neon-tech-bg .f-icon {
    filter: drop-shadow(0 0 6px rgba(120,160,255,.35));
}





.section-gap img[src*="MOBILE"] {
    filter:
        drop-shadow(0 25px 50px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 22px rgba(90, 140, 255, 0.18));
    transition: filter 0.4s ease, transform 0.4s ease;
        animation: graphFloat 6s ease-in-out infinite;
}

/* optional: slight lift on hover (desktop only) */
@media (hover: hover) {
    .section-gap img[src*="MOBILE"]:hover {
        transform: translateY(-6px) scale(1.01);
        filter:
            drop-shadow(0 35px 70px rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 30px rgba(90, 140, 255, 0.25));
    }
}

-------


/* FAQ section background – match Participation Layer */


==========

section#faqsection {
    background: radial-gradient(circle at top, rgba(120,133,255,0.18), transparent 45%), radial-gradient(circle at bottom, rgba(80,140,255,0.18), transparent 50%), linear-gradient( 180deg, #0b1020 0%, #0a0f1a 45%, #070b14 100% )
}



/* =========================================
   BIGBEE ECOSYSTEM PARTICIPATION LAYER BG
   (Matches reference – grid + soft glow)
   ========================================= */

.feature-gradient {
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(circle at bottom right, rgba(120,150,255,0.10), transparent 50%),
    linear-gradient(
      180deg,
      #0b1020 0%,
      #0a0f1a 50%,
      #070b14 100%
    );
  overflow: hidden;
}






/* subtle grid overlay */
.feature-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

/* keep content above background */
.feature-gradient .container {
    position: relative;
    z-index: 2;
}




.feature-gradient img {
  filter: drop-shadow(0 25px 60px rgba(120,150,255,0.25));
}



/* glass glow behind text content */
.feature-gradient .glass-panel {
  position: relative;
  padding: 40px 42px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(2px);
}

/* soft gradient glow */
.feature-gradient .glass-panel::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 28px;
  background: linear-gradient(
    120deg,
    rgba(123, 124, 255, 0.14),
    rgba(120, 180, 255, 0.06),
    transparent 65%
  );
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}


.feature-gradient h3,
.feature-gradient h2 {
  position: relative;
}

 .feature-gradient h3::after,
.feature-gradient h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(130,160,255,0.5),
    transparent
  );
  opacity: 0.6;
} 


@media (max-width: 768px) {
  .feature-gradient .glass-panel {
    padding: 28px 22px;
  }

  .feature-gradient .glass-panel::before {
    inset: -12px;
    opacity: 0.35;
  }
}
@media (max-width: 767px) {
  .col-lg-7.col-md-12 {
    margin-top: -24px;
  }
}
@media (max-width: 767px) {
  #whyBIGBEE .row.text-md-left > div[class*="col-"] {
    margin-left: 15px;
    margin-right: 15px;
  }
}



/* =========================
   VALUE FLOW THESIS SECTION
========================= */

.value-flow-section {
  position: relative;
  background:
    radial-gradient(circle at top, rgba(120,150,255,0.12), transparent 45%),
    radial-gradient(circle at bottom, rgba(80,120,255,0.10), transparent 50%),
    linear-gradient(180deg, #0b1020 0%, #0a0f1a 50%, #070b14 100%);
  overflow: hidden;
}

/* subtle grid */
.value-flow-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: .35;
  pointer-events: none;
}

.value-flow-section .container {
  position: relative;
  z-index: 2;
}

/* Badge */
.vf-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9fb2ff;
  border-radius: 20px;
  background: rgba(123,124,255,0.12);
}

/* Flow Track */
.value-flow-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
}

/* Steps */
.vf-step {
  min-width: 140px;
  padding: 16px 18px;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.015)
  );
  border: 1px solid rgba(120,150,255,0.25);
  transition: all .35s ease;
}

.vf-step span {
  display: block;
  font-weight: 600;
  color: #ffffff;
}

.vf-step small {
  font-size: 12px;
  color: #aab4d8;
}

/* Active step */
.vf-step.active {
  border-color: rgba(123,124,255,.6);
  box-shadow:
    0 0 0 1px rgba(123,124,255,.25),
    0 12px 30px rgba(123,124,255,.25);
}

/* Arrow */
.vf-arrow {
  font-size: 20px;
  color: #7b7cff;
  opacity: .6;
}

/* Note */
.vf-note {
  font-size: 13px;
  color: #9aa6c4;
}

/* Mobile */
@media (max-width: 768px) {
  .value-flow-track {
    gap: 12px;
  }

  .vf-arrow {
    display: none;
  }
}
/* =========================
   VALUE FLOW – ANIMATIONS
========================= */

/* Ambient container */
.vf-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Floating Orbs */
.vf-orb {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(123,124,255,0.18),
    rgba(123,124,255,0.05),
    transparent 70%
  );
  filter: blur(40px);
  animation: floatOrb 18s ease-in-out infinite;
  opacity: .35;
}

.orb-1 {
  top: -80px;
  left: -100px;
  animation-delay: 0s;
}

.orb-2 {
  bottom: -120px;
  right: -80px;
  animation-delay: 6s;
}

.orb-3 {
  top: 40%;
  left: 60%;
  width: 260px;
  height: 260px;
  animation-delay: 12s;
}

/* Orb movement */
@keyframes floatOrb {
  0%   { transform: translateY(0) translateX(0) scale(1); }
  50%  { transform: translateY(-30px) translateX(20px) scale(1.05); }
  100% { transform: translateY(0) translateX(0) scale(1); }
}



/* Flow pulse animation */
.value-flow-track {
  position: relative;
}

.value-flow-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(123,124,255,0.08),
    transparent
  );
  animation: flowPulse 6s linear infinite;
  pointer-events: none;
  border-radius: 20px;
}

@keyframes flowPulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.vf-step:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(123,124,255,.35),
    0 18px 40px rgba(123,124,255,.35);
}


.value-flow-card {
  position: relative;
  background: rgba(12,16,32,0.85);
  border-radius: 22px;
  padding: 56px 48px;
  border: 1px solid rgba(123,124,255,.35);
  box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  z-index: 2;
}

/* animated neon border */
.value-flow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    rgba(123,124,255,.65),
    rgba(80,140,255,.25),
    rgba(123,124,255,.65)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderGlow 6s linear infinite;
  pointer-events: none;
}

@keyframes borderGlow {
  0% { filter: hue-rotate(0deg); opacity: .45; }
  50% { opacity: .75; }
  100% { filter: hue-rotate(15deg); opacity: .45; }
}


.vf-bg-wave {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(123,124,255,0.22),
    transparent 70%
  );
  filter: blur(60px);
  animation: waveFloat 20s ease-in-out infinite;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

.wave-1 {
  top: -140px;
  left: -120px;
}

.wave-2 {
  bottom: -160px;
  right: -120px;
  animation-delay: 8s;
}

@keyframes waveFloat {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(30px,-20px) scale(1.05); }
  100% { transform: translate(0,0) scale(1); }
}

.value-flow-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(123,124,255,.10),
    transparent
  );
  animation: flowSweep 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes flowSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.vf-step {
  transition: transform .35s ease, box-shadow .35s ease;
}

.vf-step:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(123,124,255,.45),
    0 18px 40px rgba(123,124,255,.35);
}
@media (max-width: 768px) {
  .value-flow-card {
    padding: 36px 24px;
  }

  .vf-bg-wave {
    width: 260px;
    height: 260px;
    filter: blur(40px);
  }
}


.neon-coin {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;

  /* COIN BODY */
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.9),
      rgba(190,120,255,.9) 35%,
      rgba(120,80,255,.85) 55%,
      rgba(60,20,120,.9) 72%,
      rgba(20,10,40,1) 100%
    );

  /* COIN EDGE RING */
  outline: 2px solid rgba(190,120,255,.75);

  /* NEON GLOW */
  box-shadow:
    0 0 35px rgba(190,120,255,.85),
    0 0 90px rgba(120,80,255,.65),
    inset 0 0 35px rgba(255,255,255,.35);

  filter: saturate(1.4);
  opacity: .55;
  pointer-events: none;
  z-index: 0;

  animation: coinOrbit 28s linear infinite;
}
.coin-a {
  top: -80px;
  left: 10%;
  animation-duration: 34s;
}

.coin-b {
  bottom: -90px;
  right: 8%;
  width: 170px;
  height: 170px;
  opacity: .45;
  animation-duration: 38s;
  animation-delay: 6s;
}

.coin-c {
  top: 35%;
  right: -70px;
  width: 140px;
  height: 140px;
  opacity: .35;
  animation-duration: 42s;
  animation-delay: 12s;
}

.coin-d {
  bottom: 25%;
  left: -60px;
  width: 120px;
  height: 120px;
  opacity: .28;
  animation-duration: 46s;
  animation-delay: 18s;
}
@keyframes coinOrbit {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-35px) rotate(90deg);
  }
  50% {
    transform: translateY(0) rotate(180deg);
  }
  75% {
    transform: translateY(35px) rotate(270deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}
.feature-gradient,
.feature-gradient .container {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .neon-coin {
    width: 90px;
    height: 90px;
    opacity: .25;
    box-shadow:
      0 0 18px rgba(190,120,255,.6),
      0 0 40px rgba(120,80,255,.45);
  }
}


---
.bg-neon-coin {
  position: absolute;
  right: 6%;
  bottom: 10%;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 0;
}
.coin-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  background:
    radial-gradient(circle at 30% 30%,
      #ffffff,
      #c9b6ff 22%,
      #7b7cff 45%,
      #3a1d7a 70%,
      #12081f 100%
    );

  box-shadow:
    0 0 20px rgba(123,124,255,0.8),
    0 0 45px rgba(180,120,255,0.9),
    0 0 90px rgba(120,80,255,0.7),
    inset 0 0 25px rgba(255,255,255,0.35);

  border: 3px solid rgba(150,140,255,0.9);

  animation:
    floatCoin 8s ease-in-out infinite,
    spinCoin 30s linear infinite;
}
@keyframes floatCoin {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes spinCoin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.feature-gradient,
.section-gap {
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .bg-neon-coin {
    width: 120px;
    height: 120px;
    right: 50%;
    transform: translateX(50%);
    bottom: 6%;
    opacity: 0.35;
  }
}
.neon-coin-wrap {
  position: absolute;
  top: 12%;
  left: 6%;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 1;
}
------



/* container */
.bigb-coin-wrap {
  position: absolute;
  right: 4%;
  bottom: -140px;       /* push coin down */
  width: 190px;         /* ⬅️ reduced */
  height: 190px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}


/* coin image */
.bigb-coin {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;

  animation:
    coin-float 6s ease-in-out infinite,
    coin-rotate 28s linear infinite;

  filter:
    drop-shadow(0 0 25px rgba(120,120,255,0.55))
    drop-shadow(0 0 60px rgba(160,120,255,0.45));
}


.bigb-coin {
  filter:
    drop-shadow(0 0 18px rgba(120,140,255,0.45))
    drop-shadow(0 0 40px rgba(150,120,255,0.35));
}

/* glowing aura behind coin */
.coin-halo {
  inset: -22px; /* was too large */
  filter: blur(22px);

  background: radial-gradient(
    circle,
    rgba(120,140,255,0.35),
    rgba(90,80,200,0.18),
    transparent 65%
  );
}


/* orbiting particles */
.orbit {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px dashed rgba(160,140,255,0.25);
  z-index: 0;
}

.orbit-1 {
  animation: orbit-rotate 20s linear infinite;
}

.orbit-2 {
  inset: -35px;
  border-color: rgba(120,180,255,0.18);
  animation: orbit-rotate-rev 32s linear infinite;
}

/* animations */
@keyframes coin-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

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

@keyframes halo-pulse {
  0%,100% { opacity: .45; }
  50% { opacity: .85; }
}

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

@keyframes orbit-rotate-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@media (max-width: 768px) {
  .bigb-coin-wrap {
    position: relative;
    margin: 40px auto 0;
    right: auto;
    top: auto;
    width: 180px;
    height: 180px;
  }
}



@media (max-width: 768px) {
  .bigb-coin-wrap {
    width: 120px;
    height: 120px;
    right: 50%;
    transform: translateX(50%);
    bottom: -90px;
    opacity: 0.6;
  }

  .coin-halo {
    inset: -16px;
  }
}


.bigb-coin-wrap::after {
  content: '';
  position: absolute;
  inset: 30%;
  background: url("assets/img/bigbcoin.png") center/contain no-repeat;
  opacity: 0.08;
  filter: blur(2px);
}



html {
  /* 'auto' is the backup in case the image doesn't load */
  cursor: url('assets/img/bigbcoin1.png') 0 0, auto;
}

/* Ensure buttons and links also use the custom cursor */
a, button, input[type="submit"] {
  cursor: url('assets/img/bigbcoin1.png') 0 0, pointer;
}

html {
  /* 32 32 centers the click point on your 64x64 image */
  cursor: url('assets/img/bigbcoin1.png') 16 16, auto;
}
a:hover {
  cursor: url('assets/img/bigbcoin1.png') 16 16, pointer;
}


body {
  /* You MUST have the comma and 'auto' at the end */
  cursor: url('assets/img/bigbcoin1.png') 16 16, auto;
}


html, body {
  /* This is a small encoded image to test visibility */
  /* cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMREi0XImCrpAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkZW56format"), auto;
  */
  cursor: url('assets/img/bigbcoin1.png') 16 16, auto;
  height: 100%;
}

/* cursor: url('assets/img/bigbcoin1.png') 16 16, auto; */

#bee-coin-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none; /* Crucial: clicks pass through the image to buttons */
  z-index: 9999;
  transition: transform 0.1s ease-out; /* Adds a tiny bit of smooth "float" */
  will-change: transform;
}

/* Airdrop Claim Flow */
/* ===============================
   AIRDROP FLOW – PREMIUM NEON
================================ */

.airdrop-flow {
  position: relative;
  overflow: hidden;
}

/* floating neon coin */
.airdrop-coin {
  position: absolute;
  right: -80px;
  top: 35%;
  width: 180px;
  height: 180px;
  background: url("../img/bigbcoin.png") center/contain no-repeat;
  filter: drop-shadow(0 0 35px rgba(123,124,255,.6));
  animation: floatCoin 10s ease-in-out infinite;
  opacity: .7;
}

@keyframes floatCoin {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(12deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* eyebrow */
.eyebrow-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(123,124,255,.15);
  border: 1px solid rgba(123,124,255,.35);
  color: #9da2ff;
  font-size: 12px;
  letter-spacing: .12em;
}

/* steps */
.airdrop-steps .step-card {
  margin-bottom: 30px;
}

.step-inner {
  position: relative;
  height: 100%;
  padding: 28px 20px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(123,124,255,.35);
  text-align: center;
  transition: all .4s ease;
}

.step-inner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  background: linear-gradient(120deg,#5fa9ff,#7b7cff,#5fa9ff);
  opacity: .25;
  z-index: -1;
}

.step-inner:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(123,124,255,.35);
}

/* SVG step number */
.step-svg {
  width: 70px;
  height: 70px;
  margin-bottom: 14px;
}

.step-svg circle {
  fill: none;
  stroke: #7b7cff;
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(123,124,255,.6));
}

.step-svg text {
  fill: #fff;
  font-size: 28px;
  font-weight: 700;
  text-anchor: middle;
  filter: drop-shadow(0 0 6px rgba(123,124,255,.6));
}

/* highlight card */
.step-card.highlight .step-inner {
  background: rgba(123,124,255,.10);
  box-shadow: 0 0 40px rgba(123,124,255,.35);
}

/* trust boxes */
.trust-box {
  position: relative;
  padding: 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(123,124,255,.35);
}

.section-gray-bg .col-gap::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(123,124,255,.12), transparent 60%);
  opacity: .4;
  pointer-events: none;
}

/* lists */
.trust-box ul {
  padding-left: 0;
  list-style: none;
}

.trust-box li {
  padding-left: 18px;
  margin-bottom: 10px;
  position: relative;
}

.trust-box li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #7b7cff;
}

/* disclaimer */
.disclaimer {
  font-size: 13px;
  opacity: .7;
}

/* mobile fixes */
@media (max-width: 768px) {
  .airdrop-coin {
    display: none;
  }
  .step-inner {
    padding: 24px 18px;
  }
}
------------


/* FORCE HIDE DEFAULT CURSOR */
html, body, a, button, * {
    cursor: none !important;
}

/* THE FLOATING CURSOR */
#crypto_vibe_cursor_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    pointer-events: none;
    z-index: 999999; /* Stay above everything */
    will-change: transform;
}

#crypto_vibe_main_icon {
    width: 100%;
    height: 100%;
    transition: transform 0.1s linear;
}

/* THE SIDE SCROLL TRACKER (From your image) */
.crypto_vibe_scroll_path {
    position: fixed;
    right: 15px;
    top: 10%;
    height: 80vh;
    width: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    z-index: 999998;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#crypto_vibe_tracker_icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    filter: drop-shadow(0 0 10px #0066ff); /* Blue Crypto Glow */
}

#crypto_vibe_tracker_icon img {
    width: 100%;
    height: 100%;
}

/* ANIMATION STATES */
.crypto_vibe_spinning {
    animation: crypto_vibe_rotate 0.6s ease-in-out;
}

@keyframes crypto_vibe_rotate {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}


::-webkit-scrollbar {
    display: none;
}

html {
    ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}


@media only screen and (max-width: 768px) {
    #crypto_vibe_cursor_container, 
    .crypto_vibe_scroll_path {
        display: none !important;
    }
    
    /* Bring back the normal touch cursor for mobile users */
    html, body, * {
        cursor: auto !important;
    }
}

/* 3. ENSURE THE CUSTOM TRACKER IS VISIBLE ON DESKTOP */
.crypto_vibe_scroll_path {
    position: fixed;
    right: 10px; /* Moves it close to the edge like the image */
    top: 10%;
    height: 80vh;
    width: 4px;
    background: rgba(255, 255, 255, 0.05); /* Very subtle track */
    border-radius: 10px;
    z-index: 999998;
}

/* THIS IS 3 SECTION CSS */


/* ===============================
   SHARED NEON BACKGROUND
================================ */
.neon-bg {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(123,124,255,.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(80,140,255,.15), transparent 50%),
    linear-gradient(180deg,#0b1020,#070b14);
  overflow: hidden;
}

.section-gray-bg {
  background:
    linear-gradient(180deg,#0c1222,#090e1a);
  position: relative;
}

/* grid overlay */
.neon-bg::before,
.section-gray-bg::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:80px 80px;
  opacity:.3;
  pointer-events:none;
}

/* ===============================
   ORBITAL COIN
================================ */
.orbital-coin {
  position:absolute;
  right:-120px;
  top:50%;
  width:260px;
  height:260px;
  background:url("../img/bigbcoin.png") center/contain no-repeat;
  filter: drop-shadow(0 0 30px rgba(120,150,255,.5));
  animation: orbitFloat 14s linear infinite;
  opacity:.85;
}

.orbital-coin.small {
  width:180px;
  height:180px;
  right:-90px;
}

@keyframes orbitFloat {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}

/* ===============================
   SECTION HEAD
================================ */
.section-head h2 {
  font-size: clamp(28px,4vw,42px);
}

.eyebrow {
  font-size:12px;
  letter-spacing:.14em;
  color:#7b7cff;
}

/* ===============================
   PARTNER NETWORK
================================ */
.partner-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  margin-top:40px;
}

.partner-card {
  padding:30px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(123,124,255,.35);
  text-align:center;
  backdrop-filter:blur(10px);
  transition:.3s;
}

.partner-card span {
  color:#9fb4ff;
  font-size:13px;
}

/* ===============================
   PARTNER ECOSYSTEM
================================ */
.ecosystem-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  margin-top:40px;
}

.eco-box {
  padding:28px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(123,124,255,.12),transparent);
  border:1px solid rgba(123,124,255,.35);
}

/* ===============================
   SECURITY
================================ */
.security-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;
  margin-top:40px;
}

.security-card {
  padding:30px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(123,124,255,.4);
  backdrop-filter:blur(12px);
}

/* ===============================
   MOBILE
================================ */
@media(max-width:768px){
  .orbital-coin{display:none;}
}



/* ADD LINER PARTNER NETWORK */


/* ===============================
   NEON GRID BACKGROUND (CRYPTO STYLE)
   =============================== */
/* ======================================================
   BASE NEON BACKGROUND
====================================================== */
.neon-grid-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(90,120,255,0.35), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(150,100,255,0.30), transparent 50%),
    linear-gradient(180deg, #070b14 0%, #0a1020 55%, #060911 100%);
}

/* Content always on top */
.neon-grid-bg .container {
  position: relative;
  z-index: 5;
}

/* ======================================================
   WAVE MESH (THIS IS THE MAIN FIX)
====================================================== */
.wave-layer {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 260px;
  pointer-events: none;
  z-index: 1;
  filter: blur(30px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at center,
      rgba(110,140,255,0.55) 0%,
      rgba(110,140,255,0.25) 35%,
      rgba(110,140,255,0.08) 55%,
      transparent 70%);
}

.wave-1 {
  bottom: -40px;
  animation: waveFloat1 18s ease-in-out infinite;
}
.wave-2 {
  bottom: 60px;
  opacity: 0.6;
  animation: waveFloat2 26s ease-in-out infinite reverse;
}
.wave-3 {
  bottom: 140px;
  opacity: 0.35;
  animation: waveFloat3 34s ease-in-out infinite;
}

@keyframes waveFloat1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-12%); }
  100% { transform: translateX(0); }
}
@keyframes waveFloat2 {
  0% { transform: translateX(0); }
  50% { transform: translateX(10%); }
  100% { transform: translateX(0); }
}
@keyframes waveFloat3 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-8%); }
  100% { transform: translateX(0); }
}

/* ======================================================
   PARTICLES – DENSE & VISIBLE
====================================================== */
.crypto-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.crypto-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #7b7cff 0%, rgba(123,124,255,.2) 70%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(123,124,255,.8);
  animation: particleDrift linear infinite;
  opacity: .8;
}

/* Randomized look */
.crypto-particles span:nth-child(n) {
  top: calc(100% * var(--r1));
  left: calc(100% * var(--r2));
  animation-duration: calc(6s + var(--r3) * 10s);
}

@keyframes particleDrift {
  0%   { transform: translateY(0); opacity:.3; }
  50%  { transform: translateY(-50px); opacity:1; }
  100% { transform: translateY(0); opacity:.3; }
}

/* ======================================================
   NEON FLOATING COINS
====================================================== */
.neon-coin {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #9fb6ff, #4c6bff 60%, #2b3cff 100%);
  box-shadow:
    0 0 40px rgba(123,124,255,.9),
    inset 0 0 20px rgba(255,255,255,.25);
  z-index: 2;
  opacity: .9;
}

.coin-e {
  top: 20%;
  right: -40px;
  animation: coinFloat1 16s ease-in-out infinite;
}
.coin-f {
  bottom: 15%;
  left: -50px;
  animation: coinFloat2 22s ease-in-out infinite reverse;
}

@keyframes coinFloat1 {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-40px) rotate(12deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes coinFloat2 {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(35px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ======================================================
   PARTNER CARD – ANIMATED NEON BORDER
====================================================== */
.partner-card {
  position: relative;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 32px;
  text-align: center;
  color: #fff;
}

.partner-card::before {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background: linear-gradient(120deg,#5fa9ff,#7b7cff,#5fa9ff);
  opacity:.9;
  animation: borderFlow 6s linear infinite;
  z-index:-1;
}

@keyframes borderFlow {
  0% { filter:hue-rotate(0deg); }
  100% { filter:hue-rotate(360deg); }
}

/* ======================================================
   MOBILE OPTIMIZATION
====================================================== */
@media(max-width:768px){
  .neon-coin{ width:80px;height:80px;opacity:.6 }
  .wave-layer{ height:160px;filter:blur(22px) }
}







/* =====================================================
   PARTNER NETWORK – PREMIUM CRYPTO BACKGROUND SYSTEM
   ===================================================== */

/* ---------- SECTION BASE ---------- */
.partner-network.neon-grid-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(90,140,255,0.22), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(140,110,255,0.20), transparent 50%),
    linear-gradient(180deg, #070b14 0%, #0a1020 45%, #050814 100%);
}

/* =====================================================
   1️⃣ PARTICLE FIELD (IMAGE-LIKE, DENSE)
   ===================================================== */
/* .crypto-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.crypto-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle,
    rgba(123,124,255,1),
    rgba(123,124,255,.4),
    transparent 70%);
  border-radius: 50%;
  box-shadow:
    0 0 8px rgba(123,124,255,.9),
    0 0 16px rgba(90,140,255,.6);
  animation: particleFloat linear infinite;
  opacity: 0;
}

/* Dense distribution */
/* .crypto-particles span:nth-child(n) {
  animation-duration: calc(12s + (var(--i) * 2s));
}

/* Create depth illusion */
/* .crypto-particles span:nth-child(odd) {
  transform: scale(.8);
}
.crypto-particles span:nth-child(even) {
  transform: scale(1.2);
} */

/* @keyframes particleFloat {
  0%   { transform: translateY(120%) translateX(0); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translateY(-140%) translateX(-60px); opacity: 0; }
} */
/* ===============================
   BASE SECTION
================================ */
.neon-bg {
  position: relative;
  background: radial-gradient(circle at top, #1b2450, #060b1a);
  overflow: hidden;
}

/* Canvas sits behind */
#waveCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Content above canvas */
.neon-bg .container {
  position: relative;
  z-index: 2;
}

/* ===============================
   HEADER
================================ */
.section-head .eyebrow {
  color: #7b7cff;
  letter-spacing: 2px;
  font-size: 12px;
}

.section-head h2 {
  color: #fff;
  margin: 12px 0;
}

.section-head p {
  color: #b8c0ff;
}

/* ===============================
   PARTNER GRID
================================ */
.partner-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

/* ===============================
   PARTNER CARD (PROPER)
================================ */
.partner-card {
  position: relative;
  padding: 28px;
  border-radius: 18px;
  background: rgba(10,15,30,0.65);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(12px);
}

/* Animated border ONLY */
.partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    120deg,
    #5fa9ff,
    #7b7cff,
    #5fa9ff
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  transition: opacity .3s;
}

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

/* SVG ICON */
.partner-card svg {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  fill: none;
  stroke: #7b7cff;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(123,124,255,.6));
}

.partner-card span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #9aa4ff;
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
  .section-head h2 { font-size: 26px; }
}



/* ===============================
   BASE SECTION
================================ */
.bigbee-roadmap {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(
    180deg,
    #0b1224 0%,
    #0a1020 50%,
    #080d1a 100%
  );
  overflow: hidden;
}

/* ===============================
   PARTICLE BACKGROUND (SUBTLE)
================================ */
.roadmap-bg-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(120,160,255,0.35);
  border-radius: 50%;
  animation: particleFloat 12s infinite ease-in-out;
}
.roadmap-bg-particles span:nth-child(n) {
  top: calc(100% * var(--y));
  left: calc(100% * var(--x));
}
.roadmap-bg-particles span:nth-child(1){--x:.1;--y:.2}
.roadmap-bg-particles span:nth-child(2){--x:.3;--y:.6}
.roadmap-bg-particles span:nth-child(3){--x:.5;--y:.3}
.roadmap-bg-particles span:nth-child(4){--x:.7;--y:.7}
.roadmap-bg-particles span:nth-child(5){--x:.9;--y:.4}

@keyframes particleFloat {
  0%,100% { transform: translateY(0); opacity:.2 }
  50% { transform: translateY(-30px); opacity:.6 }
}

/* ===============================
   HEADER
================================ */
.roadmap-header {
  text-align: center;
  margin-bottom: 90px;
}
.roadmap-header h2 {
  color: #ffffff;
  font-size: 42px;
}
.roadmap-header p {
  color: #9fb0d9;
}

/* ===============================
   WRAPPER
================================ */
.roadmap-wrapper {
  position: relative;
  max-width: 900px;
  margin: auto;
}

/* ===============================
   CENTER LINE
================================ */
.roadmap-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    #6fa8ff,
    transparent
  );
  box-shadow: 0 0 14px rgba(111,168,255,0.4);
}

/* ===============================
   ITEMS
================================ */
.roadmap-item {
  position: relative;
  width: 50%;
  padding: 30px 0;
}
.roadmap-item.left { left: 0; text-align: right; padding-right: 40px; }
.roadmap-item.right { left: 50%; padding-left: 40px; }

/* ===============================
   CARD (CALM GLASS)
================================ */
.roadmap-card {
  display: inline-block;
  max-width: 320px;
  padding: 22px 26px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(120,160,255,0.18);
  transition: transform .3s ease, box-shadow .3s ease;
}

.roadmap-card h4 {
  color: #ffffff;
  margin-bottom: 8px;
}
.roadmap-card p {
  color: #b7c4e6;
  font-size: 14px;
  line-height: 1.6;
}

/* Hover – subtle */
.roadmap-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Active (current quarter) */
.roadmap-item.active .roadmap-card {
  border-color: rgba(120,160,255,0.45);
}

/* ===============================
   MOBILE MODE
================================ */
@media (max-width: 768px) {
  .roadmap-line {
    left: 10px;
  }
  .roadmap-item,
  .roadmap-item.left,
  .roadmap-item.right {
    width: 100%;
    left: 0;
    text-align: left;
    padding-left: 40px;
    padding-right: 0;
  }
}



/* ===============================
   SECTION BASE
================================ */
.bigbee-roadmap {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(180deg,#0b1224,#090f1e);
  overflow: hidden;
}

/* ===============================
   HEADER
================================ */
.roadmap-header {
  text-align: center;
  margin-bottom: 80px;
}
.roadmap-header h2 { color:#fff; font-size:42px; }
.roadmap-header p { color:#9fb0d9; }

/* ===============================
   PARTICLES (SUBTLE)
================================ */
.roadmap-bg-particles span {
  position:absolute;
  width:2px;height:2px;
  background:rgba(120,160,255,.35);
  border-radius:50%;
  animation: float 10s infinite ease-in-out;
}
.roadmap-bg-particles span:nth-child(1){top:20%;left:10%}
.roadmap-bg-particles span:nth-child(2){top:40%;left:30%}
.roadmap-bg-particles span:nth-child(3){top:60%;left:60%}
.roadmap-bg-particles span:nth-child(4){top:30%;left:80%}
.roadmap-bg-particles span:nth-child(5){top:70%;left:50%}

@keyframes float {
  0%,100%{opacity:.2;transform:translateY(0)}
  50%{opacity:.6;transform:translateY(-25px)}
}

/* ===============================
   HORIZONTAL TRACK
================================ */
.roadmap-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Line */
.roadmap-line-horizontal {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,#6fa8ff,#8a7cff);
  box-shadow: 0 0 14px rgba(120,160,255,.45);
}

/* ===============================
   NODE
================================ */
.roadmap-node {
  position: relative;
  text-align: center;
  z-index: 2;
}

/* Dot */
.roadmap-dot {
  width: 14px;
  height: 14px;
  margin: auto;
  border-radius: 50%;
  background: #6fa8ff;
  box-shadow: 0 0 14px rgba(120,160,255,.6);
}

/* Card */
.roadmap-card {
  margin-top: 22px;
  width: 240px;
  padding: 20px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(120,160,255,.2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.roadmap-card h4 { color:#fff; margin-bottom:6px; }
.roadmap-card p { color:#b7c4e6; font-size:14px; }

/* Hover */
.roadmap-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

/* Active */
.roadmap-node.active .roadmap-dot {
  background:#8a7cff;
  box-shadow:0 0 18px rgba(138,124,255,.8);
}

/* ===============================
   MOBILE → VERTICAL
================================ */
@media (max-width: 991px) {
  .roadmap-track {
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }

  .roadmap-line-horizontal {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    height: 100%;
  }

  .roadmap-node {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .roadmap-dot {
    margin: 6px 0 0;
  }

  .roadmap-card {
    width: 100%;
  }
}



/* Try */
.trust-box {
    margin-top: 10px;
}



.roadmap-bg-particles {
    margin-top: -90px;
}



/* ===============================
   WHY BIGBEE – PREMIUM DARK SECTION
   =============================== */

.dark-chain-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(90,140,255,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(140,110,255,.15), transparent 45%),
    linear-gradient(180deg, #0b1020 0%, #090f1c 50%, #070b14 100%);
}

/* Section head */
.why-bigbee .section-head {
  max-width: 720px;
  margin: 0 auto 60px;
}

.why-bigbee .eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .15em;
  color: #7b7cff;
  margin-bottom: 12px;
}

.why-bigbee h2 {
  color: #fff;
}

.why-bigbee p {
  color: rgba(255,255,255,.7);
}

/* Grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Cards */
.why-card {
  position: relative;
  padding: 34px 28px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(123,124,255,.25);
  transition: transform .4s ease, box-shadow .4s ease;
}

.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid transparent;
  background: linear-gradient(120deg,#5fa9ff,#7b7cff,#5fa9ff) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .6;
  animation: borderPulse 4s ease-in-out infinite;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(90,140,255,.25);
}

/* Icon */
.icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: radial-gradient(circle,#5fa9ff,#7b7cff);
  box-shadow: 0 0 25px rgba(123,124,255,.6);
}

.icon-wrap svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}

/* Text */
.why-card h5 {
  color: #fff;
  margin-bottom: 10px;
}

.why-card p {
  font-size: 14px;
  line-height: 1.6;
}

/* ===============================
   BACKGROUND BLOCKCHAIN EFFECTS
   =============================== */

/* Rotating chain rings */
.chain-rings {
  position: absolute;
  inset: -20%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(123,124,255,.08) 0 2px,
      transparent 2px 40px);
  animation: rotateRings 80s linear infinite;
  opacity: .35;
  z-index: 0;
}

/* Floating particles */
.chain-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(123,124,255,.35) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: particleMove 40s linear infinite;
  opacity: .25;
  z-index: 0;
}

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

@keyframes particleMove {
  from { background-position: 0 0; }
  to   { background-position: 400px 400px; }
}

@keyframes borderPulse {
  0%,100% { opacity: .35; }
  50% { opacity: .8; }
}

/* Content above bg */
.why-bigbee .container {
  position: relative;
  z-index: 2;
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width: 991px) {
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}