@import url(https://db.onlinewebfonts.com/c/30c9cdd28f699d36885d433e976558d9?family=Inlander);
/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
    --accent-yellow:#FFFF33;
    --lime-green:#39FF14;
}

/* BODY */
body{
    background:black;
    font-family:'Inlander', sans-serif;
    color:white;
    overflow-x:hidden;
    font-family:Georgia, 'Times New Roman', Times, serif;
    
}

/* STAR CANVAS */
#starCanvas{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:-1;
}

/* LOADING SCREEN */
#loading-screen{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    display:flex;justify-content:center;align-items:center;
    background:#000;
    z-index:9999;
}

.forge-container{text-align:center;position:relative;}
.forge-text{
    font-size:3.5rem;color:#333;letter-spacing:0.3em;
    display:flex;flex-wrap:wrap;justify-content:center;
}
.char{
    color:#333;opacity:0.2;animation:castIn 0.6s forwards;
}
@keyframes castIn{
    0%{color:#000;text-shadow:none;opacity:0.2;transform:translateY(-20px);}
    40%{color:#ff7f00;text-shadow:0 0 5px #ff4500,0 0 10px #ff6347;opacity:1;transform:translateY(0);}
    100%{color:#e0e0e0;text-shadow:0 0 2px #fff;opacity:1;}
}
.steam{
    position:absolute;top:-50px;left:0;width:100%;height:40px;
    display:flex;justify-content:space-evenly;pointer-events:none;
}
.steam div{
    width:12px;height:40px;background:radial-gradient(white,transparent);
    opacity:0.25;animation:steamRise 2s ease-in infinite;
}
.steam div:nth-child(2){animation-delay:0.3s;}
.steam div:nth-child(3){animation-delay:0.6s;}
@keyframes steamRise{
    0%{transform:translateY(0) scale(1);opacity:0.3;}
    100%{transform:translateY(-40px) scale(1.2);opacity:0;}
}

/* NAVBAR */
/* NAVBAR */
.floating-navbar {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(0,0,0,0.4);
    border-radius: 50px;
    padding: 10px 20px;
    backdrop-filter: blur(8px);
    z-index: 1000;
    border: 1px solid rgba(255,255,255,0.1);
    animation: none; /* Default: no floating */
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent-yellow);
    text-decoration: none;
    gap: 8px;
}

.brand-logo img {
    width: 35px;
    height: 35px;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-item {
    color: var(--lime-green);
    text-decoration: none;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s;
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--accent-yellow);
    left: 0;
    bottom: 0;
    transition: width 0.3s;
}

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

.nav-item:hover {
    color: var(--accent-yellow);
}

/* Floating up and down animation */
@keyframes floatUpDown {
  0%, 100% { top: 20px; }
  50% { top: 30px; } /* moves 10px down */
}

/* Apply floating only on desktop (min-width: 992px) */
@media (min-width: 992px) {
  .floating-navbar {
    animation: floatUpDown 2s ease-in-out infinite;
  }
}


/* TOGGLE */
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--accent-yellow);cursor:pointer;}

@media(max-width:768px){
    .nav-links{
        display:none;flex-direction:column;gap:10px;
        background:rgba(0,0,0,0.9);
        position:absolute;top:60px;right:20px;padding:15px;
        border-radius:10px;
    }
    .nav-links.show{display:flex;}
    .nav-toggle{display:block;}
}

/*home*/

/* Home Section Container */
.hs{
   margin-bottom: 0%;
}
.home-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  color: white;
  text-align: center;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
  margin: 0;
}

/* Content Inside Hero Section */
.homepage-content h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom:20px;
}

.accent-2k25 {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-yellow);
}

.tagline,
.date-location {
  font-size: 1.2rem;
  margin-bottom:40px;
  opacity: 0.9;
  font-family: 'Maharlika', serif;
}
/* Apply font to entire home section */
.home-section h1 {
  font-family:'Orbitron', sans-serif;
  color: var(--accent-yellow);
  font-size:20px;
}
.home-section p{
   font-family:'Orbitron', sans-serif;
}
.accent-2k25 {
  color: var(--lime-green);
}

.explore-animated-button {
  background: transparent;
  border: 2px solid #39FF14;
  color: white;
  padding: 10px 24px;
  font-family: 'Orbitron', sans-serif;
  text-transform:none;
  transition: 0.3s ease;
  border-radius: 8px;
  text-decoration: none;
}

.explore-animated-button:hover {
  background: linear-gradient(45deg, #FFFF66, #55FF33);
  box-shadow: 0 0 12px #FFFF66, 0 0 20px #55FF33;
  color: black;
  transform: scale(1.1);
}


.text-warning {
  color: #FFFF33 !important;
}

.text-success {
  color: #39FF14 !important;
}

/* Glowing Title */
.home-section h1 {
  text-shadow: #39FF14;
}

/* Glowing Tagline */
.home-section .tagline {
  font-size: 20px;
  margin-top: 10px;
  text-shadow:
    0 0 8px #55ff33,
    0 0 12px #ffff66;
}

.home-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* spacing between logo and text */
  flex-wrap: wrap; /* prevent wrapping */
  padding: 10px;
}

.home-title-wrapper img {
  height: clamp(80px, 8vw, 100px);
  width:250px;
  height: 250px;
}

.home-title-wrapper h1 {
  font-size: clamp(1.8rem, 6vw, 5rem);
  white-space: nowrap;
  margin: 0;
}

/* Glowing Button */
.explore-btn {
   background:transparent;border:2px solid var(--lime-green);
    color:white;padding:10px 24px;text-transform:uppercase;
    transition:0.3s;border-radius:8px;font-weight:bold;text-decoration: none;

}

.explore-btn:hover {
  background:linear-gradient(45deg,var(--accent-yellow),var(--lime-green));
    box-shadow:0 0 12px var(--accent-yellow),0 0 20px var(--lime-green);
    color:black;transform:scale(1.1);
}

/* ABOUT SECTION */
/* ABOUT SECTION */
.about-section {
    padding: 20px;
    text-align: center;
}

.about-section h2 {
    font-size: 2.5rem;
    color: var(--accent-yellow);
    margin-bottom: 40px;
    text-shadow: 0 0 10px var(--accent-yellow);
}

.about-cards {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    align-items: center;    /* Center horizontally */
    gap: 30px;
}

.about-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--accent-yellow);
    border-radius: 20px;
    width: 100%;
    max-width: 700px; /* limit card size */
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.about-card.show {
    opacity: 1;
    transform: translateY(0);
}

.about-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.about-card-content {
    text-align: justify;       /* ✅ Always justify text */
    text-justify: inter-word;  /* ✅ Better spacing */
    hyphens: auto;             /* ✅ Hyphenation on small screens */
    word-break: break-word;    /* ✅ Prevent text overflow */
}

.about-card-content h3 {
    margin-bottom: 10px;
    color: var(--lime-green);
    text-align: center; /* ✅ Heading centered */
}

.about-card-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: justify;       /* ✅ Force justified text */
    text-justify: inter-word;
    hyphens: auto;
    word-break: break-word;
}

.about-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 15px var(--accent-yellow), 
                0 0 20px var(--lime-green);
}

/* Default size */
.about-card {
    width: 80%;
    max-width: 700px;
}

/* Tablet and below */
@media (max-width: 768px) {
    .about-card {
        flex-direction: column; /* Stack vertically */
        text-align: center;     /* Center layout only */
    }

    .about-card img {
        width: 100px;
        height: 100px;
    }

    .about-card-content {
        text-align: justify;      
        text-justify: inter-word;
    }
}

/* Extra small screens (phones <400px) */
@media (max-width: 400px) {
    .about-card {
        padding: 15px;
    }

    .about-card-content p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}



/* COMMITTEE SECTION */
.committee-section {
    padding: 80px 20px;
    text-align: center;
}

.committee-section .section-title {
    font-size: 2rem;
    color: var(--accent-yellow);
    text-shadow: 0 0 10px var(--accent-yellow);
    margin: 30px 0 20px;
}

.committee-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.committee-card {
    background: rgba(0,0,0,0.6);
    border: 2px solid var(--lime-green);
    border-radius: 15px;
    overflow: hidden;
    width: 350px;
    height: 400;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(30px);
}

.committee-card.show {
    opacity: 1;
    transform: translateY(0);
}

.committee-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 0 15px var(--lime-green), 0 0 25px var(--accent-yellow);
}

.committee-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.committee-card .description {
    padding: 15px;
}

.committee-card h3 {
    font-size: 1rem;
    color: var(--lime-green);
    margin-bottom: 5px;
}

.committee-card p {
    font-size: 0.85rem;
    color: #ccc;
}

/* Responsive */
/* Mobile responsive text center */
@media (max-width: 768px) {
    .committee-card {
        width: 90%;
        max-width: 350px;
        text-align: center;
    }
    .committee-card img {
        height: 220px;
    }
    .committee-card h3,
    .committee-card p {
        text-align: center;
    }
}




/* events timing*/
/* ====== SCHEDULE CONTAINER ====== */
.mf-schedule {
  max-width: 800px;
  width: 100%;
  background:transparent;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  padding: 20px;
  margin: 20px auto;
  font-family: 'Times New Roman', Times, serif;
}

/* ====== TITLES ====== */
.mf-schedule h2 {
  text-align: center;
  color: #FFFF33;  /* Bright yellow */
  padding: 10px;
  margin: 20px 0 15px;
  font-size: 1.6rem;
  text-transform:none;
  text-shadow: 0 0 6px #FFFF33, 0 0 12px #FFFF33; /* glow effect */
}

/* ====== EVENT CARDS ====== */
.mf-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin: 10px 0;
  border-left: 6px solid limegreen;
  background: #222;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
  color: #fff;
  box-shadow: 0 0 6px rgba(50,205,50,0.4); /* light lime glow */
}

/* Hover effect */
.mf-event:hover {
  background: #2a2a2a;
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(50,205,50,0.7);
}

/* ====== EVENT DETAILS ====== */
.mf-event-details {
  flex: 1;
}

/* ====== EVENT TIME ====== */
.mf-event-time {
  min-width: 120px;
  text-align: right;
  font-weight: bold;
  color: #FFFF33; /* yellow accent */
}

/* ====== RESPONSIVE DESIGN ====== */
@media (max-width: 600px) {
  .mf-event {
    flex-direction: column;
    align-items: flex-start;
  }
  .mf-event-time {
    text-align: left;
    margin-top: 6px;
  }
}

/* EVENTS SECTION STYLES */
#mechforge-events-section {
  background-color:transparent;
  padding: 40px 20px;
  color: #f0f0f0;
  text-align: justify;
}

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

.mechforge-events-main-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #ffff33;
  text-shadow: 0 0 15px #ffff33, 0 0 30px #ffff33;
  animation: fadeIn 1s ease-in-out;
}

.mechforge-events-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: #39ff14;
  animation: fadeIn 1.5s ease-in-out;
}

.mechforge-day-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: #39ff14;
  margin-top: 40px;
  margin-bottom: 20px;
  animation: fadeIn 1s ease-in-out;
}

.mechforge-events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

.mechforge-event-card {
  background-color: #1a1a1a;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 255, 51, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: cardFadeIn 0.8s ease forwards;
  opacity: 0;
  display: flex;
  align-items: center;
}

.mechforge-event-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #ffff33, 0 0 40px #ffff33;
}

.mechforge-event-card-image {
  height: 250px;
  overflow: hidden;
  flex-shrink: 0;
}

.mechforge-event-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.mechforge-event-card-content {
  padding: 20px 25px;
  text-align: left;
  flex-grow: 1;
}

.mechforge-event-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  color: #39ff14;
}

.mechforge-event-description {
  font-size: 1rem;
  margin-bottom: 20px;
}

.mechforge-participate-btn {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  background: linear-gradient(45deg, #ffff33, #39ff14);
  transition: all 0.3s ease;
}

.mechforge-participate-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(45deg, #ffff66, #55ff33);
  box-shadow: 0 0 20px #ffff33, 0 0 30px #ffff33;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
  .mechforge-event-card {
    flex-direction: column;
  }
  .mechforge-event-card-image,
  .mechforge-event-image {
    height: 300px;
    border-radius: 15px 15px 0 0;
  }
  .mechforge-event-card-content {
    text-align: center;
  }
}



/*chief card*/
.chief-stage {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: flex-start; /* Stays at top */
  padding-top: 50px;       /* Space from top */
}


.chief-heading {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: yellow;
  font-family: 'Times New Roman', Times, serif;
  margin-bottom: 1rem;
    text-shadow: 0 0 12px rgba(255, 255, 51, 0.9),
               0 0 25px rgba(255, 255, 51, 0.7);
}

.chief-card {
  background: rgba(0, 0, 0, 0.8); /* light black card */
  color: #fff;
  border-radius: 10px;
  max-width: 900px;
  width: 100%;
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  animation: fadeIn 1.2s ease-in-out;
  text-align: justify;
}

.chief-portrait-wrap {
  flex: 1 1 250px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.chief-portrait img {
  max-width: 250px;
  width: 100%;
  border-radius: 10px;
  border: 3px solid limegreen;
  
}

.chief-content {
  flex: 2 1 400px;
}

.chief-name {
  color: yellow;
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
}

.chief-name-underline {
  height: 3px;
  background: limegreen;
  width: 80px;
  margin-bottom: 0.8rem;
}

.chief-title {
  font-style: italic;
  color: limegreen;
  margin-bottom: 1rem;
}

.chief-blurb {
  line-height: 1.5;
  margin-bottom: 1rem;
}

.chief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.chief-pill {
  background: rgba(255, 255, 0, 0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 5px;
  border: 1px solid yellow;
  font-size: 0.9rem;
}

.chief-card-footer {
  font-size: 0.85rem;
  color: #ccc;
  text-align: justify;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .chief-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .chief-content {
    flex: 1 1 100%;
    text-align: justify;
  }
}

.crew-title {
  text-align: center;
  font-size: 2.8rem;
  font-family: 'Anton', sans-serif;
  margin-bottom: 30px;
  color: #39FF14;
  letter-spacing: 2px;
  z-index: 1;
  position: relative;
}

.crew-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  z-index: 1;
  position: relative;
}

.crew-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  width: 320px;
  padding: 25px;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  display: none;
  flex-direction: column;
  align-items: center;
  border: 2px solid transparent;
  cursor: pointer;
}

.crew-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.crew-card h2 {
  margin-top: 15px;
  font-size: 1.4rem;
  color: #39FF14;
}

.crew-social-icons {
  margin-top: 10px;
}

.crew-social-icons a {
  color: #39FF14;
  margin: 0 10px;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.crew-social-icons a:hover {
  color: #1da1f2;
}

.crew-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 0 8px #FFFF33, 0 0 16px #FFFF33, 0 0 24px #FFFF33, 0 0 40px #FFFF33;
  border-color: #FFFF33;
  z-index: 5;
}

.crew-left-enter { animation: crewSlideInLeft 0.5s ease forwards; }
.crew-center-enter { animation: crewSlideInCenter 0.5s ease forwards; }
.crew-right-enter { animation: crewSlideInRight 0.5s ease forwards; }

@keyframes crewSlideInLeft {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes crewSlideInCenter {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes crewSlideInRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px) {
  .crew-card-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .crew-card {
    width: 100%;
    max-width: 350px;
    margin-bottom: 20px;
    display: flex !important;
    padding: 15px;
  }
  .crew-card img {
    max-height: 300px;
  }
  .crew-card h2 {
    font-size: 1.2rem;
    margin-top: 10px;
  }
}
/* ============================
   FIX: Meet the Developers layout override
   Paste this at the END of your CSS
   ============================ */

:root {
  --lime-green: #39FF14;
  --bright-yellow: #FFFF33;
  --button-color1: #ffff66;
  --button-color2: #55ff33;
  --dark-background: #0a0a1a;
  --text-color: #e0e0e0;
}

/* Fade-in animation keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#dev-section {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#main-content {
  opacity: 1;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#intro-headings-container {
  text-align: center;
  margin-bottom: 40px;
}

.intro-heading {
  opacity: 0;
  color: var(--lime-green);
  font-family: 'VT323', monospace;
  font-size: 2.5rem;
  text-shadow: 
    0 0 6px var(--lime-green),
    0 0 15px rgba(57, 255, 20, 0.6);
  animation: fadeInUp 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

#intro-heading-2 {
  animation-delay: 0.5s;
}

#developer-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.developer-card {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--lime-green);
  box-shadow: 
    0 0 6px rgba(57, 255, 20, 0.6),
    0 0 20px rgba(57, 255, 20, 0.2);
  padding: 20px;
  text-align: center;
  width: 300px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
  position: relative;
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}

/* Staggered fade-in delays */
.developer-card:nth-child(1) { animation-delay: 0.8s; }
.developer-card:nth-child(2) { animation-delay: 1.1s; }
.developer-card:nth-child(3) { animation-delay: 1.4s; }

.developer-card:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 10px rgba(57, 255, 20, 0.8),
    0 0 25px rgba(57, 255, 20, 0.4);
}

.developer-card img {
  width: 150px;
  height: 150px;
  border: 2px solid var(--lime-green);
  box-shadow: 
    0 0 4px rgba(57, 255, 20, 0.6),
    0 0 10px rgba(57, 255, 20, 0.3);
  object-fit: cover;
}

.developer-card h2 {
  color: var(--lime-green);
  margin-top: 5px;
  font-size: 1.5rem;
}

.developer-card h3 {
  color: var(--bright-yellow);
  margin: 3px 0 10px;
  font-size: 1rem;
}

.developer-card p {
  margin-top: 5px;
}

/* Button styling */
.custom-btn {
  background: linear-gradient(135deg, var(--button-color1), var(--button-color2));
  border: none;
  color: #000;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 
    0 0 4px rgba(85, 255, 51, 0.7),
    0 0 12px rgba(85, 255, 51, 0.3);
}

.custom-btn:hover {
  transform: scale(1.05);
  box-shadow: 
    0 0 10px rgba(255, 255, 102, 0.8),
    0 0 20px rgba(85, 255, 51, 0.6);
}

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

.social-links a {
  color: var(--lime-green);
  font-size: 1.5rem;
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.social-links a:hover {
  transform: scale(1.2);
  color: var(--bright-yellow);
  text-shadow: 
    0 0 5px var(--bright-yellow),
    0 0 12px rgba(255, 255, 51, 0.4);
}

@media (max-width: 768px) {
  #developer-cards-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .developer-card {
    width: 90%;
    padding: 25px;
  }

  .developer-card p {
    font-size: 1rem;
  }

  .intro-heading {
    font-size: 1.8rem;
  }
}


/* register card section*/

.register-section {
  padding: 2rem 0;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
}

.register-heading {
  font-size: 2.8rem;
  font-weight: 800;
  color: #FFFF33;
  margin-bottom: 2.5rem;
  letter-spacing: 1px;
  text-shadow: none;
  font-family: 'Times New Roman', Times, serif;
    text-shadow: 0 0 12px rgba(255, 255, 51, 0.9),
               0 0 25px rgba(255, 255, 51, 0.7);
}

.register-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.register-card {
  position: relative;
  width: 350px;
  background: transparent;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
  padding: 2rem;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.register-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(101, 209, 214, 0.15),
    rgba(188, 255, 94, 0.1),
    transparent
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}

.register-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 0 25px #39FF14, 0 0 50px #00f2fe33;
}

.register-card h3 {
  color: #FFFF33;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 6px #e8e882;
}

.register-card p,
.register-card li {
  font-size: 1rem;
  line-height: 1.6;
  color: #f0f0f0;
}

.register-card ul {
  text-align: left;
  padding-left: 1.2rem;
}

.register-btn {
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  margin-top: 1.5rem;
  color: #39FF14;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
  background: transparent;
  font-family: "Raleway", sans-serif;
  font-weight: bold;
  border-radius: 8px;
}

.register-btn:hover {
  background: #39FF14;
  color: #000;
  box-shadow: none;
  -webkit-box-reflect: none;
}

.register-btn span {
  position: absolute;
  display: block;
}

.register-btn span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #39FF14);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.register-btn span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #39FF14);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.register-btn span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #39FF14);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.register-btn span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #39FF14);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}


/* chatbot floating */ 


#floating-chatbot {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  /* Jump animation */
  animation: jump 2s ease-in-out infinite;
}

#chatbot-link {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

#chatbot-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 0 15px #39FF14;
  user-select: none;
  transition: transform 0.3s ease;
  object-fit: cover;
  display: block;
}

#chatbot-icon:hover {
  transform: scale(1.1);
}

/* Popup hidden by default */
#chatbot-popup {
  position: absolute;
  bottom: 70px;
  right: 50%;
  transform: translateX(50%);
  width: max-content;
  max-width: 220px;
  background: #1a1a2e;
  color: #FFFF33;
  padding: 10px 15px;
  border-radius: 12px;
  box-shadow: 0 0 25px #39FF14;
  font-size: 1rem;
  line-height: 1.4;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

/* Show popup on hover of link */
#chatbot-link:hover #chatbot-popup {
  opacity: 1;
  pointer-events: auto;
}

/* Jump animation keyframes */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}




/* revolution timeline code*/

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

h1 {
    text-align: center;
    padding: 30px 15px;
    color: #FFFF33; /* Yellow */
    font-family: 'Poppins', sans-serif;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 900px;
    margin: auto;
    padding: 20px 0;
}

/* Vertical line */
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background: #39FF14; /* Lime Green */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    border-radius: 3px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s ease-out;
}

.timeline.active::after {
    transform: scaleY(1);
}

/* Container */
.container {
    padding: 20px 40px;
    position: relative;
    width: 50%;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.container.show {
    opacity: 1;
    transform: translateY(0);
}

/* Left & right placement */
.left { left: 0; }
.right { left: 50%; }

/* Subtle Glowing Content Cards */
.content {
    padding: 15px 20px;
    background: #252a34;
    position: relative;
    border-radius: 8px;
    border: 2px solid;
    box-shadow: 0 0 5px #39FF14, 0 0 10px #FFFF33; /* subtle glow */
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.left .content {
    border-color: #39FF14; /* Lime Green */
    box-shadow: 0 0 3px #39FF14, 0 0 7px #39FF14;
}

.right .content {
    border-color: #FFFF33; /* Yellow */
    box-shadow: 0 0 3px #FFFF33, 0 0 7px #FFFF33;
}

.content:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 7px #39FF14, 0 0 14px #FFFF33;
}

/* Headings */
.content h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #FFFF33;
}

/* Paragraphs */
.content p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #ddd;
}

/* Event images */
.content img {
    width: 100%;
    max-width: 250px;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Circle marker with subtle glow */
.container::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #ffff66;
    border: 2px solid #55ff33;
    top: 20px;
    right: -9px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 5px #39FF14, 0 0 8px #FFFF33;
    transition: all 0.3s ease-in-out;
}

.right::before {
    left: -9px;
    right: auto;
    border-color: #39FF14;
}

/* Mobile view */
@media screen and (max-width: 768px) {
    .timeline::after { left: 25px; }
    .container {
        width: 100%;
        padding-left: 60px;
        padding-right: 25px;
    }
    .container::before {
        left: 15px;
        right: auto;
    }
    .right { left: 0; }
}


/*countdown code */

/* COUNTDOWN STYLING */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

#countdown-section {
  padding: 30px 15px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  border-top: 2px solid rgba(205, 220, 57, 0.5);
  border-bottom: 2px solid rgba(255, 235, 59, 0.5);
  font-family: 'Share Tech Mono', monospace;
  color: #fff;
}

.countdown-title {
  font-size: 1.8rem;
  color: #FFEB3B;
  margin-bottom: 20px;
  text-shadow: 0 0 8px #FFEB3B;
  letter-spacing: 1.5px;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.time-box {
  position: relative;
  background: rgba(20, 20, 20, 0.7);
  padding: 15px 20px;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: 0 0 15px rgba(205, 220, 57, 0.8);
  min-width: 80px;
  color: #CDDC39;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.time-box:hover {
  border-color: #FFEB3B;
  box-shadow: 0 0 20px #FFEB3B, 0 0 8px #CDDC39;
  color: #FFEB3B;
}

.time-box span {
  font-size: 2.8rem;
  font-weight: 700;
  display: block;
  margin-top: 5px;
  text-shadow: 0 0 15px #CDDC39;
  color: #CDDC39;
  transition: color 0.3s, text-shadow 0.3s;
}

.time-box:hover span {
  color: #FFEB3B;
  text-shadow: 0 0 20px #FFEB3B;
}

.time-box p {
  font-size: 1rem;
  margin-top: 5px;
  letter-spacing: 1px;
  color: #FFEB3B;
  text-shadow: 0 0 5px #FFEB3B;
}

.gear-icon {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 16px;
  height: 16px;
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 480px) {
  .countdown {
    flex-direction: column;
    align-items: center;
  }
  .time-box {
    margin-bottom: 15px;
    min-width: 120px;
  }
}




/* video css code */
/* Video Section */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

#teaser-section {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  font-family: 'Share Tech Mono', monospace;
  color: #CDDC39; /* lime green */
  box-shadow: 0 0 25px #CDDC39;
  position: relative;
}

.teaser-title {
  font-size: 2.4rem;
  color: #FFEB3B; /* yellow */
  margin-bottom: 20px;
  text-shadow: 0 0 12px #FFEB3B;
  letter-spacing: 2px;
}

.video-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px #CDDC39;
}

#teaser-video {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.7);
  border-radius: 12px;
}

#mute-toggle {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mute-toggle:hover {
  background: rgba(0, 0, 0, 0.85);
}

#mute-icon {
  fill: #CDDC39;
  transition: fill 0.3s ease;
}

.teaser-desc {
  margin: 20px 0 15px;
  font-size: 1.1rem;
  color: #FFEB3B;
  text-shadow: 0 0 10px #FFEB3B;
  letter-spacing: 0.8px;
}

.instagram-link {
  display: inline-block;
  font-size: 1.1rem;
  color: #FFEB3B;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 15px #FFEB3B;
  letter-spacing: 1.2px;
  transition: color 0.3s ease;
}

.instagram-link:hover {
  color: #CDDC39;
  text-shadow: 0 0 18px #CDDC39;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
  #teaser-section {
    padding: 15px;
    position: relative;
  }
  .teaser-title {
    font-size: 1.8rem;
  }
  .teaser-desc, .instagram-link {
    font-size: 1rem;
  }
  #mute-toggle {
    width: 36px;
    height: 36px;
    padding: 6px;
  }
}


/* ocation details */
#location-section {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Share Tech Mono', monospace;
}

.location-card {
  display: block;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #CDDC39;
  border-radius: 14px;
  padding: 20px;
  color: #CDDC39;
  text-decoration: none;
  box-shadow: 0 0 25px #CDDC39;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.location-card:hover,
.location-card:focus {
  box-shadow: 0 0 35px #FFEB3B;
  transform: scale(1.02);
  outline: none;
}

.location-card h3 {
  margin-top: 0;
  font-size: 2rem;
  color: #FFEB3B;
  text-shadow: 0 0 12px #FFEB3B;
  letter-spacing: 1.5px;
}

.location-card p {
  font-size: 1.1rem;
  margin-bottom: 15px;
  line-height: 1.4;
  color: #CDDC39;
}

.map-container iframe {
  border-radius: 12px;
  box-shadow: 0 0 15px #CDDC39;
  border: none;
  width: 100%;
  height: 200px;
  transition: box-shadow 0.3s ease;
}

.location-card:hover .map-container iframe {
  box-shadow: 0 0 25px #FFEB3B;
}

/* Responsive */
@media (max-width: 600px) {
  #location-section {
    padding: 15px;
  }

  .location-card h3 {
    font-size: 1.6rem;
  }

  .location-card p {
    font-size: 1rem;
  }

  .map-container iframe {
    height: 180px;
  }
}


/* =============================
   Responsive Alignment Fixes
   ============================= */

/* Center loading screen perfectly */
#loading-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 15px;
}

.forge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.forge-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: clamp(2rem, 6vw, 3.5rem);
}

/* Home section alignment */
.home-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 60px;
}

@media (max-width: 768px) {
  .home-section {
    padding-top: 40px;
  }
  .home-section h1 {
    font-size: clamp(2rem, 8vw, 4rem);
    text-align: center;
  }
}

/* Center other sections on mobile */
@media (max-width: 768px) {
  .about-cards,
  .committee-container,
  .register-cards-container,
  .crew-card-wrapper {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .about-card,
  .committee-card,
  .register-card {
    margin: 0 auto;
  }
}


/*bussection*/
/* Transparent background wrapper */
.bus-wrapper {
    position: relative;
    font-family: 'Poppins', sans-serif;
    color: #FFFF33;
}

.bus-wrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
    pointer-events: none;
}

/* Header */
header {
    text-align: center;
    padding: 30px;
    font-size: 40px;
    font-weight: bold;
    color: #FFFF33;
    font-family: 'Times New Roman', Times, serif;
    text-shadow: 0 0 12px rgba(255, 255, 51, 0.9),
               0 0 25px rgba(255, 255, 51, 0.7);
}

/* Bus section layout */
.bus-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 75px;
    max-width: 1200px;
    margin: 0 auto 50px;
    padding: 0 20px;
}

/* Card styling with fade-in */
.bus-card {
    background: rgba(255, 255, 51, 0.1); 
    border-radius: 20px;
    width: 300px;
    padding: 20px;
    text-align: center;
    border: 1px solid #FFFF33;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s forwards;
    transition: transform 0.3s, box-shadow 0.3s;
}

.bus-card:nth-child(1) { animation-delay: 0.2s; }
.bus-card:nth-child(2) { animation-delay: 0.4s; }
.bus-card:nth-child(3) { animation-delay: 0.6s; }

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover glow */
.bus-card:hover,
.bus-card:active {
    box-shadow: 0 0 10px #FFFF33, 0 0 15px #39FF14, 0 0 20px #00FFFF;
    transform: translateY(-5px);
}

/* Card content */
.bus-card img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 15px;
}

.bus-card h3 {
    margin: 10px 0;
    font-size: 22px;
    color: #FFFF33;
}

.bus-card p {
    font-size: 16px;
    color: #FFFF33;
}

.bus-card span {
    color: #39FF14;
    font-weight: bold;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
    .bus-card {
        width: 90%;
    }
}

/*contact*/
.mf-contacts {
  max-width: 1000px;
  margin: 40px auto;
  padding: 30px;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  font-family: Arial, sans-serif;
  color: #fff;
  text-align: center;
}

.mf-contacts h2 {
  color: #FFFF33;
  font-size: 1.8rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  text-shadow: 0 0 6px #FFFF33, 0 0 14px #FFFF33;
  letter-spacing: 2px;
}

/* Grid for contact groups */
.mf-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Individual cards */
.mf-contact-card {
  background: #222;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 6px rgba(50,205,50,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mf-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(50,205,50,0.8);
}

/* Card title */
.mf-card-title {
  color: limegreen;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  border-bottom: 1px solid limegreen;
  padding-bottom: 8px;
}

/* Contact list */
.mf-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.mf-contact-list li {
  margin: 12px 0;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
}

/* Name + role */
.mf-contact-name {
  color: limegreen;
  font-weight: bold;
}

.mf-contact-role {
  color: #bbb;
  font-style: italic;
  font-size: 0.9rem;
}

/* Phone */
.mf-contact-phone {
  margin-top: 3px;
  color: #FFFF33;
  font-weight: bold;
}



/*footer*/

/* feedback button Desktop default */
/* Desktop default */
#feedbackBtn {
    position: fixed;
    left: 20px;
    bottom: 140px; /* Increased gap from chatbot */
    background: #00ff00;
    color: black;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
}

/* Mobile view */
@media (max-width: 768px) {
    #feedbackBtn {
        left: auto !important;
        right: 15px !important;
        bottom: 120px !important; /* Increased gap from chatbot */
    }
}


/* 🎵 Audio Sound Button */

/* Default OFF state */
#soundBtn {
  position: fixed;
  top: 80px;              
  right: 20px;
  background: #FFD700;     /* Yellow (OFF) */
  color: black;
  padding: 14px 30px;      /* Wider for pill shape */
  border-radius: 50px;     /* Capsule shape */
  font-weight: bold;
  cursor: pointer;
  box-shadow: none;        /* No glow when OFF */
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Hover Effect (OFF state) */
#soundBtn:hover {
  transform: scale(1.05);
  background: #FFC300;  /* Slightly darker yellow */
}

/* Active ON state */
#soundBtn.active {
  background: #39FF14;    /* Lime Green (ON) */
  color: black;
  box-shadow: 0px 0px 15px #39FF14; /* Lime Green Glow */
}

/* Glow Effect when ON */
#soundBtn.active.glow {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 10px #39FF14; }
  50%  { box-shadow: 0 0 20px #39FF14; }
  100% { box-shadow: 0 0 10px #39FF14; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  #soundBtn {
    top: 100px;
    right: 20px;
    padding: 12px 26px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  #soundBtn {
    top: 70px;
    right: 15px;
    padding: 10px 20px;
    font-size: 16px;
  }
}
/* Countdown Section Mobile Fix */
@media (max-width: 600px) {
  #countdown-section {
    padding: 10px 0;
  }

  .countdown {
    display: flex;
    flex-direction: row;   /* align horizontally */
    justify-content: center;
    gap: 10px;             /* spacing between boxes */
    flex-wrap: nowrap;     /* keep in one row */
  }

  .time-box {
    min-width: 55px;
    padding: 6px;
    border-radius: 6px;
    text-align: center;
  }

  .time-box span {
    font-size: 1.2rem; /* smaller digits */
    font-weight: bold;
  }

  .time-box p {
    font-size: 0.7rem; /* smaller label (Days/Hours/Minutes/Seconds) */
    margin: 2px 0 0;
  }
}
/* Crew Section Mobile Margin Fix */
@media (max-width: 480px) {
  #crew-members-section {
    padding: 0 12px; /* add margin around the whole section */
  }

  .crew-card-wrapper {
    padding: 0 8px;  /* small spacing inside wrapper */
  }

  .crew-card {
    width: 100%;
    margin-bottom: 18px;
    padding: 15px;
    border-radius: 12px;
  }

  .crew-card img {
    max-height: 250px;
  }

  .crew-card h2 {
    font-size: 1rem;
  }
}
/* Home Section Mobile Fix */
@media (max-width: 480px) {
  .home-section {
    min-height: 100vh;   /* still full screen */
    padding-top: 60px;   /* reduce top padding */
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically centered */
    align-items: center;     /* horizontally centered */
    text-align: center;
  }

  .home-title-wrapper {
    flex-direction: column; /* stack logo + text */
    gap: 10px;
  }

  .home-title-wrapper img {
    width: 140px;  /* shrink logo */
    height: auto;
  }

  .home-title-wrapper h1 {
    font-size: 1.6rem;
    white-space: normal; /* allow wrapping */
  }

  .home-section .tagline {
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 0 5px;
  }

  .explore-animated-button {
    padding: 8px 18px;
    font-size: 0.9rem;
    margin-top: 15px;
  }
}
/* =========================
   Global Mobile Alignment Fix
   ========================= */
@media (max-width: 480px) {
  section, 
  #crew-members-section,
  #committee,
  #about,
  #mechforge-events-section,
  #countdown-section,
  .mf-schedule,
  .timeline,
  #dev-section {
    padding-left: 12px;
    padding-right: 12px;  /* consistent side spacing */
  }

  h1, h2, h3 {
    text-align: center;  /* center headings on mobile */
    word-wrap: break-word;
  }

  p {
    text-align: justify;
    line-height: 1.5;
    hyphens: auto;        /* break long words neatly */
    font-size: 0.9rem;
  }

  img {
    max-width: 100%;      /* prevent overflow */
    height: auto;
  }

  /* fix buttons */
  a, button {
    max-width: 100%;
    text-align: center;
  }
}
/* Home Section Description Fix for Mobile */
@media (max-width: 600px) {
  .home-section {
    text-align: center; /* force center alignment */
  }

  .home-section p,
  .home-section .tagline {
    text-align: center;  /* override any flex side effects */
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 90%;  /* prevent text hitting edges */
  }
}
@media (max-width: 480px) {
  .forge-text {
    font-size: 2rem;
    letter-spacing: 0.15em;
  }
  .steam {
    top: -30px;
    height: 25px;
  }
  .steam div {
    width: 8px;
    height: 25px;
  }
}
@media (max-width: 768px) {
  .crew-card img {
    width: 100%;
    height: auto;  /* instead of fixed height */
    max-height: 220px;  /* prevents overflow */
    object-fit: contain; /* keeps full head visible */
  }
}
#teaser-section {
  margin: 40px auto;
  padding: 20px;
}

@media (max-width: 600px) {
  #teaser-section {
    margin: 20px 10px;  /* adds space around teaser */
    padding: 15px;
  }
}/* ===== Uniform Crew Member Photos on Mobile ===== */
/* ===== Crew Member Photos Full View on Mobile ===== */
@media (max-width: 768px) {
  .crew-card img {
    width: 100%;
    max-width: 280px;   /* uniform width */
    height: auto;       /* auto height, no cropping */
    max-height: 300px;  /* optional: limit very tall images */
    object-fit: contain; /* show full head & body */
    border-radius: 15px; /* rounded corners */
  }
}
/* ===== Uniform Photo Size for Committee & Crew ===== */
/* ===== Uniform Photo Size for Committee & Crew (Portrait Style) ===== */
.crew-card img,
.crew-card img {
  width: 100%;
  max-width: 250px;   /* same width */
  height: 320px;      /* taller height */
  object-fit: cover;  /* fills box, keeps face centered */
  border-radius: 15px;
  display: block;
  margin: 0 auto;
}

/* Mobile view: slightly smaller but still portrait */
@media (max-width: 768px) {
  .crew-card img,
  .crew-card img {
    max-width: 220px;
    height: 280px;   /* consistent taller size */
  }
}

/* ===== Registration & Accommodation Responsive ===== */
.registration-container,
.accommodation-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;   /* allow wrapping */
  gap: 20px;         /* space between boxes */
}

/* Each card */
.registration-card,
.accommodation-card {
  flex: 1 1 320px;   /* flexible width, min 320px */
  max-width: 400px;  /* don’t get too wide */
  border-radius: 15px;
  padding: 20px;
  box-sizing: border-box;
}

/* Mobile view: stack neatly */
@media (max-width: 768px) {
  .registration-container,
  .accommodation-container {
    flex-direction: column;
    align-items: center;
  }

  .registration-card,
  .accommodation-card {
    width: 90%;       /* take most of the screen */
    max-width: 350px; /* cap width */
  }
}


/* css foter */

  @keyframes fadeInUp {
    from {opacity:0; transform:translateY(30px);}
    to {opacity:1; transform:translateY(0);}
  }
  footer a:hover {
    color:#00ffaa;
    text-shadow:0 0 8px #00ffaa;
  }
  @media(max-width:768px){
    footer div {flex:100%; text-align:center;}
  }


/* downloadinh */
/* Section Container */
.downloading-section-conatiner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

/* Pamphlet Card */
.downloading-section-card {
  max-width: 400px;
  background-color: transparent;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.downloading-section-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Image */
.downloading-section-card .pamphlet-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Heading */
.heading-downloading {
  font-size: 1.8rem;
  margin: 15px 0;
  color: #FFD700;
}

/* Paragraph */
.paragraph-downloading {
  font-size: 1rem;
  color: #444;
  padding: 0 15px;
  margin-bottom: 15px;
}

/* Download Button */
.button-pdownloading {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 20px;
  background: #28a745; /* green */
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.2s;
}

.button-pdownloading:hover {
  background: #218838; /* darker green */
  transform: translateY(-2px);
}







/* Pamphlet Container */
.pamphlet {
  max-width: 700px;
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.1); /* lite transparent */
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  overflow: hidden; /* round corners on image */
  backdrop-filter: blur(8px); /* glass effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;

  opacity: 0.6;
  object-fit: cover;


}

/* Hover Effect */
.pamphlet:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Pamphlet Image */
.pamphlet-img {
  width: 700px;
  height: 500px;
  object-fit: cover;
  opacity: 7.5;
  background-color: transparent ;
  display: block;
}

/* Pamphlet Content */
.pamphlet-content {
  padding: 20px;
}

.pamphlet-content h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #fff;
}

.pamphlet-content p {
  font-size: 1rem;
  line-height: 1.5;
  color: #f0f0f0;
  margin-bottom: 15px;
}

.pamphlet-content .btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  background: #00c6ff;
  color: #fff;
  transition: background 0.3s ease, transform 0.2s;
}

.pamphlet-content .btn:hover {
  background: #0072ff;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .pamphlet {
    max-width: 460px;
  }

  .pamphlet-img {
    height: 450px;
  }

  .pamphlet-content h2 {
    font-size: 1.4rem;
  }

  .pamphlet-content p {
    font-size: 0.9rem;
  }
}

/* ============================
   ORGANIZING COMMITTEE SECTION
   ============================ */

.org-section {
  padding: 50px 20px;
  background: transparent;
  font-family: "Poppins", sans-serif;
  text-align: center;
}

/* Title */
.org-title {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 50px;
  text-transform: uppercase;
  color: #ffff33; /* Yellow */
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(255, 255, 51, 0.9),
               0 0 25px rgba(255, 255, 51, 0.7);
}

/* Container */
.org-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  max-width: 1200px;
  margin: auto;
}

/* Cards */
.org-card {
  background: transparent;
  border-radius: 14px;
  padding: 20px;
  border: 2px solid #39ff14; /* Lime Green */
  text-align: center;
  color: #fff;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  width: 260px;
  height: 230px; /* taller for image */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Profile Images */
.org-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;  /* Circle image */
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid #39ff14;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.8);
}

/* Name */
.org-card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #39ff14;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
}

/* Designation */
.org-card p {
  font-size: 0.95rem;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

/* Hover Effect */
.org-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.9),
              0 0 30px rgba(255, 255, 0, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .org-title {
    font-size: 2.2rem;
  }
  .org-card {
    width: 90%;
    height: auto;
    padding: 25px;
  }
  .org-photo {
    width: 70px;
    height: 70px;
  }
}