:root {

			--primary: #0c3c63;

			--primary-dark: #082a46;

			--accent: #1f9d3a;

			--accent-soft: rgba(31, 157, 58, 0.08);

			--text: #17324a;

			--muted: #617487;

			--border: #d9e5ef;

			--white: #ffffff;

			--bg: #f4f8fc;

			--shadow: 0 18px 45px rgba(12, 60, 99, 0.10);

			--radius-lg: 22px;

			--radius-md: 16px;

			--radius-sm: 12px;

			--container: 1220px;

		}

		/* SECTION */

		.document-section-wrapper {

			width: 100%;

			background: var(--bg);

			padding: 40px 20px;

			border-radius: var(--radius-lg);

		}

		/* GRID */

		.document-grid {

			max-width: var(--container);

			margin: auto;

			display: grid;

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

			gap: 24px;

			align-items: stretch;

		}

		/* CARD */

		.document-card {

			background: var(--white);

			border: 1px solid var(--border);

			border-radius: var(--radius-md);

			padding: 24px;

			box-shadow: var(--shadow);

			transition: 0.3s ease;

			height: 100%;

			display: flex;

			flex-direction: column;

		}

		.document-card:hover {

			transform: translateY(-5px);

		}

		/* HEADING */

		.document-card p {

			font-size: 20px;

			line-height: 28px;

			color: var(--primary);

			margin-bottom: 18px;

			font-weight: 700;

		}

		/* LIST */

		.document-card ol {

			padding-left: 20px;

			margin: 0;

		}

		.document-card ol li {

			color: var(--text);

			line-height: 1.7;

			font-size: 15px;

		}

		.document-card ol li:last-child {

			margin-bottom: 0;

		}

		/* LINKS */

		.document-card a {

			color: var(--accent);

			text-decoration: none;

			font-weight: 600;

		}

		.document-card a:hover {

			text-decoration: underline;

		}

		body.dark-mode .document-section-wrapper {

			background: #081521;

		}

		body.dark-mode .document-card {

			background: #102234;

			border-color: #284158;

			box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);

		}

		body.dark-mode .document-card p {

			color: #ffffff;

		}

		body.dark-mode .document-card ol li {

			color: #d7e5f2;

		}

		body.dark-mode .document-card a {

			color: #49d86c;

		}

		body.dark-mode .document-card a:hover {

			color: #7ef29b;

		}

		/* TABLET */

		@media(max-width:992px) {

			.document-grid {

				gap: 18px;

			}

		}

		/* MOBILE */

		@media(max-width:768px) {

			.document-section-wrapper {

				padding: 25px 15px;

			}

			.document-grid {

				grid-template-columns: 1fr;

				gap: 16px;

			}

			.document-card {

				padding: 20px;

			}

			.document-card p {

				font-size: 18px;

				line-height: 26px;

			}

			.document-card ol li {

				font-size: 14px;

			}

		}