/* ============================================================
   RapziEats Landing Page - Bold Geometric Design
   Complete visual override of main.css
   Sharp edges, bold typography, alternating dark/light sections,
   geometric accents, numbered features, split layouts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ---- CSS Variables ---- */
:root {
    --base-1: #E23744 !important;
    --base-rgb: 226, 55, 68 !important;
    --base-2: #FF6B6B !important;
    --base-rgb-2: 255, 107, 107 !important;
    --header-bg: #FFFFFF !important;
    --body-clr: #64748B !important;
    --title-clr: #0F172A !important;
    --title-rgb: 15, 23, 42 !important;
    --body-bg: #FFFFFF !important;
    --section-bg: #F8FAFC !important;
    --white: #ffffff !important;
    --white-clr: #ffffff !important;
    --border-clr: rgba(0, 0, 0, 0.06) !important;
    --border-light: rgba(0, 0, 0, 0.06) !important;
    --heading-fonts: 'Plus Jakarta Sans', sans-serif !important;
    --body-fonts: 'Plus Jakarta Sans', sans-serif !important;
    --card-bg: #ffffff;
    --surface-gray: #F1F5F9;
    --hint-clr: #94A3B8;
    --gradient-primary: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%);
    --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.1);
}

/* ============================================================
   1. GLOBAL STYLES
   ============================================================ */
html {
    scroll-behavior: smooth !important;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: #FFFFFF !important;
    color: #64748B !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1.7 !important;
    overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
}

p {
    margin-top: 0 !important;
}

p:last-child {
    margin-bottom: 0 !important;
}

a {
    transition: all 0.25s ease !important;
}

::selection {
    background: #E23744;
    color: #fff;
}

::-moz-selection {
    background: #E23744;
    color: #fff;
}

/* Custom Scrollbar - Thin, Subtle */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(1deg); }
    66% { transform: translateY(8px) rotate(-1deg); }
}

@keyframes heroFloatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes geometricPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Kill the original scrollToTop animation */
@keyframes scrollToTop {
    0% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

/* ============================================================
   2. HEADER - Solid White, Clean, Sticky
   ============================================================ */
header {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    transition: box-shadow 0.3s ease !important;
}

header.active {
    background: #FFFFFF !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
    animation: none !important;
}

header.active::after {
    display: none !important;
}

.navbar-bottom-wrapper {
    padding: 14px 0 !important;
}

.navbar-bottom-wrapper .logo {
    height: 42px !important;
    max-width: 170px !important;
}

.navbar-bottom-wrapper .menu li a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    padding: 8px 18px !important;
    border-radius: 0 !important;
    transition: color 0.25s ease !important;
    letter-spacing: 0.2px !important;
    background: transparent !important;
    position: relative !important;
}

.navbar-bottom-wrapper .menu li a:hover,
.navbar-bottom-wrapper .menu li a.active {
    color: #E23744 !important;
    background: transparent !important;
}

.navbar-bottom-wrapper .menu li a span::before {
    display: none !important;
}

/* Header CTA - Outlined, fills on hover */
.header--btn {
    border: 2px solid #E23744 !important;
    border-radius: 8px !important;
    color: #E23744 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 8px 24px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.header--btn:hover {
    background: #E23744 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(226, 55, 68, 0.3) !important;
}

.dropdown--btn {
    font-weight: 600 !important;
    color: #0F172A !important;
}

.dropdown-list {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #FFFFFF !important;
}

.dropdown-list li a {
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    transition: all 0.2s ease !important;
}

.dropdown-list li a:hover {
    background: #F8FAFC !important;
    color: #E23744 !important;
    padding-left: 24px !important;
}

/* Responsive Nav */
@media (max-width: 991.9px) {
    .navbar-bottom-wrapper .menu {
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 20px !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ============================================================
   3. HERO / BANNER SECTION - Dark, Left-Aligned, Geometric Blobs
   ============================================================ */
.banner-section {
    background: #0F172A !important;
    padding: 0 !important;
    min-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Hero blob - large red gradient circle, right side */
.banner-section::before {
    content: '' !important;
    position: absolute !important;
    top: 10% !important;
    right: -5% !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(226, 55, 68, 0.25) 0%, rgba(226, 55, 68, 0.05) 50%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    animation: heroFloat 10s ease-in-out infinite !important;
    z-index: 1 !important;
}

/* Hero blob small - pink circle, offset */
.banner-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 15% !important;
    right: 15% !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    animation: heroFloatSlow 14s ease-in-out infinite !important;
    z-index: 1 !important;
}

/* Hide original decorative shapes */
.banner-svg-img,
.banner-shape-1,
.banner-shape-2,
.cloud-img {
    display: none !important;
}

.banner-section .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Geometric accent - rotated square, left */
.banner-section .container::before {
    content: '' !important;
    position: absolute !important;
    top: 15% !important;
    right: 5% !important;
    width: 80px !important;
    height: 80px !important;
    border: 2px solid rgba(226, 55, 68, 0.15) !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
    animation: geometricPulse 4s ease-in-out infinite !important;
}

/* Geometric accent - small diamond, right */
.banner-section .container::after {
    content: '' !important;
    position: absolute !important;
    bottom: 20% !important;
    right: 20% !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 107, 107, 0.1) !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
    animation: geometricPulse 6s ease-in-out infinite reverse !important;
}

/* Banner content - LEFT aligned */
.banner-content {
    text-align: left !important;
    max-width: 700px !important;
    margin: 0 !important;
    padding: 80px 0 !important;
    position: relative !important;
    z-index: 3 !important;
    animation: fadeInUp 0.8s ease-out !important;
}

.banner-content .title {
    font-size: 56px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
    letter-spacing: -2px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.75) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.banner-content img {
    max-height: 52px !important;
    margin-bottom: 28px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
}

.banner-content .text {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.7 !important;
    max-width: 500px !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Hero badge */
.hero-badge {
    display: inline-block !important;
    background: rgba(226, 55, 68, 0.12) !important;
    color: #FF6B6B !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 991px) {
    .banner-section {
        min-height: 75vh !important;
    }
    .banner-content .title {
        font-size: 44px !important;
    }
    .banner-section .container::before,
    .banner-section .container::after {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .banner-section {
        min-height: 65vh !important;
    }
    .banner-content {
        padding: 60px 0 !important;
        text-align: left !important;
    }
    .banner-content .title {
        font-size: 36px !important;
        letter-spacing: -1px !important;
    }
    .banner-content .text {
        font-size: 16px !important;
    }
}

@media (max-width: 575px) {
    .banner-section {
        min-height: 55vh !important;
    }
    .banner-content .title {
        font-size: 30px !important;
    }
    .banner-content {
        padding: 48px 0 !important;
    }
}

/* ============================================================
   4. COUNTER SECTION - Bold Primary Red Background
   ============================================================ */
.counter-section {
    background: #E23744 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.mb--186px {
    margin-bottom: 0 !important;
}

.counter-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 48px 0 !important;
    overflow: visible !important;
    position: relative !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
}

/* Remove the decorative background element */
.counter-bg {
    display: none !important;
}

/* No decorative pseudo-elements on counter */
.counter-wrapper::before {
    display: none !important;
}

.counter-wrapper::after {
    display: none !important;
}

.contact-wrapper-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 1 !important;
}

.contact-wrapper-inner .left-side {
    display: flex !important;
    gap: 56px !important;
    flex-wrap: wrap !important;
    width: auto !important;
    flex-grow: 1 !important;
}

.counter-item {
    text-align: center !important;
}

.counter-item .icon {
    display: none !important;
}

.counter-item .title {
    font-size: 48px !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    letter-spacing: -1.5px !important;
    line-height: 1.1 !important;
}

.counter-item .title .odometer {
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.counter-item .text {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

.contact-wrapper-inner .right-side {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    gap: 14px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.contact-wrapper-inner .right-side::before {
    display: none !important;
}

.contact-wrapper-inner .right-side img {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

[dir=rtl] .counter-wrapper .contact-wrapper-inner .right-side {
    transform: none !important;
}

@media (max-width: 991px) {
    .contact-wrapper-inner {
        flex-direction: column !important;
        gap: 36px !important;
    }
    .contact-wrapper-inner .left-side {
        justify-content: center !important;
    }
    .counter-wrapper {
        padding: 40px 0 !important;
    }
}

@media (max-width: 575px) {
    .contact-wrapper-inner .left-side {
        gap: 32px !important;
    }
    .counter-item .title {
        font-size: 36px !important;
    }
    .counter-item .text {
        font-size: 12px !important;
    }
}

/* ============================================================
   5. SPECIAL FEATURES - Numbered Cards, 3-Column Grid
   ============================================================ */
.special-feature-section {
    background: #FFFFFF !important;
    padding: 100px 0 !important;
    position: relative !important;
}

/* NO patterns or dots */
.special-feature-section::before {
    display: none !important;
}

.special-feature-section .s-shape-1,
.special-feature-section .s-shape-2 {
    display: none !important;
}

.special-feature-section .container {
    max-width: 1200px !important;
}

.special-feature-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    position: relative !important;
    padding-bottom: 0 !important;
    flex-wrap: unset !important;
}

@media (min-width: 768px) {
    .special-feature-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
        padding-bottom: 0 !important;
    }
}

.feature-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    text-align: left !important;
    transition: all 0.35s ease !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    transform: none !important;
}

/* Kill ALL nth-of-type transforms and backgrounds from main.css */
.feature-card:nth-of-type(n) {
    transform: none !important;
    width: 100% !important;
    background: #FFFFFF !important;
}

.feature-card:nth-of-type(6n + 1),
.feature-card:nth-of-type(6n + 2),
.feature-card:nth-of-type(6n + 3),
.feature-card:nth-of-type(6n + 4),
.feature-card:nth-of-type(6n + 5),
.feature-card:nth-of-type(6n + 6) {
    background: #FFFFFF !important;
    transform: none !important;
}

/* Hover: ALL nth types get the same treatment */
.feature-card:hover,
.feature-card:nth-of-type(6n + 1):hover,
.feature-card:nth-of-type(6n + 2):hover,
.feature-card:nth-of-type(6n + 3):hover,
.feature-card:nth-of-type(6n + 4):hover,
.feature-card:nth-of-type(6n + 5):hover,
.feature-card:nth-of-type(6n + 6):hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-4px) !important;
    border-color: rgba(226, 55, 68, 0.12) !important;
}

/* Feature number - large faded number behind the card */
.feature-number {
    font-size: 64px !important;
    font-weight: 900 !important;
    color: rgba(226, 55, 68, 0.08) !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Feature card icon - left-aligned, red gradient bg */
.feature-card-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 20px 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(226, 55, 68, 0.2) !important;
    transform: none !important;
    transition: transform 0.3s ease !important;
}

.feature-card:hover .feature-card-icon {
    transform: scale(1.05) !important;
}

.feature-card-icon img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

.feature-card-cont {
    margin-top: 0 !important;
}

.feature-card-cont .subtitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 8px !important;
}

/* Kill ALL nth-of-type subtitle color overrides */
.feature-card:nth-of-type(6n + 1) .feature-card-cont .subtitle,
.feature-card:nth-of-type(6n + 2) .feature-card-cont .subtitle,
.feature-card:nth-of-type(6n + 3) .feature-card-cont .subtitle,
.feature-card:nth-of-type(6n + 4) .feature-card-cont .subtitle,
.feature-card:nth-of-type(6n + 5) .feature-card-cont .subtitle,
.feature-card:nth-of-type(6n + 6) .feature-card-cont .subtitle {
    color: #0F172A !important;
}

.feature-card-cont .text {
    font-size: 14px !important;
    color: #64748B !important;
    line-height: 1.7 !important;
}

/* No shimmer/hover pseudo effect - keeping it clean */
.feature-card::after {
    display: none !important;
}

/* Responsive feature grid */
@media (max-width: 991px) {
    .special-feature-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 575px) {
    .special-feature-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .feature-card {
        padding: 28px !important;
    }
}

/* ============================================================
   6. PROMOTIONAL BANNERS - Dark Background
   ============================================================ */
.main-category {
    background: #0F172A !important;
    padding: 80px 0 !important;
    position: relative !important;
}

.main-category-slider {
    max-width: 900px !important;
}

.category-slide-item {
    border-radius: 24px !important;
    min-height: 320px !important;
    overflow: hidden !important;
    padding: 40px 48px !important;
}

.category-slide-item::after {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%) !important;
}

.category-slide-item .title {
    color: #fff !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
}

.category-slide-item .text {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

.main-category-slider .owl-stage-outer .owl-item {
    opacity: 0.25 !important;
}

.main-category-slider .owl-stage-outer .owl-item.active {
    opacity: 1 !important;
}

@media (max-width: 575px) {
    .category-slide-item {
        min-height: 260px !important;
        padding: 28px !important;
    }
    .category-slide-item .title {
        font-size: 32px !important;
    }
}

/* ============================================================
   7. MODULE SECTION - Light Gray BG, Clean Tabs
   ============================================================ */
.ecommerce-venture-section {
    background: #F8FAFC !important;
    padding: 100px 0 !important;
    position: relative !important;
}

/* NO dot pattern */
.ecommerce-venture-section::before {
    display: none !important;
}

.nav--tabs .item {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 2px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06) !important;
    padding: 20px 12px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.nav--tabs .item:hover {
    border-color: rgba(226, 55, 68, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.nav--tabs .owl-item.synced .item {
    background: #FFFFFF !important;
    border-color: #E23744 !important;
    border-bottom-color: #E23744 !important;
    box-shadow: 0 4px 20px rgba(226, 55, 68, 0.15) !important;
}

.nav--tabs .owl-item.synced .item .txt {
    color: #E23744 !important;
    font-weight: 800 !important;
}

.nav--tabs .owl-item:not(.synced) .item {
    color: #64748B !important;
}

.nav--tabs .owl-item:not(.synced) .item img {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important;
}

.nav--tabs .item .txt {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
}

.nav--tabs .item img,
.nav--tabs .item .__img-50 {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

.nav--tabs-wrapper {
    margin-bottom: 48px !important;
}

.venture-content-box {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #64748B !important;
    margin-bottom: 0 !important;
}

.venture-content-box .subtitle {
    font-weight: 800 !important;
    color: #0F172A !important;
    font-size: 22px !important;
    margin-bottom: 12px !important;
}

.venture-img img {
    border-radius: 20px !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================================
   8. EARN MONEY - White BG, Split Layout Cards
   ============================================================ */
.earn-money-section {
    background: #FFFFFF !important;
    padding: 100px 0 !important;
    padding-bottom: 100px !important;
    border-bottom-right-radius: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

/* NO decorative shapes */
.earn-money-section::before {
    display: none !important;
}

.earn-money-section .e-shape-1,
.earn-money-section .e-shape-2,
.earn-money-section .e-shape-3,
.earn-money-section .e-shape-4 {
    display: none !important;
}

.earn-item {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 32px !important;
    flex-direction: row !important;
    display: flex !important;
    transition: all 0.35s ease !important;
}

.earn-item:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

.earn-item:nth-child(even) {
    flex-direction: row-reverse !important;
}

.earn-item-img {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
    flex-grow: 0 !important;
    min-height: 320px !important;
    border-radius: 0 !important;
    position: relative !important;
    padding: 40px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.earn-item:nth-child(even) .earn-item-img {
    border-radius: 0 !important;
    justify-content: flex-end !important;
}

/* Dark gradient overlay on images */
.earn-item-img::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(15, 23, 42, 0.65) 100%) !important;
    filter: none !important;
}

[dir=rtl] .earn-item-img::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(15, 23, 42, 0.65) 100%) !important;
}

.earn-item:nth-child(even) .earn-item-img::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(15, 23, 42, 0.65) 100%) !important;
}

[dir=rtl] .earn-item:nth-child(even) .earn-item-img::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(15, 23, 42, 0.65) 100%) !important;
}

.earn-item-cont {
    flex: 1 1 45% !important;
    max-width: 45% !important;
    width: 45% !important;
    flex-grow: 0 !important;
    padding: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.earn-item:nth-child(even) .earn-item-cont {
    justify-content: center !important;
}

.earn-item-cont .subtitle {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.earn-item-cont .title {
    font-size: 36px !important;
    font-weight: 900 !important;
    color: #0F172A !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
}

.earn-item:not(:last-child) {
    margin-bottom: 32px !important;
}

@media (max-width: 767px) {
    .earn-item,
    .earn-item:nth-child(even) {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .earn-item-img,
    .earn-item:nth-child(even) .earn-item-img {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        min-height: 240px !important;
        padding: 30px 20px !important;
    }
    .earn-item-cont,
    .earn-item:nth-child(even) .earn-item-cont {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 32px !important;
    }
    .earn-item-cont .title {
        font-size: 26px !important;
    }
}

@media (max-width: 575px) {
    .earn-item {
        flex-wrap: nowrap !important;
    }
    .earn-item-img {
        max-width: 100% !important;
        padding: 24px !important;
        min-height: 200px !important;
    }
}

@media (min-width: 1850px) {
    .earn-item-img {
        min-height: 320px !important;
    }
}

/* ============================================================
   9. FEATURES - Light BG, Static Grid (No Scroll Animation)
   ============================================================ */
.learn-feature-section {
    background: #F8FAFC !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.learn-feature-section::before {
    display: none !important;
}

.learn-feature-section .container {
    padding: 0 15px !important;
}

.learn-feature-content {
    padding: 0 !important;
}

.learn-feature-wrapper {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
}

.learn-feature-wrapper::-webkit-scrollbar {
    display: none !important;
}

.learn-feature-item-group {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.learn-feature-item-group.stop-animation {
    animation: none !important;
}

.learn-feature-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 0 24px 28px !important;
    transition: all 0.35s ease !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 30px !important;
}

.learn-feature-item::before {
    display: none !important;
}

.learn-feature-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-4px) !important;
    border-color: rgba(226, 55, 68, 0.1) !important;
}

.learn-feature-item .learn-feature-icon {
    width: 72px !important;
    height: 72px !important;
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 15px rgba(226, 55, 68, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-28px) !important;
    margin-bottom: -8px !important;
}

.learn-feature-item .learn-feature-icon img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* Kill all nth-child green icon variations */
.learn-feature-item-group div[class*=col]:nth-child(odd) div[class*=col]:nth-of-type(4n + 2) .learn-feature-item .learn-feature-icon,
.learn-feature-item-group div[class*=col]:nth-child(odd) div[class*=col]:nth-of-type(4n + 3) .learn-feature-item .learn-feature-icon,
.learn-feature-item-group div[class*=col]:nth-child(odd) div[class*=col]:nth-of-type(4n + 4) .learn-feature-item .learn-feature-icon,
.learn-feature-item-group div[class*=col]:nth-child(even) div[class*=col]:nth-of-type(4n + 1) .learn-feature-item .learn-feature-icon,
.learn-feature-item-group div[class*=col]:nth-child(even) div[class*=col]:nth-of-type(4n + 2) .learn-feature-item .learn-feature-icon,
.learn-feature-item-group div[class*=col]:nth-child(even) div[class*=col]:nth-of-type(4n + 3) .learn-feature-item .learn-feature-icon,
.learn-feature-item-group div[class*=col]:nth-child(even) div[class*=col]:nth-of-type(4n + 4) .learn-feature-item .learn-feature-icon {
    box-shadow: 0 4px 15px rgba(226, 55, 68, 0.2) !important;
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
}

.learn-feature-item .subttle,
.learn-feature-item .subtitle {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 8px !important;
}

.learn-feature-item .text {
    font-size: 14px !important;
    color: #64748B !important;
    line-height: 1.7 !important;
}

.learn-feature-item .learn-feature-item-content {
    margin-top: -34px !important;
}

@media (max-width: 991px) {
    .learn-feature-wrapper {
        overflow: visible !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
    .learn-feature-section .container {
        padding: 0 15px !important;
    }
    .learn-feature-item {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
}

/* ============================================================
   10. TESTIMONIALS - White BG, Card Carousel
   ============================================================ */
.testimonial-section {
    background: #FFFFFF !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.testimonial-section .testimonial-shape {
    display: none !important;
}

.testimonial-slider {
    overflow: hidden !important;
}

.testimonial-slider .owl-stage-outer {
    overflow: hidden !important;
}

.testimonial-slider .owl-stage {
    display: flex !important;
}

.testimonial-slider .owl-item {
    opacity: 1 !important;
}

.testimonial-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s ease !important;
    position: relative !important;
}

/* Top accent red gradient line */
.testimonial-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 32px !important;
    right: 32px !important;
    height: 3px !important;
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    border-radius: 0 0 2px 2px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.testimonial-item:hover::before {
    opacity: 1 !important;
}

.testimonial-item:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-4px) !important;
}

.testimonial-item svg path {
    fill: #E23744 !important;
    opacity: 0.12 !important;
}

.testimonial-item blockquote {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #64748B !important;
    margin: 20px 0 24px !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.testimonial-item .user {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.testimonial-item .user img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    border: 2px solid rgba(226, 55, 68, 0.1) !important;
}

.testimonial-item .user .name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 2px !important;
}

.testimonial-item .user .designation {
    font-size: 13px !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
}

/* ============================================================
   11. DELIVERY ZONES - Dark Background for Contrast
   ============================================================ */
.delivery-area-section {
    background: #0F172A !important;
    padding: 100px 0 !important;
    border-radius: 0 !important;
    position: relative !important;
}

.delivery-area-section .section-header .title {
    color: #FFFFFF !important;
}

.delivery-area-section .section-header p,
.delivery-area-section .section-header .text,
.delivery-area-section .text {
    color: rgba(255, 255, 255, 0.6) !important;
}

.zone-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.zone-list .item {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.zone-list .item:hover {
    background: #E23744 !important;
    border-color: #E23744 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(226, 55, 68, 0.3) !important;
}

.delivery-area-section img {
    border-radius: 24px !important;
}

/* ============================================================
   12. REFERRAL - Bold Red Gradient Background
   ============================================================ */
.refer-section {
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.refer-section .section-header .title {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
}

.refer-section .text {
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.8 !important;
}

.refer-section .section-header p,
.refer-section .section-header .text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.refer-img {
    position: relative !important;
}

.refer-img .main-img {
    max-width: 100% !important;
    border-radius: 24px !important;
}

.refer-img .shape-1,
.refer-img .shape-2 {
    display: none !important;
}

/* Abstract background shape via CSS gradient */
.refer-section::before {
    content: '' !important;
    position: absolute !important;
    top: -20% !important;
    right: -10% !important;
    width: 500px !important;
    height: 500px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.refer-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: -15% !important;
    left: -8% !important;
    width: 350px !important;
    height: 350px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* Override buttons inside refer to be white */
.refer-section .cmn--btn {
    background: #FFFFFF !important;
    color: #E23744 !important;
    animation: none !important;
}

.refer-section .cmn--btn:hover {
    background: #0F172A !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   13. DOWNLOAD APP - Light Background
   ============================================================ */
.download-app-section {
    background: #F8FAFC !important;
    padding: 100px 0 !important;
    padding-top: 100px !important;
    position: relative !important;
}

.download-app-content {
    padding-top: 0 !important;
}

.download-app-content .title {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #0F172A !important;
    line-height: 1.15 !important;
    margin-bottom: 28px !important;
    letter-spacing: -0.8px !important;
}

.download-app-content .primary-color {
    color: #E23744 !important;
    display: inline !important;
}

.download-app-content .subtitle {
    font-size: 17px !important;
    color: #64748B !important;
    margin-bottom: 28px !important;
    line-height: 1.7 !important;
}

.download-app-content .dropdown-menu {
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.download-app-content .dropdown-item {
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 600 !important;
}

.download-app-content .dropdown-item img {
    width: 22px !important;
    height: 22px !important;
}

.download-app-content .dropdown-item:hover {
    background: #F8FAFC !important;
    color: #E23744 !important;
}

.download-app-section .col-lg-6:last-child img {
    border-radius: 24px !important;
    box-shadow: var(--shadow-lg) !important;
}

@media (max-width: 767px) {
    .download-app-content .title {
        font-size: 30px !important;
    }
}

/* ============================================================
   14. NEWSLETTER - White BG, Red CTA
   ============================================================ */
.newsletter-section {
    background: #FFFFFF !important;
    position: relative !important;
}

.newsletter-wrapper {
    max-width: 100% !important;
}

.newsletter-wrapper::before,
.newsletter-wrapper::after {
    display: none !important;
}

.newsletter-bg {
    display: none !important;
}

.newsletter-content {
    padding: 80px 20px !important;
    max-width: 520px !important;
}

.newsletter-content .title {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #0F172A !important;
    letter-spacing: -0.5px !important;
}

.newsletter-content .title::after {
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    height: 4px !important;
    width: 60px !important;
    border-radius: 2px !important;
}

.newsletter-content .text {
    font-size: 16px !important;
    color: #64748B !important;
    font-weight: 400 !important;
}

.input--grp .form-control {
    height: 56px !important;
    border-radius: 12px !important;
    background: #F1F5F9 !important;
    border: 2px solid transparent !important;
    font-size: 15px !important;
    padding-left: 20px !important;
    padding-right: 64px !important;
    color: #0F172A !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.input--grp .form-control:focus {
    border-color: #E23744 !important;
    box-shadow: 0 0 0 3px rgba(226, 55, 68, 0.08) !important;
    background: #FFFFFF !important;
}

/* Override newsletter SVG gradient colors */
.input--grp .search-btn svg rect {
    fill: #E23744 !important;
}

.input--grp .search-btn svg stop {
    stop-color: #E23744 !important;
}

#paint0_linear_28_1864 stop:first-child {
    stop-color: #E23744 !important;
}

#paint0_linear_28_1864 stop:last-child {
    stop-color: #FF6B6B !important;
}

/* ============================================================
   15. FOOTER - Dark Background
   ============================================================ */
.footer-bottom {
    background: #0F172A !important;
    border-radius: 0 !important;
    padding: 60px 0 32px !important;
    position: relative !important;
}

/* NO grid overlay on footer - keeping it clean */
.footer-bottom::before {
    display: none !important;
}

.footer-widget {
    color: rgba(255, 255, 255, 0.7) !important;
    position: relative !important;
    z-index: 1 !important;
}

.footer-widget .subtitle {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 16px !important;
}

.footer-widget .txt {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer-widget.widget-links ul li a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 5px 0 !important;
    transition: all 0.25s ease !important;
}

.footer-widget.widget-links ul li a:hover {
    color: #E23744 !important;
    text-shadow: none !important;
    padding-left: 4px !important;
}

.footer-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

.social-icon {
    gap: 16px !important;
}

.social-icon a {
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
}

.social-icon a:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

.copyright {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 13px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-top: 24px !important;
    margin-top: 40px !important;
    font-weight: 500 !important;
    position: relative !important;
    z-index: 1 !important;
}

.footer-widget .footer-logo img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
}

/* ============================================================
   16. COMMON ELEMENTS
   ============================================================ */

/* --- Common Button --- */
.cmn--btn {
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    background-size: 100% 100% !important;
    animation: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    letter-spacing: 0.3px !important;
}

/* Shimmer effect on hover */
.cmn--btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.cmn--btn:hover::before {
    left: 100% !important;
}

.cmn--btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(226, 55, 68, 0.35) !important;
}

/* --- Section Headers --- */
.section-header {
    margin-bottom: 48px !important;
    position: relative !important;
}

.section-header .title {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #0F172A !important;
    letter-spacing: -1px !important;
    margin-bottom: 16px !important;
    line-height: 1.1 !important;
}

.section-header p,
.section-header .text {
    font-size: 17px !important;
    color: #64748B !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

.section-header.text-start p,
.section-header.text-start .text,
.section-header.text-lg-start p,
.section-header.text-lg-start .text {
    margin: 0 !important;
}

@media (max-width: 767px) {
    .section-header .title {
        font-size: 30px !important;
        letter-spacing: -0.5px !important;
    }
    .section-header {
        margin-bottom: 36px !important;
    }
}

/* --- Owl Carousel Dots --- */
.owl-dots {
    margin-top: 28px !important;
    gap: 8px !important;
}

.owl-dots .owl-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.owl-dots .owl-dot.active {
    background: #E23744 !important;
    width: 28px !important;
    border-radius: 4px !important;
}

/* In light sections, different dot colors */
.testimonial-section .owl-dots .owl-dot,
.special-feature-section .owl-dots .owl-dot {
    background: rgba(0, 0, 0, 0.1) !important;
}

.testimonial-section .owl-dots .owl-dot.active,
.special-feature-section .owl-dots .owl-dot.active {
    background: #E23744 !important;
}

/* --- Owl Carousel Nav --- */
.owl-nav button {
    width: 40px !important;
    height: 40px !important;
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #0F172A !important;
    transition: all 0.3s ease !important;
}

.owl-nav button:hover {
    background: #E23744 !important;
    color: #fff !important;
    border-color: #E23744 !important;
    transform: scale(1.05) !important;
}

/* --- Dropdown Menus --- */
.dropdown-menu {
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.dropdown-item {
    font-size: 14px !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.dropdown-item img {
    width: 20px !important;
    height: 20px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #F8FAFC !important;
    color: #E23744 !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #E23744 !important;
    color: #fff !important;
}

/* --- Preloader --- */
#landing-loader {
    background: #0F172A !important;
}

/* --- Welcome Modal --- */
#welcome-modal .modal-content {
    border-radius: 24px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
}

#welcome-modal .cmn--btn {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 14px !important;
}

/* --- Wave Divider (keep for any added wave elements) --- */
.rapzi-wave-divider {
    position: relative;
    margin-top: -1px;
    line-height: 0;
}

.rapzi-wave-divider svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   17. SVG COLOR OVERRIDES (Green to Red)
   ============================================================ */
*[fill="#039D55"],
*[fill="#00E77B"],
*[fill="#03C168"],
*[fill="#00A759"],
*[fill="#00B05E"],
*[fill="#00C066"],
*[fill="#02D371"],
*[fill="#04F485"],
*[fill="#0DCB72"],
*[fill="#02DA75"],
*[fill="#00BE65"],
*[fill="#02BF67"],
*[fill="#03A057"],
*[fill="#01DB75"],
*[fill="#04B061"],
*[fill="#00D571"],
*[fill="#34DD8E"],
*[fill="#00A95A"],
*[fill="#00C569"],
*[fill="#02B714"],
*[fill="#45BD00"],
*[fill="#01B660"],
*[fill="#71DAA6"],
*[fill="#00b05e"],
*[fill="#039d55"],
*[fill="#03c168"],
*[fill="#00e77b"] {
    fill: #E23744 !important;
}

*[stroke="#039D55"],
*[stroke="#00E77B"],
*[stroke="#03C168"],
*[stroke="#00A759"],
*[stroke="#00B05E"],
*[stroke="#00C066"],
*[stroke="#02D371"],
*[stroke="#04F485"],
*[stroke="#0DCB72"],
*[stroke="#02DA75"],
*[stroke="#00BE65"],
*[stroke="#02BF67"],
*[stroke="#03A057"],
*[stroke="#01DB75"],
*[stroke="#04B061"],
*[stroke="#00D571"],
*[stroke="#34DD8E"],
*[stroke="#00A95A"],
*[stroke="#00C569"],
*[stroke="#02B714"],
*[stroke="#45BD00"],
*[stroke="#01B660"],
*[stroke="#71DAA6"],
*[stroke="#00b05e"],
*[stroke="#039d55"],
*[stroke="#03c168"],
*[stroke="#00e77b"] {
    stroke: #E23744 !important;
}

*[stop-color="#039D55"],
*[stop-color="#00E77B"],
*[stop-color="#03C168"],
*[stop-color="#00A759"],
*[stop-color="#00B05E"],
*[stop-color="#00C066"],
*[stop-color="#02D371"],
*[stop-color="#04F485"],
*[stop-color="#0DCB72"],
*[stop-color="#02DA75"],
*[stop-color="#00BE65"],
*[stop-color="#02BF67"],
*[stop-color="#03A057"],
*[stop-color="#01DB75"],
*[stop-color="#04B061"],
*[stop-color="#00D571"],
*[stop-color="#34DD8E"],
*[stop-color="#00A95A"],
*[stop-color="#00C569"],
*[stop-color="#02B714"],
*[stop-color="#45BD00"],
*[stop-color="#01B660"],
*[stop-color="#71DAA6"],
*[stop-color="#00b05e"],
*[stop-color="#039d55"],
*[stop-color="#03c168"],
*[stop-color="#00e77b"] {
    stop-color: #E23744 !important;
}

/* ============================================================
   18. RESPONSIVE OVERRIDES
   ============================================================ */

/* ---- Tablet (768 - 991px) ---- */
@media (max-width: 991px) {
    .earn-money-section {
        padding: 80px 0 !important;
    }
    .learn-feature-section {
        padding: 80px 0 !important;
    }
    .special-feature-section {
        padding: 80px 0 !important;
    }
    .ecommerce-venture-section {
        padding: 80px 0 !important;
    }
    .testimonial-section {
        padding: 80px 0 !important;
    }
    .delivery-area-section {
        padding: 80px 0 !important;
    }
    .refer-section {
        padding: 80px 0 !important;
    }
    .download-app-section {
        padding: 80px 0 !important;
        padding-top: 80px !important;
    }
}

/* ---- Mobile (below 768px) ---- */
@media (max-width: 767px) {
    .earn-money-section {
        padding: 60px 0 !important;
        padding-bottom: 60px !important;
    }
    .learn-feature-section {
        padding: 60px 0 !important;
    }
    .special-feature-section {
        padding: 60px 0 !important;
    }
    .ecommerce-venture-section {
        padding: 60px 0 !important;
    }
    .testimonial-section {
        padding: 60px 0 !important;
    }
    .delivery-area-section {
        padding: 60px 0 !important;
    }
    .refer-section {
        padding: 60px 0 !important;
    }
    .download-app-section {
        padding: 60px 0 !important;
        padding-top: 60px !important;
    }
    .main-category {
        padding: 60px 0 !important;
    }
    .refer-section .section-header .title {
        font-size: 30px !important;
    }
    .delivery-area-section .section-header .title {
        color: #FFFFFF !important;
    }
}

/* ---- Small Mobile (below 576px) ---- */
@media (max-width: 575px) {
    .counter-wrapper {
        padding: 36px 0 !important;
    }
    .contact-wrapper-inner .left-side {
        gap: 24px !important;
        justify-content: center !important;
    }
    .newsletter-content {
        padding: 60px 16px !important;
    }
    .newsletter-content .title {
        font-size: 26px !important;
    }
    .footer-bottom {
        padding: 40px 0 24px !important;
    }
}

/* ============================================================
   ADDITIONAL AGGRESSIVE CONFLICT OVERRIDES
   ============================================================ */

/* Banner section container margin fix */
.banner-section .container {
    margin-top: 0 !important;
}

/* Fix paragraph margin issues */
p {
    margin-top: 0 !important;
}

/* Ensure earn-item overflow clips children */
.earn-item {
    overflow: hidden !important;
}

/* Counter: override original left-side width/flex */
.counter-wrapper .contact-wrapper-inner .left-side {
    width: auto !important;
    flex-grow: 1 !important;
}

/* Kill original flex-wrap-reverse on earn items at small screens */
@media (max-width: 575px) {
    .earn-item {
        flex-wrap: nowrap !important;
    }
}

/* Override special-feature-wrapper flex remnants from main.css */
.special-feature-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    padding-bottom: 0 !important;
}

/* Ensure all feature card nth-of-type states are clean */
.feature-card:nth-of-type(n) {
    transform: none !important;
    width: 100% !important;
    background: #FFFFFF !important;
}

/* Override feature-card hover for staggered types */
.feature-card:nth-of-type(6n + 2):hover,
.feature-card:nth-of-type(6n + 5):hover {
    transform: translateY(-4px) !important;
}

/* Ensure original large-screen earn-item-img min-height */
@media (min-width: 1850px) {
    .earn-item-img {
        min-height: 320px !important;
    }
}

/* Override main.css download-app 218px padding */
.download-app-section {
    padding-top: 100px !important;
}

@media (max-width: 991px) {
    .download-app-section {
        padding-top: 80px !important;
    }
}

@media (max-width: 767px) {
    .download-app-section {
        padding-top: 60px !important;
    }
}

/* Override original testimonial section padding */
.testimonial-section {
    padding: 100px 0 !important;
}

/* Override original ecommerce venture green gradient */
.ecommerce-venture-section {
    background: #F8FAFC !important;
}

/* Override original nav--tabs green tint */
.nav--tabs .item {
    background: #FFFFFF !important;
}

/* Override original newsletter input bg */
.input--grp .form-control {
    background: #F1F5F9 !important;
}

/* Delivery area section padding */
.delivery-area-section {
    padding: 100px 0 !important;
}

/* Referral section padding */
.refer-section {
    padding: 100px 0 !important;
}

/* Learn feature item structure override */
.learn-feature-item {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 20px !important;
}

/* Learn feature icon: override original white bg, green shadow */
.learn-feature-item .learn-feature-icon {
    background: linear-gradient(135deg, #E23744 0%, #FF6B6B 100%) !important;
    box-shadow: 0 4px 15px rgba(226, 55, 68, 0.2) !important;
    border-radius: 18px !important;
    width: 72px !important;
    height: 72px !important;
}

/* Earn money section: kill original bottom radius */
.earn-money-section {
    padding-bottom: 100px !important;
    border-bottom-right-radius: 0 !important;
}