@media only screen and (min-width: 0rem) {
.popup h2{
    text-align: center;
    font-family: palatino, serif;
    font-size: 50px;
    margin-block-end: 0;
    margin-block-start: 0;
}
.popup{
    background-color: darkslategrey;
    width: fit-content;
    height: fit-content;
    padding: 30px 40px;
    position: fixed;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    font-family: "Poppins",sans-serif;
    z-index: 999;
    display:none;
    color: white;
    text-align: center;
    box-shadow:   0 4px 6px rgba(14, 22, 18, 1);

}

#close{
    display: block;
    margin: 0 0 0px auto;
    background-color: transparent;
    font-size: 30px;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
}

.popup #email{
    min-width: 30rem;
    min-height: 3rem;
}
#subscribe{
    display: block;
    width: 20%;
    position: relative;
    margin: auto;
    text-align: center;
    background-color: var(--secondary);
    color: white;
    text-transform: none;
    padding: 5px 0;
    font-size: 2rem;
    /* 46px - 56px */
    line-height: clamp(1.875em, 2.5vw, 3.5em);
    font-weight: 700;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    /* prevents padding from adding to the width */
    box-sizing: border-box;

}
.popup p {
    font-size: 25px;
    padding-bottom: 1px;
    text-align: justify;
    margin: 20px 0;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

 .cs-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}
 .cs-input {
    font-size: 25px;
    width: 100%;
    /* 46px - 72px */
    height: clamp(2.875rem, 8vw, 4.5rem);
    margin: 0;
    padding: 0;
    padding-left: 1.25rem;
    border: none;
    border-radius: 5rem;
    /* prevents padding from adding to width and height */
    box-sizing: border-box;
    display: block;
}
 .cs-input::placeholder {
    color: #767676;
}
#subscribe {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 2rem;
    overflow: hidden;
    background-color: var(--secondary);
    border-radius: 5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
}
#subscribe:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
}
#subscribe:hover {
    cursor: pointer;
}
#subscribe:hover:before {
    width: 100%;
}
#subscribe {
    width: 100%;
    border: none;
}
}

@media only screen and (min-width: 48rem) {
    .cs-container {
        max-width: 80rem;
    }
    .cs-input {
        width: 90%;
    }
    #subscribe {
        width: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 2.5rem;
    }
    .cs-picture {
        width: 50%;
    }
}

  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    
    #cs-navigation .cs-nav {
        order:2;
        display: flex;
        justify-content: center;
        background-color: #fff;
        padding: 10px 0;
        border-top: 1px solid #ddd;
      }
    #cs-navigation .cs-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    #cs-navigation .logo-container {
        display: flex;
        align-items: center;
        order: 1;
    }
    
    #cs-navigation .logo {
        max-height: 50px; 
        margin-right: 15px; 
    }
    
    #cs-navigation .logo-text {
        font-size: 22px; 
        color: var(--headerColor); 
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        white-space: nowrap;
    }

    #cs-navigation .cs-dropdown {
      position: relative;
    }
    #cs-navigation .cs-dropdown:hover {
      cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul {
      opacity: 1;
      visibility: visible;
      transform: scaleY(1);
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
      min-width: 12.5rem;
      margin: 0;
      padding: 0;
      background-color: #fff;
      box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
      opacity: 0;
      border-bottom: 5px solid var(--primary);
      border-radius: 0 0 1.5rem 1.5rem;
      visibility: hidden;
      /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
      position: absolute;
      top: 100%;
      z-index: -100;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
      transform-origin: top;
    }
    #cs-navigation .cs-drop-li {
    color: var(--bodyTextColor);
      font-size: 1rem;
      text-decoration: none;
      list-style: none;
      width: 100%;
      height: auto;
      opacity: 0;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity 0.6s, transform 0.6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      line-height: 1.5em;
      text-transform: capitalize;
      text-decoration: none;
      white-space: nowrap;
      width: 100%;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem;
      color: var(--headerColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover {
      color: var(--bodyTextColorWhite);
      background-color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    
    #cs-navigation .logo-text {
        font-size: 22px; 
        color: #ae1010; 
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Choose a font family */
        white-space: nowrap; 
    }

    body.scroll #cs-navigation {
      width: 100%;
      max-width: 100%;
      border-radius: 0;
      top: 0;
    }
    #cs-navigation {
        width: 100%;
        max-width: inherit;
        height: 6rem;
        box-sizing: border-box;
        padding: clamp(0.75rem, 2vw, 1.5rem) 0;
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        border-radius: clamp(0.75rem, 2vw, 1.5rem);
        display: flex;
        align-items: center;
        position: fixed;
        top: 0rem;
        left: 50%;
        z-index: 10000;
        transform: translateX(-50%);
        transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
    }

    #cs-navigation .cs-container {
     display: flex;
      width: 100%;
      max-width: inherit;
      margin: auto;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      flex: 0 1 auto;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }

    #cs-navigation .logo-container {
        display: flex-start;
        align-items: center;
        order: 1;
        flex: 0 1 auto;
    }
    
    #cs-navigation .logo {
        max-height: 50px; 
        margin-right: 5px; 

    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 2rem;
      /* margin-right auto pushes everything away from it to the right */
      margin: auto;
      padding: 0;
      vertical-align: middle;
      display: inline-block;
      justify-content: flex-start;
      align-items: center;
      z-index: 100;

    }
    #cs-navigation .cs-logo img {
      width: auto;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-contact-group {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
      order: 3;
      flex: 0 1 auto;
    }
    #cs-navigation .cs-phone {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.3s, color 0.3s;
    }
    #cs-navigation .cs-phone-icon {
      width: 1.5rem;
      height: auto;
      display: block;
    }
    #cs-navigation .cs-social {
      height: 2rem;
      opacity: 1;
      display: none;
      visibility: visible;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      transition: opacity 0.3s, visibility 0.3s, height 0.3s;
    }
    #cs-navigation .cs-social-link {
      text-decoration: none;
      width: 24px;
      height: 24px;
      background-color: #f7f7f7;
      border-radius: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }
    #cs-navigation .cs-social-link:hover {
      background-color: var(--primary);
    }
    #cs-navigation .cs-social-link:hover .cs-social-icon {
      opacity: 1;
      filter: grayscale(1) brightness(10000%);
    }
    #cs-navigation .cs-social-icon {
      width: 20px;
      height: 20px;
      opacity: 0.6;
      display: block;
      transition: opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      justify-content: center;
      height: 100%;
      display: flex;
      align-items: center;
      /* absolutely positioned to be dead center */
      position: relative;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    #cs-navigation .cs-ul {
      width: 100%;
      height: 100%;
      margin: 0;
      padding-left: 0;
      display: flex;
      justify-content: center;
      position: absolute;
      align-items: center;
      /* 20px - 36px */
      gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }
    #cs-navigation .cs-li {
      list-style: none;
      height: 100%;
      padding: 0;
      display: flex;
      align-items: center;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      font-size: 1rem;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;;
      line-height: 1.5em;
      text-decoration: none;
      padding-left: 0.5rem;
      margin: 0;
      color: var(--headerColor);
      display: block;
      position: relative;
      transition: color 0.3s;
    }
    #cs-navigation .cs-li-link:hover {
      color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
      color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 2rem;
      color: #fff;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    #cs-navigation .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #fff;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover {
      color: #1a1a1a;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
  }
  /* Large Desktop - 1300px */
  @media only screen and (min-width: 81.25rem) {
    
    #cs-navigation .cs-social {
      display: flex;
    }
  }
                                  


/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1007 {
        /* padding: var(--sectionPadding); */
        margin-top: 6rem;
        background-color: #f1f1f4;
        height: fit-content;
    }
      
    #sbsr-1007 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 50rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-1007 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        /* changes to 522px at desktop */
        max-width: 36.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
        display: inline-block;

    }
    #sbsr-1007 .red-text {
        color: var(--secondary);
    }
    #sbsr-1007 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-1007 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }

    #sbsr-1007 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0 30px 0 0; 
        color: #fff;
        min-width: 9.375rem;
        padding: 0 2rem;
        background-color: var(--secondary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(14, 22, 18, 1);
        border-radius: 30px;
    }
    #sbsr-1007 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.1s;
        border-radius: 30px;
    }
    #sbsr-1007 .cs-button-solid:hover:before {
        width: 100%;
        border-radius: 30px;
    }
    #sbsr-1007 .cs-image-group {
        width: 100%;
    }
    #sbsr-1007 .cs-picture {
        width: 100%;
        height: 16.3125rem;
        /* border: 12px solid #fff;
        background-color: #fff; */
        display: block;
        /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
        position: relative;
    }
    #sbsr-1007 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it behave like a background image */
        object-fit: cover;
    }
    #sbsr-1007 .cs-seal {
        /* changes to a clamp(104px - 190px) at desktop */
        width: 6.5rem;
        height: auto;
        /* 104px - 190px */
        /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
        margin-top: calc(clamp(6.5rem, 12vw, 11.875rem) * -0.5);
        margin-left: auto;
        /* 28px - 120px */
        margin-right: clamp(1.75rem, 10vw, 7.5rem);
        background-color: #fff;
        border: clamp(6px, 0.8vw, 12px) solid #ffffff;
        border-radius: 50%;
        display: block;
        position: relative;
        /* make it rest on top of the bg picture */
        z-index: 10;
    }

    #sbsr-1007 .dot-container{
        display: none;
        text-align: center;
    }

    #sbsr-1007 .dot{
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }

    #sbsr-1007 .active {
        background-color: #717171;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 .cs-container {
        align-items: flex-start;
    }
    #sbsr-1007 .cs-flex-group {
        flex-direction: row;
    }
    #sbsr-1007 .cs-text {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    #sbsr-1007 .cs-spacer {
        display: none;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* 100px - 200px */
        gap: clamp(0rem, 0vw, 6.5rem);
    }
    #sbsr-1007 .cs-image-group {
        max-width: 45rem;
        display: flex;
        justify-content: center;
        position: relative;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-1007 .cs-picture {
        height: 32.75rem;
        width: 50rem;
        aspect-ratio: initial;
    }
    #sbsr-1007 .cs-seal {
        /* 104 - 190px */
        width: clamp(6.5rem, 13vw, 11.875rem);
        margin: 0;
        position: absolute;
        top: 50%;
        /* subtract 12px (.75rem) to account for the border */
        left: calc((clamp(6.5rem, 13vw, 11.875rem) * -0.5) + -0.75rem);
        transform: translateY(-50%);
    }
    #sbsr-1007 .cs-content {
        flex: none;
        width: 54%;
        max-width: 39.875rem;
    }
}

                                
/*-- -------------------------- -->
<---        Our Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-296 {
        padding: var(--sectionPadding);
        background-image: url(images/dark-background.jpg);
    }
    #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-topper {
        color: #f7f7f7;
    }
    #services-296 .cs-title {
        max-width: 30ch;
        color: #e01b1b;
    }

    #services-296 .cs-text{
        color: #ffffff;
    }
    #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: #fff;
    }
    #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;
    }
}
/* 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%;
    }
}
/* 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(23.84%, 22.5vw, 23.95%);
    }
}

                                                     
/*-- -------------------------- -->
<---        Why Choose Us       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-1662 {
      padding: var(--sectionPadding);
      background-color: white;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    #why-choose-1662 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 40px - 64px */
      gap: clamp(2.5rem, 3.9vw, 4rem);
    }
    #why-choose-1662 .cs-content {
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #why-choose-1662 .cs-title {
      margin: 0;
      max-width: 50ch;
    }
    #why-choose-1662 .cs-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* 16px - 32px */
      gap: clamp(1rem, 3.2vw, 2rem);
    }
    #why-choose-1662 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      /* 16px - 32px */
      gap: clamp(1rem, 2vw, 2rem);
    }
    #why-choose-1662 .cs-item {
      list-style: none;
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 1rem;
    }
    #why-choose-1662 .cs-item-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    #why-choose-1662 .cs-item-number {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--primary);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
    }
    #why-choose-1662 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
    }
    #why-choose-1662 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;;
    }
    #why-choose-1662 .cs-floater {
      /* 246px - 582px */
      width: clamp(15.375rem, 50vw, 36.375rem);
      height: auto;
      position: absolute;
      right: -4rem;
      top: -0.5rem;
      z-index: -1;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #why-choose-1662 .cs-wrapper {
      flex-direction: row;
      align-items: flex-start;
    }
  }
                                  

 /*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-566 {
        padding: var(--sectionPadding);
    }
    #reviews-566 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* 48px - 64px */
        gap: clamp(0rem, 0vw, 4rem);
    }
    #reviews-566 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #reviews-566 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 2.5vw, 1.15rem);
    }
    #reviews-566 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 39.375rem;
        /* 32px - 60px top & bottom */
        /* 16px - 48px left & right */
        padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
        background-color: #f1f1f4;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
    }
    #reviews-566 .cs-stars {
        /* 169px - 189px */
        width: clamp(10.5625rem, 20vw, 11.8125rem);
        height: auto;
        /* 20px - 24px */
        margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
        display: block;
    }
    #reviews-566 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        /* 40px - 64px */
        margin-bottom: clamp(2.5rem, 8vw, 4rem);
        color: var(--bodyTextColor);
    }
    #reviews-566 .cs-flex-group {
        /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
        margin-top: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    #reviews-566 .cs-profile {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        /* clips image corners to make circle */
        overflow: hidden;
        position: relative;
        display: block;
    }
    #reviews-566 .cs-profile img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes the image behave like a background image */
        object-fit: cover;
    }
    #reviews-566 .cs-name {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.5em;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--headerColor);
        display: block;
        width: 9rem;
    }
    #reviews-566 .cs-job {
        /* 13px - 16px */
        font-size: clamp(0.8125rem, 1.6vw, 1rem);
        line-height: 1.2em;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
    #reviews-566 .cs-container {
        max-width: 80rem;
    }
    #reviews-566 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
}

                                                               

/*-- -------------------------- -->
<---            Blog            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #blog-986 {
        padding: var(--sectionPadding);
        background-color: var(--primary);
    }
    #blog-986 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #blog-986 .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;
    }

    #blog-986 .cs-title {
        margin-bottom: 2rem;
        max-width: 20ch;
        color: var(--bodyTextColorWhite);
    }
    #blog-986 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 2rem;
        background-color: var(--secondary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(14, 22, 18, 1);
    }
    #blog-986 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: black;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #blog-986 .cs-topper {
        color: #f7f7f7;
    }
    #blog-986 .cs-button-solid:hover:before {
        width: 100%;
    }
    #blog-986 .cs-button-solid {
        /* prevents flexbox from squishing it */
        flex: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    #blog-986 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
        position: relative;
    }
    #blog-986 .cs-item {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }
    #blog-986 .cs-item:hover {
        cursor: pointer;
    }
    #blog-986 .cs-item:hover .cs-info:before {
        opacity: 1;
        background-color: var(--secondaryLight);
    }
    #blog-986 .cs-item:hover .cs-picture img {
        transform: scale(1.15);
    }
    #blog-986 .cs-item:hover .cs-date {
        color: #fff;
    }
    #blog-986 .cs-item:hover .cs-icon {
        filter: brightness(150%);
    }
    #blog-986 .cs-item:hover .cs-link {
        color: #fff;
    }
    #blog-986 .cs-picture {
        width: 100%;
        height: 30rem;
        /* removed at tablet */
        aspect-ratio: 0.68333333;
        /* clips img tag from overflowing it on hover */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 1;
    }
    #blog-986 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
        object-position: top;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: transform 0.9s;
    }
    #blog-986 .cs-info {
        width: 83%;
        max-width: 26.25rem;
        /* 16px - 24px */
        padding: clamp(1rem, 2vw, 1.5rem);
        /* prevents padding from affecting the height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 10;
    }
    #blog-986 .cs-info:before {
        /* background-color */
        content: "";
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        opacity: 0.8;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
        transition:
            background-color 0.3s,
            opacity 0.3s;
    }
    #blog-986 .cs-date {
        font-size: 1rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 1.25rem 0;
        color: #bababa;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.3s;
    }
    #blog-986 .cs-icon {
        width: 1.25rem;
        height: auto;
        transition: filter 0.3s;
    }
    #blog-986 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.75rem 0;
        color: #fff;
        display: block;
    }
    #blog-986 .cs-desc {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0 0 1.25rem 0;
        color: #f7f7f7;
        display: block;
    }
    #blog-986 .cs-link {
        font-size: 1rem;
        line-height: 1.2em;
        font-weight: 700;
        text-decoration: none;
        width: auto;
        margin: 0;
        color: var(--secondary);
        display: inline-block;
        position: relative;
        transition: color 0.3s;
    }
    #blog-986 .cs-link:hover {
        color: #3a7beb;
    }
    #blog-986 .cs-link:before {
        /* underline */
        content: "";
        width: 100%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: background-color 0.3s;
    }
}
/* Tablet - 550px */
@media only screen and (min-width: 34.375rem) {
    #blog-986 .cs-content {
        text-align: left;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 3rem;
    }
    #blog-986 .cs-title {
        margin: 0;
    }
    #blog-986 .cs-picture {
        /* remove the aspect ratio so the height can be squished */
        aspect-ratio: initial;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #blog-986 .cs-container {
        max-width: 80rem;
    }
    #blog-986 .cs-card-group {
        flex-direction: row;
    }
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-51 {
        padding: var(--sectionPadding);
        position: relative;
        background-color: #ae1010;
    }
    #cta-51 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-51 .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;
    }

    #cta-51 .cs-title {
        color: var(--bodyTextColorWhite);
    }
    #cta-51 .cs-text {
        margin-bottom: 1rem;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #cta-51 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #cta-51 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(14, 22, 18, 1)
    }
    #cta-51 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--secondaryLight);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #cta-51 .cs-button-solid:hover:before {
        width: 100%;
    }
}

                                

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-308 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        /* Navigation Links */
        row-gap: 1.5rem;
    }

    #cs-footer-308 .logo-container {
        width: auto;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    #cs-footer-308 .logo {
        width: 11.125rem;
        height: auto;
        display: block;
        margin-bottom: 1.5rem;
    }
    
    #cs-footer-308 .logo-text {
        font-size: 22px; /* Increased size for better visibility */
        color: var(--secondary); /* Use your palette's header color */
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Choose a font family */
        margin-top: 0.5rem;
    }

    #cs-footer-308 .cs-container {
        width: 100%;
        /* reset on desktop */
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 2.5rem;
    }
    #cs-footer-308 .cs-logo-group {
        /* takes up all the space, lets the other ul's wrap below it */
        width: 100%;
        position: relative;
    }
    #cs-footer-308 .cs-logo {
        margin-left: 0.6rem;
        width: 11.125rem;
        height: 6rem;
        display: block;
        margin-bottom: 1.5rem;
    }
    #cs-footer-308 .cs-logo-img {
        width: 100%;
        height: auto;
    }

    #cs-footer-308 .cs-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        width: 78%;
        /* changes to 305px at desktop */
        max-width: 26.25rem;
        color: var(--bodyTextColorWhite);
    }
    #cs-footer-308 .cs-nav {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
    #cs-footer-308 .cs-nav-li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap:0.75rem;
    }

    #cs-footer-308 .cs-info{
        color: var(--bodyTextColorWhite);
        width: fit-content;
        align-items: center;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    #cs-footer-308 .cs-header {
        font-size: 1rem;
        line-height: 1.2em;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: var(--bodyTextColorWhite);
        position: relative;
        display: block;
    }
    #cs-footer-308 .cs-nav-link {
        font-size: 1rem;
        text-decoration: none;
        line-height: 1.5em;
        color: var(--bodyTextColorWhite);
        align-items: flex-start;
        position: relative;
        display: inline-block;
        transition: color 0.3s;
    }
 
    #cs-footer-308 .cs-contact-info{
        align-items: flex-start;
        padding-left: 0;
        margin: 0;
        display: block;
    }
    #cs-footer-308 .cs-nav-link:before {
        /* underline */
        content: "";
        width: 0%;
        height: 0.125rem;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: -0.125rem;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-308 .cs-nav-link:hover {
        color: var(--secondary);
    }
    #cs-footer-308 .cs-nav-link:hover:before {
        width: 100%;
    }
    #cs-footer-308 .cs-icon {
        width: 1.5rem;
        height: auto;
        margin-right: 0.75rem;
    }
    #cs-footer-308 .cs-bottom {
        max-width: 80rem;
        margin: auto;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #484848;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-footer-308 .cs-copyright,
    #cs-footer-308 .cs-copyright-link {
        font-size: 1rem;
        line-height: 1.5em;
        color: var(--bodyTextColorWhite);
    }
    #cs-footer-308 .cs-copyright-link {
        text-decoration: none;
        transition: color 0.3s;
    }
    #cs-footer-308 .cs-copyright-link:hover {
        color: var(--primary);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-308 .cs-container {
        row-gap: 0;
        flex-direction: row;
        justify-content: space-between;
        row-gap: 2.5rem;
        width: 80rem;

    }
    #cs-footer-308 .cs-nav {
        width: auto;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-footer-308 .cs-container {
        max-width: 80rem;
        width: 80rem;

        flex-wrap: nowrap;
        /* align everything to the right */
        justify-content: center;
        column-gap: 5.25rem;
    }
    #cs-footer-308 .cs-logo-group {
        width: 30%;
        max-width: 24.1875rem;
        /* pushes away from everything to the right */
        margin-right: auto;
    }
    #cs-footer-308 .cs-text {
        width: 100%;
    }

}