/*
==========================================
Notification Details
Part-1 : Hero Section
GovtJobPreparation.com
==========================================
*/

/* ===========================
   Hero Section
=========================== */

.gjp-notification-hero{

	padding:40px 0 30px;

	background:#f7f9fc;

}


/* ===========================
   Breadcrumb
=========================== */

.gjp-breadcrumb{

	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:10px;

	margin-bottom:25px;

	font-size:14px;

}

.gjp-breadcrumb a{

	color:#2563eb;

	font-weight:500;

	text-decoration:none;

	transition:.3s;

}

.gjp-breadcrumb a:hover{

	color:#1d4ed8;

}

.gjp-breadcrumb span{

	color:#94a3b8;

}

.gjp-breadcrumb .current{

	color:#475569;

	font-weight:600;

}


/* ===========================
   Hero Card
=========================== */

.gjp-notification-card{

	background:#ffffff;

	border-radius:16px;

	padding:35px;

	box-shadow:0 10px 30px rgba(0,0,0,.05);

	border:1px solid #e5e7eb;

}


/* ===========================
   Header
=========================== */

.gjp-notification-header{

	display:flex;

	justify-content:space-between;

	align-items:flex-start;

	gap:40px;

}


/* ===========================
   Left Section
=========================== */

.gjp-notification-left{

	display:flex;

	gap:25px;

	flex:1;

}


/* ===========================
   Logo
=========================== */

.gjp-notification-logo{

	width:90px;

	height:90px;

	background:#ffffff;

	border-radius:16px;

	display:flex;

	align-items:center;

	justify-content:center;

	border:1px solid #e5e7eb;

	flex-shrink:0;

}

.gjp-notification-logo img{

	width:70px;

	height:70px;

	object-fit:contain;

}


/* ===========================
   Content
=========================== */

.gjp-notification-content{

	flex:1;

}

.gjp-notification-category{

	display:inline-block;

	padding:6px 12px;

	border-radius:50px;

	background:#e8f1ff;

	color:#2563eb;

	font-size:13px;

	font-weight:700;

	margin-bottom:14px;

}

.gjp-notification-content h1{

	font-size:34px;

	line-height:1.3;

	font-weight:700;

	color:#0f172a;

	margin-bottom:12px;

}

.gjp-department{

	font-size:17px;

	font-weight:600;

	color:#2563eb;

	margin-bottom:12px;

}

.gjp-description{

	font-size:15px;

	line-height:1.8;

	color:#64748b;

}


/* ===========================
   Right Section
=========================== */

.gjp-notification-actions{

	width:240px;

	display:flex;

	flex-direction:column;

	gap:14px;

}


/* Updated Badge */

.gjp-updated-badge{

	display:inline-flex;

	justify-content:center;

	align-items:center;

	padding:10px 16px;

	border-radius:50px;

	background:#eef6ff;

	border:1px solid #cfe3ff;

	color:#2563eb;

	font-size:14px;

	font-weight:600;

}


/* ===========================
   Buttons
=========================== */

.gjp-btn-primary,

.gjp-btn-outline{

	display:flex;

	align-items:center;

	justify-content:center;

	height:48px;

	border-radius:12px;

	font-size:15px;

	font-weight:600;

	text-decoration:none;

	transition:.3s;

	cursor:pointer;

}

.gjp-btn-primary{

	background:#2563eb;

	color:#ffffff;

	border:none;

}

.gjp-btn-primary:hover{

	background:#1d4ed8;

}

.gjp-btn-outline{

	background:#ffffff;

	border:1px solid #dbe4ef;

	color:#334155;

}

.gjp-btn-outline:hover{

	background:#f8fafc;

}


/* ===========================
   Information Strip
=========================== */

.gjp-notification-strip{

	margin-top:35px;

	display:grid;

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

	gap:20px;

	padding-top:28px;

	border-top:1px solid #edf2f7;

}

.gjp-strip-item{

	background:#fafcff;

	border:1px solid #edf2f7;

	border-radius:14px;

	padding:18px;

	text-align:center;

	transition:.3s;

}

.gjp-strip-item:hover{

	transform:translateY(-2px);

	box-shadow:0 8px 20px rgba(37,99,235,.08);

}

.gjp-strip-label{

	display:block;

	font-size:13px;

	color:#64748b;

	margin-bottom:8px;

}

.gjp-strip-item strong{

	font-size:16px;

	font-weight:700;

	color:#0f172a;

}

.gjp-last-date{

	color:#dc2626 !important;

	font-weight:700;

}
/*
==========================================
Notification Details
Part-2 : Complete Notification Guide
==========================================
*/


/* ===========================
   Details Section
=========================== */

.gjp-notification-details{

	padding:50px 0;

	background:#ffffff;

}


/* ===========================
   Two Column Layout
=========================== */

.gjp-details-layout{

	display:grid;

	grid-template-columns:300px 1fr;

	gap:35px;

	align-items:start;

}


/* ===========================
   Sticky Sidebar
=========================== */

.gjp-guide-sidebar{

	position:sticky;

	top:100px;

}


/* ===========================
   Guide Card
=========================== */

.gjp-guide-card{

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:16px;

	padding:24px;

	box-shadow:0 8px 24px rgba(15,23,42,.05);

}


/* ===========================
   Guide Title
=========================== */

.gjp-guide-title{

	font-size:20px;

	font-weight:700;

	color:#0f172a;

	margin-bottom:22px;

	padding-bottom:15px;

	border-bottom:1px solid #eef2f7;

}


/* ===========================
   Navigation
=========================== */

.gjp-guide-nav{

	display:flex;

	flex-direction:column;

	gap:10px;

}


/* ===========================
   Navigation Links
=========================== */

.gjp-guide-nav a{

	display:block;

	padding:14px 18px;

	text-decoration:none;

	font-size:15px;

	font-weight:600;

	color:#334155;

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-left:4px solid transparent;

	border-radius:10px;

	transition:all .25s ease;

}


/* Hover */

.gjp-guide-nav a:hover{

	background:#f4f8ff;

	border-left-color:#2563eb;

	color:#2563eb;

	transform:translateX(4px);

}


/* Active */

.gjp-guide-nav a.active{

	background:#eef5ff;

	border-left:4px solid #2563eb;

	color:#2563eb;

	font-weight:700;

	box-shadow:0 4px 12px rgba(37,99,235,.08);

}


/* ===========================
   Right Content
=========================== */

.gjp-details-content{

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:16px;

	padding:35px;

	box-shadow:0 8px 24px rgba(15,23,42,.05);

}


/* ===========================
   Content Sections
=========================== */

.gjp-content-section{

	margin-bottom:45px;

	scroll-margin-top:110px;

}


/* Main Heading */

.gjp-content-section h2{

	font-size:28px;

	font-weight:700;

	color:#0f172a;

	margin-bottom:20px;

}


/* Sub Heading */

.gjp-content-section h3{

	font-size:20px;

	font-weight:600;

	color:#1e293b;

	margin:28px 0 14px;

}


/* Paragraph */

.gjp-content-section p{

	font-size:16px;

	line-height:1.9;

	color:#475569;

}


/* List */

.gjp-content-section ul,

.gjp-content-section ol{

	padding-left:22px;

	margin-top:16px;

}


.gjp-content-section li{

	font-size:16px;

	line-height:1.9;

	color:#475569;

	margin-bottom:10px;

}


/* Section Divider */

.gjp-content-section:not(:last-child){

	padding-bottom:35px;

	border-bottom:1px solid #eef2f7;

}
/*
==========================================
Notification Details
Part-3 : Tables, Share & Related
==========================================
*/


/* ===========================
   Tables
=========================== */

.gjp-table,
.gjp-overview-table table{

	width:100%;

	border-collapse:collapse;

	margin-top:20px;

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:12px;

	overflow:hidden;

}

.gjp-table th,
.gjp-overview-table th{

	width:25%;

	background:#f8fafc;

	color:#0f172a;

	font-size:15px;

	font-weight:600;

	text-align:left;

	padding:16px 18px;

	border:1px solid #e5e7eb;

}

.gjp-table td,
.gjp-overview-table td{

	padding:16px 18px;

	font-size:15px;

	line-height:1.8;

	color:#475569;

	border:1px solid #e5e7eb;

	background:#ffffff;

}

.gjp-table tbody tr:hover,
.gjp-overview-table tbody tr:hover{

	background:#f9fbff;

}

.gjp-table a,
.gjp-overview-table a{

	color:#2563eb;

	text-decoration:none;

	font-weight:600;

}

.gjp-table a:hover{

	text-decoration:underline;

}


/* ===========================
   Share Section
=========================== */

.gjp-share-notification{

	margin-top:60px;

	padding:35px;

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:16px;

	text-align:center;

	box-shadow:0 8px 24px rgba(15,23,42,.05);

}

.gjp-share-notification h2{

	font-size:28px;

	margin-bottom:10px;

	color:#0f172a;

}

.gjp-share-notification p{

	color:#64748b;

	margin-bottom:25px;

	font-size:15px;

}


/* Share Buttons */

.gjp-share-buttons{

	display:flex;

	flex-wrap:wrap;

	justify-content:center;

	gap:15px;

}

.gjp-share-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:14px 24px;

	border-radius:12px;

	border:1px solid #dbe4ef;

	background:#ffffff;

	color:#334155;

	text-decoration:none;

	font-size:15px;

	font-weight:600;

	cursor:pointer;

	transition:.3s;

}

.gjp-share-btn:hover{

	background:#2563eb;

	color:#ffffff;

	border-color:#2563eb;

	transform:translateY(-2px);

}


/* ===========================
   Related Notifications
=========================== */

.gjp-related-notifications{

	margin-top:60px;

}

.gjp-section-header{

	margin-bottom:25px;

}

.gjp-section-header h2{

	font-size:30px;

	font-weight:700;

	color:#0f172a;

}


/* Grid */

.gjp-related-grid{

	display:grid;

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

	gap:24px;

}


/* Card */

.gjp-related-card{

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:16px;

	padding:24px;

	display:flex;

	flex-direction:column;

	height:100%;

	transition:.3s;

	box-shadow:0 6px 18px rgba(15,23,42,.04);

}

.gjp-related-card:hover{

	transform:translateY(-5px);

	box-shadow:0 14px 30px rgba(37,99,235,.10);

}


/* Badge */

.gjp-related-badge{

	display:inline-block;

	align-self:flex-start;

	padding:6px 12px;

	border-radius:50px;

	background:#eef5ff;

	color:#2563eb;

	font-size:12px;

	font-weight:700;

	margin-bottom:16px;

}


/* Title */

.gjp-related-card h3{

	font-size:20px;

	line-height:1.5;

	color:#0f172a;

	margin-bottom:16px;

}


/* Last Date */

.gjp-related-card p{

	font-size:15px;

	color:#64748b;

	margin-bottom:18px;

}

.gjp-related-card .gjp-last-date{

	color:#dc2626;

	font-weight:700;

}


/* Link */

.gjp-related-card a{

	margin-top:auto;

	color:#2563eb;

	font-size:15px;

	font-weight:700;

	text-decoration:none;

}

.gjp-related-card a:hover{

	text-decoration:underline;

}
/*
==========================================
Notification Details
Part-4 : Responsive
==========================================
*/


/* =====================================
   Laptop (1200px)
===================================== */

@media (max-width:1200px){

	.gjp-notification-header{

		flex-direction:column;

	}

	.gjp-notification-actions{

		width:100%;

		flex-direction:row;

		flex-wrap:wrap;

	}

}


/* =====================================
   Tablet (992px)
===================================== */

@media (max-width:992px){

	.gjp-details-layout{

		grid-template-columns:1fr;

		gap:30px;

	}

	.gjp-guide-sidebar{

		position:static;

	}

	.gjp-guide-card{

		padding:20px;

	}

	.gjp-notification-strip{

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

	}

	.gjp-related-grid{

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

	}

}


/* =====================================
   Mobile (768px)
===================================== */

@media (max-width:768px){

	.gjp-notification-hero{

		padding:25px 0;

	}

	.gjp-notification-card{

		padding:22px;

	}

	.gjp-notification-left{

		flex-direction:column;

		align-items:center;

		text-align:center;

	}

	.gjp-notification-logo{

		width:80px;

		height:80px;

	}

	.gjp-notification-logo img{

		width:60px;

		height:60px;

	}

	.gjp-notification-content h1{

		font-size:28px;

	}

	.gjp-department{

		font-size:16px;

	}

	.gjp-description{

		font-size:14px;

	}

	.gjp-notification-actions{

		flex-direction:column;

		width:100%;

	}

	.gjp-btn-primary,

	.gjp-btn-outline{

		width:100%;

	}

	.gjp-notification-strip{

		grid-template-columns:1fr;

	}

	.gjp-details-content{

		padding:25px;

	}

	.gjp-content-section h2{

		font-size:24px;

	}

	.gjp-content-section h3{

		font-size:18px;

	}

	.gjp-guide-title{

		font-size:18px;

	}

	.gjp-guide-nav a{

		padding:13px 15px;

		font-size:14px;

	}

	.gjp-share-buttons{

		flex-direction:column;

	}

	.gjp-share-btn{

		width:100%;

	}

	.gjp-related-grid{

		grid-template-columns:1fr;

	}

}


/* =====================================
   Small Mobile (480px)
===================================== */

@media (max-width:480px){

	.gjp-breadcrumb{

		font-size:13px;

		gap:6px;

	}

	.gjp-notification-content h1{

		font-size:24px;

		line-height:1.4;

	}

	.gjp-notification-category{

		font-size:12px;

		padding:5px 10px;

	}

	.gjp-strip-item{

		padding:15px;

	}

	.gjp-strip-item strong{

		font-size:15px;

	}

	.gjp-content-section{

		margin-bottom:35px;

	}

	.gjp-table{

		display:block;

		overflow-x:auto;

		white-space:nowrap;

	}

	.gjp-overview-table{

		overflow-x:auto;

	}

	.gjp-share-notification{

		padding:25px 18px;

	}

	.gjp-share-notification h2{

		font-size:22px;

	}

	.gjp-section-header h2{

		font-size:24px;

	}

	.gjp-related-card{

		padding:20px;

	}

}
/* Reading Progress */

.gjp-reading-progress{

	width:100%;

	height:5px;

	background:#e5e7eb;

	border-radius:50px;

	margin-bottom:25px;

	overflow:hidden;

}

.gjp-reading-progress-bar{

	width:0;

	height:100%;

	background:#2563eb;

	border-radius:50px;

	transition:width .15s linear;

}