/* ==========================================================================
   WHOLESALE & DISTRIBUTION — MODERN SAAS DESIGN SYSTEM
   High-Contrast Typography & Brand Vermilion Accents
   ========================================================================== */

#content {
    position: relative !important;
    overflow: hidden !important;
    background-color: #FAF8F5 !important;
    background-image:
        radial-gradient(ellipse 1100px 640px at 94% 0%, rgba(226, 102, 10, 0.08) 0%, rgba(245, 158, 11, 0.03) 45%, transparent 72%),
        radial-gradient(ellipse 1000px 580px at 6% 100%, rgba(226, 102, 10, 0.07) 0%, rgba(245, 158, 11, 0.025) 45%, transparent 70%),
        radial-gradient(ellipse 850px 480px at 4% 30%, rgba(148, 163, 184, 0.045) 0%, transparent 60%),
        radial-gradient(ellipse 900px 520px at 95% 75%, rgba(13, 75, 55, 0.035) 0%, transparent 60%),
        linear-gradient(180deg, #FDFBF8 0%, #F5F6F9 34%, #EEF1F6 68%, #F9F8F5 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center center !important;
    color: var(--ink, #1B2A2C) !important;
}

#content::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.85 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='1000' viewBox='0 0 1440 1000' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='ribbonOrangeGrad' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23E2660A' stop-opacity='0.16'/%3E%3Cstop offset='50%25' stop-color='%23F59E0B' stop-opacity='0.06'/%3E%3Cstop offset='100%25' stop-color='%23F59E0B' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbonGreenGrad' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%230D4B37' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%230D4B37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-60 220 C280 120 460 380 720 280 C980 180 1220 340 1520 180' fill='none' stroke='url(%23ribbonOrangeGrad)' stroke-width='48' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M-100 160 C380 40 820 280 1540 110' stroke='%23E2660A' stroke-width='1.4' stroke-opacity='0.18'/%3E%3Cpath d='M-100 240 C420 120 860 360 1540 190' stroke='%230D4B37' stroke-width='1.2' stroke-opacity='0.10' stroke-dasharray='5 7'/%3E%3Cpath d='M-100 620 C460 500 920 740 1540 560' stroke='%23E2660A' stroke-width='1.4' stroke-opacity='0.15'/%3E%3Cpath d='M-100 700 C440 600 900 820 1540 660' stroke='%230D4B37' stroke-width='1.2' stroke-opacity='0.09' stroke-dasharray='6 8'/%3E%3Cpath d='M1320 -40 C1460 60 1500 240 1380 340 C1260 440 1080 360 1060 200 C1040 40 1180 -140 1320 -40 Z' fill='url(%23ribbonOrangeGrad)' opacity='0.75'/%3E%3Cpath d='M-80 640 C60 540 240 560 280 720 C320 880 180 960 20 950 C-140 940 -220 740 -80 640 Z' fill='url(%23ribbonOrangeGrad)' opacity='0.7'/%3E%3Cpath d='M-60 300 C100 220 180 380 120 480 C60 580 -60 540 -60 300 Z' fill='url(%23ribbonGreenGrad)' opacity='0.6'/%3E%3Cg fill='%23E2660A' fill-opacity='0.36'%3E%3Ccircle cx='32' cy='64' r='1.8'/%3E%3Ccircle cx='48' cy='64' r='1.8'/%3E%3Ccircle cx='64' cy='64' r='1.8'/%3E%3Ccircle cx='80' cy='64' r='1.8'/%3E%3Ccircle cx='96' cy='64' r='1.8'/%3E%3Ccircle cx='112' cy='64' r='1.8'/%3E%3Ccircle cx='32' cy='80' r='1.8'/%3E%3Ccircle cx='48' cy='80' r='1.8'/%3E%3Ccircle cx='64' cy='80' r='1.8'/%3E%3Ccircle cx='80' cy='80' r='1.8'/%3E%3Ccircle cx='96' cy='80' r='1.8'/%3E%3Ccircle cx='112' cy='80' r='1.8'/%3E%3Ccircle cx='32' cy='96' r='1.8'/%3E%3Ccircle cx='48' cy='96' r='1.8'/%3E%3Ccircle cx='64' cy='96' r='1.8'/%3E%3Ccircle cx='80' cy='96' r='1.8'/%3E%3Ccircle cx='96' cy='96' r='1.8'/%3E%3Ccircle cx='112' cy='96' r='1.8'/%3E%3Ccircle cx='32' cy='112' r='1.8'/%3E%3Ccircle cx='48' cy='112' r='1.8'/%3E%3Ccircle cx='64' cy='112' r='1.8'/%3E%3Ccircle cx='80' cy='112' r='1.8'/%3E%3Ccircle cx='96' cy='112' r='1.8'/%3E%3Ccircle cx='112' cy='112' r='1.8'/%3E%3Ccircle cx='1328' cy='64' r='1.8'/%3E%3Ccircle cx='1344' cy='64' r='1.8'/%3E%3Ccircle cx='1360' cy='64' r='1.8'/%3E%3Ccircle cx='1376' cy='64' r='1.8'/%3E%3Ccircle cx='1392' cy='64' r='1.8'/%3E%3Ccircle cx='1408' cy='64' r='1.8'/%3E%3Ccircle cx='1328' cy='80' r='1.8'/%3E%3Ccircle cx='1344' cy='80' r='1.8'/%3E%3Ccircle cx='1360' cy='80' r='1.8'/%3E%3Ccircle cx='1376' cy='80' r='1.8'/%3E%3Ccircle cx='1392' cy='80' r='1.8'/%3E%3Ccircle cx='1408' cy='80' r='1.8'/%3E%3Ccircle cx='1328' cy='96' r='1.8'/%3E%3Ccircle cx='1344' cy='96' r='1.8'/%3E%3Ccircle cx='1360' cy='96' r='1.8'/%3E%3Ccircle cx='1376' cy='96' r='1.8'/%3E%3Ccircle cx='1392' cy='96' r='1.8'/%3E%3Ccircle cx='1408' cy='96' r='1.8'/%3E%3Ccircle cx='1328' cy='112' r='1.8'/%3E%3Ccircle cx='1344' cy='112' r='1.8'/%3E%3Ccircle cx='1360' cy='112' r='1.8'/%3E%3Ccircle cx='1376' cy='112' r='1.8'/%3E%3Ccircle cx='1392' cy='112' r='1.8'/%3E%3Ccircle cx='1408' cy='112' r='1.8'/%3E%3C/g%3E%3Cg fill='%23E2660A' fill-opacity='0.28'%3E%3Ccircle cx='1344' cy='820' r='1.8'/%3E%3Ccircle cx='1360' cy='820' r='1.8'/%3E%3Ccircle cx='1376' cy='820' r='1.8'/%3E%3Ccircle cx='1392' cy='820' r='1.8'/%3E%3Ccircle cx='1408' cy='820' r='1.8'/%3E%3Ccircle cx='1344' cy='836' r='1.8'/%3E%3Ccircle cx='1360' cy='836' r='1.8'/%3E%3Ccircle cx='1376' cy='836' r='1.8'/%3E%3Ccircle cx='1392' cy='836' r='1.8'/%3E%3Ccircle cx='1408' cy='836' r='1.8'/%3E%3Ccircle cx='1344' cy='852' r='1.8'/%3E%3Ccircle cx='1360' cy='852' r='1.8'/%3E%3Ccircle cx='1376' cy='852' r='1.8'/%3E%3Ccircle cx='1392' cy='852' r='1.8'/%3E%3Ccircle cx='1408' cy='852' r='1.8'/%3E%3Ccircle cx='1344' cy='868' r='1.8'/%3E%3Ccircle cx='1360' cy='868' r='1.8'/%3E%3Ccircle cx='1376' cy='868' r='1.8'/%3E%3Ccircle cx='1392' cy='868' r='1.8'/%3E%3Ccircle cx='1408' cy='868' r='1.8'/%3E%3C/g%3E%3Cg fill='%23E2660A' fill-opacity='0.26'%3E%3Ccircle cx='32' cy='820' r='1.8'/%3E%3Ccircle cx='48' cy='820' r='1.8'/%3E%3Ccircle cx='64' cy='820' r='1.8'/%3E%3Ccircle cx='80' cy='820' r='1.8'/%3E%3Ccircle cx='32' cy='836' r='1.8'/%3E%3Ccircle cx='48' cy='836' r='1.8'/%3E%3Ccircle cx='64' cy='836' r='1.8'/%3E%3Ccircle cx='80' cy='836' r='1.8'/%3E%3Ccircle cx='32' cy='852' r='1.8'/%3E%3Ccircle cx='48' cy='852' r='1.8'/%3E%3Ccircle cx='64' cy='852' r='1.8'/%3E%3Ccircle cx='80' cy='852' r='1.8'/%3E%3Ccircle cx='32' cy='868' r='1.8'/%3E%3Ccircle cx='48' cy='868' r='1.8'/%3E%3Ccircle cx='64' cy='868' r='1.8'/%3E%3Ccircle cx='80' cy='868' r='1.8'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */
.wholesale-hero-modern {
    background: transparent !important;
    color: var(--ink, #1B2A2C) !important;
    padding: 90px 0 70px !important;
    border-bottom: 1px solid rgba(27, 42, 44, 0.06) !important;
    position: relative;
    z-index: 1;
}

.wholesale-hero-modern .container {
    position: relative;
    z-index: 2;
}

.code-badge,
.hero-badge,
.company-overview-badge,
.what-we-do-badge,
.why-work-with-us-badge,
.section-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: rgba(226, 102, 10, 0.1) !important;
    color: var(--vermilion, #E2660A) !important;
    border: 1px solid rgba(226, 102, 10, 0.25) !important;
    border-radius: 999px !important;
    padding: 5px 16px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin: 0 auto 16px auto !important;
    box-shadow: none !important;
}

.code-badge i,
.hero-badge i,
.company-overview-badge i,
.what-we-do-badge i,
.why-work-with-us-badge i,
.section-badge i,
.badge-icon i {
    color: var(--vermilion, #E2660A) !important;
    font-size: 11px !important;
}

.hero-title,
.wholesale-hero-modern h1 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(32px, 4.5vw, 54px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink, #1B2A2C) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    margin: 0 0 20px 0 !important;
}

.hero-subtitle,
.wholesale-hero-modern p {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(15px, 1.6vw, 18px) !important;
    line-height: 1.68 !important;
    color: rgba(27, 42, 44, 0.8) !important;
    max-width: 900px;
    margin: 0 auto 32px !important;
}

.hero-cta-section {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-modern-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, var(--vermilion, #E2660A) 0%, #FF7A1A 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    padding: 12px 28px !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: 0 6px 20px -4px rgba(226, 102, 10, 0.4) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-modern-primary:hover {
    background: linear-gradient(135deg, #FF7A1A 0%, #E2660A 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -4px rgba(226, 102, 10, 0.55) !important;
}

.btn-modern-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--ink, #1B2A2C) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    padding: 11px 26px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(27, 42, 44, 0.12) !important;
    box-shadow: 0 4px 14px rgba(27, 42, 44, 0.05) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-modern-secondary:hover {
    background: #FFFFFF !important;
    border-color: var(--vermilion, #E2660A) !important;
    color: var(--vermilion, #E2660A) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(226, 102, 10, 0.25) !important;
}

/* ==========================================================================
   2. SECTION SHARED STYLING & HEADINGS
   ========================================================================== */
.wholesale-section-modern {
    padding: 80px 0 !important;
    background-color: transparent !important;
    border-top: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.wholesale-section-modern.alt-bg {
    background-color: rgba(255, 255, 255, 0.45) !important;
}

.company-overview-title,
.what-we-do-title,
.why-work-with-us-title,
.contact-title,
.section-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(26px, 3.5vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink, #1B2A2C) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    margin: 0 0 10px 0 !important;
}

.gradient-text,
span.gradient-text {
    background: linear-gradient(100deg, var(--vermilion, #E2660A) 0%, #F2952E 45%, #FFB066 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    display: inline-block;
}

.space-border {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--vermilion, #E2660A), #FF7A1A);
    border-radius: 999px;
    margin: 14px auto 24px;
}

/* ==========================================================================
   3. COMPANY OVERVIEW SECTION
   ========================================================================== */
.overview-card {
    position: relative !important;
    z-index: 1 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(27, 42, 44, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -8px rgba(27, 42, 44, 0.08), 0 2px 6px rgba(27, 42, 44, 0.04) !important;
    padding: 40px 44px !important;
}

.overview-card p {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: rgba(27, 42, 44, 0.8) !important;
    margin: 0 0 16px 0 !important;
}

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

/* ==========================================================================
   4. WHAT WE DO CARDS (.service-card-modern)
   ========================================================================== */
.service-card-modern {
    position: relative !important;
    z-index: 1 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(27, 42, 44, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -8px rgba(27, 42, 44, 0.08), 0 2px 6px rgba(27, 42, 44, 0.04) !important;
    padding: 32px 26px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.service-card-modern:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 48px -12px rgba(226, 102, 10, 0.18), 0 0 0 1px rgba(226, 102, 10, 0.3) !important;
    border-color: rgba(226, 102, 10, 0.3) !important;
}

.service-icon-wrapper {
    margin-bottom: 18px;
}

.service-icon {
    width: 52px;
    height: 52px;
    background: rgba(226, 102, 10, 0.1) !important;
    color: var(--vermilion, #E2660A) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 14px;
    border: 1px solid rgba(226, 102, 10, 0.22);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.service-card-modern:hover .service-icon {
    transform: scale(1.08);
    background: var(--vermilion, #E2660A) !important;
    color: #FFFFFF !important;
}

.service-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 10px 0 !important;
    transition: color 0.2s ease;
}

.service-card-modern:hover .service-title {
    color: var(--vermilion, #E2660A) !important;
}

.service-description {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(27, 42, 44, 0.75) !important;
    margin: 0 !important;
}

/* ==========================================================================
   5. WHY WORK WITH US (.benefit-card)
   ========================================================================== */
.benefit-card {
    position: relative !important;
    z-index: 1 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(27, 42, 44, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -8px rgba(27, 42, 44, 0.08), 0 2px 6px rgba(27, 42, 44, 0.04) !important;
    padding: 28px 30px !important;
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
    height: 100% !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
}

.benefit-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px -10px rgba(226, 102, 10, 0.18), 0 0 0 1px rgba(226, 102, 10, 0.25) !important;
    border-color: rgba(226, 102, 10, 0.3) !important;
}

.benefit-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(226, 102, 10, 0.1) !important;
    color: var(--vermilion, #E2660A) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 14px;
    border: 1px solid rgba(226, 102, 10, 0.22);
}

.benefit-content {
    flex: 1;
}

.benefit-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.benefit-description {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(27, 42, 44, 0.75) !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. CONTACT INFORMATION SECTION (.contact-card-modern)
   ========================================================================== */
.contact-card-modern {
    position: relative !important;
    z-index: 1 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(27, 42, 44, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 40px -10px rgba(27, 42, 44, 0.08), 0 2px 8px rgba(27, 42, 44, 0.04) !important;
    padding: 44px 40px !important;
}

.contact-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    color: rgba(27, 42, 44, 0.75) !important;
    margin-bottom: 0 !important;
}

.contact-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 28px 0 !important;
}

.contact-card-modern .contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background: #F6F8F3 !important;
    border: 1px solid rgba(27, 42, 44, 0.06) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    transition: all 0.2s ease;
}

.contact-card-modern .contact-item:hover {
    background: #FFFFFF !important;
    border-color: rgba(226, 102, 10, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.contact-card-modern .contact-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: rgba(226, 102, 10, 0.12) !important;
    color: var(--vermilion, #E2660A) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 12px;
    border: 1px solid rgba(226, 102, 10, 0.25);
}

.contact-card-modern .contact-info h5 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 4px 0 !important;
}

.contact-card-modern .contact-info p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: rgba(27, 42, 44, 0.75) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.contact-card-modern .contact-info a {
    color: var(--vermilion, #E2660A) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.contact-card-modern .contact-info a:hover {
    text-decoration: underline !important;
}

.contact-cta {
    text-align: center;
    margin-top: 24px;
}