.registration-field-title {
    font-family: var(--sc-font);
    letter-spacing: 1px;
    color: var(--mediumwhite);
	font-weight: bold;
	font-size: 17px;
}

.registration-field-titleBigger {
    font-family: var(--sc-font);
    letter-spacing: 1px;
    color: var(--mediumwhite);
	font-weight: bold;
	font-size: 22px;
}

.registration-header-container {
	display: block;
	background-color: var(--mainboard-bg);
	padding: 20px 20px 0px 20px;
}

.registration-grid-container {
	display: grid;
	background-color: var(--mainboard-bg);
	padding: 20px;
	grid-template-areas: "regleft regright";
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem;
}

.registration-grid-left {
	grid-area: regleft;
}

.registration-grid-right {
	grid-area: regright;
}


.registration-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  padding-top: 1rem;
}

.reg-field {
  display: flex;
  flex-direction: column;
}

.reg-field label {
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--mediumwhite);
}

/*========= MOBILE STYLING =========*/
@media screen and (max-width: 767px) {
  .registration-grid-container {
    display: block;
    padding: 1rem;
  }

  .registration-grid-left,
  .registration-grid-right {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 767px) {
  .registration-details {
    grid-template-columns: 1fr; /* stack fields */
  }
}