html {
  font-size: 62.5%;
}

html body {
  font-family: 'Oracle Sans';
  font-size: 1.4rem;
  color: #000;
}

html body * {
  font-family: 'Oracle Sans';
}

body,
div,
section,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  margin: 0px;
  padding: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

strong {
  font-weight: normal;
  font-family: 'Oracle Sans Bold';
}
body {
  background: linear-gradient(180deg, #E8F7FF 41.69%, #FFF 52.29%);
}

.container{
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 30px;
  padding: 0 10px;
}
.sticky-form{
  position: sticky;
  right: 0;
  top: 0;
  padding: 20px 0;
}
.main-header{
  padding-top: 30px;
  padding-bottom: 30px;
  .ons-logo{
    height: 40px;;
    margin-bottom: 30px;
  }
  h1{
    font-family: "Oracle Sans Bold";
    font-size: 4.5rem;
    line-height: 1.25em;
    margin-bottom: 10px;
  }
  p{
    font-size: 1.7rem;
    line-height: normal;
    margin-bottom: 15px;
  }
}

.features{
  margin-bottom: 60px;
  h2{
    color: #1E9995;
    font-family: "Oracle Sans Bold";
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 25px;
  }
  .grid{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5px;
  }
  .item{
    flex: 1;
  }
  .item img{
    margin-bottom: 10px;
    height: 58px;
  }
  .item h3{
    color: #000;
    font-family: "Oracle Sans Semi Bold";
    font-size: 1.4rem;
    margin-bottom: 5px;;
  }
}

.checklist{
  margin-bottom: 60px;
  ul.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 36px;
    max-width: 100%;
    margin-left: 20px;
  }
  ul li {
    list-style-image: url('https://6262239.app.netsuite.com/c.6262239/portal/common/form/landing_pages/img/misc/icon-green-check.svg');
    font-size: 1.6rem;
  }
}

.customers{
  h2{
    color: #1E9995;
    font-family: "Oracle Sans Bold";
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 25px;
  }
  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 40px;
    gap: 15px;
  }
  img {
    margin-bottom: 15px;
  }
}
footer {
  background-image: url(https://6262239.app.netsuite.com/c.6262239/portal/common/form/landing_pages/img/misc/footer-blue-texture1.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-color: #083248;
  padding-top: 37px;
  padding-bottom: 37px;
  color: #ffffff;
  .wrap{
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }
}

.form-section{
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.20);
  padding: 20px 30px;
  .form-header{
    margin-bottom: 15px;
  }
  .form-header h2{
    color: #1E9995;
    font-family: Georgia;
    font-size: 2rem;
    font-style: italic;
    font-weight: 700;
  }
  .form-header p{
    color: #000;
    font-size: 1.4rem;
  }
}
.ns-form-list {
  .ns-form-item {
    position: relative;
    .form-input {
      z-index: 2;
      position: relative;
      select,
      input[type="text"],
      input[type="email"],
      input[type="phone"] {
        width: 100%;
        outline: none;
        &:focus {
          outline: none;
        }
      }
    }
    .ns-form-caption {
      position: absolute;
      top: 13px;
      left: 10px;
      transform: translateY(-50%);
      z-index: 3;
      pointer-events: none;
    }
    .ns-form-caption-ta{
      position: static;
      transform: none;
    }
  }
  .ns-form-item-ta,.ns-form-item-2l{
    grid-column: span 2;
  }
}
.ns-form-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 30px;
  align-items: flex-end;
  margin-bottom: 15px;
  .ns-form-item{
    margin-top: 15px;
  }
  .ns-form-caption label{
    font-size: 1.4rem;
    color: #6F6964;
  }
  .form-input {
    select,
    input[type="text"],
    input[type="email"],
    input[type="phone"] {
      font-size: 1.4rem;
      font-family: 'Oracle Sans Semi Bold';
      background-color: #FBF9F8;
      border: none;
      border-radius: 6px;
      padding: 5px 10px;
      height: auto;
      &:focus{
        box-shadow: 0 0 0 1px #1E9995 inset;
      }
    }
    textarea{
      resize: none;
      width: 100%;
      background-color: transparent;
      border: none;
      box-shadow: 0 0 0 1px #1E9995 inset;
    }
  }
}
.ns-form-submit-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  input[type="submit"]{
    color: #ffffff;
    background-color: #E18212;
    border: none;
    border-radius: 6px;
    padding: 10px;
    width: 100%;
    font-size: 1.7rem;
  }
}
.ns-form-opt-in * {
  font-size: 11px;
  color: #616161;
  line-height: normal;
  text-align: left;
}
.hiddenFields{
  display: none;
}
@media (max-width: 768px) {
  .container{
    grid-template-columns: 1fr;
    padding-left: 20px;
    padding-right: 20px;
  }
  .sticky-form {
    position: static;
  }
  .main-header h1{
    font-size: 3.6rem;
  }
}
@media (max-width: 500px) {
  .features .grid{
    display: block;
  }
  .features .item{
    width: 200px;
    margin: 15px auto;
  }
  .checklist ul.grid{
    grid-template-columns: 1fr;
  }
  .checklist{
    width: 230px;
    max-width: 100%;
    margin: 0 auto 60px;
  }
  .customers{
    width: 230px;
    max-width: 100%;
    margin: 0 auto 60px;
  }
  .customers .flex{
    flex-direction: column
  }
  .customers img{
    flex: 1;
  }
}