/* PAGE-SPECIFIC STYLES FOR THE CONTACT PAGE */
/*-- -------------------------- -->
<---           Header           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-296 {
      padding: var(--sectionPadding);
      margin-top: -10rem;
  }
  #services-296 .cs-container {
      width: 100%;
      /* changes to 1440px on desktop */
      max-width: 43.75rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-296 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #services-296 .cs-title {
      max-width: 30ch;
  }
  #services-296 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #services-296 .cs-item {
      list-style: none;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 2rem;
      background-color: #f7f7f7;
      border-radius: 1rem;
      /* clips image corners */
      overflow: hidden;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      transition: background-color 0.3s;
  }
  #services-296 .cs-item:hover {
      cursor: pointer;
  }
  #services-296 .cs-item:hover .cs-image {
      opacity: 1;
  }
  #services-296 .cs-item:hover .cs-image img {
      transform: scale(1.1);
  }
  #services-296 .cs-item:hover .cs-icon {
      /* turns it white */
      filter: grayscale(1) brightness(1000%);
  }
  #services-296 .cs-item:hover .cs-h3,
  #services-296 .cs-item:hover .cs-item-text {
      color: #372525;
  }
  #services-296 .cs-image {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      z-index: -1;
      background-color: var(--primary);
      transition: opacity 0.3s;
  }
  #services-296 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0.4;
      object-fit: cover;
      transition: transform 0.6s;
  }
  #services-296 .cs-link {
      text-decoration: none;
  }
  #services-296 .cs-icon {
      width: auto;
      height: 3rem;
      margin-bottom: 1.5rem;
      display: block;
  }
  #services-296 .cs-icon path {
      transition: fill 0.3s;
  }
  #services-296 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      margin: 0;
      margin-bottom: 1rem;
      color: var(--headerColor);
      transition: color 0.3s;
      font-weight: bold;
  }
  #services-296 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      transition: color 0.3s;
      width: 100%;
  }
  #services-296 .cs-item:hover .cs-item-text,
  #services-296 .cs-item:hover .cs-h3{
    background-color: var(--bodyTextColorWhite);
    color: var(--headerColor);
    width: 100%;
    border-radius: 1rem;
    padding: 0.2rem 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-296 .cs-card-group {
      justify-content: space-between;
      /* makes sure every box "stretches" to be the same height as the tallest box */
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;
  }
  #services-296 .cs-item {
      width: 48.6%;
  }
  #services-296 .cs-item-text {
    width: 100%;
  }
  #services-296 .cs-item:hover .cs-item-text,
  #services-296 .cs-item:hover .cs-h3{
    width: 100%;
  }
}
@media only screen and (min-width: 64rem) {
  #services-296 .cs-item {
      /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
      width: clamp(48%, 45vw, 48%);
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-296 .cs-container {
      max-width: 90rem;
  }
  #services-296 .cs-card-group {
      justify-content: center;
  }
  #services-296 .cs-item {
      /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
      width: clamp(40%, 45vw, 40%);
  }
  #services-296 .cs-item:hover .cs-item-text,
  #services-296 .cs-item:hover .cs-h3{
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-296 .cs-topper {
      color: var(--primaryLight);
  }
  body.dark-mode #services-296 .cs-title,
  body.dark-mode #services-296 .cs-text,
  body.dark-mode #services-296 .cs-h3,
  body.dark-mode #services-296 .cs-item-text {
      color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-296 .cs-item {
      background-color: var(--accent);
  }
  body.dark-mode #services-296 .cs-item:hover {
      background-color: var(--primary);
  }
  body.dark-mode #services-296 .cs-icon {
      /* turns it white */
      filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #services-296 .cs-item:hover .cs-item-text,
  body.dark-mode #services-296 .cs-item:hover .cs-h3{
    background-color: var(--medium);
    color: var(--bodyTextColorWhite);
    width: 100%;
    border-radius: 1rem;
    padding: 0.2rem 1rem;
  }
}

                              
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  :root {
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 4.5vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
  }
  #cs-contact {
    font-family: "Roboto", "Arial", sans-serif;
    padding: var(--sectionPadding);
  }
  #cs-contact .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 50rem;
    margin: auto;
  }
  #cs-contact .cs-content {
    width: 100%;
  }
  #cs-contact .cs-topper {
    text-align: left;
    /* 8px - 12px */
    margin-bottom: clamp(0.5rem, 1.4vw, 0.75rem);
  }
  #cs-contact .cs-title {
    text-align: left;
    max-width: 50rem;
  }
  #cs-contact .cs-text {
    text-align: left;
    /* 404px - 522px */
    max-width: clamp(25.25rem, 30vw, 32.625rem);
    margin: 0 auto 0 0;
    /* 40px - 48px */
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    max-width: 40ch;
  }
  #cs-contact .cs-text:last-of-type{
    margin-bottom: clamp(2.5rem, 6.3vw, 3rem);
  }
  #cs-contact #cs-form {
    margin-bottom: 2.5rem;
  }
  #cs-contact #cs-form label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    /* 12px - 20px */
    margin-bottom: clamp(0.75rem, 1.3em, 1.25rem);
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #cs-contact #cs-form .cs-label-message {
    /* 32px - 48px */
    margin-bottom: clamp(2rem, 6.3vw, 3rem);
  }
  #cs-contact #cs-form input,
  #cs-contact #cs-form textarea {
    font-size: 1rem;
    width: 100%;
    height: 4rem;
    margin-top: 0.25rem;
    /* prevents border & padding from affecting height */
    box-sizing: border-box;
    padding-left: 1.25rem;
    border: 1px solid #b4b2c7;
    border-radius: 0.5rem;
    transition: border 0.3s;
  }
  #cs-contact #cs-form input:hover,
  #cs-contact #cs-form textarea:hover {
    border: 1px solid var(--primary);
  }
  #cs-contact #cs-form textarea {
    font-family: inherit;
    min-height: 7.5rem;
    padding-top: 1.25rem;
  }
  #cs-contact #cs-form .cs-button-solid {
    width: 100%;
    border: none;
  }
  #cs-contact .cs-right-section {
    height: 20rem;
    /* 24px - 40px top & bottom */
    /* 20px - 40px left & right */
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    /* cuts off corners on img tag */
    overflow: hidden;
  }
  #cs-contact .cs-right-section:hover .cs-bg-picture {
    transform: scale(1.1);
  }
  #cs-contact .cs-header {
    /* 16px - 20px */
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 0.5rem;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #cs-contact .cs-link {
    /* 16px - 20px */
    font-size: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.2em;
    text-decoration: none;
    margin-bottom: 1.25rem;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
  }
  #cs-contact .cs-link:before {
    /* Animated underline */
    content: "";
    width: 0%;
    height: 2px;
    /* current color of the parent */
    background: currentColor;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-contact .cs-link:hover:before {
    width: 100%;
  }
  #cs-contact .cs-link:last-of-type {
    margin-bottom: 0;
  }
  #cs-contact .cs-block {
    /* sends second address line to the bottom on its own line */
    display: block;
  }
  #cs-contact .cs-bg-picture {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.6s;
  }
  #cs-contact .cs-bg-picture:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.9) 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cs-contact .cs-bg-picture img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #cs-contact #gender{
    display: none;
    z-index: -1;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75em) {
  #cs-contact #cs-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #cs-contact #cs-form label:first-of-type {
    width: 100%;
  }
  #cs-contact #cs-form label {
    width: 48%;
  }
  #cs-contact #cs-form .cs-label-message {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #cs-contact .cs-container {
    max-width: 80rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5rem;
  }
  #cs-contact #cs-form {
    max-width: 39.375rem;
  }
  #cs-contact #cs-form label {
    width: 100%;
  }
  #cs-contact .cs-right-section {
    width: 40%;
    max-width: 33.875rem;
    /* changes to 578px at 1300px wide */
    height: 42.875rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #cs-contact .cs-right-section:hover .cs-bg-picture {
    transform: scale(1.1);
  }
  #cs-contact .cs-block {
    /* goes back to inline so it stays "in line" with the rest of the text */
    display: inline-block;
  }
}
/* Small Desktop - 1300px */
@media only screen and (min-width: 81.25em) {
  #cs-contact #cs-form {
    column-gap: 0rem;
  }
  #cs-contact #cs-form label:first-of-type {
    width: 100%;
  }
  #cs-contact #cs-form label {
    width: 48%;
  }
  #cs-contact #cs-form .cs-label-message {
    max-width: 100%;
  }
  #cs-contact .cs-right-section {
    height: 36.125rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #cs-contact .cs-text,
  body.dark-mode #cs-contact .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-contact #cs-form label,
  body.dark-mode #cs-contact #cs-form input,
  body.dark-mode #cs-contact #cs-form textarea {
    color: var(--bodyTextColorWhite);
    background-color: transparent;
  }
  body.dark-mode #cs-contact #cs-form label::placeholder,
  body.dark-mode #cs-contact #cs-form input::placeholder,
  body.dark-mode #cs-contact #cs-form textarea::placeholder {
    /* lighten up the color of the text by 40%*/
    filter: brightness(1.4);
  }
  body.dark-mode #cs-contact .cs-bg-picture {
    background-color: #000;
  }
  body.dark-mode #cs-contact .cs-bg-picture img {
    /* lets parent background-color bleed through and darken it */
    opacity: 0.7;
  }
}

/*# sourceMappingURL=contact.css.map */