@charset "utf-8";
/* CSS Document */

.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}
.fw-bold {
	font-weight: 700 !important;
}
.mb-4 {
	margin-bottom: 1.5rem !important;
}
.g-4, .gy-4 {
 --bs-gutter-y: 1.5rem;
}
.g-4, .gx-4 {
 --bs-gutter-x: 1.5rem;
}
.mb-2 {
 margin-bottom: .5rem !important;
}
.mb-3 {
	margin-bottom: 1rem !important;
}
.w-100 {
	width: 100% !important;
}
.me-2 {
 margin-right: .5rem !important;
}
.align-items-center {
	align-items: center !important;
}
.justify-content-between {
	justify-content: space-between !important;
}
.d-flex {
	display: flex !important;
}
.text-end {
	text-align: right !important;
}
.mt-2 {
 margin-top: .5rem !important;
}
.mb-0 {
	margin-bottom: 0 !important;
}
.mt-4 {
	margin-top: 1.5rem !important;
}
.rounded-3 {
	border-radius: 10px;
}
.bg-white {
 --bs-bg-opacity: 1;
	background-color: #fff;
}
.p-4 {
	padding: 1.5rem !important;
}
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.shadow-sm {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.dashboard-card {
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);
	text-align:center;
	padding:20px;
	height:100%;
	transition:0.3s;
}
.dashboard-card:hover {
	transform:translateY(-5px);
}
.dashboard-card i {
	font-size:40px;
	margin-bottom:10px;
}
.status-box {
	background:#fff;
	border-radius:10px;
	box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);
	padding:20px;
}
.btn-primary {
	background:linear-gradient(90deg, #0d6efd, #0a58ca);
	border:none;
}
.secure-text {
	font-size:13px;
	color:#28a745;
}
.process-step {
	width: 120px;
}
.process-step i {
	font-size: 36px;
	color: #0d6efd;
	margin-bottom: 8px;
}
.process-step p {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
.process-arrow {
	font-size: 20px;
	color: #9aa4b2;
}
 @media (max-width: 768px) {
 .process-arrow {
 display: none;
}
 .process-step {
 margin-bottom: 15px;
}

.d-flex {
  display: block !important;
}

.process-step .fa-arrow-right{display:none}

.process-arrow {
  display:none !important;
}

.process-step {
  width: 100%;
}

}
.update-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	background: #f8fafc;
	font-size: 14px;
	font-weight: 600;
}
.update-item span {
	font-size: 14px;
	font-weight: 600;
}
.update-item i {
	font-size: 18px;
}
.help-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: #f8fafc;
	border-radius: 8px;
	font-weight: 600;
}
.hero {
	background: linear-gradient(135deg, #eaf2ff, #f8fbff);
	padding: 60px 0px 40px;
}
.hero h1 {
	font-weight: 700;
	color: #0d3b8e;
}
.hero p {
	color: #555;
}
.hero img {
	max-width: 100%;
	height: auto;
}
.btn-apply {
	background-color: #0d6efd;
	color: #fff;
}
.btn-login {
	background-color: #198754;
	color: #fff;
}
.online-application {
	background: #f3f8ff;
}
.app-service-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 22px 10px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	margin-bottom:10px
}
.app-service-card h6 {
	font-weight: 600;
	margin-bottom: 10px;
	font-size: 14px;
}
.app-service-card p {
	font-size: 14px;
	color: #6c757d;
	min-height: 60px;
}
.app-service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}
.app-service-card .btn {
	border-radius: 8px;
	font-weight: 500;
}
.quick-services {
	background: #f4f8ff;
}
.quick-card {
	background: #ffffff;
	border-radius: 14px;
	text-align: center;
	padding: 20px 5px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: 0.3s;
	margin-bottom: 15px;
}
.quick-card img {
	height: 50px;
	margin-bottom: 10px;
}
.quick-card p {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}
.quick-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.quick-card1 {
	background: #ffffff;
	border-radius: 14px;
	text-align: center;
	padding: 12px 0px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: 0.3s;
	margin-bottom: 15px;
	min-height: 140px;
}
.quick-card1 img {
	height: 50px;
	margin-bottom: 10px;
}
.quick-card1 p {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}
.quick-card1:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.status-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.status-card h5 {
	margin-bottom: 20px;
	font-weight: 600;
}
.announcement-section {
	background: #f3f8ff;
}
.info-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	margin-bottom:10px
}
.info-card h5 {
	font-weight: 600;
}
.list-group-item {
	border: none;
	padding: 12px 0;
	font-size: 14px;
}
.list-group-item + .list-group-item {
	border-top: 1px solid #e9ecef;
}
.date {
	font-size: 13px;
	color: #6c757d;
}
.view-all {
	font-size: 14px;
	text-decoration: none;
	color: #0d6efd;
}
.view-all:hover {
	text-decoration: underline;
}
.help-list .list-group-item {
	cursor: pointer;
}
.help-list .list-group-item:hover {
	color: #0d6efd;
}
.quick-service-section {
	background: #f3f8ff;
}
.qs-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 18px 10px;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: 0.3s;
	height: 100%;
}
.qs-card i {
	font-size: 34px;
	margin-bottom: 10px;
}
.qs-card p {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}
.qs-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.status-panel {
	background: #ffffff;
	border-radius: 14px;
	padding: 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.status-panel h5 {
	font-weight: 600;
	margin-bottom: 20px;
}
 @media only screen and (max-width: 600px) {
 .hero {
 background: linear-gradient(135deg, #eaf2ff, #f8fbff);
 padding: 60px 0px 40px;
}
 .hero h1 {
 font-weight: 700;
 color: #0d3b8e;
 font-size: 22px;
}
}
