html, body { max-width: 100%; overflow-x: hidden;}
* { max-width: 100%;}
:root {
/* Institutional Colors */
--primary: #002147;
--primary-dark: #00152e;
--primary-light: #073f73;
--secondary: #0b5aa0;
/* Gold */
--gold: #d4af37;
--gold-light: #f4d35e;
--gold-soft: #fff8dc;
/* Basic */
--white: #ffffff;
--black: #111827;
/* Text */
--text: #263548;
--muted: #64748b;
--light-text: #94a3b8;
/* Background */
--background: #f5f7fb;
--surface: #ffffff;
--surface-soft: #f8fafc;
/* Borders */
--border: #e2e8f0;
--border-dark: #cbd5e1;
/* Shadows */
--shadow-sm:
0 3px 12px rgba(15, 23, 42, 0.07);
--shadow:
0 10px 30px rgba(15, 23, 42, 0.10);
--shadow-lg:
0 18px 45px rgba(15, 23, 42, 0.16);
/* Layout */
--container-width: 1440px;
/* Radius */
--radius-sm: 7px;
--radius: 12px;
--radius-lg: 18px;
/* Animation */
--transition: 0.25s ease;
}
/* =========================================================
2. RESET
========================================================= */
*,
*::before,
*::after {margin: 0; padding: 0; box-sizing: border-box;}
html { scroll-behavior: smooth; overflow-x: hidden;}
body { min-height: 100vh; font-family: "Poppins", "Noto Sans Devanagari", "Segoe UI", Arial, sans-serif;
color: var(--text); background: var(--background); line-height: 1.6; overflow-x: hidden;}
img { max-width: 100%; height: auto;}
button,input,textarea { font: inherit;}
button { cursor: pointer;}
a { color: inherit;}
ul { list-style: none;}
address { font-style: normal;}
/* =========================================================
3. CONTAINER
========================================================= */
.container { width: min(94%, var(--container-width)); margin-inline: auto;}
/* =========================================================
4. ACCESSIBILITY
========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 3px solid rgba(244, 211, 94, 0.9); outline-offset: 3px;}
/* =========================================================
5. HEADER
========================================================= */
.site-header { position: relative; z-index: 1000; background: var(--white); box-shadow: var(--shadow-sm);}
/* =========================================================
6. TOP STRIP
========================================================= */
.top-strip { min-height: 38px; color: rgba(255, 255, 255, 0.92);
background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-dark) );
border-bottom: 1px solid rgba(255, 255, 255, 0.10);font-size: 12px;
}
.top-strip-inner {min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.top-item,.top-links,.top-links span { display: flex; align-items: center;}
.top-item,.top-links span { gap: 8px;}
.top-links { gap: 24px;}
.top-strip i { color: var(--gold-light);}
/* =========================================================
7. MAIN COLLEGE HEADER
========================================================= */
.main-header { background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);}
.college-header { min-height: 175px; display: grid; grid-template-columns: 125px minmax(0, 1fr) 315px; align-items: center;
gap: 30px; padding: 22px 0;}
/* =========================================================
8. LOGO
========================================================= */
.college-logo { display: flex; align-items: center; justify-content: center;}
.college-logo a { display: inline-flex;}
.image-logo { width: 115px; height: 115px; display: block; object-fit: contain; padding: 5px; background: var(--white);
border: 4px solid var(--gold); border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 33, 71, 0.18);
transition: transform var(--transition), box-shadow var(--transition);
}
.image-logo:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 33, 71, 0.24);}
/* =========================================================
9. COLLEGE INFORMATION
========================================================= */
.college-info {position: relative; min-width: 0; overflow: hidden; padding: 25px 28px; color: var(--white); text-align: center;
background: linear-gradient(135deg, var(--primary-dark), var(--primary), var(--primary-light) );
border-bottom: 4px solid var(--gold);border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0, 33, 71, 0.20);
}
.college-info::before { content: ""; position: absolute; width: 230px; height: 230px; right: -120px; top: -150px;
border-radius: 50%; background: rgba(255, 255, 255, 0.045); pointer-events: none;}
.college-info::after { content: ""; position: absolute; width: 180px; height: 180px; left: -100px; bottom: -130px;
border-radius: 50%; background: rgba(212, 175, 55, 0.07); pointer-events: none;}
.college-title-line { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 15px;}
.title-accent {width: 35px; height: 2px; flex-shrink: 0; background: var(--gold);}
.college-info h1 { font-family: "Noto Sans Devanagari", "Poppins", sans-serif; font-size: clamp(21px, 2.3vw, 34px);
line-height: 1.35; font-weight: 700;}
.college-info h2 {margin-top: 3px; font-size: clamp(15px, 1.4vw, 21px); font-weight: 500; color: rgba(255, 255, 255, 0.93);}
.college-meta { position: relative; z-index: 2; margin-top: 15px; display: flex; justify-content: center; align-items: center;
flex-wrap: wrap; gap: 7px 18px;}
.college-meta span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.87); font-size: 11px;}
.college-meta i { color: var(--gold-light);}
/* =========================================================
12. NAVIGATION
========================================================= */
.navbar {position: relative; z-index: 900;background:linear-gradient(90deg, var(--primary-dark), var(--primary),var(--primary-dark));
border-bottom: 3px solid var(--gold);box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16);}
.nav-container {width: 100%;}
.nav-wrapper { width: 100%;}
.main-nav { width: min(100%, 1600px); min-height: 52px; margin-inline: auto; padding: 0 10px; display: flex; align-items: stretch;
justify-content: center; gap: 0;}
.nav-item { position: relative; display: flex; align-items: stretch;}
.nav-item > a, .nav-menu-button {position: relative; min-height: 52px; display: flex; align-items: center; justify-content: center;
gap: 7px; padding: 0 15px; color: var(--white); background: transparent; border: none;
text-decoration: none; white-space: nowrap;font-size: 12px;font-weight: 600;
transition: background var(--transition), color var(--transition);}
.nav-item > a::after,.nav-menu-button::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px;
background: var(--gold-light); transform: translateX(-50%);
transition: width var(--transition);
}
.nav-item:hover > a, .nav-item:hover > .nav-menu-button, .nav-item:focus-within > a, .nav-item:focus-within > .nav-menu-button,
.nav-item.menu-open > .nav-menu-button { color: var(--primary-dark);background: var(--gold);}
.nav-item:hover > a::after,
.nav-item:hover > .nav-menu-button::after,
.nav-item:focus-within > a::after,
.nav-item:focus-within > .nav-menu-button::after,
.nav-item.menu-open > .nav-menu-button::after {
width: 75%;
}
.nav-menu-button i { font-size: 8px; transition: transform var(--transition);}
.nav-item:hover > .nav-menu-button i, .nav-item.menu-open > .nav-menu-button i { transform: rotate(180deg);}
.home-item > a { background: rgba(255, 255, 255, 0.07);}
/* =========================================================
DROPDOWN MENU
========================================================= */
.dropdown-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 10000; min-width: 270px; padding: 6px;
background: var(--white); border-top: 4px solid var(--gold); border-radius: 0 0 10px 10px;
box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(8px); transition: opacity var(--transition), transform var(--transition),
visibility var(--transition);
}
.nav-item:hover > .dropdown-menu, .nav-item:focus-within > .dropdown-menu,
.nav-item.menu-open > .dropdown-menu {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.dropdown-menu > a, .dropdown-menu .has-submenu > a { min-height: 41px; display: flex; align-items: center;
justify-content: space-between; gap: 10px; padding: 9px 12px;
color: var(--text); border-radius: 6px; text-decoration: none;
font-size: 12px; font-weight: 500;
transition: color var(--transition), background
var(--transition), padding-left var(--transition);
}
.dropdown-menu > a:hover, .dropdown-menu
.has-submenu:hover > a, .dropdown-menu > a:focus,
.dropdown-menu .has-submenu:focus-within > a { padding-left: 17px; color: var(--white); background: linear-gradient(90deg,
var(--primary), var(--primary-light) );
}
.dropdown-menu > a + a, .dropdown-menu .has-submenu + a { border-top: 1px solid #edf1f5;}
.dropdown-menu i { flex-shrink: 0; font-size: 8px;}
.wide-menu { width: 100vw;}
/* =========================================================
SECOND LEVEL SUBMENU
========================================================= */
.has-submenu { position: relative;}
/* Default: submenu opens to the RIGHT */
.submenu { position: absolute; top: -6px; left: calc(100% + 6px); right: auto; width: 245px; padding: 6px;
box-sizing: border-box; background: var(--white); border-top: 4px solid var(--gold); border-radius: 9px;
box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(8px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Show submenu */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu.submenu-open > .submenu {opacity: 1;visibility: visible; pointer-events: auto; transform: translateX(0);}
/* =========================================================
SUBMENU OPENS TO LEFT
Added automatically by JavaScript
========================================================= */
.has-submenu.submenu-left > .submenu { left: auto; right: calc(100% + 6px); transform: translateX(-8px);}
.has-submenu.submenu-left:hover > .submenu,
.has-submenu.submenu-left:focus-within > .submenu,
.has-submenu.submenu-left.submenu-open > .submenu {transform: translateX(0);}
/* =========================================================
SUBMENU LINKS
========================================================= */
.submenu > a { min-height: 39px; display: flex; align-items: center; padding: 8px 11px; box-sizing: border-box;
color: var(--text);border-radius: 6px; text-decoration: none; font-size: 12px;
transition: color var(--transition), background var(--transition), padding-left var(--transition);
}
.submenu > a:hover, .submenu > a:focus {padding-left: 16px; color: var(--white);
background:linear-gradient( 90deg, var(--primary), var(--primary-light) );
}
/* ============================================== Prashant etc Faculty page design ========================================================= */
.faculty-item { position: static;}
.faculty-menu { left: 50%; width: min(800px, 94vw); max-height: 490px; overflow-y: auto; transform: translate(-50%, 8px);}
.faculty-item:hover > .faculty-menu,
.faculty-item:focus-within > .faculty-menu,
.faculty-item.menu-open > .faculty-menu { transform: translate(-50%, 0);}
.faculty-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 14px;
margin-bottom: 5px; background: linear-gradient( 135deg, var(--primary-dark), var(--primary) );
border-radius: 7px;
}
.faculty-menu-header span {display: block; color: var(--gold-light);font-size: 9px;font-weight: 700;letter-spacing: 1px;}
.faculty-menu-header strong {display: block; margin-top: 2px; color: var(--white); font-size: 15px;}
.faculty-view-all { display: inline-flex !important; align-items: center; gap: 7px; color: var(--primary) !important;
background: var(--gold) !important; padding: 7px 10px !important; border-radius: 6px;
font-size: 10px !important; font-weight: 700 !important;
}
.faculty-view-all:hover {background: var(--gold-light) !important;}
.faculty-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px;}
.faculty-grid > a {display: block; padding: 9px 11px; border-radius: 6px; text-decoration: none;
transition: background var(--transition), transform var(--transition);}
.faculty-grid > a:hover { background: var(--primary); transform: translateY(-1px);}
.faculty-grid strong {display: block; color: var(--primary); font-size: 11.5px;}
.faculty-grid span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px;}
.faculty-grid > a:hover strong { color: var(--white);}
.faculty-grid > a:hover span { color: rgba(255, 255, 255, 0.72);}
.HeroSection{ display:grid; grid-template-columns:260px 1fr 320px; gap:30px; padding:35px; background:#f5f7fb;}
.ProfileSection{ display:flex; flex-direction:column; gap:25px;}
.ProfileCard{ background:white; border-radius:15px; padding:25px; border-top:5px solid var(--gold);
box-shadow: 0 10px 25px rgba(0,0,0,.15); transition:.3s;
}
/* =========================================================
Principal, Director pics, College Pics and Notices section
========================================================= */
.ProfileCard:hover{transform:translateY(-8px);}
.PrinciPic{ width:170px; height:170px; border-radius:50%; object-fit:cover; border:5px solid #0d6efd;}
.ProfileCard h3{ margin-top:15px; color:#003366;}
.ProfileCard p{ margin-top:8px; font-weight:500;}
.college-slider{ min-height:550px; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.15);
animation:CollegeSlide 30s infinite; background-size:cover; background-position:center;}
@keyframes CollegeSlide{0%{background-image:url("Pic1.jpg");}
10%{background-image:url("Pic2.jpg");}
20%{background-image:url("Pic3.jpg");}
30%{background-image:url("Pic4.jpg");}
40%{background-image:url("Pic5.jpg");}
50%{background-image:url("PakhsiVihar.jpeg");}
60%{background-image:url("HSC_Plantation2.jpeg");}
70%{background-image:url("HSC_VillageVisit3.jpeg");}
80%{background-image:url("Orientation1.jpeg");}
90%{background-image:url("HSC_Ma'amPlantation.jpeg");}
90%{background-image:url("Orientation2.jpeg");}
}
/* .college-slider {
position: relative;
width: 100%;
height: 580px;
overflow: hidden;
border-radius: 12px;
background: #111;
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.18);
}
/* -------------------------
IMAGE LAYERS
------------------------- */
/*
.slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
transition:
opacity 1.8s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition:
transform 7s ease-out;
}
/* Slow cinematic zoom */
/*.slide.active img {
transform: scale(1.08);
} */
/* -------------------------
VERY LIGHT OVERLAY
------------------------- */
/*.college-slider::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.12),
rgba(0,0,0,0.02) 50%,
rgba(0,0,0,0.28)
);
}
/* -------------------------
TEXT
------------------------- */
/*.slider-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 28px;
color: white;
}
.welcome {
margin: 0;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
text-shadow:
0 2px 8px rgba(0,0,0,0.6);
}
.welcome::after {
content: "";
display: block;
width: 28px;
height: 1px;
margin: 7px auto;
background: rgba(255,255,255,0.8);
}
.slider-content h1 {
margin: 12px 0 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 600;
line-height: 1.1;
color: #fff;
text-shadow:
0 3px 15px rgba(0,0,0,0.6);
}
.slider-description {
position: absolute;
bottom: 28px;
width: 90%;
max-width: 480px;
margin: 0;
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 1.6;
color: rgba(255,255,255,0.94);
text-shadow:
0 2px 8px rgba(0,0,0,0.7);
}
/* -------------------------
MOBILE
------------------------- */
/*@media (max-width: 600px) {
.college-slider {
height: 430px;
border-radius: 9px;
}
.slider-content {
padding-top: 22px;
}
.welcome {
font-size: 8px;
letter-spacing: 1.8px;
}
.slider-content h1 {
font-size: 28px;
}
.slider-description {
bottom: 22px;
font-size: 10px;
}
} */
/* =====================================================
CLEAN COLLEGE HERO SLIDER
===================================================== */
/*
.college-slider {
position: relative;
width: 100%;
height: 580px;
overflow: hidden;
background-image: url("Pic1.jpg");
background-size: cover;
background-position: center;
/* border-radius: 14px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.16);
animation: CollegeSlide 55s infinite ease-in-out;
} */
/* =====================================================
VERY SUBTLE OVERLAY
No colored gradient
===================================================== */
/* .college-slider::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.20),
rgba(0, 0, 0, 0.03) 45%,
rgba(0, 0, 0, 0.30)
);
} */
/* =====================================================
CONTENT AREA
===================================================== */
/* .slider-content {
position: absolute;
z-index: 2;
inset: 0;
color: white;
text-align: center;
padding-top: 28px;
display: flex;
flex-direction: column;
align-items: center;
} */
/* =====================================================
WELCOME TEXT
===================================================== */
/* .slider-content .welcome {
margin: 0;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.96);
text-shadow:
0 2px 7px rgba(0, 0, 0, 0.55);
} */
/* Small line underneath */
/* .slider-content .welcome::after {
content: "";
display: block;
width: 28px;
height: 1px;
margin: 7px auto 0;
background: rgba(255, 255, 255, 0.75);
} */
/* =====================================================
MAIN HEADING
===================================================== */
/* .slider-content h1 {
margin: 14px 0 0;
max-width: 600px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(30px, 4vw, 48px);
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.2px;
color: #ffffff;
text-shadow:
0 3px 12px rgba(0, 0, 0, 0.55);
} */
/* =====================================================
BOTTOM DESCRIPTION
===================================================== */
/* .slider-description {
position: absolute;
left: 50%;
bottom: 27px;
transform: translateX(-50%);
width: 90%;
max-width: 480px;
margin: 0;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.25px;
color: rgba(255, 255, 255, 0.94);
text-align: center;
text-shadow:
0 2px 7px rgba(0, 0, 0, 0.65);
} */
/* =====================================================
SLIDER ANIMATION
Each image appears ONCE.
No duplicate image at the end.
===================================================== */
/* @keyframes CollegeSlide {
0% {
background-image: url("Pic1.jpg");
background-position: 50% 50%;
background-size: 100%;
}
8% {
background-image: url("Pic1.jpg");
background-position: 52% 48%;
background-size: 105%;
}
10% {
background-image: url("Pic2.jpg");
background-position: 50% 50%;
background-size: 100%;
}
18% {
background-image: url("Pic2.jpg");
background-position: 48% 52%;
background-size: 105%;
}
20% {
background-image: url("Pic3.jpg");
background-position: 50% 50%;
background-size: 100%;
}
28% {
background-image: url("Pic3.jpg");
background-position: 52% 48%;
background-size: 105%;
}
30% {
background-image: url("Pic4.jpg");
background-position: 50% 50%;
background-size: 100%;
}
38% {
background-image: url("Pic4.jpg");
background-position: 48% 52%;
background-size: 105%;
}
40% {
background-image: url("Pic5.jpg");
background-position: 50% 50%;
background-size: 100%;
}
48% {
background-image: url("Pic5.jpg");
background-position: 52% 48%;
background-size: 105%;
}
50% {
background-image: url("PakhsiVihar.jpeg");
background-position: 50% 50%;
background-size: 100%;
}
58% {
background-image: url("PakhsiVihar.jpeg");
background-position: 48% 52%;
background-size: 105%;
}
60% {
background-image: url("HSC_Plantation2.jpeg");
background-position: 50% 50%;
background-size: 100%;
}
68% {
background-image: url("HSC_Plantation2.jpeg");
background-position: 52% 48%;
background-size: 105%;
}
70% {
background-image: url("HSC_VillageVisit3.jpeg");
background-position: 50% 50%;
background-size: 100%;
}
78% {
background-image: url("HSC_VillageVisit3.jpeg");
background-position: 48% 52%;
background-size: 105%;
}
80% {
background-image: url("Orientation1.jpeg");
background-position: 50% 50%;
background-size: 100%;
}
88% {
background-image: url("Orientation1.jpeg");
background-position: 52% 48%;
background-size: 105%;
}
90% {
background-image: url("HSC_Ma'amPlantation.jpeg");
background-position: 50% 50%;
background-size: 100%;
}
98% {
background-image: url("HSC_Ma'amPlantation.jpeg");
background-position: 48% 52%;
background-size: 105%;
}
100% {
background-image: url("HSC_Ma'amPlantation.jpeg");
background-position: 48% 52%;
background-size: 105%;
}
}
/* =====================================================
MOBILE
===================================================== */
/*
@media (max-width: 600px) {
.college-slider {
height: 430px;
border-radius: 10px;
}
.slider-content {
padding-top: 22px;
}
.slider-content .welcome {
font-size: 8px;
letter-spacing: 1.8px;
}
.slider-content h1 {
margin-top: 11px;
font-size: 28px;
max-width: 90%;
}
.slider-description {
bottom: 22px;
width: 88%;
font-size: 10px;
line-height: 1.5;
}
} */
.NoticeBox{ background:white; border-radius:18px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,.12);}
.NoticeBox h2{ background:#002147; color:white; padding:18px; text-align:center; border-bottom:4px solid #D4AF37;}
.NoticeList{ list-style:none; background:white;}
.NoticeList li{ border-bottom:1px solid #ddd;}
.NoticeList li a{ display:block; color:#333; padding:18px; transition:.3s;}
.NoticeList li a:hover{ background:#f5d76e; color:#002147; padding-left:30px;}
.MoreNotices{ margin-top:15px; text-align:center;}
.MoreNotices a{ display:inline-block; padding:10px 18px; background:#003366; color:#ffffff; text-decoration:none;
font-size:15px; font-weight:bold; border-radius:25px; transition:0.3s ease;}
.MoreNotices a:hover{ background:#ff9800; color:#000; transform:translateY(-2px);}
/* =========================================================
Search button styles......
========================================================= */
#searchInput{ width:100%; height:38px; padding:8px 12px; border-radius:8px; border:1px solid #ccc; font-size:14px; }
#searchButton{ background:#003366; color:white; border:none; padding:0 18px;
border-radius:8px; cursor:pointer; white-space:nowrap; }
#searchButton:hover{ background:#b8860b; }
/* Floating search result */
.search-container{ width:300px; position:relative; flex-shrink:0;}
/* Search Box */
.search-box{ display:flex; gap:8px; align-items:center;}
#searchInput{ width:180px; height:38px; padding:8px 12px; border-radius:20px; border:1px solid #ccc; font-size:14px; }
#searchButton{ height:38px; padding:0 18px; border-radius:20px; background:#ffc107; color:#002147; border:none;
font-weight:600; cursor:pointer; }
#searchButton:hover{ background:#002147; color:white; }
/* Search Result Floating Box */
#results{ position:absolute; top:45px; left:0; width:320px; background:white; border-radius:12px;
box-shadow:0 15px 35px rgba(0,0,0,.25); border-top:4px solid #ffc107; z-index:3000; overflow:hidden;}
.search-title{ background:#002147; color:white; padding:12px 15px; font-size:15px; font-weight:600; }
.search-card{ display:flex; gap:15px; padding:15px; border-bottom:1px solid #eee; transition:.3s; }
.search-card:hover{ background:#f1f7ff; }
.search-icon{ width:40px; height:40px; background:#ffc107; color:#002147; border-radius:50%; display:flex;
align-items:center; justify-content:center; font-size:18px; }
.search-info a{ color:#002147; font-size:16px; font-weight:600; text-decoration:none; }
.search-info a:hover{ color:#0d6efd; }
.search-info p{ margin-top:5px; color:#666; font-size:13px;}
/* Hide when empty */
#results:empty{ display:none; }
#results div, #results p{ padding:12px; border-bottom:1px solid #eee; }
#results div:hover{ background:#fff0f5; }
.search-box{ display:flex; gap:10px; align-items:center; }
#searchInput{ flex:1; padding:12px; border:1px solid #ccc; border-radius:8px; outline:none; font-size:15px; }
#searchInput:focus{ border-color:#0d6efd;}
#searchButton{ background:#003b73; color:white; border:none; padding:10px 18px; border-radius:8px;
cursor:pointer; transition:.3s;}
#searchButton:hover{ background:#002147;}
#searchButton:hover{ background:#0D47A1; transform:translateY(-2px);}
.results #results { color:rgb(237, 13, 13); font-family: sans-serif;
margin-top: 5px; width: 20px;}
/*............. Inside body tag, college pic and notices etc ends here......................*/
/* ...................About College information starts here .......................... */
/* =========================================================
VARIABLES
========================================================= */
:root {
--college-navy: #002147;
--college-blue: #003b73;
--college-blue-light: #0d6efd;
--college-gold: #d4af37;
--college-gold-dark: #b8860b;
--college-gold-light: #fff7d6;
--college-white: #ffffff;
--college-bg: #f4f7fb;
--college-text: #374151;
--college-muted: #6b7280;
--college-border: #e5e7eb;
--college-shadow:
0 15px 40px rgba(0, 33, 71, .10);
--college-radius: 22px;
}
/* =========================================================
GLOBAL
========================================================= */
.AboutSection, .StatsSection, .HighlightSection {width: 100%; box-sizing: border-box; font-family:"Segoe UI", Arial, sans-serif;}
.AboutSection *, .StatsSection *, .HighlightSection * { box-sizing: border-box;}
/* =========================================================
ABOUT SECTION
========================================================= */
.AboutSection { position: relative; width: 100%; padding: 80px 5%;
background: radial-gradient(circle at top right, rgba(212,175,55,.12), transparent 28%),
linear-gradient(135deg, #ffffff 0%, #f4f7fb 100% );
}
/* Inner container */
.AboutInner {width: 100%; max-width: 1500px; margin: 0 auto;}
/* =========================================================
SECTION TITLE
========================================================= */
.SectionTitle { text-align: center; margin-bottom: 55px;}
.SectionTag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 16px;
color: var(--college-gold-dark); background: var(--college-gold-light); border: 1px solid rgba(212,175,55,.3);
border-radius: 30px; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
}
.SectionTitle h2 { margin: 0; color: var(--college-navy); font-size: clamp(30px, 4vw, 46px);line-height: 1.2;font-weight: 800;}
.TitleLine { width: 85px; height: 4px; margin: 15px auto; border-radius: 10px;
background: linear-gradient(90deg, var(--college-navy), var(--college-gold));
}
.SectionTitle p { margin: 0; color: var(--college-muted); font-size: 17px; font-weight: 500;}
.SectionTitle p span { margin: 0 8px; color: var(--college-gold); font-weight: bold;}
/* =========================================================
ABOUT CONTAINER
========================================================= */
.AboutContainer {display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
align-items: center; gap: 60px; width: 100%;
}
/* =========================================================
COLLEGE IMAGE
========================================================= */
.AboutImage { width: 100%;}
.ImageFrame { position: relative; width: 100%; overflow: hidden; border-radius: var(--college-radius);
box-shadow: 0 20px 45px rgba(0,33,71,.18); border: 5px solid white;
}
.ImageFrame::after {content: ""; position: absolute; inset: 0;
background:linear-gradient(to top,rgba(0,33,71,.75),transparent 45%); pointer-events: none;
}
.AboutImage img {display: block; width: 100%; height: 540px; object-fit: cover; transition: transform .6s ease;}
.ImageFrame:hover img {transform: scale(1.05);}
/* Image caption */
.ImageCaption { position: absolute; z-index: 2; bottom: 25px; left: 25px; right: 25px; display: flex; align-items: center;
gap: 13px; color: white;
}
.ImageCaption > i { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; color: var(--college-navy);
background: var(--college-gold); border-radius: 12px; font-size: 20px;
}
.ImageCaption strong {display: block; font-size: 17px;}
.ImageCaption span { display: block; margin-top: 3px; color: #e5e7eb; font-size: 13px;}
/* =========================================================
ABOUT CONTENT
========================================================= */
.AboutContent { position: relative; padding: 40px; background: white;
border-radius: var(--college-radius); border: 1px solid var(--college-border); box-shadow: var(--college-shadow);
}
.ContentTag { display: inline-flex; align-items: center; gap: 7px; color: var(--college-gold-dark);
font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}
.AboutContent h3 { margin: 10px 0 22px; padding-left: 17px; color: var(--college-navy);
border-left:5px solid var(--college-gold); font-size: clamp(25px, 3vw, 32px); line-height: 1.3;
}
.AboutContent p { margin: 0 0 17px; color: var(--college-text); font-size: 15px; line-height: 1.85; text-align: justify;}
.AboutContent p:last-of-type { margin-bottom: 25px;}
/* =========================================================
LOCATION BOX
========================================================= */
.LocationBox { display: flex; align-items: center; gap: 13px; padding: 15px 18px; background: #f8fafc;
border: 1px solid var(--college-border); border-left: 4px solid var(--college-gold); border-radius: 12px;
}
.LocationIcon {display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; color: white;
background: var(--college-navy); border-radius: 10px;
}
.LocationBox strong { display: block; color: var(--college-navy); font-size: 14px;}
.LocationBox span { display: block; margin-top: 3px; color: var(--college-muted); font-size: 13px;}
/* =========================================================
STATISTICS SECTION
========================================================= */
.StatsSection { width: 100%; padding: 15px 5%; background: linear-gradient(135deg, #001b38, #002147 55%, #003b73);
border-top: 4px solid var(--college-gold);
}
.StatsInner {display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 1500px; margin: 0 auto;}
.StatCard { position: relative; padding: 32px 20px; text-align: center; color: white;
border-right: 1px solid rgba(255,255,255,.16); transition: background .3s ease, transform .3s ease;
}
.StatCard:last-child {border-right: none;}
.StatCard:hover {background: rgba(255,255,255,.06); transform: translateY(-4px);}
/* Stat icon */
.StatIcon {display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 13px; color: var(--college-gold);
background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3); border-radius: 14px;transition: .3s ease;
}
.StatCard:hover .StatIcon { color: var(--college-navy); background: var(--college-gold); transform: rotate(-5deg);}
.StatIcon i {font-size: 21px;}
.StatCard h2 { margin: 0 0 5px; color: var(--college-gold); font-size: clamp(30px, 3vw, 42px); line-height: 1; font-weight: 800;}
.StatCard p {margin: 0; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; letter-spacing: .6px;}
/* =========================================================
VISION / MISSION / OBJECTIVES
========================================================= */
.HighlightSection {width: 100%; padding: 80px 5%; background: #f4f7fb;}
.HighlightInner { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; width: 100%;
max-width: 1500px; margin: 0 auto;
}
/* =========================================================
HIGHLIGHT CARD
========================================================= */
.HighlightCard {position: relative; padding: 40px 32px; background: white; border:1px solid var(--college-border);
border-top: 5px solid var(--college-gold); border-radius: 20px; text-align: center;
box-shadow: 0 10px 30px rgba(0,33,71,.07); transition: transform .3s ease, box-shadow .3s ease;
}
.HighlightCard:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0,33,71,.13);}
/* =========================================================
HIGHLIGHT ICON
========================================================= */
.HighlightIcon {display: grid; place-items: center; width: 65px; height: 65px; margin: 0 auto 18px;
color:var(--college-gold-dark); background: var(--college-gold-light);
border:1px solidrgba(212,175,55,.3); border-radius: 18px;transition: .3s ease;
}
.HighlightCard:hover .HighlightIcon {color: white; background: var(--college-navy); transform: scale(1.08);}
.HighlightIcon i { font-size: 26px;}
/* =========================================================
HIGHLIGHT TEXT
========================================================= */
.HighlightLabel { display: block; margin-bottom: 4px; color: var(--college-gold-dark);font-size: 11px;
Font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;}
.HighlightCard h3 {margin: 0 0 18px; color: var(--college-navy); font-size: 26px; font-weight: 800;}
.HighlightCard p { margin: 0; color: var(--college-text); font-size: 15px; line-height: 1.85; text-align: justify;}
/* =========================================================
OBJECTIVES
========================================================= */
.ObjectiveCard { text-align: left;}
.ObjectiveCard .HighlightIcon, .ObjectiveCard .HighlightLabel, .ObjectiveCard h3 { text-align: center;}
.ObjectiveCard .HighlightIcon { margin-left: auto; margin-right: auto;}
.ObjectiveList { margin: 0; padding: 0; list-style: none;}
.ObjectiveList li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; color: var(--college-text);
font-size: 14px; line-height: 1.6; border-bottom: 1px dashed #e5e7eb;}
.ObjectiveList li:last-child {border-bottom: none;}
.ObjectiveList i { margin-top: 3px; flex-shrink: 0; color: var(--college-gold-dark);}
/* .......................... About college etc ends here ...........................*/
/* .......................... Principal profile page starts here ...........................*/
/* ===========================
Principal Section
=========================== */
.PrincipalSection{ padding:50px 8%; display:grid; grid-template-columns:320px 1fr; gap:60px;
align-items:center; background:white;}
.PrincipalImage{ text-align:center;}
.PrincipalImage img{ width:280px; height:280px; border-radius:50%; border:8px solid #D4AF37;
box-shadow:0 15px 40px rgba(0,0,0,.18); transition:.4s;}
.PrincipalImage img:hover{ transform:scale(1.04);}
.PrincipalContent h2{ color:#002147; font-size:36px; margin:15px 0 15px;}
.PrincipalContent p{ line-height:2; color:#555; margin-bottom:20px; text-align:justify;}
.PrincipalContent p:last-child{ margin-bottom:0;}
.SectionLabelPrinci{ background:#D4AF37; color:#002147; padding:8px 18px; border-radius:30px; font-weight:600;}
/* All the departments are shown under the Principl Message starts here */
/* ===============================
Departments Section
================================ */
.DepartmentSection{ padding:35px 8% 7px; background:#f5f7fb;}
.DepartmentSection .SectionTitle p{ color:#555; font-size:18px; text-decoration:none; border:none; background:none;}
.DepartmentGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; margin-top:20px;}
.DepartmentCard{ background:#ffffff; text-decoration:none; color:#002147; padding:30px 20px; border-radius:18px;
text-align:center; border-top:5px solid #D4AF37; box-shadow:0 8px 25px rgba(0,0,0,.12); transition:.35s;}
.DepartmentCard i{ font-size:42px; color:#D4AF37; margin-bottom:18px; display:block; transition:.35s;}
.DepartmentCard h3{ font-size:20px; font-weight:600; margin:0;}
.DepartmentCard:hover i{ color:#ffffff; transform:scale(1.15);}
.DepartmentCard:hover{ transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.18); background:#002147; color:white;}
.DepartmentCard i{ font-size:42px; color:#D4AF37; margin-bottom:18px; transition:.3s;}
.DepartmentCard:hover i{ color:white;}
.DepartmentCard h3{ font-size:20px; font-weight:600;}
.FacultyGroup{ margin-top:60px;}
.FacultyHeading{ background:#002147; color:#ffffff; padding:15px 25px; border-left:6px solid #D4AF37; border-radius:10px;
font-size:28px; margin-bottom:30px; display:flex; align-items:center; gap:15px;}
/* All the departments are shown under the Principl Message ends here */
/* .......................... Principal profile page ends here ...........................*/
/* .......................Faculty Profile for example Dr. Prashant Singh starts here ..............*/
/* =========================================================
FULL-WIDTH FACULTY PAGE
========================================================= */
:root {
--navy: #002147;
--navy-light: #003b70;
--blue: #0d6efd;
--gold: #d4af37;
--gold-dark: #b8860b;
--white: #ffffff;
--text: #374151;
--muted: #6b7280;
--bg: #f4f7fb;
--border: #e5e7eb;
--shadow: 0 15px 40px rgba(0, 33, 71, 0.10);
--radius: 22px;
}
/* =========================================================
GLOBAL BOX SIZING
========================================================= */
.FacultyProfile, .Biography, .PublicationSection { width: 100%; box-sizing: border-box; }
.FacultyProfile *, .Biography *, .PublicationSection * { box-sizing: border-box; }
/* =========================================================
FACULTY PROFILE - FULL WIDTH
========================================================= */
.FacultyProfile { width: 100%; max-width: none; margin: 0; padding: 70px 5%;
background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 30%),
linear-gradient(135deg, #f7faff, #eef3f9 );font-family: "Segoe UI", Arial, sans-serif;
}
/* Main faculty card */
.FacultyCard {position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center;
gap: 55px; width: 100%; max-width: none; margin: 0; padding: 50px; background: rgba(255, 255, 255, 0.98);
border-radius: var(--radius); border: 1px solid rgba(0, 33, 71, 0.08);box-shadow: var(--shadow); overflow: hidden;
}
/* Decorative top border */
.FacultyCard::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px;
background: linear-gradient(90deg, var(--navy), var(--gold), var(--blue));
}
/* =========================================================
FACULTY IMAGE
========================================================= */
.FacultyImage { text-align: center;}
.ImageRing { width: 240px; height: 240px; margin: auto; padding: 7px; border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #f4d77d, var(--navy));
box-shadow: 0 15px 35px rgba(0, 33, 71, 0.20);
}
.ImageRing img {display: block; width: 100%; height: 100%; object-fit:fill; border-radius: 50%;border: 5px solid white;}
/* Faculty badge */
.FacultyBadge { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 7px 17px;color: var(--navy);
background: #fff8df; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 30px;
font-size: 13px; font-weight: 700;
}
.FacultyBadge i { color: #20a35a;}
/* =========================================================
FACULTY DETAILS
========================================================= */
.ProfileLabel {display: inline-flex; align-items: center; gap: 7px; color: var(--gold-dark); font-size: 13px;
font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.FacultyName {margin: 8px 0 5px; color: var(--navy); font-size: clamp(32px, 4vw, 48px); line-height: 1.15; font-weight: 800;}
.FacultyDesignation { margin: 0; color: var(--blue); font-size: 21px; font-weight: 600;}
.DepartmentName {display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 25px; padding: 9px 18px; color: var(--navy);
background: linear-gradient(135deg, #fff7d6, #ffefae); border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 30px; font-weight: 700;
}
/* =========================================================
FACULTY INFORMATION
========================================================= */
.FacultyInfo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-bottom: 25px;}
.InfoItem {display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px; background: #f8fafc;
border: 1px solid var(--border); border-radius: 14px;
}
.InfoIcon {display: grid; place-items: center; min-width: 38px; height: 38px; color: var(--navy);
background: #eaf1f8; border-radius: 10px;
}
.InfoItem small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px;
text-transform: uppercase; letter-spacing: .5px;
}
.InfoItem strong {display: block; color: var(--text); font-size: 14px; overflow-wrap: anywhere;}
.InfoItem a {color: var(--navy); text-decoration: none;}
.InfoItem a:hover { color: var(--blue);}
/* =========================================================
FACULTY BUTTONS
========================================================= */
.FacultyLinks {display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 25px;}
.FacultyBtn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 10px;
color: white !important; text-decoration: none; font-size: 13px; font-weight: 700;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.FacultyBtn:hover {transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); filter: brightness(1.05);}
.FacultyBtn i {font-size: 15px;}
.CVBtn { background: linear-gradient(135deg, #b8860b, #d4af37);}
.ScholarBtn {background: linear-gradient(135deg, #1967d2, #4285f4);}
.ResearchBtn {background: linear-gradient(135deg, #07823b, #00a65a);}
.VideoBtn { background: linear-gradient(135deg, #cc0000, #ff0000 );}
/* =========================================================
BIOGRAPHY - FULL WIDTH
========================================================= */
.Biography {width: 100%; max-width: none; margin: 0; padding: 70px 5%; background: #f8fafc; border-radius: 0;
border-top: 1px solid #e6ebf1; border-bottom: 1px solid #e6ebf1;font-family: "Segoe UI", Arial, sans-serif;
}
/* Biography heading */
.BioHeader { display: flex; align-items: center;justify-content: center; gap: 15px; margin-bottom: 42px; text-align: left;}
.SectionIcon { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; color: white;
background: linear-gradient(135deg, var(--navy), var(--navy-light) );border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 33, 71, .18);
}
.SectionIcon i {font-size: 26px;}
.SectionLabel { display: block; margin-bottom: 3px; color: var(--gold-dark); font-size: 12px; font-weight: 800;
letter-spacing: 1.5px; text-transform: uppercase;}
.BioHeader h2 {margin: 0; color: var(--navy); font-size: 34px; font-weight: 800;}
/* =========================================================
BIOGRAPHY GRID
========================================================= */
.BioGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; width: 100%;}
/* Biography card */
.BioCard {position: relative; width: 100%; padding: 30px; background: white; border: 1px solid #e7ebf0;
border-left: 5px solid var(--navy); border-radius: 18px; box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.BioCard:hover {transform: translateY(-5px); border-left-color: var(--gold); box-shadow: 0 15px 35px rgba(0, 33, 71, .12);}
/* Full-width membership card */
.FullWidthCard { grid-column: 1 / -1;}
/* Card title */
.BioCardTitle { display: flex; align-items: center; gap: 12px; margin-bottom: 20px;}
.CardIcon {display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--gold-dark);
background: #fff8df; border-radius: 12px;}
.CardIcon i { font-size: 19px;}
.BioCardTitle h3 { margin: 0; color: var(--navy); font-size: 20px; line-height: 1.3;}
/* Biography text */
.BioCard p { margin: 0 0 14px; color: #4b5563; font-size: 15px; line-height: 1.8;text-align: justify;}
.BioCard p:last-child { margin-bottom: 0;}
/* =========================================================
RESEARCH LIST
========================================================= */
.ResearchList { margin: 0; padding: 0; list-style: none;}
.ResearchList li { position: relative; padding: 9px 0 9px 28px; color: #4b5563; font-size: 15px;
border-bottom: 1px dashed #e5e7eb;
}
.ResearchList li:last-child {border-bottom: none;}
.ResearchList li::before { content: "\f058"; position: absolute; left: 0; top: 10px;color: var(--gold-dark);
font-family: FontAwesome;
}
/* =========================================================
TECHNICAL SKILLS
========================================================= */
.SkillBox { display: flex; flex-wrap: wrap; gap: 10px;}
.SkillBox span { padding: 9px 17px; color: white; background: var(--navy); border-radius: 30px; font-size: 13px;
font-weight: 600; transition: .25s ease;
}
.SkillBox span:hover {color: var(--navy); background: var(--gold); transform: translateY(-2px);}
/* =========================================================
PUBLICATIONS - FULL WIDTH
========================================================= */
.PublicationSection { width: 100%; max-width: none; margin: 0; padding: 70px 5%; background: white; border-radius: 0;
border-bottom: 1px solid #e5e9ef; font-family: "Segoe UI", Arial, sans-serif;
}
/* Publication heading */
.PublicationHeader { display: flex; align-items: center; justify-content: flex-start; gap: 15px; margin-bottom: 30px;
padding-bottom: 25px; border-bottom: 1px solid var(--border);
}
.PublicationIcon { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; color: white;
background: linear-gradient(135deg, var(--navy), var(--navy-light));
border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 33, 71, .18);
}
.PublicationIcon i { font-size: 26px;}
.PublicationHeader h2 { margin: 0; color: var(--navy); font-size: 34px; font-weight: 800;}
/* Publication list */
.PublicationList { width: 100%; margin: 0; padding: 10px 0 0 45px;}
.PublicationList li { position: relative; padding: 18px 22px; margin-bottom: 13px; color: #444; background: #f8fafc;
border: 1px solid #e7ebf0; border-left: 4px solid var(--gold); border-radius: 10px; font-size: 15px;
line-height: 1.75; transition: .25s ease;
}
.PublicationList li:hover { background: #fffdf4; transform: translateX(5px); border-left-color: var(--navy);
box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.PublicationList li::marker { color: var(--navy); font-weight: 800;}
.PublicationList b { color: var(--navy);}
/* .........................Faculty Profile for example Dr. Prashant Singh ends here ........ */
/* Physics Department information starts here * border-bottom: 4px solid rgba(0, 255, 191, 0.911) */
/* =========================================================
PHYSICS DEPARTMENT PAGE
Government Degree College Gosaikheda
========================================================= */
:root {
--physics-navy: #002147;
--physics-blue: #003b73;
--physics-blue-light: #0b5fa5;
--physics-gold: #f4b400;
--physics-gold-light: #ffd45a;
--physics-bg: #f5f8fc;
--physics-card: #ffffff;
--physics-text: #343b45;
--physics-muted: #697586;
--physics-border: #e4eaf1;
--physics-shadow:
0 12px 35px rgba(0, 33, 71, 0.10);
--physics-shadow-hover:
0 20px 45px rgba(0, 33, 71, 0.18);
--physics-radius: 18px;
}
/* =========================================================
MAIN PAGE
========================================================= */
.physics-page { width: 100%; overflow: hidden; background: var(--physics-bg); color: var(--physics-text);
font-family: "Segoe UI", Arial, sans-serif;}
/* =========================================================
DEPARTMENT HEADER
========================================================= */
.DepartmentHeader {position: relative; padding: 90px 20px 85px; color: #ffffff; text-align: center; overflow: hidden;
background: radial-gradient(circle at 15% 20%, rgba(255, 193, 7, 0.14), transparent 28%),
radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.08), transparent 25%),
linear-gradient(135deg, #00182f 0%, #002147 45%, #004b82 100%);
border-bottom: 5px solid var(--physics-gold);
}
/* Decorative circles */
.DepartmentHeader::before, .DepartmentHeader::after { content: ""; position: absolute; pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%;
}
.DepartmentHeader::before { width: 320px; height: 320px; top: -180px; left: -120px;}
.DepartmentHeader::after { width: 420px; height: 420px; bottom: -300px; right: -150px;}
.header-content { position: relative; z-index: 2; max-width: 900px; margin: auto;}
.department-badge { display: inline-block; padding: 8px 18px; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50px; background: rgba(255, 255, 255, 0.08); color: var(--physics-gold-light);
font-size: 12px; font-weight: 700; letter-spacing: 2px;
}
.DepartmentHeader h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); font-weight: 750; line-height: 1.15;}
.DepartmentHeader h2 { margin: 14px 0 0; color: var(--physics-gold-light); font-size: clamp(22px, 3vw, 30px); font-weight: 500;}
.DepartmentHeader p { margin: 16px 0 0; font-size: 18px; color: rgba(255, 255, 255, 0.90);}
.DepartmentHeader .header-subtitle {max-width: 650px; margin: 20px auto 0; font-size: 16px; line-height: 1.7;
color: rgba(255, 255, 255, 0.72);}
.header-line {width: 70px; height: 3px; margin: 24px auto 0; border-radius: 10px; background: var(--physics-gold);}
/* =========================================================
COMMON CONTAINER
========================================================= */
.section-container { width: min(1200px, 92%); margin: 0 auto;}
/* =========================================================
SECTION HEADINGS
========================================================= */
.section-heading { max-width: 750px; margin: 0 auto 50px; text-align: center;}
.section-label { display: inline-block; margin-bottom: 10px; color: var(--physics-blue-light); font-size: 12px;
font-weight: 800; letter-spacing: 2px;}
.section-heading h2 { margin: 0; color: var(--physics-navy); font-size: clamp(28px, 4vw, 38px); line-height: 1.25;}
.section-heading h2 i { margin-right: 8px; color: var(--physics-gold);}
.section-heading p { margin: 15px auto 0; color: var(--physics-muted); font-size: 16px; line-height: 1.7;}
.heading-line { width: 60px; height: 4px; margin: 18px auto 0; border-radius: 10px;
background: linear-gradient(90deg, var(--physics-blue), var(--physics-gold));
}
/* =========================================================
ABOUT SECTION
========================================================= */
.DepartmentAbout {padding: 90px 0; background: var(--physics-bg);}
.about-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 0.9fr); gap: 40px; align-items: start;}
/* =========================================================
DEPARTMENT CONTENT
========================================================= */
.DepartmentText { position: relative; padding: 42px; background: var(--physics-card);border: 1px solid rgba(0, 33, 71, 0.06);
border-radius: var(--physics-radius); box-shadow: var(--physics-shadow);
}
.DepartmentText::before { content: ""; display: block; width: 55px; height: 4px; margin-bottom: 25px;
border-radius: 10px; background: var(--physics-gold);
}
.DepartmentText p { margin: 0 0 20px; color: #4b5563; font-size: 16px; line-height: 1.9;}
.DepartmentText p:last-child { margin-bottom: 0;}
/* =========================================================
HIGHLIGHT CARDS
========================================================= */
.DepartmentHighlights { display: grid; gap: 20px;}
.DeptCard { position: relative; display: block; padding: 28px 25px; overflow: hidden; color: #ffffff; text-align: center;
text-decoration: none; border-radius: var(--physics-radius);
background: linear-gradient(145deg, var(--physics-navy), var(--physics-blue));
box-shadow: var(--physics-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.DeptCard::after {content: ""; position: absolute; width: 100px; height: 100px; right: -45px; bottom: -55px;
border-radius: 50%; background: rgba(255, 193, 7, 0.10);
}
.DeptCard:hover, .DeptCard:focus-visible { transform: translateY(-7px); box-shadow: var(--physics-shadow-hover);}
.DeptCardLink { cursor: pointer;}
.DeptCardLink:focus-visible { outline: 3px solid var(--physics-gold); outline-offset: 4px;}
.card-icon { display: flex; width: 68px; height: 68px; margin: 0 auto 18px; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15);
}
.DeptCard i { color: var(--physics-gold-light); font-size: 30px;}
.DeptCard h3 { margin: 0 0 8px; font-size: 21px;}
.DeptCard p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 14px; line-height: 1.5;}
.card-link { position: relative; z-index: 2; display: inline-flex; margin-top: 18px; align-items: center; gap: 8px;
color: var(--physics-gold-light); font-size: 13px; font-weight: 700;
}
/* =========================================================
LABORATORY SECTION
========================================================= */
.LabSection { padding: 90px 0; background: #ffffff;}
.LabGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px;}
.LabCard { overflow: hidden; background: #ffffff; border: 1px solid var(--physics-border); border-radius: 16px;
box-shadow: 0 8px 25px rgba(0, 33, 71, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.LabCard:hover { transform: translateY(-8px); border-color: rgba(244, 180, 0, 0.45);
box-shadow:0 18px 35px rgba(0, 33, 71, 0.15);
}
/* Image container */
.lab-image { position: relative; height: 190px; padding: 15px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f7f9fc, #eef3f8);
}
.lab-image::after {content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(0, 59, 115, 0.04), transparent 65%);
}
.LabCard img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s ease;}
.LabCard:hover img { transform: scale(1.06);}
/* Lab information */
.lab-info { position: relative; padding: 18px 18px 20px;}
.lab-number { display: inline-block; margin-bottom: 7px; color: var(--physics-gold); font-size: 11px;
font-weight: 800; letter-spacing: 1px;
}
.LabCard h3 { margin: 0; color: var(--physics-navy); font-size: 16px; font-weight: 650; line-height: 1.45;}
/* =========================================================
FACULTY CTA
========================================================= */
.DepartmentCTA {padding: 55px 20px; background: linear-gradient(135deg, var(--physics-navy), var(--physics-blue)); color: #ffffff;}
.cta-content {width: min(1000px, 92%); margin: auto; display: flex; align-items: center; justify-content: center; gap: 25px;}
.cta-icon { flex: 0 0 70px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(255, 193, 7, 0.15);
border: 1px solid rgba(255, 193, 7, 0.35); color: var(--physics-gold-light); font-size: 30px;
}
.cta-content h2 { margin: 0 0 7px; font-size: 25px;}
.cta-content p { margin: 0; color: rgba(255, 255, 255, 0.72); line-height: 1.6;}
/* Faculty button */
.PhysicsFacultyButton { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 13px 22px; color: var(--physics-navy); background: var(--physics-gold);
border-radius: 50px; font-size: 14px; font-weight: 750; text-decoration: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.PhysicsFacultyButton:hover, .PhysicsFacultyButton:focus-visible { transform: translateY(-3px);
background: var(--physics-gold-light);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.20);
}
.PhysicsFacultyButton:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px;}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) { .LabCard, .LabCard img, .DeptCard, .PhysicsFacultyButton { transition: none;}
.LabCard:hover, .DeptCard:hover,.PhysicsFacultyButton:hover {transform: none;}
}
/* Physics Departmental Pics ends here * border-bottom: 4px solid rgba(0, 255, 191, 0.911) */
/* ......................Quick links before footer starts here............................*/
.QuickLinks{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin:30px; }
.QuickLinks a{ background:#002147; color:white; padding:18px; text-align:center; text-decoration:none;
border-radius:10px; font-weight:600; transition:.3s; }
.QuickLinks a:hover{ background:#D4AF37; color:#002147; }
/* ......................Quick links before footer ends here............................*/
/* ................ Annual sports programme starts here ........................ */
.SportsPage {width: 100%; margin: 0; padding: 0; background: #f5f7fb; color: #333;
font-family: Arial, Helvetica, sans-serif; overflow: hidden;
}
/* =====================================================
HERO / INTRODUCTION
===================================================== */
.SportsHero { width: 100%; padding: 75px 5%; background: linear-gradient(135deg, rgba(0, 33, 71, .97), rgba(0, 70, 130, .93)),
url("sports-bg.jpg") center/cover; color: white; box-sizing: border-box;
}
.SportsHeroContent { width: min(1200px, 100%); margin: auto; text-align: center;}
.SportsBadge { display: inline-block; padding: 9px 20px; border: 1px solid rgba(255,255,255,.35); border-radius: 30px;
background: rgba(255,255,255,.1); color: #ffd75a; font-size: 15px; font-weight: 700; letter-spacing: 1px;
margin-bottom: 20px;
}
.SportsHero h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.2; font-weight: 800;}
.SportsHero h1 span {display: block; margin-top: 10px; color: #ffd75a; font-size: clamp(25px, 3.5vw, 40px); font-weight: 700;}
.SportsDivider {width: 90px; height: 4px; background: #d4af37; border-radius: 10px; margin: 25px auto 30px;}
.SportsHero p {max-width: 1100px; margin: 0 auto 18px; font-size: 17px; line-height: 1.9;
color: rgba(255,255,255,.92); text-align: justify;
}
.SportsHero strong { color: #ffd75a;}
/* =====================================================
SPORTS HIGHLIGHTS
===================================================== */
.SportsHighlights { width: 90%; max-width: 1250px; margin: -35px auto 60px; display: grid; grid-template-columns: repeat(3, 1fr);
gap: 25px; position: relative; z-index: 5;}
.SportsHighlightCard { background: white; padding: 30px 25px; text-align: center; border-radius: 18px; transition: .35s ease;
box-shadow: 0 12px 35px rgba(0,0,0,.12); border-top: 4px solid #d4af37;}
.SportsHighlightCard:hover {transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0,0,0,.18);}
.SportsIcon { width: 65px; height: 65px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: #002147; font-size: 30px;
}
.SportsHighlightCard h3 { margin: 8px 0 10px; color: #002147; font-size: 21px;}
.SportsHighlightCard p { margin: 0; color: #666; line-height: 1.7; font-size: 15px;}
/* =====================================================
GALLERY SECTION
===================================================== */
.SportsGallerySection { width: 100%; padding: 70px 5%; box-sizing: border-box; background: #f5f7fb;}
.SportsGallery2025 { background: white;}
.GalleryHeading { text-align: center; margin-bottom: 45px;}
.GalleryHeading span { display: inline-block; color: #b8860b; font-size: 14px; font-weight: 800;
letter-spacing: 2px; margin-bottom: 10px;
}
.GalleryHeading h2 { margin: 0; color: #002147; font-size: clamp(28px, 4vw, 42px); font-weight: 800;}
.GalleryHeading p { margin: 12px 0 0; color: #666; font-size: 17px;}
/* =====================================================
RESPONSIVE PHOTO GRID
===================================================== */
.SportsGallery { width: 100%; max-width: 1500px; margin: auto; display: grid;
/* Automatically creates as many columns as fit */
grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap: 20px;
}
/* =====================================================
INDIVIDUAL PHOTO
===================================================== */
.SportsPhoto {position: relative; margin: 0; overflow: hidden; border-radius: 15px; background: #ddd; aspect-ratio: 4 / 3;
box-shadow: 0 7px 20px rgba(0,0,0,.12); cursor: pointer;
}
.SportsPhoto::after { content: "View Photo"; position: absolute; inset: auto 0 0 0; padding: 12px; text-align: center;
color: white; font-size: 13px; font-weight: 600; background: linear-gradient( transparent,rgba(0,0,0,.75));
opacity: 0; transform: translateY(10px); transition: .3s ease;
}
.SportsPhoto img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease, filter .5s ease;}
/* =====================================================
PHOTO HOVER
===================================================== */
.SportsPhoto:hover { box-shadow: 0 15px 35px rgba(0,0,0,.22);}
.SportsPhoto:hover img { transform: scale(1.08); filter: brightness(.85);}
.SportsPhoto:hover::after { opacity: 1; transform: translateY(0);}
/* =====================================================
SPECIAL FIRST PHOTO
===================================================== */
.SportsGallery .SportsPhoto:first-child { grid-column: span 2; grid-row: span 2;}
/* Committee table and its data in row and column starts here */
.CommitteeSection { width: 100%; padding: 70px 5%; background: #f5f7fb; box-sizing: border-box;}
/* ---------- Section Heading ---------- */
.CommitteeHeader { text-align: center; margin-bottom: 40px;}
.CommitteeBadge { display: inline-block; padding: 8px 20px; margin-bottom: 15px; background: #d4af37; color: #002147;
border-radius: 30px; font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}
.CommitteeHeader h2 { margin: 5px 0 10px; color: #002147; font-size: 42px; font-weight: 800; line-height: 1.2;}
.CommitteeHeader h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 15px auto 0;
background: linear-gradient(90deg, #d4af37, #f1d77a, #d4af37 ); border-radius: 10px;
}
.CommitteeHeader p { margin-top: 15px; color: #666; font-size: 17px;}
/* ---------- Table Wrapper ---------- */
.CommitteeTableWrapper { width: 100%; overflow-x: auto; background: #ffffff; border-radius: 16px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}
/* ---------- Main Table ---------- */
.CommitteeTable { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; table-layout: fixed;
background: #ffffff; overflow: hidden;
}
/* ---------- Table Header ---------- */
.CommitteeTH { padding: 20px 18px; background: linear-gradient(135deg, #002147, #003d73); color: #ffffff; font-size: 17px;
font-weight: 700; text-align: center; letter-spacing: 0.3px; border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.CommitteeTH:first-child { width: 27%;}
.CommitteeTH:nth-child(2) { width: 28%;}
.CommitteeTH:nth-child(3) { width: 45%;}
.CommitteeTH:last-child { border-right: none;}
/* ---------- Table Rows ---------- */
.CommitteeRow {transition: background 0.25s ease;}
.CommitteeRow:nth-child(even) { background: #f8faff;}
.CommitteeRow:hover { background: #fff8df;}
/* ---------- Table Data ---------- */
.CommitteeData { padding: 18px 20px; border-right: 1px solid #e2e6ed; border-bottom: 1px solid #e2e6ed; color: #333;
font-size: 16px; line-height: 1.65; text-align: left; vertical-align: middle;
}
.CommitteeData:first-child { color: #002147; font-weight: 700;}
.CommitteeData:last-child { border-right: none;}
/* ---------- Faculty Links ---------- */
.PTble { position: relative; display: inline-block; color: #003b73; font-weight: 600;
text-decoration: none; transition: all 0.25s ease;
}
.PTble:hover { color: #b8860b; text-decoration: underline;}
/* ---------- Empty Member ---------- */
.CommitteeData:has(> a) { color: #333;}
/* ---------- First / Last Row Rounded Corners ---------- */
.CommitteeTable thead tr:first-child th:first-child { border-top-left-radius: 16px;}
.CommitteeTable thead tr:first-child th:last-child { border-top-right-radius: 16px;}
.CommitteeTable tbody tr:last-child td:first-child { border-bottom-left-radius: 16px;}
.CommitteeTable tbody tr:last-child td:last-child { border-bottom-right-radius: 16px;}
/*............................. Committee html and its data in row and column ends here.................... */
/*............................. Former Principal profile starts here.................... */
.FormerPrincipals { padding: 90px 0; background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);}
/* =========================================================
SECTION CONTAINER
========================================================= */
.FormerPrincipals .section-container { width: min(1200px, 92%); margin: 0 auto;}
/* =========================================================
SECTION HEADING
========================================================= */
.FormerPrincipals .section-heading {max-width: 750px; margin: 0 auto 50px; text-align: center;}
.FormerPrincipals .section-label { display: inline-block; margin-bottom: 10px; color: #0b5fa5; font-size: 12px;
font-weight: 800; letter-spacing: 2px;
}
.FormerPrincipals .section-heading h2 { margin: 0; color: #002147; font-size: clamp(28px, 4vw, 38px); line-height: 1.25;}
.FormerPrincipals .section-heading h2 i { margin-right: 9px; color: #f4b400;}
.FormerPrincipals .section-heading p {max-width: 650px; margin: 15px auto 0; color: #697586; font-size: 16px; line-height: 1.7;}
.FormerPrincipals .heading-line { width: 60px; height: 4px; margin: 18px auto 0; border-radius: 10px;
background: linear-gradient(90deg, #003b73, #f4b400);
}
/* =========================================================
PRINCIPAL GRID
========================================================= */
.PrincipalGrid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;}
/* =========================================================
PRINCIPAL CARD
========================================================= */
.PrincipalCard { position: relative; overflow: hidden; background: #ffffff; border: 1px solid #e3e9f0; border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 33, 71, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.PrincipalCard:hover {transform: translateY(-7px); border-color: rgba(244, 180, 0, 0.50);
box-shadow: 0 20px 40px rgba(0, 33, 71, 0.15);
}
/* =========================================================
PHOTO AREA
========================================================= */
.PrincipalPhoto { position: relative; height: 250px; display: flex; align-items: center; justify-content: center; overflow: hidden;
background: linear-gradient(135deg, #eef3f8, #f8fafc); border-bottom: 1px solid #e7edf3;
}
.PrincipalPhoto::after {content: ""; position: absolute; width: 180px; height: 180px; right: -80px; bottom: -90px;
border-radius: 50%; background: rgba(244, 180, 0, 0.10);
}
/* Actual photograph */
.PrincipalPhoto img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center top;
transition: transform 0.4s ease;
}
.PrincipalCard:hover .PrincipalPhoto img {transform: scale(1.04);}
/* =========================================================
PHOTO PLACEHOLDER
========================================================= */
.PrincipalPlaceholder {position: relative; z-index: 2; width: 105px; height: 105px; display: flex; align-items: center;
justify-content: center; border-radius: 50%; color: #ffffff;
background: linear-gradient(145deg, #002147, #0b5fa5); border: 6px solid #ffffff;
box-shadow:0 8px 25px rgba(0, 33, 71, 0.18);
}
.PrincipalPlaceholder i {font-size: 42px; color: rgba(255, 255, 255, 0.90);}
/* =========================================================
PRINCIPAL INFORMATION
========================================================= */
.PrincipalInfo { position: relative; padding: 24px 25px 27px;}
.PrincipalNumber { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
margin-bottom: 12px; color: #002147; background: #fff4cc; border-radius: 50%; font-size: 11px;
font-weight: 800;
}
.PrincipalInfo h3 {margin: 0; color: #002147; font-size: 20px; font-weight: 700; line-height: 1.35;}
.PrincipalDesignation { margin: 7px 0 18px; color: #0b5fa5; font-size: 13px; font-weight: 700; letter-spacing: 0.3px;}
/* =========================================================
SERVICE PERIOD
========================================================= */
.PrincipalPeriod { display: flex; align-items: flex-start; gap: 9px; padding-top: 15px; border-top: 1px solid #edf0f4;
color: #697586; font-size: 13px; line-height: 1.6;
}
.PrincipalPeriod i {flex-shrink: 0; margin-top: 3px; color: #f4b400; font-size: 15px;}
/* =========================================================
ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {.PrincipalCard, .PrincipalPhoto img {transition: none; }
.PrincipalCard:hover {transform: none;}
}
/*............................. Former Principal profile ends here.................... */
/*............................. College faculty membes combined starts here....................... */
/* ---------- GOOGLE FONT ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
/* =========================================================
PAGE HERO
========================================================= */
.page-hero {position: relative;padding: 80px 0; color: var(--white);
background:linear-gradient(120deg, rgba(7, 29, 59, 0.98), rgba(18, 63, 115, 0.93));
}
/* Decorative gradient */
.page-hero::after {content: ""; position: absolute; width: 280px; height: 280px; right: 5%; top: -100px;
border-radius: 50%; background: rgba(212, 160, 23, 0.12); filter: blur(5px);
}
.hero-label {display: inline-block; color: var(--light-gold); font-size: 12px; font-weight: 700;
letter-spacing: 2px; margin-bottom: 12px;
}
.page-hero h2 {position: relative; z-index: 1; font-family: "Playfair Display", serif; font-size: clamp(38px, 6vw, 58px);
line-height: 1.15; margin-bottom: 15px;
}
.page-hero p { position: relative;z-index: 1; max-width: 680px; color: rgba(255, 255, 255, 0.82); font-size: 16px;}
/* =========================================================
FACULTY SECTION
========================================================= */
.faculty-section { padding: 80px 0 100px;}
.section-heading {max-width: 750px; margin: 0 auto 50px; text-align: center;}
.section-heading > span {color: var(--gold-dark); font-size: 12px; font-weight: 700; letter-spacing: 2px;}
.section-heading h2 {color: var(--navy); font-family: "Playfair Display", serif; font-size: clamp(32px, 5vw, 44px);
margin-top: 5px;
}
.gold-line {width: 65px; height: 4px; margin: 15px auto; border-radius: 10px;
background: linear-gradient(90deg, var(--gold-dark), var(--light-gold));
}
/* =========================================================
FACULTY CATEGORY SECTIONS
========================================================= */
.faculty-category { margin-bottom: 85px;}
/* Category heading */
/* =========================================================
FACULTY CATEGORY HEADER
========================================================= */
.category-heading { position: relative; text-align: center; margin: 0 0 42px; padding: 34px 25px 32px;
background: linear-gradient( 135deg, #061a35 0%, #0b2d52 55%, #123f73 100%);
border-radius: 14px; border: 1px solid rgba(212, 160, 23, 0.45);
box-shadow: 0 12px 30px rgba(6, 26, 53, 0.18); overflow: hidden;
}
/* Gold top accent */
.category-heading::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 130px; height: 5px;
background: linear-gradient( 90deg, #b8860b, #f1c75b, #b8860b);
border-radius: 0 0 10px 10px;
}
/* Decorative gold circle */
.category-heading::after {content: ""; position: absolute; width: 220px; height: 220px; right: -100px; top: -120px;
border-radius: 50%; background: rgba(212, 160, 23, 0.10);
border: 1px solid rgba(212, 160, 23, 0.08);
}
/* =========================================================
ACADEMIC FACULTY
========================================================= */
.category-heading span {position: relative; z-index: 2; display: block; color: #f2c85b !important;
font-family: "Inter", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 4px;
text-transform: uppercase; margin-bottom: 10px;
}
/* =========================================================
FACULTY NAME
========================================================= */
.category-heading h2 { position: relative; z-index: 2; color: #ffffff !important; font-family: "Playfair Display", serif;
font-size: clamp(36px, 5vw, 50px); font-weight: 700; line-height: 1.2; margin: 0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* =========================================================
GOLD DECORATIVE LINE
========================================================= */
.category-line { position: relative; z-index: 2; width: 75px; height: 4px; margin: 17px auto 0; border-radius: 20px;
background: linear-gradient(90deg, #b8860b, #f4d477, #b8860b);
box-shadow: 0 2px 10px rgba(212, 160, 23, 0.4);
}
/* Small center ornament */
.category-line::after {content: "◆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: #f4d477; font-size: 9px; background: #0b2d52; padding: 0 6px;
}
/* =========================================================
HOVER EFFECT
========================================================= */
.category-heading { transition: transform 0.35s ease, box-shadow 0.35s ease;}
.category-heading:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(6, 26, 53, 0.25);}
/* =========================================================
FACULTY SECTION SPACING
========================================================= */
.faculty-category { margin-bottom: 85px;}
.faculty-category:last-child { margin-bottom: 0;}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.category-heading {padding: 30px 18px 28px; margin-bottom: 30px; border-radius: 12px;}
.category-heading span {font-size: 12px; letter-spacing: 3px;}
.category-heading h2 {font-size: 32px;}
.category-line { width: 60px; height: 3px;}
.faculty-category { margin-bottom: 60px; }
}
.category-heading span {display: inline-block; color: var(--gold-dark); font-size: 11px; font-weight: 700;
letter-spacing: 2px; margin-bottom: 7px;
}
.category-heading h2 { color: var(--navy); font-family: "Playfair Display", serif; font-size: clamp(28px, 4vw, 36px);
line-height: 1.2;margin: 0;
}
/* Decorative line */
.category-line {width: 55px; height: 3px; margin: 12px auto 0; border-radius: 10px;
background: linear-gradient(90deg, var(--gold-dark), var(--light-gold));
}
/* ======== FACULTY GRID============== */
.faculty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;}
/* ==== CATEGORY SEPARATION================== */
.faculty-category + .faculty-category { padding-top: 15px;}
/* ========= RESPONSIVE FACULTY CATEGORY======== */
/* ============= FACULTY CARD================== */
.faculty-card { position: relative; display: flex; overflow: hidden; background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.faculty-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover);}
/* Gold top border */
.faculty-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--light-gold) ); z-index: 2;
}
/* ================= FACULTY IMAGE====================== */
.faculty-photo { flex: 0 0 190px; padding: 22px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(145deg, #f4f7fb, #e8eef6);
}
.faculty-photo img {width: 145px; height: 175px; object-fit: cover; border-radius: 10px; border: 4px solid var(--white);
box-shadow: 0 7px 20px rgba(7, 29, 59, 0.16); transition: transform 0.4s ease;
}
.faculty-card:hover .faculty-photo img { transform: scale(1.04);}
/* ==================== FACULTY CONTENT================== */
.faculty-content { padding: 27px 28px 25px; flex: 1;}
.department { display: inline-block; padding: 5px 11px; margin-bottom: 9px; border-radius: 30px;
background: rgba(212, 160, 23, 0.12); color: var(--gold-dark); font-size: 11px; font-weight: 700;
letter-spacing: 0.6px; text-transform: uppercase;
}
.faculty-content h3 {color: var(--navy); font-family: "Playfair Display", serif;
font-size: 23px; line-height: 1.3; margin-bottom: 3px;
}
.designation { color: var(--blue); font-size: 13px; font-weight: 700; margin-bottom: 12px;}
.faculty-content > p:not(.designation) {color: var(--gray); font-size: 13.5px; line-height: 1.7; margin-bottom: 18px;}
/* =========== PROFILE BUTTON============== */
.profile-btn {display: inline-flex; align-items: center; gap: 9px; color: var(--navy); font-size: 13px; font-weight: 700;
transition: color 0.3s ease, gap 0.3s ease;
}
.profile-btn span {color: var(--gold-dark); font-size: 19px; line-height: 1;}
.profile-btn:hover {color: var(--gold-dark); gap: 14px;}
/*............................. College faculty membes combined ends here....................... */
/*.....................Footer section starts here .............*/
.MainFooter { margin-top: 30px; color: rgba(255, 255, 255, 0.78);
background: radial-gradient( circle at 85% 15%, rgba(212, 175, 55, 0.08), transparent 28%),
linear-gradient(135deg, #00152e 0%, #002147 55%, #001a36 100% );
border-top:4px solid var(--gold); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
}
/* =========================================================
FOOTER CONTAINER
========================================================= */
.FooterContainer { display: grid; grid-template-columns: 0.95fr 1.05fr 1.65fr; gap: 42px;
padding-top: 50px; padding-bottom: 48px; align-items: start;}
.FooterColumn { min-width: 0;}
.footer-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding-bottom: 12px;
position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Small gold line below heading */
.footer-heading::after {content: ""; position: absolute; left: 0;bottom: -1px; width: 42px; height: 2px;
background: var(--gold); border-radius: 2px;
}
.footer-heading i {width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--gold); background:rgba(212, 175, 55, 0.10);
border: 1px solid rgba(212, 175, 55, 0.20);border-radius: 7px; font-size: 13px;
}
.FooterColumn h3 {margin: 0; color: var(--white); font-size: 18px; font-weight: 650; letter-spacing: 0.2px;}
/* =========================================================
USEFUL LINKS
========================================================= */
.FooterColumn ul { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none;}
.FooterColumn li { margin: 0; padding: 0;}
.FooterColumn li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px;
color: rgba(255, 255, 255, 0.80); text-decoration: none; font-size: 14px; line-height: 1.45;
border-radius: 7px; transition: color 0.25s ease, background 0.25s ease,padding-left 0.25s ease,
transform 0.25s ease;
}
.FooterColumn li a:hover { padding-left: 16px; color: var(--gold-light); background:rgba(255, 255, 255, 0.055);
transform: translateX(2px);
}
.FooterColumn li a i {flex-shrink: 0; color: rgba(255, 255, 255, 0.45); font-size: 9px;
transition: color 0.25s ease, transform 0.25s ease;
}
.FooterColumn li a:hover i {color: var(--gold-light); transform: translateX(3px);}
/* =========================================================
CONTACT INFORMATION
========================================================= */
.FooterColumn address { margin: 0; font-style: normal;}
.FooterColumn p { margin: 0 0 8px; color: rgba(255, 255, 255, 0.72);font-size: 12px;line-height: 1.55;}
.FooterColumn address a {color: var(--gold-light); text-decoration: none; transition: color 0.25s ease;}
.FooterColumn address a:hover { color: var(--white); text-decoration: underline;}
.FooterColumn address i { margin-right: 6px; color: var(--gold); font-size: 11px;}
/* =========================================================
LOCATION / MAP
========================================================= */
.map-wrapper {width: 100%; overflow: hidden; background: #0b2947; border:1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);position: relative;}
.map-wrapper::after {content: ""; position: absolute; inset: 0;pointer-events: none; border-radius: inherit;
box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.map-wrapper iframe {display: block; width: 100%; height: 285px; border: 0;}
/* =========================================================
CAMPUS INFORMATION
========================================================= */
.campus-info {display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px;}
.campus-info-item {min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 11px 10px;
background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 8px; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.campus-info-item:hover { background: rgba(255, 255, 255, 0.075);border-color: rgba(212, 175, 55, 0.25);
transform: translateY(-2px);
}
.campus-info-item > i {flex-shrink: 0; width: 25px; height: 25px; display: inline-flex; align-items: center;
justify-content: center; margin-top: 1px; color: var(--gold); background: rgba(212, 175, 55, 0.09);
border-radius: 6px; font-size: 11px;
}
.campus-info-item div {min-width: 0; display: flex;flex-direction: column; gap: 3px;}
.campus-info-item strong { color: var(--white); font-size: 11px; font-weight: 650;}
.campus-info-item span,
.campus-info-item a { color:rgba(255, 255, 255, 0.66); font-size: 10px; line-height: 1.45;
text-decoration: none; overflow-wrap: anywhere;
}
.campus-info-item a {color: var(--gold-light); transition: color 0.25s ease;}
.campus-info-item a:hover {color: var(--white); text-decoration: underline;}
/* =========================================================
COPYRIGHT
========================================================= */
.Copyright { background: rgba(0, 0, 0, 0.25);border-top: 1px solid rgba(255, 255, 255, 0.09);}
.copyright-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between;
gap: 25px; padding-top: 12px; padding-bottom: 12px;
}
.copyright-inner p { margin: 0; color:rgba(255, 255, 255, 0.58); font-size: 10px; line-height: 1.5;}
.copyright-inner strong {color: var(--gold-light);font-weight: 600;}
.Developer { text-align: right;}
/* .........................................Footer section ends here ....................*/
/* ..................Responsive website programme starts here...........................*/
/* ======= MOBILE MENU BUTTON ================== */
.mobile-menu-toggle {display: none; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 12px;
color: var(--white); background: var(--primary-dark); border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px;font-weight: 600;cursor: pointer;
}
.mobile-menu-toggle.is-active { color: var(--primary-dark); background: var(--gold);}
/* ---------------------------------------------------------
GLOBAL RESPONSIVE SAFETY
--------------------------------------------------------- */
.container { width: min(94%, var(--container-width));}
button,a { -webkit-tap-highlight-color: transparent;}
/* =========================================================
LARGE TABLET / SMALL LAPTOP
1200px
========================================================= */
@media (max-width: 1200px) { /* Header */
.college-header {grid-template-columns: 105px minmax(0, 1fr) 250px; gap: 20px;}
.image-logo { width: 100px; height: 100px; }
.college-info {padding: 20px;}
.nav-item > a, .nav-menu-button { padding-inline: 10px; font-size: 11px; } /* Navigation */
.dropdown-menu {background-color: #0d395f; color:white}
.HeroSection {grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 20px; padding: 25px; }/* Main hero */
.PrinciPic { width: 145px; height: 145px;}
.AboutContainer {gap: 35px; }
.AboutContent { padding: 30px;}
.AboutImage img { height: 470px;} /* About */
.FacultyCard {gap: 35px; padding: 40px; }
.FacultyInfo {grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Faculty */
.LabGrid {grid-template-columns: repeat(3, minmax(0, 1fr));} /* Physics */
.PrincipalGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;} /* Former principals */
.FooterContainer { grid-template-columns: 1fr 1fr;gap: 30px;}
.FooterColumn:last-child {grid-column: 1 / -1;} /* Footer */
}
/* =========================================================
TABLET 992px
========================================================= */
@media (max-width: 992px) {
.top-strip-inner {justify-content: center; flex-wrap: wrap; min-height: auto; padding: 8px 0;} /* TOP STRIP */
.top-links {gap: 15px;}
.college-header { min-height: auto; grid-template-columns: 95px minmax(0, 1fr); gap: 18px; padding: 18px 0; } /* COLLEGE HEADER */
.college-logo { grid-row: 1;}
.image-logo {width: 88px; height: 88px; border-width: 3px;}
.college-info { padding: 18px 20px; }
.college-info h1 { font-size: clamp(18px, 3vw, 27px); }
.college-info h2 { font-size: 14px; }
.college-meta { margin-top: 10px; }
.mobile-menu-toggle { display: flex; } /* NAVIGATION */
.nav-wrapper { display: none; }
.nav-wrapper.is-open { display: block;}
.main-nav { width: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 0; }
.nav-item { width: 100%; display: block; }
.nav-item > a, .nav-menu-button { width: 100%; min-height: 48px; justify-content: space-between;
padding: 12px 18px; font-size: 13px; text-align: left;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-item > a::after, .nav-menu-button::after { display: none; }
.nav-item:hover > a, .nav-item:hover > .nav-menu-button, .nav-item:focus-within > a,
.nav-item:focus-within > .nav-menu-button, .nav-item.menu-open > .nav-menu-button
{ color: var(--primary-dark);background: var(--gold);
}
.dropdown-menu,.wide-menu,.faculty-menu { position: static; width: 100%; max-width: none;
max-height: none; padding: 5px 12px; border-radius: 0;
border-top: 1px solid rgba(255,255,255,.15);
box-shadow: none; opacity: 1; visibility: visible;
pointer-events: auto; display: none;
transform: none !important; } /* Dropdown becomes normal mobile flow */
.nav-item.menu-open > .dropdown-menu {display: block;}
.dropdown-menu > a, .dropdown-menu .has-submenu > a { min-height: 44px; padding: 10px 12px;
color: white;
Background: rgba(255,255,255,.05);
}
.dropdown-menu > a:hover, .dropdown-menu .has-submenu:hover > a,
.dropdown-menu > a:focus, .dropdown-menu .has-submenu:focus-within > a
{ padding-left: 16px; }
.submenu { position: static; width: 100%; padding: 4px 8px 4px 18px; display: none;
opacity: 1; visibility: visible; pointer-events: auto; transform: none !important;
border: 0; border-left: 2px solid var(--gold); border-radius: 0;
box-shadow: none; background: rgba(0,0,0,.12); /* Nested submenu */
}
.has-submenu.submenu-open > .submenu { display: block; }
.submenu > a { color: white; min-height: 42px; }
.dropdown-menu {background-color: #0d395f; color:white}
.faculty-menu { overflow: visible; } /* Faculty mega menu */
.faculty-grid { grid-template-columns: 1fr; }
.faculty-menu-header {flex-direction: column; align-items: flex-start; gap: 10px; }
.faculty-category { margin-bottom: 65px;}
/* HOME HERO */
.HeroSection {grid-template-columns: 1fr; gap: 25px; padding: 30px 5%; }
.ProfileSection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.ProfileCard { text-align: center;}
.CollegeSlider { min-height: 450px; order: -1;}
.NoticeBox { width: 100%; }
/* ABOUT COLLEGE */
.AboutSection { padding: 65px 5%; }
.AboutContainer {grid-template-columns: 1fr;gap: 30px; }
.AboutImage { max-width: 850px; margin-inline: auto; }
.AboutImage img { height: 460px; }
.AboutContent { padding: 32px;}
/* STATISTICS- */
.StatsSection { padding: 10px 5%; }
.StatsInner { grid-template-columns: repeat(3, 1fr); }
.StatCard:nth-child(3) {border-right: none;}
.StatCard:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.16);}
/* VISION / MISSION */
.HighlightSection { padding: 65px 5%; }
.HighlightInner { grid-template-columns: 1fr; max-width: 800px; margin-inline: auto;}
/* PRINCIPAL- */
.PrincipalSection { grid-template-columns: 250px 1fr; gap: 35px; padding: 45px 6%;}
.PrincipalImage img { width: 220px; height: 220px; }
/* DEPARTMENTS */
.DepartmentSection { padding: 35px 6px 10px; }
.DepartmentGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* FACULTY PROFILE */
.FacultyProfile, .Biography,.PublicationSection { padding: 55px 5%; }
.FacultyCard { grid-template-columns: 220px minmax(0, 1fr); gap: 30px; padding: 35px; }
.ImageRing { width: 195px; height: 195px; }
.FacultyName {font-size: clamp(28px, 5vw, 42px); }
.FacultyDesignation { font-size: 18px;}
.FacultyInfo {grid-template-columns: 1fr;}
.BioGrid { grid-template-columns: 1fr;}
/* PHYSICS DEPARTMENT */
.DepartmentHeader {padding: 70px 5%; }
.DepartmentAbout,.LabSection {padding: 65px 0;}
.about-layout {grid-template-columns: 1fr; }
.DepartmentText {padding: 32px;}
.DepartmentHighlights {grid-template-columns: repeat(3, 1fr);}
.LabGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
/* SPORTS */
.SportsHero { padding: 65px 5%; }
.SportsHighlights { grid-template-columns: repeat(3, 1fr); width: 92%;}
.SportsGallerySection {padding: 60px 5%; }
/* - COMMITTEE */
.CommitteeSection {padding: 60px 4%;}
.CommitteeHeader h2 { font-size: 36px;}
.CommitteeTH, .CommitteeData { font-size: 14px;}
/* FORMER PRINCIPALS */
.FormerPrincipals { padding: 65px 0;}
.PrincipalGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
/* - QUICK LINKS */
.QuickLinks { grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 25px;}
/* FOOTER */
.FooterContainer { grid-template-columns: 1fr 1fr; gap: 25px; padding-top: 40px; padding-bottom: 40px;}
.FooterColumn:last-child {grid-column: 1 / -1;}
.map-wrapper iframe { height: 250px; }
.campus-info { grid-template-columns: repeat(3, 1fr);}
}
/* =========================================================
LARGE MOBILE 768px
========================================================= */
@media (max-width: 768px) {
.top-strip {font-size: 10px; }
.top-strip-inner { flex-direction: column; gap: 3px; padding: 7px 0;}
.top-links {gap: 12px;}
.college-header { grid-template-columns: 1fr; text-align: center; gap: 12px; padding: 15px 0;}
.college-logo { grid-row: auto; }
.image-logo { width: 82px; height: 82px; }
.college-info { padding: 17px 13px; border-bottom-width: 3px;}
.college-title-line {gap: 8px;}
.title-accent { width: 20px; }
.dropdown-menu {background-color: #0d395f; color:white}
.college-info h1 { font-size: 19px;}
.college-info h2 { font-size: 13px;}
.college-meta { gap: 5px 12px; }
.college-meta span {font-size: 10px; }
.HeroSection {padding: 22px 4%;}
.ProfileSection { grid-template-columns: 1fr; }
.CollegeSlider { min-height: 330px; border-radius: 15px; }
.ProfileCard { padding: 20px; }
.PrinciPic { width: 130px; height: 130px; }
.AboutSection { padding: 50px 4%; }
.SectionTitle { margin-bottom: 35px;}
.SectionTitle h2 {font-size: 29px;}
.SectionTitle p {font-size: 14px;}
.AboutImage img { height: 340px; }
.ImageCaption { bottom: 15px; left: 15px; right: 15px; }
.ImageCaption > i { width: 40px; height: 40px; font-size: 16px; }
.ImageCaption strong { font-size: 14px;}
.ImageCaption span { font-size: 11px;}
.AboutContent { padding: 23px;}
.AboutContent h3 {font-size: 24px;}
.AboutContent p { font-size: 14px; text-align: left;}
.LocationBox {align-items: flex-start;}
.StatsSection { padding: 5px 4%;}
.StatsInner { grid-template-columns: repeat(2, 1fr);}
.StatCard { padding: 25px 10px; border-right: 1px solid rgba(255,255,255,.16); }
.StatCard:nth-child(2n) { border-right: none; }
.StatCard:nth-child(3) { border-right: 1px solid rgba(255,255,255,.16);}
.StatCard:last-child {grid-column: 1 / -1; border-right: none;}
.StatCard h2 {font-size: 30px;}
.StatCard p { font-size: 12px; }
.HighlightSection { padding: 50px 4%;}
.HighlightInner {gap: 18px;}
.HighlightCard { padding: 30px 22px;}
.HighlightCard h3 {font-size: 23px; }
.HighlightCard p { font-size: 14px; text-align: left;}
.PrincipalSection { grid-template-columns: 1fr; padding: 40px 5%; gap: 25px; text-align: center;}
.PrincipalImage img { width: 190px; height: 190px; }
.PrincipalContent h2 {font-size: 29px; }
.PrincipalContent p { font-size: 14px; text-align: left; line-height: 1.8; }
.DepartmentSection { padding: 30px 5px 10px;}
.DepartmentGrid { grid-template-columns: 1fr; gap: 15px;}
.DepartmentCard { padding: 24px 18px; }
.faculty-section {padding: 55px 0 70px; }
.category-heading { margin-bottom: 25px;}
.category-heading h2 {font-size: 29px; }
.FacultyGroup { margin-top: 40px; }
.FacultyHeading { font-size: 21px; padding: 13px 17px;}
.FacultyProfile, .Biography, .PublicationSection { padding: 45px 4%; }
.FacultyCard { grid-template-columns: 1fr; gap: 25px; padding: 28px 20px; text-align: center;}
.ImageRing { width: 175px; height: 175px; }
.FacultyBadge { margin-top: 12px; }
.ProfileLabel { justify-content: center;}
.FacultyName { font-size: 31px;}
.FacultyDesignation {font-size: 17px;}
.DepartmentName { margin: 14px 0 20px; }
.FacultyInfo { grid-template-columns: 1fr; text-align: left; }
.FacultyLinks { justify-content: center; }
.FacultyBtn { flex: 1 1 calc(50% - 10px);}
.BioHeader { margin-bottom: 30px; }
.BioHeader h2,.PublicationHeader h2 {font-size: 27px;}
.SectionIcon,.PublicationIcon { width: 50px; height: 50px; }
.BioGrid { gap: 18px;}
.BioCard {padding: 23px; }
.BioCard p, .ResearchList li {font-size: 14px; text-align: left; }
.PublicationList { padding-left: 25px;}
.PublicationList li { padding: 15px 15px; font-size: 14px; }
.DepartmentHeader {padding: 55px 5%;}
.DepartmentHeader h1 {font-size: 36px;}
.DepartmentHeader h2 { font-size: 21px; }
.DepartmentHeader p { font-size: 15px;}
.DepartmentHeader .header-subtitle {font-size: 14px;}
.DepartmentAbout,.LabSection { padding: 55px 0; }
.section-container { width: 92%;}
.DepartmentText { padding: 25px; }
.DepartmentText p { font-size: 14px; line-height: 1.8; }
.DepartmentHighlights { grid-template-columns: 1fr; }
.LabGrid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.lab-image { height: 155px;}
.LabCard h3 { font-size: 14px;}
.cta-content { flex-direction: column; text-align: center; }
.SportsHero { padding: 55px 5%;}
.SportsHero p {font-size: 14px; text-align: left; line-height: 1.8; }
.SportsHighlights { width: 92%; margin-top: -25px; grid-template-columns: 1fr; gap: 15px;}
.SportsHighlightCard { padding: 25px 20px; }
.SportsGallerySection { padding: 50px 4%;}
.SportsGallery { grid-template-columns: repeat(2, 1fr); gap: 12px;}
.SportsGallery .SportsPhoto:first-child {grid-column: span 2; grid-row: span 1;}
.CommitteeSection { padding: 50px 4%;}
.CommitteeHeader h2 { font-size: 29px; }
.CommitteeHeader p { font-size: 14px; }
.CommitteeTableWrapper { border-radius: 10px; -webkit-overflow-scrolling: touch;}
.CommitteeTable { min-width: 720px;}
.CommitteeTH {padding: 15px 12px; font-size: 14px; }
.CommitteeData {padding: 14px 12px; font-size: 13px;}
.FormerPrincipals { padding: 50px 0; }
.PrincipalGrid {grid-template-columns: 1fr; gap: 18px;}
.PrincipalPhoto { height: 280px; }
.QuickLinks { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 4%;}
.QuickLinks a { padding: 14px 10px; font-size: 13px; }
.FooterContainer { grid-template-columns: 1fr; gap: 28px; padding-top: 35px; padding-bottom: 35px;}
.FooterColumn:last-child { grid-column: auto;}
.campus-info { grid-template-columns: 1fr;}
.map-wrapper iframe { height: 230px;}
.copyright-inner { flex-direction: column; text-align: center; gap: 7px; }
.Developer { text-align: center; }
}
/* ============== SMALL MOBILE 576px============================================ */
@media (max-width: 576px) {
.top-links { flex-wrap: wrap; justify-content: center; }
.top-item { text-align: center; }
.college-info { border-radius: 13px; padding: 16px 10px; }
.college-title-line { gap: 5px; }
.title-accent { width: 12px; }
.college-info h1 { font-size: 17px; }
.college-info h2 { font-size: 12px;}
.college-meta {flex-direction: column; gap: 4px;}
.search-container { width: 100%; }
.search-box { width: 100%; }
#searchInput {width: auto; min-width: 0; flex: 1;}
#searchButton { padding-inline: 14px; }
#results { width: 100%; max-width: 100%; }
.dropdown-menu {background-color: #0d395f; color:white}
.CollegeSlider { min-height: 260px;}
.ProfileCard { padding: 18px 15px; }
.AboutSection { padding: 42px 4%; }
.SectionTag { font-size: 10px; padding: 6px 12px; }
.SectionTitle h2 {font-size: 26px; }
.SectionTitle p {font-size: 13px; }
.AboutImage img {height: 270px; }
.ImageCaption { gap: 8px;}
.ImageCaption > i { width: 36px; height: 36px; font-size: 14px; }
.ImageCaption strong { font-size: 12px; }
.ImageCaption span { font-size: 10px; }
.AboutContent { padding: 20px 17px; }
.AboutContent h3 { font-size: 22px; padding-left: 12px; }
.AboutContent p { font-size: 13px; line-height: 1.75; }
.LocationBox { padding: 12px;}
.LocationBox span {font-size: 11px;}
.StatsInner { grid-template-columns: 1fr 1fr;}
.StatCard { padding: 22px 7px; }
.StatIcon { width: 44px; height: 44px;}
.StatIcon i {font-size: 17px; }
.StatCard h2 {font-size: 27px; }
.StatCard p {font-size: 10px; letter-spacing: 0; }
.PrincipalImage img {width: 165px; height: 165px; }
.PrincipalContent h2 { font-size: 25px;}
.SectionLabelPrinci { font-size: 12px; padding: 7px 14px;}
.FacultyProfile, .Biography, .PublicationSection { padding: 40px 4%; }
.FacultyCard { padding: 25px 15px; border-radius: 16px; }
.ImageRing { width: 150px; height: 150px;}
.FacultyName {font-size: 27px;}
.FacultyDesignation { font-size: 15px;}
.DepartmentName { padding: 8px 13px;font-size: 12px;}
.FacultyBtn { flex: 1 1 100%; width: 100%; }
.BioHeader,.PublicationHeader { gap: 10px; }
.BioHeader h2, .PublicationHeader h2 { font-size: 23px;}
.SectionIcon, .PublicationIcon { width: 44px; height: 44px; border-radius: 12px; }
.SectionIcon i,.PublicationIcon i {font-size: 19px; }
.BioCard { padding: 20px 17px; border-radius: 14px; }
.BioCardTitle h3 {font-size: 18px; }
.SkillBox span { padding: 7px 12px; font-size: 11px; }
.PublicationList { padding-left: 20px; }
.DepartmentHeader { padding: 45px 5%; }
.department-badge { font-size: 10px; letter-spacing: 1.3px; }
.DepartmentHeader h1 { font-size: 30px; }
.DepartmentHeader h2 { font-size: 18px;}
.DepartmentHeader p { font-size: 14px; }
.DepartmentHeader .header-subtitle { font-size: 13px; }
.DepartmentAbout, .LabSection { padding: 45px 0;}
.DepartmentText { padding: 20px 17px; border-radius: 14px;}
.DepartmentText p { font-size: 13px;}
.LabGrid { grid-template-columns: 1fr; }
.lab-image { height: 190px;}
.cta-icon { width: 60px; height: 60px;flex-basis: 60px; }
.cta-content h2 {font-size: 21px;}
.PhysicsFacultyButton { width: 100%; }
.SportsHero { padding: 45px 5%; }
.SportsBadge { font-size: 11px; padding: 7px 14px; }
.SportsHero h1 {font-size: 31px;}
.SportsHero h1 span {font-size: 23px; }
.SportsDivider { width: 65px; margin: 18px auto 22px; }
.SportsGallerySection { padding: 42px 4%;}
.SportsGallery { grid-template-columns: 1fr; }
.SportsGallery .SportsPhoto:first-child { grid-column: auto; }
.CommitteeSection {padding: 42px 3%; }
.CommitteeBadge { font-size: 11px; padding: 7px 14px; }
.CommitteeHeader h2 {font-size: 25px; }
.CommitteeTable { min-width: 680px; }
.PrincipalPhoto { height: 240px; }
.PrincipalInfo { padding: 20px; }
.PrincipalInfo h3 {font-size: 18px; }
.QuickLinks { grid-template-columns: 1fr; margin: 18px 4%; }
.MainFooter { margin-top: 20px; }
.FooterContainer {padding-top: 30px; padding-bottom: 30px; }
.FooterColumn h3 { font-size: 16px; }
.FooterColumn li a { font-size: 13px;}
.map-wrapper iframe { height: 210px;}
.copyright-inner p {font-size: 9px;}
}
/* EXTRA SMALL DEVICES 400px ================ */
@media (max-width: 400px) {
.college-info h1 { font-size: 15px;}
.college-info h2 { font-size: 11px;}
.mobile-menu-toggle { font-size: 12px; padding: 11px; }
.dropdown-menu {background-color: #0d395f; color:white}
.CollegeSlider { min-height: 220px;}
.AboutImage img { height: 230px; }
.FacultyName { font-size: 24px;}
.FacultyBtn { font-size: 12px; padding: 10px 12px; }
.DepartmentHeader h1 {font-size: 27px;}
.SportsHero h1 { font-size: 27px; }
.SportsHero h1 span { font-size: 20px; }
.StatCard h2 { font-size: 24px; }
.StatCard p { font-size: 9px; }
}
/* ============== TOUCH DEVICESPrevent hover effects from causing awkward mobile UI====================== */
@media (hover: none) and (pointer: coarse) {
.ProfileCard:hover, .HighlightCard:hover, .DepartmentCard:hover, .DeptCard:hover,
.LabCard:hover, .PrincipalCard:hover, .SportsHighlightCard:hover
{ transform: none; }
.AboutImage .ImageFrame:hover img, .LabCard:hover img,
.PrincipalCard:hover .PrincipalPhoto img {transform: none; }
}
/* =========== REDUCED MOTION======================= */
@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }
*, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}
/******************* Responsive progrmamme ends here..................*/