/* Base font setup */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #F2E8DF;
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
}


body{font-family:'Poppins', sans-serif !important; }

/* Hover effect on nav links */
nav a:hover {
  color: #d3d3d3;
  transition: color 0.3s ease-in-out;
}

/* Image hover scale effect */
img.hover\:scale-110 {
  transition: transform 0.3s ease-in-out;
}

img.hover\:scale-110:hover {
  transform: scale(1.1);
}

/* Footer text and spacing */
footer {
  background-color: #8B0000;
  color: white;
  text-align: center;
  padding: 1.5rem 0;
}

footer a {
  text-decoration: underline;
}

footer .flex a img {
  transition: transform 0.3s ease-in-out;
}

footer .flex a:hover img {
  transform: scale(1.1);
}

/* Hamburger bar animations */
#menu-toggle span {
  background-color: white;
  height: 3px;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  transition: all 0.3s ease-in-out;
}

#bar1.rotate-45 {
  transform: rotate(45deg);
  top: 10px !important;
}

#bar2.opacity-0 {
  opacity: 0;
}

#bar3.-rotate-45 {
  transform: rotate(-45deg);
  top: 10px !important;
}

#mobile-menu a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
}

[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos][data-aos-delay] {
  transition-delay: var(--aos-delay, 0ms);
}

audio {
  outline: none;
  border-radius: 6px;
}


:root{
  --maroon:#8B0000;
  --dark:#111;
  --muted:#666;
  --soft:#f7f7f7;
  --card:#ffffff;
  --border:#e6e6e6;
  --gold:#d4af37;
  --silver:#c0c0c0;
  --bronze:#cd7f32;
}

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

body{
  background:#fff;
  color:#111;
  overflow-x:hidden;
  font-family:'Poppins', sans-serif;
  font-size:16px;
  font-weight:500;
}

/* ===== HEADER ===== */
header{
  background:var(--maroon);
  color:white;
  padding:12px 6.5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:140px;
}

.brand img{
  width:56px;
  height:56px;
  border-radius:0px;
  background:transparent;
  padding:0px;
  flex-shrink:0;
  object-fit:contain;
  display:block;
  margin-bottom:-2px;
}

.brand h1{
  font-size:23px;
  line-height:1;
  font-weight:900;
  letter-spacing:0.5px;
  white-space:nowrap;
}

nav ul{
  display:flex;
  gap:10px;
  list-style:none;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

nav a{
  color:white;
  text-decoration:none;
  font-weight:600;
  font-size:17px;
  transition:0.25s;
  padding:6px 8px;
  border-radius:10px;
  white-space:nowrap;
  line-height:1;
}

nav a:hover{
  background:rgba(255,255,255,0.14);
}

nav a.active{
  font-weight:900;
  text-decoration:underline;
  color:#dcdcdc;
  background:rgba(255,255,255,0.12);
}

/* Mobile Nav */
.menu-btn{
  display:none;
  cursor:pointer;
  font-size:24px;
  font-weight:900;
  user-select:none;
}

@media(max-width: 980px){
  nav{
    position:absolute;
    top:76px;
    right:6.5%;
    background:var(--maroon);
    width:88%;
    max-width:380px;
    border-radius:18px;
    padding:18px 16px;
    transform:translateY(-18px);
    opacity:0;
    pointer-events:none;
    transition:0.25s ease;
    box-shadow:0 18px 40px rgba(0,0,0,0.25);
  }

  nav.active{
    transform:translateY(0px);
    opacity:1;
    pointer-events:auto;
  }

  nav ul{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
  }

  nav a{
    font-size:18px;
    padding:8px 12px;
  }

  .menu-btn{
    display:block;
  }
}

.synapse-footer{
  background: var(--maroon);
  color: white;
  text-align: center;
  padding: 22px 6.5%;
  margin-top: 40px;
}

.footer-line-1{
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-line-2{
  font-size: 16px;
}

.footer-email{
  color: white;
  text-decoration: underline;
  font-weight: 700;
}

.footer-icons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 10px;
}

.footer-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon{
  transition: transform 0.25s ease;
}

.icon:hover{
  transform: scale(1.12);
}

.icon.insta{
  height: 40px;
  width: 40px;
}

.icon.linkedin{
  height: 32px;
  width: 32px;
}

.icon.linktree{
  height: 56px;
  width: 56px;
}

.synapse-header,
.synapse-header *{font-family: 'Poppins', sans-serif !important;}


.hero{
  padding:44px 6.5% 32px;
  background:linear-gradient(135deg, rgba(139,0,0,0.12), rgba(0,0,0,0.02));
  border-bottom:1px solid var(--border);
}

.hero h2{
  font-size:38px;
  font-weight:900;
  color:var(--maroon);
  letter-spacing:0.2px;
}

.hero p{
  margin-top:10px;
  font-size:17px;
  color:var(--muted);
  max-width:980px;
  line-height:1.8;
}

.wrap{
  display:grid;
  grid-template-columns: 185px 1fr;
  gap:22px;
  padding:28px 6.5% 56px;
  background:#fff;
}

@media(max-width: 950px){
  .wrap{
    grid-template-columns:1fr;
  }
}

.year-nav{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  height:fit-content;
  box-shadow:0 18px 40px rgba(0,0,0,0.06);
  position:sticky;
  top:105px;
}

.year-nav h3{
  font-size:13px;
  font-weight:900;
  color:var(--dark);
  margin-bottom:10px;
  letter-spacing:0.4px;
}

.year-btns{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.year-btn{
  border:1px solid var(--border);
  background:#fff;
  padding:7px 10px;
  border-radius:14px;
  font-weight:900;
  font-size:15px;
  font-family:'Poppins', sans-serif; 
  cursor:pointer;
  transition:0.25s ease;
  display:flex;
  justify-content:space-between;
  align-items:center;
  line-height:1;
}

.year-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(139,0,0,0.35);
  box-shadow:0 14px 32px rgba(139,0,0,0.12);
}

.year-btn.active{
  background:var(--maroon);
  color:white;
  border-color:var(--maroon);
}

.year-btn small{
  font-weight:800;
  opacity:0.85;
  font-size:12px;
  font-family:'Poppins', sans-serif;
}

@media(max-width: 950px){
  .year-nav{
    position:relative;
    top:auto;
  }
  .year-btns{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
  }
  .year-btn{
    width:110px;
  }
}

.content{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}

.champ-shell{
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(139,0,0,0.08), rgba(255,255,255,0.95));
  padding:22px 20px;
  box-shadow:0 18px 45px rgba(0,0,0,0.08);
  position:relative;
  overflow:hidden;
  min-width:0;
}

.edition-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
  min-width:0;
}

.edition-head h3{
  font-size:26px;
  font-weight:900;
  color:var(--maroon);
  max-width:100%;
  word-break:break-word;
}

.edition-head p{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.trophy-tag{
  position:relative;
  background:var(--maroon);
  color:white;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  letter-spacing:0.6px;
  box-shadow:0 14px 34px rgba(139,0,0,0.25);
  white-space:nowrap;
  overflow:hidden;
}

.trophy-tag::before{
  content:"";
  position:absolute;
  inset:-8px;
  background:radial-gradient(circle at 30% 30%, rgba(212,175,55,0.75), transparent 55%),
             radial-gradient(circle at 70% 70%, rgba(255,255,255,0.18), transparent 55%);
  filter:blur(10px);
  opacity:0.75;
  animation:auraPulse 2.4s ease-in-out infinite;
  z-index:-1;
}

@keyframes auraPulse{
  0%, 100% { transform:scale(1); opacity:0.6; }
  50% { transform:scale(1.08); opacity:0.95; }
}

.block{
  margin-top:16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  min-width:0;
}

.block h4{
  font-size:18px;
  font-weight:900;
  color:var(--dark);
  margin-bottom:10px;
}

.block p{
  color:#333;
  font-size:16px;
  font-weight:500;
  line-height:1.9;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.score-strip{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(139,0,0,0.22);
  background:linear-gradient(135deg, rgba(139,0,0,0.10), rgba(255,255,255,0.85));
  padding:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.06);
}

.score-strip h4{
  margin-bottom:12px;
}

.strip-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

@media(max-width: 980px){
  .strip-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 520px){
  .strip-grid{
    grid-template-columns: 1fr;
  }
}

.strip-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 12px;
  box-shadow:0 14px 28px rgba(0,0,0,0.06);
}

.strip-box span{
  display:block;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:0.3px;
  margin-bottom:4px;
}

.strip-box strong{
  display:block;
  font-size:18px;
  font-weight:900;
  color:var(--dark);
}

.wall{
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(0,0,0,0.02), rgba(139,0,0,0.05));
  padding:16px;
  min-width:0;
}

.wall h5{
  font-size:16px;
  font-weight:900;
  color:var(--maroon);
  margin-bottom:12px;
  letter-spacing:0.2px;
}

.swiper{
  width:100%;
  padding:10px 0 26px;
}

.swiper-slide{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 14px 36px rgba(0,0,0,0.08);
}

.swiper-slide img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
}

@media(max-width: 600px){
  .swiper-slide img{
    height:205px;
  }
}

.champ-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

.champ-card{
  background:#fff;
  border-radius:16px;
  padding:14px 14px;
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  transition:0.25s ease;
  box-shadow:0 14px 30px rgba(0,0,0,0.06);

  width:290px;
  max-width:100%;
  flex: 1 1 260px;
  min-width:240px;
}

.champ-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.champ-card h6{
  font-size:15px;
  font-weight:900;
  margin-bottom:8px;
  color:#111;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.pos-pill{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  margin-bottom:10px;
  border:1px solid var(--border);
  background:#fff;
}

.members{
  font-size:14px;
  font-weight:700;
  color:#333;
  line-height:1.75;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.pos-1{
  border-color:rgba(212,175,55,0.55);
  box-shadow:0 0 0 2px rgba(212,175,55,0.25), 0 18px 45px rgba(212,175,55,0.25);
}
.pos-1 .pos-pill{
  border-color:rgba(212,175,55,0.75);
  color:#7a5b00;
  background:rgba(212,175,55,0.18);
}

.pos-2{
  border-color:rgba(192,192,192,0.7);
  box-shadow:0 0 0 2px rgba(192,192,192,0.25), 0 18px 45px rgba(192,192,192,0.20);
}
.pos-2 .pos-pill{
  border-color:rgba(192,192,192,0.85);
  color:#4b4b4b;
  background:rgba(192,192,192,0.20);
}

.pos-3{
  border-color:rgba(205,127,50,0.65);
  box-shadow:0 0 0 2px rgba(205,127,50,0.22), 0 18px 45px rgba(205,127,50,0.18);
}
.pos-3 .pos-pill{
  border-color:rgba(205,127,50,0.85);
  color:#6a3c10;
  background:rgba(205,127,50,0.18);
}

.confetti-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:9999;
}

.confetti{
  position:absolute;
  width:10px;
  height:14px;
  border-radius:4px;
  opacity:0.95;
  animation:fall 1.25s ease-out forwards;
  transform:translateY(-30px);
}

@keyframes fall{
  0%{
    transform:translateY(-30px) rotate(0deg);
    opacity:1;
  }
  100%{
    transform:translateY(760px) rotate(280deg);
    opacity:0;
  }
}

.menu-btn{
  display:none;
}

@media (max-width: 980px){
  .menu-btn{
    display:block !important;
    color:white !important;
    z-index:1001;
  }

  nav#navbar{
    z-index:1000;
  }
}

/* Smooth overall feel */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* Subtle futuristic text rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Glow hover effect utility (optional for cards/buttons) */
.glow-hover {
  transition: all 0.28s ease;
}

.glow-hover:hover {
  box-shadow: 0 18px 45px rgba(139, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* Glassmorphism card utility (optional for hero panels/cards) */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(139, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Futuristic button shine (works with any button element you want) */
.shine-btn {
  position: relative;
  overflow: hidden;
}

.shine-btn::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 160%;
  background: rgba(255, 255, 255, 0.35);
  transform: skewX(-18deg);
  opacity: 0;
  transition: all 0.5s ease;
}

.shine-btn:hover::after {
  left: 130%;
  opacity: 1;
}

/* Navbar hover underline animation */
#navbar a {
  position: relative;
  transition: all 0.25s ease;
}

#navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #8B0000;
  transition: width 0.25s ease;
}

#navbar a:hover::after {
  width: 100%;
}

/* Active page highlight (your JS adds "active") */
#navbar a.active {
  font-weight: 800;
  color: #666;
  text-decoration: underline;
}

/* Mobile menu open animation smoothness */
#navbar {
  transition: all 0.3s ease;
}

/* Menu button micro-animation */
.menu-btn {
  transition: transform 0.25s ease;
}

.menu-btn:active {
  transform: scale(0.92);
}

/* Card hover smoothness (if you use feature cards grid) */
.feature-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(139, 0, 0, 0.14);
}

.gqf-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transform: scale(1.01);
  transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease;
}

.gqf-img[data-loaded="true"] {
  opacity: 1;
  transform: scale(1);
}

.gqf-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}