@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');


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

.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: #64748b;
    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: #64748b;
    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: #64748b;
    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;
}

.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: #64748b;
    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: #64748b;
    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: #64748b;
    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: #64748b !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: #64748b;
    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: #64748b;
    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 */


/* Responsive adjustments */

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

}


@media (max-width: 991px) {
    .process-grid {
        gap: 20px;
    }


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


}


@media (max-width: 768px) {

    /* Stack vertically on mobile */
    .process-scroll-container {
        padding: 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;
    }

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


}


@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%;
    }

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


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

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

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

}


@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;

    }


}


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