.container-fluid {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_wrapper {
  min-height: 100vh;
}

.banner_section.banner_style_1 {
  padding: 150px 0 1710px;
}

.card {
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  min-width: 400px;
}

h3.title {
  font-weight: 500;
  font-size: 24px;
  color: #333;
}

.form-control {
  border-radius: 5px;
  height: 45px;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ced4da;
}

.form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
}

.form-group {
  margin-bottom: 10px;
}

.btn-primary {
  background-color: #007bff;
  border: none;
  margin-top: 10px;
  height: 45px;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  margin-top: 10px;
  font-size: 14px;
  display: none;
}

.success-message {
  color: green;
  margin-top: 10px;
  font-size: 14px;
  display: none;
}

.small-text {
  font-size: 0.9rem;
}

.link-text {
  color: #007bff;
  text-decoration: underline;
}

.link-text:hover {
  color: #0056b3;
  text-decoration: underline;
}

@media screen and (max-width: 576px) {
  .card {
    min-width: 100%;
    max-width: 90%;
  }

  .row {
    margin: 0;
  }

  .submitBtn {
    width: 100%;
  }
}

/* Dark Theme Styles */
body.dark-theme {
  background-color: transparent !important;
  color: #e0e0e0;
}

body.dark-theme .banner_section {
  background-color: #000000;
}

body.dark-theme .page_content {
  background-color: transparent;
}

body.dark-theme .page_wrapper {
  background-color: transparent;
}

body.dark-theme .card {
  background-color: #131313;
  color: #e0e0e0;
}

body.dark-theme .title,
body.dark-theme h3.title {
  color: #e0e0e0 !important;
}

body.dark-theme .form-control {
  background-color: #000000;
  color: #e0e0e0;
  border-color: #555;
}

body.dark-theme .form-control::placeholder {
  color: #999;
}

body.dark-theme .text-muted {
  color: #aaa !important;
}

body.dark-theme label {
  color: #e0e0e0;
}

body.dark-theme .small {
  color: #ccc;
}

body.dark-theme .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

body.dark-theme .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* Keep header visible in dark theme */
body.dark-theme .site_header {
  background-color: transparent !important;
}

/* Keep the original header gradient visible in dark theme */
body.dark-theme .site_header,
body.dark-theme .header_top,
body.dark-theme .header_bottom {
  background-color: transparent !important;
  background: inherit !important;
}

/* Animated Toggle Switch */
.theme-toggle-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: #ccc;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
  padding: 0;
}

.theme-toggle::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffd700;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.2),
    2px 2px 0 0 rgba(255, 215, 0, 0.4),
    -2px 2px 0 0 rgba(255, 215, 0, 0.4),
    2px -2px 0 0 rgba(255, 215, 0, 0.4),
    -2px -2px 0 0 rgba(255, 215, 0, 0.4),
    3px 0 0 0 rgba(255, 215, 0, 0.3),
    -3px 0 0 0 rgba(255, 215, 0, 0.3),
    0 3px 0 0 rgba(255, 215, 0, 0.3),
    0 -3px 0 0 rgba(255, 215, 0, 0.3);
}

body.dark-theme .theme-toggle {
  background: #4a5568;
}

body.dark-theme .theme-toggle::before {
  transform: translateX(30px);
  background: #f0f0f0;
  box-shadow:
    inset -3px -3px 0 0 rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle:hover {
  opacity: 0.9;
}

.theme-toggle:active::before {
  width: 30px;
}

.theme-label {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  transition: color 0.3s ease;
}

body.dark-theme .theme-label {
  color: #ffffff;
}