:root{ --bs-primary-rgb: 19, 45, 124; }

.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 8px; padding: 12px 24px; font-size: 16px; cursor: pointer; transition: 0.3s; border: none; }
.btn-primary { background: var(--hr-secondary-color); color: #fff; }
.btn-primary:hover { background: #0062cc; color: #fff; }
.btn-outline { background: #fff; border: 1px solid #ddd; color: #333; }
.btn-outline:hover { background: #f5f5f5; }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; border: 1px solid #ccc; cursor: pointer; transition: all 0.3s; background-color: #fff; color: var(--hr-secondary-color); }
.btn-secondary:hover { background-color: #f3f4f6; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

.sec-padded{ padding: 60px 0; }
.sec-padded-40{ padding: 40px 0; }

.heading h1 { margin-bottom: .5em; font-size: 52px; }
.heading h2 { margin-bottom: .45em; font-size: 38px; }
.heading p { font-size: 20px; max-width: 1000px; margin: 0 auto 1.25em; }
.heading .highlight { color: var(--hr-secondary-color);  }

.hero-section { background: #132d7c; text-align: center; color: #fff; }
.hero-section .heading h1 { color: #fff; margin-bottom: .3em; }
.hero-section .heading p { font-size: 20px; color: #fffc; max-width: 900px; margin: 0 auto 1.5em; }

@media screen and (max-width: 991px){
	.sec-padded { padding: 40px 0; }
	.sec-padded-40{ padding: 30px 0; }

	.heading h2 { font-size: 30px; }
	.heading p { font-size: 18px; }
}


@media screen and (max-width: 450px){
	.sec-padded { padding: 30px 0; }
	.sec-padded-40{ padding: 20px 0; }

	.heading h1 { font-size: 38px; }
	.heading h2 { font-size: 24px; }
	
	.heading p { font-size: 16px; }
}

/* --- Category List --- */
.categories-list {display: flex; justify-content: center; }
.categories-list>ul {display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.categories-list>ul>li.cat-item .cat-link { padding: 4px 12px; border-radius: 6px; display: flex; background-color: #132d7c; color: #FFFD; border:1px solid #FFF4; }
.categories-list>ul>li.cat-item .cat-link:hover { background-color: #fffE; color: #1b2374; border-color: #FFFD; }

.blog-category-list { display: none;} 
.categories-list ul{ position: relative; }
.more-category .blog-category-more-list { position: absolute; top: 44px; right: -30px; min-width: 270px; background-color: #FFF; border: 1px solid #0002; z-index: 3; border-radius: 10px; overflow: hidden; border-radius: 8px; }
.more-category .blog-category-more-list ul { max-height: 300px; overflow: auto; cursor: default; padding:0; display: block; max-width: inherit; }
.more-category .blog-category-more-list ul li { display: block; cursor: default }
.more-category .blog-category-more-list ul li .cat-link { display: block; padding: 0; margin-bottom: 2px; border-radius:0; background-color:transparent; color: var(--hr-primary-color); }
.more-category .blog-category-more-list ul li:last-child .cat-link{ margin: 0; }
.more-category .blog-category-more-list ul li .cat-link:hover { background-color: #132d7c10;  }
.more-category .blog-category-more-list ul li .cat-link.active { color: #ffffff; background-color: #132d7c;} 
.more-category .blog-category-more-link{ line-height: 1.4; }
.more-category .blog-category-more-link svg {font-size: 12px; margin-left: 8px;}
.more-category .blog-category-more-list ul::-webkit-scrollbar { width: 5px; right: 5px; }
.more-category .blog-category-more-list ul::-webkit-scrollbar-thumb { background: var(--hr-primary-color); border-radius: 4px;}
.more-category .blog-category-more-list ul::-webkit-scrollbar-thumb:hover { background: #1D1C39; } 

@media only screen and (min-width: 768px) {	
	.more-category { position: relative; } 
	.blog-category-list { display: flex; flex-wrap: wrap; align-items: center; row-gap: 15px; column-gap: 10px; position: relative; } 
	.blog-category-list .cat-item { font-size: 14px; border-radius: 30px; border: 1px solid #ffffff; color: #FFF; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; }
	.blog-category-list .cat-item.active, .blog-category-list .cat-item:hover { background-color: #ffffff; color: #1D1C39; transition: all .5s;}
	.more-category .blog-category-more-link { cursor: pointer; display: flex; align-items: center; }
}
@media only screen and (max-width: 375px) {
	.more-category .blog-category-more-list{ top: 100%; left: 0; right: 0; } 
}