.crypto-hero-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: linear-gradient(135deg, #f7f9ff 0%, #eef2ff 50%, #ffffff 100%);
    border-bottom-left-radius: 180px;
    border-top-right-radius: 180px;
}

/* Curved Gradient Shapes */
.crypto-hero-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    background: rgba(108, 92, 231, 0.08);
    border-radius: 50%;
    top: -250px;
    right: -180px;
    z-index: 1;
}

.crypto-hero-section::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(0, 191, 255, 0.06);
    border-radius: 50%;
    bottom: -180px;
    left: -120px;
    z-index: 1;
}

.crypto-content,
.crypto-image {
    position: relative;
    z-index: 2;
}

.crypto-content h1 {
    font-size: 35px;
    line-height: 1.15;
    font-weight: 600;
    color: #111827;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.crypto-content p {
    color: #5b6475;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 25px;
    max-width: 95%;
}

.crypto-image {
    position: relative;
}

.crypto-image img {
    width: 100%;
    max-width: 600px;
    border-radius: 30px;
    animation: floatImage 5s ease-in-out infinite;
}

/* Soft Glow Behind Image */
.crypto-image::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(
        circle,
        rgba(108, 92, 231, 0.18) 0%,
        transparent 70%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Floating Animation */
@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Responsive */
@media (max-width: 991px) {
    .crypto-hero-section {
        padding: 80px 20px;
        border-bottom-left-radius: 90px;
        border-top-right-radius: 90px;
    }

    .crypto-content {
        text-align: center;
        margin-bottom: 50px;
    }

    .crypto-content h1 {
        font-size: 28px;
    }

    .crypto-content p {
        max-width: 100%;
        font-size: 16px;
    }

    .crypto-image img {
        max-width: 420px;
    }
}

@media (max-width: 576px) {
    .crypto-content h1 {
        font-size: 30px;
        line-height: 1.3;
    }

    .crypto-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .crypto-hero-section {
        padding: 70px 15px;
        border-radius: 50px;
    }
}
/* What Is Crypto Exchange Development? */
/* Crypto Components Section Styling */
.crypto-components-section {
    background: radial-gradient(circle at center, #102a6b 0%, #061033 100%);
    padding: 80px 0;
    color: #ffffff;
    font-family: "Poppins", sans-serif; /* Ya jo aapki site ki main font ho */
}

.crypto-components-section .section-title {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 20px;
}

.crypto-components-section .section-subtitle {
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #cbd5e1;
    opacity: 0.9;
}

/* Glassmorphism Card Style matching reference image */
.component-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 102, 255, 0.25);
    border-radius: 12px;
    padding: 40px 25px;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Hover Effect for Premium Feel */
.component-card:hover {
    border-color: rgba(0, 183, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.2);
    transform: translateY(-2px);
}

/* Large Transparent Numbers background */
.card-number {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 4.5rem;
    font-weight: 800;
    color: rgba(0, 149, 255, 0.12);
    line-height: 1;
    user-select: none;
    z-index: 1;
}

/* Card Content Text */
.card-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    position: relative;
    z-index: 2;
    line-height: 1.4;
    text-align: center;
}

/* Bottom Brand Text styling */
.brand-footer {
    opacity: 0.5;
}

.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00b7ff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .crypto-components-section .section-title {
        font-size: 1.8rem;
    }
    .component-card {
        min-height: 130px;
        padding: 30px 15px;
    }
    .card-number {
        font-size: 3.5rem;
    }
}
/* Crypto Exchange Types Section Styling */
.crypto-types-section {
    background-color: #f8fafc; /* Light clean background like image */
    padding: 80px 0;
    font-family: 'Poppins', sans-serif;
}

.crypto-types-section .section-title {
    color: #1e3a3a; /* Dark teal/slate shade for heading */
    font-size: 2.3rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.crypto-types-section .section-subtitle {
    color: #475569;
    max-width: 750px;
    margin: 0 auto 50px auto;
    font-size: 1.05rem;
}

/* Custom Leaf/Capsule Card Design */
.exchange-leaf-card {
    background: #ffffff;
    border-radius: 40px 15px 40px 15px; /* Leaf pattern shape */
    display: flex;
    align-items: center;
    padding: 15px 25px 15px 0px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exchange-leaf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(44, 116, 114, 0.12);
}

/* Left Curved Teal Shape for Number */
.leaf-number {
    background: #2c7472; /* Image's exact green/teal color */
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    width: 65px;
    height: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px 0 40px 0; /* Creates the leaf dynamic edge */
    position: absolute;
    left: 0;
    top: 0;
}

/* Content Area Adjustment */
.leaf-content {
    padding-left: 85px; /* Spacing to avoid overlap with number block */
    padding-right: 60px; /* Spacing for right icon */
    flex-grow: 1;
}

.leaf-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e3a3a;
    margin-bottom: 5px;
}

.leaf-content p {
    font-size: 0.92rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Right Side Curved Icon Style */
.leaf-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #2c7472;
    color: #ffffff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px 0 40px 0; /* Reversed leaf corner on right side */
    font-size: 1.4rem;
}

/* Responsive Handling */
@media (max-width: 576px) {
    .exchange-leaf-card {
        flex-direction: column;
        padding: 80px 20px 70px 20px;
        border-radius: 25px;
        text-align: center;
    }
    .leaf-number {
        width: 100%;
        height: 50px;
        min-height: 50px;
        border-radius: 25px 25px 0 0;
    }
    .leaf-content {
        padding: 0;
    }
    .leaf-icon {
        width: 100%;
        height: 45px;
        border-radius: 0 0 25px 25px;
        left: 0;
    }
}

/* Unique Features Diagram Section - Breaking Regular Layout Grids */
.crypto-features-diagram-section {
    background-color: #0f172a; /* Pitch dark slate/black tone matching the image */
    padding: 100px 0 90px 0; /* Asymmetric vertical padding */
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    position: relative;
}

/* Fluid wide layout wrapper instead of standard fixed container */
.features-fluid-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.diagram-main-title {
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 400;
}

/* .diagram-main-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 650px;
    margin: 10px auto 0 auto;
} */

/* 3-Column Diagram Grid Layout */
.diagram-grid-container {
    display: grid;
    grid-template-columns: 1fr 380px 1fr;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
}

.diagram-spoke-col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Feature Blue Spoke Cards with Neon Glow Effect */
.feature-spoke-card {
    background: #0082c8; /* Exact vibrant blue from reference image */
    color: #ffffff;
    padding: 18px 25px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 130, 200, 0.4); /* Neon accent outer glow */
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.feature-spoke-card:hover {
    box-shadow: 0 0 25px rgba(0, 130, 200, 0.7);
    transform: scale(1.02);
}

.feature-spoke-card p {
    margin: 0;
    line-height: 1.3;
}

/* Center Technical Diagram Hub Frame */
.diagram-hub-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hub-outer-frame {
    border: 4px solid #7dd3fc; /* Light technical line frame */
    padding: 12px;
    position: relative;
    width: 100%;
    max-width: 360px;
}

/* Creating the tech-joints notches on corners */
.hub-outer-frame::before, .hub-outer-frame::after {
    content: '';
    position: absolute;
    background: #0f172a;
}
/* Masking lines to match the mechanical diagram joints */
.hub-outer-frame::before { top: -4px; bottom: -4px; left: 40px; right: 40px; }
.hub-outer-frame::after { left: -4px; right: -4px; top: 40px; bottom: 40px; }

.hub-inner-content {
    background: transparent;
    border: 2px solid #7dd3fc;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.hub-inner-content h3 {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 1px;
}

.hub-inner-content span {
    color: #94a3b8;
    font-size: 1.1rem;
    display: block;
    margin: 5px 0;
}

.hub-inner-content h4 {
    color: #7dd3fc;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

/* Footer note style */
.diagram-footer-note p {
    color: #e2e8f0;
    font-size: 1.2rem;
    font-weight: 500;
    font-style: italic;
    opacity: 0.9;
}

/* Responsive Overrides - Turning Diagram into Alternating List for Mobile */
@media (max-width: 1200px) {
    .diagram-grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .diagram-hub-center {
        grid-row: 1; /* Hub goes to top on small screens */
    }
    
    .features-fluid-wrapper {
        padding: 0 20px;
    }
}

/* Security Hexagonal Section - Non-Standard Geometric Break */
.crypto-security-hex-section {
    background-color: #ffffff; /* Fresh contrast switch to light theme */
    padding: 80px 0 80px 0; /* Distinct asymmetrical padding size */
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

.security-fluid-box {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.hex-section-title {
    color: #1e1b4b; /* Deep Indigo/Purple tone for title */
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.hex-section-subtitle {
    color: #475569;
    font-size: 1.15rem;
    margin-top: 8px;
}

/* 3-Part Layout Frame: Left Stack | Center Hex | Right Stack */
.hex-diagram-wrapper {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: 15px;
    margin-top: 60px;
}

.hex-side-ribbons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Custom CSS Polygon Ribbon Shapes (Custom Edge Cuts) */
.security-ribbon-card {
    background: #1e1045; /* Dark Deep Indigo/Purple matching reference */
    color: #ffffff;
    padding: 18px 30px;
    min-height: 70px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Left Stack Cuts: Angled inward at right tip */
.left-ribbons-stack .security-ribbon-card {
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    padding-right: 45px;
    text-align: left;
}

/* Right Stack Cuts: Angled inward at left tip */
.right-ribbons-stack .security-ribbon-card {
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
    padding-left: 45px;
    text-align: left;
}

/* Visual Micro-movement on hover */
.left-ribbons-stack .security-ribbon-card:hover {
    transform: translateX(8px);
    background: #2e1a66;
}

.right-ribbons-stack .security-ribbon-card:hover {
    transform: translateX(-8px);
    background: #2e1a66;
}

.ribbon-num {
    font-size: 1.2rem;
    font-weight: 700;
    color: #a78bfa; /* Lavender accent for counting numbers */
    margin-right: 15px;
}

.right-ribbons-stack .ribbon-num {
    margin-left: 10px;
    margin-right: 15px;
}

.ribbon-txt {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Center Technical Hexagon Structure */
.hex-center-shield-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dotted-hex-border {
    padding: 15px;
    border: 2px dashed #38bdf8; /* Light blue tech dashed circle/hex frame */
    border-radius: 50%;
    animation: rotateDashed 25s linear infinite;
}

.inner-blue-hex {
    width: 190px;
    height: 210px;
    background: radial-gradient(circle, #38bdf8 0%, #0284c7 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: counterRotate 25s linear infinite; /* Keeps icon upright */
}

.security-core-icon {
    font-size: 4rem;
    color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Radar Pulse Ripple Effect for Tech Depth */
.radar-glow-pulse {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: pulseGlow 2s infinite ease-in-out;
    z-index: -1;
}

.hex-footer-break .footer-highlight-text {
    color: #334155;
    font-size: 1.25rem;
    font-weight: 600;
    max-width: 800px;
    margin: 30px auto 0 auto;
}

/* Animations */
@keyframes rotateDashed {
    100% { transform: rotate(360deg); }
}
@keyframes counterRotate {
    100% { transform: rotate(-360deg); }
}
@keyframes pulseGlow {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Responsive Structural Collapse */
@media (max-width: 992px) {
    .hex-diagram-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hex-center-shield-box {
        grid-row: 1;
    }
    .left-ribbons-stack .security-ribbon-card, 
    .right-ribbons-stack .security-ribbon-card {
        clip-path: none; /* Mobile flat layout for better text fit */
        border-radius: 12px;
        padding: 20px;
    }
}

/* Tech Stack Canvas Section - Custom Light Tint Break */
.crypto-tech-canvas-section {
    background-color: #e2f1f9; /* Soft, premium sky-blue tone matching reference image */
    padding: 80px 0 80px 0; /* Asymmetric vertical padding to avoid scale alignment */
    font-family: 'Poppins', sans-serif;
    position: relative;
}

/* Wide dynamic wrapper for open-air layout feel */
.tech-canvas-wrapper {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 25px;
}

.tech-canvas-title {
    color: #0c1e36; /* Midnight blue shade */
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.tech-canvas-subtitle {
    color: #4a5d78;
    font-size: 1.15rem;
    max-width: 700px;
    margin: 12px auto 0 auto;
}

/* Dynamic Grid utilizing flexible wraps instead of rigid Bootstrap columns */
.tech-flex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Minimalist Clean Cards from Reference Image */
.tech-canvas-card {
    background: #cbe3f2; /* Darker tint of blue for depth contrast */
    border-radius: 18px;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.tech-canvas-card:hover {
    transform: translateY(-5px);
    background: #b6d5eb;
    box-shadow: 0 10px 25px rgba(12, 30, 54, 0.08);
}

/* Icon Design with exact color matching rules */
.tech-icon-wrapper {
    font-size: 3.5rem;
    color: #2c4465; /* Deep slate blue for iconography */
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.tech-canvas-card:hover .tech-icon-wrapper {
    transform: scale(1.1);
}

.tech-canvas-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0c1e36;
    margin: 0;
    line-height: 1.4;
}

/* Special Treatment for 7th Element to break symmetry entirely */
.highlight-tech-card {
    background: #b6d5eb;
    grid-column: span 1;
}

/* Bottom Isolated Banner Text Styling */
.tech-outro-banner {
    margin-top: 70px;
    background: rgba(255, 255, 255, 0.5);
    padding: 20px 40px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.tech-outro-banner p {
    color: #2c4465;
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
}

/* Responsive Scaling Overrides */
@media (max-width: 992px) {
    .tech-canvas-title {
        font-size: 2rem;
    }
    .tech-outro-banner {
        width: 100%;
        border-radius: 15px;
    }
}

/* Supported Blockchain Mesh Layout - Asymmetric Canvas Styling */
.crypto-blockchain-mesh-section {
    background: linear-gradient(135deg, #f9f4f5 0%, #e2e8f0 100%); /* Clean cool slate-grey backdrop */
    padding: 120px 0;
    overflow: hidden;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

/* Fluid asymmetric sizing container */
.mesh-container-fluid {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 50px;
}

/* Content Box Overlap Feel */
.mesh-text-content-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 50px 40px;
    border-radius: 30px;
    box-shadow: -10px 15px 40px rgba(15, 23, 42, 0.04);
}

.mesh-title {
    color: #0f172a;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.25;
}

.mesh-desc {
    color: #475569;
    font-size: 1.1rem;
    margin-top: 15px;
}

/* Token Node Ring Area */
.blockchain-mesh-wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
}

/* Tech mesh background vectors */
.mesh-connections-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.mesh-connections-svg line {
    stroke: #94a3b8;
    stroke-width: 2;
    stroke-dasharray: 6 4; /* Dashed line effect like image */
    opacity: 0.7;
}

/* Dynamic 3D Circles mapping for Logos */
.token-node {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    border: 5px solid #cccccc; /* Dynamic borders colored inline via html */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 5;
    padding: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.token-node img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
}

/* Absolute Positions based on Circular Coordinates matching your attachment */
.node-top           { top: 10px;  left: 210px; }
.node-top-right     { top: 75px;  left: 360px; }
.node-bottom-right  { top: 210px; left: 410px; }
.node-bottom        { top: 350px; left: 350px; }
.node-center-bottom { top: 410px; left: 210px; }
.node-bottom-left   { top: 350px; left: 70px;  }
.node-top-left      { top: 210px; left: 10px;  }
.node-center-left   { top: 75px;  left: 60px;  }

/* Hover Physics */
.token-node:hover {
    transform: scale(1.18) rotate(8deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
    background: #f8fafc;
    cursor: pointer;
}

/* Custom Standard Badges Token Pills */
.badge-pill {
    background: #0f172a;
    color: #ffffff;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 30px;
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.networks-list-mini {
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Mobile & Tablet Adaptation to safely collapse the interconnected lines */
@media (max-width: 1200px) {
    .mesh-container-fluid { padding: 0 20px; }
    .mesh-title { font-size: 2rem; }
}

@media (max-width: 768px) {
    .reverse-mobile-row {
        flex-direction: column-reverse !important;
    }
    .blockchain-mesh-wrapper {
        width: 320px;
        height: 320px;
        margin-top: 40px;
    }
    .token-node {
        width: 55px;
        height: 55px;
        border-width: 3px;
        padding: 8px;
    }
    /* Scaling positions down for smaller layout bounds */
    .node-top           { top: 5px;   left: 132px; }
    .node-top-right     { top: 45px;  left: 230px; }
    .node-bottom-right  { top: 132px; left: 260px; }
    .node-bottom        { top: 220px; left: 220px; }
    .node-center-bottom { top: 260px; left: 132px; }
    .node-bottom-left   { top: 220px; left: 45px;  }
    .node-top-left      { top: 132px; left: 5px;   }
    .node-center-left   { top: 45px;  left: 40px;  }
}

/* Use cases */
/* Section Container Styling */
.crypto-usecases-section {
    background-color: #f9fafb;
    padding: 64px 16px;
    font-family: system-ui, -apple-system, sans-serif;
}

.crypto-usecases-container {
    max-width: 1200px;
    margin: 0 auto;
}

.crypto-usecases-heading {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    color: #111827;
    margin-bottom: 48px;
}

/* Grid Wrapper */
.crypto-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

/* Base Card Styling */
.crypto-card {
    flex: 1 1 calc(25% - 24px);
    min-width: 250px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crypto-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.crypto-card-icon {
    margin-bottom: 16px;
}

.crypto-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
}

.crypto-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.6;
}

/* Specific Card Borders & Icon Colors (Matched with Image) */
.card-trading { border: 2px solid #fbbf24; }
.card-trading .crypto-card-icon { color: #f59e0b; }

.card-token { border: 2px solid #2dd4bf; }
.card-token .crypto-card-icon { color: #0d9488; }

.card-web3 { border: 2px solid #f97316; }
.card-web3 .crypto-card-icon { color: #ea580c; }

.card-enterprise { border: 2px solid #3b82f6; }
.card-enterprise .crypto-card-icon { color: #2563eb; }

.card-ui { border: 2px solid #ef4444; }
.card-ui .crypto-card-icon { color: #dc2626; }

.card-wallet { border: 2px solid #a855f7; }
.card-wallet .crypto-card-icon { color: #9333ea; }

.card-payments { border: 2px solid #22c55e; }
.card-payments .crypto-card-icon { color: #16a34a; }

/* Benefits */
/* =========================
   CRYPTO BENEFITS SECTION
========================= */

.crypto-benefits-section {
    background: #fefae0;
    position: relative;
    overflow: hidden;
}

.crypto-title {
    font-size: 42px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 15px;
}

.crypto-subtitle {
    max-width: 850px;
    margin: auto;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.8;
}

/* Grid Card */
.benefit-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 55px 20px 25px;
    text-align: center;
    transition: 0.4s ease;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

/* Top Label */
.step-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

/* Icon Circle */
.icon-circle {
    width: 90px;
    height: 90px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.icon-circle i {
    font-size: 34px;
}

/* Bottom Connector */
.icon-circle::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 32px;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: currentColor;
}

/* Text */
.benefit-card h3 {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    color: #1f2937;
    margin-top: 30px;
}

/* =========================
   COLOR VARIANTS
========================= */

.pink .step-label,
.pink .icon-circle {
    background-color: #ffe6f0;
    color: #ff4f8b;
    border-color: #ff4f8b;
}

.green .step-label,
.green .icon-circle {
    background-color: #e8fff3;
    color: #18b979;
    border-color: #18b979;
}

.orange .step-label,
.orange .icon-circle {
    background-color: #fff3e5;
    color: #f59e0b;
    border-color: #f59e0b;
}

.red .step-label,
.red .icon-circle {
    background-color: #ffeaea;
    color: #ef4444;
    border-color: #ef4444;
}

.blue .step-label,
.blue .icon-circle {
    background-color: #e8f4ff;
    color: #3b82f6;
    border-color: #3b82f6;
}

.purple .step-label,
.purple .icon-circle {
    background-color: #f3e8ff;
    color: #8b5cf6;
    border-color: #8b5cf6;
}

/* Fix label bg */
/* .step-label {
    color: #fff !important;
} */

/* =========================
   BOTTOM TEXT
========================= */

.crypto-bottom-text p {
    max-width: 900px;
    margin: auto;
    font-size: 17px;
    color: #4b5563;
    line-height: 1.9;
}

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

@media (max-width: 991px) {
    .crypto-title {
        font-size: 34px;
    }

    .benefit-card {
        padding: 50px 15px 22px;
    }
}

@media (max-width: 767px) {
    .crypto-title {
        font-size: 28px;
    }

    .crypto-subtitle,
    .crypto-bottom-text p {
        font-size: 15px;
    }

    .icon-circle {
        width: 75px;
        height: 75px;
    }

    .icon-circle i {
        font-size: 28px;
    }

    .benefit-card h3 {
        font-size: 14px;
    }
}

/* why choose */
/* Main Section Container with Background Patterns */
.digiature-why-choose-section {
    background-color: #021526;
    /* Deep blue gradient with layered radial spots for that glow effect */
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(243, 232, 201, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(3, 37, 65, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #021526 0%, #032541 100%);
    padding: 80px 20px;
    font-family: system-ui, -apple-system, sans-serif;
    color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

/* Abstract Top-Right Cyber Circles Pattern (Exactly like the reference image) */
.digiature-why-choose-section::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    /* Layered transparent borders to create the tech ripple effect */
    border: 2px solid rgba(243, 232, 201, 0.05);
    box-shadow: 
        0 0 0 30px rgba(243, 232, 201, 0.02),
        0 0 0 60px rgba(243, 232, 201, 0.01),
        0 0 0 90px rgba(243, 232, 201, 0.015),
        0 0 0 130px rgba(243, 232, 201, 0.005);
    pointer-events: none;
}

/* Subtle Tech Grid/Lines Pattern on the Left */
.digiature-why-choose-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
    pointer-events: none;
}

/* Container Wrapper to keep content above background elements */
.digiature-section-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures content stays on top of patterns */
}

/* Heading - Cream Color */
.digiature-main-heading {
    font-size: 34px;
    font-weight: 700;
    color: #f3e8c9; 
    margin-bottom: 18px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* Subheading/Intro Text */
.digiature-intro-text {
    font-size: 16.5px;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* List Wrapper */
.digiature-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

/* Individual Row Item with Soft Backdrop Blur */
.digiature-list-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1.5px solid rgba(243, 232, 201, 0.25); 
    border-radius: 30px; 
    padding: 16px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiature-list-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(243, 232, 201, 0.8); 
    box-shadow: 0 0 25px rgba(243, 232, 201, 0.12);
    transform: translateX(6px);
}

/* Icon Container */
.digiature-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    flex-shrink: 0;
}

/* Text Inside Row */
.digiature-item-text {
    font-size: 16.5px;
    font-weight: 500;
    color: #f8f9fa;
}

/* Footer / Outro Text */
.digiature-outro-text {
    font-size: 16px;
    color: #94a3b8;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 28px;
}

/* =========================================
   FUTURE CRYPTO SECTION - LIGHT THEME
========================================= */

.future-crypto-section {
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 30%),
        linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    position: relative;
    overflow: hidden;
    color: #0f172a;
    padding: 100px 0;
}

/* Grid Background */
.future-crypto-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.6;
}

/* =========================================
   HEADING
========================================= */

.future-heading {
    position: relative;
    z-index: 2;
}

.future-badge {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 22px;
    font-size: 15px;
}

.future-heading h2 {
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 22px;
    color: #0f172a;
    line-height: 1.2;
}

.future-heading p {
    max-width: 850px;
    margin: auto;
    font-size: 20px;
    line-height: 1.9;
    color: #475569;
}

/* =========================================
   LEFT SIDE
========================================= */

.future-left-content {
    position: relative;
    z-index: 2;
}

.future-glow-circle {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle,
            rgba(96,165,250,0.18),
            transparent 70%);
    top: -100px;
    left: -80px;
    border-radius: 50%;
}

.future-main-card {
    position: relative;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(59,130,246,0.08);
    backdrop-filter: blur(12px);
    border-radius: 32px;
    padding: 50px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(37,99,235,0.08);
}

/* Glow Border */
.future-main-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 32px;
    background: linear-gradient(
        135deg,
        rgba(59,130,246,0.35),
        rgba(255,255,255,0.2)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Icon */
.future-icon-box {
    width: 100px;
    height: 100px;
    border-radius: 28px;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    box-shadow: 0 20px 40px rgba(37,99,235,0.25);
}

.future-icon-box i {
    font-size: 46px;
    color: #fff;
}

.future-main-card h3 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 22px;
    color: #0f172a;
}

.future-main-card p {
    font-size: 19px;
    line-height: 1.9;
    color: #475569;
}

/* =========================================
   TIMELINE
========================================= */

.future-timeline {
    position: relative;
    z-index: 2;
    padding-left: 40px;
}

/* Vertical Line */
.future-timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #60a5fa,
        rgba(96,165,250,0.15)
    );
}

/* Item */
.future-item {
    position: relative;
    margin-bottom: 35px;
}

/* Dot */
.future-dot {
    position: absolute;
    left: -40px;
    top: 28px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3b82f6;
    border: 5px solid #eef5ff;
    box-shadow: 0 0 0 6px rgba(59,130,246,0.12);
}

/* Card */
.future-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(59,130,246,0.08);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 28px 30px;
    transition: 0.4s ease;
    box-shadow: 0 15px 35px rgba(37,99,235,0.06);
}

.future-card:hover {
    transform: translateX(10px);
    background: #ffffff;
    border-color: rgba(59,130,246,0.18);
    box-shadow: 0 18px 40px rgba(37,99,235,0.10);
}

/* Card Title */
.future-card h4 {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 12px;
    color: #0f172a;
}

/* Card Text */
.future-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: #52637c;
}

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

@media (max-width: 1199px) {

    .future-heading h2 {
        font-size: 44px;
    }

    .future-main-card h3 {
        font-size: 30px;
    }

    .future-card h4 {
        font-size: 22px;
    }
}

@media (max-width: 991px) {

    .future-crypto-section {
        padding: 70px 0;
    }

    .future-heading h2 {
        font-size: 36px;
    }

    .future-heading p {
        font-size: 17px;
    }

    .future-main-card {
        padding: 35px;
    }

    .future-main-card p {
        font-size: 17px;
    }

    .future-card h4 {
        font-size: 20px;
    }

    .future-card p {
        font-size: 15px;
    }

    .future-timeline {
        padding-left: 35px;
    }
}

@media (max-width: 767px) {

    .future-heading h2 {
        font-size: 30px;
    }

    .future-main-card {
        padding: 28px;
    }

    .future-icon-box {
        width: 80px;
        height: 80px;
    }

    .future-icon-box i {
        font-size: 34px;
    }

    .future-main-card h3 {
        font-size: 24px;
    }

    .future-main-card p {
        font-size: 15px;
    }

    .future-card {
        padding: 22px;
    }

    .future-card h4 {
        font-size: 18px;
    }

    .future-card p {
        font-size: 14px;
    }
}

/* CTA */
/* =========================================
   CRYPTO CTA SECTION
========================================= */

.crypto-cta-section {
    padding: 50px 0;
    background: #ffffff;
}

/* Main Wrapper */
.crypto-cta-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 60px 40px;
    background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 45%, #7c3aed 100%);
    box-shadow: 0 20px 50px rgba(109,40,217,0.18);
}

/* Glow Effect */
.crypto-cta-wrapper::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle,
            rgba(255,255,255,0.12),
            transparent 70%);
    top: -120px;
    left: -100px;
    border-radius: 50%;
}

/* Background Overlay */
.crypto-cta-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.25;
}

/* Content */
.crypto-cta-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
}

.crypto-cta-content h2 {
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.2;
}

.crypto-cta-content p {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
    margin-bottom: 28px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Button */
.crypto-cta-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 60px;
    background: linear-gradient(135deg, #06b6d4, #38bdf8);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.4s ease;
    box-shadow: 0 12px 30px rgba(6,182,212,0.30);
}

.crypto-cta-btn:hover {
    transform: translateY(-4px);
    color: #fff;
    box-shadow: 0 16px 35px rgba(6,182,212,0.40);
}

/* Bottom Text */
.cta-bottom-text {
    margin-top: 22px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

/* =========================================
   DECORATIVE SHAPES
========================================= */

.shape {
    position: absolute;
    border-radius: 30px;
    opacity: 0.9;
    z-index: 1;
}

/* Top Right Shapes */
.shape1 {
    width: 80px;
    height: 8px;
    background: #60a5fa;
    top: 30px;
    right: 70px;
    transform: rotate(-45deg);
}

.shape2 {
    width: 80px;
    height: 8px;
    background: #fbbf24;
    top: 55px;
    right: 35px;
    transform: rotate(-45deg);
}

/* Bottom Left Shapes */
.shape3 {
    width: 80px;
    height: 8px;
    background: #93c5fd;
    bottom: 40px;
    left: -10px;
    transform: rotate(-45deg);
}

.shape4 {
    width: 80px;
    height: 8px;
    background: #f59e0b;
    bottom: 15px;
    left: 20px;
    transform: rotate(-45deg);
}

/* Small Dots */
.shape5,
.shape6 {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
}

.shape5 {
    top: 55px;
    left: 55px;
}

.shape6 {
    top: 75px;
    left: 78px;
}

/* =========================================
   FLOATING LINES
========================================= */

.line {
    position: absolute;
    height: 3px;
    border-radius: 20px;
    background: rgba(255,255,255,0.35);
    z-index: 1;
}

.line1 {
    width: 70px;
    top: 60px;
    left: 50%;
}

.line2 {
    width: 55px;
    top: 150px;
    right: 120px;
}

.line3 {
    width: 50px;
    bottom: 100px;
    left: 25%;
}

.line4 {
    width: 70px;
    bottom: 65px;
    right: 22%;
}

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

@media (max-width: 991px) {

    .crypto-cta-wrapper {
        padding: 50px 30px;
    }

    .crypto-cta-content h2 {
        font-size: 30px;
    }

    .crypto-cta-content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

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

    .crypto-cta-wrapper {
        padding: 45px 20px;
        border-radius: 20px;
    }

    .crypto-cta-content h2 {
        font-size: 25px;
    }

    .crypto-cta-content p {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .crypto-cta-btn {
        padding: 13px 26px;
        font-size: 15px;
    }

    .shape1,
    .shape2,
    .shape3,
    .shape4 {
        width: 55px;
    }
}

/* FAQ */
/* =========================================
   CRYPTO FAQ SECTION
========================================= */

.crypto-faq-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

/* Background Grid */
.crypto-faq-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37,99,235,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.03) 1px, transparent 1px);
    background-size: 70px 70px;
    opacity: 0.7;
}

/* =========================================
   HEADING
========================================= */

.faq-heading {
    position: relative;
    z-index: 2;
}

.faq-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 18px;
}

.faq-heading h2 {
    font-size: 32px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 18px;
}

.faq-heading p {
    max-width: 850px;
    margin: auto;
    color: #52637c;
    font-size: 18px;
    line-height: 1.9;
}

/* =========================================
   FAQ WRAPPER
========================================= */

.faq-wrapper {
    position: relative;
    z-index: 2;
}

/* Animated Background Circles */
.faq-bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.25;
    animation: floatCircle 8s ease-in-out infinite;
}

.faq-circle1 {
    width: 260px;
    height: 260px;
    background: #60a5fa;
    top: -50px;
    left: -80px;
}

.faq-circle2 {
    width: 300px;
    height: 300px;
    background: #818cf8;
    bottom: -120px;
    right: -100px;
    animation-delay: 2s;
}

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

.crypto-faq-accordion .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 20px;
}

.crypto-faq-accordion .accordion-button {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(59,130,246,0.08);
    border-radius: 22px !important;
    padding: 24px 28px;
    font-size: 22px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 15px 35px rgba(37,99,235,0.06);
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Shine Effect */
.crypto-faq-accordion .accordion-button::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );
    top: 0;
    left: -120px;
    transition: 0.8s ease;
}

.crypto-faq-accordion .accordion-button:hover::before {
    left: 120%;
}

.crypto-faq-accordion .accordion-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(37,99,235,0.12);
}

.crypto-faq-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    box-shadow: 0 20px 45px rgba(37,99,235,0.18);
}

.crypto-faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.crypto-faq-accordion .accordion-button::after {
    filter: brightness(0.2);
}

.crypto-faq-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(10);
}

/* Body */
.crypto-faq-accordion .accordion-body {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(59,130,246,0.08);
    border-top: none;
    padding: 28px;
    border-radius: 0 0 22px 22px;
    color: #52637c;
    font-size: 17px;
    line-height: 1.9;
    margin-top: -10px;
    box-shadow: 0 15px 35px rgba(37,99,235,0.05);
    animation: fadeSlide 0.4s ease;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes fadeSlide {

    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatCircle {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0px);
    }
}

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

@media (max-width: 991px) {

    .faq-heading h2 {
        font-size: 38px;
    }

    .faq-heading p {
        font-size: 16px;
    }

    .crypto-faq-accordion .accordion-button {
        font-size: 18px;
        padding: 20px 22px;
    }

    .crypto-faq-accordion .accordion-body {
        font-size: 15px;
        padding: 22px;
    }
}

@media (max-width: 767px) {

    .faq-heading h2 {
        font-size: 30px;
    }

    .faq-heading p {
        font-size: 15px;
    }

    .crypto-faq-accordion .accordion-button {
        font-size: 16px;
        padding: 18px 18px;
    }

    .crypto-faq-accordion .accordion-body {
        font-size: 14px;
        padding: 18px;
    }

    .faq-circle1,
    .faq-circle2 {
        width: 180px;
        height: 180px;
    }
}