body {
  background: #0A1215;
  color: #FFFFFF;
  font-family: "Manrope", sans-serif;
}

.container-fluid {
  position: relative;
  overflow: hidden;
}

p {
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

h2 {
  text-transform: uppercase;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
}

.img-header{
  width: 100%;
  max-width: 420px;
}

.img-bg-1 {
  height: 849px;
  position: absolute;
  left: -250px;
  top: 50px;
  z-index: -1;
}

.img-bg-2 {
  height: 1061.33px;
  position: absolute;
  top: 600px;
  left: 800px;
  z-index: -1;
}

.mainPage-Paragraph {
  margin-top: 0px;
}

.d-contents {
  display: contents;
}

.btn-primary,
input[type="submit"] {
  color: white;
  text-align: center;
  background: #232A2C;
  border: rgba(255, 255, 255, 0.4) 1px solid;
  height: 66px;
  width: 320px;
  border-radius: 50px;
  display: table-cell;
  vertical-align: middle;
}


input[type="submit"] {
  width: 100%;
}

.btn-primary:hover {
 background: #232A2C;
 border: rgba(255, 255, 255, 0.4) 3px solid;
}

.btn-primary:active, .btn-primary:focus  {
 background: #232A2C !important;
 border: rgba(255, 255, 255, 0.4) 3px solid !important;
}


.field {
  margin-bottom: 10px;
  position:relative;
}

.field input {
  color: white;
  display: block;
  width: 100%;
  line-height: 1.5;
  font-size: 14px;
  background: transparent;
  border: 0px;
  border-radius: 0px !important;
  border-bottom: 1px solid white;
}

.field input::placeholder {
  color: white;
}

label h6 {
  color: white;
  line-height: 1.5;
  font-size: 14px;
}

.checkbox-container {
  background: inherit;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: calc(100% - 3rem);
  display: flex;
  flex-direction: column;
}

.outer-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #434343;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.outer-border .checkmarkicon,
.no-border .checkmarkicon {
  position: absolute;
  top: 50%;
  margin-top: -12.5px;
  left: 16px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border-width: 1px;
  border: solid 1px white;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .outer-border {
  border: solid 2px #434343;
}

.checkbox-container input:focus ~ .outer-border {
  border: solid 2px #434343;
}

.checkbox-container:hover input ~ .outer-border .checkmarkicon {
  border: solid 2px transparent;
}

.checkbox-container input:focus ~ .outer-border .checkmarkicon {
  border: solid 2px transparent;
}

/* When the checkbox is checked*/
.checkbox-container input:checked ~ .outer-border .checkmarkicon {
  background-color: white;
  border-radius: 50%;
  border-width: 2px;
  border: solid 1px transparent;
}

.checkbox-container input:checked ~ .no-border .checkmarkicon {
  background-color: white;
  border-radius: 50%;
  border-width: 2px;
  border: solid 1px transparent;
}

.checkbox-container input:checked ~ .outer-border .checkmarkicon:after {
  display: block;
}

.checkbox-container input:checked .no-border .checkmarkicon:after {
  display: block;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator  {
  cursor: pointer;
  opacity: 1;
  filter: invert(1);
}

.hidden {
  display: none;
}


.success-popUp {
  position: absolute;
  width: 100%;
}


/*`xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
  .img-bg-1 {
      height: 849px;
      position: absolute;
      left: -360px;
      top: 50px;
  }

  .img-bg-2 {
    height: 1061.33px;
    position: absolute;
    top: 700px;
    left: 580px;
  }

}


/*`xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  .img-bg-1 {
    height: 849px;
    position: absolute;
    left: -490px;
    top: 50px;
  }
  .img-bg-2 {
    height: 1061.33px;
    position: absolute;
    top: 740px;
    left: 460px;
  }
}

/*`lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .img-bg-1 {
    height: 849px;
    position: absolute;
    left: -540px;
    top: 50px;
  }
  .img-bg-2 {
    height: 1061.33px;
    position: absolute;
    top: 820px;
    left: 320px;
  }
}

/*`md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  .img-bg-1 {
    height: 849px;
    position: absolute;
    left: -560px;
    top: 50px;
  }
  .img-bg-2 {
    height: 1061.33px;
    position: absolute;
    top: 990px;
    left: 300px;
  }
}

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .img-bg-1 {
    height: 849px;
    position: absolute;
    left: -500px;
    top: 30px;
  }

  .img-bg-2 {
    height: 1061.33px;
    position: absolute;
    top: 1200px;
    left: -80px;
  }



  .mainPage-Paragraph {
    margin-top: 380px;
  }

  .mainPage-Paragraph h2 {
    text-align: center;
  }


}