body {
  background-image: url('../../../images/bg_1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.5s ease-in-out;
 
}

/* Adjust padding for smaller screens */
@media (max-width: 768px) {
  .wrapper {
    margin-bottom: 5vh; /* Default padding for larger screens */
  margin-top: 7vh;
  }
}
/* Adjust padding for smaller screens */
@media (max-width: 1024px) {
  .wrapper {
    margin-bottom: 0vh; /* Default padding for larger screens */
  margin-top: 0vh;
  }
}
.wrapper {
  display: flex;
  justify-content: center; /* Horizontally center the form */
  align-items: center; /* Vertically center the form */
  flex-direction: column; /* Stack form and footer vertically */
  width: 100%; /* Ensure the wrapper takes up the full width of the screen */
  max-width: 100%; /* Prevent overflow */
  min-height: 80vh; /* Default padding for larger screens */
  margin-bottom: 8vh; /* Default padding for larger screens */
  margin-top: 15vh;
}

.ct-design {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #343a40;
}

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

.form-control {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

.text-center {
  text-align: center;
}

.form-text {
  font-size: 0.875rem;
  color: #6c757d;
}

.mt-3 {
  margin-top: 15px;
}

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

.link:hover {
  text-decoration: underline;
}

/* Fade In Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Slide In Animation */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Form transition animation */
.form-slide {
  animation: slideIn 0.6s ease-out forwards;
}

/* Hiding forms */
.hidden {
  display: none;
}




.otp-container {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .otp-input {
            width: 45px;
            height: 50px;
            text-align: center;
            font-size: 1.5rem;
            border: 2px solid #ddd;
            border-radius: 8px;
            transition: border-color 0.3s;
        }
        .otp-input:focus {
            border-color: #0d6efd;
            outline: none;
        }


        .password-wrapper { position: relative; }
        .password-toggle-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            cursor: pointer;
        }
        .strength-meter-bar { height: 5px; background-color: #eee; margin-top: 5px; border-radius: 5px; }
        .strength-bar { height: 100%; width: 0; border-radius: 5px; transition: width 0.3s, background-color 0.3s; }
        .strength-bar.weak { background-color: #dc3545; }
        .strength-bar.medium { background-color: #ffc107; }
        .strength-bar.strong { background-color: #28a745; }