/* remove the :root, body font family, cs-topper, cs-title, cs-text, and cs-button-solid and place them in your global stylesheet.  That way they will style EVERY instance of these elements on your site and make edits a lot faster and easier.  This also helps us to not repeat ourselves. All these styles are exactly the same for every stitch in the library, so instead of repeating them on every single stitch and having to edit every single one to change them, we extract them from the css and add them to the global stylesheet to be loaded on every page in the site. */


/* ^^^ remove everything above this comment and place in global stylesheet ^^^ */

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #Banner-721 {
    /* 175px - 200px top */
    padding: clamp(10.9375rem, 10vw, 12.5rem) 1rem 6.25rem;
    position: relative;
    z-index: 1;
  }
  #Banner-721 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #Banner-721 .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #Banner-721 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #Banner-721 .cs-background:before {
    /* background color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .75;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #Banner-721 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #Banner-721 .cs-background:before {
    opacity: 1;
    background: linear-gradient(90.01deg, rgba(0, 0, 0, 0.79) 0.67%, rgba(0, 0, 0, 0) 65%);
  }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #ContactForm-721 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #ContactForm-721 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3.25rem;
  }
  #ContactForm-721 .cs-picture {
    width: 100%;
    max-width: 40.625rem;
    height: auto;
    /* reset at desktop */
    aspect-ratio: 1.00516351;
    position: relative;
  }
  #ContactForm-721 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #ContactForm-721 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #ContactForm-721 .cs-text {
    margin: 0 0 2rem 0;
  }
  #ContactForm-721 .cs-form {
    /* 24px - 48px top and bottom */
    /* 20px - 32px left and right */
    padding: clamp(1.25rem, 4.18vw, 3rem) clamp(1.25rem, 4.18vw, 2rem);
    background-color: #F7F8F8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #ContactForm-721 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #ContactForm-721 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    background-color: #fff;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #ContactForm-721 .cs-input::placeholder {
    color: #7D799C;
    opacity: .6;
  }
  #ContactForm-721 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #ContactForm-721 .cs-button-solid {
	  
    border: none;
	background: var(--hflippedGold2);

  }

  #ContactForm-721 .cs-submit {
    min-width: 17.6875rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #ContactForm-721 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #ContactForm-721 .cs-picture {
    height: 51.875rem;
    aspect-ratio: initial;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #ContactStrip-721 {
    padding: var(--sectionPadding);
    background-color: #1A1A1A;
    position: relative;
    z-index: 1;
  }
  #ContactStrip-721 .cs-stat-group {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 37.5rem;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
  }
  #ContactStrip-721 .cs-item {
    list-style: none;
    width: 18.125rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #ContactStrip-721 .cs-item:hover .cs-picture {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: scale(1.1);
  }
  #ContactStrip-721 .cs-picture {
    width: 5rem;
    height: 5rem;
    /* 12px - 20px */
    margin-right: clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid #F6E5DB;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.6s;
  }
  #ContactStrip-721 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #ContactStrip-721 .cs-icon {
    width: 2.5rem;
    height: auto;
  }
  #ContactStrip-721 .cs-header {
    font-size: 1.25rem;
    color: var(--bodyTextColorWhite);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    display: block;
  }
  #ContactStrip-721 .cs-link,
  #ContactStrip-721 .cs-address {
    font-size: var(--bodyTextColor);
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #ContactStrip-721 .cs-link:hover {
    text-decoration: underline;
  }
  #ContactStrip-721 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625em) {
  #ContactStrip-721 .cs-stat-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 2rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #ContactStrip-721 .cs-stat-group {
    max-width: 80rem;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
}

/*-- -------------------------- -->
<---            Map             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #ContactMap-721 {
    min-height: 33.75rem;
    padding: var(--sectionPadding);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #ContactMap-721 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #ContactMap-721 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #ContactFAQ-721 {
    position: relative;
    overflow: hidden;
  }
  #ContactFAQ-721 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #ContactFAQ-721 .cs-content {
    text-align: left;
    max-width: 33.8125rem;
    /* move section padding to the cs-content so we can make the cs-picture full width */
    padding: var(--sectionPadding);
    padding-top: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
  }
  #ContactFAQ-721 .cs-title {
    /* cs-title override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This second cs-text is a section specific override that stays inside this stitch */
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 1.5rem 0;
  }
  #ContactFAQ-721 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #ContactFAQ-721 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
    transition: border-bottom 0.3s;
  }
  #ContactFAQ-721 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 1;
  }
  #ContactFAQ-721 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px */
    padding: clamp(1rem, 2.3vw, 1.5rem) 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #ContactFAQ-721 .cs-button:hover {
    cursor: pointer;
  }
  #ContactFAQ-721 .cs-button:before {
    /* left line */
    content: '';
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform .5s;
  }
  #ContactFAQ-721 .cs-button:after {
    /* right line */
    content: '';
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform .5s;
  }
  #ContactFAQ-721 .cs-button-text {
    width: 90%;
    display: block;
  }
  #ContactFAQ-721 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #ContactFAQ-721 .cs-graphic {
    width: 22.5625rem;
    height: auto;
    opacity: .5;
    display: none;
    position: absolute;
    left: -11.25rem;
    bottom: 1.875rem;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
  #ContactFAQ-721 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    z-index: 1;
  }
  #ContactFAQ-721 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #ContactFAQ-721 {
    /* moved seciton padding back to the section */
    padding: var(--sectionPadding);
  }
  #ContactFAQ-721 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #ContactFAQ-721 .cs-picture {
    width: 50%;
    max-width: 40.625rem;
    /* 500px - 750px */
    height: clamp(31.25rem, 68vw, 46.875rem);
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #ContactFAQ-721 .cs-content {
    width: 55%;
    padding: 0;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #ContactFAQ-721 .cs-graphic {
    display: block;
  }
}