/* =====================================================
   EXCEL 5.0 - STRANGER THINGS THEME
   Black & Red Color Scheme
   ===================================================== */

:root {
  --primary-red: #dc143c;
  --bright-red: #ff0000;
  --primary-black: #000000;
  --dark-black: #1a1a1a;
  --light-gray: #cccccc;
  --white: #ffffff;
  --archive-gold: #ffd700;
}

.archive-banner {
  position: fixed;
  top: 7.8rem;
  left: 2rem;
  right: 2rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(220, 20, 60, 0.4);
  color: #fff;
  padding: 10px 0;
  z-index: 9999;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(220, 20, 60, 0.2);
  font-family: 'Courier New', monospace;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.marquee-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
}

.marquee-item {
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.marquee-item span {
  color: var(--primary-red);
  text-shadow: 0 0 10px var(--primary-red);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Ensure page content has extra space for fixed navbar and banner */
.hero,
.page-content {
  padding-top: 13rem !important;
}

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

html {
  scroll-behavior: smooth;
  background-color: #000000;
}

body {
  font-family: "Courier New", Courier, monospace;
  background-color: transparent;
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: 0;
  margin-top: 0;
}

/* ===========================
   LOADING VIDEO OVERLAY
   =========================== */

#video-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-black);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

#video-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

#video-loader img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  animation: slideInCenter 0.8s ease-out;
}

#video-loader video {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  animation: slideInCenter 0.8s ease-out;
}

#video-loader .skip-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 15px 35px;
  background-color: var(--primary-red);
  color: var(--white);
  border: 2px solid var(--primary-red);
  border-radius: 4px;
  cursor: pointer;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

#video-loader .skip-btn:hover {
  background-color: var(--white);
  color: var(--primary-red);
  box-shadow: 0 0 30px rgba(220, 20, 60, 0.8);
  transform: scale(1.1);
}

/* ===========================
   NAVIGATION BAR
   =========================== */

nav {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  width: calc(100% - 3rem);
  background-color: var(--primary-black);
  border-bottom: 2px solid var(--primary-red);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10001;
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.3);
  border-radius: 0 0 30px 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.logo img {
  height: 65px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
  display: block;
  /* Removes extra space below inline images */
}



.logo:hover img {
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1));
  transform: scale(1.05);
}

.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
}

.nav-menu li:nth-child(5) {
  margin-left: auto;
}

.nav-menu a {
  color: var(--white);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 5px;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-red);
  transition: width 0.3s ease;
}

.nav-menu a:hover {
  color: var(--primary-red);
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-menu .nav-btn {
  padding: 10px 20px;
  background-color: var(--dark-black);
  color: var(--white);
  border: 2px solid var(--primary-red);
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.nav-btn-primary {
  background-color: var(--primary-red);
}

.nav-menu .nav-btn:hover {
  background-color: var(--white);
  color: var(--primary-black);
  text-decoration: none;
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.6);
  transform: translateY(-2px);
}

.nav-menu .nav-btn::after {
  content: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: var(--white);
  transition: all 0.3s ease;
}

/* ===========================
   HERO SECTION
   =========================== */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/stranger-things.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.2) saturate(1.3) brightness(1.1) drop-shadow(0 0 20px rgba(220, 20, 60, 0.5));
  z-index: 0;
  animation: bgPulse 8s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(220, 20, 60, 0.1) 0%, rgba(0, 0, 0, 0.4) 50%, #000000 90%);
  z-index: 1;
  box-shadow: inset 0 0 100px #000000;
}

.hero-logo {
  width: 100%;
  max-width: 900px;
  margin-bottom: 4rem;
  animation: slideInCenter 0.4s ease-out;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Atmospheric Red Nebula behind the logo */
.hero-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(220, 20, 60, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
  z-index: -2;
  filter: blur(30px);
  animation: nebulaPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes nebulaPulse {
  0% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.hero-logo-number {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'ITC Benguiat';
  font-weight: bold;
  font-size: 30rem;
  color: rgba(220, 20, 60, 0.05);
  /* Very faint red fill */
  -webkit-text-stroke: 4px var(--white);
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  filter: drop-shadow(8px 8px 0px #000000) drop-shadow(0 0 40px rgba(220, 20, 60, 0.8)) drop-shadow(0 0 80px rgba(0, 0, 0, 0.9));
  z-index: -1;
  pointer-events: none;
  animation: pulseNumber 3s ease-in-out infinite alternate;
}

@keyframes pulseNumber {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

.hero-logo img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  filter: drop-shadow(8px 8px 0px #000000) drop-shadow(0 0 50px rgba(255, 0, 0, 1)) drop-shadow(0 0 150px rgba(0, 0, 0, 1));
  animation: logoPulse 2s ease-in-out infinite alternate;
}

@keyframes logoPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(8px 8px 0px #000000) drop-shadow(0 0 40px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 120px rgba(0, 0, 0, 0.9));
  }

  100% {
    transform: scale(1.05);
    filter: drop-shadow(12px 12px 0px #000000) drop-shadow(0 0 70px rgba(255, 0, 0, 1)) drop-shadow(0 0 180px rgba(0, 0, 0, 1));
  }
}

.hero-content {
  animation: slideInTop 0.8s ease-out 0.2s backwards;
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 4rem;
  color: var(--white);
  margin-bottom: 1rem;
  text-shadow: 0 0 30px rgba(220, 20, 60, 0.8);
  letter-spacing: 3px;
}

.hero p {
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 2rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.hero-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 5rem;
}

.btn-primary,
.btn-secondary {
  padding: 15px 40px;
  font-size: 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-primary {
  background-color: var(--primary-red);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--bright-red);
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
  transform: translateY(-3px) scale(1.05);
}

.btn-secondary {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--primary-red);
}

.btn-secondary:hover {
  background-color: var(--white);
  color: var(--primary-black);
  box-shadow: 0 0 30px rgba(220, 20, 60, 0.8);
  transform: translateY(-3px) scale(1.05);
}

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

.about-excel {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.about-excel-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-excel-content {
  animation: slideInLeft 1s ease-out;
}

.about-excel-title {
  font-family: 'ITC Benguiat', serif;
  font-size: 3rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 10px rgba(220, 20, 60, 0.8));
  letter-spacing: 2px;
  line-height: 1.2;
}

.about-excel-text {
  font-size: 1.1rem;
  color: var(--light-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.about-excel-text strong {
  color: var(--white);
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
}

.highlight {
  color: var(--white);
  font-weight: bold;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.8);
}

/* ===========================
   ABOUT PAGE RESTRUCTURE
   =========================== */

.about-red-box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 4rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.about-red-box {
  background-color: var(--primary-red);
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/about/3.PNG');
  /* Dark overlay for better text visibility */
  background-size: cover;
  background-position: center;
  background-blend-mode: normal;
  /* Changed to normal to let the black overlay work, or use multiply with caution */
  color: var(--white);
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(220, 20, 60, 0.6);
  flex: 2;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 2px 2px 4px #000000, 0 0 10px rgba(0, 0, 0, 0.7);
  /* Strong black shadow */
}

.about-red-box p {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: justify;
}

.about-side-images {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

.about-side-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid var(--primary-red);
  filter: drop-shadow(0 0 15px rgba(220, 20, 60, 0.4));
  transition: transform 0.3s ease;
}

.about-side-img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(220, 20, 60, 0.8);
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 4rem auto;
}

.vm-card {
  border: 2px solid var(--primary-red);
  border-radius: 12px;
  padding: 2.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease;
}

.vm-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Dark overlay to make text readable */
  z-index: 1;
}

.vm-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 40px rgba(220, 20, 60, 0.6);
}

.vm-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.vm-title {
  font-family: 'ITC Benguiat', serif;
  font-size: 3rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
  filter: drop-shadow(0 0 5px var(--primary-red));
  margin-bottom: 2rem;
  text-transform: uppercase;
  text-align: center;
}

.vm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.vm-list li {
  margin-bottom: 1.2rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 1.1rem;
  color: var(--white);
  line-height: 1.5;
}

.vm-list li::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--primary-red);
  font-size: 0.9rem;
  top: 4px;
}

@media (max-width: 992px) {
  .about-red-box-container {
    flex-direction: column;
  }

  .about-side-images {
    flex-direction: row;
    width: 100%;
  }

  .about-side-img {
    width: 48%;
    /* fit two side by side */
  }

  .vision-mission-grid {
    grid-template-columns: 1fr;
  }
}

.about-excel-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideInRight 1s ease-out;
}

.about-excel-logo img {
  max-width: 100%;
  height: auto;
  max-height: 400px;
  filter: drop-shadow(0 0 30px rgba(220, 20, 60, 0.8));
}

/* ===========================
   EVENT DETAILS SECTION
   =========================== */

.event-details {
  padding: 6rem 2rem;
  background: #000000;
  min-height: auto;
}

.event-details-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.tagline {
  font-family: 'ITC Benguiat', serif;
  font-size: 3.5rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 15px rgba(220, 20, 60, 0.8));
  letter-spacing: 4px;
  font-weight: bold;
  text-transform: uppercase;
  animation: slideInTop 0.8s ease-out;
}

.event-subtitle {
  font-size: 1.2rem;
  color: var(--light-gray);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  animation: slideInBottom 0.8s ease-out;
}

.event-subtitle strong {
  color: var(--primary-red);
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
}

/* ===========================
/* ===========================
   EVENTS PAGE
   =========================== */
.filter-btn {
  background-color: transparent;
  color: var(--primary-red);
  border: 2px solid var(--primary-red);
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.filter-btn:hover,
.filter-btn.active {
  background-color: var(--primary-red) !important;
  color: #000000 !important;
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.6);
  transform: translateY(-2px);
}

.action-cards {
  padding: 6rem 2rem;
  background: #000000;
  min-height: auto;
  border-bottom: 2px solid var(--primary-red);
  position: relative;
  /* Optional: Add a glow effect to the line */
  box-shadow: 0 4px 20px -5px rgba(220, 20, 60, 0.5);
}

.cards-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.action-card {
  background: rgba(220, 20, 60, 0.15);
  border: 2px solid var(--primary-red);
  border-radius: 15px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
  animation: slideInTop 0.8s ease-out;
  cursor: pointer;
  /* Flexbox for equal button alignment */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.action-card.card-1 {
  animation-delay: 0s;
}

.action-card.card-2 {
  animation-delay: 0.2s;
}

.action-card.card-3 {
  animation-delay: 0.4s;
}


.card-monster {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  animation: bounce 2s infinite;
}

/* ===========================
   COUNTDOWN TIMER
   =========================== */
.countdown-section {
  text-align: center;
  margin-bottom: 3rem;
  animation: slideInDown 0.8s ease-out;
}

.fast-register-text {
  color: var(--primary-red);
  font-family: 'ITC Benguiat', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: pulseGlow 2s infinite;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.timer-block {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--primary-red);
  border-radius: 8px;
  padding: 1rem;
  min-width: 100px;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.3);
}

.timer-value {
  font-family: 'Courier New', monospace;
  font-size: 2.5rem;
  color: var(--white);
  font-weight: bold;
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.timer-label {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--primary-red);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .timer-block {
    min-width: 70px;
    padding: 0.8rem;
  }

  .timer-value {
    font-size: 1.8rem;
  }

  .timer-label {
    font-size: 0.7rem;
  }

  .fast-register-text {
    font-size: 1.5rem;
  }
}

.action-card h3 {
  color: var(--white);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.6);
}

.action-card p {
  color: var(--light-gray);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.action-card:hover {
  background: rgba(220, 20, 60, 0.25);
  box-shadow: 0 0 30px rgba(220, 20, 60, 0.6);
  transform: translateY(-10px);
}

.card-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: var(--white);
  color: var(--white);
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 2px solid var(--primary-red);
  margin-top: auto;
  /* Pushes button to the bottom */
}

.card-btn:hover {
  background-color: var(--bright-red);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  transform: scale(1.05);
}

/* ===========================
   FAQs SECTION
   =========================== */

.faqs {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  min-height: auto;
}

.faqs-container {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.faq-item {
  background: rgba(220, 20, 60, 0.1);
  border: 1px solid rgba(220, 20, 60, 0.5);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  animation: fadeInHero 0.8s ease-out;
}

.faq-item:hover {
  background: rgba(220, 20, 60, 0.15);
  border-color: var(--white);
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.4);
  transform: translateY(-5px);
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0;
}

.faq-question {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 0;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
  flex: 1;
}

.faq-toggle {
  font-size: 1.5rem;
  color: var(--white);
  font-weight: bold;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
  margin-left: 1rem;
  transition: all 0.3s ease;
}

.faq-answer {
  color: var(--white);
  line-height: 1.6;
  font-size: 0.95rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(220, 20, 60, 0.3);
  animation: slideInBottom 0.3s ease-out;
}

/* ===========================
   FEATURED EVENTS SECTION
   =========================== */

.featured-events {
  padding: 4rem 2rem;
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
}

.section-title {
  font-family: 'ITC Benguiat', serif;
  font-size: 2.5rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
  text-align: center;
  margin-bottom: 3rem;
  filter: drop-shadow(0 0 10px rgba(220, 20, 60, 0.8));
  letter-spacing: 2px;
  text-transform: uppercase;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.event-card {
  background-color: var(--primary-black);
  border: 2px solid var(--primary-red);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s ease;
  animation: cardFadeIn 0.6s ease-out backwards;
}

.event-card:nth-child(1) {
  animation-delay: 0.1s;
}

.event-card:nth-child(2) {
  animation-delay: 0.2s;
}

.event-card:nth-child(3) {
  animation-delay: 0.3s;
}

.event-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 0 40px rgba(220, 20, 60, 0.8);
  border-color: var(--bright-red);
}

.event-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card:hover img {
  transform: scale(1.1);
}

.event-card-content {
  padding: 1.5rem;
}

.event-card h3 {
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

.event-date {
  color: var(--light-gray);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.event-location {
  color: var(--light-gray);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.event-description {
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  display: none;
}

.event-card:hover .event-description {
  display: block;
}

.event-card-btn {
  background-color: var(--white);
  color: var(--primary-black);
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  transition: all 0.3s ease;
}

.event-card-btn:hover {
  background-color: var(--bright-red);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  transform: scale(1.05);
}

/* ===========================
   FOOTER
   =========================== */

footer {
  background-color: var(--primary-black);
  border-top: 2px solid var(--primary-red);
  padding: 3rem 2rem;
  margin-top: 4rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.5fr;
  /* Specific columns: Contact(wider), Links, Social, Location(widest) */
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h4 {
  color: var(--white);
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

.footer-section p {
  color: var(--light-gray);
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: var(--white);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-section a:hover {
  color: var(--primary-red);
  padding-left: 5px;
}

.contact-label {
  color: var(--primary-red);
  font-weight: bold;
  margin-right: 5px;
  display: inline-block;
  min-width: 70px;
  /* Aligns content neatly */
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid var(--primary-red);
  padding-top: 2rem;
  color: var(--light-gray);
}

.footer-bottom p {
  margin-bottom: 0.5rem;
}

.developed-by {
  color: var(--white);
  font-weight: bold;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

/* ===========================
   GENERIC PAGE SECTIONS
   =========================== */

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  /* Centering */
  margin-top: 8rem;
  /* Clear fixed navbar on Desktop */
  padding: 4rem 2rem;
}

.content-section {
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s ease-out;
}

.content-section h2 {
  color: var(--white);
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.6);
}

.content-section h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin: 1.5rem 0 0.5rem 0;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

.content-section p {
  color: var(--white);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* ===========================
   TEAM SECTION
   =========================== */

/* Team Grid - 4 Columns */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.team-card {
  perspective: 1000px;
  background-color: transparent;
  width: 100%;
  height: 450px;
  animation: cardFadeIn 0.6s ease-out backwards;
}

.team-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
  background-color: var(--dark-black);
  border: 2px solid var(--primary-red);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.2);
}

.team-card:hover .team-card-inner {
  transform: rotateY(5deg) rotateX(2deg) scale(1.02);
  box-shadow: 0 20px 40px rgba(220, 20, 60, 0.4);
  border-color: var(--bright-red);
}

.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s ease;
  display: block;
  filter: brightness(0.9);
}

.team-card:hover img {
  transform: scale(1.1);
  filter: brightness(0.7);
}

/* Content Panel - Small Pop */
.team-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 40%, rgba(0, 0, 0, 0.6) 100%);
  transform: translateY(58%);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
  /* Limit height & pop */
  max-height: 55%;
}

.team-card:hover .team-card-content {
  transform: translateY(0);
}

.team-card h3 {
  color: var(--white);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px rgba(220, 20, 60, 0.8);
  /* Name always visible, no transform */
  transform: none;
  opacity: 1;
}

.team-position {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1px;
  /* Position always visible too */
  transform: none;
  opacity: 1;
}

.team-bio {
  color: #cccccc;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  opacity: 0;
  /* Add opacity transition for smoother reveal */
  transition: opacity 0.3s ease;
}

.team-card:hover .team-bio {
  opacity: 1;
}

.social-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.team-card:hover .social-links {
  opacity: 1;
}

.social-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.social-links a:hover {
  color: var(--white);
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.team-card:nth-child(1) {
  animation-delay: 0.1s;
}

.team-card:nth-child(2) {
  animation-delay: 0.2s;
}

.team-card:nth-child(3) {
  animation-delay: 0.3s;
}

.team-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* ===========================
   ACTION BUTTONS SECTION
   =========================== */

.action-buttons-section {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  margin: 2rem 0;
  background: rgba(220, 20, 60, 0.1);
  border: 2px solid var(--primary-red);
  border-radius: 20px;
  animation: slideInUp 0.8s ease-out;
}

.action-button {
  padding: 1rem 2rem;
  background-color: var(--white);
  color: var(--primary-black);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  min-width: 150px;
}

.action-button:hover {
  background-color: var(--bright-red);
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
  transform: scale(1.05);
}

.action-button:active {
  transform: scale(0.98);
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 768px) {
  nav {
    flex-direction: row;
    padding: 1rem;
    width: calc(100% - 2rem);
    align-items: center;
  }

  .logo {
    flex-shrink: 0;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 1rem);
    left: 1.5rem;
    right: 1.5rem;
    background-color: var(--primary-black);
    flex-direction: column;
    gap: 0.5rem;
    width: calc(100% - 3rem);
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 0 0 20px 20px;
    border: 2px solid var(--primary-red);
    z-index: 9999;
    animation: slideInDown 0.3s ease-out;
  }

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

  .nav-menu li {
    margin: 0.75rem 0;
  }

  .nav-menu li:nth-child(5) {
    margin-left: 0;
  }

  .nav-menu a {
    color: var(--white);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .nav-menu a:hover {
    color: var(--white);
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
  }

  .nav-btn-primary {
    background-color: var(--white);
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    margin-left: auto;
    width: 30px;
    z-index: 10000;
    order: 4;
  }

  .hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--white);
    transition: all 0.3s ease;
    display: block;
  }

  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  .hero-logo {
    max-width: 300px;
    margin-bottom: 2rem;
  }

  .hero-logo img {
    max-height: 250px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons-section {
    gap: 1rem;
    padding: 1.5rem;
    flex-direction: column;
    margin: 2rem 1rem;
  }

  .action-button {
    width: 100%;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
    min-width: unset;
  }

  /* Team Card Visibility Fixes for Mobile/Tablet */
  .team-card-content {
    /* Show only the top portion (Name + Position) by default (~100px peek) */
    transform: translateY(calc(100% - 100px)) !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0.7) 100%) !important;
    justify-content: flex-end;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* Reveal Full Content on Hover/Tap */
  .team-card:hover .team-card-content,
  .team-card:active .team-card-content,
  .team-card:focus-within .team-card-content {
    transform: translateY(0) !important;
  }

  .team-card h3 {
    white-space: normal !important;
    word-wrap: break-word;
    /* Ensure long names wrap */
    padding-right: 0;
    font-size: 1.2rem !important;
  }

  .team-position {
    margin-bottom: 0.5rem;
  }

  /* Hide Bio/Links initially */
  .team-bio,
  .social-links {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
  }

  /* Show Bio/Links on Hover/Tap */
  .team-card:hover .team-bio,
  .team-card:hover .social-links,
  .team-card:active .team-bio,
  .team-card:active .social-links {
    opacity: 1 !important;
  }
}

@media (max-width: 480px) {
  nav {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: auto;
    position: relative;
  }

  .logo img {
    height: 45px;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--primary-black);
    border-radius: 0 0 20px 20px;
    border-bottom: 2px solid var(--primary-red);
    border-left: none;
    border-right: none;
    border-top: none;
    z-index: 9999;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
  }

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

  .nav-menu li {
    margin: 0.5rem 0;
  }

  .nav-menu a {
    color: var(--white);
    font-size: 1rem;
    padding: 0.5rem 0;
  }

  .nav-menu a.nav-btn {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--primary-red);
  }

  .nav-menu li:nth-child(5) {
    margin-left: 0;
  }

  .hamburger {
    display: flex;
    width: 25px;
    gap: 4px;
    order: 4;
  }

  .hamburger span {
    width: 25px;
    height: 2px;
  }

  .hero {
    padding: 2rem 0;
    min-height: 70vh;
    margin-top: 2rem;
  }

  .hero-logo {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .hero-logo img {
    width: 90%;
    max-height: 50vh;
  }

  .hero-logo-number {
    font-size: 18rem;
  }

  /* Disable heavy background effects on mobile to prevent lag */
  .hero::before {
    filter: none !important;
    animation: none !important;
  }

  .tagline {
    font-size: 1.8rem;
    letter-spacing: 1px;
    line-height: 1.3;
  }

  .event-subtitle {
    font-size: 0.9rem;
  }

  .action-card {
    padding: 1.2rem 0.8rem;
    min-height: 200px;
  }

  .action-card h3 {
    font-size: 1.2rem;
  }

  /* Event Card Mobile Fixes */
  .event-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.5rem;
  }

  .event-card-logo-small {
    margin-left: 0;
    margin-bottom: 1rem;
  }

  .event-card h3 {
    font-size: 1.4rem;
  }

  /* Registration Form Mobile Overflow Fix */
  .event-title {
    font-size: 1.1rem;
    flex-wrap: wrap;
  }

  .event-subtitle {
    font-size: 1rem;
    margin-top: 5px;
  }

  .form-group input,
  .form-group select {
    font-size: 0.9rem;
    padding: 12px;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }

  .card-description {
    font-size: 0.85rem;
  }

  .action-card button {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    width: auto;
    align-self: center;
  }

  /* Center Event Cards on Mobile */
  .event-card {
    text-align: center;
    align-items: center;
  }

  .event-card-btn {
    width: auto;
    margin-top: 1rem;
  }

  .event-card-info {
    align-items: center;
  }

  .page-content {
    padding: 1.5rem 1rem;
    margin-top: 1.5rem;
    /* Reduced margin for mobile */
  }

  .section-title {
    font-size: 2rem !important;
    /* Force override for mobile */
    line-height: 1.2;
    margin-bottom: 2rem;
    text-align: center;
    /* Ensure long custom inline styles don't break layout */
    white-space: normal;
    word-wrap: break-word;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .faq-item {
    padding: 1rem;
  }

  .faq-header {
    font-size: 0.95rem;
    padding: 0.75rem 0;
  }

  .faq-answer {
    font-size: 0.85rem;
    padding: 0.75rem 0;
  }

  footer {
    padding: 1.5rem 1rem;
  }

  .footer-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }

  .footer-content p {
    font-size: 0.85rem;
  }

  .action-buttons-section {
    gap: 1rem;
    padding: 1.5rem;
    flex-direction: column;
    margin: 1.5rem 0;
  }

  .action-button {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    min-width: unset;
  }

  /* Fix for text spacing on mobile - left align instead of justify */
  .about-red-box p {
    text-align: left;
    word-spacing: normal;
  }

  /* Fix for mission background image on mobile */
  /* Fix for mission background image on mobile */
  .vm-card {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 350px;
  }

  /* Fix for Team Card Names on Mobile */
  .team-card h3 {
    font-size: 1.1rem !important;
    line-height: 1.3;
    white-space: normal;
    margin-bottom: 0.2rem;
  }

  .team-card .team-position {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem;
  }

  .team-card-content {
    padding: 0.8rem 1rem !important;
  }
}

/* Also apply to slightly larger screens (Tablets/Landscape) where grid is 1 column */
@media (max-width: 992px) {
  .vm-card {
    background-size: cover !important;
    background-position: center !important;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    /* 2 columns on tablet */
  }
}

@media (max-width: 600px) {
  .footer-content {
    grid-template-columns: 1fr;
    /* 1 column on mobile */
  }

  .social-icons-row {
    flex-direction: row;
    /* Horizontal again on mobile to save vertical space if needed, or keep vertical? User asked for vertical generally. Let's keep vertical or allow row if space constraints. Actually user asked for vertical vertical. Let's keep it generally vertical but maybe row for mobile looks better? User specifically asked "add that links vertically". I will respect that universally unless it breaks badly. */
  }
}

/* Standard Font only for Value/Action details */
.value-card p,
.action-card p {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Header Font (Courier New, Italic, Uppercase) for Names */
.team-card h3,
.event-card h3,
.value-card h3 {
  font-family: "Courier New", Courier, monospace;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Navbar Font (Courier New, Bold) for Positions/Details - Smaller Size */
.team-position,
.event-date,
.event-location {
  color: var(--white);
  font-size: 0.9rem;
  /* Reduced from 1.1rem */
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.5px;
  transform: none;
}

/* Update Button Fonts in Cards */
.card-btn,
.event-card-btn {
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 1px;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  background-color: var(--primary-red);
  color: var(--white);
  border: 2px solid var(--primary-red);
}

.card-btn:hover,
.event-card-btn:hover {
  background-color: var(--bright-red);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  transform: scale(1.05);
}

/* Specific Style Updates for Team Card Size Constraint */
.team-card h3 {
  font-size: 1.3rem;
  /* Reduced from 1.8rem */
  margin-bottom: 0.3rem;
}

/* ===================================================
   VALUE CARDS SECTION
=================================================== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.value-card {
  background: rgba(220, 20, 60, 0.1);
  border: 1px solid var(--primary-red);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.4);
  background: rgba(220, 20, 60, 0.2);
}

.value-card h3 {
  color: var(--primary-red);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.value-card p {
  color: var(--light-gray);
  line-height: 1.6;
}

/* ===================================================
   FACULTY SECTION (RESPONSIVE)
=================================================== */
.faculty-section-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: nowrap;
  /* Force single row on desktop */
  padding: 0 1rem;
}

.faculty-card {
  flex: 1;
  /* Allow cards to shrink/grow */
  max-width: 400px;
  min-width: 280px;
  /* details shouldn't get too squashed */
  width: 100%;
}

/* Mobile Responsiveness for Faculty Section */
@media (max-width: 900px) {
  .faculty-section-container {
    flex-direction: column;
    align-items: center;
  }

  .faculty-card {
    width: 100%;
    max-width: 450px;
    /* Allow wider cards on mobile stack */
    margin-bottom: 2rem;
  }
}

/* ===========================
   EVENTS GRID & CARDS (UPDATED)
   =========================== */

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.event-card {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid var(--primary-red);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  /* Explicitly set row */
  flex-wrap: nowrap;
  /* Prevent stacking */
  /* Prevent stacking */
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  gap: 1.5rem;
  position: relative;
  text-align: left;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(220, 20, 60, 0.5);
  background: rgba(40, 0, 0, 0.9);
}

.event-card-logo-small {
  min-width: 80px;
  min-height: 80px;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--primary-red);
  background: black;
  flex-shrink: 0;
  margin-left: auto;
  /* Push to the right */
}

.event-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-card h3 {
  font-family: 'ITC Benguiat', serif;
  color: var(--primary-red);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.event-tagline {
  color: var(--light-gray);
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.event-description-short {
  color: #ccc;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-btn {
  background-color: var(--primary-red);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase;
  width: fit-content;
  transition: all 0.3s ease;
  z-index: 2;
  /* Ensure clickable */
}

.event-card-btn:hover {
  background-color: white;
  color: var(--primary-red);
  box-shadow: 0 0 10px rgba(220, 20, 60, 0.8);
}

/* ===========================
   EVENT MODAL
   =========================== */

.event-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 20000;
  display: none;
  /* Hidden by default */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.event-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.event-modal-content {
  background: #0a0a0a;
  border: 2px solid var(--primary-red);
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 50px rgba(220, 20, 60, 0.5);
  animation: zoomIn 0.3s ease-out;
  color: var(--white);
  font-family: 'Courier New', Courier, monospace;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  color: var(--primary-red);
  cursor: pointer;
  background: none;
  border: none;
  transition: transform 0.3s ease;
}

.modal-close-btn:hover {
  transform: scale(1.2) rotate(90deg);
  color: white;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(220, 20, 60, 0.3);
  padding-bottom: 1rem;
}

.modal-logo {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--primary-red);
  background: black;
}

.modal-title-group h2 {
  font-family: 'ITC Benguiat', serif;
  color: var(--primary-red);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.modal-tagline {
  color: #ccc;
  font-style: italic;
  font-size: 1.1rem;
}

.modal-body h3 {
  color: var(--primary-red);
  border-left: 3px solid var(--primary-red);
  padding-left: 10px;
  margin: 1.5rem 0 0.5rem 0;
  font-size: 1.3rem;
}

.modal-body p,
.modal-body ul {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
  margin-bottom: 1rem;
}

.modal-body ul {
  padding-left: 20px;
  list-style-type: square;
}

.modal-body li {
  margin-bottom: 0.5rem;
}

.modal-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-item strong {
  color: var(--primary-red);
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

/* Scrollbar for modal */
.event-modal-content::-webkit-scrollbar {
  width: 8px;
}

.event-modal-content::-webkit-scrollbar-track {
  background: #000;
}

.event-modal-content::-webkit-scrollbar-thumb {
  background: var(--primary-red);
  border-radius: 4px;
}

/* Social Media Icons in Footer*/
/* Social Media Icons in Footer*/
.social-icons-row {
  display: flex;
  flex-direction: column;
  /* Vertical alignment */
  gap: 15px;
  margin-top: 15px;
  justify-content: flex-start;
}

.social-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Bouncy transition */
  filter: brightness(2) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  /* Very bright and glowing white */
}

.social-icon:hover {
  transform: scale(1.2) translateX(5px);
  /* Move slightly right on hover */
  filter: brightness(3) drop-shadow(0 0 20px rgba(255, 255, 255, 1));
  /* Blindingly white glow on hover */
}

.footer-section p {
  text-align: left;
  /* Ensure text is left aligned mostly */
}

/* Specific alignment for Address/Contact info if needed */
.footer-section:first-child p {
  display: flex;
  align-items: flex-start;
  /* Align icon/label with text top */
  margin-bottom: 0.8rem;
}

.contact-label {
  /* Fixed width for labels to align content */
  flex-shrink: 0;
}

/* ===========================
   MUSIC PLAYER BUTTON
   =========================== */
.music-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--primary-red);
  background: var(--primary-black);
  color: var(--primary-red);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3);
  z-index: 10000;
  /* High z-index to stay on top */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  outline: none;
}

.music-btn:hover {
  transform: scale(1.1) rotate(10deg);
  background: var(--primary-red);
  color: var(--white);
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.8);
}

.music-btn.playing {
  animation: musicPulse 2s infinite;
  background: var(--primary-red);
  color: var(--white);
  border-color: var(--white);
}

@keyframes musicPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(220, 20, 60, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
  }
}

/* Mobile Tweaks for Music Button */
@media (max-width: 480px) {
  .music-btn {
    bottom: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }
}

/* Developer Link with Underline Animation */
.dev-link {
  text-decoration: none;
  color: #d9d9d9;
  /* Darker White */
  font-weight: bold;
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: color 0.3s ease;
  padding-bottom: 3px;
}

.dev-link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  /* Thinner white line */
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.dev-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  /* Thicker red line */
  bottom: 0;
  left: 0;
  background-color: var(--primary-red);
  transition: width 0.3s ease-in-out;
  z-index: 2;
}

.dev-link:hover::after {
  width: 100%;
}

.dev-link:hover {
  color: var(--primary-red);
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
}

.dev-link i {
  margin-left: 5px;
  font-size: 0.9em;
}


/* ===========================
   NEW SOCIAL ICONS STYLES
   =========================== */
.social-icons-row {
  display: flex;
  justify-content: flex-start;
  /* Align left in footer context, or center if needed */
  flex-wrap: wrap;
  gap: 10px;
}

.social-icon-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin-right: 10px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(220, 20, 60, 0.3);
  position: relative;
  overflow: hidden;
}

.social-icon-link i {
  font-size: 1.2rem;
  color: #ffffff;
  transition: all 0.4s ease;
  z-index: 2;
}

/* Hover Effects */
.social-icon-link:hover {
  background: #DC143C;
  border-color: #DC143C;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.6), 0 0 40px rgba(220, 20, 60, 0.3);
}

.social-icon-link:hover i {
  color: #000000;
  transform: scale(1.2);
}

/* Specific Brand Colors on Hover (Optional, keeping it red for theme consistency but can trigger brand colors) */
/* 
.social-icon-link:hover .fa-instagram { color: #fff; } 
*/

/* Pulse Animation for icons */
@keyframes iconPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(220, 20, 60, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
  }
}

.social-icon-link:hover {
  animation: iconPulse 1.5s infinite;
}