/* FULL UPDATED style.css */

/* Custom Fonts and Variables (Conceptual) */
:root {
    --primary-color: #6a1b9a; /* Purple/Violet */
    --secondary-color: #e91e63; /* Pink/Magenta */
    --text-dark: #333;
    --text-light: #fff;
    --bg-dark: #0f0a1f; /* Dark background */
    --link-blue: #4a90e2;
    --green-up: #27ae60;
    --red-down: #e74c3c;
}

body {
    background-color: #f5f5fd;
    color: #31353b;
    font-family: 'Inter', sans-serif; /* Applied Inter font */
}

/* ------------------------------------- */
/* 1. Header Styling */
/* ------------------------------------- */
header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.navbar-nav {
    gap: 10px;
}

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

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

.nav-menu {
    background: linear-gradient(to bottom, #f8f9ff 0%, #dbdcf7 100%);
    padding: 13px 16px;
    border-radius: 36px;
    border: 1px solid white;
    box-shadow: 0px 2px 5px #00000042;
}

.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/#074da2+2,197cf6+100 */
	background: linear-gradient(to right, #074da2 2%,#197cf6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: var(--text-light);
    border: none;
    padding: 8px 20px;
    border-radius: 25px;
    transition: background-color 0.3s;
}

.btn-signup:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#105ab4+4,3389f2+100 */
	background: linear-gradient(to right, #105ab4 4%,#3389f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color:white;
}

/* ------------------------------------- */
/* 2. Hero Section Styling */
/* ------------------------------------- */
.hero-section {
    padding-bottom: 5rem !important;
    overflow: hidden;
    background: url(images/banner-bg.png) no-repeat center;
    background-size: cover;
}

.hero-title {
    font-size: 3.5rem;
    color: var(--text-light);
    line-height: 1.1;
    margin-bottom: 1rem;
    /* 1. Define your specific gradient colors and direction */
    background-image: linear-gradient(to right, #c1105f 0%, #0260d4 100%); 
    /* 2. Clip the background (the gradient) to the text shape */
    -webkit-background-clip: text;
    background-clip: text; /* Standard property for compatibility */
    /* 3. Make the text itself transparent to reveal the gradient underneath */
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent; /* Standard property for compatibility */
    /* Optional: Ensure text is bold for maximum visual impact of the gradient */
    font-weight: 700; 
    /* Optional: Fallback color for browsers that don't support text clipping */
    color: #0260d4; 
}

.hero-subtitle {
    font-size: 1.6rem;
    opacity: 1;
    margin-bottom: 2rem;
    font-weight: 400;
}

.btn-big {
    font-size: 20px;
    font-weight: 400;
    padding: 15px 35px;
    border-radius: 60px;
}

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

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

/* --- Crypto Price Blocks Animation (Right Column, Floating) --- */
@keyframes scrollCrypto {
    0% { transform: translateY(-50%) translateY(0); }
    50% { transform: translateY(-50%) translateY(-10px); }
    100% { transform: translateY(-50%) translateY(0); }
}

.crypto-blocks-animation {
    position: relative;
    top: 50%;
    right: 0%; 
    z-index: 20; 
    animation: scrollCrypto 15s ease-in-out infinite; 
}

.crypto-block {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 0px;
    border-radius: 60px;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    width: 250px;
    position: absolute;
    animation: slideIn 1sease-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
}

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

#btc-block {
    top: -600px;
    left: 50px;
}

#eth-block {
    top: -450px;
    left: -40px;
    animation-delay: 0.15s;
 }
#bnb-block {
    top: -300px;
    left: -10px;
    animation-delay: 0.3s;
}
#ltc-block {
    top: -150px;
    left: 160px;
    animation-delay: 0.45s;
}

.text-success {
    --bs-text-opacity: 1;
    color: rgb(112 195 156) !important;
}

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

.crypto-block .icon {
    font-size: 1.5rem;
    margin-right: 10px;
    color: var(--link-blue);
    background: #ffffff;
    padding: 10px;
    border-radius: 100%;
    border: 6px solid #44a7fb45;
    margin-left: -30px;
    position: absolute;
}

.price-info .symbol-usd {
    font-size: 0.75rem;
    opacity: 0.7;
}

.price-info .price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

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

.text-success .fa-arrow-up {
    color: var(--green-up);
}

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

/* Stats Cards */
.stats-row {
    margin-left: 0;
    max-width: 600px;
}

.stat-card {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    border: 1px solid #0000001c;
    transition: all 0.3s;
    box-shadow: 0px 0px 0px 6px white;
    margin-bottom: 10px;
    margin-right:30px;
}

.stat-card:hover {
    border-color: var(--secondary-color);
     box-shadow: 0px 0px 0px 6px white;
}

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

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

.stat-label {
    font-size: 18px;
}

/* Strategic Capital Section Header (Used in Hero and Plans) */
.sub-heading {
    font-size: 48px;
    font-weight: 300;
    color: #31353b;
    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;
    margin-top: -160px;
}

/* ------------------------------------- */
/* 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 {
    padding: 60px 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#170f33+0,312d57+100 */
	background: linear-gradient(to bottom, #170f33 0%,#312d57 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.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 */
    }
}

/* Investment Plan Card Styling */
.plan-card {

    border-radius: 15px;
    padding: 15px;
    color: #fff;
    text-align: center;
    height: 100%;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    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;

}

.plan-header {
    margin-bottom: 20px;
}

.plan-percentage {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1;
}

.plan-percentage span {font-size:2.5rem;}

.plan-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
}

.plan-buttons .btn {
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none; /* Remove default button border */
}

.plan-buttons .btn-secondary {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cd2e88+0,2779f3+100 */
	background: linear-gradient(to right, #cd2e88 0%,#2779f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #fff;
    border-radius:0px 36px 36px 0px;
    margin-left:-44px;
    
}

.plan-buttons .btn-primary {
    background-color: #fff; /* White button */
    color: #c6105d; /* Gradient end color */
}

.plan-details {
    background-color: #5c0192;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    margin-top: 0px;
    padding-right:40px;
    position: relative; 
    overflow: hidden;
}

.detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

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

.detail-item i {
    font-size: 1.1rem;
    margin-right: 10px;
    color: #fff; /* White icons */
    min-width: 20px; /* Align text */
}

.detail-item span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7); /* Lighter text for labels */
    flex-grow: 1; /* Allow span to take available space */
    margin-left:5px;
}

.detail-item strong {
    font-size: 0.9rem;
    font-weight: 700;
    display: block;
    color:white;
}

/* 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: #201446;
    border:0px;
    color: var(--text-light);
    height: 50px;
    padding-right: 15px !important;
    border-radius: 10px;
}

.form-select option {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

.form-select-f13583-arrow {
    /* Sets the pink/red background image for the arrow */
    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='%23f13583' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    
    /* Optional: Change the border color on focus to match the arrow color */
    /* This makes the select input look cohesive when active */
    &:focus {
        border-color: #f13583;
        box-shadow: 0 0 0 0.25rem rgba(241, 53, 131, 0.25); /* 25% opacity of the color */
    }
}

/* 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: linear-gradient(to right, #5f0191 0%, #c6105d 100%);
    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: 24px;
    font-weight: 900;
    line-height: 28px;
}

.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;
    min-width: 54px;
}

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


/* --- 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: 500px; /* Set a height for the placeholder */
}

.graphic-placeholder {
    text-align: center;
    font-size: 1.2rem;
}

/* --- TRUST SECTION (Bottom) --- */
.trust-section {
border: 4px solid transparent;
    background-image: linear-gradient(to bottom, #170f33 0%, #322e59 100%), /* Card Background (on top layer) */ linear-gradient(to bottom, #570095 0%, #2c295e 100%);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-size: cover;
    padding: 50px 30px;
    border-radius: 18px;
}

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

.trust-title {
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
}

.trust-subtitle {
    font-size: 36px;
    font-weight: 400;
    color: white;
    text-transform:none;
}


.trust-title span {
	color:#1776eb;
}

.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;
    text-transform:uppercase;
}

.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;
}

.feature-card {
	background-color: var(--color-white);
    padding: 0px;
    border-radius: 10px;
    text-align: left;
    transition: transform 0.3sease, box-shadow 0.3sease;
}

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

.card-icon-container img {
    max-width: 70%; /* Adjust image size within container */
    max-height: 70%;
    object-fit: contain;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
}

.feature-card p {
    line-height: 1.7;
}

/* --- ACTIVITY SECTION --- */
.activity-section {
    padding: 100px 5%;
    background-color: var(--color-dark-bg); /* Use the primary dark background */
}

.activity-container {
    display: flex;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;

}

/* --- Vertical Sidebar Tabs --- */
.activity-sidebar-tabs {
    flex-shrink: 0;
    width: 80px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    border-radius: 10px 0 0 10px;
    padding: 20px 0px;
    max-height: 600px;
}

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

.activity-tab {
    writing-mode: vertical-rl; /* Rotate text */
    text-orientation: mixed;
    padding: 30px 10px;
    flex-grow: 1;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff;
    border: none;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

/* Styling for the specific tab states (matching image) */
.activity-tab[data-tab-target="deposits"] {
   background: #201446;
    border-radius: 10px 0 0 0;
}

.activity-tab[data-tab-target="finance"] {
    background: #201446;
    border-radius: 0 0 0 0px;
}


.activity-tab[data-tab-target="affiliates"] {
    background: #201446;
    border-radius: 0 0 0 10px;
}

.activity-tab[data-tab-target="payouts"] {
    background: #201446;
    border-radius: 0 0 0 10px;
}


.activity-tab.active {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) inset;
    filter: brightness(1.2);
    background: linear-gradient(to right, #191970 0%, #8c087a 100%);
}

.graphic-placeholder img {max-width:100%;}

/* --- Content Panel --- */
.activity-content-panel {
    flex-grow: 1;
    background: linear-gradient(to bottom, #d01258 0%, #570095 100%);
    border-radius: 16px;
    padding: 20px 0px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.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 */


.feature-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
}

.icon-circle-affiliate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.icon-circle-affiliate img {
    object-fit: contain;
}

.feature-item h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #364eac;
    line-height: 1.3;
    text-align: center;
    margin-left: 15px;
}

.affiliate-illustration {
    position: relative; /* For floating elements */
    grid-area: central; /* Placed in the central grid area */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Ensure illustration is above grid but below header */
}

.affiliate-illustration img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 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;
}

.affiliates-grid {
	 grid-template-columns: repeat(3, 1fr);
}

.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;
}

.affiliates-grid .partner-card {
	text-align:center;
	display:block;

}

.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-description h3 {
    font-size: 1.65rem;
    font-weight: 500;
    color: #b80e64;
    }


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


    
    /* --- CURRENCY SECTION --- */
.currency-section {
    background-color: #e8e6fe;
    padding: 30px 0%;
}

.currency-grid {
    display: grid;
    /* 8 columns shown in the image */
    grid-template-columns: repeat(8, 1fr); 
    gap: 15px;
    margin: 0 auto;
}

.currency-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-white);
    font-weight: 600;
    text-align: center;
    
    /* Gradient from Purple to Pink/Red, as seen in the image */
    background: linear-gradient(135deg, #4d1c7f 0%, #f13583 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.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;
}

.subpage {
	background: #e3e7f4 url(images/security-bg.png) no-repeat center top;
	background-size:cover;
	padding-bottom:40px;
}

/* --- 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;
}

.faq-banner-section {
    /* Use a dark background similar to your hero/activity sections */
    background: linear-gradient(90deg, #1f0d3a 0%, #3a1f4d 100%);
    padding: 100px 0 50px;
    color: var(--color-white);
}

.banner-title {
    font-size: 3.5rem;
    font-weight: 800;
    background-image: linear-gradient(to right, #f33c8d 0%, #126ad7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    text-transform: uppercase;
}

.banner-subtitle {
    font-size: 1.1rem;
    color: #ccc;
    text-transform: uppercase;
}

.faq-content-section {
    background-color: var(--color-dark-bg, #0d001a);
    color: var(--color-off-white, #f5f5f5);
}

.faq-cate {
    color: var(--color-neon-blue, #3e50f5);
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.faq-title-main {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.faq-description {
    color: #a0a0a0;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Bootstrap Tab Overrides --- */
.faq-tabs {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin: 0 auto 40px;
}

.faq-tabs .nav-link {
    background-color: transparent;
    color: #a0a0a0;
    border: none;
    padding: 15px 20px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0;
    transition: all 0.3s ease;
}

.faq-tabs .nav-link:hover {
    color: var(--color-neon-pink, #f13583);
}

.faq-tabs .nav-link.active {
    color: var(--color-neon-pink, #f13583) !important;
    border-bottom: 3px solid var(--color-neon-pink, #f13583) !important;
    background-color: transparent !important;
}

/* --- Bootstrap Accordion Overrides --- */

/* Individual Item Styling */
.accordion-item {
    background-color: var(--color-dark-panel, #140828);
    border: none;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Header (Question) Styling */
.accordion-button {
    background-color: var(--color-dark-panel) !important;
    color: var(--color-off-white) !important;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 20px 25px;
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

/* Hover/Active state for questions */
.accordion-button:not(.collapsed) {
    color: var(--color-neon-pink) !important;
    background-color: #1a0a33 !important; /* Slightly lighter dark color */
    border-bottom: none;
}

/* Body (Answer) Styling */
.accordion-body {
    background-color: var(--color-dark-bg, #0d001a);
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* --- Bootstrap Accordion Overrides (Arrow/Icon Styles) --- */

/* Style the Bootstrap arrow icon (Collapsed State: WHITE) */
.accordion-button::after {
    /* Set fill to white (%23fff) and remove the filter */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    
    /* Ensure no unwanted coloring/filtering is applied */
    filter: none !important;
}

/* Style the arrow when the accordion is open (Expanded State: WHITE) */
.accordion-button:not(.collapsed)::after {
    /* Set fill to white (%23fff) to override the pink color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}
/* --- FOOTER SECTION --- */
.main-footer {
    /* Light purple background from the image */
    background-color:#e8e6fe; 
    padding: 40px 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 */
}

/* --- Common Column Styles --- */
.footer-column h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #5a0193;
    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 .logo-icon {
    width: auto;
    /* You might need special CSS to handle the coloring/gradient of the logo image */
}



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

}


/* --- SUPPORT BANNER SECTION (from previous design) --- */
.support-banner-section {
    background: linear-gradient(90deg, #1f0d3a 0%, #3a1f4d 100%);
    padding: 100px 0 50px;
    color: var(--color-white, #ffffff);
}
.support-banner-section .banner-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-neon-pink, #f13583);
}

/* --- SUPPORT CONTENT SECTION (from previous design) --- */
.support-content-section {
    background: #170f33 url(images/bg-about.png) no-repeat center;
    background-size: cover;
    color:white;
}

/* --- 1. Custom Title Block Styles (NEW) --- */
.styled-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-transform: uppercase;
}
.title-divider {
    height: 2px;
    width: 50px;
    background: linear-gradient(90deg, transparent, var(--color-neon-blue, #3e50f5));
}
.title-divider.right {
    background: linear-gradient(90deg, var(--color-neon-blue, #3e50f5), transparent);
}
.title-text {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
}
.title-text .part-yellow {
    color: var(--color-neon-pink, #f13583);
}
.title-text .part-white {
    color: var(--color-off-white, #f5f5f5);
}

/* --- 2. Form Card Styles (Adapted from previous design) --- */
.contact-form-card {
     border: 4px solid transparent;
    background-image: linear-gradient(to bottom, #170f33 0%, #322e59 100%), /* Card Background (on top layer) */ linear-gradient(to bottom, #570095 0%, #2c295e 100%);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-size: cover;
}


/* Form inputs for Smarty/Bootstrap */
.form-control-dark {
    background-color: var(--color-dark-bg, #0d001a) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white!important;
    padding: 10px 15px !important;
    height: auto !important;
}

.form-control-dark:focus {
    border-color: var(--color-neon-blue, #3e50f5) !important;
    box-shadow: 0 0 0 0.25rem rgba(62, 80, 245, 0.25) !important;
}

/* Text for logged-in user name/email */
.form-control-plaintext {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Submit Button (NEW/UPDATED) */
.btn-gold {
    padding: 12px 40px;
    font-weight: 600;
    border-radius: 5px;
    color: var(--color-white);
    /* Neon Blue Gradient for submit button */
    background: linear-gradient(90deg, var(--color-neon-blue, #3e50f5) 0%, #6a5acd 100%); 
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    color: var(--color-white);
}

/* Success Message Styling (NEW) */
.support-success-alert {
    background-color: var(--color-dark-panel, #140828);
    border-color: var(--color-neon-blue, #3e50f5);
    color: var(--color-white);
    padding: 30px;
    border-radius: 10px;
}

.support-success-alert .alert-heading {
    color: var(--color-neon-pink, #f13583);
    font-weight: 700;
}

/* --- 3. Sidebar Styles (Adapted from previous design) --- */
.contact-info-card {
    background-color: var(--color-dark-panel, #140828);
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    position: sticky; 
    top: 20px;
}

.contact-info-card .info-title {
    color: var(--color-neon-blue, #3e50f5);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.contact-info-card a {
    color: #a0a0a0;
    text-decoration: underline;
}

.contact-info-card a:hover {
    color: var(--color-neon-pink);
}

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

.info-item i {
    font-size: 1.8rem;
    color: var(--color-neon-pink, #f13583);
    flex-shrink: 0;
    margin-top: 5px;
}

.info-details h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 2px;
}
.info-details p, .info-details a {
    font-size: 0.9rem;
    color: #a0a0a0;
    line-height: 1.5;
    margin: 0;
}

/* --- Support Image Spot Styles (NEW) --- */

/* Ensures the image spot fits well in the card and has some separation */
.support-image-spot {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Separator line */
    text-align: center; /* Center the image */
}

/* Image styling (Placeholder example to ensure it looks good) */
.support-image-spot .support-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: adds rounded corners to the image */
    opacity: 0.9; /* Optional: subtle effect */
    transition: opacity 0.3s ease;
}

/* You might want to remove the sticky positioning on smaller screens */
@media (max-width: 991px) {
    .contact-info-card {
        position: static;
        top: auto;
    }
}

/* --- 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;

}
.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;
}

.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: 400;
    transition: color 0.2s ease;
    color:#3e3743;
    text-transform:uppercase;
}

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

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

/*Subpages*/

a {
      text-decoration:none;
    color:#1686f7;  
    
}

.forgot-link {
    text-decoration:none;
    color:#1686f7;
    
}

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

.signup-form {
	border: 4px solid transparent;
    background-image: linear-gradient(to bottom, #170f33 0%, #322e59 100%), /* Card Background (on top layer) */ linear-gradient(to bottom, #570095 0%, #2c295e 100%);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-size: cover;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid white;
    opacity: .25;
    background: white;
}


.login-card h5 {
    color: white;
    background: linear-gradient(to right, #5f0191 0%, #c6105d 100%);
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 18px;
}

.card-title {
	text-transform: uppercase;
    font-weight: 300;
}


.card-title b {font-weight:700;}



/* --- 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(3, 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 {
        position: static; transform: none; animation: 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%;
    }
}



@media (min-width: 992px) {
    .carousel-card-wrap { max-width: 420px; }
}

/* Multi-item custom slider fix */
#investmentPlansCarousel .carousel-inner {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.45s ease;
}

#investmentPlansCarousel .carousel-item {
    flex: 0 0 auto;
    width: 100%;
}

.carousel-card-wrap {
    display: block;
}



/* ======================================================= */
/* CSS-ONLY REDIRECT SPINNER */
/* ======================================================= */

/* Контейнер-оверлей, который блокирует весь экран и центрирует спиннер */
#login-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Фон для оверлея (полупрозрачный черный) */
    background-color: #5c008e; 
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Гарантирует, что он поверх всех элементов */
    display: none; /* Скрыт по умолчанию */
}

/* Класс, который делает спиннер видимым при активации */
#login-spinner-overlay.active {
    display: flex;
}

/* Стили самого спиннера */
.colorful-spinner {
    width: 70px; /* Размер спиннера */
    height: 70px;
    border-radius: 50%;
    /* Три слоя рамки для трех цветов */
    border: 7px solid transparent; 
    border-top-color: #5f0191; /* Пурпурный */
    border-right-color: #c6105d; /* Розово-красный */
    border-bottom-color: #197cf6; /* Синий */
    
    animation: rotate-spinner 1s linear infinite;
    /* Увеличение тени для 3D/неонового эффекта */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); 
}

/* Анимация вращения */
@keyframes rotate-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* ======================================================= */
/* CryptoFlex Custom Colors & Variables */
/* ======================================================= */
:root {
    /* Primary Colors */
    --cf-gold: #FFD700;
    --cf-dark-bg: #1A1A1A;
    --cf-card-bg: #222222;
    
    /* Accent Colors (from Spinner) */
    --cf-purple-accent: #5f0191;
    --cf-crimson-accent: #c6105d;
    --cf-blue-accent: #197cf6;
    
    /* Bootstrap overrides for consistency */
    --bs-primary-rgb: 255, 215, 0; /* Gold */
}

/* Helper Classes */
.text-primary-gold { color: var(--cf-gold) !important; }
.btn-primary-gold { 
    background-color: var(--cf-gold);
    border-color: var(--cf-gold);
    color: #1A1A1A; /* Dark text on gold */
}
.text-accent-purple { color: var(--cf-purple-accent) !important; }
.text-accent-crimson { color: var(--cf-crimson-accent) !important; }
.text-accent-blue { color: var(--cf-blue-accent) !important; }


/* ======================================================= */
/* SECTION TITLE STYLE */
/* ======================================================= */
.section-title-wrapper {
    position: relative;
    padding-bottom: 10px;
}

.crypto-title {
    font-size: 2.5rem; /* Large font size */
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 1px;
}

.crypto-title .main-word {
    opacity: 0.7;
    margin-right: 5px;
}

.title-accent-line {
    height: 4px;
    width: 150px; /* Line length */
    background: linear-gradient(90deg, var(--cf-gold) 0%, var(--cf-crimson-accent) 100%);
    margin-top: 5px;
    border-radius: 2px;
}

/* ======================================================= */
/* NOTICES & WARNINGS STYLE */
/* ======================================================= */
.card-notice {
    background-color: var(--cf-card-bg);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-left: 5px solid var(--cf-gold);
}

.notice-item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.notice-item:last-child {
    border-bottom: none;
}
.dismiss-btn {
    color: #fff !important;
    border-color: #6c757d;
    transition: all 0.3s;
}
.dismiss-btn:hover {
    background-color: var(--cf-crimson-accent);
    border-color: var(--cf-crimson-accent);
    color: #fff !important;
}

/* Custom Warning Alerts */
.alert-crypto-warning {
    background-color: #382d00; /* Darker yellow/gold background */
    color: #ffd700;
    border: 1px solid #ffd700;
}
.alert-crypto-danger {
    background-color: #400d1f; /* Darker crimson background */
    color: #c6105d;
    border: 1px solid #c6105d;
}

/* ======================================================= */
/* METRIC CARDS (UNIQUE CRYPTO STYLE) */
/* ======================================================= */
.metric-card {
    background-color: var(--cf-card-bg);
    border: 1px solid var(--cf-card-bg); /* Base border */
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
}

/* Unique Icon Backgrounds */
.stat-icon {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* Icon color */
}
.icon-bg-purple { background-color: var(--cf-purple-accent); }
.icon-bg-crimson { background-color: var(--cf-crimson-accent); }
.icon-bg-blue { background-color: var(--cf-blue-accent); }

/* Card Border/Glow Effects on Hover (The key unique feature) */
.card-glow-purple:hover { 
    border-color: var(--cf-purple-accent);
    box-shadow: 0 0 20px rgba(95, 1, 145, 0.5); /* Glowing effect */
}
.card-glow-crimson:hover { 
    border-color: var(--cf-crimson-accent);
    box-shadow: 0 0 20px rgba(198, 16, 93, 0.5); 
}
.card-glow-blue:hover { 
    border-color: var(--cf-blue-accent);
    box-shadow: 0 0 20px rgba(25, 124, 246, 0.5); 
}

/* Balance Breakdown Integration Style */
.balance-breakdown {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
    margin-top: 10px !important;
}
.text-light-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}


/* ======================================================= */
/* DETAIL AND TRANSACTION CARDS */
/* ======================================================= */
.detail-card,
.transaction-card {
    background-color: var(--cf-card-bg);
    border: none;
    transition: box-shadow 0.3s;
}

.detail-card .detail-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.detail-card .detail-list li:last-child {
    border-bottom: none !important;
}

/* Referral Link input */
.form-control-dark-flat {
    background-color: #1A1A1A;
    border: 1px solid #333;
    color: #fff;
}

.copy-btn {
    background-color: var(--cf-gold);
    border-color: var(--cf-gold);
    color: #1A1A1A;
    font-weight: bold;
}
.copy-btn:hover {
    background-color: var(--cf-gold);
    filter: brightness(1.1);
}

/* Transaction Card Hover Effect */
.transaction-card:hover {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2) !important;
}

/* Font size adjustments for large numbers */
.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
}
.stat-label {
    font-weight: 500;
}

/* ======================================================= */
/* CRYPTO BALANCES CARD STYLE (New Section) */
/* ======================================================= */
.crypto-balances-card {
    /* Фоновый цвет карты */
    background-color: var(--cf-card-bg);
    /* Акцентная рамка, соответствующая цветовой схеме */
    border: 1px solid var(--cf-blue-accent);
    /* Легкое свечение */
    box-shadow: 0 0 15px rgba(25, 124, 246, 0.2);
}

.crypto-balance-item {
    /* Более темный, контрастный фон для каждого элемента */
    background-color: #2c2c2c; 
    border-color: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s;
    /* Стили для текста и цифр */
    font-size: 0.95rem;
}

.crypto-balance-item:hover {
    /* Эффект при наведении */
    background-color: #333333;
    border-color: var(--cf-gold) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}