:root {

  --green: #3aa8d8;
  --navy: #575757;
  --light: whitesmoke;
  --border: #E2E8F0;

}

* { 
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Space Grotesk', sans-serif; 
  }

/* BODY */
body { 
  line-height:1.6;
  min-height: 100vh;
  background: var(--light);
  color: var(--light);
}

a { 
  color: lightslategray; 
  text-decoration:none; 
  }


/* NAVBAR */
/* header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding:16px 30px;
  gap: 15px;

}

.logo {
  width: 120px;
  height: auto;
  display: block;
  margin-right: 10px;

} */

/* Header */
header { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding:20px 20%;
  display:flex;
  justify-content:space-between;
}

header div img { 
  width: 120px;
  height: auto;
  display: block;
  margin-right: 10px;
}

.nav {
  display: flex; 
  gap: 30px; 
  align-items: center;
}

.nav a:hover { 
  color: whitesmoke; 
}

.logout-btn {

  background: var(--green);
  border:none;
  padding:10px 18px;
  color:white;
  border-radius:8px;
  font-size: 18px;
  font-weight:bold;
  cursor:pointer;

}

/* Hero */
.hero {
  text-align: center;
  padding: 10% 20%;
  
  border-bottom-left-radius: 100px;
  overflow: hidden;
  max-height: 900px;
  background:
    radial-gradient(
    circle at 120% -20%,
    rgba(17, 197, 241, 0.25),
    rgba(17, 197, 241, 0.12) 25%,
    rgba(76, 197, 241, 0.05) 35%,
    transparent 60%
  ),
  #181818;
}

.hero-content { 
  min-width:200px; 
  padding-bottom: 40px; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
}

.hero-content h1 { 
  font-size:4.0rem; 
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom:20px; 
}

.hero-content p { 
  font-size: 1.15rem;
  font-weight: 400;
  opacity: 0.85;
  margin-bottom: 30px; 
  max-width: 700px;
}

.hero-content a { 

  margin-bottom:30px; 
 
}

.hero-image { 
  min-width:300px; 
  width:100%; 
  border-radius: 100px; 
}

/* BUTTONS */
button:hover {
  opacity: 0.9;

}


/* CONTAINER */
.container {

  max-width:1200px;
  margin:auto;
  padding:20px;

}

/* dashboard h1 */
.container h1 {

  margin-bottom:25px;

}

/* Footer */
footer { 
  display: flex; 
  justify-content: space-between; 
  background:#111; 
  color:#fff; 
  padding:40px 10%; 
  align-items: center; 
  text-align:center;
  margin-top: auto;
}

footer div { 
  display:flex; 
  gap:20px; 
  align-items: center;
}

footer div a:hover { 
  color: var(--light);

}

.social-icons img { 
  width:24px; 
  height:24px; 
}

/* Buttons */
button {
  border: none;

}

.button {
  position: relative;
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 600;
  color: whitesmoke;
  background: linear-gradient(135deg, #4cc5f1, #3aa8d8);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;

  /* Glow */
  box-shadow: 0 8px 25px rgba(76,197,241,0.35);
}

.button2 {
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 600;
  color: whitesmoke;
  background: linear-gradient(135deg, #4cc5f1, #3aa8d8);
  cursor: pointer;

}

/* .button3 {
  padding: 10px 24px;
  border-radius: 30px;
  font-weight: 600;
  color: whitesmoke;
  background: linear-gradient(135deg, #4cc5f1, #3aa8d8);
  cursor: pointer;

} */

/* Hover Lift + Stronger Glow */
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(76,197,241,0.55);
}

/* Shimmer Effect */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-25deg);
}

/* Animate shimmer on hover */
.button:hover::before {
  animation: shimmer 0.9s ease forwards;
}

#app-loader {
    position: fixed;
    inset: 0;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #1e293b;
    border-top: 4px solid #38bdf8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

/* Responsive */
@keyframes shimmer {
  0% { left: -120%; }
  100% { left: 130%; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}