/* General form structure */
/* Styling for the Edit Profile tab label */
.tabs .head1 {
    font-size: 15px !important; /* Adjust the font size here */
    font-family: Lucida Console; /* Change the font family */
    font-weight: 0!important; /* Adjust thickness: normal (400), bold (700), etc. */
    color: #A1A7A6 !important; /* Text color */
    text-transform: uppercase; /* Optional: makes text all caps */
    padding: 10px 15px; /* Adds some space around the text */
    cursor: pointer; /* Hand cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Styling for the Subscribe tab label */
.tabs .head2 {
    font-size: 15px !important; /* Adjust the font size here */
    font-family: Lucida Console; /* Change the font family */
    font-weight: 0!important; /* Adjust thickness: normal (400), bold (700), etc. */
    color: #A1A7A6 !important; /* Text color */
    text-transform: uppercase; /* Optional: makes text all caps */
    padding: 10px 15px; /* Adds some space around the text */
    cursor: pointer; /* Hand cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}
.tabs #page_header {
    display: block; /* Ensures the label behaves as a block element */
    text-align: center; /* Centers text horizontally */
    position: relative; /* Allows positioning within the .tabs container */
    width: 100%; /* Ensures it spans the container */
    padding-left: 100px; /* Centers the block element horizontally */
    line-height: normal; /* Adjusts vertical alignment if needed */
}
.register .obinfo {
  width: 100%;
  font-size: 15px !important;
  text-align: right !important;
  font-style: italic;
      color: #5A5B59 !important; /* Text color */
  font-weight: normal !important;
  text-decoration: none !important;
}

.register {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.register p {
  font-size: 8pt;
  clear: both;
  margin: 0;
  color: gray;
  padding: 4px;
}

/* Fieldset styling */
.register fieldset {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #f1f1f1;
  display: flex;
  flex-wrap: wrap;
}

.register .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 48%;  /* Each form group takes up almost half the space */
  justify-content: space-between;
}

.register label {
  font-size: 10px !important;
  margin-right: 10px;
  width: 30%;  /* Label takes 30% of the width */
  text-align: right;
  font-weight: normal !important;
  text-decoration: none !important;
  font-family: 'OCR A Extended', sans-serif !important;
}

.register input,
.register select {
  width: 65%;  /* Input/Select takes up 65% of the width */
  height:90%;
  padding: 2px 2px;
  border: 1px solid #e1e1e1;
  color: #505050;
}

/* submit button */
.register {
  position: relative;
  margin-top: 20px;
  background-color: #fff;
  padding: 2px;
  border-radius: 20px;
}

/* Center the submit button using absolute positioning */
.register .button.registration-button {
  position: absolute;
  left: 50%; /* Move to the middle horizontally */
  transform: translateX(-50%); /* Offset the button by half of its width */
  background: #cdcdcd;
  padding: 5px 5px;
  color: #000000;
  font-size: 10px;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  width: auto; /* You can set a specific width if desired */
  margin-top: 20%; /* You can adjust this if needed */
}

/* Row1 - Account Info */
.register .row1 .form-group {
  display: flex;
  flex-wrap: wrap;
}

.register .row1 .form-group:nth-child(1),
.register .row1 .form-group:nth-child(2) {
  width: 48%; /* Username + email fields in first column */
}

.register .row1 .form-group:nth-child(3),
.register .row1 .form-group:nth-child(4) {
  width: 48%; /* Password + confirm password fields in second column */
}

/* Row2 - Personal Details */
.register .row2 .form-group {
  width: 48%; /* First Name + Gender in first column */
}

.register .row2 .form-group:nth-child(2) {
  width: 48%; /* Gender field */
}

/* Row3 - Further Information */
.register .row3 .form-group {
  width: 48%; /* Country + Phone in first column */
}

.register .row3 .form-group:nth-child(3) {
  width: 48%; /* Date field in second column */
}

/* Row4 - Further Information */
.register .row4 .form-group {
  width: 68%; /* Country + Phone in first column */
}

/* Adjust the layout for smaller screens */
@media (max-width: 768px) {
  .register .form-group {
    width: 100%;  /* Make each form group take the full width on smaller screens */
    margin-bottom: 15px;
  }

  .register label {
    width: 100%;  /* Labels will take full width on smaller screens */
    text-align: left;
  }

  .register input,
  .register select {
    width: 100%;  /* Inputs will also take full width on smaller screens */
  }

  /* Adjust rows to stack vertically on smaller screens */
  .register .row1 .form-group:nth-child(1),
  .register .row1 .form-group:nth-child(2),
  .register .row1 .form-group:nth-child(3),
  .register .row1 .form-group:nth-child(4) {
    width: 100%; /* Full width for all fields in Row 1 */
  }

  /* Adjust rows to stack vertically on smaller screens */
  .register .row2 .form-group:nth-child(1),
  .register .row2 .form-group:nth-child(2),
  .register .row2 .form-group:nth-child(3),
  .register .row2 .form-group:nth-child(4) {
    width: 100%; /* Full width for all fields in Row 2 */
  }
  
   /* Adjust rows to stack vertically on smaller screens */
  .register .row3 .form-group:nth-child(1),
  .register .row3 .form-group:nth-child(2),
  .register .row3 .form-group:nth-child(3),
  .register .row3 .form-group:nth-child(4) {
    width: 100%; /* Full width for all fields in Row 3 */
  }

  /* Adjust rows to stack vertically on smaller screens */
  .register .row4 .form-group:nth-child(1),
  .register .row4 .form-group:nth-child(2),
  .register .row4 .form-group:nth-child(3),
  .register .row4 .form-group:nth-child(4) {
    width: 100%; /* Full width for all fields in Row 4 */
  }

  .register .row2 .form-group,
  .register .row3 .form-group {
    width: 100%; /* Full width for fields in Row 2 and Row 3 */
  }
}