* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing:
  border-box;
}

html {
  height: 100%;
}

html, body {
  font-size: 1em;
  font-family: "Helvetica Neue" ,Helvetica, Arial, "Lucida Grande", sans-serif;
  /*--- keeps font in footers on iphone landscape view from growing ---*/
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /*--- end ---*/
}

  body {
    min-height: 100%;
    color: #ffffff;
    background-color: #0b0f28;
    overflow: scroll;
  }

    .page_content {
      height: 100%;
      display: block;
      height: 100%;
      width: 100%;
    }

    .text_gutter {
      padding: 7.5%;
    }

    .text_spacing p, .text_spacing h1, .text_spacing h2, .text_spacing h3, .text_spacing h4, .text_spacing h5, .text_spacing h6, .text_spacing ul {
      margin: revert;
      padding: revert;
      line-height: revert;
      text-align: revert;
      font-size: revert;
      font-weight: revert;
    }

    ul {
      list-style: disc; /* default bullet */
      padding-left: 2em; /* typical default indent */
    }

      .hero_image {
        position: fixed;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        height: 100vh;
        width: 100%;
        background-color: #27338c;
        background-image: linear-gradient(#27338cb3 0px, #27338cd9 95%, #27338cd9 100%), url("images/field_of_iris_at_dawn.jpg");
        background-size: cover; z-index: -1;
      }

        header {
          position: fixed;
          height: 53px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          top: 0;
          background-color: #0b0f28bf;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 1;
        }

        .hero_banner_container {
          display: block;
          min-height: 100vh;
          width: 100%;
          margin: auto;
        }

          .hero_banner_content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 85vh;
            padding: 15% 0 15% 0;
          }

          .hero_banner_content h1 {
            font-family: "Audiowide", Arial;
            font-size: clamp(35px * 4, 35vw, 35px * 6);
            line-height: 0.9em;
            white-space: nowrap;
          }

          .hero_banner_content h2 {
            font-family: Arial;
            font-weight: lighter;
            line-height: 1em;
            font-size: clamp(6.2px * 4, 6.2vw, 6.2px * 6);
          }

          .hero_banner_content > p {
            font-family: Arial;
            font-size: clamp(3.55px * 4, 3.55vw, 3.55px * 6);
            line-height: 2.5em;
            opacity: 0.8;
          }

          .hero_banner_links {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
          }

          .hero_banner_links_cell {
            text-align: center;
            min-width: 11em;
            width: 15%;
            padding: 1em;
          }

          .hero_banner_links p {
            padding: 0.5em 1em 0.5em 1em;
            background-color: #27338c;
            border-radius: 5px;
            border: 1px solid #5ce1e6e6;
           }

           .arrow_container {
             display: flex;
             flex-direction: column;
             justify-content: start;
             align-items: center;
             height: 100%;
             width: 100%;
             min-height: 15vh;
           }

           .arrow_cell { }

           .arrow, .down {
             border: solid #ffffff;
             border-width: 0px 3px 3px 0px;
             display: inline-block;
             padding: 0.5em;
             transform: rotate(45deg);
             -webkit-transform: rotate(45deg);
            }

        .services_section {
          display: block;
          height: 100%;
          width: 100%;
          background-image: linear-gradient(#27338c00 0%, #27338c 25%, #27338c 100%);
        }

          .services_title {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            padding: 0% 7.5% 2.5% 7.5%;
          }

          .services_title h2, .services_title p {
            padding: 0em 0em 1em 0em;
          }

            .services_listing {
              height: 100%;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center;
              padding: 0em 1em 0em 1em;
            }

              .services {
                display: flex;
                flex-direction: column;
                padding: 1em 1em 1em 1em;
              }

              .services > div {
                width: 100%;
                width: 200px;
              }

                .services_name {
                  height: 6em;
                  border-bottom: 1px solid #5ce1e6e6;
                  background-color: #ff6b0030;
                  border-radius: 8px 8px 0px 0px;
                  padding: 0.75em 1em 0.25em 1em;
                  color: #00ffff; }

                    .services_list {
                      height: 100%;
                      background-color: #5ce1e640;
                      border-radius: 0px 0px 8px 8px;
                      padding: 1em 1em 0em 1em;
                    }

        footer { display: block;
          height: 100%;
          width: 100%;
          background-color: #0b0f2899;
          padding: 1em;
        }

        /*--- form styling css ---*/

        form {
          padding: 5em;
          display: grid;
          row-gap:
          0.5em;
        }

        form input, button, select, textarea {
          font: inherit;
        }

        form textarea {
          resize: vertical;
        }

        form input:not([type="checkbox"], [type="radio"]) {
          width: 100%;
        }

        form input:hover, textarea:hover {
          outline: 1px solid #5ce1e6!important;
          border-color: #5ce1e6 !important;
        }

        form input:focus {
          outline: none;
          box-shadow: inset 0 0 0 2em #42f9ff4d !important;
          background-color: transparent;
          border-color: #5ce1e6 !important;
        }

        form input:not(:focus) {
          box-shadow: inset 0 0 0 2em transparent !important;
        }

        form textarea:focus {
          outline: none;
          background-color: #42f9ff4d !important;
          border-color: #5ce1e6 !important;
        }

        form input, textarea {
          background-color: transparent !important;
          color: inherit;
        }

        form input::placeholder {
          color: #ffffffb3;
          font-size: 0.9em;
        }

        form textarea {
          width: 100%;
          height: 10em;
        }

        form legend {
          padding-bottom: 0.5em;
        }

        fieldset{
          padding-top: 0em;
        }

        fieldset.two_col_grid {
          display: grid;
          grid-template-columns: 1fr;
          grid-column-gap: 1em;
          grid-row-gap: 0.5em;
        }

        @media (min-width: 720px) {
          fieldset.two_col_grid {
            grid-template-columns: 1fr 1fr;
          }
        }

        fieldset.one_col_grid {
          display: grid;
          grid-template-columns: 1fr;
          grid-column-gap: 1em;
          grid-row-gap: 0.5em;
        }

        fieldset .label_under_input {
          display: flex;
          flex-direction: column-reverse;
          gap: 0.25em;
        }

        fieldset .label_over_input {
          display: flex;
          flex-direction: column;
          gap: 0.25em;
        }

        fieldset .label_over_input label:not(.small_labels){
          padding-bottom: 0.25em;
        }

        .small_labels {
          font-size: 0.75em;
        }

        .hidden_elements {
          display: none;
        }

        form button {
          background-color: #27338c;
        }

        form button, input, textarea {
          padding: 0.5em 1em 0.5em 1em;
          border-radius: 5px;
          border: 1px solid #5ce1e6;
          color: inherit;
        }

        .centered_grid {
          display: grid;
          justify-content: center;
        }

        .input_left {
          display: flex;
          flex-direction: row-reverse;
          gap: 1em;
          align-items: center;
        }

        .error {
          display: flex;
          flex-direction: column;
          color: red !important;
          font-size: 0.9em;
        }
        p#fstatus {order: 1 !important;}
        p#first_name {order: 2 !important;}
        p#last_name {order: 3 !important;}
        p#email {order: 4 !important;}
        p#phone_number {order: 5 !important;}
        p#message {order: 6 !important;}
        p#terms_acceptance {order: 7 !important;}

        .error-border {
          border: 1px solid red;
        }

        .error-border:focus {
          outline: none;
        }

        #fstatus {
          color: green;
        }

        /* Prevent autofill background & text color changes */ /* Chrome, Edge, Safari */
        input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
          -webkit-box-shadow: 0 0 0px 1000px transparent inset;
          -webkit-text-fill-color: #ffffff;
          transition: background-color 5000s ease-in-out 0s !important;
        }

          /* Firefox */
        input:-moz-autofill {
          box-shadow: 0 0 0px 1000px transparent inset;
          -moz-text-fill-color: #ffffff;
        }


    /*--- text styling css ---*/
    header, footer {
      font-size: 0.8em;
      color: #d7dbf4;
    }

    h1, h2, header, footer, .services_title p {
      text-align: center;
    }

    .strong {
      font-weight: bold;
    }

    .hero_banner_content > p {
      color: #00ffff;
    }

    .services p {
      font-size: 0.9em;
      padding: 0em 0em 0.5em 0em;
    }

  /* fade transparent nav into bg colour */
  @media screen and (orientation: portrait) {
    header { background-color: #0b0f28; }
    .services > div { width: 155px; }
  }