:root {
  --primary-color: #FE6715;
}

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

html, body {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: #0B0B0F;
  font-family: 'DM Sans', sans-serif;
}

.our-committee{
  padding-top: 100px;
} 

.light-leak{
	width: 350px;
	height: 350px;
	background-color: var(--primary-color);
	position: absolute;
	left: -10%;
	filter: blur(250px);
	z-index: -100;
	opacity: 0.4;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* =======================
   NAVBAR
   ======================= */
.header {
  position: fixed;   
  top: 2rem;           
  left: 50%;
  transform: translateX(-50%); 
  z-index: 1000;
  width: max-content;
  background: rgba(11, 11, 15, 0.4); /* semi-transparent */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}


.navbar {
  width: max-content;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  padding: .5rem .5rem .5rem 1rem;
  background-color: #ffffff10;
  border-radius: 10px;
  align-items: center;
  border: 1px solid #ffffff10;
}

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

.nav-links a {
  text-decoration: none;
  color: #f5f5f5;
  font-weight: 400;
  font-size: 0.875rem;
  transition: all .3s ease;
}

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

.committee-btn{
  background-color: #fe671510;
  padding: 12px 16px;
  text-align: center;
  color: var(--primary-color);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid #fe671515;
  transition: all .3s ease;
}

.committee-btn:hover {
  background-color: var(--primary-color);
  color: #f5f5f5;
}

.register-btn {
  text-decoration: none;
  color: #f5f5f5;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--primary-color);
  border-radius: 8px;
  transition: all .3s ease;
	display: inline;
	box-shadow: 
  0px 42px 12px rgba(255, 107, 26, 0),
  0px 27px 11px rgba(255, 107, 26, 0.01),
  0px 15px 9px rgba(255, 107, 26, 0.05),
  0px 7px 7px rgba(255, 107, 26, 0.09),
  0px 2px 4px rgba(255, 107, 26, 0.10);
}

.register-btn:hover {
  opacity: 0.9;
}

.menu-icon {
  display: none;
  font-size: 1.5rem;
  color: #f5f5f5;
  cursor: pointer;
}

/* =======================
   HERO
   ======================= */
.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: visible;
	background: url('/img/hero-bg.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-content .badge{
  margin-bottom: 1.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #ffffff10;
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
  color: #f5f5f5;
  border: 1px solid #ffffff20;
}

.badge .circle {
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--primary-color);
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #f5f5f5;
  line-height: 100%;
  letter-spacing: -0.025em;
}

.hero-content h1 span {
    color: var(--primary-color);
}

.hero-content p {
  font-size: 1rem;
  color: #8C8C8C;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
}

.hero-content .info {
	margin-top: 0.5rem;
	display: flex;
	justify-content: center;
	gap: 2rem;
	color: #8c8c8c;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
}

.hero-content .register-btn {
  display: inline-block;
  margin-top: 2rem;  
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 8;
	box-shadow: 
  0px 42px 12px rgba(255, 107, 26, 0),
  0px 27px 11px rgba(255, 107, 26, 0.01),
  0px 15px 9px rgba(255, 107, 26, 0.05),
  0px 7px 7px rgba(255, 107, 26, 0.09),
  0px 2px 4px rgba(255, 107, 26, 0.10);

}

.scroll{
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2rem;
	color: #f5f5f547;
	animation: scroll 2s ease-in-out infinite;
	font-weight: 100;
}

@keyframes scroll {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(10px);
	}
}

/* =======================
   ABOUT
   ======================= */
.about{
	width: 100%;
  padding: 200px 0;
  margin: 0 autp;
}

.about-content{
	max-width: 950px;
	margin: 0 auto;
	text-align: center;
	padding: 4rem 1rem;
}

.about-content .badge {
	margin-bottom: 2rem;
}

.about-content h2 {
	font-size: 2rem;
	font-weight: 700;
	color: #f5f5f5;
	line-height: 1.5;
  letter-spacing: -0.02em;
}

.heading-grad{
  background: linear-gradient(90deg, #FF7D14, #F94327);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


/* =======================
   TECHNICAL EVENTS
   ======================= */

.technical-events{
  margin: 0 auto;
  padding: 100px 0;
}

.text{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
  flex-direction: column;
}

.text .left h2{
  font-size: 1.5rem;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 0.25rem;
  text-align: center;
  letter-spacing: -0.02em;
}

.text .left p{
  font-size: 0.875rem;
  color: #8C8C8C;
  max-width: 600px;
  line-height: 1.5;
  text-align: center;
}

.grid-section {
  background: #0B0B0F;
}

.grid-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr); 
}

.warning p{
  text-align: center;
  color: #C82323;
  background-color: #C8232310;
  font-size: 0.875rem;
  margin-top: 2rem;
  border: 1px solid #C8232320;
  width: max-content;
  text-align: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: wrap;
}

/* Grid items */
.grid-item {
  background: #ffffff10;
  border: 1px solid #ffffff10;
  border-radius: 8px;
  padding: 1rem;
  color: #f5f5f5;
  font-size: 1.25rem;
  /* text-align: center; */
}

.grid-item .image{
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  text-align: left;
  border-radius: 10px;
}

.grid-item .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
} 

.grid-item .heading{
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.grid-item .heading h3{
  font-size: 1rem;
  font-weight: 600;
  color: #f5f5f5;
  flex: 1;
}

.grid-item .heading .people{
  display: flex;
  align-items: center;
}

.grid-item .heading .people i{
  color: #434343;
  margin-right: 0.20rem;
}

.grid-item .heading .people h5{
  font-size: 0.975rem;
  color: #7a7a7a;
}

.grid-item .heading .price{
  display: flex;
  align-items: center;
}

.grid-item .heading .price i{
  color: #434343;
  margin-right: 0.20rem;
}

.grid-item .heading .price h5{
  font-size: 0.975rem;
  color: #7a7a7a;
}

.grid-item p{
  font-size: 0.875rem;
  color: #b3b3b3;
  text-align: left;
  margin-bottom: 2rem;
}

.cultural-events{
  margin: 0 auto;
  padding: 100px 0;
}

/* =======================
   OUR COMMITTEE
   ======================= */

.our-committee{
  margin: 0 auto;
  padding: 100px 0;
}

.committee-section {
  background: #0B0B0F;
}

.committee-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4x2 */
}

/* Committee cards */
.committee-card {
  background: #1E1E25;
  border: 1px solid #2C2C34;
  border-radius: 10px;
  padding: 0.625rem;
  color: #f5f5f5;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.committee-card .left{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  border-radius: 10px;
  aspect-ratio: 1 / 1 ;
  flex-grow: 1;
  gap: 1rem;
}

.committee-card .left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.committee-card .right{
  width: 100%;
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: flex-start;
}

.committee-card .right h3{
  font-size: 0.875rem;
  font-weight: 600;
  color: #f5f5f5;
  margin-bottom: 0.25rem;
  font-style: capitalize;
  /* max-width: 80%; */
}

.committee-card .right h4{
  font-size: 0.75rem;
  color: #838383;
  margin-bottom: 0.15rem;
  font-weight: 400;
  font-style: capitalize;
}

.committee-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* =========================
   WHY PARTICIPATE / PARTICIPATE GRID
   Replacement: prevents overlap, enforces spacing, and is responsive.
   Paste over existing .committee-section / .committee-grid / .committee-card / .participate rules
   ========================= */

.why-participate {
    position: relative;      /* ensures this section forms its own stacking context */
    padding: 4rem 0 3rem;    /* vertical spacing so it doesn't overlap neighbors */
    background: transparent;
    z-index: 1;
}

.why-participate .container {
    position: relative;
    z-index: 2;
}

/* Heading area (keeps same look as other .text blocks) */
.why-participate .text {
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* New grid specifically for the participate cards */
.participate-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;   /* cards stretch equally in height */
}

/* Individual card */
.participate-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    /* min-height: 200px; */
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 20px rgba(2,6,23,0.35);
}

/* icon block — visually consistent & doesn't overlap text */
.participate-card .icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #FE671510; /* subtle tinted background */
    border: 1px solid rgba(254,103,21,0.08);
    color: var(--primary-color);
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* title + body */
.participate-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #f5f5f5;
}

.participate-card p {
    margin: 0;
    color: #bfbfbf;
    line-height: 1.5;
    font-size: 0.875rem;
}

/* subtle hover effect */
.participate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(2,6,23,0.45);
}

/* Make sure the section doesn't collapse or overlap neighboring sections:
   add an explicit bottom margin so footer / next sections sit below. */
.why-participate {
    margin-bottom: 3.5rem;
}

.cta-section{
  margin-bottom: 100px;
}

.cta .container{
  text-align: center;
  padding: 3rem 1rem;
  background-color: var(--primary-color);
  border-radius: 12px;
  box-shadow: 
  0px 42px 12px rgba(255, 107, 26, 0),
  0px 27px 11px rgba(255, 107, 26, 0.01),
  0px 15px 9px rgba(255, 107, 26, 0.05),
  0px 7px 7px rgba(255, 107, 26, 0.09),
  0px 2px 4px rgba(255, 107, 26, 0.10);
  position: relative;
  overflow: hidden;
}

.cta .container h2{
  font-size: 3rem;
  font-weight: 700;
  color: #f5f5f5;
  line-height: 100%;
  margin-bottom: 1rem;
  letter-spacing: -2px
}

.cta .container p{
  font-size: 1.125rem;
  color: #f5f5f5;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.register-btn-cta{
  background-color: #f5f5f5;
  padding: 0.75rem 1.5rem;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 
  0px 42px 12px rgba(255, 107, 26, 0),
  0px 27px 11px rgba(255, 107, 26 , 0.01),
  0px 15px 9px rgba(255, 107, 26    , 0.05),
  0px 7px 7px rgba(255, 107, 26   , 0.09);
}

.circles{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  background-color: #ffffff10;
}

.circle-1{
  top: -50px;
  left: -50px;
  animation: move1 6s ease-in-out infinite;
}

.circle-2{
  bottom: -50px;
  right: -50px;
  animation: move2 6s ease-in-out infinite;
}

@keyframes move1 {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, 20px);
  }
}

@keyframes move2 {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-20px, -20px);
  }
}

.emoji{
  position: absolute;
  display: flex;
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.emojies1{
  top: 30%;
  left: 23%;
  animation-delay: 0s;
  width: 60px;
  height: 60px;
  --rstart: -12deg;         /* base rotation */
  --radd: 8deg;             /* additional rotation at mid */
  animation: float-bob 6.8s ease-in-out infinite;
  animation-delay: 0s;
  --glow-size: 120px;
  rotate: -20deg;
}

.emojies2{
  font-size: 1.5rem;
  top: 30%;
  right: 25%;
  width: 75px;
  height: 75px;
  animation-delay: 1s;
  object-fit: cover;
  --rstart: 18deg;
  --radd: -6deg;
  animation: float-sway 7.6s ease-in-out infinite;
  animation-delay: 0.9s;
  --glow-size: 140px;
  rotate: 20deg;
}

.emojies3{
  bottom: 25%;
  left: 25%;
  animation-delay: 2s;
  height: 70px;
  width: 70px;
  --rstart: -14deg;
  --radd: 10deg;
  animation: float-bob 6.2s ease-in-out infinite;
  animation-delay: 1.6s;
  --glow-size: 130px;
  transform-origin: 40% 60%;
  rotate: -15deg;
}

.emojies4{
  bottom: 23%;
  right: 27%;
  animation-delay: 3s;
  font-size: 1rem;
  width: 65px;
  height: 65px;
  rotate: 10deg;
  --rstart: 10deg;
  --radd: -8deg;
  animation: float-sway 7.2s ease-in-out infinite;
  animation-delay: 2.2s;
  --glow-size: 120px;
}

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

.footer{
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #ffffff10;
  margin-top: 100px;
  position: relative;
  z-index: 10;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

.footer-content{
  display: flex;
  justify-content: space-between;
  /* flex-direction: column; */
  align-items: center;
  color: #f5f5f5;
  font-size: 0.875rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
  /* line-height: 1.5; */
  /* background-color: red; */
}

.footer-content p{
  max-width: 600px;
  /* margin: 0 auto; */
  font-size: 1rem;
  color: #363636;
  /* line-height: 1.5; */
  font-weight: 400;
  font-family: 'DM Sans', sans-serif;
  text-align: center;
  letter-spacing: normal;
}

.social-links{
  display: flex;
  align-items: center;
  flex-direction: column;
  /* margin-bottom: 2rem; */
}

.social-links p{
  /* margin-bottom: 0.75rem; */
  font-size: 1rem;
  color: #1E1E25;
  font-weight: 500;
}

.social-links a{
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  /* padding-left: 1.5rem; */
  text-align: center;
}

.logos{
  display: flex;
  gap: 2rem;
}

.social-links a i{
  font-weight: 400;
  color: var(--primary-color);
  color: #fe6715e1;
}

.event-btns{
  width: 100%;
  justify-content: space-between;
  display: flex;
  gap: 0.5rem;
}

.event-btns .committee-btn{
  flex-grow: 1;
}


/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 992px) {
  .navbar {
    gap: 2rem;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .committee-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .participate-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .why-participate {
        padding: 3rem 0 2.5rem;
    }
}

@media (max-width: 768px) {
  .navbar {
    width: 100%;
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 80px;
    right: 1rem;
    flex-direction: column;
    gap: 1rem;
    background: #0b0b0f;
    border: 1px solid #ffffff20;
    border-radius: 10px;
    padding: 1.5rem;
  }

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

  .menu-icon {
    display: block;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 0.95rem;
  }

  .header{
    width: 80%;
  }

  .navbar .register-btn{
    display: none;
  }

  .cta .container h2{
    font-size: 2.5rem;
  }

  .cta .container p{
    font-size: 1rem;
    letter-spacing: normal;
  }

  .rstr{
    display: block !important;
  }
}

@media (max-width: 480px) {

  .container{
    max-width: 100%;
    width: 100%;
    padding: 0 1.5rem;
  }

  .header{
    width: 90%;
  }

  .header .container{
    padding: 1rem;
    width: 100%;
  }

  .rstr{
    display: block !important;
  }

  .header img{
    width: 90px;
  }

	section{
		margin-bottom: 100px;
	}

  .hero-content h1 {
    width: 100%;
    font-size: 1.8rem;
  }

  .register-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

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

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

  .warning p{
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .cta .container h2{
    font-size: 2rem;
  }

  .cta .container p{
    font-size: 1rem;
    letter-spacing: normal;
  }

  .about-content h2 {
    font-size: 1.5rem;
  }

  .emojies1{
    top: 26%;
    left: 8%;
    animation-delay: 0s;
  }

  .emojies2{
    font-size: 1.5rem;
    top: 29%;
    right: 9%;
    animation-delay: 1s;
  }

  .emojies3{
    bottom: 25%;
    left: 8%;
    animation-delay: 2s;
  }

  .emojies4{
    bottom: 30%;
    right: 10%;
    animation-delay: 3s;
    font-size: 1rem;
  }

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

  .social-links{
    padding-top: 1rem;
  }

  .footer-content p{
    font-size: 1rem;
    font-weight: 400;
    padding: 1.5rem;
    order: 1;
  }

  .cta .container h2{
    font-size: 2.5rem;
  }

  .cta .container{
    border-radius: 0;
  }

  .cta .container p{
    font-size: 1rem;
    letter-spacing: normal;
  }

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

    .participate-card {
        padding: 1rem;
        min-height: auto;
    }

    .participate-card .icon {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }

    .why-participate {
        padding: 2rem 0 1.5rem;
        margin-bottom: 2.5rem;
    }

    .event-btns .register-btn{
      padding-top: 14px;
    }
}


/* ===== Countdown Timer Section ===== */
:root { --primary-color: #FE6715; }

.countdown-section {
  text-align: center;
  margin: 2rem 0;
}

.countdown-label {
  font-size: 1rem;
  font-weight: 600;
  color: #b4b4b4;
  margin-bottom: 0.75rem;
  font-family: 'DM Sans', sans-serif;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.countdown .time-seg {
  background: #fff;
  color: #0b0b0f;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  min-width: 70px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.countdown .time-seg span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.countdown .time-seg small {
  display: block;
  font-size: 0.75rem;
  color: #555;
  margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 480px) {
  .countdown {
    gap: 0.5rem;
  }
  .countdown .time-seg {
    min-width: 55px;
    padding: 0.5rem;
  }
  .countdown .time-seg span {
    font-size: 1.2rem;
  }
}

.bottom .committee-btn{
  padding: 0.5rem 0.75rem;
  color: var(--primary-color) !important;
} 

.bottom .committee-btn:hover {
  background-color: var(--primary-color);
  color: #f5f5f5 !important;
}


:root{
  --primary-orange: #FE6715;
  --glow-size: 120px; /* radial glow size */
}



/* keyframes: slow bob up/down + gentle rotate */
@keyframes float-bob {
  0%   { transform: translateY(0) rotate(var(--rstart)); }
  50%  { transform: translateY(-10px) rotate(calc(var(--rstart) + var(--radd))); }
  100% { transform: translateY(0) rotate(var(--rstart)); }
}

/* small secondary sway for variety */
@keyframes float-sway {
  0%   { transform: translateX(0) translateY(0) rotate(var(--rstart)); }
  50%  { transform: translateX(6px) translateY(-6px) rotate(calc(var(--rstart) + var(--radd))); }
  100% { transform: translateX(0) translateY(0) rotate(var(--rstart)); }
}

/* subtle hover pop if someone mouses near (just cosmetic) */
.emoji:hover{
  transform: translateY(-8px) scale(1.06);
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .emoji { animation: none !important; transition: none !important; }
  .emoji::before { transition: none !important; }
}


/* ---------- Event modal / dept-cards improvements ---------- */
/* Paste near the end of your styles so it overrides earlier modal rules */

/* Modal base */
.event-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.event-modal.open { display: flex; }

/* Backdrop */
.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,9,12,0.6);
  backdrop-filter: blur(3px) saturate(110%);
}

/* Panel */
.event-modal__panel {
  position: relative;
  width: min(1100px, 94vw);
  max-height: 86vh;
  overflow: auto;
  background: linear-gradient(180deg, #0b0b0f 0%, #0f0f12 100%);
  color: #f5f5f5;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(3,6,10,0.6);
  padding: 20px;
  z-index: 1210;
}

/* Header */
.event-modal__header {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.event-modal__header h2 {
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
}
.event-modal__subtitle {
  color: #cfcfcf;
  font-size: 0.95rem;
  margin-top: 4px;
}

/* Close (big X) */
.event-modal__close {
  position: absolute;
  right: 14px;
  top: 12px;
  background: transparent;
  color: #f5f5f5;
  border: 0;
  font-size: 1.35rem;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s ease, transform .06s ease;
}
.event-modal__close:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.event-modal__close:focus { outline: 2px solid #ffb089; outline-offset: 2px; }

/* Body sections */
.event-modal__body { padding: 6px 0 12px; }
.event-modal__section { margin-bottom: 14px; }

/* Dept cards container */
.modal-dept-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 8px;
}

/* single dept card */
.modal-dept-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 12px;
  border-radius: 10px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* card header */
.modal-dept-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-dept-card__header h3 {
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.modal-dept-card__tag {
  font-size: 0.72rem;
  color: #ffd7b8;
  background: rgba(254,103,21,0.08);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
}

/* venue row */
.modal-dept-card__venue {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #e6e6e6;
  font-size: 0.92rem;
}

/* not-hosting note */
.modal-dept-card__not-hosted {
  color: #bdbdbd;
  font-size: 0.9rem;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

/* Tables (faculty & students) */
.dept-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  margin-top: 6px;
  font-size: 0.92rem;
}
.dept-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffd7b8;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.dept-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.dept-table tbody tr:last-child { border-bottom: none; }
.dept-table td {
  padding: 8px 6px;
  vertical-align: middle;
  color: #e9e9e9;
}

/* columns sizing */
.dept-table col.name { width: 56%; }
.dept-table col.roll { width: 22%; text-align: left; }
.dept-table col.phone { width: 22%; text-align: left; }

/* icons in cells */
.cell-icon {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.cell-icon i {
  display: inline-flex;
  width: 28px;
  height: 28px;
  min-width: 28px;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  color: #ffd7b8;
  font-size: 1.05rem;
}

/* roll number style */
.roll-num {
  display: inline-block;
  background: rgba(255,255,255,0.02);
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  color: #fff;
  font-size: 0.88rem;
}

/* phone link */
.dept-table a[href^="tel:"] {
  color: #ffd7b8;
  text-decoration: none;
  font-weight: 600;
}
.dept-table a[href^="tel:"]:hover { text-decoration: underline; }

/* modal caption (for not provided) */
.modal-caption {
  color: #9a9a9a;
  font-size: 0.9rem;
  font-weight: 500;
}

/* small screens: stack the three cards */
@media (max-width: 980px) {
  .modal-dept-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .modal-dept-cards { grid-template-columns: 1fr; }
  .event-modal__panel { padding: 14px; width: min(92vw, 680px); max-height: 92vh; }
}

/* ---------- Footer actions (quick-links / register / close) ---------- */
.event-modal__footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.03);
}

/* Register CTA — primary */
#modal-register.register-btn,
.register-btn-cta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: linear-gradient(90deg, var(--primary-color), #ff8f49);
  color: #f5f5f5;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(254,103,21,0.12);
  transition: transform .08s ease, box-shadow .12s ease;
  font-size: 0.875rem;
}
#modal-register.register-btn:hover,
.register-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(254,103,21,0.18); }
#modal-register.register-btn:focus { outline: 2px solid rgba(255,183,130,0.65); outline-offset: 2px; }

/* Secondary close in footer */
.event-modal__close-secondary {
  background: transparent;
  color: #cfcfcf;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: background .08s ease, transform .06s ease;
}
.event-modal__close-secondary:hover { background: rgba(255,255,255,0.03); transform: translateY(-1px); }
.event-modal__close-secondary:focus { outline: 2px solid rgba(255,183,130,0.5); outline-offset: 2px; }

/* On small screens we stack footer controls */
@media (max-width: 520px) {
  .event-modal__footer { flex-direction: column-reverse; gap: 8px; align-items: stretch; }
  #modal-register.register-btn { justify-content: center; width: 100%; }
  .event-modal__close-secondary { width: 100%; }
}

/* ensure icons from phosphor sit nicely when used inline */
.event-modal i.ph { font-size: 1.05rem; color: #ffd7b8; vertical-align: middle; }

/* tiny helper for accessibility when modal body gets focus */
.event-modal__panel:focus { outline: none; }

/* Fix 'quick links' floating: ensure modal footer sits inside panel */
.event-modal__panel .quick-links,
.event-modal__panel .modal-actions { position: static !important; display: block; }

/* optional: improve scroll inside panel */
.event-modal__panel::-webkit-scrollbar { height: 10px; width: 10px; }
.event-modal__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.04); border-radius: 10px; }

/* end of modal CSS */


.modal-faculty-list{
  list-style-type: none;
}

.modal-faculty-list i{
  margin-bottom: 0.5rem;
  display: flex;
  margin-right: 0.25rem;
}

.modal-dept-faculty h4{
  margin-bottom: 1rem;
}