/* FULL UPDATED style.css */

/* Custom Fonts and Variables (Conceptual) */
:root {
    --primary-color: #270202;
    --secondary-color: #12a372; 
    --text-light: #fff;
    --bg-dark: #270202; /* Dark background */
    --link-blue: #4a90e2;
    --green-up: #12a372;
    --red-down: #ff1a20;
}

body {
    background-color: #270202;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

a {color:#f59e0b; text-decoration:none;}

.forgot-link {
	
}

.signup-title {
	text-transform:uppercase;
	font-weight:700;
	font-size:48px;
}

.signup-title b {
	color:#ec9e15;
}

.navbar-brand img {
	max-width:100%;
}	

.bb-card-inner h5 {
	background: linear-gradient(to right, #413f3e 0%, #27a07b 49%, #413f3e 100%);
    color: white;
    padding: 15px;
    border-radius:6px;
    text-transform:uppercase;
    font-weight:700;
}

/* ------------------------------------- */
/* 1. Header Styling */
/* ------------------------------------- */
header {
    background: transparent;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar-nav {
    gap: 10px;
}

.nav-link {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
    transition: opacity 0.3s;
    font-size:14px;
}

.nav-link:hover {
    opacity: 1;
    color: var(--secondary-color) !important;
}

.nav-menu {

    border-radius: 36px;
}

.btn-login {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5f0191+0,c6105d+100 */
	background: linear-gradient(to right, #5f0191 0%,#c6105d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #ffffff;
    border: 0px;
    padding: 8px 20px;
    border-radius: 25px;
    transition: all 0.3s;
}

.btn-login:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6f0db4+2,d9176c+100 */
	background: linear-gradient(to right, #6f0db4 2%,#d9176c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #ffffff;
}

.btn-signup {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#540b0b+0,a42c2c+50,400a0a+100 */
	background: linear-gradient(to right, #540b0b 0%,#a42c2c 50%,#400a0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: var(--text-light);
    padding: 8px 20px;
    border-radius: 25px;
    transition: background-color 0.3s;
    text-transform:uppercase;
    border:2px solid #b8892e;
    font-weight: 700;
    opacity: 0.8;
    transition: opacity 0.3s;
    font-size: 14px;
}

.btn-signup:hover {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#540b0b+0,c03232+50,400a0a+100 */
background: linear-gradient(to right, #540b0b 0%,#c03232 50%,#400a0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color:white;
	border:2px solid #b8892e;
}

/* ------------------------------------- */
/* 2. Hero Section Styling */
/* ------------------------------------- */
.main-banner {
    padding-bottom: 2rem !important;
    overflow: hidden;
    background: url(images/background.jpg) no-repeat center top;
    background-size: cover;
}

.subpage-banner {
	background: linear-gradient(to bottom, #5f0b0b 1%, #240303 99%);
    padding: 0px 0px;
    border-top: 2px solid #bd1c1c;
    border-bottom: 2px solid #bd1c1c;
     padding-bottom: 0rem !important;
}

.banner-title {
    font-size: 4.5rem;
    color: white;
    line-height: 1.1;
    margin-bottom: 1rem;
    font-weight: 700;

}

.btn-main {
	background:#ff1a20;
	padding:12px 36px;
	border-radius:36px;
	font-size:24px;
	font-weight:700;
	color:white;
}

.banner-subtitle {
    font-size: 24px;
    opacity: 1;
    margin-bottom: 1rem;
    font-weight: 400;
}



/* Hero Chart Container Styling */
.hero-chart-container {
    position: relative;
}

.hero-chart-container img {
    max-width: 740px;
    height: auto;
}


@keyframes slideIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.text-success {
    --bs-text-opacity: 1;
    color: #23b862!important;
}

.price-info {
    padding-left: 75px;
    padding-top: 0px;
    padding-bottom: 6px;
}

.crypto-blocks-animation {
    justify-content: space-between;
    display: flex;
}

.crypto-block .icon {
    font-size: 1.5rem;
    margin-right: 10px;
    position: absolute;
}

.price-info .symbol-usd {
    font-size: 16px;
    color: #c78383;
}

.price-info .price {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.crypto-block {padding-right:15px;}

.price-info .change {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex; 
    align-items: center;
    gap: 4px;
}

.text-success .fa-arrow-up {
    color: #23b862;
}

.text-danger .fa-arrow-down {
    color: var(--red-down);
}

/* Stats Cards */
.statistics {
    background: linear-gradient(to bottom, #5f0b0b 1%, #240303 99%);
    padding: 20px 0px;
    border-top: 2px solid #bd1c1c;
    border-bottom: 2px solid #bd1c1c;
}

.stats-row {
    max-width: 600px;
}


.stats-container {
	padding:2px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#413f3e+0,27a07b+49,413f3e+100 */
	background: linear-gradient(to right, #413f3e 0%,#27a07b 49%,#413f3e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	  border-radius: 10px;
}

.stat-card {
    background-color: #180101;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    border-color: var(--secondary-color);
     box-shadow: 0px 0px 0px 4px #27a07b;
}

.stat-card img {
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: bold;
    color: #fda264;
}

.stat-label {
    font-size: 16px;
    text-transform:uppercase;
    font-weight:600;
}

.investment-wrapper {
    padding: 0px;
    display: flex;
    align-items: center;
    gap: 50px;
    color: white;
    padding-bottom:40px;
}

/* 7% WEEKLY BADGE */
.weekly-badge-card {
    padding: 3px;
    background: linear-gradient(to right, #413f3e 0%, #27a07b 49%, #413f3e 100%);
    border-radius: 12px;
    text-align: center;
    min-width: 220px;
}

.badge-inner {
    background-color: #180101;
    border-radius: 10px;
    padding: 15px;
}

.glow-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 6px solid #60ffd7;

}

.glow-circle .percent {
    font-size: 3.3rem;
    font-weight: bold;
    color: #3ef5c5;
    line-height: 2.3rem;
}

.glow-circle .percent b {
	font-size: 2rem;
}

.glow-circle .label { 
    font-size: 1.1rem;
    color: rgb(62, 245, 197);
    letter-spacing: 2px;
    font-weight: 600;
 }

.badge-footer p {
    margin: 5px 0px;
    letter-spacing: 0px;
    color: rgb(238, 238, 238);
    font-weight: 500;
 }

/* CALCULATOR SECTION */
.main-heading {    font-size: 46px;
    margin: 0;
    letter-spacing: 1px;}
.sub-heading { font-size: 1.2rem; color: #ccc; margin-bottom: 30px; }

.forecast-row { display: flex; align-items: center; gap: 30px;padding-top: 20px; }

.forecast-header { display: flex; align-items: center; gap: 15px; padding-right: 20px; }
.forecast-icons { color: var(--brand-red); font-size: 1.5rem; display: flex; flex-direction: column; }

.forecast-divider {
    background: linear-gradient(to bottom, rgba(53, 3, 3, 0) 0%, rgba(53, 3, 3, 0.02) 1%, rgba(86, 7, 7, 0.96) 50%, rgba(85, 7, 7, 1) 52%, rgba(53, 3, 3, 0) 100%);
    width: 4px;
    height: 100px;
    margin-left: 10px;
}

.bold-text { display: block; font-weight: 600; font-size: 1.3rem; }
.small-text { display: block; font-weight: 600; font-size: 1.3rem; }

.calc-inputs { display: flex; align-items: flex-end; gap: 20px; }

.field-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: #fff;
}

#investment-plan, #invest-amount {
    background: #111; border: 1px solid #444; color: white; padding: 10px; border-radius: 4px;
}

.amount-box { display: flex; }
#invest-amount { width: 70px; border-right: none; border-radius: 4px 0 0 4px; }
.currency-tag { background: var(--brand-red); padding: 10px 12px; border-radius: 0 4px 4px 0; font-size: 0.8rem; font-weight: bold; }

.result-box {
    background: #111;
    border: 1px solid #333;
    padding: 10px 25px;
    border-radius: 8px;
    text-align: center;
}

.cyan-glow {
    color: var(--neon-cyan);
    font-size: 1.8rem;
    font-weight: bold;
}

/* Strategic Capital Section Header (Used in Hero and Plans) */
.sub-heading {
    font-size: 42px;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 0.5rem;
}
.sub-heading b {
	color:#87077d;
	font-weight:700;
}

.sub-text {
    font-size: 0.85rem;
    opacity: 0.5;
    letter-spacing: 2px;
}

.investment-bg {
    background: linear-gradient(to bottom, #d01258 0%, #570095 100%);
    border-radius: 16px;
    padding: 20px 0px;
}

/* ------------------------------------- */
/* 3. Investment Plans Styling */
/* ------------------------------------- */
.plans-section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;

}
.eng-for-growth {
    font-size: 1.3rem;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}

.dots-container {
    width: 20px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:5px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    opacity: 0.5;
    margin-bottom: 5px;
}
/* General Investment Plans Section Styling */
.investment-plans-section, .support-content-section  {
    padding: 40px 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#170f33+0,312d57+100 */
    background: url(images/bg-plans.jpg) no-repeat center top;
    background-size: cover;
}

.plans-inner {
	background: url(images/bg-about.png) no-repeat center;
    background-size: cover;
}

.investment-plans-section h2.gradient-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    font-weight: 700;
    /* Gradient for the title as discussed */
    background-image: linear-gradient(to right, #5f0191 0%, #c6105d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: #5f0191; /* Fallback */
}
/* Custom Carousel Wrapper */
.custom-carousel-wrapper {
    position: relative;
    padding: 0 0px;
    margin: 0px 40px;
        
}

.custom-carousel-wrapper2{
	overflow: hidden;
}

/* Carousel Inner (the sliding track) */
.custom-carousel-inner {
    display: flex; 
    transition: transform 0.45s ease; 
    padding: 0; 
    margin: 0;
    
    /* FIX: Add a tiny bit of negative margin to perfectly hide edge content */
    margin-right: -1px; 

}

/* Individual Card Wrapper */
.carousel-card-wrap {
    /* Set a calculated width that includes all margins/paddings */
    flex: 0 0 calc(100% / 4); 
    max-width: calc(100% / 4);
    padding: 10px; 
    box-sizing: border-box; 
}

/* Responsive adjustments for cards */
@media (max-width: 1200px) {
    .carousel-card-wrap {
        flex: 0 0 calc(100% / 3); 
        max-width: calc(100% / 3);
    }
}

@media (max-width: 992px) { /* Tablets */
    .carousel-card-wrap {
        flex: 0 0 50%; /* Show 2 cards */
        max-width: 50%;
    }
}

@media (max-width: 768px) { /* Smaller tablets / large phones */
    .carousel-card-wrap {
        flex: 0 0 100%; /* Show 1 card */
        max-width: 100%;
    }
    .custom-carousel-wrapper {
        padding: 0 20px; /* Reduce padding for arrows */
    }
}


/* New wrapper for the Deposit button */
.deposit-btn-wrap {
    position: absolute;
    right: 0; /* Align to the right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    z-index: 1; 
}
.deposit-btn {
	width: auto;
    padding: 6px 10px;
    font-size: 0.9rem;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
    font-weight: 700;
    background: white;
    color: #ad0d69;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transform-origin: center center;
    transform: rotate(90deg);
    margin-right: -25px;
    transition: margin-right 0.2sease, box-shadow 0.2sease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.deposit-btn:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    background: #ad0d69;
    color:white;
}

/* =======================================================
   DETAILS TOGGLE VIEW STYLES
   ======================================================= */

/* 1. Hide the detailed view by default */
.plan-card-detailed-view {
    opacity: 0;
    height: 0;
    overflow: hidden;
    /* Use padding to create space for the view, which will be collapsed when hidden */
    padding-top: 0;
    padding-bottom: 0;
    transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
    /* Hide from mouse events when collapsed */
    pointer-events: none; 
}

/* Optional styling for the title in the new block */
.plan-card-detailed-view h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.2rem;
}



/* 2. When the card has the 'details-active' class: */

/* Hide the main view */
.plan-card.details-active .plan-card-main-view {
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

/* Show the detailed view */
.plan-card.details-active .plan-card-detailed-view {
    opacity: 1;
    height: auto; /* Reverts to content height */
    overflow: visible;
    /* Restore padding to give it space inside the card */
    padding: 0px 0 0 0; 
    pointer-events: auto;
}




/* Carousel Navigation Arrows */
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000000;
    transition: background-color 0.3s ease;
    color: #fff;
    font-size: 1.2rem;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity:0.5;
}

.carousel-control-prev {
    left: -35px;
}

.carousel-control-next {
    right: -35px;
}
/* Profit Calculator Styling */

.profit-calculator-container {padding:10px 40px;}
.plans-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 60px;
    margin-bottom: 40px;
}

.calculator-row {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    background-image: linear-gradient(to bottom, #770585 0%, #5c0192 100%), /* Card Background (on top layer) */ linear-gradient(to bottom, #f43683 0%, #8d087a 100%);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-size: cover;
}

.calculator-icons i {
    color: var(--secondary-color);
    margin-bottom: 15px;
    opacity: 0.4;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    opacity: 1;
    letter-spacing: 1px;
    color: white;
    font-weight: 600;
    text-align: left;
}

.form-select, .form-control {
    background-color: #181818;
    border: 0px;
    color: var(--text-light);
    height: 50px;
    padding-right: 15px !important;
    border-radius: 10px;
    border: 2px solid #890505 !important;
}

.form-select:focus, .form-control:focus {
	  background-color: #181818;
	  color:#ffffff;
	  box-shadow: 0 2px 13px #890505;
}

.output-value {
	color:#3ef5c5!important;
	font-size: 36px;
	font-weight:700;
}

.form-select option {
    background-color: var(--bg-dark);
    color: var(--text-light);
}
.form-select-f13583-arrow {
    /* Changed stroke color from %23f13583 to %23ffffff */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
	padding-right:40px!important;
}

/* Optional: If you want the text/border of the select box itself to also be f13583 */
.form-select.form-select-f13583-border {
    border-color: #f13583;
}

.input-group-text {
    background:#890505;
    color: var(--text-light);
    border: none;
    font-weight: bold;
}

.output-group {
    display: flex;
    align-items: center;
    border: 3px solid transparent;
    background-image: linear-gradient(to bottom, #A8006E 0%, #8d087a 100%), /* Card Background (on top layer) */ linear-gradient(to bottom, #f43683 0%, #8d087a 100%);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-size: cover;
    border-radius: 12px;
    font-weight: bold;
    font-size: 1.5rem;
    padding:10px;
    margin-left:30px;
}

.output-group label span {
    display: block;
    font-size: 48px;
    font-weight: 900;
    line-height: 48px;
}

.output-symbol {
    font-size: 1rem;
    opacity: 1;
    margin-right: 15px;
    background: linear-gradient(to right, #cd2e88 0%, #2779f3 100%);
    color: #fff;
    border-radius: 100%;
    width: 54px;
    height: 54px;
    font-size: 24px;
    line-height: 54px;
    margin-left: -40px;
}

.output-value {
    color: var(--text-light);
}


/* 1. Main Wrapper - Now uses Flex-Column for Mobile, Row for Desktop */
.investment-wrapper {
    display: flex;
    flex-direction: column; /* Stack vertically on small screens */
    align-items: center;
    gap: 30px;
    color: white;
    width: 100%;
    box-sizing: border-box;
}



/* 3. Calculator Panel - Responsive Layout */
.calculator-panel {
    width: 100%;
    text-align: center; /* Center text on mobile */
}

/* 4. Forecast Row - Stacks on Mobile */
.forecast-row {
    display: flex;
    flex-direction: column; /* Stack header and inputs vertically on mobile */
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* 5. Inputs Area - Wraps items naturally */
.calc-inputs {
    display: flex;
    flex-wrap: wrap; /* Allows inputs to wrap if they don't fit */
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    width: 100%;
}

/* 6. Field Groups - Stretch on very small screens */
.field-group {
    flex: 1 1 200px; /* Allows inputs to grow/shrink, min 200px */
    max-width: 300px;
}

#investment-plan, .amount-box {
    width: 100%; /* Inputs take full width of their group */
}

/* --- DESKTOP ADJUSTMENTS (Screens wider than 992px) --- */
@media (min-width: 992px) {
    .investment-wrapper {
        flex-direction: row; /* Side-by-side layout */
        align-items: stretch;
    }

    .calculator-panel {
        text-align: left; /* Re-align text to left */
    }

    .forecast-row {
        flex-direction: row; /* Horizontal row for icons and inputs */
        align-items: center;
    }


    .calc-inputs {
        justify-content: flex-start;
        flex-wrap: nowrap; /* Keep inputs on one line on desktop */
    }
}




/*Investment Plans*/

.plans-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    padding-bottom:30px;
}

/* The Gradient Border Hack */
.bb-card {
    padding: 2px; /* Border thickness */
    border-radius: 15px;
    position: relative;
    background: #222; /* Fallback */
}

.bb-card-inner {
    background: #0f0505;
    border-radius: 14px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* Typography */
.bb-plan-name {
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.bb-percentage { font-size: 3.2rem; font-weight: 800; margin: 5px 0; line-height: 1; }
.bb-tagline {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 20px;
}

/* The Orange Timer Box */
.bb-timer-box {
    display: inline-block;
    border: 1px solid #4d3311;
    color: #f39c12;
    padding: 6px 15px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(243, 156, 18, 0.1), transparent);
    box-shadow: inset 0 0 10px rgba(243, 156, 18, 0.05);
}

/* Candlestick Graphic (Right Side) */
.bb-candles { display: flex; align-items: flex-end; gap: 8px; opacity: 0.5; }
.candle { width: 10px; background: #800000; position: relative; border-radius: 2px; }
.candle::before { content: ''; position: absolute; left: 4px; width: 2px; background: #800000; }

.c1 { height: 40px; } .c1::before { height: 60px; top: -10px; }
.c2 { height: 25px; } .c2::before { height: 45px; top: -10px; }
.c3 { height: 50px; } .c3::before { height: 75px; top: -12px; }

/* Color Themes for Borders and Percentage Glow */
.flash { background:linear-gradient(135deg, #414040, #00ffcc, #414040 40%); }
.flash .bb-percentage { color: #00ffcc; text-shadow: 0 0 15px rgba(0, 255, 204, 0.3); }

.rapid { background: linear-gradient(135deg, #414040, #00ff88, #414040 40%); }
.rapid .bb-percentage { color: #00ff88; text-shadow: 0 0 15px rgba(0, 255, 136, 0.3); }

.venture { background: linear-gradient(135deg, #414040, #a855f7, #414040 40%); }
.venture .bb-percentage { color: #a855f7; text-shadow: 0 0 15px rgba(168, 85, 247, 0.3); }

.elite { background: linear-gradient(135deg, #414040, #ef4444, #414040 40%); }
.elite .bb-percentage { color: #ef4444; text-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }

.centurion { background: linear-gradient(135deg, #414040 , #f59e0b, #414040  40%); }
.centurion .bb-percentage { color: #f59e0b; text-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }

.ultimate { background: linear-gradient(135deg, #414040, #3b82f6, #414040  40%); }
.ultimate .bb-percentage { color: #3b82f6; text-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }

/* --- ABOUT SECTION (Middle Content) --- */
.about-section {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
    gap: 50px;
}

.about-content {
    flex: 1;
    max-width: 50%;
}

.title-primary {
    font-size: 72px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.title-secondary {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 30px;
}

.title-secondary span {
	color:#c3338f;
}

.about-text {
    color: #ffffff;
    margin-bottom: 40px;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
}

.about-buttons {
    display: flex;
    gap: 20px;
}

.about-graphic {
    flex: 1;
    min-width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px; /* Set a height for the placeholder */
}

.graphic-placeholder {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.2rem;
}

/* --- TRUST SECTION (Bottom) --- */
.trust-section {
    padding: 3px;
    border-radius: 15px;
    position: relative;
   background: linear-gradient(135deg, #414040, #ef4444, #414040 40%);
}

.trust-inner {
    background: #0f0505d6;
    border-radius: 14px;
    padding: 40px 25px;
    height: 100%;
}

.trust-header {
    text-align: center;
    margin-bottom: 30px;
}

.trust-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
}
.trust-subtitle {
    font-size: 36px;
    font-weight: 400;
    color: white;
    text-transform:none;
}


.trust-title span {
	color:#ff1a20;
}

.trust-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 0px;
}

.trust-card {
   background: #0e0726;
    padding: 20px;
    border-radius: 18px;
    position: relative;
    color:white;
}

.compliance-card {
	   background: #0e0726 url(images/company1.png) no-repeat right center;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.card-icon {
    font-size: 2.5rem;
    color: var(--color-neon-pink);
    line-height: 1;
}

.trust-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.trust-card h3 span {
	color:#ce1259;
}

.card-highlight {
    color: var(--color-neon-pink);
}

/* Compliance Card (Card 1) Specifics */
.compliance-card {
    /* Style for the UK company number */
    border-left: 5px solid var(--color-neon-pink);
}
.uk-company {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}

.card-details h4 {
	font-size:18px;
}
.card-details h4 b {
    font-size:30px;
    font-weight:700;
}

.card-details p {
	color:#9b92ba;
	font-size:18px;
}

.btn-download-cert {border-radius:6px;}


/* D&B Card (Card 2) Specifics */
.db-card {
    text-align: center;
    border-bottom: 5px solid var(--color-neon-blue);
}
.db-grade {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-light-gray);
    line-height: 28px;
    margin-bottom:5px;
}

.db-grade b {
	color:#ce1259;
}

.db-number {
    font-size: 42px;
    font-weight: 800;
    color: var(--color-white);
    margin: 0px 0 5px;
    line-height: 42px;

}
.db-global {
    font-size: 16px;
    color: #9b92ba;
    margin-bottom: 5px;
}

/* SSL Card (Card 3) Specifics */
.ssl-card {
    /* Style for the lock icon */
    border-right: 5px solid var(--color-neon-pink);
}
.ssl-description {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #9b92ba;
}

.ssl-card h2 {
    font-weight: 800;
    font-size: 32px;
}

.btn-ssl {
    background: white;
    color: #1776eb;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    float: right;
    margin-bottom: -30px;
    display: block;
    padding:6px 10px;
    border-radius:6px;
}


/* --- FEATURES SECTION --- */
.features-section {
    background: url(images/aff-bg.png) no-repeat center bottom;
    background-size: cover;
    padding: 60px 5%;
    color: #333; /* Darker text for a light background */
    text-align: center;
}

.features-header {
    max-width: 900px;
    margin: 0 auto 40px auto;
}
.features-key {
    font-size: 1rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.features-title {
font-size: 3rem;
    font-weight: 800;
    color: #b80e64;
    margin-bottom: 20px;
}

.features-description {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
    color: #555;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four columns */
    gap: 30px;
    margin: 0 auto;
    text-align:center;
}

.feature-card {
	background-color: var(--color-white);
    padding: 0px;
    border-radius: 10px;
    text-align:center;
}

.card-icon-container {
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: start;
    align-items: start;
}

.card-icon-container img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    margin: 0px auto;
}

.trust-text p {
	font-size:18px;
}

.feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #12a372;
    margin-bottom: 15px;
    line-height: 1.3;
    text-transform: uppercase;
}
.feature-card p {
    line-height: 1.7;
}
/* BitBillionaire Custom Red Accordion */
.accordion-item {
    background-color: #1a1a1a;
        border: 1px solid #9a4141;
    margin-bottom: 10px;
    border-radius: 8px !important;
    overflow: hidden;
}

.accordion-button {
    background-color: #020000b0;
    color: #ffffff;
    font-weight: 600;
    padding: 1.2rem;
    box-shadow: none !important;
}


.accordion-button:not(.collapsed) {
    background: linear-gradient(to right, #540b0b 0%, #a42c2c 50%, #400a0a 100%);
    color: white;
    font-size: 18px;
}

.accordion-button::after {
    filter: brightness(0) invert(1); /* Makes arrow white */
}

.accordion-button:focus {
    border-color: #ff0000;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
}

.accordion-body {
    background-color: #111;
    color: #cccccc;
    line-height: 1.6;
    border-top: 1px solid #333;
}

.accordion-header {
    margin-bottom: 0;
}

.activity-content {
    display: none;
    padding: 30px;
}

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

.content-header {
    margin-bottom: 40px;
    color: white;
}
.content-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-neon-pink); /* Header title color */
    text-transform:uppercase;
}

.content-header p {
    font-size: 0.9rem;
    color: var(--color-light-gray);
    max-width: 600px;
}

/* --- Activity Grid and Items --- */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns */
    gap: 20px;
}

.activity-item {
    display: flex;
    align-items: center;
    background-color: #201446;
    border-radius: 10px;
    padding: 0px 15px 0px 0px;
}

.icon-circle {
    min-width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--color-white);
    margin-right: 10px;
    background: linear-gradient(to bottom, #f14b8c 0%, #620695 100%);
    height: 70px;
    width: 60px;
    border-radius: 10px 0px 0px 10px;
}

/* Specific Coin Icons (Placeholder colors) */
.icon-bitcoin { background-color: #f7931a; }
.icon-ethereum { background-color: #627eea; }
.icon-cardano { background-color: #0033ad; }
.icon-litecoin { background-color: #3a5c9a; }
.icon-monero { background-color: #ff6600; }
.icon-stellar { background-color: #000000; border: 1px solid #ccc; }

.details {
    display: flex;
    flex-direction: row;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-top: 20px;
}
.user-id {
    font-size: 0.8rem;
    color: #f14b8c;
    font-weight: 600;
    text-align: right;
    margin-left: 15px;
    margin-top: 15px;
}

.timestamp {
    font-size: 0.7rem;
    color: #a0a0a0;
}

/* --- AFFILIATE SECTION --- */
.affiliate-section {
    padding: 40px 0%;
    color: #333;
    position: relative; /* For absolute positioning of header/button */
    overflow: hidden; /* Ensures floating elements don't overflow */
    min-height: 700px; /* Ensure enough height for illustration */
	background: #f5f5fd url(images/security-bg.png) no-repeat center top;
    background-size: cover;
}

.affiliate-header {
    text-align: left;
    margin-bottom: 30px;
    max-width: 100%;
    position: relative;
}
.affiliate-title {
    font-size: 3rem;
    font-weight: 800;
    color: #bc0f62;
    margin-bottom: 10px;
}

.affiliate-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
}

.btn-register-affiliate {
    position: absolute;
    top: 10px;
    right: 0px;
    padding: 12px 25px;
    font-weight: 700;
    padding: 20px 45px;
    border-radius: 60px;
    font-size: 20px;

}

.affiliate-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 1200px;
    margin: 50px auto 0 auto;
    min-height: 500px; /* Adjust based on illustration size */
}

.affiliate-features-grid {
    position: absolute;
    width: 100%; /* Cover the wrapper */
    height: 100%;
    display: grid;
    grid-template-areas: 
        "top-left    .    top-right"
        ". central ."
        "bottom-left . bottom-right";
    grid-template-columns: 1fr 2fr 1fr; /* Center column for illustration */
    grid-template-rows: 1fr 160px 0%fr 1fr;
    align-items: center;
    justify-items: center;
}

/* Positioning specific feature items using grid-area */
.feature-item.top-left { grid-area: top-left; justify-self: end; align-self: end; transform: translate(20%, 20%); } /* Adjust to match curves */
.feature-item.bottom-left {
    grid-area: bottom-left;
    justify-self: end;
    align-self: start;
    transform: translate(0%, 20%);
 } /* Adjust to match curves */
.feature-item.top-right {    grid-area: top-right;
    justify-self: start;
    align-self: end;
    transform: translate(-20%, 20%);
    align-items: end;} /* Adjust to match curves */
.feature-item.bottom-right { 
    grid-area: bottom-right;
    justify-self: start;
    align-self: start;
    align-items: end;
    transform: translate(-20%, 20%);

 } /* Adjust to match curves */



/* --- SECURITY SECTION (Multi-Layered Digital Fortress) --- */
.security-section {
    padding: 50px 0% 0px;
    color: #333;
}

.security-content-wrapper {
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: stretch; /* Ensures blocks stretch to the same height */
}

/* --- Left Block: Security Text --- */
.security-text-block {
    flex: 1 1 36%;
    background-color: #201446;
    padding: 0px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.security-text-block img {max-width:100%; margin-bottom:15px; border-radius:10px 10px 0px 0px;}

.block-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-neon-pink);
    margin-bottom: 15px;
    position: relative;
    padding: 10px 30px 0px;
}

.block-description {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
    padding: 0px 30px 20px;
}

.block-title b {
	color:#da408e;
}

.block-description strong {
    font-weight: 600;
    color: var(--color-neon-pink);
}

/* --- Right Block: Partners Grid --- */
.security-partners-container {
    flex: 1 1 55%; /* Takes up about 55% of the space */
}

.partners-main-title {
	font-size: 2.2rem;
    font-weight: 700;
    color: #2f69b2;
    text-align: left;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.partners-main-title b {
	color:#bc0f62;
	font-weight:700;
	}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px;
}

.partner-card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.partner-logo-box {
    flex-shrink: 0; /* Prevents logo from shrinking */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Styles for the logo box (e.g., border, background) depend on the actual logos */
}

.partner-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.footer-divider {
	height:6px;
	background: linear-gradient(to right, #413f3e 0%, #27a07b 49%, #413f3e 100%);
	width:100%;
	margin-top:20px;
}
    
    /* --- CURRENCY SECTION --- */
.currency-section {
    background-color: #e8e6fe;
    padding: 30px 0%;
}

.currency-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    margin: 0 auto;
}

.currency-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-white);
    font-weight: 600;
    text-align: center;
}

.currency-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.currency-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white circle */
    border: 1px solid var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 5px;
    /* Inner shadow to mimic the icon look */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) inset;
}

.currency-name {
    font-size: 0.7rem;
    text-transform: uppercase;
    line-height: 1;
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 1200px) {
    .currency-grid {
        grid-template-columns: repeat(6, 1fr); /* 6 columns on smaller desktops */
    }
}

@media (max-width: 900px) {
    .currency-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on tablets */
    }
}

@media (max-width: 600px) {
    .currency-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on mobile */
    }
    .currency-card {
        height: 80px;
    }
    .currency-name {
        font-size: 0.6rem;
    }
}
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.currency-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white circle */
    border: 1px solid var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
    /* Inner shadow to mimic the icon look */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) inset;
}

.currency-name {
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1;
    color:white;
    margin-left:5px;
}

.registration-section {
    background-color: #180101;
    color: white;
    padding: 60px 0px;
    border-top: 3px solid #b32525;
    border-bottom: 3px solid #b32525;
}

.reg-grid {
    display: grid;
    /* Force two equal columns */
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    align-items: center;
    margin-bottom: 20px;

}

.reg-row.reverse { flex-direction: row; } /* Keeping layout consistent with image */

.reg-text { flex: 1; }
.reg-text h2 {
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
}
.text-red { color: #ff1a1a; }
.reg-text p {
    color: #ffffff;
    line-height: 1.6;
    font-size: 22px;
}

/* The Cards */
.reg-card {
    flex: 1.2;
	padding: 3px;
    background: linear-gradient(to right, #413f3e 0%, #27a07b 49%, #413f3e 100%);
    border-radius: 15px;

    position: relative;
    min-height: 250px;
}

.reg-card-inner {
    background: #180101;
    border-radius: 10px;
    padding: 25px;
}

/* Companies House Specifics */
.card-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.info-label {
    color: #2ea87a;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: underline;
}
.uk-label {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-body { display: flex; justify-content: space-between; align-items: flex-end; }

.logo-area { border-left: 4px solid #fff; padding-left: 15px; }
.house-logo { height: 60px; filter: brightness(0) invert(1); }
.logo-text {
    font-size: 2.2rem;
    font-weight: bold;
    margin-top: 5px;
    line-height: 2.2rem;
}

.big-number {
    font-size: 2.8rem;
    font-weight: 800;
    text-align: right;
}
.cyan-glow {     color: #2ea87a;}

.number-action {margin-bottom:10px;}

.btn-download {
display: block;
    background: #ff1a1a;
    color: white;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(255, 26, 26, 0.3);
    text-align: center;
}
/* D&B Specifics */
.card-duns { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.duns-logo {filter: brightness(1); margin-bottom: 5px; max-width: 100%;}

.duns-number-box {
border: 3px solid #2ea87a;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 10px 10px 0px 0px;
    display: inline-block;
    width: fit-content;
    margin: 0 auto;
    border-bottom: 0px;
    margin-bottom: -26px;
}
.duns-label { display: block; font-size: 1rem; font-weight: bold; margin-bottom: 10px; }



/* Responsive */
@media (max-width: 992px) {
    .reg-row, .reg-row.reverse { flex-direction: column; text-align: center; }
    .card-body { flex-direction: column; align-items: center; gap: 20px; }
    .big-number { text-align: center; }
    .logo-area { border-left: none; border-top: 4px solid #fff; padding-left: 0; padding-top: 15px; }
}

.security-market-section {
    background: #270202 url(images/chart-bg.png) no-repeat center;
    background-size: cover;
    color: white;
    padding: 60px 0px;

}

/* Market Condition Styles */
.market-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 80px;
    align-items: center;
}

.text-green {
    color: #2ea87a;
}
.text-red { color: #ff1a1a; }

.market-text h2 { font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; }
.market-text h2 span {font-size:4rem;}
.market-text p { color: #ffffff; line-height: 1.6; font-size:22px; }

.market-chart-container {
	padding: 3px;
    background: linear-gradient(to right, #413f3e 0%, #27a07b 49%, #413f3e 100%);
    border-radius: 15px;
    position: relative;
    height: 400px;
    overflow: hidden;
}

.tradingview-widget-container {
	    background: #180101;
    border-radius: 10px;
    padding: 15px;
}

/* Assets Fortified Card */
.assets-fortified-card {
    padding: 3px;
    border-radius: 15px;
    position: relative;
    background: linear-gradient(135deg, #414040, #ef4444, #414040 40%);
    text-align: center;
    position: relative;
}

.assets-fortified-card-inner {
	    background: #0f0505d6;
    border-radius: 14px;
    padding: 40px 25px;
}

.fortified-title { 
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-align: left;
}
.red-line-accent {
    width: 40%;
    height: 6px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4a0707+0,6c1515+51,4b0808+100&1+0,1+53,0+100 */
	background: linear-gradient(to right, rgba(74,7,7,1) 0%,rgba(108,21,21,1) 51%,rgba(107,20,20,1) 53%,rgba(75,8,8,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    margin: 0;
    margin-bottom:10px;
}

.fortified-intro {
    margin:15px 0px;
    color: #ffffff;
    font-size: 1.2rem;
    text-align:left;
    line-height:1.6;
}

/* Features List */
.security-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    text-align: left;
    margin-bottom: 20px;
}

.feature-item { display: flex; gap: 20px; margin:20px 0px; }
.gold-icon { color: #f39c12; font-size: 2rem; margin-top: 5px; }
.feature-title { font-weight: bold; font-size: 1.2rem; display: block; margin-bottom: 8px; }
.feature-content p { color: #fff; margin: 0; font-size: 1rem; }

/* Trust Footer */
.trust-footer {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #27a07b;
    border-radius: 15px;
    padding: 20px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.ssl-box { text-align: left; flex: 1; min-width: 250px; }
.ssl-label { font-size: 1.8rem; font-weight: bold; display: block; }
.ssl-badge {
    background: #27ae60;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    width: 200px;
    margin: 10px 0;
    font-size: 0.8rem;
    font-weight: bold;
}
.ssl-subtext {
    font-size: 1rem;
    color: #ffffff;
}

.badge-row {
    display: flex;
    gap: 20px;
    align-items: center;
    flex: 2;
    justify-content: flex-end;
}

.badge-item { text-align: center; }
.badge-item img { transition: 0.3s; margin-bottom: 5px; }
.badge-item:hover img { filter: none; }
.badge-item span { display: block; font-size: 0.65rem; color: #666; }

.ssl-badge i {margin-top:5px;}

/* Responsive */
@media (max-width: 992px) {
    .market-grid { grid-template-columns: 1fr; text-align: center; }
    .trust-footer { flex-direction: column; gap: 40px; }
    .badge-row { justify-content: center; flex-wrap: wrap; }
}

.transaction-panel {
	
}

.nav-tabs {padding:0px 30px;}

/* Tab buttons with specific gradient from image */
.nav-tabs .nav-link {
    border-radius: 10px 10px 0px 0px;
    background: #2f2424;
    color: #888;
    border: none;
    padding: 15px;
    font-weight: 800;
    font-size: 18px;
}


.nav-tabs .nav-link:hover {color: #fffff !important;}
.nav-tabs .nav-link.active {
	color: #fffff !important;
    background: linear-gradient(to right, #413f3e 0%, #27a07b 49%, #413f3e 100%);
}

.nav-tabs .nav-link.active:focus {
	color: #fffff !important;

}

/* Pair Styling */
.tx-item {
    background: #2f2424;
    padding: 12px 15px;
    border: 1px solid #1a1a1a;
    font-size: 0.85rem;
    border-radius: 6px;
}

.text-cyan {
    color: #09c188;
}

.tx-item .text-cyan {
   font-size:24px;
}

.text-orange { color: #f39c12; margin-right: 5px; }
.tx-user { color: #fff; font-weight: 600; letter-spacing: 0.5px; font-size:18px; margin-top:5px;}


.tab-content {
	background:#180101;
	border-radius:10px;
	border:3px solid #413e3e;
	padding:15px;
}

.transactions-affiliate-section {
	background:#180101;
	border-top: 3px solid #b32525;
    border-bottom: 3px solid #b32525;
	}

/* Affiliate Side */
.affiliate-promo-card img{
 max-height:440px;
}



/* --- FOOTER SECTION --- */
.main-footer {
    background: #270202 url(images/chart-bg.png) no-repeat center;
    background-size: cover;
    padding: 60px 0%;
    color: #333;
}

.footer-container {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    color:white;
}

/* --- Common Column Styles --- */
.footer-column h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #09c188;
    text-transform: uppercase;
}

/* --- Column 1: Logo --- */
.footer-logo-column {
    flex-basis: 300px; /* Base width for the logo column */
    flex-grow: 1;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.footer-logo img {
	max-width:100%;
}


.footer-logo .logo-icon {
    width: auto;
    /* You might need special CSS to handle the coloring/gradient of the logo image */
}



.footer-copyright {
    font-size: 1rem;

}

/* --- Column 2: Contact Information --- */
.contact-column {
    flex-basis: 400px;
    flex-grow: 1;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-item i {
    font-size: 1.5rem;
    color: #5c0192;
    flex-shrink: 0;
}

.contact-details {
    line-height: 1.5;
    font-size: 1rem;
}

.contact-label {
    display: block;
    font-weight: 600;
    color: #09c188;
    font-size: 18px;
}
.contact-details p {
    margin: 0;

}

/* --- Column 3: Navigation --- */
.navigation-column {
    flex-basis: 400px; /* Slightly wider basis for the two columns of links */
    flex-grow: 1;
}

.navigation-links {
    display: flex;
    gap: 50px;
    margin-top: 30px;
}

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

.navigation-links li {
    margin-bottom: 10px;
}

.navigation-links a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s ease;
    color: #ffffff;
    text-transform: uppercase;
}

.navigation-links a:hover {
    color:#09c188;
}

.navigation-links a i {
    font-size: 0.7rem; /* Small dot icon */
    color:#a80c6c;
    margin-right: 8px;
    vertical-align: middle;
}

/* --- Media Queries --- */
@media (max-width: 900px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-logo-column,
    .contact-column,
    .navigation-column {
        flex-basis: 100%;
        margin-bottom: 30px;
    }

    .footer-logo {
        justify-content: center;
    }

    .navigation-links {
        justify-content: center;
        gap: 30px;
    }
    
    .contact-item {
        justify-content: start;
        text-align: left;
    }
}


/* --- Media Queries for Responsiveness --- */
@media (max-width: 1200px) {
    .currency-grid {
        grid-template-columns: repeat(6, 1fr); /* 6 columns on smaller desktops */
    }
}

@media (max-width: 900px) {
    .currency-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on tablets */
    }
}

@media (max-width: 600px) {
    .currency-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 columns on mobile */
    }
    .currency-card {
        height: 80px;
    }
    .currency-name {
        font-size: 0.6rem;
    }

}

/* --- Media Queries for Responsiveness --- */

@media (max-width: 1024px) {
    .security-content-wrapper {
        flex-direction: column; /* Stack blocks vertically on tablets */
    }

    .security-text-block {
        order: 1; /* Place the text block first */
    }

    .security-partners-container {
        order: 2;
        padding: 0px 30px;
    }
}

@media (max-width: 600px) {
    .partners-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .partners-main-title {
        font-size: 1.5rem;
    }
}

@keyframes float {
    from { transform: translateY(0px) rotate(0deg); }
    to { transform: translateY(10px) rotate(5deg); }
}


/* --- Media Queries for Responsiveness --- */
@media (max-width: 1024px) {
    .affiliate-header {
        max-width: 100%;
        text-align: center;
    }

    .btn-register-affiliate {
        position: relative; /* Make button flow with content */
        top: auto;
        right: auto;
        margin: 20px auto;
        display: block; /* Make it a block element to center */
        width: fit-content; /* Adjust width to content */
    }

    .affiliate-features-grid {
        grid-template-areas: 
            "top-left top-right"
            ". ."
            "bottom-left bottom-right";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto; /* Allow middle row to expand for illustration */
        gap: 20px;
        position: static; /* Remove absolute positioning */
        height: auto;
    }
    
    .feature-item.top-left,
    .feature-item.bottom-left,
    .feature-item.top-right,
    .feature-item.bottom-right {
        justify-self: center;
        align-self: center;
        transform: none; /* Remove translation */
    }

    .affiliate-illustration {
        grid-area: 2 / 1 / 3 / 3; /* Span across columns in the middle row */
        margin-top: 30px;
    }
}

@media (max-width: 768px) {


.trust-title {
    font-size: 2.3rem;
    
    }

.icon-circle-affiliate img {
    object-fit: contain;
    max-width: 80%;
}
    .affiliate-title {
        font-size: 2rem;
    }
    .affiliate-subtitle {
        font-size: 1rem;
    }
    .affiliate-features-grid {
        grid-template-areas: 
            "top-left"
            "top-right"
            "bottom-left"
            "bottom-right";
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: repeat(4, auto);
    }
    .feature-item {
        width: 100%; /* Make items fill width */
    }
    .affiliate-illustration {
        grid-area: auto; /* Revert grid area for smaller screens if needed */
        margin-top: 30px;
        max-width: 80%; /* Shrink illustration a bit */
    }
    .floating-elements {
        display: none; /* Hide floating percentages on very small screens if they look cluttered */
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .activity-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .activity-container {
        flex-direction: column; /* Stack tabs and content on mobile */
    }
    
    .stat-card {margin-right:0px;}
    
    .activity-sidebar-tabs {
        width: 100%;
        flex-direction: row; /* Tabs go horizontal */
        border-radius: 10px 10px 0 0;
    }

    .activity-tab {
        writing-mode: horizontal-tb;
        padding: 15px 10px;
        border-radius: 0 !important; /* Reset border radius for horizontal layout */
    }

    .activity-content-panel {
        border-radius: 0 0 10px 10px;
    }

    .activity-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
    }
}

@media (max-width: 768px) {
    .features-title {
        font-size: 2.2rem;
    }
    .features-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 1200px) {
    .trust-cards-container {
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
    }
}

@media (max-width: 800px) {
    .about-section {
        flex-direction: column; /* Stack about content vertically */
        text-align: center;
        padding: 50px 0;
    }
    
    .about-content {
        max-width: 100%;
    }

    .title-primary {
        font-size: 2.5rem;
    }

    .about-buttons {
        justify-content: center;
    }

    .about-graphic {
        order: -1; /* Move graphic to the top on mobile */
        height: 300px;
    }
}


/* ------------------------------------- */
/* 4. Responsive Adjustments */
/* ------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

	.hero-chart-container img {
		max-width: 100%;
		height: auto;
}
    /* --- Crypto Blocks --- */
    .crypto-blocks-animation {
		transform: none; 
        display: flex !important; justify-content: center; flex-wrap: wrap;
        margin-top: 20px; margin-bottom: 20px;
    }
    .crypto-block {
        position: static; margin: 5px; width: 150px; animation: none; 
    }
    #btc-block, #eth-block, #bnb-block, #ltc-block {
        top: auto; right: auto;
    }

    /* --- Plans Carousel --- */
    .plans-group > .col-lg-3 {
        width: 50%;
    }
    .carousel-control-prev, .carousel-control-next {
        top: 35%; 
    }
}

@media (max-width: 767px) {

		.hero-chart-container img {
		max-width: 100%;
		height: auto;
}

.output-group{margin-left:10px;}

    .hero-title {
        font-size: 2rem;
    }
    
    /* --- Crypto Blocks --- */
    .crypto-blocks-animation {
        position: static; transform: none; animation: none;
        display: flex !important; flex-direction: column; align-items: center;
        margin-top: 20px; margin-bottom: 20px;
    }
    .crypto-block {
        position: static; width: 90%; margin-bottom: 10px; animation: none;
    }
    #btc-block, #eth-block, #bnb-block, #ltc-block {
        top: auto; right: auto;
    }
    .stats-row {
        margin: 0 auto;
    }

    /* --- Plans Carousel and Calculator --- */
    #investmentPlansCarousel {
        padding: 0 40px;
    }
    .plans-group > .col-lg-3 {
        width: 100%;
    }
    .carousel-control-prev, .carousel-control-next {
        top: 30%;
    }
    .plan-percent {
        font-size: 3rem;
    }
    .plan-card {
        padding: 20px 15px;
    }
    .plan-info-row {
        flex-direction: column; align-items: stretch; padding: 10px;
    }
    .info-block {
        width: 100%; margin-bottom: 5px;
    }
    .btn-deposit {
        width: 100%;
    }
    .calculator-row {
        padding: 15px;
    }
    .form-select, .form-control, .output-group {
        width: 100%;
    }
}


/* --- RESPONSIVE FIX FOR REG-GRID --- */

/* Mobile & Tablet Styles (Screens smaller than 992px) */
@media screen and (max-width: 992px) {
    .reg-grid {
        /* Switch from 2 columns to 1 column */
        grid-template-columns: 1fr !important; 
        gap: 30px;
        text-align: center; /* Center text for better mobile aesthetics */
    }

    /* Reset the order for the second row so the card stays under the text on mobile */
    .reg-grid:nth-child(2) .reg-card {
        order: 2;
    }
    
    .reg-grid:nth-child(2) .reg-text {
        order: 1;
    }

    /* Adjust the Companies House card layout for narrow screens */
    .card-body {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 25px;
    }

    .big-number {
        text-align: center !important;
        width: 100%;
    }

    .logo-area {
        border-left: none !important;
        border-top: 4px solid #fff;
        padding-left: 0 !important;
        padding-top: 15px;
        display: inline-block;
    }
}


/* BitBillionaire How-To Styling */
.how-to-section {
    padding: 60px 0;
    background-color: #0a0a0a;
}

.step-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
}

.step-card:hover {
    border-color: #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
    transform: translateY(-5px);
}

.step-number {
    font-size: 3rem;
    font-weight: 800;
    color: rgb(255 0 0 / 30%);
    position: absolute;
    top: 10px;
    right: 20px;
}
.step-icon {
    width: 60px;
    height: 60px;
    background: #ff0000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.step-card h3 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
}

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

.red-divider {
    width: 50px;
    height: 3px;
    background: #ff0000;
    margin-bottom: 15px;
}


.policy-container {
    background: url(images/bg-plans.jpg) no-repeat center top;
    background-size: cover;
    color: #cccccc;
    padding: 60px 0;
    line-height: 1.8;
}

.policy-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.policy-card h1 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 30px;
    border-left: 5px solid #ff0000;
    padding-left: 15px;
}

.policy-card h3 {
    color: #f74919;
    margin-top: 25px;
    font-size: 1.3rem;
    font-weight: 600;
}

.policy-card p {
    margin-bottom: 15px;
}

.highlight-box {
    background: rgba(255, 0, 0, 0.05);
    border-left: 3px solid #ff0000;
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
}



        /* BitBillionaire Card Style */
        .login-card {
            background: #111111;
            border: 1px solid #222;
            border-top: 4px solid #ef4444;
            border-radius: 15px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7);
        }

        .text-red {
            color: #ef4444;
        }

        .separator {
            border-top: 1px solid #333;
            opacity: 1;
            width: 50%;
            margin: 0 auto 2rem;
        }

        .redirect-message p {
            color: #b0b0b0;
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        /* UNIQUE BITBILLIONAIRE LOADER */
        .loader-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 30px;
        }

        .spinner-red {
            width: 100px;
            height: 100px;
            border: 3px solid transparent;
            border-top: 3px solid #ef4444;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .spinner-inner {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 70px;
            height: 70px;
            border: 2px solid transparent;
            border-bottom: 2px solid #990000;
            border-radius: 50%;
            animation: spin 1.5s reverse linear infinite;
        }

        .pulse-core {
            position: absolute;
            top: 35px;
            left: 35px;
            width: 30px;
            height: 30px;
            background-color: #ef4444;
            border-radius: 50%;
            box-shadow: 0 0 20px #ef4444;
            animation: pulse 1.2s ease-in-out infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        /* Red Button Style */
        .btn-red {
            background-color: #ef4444;
            color: #fff;
            padding: 12px 30px;
            border: none;
            transition: 0.3s;
            letter-spacing: 1px;
        }

        .btn-red:hover {
            background-color: #cc0000;
            color: white;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
        }
        
        
        /* Member Dashboard Specific Styles */
:root {
    --accent-red: #ff0000;
    --dark-bg: #0a0a0a;
    --card-bg: #111111;
    --glass-border: rgba(255, 255, 255, 0.05);
}

.member-panel-section {
    padding: 40px 0;
    background: #270202 url(images/chart-bg.png) no-repeat bottom;
    background-size: cover;
	color: #fff; 
	    border-bottom: 2px solid #bd1c1c;
	
	}

/* Sidebar Navigation */
.menu-card {
background: #180101 !important;
    border: 2px solid #970f0f !important;
    border-radius: 12px;
    overflow: hidden;
    color: white;
}

.menu-card .card-header {
    background: linear-gradient(to right, #540b0b 0%, #a42c2c 50%, #400a0a 100%);
    border-bottom: 2px solid var(--accent-red);
    text-transform: uppercase;
    color: white;
}


.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgb(67 89 107) !important;
}

.list-group-item {
    background: transparent !important;
    border-color: rgb(191 82 82 / 24%) !important;
    transition: 0.3s all;
}
.text-muted {
    --bs-text-opacity: 1;
    color: #b9a6a6!important;
}

.list-group-item a {
    color: #b0b0b0;
    text-decoration: none;
    display: block;
    width: 100%;
}

.list-group-item:hover {
    background: rgba(255, 0, 0, 0.05) !important;
    padding-left: 25px;
}

.list-group-item:hover a { color: var(--accent-red); }
.list-group-item a i {
    width: 25px;
    color: #279f7a;
}

/* Metric Cards (The 6 boxes) */
.metric-card {
    background: #180101 !important;
    border: 1px solid var(--glass-border);
    border-top: 3px solid #279f7a;
    border-radius: 10px;
    transition: transform 0.3s;
}

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

.stat-icon {
    width: 45px;
    height: 45px;
    background: rgb(255 0 0 / 32%);
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.2rem;
}
.text-red-gold {
    color: #df771d;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}
/* Referral Input */
.form-control-dark {
    background: #000 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}

.btn-red-action { background: var(--accent-red); color: #fff; border: none; }
.btn-red-action:hover { background: #cc0000; color: #fff; }

/* Security Specific Enhancements */
       /* Security Dashboard Styling */
    .security-card-custom {
    background: #180101 !important;
    border: 1px solid var(--glass-border);
    border-left: 3px solid #279f7a;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    }
    .security-h {
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25rem;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }
    .security-h i { color: #ff0000; margin-right: 10px; }
    
    .setting-item {
        background: rgba(255, 255, 255, 0.02);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    .setting-label {
        color: #ff0000;
        font-weight: bold;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 10px;
    }
    .opt-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        color: #ccc;
        cursor: pointer;
    }
    .opt-row input { margin-right: 10px; accent-color: #ff0000; }
    
    .qr-box {
        background: #fff;
        padding: 10px;
        display: inline-block;
        border-radius: 8px;
        margin: 15px 0;
    }
    .red-btn {
        background: #ff1a20;
        color: #fff;
        border: none;
        padding: 10px 25px;
        border-radius: 5px;
        text-transform: uppercase;
        font-weight:600;
        font-size:16px;
        transition: 0.3s;
        width: 100%;
    }
    .red-btn:hover { background: #cc0000; box-shadow: 0 0 15px rgba(255,0,0,0.3); }
    
    .inpt-code {
        background: #000 !important;
        border: 1px solid #333 !important;
        color: #fff !important;
        text-align: center;
        letter-spacing: 2px;
        font-weight: bold;
    }


/* Global Form Container Styling */
    form {
        width: 100%;
    }

    /* Style for all Text, Password, and Email Inputs */
    input[type="text"], 
    input[type="password"], 
    input[type="email"], 
    input[type="number"],
    textarea {
        width: 100%;
        background-color: #050505 !important; /* Deepest black */
        border: 1px solid #222 !important; /* Subtle border */
        color: #ffffff !important;
        padding: 12px 15px;
        border-radius: 6px;
        font-size: 0.95rem;
        transition: all 0.3s ease-in-out;
        outline: none;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    }

    /* Focus State: The "Glow" effect */
    input[type="text"]:focus, 
    input[type="password"]:focus,
    select:focus {
        border-color: #ff0000 !important;
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.2);
        background-color: #0a0a0a !important;
    }

    /* Dropdown / Select Menus */
    select {
        appearance: none; /* Removes default browser arrow */
        background: #050505 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 1rem center / 12px 10px !important;
        border: 1px solid #222;
        color: #fff;
        padding: 12px 35px 12px 15px;
        border-radius: 6px;
        cursor: pointer;
    }

    /* Style for Input Groups / Labels */
    .form-group-custom {
        margin-bottom: 20px;
    }

    .form-label-custom {
        display: block;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 1px;
        color: #888;
        margin-bottom: 8px;
    }

    /* Placeholder color */
    ::placeholder {
        color: #444 !important;
        font-size: 0.9rem;
    }

    /* Checkboxes and Radios */
    input[type="checkbox"], 
    input[type="radio"] {
        accent-color: #ff0000; /* Modern way to color radios red */
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    /* Error and Success Validation Styles */
    .input-error {
        border-color: #ff4444 !important;
        background-color: rgba(255, 68, 68, 0.05) !important;
    }

    .input-success {
        border-color: #00c851 !important;
        background-color: rgba(0, 200, 81, 0.05) !important;
    }


.summary-box {
    background: #1a0f0f;
    border: 1px solid #7e3333;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
}
    .summary-box:hover {
        border-color: #ff0000;
        transform: translateY(-5px);
    }
.summary-box .label {
    color: #FFF;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.summary-box .value {

    font-size: 1.8rem;
    font-weight: 700;
    color: #279f7a;
}
    .upline-banner {
        background: rgba(255, 0, 0, 0.05);
        border: 1px dashed #ff0000;
        border-radius: 10px;
        padding: 15px;
    }
.styled-table {
    background: #1a0202 !important;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
    .styled-table thead {
        background: #000;
        color: #ff0000;
        text-transform: uppercase;
        font-size: 0.8rem;
    }
    .styled-table th, .styled-table td {
        padding: 15px;
        border-bottom: 1px solid #222;
    }
    .sub-ref-area {
        background: #0a0a0a !important;
        font-size: 0.85rem;
        border-left: 3px solid #ff0000;
    }
    .level-pill {
        background: #222;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        color: #fff;
        border: 1px solid #333;
    }

    .edit-card {
    background: #180101 !important;
    border: 1px solid var(--glass-border);
    border-top: 3px solid #279f7a;
        border-radius: 10px;
        padding: 30px;

    }
    .form-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .form-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .form-label {
        flex: 0 0 250px;
        color: #888;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
    }
    .form-field {
        flex: 1;
        color: #fff;
        min-width: 280px;
    }
    .info-static {
        color: #ff0000;
        font-weight: bold;
        letter-spacing: 1px;
    }
    /* Error & Success Messages */
    .alert-styled-success {
        background: rgba(0, 255, 100, 0.1);
        border: 1px solid #00ff64;
        color: #00ff64;
        padding: 15px;
        border-radius: 8px;
        font-weight: bold;
    }
    .error-box {
        background: rgba(255, 0, 0, 0.1);
        border-left: 4px solid #ff0000;
        color: #ffbaba;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
        font-size: 0.9rem;
    }
    .error-item {
        display: block;
        margin-bottom: 5px;
    }
    .error-item:before {
        content: "\f06a";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 10px;
    }

    @media (max-width: 768px) {
        .form-label { flex: 0 0 100%; margin-bottom: 8px; }
    }


    /* Plan Card Styling */
    .plan-card {
        background: #111;
        border: 1px solid #222;
        border-radius: 12px;
        transition: 0.3s;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        padding: 0;
    }
    .plan-card:hover { border-color: #ff0000; transform: translateY(-3px); }
    .plan-card.active { border: 2px solid #ff0000; background: #000; }
    
    .plan-header {
        background: #000;
        padding: 15px 20px;
        border-bottom: 1px solid #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .plan-name { font-family: 'Oswald', sans-serif; color: #fff; font-size: 1.1rem; }
    .plan-body { padding: 20px; }
    
    /* Table inside card */
    .plan-table { width: 100%; color: #888; font-size: 0.9rem; }
    .plan-table td { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .plan-table tr:last-child td { border-bottom: none; }
    .plan-percent { color: #ff0000; font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: bold; text-align: right; }

    /* Payment List */
    .payment-row {
        background: #0a0a0a;
        border: 1px solid #222;
        border-radius: 8px;
        padding: 12px 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        transition: 0.2s;
    }
    .payment-row:hover { background: #111; border-color: #444; }
    .payment-row input[type="radio"] { margin-right: 15px; accent-color: #ff0000; }
    .ps-icon { width: 32px; height: 32px; object-fit: contain; margin-right: 15px; filter: grayscale(1); }
    .payment-row:hover .ps-icon { filter: grayscale(0); }
    .bal-text { margin-left: auto; font-family: 'Oswald', sans-serif; }

    .calc-link { color: #ff0000; text-decoration: none; font-size: 0.8rem; text-transform: uppercase; font-weight: bold; }
    .calc-link:hover { text-decoration: underline; }

    /* Premium Transaction Page Styles */
    .transaction-card, .deposit-container-card {
           background: #180101 !important;
		border:1px solid rgb(255 255 255 / 15%);
		border-radius: 10px;
		padding: 25px;
		margin-bottom: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        position: relative;
        overflow: hidden;
    }

    .transaction-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; width: 4px; height: 100%;
        background:  #279f7a;
    }

.filter-section {
    background: #180101 !important;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #352525;
    margin-bottom: 30px;
}
    /* Custom Input Styling */
    .inpts {
        width: 100%;
        transition: border-color 0.3s;
    }

    .inpts:focus {
        border-color: #ff0000 !important;
        outline: none;
    }

    /* Table Enhancements */
    .styled-table {
        border-collapse: separate;
        border-spacing: 0 10px;
        margin-top: -10px;
    }

    .styled-table thead th {
        background: transparent;
        color: #888;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        padding: 15px;
        border: none;
    }

.styled-table tbody tr {
    background: #0d0a0a;
    transition: transform 0.2s, background 0.2s;
}

    .styled-table tbody tr:hover {
        background: #161616;
        transform: scale(1.01);
    }

    .styled-table td {
        padding: 15px;
        border-top: 1px solid #222;
        border-bottom: 1px solid #222;
        vertical-align: middle;
    }

    .styled-table td:first-child { border-left: 1px solid #222; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
    .styled-table td:last-child { border-right: 1px solid #222; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

    .amount-val {
        font-family: 'Roboto Mono', monospace;
        font-weight: 700;
        color: #fff;
        font-size: 1.1rem;
    }

    .date-box {
        background: #222;
        border-radius: 6px;
        padding: 5px 10px;
        display: inline-block;
        font-size: 12px;
        color: #bbb;
    }

    .total-summary {
        background: linear-gradient(90deg, #111 0%, #1a1a1a 100%);
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .total-summary .label { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #888; }
    .total-summary .value { color: #ff0000; font-size: 1.2rem; font-weight: bold; text-align: right; }

    .sbmt {
        background: #ff0000;
        color: #fff;
        border: none;
        padding: 12px 25px;
        border-radius: 6px;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.3s;
    }

    .sbmt:hover { background: #cc0000; }

    .text-muted-dark { color: #666; font-size: 0.85rem; }
    
    .cancel-link {
        color: #ff4444;
        font-size: 10px;
        text-decoration: none;
        border: 1px solid #ff4444;
        padding: 2px 5px;
        border-radius: 4px;
        margin-left: 5px;
    }
    
    /* BitBillionaire Pagination Styling */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    justify-content: center;
    gap: 8px; /* Space between buttons */
    margin-top: 30px;
}

.page-item {
    display: inline-block;
}

.page-link {
    background-color: #111;
    border: 1px solid #333;
    color: #888;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
}

/* Hover State */
.page-link:hover:not(.disabled) {
    background-color: #1a1a1a;
    border-color: #ff0000;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Active State - The Glowing Red Style */
.page-item.active .page-link {
    background-color: #ff0000;
    border-color: #ff0000;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    pointer-events: none; /* Can't click the current page */
}

/* Disabled State (Prev/Next when inactive) */
.page-link.disabled, 
.page-item.disabled .page-link {
    background-color: #0a0a0a;
    border-color: #222;
    color: #444;
    cursor: not-allowed;
    pointer-events: none;
}

/* Navigation arrows specialized styling */
.prev.page-link, .next.page-link {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: -2px;
}

  .payment-action-box input[type="submit"], 
                                    .payment-action-box button {
                                      
                                        text-transform: uppercase;
                                        font-weight: bold;
                                        letter-spacing: 1px;
                                        /* Inherit your global .sbmt styles */
                                    }