/* ============================================================
   M-CONNECT MEDIA — GLOBAL REDESIGN v2
   Targets actual Magento theme classes directly
   No CSS variables — all hardcoded for maximum compatibility
   ============================================================ */

/* ==========================================================
   1. GLOBAL TYPOGRAPHY
   ========================================================== */
body,
body.cms-page-view,
.page-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}

p, li, span, a, td, th, label, input, select, textarea, button, div {
    font-family: 'Inter', sans-serif !important;
}

a { transition: all 0.3s ease !important; }
html { scroll-behavior: smooth; }
::selection { background: #2563eb; color: #fff; }

/* ==========================================================
   2. TOP BAR (.mcs-topbar)
   ========================================================== */
.mcs-topbar {
    background: #0f172a !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.mcs-topbar-left { font-size: 13px !important; }
.mcs-badge {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}
.mcs-badge-green { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }
.mcs-badge-blue { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
.mcs-price { color: #f59e0b !important; font-weight: 700 !important; }
.mcs-topbar-right a { color: #94a3b8 !important; font-size: 13px !important; }
.mcs-topbar-right a:hover { color: #fff !important; }
.mcs-dot { background: #475569 !important; }
.mcs-dot-active { background: #2563eb !important; }
.mcs-sep { background: rgba(255,255,255,0.15) !important; }

/* Customer auth dropdown */
.mcs-account-btn { color: #94a3b8 !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 8px !important; padding: 5px 12px !important; font-size: 13px !important; }
.mcs-account-btn:hover { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }
.auth-menu { background: #fff !important; border-radius: 12px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important; border: 1px solid #e2e8f0 !important; }
.auth-menu ul li a { font-size: 14px !important; color: #475569 !important; padding: 10px 16px !important; }
.auth-menu ul li a:hover { color: #2563eb !important; background: #f1f5f9 !important; }

/* ==========================================================
   3. HEADER & NAVIGATION
   ========================================================== */
.desktop-header {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.menu-header-area { padding: 8px 0 !important; }

/* Logo */
.navbar-logo .my-logo img { height: 42px !important; width: auto !important; }

/* Navigation */
.my-navbar-nav > li > a,
.my-navbar-nav > li > .dropdown-toggle {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 10px 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
}
.my-navbar-nav > li > a:hover,
.my-navbar-nav > li > .dropdown-toggle:hover,
.my-navbar-nav > li:hover > a,
.my-navbar-nav > li.open > a {
    color: #2563eb !important;
    background: transparent !important;
}

/* Sale badge on Extensions */
.e-sale {
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
}

/* Dropdown menus */
.mega-dropdown-menu,
.single-dropdown {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.12) !important;
    padding: 24px !important;
    background: #fff !important;
    margin-top: 0 !important;
}
.mega-dropdown-menu .mg-menu-listing li a,
.single-dropdown ul li a {
    font-size: 14px !important;
    color: #475569 !important;
    padding: 7px 0 !important;
    display: block !important;
}
.mega-dropdown-menu .mg-menu-listing li a:hover,
.single-dropdown ul li a:hover {
    color: #2563eb !important;
}
.mg-menu-listing .fa-circle-o:before { color: #2563eb !important; font-size: 8px !important; }
.mg-menu-listing .ms-icon,
.mg-menu-listing .es-icon {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 15px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #2563eb !important;
}
/* Menu support card */
.menu-top-box.last-box {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 24px !important;
}
.menu-top-box.last-box h3 { font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; }
.menu-price h4 { color: #2563eb !important; font-weight: 800 !important; font-size: 28px !important; }
.menu-price h4 span { color: #94a3b8 !important; text-decoration: line-through !important; font-size: 14px !important; font-weight: 400 !important; }

/* ==========================================================
   4. ALL BUTTONS (mcs-btn-*)
   ========================================================== */
.mcs-btn-1,
.mcs-btn-3,
.mcs-btn-8,
a.mcs-btn-1,
a.mcs-btn-3,
a.mcs-btn-8 {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-align: center !important;
}
.mcs-btn-1:hover,
.mcs-btn-3:hover,
.mcs-btn-8:hover,
a.mcs-btn-1:hover,
a.mcs-btn-3:hover,
a.mcs-btn-8:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(37,99,235,0.5) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* ==========================================================
   5. HERO BANNER (.customimage)
   ========================================================== */
.customimage {
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    padding: 80px 0 !important;
}
.customimage::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,58,95,0.88) 100%) !important;
    z-index: 0 !important;
}
.customimage .container { position: relative !important; z-index: 1 !important; }
.customimage h1,
.customimage h2,
.mcs-inner-left h1 {
    color: #fff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
}
.customimage p,
.mcs-inner-left p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.mcs-inner-right {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    padding: 32px !important;
}
.mcs-inner-right p { color: rgba(255,255,255,0.7) !important; font-size: 14px !important; line-height: 1.7 !important; }
.mcs-inner-right .mcs-btn-8 {
    margin-top: 20px !important;
    width: 100% !important;
    text-align: center !important;
}

/* ==========================================================
   6. SECTION HEADINGS (.new-title, h2)
   ========================================================== */
h2.new-title,
.new-title,
.pro-new-title,
.cms-page-view h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}
.pro-new-title span {
    color: #2563eb !important;
}

/* ==========================================================
   7. CONTENT SECTIONS
   ========================================================== */
.magento-responsive-theme,
section.magento-responsive-theme {
    padding: 80px 0 !important;
}
.magento-responsive-theme p,
.cms-page-view .column.main p {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.7 !important;
}
.magento-responsive-theme img {
    border-radius: 12px !important;
}

/* Feature lists */
.stranth-list { list-style: none !important; padding: 0 !important; }
.stranth-list li {
    padding: 10px 0 !important;
    font-size: 15px !important;
    color: #475569 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.stranth-list li:before {
    content: '\2713' !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    width: 24px !important;
    height: 24px !important;
    background: #dbeafe !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
.MCAS { list-style: none !important; padding: 0 !important; }
.MCAS li {
    padding: 8px 0 !important;
    font-size: 15px !important;
    color: #475569 !important;
}
.MCAS li:before {
    content: '\2713' !important;
    color: #22c55e !important;
    font-weight: 700 !important;
    margin-right: 10px !important;
}

/* ==========================================================
   8. PROCESS STEPS (.migration-process)
   ========================================================== */
.migration-process-block {
    padding: 80px 0 !important;
    background: #f8fafc !important;
}
.migration-process-steps { list-style: none !important; padding: 0 !important; }
.process-item {
    margin-bottom: 24px !important;
}
.process-content {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    transition: all 0.3s ease !important;
}
.process-content:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    border-color: transparent !important;
}
.process-content h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
}
.process-content p {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.7 !important;
}
.icon-img img {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
}

/* ==========================================================
   9. PRICING / PACKAGES
   ========================================================== */
.product-futurepoint,
.package-box,
.plan-card {
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}
.product-futurepoint:hover,
.package-box:hover,
.plan-card:hover {
    border-color: #2563eb !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(37,99,235,0.1) !important;
}
.product-futurepoint h3,
.package-box h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.product-futurepoint .price,
.package-box .price {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #2563eb !important;
}

/* ==========================================================
   10. PORTFOLIO SECTION
   ========================================================== */
.pro-new-title { margin-bottom: 32px !important; }
.portfolio-item,
.slick-slide .item {
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}
.portfolio-item:hover,
.slick-slide .item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
.portfolio-item img {
    border-radius: 12px !important;
    transition: transform 0.5s ease !important;
}
.portfolio-item:hover img {
    transform: scale(1.05) !important;
}

/* ==========================================================
   11. TESTIMONIALS
   ========================================================== */
.our-tickets-section,
.testimonials-section {
    background: #0f172a !important;
    padding: 80px 0 !important;
}
.our-tickets-section h2,
.testimonials-section h2 {
    color: #fff !important;
}
.our-tickets-section p,
.testimonials-section p {
    color: #94a3b8 !important;
}

/* ==========================================================
   12. FAQ / ACCORDION
   ========================================================== */
.faq-section { padding: 80px 0 !important; }
.faq-title,
.reasons-title {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-bottom: 8px !important;
}
.faq-title:hover,
.reasons-title:hover {
    background: #dbeafe !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
}
.faq-content,
.reasons-content {
    padding: 16px 20px !important;
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.7 !important;
}

/* ==========================================================
   13. HIRE SECTION
   ========================================================== */
.hire-dedicated-developers-left h2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
}
.hire-dedicated-developers-left p {
    font-size: 15px !important;
    color: #475569 !important;
    line-height: 1.7 !important;
}

/* ==========================================================
   14. FORMS
   ========================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select,
.input-text {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: border-color 0.2s ease !important;
    background: #fff !important;
    font-family: 'Inter', sans-serif !important;
}
input:focus, textarea:focus, select:focus, .input-text:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
    outline: none !important;
}

/* ==========================================================
   15. IMAGES
   ========================================================== */
.cms-page-view .column.main img,
.magento-responsive-theme img,
.magento-2-development-right img {
    border-radius: 12px !important;
    max-width: 100% !important;
}

/* ==========================================================
   16. FOOTER (reconstructed via CSS since no footer HTML)
   ========================================================== */
.page-wrapper > .panel.wrapper {
    background: #0f172a !important;
}
.panel.wrapper .header.links {
    background: transparent !important;
}

/* Copyright at bottom */
.copyright {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 20px 0 !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* ==========================================================
   17. GENERAL LINK STYLING
   ========================================================== */
.cms-page-view .column.main a:not(.mcs-btn-1):not(.mcs-btn-3):not(.mcs-btn-8) {
    color: #2563eb !important;
    font-weight: 500 !important;
}
.cms-page-view .column.main a:not(.mcs-btn-1):not(.mcs-btn-3):not(.mcs-btn-8):hover {
    color: #1e40af !important;
}

/* ==========================================================
   18. CONTAINER & LAYOUT
   ========================================================== */
.page-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ==========================================================
   19. SLICK CAROUSEL
   ========================================================== */
.slick-dots li button:before { color: #cbd5e1 !important; font-size: 10px !important; }
.slick-dots li.slick-active button:before { color: #2563eb !important; }
.slick-prev:before, .slick-next:before { color: #2563eb !important; }

/* ==========================================================
   20. TABLES
   ========================================================== */
table { border-collapse: collapse !important; }
table thead th, table th {
    background: #0f172a !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
}
table tbody td, table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #475569 !important;
}
table tbody tr:hover { background: #f8fafc !important; }

/* ==========================================================
   21. ALERTS & MESSAGES
   ========================================================== */
.message.success { background: #dcfce7 !important; border: 1px solid #86efac !important; color: #166534 !important; border-radius: 8px !important; }
.message.error { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; color: #991b1b !important; border-radius: 8px !important; }
.message.info, .message.notice { background: #dbeafe !important; border: 1px solid #93c5fd !important; color: #1e40af !important; border-radius: 8px !important; }

/* ==========================================================
   22. BREADCRUMBS (if they exist)
   ========================================================== */
.breadcrumbs { background: #f8fafc !important; padding: 14px 0 !important; border-bottom: 1px solid #e2e8f0 !important; }
.breadcrumbs a { color: #64748b !important; font-size: 13px !important; font-weight: 500 !important; }
.breadcrumbs a:hover { color: #2563eb !important; }
.breadcrumbs strong { color: #0f172a !important; font-weight: 600 !important; }

/* ==========================================================
   23. MINICART
   ========================================================== */
.minicart-wrapper .action.showcart { color: #0f172a !important; }
.minicart-wrapper .counter.qty { background: #2563eb !important; color: #fff !important; border-radius: 50% !important; }

/* ==========================================================
   24. CUSTOMER ACCOUNT
   ========================================================== */
.account .sidebar-main .block-title { font-weight: 700 !important; border-bottom: 2px solid #2563eb !important; }
.account .sidebar-main .nav.items .item a { font-size: 14px !important; color: #475569 !important; padding: 10px 16px !important; border-radius: 8px !important; }
.account .sidebar-main .nav.items .item a:hover,
.account .sidebar-main .nav.items .item.current a { background: #dbeafe !important; color: #2563eb !important; }

/* ==========================================================
   25. PRODUCT CARDS
   ========================================================== */
.product-item-info { border: 1px solid #e2e8f0 !important; border-radius: 16px !important; overflow: hidden !important; transition: all 0.3s ease !important; }
.product-item-info:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; border-color: transparent !important; transform: translateY(-4px) !important; }
.product-item-name a { font-size: 15px !important; font-weight: 600 !important; color: #0f172a !important; }
.product-item-name a:hover { color: #2563eb !important; }
.product-item .price { font-size: 20px !important; font-weight: 700 !important; color: #2563eb !important; }

/* ==========================================================
   26. PRODUCT DETAIL
   ========================================================== */
.product-info-main .page-title-wrapper .page-title { font-size: 28px !important; font-weight: 800 !important; }
.product-info-main .product-info-price .price { font-size: 32px !important; font-weight: 800 !important; color: #2563eb !important; }
.product.data.items > .item.title > .switch { font-weight: 600 !important; font-size: 15px !important; color: #0f172a !important; }
.product.data.items > .item.title.active > .switch { border-bottom: 2px solid #2563eb !important; color: #2563eb !important; }

/* ==========================================================
   27. PAGINATION
   ========================================================== */
.pages .item.current .page { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; border-radius: 8px !important; }
.pages .action { border-radius: 8px !important; }

/* ==========================================================
   28. SCROLLBAR
   ========================================================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ==========================================================
   29. MOBILE RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
    .customimage h1, .mcs-inner-left h1 { font-size: 28px !important; }
    h2.new-title, .new-title, .cms-page-view h2 { font-size: 26px !important; }
    .mcs-inner-right { margin-top: 24px !important; }
    .mobile-headmenu {
        background: #fff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 10px 16px !important;
    }
    .mcs-btn-1, .mcs-btn-3, .mcs-btn-8 {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .customimage h1, .mcs-inner-left h1 { font-size: 24px !important; }
    .mcs-topbar { font-size: 11px !important; }
    .customimage { padding: 60px 0 !important; }
}