/* bhashini start */
/* list ko vertical stack karo */
.bhashini-dropdown-content li {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* scroll bhi de do (optional but useful) */
.bhashini-dropdown-content {
    max-height: 300px !important;
    overflow-y: auto !important;
}
/* bhashini end*/


/* responsive topbar  start */
.topbar-social-links ul {
	overflow-x: auto;
	white-space: nowrap;
}


/* menu list text incese */
@media ( max-width : 768px) {
	.topbar-social-links ul {
		flex-wrap: wrap;
		justify-content: center !important;
	}
	.topbar-social-links li {
		flex: 0 0 auto;
	}
}

/* respomnsive topbar end */


/*Accessiblity start */
.accsCommonButton {
	width: 45%;
	height: 88px;
	border-radius: 12px;
	border: 2px solid #081d6f !important;
	color: #081d6f !important;
}

#accessibilityPanel {
	position: fixed;
	top: 60px;
	right: 0;
	width: 480px;
	background: #f8f9fb;
	box-shadow: -4px 0 25px rgba(0, 0, 0, 0.25);
	z-index: 9999;
	border-radius: 12px 0 0 12px;
	padding: 25px 20px;
	display: none; /* Hidden by default */
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform: translateX(100%);
	opacity: 0;
}

#accessibilityPanel.open {
	display: block;
	transform: translateX(0%);
	opacity: 1;
}

.access-btn {
	width: 45%;
	height: 88px;
	margin: 10px 5px;
	border-radius: 12px;
	border: 2px solid #081d6f;
	background: white;
	text-align: center;
	/* font-weight: bold; */
	font-size: 16px;
	color: #0d1b2a;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.access-btn:hover {
	background-color: #e0ecff;
	transform: scale(1.03);
}

/* .access-btn i {
	font-size: 2rem;
	margin-bottom: 8px;
	color: #081d6f;
} */
.custom-reset-btn {
	color: #081d6f;
	border: 2px solid #081d6f ! important;
	font-weight: bold;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-reset-btn:hover {
	background-color: #081d6f;
	color: #fff;
}

.close-btn {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 26px;
	color: red;
	cursor: pointer;
}

#resetBtn {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: bold;
}

/* Effects */
/* Global dark mode styling */
/* Apply dark theme to full page */
/* Set overall dark background and yellow text */
.dark-contrast {
	background-color: #000 !important;
	color: #ffeb3b !important; /* Yellow */
}

/* Target all elements inside the dark mode */
.dark-contrast * {
	background-color: transparent !important;
	color: #ffeb3b !important; /* Yellow text */
	border-color: #ffeb3b !important;
	fill: #ffeb3b !important; /* For SVG paths */
	stroke: #ffeb3b !important;
}

/* Fix common Bootstrap class overrides */
.dark-contrast .bg-white, .dark-contrast .text-dark, .dark-contrast .btn-light,
	.dark-contrast .btn, .dark-contrast .card, .dark-contrast .modal-content
	{
	background-color: #000 !important;
	color: #ffeb3b !important;
	border-color: #ffeb3b !important;
}

/* Make SVG icons yellow */
.dark-contrast svg path, .dark-contrast svg circle, .dark-contrast svg rect,
	.dark-contrast svg line, .dark-contrast svg polygon {
	fill: #ffeb3b !important;
	stroke: #ffeb3b !important;
}

.inverted {
	filter: invert(100%);
	background-color: #000 !important;
	color: #ffeb3b !important;
}

.grayscale {
	filter: grayscale(100%);
}

/* Hide all <img> tags */
.hide-img img {
	display: none !important;
}

/* Hide background images applied via CSS or inline styles */
.hide-img * {
	background-image: none !important;
	background: none !important;
}

/* Hide images added via <picture> or <source> */
.hide-img picture, .hide-img source {
	display: none !important;
}

.highlight-links a {
	background-color: yellow !important;
	color: rgb(24, 24, 185) !important;
	font-weight: bold;
}

/* .large-cursor,
.large-cursor * {
  cursor: url('homepageNew/assets/icons/large-yellow-cursor.svg') 0 0, pointer !important;
} */
.large-cursor,
.large-cursor * {
  cursor: url('homepageNew/assets/icons/icons8-cursor.svg') 16 0, pointer !important;
}

.accesPanelFrame {
	display: none;
	position: fixed;
	top: 80px;
	right: 20px;
	z-index: 9999;
	background: red;
	padding: 20px;
	border-radius: 12px;
	width: 480px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
/*accessiblity end */

/* navbar hoover effect end */

/*  Dropdown with social icons */
.topbar-social {
	position: relative;
	display: inline-block;
}

.social-toggle {
	font-size: 1.125rem;
	color: #2e4ab7;
	cursor: pointer;
}

.social-dropdown {
	position: absolute;
	top: 100%;
	right: -18px;
	min-width: 140px;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 8px 10px;
	border-radius: 8px;
	z-index: 1000;
	display: none;
	white-space: nowrap;
}

.topbar-social:hover .social-dropdown {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* header style end */

/* body style start */

/* body style end */
/* nsap scheme section start  */
.data-circle {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	width: 150px;
	height: 150px;
}

.tab-arrow {
	position: absolute;
	left: -60px;
}

.list-group-item-action:hover {
	background-color: #C4D0FF;
}

#nsapTabs .active {
	background: linear-gradient(to right, #4f51c0 35%, #f39f4d);
}
/* nsap scheme section start  */

/*  Key Indicators Section Start */
/* 4*5 grid start*/
.five-cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.five-cols .col {
	flex: 0 0 calc(20% - 1rem);
	max-width: calc(20% - 1rem);
}

@media ( max-width : 768px) {
	.five-cols .col {
		flex: 0 0 45%;
		max-width: 45%;
	}
}

.col-md-5ths {
	width: 20%; /* 100% / 5 = 20% */
	float: left;
}

/*  For smaller screens, ensure they stack properly */
@media ( max-width : 768px) {
	.col-md-5ths {
		width: 50%; /* Two columns on smaller screens */
	}
}

@media ( max-width : 576px) {
	.col-md-5ths {
		width: 100%; /* Stack on smallest screens */
	}
}

/* 4*5 grid end */
/* .key-indicators-section {
	background-color: #f9f9f9;
}

.indicator-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon-circle {
	width: 80px;
	height: 80px;
	background-color: #2743a3;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-circle img {
	width: 48px;
	height: 48px;
	filter: brightness(0) invert(1); white icons on blue
} */
/*  Key Indicators Section end */

/*   Explore our report section start  */
.report-section {
	background-color: #fff;
}

.bg-circle {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	 text-align: center;
}

.bg-circle-1 {
	width: 400px;
	height: 400px;
	background-color: #ebeae7;
	top: -100px;
	left: calc(50% - 200px);
	z-index: 0;
}

.bg-circle-2 {
	width: 500px;
	height: 500px;
	background-color: #fdf5ed;
	top: -150px;
	left: calc(50% - 250px);
	z-index: 0;
}

.report-card {
	background-size: cover;
	background-position: center;
	min-height: 400px;
	border-radius: 1rem;
	position: relative;
	transition: transform 0.3s ease;
}

.report-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 40, 80, 0.45);
	z-index: 1;
	border-radius: 1rem;
}

.report-card .card-body {
	position: relative;
	z-index: 2;
}

.report-card:hover {
	transform: translateY(-5px);
}

.btn.w-fit {
	width: fit-content;
}

/*   Explore our report section end  */

/* Never Miss an Update Section Start  */
.custom-card {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	margin-bottom: 1rem;
	background: white;
}

.custom-card-header {
	background: linear-gradient(to right, #2d3e91, #3445b4);
	height: 20px;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.custom-card-body {
	padding: 1rem;
	color: black;
}

.custom-card-footer {
	font-size: 0.9rem;
	display: flex;
	justify-content: space-between;
	color: #6c757d;
}

/*  dashboard section start */
#nsapDashboardTabs .nav-link {
	background: #435bbd;
	color: white;
}

#nsapDashboardTabs .nav-link.active, #nsapDashboardTabs .nav-link:hover
	{
	background: white;
	color: #435bbd;
}

.graph-bg {
	background: #090949;
}
/* #nsapDashboardTabs .nav-link {
	background: #435bbd;
	color: white;
}

#nsapDashboardTabs .nav-link.active, #nsapDashboardTabs .nav-link:hover
	{
	background: white;
	color: #435bbd;
}

.graph-bg {
	background: #090949;
} */
/*  dashboard section end */

/* graph type started */
  .graph-type-btn {
    font-size: 10px;
    color: grey;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .graph-type-btn:hover {
    color: white;
  }
/* graph type end */

/* report sec start */
@media ( min-width : 768px) {
	.col-md-custom {
		flex: 0 0 auto;
		width: 20%;
	}
}
/* report sec end */
/*    .card-title {
      font-weight: bold;
      text-transform: uppercase;
      font-size: 0.95rem;
    }*/
/*  Never Miss an Update Section Start  */

/* footer style end */

/* Responsive Design for Accessibility Panel and Buttons */
@media screen and (max-width: 768px) {

	/* Adjust the common button for smaller screens */
	.accsCommonButton {
		width: 100%;
		height: 70px;
		font-size: 16px;
	}

	/* Adjust the accessibility panel */
	#accessibilityPanel {
		width: 100%;
		top: 0;
		right: 0;
		border-radius: 0;
		padding: 20px 15px;
		box-shadow: none;
	}
	#accessibilityPanel {
		width: 100%; /* Full width on mobile */
		border-radius: 0;
		top: 0;
		height: 100vh;
		padding: 20px 15px;
		overflow-y: auto;
	}

	.access-btn,
	.accsCommonButton {
		width: 100% !important; /* Stack buttons */
		margin: 10px 0;
		font-size: 1rem;
	}

}

/* boy.jsp wala part*/
.card-title a {
	text-decoration: none;
	font-weight: normal;
	color: #000; /* Default text color (black) */
	font-style: normal;
	transition: color 0.3s ease;
}

.card-title a:hover {
	color: #323c44; /* Light grey on hover */
}

.navbar, li, ul {
	overflow: visible !important;
}

.hero-btn a {
	width: 250px;
	display: inline-block;
	text-align: center;
}

.btn-highlighted {
	background-color: #2e4ab7;
	color: #fff;
	padding: 10px 20px;
	border-radius: 50px;
	text-decoration: none;
	display: inline-block;
}

.custom-card {
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

/* Ensure pagination does not float or overlap */
#pagination {
	position: relative;
	z-index: 1; /* Lower than modal which should have 9999+ */
	margin-top: 20px;
}

.page-item {
	float: none !important;
	position: static !important;
}

.modal, #modalOverlay {
	position: fixed;
	z-index: 9999 !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}