/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0b0e1a;color:#fff;line-height:1.6;padding-top:100px}

/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto:wght@400;500;700&display=swap');

/* FONT STYLES */
body {
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* HEADER */
header{
  position:fixed;top:0;left:0;width:100%;
  background:rgba(15,20,40,0.95);
  backdrop-filter:blur(8px);
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(0,150,255,0.4);
  z-index:100;
}
header .logo{display:flex;align-items:center;gap:10px}
header .logo img{height:40px;width:auto}
header .logo h1{font-size:1.3rem;color:#00ccff;text-shadow:0 0 12px #00ccff}
header nav a{
  margin:0 10px;color:#00ccff;text-decoration:none;font-weight:bold;
}
header nav a:hover{text-decoration:underline}

/* SECTIONS */
section{max-width:800px;margin:0 auto;padding:20px 20px 40px 20px}
h2{color:#00ccff;text-shadow:0 0 10px #00ccff;margin-bottom:15px}

/* BOXES */
.info-box{
  background:#141a2f;
  border:1px solid rgba(0,150,255,0.3);
  border-radius:12px;padding:20px;margin-bottom:20px;
}
.info-box p{margin-bottom:10px;color:#ccc}
.info-box a{
  color:#00ccff;text-decoration:none;text-shadow:0 0 6px #00ccff;
}
.info-box a:hover{text-decoration:underline}

/* TEAM */
.team-box{display:flex;flex-wrap:wrap;gap:15px}
.team-member{
  background:#0f1528;padding:10px;border-radius:10px;
  flex:1 1 180px;
}
.team-member h4{color:#00ccff;margin-bottom:5px}
.team-member p{color:#ccc;font-size:0.9rem}

/* GOALS */
.goal-list{list-style:none;padding-left:0}
.goal-list li{
  background:#0f1528;padding:10px;margin-bottom:5px;border-radius:8px;
  border-left:4px solid #00ccff;
}

/* NEWS */
.news-item{
  background:#141a2f;border:1px solid rgba(0,150,255,0.3);
  border-radius:12px;padding:15px;margin-bottom:15px;
  transition:0.3s;
}
.news-item:hover{box-shadow:0 0 20px #00ccff77;transform:translateY(-2px)}
.news-item h3{color:#fff;margin-bottom:5px}
.news-item p{color:#bbb;margin-bottom:5px}
.news-item span{font-size:0.8rem;color:#00ccff;text-shadow:0 0 6px #00ccff}

/* FILTER BUTTONS */
.filter {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.filter button {
  background: #0f1528;
  color: #00ccff;
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.filter button:hover {
  background: #00ccff;
  color: #0f1528;
}

/* DROPDOWN FILTER */
.filter select {
  background: #0f1528;
  color: #00ccff;
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.filter select:hover {
  background: #00ccff;
  color: #0f1528;
}

/* MOBILE FILTER */
@media (max-width: 768px) {
  .filter {
    flex-direction: column;
    align-items: center;
  }

  .filter select {
    width: 100%;
    max-width: 300px;
    margin-bottom: 10px;
  }

  .filter button {
    width: 100%;
    max-width: 300px;
    margin-bottom: 10px;
  }
}

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

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

/* APPLY ANIMATIONS */
.info-box, .team-member, .news-item, .goal-list li {
  animation: fadeIn 0.6s ease-in-out;
}

/* GLOW EFFECTS */
body {
  position: relative;
}

.info-box, .team-member, .news-item, .goal-list li {
  position: relative;
  overflow: hidden;
}

.info-box::before, .team-member::before, .news-item::before, .goal-list li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, #00ccff33, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.info-box:hover::before, .team-member:hover::before, .news-item:hover::before, .goal-list li:hover::before {
  opacity: 1;
}



/* RESPONSIVE */
@media (max-width: 768px) {
  header{flex-direction:column;align-items:flex-start;padding:15px}
  header .logo h1{font-size:1rem}
  header nav{margin-top:8px}
  header nav a{display:inline-block;margin:5px 8px}
  .team-box{flex-direction:column}
  section{padding:15px}
}