:root {
    --black: #000000;
    --cyan-bluish-gray: #abb8c3;
    --white: #FFFFFF;
    --pale-pink: #f78da7;
    --vivid-red: #cf2e2e;
    --luminous-vivid-orange: #ff6900;
    --luminous-vivid-amber: #fcb900;
    --light-green-cyan: #7bdcb5;
    --vivid-green-cyan: #00d084;
    --pale-cyan-blue: #8ed1fc;
    --vivid-cyan-blue: #0693e3;
    --vivid-purple: #9b51e0;
    --charcoal: #293340;
    --deep-navy-blue: #0D132D;
    --navy-blue: #030A1B;
    --navy-accent: #141F4D;
    --zodiac-blue: #0B1B33;
    --vivid-cyan: #0DCBFF;
    --money: #389800;
    --amber: #FFBD00;
    --deep-red: #730000;
    --red: #B50000;
    --gray: #8A8A8A;
    --pale-gray: #D9DEE8;
    --stone: #E8E6E0;
    --light-gray: #F3F3F3;
    --steel-grey: #939db8;
    --logo-yellow: #ffaa39;
    --logo-blue: #75aae0;
    font-size: calc(13px + 0.75vw);
    }

    .logo-yellow-stroke {
      stroke: var(--logo-yellow);
    }

    .logo-blue-stroke {
      stroke: var(--logo-blue);
    }

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

button {
    all: unset;
    cursor: pointer;
}

a,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit;
cursor: pointer;
}


ol, li, form, label, input, h1, h2, h3, h4, h5, h6 {
    all: unset;
}

h1, h2, h3, h4, h5, h6 {
  display: flex;
}

ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

  html, body {
    /* height: 100%; */
    /* overflow: hidden; */
    margin: 0;
  }



  /* body {
    display: flex;
    flex-direction: column; */
    /* check to see if I can get rid of the height here. This brings the footer into view on mobile */
    /* height: 100vh; */
    /* font-family: sans-serif;
    background-color: #000c1f;
    color: #ffffff;
    font-family: source-sans;
    font-size: 1rem;
  } */

  body {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    color: var(--black);
    font-family: source-sans;
    font-size: 1rem;
  }

  #body-contact {
    height: 100%;
    overflow: hidden;
    /* justify-content: space-between; */
}

  header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between; /* spread first and last apart */
    /* position: relative; */
    padding: 1rem 1.25rem;
    /* height: 10vh; */
    font-size: 1.2rem;
    background-color: var(--white);
  }

  #contact-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  #company {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  #logo {
    width: 1.5rem;
    /* height: 1rem; */
  }

  .v-logo {
    fill: none;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 0.75rem;
  }

  .relative {
    position: relative;
  }

  .trade {
    position: absolute; 
    top: 0; 
    right: 0; 
    transform: translate(100%, -20%);
  }

  #name {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #business-name {
    font-family: nunito;
  }

  #sub-name {
    font-size: 0.8rem;
    margin-top: -0.25rem;
  }

  #header-links-wrapper {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--charcoal);
  }

  main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* position: relative; */
    /* display: flex; */
    /* justify-content: center;  
    align-items: center;       */
    /* required for vertical centering to work */
    /* height: 50vh;       */
    /* flex: 1;       */
    /* overflow-y: hidden;          */
    font-size: 0.9rem;
    /* margin: 1rem 0; */
    /* gap: 2rem; */
    margin: 2rem 0;
  }

  #contact-main {
    display: flex;
    justify-content: center;  
    align-items: center;      
    /* required for vertical centering to work */
    /* height: 50vh;       */
    flex: 1;      
    overflow-y: hidden;         
    font-size: 0.9rem;
    margin: 1rem 0;
    margin-top: -2rem;
  }
  

  #tag {
    font-size: 0.8rem;
    color: var(--vivid-cyan-blue)
  }

  #question {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
  }

  #description {
    color: var(--black);
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }

  .contact-us-btn {
    background-color: var(--vivid-green-cyan);
    padding: 0.65rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--black);
  }

  .header-btn {
    background-color: var(--vivid-cyan-blue);
    padding: 0.3rem 1rem;
    color: var(--white);
    font-size: 1rem;
  }

  .menu-icon {
    width: 1.5rem;
  }

  .img {
    width: 100%;
    height: auto;
    /* border: 3px solid var(--white); */
    border-radius: 0.5rem;
  }

  .control-height {
    height: 100% !important;
    width: auto !important;
  }

  .background-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem;
    gap: 3rem;
  }

  .light-grey {
    background-color: var(--light-gray);
  }

  .left, .right {
    width: 30%;
  }

  .text-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .title {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .description {
    font-weight: 300;
  }

  .steel-grey {
    color: var(--steel-grey);
  }

  .svg-div {
    width: 20rem;
  }

  #three-circles path {
    fill:white;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .form-contact {
    width: 100%;
  }

  .form-input {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--black);
    border-radius: 0.3rem;
    background-color: var(--white);
  }

  .form-textarea {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--black);
    border-radius: 0.3rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: source-sans;
    font-size: 0.8rem;
    resize: none;
  }
  /* textarea::placeholder {
    color: var(--steel-blue);
    opacity: 1;
  } */

  #submit-btn {
    align-self: start;
    width: auto;
    font-family: nunito;
    background-color: var(--vivid-green-cyan);
    padding: 0.4rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--black);
  }

  #submit-btn-contact {
    /* width: 100%; */
    font-family: nunito;
    background-color: var(--vivid-green-cyan);
    padding: 0.4rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--black);
    text-align: center;
  }

  #services-title {
    align-self: center;
    font-size: 2rem;
    font-weight: 600;
  }

  #thank-you-text {
    max-width: 40%
  }

  footer {
    padding: 0.25rem 1.25rem;
    text-align: center;
    font-size: 0.7rem;
  }

  @media screen and (max-width: 1400px) {
    .text {
      width: 50% !important;
    }
  }

  @media screen and (max-width: 700px) {
    .text {
      width: 80% !important;
    }
    .background-div {
      flex-direction: column;
    }
    .image {
      width: 50% !important;
    }
    .reverse-flex {
      flex-direction: column-reverse;
    }
    .hero-image {
      display: none;
    }
    .background-div {
      gap: 1rem;
    }
    main {
      gap:0;
      margin: 1rem 0;
    }
    #services-title {
      margin-bottom: 0;
    }
    .form-full-width {
      width: 70%
    }
    .meeting {
      width: 70% !important;
    }
    #thank-you-text {
      max-width: 70%
    }
  }

  @media screen and (max-width: 550px) {
    #header-links-wrapper {
      position: absolute;
      width: 100%;
      top: 4.5rem;
      left: 0;
      background-color: var(--white);
      font-size: 1.5rem;
      text-align: center;
      padding: 0.5rem;
      transition: all 0.2s ease;
    }
    .hide-header-links {
      top: 3.5rem !important;
      visibility: hidden;
      opacity: 0;
      /* position: absolute;
      width: 100%;
      top: 4.5rem;
      left: 0; */
    }
    #header-links-wrapper {
      flex-direction: column;
    }
    .text {
      width: 90% !important;
    }
    .form-full-width {
      width: 90%
    }
  }

  @media screen and (min-width: 551px) {
    .hide-menu-icon {
      display: none;
    }
  }
  
/* 
  #tri-left {
    top: 10%;
    left: -2%;
    position: fixed;
    width: 18rem;
  }

  #circ-left {
    bottom: 5%;
    left: 5%;
    position: fixed;
    width: 10rem;
  }

  #circle-group-right {
    position: fixed;
    top: 15%;
    right: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #circ-right-1 {
    width: 10rem;
  }

  #circ-right-2 {
    position: absolute;
    width: 8rem;
  }

  #tri-right {
    bottom: 0%;
    right: -2%;
    position: fixed;
    width: 24rem;
    transform: rotateY(180deg);
  }

  .light-white {
    fill: var(--white);
    opacity: 0.1;
  }

  .lighter-white {
    fill: var(--white);
    opacity: 0.05;
  } */