* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%;
  font-family: "Times New Roman", Times, serif;
  background: #f8f8f8;
  color: #333;
  line-height: 1.7;
  margin: 2.5px;
}

a { color: #003366; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Full-screen Hero */
/* Full-screen Hero - IITG Main Gate with perfect readability */


/* ==================== COMPACT NAVBAR WITH LOGO ==================== */
 
/* ================ MOBILE RESPONSIVE NAVBAR ONLY ================ */
.navbar-rect {
  background: black;
  height: 65px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 6px 25px rgba(0,0,0,0.25);
}

.navbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background: black;
  border-radius: 12px;
  position: relative;
}

/* Logo */
.navbar-logo img {
  height: 68px;
  width: 68px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.4s ease;
}
.navbar-logo:hover img { transform: scale(1.15); }

/* Hamburger Icon */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  z-index: 1001;
}
.hamburger span {
  width: 32px;
  height: 3px;
  background: white;
  border-radius: 3px;
  transition: 0.3s;
}

/* Menu */
.navbar-menu {
  display: flex;
  gap: 10px;
  align-items: center;
  transition: all 0.4s ease;
}

.navbar-menu a,
.dropdown > .dropbtn {
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 10px 18px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.35s ease;
}

.navbar-menu a:hover,
.dropdown:hover > .dropbtn {
  background: rgba(255,255,255,0.25);
  color: #a0f8ff;
  transform: translateY(-3px);
}

/* Dropdown */
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #003366;
  min-width: 240px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  margin-top: 12px;
  z-index: 9999;
  padding: 8px 0;
}
.dropdown-content a {
  display: block;
  padding: 14px 24px;
  color: white;
  font-size: 1rem;
}
.dropdown-content a:hover {
  background: #0055aa;
  padding-left: 32px;
}
.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
  display: block;
}

/* ================ MOBILE VIEW (≤992px) ================ */
@media (max-width: 992px) {
  .hamburger { display: flex; }

  .navbar-menu {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    background: #003366;
    flex-direction: column;
    padding: 20px 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  .navbar-menu.active {
    max-height: 600px; /* enough for all items */
  }

  .navbar-menu a,
  .dropdown > .dropbtn {
    width: 90%;
    margin: 5px auto;
    text-align: center;
    padding: 16px;
    border-radius: 12px;
  }

  .dropdown-content {
    position: static;
    display: none;
    background: #002244;
    width: 90%;
    margin: 10px auto;
    box-shadow: none;
    border-radius: 12px;
  }

  .dropdown.active .dropdown-content {
    display: block;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .navbar-inner { padding: 0 15px; }
  .navbar-logo img { height: 58px; width: 58px; }
}

/* ULTIMATE RESEARCH FOCUS SECTION — WORLD-CLASS DESIGN */
.research-focus-premium {
  padding: 120px 20px;
  background: linear-gradient(135deg, #f8fbff 0%, #e8f4ff 50%, #d6eaff 100%);
  position: relative;
  overflow: hidden;
}

.research-focus-premium::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #003366, #0055aa, #0077cc, #0099ff);
}

.focus-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.focus-title {
  font-size: 3.4rem;
  font-weight: 900;
  color: #003366;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
}

.title-accent {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 7px;
  background: linear-gradient(90deg, #0055aa, #0099ff);
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,85,170,0.4);
}

.focus-title::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #003366;
  border-radius: 2px;
}

.focus-content {
  background: white;
  padding: 50px 60px;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,51,102,0.15);
  border: 1px solid rgba(0,51,102,0.08);
  transition: all 0.5s ease;
  animation: fadeInUp 1.2s ease-out;
}

.focus-content:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(0,51,102,0.22);
}

.focus-content p {
  font-size: 1.28rem;
  line-height: 2.1;
  color: #333;
  margin-bottom: 28px;
  text-align: justify;
  position: relative;
}

.focus-content p:last-child {
  margin-bottom: 0;
}

.focus-content strong {
  color: #003366;
  font-weight: 700;
   
  padding: 0 4px;
}

/* Subtle floating dots decoration */
.focus-decoration {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 100%;
  height: 80%;
  pointer-events: none;
  z-index: 1;
}

.focus-decoration span {
  position: absolute;
  background: rgba(0,85,170,0.08);
  border-radius: 50%;
  animation: float 20s infinite linear;
}

.focus-decoration span:nth-child(1) {
  width: 80px; height: 80px;
  top: 20%; left: 10%;
  animation-duration: 25s;
}
.focus-decoration span:nth-child(2) {
  width: 120px; height: 120px;
  top: 50%; right: 15%;
  animation-duration: 30s;
}
.focus-decoration span:nth-child(3) {
  width: 60px; height: 60px;
  bottom: 20%; left: 20%;
  animation-duration: 22s;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

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

/* Responsive */
@media (max-width: 992px) {
  .research-focus-premium { padding: 100px 20px; }
  .focus-title { font-size: 2.8rem; }
  .focus-content { padding: 40px 30px; }
  .focus-content p { font-size: 1.18rem; }
}

@media (max-width: 600px) {
  .focus-title { font-size: 2.4rem; }
  .focus-content { padding: 30px 20px; border-radius: 20px; }
  .focus-content p { font-size: 1.1rem; line-height: 1.9; text-align: left; }
}




.journal-link {
  color: #003366;
  font-weight: 600;
  text-decoration: none;
  /* border-bottom: 2px solid #00aaff; */
  padding-bottom: 2px;
  transition: all 0.3s ease;
}
.journal-link:hover {
  color: #0055aa;
  border-bottom-color: #00eeff;
}




 

header {
  background: url('assets/IIT-Guwahati-Main-Gate.jpg') center/cover no-repeat fixed;
  min-height: 100vh;
   display: flex; 
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}
/* ==================== HERO CAROUSEL ==================== */
/* ==================== PERFECT FULL-SCREEN CAROUSEL (EDGE-TO-EDGE) ==================== */
header {
  position: relative;
  width: 100vw;              /* Full width of screen */
  height: 100vh;             /* Full height of screen */
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
           /* Black fallback while loading */
}

.carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.carousel-slide img {
  width: 98.6vw;              /* Forces full width */
  height: 100vh;             /* Forces full height */
  object-fit: contain;         /* Covers entire screen */
  object-position: center;   /* Perfectly centered */
  display: block;
  margin: 0;
  padding: 0;
}

.carousel-slide.active {
  opacity: 1;
}
 
/* Dark overlay */
/* .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 20, 40, 0.65);
  z-index: 1;
  backdrop-filter: blur(1px);
} */ 

/* Profile content */
.intro {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.profile-img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 12px solid white;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  margin-bottom: 25px;
  object-fit: cover;
}

.intro h1 {
  font-size: 3.8rem;
  margin: 15px 0;
  text-shadow: 3px 3px 15px rgba(0,0,0,0.8);
}

.intro p {
  font-size: 1.6rem;
  line-height: 1.7;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.7);
}

/* Carousel Dots */
.carousel-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.dot {
  height: 14px;
  width: 14px;
  margin: 0 6px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: all 0.4s;
}

.dot.active, .dot:hover {
  background-color: white;
  transform: scale(1.3);
}

/* Responsive */
@media (max-width: 768px) {
  .profile-img { width: 200px; height: 200px; border-width: 8px; }
  .intro h1 { font-size: 2.8rem; }
  .intro p { font-size: 1.3rem; }
}
/* This is the magic part - makes background softer and text pop */
/* header::before {
  /* content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
         
  z-index: 1; */
  /* display: none;
} */ */

header::before { display: none !important; }

#people h2 {
  font-size: 3.2rem !important;     /* much larger */
  color: #003366 !important;        /* your signature navy blue */
  font-weight: 700;
  margin-bottom: 50px;
  border-bottom: 5px solid #003366;
  display: inline-block;
  padding-bottom: 12px;
}

/* Make sure content stays above the overlay */
header .intro {
  position: relative;
  z-index: 2;
}

.intro{
  margin-left: 70px;
}
header img {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  /* border: 10px solid white; */
  margin-bottom: 25px;
  margin-left: -170px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
header h1 { font-size: 3.5rem; margin: 10px 0; border-bottom: 4px solid white;  color: white; }
header p { font-size: 1.5rem; }

/* FINAL 100% WORKING DROPDOWN — TESTED WITH YOUR CODE */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 10px 22px;
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  transition: all 0.35s ease;
  text-decoration: none;
  border: none;
}

.dropbtn:hover {
  background: rgba(255,255,255,0.25);
  color: #a0f8ff;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #003366;
  min-width: 240px;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  z-index: 999999;
  margin-top: 12px;
  padding: 8px 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.dropdown-content a {
  color: white;
  padding: 14px 24px;
  display: block;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s;
}

.dropdown-content a:hover {
  background: #0055aa;
  padding-left: 32px;
  font-weight: 600;
}

/* THIS MAKES IT APPEAR */
.dropdown:hover .dropdown-content {
  display: block !important;
}

/* People Section Styling */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
  margin-top: 20px;
}
 
.person-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.person-card:hover {
  transform: translateY(-8px);
}

.person-card img {
  width: 480px;
  height: 500px;
  object-fit: cover;
}

.person-card_1 img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.person-card_2 img{
  width: 50%;
  height: 65%;
  object-fit: cover;

}

.person-info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
   
}

.person-info_2{
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;

}
.person-card_1 {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.person-card_2 {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.person-info h4 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: #003366;
}

.person-info .title {
  font-weight: bold;
  color: #003366;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.person-info p {
  margin: 6px 0;
  font-size: 1rem;
  flex-grow: 1;
  text-align: justify;
}

.person-info a {
  color: #003366;
  margin-top: auto;
  font-weight: 500;
}








.person-info_2 h4 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: #003366;
}

.person-info_2 .title {
  font-weight: bold;
  color: #003366;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.person-info_2 p {
  margin: 6px 0;
  font-size: 1rem;
  flex-grow: 1;
  text-align: justify;
}

.person-info_2 a {
  color: #003366;
  margin-top: auto;
  font-weight: 500;
}

/* If no photo available, use placeholder */
.person-card img[src=""] {
  background: #ddd url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="35" r="15" fill="%23999"/><path d="M50 55c-20 0-35 15-35 35h70c0-20-15-35-35-35z" fill="%23999"/></svg>') center/60% no-repeat;
}
/* Navigation - AFTER header (not fixed) */
.after-header-nav {
  background: #003366;
  padding: 20px 10vw;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.after-header-nav a {
  color: white;
  margin: 0 25px;
  font-weight: bold;
  font-size: 1.15rem;
  transition: all 0.3s;
}
.after-header-nav a:hover {
  color: #a0d8ff;
  text-decoration: underline;
}

/* Content Sections */
.content-section {
  padding: 90px 10vw;
  background: white;
}
.content-section:nth-child(even) {
  background: #f8f8f8;
}

h1 {
  font-size: 2.6rem;
  color: #003366;
  margin-bottom: 35px;
  border-bottom: 4px solid #003366;
  display: inline-block;
  padding-bottom: 10px;
}

/* ==================== PUBLICATIONS SECTION - IITG PREMIUM STYLE ==================== */
#publications h1 {
  font-size: 2.8rem;
  color: #003366;
  margin-bottom: 50px;
  text-align: center;
  border-bottom: 5px solid #003366;
  display: inline-block;
  padding-bottom: 12px;
  font-weight: 700;
}

/* Sub-headings: Journal & Conference */
.pub-heading {
  font-size: 2.1rem;
  color: #003366;
  margin: 60px 0 30px;
  padding-bottom: 10px;
  position: relative;
  /* display: inline-block; */
  font-weight: 600;
}

/* Underline style with a slight fade */
.pub-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #003366 70%, transparent 100%);
  border-radius: 2px;
}

/* Journal gets a subtle blue accent */
.pub-heading:first-of-type {
  color: #002850;
}
.pub-heading:first-of-type::after {
  background: linear-gradient(to right, #003366 80%, #0055aa 100%);
}

/* Conference gets a slightly different shade */
.pub-heading:nth-of-type(2)::after {
  background: linear-gradient(to right, #003366 80%, #0066cc 100%);
}

/* Publication List */
.pub-list {
  counter-reset: pub-counter;
  list-style: none;
  padding-left: 0;
  margin: 30px 0;
}

.pub-list li {
  position: relative;
  padding-left: 65px;
  margin-bottom: 32px;
  text-align: justify;
  line-height: 1.85;
  font-size: 1.08rem;
  counter-increment: pub-counter;
  transition: all 0.3s ease;
  padding-right: 10px;
}

.pub-list li:hover {
  background: rgba(0, 51, 102, 0.03);
  border-radius: 8px;
  padding-left: 68px;
}

/* Beautiful numbered tag */
.pub-list li::before {
  content: "[" counter(pub-counter) "]";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  font-size: 1.0rem;
  color: white;
  background: #003366;
  padding: 4px 10px;
  border-radius: 6px;
  min-width: 35px;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0,51,102,0.3);
}

/* Italic journal/conference name */
.pub-list em {
  color: #003366;
  font-weight: 600;
  font-style: italic;
}

/* DOI Button - Beautiful & Clickable */
.doi-link {
  margin-left: 15px;
  font-size: 0.85rem !important;
  color: white !important;
  background: #003366;
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,51,102,0.3);
}

.doi-link:hover {
  background: #0055aa;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,51,102,0.4);
}

/* Elegant divider between Journal and Conference */
.pub-divider {
  height: 3px;
  background: linear-gradient(to right, transparent 10%, #003366 50%, transparent 90%);
  margin: 70px 0;
  border: none;
  position: relative;
}

.pub-divider::before {
  content: "▪ ▪ ▪";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #f8f8f8;
  color: #003366;
  font-size: 1.4rem;
  letter-spacing: 8px;
  padding: 0 10px;
}

/* Google Scholar Button */
#publications > div[style*="text-align: center"] a {
  display: inline-block;
  background: #003366;
  color: white !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  margin-top: 15px;
  box-shadow: 0 8px 25px rgba(0,51,102,0.3);
  transition: all 0.4s ease;
}

#publications > div[style*="text-align: center"] a:hover {
  background: #0055aa;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,51,102,0.4);
}


.flex {
  display: flex;
  gap: 70px;
  flex-wrap: wrap;
}
.flex > div { flex: 1; min-width: 300px; }

ul { padding-left: 35px; }
li { margin-bottom: 14px; font-size: 1.15rem; }

.news-item {
  background: #e6f2ff;
  padding: 22px;
  border-left: 6px solid #003366;
  margin-bottom: 25px;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}


/* ==================== MTECH STUDENTS SECTION - CLEAN & ELEGANT ==================== */

/* ==================== MTECH STUDENTS WITH PHOTO — IITG STYLE ==================== */

#students h2{
  font-size: 3.2rem !important;     /* much larger */
  color: #003366 !important;        /* your signature navy blue */
  font-weight: 700;
  margin-bottom: 50px;
  border-bottom: 5px solid #003366;
  display: inline-block;
  padding-bottom: 12px;

}
.mtech-students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.mtech-card {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  padding: 20px;
  border-left: 6px solid #003366;
}

.mtech-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
  border-left-color: #0055aa;
}

.mtech-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  flex-shrink: 0;
  margin-right: 20px;
}

.mtech-info {
  flex: 1;
}

.mtech-info h3 {
  color: #003366;
  font-size: 1.38rem;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.mtech-info p {
  margin: 6px 0;
  font-size: 1.06rem;
  color: #333;
  line-height: 1.5;
}

.mtech-info p strong {
  color: #003366;
}

/* Responsive */
@media (max-width: 768px) {
  .mtech-card {
    flex-direction: column;
    text-align: center;
  }
  .mtech-card img {
    margin: 0 auto 15px;
  }
}



/* ==================== ONLINE COURSES SECTION - NPTEL STYLE ==================== */

#teaching h2{
  font-size: 3.2rem !important;     /* much larger */
  color: #003366 !important;        /* your signature navy blue */
  font-weight: 700;
  margin-bottom: 50px;
  border-bottom: 5px solid #003366;
  display: inline-block;
  padding-bottom: 12px;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 35px;
  margin-top: 40px;
}

.course-card {
  background: white;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
  border-left: 6px solid #003366;
  text-align: left;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
  border-left-color: #0055aa;
}

.course-card.ongoing {
  border-left-color: #28a745;  /* Green for ongoing */
}

.course-card.upcoming {
  border-left-color: #ffc107;  /* Yellow for upcoming */
}

.course-card h3 {
  color: #003366;
  font-size: 1.6rem;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.course-card p {
  margin: 8px 0;
  font-size: 1.05rem;
  color: #333;
  line-height: 1.5;
}

.course-card p strong {
  color: #003366;
}

.course-desc {
  font-style: italic;
  color: #555;
  margin: 16px 0;
  padding: 12px;
  background: #f8f9fa;
  border-left: 3px solid #e9ecef;
  border-radius: 0 8px 8px 0;
}

.course-link {
  display: inline-block;
  margin-top: 16px;
  color: #003366;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 16px;
  border: 2px solid #003366;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.course-link:hover {
  background: #003366;
  color: white;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}


/* Academic Profiles Grid */

#news h2{
  font-size: 3.2rem !important;     /* much larger */
  color: #003366 !important;        /* your signature navy blue */
  font-weight: 700;
  margin-bottom: 50px;
  border-bottom: 5px solid #003366;
  display: inline-block;
  padding-bottom: 12px;

}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin: 50px auto;
  max-width: 1100px;
  padding: 0 20px;
}

.profile-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  box-shadow: 0 10px 35px rgba(0,51,102,0.12);
  transition: all 0.4s ease;
  text-decoration: none;
  border-left: 6px solid #003366;
}

.profile-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 60px rgba(0,51,102,0.22);
  border-left-color: #0055aa;
}

.profile-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 14px;
  background: white;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.profile-text strong {
  color: #003366;
  font-size: 1.3rem;
  display: block;
  margin-bottom: 6px;
}

.profile-text span {
  color: #444;
  font-size: 1rem;
}
/* Updates Box */
.updates-box */
.updates-box {
  max-width: 800px;
  margin: 50px auto 20px;
  text-align: center;
}

.news-item.highlight {
  background: #e6f7ff;
  border-left: 8px solid #0055aa;
  font-size: 1.15rem;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,51,102,0.1);
}





/* ==================== SPONSORED PROJECTS SECTION ==================== */
#projects {
  padding: 100px 10vw;
  background: white;
}

#projects .container {
  max-width: 1300px;
  margin: 0 auto;
}

#projects .section-title {
  font-size: 3.2rem;
  color: #003366;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

#projects .title-underline {
  width: 120px;
  height: 6px;
  /* background: linear-gradient(90deg, #003366, #0055aa); */
  margin: 0 auto 70px;
  border-radius: 3px;
}

.projects-table-wrapper {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,51,102,0.12);
  margin-bottom: 50px;
}

.projects-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: white;
  font-size: 1.05rem;
}

.projects-table thead tr {
  background: linear-gradient(135deg, #003366, #005588);
  color: white;
  text-align: left;
}

.projects-table th {
  padding: 20px 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.1rem;
}

.projects-table tbody tr {
  transition: all 0.3s ease;
  border-bottom: 1px solid #eee;
}

.projects-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.projects-table tbody tr:hover {
  background: #e6f2ff;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,51,102,0.15);
}

.projects-table td {
  padding: 22px 18px;
  line-height: 1.6;
}

.projects-table .serial {
  text-align: center;
  font-weight: 600;
  color: #003366;
}

.projects-table .title-col {
  font-weight: 600;
  color: #222;
}

.projects-table .agency {
  color: #444;
  font-size: 0.98rem;
}

.projects-table .amount {
  text-align: center;
  font-weight: 700;
  color: #003366;
  font-size: 1.1rem;
}

.projects-table .duration {
  text-align: center;
}

.projects-table .status {
  display: inline-block;
  ;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 6px;
}

.projects-table .status.completed {
  background: #d4edda;
  color: #155724;
}

.projects-table .status.ongoing {
  background: #fff3cd;
  color: #856404;
}

.projects-table .co-pi a {
  color: #003366;
  text-decoration: none;
  font-weight: 600;
}

.projects-table .co-pi a:hover {
  text-decoration: underline;
}

.total-funding {
  text-align: center;
  font-size: 1.3rem;
  color: #003366;
}

.total-funding .highlight-amount {
  font-size: 1.8rem;
  color: #0055aa;
  font-weight: bold;
  margin-left: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  #projects { padding: 80px 5vw; }
  #projects .section-title { font-size: 2.6rem; }
  .projects-table { font-size: 0.94rem; }
  .projects-table th,
  .projects-table td { padding: 14px 10px; }
}
















/* LinkedIn name — clickable with smooth hover */
.linkedin-name {
  color: #003366;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color 0.3s ease;
}

.linkedin-name:hover {
  color: #0077b5;                    /* LinkedIn blue */
  text-decoration: underline;
}

.linkedin-name::after {
  content: " ↗";
  font-size: 0.9em;
  color: #0077b5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.linkedin-name:hover::after {
  opacity: 1;
}


/* Footer */
footer {
  background: #003366;
  color: white;
  text-align: center;
  padding: 50px 10vw;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  header h1 { font-size: 2.8rem; }
  header p { font-size: 1.3rem; }
  .after-header-nav a { margin: 0 12px; font-size: 1rem; display: inline-block; margin-bottom: 10px; }
  .content-section { padding: 70px 5vw; }
  h2 { font-size: 2.2rem; }
}


.faculty-top-header {
  background: linear-gradient(135deg, #dcdcdc 0%, grey 100%);
  padding: 6px 24px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  height: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.faculty-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;     /* ← changed: items start from left */
  gap: 16px;                       /* controls distance between logo and text */
  width: 100%;
}

.faculty-logo img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: white;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
  flex-shrink: 0;                  /* prevents logo from shrinking */
}

.faculty-logo:hover img {
  transform: scale(1.08);
}

.faculty-info {
  color: white;
  text-align: left;                /* ← better when placed right after logo */
  flex: 0 1 auto;                  /* ← important: don't stretch, just take needed space */
  min-width: 0;
}

.faculty-info h1 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  /* text-shadow: 0 1px 3px rgba(0,0,0,0.5); */
  white-space: nowrap;             /* optional: prevents name from wrapping */
  color: #002e63;
}

.faculty-info p {
  font-size: 0.90rem;
  margin: 2px 0 0 0;
  line-height: 1.2;
  opacity: 0.95;
  font-weight: 500;
  color: maroon;
  font-weight: bold;
}

/* ────────────────────────────────────────
   Responsive
───────────────────────────────────────── */

@media (max-width: 992px) {
  .faculty-top-header {
    min-height: 60px;
    padding: 6px 20px;
  }
  .faculty-header-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .faculty-info {
    text-align: center;
  }
  .faculty-info h1 {
    font-size: 1.32rem;
  }
  .faculty-info p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .faculty-top-header {
    min-height: 54px;
    padding: 5px 16px;
  }
  .faculty-logo img {
    height: 48px;
    width: 48px;
    padding: 3px;
  }
  .faculty-info h1 {
    font-size: 1.22rem;
  }
  .faculty-info p {
    font-size: 0.76rem;
  }
}




.courses_banner {
  background-color: #095ca3;              /* Classic NPTEL/IIT blue */
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  min-height: 44px;                       /* ← smaller height */
  text-align: center;
  padding: 6px 0;                         /* ← reduced padding */
  border-radius: 12px;                    /* slightly softer corners */
  margin: 30px auto;                      /* ← less vertical spacing */
  /* max-width: 900px;                       */
   /* ← narrower box – change to 700px or 600px if you want it even smaller */
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.courses_banner h3 {
  color: white;
  font-size: 1.8rem;                      /* ← smaller title */
  font-weight: 800;
  margin: 0;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

/* Optional shine – kept but made faster & subtler */
.courses_banner::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-25deg);
  border-radius: 12px;
             /* slower shine looks better on small banner */
}

@keyframes shine {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Responsive – even smaller on mobile */
@media (max-width: 768px) {
  .courses_banner {
    min-height: 40px;
    margin: 35px 10px;
    border-radius: 10px;
    max-width: 95%;                       /* almost full-width on small screens */
  }
  .courses_banner h3 {
    font-size: 1.45rem;
    letter-spacing: 1px;
  }
}