html, body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #111;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    line-height: 1.6;
    padding-top: 0;

}

/* Hide scrollbars on WebKit */
body::-webkit-scrollbar {
    display: none;
}

/* Global container widths */

section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsive typography */
h1 {
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    line-height: 1.3;
}
h2 {
    font-size: clamp(1.4rem, 2vw, 2rem);
}
h3, h4 {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}
p {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000;
    height: 70px;
    z-index: 20000;
    overflow: visible;
    
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 16px;
    backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
    
}

.site-name {
    flex: 0 0 auto;
    max-width: 300px;
    margin: 0;
    text-align: left;
}

.site-name .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
}

.site-name img {
    max-height: 50px;
    width: auto;
    margin: 0;
    display: block;
}
/* ================= BITNET HERO ================= */

.bitnet-hero-content{
    max-width:900px;
    margin:0 auto;
    text-align:center;
    padding:20px;
}

/* ---------- Hero Label ---------- */

.bitnet-label{
    display:inline-block;
    padding:10px 24px;
    margin-bottom:25px;

    border-radius:50px;

    background:rgba(255,215,0,.08);

    border:1px solid rgba(255,215,0,.35);

    color:#ffe082;

    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;

    backdrop-filter:blur(10px);

    box-shadow:0 0 18px rgba(255,215,0,.18);
}

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

.bitnet-title{
    font-size:58px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:3px;
    text-align:center;
    margin:0 0 35px;
    position:relative;
    line-height: 3.4rem;

    /* Gold metallic effect */
    background:linear-gradient(
        180deg,
        #fff8c6 0%,
        #ffe082 20%,
        #ffd54f 40%,
        #d4af37 60%,
        #b8860b 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    /* Strong glow */
    text-shadow:
        0 2px 3px rgba(0,0,0,.6),
        0 0 15px rgba(255,215,0,.35),
        0 0 30px rgba(255,215,0,.2);

    animation:goldGlow 3s ease-in-out infinite alternate;
}

/* Make second line appear below */

.bitnet-title span{
    display:block;
    margin-top:10px;
}

/* Decorative underline */

.bitnet-title::after{

    content:"";

    display:block;

    width:170px;
    height:4px;

    margin:18px auto 0;

    border-radius:10px;

    background:linear-gradient(
        to right,
        transparent,
        #ffd700,
        #fff5b1,
        #ffd700,
        transparent
    );

    box-shadow:0 0 18px rgba(255,215,0,.55);
}

/* Gold Glow */

@keyframes goldGlow{

    from{
        filter:drop-shadow(0 0 5px rgba(255,215,0,.3));
    }

    to{
        filter:drop-shadow(0 0 20px rgba(255,215,0,.7));
    }

}
/* Nav links */
.crypto-nav-links-container {
    display: flex;
    align-items: center;
    z-index: 3000; /* ensure menu overlays ticker */
}

.crypto-nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.crypto-nav-links li {
    position: relative;
}

.crypto-nav-links a {
    text-decoration: none;
    color: #fff;
    padding: 0.5rem;
    transition: color 0.3s;
}

.crypto-nav-links a.crypto-active {
    color: #ff7f00;
}

/* Submenu (desktop) */
.crypto-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #f2f2f2; /* light grey background */
    list-style: none;
    padding: 0.5rem 0;
    min-width: 140px; /* fixed width */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 4000; /* higher than ticker */
}

.crypto-submenu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #111; /* dark text on light background */
}

.crypto-submenu li a:hover {
    background: #ddd;
    color: #ff7f00;
}

/* Show submenu when parent is open */
.crypto-nav-links li.crypto-has-submenu.crypto-open > .crypto-submenu {
    display: block;
}

/* Buy button */
.crypto-buy-now .crypto-buy-button {
    background: #ff7f00;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    margin-left: 1rem;
    transition: background 0.3s;
}

.crypto-buy-now .crypto-buy-button:hover {
    background: #e56f00;
}

/* Hamburger */
.crypto-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
}

.crypto-menu-toggle span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

/* Mobile styles */
@media (max-width: 750px) {
    .crypto-nav-links-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #111;
        flex-direction: column;
        align-items: flex-start;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        z-index: 3000; /* keep above ticker */
    }

    .crypto-nav-links-container.crypto-open {
        max-height: 500px; /* enough to show links */
    }

    .crypto-nav-links {
        flex-direction: column;
        width: 100%;
    }

    .crypto-nav-links li {
        width: 100%;
    }

    .crypto-nav-links a {
        width: 100%;
        padding: 1rem;
    }

    .crypto-menu-toggle {
        display: flex;
    }

    /* Submenu inside mobile */
    .crypto-nav-links li.crypto-has-submenu.crypto-open > .crypto-submenu {
        display: block;
        position: static;
        width: 100%;
        background: #222; /* dark grey for mobile submenu */
    }

    .crypto-submenu li a {
        padding-left: 2rem;
        border-top: 1px solid #333;
        color: #fff;
    }
}

.ticker-track {
    display: flex;
    animation: ticker-scroll 20s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}

.ticker-item .name {
    font-weight: 600;
    margin-right: 0.5rem;
}

.change.up {
    color: #00c853;
}

.change.down {
    color: #d50000;
}

/* Smooth scrolling animation */
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.bitnet-subtitle{
    max-width:760px;
    margin:35px auto 20px;

    font-size:22px;
    line-height:1.8;

    color:#d4d8df;
}

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

.bitnet-body{
    max-width:760px;
    margin:0 auto;

    color:#bfc8d5;
    font-size:18px;
    line-height:2;
}

.bitnet-body p{
    margin-bottom:18px;
}

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

@media (max-width:768px){

    .bitnet-title{
        font-size:29px;
        letter-spacing:2px;
        line-height:1.9rem;
    }

    .bitnet-title::after{
        width:100px;
    }

    .bitnet-subtitle{
        font-size:18px;
    }

    .bitnet-body{
        font-size:16px;
    }

    .bitnet-label{
        font-size:13px;
        padding:8px 18px;
    }

}


.site-name span {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    display: inline-block;
}


.buy-now {
    .buy-now {
    margin-left: auto;
}
}

.buy-button {
    display: inline-block;
    padding: 4px 10px;
    background-color: transparent;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 9px;
    transition: all 0.3s ease;
    border: 0.1px solid #fff;
    white-space: nowrap;
}


#hero-canvas,
#bitcoinCanvas {
    pointer-events: none;
    z-index: 0;
}

#moveableCanvas,
#marketChart {
    display: block;
    margin: 0 15px 0 auto;
}
.page-content{
    margin-top:105px;
    padding-top:30px;

    padding-left:20px;
    padding-right:20px;
    padding-bottom:0;

    width:100%;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.page-content > section,
.page-content > div {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 20px;
}


.hero-section {
    position: relative;
    background-color: #0d0d0d;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    z-index: 1000;

    max-width: 1200px;   /* keeps section centered */
    margin: 0 auto;      /* equal left/right margins */
    box-sizing: border-box;
}


.hero-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #a88245; 
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-title {
    width: 100%;
    max-width: 900px;    /* constrain width */
    margin: 0 auto 20px auto;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    text-shadow: 
      0 1px 0 #CCCCCC,
      0 2px 0 #c9c9c9,
      0 3px 0 #bbb,
      0 4px 0 #b9b9b9,
      0 5px 0 #aaa,
      0 6px 1px rgba(0,0,0,.1),
      0 0 5px rgba(0,0,0,.1),
      0 1px 3px rgba(0,0,0,.3);
}

h1.hero-title span {
    display: block;  
    margin-top: 8px; 
    color: #8e6128;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
    color: #878683;
}

.hero-body {
    font-size: clamp(0.9rem, 2vw, 1rem);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.auth-buttons {
    display: flex;
    justify-content: center;   /* center buttons */
    gap: 15px;
    margin-top: 30px;
}

.auth-button {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #0d1b2a;
    padding: 7px 16px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-align: center;
}

.auth-button:hover {
    background: linear-gradient(135deg, #0d1b2a, #1a1a1a);
    color: #ffc107;
    transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 750px) {
    .hero-section {
        padding: 60px 16px;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1;
        text-shadow: none;
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 90%;
    }

    .hero-title span {
        display: block;  
        margin-top: 8px; 
        color: #f7b733;
        text-shadow: 0 0 12px rgba(247, 183, 51, 0.8);
    }

    .hero-body {
        font-size: 0.95rem;
        max-width: 95%;
    }

    .auth-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 25px;
    }

    .auth-button {
        width: 100%;
    }
}@media (max-width: 1024px) {
    .hero-section {
        max-width: 95%;       /* shrink width for tablets */
        margin: 0 auto;       /* keep centered */
        padding: 70px 20px;
    }

    .hero-title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        max-width: 90%;
    }

    .hero-subtitle,
    .hero-body {
        max-width: 90%;
    }
}

/* Mobile adjustments */
@media (max-width: 750px) {
    .hero-section {
        max-width: 100%;      /* full width but centered */
        margin: 0 auto;
        padding: 60px 16px;
    }

    .hero-title {
        font-size: clamp(1rem, 6vw, 3rem);
        line-height: 1.1;
        text-shadow: none;
        max-width: 95%;
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 95%;
    }

    .hero-body {
        font-size: 0.95rem;
        max-width: 95%;
    }

    .auth-buttons {
        flex-direction: column;
        gap: 10px;
        margin-top: 25px;
        width: 50%;
        justify-content: center;
        margin-left: 60px;
    }

    .auth-button {
        width: 100%;
        text-align: center;
    }
}
#hero-canvas,
#bitcoinCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
     pointer-events: none;
}
.navbar {
    position: fixed;
    top: 0;
    z-index: 9999;
}

.auth-buttons a.auth-button {
    display: inline-block;
    margin: 0 15px;
    padding: 8px 20px;
    background-color: #8e6129;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease; 
    cursor: pointer !important;
}


.auth-buttons a.auth-button:hover {
    background-color: #d87f0a !important;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.site-name {
    margin-bottom: 20px;
    color: #fff;
   
}
.site-name .brand {
    text-decoration: none;
    color: #f7931a; 
    font-size: 1.8rem;
    font-weight: bold;
}

.site-name {
    font-size: 30px;            
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #f7931a, #ffcc00, #ff0066);
    background-clip: text;       
    -webkit-background-clip: text; 
    color: transparent;          
    -webkit-text-fill-color: transparent; 
    display: inline-block;
    margin-bottom: 25px;
    text-shadow: 0 0 20px rgba(247,147,26,0.8),
                 0 0 40px rgba(255,0,102,0.6),
                 0 0 60px rgba(255,204,0,0.5);
    animation: glowPulse 3s infinite alternate;
}

@keyframes glowPulse {
    from {
        text-shadow: 0 0 15px rgba(247,147,26,0.8),
                     0 0 30px rgba(255,0,102,0.6);
    }
    to {
        text-shadow: 0 0 25px rgba(255,204,0,0.9),
                     0 0 50px rgba(255,0,102,0.8),
                     0 0 70px rgba(247,147,26,1);
    }
}


@keyframes glowPulse {
    from {
        text-shadow: 0 0 15px rgba(247,147,26,0.8),
                     0 0 30px rgba(255,0,102,0.6);
    }
    to {
        text-shadow: 0 0 25px rgba(255,204,0,0.9),
                     0 0 50px rgba(255,0,102,0.8),
                     0 0 70px rgba(247,147,26,1);
    }
}

.register-body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1a1a1a, #333);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* align from top */
    padding-top: 80px;         /* push container down */
}


.register-container {
    background: rgba(34, 34, 34, 0.85);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    width: 380px;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.register-title {
    color: #fff;
    margin-bottom: 20px;
}

.register-form input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 6px;
    border: 1px solid #444;
    background: #333;
    color: #fff;
}

.register-button {
    width: 100%;
    padding: 12px;
    background: #f7931a;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.register-button:hover {
    background: #d87f0a;
}

.accessible-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    text-align: center;
}

.accessible-container {
    max-width: 700px;
    text-align: center;
}

.accessible-title-box {
    background: #000;
    border: 0.1px solid #33332f;
    border-radius: 8px;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 2px; 
}

.accessible-title {
    font-size: 13px;
    font-weight: 700;
    color: #d9b169;
    margin: 0;
}

.accessible-subtitle {
    width: 95%;
    margin: 0 auto;             
    font-size: 2.5rem;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: #6f6f6f;              
    line-height: 1.15; 
    color: #e0dfdc;
    text-transform: capitalize;
    letter-spacing: .1em;
    color: #92a5de;

text-shadow:
    3px 3px 0 #d89a2b,
    
    
    9px 9px 0 #9d6013,
    10px 10px 0 #935710,
    11px 11px 0 #894d0d,
    12px 12px 0 #7f440b,
    13px 13px 0 #753a09,
    14px 14px 0 #6b3107,
    15px 15px 0 #612806,
    16px 16px 0 #33332f,
    17px 17px 0 #4d1d04,
    18px 18px 0 #3b1603,
    19px 19px 0 #33332f,
    20px 20px 0 #241103,
    21px 21px 20px rgba(0,0,0,1),
    21px 21px 1px rgba(0,0,0,0.5);
}

.hero-section.investment-plans-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1420px;
    margin: 30px auto 0;
    padding: 40px 24px 20px;
    box-sizing: border-box;
}


.carousel-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 900px;
    min-height: 420px;
    padding: 50px 30px;
    margin: 0 auto 30px;
    background: rgba(18, 18, 18, 0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
}


.carousel-slide {
    display: none;
    width: 100%;
}
.carousel-slide.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.carousel-slide h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #fff;
}
.carousel-slide p {
    margin: 0;
    max-width: 680px;
    color: #c8c8c8;
    line-height: 1.7;
}

.carousel-prev, .carousel-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 2rem;
    font-weight: bold;
    color: #f7931a;
    transform: translateY(-50%);
    user-select: none;
}
.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }


.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #f7931a;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}


.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 50px auto 0;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}


.about-us-container {
    display: flex;
    gap: 40px;
    margin: 50px auto 0;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.about-market, .about-text {
    flex: 1;
    max-width: 520px;
}
.about-text h1 { font-size: 26px; }
.about-text p { font-size: 15px; }

.charts-section {
    margin: 40px 15px 20px auto;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    text-align: center;
}
.charts-section h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #FFD700;
}
.charts-section canvas {
    width: 100% !important;
    height: 300px !important;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .carousel-container {
        min-height: 300px;
        padding: 40px 20px;
    }
    .carousel-slide h1 { font-size: 1.3rem; }
    .carousel-slide p { font-size: 0.95rem; max-width: 90%; }
    .carousel-prev, .carousel-next { font-size: 1.5rem; }

    .about-us-container {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
        max-width: 100%;
        margin: 30px auto 0;
        align-items: center;
    }
    .about-market iframe {
        width: 100%;           
        height: 400px;
        display: block;
    }
    .about-text h1 { font-size: 22px; }
    .about-text p { font-size: 14px; }
}

@media (max-width: 480px) {
    .carousel-container {
        min-height: 300px;
        padding: 30px 15px;
        border-radius: 15px;
        margin: 0 auto 20px;
    }
    .carousel-slide h1 { font-size: 1.2rem; }
    .carousel-slide p { font-size: 0.85rem; line-height: 1.5; }
    .btn { padding: 8px 16px; font-size: 0.9rem; }
    .carousel-prev, .carousel-next { font-size: 1.2rem; }

    .cards-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .about-text h1 { font-size: 18px; }
    .about-text p { font-size: 13px; }
    .charts-section canvas { height: 250px !important; }
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 50px auto 0;
    flex-wrap: wrap;
    background: rgba(18, 18, 18, 0.35);
    border-radius: 15px;
    padding: 25px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}


.plan-card {
  background: rgba(23, 23, 23, 0.55);     
  color: #fff;
  padding: 30px 20px;
  border-radius: 10px;
  width: 280px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1.2;
}

.plan-card h1 { font-size: 20px; line-height: 1.2; }
.plan-card p { font-size: 14px; line-height: 1.4; color: #8b8987; }

.plan-card .card-icon {
    font-size: 70px;
    color: #f7931a;
    margin-bottom: 15px;
    display: block;
    animation: spin 4s linear infinite;
}

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


@media (max-width: 768px) {
    .cards-container {
        gap: 20px;
        margin-top: 30px;
        padding: 20px;
    }
    .plan-card {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding: 25px 18px;
    }
    .plan-card h1 { font-size: 18px; }
    .plan-card p { font-size: 13px; }
    .plan-card .card-icon { font-size: 60px; }
}


@media (max-width: 480px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 15px;
        margin: 30px auto 0;
    }
    .plan-card {
        width: 90%;
        padding: 20px 15px;
    }
    .plan-card h1 { font-size: 16px; }
    .plan-card p { font-size: 12px; }
    .plan-card .card-icon { font-size: 50px; }
}


.about-us-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 40px auto;
    
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
}


.about-market,
.about-text {
    flex: 1 1 40%;
    min-width: 240px;
    max-width: 100%;
    box-sizing: border-box;
}

.about-market iframe {
    width: 100%;
    max-width: 100%;
    display: block;
    border-radius: 10px;
}

.about-links {
    margin: 10px 0;
}

.about-links a {
    color: #f7931a;
    text-decoration: none;
    font-weight: bold;
    margin: 0 4px;
}

.about-text h1 {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
}


@media (max-width: 768px) {
    .about-us-container {
        flex-direction: column;  
        gap: 25px;
        margin: 30px auto;
       
    }
    .about-text h1 {
        font-size: 1.4rem;
    }
    .about-text p {
        font-size: 0.95rem;
    }
    .about-links a {
        font-size: 0.9rem;
    }
}


@media (max-width: 480px) {
    .about-us-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 20px auto;
        padding: 0 12px;
    }
    .about-market iframe {
        height: 250px;           
    }
    .about-text {
        text-align: center;       
    }
    .about-text h1 {
        font-size: 1.1rem;        
    }
    .about-text p {
        font-size: 0.80rem;
        line-height: 1.4;
    }
    .about-links a {
        font-size: 0.8rem;
        margin: 0 2px;
    }
    .btn {
        padding: 8px 14px;
        font-size: 0.80rem;
    }
}

.accessible-cards-section {
    width: 90%;
    margin: 0 auto;
}

.accessible-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.accessible-card {
  background: rgba(28, 29, 31, 0.4);       
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  flex: 1 1 250px;
  max-width: 250px;
  min-height: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);    
}

.side-card {
    display: flex;
    align-items: center;
    text-align: left;
}

.side-card .card-image {
    flex: 0 0 80px;
    margin-right: 15px;
}

.top-card .card-image {
    margin-bottom: 15px;
}

.card-image img {
    width: 80px;
    height: auto;
    transition: transform 0.4s ease-in-out;
}

.swing-hover img:hover {
    animation: swing 1s infinite alternate;
}

@keyframes swing {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

.token-sale-section {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.token-sale-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin: 60px auto;
    padding: 30px;
    width: 90%;
    max-width: 1200px;
    box-sizing: border-box;
}

.token-sale-left, .token-sale-right {
    flex: 1;
    background: transparent;
    border-radius: 8px;
    padding: 20px;
}

.token-sale-right {
    background: #000;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
   
}

.token-sale-highlight {
    background: #000;
    color: #ffd700;
    border: 0.1px solid #333331;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 20px;
    margin-bottom: 15px;
}

.token-sale-main {
    font-size: 2.5rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
    line-height: 50px;
}

.token-sale-subtitle {
    margin-bottom: 15px;
    color: #ccc;
}

.token-sale-button {
    display: inline-block;
    padding: 4px 8px;
    background: #f7931a;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.token-sale-heading {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 20px;
}

.token-sale-heading .grey-text {
    color: grey;
}

#countdown {
    background: #000;
    border: 0.1px solid #460303;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f7931a;
    font-weight: bold;
}

.time-block .value {
    font-size: 2rem;
}

.time-block .label {
    font-size: 0.9rem;
    color: #fff;
    margin-top: 4px;
}

.contribution {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #fff;
}

.targets {
    font-size: 1rem;
    color: #ccc;
}

@media (max-width: 992px) {
    .accessible-row {
        flex-direction: column;
        align-items: center;
    }
    
    .accessible-card {
        max-width: 100%;
        text-align: center;
    }

    .token-sale-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 20px;
        width: 100%;
        max-width: 560px;
        margin: 60px auto;
        box-sizing: border-box;
    }

    .token-sale-left,
    .token-sale-right {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .token-sale-heading {
        font-size: 1.4rem;
    }

    #countdown {
       margin: 0 auto;
    }

    .time-block {
        flex: 1 1 45%;
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .accessible-card {
        padding: 15px;
    }

    .accessible-card .card-text h2 {
        font-size: 1.2rem;
    }

    .accessible-card .card-text p {
        font-size: 0.9rem;
    }

    .token-sale-main {
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .token-sale-subtitle {
        font-size: 0.9rem;
    }

    .token-sale-button {
        display: inline-block;
        padding: 4px 8px;
        margin: 10px auto;
    }

    #countdown {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .time-block {
        width: 100%;
    }

    .time-block .value {
        font-size: 1.4rem;
    }

    .time-block .label {
        font-size: 0.8rem;
    }
}
.page-content > .swing-section {
    width: 100%;
    text-align: center;
    margin: 60px auto 40px;
    position: relative;
    margin-left: -20px;   /* shift section left */
}


.swing-section h4.highlight {
    background: #1c1d1f;
    color: #ffd700;
    border: 1px solid grey;
    font-size: 20px;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
}

.swing-section h1.main-title {
    font-size:2rem;
    line-height: 50px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    margin: 20px 0;
    text-transform: capitalize;
}

.swing-section h1.main-title .ash {
    color: #ccc;
}

.text-containers {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}
.left-side, .right-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
}

.text-box {
  width: 450px;
  height: 200px;
  color: #fff;
  background: rgba(28, 29, 31, 0.5);       
  border-radius: 12px;
  padding: 20px;
  text-align: center;

 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);    
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);     
}

.text-box h1 {
  font-size: 15px;                        
  margin-bottom: 10px;
  padding: 4px 8px;
  background-color: transparent;
  border: 0.2px solid #313234;
  border-radius: 20px;
  color: #fff;
}

.text-box p {
  font-size: 20px;                        
  line-height: 1.4;
  color: #d4862e;
}


@media (max-width: 768px) {
    .swing-section .text-containers {
        flex-direction: column; 
        gap: 20px;
    }

    .swing-section .left-side,
    .swing-section .right-side {
        width: 100%; 
    }

    .swing-section .text-box h1 {
        font-size: 1.2rem; 
    }

    .swing-section .text-box p {
        font-size: 1rem; 
    }
}


.page-content > .exchange-section {
  background: rgba(34, 35, 37, 0.6);
  padding: 60px 40px;  
  box-sizing: border-box;
  border-radius: 30px;
  margin: 40px auto 0;

 
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.exchange-section {
  background-color: #0d0d0d;
  padding: 60px 20px;
}

.exchange-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  padding: 0 40px;
  box-sizing: border-box;
  text-align: center;

  margin-left: calc(auto - 20px); /* shift left by 20px */
}
.exchange-container {
  margin: 0 auto;
  margin-left: -20px;   /* force shift left */
}

.exchange-main-image img {
  width: 100%; 
  max-width: 400px;
  display: block;
  margin: 0 auto;                /* center image */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.exchange-text {
  color: #fff;
  max-width: 500px;
  margin: 0 auto;                /* center text block */
}

.exchange-text h3 {
  font-size: 1.9rem;
  margin-bottom: 15px;
  color: #c6850d;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.exchange-text p {
  font-size: 1rem;
  line-height: 1.4;
  color: #e0e0e0;
}

.exchange-icons {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;       /* center icons */
  flex-wrap: wrap;
  margin-top: 20px;
}

.exchange-icons .icon-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exchange-icons .icon-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.exchange-icons .icon-box img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgb(68, 67, 67);
}

@media (max-width: 1024px) {
  .exchange-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    margin-left: -20px;   /* keep left shift */
  }
}

@media (max-width: 768px) {
  .exchange-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    margin-left: -20px;   /* enforce left shift */
  }
}


.investment-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: center;
}

.investment-title {
    font-size: 2.8rem;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-align: center;
    margin: 0 auto 12px;
    display: block;
}
.investment-title span { color: #785103; }

.investment-subtitle {
    color: grey;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
    max-width: 100%;
}
.investment-subtitle .line {
    width: 40px;
    height: 2px;
    background: #f69827;
}


.charts-professional {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.charts-professional .charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin: 40px auto 0;
    justify-items: center;
    align-items: start;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    margin-left: -10px;
}

.charts-professional .chart-card {
    background: rgba(23, 23, 23, 0.6);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.charts-professional .chart-card:nth-child(3) {
    margin-left: -20px;
}

.chart-card h2 {
    color: #FFD700;
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.chart-card canvas {
    width: 100% !important;
    height: 280px !important;
    display: block;
    margin: 0 auto;
}


@media (max-width: 768px) {
    .investment-section {
        padding: 0 16px;
    }
    .investment-title { font-size: 2.2rem; }
    .investment-subtitle { font-size: 0.95rem; }
    .charts-professional {
        padding: 0 16px;
    }
    .charts-professional .charts-grid {
        grid-template-columns: 1fr; 
        gap: 25px;
    }
    .charts-professional .chart-card {
        max-width: 100%;
    }
    .chart-card h2 { font-size: 1.2rem; }
    .chart-card canvas { height: 240px !important; }
}


@media (max-width: 480px) {
    .investment-section {
        padding: 0 12px;
    }
    .investment-title { font-size: 1.6rem; }
    .investment-subtitle { font-size: 0.85rem; }
    .charts-professional {
        padding: 0 12px;
    }
    .charts-professional .charts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px auto 0;
    }
    .charts-professional .chart-card {
        padding: 15px;
        border-radius: 10px;
        width: 100%;
        max-width: 100%;
    }
    .chart-card h2 { font-size: 1rem; }
    .chart-card canvas { height: 200px !important; }
}


.investment-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  justify-items: center;
  justify-content: center;
  margin: 40px auto;
  width: 100%;
  max-width: 1100px;
  padding: 0 20px;
  box-sizing: border-box;
}

.investment-card {
  width: 100%;
  max-width: 400px;
  height: auto;
  background: rgba(28, 29, 31, 0.5);  
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);        
  -webkit-backdrop-filter: blur(12px);
}
/* Tablet adjustments */
@media (max-width: 1024px) {
  .investment-cards {
    grid-template-columns: repeat(2, 1fr); /* still two per row */
    gap: 20px;
    max-width: 95%;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .investment-cards {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 100%;
    margin: 30px auto;
    padding: 0;
  }

  .investment-card {
    max-width: 90%;
  }
}
.card-top {
  background: rgba(119, 83, 6, 0.6);  
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #363738;
  backdrop-filter: blur(8px);         
  -webkit-backdrop-filter: blur(8px); 
}

.card-top h1{
    font-size: 1.2rem;  
    margin: 5px 0;
    color: #fff;  
}
.separator.black {
   
    height: 2px;
    background: #000;
    margin: 5px 0;
}

.separator.yellow {
    width: 100%;
    height: 2px;
    background: #a18902;
    margin: 5px 0;
}

.duration {
    color: #fff;
    margin: 5px 0;
    font-size: 1rem;
}

.grey {
    color: grey;
    margin: 10px 0;
    font-size: 0.7rem;
}

.headers {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0;
}

.header-left, .header-right {
    text-align: center;
    flex: 1;
}

.header-left h2, .header-right h2 {
    font-size: 0.9rem;
    color: #fff;
    margin: 2px 0;
}

.signup-button {
    margin-top: auto;
    background: #282222;
    color: #98881c;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    width: 50%;
    font-size: 1rem;
    border: 1px solid rgb(125, 121, 121);
}

@media (max-width: 768px) {
    .investment-title a {
        font-size: 2rem; 
    }

    .investment-card {
        width: 45%;   
        height: auto; 
    }

    .card-top h1 {
        font-size: 1rem; 
    }
    .signup-button {
        padding: 4px 8px;   
        font-size: 0.9rem;   
    }
}

@media (max-width: 480px) {
    .investment-title a {
        font-size: 1.6rem;
    }

    .investment-cards {
        flex-direction: column; 
        align-items: center;
    }

    .investment-card {
        width: 90%;   
        height: auto;
    }

    .card-top h1 {
        font-size: 0.9rem;
    }

    .signup-button {
        width: auto;
        display: inline-block;
        padding: 8px 14px;
        font-size: 0.9rem;
        margin-top: 12px;
    }
}
.page-content > section.bitcoin-section {
    margin: 0 auto 60px;
    padding-top: 50px;
    text-align: center;
}

.bitcoin-title {
    font-size: 2.2rem;
    margin: 0 0 8px;
    text-align: center;
    width: 100%;
}

.bitcoin-title .dark-yellow {
    color: #bc851b;
}

.bitcoin-title .white {
    color: #808080;
}

.bitcoin-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.calculator-container {
    flex: 1;
    max-width: 700px;
    min-height: 200px;
    background: #1c1d1f;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.canvas-container {
    flex: 1;
    max-width: 400px;
    min-height: 300px;
    background: #1c1d1f;
    padding: 20px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.calculator-container h1 {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

.calculator-container h1 span {
    display: inline-block;
}

.calculator-container p.subtitle {
    margin: 8px 0 20px;
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
    color: #ccc;
}

#btcCalcCanvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 8px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 15px;
    margin-top: 20px;
}

#btcAmount {
    flex: 1;
    max-width: 250px;
}

.equals {
    font-weight: bold;
    color: #fff;
}

.result-box {
    min-width: 150px;
    text-align: center;
    background: #2a2a2a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
}

#currencySelect {
    min-width: 100px;
    padding: 6px;
    border-radius: 6px;
}

.btc-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #2a2a2a;
    border: 1px solid white;
}

.btc-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


@media (max-width: 768px) {
    .bitcoin-title {
        font-size: 1.8rem;
    }
    .calculator-container p.subtitle {
        font-size: 1rem;
    }
    .btc-box {
        width: 80px;
        height: 80px;
    }
    .bitcoin-flex {
        gap: 20px;
    }
}


@media (max-width: 480px) {
    .bitcoin-title {
        font-size: 1.5rem;
    }
    .calculator-container p.subtitle {
        font-size: 0.9rem;
    }
    .btc-box {
        width: 70px;
        height: 70px;
    }
    .bitcoin-flex {
        flex-direction: column;  
        align-items: center;
    }
    .calculator-container {
        order: 1;               
        width: 100%;
    }
    .canvas-container {
        order: 2;                 
        width: 100%;
        max-width: 100%;
        border-radius: 20px;     
        min-height: 200px;
        background: none;
    }
    .calc-row {
        flex-direction: column;
        gap: 10px;
    }
    #btcAmount,
    .result-box,
    #currencySelect {
        max-width: 100%;
        width: 100%;
    }
}
.market-ticker {
  width: 100%;
  height: 88px;              /* expanded height for better alignment */
  display: flex;
  flex-direction: row;        /* horizontal layout */
  justify-content: flex-start;
  align-items: center;
  background: #111828;        /* new darker blue background */
  border: 1px solid white;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  box-sizing: border-box;
  position: fixed;
  top: 0;                     /* start at very top of page */
  left: 0;
  z-index: 5000;              /* above page content */
  overflow: hidden;
}

.ticker-track {
  display: flex;
  flex-direction: row;        /* force row layout */
  width: 100%;
  white-space: nowrap;        /* allow horizontal scrolling */
  transition: transform 1s linear;
  will-change: transform;
}
.ticker-item {
  flex: none;
  display: flex;
  flex-direction: row;        /* side by side on desktop */
  align-items: center;
  padding: 6px 12px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

.ticker-item:hover {
  transform: scale(1.05);
  background: rgba(255,255,255,0.05);
}

/* Item parts */
.ticker-item .name {
  font-weight: 600;
  font-size: 1rem;
  color: #ffd700;
  margin-right: 8px;
}

.ticker-item .value {
  font-size: 0.9rem;
  color: #ccc;
  margin-right: 8px;
}

.ticker-item .change {
  font-size: 0.85rem;
  font-weight: 500;
}

.ticker-item .up {
  color: #4caf50;
}

.ticker-item .down {
  color: #f44336;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .market-ticker {
    height: 90px;             /* expanded height to meet navbar */
    background: #044e9b;      /* keep background visible */
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    justify-content: flex-start;
    position: fixed;
    top: 0;                   /* flush at very top of page */
    left: 0;
    z-index: 5000;            /* above page content */
  }

  .ticker-track {
    display: flex;
    white-space: nowrap;
  }

  .ticker-item {
    flex: none;
    font-size: 0.85rem;
    padding: 4px 8px;
    flex-direction: column;   /* stack on mobile */
  }

  .ticker-item .name {
    font-size: 0.9rem;
    margin-bottom: 4px;
    margin-right: 0;
  }

  .ticker-item .value {
    font-size: 0.85rem;
    margin-right: 0;
  }

  .ticker-item .change {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .market-ticker {
    height: 65px;             /* slightly taller for small screens */
    background: #000;      /* consistent background */
    top: 0;                   /* ensure no gap */
  }

  .ticker-item {
    font-size: 0.8rem;
    padding: 3px 6px;
  }
}

.features-section {
  background: #000;
  padding: 40px 20px;
}
.feature-card h3,
.guideline-card h2 {
  font-size: 1.4rem; 
  color: #fff;
  margin-bottom: 8px;
}


.features-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;   
  margin: 0 auto;      
  width: 100%;
  box-sizing: border-box;
}

#NewBitcoinCanvas {
  width: 350px;
  height: 620px;
}

.features-grid {
  flex: 1;
  max-width: 720px;
  height: 600px;
  background: rgba(255,255,255,0.05);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

.feature-card {
  width: 30%;
  margin-bottom: 20px;
  text-align: center;
}

.feature-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.feature-card h3 {
  color: #fff;
  margin-bottom: 8px;
}

.feature-card p {
  color: #aaa;
  font-size: 0.9rem;
}
.feature-card p {
  color: #aaa;
  font-size: 0.9rem;
}


.guideline-card h2 {
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 12px;
}



.worldclass-features .features-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;      
  padding: 0 20px;
}


.worldclass-features .guideline-card {
  background: rgba(18,18,18,0.7);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
}


.worldclass-features .feature-image {
  width: 120px;          
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;   
  display: block;
}

.features-heading .features-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-align: center;
}
.features-heading .features-tagline {
  font-size: 1.2rem;
  color: #888;
  text-align: center;
}

.features-title {
  font-size: 2.5rem; 
  margin-bottom: 10px;
}

.features-tagline {
  font-size: 1.2rem;
  color: #888;
}

@media (max-width: 992px) {
  .worldclass-features .features-container {
    grid-template-columns: repeat(2, 1fr); 
  }
  .features-heading .features-title {
    font-size: 2rem;
  }
  .features-heading .features-tagline {
    font-size: 1.1rem;
  }
}


@media (max-width: 576px) {
  .worldclass-features .features-container {
    grid-template-columns: 1fr;
    justify-items: center;      
  }
  .worldclass-features .feature-image {
    width: 100px;
    height: 100px;
  }
  .features-heading .features-title {
    font-size: 1.6rem !important;
    text-align: center !important;
  }
  .features-heading .features-tagline {
    font-size: 1rem !important;
    text-align: center !important;
  }
}


@media (max-width: 480px) {
  .features-section {
    padding: 10px 12px 40px;
    margin-top: 0;
  }
  .features-heading .features-title {
    font-size: 1.4rem !important;
  }
  .features-heading .features-tagline {
    font-size: 0.9rem !important;
  }
}

.instrument-detail {
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 20px;
  max-width: 700px;
  margin: 20px auto;
  color: #eee;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.instrument-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 15px;
}

.instrument-name {
  font-size: 1.8rem;
  font-weight: 600;
  color: #ffd700; 
}

.instrument-symbol {
  font-size: 1rem;
  color: #aaa;
  background: rgba(255,255,255,0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.instrument-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.instrument-value span {
  font-weight: 600;
  color: #fff;
}

.instrument-change.up {
  color: #4caf50; 
}

.instrument-change.down {
  color: #f44336; 
}

.instrument-extra {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
  margin-bottom: 15px;
}

.instrument-extra p {
  font-size: 0.9rem;
  color: #ccc;
}

.instrument-extra span {
  font-weight: 600;
  color: #fff;
}

.instrument-description {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ccc;
}

.market-overview {
    margin-top: 40px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.market-overview h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #222;
    font-weight: 600;
}

.filters {
    margin-bottom: 15px;
}

.filters button {
    background: #eee;
    border: 1px solid #ccc;
    padding: 6px 14px;
    margin-right: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.filters button:hover {
    background: #ddd;
}

.table-wrapper {
    overflow-x: auto; 
}

.market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 1000px; 
}

.market-table th {
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: 500;
}

.market-table td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.market-table tr:nth-child(even) {
    background: #f2f2f2;
}


.market-table td.up {
    color: #0a8f08;
    font-weight: bold;
}

.market-table td.down {
    color: #d93025;
    font-weight: bold;
}


.market-table td.rating-buy {
    color: #0a8f08;
    font-weight: bold;
}

.market-table td.rating-sell {
    color: #d93025;
    font-weight: bold;
}

.market-table td.rating-neutral {
    color: #555;
    font-weight: bold;
}

.market-table td.rating-strongbuy {
    background: #0a8f08;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    padding: 4px 8px;
}

.market-table td.rating-strongsell {
    background: #d93025;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    padding: 4px 8px;
}

.market-container {
    display: flex;
}

.sidebar {
    width: 200px;
    border-right: 1px solid #ccc;
    padding-right: 10px;
}

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

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.sidebar a:hover {
    background: #eee;
}

.content-area {
    flex: 1;
    padding-left: 20px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.ticker-track {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 30s linear infinite;
}

.ticker-item {
    display: inline-block;
    margin-right: 40px;
    font-size: 0.9rem;
    color: #fff;
    text-decoration: none;
}

.ticker-item .up {
    color: #0a8f08;
    font-weight: bold;
}

.ticker-item .down {
    color: #d93025;
    font-weight: bold;
}

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

.site-footer {
  width: 100%;                
  background: rgba(28, 29, 31, 0.6);
  color: #fff;
  padding: 40px 20px;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;  
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);

  
}

.footer-container {
  display: flex;
  flex-wrap: wrap;         
  justify-content: space-between;
  gap: 25px;
  position: relative;      
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px 20px 60px;   
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-row {
  flex: 1 1 200px;        
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-row h3 {
  color: #ff6600;            
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: underline;
}

.footer-row ul {
  list-style: none;
  padding: 0;
}

.footer-row ul li {
  margin-bottom: 6px;
}

.footer-row ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-row ul li a:hover {
  color: #ff6600;
}

.footer-separator {
  border-top: 2px solid rgba(255,255,255,0.2);
  margin: 10px 0;
}

.payment-icons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.payment-icons img {
  width: 30px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.footer-bottom {
  position: absolute;       
  bottom: 15px;            
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  color: #aaa;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 10px;
}


@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;  
        align-items: center;
    }

    .footer-row {
        align-items: center;
        text-align: center;
    }

    .payment-icons {
        justify-content: center; 
        flex-wrap: wrap;
    }

    .footer-row h3 {
        font-size: 14px;         
    }
}

#scrollTopBtn,
#scrollBottomBtn {
    position: fixed;
    left: 24px;   /* place buttons on the left side */
    z-index: 9000;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #ff6600;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#scrollTopBtn {
    bottom: 92px;
}

#scrollTopBtn:hover,
#scrollBottomBtn:hover {
    background-color: #e65c00;
    transform: translateY(-2px);
}

#scrollBottomBtn {
    bottom: 24px;
}

.faq-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 30px; 
    box-sizing: border-box;
}

.faq-heading h1 {
    text-align: center;
    color: #ff6600;
    font-family: "Poppins", sans-serif;
    margin-bottom: 10px;
}

.faq-heading h1 span {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
}

.faq-heading p {
    text-align: center;
    color: #ccc;
    margin-bottom: 35px;
    font-family: "Poppins", sans-serif;
}

.faq-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.faq-card {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 10px);

    padding: 22px;
    border-radius: 12px;
    box-sizing: border-box;

    background: rgba(34, 34, 34, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #fff;

    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.faq-card:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 102, 0, 0.4);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);
}

.faq-card h2 {
    color: #ff6600;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-family: "Poppins", sans-serif;
}

.faq-item {
    margin-bottom: 18px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item h3 {
    font-size: 15px;
    color: #fff;
    margin-bottom: 6px;
    font-family: "Poppins", sans-serif;
}

.faq-item p {
    color: #ccc;
    line-height: 1.7;
    font-family: "Poppins", sans-serif;
}

.faq-item a {
    color: #ff6600;
    text-decoration: none;
}

.faq-item a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {

    .faq-section {
        padding: 30px 15px 30px;
    }

    .faq-heading h1 span {
        font-size: 2rem;
    }

    .faq-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 120px;  
    }

    .faq-card {
        width: 100%;
        max-width: 500px;
        flex: none;
        margin: 0;
        text-align: center;
    }

    .faq-card h2,
    .faq-item h3,
    .faq-item p {
        text-align: center;
    }
}
.heading {
    font-size: 2.5rem;
    text-align: center;
    margin: 140px 0 20px;
    padding-top: 80px;
    color: #e0dfdc;
    width: 100%;
    letter-spacing: .1em;
    text-shadow:
        0 -1px 0 #fff,
        0 1px 0 #2e2e2e,
        0 2px 0 #2c2c2c,
        0 3px 0 #2a2a2a,
        0 4px 0 #282828,
        0 5px 0 #262626,
        0 6px 0 #242424,
        0 7px 0 #222,
        0 8px 0 #202020,
        0 9px 0 #1e1e1e,
        0 10px 0 #1c1c1c,
        0 11px 0 #1a1a1a,
        0 12px 0 #181818,
        0 13px 0 #161616,
        0 14px 0 #141414,
        0 15px 0 #121212,
        0 22px 30px rgba(0,0,0,.9);
}

.heading .white {
    color: #fff;
}

.heading .orange {
    color: darkorange;
}

.guidelines-intro {
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 0 20px 20px;
    text-align: center;

    font-size: 18px;
    line-height: 1.3;

    font-family: "Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;

    border-bottom: 2px solid rgb(78,66,0);

    text-shadow:
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25);

    box-sizing: border-box;
}

.guidelines-container {
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 30px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 20px;
}

.guideline-card {
    width: 100%;
    max-width: 360px;

    padding: 45px 22px; 

    border-radius: 12px;

    background: rgba(34,34,34,.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

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

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.guideline-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,140,0,.45);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.guideline-card h3 {
    margin: 0 0 18px;
    color: #fff;
    text-align: center;
    font-family: "Poppins",sans-serif;
}

.guideline-card p {
    color: #c8c8c8;
    line-height: 1.8;
    text-align: center;
    font-family: "Poppins",sans-serif;
}

@media (max-width:1024px) {

    .guidelines-container {
        grid-template-columns: repeat(2,1fr);
        max-width: 760px;
    }

    .guideline-card {
        max-width: 100%;
    }
}

@media (max-width:768px) {

    .heading {
        font-size: 1.8rem;
        margin-top: 300px;
        margin-bottom: 10px;
        padding-top: 60px;
        line-height: 1.15;
    }

    .guidelines-intro {
        
        max-width: 420px;
        margin: 0 auto 35px;
        padding: 0 15px 20px;
        font-size: 15px;
        line-height: 1.3;
        text-align: center;
        box-sizing: border-box;

    }

    .guidelines-container {
        grid-template-columns: 1fr;
        max-width: 500px;
        padding: 0 12px 30px;
        gap: 70px;
    }

    .guideline-card {
        width: calc(100% - 8px);
        margin-left: -8px;
        padding: 40px 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .guideline-card h3,
    .guideline-card p {
        text-align: center;
    }
}
.contact-section {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 20px 30px;
    box-sizing: border-box;
}

.contact-heading h1 {
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.contact-heading p {
    text-align: center;
    color: #ccc;
    margin-bottom: 30px;
}

.contact-map {
    display: flex;
    justify-content: center;
    margin: 0 auto 40px;
    
}

.contact-map iframe {
    width: 100%;
    max-width: 1380px;
    height: 1000px;
    border: 0;
    border-radius: 12px;
    display: block;
}

.contact-container {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(340px, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    align-items: stretch;
    box-sizing: border-box;
}

.guideline-card {
    background: rgba(34, 34, 34, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    box-sizing: border-box;
    width: 100%;
}

.contact-form form {
    width: 100%;
}

.contact-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 8px;
    color: #fff;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #444;
    background: rgba(255,255,255,.08);
    color: #fff;
    box-sizing: border-box;
}

.contact-form select {
    color: #000;
    background: #fff;
}

.form-row-wide {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}

.form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.form-buttons .btn-submit,
.form-buttons .btn-signup {
    flex: 1;
    text-align: center;
}

.btn-submit {
    background: #ff6600;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.btn-signup {
    background: transparent;
    color: #ff6600;
    padding: 12px;
    border: 1px solid #ff6600;
    border-radius: 8px;
    text-decoration: none;
}

.contact-info.guideline-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(34, 34, 34, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.contact-info .gold-heading {
    color: gold;
    margin-bottom: 10px;
    text-align: center;
}


.contact-heading h1 {
    font-size: 2.8rem;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #f7931a, #ffd700);
    background-clip: text;              
    -webkit-background-clip: text;      
    color: transparent;                  
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 8px rgba(247, 147, 26, 0.6),
                 0 0 12px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
    font-weight: 700;
}


.contact-heading p {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1rem;
    color: #c8c8c8;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6),
                 0 0 6px rgba(247,147,26,0.4);
    line-height: 1.3;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.info-item i {
    font-size: 50px;
    color: gold;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .contact-section {
        padding: 30px 15px;
    }

    .contact-map iframe {
        width: 100%;
        height: 300px;
    }

    .contact-container {
        grid-template-columns: 1fr;
        max-width: 560px;
        width: calc(100% - 20px);
        margin: 0 auto;
        position: relative;
        left: 10px;
        gap: 100px;
    }

    .guideline-card {
        width: 100%;
        padding: 25px;
    }

    .contact-info.guideline-card {
        background: rgba(34, 34, 34, 0.65);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    .contact-form .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .form-buttons {
        flex-direction: column;
    }

    .info-item {
        justify-content: center;
        text-align: left;
    }
    .info-item i {
    font-size: 20px;
    color: gold;
    flex-shrink: 0;
    }
}

footer {
    margin-top: 0 !important; 
}

.bitcoin-heading h1 {
    text-align: center;
    color: #fff;
    font-size: 2.8rem;
    margin-bottom: 10px;
     margin-top: 30px;
}

.bitcoin-tagline {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, gold, #ff6600);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
    letter-spacing: 1px;
    animation: fadeInUp 1.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bitcoin-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 80px; 
}

.guideline-card {
    background: rgba(34, 34, 34, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    color: #fff;
    flex: 1 1 calc(33.333% - 20px); 
    min-width: 300px;
    box-sizing: border-box;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.guideline-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 165, 0, 0.5);
}

.guideline-card h2 {
    color: gold;
    margin-bottom: 15px;
}

.guideline-card p, 
.guideline-card ul {
    color: #ddd;
    line-height: 1.6;
}

.guideline-card ul {
    list-style: disc;
    padding-left: 20px;
}

@media (max-width: 1024px) {
    .guideline-card {
        flex: 1 1 calc(50% - 20px); 
    }
}

@media (max-width: 768px) {
    .bitcoin-heading h1 {
        font-size: 2.2rem;
    }

    .bitcoin-tagline {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }

    .bitcoin-container {
        row-gap: 50px;
    }

    .guideline-card {
        flex: 1 1 100%; 
        min-width: unset;
    }
}

.buy-bitcoin-section {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
   
}

.buy-bitcoin-heading {
    text-align: center;
    margin-bottom: 40px;
}

.buy-bitcoin-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, gold, #ff6600);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    margin-bottom: 15px;
    position: relative;
    animation: fadeInDown 1.5s ease;
}

.buy-bitcoin-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    background: gold;
    margin: 10px auto 0;
    border-radius: 2px;
    box-shadow: 0 0 15px gold;
    animation: glowPulse 2s infinite;
}

.buy-bitcoin-tagline {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
    letter-spacing: 1px;
    animation: fadeInUp 1.5s ease;
}

.buy-bitcoin-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 60px;
    justify-content: center;
}

.guideline-card {
    background: rgba(34, 34, 34, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    color: #fff;
    flex: 1 1 calc(33.333% - 20px); 
    min-width: 300px;
    box-sizing: border-box;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.guideline-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 165, 0, 0.5);
}

.guideline-card h2 {
    color: gold;
    margin-bottom: 15px;
}

.guideline-card p, 
.guideline-card ul {
    color: #ddd;
    line-height: 1.6;
}

.guideline-card ul {
    list-style: disc;
    padding-left: 20px;
}


@media (max-width: 1024px) {
    .guideline-card {
        flex: 1 1 calc(50% - 20px); 
    }
}

@media (max-width: 768px) {
    .buy-bitcoin-title {
        font-size: 2.2rem;
    }
    .buy-bitcoin-tagline {
        font-size: 1.2rem;
    }
    .guideline-card {
        flex: 1 1 100%; 
        min-width: unset;
    }
}


.about-section, .features-section {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-bottom: 50px; 
}

.about-heading, .features-heading {
    text-align: center;
    margin-bottom: 40px;
}

.about-title, .features-title {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(90deg, gold, #ff6600);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    margin-bottom: 15px;
    animation: fadeInDown 1.5s ease;
}

.about-tagline, .features-tagline {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
    letter-spacing: 1px;
    animation: fadeInUp 1.5s ease;
}

.about-container, .features-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 60px;
    justify-content: center;
}

.guideline-card {
    background: rgba(34, 34, 34, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    color: #fff;
    flex: 1 1 calc(33.333% - 20px);
    min-width: 300px;
    box-sizing: border-box;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.guideline-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 165, 0, 0.5);
}

.guideline-card h2 {
    color: gold;
    margin-bottom: 15px;
    text-align: center;
}

.guideline-card p, 
.guideline-card ul {
    color: #ddd;
    line-height: 1.6;
}

.guideline-card ul {
    list-style: disc;
    padding-left: 20px;
}

.read-more-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: gold;
    color: #000;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.read-more-btn:hover {
    background: #ff6600;
    color: #fff;
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .guideline-card {
        flex: 1 1 calc(50% - 20px); 
    }
}

@media (max-width: 768px) {
    .about-title, .features-title {
        font-size: 2.2rem;
    }
    .about-tagline, .features-tagline {
        font-size: 1.2rem;
    }
    .guideline-card {
        flex: 1 1 100%; 
        min-width: unset;
    }
}

.features-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.overview-card {
    flex: 1 1 45%;   
    min-width: 300px;
}

.right-cards {
    flex: 1 1 50%; 
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
}

@media (max-width: 1024px) {
    .overview-card, .right-cards {
        flex: 1 1 100%;
    }
    .right-cards {
        grid-template-columns: 1fr; 
    }
}
#marketChart {
    width: 100% !important;
    max-width: 1000px;
    height: 400px !important;
    margin: 0 auto;
}
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.chart-card {
    background: rgba(34, 34, 34, 0.9);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
}

.chart-card canvas {
    width: 100% !important;
    height: 300px !important; 
}

.chart-card h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #FFD700;
}

#moveableCanvas {
    display: block;
    margin: 0 8px 0 auto;
    max-width: 100%;
    height: auto;
}

.charts-section {
    margin-top: 40px;
    text-align: center;           
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background: rgba(18, 18, 18, 0.4); 
    border-radius: 15px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.charts-section h2 {
    margin-bottom: 20px;
    color: #FFD700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
}

.charts-section canvas {
    width: 100% !important;
    max-width: 600px;
    height: 300px !important;
    margin: 0 auto;
    display: block;
}


@media (max-width: 768px) {
    #moveableCanvas {
        max-width: 90%;
    }
    .charts-section {
        padding: 15px;
    }
    .charts-section canvas {
        height: 260px !important;
    }
    .charts-section h2 {
        font-size: 1.4rem;
    }
}


@media (max-width: 480px) {
    #moveableCanvas {
        max-width: 85%;
        margin: 0 6px 0 auto;
    }
    .charts-section {
        padding: 10px;
        border-radius: 12px;
        margin-left: -30px;      
    }
    .charts-section canvas {
        height: 220px !important;
    }
    .charts-section h2 {
        font-size: 1.2rem;
    }
}

section {
  margin: 60px auto;
  padding: 40px 20px;
  max-width: 1000px;
  text-align: center;
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

section h1 {
  font-size: 2rem;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(247,147,26,0.6);
  margin-bottom: 20px;
}

section p {
  color: #c8c8c8;
  font-size: 1rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #f7931a;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}
.btn:hover {
  background: #ffd700;
  color: #000;
}

.security-grid, .testimonial-grid, .team-grid, .community-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.security-card, .testimonial-card{
  background: rgba(23,23,23,0.6);
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.testimonials {
  max-width: 1100px;
  margin: 60px auto;      
  padding: 40px 20px;
  text-align: center;
  width: 95%;              
  box-sizing: border-box;   
}

.testimonials h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.testimonial-intro {
  color: #cfcfcf;
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.testimonial-grid {
  display: flex;
  justify-content: center; 
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 auto;           
}

.testimonial-card {
  background: rgba(23,23,23,0.6);
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  max-width: 300px;         
  margin: 0 auto;           
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  text-align: left;
}


@media (max-width: 768px) {
  .testimonials {
    margin: 40px auto;
    width: 100%;             
    padding: 20px 15px;      
  }

  .testimonial-grid {
    flex-direction: column;  
    align-items: center;    
  }

  .testimonial-card {
    width: 90%;              
    margin: 0 auto;
    text-align: center;     
  }

  .testimonials h1 {
    font-size: 1.8rem;
  }

  .testimonial-intro {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .testimonials h1 {
    font-size: 1.6rem;
  }

  .testimonial-intro {
    font-size: 0.9rem;
  }

  .testimonial-card {
    width: 95%;
    padding: 15px;
  }
}


/* Core Values images */
.value-card img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

/* Team Member images */
.team-card img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 15px;
}
.global-presence img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 15px;
}
.team {
  max-width: 1200px;
  margin: 80px auto;
  padding: 40px 24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.team-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  margin: 30px auto 0;
  width: 100%;
  max-width: 1100px;
}

.team-card {
  flex: 1 1 240px;
  max-width: 300px;
  margin: 0 auto;
}

.team-card p {
  font-size: 0.95rem;
  font-weight: 600;
  background: linear-gradient(90deg, #b8b8b8, #ffffff, #8c8c8c);
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 6px rgba(180,180,180,0.6), 0 0 12px rgba(120,120,120,0.4);
  letter-spacing: 0.6px;
  margin-top: 8px;
  display: inline-block;
}

@media (max-width: 768px) {
  section h1 { font-size: 1.6rem; }
  section p { font-size: 0.9rem; }
  .btn { padding: 10px 20px; font-size: 0.9rem; }

  .team {
    padding: 20px 15px;
    margin: 40px auto;
  }

  .team-grid {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .team-card {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  section { padding: 20px 10px; }
  section h1 { font-size: 1.4rem; }
  section p { font-size: 0.85rem; }
  .btn { padding: 8px 16px; font-size: 0.85rem; }
}
.resources-section {
  margin: 70px auto;          
  padding: 50px 30px;
  max-width: 1100px;
  text-align: center;
  width: 95%;                 
  box-sizing: border-box;    
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  scroll-margin-top: 100px;  
}

.resources-title {
  font-size: 2.6rem;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 10px rgba(247,147,26,0.6);
  margin-bottom: 15px;
}

.resources-subtitle {
  font-size: 1.2rem;
  color: #e0e0e0;
  margin-bottom: 40px;
  line-height: 1.6;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.5);
}

.resources-block {
  background: rgba(23,23,23,0.6);
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  max-width: 900px;
  margin-left: auto;         
  margin-right: auto;
}

.resources-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(247,147,26,0.6);
}

.resources-block h2 {
  color: #FFD700;
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.resources-list {
  list-style: none;
  padding: 0;
}

.resources-list li {
  margin-bottom: 10px;
}

.resources-list a {
  display: inline-block;
  padding: 10px 15px;
  background: rgba(40,40,40,0.7);
  border-radius: 8px;
  color: #00c6ff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.resources-list a:hover {
  background: linear-gradient(90deg, #f7931a, #ffd700);
  color: #fff;
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(247,147,26,0.6);
}

.resources-block p {
  color: #cfcfcf;
  margin-bottom: 15px;
  line-height: 1.5;
}

.resources-block .btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
  margin: 0 auto;            
}

.resources-block .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,215,0,0.7);
}


@media (max-width: 768px) {
  .resources-section {
    margin: 100px auto 40px auto; 
    width: 100%;            
    padding: 20px 15px;  
  }

  .resources-title {
    font-size: 2rem;
    margin-top: 30px;         
  }

  .resources-subtitle { font-size: 1rem; }
  .resources-block h2 { font-size: 1.4rem; }

  .resources-block {
    width: 90%;               
    text-align: center;       
  }

  .resources-block .btn {
    width: auto;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .resources-section {
    padding: 20px 10px;
    margin: 100px auto 40px auto;
  }

  .resources-title {
    font-size: 1.6rem;
    margin-top: 30px;        
  }

  .resources-subtitle { font-size: 0.9rem; }
  .resources-block h2 { font-size: 1.2rem; }

  .resources-block {
    width: 95%;
    padding: 15px;
  }

  .resources-block .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}


.mission-guarantees {
  max-width: 1200px;
  margin: 80px auto;
  padding: 40px 24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: -10px;
}

.mission-guarantees > h1,
.mission-guarantees > p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mission-guarantees > p {
  font-size: 1rem;
  margin-left: -10px;
}

.mission-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  margin: 30px auto 0;
  width: 100%;
  max-width: 1100px;
}

.mission-card {
  background: rgba(23,23,23,0.6);
  padding: 20px;
  border-radius: 10px;
  flex: 1 1 250px;
  max-width: 320px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-card img {
  height: 60px;
  margin-bottom: 15px;
}

.mission-card h2 {
  color: #FFD700;
  margin-bottom: 10px;
}

.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(247,147,26,0.6);
}


@media (max-width: 768px) {
  .mission-guarantees {
    margin: 40px auto;
    width: 100%;
    padding: 20px 15px;
  }

  .mission-grid {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .mission-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
}

.trust-security {
  max-width: 1100px;
  margin: 80px auto;        
  padding: 40px 20px;
  text-align: center;
  width: 95%;
  box-sizing: border-box;
}
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 30px 0;
  
}

.trust-badges img {
  height: 100px; 
  filter: drop-shadow(0 0 6px rgba(247,147,26,0.6));
  transition: transform 0.3s ease;
  border-radius: 50%;
}

.trust-badges img:hover {
  transform: scale(1.1);
}




@media (max-width: 768px) {
  .trust-security {
    padding: 20px 15px;
     margin: 40px auto; 
      width: 95%; 
  }

  .trust-security h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-align: center;
  }

  .trust-security p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .security-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .security-card {
    padding: 15px;
    text-align: left;
  }

  .security-card h2 {
    font-size: 1.2rem;
    text-align: center;
  }

  .security-card p {
    font-size: 0.9rem;
  }

  .trust-badges {
    flex-direction: column; 
    align-items: center;
    gap: 15px;
  }

  .trust-badges img {
    height: 50px;
  }

  .trust-disclaimer {
    font-size: 0.85rem;
    margin-top: 15px;
  }
}

@media (max-width: 480px) {
  .trust-security h1 {
    font-size: 1.6rem;
  }

  .security-card h2 {
    font-size: 1.1rem;
  }

  .security-card p {
    font-size: 0.85rem;
  }

  .trust-badges img {
    height: 45px;
  }
}


.education {
  margin: 60px auto;         
  padding: 50px 30px;
  max-width: 900px;
  text-align: center;
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  width: 95%;                
  box-sizing: border-box;    
}

.education h1 {
  font-size: 2.4rem;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 10px rgba(247,147,26,0.6);
  margin-bottom: 20px;
}

.education p {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 30px;
  line-height: 1.6;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.5);
}

.education .btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
  margin: 0 auto;  
}           

.education .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,215,0,0.7);
}


@media (max-width: 768px) {
  .education {
    margin: 40px auto;       
    width: 100%;             
    padding: 20px 15px;       
  }

  .education h1 {
    font-size: 1.8rem;
  }

  .education p {
    font-size: 1rem;
  }

  .education .btn {
    width: auto;              
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .education h1 {
    font-size: 1.6rem;
  }

  .education p {
    font-size: 0.9rem;
  }

  .education .btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
}

.live-data {
  margin: 60px auto;         
  padding: 40px 20px;
  max-width: 1000px;
  text-align: center;
  width: 95%;                
  box-sizing: border-box;   
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.live-data h1 {
  font-size: 2.2rem;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(247,147,26,0.6);
  margin-bottom: 20px;
}


.live-data iframe {
  display: block;
  margin: 0 auto;             
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


@media (max-width: 768px) {
  .live-data {
    margin: 40px auto;        
    width: 100%;              
    padding: 20px 15px;       
  }

  .live-data h1 {
    font-size: 1.8rem;
  }

  .live-data iframe {
    width: 90%;              
    height: 300px;
  }
}

@media (max-width: 480px) {
  .live-data h1 {
    font-size: 1.6rem;
  }

  .live-data iframe {
    width: 95%;               
    height: 250px;
  }
}

.faq-link {
  margin: 60px auto;          
  padding: 40px 20px;
  max-width: 800px;
  text-align: center;
  width: 95%;                
  box-sizing: border-box;     
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.faq-link h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(247,147,26,0.6);
}

.faq-link p {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 30px;
  line-height: 1.6;
}

.faq-link .btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
  margin: 0 auto;            
}

.faq-link .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,215,0,0.7);
}


@media (max-width: 768px) {
  .faq-link {
    margin: 40px auto;       
    width: 100%;              
    padding: 20px 15px;     
  }

  .faq-link h1 {
    font-size: 1.8rem;
  }

  .faq-link p {
    font-size: 1rem;
  }

  .faq-link .btn {
    width: auto;              
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .faq-link h1 {
    font-size: 1.6rem;
  }

  .faq-link p {
    font-size: 0.9rem;
  }

  .faq-link .btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
}

.cta {
  margin: 60px auto;          
  padding: 40px 20px;
  max-width: 800px;
  text-align: center;
  width: 95%;                
  box-sizing: border-box;     
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.cta h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(247,147,26,0.6);
}

.cta .btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
  margin: 0 auto;            
}

.cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,215,0,0.7);
}


@media (max-width: 768px) {
  .cta {
    margin: 40px auto;       
    width: 100%;              
    padding: 20px 15px;      
  }

  .cta h1 {
    font-size: 1.8rem;
  }

  .cta .btn {
    width: auto;              
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .cta h1 {
    font-size: 1.6rem;
  }

  .cta .btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
}

.disclaimer {
  margin: 60px auto;          
  padding: 20px;
  max-width: 900px;
  text-align: center;
  width: 95%;                
  box-sizing: border-box;    
  background: rgba(18,18,18,0.4);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.disclaimer p {
  font-size: 1rem;
  color: #e0e0e0;
  line-height: 1.6;
  margin: 0 auto;            
  max-width: 700px;          
}


@media (max-width: 768px) {
  .disclaimer {
    margin: 40px auto;        
    width: 100%;              
    padding: 15px;            
  }

  .disclaimer p {
    font-size: 0.9rem;
    max-width: 95%;          
  }
}

@media (max-width: 480px) {
  .disclaimer p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}

.community {
  margin: 60px auto;          
  padding: 40px 20px;
  max-width: 900px;
  text-align: center;
  width: 95%;                 
  box-sizing: border-box;    
  background: rgba(18,18,18,0.4);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.community h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 8px rgba(247,147,26,0.6);
}

.community p {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 30px;
  line-height: 1.6;
}

.community-links {
  display: flex;
  justify-content: center;    
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 auto;             
}

.community-links a {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
}

.community-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255,215,0,0.7);
}


@media (max-width: 768px) {
  .community {
    margin: 40px auto;        
    width: 100%;              
    padding: 20px 15px;       
  }

  .community h1 {
    font-size: 1.8rem;
  }

  .community p {
    font-size: 1rem;
  }

  .community-links {
    flex-direction: column;   
    align-items: center;      
    gap: 15px;
  }

  .community-links a {
    width: 90%;              
    text-align: center;
  }
}

@media (max-width: 480px) {
  .community h1 {
    font-size: 1.6rem;
  }

  .community p {
    font-size: 0.9rem;
  }

  .community-links a {
    padding: 2px 4px;
    font-size: 0.9rem;
    width: 95%;
  }
}


.deposit-link {
  font-weight: 600;
  color: #00c6ff;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.deposit-link:hover {
  color: #ffd700;
  transform: translateX(5px);
}

.deposit-instructions {
  font-size: 0.9rem;
  color: #cfcfcf;
  margin-top: 8px;
  line-height: 1.5;
  background: rgba(30,30,30,0.6);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.guide {
  margin: 120px auto 70px auto;
  padding: 40px 30px;
  max-width: 900px;
  text-align: left;
  background: rgba(18,18,18,0.5);
  border-radius: 12px;
  backdrop-filter: blur(10px);   
  -webkit-backdrop-filter: blur(10px); 
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  scroll-margin-top: 120px;  
}

.guide h1 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #ffd700;
  text-align: center;
  margin-top: 30px;           
}

.guide p {
  text-align: center;
  font-size: 1rem;
  color: #e0e0e0;
  line-height: 1.6;
  max-width: 600px;           
  margin: 0 auto 20px auto;  
}

.guide ol {
  font-size: 1rem;
  color: #e0e0e0;
  line-height: 1.6;
  list-style: disc;
  margin-left: 20px;
}


@media (max-width: 768px) {
  .guide {
    margin: 100px auto 40px auto; 
    width: 95%;
    padding: 20px 15px;
    text-align: center;
  }

  .guide h1 {
    font-size: 1.8rem;
    margin-top: 30px;        
  }

  .guide p {
    font-size: 0.95rem;       
    max-width: 90%;          
    line-height: 1.4;
  }

  .guide ol {
    font-size: 0.95rem;
    margin-left: 0;          
    text-align: left;
  }
}

@media (max-width: 480px) {
  .guide {
    padding: 15px 10px;
    margin: 100px auto 40px auto; 
  }

  .guide h1 {
    font-size: 1.6rem;
    margin-top: 30px;         
  }

  .guide p {
    font-size: 0.9rem;        
    max-width: 95%;           
    line-height: 1.4;
  }

  .guide ol {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}


.analysis-page {
  max-width: 1000px;
  margin: 120px auto 40px auto; 
  padding: 40px;
  width: 95%;                  
  box-sizing: border-box;       
  background: rgba(18,18,18,0.5);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  text-align: left;
  scroll-margin-top: 120px;     
}

.analysis-page h1 {
  font-size: 2.4rem;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 10px rgba(247,147,26,0.6);
  margin-bottom: 20px;
  margin-top: 30px;             
  text-align: center;
}

.analysis-page > p {
  font-size: 1.1rem;
  color: #e0e0e0;
  line-height: 1.6;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 30px auto;     
}

.analysis-block {
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(23,23,23,0.6);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 900px;
  margin-left: auto;           
  margin-right: auto;
}

.analysis-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(247,147,26,0.6);
}

.analysis-block h2 {
  color: #ffd700;
  margin-bottom: 10px;
  text-align: center;
}

.analysis-block p {
  color: #e0e0e0;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: center;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.analysis-block .btn {
  display: inline-block;
  padding: 10px 20px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
  margin: 0 auto;
}

.analysis-block .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255,215,0,0.7);
}

@media (max-width: 768px) {
  .analysis-page {
    margin: 100px auto 40px auto; 
    width: 95%;
    padding: 20px 15px;
    text-align: center;
  }

  .analysis-page h1 {
    font-size: 2rem;
    margin-top: 30px;
  }

  .analysis-page > p {
    font-size: 1rem;
    max-width: 90%;
    line-height: 1.4;
  }

  .analysis-block {
    text-align: center;
    padding: 15px;
  }

  .analysis-block h2 {
    font-size: 1.4rem;
  }

  .analysis-block p {
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 90%;
  }

  .analysis-block .btn {
    width: auto;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .analysis-page {
    padding: 15px 10px;
    margin: 100px auto 40px auto;
  }

  .analysis-page h1 {
    font-size: 1.6rem;
    margin-top: 30px;
  }

  .analysis-page > p {
    font-size: 0.9rem;
    max-width: 95%;
    line-height: 1.4;
  }

  .analysis-block h2 {
    font-size: 1.2rem;
  }

  .analysis-block p {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 95%;
  }

  .analysis-block .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    margin: 0 auto;
  }
}


.glossary-title {
  font-size: 2.4rem;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 10px rgba(247,147,26,0.6);
  margin-bottom: 20px;
  text-align: center;
}

.glossary-subtitle {
  font-size: 1.2rem;
  color: #cfcfcf;
  margin-bottom: 40px;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1000px;         
  margin: 0 auto;            
}

.glossary-item {
  background: rgba(23,23,23,0.6);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glossary-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(247,147,26,0.6);
}

.glossary-item h2 {
  color: #ffd700;
  margin-bottom: 10px;
}

.glossary-item p {
  color: #e0e0e0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.glossary-cta {
  margin-top: 40px;
  text-align: center;
}

.glossary-cta p {
  color: #cfcfcf;
  margin-bottom: 20px;
}

.glossary-cta .btn {
  display: inline-block;
  padding: 10px 20px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f7931a, #ffd700);
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(247,147,26,0.6);
  transition: all 0.3s ease;
}

.glossary-cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255,215,0,0.7);
}


@media (max-width: 768px) {
  .glossary-title {
    font-size: 2rem;
    margin-top: 30px;
  }

  .glossary-subtitle {
    font-size: 1rem;
    max-width: 90%;
    line-height: 1.4;
  }

  .glossary-list {
    width: 95%;              
    margin: 0 auto;
  }

  .glossary-item h2 {
    text-align: center;      
    font-size: 1.2rem;
  }

  .glossary-item p {
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;      
    max-width: 90%;
    margin: 0 auto;
  }

  .glossary-cta p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .glossary-title {
    font-size: 1.6rem;
    margin-top: 30px;
  }

  .glossary-subtitle {
    font-size: 0.85rem;
    max-width: 95%;
    line-height: 1.4;
  }

  .glossary-list {
    width: 95%;               
    margin: 0 auto;
  }

  .glossary-item h2 {
    text-align: center;
    font-size: 1.1rem;
  }

  .glossary-item p {
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    max-width: 95%;
    margin: 0 auto;
  }

  .glossary-cta p {
    font-size: 0.85rem;
  }
}

.investment-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 60px auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
  box-sizing: border-box;
}

.investment-canvas canvas {
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 
              0 0 50px rgba(255, 215, 0, 0.6);
  background: rgba(18,18,18,0.7);
}

@media (max-width: 768px) {
  .investment-canvas {
    flex-direction: column;
    gap: 20px;
    max-width: 420px;
    padding: 0 16px;
  }
}


#investEthCanvas {
  box-shadow: 0 0 25px rgba(192,192,192,0.8), 
              0 0 50px rgba(192,192,192,0.6);
}


#investUsdtCanvas {
  box-shadow: 0 0 25px rgba(173,216,230,0.9), 
              0 0 50px rgba(173,216,230,0.7);
}

.faq-section {
  margin: 40px auto;
  max-width: 1000px;
  text-align: center;
}

.faq-intro {
  color: #eee;
  font-size: 1rem;
  margin-bottom: 25px;
}

.faq-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.faq-card {
  flex: 0 0 calc(50% - 20px);  
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.faq-card h3 {
  color: #ffc107;
  margin-bottom: 10px;
}

.faq-card p {
  color: #eee;
  font-size: 0.95rem;
  line-height: 1.6;
}


@media (max-width: 768px) {
  .faq-card {
    flex: 0 0 100%;  
  }
}

.terms-section {
  margin: 40px auto;
  max-width: 1000px;
  text-align: center;
}

.terms-intro {
  color: #eee;
  font-size: 1rem;
  margin-bottom: 25px;
}

.terms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.terms-card {
  flex: 0 0 calc(33% - 20px);
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.terms-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.terms-card h3 {
  color: #ffc107;
  margin-bottom: 10px;
}

.terms-card p {
  color: #eee;
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .terms-card {
    flex: 0 0 100%;
  }
}

.luxury-section{

    position:relative;
    overflow:hidden;
    padding:120px 20px;

    background:
    radial-gradient(circle at top left,#3d2c00 0%,transparent 35%),
    radial-gradient(circle at bottom right,#2a2200 0%,transparent 35%),
    linear-gradient(180deg,#040404,#090909,#050505);

}

.luxury-section::before,
.luxury-section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.15;

    animation:floatGlow 10s ease-in-out infinite;

}

.luxury-section::before{

    background:#7a5a00;

    top:-150px;

    left:-120px;

}

.luxury-section::after{

    background:#5b4700;

    bottom:-160px;

    right:-120px;

    animation-delay:5s;

}

.luxury-container{

    max-width:1100px;

    margin:auto;

    text-align:center;

    padding:80px 70px;

    border-radius:35px;

    background:
    linear-gradient(
    rgba(255,255,255,.05),
    rgba(255,255,255,.02));

    backdrop-filter:blur(28px);

    border:1px solid rgba(212,175,55,.12);

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.08),

    0 30px 80px rgba(0,0,0,.65),

    0 0 60px rgba(212,175,55,.08);

}
.luxury-title-box{

    margin-bottom:35px;

}

.luxury-title{

    display:inline-block;

    padding:12px 36px;

    font-size:16px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#f3d684;

    border-radius:60px;

    background:

    linear-gradient(
    rgba(255,255,255,.07),
    rgba(255,255,255,.03));

    border:1px solid rgba(212,175,55,.18);

    backdrop-filter:blur(18px);

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.08),

    0 0 15px rgba(212,175,55,.10);

}
.luxury-subheading{

    font-size:19px;

    line-height:1.3;

    font-weight:800;

    text-transform:uppercase;

    max-width:900px;

    margin:0 auto 35px;

    letter-spacing:1px;

    background:

    linear-gradient(

    180deg,

    #f2d16b 0%,

    #caa12c 35%,

    #8f6b13 70%,

    #6a4d08 100%

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:

    0 0 3px rgba(165,124,18,.30),

    0 0 10px rgba(165,124,18,.20),

    0 0 25px rgba(165,124,18,.12);

    animation:goldPulse 3s ease-in-out infinite alternate;

}


/* GOLD LINE */

.luxury-subheading::after{

    content:"";

    display:block;

    width:180px;

    height:4px;

    margin:28px auto 0;

    border-radius:20px;

    background:

    linear-gradient(

    90deg,

    transparent,

    #b78916,

    #e5c04c,

    #b78916,

    transparent

    );

    box-shadow:

    0 0 12px rgba(183,137,22,.45);

}

.luxury-description{

    max-width:900px;

    margin:auto;

}

.luxury-description p{

    font-size:18px;

    color:#d4d4d4;

    line-height:2;

    font-weight:400;

    text-align:center;

}

@keyframes goldPulse{

    from{

        filter:drop-shadow(0 0 6px rgba(183,137,22,.20));

    }

    to{

        filter:drop-shadow(0 0 18px rgba(183,137,22,.45));

    }

}

@keyframes floatGlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

}
@media (max-width:768px){

    .luxury-container{
        padding:45px 25px;
        transform:translateX(-20px);
    }

    .luxury-subheading{
        font-size:14px;
        line-height:1.6;
    }

    .luxury-description p{
        font-size:16px;
        line-height:1.8;
    }

}

section {
  padding: 60px 20px;
}

/* Headings & text */
h1, h2, h3, h4 {
  font-weight: 600;
  margin-bottom: 20px;
  color: #111;
}

p {
  margin-bottom: 15px;
  color: #555;
}

/* ---------------------------
   HERO SECTION
   --------------------------- */
.custom-hero {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.custom-title {
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.3;
}

.custom-title span {
  display: block;
  font-size: 1.2em;
  color: #ffd700;
}

.custom-subtitle {
  font-size: 1.1rem;
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.custom-action-buttons {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.custom-auth-btn {
  flex: 0 0 auto;
  padding: 12px 24px;
  background: #ffd700;
  color: #111;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.custom-auth-btn:hover {
  background: #e6c200;
}
/* CARDS */
.custom-cards .custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.custom-card {
  flex: 1 1 280px; /* more stable than calc */
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* ---------------------------
   LUXURY SECTION
   --------------------------- */
.custom-luxury {
  background: #fff;
  text-align: center;
}

.custom-luxury-title {
  font-size: 1.8rem;
  color: #203a43;
}

.custom-luxury-subheading {
  font-size: 1.2rem;
  margin: 20px auto;
  max-width: 800px;
  color: #444;
}

.custom-luxury-description {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1rem;
  color: #555;
}
.custom-card-image img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 6px;
}
.custom-card-text h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.custom-card-text p {
  font-size: 0.95rem;
  color: #666;
}
@media (max-width: 1024px) {
  .custom-title { font-size: 2rem; }
  .custom-card { flex: 1 1 45%; }
}

@media (max-width: 768px) {
  .custom-title { font-size: 1.8rem; }
  .custom-card { flex: 1 1 100%; }
}
.custom-token-sale {
  background: #f4f4f4;
  padding: 60px 20px;
}

.custom-token-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-token-left,
.custom-token-right {
  flex: 1 1 500px;
  min-width: 280px;
}

.custom-token-left {
  text-align: left;
}

.custom-token-right {
  text-align: center;
}

.custom-token-highlight {
  font-size: 1.5rem;
  color: #203a43;
}
.custom-token-main {
  font-size: 2.2rem;
  margin: 10px 0;
  color: #111;
}

#custom-countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.custom-token-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}

.custom-token-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #203a43;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.custom-token-btn:hover {
  background: #2c5364;
}
.custom-time-block {
  flex: 1 1 100px;
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.custom-value {
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
}

.custom-label {
  font-size: 0.9rem;
  color: #666;
}
.custom-swing {
  background: #fff;
  text-align: center;
  padding: 60px 20px;
}

.custom-main-title {
  font-size: 2rem;
  margin: 20px 0;

}

.custom-highlight {
  font-size: 1rem;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.custom-main-title {
  font-size: 2rem;
  margin: 20px 0;
}

.custom-ash {
  color: #999;
}

.custom-text-containers {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
  justify-content: center;
}
.custom-left-side,
.custom-right-side {
  flex: 1 1 400px;
  min-width: 280px;
}
.custom-text-box {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  text-align: left;
}
.custom-text-box h1 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.custom-exchange {
  background: #f4f4f4;
  padding: 60px 20px;
}

.custom-exchange-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.custom-exchange-main-image,
.custom-exchange-text {
  flex: 1 1 400px;
  min-width: 280px;
}

.custom-exchange-main-image img {
  max-width: 100%;
  border-radius: 8px;
}
.custom-exchange-icons {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.custom-icon-box {
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Investment section adjustment */
.custom-investment {
  background: #fff;
  text-align: center;
  padding: 60px 20px;
  margin-left: 20px;   /* ✅ pushes the whole section 20px to the right */
}


.custom-investment-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-investment-title {
  font-size: 2rem;
  margin-bottom: 20px;
}

.custom-investment-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 40px;
}

.custom-line {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: #ffd700;
  margin: 0 10px;
}

.custom-investment-card {
  flex: 1 1 280px;
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-investment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.custom-card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.custom-separator {
  height: 2px;
  margin: 10px 0;
}

.custom-separator.black {
  background: #111;
}

.custom-separator.yellow {
  background: #ffd700;
}

.custom-duration,
.custom-grey {
  font-size: 1rem;
  margin: 10px 0;
}
@media (max-width: 1024px) {
  .custom-token-container,
  .custom-exchange-container {
    flex-direction: column;
    text-align: center;
  }
  .custom-highlight h4{
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.2rem;
  }

  .custom-token-left,
  .custom-token-right,
  .custom-exchange-main-image,
  .custom-exchange-text {
    flex: 1 1 100%;
  }

  .custom-main-title { font-size: 1.8rem; }
}

.custom-headers {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.custom-amount {
  font-weight: bold;
  color: #203a43;
}

.custom-signup-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #203a43;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.custom-signup-btn:hover {
  background: #2c5364;
}
.custom-bitcoin {
  background: #f4f4f4;
  padding: 60px 20px;
}

.custom-bitcoin-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

.custom-calculator-container,
.custom-canvas-container {
  flex: 1 1 500px;
  min-width: 280px;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.custom-bitcoin-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-align: center;
}

.custom-calc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.custom-dark-yellow {
  color: #ffd700;
}

.custom-white {
  color: #111;
}

.custom-calc-row input,
.custom-calc-row select {
  flex: 1 1 120px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.custom-btc-box img {
  width: 40px;
  height: 40px;
}

.custom-equals {
  font-size: 1.5rem;
  font-weight: bold;
}

.custom-result-box {
  flex: 1 1 120px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

@media (max-width: 768px) {
  .custom-token-main { font-size: 1.8rem; }
  .custom-investment-card { flex: 1 1 100%; }
  .custom-text-box h1 { font-size: 1rem; }
}
.custom-features {
  background: #fff;
  padding: 60px 20px;
}

.custom-features-container {
  max-width: 1200px;
  margin: 0 auto;
}
.custom-features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.custom-feature-card {
  flex: 1 1 280px;
  max-width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.custom-feature-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 6px;
}

.custom-feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.custom-feature-card p {
  font-size: 0.95rem;
  color: #666;
}
@media (max-width: 1024px) {
  .custom-bitcoin-flex {
    flex-direction: column;
    align-items: center;
  }

  .custom-calculator-container,
  .custom-canvas-container {
    flex: 1 1 100%;
    max-width: 700px;
  }

  .custom-feature-card {
    flex: 1 1 45%;
  }
}

@media (max-width: 768px) {
  .custom-bitcoin-title { font-size: 1.5rem; }
  .custom-feature-card { flex: 1 1 100%; }
}
.navbar {
  background: #203a43;
  color: #fff;
  padding: 15px 20px;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buy-button {
  background: #ffd700;
  color: #111;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

/* Hamburger menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.cryptonav-shell{
    position:relative;
    max-width:1350px;
    min-height:90px;
    margin:auto;
    padding:0 25px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ==========================
   LOGO
========================== */

.cryptonav-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.cryptonav-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
}
.cryptonav-logo-img{
    display:block;
    height:115px;
    width:auto;
}
.cryptonav-menu{
    display:flex;
    align-items:center;
    gap:28px;
    position:relative;
    z-index:3100;
}

.cryptonav-list{
    display:flex;
    align-items:center;
    gap:24px;

    margin:0;
    padding:0;

    list-style:none;
}

.cryptonav-item{
    position:relative;
}

.cryptonav {
  position: fixed;
  top: 88px;                /* default: same as desktop ticker height */
  left: 0;
  width: 100%;
  z-index: 3200;           /* above page content and canvas */
  background: #111827;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: visible;
}

.cryptonav-item--active>.cryptonav-link{
    color:#00d4ff;
}
.cryptonav-link{

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

    padding:26px 0;

    color:#fff;
    text-decoration:none;

    font-size:16px;      /* increased */
    font-weight:600;

    transition:.3s;

}
.cryptonav-link:hover,
.cryptonav-link--active{

    color:#00d4ff;

}

/* ==========================
   DROPDOWN ARROW
========================== */

.cryptonav-item--dropdown>.cryptonav-link::after{

    content:"\f078";

    font-family:"Font Awesome 6 Free";
    font-weight:900;

    font-size:11px;

    transition:.30s;

}
@media (max-width: 768px) {
  .cryptonav {
    top: 90px;              /* match mobile ticker height */
  }
}

@media (max-width: 480px) {
  .cryptonav {
    top: 65px;              /* match small-screen ticker height */
  }
}

/* Desktop arrow animation */

@media (min-width:993px){

    .cryptonav-item--dropdown:hover>.cryptonav-link::after{

        transform:rotate(180deg);

    }

}

/* ==========================
   DESKTOP SUBMENU
========================== */

.cryptonav-submenu{

    display:none;

    position:absolute;

    top:100%;
    left:0;

    width:240px;

    margin:0;
    padding:10px 0;

    list-style:none;

    background:#181818;

    border-radius:10px;

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

    z-index:999;

}

/* Desktop hover */

@media (min-width:993px){

    .cryptonav-item:hover>.cryptonav-submenu{

        display:block;

        animation:submenuFade .25s ease;

    }

}

.cryptonav-subitem{
    width:100%;
}

.cryptonav-sublink{

    display:block;

    width:100%;

    padding:12px 20px;

    color:#fff;

    text-decoration:none;

    transition:.30s;

}

.cryptonav-sublink:hover,
.cryptonav-sublink--active{

    background:#222;

    color:#00d4ff;

}

/* ==========================
   BUY BUTTON
========================== */

.cryptonav-buy{

    display:flex;
    align-items:center;

}
.cryptonav-buy-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:3px 6px;

    font-size:12px;
    font-weight:700;

    border-radius:6px;

    background:#00d4ff;
    color:#000;

    text-decoration:none;

    transition:.3s;

}

.cryptonav-buy-btn:hover{

    background:#00b7dc;

}
/* =====================================================
   CRYPTONAV - PART 2 (Mobile)
===================================================== */

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

.cryptonav-mobile{
    display:none;
}

/* Hide Font Awesome icons on desktop */

.cryptonav-open-icon,
.cryptonav-close-icon{
    display:none;
}

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

@media (max-width: 992px) {

    .cryptonav-shell {
        height: auto;
        min-height: 90px;
    }

    .cryptonav-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1400;
        margin-left: auto;
    }

    .cryptonav-hamburger {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 10px;
        cursor: pointer;
        padding: 0;
        color: #fff;
        box-shadow: 0 6px 14px rgba(0,0,0,.24);
        position: relative;
        z-index: 1500;
    }

    .cryptonav-open-icon,
    .cryptonav-close-icon {
        color: #fff;
        font-size: 28px;
        transition: .25s ease;
    }

    .cryptonav-open-icon {
        display: block;
    }

    .cryptonav-close-icon {
        display: none;
    }

    .cryptonav-hamburger.active .cryptonav-open-icon {
        display: none;
    }

    .cryptonav-hamburger.active .cryptonav-close-icon {
        display: block;
    }


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

    .cryptonav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        background: #111827;

        flex-direction: column;
        align-items: flex-start;
        gap: 18px;

        padding: 20px;

        box-sizing: border-box;

        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 18px 35px rgba(0,0,0,.35);

        z-index: 3300;

        /*
         * Important:
         * Allow the whole menu to scroll if there
         * are many menu/submenu items.
         */
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        overflow-x: hidden;

        animation: fadeMenu .25s ease;
    }

    .cryptonav-menu.active {
        display: flex;
    }


    /* ==========================
       MAIN MENU
    ========================== */

    .cryptonav-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cryptonav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .cryptonav-link {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 16px 0;

        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.4);
    }


    /* ==========================
       SUBMENU
    ========================== */

    .cryptonav-submenu {
        display: none;

        position: static;

        width: 100%;

        margin: 0;
        padding: 10px 0 10px 18px;

        background: #1a2233;

        box-shadow: none;
        border-radius: 0;

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

        /*
         * Make absolutely sure the submenu
         * itself isn't clipped.
         */
        max-height: none;
        height: auto;
        overflow: visible;

        box-sizing: border-box;
    }

    .cryptonav-item.submenu-open > .cryptonav-submenu {
        display: block;
        animation: submenuFade .25s ease;
    }

    .cryptonav-subitem {
        width: 100%;
        display: block;
    }

    .cryptonav-sublink {
        display: block;
        width: 100%;

        padding: 10px 0;

        color: #fff;
        background: transparent;
    }


    /* ==========================
       SUBMENU ARROW
    ========================== */

    .cryptonav-item.submenu-open > .cryptonav-link::after {
        transform: rotate(180deg);
    }


    /* ==========================
       BUY BUTTON
    ========================== */

    .cryptonav-buy {
        width: 100%;
    }

    .cryptonav-buy-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@keyframes fadeMenu{

    from{

        opacity:0;
        transform:translateY(-10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes submenuFade{

    from{

        opacity:0;
        transform:translateY(-6px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
/* Specific override for login page */
.bitnet-login-body {
    background: linear-gradient(135deg, #1a1a1a, #333);
    min-height: 100vh;
    display: flex;
    justify-content: center;   /* horizontal centering */
    align-items: center;       /* vertical centering */
    margin: 0;
    padding: 0;
}


.bitnet-login-container {
    background: rgba(34, 34, 34, 0.6); 
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    width: 350px;
    text-align: center;
    backdrop-filter: blur(10px);       
    -webkit-backdrop-filter: blur(10px);
    margin: auto;              /* ensures centering */
}

.bitnet-login-title {
    color: #fff;
    margin-bottom: 20px;
}

.bitnet-login-form input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 6px;
    border: 1px solid #444;
    background: #333;
    color: #fff;
}

.bitnet-login-logo {
    text-align: center;
    margin-bottom: 20px;
}

.bitnet-login-logo img {
    width: 100px;
    height: auto;
    display: inline-block;
}

.bitnet-login-button {
    width: 100%;
    padding: 12px;
    background: #f7931a;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.bitnet-login-button:hover {
    background: #d87f0a;
}

.bitnet-auth-switch {
    color: #ccc;
    margin-top: 15px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bitnet-login-container {
        width: 90%;
        padding: 20px;

    }

    .bitnet-login-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }

    .bitnet-login-form input {
        padding: 10px;
        font-size: 0.95rem;
    }

    .bitnet-login-button {
        padding: 10px;
        font-size: 0.95rem;
    }

    .bitnet-auth-switch {
        font-size: 0.9rem;
    }
}