@font-face {
	font-family: 'Arabic';
	src: url('ara.ttf') format('truetype');
	font-weight: normal;
	font-style: normal
}

:root {
	--brand-gold: #f4d35e;
	--brand-light-blue: #4a90e2;
	--brand-dark-blue: #036;
	--brand-red: #d32f2f;
	--brand-white: #fff;
	--text-dark: #212529;
	--body-bg: #fff;
	--light-gray-bg: #f8f9fa;
	--border-color: #dee2e6
}

body {
	font-family: 'Arabic',sans-serif;
	color: var(--text-dark);
	padding-top: 140px;
	background-color: var(--brand-white);
	position: relative;
	overflow-x: hidden;
	line-height: 1.8;
	font-weight: 400;
	zoom: 90%;
}

main {
	position: relative;
	z-index: 2;
	background-color: transparent
}

section {
	background-color: var(--brand-white)
}

section.bg-light {
	background-color: transparent
}

::-webkit-scrollbar {
	width: 10px
}

::-webkit-scrollbar-track {
	background: #f1f1f1
}

::-webkit-scrollbar-thumb {
	background: var(--brand-dark-blue);
	border-radius: 5px
}

::-webkit-scrollbar-thumb:hover {
	background: #024
}

h1,h2,h3,h4,h6 {
	font-weight: 700;
	color: var(--brand-dark-blue);
	letter-spacing: -0.5px
}

h5{
	font-weight: 700;
	
	letter-spacing: -0.5px
}

.section-title {
	font-weight: 800
}

.btn {
	border-radius: .5rem;
	transition: all .2s ease-in-out;
	padding: .75rem 1.5rem;
	font-weight: 500
}

.btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1)
}

.btn-brand-gold {
	background-color: var(--brand-gold);
	border-color: var(--brand-gold);
	color: var(--text-dark)
}

.btn-brand-gold:hover {
	background-color: #eac852;
	border-color: #eac852;
	color: #000
}

.btn-brand-red {
	background-color: var(--brand-red);
	border-color: var(--brand-red);
	color: var(--brand-white)
}

.btn-brand-red:hover {
	background-color: #b92a2a;
	border-color: #b92a2a;
	color: var(--brand-white)
}

.btn-outline-brand-dark-blue {
	color: var(--brand-dark-blue);
	border-color: var(--brand-dark-blue)
}

.btn-outline-brand-dark-blue:hover {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white)
}

.btn-outline-light {
	border-color: rgba(255,255,255,0.7);
	color: #fff
}

.btn-outline-light:hover {
	background-color: #fff;
	color: var(--brand-dark-blue)
}

.shadow-sm {
	box-shadow: 0 2px 15px rgba(0,33,68,.05) !important
}

@keyframes float {
	0% {
		transform: translateY(0) rotate(0)
	}

	50% {
		transform: translateY(-25px) rotate(5deg)
	}

	100% {
		transform: translateY(0) rotate(0)
	}
}

.background-icons-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none
}

.bg-icon {
	position: absolute;
	color: var(--brand-dark-blue);
	opacity: .07;
	filter: blur(1.5px);
	animation-name: float;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	z-index: -1
}

.floating-header .navbar {
	padding: 1rem 0;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	transition: all .4s ease
}

.floating-header.scrolled .navbar {
	padding: .75rem 0;
	background: rgba(255,255,255,0.9)
}

.floating-header .navbar>.container {
	position: relative
}

.floating-header .navbar-brand {
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
	z-index: 10;
	background-color: var(--brand-white);
	padding: .5rem;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(0,33,68,0.1);
	border: 3px solid rgba(255,255,255,0.5)
}

.floating-header .navbar-brand img {
	height: 70px;
	width: 70px;
	border-radius: 50%
}

.floating-header .navbar-brand span {
	display: none
}

@media(min-width:992px) {
	.floating-header .navbar-nav {
		padding-right: 150px
	}
}

.floating-header .navbar-nav .nav-link {
	font-weight: 700;
	color: var(--text-dark);
	padding: .5rem 1.25rem;
	position: relative;
	transition: all .3s ease
}

.floating-header .navbar-nav .nav-link::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background-color: var(--brand-red);
	border-radius: 3px;
	transition: width .3s ease
}

.floating-header .nav-link.active::before,.floating-header .nav-link:hover::before,.floating-header .dropdown-mega:hover>.nav-link::before {
	width: 25px
}

.header-actions .btn-brand-red {
	border-radius: 50px;
	font-weight: 700;
	padding: .5rem 1.25rem
}

.header-actions .header-icon-link {
	font-size: 1.2rem;
	color: var(--text-dark)
}

.dropdown-mega {
	position: static !important
}

.mega-menu {
	display: none
}

@media(min-width:992px) {
	.dropdown-mega:hover>.dropdown-menu {
		display: block;
		opacity: 1;
		visibility: visible
	}

	.mega-menu {
		position: absolute !important;
		left: 0 !important;
		width: 100% !important;
		margin-top: 0 !important;
		background-color: var(--light-gray-bg) !important;
		border-top: 1px solid var(--border-color) !important;
		box-shadow: 0 15px 30px rgba(0,33,68,0.1) !important;
		transform: translateY(0) !important;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease
	}
}

@media(max-width:991.98px) {
	.navbar-collapse.show {
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		background: rgba(255,255,255,0.95);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		margin-top: 1rem;
		padding: 1rem;
		border-radius: 1rem
	}

	.mega-menu {
		display: block !important;
		position: static;
		width: 100% !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		background: transparent !important;
		transform: none !important
	}
}

.mega-menu-title {
	font-size: 1.1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--brand-gold)
}

.mega-menu-list a {
	display: block;
	padding: .6rem .5rem;
	text-decoration: none;
	color: var(--text-dark);
	font-weight: 500
}

.mega-menu-list a:hover {
	color: var(--brand-red)
}

#collegesAccordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-border-width: 0
}

#collegesAccordion .accordion-item {
	border-bottom: 1px solid var(--border-color)
}

#collegesAccordion .accordion-header {
	margin: 0
}

#collegesAccordion .accordion-button {
	font-weight: 700;
	color: var(--text-dark);
	padding: .8rem 0;
	transition: all .2s ease
}

#collegesAccordion .accordion-button:not(.collapsed) {
	color: var(--brand-red);
	box-shadow: none
}

#collegesAccordion .accordion-button:focus {
	box-shadow: none
}

#collegesAccordion .accordion-button::after {
	content: '+';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	transform: none;
	background-image: none;
	color: var(--brand-red);
	font-size: 1rem;
	margin-right: auto;
	margin-left: 0;
	transition: transform .2s ease-in-out
}

#collegesAccordion .accordion-button:not(.collapsed)::after {
	content: '\2212';
	transform: rotate(180deg)
}

#collegesAccordion .accordion-body {
	padding: 0 0 1rem 0
}

#collegesAccordion .accordion-body .mega-menu-list {
	padding-right: 1.5rem
}

.standalone-college-link {
	display: block;
	text-decoration: none;
	color: var(--text-dark);
	padding: .8rem 0;
	font-weight: 700;
	border-bottom: 1px solid var(--border-color)
}

.standalone-college-link:hover {
	color: var(--brand-red)
}

.dropdown-toggle::after {
	display: none !important
}

.dropdown-mega {
	position: static !important
}

@media(min-width:992px) {
	.dropdown-mega:hover>.dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto
	}
}

.mega-menu-v3 {
	left: 0 !important;
	width: 100% !important;
	margin-top: 0 !important;
	padding: 0;
	background-color: var(--light-gray-bg);
	border: 0;
	border-top: 1px solid var(--border-color);
	box-shadow: 0 15px 30px rgba(0,33,68,0.1);
	border-radius: 0;
	min-height: 280px;
	display: flex;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: all .25s ease-out;
	pointer-events: none;
	display: block;
	text-align: right !important
}

.mega-menu-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--brand-red);
	text-align: right !important
}

.mega-menu-list a {
	display: block;
	text-decoration: none;
	color: var(--text-dark);
	padding: .8rem 1rem;
	margin-bottom: .25rem;
	border-radius: .375rem;
	font-weight: 500;
	transition: all .2s ease;
	text-align: right !important
}

.mega-menu-list a:hover {
	color: var(--brand-white);
	background-color: var(--brand-dark-blue);
	transform: translateX(5px)
}

@media(max-width:991px) {
	.mega-menu-v3 {
		display: none
	}

	.refined-header .navbar-nav .nav-item::after {
		display: none
	}
}

#collegesCarousel .carousel-item {
	transition-duration: .8s
}

.college-card {
	background-color: var(--brand-white);
	border-radius: .75rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 6px rgba(0,0,0,0.03);
	text-align: center;
	overflow: hidden;
	transition: all .4s ease
}

.college-card-image {
	position: relative;
	aspect-ratio: 16 / 10
}

.college-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .4s ease
}

.college-card .college-card-image img {
	filter: grayscale(100%) blur(2px)
}

.college-card .college-card-title {
	color: #6c757d;
	transition: all .4s ease
}

#collegesCarousel:hover .college-card {
	opacity: .5
}

#collegesCarousel .college-card:hover {
	transform: translateY(-8px) scale(1.05);
	box-shadow: 0 15px 30px rgba(0,33,68,.15);
	opacity: 1;
	z-index: 10
}

.college-card:hover .college-card-image img {
	filter: grayscale(0) blur(0)
}

.college-card:hover .college-card-image img {
	transform: scale(1.1)
}

.college-card:hover .college-card-title {
	color: var(--brand-dark-blue)
}

.college-card-body {
	padding: 1.5rem
}

.hero-slider-section .carousel-item {
	height: 100%
}

.hero-slider-section .carousel-item img {
	height: 100%;
	object-fit: cover
}

@media(max-width:767px) {
	.hero-slider-section .hero-content h1 {
		font-size: 2.2rem
	}

	.typed-cursor {
		font-size: 2rem
	}

	.hero-slider-section .hero-content .lead {
		font-size: 1rem;
		margin-top: .5rem !important;
		margin-bottom: 1.5rem !important
	}

	.hero-slider-section .btn {
		font-size: .9rem;
		padding: .6rem 1.2rem
	}
}

.carousel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,51,102,0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px)
}

.hero-slider-section .hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	color: white;
	text-align: center;
	width: 90%
}

.hero-slider-section .hero-content h1 {
	color: var(--brand-white)
}

.typed-cursor {
	color: var(--brand-gold);
	font-size: 2.5rem;
	animation: blinking-cursor .7s infinite
}


@keyframes blinking-cursor {
	0% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.hero-slider-section {
	position: relative;
	height: calc(100vh - 130px);
	min-height: 600px
}

.hero-slider-section .carousel,.hero-slider-section .carousel-inner,.hero-slider-section .carousel-item {
	height: 100%
}

.hero-slider-section .carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.carousel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,51,102,0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px)
}

.hero-split-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 10;
	color: white
}

.hero-slider-section .carousel,.hero-slider-section .carousel-inner,.hero-slider-section .carousel-item {
	height: 100%
}

.hero-slider-section .carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.carousel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,51,102,0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px)
}

.hero-split-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 10;
	color: white
}

.hero-main-content h1 {
	color: var(--brand-white)
}

.typed-cursor {
	color: var(--brand-gold)
}

.announcements-card {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 1rem;
	box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);
	overflow: hidden
}

.announcements-card .card-header {
	background-color: var(--brand-red);
	color: var(--brand-white);
	font-weight: 700;
	font-size: 1.1rem;
	padding: .75rem 1.25rem;
	text-align: right
}

.announcements-card .card-body {
	padding: .5rem 0
}

.announcements-list-wrapper {
	height: 200px;
	overflow: hidden;
	position: relative
}

.announcements-list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	width: 100%;
	animation: vertical-scroll 20s linear infinite
}

@keyframes vertical-scroll {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(-50%)
	}
}

.announcements-list-wrapper:hover .announcements-list {
	animation-play-state: paused
}

.announcements-list li {
	padding: .75rem 1.25rem
}

.announcements-list li a {
	color: var(--brand-white);
	text-decoration: none;
	transition: color .3s ease
}

.announcements-list li a:hover {
	color: var(--brand-gold);
	text-decoration: underline
}

.key-card {
	background: var(--brand-white);
	padding: 2rem;
	border: 1px solid var(--border-color);
	border-radius: .75rem;
	box-shadow: none;
	transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease;
	cursor: pointer
}

.key-card:hover {
	transform: translateY(-5px);
	border-color: var(--brand-dark-blue);
	box-shadow: 0 10px 25px rgba(0,33,68,.08)
}

.key-card .icon-wrapper {
	width: 65px;
	height: 65px;
	margin: 0 auto 1.5rem;
	background-color: var(--light-gray-bg);
	color: var(--brand-dark-blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color)
}

.key-card h5 {
	margin-bottom: .5rem
}

.stats-section {
	background: url('../images/campus.jpg') no-repeat center center/cover;
	position: relative;
	z-index: 1
}

.stats-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg,rgba(0,51,102,0.95),rgba(0,22,44,0.9));
	z-index: -1
}

.stat-item i {
	color: var(--brand-gold)
}

.stat-number {
	font-size: 3rem;
	font-weight: 800
}

.stat-label {
	font-size: 1rem;
	color: rgba(255,255,255,0.8)
}

.news-card {
	border-radius: .75rem;
	border: 1px solid var(--border-color);
	box-shadow: none;
	transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease;
	overflow: hidden
}

.news-card:hover {
	transform: translateY(-5px);
	border-color: var(--brand-red);
	box-shadow: 0 10px 25px rgba(0,33,68,.08) !important
}

.news-card .card-img-top {
	aspect-ratio: 16/10;
	object-fit: cover
}

.services-section {
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color)
}

.service-card {
	padding: 2.5rem;
	background: var(--light-gray-bg);
	border-radius: .75rem;
	border: 1px solid var(--border-color);
	transition: background-color .3s ease
}

.service-card:hover {
	background-color: #fff
}

.service-icon {
	font-size: 2.5rem;
	color: var(--brand-red);
	margin-bottom: 1.5rem
}

.service-card p {
	font-size: .9rem;
	color: #6c757d
}

.gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-radius: .75rem;
	box-shadow: 0 4px 6px rgba(0,0,0,0.05)
}

.gallery-item img {
	transition: transform .4s ease
}

.gallery-item:hover img {
	transform: scale(1.1)
}

.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,51,102,0.7);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	opacity: 0;
	transition: opacity .4s ease
}

.gallery-item:hover .gallery-overlay {
	opacity: 1
}

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

.cta-title {
	color: var(--brand-white);
	font-size: 2.25rem;
	margin-bottom: 1rem
}

.cta-text {
	color: rgba(255,255,255,0.8);
	font-size: 1.1rem;
	line-height: 1.8
}

.research-section {
	background-color: var(--light-gray-bg)
}

.research-card {
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	color: var(--brand-white);
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	padding: 2rem;
	transition: all .4s cubic-bezier(0.175,0.885,0.32,1.275);
	border: 0;
	box-shadow: 0 4px 15px rgba(0,33,68,.08)
}

.research-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,rgba(0,51,102,0.0) 0,rgba(0,51,102,0.85) 100%);
	transition: all .4s ease
}

.card-journal {
	background: url('../images/research-journal.jpg') no-repeat center center/cover
}

.card-databases {
	background: url('../images/research-databases.jpg') no-repeat center center/cover
}

.card-resources {
	background: url('../images/research-resources.jpg') no-repeat center center/cover
}

.card-ai {
	background: url('../images/research-ai.jpg') no-repeat center center/cover
}

.research-card-content {
	position: relative;
	z-index: 2;
	transform: translateY(20px);
	transition: all .4s ease
}

.research-card-icon {
	font-size: 2.5rem;
	color: var(--brand-gold);
	margin-bottom: 1.2rem;
	background: rgba(0,0,0,0.2);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .9
}

.research-card-title {
	color: var(--brand-white);
	font-size: 1.4rem;
	margin-bottom: .75rem
}

.research-card-text {
	color: rgba(255,255,255,0.85);
	line-height: 1.7;
	margin-bottom: 1.5rem
}

.research-card-link {
	color: var(--brand-gold);
	text-decoration: none;
	font-weight: 700;
	opacity: 0;
	transform: translateY(15px);
	transition: all .4s ease
}

.research-card-link i {
	transition: transform .3s ease;
	margin-right: 5px
}

.research-card-link.disabled {
	color: #aaa;
	pointer-events: none
}

.research-card-link.disabled i {
	display: none
}

.research-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0,33,68,.15)
}

.research-card:hover::before {
	background: linear-gradient(180deg,rgba(0,51,102,0.2) 0,rgba(0,51,102,0.95) 100%)
}

.research-card:hover .research-card-content {
	transform: translateY(0)
}

.research-card:hover .research-card-link {
	opacity: 1;
	transform: translateY(0)
}

.research-card-link:hover i {
	transform: translateX(-5px)
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.animate-fade-in-up {
	animation: fadeInUp .8s ease-out forwards
}

.fade-in-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease-out,transform .6s ease-out
}

.fade-in-section.is-visible {
	opacity: 1;
	transform: translateY(0)
}

@media(max-width:991.98px) {
	.navbar-collapse.show {
		max-height: calc(100vh - 80px);
		overflow-y: auto
	}
}

@keyframes section-icon-float-1 {
	0%,100% {
		transform: translate(0,0) rotate(0)
	}

	50% {
		transform: translate(-30px,20px) rotate(8deg)
	}
}

@keyframes section-icon-float-2 {
	0%,100% {
		transform: translate(0,0) rotate(0)
	}

	50% {
		transform: translate(20px,-15px) rotate(-5deg)
	}
}

@keyframes section-icon-float-3 {
	0%,100% {
		transform: translate(0,0)
	}

	50% {
		transform: translate(5px,25px)
	}
}

.has-icon-backdrop {
	position: relative
}

.icons-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none
}

.icons-backdrop>i {
	position: absolute;
	color: var(--brand-dark-blue);
	opacity: .06;
	animation: section-icon-float-1 15s ease-in-out infinite
}

.icons-backdrop>i:nth-child(2n) {
	animation-name: section-icon-float-2;
	animation-duration: 12s
}

.icons-backdrop>i:nth-child(3n) {
	animation-name: section-icon-float-3;
	animation-duration: 18s
}

.icons-backdrop>i:nth-child(4n) {
	animation-delay: -5s
}

.page-header-section {
	position: relative;
	padding: 6rem 0;
	background-size: cover;
	background-position: center;
	color: var(--brand-white)
}

.page-header-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,51,102,0.7)
}

.page-header-content {
	position: relative;
	z-index: 2
}

.page-header-content .page-title {
	font-size: 3rem;
	font-weight: 800;
	color: var(--brand-white)
}

.page-header-content .page-subtitle {
	font-size: 1.25rem;
	color: rgba(255,255,255,0.8);
	margin-top: .5rem
}

.lead-text {
	font-size: 1.1rem;
	color: #555;
	line-height: 1.8
}

.section-title-underline {
	position: relative;
	margin-bottom: 1.5rem;
	padding-bottom: .75rem;
	display: inline-block
}

.section-title-underline::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 4px;
	background-color: var(--brand-red)
}

.colleges-map-card {
	background-color: var(--light-gray-bg);
	border-radius: 1rem;
	padding: 2rem;
	border: 1px solid var(--border-color)
}

.map-title {
	color: var(--brand-dark-blue);
	margin-bottom: 1.5rem
}

.province-item {
	margin-bottom: 1rem
}

.province-header {
	display: flex;
	align-items: center;
	margin-bottom: .5rem
}

.province-icon {
	color: var(--brand-red);
	margin-left: .75rem
}

.province-name {
	font-weight: 700;
	color: var(--text-dark)
}

.colleges-list {
	font-size: .9rem;
	color: #6c757d;
	padding-right: 2rem;
	border-right: 2px solid var(--border-color)
}

.vision-section {
	overflow: hidden
}

.mission-card {
	background-color: var(--light-gray-bg);
	border-radius: 1rem;
	padding: 2.5rem 2rem;
	text-align: center;
	border: 1px solid var(--border-color);
	transition: all .3s ease
}

.mission-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 30px rgba(0,33,68,.1);
	border-color: var(--brand-dark-blue)
}

.mission-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 1.5rem;
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem
}

.mission-title {
	margin-bottom: 1rem
}

.provinces-nav-wrapper {
	position: relative;
	border-bottom: 2px solid var(--border-color)
}

.provinces-nav-wrapper .nav-pills .nav-item {
	margin: 0 .5rem
}

.provinces-nav-wrapper .nav-link {
	font-size: 1.1rem;
	font-weight: 700;
	color: #6c757d;
	padding: .75rem 1.5rem;
	border-radius: .5rem .5rem 0 0;
	background-color: transparent;
	border-bottom: 2px solid transparent;
	transition: all .3s ease;
	position: relative;
	bottom: -2px
}

.provinces-nav-wrapper .nav-link.active,.provinces-nav-wrapper .nav-link:hover {
	color: var(--brand-dark-blue);
	background-color: var(--brand-white);
	border-color: var(--brand-red)
}

.province-map-preview {
	position: absolute;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	width: 150px;
	height: auto;
	background-color: var(--brand-white);
	padding: .5rem;
	border-radius: .5rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	border: 1px solid var(--border-color);
	visibility: hidden;
	opacity: 0;
	transition: all .3s cubic-bezier(0.175,0.885,0.32,1.275);
	z-index: 100
}

.provinces-nav-wrapper .nav-link:hover .province-map-preview {
	visibility: visible;
	opacity: 1;
	transform: translateX(-50%) translateY(0)
}

#collegesCarousel .carousel-item {
	transition-duration: .8s
}

.college-card {
	background-color: var(--brand-white);
	border-radius: .75rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 4px 6px rgba(0,0,0,0.03);
	text-align: center;
	transition: all .3s ease
}

.college-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 20px rgba(0,33,68,.1)
}

.college-card .card-img-top {
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: .75rem .75rem 0 0
}

.college-card .card-body {
	padding: 1.5rem
}

.college-card .card-title {
	color: var(--brand-dark-blue);
	font-weight: 700
}

.directorates-grid-section {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 65vh;
	min-height: 690px;
	color: var(--brand-white);
	display: flex;
	align-items: center;
	overflow: hidden
}

.directorate-grid-card {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--brand-white);
	border-radius: 1rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 5px 15px rgba(0,33,68,.05);
	overflow: hidden;
	cursor: pointer;
	transition: all .4s ease
}

.directorate-grid-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(0,33,68,.1)
}

.card-front {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	transition: opacity .4s ease
}

.card-front i {
	font-size: 3rem;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem;
	transition: transform .4s ease
}

.card-front h5 {
	color: var(--text-dark);
	font-weight: 700
}

.card-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,var(--brand-red),var(--brand-dark-blue));
	color: var(--brand-white);
	opacity: 0;
	transform: scale(0.9);
	transition: all .4s ease
}

.card-back-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem
}

.card-back-content h4 {
	color: var(--brand-white);
	margin-bottom: .75rem
}

.card-back-content p {
	font-size: .9rem;
	color: rgba(255,255,255,0.85)
}

.directorate-grid-card:hover .card-front {
	opacity: .2
}

.directorate-grid-card:hover .card-front i {
	transform: scale(0.8)
}

.directorate-grid-card:hover .card-back {
	opacity: 1;
	transform: scale(1)
}

.explore-search-section {
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg,rgba(255,255,255,0.9),rgba(255,255,255,0.9)),url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23003366' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color)
}

.explore-title {
	font-size: 2.8rem;
	font-weight: 800;
	color: var(--brand-dark-blue)
}

.explore-subtitle {
	font-size: 1.5rem;
	color: var(--brand-red);
	font-weight: 500;
	margin-top: .5rem
}

.explore-description {
	max-width: 700px;
	margin: 1.5rem auto 3rem;
	color: var(--text-dark)
}

.interactive-search-form-wrapper {
	max-width: 800px;
	margin: 0 auto;
	background: var(--brand-white);
	padding: 2rem;
	border-radius: 1.5rem;
	box-shadow: 0 20px 50px rgba(0,33,68,0.1)
}

.interactive-search-form .form-label {
	font-weight: 700;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem;
	font-size: 1.2rem
}

.interactive-search-form .input-group {
	border-radius: 50px;
	border: 2px solid transparent;
	transition: all .3s ease
}

.interactive-search-form .input-group:focus-within {
	border-color: var(--brand-red);
	box-shadow: 0 0 0 4px rgba(211,47,47,0.15)
}

.interactive-search-form .form-control {
	font-size: 1.1rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--border-color);
	border-radius: 50px 0 0 50px;
	box-shadow: none !important;
	border-left: 0
}

.interactive-search-form .btn {
	border-radius: 0 50px 50px 0 !important;
	font-weight: 700;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	gap: .5rem
}

.interactive-search-form .btn i {
	transition: transform .3s ease
}

.interactive-search-form .btn:hover i {
	transform: rotate(15deg)
}

.popular-searches span {
	color: #6c757d;
	font-weight: 500;
	margin-left: .5rem
}

.popular-searches a {
	text-decoration: none;
	color: var(--text-dark);
	background-color: var(--light-gray-bg);
	padding: .4rem 1rem;
	border-radius: 50px;
	margin: .25rem;
	display: inline-block;
	font-size: .9rem;
	transition: all .3s ease;
	border: 1px solid var(--border-color)
}

.popular-searches a:hover {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	border-color: var(--brand-dark-blue);
	transform: translateY(-2px)
}

.dynamic-news-section {
	background-color: var(--brand-white)
}

#news-carousel {
	border-radius: 1rem;
	overflow: hidden;
	position: relative;
	box-shadow: 0 10px 30px rgba(0,33,68,.1)
}

#news-carousel .carousel-item {
	min-height: 450px
}

.main-news-image {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.main-news-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2.5rem 2rem;
	background: linear-gradient(180deg,transparent 0,rgba(0,0,0,0.8) 100%);
	color: var(--brand-white)
}

.news-meta {
	margin-bottom: .75rem
}

.news-category {
	font-size: .8rem;
	font-weight: 700
}

.news-date {
	margin-right: 1rem;
	font-size: .9rem;
	opacity: .8
}

.main-news-title {
	font-size: 1.8rem;
	color: var(--brand-white);
	margin-bottom: .5rem
}

.main-news-excerpt {
	font-size: 1rem;
	opacity: .9;
	margin-bottom: 1.5rem
}

.featured-stories-list {
	position: relative;
	padding-right: 2rem;
	height: 100%
}

.featured-stories-list::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg,var(--brand-red) 0,var(--brand-dark-blue) 100%);
	border-radius: 3px
}

.list-title {
	color: var(--brand-dark-blue);
	font-weight: 800;
	margin-bottom: 1.5rem
}

.featured-story-item {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: background-color .3s ease
}

.featured-story-item:hover {
	background-color: var(--light-gray-bg)
}

.featured-story-item.active {
	background-color: var(--light-gray-bg)
}

.featured-story-item.active .story-title {
	color: var(--brand-red)
}

.story-category {
	display: block;
	color: var(--brand-red);
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: .25rem
}

.story-title {
	font-weight: 700;
	color: var(--text-dark);
	margin: 0;
	transition: color .3s ease
}

.floating-header .navbar-nav .nav-link {
	font-weight: 700;
	color: var(--text-dark);
	transition: all .3s ease;
	padding: .5rem 1.25rem;
	position: relative
}

.floating-header .navbar-nav .nav-link::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background-color: var(--brand-red);
	border-radius: 3px;
	transition: width .3s ease
}

.floating-header .navbar-nav .nav-link.active::before,.floating-header .navbar-nav .nav-link:hover::before,.floating-header .dropdown-mega:hover>.nav-link::before {
	width: 25px
}

.header-actions .btn-brand-red {
	border-radius: 50px;
	font-weight: 700;
	padding: .5rem 1.25rem
}

.header-actions .header-icon-link {
	font-size: 1.2rem;
	color: var(--text-dark);
	transition: all .3s ease
}

.header-actions .header-icon-link:hover {
	color: var(--brand-red);
	transform: scale(1.1)
}

.floating-header .navbar>.container {
	position: relative
}

.floating-header .navbar-brand {
	position: absolute;
	top: 90%;
	right: 1rem;
	transform: translateY(-50%);
	z-index: 10;
	background-color: var(--brand-white);
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(0,33,68,0.1);
	border: 3px solid rgba(255,255,255,0.5)
}

.floating-header .navbar-brand img {
	height: 90px;
	width: 95px
}

.floating-header .navbar-brand span {
	display: none
}

@media(min-width:992px) {
	.floating-header .navbar-nav {
		margin-right: 100px
	}
}

.announcements-board-wrapper {
	background-color: var(--brand-white);
	border-radius: 1.5rem;
	box-shadow: 0 20px 60px rgba(0,33,68,0.1);
	border: 1px solid var(--border-color);
	overflow: hidden
}

.announcements-list-panel {
	height: 100%;
	display: flex;
	flex-direction: column
}

.announcements-list-panel .panel-header {
	padding: 1.5rem;
	border-bottom: 1px solid var(--border-color)
}

.announcements-list-panel .panel-header h4 {
	margin: 0;
	font-weight: 800;
	color: var(--brand-dark-blue)
}

.announcements-list-panel .panel-body {
	padding: .5rem;
	flex-grow: 1;
	overflow-y: auto
}

.announcement-item {
	padding: 1.25rem 1rem;
	border-radius: .75rem;
	cursor: pointer;
	margin-bottom: .5rem;
	transition: all .3s ease
}

.announcement-item:hover {
	background-color: var(--light-gray-bg)
}

.announcement-item.active {
	background-color: #e9ecef
}

.announcement-item.active .item-title {
	color: var(--brand-red)
}

.item-category {
	display: block;
	color: var(--brand-red);
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: .25rem
}

.item-title {
	font-weight: 700;
	margin-bottom: .5rem;
	color: var(--text-dark);
	transition: color .3s ease
}

.item-date {
	font-size: .85rem;
	color: #6c757d
}

.announcement-display-panel {
	background: linear-gradient(135deg,rgba(74,144,226,0.05) 0,rgba(74,144,226,0) 100%);
	padding: 3rem;
	border-right: 1px solid var(--border-color);
	min-height: 450px;
	position: relative;
	display: flex;
	align-items: center
}

@keyframes fadeInSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes fadeOutSlideUp {
	from {
		opacity: 1;
		transform: translateY(0)
	}

	to {
		opacity: 0;
		transform: translateY(-20px)
	}
}

.announcement-content {
	position: absolute;
	top: 0;
	left: 0;
	padding: 3rem;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease,transform .4s ease
}

.announcement-content.active {
	opacity: 1;
	pointer-events: auto;
	animation: fadeInSlideUp .5s ease-out forwards
}

.announcement-content.exiting {
	animation: fadeOutSlideUp .4s ease-in forwards
}

.content-icon {
	font-size: 2.5rem;
	color: var(--brand-red);
	margin-bottom: 1.5rem
}

.content-title {
	font-size: 1.8rem;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	flex-grow: 0
}

.content-excerpt {
	color: #555;
	line-height: 1.8;
	margin-bottom: 2rem;
	flex-grow: 1
}

@media(max-width:991.98px) {
	.faculty-tabs-nav-wrapper {
		position: static;
		top: auto;
		z-index: auto;
		margin-bottom: 2rem;
		padding: -5;
		box-shadow: none;
		border: 0;
		background-color: transparent
	}

	.faculty-tabs-nav-wrapper .nav-pills {
		flex-direction: column;
		justify-content: flex-start
	}

	.faculty-tabs-nav-wrapper .nav-item {
		margin: 0 0 .5rem 0
	}

	.faculty-tabs-nav-wrapper .nav-link {
		justify-content: flex-start;
		width: 100%;
		background-color: var(--brand-white);
		border: 1px solid var(--border-color);
		box-shadow: 0 5px 15px rgba(0,33,68,.05)
	}

	.faculty-tabs-nav-wrapper .nav-link::after {
		display: none
	}

	.faculty-tabs-nav-wrapper .nav-link.active {
		background-color: var(--brand-dark-blue);
		color: var(--brand-white);
		border-color: var(--brand-dark-blue);
		border-right: 5px solid var(--brand-red)
	}

	.faculty-tab-content {
		margin-top: 0
	}
}

.hero-main-content-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	color: #fff
}

@media(max-width:991.98px) {
	.announcement-display-panel {
		border-right: 0;
		border-top: 1px solid var(--border-color);
		padding: 2rem;
		min-height: auto
	}

	.content-title {
		font-size: 1.5rem
	}

	.content-excerpt {
		font-size: .95rem
	}

	.announcements-list-panel .panel-header {
		padding: 1.25rem
	}

	.announcements-list-panel .panel-body {
		max-height: 300px
	}
}

.map-contact-section {
	background-color: var(--body-bg)
}

.map-wrapper {
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,33,68,0.1);
	border: 1px solid var(--border-color)
}

.contact-info-card {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: 2.5rem;
	height: 100%;
	display: flex;
	flex-direction: column
}

.info-header {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.1)
}

.info-header i {
	font-size: 2.5rem;
	color: var(--brand-gold);
	margin-bottom: 1rem
}

.info-header h4 {
	color: var(--brand-white)
}

.info-body {
	flex-grow: 1
}

.info-item {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1.5rem
}

.info-item i {
	font-size: 1.5rem;
	color: var(--brand-gold);
	margin-top: 5px
}

.info-item h6 {
	color: rgba(255,255,255,0.8);
	font-size: .9rem;
	margin-bottom: .25rem;
	text-transform: uppercase
}

.info-item p {
	color: var(--brand-white);
	font-weight: 500;
	margin: 0
}

.map-iframe-container {
	height: 100%;
	min-height: 450px
}

.map-iframe-container iframe {
	width: 100%;
	height: 100%;
	filter: grayscale(90%);
	transition: filter .5s ease
}

.map-iframe-container:hover iframe {
	filter: grayscale(0)
}

@media(max-width:991px) {
	.map-wrapper .row {
		flex-direction: column-reverse
	}
}

.faculty-hero {
	padding: 6rem 0;
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--brand-white)
}

.faculty-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,51,102,0.75)
}

.faculty-hero-content {
	position: relative;
	z-index: 2
}

.faculty-hero .faculty-logo {
	height: 120px;
	border-radius: 50%;
	padding: 10px;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 25px rgba(0,0,0,0.3)
}

.faculty-hero .faculty-title {
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--brand-white);
	margin-top: 1.5rem
}

.faculty-hero .faculty-subtitle {
	font-size: 1.2rem;
	color: rgba(255,255,255,0.8)
}

.faculty-hub-section {
	padding: 3rem 0;
	background-color: var(--light-gray-bg);
	border-bottom: 1px solid var(--border-color)
}

.hub-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--brand-white);
	text-align: center;
	padding: 2.5rem 1.5rem;
	border-radius: 1rem;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(0,33,68,.05);
	transition: all .3s ease
}

.hub-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0,33,68,.1);
	background-color: var(--brand-dark-blue)
}

.hub-icon {
	font-size: 2.5rem;
	color: var(--brand-red);
	transition: all .3s ease
}

.hub-title {
	color: var(--brand-dark-blue);
	font-weight: 700;
	margin-top: 1rem;
	transition: all .3s ease
}

.hub-card:hover .hub-icon,.hub-card:hover .hub-title {
	color: var(--brand-white)
}

.about-tabs .nav-link {
	font-weight: 700;
	color: #6c757d
}

.about-tabs .nav-link.active {
	color: var(--brand-red);
	background-color: transparent;
	border-bottom: 2px solid var(--brand-red);
	border-radius: 0
}

.about-text {
	font-size: 1.1rem;
	line-height: 2
}

.section-title-simple {
	font-size: 1.8rem;
	font-weight: 800;
	margin-bottom: 2rem;
	border-right: 4px solid var(--brand-red);
	padding-right: 1rem
}

.departments-list {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem
}

.department-item {
	background-color: var(--brand-white);
	padding: .5rem 1.25rem;
	border: 1px solid var(--border-color);
	border-radius: 50px;
	font-weight: 500
}

.admin-link-card {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	background-color: var(--brand-white);
	text-decoration: none;
	padding: 1.5rem;
	margin-bottom: 1rem;
	border-radius: 1rem;
	border: 1px solid var(--border-color);
	transition: all .3s ease
}

.admin-link-card:hover {
	border-color: var(--brand-red);
	background-color: #fff;
	box-shadow: 0 10px 20px rgba(0,33,68,.08)
}

.admin-link-card i {
	font-size: 2rem;
	color: var(--brand-red)
}

.admin-link-text h6 {
	font-weight: 700;
	color: var(--brand-dark-blue)
}

.admin-link-text p {
	font-size: .9rem;
	color: #6c757d;
	margin: 0
}

.update-card {
	background-color: var(--light-gray-bg);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 1.5rem;
	height: 100%
}

.update-type {
	display: inline-block;
	padding: .25rem .75rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: 1rem
}

.update-type[data-type="red"] {
	background-color: rgba(211,47,47,0.1);
	color: var(--brand-red)
}

.update-type[data-type="blue"] {
	background-color: rgba(0,51,102,0.1);
	color: var(--brand-dark-blue)
}

.update-title a {
	color: var(--text-dark);
	text-decoration: none;
	font-weight: 700
}

.update-link {
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--brand-dark-blue)
}

.faculty-hub-section {
	background-color: var(--body-bg)
}

.faculty-tabs-nav-wrapper {
	background-color: var(--brand-white);
	padding: .1rem;
	border-radius: .75rem;
	box-shadow: 0 10px 30px rgba(0,33,68,.08);
	border: 1px solid var(--border-color);
	top: 60px;
	z-index: 998
}

.faculty-tabs-nav-wrapper .nav-pills {
	position: relative;
	justify-content: space-around
}

.faculty-tabs-nav-wrapper .nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-dark);
	padding: 1rem;
	border-radius: .5rem;
	background: 0;
	border: 0;
	transition: all .3s ease;
	position: relative;
	overflow: hidden
}

.faculty-tabs-nav-wrapper .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: var(--brand-red);
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(0.19,1,0.22,1)
}

.faculty-tabs-nav-wrapper .nav-link:hover {
	color: var(--brand-red)
}

.faculty-tabs-nav-wrapper .nav-link.active {
	color: var(--brand-red);
	background-color: var(--light-gray-bg)
}

.faculty-tabs-nav-wrapper .nav-link.active::after {
	transform: translateY(0)
}

.faculty-tab-content {
	background-color: var(--brand-white);
	padding: 2.5rem;
	border-radius: 1rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 10px 30px rgba(0,33,68,.08)
}

@media(max-width:991px) {
	.faculty-tabs-nav-wrapper .nav-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: .5rem;
		-ms-overflow-style: none;
		scrollbar-width: none
	}

	.faculty-tabs-nav-wrapper .nav-pills::-webkit-scrollbar {
		display: none
	}

	.faculty-tabs-nav-wrapper .nav-item {
		flex-shrink: 0
	}

	.faculty-tab-content {
		padding: 1.5rem
	}
}

.tab-content .fade-in-section {
	animation: fadeIn .8s ease-out
}

.tab-section-title {
	font-weight: 800;
	color: var(--brand-dark-blue);
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 3px solid var(--brand-red);
	display: inline-block
}

.tab-section-title:first-child {
	margin-top: 0
}

.about-text {
	font-size: 1.1rem;
	line-height: 2
}

.honor-profile-card {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background-color: var(--brand-white);
	padding: 1.5rem;
	border-radius: 1rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 5px 20px rgba(0,33,68,.06);
	transition: all .3s ease-in-out;
	height: 100%
}

.honor-profile-card:hover {
	transform: scale(1.03);
	box-shadow: 0 15px 35px rgba(0,33,68,.1)
}

.profile-image {
	position: relative;
	flex-shrink: 0
}

.profile-image img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%
}

.honor-profile-card.faculty .profile-image img {
	border-color: var(--brand-gold)
}

.honor-profile-card.student .profile-image img {
	border-color: var(--brand-red)
}

.profile-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background-color: var(--brand-dark-blue);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white
}

.profile-badge>span {
	display: none
}

.profile-info {
	text-align: right
}

.profile-name {
	font-weight: 800;
	margin-bottom: .5rem
}

.profile-achievement {
	color: var(--text-muted);
	font-size: .95rem;
	line-height: 1.7;
	margin: 0
}

.honor-divider {
	border: 0;
	height: 1px;
	background: linear-gradient(to left,transparent,var(--border-color),transparent);
	margin: 3rem 0
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1rem
}

.tag {
	background-color: var(--light-gray-bg);
	padding: .5rem 1.25rem;
	border: 1px solid var(--border-color);
	border-radius: 50px;
	font-weight: 500
}

.updates-list-wrapper {
	max-height: 400px;
	overflow-y: auto;
	padding-right: 1rem
}

.update-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--border-color)
}

.update-item:first-child {
	border-top: 1px solid var(--border-color)
}

.update-item h6 {
	margin: 0
}

.update-item h6 a {
	color: var(--text-dark);
	text-decoration: none;
	font-weight: 700
}

.update-item .date {
	font-size: .9rem;
	color: #6c757d;
	flex-shrink: 0
}

.link-list {
	list-style-type: none;
	padding-right: 0
}

.link-list li {
	margin-bottom: .75rem
}

.link-list a {
	text-decoration: none;
	font-weight: 500;
	color: var(--text-dark)
}

.link-list a:hover {
	color: var(--brand-red)
}

.link-list a::before {
	content: '•';
	color: var(--brand-red);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: .5em
}

.faculty-main-nav {
	background-color: var(--brand-white);
	box-shadow: 0 5px 15px rgba(0,33,68,.08);
	border-bottom: 1px solid var(--border-color);
	padding: .5rem 0;
	z-index: 999
}

.faculty-main-nav .nav-pills .nav-item {
	margin: 0 .25rem
}

.faculty-main-nav .nav-link {
	font-weight: 700;
	color: var(--text-dark);
	padding: .75rem 1.5rem;
	border-radius: .5rem;
	transition: all .3s ease
}

.faculty-main-nav .nav-link.active,.faculty-main-nav .nav-link:hover {
	color: var(--brand-white);
	background-color: var(--brand-red)
}

.faculty-tab-content {
	background-color: var(--body-bg)
}

.info-card {
	background-color: var(--light-gray-bg);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 2rem;
	height: 100%;
	text-align: center
}

.info-card.highlight {
	background-color: var(--light-gray-bg);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	padding: 2rem;
	height: 100%;
	text-align: center
}

.info-card.highlight p {
	color: rgba(8, 46, 77, 0.8)
}

.info-card.highlight .info-icon {
	background-color: rgba(255,255,255,0.1);
	color: var(--brand-white)
}

.info-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--brand-white);
	color: var(--brand-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	margin-bottom: 1.5rem
}

.info-card h3,.info-card h5 {
	font-weight: 700
}

.info-card p {
	margin-top: 1rem
}

.section-title-simple {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--brand-dark-blue);
	margin-bottom: 2rem;
	border-bottom: 3px solid var(--brand-red);
	padding-bottom: 1rem;
	display: inline-block
}

.checklist {
	list-style: none;
	padding: 0;
	margin-top: 1rem
}

.checklist li {
	margin-bottom: .75rem;
	font-weight: 500
}

.checklist i {
	margin-left: .5rem
}

.resource-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--brand-white);
	text-decoration: none;
	padding: 1.5rem;
	border-radius: .75rem;
	border: 1px solid var(--border-color);
	height: 100%;
	transition: all .3s ease
}

.resource-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,33,68,.08);
	border-color: var(--brand-red)
}

.resource-card i {
	font-size: 1.5rem;
	color: var(--brand-red)
}

.resource-card span {
	font-weight: 700;
	color: var(--brand-dark-blue)
}

.resource-card.small-card {
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--light-gray-bg)
}

.resource-card.small-card h6 {
	font-weight: 700
}

.resource-card.small-card p {
	font-size: .9rem;
	color: #6c757d;
	margin: 0
}

.resource-card.compact {
	padding: .75rem 1rem;
	flex-direction: column;
	text-align: center;
	gap: .5rem
}

.resource-card.compact i {
	margin-bottom: .25rem
}

.key-sections,.research-section,.news-section,.colleges-section,.directorates-grid-section,.explore-search-section,.announcements-board-section,.dynamic-news-section,.faculty-hub-section,.cascading-updates-section,.results-reveal-section,.about-section {
	background-color: transparent !important
}

.dean-premium-card {
	display: flex;
	flex-direction: row;
	border-radius: 1.5rem;
	box-shadow: 0 15px 40px rgba(0,33,68,0.08);
	border: 0;
	border-right-color: #e9ecef;
	border-bottom-color: #e9ecef;
	overflow: hidden;
	position: relative;
	transition: all .4s ease;
	margin-bottom: 4rem;
	background: linear-gradient(rgba(255,255,255,0.95),rgba(224,224,224,0.76))
}

.dean-premium-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1.5rem;
	box-shadow: 0 0 0 3px transparent;
	transition: box-shadow .4s ease;
	pointer-events: none
}

.dean-premium-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 25px 50px rgba(0,33,68,0.12)
}

.dean-premium-card:hover::after {
	box-shadow: 0 0 0 3px var(--brand-red)
}

.dean-image-wrapper {
	flex-basis: 200px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: linear-gradient(rgba(255,255,255,0.95),rgba(224,224,224,0.76));
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: center
}

.dean-image-wrapper img {
	width: 280px;
	height: 280px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.1);
	box-shadow: inset 0 0 10px rgba(0,0,0,0.5),0 10px 20px rgba(0,0,0,0.3);
	transition: transform .4s ease
}

.dean-premium-card:hover .dean-image-wrapper img {
	transform: scale(1.05)
}

.dean-info-wrapper {
	padding: 2.5rem;
	flex-grow: 1
}

.dean-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-red);
	margin-bottom: .5rem;
	text-transform: uppercase
}

.dean-name {
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
	font-weight: 800
}

.divider {
	height: 4px;
	width: 80px;
	background: var(--brand-gold);
	border-radius: 2px;
	margin-bottom: 1.5rem
}

.dean-message {
	font-size: 1.05rem;
	line-height: 1.9;
	color: var(--text-muted)
}

@media(max-width:991px) {
	.dean-premium-card {
		flex-direction: column
	}

	.dean-image-wrapper {
		flex-basis: auto;
		padding: 2rem 1rem
	}

	.dean-info-wrapper {
		text-align: center
	}

	.divider {
		margin-left: auto;
		margin-right: auto
	}
}

.hero-video-container {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	overflow: hidden
}

.hero-video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.floating-header {
	transition: all .3s cubic-bezier(0.25,0.46,0.45,0.94);
	transform-origin: top center;
	will-change: transform,opacity
}

.floating-header.scrolled {
	box-shadow: 0 4px 20px rgba(0,33,68,0.1)
}

.floating-header .navbar-brand {
	transition: all .3s ease
}

.floating-header.scrolled .navbar-brand img {
	height: 60px;
	width: 60px
}

.floating-header.scrolled .navbar-nav .nav-link {
	padding: .4rem 1rem;
	font-size: .95rem
}

.hero-slider-section {
	transition: transform .3s cubic-bezier(0.25,0.46,0.45,0.94),opacity .3s cubic-bezier(0.25,0.46,0.45,0.94);
	transform-origin: top center;
	will-change: transform,opacity
}

.hero-video-container {
	transition: transform .3s ease-out
}

.main-news-slider {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,33,68,.15)
}

.main-news-slider .carousel {
	border-radius: 1.5rem
}

.main-news-slider .carousel-inner {
	border-radius: 1.5rem
}

.main-news-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 500px;
	background: var(--brand-white)
}

.main-news-card .news-image {
	position: relative;
	overflow: hidden
}

.main-news-card .news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease
}

.main-news-card:hover .news-image img {
	transform: scale(1.05)
}

.main-news-card .news-content {
	padding: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.main-news-card .news-category {
	display: inline-block;
	background: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: .5rem 1rem;
	border-radius: 50px;
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: 1.5rem
}

.main-news-card .news-title {
	color: var(--brand-dark-blue);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 1.5rem
}

.main-news-card .news-excerpt {
	color: #6c757d;
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 2rem
}

.main-news-card .news-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto
}

.main-news-card .news-date {
	color: var(--brand-red);
	font-weight: 600
}

.main-news-card .read-more {
	color: var(--brand-dark-blue);
	text-decoration: none;
	font-weight: 700;
	transition: color .3s ease
}

.main-news-card .read-more:hover {
	color: var(--brand-red)
}

.carousel-controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 5;
	pointer-events: none
}

.carousel-control-prev,.carousel-control-next {
	position: absolute;
	width: 60px;
	height: 60px;
	background: var(--brand-white);
	border: 0;
	border-radius: 50%;
	color: var(--brand-dark-blue);
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 20px rgba(0,33,68,.2);
	transition: all .3s ease;
	pointer-events: all;
	opacity: 0
}

.main-news-slider:hover .carousel-control-prev,.main-news-slider:hover .carousel-control-next {
	opacity: 1
}

.carousel-control-prev {
	left: 2rem
}

.carousel-control-next {
	right: 2rem
}

.carousel-control-prev:hover,.carousel-control-next:hover {
	background: var(--brand-dark-blue);
	color: var(--brand-white);
	transform: scale(1.1)
}

.carousel-indicators {
	position: absolute;
	bottom: 2rem;
	left: 0;
	right: 0;
	margin: 0;
	gap: .5rem
}

.carousel-indicators button {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--brand-white);
	background: transparent;
	opacity: .7;
	transition: all .3s ease
}

.carousel-indicators button.active {
	background: var(--brand-white);
	opacity: 1;
	transform: scale(1.2)
}

.secondary-news-grid .news-card {
	background: var(--brand-white);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,33,68,.08);
	transition: all .3s ease;
	height: 100%
}

.secondary-news-grid .news-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0,33,68,.15)
}

.secondary-news-grid .news-image {
	height: 200px;
	overflow: hidden
}

.secondary-news-grid .news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease
}

.secondary-news-grid .news-card:hover .news-image img {
	transform: scale(1.1)
}

.secondary-news-grid .news-content {
	padding: 1.5rem
}

.secondary-news-grid .news-category {
	display: inline-block;
	background: rgba(0,51,102,0.1);
	color: var(--brand-dark-blue);
	padding: .25rem .75rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: 1rem
}

.secondary-news-grid .news-title {
	color: var(--brand-dark-blue);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: .75rem
}

.secondary-news-grid .news-excerpt {
	color: #6c757d;
	font-size: .9rem;
	line-height: 1.6;
	margin-bottom: 1rem
}

.secondary-news-grid .news-date {
	color: var(--brand-red);
	font-size: .85rem;
	font-weight: 600
}

@media(max-width:991px) {
	.main-news-card {
		grid-template-columns: 1fr;
		min-height: auto
	}

	.main-news-card .news-image {
		height: 300px
	}

	.main-news-card .news-content {
		padding: 2rem
	}

	.main-news-card .news-title {
		font-size: 1.5rem
	}

	.main-news-card .news-meta {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start
	}

	.carousel-control-prev,.carousel-control-next {
		width: 50px;
		height: 50px;
		opacity: .7
	}

	.carousel-control-prev {
		left: 1rem
	}

	.carousel-control-next {
		right: 1rem
	}
}

@media(max-width:768px) {
	.carousel-indicators {
		bottom: 1rem
	}

	.carousel-indicators button {
		width: 8px;
		height: 8px
	}
}

.announcement-filters {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: flex-end
}

.filter-btn {
	background: var(--brand-white);
	border: 2px solid var(--border-color);
	color: var(--text-dark);
	padding: .5rem 1rem;
	border-radius: 50px;
	font-weight: 600;
	font-size: .9rem;
	transition: all .3s ease;
	cursor: pointer
}

.filter-btn.active,.filter-btn:hover {
	background: var(--brand-dark-blue);
	border-color: var(--brand-dark-blue);
	color: var(--brand-white);
	transform: translateY(-2px)
}

.announcements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
	gap: 1.5rem
}

.announcement-card {
	background: var(--brand-white);
	border-radius: 1rem;
	padding: 1.5rem;
	box-shadow: 0 5px 20px rgba(0,33,68,.08);
	transition: all .3s ease;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-color)
}

.announcement-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 40px rgba(0,33,68,.15)
}

.announcement-card.urgent {
	border-left: 4px solid var(--brand-red);
	background: linear-gradient(135deg,#fff,#fff5f5)
}

.card-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--brand-red);
	color: var(--brand-white);
	padding: .5rem 1rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .5rem;
	animation: pulse 2s infinite
}

@keyframes pulse {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.05)
	}

	100% {
		transform: scale(1)
	}
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem
}

.category-tag {
	padding: .4rem 1rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--brand-white)
}

.admission-tag {
	background: var(--brand-dark-blue)
}

.results-tag {
	background: var(--brand-red)
}

.instructions-tag {
	background: #17a2b8
}

.courses-tag {
	background: #28a745
}

.general-tag {
	background: #6c757d
}

.competitions-tag {
	background: #ffc107;
	color: #212529
}

.date-badge {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: #6c757d;
	font-size: .85rem;
	font-weight: 500
}

.card-body {
	margin-bottom: 1.5rem
}

.card-title {
	color: var(--brand-dark-blue);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 1rem
}

.card-excerpt {
	color: #6c757d;
	line-height: 1.7;
	margin-bottom: 1.5rem
}

.deadline-counter {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: rgba(220,53,69,0.1);
	padding: .75rem 1rem;
	border-radius: .5rem;
	color: var(--brand-red);
	font-weight: 600;
	margin-bottom: 1rem
}

.stats-info {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem
}

.stat-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: #6c757d;
	font-size: .9rem
}

.features-list {
	list-style: none;
	padding: 0;
	margin-bottom: 1rem
}

.features-list li {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .5rem;
	color: #495057
}

.features-list li i {
	color: var(--brand-red);
	font-size: .8rem
}

.course-details {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: 1rem
}

.detail-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: #6c757d;
	font-size: .9rem
}

.prizes-info {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-bottom: 1rem
}

.prize-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-weight: 600
}

.prize-item .gold {
	color: #ffc107
}

.prize-item .silver {
	color: #6c757d
}

.card-footer {
	border-top: 1px solid var(--border-color);
	padding-top: 1.5rem
}

.card-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap
}

.btn-primary {
	background: var(--brand-dark-blue);
	border-color: var(--brand-dark-blue);
	color: var(--brand-white);
	font-weight: 600
}

.btn-primary:hover {
	background: #024;
	border-color: #024;
	transform: translateY(-2px)
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--border-color);
	color: var(--text-dark);
	font-weight: 600
}

.btn-outline:hover {
	border-color: var(--brand-dark-blue);
	background: var(--brand-dark-blue);
	color: var(--brand-white)
}

.card-meta {
	display: flex;
	gap: 1.5rem
}

.meta-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: #6c757d;
	font-size: .9rem
}

.announcement-card {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp .6s ease forwards
}

.announcement-card:nth-child(1) {
	animation-delay: .1s
}

.announcement-card:nth-child(2) {
	animation-delay: .2s
}

.announcement-card:nth-child(3) {
	animation-delay: .3s
}

.announcement-card:nth-child(4) {
	animation-delay: .4s
}

.announcement-card:nth-child(5) {
	animation-delay: .5s
}

.announcement-card:nth-child(6) {
	animation-delay: .6s
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@media(max-width:991px) {
	.announcements-grid {
		grid-template-columns: repeat(auto-fit,minmax(350px,1fr))
	}

	.announcement-filters {
		justify-content: center;
		margin-top: 1rem
	}

	.card-header {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start
	}

	.card-actions {
		flex-direction: column
	}

	.card-actions .btn {
		width: 100%;
		justify-content: center
	}

	.stats-info {
		flex-direction: column;
		gap: .75rem
	}

	.card-meta {
		flex-direction: column;
		gap: .75rem
	}
}

@media(max-width:768px) {
	.announcements-grid {
		grid-template-columns: 1fr
	}

	.announcement-card {
		padding: 1.25rem
	}
}

.scroll-reveal {
	opacity: 0;
	transform: translateY(50px);
	transition: all .8s cubic-bezier(0.25,0.46,0.45,0.94)
}

.scroll-reveal.revealed {
	opacity: 1;
	transform: translateY(0)
}

.announcement-card {
	transition: all .6s cubic-bezier(0.25,0.46,0.45,0.94)
}

.announcement-card.scroll-reveal {
	transform: translateX(-50px);
	opacity: 0
}

.announcement-card.scroll-reveal.revealed {
	transform: translateX(0);
	opacity: 1
}

.news-card.scroll-reveal {
	transform: scale(0.9) translateY(50px);
	opacity: 0
}

.news-card.scroll-reveal.revealed {
	transform: scale(1) translateY(0);
	opacity: 1
}

.main-news-card.scroll-reveal {
	transform: translateY(100px) rotateX(10deg);
	opacity: 0
}

.main-news-card.scroll-reveal.revealed {
	transform: translateY(0) rotateX(0);
	opacity: 1
}

.ripple-effect {
	position: relative;
	overflow: hidden
}

.ripple-effect::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg,rgba(74,144,226,0.1) 0,rgba(74,144,226,0) 50%,rgba(74,144,226,0.1) 100%);
	transform: translateX(-100%);
	transition: transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
	z-index: 1
}

.ripple-effect.revealed::before {
	transform: translateX(100%)
}

.floating-shadow {
	transition: all .6s cubic-bezier(0.25,0.46,0.45,0.94);
	box-shadow: 0 5px 15px rgba(0,33,68,.1)
}

.floating-shadow.revealed {
	box-shadow: 0 20px 40px rgba(0,33,68,.15),0 0 0 1px rgba(74,144,226,0.1)
}

.gradient-reveal {
	position: relative
}

.gradient-reveal::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg,var(--brand-light-blue) 0,transparent 30%,transparent 70%,var(--brand-red) 100%);
	opacity: 0;
	transition: opacity 1s ease;
	z-index: -1;
	border-radius: inherit
}

.gradient-reveal.revealed::after {
	opacity: .03
}

.text-reveal {
	position: relative;
	overflow: hidden
}

.text-reveal::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--brand-dark-blue);
	transform: translateX(-100%);
	transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
	z-index: 2
}

.text-reveal.revealed::before {
	transform: translateX(100%)
}

.parallax-bg {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover
}

.stagger-item {
	opacity: 0;
	transform: translateY(30px);
	transition: all .6s cubic-bezier(0.25,0.46,0.45,0.94)
}

.stagger-item.revealed {
	opacity: 1;
	transform: translateY(0)
}

.vibrate-on-reveal {
	animation: gentleVibrate .8s ease-out
}

@keyframes gentleVibrate {
	0%,100% {
		transform: translateX(0)
	}

	25% {
		transform: translateX(-3px)
	}

	50% {
		transform: translateX(3px)
	}

	75% {
		transform: translateX(-2px)
	}
}

.rotate-3d {
	transform-style: preserve-3d;
	perspective: 1000px
}

.rotate-3d.scroll-reveal {
	transform: rotateY(15deg) translateZ(50px);
	opacity: 0
}

.rotate-3d.scroll-reveal.revealed {
	transform: rotateY(0) translateZ(0);
	opacity: 1
}

.fade-sequence>* {
	opacity: 0;
	transform: translateY(20px);
	transition: all .6s cubic-bezier(0.25,0.46,0.45,0.94)
}

.fade-sequence.revealed>* {
	opacity: 1;
	transform: translateY(0)
}

.fade-sequence.revealed>*:nth-child(1) {
	transition-delay: .1s
}

.fade-sequence.revealed>*:nth-child(2) {
	transition-delay: .2s
}

.fade-sequence.revealed>*:nth-child(3) {
	transition-delay: .3s
}

.fade-sequence.revealed>*:nth-child(4) {
	transition-delay: .4s
}

.fade-sequence.revealed>*:nth-child(5) {
	transition-delay: .5s
}

.scroll-indicators {
	position: fixed;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(0,51,102,0.3);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all .3s ease;
	position: relative
}

.indicator.active {
	background: var(--brand-red);
	transform: scale(1.3);
	box-shadow: 0 0 0 2px rgba(211,47,47,0.3)
}

.indicator::before {
	content: attr(data-section);
	position: absolute;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	background: var(--brand-dark-blue);
	color: white;
	padding: .5rem 1rem;
	border-radius: .5rem;
	font-size: .8rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity .3s ease;
	white-space: nowrap
}

.indicator:hover::before {
	opacity: 1
}

@media(max-width:768px) {
	.scroll-indicators {
		right: 1rem
	}

	.indicator::before {
		display: none
	}
}

.results-reveal-section {
	background-color: var(--light-gray-bg)
}

.explorer-panel {
	background-color: var(--brand-white);
	border-radius: 1rem;
	box-shadow: 0 15px 50px rgba(0,33,68,0.1);
	border: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.explorer-header {
	display: flex;
	align-items: center;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border-color);
	background-color: #fcfdff
}

.explorer-title {
	margin: 0;
	flex-grow: 1;
	text-align: center;
	color: var(--brand-dark-blue);
	font-weight: 800
}

.explorer-back-btn {
	background: transparent;
	border: 1px solid var(--border-color);
	color: var(--text-dark);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease
}

.explorer-back-btn:disabled {
	opacity: .3;
	cursor: not-allowed
}

.explorer-back-btn:not(:disabled):hover {
	background-color: var(--light-gray-bg)
}

.explorer-breadcrumb {
	padding: .5rem 1.5rem;
	background-color: var(--light-gray-bg);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	min-height: 38px
}

.explorer-breadcrumb a {
	color: #6c757d;
	text-decoration: none;
	font-weight: 500;
	font-size: .9rem
}

.explorer-breadcrumb a:not(.active):hover {
	text-decoration: underline
}

.explorer-breadcrumb a.active {
	color: var(--brand-red);
	font-weight: 700
}

.explorer-breadcrumb a:not(:last-child)::after {
	content: '>';
	margin: 0 .5rem;
	color: #ced4da
}

.explorer-content-container {
	min-height: 450px;
	position: relative;
	padding: .5rem;
	transition: opacity .3s ease
}

.explorer-content-container.is-loading {
	opacity: 0
}

.explorer-item {
	display: flex;
	align-items: center;
	padding: 1rem 1.5rem;
	border-radius: .75rem;
	text-decoration: none;
	color: var(--text-dark);
	font-weight: 500;
	font-size: 1.1rem;
	transition: all .3s ease;
	border: 1px solid transparent
}

.explorer-item:hover {
	background-color: #f8f9fa;
	border-color: var(--border-color);
	transform: translateX(5px)
}

.explorer-item i {
	color: var(--brand-red);
	width: 40px;
	font-size: 1.25rem
}

.explorer-item span {
	flex-grow: 1
}

.item-arrow {
	font-size: .9rem;
	color: #ced4da;
	transition: transform .3s ease
}

.explorer-item:hover .item-arrow {
	transform: translateX(-5px);
	color: var(--brand-red)
}

.loader-container {
	padding: 5rem 0;
	display: flex;
	justify-content: center
}

.empty-message {
	text-align: center;
	padding: 5rem 0;
	color: #eef1f3;
	font-size: 1.1rem
}

body {
	padding-top: 140px;
	transition: padding-top .4s ease
}

#siteHeader {
	transition: all .4s ease;
	box-shadow: 0 5px 20px rgba(0,33,68,.1)
}

.pre-header {
	background-color: var(--brand-dark-blue);
	color: rgba(255,255,255,0.7);
	padding: .4rem 3;
	font-size: .85rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	overflow: hidden;
	max-height: 50px;
	transition: max-height .4s ease,padding .4s ease,opacity .2s ease
}

.pre-header a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: color .3s ease
}

.pre-header a:hover {
	color: var(--brand-white)
}

.ministry-logo {
	display: flex;
	align-items: center
}

.ministry-logo img {
	height: 35px;
	margin-left: 10px;
	filter: brightness(0) invert(1) opacity(0.8)
}

.ministry-logo span {
	font-weight: 500
}

.info-item i {
	color: var(--brand-gold);
	margin-left: 5px
}

.pre-header .social-icons {
	margin-left: 1.5rem;
	display: flex;
	gap: 1rem
}

.pre-header .social-icons a {
	font-size: 1rem
}

.lang-switcher {
	border-right: 1px solid rgba(255,255,255,0.1);
	padding-right: 1.5rem
}

.lang-switcher a {
	font-weight: 700
}

.lang-switcher i {
	margin-left: 5px
}

.main-header .navbar {
	padding: .05rem 0;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	transition: all .4s ease;
	font-size: 1rem
}

.navbar-brand {
	display: flex;
	align-items: center;
	gap: 15px
}

.navbar-brand img {
	height: 70px;
	width: 70px;
	border-radius: 50%;
	border: 3px solid var(--brand-white);
	box-shadow: 0 4px 10px rgba(0,33,68,.1);
	transition: all .4s ease
}

.brand-text {
	display: flex;
	flex-direction: column
}

.brand-text .main-title {
	font-weight: 800;
	color: var(--brand-dark-blue);
	font-size: 1.4rem;
	line-height: 1.2
}

.brand-text .sub-title {
	font-size: .8rem;
	color: #6c757d;
	text-transform: uppercase
}

.main-header .navbar-nav .nav-link {
	font-weight: 700;
	color: var(--text-dark);
	padding: .5rem 1.25rem;
	position: relative;
	transition: color .3s ease
}

.main-header .navbar-nav .nav-link::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background-color: var(--brand-red);
	border-radius: 3px;
	transition: width .3s ease
}

.main-header .nav-link.active,.main-header .nav-link:hover {
	color: var(--brand-red)
}

.main-header .nav-link.active::before,.main-header .nav-link:hover::before,.main-header .dropdown-mega:hover>.nav-link::before {
	width: 25px
}

.header-actions .btn-brand-red {
	border-radius: 50px;
	font-weight: 700;
	padding: .6rem 1.5rem
}

.header-actions .header-icon-link {
	font-size: 1.3rem;
	color: var(--text-dark);
	transition: color .3s ease
}

.header-actions .header-icon-link:hover {
	color: var(--brand-red)
}

#siteHeader.scrolled .pre-header {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	border: 0
}

#siteHeader.scrolled .main-header .navbar {
	padding: .12rem 0;
	background: rgba(255,255,255,0.9)
}

#siteHeader.scrolled .navbar-brand img {
	height: 30px;
	width: 31px
}

#siteHeader.scrolled .brand-text .main-title {
	font-size: 1rem
}

#siteHeader.scrolled .brand-text .sub-title {
	font-size: 0
}

@media(max-width:991.98px) {
	body {
		padding-top: 85px
	}

	.navbar-brand img {
		height: 50px;
		width: 50px
	}

	.brand-text .main-title {
		font-size: 1.1rem
	}

	.navbar-collapse {
		background: rgba(255,255,255,0.95);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		margin-top: 1rem;
		padding: 1rem;
		border-radius: 1rem;
		border: 1px solid rgba(0,0,0,0.05);
		box-shadow: 0 10px 30px rgba(0,33,68,0.1)
	}
}

.footer-wave-divider {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg)
}

.footer-wave-divider svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 120px
}

.footer-wave-divider .shape-fill {
	fill: var(--brand-dark-blue)
}

.site-footer-v2 {
	background-color: var(--brand-dark-blue);
	color: rgba(255,255,255,0.7);
	font-size: .95rem;
	padding-top: 4rem
}

.footer-subscribe-zone {
	padding: 2rem;
	background: rgba(0,0,0,0.2);
	border-radius: 1rem;
	margin-bottom: 4rem;
	border: 1px solid rgba(255,255,255,0.1)
}

.footer-subscribe-zone h4 {
	color: var(--brand-white);
	margin: 0 0 .5rem 0
}

.footer-subscribe-zone p {
	margin: 0;
	opacity: .8
}

.subscribe-form {
	display: flex;
	border-radius: 50px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.2)
}

.subscribe-form .form-control {
	background: transparent;
	border: 0;
	padding: .75rem 1.5rem;
	color: white;
	box-shadow: none;
	flex-grow: 1
}

.subscribe-form .form-control::placeholder {
	color: rgba(255,255,255,0.5)
}

.subscribe-form .btn {
	border-radius: 50px;
	padding: .75rem 2rem;
	font-weight: 700;
	border: 0;
	flex-shrink: 0
}

.footer-widget .widget-title {
	color: var(--brand-white);
	font-weight: 700;
	margin-bottom: 1.5rem;
	position: relative;
	padding-bottom: .75rem
}

.footer-widget .widget-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40px;
	height: 3px;
	background: var(--brand-gold);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s ease
}

.footer-widget:hover .widget-title::after {
	transform: scaleX(1)
}

.footer-tagline {
	font-size: 1rem;
	line-height: 1.8;
	opacity: .9
}

.footer-links li {
	margin-bottom: .75rem
}

.footer-links a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: all .3s ease
}

.footer-links a:hover {
	color: var(--brand-gold);
	transform: translateX(5px)
}

.contact-info li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem
}

.contact-info i {
	color: var(--brand-gold);
	font-size: 1.1rem;
	margin-top: 5px
}

.contact-info div a {
	color: rgba(255,255,255,0.9);
	text-decoration: none
}

.contact-info div a:hover {
	text-decoration: underline
}

.social-icons {
	display: flex;
	gap: .75rem
}

.social-icons a {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	color: var(--brand-white);
	background-color: rgba(255,255,255,0.1);
	border: 1px solid transparent;
	border-radius: 50%;
	text-decoration: none;
	transition: all .3s ease
}

.social-icons a:hover {
	background-color: var(--brand-red);
	transform: translateY(-4px) scale(1.1);
	box-shadow: 0 5px 10px rgba(0,0,0,0.3)
}

.footer-bottom-zone {
	margin-top: 3rem;
	padding: 1.5rem 0;
	background-color: rgba(0,0,0,0.2);
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: .9rem
}

.copyright-text {
	margin: 0;
	opacity: .7
}

.policy-links a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	margin: 0 .5rem
}

.policy-links a:hover {
	color: var(--brand-white)
}

.key-sections,.featured-area,.explore-search-section,.enhanced-announcements-section,.enhanced-news-section,.research-section,.colleges-section,.directorates-grid-section,.gallery-section,.services-section {
	background: none !important;
	background-color: transparent !important;
	border: none !important
}

@keyframes section-icon-float-1 {
	0%,100% {
		transform: translate(0,0) rotate(0)
	}

	50% {
		transform: translate(-30px,20px) rotate(8deg)
	}
}

@keyframes section-icon-float-2 {
	0%,100% {
		transform: translate(0,0) rotate(0)
	}

	50% {
		transform: translate(20px,-15px) rotate(-5deg)
	}
}

@keyframes section-icon-float-3 {
	0%,100% {
		transform: translate(0,0)
	}

	50% {
		transform: translate(5px,25px)
	}
}

.has-icon-backdrop {
	position: relative;
	z-index: 1
}

.icons-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
	pointer-events: none
}

.icons-backdrop>i {
	position: absolute;
	color: var(--brand-dark-blue);
	opacity: .06;
	animation-name: section-icon-float-1;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite
}

.icons-backdrop>i:nth-child(2n) {
	animation-name: section-icon-float-2;
	animation-duration: 12s
}

.icons-backdrop>i:nth-child(3n) {
	animation-name: section-icon-float-3;
	animation-duration: 18s
}

.icons-backdrop>i:nth-child(4n) {
	animation-delay: -5s
}

.cascading-updates-section {
	position: relative;
	background-color: #f8f9fafd;
	color: var(--text-dark);
	overflow: hidden
}

.cascading-pin-wrapper {
	height: 100vh;
	width: 100%;
	position: sticky;
	top: 0;
	background-color: transparent
}

.cascading-pin-wrapper .row {
	height: 100%
}

.cascading-lottie-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative
}

.cascading-lottie-item {
	position: absolute;
	width: 90%;
	max-width: 500px;
	height: 60vh;
	max-height: 450px;
	background-color: #fff;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.95);
	transition: opacity .5s ease,transform .5s ease
}

.cascading-lottie-item.is-active {
	opacity: 1;
	transform: scale(1)
}

.cascading-lottie-item lottie-player {
	width: 100%;
	height: 100%
}

.cascading-text-panel {
	position: relative;
	height: 100%
}

.cascading-text-item {
	position: absolute;
	width: 100%;
	top: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) translateY(30px);
	transition: opacity .5s ease,transform .5s ease,visibility 0s .5s
}

.cascading-text-item.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%);
	transition: opacity .5s ease,transform .5s ease,visibility 0s 0s
}

.cascading-text-item .item-icon {
	font-size: 2rem;
	color: var(--brand-red);
	margin-bottom: 1.5rem
}

.cascading-text-item .item-title {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--brand-dark-blue);
	margin-bottom: 1.5rem
}

.cascading-text-item .item-description {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #555;
	max-width: 95%
}

@media(max-width:991.98px) {
	.cascading-updates-section {
		height: auto;
		padding: 4rem 0
	}

	.cascading-pin-wrapper {
		position: static;
		height: auto
	}

	.cascading-pin-wrapper .row {
		flex-direction: column
	}

	.cascading-lottie-container {
		margin-bottom: 3rem
	}

	.cascading-lottie-item {
		position: relative;
		display: block;
		opacity: 1;
		transform: none;
		height: auto;
		aspect-ratio: 16/9;
		max-height: none
	}

	.cascading-text-panel {
		min-height: auto;
		text-align: center
	}

	.cascading-text-item {
		position: relative;
		top: auto;
		transform: none;
		opacity: 1;
		visibility: visible;
		margin-bottom: 3rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid var(--border-color)
	}

	.cascading-text-item:last-child {
		border-bottom: 0
	}

	#research .cascading-lottie-item,#research .cascading-text-item {
		display: none
	}
}

.card-badge {
	position: absolute;
	top: 1rem;
	left: -30px;
	background: var(--brand-red);
	color: var(--brand-white);
	padding: .3rem 2rem;
	font-size: .8rem;
	font-weight: 700;
	transform: rotate(-45deg)
}

.card-badge i {
	display: none
}

.announcement-card .card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem;
	padding: 1.5rem 1.5rem 0
}

.category-tag {
	padding: .4rem 1rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--brand-white)
}

.admission-tag {
	background: var(--brand-dark-blue)
}

.results-tag {
	background: var(--brand-red)
}

.courses-tag {
	background: #17a2b8
}

.competitions-tag {
	background: #ffc107;
	color: #212529
}

.date-badge {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: #6c757d;
	font-size: .85rem;
	font-weight: 500
}

.announcement-card .card-body {
	padding: 0 1.5rem 1.5rem
}

.card-title a {
	color: var(--brand-dark-blue);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: color .3s
}

.card-title a:hover {
	color: var(--brand-red)
}

.card-excerpt {
	color: #6c757d;
	line-height: 1.7;
	margin: 1rem 0;
	font-size: .95rem
}

.deadline-counter {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: rgba(220,53,69,0.1);
	padding: .75rem 1rem;
	border-radius: .5rem;
	color: var(--brand-red);
	font-weight: 600;
	margin-top: 1rem
}

.announcement-card .card-footer {
	border-top: 1px solid var(--border-color);
	padding: 1rem 1.5rem;
	margin-top: auto
}

.card-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap
}

.enhanced-news-section {
	background: var(--brand-white)
}

.main-news-slider {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,33,68,.1)
}

.main-news-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px
}

.main-news-card .news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease
}

.main-news-card:hover .news-image img {
	transform: scale(1.05)
}

.main-news-card .news-content {
	padding: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--light-gray-bg)
}

.main-news-card .news-category {
	display: inline-block;
	background: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: .5rem 1rem;
	border-radius: 50px;
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	width: fit-content
}

.main-news-card .news-title a {
	color: var(--brand-dark-blue);
	font-size: 2rem;
	font-weight: 800;
	text-decoration: none;
	line-height: 1.3;
	transition: color .3s ease
}

.main-news-card .news-title a:hover {
	color: var(--brand-red)
}

.main-news-card .news-excerpt {
	color: #6c757d;
	font-size: 1.1rem;
	line-height: 1.8;
	margin: 1.5rem 0
}

.main-news-card .news-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto
}

.main-news-card .news-date {
	color: var(--brand-red);
	font-weight: 600
}

.main-news-card .read-more {
	color: var(--brand-dark-blue);
	text-decoration: none;
	font-weight: 700
}

#mainNewsCarousel .carousel-control-prev,#mainNewsCarousel .carousel-control-next {
	width: 50px;
	height: 50px;
	background: rgba(255,255,255,0.8);
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	color: var(--brand-dark-blue);
	transition: all .3s
}

.main-news-slider:hover .carousel-control-prev,.main-news-slider:hover .carousel-control-next {
	opacity: 1
}

.carousel-control-prev {
	left: 1rem
}

.carousel-control-next {
	right: 1rem
}

#mainNewsCarousel .carousel-indicators {
	bottom: 1rem
}

#mainNewsCarousel .carousel-indicators button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--brand-white);
	border: 0
}

.secondary-news-grid .news-card {
	border-radius: 1rem;
	box-shadow: 0 10px 30px rgba(0,33,68,.08);
	transition: all .3s ease
}

.secondary-news-grid .news-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0,33,68,.12)
}

.secondary-news-grid .news-image img {
	width: 100%;
	height: 200px;
	object-fit: cover
}

.secondary-news-grid .news-content {
	padding: 1.5rem
}

.secondary-news-grid .news-category {
	display: inline-block;
	background: rgba(0,51,102,0.1);
	color: var(--brand-dark-blue);
	padding: .25rem .75rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: 1rem
}

.secondary-news-grid .news-title a {
	color: var(--brand-dark-blue);
	font-size: 1.1rem;
	text-decoration: none;
	font-weight: 700
}

@media(max-width:991px) {
	.main-news-card {
		grid-template-columns: 1fr
	}

	.main-news-card .news-image {
		height: 300px
	}
}

.announcements-board-section {
	background: var(--light-gray-bg)
}

.announcements-board-wrapper {
	background-color: var(--brand-white);
	border-radius: 1.5rem;
	box-shadow: 0 20px 60px rgba(0,33,68,0.1);
	border: 1px solid var(--border-color);
	overflow: hidden
}

.announcement-display-panel {
	background: linear-gradient(135deg,rgba(74,144,226,0.05) 0,rgba(74,144,226,0) 100%);
	padding: 3rem;
	border-left: 1px solid var(--border-color);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center
}

[dir="rtl"] .announcement-display-panel {
	border-left: 0;
	border-right: 1px solid var(--border-color)
}

.content-icon {
	font-size: 2.5rem;
	color: var(--brand-red);
	margin-bottom: 1.5rem
}

.content-title {
	font-size: 2rem;
	line-height: 1.5;
	font-weight: 800;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem
}

.content-excerpt {
	color: #555;
	line-height: 1.8;
	margin-bottom: 2rem
}

.announcement-display-panel .btn {
	font-weight: 700
}

.announcements-list-panel {
	height: 100%;
	display: flex;
	flex-direction: column
}

.panel-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border-color);
	flex-shrink: 0
}

.panel-header h4 {
	margin: 0;
	font-weight: 700;
	color: var(--brand-dark-blue);
	font-size: 1.1rem
}

.panel-body.ticker-body-wrapper {
	flex-grow: 1;
	height: auto;
	max-height: 450px;
	overflow: hidden;
	position: relative
}

.announcements-list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	width: 100%;
	animation: vertical-ticker 30s linear infinite
}

@keyframes vertical-ticker {
	from {
		transform: translateY(0)
	}

	to {
		transform: translateY(-50%)
	}
}

.ticker-body-wrapper:hover .announcements-list {
	animation-play-state: paused
}

.announcement-ticker-item a {
	display: block;
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	border-bottom: 1px solid #e9ecef;
	transition: background-color .3s ease
}

.announcement-ticker-item:last-child a {
	border-bottom: 0
}

.announcement-ticker-item a:hover {
	background-color: #f8f9fa
}

.item-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: .5rem
}

.item-category {
	font-size: .75rem;
	font-weight: 700;
	padding: .2rem .75rem;
	border-radius: 50px;
	background-color: var(--light-gray-bg);
	color: var(--brand-dark-blue)
}

.announcement-ticker-item.urgent .item-category {
	background-color: var(--brand-red);
	color: white
}

.item-date {
	font-size: .8rem;
	color: #6c757d
}

.item-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.5;
	margin: 0
}

.announcement-ticker-item a:hover .item-title {
	color: var(--brand-red)
}

@media(max-width:991.98px) {
	.announcement-display-panel {
		border-right: 0;
		border-bottom: 1px solid var(--border-color);
		padding: 2.5rem;
		text-align: center
	}

	.panel-body.ticker-body-wrapper {
		max-height: 300px
	}
}

.announcements-marquee-section {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: .75rem 0;
	position: relative;
	z-index: 10;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	border-bottom: 2px solid var(--brand-gold)
}

.marquee-title {
	font-weight: 700;
	font-size: 1rem;
	padding-left: 1.5rem;
	border-left: 1px solid rgba(255,255,255,0.3);
	flex-shrink: 0;
	display: flex;
	align-items: center
}

.marquee-title i {
	color: var(--brand-gold);
	margin-left: .75rem;
	animation: pulse-light 2s infinite ease-in-out
}

@keyframes pulse-light {
	0%,100% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.2)
	}
}

.marquee-content-wrapper {
	flex-grow: 1;
	overflow: hidden;
	position: relative
}

.marquee-content {
	display: flex;
	animation: marquee-rtl 40s linear infinite;
	width: max-content
}

@keyframes marquee-rtl {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

.marquee-content-wrapper:hover .marquee-content {
	animation-play-state: paused
}

.marquee-item {
	padding: 0 1.5rem;
	white-space: nowrap
}

.marquee-item a {
	color: var(--brand-white);
	text-decoration: none;
	font-size: .95rem;
	display: flex;
	align-items: center;
	transition: color .3s ease
}

.marquee-item a:hover {
	color: var(--brand-gold)
}

.marquee-item:not(:last-child)::after {
	content: '|';
	color: rgba(255,255,255,0.3);
	margin-right: 1.5rem
}

@media(max-width:768px) {
	.marquee-title {
		font-size: .9rem;
		padding-left: 1rem
	}

	.marquee-title span {
		display: none
	}

	.marquee-item {
		padding: 0 1rem
	}

	.marquee-item a {
		font-size: .85rem
	}
}

.announcements-marquee-section {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: .75rem 0;
	position: relative;
	z-index: 10;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	border-bottom: 2px solid var(--brand-gold);
	overflow: hidden
}

.announcements-marquee-section .container {
	padding: 0 1rem;
	max-width: 100%
}

.marquee-title {
	font-weight: 700;
	font-size: 1rem;
	padding-left: 1.5rem;
	margin-left: 1.5rem;
	border-left: 1px solid rgba(255,255,255,0.3);
	flex-shrink: 0;
	display: flex;
	align-items: center
}

.marquee-title i {
	color: var(--brand-gold);
	margin-left: .75rem;
	animation: pulse-light 2s infinite ease-in-out
}

@keyframes pulse-light {
	0%,100% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.2)
	}
}

.marquee-content-wrapper {
	flex-grow: 1;
	overflow: hidden;
	mask-image: linear-gradient(to right,transparent,black 10%,black 90%,transparent)
}

[dir="rtl"] .marquee-content-wrapper {
	mask-image: linear-gradient(to left,transparent,black 10%,black 90%,transparent)
}

.marquee-content {
	display: flex;
	flex-wrap: nowrap;
	width: fit-content;
	animation: marquee-rtl 40s linear infinite
}

@keyframes marquee-rtl {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

.marquee-content-wrapper:hover .marquee-content {
	animation-play-state: paused
}

.marquee-item {
	padding: 0 1.5rem;
	white-space: nowrap;
	display: flex;
	align-items: center
}

.marquee-item a {
	color: var(--brand-white);
	text-decoration: none;
	font-size: .95rem;
	display: flex;
	align-items: center;
	transition: color .3s ease
}

.marquee-item a:hover {
	color: var(--brand-gold)
}

.marquee-item:not(:last-child)::after {
	content: '•';
	color: rgba(255,255,255,0.5);
	margin-right: 1.5rem;
	font-size: 1.2rem
}

@media(max-width:768px) {
	.marquee-title {
		font-size: .9rem;
		padding-left: 1rem;
		margin-left: 1rem
	}

	.marquee-title span {
		display: none
	}

	.marquee-item {
		padding: 0 1rem
	}

	.marquee-item a {
		font-size: .85rem
	}

	.marquee-content-wrapper {
		mask-image: none
	}
}

.hero-slider-section .hero-video-container,.hero-slider-section .hero-video-overlay,.hero-slider-section .hero-split-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.hero-video-container video {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-split-content {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10
}

.hero-main-content h1 {
	color: white
}

.announcements-marquee-section {
	position: relative
}

.interactive-news-section {
	position: relative;
	background-color: var(--brand-white);
	padding-top: 5rem;
	overflow: hidden
}

.news-pin-wrapper {
	height: 70vh;
	max-height: 550px;
	width: 100vw;
	position: relative;
	display: flex;
	align-items: center
}

.news-scroller-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.news-scroller-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	position: relative
}

[dir="rtl"] .news-scroller-track.reverse {
	right: 100%
}

.interactive-news-card {
	width: 320px;
	flex-shrink: 0;
	margin: 0 .5rem;
	background-color: #fff;
	border-radius: .75rem;
	box-shadow: 0 5px 15px rgba(0,33,68,.05);
	border: 1px solid var(--border-color);
	overflow: hidden;
	transition: transform .3s ease
}

.interactive-news-card:hover {
	transform: translateY(-5px)
}

.card-image {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.card-content {
	padding: .75rem 1rem
}

.card-category {
	font-size: .7rem;
	padding: .15rem .6rem;
	margin-bottom: .5rem
}

.card-title {
	font-size: .95rem;
	line-height: 1.4
}

.card-title a {
	text-decoration: none;
	color: var(--text-dark)
}

.archive-link-wrapper {
	padding: 2.5rem 0 4rem
}

@media(max-width:991.98px) {
	.news-pin-wrapper {
		height: auto
	}

	.news-scroller-container {
		gap: 0
	}

	.news-scroller-track {
		overflow-x: auto;
		padding: 1.5rem 1rem;
		-ms-overflow-style: none;
		scrollbar-width: none
	}

	.news-scroller-track::-webkit-scrollbar {
		display: none
	}

	.interactive-news-card {
		width: 280px
	}
}

.final-news-section {
	position: relative;
	padding-top: 5rem;
	background-color: white;
	overflow: hidden
}

.news-pin-wrap {
	height: 80vh;
	width: 80%;
	position: relative;
	display: flex;
	align-items: center
}

.news-scroller {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.news-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform
}

.news-card {
	width: 320px;
	flex-shrink: 0;
	margin: 0 .75rem;
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	box-shadow: 0 10px 20px rgba(0,0,0,0.05)
}

.news-card a {
	text-decoration: none;
	display: block
}

.news-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease
}

.news-card a:hover img {
	transform: scale(1.05)
}

.news-card span {
	
	bottom: 0;
	right: 0;
	left: 0;
	padding: 2rem;
	padding-top: 3rem;
	
	color: white;
	font-size: 1.1rem;
	font-weight: 400;
	transition: background .3s ease
}

.news-card a:hover span {
	background: linear-gradient(0,rgba(211,47,47,0.507) 0,transparent 100%)
}

@media(max-width:991.98px) {
	.news-pin-wrap {
		height: auto
	}

	.news-scroller {
		gap: 1rem
	}

	.news-track {
		overflow-x: auto;
		padding: 1.5rem 0;
		width: 100% !important;
		transform: none !important;
		-ms-overflow-style: none;
		scrollbar-width: none
	}

	.news-track::-webkit-scrollbar {
		display: none
	}

	.news-card {
		width: 300px
	}
}

.hero-video-container {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	border-radius: 20px
}

.president-message-section {
	padding-top: 50px;
	position: relative;
	height: 120vh;
	min-height: 700px;
	width: 100%;
	color: var(--brand-white);
	display: flex;
	align-items: center;
	overflow: hidden
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1
}

.glass-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: rgba(0,34,68,0.6);
	backdrop-filter: blur(5px) saturate(100%);
	-webkit-backdrop-filter: blur(5px) saturate(100%)
}

.president-message-section .container {
	position: relative;
	z-index: 3
}

.president-portrait {
	text-align: center
}

.president-portrait img {
	max-width: 500px;
	width: 470%;
	height: auto;
	filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3));
	margin-bottom: 1.5rem;
	margin-right: -5rem;
	border-radius: 5%
}

.president-name {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--brand-white);
	text-shadow: 0 2px 5px rgba(0,0,0,0.2);
	margin-right: -4rem
}

.president-title {
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--brand-gold);
	margin-right: -4rem
}

.president-quote-wrapper {
	position: relative;
	padding: 2rem;
	border-radius: 1.5rem;
	margin-right: 8rem;
	
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15)
}

.president-quote-wrapper .quote-icon {
	position: absolute;
	top: 10px;
	right: 3rem;
	font-size: 2rem;
	color: var(--brand-gold);
	opacity: .15
}

.president-quote-wrapper blockquote {
	border: 0;
	padding: 0;
	margin: 0
}

.president-quote-wrapper p {
	font-size: 1rem;
	font-weight: 500;
	line-height: 2;
	color: rgba(255,255,255,0.9)
}

@media(max-width:991.98px) {
	.president-message-section {
		height: auto;
		padding: 5rem 0
	}

	.president-portrait {
		margin-bottom: 3rem
	}
}

@media(max-width:576px) {
	.president-name {
		font-size: 1.8rem
	}

	.president-quote-wrapper p {
		font-size: 1.2rem
	}

	.president-quote-wrapper {
		padding: 2rem;
		margin-right: 0
	}

	.president-portrait {
		margin-right: 5rem
	}

	.president-portrait img {
		max-width: 150;
		width: 100%
	}
}

html {
	scroll-behavior: auto !important
}

.immersive-news-hub {
	position: relative;
	width: 100%;
	height: 135vh;
	min-height: 690px;
	color: var(--brand-white);
	display: flex;
	align-items: center;
	overflow: hidden
}

.background-showcase {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: cover;
	background-position: center;
	transform: scale(1.1);
	filter: blur(5px) brightness(0.6);
	transition: background-image .8s ease-in-out
}

.background-image-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity .8s ease-in-out,transform .8s ease-in-out
}

.background-image-item.is-active {
	opacity: 1;
	transform: scale(1)
}

@keyframes kenburns {
	0% {
		transform: scale(1)
	}

	100% {
		transform: scale(1.05)
	}
}

.background-image-item.is-active {
	animation: kenburns 15s ease-out forwards
}

.background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: linear-gradient(90deg,rgba(0,34,68,0.98) 30%,rgba(0,34,68,0.75) 60%,rgba(0,34,68,0.5) 100%)
}

[dir="rtl"] .background-overlay {
	background: linear-gradient(-90deg,rgba(0,34,68,0.98) 30%,rgba(0,34,68,0.75) 60%,rgba(0,34,68,0.5) 100%)
}

.immersive-news-hub .container {
	position: relative;
	z-index: 3
}

.immersive-news-hub .section-header .section-title {
	color: var(--brand-white);
	text-align: right
}

.immersive-news-hub .section-header .lead {
	color: rgba(255,255,255,0.8);
	text-align: right
}

.story-image-showcase {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	max-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center
}

.glass-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1.5rem;
	padding: 1.5rem;
	background: rgba(255,255,255,0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.1)
}

.image-stage {
	position: relative;
	width: calc(100% - 3rem);
	height: calc(100% - 3rem);
	border-radius: .75rem;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3)
}

.story-image-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity .8s ease-in-out,transform .8s ease-in-out
}

.story-image-item.is-active {
	opacity: 1;
	transform: scale(1)
}

.story-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.story-image-item-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem 1.5rem;
	background: linear-gradient(0,rgba(0,0,0,0.7) 0,transparent 100%)
}

.image-item-category {
	font-size: 1rem;
	font-weight: 700;
	
	display: block
}

.image-item-title a {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--brand-white);
	text-decoration: none;
	line-height: 1.4;
	display: block;
	text-shadow: 0 1px 5px rgba(0,0,0,0.5)
}

.immersive-news-hub .section-header .section-title {
	color: white;
	text-align: right
}

.story-selector-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem
}

.selector-item {
	padding: 1rem 1.25rem;
	cursor: pointer;
	position: relative;
	border-radius: .75rem;
	background: rgba(255,255,255,0.05);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255,255,255,0.1);
	transition: all .4s ease
}

.selector-item-date {
	font-size: .8rem;
	color: rgba(255,255,255,0.6);
	margin-bottom: .25rem
}

.selector-item-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: rgba(255,255,255,0.8)
}

.selector-item:hover {
	background: rgba(255,255,255,0.1)
}

.selector-item.is-active {
	background: var(--brand-white);
	backdrop-filter: none;
	-webkit-backdrop-filter: none
}

.selector-item.is-active .selector-item-date {
	color: #6c757d
}

.selector-item.is-active .selector-item-title {
	color: var(--brand-dark-blue)
}

.selector-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	height: 3px;
	width: 0;
	background: var(--brand-gold);
	transition: none
}

.selector-item.is-active::after {
	width: 100%;
	transition: width 5s linear
}

@media(max-width:991.98px) {
	.immersive-news-hub {
		height: auto;
		padding: 4rem 0
	}

	.story-image-showcase {
		margin-bottom: 3rem
	}
}

.story-selector-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem
}

.selector-item:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.2)
}

.selector-item.is-active {
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: transparent;
	transform: scale(1.03);
	box-shadow: 0 10px 30px rgba(0,0,0,0.1)
}

.selector-item.is-active .selector-item-date {
	color: #6c757d
}

.selector-item.is-active .selector-item-title {
	color: var(--brand-dark-blue)
}

.selector-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	height: 3px;
	width: 0;
	background: var(--brand-gold);
	border-radius: 0 0 .75rem .75rem;
	transition: none
}

.selector-item.is-active::after {
	width: 100%;
	transition: width 5s linear
}

@media(max-width:991.98px) {
	.immersive-news-hub {
		height: auto;
		padding: 4rem 0
	}

	.story-details-showcase,.story-selector-list {
		text-align: center
	}

	.immersive-news-hub .section-header {
		text-align: center
	}
}

.reading-progress-bar {
	position: fixed;
	top: 0;
	left: 1;
	height: 5px;
	background: var(--brand-red);
	width: 0;
	z-index: 1050;
	transition: width .1s linear
}

.article-header {
	background-color: var(--light-gray-bg);
	padding: 4rem 0;
	border-bottom: 1px solid var(--border-color)
}

.article-category-badge {
	display: inline-block;
	background-color: var(--brand-red);
	color: var(--brand-white);
	padding: .5rem 1.25rem;
	border-radius: 50px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 1.5rem
}

.article-main-title {
	font-size: 2.8rem;
	font-weight: 800;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem
}

.article-meta {
	color: #6c757d
}

.article-meta span {
	margin: 0 1rem
}

.article-body-container {
	margin-top: 3rem
}

.share-tools-sidebar {
	position: sticky;
	top: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem
}

.share-label {
	font-size: .8rem;
	font-weight: 700;
	color: #6c757d;
	margin-bottom: .5rem
}

.share-icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: 0;
	border: 1px solid var(--border-color);
	color: var(--text-dark);
	font-size: .9rem;
	transition: all .3s ease
}

.share-icon:hover {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	transform: scale(1.1)
}

.article-main-image {
	margin-bottom: 2rem;
	border-radius: 1rem;
	overflow: hidden
}

.article-main-image img {
	width: 100%
}

.article-main-image figcaption {
	background: #f8f9fa;
	padding: .75rem 1rem;
	font-size: .85rem;
	color: #6c757d;
	text-align: center
}

.article-text p {
	font-size: 1.15rem;
	line-height: 2;
	margin-bottom: 1.5rem
}

.article-text blockquote {
	border-right: 4px solid var(--brand-red);
	padding: 1rem 2rem;
	margin: 2rem 0;
	font-size: 1.25rem;
	font-style: italic;
	background: #f8f9fa
}

.article-text blockquote footer {
	font-size: 1rem;
	font-style: normal;
	color: var(--brand-dark-blue);
	font-weight: 700;
	margin-top: 1rem
}

.gallery-title {
	font-weight: 700;
	margin-bottom: 1.5rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--brand-gold);
	display: inline-block
}

.gallery-items a {
	display: block;
	overflow: hidden;
	border-radius: .5rem
}

.gallery-items img {
	transition: transform .3s ease
}

.gallery-items a:hover img {
	transform: scale(1.05)
}

.sidebar {
	position: sticky;
	top: 150px
}

.widget-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	position: relative;
	padding-bottom: .75rem
}

.widget-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40px;
	height: 3px;
	background: var(--brand-red)
}

.related-news-list,.popular-news-list {
	list-style: none;
	padding: 0
}

.related-news-list li,.popular-news-list li {
	padding: .75rem 0;
	border-bottom: 1px solid var(--border-color)
}

.related-news-list a,.popular-news-list a {
	color: var(--text-dark);
	text-decoration: none;
	font-weight: 500;
	transition: color .3s ease
}

.related-news-list a:hover,.popular-news-list a:hover {
	color: var(--brand-red)
}

.popular-news-list .views {
	display: block;
	font-size: .8rem;
	color: #6c757d;
	margin-top: .25rem
}

@media(max-width:991.98px) {
	.article-main-title {
		font-size: 2rem
	}

	.article-body-container .row {
		flex-direction: column
	}

	.sidebar {
		position: static;
		margin-top: 3rem
	}
}

.news-card {
	background: var(--brand-white);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,33,68,0.05);
	transition: all .3s ease;
	height: 100%;
	display: flex;
	flex-direction: column
}

.news-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(0,33,68,0.1)
}

.news-card .news-image {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10
}

.news-card .news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease
}

.news-card:hover .news-image img {
	transform: scale(1.05)
}

.news-card .news-content {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1
}

.news-card .news-category {
	display: inline-block;
	width: fit-content;
	background: rgba(0,51,102,0.1);
	color: var(--brand-dark-blue);
	padding: .25rem .75rem;
	border-radius: 50px;
	font-size: .8rem;
	font-weight: 700;
	margin-bottom: .75rem
}

.news-card .news-title {
	margin-bottom: 1rem
}

.news-card .news-title a {
	color: var(--brand-dark-blue);
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5
}

.news-card:hover .news-title a {
	color: var(--brand-red)
}

.news-card .news-meta {
	border-top: 1px solid var(--border-color);
	padding-top: .75rem;
	margin-top: auto
}

.news-card .news-date {
	color: #6c757d;
	font-size: .85rem;
	font-weight: 500
}

.announcements-marquee-section {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: .6rem 0;
	box-shadow: 0 -5px 15px rgba(0,0,0,0.15);
	border-top: 2px solid var(--brand-gold);
	display: flex;
	align-items: center
}

body {
	padding-bottom: 55px
}

@media(max-width:768px) {
	body {
		padding-bottom: 48px
	}
}

.announcements-marquee-section {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: var(--brand-dark-blue);
	color: var(--brand-white);
	padding: .75rem 0;
	box-shadow: 0 -5px 15px rgba(0,0,0,0.15);
	border-top: 2px solid var(--brand-gold);
	display: flex;
	align-items: center
}

body {
	padding-bottom: 55px
}

.announcements-marquee-section .container {
	max-width: 100%;
	overflow: hidden
}

.marquee-title {
	font-weight: 700;
	padding-left: 1rem;
	margin-left: 1rem;
	border-left: 1px solid rgba(255,255,255,0.3);
	flex-shrink: 0
}

.marquee-content-wrapper {
	flex-grow: 1;
	overflow: hidden
}

.marquee-content {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: marquee-scroll-rtl 30s linear infinite
}

@keyframes marquee-scroll-rtl {
	from {
		transform: translateX(-100%)
	}

	to {
		transform: translateX(100%)
	}
}

.marquee-content-wrapper:hover .marquee-content {
	animation-play-state: paused
}

.marquee-item {
	padding: 0 1.5rem;
	white-space: nowrap;
	display: flex;
	align-items: center
}

.marquee-item a {
	color: var(--brand-white);
	text-decoration: none;
	font-size: .9rem;
	transition: color .3s ease
}

.marquee-item a:hover {
	color: var(--brand-gold)
}

@media(max-width:768px) {
	.marquee-title span {
		display: none
	}

	body {
		padding-bottom: 48px
	}
}

.final-news-section {
	position: relative;
	z-index: 1
}

.blurry-backgrounds {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -2
}

.blurry-bg-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	filter: blur(15px) brightness(0.8);
	transform: scale(1.1);
	opacity: 0;
	transition: opacity 1s ease-in-out
}

.blurry-bg-item.is-visible {
	opacity: 1
}

.section-background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	z-index: -1
}

.stats-v2-section {
	background-color: var(--light-gray-bg);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color)
}

.stat-card {
	background-color: var(--brand-white);
	padding: 2rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 5px 15px rgba(0,33,68,.03);
	height: 100%;
	transition: all .3s ease
}

.stat-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,33,68,.07)
}

.stat-icon {
	font-size: 2.5rem;
	color: var(--brand-red)
}

.stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--brand-dark-blue);
	line-height: 1
}

.stat-label {
	margin: .25rem 0 0;
	color: #6c757d;
	font-weight: 500
}

.gender-ratio-card {
	background: var(--brand-white);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 5px 15px rgba(0,33,68,.03);
	height: 100%
}

.gender-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .5rem;
	font-weight: 700
}

.gender-info .percentage {
	font-weight: 800;
	color: var(--brand-dark-blue)
}

.progress-bar {
	transition: width 1.5s ease-out
}

.female-bar {
	background-color: var(--brand-red)
}

.male-bar {
	background-color: var(--brand-dark-blue)
}

.stat-card-compact {
	background: var(--brand-white);
	padding: 2rem;
	border-radius: 1rem;
	border: 1px solid var(--border-color);
	box-shadow: 0 5px 15px rgba(0,33,68,.03);
	height: 100%;
	text-align: center
}

.stat-card-compact .stat-number {
	font-size: 2.2rem
}

.stat-card-compact .stat-label {
	font-size: 1.1rem
}

.stat-card-compact .stat-label i {
	color: var(--brand-red)
}

.hero-wrapper {
	z-index: 2;
	


 background-color: #ffffff;
	
	backdrop-filter: blur(5px) saturate(100%);
	-webkit-backdrop-filter: blur(5px) saturate(100%)
}

.research-grid-section-v2 {
	background-color: var(--light-gray-bg);
	position: relative
}

/* --- Skeleton Loading Effect --- */
.skeleton-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.skeleton-image {
    height: 200px;
    background-color: #e0e0e0;
}

.skeleton-content {
    padding: 20px;
}

.skeleton-line {
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.category {
    height: 20px;
    width: 40%;
    margin-bottom: 15px;
}

.skeleton-line.title {
    height: 18px;
    width: 90%;
    margin-bottom: 15px;
}

/* Animation for the shimmer effect */
.skeleton-card {
    position: relative;
    overflow: hidden;
}

.skeleton-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.focus-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 1.5rem
}

.focus-grid-item {
	position: relative;
	display: block;
	text-decoration: none;
	overflow: hidden;
	border-radius: 1.25rem;
	background-color: var(--brand-white);
	box-shadow: 0 10px 30px rgba(0,33,68,0.05);
	transition: all .4s cubic-bezier(0.165,0.84,0.44,1);
	border: 1px solid var(--border-color)
}

.item-content {
	padding: 2.5rem;
	height: 100%
}

.item-icon-wrapper {
	width: 80px;
	height: 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg,var(--brand-red),#b92b27);
	color: var(--brand-white);
	font-size: 2.5rem;
	margin-bottom: 2rem;
	transition: all .4s ease
}

.item-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--brand-dark-blue);
	margin-bottom: .75rem;
	transition: color .4s ease
}

.item-description {
	color: #6c757d;
	line-height: 1.7;
	font-size: .95rem;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all .5s cubic-bezier(0.165,0.84,0.44,1)
}

.focus-grid-item:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: 0 20px 50px rgba(0,33,68,0.12);
	z-index: 10;
	border-color: transparent
}

.focus-grid-item:hover .item-icon-wrapper {
	background: var(--brand-dark-blue);
	transform: scale(1.1)
}

.focus-grid-item:hover .item-description {
	max-height: 200px;
	opacity: 1;
	margin-top: 1rem
}

@media(max-width:991px) {
	.focus-grid {
		grid-template-columns: repeat(2,1fr)
	}
}

@media(max-width:768px) {
	.focus-grid {
		grid-template-columns: 1fr
	}

	.focus-grid-item:hover {
		transform: none;
		box-shadow: 0 10px 30px rgba(0,33,68,0.05)
	}

	.item-description,.focus-grid-item:hover .item-description {
		max-height: 200px;
		opacity: 1;
		margin-top: 1rem
	}
}

.research-grid-section-v3 {
	background-color: var(--light-gray-bg)
}

.elegant-grid {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 4rem
}

.elegant-grid-item {
	position: relative;
	display: block;
	text-decoration: none;
	padding: 2.5rem;
	border-radius: 1.5rem;
	overflow: hidden;
	transition: transform .4s ease;
	background-color: transparent
}

.item-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 1.5rem;
	box-shadow: 0 10px 30px rgba(0,33,68,0.05);
	transition: all .4s ease
}

.item-content {
	position: relative;
	z-index: 2;
	text-align: center;
	transition: transform .4s ease
}

.item-icon {
	font-size: 3.5rem;
	color: var(--brand-dark-blue);
	margin-bottom: 2rem;
	transition: all .4s ease
}

.item-title {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem
}

.item-description {
	color: #555;
	line-height: 1.8
}

.item-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none
}

.item-border rect {
	fill: none;
	stroke: var(--brand-gold);
	stroke-width: 4px;
	stroke-dasharray: 400 1000;
	stroke-dashoffset: -200;
	transition: stroke-dashoffset .8s cubic-bezier(0.19,1,0.22,1)
}

.elegant-grid-item:hover {
	transform: translateY(-10px)
}

.elegant-grid-item:hover .item-background {
	background: rgba(255,255,255,0.8);
	box-shadow: 0 20px 40px rgba(0,33,68,0.1)
}

.elegant-grid-item:hover .item-content {
	transform: translateY(-5px)
}

.elegant-grid-item:hover .item-icon {
	color: var(--brand-red)
}

.elegant-grid-item:hover .item-border rect {
	stroke-dashoffset: -1200
}

@media(max-width:991px) {
	.elegant-grid {
		grid-template-columns: 1fr
	}
}

.research-grid-section-v3 {
	background-color: #c2bcbc
}

[dir="ltr"] {
	text-align: left
}

[dir="rtl"] {
	text-align: right
}

[dir="ltr"] .navbar-brand .brand-text,[dir="ltr"] .footer-tagline,[dir="ltr"] .pre-header-start span {
	text-align: left
}

[dir="ltr"] .president-quote-wrapper {
	top: 2px;
	right: -12rem;
	font-size: 2rem;
	color: var(--brand-gold)
}

.lang-switcher {
	margin-left: 15px
}

.lang-switcher .form-select {
	background: rgb(10, 51, 92);
	border: 1px solid rgba(255,255,255,0.3);
	color: rgb(255, 255, 255);
	padding: .25rem 1.5rem .25rem .5rem;
	font-size: .875rem
}

.lang-switcher .form-select:focus {
	box-shadow: 0 0 0 .2rem rgba(255,255,255,0.25)
}

.ann .announcements-marquee-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg,#2c3e50,#34495e);
	color: white;
	z-index: 10000;
	border-top: 2px solid #e74c3c;
	box-shadow: 0 -2px 20px rgba(0,0,0,0.3);
	padding: 0;
	margin: 0;
	height: 45px;
	display: flex;
	align-items: center
}

.announcements-marquee-section>.container {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
	margin: 0 auto
}

.college-header {
	position: relative;
	padding: 18rem 0;
	background-size: cover;
	background-position: center;
	color: var(--brand-white);
	display: flex;
	align-items: center
}

.college-header .glass-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.college-header .container {
	position: relative;
	z-index: 2
}

.college-title {
	font-size: 3.5rem;
	font-weight: 800
}

.breadcrumb {
	background: 0;
	padding: 0;
	
	margin-top: 1rem
}

.breadcrumb-item a {
	color: rgba(255,255,255,0.8)
}

.breadcrumb-item.active {
	color: var(--brand-white)
}

.breadcrumb-item+.breadcrumb-item::before {
	color: rgba(255,255,255,0.5);
	content: ''
}

.page-content {
	background: #fdfdfd
}

.content-section {
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #e9ecef
}

.col-lg-9>.content-section:last-child {
	border-bottom: 0
}

.section-title {
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 3px solid var(--brand-red);
	padding-bottom: .75rem;
	display: inline-block
}

.college-sidebar {
	position: sticky;
	top: 90px;
	border: 2px solid var(--border-color);
	border-radius: 1rem;
	background-color: var(--brand-white);
	padding: 1rem
}

.sidebar-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--brand-dark-blue);
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--border-color)
}

.sidebar-nav a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .8rem 1rem;
	color: var(--text-dark);
	font-weight: 600;
	text-decoration: none;
	border-radius: .5rem;
	margin-bottom: .25rem;
	transition: all .3s ease
}

.sidebar-nav a.active,.sidebar-nav a:hover {
	background: var(--brand-dark-blue);
	color: var(--brand-white);
	transform: translateX(5px)
}

.sidebar-nav i {
	width: 23px
}

.feature-card {
	background: #f8f9fa;
	border-radius: .75rem;
	padding: 1.5rem;
	text-align: center;
	height: 100%
}

.feature-card i {
	font-size: 2rem;
	color: var(--brand-red);
	margin-bottom: 1rem;
	display: block
}

.dean-card-v2 {
	display: flex;
	align-items: top;
	gap: 1rem;
	background: #f8f9fa;
	padding: 2rem;
	border-radius: 1rem
}

.dean-card-v2 img {
	width: 200px;
	height: 220px;
	object-fit: cover;
	border-radius: 10%
}

.dean-card-v2 h3 {
	font-weight: 700
}

.dean-card-v2 .lead {
	color: #06253a
}

.vision-quote {
	position: relative;
	background-color: #f8f9fa;
	padding: 2.5rem;
	border-radius: 1rem;
	border-right: 5px solid var(--brand-gold)
}

.vision-quote i {
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	font-size: 2rem;
	color: var(--brand-gold);
	opacity: .3
}

.vision-quote h4 {
	font-size: 1.4rem;
	line-height: 1.8
}

.accordion-button:not(.collapsed) {
	background-color: var(--brand-dark-blue);
	color: var(--brand-white)
}

.accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-active-icon)
}

.list-group-item a {
	text-decoration: none;
	color: var(--text-dark);
	font-weight: 500
}

.list-group-item a:hover {
	color: var(--brand-red)
}

.gallery-thumb {
	display: block;
	overflow: hidden;
	border-radius: .5rem
}

.gallery-thumb img {
	transition: transform .3s ease;
	width: 100%
}

.gallery-thumb:hover img {
	transform: scale(1.05)
}

.list-styled {
	list-style: none;
	padding-right: 0
}

.list-styled li {
	position: relative;
	padding-right: 1.5rem;
	margin-bottom: .5rem
}

.list-styled li::before {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: var(--brand-red);
	position: absolute;
	right: 0
}

@media(max-width:991.98px) {
	.college-sidebar {
		position: static;
		margin-bottom: 3rem
	}

	.dean-card-v2 {
		flex-direction: column;
		text-align: center
	}
}

.hero-slider-section {
	position: relative;
	height: 90vh;
	min-height: 650px;
	width: 100%;
	overflow: hidden
}

.hero-video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.hero-video-container video {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(8px)
}

.hero-content-container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center
}

.hero-vertical-ticker {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	background: rgba(0,0,0,0.2);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-radius: 1rem;
	border: 1px solid rgba(255,255,255,0.15);
	box-shadow: 0 10px 40px rgba(0,0,0);
	overflow: hidden
}

.ticker-header {
	background: rgba(0,0,0);
	padding: 1rem 1.25rem
}

.ticker-header h5 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--brand-white)
}

.ticker-header i {
	color: rgba(0,0,0)
}

.ticker-body {
	height: 250px;
	overflow: hidden;
	position: relative
}

.ticker-list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	width: 100%;
	animation: hero-vertical-ticker 12s linear infinite
}

@keyframes hero-vertical-ticker {
	0% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(-300px)
	}
}

.ticker-body:hover .ticker-list {
	animation-play-state: paused
}

.ticker-list li {
	height: 70px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,0.1)
}

.ticker-list li a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 0 1.25rem;
	color: var(--brand-dark-blue);
	text-decoration: none;
	width: 100%;
	height: 100%
}

.ticker-list li small {
	font-weight: 700;
	color: var(--brand-dark-blue)
}

.ticker-list li span {
	font-size: .95rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.hero-main-title h1 {
	text-shadow: 0 4px 15px rgba(0,0,0)
}

@media(max-width:991.98px) {
	.hero-slider-section {
		height: auto;
		min-height: 0;
		padding: 5rem 0
	}

	.hero-main-title {
		margin-bottom: 2.5rem
	}

	.hero-vertical-ticker {
		max-width: none
	}
}

.dean-message-section {
	padding-bottom: 0 !important
}

.dean-text-panel {
	background-color: var(--brand-white);
	padding: 3rem;
	height: 100%;
	position: relative;
	z-index: 2;
	box-shadow: -20px 0 40px rgba(0,0,0,0.1)
}

[dir="rtl"] .dean-text-panel {
	box-shadow: 20px 0 40px rgba(0,0,0,0.1)
}

.dean-name-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-dark-blue);
	margin-top: 1rem;
	margin-bottom: 2rem
}

.dean-quote {
	position: relative;
	border-right: 3px solid var(--brand-gold);
	padding-right: 1.5rem;
	margin-right: .5rem
}

[dir="rtl"] .dean-quote {
	margin-right: .5rem;
	margin-left: 0
}

.dean-quote p {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.9;
	color: #444
}

.dean-image-panel {
	height: 100%;
	min-height: 500px;
	position: relative
}

.dean-image-panel img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center
}

@media(max-width:991.98px) {
	.dean-message-section .row {
		flex-direction: column-reverse
	}

	.dean-text-panel {
		box-shadow: 0 -20px 40px rgba(0,0,0,0.1);
		margin-top: -50px
	}
}

.accordion-button:not(.collapsed) {
	background-color: #e7f1ff;
	color: #0056b3
}

.table {
	font-size: .9rem
}

.table thead {
	background-color: #f8f9fa
}

.no-data-message {
	text-align: center;
	padding: 20px;
	background-color: #f1f1f1;
	border-radius: 5px
}

.hero-slider-section {
	position: relative;
	z-index: 1;
	height: 90vh;
	min-height: 650px;
	width: 100%;
	overflow: hidden;
	transform: translateZ(0)
}

.page-content-wrapper {
	position: relative;
	z-index: 10;
	background-color: var(--light-gray-bg);
	margin-top: -80px;
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	padding: 4rem 0;
	box-shadow: 0 -10px 30px rgba(0,33,68,0.15)
}

@media(max-width:768px) {
	.page-content-wrapper {
		margin-top: -40px;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		padding: 2rem 0
	}

	.hero-slider-section {
		height: 500;
		min-height: auto;
		padding: 5rem 0 6rem
	}
}
/* ======== START: New Professional Directorate Cards V2 ======== */
.directorate-card-v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    background-color: var(--brand-white);
    padding: 1.75rem;
    border-radius: .75rem;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all .3s ease-in-out;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0,33,68,.04);
}

.directorate-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,33,68,.08);
    border-color: var(--brand-red);
}

.directorate-card-v2 .directorate-icon {
    font-size: 2.25rem;
    color: var(--brand-red);
    margin-bottom: .5rem;
    transition: all .3s ease;
}

.directorate-card-v2:hover .directorate-icon {
    transform: scale(1.1);
    color: var(--brand-dark-blue);
}

.directorate-card-v2 .directorate-text h5 {
    color: var(--brand-dark-blue);
    font-weight: 700;
    margin-bottom: .5rem;
    font-size: 1.1rem;
}

.directorate-card-v2 .directorate-text p {
    color: #6c757d;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 0;
}
/* ======== END: New Professional Directorate Cards V2 ======== */

/* ============================================================= */
/* == START: Custom Accessibility Widget Styles                 == */
/* ============================================================= */

/* Main Toggle Button */
.accessibility-widget {
    position: fixed;
    bottom: 80px;
    right: 20px; /* Use 'left: 20px;' for LTR sites */
    z-index: 1050;
}

.accessibility-toggle {
    width: 50px;
    height: 50px;
    background-color: var(--brand-dark-blue);
    color: var(--brand-white);
    border-radius: 50%;
    border: none;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.accessibility-toggle:hover {
    transform: scale(1.1);
}

/* Accessibility Menu */
.accessibility-menu {
    position: absolute;
    bottom: 65px;
    right: 0; /* Use 'left: 0;' for LTR sites */
    width: 280px;
    background-color: var(--brand-white);
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,33,68,0.15);
    border: 1px solid var(--border-color);
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-out;
}

.accessibility-menu.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.menu-header {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--brand-dark-blue);
    text-align: center;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.menu-item > span {
    font-weight: 500;
    color: var(--text-dark);
}

/* Font Size Controls */
.font-controls button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--light-gray-bg);
    font-weight: bold;
    cursor: pointer;
    margin: 0 0.25rem;
}

/* Switch Toggle Styles */
.menu-item label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 28px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--brand-red);
}
input:checked + .slider:before {
    transform: translateX(22px);
}

.menu-footer {
    text-align: center;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-color);
}

#accessibility-reset {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--brand-dark-blue);
    padding: .5rem 1rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 500;
}

/* Helper Classes Applied by JavaScript */
.high-contrast {
    background-color: #ebece9 !important;
    color: #ee0909 !important;
}
.high-contrast h1, .high-contrast h2, .high-contrast h3, .high-contrast h4, .high-contrast h5, .high-contrast h6,
.high-contrast a, .high-contrast .btn, .high-contrast p, .high-contrast span, .high-contrast li {
    color: #fd0c0c !important;
    background-color: transparent !important;
}
.high-contrast .btn, .high-contrast a {
    border: 1px solid #ec1010 !important;
}
.high-contrast img {
    filter: grayscale(100%) contrast(150%);
}

.underline-links a {
    text-decoration: underline !important;
}
/* ============================================================= */
/* == END: Custom Accessibility Widget Styles                   == */
/* ============================================================= */
/* ========================================= */
/* == Accessibility Helper Classes (FIXED) == */
/* ========================================= */

/* Apply high contrast ONLY to main page sections, not the whole body */
body.accessibility-contrast #siteHeader,
body.accessibility-contrast main,

body.accessibility-contrast footer {
    filter: invert(100%) hue-rotate(180deg);
    background-color: #fff; /* Invert a white background to get black */
}

/* Ensure the widget itself is NEVER inverted */
.accessibility-widget {
    filter: none !important;
}

/* Un-invert images and videos so they look normal INSIDE the inverted sections */
body.accessibility-contrast #siteHeader img,
body.accessibility-contrast main img,
body.accessibility-contrast footer img,
body.accessibility-contrast video,
body.accessibility-contrast iframe {
    filter: invert(100%) hue-rotate(180deg);
}


/* Underline Links */
body.accessibility-underline-links a {
    text-decoration: underline !important;
}

/* Font Size Adjustment (remains the same) */
:root {
    --font-scale-multiplier: 1; /* Default is 100% */
}


/* Apply high contrast ONLY to main page sections, not the whole body */
body.accessibility-contrast #siteHeader,
body.accessibility-contrast main,
body.accessibility-contrast footer {
    filter: invert(100%) hue-rotate(180deg);
    background-color: #ffffff; /* Invert a white background to get black */
}

/* Ensure the widget itself is NEVER inverted */
.accessibility-widget  {
    filter: none !important;
}

/* Un-invert images and videos so they look normal INSIDE the inverted sections */
body.accessibility-contrast #siteHeader img,
body.accessibility-contrast main img,
body.accessibility-contrast footer img,
body.accessibility-contrast video,

body.accessibility-contrast iframe {
    filter: invert(100%) hue-rotate(180deg);
}


/* Underline Links */
body.accessibility-underline-links a {
    text-decoration: underline !important;
}

/* Font Size Adjustment (remains the same) */
:root {
    --font-scale-multiplier: 1; /* Default is 100% */
}

/* Font Size Adjustment */
/* We will use CSS variables for better control */
:root {
    --font-scale-multiplier: 1; /* Default is 100% */
}

/* Apply font scaling to all relevant elements */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, label, .btn {
    font-size: calc(var(--base-font-size, 2rem) * var(--font-scale-multiplier));
}

/* Apply font scaling to all relevant elements */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, label, .btn {
    font-size: calc(var(--base-font-size, 1rem) * var(--font-scale-multiplier));
}

/* Adjust headings to maintain hierarchy */
h1 { font-size: calc(2.5rem * var(--font-scale-multiplier)); }
h2 { font-size: calc(2rem * var(--font-scale-multiplier)); }
h3 { font-size: calc(1.75rem * var(--font-scale-multiplier)); }
.lead, .lead-text { font-size: calc(1.2rem * var(--font-scale-multiplier)); }
[data-reading="true"] {
    outline: 3px solid var(--brand-gold) !important;
    background-color: rgba(244, 211, 94, 0.2) !important;
    outline-offset: 2px;
}

     
        
        .hero-slider-section {
            position: relative;
            height: 100vh;
            overflow: hidden;
		
 background-color: #ffffff;
	
	backdrop-filter: blur(5px) saturate(100%);
	-webkit-backdrop-filter: blur(5px) saturate(100%)
        }
        
        .hero-video-container {
            position: relative;
            height: 100%;
            width: 100%;
        }
        
        .hero-video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .hero-split-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .hero-main-content {
            z-index: 10;
        }
        
        /* تنسيق النص العربي */
        .hero-title {
            font-size: 6rem;
            font-weight: 900;
            color: #ffffff;
            text-align: center;
            margin: 0;
            padding: 20px;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
            
            line-height: 1.4;                       
            /* خاصية لحفظ التنسيق عند تغيير الاتجاه */
            unicode-bidi: plaintext;
        }
        
        /* تأثير التفريغ عند المرور */
        .hero-title:hover {
            color: transparent;
            -webkit-text-stroke: 1px #ffffff;           
            transform: scale(1.05);
        }
        
        /* تنسيقات للشاشات المتوسطة */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 4rem;
            }
        }
        
        /* تنسيقات للشاشات الصغيرة */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 3rem;
                padding: 10px;
            }
        }
        
        /* تنسيقات للشاشات الصغيرة جداً */
        @media (max-width: 576px) {
            .hero-title {
                font-size: 2.5rem;
            }
        }

		.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.directorate-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}


.page-item:first-child .page-link {
     border-top-left-radius: 0; 
     border-bottom-left-radius: 0; 
}

.page-item:last-child .page-link {
     border-top-right-radius: 0; 
     border-bottom-right-radius: 0; 
}

.hero-video {
    /* اختيار واحد من هذه الخيارات */
    transform: translate(-50%, -50%) scale(0.8); /* تصغير 20% */
}
.custom-line-spacing {
  line-height: 2; /* Adjust this value as needed */
  font-size: 15.5px;
}




        .wrapper {
            margin: 1rem auto;
            padding-inline: 1rem;
            container-name: main;
            container-type: inline-size;
        }

        .c-newspaper {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        @media (min-width: 550px) {
            .c-newspaper {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
        @media (min-width: 880px) {
            .c-newspaper {
                grid-template-columns: 1fr 2fr 1fr;
            }
        }

        .c-newspaper__col {
            --gap: 20px;
            display: flex;
            flex-direction: column;
        }
        @media (min-width: 550px) {
            .c-newspaper__col:nth-child(1) .c-newspaper__item:not(:last-child):after, .c-newspaper__col:nth-child(2) .c-newspaper__item:not(:last-child):after {
                content: "";
                display: block;
                height: 1px;
                background-color: lightgrey;
                margin-block: var(--gap);
            }
            .c-newspaper__col:last-child {
                border-top: 1px solid lightgrey;
                padding-top: var(--gap);
            }
        }
        @media (min-width: 880px) {
            .c-newspaper__col:last-child {
                padding-top: 0;
                border-top: 0;
            }
            .c-newspaper__col:last-child .c-newspaper__item:not(:last-child):after {
                content: "";
                display: block;
                height: 1px;
                background-color: lightgrey;
                margin-block: var(--gap);
            }
        }
        @media (min-width: 550px) {
            .c-newspaper__col:first-child {
                grid-column: 2/4;
            }
        }
        @media (min-width: 880px) {
            .c-newspaper__col:first-child {
                grid-column: 2/3;
            }
        }
        @media (min-width: 550px) {
            .c-newspaper__col:nth-child(2) {
                grid-column: 1/2;
                grid-row: 1;
            }
        }
        .c-newspaper__col:last-child > * {
            flex: 1;
        }
        @media (min-width: 550px) {
            .c-newspaper__col:last-child {
                flex-direction: row;
                grid-column: 1/4;
            }
        }
        @media (min-width: 880px) {
            .c-newspaper__col:last-child {
                flex-direction: column;
                grid-column: 3/4;
            }
            .c-newspaper__col:last-child > * {
                flex: initial;
            }
        }

        .c-newspaper__item {
            container-type: inline-size;
            container-name: card;
        }

        .c-card {
            --flow-space: 1.25rem;
        }

        .c-card__thumb {
            flex: 0 0 30%;
        }
        .c-card__thumb img {
            width: 100%;
        }

        .c-card__content {
            --flow-space: 0.25rem;
        }

        .c-card__title {
            font-weight: bold;
            font-size: 17px;
            color: #4c4e4d;
            text-wrap: balance;
        }

        .c-card__tease {
            color: #666666;
            font-size: 14px;
        }

        .c-card__meta {
            font-size: 14px;
            color: #666;
        }
        .c-card__meta a {
            color: #4f7177;
            text-decoration: none;
        }

        @container card (min-width: 280px) and style(--horizontal: true) {
            .c-card {
                display: flex;
                gap: 1rem;
            }
        }
        @container main (min-width: 550px) {
            @container card style(--flipped: true) {
                .c-card__thumb {
                    order: 2;
                }
            }
        }
        @container style(--thumb: mobile-only) {
            .c-card__thumb {
                display: none;
            }
        }
        @media (min-width: 550px) {
            @container style(--thumb: grid-2) {
                .c-card__thumb {
                    display: none;
                }
            }
        }
        @media (min-width: 880px) {
            @container style(--thumb: grid-2) {
                .c-card__thumb {
                    display: block;
                }
            }
        }
        @container card (min-width: 280px) and style(--horizontal: true) and style(--thumb: mobile-only) {
            .c-card__thumb {
                display: block;
            }
        }
        @container style(--featured: true) {
            .c-card {
                display: flex;
                gap: 1rem;
            }

            .c-card__thumb {
                flex: 0 0 50%;
            }
        }
        @container main (min-width: 550px) {
            @container card style(--featured: true) {
                .c-card {
                    flex-direction: column;
                    gap: 0;
                }

                .c-card__title {
                    font-size: clamp(1rem, 6cqw, 2rem);
                }

                .c-card__content {
                    text-align: center;
                }

                .c-card__tease {
                    font-size: 19px;
                }
            }
        }
        @container main (min-width: 550px) {
            @container card style(--compact: 2) {
                .c-card__title {
                    font-size: 19px;
                }
            }
        }

        .u-flow > * + * {
            margin-top: var(--flow-space, 0.5rem);
        }

       

        .archive-btn {
            display: block;
            width: 200px;
            margin: 2rem auto;
            padding: 12px 24px;
            background-color: #4f7177;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .archive-btn:hover {
            background-color: #3a565a;
        }

/* أنماط مؤشر التحميل */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side, var(--brand-dark-blue) 92%, #0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear;
}

@keyframes l12 { 
  100%{transform: rotate(.5turn)}
}
/* أنماط النافذة المنبثقة المتطورة */
/* أنماط النافذة المنبثقة المتطورة والمصححة */
/* أنماط النافذة الترحيبية البسيطة */
.welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
}

.welcome-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.welcome-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-simple {
    position: relative;
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10001;
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-simple-header {
    display: flex;
    align-items: center;
    padding: 25px 30px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(to right, #f8fafc, #ffffff);
}

.modal-simple-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-left: 15px;
    border: 1px solid #e2e8f0;
}

.modal-simple-title {
    flex: 1;
}

.modal-simple-title h2 {
    margin: 0;
    color: var(--brand-dark-blue);
    font-size: 1.5rem;
    font-weight: 700;
}

.modal-simple-title p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.modal-simple-close {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

.modal-simple-close:hover {
    background: #f1f5f9;
    color: #475569;
}

.modal-simple-body {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.welcome-message-simple {
    padding: 25px 30px;
}

.welcome-message-simple h3 {
    color: var(--brand-dark-blue);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 20px;
    text-align: center;
    line-height: 1.4;
}

.message-content {
    line-height: 1.7;
    color: #475569;
}

.message-content p {
    margin-bottom: 18px;
    text-align: justify;
}

.message-content ul {
    margin: 20px 0;
    padding-right: 20px;
}

.message-content li {
    margin-bottom: 12px;
    position: relative;
    padding-right: 25px;
}

.message-content li:before {
    content: "•";
    color: var(--brand-dark-blue);
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    right: 0;
}

.modal-simple-footer {
    padding: 20px 30px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: center;
    background: #f8fafc;
}

.btn-simple-continue {
    background: var(--brand-dark-blue);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Tajawal', sans-serif;
}

.btn-simple-continue:hover {
    background: #1a3a5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* تصميم متجاوب */
@media (max-width: 768px) {
    .welcome-modal {
        padding: 15px;
    }
    
    .modal-simple {
        max-height: 95vh;
    }
    
    .modal-simple-header {
        padding: 20px 25px 15px;
    }
    
    .modal-simple-logo {
        width: 50px;
        height: 50px;
        margin-left: 12px;
    }
    
    .modal-simple-title h2 {
        font-size: 1.3rem;
    }
    
    .welcome-message-simple {
        padding: 20px 25px;
    }
    
    .welcome-message-simple h3 {
        font-size: 1.2rem;
    }
    
    .modal-simple-body {
        max-height: calc(95vh - 130px);
    }
    
    .modal-simple-footer {
        padding: 15px 25px;
    }
}

@media (max-width: 480px) {
    .welcome-modal {
        padding: 10px;
    }
    
    .modal-simple-header {
        padding: 15px 20px 12px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .modal-simple-logo {
        margin-left: 0;
    }
    
    .welcome-message-simple {
        padding: 15px 20px;
    }
    
    .message-content ul {
        padding-right: 15px;
    }
    
    .message-content li {
        padding-right: 20px;
    }
}

/* منع التمرير للخلفية عند فتح النافذة */
body.modal-open {
    overflow: hidden;
}
/* أنماط تأكيد الظهور */
#welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none; /* سيتم تغييره إلى flex عبر JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

#welcome-modal.active {
    display: flex !important;
    animation: fadeIn 0.3s ease;
}

/* تأكيد أن الخلفية الضبابية تعمل */
body.modal-open {
    overflow: hidden;
}

body.modal-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* تأكيد أن النافذة فوق الخلفية */
.modal-simple {
    position: relative;
    z-index: 10001;
}

/* للتصحيح فقط - إظهار الحدود */
.debug-border {
    border: 2px solid red !important;
}


[dir="rtl"] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width) * -1);
    border-top-left-radius:10px ;
    border-bottom-left-radius: 10px;
	border-top-right-radius:0px ;
    border-bottom-right-radius: 0px;

}

[dir="rtl"] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control, .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select, .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 0px; 
     border-bottom-left-radius: 0px;
	 border-top-right-radius: 10px; 
     border-bottom-right-radius: 10px;
	}
	
/* --- Announcements Archive V2 --- */
.announcement-card-v2 {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* لتوحيد ارتفاع البطاقات في نفس الصف */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.announcement-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.announcement-card-v2 .card-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.announcement-card-v2 .card-meta {
    font-size: 0.85rem;
    color: #6c757d;
}

.announcement-card-v2 .card-meta span:not(:last-child) {
    margin-left: 15px; /* RTL */
}

.announcement-card-v2 .card-meta i {
    margin-left: 5px; /* RTL */
}

.priority-badge-v2 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-red);
    background-color: rgba(220, 53, 69, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.announcement-card-v2 .card-body {
    padding: 25px 20px;
    flex-grow: 1; /* لجعل هذا الجزء يملأ المساحة المتاحة */
}

.announcement-card-v2 .card-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--brand-dark-blue);
}

.announcement-card-v2 .card-text {
    line-height: 1.7;
    color: #495057;
}
.announcement-card-v2 .card-text p:last-of-type {
    margin-bottom: 0;
}

.announcement-card-v2 .card-footer {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    text-align: left; /* RTL */
}

/* تنسيق خاص للإعلانات المهمة */
.announcement-card-v2.priority {
    border: 1px solid var(--brand-red);
}
.announcement-card-v2.priority .card-header {
    background-color: rgba(220, 53, 69, 0.05);
}
/* --- Mini Gallery inside Announcement Card --- */
.announcement-gallery .row {
    align-items: center;
}

.announcement-gallery img {
    border: 1px solid #ddd;
    padding: 2px;
    height: 70px; /* توحيد ارتفاع الصور */
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.announcement-gallery a:hover img {
    transform: scale(1.05);
}

/* ==========================================
   1. إصلاحات النافذة الترحيبية (Welcome Modal) للجوال
   ========================================== */
@media (max-width: 768px) {
    .welcome-modal {
        align-items: center !important; /* توسيط عمودي */
        padding: 10px !important;
        display: flex !important; /* ضمان العرض عند التفعيل */
    }

    .modal-simple {
        max-height: 85vh !important; /* ضمان عدم تجاوز ارتفاع الشاشة */
        width: 95% !important; /* عرض مناسب للجوال */
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .modal-simple-body {
        overflow-y: auto !important; /* تفعيل السكرول للمحتوى فقط */
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
        flex: 1; /* يأخذ المساحة المتاحة */
    }
    
    /* تكبير زر الإغلاق للمس */
    .modal-simple-close {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
        background: #f0f0f0; /* خلفية لسهولة الرؤية */
    }

    /* تحسين الزر السفلي */
    .modal-simple-footer {
        padding: 15px;
        background: #fff;
        border-top: 1px solid #eee;
    }

    .btn-simple-continue {
        width: 100%; /* جعل الزر بعرض كامل */
        padding: 12px;
        font-size: 1.1rem;
    }
}

/* ==========================================
   2. إصلاح قسم البحث العلمي (Research Hub) المقصوص
   ========================================== */
@media (max-width: 991px) {
    /* إجبار القسم على أخذ الطول التلقائي وإلغاء الإخفاء */
    .directorates-grid-section {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 3rem !important;
        overflow: visible !important; /* الحل الجذري للقص */
    }
    
    .directorates-grid-section .container {
        height: auto !important;
    }
    
    /* إضافة مسافات بين البطاقات */
    .directorate-grid-card {
        margin-bottom: 20px;
        height: 300px; /* ارتفاع ثابت للبطاقة على الجوال لضمان التناسق */
    }
    
    /* إصلاح ظهور الخلفية الملونة عند اللمس في الجوال */
    .directorate-grid-card .card-back {
        display: none; /* إخفاء الخلفية مبدئياً */
    }
    
    .directorate-grid-card.active .card-back,
    .directorate-grid-card:hover .card-back {
        display: block;
    }
}

/* ==========================================
   3. تخفيف الـ Blur عن الفيديو في الجوال
   ========================================== */
@media (max-width: 768px) {
    .hero-wrapper {
        /* إزالة الفلتر تماماً لتحسين الأداء والرؤية */
        backdrop-filter: none !important; 
        -webkit-backdrop-filter: none !important;
     
    }

    .hero-video-overlay {
        /* بلور خفيف جداً إذا لزم الأمر */
        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
        background: rgba(0, 0, 0, 0.3) !important; /* تغميق قليلاً لوضوح النص */
    }
    
    /* تعديل حجم الفيديو ليظهر بشكل أفضل */
    .hero-video-container video {
        object-position: center;
    }
}

/* تنسيق نص عداد التحميل */
.loader-text {
    margin-top: 15px;
    color: var(--brand-dark-blue);
    font-weight: bold;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.1rem;
    text-align: center;
}

/* تنسيق حاوية اللودر لتكون فوق الفيديو فقط */
.video-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* خلفية سوداء بدلاً من البيضاء */
    z-index: 5; /* أعلى من الفيديو (0) وأقل من المحتوى النصي (10) */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.video-loader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    color: #fff;
}

/* تصميم سبينر (دائرة التحميل) أنيق */
.video-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--brand-gold); /* لون ذهبي */
    margin: 0 auto;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.progress-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-gold);
    margin-top: 5px;
}

@media (max-width: 768px) {
    /* الحالة الافتراضية: مخفي */
    .welcome-modal {
        display: none; 
        align-items: center;
        justify-content: center;
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
    }

    /* الحالة النشطة: ظاهر (هذا هو السطر الذي كان ينقصنا) */
    .welcome-modal.active {
        display: flex !important;
    }

    .modal-simple {
        display: flex;
        flex-direction: column;
        width: 95% !important;
        max-height: 90vh;
        margin: auto;
        position: relative;
        background: #fff; /* ضمان وجود خلفية */
    }

    .modal-simple-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }

    .modal-simple-footer {
        padding: 15px;
        background: #fff;
        border-top: 1px solid #eee;
    }

    .btn-simple-continue {
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
        /* إصلاح استجابة اللمس */
        cursor: pointer;
        touch-action: manipulation; 
    }
}

/* 1. إعداد الخلفية العامة للـ body */
body.high-contrast {
    background-color: #000 !important; /* خلفية سوداء */
}

/* 2. تطبيق العكس اللوني على أقسام الصفحة الرئيسية فقط
   نستثني زر الوصول لكي لا يتأثر مكانه أو يختفي */
body.high-contrast #siteHeader,
body.high-contrast main,
body.high-contrast .site-footer-v2,
body.high-contrast .announcements-marquee-section,
body.high-contrast .pre-header,
body.high-contrast .welcome-modal { /* في حال وجود النافذة المنبثقة */
    filter: invert(100%) hue-rotate(180deg);
    background-color: #fff !important; /* نعطي خلفية بيضاء ليتم عكسها لأسود */
}

/* 3. إعادة الصور والفيديوهات لطبيعتها داخل الأقسام المعكوسة */
body.high-contrast img,
body.high-contrast video,
body.high-contrast iframe,
body.high-contrast .background-showcase {
    filter: invert(100%) hue-rotate(180deg);
}

/* 4. تنسيق زر الوصول في وضع التباين العالي (الأهم) */
body.high-contrast .accessibility-widget {
    filter: none !important; /* عدم تطبيق الفلتر عليه */
    position: fixed !important; /* إجبار التثبيت */
    z-index: 2147483647 !important; /* أعلى طبقة ممكنة */
}

/* تمييز الزر بلون أصفر فاقع ليظهر بوضوح على الخلفية السوداء */
body.high-contrast .accessibility-toggle {
    background-color: #ffeb3b !important;
    color: #000 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.1);
}

/* تنسيق القائمة المنبثقة في وضع التباين */
body.high-contrast .accessibility-menu {
    background-color: #000 !important;
    border: 2px solid #ffeb3b !important;
    color: #fff !important;
}
body.high-contrast .accessibility-menu span, 
body.high-contrast .accessibility-menu label,
body.high-contrast .accessibility-menu .menu-header {
    color: #fff !important;
}
.accessibility-widget  {
    filter: none !important;
}

/* ==================================================
   إصلاح اختفاء زر الوصول على الجوال (الحل النهائي)
   ================================================== */

/* 1. إعداد الصفحة في وضع التباين */
body.high-contrast {
    background-color: #000 !important; /* الأرضية سوداء */
    min-height: 100vh;
}

/* 2. تطبيق العكس اللوني على كل شيء "ما عدا" زر الوصول والسكربتات
   هذا هو السطر السحري الذي يمنع اختفاء الزر */
body.high-contrast > *:not(.accessibility-widget):not(script):not(style):not(link) {
    filter: invert(100%) hue-rotate(180deg) !important;
    background-color: #fff !important; /* نعطي خلفية بيضاء ليتم عكسها */
}

/* 3. استثناء الصور والفيديوهات من العكس المزدوج (لتبقى طبيعية) */
body.high-contrast img,
body.high-contrast video,
body.high-contrast iframe,
body.high-contrast .background-showcase,
body.high-contrast .modal-simple-logo {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* 4. تثبيت زر الوصول "بالقوة" فوق كل شيء */
.accessibility-widget {
    position: fixed !important; /* تثبيت إجباري */
    bottom: 80px !important;    /* ارتفاع عن الأسفل */
    left: 20px !important;      /* بعد عن اليسار (أو اليمين حسب اللغة) */
    z-index: 2147483647 !important; /* أعلى رقم Z-Index مسموح به في المتصفح */
    
    /* إصلاحات خاصة بالموبايل */
    -webkit-transform: translate3d(0,0,0); /* تفعيل تسريع الهاردوير */
    transform: translate3d(0,0,0);
}

/* تنسيق الزر في وضع التباين ليكون واضحاً جداً */
body.high-contrast .accessibility-toggle {
    background-color: #FFFF00 !important; /* أصفر فاقع */
    color: #000 !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0) !important; /* خدعة لمنع التداخل */
    opacity: 1 !important;
    visibility: visible !important;
}

/* تنسيق القائمة المنبثقة */
body.high-contrast .accessibility-menu {
    background-color: #000 !important;
    border: 2px solid #FFFF00 !important;
    filter: none !important; /* عدم عكس القائمة نفسها */
}

body.high-contrast .accessibility-menu * {
    color: #fff !important;
    filter: none !important;
}
.president-message-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background-color: #002244; /* لون احتياطي */
}

/* تأثير الخلفية */
.president-message-section .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(8px); /* تغبيش الخلفية للتركيز على المحتوى */
    transform: scale(1.1); /* تكبير قليل لمنع حواف بيضاء عند البلور */
    z-index: 0;
}

.president-message-section .glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 34, 68, 0.85); /* طبقة زرقاء داكنة شفافة */
    z-index: 1;
}

/* تنسيق بطاقة الرئيس */
.president-card {
    position: relative;
}

.president-image-wrapper {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.president-image-wrapper:hover {
    transform: translateY(-5px);
}

/* تنسيق النصوص تحت الصورة */
.president-name {
    font-size: 2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.president-title {
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* تنسيق صندوق الاقتباس */
.president-quote-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem;
    position: relative;
}

.quote-icon-wrapper {
    position: absolute;
    top: -25px;
    right: 30px; /* لليمين في العربية */
    width: 50px;
    height: 50px;
    background: var(--brand-gold);
    color: #002244;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* دعم الاتجاه الأيسر (LTR) */
[dir="ltr"] .quote-icon-wrapper {
    right: auto;
    left: 30px;
}

/* =========================================
   تحسينات الموبايل (Mobile Responsive)
   ========================================= */
@media (max-width: 991px) {
    .president-message-section {
        padding: 60px 0; /* تقليل الحشو العلوي والسفلي */
    }

    /* في الموبايل، الصورة تأخذ العرض الكامل لكن تحافظ على نسبة 16:9 */
    .president-image-wrapper {
        width: 100%;
        border-width: 2px;
    }

    .president-name {
        font-size: 1.6rem;
        margin-top: 10px;
    }

    .president-title {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .president-quote-box {
        padding: 2rem 1.5rem; /* تقليل الحشو الداخلي للصندوق */
        text-align: center;
        margin-top: 15px;
    }

    .quote-icon-wrapper {
        left: 50%;
        right: auto;
        transform: translateX(-50%); /* توسيط الأيقونة */
        top: -25px;
    }

    .president-quote-box h5 {
        font-size: 1rem; /* تصغير الخط قليلاً */
        line-height: 1.8;
    }
    
    .president-quote-box .btn {
        width: 100%; /* زر بعرض كامل */
    }
}/* ============================================
   تصميم قسم الأخبار الجديد (Immersive News V2)
   ============================================ */

/* ============================================
   تصميم قسم الأخبار (بدون سكرول - متمدد)
   ============================================ */

/* ============================================
   تصميم قسم الأخبار المحسن (V3 - Compact & Animated)
   ============================================ */

.immersive-news-hub-v2 {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    background-color: #002244;
}

/* الخلفية */
.immersive-news-hub-v2 .background-showcase {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(10px) brightness(0.3); /* تعتيم للخلفية */
    transition: background-image 0.6s ease-in-out; /* انتقال ناعم للخلفية */
    z-index: 0;
}

.immersive-news-hub-v2 .background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,34,68,0.15) 0%, rgba(0,34,68,0.15) 100%);
    z-index: 1;
}

/* === القائمة الجانبية المضغوطة === */
.news-list-container {
    /* ارتفاع ثابت ومطابق للصورة في الكمبيوتر */
    height: 460px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* توزيع العناصر بالتساوي */
}

.story-selector-item {
    padding: 0.8rem 1rem; /* حواف صغيرة */
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid transparent; /* خط جانبي بدلاً من الحدود الكاملة */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    /* تأكد من أن العنصر لا يأخذ مساحة كبيرة */
    flex-grow: 1; 
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story-selector-item:last-child {
    margin-bottom: 0;
}

.story-selector-item:hover {
    background: rgba(255, 255, 255, 0.08);
    padding-right: 1.5rem; /* حركة بسيطة عند التحويم */
}

/* الحالة النشطة */
.story-selector-item.active {
    background: #fff;
    border-left: 4px solid var(--brand-red);
    transform: scale(1.02);
    transform-origin: right center;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
    z-index: 2;
}

/* نصوص القائمة */
.story-selector-item .story-category {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-gold);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.story-selector-item.active .story-category {
    color: var(--brand-red);
}

.story-selector-item .story-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-selector-item.active .story-title {
    color: var(--brand-dark-blue);
}

.story-selector-item .story-date {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
    display: none; /* إخفاء التاريخ لتوفير المساحة (اختياري) */
}

/* === مسرح الصورة (Image Showcase) === */
.story-image-showcase {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    
    height: 460px; /* نفس ارتفاع القائمة بالضبط */
}

.image-stage {
    width: 100%;
    height: 100%;
    position: relative;
}

/* أنيميشن الصورة */
.anim-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomEffect 6s infinite alternate; /* زووم بطيء مستمر */
}

/* التراكب النصي فوق الصورة */
.story-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    color: #fff;
    z-index: 2;
}

/* أنيميشن النصوص */
.anim-text {
    animation: slideUpFade 0.6s ease-out forwards;
}

.story-image-overlay h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* الأزرار */
.view-story-btn {
    padding: 8px 25px;
    font-size: 0.9rem;
    border-radius: 50px;
    background: var(--brand-red);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}
.view-story-btn:hover {
    background: #fff;
    color: var(--brand-red);
}

/* === تعريف الحركات (Keyframes) === */
@keyframes zoomEffect {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   موبايل (Mobile)
   ========================================= */
@media (max-width: 991px) {
    .news-content-row {
        flex-direction: column-reverse; /* القائمة تحت الصورة */
    }
    
    /* إلغاء الارتفاع الثابت في الموبايل */
    .news-list-container, 
    .story-image-showcase {
        height: auto !important; 
    }

    .story-image-showcase {
        height: 280px !important; /* ارتفاع مناسب للموبايل */
        margin-bottom: 15px;
    }

    .story-selector-item {
        padding: 1rem;
        margin-bottom: 8px;
        background: rgba(255,255,255,0.05);
    }
    
    .story-image-overlay {
        padding: 1.5rem;
    }
    
    .story-image-overlay h3 {
        font-size: 1.2rem;
    }
}

/* ============================================
   1. تنسيق قسم البحث العلمي (Modern Cards)
   ============================================ */
.research-card-modern {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.research-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent;
}

.card-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1.5rem;
    transition: transform 0.3s ease;
}

.research-card-modern:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.card-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    text-decoration: none;
    margin-top: 1rem;
    display: inline-block;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.research-card-modern:hover .card-link {
    opacity: 1;
    color: var(--brand-red);
}

/* ألوان الأيقونات */
.bg-blue-light { background-color: #e3f2fd; }
.text-blue { color: #06345a; }

.bg-green-light { background-color: #e8f5e9; }
.text-green { color: #06345a; }

.bg-purple-light { background-color: #f3e5f5; }
.text-purple { color: #06345a;}

.bg-red-light { background-color: #ffebee; }
.text-red { color: #d32f2f; }


/* ============================================
   2. تنسيق قسم البحث الجديد (Universal Search)
   ============================================ */
.universal-search-section {
    background: linear-gradient(135deg, var(--brand-dark-blue) 0%, #06345a 100%);
    
}

/* الخلفية المزخرفة */
.bg-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
 
}

.search-form-wrapper {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}

.search-form-wrapper .input-group {
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.search-form-wrapper .form-control:focus {
    box-shadow: none;
}

.bg-white-transparent {
    background-color: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: normal;
    transition: background 0.3s;
    margin: 0 3px;
}

.bg-white-transparent:hover {
    background-color: rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
    .research-card-modern {
        margin-bottom: 10px;
    }
    
    .search-form-wrapper .form-control {
        font-size: 0.9rem; /* تصغير الخط في الموبايل */
    }
}
/* --- Journal Archive Page --- */
.archive-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 100%;
}

.archive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--brand-red);
}

.archive-card-icon {
    font-size: 2rem;
    color: var(--brand-red);
    margin-left: 20px; /* RTL */
    padding: 15px;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 50%;
}

.archive-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-dark-blue);
    margin-bottom: 5px;
}

.archive-card-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
}
.archive-card:hover .archive-card-link {
    color: var(--brand-red);
}
.lang-switcher-modern {
    display: flex;
    flex-wrap: wrap; /* يسمح بالعناصر بالنزول للأسطر التالية في الشاشات الصغيرة */
    gap: 5px; /* مسافة بين الأزرار */
    align-items: center;
    justify-content: center; /* توسيط العناصر (يمكنك تغييرها لـ flex-start لليسار) */
    padding: 8px;
}

/* شكل زر اللغة */
.lang-item {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background-color: #072955; /* لون خلفية فاتح */
    border: 0px solid #e9ecef;
    padding: 6px 12px;
    border-radius: 50px; /* حواف دائرية كاملة */
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* عند تمرير الماوس */
.lang-item:hover {
    background-color: #e2e6ea;
    transform: translateY(-2px); /* حركة بسيطة للأعلى */
}

/* اللغة النشطة حالياً */
.lang-item.active {
    background-color: #0d6efd; /* لون مميز (أزرق مثلاً) */
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
}

/* تحسين شكل العلم */
.lang-item .fi {
    border-radius: 2px; /* جعل العلم مستطيلاً قليلاً أو دائرياً حسب الرغبة */
    width: 1em;
    line-height: 0.5em;
}

/* تنسيق للموبايل والشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .lang-switcher-modern {
        gap: 5px;
    }
    .lang-item {
        padding: 5px 10px;
        font-size: 8px;
    }
}
.lang-switcher {
    position: relative;
    display: inline-block;
    min-width: 120px;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 35px 8px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.form-select:hover {
    border-color: #4a90e2;
    box-shadow: 0 4px 8px rgba(74, 144, 226, 0.2);
}

.form-select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-select-sm {
    padding: 6px 30px 6px 12px;
    font-size: 13px;
}

/* تلوين خفيف للخيارات */
.form-select option {
    padding: 8px;
    background: white;
    color: #333;
}

.form-select option:checked {
    background: #4a90e2 linear-gradient(0deg, #4a90e2 0%, #4a90e2 100%);
    color: white;
}

.form-select option:hover {
    background: #f0f8ff;
}


@media (max-width: 768px) {
    .lang-switcher {
        min-width: 100px;
    }
    
    .form-select {
        padding: 6px 25px 6px 10px;
        font-size: 13px;
    }
}
.sticky-top {
   
	z-index: 5;}

.mobile-lang-container {
    background-color: #f8f9fa; /* خلفية رمادية فاتحة */
    margin: 10px 15px;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.mobile-lang-title {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
}

.mobile-lang-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mobile-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-width: 70px;
    background-color: #ffffff;
    color: var(--brand-dark-blue);
    border: 1px solid #dee2e6;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.mobile-lang-btn:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    color: var(--brand-dark-blue);
}


.mobile-lang-btn.active {
    background-color: var(--brand-dark-blue);
    color: #ffffff;
    border-color: var(--brand-dark-blue);
    box-shadow: 0 4px 10px rgba(3, 51, 102, 0.25);
    font-weight: 700;
}


.mobile-lang-btn.active:hover {
    background-color: #024; 
}


.college-card-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--brand-white);
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all .3s ease-in-out;
    height: 100%;
}

.college-card-compact:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,33,68,.08);
    border-color: var(--brand-red);
}

.college-card-compact .college-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--light-gray-bg);
    color: var(--brand-red);
    font-size: 1.25rem;
    transition: all .3s ease;
}

.college-card-compact:hover .college-icon {
    background-color: var(--brand-red);
    color: var(--brand-white);
    transform: scale(1.1);
}

.college-card-compact .college-name {
    font-weight: 600;
    color: var(--brand-dark-blue);
    font-size: 0.95rem; 
    margin: 0;
    line-height: 1.4;
}
.college-card-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--brand-white);
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all .3s ease-in-out;
    height: 100%;
}

.college-card-compact:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,33,68,.08);
    border-color: var(--brand-red);
}

.college-card-compact .college-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--light-gray-bg);
    color: var(--brand-red);
    font-size: 1.25rem;
    transition: all .3s ease;
}

.college-card-compact:hover .college-icon {
    background-color: var(--brand-red);
    color: var(--brand-white);
    transform: scale(1.1);
}

.college-card-compact .college-name {
    font-weight: 600;
    color: var(--brand-dark-blue);
    font-size: 0.95rem; 
    margin: 0;
    line-height: 1.4;
}

@media (min-width: 1200px) { 
    .col-xl-5ths {
        flex: 0 0 auto;
        width: 20%;
    }
}
.section-with-logo-bg {
    position: relative; 
    background-color: var(--light-gray-bg); 
    overflow: hidden;
}

.section-with-logo-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

  
    background-image: url('../images/logo-white.png'); 
    background-repeat: repeat;
    background-size: 200px 200px; 
    
  
    opacity: 0.2;
    filter: blur(2px); 
    transform: rotate(-15deg) scale(1.5);
    
  
    pointer-events: none; 
}


.section-with-logo-bg > .container {
    position: relative;
    z-index: 1;
}
@keyframes animated-bg-scroll {
    from {
        background-position: 0 0;
    }
    to {
       
        background-position: 220px 200px; 
    }
}


.section-with-logo-bg {
    position: relative;
    background-color: var(--light-gray-bg);
    overflow: hidden;
}


.section-with-logo-bg::before {
    content: '';
    position: absolute;
    top: -50%; 
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;

  
    background-image: url('../images/logo-white.png');
    background-repeat: repeat;
    background-size: 210px 200px; 
    
  
    opacity: 0.15;
    filter: blur(2px);
    

    animation: animated-bg-scroll 60s linear infinite; 

    pointer-events: none;
}


.section-with-logo-bg > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    /* تحسين شريط الهيدر العلوي */
    .main-header .navbar {
        padding: 10px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
    }

    .navbar-brand img {
        height: 45px; /* تصغير اللوجو قليلاً */
        width: 45px;
    }

    .brand-text .main-title {
        font-size: 1rem;
    }

    /* زر الهمبرغر المخصص (أنيق وعصري) */
    .mobile-menu-btn {
        border: none;
        background: transparent;
        padding: 5px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        box-shadow: none !important;
    }
    
    .mobile-menu-btn .bar {
        width: 25px;
        height: 2px;
        background-color: var(--brand-dark-blue);
        border-radius: 2px;
        transition: all 0.3s;
    }

    /* القائمة الجانبية (Offcanvas) */
    .mobile-side-menu {
        border-right: none;
        box-shadow: 0 0 30px rgba(0,0,0,0.2);
        width: 300px; /* عرض مناسب */
    }

    .offcanvas-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #eee;
    }

    /* روابط القائمة */
    .mobile-nav-list {
        margin: 0;
        padding: 0;
    }

    .mobile-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 10px;
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        border-bottom: 1px solid #f8f9fa;
        transition: all 0.2s;
    }

    .mobile-link i:first-child {
        width: 25px;
        color: var(--brand-red); /* لون الأيقونة */
        opacity: 0.8;
    }

    .mobile-link:active,
    .mobile-link:hover {
        background-color: #fcfcfc;
        color: var(--brand-dark-blue);
        padding-right: 15px; /* حركة بسيطة عند الضغط */
    }

    /* القوائم المنسدلة الفرعية */
    .mobile-link .arrow {
        font-size: 0.8rem;
        transition: transform 0.3s;
        color: #ccc;
    }

    .mobile-link[aria-expanded="true"] .arrow {
        transform: rotate(180deg);
        color: var(--brand-red);
    }

    .mobile-submenu {
        background-color: #f8f9fa;
        border-radius: 8px;
        margin: 5px 10px;
        overflow: hidden;
    }

    .sub-link {
        display: block;
        padding: 10px 15px 10px 40px; /* إزاحة لليمين */
        color: #666;
        text-decoration: none;
        font-size: 0.9rem;
        border-bottom: 1px solid #eee;
    }

    .sub-link:last-child {
        border-bottom: none;
    }
    
    .sub-link:hover {
        background-color: #e9ecef;
        color: var(--brand-dark-blue);
    }


    .mobile-socials a {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background: #f1f1f1;
        border-radius: 50%;
        color: var(--brand-dark-blue);
        margin: 0 5px;
        font-size: 1.1rem;
    }
}


.mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.mobile-link:hover, .mobile-link:active {
    background-color: #fcfcfc;
    color: var(--brand-dark-blue);
  
    padding-inline-end: 15px; 
}


.mobile-link .icon-width {
    width: 25px;
    text-align: center;
    color: var(--brand-red);
    opacity: 0.8;
}


.mobile-link .arrow-icon {
    font-size: 0.8rem;
    color: #ccc;
    transition: transform 0.3s ease;
}


.mobile-link[aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
    color: var(--brand-red);
}


.submenu-group .group-title {
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6c757d;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
}


.mobile-submenu .sub-link {
    display: block;
   
    padding: 10px 20px;
    padding-inline-start: 45px; 
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    transition: all 0.2s;
}

.mobile-submenu .sub-link:hover {
    background-color: #f0f2f5;
    color: var(--brand-red);
    padding-inline-start: 50px; 
}


.social-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    text-decoration: none;
    transition: transform 0.2s;
}
.social-circle:hover { transform: translateY(-3px); }
.social-circle.facebook { background-color: #1877F2; }
.social-circle.telegram { background-color: #0088cc; }
.social-circle.youtube { background-color: #FF0000; }
.social-circle.linkedin { background-color: #0077b5; }


.mobile-lang-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}
.mobile-lang-btn:hover { background: #e9ecef; }
.mobile-lang-btn.active {
    background: var(--brand-dark-blue);
    color: #fff;
    border-color: var(--brand-dark-blue);
}

body {
   
    padding-top: 140px; 
}


@media (max-width: 991px) {
    body {
        padding-top: 80px !important; 
    }
    
    
    .fixed-top {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1030;
    }
}


body.home-page, 
body.has-transparent-header {
    padding-top: 0 !important; 
}


@media (max-width: 991px) {
    #siteHeader, 
    .main-header .navbar {
        background-color: #ffffff !important; 
        box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    }
    
    
    .navbar-brand img {
        max-height: 40px;
        width: auto;
    }
}