.navbar {
			background-image: linear-gradient(to right, #5e239d, #b70468);
			z-index: 1000;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			margin-bottom: 0;
			padding: 0;
			display: flex !important;
			flex-direction: column !important;
		}

		.navbar-top {
			padding: 0.5rem 0;
		}

		.navbar-brand img {
			max-height: 50px;
		}

		.nav-link {
			color: white !important;
			font-weight: 500;
		}

		.nav-link:hover,
		.nav-link.active {
			color: #ffd700 !important;
		}

		.cluster-levels-container {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 12px;
			padding: 15px;
			margin: 0 auto;
			max-width: 1400px;
			width: 100%;
			overflow-x: auto;
			overflow-y: visible;
		}

		.cluster-item-wrapper {
			position: relative;
			max-width: calc(8.33% - 10px);
			width: 100px;
			z-index: 1;
		}

		.cluster-item-wrapper:hover {
			z-index: 10000;
		}

		.cluster-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 50px;
			font-size: 14px;
			font-weight: 600;
			text-align: center;
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 12px;
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(10px);
			color: white;
			text-decoration: none;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}

		.cluster-item:hover,
		.cluster-item.active {
			background: rgba(255, 255, 255, 0.95);
			color: #5e239d;
			transform: translateY(-3px);
			box-shadow: 0 6px 16px rgba(94, 35, 157, 0.3);
			border-color: rgba(255, 255, 255, 0.8);
		}

		.cluster-dropdown {
			display: none;
			position: fixed;
			min-width: 250px;
			max-width: 300px;
			background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
			border-radius: 12px;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px #5e239d;
			z-index: 99999 !important;
			max-height: 450px;
			overflow-y: auto;
			animation: slideDown 0.3s ease;
			padding: 8px 0;
			pointer-events: auto;
		}

		@keyframes slideDown {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}

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

		.cluster-item-wrapper:hover .cluster-dropdown,
		.cluster-dropdown:hover {
			display: block;
		}

		.cluster-dropdown a {
			display: block;
			padding: 12px 20px;
			color: #1a1a1a;
			text-decoration: none;
			font-size: 14px;
			font-weight: 500;
			border-bottom: 1px solid rgba(94, 35, 157, 0.1);
			transition: all 0.2s ease;
			position: relative;
		}

		.cluster-dropdown a:first-child {
			background: linear-gradient(to right, #5e239d, #b70468);
			color: white;
			border-radius: 8px 8px 0 0;
			font-weight: 700;
			border-bottom: 2px solid rgba(255, 255, 255, 0.3);
		}

		.cluster-dropdown a:first-child:hover {
			background: linear-gradient(to right, #4a1b7d, #96035a);
		}

		.cluster-dropdown a:last-child {
			border-bottom: none;
			border-radius: 0 0 8px 8px;
		}

		.cluster-dropdown a:not(:first-child):hover {
			background: linear-gradient(to right, #ffd700, #f8b400);
			color: #000;
			padding-left: 25px;
			transform: translateX(2px);
		}

		.cluster-dropdown a:not(:first-child):before {
			content: '▸';
			position: absolute;
			left: 10px;
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		.cluster-dropdown a:not(:first-child):hover:before {
			opacity: 1;
		}

		.cluster-dropdown a.report-link {
			background: linear-gradient(to right, #0077b5, #005885);
			color: white;
			font-weight: 600;
			margin-top: 5px;
			border-radius: 5px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}

		.cluster-dropdown a.report-link:hover {
			background: linear-gradient(to right, #005885, #003d5c);
			padding-left: 25px;
			color: white;
		}

		.cluster-dropdown a.report-link:before {
			content: '📊';
			left: 8px;
		}

		.dropdown-divider {
			height: 1px;
			background: rgba(94, 35, 157, 0.2);
			margin: 8px 15px;
		}

		.dropdown-section-label {
			padding: 8px 20px 5px;
			font-size: 11px;
			font-weight: 700;
			color: #999;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			background: #f8f9fa;
		}

		.cluster-levels-container::-webkit-scrollbar,
		.cluster-dropdown::-webkit-scrollbar {
			display: none;
		}

		body {
			padding-top: 160px;
			margin: 0;
			background: #ffffff;
		}

		/* Hero Banner */
		.hero-banner {
			position: relative;
			background: linear-gradient(135deg, #0d0d0d 0%, #1a0505 40%, #2b0000 100%);
			color: white;
			padding: 70px 20px 50px;
			text-align: center;
			overflow: hidden;
		}

		.hero-banner::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url('Images/middle_east_geopolitical_map.png') center/cover no-repeat;
			opacity: 0.18;
		}

		.hero-banner .badge-war {
			display: inline-block;
			background: linear-gradient(to right, #cc0000, #ff4444);
			color: white;
			font-weight: 700;
			font-size: 0.8rem;
			padding: 5px 14px;
			border-radius: 20px;
			letter-spacing: 1px;
			text-transform: uppercase;
			margin-bottom: 18px;
		}

		.hero-banner h1 {
			font-size: 2.8rem;
			font-weight: 800;
			margin-bottom: 12px;
			line-height: 1.15;
			position: relative;
			text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
		}

		.hero-banner p.lead {
			font-size: 1.1rem;
			color: #e0c8c8;
			max-width: 820px;
			margin: 0 auto 30px;
			position: relative;
			line-height: 1.7;
		}

		.back-overview-section {
			background: white;
			margin-top: 14px;
			padding: 18px 20px 26px;
		}

		.back-overview-panel {
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			justify-content: center;
		}

		.btn-back-overview {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 14px 26px;
			border-radius: 12px;
			text-decoration: none;
			font-weight: 600;
			font-size: 1.05rem;
			color: white;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			background: linear-gradient(to right, rgba(94, 35, 157, 0.85), rgba(183, 4, 104, 0.85));
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
		}

		.btn-back-overview:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
			background: linear-gradient(to right, rgba(94, 35, 157, 0.95), rgba(183, 4, 104, 0.95));
			color: white;
		}

		.middle-east-title-accent {
			color: #ff9999;
		}

		.middle-east-container {
			max-width: 1380px;
		}

		.img-panel-h340 {
			min-height: 340px;
		}

		.img-panel-h360 {
			height: 360px;
		}

		.img-panel-h310 {
			height: 310px;
		}

		.img-panel-h280 {
			height: 280px;
		}

		.hero-map-image {
			width: 100%;
			height: 430px;
			object-fit: cover;
			display: block;
		}

		.update-section-title {
			font-size: 0.86rem;
			font-weight: 800;
			color: #9a3412;
			text-transform: uppercase;
			letter-spacing: 0.04em;
		}

		.update-list {
			padding-left: 18px;
			margin: 0;
			font-size: 0.92rem;
			color: #3f3f46;
			line-height: 1.6;
		}

		.update-implication-note {
			font-size: 0.88rem;
			color: #78350f;
			background: rgba(146, 64, 14, 0.09);
			border-radius: 6px;
			padding: 8px 12px;
			line-height: 1.55;
			margin-top: 16px;
		}

		.impact-level {
			font-weight: 700;
		}

		.impact-critical {
			color: #dc2626;
		}

		.impact-high {
			color: #f59e0b;
		}

		.impact-medium {
			color: #3b82f6;
		}

		.impact-low {
			color: #10b981;
		}

		.chart-max-420 {
			max-height: 420px;
		}

		.chart-max-280 {
			max-height: 280px;
		}

		.alert-helium {
			background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
			border-left-color: #0e7490;
		}

		.alert-helium-title {
			color: #0e7490;
		}

		.section-title-gap {
			margin-top: 36px;
		}

		.timeline-intro-note {
			color: #666;
			margin-bottom: 28px;
			font-size: 0.97rem;
		}

		.mitigation-note {
			color: #555;
			margin-bottom: 28px;
			font-size: 0.97rem;
		}

		.refinery-note-text {
			font-size: 0.93rem;
			text-align: justify;
		}

		.risk-table {
			font-size: 0.9rem;
		}

		.risk-table-head {
			background: linear-gradient(to right, #45216f, #8f2d56);
			color: white;
		}

		.risk-col-wide {
			min-width: 200px;
		}

		.hero-banner .hero-stats {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 20px;
			position: relative;
			margin-top: 30px;
		}

		.hero-stat-box {
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 12px;
			padding: 16px 24px;
			text-align: center;
			min-width: 140px;
			backdrop-filter: blur(8px);
		}

		a.hero-stat-box {
			display: block;
			color: inherit;
			text-decoration: none;
			transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
		}

		a.hero-stat-box:hover,
		a.hero-stat-box:focus-visible {
			transform: translateY(-3px);
			box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
			border-color: rgba(255, 255, 255, 0.55);
			background: rgba(255, 255, 255, 0.14);
		}

		.hero-stat-box .stat-value {
			font-size: 1.9rem;
			font-weight: 800;
			color: #ff6666;
			display: block;
			line-height: 1;
		}

		.hero-stat-box .stat-label {
			font-size: 0.78rem;
			color: #ccc;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			margin-top: 5px;
		}

		/* Section styling */
		.section-block {
			padding: 52px 0;
			background: #f4f0f9;
		}

		.accordion-item {
			border: none;
			margin-bottom: 15px;
			border-radius: 10px !important;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		.accordion-button {
			background: linear-gradient(to right, #5e239d, #b70468);
			color: white;
			font-size: 1.25rem;
			font-weight: 700;
			padding: 20px 25px;
			border: none;
		}

		.accordion-button:not(.collapsed) {
			background: linear-gradient(to right, #4a1b7d, #96035a);
			color: white;
			box-shadow: none;
		}

		.accordion-button:focus {
			box-shadow: none;
			border: none;
		}

		.accordion-button::after {
			filter: brightness(0) invert(1);
		}

		.accordion-body {
			padding: 30px;
			background: white;
			font-size: 1.03rem;
			line-height: 1.7;
			color: #333;
		}

		.accordion-body ul {
			padding-left: 20px;
		}

		.accordion-body ul li {
			margin-bottom: 10px;
		}

		.section-title-bar {
			display: flex;
			align-items: center;
			gap: 14px;
			margin-bottom: 28px;
		}

		.section-title-bar .icon-badge {
			width: 48px;
			height: 48px;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.5rem;
			flex-shrink: 0;
		}

		.icon-badge-red {
			background: linear-gradient(135deg, #cc0000, #ff4444);
		}

		.icon-badge-orange {
			background: linear-gradient(135deg, #b45309, #f59e0b);
		}

		.icon-badge-purple {
			background: linear-gradient(135deg, #5e239d, #b70468);
		}

		.icon-badge-blue {
			background: linear-gradient(135deg, #1e40af, #3b82f6);
		}

		.icon-badge-green {
			background: linear-gradient(135deg, #065f46, #10b981);
		}

		.icon-badge-teal {
			background: linear-gradient(135deg, #0e7490, #22d3ee);
		}

		.section-title-bar h2 {
			font-size: 1.75rem;
			font-weight: 800;
			margin: 0;
			color: #1a1a1a;
		}

		/* Cards */
		.info-card {
			background: white;
			border-radius: 14px;
			box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
			border-left: 5px solid #5e239d;
			padding: 22px 24px;
			height: 100%;
			transition: transform 0.25s, box-shadow 0.25s;
		}

		.info-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 8px 24px rgba(94, 35, 157, 0.18);
		}

		.info-card.card-red {
			border-left-color: #cc0000;
		}

		.info-card.card-orange {
			border-left-color: #f59e0b;
		}

		.info-card.card-blue {
			border-left-color: #3b82f6;
		}

		.info-card.card-green {
			border-left-color: #10b981;
		}

		.info-card.card-teal {
			border-left-color: #0e7490;
		}

		.info-card h5 {
			font-weight: 700;
			color: #1a1a1a;
			margin-bottom: 12px;
			font-size: 1rem;
		}

		.info-card ul {
			padding-left: 18px;
			margin-bottom: 0;
		}

		.info-card ul li {
			margin-bottom: 8px;
			font-size: 0.95rem;
			line-height: 1.6;
			color: #444;
		}

		/* Alert banner */
		.alert-war {
			background: linear-gradient(135deg, #fff0f0, #ffe0e0);
			border-left: 6px solid #cc0000;
			border-radius: 10px;
			padding: 20px 24px;
			margin-bottom: 28px;
		}

		.alert-war h5 {
			color: #990000;
			font-weight: 700;
			margin-bottom: 10px;
		}

		.alert-war ul {
			margin: 0;
			padding-left: 20px;
			color: #333;
		}

		.alert-war ul li {
			margin-bottom: 6px;
			font-size: 0.95rem;
		}

		.latest-update-box {
			background: linear-gradient(135deg, #fff4d6, #ffe7c2);
			border-left: 6px solid #d97706;
			border-radius: 10px;
			padding: 18px 22px;
			margin-bottom: 18px;
			box-shadow: 0 3px 12px rgba(146, 64, 14, 0.12);
		}

		.latest-update-box h5 {
			color: #9a3412;
			font-weight: 800;
			margin-bottom: 8px;
		}

		.latest-update-box p {
			margin: 0 0 8px;
			color: #3f3f46;
			font-size: 0.95rem;
			line-height: 1.55;
		}

		.latest-update-box p:last-child {
			margin-bottom: 0;
		}

		.latest-update-box .update-meta {
			font-size: 0.84rem;
			font-weight: 700;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: #b45309;
		}

		.latest-update-box a {
			color: #7c2d12;
			font-weight: 700;
			text-decoration: underline;
		}

		.latest-update-box a:hover {
			color: #9a3412;
		}

		/* Impact timeline */
		.timeline-card {
			background: white;
			border-radius: 14px;
			box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
			padding: 26px 28px;
			height: 100%;
			border-top: 5px solid #5e239d;
		}

		.timeline-card.t-6mo {
			border-top-color: #f59e0b;
		}

		.timeline-card.t-12mo {
			border-top-color: #ef4444;
		}

		.timeline-card.t-24mo {
			border-top-color: #7c3aed;
		}

		.timeline-card .timeline-label {
			font-size: 0.72rem;
			font-weight: 800;
			letter-spacing: 1.2px;
			text-transform: uppercase;
			margin-bottom: 6px;
		}

		.timeline-card.t-6mo .timeline-label {
			color: #b45309;
		}

		.timeline-card.t-12mo .timeline-label {
			color: #b91c1c;
		}

		.timeline-card.t-24mo .timeline-label {
			color: #5b21b6;
		}

		.timeline-card h5 {
			font-size: 1.15rem;
			font-weight: 700;
			margin-bottom: 14px;
			color: #1a1a1a;
		}

		.timeline-card ul {
			padding-left: 18px;
			margin: 0;
		}

		.timeline-card ul li {
			margin-bottom: 8px;
			font-size: 0.93rem;
			color: #555;
			line-height: 1.55;
		}

		/* Risk matrix */
		.risk-cell {
			display: inline-block;
			min-width: 104px;
			border-radius: 10px;
			padding: 10px 12px;
			font-size: 0.85rem;
			font-weight: 800;
			text-align: center;
			border: 1px solid transparent;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
			line-height: 1.2;
		}

		.risk-cell small {
			display: block;
			margin-top: 3px;
			font-weight: 600;
			opacity: 0.9;
		}

		.risk-low {
			background: #e8f7ee;
			color: #166534;
			border-color: #b7e4c7;
		}

		.risk-medium {
			background: #fff4db;
			color: #b45309;
			border-color: #f7d8a8;
		}

		.risk-high {
			background: #ffe8ec;
			color: #be123c;
			border-color: #f8b4c0;
		}

		.risk-critical {
			background: #efe7ff;
			color: #5b21b6;
			border-color: #cbb5ff;
		}

		/* Chart container */
		.chart-container {
			background: white;
			border-radius: 16px;
			box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
			padding: 30px;
			margin-bottom: 24px;
		}

		.chart-container h5 {
			font-weight: 700;
			color: #1a1a1a;
			margin-bottom: 6px;
		}

		.chart-container p.chart-sub {
			font-size: 0.88rem;
			color: #666;
			margin-bottom: 20px;
		}

		/* Image panels */
		.img-panel {
			border-radius: 14px;
			overflow: hidden;
			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
			height: 100%;
			position: relative;
		}

		.img-panel img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.img-panel .img-caption {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent);
			color: white;
			padding: 14px 16px 12px;
			font-size: 0.82rem;
			font-style: italic;
		}

		/* Source buttons */
		.btn-source {
			color: #5e239d;
			border: 1.5px solid #5e239d;
			font-weight: 600;
			font-size: 0.82rem;
			transition: all 0.25s;
			margin: 3px;
			padding: 6px 14px;
			border-radius: 5px;
			background: white;
		}

		.btn-source:hover {
			background: linear-gradient(to right, #5e239d, #b70468);
			color: white;
			border-color: #5e239d;
			transform: translateY(-2px);
			box-shadow: 0 3px 8px rgba(94, 35, 157, 0.3);
		}
.btn-source-red {
			color: #cc0000;
			border-color: #cc0000;
		}

		.btn-source-red:hover {
			background: linear-gradient(to right, #990000, #cc0000);
			color: white;
			border-color: #cc0000;
		}

		.source-link-panel {
			background: rgba(255, 255, 255, 0.72);
			border: 1px solid rgba(94, 35, 157, 0.14);
			border-radius: 14px;
			padding: 16px;
			box-shadow: 0 10px 24px rgba(94, 35, 157, 0.08);
		}

		.source-link-panel h6 {
			margin: 0 0 12px;
			font-size: 0.8rem;
			font-weight: 800;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: #6b21a8;
		}

		.source-link-stack {
			display: grid;
			gap: 10px;
		}

		.source-link-stack .btn-source {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			margin: 0;
			padding: 10px 14px;
			border-radius: 10px;
			text-align: left;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		}

		/* Mitigation checklist */
		.mitigation-item {
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
			padding: 18px 20px;
			border-left: 4px solid #10b981;
			margin-bottom: 14px;
			display: flex;
			gap: 14px;
			align-items: flex-start;
		}

		.mitigation-item .mit-icon {
			font-size: 1.6rem;
			flex-shrink: 0;
			margin-top: 2px;
		}

		.mitigation-item h6 {
			font-weight: 700;
			color: #065f46;
			margin-bottom: 4px;
		}

		.mitigation-item p {
			margin: 0;
			font-size: 0.91rem;
			color: #444;
			line-height: 1.55;
		}

		/* Highlight banners */
		.highlight-banner {
			border-radius: 14px;
			padding: 24px 28px;
			margin-bottom: 0;
			color: white;
		}

		.hb-red {
			background: linear-gradient(135deg, #991b1b, #dc2626);
		}

		.hb-orange {
			background: linear-gradient(135deg, #92400e, #d97706);
		}

		.hb-purple {
			background: linear-gradient(135deg, #4c1d95, #7c3aed);
		}

		.hb-blue {
			background: linear-gradient(135deg, #1e3a8a, #2563eb);
		}

		.hb-teal {
			background: linear-gradient(135deg, #134e4a, #0d9488);
		}

		.highlight-banner h5 {
			font-weight: 800;
			font-size: 1.05rem;
			margin-bottom: 8px;
		}

		.highlight-banner p {
			margin: 0;
			font-size: 0.92rem;
			opacity: 0.92;
			line-height: 1.55;
		}

		.highlight-banner .hb-value {
			font-size: 2.2rem;
			font-weight: 800;
			line-height: 1;
			margin-bottom: 4px;
		}

		.footer {
			background: #111;
			color: #aaa;
			padding: 28px 20px;
			text-align: center;
			margin-top: 50px;
		}

		.footer p {
			margin: 0;
			font-size: 0.88rem;
		}

		@media (max-width: 768px) {
			.hero-banner h1 {
				font-size: 1.9rem;
			}

			.hero-stat-box {
				min-width: 110px;
			}
		}