:root {
  --color-primary: #0d9488;         /* teal-600 — sustainability */
  --color-primary-dark: #115e59;    /* teal-800 */
  --color-primary-darkest: #134e4a; /* teal-900 */
  --color-secondary: #0c4a6e;       /* deep power-grid blue */
  --color-secondary-light: #5eead4; /* teal-300 */
  --color-accent-gold: #fbbf24;     /* gold — intelligence/energy spark */
  --color-accent-amber: #f59e0b;    /* amber */
  --color-accent-rose: #f43f5e;     /* rose — deadlines/alerts */
  --color-navy: #0f172a;
  --header-height: 120px; /* fallback until script.js measures the real navbar height */
}

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

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* ================= SITE-WIDE JUSTIFIED TEXT ================= */
/* Justifies the actual body-copy paragraphs across every page (about,
   overview, committee, tracks, notes, welcome message, etc.) while leaving
   intentionally centered text alone (hero subtitle, banners, CTA blurbs,
   badges, footer address, nav links, buttons). */
.about-nit p,
.about-container p,
.intro-text,
.welcome-message p,
.cmt-acknowledgement,
.note-box p,
.track-card p,
.overview-content p {
  text-align: justify;
}

.container {
    width: 90%;
    margin: auto;
}

/* ================= top left logo ================= */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 10px;
}

.logo-container img {
  width: 45px;
  height: 45px;
  border-radius: 50%;   /* makes it round */
  object-fit: cover;
}

.logo-text {
  font-size: 22px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.hero-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* full hero height */
}

.hero-logo {
  width: 190px;
  height: 190px;
  object-fit: contain;
  margin-bottom: 18px;
  border-radius: 50%;   /* 🔥 makes it circle */
  object-fit: cover;    /* fills properly */
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(12, 74, 110, 0.35), 0 20px 45px rgba(0, 0, 0, 0.45);
}

.hero-title {
  font-size: 42px;
  font-weight: 700;
  color: #115e59; /* blue */
  line-height: 1.3;
  max-width: 900px;
}

.hero-sub {
  font-size: 28px;
  margin-top: 10px;
  color: #115e59;
}
/* ================= OVERVIEW SECTION ================= */

.overview-section {
  padding: 80px 8%;
  background: #f8fafc;
}

/* Banner */
.overview-banner {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url("images/2.jpg") center/cover no-repeat;
  padding: 80px 20px;
  text-align: center;
  color: white;
  border-radius: 20px;
  margin-bottom: 60px;
}

.overview-banner h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.overview-banner p {
  font-size: 20px;
  opacity: 0.9;
}

/* Content */
.overview-content {
  max-width: 1000px;
  margin: auto;
}

.overview-content h2 {
  font-size: 32px;
  margin-bottom: 25px;
  color: #1f2937;
}

.overview-content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 20px;
  color: #374151;
}

.highlight-link {
  color: #0d9488;
  font-weight: 600;
}
/* NAVBAR */

/* ================= NAVBAR ================= */

/* ================= TOP INFO BAR ================= */

.top-info-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-secondary);
  color: #ffffff;
  text-align: center;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  z-index: 10002;
  line-height: 1.4;
}

.top-info-bar sup {
  font-size: 0.7em;
}

@media (max-width: 700px) {
  .top-info-bar {
    font-size: 10.5px;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .top-info-bar {
    font-size: 9.5px;
    padding: 5px 8px;
  }
}

.navbar {
  position: fixed;
  width: 100%;
  top: 32px; /* fallback; JS sets the exact value dynamically */
  background: rgba(10, 20, 35, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  padding: 15px 2.5%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: top 0.15s ease;
}

@media (max-width: 700px) {
  .navbar {
    top: 30px;
  }
}

@media (max-width: 480px) {
  .navbar {
    top: 28px;
  }
}

/* ================= LOGO BRAND TEXT BLOCK ================= */

.logo-text-block {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-text-block .logo-text {
  font-size: 18px;
}

.logo-subtext {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: #5eead4;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .logo-text-block .logo-text {
    font-size: 15px;
  }
  .logo-subtext {
    font-size: 8.5px;
  }
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.logo {
  color: white;
  font-size: 22px;
  font-weight: 700;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.nav-menu li {
  position: relative;
  flex-shrink: 0;
}

.nav-menu a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: 0.3s;
}

.nav-menu a:hover {
  color: #fbbf24;
}

.arrow {
  font-size: 12px;
}

/* ================= NAVBAR CTA BUTTON (SUBMIT PAPER) ================= */

.submit-btn {
  display: inline-block;
  background: linear-gradient(135deg, #0d9488, #115e59);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #115e59, #134e4a);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(13, 148, 136, 0.45);
  color: #ffffff !important;
}

/* Dropdown */

.dropdown-menu {
  position: absolute;
   top: 100%;
  left: 0;
  background: #f3f4f6;
   margin-top: 0; /* remove gap */
  min-width: 230px;
  border-radius: 10px;
  padding: 10px 0;
  display: none;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  z-index: 10000;
}

.dropdown-menu li {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-menu li a {
  color: #1f2937;
  font-size: 14px;
}

.dropdown-menu li:hover {
  background: #e5e7eb;
}

.coming-soon-tag {
  display: inline-block !important;
  background: #fef3c7 !important;
  color: #d97706 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.hero {
  height: 100vh;
  position: relative;
  background-image: url("1.jpg");   /* ADD THIS */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: heroSlider 20s infinite;
}

.hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Darkened enough to keep the bright red headline legible over busy photo backgrounds. */
  background: linear-gradient(to bottom, rgba(10, 5, 15, 0.35) 0%, rgba(10, 5, 15, 0.45) 60%, rgba(10, 5, 15, 0.55) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  width: 100%;
  padding: 0 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-content h1,
.hero-content h2,
.hero-content h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* BACKGROUND SLIDES */
@keyframes heroSlider {
  0%   { background-image: url("1.jpg"); }
  25%  { background-image: url("2.jpg"); }
  50%  { background-image: url("3.jpg"); }
  75%  { background-image: url("4.jpg"); }
  100% { background-image: url("1.jpg"); }


}


/* Slides */
.slides {
  height: 100%;
  width: 100%;
  position: absolute;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}


/* DOTS */
.dots {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  z-index: 2;
}

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

.dot.active {
  background-color: white;
}



/* HERO ARROWS ONLY */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  transition: 0.3s ease;
}

.hero-arrow:hover {
  background: rgba(0,0,0,0.7);
}

.hero-left {
  left: 20px;
}

.hero-right {
  right: 20px;
}
/* Show on hover (Desktop) */

.dropdown:hover .dropdown-menu {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px);}
  to { opacity: 1; transform: translateY(0);}
}
/* ================= RUNNING STRIP ================= */

.announcement-strip {
  width: 100%;
  background: linear-gradient(90deg, #0f766e, #0d9488);
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  position: relative;
}

.announcement-content {
  display: inline-block;
  padding-left: 100%;
  animation: scrollText 40s linear infinite;
  font-weight: 600;
  color: white;
  font-size: 16px;
}

.highlight-red {
  color: #f43f5e;
  font-weight: 700;
}

.highlight-yellow {
  color: #fbbf24;
  font-weight: 700;
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ================= ORGANIZERS SECTION ================= */

.organizers-section {
  padding: 80px 8%;
  background: #f3f4f6;
  text-align: center;
}

.organizers-heading {
  font-size: 42px;
  font-weight: 800;
  color: #0d9488;
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* TOP ROW — centered big card */
.organizers-top {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

/* BOTTOM ROW — centered small cards */
.organizers-bottom {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 2px solid #e5e7eb;
}

/* CARD BASE */
.org-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.13);
}

/* LARGE CARD */
.org-card.large {
  width: 100%;
  max-width: 700px;
  padding: 30px 40px;
  gap: 25px;
  justify-content: flex-start;
}

.org-card.large img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.org-content h3 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #0f172a;
}

.org-content p {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

/* SMALL CARD */
.org-card.small {
  width: 180px;
  height: 160px;
  padding: 20px;
}

.org-card.small img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .org-card.large {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }
  .org-content p {
    text-align: center;
  }
  .organizers-bottom {
    gap: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
  .org-card.small {
    width: 140px;
    height: 130px;
  }
}

/* ================= WELCOME SECTION ================= */

.welcome-section {
  padding: 100px 8%;
  background: #f8fafc;
}

.welcome-heading {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 60px;
  color: #0f172a;
}

/* CHAIRS */
.chairs-row {
  display: flex;
  gap: 80px;
  margin-bottom: 50px;
}

.chair-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chair-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.chair-card h3 {
  font-size: 20px;
  margin-bottom: 5px;
}

.chair-card p {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* MESSAGE BOX */
.welcome-message {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  line-height: 1.9;
  font-size: 16px;
  color: #374151;
}

.welcome-message p {
  margin-bottom: 20px;
}

.highlight {
  color: #0d9488;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .chairs-row {
    flex-direction: column;
    gap: 30px;
  }
}

/* ================= CENTERED SIGNATURES ================= */


/* ================= MAIN LAYOUT ================= */

.main-section {
  padding: 100px 8%;
  background: #f5f7fa;
}

.main-wrapper {
  display: flex;
  gap: 60px;
  align-items: stretch;
}

/* LEFT CONTENT */
.left-content {
  flex: 2;
}

.about-block {
  margin-bottom: 0;
}

.dept-block {
  margin-top: 80px;
}

h2 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 40px;
  color: #0f172a;
}

/* TEXT + IMAGE ROW */
.content-row {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}

.text {
  flex: 1.4;
  font-size: 16px;
  line-height: 1.9;
  color: #475569;
}


.image {
  flex: 1;
}

.image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* DEPARTMENT ROW: full-width block below the About+Key Dates row, so the
   photo keeps its true 4:3 landscape ratio (not stretched to any sidebar)
   and never crops anyone out. */
.dept-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.dept-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

@media (max-width: 1000px) {
  .dept-row {
    display: flex;
    flex-direction: column;
  }
}

.cmt-acknowledgement {
    margin-top: 40px;
    padding: 15px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    text-align: justify;
}

/* RIGHT KEY DATES */
.key-dates {
  flex: 1;
  background: #f0fdfa;
  padding: 35px;
  border-radius: 25px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  position: sticky;
  top: 100px;
}

.key-dates h3 {
  font-size: 26px;
  margin-bottom: 5px;
}

.timeline {
  margin-bottom: 25px;
  color: #6b7280;
}

.date-box {
  background: white;
  padding: 18px;
  border-radius: 15px;
  margin-bottom: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

.date-box.highlight {
  border: 2px solid #5eead4;
    position: sticky;
    text-align: left;
}

.red {
  color: #f43f5e;
  font-weight: 600;
}

.yellow {
  color: #f59e0b;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .main-wrapper {
    flex-direction: column;
  }

  .content-row {
    flex-direction: column;
  }

  h2 {
    font-size: 34px;
  }

  .key-dates {
    position: static;
  }
}
/* Mobile hero text tuning */
@media (max-width: 600px) {
  .hero-logo {
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
  }
  .hero-content h1 {
    font-size: 26px;
    line-height: 1.3;
  }
  .hero-content h2 {
    font-size: 32px !important;
    line-height: 1.3;
  }
  .hero-content h3 {
    font-size: 16px;
  }
  .hero-content p {
    font-size: 14px;
  }
  .countdown {
    gap: 10px;
  }
  .countdown div {
    padding: 10px 12px;
  }
  .countdown span {
    font-size: 20px;
  }
}

/* Mobile */


.menu-toggle {
  display: none;
  font-size: 24px;
  color: white;
  cursor: pointer;
}

@media (max-width: 1300px) {

  .menu-toggle {
    display: block;
    order: 3;
  }

  .submit-btn {
    order: 2;
    margin-right: 10px;
    padding: 9px 18px;
    font-size: 12.5px;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 78%;
    max-width: 300px;
    background: #0f172a;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 28px 30px;
    display: none;
    border-radius: 0;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(0,0,0,0.35);
    gap: 6px;
    z-index: 10001;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-menu > li > a {
    display: flex;
    white-space: normal;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .dropdown-menu {
    position: relative;
    top: 10px;
    background: #1e293b;
  }

  .dropdown-menu li a {
    color: white;
  }

  .dropdown:hover .dropdown-menu {
    display: none;
  }

  .nav-menu > li.dropdown.open > .dropdown-menu {
    display: block !important;
  }

  .nav-menu > li.dropdown > a .arrow {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .nav-menu > li.dropdown.open > a .arrow {
    transform: rotate(180deg);
  }

  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
  }
}

/* HERO */

.hero {
    background: url('1.jpg') center/cover no-repeat;
    height: 100vh;
    position: relative;
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    overflow: hidden;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Always clears the fixed top-info-bar + navbar (--header-height is kept
       up to date by adjustHeaderOffsets() in script.js), plus a 16px buffer
       so the hero logo never touches or enters the navbar. */
    padding-top: calc(var(--header-height, 120px) + 16px);
}

.hero h2 {
    font-size: 40px;
    color: #ff3b3b;
}

/* COUNTDOWN */

.countdown {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.countdown div {
    background: linear-gradient(135deg, #0c4a6e, #0d9488);
    padding: 15px 20px;
    border-radius: 10px;
}

.countdown span {
    font-size: 28px;
    font-weight: bold;
}

/* ================= ABOUT SECTION ================= */

.about-section {
  padding: 90px 8%;
  background: #f5f7fa;
}

.about-heading {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 50px;
  color: #0f172a;
}

/* 3 COLUMN LAYOUT */
.about-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* LEFT COLUMN */
.col-left {
  flex: 1;
  font-size: 16px;
  line-height: 1.9;
  color: #475569;
}

.col-left p {
  margin-bottom: 20px;
}

/* MIDDLE COLUMN */
.col-middle {
  flex: 1;
  font-size: 16px;
  line-height: 1.9;
  color: #475569;
}

.col-middle img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* RIGHT COLUMN */
.col-right {
  flex: 1;
  background: #f0fdfa;
  padding: 30px;
  border-radius: 25px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.col-right h3 {
  font-size: 26px;
  margin-bottom: 5px;
}

.timeline {
  margin-bottom: 25px;
  color: #6b7280;
}

.date-box {
  background: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

.date-box h4 {
  font-size: 14px;
  margin-bottom: 6px;
}

.red {
  color: #f43f5e;
  font-weight: 600;
}

.yellow {
  color: #f59e0b;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .about-wrapper {
    flex-direction: column;
  }

  .about-heading {
    font-size: 34px;
  }
}
/* RESPONSIVE */

@media (max-width: 900px) {
  .about-wrapper {
    flex-direction: column;
  }

  .key-dates {
    margin-top: 40px;
  }
}

/* DATES */

.dates-section {
  padding: 150px 8% 80px;
  background: #f8fafc;
  text-align: center;
}

.dates-section .section-title {
  text-align: center;
  margin-bottom: 40px;
}

.dates-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.date-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    width: 250px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* ================= FOOTER (legacy block removed - see full footer styles below) ================= */






/* ================= OVERVIEW HERO BANNER ================= */

.overview-banner {
  width: 100%;
  height: 350px;              /* adjust height here */
  background: linear-gradient(
              rgba(0,0,0,0.55),
              rgba(0,0,0,0.55)),
              url("5.jpg") center/cover no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  color: white;

  border-radius: 0;           /* remove rounded corners */
  margin-bottom: 60px;
}

.overview-banner h1 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 15px;
}

.overview-banner p {
  font-size: 20px;
  opacity: 0.9;
}
.overview-section {
  padding: 0;     /* remove top padding */
  background: #f8fafc;
}
.overview-content {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 8%;
}





/* ABOUT NIT SECTION */
.about-nit {
  background: #f1f5f9;
  padding: 130px 20px 60px;
}

.about-container {
  max-width: 1100px;
  margin: auto;
}

.about-nit h1 {
  font-size: 36px;
  color: #1e293b;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

/* blue underline */
.about-nit h1::after {
  content: "";
  width: 120px;
  height: 4px;
  background: #0d9488;
  position: absolute;
  left: 0;
  bottom: -8px;
}

.about-nit p {
  font-size: 16px;
  line-height: 1.8;
  color: #334155;
  margin-bottom: 18px;
}



.footer {
  background: #0b1f33;
  color: #cbd5e1;
  padding: 60px 80px;
}

/* GRID */
.footer-container {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 1100px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}

/* FOOTER ICON LINKS (Downloads / External Links) */
.footer-col .icon-list {
  list-style: none;
  padding: 0;
}

.footer-col .icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-col .icon-list .icon {
  color: #5eead4;
  font-size: 14px;
  line-height: 1.5;
  flex-shrink: 0;
}

.footer-col .icon-list a {
  text-decoration: none;
  color: #d1d5db;
  font-size: 14.5px;
  transition: 0.3s;
}

.footer-col .icon-list a:hover {
  color: #5eead4;
}

.footer-section-label {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #64748b;
  margin: 26px 0 14px;
}

.footer-col .quick-links li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-col .quick-links li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  flex-shrink: 0;
}

/* BRAND */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand h3 {
  color: #fbbf24;
  margin: 0;
}

.footer-tagline {
  display: block;
  color: #5eead4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-top: 3px;
}

.footer-contact {
  margin: 14px 0;
}

.footer-contact li span:last-child {
  line-height: 1.6;
}

/* TEXT */
.footer-col p {
  font-size: 14px;
  line-height: 1.6;
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
  cursor: pointer;
}

.footer-col ul li:hover {
  color: #fbbf24;
}

/* HEADINGS */
.footer-col h3 {
  margin-bottom: 15px;
  color: #ffffff;
}

/* LINES */
.footer hr {
  border: 0.5px solid rgba(255,255,255,0.1);
  margin: 30px 0;
}

/* BOTTOM */
.footer-bottom {
  text-align: center;
  font-size: 13px;
}

.footer-highlight {
  color: #ffffff;
  font-weight: 600;
}

.footer-bottom .dev {
  margin-top: 5px;
  opacity: 0.8;
}

/* EXTRA */
.footer-extra {
  text-align: center;
  font-size: 14px;
}

.footer-extra .icons {
  margin-top: 10px;
  font-size: 22px;
}
.footer-col ul li a {
  text-decoration: none;
  color: #ffffff;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #fbbf24;
}

.credits {
  margin-top: 25px;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}
/* SECTION BACKGROUND (match navbar) */
.sponsor-section {
  background-color: #ffffff;   /* 👈 updated */
  padding: 80px 20px;
}

/* CENTER CONTENT */
.container {
  max-width: 900px;
  margin: auto;
  padding: 0 25px;   /* 👈 more side spacing */
}

/* HEADING */
.sponsor-section h2 {
  font-size: 32px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 35px;
  text-align: center;
  letter-spacing: 0.5px;   /* 👈 subtle premium feel */
}

/* PARAGRAPH TEXT */
.sponsor-section p {
  font-size: 17px;
  line-height: 1.9;
  color: #0f172a;   /* 👈 softer white (better than harsh white) */
  margin-bottom: 22px;
  text-align: justify;
}

/* IMPORTANT LINE */
.highlight {
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  margin-top: 30px;
  font-size: 18px;   /* 👈 slightly bigger */
}

/* BUTTON CENTER */
.btn-wrapper {
  text-align: center;
  margin-top: 30px;
}

/* BUTTON DESIGN */
.form-btn {
  display: inline-block;
  padding: 14px 30px;
  background: #0f172a;   /* 👈 cleaner solid color */
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* BUTTON HOVER */
.form-btn:hover {
  background: #0f172a;
  transform: translateY(-2px);
}

/* OPTIONAL: Add subtle section polish */
.sponsor-section {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
  /* news and announcements section /*
/* Main Section */
.news-section {
    display: flex;
    justify-content: space-between;
     color: #0d9488;
    align-items: center;
    padding: 60px 80px;
    gap: 50px;
}

/* LEFT SIDE */
.left {
    width: 40%;
}

.left h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.left p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Button */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 50px;
    background: linear-gradient(135deg, #fb923c, #f43f5e);
    color: black;
    font-weight: bold;
    text-decoration: none;
}

/* RIGHT SIDE */
.right {
    width: 60%;
}

/* Scroll Box */
.news-box {
    height: 300px;
    overflow: hidden;
    position: relative;
}

/* Scrolling Content */
.news-content {
    display: flex;
    flex-direction: column;
    animation: scroll-up 15s linear infinite;
}

/* News Card */
.news-card {
    background: #eaeaea;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.news-card:hover {
    transform: translateX(5px);
}

/* Category + Date */
.meta {
    font-size: 12px;
    color: #f59e0b;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Text */
.news-text {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

/* Animation */
@keyframes scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* Pause on hover */
.news-box:hover .news-content {
    animation-play-state: paused;
}

/* Responsive */
@media(max-width: 768px){
    .news-section {
        flex-direction: column;
        padding: 40px 20px;
    }

    .left, .right {
        width: 100%;
    }
}

/* ================= TRACKS SECTION (card redesign) ================= */

.tracks-section {
  margin-top: 10px;
}

.tracks-section .intro-text {
  font-size: 16px;
  line-height: 1.9;
  color: #475569;
  max-width: 900px;
  margin-bottom: 45px;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 18px;
}

.submission-section > .intro-text {
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 18px;
  max-width: 900px;
}

.cmt-link {
  display: inline-block;
  background: #0d9488;
  color: #ffffff;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  margin: 10px 0 45px;
  transition: 0.3s ease;
}

.cmt-link:hover {
  background: #115e59;
  transform: translateY(-2px);
}

.link {
  color: #0d9488;
  font-weight: 600;
}

/* CARD GRID */
.tracks-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 10px 0 45px;
}

.track-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.track-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.track-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccfbf1;
  border-radius: 12px;
}

.track-photo {
  width: calc(100% + 56px);
  height: 170px;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  margin: -32px -28px 20px;
  display: block;
}

.track-icon svg {
  width: 22px;
  height: 22px;
  color: #0d9488;
}

.track-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.track-number {
  display: inline-block;
  background: #f0fdfa;
  color: #0d9488;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: 20px;
}

.track-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.35;
}

.track-card p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #64748b;
  margin-bottom: 0;
}

/* NOTE / WARNING BOXES */
.note-box {
  background: #f8fafc;
  border-left: 4px solid #0d9488;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.note-box p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 8px;
}

.note-box p:last-child {
  margin-bottom: 0;
}

.warning-box {
  background: #fff7ed;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 16px 24px;
  margin-bottom: 20px;
  color: #92400e;
  font-weight: 600;
  font-size: 14.5px;
}

.cmt-acknowledgement {
  background: #f8fafc;
  border-radius: 10px;
  padding: 20px 24px;
  font-size: 14px;
  color: #64748b;
  line-height: 1.8;
  margin-top: 10px;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .tracks-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tracks-container {
    grid-template-columns: 1fr;
  }
}

/* ================= HERO BADGE (IEEE SPONSORED CONFERENCE) ================= */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  padding: 10px 26px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 22px;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.2);
  animation: heroBadgePulse 2.4s ease-in-out infinite;
}

.hero-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f43f5e;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.9);
}

/* ================= HERO HEADLINE (DESKTOP, EYE-CATCHING) ================= */
.hero-content h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.hero h2 {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.25;
  color: #ff2020;
  -webkit-text-stroke: 1.5px rgba(20, 0, 0, 0.85);
  paint-order: stroke fill;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(0, 0, 0, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.95),
    0 0 34px rgba(255, 30, 30, 0.85);
}

/* ================= IEEE TAG (HERO HEADING) ================= */
.ieee-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-amber));
  color: #1a1200;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: 2px;
  padding: 6px 18px;
  border-radius: 8px;
  vertical-align: middle;
  margin-right: 12px;
  box-shadow: 0 3px 14px rgba(245, 158, 11, 0.55);
  text-shadow: none;
  position: relative;
  top: -4px;
}

/* ================= "INTERNATIONAL" HIGHLIGHT ================= */
.intl-highlight {
  font-size: 1.12em;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.75);
}

@media (max-width: 768px) {
  .ieee-tag {
    font-size: 0.6em;
    padding: 4px 12px;
    margin-right: 8px;
    top: -2px;
  }
  .intl-highlight {
    font-size: 1.08em;
  }
}

@keyframes heroBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 14px 34px rgba(245, 158, 11, 0.75), 0 0 0 7px rgba(255, 255, 255, 0.28);
  }
}

@media (max-width: 600px) {
  .hero-badge {
    font-size: 10.5px;
    padding: 8px 18px;
    letter-spacing: 1px;
    margin-bottom: 14px;
  }
}

/* ================= HERO CTA BUTTONS ================= */

.hero-cta-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.hero-btn-filled {
  background: linear-gradient(135deg, #0d9488, #115e59);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.45);
}

.hero-btn-filled:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 148, 136, 0.55);
}

.hero-btn-outline {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  transform: translateY(-3px);
}

@media (max-width: 600px) {
  .hero-cta-buttons {
    margin-top: 18px;
    gap: 12px;
  }
  .hero-btn {
    padding: 11px 22px;
    font-size: 13px;
  }
}

/* ================= SUBMIT CTA SECTION (buttons + icons) ================= */

.submit-cta {
  text-align: center;
  padding: 90px 8%;
  background: #ffffff;
}

.submit-cta h2 {
  margin-bottom: 18px;
}

.submit-cta p {
  max-width: 650px;
  margin: 0 auto 35px;
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
}

.submit-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cta-btn-filled {
  background: linear-gradient(135deg, #0d9488, #115e59);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.35);
}

.cta-btn-filled:hover {
  background: linear-gradient(135deg, #115e59, #134e4a);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 148, 136, 0.45);
  color: #ffffff;
}

.cta-btn-outline {
  background: #ffffff;
  color: #115e59;
  border: 2px solid #115e59;
}

.cta-btn-outline:hover {
  background: #115e59;
  color: #ffffff;
  transform: translateY(-3px);
}

@media (max-width: 600px) {
  .submit-cta {
    padding: 60px 6%;
  }
  .submit-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .cta-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ================= IEEE LOGO IN NAVBAR ================= */

.logo-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.35);
  margin: 0 4px;
  flex-shrink: 0;
}

.ieee-navbar-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  border-radius: 0;
  background: #ffffff;
  padding: 3px 6px;
  flex-shrink: 0;
}

.ieee-navbar-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

@media (max-width: 900px) {
  .logo-divider {
    display: none;
  }
  .ieee-navbar-logo {
    height: 24px;
  }
  .ieee-navbar-text {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ieee-navbar-text {
    display: none;
  }
  .ieee-navbar-logo {
    display: none;
  }
}

/* ================= HERO LOGO ROW (IEEE + IIPESS + IES) ================= */

.hero-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hero-side-logo {
  background: #ffffff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-side-logo img {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

@media (max-width: 700px) {
  .hero-logo-row {
    gap: 14px;
  }
  .hero-side-logo {
    padding: 8px 12px;
    border-radius: 10px;
  }
  .hero-side-logo img {
    height: 40px;
  }
}

@media (max-width: 480px) {
  .hero-side-logo {
    display: none;
  }
}

/* ================= SITE-WIDE MOBILE POLISH ================= */
/* Tightens spacing, type scale, and layout across every shared section
   (footer, news, organizers, welcome, about, tracks, dates, etc.) so the
   whole conference site reads cleanly on phones, not just the hero. */

@media (max-width: 768px) {

  /* ---- Section padding: desktop paddings (80-100px, 8%) are too heavy
     for phones and push content off-screen without adding real value ---- */
  .organizers-section,
  .welcome-section,
  .main-section,
  .about-section,
  .submit-cta,
  .overview-section,
  .about-nit {
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-nit {
    padding-top: 120px; /* keep clear of the fixed navbar */
  }

  /* ---- Headings: scale down the big desktop numbers ---- */
  .organizers-heading,
  .welcome-heading,
  .about-heading,
  h2 {
    font-size: 28px !important;
  }

  .organizers-heading { letter-spacing: 1px; }

  /* ---- Organizers / welcome message ---- */
  .welcome-message {
    padding: 24px;
    font-size: 15px;
  }

  .org-card.large {
    padding: 20px;
  }

  .org-content h3 {
    font-size: 20px;
  }

  /* ---- Key dates card ---- */
  .key-dates {
    padding: 22px;
  }

  /* ---- News section ---- */
  .news-section {
    padding: 40px 6%;
  }

  .left h1 {
    font-size: 32px;
  }

  .news-box {
    height: 260px;
  }

  /* ---- Tracks ---- */
  .track-card {
    padding: 22px 20px;
  }

  .track-photo {
    width: calc(100% + 40px);
    margin: -22px -20px 16px;
    height: 140px;
  }

  /* ---- Important dates cards ---- */
  .date-card {
    width: 100%;
    max-width: 320px;
  }

  .dates-container {
    gap: 14px;
  }

  /* ---- Chairs / welcome cards stack tighter ---- */
  .chair-card img {
    width: 80px;
    height: 80px;
  }

  /* ---- Footer ---- */
  .footer {
    padding: 40px 6%;
  }

  .footer-brand {
    flex-wrap: wrap;
  }

  .credits {
    font-size: 14px;
  }

  /* ---- Generic content containers used on inner pages
     (organising.html, contact.html, register.html, etc.) ---- */
  .container {
    width: 94%;
  }

  .about-container {
    padding: 0 4%;
  }
}

@media (max-width: 480px) {

  .organizers-heading,
  .welcome-heading,
  .about-heading,
  h2 {
    font-size: 24px !important;
  }

  .left h1 {
    font-size: 26px;
  }

  .welcome-message {
    padding: 18px;
    font-size: 14px;
  }

  .org-card.large {
    padding: 16px;
  }

  .org-card.large img {
    width: 70px;
    height: 70px;
  }

  .footer {
    padding: 32px 5%;
  }

  .footer-col h3 {
    font-size: 17px;
  }

  .track-card h3 {
    font-size: 17px;
  }

  .submit-cta h2,
  .submit-cta-buttons {
    padding: 0 4px;
  }
}