body{
      margin-top:60px;
    }

    /* Background Carousel */
.bg-carousel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}
.bg-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.bg-slide.active {
  opacity: 1;
}
.bg-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}

/* Glass Card Styling */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Form Styling */
.form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  padding: 0.8rem 1rem;
}
.form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
  color: #fff;
}
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.form-label {
  color: #fff;
  font-weight: 500;
}
.form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  padding: 0.8rem 1rem;
}
.form-select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
  color: #0e0101;
}

/* Button Styling */
.btn-primary {
  background: linear-gradient(45deg, #3a86ff, #4361ee);
  border: none;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.btn-outline-light {
  border-width: 2px;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  font-weight: 500;
}

/* Password Toggle */
.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  z-index: 5;
}
.password-input-container {
  position: relative;
}

/* Alert Messages */
.alert {
  border-radius: 10px;
  border: none;
}
.alert-danger {
  background: rgba(220, 53, 69, 0.8);
  color: white;
}
.alert-success {
  background: rgba(25, 135, 84, 0.8);
  color: white;
}
.alert-warning {
  background: rgba(255, 193, 7, 0.8);
  color: white;
}

/* Loading Spinner */
.btn-loading {
  position: relative;
  color: transparent;
}
.btn-loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .glass-card {
    padding: 1.5rem;
  }
}

/* Offline indicator */
.offline-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  z-index: 9999;
  display: none;
}

/* Navbar styling */
.navbar-transparent {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}
.navbar-brand {
  color: #fff !important;
  font-weight: 700;
  font-size: 1.5rem;
}
.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active {
  color: #fff !important;
}
.btn-login {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}
.btn-login:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Link to registration page */
.auth-link {
  color: #fff;
  text-align: center;
  margin-top: 1.5rem;
}
.auth-link a {
  color: #3a86ff;
  font-weight: 600;
  text-decoration: underline;
}

/* CAPTCHA Styling */
.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  border-radius: 10px;
  padding: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.captcha-code {
  flex: 1;
  padding: 12px 15px;
  background: linear-gradient(45deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 6px;
  text-align: center;
  color: #1a4d7f;
  font-family: 'Courier New', monospace;
  user-select: none;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: perspective(400px) rotateX(5deg) rotateY(-8deg) rotateZ(-3deg) skewX(-8deg) skewY(4deg);
  filter: contrast(1.2) brightness(0.95);
  font-style: italic;
  /* 3D Shadow and Blue tint */
  text-shadow: 
    /* Deep 3D shadow layers */
    2px 2px 0px rgba(0, 0, 0, 0.3),
    4px 4px 0px rgba(0, 0, 0, 0.25),
    6px 6px 0px rgba(0, 0, 0, 0.2),
    8px 8px 0px rgba(0, 0, 0, 0.15),
    10px 10px 0px rgba(0, 0, 0, 0.1),
    /* Blue glow and depth */
    -1px -1px 2px rgba(100, 150, 255, 0.4),
    1px 1px 2px rgba(50, 100, 200, 0.3),
    -2px -2px 4px rgba(100, 150, 255, 0.3),
    2px 2px 4px rgba(30, 80, 180, 0.25),
    /* Additional blue shadow for 3D effect */
    3px 3px 1px rgba(30, 100, 200, 0.4),
    5px 5px 2px rgba(20, 80, 180, 0.3),
    7px 7px 3px rgba(10, 60, 160, 0.2);
}

/* Color gradient overlay for random-like letter colors */
.captcha-code {
  background: 
    linear-gradient(90deg, 
      rgba(255, 50, 50, 0.3) 0%,
      rgba(255, 150, 0, 0.3) 15%,
      rgba(255, 200, 0, 0.3) 30%,
      rgba(0, 150, 0, 0.3) 45%,
      rgba(0, 100, 255, 0.3) 60%,
      rgba(150, 0, 255, 0.3) 75%,
      rgba(255, 0, 150, 0.3) 90%,
      rgba(255, 50, 50, 0.3) 100%
    ),
    linear-gradient(45deg, #f5f7fa 0%, #c3cfe2 100%);
  background-blend-mode: color-dodge;
}

/* Distorted lines and noise overlay */
.captcha-code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Aggressive wavy diagonal lines */
    repeating-linear-gradient(
      35deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.12) 2px,
      rgba(0, 0, 0, 0.12) 3px
    ),
    /* Curved horizontal lines */
    repeating-linear-gradient(
      -20deg,
      transparent,
      transparent 4px,
      rgba(0, 0, 0, 0.10) 4px,
      rgba(0, 0, 0, 0.10) 5px
    ),
    /* Fine vertical lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.08) 1px,
      rgba(0, 0, 0, 0.08) 2px
    ),
    /* Random noise pattern */
    repeating-linear-gradient(
      45deg,
      transparent 0%,
      transparent 6%,
      rgba(0, 0, 0, 0.07) 6%,
      rgba(0, 0, 0, 0.07) 8%,
      transparent 8%,
      transparent 14%
    ),
    /* Vertical distortion lines */
    repeating-linear-gradient(
      180deg,
      transparent 0%,
      transparent 7%,
      rgba(0, 0, 0, 0.08) 7%,
      rgba(0, 0, 0, 0.08) 9%,
      transparent 9%,
      transparent 18%
    );
  pointer-events: none;
  animation: distortLines 3.5s ease-in-out infinite;
  transform: skewX(-5deg) skewY(3deg);
}

@keyframes distortLines {
  0% {
    transform: skewX(-5deg) skewY(3deg) translateX(0);
    filter: hue-rotate(0deg) brightness(1);
  }
  25% {
    transform: skewX(4deg) skewY(-2deg) translateX(-2px);
    filter: hue-rotate(15deg) brightness(1.02);
  }
  50% {
    transform: skewX(-3deg) skewY(4deg) translateX(1px);
    filter: hue-rotate(30deg) brightness(0.98);
  }
  75% {
    transform: skewX(3deg) skewY(-3deg) translateX(-1px);
    filter: hue-rotate(15deg) brightness(1.01);
  }
  100% {
    transform: skewX(-5deg) skewY(3deg) translateX(0);
    filter: hue-rotate(0deg) brightness(1);
  }
}

/* Shadow and texture overlay with colorful tints */
.captcha-code::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Colorful scan lines */
    repeating-linear-gradient(
      0deg,
      rgba(255, 50, 50, 0.04) 0px,
      rgba(0, 150, 255, 0.04) 1px,
      transparent 2px,
      transparent 3px
    ),
    /* Light and shadow gradient for depth */
    radial-gradient(circle at 15% 40%, rgba(255, 100, 0, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(100, 50, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(0, 200, 100, 0.06) 0%, transparent 50%);
  pointer-events: none;
  border-radius: 6px;
  transform: skewY(-2deg);
  animation: colorShift 4s ease-in-out infinite;
}

@keyframes colorShift {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(10deg);
  }
}

.refresh-captcha {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  min-width: 45px;
}

.refresh-captcha:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05) rotate(180deg);
}

.refresh-captcha:active {
  transform: scale(0.98) rotate(180deg);
}