/* @extend display-flex; */
display-flex, .display-flex, .display-flex-center, .signup-content, .signin-content, .social-login, .socials {
  display: flex;
  display: -webkit-flex; }

/* @extend list-type-ulli; */
list-type-ulli, .socials {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  a:focus, a:active {
  text-decoration: none;
  outline: none;
  transition: all 300ms ease 0s;
  -moz-transition: all 300ms ease 0s;
  -webkit-transition: all 300ms ease 0s;
  -o-transition: all 300ms ease 0s;
  -ms-transition: all 300ms ease 0s; }

input, select, textarea {
  outline: none;
  appearance: unset !important;
  -moz-appearance: unset !important;
  -webkit-appearance: unset !important;
  -o-appearance: unset !important;
  -ms-appearance: unset !important; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  margin: 0; }

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -o-box-shadow: none !important;
  -ms-box-shadow: none !important; }

input[type=checkbox] {
  appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  -o-appearance: checkbox !important;
  -ms-appearance: checkbox !important; }

input[type=radio] {
  appearance: radio !important;
  -moz-appearance: radio !important;
  -webkit-appearance: radio !important;
  -o-appearance: radio !important;
  -ms-appearance: radio !important; }

img {
  max-width: 100%;
  height: auto; }

figure {
  margin: 0; }

p {
  margin-bottom: 0px;
  font-size: 15px;
  color: #777; }

h2 {
  line-height: 1.66;
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #222;
  font-family: Poppins;
  font-size: 36px; }

.main {
  background: #f8f8f8;
  padding: 10px 0; }

.clear {
  clear: both; }

body {
  font-size: 13px;
  line-height: 1.8;
  color: #222;
  background: #f8f8f8;
  font-weight: 400;
  font-family: Poppins; }

.container {
  width: 80%;
  background: #fff;
  margin: 0 auto;
  box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px; }

.display-flex {
  justify-content: space-between;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center; }

.display-flex-center {
  justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center; }

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }

.signup {
  margin-bottom: 150px; }

.signup-form, .signup-image, .signin-form, .signin-image {
  width: 50%;
  overflow: hidden; }



.signup-image {
  margin: 0 55px;
  margin-top: 45px;
}

.form-title {
  margin-bottom: 33px; }


figure {
  margin-bottom: 50px;
  text-align: center; }

#signin {
  margin-top: 16px; }



.term-service {
  font-size: 13px;
  color: #222; }

.signup-form {
  margin-top:20px;
  padding-left: 34px; }

.register-form {
  width: 100%; }

.form-group {
  position: relative;
  margin-bottom: 25px;
  overflow: hidden; 
}

  .form-group:last-child {
    margin-bottom: 0px;
  }

.right-side {
  position: relative;
  margin-bottom: 25px;
  overflow: hidden; }
  .form-group:last-child {
    margin-bottom: 0px; }

input {
  width: 100%;
  display: block;
  border: none;
  border-bottom: 1px solid #999;
  padding: 6px 30px;
  font-family: Poppins;
  box-sizing: border-box; }
  input::-webkit-input-placeholder {
    color: #999; }
  input::-moz-placeholder {
    color: #999; }
  input:-ms-input-placeholder {
    color: #999; }
  input:-moz-placeholder {
    color: #999; }
  input:focus {
    border-bottom: 1px solid #222; }
    input:focus::-webkit-input-placeholder {
      color: #222; }
    input:focus::-moz-placeholder {
      color: #222; }
    input:focus:-ms-input-placeholder {
      color: #222; }
    input:focus:-moz-placeholder {
      color: #222; }

input[type=checkbox]:not(old) {
  width: 2em;
  margin: 0;
  padding: 0;
  font-size: 1em;
  display: none; }

input[type=checkbox]:not(old) + label {
  display: inline-block;
  line-height: 1.5em;
  margin-top: 6px; }

input[type=checkbox]:not(old) + label > span {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 15px;
  margin-bottom: 3px;
  border: 1px solid #999;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  background: white;
  background-image: -moz-linear-gradient(white, white);
  background-image: -ms-linear-gradient(white, white);
  background-image: -o-linear-gradient(white, white);
  background-image: -webkit-linear-gradient(white, white);
  background-image: linear-gradient(white, white);
  vertical-align: bottom; }

input[type=checkbox]:not(old):checked + label > span {
  background-image: -moz-linear-gradient(white, white);
  background-image: -ms-linear-gradient(white, white);
  background-image: -o-linear-gradient(white, white);
  background-image: -webkit-linear-gradient(white, white);
  background-image: linear-gradient(white, white); }

input[type=checkbox]:not(old):checked + label > span:before {
  content: '\f26b';
  display: block;
  color: #222;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  font-family: 'Material-Design-Iconic-Font';
  font-weight: bold; }

.agree-term {
  display: inline-block;
  width: auto; }

/* Apply styles to labels except for radio button labels */
label:not(.genderlabel) {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #222;
}


.label-has-error {
  top: 22%; }

label.error {
  position: relative;
  background: url("../images/unchecked.gif") no-repeat;
  background-position-y: 3px;
  padding-left: 20px;
  display: block;
  margin-top: 20px; }

label.valid {
  display: block;
  position: absolute;
  right: 0;
  left: auto;
  margin-top: -6px;
  width: 20px;
  height: 20px;
  background: transparent; }
  label.valid:after {
    font-family: 'Material-Design-Iconic-Font';
    content: '\f269';
    width: 100%;
    height: 100%;
    position: absolute;
    /* right: 0; */
    font-size: 16px;
    color: green; }

.label-agree-term {
  position: relative;
  top: 0%;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -o-transform: translateY(0);
  -ms-transform: translateY(0); }

.material-icons-name {
  font-size: 18px; }

.signin-content {
  padding-top: 10px;
  padding-bottom: 10px; }

.social-login {
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  margin-top: 40px; }

.social-label {
  display: inline-block;
  margin-right: 15px; }

.socials li {
  padding: 5px; }
  .socials li:last-child {
    margin-right: 0px; }
  .socials li a {
    text-decoration: none; }
    .socials li a i {
      width: 30px;
      height: 30px;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      -ms-border-radius: 5px;
      transform: translateZ(0);
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -o-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out; }
  .socials li:hover a i {
    -webkit-transform: scale(1.3) translateZ(0);
    transform: scale(1.3) translateZ(0); }

.zmdi-facebook {
  background: #3b5998; }

.zmdi-github {
  background: #2b2d2f; }

.zmdi-google {
  background: #e72734; }

.signin-form {
  margin-right: 90px;
  margin-left: 80px; }

.signin-image {
  margin-left: 110px;
  margin-right: 20px;
  margin-top: 30px; }


@media screen and (max-width: 1200px) {
  .container {
    width: calc( 100% - 30px);
    max-width: 100%; } }
@media screen and (min-width: 1024px) {
  .container {
    max-width: 1200px; } }
@media screen and (max-width: 768px) {
  .signup-content, .signin-content {
    flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center; }

  .signin-image {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 50px;
    order: 2;
    -moz-order: 2;
    -webkit-order: 2;
    -o-order: 2;
    -ms-order: 2; }

  .signup-form, .signup-image, .signin-form, .signin-image {
    width: auto; }

  .social-login {
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center; }


  .signin-form {
    order: 1;
    -moz-order: 1;
    -webkit-order: 1;
    -o-order: 1;
    -ms-order: 1;
    margin-right: 0px;
    margin-left: 0px;
    padding: 0 30px; }

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

@media screen and (max-width: 400px) {
  .social-login {
    flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column; }

  .social-label {
    margin-right: 0px;
    margin-bottom: 10px; } }


  .main section {
      display: none;
      transition: opacity 0.3s ease;
  }
  .main section.active {
      display: block;
      opacity: 1;
  }

/* Gender CSS Start */
.gender-radio-buttons {
  display: none;
}

.smallsvg {
  width: 10px;
}

.other-gender {
  width: 15px;
}

.malesmallsvg {
  transform: rotate(225deg);
}

/* Ensuring individual gender buttons are contained and do not overflow */
.genderlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background-color: #ededed;
  border-radius: 5px;
  padding: 4px 8px;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease-out;
  max-width: 100%; /* Ensure it doesn't extend beyond the box */
  box-sizing: border-box;
}

.radio-wrapper {
  display: flex;
  gap: 27px;
  justify-content: flex-start; /* Align all buttons to the left */
  flex-wrap: wrap; /* Ensure items wrap inside the box */
  max-width: 100%; /* Prevent overflow */
}

#gen {
  display: inline-block; /* Ensures proper alignment with inline elements */
  font-weight: bold; /* Optional: makes the label text bold */
  vertical-align: middle; /* Aligns with the buttons vertically */
}

/* Male Button Styles */
.malebutton {
  background-color: #dceeff; /* Default background for male button */
  margin-left:60px;
  border: 2px solid transparent; /* Default border */
  padding-left:25px;
  padding-right:25px;
}

.malebutton:hover {
  background-color: #569fcf;
}

#male:checked + .malebutton {
  background-color: #569fcf;
  border: 2px solid #76E3FE; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Female Button Styles */
.femalebutton {
  background-color: #ffe6f1; /* Default background for female button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.femalebutton:hover {
  background-color: rgb(245, 185, 195);
}

#female:checked + .femalebutton {
  background-color: rgb(245, 185, 195);
  border: 2px solid #F57CB3; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Other Button Styles */
.otherbutton {
  background-color: #f0e6ff; /* Default background for other button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.otherbutton:hover {
  background-color: #4d227a;
}

#other:checked + .otherbutton {
  background-color: #4d227a;
  border: 2px solid #9B4AED; /* Add border when selected */
  color: white; /* Change text color on selection */
}


/* Gender CSS End */


/* CSS For Country Code and Phone Number */
.ui-wrapper {
  --width: 100%;
  --height: 34px;
  margin-left:60px;
  --text-color: rgb(73, 73, 73);

  width: var(--width);
  height: var(--height);
  display: inline-flex;
  position: relative;
  background-color: var(--background);
  justify-content: space-between;
  padding-right: 10px;
  box-shadow: 0px 2px 5px 0px var(--shadow-color);
  transition: .4s;
  user-select: none;

  /* Replace border with a straight line at the bottom */
  border-bottom: 1px solid black; /* Adjust line color as per your design */
}



.ui-wrapper > input {
  appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 9999px;

}

.input-wrapper {
  width: 100%;
  padding-left: 10px;
  margin-top:-15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2px;
}

.input-wrapper legend {
  font-size: 11px;
}

.input-wrapper .textfield {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-wrapper .textfield #country-code-display {
  margin-right: 8px; /* Space between the country code and input */
  font-size: 16px;
  color: #000000;
}

.input-wrapper .textfield input {
  width: calc(100% - 30px); /* Adjust width to ensure it takes available space */
  font-size: 16px;
  outline: none;
  border: none;
  background: none;
  margin-top:15px;
  padding: 0 5px; /* Add padding for better spacing */
}

.invalid-msg {
  font-size: 12px;
  position: absolute;
  color: red;
  top: 115%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
}

#phonenumber:invalid + .invalid-msg {
  top: 110%;
  opacity: 1;
  visibility: visible;
}

.ui-wrapper:focus-within {
  border-color: var(--border-focus-color);
  box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);
}

/* Basic styling for the label */
#contact {
  font-size: 16px;
  height: 38px;
  color: #000000;
  gap: 8px;  /* Add space between the label text and the icon */
  transition: transform 0.3s ease; /* Smooth transition for label */
}


/* Shaking effect on hover */
#contact:hover #contact-icon {
  animation: shake 0.5s ease-in-out;
}

/* Keyframe animation for shaking */
@keyframes shake {
  0% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-5px);
  }
  50% {
      transform: translateX(5px);
  }
  75% {
      transform: translateX(-5px);
  }
  100% {
      transform: translateX(0);
  }
}

/* Optional: Change the cursor on hover */
#contact:hover {
  cursor: pointer;
}

/* Basic styling for the select dropdown */
#country-code {

  font-size: 14px; /* Adjust font size */
  border: 1px solid #ccc; /* Add a border */
  border-radius: 5px; /* Rounded corners */
  background-color: #ededed; /* White background */
  height:30px;
  color: #000000; /* Text color */
  width: 45px; /* Full width */
  outline: none; /* Remove the default outline */

  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */
}

/* Style for the country dropdown */
#country {
    width: 100%;
    height: 35px;
    font-size: 14px;
    padding: 5px;
    margin-left: 60px;
    outline: none;
    border: none;
    border-bottom: 1px solid #000000; /* Adjust the color and thickness as needed */
    background: none;
}

/* Style for the user type dropdown */
#user-type {
    width: 100%;
    height: 35px;
    font-size: 14px;
    padding: 5px;
    margin-left: 60px;
    margin-top: 15px;
    margin-bottom: 15px;
    outline: none;
    border: none;
    border-bottom: 1px solid #000000; /* Adjust the color and thickness as needed */
    background: none;
}


/* Style for aligning year fields horizontally */
.year-fields {
    display: flex;
}

/* Ensure the inputs for year have fixed width and are inline */
.year-fields input[type="text"] {
    padding: 8px; /* Padding inside the input */
    font-size: 14px; /* Font size for better visibility */
    color: #000000; /* Text color */
    border: 1px solid #ccc; /* Border styling */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

#year-start{
  margin-left:60px;
  margin-right:20px;
}

/* Custom placeholder styling */
.year-fields input[type="text"]::placeholder {
    color: #aaa; /* Light gray color for the placeholder */
}
#course-name,
#university {
    margin-left: 60px; /* Apply 60px left margin */
    width: 100%;
    text-align: left; /* Align text to the left */
    padding: 5px; /* Add padding for better spacing */
    outline: none; /* Remove the default outline on focus */
    border: none; /* Remove borders */
    border-bottom: 1px solid #000000; /* Add a bottom border */
    font-size: 14px; /* Set font size */
    background: none; /* Ensure no background color */
}

#profession,
#company-name {
    margin-left: 15px; /* Apply 15px left margin */
    width:84%;
}

/* Next Page Button */
.next-page {
  background: transparent;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #6dabe4;
  border-radius: 25px;
  color: #6dabe4;
  transition: color 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.next-page span {
  margin: 10px;
}

.next-page::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  border-radius: 50%;
  width: 300%; /* Ensure it covers the button */
  height: 300%;
  background-color: #6dabe4;
  z-index: -1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  opacity: 0;
}

.next-page:hover {
  color: #1da0f2;
}

.next-page:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Left Image shown */
.left-image {
  display: block;
  text-align: center; /* Centers the image horizontally */
  width: 100%; /* Ensures the div takes full width */
}

.left-image img {
  width: 100%; /* Makes the image responsive, scaling to the div's width */
  height: 416px; /* Fixed height, you can adjust this value */
  object-fit: cover; /* Ensures the image covers the div without distorting */
   border-radius: 15px; /* Optional: Adds rounded corners to the image */
}

.form-group.form-button {
  display: flex; /* Using flexbox to align items in a row */
  justify-content: center; /* Center the buttons horizontally */
  align-items: center; /* Align items vertically */
  gap: 15px; /* Adds space between the button and link */
}

.form-submit {
  background: #6dabe4;
  color: #fff;
  border-bottom: none;
  padding: 15px 39px;
  border-radius: 5px;
  cursor: pointer;
  width: 200px; /* Set a fixed width for the submit button */
  text-align: center; /* Ensures the text inside the button is centered */
}

.form-submit:hover {
  background: #4292dc;
}

.signup-image-link {
  font-size: 14px;
  color: #222;
  text-align: center;
  display: inline-block; /* Ensures the link is treated as a block element */
  cursor: pointer;
  width: 200px; /* Set a fixed width for the link */
  text-align: center; /* Centers the link text */
}

.right-image{
margin-top:75px;
}
#fullname,#other-fields input {
  margin-left: 60px; /* Apply 60px left margin */
    width: 100%;
    text-align: left; /* Align text to the left */
    padding: 5px; /* Add padding for better spacing */
    outline: none; /* Remove the default outline on focus */
    border: none; /* Remove borders */
    border-bottom: 1px solid #000000; /* Add a bottom border */
    font-size: 14px; /* Set font size */
    background: none; /* Ensure no background color */
}

.signup-image-link-right {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    color:black;
  font-size:14px;
}

.right-side {
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
}

.email-container {
  display: flex;
  width: 100%;
  justify-content: space-between; /* Ensures the input and button are at opposite ends */
}
#email {
  flex-grow: 1; /* Makes the input take up remaining space */
}
.left-image{
  margin-top:-60px;
}

.form-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #869099;
}

.toggle-password:hover {
  color: #6e7881;
}

/* Form group styling */
.form-group {
  position: relative;
  margin-bottom: 20px; /* Space between fields */
}

/* Input fields */
.form-group input {
  width: 100%;
  padding: 10px;
  margin-left:15px;
  box-sizing: border-box;
}

/* Validation icons */
.validation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;  /* Adjust width */
  height: 15px; /* Adjust height to match width for a perfect circle */
  border-radius: 50%; /* Makes it circular */
  font-size: 14px;  /* Adjust icon size */
  font-weight: bold;
  text-align: center;
  line-height: 20px; /* Adjust line height to match the circle size */
  color: white; /* Default icon color */
  background-color: #ffffff; /* Default background color */
  position: absolute;
  top: 15px; /* Adjust positioning to be properly above the input */
  right: 10px; /* Align to the right */
}

/* Green circle for valid input */
.validation-icon.valid {
  background-color: green;
}

/* Red circle for invalid input */
.validation-icon.invalid {
  background-color: red;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}

/* Modal Popup */
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 500px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
overflow: hidden;
}

.modal iframe {
width: 100%;
height: 280px;
border: none;
}

/* Close Button */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: #f44336;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
}


/* Center the loader */
#loading-animation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Ensure it's above other elements */
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Unique CSS for Sign In Password Eye Icon */
.signin-form .form-group {
  position: relative;
}

/* Positioning the eye icon above the password input */
.signin-form .form-group #toggle-password {
  position: absolute;
  top: 1px; /* Adjusted vertical positioning to move the icon higher */
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color: #869099;
}

/* Change color of the eye icon on hover */
.signin-form .form-group #toggle-password:hover {
  color: #6e7881;
}

#forget_pass {
    text-align: right; /* Horizontally center the button within the container */
    margin-top:-15px;
}

#forget_pass button {
    background: none;
    border: none;
    color: black;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    font-family: inherit;
}
#forget_pass button:hover {
text-decoration: underline;  /* Add the underline on hover */
}

#create_account{
   text-align: center; /* Horizontally center the button within the container */
  
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1560bd;
  color: white;
  padding: 9px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-left:-8px;
  margin-right:-8px;
  margin-top:-17px;  
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .logo img {
  height: 50px;
  margin-right: 15px;
  margin-top:12px;
}

.header .name {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-top:10px;
}
#btn_signin{
  margin-top:-15px;
}



/* From Uiverse.io by bimbx */ 
/* Hide the default checkbox */
#terms input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
 }
 
 #terms {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
 }
 
 /* Create a custom checkbox */
 .checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background: #606062;
  border-radius: 5px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5);
 }
 
 /* When the checkbox is checked, add a blue background */
 #terms input:checked ~ .checkmark {
  background-image: linear-gradient(#b9e9b3,#a8e4a0)
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
  content: "";
  position: absolute;
  display: none;
 }
 
 /* Show the checkmark when checked */
 #terms input:checked ~ .checkmark:after {
  display: block;
 }
 
 /* Style the checkmark/indicator */
 #terms .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
 }


 /* Background overlay */
.term_condition {
  display: none; /* Initially hidden */
  position: fixed; /* Fixed positioning to stay on top of the content */
  top: 50%; /* Position the popup in the middle of the screen vertically */
  left: 50%; /* Position the popup in the middle of the screen horizontally */
  transform: translate(-50%, -50%); /* Offset the popup by half its size to truly center it */
  background-color: white; /* Background color for the modal */
  padding: 20px; /* Add some padding inside the modal */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
  z-index: 1000; /* Ensure it's on top of the content */
  border-radius: 10px; /* Rounded corners */
  width: 300px; /* Set a fixed width */
  text-align: center; /* Center the text inside the modal */
}

/* Overlay background that appears when modal is visible */
.term_condition::before {
  content: ''; /* Create a pseudo-element */
  position: fixed; /* Fixed positioning to cover the entire screen */
  top: 0; /* Position at the top of the screen */
  left: 0; /* Position at the left of the screen */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: #ffffff; /* Semi-transparent black background */
  z-index: -1; /* Place the overlay behind the modal */
}


#okButton {
  background-color: #28a745; /* Green background color */
  color: white; /* White text */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Add padding for a nice size */
  font-size: 11px; /* Font size */
  font-weight: bold; /* Bold text */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change the cursor to a pointer on hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover effect */
}

#okButton:hover {
  background-color: #218838; /* Darker green when hovered */
  transform: scale(1.05); /* Slightly scale the button on hover */
}

#okButton:active {
  transform: scale(0.98); /* Slightly shrink the button on click */
}





/* Ensuring left part takes up half of the width */
.left_part {
  margin-left:40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Add space between elements */
  justify-content: flex-start;
}

/* Ensuring right part takes up half of the width */
.right_part {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Add space between elements */
  justify-content: flex-start;
}

/* Additional styling for header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1560bd;
  color: white;
  padding: 9px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-left:-8px;
  margin-right:-8px;
  margin-top:-17px;  
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .logo img {
  height: 50px;
  margin-right: 15px;
  margin-top:12px;
}

.header .name {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-top:10px;
}

.gender-radio-buttons {
  display: none;
}

.smallsvg {
  width: 10px;
}

.other-gender {
  width: 15px;
}

.malesmallsvg {
  transform: rotate(225deg);
}

/* Ensuring individual gender buttons are contained and do not overflow */
.genderlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:17px;
  margin-bottom:14px;
  width: auto;
  height: 38px;;
  background-color: #ededed;
  border-radius: 5px;
  padding: 4px 8px;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease-out;
  max-width: 100%; /* Ensure it doesn't extend beyond the box */
  box-sizing: border-box;
}

.radio-wrapper {
  display: flex;
  gap: 33px;
  justify-content: flex-start; /* Align all buttons to the left */
  flex-wrap: wrap; /* Ensure items wrap inside the box */
  max-width: 100%; /* Prevent overflow */
}

#gen {
  display: inline-block; /* Ensures proper alignment with inline elements */
  font-weight: bold; /* Optional: makes the label text bold */
  vertical-align: middle; /* Aligns with the buttons vertically */
}

/* Male Button Styles */
.malebutton {
  background-color: #dceeff; /* Default background for male button */
  margin-left:-25px;
  border: 2px solid transparent; /* Default border */
  padding-left:25px;
  padding-right:25px;
}

.malebutton:hover {
  background-color: #569fcf;
}

#male:checked + .malebutton {
  background-color: #569fcf;
  border: 2px solid #76E3FE; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Female Button Styles */
.femalebutton {
  background-color: #ffe6f1; /* Default background for female button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.femalebutton:hover {
  background-color: rgb(245, 185, 195);
}

#female:checked + .femalebutton {
  background-color: rgb(245, 185, 195);
  border: 2px solid #F57CB3; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Other Button Styles */
.otherbutton {
  background-color: #f0e6ff; /* Default background for other button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.otherbutton:hover {
  background-color: #4d227a;
}

#other:checked + .otherbutton {
  background-color: #4d227a;
  border: 2px solid #9B4AED; /* Add border when selected */
  color: white; /* Change text color on selection */
}


/* Gender CSS End */

/* Contact */

.ui-wrapper {
  --width: 100%;
  --height: 34px;
  --text-color: rgb(73, 73, 73);
  width: var(--width);
  height: var(--height);
  display: inline-flex;
  position: relative;
  background-color: var(--background);
  justify-content: space-between;
  padding-right: 10px;
  box-shadow: 0px 2px 5px 0px var(--shadow-color);
  transition: .4s;
  user-select: none;
  /* Replace border with a straight line at the bottom */
  border-bottom: 1px solid black; /* Adjust line color as per your design */
}



.ui-wrapper > input {
  appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 9999px;

}

.input-wrapper {
  width: 100%;
  padding-left: 10px;
  margin-top:-15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2px;
}

.input-wrapper legend {
  font-size: 11px;
}

.input-wrapper .textfield {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-wrapper .textfield #country-code-display {
  margin-right: 8px; /* Space between the country code and input */
  font-size: 14px;
  color: #000000;
}

.input-wrapper .textfield input {
  width: calc(100% - 30px); /* Adjust width to ensure it takes available space */
  font-size: 14px;
  outline: none;
  border: none;
  background: none;
  margin-top:15px;
  padding: 0 5px; /* Add padding for better spacing */
}

.invalid-msg {
  font-size: 12px;
  position: absolute;
  color: red;
  top: 115%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
}

#phonenumber:invalid + .invalid-msg {
  top: 110%;
  opacity: 1;
  visibility: visible;
}

.ui-wrapper:focus-within {
  border-color: var(--border-focus-color);
  box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);
}

/* Basic styling for the select dropdown */
#country-code {
  margin-top:15px;
  padding-left:10px;
  font-size: 14px; /* Adjust font size */
  border: 1px solid #ccc; /* Add a border */
  border-radius: 5px; /* Rounded corners */
  background-color: #ededed; /* White background */
  height:25px;
  color: #000000; /* Text color */
  width: 55px; /* Full width */
  outline: none; /* Remove the default outline */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */
}


/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  .signup-content {
      flex-direction: column; /* Stack left and right parts vertically */
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
  }
}

/* Common styling for input fields */
#username_info, 
#fullname_info, 
#company-name, 
#institution, 
#specialization, 
#research-institute, 
#research-topic,
#hello1,
#hello2,
#contact{
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 90%;
  box-sizing: border-box;
  margin-left: 0px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Separate styling for course-related fields */
#course-name, 
#year-start, 
#year-end, 
#university {
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 90%;
  box-sizing: border-box;
  margin-left: 0px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Styling for the course-name */
#course-name {
  background-color: #f9f9f9;
}

/* Styling for the year fields */
#year-start, 
#year-end {
  max-width: 300px; /* Restricting width for start and end year */
  width: 40%;
  margin-left:20px;
}

/* Styling for university */
#university {
  background-color: #f9f9f9;
}

/* Add hover and focus effects for input fields */
#username_info:hover, 
#fullname_info:hover, 
#profession:hover, 
#company-name:hover, 
#institution:hover, 
#specialization:hover, 
#research-institute:hover, 
#research-topic:hover,
#course-name:hover, 
#year-start:hover, 
#year-end:hover, 
#hello1:hover,
#hello2:hover,
#university:hover,
#contact:hover{
  border-color: #007BFF;
}

#username_info:focus, 
#fullname_info:focus, 
#profession:focus, 
#company-name:focus, 
#institution:focus, 
#specialization:focus, 
#research-institute:focus, 
#research-topic:focus,
#course-name:focus, 
#year-start:focus, 
#year-end:focus, 
#hello1:focus,
#hello2:focus,
#university:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* Separate styling for the select dropdown */
#user-type, #country {
  font-size: 14px;
  padding-left:15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 500px;
  width: 90%;
  margin-left:-4px;
  box-sizing: border-box;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ccc" d="M2 0L0 2h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  appearance: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for user-type select */
#user-type:hover, #country:hover {
  border-color: #007BFF;
}

/* Focus effect for user-type select */
#user-type:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none;
}


#next-page {
  background-color: #6dabe4; /* Green background */
  color: white; /* White text */
  padding: 12px 24px; /* Padding around the text */
  border: none; /* No border */
  border-radius: 8px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer */
  font-size: 14px; /* Font size */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#next-page:hover {
  background-color: #4292dc; /* Darker green on hover */
}

#already-member-btn-right {
    color: #000000; /* Blue color */
    text-decoration: none; /* Remove underline */
    font-size: 14px; /* Font size */
    margin-left:150px;
    display: inline-block; /* Make the link behave like a button */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

#already-member-btn-right:hover {
    text-decoration: underline; /* Underline on hover */
}

.no {
 position:absolute;
  bottom:0;
  left:50%;
}

#country{
  margin-top:14px;
}

/* Container that holds the left and right parts */
.signup-content {
  margin-top:17px;
  width: 957.44px; /* Fixed width */
  height: 459.14px; /* Fixed height */
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: absolute; /* To position it relative to the viewport */
  top: 50%; /* Move to the middle of the viewport vertically */
  left: 50%; /* Move to the middle of the viewport horizontally */
  transform: translate(-50%, -50%); /* Offset the element by half of its own width/height */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 20px; /* Add padding to avoid content being right on the edges */
  box-sizing: border-box; /* Ensures padding doesn't affect the container size */
  flex-wrap: wrap; /* Allow content to wrap if necessary */
}

/* @extend display-flex; */
display-flex, .display-flex, .display-flex-center, .signup-content, .signin-content, .social-login, .socials {
  display: flex;
  display: -webkit-flex; }

/* @extend list-type-ulli; */
list-type-ulli, .socials {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  a:focus, a:active {
  text-decoration: none;
  outline: none;
  transition: all 300ms ease 0s;
  -moz-transition: all 300ms ease 0s;
  -webkit-transition: all 300ms ease 0s;
  -o-transition: all 300ms ease 0s;
  -ms-transition: all 300ms ease 0s; }

input, select, textarea {
  outline: none;
  appearance: unset !important;
  -moz-appearance: unset !important;
  -webkit-appearance: unset !important;
  -o-appearance: unset !important;
  -ms-appearance: unset !important; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  margin: 0; }

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -o-box-shadow: none !important;
  -ms-box-shadow: none !important; }

input[type=checkbox] {
  appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  -o-appearance: checkbox !important;
  -ms-appearance: checkbox !important; }

input[type=radio] {
  appearance: radio !important;
  -moz-appearance: radio !important;
  -webkit-appearance: radio !important;
  -o-appearance: radio !important;
  -ms-appearance: radio !important; }

img {
  max-width: 100%;
  height: auto; }

figure {
  margin: 0; }

p {
  margin-bottom: 0px;
  font-size: 15px;
  color: #777; }

h2 {
  line-height: 1.66;
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #222;
  font-family: Poppins;
  font-size: 36px; }

.main {
  background: #f8f8f8;
  padding: 10px 0; }

.clear {
  clear: both; }

body {
  font-size: 13px;
  line-height: 1.8;
  color: #222;
  background: #f8f8f8;
  font-weight: 400;
  font-family: Poppins; }

.container {
  width: 80%;
  background: #fff;
  margin: 0 auto;
  box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px; }

.display-flex {
  justify-content: space-between;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center; }

.display-flex-center {
  justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center; }

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }

.signup {
  margin-bottom: 150px; }

.signup-form, .signup-image, .signin-form, .signin-image {
  width: 50%;
  overflow: hidden; }



.signup-image {
  margin: 0 55px;
  margin-top: 45px;
}

.form-title {
  margin-bottom: 33px; }


figure {
  margin-bottom: 50px;
  text-align: center; }

#signin {
  margin-top: 16px; }



.term-service {
  font-size: 13px;
  color: #222; }

.signup-form {
  margin-top:20px;
  padding-left: 34px; }

.register-form {
  width: 100%; }

.form-group {
  position: relative;
  margin-bottom: 25px;
  overflow: hidden; 
}

  .form-group:last-child {
    margin-bottom: 0px;
  }

.right-side {
  position: relative;
  margin-bottom: 25px;
  overflow: hidden; }
  .form-group:last-child {
    margin-bottom: 0px; }

input {
  width: 100%;
  display: block;
  border: none;
  border-bottom: 1px solid #999;
  padding: 6px 30px;
  font-family: Poppins;
  box-sizing: border-box; }
  input::-webkit-input-placeholder {
    color: #999; }
  input::-moz-placeholder {
    color: #999; }
  input:-ms-input-placeholder {
    color: #999; }
  input:-moz-placeholder {
    color: #999; }
  input:focus {
    border-bottom: 1px solid #222; }
    input:focus::-webkit-input-placeholder {
      color: #222; }
    input:focus::-moz-placeholder {
      color: #222; }
    input:focus:-ms-input-placeholder {
      color: #222; }
    input:focus:-moz-placeholder {
      color: #222; }

input[type=checkbox]:not(old) {
  width: 2em;
  margin: 0;
  padding: 0;
  font-size: 1em;
  display: none; }

input[type=checkbox]:not(old) + label {
  display: inline-block;
  line-height: 1.5em;
  margin-top: 6px; }

input[type=checkbox]:not(old) + label > span {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 15px;
  margin-bottom: 3px;
  border: 1px solid #999;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  background: white;
  background-image: -moz-linear-gradient(white, white);
  background-image: -ms-linear-gradient(white, white);
  background-image: -o-linear-gradient(white, white);
  background-image: -webkit-linear-gradient(white, white);
  background-image: linear-gradient(white, white);
  vertical-align: bottom; }

input[type=checkbox]:not(old):checked + label > span {
  background-image: -moz-linear-gradient(white, white);
  background-image: -ms-linear-gradient(white, white);
  background-image: -o-linear-gradient(white, white);
  background-image: -webkit-linear-gradient(white, white);
  background-image: linear-gradient(white, white); }

input[type=checkbox]:not(old):checked + label > span:before {
  content: '\f26b';
  display: block;
  color: #222;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  font-family: 'Material-Design-Iconic-Font';
  font-weight: bold; }

.agree-term {
  display: inline-block;
  width: auto; }

/* Apply styles to labels except for radio button labels */
label:not(.genderlabel) {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #222;
}


.label-has-error {
  top: 22%; }

label.error {
  position: relative;
  background: url("../images/unchecked.gif") no-repeat;
  background-position-y: 3px;
  padding-left: 20px;
  display: block;
  margin-top: 20px; }

label.valid {
  display: block;
  position: absolute;
  right: 0;
  left: auto;
  margin-top: -6px;
  width: 20px;
  height: 20px;
  background: transparent; }
  label.valid:after {
    font-family: 'Material-Design-Iconic-Font';
    content: '\f269';
    width: 100%;
    height: 100%;
    position: absolute;
    /* right: 0; */
    font-size: 16px;
    color: green; }

.label-agree-term {
  position: relative;
  top: 0%;
  transform: translateY(0);
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -o-transform: translateY(0);
  -ms-transform: translateY(0); }

.material-icons-name {
  font-size: 18px; }

.signin-content {
  padding-top: 10px;
  padding-bottom: 10px; }

.social-login {
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  margin-top: 40px; }

.social-label {
  display: inline-block;
  margin-right: 15px; }

.socials li {
  padding: 5px; }
  .socials li:last-child {
    margin-right: 0px; }
  .socials li a {
    text-decoration: none; }
    .socials li a i {
      width: 30px;
      height: 30px;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      -ms-border-radius: 5px;
      transform: translateZ(0);
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -o-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out; }
  .socials li:hover a i {
    -webkit-transform: scale(1.3) translateZ(0);
    transform: scale(1.3) translateZ(0); }

.zmdi-facebook {
  background: #3b5998; }

.zmdi-github {
  background: #2b2d2f; }

.zmdi-google {
  background: #e72734; }

.signin-form {
  margin-right: 90px;
  margin-left: 80px; }

.signin-image {
  margin-left: 110px;
  margin-right: 20px;
  margin-top: 30px; }


@media screen and (max-width: 1200px) {
  .container {
    width: calc( 100% - 30px);
    max-width: 100%; } }
@media screen and (min-width: 1024px) {
  .container {
    max-width: 1200px; } }
@media screen and (max-width: 768px) {
  .signup-content, .signin-content {
    flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center; }

  .signin-image {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 50px;
    order: 2;
    -moz-order: 2;
    -webkit-order: 2;
    -o-order: 2;
    -ms-order: 2; }

  .signup-form, .signup-image, .signin-form, .signin-image {
    width: auto; }

  .social-login {
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center; }


  .signin-form {
    order: 1;
    -moz-order: 1;
    -webkit-order: 1;
    -o-order: 1;
    -ms-order: 1;
    margin-right: 0px;
    margin-left: 0px;
    padding: 0 30px; }

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

@media screen and (max-width: 400px) {
  .social-login {
    flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -o-flex-direction: column;
    -ms-flex-direction: column; }

  .social-label {
    margin-right: 0px;
    margin-bottom: 10px; } }


  .main section {
      display: none;
      transition: opacity 0.3s ease;
  }
  .main section.active {
      display: block;
      opacity: 1;
  }

/* Gender CSS Start */
.gender-radio-buttons {
  display: none;
}

.smallsvg {
  width: 10px;
}

.other-gender {
  width: 15px;
}

.malesmallsvg {
  transform: rotate(225deg);
}

/* Ensuring individual gender buttons are contained and do not overflow */
.genderlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background-color: #ededed;
  border-radius: 5px;
  padding: 4px 8px;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease-out;
  max-width: 100%; /* Ensure it doesn't extend beyond the box */
  box-sizing: border-box;
}

.radio-wrapper {
  display: flex;
  gap: 27px;
  justify-content: flex-start; /* Align all buttons to the left */
  flex-wrap: wrap; /* Ensure items wrap inside the box */
  max-width: 100%; /* Prevent overflow */
}

#gen {
  display: inline-block; /* Ensures proper alignment with inline elements */
  font-weight: bold; /* Optional: makes the label text bold */
  vertical-align: middle; /* Aligns with the buttons vertically */
}

/* Male Button Styles */
.malebutton {
  background-color: #dceeff; /* Default background for male button */
  margin-left:60px;
  border: 2px solid transparent; /* Default border */
  padding-left:25px;
  padding-right:25px;
}

.malebutton:hover {
  background-color: #569fcf;
}

#male:checked + .malebutton {
  background-color: #569fcf;
  border: 2px solid #76E3FE; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Female Button Styles */
.femalebutton {
  background-color: #ffe6f1; /* Default background for female button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.femalebutton:hover {
  background-color: rgb(245, 185, 195);
}

#female:checked + .femalebutton {
  background-color: rgb(245, 185, 195);
  border: 2px solid #F57CB3; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Other Button Styles */
.otherbutton {
  background-color: #f0e6ff; /* Default background for other button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.otherbutton:hover {
  background-color: #4d227a;
}

#other:checked + .otherbutton {
  background-color: #4d227a;
  border: 2px solid #9B4AED; /* Add border when selected */
  color: white; /* Change text color on selection */
}


/* Gender CSS End */


/* CSS For Country Code and Phone Number */
.ui-wrapper {
  --width: 100%;
  --height: 34px;
  margin-left:60px;
  --text-color: rgb(73, 73, 73);

  width: var(--width);
  height: var(--height);
  display: inline-flex;
  position: relative;
  background-color: var(--background);
  justify-content: space-between;
  padding-right: 10px;
  box-shadow: 0px 2px 5px 0px var(--shadow-color);
  transition: .4s;
  user-select: none;

  /* Replace border with a straight line at the bottom */
  border-bottom: 1px solid black; /* Adjust line color as per your design */
}



.ui-wrapper > input {
  appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 9999px;

}

.input-wrapper {
  width: 100%;
  padding-left: 10px;
  margin-top:-15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2px;
}

.input-wrapper legend {
  font-size: 11px;
}

.input-wrapper .textfield {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-wrapper .textfield #country-code-display {
  margin-right: 8px; /* Space between the country code and input */
  font-size: 16px;
  color: #000000;
}

.input-wrapper .textfield input {
  width: calc(100% - 30px); /* Adjust width to ensure it takes available space */
  font-size: 16px;
  outline: none;
  border: none;
  background: none;
  margin-top:15px;
  padding: 0 5px; /* Add padding for better spacing */
}

.invalid-msg {
  font-size: 12px;
  position: absolute;
  color: red;
  top: 115%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
}

#phonenumber:invalid + .invalid-msg {
  top: 110%;
  opacity: 1;
  visibility: visible;
}

.ui-wrapper:focus-within {
  border-color: var(--border-focus-color);
  box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);
}

/* Basic styling for the label */
#contact {
  font-size: 16px;
  height: 38px;
  background-color: white;
  color: #000000;
  gap: 8px;  /* Add space between the label text and the icon */
  transition: transform 0.3s ease; /* Smooth transition for label */
}


/* Shaking effect on hover */
#contact:hover #contact-icon {
  animation: shake 0.5s ease-in-out;
}

/* Keyframe animation for shaking */
@keyframes shake {
  0% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-5px);
  }
  50% {
      transform: translateX(5px);
  }
  75% {
      transform: translateX(-5px);
  }
  100% {
      transform: translateX(0);
  }
}

/* Optional: Change the cursor on hover */
#contact:hover {
  cursor: pointer;
}

/* Basic styling for the select dropdown */
#country-code {

  font-size: 14px; /* Adjust font size */
  border: 1px solid #ccc; /* Add a border */
  border-radius: 5px; /* Rounded corners */
  background-color: #ededed; /* White background */
  height:30px;
  color: #000000; /* Text color */
  width: 45px; /* Full width */
  outline: none; /* Remove the default outline */

  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */
}

/* Style for the country dropdown */
#country {
    width: 100%;
    height: 35px;
    font-size: 14px;
    padding: 5px;
    margin-left: 60px;
    outline: none;
    border: none;
    border-bottom: 1px solid #000000; /* Adjust the color and thickness as needed */
    background: none;
}

/* Style for the user type dropdown */
#user-type {
    width: 100%;
    height: 35px;
    font-size: 14px;
    padding: 5px;
    margin-left: 60px;
    margin-top: 15px;
    margin-bottom: 15px;
    outline: none;
    border: none;
    border-bottom: 1px solid #000000; /* Adjust the color and thickness as needed */
    background: none;
}


/* Style for aligning year fields horizontally */
.year-fields {
    display: flex;
}

/* Ensure the inputs for year have fixed width and are inline */
.year-fields input[type="text"] {
    padding: 8px; /* Padding inside the input */
    font-size: 14px; /* Font size for better visibility */
    color: #000000; /* Text color */
    border: 1px solid #ccc; /* Border styling */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

#year-start{
  margin-left:60px;
  margin-right:20px;
}

/* Custom placeholder styling */
.year-fields input[type="text"]::placeholder {
    color: #aaa; /* Light gray color for the placeholder */
}
#course-name,
#university {
    margin-left: 60px; /* Apply 60px left margin */
    width: 100%;
    text-align: left; /* Align text to the left */
    padding: 5px; /* Add padding for better spacing */
    outline: none; /* Remove the default outline on focus */
    border: none; /* Remove borders */
    border-bottom: 1px solid #000000; /* Add a bottom border */
    font-size: 14px; /* Set font size */
    background: none; /* Ensure no background color */
}

#profession,
#company-name {
    margin-left: 15px; /* Apply 15px left margin */
    width:84%;
}

/* Next Page Button */
.next-page {
  background: transparent;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #6dabe4;
  border-radius: 25px;
  color: #6dabe4;
  transition: color 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.next-page span {
  margin: 10px;
}

.next-page::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  border-radius: 50%;
  width: 300%; /* Ensure it covers the button */
  height: 300%;
  background-color: #6dabe4;
  z-index: -1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  opacity: 0;
}

.next-page:hover {
  color: #1da0f2;
}

.next-page:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Left Image shown */
.left-image {
  display: block;
  text-align: center; /* Centers the image horizontally */
  width: 100%; /* Ensures the div takes full width */
}

.left-image img {
  position:absolute;
  left:2%;
  top:25%;
  max-width:450px;
  width: 100%; /* Makes the image responsive, scaling to the div's width */
  height: 300px; /* Fixed height, you can adjust this value */
  object-fit: cover; /* Ensures the image covers the div without distorting */
   border-radius: 15px; /* Optional: Adds rounded corners to the image */
}

.form-group.form-button {
  display: flex; /* Using flexbox to align items in a row */
  justify-content: center; /* Center the buttons horizontally */
  align-items: center; /* Align items vertically */
  gap: 15px; /* Adds space between the button and link */
}

.form-submit {
  background: #6dabe4;
  color: #fff;
  border-bottom: none;
  padding: 15px 39px;
  border-radius: 5px;
  cursor: pointer;
  width: 200px; /* Set a fixed width for the submit button */
  text-align: center; /* Ensures the text inside the button is centered */
}

.form-submit:hover {
  background: #4292dc;
}

.signup-image-link {
  font-size: 14px;
  color: #222;
  text-align: center;
  display: inline-block; /* Ensures the link is treated as a block element */
  cursor: pointer;
  width: 200px; /* Set a fixed width for the link */
  text-align: center; /* Centers the link text */
}

.right-image{
margin-top:75px;
}
#fullname,#other-fields input {
  margin-left: 60px; /* Apply 60px left margin */
    width: 100%;
    text-align: left; /* Align text to the left */
    padding: 5px; /* Add padding for better spacing */
    outline: none; /* Remove the default outline on focus */
    border: none; /* Remove borders */
    border-bottom: 1px solid #000000; /* Add a bottom border */
    font-size: 14px; /* Set font size */
    background: none; /* Ensure no background color */
}

.signup-image-link-right {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    color:black;
  font-size:14px;
}

.right-side {
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
}

.email-container {
  display: flex;
  width: 100%;
  justify-content: space-between; /* Ensures the input and button are at opposite ends */
}
#email {
  flex-grow: 1; /* Makes the input take up remaining space */
}
.left-image{
  margin-top:-60px;
}

.form-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #869099;
}

.toggle-password:hover {
  color: #6e7881;
}

/* Form group styling */
.form-group {
  position: relative;
  margin-bottom: 20px; /* Space between fields */
}

/* Input fields */
.form-group input {
  width: 100%;
  padding: 10px;
  margin-left:15px;
  box-sizing: border-box;
}

/* Validation icons */
.validation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;  /* Adjust width */
  height: 15px; /* Adjust height to match width for a perfect circle */
  border-radius: 50%; /* Makes it circular */
  font-size: 14px;  /* Adjust icon size */
  font-weight: bold;
  text-align: center;
  line-height: 20px; /* Adjust line height to match the circle size */
  color: white; /* Default icon color */
  background-color: #ffffff; /* Default background color */
  position: absolute;
  top: 15px; /* Adjust positioning to be properly above the input */
  right: 10px; /* Align to the right */
}

/* Green circle for valid input */
.validation-icon.valid {
  background-color: green;
}

/* Red circle for invalid input */
.validation-icon.invalid {
  background-color: red;
}

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 999;
}

/* Modal Popup */
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 500px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
overflow: hidden;
}

.modal iframe {
width: 100%;
height: 280px;
border: none;
}

/* Close Button */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: #f44336;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
}


/* Center the loader */
#loading-animation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Ensure it's above other elements */
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Unique CSS for Sign In Password Eye Icon */
.signin-form .form-group {
  position: relative;
}

/* Positioning the eye icon above the password input */
.signin-form .form-group #toggle-password {
  position: absolute;
  top: 1px; /* Adjusted vertical positioning to move the icon higher */
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color: #869099;
}

/* Change color of the eye icon on hover */
.signin-form .form-group #toggle-password:hover {
  color: #6e7881;
}

#forget_pass {
    text-align: right; /* Horizontally center the button within the container */
    margin-top:-15px;
}

#forget_pass button {
    background: none;
    border: none;
    color: black;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    font-family: inherit;
}
#forget_pass button:hover {
text-decoration: underline;  /* Add the underline on hover */
}

#create_account{
   text-align: center; /* Horizontally center the button within the container */
  
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1560bd;
  color: white;
  padding: 9px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-left:-8px;
  margin-right:-8px;
  margin-top:-17px;  
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .logo img {
  height: 50px;
  margin-right: 15px;
  margin-top:12px;
}

.header .name {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-top:10px;
}
#btn_signin{
  margin-top:-15px;
}



/* From Uiverse.io by bimbx */ 
/* Hide the default checkbox */
#terms input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
 }
 
 #terms {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
 }
 
 /* Create a custom checkbox */
 .checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background: #606062;
  border-radius: 5px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5);
 }
 
 /* When the checkbox is checked, add a blue background */
 #terms input:checked ~ .checkmark {
  background-image: linear-gradient(#b9e9b3,#a8e4a0)
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
  content: "";
  position: absolute;
  display: none;
 }
 
 /* Show the checkmark when checked */
 #terms input:checked ~ .checkmark:after {
  display: block;
 }
 
 /* Style the checkmark/indicator */
 #terms .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
 }


 /* Background overlay */
.term_condition {
  display: none; /* Initially hidden */
  position: fixed; /* Fixed positioning to stay on top of the content */
  top: 50%; /* Position the popup in the middle of the screen vertically */
  left: 50%; /* Position the popup in the middle of the screen horizontally */
  transform: translate(-50%, -50%); /* Offset the popup by half its size to truly center it */
  background-color: white; /* Background color for the modal */
  padding: 20px; /* Add some padding inside the modal */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
  z-index: 1000; /* Ensure it's on top of the content */
  border-radius: 10px; /* Rounded corners */
  width: 300px; /* Set a fixed width */
  text-align: center; /* Center the text inside the modal */
}

/* Overlay background that appears when modal is visible */
.term_condition::before {
  content: ''; /* Create a pseudo-element */
  position: fixed; /* Fixed positioning to cover the entire screen */
  top: 0; /* Position at the top of the screen */
  left: 0; /* Position at the left of the screen */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: #ffffff; /* Semi-transparent black background */
  z-index: -1; /* Place the overlay behind the modal */
}


#okButton {
  background-color: #28a745; /* Green background color */
  color: white; /* White text */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Add padding for a nice size */
  font-size: 11px; /* Font size */
  font-weight: bold; /* Bold text */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change the cursor to a pointer on hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover effect */
}

#okButton:hover {
  background-color: #218838; /* Darker green when hovered */
  transform: scale(1.05); /* Slightly scale the button on hover */
}

#okButton:active {
  transform: scale(0.98); /* Slightly shrink the button on click */
}





/* Ensuring left part takes up half of the width */
.left_part {
  margin-left:40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Add space between elements */
  justify-content: flex-start;
}

/* Ensuring right part takes up half of the width */
.right_part {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Add space between elements */
  justify-content: flex-start;
}

/* Additional styling for header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1560bd;
  color: white;
  padding: 9px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-left:-8px;
  margin-right:-8px;
  margin-top:-17px;  
}

.header .logo {
  display: flex;
  align-items: center;
}

.header .logo img {
  height: 50px;
  margin-right: 15px;
  margin-top:12px;
}

.header .name {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-top:10px;
}

.gender-radio-buttons {
  display: none;
}

.smallsvg {
  width: 10px;
}

.other-gender {
  width: 15px;
}

.malesmallsvg {
  transform: rotate(225deg);
}

/* Ensuring individual gender buttons are contained and do not overflow */
.genderlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:17px;
  margin-bottom:14px;
  width: auto;
  height: 38px;;
  background-color: #ededed;
  border-radius: 5px;
  padding: 4px 8px;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease-out;
  max-width: 100%; /* Ensure it doesn't extend beyond the box */
  box-sizing: border-box;
}

.radio-wrapper {
  display: flex;
  gap: 33px;
  justify-content: flex-start; /* Align all buttons to the left */
  flex-wrap: wrap; /* Ensure items wrap inside the box */
  max-width: 100%; /* Prevent overflow */
}

#gen {
  display: inline-block; /* Ensures proper alignment with inline elements */
  font-weight: bold; /* Optional: makes the label text bold */
  vertical-align: middle; /* Aligns with the buttons vertically */
}

/* Male Button Styles */
.malebutton {
  background-color: #dceeff; /* Default background for male button */
  margin-left:-0px;
  border: 2px solid transparent; /* Default border */
  padding-left:25px;
  padding-right:25px;
}

.malebutton:hover {
  background-color: #569fcf;
}

#male:checked + .malebutton {
  background-color: #569fcf;
  border: 2px solid #76E3FE; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Female Button Styles */
.femalebutton {
  background-color: #ffe6f1; /* Default background for female button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.femalebutton:hover {
  background-color: rgb(245, 185, 195);
}

#female:checked + .femalebutton {
  background-color: rgb(245, 185, 195);
  border: 2px solid #F57CB3; /* Add border when selected */
  color: white; /* Change text color on selection */
}

/* Other Button Styles */
.otherbutton {
  background-color: #f0e6ff; /* Default background for other button */
  border: 2px solid transparent; /* Default border */
    padding-left:25px;
  padding-right:25px;
}

.otherbutton:hover {
  background-color: #4d227a;
}

#other:checked + .otherbutton {
  background-color: #4d227a;
  border: 2px solid #9B4AED; /* Add border when selected */
  color: white; /* Change text color on selection */
}


/* Gender CSS End */

/* Contact */

.ui-wrapper {
  --width: 100%;
  --height: 34px;
  --text-color: rgb(73, 73, 73);
  width: var(--width);
  height: var(--height);
  display: inline-flex;
  position: relative;
  background-color: var(--background);
  justify-content: space-between;
  padding-right: 10px;
  box-shadow: 0px 2px 5px 0px var(--shadow-color);
  transition: .4s;
  user-select: none;
  /* Replace border with a straight line at the bottom */
  border-bottom: 1px solid black; /* Adjust line color as per your design */
}



.ui-wrapper > input {
  appearance: none;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 9999px;

}

.input-wrapper {
  width: 100%;
  padding-left: 10px;
  margin-top:-15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2px;
}

.input-wrapper legend {
  font-size: 11px;
}

.input-wrapper .textfield {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-wrapper .textfield #country-code-display {
  margin-right: 8px; /* Space between the country code and input */
  font-size: 14px;
  color: #000000;
}

.input-wrapper .textfield input {
  width: calc(100% - 30px); /* Adjust width to ensure it takes available space */
  font-size: 14px;
  outline: none;
  border: none;
  background: none;
  margin-top:15px;
  padding: 0 5px; /* Add padding for better spacing */
}

.invalid-msg {
  font-size: 12px;
  position: absolute;
  color: red;
  top: 115%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
}

#phonenumber:invalid + .invalid-msg {
  top: 110%;
  opacity: 1;
  visibility: visible;
}

.ui-wrapper:focus-within {
  border-color: var(--border-focus-color);
  box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);
}

/* Basic styling for the select dropdown */
#country-code {
  margin-top:15px;
  padding-left:10px;
  font-size: 14px; /* Adjust font size */
  border: 1px solid #ccc; /* Add a border */
  border-radius: 5px; /* Rounded corners */
  background-color: #ededed; /* White background */
  height:25px;
  color: #000000; /* Text color */
  width: 55px; /* Full width */
  outline: none; /* Remove the default outline */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */
}


/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  .signup-content {
      flex-direction: column; /* Stack left and right parts vertically */
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
  }
}

/* Common styling for input fields */
#username_info, 
#fullname_info, 
#company-name, 
#institution, 
#specialization, 
#research-institute, 
#research-topic,
#hello1,
#hello2,
#contact{
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 90%;
  box-sizing: border-box;
  margin-left: 0px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Separate styling for course-related fields */
#course-name, 
#year-start, 
#year-end, 
#university {
  font-size: 14px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 90%;
  box-sizing: border-box;
  margin-left: 0px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Styling for the course-name */
#course-name,#university {
  background-color: white;
}

/* Styling for the year fields */
#year-start, 
#year-end {
  max-width: 300px; /* Restricting width for start and end year */
  width: 40%;
  margin-left:20px;
}



/* Add hover and focus effects for input fields */
#username_info:hover, 
#fullname_info:hover, 
#profession:hover, 
#company-name:hover, 
#institution:hover, 
#specialization:hover, 
#research-institute:hover, 
#research-topic:hover,
#course-name:hover, 
#year-start:hover, 
#year-end:hover, 
#hello1:hover,
#hello2:hover,
#university:hover,
#contact:hover{
  border-color: #007BFF;
}

#username_info:focus, 
#fullname_info:focus, 
#profession:focus, 
#company-name:focus, 
#institution:focus, 
#specialization:focus, 
#research-institute:focus, 
#research-topic:focus,
#course-name:focus, 
#year-start:focus, 
#year-end:focus, 
#hello1:focus,
#hello2:focus,
#university:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* Separate styling for the select dropdown */
#user-type, #country {
  font-size: 14px;
  padding-left:15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 500px;
  width: 90%;
  margin-left:-4px;
  box-sizing: border-box;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ccc" d="M2 0L0 2h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  appearance: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for user-type select */
#user-type:hover, #country:hover {
  border-color: #007BFF;
}

/* Focus effect for user-type select */
#user-type:focus {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none;
}


#next-page {
  background-color: #6dabe4; /* Green background */
  color: white; /* White text */
  padding: 12px 24px; /* Padding around the text */
  border: none; /* No border */
  border-radius: 8px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer */
  font-size: 14px; /* Font size */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#next-page:hover {
  background-color: #4292dc; /* Darker green on hover */
}

#already-member-btn-right, #already-member-btn-right-part {
    color: #000000; /* Blue color */
    text-decoration: none; /* Remove underline */
    font-size: 14px; /* Font size */
    margin-left:150px;
    display: inline-block; /* Make the link behave like a button */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

#already-member-btn-right:hover {
    text-decoration: underline; /* Underline on hover */
}

.no {
 position:absolute;
  bottom:0;
  left:50%;
}

#country{
  margin-top:14px;
}

/* Container that holds the left and right parts */
.signup-content {
  margin-top:17px;
  width: 957.44px; /* Fixed width */
  height: 459.14px; /* Fixed height */
  display: flex;
  justify-content: space-between;
  gap: 30px;
  background-color:white;
  position: absolute; /* To position it relative to the viewport */
  top: 50%; /* Move to the middle of the viewport vertically */
  left: 50%; /* Move to the middle of the viewport horizontally */
  transform: translate(-50%, -50%); /* Offset the element by half of its own width/height */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 20px; /* Add padding to avoid content being right on the edges */
  box-sizing: border-box; /* Ensures padding doesn't affect the container size */
  flex-wrap: wrap; /* Allow content to wrap if necessary */
}

.signup-image {
     position:absolute;
  right:-2%;
  top:3%;
  flex: 1;
  width:400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left_part{
  position:absolute;
  width:400px;
  background-color:white;
}
.right_part{
  position:absolute;
  background-color:white;
  right:4%;
  width:400px;
}

.save{
  background-color: #6dabe4; /* Green background */
  color: white; /* White text */
  padding: 5px 130px; /* Padding around the text */
  border: none; /* No border */
  text-decoration:none;
  border-radius: 8px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer */
  font-size: 14px; /* Font size */
  transition: background-color 0.3s ease; /* Smooth transition for background color */

}

.save:hover {
  background-color: #4292dc; /* Darker green on hover */
}