/* =========================================
   Coding Journey – Premium Homepage Redesign
   Custom CSS Override v2.0
   ========================================= */

/* ─── Google Fonts Import ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── CSS Custom Properties ─── */
:root {
    --cj-primary: #6366f1;
    --cj-primary-light: #818cf8;
    --cj-primary-dark: #4f46e5;
    --cj-accent: #a855f7;
    --cj-accent-light: #c084fc;
    --cj-cyan: #06b6d4;
    --cj-emerald: #10b981;
    --cj-bg-dark: #0a0a1a;
    --cj-bg-section: #0d0d24;
    --cj-bg-card: rgba(255, 255, 255, 0.04);
    --cj-bg-card-hover: rgba(255, 255, 255, 0.08);
    --cj-text-primary: #ffffff;
    --cj-text-secondary: #b0b0cc;
    --cj-text-muted: #6b6b8a;
    --cj-border: rgba(99, 102, 241, 0.15);
    --cj-border-hover: rgba(99, 102, 241, 0.35);
    --cj-gradient-primary: linear-gradient(135deg, #6366f1, #a855f7);
    --cj-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --cj-radius: 16px;
    --cj-radius-sm: 10px;
    --cj-radius-lg: 24px;
    --cj-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Override theme variables */
    --hoot-body-bg: #0a0a1a !important;
    --hoot-shadow10: rgba(0,0,0,0.3) !important;
    --e-global-color-primary: #6366f1 !important;
    --e-global-color-secondary: #b0b0cc !important;
    --e-global-color-text: #b0b0cc !important;
    --e-global-color-accent: #a855f7 !important;
}

/* ─── NUCLEAR OVERRIDE: Force ALL backgrounds dark ─── */
body,
body.flavor-flavor,
body.flavor-flavor #page-wrapper,
#page-wrapper,
.page-wrapper,
.site-content,
#content,
.main-content-grid,
.content-area,
.hoot-main-aside,
.hoot-main,
#main,
.grid,
.hgrid,
.hoot-frontpage-area,
main,
.topbar-area,
section,
.elementor-section,
.e-con,
.e-parent,
.e-child,
.elementor-top-section,
.elementor-inner-section,
.elementor-widget-wrap,
.elementor-container,
.e-con-inner {
    background-color: transparent !important;
    background-image: none !important;
}

body,
body.flavor-flavor {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f2e 50%, #0a0a1a 100%) !important;
    background-color: #0a0a1a !important;
    color: var(--cj-text-secondary) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ─── Override specific inline white/light background colors ─── */
[style*="background-color: #f5f5f5"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background-color: #f8fafc"],
[style*="background-color: #f9f9f9"],
[style*="background-color: #F9FAFB"],
[style*="background-color: #fdfdfd"],
[style*="background-color: #eee"],
[style*="background-color:#f5f5f5"],
[style*="background-color:#fff"],
[style*="background-color:#ffffff"],
[style*="background-color:#f8fafc"],
[style*="background-color:#f9f9f9"],
[style*="background-color:#F9FAFB"],
[style*="background-color:#fdfdfd"],
[style*="background-color:#eee"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background: #f5f5f5"],
[style*="background: #f8fafc"],
[style*="background: #eff6ff"],
[style*="background: #D8D8D8"],
[style*="background:#f5f5f5"],
[style*="background:#fff"],
[style*="background:#ffffff"],
[style*="background:#f8fafc"],
[style*="background:#eff6ff"] {
    background-color: var(--cj-bg-dark) !important;
    background: var(--cj-bg-dark) !important;
}

/* ─── Custom classes found on the live site ─── */
.cj-section,
.cj-section[style],
section.cj-section {
    background-color: var(--cj-bg-dark) !important;
    background: var(--cj-bg-dark) !important;
}

.cj-btn-primary,
a.cj-btn-primary,
.cj-btn-primary[style] {
    background: var(--cj-gradient-primary) !important;
    background-color: transparent !important;
    color: #fff !important;
}

/* Force ALL divs & sections with inline white backgrounds */
div[style*="background-color: white"],
section[style*="background-color: white"],
div[style*="background-color:white"],
section[style*="background-color:white"],
div[style*="background: white"],
section[style*="background: white"] {
    background-color: var(--cj-bg-dark) !important;
    background: var(--cj-bg-dark) !important;
}

/* ─── Animated Background Orbs ─── */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 600px 600px at 15% 15%, rgba(99, 102, 241, 0.1), transparent),
        radial-gradient(ellipse 500px 500px at 85% 70%, rgba(168, 85, 247, 0.07), transparent),
        radial-gradient(ellipse 400px 400px at 50% 40%, rgba(6, 182, 212, 0.05), transparent);
}

/* ─── Selection Color ─── */
::selection {
    background: rgba(99, 102, 241, 0.4);
    color: #fff;
}

html { scroll-behavior: smooth; }

/* ─── All headings ─── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.widget-title,
.elementor-widget-heading .elementor-heading-title {
    font-family: 'Inter', sans-serif !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    letter-spacing: -0.02em;
}

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

/* ─── Body text and all paragraphs ─── */
.elementor-text-editor,
.elementor-text-editor p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-text-editor span,
p, span, li,
[style*="color"] {
    color: #f1f5f9 !important;
    line-height: 1.8 !important;
}

/* Override any inline text colors that might be dark */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #54595F"],
[style*="color:#54595F"],
[style*="color: #7A7A7A"],
[style*="color:#7A7A7A"] {
    color: #ffffff !important;
}

/* ─── Bold text inside paragraphs ─── */
.elementor-text-editor strong,
.elementor-text-editor b,
p strong, p b {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* =========================================
   HEADER / NAVIGATION
   ========================================= */
#header,
.site-header,
.header-aside,
.header-primary,
#header-aside,
#header-primary,
.topbar-area,
.header-aside .hgrid,
.siteheader-top {
    background: rgba(10, 10, 26, 0.9) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--cj-border) !important;
}

.site-title, .site-title a, #site-title, #site-title a {
    color: var(--cj-text-primary) !important;
    font-weight: 800 !important;
}

/* Nav links */
.menu-items a, .nav-menu a, .menu li a, .hoot-menu a, .primary-menu a {
    color: var(--cj-text-secondary) !important;
    font-weight: 500 !important;
    transition: var(--cj-transition) !important;
}
.menu-items a:hover, .nav-menu a:hover, .menu li a:hover, .hoot-menu a:hover {
    color: var(--cj-primary-light) !important;
}
.menu li.current-menu-item > a, .menu li.current_page_item > a {
    color: var(--cj-primary) !important;
}

/* ─── HARDCODED ELEMENTOR TOOL MENU OVERRIDES ─── */
/* Forcefully hide the hardcoded Elementor "Tool" widget block */
.cj-tools-menu {
    display: none !important;
}

/* =========================================
   HERO KEYWORD TICKER (green bar -> gradient)
   ========================================= */
.elementor-element-39ab365 > .elementor-widget-container,
[style*="background-color:#3EA069"],
[style*="background-color: #3EA069"] {
    background: var(--cj-gradient-primary) !important;
    padding: 12px 20px !important;
    position: relative;
    overflow: hidden;
}

.elementor-element-39ab365 > .elementor-widget-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.elementor-element-39ab365 .elementor-heading-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
}

/* =========================================
   BUTTONS - Premium gradient style
   ========================================= */
.elementor-button,
.e-button,
a.elementor-button,
.elementor-widget-button .elementor-button {
    background: var(--cj-gradient-primary) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.03em !important;
    color: #fff !important;
    transition: var(--cj-transition) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.elementor-button:hover, a.elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45) !important;
    filter: brightness(1.1) !important;
}

/* Ghost buttons (knowledge hub / blog links) */
.elementor-button-link[href*="blog"],
.elementor-button-link[href*="knowledge"] {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}
.elementor-button-link[href*="blog"]:hover,
.elementor-button-link[href*="knowledge"]:hover {
    border-color: var(--cj-primary) !important;
    background: rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2) !important;
}

/* Location city buttons */
.elementor-button-link[href*="digital-marketing"] {
    background: var(--cj-bg-card) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius-sm) !important;
    box-shadow: none !important;
    font-size: 0.85rem !important;
    padding: 10px 20px !important;
}
.elementor-button-link[href*="digital-marketing"]:hover {
    border-color: var(--cj-primary) !important;
    background: rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

/* Social link buttons (LinkedIn, Facebook, X) */
.elementor-button-link[href*="linkedin"],
.elementor-button-link[href*="facebook"],
.elementor-button-link[href*="x.com"],
.elementor-button-link[href*="twitter"] {
    border-radius: 50px !important;
}

/* =========================================
   SECTION TAG BADGES ("THE TECHNICAL ADVANTAGE" etc)
   ========================================= */
.elementor-widget-heading .elementor-heading-title[style*="text-transform: uppercase"][style*="letter-spacing"],
.elementor-heading-title[style*="font-size: 14px"],
.elementor-heading-title[style*="font-size:14px"] {
    color: var(--cj-primary-light) !important;
    font-weight: 600 !important;
}

/* =========================================
   SERVICE CARDS (6 grid boxes)
   ========================================= */
/* Target the 4-column service grid containers */
.elementor-element-b5e45ef,
.elementor-element-2e8f472,
.elementor-element-523f733,
.elementor-element-dbb3778 {
    background: var(--cj-bg-card) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius) !important;
    padding: 28px 24px !important;
    transition: var(--cj-transition) !important;
    position: relative !important;
    overflow: hidden !important;
}

.elementor-element-b5e45ef:hover,
.elementor-element-2e8f472:hover,
.elementor-element-523f733:hover,
.elementor-element-dbb3778:hover {
    border-color: var(--cj-border-hover) !important;
    background: var(--cj-bg-card-hover) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--cj-shadow-glow) !important;
}

/* Card top gradient line on hover */
.elementor-element-b5e45ef::before,
.elementor-element-2e8f472::before,
.elementor-element-523f733::before,
.elementor-element-dbb3778::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--cj-gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.elementor-element-b5e45ef:hover::before,
.elementor-element-2e8f472:hover::before,
.elementor-element-523f733:hover::before,
.elementor-element-dbb3778:hover::before {
    opacity: 1;
}

/* =========================================
   ALL OTHER ELEMENTOR CONTAINERS → Dark 
   ========================================= */
.e-con.e-parent,
.e-con.e-child,
.elementor-widget-container {
    background-color: transparent !important;
}

/* Containers with explicit light backgrounds set by Elementor */
.e-con[style*="background"],
.elementor-section[style*="background"] {
    background-color: var(--cj-bg-dark) !important;
    background-image: none !important;
}

/* But preserve sections with dark/gradient backgrounds */
.e-con[style*="background: #020617"],
.e-con[style*="background-color: #020617"],
.e-con[style*="background-color: #101828"],
.e-con[style*="background-color: #000000"],
.e-con[style*="background:#020617"],
.e-con[style*="background-color:#020617"],
.e-con[style*="background-color:#101828"],
.e-con[style*="background-color:#000000"] {
    background-color: inherit !important;
}

/* =========================================
   ICON STYLING
   ========================================= */
.elementor-icon, .elementor-icon i, .elementor-icon svg {
    color: var(--cj-primary) !important;
    fill: var(--cj-primary) !important;
}

.elementor-widget-icon-box .elementor-icon {
    background: rgba(99, 102, 241, 0.1) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* =========================================
   LIST BULLET POINT ICONS
   ========================================= */
.elementor-icon-list-item .elementor-icon-list-text {
    color: var(--cj-text-secondary) !important;
    font-size: 0.92rem !important;
    line-height: 1.8 !important;
}

.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
    color: var(--cj-emerald) !important;
    fill: var(--cj-emerald) !important;
}

/* =========================================
   FAQ / ACCORDION
   ========================================= */
.elementor-accordion-item, .elementor-toggle-item {
    background: var(--cj-bg-card) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius-sm) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    transition: var(--cj-transition) !important;
}
.elementor-accordion-item:hover, .elementor-toggle-item:hover {
    border-color: var(--cj-border-hover) !important;
}
.elementor-tab-title, .elementor-tab-title a, .elementor-toggle-title a {
    background: transparent !important;
    color: var(--cj-text-primary) !important;
    font-weight: 600 !important;
    border: none !important;
}
.elementor-tab-content, .elementor-toggle-content {
    color: var(--cj-text-secondary) !important;
    border-top: 1px solid var(--cj-border) !important;
}
.elementor-accordion-icon { color: var(--cj-primary) !important; }

/* =========================================
   IMAGES
   ========================================= */
.elementor-widget-image img {
    border-radius: var(--cj-radius-sm) !important;
}

/* =========================================
   GENERAL LINKS
   ========================================= */
a {
    color: var(--cj-primary-light) !important;
    text-decoration: none !important;
    transition: var(--cj-transition) !important;
}
a:hover {
    color: var(--cj-accent-light) !important;
}

/* White text links (inside hero etc) */
.elementor-button .elementor-button-text,
.elementor-button .elementor-align-icon-right,
.elementor-button i {
    color: #fff !important;
}

/* =========================================
   DIVIDER
   ========================================= */
.elementor-divider-separator {
    border-color: var(--cj-border) !important;
}

/* =========================================
   FOOTER
   ========================================= */
#footer, .site-footer, footer, .footer-area, .footer-columns,
#page-footer, .sub-footer, .footer-inner,
.footer-area .hgrid, .sub-footer .hgrid {
    background: #06061a !important;
    border-top: 1px solid var(--cj-border) !important;
    color: var(--cj-text-secondary) !important;
}

.footer-area a, #footer a, footer a {
    color: var(--cj-text-muted) !important;
}
.footer-area a:hover, #footer a:hover, footer a:hover {
    color: var(--cj-primary-light) !important;
}

.widget-title, .footer-area .widget-title, #footer .widget-title {
    color: var(--cj-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.footer-area .credit, .credit, .sub-footer {
    color: var(--cj-text-muted) !important;
}

/* =========================================
   SIDEBAR WIDGETS
   ========================================= */
.sidebar .widget, .widget-area .widget, aside .widget {
    background: var(--cj-bg-card) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius) !important;
    padding: 24px !important;
}

/* =========================================
   BLOG POST CARDS
   ========================================= */
article.post, .entry-grid, .archive-post, .hentry {
    background: var(--cj-bg-card) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius) !important;
    overflow: hidden !important;
    transition: var(--cj-transition) !important;
}
article.post:hover, .archive-post:hover {
    border-color: var(--cj-border-hover) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--cj-shadow-glow) !important;
}
.entry-title a, .post-title a {
    color: var(--cj-text-primary) !important;
    font-weight: 700 !important;
}
.entry-title a:hover, .post-title a:hover {
    color: var(--cj-primary-light) !important;
}
.entry-summary, .entry-content p, .entry-byline, .entry-meta {
    color: var(--cj-text-secondary) !important;
}

/* =========================================
   SOCIAL SHARE BAR (fixed bottom)
   ========================================= */
.a2a_kit, .addtoany_share_save_container, .a2a_floating_style {
    background: rgba(10, 10, 26, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid var(--cj-border) !important;
}

/* =========================================
   SEARCH / FORMS
   ========================================= */
.search-form input, .search-field, input[type="text"], input[type="email"],
textarea, .asl_w_container input {
    background: var(--cj-bg-card) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius-sm) !important;
    color: var(--cj-text-primary) !important;
}
.search-form input:focus, input:focus, textarea:focus {
    border-color: var(--cj-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* =========================================
   SCROLLBAR
   ========================================= */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cj-bg-dark); }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cj-primary); }

/* =========================================
   CTA SECTIONS (consultation/social)
   ========================================= */
.elementor-element-a7ae531,
.elementor-element-c4c331c {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08)) !important;
    border: 1px solid var(--cj-border) !important;
    border-radius: var(--cj-radius-lg) !important;
    padding: 48px 40px !important;
}

/* =========================================
   TOPBAR
   ========================================= */
.topbar-left, .topbar-right, .topbar-area, .topbar-area a {
    color: var(--cj-text-muted) !important;
}
.topbar-area a:hover { color: var(--cj-primary-light) !important; }

/* =========================================
   BREADCRUMBS & PAGE TITLES
   ========================================= */
.breadcrumb-trail, .breadcrumbs { color: var(--cj-text-muted) !important; }
.breadcrumb-trail a { color: var(--cj-text-secondary) !important; }
.entry-header, .page-header, .loop-meta { background: transparent !important; }

/* =========================================
   WP ADMIN BAR
   ========================================= */
#wpadminbar {
    background: rgba(10, 10, 26, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* =========================================
   RESPONSIVE & MOBILE FIXES
   ========================================= */

/* ─── 1. Fix Horizontal Shaking (Overflow-X) ─── */
html, body, .page-wrapper, #page-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ─── 2. Social Media Icons in ONE line ─── */
.elementor-social-icons-wrapper,
.elementor-widget-social-icons .elementor-widget-container,
.a2a_kit, .a2a_default_style {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: auto !important; /* Allow scroll if too many icons, but keep in one line */
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 5px;
}
.elementor-social-icon {
    flex: 0 0 auto !important; /* Prevent icons from shrinking or wrapping */
}

/* ─── 3. Main Title on ONE line ─── */
.site-title, 
.site-title a, 
#site-title, 
#site-title a,
.elementor-heading-title.cj-main-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ─── 4. Mobile Menu Fix (Three-Line Hamburger Dropdown) ─── */
.menu-toggle, .mobile-menu-toggle, .navbar-toggle, .btn-menu {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}
.menu-toggle:focus, .menu-toggle:hover {
    color: var(--cj-primary-light) !important;
}

@media (max-width: 768px) {
    /* Dropdown container styling when hamburger is clicked */
    .menu-toggle-active .nav-menu,
    .mobile-menu-active .menu,
    .toggled .nav-menu,
    .toggled .menu,
    .menu-open .nav-menu {
        display: block !important;
        background: var(--cj-bg-section) !important;
        border: 1px solid var(--cj-border) !important;
        padding: 10px !important;
        border-radius: var(--cj-radius-sm) !important;
        margin-top: 10px !important;
    }
    
    .menu-toggle-active .nav-menu li,
    .mobile-menu-active .menu li,
    .toggled .nav-menu li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .menu-toggle-active .nav-menu li a,
    .mobile-menu-active .menu li a {
        display: block !important;
        padding: 10px 15px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    .menu-toggle-active .nav-menu li a:hover,
    .mobile-menu-active .menu li a:hover {
        background: rgba(99, 102, 241, 0.1) !important;
        color: var(--cj-primary-light) !important;
    }

    /* Fix service cards right-alignment and clipping */
    .elementor-element-b5e45ef,
    .elementor-element-2e8f472,
    .elementor-element-523f733,
    .elementor-element-dbb3778 {
        margin: 0 15px 20px 15px !important;
        width: auto !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Force the parent flex container to center its children */
    .elementor-element-b5e45ef:parent, 
    .e-con-inner {
        align-items: center !important;
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Center text and icons within the service cards on mobile */
    .elementor-element-b5e45ef *,
    .elementor-element-2e8f472 *,
    .elementor-element-523f733 *,
    .elementor-element-dbb3778 * {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .elementor-button, .e-button {
        padding: 12px 24px !important;
        font-size: 0.85rem !important;
    }
    .elementor-element-a7ae531, .elementor-element-c4c331c {
        padding: 32px 20px !important;
    }
    
    /* Shrink the site title slightly on mobile if needed to keep on one line */
    .site-title, .site-title a {
        font-size: 1.2rem !important;
    }
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}