@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Base reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
html {
  scroll-behavior: smooth;
}

body { background:#000; font-family:'Poppins',sans-serif; color:#fff; }

/* ================= NAVBAR ================= */
.navbar{
  position:fixed; top:0; width:100%;
  background:rgba(10,10,10,.85);
  border-bottom:1px solid rgba(0,255,136,.2);
  backdrop-filter:blur(10px);
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 30px; z-index:1000;
}
.nav-left{display:flex; align-items:center; gap:10px;}
.logo{height:35px; width:35px;}
.nav-title{color:#00ff88; font-weight:600; font-size:1.1rem;}
.nav-links{display:flex; align-items:center; gap:25px;}
.nav-links a{color:#fff; text-decoration:none; font-weight:500; transition:color .3s,text-shadow .3s;}
.nav-links a:hover{color:#00ff88; text-shadow:0 0 10px rgba(0,255,136,.5);}
.logout-btn{
  background:linear-gradient(135deg,#00ffb3,#00cc66);
  border:none; color:#000; font-weight:600; padding:8px 16px;
  border-radius:8px; cursor:pointer; transition:transform .2s, box-shadow .3s;
}
.logout-btn:hover{transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,255,136,.3);}
.menu-toggle{display:none; color:#00ff88; font-size:1.8rem; cursor:pointer;}
@media (max-width:768px){
  .nav-links{
    display:none; flex-direction:column; background:rgba(0,0,0,.95);
    position:absolute; top:60px; right:0; padding:20px;
    border-left:1px solid rgba(0,255,136,.2); width:200px;
  }
  .nav-links.active{display:flex;}
  .menu-toggle{display:block;}
}

/* ================= HERO ================= */
.hero{
  min-height:100vh;
  background:linear-gradient(180deg,#001a00 0%,#000 100%);
  display:flex; align-items:center; justify-content:center;
  padding:0 10%; padding-top:70px;
}
.hero-content{
  display:flex; justify-content:space-between; align-items:center;
  gap:60px; flex-wrap:wrap; max-width:1200px;
}
.hero-content .text{flex:1; max-width:500px;}
.hero-content h1{font-size:3rem; line-height:1.3; color:#00ff88; text-shadow:0 0 25px rgba(0,255,136,.3);}
.hero-content p{color:#bbb; margin:15px 0 25px; font-size:1.1rem;}
.hero-content .image{flex:1; text-align:right;}
.hero-content .image img{width:90%; max-width:500px; border-radius:20px; filter:drop-shadow(0 0 40px rgba(0,255,136,.25));}

/* Generic section wrapper */
.section{width:100%; padding:100px 10%; box-sizing:border-box;}
.section h2{font-size:2rem; color:#00ff88; text-align:center; margin-bottom:50px; text-shadow:0 0 15px rgba(0,255,136,.25);}
.section p{color:#ccc; line-height:1.7;}

/* ================= BUTTONS (scoped, not global) ================= */
.cta-btn{
  display:inline-block; background:linear-gradient(135deg,#00ffb3,#00cc66);
  padding:12px 28px; color:#000; font-weight:600; border-radius:10px;
  text-decoration:none; transition:transform .3s, box-shadow .3s;
}
.cta-btn:hover{transform:translateY(-2px); box-shadow:0 0 20px rgba(0,255,136,.4);}

.neon-btn{
  display:inline-block; 
  background:linear-gradient(135deg,#00ffb3,#00cc66);
  color:#000; 
  font-weight:600; 
  border:none; 
  padding:12px 28px; 
  border-radius:10px;
  cursor:pointer; 
  transition:transform .3s, box-shadow .3s;
  min-width:140px; /* <<< ADD THIS LINE */
}

.neon-btn:hover{transform:translateY(-2px); box-shadow:0 0 20px rgba(0,255,136,.4);}

/* ================= ABOUT (bluish gradient) ================= */
.about{
  background:linear-gradient(180deg,#010d08 0%, #001a18 40%, #000 100%);
  padding-top:90px; padding-bottom:100px;
}
.about-container{
  display:flex; align-items:center; justify-content:center;
  gap:50px; flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.about-text{flex:1; max-width:500px; text-align:left;}
.about-image img{width:100%; max-width:450px; border-radius:20px; filter:drop-shadow(0 0 50px rgba(0,255,136,.2));}

/* ================= ATTENDANCE ================= */
.attendance{
  background:linear-gradient(180deg,#001d11 0%, #000c05 100%);
  text-align:center; padding:120px 10%;
}
.attendance-container{
  display:flex; justify-content:center; align-items:flex-start;
  gap:60px; flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.attendance-info{flex:1; max-width:400px; text-align:left;}
.attendance-info p{color:#bbb; margin-bottom:25px;}
.attendance-panel{
  flex:1.2; background:rgba(20,20,20,.9); border:1px solid rgba(0,255,136,.2);
  border-radius:15px; padding:25px; box-shadow:0 0 25px rgba(0,255,136,.05); overflow-x:auto;
}
.attendance-panel table{width:100%; border-collapse:collapse; color:#ddd;}
.attendance-panel th, .attendance-panel td{padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.1);}
.attendance-panel tr:nth-child(even){background:rgba(255,255,255,.02);}
.attendance-panel tr:hover{background:rgba(0,255,136,.08);}
.attendance-panel th{color:#00ff88; text-align:left;}

/* ================= PROBLEMS ================= */
.problems{
  background:linear-gradient(180deg,#010d08 0%, #001a18 40%, #000 100%);
  position:relative; z-index:1; text-align:center; padding:120px 10%;
}
.problems::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 80%, rgba(150,0,255,.08), transparent 70%);
  z-index:-1;
}
.problem-container{
  display:flex; justify-content:center; align-items:stretch;
  gap:60px; flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.problem-text{flex:1; max-width:400px; text-align:left;}
.problem-text p{color:#bbb; margin-bottom:25px;}
.problem-card{
  flex:1.2; background:rgba(20,20,20,.9); border:1px solid rgba(0,255,136,.2);
  border-radius:15px; padding:30px; text-align:left; box-shadow:0 0 25px rgba(0,255,136,.08);
  transition:transform .3s, box-shadow .3s;
}
.problem-card:hover{transform:translateY(-5px); box-shadow:0 0 25px rgba(0,255,136,.25);}
.problem-card strong{color:#00ff88;}

/* ================= CONTACT ================= */
.contact{
  background:linear-gradient(160deg,#001a0d 0%, #000 100%);
  padding:100px 10% 90px; text-align:center;
}
.contact h2{margin-bottom:40px;}
.contact-card{
  background:rgba(15,15,15,.85); border:1px solid rgba(0,255,136,.2);
  padding:55px 45px; border-radius:25px; max-width:700px; margin:0 auto;
  box-shadow:0 0 40px rgba(0,255,136,.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.contact-card p{font-size:1rem; color:#ccc; max-width:600px; margin-bottom:18px; line-height:1.8;}

/* icon buttons under email */
.contact-buttons{
  margin-top:22px; width:100%; max-width:420px;
  display:flex; flex-direction:column; align-items:center;
}
.info-btn{
  width:100%; margin-top:12px;
  background:rgba(0,255,136,.12);
  color:#00ffb3; border:1px solid rgba(0,255,136,.25);
  backdrop-filter:blur(8px);
  padding:12px 18px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; cursor:pointer; transition:transform .2s, box-shadow .3s, background .3s;
}
.info-btn i{color:#00ff88;}
.info-btn:hover{transform:translateY(-2px); box-shadow:0 0 18px rgba(0,255,136,.35); background:rgba(0,255,136,.18);}

/* ================= FOOTER ================= */
.footer{
  background:#050505; border-top:1px solid rgba(0,255,136,.25);
  text-align:center; padding:25px; color:#888; font-size:.9rem;
}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .hero-content{flex-direction:column; text-align:center; gap:40px;}
  .hero-content .image{text-align:center;}
  .section{padding:80px 6%;}
  .attendance-container, .problem-container{flex-direction:column; align-items:center;}
  .attendance-info, .problem-text{text-align:center; max-width:100%;}
  .attendance-panel, .problem-card{width:100%;}
}

.attendance-info .neon-btn {
  width: 200px;
  text-align: center;
  display: inline-block;
  margin-top: 10px;
  font-size: 1rem;
}