@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Style+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


/* font-family: "Roboto Condensed", sans-serif;
font-family: "Plus Jakarta Sans", sans-serif;
font-family: "Style Script", cursive;
font-family: "Poppins", sans-serif;
 */
/* ==========================================================================
           GLOBAL LAYOUT WRAPPER
           ========================================================================== */
body {
    background-color: #0b0d19;
    /* Dark outer background surrounding card */
    font-family: system-ui, -apple-system, sans-serif;
    font-family: "Poppins", sans-serif;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
:root {
    /* Typography */
    --font-main: 'Inter', sans-serif;
    /* Spacing */
    --section-py: 80px;
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(12px);
    /* Shadows */
    --shadow-neon: 0 0 20px rgba(13, 46, 255, 0.3);
    --shadow-neon-accent: 0 0 20px rgba(255, 0, 122, 0.3);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.3);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-med: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
   Global Styles
   ========================================================================== */
.bg-america-flag {
    background-color: #020b26;
    /* Deepest blue/black */
    color: #fff;
    background-image: url(../images/pages_image/bgbody-flag.png);
    background-repeat: repeat;
    width: 100%;
    height: auto;
    font-family: var(--font-main);
    /* overflow-x: hidden; */
    background-size: contain;
}
.btn {
    --bs-btn-color: #ffffff !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    letter-spacing: -0.5px;
}
.container-main {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    max-width: 1600px;
    padding-right: calc(var(--bs-gutter-x) * 1.3);
    padding-left: calc(var(--bs-gutter-x) * 1.3);
    margin-right: auto;
    margin-left: auto;
}
a.navbar-brand {
    width: 14%;
}
.bg-america {
    background-image: url(../images/pages_image/bg-america.png);
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.p-left-hero-sec {
    padding-left: 23%;
}
.drop-menu-gap li a {
    padding: 8px 15px;
    color: rgb(0, 18, 72);
}
.drop-menu-gap li a:hover {
    color: #ffffff;
    background-color: rgb(0, 18, 72);
}
/* Utilities */
.text-gradient {
    background: linear-gradient(90deg, #ff0044 0%, #ff0044 10%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-accent {
    color: #ff0044;
}
.text-success {
    color: #0016bc !important;
}
/* Buttons */
.btn-primary-gradient {
    background: linear-gradient(90deg, #ff0044 0%, #ff0044 10%, #8B5CF6 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-neon-accent);
}
.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 0, 122, 0.6);
    color: #fff;
}
/* ==========================================================================
   Navigation
   ========================================================================== */
.glass-nav {
    background: rgb(0, 18, 72);
    backdrop-filter: var(--glass-blur);
    /* border-bottom: 1px solid var(--glass-border); */
    padding-top: 8px;
    padding-bottom: 8px;
}
.brand-text {
    line-height: 1.1;
}
.brand-primary {
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}
.brand-secondary {
    font-weight: 400;
    font-size: 1.2rem;
    color: #fff;
}
.brand-subtitle {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.nav-link {
    color: white !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}
a.btn-outline-glass {
    border: 2px solid white;
    filter: drop-shadow(2px 4px 6px black);
}
.g-set-menu {
    gap: 20px;
}
.star-hero-sec i {
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    background: radial-gradient(circle, rgb(255 8 129) 0%, rgb(15 36 39) 45%, rgb(0 0 0) 84%);
    filter: invert(1);
}
.hero-title img {
    /* text-align: right; */
    display: flex;
    justify-self: flex-end;
    padding-right: 15%;
}
.nav-link:hover,
.nav-link.active {
    color: #fff !important;
}
.btn-login {
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 16px;
}
.hero-section {
    min-height: 100vh;
    padding-bottom: 50px;
}
.badge-premium {
    background: linear-gradient(45deg, rgba(13, 46, 255, 0.2), #430a4b, rgb(75 11 177 / 56%), rgb(0 177 224 / 68%));
    border: 1px solid rgba(13, 46, 255, 0.5);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 0 15px rgba(13, 46, 255, 0.4);
}
.hero-title {
    font-size: 3rem;
    line-height: 1.1;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.text-accent-glow {
    color: #fb0c55;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.btn-outline-glass {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.btn-outline-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
/* Dashboard Panel */
.dashboard-panel {
    background: rgba(10, 14, 39, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dashboard-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}
.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s;
}
.stat-card:hover {
    border-color: rgba(13, 46, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}
.stat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
    font-weight: 500;
}
.stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}
.stat-change {
    font-size: 0.7rem;
    color: var(--success);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
}
.stat-change.negative {
    color: #ff4444;
}
.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.chart-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 15px;
}
.chart-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
}
.growth-badge {
    background: rgba(0, 255, 153, 0.15);
    color: var(--success);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Line Chart */
.line-chart-container {
    position: relative;
    height: 120px;
}
.line-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}
/* Donut Chart */
.donut-container {
    display: flex;
    align-items: center;
    gap: 15px;
}
.donut-chart {
    width: 80px;
    height: 80px;
    position: relative;
}
.donut-chart svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.donut-chart circle {
    fill: none;
    stroke-width: 8;
}
.donut-legend {
    flex: 1;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.7rem;
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-value {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.7rem;
}
/* Map Container */
.map-container {
    position: relative;
    height: 150px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    overflow: hidden;
}
.map-container svg {
    width: 100%;
    height: 100%;
}
/* Channel Chart */
.channel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
}
.channel-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.channel-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.channel-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}
.channel-pct {
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 40px;
    text-align: right;
}
.how-it-works-section {
    background: linear-gradient(rgb(3 22 98 / 51%) 0%, rgb(2, 11, 38) 100%);
}
.feature-ribbon {
    background: linear-gradient(45deg, rgb(3 25 92 / 31%), #000d65, rgb(3 25 92 / 42%));
    border: 2px solid #00ffee52;
    /* border-image: linear-gradient(to right, #743ad5, #d53a9d); */
    box-shadow: 0 0px 5px rgb(15 167 239 / 42%);
    position: relative;
    z-index: 10;
    backdrop-filter: blur(3px);
    border-radius: 15px;
}
.ribbon-item {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: rgb(255, 255, 255);
    line-height: 1.2;
}
.ribbon-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}
.btn-3d {
    background: none;
    border: none;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
}
.inner {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.18, 0.9, 0.32, 1), box-shadow 0.3s;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.btn-3d:hover .inner {
    transform: rotateX(12deg) rotateY(-10deg) translateY(-8px);
    /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); */
}
.btn-3d:active .inner {
    transform: translateY(2px) scale(0.97);
}
.label {
    font-weight: 600;
    font-size: 16px;
    color: var(--light);
}
span.icon-bg-grad svg {
    width: 40px;
    height: 40px;
    fill: var(--light);
    transition: transform 0.6s ease, fill 0.3s ease, filter 0.4s ease;
    filter: drop-shadow(0 0 0 transparent);
}
/* Accent per knop */
.btn-1 .inner {
    background: linear-gradient(145deg, #00c5c5, #09a1b2);
    padding: 10px;
    box-shadow: 2px 6px 22px rgb(0 192 255 / 50%);
}
.btn-2 .inner {
    background: linear-gradient(145deg, #009029, #009f42);
    padding: 10px;
    box-shadow: 2px 6px 22px #009f42;
}
.btn-3 .inner {
    background: linear-gradient(145deg, #5a3d00, #f59e0b);
    padding: 10px;
    box-shadow: 2px 6px 22px #f59f0b9b;
}
.btn-4 .inner {
    background: linear-gradient(145deg, #32029b, #3a0ca3);
    padding: 10px;
    box-shadow: 2px 6px 22px #3a0ca3;
}
.btn-5 .inner {
    background: linear-gradient(145deg, #004d40, #10b981);
    padding: 10px;
    box-shadow: 2px 6px 22px rgb(0 192 255 / 50%);
}
.btn-6 .inner {
    background: linear-gradient(145deg, #cffff7, #8da4d4);
    padding: 10px;
    box-shadow: 2px 6px 22px rgb(0 192 255 / 50%);
    border: 2px solid #003dba;
}
.btn-7 .inner {
    background: linear-gradient(145deg, #cfffd3, #8dd498);
    padding: 10px;
    box-shadow: 2px 6px 22px rgb(0 255 76 / 50%);
    border: 2px solid #00ba55;
}
.btn-8 .inner {
    background: linear-gradient(145deg, #ffcffc, #d28dd4);
    padding: 10px;
    box-shadow: 2px 6px 22px rgba(255, 0, 174, 0.5);
    border: 2px solid #dc00e4;
}
.btn-9 .inner {
    background: linear-gradient(145deg, #ffe0cf, #d4a68d);
    padding: 10px;
    box-shadow: 2px 6px 22px rgb(255 106 0 / 50%);
    border: 2px solid #d24403;
}
.btn-1:hover svg {
    transform: scale(1.3) rotate(10deg);
    fill: #06b6d4;
    filter: drop-shadow(0 0 10px #06b6d4);
}
.btn-2:hover svg {
    transform: scale(1.3) rotate(10deg);
    fill: #7c3aed;
    filter: drop-shadow(0 0 10px #7c3aed);
}
.btn-3:hover svg {
    transform: scale(1.3) rotate(10deg);
    fill: #f59e0b;
    filter: drop-shadow(0 0 10px #f59e0b);
}
.btn-4:hover svg {
    transform: scale(1.3) rotate(10deg);
    fill: #10b981;
    filter: drop-shadow(0 0 10px #10b981);
}
.btn-5:hover svg {
    transform: scale(1.2) rotate(10deg);
    fill: #10b981;
    filter: drop-shadow(0 0 10px #10b981);
}
.btn-6:hover svg {
    transform: scale(1.2) rotate(10deg);
    fill: #fff;
    filter: drop-shadow(2px 5px 20px #fff);
}
.btn-7:hover svg {
    transform: scale(1.2) rotate(10deg);
    fill: #fff;
    filter: drop-shadow(0 0 10px #fff);
}
.btn-8:hover svg {
    transform: scale(1.2) rotate(10deg);
    fill: #fff;
    filter: drop-shadow(0 0 10px #fff);
}
.btn-9:hover svg {
    transform: scale(1.2) rotate(10deg);
    fill: #fff;
    filter: drop-shadow(0 0 10px #fff);
}
/* animatie*/
.pulse {
    animation: pulse 0.5s ease, glow 0.5s ease;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes glow {
    0% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 0 14px currentColor);
    }
    100% {
        filter: drop-shadow(0 0 0 transparent);
    }
}
.bg-w-set {
    background-color: white;
    padding: 5px 5px 30px 3px;
    border-radius: 20px;
}
.benefits-container-main h2,
.benefits-container-main h5,
.benefits-container-main p,
.benefits-container-main li {
    color: #000d65 !important;
}
.benefits-container-main p,
.benefits-container-main li {
    font-weight: 600;
}
.services-section {
    position: relative;
    z-index: 10;
    margin-top: 40px;
}
.service-card {
    border-radius: 12px;
    padding: 30px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.service-card:hover {
    transform: translateY(-10px);
}
.service-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #fff;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}
.service-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.service-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
    flex-grow: 1;
}
.service-footer {
    width: 100%;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
/* Service Card Colors */
.service-green {
    background: linear-gradient(180deg, #069768 0%, #00251a 100%);
    box-shadow: 0 10px 30px rgba(16, 147, 110, 0.3);
}
.service-green:hover {
    box-shadow: 0 15px 40px rgba(21, 157, 119, 0.6);
}
.service-orange {
    background: linear-gradient(180deg, #fb6e03 0%, #893201 100%);
    box-shadow: 0 10px 30px rgba(216, 105, 39, 0.3);
}
.service-orange:hover {
    box-shadow: 0 15px 40px rgba(216, 105, 39, 0.6);
}
.service-purple {
    background: linear-gradient(180deg, #5f0fe2 0%, #100361 100%);
    box-shadow: 0 10px 30px rgba(89, 42, 191, 0.3);
}
.service-purple:hover {
    box-shadow: 0 15px 40px rgba(89, 42, 191, 0.6);
}
.service-pink {
    background: linear-gradient(180deg, #f40457 0%, #8b0220 100%);
    box-shadow: 0 10px 30px rgba(211, 30, 78, 0.3);
}
.service-pink:hover {
    box-shadow: 0 15px 40px rgba(211, 30, 78, 0.6);
}
.service-blue {
    background: linear-gradient(180deg, #1236e9 0%, #011263 100%);
    box-shadow: 0 10px 30px rgba(10, 59, 183, 0.3);
}
.service-blue:hover {
    box-shadow: 0 15px 40px rgba(10, 59, 183, 0.6);
}
/* ==========================================================================
   Benefits Section
   ========================================================================== */
.benefits-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(2, 11, 38, 1) 100%);
    position: relative;
    z-index: 10;
}
.benefits-container {
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.benefit-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}
.reward-panel {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    background-image: url(../images/pages_image/right_mob-coin_ample.png);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: bottom right;
}
/* ==========================================================================
   Smart Campaign Section
   ========================================================================== */
.smart-campaign-section {
    background: linear-gradient(180deg, #020b26 0%, #051b5f82 100%, #051B5F);
}
.bg-blue-grad-set {
    background: linear-gradient(180deg, #051B5F 0%, #051b5f82 100%, #020b26);
}
.smart-feature {
    padding: 20px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    height: 100%;
    transition: all 0.3s ease;
}
.smart-feature:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}
.smart-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}
.rewards-banner {
    background: rgba(13, 46, 255, 0.1);
    border: 1px solid rgba(13, 46, 255, 0.3);
    box-shadow: 0 0 30px rgba(13, 46, 255, 0.15);
}
.reward-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reward-icons svg {
    width: 80px;
    height: 80px;
}
i.fas.fa-database.text-primary {
    color: #00bbff !important;
    /* border: 1px solid #00bbff; */
    filter: drop-shadow(0px 0px 3px #00bbff);
}
.smart-item {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    transition: all 0.3s;
    height: 100%;
}
.smart-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(13, 46, 255, 0.3);
    transform: translateY(-5px);
}
.smart-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 15px;
}
.smart-icon.blue {
    background: rgba(13, 46, 255, 0.15);
    color: #0d4eff;
}
.smart-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #a80df6;
}
.smart-icon.pink {
    background: rgba(255, 0, 122, 0.15);
    color: #FF007A;
}
.smart-icon.cyan {
    background: rgba(0, 200, 255, 0.15);
    color: #00c8ff;
}
.smart-item-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.smart-item-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}
.neo-dashboard {
    background: #080e83;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(13, 46, 255, 0.1);
    background-image: linear-gradient(180deg, rgb(47 10 72 / 50%) 0%, rgb(23 4 47 / 90%) 100%);
    overflow: hidden;
}
.neo-dashboard::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.3) 0%, rgba(176, 38, 255, 0.3) 50%, rgba(255, 38, 185, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
}
.neo-title {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    margin-bottom: 30px !important;
}
.neo-features-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 30px;
}
.neo-feature {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 150px;
    padding: 10px;
    transition: transform 0.3s ease;
}
.neo-feature:hover {
    transform: translateY(-5px);
}
.neo-divider {
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    margin: 0 5px;
}
.neo-icon-wrapper {
    font-size: 2.8rem;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.neo-feature:hover .neo-icon-wrapper {
    transform: scale(1.1);
}
.neon-blue {
    color: #00f3ff;
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
}
.main-set-pending {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}
.blue_color_text h2,
.blue_color_text p,
.blue_color_text h6,
.blue_color_text li {
    color: #000d65 !important;
}
.neon-purple {
    color: #ff00bf;
    filter: drop-shadow(0 0 10px #4a5dffa4);
    background-image: linear-gradient(to right, #ff5bd6, #ff28d9);
    /* 2. Clip the background image strictly to the text letters */
    background-clip: text;
    -webkit-background-clip: text;
    /* Required for Safari/Chrome support */
    /* 3. Hide the original text color to let the background shine through */
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Extra fallback safety */
    /* 4. Ensure it clips perfectly if using standard block elements */
    display: inline-block;
}
.neon-pink {
    color: #ff26b9;
    filter: drop-shadow(0 0 8px rgba(255, 38, 185, 0.6));
}
.neo-feature-text h6 {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}
.neo-feature-text p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 0;
}
.neo-rewards-banner {
    background: rgba(15, 10, 40, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 38, 185, 0.2);
    box-shadow: inset 0 0 30px rgba(255, 38, 185, 0.05), 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}
.neo-rewards-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(90deg, rgba(255, 38, 185, 0.1) 0%, rgba(176, 38, 255, 0.4) 50%, rgba(255, 38, 185, 0.1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.neo-metrics-grid {
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}
.neo-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    transition: all 0.3s ease;
}
.neo-metric:hover {
    transform: translateY(-3px);
}
.neo-metric:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.neo-metric .metric-icon {
    font-size: 1.8rem;
    margin-right: 0;
    margin-bottom: 8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.neo-metric span {
    font-size: 0.75rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}
.neo-chart-container {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 15px;
    overflow: hidden;
}
.neo-3d-bars {
    display: flex;
    align-items: flex-end;
    height: 80%;
    gap: 8px;
    position: relative;
    z-index: 2;
    transform: perspective(400px) rotateX(10deg) rotateY(-15deg);
    transform-style: preserve-3d;
}
.neo-3d-bars .bar {
    width: 18px;
    background: linear-gradient(180deg, #b026ff 0%, #00f3ff 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5), inset 2px 0 5px rgba(255, 255, 255, 0.2);
    position: relative;
    transition: all 0.5s ease;
}
.neo-3d-bars .bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px 2px 0 0;
    transform: skewX(-20deg) translateX(2px);
}
.neo-3d-bars .bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    width: 4px;
    background: #592abf;
    transform: skewY(-20deg) translateY(2px);
}
.neo-3d-bars .bar:hover {
    filter: brightness(1.2);
    transform: translateZ(10px);
}
.bar-1 {
    height: 20%;
    animation: grow 1s ease-out;
}
.bar-2 {
    height: 35%;
    animation: grow 1.2s ease-out;
}
.bar-3 {
    height: 50%;
    animation: grow 1.4s ease-out;
}
.bar-4 {
    height: 65%;
    animation: grow 1.6s ease-out;
}
.bar-5 {
    height: 80%;
    animation: grow 1.8s ease-out;
}
.bar-6 {
    height: 95%;
    animation: grow 2s ease-out;
}
.glow-bar {
    height: 110%;
    background: linear-gradient(180deg, #ff26b9 0%, #b026ff 100%) !important;
    box-shadow: 0 0 20px #ff26b9, -2px 0 5px rgba(0, 0, 0, 0.5), inset 2px 0 5px rgba(255, 255, 255, 0.4) !important;
    animation: grow 2.2s ease-out;
}
.glow-bar::after {
    background: #d31e4e !important;
}
.neo-flare {
    position: absolute;
    top: 10%;
    right: 25px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #fff 0%, rgba(255, 38, 185, 0.8) 20%, rgba(255, 38, 185, 0) 70%);
    border-radius: 50%;
    filter: blur(2px);
    z-index: 3;
    animation: pulseFlare 2s infinite alternate;
}
.neo-arrow {
    position: absolute;
    top: 10%;
    right: 45px;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 38, 185, 0.8), #fff);
    transform: rotate(-25deg);
    transform-origin: right center;
    z-index: 1;
    box-shadow: 0 0 10px #ff26b9;
}
.neo-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #fff;
    filter: drop-shadow(0 0 5px #ff26b9);
}
@keyframes grow {
    from {
        height: 0;
    }
}
@keyframes pulseFlare {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}
.icon-set-flex {
    display: flex;
    justify-content: flex-start;
    text-align-last: left;
    align-items: center;
}
h4.text-dangers {
    color: #f40457;
}
.bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(63, 81, 181, 0.05), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(102, 187, 106, 0.05), transparent 25%);
}
.bg-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}
.header-content h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}
/* Process Wrapper */
.process-wrapper {
    position: relative;
    padding: 10px;
    width: 100%;
}
/* Animated Connecting Line */
.connecting-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.1));
}
.path-line {
    stroke-dasharray: 15;
    animation: dash 30s linear infinite;
}
@keyframes dash {
    to {
        stroke-dashoffset: -1000;
    }
}
/* Scroll Container for responsiveness */
.process-scroll-container {
    overflow-x: auto;
    padding: 20px;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.process-scroll-container::-webkit-scrollbar {
    display: none;
}
/* The Grid */
.process-grid {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 1;
    min-width: max-content;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}
.b-r-round {
    border-radius: 15px;
}
.text-center.header-content {
    padding-top: 40px;
}
/* Individual Card Setup */
.process-card {
    width: 200px;
    background: #fff;
    border-radius: 20px;
    position: relative;
    box-shadow: 1px 1px 20px #7893f365 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    cursor: pointer;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}
.process-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: var(--shadow-deep);
}
/* Staggering the cards vertically */
.card-top {
    align-self: flex-start;
    margin-bottom: 80px;
}
.card-bottom {
    align-self: flex-end;
    margin-top: 80px;
}
/* Step Badge (The circle number) */
.step-badge {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 5;
    border: 3px solid #fff;
}
/* Colored Header */
.card-header-bg {
    padding: 12px;
    border-radius: 20px 20px 0 0;
    color: white;
    padding-top: 25px;
    min-height: 70px;
    display: flex;
    align-items: center;
}
.card-header-bg h4 {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Card Body */
.card-body-content {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    flex: 1;
    flex-direction: column;
    border-radius: 0 0 20px 20px;
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}
.list-section {
    flex: 1;
    padding-right: 10px;
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    font-size: 0.85rem;
    margin-bottom: 8px;
    line-height: 1.4;
    color: #444;
    display: flex;
    align-items: flex-start;
    font-weight: 500;
}
.feature-list li i {
    margin-top: 3px;
    margin-right: 8px;
    font-size: 0.8rem;
}
.info-card img {
    width: 30%;
}
.set-svg-chart img {
    width: 100%;
}
.mob-image-rotae img {
    width: 90%;
    margin-top: -60px;
}
.info-card-2 img {
    width: 30%;
    position: absolute;
    display: inline-block;
    top: 50%;
    right: 0;
}
.set-svg-chart {
    text-align-last: center;
}
.how-it-works-section p,
.how-it-works-section h2,
.how-it-works-section li {
    color: #000d65 !important;
}
.bottom-cards-section p,
.bottom-cards-section h2,
.bottom-cards-section li,
.bottom-cards-section h5,
.bottom-cards-section span,
.bottom-cards-section small {
    color: #000d65 !important;
}
#timeToRender {
    position: absolute;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    background-color: #d85757;
    padding: 0px 4px;
    color: #ffffff;
}
strong.fs-font-set {
    font-size: 14px;
}
.neo-feature-text p {
    color: white;
}
/* Icon Section (3D Illustration representation) */
.icon-section {
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
}
.bg-blue-grad-trust img {
    filter: drop-shadow(2px 4px 16px #03031d);
}
.list-unstyled svg {
    /* font-size: 20px !important; */
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.bottom-cards-section {
    background: linear-gradient(rgba(3, 22, 98, 0.51) 0%, rgb(2, 11, 38) 100%);
}
.d-f-set {
    display: flex !important;
    flex-direction: row !important;
}
.bg-sky-white {
    background-color: #ebedfd;
}
.icon-section i {
    font-size: 2.8em !important;
}
.icon-float {
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}
.shadow-3d {
    filter: drop-shadow(3px 8px 6px rgba(0, 0, 0, 0.2));
}
/* Specific Card Themes */
/* Step 1 */
.badge-1,
.header-1 {
    background: linear-gradient(180deg, #1236e9 0%, #011263 100%);
}
.step-1:hover {
    box-shadow: #0111c5, #0111c5;
    border-color: #0111c5;
}
.text-primary {
    color: #0111c5 !important;
}
/* Step 2 */
.badge-2,
.header-2 {
    background: linear-gradient(180deg, #f40457 0%, #8b0220 100%);
}
.step-2:hover {
    box-shadow: #dc0334, #dc0334;
    border-color: #dc0334;
}
.text-danger {
    color: #dc0334 !important;
}
/* Step 3 */
.badge-3,
.header-3 {
    background: linear-gradient(180deg, #fb6e03 0%, #893201 100%);
}
.step-3:hover {
    box-shadow: #f35d01, #f35d01;
    border-color: #f35d01;
}
.text-warning {
    color: #f35d01 !important;
}
/* Step 4 */
.badge-4,
.header-4 {
    background: linear-gradient(#0095eb, #024b76);
}
.step-4:hover {
    box-shadow: #0095eb, #0095eb;
    border-color: #0095eb;
}
.text-info {
    color: #0095eb !important;
}
/* Step 5 */
.badge-5,
.header-5 {
    background: linear-gradient(#0c7f54, #04492e);
}
.step-5:hover {
    box-shadow: #04492e, #04492e;
    border-color: #04492e;
}
.icon-section .text-success {
    color: #007446 !important;
}
/* using .text-success for Step 5 icon too */
/* Step 6 */
.badge-6,
.header-6 {
    background: linear-gradient(180deg, #5f0fe2 0%, #100361 100%);
}
.step-6:hover {
    box-shadow: #5f10d5, #5b04df;
    border-color: #5b04df;
}
.text-purple {
    color: #5b04df !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
p.hero-subtitle {
    text-shadow: 0 0 7px red;
}
.reward-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.reward-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
/* ==========================================================================
   Process Section
   ========================================================================== */
.process-section {
    border-radius: 15px;
    background: #f8f9fa !important;
}
.process-timeline {
    padding-top: 20px;
    padding-bottom: 20px;
}
.timeline-line {
    position: absolute;
    top: 45px;
    left: 5%;
    right: 5%;
    height: 4px;
    background: #e9ecef;
    z-index: 0;
}
.process-step {
    position: relative;
    z-index: 1;
}
.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.bg-purple {
    background-color: #8B5CF6 !important;
}
/* ==========================================================================
   Trust & Coverage Section
   ========================================================================== */
.trust-section {
    background: #020b26ad;
    overflow: hidden;
}
.bg-blue-grad-trust {
    border-radius: 15px;
    border: 1px solid white;
    background: linear-gradient(90deg, rgb(0, 0, 70), rgb(5, 5, 53), rgba(14, 0, 59, 0.8));
}
/* .trust-map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/bg-map.png') center/cover no-repeat;
    opacity: 0.6;
    z-index: 0;
} */
.trust-section h2 {
    font-size: 1.8rem;
    letter-spacing: 1px;
}
/* ==========================================================================
   Bottom Info Cards
   ========================================================================== */
.bottom-cards-section {
    position: relative;
    z-index: 10;
}
.info-card {
    transition: all 0.3s ease;
}
.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.mobile-mockup {
    background: #f8f9fa;
}
.channel-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* footer start  */
/* Footer */
footer {
    background: linear-gradient(45deg, #040a29, #010416);
    color: white;
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    gap: 40px;
    margin-bottom: 10px;
}
.logo-footer img {
    width: 80%;
}
.footer-brand p {
    font-size: 15px;
    color: white;
    margin: 20px 0;
    line-height: 1.6;
}
.social-links {
    margin-top: 10px;
    gap: 24px;
    display: flex;
}
.social-links a {
    color: #fff;
    font-size: 25px;
    transition: 0.3s;
}
.social-links a:hover {
    color: white;
}
.footer-col h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
}
.footer-bottom p {
    margin-bottom: 0;
    font-size: 15px;
}
.footer-col ul {
    list-style: none;
    padding: 0;
}
.footer-col ul li {
    margin-bottom: 12px;
}
.footer-col ul a {
    color: white;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
}
.newsletter-form {
    display: flex;
    margin-top: 20px;
}
.newsletter-form input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 6px 0 0 6px;
    color: white;
    outline: none;
    flex: 1;
    font-size: 13px;
}
.newsletter-form button {
    background: #ff0044;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: 0.3s;
}
.newsletter-form button:hover {
    background: #a0003b;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--text-muted);
}
.footer-links a {
    color: #fff;
    text-decoration: none;
    margin-left: 20px;
    font-size: 15px;
    transition: 0.3s;
}
.footer-links a:hover {
    color: white;
}
.footer-seal {
    /* background: #fff; */
    padding: 10px;
    /* margin-bottom: 30px; */
    border-radius: 15px;
}
.footer-seal {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: start;
    align-items: start;
    gap: 20px;
    /* margin-bottom: 50px; */
}
.footer-seal-icon {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: start;
    align-items: center;
    gap: 20px;
}
.footer-seal p {
    font-size: 15px;
    color: #fff;
    margin-bottom: 15px;
}
.footer-seal-icon img {
    width: 10%;
}
.footer-seal-icon img.aapc-logo {
    width: 13%;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
}
.surveyPageContainer {
    max-width: 1240px;
}
.survey-container {
    width: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 0;
    overflow: visible;
}
.question-box {
    display: none;
}
.question-box.active {
    display: block;
}
/* ==========================================================================
   1. TOP MINI NAVBAR STYLES
   ========================================================================== */
.top-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 20px;
    background: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
}
.navbar-progress-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #07253f;
    font-size: 16px;
    font-weight: bold;
}
.progress-divider {
    border-right: 1px solid #e2e8f0;
    padding-right: 1.5rem;
    height: 100%;
    min-height: 24px;
}
.progress-micro-track {
    height: 10px;
    width: 100px;
    background-color: #e2e8f0;
    border-radius: 4px;
    display: inline-block;
}
.progress-micro-fill {
    height: 100%;
    background-color: #5c24fc;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}
.navbar-stats-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-grow: 1;
}
.reward-container {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    height: 100%;
    color: #0000FF;
    font-weight: bold;
}
.reward-container i {}
.points-badge {
    width: 30px;
    height: 30px;
    background-image: url('../images/star.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}
#navbarRewardValue {
    font-size: 17px;
    font-weight: 600;
    color: #0000FF;
    line-height: 1;
}
.timer-badge {
    color: #07253f;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 15px;
}
.timer-bold {
    font-weight: 700;
    color: #212529;
}
.timer-muted {
    color: #07253f;
    font-weight: bold;
}
.encouragement-msg {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #07253f;
    margin-left: 20px;
}
.campaign-banner-bg {
    width: 100%;
    max-width: 1190px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.campaign-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.user-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 15px;
}
.profile-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: fill;
}
.balance-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}
.balance-label {
    font-size: 11px;
    color: #07253f;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.balance-value {
    font-size: 14px;
    color: #212529;
    font-weight: 700;
}
/* ==========================================================================
   3. QUESTIONNAIRE MAIN CONTENT SECTION
   ========================================================================== */
.survey-body-panel {
    background-color: #ffffff;
    padding: 1.5rem;
}
.question-header-row {
    margin-bottom: 1.5rem;
}
.question-title-flex {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.badge-round-index {
    background-color: #5c24fc;
    color: #ffffff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.question-text-title {
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.required-star {
    color: #d9383a;
    margin-left: 4px;
}
.motivation-card-wrapper {
    display: flex;
    justify-content: start;
}
.motivation-card-box {
    border: 1px solid #e2e5ff;
    background-color: #f6f8ff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.motivation-icon {
    font-size: 2rem;
}
.motivation-card-title {
    font-size: 0.9rem;
    color: #5c24fc;
    font-weight: 700;
}
.motivation-card-desc {
    font-size: 0.8rem;
    color: #07253f;
}
/* ==========================================================================
   4. SELECTION CARD CONTAINER GRID
   ========================================================================== */
.survey-option {
    height: 100%;
}
.option-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
    height: 100%;
    width: 100%;
    font-size: 1.3rem;
    color: #000;
    display: flex;
    align-items: center;
    margin: 0;
}
.option-card:hover {
    border-color: #5c24fc;
    background-color: #5c24fc;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(92, 36, 252, 0.05);
}
.option-card.active {
    border-color: #5c24fc;
    background-color: #5c24fc;
    color: #ffffff;
    font-weight: 500;
}
/* ==========================================================================
   5. ACTION FOOTER CONTAINER BAR
   ========================================================================== */
.btn-action-submit {
    background-color: #5c24fc;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 24px;
    font-weight: 500;
    border: none;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-action-submit:hover {
    background-color: #4b1cd1;
    color: #ffffff;
}
.disclaimer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 25px 0;
}
.btn-disclaimer {
    background-color: transparent;
    color: #fff;
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 24px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.btn-disclaimer:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #212529;
}
.btn-disclaimer:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}
.survey-footer-actions {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.survey-reward-subfooter {
    background-color: #fcfbfe !important;
    transition: background-color 0.2s ease;
}
.survey-reward-subfooter a:hover {
    opacity: 0.85;
}
.question-badge {
    color: #000;
    font-weight: 600;
}
/* Survey Model CSS */
.survey-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 15px;
    backdrop-filter: blur(2px);
}
/* Modal Content Box */
.survey-modal-content-box {
    background: #ffffff;
    width: 100%;
    max-width: 680px;
    border-radius: 16px;
    padding: 25px 25px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: modalFadeIn 0.3s ease-out;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* Close Button */
.survey-modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 10;
    padding: 0;
}
.survey-modal-close-btn:hover {
    background: #f9fafb;
    color: #111827;
}
/* Confetti Background */
.confetti-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: radial-gradient(circle at 10% 20%, #60a5fa 4px, transparent 4px),
        radial-gradient(circle at 90% 30%, #fbbf24 4px, transparent 4px),
        radial-gradient(circle at 20% 80%, #fbbf24 3px, transparent 3px),
        radial-gradient(circle at 85% 70%, #60a5fa 3px, transparent 3px);
    opacity: 0.8;
    pointer-events: none;
}
.confetti-piece {
    position: absolute;
    width: 6px;
    height: 12px;
    border-radius: 3px;
    opacity: 0.9;
}
.c1 {
    top: 15px;
    left: 20%;
    background: #c084fc;
    transform: rotate(30deg);
}
.c2 {
    top: 35px;
    left: 80%;
    background: #c084fc;
    transform: rotate(-45deg);
}
.c3 {
    top: 50px;
    left: 10%;
    background: #fbbf24;
    transform: rotate(15deg);
}
.c4 {
    top: 60px;
    right: 15%;
    background: #fbbf24;
    transform: rotate(-25deg);
}
/* Header Section */
.survey-modal-top-header {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
}
.header-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 8px;
}
.trophy-icon-wrap {
    position: absolute;
    left: 55px;
    top: -5px;
    width: 65px;
}
.survey-modal-top-header h2 {
    color: #1e1b4b;
    font-size: 21px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.5px;
}
.survey-modal-top-header .star-divider {
    color: #fbbf24;
    font-size: 14px;
    margin: 0px 0 6px 0;
}
.survey-modal-top-header .good-news {
    color: #4c1d95;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}
.survey-modal-top-header p {
    color: #374151;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 90%;
}
.survey-modal-top-header p strong {
    color: #4200d6;
    font-weight: 700;
}
/* =========================================
   COMBINED REWARD BOX
   ========================================= */
.combined-reward-box {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.reward-top-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
/* Left Half */
.reward-left {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 48%;
    justify-content: center;
}
.reward-coin-icon svg {
    width: 45px;
    height: 45px;
}
.reward-left-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.rl-title {
    font-size: 10px;
    font-weight: 800;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.rl-number {
    font-size: 38px;
    font-weight: 800;
    color: #4200d6;
    margin: 2px 0;
}
.rl-subtitle {
    font-size: 14px;
    font-weight: 800;
    color: #4200d6;
}
/* Divider */
.reward-center-line {
    width: 1px;
    height: 50px;
    background: #e5e7eb;
}
/* Right Half */
.reward-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.rr-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4200d6;
    margin-bottom: 3px;
}
.rr-top-row i {
    font-size: 24px;
}
.rr-top-row .rr-number {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}
.rr-caps {
    font-size: 10px;
    font-weight: 800;
    color: #4200d6;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 3px;
}
.rr-sub {
    font-size: 11px;
    color: #4b5563;
    font-weight: 500;
}
/* Inner Purple Banner */
.inner-purple-banner {
    background: #f5f3ff;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.inner-purple-banner svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.inner-purple-banner p {
    font-size: 11.5px;
    color: #1e1b4b;
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
}
/* Categories Section */
.cat-header {
    font-size: 11px;
    font-weight: 800;
    color: #1e1b4b;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.cat-grid {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 15px;
}
.cat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cat-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px;
    margin-bottom: 4px;
}
.sm-bg-travel {
    background: #7c3aed;
}
.sm-bg-dining {
    background: #f59e0b;
}
.sm-bg-shopping {
    background: #10b981;
}
.sm-bg-entertainment {
    background: #3b82f6;
}
.sm-bg-hotels {
    background: #ef4444;
}
.sm-bg-gifts {
    background: #8b5cf6;
}
.cat-box span {
    font-size: 10px;
    font-weight: 700;
    color: #1e1b4b;
}
.cat-more {
    font-size: 10px;
    font-weight: 500;
    color: #4b5563;
    margin-top: -12px;
}
/* Sponsor Box */
.sponsor-container {
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.sponsor-container img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sponsor-info span {
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: #4200d6;
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}
.sponsor-info strong {
    font-size: 13px;
    color: #1e1b4b;
    font-weight: 800;
}
/* Footer Actions */
.modal-bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-checkbox-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    color: #1e1b4b;
    font-weight: 500;
    line-height: 1.3;
    user-select: none;
}
.custom-checkbox-wrap input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.check-box-ui {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #4200d6;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}
.custom-checkbox-wrap input:checked~.check-box-ui::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #4200d6;
    font-size: 12px;
}
.btn-purple-continue {
    background: #4200d6;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s;
}
.btn-purple-continue i {
    margin-left: 8px;
    font-size: 13px;
}
.btn-purple-continue:hover {
    background: #3100a6;
}
/* Thank you page CSS */
.thankyou-container {
    width: 100%;
    max-width: 1100px;
    background: #ffffff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(59, 32, 193, 0.08);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.header-section {
    text-align: center;
    background-image: url('../images/POLL.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 55px;
}
.success-badge {
    background: #3b20c1;
    color: #ffffff;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}
.header-section h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #3d19ed;
    margin: 0;
}
.header-section h2 {
    font-size: 1.15rem;
    color: #2a23b8;
    font-weight: 700;
    margin-bottom: 8px;
}
.header-section p {
    font-size: 1rem;
    color: #2923bc;
    font-weight: 500;
}
/* Sections Custom Titles */
.section-title {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3d19ed;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
.thank-bottom-title {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3d19ed;
    font-weight: 700;
    text-align: center;
}
.thank-bottom-subtitle {
    font-size: 0.75rem;
    color: #3b20c1;
    font-weight: 700;
    margin-bottom: 0rem;
    text-align: center;
}
/* Summary Dashboard Cards */
.summary-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    /* Ensures uniform sizing in Bootstrap grid columns */
}
.summary-main {
    background: #f2f3fd;
    padding: 10px 10px;
}
.summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}
.icon-blue {
    background: #3b20c1;
    color: #f3f0ff;
    font-size: 28px;
}
.icon-green {
    background: #00aa46;
    color: #e6f7ed;
    font-size: 28px;
}
.icon-orange {
    background: #ff9000;
    color: #fff4e5;
    font-size: 28px;
}
.card-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.text-green {
    color: #00aa46;
}
.card-label {
    font-size: 16px;
    color: #362ac7;
    font-weight: 600;
    white-space: nowrap;
}
/* Inline Alert Banner */
.alert-banner {
    background: #e6f7ed;
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    border: 1px solid rgba(0, 170, 70, 0.1);
}
.alert-left {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.alert-left i {
    color: #00aa46;
    font-size: 2.3rem;
}
.alert-left p {
    font-size: 20px;
    font-weight: 600;
    color: #1e1e24;
    margin-bottom: 0rem;
}
.alert-right {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 2rem;
    font-weight: 700;
    color: #00aa46;
}
/* Rewards Section */
.rewards-section {
    background: #fdfdfd;
    border: 1px solid #efefef;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
}
.reward-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 15px;
    position: relative;
    height: 100%;
    /* Keeps rewards unified in height across rows */
}
.reward-img-placeholder {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.bg-travel {
    background-image: url('../images/im1.jpg');
    color: white;
}
.bg-dining {
    background-image: url('../images/im2.jpg');
    color: #636e72;
}
.bg-shows {
    background-image: url('../images/im3.jpg');
    color: #636e72;
}
.bg-shopping {
    background-image: url('../images/im4.jpg');
    color: #636e72;
}
.reward-info {
    padding: 12px 8px;
    flex-grow: 1;
}
.reward-title {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: #3525ef;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.reward-desc {
    font-size: 16px;
    color: #3e38cc;
    line-height: 1.3;
    font-weight: 500;
}
.reward-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b20c1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: auto;
    box-shadow: 0 4px 8px rgba(59, 32, 193, 0.2);
}
/* Specific badge coloring target rules adjusted for Bootstrap's column wrapper */
.col-lg-3:nth-child(2) .reward-badge-icon {
    background: #ff9000;
}
.col-lg-3:nth-child(4) .reward-badge-icon {
    background: #e91e63;
}
/* Split Bottom Section boxes */
.earn-more-box {
    background: #f3f4fc;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 20px;
    height: 100%;
}
.earn-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}
.earn-icon {
    font-size: 2rem;
    color: #3b20c1;
    min-width: 30px;
    text-align: center;
}
.earn-details h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e1e24;
    margin: 0;
}
.earn-details p {
    font-size: 0.8rem;
    color: #4037c9;
    margin: 0;
    font-weight: 600;
}
.impact-box {
    background: #f3f4fc;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    height: 100%;
}
.impact-icon-large {
    background: #f3f0ff;
    color: #3b20c1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.impact-text h3 {
    font-size: 20px;
    font-weight: 700;
    color: #3b20c1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-align: left;
}
.impact-text p {
    font-size: 14px;
    color: #2727c9;
    line-height: 1.4;
    margin: 0;
    font-weight: 600;
    width: 285px;
}
/* Action Footer Styling */
.action-footer {
    text-align: center;
}
.action-footer p {
    font-size: 1rem;
    font-weight: 700;
    color: #3b20c1;
    margin-bottom: 15px;
}
.cta-btn-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 340px;
}
.cta-btn {
    width: 100%;
    background: #3b20c1;
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(59, 32, 193, 0.25);
    transition: all 0.3s ease;
}
.cta-btn:hover {
    background: #2a149e;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(59, 32, 193, 0.35);
}
.new-tag {
    position: absolute;
    top: -12px;
    right: 10px;
    background: #ffd600;
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sub-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #3b20c1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.sub-link:hover {
    text-decoration: underline;
}
.body-bg-white {
    background-color: #fff;
    width: 100%;
}
.body-bg-white button span {
    color: #fff !important;
}
/* how-it-works css */
.border-pink-ap {
    --bs-border-opacity: 1;
    border-color: rgb(255 8 182) !important;
}
.text-dark-blue-ap h1,
.text-dark-blue-ap h2,
.text-dark-blue-ap h3,
.text-dark-blue-ap p,
.text-dark-blue-ap li,
.text-dark-blue-ap .text-dark,
.text-dark-blue-ap label,
.text-dark-blue-ap input,
.text-dark-blue-ap span {
    color: #000d65 !important;
}
::selection {
    background: #7c3aed;
    color: #ffffff;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0e27;
}
::-webkit-scrollbar-thumb {
    background: #7c3aed;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}
/* ===================== UTILITY CLASSES ===================== */
.text-gradient-h-w {
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.benefit-card-h-w {
    cursor: pointer;
}
.benefit-card-h-w p {
    color: white;
}
.glass-card-mob-h-w {
    width: 30%;
}
.glass-card-mob-h-w img {
    width: 100%;
}
.text-gradient-pink-h-w {
    background: linear-gradient(135deg, #e53aed 0%, #f63b3b 50%, #ee227c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-purple-accent-h-w {
    color: #a78bfa !important;
}
.text-muted-custom-h-w {
    color: #fff !important;
}
.text-success-glow-h-w {
    color: #34d399 !important;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
}
.section-padding-h-w {
    padding: 70px 0;
}
/* GLASS CARD */
.glass-card-h-w {
    background: rgba(22, 27, 74, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.glass-card-a-h-w {
    background: linear-gradient(135deg, #736af154 0%, #8b3bf633 50%, #b495ff26 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 3px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.glass-card-b-h-w {
    background: linear-gradient(-150deg, #b46af154 0%, #e83bf621 50%, #0b0538e0 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 3px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.text-success-h-w {
    color: #a07afb;
}
.glass-card-b-h-w img {
    width: 50%;
    border-radius: 100%;
    filter: hue-rotate(155deg) drop-shadow(2px 4px 6px black);
}
.glass-card-a-h-w img {
    width: 50%;
    border-radius: 100%;
    filter: hue-rotate(155deg) drop-shadow(2px 4px 6px black);
}
.glass-card-h-w:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.15), 0 8px 32px rgba(0, 0, 0, 0.4);
}
.glass-card-sm-h-w {
    width: 50%;
}
.glass-card-sm-h-w img {
    width: 100%;
}
/* ===================== BUTTONS ===================== */
.btn-glow-primary-h-w {
    background: linear-gradient(90deg, #ff0044 0%, #ff0044 10%, #8B5CF6 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    padding: 10px 28px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-med);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    z-index: 1;
}
.btn-glow-primary-h-w::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    opacity: 0;
    transition: opacity var(--transition-med);
    z-index: -1;
}
.btn-glow-primary-h-w:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.6);
}
.btn-glow-primary-h-w:hover::before {
    opacity: 1;
}
.btn-outline-custom-h-w {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: var(--border-radius-sm);
    backdrop-filter: blur(4px);
    transition: all var(--transition-med);
}
.btn-outline-custom-h-w:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #a78bfa;
    color: #ffffff;
    transform: translateY(-2px);
}
/* ===================== HERO SECTION ===================== */
.hero-section-h-w {
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0e27 0%, #131842 50%, #0d1137 100%);
    /* background-image: url(../images/pages_image/bg-america_h-w.png); */
    position: relative;
    display: flex;
    align-items: center;
}
.hero-bg-overlay-h-w {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(34, 211, 238, 0.04) 0%, transparent 50%);
    z-index: 0;
}
/* Capitol building silhouette effect */
.hero-bg-overlay-h-w::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(10, 14, 39, 0.9), transparent);
    z-index: 1;
}
.hero-particles-h-w {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hero-stars-3d-h-w {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    perspective: 1000px;
}
.hero-left-content-h-w {
    position: relative;
    z-index: 3;
}
.hero-title-h-w {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: white;
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.p-00.p-set-0 {
    padding: 0 !important;
}
.hero-subtitle-h-w {
    font-weight: 600;
    line-height: 1.4;
    color: white;
}
.hero-desc-h-w {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.7;
}
/* ===================== HERO DASHBOARD ===================== */
.hero-right-dashboard-h-w {
    position: relative;
    z-index: 3;
}
.dashboard-wrapper-h-w {
    position: relative;
    perspective: 1200px;
}
.analytics-card-h-w {
    transform: rotateY(-2deg) rotateX(1deg);
    transition: transform var(--transition-slow);
    transform-style: preserve-3d;
}
.analytics-card-h-w:hover {
    transform: rotateY(0deg) rotateX(0deg);
}
.live-dot-h-w {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse-dot 2s infinite;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}
.stat-mini-h-w {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all var(--transition-fast);
}
.stat-mini-h-w:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-1px);
}
.stat-label-h-w {
    font-size: 0.65rem;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-value-h-w {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}
.stat-change-positive-h-w {
    font-size: 0.7rem;
    color: #34d399;
    font-weight: 600;
}
.mini-chart-box-h-w {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    transition: all var(--transition-fast);
}
.mini-chart-box-h-w:hover {
    border-color: rgba(124, 58, 237, 0.2);
}
.chart-title-h-w {
    font-size: 0.72rem;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}
/* Hero Map */
.map-preview-card-h-w {
    transform: rotateY(-1deg);
    transition: transform var(--transition-slow);
}
.map-preview-card-h-w:hover {
    transform: rotateY(0deg);
}
.hero-map-container-h-w {
    height: 160px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.15);
}
.white-bg-h-w .channel-bar {
    background: rgb(0 0 0 / 10%);
}
.set-chart-h-w {
    display: flex;
}
.set-chart-h-w .donut-chart {
    width: 160px;
    height: 110px;
}
.usa-map-h-w img {
    width: 80%;
}
/* Floating Cards */
.candidate-float-h-w {
    position: absolute;
    bottom: -15%;
    left: -150px;
    z-index: 10;
    animation: float-card 4s ease-in-out infinite;
}
.p-para-hero {
    padding-right: 40%;
}
.p-para-hero p {
    color: white;
}
.chart-row .chart-card.white-bg-h-w {
    background: rgb(255 255 255) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #000d65;
    padding: 8px;
}
.chart-row .chart-card.white-bg-h-w div {
    color: #000d65;
}
.py-h-w-7 {
    padding: 7rem 0;
}
.video-float-h-w {
    position: absolute;
    bottom: -17%;
    right: 30%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: float-card 4s ease-in-out infinite 1s;
}
@keyframes float-card {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}
.candidate-avatar-h-w {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.candidate-name-h-w {
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffffff;
    letter-spacing: 2px;
}
.candidate-role-h-w {
    font-size: 0.65rem;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.candidate-tag-h-w {
    margin-top: 8px;
    font-size: 0.72rem;
    color: #94a3b8;
    background: rgba(124, 58, 237, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(124, 58, 237, 0.2);
}
.video-play-icon-h-w {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}
/* Scroll Indicator */
.scroll-indicator-h-w {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
    animation: fade-bounce 2.5s infinite;
}
.mouse-h-w {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    position: relative;
}
.wheel-h-w {
    width: 4px;
    height: 8px;
    background: #a78bfa;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2s infinite;
}
@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}
.scroll-indicator-h-w span {
    font-size: 0.7rem;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 1px;
}
@keyframes fade-bounce {
    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px);
    }
}
/* ===================== SECTION HEADERS ===================== */
.section-header-h-w {
    position: relative;
}
.section-header-h-w h2 {
    color: white;
}
.benefit-card-h-w h5 {
    color: white;
}
.section-title-h-w {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.section-divider-h-w {
    width: 250px;
    height: 4px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 2px;
    margin-top: 16px;
}
/* ===================== WHY REWARDED SECTION ===================== */
.section-why-rewarded-h-w {
    background: linear-gradient(180deg, #0d1137 0%, #131842 100%);
    position: relative;
}
.section-why-rewarded-h-w::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    opacity: 0.3;
}
.benefit-card-h-w {
    background: linear-gradient(145deg, rgba(22, 27, 74, 0.8), rgba(13, 17, 55, 0.9));
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: var(--border-radius-lg);
    padding: 32px 20px;
    transition: all var(--transition-med);
    position: relative;
    overflow: hidden;
}
.benefit-card-h-w::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    transform: scaleX(0);
    transition: transform var(--transition-med);
}
.benefit-card-h-w:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15);
}
.benefit-card-h-w:hover::before {
    transform: scaleX(1);
}
.benefit-icon-wrap-h-w {
    margin-bottom: 8px;
}
.benefit-icon-h-w {
    width: 56px;
    height: 56px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--border-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #a78bfa;
    transition: all var(--transition-med);
}
.benefit-card-h-w:hover .benefit-icon-h-w {
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}
/* ===================== FOUR WAYS SECTION ===================== */
.section-four-ways-h-w {
    /* background: #0a0e27; */
    background: #fff;
    position: relative;
}
.section-header-b-h-w h2 {
    color: #060b3a;
}
.engage-card-h-w {
    cursor: pointer;
    border: 1px solid #7c3aed6b;
    border-radius: var(--border-radius-lg);
    padding: 24px;
    transition: all var(--transition-med);
    position: relative;
    overflow: hidden;
}
.engage-card-h-w:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 24px 48px rgba(124, 58, 237, 0.2);
}
.engage-badge-h-w {
    position: absolute;
    top: 12px;
    left: 12px;
    color: white;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
.text-dark-h-w h5,
.text-dark-h-w p {
    color: #060b3a !important;
}
.text-dark-h-w a {
    color: #060b3aba;
}
.text-dark-h-w a:hover {
    color: #060b3a;
}
.engage-visual-h-w {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}
/* .p-00 {
    padding: 10px !important;
} */

.phone-mockup-h-w {
    width: 140px;
    height: 220px;
    background: #1a1f4e;
    border-radius: 20px;
    padding: 8px;
    border: 2px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all var(--transition-med);
    transform: perspective(600px) rotateX(3deg);
}
.engage-card-h-w:hover .phone-mockup-h-w {
    transform: perspective(600px) rotateX(0deg) scale(1.05);
    border-color: #7c3aed;
}
.phone-screen-h-w {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0f1340, #1a1f4e);
    border-radius: 14px;
    padding: 12px 10px;
    overflow: hidden;
    position: relative;
}
.mock-header-h-w {
    font-size: 0.65rem;
    font-weight: 700;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-align: center;
}
.mock-question-h-w {
    font-size: 0.72rem;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}
.mock-option-h-w {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.65rem;
    color: #94a3b8;
    margin-bottom: 5px;
    transition: all var(--transition-fast);
}
.mock-option-h-w.active-h-w {
    background: rgba(124, 58, 237, 0.2);
    border-color: #7c3aed;
    color: #ffffff;
}
.mock-bar-h-w {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    height: 22px;
    margin-bottom: 6px;
    overflow: hidden;
}
.mock-bar-fill-h-w {
    height: 100%;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 6px;
    transition: width 1.5s ease;
}
.mock-bar-fill-h-w.alt-h-w {
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
}
.video-play-overlay-h-w {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%;
    font-size: 2.5rem;
    color: #a78bfa;
    animation: pulse-play 2s infinite;
}
.rounded-border-2-lside {
    border-radius: 15px 0px 0px 15px;
}
.rounded-border-2-rside {
    border-radius: 0px 15px 15px 0px;
}
p.xx-small-pkg-small {
    font-weight: 500 !important;
    font-size: 10px;
}
@keyframes pulse-play {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}
.mock-video-label-h-w {
    text-align: center;
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 4px;
}
.mock-video-bar-h-w {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    position: relative;
    overflow: hidden;
}
.mock-video-bar-h-w::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 2px;
    animation: progress-bar 3s infinite;
}
@keyframes progress-bar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}
.combo-split-h-w {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.combo-video-h-w {
    height: 80px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #a78bfa;
}
.combo-poll-h-w {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.engage-icon-h-w {
    font-size: 1.8rem;
    color: #7700d48a;
    margin-bottom: 8px;
}
.engage-link-h-w {
    color: #a78bfa;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.engage-link-h-w:hover {
    color: #ffffff;
    gap: 8px;
}
/* ===================== EVERYTHING SECTION ===================== */
.section-everything-h-w {
    background: linear-gradient(180deg, #0d1137 0%, #131842 100%);
}
.diy-card-h-w {
    position: relative;
    text-align: center;
}
.diy-badge-h-w {
    display: inline-block;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.diy-badge-h-w.premium-h-w {
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border: none;
    color: #ffffff;
}
.or-divider-h-w {
    flex-shrink: 0;
}
.or-badge-h-w {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}
.done-card-h-w {
    border-color: rgba(124, 58, 237, 0.3) !important;
}
.services-grid-h-w {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.service-item-h-w {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 14px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    transition: all var(--transition-fast);
}
.service-item-h-w:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateX(4px);
}
.service-item-h-w i {
    font-size: 1.1rem;
}
/* ===================== HOW IT WORKS SECTION ===================== */
.section-how-works-h-w {
    background: #0a0e27;
    position: relative;
}
.steps-timeline-h-w {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 0;
    flex-wrap: wrap;
}
.step-item-h-w {
    text-align: center;
    flex: 0 0 200px;
    position: relative;
    padding: 0;
}
.step-number-h-w {
    width: 36px;
    height: 36px;
    color: white;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
    position: relative;
    z-index: 2;
}
.step-icon-h-w {
    font-size: 2.8rem;
    color: #5300d9;
    margin-bottom: 10px;
    transition: all var(--transition-med);
}
.dashboard-preview-col-h-w {
    animation: float-card 4s ease-in-out infinite 1s;
}
.dashboard-preview-col-h-w img {
    width: 100%;
    animation-timing-function: ease-in-out;
    transition: transform var(--transition-slow);
    transform-style: preserve-3d;
    filter: drop-shadow(1px 3px 12px rgba(158, 41, 255, 0.163));
}
.dashboard-preview-col-h-w img:hover {
    transform: skewX(8deg);
    animation-timing-function: ease-in-out;
    filter: drop-shadow(1px 3px 12px rgba(159, 41, 255, 0.492));
    transition: transform var(--transition-slow);
    transform-style: preserve-3d;
}
.step-item-h-w:hover .step-icon-h-w {
    color: #9d00cc;
    transform: scale(1.2) translateY(-4px);
    filter: drop-shadow(0 4px 12px rgba(124, 58, 237, 0.5));
}
.step-connector-h-w {
    display: flex;
    align-items: center;
    padding-top: 36px;
}
.connector-line-h-w {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #7c3aed, #3b82f6);
    border-radius: 1px;
    opacity: 0.4;
}
/* ===================== SURVEY RESULTS SECTION ===================== */
.section-survey-results-h-w {
    background: linear-gradient(180deg, #0d1137 0%, #131842 100%);
}
.result-stat-card-h-w {
    background: linear-gradient(145deg, rgba(22, 27, 74, 0.8), rgba(13, 17, 55, 0.9));
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: var(--border-radius-md);
    padding: 20px;
    text-align: center;
    transition: all var(--transition-med);
    position: relative;
    overflow: hidden;
}
.result-stat-card-h-w::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    transform: scaleX(0);
    transition: transform var(--transition-med);
}
.result-stat-card-h-w:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 16px 32px rgba(124, 58, 237, 0.15);
}
.result-stat-card-h-w:hover::after {
    transform: scaleX(1);
}
.result-stat-label-h-w {
    font-size: 0.75rem;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.result-stat-value-h-w {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 6px 0;
}
.result-stat-sub-h-w {
    font-size: 0.8rem;
    color: #94a3b8;
}
.mini-result-card-h-w {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--transition-fast);
}
.mini-result-card-h-w:hover {
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.05);
}
.mini-result-label-h-w {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}
.mini-result-badge-h-w {
    font-size: 1rem;
}
/* Counter Animation */
.counter-h-w {
    transition: all 0.3s;
}
/* ===================== ANALYTICS SECTION ===================== */
.section-analytics-h-w {
    background: #0a0e27;
}
.analytics-features-h-w {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.analytics-feature-item-h-w {
    background: linear-gradient(-150deg, #12007a2b 0%, #0f031021 50%, #0b0538 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(124, 58, 237, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-med), box-shadow var(--transition-med);
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #ffffff;
    transition: all var(--transition-fast);
}
.analytics-feature-item-h-w:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateX(4px);
}
.analytics-feature-item-h-w i {
    font-size: 1.1rem;
    color: #a78bfa;
    width: 20px;
    text-align: center;
}
.analytics-dashboard-h-w {
    transform: perspective(800px) rotateY(-3deg);
    transition: transform var(--transition-slow);
}
.analytics-dashboard-h-w:hover {
    transform: perspective(800px) rotateY(0deg);
}
.dash-stat-card-h-w {
    text-align: center;
    padding: 14px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all var(--transition-fast);
}
.dash-stat-card-h-w:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-3px);
}
.dash-stat-icon-h-w {
    font-size: 1.2rem;
    color: #a78bfa;
    margin-bottom: 6px;
}
.dash-stat-val-h-w {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #ffffff;
}
.dash-stat-label-h-w {
    font-size: 0.65rem;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* ===================== STAY FRESH SECTION ===================== */
.section-stay-fresh-h-w {
    background: white;
}
.engage-reward-tag-h-w {
    font-size: 22px;
}
.text-dark-h-w h6,
.text-dark-h-w h2,
.text-dark-h-w span {
    color: #060b3a;
}
.campaign-timeline-h-w {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.timeline-item-h-w {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 8px 16px 8px 0;
}
.timeline-item-h-w:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: rgba(124, 58, 237, 0.3);
    transform: translateY(-50%);
}
.timeline-dot-h-w {
    width: 12px;
    height: 12px;
    background: rgba(124, 58, 237, 0.3);
    border: 2px solid #7c3aed;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
.active-timeline-h-w .timeline-dot-h-w {
    background: #7c3aed;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
}
.timeline-content-h-w {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.engagement-icon-item-h-w span {
    color: #060b3a !important;
}
.timeline-label-h-w {
    font-size: 0.7rem;
    color: #1e1b4b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.timeline-action-h-w {
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 600;
}
.engagement-icons-row-h-w {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.engagement-icon-item-h-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.eng-icon-h-w {
    width: 60px;
    height: 60px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    /* padding: 20px !important; */
    color: #4d14f7;
    transition: all var(--transition-fast);
}
.engagement-icon-item-h-w:hover .eng-icon-h-w {
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}
.engagement-icon-item-h-w span {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 500;
}
/* Reward Points */
.points-badge-float-h-w {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.points-badge-h-w {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: var(--border-radius-xl);
    padding: 14px 28px;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
    animation: float-card 3s ease-in-out infinite;
}
.points-badge-h-w i {
    font-size: 1.5rem;
    color: #fbbf24;
}
.points-val-h-w {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #ffffff;
}
.points-label-h-w {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.reward-grid-h-w {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.reward-mob-h-w {
    animation: float-card 4s ease-in-out infinite 1s;
}
.reward-flex-h-w img {
    width: 100%;
}
.reward-flex-h-w {
    display: flex;
    flex-direction: row;
}
.reward-item-h-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-md);
    padding: 12px;
    transition: all var(--transition-med);
    text-align: center;
}
.reward-item-h-w:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.15);
}
.reward-icon-h-w {
    width: 44px;
    height: 44px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #dd0072;
    transition: all var(--transition-med);
}
.reward-item-h-w:hover .reward-icon-h-w {
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    color: #ffffff;
    border-color: transparent;
    transform: rotate(10deg) scale(1.1);
}
.reward-item-h-w span {
    font-size: 0.78rem;
    color: #1b00e5;
    font-weight: 500;
}
.engage-reward-tag-h-w {
    color: #a78bfa !important;
}
/* ===================== MAP SECTION ===================== */
.section-map-h-w {
    background: #0a0e27;
}
.main-map-h-w {
    border-radius: var(--border-radius-md) !important;
    border: 1px solid rgba(124, 58, 237, 0.15);
}
.map-stats-h-w {
    padding: 24px;
}
.state-stat-h-w {
    margin-bottom: 16px;
}
.state-bar-h-w {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}
.state-bar-fill-h-w {
    height: 100%;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border-radius: 3px;
    transition: width 1.5s ease;
}
/* ===================== TRUST SECTION ===================== */
.section-trust-h-w {
    background: linear-gradient(180deg, #131842, #0d1137);
    padding: 30px 0;
    position: relative;
}
.section-trust-h-w::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    opacity: 0.3;
}
.trust-card-h-w {
    padding: 5px;
    /* text-align: center; */
    transition: all var(--transition-med);
    height: 100%;
    /* border-radius: 10px; */
    display: flex;
    border-right: 1px dashed #a78bfa5c;
    gap: 8px;
    align-items: center;
}
.trust-card-h-w:hover {
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-5px);
    border-right: 1px solid #a78bfa5c;
    filter: drop-shadow(1px 3px 12px rgba(159, 41, 255, 0.274));
}
/*
.bg-area-box{
    width: 60%;
    margin: auto;
} */
.text-p-custom-h-w {
    color: white;
    font-size: 18px;
}
.bg-pink-purple-h-w {
    /* background:linear-gradient(90deg, #4e00b6 0%, #4302a9 10%, #eb0056 100%); */
    background-image: url(../images/pages_image/ready-rewards-crowd.png);
    transition: all 0.3s ease;
    background-size: cover;
    width: 100%;
    box-shadow: var(--shadow-neon-accent);
}
.trust-icon-h-w {
    font-size: 3.5rem;
    color: #a78bfa;
    margin-bottom: 12px;
    transition: all var(--transition-med);
}
.trust-text-h-w {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    text-align: start;
    color: #fff;
}
.trust-card-h-w:hover .trust-icon-h-w {
    color: #ffffff;
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(124, 58, 237, 0.4));
}
/* ===================== FOOTER ===================== */
.footer-section-h-w {
    background: #0a0e27;
    padding: 80px 0 40px;
    position: relative;
}
.footer-section-h-w::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    opacity: 0.2;
}
.cta-box-h-w {
    /* background: linear-gradient(145deg, rgba(22, 27, 74, 0.8), rgba(13, 17, 55, 0.9)); */
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--border-radius-xl);
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}
.cta-box-h-w::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08), transparent 70%);
}
.footer-bottom-h-w {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-links-h-w {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-links-h-w a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}
.footer-links-h-w a:hover {
    color: #a78bfa;
}
/* ===================== BACK TO TOP ===================== */
.back-to-top-h-w {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #ff1bb5 0%, #8b3bf6 50%, #5e22ee 100%);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-med);
    z-index: 999;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}
.back-to-top-h-w.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top-h-w:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.6);
}
/* ===================== PARTICLE STYLES ===================== */
.particle-h-w {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}
.star-3d-h-w {
    position: absolute;
    color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    font-size: 12px;
}
/* ===================== 3D TILT EFFECTS ===================== */
.tilt-3d-h-w {
    transition: transform var(--transition-med);
    transform-style: preserve-3d;
}
.leaflet-container {
    background: #0a0e27 !important;
    border-radius: var(--border-radius-md);
}
.leaflet-control-attribution {
    background: rgba(10, 14, 39, 0.8) !important;
    color: #1e1b4b !important;
    font-size: 0.65rem !important;
}
.leaflet-control-attribution a {
    color: #a78bfa !important;
}
.leaflet-control-zoom a {
    background: rgba(22, 27, 74, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(124, 58, 237, 0.2) !important;
}
.leaflet-control-zoom a:hover {
    background: #7c3aed !important;
}
/* ===================== ANIMATIONS ===================== */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
@keyframes glow-pulse {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(124, 58, 237, 0.4);
    }
}
/* Loading skeleton shimmer */
.shimmer-h-w {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
/* Glow Pulse Animation */
.glow-h-w {
    animation: glow-pulse 3s infinite;
}
/* how-it-works css end*/
/* package css */
.included-bar-pkg {
    background-color: #050a30;
}
.cust-col-pkg-icon i,
.cust-col-pkg-icon h6,
.cust-col-pkg-icon p {
    color: white;
}
.cust-col-pkg-icon i {
    font-size: 35px;
}
.cust-col-pkg-icon h6 {
    font-size: 12px;
    letter-spacing: 0px;
    margin-bottom: 10px !important;
}
.text-orange-pkg {
    color: #fe4200 !important;
}
.bg-orange-pkg-dark {
    background-color: #fe4200 !important;
}
.bg-orange-pkg {
    background-color: #fe440024 !important;
}
.bg-dark-blue-pkg {
    background-color: #091235 !important;
}
.text-dark-pkg {
    color: #001567;
}
.btn-outline-dark {
    border-color: #001567;
}
.campaign-setup-wrapper-pkg i,
.campaign-setup-wrapper-pkg div {
    color: #001567 !important;
}
.border-orange-pkg {
    border-color: #fe4200 !important;
}
.features-list-pkg {
    backdrop-filter: blur(6px) sepia(1);
    padding: 15px;
    border-radius: 11px;
}
.main-setup-box-pkg {
    display: flex;
    /* gap: 10px; */
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch !important;
}
/* Utilities */
.x-small-pkg {
    font-size: 0.7rem;
    color: #001567;
}
.xx-small-pkg {
    font-size: 0.8rem;
}
.g-set-pkg {
    gap: 10px;
}
.z-index-2-pkg {
    z-index: 2;
    position: relative;
}
.trust-bar-pkg i {
    font-size: 25px;
}
.dashboard-mockup-pkg img {
    filter: drop-shadow(2px 4px 26px rgb(12, 0, 74));
}
/* Hero Section */
.hero-section-pkg {
    position: relative;
    padding-top: 100px;
    padding-bottom: 20px;
    /* min-height: 80vh; */
    background: url('../images/pages_image/package-washinton.jpg') top/cover no-repeat;
    overflow: hidden;
}
/* .hero-overlay-pkg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(9, 18, 53, 0.95) 0%, rgba(9, 18, 53, 0.7) 50%, rgba(9, 18, 53, 0.2) 100%);
    z-index: 1;
} */
.hero-title-pkg {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
}
.hero-subtitle-pkg {
    font-size: 1.25rem;
    color: #ffd700;
}
.hero-desc-pkg {
    font-size: 1.1rem;
    opacity: 0.9;
}
.features-list-pkg {
    font-weight: 500;
}
.btn-contact-pkg {
    background: #001567;
    border-color: #001567;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 500;
    font-size: 17px;
    align-self: center;
    transition: all 0.3s ease;
}
.img-coin-set img {
    width: 50%;
}
.btn-contact-pkg:hover {
    background: #1136c7;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(27, 73, 245, 0.4);
}
.bg-light-blue {
    background: #4964d41a;
}
.align-center-vertical {
    display: flex;
    align-items: center;
}
.img-laptop {
    width: 38%;
    position: absolute;
    top: 37%;
    right: 0;
}
.img-anoous {
    width: 38%;
    position: absolute;
    top: 37%;
    right: 0;
}
.vs-pkg h3 {
    background: #000d65;
    position: absolute;
    top: -27px;
    right: 46.5%;
    z-index: 99;
    border-radius: 50%;
    padding: 10px;
    color: white !important;
}
.border-black-1 {
    border: 1px solid rgba(5, 29, 58, 0.452) !important;
}
.rounded-sides {
    border-radius: 12px 0px 0px 12px;
}
.rounded-sides-2 {
    border-radius: 0px 12px 12px 0px;
}
.distribute-box-pkg {
    flex-wrap: nowrap;
    gap: 10px;
    display: flex;
    align-items: stretch !important;
}
.rounded-pill-lg-pkg {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    /* overflow: hidden; */
    align-items: stretch !important;
}
.btn-started-pkg {
    background: #fff;
    border-color: #fff;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 500;
    font-size: 17px;
    align-self: center;
    transition: all 0.3s ease;
}
.text-dark-pkg p,
.text-dark-pkg h2,
.text-dark-pkg li,
.text-dark-pkg h5,
.text-dark-pkg h4,
.text-dark-pkg h3 {
    color: #151587;
    font-weight: 500;
}
.pricing-card-pkg ul {
    line-height: 2.2;
}
.btn-started-pkg:hover {
    background: #f1f1f1;
    transform: translateY(-2px);
}
/* Trust Bar */
.trust-bar-pkg {
    background: #fff;
    position: relative;
    z-index: 10;
}
/* Pricing Cards */
.text-success-pkg {
    color: #00622b !important;
}
span.text-success-pkg {
    color: #00622b !important;
}
.bg-success-pkg {
    background-color: #00622b !important;
}
.card-body-pkg {
    padding: 25px;
    box-shadow: 0px 0px 30px #1d1dff33;
    border-radius: 18px;
}
i.icon-big-pkg {
    font-size: 40px;
}
.icon-d-flex-pkg {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-primary-pkg {
    background-color: #0111c5;
}
.border-primary-pkg {
    border-color: #0111c5;
}
.flex-center-vertical {
    display: flex;
    align-items: center;
}
h5.text-pink-pkg {
    color: rgb(255, 0, 81);
}
h5.text-pink-pkg i {
    color: rgb(255, 0, 81);
}
.pricing-card-pkg {
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: grid;
}
.pricing-card-pkg:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}
.popular-card-pkg {
    background: linear-gradient(to bottom, #ffffff, #f0f4ff);
    z-index: 2;
}
.icon-circle-pkg {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.85rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
/* Info Grid */
.social-icons-pkg i {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.social-icons-pkg i:hover {
    transform: scale(1.2);
}
/* Rewards Section */
.rewards-list-pkg li {
    font-size: 0.9rem;
}
/* Features Bar */
.features-bar-dark-pkg {
    border-top: 4px solid #1b49f5;
    border-bottom: 4px solid #1b49f5;
}
/* Campaign Setup */
.or-divider-pkg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #dee2e6;
    transform: translateX(-50%);
}
/* Glow Box */
.glow-box-pkg {
    background: #00022b;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.z-index-1-pkg img {
    width: 50%;
}
.glow-star-pkg {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(27, 73, 245, 0.8) 0%, rgba(27, 73, 245, 0) 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: pulseGlow 3s infinite alternate;
}
@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 1;
    }
}
/* 3D Float Animation */
.gsap-float-pkg {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% {
        transform: perspective(1000px) rotateY(-10deg) translateY(0px);
    }
    50% {
        transform: perspective(1000px) rotateY(-10deg) translateY(-15px);
    }
    100% {
        transform: perspective(1000px) rotateY(-10deg) translateY(0px);
    }
}
/* solution css start */
.text-pink-sol {
    color: #ff0055 !important;
}
.text-purple-sol {
    color: #500dad !important;
}
.text-blue-sol {
    color: #00f0ff !important;
}
.text-red-sol {
    color: #ff3333 !important;
}
/* Gradients */
.text-gradient-pink-sol {
    background: linear-gradient(90deg, #ff0044 0%, #ff0044 10%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-purple-sol {
    background: linear-gradient(90deg, #6a0dad, #d500f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Glow Texts */
.text-primary-glow-sol {
    color: #ff0055;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
}
.text-purple-glow-sol {
    color: #a200ff;
    text-shadow: 0 0 15px rgba(162, 0, 255, 0.7);
}
.text-red-glow-sol {
    color: #ff0055;
    text-shadow: 0 0 15px rgba(255, 0, 85, 0.7);
}
.text-blue-glow-sol {
    color: #0088ff;
    text-shadow: 0 0 15px rgba(0, 136, 255, 0.7);
}
.text-pink-glow-sol {
    color: #ff00cc;
    text-shadow: 0 0 15px rgba(255, 0, 204, 0.7);
}
/* Buttons */
.btn-primary-gradient-sol {
    background: linear-gradient(90deg, #ff0044 0%, #ff0044 10%, #8B5CF6 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
    transition: all 0.3s ease;
}
.btn-primary-gradient-sol:hover {
    box-shadow: 0 0 25px rgba(255, 0, 85, 0.7);
    color: white;
    transform: translateY(-2px);
}
.btn-outline-light-sol {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 15px 30px;
}
.btn-outline-light-sol:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}
.btn-outline-purple-sol {
    background: #3800e0;
    color: white;
    border: none;
    padding: 10px 25px;
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.btn-outline-purple-sol:hover {
    background: #3600a3;
    color: white;
}
.btn-outline-sol {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
}
.btn-outline-sol:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}
/* Hero Section */
.hero-section-sol {
    padding-top: 100px;
    display: flex;
    align-items: center;
    background-image: url('../images/pages_image/hero-solution.jpg');
    background-size: cover;
    background-position: center;
}
.hero-subtitle-sol {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #ffffff;
}
.hero-title-sol {
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
}
.hero-desc-sol {
    font-size: 1.1rem;
    max-width: 700px;
    line-height: 2;
}
/* Stats */
.stat-icon-sol {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgb(255 142 142);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgb(255 255 255);
}
.stat-divider-sol {
    width: 1px;
    height: auto;
    background: rgba(255, 255, 255, 0.2);
}
/* Solutions Section */
.section-subtitle-sol {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.section-title-sol {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}
.solution-card-sol {
    background: #01071d;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    padding: 30px 10px !important;
    animation-timing-function: ease-in-out;
    transition: 0.5s;
}
.solution-card-sol svg {
    width: 30%;
    height: fit-content;
}
.solution-card-sol-1:hover {
    transform: translateY(-10px);
    background: #000000;
    border: 2px solid #a33cff;
    box-shadow: 0 0 20px #a33cff;
}
.solution-card-sol-2:hover {
    transform: translateY(-10px);
    background: #000000;
    border: 2px solid #e8353a;
    box-shadow: 0 0 20px #e8353a;
}
.solution-card-sol-3:hover {
    transform: translateY(-10px);
    background: #000000;
    border: 2px solid #424dff;
    box-shadow: 0 0 20px #424dff;
}
.solution-card-sol-4:hover {
    transform: translateY(-10px);
    background: #000000;
    border: 2px solid #ed2ca3;
    box-shadow: 0 0 20px #ed2ca3;
}
.solution-card-sol-1 {
    border: 2px solid #a33cff;
    box-shadow: 0 0 20px #a33cff;
}
.solution-card-sol-2 {
    border: 2px solid #e8353a !important;
    box-shadow: 0 0 20px #e8353a !important;
}
.solution-card-sol-3 {
    border: 2px solid #424dff;
    box-shadow: 0 0 20px #424dff;
}
.solution-card-sol-4 {
    border: 2px solid #ed2ca3;
    box-shadow: 0 0 20px #ed2ca3;
}
.solution-card-sol-1 svg {
    filter: drop-shadow(0 0 20px #a33cff);
}
.solution-card-sol-2 svg {
    filter: drop-shadow(0 0 20px #e8353a);
}
.solution-card-sol-3 svg {
    filter: drop-shadow(0 0 20px #424dff);
}
.solution-card-sol-4 svg {
    filter: drop-shadow(0 0 20px #ed2ca3);
}
.solution-card-sol-1 h5 {
    color: #a33cff !important;
}
.solution-card-sol-2 h5 {
    color: #e8353a !important;
}
.solution-card-sol-3 h5 {
    color: #424dff !important;
}
.solution-card-sol-4 h5 {
    color: #ed2ca3 !important;
}
.text-dark-sol {
    color: #01071d;
}
.bg-dark-sol {
    background-color: #01071d;
}
.features-strip-sol {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.features-strip-sol i {
    font-size: 40px !important;
}
.feature-item-sol h6 {
    font-weight: 500 !important;
}
.feature-item-sol {
    display: flex;
    gap: 10px;
    text-align: start;
}
.border-glow-red-sol {
    border: 1px solid rgba(255, 0, 85, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.1);
}
.card-icon-sol {
    font-size: 2.5rem;
}
.feature-item-sol i.text-blue-sol-i {
    color: #005eff !important;
    text-shadow: 0 0 15px rgba(0, 106, 255, 0.7);
}
.feature-item-sol i.text-purple-sol-i {
    color: #0322ed !important;
    text-shadow: 0 0 15px #3800e0;
}
.feature-item-sol i.text-pink-sol {
    color: #ff00cc !important;
    text-shadow: 0 0 15px rgba(255, 0, 204, 0.7);
}
.feature-item-sol i.text-red-sol {
    color: #ff001e !important;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
}
/* p.text-pink-sol{
    color: rgb(221, 0, 114);
} */
.step-number-sol {
    background-color: #000d65 !important;
}
.bg-last-cta-sol {
    background-image: url(../images/pages_image/sol-last-sec-bg.png);
    background-size: cover;
    background-position: right;
}
.text-dark-blue-sol {
    color: #000d65 !important;
}
.bg-blue-sol {
    background: linear-gradient(#000d65, #000944);
}
/* Features Strip */
.features-strip-sol {
    background: rgba(10, 13, 25, 0.8);
}
.border-top-glow-sol {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.border-bottom-glow-sol {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.very-small-sol {
    font-size: 0.75rem;
}
/* Storyboard Section */
.process-steps-container-sol {
    padding-top: 40px;
}
.process-line-sol {
    position: absolute;
    top: 25px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 0;
}
.step-icon-wrapper-sol {
    width: 80px;
    height: 80px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.step-number-sol {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    background: #111;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}
.process-steps-container-sol {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin: 0;
}
.process-step-sol {
    padding: 20px;
    padding-top: 30px;
    background: #000be40f;
    border: 1px solid #0000ff42;
    border-radius: 15px;
}
.process-arrow-icon-bg {
    padding: 20px;
    background: #000be40f;
    border: 1px solid #0000ff42;
    border-radius: 15px;
    display: flex;
    --bs-gutter-x: 0rem;
}
i.text-blue-2-glow-sol {
    background: linear-gradient(rgb(63, 63, 255), rgb(21, 0, 208)) !important;
    text-shadow: 2px 2px 8px rgba(29, 86, 255, 0.57);
    color: transparent;
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text !important;
}
i.text-w-2-glow-sol {
    background: linear-gradient(rgb(253, 253, 255), rgb(220, 216, 255)) !important;
    text-shadow: 2px 2px 8px rgba(232, 232, 232, 0.57);
    color: transparent;
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text !important;
}
i.text-r-2-glow-sol {
    background: linear-gradient(rgb(255, 33, 59), rgb(208, 0, 0)) !important;
    text-shadow: 2px 2px 8px rgba(255, 29, 89, 0.57);
    color: transparent;
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text !important;
}
i.text-p-2-glow-sol {
    background: linear-gradient(rgb(233, 63, 255), rgb(164, 0, 123)) !important;
    text-shadow: 2px 2px 8px rgba(255, 29, 180, 0.57);
    color: transparent;
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text !important;
}
.voter-get-item-sol i {
    font-size: 50px !important;
}
.step-circle-t1 h6 {
    color: #a33cff !important;
}
.step-circle-t2 h6 {
    color: #e8353a !important;
}
.step-circle-t3 h6 {
    color: #424dff !important;
}
.step-circle-t4 h6 {
    color: #ed2ca3 !important;
}
/* Info Boxes */
.info-box-sol {
    background: linear-gradient(#020e39, #01071d);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.steps-section-sol {
    background: linear-gradient(#020e39, #01071d);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.rounded-sol {
    border-radius: 12px;
}
.why-list-sol li {
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.trophy-icon-sol {
    font-size: 6rem;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
.points-bg-glow-sol {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 60%);
    z-index: 0;
}
.coin-sol {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #55ff55, #00aa00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    border: 2px solid #aaffaa;
}
/* Advantage Section */
.adv-icon-sol {
    width: 40px;
    height: 40px;
    background-color: #6a0dad;
}
/* 4 Steps Section */
.step-circle-wrapper-sol {
    position: relative;
    display: inline-block;
}
.step-circle-sol {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.bg-purple-glow-sol {
    background: rgba(162, 0, 255, 0.2);
    border: 1px solid #a200ff;
    box-shadow: 0 0 15px rgba(162, 0, 255, 0.5);
}
.bg-red-glow-sol {
    background: rgba(255, 0, 85, 0.2);
    border: 1px solid #ff0055;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
}
.bg-blue-glow-sol {
    background: rgba(0, 136, 255, 0.2);
    border: 1px solid #0088ff;
    box-shadow: 0 0 15px rgba(0, 136, 255, 0.5);
}
.bg-pink-glow-sol {
    background: rgba(255, 0, 204, 0.2);
    border: 1px solid #ff00cc;
    box-shadow: 0 0 15px rgba(255, 0, 204, 0.5);
}
/* solution css end */
/* about start  */
.btn-red-gradient-about {
    background: linear-gradient(90deg, red, purple);
    display: flex;
    align-items: center;
    padding: 15px 30px;
}
.btn-red-gradient-about:hover {
    color: #fff;
}
.svg-about svg {
    width: 30%;
    margin-bottom: 20px;
    height: auto;
}
.text-purple-about {
    color: #18028d;
}
.about-text-fz {
    font-size: 35px;
    padding-right: 20%;
}
.bg-last-cta-about {
    background-image: url(../images/pages_image/sol-last-sec-bg.png);
    background-size: cover;
    background-position: right;
}
.check-emoji {
    font-size: 25px;
}
.bg-last-cta-about p {
    margin-bottom: 0;
}
.page-wrapper-about {
    max-width: 1320px;
    margin: 0 auto;
    padding: 64px 32px 80px;
}
/* =========================================================
     SECTION HEADING -about
  ========================================================= */
.section-heading-about {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f172a;
    margin-bottom: 40px;
}
.heading-bar-about {
    display: inline-block;
    width: 38px;
    height: 3.5px;
    background: #e63a2e;
    border-radius: 3px;
    flex-shrink: 0;
}
/* =========================================================
     FADE-IN ANIMATION
  ========================================================= */
.fade-in-about {
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in-about.visible-about {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================================
     ── LEADERSHIP SECTION ──
  ========================================================= */
.leadership-section-about {
    margin-bottom: 68px;
}
/* CSS Grid: 3 cols → 2 → 1 */
.leadership-grid-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
/* Card */
.leader-card-about {
    background: #ffffff;
    border: 1px solid #e2e7f5;
    border-radius: 18px;
    padding: 26px 22px 22px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(.22, .61, .36, 1),
        box-shadow 0.35s cubic-bezier(.22, .61, .36, 1),
        border-color 0.35s ease;
}
/* Animated bottom accent bar */
.leader-card-about::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2d1fbf 0%, #7c3aed 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
}
.leader-card-about:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 60px rgba(45, 31, 191, 0.14);
    border-color: #c4b5fd;
}
.leader-card-about:hover::after {
    transform: scaleX(1);
}
/* Avatar */
.leader-avatar-about {
    width: 92px;
    height: 120px;
    min-width: 92px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e2e7f5;
    transition: border-color 0.35s ease, transform 0.35s ease;
}
.leader-card-about:hover .leader-avatar-about {
    border-color: #2d1fbf;
    transform: scale(1.06);
}
.leader-avatar-about img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Text block */
.leader-body-about {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.leader-name-about {
    font-size: 1rem;
    font-weight: 600;
    color: #2d1fbf;
    margin: 0 0 3px;
    line-height: 1.25;
    transition: color 0.3s ease;
}
.leader-card-about:hover .leader-name-about {
    color: #1a0ea8;
}
.leader-role-about {
    font-size: 0.69rem;
    font-weight: 700;
    color: #2d1fbf;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 12px;
}
.leader-bio-about {
    font-size: 0.79rem;
    color: #2d1fbf;
    line-height: 1.72;
    margin: 0 0 18px;
    flex: 1;
}
/* LinkedIn badge */
.linkedin-badge-about {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #0a66c2;
    color: #ffffff;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.82rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.03em;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.linkedin-badge-about:hover {
    background: #004fa8;
    color: #fff;
    transform: scale(1.15) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(10, 102, 194, 0.45);
}
/* CSS Grid: 2 equal columns */
.team-grid-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
/* Each column: flex column */
.team-col-about {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Member card */
.team-card-about {
    background: #ffffff;
    border: 1px solid #e2e7f5;
    border-radius: 14px;
    padding: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(.22, .61, .36, 1),
        box-shadow 0.3s cubic-bezier(.22, .61, .36, 1),
        border-color 0.3s ease;
}
/* Animated left accent */
.team-card-about::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: linear-gradient(180deg, #2d1fbf 0%, #7c3aed 100%);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
}
.team-card-about:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(45, 31, 191, 0.11);
    border-color: #c4b5fd;
}
.team-card-about:hover::before {
    transform: scaleY(1);
}
/* Avatar */
.team-avatar-about {
    width: 120px;
    height: 120px;
    /* min-width: 66px; */
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid #e2e7f5;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.team-card-about:hover .team-avatar-about {
    border-color: #2d1fbf;
    transform: scale(1.08);
}
.team-avatar-about img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Text content */
.team-body-about {
    flex: 1;
    min-width: 0;
}
.team-name-about {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2d1fbf;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
.team-card-about:hover .team-name-about {
    color: #1a0ea8;
}
.team-role-about {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d1fbf;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
}
.team-bio-about {
    font-size: 0.74rem;
    color: #2d1fbf;
    line-height: 1.6;
    margin: 0;
}
/* LinkedIn small */
/* .team-linkedin-about {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: #0a66c2;
    color: #ffffff;
    border-radius: 5px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.03em;
    align-self:self-start;
    transition:
      background  0.3s ease,
      transform   0.3s ease,
      box-shadow  0.3s ease;
  } */
.team-linkedin-about {
    color: #2d1fbf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    align-self: self-start;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.team-linkedin-about:hover {
    background: #2d1fbf;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transform: scale(1.18) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(10, 102, 194, 0.44);
}
.leader-card-about:nth-child(1) {
    transition-delay: 0.05s;
}
.leader-card-about:nth-child(2) {
    transition-delay: 0.12s;
}
.leader-card-about:nth-child(3) {
    transition-delay: 0.19s;
}
/* css comparison */
/* Typography Utilities */
.highlight-green-vs {
    color: #ff0000;
    font-weight: 800;
    font-size: 25px;
}
.highlight-green-text-vs {
    color: #00ffff;
}
.red-text-vs {
    color: #ff0000;
}
.green-text-vs {
    color: #8ee334;
}
.icon-red-vs {
    color: #ff3333;
    font-size: 1.2rem;
}
.icon-green-vs {
    color: #33ff33;
    font-size: 1.2rem;
}
.cyan-icon-vs {
    color: #00a1ff;
    font-size: 3.5rem;
    filter: drop-shadow(0 0px 5px #0062ff9b);
    margin-bottom: 6px;
}
.green-icon-vs {
    color: #8ee334;
    font-size: 3.5rem;
    filter: drop-shadow(0 0px 5px #73ff009b);
    margin-bottom: 6px;
}
.blue-icon-vs {
    color: #3399ff;
}
.orange-icon-vs {
    color: #ffa500;
}
.purple-icon-vs {
    color: #b266ff;
}
.red-icon-vs {
    color: #ff3333;
}
/* --- Header Section --- */
.header-section-vs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    padding-top: 120px;
}
.logo-area-vs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-star-vs {
    font-size: 3rem;
    color: #1a4b8c;
    position: relative;
}
.logo-star-vs::before {
    background: linear-gradient(to bottom, #fff, #1a4b8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.logo-star-vs::after {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3rem;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}
.logo-text-container-vs {
    display: flex;
    flex-direction: column;
}
.logo-title-vs {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -1px;
}
.logo-subtitle-vs {
    color: #3399ff;
    font-size: 0.9rem;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.red-line-vs {
    height: 2px;
    background-color: red;
    flex-grow: 1;
    min-width: 15px;
}
.header-titles-vs {
    text-align: center;
    flex-grow: 1;
}
.main-title-yellow-vs {
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffcc00;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px #ffcc00;
}
.sub-title-yellow-vs {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffcc00;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px #ffcc00;
}
.main-title-red-vs {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #ff0000;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px #ff0000;
    position: relative;
    display: inline-block;
}
.star-icon-vs {
    color: white;
    font-size: 1.5rem;
    position: absolute;
    top: -5px;
    right: -25px;
}
.header-graphic-vs .ballot-img-vs {
    width: 150px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}
.tagline-vs {
    text-align: center;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
}
/* --- Main Grid Layout --- */
.main-grid-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
}
/* Panel Common Styles */
.panel-old-vs,
.panel-new-vs,
.panel-pricing-vs,
.panel-why-win-vs,
.panel-benchmarks-vs,
.panel-map-vs {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background: #0a0a1a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.panel-old-vs:hover,
.panel-new-vs:hover,
.panel-pricing-vs:hover {
    transform: translateY(-2px);
}
.panel-title-vs {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-family: 'Oswald', sans-serif;
}
.panel-subtitle-vs {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
}
/* Old Way Panel */
.panel-old-vs {
    border: 2px solid #ff2f2f;
    box-shadow: inset 0 0 50px 5px #ff000066;
}
.panel-old-vs:hover {
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
}
.panel-header-old-vs {
    background: linear-gradient(to right, #8b0000, #ff0000, #8b0000);
    padding: 15px;
    text-align: center;
}
.panel-content-vs {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.features-list-vs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.features-list-vs li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s;
}
.features-list-vs li:hover {
    background: rgba(255, 255, 255, 0.1);
}
.media-icons-vs {
    display: flex;
    gap: 10px;
    /* margin-top: 10px; */
    flex-direction: column;
}
.check-svg-vs {
    width: 30px !important;
    height: 100% !important;
}
.media-item-vs {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: border-color 0.3s;
}
.media-item-vs:hover {
    border-color: #666;
}
.media-item-vs i {
    font-size: 2.3rem;
    color: #a6baff;
    filter: drop-shadow(0 0 10px rgba(51, 153, 255, 0.5));
}
.traditional-costs-vs {
    padding: 20px;
    border-top: 1px solid #333;
}
.costs-title-vs {
    color: #ff9999;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.costs-table-vs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.costs-table-vs td {
    padding: 5px 0;
    border-bottom: 1px solid #222;
}
.costs-table-vs i {
    width: 20px;
    color: #888;
}
.align-right-vs {
    text-align: right;
    font-weight: bold;
}
.costs-alert-vs {
    background: linear-gradient(to right, #600, #a00, #600);
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 15px;
    font-weight: 800;
    border-radius: 5px;
    border: 1px solid #f00;
    text-shadow: 1px 1px 2px #000;
}
/* VS Badge */
.vs-badge-container-vs {
    position: absolute;
    left: 40%;
    top: 30%;
    transform: translate(-14%, -50%);
    z-index: 10;
    display: inline-block;
    width: 10%;
}
.vs-badge-vs {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #001133, #010438);
    border: 3px solid #ff7777;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    box-shadow: 0 0 20px #fff1f184, inset 0 0 10px #5500ff;
    text-shadow: 0 0 5px #fff;
}
/* New Way Panel */
.panel-new-vs {
    border: 2px solid #0055ff;
    box-shadow: 0 0 15px rgba(0, 85, 255, 0.5);
    grid-column: 2;
    display: flex;
    flex-direction: column;
}
.panel-new-vs:hover {
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.7);
}
.panel-header-new-vs {
    background: linear-gradient(to right, #001155, #0055ff, #001155);
    padding: 15px;
    text-align: center;
}
.panel-content-new-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.voters-earn-panel-vs {
    background: rgba(0, 10, 30, 0.8);
    border: 1px solid #0055ff;
    border-radius: 8px;
    padding: 15px;
}
.voters-earn-title-vs {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.earn-list-vs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.earn-list-vs li {
    display: flex;
    align-items: center;
    gap: 15px;
}
.earn-list-vs i {
    font-size: 2rem;
    width: 55px;
    height: 55px;
    text-align: center;
    background: #000;
    padding: 10px;
    border-radius: 50%;
    border: 1px solid #3399ff;
    box-shadow: 0 0 10px rgba(51, 153, 255, 0.5);
}
.panel-new-green-vs {
    border: 2px solid #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 30, 0.5);
    display: flex;
    background: #0a0a1a;
    flex-direction: column;
}
i.blue-pink-vs {
    font-size: 2rem;
    width: 55px;
    height: 55px;
    text-align: center;
    background: #000;
    padding: 10px;
    color: #be33ff;
    border-radius: 50%;
    border: 1px solid #be33ff;
    box-shadow: 0 0 10px rgba(207, 51, 255, 0.5);
}
i.red-icon-vs {
    font-size: 2rem;
    width: 55px;
    height: 55px;
    text-align: center;
    background: #000;
    padding: 10px;
    color: #ff3333;
    border-radius: 50%;
    border: 1px solid #ff3333;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
}
.earn-action-vs {
    font-weight: bold;
    font-size: 1.1rem;
}
.earn-points-vs {
    color: #ffcc00;
    font-size: 0.8rem;
}
.voters-get-rewarded-vs {
    padding: 15px;
    border-top: 1px solid #333;
}
.rewarded-title-vs {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 10px;
}
.rewarded-list-vs {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.rewarded-list-vs li {
    background: #111;
    padding: 8px;
    border-radius: 5px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.redeem-panel-vs {
    border: 1px solid #00ff00;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}
.redeem-title-vs {
    color: #ff9999;
    margin-bottom: 10px;
    font-size: 1rem;
}
.redeem-icons-vs {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
}
.redeem-item-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    gap: 5px;
}
.redeem-item-vs i {
    font-size: 2rem;
    color: #ffcc00;
}
/* Pricing Center Panel */
.panel-pricing-vs {
    border: 2px solid #576ffc;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
    background: linear-gradient(135deg, #0a0a1a, #1a1a00);
    text-align: center;
    padding: 20px;
    box-shadow: indianred;
    position: relative;
    overflow: visible;
    box-shadow: inset 0 0 50px 5px #0006ff66, 0 0 50px 5px #0006ff66;
}
.grid-3-vs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.rewarded-list-vs {
    list-style: none;
    display: flex;
    /* grid-template-columns: 1fr 1fr; */
    gap: 10px;
    flex-direction: column;
    margin-bottom: 10px;
}
img.ample-icon-vs {
    width: 14%;
    filter: drop-shadow(0px 0px 4px rgba(255, 255, 0, 0.645));
}
.pricing-header-vs {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
}
.price-amount-vs {
    font-size: 8rem;
    font-weight: 900;
    /*
    text-shadow: 3px 3px 0 #b38600, 0 0 20px #ffcc00; */
    font-family: 'Anton', sans-serif !important;
    letter-spacing: 12px;
    background: linear-gradient(180deg, #fff6da 0%, #ffa81b 5%, #f9c251 45%, #ed9609 67%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    filter: drop-shadow(0 4px 0 rgb(255, 200, 118)) drop-shadow(0 0 1px rgb(255, 235, 102));
    line-height: 1;
}
.get-reward-vs {
    border: 2px solid #57fc65;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
    background: linear-gradient(135deg, #0a0a1a, #1a1a00);
    text-align: center;
    padding: 20px;
    box-shadow: indianred;
    position: relative;
    overflow: visible;
    border-radius: 8px;
    box-shadow: inset 0 0 50px 5px #00ff4733, 0 0 50px 5px #25ff0066;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.get-reward-vs:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-unit-vs {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}
.price-subtext-vs {
    color: #ffcc00;
    font-weight: bold;
    margin: 10px 0;
}
.price-desc-vs {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 20px;
}
.risk-free-badge-vs {
    display: inline-flex;
    align-items: self-start;
    gap: 15px;
    text-align-last: left;
    background: linear-gradient(to right, #8b0000, #ff0000);
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid #fff;
    box-shadow: 0 0 15px #ff0000;
    position: absolute;
    bottom: -35px;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
}
.risk-free-badge-vs i {
    font-size: 2.5rem;
}
.badge-title-vs {
    font-weight: 900;
    font-size: 1.2rem;
}
.badge-subtitle-vs {
    font-size: 0.7rem;
    letter-spacing: 1px;
}
/* Bottom Grid Sections */
.bottom-tier-grid-vs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 50px;
}
.mtop {
    margin-top: 50px;
}
/* Why Win Panel */
.panel-why-win-vs {
    border: 1px solid #3399ff;
    padding: 15px;
}
.why-win-title-vs {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.stats-grid-vs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    text-align: center;
}
.stat-item-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    border-radius: 8px;
    transition: transform 0.3s;
}
.stat-item-vs:hover {
    transform: scale(1.05);
}
.stat-number-vs {
    font-size: 2.8rem;
    font-weight: 500;
    font-family: 'Anton';
}
.chart-bar-red-vs {
    width: 27%;
    height: 25px;
    background: linear-gradient(45deg, #fb2d2d, #f64545);
    box-shadow: 0 0 3px #fc3c3c;
}
.chart-bar-red-1-vs {
    width: 18%;
    height: 25px;
    background: linear-gradient(45deg, #fb2d2d, #f64545);
    box-shadow: 0 0 3px #fc3c3c;
}
.chart-bar-red-2-vs {
    width: 15%;
    height: 25px;
    background: linear-gradient(45deg, #fb2d2d, #f64545);
    box-shadow: 0 0 3px #fc3c3c;
}
.chart-bar-red-3-vs {
    width: 12%;
    height: 25px;
    background: linear-gradient(45deg, #fb2d2d, #f64545);
    box-shadow: 0 0 3px #fc3c3c;
}
.chart-bar-red-4-vs {
    width: 9%;
    height: 25px;
    background: linear-gradient(45deg, #fb2d2d, #f64545);
    box-shadow: 0 0 3px #fc3c3c;
}
.stat-number-vs-small {
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Anton';
}
.stat-desc-vs {
    font-size: 0.9rem;
    color: #ffffff;
    margin-top: 5px;
    font-weight: 900;
}
/* Benchmarks Panel */
.panel-benchmarks-vs {
    border: 1px solid #555;
    padding: 15px;
}
.benchmarks-title-vs {
    text-align: center;
    font-size: 1.1rem;
}
.benchmarks-source-vs {
    text-align: center;
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 15px;
}
.chart-container-vs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chart-row-vs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}
.chart-label-vs {
    font-size: 15px;
    width: 170px;
    text-align: right;
}
.small-text-vs {
    font-size: 0.6rem;
    color: #888;
}
.chart-bar-container-vs {
    flex-grow: 1;
    background: #222;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.chart-bar-vs {
    height: 100%;
    background: #ff3333;
}
.bar-large-vs {
    width: 90%;
}
.bar-med-vs {
    width: 15%;
}
.bar-small-vs {
    width: 12%;
}
.bar-xsmall-vs {
    width: 10%;
}
.bar-tiny-vs {
    width: 5%;
}
.map-usa-img {
    width: 90%;
}
/* Map Panel */
.panel-map-vs {
    border: 1px solid #3399ff;
    padding: 15px;
    text-align: center;
}
.map-title-vs {
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.map-placeholder-vs {
    height: 150px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Blank_US_Map_%28states_only%29.svg/800px-Blank_US_Map_%28states_only%29.svg.png') no-repeat center center;
    background-size: contain;
    position: relative;
    filter: invert(1) opacity(0.7) drop-shadow(0 0 10px #ff0055);
}
.map-icon-vs {
    display: none;
}
.map-dots-vs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.map-dots-vs i {
    position: absolute;
    color: #ff0055;
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px #ff0055);
    animation: pulse-vs 2s infinite;
}
.dot-1-vs {
    top: 30%;
    left: 20%;
}
.dot-2-vs {
    top: 50%;
    left: 70%;
}
.dot-3-vs {
    top: 70%;
    left: 40%;
}
.dot-4-vs {
    top: 40%;
    left: 80%;
}
@keyframes pulse-vs {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.map-desc-vs {
    font-size: 0.8rem;
    margin-top: 15px;
    color: #ccc;
}
/* Footer Section */
.footer-section-vs {
    margin-top: 40px;
    background: #000;
    border: 1px solid #3399ff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(51, 153, 255, 0.3);
}
.footer-title-vs {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.features-row-vs {
    display: grid;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    grid-template-columns: repeat(8, 1fr);
    margin-bottom: 30px;
    padding-bottom: 20px;
}
.feature-icon-box-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    gap: 10px;
    transition: transform 0.3s, color 0.3s;
}
.feature-icon-box-vs:hover {
    transform: translateY(-5px);
    color: #3399ff;
}
.feature-icon-box-vs i {
    font-size: 4rem;
    padding: 10px;
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #318be4 0%, #6fa2d6 50%, #5094d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 0px 4px #001bb1);
}
.feature-icon-red-box-vs i {
    font-size: 4rem;
    padding: 10px;
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #e43131 0%, #d66f7e 50%, #d95950 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 0px 4px #001bb1);
}
.feature-icon-pink-box-vs i {
    font-size: 4rem;
    padding: 10px;
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #a531e4 0%, #cd6fd6 50%, #9950d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 0px 4px #001bb1);
}
.footer-bottom-grid-vs {
    display: grid;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    grid-template-columns: 1fr 2fr 1fr;
}
.lowest-cost-badge-vs {
    border: 2px solid #ffcc00;
    padding: 10px 20px;
    text-align: center;
    align-content: center;
    border-radius: 5px;
    background: #111;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
}
.stars-vs {
    color: #ffcc00;
    margin-bottom: 5px;
    font-size: 2.2rem;
}
.lowest-cost-text-vs {
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1.2;
}
.in-entire-us-vs {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 700;
    margin-top: 0px;
}
.advantage-section-vs {
    text-align: center;
    align-content: center;
}
.advantage-subtitle-vs {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 900;
}
.advantage-title-vs {
    font-size: 2.0rem;
    font-weight: 900;
    margin: 5px 0 10px;
    letter-spacing: -1px;
}
.advantage-checks-vs {
    display: flex;
    gap: 15px;
    justify-content: center;
    font-size: 0.9rem;
    color: #8ee334;
}
.advantage-checks-vs span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.footer-logo-section-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.footer-logo-vs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-logo-vs img {
    width: 100%;
}
.website-btn-vs {
    display: inline-block;
    background: linear-gradient(to right, #cc0000, #ff0000);
    color: white;
    text-decoration: none;
    width: 100%;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    border: 1px solid #ff6666;
    transition: background 0.3s, box-shadow 0.3s;
}
.website-btn-vs:hover {
    background: linear-gradient(to right, #ff0000, #ff3333);
    box-shadow: 0 0 15px #ff0000;
}
.hero-vs {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #060a1e 0%, #0a1440 45%, #170a2e 100%);
    border: 1.5px solid rgba(95, 139, 255, 0.3);
    padding: 34px 34px 30px;
    isolation: isolate;
}
.hero-flagbg-vs {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: repeating-linear-gradient(to bottom,
            rgba(232, 32, 58, 0.06) 0px,
            rgba(232, 32, 58, 0.06) 18px,
            transparent 18px,
            transparent 36px);
    opacity: 0.5;
}
.hero-glow-vs {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: -1;
    animation: pulseGlow-vs 5s ease-in-out infinite;
}
.hero-glow-blue-vs {
    width: 380px;
    height: 380px;
    background: #2f6bff;
    opacity: 0.28;
    top: -120px;
    left: -100px;
}
.hero-glow-red-vs {
    width: 340px;
    height: 340px;
    background: #e8203a;
    opacity: 0.22;
    bottom: -140px;
    right: 10%;
    animation-delay: 1.5s;
}
@keyframes pulseGlow-vs {
    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(1.12);
    }
}
.hero-grid-vs {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: center;
}
.hero-left-vs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}
.brand-row-vs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand-star-vs {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
.brand-text-vs {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.brand-name-vs {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.3px;
}
.brand-sub-vs {
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: #6fa0ff;
    font-weight: 900;
    margin-top: 2px;
}
.hero-title-vs {
    font-family: 'Anton', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    font-size: 7rem;
    display: flex;
    flex-direction: column;
    letter-spacing: 2.5px;
}
.hero-title-white-vs {
    color: #fff;
    font-weight: 900;
    text-shadow: 0 0 50px rgb(1 17 55), 0 4px 0 rgb(0 0 0 / 96%);
}
.hero-title-gold-vs {
    background: linear-gradient(180deg, #fff6da 0%, #ffa81b 5%, #f9c251 45%, #ed9609 67%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    filter: drop-shadow(0 4px 0 rgb(10, 6, 0)) drop-shadow(0 0 18px rgb(1, 0, 51));
}
.hero-ribbon-vs {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background: linear-gradient(100deg, #a8101f 0%, #b20017 50%, #a8101f 100%);
    color: #fff;
    font-size: 3.2rem;
    font-weight: 900;
    font-family: cursive;
    padding: 8px 26px;
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0% 100%);
    box-shadow: 0 6px 20px rgba(248, 5, 37, 0.649);
    transform: rotate(-1.2deg);
    margin-top: 2px;
}
.ribbon-star-vs {
    width: 36px;
    height: 100%;
    fill: #ffffff;
}
.hero-tagline-vs {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 2px;
}
.hero-right-vs {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-america-camp {
    background-image: url(../images/pages_image/bg-america-camp.jpg);
    width: 100%;
    background-size: contain;
    background-repeat: repeat;
}
.hero-ballot-box-vs img {
    width: 60%;
}
.hero-ballot-box-vs {
    width: 100%;
    filter: drop-shadow(0 4px 0 rgb(10, 6, 0)) drop-shadow(0 0 18px rgb(1, 0, 51));
}
.grid-2-vs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
/* css comparison end */
/* css ample campaign start */
/* --- OUTER WRAPPER --- */
.outer-wrapper-e-temp {
    width: 100%;
    display: flex;
    padding-top: 100px;
    justify-content: center;
    align-items: flex-start;
}
.red-e-temp {
    color: #ca0411;
}
.purple-e-temp {
    color: #3f0295;
}
.header-bar-e-temp {
    background: linear-gradient(45deg, #00061d, #10082c);
    padding: 12px;
}
.header-inner-e-temp {
    display: flex;
    align-items: center;
    width: 100%;
}
.header-logo-e-temp {
    width: 55%;
    display: flex;
    align-items: center;
}
.header-logo-e-temp img {
    width: 80%;
}
.header-divider-e-temp {
    width: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-divider-e-temp div {
    width: 2px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
}
.header-tagline-e-temp {
    width: 42%;
    padding-left: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.55;
    letter-spacing: 0.5px;
}
.hero-section-e-temp {
    padding: 25px 4px 0 12px;
}
.hero-inner-e-temp {
    display: flex;
    align-items: flex-start;
    width: 100%;
}
.hero-left-e-temp {
    width: 65%;
    padding-right: 10px;
}
.hero-headline-e-temp {
    font-size: 55px;
    font-weight: bold;
    color: #150631;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -1.5px;
}
.hero-subheadline-e-temp {
    font-size: 48px;
    font-weight: bold;
    color: #ca0411;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
}
.hero-body-e-temp {
    font-size: 24px;
    color: #150631;
    line-height: 1.65;
    margin-bottom: 10px;
}
.hero-body-e-temp:last-of-type {
    margin-bottom: 35px;
}
.hero-body-e-temp .purple-e-temp {
    font-weight: bold;
}
.qr-row-e-temp {
    display: flex;
    align-items: center;
}
.qr-row-e-temp img {
    width: 30%;
    height: 30%;
    border: 3px solid #380793;
    padding: 2px;
    border-radius: 6px;
    margin-right: 12px;
}
.qr-text-wrap-e-temp {
    text-align: left;
}
.qr-arrow-e-temp {
    font-size: 80px;
    font-weight: bold;
    color: #380793;
    line-height: 0.7;
    transform: rotate(27deg);
    display: inline-block;
}
.qr-text-e-temp {
    font-size: 35px;
    font-weight: bold;
    color: #380793;
    line-height: 1.3;
    letter-spacing: 0.5px;
}
.hero-right-e-temp {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.hero-right-e-temp img {
    width: 75%;
    border-radius: 24px;
}
/* ============================================
   SECTION 3: HOW IT WORKS
   ============================================ */
.how-it-works-e-temp {
    padding: 0 12px 12px;
    margin-top: 80px;
    background-color: #ffffff;
}
.section-tab-e-temp {
    display: inline-block;
    background-color: #1a0b2e;
    padding: 8px 24px;
    border-radius: 10px 10px 0 0;
    font-size: 25px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
}
.steps-container-e-temp {
    border: 2px solid #e5e0eb;
    border-top: 3px solid #1a0b2e;
    border-radius: 0 12px 12px 12px;
    padding: 30px 8px 25px;
}
.steps-row-e-temp {
    display: flex;
    justify-content: space-between;
}
.step-item-e-temp {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px;
    text-align: center;
}
.step-icon-e-temp {
    width: 50%;
    margin-bottom: 10px;
}
.step-number-e-temp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 28px;
    margin-bottom: 8px;
}
.step-number-e-temp.purple-e-temp {
    background: linear-gradient(#400283, #21005c);
    color: #ffffff;
}
.step-number-e-temp.red-e-temp {
    background-color: #ca0411;
    color: #ffffff;
}
.step-text-e-temp {
    font-size: 22px;
    color: #150631;
    line-height: 1.45;
    padding: 0 2px;
}
.step-text-e-temp strong {
    color: #150631;
}
/* ============================================
   SECTION 4: BENEFITS
   ============================================ */
.benefits-section-e-temp {
    padding: 60px 12px;
    margin-top: 50px;
    background-color: #f7f5fa;
}
.benefits-row-e-temp {
    display: flex;
    align-items: stretch;
}
.benefits-col-left-e-temp {
    width: 35%;
    padding-right: 8px;
}
.benefits-col-right-e-temp {
    width: 35%;
    padding-left: 8px;
}
.benefits-col-center-e-temp {
    width: 30%;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Card headers */
.card-header-e-temp {
    padding: 8px 14px;
    border-radius: 10px 10px 0 0;
    font-size: 25px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.8px;
    text-align: center;
}
.card-header-e-temp.campaign-e-temp {
    background: linear-gradient(#3c017f, #450290);
}
.card-header-e-temp.voter-e-temp {
    background-color: #ca0411;
}
/* Card body */
.card-body-e-temp {
    border: 1.5px solid #e0dbe5;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background-color: #ffffff;
    padding: 18px 12px;
}
/* Benefit items */
.benefit-item-e-temp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.benefit-item-e-temp:last-child {
    margin-bottom: 0;
}
.benefit-icon-e-temp {
    width: 75px;
}
.benefit-text-e-temp {
    padding-left: 8px;
}
.benefit-title-e-temp {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2px;
}
.benefit-title-e-temp.campaign-e-temp {
    color: #3c017f;
}
.benefit-title-e-temp.voter-e-temp {
    color: #ca0411;
}
.benefit-desc-e-temp {
    font-size: 14px;
    color: #150631;
    line-height: 1.4;
}
/* Center win section */
.center-image-e-temp {
    border-radius: 50%;
    border: 4px solid #e8d0e8;
    width: 70%;
    margin-bottom: 15px;
}
.win-text-e-temp {
    font-size: 20px;
    font-weight: 900;
    color: #1a0b2e;
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.3px;
}
.win-text-e-temp .red-e-temp {
    color: #ca0411;
}
.win-text-e-temp .purple-e-temp {
    color: #3c017f;
}
/* ============================================
   SECTION 5: CTA
   ============================================ */
.cta-section-e-temp {
    background-image: url('https://apelections.b-cdn.net/campaign_assets/cta_background.jpg');
    background-color: #1a0b2e;
    background-size: cover;
    background-position: center;
    padding: 60px 12px;
}
.cta-inner-e-temp {
    display: flex;
    align-items: center;
}
.cta-left-e-temp {
    width: 50%;
    padding-right: 15px;
}
.cta-heading-e-temp {
    font-size: 25px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}
.cta-subtext-e-temp {
    font-size: 20px;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 18px;
}
.cta-subtext-e-temp .purple-e-temp {
    color: #9b1cff;
    font-weight: bold;
}
.cta-qr-box-e-temp {
    background-color: rgb(0, 4, 38);
    border: 1px solid #9f00f4;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
}
.cta-qr-box-e-temp img {
    border-radius: 6px;
    border: 2px solid #ffffff;
    width: 130px;
    height: 130px;
    margin-right: 12px;
}
.cta-qr-text-e-temp {
    font-size: 25px;
    color: #ffffff;
}
.cta-qr-text-e-temp span {
    color: #cccccc;
}
.cta-qr-link-e-temp {
    font-size: 20px;
    font-weight: bold;
    color: #ca0411;
    margin-top: 2px;
}
.cta-right-e-temp {
    width: 50%;
}
.cta-features-e-temp {
    display: flex;
    justify-content: space-between;
}
.cta-feature-e-temp {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3px;
    text-align: center;
}
.cta-feature-e-temp img {
    width: 70%;
    margin-bottom: 8px;
}
.cta-feature-label-e-temp {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.3;
    font-weight: 300;
}
/* css  ample campaign end */
/* css  election campaign ads start */
.text-yellow-campaign {
    color: #f5c518;
}
/* ---------- HERO SECTION ---------- */
.hero-section-campaign {
    background: linear-gradient(135deg, #0d0d2b 0%, #0d0225 60%, #0d0d2b 100%);
    padding: 110px 0 24px;
    border-bottom: 2px solid #2d1a6e;
}
.text-pink-campaign {
    color: #f2255c;
}
.text-purple-campaign {
    color: #7035f3;
}
.hero-icon-wrap-campaign {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
}
.hero-megaphone-campaign {
    font-size: 1.5rem;
    color: #fff;
}
.hero-headline-campaign {
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0;
}
.hero-sub-campaign {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.hero-link-campaign {
    color: #60a5fa;
    text-decoration: underline;
    font-weight: 600;
}
.hero-link-campaign:hover {
    color: #93c5fd;
}
.hero-meta-campaign {
    font-size: 0.78rem;
    color: #94a3b8;
}
/* Rewards Card */
.rewards-card-campaign {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border: 1px solid #4338ca;
    border-radius: 14px;
    padding: 18px 16px;
    min-height: 120px;
}
.rewards-gift-icon-campaign {
    font-size: 2rem;
    color: #8640ff;
    flex-shrink: 0;
}
.rewards-card-title-campaign {
    font-size: 0.78rem;
    color: #e2e8f0;
    line-height: 1.4;
}
.rewards-icons-row-campaign {
    gap: 4px;
}
.reward-item-campaign {
    flex: 1;
    padding: 6px 2px;
}
.reward-icon-campaign {
    font-size: 1.3rem;
    color: #ffffff;
    display: block;
    margin-bottom: 4px;
}
.reward-label-campaign {
    font-size: 0.65rem;
    color: #cbd5e1;
    font-weight: 500;
    line-height: 1.2;
}
/* Trophy Card */
.trophy-card-campaign {
    background: linear-gradient(135deg, #6d127c 0%, #5626dc 40%, #2e1cb9 100%);
    border-radius: 14px;
    padding: 18px 16px;
    min-height: 120px;
    border: 1px solid #a60bff;
}
.trophy-icon-wrap-campaign {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trophy-icon-campaign {
    font-size: 2rem;
    color: #eea000;
}
.trophy-text-campaign {
    font-size: 0.75rem;
    color: #fee2e2;
    font-weight: 600;
    line-height: 1.4;
}
.trophy-sub-campaign {
    font-size: 0.72rem;
    color: #fecaca;
    line-height: 1.3;
}
.trophy-amount-campaign {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.amount-dollar-campaign {
    font-size: 2rem;
    font-weight: 900;
    color: #f5c518;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.row-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
}
.stars-icon-campaign {
    font-size: 0.8rem;
    color: #f5c518;
}
/* ---------- CHANNELS SECTION ---------- */
.channels-section-campaign {
    background-color: #f5f6fa;
}
.media-section-campaign {
    background-color: #f5f6fa;
}
.channel-img-campaign-r-2 {
    max-height: 400px !important;
}
.channel-card-campaign {
    background: #ffffff;
    align-items: center;
    text-align: center;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.channel-card-campaign:hover {
    box-shadow: 0 8px 30px rgba(92, 60, 200, 0.13);
    transform: translateY(-4px);
}
.channel-header-campaign {
    margin-bottom: 8px;
}
.channel-icon-circle-campaign {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}
.channel-icon-campaign {
    font-size: 1.1rem;
    color: #ffffff;
}
.channel-title-campaign {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.channel-desc-campaign {
    font-size: 1rem;
    color: #021634;
    line-height: 1.5;
    margin-bottom: 12px;
    padding: 0 35px;
}
.channel-img-wrap-campaign {
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    width: 100%;
}
.channel-img-campaign {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    max-height: 350px;
    filter: drop-shadow(2px 4px 6px #7c3aed);
}
/* ---------- FOOTER SECTION ---------- */
.footer-section-campaign {
    background: linear-gradient(135deg, #0d0d2b 0%, #1a0a3c 100%);
    border-top: 2px solid #2d1a6e;
}
.footer-brand-campaign {
    padding-right: 12px;
}
.footer-brand-icon-campaign {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}
.footer-chart-icon-campaign {
    font-size: 1.4rem;
    color: #f5c518;
}
.footer-brand-text-campaign {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
}
.footer-feature-campaign {
    display: flex;
    align-items: flex-start;
    padding-left: 7px;
    gap: 5px;
}
.footer-check-campaign {
    color: #7c22c5;
    font-size: 1.2rem;
    margin-top: 0;
    flex-shrink: 0;
}
.footer-feature-title-campaign {
    font-size: 0.78rem;
    color: #f1f5f9;
    display: block;
    font-weight: 700;
}
.footer-feature-desc-campaign {
    font-size: 10px;
    color: #ffffff;
    line-height: 1.4;
}
.g-grid.icon-flex {
    border-left: 1px solid #ffffff63;
}
.footer-cta-campaign {
    padding: 12px 0;
}
.footer-cta-text-campaign {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.4;
}
.footer-gift-icon-campaign {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #7c2d12, #ef4444);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #f5c518;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
}
.footer-amount-campaign {
    font-size: 1.8rem;
    font-weight: 900;
    color: #f5c518;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
}
/* election campaign ads end */
/* how it work new start */
.hero-banner-how-w {
    width: 100%;
    animation: float-card 4s ease-in-out infinite;
}
.hero-banner-how-w img {
    width: 100%;
}
p.fz-hw {
    font-size: 35px !important;
}
.hero-checklist-how-w li {
    font-size: 1rem;
    color: #ffffff;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero-checklist-how-w i {
    color: #c1023c;
    font-size: 1.2rem;
}
a.btn-how-w {
    font-size: 18px !important;
}
.steps-section-how-w {
    background: #f0f1f6;
    padding: 80px 0;
}
.section-title-how-w {
    font-family: "Outfit", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.3;
}
.accent-green-how-w {
    color: #22c55e;
}
.step-card-how-w {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.step-card-how-w:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.12);
}
.step-number-how-w {
    width: 36px;
    height: 36px;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.step-number-how-w-1 {
    box-shadow: 0 3px 10px rgba(79, 58, 237, 0.4);
    background: linear-gradient(135deg, #3a3ded, #2d21b6);
}
.step-number-how-w-2 {
    box-shadow: 0 3px 10px rgba(237, 58, 58, 0.4);
    background: linear-gradient(135deg, #ed3a3a, #b62121);
}
.step-number-how-w-3 {
    box-shadow: 0 3px 10px rgba(237, 58, 162, 0.4);
    background: linear-gradient(135deg, #ed3a82, #b6213a);
}
.step-number-how-w-4 {
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.4);
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
.step-icon-wrap-how-w {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(168, 85, 247, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.3rem;
    color: #7c3aed;
}
.step-title-how-w {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.step-desc-how-w {
    font-size: 0.82rem;
    color: #1e1b4b;
    margin-bottom: 16px;
    flex-grow: 1;
}
.step-img-how-w {
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-qr-mock-how-w {
    font-size: 4rem;
    color: #7c3aed;
    opacity: 0.7;
}
.step-coins-mock-how-w {
    display: flex;
    gap: 8px;
    font-size: 2.5rem;
    color: #f5a623;
}
.step-url-pill-how-w {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}
img.flag-usa-hero {
    position: absolute;
    width: 50%;
    right: 0;
    bottom: 0;
}
.experience-section-how-w {
    background: linear-gradient(180deg, #0d0d2b 0%, #1a0a3c 100%);
    padding: 80px 0;
}
.section-title-light-how-w {
    font-family: "Outfit", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}
.accent-purple-how-w {
    background: linear-gradient(90deg, #5a55f7, #3a4eed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.exp-card-how-w {
    background: #0d0a3999;
    border: 2px solid rgb(100 17 241);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
}
.exp-card-how-w:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.5);
}
.exp-accent-bar-how-w {
    height: 4px;
    width: 100%;
}
.accent-purple-bar-how-w {
    background: linear-gradient(90deg, #5500e7, #6101bc);
}
.accent-blue-bar-how-w {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.accent-pink-bar-how-w {
    background: linear-gradient(90deg, #ec4899, #f472b6);
}
.accent-orange-bar-how-w {
    background: linear-gradient(90deg, #f5a623, #ff6b35);
}
.accent-teal-bar-how-w {
    background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}
.accent-red-bar-how-w {
    background: linear-gradient(90deg, #ef4444, #f87171);
}
.exp-card-body-how-w {
    padding: 20px 20px 0 20px;
}
.exp-icon-how-w {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}
.bg-purple-how-w {
    background: linear-gradient(135deg, #7c3aed, #8235ca, #6100b1)
}
.bg-blue-how-w {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.bg-pink-how-w {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}
.bg-orange-how-w {
    background: linear-gradient(135deg, #f5a623, #ff6b35);
}
.bg-teal-how-w {
    background: linear-gradient(135deg, #14b8a6, #2dd4bf);
}
.bg-red-how-w {
    background: linear-gradient(135deg, #ef4444, #f87171);
}
.exp-card-title-how-w {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}
.exp-card-desc-how-w {
    font-size: 0.75rem;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 12px;
}
.exp-card-visual-how-w {
    background: rgba(15, 12, 40, 0.5);
    border-radius: 10px;
    padding: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Mock elements for experience cards */
.exp-mock-bars-how-w {
    width: 100%;
}
.mock-bar-how-w {
    height: 8px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    border-radius: 4px;
    margin-bottom: 8px;
    opacity: 0.7;
}
.mock-bar-how-w:last-child {
    margin-bottom: 0;
}
.exp-mock-list-how-w {
    width: 100%;
}
.mock-list-item-how-w {
    font-size: 0.75rem;
    color: #94a3b8;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mock-list-item-how-w i {
    color: #3b82f6;
    font-size: 0.8rem;
}
.exp-mock-video-how-w {
    font-size: 3rem;
    color: #ec4899;
    opacity: 0.6;
}
.exp-mock-combo-how-w {
    display: flex;
    gap: 20px;
    font-size: 2rem;
    color: #f5a623;
    opacity: 0.6;
}
.exp-mock-news-how-w {
    width: 100%;
}
.mock-news-line-how-w {
    height: 6px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
    margin-bottom: 6px;
}
.mock-news-block-how-w {
    width: 100%;
    height: 40px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 6px;
    margin-bottom: 8px;
}
/* Build Experience Bar */
.build-bar-how-w {
    background: #0d0a3999;
    border: 2px solid rgb(100 17 241);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.build-bar-title-how-w {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0;
}
.build-option-how-w {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    border: 1px solid rgba(124, 58, 237, 0.25);
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgb(50 0 227 / 48%);
    border-radius: 8px;
    padding: 4px 10px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.2s;
    cursor: pointer;
}
.build-option-how-w i {
    font-size: 1.3rem;
    color: #a855f7;
}
.build-option-how-w:hover {
    color: #fff;
}
.voter-ads-how-w {
    display: grid;
    width: 100%;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
}
.voter-ads-how-w img {
    width: 100%;
    margin-top: -60px;
}
/* Reward Pills */
.reward-pill-how-w {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
}
.reward-pill-how-w:hover {
    transform: translateY(-3px);
    color: #fff;
}
.reward-pill-how-w i {
    font-size: 2rem;
}
.reward-pills-how-w {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
}
.pill-green-how-w {
    background: linear-gradient(135deg, #8000d0, #6102a4);
    box-shadow: 0 4px 15px rgba(126, 34, 197, 0.4);
    border: 2px solid #8722c5;
}
.pill-blue-how-w {
    background: linear-gradient(135deg, #2e2ba4, #172f96);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    border: 2px solid #2e2ba4;
}
.pill-pink-how-w {
    background: linear-gradient(135deg, #ac2d6c, #a00c4f);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    border: 2px solid #980056;
}
.pill-orange-how-w {
    background: linear-gradient(135deg, #b47511, #ea580c);
    box-shadow: 0 4px 15px rgba(245, 166, 35, 0.4);
    border: 2px solid #b47511;
}
.pill-green-how-w:hover {
    box-shadow: 0 8px 25px rgba(113, 34, 197, 0.404);
}
.pill-blue-how-w:hover {
    box-shadow: 0 8px 25px rgba(68, 59, 246, 0.418);
}
.pill-pink-how-w:hover {
    box-shadow: 0 8px 25px rgba(236, 72, 165, 0.393);
}
.pill-orange-how-w:hover {
    box-shadow: 0 8px 25px rgba(245, 165, 35, 0.336);
}
/* ---------- 6. SHARE EVERYWHERE ---------- */
.share-section-how-w {
    background: #f0f1f6;
    padding: 80px 0;
}
.share-card-how-w {
    background: #fff;
    border-radius: 16px;
    padding: 20px 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}
.share-card-how-w:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(124, 58, 237, 0.12);
}
.share-icon-how-w {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.share-card-title-how-w {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0;
}
.share-card-desc-how-w {
    font-size: 0.78rem;
    color: #1e1b4b;
    line-height: 1.5;
    margin-bottom: 12px;
}
.share-card-img-how-w {
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
    padding: 4px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}
.share-card-img-how-w img {
    border-radius: 8px;
    object-fit: contain;
    max-height: 180px;
}
.share-card-banner-how-w {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
}
.mock-banner-how-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    padding: 12px;
}
.mock-banner-how-w i {
    font-size: 1.5rem;
    color: #f5a623;
}
.share-tagline-how-w {
    font-size: 1rem;
    color: #7c3aed;
}
.share-card-header-how-w {
    justify-content: center;
}
.analytics-features-how-w {
    gap: 10px;
    flex-direction: column;
    display: flex;
}
.dashboard-preview-col-how-w img:hover {
    transform: skewX(0deg) !important;
}
.analytics-feature-item-how-w {
    background: linear-gradient(-150deg, #12007a2b 0%, #0f031021 50%, #0b0538 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(124, 58, 237, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-med), box-shadow var(--transition-med);
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #ffffff;
    transition: all var(--transition-fast);
}
.outer-glow-container-how-w {
    background: linear-gradient(145deg, #ff007f 0%, #4d00ff 50%, #030816 100%);
    padding: 2px;
    border-radius: 20px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* Main Inner Card Background */
.inner-content-how-w {
    background: linear-gradient(180deg, #0a1128 0%, #050b1a 100%);
    border-radius: 18px;
    padding: 10px;
    height: 100%;
}
.display-cus-4 {
    font-size: 1.9rem;
}
/* Header Banner */
.header-box-how-w {
    background-color: #121c40;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Section Cards (Voters and Follow-up) */
.segment-card-how-w,
.message-card-how-w {
    background-color: rgba(18, 28, 64, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Avatar Overlapping Group */
.avatar-group-how-w {
    padding-left: 15px;
    /* Compensate for negative margin */
}
.avatar-how-w {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #121c40;
    margin-left: -15px;
    object-fit: cover;
    background-color: #fff;
}
/* Pink Arrow */
.arrow-icon-how-w {
    color: #e6399b;
    font-size: 1.2rem;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(230, 57, 155, 0.4);
}
/* White Message Bubble */
.message-bubble-how-w {
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    /* Gives the chat bubble feel */
}
/* Link Styling */
.link-text-how-w {
    color: #4d00ff;
    font-weight: 700;
    font-size: 0.95rem;
}
/* Send Icon Button Container */
.send-icon-wrapper-how-w {
    background: linear-gradient(135deg, #4d00ff, #2b00ff);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.col-custom-1 {
    width: 20%;
}
.col-custom-2 {
    width: 55%;
}
.col-custom-3 {
    width: 25%;
}
.analytics-row-h-w {
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start;
    align-content: flex-start;
}
.card-wrapper-how-w {
    border-radius: 20px;
    border: 1px solid rgb(0 0 0 / 12%);
    max-width: 950px;
    width: 100%;
    height: 100%;
}
/* Typography */
.heading-text-how-w {
    color: #120767 !important;
    font-size: 1.8rem;
    letter-spacing: -0.5px;
}
.step-label-how-w {
    color: #160e54;
    font-size: 0.95rem;
    line-height: 1.25;
    text-align: center;
}
.footer-text-how-w {
    color: #433c7a;
    /* Lighter grayish purple */
    font-size: 1.05rem;
    max-width: 700px;
    line-height: 1.5;
}
/* Circular Icon Containers */
.icon-circle-how-w {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid rgb(0 29 110 / 20%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}
/* Flex item width control to prevent squishing */
.step-item-how-w {
    width: 140px;
}
/* Purple Gradient Icons */
.purple-icon-how-w {
    font-size: 2.2rem;
    /* CSS trick to create a gradient text/icon */
    background: -webkit-linear-gradient(45deg, #4814b8, #6f34e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Adjust the arrow position to align with circles, not the text */
.arrow-container-how-w {
    padding-top: 35px;
    width: 40px;
}
.arrow-icon-how-w {
    color: #5d25c6;
    font-size: 1.2rem;
    font-weight: 900;
}
/* Coin Image Styling */
.coin-img-how-w {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 2px;
}
.heading-2-text-how-w {
    font-size: 20px;
    color: #5d2dbc;
}
.bg-dark-blue-how-w {
    background-color: #020b1f;
}
/* Action item container behavior */
.action-item-how-w {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}
.action-item-how-w:hover {
    opacity: 0.7;
}
/* Base styling for all vector icons */
.icon-style-how-w {
    color: #ffffff;
    font-size: 1.35rem;
    /* Scales perfectly on all devices */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Slight sizing adjustment to match the specific chain-link shape weight */
.link-icon-fix-how-w {
    font-size: 1.6rem;
    margin-left: -4px;
}
/* Typography matching the uploaded image */
.label-text-how-w {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    line-height: 1;
}
.earn-how-w {
    color: rgb(255, 20, 39);
    font-weight: 600;
    margin-bottom: 20px;
}
.pts-how-w {
    background: linear-gradient(135deg, #ff3c7a 0%, #f63b3b 50%, #ee2222 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.d-flex-earn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.fz-set-2 {
    font-size: 15px;
    display: flex !important;
    align-items: center;
    font-weight: 500;
    width: max-content;
    padding: 6px 50px !important;
    justify-self: center;
}
/* how it work new end */
/* press media start */
.bg-body-press {
    background-color: #000b2c;
}
.hero-section-press {
    margin-top: 60px;
    background-color: #000b2c;
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    background-image: url(../images/pages_image/press-hero-bg.png);
}
.display-hero-txt {
    font-size: 5rem;
}
/* Typography & Colors */
.text-primary-custom-press {
    background: linear-gradient(135deg, #ff1bb5 0%, #ff5d9e 30%, #a078ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-danger-press {
    color: #e62020 !important;
}
.text-purple-press {
    color: #8b3dff !important;
}
.text-light-muted-press {
    color: #9ba1cc !important;
}
.hover-text-primary-press:hover {
    color: #d6006e !important;
}
.hover-text-white-press:hover {
    color: #ffffff !important;
}
.fs-sm {
    font-size: 0.875rem !important;
}
.fs-xs {
    font-size: 0.75rem !important;
}
/* Buttons */
.btn-primary-custom-press {
    background-color: #d6006e !important;
    border-color: #d6006e !important;
    color: #ffffff !important;
}
.btn-primary-custom-press:hover {
    background-color: #ff007f !important;
    border-color: #ff007f !important;
}
.btn-outline-custom-press {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}
.btn-outline-custom-press:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Hero Section */
.hero-section-press {
    position: relative;
}
.hero-bg-image-press {
    background-size: cover;
    background-position: left center;
    border-radius: 60% 0 0 60%;
    opacity: 0.7;
    filter: brightness(0.8);
    right: 0;
    top: 0;
    width: 55%;
    height: 100%;
}
.hero-bottom-bar-press {
    height: 15px;
    background: linear-gradient(90deg, #ff0000 0%, #ffffff 50%, #0000ff 100%);
    opacity: 0.8;
}
/* Latest Release */
.badge-date-press {
    background-color: #5c20ff !important;
    color: white;
}
.latest-release-section-press-border {
    border: 2px solid rgba(148, 157, 255, 0.307);
    padding: 40px;
    border-radius: 20px;
}
.link-primary-custom-press {
    color: #f152ff !important;
    transition: color 0.2s ease;
    font-size: 20px;
}
.link-primary-custom-press:hover {
    color: #ff007f !important;
}
/* Cards & Borders */
.bg-card-custom-press {
    background: linear-gradient(-360deg, #00000057, transparent) !important;
}
.bg-card-custom-press-2 {
    background-color: #131456 !important;
}
.border-card-custom-press {
    border: 1px solid #23264d !important;
}
.border-top-custom-press {
    border-top: 1px solid #23264d !important;
}
.border-bottom-custom-press {
    border-bottom: 1px solid #23264d !important;
}
/* Hover Effects */
.logo-hover-press {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fs-logos {
    font-size: 40px;
      font-weight: 500 !important;
    font-family: "Anton", sans-serif;
}
.fs-logos-2 {
    font-size: 46px;
    font-family: 'Poppins' !important;
    font-weight: 400 !important;
}
.mar-top {
    margin-top: -20px !important;
    margin-right: -60px;
}
.fs-finance {
    font-size: 25px;
    color: #d7b3f5;
}
.fs-logos-3 {
    font-size: 45px;
}
.fs-logos-4 {
    font-size: 45px;
    font-family: auto;
    color: blue !important;
    line-height: 0.8;
}
.fs-logos-5 {
    font-size: 60px;
    font-family: auto;
}
.logo-hover-press:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: #3b3f7a !important;
}
.resource-card-hover-press {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.resource-card-hover-press:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: #3b3f7a !important;
}
.hover-lift-press {
    transition: transform 0.2s ease;
}
.hover-lift-press:hover {
    transform: translateY(-2px);
}
.transition-press {
    transition: all 0.2s ease;
}
/* Icon Boxes */
.icon-box-custom-press {
    width: 60px;
    height: 60px;
    background-color: rgb(123 40 246 / 30%);
    color: #ffb6dc;
    border-radius: 100% !important;
}
/* Media Contact Section */
.contact-banner-wrapper-press {
    min-height: 300px;
}
.contact-img-bg-press {
    background-size: cover;
    background-position: center;
}
.fs-icon-about {
    font-size: 45px;
}
.fs-footersec-icon {
    font-size: 45px;
}
.text-primary-custom-press-icon {
    background: linear-gradient(135deg, #aa7aff 0%, #ad7fff 30%, #a03ffb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fs-press-heading {
    font-size: 20px;
    font-weight: 500 !important;
}
.fs-sm-font {
    font-size: 15px;
    color: rgb(179, 193, 245);
}
.contact-gradient-overlay-press {
    background: linear-gradient(90deg, #131456 10%, rgba(17, 19, 43, 0.7) 40%, rgba(17, 19, 43, 0) 100%);
}
.bg-primary-custom-press {
    background-color: #8b3dff !important;
}
/* Banner section */
.banner-bg-press {
    background-color: #000542;
}
.feature-item-press {
    flex: 1;
    min-width: 200px;
}
/* Social Icons */
.social-icon-press {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}
/* Utilities */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5) !important;
}
/* press media end */
/* earn media start */
/* Base Wrapper */
.page-wrapper-e-media {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 15px;
    background-color: #ffffff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.04);
}
/* Section Containers */
.section-wrapper-e-media {
    padding: 25px 20px;
    position: relative;
}
/* Top Header & Navbar */
.header-wrapper-e-media {
    padding: 18px 24px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0eafc;
}
.brand-logo-img-e-media {
    height: 48px;
    width: auto;
    object-fit: contain;
}
.nav-link-custom-e-media {
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    padding: 8px 16px;
    transition: color 0.2s ease-in-out;
}
.nav-link-custom-e-media:hover {
    color: #4e2aab;
}
.btn-purple-e-media {
    background-color: #4e2aab;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(78, 42, 171, 0.25);
    transition: all 0.25s ease;
}
.btn-purple-e-media:hover {
    background-color: #3b1e93;
    box-shadow: 0 6px 16px rgba(78, 42, 171, 0.35);
    transform: translateY(-1px);
}
/* Hero Section */
.hero-section-e-media {
    padding-bottom: 60px;
    margin-top: 100px;
    position: relative;
    overflow: hidden;
}
.hero-bg-capitol-e-media {
    position: absolute;
    top: 0;
    right: 15%;
    width: 500px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}
.hero-bg-flag-e-media {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 260px;
    opacity: 0.15;
    pointer-events: none;
}
.hero-title-e-media {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 3.3rem;
    font-weight: 800;
    overflow: visible;
    z-index: 999;
    position: relative;
    line-height: 1.15;
    color: #1e1b4b;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    white-space: nowrap;
}
.highlight-purple-e-media {
    color: #1e1b4b;
}
.highlight-red-e-media {
    color: #d32f2f;
    white-space: nowrap;
}
.hero-subtitle-e-media {
    font-size: 1.3rem;
    color: #1e1b4b;
    line-height: 1.6;
    margin-bottom: 30px;
}
.highlight-purple-e-media-bold {
    color: #4e2aab;
}
.feature-pill-group-e-media {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
    margin-bottom: 30px;
}
.feature-pill-item-e-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1.5px solid #e9e1fa;
    border-radius: 12px;
    padding: 12px 18px;
    min-width: 100px;
}
.feature-pill-icon-e-media {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f1ebfd;
    color: #1e1b4b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 6px;
    padding: 40px;
}
.feature-pill-text-e-media {
    font-size: 0.72rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.non-partisan-badge-e-media {
    display: inline-block;
    background: linear-gradient(45deg, #02002a, #4e2aab, #170054);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px rgba(78, 42, 171, 0.2);
}
.hero-mockup-container-e-media {
    position: relative;
    text-align: center;
}
.hero-laptop-img-e-media {
    width: 100%;
    height: auto;
}
/* Section Title Styling */
.section-header-title-e-media {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    align-content: center;
    justify-content: center;
}
.title-badge-text-e-media {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e1b4b;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.title-diamond-e-media {
    color: #4e2aab;
    font-size: 0.9rem;
}
.title-line-e-media {
    height: 2px;
    width: 60px;
    background: linear-gradient(90deg, transparent, #4e2aab, transparent);
    display: inline-block;
}
/* How It Works Section */
.how-it-works-grid-e-media {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    position: relative;
}
.step-card-e-media {
    background-color: #ffffff;
    border: 1px solid #eee8f8;
    border-radius: 12px;
    padding: 30px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step-card-e-media:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(78, 42, 171, 0.08);
    border-color: #d6c7f8;
}
.step-badge-number-e-media {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #4e2aab;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.step-icon-box-e-media {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    /* background: linear-gradient(45deg, #02002a, #4e2aab, #170054); */
    background: linear-gradient(45deg, #191382, #9d77fe, #170054, #837dff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    margin-bottom: 12px;
    /* border: 1px solid #e7ddfa; */
}
.step-title-text-e-media {
    font-size: 1rem;
    font-weight: 600;
    color: #1e1b4b;
    margin-bottom: 6px;
    line-height: 1.25;
}
.step-desc-text-e-media {
    font-size: 0.9rem;
    color: #020f22;
    line-height: 1.35;
}
/* The Voter Experience Frame Container */
.voter-exp-container-e-media {
    border: 2px solid #e2d7f8;
    border-radius: 20px;
    padding: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
    /* margin-bottom: 40px; */
}
.voter-exp-header-e-media {
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #4e2aab;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
    text-transform: uppercase;
}
.voter-screens-grid-e-media {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.phone-mockup-wrapper-e-media {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.phone-screen-card-e-media {
    width: 100%;
    max-width: 200px;
    height: 380px;
    background-color: #0d111a;
    border-radius: 28px;
    padding: 10px;
    border: 4px solid #232a3b;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}
.phone-notch-bar-e-media {
    width: 40%;
    height: 12px;
    background-color: #232a3b;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin: -10px auto 8px auto;
}
.phone-content-inner-e-media {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    font-size: 0.72rem;
    padding: 4px;
    overflow: hidden;
}
.phone-step-badge-e-media {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #4e2aab;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 6px 0;
}
.phone-step-desc-e-media {
    font-size: 0.9rem;
    font-weight: 600;
    color: #031632;
    text-align: center;
    line-height: 1.3;
}
/* Custom UI mockups inside phone screens */
.phone-btn-red-e-media {
    background-color: #d32f2f;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin: 4px auto;
}
.phone-btn-purple-e-media {
    background-color: #4e2aab;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: block;
    width: 80%;
    margin: 6px auto;
    border: none;
}
.phone-qr-box-e-media {
    background-color: #ffffff;
    padding: 6px;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    margin: 8px auto;
}
.phone-candidate-img-e-media {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}
.reaction-emojis-row-e-media {
    display: flex;
    justify-content: space-around;
    margin: 6px 0;
    font-size: 1.3rem;
}
.radio-option-item-e-media {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 6px 10px;
    margin-bottom: 6px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
}
/* 3-Column Earned Media & Analytics Section */
.earned-media-card-e-media {
    background-color: #ffffff;
    border: 1px solid #e9e2f7;
    border-radius: 16px;
    padding: 24px 20px;
    height: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}
.earned-media-header-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: #4e2aab;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.media-feature-item-e-media {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.media-feature-icon-e-media {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f3ebfe;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    /* background: linear-gradient(45deg, #02002a, #4e2aab, #170054); */
    background: linear-gradient(45deg, #191382, #9d77fe, #170054, #837dff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    flex-shrink: 0;
    padding: 30px;
    border: 1px solid #4e2aab;
}
.media-feature-title-e-media {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e1b4b;
    margin-bottom: 2px;
}
.media-feature-desc-e-media {
    font-size: 0.76rem;
    color: #1e1b4b;
    line-height: 1.35;
}
/* Notification Phone Card */
.notif-phone-frame-e-media {
    background-color: #0d111a;
    border-radius: 32px;
    padding: 12px;
    border: 5px solid #1f2937;
    max-width: 210px;
    margin: 0 auto;
    height: 400px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.notif-card-box-e-media {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px;
    margin-top: 50px;
    color: #1e1b4b;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.notif-card-header-e-media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.notif-card-body-e-media {
    font-size: 0.72rem;
    color: #334155;
    line-height: 1.3;
}
/* Analytics Stats Grid */
.stat-box-grid-e-media {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.stat-metric-card-e-media {
    background-color: #ffffff;
    border: 1px solid #eee7f8;
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.stat-label-e-media {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1e1b4b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.stat-value-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #1e1b4b;
}
/* Chart Cards */
.chart-box-card-e-media {
    background-color: #ffffff;
    border: 1px solid #eee7f8;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}
.chart-title-e-media {
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}
.chart-svg-line-e-media {
    width: 100%;
    height: 60px;
}
/* Progress Bars for Top Issues */
.issue-progress-row-e-media {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.68rem;
}
.issue-name-label-e-media {
    width: 70px;
    font-weight: 600;
    color: #475569;
}
.progress-bar-bg-e-media {
    flex: 1;
    height: 8px;
    background-color: #f1edfb;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-fill-e-media {
    height: 100%;
    background-color: #4e2aab;
    border-radius: 4px;
}
.issue-val-percent-e-media {
    width: 32px;
    font-weight: 700;
    color: #1e1b4b;
    text-align: right;
}
/* Bottom 3-Column Section */
.bottom-col-card-e-media {
    background-color: #ffffff;
    border: 1px solid #eae3f7;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
}
.bottom-col-header-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: #4e2aab;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.check-list-item-e-media {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
}
.check-icon-circle-e-media {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4e2aab;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 2px;
}
/* Channel Icons Grid */
.channel-grid-e-media {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
}
.channel-item-box-e-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}
.channel-icon-circle-e-media {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    /* background: linear-gradient(45deg, #02002a, #4e2aab, #170054); */
    background: linear-gradient(45deg, #191382, #9d77fe, #170054, #837dff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    padding: 30px;
    margin-bottom: 6px;
    border: 1px solid #e7dcfa;
}
.channel-label-e-media {
    font-size: 0.68rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}
/* Value Callout Block */
.reward-callout-box-e-media {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #e2d6f7;
}
.callout-bold-purple-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #4e2aab;
    display: block;
}
.callout-bold-red-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: #d32f2f;
    display: block;
}
/* CTA Banner Card */
.cta-card-wrapper-e-media {
    background: linear-gradient(135deg, #0d1326 0%, #171d33 100%);
    border-radius: 20px;
    padding: 36px 30px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(13, 19, 38, 0.3);
    margin-bottom: 30px;
}
.cta-flag-overlay-e-media {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 300px;
    opacity: 0.12;
    pointer-events: none;
}
.qr-code-container-e-media {
    background-color: #ffffff;
    padding: 12px;
    border-radius: 16px;
    display: inline-block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.qr-code-img-e-media {
    width: 130px;
    height: 130px;
}
.cta-title-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 10px;
    color: #ffffff;
}
.cta-subtitle-e-media {
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.cta-domain-highlight-e-media {
    color: #a78bfa;
    font-weight: 700;
}
.cta-badge-grid-e-media {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.cta-trust-badge-e-media {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(107 7 159);
    border-radius: 12px;
    padding: 10px 14px;
}
.cta-badge-icon-e-media {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(45deg, #611382, #300248, #380054, #783cdf);
    color: #dfd7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    padding: 40px;
    flex-shrink: 0;
}
.cta-badge-text-e-media {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.25;
}
/* Footer Section */
.footer-wrapper-e-media {
    text-align: center;
    padding: 30px 20px 40px 20px;
    background-color: #ffffff;
    border-top: 1px solid #f1edfb;
}
.footer-tagline-e-media {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.footer-stars-row-e-media {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
}
.star-blue-e-media {
    color: #2563eb;
}
.star-red-e-media {
    color: #dc2626;
}
.blogs-section-blog-media {
    padding: 60px 30px;
}
/* Main Blogs Heading */
.blogs-heading-blog-media {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    margin-left: 10px;
}
/* Single Blog Card Styling */
.blog-card-blog-media {
    background-color: #1e0858 !important;
    /* Slightly lighter dark blue for the card body */
    border: none;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    /* For image rounded corners */
}


.card-content-blog-carousal.p-00{
    padding: 0 !important;
    margin-top: 30px;
    color: white;
}

.card-image-blog-carousal.p-00 img{
    border-radius: 10px;
}


.dark-coolr{
    color: #1e0858 !important;
}
.dark-coolr span{
    color: #500078 !important;
}



.nav-buttons-blog-carousal.media-arrow button {
    background-color: #00053c30;

}

.media-arrow-2 button{
    color: white !important;
}



/* Image Wrapper with Rounded Corners */
.blog-image-wrap-blog-media {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
/* Ensure images are fluid and cover their area */
.blog-image-wrap-blog-media img {
    width: 100%;
    height: 200px;
    /* Fixed height for image area consistency */
    object-fit: cover;
    /* Images cover the space perfectly without distortion */
}
/* Date Badge Wrapper */
.blog-date-wrap-blog-media {
    margin-bottom: 15px;
}
.blog-card-blog-press-media {
    background-color: #1e0858;
}
/* Date Badge Styling */
.blog-date-badge-blog-media {
    background-color: #4e2aab;
    /* Specific purple badge color */
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    /* Fully rounded badge shape */
    display: inline-block;
}
/* Blog Post Title Styling */
.blog-title-blog-media {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 15px;
}
/* Blog Post Excerpt Styling */
.blog-excerpt-blog-media {
    font-size: 15px;
    line-height: 1.6;
    color: #aab;
    /* Lighter gray text for the excerpt */
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Limit excerpt to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Read More Link Wrapper */
.blog-read-more-wrap-blog-media {
    margin-top: auto;
    /* Pushes the Read More link to the bottom of the card */
}
/* Read More Link Styling */
.read-more-link-blog-media {
    color: #bc94ff;
    /* Specific purple color for the link */
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
/* Styling the arrow icon */
.read-more-link-blog-media .arrow-blog-media {
    font-size: 20px;
    margin-left: 10px;
    color: inherit;
}
/* Hover effect for the link */
.read-more-link-blog-media:hover {
    color: #ffffff;
}
.blogs-heading-blog-media-2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.gre-color {
    background: linear-gradient(135deg, #940acf 0%, #a91eef 30%, #e6dbff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: ctransparent;
    background-clip: text;
}
/* earn media end */
/* mediadetail start */
.page-wrapper-media-details {
    background-color: #060b26;
    background-image: radial-gradient(circle at 50% 0%, #111a4d 0%, #060b26 70%);
    color: #e2e8f0;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding-top: 110px;
    overflow-x: hidden;
}
a.breadcrumb-item-custom-media-details {
    color: #da8fff;
    text-decoration: none;
    font-size: 15px;
}
a.back-link-media-details {
    color: #e0aafb;
    text-decoration: none;
    font-size: 15px;
}
span.breadcrumb-active-media-details {
    font-size: 15px;
}
.hero-section-media-details {
    padding: 20px 0 40px;
}
.date-badge-media-details {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
    margin-bottom: 18px;
}
.hero-title-media-details {
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
.hero-lead-media-details {
    color: #cbe0ff;
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 24px;
    font-weight: 400;
}
.share-container-media-details {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.share-label-media-details {
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.9rem;
}
.share-btn-media-details {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 23, 54, 0.8);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s ease;
}
.share-btn-media-details:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
.hero-img-box-media-details {
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(124, 58, 237, 0.2);
    transition: transform 0.3s ease;
}
.hero-img-box-media-details:hover {
    transform: scale(1.01);
}
.hero-img-media-details {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* Main Article Content & Sidebar Layout */
.content-wrapper-media-details {
    padding: 30px 0 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.article-body-media-details {
    color: #cbe0ff;
    font-size: 0.98rem;
    line-height: 1.75;
}
.dateline-media-details {
   color: #ffffff;
    font-weight: 700;
    font-size: 20px;
}
.paragraph-block-media-details {
    margin-bottom: 20px;
}
/* Quote Box Callout */
.quote-box-media-details {
    background: linear-gradient(135deg, rgba(13, 23, 66, 0.9) 0%, rgba(20, 31, 80, 0.9) 100%);
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 30px 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    position: relative;
}
.quote-text-media-details {
    color: #e2e8f0;
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0;
}
/* Benefits Section */
.benefits-section-media-details {
    margin-top: 35px;
}
.benefits-title-media-details {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.benefits-grid-media-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.benefit-item-media-details {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #cbd5e1;
}
.check-icon-media-details {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #7c3aed, #d946ef);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 3px;
}
/* Sidebar Styling */
.sidebar-wrapper-media-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sidebar-card-media-details {
    background: rgba(11, 19, 53, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 26px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.widget-title-media-details {
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 700;
    margin-bottom: 22px;
    padding-bottom: 8px;
}
.feature-item-media-details {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}
.feature-item-media-details:last-child {
    margin-bottom: 0;
}
.feature-icon-media-details {
    width: 44px;
    height: 44px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c084fc;
    font-size: 20px;
    flex-shrink: 0;
}
.feature-heading-media-details {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.feature-desc-media-details {
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
/* Sidebar Testimonial Card */
.quote-icon-large-media-details {
    color: #7c3aed;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 12px;
}
.sidebar-quote-text-media-details {
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 20px;
}
.author-block-media-details {
    display: flex;
    align-items: center;
    gap: 14px;
}
.author-avatar-media-details {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #7c3aed;
}
.author-name-media-details {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}
.author-role-media-details {
    color: #94a3b8;
    font-size: 0.8rem;
    margin: 0;
}
/* Sidebar Media Contact Widget */
.contact-item-media-details {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #cbd5e1;
    font-size: 0.9rem;
    margin-bottom: 14px;
}
.contact-item-media-details:last-child {
    margin-bottom: 0;
}
.contact-icon-media-details {
    color: #c084fc;
    font-size: 1.1rem;
}
/* Carousel Section Styling */
.section-wrapper-media-details {
    padding: 40px 0;
}
.section-header-media-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.section-title-media-details {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}
.section-title-highlight-media-details {
    color: #c084fc;
}
.carousel-controls-media-details {
    display: flex;
    gap: 10px;
}
.carousel-arrow-btn-media-details {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 54, 0.8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.carousel-arrow-btn-media-details:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
}
/* Cards Design */
.card-item-media-details {
    background: rgba(11, 19, 53, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.card-item-media-details:hover {
    transform: translateY(-6px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(124, 58, 237, 0.2);
}
.card-img-box-media-details {
    position: relative;
    height: auto;
    overflow: hidden;
}
.card-img-media-details {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.card-item-media-details:hover .card-img-media-details {
    transform: scale(1.08);
}
.card-date-badge-media-details {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(124, 58, 237, 0.9);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 50px;
}
.card-body-custom-media-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}
.card-title-text-media-details {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 16px;
}
.card-link-media-details {
    color: #c084fc;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.card-link-media-details:hover {
    color: #ffffff;
    transform: translateX(4px);
}
/* Callout Banner */
.banner-callout-media-details {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #4c1d95 100%);
    border-radius: 20px;
    padding: 36px 40px;
    margin: 40px 0 60px;
    box-shadow: 0 15px 35px rgba(91, 33, 182, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.banner-left-media-details {
    display: flex;
    align-items: center;
    gap: 20px;
}
.banner-icon-media-details {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    flex-shrink: 0;
}
.banner-title-media-details {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.banner-text-media-details {
    color: #e9d5ff;
    font-size: 0.95rem;
    margin: 0;
}
.banner-btn-media-details {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.banner-btn-media-details:hover {
    background: #ffffff;
    color: #5b21b6;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* --- Visual Styling --- */
.custom-card {
    background-color: #12142b;
    border: 1px solid #1f2244;
    border-radius: 12px;
    overflow: hidden;
}
.custom-img {
    border-bottom: 2px solid #2a2d5c;
}
.custom-date-badge {
    bottom: 12px;
    left: 12px;
    background-color: #8b5cf6;
    /* Purple color matching the design */
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}
.read-more-link {
    color: #a78bfa;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}
.read-more-link:hover {
    color: #c4b5fd;
}
.custom-nav-btn {
    background-color: #161832;
    border: 1px solid #2a2d5c;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.custom-nav-btn:hover {
    background-color: #2a2d5c;
    color: white;
}






/* carousal blog  */



/* Header Styling */
.header-blog-carousal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.header-blog-carousal h2 {
  font-size: 28px;
  margin: 0;  color:#fff;
  font-weight: 700;
}

.header-blog-carousal h2 span {
  color:#a78bfa;
}

/* Navigation Buttons */
.nav-buttons-blog-carousal {
  display: flex;
  gap: 12px;
}

.nav-buttons-blog-carousal button {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
}

.nav-buttons-blog-carousal button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Carousel Track & Mask */
.carousel-container-blog-carousal {
  overflow: hidden;
  width: 100%;
}

.carousel-track-blog-carousal {
  display: flex;
  gap: 20px;
}

/* Individual Cards */
.card-blog-carousal {
  background-color:rgb(21, 4, 38);
  border-radius: 12px;
    border: 1px solid rgba(216, 95, 250, 0.2);
  overflow: hidden;
  flex: 0 0 calc(25% - 15px);
  display: flex;
  flex-direction: column;
}

.card-image-blog-carousal {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-image-blog-carousal img {
  width: 100%;
  height: 100%;

}

.date-badge-blog-carousal {
  position: absolute;
  bottom: -17px;
  left: 8px;
  background-color: rgb(80, 0, 151);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.card-content-blog-carousal {
  padding: 30px 15px 20px 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-content-blog-carousal h3 {
  font-size: 15px;
  margin: 0 0 15px 0;
  line-height: 1.5;
  font-weight: 600;
}

.read-more-blog-carousal {
  color: rgb(205, 147, 255);
  text-decoration: none;
  font-size: 14px;
  margin-top: auto;
  font-weight: 500;
  transition: opacity 0.7s;
}

.read-more-blog-carousal:hover {
  opacity: 0.8;
}





.mt-8{
    margin-top: 100px;
}



.card-content-blog-carousal h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}











@media (min-width: 1125px) and (max-width: 1329px) {
    .video-float-h-w {
        bottom: -17%;
        right: 20%;
    }
    .candidate-float-h-w {
        bottom: -15%;
        left: -30px;
    }
}
@media (min-width: 1330px) and (max-width: 1500px) {
    .video-float-h-w {
        bottom: -17%;
        right: 30%;
    }
    .candidate-float-h-w {
        bottom: -15%;
        left: -120px;
    }
}
@media (min-width: 1399px) {
    .container {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100% !important;
        max-width: 1600px !important;
        padding-right: calc(var(--bs-gutter-x) * 1.3) !important;
        padding-left: calc(var(--bs-gutter-x) * 1.3) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}
@media (max-width: 1500px) {
    .p-left-hero-sec {
        padding-left: 23%;
    }
}
@media (max-width: 1430px) {
    .process-card {
        width: 170px !important;
    }
}
@media (max-width: 1400px) {
    .p-left-hero-sec {
        padding-left: 20%;
    }
}
@media (max-width: 1300px) {
    .p-left-hero-sec {
        padding-left: 15%;
    }
    .hero-title-vs {
        font-size: 5rem;
    }
    .hero-headline-e-temp {
        font-size: 40px;
    }
    .hero-subheadline-e-temp {
        font-size: 40px;
    }
    .hero-body-e-temp {
        font-size: 18px;
    }
    .qr-row-e-temp img {
        width: 20%;
        height: 20%;
    }
    .qr-text-e-temp {
        font-size: 18px;
    }
    .qr-arrow-e-temp {
        font-size: 50px;
    }
    .section-tab-e-temp {
        font-size: 18px;
    }
    .step-text-e-temp {
        font-size: 14px;
    }
    .card-header-e-temp {
        font-size: 20px;
    }
    .benefit-title-e-temp {
        font-size: 16px;
    }
    .cta-qr-box-e-temp img {
        width: 100px;
        height: 100px;
    }
    .cta-qr-text-e-temp {
        font-size: 18px;
    }
    .cta-qr-link-e-temp {
        font-size: 18px;
    }
    .cta-left-e-temp {
        width: 45%;
    }
    .cta-right-e-temp {
        width: 55%;
    }
    .cta-feature-e-temp img {
        width: 50%;
    }
    .hero-section-e-temp {
        padding: 0px;
    }
    .py-h-w-7 {
        padding: 7rem 0 5rem 0;
    }
}
@media (max-width: 1140px) {
    .p-left-hero-sec {
        padding-left: 8%;
    }
    .g-set-menu {
        gap: 3px;
    }
    .dashboard-panel {
        padding: 12px;
    }
    .stat-card {
        padding: 6px;
    }
    .chart-row .chart-card {
        width: 98% !important;
    }
    ul.navbar-nav.mx-auto.g-set-menu a {
        font-size: 12px !important;
        gap: 10px !important;
    }
    .process-card {
        width: 155px !important;
    }
    .py-h-w-7 {
        padding: 7rem 0 4rem 0;
    }
}
@media (min-width: 1199px) and (max-width: 1280px) {
    ul.navbar-nav.mx-auto.g-set-menu a {
        font-size: 12px !important;
        gap: 10px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .done-option-pkg .w-less-1200 {
        width: 100%;
    }
    .done-option-pkg .w-less-1200 img {
        width: 50%;
        position: absolute;
        top: 50%;
        right: 0;
    }
    .top-icons-row-pkg-2 {
        display: flex !important;
        flex-wrap: wrap;
        gap: 18px;
    }
}
@media (max-width: 1199px) {
    .neo-features-row {
        flex-direction: column;
    }
    ul.navbar-nav.mx-auto.g-set-menu a {
        font-size: 12px !important;
        gap: 10px !important;
    }
    .process-card {
        width: 280px;
    }
    .card-top {
        margin-bottom: 60px;
    }
    .card-bottom {
        margin-top: 60px;
    }
    .neo-feature {
        margin-bottom: 15px;
    }
    .neo-divider {
        display: none !important;
    }
    .neo-metrics-grid {
        flex-wrap: wrap;
        padding-top: 15px;
        margin-top: 15px;
    }
    .neo-metric {
        min-width: 50%;
        margin-bottom: 15px;
    }
    .neo-metric:nth-child(2)::after,
    .neo-metric:nth-child(4)::after {
        display: none;
    }
    /* how-it-works css */
    .how-it-works-grid-e-media {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .voter-screens-grid-e-media {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .hero-title-h-w {
        font-size: 2.5rem;
    }
    .section-title-h-w {
        font-size: 2rem;
    }
    .steps-timeline-h-w {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .step-connector-h-w {
        display: none;
    }
    .analytics-features-h-w {
        grid-template-columns: 1fr;
    }
    .hero-btns-h-w a {
        width: 70%;
        font-size: 15px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
    .candidate-float-h-w {
        left: -100px;
    }
    .benefit-card-h-w {
        padding: 16px 12px;
    }
    .benefit-card-h-w h5 {
        font-size: 15px;
        font-weight: 500 !important;
    }
    .benefit-card-h-w p {
        color: white;
        margin-bottom: 0;
        font-size: 12px;
    }
    .section-padding-h-w {
        padding: 50px 0;
    }
    .gap-set-mob {
        gap: 5px !important;
    }
    .steps-timeline-h-w {
        flex-wrap: nowrap;
        justify-content: center;
    }
    .reward-grid-h-w {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .section-trust-h-w {
        padding: 50px 0;
    }
    .campaign-timeline-h-w {
        display: flex;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
    }
    .engagement-icons-row-h-w {
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .glass-card-b-h-w {
        padding: 12px;
    }
    .engage-card-h-w,
    .glass-card-a-h-w {
        padding: 16px;
    }
    .video-float-h-w {
        right: 30%;
    }
    .hero-title-pkg {
        font-size: 2.5rem;
    }
    .p-para-hero {
        padding-right: 20%;
    }
    .pricing-card-pkg h5 {
        font-size: 15px;
    }
    .pricing-card-pkg h2 {
        font-size: 22px !important;
    }
    .main-setup-box-pkg h1 {
        font-size: 25px !important;
    }
    .main-setup-box-pkg h3 {
        font-size: 20px !important;
    }
    .main-setup-box-pkg h4 {
        font-size: 20px !important;
    }
    i.icon-big-pkg {
        font-size: 30px;
    }
    .leadership-grid-about {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-title-sol {
        font-size: 3rem;
        margin-bottom: 5px !important;
    }
    .hero-desc-sol {
        font-size: 1rem;
        max-width: 600px;
        line-height: 1.6;
    }
    .hero-stats-sol {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    .solution-card-sol {
        padding: 12px !important;
    }
    .process-step-sol {
        padding: 10px;
    }
    .card-body-pkg {
        padding: 16px;
    }
    .d-f-card-pkg {
        display: flex !important;
        flex-direction: column;
    }
    .grid-set-mob-pkg {
        display: grid !important;
        gap: 15px 0;
        grid-template-columns: repeat(2, 1fr);
    }
    .card-body-pkg span {
        font-size: 12px;
    }
    .main-setup-box-pkg .badge {
        font-size: 10px;
    }
    .main-setup-box-pkg .bg-light-blue {
        padding: 12px !important;
    }
    .bottom-action-pkg-p {
        padding: 0 31px !important;
    }
    .hero-ribbon-vs {
        font-size: 2.2rem;
    }
    .features-list-vs li {
        font-size: 0.7rem;
    }
    .features-list-old-vs svg {
        width: 20px;
    }
    .check-svg-vs {
        width: 20px !important;
    }
    .media-item-vs i {
        font-size: 1.3rem;
    }
    .media-item-vs {
        font-size: 0.7rem;
    }
    .panel-title-vs {
        font-size: 1.4rem;
    }
    .hero-tagline-vs {
        font-size: 1rem;
    }
    .vs-badge-container-vs {
        transform: translate(-20%, -50%);
    }
    .vs-badge-vs {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
    }
    .highlight-green-vs {
        font-size: 16px;
    }
    .features-list-vs {
        padding-left: 10px;
    }
    .earn-list-vs i {
        font-size: 1.5rem !important;
        width: 40px !important;
        height: 40px !important;
        display: flex;
        text-align: center;
        background: #000;
        padding: 10px;
        border-radius: 50%;
        border: 1px solid #3399ff;
        box-shadow: 0 0 10px rgba(51, 153, 255, 0.5);
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .earn-action-vs {
        font-weight: bold;
        font-size: 0.8rem;
    }
    .earn-points-vs {
        color: #ffcc00;
        font-size: 0.7rem;
    }
    .features-list-vs {
        gap: 5px;
    }
    .media-icons-vs {
        gap: 5px;
    }
    .earn-list-vs {
        padding: 0;
    }
    .costs-table-vs {
        font-size: 0.7rem;
    }
    .cyan-icon-vs {
        font-size: 2.0rem;
    }
    .stats-grid-vs {
        gap: 5px;
    }
    .stat-number-vs-small {
        font-size: 1.4rem;
    }
    .green-icon-vs {
        color: #8ee334;
        font-size: 2.5rem;
    }
    .stat-desc-vs {
        font-size: 0.7rem;
        color: #ffffff;
        margin-top: 5px;
        font-weight: 500;
    }
    .stats-grid-vs {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
    }
    .stat-number-vs {
        font-size: 1.4rem;
    }
    .chart-label-vs {
        font-size: 11px;
        width: 100px;
        text-align: right;
    }
    .chart-row-vs {
        font-size: 0.7rem;
    }
    .hero-section-press {
        margin-top: 0px;
    }
    .display-hero-txt {
        font-size: 4rem;
    }
    .my-set-res {
        margin: 0 !important;
    }
    .feature-pill-icon-e-media {
        font-size: 1.5rem;
        padding: 30px;
    }
    .feature-pill-item-e-media {
        padding: 10px;
        min-width: 100px;
    }
    .feature-pill-group-e-media {
        gap: 8px;
        flex-wrap: nowrap;
        margin-bottom: 20px;
    }
    .hero-title-e-media {
        margin-bottom: 20px;
        font-size: 2.6rem;
        padding-bottom: 20px;
    }
    .hero-subtitle-e-media {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }
    .voter-exp-header-e-media {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 55px;
    }
    .media-feature-icon-e-media {
        font-size: 1.7rem;
        padding: 24px;
        border: 1px solid #4e2aab;
    }
    .media-feature-desc-e-media {
        font-size: 0.76rem;
        color: #1e1b4b;
        line-height: 1.2;
    }
    .media-feature-item-e-media {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 12px;
    }
    .earned-media-card-e-media {
        padding: 16px;
    }
    .stat-value-e-media {
        font-size: 1.2rem;
    }
    .section-wrapper-e-media {
        padding: 25px 20px;
    }
    .bottom-col-card-e-media {
        padding: 16px;
    }
    .channel-item-box-e-media {
        padding: 0;
    }
    .channel-icon-circle-e-media {
        font-size: 1.5rem;
        padding: 26px;
    }
    .cta-badge-icon-e-media {
        font-size: 2rem;
        padding: 30px;
    }
    .cta-badge-text-e-media {
        font-size: 0.8rem;
        font-weight: 600;
    }
    .cta-title-e-media {
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.25;
        margin-bottom: 6px;
        color: #ffffff;
    }
}

@media (max-width: 1024px) {
  .card-blog-carousal {
    flex: 0 0 calc(33.333% - 13.33px);
  }
}



@media (min-width: 992px) {
    .about-border-right-press {
        border-right: 1px solid #23264d;
    }
}
@media (max-width: 991px) {
    .process-grid {
        gap: 20px;
    }


.mt-8{
    margin-top: 60px;
}

.card-content-blog-carousal {
  padding: 25px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


    .process-card {
        width: 260px;
    }
    .icon-section {
        width: 70px;
    }
    .icon-section i {
        font-size: 3em !important;
    }
    .feature-list li {
        font-size: 0.8rem;
    }
    .motivation-card-wrapper {
        justify-content: flex-end;
    }
    .container-main {
        padding-right: calc(var(--bs-gutter-x) * 0.6);
        padding-left: calc(var(--bs-gutter-x) * 0.6);
    }
    a.navbar-brand {
        width: 25%;
    }
    .p-left-hero-sec {
        padding-left: calc(var(--bs-gutter-x) * 0.6);
    }
    /* how-it-works css */
    .section-padding-h-w {
        padding: 70px 0;
    }
    .hero-title-h-w {
        font-size: 4rem;
        text-align: center;
    }
    .hero-subtitle-h-w,
    .hero-desc-h-w {
        text-align: center;
    }
    .candidate-float-h-w {
        display: none;
    }
    .video-float-h-w {
        display: none;
    }
    .analytics-card-h-w,
    .map-preview-card-h-w,
    .analytics-dashboard-h-w {
        transform: none !important;
    }
    .services-grid-h-w {
        grid-template-columns: 1fr;
    }
    .reward-grid-h-w {
        grid-template-columns: repeat(3, 1fr);
    }
    .steps-timeline-h-w {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 55px 15px;
    }
    .step-item-h-w {
        flex: unset;
    }
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 40px;
    }
    .analytics-features-h-w {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 24px;
    }
    .hero-left-content-h-w {
        text-align-last: left;
    }
    .p-para-hero {
        padding-right: 20%;
    }
    .main-setup-box-pkg {
        flex-wrap: wrap;
    }
    .done-option-pkg .w-less-1200 img {
        width: 50%;
        margin-top: -270px;
        float: right;
    }
    .comparisons-section-pkg img {
        width: 30%;
    }
    .main-setup-box-pkg .bg-light-blue {
        padding: 30px !important;
    }
    .set-mar-top {
        margin-top: -180px !important;
        display: inline-block;
        text-align-last: right;
    }
    .m-b-mob {
        margin-bottom: 50px;
    }
    .gap-mob-round {
        gap: 30px;
        margin-bottom: 30px;
    }
    .rounded-border-2-lside {
        border-radius: 20px !important;
    }
    .rounded-border-2-rside {
        border-radius: 20px !important;
    }
    .row-up-1 {
        flex-wrap: wrap !important;
    }
    .process-arrow-icon-bg {
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .bg-last-cta-sol {
        background-position: 70%;
    }
    .bg-last-cta-sol .lead {
        width: 50%;
    }
    .features-strip-sol {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .process-steps-container-sol {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-mob-2-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .top-icons-row-pkg {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px !important;
    }
    .image-set-scale-up {
        width: 30%;
        margin-top: -160px;
    }
    .w-s-100 {
        width: 100%;
    }
    .d-f-card-pkg {
        display: flex !important;
        flex-direction: row;
    }
    .hero-title-vs {
        font-size: 4rem;
    }
    .hero-ribbon-vs {
        font-size: 1.5rem;
    }
    .panel-title-vs {
        font-size: 2.4rem;
    }
    .features-list-vs li {
        font-size: 1rem;
    }
    .features-list-old-vs svg {
        width: 26px;
    }
    .media-item-vs {
        font-size: 1rem;
    }
    .media-item-vs i {
        font-size: 2rem;
    }
    .vs-badge-container-vs {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-43%, -17%) !important;
        z-index: 10;
        display: inline-block;
        width: 10%;
    }
    .panel-new-vs {
        margin-top: 20px;
    }
    .grid-3-vs {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    .earn-list-vs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .earn-list-vs i {
        font-size: 2.1rem !important;
        width: 50px !important;
        height: 50px !important;
    }
    .get-reward-vs {
        margin-top: 40px;
    }
    .benchmarks-title-vs {
        margin-top: 30px;
        text-align: center;
        font-size: 1.1rem;
    }
    .features-row-vs {
        display: grid;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 18px;
        margin-bottom: 0px;
        grid-template-columns: repeat(4, 1fr);
    }
    .footer-bottom-grid-vs {
        grid-template-columns: repeat(1, 1fr);
    }
    .feature-icon-box-vs {
        font-weight: 300;
    }
    .footer-title-vs {
        text-align: center;
        font-size: 1.2rem;
    }
    .outer-wrapper-e-temp {
        padding-top: 120px;
    }
    .hero-headline-e-temp {
        font-size: 30px;
    }
    .hero-subheadline-e-temp {
        font-size: 30px;
    }
    .hero-body-e-temp {
        font-size: 15px;
    }
    .benefit-icon-e-temp {
        width: 60px;
    }
    .cta-heading-e-temp {
        font-size: 18px;
    }
    cta-subtext-e-temp {
        font-size: 14px;
    }
    .cta-qr-box-e-temp img {
        width: 80px;
        height: 80px;
    }
    .cta-qr-text-e-temp {
        font-size: 15px;
    }
    .cta-qr-link-e-temp {
        font-size: 14px;
    }
    .cta-feature-e-temp img {
        width: 40%;
    }
    .how-it-works-e-temp {
        margin-top: 40px;
    }
    .hero-section-campaign {
        padding: 130px 0 40px 0;
    }
    .hero-headline-campaign {
        font-size: 1.1rem;
    }
    .amount-dollar-campaign {
        font-size: 1.3rem;
    }
    .set-col-tab {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .dis-block-100 {
        display: block;
        width: 100%;
    }
    .footer-cta-campaign {
        text-align: left !important;
    }
    .footer-amount-wrap-campaign {
        justify-content: flex-start !important;
    }
    .col-custom-1 {
        width: 50%;
    }
    .col-custom-3 {
        width: 50%;
    }
    .col-custom-2 {
        width: 100%;
        order: 2;
    }
    .set-in-res-row {
        display: flex;
        flex-direction: row;
    }
    .reward-mob-how-w-40 {
        width: 40%;
    }
    .reward-mob-how-w-60 {
        width: 60%;
    }
    .my-set-res {
        margin-top: 50px !important;
    }
    .text-light-muted-press {
        color: #ffffff !important;
    }
    .latest-release-section-press {
        padding: 0 !important;
    }
    .about-border-right-press h2,
    .resources-section-press h2,
    .in-news-section-press h2,
    .latest-release-section-press-border h2 {
        font-size: 40px !important;
    }
    .hero-title-e-media {
        margin-bottom: 20px;
        font-size: 3.6rem;
        padding-bottom: 0px;
    }
    .feature-pill-icon-e-media {
        font-size: 3rem;
        padding: 45px;
    }
    .feature-pill-text-e-media {
        font-size: 1.1rem;
    }
    .step-card-e-media {
        padding: 12px;
    }
    .notif-phone-frame-e-media {
        height: 360px;
    }
    .qr-code-container-e-media {
        width: 40%;
        float: left;
    }
    .hero-title-media-details {
        font-size: 1.85rem;
    }
    .benefits-grid-media-details {
        grid-template-columns: 1fr;
    }
    .banner-callout-media-details {
        flex-direction: column;
        align-items: flex-start;
    }
    .banner-btn-media-details {
        width: 100%;
        justify-content: center;
    }


    .multi-carousel .carousel-inner .carousel-item>div {
        display: none;
    }
    .multi-carousel .carousel-inner .carousel-item>div:first-child {
        display: block;
    }








}

@media (min-width: 992px) {
    .multi-carousel .carousel-inner .carousel-item-end.active,
    .multi-carousel .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }
    .multi-carousel .carousel-inner .carousel-item-start.active,
    .multi-carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

@media (min-width: 768px) {
    .multi-carousel .carousel-inner .carousel-item-end.active,
    .multi-carousel .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }
    .multi-carousel .carousel-inner .carousel-item-start.active,
    .multi-carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}


@media (max-width: 768px) {
    /* Stack vertically on mobile */
    .process-scroll-container {
        padding: 10px;
    }

      .header-blog-carousal h2 {
    font-size: 22px;
  }

  .card-blog-carousal {
    flex: 0 0 calc(50% - 10px);
  }


    .badge-premium {
        margin-bottom: 10px !important;
        font-size: 0.5rem;
    }
    .feature-ribbon .gap-md-4 {
        display: block !important;
        /* justify-content: flex-start !important; */
        /* gap: 30px !important; */
    }
    .feature-ribbon .gap-md-4 .ribbon-item {
        margin-bottom: 20px;
    }
    .bg-w-set {
        padding: 40px;
    }
    .hero-title {
        font-size: 2rem;
    }
    .mob-d-flex-set {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }
    h4.text-dangers {
        font-size: 16px;
    }
    .main-set-pending {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .text-center.header-content {
        padding: 20px;
    }
    .card-header-bg {
        padding: 32px;
    }
    .bg-blue-grad-trust,
    .feature-ribbon,
    .info-card {
        padding: 50px 20px !important;
    }
    .neo-dashboard {
        padding: 50px 20px !important;
    }
    .services-section {
        padding: 7px;
    }
    .process-card {
        width: 300px !important;
    }
    .reward-icons svg {
        width: 60px;
        height: 60px;
    }
    p.hero-subtitle {
        text-shadow: 0 0 7px red;
        font-size: 1rem !important;
        /* color: #ffffff !important; */
    }
    .btn-primary-gradient {
        font-size: 12px !important;
        padding: 14px 20px !important;
        align-self: center;
    }
    a.btn-outline-glass {
        font-size: 12px !important;
        padding: 14px 20px !important;
        align-self: center;
    }
    .d-f-set {
        display: flex;
        flex-direction: column !important;
        gap: 10px;
    }
    .process-grid {
        flex-direction: column;
        min-width: 100%;
        gap: 40px;
        padding-top: 20px;
    }
    .process-card {
        width: 100%;
        max-width: 400px;
    }
    .card-top,
    .card-bottom {
        align-self: center;
        margin-top: 0;
        margin-bottom: 0;
    }
    a.navbar-brand {
        width: 30%;
    }
    .progress-divider {
        border-right: none;
        padding-right: 0;
    }
    .encouragement-msg {
        display: none !important;
    }
    .leadership-grid-about {
        grid-template-columns: 1fr;
    }
    .team-grid-about {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .page-wrapper-about {
        padding: 40px 18px 60px;
    }
    /* Hide the complex SVG line on mobile, replace with vertical dots */
    .connecting-line {
        display: none;
    }
    .process-grid::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        background: linear-gradient(180deg, #3f51b5, #ef5350, #fb8c00, #29b6f6, #66bb6a, #ab47bc);
        z-index: 0;
        border-radius: 2px;
    }
    .process-card {
        z-index: 1;
    }
    .mob-image-rotae img {
        width: 40%;
        margin-top: -180px;
        display: flex;
        float: inline-end;
    }
    .campaign-banner-bg {
        height: 250px;
    }
    .top-navbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }
    .navbar-progress-group {
        width: 100%;
        justify-content: space-between;
    }
    .progress-divider {
        border-right: none !important;
        border-left: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .navbar-stats-group {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
        align-items: center;
    }
    .navbar-progress-group {
        font-size: 13px;
    }
    .user-profile-badge {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
        margin-top: 4px;
        border-top: 1px solid #eeeeee;
        padding-top: 8px;
    }
    .rewards-section-pkg {
        padding: 12px 0;
    }
    .hero-content-pkg {
        padding-top: 30px;
    }
    .progress-micro-track {
        flex-grow: 1;
        margin: 0 10px;
    }
    .top-icons-row-pkg {
        display: flex !important;
        flex-wrap: wrap;
    }
    .top-icons-row-pkg-2 {
        display: flex !important;
        flex-wrap: wrap;
    }
    .survey-footer-actions .order-1 {
        margin-bottom: 0.25rem;
    }
    .reward-top-split {
        flex-direction: column;
        gap: 12px;
    }
    .reward-center-line {
        width: 100%;
        height: 1px;
    }
    .reward-left,
    .reward-right {
        width: 100%;
    }
    .inner-purple-banner {
        align-items: flex-start;
    }
    .modal-bottom-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .btn-purple-continue {
        width: 100%;
        justify-content: center;
    }
    .cat-grid {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .cat-more {
        margin-top: 8px;
    }
    .header-title-wrap {
        flex-direction: column;
    }
    .trophy-icon-wrap {
        position: static;
        width: 45px;
        margin-bottom: 8px;
    }
    /* how-it-works css */
    .reward-icon-h-w {
        width: 100px;
        height: 100px;
        font-size: 3.2rem;
    }
    .section-padding-h-w {
        padding: 50px 0;
    }
    .hero-title-h-w {
        font-size: 3.8rem;
    }
    .section-title-h-w {
        font-size: 2.5rem;
    }
    .reward-flex-h-w img {
        width: 40%;
        display: flex;
        justify-self: center;
    }
    .stat-mini-h-w {
        padding: 6px;
    }
    .stat-value-h-w {
        font-size: 1rem;
    }
    .stat-label-h-w {
        font-size: 0.55rem;
    }
    .steps-timeline-h-w {
        grid-template-columns: repeat(2, 1fr);
    }
    .step-connector-h-w {
        display: none;
    }
    .reward-grid-h-w {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid-h-w {
        grid-template-columns: 1fr;
    }
    .campaign-timeline-h-w {
        flex-direction: row;
    }
    .timeline-item-h-w::after {
        display: none;
    }
    .engagement-icons-row-h-w {
        justify-content: start;
    }
    .cta-box-h-w {
        padding: 40px 20px;
    }
    .trust-row-h-w {
        gap: 12px;
    }
    .footer-links-h-w {
        gap: 16px;
    }
    .points-val-h-w {
        font-size: 1.4rem;
    }
    .result-stat-value-h-w {
        font-size: 1.4rem;
    }
    .analytics-features-h-w {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
    }
    /*  footer end */
    .earnings-divider {
        border-right: none;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .step-circle-t1 {
        padding: 10px 30px;
    }
    .step-circle-t2 {
        padding: 10px 30px;
    }
    .step-circle-t3 {
        padding: 10px 30px;
    }
    .step-circle-t4 {
        padding: 10px 30px;
    }
    .stat-icon-sol {
        width: 30px;
        height: 30px;
        margin-right: 6px !important;
        font-size: 2rem;
        padding: 22px;
        color: rgb(255 255 255);
    }
    .stat-item-sol h3 {
        font-size: 1.3rem;
    }
    .stat-item-sol p {
        font-size: 12px;
    }
    .hero-stats-sol {
        gap: 4px !important;
    }
    .grid-mob-res-set {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .bg-last-cta-sol .lead {
        width: 70%;
        font-size: 17px;
    }
    .bg-last-cta-sol {
        padding: 0 !important;
    }
    .engage-row-h-w {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0px;
    }
    .latest-release-section-press-border {

    padding: 22px;

    }

    .dis-col-mob{
        flex-direction: column !important;
    }
    .gap-set-mob {
        gap: 5px !important;
        flex-direction: row !important;
    }
    .trusted-icon-hero {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2-mob {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .bg-blue-grad-trust {
        margin-bottom: 30px;
    }
    .rewards-section-pkg .set-gutter {
        padding-right: calc(var(--bs-gutter-x) * 0.2) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.2) !important;
    }
    .bottom-action-pkg-p {
        padding: 0 15px !important;
    }
    .campaign-setup-wrapper-pkg {
        padding: 40px 13px !important;
    }
    .vs-pkg h3 {
        top: 46%;
        right: 1.5%;
    }
    .top-icons-row-pkg {
        justify-content: space-between !important;
    }
    .about-text-fz {
        font-size: 30px;
        padding-right: 0%;
    }
    .team-linkedin-about {
        align-self: center;
    }
    .hero-ballot-box-vs img {
        width: 100%;
    }
    .hero-title-vs {
        font-size: 2.5rem;
    }
    .hero-tagline-vs {
        font-size: 0.7rem !important;
        color: #ffffff;
        margin-top: 2px;
    }
    .panel-title-vs {
        font-size: 2rem;
    }
    .earn-list-vs {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    .earn-list-vs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    img.ample-icon-vs {
        width: 20%;
        filter: drop-shadow(0px 0px 4px rgba(255, 255, 0, 0.645));
    }
    .advantage-subtitle-vs {
        font-size: 1rem;
        color: #ffffff;
        font-weight: 700;
    }
    .advantage-title-vs {
        font-size: 1.3rem;
        font-weight: 800;
    }
    .advantage-checks-vs span {
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: flex-start;
        align-content: flex-start;
        text-align: -webkit-left;
    }
    .page-wrapper-e-temp {
        padding: 12px;
    }
    .page-container-e-temp {
        max-width: 100%;
    }
    .email-container-e-temp {
        max-width: 100%;
        border-radius: 6px;
    }
    .hero-inner-e-temp {
        flex-direction: column;
    }
    .hero-left-e-temp {
        width: 100%;
    }
    .outer-wrapper-e-temp {
        padding-top: 100px;
    }
    .hero-right-e-temp {
        width: 100%;
    }
    .hero-right-e-temp img {
        width: 35%;
    }
    .steps-row-e-temp {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .step-item-e-temp {
        width: 100% !important;
    }
    .hero-headline-campaign {
        font-size: 0.95rem;
    }
    .rewards-card-campaign,
    .trophy-card-campaign {
        min-height: auto;
    }
    .channel-img-wrap-campaign {
        min-height: 140px;
    }
    .footer-section-campaign {
        text-align: center;
    }
    .footer-brand-campaign {
        justify-content: center;
        padding-right: 0;
    }
    .footer-amount-wrap-campaign {
        justify-content: center !important;
    }
    .footer-cta-text-campaign {
        text-align: center;
    }
    .footer-feature-campaign {
        text-align: left;
    }
    .row-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .arrow-container-how-w {
        padding-top: 0;
        width: auto;
    }
    .icon-circle-how-w {
        width: 80px;
        height: 80px;
    }
    .purple-icon-how-w {
        font-size: 1.8rem;
    }
    .action-row-how-w {
        gap: 1.5rem !important;
        /* Forces a slightly tighter gap on very small screens */
    }
    .label-text-how-w {
        font-size: 0.85rem;
    }
    .icon-style-how-w {
        font-size: 1.15rem;
    }
    .link-icon-fix-how-w {
        font-size: 1.4rem;
    }
    .reward-pills-how-w {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-seal-icon {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
    }
    .footer-seal-icon img,
    .footer-seal-icon img.aapc-logo {
        width: 100%;
    }
    .reward-pill-how-w {
        padding: 7px 14px;
    }
    .process-flow-how-w {
        gap: 5px !important;
    }
    .voter-screens-grid-e-media {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .how-it-works-grid-e-media {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .hero-title-e-media {
        margin-bottom: 20px;
        font-size: 2.8rem;
        padding-bottom: 0px;
        white-space: normal;
    }
    .feature-pill-icon-e-media {
        font-size: 1.5rem;
        padding: 30px;
    }
    .feature-pill-text-e-media {
        font-size: 0.8rem;
    }
    .stat-box-grid-e-media {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .highlight-red-e-media {
        color: #d32f2f;
        white-space: normal !important;
    }
    .hero-title-media-details {
        font-size: 1.5rem;
    }
    .section-title-media-details {
        font-size: 1.25rem;
    }
    .banner-left-media-details {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom-bar-media-details {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .breadcrumb-wrapper-media-details {
        flex-direction: column;
    }
}
@media (max-width: 576px) {
    .campaign-last-name {
        font-size: 2.5rem;
    }
    .campaign-first-name {
        font-size: 1.1rem;
    }
    .campaign-serif-motto {
        font-size: 1rem;
    }
    a.navbar-brand {
        width: 50%;
    }
    .feature-icon-box-vs i {
        /* CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX; */
        font-size: 2rem !important;
    }
    .feature-icon-red-box-vs i {
        /* CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX; */
        font-size: 2.5rem;
    }
    .feature-icon-pink-box-vs i {
        /* CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX; */
        font-size: 2.5rem;
    }
    .feature-icon-box-vs,
    .panel-pricing-vs {
        font-size: 0.7rem;
    }
    .features-row-vs {
        gap: 5px;
    }
    .grid-2-vs,
    .panel-content-new-vs {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
    .vs-badge-container-vs {
        position: absolute;
        left: 50%;
        top: 53%;
        transform: translate(-43%, -7%) !important;
        z-index: 10;
        display: inline-block;
        width: 10%;
    }
    /* how-it-works css */
    .gap-set-mob {
        gap: 5px !important;
        flex-direction: column !important;
    }
    .hero-title-h-w {
        font-size: 2.5rem;
    }
    .campaign-timeline-h-w {
        flex-direction: column;
    }
    .hero-subtitle-h-w {
        font-size: 1rem;
        text-align: left;
    }
    .p-para-hero p {
        text-align: left;
    }
    .hero-btns-h-w a {
        width: 100%;
        text-align: center;
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-content: center;
    }
    .btn-outline-custom-h-w {
        display: flex;
        gap: 10px;
    }
    .set-chart-h-w {
        display: flex;
        flex-direction: column;
    }
    .usa-map-h-w img {
        width: 100%;

    }

    .carousel-track-blog-carousal {
  display: flex;
  gap: 5px;
}

    .voter-exp-header-e-media {
        text-align: center;
        margin-top: 20px;
        font-size: 1.8rem;
        margin-bottom: 35px;
        letter-spacing: 0;
    }
    .section-title-h-w {
        font-size: 2rem;
    }
    .reward-icon-h-w {
        width: 100px;
        height: 100px;
        font-size: 3.2rem;
    }
    .steps-timeline-h-w {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .engage-row-h-w {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0px;
    }
    .py-h-w-7 {
        padding: 7rem 0px 60px 0px;
    }
    .cta-buttons-h-w a {
        display: block !important;
        width: 100%;
    }
    .timeline-label-h-w {
        font-size: 1.2rem;
    }
    .timeline-action-h-w {
        font-size: 1rem;
    }
    .eng-icon-h-w {
        width: 75px;
        height: 75px;
        font-size: 2.4rem;
    }
    .trust-card-h-w {
        padding: 10px 30px;
    }
    .trust-row-h-w div {
        margin-top: 10px;
    }
    .reward-flex-h-w img {
        width: 60%;
        text-align: center;
        display: flex;
        place-self: anchor-center;
    }
    .timeline-dot-h-w {
        width: 25px;
        height: 25px;
    }
    .chart-row .chart-card.white-bg-h-w {
        padding: 18px;
    }
    .reward-grid-h-w {
        grid-template-columns: repeat(2, 1fr);
    }
    .engagement-icons-row-h-w {
        gap: 8px;
    }
    .eng-icon-h-w {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .scroll-indicator-h-w {
        display: none;
    }
    .chart-row {
        display: flex;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 15px;
        flex-direction: column;
        align-items: center;
    }
    .engagement-icons-row-h-w {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
    }
    .eng-icon-h-w {
        width: 80px;
        height: 80px;
        font-size: 2.9rem;
    }
    .glass-card-h-w {
        padding: 12px;
    }
    .grid-2-mob {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .campaign-timeline-h-w {
        display: flex;
        align-items: flex-start;
    }
    .set-mar-top {
        margin-top: 0 !important;
        display: inline-block;
        text-align-last: left;
    }
    .vs-pkg h3 {
        top: 45%;
        right: 0;
    }
    .bottom-action-pkg-p {
        padding: 0 15px !important;
    }
    .top-icons-row-pkg-2 {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 30px;
    }
    .bg-last-cta-about {
        background-size: cover;
        background-position: left;
    }
    .vs-badge-container-vs {
        position: absolute;
        left: 50%;
        top: 51%;
        transform: translate(-95%, -12%) !important;
        z-index: 10;
        display: inline-block;
        width: 10%;
    }

    .fs-logos {
    font-size: 24px;

}
.fs-logos-2 {
    font-size: 32px;

}

.fs-logos-3 {
    font-size: 38px;
}

.fs-logos-4 {
    font-size: 36px;
}

.fs-logos-5 {
    font-size: 40px;
    font-family: auto;
}
    .page-wrapper-e-temp {
        padding: 0;
    }
    .email-container-e-temp {
        border-radius: 0;
        box-shadow: none;
    }
    /* HEADER */
    .header-inner-e-temp {
        flex-wrap: wrap;
        justify-content: center;
    }
    .header-logo-e-temp {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    .header-logo-e-temp img {
        width: 60%;
    }
    .header-divider-e-temp {
        display: none;
    }
    .header-tagline-e-temp {
        width: 100%;
        text-align: center;
        padding-left: 0;
        font-size: 13px;
    }
    /* HERO */
    .hero-section-e-temp {
        padding: 20px 12px 0;
    }
    .hero-inner-e-temp {
        flex-direction: column;
    }
    .hero-left-e-temp {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .hero-headline-e-temp {
        font-size: 24px;
    }
    .hero-subheadline-e-temp {
        font-size: 20px;
    }
    .hero-right-e-temp {
        width: 100%;
        justify-content: center;
    }
    .hero-right-e-temp img {
        max-width: 200px;
    }
    .blogs-heading-blog-media-2 {
        display: flex;
        /* flex-direction: column; */
        justify-content: space-between;
    }
    .qr-row-e-temp {
        justify-content: center;
    }
    /* HOW IT WORKS */
    .steps-container-e-temp {
        padding: 20px 8px 15px;
    }
    .steps-row-e-temp {
        flex-wrap: wrap;
        gap: 20px 0;
        justify-content: center;
    }
    .step-item-e-temp {
        width: 33.33%;
    }


.blog-card-blog-media{
    padding: 8px;
}


.card-content-blog-carousal h3{
    font-size: 12px;
}






    .step-icon-e-temp {
        width: 50%;
    }
    /* BENEFITS */
    .benefits-section-e-temp {
        padding: 20px 12px;
    }
    .benefits-row-e-temp {
        flex-direction: column;
        gap: 20px;
    }
    .benefits-col-left-e-temp,
    .benefits-col-right-e-temp {
        width: 100%;
        padding: 0;
    }
    .benefits-col-center-e-temp {
        width: 100%;
        padding: 20px 0;
        order: -1;
    }
    /* CTA */
    .cta-section-e-temp {
        padding: 20px 12px;
    }
    .cta-inner-e-temp {
        flex-direction: column;
        gap: 20px;
    }
    .cta-left-e-temp {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }
    .cta-qr-box-e-temp {
        justify-content: center;
    }
    .cta-right-e-temp {
        width: 100%;
    }
    .cta-features-e-temp {
        justify-content: space-around;
    }
    .cta-feature-e-temp img {
        width: 50px;
    }
    .hero-icon-wrap-campaign {
        width: 40px;
        height: 40px;
    }
    .hero-megaphone-campaign {
        font-size: 1.2rem;
    }
    .channel-card-campaign {
        padding: 16px 12px;
    }
    .footer-amount-campaign {
        font-size: 1.4rem;
    }
    .set-in-res-row {
        display: flex;
        flex-direction: column;
    }
    .reward-mob-how-w-40 {
        width: 80%;
        place-self: anchor-center;
    }
    .reward-mob-how-w-60 {
        width: 80%;
        place-self: anchor-center;
    }
    .col-custom-1 {
        width: 100%;
    }
    .col-custom-2 {
        width: 100%;
    }
    .col-custom-3 {
        width: 100%;
    }
    .my-set-res {
        margin-top: 20px !important;
    }
    .hero-section-press {
        margin-top: 60px;
        padding-bottom: 0 !important;
    }
    .blogs-section-blog-media {
        padding: 50px 20px;
    }
    .cta-badge-grid-e-media {
        grid-template-columns: 1fr;
    }

    .date-badge-blog-carousal{
        font-size: 10px;
    }
    .phone-screen-card-e-media {
        width: 100%;
        max-width: 160px;
        min-width: 160px;
    }
    .voter-exp-container-e-media {
        padding: 0px;
    }
    .voter-screens-grid-e-media {
        grid-template-columns: repeat(2, 1fr);
        gap:30px 0;
        padding-bottom: 40px;
    }
}
@media (max-width: 480px) {
    .thankyou-container {
        padding: 25px 15px;
    }
    .header-section h1 {
        font-size: 1.8rem;
    }
    .alert-banner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        align-items: center;
    }
    .alert-left {
        flex-direction: column;
        text-align: center;
    }
    .badge-title-vs {
        font-weight: 900;
        font-size: 1rem;
    }
    .price-amount-vs {
        font-size: 5rem;
    }
    .risk-free-badge-vs {
        bottom: -45px;
    }
    .earn-list-vs li {
        display: flex;
        align-items: center;
        gap: 6px;
        text-align: left;
    }
    img.ample-icon-vs {
        width: 30%;
    }
    .features-strip-sol {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-stats-sol {
        gap: 4px !important;
        display: flex !important;
        flex-flow: wrap !important;
    }
    .process-steps-container-sol {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .process-arrow-icon-bg {
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .info-box-sol-grid {
        padding: 0px;
        gap: 20px !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .section-title-sol {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }
    .hero-title-sol {
        font-size: 2.3rem;
    }
    .leader-card-about {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .leader-avatar-about {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }
    .linkedin-badge-about {
        align-self: center;
    }
    .team-card-about {
        flex-wrap: wrap;
        padding: 14px;
    }
    .hero-headline-e-temp {
        font-size: 20px;
    }
    .hero-subheadline-e-temp {
        font-size: 17px;
    }
    .step-item-e-temp {
        width: 50%;
    }
    .cta-features-e-temp {
        flex-wrap: wrap;
        gap: 15px;
    }
    .cta-feature-e-temp {
        width: 45%;
    }
    .benefits-section-e-temp {
        margin-top: 10px;
    }
    .how-it-works-e-temp {
        padding: 0;
    }
    .hero-section-e-temp {
        padding: 0px;
    }
    .section-tab-e-temp {
        font-size: 12px;
    }
    .steps-row-e-temp {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .step-number-e-temp {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .card-header-e-temp {
        font-size: 15px;
    }
    .cta-inner-e-temp {
        padding: 5px;
    }
    .cta-subtext-e-temp {
        font-size: 12px;
    }
    .how-it-works-grid-e-media {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        /* Prevents a small gap that breaks the hover state */
    }
}
img.image-set-scale-up {
    width: 40%;
    margin-top: -30px;
}