/* === Universal box-sizing for more predictable layouts === */
	    * {
	        box-sizing: border-box;
	    }

	    body { 
	        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; 
	        line-height: 1.6; 
	        margin: 0; 
	        padding: 0; 
	        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	        min-height: 100vh;
	        color: #2d3748;
	    }
    
		body a:visited {
		        color: #667eea;
		    }
			
		body a {
		        color: #667eea;
		    }
	
	    /* Header and Menu Styles */
	    .site-header {
	        background: rgba(255, 255, 255, 0.95);
	        backdrop-filter: blur(10px);
	        -webkit-backdrop-filter: blur(10px);
	        padding: 20px 30px;
	        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	        margin-bottom: 20px;
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        position: sticky;
	        top: 0;
	        width: 100%;
	        z-index: 1000;
	        border-bottom: 1px solid rgba(255,255,255,0.2);
	    }
	    .site-logo {
	        font-size: 1.8em;
	        font-weight: 700;
	        color: #2d3748;
	        text-decoration: none;
	        flex-shrink: 0;
	        margin-right: 20px;
	        transition: all 0.3s ease;
	    }
	    .site-logo:hover {
	        color: #667eea;
	        transform: translateY(-2px);
	    }

	    /* Main Navigation (Desktop) */
	    .main-navigation {
	        display: flex;
	        flex-grow: 1;
	        justify-content: flex-end;
	        align-items: center;
	        min-width: 0;
	        overflow: visible;
	    }
	    .main-navigation ul {
	        list-style: none;
	        padding: 0;
	        margin: 0;
	        display: flex;
	        gap: 8px;
	        flex-wrap: nowrap;
	    }

	    .main-navigation li {
	        position: relative;
	        flex-shrink: 0;
	    }
	    .main-navigation li a {
	        padding: 12px 18px;
	        color: #4a5568;
	        text-decoration: none;
	        display: block;
	        white-space: nowrap;
	        border-radius: 12px;
	        font-weight: 500;
	        transition: all 0.3s ease;
	        background: rgba(255,255,255,0.7);
	        border: 1px solid rgba(255,255,255,0.3);
	    }
	    .main-navigation li a:visited {
	        color: #4a5568;
	    }
	    .main-navigation li a:hover,
	    .main-navigation li a.active {
	        color: #667eea;
	        background: rgba(102, 126, 234, 0.1);
	        border-color: rgba(102, 126, 234, 0.3);
	        transform: translateY(-2px);
	        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
	    }

	    /* Dropdown Menu Styles */
	    .main-navigation .has-dropdown > .desktop-only-dropdown-toggle::after {
	        content: ' ▼';
	        font-size: 0.7em;
	        vertical-align: middle;
	        margin-left: 5px;
	        transition: transform 0.2s;
	    }
	    .main-navigation .has-dropdown.open > .desktop-only-dropdown-toggle::after {
	        transform: rotate(180deg);
	    }

	    .main-navigation .submenu {
	        display: none;
	        position: absolute;
	        top: 100%;
	        right: 0;
	        background: rgba(255, 255, 255, 0.95);
	        backdrop-filter: blur(10px);
	        -webkit-backdrop-filter: blur(10px);
	        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
	        list-style: none;
	        padding: 8px 0;
	        margin: 0;
	        min-width: 220px;
	        z-index: 2000;
	        border-radius: 16px;
	        max-height: 400px;
	        overflow-y: auto;
	        border: 1px solid rgba(255,255,255,0.3);
	        margin-top: 8px;
	    }
	    .main-navigation li:hover > .submenu,
	    .main-navigation li.open > .submenu {
	        display: block;
	    }
	    .main-navigation .submenu li a {
	        padding: 12px 20px;
	        color: #4a5568;
	        white-space: nowrap;
	        background: transparent;
	        border: none;
	        border-radius: 8px;
	        margin: 2px 8px;
	    }
	    .main-navigation .submenu li a:visited {
	        color: #4a5568;
	    }
	    .main-navigation .submenu li a:hover {
	        background: rgba(102, 126, 234, 0.1);
	        color: #667eea;
	        transform: none;
	        box-shadow: none;
	    }
	    .submenu-header {
	        color: #718096;
	        font-size: 0.85em;
	        padding: 12px 20px 8px;
	        margin-top: 10px;
	        border-bottom: 1px solid rgba(113, 128, 150, 0.2);
	        margin-bottom: 5px;
	        font-weight: 600;
	        text-transform: uppercase;
	        letter-spacing: 0.5px;
	    }
	    .submenu-divider {
	        border: 0;
	        border-top: 1px solid rgba(113, 128, 150, 0.2);
	        margin: 10px 8px;
	    }

	    /* Hamburger Menu Button */
	    .menu-toggle {
	        display: none;
	        flex-direction: column;
	        justify-content: space-around;
	        width: 30px;
	        height: 25px;
	        background: transparent;
	        border: none;
	        cursor: pointer;
	        padding: 0;
	        z-index: 1001;
	        margin-left: 15px;
	    }
	    .menu-toggle span {
	        display: block;
	        width: 100%;
	        height: 3px;
	        background: #4a5568;
	        border-radius: 3px;
	        transition: all 0.3s ease-in-out;
	    }

	    /* Hamburger icon to X transformation */
	    .menu-toggle.open span:nth-child(1) {
	        transform: translateY(11px) rotate(45deg);
	    }
	    .menu-toggle.open span:nth-child(2) {
	        opacity: 0;
	    }
	    .menu-toggle.open span:nth-child(3) {
	        transform: translateY(-11px) rotate(-45deg);
	    }

	    /* Main layout - now with cards */
	    .page-container {
	        max-width: 1400px;
	        margin: auto;
	        display: grid;
	        grid-template-columns: 1fr 350px;
	        gap: 30px;
	        padding: 0 30px;
	        align-items: start;
	    }
	    .main-content {
	        background: rgba(255, 255, 255, 0.95);
	        backdrop-filter: blur(10px);
	        -webkit-backdrop-filter: blur(10px);
	        padding: 40px;
	        border-radius: 24px;
	        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
	        border: 1px solid rgba(255,255,255,0.3);
	        min-height: 60vh;
	    }
	    .sidebar-wrapper {
	        position: sticky;
	        top: 120px;
	        align-self: flex-start;
	    }
    
	    /* Sidebar specific styles */
	    .sidebar {
	        background: rgba(255, 255, 255, 0.9);
	        backdrop-filter: blur(10px);
	        -webkit-backdrop-filter: blur(10px);
	        padding: 30px;
	        border-radius: 20px;
	        box-shadow: 0 16px 32px rgba(0,0,0,0.1);
	        border: 1px solid rgba(255,255,255,0.3);
	    }
	    .sidebar h3 { 
	        margin-top: 0; 
	        color: #2d3748;
	        font-weight: 700;
	        font-size: 1.25em;
	    }
	    .sidebar h4 { 
	        margin-bottom: 8px; 
	        color: #4a5568; 
	        font-weight: 600;
	        font-size: 1.1em;
	    }
	    .sidebar ul { 
	        list-style: none; 
	        padding-left: 0; 
	        margin: 0 0 25px 0; 
	    }
	    .sidebar li { 
	        padding: 6px 0; 
	        border-bottom: 1px solid rgba(113, 128, 150, 0.1);
	    }
	    .sidebar li:last-child {
	        border-bottom: none;
	    }
	    .sidebar li a { 
	        text-decoration: none; 
	        color: #667eea;
	        font-weight: 500;
	        transition: all 0.3s ease;
	        display: block;
	        padding: 8px 12px;
	        border-radius: 8px;
	        margin: -8px -12px;
	    }
	    .sidebar li a:visited {
	        color: #667eea;
	    }
	    .sidebar li a:hover { 
	        background: rgba(102, 126, 234, 0.1);
	        transform: translateX(4px);
	    }

	    /* Other existing styles with modern updates */
	    .uc-table { 
	        width: 100%; 
	        border-radius: 12px;
	        overflow: hidden;
	        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	    }
	    .uc-table td { 
	        padding: 16px; 
	        border-bottom: 1px solid rgba(113, 128, 150, 0.1);
	    }
	    .breadcrumbs ol { 
	        list-style: none; 
	        padding: 0; 
	        margin: 0 0 30px 0; 
	        background: rgba(255,255,255,0.5);
	        padding: 16px 20px;
	        border-radius: 12px;
	        backdrop-filter: blur(10px);
	    }
	    .breadcrumbs li { 
	        display: inline; 
	        color: #4a5568;
	        font-weight: 500;
	    }
	    .breadcrumbs li+li:before { 
	        padding: 8px; 
	        color: #718096; 
	        content: "/\00a0"; 
	    }
	    .conversion-table { 
	        width: 100%; 
	        max-width: 400px; 
	        border-collapse: separate;
	        border-spacing: 0;
	        text-align: center; 
	        margin-top: 20px; 
	        border-radius: 12px;
	        overflow: hidden;
	        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	    }
	    .conversion-table th, .conversion-table td { 
	        padding: 12px; 
	        border-bottom: 1px solid rgba(113, 128, 150, 0.1);
	    }
	    .conversion-table tr:nth-child(even){
	        background: rgba(102, 126, 234, 0.05);
	    }
	    .conversion-table th { 
	        background: rgba(102, 126, 234, 0.1); 
	        font-weight: 600;
	        color: #4a5568;
	    }

	    /* Remove the dotted line for cleaner modern look */
	    @media (min-width: 769px) {
	        .main-content {
	            /* Removed dotted border for cleaner look */
	        }
	    }

	    /* Mobile Responsiveness */
	    @media (max-width: 768px) {
	        body {
	            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	        }
	        .site-header {
	            justify-content: space-between;
	            align-items: center;
	            padding: 15px 20px;
	            position: fixed;
	            top: 0;
	            left: 0;
	            right: 0;
	            z-index: 1001; /* Higher than menu */
	            background: rgba(255, 255, 255, 0.98);
	            backdrop-filter: blur(20px);
	            -webkit-backdrop-filter: blur(20px);
	            display: flex;
	        }
	        .site-logo {
	            margin-right: 0;
	            font-size: 1.5em;
	            flex-shrink: 0;
	            order: 1; /* Ensure logo comes first */
	        }
	        .menu-toggle {
	            display: flex;
	            margin-left: 0;
	            position: relative;
	            z-index: 1002; /* Ensure hamburger is always clickable */
	            order: 2; /* Ensure hamburger comes after logo */
	            flex-shrink: 0;
	        }
	        .main-navigation {
	            display: none;
	            width: 100vw;
	            height: 100vh;
	            flex-direction: column;
	            position: fixed;
	            top: 0;
	            left: 0;
	            background: rgba(255, 255, 255, 0.98);
	            backdrop-filter: blur(20px);
	            -webkit-backdrop-filter: blur(20px);
	            box-shadow: none;
	            padding: 0;
	            overflow: hidden; /* Prevent body overflow */
	            z-index: 1000;
	        }
	        .main-navigation.menu-open {
	            display: flex;
	        }
	        
	        /* Scrollable content area within the menu */
	        .main-navigation ul {
	            flex-direction: column;
	            width: 100%;
	            align-items: flex-start;
	            gap: 2px;
	            padding: 80px 10px 30px 10px; /* Top padding for header space */
	            min-height: auto;
	            overflow-y: auto;
	            -webkit-overflow-scrolling: touch;
	            height: 100vh;
	            box-sizing: border-box;
	        }
	        .main-navigation li {
	            width: 100%;
	        }
	        .main-navigation li a {
	            padding: 10px 24px;
	            width: 100%;
	            text-align: left;
	            box-sizing: border-box;
	            white-space: normal;
	            background: transparent;
	            border: none;
	            border-radius: 8px;
	            margin: 1px 12px;
	            font-size: 16px;
	        }
	        .main-navigation .has-dropdown > .desktop-only-dropdown-toggle::after {
	            display: none;
	        }
	        .main-navigation .submenu {
	            position: static;
	            display: flex;
	            flex-direction: column;
	            width: 100%;
	            padding: 0;
	            box-shadow: none;
	            border-radius: 0;
	            max-height: none;
	            overflow-y: visible;
	            background: rgba(102, 126, 234, 0.05);
	            margin: 4px 12px 8px 12px;
	            border: none;
	        }
	        .main-navigation .submenu li a {
	            padding: 8px 24px 8px 36px;
	            margin: 1px 8px;
	            font-size: 15px;
	        }
	        .submenu-header {
	            padding: 8px 20px 6px 28px;
	            font-size: 0.8em;
	        }
	        .page-container {
	            display: block;
	            padding: 0 20px;
	            margin-top: 75px; /* Account for fixed header */
	        }
	        .main-content {
	            padding: 30px 25px;
	            margin-bottom: 20px;
	            border-radius: 20px;
	        }
	        .sidebar-wrapper {
	            position: static;
	            width: 100%;
	            margin-top: 0;
	        }
	        .sidebar {
	            padding: 25px 20px;
	            border-radius: 20px;
	        }
	        #activeMoreDropdown {
	            display: none !important;
	        }
	    }

	        /* Prevent body scroll when mobile menu is open - IMPROVED */
	        body.menu-open {
	            overflow: hidden;
	            position: fixed;
	            width: 100%;
	            height: 100%;
	        }
	    @keyframes fadeInUp {
	        from {
	            opacity: 0;
	            transform: translateY(20px);
	        }
	        to {
	            opacity: 1;
	            transform: translateY(0);
	        }
	    }

	    .main-content, .sidebar {
	        animation: fadeInUp 0.6s ease-out;
	    }

	    .sidebar {
	        animation-delay: 0.2s;
	    }

	    /* Scrollbar styling for webkit browsers */
	    ::-webkit-scrollbar {
	        width: 8px;
	    }
	    ::-webkit-scrollbar-track {
	        background: rgba(255,255,255,0.1);
	        border-radius: 4px;
	    }
	    ::-webkit-scrollbar-thumb {
	        background: rgba(102, 126, 234, 0.3);
	        border-radius: 4px;
	    }
	    ::-webkit-scrollbar-thumb:hover {
	        background: rgba(102, 126, 234, 0.5);
	    }