/* Mobile Header Fix */
  @media screen and (max-width: 736px) {
    #header {
      height: 85px !important;
      line-height: 85px !important;
      padding: 0 1.5em !important;
    }

    #header .logo img {
      height: 83px !important;
      display: block !important;
    }
  }

  /* Nav Font Size */
  #nav a {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
  }

  /* Global Background Cleanup */
  body, html,
  #page-wrapper,
  .wrapper.style3,
  .wrapper.style4,
  .wrapper.special {
    background: #F7F8FA !important;
    background-image: none !important;
  }

  .image.filtered:after {
    background-image: none !important;
  }

  /* Banner Cleanup */
  .banner {
    background: #F7F8FA !important;
    box-shadow: none !important;
  }

  .banner:before,
  .banner:after,
  .banner .image,
  .banner .image:before,
  .banner .image:after,
  .banner .content,
  .banner .content:before,
  .banner .content:after {
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }


  /* Banner Text & Button Styling */
  .banner .content h1 {
    color: #686A82 !important;
  }

.banner .content .button {
  color: #686A82 !important;
  border-color: #686A82 !important;
  background: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 2px #686A82 !important;
}

.banner .content .button::after {
  color: #686A82 !important;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html {
  scroll-behavior: smooth;
}

  /* Reduce banner top/bottom padding */
  .banner {
    padding: 1rem 0 !important;  /* adjust 2rem up/down as you like */
  }

  /* Remove extra spacing around the content block */
  .banner .content {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* If headlines have built-in margins, squash them too */
  .banner .content h1 {
    margin: 0.5rem 0 !important;  /* small top/bottom gap */
  }

  @media screen and (max-width: 736px) {
    /* push banner content down below the header */
    .banner {
      /* top padding = header height (85px) + a little breathing room */
      padding: 6rem 0 2rem !important;
    }
    /* just in case your H1 still hugs the top too tightly */
    .banner .content h1 {
      margin-top: 0.5rem !important;
    }
  }

  /* Turn banner into two columns */
  .banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0rem 4rem !important; /* adjust top/bottom and sides as desired */
    background: #F7F8FA !important; /* keep your flat background */
    box-shadow: none !important;
  }

  /* Left half: your headline */
  .banner .content {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    padding-right: 2rem !important;
  }

  /* Right half: the restored image */
  .banner .image {
    flex: 1 1 100% !important;
    max-width: 50% !important;
    display: block !important;
  }

  .banner .image img {
    width: 50% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
  }

  /* Tweak mobile so it still stacks vertically */
  @media screen and (max-width: 736px) {
    .banner {
      flex-direction: column !important;
      padding: 4rem 1.5rem !important;
    }
    .banner .content,
    .banner .image {
      max-width: 100% !important;
      flex: none !important;
      padding: 0 !important;
    }
    .banner .image {
      margin-top: 2rem !important;
    }
  }

 .banner .image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

 .banner .image {
  display: block !important;
  flex: 1 1 50% !important;
  max-width: 50% !important;
}

.banner:before,
.banner:after {
  display: none !important;
}

.banner .col-6:first-child {
  max-width: 60% !important;
}

@media screen and (min-width: 737px) {
  .banner .content {
    padding-left: 3rem !important;
  }
}

@media screen and (min-width: 737px) {
  .banner .content {
    padding-left: 4rem !important; /* Adjust as needed */
  }

  .banner img {
    margin-right: 2rem !important; /* Creates breathing room on the right */
  }
}

@media screen and (min-width: 737px) {
  .banner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2rem 4rem !important;
  }

  .banner .content {
    flex: 1;
    padding-left: 3rem !important;
  }

  .banner .image {
    flex: 1;
  }

  .banner .image img {
    margin-right: 2rem !important;
    width: 100%;
    height: auto;
    display: block;
  }
}

@media only screen and (min-width: 736px) {
  /* remove any extra gap under the header */
  #header {
    margin-bottom: 0 !important;
  }

  /* pull the start of your wrapper up */
  #wrapper {
    margin-top: 0 !important;
  }

  /* if the section itself has padding, shrink it here */
  section.main.style1 {
    padding-top: 4rem !important;
  }
}

@media only screen and (min-width: 736px) {
  /* tighten the white box’s top padding */
  section.main.style1 .inner {
    padding-top: 0.5rem !important;   /* reduce from whatever default */
  }

  /* pull the H2 up inside that container */
  section.main.style1 .inner h2 {
    margin-top: 0 !important;       /* eliminate any extra gap */
  }
}

.button {
  border-radius: 0.25rem !important; /* tweak this value as you like (e.g. 0.125rem, 4px, etc.) */
}

ul.actions input[type="submit"],
ul.actions input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: 0.25rem !important;
}

@media only screen and (max-width: 736px) {
  body p,
  body ul:not(#nav ul),
  body li:not(#nav li) {
    font-size: 1.1rem !important;
  }
}

/* Override Pixelarity button hover color */
input[type="submit"].primary:hover,
.button.primary:hover {
  background-color: #8588A3 !important;
  border-color: #8588A3 !important;
  color: #ffffff !important;
}

.file-wrapper .button.primary {
  font-size: 1.1rem !important; /* adjust to 1.2rem or 1.25rem if needed */
}

.file-wrapper .button.primary,
input[type="submit"].primary {
  font-size: 1.1rem !important;
}