/* Start custom CSS for html, class: .elementor-element-2422c5b *//* =====================================================
DEPARTMENT PAGE — PREMIUM ADVANCED VERSION
===================================================== */
.dept-page {
--navy: #07142f;
--navy-dark: #030b1d;
--blue: #168cff;
--red: #d63b2c;
--gold: #f3b51b;
--text: #16243f;
--muted: #71809a;
--light: #f5f8fc;
width: 100%;
background:
radial-gradient(
circle at 10% 20%,
rgba(22,140,255,.035),
transparent 30%
),
#f7f9fc;
color: var(--text);
scroll-behavior: smooth;
}
/* =====================================================
CONTAINER
===================================================== */
.dept-container {
width: min(
1400px,
calc(100% - 40px)
);
margin: 0 auto;
}
/* =====================================================
GLOBAL SECTION ENTRANCE
===================================================== */
.dept-section {
scroll-margin-top: 35px;
margin-bottom: 75px;
animation:
sectionReveal
.8s cubic-bezier(.2,.8,.2,1)
both;
animation-timeline: view();
animation-range: entry 0% cover 25%;
}
@keyframes sectionReveal {
from {
opacity: 0;
transform:
translateY(55px)
scale(.97);
filter:
blur(5px);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
filter: blur(0);
}
}
/* =====================================================
HERO
===================================================== */
.dept-hero {
position: relative;
overflow: hidden;
padding: 55px 0 60px;
background:
radial-gradient(
circle at 15% 20%,
rgba(40,140,255,.25),
transparent 30%
),
radial-gradient(
circle at 90% 80%,
rgba(214,59,44,.20),
transparent 35%
),
linear-gradient(
120deg,
#07145f,
#0c1d40 55%,
#721b27
);
color: #ffffff;
}
/* HERO GRID */
.dept-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: .07;
background-image:
linear-gradient(
rgba(255,255,255,.4) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.4) 1px,
transparent 1px
);
background-size: 35px 35px;
animation:
gridMove
18s linear infinite;
}
@keyframes gridMove {
from {
background-position: 0 0;
}
to {
background-position: 35px 35px;
}
}
/* HERO GLOW */
.dept-hero-glow {
position: absolute;
width: 400px;
height: 400px;
right: -150px;
top: -200px;
border-radius: 50%;
background:
rgba(220,45,40,.25);
filter: blur(80px);
animation:
heroGlow
7s ease-in-out infinite alternate;
}
@keyframes heroGlow {
from {
transform: translate(0,0) scale(1);
}
to {
transform: translate(-60px,80px) scale(1.25);
}
}
/* =====================================================
BREADCRUMB
===================================================== */
.dept-breadcrumb {
position: relative;
margin-bottom: 25px;
color:
rgba(255,255,255,.55);
font-size: 11px;
}
.dept-breadcrumb span {
margin: 0 8px;
color: #ffbd22;
}
/* =====================================================
HERO CONTENT
===================================================== */
.dept-hero-content {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
animation:
heroContent
1s cubic-bezier(.2,.8,.2,1)
both;
}
@keyframes heroContent {
from {
opacity: 0;
transform:
translateY(35px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =====================================================
HERO TAG
===================================================== */
.dept-tag {
display: inline-block;
padding: 7px 14px;
border-radius: 50px;
background:
rgba(255,255,255,.08);
border:
1px solid
rgba(255,255,255,.14);
color: #72baff;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.7px;
backdrop-filter: blur(10px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 8px 25px rgba(0,0,0,.12);
}
/* =====================================================
HERO TITLE
===================================================== */
.dept-hero h1 {
margin: 15px 0 8px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(40px, 5vw, 65px);
line-height: 1;
color: #ffffff !important;
text-shadow:
0 4px 18px
rgba(0,0,0,.20);
}
.dept-hero h1 span {
color: #ffbd25 !important;
text-shadow:
0 4px 18px
rgba(255,189,37,.35);
}
/* =====================================================
HERO DESCRIPTION
===================================================== */
.dept-hero p {
margin: 0;
max-width: 600px;
color:
rgba(255,255,255,.67);
font-size: 13px;
line-height: 1.7;
}
/* =====================================================
HERO STAT
===================================================== */
.dept-hero-stat {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
flex-shrink: 0;
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.14),
rgba(255,255,255,.035)
);
border:
1px solid
rgba(255,255,255,.18);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.15),
0 20px 45px
rgba(0,0,0,.20);
backdrop-filter:
blur(18px);
transition:
.45s cubic-bezier(.2,.8,.2,1);
}
.dept-hero-stat::before {
content: "";
position: absolute;
width: 80px;
height: 180%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);
transform:
rotate(25deg)
translateX(-150px);
transition:
.8s ease;
}
.dept-hero-stat:hover {
transform:
translateY(-8px)
scale(1.04);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.25),
0 25px 55px
rgba(0,0,0,.30);
}
.dept-hero-stat:hover::before {
transform:
rotate(25deg)
translateX(180px);
}
.dept-hero-stat strong {
color: #ffc329;
font-family:
Georgia,
serif;
font-size: 30px;
}
.dept-hero-stat span {
color:
rgba(255,255,255,.6);
font-size: 10px;
margin-top: 5px;
}
/* =====================================================
MAIN LAYOUT
===================================================== */
.dept-layout {
display: grid;
grid-template-columns:
260px minmax(0,1fr);
gap: 35px;
align-items: start;
padding-top: 40px;
padding-bottom: 80px;
}
/* =====================================================
SIDEBAR
POSITION / STRUCTURE KEPT SAME
===================================================== */
.dept-sidebar {
position: sticky;
top: 25px;
}
.sidebar-inner {
padding: 15px;
border-radius: 15px;
background: #ffffff;
border: 1px solid #e7edf5;
box-shadow:
0 15px 40px
rgba(10,30,70,.08);
}
/* =====================================================
SIDEBAR TITLE
===================================================== */
.sidebar-title {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
margin-bottom: 8px;
border-radius: 10px;
background:
linear-gradient(
135deg,
#07142f,
#102a57
);
color: #ffffff;
}
.sidebar-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background:
rgba(255,255,255,.1);
}
.sidebar-title strong {
display: block;
font-size: 12px;
}
.sidebar-title small {
display: block;
margin-top: 4px;
color:
rgba(255,255,255,.5);
font-size: 8px;
}
/* =====================================================
NAVIGATION
===================================================== */
.dept-nav {
display: flex;
flex-direction: column;
}
.dept-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 10px;
border-radius: 9px;
color: #69778d;
text-decoration: none !important;
font-size: 11px;
font-weight: 700;
transition: .3s ease;
}
.dept-nav-link:hover {
color: var(--navy);
background: #f3f7fc;
padding-left: 15px;
}
.dept-nav-link.active {
color: #ffffff !important;
background:
linear-gradient(
135deg,
#0b1c40,
#17376d
);
box-shadow:
0 8px 20px
rgba(7,20,47,.15);
}
.nav-number {
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
color: #8b98aa;
background: #f1f4f8;
font-size: 8px;
font-weight: 800;
}
.dept-nav-link.active .nav-number {
color: #07142f;
background: #ffc329;
}
/* =====================================================
SIDEBAR BUTTON
===================================================== */
.sidebar-button {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 15px;
padding: 12px 15px;
border-radius: 50px;
background:
linear-gradient(
135deg,
#d63b2c,
#b8221c
);
color: #ffffff !important;
text-decoration: none !important;
font-size: 10px;
font-weight: 700;
box-shadow:
0 8px 20px
rgba(210,50,40,.20);
transition: .3s ease;
}
.sidebar-button:hover {
transform:
translateY(-3px);
box-shadow:
0 13px 25px
rgba(210,50,40,.30);
}
.sidebar-button b {
font-size: 16px;
font-weight: 400;
}
/* =====================================================
CONTENT
===================================================== */
.dept-content {
min-width: 0;
}
/* =====================================================
SECTION HEADING
===================================================== */
.section-mini-title {
display: inline-block;
padding: 6px 11px;
border-radius: 50px;
color: #d63b2c;
background: #fff1ef;
font-size: 8px;
font-weight: 800;
letter-spacing: 1.5px;
transition: .35s ease;
}
.section-mini-title:hover {
transform:
translateY(-3px);
box-shadow:
0 8px 20px
rgba(214,59,44,.12);
}
.section-heading h2 {
margin: 10px 0 5px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 30px;
color: #102142;
}
.section-heading h2 span {
color: #d63b2c;
}
.section-line {
width: 45px;
height: 3px;
margin-top: 12px;
border-radius: 20px;
background:
linear-gradient(
90deg,
#d63b2c,
#ffc329
);
box-shadow:
0 3px 12px
rgba(214,59,44,.25);
transition: .4s ease;
}
.dept-section:hover .section-line {
width: 85px;
}
/* =====================================================
COMMON GLOSSY CARD EFFECT
===================================================== */
.overview-text,
.overview-stat,
.vm-card,
.objective-card,
.lab-card,
.faculty-card,
.activity-card,
.download-item {
position: relative;
overflow: hidden;
isolation: isolate;
}
.overview-text::before,
.overview-stat::before,
.vm-card::before,
.objective-card::before,
.lab-card::before,
.faculty-card::before,
.activity-card::before,
.download-item::before {
content: "";
position: absolute;
top: -100%;
left: -40%;
width: 45%;
height: 300%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);
transform:
rotate(25deg)
translateX(-150%);
transition:
transform .8s ease;
pointer-events: none;
z-index: 5;
}
.overview-text:hover::before,
.overview-stat:hover::before,
.vm-card:hover::before,
.objective-card:hover::before,
.lab-card:hover::before,
.faculty-card:hover::before,
.activity-card:hover::before,
.download-item:hover::before {
transform:
rotate(25deg)
translateX(500%);
}
/* =====================================================
OVERVIEW
===================================================== */
.overview-grid {
display: grid;
grid-template-columns:
1fr 300px;
gap: 25px;
margin-top: 25px;
}
.overview-text {
padding: 25px;
border-radius: 15px;
background:
linear-gradient(
145deg,
#ffffff,
#f8fbff
);
border: 1px solid #e8edf4;
box-shadow:
0 10px 30px
rgba(15,40,80,.05);
transition:
.45s cubic-bezier(.2,.8,.2,1);
}
.overview-text:hover {
transform:
translateY(-6px);
box-shadow:
0 22px 45px
rgba(15,40,80,.10);
}
.overview-text p {
color: #69778c;
font-size: 12px;
line-height: 1.9;
}
.overview-stats {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 10px;
}
.overview-stat {
min-height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 13px;
background:
linear-gradient(
145deg,
#eef6ff,
#ffffff
);
border: 1px solid #dfebf8;
transition:
.4s cubic-bezier(.2,.8,.2,1);
}
.overview-stat:hover {
transform:
translateY(-8px)
scale(1.03);
box-shadow:
0 18px 35px
rgba(15,60,110,.12);
}
.overview-stat strong {
color: #0b2550;
font-family:
Georgia,
serif;
font-size: 22px;
}
.overview-stat span {
margin-top: 5px;
color: #8190a4;
font-size: 9px;
}
/* =====================================================
VISION / MISSION
===================================================== */
.vm-grid {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 15px;
margin-top: 25px;
}
.vm-card {
display: flex;
gap: 18px;
padding: 25px;
border-radius: 16px;
border:
1px solid
rgba(10,30,70,.08);
box-shadow:
0 12px 30px
rgba(10,30,70,.06);
transition:
.5s cubic-bezier(.2,.8,.2,1);
}
.vm-card:hover {
transform:
translateY(-10px)
scale(1.015);
box-shadow:
0 25px 50px
rgba(10,30,70,.13);
}
.vision-card {
background:
linear-gradient(
135deg,
#e6f8ff,
#f4fbff
);
}
.mission-card {
background:
linear-gradient(
135deg,
#fff5d8,
#fffdf4
);
}
.vm-icon {
width: 45px;
height: 45px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background:
linear-gradient(
145deg,
#0a2045,
#16396e
);
color: #ffc329;
font-size: 19px;
box-shadow:
0 10px 25px
rgba(7,20,47,.18);
transition: .4s ease;
}
.vm-card:hover .vm-icon {
transform:
rotate(-8deg)
scale(1.12);
box-shadow:
0 15px 30px
rgba(7,20,47,.25);
}
.vm-card h3 {
margin: 2px 0 10px;
color: #102142;
font-size: 16px;
}
.vm-card p,
.vm-card li {
color: #68758a;
font-size: 11px;
line-height: 1.8;
}
.vm-card ul {
padding-left: 17px;
margin: 0;
}
/* =====================================================
OBJECTIVES
===================================================== */
.objective-grid {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 15px;
margin-top: 25px;
}
.objective-card {
position: relative;
overflow: hidden;
padding: 25px;
min-height: 180px;
border-radius: 15px;
background: #ffffff;
border: 1px solid #e7edf4;
transition:
.45s cubic-bezier(.2,.8,.2,1);
}
.objective-card::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
right: -45px;
bottom: -45px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,195,41,.20),
transparent 70%
);
transition: .4s ease;
}
.objective-card:hover {
transform:
translateY(-10px)
perspective(700px)
rotateX(2deg);
border-color: #ffc329;
box-shadow:
0 25px 45px
rgba(20,40,80,.13);
}
.objective-card:hover::after {
transform:
scale(2);
}
.objective-card > span {
color: #d63b2c;
font-size: 11px;
font-weight: 800;
}
.objective-card h3 {
margin: 15px 0 8px;
color: #112447;
font-size: 15px;
}
.objective-card p {
color: #718096;
font-size: 10px;
line-height: 1.7;
}
/* =====================================================
LABS
===================================================== */
.lab-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 25px;
}
.lab-card {
display: grid;
grid-template-columns:
210px 1fr;
gap: 20px;
padding: 10px;
border-radius: 14px;
background: #ffffff;
border: 1px solid #e5ebf2;
box-shadow:
0 8px 25px
rgba(15,40,80,.05);
transition:
.45s cubic-bezier(.2,.8,.2,1);
}
.lab-card:hover {
transform:
translateX(7px)
translateY(-3px);
box-shadow:
0 20px 40px
rgba(15,40,80,.12);
}
.lab-image {
height: 135px;
overflow: hidden;
border-radius: 9px;
}
.lab-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .7s
cubic-bezier(.2,.8,.2,1);
}
.lab-card:hover
.lab-image img {
transform:
scale(1.09);
}
.lab-info {
padding: 8px 10px;
}
.lab-number {
color: #d63b2c;
font-size: 8px;
font-weight: 800;
letter-spacing: 1px;
}
.lab-info h3 {
margin: 8px 0;
color: #102142;
font-size: 15px;
}
.lab-info p {
color: #718096;
font-size: 10px;
line-height: 1.7;
}
.lab-info a {
color: #d63b2c !important;
text-decoration: none !important;
font-size: 10px;
font-weight: 700;
}
/* =====================================================
FACULTY
===================================================== */
.faculty-grid {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 15px;
margin-top: 25px;
}
.faculty-card {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
border-radius: 14px;
background:
linear-gradient(
145deg,
#ffffff,
#f9fbff
);
border: 1px solid #e5ebf2;
box-shadow:
0 8px 25px
rgba(15,40,80,.05);
transition:
.45s cubic-bezier(.2,.8,.2,1);
}
.faculty-card:hover {
transform:
translateY(-9px)
scale(1.015);
border-color:
rgba(255,204,59,.8);
box-shadow:
0 25px 45px
rgba(15,40,80,.12);
}
.faculty-card img {
width: 70px;
height: 70px;
flex-shrink: 0;
object-fit: cover;
border-radius: 50%;
border:
3px solid
#edf3fa;
transition:
.5s cubic-bezier(.2,.8,.2,1);
}
.faculty-card:hover img {
transform:
scale(1.08)
rotate(3deg);
border-color:
#ffc329;
box-shadow:
0 10px 25px
rgba(255,195,41,.25);
}
.faculty-info span {
color: #d63b2c;
font-size: 8px;
font-weight: 700;
}
.faculty-info h3 {
margin: 5px 0;
color: #122344;
font-size: 13px;
}
.faculty-info p {
margin: 0 0 8px;
color: #8995a7;
font-size: 9px;
}
.faculty-info a {
color: #102142 !important;
text-decoration: none !important;
font-size: 9px;
font-weight: 700;
}
/* =====================================================
ACTIVITIES
===================================================== */
.activity-grid {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 15px;
margin-top: 25px;
}
.activity-card {
overflow: hidden;
border-radius: 14px;
background: #ffffff;
border: 1px solid #e5ebf2;
box-shadow:
0 8px 25px
rgba(15,40,80,.05);
transition:
.45s cubic-bezier(.2,.8,.2,1);
}
.activity-card:hover {
transform:
translateY(-8px);
box-shadow:
0 25px 45px
rgba(15,40,80,.13);
}
.activity-card img {
width: 100%;
height: 180px;
object-fit: cover;
transition:
.7s cubic-bezier(.2,.8,.2,1);
}
.activity-card:hover img {
transform:
scale(1.07);
}
.activity-card > div {
padding: 18px;
}
.activity-card span {
color: #d63b2c;
font-size: 8px;
font-weight: 800;
}
.activity-card h3 {
margin: 7px 0;
color: #112447;
font-size: 14px;
}
.activity-card p {
margin: 0;
color: #748198;
font-size: 10px;
}
/* =====================================================
DOWNLOADS
===================================================== */
.download-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 25px;
}
.download-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 17px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e5ebf2;
color: #122344 !important;
text-decoration: none !important;
transition:
.4s cubic-bezier(.2,.8,.2,1);
}
.download-item:hover {
transform:
translateX(7px);
border-color: #ffc329;
box-shadow:
0 15px 30px
rgba(20,40,80,.09);
}
.download-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 9px;
color: #d63b2c;
background: #fff0ee;
font-size: 8px;
font-weight: 800;
transition: .4s ease;
}
.download-item:hover
.download-icon {
transform:
rotate(-8deg)
scale(1.1);
background:
#d63b2c;
color: #ffffff;
}
.download-item div {
flex: 1;
}
.download-item strong {
display: block;
font-size: 11px;
}
.download-item small {
display: block;
margin-top: 3px;
color: #8a96a7;
font-size: 8px;
}
.download-item b {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf5ff;
color: #146fca;
transition: .4s ease;
}
.download-item:hover b {
transform:
translateX(3px)
scale(1.1);
background:
#146fca;
color: #ffffff;
}
/* =====================================================
TABLET
===================================================== */
@media(max-width:1000px) {
.dept-layout {
grid-template-columns:
210px minmax(0,1fr);
gap: 20px;
}
.overview-grid {
grid-template-columns: 1fr;
}
.vm-grid {
grid-template-columns: 1fr;
}
.objective-grid {
grid-template-columns:
1fr 1fr;
}
}
/* =====================================================
MOBILE
===================================================== */
@media(max-width:700px) {
.dept-container {
width:
calc(100% - 24px);
}
.dept-hero {
padding:
40px 0 45px;
}
.dept-hero-content {
align-items:
flex-start;
}
.dept-hero-stat {
width: 85px;
height: 85px;
}
.dept-hero-stat strong {
font-size: 21px;
}
.dept-layout {
display: block;
padding-top: 20px;
}
/* MOBILE SIDEBAR */
.dept-sidebar {
position: sticky;
top: 8px;
z-index: 100;
margin-bottom: 25px;
}
.sidebar-inner {
padding: 8px;
overflow: hidden;
}
.sidebar-title {
padding: 10px;
margin-bottom: 5px;
}
.dept-nav {
display: flex;
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
gap: 5px;
padding-bottom: 2px;
}
.dept-nav::-webkit-scrollbar {
display: none;
}
.dept-nav-link {
flex: 0 0 auto;
padding: 9px 12px;
white-space: nowrap;
font-size: 9px;
}
.nav-number {
display: none;
}
.sidebar-button {
display: none;
}
.dept-section {
scroll-margin-top: 115px;
margin-bottom: 55px;
}
/* MOBILE TITLE */
.dept-hero h1 {
font-size: 38px;
color: #ffffff !important;
}
.dept-hero h1 span {
color: #ffbd25 !important;
}
.dept-hero p {
font-size: 11px;
}
.objective-grid {
grid-template-columns: 1fr;
}
.lab-card {
grid-template-columns: 1fr;
}
.lab-image {
height: 190px;
}
.faculty-grid {
grid-template-columns: 1fr;
}
.activity-grid {
grid-template-columns: 1fr;
}
.vm-card {
padding: 20px;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media(max-width:450px) {
.dept-hero-content {
flex-direction: column;
}
.dept-hero-stat {
width: 100%;
height: 70px;
flex-direction: row;
gap: 10px;
}
.dept-hero-stat span {
margin: 0;
}
.overview-stats {
grid-template-columns:
repeat(3,1fr);
}
.vm-card {
padding: 18px;
}
.vm-icon {
width: 38px;
height: 38px;
}
.dept-hero h1 {
font-size: 34px;
color: #ffffff !important;
}
.dept-hero h1 span {
color: #ffbd25 !important;
}
}
/* =====================================================
ACCESSIBILITY
===================================================== */
@media(prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count:
1 !important;
transition-duration:
.01ms !important;
scroll-behavior: auto !important;
}
}/* End custom CSS */