html {
  scroll-behavior: smooth;
}
/* ===== DYNAMIC GRADIENT BACKGROUND ===== */
.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  background: linear-gradient(
    45deg,
    #ffffff,
    #ffffff,
     #ffffff,
      #ffffff,
    #cd4747b4,
    #ffffff
    
  );
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

/* Smooth animation */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ===== GLASS EFFECT ===== */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);

  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
/* EXTRA GLOW LAYERS */
.gradient-bg::before,
.gradient-bg::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
}

/* Red glow */
.gradient-bg::before {
  background: #f52323;
  top: 20%;
  left: 10%;
  animation: float1 10s infinite alternate ease-in-out;
}

/* White glow */
.gradient-bg::after {
  background: #ffffff;
  bottom: 10%;
  right: 10%;
  animation: float2 14s infinite alternate ease-in-out;
}

@keyframes float1 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 80px); }
}

@keyframes float2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-80px, -100px); }
}