/* ===================== */
/* RESET */
/* ===================== */

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


/* ===================== */
/* HTML + BODY */
/* ===================== */

html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {

  font-family:
  'Rajdhani', sans-serif;

  color:
  white;

  padding-top:
  70px;

  background:
  black;
}


/* ===================== */
/* VIDEO BACKGROUND */
/* ===================== */

.video-background {

  position:
  fixed;

  top:
  0;

  left:
  0;

  width:
  100%;

  height:
  100%;

  overflow:
  hidden;

  z-index:
  -10;
}

.video-background video {

  width:
  100%;

  height:
  100%;

  object-fit:
  cover;

  filter:
  brightness(0.72)
  contrast(1.02)
  saturate(1.02)
  blur(0px);
}

/* OVERLAY */

.video-background::after {

  content:
  "";

  position:
  absolute;

  inset:
  0;

  background:
  rgba(0,0,0,0.10);

  z-index:
  1;
}


/* ===================== */
/* OVERLAY */
/* ===================== */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(0,212,255,0.10),
      transparent 70%
    ),
    linear-gradient(
      rgba(0,0,0,0.20),
      rgba(0,0,0,0.55)
    );

  z-index: -1;
}


/* ===================== */
/* NAVBAR */
/* ===================== */

.navbar {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  background:
  rgba(0, 20, 40, 0.84);

  backdrop-filter:
  blur(14px);

  border-bottom:
  1px solid rgba(0,212,255,0.25);

  z-index: 9999;
}


/* ===================== */
/* NAV CONTAINER */
/* ===================== */

.nav-container {

  width:
  100%;

  max-width:
  1850px;

  margin:
  0 auto;

  padding:
  0 28px;

  display:
  flex;

  justify-content:
  space-between;

  align-items:
  center;

  height:
  70px;

  gap:
  18px;
}


/* ===================== */
/* LOGO + SOCIAL */
/* ===================== */

.logo {

  display:
  flex;

  align-items:
  center;
}

.logo img {

  height:
  48px;

  width:
  auto;

  display:
  block;
}


/* ===================== */
/* SOCIAL */
/* ===================== */

.social-icons {

  display:
  flex;

  align-items:
  center;

  gap:
  12px;
}


/* ===================== */
/* MENU */
/* ===================== */

.nav-links {

  display:
  flex;

  align-items:
  center;

  justify-content:
  center;

  gap:
  20px;

  flex-wrap:
  nowrap;

  flex:
  1;
}


/* ===================== */
/* LINK */
/* ===================== */

.nav-links a {

  position:
  relative;

  text-decoration:
  none;

  color:
  rgba(255,255,255,0.92);

  font-family:
  'Orbitron', sans-serif;

  font-size:
  0.82rem;

  letter-spacing:
  0.8px;

  text-transform:
  uppercase;

  white-space:
  nowrap;

  transition:
  0.3s ease;
}


/* ===================== */
/* ACTIVE */
/* ===================== */

.nav-links a.active {

  color:
  #00d4ff;

  text-shadow:
  0 0 10px rgba(0,212,255,0.8);
}


/* ===================== */
/* DOT */
/* ===================== */

.nav-links a.active::before {

  content:
  "";

  position:
  absolute;

  left:
  -12px;

  top:
  50%;

  transform:
  translateY(-50%);

  width:
  5px;

  height:
  5px;

  border-radius:
  50%;

  background:
  #00d4ff;

  animation:
  dotPulse 1.6s infinite ease-in-out;
}


/* ===================== */
/* HOVER */
/* ===================== */

.nav-links a:hover {

  color:
  #ffffff;

  text-shadow:
  0 0 10px rgba(0,212,255,0.7);
}


/* ===================== */
/* ANIMATION */
/* ===================== */

@keyframes dotPulse {

  0% {

    background:
    #00d4ff;

    box-shadow:
    0 0 5px #00d4ff;
  }

  50% {

    background:
    #ffffff;

    box-shadow:
    0 0 12px #00d4ff,
    0 0 25px rgba(0,212,255,0.7);
  }

  100% {

    background:
    #00d4ff;

    box-shadow:
    0 0 5px #00d4ff;
  }
}


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

.hero {

  min-height:
  calc(100vh - 70px);

  display:
  flex;

  flex-direction:
  column;

  align-items:
  center;

  justify-content:
  center;
}

.hero-logo {

  width:
  100%;

  max-width:
  500px;

  height:
  auto;
}

.hero-subtitle {

  margin-top:
  20px;

  font-size:
  1.3rem;

  opacity:
  0.9;
}


/* ===================== */
/* CONTAINER */
/* ===================== */

.container {

  max-width:
  780px;

  margin:
  120px auto;

  padding:
  40px;

  background:
  rgba(0,0,0,0.55);

  backdrop-filter:
  blur(10px);

  border-radius:
  12px;

  border:
  1px solid rgba(0,212,255,0.15);
}


/* ===================== */
/* CONTACT */
/* ===================== */

.contact-container {

  max-width:
  700px;

  margin:
  120px auto;

  padding:
  40px;

  background:
  rgba(0,0,0,0.60);

  backdrop-filter:
  blur(12px);

  border-radius:
  12px;

  border:
  1px solid rgba(0,212,255,0.18);

  box-shadow:
  0 0 25px rgba(0,212,255,0.15);
}


/* ===================== */
/* TITLES */
/* ===================== */

.container h1,
.contact-container h1 {

  font-family:
  'Orbitron', sans-serif;

  font-size:
  3rem;

  margin-bottom:
  35px;

  text-align:
  center;

  background:
  linear-gradient(
    90deg,
    #00d4ff,
    #7a00ff
  );

  -webkit-background-clip:
  text;

  -webkit-text-fill-color:
  transparent;

  text-shadow:
  0 0 25px rgba(0,212,255,0.9);
}


/* ===================== */
/* SUBTITLE */
/* ===================== */

.container h3 {

  margin-top:
  45px;

  margin-bottom:
  15px;

  font-size:
  1.4rem;

  letter-spacing:
  1.5px;

  color:
  #00d4ff;

  border-left:
  4px solid #00d4ff;

  padding-left:
  12px;

  text-shadow:
  0 0 12px rgba(0,212,255,0.7);
}


/* ===================== */
/* TEXT */
/* ===================== */

.container p,
.contact-container p {

  margin-bottom:
  18px;

  line-height:
  1.8;

  font-size:
  1.1rem;

  color:
  #e5e5e5;

  text-shadow:
  0 0 3px #000;
}


/* ===================== */
/* STRONG */
/* ===================== */

.container p strong {

  color:
  #ffffff;

  text-shadow:
  0 0 10px rgba(0,212,255,0.6);
}


/* ===================== */
/* HIGHLIGHT */
/* ===================== */

.highlight {

  color:
  #00d4ff;

  font-weight:
  bold;

  font-size:
  1.2rem;
}


/* ===================== */
/* QUOTE */
/* ===================== */

.quote {

  margin-top:
  40px;

  text-align:
  center;

  font-style:
  italic;

  font-size:
  1.1rem;

  opacity:
  0.9;

  text-shadow:
  0 0 15px rgba(0,212,255,0.6);
}


/* ===================== */
/* CHI SIAMO PAGE */
/* ===================== */

.presentation-section {

  width:
  100%;

  max-width:
  1280px;

  margin:
  55px auto;

  padding:
  30px;

  overflow:
  hidden;

  background:
  rgba(5,15,25,0.72);

  backdrop-filter:
  blur(10px);

  border-radius:
  18px;

  border:
  1px solid rgba(0,200,255,0.08);

  box-shadow:
  0 0 40px rgba(0,0,0,0.45);

  box-sizing:
  border-box;
}


/* ===================== */
/* PRESENTATION TITLE */
/* ===================== */

.presentation-title {

  font-family:
  'Orbitron', sans-serif;

  font-size:
  2.4rem;

  letter-spacing:
  3px;

  text-align:
  center;

  color:
  #1e90ff;

  margin-bottom:
  35px;

  text-transform:
  uppercase;

  text-shadow:
  0 0 18px rgba(0,120,255,0.35);
}


/* ===================== */
/* SECTION TITLE */
/* ===================== */

.section-title {

  display:
  flex;

  align-items:
  center;

  gap:
  14px;

  margin-bottom:
  20px;

  font-family:
  'Orbitron', sans-serif;

  font-size:
  1.15rem;

  letter-spacing:
  2px;

  text-transform:
  uppercase;

  color:
  #00cfff;
}


/* ===================== */
/* SECTION BAR */
/* ===================== */

.section-title::before {

  content:
  "";

  width:
  4px;

  height:
  26px;

  background:
  #00cfff;

  box-shadow:
  0 0 10px rgba(0,255,255,0.5);
}


/* ===================== */
/* PRESENTATION TEXT */
/* ===================== */

.presentation-text {

  font-size:
  1rem;

  line-height:
  1.9;

  color:
  rgba(255,255,255,0.82);

  margin-bottom:
  40px;
}


/* ===================== */
/* VIDEO */
/* ===================== */

.video-container {

  position:
  relative;

  width:
  100%;

  max-width:
  1100px;

  margin:
  20px auto 0 auto;

  border-radius:
  16px;

  overflow:
  hidden;

  box-shadow:
  0 0 35px rgba(0,180,255,0.18);
}

.video-container iframe {

  width:
  100%;

  height:
  400px;

  border:
  none;

  display:
  block;
}


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

.footer-bar {

  width:
  100%;

  height:
  70px;

  display:
  flex;

  align-items:
  center;

  justify-content:
  center;

  background:
  rgba(0, 20, 40, 0.84);

  backdrop-filter:
  blur(14px);

  border-top:
  1px solid rgba(0,212,255,0.25);

  box-shadow:
  0 -2px 20px rgba(0,0,0,0.35);

  margin-top:
  80px;

  padding:
  0 20px;

  overflow:
  hidden;
}

.footer-content {

  font-family:
  'Rajdhani', sans-serif;

  font-size:
  0.95rem;

  letter-spacing:
  0.5px;

  color:
  rgba(255,255,255,0.78);

  text-align:
  center;

  white-space:
  nowrap;

  text-shadow:
  0 0 6px rgba(0,0,0,0.45);
}


/* ===================== */
/* HAMBURGER */
/* ===================== */

.hamburger {

  display:
  none;
}


/* ===================== */
/* MOBILE */
/* ===================== */

@media screen and (max-width: 768px) {

  .hamburger {

    display:
    block;

    font-size:
    28px;

    cursor:
    pointer;

    color:
    #00d4ff;
  }

  .nav-links {

    position:
    fixed;

    top:
    70px;

    left:
    0;

    width:
    100%;

    height:
    calc(100vh - 70px);

    background:
    rgba(0,0,0,0.96);

    backdrop-filter:
    blur(10px);

    flex-direction:
    column;

    align-items:
    center;

    justify-content:
    center;

    gap:
    30px;

    transform:
    translateY(-100%);

    transition:
    transform 0.3s ease;
  }

  .nav-links.active {

    transform:
    translateY(0);
  }

  .nav-links a {

    font-size:
    1rem;
  }

  .presentation-section {

    width:
    calc(100% - 20px);

    padding:
    22px 18px;
  }

  .presentation-title {

    font-size:
    1.8rem;
  }

  .video-container iframe {

    height:
    230px;
  }

  .container,
  .contact-container {

    width:
    calc(100% - 20px);

    padding:
    25px;
  }

  .footer-bar {

    height:
    auto;

    padding:
    18px;
  }

  .footer-content {

    white-space:
    normal;

    line-height:
    1.6;

    font-size:
    0.85rem;
  }
}
/* ===================== */
/* DISCORD LIVE */
/* ===================== */

.nz-discord-section{

    position:absolute;

    top:140px;

    left:40px;

    z-index:10;

    width:auto;

    margin:0;
}

.nz-discord-card{

    width:500px;

    background:rgba(5,10,15,.92);

    border:1px solid rgba(0,200,255,.25);

    box-shadow:
    0 0 30px rgba(0,170,255,.08),
    inset 0 0 20px rgba(0,170,255,.05);

    padding:30px;

    position:relative;

    overflow:hidden;
}

.nz-discord-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:2px;

    background:#00d9ff;

    animation:scan 4s linear infinite;
}

@keyframes scan{

    from{ left:-100%; }

    to{ left:100%; }
}

.nz-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.nz-label{

    color:#00d9ff;

    font-size:12px;

    letter-spacing:3px;
}

nz-header h2{

    font-size:28px;

    color:white;

    margin-top:5px;
}

.nz-online span{

    font-size:40px;

    color:#00ff88;

    font-weight:bold;
}

.nz-members{

    display:grid;

    grid-template-columns:1fr;

    gap:8px;
}

.nz-member{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(0,212,255,.15);

    border-left:3px solid #00d9ff;

    min-height:70px;
}

.nz-member img{

    width:36px;

    height:36px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;
}

.nz-member-name{

    color:white;
}

.nz-member-status{

    color:#00ff88;

    font-size:11px;
}

.nz-button{

    display:inline-block;

    margin-top:20px;

    padding:12px 24px;

    border:1px solid #00d9ff;

    color:#00d9ff;

    text-decoration:none;
}
.nz-member-name{

    color:white;

    font-size:14px;

    line-height:1.2;

    word-break:break-word;
}

.nz-member-status{

    color:#00ff88;

    font-size:11px;

    margin-top:2px;
}