/* ============================================================
   index_design.css - page styles for index.php (design + original modal look)
   Card styles live in css/pricing_cards.css
   ============================================================ */
/* [Vars For Original Modals] Start */
:root { --white:#fff; --dark-white:#f2f2fc; --a-color:#2196F3; --hover-color:#DC160C; --fitb-btn-bg:#FF4A17; }
/* [Vars For Original Modals] End */

/* [Design Styles] Start */
/* CSS START: Theme variables */
:root, html.light { --brand:#FF4A17; --secondary:#101C2A; --search-shadow-inset: inset 0 1px 1px rgba(255,255,255,.85), 0 4px 8px rgba(0,0,0,.06);
  --bg:#f3f6fb; --surface:#ffffff; --surface2:#f1f5f9; --surface-alt:#eaf0f8; --text:#0f172a; --muted:#5b6b82; --border:rgba(15,23,42,.1);
  --hdr-bg:rgba(255,255,255,.88); --shadow:0 10px 30px -12px rgba(15,23,42,.18); --shadow-hover:0 22px 44px -14px rgba(255,74,23,.3); }
html.dark { --bg:#050b17; --surface:#0e1a2e; --surface2:#15243b; --surface-alt:#081123; --text:#f1f5f9; --muted:#9fb0c7; --border:rgba(255,255,255,.1);
  --hdr-bg:rgba(8,17,35,.9); --shadow:0 10px 30px -12px rgba(0,0,0,.6); --shadow-hover:0 22px 44px -14px rgba(255,74,23,.35); }
/* CSS END: Theme variables */

/* CSS START: Base */
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 40% at 12% 0%,rgba(255,74,23,.10),transparent 70%),radial-gradient(50% 40% at 92% 18%,rgba(6,182,212,.10),transparent 70%); }
a { text-decoration:none; } a:hover { text-decoration:none; }
.wrap { max-width:1320px; margin:0 auto; }
.is-hidden { display:none !important; }
.iti { width:100%; display:block; } .iti__country-list { z-index:9999 !important; color:#000; } .form-control.iti-input { padding-left:52px !important; }
/* CSS END: Base */

/* CSS START: Header buttons (hover animation) */
        .menu-btn, .btn-premium-slide {
            position: relative; 
            z-index: 0; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
            padding: 8px 18px; 
            border-radius: 12px; 
            font-weight: 700; 
            white-space: nowrap; 
            text-decoration: none !important;
            border: 1px solid rgba(0,0,0,.08); 
            background: linear-gradient(145deg,#ffffff,#f1f3f5); 
            box-shadow: var(--search-shadow-inset);
            color: #1f2937 !important; 
            transition: color .4s ease; 
            overflow: hidden; 
            font-size: 0.85rem;
        }
        .btn-premium-slide { 
            background: var(--brand); 
            color: #fff !important; 
            border: none; 
        }
        .dark .menu-btn { 
            background: #1e293b; 
            border: 1px solid rgba(255,255,255,0.2); 
            color: #fff !important; 
        }

        .menu-btn::before, .btn-premium-slide::before {
            content: ""; 
            position: absolute; 
            inset: 0; 
            border-radius: 10px; 
            z-index: -1; 
            background: var(--brand); 
            transform: scale(0); 
            transform-origin: 100% 100%; 
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-premium-slide::before { 
            background: var(--secondary); 
            z-index: 0; 
        }
        .menu-btn:hover::before, .btn-premium-slide:hover::before { 
            transform: scale(2.5); 
        }
        
        .menu-btn::after, .btn-premium-slide::after {
            content: ''; 
            position: absolute; 
            bottom: -80px; 
            right: -80px; 
            width: 0; 
            height: 0;
            background: rgba(255, 255, 255, 0.2); 
            filter: blur(35px); 
            border-radius: 50%;
            transition: width 1.5s ease, height 1.5s ease; 
            z-index: 1;
        }
        .menu-btn:hover::after, .btn-premium-slide:hover::after { 
            width: 400px; 
            height: 400px; 
            bottom: 50%; 
            right: 50%; 
            transform: translate(50%, 50%); 
        }
        .btn-premium-slide span { 
            position: relative; 
            z-index: 2; 
        }

/* CSS END: Header buttons */

/* CSS START: Header */
.hdr { position:fixed; top:0; left:0; right:0; z-index:1000; height:70px; background:var(--hdr-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); transition:box-shadow .3s; }
.hdr.scrolled { box-shadow:0 8px 24px rgba(0,0,0,.14); }
.hdr-in { max-width:1320px; margin:0 auto; height:100%; padding:0 20px; display:flex; align-items:center; gap:14px; }
.hdr-logo img { height:40px; width:auto; display:block; }
.hdr-menu { display:flex; align-items:center; gap:8px; margin-left:16px; }
.hdr-actions { display:flex; align-items:center; gap:8px; }
.hdr-actions form { margin:0; }
.hdr.is-searching .hdr-menu, .hdr.is-searching .hdr-actions { display:none; }
.hdr-burger { display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:1.1rem; cursor:pointer; }
.drawer { display:none; position:fixed; inset:0; z-index:1100; background:var(--bg); overflow-y:auto; }
.drawer.open { display:block; }
.drawer-top { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.drawer-top img { height:34px; }
.drawer-x { border:0; background:transparent; color:var(--text); font-size:1.8rem; line-height:1; cursor:pointer; }
.drawer-body { padding:18px 20px; display:grid; gap:10px; }
.drawer-link { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:700; font-family:inherit; font-size:.95rem; cursor:pointer; }
.drawer-link.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.drawer-body form { margin:0; }
/* CSS END: Header */

/* CSS START: Hero */
.hero { padding:122px 20px 70px; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(255,74,23,.1); color:var(--brand); font-weight:800; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.clock { display:flex; flex-direction:column; gap:6px; width:max-content; max-width:100%; margin:18px 0 22px; padding:14px 22px; border-radius:20px; background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--brand); box-shadow:var(--shadow); }
.clock-label { display:flex; align-items:center; gap:8px; font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); }
.live-dot { width:8px; height:8px; border-radius:50%; background:#10b981; animation:pulse 1.6s infinite; }
.clock-time { display:flex; align-items:baseline; gap:2px; font-size:2.3rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.clock-time .sep { opacity:.4; padding:0 1px; }
.clock-time .ap { align-self:center; margin-left:10px; padding:5px 10px; border-radius:9px; background:var(--brand); color:#fff; font-size:.8rem; letter-spacing:.04em; }
.clock-time .sc { color:var(--brand); }
.clock-date { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hero h1 { font-size:clamp(1.9rem,4.2vw,3rem); font-weight:800; line-height:1.18; letter-spacing:-.03em; margin:0 0 24px; color:var(--text); }
.hero h1 span { background:linear-gradient(135deg,var(--brand),#ff9a4c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--brand); }
.feat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
.feat { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--surface); border:1px solid var(--border); font-weight:600; font-size:.82rem; color:var(--text); transition:transform .25s, border-color .25s; }
.feat:hover { transform:translateY(-2px); border-color:var(--brand); }
.feat i.ic { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; }
.feat a { color:var(--brand); font-weight:800; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.btn-lg2 { padding:14px 28px !important; border-radius:16px !important; font-size:.78rem !important; letter-spacing:.08em; text-transform:uppercase; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:16px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; transition:border-color .25s, transform .25s, color .25s; }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.hero-visual { position:relative; display:flex; justify-content:center; }
.hero-visual::before { content:""; position:absolute; inset:6% 4%; border-radius:50%; background:radial-gradient(circle,rgba(255,74,23,.28),transparent 68%); }
.hero-visual img { position:relative; max-width:100%; height:auto; animation:floaty 5s ease-in-out infinite; }
.fbadge { position:absolute; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); font-size:.74rem; font-weight:800; color:var(--text); animation:floaty 6s ease-in-out infinite; }
.fbadge i { color:var(--brand); }
.fbadge.b1 { top:6%; left:0; } .fbadge.b2 { bottom:8%; right:0; animation-delay:-2s; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.5); } 50% { box-shadow:0 0 0 6px rgba(16,185,129,0); } }
/* CSS END: Hero */

/* CSS START: Sections & cards */
.sec { padding:70px 20px; } .sec-alt { background:var(--surface-alt); }
.sec-head { text-align:center; margin-bottom:34px; }
.sec-head .eyebrow { margin-bottom:12px; }
.sec-head h2 { font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800; letter-spacing:-.02em; margin:0 0 10px; color:var(--text); }
.sec-head p { color:var(--muted); font-weight:600; max-width:560px; margin:0 auto 14px; }
.sec-head .bar { width:90px; height:5px; border-radius:5px; margin:0 auto; background:linear-gradient(90deg,#FF4A17,#10B981,#0084ff); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; }
.grid-combo { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.card { position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#FF4A17,#ff9a4c); z-index:2; }
.card:hover { transform:translateY(-6px); border-color:rgba(255,74,23,.45); box-shadow:var(--shadow-hover); }
.card-body { display:flex; flex-direction:column; flex:1; padding:22px 20px 20px; }
.pk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.pk-title { font-size:1.05rem; font-weight:800; line-height:1.3; margin:0; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text); }
.pk-icon { width:42px; height:42px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand),#ff8a4c); color:#fff; box-shadow:0 6px 14px rgba(255,74,23,.3); }
.price { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:12px 14px; border-radius:14px; background:var(--surface2); margin-bottom:14px; }
.price-old { display:block; text-decoration:line-through; color:var(--muted); font-weight:700; font-size:.9rem; }
.off-badge { display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px; background:rgba(16,185,129,.15); color:#10b981; font-size:.68rem; font-weight:800; }
.price-new { font-size:1.7rem; font-weight:800; color:var(--brand); line-height:1; white-space:nowrap; }
.price-new small { font-size:.7rem; color:var(--muted); font-weight:700; margin-left:3px; }
.tools-label { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tools-label b { color:var(--brand); font-weight:800; text-transform:none; letter-spacing:0; }
.access { display:flex; align-items:center; justify-content:center; gap:6px; margin:auto 0 12px; padding-top:4px; font-size:.72rem; font-weight:800; color:var(--muted); }
.access i { color:var(--brand); }
.card-body form { margin:0; }
.no-result { display:none; grid-column:1/-1; text-align:center; padding:34px 10px; color:var(--muted); font-weight:700; }
.no-result.show { display:block; } .no-result i { display:block; font-size:1.8rem; margin-bottom:8px; color:var(--brand); }



/* CSS END: Sections & cards */

/* CSS START: Scroll to top (left) */
/* CSS END: Scroll to top */


/* CSS START: Footer (from toolsfooter.php) */
    :root {
        --footer-bg: #030812;
        --footer-surface: rgba(255, 255, 255, 0.02);
        --brand-orange: #FF4A17;
        --brand-orange-hover: #ff6a42;
        --text-muted: #94a3b8;
        --text-light: #f8fafc;
        --border-color: rgba(255, 255, 255, 0.06);
        --transition-speed: 0.3s;
    }

    .main-footer {
        background-color: var(--footer-bg);
        color: var(--text-light);
        padding-top: 80px;
        font-family: 'Inter', 'Manrope', sans-serif;
        position: relative;
        overflow: hidden;
        border-top: 1px solid rgba(255, 74, 23, 0.2);
        z-index: 1; 
    }

    .main-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--brand-orange) 50%, transparent 100%);
        box-shadow: 0 0 20px 2px rgba(255, 74, 23, 0.3);
    }

    .footer-top-grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr;
        gap: 22px;
    }

    @media (max-width: 991px) {
        .footer-top-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }
    }

    @media (max-width: 575px) {
        .footer-top-grid {
            grid-template-columns: 1fr;
        }
    }

    .footer-widget {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        height: 100%;
    }

    .footer-logo {
        max-width: 170px;
        margin-bottom: 20px;
        display: block;
        transition: opacity var(--transition-speed) ease;
    }

    .footer-logo:hover {
        opacity: 0.9;
    }

    .footer-desc {
        color: var(--text-muted);
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .footer-title {
        color: var(--brand-orange);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 20px;
        text-transform: lowercase;
        white-space: nowrap;
    }

    .footer-title::first-letter {
        text-transform: uppercase;
    }

    .footer-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-list li {
        margin-bottom: 12px;
    }

    .footer-link {
        display: flex;
        align-items: center;
        color: var(--text-muted) !important;
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 400;
        transition: all var(--transition-speed) ease;
        white-space: nowrap;
    }

    .footer-link span:not(.link-icon-wrap) {
        text-transform: lowercase;
        transition: all var(--transition-speed) ease !important;
    }

    .footer-link span:not(.link-icon-wrap)::first-letter {
        text-transform: uppercase;
    }

    .link-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        margin-right: 10px;
        flex-shrink: 0;
        transition: all var(--transition-speed) ease;
    }

    .main-footer .footer-link i {
        color: var(--brand-orange) !important;
        font-size: 0.85rem !important;
        margin: 0 !important;
        width: auto !important;
        transition: all var(--transition-speed) ease !important;
        font-style: normal !important;
    }

    @media (max-width: 991px) {
        .footer-title,
        .footer-link {
            white-space: normal;
        }
    }

    .main-footer .footer-link:hover {
        color: #ffffff !important;
        transform: translateX(5px);
    }

    .main-footer .footer-link:hover .link-icon-wrap {
        background: var(--brand-orange) !important;
    }

    .main-footer .footer-link:hover i {
        color: #ffffff !important;
    }
    
    .main-footer .footer-link:hover span {
        color: #ffffff !important;
    }

    .contact-highlight {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, rgba(255, 74, 23, 0.15), rgba(255, 74, 23, 0.05));
        padding: 10px 18px;
        border-radius: 8px;
        border: 1px solid rgba(255, 74, 23, 0.2);
        margin-bottom: 18px;
        width: 100%;
    }

    .contact-highlight i {
        color: var(--brand-orange) !important;
        font-size: 1.1rem !important;
        margin-right: 10px !important;
    }

    .contact-highlight span {
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .contact-address {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--text-muted);
        font-size: 0.88rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .contact-address i {
        color: var(--brand-orange) !important;
        margin-top: 3px !important;
        flex-shrink: 0;
        margin-right: 0 !important;
    }

    .certified-badge {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px dashed var(--border-color);
        border-radius: 8px;
        color: var(--text-muted);
        font-size: 0.85rem;
        transition: all var(--transition-speed) ease;
    }

    .certified-badge i {
        color: #eab308 !important;
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .certified-badge:hover {
        border-color: #eab308;
        color: #ffffff;
    }

    .social-icon-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 0.95rem;
        flex-shrink: 0;
        text-decoration: none;
        filter: grayscale(100%);
        opacity: 0.85;
        transition: filter var(--transition-speed) ease, opacity var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    }
    
    .social-icon i {
        margin: 0 !important;
        width: auto !important;
        color: #ffffff !important;
    }

    .social-icon:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    }

    .mini-payment-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 4px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }

    .mini-pay-card {
        background: #ffffff;
        border-radius: 6px;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4/3;
        transition: all var(--transition-speed) ease;
    }

    .mini-pay-card img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .mini-pay-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 10px rgba(255, 74, 23, 0.3);
        border: 1px solid var(--brand-orange);
    }

    .payment-partners-area {
        background: rgba(0, 0, 0, 0.3);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 45px 0;
        margin-top: 40px;
    }

    .payment-title {
        text-align: center;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: var(--text-muted);
        margin-bottom: 25px;
        font-weight: 600;
    }

    .eps-main-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
    }

    .eps-main-logo {
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
        border-radius: 10px;
        padding: 14px 34px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 3px solid #10b981;
        box-shadow: 0 12px 24px rgba(16, 185, 129, 0.22);
    }

    .eps-main-logo img {
        max-height: 36px;
        max-width: 150px;
        object-fit: contain;
    }

    .payment-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        padding: 4px 4px 14px;
        scrollbar-width: thin;
        scrollbar-color: var(--brand-orange) rgba(255, 255, 255, 0.05);
    }

    .payment-grid::-webkit-scrollbar {
        height: 6px;
    }

    .payment-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
    }

    .payment-grid::-webkit-scrollbar-thumb {
        background: var(--brand-orange);
        border-radius: 3px;
    }

    @media (min-width: 1400px) {
        .payment-grid {
            justify-content: center;
        }
    }

    /* Fixed Payment Card Size (Slightly smaller as requested) */
    .payment-card-footer {
        background: #ffffff;
        border-radius: 7px;
        padding: 11px 17px; /* Decreased padding to make image size smaller */
        height: 38px; /* Reduced height by ~4px */
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-speed) ease;
        opacity: 0.75;
        filter: grayscale(100%);
        cursor: pointer;
    }

    .payment-card-footer img {
        max-height: 15px; /* Reduced max-height so image is smaller */
        max-width: 52px;  /* Reduced max-width */
        object-fit: contain;
    }

    .payment-card-footer:hover {
        opacity: 1;
        filter: grayscale(0%);
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        border-bottom: 2px solid var(--brand-orange);
    }

    .footer-bottom {
        padding: 20px 0;
        background-color: #02050a;
    }

    .footer-bottom .container {
        padding-right: 90px;
    }

    .footer-bottom-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-bottom-left {
        display: flex;
        align-items: center;
        gap: 15px; 
        flex-wrap: wrap;
    }

    .copyright-text {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin: 0; 
        display: flex;
        align-items: center;
    }

    .copyright-text span {
        color: #ffffff;
        font-weight: 500;
        margin: 0 4px;
    }

    .bottom-links {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .bottom-links a {
        color: #64b5f6 !important; 
        text-decoration: none;
        font-size: 0.85rem;
        transition: color var(--transition-speed) ease;
    }

    .bottom-links a:hover {
        color: var(--brand-orange) !important;
    }

    .bottom-links .separator {
        width: 4px;
        height: 4px;
        background-color: rgba(255,255,255,0.2);
        border-radius: 50%;
    }

    @media (max-width: 991px) {
        .footer-bottom .container {
            padding-right: var(--bs-gutter-x, 0.75rem);
        }
        .footer-widget {
            margin-bottom: 20px;
        }
        .footer-bottom-inner {
            flex-direction: column;
            text-align: center;
            justify-content: center;
        }
        .footer-bottom-left {
            justify-content: center;
            gap: 10px;
        }
    }

    @media (max-width: 576px) {
        .payment-card-footer {
            height: 42px;
            padding: 6px 10px;
        }
        .payment-card-footer img {
            max-height: 18px;
            max-width: 58px;
        }
        .eps-main-logo {
            height: 54px;
            padding: 10px 24px;
        }
        .eps-main-logo img {
            max-height: 28px;
        }
        .footer-bottom-left {
            flex-direction: column; 
            gap: 5px;
        }
    }
    

/* CSS END: Footer */



/* CSS START: Scroll to top (brand color, navy on hover) */
.to-top { position:fixed; left:25px; bottom:30px; z-index:2147483000; width:52px; height:52px; border-radius:50%; border:2px solid #fff; background:linear-gradient(135deg,#FF4A17,#FF7E40); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 5px 20px rgba(255,74,23,.4); opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .3s, visibility .3s, transform .3s, background .3s, box-shadow .3s; }
.to-top.visible { opacity:1; visibility:visible; transform:none; }
.to-top.visible:hover { background:linear-gradient(135deg,#12375C,#1d5a96); box-shadow:0 5px 20px rgba(18,55,92,.45); transform:scale(1.15) rotate(-8deg); }
/* CSS END: Scroll to top */

/* CSS START: Header search (icon opens bar, menu hides) */
.s-open { margin-left:auto; }
.s-open, .theme-btn { width:44px; height:40px; padding:0; }
.s-open > i, .theme-btn > i { position:relative; z-index:1; font-size:.95rem; }
.sbar { display:none; align-items:center; gap:6px; flex:1; height:46px; padding:0 6px 0 16px; border-radius:999px; background:var(--surface); border:1.5px solid var(--brand); box-shadow:0 0 0 4px rgba(255,74,23,.12); }
.sbar > i { color:var(--brand); }
.sbar input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--text); font-family:inherit; font-size:.92rem; font-weight:600; }
.sbar input::placeholder { color:var(--muted); }
.sb-count { font-size:.74rem; font-weight:800; color:var(--muted); white-space:nowrap; padding:0 6px; }
.sb-btn { width:34px; height:34px; flex-shrink:0; border:0; border-radius:50%; background:var(--surface2); color:var(--text); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:.8rem; transition:background .2s, color .2s; }
.sb-btn:hover { background:var(--brand); color:#fff; } .sb-btn:disabled { opacity:.4; pointer-events:none; }
.sb-x { background:rgba(239,68,68,.14); color:#ef4444; } .sb-x:hover { background:#ef4444; }
.hdr.is-searching .sbar { display:flex; }
.hdr.is-searching .s-open, .hdr.is-searching .hdr-burger { display:none; }
/* CSS END: Header search */

/* CSS START: Footer safety (standalone, no framework needed) */
.main-footer { font-family:'Inter','Plus Jakarta Sans',sans-serif; line-height:1.5; text-align:left; }
.main-footer .container { width:100%; max-width:1320px; margin:0 auto; padding-left:20px; padding-right:20px; }
.main-footer .pb-2 { padding-bottom:8px; }
.main-footer h3, .main-footer h4, .main-footer p { margin-top:0; }
.footer-bottom .container { padding-right:90px; }
@media (max-width:991px) { .footer-bottom .container { padding-right:20px; } }
/* CSS END: Footer safety */









/* CSS START: Hero orbit */
.hero { position:relative; display:flex; align-items:center; min-height:100vh; min-height:100svh; padding:96px 20px 84px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(600px 400px at 8% 12%,rgba(255,74,23,.2),transparent 70%), radial-gradient(640px 420px at 90% 80%,rgba(6,182,212,.18),transparent 70%), radial-gradient(var(--border) 1.2px,transparent 1.5px) 0 0/24px 24px; -webkit-mask-image:linear-gradient(#000 65%,transparent); mask-image:linear-gradient(#000 65%,transparent); }
.hero-2 { width:100%; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center; text-align:left; }
.hero h1 { margin:18px 0 26px; font-size:clamp(2rem,4vw,3.3rem); line-height:1.12; }
.hero-cta { justify-content:flex-start; margin-bottom:28px; }
.proof { display:flex; flex-wrap:wrap; gap:0; margin-bottom:22px; }
.proof > div { display:flex; flex-direction:column; padding:0 22px; border-left:2px solid var(--border); }
.proof > div:first-child { padding-left:0; border-left:0; }
.proof b { font-size:1.5rem; font-weight:800; line-height:1.1; color:var(--text); }
.proof span { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 4px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:.74rem; font-weight:700; color:var(--muted); }
.chip i { width:22px; height:22px; border-radius:50%; background:rgba(255,74,23,.14); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; }
.chip a { color:var(--brand); font-weight:800; }
/* [Orbit Size Fix] Start - size comes from the orbit width itself (cqw), so icons sit on the rings on every screen */
.orbit { --s:min(470px,92vw); position:relative; width:min(470px,100%); aspect-ratio:1; margin:0 auto; }
@supports (width:1cqw) { .orbit { container-type:inline-size; --s:100cqw; } }
/* [Orbit Size Fix] End */
.ring { position:absolute; inset:0; border-radius:50%; animation:spin 60s linear infinite; }
.ring::before { content:""; position:absolute; inset:calc(50% - var(--rad)); border-radius:50%; border:1.5px dashed rgba(255,74,23,.4); }
.ring-out { --rad:calc(var(--s) * .46); } .ring-in { --rad:calc(var(--s) * .34); animation-duration:44s; animation-direction:reverse; }
.o-item { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; transform:rotate(var(--a)) translateX(var(--rad)) rotate(calc(var(--a) * -1)); }
.oi { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:var(--surface); border:1px solid var(--border); color:var(--brand); font-size:1rem; box-shadow:var(--shadow); animation:spin 60s linear infinite reverse; transition:background .2s, color .2s; }
.ring-in .oi { animation-duration:44s; animation-direction:normal; }
.oi:hover { background:var(--brand); color:#fff; z-index:5; }
.oi::after { content:"View details for " attr(data-name) " \2197"; position:absolute; bottom:calc(100% + 10px); left:50%; transform:translate(-50%,6px); padding:7px 12px; border-radius:9px; background:#101C2A; color:#fff; border:1px solid var(--brand); font-size:.72rem; font-weight:700; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .1s, transform .1s; z-index:30; }
/* [Orbit Tool Images] Start - small round tool logos on the clock rings */
.oi { overflow:visible; background:#fff; border:2px solid var(--brand); padding:0; }
.oi-letter { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; color:var(--brand); }
.oi img { position:absolute; inset:0; width:100%; height:100%; padding:4px; object-fit:contain; border-radius:50%; background:#fff; }
.oi:hover { background:#fff; }
@media (max-width:640px) { .o-item { width:36px; height:36px; margin:-18px 0 0 -18px; } .oi img { padding:3px; } .oi-letter { font-size:.8rem; } }
/* [Orbit Tool Images] End */
.oi:hover::after { opacity:1; visibility:visible; transform:translate(-50%,0); }
.orbit:hover .ring, .orbit:hover .oi { animation-play-state:paused; }
.core { --sec:0; position:absolute; left:50%; top:50%; width:calc(var(--s) * .5); aspect-ratio:1; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-radius:50%; color:#fff; text-align:center; background:radial-gradient(circle at 30% 25%,#1d3557,#101C2A 70%); box-shadow:0 0 70px rgba(255,74,23,.35), inset 0 0 30px rgba(255,255,255,.06); }
.core::before { content:""; position:absolute; inset:-9px; border-radius:50%; background:conic-gradient(var(--brand) calc(var(--sec) * 6deg), rgba(255,255,255,.14) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px)); }
.core .clock-label { font-size:.62rem; color:#ffb199; gap:6px; } .core .clock-label i { font-size:.85rem; }
.core .clock-time { gap:2px; font-size:clamp(1.4rem,3.8vw,2rem); color:#fff; }
.core .clock-time .sep { opacity:.5; } .core .clock-time .sc { color:#ff7a3d; }
.core-meta { display:flex; flex-direction:column; align-items:center; gap:5px; }
.core .ap { margin:0; padding:3px 9px; font-size:.7rem; }
.core .clock-date { font-size:.56rem; color:rgba(255,255,255,.7); max-width:130px; line-height:1.3; }
.scroll-cue { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.scroll-cue .mouse { width:22px; height:34px; border:2px solid var(--muted); border-radius:12px; position:relative; }
.scroll-cue .mouse::after { content:""; position:absolute; left:50%; top:6px; width:4px; height:6px; margin-left:-2px; border-radius:2px; background:var(--brand); animation:cue 1.6s infinite; }
.scroll-cue:hover { color:var(--brand); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes cue { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(12px); } }
@media (max-width:991px) { .hero-2 { grid-template-columns:1fr; gap:34px; } .hero { padding-top:92px; } .orbit { width:min(420px,92vw); } }
@media (max-width:640px) { .scroll-cue { display:none; } .hero { padding-bottom:44px; } .hero-cta > * { flex:1 1 100%; } .o-item { width:38px; height:38px; margin:-19px 0 0 -19px; } .oi { font-size:.85rem; } .proof > div { padding:0 14px; } }
@media (max-height:640px) { .scroll-cue { display:none; } }
/* CSS END: Hero orbit */

/* CSS START: Responsive */
@media (max-width:991px) {
  .hdr-menu, .hdr-actions { display:none; } .hdr-burger { display:inline-flex; align-items:center; justify-content:center; }
  .hdr.is-searching .hdr-logo, .hdr.is-searching .hdr-burger { display:none; }
  .hero { padding-top:100px; } .hero-grid { grid-template-columns:1fr; gap:34px; } .hero-visual { order:-1; }
  .fbadge.b1 { left:2%; } .fbadge.b2 { right:2%; }
}
@media (max-width:768px) {
  .sec, .sec-content { padding:50px 14px; } .hero { padding-left:14px; padding-right:14px; }
  .modal-body { padding:1.5rem; } .modal-header { padding:1rem 1.5rem; }
}
@media (max-width:520px) {
  .feat-grid { grid-template-columns:1fr; } .clock-time { font-size:1.9rem; } .grid, .grid-combo { grid-template-columns:1fr; }
  .hero-cta > * { flex:1 1 100%; } .fbadge { font-size:.66rem; padding:7px 10px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
/* CSS END: Responsive */
/* [Design Styles] End */

/* [Original Modal Look] Start - scoped to .modal */
.modal .showErrors {padding: 7px 15px; text-transform: capitalize; background: #FFF5C2; color: #868585; font-size: 16px; text-align: center; margin-bottom: 10px; display: none;}
.modal .toggleicon {position: relative;}
.modal .toggleicon .toggle_icon {position: absolute; cursor: pointer; top: 50%; padding: 3px; transform: translateY(-50%); right: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
.modal .a_color {color: var(--a-color); transition: 0.3s ease; cursor: pointer; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease;}
.modal .a_color:hover {color: var(--hover-color);}
.modal .btn1 {outline: none; padding: 10px 12px !important; background: var(--fitb-btn-bg); color: var(--white); cursor: pointer; text-transform: capitalize; font-weight: 400; display: block; border: none;}
.modal .forgot_box h3,.modal .register_box h3,.modal .login_box h3 {margin-bottom: 20px; border-bottom: 1px solid #7777779c; padding-bottom: 5px; color: #777777; font-weight: 700; text-transform: capitalize; font-size: 22px;}
.modal .forgot_box .form .mb-3,.modal .form .mb-3 {margin-bottom: 15px;}
.modal .register_box .form .mb-3 {margin-bottom: 5px !important;}
.modal .forgot_box .form .mb-3 label,.modal .form .mb-3 label {text-transform: capitalize; margin-bottom: 3px; color: #777777; font-size: 15px !important;}
.modal .form .mb-3 input:focus,.modal .form .mb-3 input:focus {box-shadow: none; border: 1px solid #dad5d5;}
.modal .form p,.modal .form p {text-transform: capitalize; text-align: center; color: #777777;}
.modal .form p:last-child,.modal .form p:last-child {margin-top: 10px;}
/* [Original Modal Look] End */

/* [Original Terms Popup] Start */
.terms{
    display: none;
    z-index: 9999999 !important;
    width: 100%;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
}
.terms_content{
    max-width: 50%;
    margin: auto;
    min-height: calc(100vh - 6rem);
    background: #fff;
    text-transform: capitalize;
    overflow: hidden;
}
.terms_cond_text{
    overflow-y: auto;
    width:100%;
    height: 450px;
    padding:20px;
}
/* [Original Terms Popup] End */

/* [Original Content + OTP + Alerts] Start */
/* START - CONTENT WRAPPER */
.content-max-width {
    max-width: 1200px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

body {
    overflow-x: hidden;
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}
/* END - CONTENT WRAPPER */

/* START - ACCORDION CONTENT */
.accordion-content {
    background-color: #ffffff;
    border-radius: 12px; 
    margin-top: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
}

.content-inner {
    padding: 30px;
    line-height: 1.8;
}
.content-inner p {
    text-align: justify;
}

.content-inner .accordion-h2 {
    text-align: center;
    color: #fff;
    background-color: #FF4A17;
    padding: 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    margin-bottom: 25px;
}

.content-inner .accordion-h2:hover {
    background-color: #12375C;
}

.content-inner h3, .content-inner h4 {
    color: #101C2A;
    margin-top: 20px;
}
/* END - ACCORDION CONTENT */
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.custom-padding {
    padding-left: 50px !important; 
    padding-right: 50px !important;
}

.combo-section-padding {
    padding-left: 50px !important; 
    padding-right: 50px !important; 
}

.single-section-padding {
    padding-left: 0px !important; 
    padding-right: 0px !important; 
}

.content-section-padding {
    padding-left: 0px !important; 
    padding-right: 0px !important; 
}

.single-product-list-override {
    margin-left: -30px !important; 
    margin-right: -30px !important;
}
/* END - UTILS */
.otp-container { padding: 10px; text-align: center; }
.otp-input { 
    width: 100%; padding: 12px; font-size: 20px; text-align: center; 
    letter-spacing: 5px; border: 2px solid #ddd; border-radius: 8px; margin-bottom: 15px;
}
.resend-box { font-size: 14px; margin-top: 10px; }
.resend-btn { color: #FF4A17; cursor: pointer; text-decoration: underline; font-weight: bold; }
.resend-btn.disabled { color: #999 !important; cursor: not-allowed !important; text-decoration: none !important; pointer-events: none !important; }
/* END - OTP MODAL */
/* START - BUTTONS AND ALERTS */
.swal-content__input {
    display: block !important;
    margin: 15px auto !important;
    width: 80% !important;
    border: 1px solid #ff4a17 !important;
    padding: 10px !important;
    text-align: center !important;
    font-size: 18px !important;
    border-radius: 5px !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    color: #333 !important;
}
.swal-overlay {
    z-index: 99999 !important;
}

.fw-600 {
    font-weight: 600 !important;
}
.cursor-pointer {
    cursor: pointer;
}
.border-end-0 {
    border-right: 0 !important;
}
.border-start-0 {
    border-left: 0 !important;
}
.rounded-3 {
    border-radius: 0.75rem !important;
}

.otp-modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.otp-header {
    background: #FF4A17;
    color: white;
    padding: 20px;
    text-align: center;
}
.otp-input {
    width: 100%;
    height: 55px;
    font-size: 28px;
    text-align: center;
    letter-spacing: 8px;
    border-radius: 12px;
    border: 2px solid #eee;
    margin: 20px 0;
    background: #f9f9f9;
}
.otp-input:focus {
    border-color: #FF4A17;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 74, 23, 0.1);
    outline: none;
}
.btn-verify {
    background-color: #FF4A17;
    color: white;
    padding: 14px;
    border-radius: 12px;
    font-weight: bold;
    width: 100%;
    border: none;
    font-size: 18px;
}
.btn-verify:hover {
    background-color: #e63e0e;
    color: white;
}

#loging_form button[type="submit"], 
.login_now_combo, 
.btn-primary { 
    background-color: #FF4A17 !important; 
    border-color: #FF4A17 !important; 
    color: #fff !important; 
}

#loging_form button[type="submit"]:hover {
    background-color: #e63e0e !important;
}

.forgot-pass, 
.register-link, 
a[data-bs-target="#user_register"], 
a[href*="password_reset"],
.text-primary { 
    color: #FF4A17 !important; 
    text-decoration: none;
}

.otp-container { padding: 10px; text-align: center; }
.otp-digit {
  width: 45px; height: 55px; text-align: center; font-size: 24px; font-weight: 700;
  border: 2px solid #ddd; border-radius: 10px; outline: none; transition: 0.2s;
  margin: 0 5px !important;
}
.otp-digit:focus { border-color: #28a745; }
.otp-highlight-msg {
    color: #198754 !important; font-weight: 700; font-size: 15px;
    line-height: 1.5; margin: 10px 0; padding: 10px; background: rgba(25, 135, 84, 0.05);
    border-radius: 8px; border: 1px dashed #198754;
    text-align: center;
}
.otp-spam-msg {
    color: #e74c3c !important; 
    font-size: 12px; 
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.4;
}
.resend-btn { cursor: pointer; color: #FF4A17; font-weight: bold; text-decoration: underline; }
.resend-btn.disabled { color: #999; cursor: not-allowed; text-decoration: none; }

.swal-button--confirm.otp-verify-btn-green {
    background-color: #28a745 !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}
.swal-button--confirm.otp-verify-btn-green:hover {
    background-color: #218838 !important;
}

.verify-now-btn-manual {
    background-color: #28a745 !important;
    color: white !important;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
    margin-top: 15px;
    font-size: 18px;
}
.verify-now-btn-manual:hover {
    background-color: #218838 !important;
}
.verify-now-btn-manual:disabled {
    background-color: #94d3a2 !important;
    cursor: not-allowed;
}

#otp_status_msg {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    display: none;
    padding: 5px;
    text-align: center;
}

.lock-message {
    background: #fff0f0;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(211, 47, 47, 0.05);
}
.lock-message i {
    margin-right: 8px;
    animation: blink 1s infinite;
}
@keyframes blink {
    50% { opacity: 0.4; }
}

.otp-digit:disabled {
    cursor: not-allowed;
    border-color: #eee !important;
}
/* END - BUTTONS AND ALERTS */

/* START - PAGE LOADER */
#page-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* END - PAGE LOADER */
/* [Original Content + OTP + Alerts] End */

/* [Compact Centered Search Bar] Start */
.sbar { min-width:0; height:40px; }
.sbar input { width:0; font-size:.86rem; }
.hdr.is-searching .sbar { position:absolute; left:50%; transform:translateX(-50%); width:min(440px, calc(100% - 260px)); flex:none; }
@media (max-width:991px) { .hdr.is-searching .sbar { width:calc(100% - 40px); max-width:440px; } }
/* [Compact Centered Search Bar] End */

/* [Search Highlight] Start */
mark.hl { background:#ffe14d; color:#111; padding:0 2px; border-radius:4px; }
/* [Search Highlight] End */

/* [Why Choose Us] Start */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px 22px; text-align:center; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; }
.why-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.why-ic { width:58px; height:58px; margin:0 auto 14px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff; background:linear-gradient(135deg,#FF4A17,#FF7E40); box-shadow:0 10px 20px -8px rgba(255,74,23,.5); }
.why-card h3 { font-size:1.1rem; font-weight:800; margin:0 0 8px; color:var(--text); text-transform:capitalize; }
.why-card p { margin:0; color:var(--muted); font-weight:600; line-height:1.65; font-size:.93rem; }
@media (max-width:900px) { .why-grid { grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
/* [Why Choose Us] End */

/* [Original SEO Content Look] Start */
.content-inner h2 { margin-top:24px; font-size:1.5rem; }
.content-inner ul { padding-left:22px; }
@media (max-width:767px) { .content-inner { padding:18px; } .custom-padding { padding-left:15px !important; padding-right:15px !important; } .terms_content { max-width:94% !important; } }
/* [Original SEO Content Look] End */

/* [Misc] Start */
body { -webkit-user-select:none; -ms-user-select:none; user-select:none; }
input, textarea { -webkit-user-select:text; user-select:text; }
#page-loader { position:fixed; inset:0; background:#fff; z-index:9999; display:flex; justify-content:center; align-items:center; }
html.dark #page-loader { background:#050b17; }
.text-primary { color:#FF4A17 !important; }
/* [Misc] End */

/* ==========================================================================
   [SEO Content Section - Dark Theme] Start
   The SEO article (.accordion-content) had a hard-coded white card. In dark mode it now uses the
   same theme variables as the rest of the page (--surface / --text / --muted / --border), so the
   text is readable and the section matches the dark design. Light theme is unchanged.
   ========================================================================== */
html.dark .accordion-content { background-color: var(--surface); border-color: var(--border); box-shadow: 0 18px 40px -16px rgba(0,0,0,.65); color: var(--text); }
html.dark .content-inner { color: var(--text); }
html.dark .content-inner p,
html.dark .content-inner li,
html.dark .content-inner span,
html.dark .content-inner b,
html.dark .content-inner strong { color: var(--text); }
html.dark .content-inner p,
html.dark .content-inner li { color: var(--muted); }
html.dark .content-inner b,
html.dark .content-inner strong { color: var(--text); }
html.dark .content-inner h2:not(.accordion-h2),
html.dark .content-inner h3,
html.dark .content-inner h4 { color: #ffffff; }
html.dark .content-inner a { color: #6db7ff; }
html.dark .content-inner a:hover { color: #9fd0ff; }
html.dark .content-inner .accordion-h2 { color: #fff; background-color: #FF4A17; }
html.dark .content-inner .accordion-h2:hover { background-color: #1d4f86; }
html.dark .content-inner hr { border-color: var(--border); }
/* terms popup shown from the same include */
html.dark .terms_content { background-color: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html.dark .terms_content p, html.dark .terms_content li, html.dark .terms_content .terms_cond_text { color: var(--muted) !important; }
html.dark .terms_content h1, html.dark .terms_content h2, html.dark .terms_content h3, html.dark .terms_content h4, html.dark .terms_content strong, html.dark .terms_content b { color: var(--text) !important; }
/* [SEO Content Section - Dark Theme] End */