/* ==========================================================================
   CUSTOM CSS FOR RIPARAZIONIPC.NET - ELITE LIGHT THEME (WHITE BASE)
   Masterclass Web Design Overhaul - Luminous Cleanliness & Senior UI/UX
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root {
    /* Pristine Luminous Color Variables */
    --primary: #0294C4;
    /* Brand Azzurro */
    --primary-hover: #027da5;
    --primary-light: rgba(2, 148, 196, 0.05);
    --secondary: #4f46e5;
    /* Indigo secondary */
    --accent: #e11d48;
    /* Alert crimson */

    /* Contrast Text Colors */
    --text-main: #555555;
    /* Brand Nero headings */
    --text-secondary: #555555;
    /* Brand Nero body text */
    --text-muted: #777777;
    /* Soft brand gray */

    /* Luminous Surface Colors */
    --bg-base: #f1f5f9;
    /* Elegant slate-100 canvas for premium block depth */
    --bg-card: #ffffff;
    /* Pure white container surfaces */

    /* Elegant Clean Borders */
    --border-light: rgba(15, 23, 42, 0.06);
    --border-accent: rgba(2, 132, 199, 0.15);

    /* Rounding & Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Fine Shadow Elevations */
    --shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.02);
    --shadow-normal: 0 10px 30px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    --shadow-elevated: 0 20px 40px rgba(15, 23, 42, 0.06), 0 0 25px rgba(2, 132, 199, 0.03);
    --shadow-glow: 0 0 20px rgba(2, 132, 199, 0.15);

    --transition-custom: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & SYSTEM WRAPPERS
   ========================================================================== */
body {
    background-color: var(--bg-base) !important;
    background-image: radial-gradient(rgba(2, 132, 199, 0.035) 1px, transparent 1px), 
                      radial-gradient(rgba(79, 70, 229, 0.025) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    background-position: 0 0, 12px 12px !important;
    color: var(--text-secondary) !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 0.985rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-top: 1.1rem;
    margin-bottom: 0.5rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-custom);
}

a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

/* ==========================================================================
   HEADER SECTION & MEGAMENU (Pristine Light Theme Glassmorphism)
   ========================================================================== */
#t4-header {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(2, 132, 199, 0.12) !important;
    box-shadow: var(--shadow-subtle) !important;
    padding: 6px 0 !important;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Desktop-only Sticky Header Overhaul & Slide Down Animation */
@media (min-width: 992px) {
    #t4-header {
        position: relative !important; /* Normal static document flow by default at top */
        padding: 14px 0 !important; /* Luxurious spacing at top */
    }

    #t4-header .logo-text-wrap {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transform-origin: left center !important;
    }
    
    #t4-header .logo-tagline {
        transition: opacity 0.25s ease, max-height 0.25s ease !important;
        max-height: 20px;
        opacity: 1;
    }

    /* Fixed sticky state when scrolled down */
    #t4-header.header-scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        border-bottom: 1px solid rgba(2, 132, 199, 0.15) !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
        padding: 0 !important; /* Extremely thin menu height when scrolled */
        margin: 0 !important;
        opacity: 0; /* Default hidden state to trigger our soft fade-in animation */
        animation: softFadeGlideDown 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; /* Premium snap-in fluid reveal */
    }

    /* Zero out all paddings and margins for inner containers to achieve ultra-thin layout */
    #t4-header.header-scrolled .header-block,
    #t4-header.header-scrolled header,
    #t4-header.header-scrolled .navbar,
    #t4-header.header-scrolled .t4-header-inner,
    #t4-header.header-scrolled .header-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
    }

    #t4-header.header-scrolled .navbar-brand {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Shrink the logo wrapper and hide tagline for compact floating bar */
    #t4-header.header-scrolled .logo-text-wrap {
        transform: scale(0.63) !important; /* Slightly increased for better legibility */
    }
    
    #t4-header.header-scrolled .logo-tagline {
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    #t4-header.header-scrolled .logo-main-text {
        margin-bottom: 0 !important;
    }

    /* Shrink menu links and paddings to compress sticky header height even further */
    #t4-header.header-scrolled .t4-megamenu .navbar-nav>li>a,
    #t4-header.header-scrolled .t4-megamenu .navbar-nav>li>.nav-link {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 0.9rem !important; /* Kept at same size as fixed default menu */
    }

    #t4-header.header-scrolled .logo-cpu-icon {
        top: -4px !important;
    }
}

/* Luminous Elastic Reveal: Micro-glide from small offset (-15px) combined with micro-scale (0.985) and progressive blur */
@keyframes softFadeGlideDown {
    0% {
        opacity: 0;
        transform: translateY(-15px) scale(0.985);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }
}

/* Navbar Logo sizing */
.navbar-brand img {
    max-height: 42px !important;
    /* Compressed logo height for super-thin modern bar */
    width: auto;
    transition: var(--transition-custom);
}

.navbar-brand:hover img {
    transform: scale(1.02);
}

/* MegaMenu Links styling (Spacious and Sleek Level 1) */
.t4-megamenu .navbar-nav>li>a,
.t4-megamenu .navbar-nav>li>.nav-link {
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    /* Sleeker, less bulky size */
    letter-spacing: 0.8px !important;
    padding: 10px 18px !important;
    /* Spacious premium padding */
    border-radius: var(--radius-md) !important;
    /* Elegant rounded capsule hover */
    border: 1px solid transparent !important;
    /* Base border to avoid layout shift on hover */
    transition: var(--transition-custom) !important;
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
}

/* Active Highlight with Bottom Gradient Accent Lines */
.t4-megamenu .navbar-nav>li>a:hover,
.t4-megamenu .navbar-nav>li.active>a,
.t4-megamenu .navbar-nav>li>.nav-link:hover,
.t4-megamenu .navbar-nav>li.active>.nav-link {
    color: var(--primary) !important;
    background: rgba(2, 132, 199, 0.04) !important;
    /* Ultra-premium soft sky glow capsule */
    border-color: rgba(2, 132, 199, 0.08) !important;
    /* Translucent elegant border */
}

/* Bottom animated line strictly on level 1 direct children */
.t4-megamenu .navbar-nav>li>a::after,
.t4-megamenu .navbar-nav>li>.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px !important;
    /* Sit perfectly at the bottom edge */
    left: 18px !important;
    right: 18px !important;
    height: 2.5px !important;
    /* Extremely high-end thinner gradient line */
    background: linear-gradient(90deg, var(--primary), #38bdf8) !important;
    border-radius: 2px !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.t4-megamenu .navbar-nav>li.active>a::after,
.t4-megamenu .navbar-nav>li.active>.nav-link::after,
.t4-megamenu .navbar-nav>li>a:hover::after,
.t4-megamenu .navbar-nav>li>.nav-link:hover::after {
    transform: scaleX(1) !important;
}

/* Prevent main menu items from wrapping on intermediate screen sizes (tablets and small laptops) */
@media (min-width: 992px) and (max-width: 1240px) {
    .t4-megamenu .navbar-nav>li>a,
    .t4-megamenu .navbar-nav>li>.nav-link {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.4px !important;
    }
    .t4-megamenu .navbar-nav>li>a::after,
    .t4-megamenu .navbar-nav>li>.nav-link::after {
        left: 10px !important;
        right: 10px !important;
    }
}

/* Premium Dropdown Card Overhaul */
.t4-megamenu .dropdown-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(25px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(210%) !important;
    border: 1px solid rgba(2, 132, 199, 0.16) !important;
    /* Beautiful glowing blue frame */
    border-top: 4px solid var(--primary) !important;
    /* Premium brand top cap */
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08), 0 0 25px rgba(2, 132, 199, 0.03) !important;
    border-radius: 14px !important;
    /* Perfectly rounded card borders */
    padding: 10px !important;
    /* Spaced neatly inside the card */
    min-width: 280px !important;
    /* Slightly wider for elegant icons and text */
}

/* Individual Dropdown Item cards inside the menu */
.t4-megamenu .dropdown-item {
    color: var(--text-main) !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    padding: 10px 14px 10px 38px !important;
    /* Wide padding for neat vector bullet alignment */
    margin: 4px 0 !important;
    border-radius: var(--radius-sm) !important;
    /* Rounded mini items */
    transition: var(--transition-custom) !important;
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
}

/* Dropdown Hover State */
.t4-megamenu .dropdown-item:hover {
    background: rgba(2, 132, 199, 0.05) !important;
    /* Luminous sky tint */
    color: var(--primary) !important;
    border-left: 3px solid var(--primary) !important;
    /* Sleek left indicator bar */
    padding-left: 42px !important;
    /* High-end micro-shift translation */
}

/* ULTRA-PREMIUM DESKTOP-ONLY FULL-WIDTH MEGAMENU FOR SERVIZI (ID 86) */
@media (min-width: 992px) {

    /* 1. Header wrap is relative to bound the full-width dropdown */
    html body .header-wrap {
        position: relative !important;
    }

    /* 2. Strip position relative from all intermediate containers to breakout of the navbar center */
    html body .t4-navbar,
    html body .t4-navbar .navbar,
    html body .t4-megamenu,
    html body .t4-megamenu .navbar-nav,
    html body .t4-megamenu .navbar-nav>li.dropdown[data-id="86"],
    html body .t4-megamenu .navbar-nav>li.dropdown.item-86 {
        position: static !important;
    }

    /* 3. Style and stretch both mega-dropdown-menu and normal dropdown under Servizi */
    html body .t4-megamenu .navbar-nav>li.dropdown[data-id="86"]>.dropdown-menu,
    html body .t4-megamenu .navbar-nav>li.dropdown.item-86>.dropdown-menu,
    html body .t4-megamenu .mega-dropdown-menu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        top: 100% !important;
        transform: none !important;
        margin: 0 !important;
        margin-top: 8px !important;
        box-sizing: border-box !important;

        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(2, 132, 199, 0.18) !important;
        border-top: 5px solid var(--primary) !important;
        border-radius: 16px !important;
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12), inset 0 2px 0 #ffffff !important;
        backdrop-filter: blur(30px) saturate(220%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(220%) !important;

        padding: 35px 40px !important;
    }

    /* Bridge the 8px hover gap on desktop megamenu/dropdowns to prevent mouseleave disappearance bug */
    html body .t4-megamenu .dropdown-menu::before,
    html body .t4-megamenu .mega-dropdown-menu::before {
        content: '' !important;
        position: absolute !important;
        top: -12px !important;
        left: 0 !important;
        right: 0 !important;
        height: 12px !important;
        background: transparent !important;
        z-index: 1 !important;
    }

    /* 4. Center and constrain the content width */
    html body .t4-megamenu .mega-dropdown-inner,
    html body .t4-megamenu .dropdown-menu-inner {
        max-width: 1240px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* 5. Transform all sub-nav link items into gorgeous Apple-style micro-cards */
    .t4-megamenu .dropdown-menu .dropdown-item,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link {
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.88rem !important;
        /* Premium sleek legible font size */
        font-weight: 600 !important;
        /* Elegant semi-bold instead of chunky bold */
        color: var(--text-main) !important;
        padding: 14px 16px 14px 48px !important;
        /* Wide padding for neat icon offsets */
        margin: 10px 0 !important;
        /* Breathtaking breathing room */
        background: rgba(248, 250, 252, 0.45) !important;
        /* Luminous metallic canvas base */
        border: 1px solid rgba(2, 132, 199, 0.04) !important;
        border-radius: var(--radius-md) !important;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        display: flex !important;
        align-items: center !important;
        min-height: 52px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.015) !important;
        border-left: 3px solid transparent !important;
        text-transform: none !important;
        /* Preserve natural title casing (no raw uppercase) to prevent wrapping */
        white-space: nowrap !important;
        /* Strictly forbid line-wrap for flawless single-line presentation */
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Card Hover Lift & Border Shifts */
    .t4-megamenu .dropdown-menu .dropdown-item:hover,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link:hover {
        background: rgba(2, 132, 199, 0.06) !important;
        border-color: rgba(2, 132, 199, 0.2) !important;
        border-left: 3px solid var(--primary) !important;
        color: var(--primary) !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 24px rgba(2, 132, 199, 0.08) !important;
        padding-left: 50px !important;
    }

    /* Premium Active & Current States inside Megamenu Dropdown */
    .t4-megamenu .dropdown-menu li.active .dropdown-item,
    .t4-megamenu .dropdown-menu li.current .dropdown-item,
    .t4-megamenu .dropdown-menu .dropdown-item.active,
    .t4-megamenu .dropdown-menu .dropdown-item.current,
    .t4-megamenu .mega-dropdown-menu .mega-nav li.active .nav-link,
    .t4-megamenu .mega-dropdown-menu .mega-nav li.current .nav-link,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link.active,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link.current {
        background: rgba(2, 132, 199, 0.09) !important;
        border-left: 3px solid var(--primary) !important;
        color: var(--primary) !important;
        padding-left: 50px !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.05) !important;
    }

    .t4-megamenu .dropdown-menu li.active .dropdown-item::before,
    .t4-megamenu .dropdown-menu li.current .dropdown-item::before,
    .t4-megamenu .dropdown-menu .dropdown-item.active::before,
    .t4-megamenu .dropdown-menu .dropdown-item.current::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav li.active .nav-link::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav li.current .nav-link::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link.active::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link.current::before {
        opacity: 1 !important;
        color: var(--primary) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }

    /* 6. Robust specific Bootstrap Icons linked strictly by menu ID and data-id */
    .t4-megamenu .dropdown-menu li a::before,
    .t4-megamenu .dropdown-menu .dropdown-item::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link::before {
        font-family: 'bootstrap-icons' !important;
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1.15rem !important;
        color: var(--primary) !important;
        opacity: 0.75 !important;
        transition: var(--transition-custom) !important;
        pointer-events: none !important;
    }

    /* Bindings for all child items under Servizi based on data-id and class */
    .t4-megamenu li[data-id="204"] a::before,
    .t4-megamenu li.item-204 a::before {
        content: '\F2C2' !important;
    }

    /* bi-cpu */
    .t4-megamenu li[data-id="211"] a::before,
    .t4-megamenu li.item-211 a::before {
        content: '\F117' !important;
    }

    /* bi-apple */
    .t4-megamenu li[data-id="227"] a::before,
    .t4-megamenu li.item-227 a::before {
        content: '\F4DF' !important;
    }

    /* bi-laptop */
    .t4-megamenu li[data-id="225"] a::before,
    .t4-megamenu li.item-225 a::before {
        content: '\F5CC' !important;
    }

    /* bi-tablet */
    .t4-megamenu li[data-id="700"] a::before,
    .t4-megamenu li.item-700 a::before {
        content: '\F593' !important;
    }

    /* bi-speedometer2 */
    .t4-megamenu li[data-id="220"] a::before,
    .t4-megamenu li.item-220 a::before {
        content: '\F61B' !important;
    }

    /* bi-wifi */
    .t4-megamenu li[data-id="212"] a::before,
    .t4-megamenu li.item-212 a::before {
        content: '\F5DF' !important;
    }

    /* bi-terminal */
    .t4-megamenu li[data-id="209"] a::before,
    .t4-megamenu li.item-209 a::before {
        content: '\F334' !important;
    }

    /* bi-database-fill-gear */
    .t4-megamenu li[data-id="210"] a::before,
    .t4-megamenu li.item-210 a::before {
        content: '\F8B2' !important;
    }

    /* bi-microsoft */
    .t4-megamenu li[data-id="669"] a::before,
    .t4-megamenu li.item-669 a::before {
        content: '\F52E' !important;
    }

    /* bi-shield-fill-check */
    .t4-megamenu li[data-id="670"] a::before,
    .t4-megamenu li.item-670 a::before {
        content: '\F28B' !important;
    }

    /* bi-cloud-arrow-up-fill */
    .t4-megamenu li[data-id="671"] a::before,
    .t4-megamenu li.item-671 a::before {
        content: '\F672' !important;
    }

    /* bi-robot */
    .t4-megamenu li[data-id="672"] a::before,
    .t4-megamenu li.item-672 a::before {
        content: '\F422' !important;
    }

    /* bi-house-gear-fill */
    .t4-megamenu li[data-id="205"] a::before,
    .t4-megamenu li.item-205 a::before {
        content: '\F3E4' !important;
    }

    /* bi-headset */
    .t4-megamenu li[data-id="206"] a::before,
    .t4-megamenu li.item-206 a::before {
        content: '\F3E5' !important;
    }

    /* bi-house-door-fill */
    .t4-megamenu li[data-id="207"] a::before,
    .t4-megamenu li.item-207 a::before {
        content: '\F1B2' !important;
    }

    /* bi-briefcase-fill */

    /* bi-phone (iPhone) */
    .t4-megamenu li[data-id="1062"] a::before,
    .t4-megamenu li.item-1062 a::before {
        content: '\F4E7' !important;
    }

    /* bi-tablet (iPad) */
    .t4-megamenu li[data-id="1063"] a::before,
    .t4-megamenu li.item-1063 a::before {
        content: '\F5CC' !important;
    }

    /* bi-globe (Collegamenti FTTH, FTTC & FWA) */
    .t4-megamenu li[data-id="3582"] a::before,
    .t4-megamenu li.item-3582 a::before {
        content: '\F3E7' !important;
    }

    /* bi-telephone-fill (Centralini VoIP) */
    .t4-megamenu li[data-id="3583"] a::before,
    .t4-megamenu li.item-3583 a::before {
        content: '\F5C0' !important;
    }

    /* bi-shield-lock-fill (Antifurti Elmo) */
    .t4-megamenu li[data-id="3584"] a::before,
    .t4-megamenu li.item-3584 a::before {
        content: '\F550' !important;
    }


    .t4-megamenu .dropdown-menu li:hover a::before,
    .t4-megamenu .dropdown-menu .dropdown-item:hover::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link:hover::before {
        opacity: 1 !important;
        color: var(--primary-hover) !important;
        transform: translateY(-50%) scale(1.15) !important;
    }
}



/* === DROPDOWN LIST ALIGNMENT RESET & ACCENT UNDERLINES DISABLE === */
/* Disable level-1 underlining bleed on any dropdown links or card sub-links */
.t4-megamenu .dropdown-menu .dropdown-item::after,
.t4-megamenu .dropdown-menu .nav-link::after,
.t4-megamenu .mega-dropdown-menu .nav-link::after,
.t4-megamenu .dropdown-menu li a::after {
    display: none !important;
    content: none !important;
}

/* Clean alignment reset: remove default browser list indentations inside dropdowns */
.t4-megamenu .dropdown-menu ul,
.t4-megamenu .dropdown-menu-inner ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Eradicate default bullet elements inside dropdowns */
.t4-megamenu .dropdown-menu li::before {
    display: none !important;
    content: none !important;
}

/* Dropdown bullets and brand icon mappings are wrapped strictly in desktop-only media query to let mobile dropdown items fall back completely to default styles */
@media (min-width: 992px) {

    /* Default Bullet for all standard dropdown items: tiny elegant glowing dot */
    .t4-megamenu .dropdown-menu li a::before,
    .t4-megamenu .dropdown-menu .dropdown-item::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link::before {
        content: '\F288';
        /* bi-circle-fill - fallback default dot (no !important on content) */
        font-family: 'bootstrap-icons' !important;
        position: absolute !important;
        left: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) scale(0.9) !important;
        font-size: 6px !important;
        /* Small clean dot */
        color: var(--primary) !important;
        opacity: 0.60 !important;
        transition: var(--transition-custom) !important;
        pointer-events: none !important;
    }

    /* Hover state: tiny dot morphs dynamically into a gorgeous glowing arrow */
    .t4-megamenu .dropdown-menu li:hover a::before,
    .t4-megamenu .dropdown-menu .dropdown-item:hover::before,
    .t4-megamenu .mega-dropdown-menu .mega-nav .nav-link:hover::before {
        content: '\F135';
        /* bi-arrow-right - morphs into arrow (no !important on content) */
        font-size: 0.95rem !important;
        /* Standard arrow size */
        opacity: 1 !important;
        color: var(--primary) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }

    /* === GENERAL CUSTOM ICON SIZING & TRANSITIONS (Desktop Megamenu & Dropdowns) === */
    .t4-megamenu .dropdown-menu li[data-id] a::before,
    .t4-megamenu .dropdown-menu li[data-id] .nav-link::before,
    .t4-megamenu .dropdown-menu li[class*="item-"] a::before,
    .t4-megamenu .dropdown-menu li[class*="item-"] .nav-link::before,
    .t4-megamenu .mega-dropdown-menu li[data-id] a::before,
    .t4-megamenu .mega-dropdown-menu li[data-id] .nav-link::before,
    .t4-megamenu .mega-dropdown-menu li[class*="item-"] a::before,
    .t4-megamenu .mega-dropdown-menu li[class*="item-"] .nav-link::before {
        font-size: 1.15rem !important;
        transform: translateY(-50%) scale(1) !important;
        left: 16px !important;
        opacity: 0.85 !important;
        color: var(--primary) !important;
    }

    /* Glow, shift & scale on hover for custom icons (No morphing into arrow) */
    .t4-megamenu .dropdown-menu li[data-id]:hover a::before,
    .t4-megamenu .dropdown-menu li[data-id]:hover .nav-link::before,
    .t4-megamenu .dropdown-menu li[class*="item-"]:hover a::before,
    .t4-megamenu .dropdown-menu li[class*="item-"]:hover .nav-link::before,
    .t4-megamenu .mega-dropdown-menu li[data-id]:hover a::before,
    .t4-megamenu .mega-dropdown-menu li[data-id]:hover .nav-link::before,
    .t4-megamenu .mega-dropdown-menu li[class*="item-"]:hover a::before,
    .t4-megamenu .mega-dropdown-menu li[class*="item-"]:hover .nav-link::before {
        transform: translateY(-50%) scale(1.15) !important;
        opacity: 1 !important;
        color: var(--primary-hover) !important;
    }

    /* === UNIFIED PREMIUM NAVIGATION ICON MAPPINGS (Desktop Megamenu & Dropdowns) === */
    li[data-id="204"] a::before,
    li[data-id="204"] .nav-link::before,
    li.item-204 a::before,
    li.item-204 .nav-link::before {
        content: '\F2C2' !important;
    }

    /* bi-cpu */
    li[data-id="211"] a::before,
    li[data-id="211"] .nav-link::before,
    li.item-211 a::before,
    li.item-211 .nav-link::before {
        content: '\F117' !important;
    }

    /* bi-apple */
    li[data-id="227"] a::before,
    li[data-id="227"] .nav-link::before,
    li.item-227 a::before,
    li.item-227 .nav-link::before {
        content: '\F4DF' !important;
    }

    /* bi-laptop */
    li[data-id="225"] a::before,
    li[data-id="225"] .nav-link::before,
    li.item-225 a::before,
    li.item-225 .nav-link::before {
        content: '\F5CC' !important;
    }

    /* bi-tablet */
    li[data-id="700"] a::before,
    li[data-id="700"] .nav-link::before,
    li.item-700 a::before,
    li.item-700 .nav-link::before {
        content: '\F593' !important;
    }

    /* bi-speedometer2 */
    li[data-id="220"] a::before,
    li[data-id="220"] .nav-link::before,
    li.item-220 a::before,
    li.item-220 .nav-link::before {
        content: '\F61B' !important;
    }

    /* bi-wifi */
    li[data-id="212"] a::before,
    li[data-id="212"] .nav-link::before,
    li.item-212 a::before,
    li.item-212 .nav-link::before {
        content: '\F5DF' !important;
    }

    /* bi-terminal */
    li[data-id="209"] a::before,
    li[data-id="209"] .nav-link::before,
    li.item-209 a::before,
    li.item-209 .nav-link::before {
        content: '\F334' !important;
    }

    /* bi-database-fill-gear */
    li[data-id="210"] a::before,
    li[data-id="210"] .nav-link::before,
    li.item-210 a::before,
    li.item-210 .nav-link::before {
        content: '\F8B2' !important;
    }

    /* bi-microsoft */
    li[data-id="669"] a::before,
    li[data-id="669"] .nav-link::before,
    li.item-669 a::before,
    li.item-669 .nav-link::before {
        content: '\F52E' !important;
    }

    /* bi-shield-fill-check */
    li[data-id="670"] a::before,
    li[data-id="670"] .nav-link::before,
    li.item-670 a::before,
    li.item-670 .nav-link::before {
        content: '\F28B' !important;
    }

    /* bi-cloud-arrow-up-fill */
    li[data-id="671"] a::before,
    li[data-id="671"] .nav-link::before,
    li.item-671 a::before,
    li.item-671 .nav-link::before {
        content: '\F672' !important;
    }

    /* bi-robot */
    li[data-id="672"] a::before,
    li[data-id="672"] .nav-link::before,
    li.item-672 a::before,
    li.item-672 .nav-link::before {
        content: '\F422' !important;
    }

    /* bi-house-gear-fill */
    li[data-id="205"] a::before,
    li[data-id="205"] .nav-link::before,
    li.item-205 a::before,
    li.item-205 .nav-link::before {
        content: '\F3E4' !important;
    }

    /* bi-headset */
    li[data-id="206"] a::before,
    li[data-id="206"] .nav-link::before,
    li.item-206 a::before,
    li.item-206 .nav-link::before {
        content: '\F3E5' !important;
    }

    /* bi-house-door-fill */
    li[data-id="207"] a::before,
    li[data-id="207"] .nav-link::before,
    li.item-207 a::before,
    li.item-207 .nav-link::before {
        content: '\F1B2' !important;
    }

    /* bi-briefcase-fill */

    /* bi-phone (iPhone) */
    li[data-id="1062"] a::before,
    li[data-id="1062"] .nav-link::before,
    li.item-1062 a::before,
    li.item-1062 .nav-link::before {
        content: '\F4E7' !important;
    }

    /* bi-tablet (iPad) */
    li[data-id="1063"] a::before,
    li[data-id="1063"] .nav-link::before,
    li.item-1063 a::before,
    li.item-1063 .nav-link::before {
        content: '\F5CC' !important;
    }

    /* bi-globe (Collegamenti FTTH, FTTC & FWA) */
    li[data-id="3582"] a::before,
    li[data-id="3582"] .nav-link::before,
    li.item-3582 a::before,
    li.item-3582 .nav-link::before {
        content: '\F3E7' !important;
    }

    /* bi-telephone-fill (Centralini VoIP) */
    li[data-id="3583"] a::before,
    li[data-id="3583"] .nav-link::before,
    li.item-3583 a::before,
    li.item-3583 .nav-link::before {
        content: '\F5C0' !important;
    }

    /* bi-shield-lock-fill (Antifurti Elmo) */
    li[data-id="3584"] a::before,
    li[data-id="3584"] .nav-link::before,
    li.item-3584 a::before,
    li.item-3584 .nav-link::before {
        content: '\F550' !important;
    }

    li[data-id="231"] a::before,
    li[data-id="231"] .nav-link::before,
    li.item-231 a::before,
    li.item-231 .nav-link::before {
        content: '\F5E3' !important;
    }

    li[data-id="3639"] a::before,
    li[data-id="3639"] .nav-link::before,
    li.item-3639 a::before,
    li.item-3639 .nav-link::before {
        content: '\F2C6' !important; /* bi-code-slash */
    }

    /* bi-tools */
}

/* ==========================================================================
   HOMEPAGE CAROUSEL & TOP SLIDESHOW (Top-A)
   ========================================================================== */
.slideshow-container {
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 25px !important;
    padding-right: 25px !important;
    margin: 0 auto !important;
    max-width: 1320px !important;
}

#mainCarousel {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    min-height: 480px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

#mainCarousel .carousel-inner {
    height: 480px !important;
    min-height: 480px !important;
    overflow: hidden !important;
}

#mainCarousel .carousel-item {
    height: 100% !important;
    min-height: 480px !important;
}

/* Custom Service Slide Card (Stunning 3D Bevel with Gradient & Border - Always Highly Visible) */
.service-slide-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
    /* Visible Apple-style metallic gradient */
    border-radius: var(--radius-lg) !important;
    /* Generous Apple-style corner rounding */
    position: relative;
    overflow: hidden;
    height: 100% !important;
    min-height: 480px !important;
    display: flex;
    align-items: center;
    border: 2px solid rgba(2, 132, 199, 0.18) !important;
    /* Distinct blue-indigo border */
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(2, 132, 199, 0.06), inset 0 2px 0 #ffffff !important;
    /* Distinct 3D default shadow + beveled top highlights */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.service-slide-wrapper:hover {
    border-color: rgba(2, 148, 196, 0.35) !important;
    /* Vibrant brand azzurro border glow */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    /* Luxuriously clean hover gradient background */
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(2, 132, 199, 0.04), inset 0 2px 0 #ffffff !important;
    /* Stable elegant shadow, no vertical shifting */
}

.service-slide-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(2, 132, 199, 0.03) 0%, transparent 50%);
    pointer-events: none;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Enforce active background glow scale wow effect */
.carousel-item.active .service-slide-wrapper::before {
    background: radial-gradient(circle at 75% 25%, rgba(2, 148, 196, 0.08) 0%, transparent 60%) !important;
    transform: scale(1.1);
}

/* Adjust layout height for mobile responsive layout to avoid layout shift ("balzello") */
@media (max-width: 767.98px) {
    #mainCarousel {
        min-height: 480px !important;
    }
    #mainCarousel .carousel-inner {
        height: auto !important;
        min-height: 480px !important;
    }
    #mainCarousel .carousel-item {
        height: auto !important;
        min-height: 480px !important;
    }
    #mainCarousel .service-slide-wrapper {
        height: auto !important;
        min-height: 480px !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ULTRA-SMOOTH, LUXURIOUS SLIDE CONTENT TRANSITIONS (WOW EFFECT V2) */
#mainCarousel .carousel-item .slide-content {
    opacity: 0;
    transform: scale(0.97) translate3d(0, 5px, 0);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

#mainCarousel .carousel-item .slide-icon-wrapper {
    opacity: 0;
    transform: scale(0.85) rotate(-3deg);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Active states */
#mainCarousel .carousel-item.active .slide-content {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    transition-delay: 0.15s;
}

#mainCarousel .carousel-item.active .slide-icon-wrapper {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.3s;
}


/* Badge styling */
.slide-badge .badge {
    background: rgba(2, 132, 199, 0.08) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 132, 199, 0.15) !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
}

/* Text & Title */
.slide-title {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.slide-title span.text-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slide-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 580px;
}

/* Features List */
.slide-features li {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.slide-features li i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* Slide Visuals (Icon Column) */
.slide-icon-wrapper {
    position: relative;
    padding-right: 40px;
}

.icon-glow-bg {
    position: relative;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(79, 70, 229, 0.05) 100%);
    border: 1px solid rgba(2, 132, 199, 0.1);
    border-radius: 50%;
    box-shadow: inset 0 2px 8px rgba(2, 132, 199, 0.05);
    transition: all 0.5s ease;
    width: 170px;
    height: 170px;
}

.icon-glow-bg::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.15) 0%, transparent 70%);
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
    animation: rotate-glow 20s linear infinite;
}

.icon-glow-bg i {
    color: var(--primary);
    font-size: 5rem;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

/* Animation triggers */
.carousel-item-next .animate-float,
.carousel-item-prev .animate-float,
.carousel-item.active .animate-float {
    animation: float-icon 4s ease-in-out infinite;
}

/* Premium dynamic hover transformations on sub-elements inside the slide */
.service-slide-wrapper:hover .icon-glow-bg {
    border-color: rgba(2, 148, 196, 0.35) !important;
    background: linear-gradient(135deg, rgba(2, 148, 196, 0.08) 0%, rgba(56, 189, 248, 0.08) 100%) !important;
    box-shadow: 0 10px 25px rgba(2, 148, 196, 0.12), inset 0 2px 10px rgba(2, 148, 196, 0.06) !important;
    transform: scale(1.08) !important;
}

.service-slide-wrapper:hover .icon-glow-bg i {
    color: var(--primary) !important;
    filter: drop-shadow(0 0 20px rgba(2, 148, 196, 0.45)) !important;
    /* Static glow animation to avoid clashing with the active floating transform animation */
}

/* Also animate discover button inside the slide card on hover */
.service-slide-wrapper:hover .slide-actions .btn {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(2, 148, 196, 0.4) !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-color: transparent !important;
}

.service-slide-wrapper:hover .slide-actions .btn i {
    transform: translateX(4px) !important;
    transition: transform 0.25s ease !important;
}

/* CSS Keyframes */
@keyframes float-icon {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes rotate-glow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Overrides */
@media (max-width: 767.98px) {
    .service-slide-wrapper {
        min-height: auto;
        padding: 30px 20px !important;
        text-align: center;
    }

    .slide-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .slide-title {
        font-size: 1.65rem;
    }

    .slide-description {
        font-size: 0.92rem;
    }

    .slide-features {
        align-items: flex-start;
        text-align: left;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 20px auto;
    }

    .slide-features li {
        font-size: 0.88rem;
    }
}

/* Sleek Controls (Positioned at the Bottom - No Text Overlap) */
#mainCarousel .carousel-control-prev,
#mainCarousel .carousel-control-next {
    position: absolute !important;
    width: 38px !important;
    height: 38px !important;
    top: auto !important;
    bottom: 25px !important;
    /* Positioned at the bottom */
    transform: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-custom) !important;
}

#mainCarousel .carousel-control-prev {
    left: auto !important;
    right: 80px !important;
    /* Compact bottom-right grouping pair */
}

#mainCarousel .carousel-control-next {
    left: auto !important;
    right: 25px !important;
    /* Compact bottom-right grouping pair */
}

#mainCarousel .carousel-control-prev i,
#mainCarousel .carousel-control-next i {
    color: var(--text-main) !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    transition: color 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#mainCarousel .carousel-control-prev:hover,
#mainCarousel .carousel-control-next:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-glow) !important;
}

#mainCarousel .carousel-control-prev:hover i,
#mainCarousel .carousel-control-next:hover i {
    color: #ffffff !important;
}

/* Responsive Overrides: Adjust layout for mobile bottom-corner layouts */
@media (max-width: 767.98px) {

    #mainCarousel .carousel-control-prev,
    #mainCarousel .carousel-control-next {
        bottom: 15px !important;
    }

    #mainCarousel .carousel-control-prev {
        left: 15px !important;
        right: auto !important;
    }

    #mainCarousel .carousel-control-next {
        right: 15px !important;
        left: auto !important;
    }

    #mainCarousel .carousel-control-prev i,
    #mainCarousel .carousel-control-next i {
        font-size: 1.05rem !important;
    }
}

/* Indicator pills - Circular and Pill-like for total graphical coherence with the services module below */
#mainCarousel .carousel-indicators [data-bs-target] {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background-color: rgba(15, 23, 42, 0.15) !important;
    border: none !important;
    margin: 0 4px !important;
    opacity: 1 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#mainCarousel .carousel-indicators .active {
    width: 28px !important;
    height: 9px !important;
    border-radius: 5px !important;
    background-color: var(--primary) !important;
    box-shadow: var(--shadow-glow) !important;
}

/* ==========================================================================
   HERO / INNER TOP CALL TO ACTION SECTION
   ========================================================================== */
.t4-inner-top {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06) 0%, rgba(79, 70, 229, 0.04) 100%) !important;
    border: 1px solid rgba(2, 132, 199, 0.12) !important;
    border-radius: var(--radius-md) !important;
    padding: 24px 30px !important;
    /* Beautifully tight padding */
    margin-bottom: 20px !important;
    /* Reduced vertical white space */
    text-align: center;
    box-shadow: var(--shadow-subtle) !important;
}

.t4-inner-top h2 {
    color: var(--text-main) !important;
    font-size: 1.75rem !important;
    /* Compact high-contrast title */
    font-weight: 800 !important;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.t4-inner-top p {
    color: var(--text-secondary) !important;
    font-size: 0.98rem;
    max-width: 680px;
    margin: 0 auto 18px auto !important;
    line-height: 1.5;
}

.t4-inner-top .button-more,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 24px !important;
    /* Refined compact button size */
    border-radius: 50px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
    transition: var(--transition-custom) !important;
}

.t4-inner-top .button-more:hover,
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.3), var(--shadow-glow) !important;
}

/* ==========================================================================
   SIDEBAR MODULES & ACCENT CARDS
   ========================================================================== */
/* ==========================================================================
   SIDEBAR MODULES & ACCENT CARDS (Frosted Glassmorphism Masterclass)
   ========================================================================= */
.t4-sidebar .module-inner,
.sidebar-r .module-inner {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    /* Subtle premium white-slate gradient */
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    /* Clean, thin 1px border instead of thick 2px */
    border-radius: var(--radius-lg) !important;
    /* Outfit rounded corners */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03), inset 0 1px 0 #ffffff !important;
    /* Clean, soft drop shadow */
    padding: 0 !important;
    /* Zero padding inside container to let list menu hover items stretch edge-to-edge! */
    margin-bottom: 24px !important;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative;
    overflow: hidden;
    /* Perfect clipping of edge-to-edge hovers at corners */
}

/* Highly Interactive 3D Lift & Brand Glow on Hover */
.t4-sidebar .module-inner:hover,
.sidebar-r .module-inner:hover {
    transform: translateY(-5px) !important;
    /* Stronger hover lift */
    border-color: rgba(2, 132, 199, 0.25) !important;
    /* Border color shifts to primary blue */
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(2, 132, 199, 0.03), inset 0 1px 0 #ffffff !important;
    /* Deeper hover shadow */
}

/* Subtle glowing aura inside sidebar */
.t4-sidebar .module-inner::before,
.sidebar-r .module-inner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.02) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

/* Premium Card-Header Module Titles with Restored Left Border & Minimalist Text Style */
.t4-sidebar .module-title,
.sidebar-r .module-title {
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.06) 0%, rgba(2, 132, 199, 0.01) 100%) !important;
    color: var(--text-main) !important;
    padding: 16px 20px !important;
    margin: 0 !important; /* Edge-to-edge card header integration */
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.88rem !important; /* Extremely crisp size matching main logo and page badges */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    position: relative !important;
    display: flex !important; /* Perfect visual alignment for icons and text */
    align-items: center !important;
    z-index: 1 !important;
    border-left: 4px solid var(--primary) !important; /* Premium left visual indicator bar in active brand azure restored exactly as requested */
    border-bottom: none !important; /* Removed the underline completely to keep layout clean and minimal */
    border-top: none !important;
    border-right: none !important;
}

/* Beautiful Pertinent Azure Icons before Module Titles */
.t4-sidebar .module-title::before,
.sidebar-r .module-title::before {
    content: "\f3e5" !important; /* Default brand Gear-fill icon */
    font-family: "bootstrap-icons" !important;
    font-size: 0.95rem !important;
    color: var(--primary) !important; /* Elegant brand azure icon color */
    margin-right: 10px !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: -1px !important;
    transition: transform 0.3s ease !important;
}

/* Custom relevant icons based on Joomla Module IDs */
/* 1. Menu Servizi (Grid / Layout Icon) */
#Mod151 .module-title::before,
[id^="Mod15"] .module-title::before {
    content: "\f3c8" !important; /* grid-3x3-gap-fill */
}

/* 2. Richiedi Preventivo (File / Document Icon) */
#Mod165 .module-title::before,
[id^="Mod16"] .module-title::before {
    content: "\f3b0" !important; /* file-earmark-text-fill */
}

/* 3. Contattaci Subito / Assistenza (Pulsing Chat Icon) */
#Mod178 .module-title::before,
[id^="Mod17"] .module-title::before {
    content: "\f23a" !important; /* chat-text-fill */
}

/* Hover rotation micro-animation on module hover */
.t4-sidebar .module-inner:hover .module-title::before,
.sidebar-r .module-inner:hover .module-title::before {
    transform: rotate(15deg) scale(1.08) !important;
}

/* Reset inner spans if used by the template, keeping text style robust */
.t4-sidebar .module-title span,
.sidebar-r .module-title span {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    display: inline !important;
    box-shadow: none !important;
}

/* Completely erase any double horizontal lines or underlines on the header */
.t4-sidebar .module-title::after,
.sidebar-r .module-title::after,
.t4-sidebar .module-title span::after,
.sidebar-r .module-title span::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Sidebar lists - Edge-to-edge list styling with no double borders */
.t4-sidebar ul,
.sidebar-r ul {
    padding: 0 !important;
    list-style: none;
    margin: 0 !important;
    position: relative;
    z-index: 1;
    border-radius: 0 !important;
    overflow: visible !important;
    border: none !important;
    /* Remove nested border */
    border-top: none !important;
    /* Removed redundant grey horizontal line below title */
    background: transparent !important;
    /* No double background */
    box-shadow: none !important;
}

.t4-sidebar ul li,
.sidebar-r ul li {
    padding: 0;
    margin-bottom: 0 !important;
    /* Remove gaps between items completely! */
    border: none !important;
}

.t4-sidebar ul li a,
.sidebar-r ul li a {
    color: var(--text-main) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    /* Extremely neat and compact typography */
    display: flex;
    align-items: center;
    padding: 10px 12px 10px 36px !important;
    /* Spacing compressed to save horizontal width */
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    /* Neat dividers extending all the way */
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    transition: var(--transition-custom) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
    white-space: normal !important; /* Allow wrapping on narrow screen resolutions */
    word-break: break-word !important;
    line-height: 1.35 !important;
}

.t4-sidebar ul li a span,
.sidebar-r ul li a span {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
}

.t4-sidebar ul li:last-child a,
.sidebar-r ul li:last-child a {
    border-bottom: none !important;
    /* Perfect flush end at the bottom of the card */
}

.t4-sidebar ul li a::before,
.sidebar-r ul li a::before {
    content: '\F282';
    /* Default bullet: chevron-right */
    font-family: 'bootstrap-icons' !important;
    position: absolute;
    left: 14px;
    /* Shifted left to save horizontal space */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--primary) !important;
    transition: var(--transition-custom) !important;
    pointer-events: none;
}

/* Dynamic Bootstrap Icons inside sidebar services list links */
.t4-sidebar ul li.item-221 a::before,
.sidebar-r ul li.item-221 a::before,
.t4-sidebar ul li.item-220 a::before,
.sidebar-r ul li.item-220 a::before {
    content: '\F61B' !important;
}

/* bi-wifi */
.t4-sidebar ul li.item-222 a::before,
.sidebar-r ul li.item-222 a::before,
.t4-sidebar ul li.item-225 a::before,
.sidebar-r ul li.item-225 a::before {
    content: '\F5CC' !important;
}

/* bi-tablet */
.t4-sidebar ul li.item-228 a::before,
.sidebar-r ul li.item-228 a::before,
.t4-sidebar ul li.item-227 a::before,
.sidebar-r ul li.item-227 a::before {
    content: '\F4DF' !important;
}

/* bi-laptop */
.t4-sidebar ul li.item-192 a::before,
.sidebar-r ul li.item-192 a::before,
.t4-sidebar ul li.item-204 a::before,
.sidebar-r ul li.item-204 a::before {
    content: '\F2C2' !important;
}

/* bi-pc-display / card-list */
.t4-sidebar ul li.item-193 a::before,
.sidebar-r ul li.item-193 a::before,
.t4-sidebar ul li.item-205 a::before,
.sidebar-r ul li.item-205 a::before {
    content: '\F4DF' !important;
}

/* bi-cpu */
.t4-sidebar ul li.item-194 a::before,
.sidebar-r ul li.item-194 a::before,
.t4-sidebar ul li.item-206 a::before,
.sidebar-r ul li.item-206 a::before {
    content: '\F423' !important;
}

/* bi-house */
.t4-sidebar ul li.item-196 a::before,
.sidebar-r ul li.item-196 a::before,
.t4-sidebar ul li.item-207 a::before,
.sidebar-r ul li.item-207 a::before {
    content: '\F20F' !important;
}

/* bi-chat-dots */
.t4-sidebar ul li.item-197 a::before,
.sidebar-r ul li.item-197 a::before,
.t4-sidebar ul li.item-209 a::before,
.sidebar-r ul li.item-209 a::before {
    content: '\F334' !important;
}

/* bi-database-fill-gear */
.t4-sidebar ul li.item-198 a::before,
.sidebar-r ul li.item-198 a::before,
.t4-sidebar ul li.item-210 a::before,
.sidebar-r ul li.item-210 a::before {
    content: '\F8B2' !important;
}

/* bi-microsoft */
.t4-sidebar ul li.item-199 a::before,
.sidebar-r ul li.item-199 a::before,
.t4-sidebar ul li.item-211 a::before,
.sidebar-r ul li.item-211 a::before {
    content: '\F117' !important;
}

/* bi-apple */
.t4-sidebar ul li.item-200 a::before,
.sidebar-r ul li.item-200 a::before,
.t4-sidebar ul li.item-212 a::before,
.sidebar-r ul li.item-212 a::before {
    content: '\F5DF' !important;
}

/* bi-terminal */
.t4-sidebar ul li.item-201 a::before,
.sidebar-r ul li.item-201 a::before {
    content: '\F593' !important;
}

/* bi-speedometer2 */
.t4-sidebar ul li.item-669 a::before,
.sidebar-r ul li.item-669 a::before {
    content: '\F52E' !important;
}

/* bi-shield-fill-check */
.t4-sidebar ul li.item-670 a::before,
.sidebar-r ul li.item-670 a::before {
    content: '\F28B' !important;
}

/* bi-cloud-arrow-up-fill */
.t4-sidebar ul li.item-671 a::before,
.sidebar-r ul li.item-671 a::before {
    content: '\F672' !important;
}

/* bi-robot */
.t4-sidebar ul li.item-672 a::before,
.sidebar-r ul li.item-672 a::before {
    content: '\F422' !important;
}

/* bi-house-gear-fill */
.t4-sidebar ul li.item-700 a::before,
.sidebar-r ul li.item-700 a::before {
    content: '\F593' !important;
}

/* bi-speedometer2 */
.t4-sidebar ul li.item-400 a::before,
.sidebar-r ul li.item-400 a::before {
    content: '\F8B2' !important;
}

/* bi-microsoft */
.t4-sidebar ul li.item-401 a::before,
.sidebar-r ul li.item-401 a::before {
    content: '\F117' !important;
}

/* bi-apple */

/* bi-phone */
.t4-sidebar ul li.item-1062 a::before,
.sidebar-r ul li.item-1062 a::before {
    content: '\F4E7' !important;
}

/* bi-tablet */
.t4-sidebar ul li.item-1063 a::before,
.sidebar-r ul li.item-1063 a::before {
    content: '\F5CC' !important;
}

/* bi-globe (Collegamenti FTTH, FTTC & FWA) */
.t4-sidebar ul li.item-3582 a::before,
.sidebar-r ul li.item-3582 a::before {
    content: '\F3E7' !important;
}

/* bi-telephone-fill (Centralini VoIP) */
.t4-sidebar ul li.item-3583 a::before,
.sidebar-r ul li.item-3583 a::before {
    content: '\F5C0' !important;
}

/* bi-shield-lock-fill (Antifurti Elmo) */
.t4-sidebar ul li.item-3584 a::before,
.sidebar-r ul li.item-3584 a::before {
    content: '\F550' !important;
}

/* Perfect Compact Hover States stretching edge-to-edge */
.t4-sidebar ul li a:hover,
.sidebar-r ul li a:hover {
    color: var(--primary) !important;
    background: rgba(2, 132, 199, 0.06) !important;
    /* Edge-to-edge tinted highlight */
    border-left: 3px solid var(--primary) !important;
    padding-left: 46px !important;
    /* Dynamic micro-shift */
}

.t4-sidebar ul li a:hover::before,
.sidebar-r ul li a:hover::before {
    transform: translateY(-50%) scale(1.1) !important;
    color: var(--primary-hover) !important;
}

/* Perfect Compact Active States (Active, Current, Default active links) stretching edge-to-edge */
.t4-sidebar ul li.active a,
.sidebar-r ul li.active a,
.t4-sidebar ul li.current a,
.sidebar-r ul li.current a,
.t4-sidebar ul li.active.current a,
.sidebar-r ul li.active.current a {
    color: var(--primary) !important;
    background: rgba(2, 132, 199, 0.09) !important;
    /* Premium active block tint */
    border-left: 3px solid var(--primary) !important;
    padding-left: 46px !important;
}

.t4-sidebar ul li.active a::before,
.sidebar-r ul li.active a::before,
.t4-sidebar ul li.current a::before,
.sidebar-r ul li.current a::before,
.t4-sidebar ul li.active.current a::before,
.sidebar-r ul li.active.current a::before {
    transform: translateY(-50%) scale(1.1) !important;
    color: var(--primary) !important;
}

/* Preventivo Quote module sidebar */
#Mod165 .button-more {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 15px;
    background: linear-gradient(135deg, var(--secondary) 0%, #312e81 100%) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15) !important;
}

#Mod165 .button-more:hover {
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.25) !important;
}

/* ==========================================================================
   BLOG CATEGORY LAYOUTS & LEADING ARTICLES
   ========================================================================== */
.blog-featured {
    padding-bottom: 40px;
}

.blog-featured .page-header {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 20px;
    margin-bottom: 35px;
}

.blog-featured .page-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
}

/* Blog grids card slots */
.blog-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-subtle);
    transition: var(--transition-custom);
}

.blog-item:hover {
    transform: translateY(-3px);
    border-color: rgba(2, 132, 199, 0.2);
    box-shadow: var(--shadow-normal);
}

.blog-item .item-title {
    font-size: 1.55rem;
    margin-bottom: 12px;
}

.blog-item .item-title a {
    color: var(--text-main);
}

.blog-item .item-title a:hover {
    color: var(--primary);
}

/* Meta info lists */
.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.article-info dd {
    margin: 0;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.readmore .btn {
    background: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    padding: 8px 24px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    transition: var(--transition-custom) !important;
}

.readmore .btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-glow) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   SINGLE ARTICLE VIEW DESIGN (Luminous White Card Layout)
   ========================================================================== */
.item-page {
    background: var(--bg-card);
    border: 1px solid rgba(2, 132, 199, 0.12) !important;
    /* Glowing frosted outline */
    border-radius: var(--radius-md) !important;
    padding: 24px 28px !important;
    /* Tight page margins */
    box-shadow: var(--shadow-normal);
    margin-bottom: 20px !important;
    /* Compressed whitespace below article */
}

.item-page h1,
.item-page .page-header h1 {
    font-size: 1.95rem;
    /* Tighter title sizing */
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.25;
    margin-bottom: 14px;
}

.article-body {
    font-size: 0.98rem;
    /* Highly legible and modern tight sizing */
    line-height: 1.62;
    color: #334155;
}

.article-body p {
    margin-bottom: 1.1rem;
    /* Compressed spacing between body text lines */
    color: #334155;
}

/* Checkmarks bullet overrides */
.article-body ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.1rem;
}

.article-body ul li {
    position: relative;
    padding-left: 24px;
    /* Tighter padding for list bullets */
    margin-bottom: 8px;
    /* Tighter vertical space */
    color: #334155;
}

.article-body ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    /* Slightly smaller list checkmarks */
    height: 16px;
    background: rgba(2, 132, 199, 0.08);
    color: var(--primary);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(2, 132, 199, 0.2);
}

/* High quality images */
.article-body img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    border: 1px solid rgba(15, 23, 42, 0.05);
    max-width: 100%;
    height: auto;
    margin: 25px 0;
    transition: var(--transition-custom);
}

.article-body img:hover {
    transform: scale(1.01) translateY(-2px);
    box-shadow: var(--shadow-normal);
}

/* Tables */
.article-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(2, 132, 199, 0.15);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 18px 0;
    /* Compressed table margins */
    box-shadow: var(--shadow-subtle);
}

.article-body th {
    background-color: #f1f5f9;
    color: var(--text-main);
    padding: 10px 14px;
    /* Tighter padding for table headers */
    font-weight: 700;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.article-body td {
    padding: 8px 14px;
    /* Tighter padding for table cells */
    color: #475569;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.article-body tr:last-child td {
    border-bottom: none;
}

.article-body tr:nth-child(even) {
    background-color: #f8fafc;
}

/* ==========================================================================
   BREADCRUMBS & PAGINATION
   ========================================================================== */
#t4-breadcrumbs {
    background: transparent;
    padding: 6px 0 !important;
    /* Compressed vertical padding */
    margin-bottom: 12px !important;
}

.mod-breadcrumbs {
    background: #ffffff;
    padding: 6px 18px !important;
    /* Tight clean pills */
    border-radius: 50px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--shadow-subtle);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mod-breadcrumbs a {
    color: var(--text-muted);
}

.mod-breadcrumbs a:hover {
    color: var(--primary);
}

/* Pagination links */
.pagination {
    display: flex;
    gap: 6px;
    margin: 40px 0;
}

.pagination .page-item .page-link {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-muted);
    padding: 10px 18px;
    border-radius: 8px;
    transition: var(--transition-custom);
}

.pagination .page-item .page-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
#t4-footer {
    background-color: #0f172a !important;
    border-top: 4px solid var(--primary) !important;
    padding: 70px 0 45px !important;
    color: #94a3b8;
    font-size: 0.92rem;
}

#t4-footer h3 {
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

#t4-footer .module-ct ul {
    padding-left: 0;
    list-style: none;
}

#t4-footer .module-ct ul li {
    padding: 6px 0;
}

#t4-footer .module-ct ul li a {
    color: #94a3b8;
}

#t4-footer .module-ct ul li a:hover {
    color: var(--primary);
    padding-left: 4px;
}

/* Back to Top */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 46px;
    height: 46px;
    background: var(--primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 999;
    opacity: 0.8;
    transition: var(--transition-custom);
}

#back-to-top:hover {
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3), var(--shadow-glow);
}

/* ==========================================================================
   INPUTS & FORM CONTROLS
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 18px !important;
    outline: none !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: var(--transition-custom) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-glow), inset 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

/* ==========================================================================
   XMAP SITEMAP PAGE OVERRIDES (Luminous White Card Layout)
   ========================================================================== */
.xmap-container {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    padding: 40px !important;
    margin: 30px 0 !important;
    box-shadow: var(--shadow-subtle) !important;
    color: var(--text-main) !important;
}

.xmap-title {
    background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.xmap-subtitle {
    color: var(--text-muted) !important;
}

.xmap-search {
    background: #ffffff !important;
    border: 2px solid rgba(15, 23, 42, 0.08) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-subtle) !important;
}

.xmap-search:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
}

.xmap-letters {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
}

.xmap-letter-btn {
    color: var(--text-muted) !important;
}

.xmap-letter-btn:hover,
.xmap-letter-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-glow) !important;
}

.xmap-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: var(--shadow-subtle) !important;
}

.xmap-card:hover {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), var(--shadow-glow) !important;
}

.xmap-card-title {
    color: var(--text-main) !important;
}

/* ==========================================================================
   DYNAMIC MUNICIPALITY LANDING PAGES (Senior UI/UX Overhaul)
   ========================================================================== */
.comune-hero-card {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.05) 0%, rgba(79, 70, 229, 0.03) 100%) !important;
    border: 1px solid rgba(2, 132, 199, 0.12) !important;
    border-radius: 20px !important;
    padding: 35px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02) !important;
    position: relative;
    overflow: hidden;
}

.comune-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
}

.comune-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2);
}

.comune-hero-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
}

.comune-hero-text {
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
}

.comune-hero-text strong {
    color: #0f172a !important;
    background: rgba(2, 132, 199, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

.comune-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 25px;
}

.comune-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.comune-highlight-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.comune-highlight-content {
    display: flex;
    flex-direction: column;
}

.comune-highlight-content strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.comune-highlight-content span {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

/* ==========================================================================
   APPLE FROSTED GLASS (fglass) DESIGN SYSTEM OVERHAUL
   ========================================================================== */

/* Luminous Gradient Blobs fixed in the background of the browser viewport */
body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.1) 0%, rgba(2, 132, 199, 0) 70%);
    z-index: -2;
    pointer-events: none;
    filter: blur(90px);
}

body::after {
    content: '';
    position: fixed;
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, rgba(79, 70, 229, 0) 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(100px);
}

/* Apple Frosted Glass Utility Panel */
.apple-fglass {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.025), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--radius-md) !important;
}

/* Apply fglass to active theme components */
#t4-header {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(35px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(35px) saturate(200%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01) !important;
}

#mainCarousel {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.03) !important;
}

.t4-sidebar .module-inner,
.xmap-container,
.comune-hero-card,
.item-page {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(30px) saturate(195%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(195%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.03), inset 0 1px 0 0 rgba(255, 255, 255, 0.65) !important;
    border-radius: var(--radius-md) !important;
}

/* Modernized Featured Services Grid cards (TOP Module ID 207) */
.service-box {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.service-box:hover {
    transform: translateY(-5px) scale(1.01) !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06), 0 0 25px rgba(2, 132, 199, 0.12) !important;
}

.service-box .img-container {
    overflow: hidden;
    position: relative;
}

.service-box .img-container img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-box:hover .img-container img {
    transform: scale(1.05);
}

/* Premium Apple Badges */
.badge-custom {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 14px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    z-index: 10;
}

.badge-hot {
    background: rgba(225, 29, 72, 0.12) !important;
    color: #e11d48 !important;
    border: 1px solid rgba(225, 29, 72, 0.25) !important;
}

.badge-new {
    background: rgba(2, 148, 196, 0.12) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 148, 196, 0.25) !important;
}

.badge-top {
    background: rgba(2, 148, 196, 0.12) !important;
    color: #0294C4 !important;
    border: 1px solid rgba(2, 148, 196, 0.25) !important;
}

/* Horizontal tab replica container styling (ID 209) */
.service-tabs-replica {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.03), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    overflow: hidden;
}

#replicaTab {
    background: rgba(15, 23, 42, 0.02);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

#replicaTab .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.95rem;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding: 16px 28px !important;
}

#replicaTab .nav-link:hover {
    color: var(--primary) !important;
    background: rgba(2, 132, 199, 0.04) !important;
}

#replicaTab .nav-link.active {
    color: var(--primary) !important;
    background: #ffffff !important;
    border-bottom: 3px solid var(--primary) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}

/* Apple-style sitemap search cards */
.xmap-card {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.015), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
}

.xmap-card:hover {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.05), 0 0 20px rgba(2, 132, 199, 0.08) !important;
}

/* ==========================================================================
   ELITE GRAPHICAL OVERHAULS & VISUAL CONSISTENCY
   ========================================================================== */

/* Megamenu Top-Level Links Icons & Desktop Logo Size / Alignment */
.t4-megamenu .navbar-nav>li[data-id="53"]>a::before,
.t4-megamenu .navbar-nav>li.default>a::before {
    content: '\F425';
    /* bi-house-door-fill */
    font-family: 'bootstrap-icons' !important;
    margin-right: 6px;
    font-size: 0.95rem;
    vertical-align: -1px;
    display: inline-block;
}

.t4-megamenu .navbar-nav>li[data-id="86"]>.nav-link::before {
    content: '\F3BD';
    /* bi-grid-fill */
    font-family: 'bootstrap-icons' !important;
    margin-right: 6px;
    font-size: 0.95rem;
    vertical-align: -1px;
    display: inline-block;
}

.t4-megamenu .navbar-nav>li[data-id="214"]>a::before {
    content: '\F3E8';
    /* bi-geo-alt-fill */
    font-family: 'bootstrap-icons' !important;
    margin-right: 6px;
    font-size: 0.95rem;
    vertical-align: -1px;
    display: inline-block;
}

.t4-megamenu .navbar-nav>li[data-id="399"]>a::before {
    content: '\F411';
    /* bi-headset */
    font-family: 'bootstrap-icons' !important;
    margin-right: 6px;
    font-size: 0.95rem;
    vertical-align: -1px;
    display: inline-block;
}

.t4-megamenu .navbar-nav>li[data-id="202"]>a::before {
    content: '\F32F';
    /* bi-envelope-fill */
    font-family: 'bootstrap-icons' !important;
    margin-right: 6px;
    font-size: 0.95rem;
    vertical-align: -1px;
    display: inline-block;
}

@media (min-width: 992px) {
    .navbar-brand img {
        max-height: 80px !important;
        /* Enlarge logo to make it more readable and prominent */
    }

    /* Align the navigation main menu to the right on desktop */
    .t4-navbar.mx-auto {
        margin-left: auto !important;
        /* Push it all the way to the right side */
        margin-right: 0 !important;
    }
}

/* Sidebar lists - Sleek light container chevron animations */
.t4-sidebar ul li a::after {
    content: '\F285' !important;
    /* bi-chevron-right */
    font-family: 'bootstrap-icons' !important;
    position: absolute;
    right: 18px;
    font-size: 0.8rem;
    opacity: 0.3;
    transition: var(--transition-custom);
}

.t4-sidebar ul li a:hover::after {
    opacity: 1;
    transform: translateX(4px);
    color: var(--primary);
}

/* Perfect alignment for Bootstrap Icons in lists */
.custom-styled-list li i {
    font-size: 1.15rem;
    line-height: 1.2;
}

/* Slideshow navigation indicators and circular glass controls vector overrides */
#mainCarousel .carousel-control-prev-icon,
#mainCarousel .carousel-control-next-icon {
    display: none !important;
    /* Fully hide old pseudo-elements as we now use direct HTML Bootstrap Icons */
}

/* Horizontal inline sitemap badges in footer */
#t4-footer .navbar {
    padding: 0 !important;
    justify-content: center !important;
}

#t4-footer ul.nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#t4-footer ul.nav li {
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

#t4-footer ul.nav li::after {
    content: '•';
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: #475569;
    font-size: 0.8rem;
    pointer-events: none;
}

#t4-footer ul.nav li:last-child::after {
    content: '' !important;
}

#t4-footer ul.nav li a {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-sm);
    transition: var(--transition-custom) !important;
}

#t4-footer ul.nav li a:hover {
    color: var(--primary) !important;
    background: rgba(2, 132, 199, 0.1) !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.05);
}

/* Benefit Cards in homepage article */
.benefit-card {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-subtle) !important;
    transition: var(--transition-custom) !important;
}

.benefit-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
    box-shadow: var(--shadow-normal) !important;
}

.benefit-card .benefit-icon i {
    background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.15));
}

/* ==========================================================================
   ULTRA-MODERN SIDEBAR CARDS & PULSING CONTACT BANNERS
   ========================================================================== */

/* Sidebar module-inner styling is now unified in the primary masterclass section at line 715 */

/* Sleek, High-Contrast Sidebar Menu items Overrides & Global Section Compressions */
.t4-section,
section,
.t4-main-body {
    padding-top: 15px !important;
    /* Overwhelmingly compress native section padding */
    padding-bottom: 15px !important;
}

.row,
.col,
[class*="col-"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.container,
.t4-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Premium Pulsing Call-to-Action buttons */
.sidebar-quote-card,
.sidebar-contact-card {
    position: relative;
    z-index: 2;
    padding: 16px 18px !important;
    /* Restore perfect interior padding to non-menu modules */
}

.sidebar-quote-card .btn,
.sidebar-contact-card .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25) !important;
    border: none !important;
    transition: var(--transition-custom) !important;
    animation: pulse-cta 3s infinite;
}

.sidebar-quote-card .btn:hover,
.sidebar-contact-card .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.4), var(--shadow-glow) !important;
}

@keyframes pulse-cta {
    0% {
        box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25);
    }

    50% {
        box-shadow: 0 4px 25px rgba(2, 132, 199, 0.45);
        transform: scale(1.01);
    }

    100% {
        box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25);
    }
}

/* ==========================================================================
   COMPACT CTA WIDGETS OVERRIDES (Reduced Spacing)
   ========================================================================== */
.sidebar-quote-card p,
.sidebar-contact-card p {
    font-size: 0.88rem !important;
    margin-bottom: 10px !important;
    line-height: 1.55 !important;
}

.sidebar-quote-card ul,
.sidebar-contact-card ul {
    margin-bottom: 14px !important;
    padding-left: 0 !important;
}

.sidebar-quote-card ul li,
.sidebar-contact-card ul li {
    margin-bottom: 5px !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}

.sidebar-quote-card .btn,
.sidebar-contact-card .btn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.86rem !important;
    border-radius: 30px !important;
}

/* Hide desktop off-canvas hamburger toggle */
@media (min-width: 992px) {
    .t4-offcanvas-toggle {
        display: none !important;
    }
}

/* Constrain header wrapper to align with main page container width */
#t4-header .container-fluid,
#t4-header .container,
.t4-header-inner {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ==========================================================================
   HYPER-MODERN MOBILE APP-DRAWER OVERHAUL (T4 Off-Canvas)
   ========================================================================== */

/* Full Screen Light Glassmorphic Drawer */
.t4-offcanvas {
    background: rgba(248, 250, 252, 0.96) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border-right: 1px solid rgba(2, 132, 199, 0.1) !important;
    box-shadow: 10px 0 40px rgba(15, 23, 42, 0.04) !important;
    width: 320px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Drawer Header */
.t4-offcanvas-header,
.t4-off-canvas-header {
    padding: 24px 20px 16px 20px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
}

.t4-offcanvas-header .offcanvas-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.5px;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Sleek Close Button */
.t4-offcanvas-header .close,
.t4-offcanvas-header .btn-close,
.t4-off-canvas-header .close,
.t4-off-canvas-header .btn-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.05) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-main) !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

.t4-offcanvas-header .close:hover,
.t4-offcanvas-header .btn-close:hover,
.t4-off-canvas-header .close:hover,
.t4-off-canvas-header .btn-close:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

/* Drawer Body menu list */
.t4-offcanvas-body,
.t4-off-canvas-body {
    padding: 20px 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Hide native caret blocks */
.t4-offcanvas-body .item-caret,
.t4-off-canvas-body .item-caret {
    display: none !important;
}

/* Smartphone Dashboard Card */
.mobile-app-header-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03) !important;
    margin-bottom: 24px !important;
}

.app-logo-glow {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(2, 148, 196, 0.2);
}

.app-card-title {
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.btn-app-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.01) !important;
    transition: all 0.2s ease !important;
}

/* Premium customized colors for mobile call-to-action buttons */
/* 1. Chiama Ora (Azzurro / Light Blue) */
.btn-app-action[href*="tel:"] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid rgba(2, 132, 199, 0.2) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2) !important;
}

.btn-app-action[href*="tel:"] i {
    color: #ffffff !important;
}

.btn-app-action[href*="tel:"]:hover,
.btn-app-action[href*="tel:"]:active {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    border-color: rgba(2, 132, 199, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3) !important;
}

/* 2. WhatsApp (Verde / Emerald Green) */
.btn-app-action[href*="wa.me"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.btn-app-action[href*="wa.me"] i {
    color: #ffffff !important;
}

.btn-app-action[href*="wa.me"]:hover,
.btn-app-action[href*="wa.me"]:active {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
}

/* Tactile Navigation Accordion List */
.t4-offcanvas-body ul.navbar-nav,
.t4-off-canvas-body ul.navbar-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.t4-offcanvas-body ul.navbar-nav > li,
.t4-off-canvas-body ul.navbar-nav > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* Style main parent link capsules */
.t4-offcanvas-body ul.navbar-nav > li > a,
.t4-offcanvas-body ul.navbar-nav > li > .nav-link,
.t4-off-canvas-body ul.navbar-nav > li > a,
.t4-off-canvas-body ul.navbar-nav > li > .nav-link {
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px 12px 48px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 12px !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.01) !important;
}

/* Hover / Active / Open capsules */
.t4-offcanvas-body ul.navbar-nav > li > a:hover,
.t4-offcanvas-body ul.navbar-nav > li > .nav-link:hover,
.t4-offcanvas-body ul.navbar-nav > li.active > a,
.t4-offcanvas-body ul.navbar-nav > li.active > .nav-link,
.t4-offcanvas-body ul.navbar-nav > li.show-submenu > a,
.t4-off-canvas-body ul.navbar-nav > li > a:hover,
.t4-offcanvas-body ul.navbar-nav > li.active > a,
.t4-offcanvas-body ul.navbar-nav > li.show-submenu > a {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    padding-left: 52px !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08) !important;
}

/* Unified smartphone icon guides */
.t4-offcanvas-body ul.navbar-nav > li > a::before,
.t4-offcanvas-body ul.navbar-nav > li > .nav-link::before,
.t4-off-canvas-body ul.navbar-nav > li > a::before,
.t4-off-canvas-body ul.navbar-nav > li > .nav-link::before {
    font-family: 'bootstrap-icons' !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1rem !important;
    color: var(--primary) !important;
    transition: all 0.25s ease !important;
}

.t4-offcanvas-body ul.navbar-nav > li:hover > a::before,
.t4-offcanvas-body ul.navbar-nav > li.active > a::before,
.t4-offcanvas-body ul.navbar-nav > li.show-submenu > a::before,
.t4-offcanvas-body ul.navbar-nav > li:hover > a::before,
.t4-offcanvas-body ul.navbar-nav > li.active > a::before,
.t4-offcanvas-body ul.navbar-nav > li.show-submenu > a::before {
    color: var(--primary) !important;
}

/* Guide assignments */
.t4-offcanvas-body ul.navbar-nav > li[data-id="53"] > a::before,
.t4-off-canvas-body ul.navbar-nav > li[data-id="53"] > a::before,
.t4-offcanvas-body ul.navbar-nav > li.default > a::before { content: '\F425' !important; }
.t4-offcanvas-body ul.navbar-nav > li[data-id="86"] > a::before,
.t4-offcanvas-body ul.navbar-nav > li[data-id="86"] > .nav-link::before,
.t4-off-canvas-body ul.navbar-nav > li[data-id="86"] > a::before,
.t4-off-canvas-body ul.navbar-nav > li[data-id="86"] > .nav-link::before { content: '\F3BD' !important; }
.t4-offcanvas-body ul.navbar-nav > li[data-id="399"] > a::before,
.t4-offcanvas-body ul.navbar-nav > li[data-id="399"] > a::before { content: '\F411' !important; }
.t4-offcanvas-body ul.navbar-nav > li[data-id="202"] > a::before,
.t4-offcanvas-body ul.navbar-nav > li[data-id="202"] > a::before { content: '\F32F' !important; }
.t4-offcanvas-body ul.navbar-nav > li[data-id="214"] > a::before,
.t4-offcanvas-body ul.navbar-nav > li[data-id="214"] > a::before { content: '\F3E8' !important; }

/* Custom Accordion Chevron indicator */
.t4-offcanvas-body ul.navbar-nav > li.dropdown > a::after,
.t4-offcanvas-body ul.navbar-nav > li.dropdown > .nav-link::after,
.t4-off-canvas-body ul.navbar-nav > li.dropdown > a::after,
.t4-off-canvas-body ul.navbar-nav > li.dropdown > .nav-link::after {
    content: '\F282' !important; /* bi-chevron-down */
    font-family: 'bootstrap-icons' !important;
    border: none !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    color: rgba(15, 23, 42, 0.4) !important;
    transition: all 0.25s ease !important;
}

.t4-offcanvas-body ul.navbar-nav > li.dropdown:hover > a::after,
.t4-offcanvas-body ul.navbar-nav > li.dropdown.show-submenu > a::after,
.t4-off-canvas-body ul.navbar-nav > li.dropdown:hover > a::after,
.t4-off-canvas-body ul.navbar-nav > li.dropdown.show-submenu > a::after {
    color: var(--primary) !important;
}

.t4-offcanvas-body ul.navbar-nav > li.dropdown.show-submenu > a::after,
.t4-offcanvas-body ul.navbar-nav > li.dropdown.show-submenu > .nav-link::after,
.t4-offcanvas-body ul.navbar-nav > li.dropdown.show-submenu > a::after,
.t4-offcanvas-body ul.navbar-nav > li.dropdown.show-submenu > .nav-link::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Dropdown Sub-menu container in drawer */
.t4-offcanvas-body .dropdown-menu,
.t4-off-canvas-body .dropdown-menu,
.t4-offcanvas-body .mega-dropdown-menu,
.t4-off-canvas-body .mega-dropdown-menu {
    display: none;
    position: static !important;
    float: none !important;
    width: 100% !important;
    background: rgba(15, 23, 42, 0.02) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
    transform: none !important;
}

/* Support columns stacking for cloned Megamenu in mobile drawer */
.t4-offcanvas-body .mega-dropdown-menu .row,
.t4-off-canvas-body .mega-dropdown-menu .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
}

.t4-offcanvas-body .mega-dropdown-menu [class*="col-"],
.t4-off-canvas-body .mega-dropdown-menu [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* Megamenu headers inside Mobile Drawer */
.t4-offcanvas-body .mega-col-title,
.t4-off-canvas-body .mega-col-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--primary) !important;
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Dropdown Sub-menu items in drawer */
.t4-offcanvas-body .dropdown-menu .dropdown-item,
.t4-offcanvas-body .dropdown-menu .nav-link,
.t4-offcanvas-body .mega-dropdown-menu .nav-link,
.t4-off-canvas-body .dropdown-menu .dropdown-item,
.t4-offcanvas-body .dropdown-menu .nav-link,
.t4-off-canvas-body .mega-dropdown-menu .nav-link {
    color: var(--text-main) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    padding: 8px 12px 8px 24px !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    border-radius: 8px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.01) !important;
    margin-bottom: 4px !important;
}

.t4-offcanvas-body .dropdown-menu .dropdown-item::before,
.t4-offcanvas-body .dropdown-menu .nav-link::before,
.t4-offcanvas-body .mega-dropdown-menu .nav-link::before,
.t4-offcanvas-body .dropdown-menu .dropdown-item::before,
.t4-offcanvas-body .dropdown-menu .nav-link::before,
.t4-offcanvas-body .mega-dropdown-menu .nav-link::before {
    content: '\F285' !important; /* bi-chevron-right */
    font-family: 'bootstrap-icons' !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.t4-offcanvas-body .dropdown-menu .dropdown-item:hover,
.t4-offcanvas-body .dropdown-menu .dropdown-item.active,
.t4-offcanvas-body .mega-dropdown-menu .nav-link:hover,
.t4-offcanvas-body .mega-dropdown-menu .nav-link.active {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: rgba(2, 132, 199, 0.15) !important;
    padding-left: 30px !important;
}

.t4-offcanvas-body .dropdown-menu .dropdown-item:hover::before,
.t4-offcanvas-body .dropdown-menu .dropdown-item:hover::before {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.15) !important;
}

/* Smartphone Footer Actions inside offcanvas drawer */
.mobile-app-footer-actions {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.03) !important;
}

.btn-app-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25) !important;
    transition: all 0.25s ease !important;
}

.btn-app-primary:hover,
.btn-app-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.35) !important;
    color: #ffffff !important;
}

/* Multi-column Megamenu Category Headers styling */
.t4-megamenu .mega-col-title,
.t4-megamenu .dropdown-header {
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-main) !important;
    /* Premium dark neutral header */
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    /* Slightly larger and more legible */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 2px solid rgba(2, 132, 199, 0.08) !important;
    display: block !important;
    position: relative !important;
}

/* Beautiful accent dot under column titles */
.t4-megamenu .mega-col-title::after,
.t4-megamenu .dropdown-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 45px !important;
    height: 2px !important;
    background: var(--primary) !important;
}

/* Premium matching icons for multi-column megamenu headers */
.t4-megamenu .mega-dropdown-menu .mega-col-title span {
    position: relative !important;
    padding-left: 28px !important;
    display: inline-block !important;
}

.t4-megamenu .mega-dropdown-menu .mega-col-title span::before {
    font-family: 'bootstrap-icons' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.2rem !important;
    color: var(--primary) !important;
    font-weight: normal !important;
}

.t4-megamenu .mega-dropdown-menu .mega-sub-1 .mega-col-title span::before {
    content: '\F5E3' !important;
}

/* Hardware & Potenziamento - bi-tools */
.t4-megamenu .mega-dropdown-menu .mega-sub-2 .mega-col-title span::before {
    content: '\F337' !important;
}

/* Sistemi, Reti & Dati - bi-database-fill */
.t4-megamenu .mega-dropdown-menu .mega-sub-3 .mega-col-title span::before {
    content: '\F3E4' !important;
}

/* Soluzioni & Supporto - bi-headset */



/* Strict Back to Top Floating Button Fix (Always Bottom-Right) */
#back-to-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    /* Force to bottom-right of viewport and prevent left-side overlap */
    width: 48px !important;
    height: 48px !important;
    background: var(--primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.4), var(--shadow-glow) !important;
    z-index: 9999 !important;
    
    /* Default hidden state for smooth fade-in/fade-out scroll sensing */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background-color 0.3s ease !important;
}

#back-to-top.visible {
    opacity: 0.95 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

#back-to-top.visible:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px rgba(2, 148, 196, 0.4), var(--shadow-glow) !important;
    opacity: 1 !important;
}

/* Global Joomla Article Metadata Hiding (Author, Hits, Category, Creation Date) */
.article-info,
.article-info-term,
.article-meta,
.published,
.createdby,
.category-name,
.parent-category-name,
.hits,
dl.article-info,
dd.createdby,
dd.category-name,
dd.published,
dd.hits {
    display: none !important;
}

/* ==========================================================================
   MASTER CLASS APPLE-STYLE VISUAL OVERHAUL - 3D BORDERS, GLOWS & GRADIENTS
   ========================================================================== */

/* Luminous Canvas Gradient - Consolidated with Subtle Grid Dots and Non-Repeating Light Infinite Background */
body,
#t4-body {
    background-color: #e2e8f0 !important; /* Infinite clean light slate at the bottom (crisp footer contrast cut) */
    background-image: 
        radial-gradient(rgba(2, 132, 199, 0.035) 1px, transparent 1px), 
        radial-gradient(rgba(79, 70, 229, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, 
            #f8fafc 0%, 
            #f1f5f9 600px,
            #e2e8f0 1800px
        ) !important;
    background-size: 24px 24px, 24px 24px, auto auto !important;
    background-repeat: repeat, repeat, no-repeat !important;
    background-position: 0 0, 12px 12px, 0 0 !important;
}

/* Remove flat background wrappers to let the canvas gradient shine */
.t4-main-body,
.t4-section,
#t4-main-body {
    background: transparent !important;
}

/* Remove borders, backgrounds, and shadows from outer layout containers globally */
#t4-content,
.t4-content,
article.item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3D Apple-Style Page Content Container (Articles on Internal Pages Only) */
body:not(.item-53) .item-page {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
    /* Premium light gradient background */
    border-radius: var(--radius-lg) !important;
    border: 2px solid rgba(2, 148, 196, 0.18) !important;
    /* Elegant 3D border using Brand Azzurro RGB */
    box-shadow: 0 16px 36px rgba(85, 85, 85, 0.08), 0 5px 15px rgba(2, 148, 196, 0.04), inset 0 2px 0 #ffffff !important;
    /* Visible 3D shadow and bevel highlight */
    padding: 40px !important;
    margin-bottom: 30px !important;
    transition: all 0.4s ease !important;
}

/* Prevent nested containers and py-5 double padding in SEO subservices */
body:not(.item-53) .item-page .seo-subpage-wrap.container {
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

body:not(.item-53) .item-page .seo-subpage-wrap .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body:not(.item-53) .item-page .seo-subpage-wrap .col-lg-10 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Responsive padding for mobile viewports */
@media (max-width: 767px) {
    body:not(.item-53) .item-page {
        padding: 24px 18px !important;
        border-radius: var(--radius-md) !important;
    }
}

/* Prevent double-border visual clutter on form pages by letting the forms act as the single visible card */
body.item-231 .item-page,
body.item-202 .item-page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Global 3D Apple-Style Module & Card Overhaul (Only visible service cards and widget cards) */
.service-box,
.t4-card {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
    /* Visible Apple-style metallic gradient */
    border: 2px solid rgba(2, 132, 199, 0.18) !important;
    /* Distinct blue-indigo border */
    border-radius: var(--radius-lg) !important;
    /* Rounded corners */
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(2, 132, 199, 0.05), inset 0 2px 0 #ffffff !important;
    /* High default 3D shadow + bevel highlight */
    padding: 26px !important;
    margin-bottom: 26px !important;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    overflow: hidden;
    position: relative;
}

/* Sidebar Module wrappers behave strictly as transparent layout blocks, letting inner cards act as the single visible card */
.sidebar-l .t4-module,
.sidebar-r .t4-module,
.t4-sidebar .t4-module {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    transition: none !important;
    position: relative !important;
    overflow: visible !important;
}

/* Highly Interactive 3D Lift & Brand Glow on Hover */
.service-box:hover,
.t4-card:hover {
    transform: translateY(-5px) !important;
    /* Stronger hover lift */
    border-color: rgba(79, 70, 229, 0.35) !important;
    /* Border color shifts to indigo */
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(2, 132, 199, 0.1), inset 0 2px 0 #ffffff !important;
    /* Deeper hover shadow */
}

/* Add slight blur-filter for extra premium frosted-glass overlay in template sections */
.t4-section-inner {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   PREMIUM 3D APPLE-STYLE QUOTE REQUEST FORM CARD
   ========================================================================== */
.quote-form-card {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
    border: 2px solid rgba(2, 132, 199, 0.18) !important;
    border-radius: var(--radius-lg) !important;
    /* Elegant Outfit rounded corners */
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1), 0 5px 15px rgba(2, 132, 199, 0.05), inset 0 2px 0 #ffffff !important;
    position: relative;
    overflow: hidden;
}

.quote-form-card .form-title {
    color: var(--text-main) !important;
    font-size: 2.1rem !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 8px !important;
}

.quote-form-card .section-divider {
    font-family: 'Outfit', sans-serif !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: 2px solid rgba(2, 132, 199, 0.12) !important;
    padding-bottom: 8px !important;
    margin-top: 30px !important;
}

.quote-form-card .form-label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: var(--text-main) !important;
    margin-bottom: 8px !important;
}

.quote-form-card .input-group {
    box-shadow: var(--shadow-subtle) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid rgba(2, 132, 199, 0.12) !important;
    transition: var(--transition-custom) !important;
}

.quote-form-card .input-group:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1) !important;
}

.quote-form-card .input-group-text {
    background: rgba(248, 250, 252, 0.8) !important;
    border: none !important;
    color: var(--primary) !important;
    font-size: 1.1rem !important;
    min-width: 46px !important;
    justify-content: center !important;
    border-right: 1px solid rgba(2, 132, 199, 0.08) !important;
}

.quote-form-card .form-control,
.quote-form-card .form-select {
    border: none !important;
    font-size: 0.92rem !important;
    color: var(--text-main) !important;
    padding: 12px 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    background: #ffffff !important;
}

.quote-form-card .form-control:focus,
.quote-form-card .form-select:focus {
    box-shadow: none !important;
}

.quote-form-card .form-check-input {
    border-color: rgba(2, 132, 199, 0.3) !important;
    transition: var(--transition-custom) !important;
}

.quote-form-card .form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Apple-style Submit Button */
.quote-form-card #submitBtn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.35), var(--shadow-glow) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.quote-form-card #submitBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(2, 132, 199, 0.45), var(--shadow-glow) !important;
}

.quote-form-card #submitBtn:active {
    transform: translateY(0) !important;
}

/* ==========================================================================
/* === ELIMINATE DOUBLE/TRIPLE FORM BORDERS & FIELDSETS (ONLY ONE BORDER ALLOWED) === */
.contact-form fieldset,
.contact-form .dynamic-fields,
fieldset.dynamic-fields,
fieldset {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
}

/* On simple contatti.html page: outer .apple-fglass card is the single border, inner form is transparent */
.contatti-page-container .contact-form {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.contatti-page-container .contact-form::before,
.contatti-page-container .contact-form::after::before::after {
    display: none !important;
    content: none !important;
}

/* On technical assistenza page: outer apple-fglass card is the SINGLE border, inner form is transparent */
body.item-231 .contact-form,
.richiesta-assistenza-page .contact-form {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

body.item-231 .contact-form::before,
body.item-231 .contact-form::after::before::after,
.richiesta-assistenza-page .contact-form::before,
.richiesta-assistenza-page .contact-form::after {
    display: none !important;
    content: none !important;
}

body.item-231 fieldset,
body.item-231 fieldset.dynamic-fields {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
}

/* Clean up Quote modules fieldset borders */
.quote-form-card fieldset,
#Mod212 fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === SIDEBAR MENU SERVIZI (ID 151) LEFT-ICONS LAYOUT & MAPPINGS === */
/* Relocate text to make space for left-prefix icons */
#Mod151 ul.nav li a {
    padding-left: 38px !important;
    position: relative !important;
}

/* Base styles for sidebar service link prefix icons */
#Mod151 ul.nav li a::before {
    font-family: 'bootstrap-icons' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.05rem !important;
    color: var(--primary) !important;
    opacity: 0.8 !important;
    transition: var(--transition-custom) !important;
    pointer-events: none !important;
}

#Mod151 ul.nav li a:hover::before {
    opacity: 1 !important;
    color: var(--primary-hover) !important;
}

/* Mapping specific Bootstrap Icons to sidebar Menu Servizi item IDs */
#Mod151 li.item-192 a::before {
    content: '\F2C2' !important;
}

/* Assistenza PC - bi-cpu */
#Mod151 li.item-199 a::before {
    content: '\F117' !important;
}

/* Riparazione Mac - bi-apple */
#Mod151 li.item-228 a::before {
    content: '\F4DF' !important;
}

/* Riparazione Portatili - bi-laptop */
#Mod151 li.item-194 a::before {
    content: '\F3E5' !important;
}

/* Assistenza a Domicilio - bi-house-door-fill */
#Mod151 li.item-201 a::before {
    content: '\F593' !important;
}

/* Upgrade & Potenziamento - bi-speedometer2 */
#Mod151 li.item-221 a::before {
    content: '\F61B' !important;
}

/* Reti Lan / Wifi - bi-wifi */
#Mod151 li.item-200 a::before {
    content: '\F5DF' !important;
}

/* Ripristino PC Linux/Server - bi-terminal */
#Mod151 li.item-197 a::before {
    content: '\F334' !important;
}

/* Recupero Dati - bi-database-fill-gear */
#Mod151 li.item-198 a::before {
    content: '\F8B2' !important;
}

/* Riparazione PC Windows - bi-microsoft */
#Mod151 li.item-193 a::before,
#Mod151 li.item-222 a::before {
    content: '\F3E4' !important;
}

/* Assistenza Remota - bi-headset */
#Mod151 li.item-196 a::before {
    content: '\F1B2' !important;
}

/* Risorse Open Source - bi-code-slash */
#Mod151 li.item-3639 a::before {
    content: '\F2C6' !important;
}

/* Consulenza Informatica - bi-briefcase-fill */

/* Premium Footer & Copyright Styling */
.custom-premium-footer {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(241, 245, 249, 0.55) 100%) !important;
    border: 1px solid rgba(2, 132, 199, 0.15) !important;
    border-radius: var(--radius-lg) !important;
    padding: 30px 24px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05), inset 0 2px 0 #ffffff !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    margin-top: 30px !important;
}

#t4-footer {
    background: transparent !important;
    padding: 40px 0 20px 0 !important;
    border-top: none !important;
}

.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.15), transparent);
    width: 100%;
}

.footer-links-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
}

.footer-link-item {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.footer-link-item i {
    font-size: 1.05rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.footer-link-item:hover {
    color: var(--primary) !important;
    text-shadow: 0 0 10px rgba(2, 132, 199, 0.15);
}

.footer-link-item:hover i {
    transform: scale(1.2) rotate(5deg);
}

.footer-brand h5 {
    color: var(--text-main) !important;
    font-size: 1.15rem;
}

.footer-meta-info span {
    font-size: 0.82rem;
}

/* Premium Served Municipalities Portal Search Overhaul */
.search-bar-container {
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 50px !important;
    padding: 6px !important;
    border: 1px solid rgba(2, 132, 199, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
}

.search-bar-container:hover {
    border-color: rgba(2, 132, 199, 0.3) !important;
    box-shadow: 0 12px 36px rgba(2, 132, 199, 0.08) !important;
}

.search-bar-container input {
    background: #ffffff !important;
    border: none !important;
    padding: 14px 100px 14px 50px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    border-radius: 50px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.search-bar-container input:focus {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    outline: none !important;
}

.search-bar-container:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 5px rgba(2, 132, 199, 0.15), 0 12px 36px rgba(2, 132, 199, 0.12) !important;
}

.search-bar-container .search-icon {
    font-size: 1.15rem !important;
    color: var(--primary) !important;
    left: 22px !important;
    transition: transform 0.3s ease !important;
}

.search-bar-container:focus-within .search-icon {
    transform: scale(1.15) !important;
}

.search-bar-container .clear-btn {
    right: 85px !important;
    color: var(--text-muted) !important;
    transition: all 0.2s ease !important;
}

.search-bar-container .clear-btn:hover {
    color: var(--danger) !important;
    transform: scale(1.1) !important;
}

.search-bar-container .search-badge {
    right: 8px !important;
    padding: 10px 24px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: var(--shadow-glow) !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
}

.search-bar-container:hover .search-badge {
    transform: translateY(-50%) scale(1.02) !important;
}

/* Premium Slide-To-Verify Anti-Spam Widget */
.verify-slider-container {
    position: relative !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-family: 'Outfit', sans-serif !important;
    user-select: none !important;
    margin: 20px auto !important;
    max-width: 320px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.verify-slider-bg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, rgba(2, 132, 199, 0.25) 100%) !important;
    transition: width 0.1s ease !important;
}

.verify-slider-text {
    position: relative !important;
    z-index: 2 !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.verify-slider-handle {
    position: absolute !important;
    left: 2px !important;
    width: 48px !important;
    height: 46px !important;
    background: #ffffff !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    cursor: grab !important;
    z-index: 3 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
    transition: left 0.1s ease, background 0.3s ease, color 0.3s ease !important;
}

.verify-slider-handle:active {
    cursor: grabbing !important;
}

.verify-slider-handle i {
    font-size: 1.2rem !important;
    transition: transform 0.3s ease !important;
}

/* Unlocked Verified State */
.verify-slider-container.unlocked {
    background: #dcfce7 !important;
    border-color: #86efac !important;
}

.verify-slider-container.unlocked .verify-slider-bg {
    width: 100% !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.25) 100%) !important;
}

.verify-slider-container.unlocked .verify-slider-text {
    color: #15803d !important;
}

.verify-slider-container.unlocked .verify-slider-handle {
    background: #22c55e !important;
    color: #ffffff !important;
    cursor: default !important;
    box-shadow: var(--shadow-glow) !important;
}

/* ==========================================================================
   PREMIUM ELITE SUPPORT BANNER & WHATSAPP BUTTON OVERHAUL (Release 19)
   ========================================================================== */
.support-banner {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(30px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(220%) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(2, 148, 196, 0.16) !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.06), 
                0 0 50px rgba(2, 148, 196, 0.03), 
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 1 !important;
}

.support-banner::before {
    content: '' !important;
    position: absolute !important;
    top: -80px !important;
    right: -80px !important;
    width: 260px !important;
    height: 260px !important;
    background: radial-gradient(circle, rgba(2, 148, 196, 0.09) 0%, transparent 70%) !important;
    pointer-events: none !important;
    transition: all 0.5s ease !important;
    z-index: 0 !important;
}

.support-banner::after {
    content: '' !important;
    position: absolute !important;
    bottom: -90px !important;
    left: -70px !important;
    width: 220px !important;
    height: 220px !important;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.06) 0%, transparent 70%) !important;
    pointer-events: none !important;
    transition: all 0.5s ease !important;
    z-index: 0 !important;
}

.support-banner:hover {
    transform: translateY(-5px) scale(1.002) !important;
    border-color: rgba(2, 148, 196, 0.28) !important;
    box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.1), 
                0 0 60px rgba(2, 148, 196, 0.05), 
                inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.support-banner:hover::before {
    transform: translate(-15px, 15px) scale(1.1) !important;
    background: radial-gradient(circle, rgba(2, 148, 196, 0.15) 0%, transparent 70%) !important;
}

.support-banner:hover::after {
    transform: translate(15px, -15px) scale(1.1) !important;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%) !important;
}

.support-banner h1, .support-banner h2, .support-banner h3 {
    color: var(--text-main) !important;
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.25 !important;
    font-family: 'Outfit', sans-serif !important;
    position: relative !important;
    z-index: 1 !important;
}

.support-banner p {
    color: var(--text-secondary) !important;
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    position: relative !important;
    z-index: 1 !important;
}

.support-banner .badge {
    background: rgba(2, 148, 196, 0.06) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 148, 196, 0.18) !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.support-banner .badge i {
    color: var(--primary) !important;
}

.support-banner .badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    box-shadow: 0 0 8px #22c55e !important;
}

.support-banner .btn-outline-secondary, .support-banner .btn-outline-primary {
    background: rgba(15, 23, 42, 0.03) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: var(--text-main) !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    font-weight: 700 !important;
}

.support-banner .btn-outline-secondary:hover, .support-banner .btn-outline-primary:hover {
    background: rgba(15, 23, 42, 0.07) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.05) !important;
    color: var(--text-main) !important;
}

.support-banner .btn-outline-secondary i, .support-banner .btn-outline-primary i {
    color: var(--primary) !important;
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.support-banner .btn-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
    animation: whatsapp-pulse 2s infinite !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

.support-banner .btn-whatsapp:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45) !important;
    background: linear-gradient(135deg, #20ba5a 0%, #0e7064 100%) !important;
    color: #ffffff !important;
}

.support-banner .btn-primary {
    background: linear-gradient(135deg, #0294C4 0%, #38bdf8 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(2, 148, 196, 0.25) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

.support-banner .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(2, 148, 196, 0.4) !important;
    color: #ffffff !important;
}

.support-trust-grid {
    position: relative !important;
    z-index: 1 !important;
}

.trust-badge {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(2, 148, 196, 0.12) !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(5px) !important;
}

.trust-badge:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(2, 148, 196, 0.22) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
    background: #ffffff !important;
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    border: 1px solid #128c7e !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2) !important;
    font-size: 0.92rem !important;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-whatsapp:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35), 0 0 15px rgba(37, 211, 102, 0.15) !important;
    background: linear-gradient(135deg, #20ba5a 0%, #0e7064 100%) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   SERVICES GRID CARDS (Release 26) - Absolute Symmetrical Layout
   ========================================================================== */
.services-overview-wrapper .row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.services-overview-wrapper .row > div,
.services-overview-wrapper .row > [class^="col"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.service-grid-card {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(30px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
    border: 1px solid rgba(2, 132, 199, 0.14) !important; /* Slightly more defined border to break flatness */
    border-radius: 24px !important;
    padding: 40px !important;
    margin: 0 !important; /* Zero margin for complete column alignment */
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex;
    flex-direction: column;
    height: 100% !important; /* Take full height of column container */
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.04), 0 4px 20px rgba(2, 132, 199, 0.02) !important; /* Elegant depth shadow by default */
}

.service-grid-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), #38bdf8) !important;
    opacity: 0.65 !important; /* Luminous gradient line partially visible by default to eliminate flatness */
    transition: opacity 0.35s ease !important;
}

.service-grid-card::after {
    content: '';
    position: absolute;
    bottom: -60px; right: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(2, 148, 196, 0.07) 0%, transparent 70%); /* Distinct soft radial glow in the corner by default */
    border-radius: 50%;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 0;
}

.service-grid-card:hover::before {
    opacity: 1 !important;
}

.service-grid-card:hover::after {
    transform: scale(1.35) translate(-10px, -10px);
    background: radial-gradient(circle, rgba(2, 148, 196, 0.16) 0%, transparent 70%); /* Stronger radial glow on hover */
}

.service-grid-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.08), 0 0 35px rgba(2, 132, 199, 0.06) !important; /* Ultimate depth glow on hover */
}

.service-grid-icon-wrapper {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(2, 148, 196, 0.06) 0%, rgba(56, 189, 248, 0.02) 100%) !important;
    border: 1px solid rgba(2, 148, 196, 0.1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--primary) !important;
    font-size: 1.6rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    z-index: 1;
}

.service-grid-card:hover .service-grid-icon-wrapper {
    background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(2, 148, 196, 0.22) !important;
    border-color: transparent !important;
    transform: scale(1.08) rotate(5deg);
}

.service-grid-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.4px !important;
    position: relative;
    z-index: 1;
}

.service-grid-text {
    font-size: 0.92rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

.service-grid-link {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}

.service-grid-link i {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.service-grid-card:hover .service-grid-link {
    color: var(--primary-hover) !important;
}

.service-grid-card:hover .service-grid-link i {
    transform: translateX(5px);
}

/* === ULTRA-PREMIUM CONVERT FORMS BOOTSTRAP 5 STYLE OVERRIDES === */

.quote-form-page-wrapper,
.contact-form-page-wrapper {
    max-width: 820px !important;
    margin: 40px auto !important;
    padding: 0 15px !important;
}

/* Force all Convert Forms to occupy 100% full width of their parent container */
.convertforms,
.convertforms form,
.convertforms .cf-form-wrap {
    max-width: 100% !important;
    width: 100% !important;
}

/* Flat, transparent, borderless form integration on contatti and richiesta assistenza pages to avoid nested double cards */
body.item-202 .convertforms,
body.item-231 .convertforms {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Outer Glassmorphic Card Wrapper */
.convertforms {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(2, 148, 196, 0.15) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(2, 148, 196, 0.03) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    font-family: 'Outfit', sans-serif !important;
}

.convertforms:hover {
    border-color: rgba(2, 148, 196, 0.3) !important;
    box-shadow: 0 20px 40px rgba(2, 148, 196, 0.08) !important;
}

/* Force Flex Column Layout Grid */
.convertforms .cf-fields {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 0 !important;
}

/* Grid Alignment & Gap Control */
.convertforms .cf-control-group {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    display: block !important;
}

@media (min-width: 768px) {
    .convertforms .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

.convertforms .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Labels outfit style overrides */
.convertforms .cf-label {
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--text-main) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.2px !important;
    text-transform: uppercase !important;
}

/* Input Fields pill overrides */
.convertforms .cf-control-input input[type="text"],
.convertforms .cf-control-input input[type="email"],
.convertforms .cf-control-input input[type="tel"],
.convertforms .cf-control-input input[type="password"],
.convertforms .cf-control-input select {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(2, 148, 196, 0.25) !important;
    border-radius: 50rem !important; /* pill shape */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

/* Textarea rounded overrides */
.convertforms .cf-control-input textarea {
    display: block !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(2, 148, 196, 0.25) !important;
    border-radius: 16px !important; /* soft rounded */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
    height: 130px !important;
    resize: vertical !important;
}

/* Focus states */
.convertforms .cf-control-input input[type="text"]:focus,
.convertforms .cf-control-input input[type="email"]:focus,
.convertforms .cf-control-input input[type="tel"]:focus,
.convertforms .cf-control-input input[type="password"]:focus,
.convertforms .cf-control-input textarea:focus,
.convertforms .cf-control-input select:focus {
    color: #495057 !important;
    background-color: #ffffff !important;
    border-color: var(--primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(2, 148, 196, 0.15) !important;
}

/* Buttons styling overrides */
.convertforms .cf-control-input button[type="submit"],
.convertforms .cf-control-input input[type="submit"] {
    display: inline-block !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    user-select: none !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border: none !important;
    padding: 14px 44px !important;
    font-size: 0.88rem !important;
    border-radius: 50rem !important;
    box-shadow: 0 4px 15px rgba(2, 148, 196, 0.22) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.convertforms .cf-control-input button[type="submit"]:hover,
.convertforms .cf-control-input input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 148, 196, 0.35) !important;
}

.convertforms .cf-control-input button[type="submit"]:active,
.convertforms .cf-control-input input[type="submit"]:active {
    transform: translateY(0) !important;
}

/* Remove default wrapper conflicts */
.convertforms .cf-fields-wrap,
.convertforms .cf-form-wrap {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Form Response messages styling */
.convertforms .cf-response {
    margin-bottom: 20px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.convertforms .cf-response .alert {
    padding: 16px 20px !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

/* === OVERRIDES FOR CHECKBOX/RADIO CHOICES TO PREVENT BOLD UPPERCASE STYLES === */
.convertforms .cf-checkbox-group,
.convertforms .cf-radio-group {
    display: flex !important;
    align-items: start !important;
    gap: 12px !important;
    margin-top: 8px !important;
    width: 100% !important;
}

.convertforms .cf-checkbox-group input[type="checkbox"],
.convertforms .cf-radio-group input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 3px 0 0 0 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    border-radius: 4px !important;
    border: 1px solid rgba(2, 148, 196, 0.3) !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.convertforms .cf-checkbox-group label.cf-label,
.convertforms .cf-radio-group label.cf-label {
    display: inline-block !important;
    text-transform: none !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.86rem !important;
    color: #4b5563 !important;
    margin-bottom: 0 !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    line-height: 1.45 !important;
}

.convertforms .cf-control-group[data-type="checkbox"] legend.cf-label,
.convertforms .cf-control-group[data-type="radio"] legend.cf-label {
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    color: var(--primary) !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 0 !important;
}

.convertforms .cf-list {
    display: block !important;
    margin-top: 6px !important;
}

/* Perfect alignment for general Convert Forms labels */
.convertforms .cf-control-label {
    margin-bottom: 6px !important;
}

.convertforms .cf-label {
    font-size: 0.78rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* =====================================================
   SEZIONE SERVIZI — card grid (mod_custom #209)
   ===================================================== */
.servizi-wrap { font-family: 'Outfit', sans-serif; }

/* Header sezione */
.servizi-section-header { margin-bottom: 2rem; }
.servizi-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f9ff;
    border: 1px solid rgba(2,148,196,0.2);
    color: #0294C4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 10px;
}
.servizi-section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.servizi-section-sub {
    color: #64748b;
    font-size: 0.95rem;
    max-width: 560px;
}

/* Card servizio */
.srv-card {
    background: #ffffff;
    border: 1.5px solid #e8edf5;
    border-radius: 18px;
    padding: 24px 20px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.srv-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    transition: opacity .28s;
    pointer-events: none;
    box-shadow: 0 12px 36px rgba(2,148,196,0.16);
}
.srv-card:hover {
    transform: translateY(-5px);
    border-color: rgba(2,148,196,0.25);
}
.srv-card:hover::after { opacity: 1; }

/* Accent strip */
.srv-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
}

/* Icon */
.srv-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 14px;
    flex-shrink: 0;
}

/* Title */
.srv-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 7px;
    line-height: 1.3;
}

/* Desc */
.srv-desc {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.55;
    flex: 1;
    margin-bottom: 14px;
}

/* Bullets */
.srv-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.srv-bullets li {
    font-size: 0.79rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    line-height: 1.4;
}
.srv-bullets li i {
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* CTA buttons */
.srv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.srv-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 16px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all .2s;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.srv-btn-main {
    background: linear-gradient(135deg, #0294C4, #0369a1);
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2,148,196,0.22);
}
.srv-btn-main:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2,148,196,0.36);
    color: #fff !important;
}
.srv-btn-wa {
    background: #f0fdf4;
    color: #16a34a !important;
    border: 1.5px solid #bbf7d0;
}
.srv-btn-wa:hover {
    background: #dcfce7;
    color: #15803d !important;
}

/* Badge NEW */
.srv-badge {
    position: absolute;
    top: 12px; right: 12px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 50px;
    color: #fff;
    line-height: 1;
}

/* Bottom CTA strip */
.servizi-cta-strip {
    background: linear-gradient(135deg, #0f172a 0%, #0e2a45 55%, #0294C4 100%);
    border-radius: 18px;
    padding: 32px 36px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.servizi-cta-strip-title {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.servizi-cta-strip-sub {
    color: rgba(255,255,255,0.55);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.servizi-cta-strip-accent { color: #38bdf8; }
.strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 22px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all .2s;
    white-space: nowrap;
}
.strip-btn-blue {
    background: linear-gradient(135deg,#0294C4,#0369a1);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(2,148,196,0.35);
}
.strip-btn-blue:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(2,148,196,0.45); color:#fff !important; }
.strip-btn-green {
    background: #25D366;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37,211,102,0.3);
}
.strip-btn-green:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,211,102,0.42); color:#fff !important; }
.strip-btn-ghost {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.2);
}
.strip-btn-ghost:hover { background:rgba(255,255,255,0.18); color:#fff !important; }

@media (max-width: 767px) {
    .servizi-cta-strip { padding: 22px 18px; flex-direction: column; align-items: flex-start; }
    .srv-card { padding: 20px 16px 16px; }
}
/* ===== END SEZIONE SERVIZI ===== */

/* =====================================================
   SEZIONE SERVIZI — CARD GRID REDESIGN (mod_custom #209)
   ===================================================== */
.servizi-wrap { 
    font-family: 'Outfit', sans-serif; 
    padding-top: 25px;
    padding-bottom: 25px;
}

/* Header Sezione */
.servizi-section-header { 
    margin-bottom: 2.5rem; 
}
.servizi-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 148, 196, 0.05);
    border: 1px solid rgba(2, 148, 196, 0.15);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(2, 148, 196, 0.02);
}
.servizi-section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.8px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.servizi-section-sub {
    color: var(--text-muted);
    font-size: 0.98rem;
    max-width: 600px;
    line-height: 1.6;
}

/* Glassmorphic Card */
.srv-card {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important; /* 24px Apple roundness */
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 32px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srv-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06), 0 0 25px rgba(2, 132, 199, 0.1) !important;
}

/* Hover Accent Line */
.srv-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.srv-card:hover .srv-card-accent {
    opacity: 1;
}

/* Premium Icon Container */
.srv-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 22px;
    flex-shrink: 0;
    border: 1.5px solid rgba(2, 148, 196, 0.1);
    background: linear-gradient(135deg, rgba(2, 148, 196, 0.04) 0%, rgba(2, 148, 196, 0.09) 100%);
    color: var(--primary);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.srv-card:hover .srv-icon-wrap {
    transform: scale(1.08) rotate(6deg);
    border-color: transparent;
    color: #ffffff;
}

/* Specific Service Icon Gradients on Hover */
.srv-card:hover .srv-icon-windows { background: linear-gradient(135deg, #0294C4, #38bdf8) !important; }
.srv-card:hover .srv-icon-mac { background: linear-gradient(135deg, #1d1d1f, #6b7280) !important; }
.srv-card:hover .srv-icon-laptop { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; }
.srv-card:hover .srv-icon-wifi { background: linear-gradient(135deg, #0891b2, #22d3ee) !important; }
.srv-card:hover .srv-icon-server { background: linear-gradient(135deg, #374151, #9ca3af) !important; }
.srv-card:hover .srv-icon-cloud { background: linear-gradient(135deg, #0294C4, #38bdf8) !important; }
.srv-card:hover .srv-icon-linux { background: linear-gradient(135deg, #d97706, #fbbf24) !important; }
.srv-card:hover .srv-icon-recupero { background: linear-gradient(135deg, #dc2626, #f87171) !important; }
.srv-card:hover .srv-icon-phone { background: linear-gradient(135deg, #059669, #34d399) !important; }

/* Service Card Title */
.srv-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Service Card Description */
.srv-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 24px;
}

/* Interactive Brand Button */
.srv-btn-discover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: rgba(2, 148, 196, 0.04) !important;
    border: 1px solid rgba(2, 148, 196, 0.12) !important;
    color: var(--primary) !important;
    padding: 11px 20px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-top: auto;
    text-decoration: none !important;
}

.srv-card:hover .srv-btn-discover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.22) !important;
    transform: translateY(-2px);
}

.srv-btn-discover i {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}
.srv-card:hover .srv-btn-discover i {
    transform: translateX(3px);
}

/* Premium Badges */
.srv-badge {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    line-height: 1;
    background: rgba(2, 148, 196, 0.08);
    color: var(--primary);
    border: 1px solid rgba(2, 148, 196, 0.15);
}

.srv-badge-new {
    background: rgba(225, 29, 72, 0.08);
    color: var(--accent);
    border-color: rgba(225, 29, 72, 0.15);
}

/* Frosted Bottom CTA Strip */
.servizi-cta-strip {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 35px 40px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    transition: var(--transition-custom);
}

.servizi-cta-strip:hover {
    border-color: rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.04) !important;
}

.servizi-cta-strip-title {
    color: var(--text-main);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}
.servizi-cta-strip-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.servizi-cta-strip-accent { 
    color: var(--primary); 
    font-weight: 800;
}

.strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.strip-btn-blue {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(2, 148, 196, 0.18);
}
.strip-btn-blue:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(2, 148, 196, 0.3); 
    color: #fff !important; 
}

.strip-btn-green {
    background: #25D366;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
}
.strip-btn-green:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28); 
    color: #fff !important; 
}

.strip-btn-ghost {
    background: rgba(2, 148, 196, 0.04) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 148, 196, 0.15) !important;
}
.strip-btn-ghost:hover { 
    background: rgba(2, 148, 196, 0.08) !important; 
    border-color: rgba(2, 148, 196, 0.25) !important;
    transform: translateY(-2px); 
}

@media (max-width: 767px) {
    .servizi-cta-strip { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .srv-card { padding: 28px 20px; }
}
/* ===== END SEZIONE SERVIZI ===== */

/* =====================================================
   SEZIONE SERVIZI — CARD GRID REDESIGN (mod_custom #209)
   ===================================================== */
.servizi-wrap { 
    font-family: 'Outfit', sans-serif; 
    padding-top: 25px;
    padding-bottom: 25px;
}
.servizi-wrap .row {
    row-gap: 36px !important; /* Spazio aggiuntivo tra le righe di card su desktop e mobile */
}

/* Header Sezione */
.servizi-section-header { 
    margin-bottom: 2.5rem; 
}
.servizi-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 148, 196, 0.05);
    border: 1px solid rgba(2, 148, 196, 0.15);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(2, 148, 196, 0.02);
}
.servizi-section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.8px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.servizi-section-sub {
    color: var(--text-muted);
    font-size: 0.98rem;
    max-width: 600px;
    line-height: 1.6;
}

/* Glassmorphic Card */
.srv-card {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important; /* 24px Apple roundness */
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 32px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srv-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06), 0 0 25px rgba(2, 132, 199, 0.1) !important;
}

/* Hover Accent Line */
.srv-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.srv-card:hover .srv-card-accent {
    opacity: 1;
}

/* Premium Icon Container */
.srv-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 22px;
    flex-shrink: 0;
    border: 1.5px solid rgba(2, 148, 196, 0.1);
    background: linear-gradient(135deg, rgba(2, 148, 196, 0.04) 0%, rgba(2, 148, 196, 0.09) 100%);
    color: var(--primary);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.srv-card:hover .srv-icon-wrap {
    transform: scale(1.08) rotate(6deg);
    border-color: transparent;
    color: #ffffff;
}

/* Specific Service Icon Gradients on Hover */
.srv-card:hover .srv-icon-windows { background: linear-gradient(135deg, #0294C4, #38bdf8) !important; }
.srv-card:hover .srv-icon-mac { background: linear-gradient(135deg, #1d1d1f, #6b7280) !important; }
.srv-card:hover .srv-icon-laptop { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; }
.srv-card:hover .srv-icon-wifi { background: linear-gradient(135deg, #0891b2, #22d3ee) !important; }
.srv-card:hover .srv-icon-server { background: linear-gradient(135deg, #374151, #9ca3af) !important; }
.srv-card:hover .srv-icon-cloud { background: linear-gradient(135deg, #0294C4, #38bdf8) !important; }
.srv-card:hover .srv-icon-linux { background: linear-gradient(135deg, #d97706, #fbbf24) !important; }
.srv-card:hover .srv-icon-recupero { background: linear-gradient(135deg, #dc2626, #f87171) !important; }
.srv-card:hover .srv-icon-phone { background: linear-gradient(135deg, #059669, #34d399) !important; }

/* Service Card Title */
.srv-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Service Card Description */
.srv-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 24px;
}

/* Interactive Brand Button */
.srv-btn-discover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: rgba(2, 148, 196, 0.04) !important;
    border: 1px solid rgba(2, 148, 196, 0.12) !important;
    color: var(--primary) !important;
    padding: 11px 20px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-top: auto;
    text-decoration: none !important;
}

.srv-card:hover .srv-btn-discover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.22) !important;
    transform: translateY(-2px);
}

.srv-btn-discover i {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}
.srv-card:hover .srv-btn-discover i {
    transform: translateX(3px);
}

/* Premium Badges */
.srv-badge {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    line-height: 1;
    background: rgba(2, 148, 196, 0.08);
    color: var(--primary);
    border: 1px solid rgba(2, 148, 196, 0.15);
}

.srv-badge-new {
    background: rgba(225, 29, 72, 0.08);
    color: var(--accent);
    border-color: rgba(225, 29, 72, 0.15);
}

/* Frosted Bottom CTA Strip */
.servizi-cta-strip {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 35px 40px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    transition: var(--transition-custom);
}

.servizi-cta-strip:hover {
    border-color: rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.04) !important;
}

.servizi-cta-strip-title {
    color: var(--text-main);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}
.servizi-cta-strip-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.servizi-cta-strip-accent { 
    color: var(--primary); 
    font-weight: 800;
}

.strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.strip-btn-blue {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(2, 148, 196, 0.18);
}
.strip-btn-blue:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(2, 148, 196, 0.3); 
    color: #fff !important; 
}

.strip-btn-green {
    background: #25D366;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
}
.strip-btn-green:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28); 
    color: #fff !important; 
}

.strip-btn-ghost {
    background: rgba(2, 148, 196, 0.04) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 148, 196, 0.15) !important;
}
.strip-btn-ghost:hover { 
    background: rgba(2, 148, 196, 0.08) !important; 
    border-color: rgba(2, 148, 196, 0.25) !important;
    transform: translateY(-2px); 
}

@media (max-width: 767px) {
    .servizi-cta-strip { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .srv-card { padding: 28px 20px; }
}
/* ===== END SEZIONE SERVIZI ===== */

/* =====================================================
   SEZIONE SERVIZI — 3-COLUMN DASHBOARD (mod_custom #209)
   ===================================================== */
.servizi-wrap { 
    font-family: 'Outfit', sans-serif; 
    padding-top: 35px;
    padding-bottom: 35px;
}

/* Header Sezione */
.servizi-section-header { 
    margin-bottom: 3.5rem; 
}
.servizi-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 148, 196, 0.05);
    border: 1px solid rgba(2, 148, 196, 0.15);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(2, 148, 196, 0.02);
}
.servizi-section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.8px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.servizi-section-sub {
    color: var(--text-muted);
    font-size: 0.98rem;
    max-width: 600px;
    line-height: 1.6;
}

/* Category Headers (e.g. HARDWARE & POTENZIAMENTO) */
.srv-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-main);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(2, 148, 196, 0.1);
    position: relative;
}
.srv-cat-header::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 45px; height: 2px;
    background: var(--primary);
}
.srv-cat-header i {
    font-size: 1.15rem;
    color: var(--primary);
}

/* Services Row GAP */
.servizi-wrap .row {
    row-gap: 40px !important;
}

/* Micro-card list container */
.srv-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Service Item (Micro-card) */
.srv-item {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.015), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 16px 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    border-left: 3px solid transparent !important;
}

.srv-item:hover {
    transform: translateY(-2px) scale(1.005) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(2, 148, 196, 0.12) !important;
    border-left: 3px solid var(--primary) !important; /* Left active accent strip */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 0 15px rgba(2, 148, 196, 0.05) !important;
}

/* Service Main Link structure */
.srv-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    width: 100%;
}
.srv-link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.srv-icon {
    font-size: 1.15rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}
.srv-item:hover .srv-icon {
    transform: scale(1.15);
}
.srv-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    transition: color 0.2s;
}
.srv-item:hover .srv-title {
    color: var(--primary);
}
.srv-arrow {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.5;
    transition: all 0.3s ease;
}
.srv-item:hover .srv-arrow {
    opacity: 1;
    color: var(--primary);
    transform: translateX(3px);
}

/* Nested SEO Subpages Panel ("Dove Punta") */
.srv-subpages {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(2, 148, 196, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.srv-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(2, 148, 196, 0.02);
    border: 1px solid rgba(2, 148, 196, 0.05);
    transition: all 0.2s ease;
}
.srv-sub-link:hover {
    background: rgba(2, 148, 196, 0.06);
    border-color: rgba(2, 148, 196, 0.15);
    color: var(--primary) !important;
}
.srv-sub-link i {
    font-size: 0.8rem;
    color: var(--primary);
}

/* Frosted Bottom CTA Strip */
.servizi-cta-strip {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 35px 40px;
    margin-top: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    transition: var(--transition-custom);
}

.servizi-cta-strip:hover {
    border-color: rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.04) !important;
}

.servizi-cta-strip-title {
    color: var(--text-main);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}
.servizi-cta-strip-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.servizi-cta-strip-accent { 
    color: var(--primary); 
    font-weight: 800;
}

.strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.strip-btn-blue {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(2, 148, 196, 0.18);
}
.strip-btn-blue:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(2, 148, 196, 0.3); 
    color: #fff !important; 
}

.strip-btn-green {
    background: #25D366;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
}
.strip-btn-green:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28); 
    color: #fff !important; 
}

.strip-btn-ghost {
    background: rgba(2, 148, 196, 0.04) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 148, 196, 0.15) !important;
}
.strip-btn-ghost:hover { 
    background: rgba(2, 148, 196, 0.08) !important; 
    border-color: rgba(2, 148, 196, 0.25) !important;
    transform: translateY(-2px); 
}

@media (max-width: 991px) {
    .servizi-cta-strip { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* === RELATED SUB-SERVICES SHOWCASE GRID === */
.internal-subservices-wrap {
    margin-top: 4rem;
    margin-bottom: 3.5rem;
    padding: 3rem 2.5rem;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(2, 148, 196, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-normal);
}

.internal-subservices-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.85rem;
    color: var(--text-main);
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
    text-align: center;
}

.internal-subservices-subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.internal-subservices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.subservice-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: var(--radius-md);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition-custom);
    box-shadow: var(--shadow-subtle);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

.subservice-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
    opacity: 0;
    transition: var(--transition-custom);
}

.subservice-card:hover {
    transform: translateY(-5px);
    border-color: rgba(2, 148, 196, 0.18);
    box-shadow: var(--shadow-normal), 0 10px 25px rgba(2, 148, 196, 0.04);
    background: #ffffff;
}

.subservice-card:hover::before {
    opacity: 1;
}

.subservice-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(2, 148, 196, 0.06);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    transition: var(--transition-custom);
}

.subservice-card:hover .subservice-icon-box {
    background: var(--primary);
    color: #ffffff;
    transform: scale(1.05);
}

.subservice-card-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.subservice-card-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 1.75rem;
    flex-grow: 1;
}

.subservice-card-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary);
    background: rgba(2, 148, 196, 0.04);
    border: 1px solid rgba(2, 148, 196, 0.1);
    border-radius: 30px;
    padding: 0.6rem 1.25rem;
    transition: var(--transition-custom);
}

.subservice-card-btn i {
    transition: transform 0.2s ease;
}

.subservice-card:hover .subservice-card-btn {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.subservice-card:hover .subservice-card-btn i {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .internal-subservices-wrap {
        padding: 2rem 1.5rem;
        margin-top: 2.5rem;
    }
}

/* ===== END SEZIONE SERVIZI ===== */

/* =====================================================
   SEZIONE SERVIZI — CARD GRID (mod_custom #209)
   ===================================================== */
.servizi-wrap { 
    font-family: 'Outfit', sans-serif; 
    padding-top: 25px;
    padding-bottom: 25px;
}
.servizi-wrap .row {
    row-gap: 36px !important; /* Spazio aggiuntivo tra le righe di card su desktop e mobile */
}

/* Header Sezione */
.servizi-section-header { 
    margin-bottom: 2.5rem; 
}
.servizi-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 148, 196, 0.05);
    border: 1px solid rgba(2, 148, 196, 0.15);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(2, 148, 196, 0.02);
}
.servizi-section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.8px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.servizi-section-sub {
    color: var(--text-muted);
    font-size: 0.98rem;
    max-width: 600px;
    line-height: 1.6;
}

/* Glassmorphic Card (Homepage) */
.srv-card {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important; /* 24px Apple roundness */
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 32px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srv-card:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06), 0 0 25px rgba(2, 132, 199, 0.1) !important;
}

/* Hover Accent Line */
.srv-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.srv-card:hover .srv-card-accent {
    opacity: 1;
}

/* Premium Icon Container */
.srv-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 22px;
    flex-shrink: 0;
    border: 1.5px solid rgba(2, 148, 196, 0.1);
    background: linear-gradient(135deg, rgba(2, 148, 196, 0.04) 0%, rgba(2, 148, 196, 0.09) 100%);
    color: var(--primary);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.srv-card:hover .srv-icon-wrap {
    transform: scale(1.08) rotate(6deg);
    border-color: transparent;
    color: #ffffff;
}

/* Specific Service Icon Gradients on Hover */
.srv-card:hover .srv-icon-windows { background: linear-gradient(135deg, #0294C4, #38bdf8) !important; }
.srv-card:hover .srv-icon-mac { background: linear-gradient(135deg, #1d1d1f, #6b7280) !important; }
.srv-card:hover .srv-icon-laptop { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; }
.srv-card:hover .srv-icon-wifi { background: linear-gradient(135deg, #0891b2, #22d3ee) !important; }
.srv-card:hover .srv-icon-server { background: linear-gradient(135deg, #374151, #9ca3af) !important; }
.srv-card:hover .srv-icon-cloud { background: linear-gradient(135deg, #0294C4, #38bdf8) !important; }
.srv-card:hover .srv-icon-linux { background: linear-gradient(135deg, #d97706, #fbbf24) !important; }
.srv-card:hover .srv-icon-recupero { background: linear-gradient(135deg, #dc2626, #f87171) !important; }
.srv-card:hover .srv-icon-phone { background: linear-gradient(135deg, #059669, #34d399) !important; }

/* Service Card Title */
.srv-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Service Card Description */
.srv-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 24px;
}

/* Interactive Brand Button */
.srv-btn-discover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: rgba(2, 148, 196, 0.04) !important;
    border: 1px solid rgba(2, 148, 196, 0.12) !important;
    color: var(--primary) !important;
    padding: 11px 20px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-top: auto;
    text-decoration: none !important;
}

.srv-card:hover .srv-btn-discover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.22) !important;
    transform: translateY(-2px);
}

.srv-btn-discover i {
    font-size: 0.95rem;
    transition: transform 0.3s ease;
}
.srv-card:hover .srv-btn-discover i {
    transform: translateX(3px);
}

/* Premium Badges */
.srv-badge {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    line-height: 1;
    background: rgba(2, 148, 196, 0.08);
    color: var(--primary);
    border: 1px solid rgba(2, 148, 196, 0.15);
}
.srv-badge-new {
    background: rgba(225, 29, 72, 0.08);
    color: var(--accent);
    border-color: rgba(225, 29, 72, 0.15);
}

/* Frosted Bottom CTA Strip */
.servizi-cta-strip {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 35px 40px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    transition: var(--transition-custom);
}
.servizi-cta-strip:hover {
    border-color: rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.04) !important;
}
.servizi-cta-strip-title {
    color: var(--text-main);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}
.servizi-cta-strip-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.servizi-cta-strip-accent { 
    color: var(--primary); 
    font-weight: 800;
}

.strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.strip-btn-blue {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(2, 148, 196, 0.18);
}
.strip-btn-blue:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(2, 148, 196, 0.3); 
    color: #fff !important; 
}
.strip-btn-green {
    background: #25D366;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
}
.strip-btn-green:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28); 
    color: #fff !important; 
}
.strip-btn-ghost {
    background: rgba(2, 148, 196, 0.04) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 148, 196, 0.15) !important;
}
.strip-btn-ghost:hover { 
    background: rgba(2, 148, 196, 0.08) !important; 
    border-color: rgba(2, 148, 196, 0.25) !important;
    transform: translateY(-2px); 
}

@media (max-width: 767px) {
    .servizi-cta-strip { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .srv-card { padding: 28px 20px; }
}


/* =====================================================
   SEZIONE SERVIZI CORRELATI INTERNI (l6y01_content)
   ===================================================== */
.internal-subservices-wrap {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1.5px solid rgba(2, 148, 196, 0.12);
    font-family: 'Outfit', sans-serif;
}
.subservices-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(2, 148, 196, 0.04);
    border: 1px solid rgba(2, 148, 196, 0.15);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.subservices-main-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.6px;
    margin-bottom: 30px;
}
.subservices-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.subservices-card {
    background: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(25px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.02), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    padding: 24px 24px;
    flex: 1 1 calc(50% - 12px);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 767px) {
    .subservices-card {
        flex: 1 1 100%;
    }
}
.subservices-card:hover {
    transform: translateY(-4px) scale(1.005);
    border-color: rgba(2, 148, 196, 0.25) !important;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.05), 0 0 15px rgba(2, 148, 196, 0.05) !important;
}
.subservices-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(2, 148, 196, 0.04) 0%, rgba(2, 148, 196, 0.08) 100%);
    border: 1px solid rgba(2, 148, 196, 0.1);
    margin-bottom: 16px;
    transition: all 0.3s ease;
}
.subservices-card:hover .subservices-card-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.05) rotate(4deg);
}
.subservices-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
}
.subservices-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}
.subservices-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    margin-top: auto;
    transition: all 0.2s ease;
}
.subservices-card-btn i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}
.subservices-card:hover .subservices-card-btn {
    color: var(--primary-hover);
}
.subservices-card:hover .subservices-card-btn i {
    transform: translateX(3px);
}
/* ===== END SEZIONE SERVIZI CORRELATI INTERNI ===== */

/* ==========================================================================
   MOBILE NAVIGATION DRAWER & NAVIGATION OVERHAUL (Release 38)
   Beautiful glassmorphism, responsive tactile targets, active highlights, and custom mobile icons
   ========================================================================== */

/* Hide redundant offcanvas triggers and duplicate navbar togglers completely */
#triggerButton,
.t4-offcanvas-toggle,
.js-offcanvas-trigger,
.t4-navbar .navbar-toggler {
    display: none !important;
}

/* Hide mobile menu togglers completely on desktop viewports (min-width: 992px) */
@media (min-width: 992px) {
    .navbar-toggler,
    .t4-header-r .navbar-toggler,
    .t4-navbar .navbar-toggler,
    #triggerButton,
    .t4-offcanvas-toggle,
    .js-offcanvas-trigger {
        display: none !important;
    }
}

/* T4 Header Mobile Toggler Styling */
.navbar-toggler {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(2, 148, 196, 0.18) !important;
    border-radius: 12px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    color: var(--primary) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    cursor: pointer !important;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    background: rgba(2, 148, 196, 0.06) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3.5px rgba(2, 148, 196, 0.15) !important;
}

/* Clear legacy FontAwesome content and layout for the toggle bars */
.navbar-toggler .toggle-bars {
    display: block !important;
    position: relative !important;
    width: 20px !important;
    height: 2px !important;
    background-color: var(--primary) !important;
    border-radius: 4px !important;
    transition: all 0.35s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    font-size: 0 !important;
    color: transparent !important;
}

.navbar-toggler .toggle-bars::before,
.navbar-toggler .toggle-bars::after,
.navbar-toggler.active .toggle-bars::before,
.navbar-toggler.active .toggle-bars::after,
.navbar-toggler[aria-expanded="true"] .toggle-bars::before,
.navbar-toggler[aria-expanded="true"] .toggle-bars::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    width: 20px !important;
    height: 2px !important;
    background-color: var(--primary) !important;
    border-radius: 4px !important;
    transition: all 0.35s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

/* Initial vertical offsets for top and bottom lines */
.navbar-toggler .toggle-bars::before {
    top: -6px !important;
}

.navbar-toggler .toggle-bars::after {
    bottom: -6px !important;
}

/* Morph middle line out of view when active or expanded */
.navbar-toggler[aria-expanded="true"] .toggle-bars,
.navbar-toggler.active .toggle-bars {
    background-color: transparent !important;
}

/* Rotate top line into X component */
.navbar-toggler[aria-expanded="true"] .toggle-bars::before,
.navbar-toggler.active .toggle-bars::before {
    transform: rotate(45deg) !important;
    top: 0 !important;
    background-color: var(--primary-hover) !important;
}

/* Rotate bottom line into X component */
.navbar-toggler[aria-expanded="true"] .toggle-bars::after,
.navbar-toggler.active .toggle-bars::after {
    transform: rotate(-45deg) !important;
    bottom: 0 !important;
    background-color: var(--primary-hover) !important;
}

/* Subtle micro-interaction on hover: top and bottom lines stretch slightly */
.navbar-toggler:not([aria-expanded="true"]):not(.active):hover .toggle-bars::before {
    transform: translateY(-0.5px) !important;
}

.navbar-toggler:not([aria-expanded="true"]):not(.active):hover .toggle-bars::after {
    transform: translateY(0.5px) !important;
}

@media (max-width: 991.98px) {
    /* 1. Glassmorphic Dropdown Panel */
    #t4-megamenu-mainmenu.navbar-collapse {
        background: rgba(255, 255, 255, 0.985) !important;
        backdrop-filter: blur(25px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
        border: 1.5px solid rgba(2, 132, 199, 0.16) !important;
        border-radius: var(--radius-lg) !important;
        margin-top: 14px !important;
        margin-bottom: 14px !important;
        padding: 20px !important;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12), 0 0 25px rgba(2, 132, 199, 0.04) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
    }

    /* 2. Remove default list margins & structures */
    #t4-megamenu-mainmenu .navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Style main level 0 links to look like dashboard buttons - Left-aligned / Ragged-Right (Allineamento a bandiera sinistra!) */
    #t4-megamenu-mainmenu .navbar-nav > li {
        width: 100% !important;
        margin: 6px 0 !important;
        list-style: none !important;
    }

    #t4-megamenu-mainmenu .navbar-nav > li > a,
    #t4-megamenu-mainmenu .navbar-nav > li > .nav-link {
        font-family: 'Outfit', sans-serif !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        padding: 14px 18px !important;
        border-radius: var(--radius-md) !important;
        background: rgba(248, 250, 252, 0.5) !important;
        border: 1px solid rgba(2, 132, 199, 0.05) !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Perfect left-aligned structure */
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.015) !important;
        gap: 14px !important; /* Elegant spacing between outline icon and text */
    }

    #t4-megamenu-mainmenu .navbar-nav > li > a:hover,
    #t4-megamenu-mainmenu .navbar-nav > li > a:focus,
    #t4-megamenu-mainmenu .navbar-nav > li.active > a,
    #t4-megamenu-mainmenu .navbar-nav > li.active > .nav-link {
        background: rgba(2, 148, 196, 0.07) !important;
        border-color: rgba(2, 148, 196, 0.18) !important;
        color: var(--primary) !important;
        box-shadow: 0 4px 12px rgba(2, 148, 196, 0.05) !important;
        border-left: 4px solid var(--primary) !important;
        padding-left: 14px !important;
    }

    /* 4. Smooth out active highlights underline from desktop */
    #t4-megamenu-mainmenu .navbar-nav > li > a::after,
    #t4-megamenu-mainmenu .navbar-nav > li > .nav-link::after {
        display: none !important;
    }

    /* 5. Mobile Dropdown Menu Container Style - High-specificity overrides to crush desktop absolute rules */
    html body #t4-megamenu-mainmenu .dropdown-menu,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu,
    html body #t4-megamenu-mainmenu .navbar-nav>li.dropdown[data-id="86"]>.dropdown-menu,
    html body #t4-megamenu-mainmenu .navbar-nav>li.dropdown.item-86>.dropdown-menu,
    html body #t4-megamenu-mainmenu .mega-dropdown-inner,
    html body #t4-megamenu-mainmenu .dropdown-menu-inner {
        background: rgba(15, 23, 42, 0.025) !important;
        border: 1px solid rgba(2, 132, 199, 0.12) !important;
        border-top: 3px solid var(--primary) !important;
        border-radius: var(--radius-md) !important;
        margin: 8px 0 !important;
        padding: 12px 14px !important;
        box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.03) !important;
        float: none !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: none !important;
    }

    html body #t4-megamenu-mainmenu .dropdown-menu.show,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu.show,
    html body #t4-megamenu-mainmenu .show > .dropdown-menu,
    html body #t4-megamenu-mainmenu .show > .mega-dropdown-menu {
        display: block !important;
    }

    /* 6. Submenu Megamenu Columns structure on Mobile */
    #t4-megamenu-mainmenu .mega-dropdown-menu .row {
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    #t4-megamenu-mainmenu .mega-dropdown-menu [class*="col-"] {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* 7. Megamenu Column Header Titles */
    #t4-megamenu-mainmenu .mega-col-title {
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.88rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: var(--primary) !important;
        margin: 12px 0 6px 0 !important;
        padding-bottom: 6px !important;
        border-bottom: 1.5px dashed rgba(2, 148, 196, 0.12) !important;
        display: flex !important;
        align-items: center;
    }

    /* 8. Mega and Dropdown nav lists inside columns */
    #t4-megamenu-mainmenu .mega-nav,
    #t4-megamenu-mainmenu .dropdown-menu ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* 9. Dropdown child items styling - Apple-style mobile micro-cards! (High-specificity overrides) */
    html body #t4-megamenu-mainmenu .dropdown-item,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu .mega-nav .nav-link,
    html body #t4-megamenu-mainmenu .dropdown-menu .dropdown-item {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        color: var(--text-main) !important;
        padding: 11px 12px 11px 40px !important;
        margin: 5px 0 !important;
        border-radius: var(--radius-sm) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(15, 23, 42, 0.03) !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.01) !important;
        text-transform: none !important;
        white-space: normal !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Sub-menu item hovers & actives */
    html body #t4-megamenu-mainmenu .dropdown-item:hover,
    html body #t4-megamenu-mainmenu .dropdown-item:focus,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu .mega-nav .nav-link:hover,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu .mega-nav .nav-link:focus,
    html body #t4-megamenu-mainmenu .dropdown-menu li.active .dropdown-item,
    html body #t4-megamenu-mainmenu .dropdown-menu li.current .dropdown-item,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu li.active .nav-link,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu li.current .nav-link {
        background: rgba(2, 148, 196, 0.05) !important;
        border-color: rgba(2, 148, 196, 0.15) !important;
        color: var(--primary) !important;
        padding-left: 44px !important;
        border-left: 3px solid var(--primary) !important;
        box-shadow: 0 2px 8px rgba(2, 148, 196, 0.04) !important;
    }

    /* 10. Unified Premium Navigation Icons & Bullets for Mobile (Resolves tiny 5px squished icons!) */
    html body #t4-megamenu-mainmenu .dropdown-menu li a::before,
    html body #t4-megamenu-mainmenu .dropdown-menu .dropdown-item::before,
    html body #t4-megamenu-mainmenu .mega-dropdown-menu .mega-nav .nav-link::before {
        font-family: 'bootstrap-icons' !important;
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 6px !important; /* Default fallback size is tiny and elegant (6px) */
        color: var(--primary) !important;
        opacity: 0.65 !important; /* Default opacity for dots */
        transition: all 0.2s ease !important;
        pointer-events: none !important;
        content: '\F288'; /* Default tiny elegant circle-fill dot */
    }

    /* Target ONLY specifically mapped mobile menu items to have full-sized crisp custom icons (1.15rem) */
    #t4-megamenu-mainmenu li[data-id="204"] a::before, #t4-megamenu-mainmenu li.item-204 a::before,
    #t4-megamenu-mainmenu li[data-id="211"] a::before, #t4-megamenu-mainmenu li.item-211 a::before,
    #t4-megamenu-mainmenu li[data-id="227"] a::before, #t4-megamenu-mainmenu li.item-227 a::before,
    #t4-megamenu-mainmenu li[data-id="225"] a::before, #t4-megamenu-mainmenu li.item-225 a::before,
    #t4-megamenu-mainmenu li[data-id="700"] a::before, #t4-megamenu-mainmenu li.item-700 a::before,
    #t4-megamenu-mainmenu li[data-id="220"] a::before, #t4-megamenu-mainmenu li.item-220 a::before,
    #t4-megamenu-mainmenu li[data-id="212"] a::before, #t4-megamenu-mainmenu li.item-212 a::before,
    #t4-megamenu-mainmenu li[data-id="209"] a::before, #t4-megamenu-mainmenu li.item-209 a::before,
    #t4-megamenu-mainmenu li[data-id="210"] a::before, #t4-megamenu-mainmenu li.item-210 a::before,
    #t4-megamenu-mainmenu li[data-id="669"] a::before, #t4-megamenu-mainmenu li.item-669 a::before,
    #t4-megamenu-mainmenu li[data-id="670"] a::before, #t4-megamenu-mainmenu li.item-670 a::before,
    #t4-megamenu-mainmenu li[data-id="671"] a::before, #t4-megamenu-mainmenu li.item-671 a::before,
    #t4-megamenu-mainmenu li[data-id="672"] a::before, #t4-megamenu-mainmenu li.item-672 a::before,
    #t4-megamenu-mainmenu li[data-id="205"] a::before, #t4-megamenu-mainmenu li.item-205 a::before,
    #t4-megamenu-mainmenu li[data-id="206"] a::before, #t4-megamenu-mainmenu li.item-206 a::before,
    #t4-megamenu-mainmenu li[data-id="207"] a::before, #t4-megamenu-mainmenu li.item-207 a::before,
    #t4-megamenu-mainmenu li[data-id="1062"] a::before, #t4-megamenu-mainmenu li.item-1062 a::before,
    #t4-megamenu-mainmenu li[data-id="1063"] a::before, #t4-megamenu-mainmenu li.item-1063 a::before,
    #t4-megamenu-mainmenu li[data-id="231"] a::before, #t4-megamenu-mainmenu li.item-231 a::before {
        font-size: 1.15rem !important; /* Restores crisp, beautiful 18px icons for mapped items! */
        opacity: 0.85 !important;
    }

    /* Specific Bootstrap Icon mappings for Mobile sub-menus */
    #t4-megamenu-mainmenu li[data-id="204"] a::before, #t4-megamenu-mainmenu li.item-204 a::before { content: '\F2C2' !important; }
    #t4-megamenu-mainmenu li[data-id="211"] a::before, #t4-megamenu-mainmenu li.item-211 a::before { content: '\F117' !important; }
    #t4-megamenu-mainmenu li[data-id="227"] a::before, #t4-megamenu-mainmenu li.item-227 a::before { content: '\F4DF' !important; }
    #t4-megamenu-mainmenu li[data-id="225"] a::before, #t4-megamenu-mainmenu li.item-225 a::before { content: '\F5CC' !important; }
    #t4-megamenu-mainmenu li[data-id="700"] a::before, #t4-megamenu-mainmenu li.item-700 a::before { content: '\F593' !important; }
    #t4-megamenu-mainmenu li[data-id="220"] a::before, #t4-megamenu-mainmenu li.item-220 a::before { content: '\F61B' !important; }
    #t4-megamenu-mainmenu li[data-id="212"] a::before, #t4-megamenu-mainmenu li.item-212 a::before { content: '\F5DF' !important; }
    #t4-megamenu-mainmenu li[data-id="209"] a::before, #t4-megamenu-mainmenu li.item-209 a::before { content: '\F334' !important; }
    #t4-megamenu-mainmenu li[data-id="210"] a::before, #t4-megamenu-mainmenu li.item-210 a::before { content: '\F8B2' !important; }
    #t4-megamenu-mainmenu li[data-id="669"] a::before, #t4-megamenu-mainmenu li.item-669 a::before { content: '\F52E' !important; }
    #t4-megamenu-mainmenu li[data-id="670"] a::before, #t4-megamenu-mainmenu li.item-670 a::before { content: '\F28B' !important; }
    #t4-megamenu-mainmenu li[data-id="671"] a::before, #t4-megamenu-mainmenu li.item-671 a::before { content: '\F672' !important; }
    #t4-megamenu-mainmenu li[data-id="672"] a::before, #t4-megamenu-mainmenu li.item-672 a::before { content: '\F422' !important; }
    #t4-megamenu-mainmenu li[data-id="205"] a::before, #t4-megamenu-mainmenu li.item-205 a::before { content: '\F3E4' !important; }
    #t4-megamenu-mainmenu li[data-id="206"] a::before, #t4-megamenu-mainmenu li.item-206 a::before { content: '\F3E5' !important; }
    #t4-megamenu-mainmenu li[data-id="207"] a::before, #t4-megamenu-mainmenu li.item-207 a::before { content: '\F1B2' !important; }
    #t4-megamenu-mainmenu li[data-id="1062"] a::before, #t4-megamenu-mainmenu li.item-1062 a::before { content: '\F4E7' !important; }
    #t4-megamenu-mainmenu li[data-id="1063"] a::before, #t4-megamenu-mainmenu li.item-1063 a::before { content: '\F5CC' !important; }
    #t4-megamenu-mainmenu li[data-id="231"] a::before, #t4-megamenu-mainmenu li.item-231 a::before { content: '\F5E3' !important; }
    #t4-megamenu-mainmenu li[data-id="3639"] a::before, #t4-megamenu-mainmenu li.item-3639 a::before { content: '\F2C6' !important; }

    #t4-megamenu-mainmenu .dropdown-menu li:hover a::before,
    #t4-megamenu-mainmenu .dropdown-menu .dropdown-item:hover::before,
    #t4-megamenu-mainmenu .mega-dropdown-menu .mega-nav .nav-link:hover::before {
        transform: translateY(-50%) scale(1.15) !important;
        opacity: 1 !important;
        color: var(--primary-hover) !important;
    }

    /* 11. Custom Dropdown Caret Icon animation - Push cleanly to the far right */
    #t4-megamenu-mainmenu .item-caret {
        font-family: 'bootstrap-icons' !important;
        display: inline-block !important;
        content: '\F282' !important; /* bi-chevron-down */
        font-size: 0.8rem !important;
        color: var(--text-muted) !important;
        transition: transform 0.2s ease !important;
        margin-left: auto !important; /* Symmetrical balance placement */
    }

    #t4-megamenu-mainmenu .nav-item.show .item-caret,
    #t4-megamenu-mainmenu .nav-item.dropdown.show > .nav-link .item-caret {
        transform: rotate(180deg) !important;
        color: var(--primary) !important;
    }
}

/* ==========================================================================
   ULTRA-PREMIUM HERO STATS GRID & STATS CARD INTERACTIONS
   ========================================================================== */
.hero-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important; /* Spacious and symmetrical gap horizontally and vertically */
    margin-bottom: 24px !important; /* Perfect vertical breathing room */
}

.hero-stat-card {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
    text-align: center !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

.hero-stat-card:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(2, 148, 196, 0.45) !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(2, 148, 196, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

/* Lower block styling (Orari / Google Rating) */
.hero-stats-subcard {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    margin-top: 24px !important; /* Symmetrical breathing room */
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

.hero-stats-subcard:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(2, 148, 196, 0.35) !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 15px 35px rgba(2, 148, 196, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   HORIZONTAL BORDER AND SHADOW SUPPRESSION OVERRIDES (Release 21)
   ========================================================================== */
#t4-inner-top,
.t4-inner-top,
#t4-breadcrumbs,
.t4-breadcrumbs,
#t4-main-body,
.t4-main-body,
.t4-section,
.t4-section-inner {
    border-top: none !important;
    border-bottom: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Suppress all borders on the breadcrumbs container */
.t4-breadcrumbs {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   HYPER-MODERN ABSTRACT SERVICES (CSS Only, No Images)
   ========================================================================== */
.service-box-modern {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.01), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    padding: 32px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-box-modern::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(2, 148, 196, 0.015) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Glowing Backdrops for different cards */
.card-glow-azure:hover {
    border-color: rgba(2, 148, 196, 0.35) !important;
    box-shadow: 0 30px 60px rgba(2, 148, 196, 0.08), 0 0 40px rgba(2, 148, 196, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}

.card-glow-emerald:hover {
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 30px 60px rgba(16, 185, 129, 0.08), 0 0 40px rgba(16, 185, 129, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}

.card-glow-indigo:hover {
    border-color: rgba(79, 70, 229, 0.35) !important;
    box-shadow: 0 30px 60px rgba(79, 70, 229, 0.08), 0 0 40px rgba(79, 70, 229, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}

/* modern badge */
.badge-custom-modern {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 50px !important;
    z-index: 10;
}

.badge-recommended {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* Icon wrappers with interactive micro-animations */
.icon-wrapper-modern {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-glow-azure .icon-wrapper-modern {
    background: rgba(2, 148, 196, 0.06);
    color: var(--primary);
    border: 1px solid rgba(2, 148, 196, 0.15);
}

.card-glow-azure:hover .icon-wrapper-modern {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(2, 148, 196, 0.3);
    transform: rotate(-5deg) scale(1.08);
}

.card-glow-emerald .icon-wrapper-modern {
    background: rgba(16, 185, 129, 0.06);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.card-glow-emerald:hover .icon-wrapper-modern {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
    transform: rotate(5deg) scale(1.08);
}

.card-glow-indigo .icon-wrapper-modern {
    background: rgba(2, 148, 196, 0.06);
    color: #0294C4;
    border: 1px solid rgba(2, 148, 196, 0.15);
}

.card-glow-indigo:hover .icon-wrapper-modern {
    background: #0294C4;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(2, 148, 196, 0.3);
    transform: rotate(-5deg) scale(1.08);
}

.card-title-modern {
    font-size: 1.25rem !important;
    letter-spacing: -0.5px !important;
    color: var(--text-main) !important;
    z-index: 2;
    margin-top: 0 !important;
}

.card-subtitle-modern {
    font-size: 0.88rem !important;
    z-index: 2;
    margin-top: 0 !important;
}

.card-text-modern {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    z-index: 2;
}

/* Custom styled list items */
.custom-styled-list-modern {
    z-index: 2;
}

.custom-styled-list-modern li {
    font-size: 0.86rem !important;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.custom-styled-list-modern li i {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.service-box-modern .glow-bg-circle {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    transition: all 0.5s ease;
}

.card-glow-azure .glow-bg-circle {
    background: var(--primary);
    top: -20px;
    right: -20px;
}

.card-glow-azure:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-emerald .glow-bg-circle {
    background: #10b981;
    top: -20px;
    right: -20px;
}

.card-glow-emerald:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-indigo .glow-bg-circle {
    background: #0294C4;
    top: -20px;
    right: -20px;
}

.card-glow-indigo:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

/* More glow variants for the 10 services */
.card-glow-violet:hover {
    border-color: rgba(124, 58, 237, 0.35) !important;
    box-shadow: 0 30px 60px rgba(124, 58, 237, 0.08), 0 0 40px rgba(124, 58, 237, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-violet .icon-wrapper-modern {
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.15);
}
.card-glow-violet:hover .icon-wrapper-modern {
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
    transform: rotate(5deg) scale(1.08);
}
.card-glow-violet .glow-bg-circle {
    background: #7c3aed;
    top: -20px;
    right: -20px;
}
.card-glow-violet:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-slate:hover {
    border-color: rgba(100, 116, 139, 0.35) !important;
    box-shadow: 0 30px 60px rgba(100, 116, 139, 0.08), 0 0 40px rgba(100, 116, 139, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-slate .icon-wrapper-modern {
    background: rgba(100, 116, 139, 0.06);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.15);
}
.card-glow-slate:hover .icon-wrapper-modern {
    background: #64748b;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(100, 116, 139, 0.3);
    transform: rotate(-5deg) scale(1.08);
}
.card-glow-slate .glow-bg-circle {
    background: #64748b;
    top: -20px;
    right: -20px;
}
.card-glow-slate:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-sky:hover {
    border-color: rgba(14, 165, 233, 0.35) !important;
    box-shadow: 0 30px 60px rgba(14, 165, 233, 0.08), 0 0 40px rgba(14, 165, 233, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-sky .icon-wrapper-modern {
    background: rgba(14, 165, 233, 0.06);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.15);
}
.card-glow-sky:hover .icon-wrapper-modern {
    background: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3);
    transform: rotate(5deg) scale(1.08);
}
.card-glow-sky .glow-bg-circle {
    background: #0ea5e9;
    top: -20px;
    right: -20px;
}
.card-glow-sky:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-sapphire:hover {
    border-color: rgba(2, 148, 196, 0.35) !important;
    box-shadow: 0 30px 60px rgba(2, 148, 196, 0.08), 0 0 40px rgba(2, 148, 196, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-sapphire .icon-wrapper-modern {
    background: rgba(2, 148, 196, 0.06);
    color: #0294C4;
    border: 1px solid rgba(2, 148, 196, 0.15);
}
.card-glow-sapphire:hover .icon-wrapper-modern {
    background: #0294C4;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(2, 148, 196, 0.3);
    transform: rotate(-5deg) scale(1.08);
}
.card-glow-sapphire .glow-bg-circle {
    background: #0294C4;
    top: -20px;
    right: -20px;
}
.card-glow-sapphire:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-teal:hover {
    border-color: rgba(13, 148, 136, 0.35) !important;
    box-shadow: 0 30px 60px rgba(13, 148, 136, 0.08), 0 0 40px rgba(13, 148, 136, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-teal .icon-wrapper-modern {
    background: rgba(13, 148, 136, 0.06);
    color: #0d9488;
    border: 1px solid rgba(13, 148, 136, 0.15);
}
.card-glow-teal:hover .icon-wrapper-modern {
    background: #0d9488;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(13, 148, 136, 0.3);
    transform: rotate(5deg) scale(1.08);
}
.card-glow-teal .glow-bg-circle {
    background: #0d9488;
    top: -20px;
    right: -20px;
}
.card-glow-teal:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-rose:hover {
    border-color: rgba(244, 63, 94, 0.35) !important;
    box-shadow: 0 30px 60px rgba(244, 63, 94, 0.08), 0 0 40px rgba(244, 63, 94, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-rose .icon-wrapper-modern {
    background: rgba(244, 63, 94, 0.06);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.15);
}
.card-glow-rose:hover .icon-wrapper-modern {
    background: #f43f5e;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3);
    transform: rotate(-5deg) scale(1.08);
}
.card-glow-rose .glow-bg-circle {
    background: #f43f5e;
    top: -20px;
    right: -20px;
}
.card-glow-rose:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}

.card-glow-amber:hover {
    border-color: rgba(217, 119, 6, 0.35) !important;
    box-shadow: 0 30px 60px rgba(217, 119, 6, 0.08), 0 0 40px rgba(217, 119, 6, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-8px) scale(1.01) !important;
}
.card-glow-amber .icon-wrapper-modern {
    background: rgba(217, 119, 6, 0.06);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.15);
}
.card-glow-amber:hover .icon-wrapper-modern {
    background: #d97706;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.3);
    transform: rotate(5deg) scale(1.08);
}
.card-glow-amber .glow-bg-circle {
    background: #d97706;
    top: -20px;
    right: -20px;
}
.card-glow-amber:hover .glow-bg-circle {
    opacity: 0.3;
    width: 180px;
    height: 180px;
}


/* ==========================================================================
   SERVICES SLIDER CAROUSEL SYSTEM (CSS Snap Snaps scroller)
   ========================================================================== */
.services-slider-wrapper {
    position: relative;
    padding: 0 25px !important;
    margin: 0 auto;
    max-width: 1320px;
}

.services-slider-container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    gap: 24px !important;
    padding: 20px 5px 30px 5px !important;
    scrollbar-width: none !important; /* Hide scrollbar Firefox */
}

.services-slider-container::-webkit-scrollbar {
    display: none !important; /* Hide scrollbar Chrome/Safari */
}

.services-slider-container .col-slider-card {
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
    display: flex !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    .services-slider-container .col-slider-card {
        flex: 0 0 calc(50% - 12px) !important; /* 2 columns on tablet */
    }
}

@media (min-width: 992px) {
    .services-slider-container .col-slider-card {
        flex: 0 0 calc(33.333% - 16px) !important; /* 3 columns on desktop */
    }
}

/* Custom Arrows - Unified Floating Dock System */
.services-slider-controls-dock {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 30px auto 0 auto !important;
    padding: 8px 18px !important;
    width: fit-content !important;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(2, 148, 196, 0.12) !important;
    border-radius: 100px !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    z-index: 10 !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.services-slider-controls-dock:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(2, 148, 196, 0.25) !important;
    box-shadow: 0 16px 40px rgba(2, 148, 196, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) !important;
}

.services-slider-controls-dock .slider-arrow-services {
    position: static !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(2, 148, 196, 0.05) !important;
    border: 1px solid rgba(2, 148, 196, 0.08) !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.92rem !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.services-slider-controls-dock .slider-arrow-services:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    transform: scale(1.08) !important;
}

.services-slider-controls-dock .slider-arrow-services:active {
    transform: scale(0.94) !important;
}

@media (max-width: 767.98px) {
    .services-slider-wrapper {
        padding: 0 15px !important;
        position: relative !important;
        padding-bottom: 10px !important;
    }
    .services-slider-container {
        -webkit-overflow-scrolling: touch !important;
    }
    .services-slider-container .col-slider-card {
        flex: 0 0 100% !important;
        scroll-snap-align: center !important;
    }
}

/* Pagination Dots */
.services-slider-controls-dock .services-slider-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    position: relative !important;
}

.services-slider-controls-dock .slider-dot-services {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.services-slider-controls-dock .slider-dot-services:hover {
    background: rgba(2, 148, 196, 0.35) !important;
    transform: scale(1.15) !important;
}

.services-slider-controls-dock .slider-dot-services.active {
    width: 24px !important;
    height: 8px !important;
    border-radius: 100px !important;
    background: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(2, 148, 196, 0.4) !important;
}

/* ==========================================================================
   GLOBAL BRAND AZURRO (#0294C4) UNIFICATION OVERRIDES
   ========================================================================== */
.text-primary,
.text-primary-important,
.benefit-icon i,
.comune-highlight-icon i,
.custom-styled-list li i,
.article-body-content h3 i {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--primary-hover) !important;
}

/* ==========================================================================
   PREMIUM Bottom SERVICES CTA CARD (Contacts Style)
   ========================================================================== */
.servizi-cta-card {
    transition: var(--transition-custom);
}
.servizi-cta-card:hover {
    border-color: rgba(2, 132, 199, 0.3) !important;
    box-shadow: 0 25px 70px rgba(2,148,196,0.25) !important;
}
.srv-cta-btn {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.srv-cta-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 25px rgba(2,148,196,0.4) !important;
    color: #fff !important;
}
.srv-cta-btn[href*="wa.me"]:hover {
    box-shadow: 0 10px 25px rgba(37,211,102,0.35) !important;
}
.srv-cta-ghost:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 991.98px) {
    .servizi-cta-card {
        padding: 40px 30px !important;
    }
    .cta-btn-group {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .servizi-cta-card {
        padding: 30px 20px !important;
        border-radius: 18px !important;
    }
    .cta-bullets {
        gap: 10px !important;
    }
    .cta-bullets span {
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   MOBILE MENU ACCORDION/DRILLDOWN CARETS & STYLE FIX
   ========================================================================== */
/* Refine the JoomlArt mobile caret into a modern tactile touch capsule */
.t4-offcanvas-body .item-caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 8px !important;
    color: var(--primary) !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.t4-offcanvas-body .item-caret::before {
    content: '\F285' !important; /* bi-chevron-right */
    font-family: 'bootstrap-icons' !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

.t4-offcanvas-body .item-caret:hover,
.t4-offcanvas-body .item-caret:active {
    background: var(--primary-light) !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
    color: var(--primary) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

/* ==========================================================================
   HOMEPAGE CONTENT SPACING & RESPONSIVE GRID OVERHAUL
   ========================================================================== */
/* Spacing below top slideshow to let content breathe */
.slideshow-container {
    padding-bottom: 24px !important;
}

/* Adjust slideshow responsive layout to fully accommodate mobile text and protect pagination dots */
@media (max-width: 767.98px) {
    .slideshow-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #mainCarousel {
        min-height: 520px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }
    #mainCarousel .carousel-inner {
        height: auto !important;
        min-height: 520px !important;
    }
    #mainCarousel .carousel-item {
        height: auto !important;
        min-height: 520px !important;
    }
    #mainCarousel .service-slide-wrapper {
        height: auto !important;
        min-height: 520px !important;
        padding: 32px 32px 72px 32px !important; /* Spacious safety zone to prevent text/button overlapping dots */
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 10px 40px rgba(15, 23, 42, 0.01), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    }
}

/* Robust global spacing for columns stacking vertically on mobile viewport */
@media (max-width: 767.98px) {
    .row > [class*="col-"],
    .row > .col {
        margin-bottom: 24px !important; /* Unified visual gutters between stacked mobile grid columns */
    }
    .row > [class*="col-"]:last-child,
    .row > .col:last-child {
        margin-bottom: 0 !important;
    }
    .benefit-card {
        margin-bottom: 0 !important; /* Let column margins do the spacing naturally */
    }
}

/* ==========================================================================
   HYPER-MODERN MOBILE MENU OVERLAY DROPDOWN (#custom-mobile-menu)
   ========================================================================== */

/* Aggressive, permanent off-canvas blocker and body shift preventer */
.t4-offcanvas,
.t4-off-canvas,
.offcanvas,
.offcanvas-start,
.t4-off-canvas-backdrop,
.t4-offcanvas-backdrop,
.offcanvas-backdrop,
#t4-offcanvas,
.t4-off-canvas.show,
.t4-offcanvas.show,
.offcanvas.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
}

body.active-sidebar-l,
body.active-sidebar-r,
body.off-canvas-active {
    position: static !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    overflow: auto !important;
}

#t4-wrapper {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    transition: none !important;
}

/* Glassmorphic Dropdown Panel overlay below the header */
#custom-mobile-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border-bottom: 3px solid rgba(2, 148, 196, 0.2) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
    z-index: 99999 !important;
    padding: 24px 20px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* List Structure */
.custom-mobile-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.custom-nav-item {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* Base Link/Button styles */
.custom-nav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 18px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
    color: var(--text-main) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 12px !important;
    text-align: left !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Button indicator for accordion */
.custom-nav-link.submenu-trigger::after {
    content: '\F282' !important; /* bi-chevron-down */
    font-family: 'bootstrap-icons' !important;
    margin-left: auto !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    color: rgba(15, 23, 42, 0.4) !important;
    transition: all 0.25s ease !important;
}

/* Active states */
.custom-nav-link:hover,
.custom-nav-link:active,
.custom-nav-link.active {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08) !important;
}

.custom-nav-link.submenu-trigger.active::after {
    transform: rotate(180deg) !important;
    color: var(--primary) !important;
}

/* Submenu container */
.custom-submenu {
    display: none;
    background: rgba(15, 23, 42, 0.02) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
}

/* Megamenu Category Headers */
.custom-megamenu-category .category-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(2, 132, 199, 0.12) !important;
    display: flex !important;
    align-items: center !important;
}

/* Link items inside submenus */
.category-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.category-links li {
    padding: 0 !important;
    margin: 0 !important;
}

.category-links li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 14px 10px 28px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--text-main) !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.04) !important;
    border-radius: 8px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.01) !important;
    box-sizing: border-box !important;
}

.category-links li a::before {
    content: '\F285' !important; /* bi-chevron-right */
    font-family: 'bootstrap-icons' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
}

.category-links li a:hover,
.category-links li a:active {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: rgba(2, 132, 199, 0.18) !important;
    padding-left: 32px !important;
}

.category-links li a:hover::before {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.15) !important;
}

/* Active hamburger icon states in header */
.t4-offcanvas-toggle.active i::before,
.navbar-toggler.active i::before {
    content: "\f00d" !important; /* FontAwesome close 'times' */
}

/* ==========================================================================
   HYPER-MODERN TEXT-BASED BRAND LOGO (Outfit Typographical Logo)
   ========================================================================== */
.logo-text-wrap {
    font-family: 'Outfit', sans-serif !important;
    line-height: 1 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important; /* Enforces shimmer sweep boundaries */
    padding: 4px 8px !important;
    border-radius: 8px !important;
}

.logo-main-text {
    display: flex !important;
    align-items: baseline !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

.logo-text-riparazioni {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: #555555 !important; /* Unified Brand Gray (#555555) */
    letter-spacing: -0.5px !important;
    text-transform: uppercase !important;
}

.logo-text-pc {
    font-size: 2.35rem !important; /* Prominently taller */
    font-weight: 900 !important;
    color: #555555 !important; /* Unified Brand Gray (#555555) */
    letter-spacing: -1px !important;
    text-transform: uppercase !important;
    margin-left: 1px !important;
    animation: logo-pc-sparkle 14s infinite !important; /* Organic asymmetrical neon sparkles loop */
}

.logo-text-net {
    font-size: 1.05rem !important; /* Smaller, baseline-aligned */
    font-weight: 700 !important;
    color: #777777 !important; /* Muted brand gray (#777777) */
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    margin-left: 2px !important;
}

.logo-tagline {
    font-size: 0.92rem !important; /* User defined perfect desktop size */
    font-weight: 800 !important;
    color: #0294C4 !important; /* User defined brand azure */
    letter-spacing: -0.2px !important; /* User defined letter-spacing */
    text-transform: uppercase !important;
    width: 100% !important;
    white-space: nowrap !important;
}

/* Elegant occasionally triggering CSS Shimmer Sweep */
.logo-text-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 80px !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(2, 148, 196, 0.05) 20%,
        rgba(2, 148, 196, 0.35) 50%,
        rgba(2, 148, 196, 0.05) 80%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-25deg) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    animation: logo-shimmer-sweep 8s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Asymmetrical organic sparkling neon flickers & glows */
@keyframes logo-pc-sparkle {
    0%, 35%, 43%, 45%, 70%, 82%, 100% {
        color: #555555;
        text-shadow: none;
    }
    36% {
        color: #0294C4; /* First quick neon spark */
        text-shadow: 0 0 8px rgba(2, 148, 196, 0.5), 0 0 15px rgba(2, 148, 196, 0.2);
    }
    37% {
        color: #555555;
        text-shadow: none;
    }
    38% {
        color: #0294C4; /* Rapid double flash trigger */
        text-shadow: 0 0 12px rgba(2, 148, 196, 0.7), 0 0 25px rgba(2, 148, 196, 0.4);
    }
    40% {
        color: #555555;
        text-shadow: none;
    }
    41% {
        color: #0294C4; /* Deep cyber-glow flash */
        text-shadow: 0 0 18px rgba(2, 148, 196, 0.8), 0 0 35px rgba(2, 148, 196, 0.5);
    }
    42% {
        color: #0294C4;
        text-shadow: 0 0 10px rgba(2, 148, 196, 0.6);
    }
    72% {
        color: #555555;
        text-shadow: none;
    }
    75% {
        color: #38bdf8; /* Luminous brand sky-blue slow pulse builds up */
        text-shadow: 0 0 12px rgba(56, 189, 248, 0.4), 0 0 20px rgba(56, 189, 248, 0.2);
    }
    78% {
        color: #0294C4; /* Saturated brand azure sweep peak */
        text-shadow: 0 0 20px rgba(2, 148, 196, 0.7), 0 0 40px rgba(2, 148, 196, 0.4);
    }
    81% {
        color: #555555;
        text-shadow: none;
    }
}

/* Shimmer sweep keyframe */
@keyframes logo-shimmer-sweep {
    0% {
        left: -150%;
    }
    10% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

/* Hover transitions */
.navbar-brand:hover .logo-text-wrap {
    transform: scale(1.02);
}
.navbar-brand:hover .logo-text-pc {
    color: var(--primary) !important;
}

/* Responsive scaling for mobile viewports */
@media (max-width: 991.98px) {
    .logo-text-riparazioni {
        font-size: 1.5rem !important;
    }
    .logo-text-pc {
        font-size: 1.9rem !important;
    }
    .logo-text-net {
        font-size: 0.9rem !important;
    }
    .logo-tagline {
        font-size: 0.76rem !important;
        letter-spacing: -0.18px !important;
    }
}

@media (max-width: 767.98px) {
    .logo-text-riparazioni {
        font-size: 1.25rem !important;
    }
    .logo-text-pc {
        font-size: 1.55rem !important;
    }
    .logo-text-net {
        font-size: 0.75rem !important;
    }
    .logo-tagline {
        font-size: 0.63rem !important; /* User defined mobile font size */
        letter-spacing: -0.15px !important; /* User defined mobile letter-spacing */
    }
}

/* ==========================================================================
   PERMANENT DESKTOP MENU DELETION ON MOBILE VIEWPORTS
   ========================================================================== */
@media (max-width: 991.98px) {
    #t4-megamenu-mainmenu,
    .t4-megamenu.navbar-collapse,
    #t4-megamenu-mainmenu.show,
    .t4-megamenu.navbar-collapse.show {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* ==========================================================================
   PERMANENT SIDE SERVICES MENU DELETION ON MOBILE VIEWPORTS
   ========================================================================== */
@media (max-width: 991.98px) {
    #Mod151,
    .t4-module#Mod151 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* ==========================================================================
   PREMIUM OVERHAUL FOR MILANO SUB-MUNICIPALITIES CATEGORY INDEX
   ========================================================================== */
.com-content-category.category-list {
    margin-top: 20px !important;
}

.com-content-category.category-list .content-category > h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background: linear-gradient(135deg, #0f172a 0%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 25px !important;
    letter-spacing: -1px !important;
    position: relative;
    padding-bottom: 12px;
    display: inline-block;
}

.com-content-category.category-list .content-category > h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #38bdf8);
    border-radius: 2px;
}

/* Restyle Joomla's filter bar */
.com-content-category__filters.filters {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 20px !important;
    border-radius: 16px !important;
    margin: 25px 0 35px 0 !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.015), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
}

.com-content-category__filters.filters legend {
    display: none !important;
}

.com-content-category__filters.filters .btn-group {
    width: 100% !important;
    position: relative !important;
}

.com-content-category__filters.filters input.inputbox {
    width: 100% !important;
    padding: 12px 20px 12px 45px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    transition: all 0.3s ease !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: var(--shadow-subtle) !important;
}

.com-content-category__filters.filters input.inputbox:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
    outline: none !important;
}

.com-content-category__filters.filters .btn-group::before {
    content: '\F52A'; /* bi-search */
    font-family: "bootstrap-icons" !important;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    z-index: 10;
    pointer-events: none;
}

/* Overriding Category Table with beautiful Frosted Cards grid */
.com-content-category__table {
    display: block !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 20px !important;
}

.com-content-category__table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
    border: none !important;
}

.com-content-category__table tr {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(2, 132, 199, 0.08) !important; /* Premium soft blue border glow */
    border-radius: 18px !important;
    padding: 16px 54px 16px 20px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01), inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    gap: 15px !important;
}

.com-content-category__table tr:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04), 0 0 20px rgba(2, 132, 199, 0.05) !important;
}

.com-content-category__table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.com-content-category__table td.list-title {
    flex-grow: 1 !important;
    margin: 0 !important;
}

.com-content-category__table td.list-title a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
    display: block !important;
}

.com-content-category__table tr:hover td.list-title a {
    color: var(--primary) !important;
}

.com-content-category__table td.list-hits {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Overhaul the visits badge into a magnificent emerald green "Tecnico Disponibile" check pill */
.com-content-category__table td.list-hits .badge {
    font-size: 0 !important; /* Completely hides legacy 'Visite: X' text */
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(34, 197, 94, 0.08) !important;
    color: #16a34a !important;
    border: 1px solid rgba(34, 197, 94, 0.16) !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.02) !important;
    cursor: default !important;
}

.com-content-category__table td.list-hits .badge::before {
    content: '\F272\A0' !important; /* bi-check-circle-fill + spacing */
    font-family: 'bootstrap-icons' !important;
    font-size: 0.78rem !important;
    margin-right: 4px !important;
    color: #16a34a !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.com-content-category__table td.list-hits .badge::after {
    content: 'Tecnico Disponibile' !important;
    font-size: 0.68rem !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Elegant micro-interactive card arrow indicator */
.com-content-category__table tr::after {
    content: '\F285' !important; /* bi-arrow-right-short */
    font-family: "bootstrap-icons" !important;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 20px !important;
    font-size: 1.35rem;
    color: var(--text-muted);
    opacity: 0.4;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.com-content-category__table tr:hover::after {
    color: var(--primary);
    opacity: 1;
    transform: translateY(-50%) translateX(4px) !important;
}

/* Mobile responsive media overrides for category listings */
@media (max-width: 768px) {
    .com-content-category__table tr {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 20px 20px 20px !important;
        gap: 12px !important;
    }
    .com-content-category__table tr::after {
        right: 20px !important;
        top: auto !important;
        bottom: 20px !important;
        transform: none !important;
    }
    .com-content-category__table tr:hover::after {
        transform: translateX(4px) !important;
    }
    .com-content-category__table td.list-hits {
        align-self: flex-start !important;
    }
}

/* Search Bar layout and dynamic styling overrides inspired by comuni-serviti.html */
.com-content-category__filters.filters {
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 25px 0 25px 0 !important;
}
.com-content-category__filters.filters .btn-group {
    position: relative !important;
    width: 100% !important;
    box-shadow: 0 8px 32px rgba(2, 132, 199, 0.04) !important;
    border-radius: 50px !important;
    overflow: visible !important;
}
.com-content-category__filters.filters input.inputbox {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(2, 132, 199, 0.15) !important;
    padding: 16px 145px 16px 52px !important; /* Space for clear button and Cerca badge */
    border-radius: 50px !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #0f172a !important;
    font-family: 'Outfit', sans-serif !important;
    box-shadow: none !important;
}
.com-content-category__filters.filters input.inputbox:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 5px rgba(2, 132, 199, 0.1) !important;
}
.com-content-category__filters.filters .btn-group::before {
    content: '\F52A' !important; /* bi-search */
    font-family: "bootstrap-icons" !important;
    position: absolute;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--primary) !important;
    font-size: 1.15rem !important;
    z-index: 10 !important;
}

/* Clear search input button */
.comuni-clear-btn {
    position: absolute !important;
    right: 90px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #94a3b8 !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    z-index: 11 !important;
    transition: all 0.25s ease !important;
    opacity: 0;
    pointer-events: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.comuni-clear-btn.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.comuni-clear-btn:hover {
    color: var(--accent) !important;
    transform: translateY(-50%) scale(1.15) !important;
}

/* Floating "Cerca" badge inside input bar */
.comuni-search-badge {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-family: 'Outfit', sans-serif !important;
}
.com-content-category__filters.filters input.inputbox:focus ~ .comuni-search-badge {
    background: var(--primary-hover) !important;
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.25) !important;
}

/* Comune Icon Wrapper Styling inside link */
.com-content-category__table td.list-title a .comune-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.com-content-category__table td.list-title a .comune-icon-wrapper i {
    font-size: 1.05rem !important;
}

/* Brand color styles for PC vs Mac vs General services */
.comune-icon-wrapper.mac-service {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
.com-content-category__table tr:hover td.list-title a .comune-icon-wrapper.mac-service {
    background: rgba(15, 23, 42, 0.12) !important;
}

.comune-icon-wrapper.pc-service {
    background: rgba(2, 132, 199, 0.05) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 132, 199, 0.1) !important;
}
.com-content-category__table tr:hover td.list-title a .comune-icon-wrapper.pc-service {
    background: rgba(2, 132, 199, 0.12) !important;
}

.comune-icon-wrapper.general-service {
    background: rgba(239, 68, 68, 0.05) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.1) !important;
}
.com-content-category__table tr:hover td.list-title a .comune-icon-wrapper.general-service {
    background: rgba(239, 68, 68, 0.12) !important;
}

/* ==========================================================================
   HIGH CONTRAST & ACCESSIBILITY FIXES
   ========================================================================== */
.srv-cta-btn {
    color: #ffffff !important;
}
.srv-cta-btn i {
    color: #ffffff !important;
}
.text-slate-700 {
    color: #334155 !important;
}

/* WhatsApp High Contrast emerald green button override (only applies to actual buttons) */
.srv-cta-btn[href*="wa.me"],
a[href*="wa.me"].btn,
.whatsapp-btn {
    background: #0b8457 !important;
    background-color: #0b8457 !important;
    color: #ffffff !important;
}
.srv-cta-btn[href*="wa.me"]:hover,
a[href*="wa.me"].btn:hover,
.whatsapp-btn:hover {
    background: #096b46 !important;
    background-color: #096b46 !important;
    color: #ffffff !important;
}
.srv-cta-btn[href*="wa.me"] i,
a[href*="wa.me"].btn i {
    color: #ffffff !important;
}


/* ==========================================================================
   MOBILE GLASS CARD REMOVAL & TEXT OVERRIDES FOR INTRO ARTICOLI
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Remove the card background, borders, and shadows completely to present plain text */
    .intro-modern-wrapper .support-banner {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        margin-bottom: 25px !important;
    }
    
    /* Remove decorative blue/green gradient blobs on mobile screen view */
    .intro-modern-wrapper .support-banner::before,
    .intro-modern-wrapper .support-banner::after {
        display: none !important;
    }
    
    /* Widen and optimize typography for maximum mobile readability */
    .intro-modern-wrapper .support-banner h1 {
        font-size: 1.8rem !important;
        line-height: 1.35 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 15px !important;
        color: var(--text-main) !important;
    }
}

/* ==========================================================================
   PREMIUM CPU LOGO ASSEMBLY & ACTIVE BREATHING SHIMMER
   ========================================================================== */
@keyframes cpu-assemble {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
        text-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 6px rgba(2, 125, 165, 0.3);
    }
}

@keyframes cpu-pulse-glow {
    0%, 100% {
        text-shadow: 0 0 4px rgba(2, 125, 165, 0.2);
        color: #027da5 !important;
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 15px rgba(56, 189, 248, 0.65);
        color: #38bdf8 !important;
        transform: scale(1.06);
    }
}

.logo-cpu-icon {
    display: inline-block !important;
    transform-origin: center !important;
    font-size: 2.15rem !important; /* Extremely high clarity size matching Outfit lettering */
    line-height: 1 !important;
    vertical-align: middle !important;
    color: #027da5 !important;
    position: relative !important;
    top: -4px !important; /* Perfect vertical visual centering relative to RIPARAZIONIPC.NET */
    animation: cpu-assemble 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               cpu-pulse-glow 4s ease-in-out infinite 1.2s !important;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                text-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Make it rotate 360 degrees on hover with a premium cyan glow explosion and butter-smooth animation pause */
.logo-text-wrap:hover .logo-cpu-icon {
    animation-play-state: paused !important;
    transform: rotate(360deg) scale(1.18) !important;
    color: #38bdf8 !important;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 40px rgba(56, 189, 248, 0.4) !important;
}

/* Bulletproof mobile wrapping/vertical stacking override for badge */
@media (max-width: 767.98px) {
    .intro-modern-wrapper .support-banner .badge {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        white-space: normal !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        border-radius: 16px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }
    
    .intro-modern-wrapper .support-banner .badge span {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
}
/* ==========================================================================
   CLEAN TRANSPARENT BACKGROUND OVERRIDES FOR PRIVACY POPUP MODAL
   ========================================================================== */
#privacyModalPopup .modal-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.contentpane {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   HOMEPAGE HORIZONTAL REVIEWS MARQUEE
   ========================================================================== */
.home-reviews-marquee-section {
    padding: 60px 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(2, 132, 199, 0.015) 100%) !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.home-reviews-marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    padding: 15px 0;
}

.home-reviews-marquee-inner {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 10px 0;
    width: max-content;
    animation: marquee-horizontal 120s linear infinite;
}

.home-reviews-marquee-container:hover .home-reviews-marquee-inner {
    animation-play-state: paused !important;
}

.home-review-card {
    flex-shrink: 0;
    width: 330px;
    background: #ffffff !important;
    border: 1px solid rgba(2, 132, 199, 0.08) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.02), inset 0 1px 0 #ffffff !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    text-align: left;
}

.home-review-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(2, 132, 199, 0.22) !important;
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.06), inset 0 1px 0 #ffffff !important;
}

@keyframes marquee-horizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Fix for sidebar dropping down due to flex column expanding from marquee max-content width */
.t4-main-body .t4-col.col-md {
    min-width: 0 !important;
}

/* ==========================================================================
   JOOMLA OPEN SOURCE RESOURCES PAGES STYLING
   ========================================================================== */
#os-filter-controls .btn {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    font-size: 0.88rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#os-filter-controls .btn.active-filter {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.2) !important;
}

#os-filter-controls .btn:not(.active-filter):hover {
    background-color: rgba(2, 132, 199, 0.05) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
}

.software-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.risorse-open-source-catalog .benefit-card {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.risorse-open-source-catalog .benefit-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.05) !important;
}

.risorse-open-source-detail table th {
    font-weight: 700 !important;
    color: var(--text-main) !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    padding: 12px 8px !important;
}

.risorse-open-source-detail table td {
    padding: 12px 8px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(2, 132, 199, 0.05) !important;
}

.risorse-open-source-detail .badge.bg-primary-subtle {
    background-color: rgba(2, 132, 199, 0.1) !important;
    color: var(--primary) !important;
}

/* ==========================================================================
   PREMIUM ENHANCEMENTS FOR OPEN SOURCE PAGES
   ========================================================================== */

/* Glassmorphic Capsule for Filter Controls */
#os-filter-controls {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(2, 132, 199, 0.08) !important;
    border-radius: 50px !important;
    padding: 6px !important;
    display: inline-flex !important;
    width: auto !important;
    margin: 25px auto 10px auto !important;
}

#os-filter-controls .btn {
    border: none !important;
    margin: 0 !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    padding: 8px 22px !important;
    border-radius: 50px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

#os-filter-controls .btn.active-filter {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.18) !important;
}

#os-filter-controls .btn:not(.active-filter):hover {
    background-color: rgba(2, 132, 199, 0.06) !important;
    color: var(--primary) !important;
    transform: none !important;
}

/* Premium Card visual highlights */
.software-card .benefit-card {
    position: relative !important;
    overflow: hidden !important;
    border-top: 3px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.software-card .benefit-card:hover {
    border-top: 3px solid var(--primary) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(2, 132, 199, 0.08) !important;
}

/* Card Icon visual glow & micro-animations */
.software-card .benefit-icon {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(2, 132, 199, 0.04) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.software-card .benefit-card:hover .benefit-icon {
    transform: scale(1.08) rotate(8deg) !important;
    background: rgba(2, 132, 199, 0.08) !important;
}

/* Platform Badges glow & shadows */
.software-card .badge.bg-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.16) !important;
}

.software-card .badge.bg-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.16) !important;
}

/* Breadcrumb Navigation Glass Capsule */
.risorse-open-source-detail a.text-primary.text-decoration-none {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(2, 132, 199, 0.08) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
}

.risorse-open-source-detail a.text-primary.text-decoration-none:hover {
    background: rgba(2, 132, 199, 0.05) !important;
    border-color: rgba(2, 132, 199, 0.18) !important;
    padding-left: 16px !important;
    padding-right: 24px !important;
}

/* Premium Comparison Tables */
.risorse-open-source-detail table {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(2, 132, 199, 0.06) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
}

.risorse-open-source-detail table thead tr {
    background-color: rgba(2, 132, 199, 0.03) !important;
}

.risorse-open-source-detail table tbody tr:nth-of-type(even) {
    background-color: rgba(2, 132, 199, 0.01) !important;
}

.risorse-open-source-detail table tbody tr:hover {
    background-color: rgba(2, 132, 199, 0.02) !important;
    transition: background-color 0.2s ease !important;
}

.risorse-open-source-detail table td.text-primary.fw-bold {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Premium Timeline styling for LibreOffice Installation */
.installation-timeline {
    position: relative !important;
    padding-left: 28px !important;
    margin-left: 10px !important;
    border-left: 2px solid rgba(2, 132, 199, 0.1) !important;
}

.installation-timeline .timeline-step {
    position: relative !important;
    margin-bottom: 25px !important;
}

.installation-timeline .timeline-step::before {
    content: '' !important;
    position: absolute !important;
    left: -37px !important;
    top: 4px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 3px solid var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.08) !important;
    transition: all 0.3s ease !important;
}

.installation-timeline .timeline-step:hover::before {
    background: var(--primary) !important;
    transform: scale(1.1) !important;
}

/* Bulletproof Symmetrical Horizontal and Vertical Spacing for Open Source Cards */
#software-resource-grid {
    margin-left: -20px !important;
    margin-right: -20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

#software-resource-grid .software-card {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 30px !important; /* Space vertically as well */
}

/* Detach/space out filter button icons from text in platform filter */
#os-filter-controls .btn i {
    margin-right: 8px !important;
}

/* Elite Outline-Glass Platform Badges (Pastel elegant look) */
.software-card .badge.bg-primary {
    background: rgba(14, 165, 233, 0.08) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.3px !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    text-transform: capitalize !important;
}

.software-card .badge.bg-secondary {
    background: rgba(148, 163, 184, 0.08) !important;
    color: #475569 !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.3px !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    text-transform: capitalize !important;
}

/* ==========================================================================
   SAAS COMPARISON TABLE OVERHAUL (SaaS Pricing Matrix Style)
   ========================================================================== */

.comparison-card {
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(2, 132, 199, 0.12) !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 28px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.comparison-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(2, 132, 199, 0.22) !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.07) !important;
}

/* Premium comparison table typography and spacing */
.comparison-premium-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.comparison-premium-table th {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--text-main) !important;
    padding: 14px 10px !important;
    border-bottom: 2px solid rgba(2, 132, 199, 0.1) !important;
}

.comparison-premium-table td {
    padding: 14px 10px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    vertical-align: middle !important;
}

.comparison-premium-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Highlighted Column Styling to make the Open Source software stand out */
.comparison-premium-table th.highlight-column {
    background: rgba(2, 132, 199, 0.04) !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
}

.comparison-premium-table td.highlight-column {
    background: rgba(2, 132, 199, 0.02) !important;
    font-weight: 600 !important;
}

.comparison-premium-table tr:last-child td.highlight-column {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.comparison-premium-table .feature-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    font-size: 0.88rem !important;
}

/* Elite badge capsules inside the tables */
.badge-premium {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    border-radius: 50rem !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.badge-premium i {
    font-size: 0.85rem !important;
}

.badge-premium-success {
    background: rgba(34, 197, 94, 0.08) !important;
    color: #16a34a !important;
    border-color: rgba(34, 197, 94, 0.18) !important;
}

.badge-premium-success i {
    color: #16a34a !important;
}

.badge-premium-danger {
    background: rgba(244, 63, 94, 0.08) !important;
    color: #e11d48 !important;
    border-color: rgba(244, 63, 94, 0.18) !important;
}

.badge-premium-danger i {
    color: #e11d48 !important;
}

.badge-premium-warning {
    background: rgba(245, 158, 11, 0.08) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.18) !important;
}

.badge-premium-warning i {
    color: #d97706 !important;
}

.badge-premium-info {
    background: rgba(14, 165, 233, 0.08) !important;
    color: #0284c7 !important;
    border-color: rgba(14, 165, 233, 0.18) !important;
}

.badge-premium-info i {
    color: #0284c7 !important;
}

.badge-premium-muted {
    background: rgba(148, 163, 184, 0.08) !important;
    color: #475569 !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

.badge-premium-muted i {
    color: #475569 !important;
}

/* Subtly scale row on hover for high-end micro-interaction */
.comparison-premium-table tbody tr:hover td {
    background-color: rgba(2, 132, 199, 0.02) !important;
    transition: background-color 0.2s ease !important;
}

.comparison-premium-table tbody tr:hover td.highlight-column {
    background-color: rgba(2, 132, 199, 0.04) !important;
}

/* Elite Mobile-Responsive stacked visual lists */
@media (max-width: 767px) {
    .comparison-premium-table, 
    .comparison-premium-table tbody, 
    .comparison-premium-table tr { 
        display: block !important; 
        width: 100% !important;
    }
    
    .comparison-premium-table thead { 
        display: none !important; /* Hide standard headers */
    }
    
    .comparison-premium-table tr {
        border-bottom: 2px solid rgba(2, 132, 199, 0.06) !important;
        padding: 16px 0 !important;
        display: block !important;
    }
    
    .comparison-premium-table tr:last-child {
        border-bottom: none !important;
    }
    
    .comparison-premium-table td { 
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 8px !important;
        border-bottom: none !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }
    
    /* Make the feature name act as a section divider heading */
    .comparison-premium-table td.feature-name {
        font-family: 'Outfit', sans-serif !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        color: var(--primary) !important;
        background: rgba(2, 132, 199, 0.04) !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        text-align: left !important;
        display: block !important;
    }
    
    .comparison-premium-table td::before { 
        content: attr(data-label) !important;
        font-weight: 800 !important;
        font-family: 'Outfit', sans-serif !important;
        color: var(--text-muted) !important;
        font-size: 0.72rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        text-align: left !important;
        display: inline-block !important;
    }
    
    .comparison-premium-table td.feature-name::before {
        display: none !important;
    }
    
    /* Keep highlight column backgrounds transparent and clean in vertical mode */
    .comparison-premium-table td.highlight-column {
        background: transparent !important;
    }
    
    /* Add a clean micro separator line between choices */
    .comparison-premium-table td.highlight-column {
        border-bottom: 1px dashed rgba(2, 132, 199, 0.04) !important;
        margin-bottom: 4px !important;
        padding-bottom: 12px !important;
    }
}