:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #2c36b6;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
    
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
                      





                                
#shake-icon {
  position: fixed;       /* Fixed so it stays visible when scrolling */
  bottom: 20px;          /* Distance from bottom */
  right: 20px;           /* Distance from right */
  width: 90px;           /* Adjust size as needed */
  height: 90px;          /* Maintain aspect ratio or adjust */
  cursor: pointer;
  z-index: 9999;         /* Always on top */
  user-select: none;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

/* Shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Apply shake effect */
#shake-icon.shake {
  animation: shake 0.5s ease-in-out;
}














/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/


/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  body.scroll #cs-navigation .cs-ul-wrapper {
    top: 100%;
  }
  #cs-navigation {
    width: 94%;
    max-width: 80rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    position: fixed;
    top: 2rem;
    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:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #cs-navigation.cs-active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    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-toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: #1a1a1a;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #cs-navigation .cs-contact-group {
    display: none;
    position: relative;
    z-index: 10;
  }
  #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 {
    display: none;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    border-radius: 0 0 1.5rem 1.5rem;
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #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 {
    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) {
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #cs-navigation {
    width: 94%;
    max-width: 90rem;
    height: 6rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    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 {
    width: 100%;
    max-width: 90rem;
    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;
    
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #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: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    height: 200%;
    /* 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 */
    
  }
  #cs-navigation .cs-contact-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }
  #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: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    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: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    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;
    line-height: 1.5em;
    text-decoration: none;
    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;
  }
}
                                

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-493 {
        /* Centers button */
        text-align: center;
        /* 200px - 300px - leaving extra space for the navigation */
        padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
        padding-bottom: 12.5rem;
        /* prevents the topper line from causing an overflow */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #hero-493 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
        
    }
    #hero-493 .cs-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #001f3f;
        opacity: 0.35;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero-493 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #hero-493 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        /* changes at tablet */
        gap: 3rem;
    }
    #hero-493 .cs-content {
        width: 100%;
        max-width: 39.375rem;
    }
    #hero-493 .cs-topper {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        line-height: 1.2em;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 1rem;
        color: #fff;
        display: inline-block;
        position: relative;
    }
    #hero-493 .cs-topper:before {
        /* left yellow line */
        content: "";
        /* 70px - 100px */
        width: clamp(4.375rem, 5vw, 6.25rem);
        height: 2px;
        margin-right: 1.75rem;
        background: #f7cc11;
        opacity: 1;
        position: absolute;
        display: block;
        top: 50%;
        transform: translateY(-50%);
        right: 100%;
    }
    #hero-493 .cs-topper:after {
        /* right yellow line */
        content: "";
        /* 70px - 100px */
        width: clamp(4.375rem, 5vw, 6.25rem);
        height: 2px;
        margin-left: 1.75rem;
        background: #f7cc11;
        opacity: 1;
        position: absolute;
        display: block;
        top: 50%;
        transform: translateY(-50%);
        left: 100%;
    }
    #hero-493 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.2em;
        text-align: center;
        max-width: 51.8125rem;
        /* 16px - 24px */
        margin: 0 auto clamp(1rem, 4vw, 1.5rem) 0;
        color: #fff;
        position: relative;
    }
    #hero-493 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.95vw, 1.25rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        /* 464px - 622px */
        max-width: clamp(29rem, 60vw, 38.785rem);
        margin: 0 auto 0;
        margin-bottom: 2.25rem;
        color: #fff;
    }
    #hero-493 .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: #ffffff;
        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;
    }
    #hero-493 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #f7cc11;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
        color: #000;
        
    }
    #hero-493 .cs-button-solid:hover:before {
        width: 100%;
        color: #000000;
    }
}
                                








/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-2355 {
    padding: var(--sectionPadding);
    position: relative;
    background-color: rgb(12, 39, 70);
  }
  #services-2355 .cs-container {
    width: 100%;
    max-width: 112.5rem;
    margin: auto;
    /* 24px - 100px top & bottom */
    /* 16px - 100px left & right */
    padding: clamp(1.5rem, 6vw, 6.25rem) clamp(1rem, 4.5vw, 6.25rem);
    box-sizing: border-box;
    background-color: #F1EEEC;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-2355 .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-2355 .cs-title {
    margin: 0;
  }
  #services-2355 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    row-gap: 1.5rem;
  }
  #services-2355 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
  }
  #services-2355 .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.2);
  }
  #services-2355 .cs-link {
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #services-2355 .cs-picture {
    width: 100%;
    height: 50vw;
    max-height: 18.75rem;
    margin-bottom: 1rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-2355 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-2355 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.25rem 0;
    color: var(--headerColor);
  }
  #services-2355 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* In-between - 600px */
@media only screen and (min-width: 600px) {
  #services-2355 .cs-item {
    grid-column: span 6;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-2355 .cs-card-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #services-2355 .cs-item {
    width: 31%;
  }
  #services-2355 .cs-picture {
    /* 180px - 340px */
    height: 20vw;
    max-height: 18rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-2355 .cs-card-group {
    display: grid;
    row-gap: 3.75rem;
  }
  #services-2355 .cs-item {
    width: 100%;
    grid-column: span 3;
  }
}
     

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-983 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #contact-983 .cs-container {
    width: 100%;
    /* changes to 1064px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  #contact-983 .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;
  }
  #contact-983 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #contact-983 .cs-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
  }
  #contact-983 .cs-label {
    font-size: 1rem;
    line-height: 1.5em;
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    grid-column: span 12;
  }
  #contact-983 .cs-input {
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding-left: 1.5rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    color: #fff;
    background-color: #484848;
    border: none;
  }
  #contact-983 .cs-input::placeholder {
    padding-top: 1rem;
    color: #fff;
    opacity: 0.5;
  }
  #contact-983 .cs-textarea {
    height: 7.5rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
  }
  #contact-983 .cs-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    grid-column: span 12;
  }
  #contact-983 .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 2rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #contact-983 .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.3s;
  }
  #contact-983 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-983 .cs-submit {
    border: none;
  }
  #contact-983 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-983 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-983 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.9;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #contact-983 .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) {
  #contact-983 .cs-container {
    max-width: 66.5rem;
  }
  #contact-983 .cs-label {
    grid-column: span 6;
  }
  #contact-983 .cs-message {
    grid-column: span 12;
  }
  #contact-983 .cs-wrapper {
    grid-column: span 12;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
  

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1670 {
    padding: var(--sectionPadding);
  }
  #reviews-1670 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4.5vw, 4rem);
  }
  #reviews-1670 .cs-content {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #reviews-1670 .cs-title {
    margin: 0rem;
  }
  #reviews-1670 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #reviews-1670 .cs-item {
    list-style: none;
    width: 100%;
    /* 20px - 40px top & bottom */
    /* 20px - 40px left & right */
    padding: clamp(1.25rem, 3.15vw, 2.5rem) clamp(1.25rem, 3.15vw, 2.5rem);
    background-color: #f7f7f7;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    /* 24px - 48px */
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  #reviews-1670 .cs-flex-group {
    /* this margin top auto will push everything up and force the cs-flex-group to the bottom of the container. This is to account for review cards with different heights because of more or less text and makes the cards more responsive to changing text */
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #reviews-1670 .cs-profile {
    width: 3.25rem;
    height: auto;
    border-radius: 50%;
    position: relative;
    display: block;
  }
  #reviews-1670 .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-1670 .cs-name {
    /* 20px - 25px */
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* 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;
    color: var(--headerColor);
    display: block;
  }
  #reviews-1670 .cs-job {
    /* 14px - 16px */
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #reviews-1670 .wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #reviews-1670 .cs-item-stars {
    width: 6.75rem;
    height: auto;
  }
  #reviews-1670 .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    z-index: 1;
  }
  #reviews-1670 .cs-quote {
    width: 5.375rem;
    height: auto;
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    z-index: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-1670 .cs-item {
    grid-column: span 6;
  }
}
                                


                                

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1634 {
    padding: var(--sectionPadding);
  }
  #why-choose-1634 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }
  #why-choose-1634 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1634 .cs-flex {
    max-width: 38.5rem;
  }
  #why-choose-1634 .cs-title {
    max-width: 20ch;
  }
  #why-choose-1634 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1634 .cs-text:last-of-type {
    margin-bottom: 0;
  }
  #why-choose-1634 .cs-wrapper {
    width: 100%;
  }
  #why-choose-1634 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #why-choose-1634 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }
  #why-choose-1634 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1634 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #why-choose-1634 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    text-align: inherit;
  }
  #why-choose-1634 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #why-choose-1634 .cs-wrapper {
    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
    display: contents;
  }
  #why-choose-1634 .cs-image-group {
    font-size: min(2.7vw, 1em);
    width: 33.875em;
    height: 30.875em;
    /* sends it to teh top in the 1st position */
    order: -1;
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-picture-wrapper {
    width: 80.073801%;
    height: 83.805668%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #why-choose-1634 .cs-box {
    width: 60%;
    margin-top: -2.375em;
    margin-left: 1.5em;
    padding: 1em;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 10;
  }
  #why-choose-1634 .cs-header {
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #why-choose-1634 .cs-desc {
    font-size: 0.875em;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #why-choose-1634 .cs-picture {
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1634 .cs-picture1 {
    width: 100%;
    height: 100%;
  }
  #why-choose-1634 .cs-picture2 {
    width: 36.346863%;
    height: 39.878543%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1634 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1634 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1634 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #why-choose-1634 .cs-title {
    margin: 0;
  }
  #why-choose-1634 .cs-h3,
  #why-choose-1634 .cs-item-text {
    text-align: left;
  }
  #why-choose-1634 .cs-item {
    grid-column: span 4;
  }
  #why-choose-1634 .cs-image-group {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1634 {
    /* set the darker background color on the main div */
    background-color: #F8F5F1;
    overflow: hidden;
  }
  #why-choose-1634 .cs-content {
    align-items: flex-start;
  }
  #why-choose-1634 .cs-flex {
    width: 50%;
  }
  #why-choose-1634 .cs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-wrapper:before {
    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
    content: '';
    width: 100vw;
    height: 100vw;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1634 .cs-card-group {
    max-width: 39.375rem;
    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
    padding-top: 3rem;
    align-self: flex-start;
  }
  #why-choose-1634 .cs-image-group {
    width: 33.875em;
    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
    height: auto;
    min-height: 30.875em;
    /* makes it overlap the .cs-wrapper div */
    margin-top: -3rem;
    order: 2;
    flex: none;
  }
  #why-choose-1634 .cs-item {
    grid-column: span 12;
    flex-direction: row;
  }
}
                                

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

/* Mobile */
@media only screen and (min-width: 0rem) {
  #why-2360 {
    padding: var(--sectionPadding);
    background-color: #FBF7F2;
    overflow: hidden;
  }
  #why-2360 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
  }
  #why-2360 .cs-content {
    width: 100%;
    margin: auto;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 7vw, 4rem);
  }
  #why-2360 .cs-flex {
    /* lets the children of this div act as though this div doesnt exist and are free to arrange themselves with the elements outside of its parent div */
    display: contents;
  }
  #why-2360 .cs-card-group {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
  }
  #why-2360 .cs-title {
    max-width: 59rem;
  }
  #why-2360 .cs-text {
    max-width: 59rem;
    margin-bottom: 1rem;
  }
  #why-2360 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #why-2360 .cs-card-group {
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    /* 32px - 40px */
    row-gap: clamp(2rem, 2.5vw, 2.5rem);
  }
  #why-2360 .cs-item {
    text-align: left;
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #why-2360 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #why-2360 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.4vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    width: 100%;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    color: var(--headerColor);
    border-bottom: 1px solid #E3DDD9;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  #why-2360 .cs-item-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-2360 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5vw, 3.5rem);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    margin: 0;
    padding: 0 3rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #why-2360 .cs-button-solid:hover:before {
    width: 100%;
    
  }
  #why-2360 .cs-button-solid:before {
    content: '';
    width: 0%;
    height: 100%;
    background: #f7cc11;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;

  }
   #why-2360 .cs-button-solid:before {
    color: #000;
   }
  #why-2360 .cs-image-group {
    width: 100%;
  }
  #why-2360 .cs-picture {
    width: 100%;
    height: 90vw;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-2360 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-2360 .cs-picture1 {
    margin-bottom: 1rem;
  }
  #why-2360 .cs-picture2 {
    height: 66vw;
    margin-bottom: 3rem;
  }
}
/* In-between - 600px */
@media only screen and (min-width: 37.5rem) {
  #why-2360 .cs-image-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #why-2360 .cs-wrapper {
    /* lets the children of this div act as though this div doesnt exist and are free to arrange themselves with the elements outside of its parent div */
    display: contents;
  }
  #why-2360 .cs-picture {
    height: 50vw;
    margin-bottom: 3rem;
    grid-column: span 6;
  }
  #why-2360 .cs-picture2 {
    height: 50vw;
  }
  #why-2360 .cs-title {
    grid-column: span 12;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-2360 .cs-container {
    max-width: 80rem;
  }
  #why-2360 .cs-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
  }
  #why-2360 .cs-text {
    margin: 0;
  }
  #why-2360 .cs-text:last-of-type {
    margin-bottom: 0;
  }
  #why-2360 .cs-button-solid {
    flex: none;
  }
  #why-2360 .cs-card-group {
    max-width: 25rem;
  }
  #why-2360 .cs-h3 {
    height: 100%;
  }
  #why-2360 .cs-image-group {
    width: 55%;
    max-width: 46.4375rem;
    display: flex;
    flex: none;
    position: relative;
    z-index: 1;
  }
  #why-2360 .cs-wrapper {
    display: flex;
    flex-direction: column;
  }
  #why-2360 .cs-flex {
    display: flex;
    align-items: flex-start;
    /* 32px - 64px */
    gap: clamp(2rem, 7vw, 4rem);
  }
  #why-2360 .cs-title {
    text-align: right;
    margin-bottom: 8.75rem;
    order: -1;
  }
  #why-2360 .cs-picture1 {
    width: 55%;
    height: auto;
    /* 80px - 120px */
    margin-bottom: clamp(5rem, 6vw, 7.5rem);
    flex: none;
  }
  #why-2360 .cs-picture2 {
    margin: 0;
    height: auto;
    /* 238px - 400px */
    min-height: clamp(14.875rem, 35vw, 25rem);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-2360 .cs-card-group {
    padding-bottom: 2.5rem;
  }
  #why-2360 .cs-flex {
    align-items: stretch;
  }
  #why-2360 .cs-image-group {
    height: auto;
  }
  #why-2360 .cs-picture2 {
    height: 100%;
  }
}
                     
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-1862 {
    padding: var(--sectionPadding);
    padding-bottom: 2.5rem;
    background-color: #0e0e0ec2;
    background-image: url(images/footerbackgroundimage.jpg);
    background-position: center;
    
  }
  #cs-footer-1862 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #cs-footer-1862 .cs-top {
    width: 100%;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* 64px - 100px */
    column-gap: clamp(4rem, 9vw, 6.25rem);
    row-gap: 2rem;
  }
  #cs-footer-1862 .cs-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 32px - 48px */
    gap: clamp(2rem, 4vw, 3rem);
  }
  #cs-footer-1862 .cs-logo {
    width: 100%;
    max-width: 19.8125rem;
    height: auto;
    background-color: #F1EEEC;
    border-radius: 5px;
  }
  #cs-footer-1862 .cs-logo img {
    width: 100%;
    height: auto;
  }
  #cs-footer-1862 .cs-social {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #cs-footer-1862 .cs-social-li {
    list-style: none;
  }
  #cs-footer-1862 .cs-social-link {
    width: 2.5rem;
    height: auto;
    padding: 0.75rem;
    background-color: #DED1BD;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-footer-1862 .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-footer-1862 .cs-social-link:hover .cs-social-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #cs-footer-1862 .cs-social-icon {
    width: 1rem;
    height: 1rem;
    display: block;
  }
  #cs-footer-1862 .cs-ul {
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    color: #F1EEEC;
  }
  #cs-footer-1862 .cs-contact-ul {
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
    color: #F1EEEC;
  }
  #cs-footer-1862 .cs-li {
    list-style: none;
    margin: 0;
    display: block;
  }
  #cs-footer-1862 .cs-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    /* 16px - 24px bottom */
    margin: 0 0 clamp(1rem, 3.5vw, 1.5rem) 0;
    color: var(--headerColor);
    display: block;
  }
  #cs-footer-1862 .cs-link,
  #cs-footer-1862 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
    z-index: 1;
  }
  #cs-footer-1862 .cs-link:hover:before {
    width: 100%;
  }
  #cs-footer-1862 .cs-link:before {
    /* on hover underline */
    content: "";
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1862 .cs-bottom {
    width: 100%;
    margin: 0;
    /* 20px - 40px top */
    padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
    border-top: 1px solid #DED1BD;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-footer-1862 .cs-nav {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 20px - 40px */
    column-gap: clamp(1.25rem, 5.3vw, 2.5rem);
  }
  #cs-footer-1862 .cs-nav-li {
    list-style: none;
  }
  #cs-footer-1862 .cs-nav-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
  }
  #cs-footer-1862 .cs-nav-link:hover {
    color: #8F5B34;
  }
  #cs-footer-1862 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-1862 .cs-nav-link:before {
    /* on hover underline */
    content: "";
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-1862 .cs-copyright {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #cs-footer-1862 .cs-copyright-link {
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    margin: 0;
    color: inherit;
    display: inline-block;
  }
  #cs-footer-1862 .cs-copyright-link:hover {
    text-decoration: underline;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-1862 .cs-flex {
    width: auto;
    margin-right: auto;
  }
  #cs-footer-1862 .cs-contact-ul {
    /* 152px - 412px */
    width: clamp(9.5rem, 25vw, 25.75rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-1862 .cs-bottom {
    flex-direction: row;
  }
  #cs-footer-1862 .cs-copyright {
    text-align: right;
  }
}
   

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0rem) {
  #gallery-2234 {
    padding: var(--sectionPadding);
    background-color: #fbf5f1;
  }
  #gallery-2234 .cs-container {
    width: 100%;
    max-width: 120rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-2234 .cs-content {
    width: 100%;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  #gallery-2234 .cs-title {
    margin: 0;
  }
  #gallery-2234 .cs-image-group {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 132px - 280px */
    grid-auto-rows: clamp(8.25rem, 20vw, 17.5rem);
    /* 16px - 20px */
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
  }
  #gallery-2234 .cs-picture {
    display: block;
    position: relative;
  }
  #gallery-2234 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-2234 .cs-picture-1 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-2 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-3 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-4 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-5 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-6 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-7 {
    grid-column: span 12;
    grid-row: span 2;
  }
  #gallery-2234 .cs-picture-8 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-9 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-10 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-11 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-12 {
    grid-column: span 6;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-13 {
    grid-column: span 6;
    grid-row: span 1;
  }
}
/* Tablet */
@media only screen and (min-width: 48rem) {
  #gallery-2234 .cs-container {
    align-items: center;
  }
  #gallery-2234 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-2234 .cs-text {
    max-width: 28.1875rem;
  }
  #gallery-2234 .cs-flex {
    min-width: 45%;
  }
  #gallery-2234 .cs-picture-1 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-2 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-3 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-4 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-5 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-6 {
    grid-column: span 6;
    grid-row: span 2;
  }
  #gallery-2234 .cs-picture-7 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-8 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-9 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-10 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-11 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-12 {
    grid-column: span 3;
    grid-row: span 1;
  }
  #gallery-2234 .cs-picture-13 {
    grid-column: span 3;
    grid-row: span 1;
  }
}