/* ============================================================
   ModeMetrix Landing Page — Orange Theme Overrides
   Loaded AFTER landingpage/css/*.css to unify colors to #f97316
   ============================================================ */

/* ============= 1. CSS CUSTOM PROPERTIES ============= */
:root {
    --mm-orange: #f97316;
    --mm-orange-dark: #ea580c;
    --mm-orange-deeper: #c2410c;
    --mm-orange-light: #fff7ed;
    --mm-orange-soft: #ffedd5;
    --mm-orange-mid: #fb923c;
}

/* ============= 2. TYPOGRAPHY ============= */
.ct-text-orange {
    color: var(--mm-orange) !important;
}

/* ============= 3. BUTTONS ============= */
.btn-style-1 {
    background: linear-gradient(135deg, var(--mm-orange) 0%, var(--mm-orange-dark) 100%) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-style-1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important;
}

.btn-style-1:active {
    transform: translateY(0);
}

.tryitnow {
    background: linear-gradient(135deg, var(--mm-orange) 0%, var(--mm-orange-dark) 100%) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3) !important;
}

.tryitnow:hover {
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important;
}

.bg-btn {
    background: linear-gradient(135deg, var(--mm-orange) 0%, var(--mm-orange-dark) 100%) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3) !important;
}

.bg-btn:hover {
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4) !important;
}

/* ============= 4. HEADER / NAV ============= */
.main-menu.stellarnav ul li a:hover {
    color: var(--mm-orange) !important;
}

.header-right .links li a:hover {
    color: var(--mm-orange) !important;
}

/* ============= 5. "HOW IT WORKS" ICON OVERRIDES ============= */
/* color-1: Base orange */
.home3-single-feature .icon-box .icon.color-1 {
    background: linear-gradient(135deg, var(--mm-orange) 0%, var(--mm-orange-dark) 100%) !important;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35) !important;
}

/* color-2: Lighter orange */
.home3-single-feature .icon-box .icon.color-2 {
    background: linear-gradient(135deg, var(--mm-orange-mid) 0%, var(--mm-orange) 100%) !important;
    box-shadow: 0 8px 20px rgba(251, 146, 60, 0.35) !important;
}

/* color-3: Deeper orange */
.home3-single-feature .icon-box .icon.color-3 {
    background: linear-gradient(135deg, var(--mm-orange-dark) 0%, var(--mm-orange-deeper) 100%) !important;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.35) !important;
}

/* "How It Works" card title hover accent */
.home3-single-feature:hover .icon-box .icon {
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.4) !important;
}

/* ============= 6. "KEY FEATURES" ICON OVERRIDES ============= */
.single-home5-why .icon-box .icon {
    background: var(--mm-orange) !important;
    color: #ffffff !important;
}

.single-home5-why:hover {
    background: var(--mm-orange-light) !important;
}

.single-home5-why .icon-box .icon::before {
    background: var(--mm-orange-light) !important;
}

/* ============= 7. SECTION TITLE UNDERLINE ============= */
.section-title .title::after {
    background: var(--mm-orange) !important;
}

.section-title-3 .title::after {
    background: var(--mm-orange) !important;
}

/* ============= 8. FOOTER ============= */
.footer-top-area {
    background: var(--mm-orange-light) !important;
}

.footer-bottom-area {
    background: linear-gradient(90deg, var(--mm-orange-light) 0%, var(--mm-orange-soft) 100%) !important;
}

.fba-social .social li a {
    color: var(--mm-orange) !important;
    border-color: var(--mm-orange-soft) !important;
}

.fba-social .social li a:hover {
    background: linear-gradient(135deg, var(--mm-orange) 0%, var(--mm-orange-dark) 100%) !important;
    color: #ffffff !important;
    border-color: var(--mm-orange) !important;
}

.hba-newsletter .bg-btn {
    background: linear-gradient(135deg, var(--mm-orange) 0%, var(--mm-orange-dark) 100%) !important;
}

.hba-newsletter-input-box input::placeholder {
    color: #9ca3af;
}

.hba-newsletter-input-box input:focus {
    border-color: var(--mm-orange) !important;
    outline: none;
}

/* ============= 9. LOADER ============= */
.loader-outter {
    border-top-color: var(--mm-orange) !important;
}

.loader-inner {
    border-top-color: var(--mm-orange-mid) !important;
}

/* ============= 10. SCROLLBAR (GLOBAL) ============= */
::-webkit-scrollbar-thumb {
    background: var(--mm-orange-soft);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mm-orange);
}

/* ============= 11. SELECTION HIGHLIGHT ============= */
::selection {
    background: var(--mm-orange-soft);
    color: var(--mm-orange-deeper);
}