* {
  margin: 0px;
  padding: 0px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700; /* New line to apply bold */

  
}


body {

  margin: 0;
  padding: 0;
  font-family: "Comfortaa", sans-serif;
  background: url('../assets/img/home/hero-bg.jpg') no-repeat center center fixed;
  background-size: cover;
  position: relative;
}

body::before {
  content: "";
  position: fixed; /* Cover the entire body */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 0;
}

.main-content {

  position: relative;
  z-index: 1; /* Ensures content goes above the overlay */
  font-family: "Comfortaa", sans-serif;
  width: 25%;
  height: 100%;
  margin: 50px auto 0px;
  color: rgb(0, 0, 0);
  background: white;
  text-align: center;
  /* border: 0px solid #B0C4DE; */
  border-bottom: none;
  border-radius: 10px 10px 10px 10px;
}






.header img{
  margin: 30px;
}



.input-group {
  margin: 10px 0px 10px 0px;
}
.input-group label {
  display: block;
  text-align: center;
  font-weight: normal;
  margin: 10%;
  margin-bottom: 5%;
  
}






/* Additional styling for better responsiveness and alignment */
@media (max-width: 768px) {
  .input-group input[type="tel"] {
    width: 95%; /* Increase width on smaller screens for better fit */
  }
  form, .content {
    width: 90%; /* Make the form and content wider on smaller screens */
  }
}

.input-group .btn {
  text-align: center;
  padding: 10px 60px;
  font-size: 20px;
  color: white;
  background: #482F4C;
  border: none;
  border-radius: 5px;
  cursor: default; /* Default cursor outside of hover */
  transition: background-color 0.3s ease; /* Smooth transition for the background color */
  margin: 15%;
  margin-top: 50%;

}

.input-group input[type="tel"] {
  font-weight: normal;

  width: 80%; /* Adjust size as needed */
  height: 45px;
  text-align: center;
  font-size: 14px; /* Larger font size for OTP */
  border: none;
  border-bottom: 3px solid #b5adad; /* Creates the underline */

  margin-left: -30%;
  margin-right: -30%;
}

.input-group input[type="tel"]:focus {
  outline: none;
  border-bottom: 2px solid #482F4C; /* Different color for focus */
}

.btn:hover {
  background: #9200a5; /* Darker shade when hovered */
  cursor: pointer; /* Change cursor to pointer on hover */
}


.error {
  width: 92%;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid #a94442;
  color: #a94442;
  background: #f2dede;
  border-radius: 5px;
  text-align: left;
}
.success {
  color: #3c763d;
  background: #dff0d8;
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}



/*---------------------------
    NEW REGISTER PAGE
----------------------------- */

.sign_up_details{
  margin-top: 15%;
  margin-bottom: 10%;
  
}


.input-group input[type="text"],
.input-group input[type="email"] {
  font-weight: normal;

  width: 80%; /* Adjust size as needed */
  padding: 10px;
  /* height: 15px; */
  text-align: center;
  font-size: 14px; /* Larger font size for OTP */
  border: none;
  border-bottom: 3px solid #b5adad; /* Creates the underline */
  margin-left: -30%;
  margin-right: -30%;
  margin-bottom: 2%;
}


.input-group input[type="text"]:focus,
.input-group input[type="email"]:focus {
  outline: none;
  border-bottom: 2px solid #482F4C; /* Different color for focus */
}


.input-group .sign_up_btn{
  margin-top: 10%;
}


/*---------------------------
      OTP_VERIFICATION PAGE
----------------------------- */

.otp-fields {
  display: flex;
  justify-content: space-between;
  max-width: 200px; /* Adjust based on total width */
  margin: auto;
}


#otp-input-group .otp-input  {
  font-weight: normal;

  width: 40px; /* Adjust size as needed */
  height: 45px;
  text-align: center;
  font-size: 24px; /* Larger font size for OTP */
  border: none;
  border-bottom: 2px solid #b5adad; /* Creates the underline */
  /* margin-top: 10% ; */
  margin-left: -30%;
  margin-right: -30%;
}


#otp-input-group .otp-input:focus {
  font-weight: normal;

  outline: none;
  border-bottom: 2px solid #482F4C; /* Different color for focus */
}