:root {
    --color-primary: #005480;
    /* Dark Blue (ManageEngine-like) */
    --color-primary-dark: #004060;
    --color-secondary: #85c341;
    /* Bright Green (ManageEngine-like) */
    --color-text-main: #333333;
    --color-text-light: #666666;
    --color-bg-light: #f8f9fa;
    --color-white: #ffffff;
    --color-dark: #1a1a1a;

    --font-heading: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;

    --container-width: 1200px;
    --border-radius: 8px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--color-white);
}

img {
    max-width: 100%;
    height: auto;
}

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

a:hover {
    color: var(--color-primary-dark);
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #74b035;
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn-outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.text-center {
    text-align: center;
}

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.mb-4 {
    margin-bottom: var(--spacing-lg);
}

/* Header */
/* Fix for stutter: Use fixed position and body padding */
body {
    padding-top: 130px;
    /* Adjust based on initial header height */
}

header {
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    position: fixed;
    /* Changed from sticky to fixed */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 130px;
    /* Fixed initial height to prevent layout shifts */
}

header.scrolled {
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
    height: 80px;
    /* Contracted height */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center align text with logo */
    justify-content: center;
    line-height: 1;
    /* Tighten line height for grouping */
    text-decoration: none;
    /* Remove underline from link if wrapper is link */
}

.logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 90px;
    /* Increased from 70px */
    transition: height 0.3s ease;
    width: auto;
}

.partner-text {
    font-size: 0.75rem;
    /* Small, professional size */
    color: var(--color-text-light);
    font-weight: 500;
    margin-top: 4px;
    white-space: nowrap;
    /* Keep on one line */
    letter-spacing: 0.5px;
}

header.scrolled .logo img {
    height: 60px;
    /* Increased from 45px */
}

header.scrolled .partner-text {
    font-size: 0.65rem;
    /* Shrink text slightly on scroll or hide if needed */
    margin-top: 2px;
}

.footer-logo {
    height: 60px;
    /* Increased from 40px inline */
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* Navigation & Mega Menu */
.nav-links {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
    align-items: center;
    height: 100%;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-links a.nav-link {
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.5rem 0;
    position: relative;
}

.nav-links a.nav-link:hover {
    color: var(--color-primary);
}

.mobile-only-btn {
    display: none;
}

/* Mega Menu Container */
.mega-menu {
    position: fixed;
    top: 130px;
    /* Matches initial header height */
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border-top: 1px solid #eee;
    padding: 2rem 0;
    z-index: 999;
}

/* Adjust top when header is scrolled */
header.scrolled .mega-menu {
    top: 80px;
}

/* Hover State */
.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Contact Dropdown (Simple) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    min-width: 200px;
    box-shadow: var(--shadow-md);
    border-radius: var(--border-radius);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.dropdown-menu a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

/* Mega Menu Grid Styling */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.mega-grid-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.mega-col h3 {
    color: var(--color-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.mega-col ul {
    list-style: none;
}

.mega-col ul li {
    margin-bottom: 0.5rem;
}

.mega-col ul li a {
    color: var(--color-text-light);
    font-size: 0.95rem;
    transition: color 0.2s;
}

.mega-col ul li a:hover {
    color: var(--color-primary);
    padding-left: 5px;
    /* Subtle nudge */
}

.nav-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Category Quick Links (New Section) */
.category-quick-links {
    padding: 2rem 0;
    /* Reduced padding for tightness */
    background: var(--color-white);
    border-bottom: 1px solid #eee;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    text-align: center;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: var(--border-radius);
    transition: all 0.2s;
    color: var(--color-text-main);
}

.category-item:hover {
    background: var(--color-bg-light);
    transform: translateY(-3px);
    color: var(--color-primary);
}

.category-item i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.category-item span {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Hero Section */
.hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, #cfd8e3 0%, #ffffff 100%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-content h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    font-weight: 300;
}

.hero-text {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

.hero-video {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #000;
}

/* Features Section (Why Buy Local) */
.features {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.feature-card {
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    text-align: left;
    transition: transform 0.2s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
}

.feature-icon {
    font-size: 2rem;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Solutions Grid */
.solutions {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.solutions h2 {
    color: var(--color-white);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.solution-card {
    background: #ffffff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
    /* Ensure anchor behaves like block */
    height: 100%;
}

.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.solution-card h3 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-secondary);
    /* Pop color */
}

.solution-card p {
    color: #555555;
    /* Darker grey for visibility */
    font-size: 0.95rem;
    line-height: 1.5;
}

.solution-desc {
    color: #555555;
}

/* Footer */
footer {
    background: var(--color-dark);
    color: #adb5bd;
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-col h4 {
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col a {
    color: #adb5bd;
}

.footer-col a:hover {
    color: var(--color-white);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    body {
        padding-top: 80px;
        /* Reduced specific for mobile if needed, or keep 130 */
    }

    header {
        height: 80px;
        /* Smaller header on mobile by default */
        padding: 0.5rem 0;
    }

    header .container {
        justify-content: space-between;
        position: relative;
    }

    .logo img {
        height: 50px;
        /* Smaller logo */
    }

    /* Hide Desktop Links by default on mobile, but prepare for toggle */
    .nav-links {
        position: fixed;
        right: 0px;
        height: calc(100vh - 80px);
        /* Full height minus header */
        top: 80px;
        background-color: var(--color-white);
        display: flex;
        /* Changed from none to flex for the drawer */
        flex-direction: column;
        align-items: center;
        width: 100%;
        /* or 50% */
        transform: translateX(100%);
        /* Hide off screen */
        transition: transform 0.3s ease-in-out;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        padding-top: 2rem;
        overflow-y: auto;
        /* Allow scrolling if menu is long */
        z-index: 998;
    }

    /* Active State for Mobile Menu */
    .nav-links.nav-active {
        transform: translateX(0%);
    }

    .nav-links li {
        opacity: 0;
        /* Fade in effect */
        animation: navLinkFade 0.5s ease forwards 0.3s;
    }

    .nav-links .nav-item {
        height: auto;
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 2rem;
    }

    /* Modify Dropdowns/MegaMenus for Mobile */
    .mega-menu,
    .dropdown-menu {
        position: static;
        /* Stack naturally */
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        width: 100%;
        border-top: none;
        padding: 0;
        display: none;
        /* Hide by default to save space, maybe click to expand? */
        /* For MVP Mobile: Just hiding mega menus or list them flat? 
           Let's just hide complex mega menus for this specific iteration 
           and assume top-level link works, or simple list.
           Re-enabling 'display: flex' for mega-grid would be huge. 
           Let's simply hide them for now or just show top links. 
           Wait, user wants navigation. 
           Let's allow them to be seen.
        */
        display: block;
        background: var(--color-bg-light);
    }

    .mega-grid {
        grid-template-columns: 1fr;
        /* Stack columns */
        gap: 1rem;
        padding: 0 1rem;
    }

    .mega-col h3 {
        margin-top: 1rem;
    }

    /* Hamburger Styling */
    .hamburger {
        display: block;
        /* Visible on mobile */
        cursor: pointer;
        font-size: 1.5rem;
        color: var(--color-primary);
        margin-left: 1rem;
    }

    /* Hide the desktop Nav Actions if they don't fit, 
       or move them to bottom of nav-links via JS? 
       For now, let's keep them small or hide "Get Quote" 
    */
    .nav-actions {
        display: none;
        /* Hide buttons on mobile header to save space */
    }

    /* Show buttons inside the menu? 
    /* Show buttons inside the menu? 
       We would need to duplicate them in HTML or move them via JS.
       For this Step, let's just leave them hidden on top bar 
       and assume user clicks 'Contact' in menu.
    */

    /* Fix Hero on Mobile */
    .hero .container {
        grid-template-columns: 1fr;
    }

    .hero-content {
        order: 1;
    }
}

@media screen and (min-width: 769px) {
    .hamburger {
        display: none;
    }
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

/* Section Container Shared Utility */
.section-container {
    padding: 6rem 0;
}

/* Tab Control System */
/* --- Legacy Tab System (Do Not Remove - Used by existing pages) --- */
.tabs-container {
    width: 100%;
    margin-top: 2rem;
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 2rem;
    background: #f8f9fa;
}

/* Note: Legacy pages use .tab-link too, but the styles are compatible if we ensure .tabs-nav buttons work */
.tabs-nav .tab-link {
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    font-size: 1rem;
    font-family: var(--font-heading);
}

.tabs-nav .tab-link:hover {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.02);
}

.tabs-nav .tab-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: #fff;
}

/* Legacy panels are .tab-content */
.tab-content {
    display: none;
    /* Hidden by default */
    padding: 1rem;
    animation: fadeIn 0.4s ease-out;
}

.tab-content.active {
    display: block;
}

/* --- New IT Analytics Tab System --- */
.tabs {
    width: 100%;
    margin-top: 2rem;
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.tab-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    border-bottom: 2px solid #e0e0e0;
    background: #f8f9fa;
}

.tab-links li {
    margin: 0;
}

.tab-links a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    /* Reset if it was a button */
    font-size: 1rem;
    font-family: var(--font-heading);
}

.tab-links a:hover {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.02);
}

.tab-links li.active a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: #fff;
}

/* New Wrapper for panels */
.tab-panels {
    padding: 1rem;
}

/* New Panels */
.tab {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.tab.active {
    display: block;
}

/* Shared utility */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Content Typography (Shared) */
.tab-content h2,
.tab-panels h2 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.tab-content h3,
.tab-panels h3 {
    color: var(--color-primary-dark);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.tab-content p,
.tab-panels p {
    margin-bottom: 1rem;
    color: var(--color-text-main);
}

.tab-content ul,
.tab-panels ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.tab-content li,
.tab-panels li {
    margin-bottom: 0.5rem;
}

/* Table Styling for Requirements */
.tab-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.tab-content th,
.tab-content td {
    padding: 12px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.tab-content th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* Pricing Cards inside Tabs */
.pricing-table {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.plan {
    flex: 1;
    min-width: 300px;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    padding: 2rem;
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.plan-header h3 {
    margin-top: 0;
}

.plan-price {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: bold;
    margin: 1rem 0;
}

.plan-features {
    margin: 1.5rem 0;
}

.plan-features ul {
    display: inline-block;
    text-align: left;
    margin: 0;
    padding-left: 1.5rem;
    /* Ensure bullets are inside visually or have space */
}

.plan-features li {
    margin-bottom: 0.5rem;
}

.price-unit {
    font-size: 1rem;
    vertical-align: top;
}

.price-label {
    font-size: 0.9rem;
    color: #666;
    display: block;
    font-weight: normal;
}

.plan-footer .btn {
    margin-top: 1rem;
    width: 100%;
}

/* =========================================
   Product Page Specifics (Analytics/Cloud)
   ========================================= */

/* Product Title Block */
.title-block {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.product-logo {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.title-block h1 {
    margin: 0;
    line-height: 1.1;
}

/* Responsive Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sidebar Layout System */
.sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.sidebar {
    width: 300px;
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    min-width: 0;
    /* Important for flex child text wrapping */
}

.sidebar-widget {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 1px solid #e0e0e0;
}

.sidebar-widget h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

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

.check-list li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--color-text-main);
}

.check-list li i {
    color: var(--color-secondary);
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

/* Mobile Responsiveness for Layouts */
.list-icons {
    padding-left: 0;
    list-style: none;
    /* Removes default bullets */
}

/* Make sure text aligns properly with icons if needed */
.list-icons li {
    position: relative;
    padding-left: 1.5rem;
    /* Or adjust based on icon size */
    margin-bottom: 0.5rem;
}

.list-icons li i {
    position: absolute;
    left: 0;
    top: 4px;
    /* Align vertically with text */
    color: var(--color-primary);
    /* Default icon color */
}

.list-primary li i {
    color: var(--color-primary);
}

/* Mobile Responsiveness for Layouts */
@media screen and (max-width: 900px) {
    .sidebar-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        order: 2;
        /* Move sidebar below content on mobile if desired, or keep top */
        /* Currently keeping top order (default) as per DOM, but let's see. 
           User usually wants content first on mobile. */
    }

    .main-content {
        width: 100%;
        order: 1;
    }

    .sidebar-widget {
        margin-top: 2rem;
    }
}

/* Background Utilities */
.bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.bg-primary h3,
.bg-primary h2,
.bg-primary h4,
.bg-primary a,
.bg-primary span {
    color: var(--color-white) !important;
}

/* CSS Grid System for Bootstrap Compatibility (Legacy Content Support) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-12,
.col-lg-12,
.col-md-12,
.col-sm-12 {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-lg-8,
.col-lg-4,
.col-lg-3,
.col-lg-9,
.col-lg-6,
.col-lg-5,
.col-lg-7,
.col-md-8,
.col-md-4,
.col-md-3,
.col-md-9,
.col-md-6,
.col-md-5,
.col-md-7 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

.g-0 {
    margin-right: 0;
    margin-left: 0;
}

.g-0>.col,
.g-0>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.mt-3 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.text-primary {
    color: var(--color-primary);
}

.bg-light {
    background-color: var(--color-bg-light);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.rounded {
    border-radius: var(--border-radius);
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.gap-3 {
    gap: 1rem;
}

/* Added Utility Classes */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.text-white {
    color: var(--color-white) !important;
}

/* Sidebar Layout Pattern */
.sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    align-items: start;
}

.sidebar-widget {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.sidebar-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--color-primary);
}

.main-content {
    min-width: 0;
}

@media (max-width: 992px) {
    .sidebar-layout {
        grid-template-columns: 1fr;
    }
}


/* Pricing Cards */
.pricing-card {
    border: none;
    border-radius: var(--border-radius);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    position: relative;
    background: #fff;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.pricing-card .card-header {
    border-bottom: none;
    padding: 1rem 1rem;
    text-align: center;
    background: transparent;
}

.pricing-card .card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.pricing-card-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.pricing-card-title small {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-light);
    letter-spacing: normal;
}

/* Header Variants */
.pricing-card .pricing-header-standard {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: var(--color-text-main);
}

.pricing-card .pricing-header-professional {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #6da134 100%);
    color: var(--color-white) !important;
}

.pricing-card .pricing-header-professional h3 {
    color: var(--color-white) !important;
}

.pricing-card .pricing-header-enterprise {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white) !important;
}

.pricing-card .pricing-header-enterprise h3 {
    color: var(--color-white) !important;
}

/* List Styling */
.pricing-features-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

.pricing-features-list li:last-child {
    border-bottom: none;
}

.pricing-features-list li::before {
    content: "\f00c";
    /* FontAwesome Check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

/* Special Highlighting */
.pricing-card.highlight {
    border: 2px solid var(--color-secondary);
    transform: scale(1.05);
    z-index: 3;
}

.pricing-card.highlight:hover {
    transform: scale(1.05) translateY(-5px);
}

.best-value-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-secondary);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom-left-radius: 8px;
}

/* =========================================
   Solution Pages Styling
   (Moved from inline styles in solution-*.html)
   ========================================= */

.solution-hero {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 3rem 0;
    /* text-align: center; Removed for 2-col layout */
}

.benefit-card {
    padding: 2rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.2s;
}

.benefit-card:hover {
    transform: translateY(-5px);
}

.benefit-icon {
    font-size: 2.5rem;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

.related-product-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.related-product-card:hover {
    border-color: var(--color-primary);
    background: #f8f9fa;
}

/* Grid Utilities */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .solution-hero {
        text-align: center;
    }

    .solution-hero .row {
        flex-direction: column;
    }

    .solution-hero img {
        margin-top: 2rem;
    }
}

.related-product-logo {
    width: 180px;
    /* Increased size */
    height: auto;
    max-height: 100px;
    object-fit: contain;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.related-product-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

.related-product-card p {
    font-size: 1.05rem;
    line-height: 1.5;
}

.hero-btn {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border: none !important;
    /* Ensure no outline border overrides */
}

.hero-btn:hover {
    background-color: #74b035 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Footer CTA Buttons */
a.footer-cta-quote {
    background: white !important;
    color: #00467f !important;
    /* Explicit Dark Blue */
    /* Hardcoded Dark Blue for visibility */
    border: 2px solid white !important;
    font-weight: 700;
    transition: all 0.3s ease !important;
}

.footer-cta-quote:hover {
    background: transparent !important;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.footer-cta-demo {
    border: 2px solid white !important;
    color: white !important;
    font-weight: 700;
    transition: all 0.3s ease !important;
}

.footer-cta-demo:hover {
    background: white !important;
    color: #005480 !important;
    /* Hardcoded Dark Blue */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}