/* General */
:root{
  --blue-900:#003049;
  --purple-900:#800693;
  --blue-700:#1565c0;
  --blue-500:#1976d2;
  --deep-navy: #0a1a2f;
  --vibrant-red: #E60026;
  --muted:#6b7280;
  --page-pad:20px;
}

/* Prevent horizontal overflow globally */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

*{box-sizing:border-box}
/*html,body{height:100%;margin:0;font-family: "Segoe UI", Roboto, Arial, sans-serif;background:#f4f7fb;color:#222} */
a{color:inherit;text-decoration:none}

/* ============================
   MAIN CONTENT WIDTH CONTROL
============================ */
.main-content {
  max-width: 1200px;   /* adjust if you want wider/narrower */
  margin: 0 auto;      /* center on large screens */
  width: 100%;         /* responsive on small screens */
  /*padding: 20px;*/       /* spacing */
  padding: clamp(8px, 2vw, 20px);
}

/* ============================
   Header Logo Fix
============================ */
.header {
  display:block;   /* or simply remove "display:flex" */
  width: 100%;     /* ensures full width */
  /*background:#35c7b6; */
  background: linear-gradient(180deg, #003049, #1976d2, #35c7b6);
  /*background: linear-gradient(180deg, #35c7b6, #003049,#35c7b6);*/
 /* background: linear-gradient(90deg, #003049, #1976d2);*/
 /* border: 4px solid purple; */
  border: 6px solid transparent;
  border-image: linear-gradient(90deg, #003049, #1976d2, #5a0639) 1;
  border-radius: 12px;
  padding: 5px;
  /*margin: 4px 0;*/
  margin-top: -21px;
  margin-bottom: 4px;
  margin-left: 0;
  margin-right: 0;
}

.side-logo {
  display: flex;
  flex-shrink: 0; 
  align-items: center;
  justify-content: center;
}

/* Wrapper holding the header content */
.header-wrapper {
  width: 100%;
  max-width: 1200px;   /* Prevents over-stretching on large screens */
  padding: 0 20px; 
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 8px;           /* Space between logo and title */
  flex-wrap: nowrap;   /* <--- Prevents elements from going to next line */
}

/* Circular logos */
.circle-logo {
  width: 160px;          /* Fixed size – adjust as needed */
  height: 160px;         /* Fixed size – stays perfect circle */
  border-radius: 50%;
  object-fit: contain;   /* Prevents distortion even for large images */
  object-position: right;
  padding: 2px;
  background: white;     /* Optional: clean background */
  border: 3px solid var(--deep-navy);  /* Optional: color palette border */
  flex-shrink: 0;
}

.rect-logo {
  width: 600px;            /* adjust width as needed */
  height: 160px;           /* rectangular height */
  border-radius: 0px;     /* subtle rounding (modern look) */
  object-fit: contain;     /* prevents distortion */
  object-position: center;
  padding: 2px;
  background: transparent;
  border: 0px solid var(--deep-navy);
  flex-shrink: 0;
}

/* Title block */
.title-block {
  text-align: center;
  max-width: 70%;
  flex: 1;
  flex-grow: 1; 
  line-height: 1.2;
}

/* Bigger text as requested */
.conf-intro {
  font-size: 1.3rem;
  font-family: 'Pacifico', cursive;
  font-weight: 800;
  color: #d4a017;
  
}
.conf-title {
  font-size: 3.4rem;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  color: white;
  text-shadow:
  0px 2px 4px rgba(88, 7, 7, 0.35),
    0px 0px 6px rgba(89, 6, 6, 0.25);
  /*text-shadow: 0px 3px 6px rgba(0,0,0,0.18); */
  /* background: linear-gradient(to bottom, #ffffff 40%, #dce9ff 100%);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block; */
  
}
.conf-short {
  font-size: 3.4rem;
  /*font-family: 'Exo 2', sans-serif; */
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  color: white;
  text-shadow:
  0px 2px 4px rgba(88, 7, 7, 0.35),
    0px 0px 6px rgba(36, 23, 23, 0.25);
  
}

.conf-sub {
  font-size: 2.3rem;
  font-family: 'Pacifico', cursive;
  color: #e86a5f;;
}

.conf-inst {
  font-size: 1.6rem;
  font-family: 'Pacifico', cursive;
  color: var(--deep-navy);
  font-weight: 700
}

.conf-intro,
.conf-title,
.conf-short,
.conf-sub,
.conf-inst {
  margin: 3px 0;     /* reduces the vertical gap */
  line-height: 1.2;  /* makes text pack tighter */
}

/* -----------------------------
 Mobile Responsive Behavior
------------------------------ */
@media (max-width: 850px) {

  .header-wrapper {
      flex-direction: column;
      text-align: center;
      gap: 10px;
  }

  .circle-logo {
      width: 120px;
      height: 120px;
  }

  .title-block {
      max-width: 100%;
  }

  .conf-title {
      font-size: 2rem;
  }
}

.hamburger{
  display:none;
  background:transparent;border:0;color:#fff;padding:8px;cursor:pointer;font-size:20px;
}
/* Nav */
.navbar{
  background:var(--blue-700);
  color:#fff;
  display:flex;
  align-items:center;
  padding:8px 20px;
}
.navbar a {
  font-weight: 600;
}

.nav-left, .nav-links {display:flex;gap:24px;align-items:center}

.nav-links a{   
  padding:10px 14px;border-radius:6px;color:#fff;font-weight:600;font-size:15px;
}

.nav-links a:hover{background:var(--blue-900)}

.nav-left a:hover{background:var(--blue-900)}

/* Hamburger for small screens */

.nav-links a.active {
  /*background: #1b7f8a;   /* premium teal highlight */
  /*color: #fff;
  padding: 6px 12px;
  border-radius: 6px; */
  background: linear-gradient(90deg, #2b5876, #4e4376);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
}

@media (max-width: 900px){
  .nav-left{
    display: flex;
    align-items:center;
    flex: 1;      
  }
}

/* Cover */
.cover{
  height:340px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  color:#fff;
  position:relative;
  overflow: hidden;
 /* border: 2px solid red;*/
}
.cover::after{
  content:"";
  /* position:absolute;inset:0;background:linear-gradient(180deg, rgba(31, 126, 135, 0.45), rgba(13, 144, 161, 0.6)); */
  position:absolute;inset:0; 
}
.cover-inner{
  position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;
}
.cover .left{flex:1}
.cover .right{flex:1;text-align:right}
.cover h2{margin:0;font-size:32px}
.cover p{margin:8px 0 0;font-size:16px;color:rgba(255,255,255,0.95)}

.bottom-left,
.bottom-right {
  position: absolute;
  bottom: -160px;     /* distance from bottom */
  color: rgb(18, 16, 18);
  max-width: 45%;
}

.bottom-left {
  left: 20px;       /* pushes to bottom-left */
}

.bottom-right {
  right: 20px;      /* pushes to bottom-right */
  text-align: right;
}

/* Scroll text container */
.scroll-text-wrapper {
  position: absolute;
  bottom: 20px;       /* distance from bottom of cover */
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
}

/* Actual scrolling text */
.scroll-text {
  display: inline-block;
  font-family: 'Poppins', sans-serif;  /* modern font */
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow:
    0 0 6px rgba(214, 179, 52, 0.7),
    0 0 12px rgba(226, 192, 23, 0.8),
    0 0 20px rgba(216, 162, 13, 0.7);

  /* Shiny gradient text */
  /*background: linear-gradient(90deg, #fffbd5, #ffe7a1, #ffeb70, #fffbd5); */
  background: linear-gradient(90deg,#d9e4f5, #eef2f3, #ced9e0, #d9e4f5);
  -webkit-background-clip: text;
  color: transparent;

  padding-left: 100%;   /* start from right */
  animation: scroll-left 14s linear infinite;
}

/* Right → Left animation */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


/* Container */
.container{max-width:1200px;margin:12px auto;padding:0}
.section{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.section h2{color:var(--purple-900);margin-top:0;border-left:4px solid var(--blue-500);padding-left:10px}

/* Grid utilities */
.grid{display:grid;gap:16px}
.grid.cols-5{grid-template-columns:repeat(5,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{padding:14px;border-radius:8px;border:1px solid #eef3fb;background:#fff}
.card img{width:100%;height:280px;object-fit:cover;border-radius:6px;margin-bottom:10px}
.card a {
  display: block;
}
.section .card strong {
  color: #d7263d;
  font-weight: 700;
  font-size: 1.3rem;
}
.section .card pname {
  color: #275f6b;
  font-weight: 700;
}

/* --- Special Styling for About the Conference Section --- */
.about-section {
  font-family: 'Inter', 'Poppins', 'Nunito', sans-serif;
  color: #245b46;
  font-size: 18.5px;
  line-height: 1.75;
  background: #f6fbf9;
  padding: 28px 30px;
  border-radius: 12px;
  margin-top: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  border-left: 6px solid #2f7057;

  /* NEW: Justify text (not centered) */
  text-align: justify;
  text-justify: inter-word;
}

/* Heading */
.about-section h2 {
  color: #1e4d3c;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align: left;   /* Heading stays left-aligned */
}

/* Remove drop-cap */
.about-section p:first-of-type::first-letter {
  all: unset;
}

/* Two-column layout wrapper */
.about-section.two-column {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* Left text (80%) */
.about-section .about-text {
  flex: 1 1 72%;
}

/* QR card (20%) */
.qr-card {
  flex: 0 0 26%;
  display: flex;
  justify-content: center;
}

.qr-inner {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
}

.qr-inner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.qr-inner p {
  margin-top: 6px;
  font-size: 14px;
  color: #333;
}

/* Responsive behaviour */
@media (max-width: 820px) {
  .about-section.two-column {
    flex-direction: column;
  }
  .about-section .about-text,
  .qr-card {
    flex: 100%;
  }
  .qr-card {
    margin-top: 20px;
  }
}

/* =========================
   Cartoon Notice Board
   ========================= */

.notice-section {
  text-align: center;
}

.notice-board {
  position: relative;
  max-width: 900px;
  margin: 20px auto;
  padding: 30px 20px 25px;
  background: #fff3cd;
  border: 6px solid #8b5a2b;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-family: 'Poppins', sans-serif;
}

/* Wooden pins */
.pin {
  position: absolute;
  top: -14px;
  width: 18px;
  height: 18px;
  background: crimson;
  border-radius: 50%;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.4);
}

.pin-left { left: 20%; }
.pin-right { right: 20%; }

/* Blinking red news */
.breaking-news {
  color: #d7263d;
  font-weight: 700;
  margin-bottom: 18px;
  animation: blink 1.2s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Notice list */
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-list li {
  background: #ffffff;
  margin: 10px auto;
  padding: 12px 16px;
  max-width: 600px;
  border-left: 6px solid #1b6ec2;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.notice-list li strong {
  display: block;
  color: #1b6ec2;
  font-size: 1.05rem;
}

.notice-list li span {
  font-size: 0.95rem;
}

/* Mobile */
@media (max-width: 600px) {
  .notice-board {
    padding: 20px 14px;
  }

  .notice-list li {
    font-size: 0.95rem;
  }
}
/* =========================
   Bottom blinking download link
   ========================= */

.blinking-download {
  margin-top: 20px;
  padding: 10px 14px;
  background: #ffe6e6;
  border: 2px dashed #26b7d7;
  border-radius: 10px;
  font-weight: 700;
  animation: blink 1.1s infinite;
}

.blinking-download a {
  color: #26b7d7;
  text-decoration: none;
}

.blinking-download a:hover {
  text-decoration: underline;
}


/* --- Themes / Research Buttons (Uniform Size) --- */

.themes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 10px;
}

.theme-pill {
  width: 320px;             /* FIXED UNIFORM WIDTH */
  background: linear-gradient(135deg, #2f7c82, #3a6f78);
  color: #ffffff;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 40px;
  text-align: center;
  line-height: 1.3;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  cursor: default;
  transition: all 0.25s ease;
}

.theme-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  background: linear-gradient(135deg, #3fa0a8, #2e636a);
}

/* Footer */
/*.footer{background:var(--blue-900);color:#fff;padding:18px 20px;text-align:center;margin-top:30px}*/

.footer {
  background: var(--blue-900);
  color: #fff;
  padding: 12px 14px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;   /* <--- This evenly spaces all lines */
}

.footer .social-links {
  margin: 0;   /* remove default margin */
}

/* Responsive */
@media (max-width:768px){
  .cover{height:260px}
  .cover h2{font-size:24px}
  .cover-inner{flex-direction:column;align-items:flex-start}
  .grid.cols-1{grid-template-columns:repeat(1,1fr)}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .grid.cols-4{grid-template-columns:repeat(3,1fr)}
  .grid.cols-5{grid-template-columns:repeat(4,1fr)}
}
/* =========================
   Navigation options for Mobile
   ========================= */
@media (max-width:768px){

.navbar{
    position: relative;
  }

.hamburger{
  display:inline-block;
  margin-left: auto;
  font-size: 24px;
  cursor: pointer;
}

  .nav-links {
    display:inline-block;
  }

  .nav-links.mobile-open{
    display:flex;
    flex-direction:column;
    padding:10px;
    background:var(--blue-700);
    position:absolute;
    top:56px;
    left:0;
    right:0;
    padding: 10px 20px;
    z-index:40;
  }
  .nav-links.mobile-open a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
}

@media (max-width:600px){
  .header img.logo-img{height:48px}
  .header .title h1{font-size:16px}
  .cover{height:220px}
  .grid.cols-5{grid-template-columns:1fr}
  .grid.cols-4{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .grid.cols-1{grid-template-columns:1fr}
}

body {
  background-color: #FDF0D5; /* cream background site-wide */
  color: var(--deep-navy);
  line-height: 1.6;
  font-family: "Inter", sans-serif;
  margin: 0;
}

/* Make cards stand out on the cream background */
.card, .section, .hero-content {
  background: #ffffff;            /* keep content panels white for contrast */
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 18px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  color: #275f6b;  /* a premium dark teal to match your design */
  letter-spacing: 0.5px;
}

/* For larger section containers that were previously plain, you can instead use a softer cream border */
.section.soft {
  background: rgba(255,255,255,0.85);
  border-left: 6px solid var(--soft-blue);
  padding: 22px;
  border-radius: 8px;
}

.social-links {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.social-icon svg {
  fill: white;           /* change to your footer text color */
  transition: 0.2s ease;
}

.social-icon:hover svg {
  opacity: 0.7;
}

.social-links {
  margin-top: 20px;
  display: flex;
  gap: 18px;
  justify-content: center;
}

.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  transition: 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Premium brand colors */
.social-btn.facebook { background: #1877F2; }   /* Facebook Blue */
.social-btn.linkedin { background: #0A66C2; }   /* LinkedIn Blue */
.social-btn.twitter { background: #000000; }    /* Twitter/X Black */

/* Hover lift effect */
.social-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* THIS PART IS FOR REGISTRATION DROP-DOWN MENU */
/*.nav-links {
  display: flex;
  align-items: center;   /* ⭐ THIS fixes vertical mismatch */
/*  gap: 26px; */
/*}*/

/* FIX alignment ONLY for dropdown wrapper */
.nav-dropdown {
  display: flex;
  align-items: center;   /* ⭐ Ensures same baseline */
  position: relative;
}

/* ===== Dropdown ===== */
.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Desktop dropdown */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 220px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 999;
}

/* Desktop hover */
@media (min-width: 769px) {
  .nav-dropdown:hover .dropdown-menu {
    display: block;
  }
}

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #123;
  font-weight: 500;
}

.dropdown-menu a:hover {
  background: #f0f4fa;
}

/* Mobile dropdown */
@media (max-width: 768px) {
  .dropdown-menu {
    display: none;
    position: static;
    box-shadow: none;
  }

  .dropdown-menu.open {
    display: block;
  }
}

/* THIS PART IS FOR REGISTRATION TABLES */
  .reg-card {
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .reg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Inter", sans-serif;
    font-size: 15px;
  }

  .reg-table th {
    background-color: #f6f6f6;
    color: #ff006a;
    text-align: center;
    font-weight: 600;
    padding: 14px;
    border-bottom: 1px solid #ddd;
  }

  .reg-table td {
    text-align: center;
    padding: 14px;
    border-bottom: 1px solid #eee;
  }
  .reg-table th,
  .reg-table td {
    border: 1px solid #e0e0e0;
  }

  .reg-table tr:nth-child(even) {
    background-color: #fafafa;
  }

  .reg-table tr:hover {
    background-color: #f0f4ff;
  }
/* TO MAKE DOWNLOAD TEXT NAVY BLUE */
  .btn-primary {
  color: #85a30f; /* navy blue text */
}

/* THIS PART IS FOR ACCOMODATION PHOTOS */
  .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
  width: 100%;
}

.photo-card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  padding: 0;
  position: relative;
}

.photo-card img {
  width: 100%;
  height: auto;              /* KEY FIX */
  aspect-ratio: 4 / 3;       /* keeps rectangle */
  object-fit: cover;
  border-radius: 8px;
}

/* Label styling */
.photo-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
}
/* THIS PART IS FOR VENUE PHOTOS */
  .photo-grid-venue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
  width: 100%;
}

.photo-card-venue {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  padding: 0;
  position: relative;
}

.photo-card-venue img {
  width: 100%;
  height: auto;              /* KEY FIX */
  aspect-ratio: 5 / 3;       /* keeps rectangle */
  object-fit: cover;
  border-radius: 8px;
}

/* Label styling */
.photo-label-venue {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
}

.committee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.committee-list {
  list-style: none;
  padding-left: 0;
}

.committee-list li {
  font-size: 18px;
  padding: 6px 0;
  display: flex;
  align-items: center;
}

.committee-list .icon {
  color: #1b3a8a;
  margin-right: 10px;
  font-size: 18px;
}
/*-----------------------*/
/* SPONSORS TABLE PART */
/*----------------------*/
.sponsorship-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.sponsorship-table th {
  background: #f2f7fb;
  color: #0b3c5d;
  padding: 12px;
  text-align: center;
  border: 1px solid #d6e0ea;
}

.sponsorship-table td {
  vertical-align: top;
  padding: 14px 16px;
  border: 1px solid #e1e8ef;
}

.sponsorship-table ul {
  margin: 0;
  padding-left: 18px;
}

.sponsorship-table li {
  margin-bottom: 6px;
}

.category {
  text-align: center;
  font-weight: 700;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
}

/* Category colors */
.platinum .badge { background: #6c757d; }
.gold .badge     { background: #c9a227; }
.silver .badge   { background: #9fa8b0; }
.bronze .badge   { background: #b87333; }
.academic .badge { background: #1e88e5; }

.amount {
  text-align: center;
  font-weight: 600;
}