/* Fixes the white margin gap */
.contact-page #contact-2251,
.about-page #sbs-r-1892,
.portfolio-page #gallery-46,
.services-page #services-1644,
.portfolio-page #gallery-46,
.whispering-page #gallery-1152,
.rosebud-page #gallery-1152,
.hatchers-page #gallery-1152,
.coburg-page #gallery-1152,
.soaring-page #gallery-1152,
.stirling-page #gallery-1897
 {
    /* Set margin to 0 to "glue" the black box to the very top */
    margin-top: 0 !important; 
    
    /* Set padding to 8rem to "push" the text down so the nav doesn't cover it */
    padding-top: 12rem !important; 
}





@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&display=swap');
: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: #B69D71;
    --primaryLight: #B69D71;
    --secondary: #B69D71;
    --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);
}

          
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 1023.5px) {
  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 {
    opacity: 1;
    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 {
    /*Modification - changed from 3.5 to 2.5 to make mobile menu smaller*/
    width: 2.5rem;
    height: 2.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;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 768px) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
}
/*-- -------------------------- -->
<---   Mobile Navigation Menu   -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (max-width: 1023.5px) {
  #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;
    padding: 0.25rem;
  }
  #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;
  }
  /*Modification - Mobile Menu height decrease*/
    /* Specific selector for the logo image inside that header */
    #cs-navigation .cs-container img {
    max-width: 80px; /* Adjust this number down to shrink the logo */
    height: auto;     /* Ensures it maintains its proportions */
    }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 1023.5px) {
  #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-dropdown-toggle {
    /* Reset default button styles */
    background: none;
    border: none;
    
    text-align: inherit;
    cursor: pointer;
    /* Remove any default focus styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #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: 1024px) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown .cs-dropdown-toggle {
    /* Reset default button styles */
    background: none;
    border: none;
    
    text-align: inherit;
    cursor: pointer;
    /* Remove any default focus styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  #cs-navigation .cs-dropdown:hover,
  #cs-navigation .cs-dropdown.cs-active {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul,
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li,
  #cs-navigation .cs-dropdown.cs-active .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: calc(100% - 2px);
    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;
  }
  #cs-navigation .cs-li-link.cs-drop-link:focus-visible {
    outline-offset: -2px;
  }
}
/* Dark Mode - Desktop */
@media only screen and (min-width: 1024px) {
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--bodyTextColorWhite);
  }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 1024px) {
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #cs-navigation {
    width: 94%;
    max-width: 90rem;
    height: 5rem;
    /* 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: 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;
  }
  #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 {
    filter: grayscale(1) brightness(10000%);
    opacity: 1;
  }
  #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;
    background-color: var(--primary);
    color: #fff;
    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: 1300px) {
  #cs-navigation .cs-social {
    display: flex;
  }
}
 
/*Modification - Made nav bar menu opacity less so it is slightly see through*/
#cs-navigation:before {
    background-color: rgba(255, 255, 255, 0.94) !important;
}

@media only screen and (min-width: 64rem) {
    #cs-navigation {
        background-color: rgba(255, 255, 255, 0.94) !important;
    }
    
}


/*-- -------------------------- -->
<---         LightBox           -->
<--- -------------------------- -*/

/*Modification - Picture lightbox */
#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

#lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    cursor: pointer;
}

/*-- -------------------------- -->
<---    Back to Top Button      -->
<--- -------------------------- -*/


/* Modification - back to top button */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: #b69d718a;
}

#back-to-top:hover {
    opacity: 0.8;
}


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-998 {
        min-height: 100vh;
        /* 144px - 280px */
        padding: clamp(9rem, 25.95vw, 17.5rem) 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        position: relative;
    }
    #hero-998 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
    }
    #hero-998 .cs-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #hero-998 .cs-topper {
        /* 16px - 31px */
        font-size: clamp(1rem, 4.3vw, 1.9375rem);
        white-space: nowrap;
        line-height: 1.2em;
        width: 100%;
        /* 12px - 24px */
        margin: 0 0 clamp(0.75rem, 3vw, 1.5rem);
        color: var(--bodyTextColorWhite);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        gap: 1rem;
    }
    #hero-998 .cs-topper:before {
        /* left line */
        content: "";
        width: 100%;
        max-width: 6.25rem;
        height: 2px;
        background: var(--primary);
        opacity: 1;
        position: relative;
        display: block;
    }
    #hero-998 .cs-topper:after {
        /* right line */
        content: "";
        width: 100%;
        max-width: 6.25rem;
        height: 2px;
        background: var(--primary);
        opacity: 1;
        position: relative;
        display: block;
    }
    #hero-998 .cs-logo {
        width: 100%;
        max-width: 38.375rem;
        margin: 0 0 1.5rem 0;
        display: block;
    }
    #hero-998 .cs-logo img {
        width: 100%;
        height: auto;
    }
    #hero-998 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1vw, 1.25rem);
        line-height: 1.5em;
        text-align: center;
        max-width: 32.375rem;
        /* 24px - 48px */
        margin: 0 0 clamp(1.5rem, 3vw, 3rem) 0;
        color: var(--bodyTextColorWhite);
    }
    #hero-998 .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: auto;
        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;
        transition: color 0.3s;
    }
    #hero-998 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #fff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #hero-998 .cs-button-solid:hover {
        color: #1a1a1a;
    }
    #hero-998 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-998 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #hero-998 .cs-background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #0000008d;
        opacity: 0.8;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #hero-998 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
}
/* Desktop Parallax - 1400px */
@media only screen and (min-width: 87.5rem) {
    #hero-998 .cs-background {
        background: url("media/portfolio/kp2.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* makes parallax effect */
        background-attachment: fixed;
    }
    #hero-998 .cs-background img {
        display: none;
    }
    
}

 
/*-- -------------------------- -->
<---    Side by Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r-1892 {
    width: 100%;
    padding: var(--sectionPadding);
    /* Modification - 1background color */ 
    background-color: #76f1e185;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #sbs-r-1892 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
  }
  #sbs-r-1892 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  #sbs-r-1892 .cs-image-group {
    font-size: min(2.29vw, 0.9rem);
    width: 39.375em;
    height: 45.625em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-r-1892 .cs-picture {
    width: 32.625em;
    height: 42.5em;
    box-sizing: border-box;
    background-color: #dab69200;
    overflow: hidden;
    border: 8px solid #dab69200;
    border-radius: 16.25rem;
    position: center;
    right: 0;
    z-index: -1;
  }
  #sbs-r-1892 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.7s;
  }
  #sbs-r-1892 .cs-graphic {
    height: auto;
    position: absolute;
  }
  #sbs-r-1892 .cs-brown {
    width: 15.125em;
    height: auto;
    top: 1.625em;
    left: 0.8125em;
    z-index: -2;
  }
  #sbs-r-1892 .cs-peach {
    width: 3.625em;
    height: auto;
    top: 0.375em;
    left: 6.8125em;
  }
  #sbs-r-1892 .cs-beige {
    width: 22em;
    height: auto;
    top: 4.4375em;
    left: 1em;
    z-index: -3;
  }
  #sbs-r-1892 .cs-leaf {
    width: 14.0625em;
    height: auto;
    bottom: 0;
    right: 1em;
    z-index: 1;
  }
  #sbs-r-1892 .cs-lines {
    width: 11em;
    height: auto;
    bottom: 0;
    right: 0;
  }
  #sbs-r-1892 .cs-info {
    width: 50%;
    max-width: 19.0625rem;
    padding: 6.25em 2.5em;
    background-color: var(--primary);
    border-radius: 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #sbs-r-1892 .cs-info-text {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.6em;
    text-align: center;
    max-width: 13.9375em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-r-1892 .cs-bold {
    /* 16px - 24x */
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbs-r-1892 .cs-text-large {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
  }
  #sbs-r-1892 .cs-text {
    margin-bottom: 0.75rem;
  }
  #sbs-r-1892 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-r-1892 .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 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbs-r-1892 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-r-1892 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-r-1892 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r-1892 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-r-1892 .cs-content {
    /* 48px - 64px */
    padding: clamp(3rem, 5vw, 4rem) 0;
  }
  #sbs-r-1892 .cs-image-group {
    font-size: min(1.27vw, 1rem);
    min-height: 45.625em;
    height: auto;
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbs-r-1892 .cs-picture {
    height: 93.150685%;
  }
}


/*-- -------------------------- -->
<---    Side by Side Reverse Reverse index about    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r-1892-r {
    width: 100%;
    padding: var(--sectionPadding);
    /* Modification - 1background color */ 
    background-color: #76f1e185;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #sbs-r-1892-r .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 80px */
    gap: clamp(3rem, 6vw, 5rem);
  }
  #sbs-r-1892-r .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
  }
  #sbs-r-1892-r .cs-image-group {
    font-size: min(2.29vw, 0.9rem);
    width: 39.375em;
    height: 45.625em;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-r-1892-r .cs-picture {
    width: 32.625em;
    height: 42.5em;
    box-sizing: border-box;
    background-color: #dab69200;
    overflow: hidden;
    border: 8px solid #dab69200;
    border-radius: 16.25rem;
    position: center;
    right: 0;
    z-index: -1;
  }
  #sbs-r-1892-r .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.7s;
  }
  #sbs-r-1892-r .cs-graphic {
    height: auto;
    position: absolute;
  }
  #sbs-r-1892-r .cs-brown {
    width: 15.125em;
    height: auto;
    top: 1.625em;
    left: 0.8125em;
    z-index: -2;
  }
  #sbs-r-1892-r .cs-peach {
    width: 3.625em;
    height: auto;
    top: 0.375em;
    left: 6.8125em;
  }
  #sbs-r-1892-r .cs-beige {
    width: 22em;
    height: auto;
    top: 4.4375em;
    left: 1em;
    z-index: -3;
  }
  #sbs-r-1892-r .cs-leaf {
    width: 14.0625em;
    height: auto;
    bottom: 0;
    right: 1em;
    z-index: 1;
  }
  #sbs-r-1892-r .cs-lines {
    width: 11em;
    height: auto;
    bottom: 0;
    right: 0;
  }
  #sbs-r-1892-r .cs-info {
    width: 50%;
    max-width: 19.0625rem;
    padding: 6.25em 2.5em;
    background-color: var(--primary);
    border-radius: 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #sbs-r-1892-r .cs-info-text {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 3.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.6em;
    text-align: center;
    max-width: 13.9375em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-r-1892-r .cs-bold {
    /* 16px - 24x */
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbs-r-1892-r .cs-text-large {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
  }
  #sbs-r-1892-r .cs-text {
    margin-bottom: 0.75rem;
  }
  #sbs-r-1892-r .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-r-1892-r .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 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbs-r-1892-r .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-r-1892-r .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-r-1892-r .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r-1892-r .cs-container {
    max-width: 80rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-r-1892-r .cs-content {
    /* 48px - 64px */
    padding: clamp(3rem, 5vw, 4rem) 0;
  }
  #sbs-r-1892-r .cs-image-group {
    font-size: min(1.27vw, 1rem);
    min-height: 45.625em;
    height: auto;
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbs-r-1892-r .cs-picture {
    height: 93.150685%;
  }
}
                                


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

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

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


#sbs-2171 .cs-container { 
  flex-direction: column-reverse;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2171 {
    /* Modification - 1background color */
    background-color: #76f1e185;
    position: relative;
    z-index: 1;
  }
  #sbs-2171 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    /* Modification - Changed column to column reverse for mobile */
    flex-direction: column;
    align-items: center;
  }
  #sbs-2171 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    /* moved section padding to cs-content so the cs-background can be full width */
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-2171 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-2171 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-2171 .cs-ul {
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  #sbs-2171 .cs-li {
    list-style: none;
  }
  #sbs-2171 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
  }
  #sbs-2171 .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: var(--bodyTextColor);
  }
  #sbs-2171 .cs-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5rem;
  }
  #sbs-2171 .cs-flex {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #sbs-2171 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
  }
  #sbs-2171 .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);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbs-2171 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbs-2171 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-2171 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    height: 35rem;
    z-index: 1;
  }
  #sbs-2171 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-2171 .cs-floater {
    width: 24%;
    max-width: 18.4375rem;
    height: auto;
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-2171 {
    /* 90px - 150px */
    /* returned section padding to the section container, this Stitch has 1.5X padding top and bottom than the normal Stitch */
    padding: clamp(5.625rem, 9vw, 9.375rem) 1rem;
  }
  #sbs-2171 .cs-container {
    flex-direction: row;
    justify-content: flex-end;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #sbs-2171 .cs-content {
    width: 48%;
    max-width: 35.1875rem;
    /* 32px - 90px */
    padding: clamp(2rem, 5vw, 5.625rem) 0;
  }
  #sbs-2171 .cs-picture {
    width: 50vw;
    height: auto;
    margin-right: 2.5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
  }
  #sbs-2171 .cs-floater {
    display: block;
  }
      
}


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

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

    #gallery-46 .cs-image-group {
        width: 100%;
        margin: 0;
        display: grid;
        place-content: center;
        grid-template-columns: repeat(12, 1fr);
        /* 158px - 304px */
        grid-template-rows: 1fr;
        /* 8px - 20px */
        gap: clamp(0.5rem, 1.5vw, 1.25rem);
    }
    #gallery-46 .cs-item {
        width: 100%;
        margin: 0;
        aspect-ratio: 1;
        grid-column: span 6;
        display: block;
        position: relative;
        /* prevents image from overflowing the container on hover */
        overflow: hidden;
    }
    #gallery-46 .cs-item:hover .cs-picture img {
        transform: scale(1.1);
    }
    #gallery-46 .cs-item:hover .cs-hover-box {
        opacity: 1;
        pointer-events: all;
    }
    #gallery-46 .cs-item:hover .cs-heading3 {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-46 .cs-item:hover .cs-subtitle {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-46 .cs-item:hover .cs-link {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-46 .cs-picture {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #gallery-46 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #gallery-46 .cs-item-1 {
        grid-column: 1 / span 12;
        grid-row: 1 / 2;
        aspect-ratio: 2.07594937;
    }
    #gallery-46 .cs-item-5 {
        grid-column: 7 / span 6;
        grid-row: 3 / span 2;
        aspect-ratio: initial;
    }
    #gallery-46 .cs-hover-box {
        height: 100%;
        width: 100%;
        padding: 1rem 0.625rem;
        opacity: 0;
        position: absolute;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Prevents padding from adding to the height & width */
        box-sizing: border-box;
        transition: opacity 0.3s;
        /* prevent it from interacting with the mouse so we can add a hover
            effect on the cs-item parent */
        pointer-events: none;
        position: relative;
    }
    #gallery-46 .cs-hover-box:before {
        /* top right box */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0.9;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }
    #gallery-46 .cs-heading3 {
        /* 16px - 20px */
        font-size: clamp(1rem, 5vw, 1.25rem);
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 0.75rem;
        color: var(--bodyTextColorWhite);
        opacity: 0;
        /* starting point is 10px down from its original point */
        transform: translateY(0.625rem);
        transition:
            opacity 0.3s,
            transform 0.5s;
    }
    #gallery-46 .cs-subtitle {
        /* 13px - 15px */
        font-size: clamp(0.8125rem, 5vw, 0.9375rem);
        line-height: 1.5em;
        font-weight: bold;
        text-transform: uppercase;
        /* Pushes the link to the bottom of the flexbox */
        margin-bottom: auto;
        color: var(--bodyTextColorWhite);
        opacity: 0;
        /* starting point is 10px down from its original point */
        transform: translateY(0.625rem);
        display: block;
        transition:
            opacity 0.3s,
            transform 0.5s;
        transition-delay: 0.1s;
    }
    #gallery-46 .cs-link {
        font-size: 0.9375rem;
        line-height: 1.5em;
        font-weight: bold;
        text-decoration: none;
        color: #fff;
        opacity: 0;
        /* starting point is 10px down from its original point */
        transform: translateY(0.625rem);
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition:
            opacity 0.3s,
            transform 0.5s;
        transition-delay: 0.3s;
    }
    #gallery-46 .cs-link:hover:before {
        width: 100%;
    }
    #gallery-46 .cs-link:before {
        content: "";
        position: absolute;
        display: block;
        height: 0.125rem;
        width: 0%;
        background: currentColor;
        opacity: 1;
        bottom: -0.125rem;
        left: 0;
        transition: width 0.3s;
    }
    #gallery-46 .cs-link svg {
        margin-right: 0.5rem;
    }
    #gallery-46 .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;
    }
    #gallery-46 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #gallery-46 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-46 .cs-item {
        grid-column: span 3;
    }
    #gallery-46 .cs-item-1 {
        grid-column: 1 / span 6;
    }
    #gallery-46 .cs-item-2 {
        grid-column: 1 / span 3;
        grid-row: 2;
    }
    #gallery-46 .cs-item-3 {
        grid-column: 4 / span 3;
        grid-row: 2;
    }
    #gallery-46 .cs-item-5 {
        grid-column: 7 / span 3;
        grid-row: 2;
    }
    #gallery-46 .cs-item-6 {
        grid-column: 10 / span 3;
        grid-row: 1 / span 2;
        aspect-ratio: initial;
    }
}
#gallery-46 {
  /* Modification - 1background color */
    background-color: #76f1e185;
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-710 {
        padding: var(--sectionPadding);
        padding-bottom: 3.125rem;
        background-color: var(--primary);
        position: relative;
        z-index: 1;
    }
    #cs-footer-710 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #cs-footer-710 .cs-logo-wrapper {
    width: 100%;
    display: flex;         /* You must have display: flex for centering to work */
    justify-content: center; /* This centers the logo horizontally */
    }

    #cs-footer-710 .cs-logo {
        width: 100%;
        max-width: 13.125rem;
        height: auto;
        margin-right: auto;    /* REMOVE OR CHANGE THIS TO: */
        margin-left: auto;     /* Adding both left and right auto margins... */
        margin-right: auto;    /* ...is the classic way to center a block element */
        display: block;
    
    }
    #cs-footer-710 .cs-logo img {
        width: 100%;
        height: auto;
        
    }
    #cs-footer-710 .cs-top {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* 64px - 100px */
        column-gap: clamp(4rem, 9vw, 6.25rem);
        row-gap: 2rem;
    }
    #cs-footer-710 .cs-ul {
        margin: 0;
        padding: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        flex: none;
    }
    #cs-footer-710 .cs-contact-ul {
        /* we remove the :before animated underline from the contact list and replace it with an underline.  The animated line doesn't work well on this section */
        width: 100%;
        max-width: 100%;
        gap: 0.75rem;
    }
    #cs-footer-710 .cs-contact-ul .cs-link:hover {
        text-decoration: underline;
    }
    #cs-footer-710 .cs-contact-ul .cs-link:before {
        display: none;
    }
    #cs-footer-710 .cs-li {
        list-style: none;
        margin: 0;
        display: block;
    }
    #cs-footer-710 .cs-header {
        font-size: 1rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 1.5rem 0;
        color: #fff;
        display: block;
    }
    #cs-footer-710 .cs-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
    #cs-footer-710 .cs-link:hover:before {
        width: 100%;
    }
    #cs-footer-710 .cs-link:before {
        /* on hover underline */
        content: "";
        width: 0%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-710 .cs-block {
        display: block;
    }
    #cs-footer-710 .cs-icon {
        width: 1.5rem;
        height: auto;
        margin: -0.0625rem 0.75rem 0 0;
    }
    #cs-footer-710 .cs-middle {
        width: 100%;
        /* changes at tablet */
        max-width: 28.125rem;
        /* 60px - 100px */
        margin: clamp(3.75rem, 8vw, 6.25rem) 0 0 0;
        /* 24px - 40px */
        padding-bottom: clamp(1.25rem, 5vw, 2.5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    #cs-footer-710 .cs-nav {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2.5rem;
        row-gap: 0.5rem;
    }
    #cs-footer-710 .cs-nav-li {
        list-style: none;
    }
    #cs-footer-710 .cs-nav-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColorWhite);
        position: relative;
    }
    #cs-footer-710 .cs-nav-link:hover:before {
        width: 100%;
    }
    #cs-footer-710 .cs-nav-link:before {
        /* on hover underline */
        content: "";
        width: 0%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        transition: width 0.3s;
    }
    #cs-footer-710 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #cs-footer-710 .cs-social-li {
        list-style: none;
    }
    #cs-footer-710 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: transparent;
        border: 1px solid #f6e5db;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #cs-footer-710 .cs-social-link:hover {
        background-color: #f6e5db;
    }
    #cs-footer-710 .cs-social-link:hover .cs-default {
        display: none;
    }
    #cs-footer-710 .cs-social-link:hover .cs-hover {
        display: block;
    }
    #cs-footer-710 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
    }
    #cs-footer-710 .cs-hover {
        display: none;
    }
    #cs-footer-710 .cs-bottom {
        width: 100%;
        margin: 0;
        /* 24px - 40px, matches the cs-middle padding bottom */
        padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
        border-top: 1px solid rgba(186, 186, 186, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-footer-710 .cs-copyright {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-align: center;
        width: 70%;
        margin: 0;
        color: var(--bodyTextColorWhite);
        display: block;
    }
    #cs-footer-710 .cs-copyright-link {
        font-size: inherit;
        line-height: inherit;
        text-decoration: none;
        margin: 0;
        color: inherit;
        display: inline-block;
    }
    #cs-footer-710 .cs-copyright-link:hover {
        text-decoration: underline;
    }
    #cs-footer-710 .cs-graphic {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /* makes it act like a background image */
        object-fit: cover;
        position: absolute;
        z-index: -1;
    }
}
/* inbetween - 600px */
@media only screen and (min-width: 37.5rem) {
    #cs-footer-710 .cs-top {
        justify-content: flex-end;
    }
    #cs-footer-710 .cs-ul {
        width: auto;
    }
    #cs-footer-710 .cs-contact-ul {
        width: 15rem;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-footer-710 .cs-top {
        flex-wrap: nowrap;
    }
    #cs-footer-710 .cs-logo-wrapper {
        width: auto;
        margin-right: auto;
    }
    #cs-footer-710 .cs-middle {
        max-width: 100%;
    }
}
/* Small Desktop 1024px */
@media only screen and (min-width: 64rem) {
    #cs-footer-710 .cs-middle {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
/* Modification - fix tablet margin issue
#footer-710::before {
    width: 100%;
    left: 0;
    overflow: hidden;
}
       
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-2251 {
    /* Modification - 1background color*/ 
    background-color: #76f1e185;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #contact-2251 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #contact-2251 .cs-wrapper {
    width: 100%;
    /* removed at tablet */
    max-width: 36.5rem;
    padding: var(--sectionPadding);
    /* 16px - 100px */
    padding-left: clamp(1rem, 4.5vw, 6.25rem);
    padding-right: clamp(1rem, 4.5vw, 6.25rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #contact-2251 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 48.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #contact-2251 iframe {
    width: 100%;
    height: 20rem;
  }
  #contact-2251 .cs-title {
    max-width: 24ch;
  }
  #contact-2251 .cs-form {
    width: 100%;
    max-width: 48.125rem;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
  }
  #contact-2251 .cs-form-content {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #contact-2251 .cs-form-title {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #contact-2251 .cs-label {
    font-size: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #contact-2251 .cs-input,
  #contact-2251 .cs-select {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: #fff;
    color: #767676;
    border: none;
  }
  #contact-2251 .cs-input::placeholder,
  #contact-2251 .cs-select::placeholder {
    color: #767676;
  }
  #contact-2251 .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    margin: 0 0 1.25rem 0;
    padding-top: 1.5rem;
  }
  #contact-2251 .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;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #contact-2251 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #contact-2251 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-2251 .cs-submit {
    width: 100%;
  }
  #contact-2251 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-2251 .cs-button-wrapper {
    display: flex;
    justify-content: center;
    grid-column: span 12;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 600px) {
  #contact-2251 .cs-container {
    flex-direction: row;
    align-items: stretch;
  }
  #contact-2251 iframe {
    width: 50%;
    height: auto;
  }
  #contact-2251 .cs-wrapper {
    width: 50%;
    max-width: 100%;
  }
  #contact-2251 .cs-button-solid {
    width: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-2251 .cs-label {
    grid-column: span 6;
  }
  #contact-2251 .cs-label.cs-message {
    grid-column: span 12;
  }
}
 /*-- -------------------------- -->
<---         Services - index           -->
<--- -------------------------- -*/
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1644 {
    padding: var(--sectionPadding);
  }
  #services-1644 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
  }
  #services-1644 .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-1644 .cs-title {
    max-width: none;
  }
  #services-1644 .cs-text {
    max-width: 60ch;
  }
  #services-1644 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #services-1644 .cs-item {
    list-style: none;
    width: 100%;
    box-sizing: border-box;
    /* resets at tablet */
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 24px - 40px */
    gap: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    z-index: 1;
  }
  #services-1644 .cs-item:last-of-type:before {
    display: none;
  }
  #services-1644 .cs-item:before {
    /* gradient line divider */
    content: '';
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
  }
  #services-1644 .cs-item:first-of-type {
    padding-top: 0;
  }
  #services-1644 .cs-item:last-of-type {
    padding-bottom: 0;
    border: none;
  }
  #services-1644 .cs-image-group {
    position: relative;
  }
  #services-1644 .cs-icon {
    width: 3rem;
    height: auto;
  }
  #services-1644 .cs-h2 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #services-1644 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1644 .cs-container {
    max-width: 120rem;
  }
  #services-1644 .cs-card-group {
    flex-direction: row;
    justify-content: center;
  }
  #services-1644 .cs-item {
    /* 24px - 60px */
    padding: 0rem clamp(1.5rem, 3vw, 3.75rem);
  }
  #services-1644 .cs-item:before {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    left: auto;
    right: 0;
  }
}
#services-1644 {
  background-color: #76f1e185;
}
                                

/*-- -------------------------- -->
<---          Services   -service page       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-596 {
        padding: var(--sectionPadding);
        overflow: hidden;
    }
    #services-596 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
    #services-596 .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-596 .cs-card-group {
        width: 100%;
        margin: 0;
        /* 36px - 80px top & bottom */
        /* 24px - 88px right & left */
        padding: clamp(2.25rem, 6vw, 5rem) clamp(1.5rem, 6.4vw, 5.5rem);
        background-color: #fff;
        box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.1);
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        /* 32px - 64px */
        row-gap: clamp(2rem, 7vw, 4rem);
    }
    #services-596 .cs-item {
        text-align: left;
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    #services-596 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
    }
    #services-596 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 3vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        margin: 0;
        color: var(--bodyTextColor);
    }
}
/* In-between - 550px */
@media only screen and (min-width: 34.375rem) {
    #services-596 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        /* 48px - 64px */
        row-gap: clamp(3rem, 6vw, 4rem);
    }
    #services-596 .cs-item {
        width: 47%;
    }
}
/* Desktop 1024px */
@media only screen and (min-width: 64rem) {
    #services-596 .cs-item {
        width: 31%;
    }
}

/*-- -------------------------- -->
<--- portfolio gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-43 {
        padding: var(--sectionPadding);
        position: relative;
        /* Prevents overflow from the image going off screen */
        overflow: hidden;
    }
    #gallery-43 .cs-container {
        width: 100%;
        max-width: 69rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #gallery-43 .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;
    }

    #gallery-43 .cs-image-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-43 .cs-item {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        margin: 0;
        position: relative;
        display: block;
    }
    #gallery-43 .cs-item:hover .cs-hover-box {
        opacity: 1;
    }
    #gallery-43 .cs-item:hover .cs-icon {
        /* return to original position */
        transform: rotateY(0);
    }
    #gallery-43 .cs-item:hover .cs-h3 {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-43 .cs-item:hover .cs-hover-box-text {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-43 .cs-picture {
        margin: auto;
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }
    #gallery-43 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #gallery-43 .cs-hover-box {
        text-align: center;
        width: 100%;
        height: 100%;
        padding: 1em;
        background-color: rgba(229, 87, 44, 0.9);
        opacity: 0;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Prevents padding from contributing to height & width */
        box-sizing: border-box;
        /* Sets stage for 3d transform animation */
        perspective: 700px;
        top: 0;
        left: 0;
        z-index: 10;
        /* prevents mouse from being able to interact with these elements */
        pointer-events: none;
        transition: opacity 0.3s;
    }
    #gallery-43 .cs-icon {
        /* 50px - 60px */
        width: clamp(3.125rem, 5vw, 3.75rem);
        height: clamp(3.125rem, 5vw, 3.75rem);
        /* 16px - 32px */
        margin-bottom: clamp(1rem, 5vw, 2rem);
        border-radius: 50%;
        background-color: #fff;
        outline: 0.5rem solid rgba(255, 255, 255, 0.7);
        /* Start with the icon box rotated 90deg */
        transform: rotateY(90deg);
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        transition: transform 0.5s;
    }
    #gallery-43 .cs-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }
    #gallery-43 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 auto;
        max-width: 16.875rem;
        color: #fff;
        /* make starting position down 10px and invisible */
        opacity: 0;
        transform: translateY(0.625rem);
        margin-bottom: 0.5rem;
        transition:
            opacity 0.3s,
            transform 0.3s ease-out;
        transition-delay: 0.1s;
    }
    #gallery-43 .cs-hover-box-text {
        /* 13px - 16px */
        font-size: clamp(0.8125rem, 1vw, 1rem);
        line-height: 1.5em;
        margin: 0 auto;
        max-width: 16.875rem;
        color: #fff;
        /* make starting position down 10px and invisible */
        opacity: 0;
        transform: translateY(0.625rem);
        transition:
            opacity 0.3s,
            transform 0.3s ease-out;
        transition-delay: 0.2s;
    }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-43 .cs-image-group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
    }
    #gallery-43 .cs-item {
        grid-column: span 6;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-43 .cs-item {
        grid-column: span 4;
    }
}

/*-- -------------------------- -->
<---  specific project  Gallery           -->
<--- -------------------------- -*/

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

    #gallery-1152 .cs-topper {
        color: #B69D71;
    }
    #gallery-1152 .cs-title {
        margin: 0;
    }
    #gallery-1152 .cs-gallery {
        width: 100%;
        /* changes to 100% at tablet */
        max-width: 31.25rem;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-1152 .cs-image {
        /* 260px - 360px */
        min-height: clamp(16.25rem, 60vw, 20rem);
        border-radius: 1rem;
        /* clips the image corners */
        overflow: hidden;
        display: block;
        grid-column: span 12;
        grid-row: span 1;
        position: relative;
    }
    #gallery-1152 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #gallery-1152 .cs-gallery {
        max-width: 100%;
        grid-template-rows: 1fr;
    }
    #gallery-1152 .cs-image {
        grid-column: span 4;
    }
    #gallery-1152 .cs-image:nth-of-type(4),
    #gallery-1152 .cs-image:nth-of-type(5) {
        grid-column: span 6;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #gallery-1152 .cs-container {
        max-width: 80rem;
    }
    #gallery-1152 .cs-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
    #gallery-1152 .cs-image {
        grid-column: span 1;
    }
    #gallery-1152 .cs-image:nth-of-type(4),
    #gallery-1152 .cs-image:nth-of-type(5) {
        grid-column: span 1;
    }
}

/* Modification - 1background color */ 
#gallery-1152 {
  background-color: #76f1e185;
}

                                
/*-- -------------------------- -->
<---      before and after  index    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1897 {
    padding: var(--sectionPadding);
    /* Modification - 1background color */
    background-color: #76f1e185;
    /* stops the cs-graphics from causing an overflow */
    overflow: hidden;
    position: relative;
  }
  #gallery-1897 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    align-items: center;
  }
  #gallery-1897 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
  }
  #gallery-1897 .cs-title {
    max-width: 25ch;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    
  }
  #gallery-1897 .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 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #gallery-1897 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #gallery-1897 .cs-button-solid:hover {
    color: #fff;
  }
  #gallery-1897 .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1897 .cs-gallery {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    z-index: 1;
  }
  #gallery-1897 .cs-item {
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #faf6f2;
    /* 16px - 32px */
    border-radius: 1rem;
    display: grid;
    /* 8px - 16px */
    column-gap: clamp(0.5rem, 2vw, 1rem);
    row-gap: 1rem;
  }
  #gallery-1897 .cs-item-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    grid-column: span 2;
  }
  #gallery-1897 .cs-picture-group {
    /* 160px - 320px */
    min-height: clamp(10rem, 23vw, 20rem);
    overflow: hidden;
    border-radius: 1rem;
    grid-column: span 1;
    position: relative;
  }
  #gallery-1897 .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
  }
  #gallery-1897 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-1897 .cs-tag {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    border-radius: 1.875rem;
    position: absolute;
    /* 8px - 16px */
    bottom: clamp(0.5rem, 2vw, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    backdrop-filter: blur(8px);
  }
  #gallery-1897 .cs-graphic {
    /* 500px - 835px */
    width: clamp(31.25rem, 60vw, 52.1875rem);
    /* 453px - 757px */
    height: clamp(28.3125rem, 55vw, 47.3125rem);
    object-fit: cover;
    position: absolute;
    z-index: 0;
  }
  #gallery-1897 .cs-graphic-top {
    top: 0;
    right: -8.875rem;
  }
  #gallery-1897 .cs-graphic-bottom {
    bottom: 0;
    left: 0;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1897 .cs-content {
    text-align: center;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  #gallery-1897 .cs-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  #gallery-1897 .cs-graphic-top {
    right: -8.375rem;
    transform: initial;
  }
  #gallery-1897 .cs-graphic-bottom {
    left: -7.5rem;
    transform: initial;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #gallery-1897 .cs-graphic-top {
    margin-left: 15rem;
    left: 50%;
  }
  #gallery-1897 .cs-graphic-bottom {
    margin-right: 16.25rem;
    right: 50%;
    left: initial;
  }
}

/*-- -------------------------- -->
<---      before and after   portfolio pages   -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1897-m {
    padding: var(--sectionPadding);
    background-color: #f6eddf;
    /* stops the cs-graphics from causing an overflow */
    overflow: hidden;
    position: relative;
  }
  #gallery-1897-m .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery-1897-m .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
  }
  #gallery-1897-m .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #gallery-1897-m .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 1.5rem;
    background-color: var(--secondary);
    overflow: hidden;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #gallery-1897-m .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #gallery-1897-m .cs-button-solid:hover {
    color: #fff;
  }
  #gallery-1897-m .cs-button-solid:hover:before {
    width: 100%;
  }
  #gallery-1897-m .cs-gallery {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    z-index: 1;
  }
  #gallery-1897-m .cs-item {
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #faf6f2;
    /* 16px - 32px */
    border-radius: 1rem;
    display: grid;
    /* 8px - 16px */
    column-gap: clamp(0.5rem, 2vw, 1rem);
    row-gap: 1rem;
  }
  #gallery-1897-m .cs-item-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    grid-column: span 2;
  }
  #gallery-1897-m .cs-picture-group {
    /* 160px - 320px */
    min-height: clamp(10rem, 23vw, 20rem);
    overflow: hidden;
    border-radius: 1rem;
    grid-column: span 1;
    position: relative;
  }
  #gallery-1897-m .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
  }
  #gallery-1897-m .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #gallery-1897-m .cs-tag {
    font-size: 0.875rem;
    line-height: 1.5em;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    color: var(--bodyTextColorWhite);
    border: 1px solid var(--bodyTextColorWhite);
    border-radius: 1.875rem;
    position: absolute;
    /* 8px - 16px */
    bottom: clamp(0.5rem, 2vw, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    backdrop-filter: blur(8px);
  }
  #gallery-1897-m .cs-graphic {
    /* 500px - 835px */
    width: clamp(31.25rem, 60vw, 52.1875rem);
    /* 453px - 757px */
    height: clamp(28.3125rem, 55vw, 47.3125rem);
    object-fit: cover;
    position: absolute;
    z-index: 0;
  }
  #gallery-1897-m .cs-graphic-top {
    top: 0;
    right: -8.875rem;
  }
  #gallery-1897-m .cs-graphic-bottom {
    bottom: 0;
    left: 0;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-1897-m .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #gallery-1897-m .cs-gallery {
    grid-template-columns: repeat(1, 1fr);
  }
  #gallery-1897-m .cs-graphic-top {
    right: -8.375rem;
    transform: initial;
  }
  #gallery-1897-m .cs-graphic-bottom {
    left: -7.5rem;
    transform: initial;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #gallery-1897-m .cs-graphic-top {
    margin-left: 15rem;
    left: 50%;
  }
  #gallery-1897-m .cs-graphic-bottom {
    margin-right: 16.25rem;
    right: 50%;
    left: initial;
  }
}


                        
/*-- -------------------------- -->
<---    call to action          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-1394 {
        /* 60px - 124px top and bottom */
        padding: clamp(3.75rem, 7.82vw, 7.75rem) 1rem;
        background-color: #1a1a1a;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    #cta-1394 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        z-index: 1;
    }
    #cta-1394 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
        position: relative;
        z-index: 1;
    }
    #cta-1394 .cs-content:before {
        /* circle overlay */
        content: "";
        width: 48.375rem;
        height: 48.375rem;
        background: #1a1a1a;
        opacity: 0.8;
        border-radius: 50%;
        position: absolute;
        display: block;
        /* -36px to -92px */
        top: calc(clamp(2.25rem, 6vw, 5.75rem) * -1);
        left: 50%;
        z-index: -1;
        transform: translateX(-50%);
    }

    #cta-1394 .cs-title,
    #cta-1394 .cs-text {
        max-width: 31.25rem;
        color: var(--bodyTextColorWhite);
    }
    #cta-1394 .cs-text {
        margin-bottom: 2rem;
        opacity: 0.8;
    }
    #cta-1394 .cs-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        position: relative;
        z-index: 1;
    }
    #cta-1394 .cs-input {
        font-size: 1rem;
        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;
    }
    #cta-1394 .cs-input::placeholder {
        color: #767676;
    }
    #cta-1394 .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;
        overflow: hidden;
        background-color: var(--primary);
        border-radius: 5rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #cta-1394 .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;
    }
    #cta-1394 .cs-button-solid:hover {
        cursor: pointer;
    }
    #cta-1394 .cs-button-solid:hover:before {
        width: 100%;
    }
    #cta-1394 .cs-submit {
        width: 100%;
        border: none;
    }
    #cta-1394 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #cta-1394 .cs-background img {
        height: 100%;
        width: 100%;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cta-1394 .cs-container {
        max-width: 80rem;
    }
    #cta-1394 .cs-input {
        width: 100%;
    }
    #cta-1394 .cs-submit {
        width: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.5rem;
    }
    #cta-1394 .cs-picture {
        width: 50%;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-43 {
        padding: var(--sectionPadding);
        position: relative;
        /* Prevents overflow from the image going off screen */
        overflow: hidden;
    }
    #gallery-43 .cs-container {
        width: 100%;
        max-width: 69rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #gallery-43 .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;
    }

    #gallery-43 .cs-image-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-43 .cs-item {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        margin: 0;
        position: relative;
        display: block;
    }
    #gallery-43 .cs-item:hover .cs-hover-box {
        opacity: 1;
    }
    #gallery-43 .cs-item:hover .cs-icon {
        /* return to original position */
        transform: rotateY(0);
    }
    #gallery-43 .cs-item:hover .cs-h3 {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-43 .cs-item:hover .cs-hover-box-text {
        opacity: 1;
        /* Return to original position */
        transform: translateY(0);
    }
    #gallery-43 .cs-picture {
        margin: auto;
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }
    #gallery-43 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #gallery-43 .cs-hover-box {
        text-align: center;
        width: 100%;
        height: 100%;
        padding: 1em;
        background-color: #b69d71c4;
        opacity: 0;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Prevents padding from contributing to height & width */
        box-sizing: border-box;
        /* Sets stage for 3d transform animation */
        perspective: 700px;
        top: 0;
        left: 0;
        z-index: 10;
        /* prevents mouse from being able to interact with these elements */
        pointer-events: none;
        transition: opacity 0.3s;
    }
    #gallery-43 .cs-icon {
        /* 50px - 60px */
        width: clamp(3.125rem, 5vw, 3.75rem);
        height: clamp(3.125rem, 5vw, 3.75rem);
        /* 16px - 32px */
        margin-bottom: clamp(1rem, 5vw, 2rem);
        border-radius: 50%;
        background-color: #fff;
        outline: 0.5rem solid rgba(255, 255, 255, 0.7);
        /* Start with the icon box rotated 90deg */
        transform: rotateY(90deg);
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        transition: transform 0.5s;
    }
    #gallery-43 .cs-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }
    #gallery-43 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 auto;
        max-width: 16.875rem;
        color: #fff;
        /* make starting position down 10px and invisible */
        opacity: 0;
        transform: translateY(0.625rem);
        margin-bottom: 0.5rem;
        transition:
            opacity 0.3s,
            transform 0.3s ease-out;
        transition-delay: 0.1s;
    }
    #gallery-43 .cs-hover-box-text {
        /* 13px - 16px */
        font-size: clamp(0.8125rem, 1vw, 1rem);
        line-height: 1.5em;
        margin: 0 auto;
        max-width: 16.875rem;
        color: #fff;
        /* make starting position down 10px and invisible */
        opacity: 0;
        transform: translateY(0.625rem);
        transition:
            opacity 0.3s,
            transform 0.3s ease-out;
        transition-delay: 0.2s;
    }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
    #gallery-43 .cs-image-group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr;
    }
    #gallery-43 .cs-item {
        grid-column: span 6;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-43 .cs-item {
        grid-column: span 4;
    }
}

/* Modification - added button to ne wgallery from old one*/
#gallery-43 .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;
    }
    #gallery-43 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #gallery-43 .cs-button-solid:hover:before {
        width: 100%;
    }

/* Modification - 1background color */    
#gallery-43 {
  background-color: #76f1e185;
}
                                











/* Modification - fixes margin issue */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}



/* Modification - changed background tint to grey instead of orange theme */
#cs-footer-710 {
    --footerBackground: #1a1a1a !important; /* Check if your theme uses a name like this */
    background-color: #1a1a1a !important;
}


/*                                             --- */
/* Modification - ARTFUL Text DESIGN OVERRIDES --- */
/*                                             --- */
.cs-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 300 !important; /* This makes it thin and elegant like your photo */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Adds that "breathable" high-end look */
}
.cs-text {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.1rem !important; /* Slightly larger for better readability */
    line-height: 1.6em !important;
    font-weight: 400 !important;
}
/* Optional: Make the "topper" (small text above title) match the vibe */
.cs-topper {
    letter-spacing: 0.2em !important;
    font-weight: 600 !important;
}
/* Target all headers and list items that might still be thick */
#sbs-2171 .cs-h3, 
#sbs-2171 .cs-li-text,
#sbs-2171 .cs-flex,
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 300 !important; /* Forces the "thin" look */
    letter-spacing: 0.05em !important;
}
/* If the body text is still thick in some places */
#sbs-2171 .cs-li-text, 
p {
    font-weight: 400 !important; /* Slightly heavier than headers for readability, but still thin */
}