:root {
	--brand-blue: #0b1f3c;
	--brand-blue-dark: #08162e;
	--brand-blue-mid: #122a4f;
	--brand-text: #e9f1ff;
	--brand-muted: #c8d6f3;
	--brand-card: #0f2749;
	--brand-card-border: rgba(255, 255, 255, 0.06);
	--brand-accent: #f6b128;
}


section {
	background-color: var(--brand-blue-dark);
}

/* Padding */
.pt-custom {
	padding-top: 15rem;
}

.pb-custom {
	padding-bottom: 7rem;
}

/* Background */
.hero-bg {
	background: #05123f;
}

#blog-list {
	padding: 100px 0 !important;
	background-image: url('/wp-content/uploads/2022/03/BG-1.png');
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#blog-list .container {
	max-width: 1400px;
}

.blog-list-wrapper.blog-loading {
	filter: blur(5px);
	opacity: 0.6;
	pointer-events: none;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.blog-list-wrapper {
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.blog-list-wrapper .col {
	margin-top: 30px;
}

/* Glow utilities (Bootstrap doesn't include blur utilities) */
.bg-brand-accent {
	background-color: var(--brand-accent) !important;
}

.page-link-ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--brand-muted);
}

.hero-section {
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: "";
	position: absolute;
	top: 20%;
	left: 25%;
	width: 260px;
	height: 260px;
	background: #f6b128;
	/* primary color */
	opacity: 0.1;
	border-radius: 50%;
	filter: blur(80px);
	z-index: 0;
}

/* Right blurred circle */
.hero-section::after {
	content: "";
	position: absolute;
	bottom: 10%;
	right: 25%;
	width: 380px;
	height: 380px;
	background: #f6b128;
	/* primary color */
	opacity: 0.1;
	border-radius: 50%;
	filter: blur(100px);
	z-index: 0;
}

/* Keep content above circles */
.hero-section .container {
	position: relative;
	z-index: 1;
}

.hero-title {
	font-size: 60px !important;
	line-height: 60px !important;
}

.hero-subtitle {
	font-size: 20px;
	color: #fff;
	max-width: 48rem;
	margin: 0 auto;
}

/* Blog listing */
.section-header {
	margin-bottom: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.section-header h2 {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0;
	color: #ffffff;
}

.section-header p {
	margin: 0;
	color: var(--brand-muted);
	font-size: 0.95rem;
}

.blog-card {
	border: 1px solid var(--brand-card-border);
	border-radius: 0;
	overflow: hidden;
	background-color: var(--brand-card);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-card {
	position: relative;
}

.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.blog-card .card-img-overlay {
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.card-body {
	padding: 24px;
}

.card-body h3 {
	font-size: 25px;
	line-height: 1.5;
	margin-bottom: 16px;
	color: #fff;
	transition: all 0.5s ease;
}

.card-body p {
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 24px;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.card-body .btn {
	width: max-content;
	background-color: #FBB03A;
}


/* Custom ratio for 16/11 blog images */
.ratio-16x11 {
	--bs-aspect-ratio: calc(11 / 16 * 100%);
}

.card-img-top {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.blog-card:hover .card-img-top {
	transform: scale(1.1);

}

.blog-card:hover h3 {
	color: #f6b128;
}

.blog-card:hover .card-body .btn {
	background-color: #db9523;
}

.pagination .page-link:hover {
	color: #fff !important;
}

.pagination .page-link:hover span svg path {
	stroke: #fff;
}

/* old blog text/button helpers removed – Bootstrap utility classes now used directly */

/* Pagination */

.pagination .page-link {
	font-weight: 600;
	transition: all 0.5s ease;
	color: #d5d5d5 !important;
}

.pagination .page-link span svg path {
	stroke: #d5d5d5;
	transition: all 0.5s ease;
}

.pagination .page-item button span {
	margin-top: -3px;
}

.pagination .page-link span {
    width: auto;
    padding: 0 4px!important;
    top: 1px;
    position: relative;
}

.page-item.disabled {
  opacity: 60%;
}

.btn:focus,
.btn.focus {
	outline: 0;
	box-shadow: none;
}

.page-link:focus{
  outline: 0;
	box-shadow: none;
}
/* Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

@media(max-width:992px) {
	.hero-section {
		padding: 7rem 0 7rem;
	}

	#blog-list {
		padding: 60px 0 !important;
	}
}

@media (max-width: 767.98px) {
	.hero-section {
		padding: 3rem 0 2.25rem;
	}

	.hero-image-placeholder {
		margin-top: 2rem;
	}

	.hero-title {
		font-size: 48px !important;
		line-height: 48px !important;
	}
}

/* Editable Page Number Input */
.blog-page-input {
	-moz-appearance: textfield;
	appearance: textfield;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	outline: none;
	cursor: text;
	transition: all 0.3s ease;
	border-radius: unset;
}

.blog-page-input::-webkit-outer-spin-button,
.blog-page-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.blog-page-input:focus {
	border-color: var(--brand-accent) !important;
	box-shadow: 0 0 0 2px rgba(246, 177, 40, 0.2);
}

.blog-page-input:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.blog-page-input:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.7) !important;
}