/* PAGE-SPECIFIC STYLES FOR THE ABOUT PAGE */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1856 {
    /* 200px - 300px - leaving extra space for the navigation */
    padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
  }
  #hero-1856 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 46.875rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #hero-1856 .cs-title {
    /* 49px - 84px */
    font-size: clamp(3.0625rem, 6vw, 5.25rem);
    max-width: 100%;
    letter-spacing: -2px;
  }
  #hero-1856 .cs-title,
  #hero-1856 .cs-text {
    text-align: left;
    color: var(--bodyTextColorWhite);
  }
  #hero-1856 .cs-text {
    margin-bottom: 2rem;
  }
  #hero-1856 .cs-button-10 {
    text-align: center;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 8vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    min-width: 10.875rem;
    margin: auto;
    color: #fff;
    padding: 0 2rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #f15a24;
    box-shadow: 4px 4px 0px 0px #1a1a1a;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    z-index: 1;
    transform: skew(-10deg);
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  #hero-1856 .cs-button-10 .cs-icon {
    transition: transform 0.3s;
  }
  #hero-1856 .cs-button-10:hover {
    background-color: #1a1a1a;
    box-shadow: 4px 4px 0px 0px var(--primary);
  }
  #hero-1856 .cs-button-10:hover .cs-icon {
    transform: translateX(0.25rem);
  }
  #hero-1856 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1856 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1856 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1856 .cs-content-graphic {
    height: 305%;
    max-height: 81.25rem;
    filter: brightness(60%);
    width: auto;
    position: absolute;
    top: 50%;
    right: -4rem;
    left: auto;
    z-index: -1;
    transform: translateY(-50%);
    z-index: -3;
  }
  #hero-1856 .cs-graphic {
    width: 100%;
    min-width: 120rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }
  #hero-1856 .cs-graphic-dark {
    display: none;
  }
  #hero-1856 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    /* Overlay on the background image that gets removed at tablet+, in favour of the svg graphic */
  }
  #hero-1856 .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1856 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1856 .cs-background::before {
    content: none;
  }
}
/* Desktop Parallax - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1856 .cs-background {
    background: url("../images/hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1856 .cs-background img {
    display: none;
  }
}
/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #hero-1856 {
    /* this ties the padding bottom value to the size of the screen width. The wider the image gets the taller it gets, meaning it will get closer and closer to the content. This makes the padding bottom value grow with the screen size so it accounts for the growing height of the svg graphic getting taller */
    padding-bottom: 14vw;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-1856 .cs-background:before {
    opacity: 0.85;
  }
  body.dark-mode #hero-1856 .cs-graphic-light {
    display: none;
  }
  body.dark-mode #hero-1856 .cs-graphic-dark {
    display: block;
  }
}
/*-- -------------------------- -->
<---        Why Choose Us       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1821 {
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #why-choose-1821 .cs-container {
    width: 100%;
    max-width: 106.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #why-choose-1821 .cs-content {
    text-align: center;
    width: 100%;
    padding: var(--sectionPadding);
    background-color: var(--primary);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #why-choose-1821 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-1821 .cs-title {
    margin: 0 0 3rem;
    max-width: 13ch;
    color: var(--bodyTextColorWhite);
  }
  #why-choose-1821 .cs-picture {
    width: 100%;
    max-width: 36.625rem;
    height: auto;
    display: block;
  }
  #why-choose-1821 .cs-picture img {
    width: 100%;
    height: auto;
    display: block;
  }
  #why-choose-1821 .cs-card-group {
    width: 100%;
    max-width: 36.625rem;
    padding: var(--sectionPadding);
    /* 16px - 44px */
    padding-left: clamp(1rem, 4vw, 2.75rem);
    /* 16px - 64px */
    padding-right: clamp(1rem, 4vw, 4rem);
    box-sizing: border-box;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    /* 32px - 40px */
    gap: clamp(2rem, 0.5vw, 2.5rem);
  }
  #why-choose-1821 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 36.625rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1821 .cs-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1821 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #why-choose-1821 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
  }
  #why-choose-1821 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1821 .cs-container {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #why-choose-1821 .cs-content {
    text-align: left;
    width: 100%;
    align-items: flex-start;
    background-color: transparent;
  }
  #why-choose-1821 .cs-content:before {
    /* background color, moves to the section parent at desktop */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #why-choose-1821 .cs-picture {
    margin-left: auto;
    max-width: 100%;
  }
  #why-choose-1821 .cs-card-group {
    width: 65%;
    max-width: 100%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1821 .cs-item {
    flex-direction: row;
  }
}
/* Desktop - 1400px */
@media only screen and (min-width: 87.5rem) {
  #why-choose-1821:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    left: auto;
    right: 50%;
    margin-right: 0.625rem;
    z-index: -1;
  }
  #why-choose-1821 .cs-content {
    width: 50%;
    padding-left: 0;
    padding-right: 0;
  }
  #why-choose-1821 .cs-content:before {
    left: auto;
    right: 50%;
    margin-right: 0.625rem;
  }
  #why-choose-1821 .cs-picture {
    width: auto;
    height: 80%;
    display: flex;
    align-items: flex-end;
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: -1;
  }
  #why-choose-1821 .cs-picture img {
    width: auto;
    height: 100%;
    max-height: 47.5rem;
    object-fit: contain;
  }
  #why-choose-1821 .cs-card-group {
    width: 50%;
  }
}
/* Dark Mode - Mobile */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1821 .cs-title,
  body.dark-mode #why-choose-1821 .cs-h3,
  body.dark-mode #why-choose-1821 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-1821 .cs-content {
    background-color: transparent;
  }
  body.dark-mode #why-choose-1821 .cs-content:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.4;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  body.dark-mode #why-choose-1821 .cs-item-text {
    opacity: 0.8;
  }
}
/* Dark Mode Desktop 1400px */
@media only screen and (min-width: 87.5rem) {
  body.dark-mode #why-choose-1821:before {
    background: var(--primary);
    opacity: 0.4;
  }
  body.dark-mode #why-choose-1821 .cs-content {
    background-color: transparent;
  }
  body.dark-mode #why-choose-1821 .cs-content:before {
    display: none;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-956 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
  }
  #sbsr-956 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-956 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-956 .cs-title,
  #sbsr-956 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #sbsr-956 .cs-text {
    margin-bottom: 1rem;
    opacity: 0.8;
  }
  #sbsr-956 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-956 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbsr-956 .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;
  }
  #sbsr-956 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-956 .cs-image-group {
    width: 100%;
    max-width: 40.625rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #sbsr-956 .cs-picture {
    width: 100%;
    grid-column: span 12;
    position: relative;
  }
  #sbsr-956 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-956 .cs-picture1 {
    height: 26.25rem;
  }
  #sbsr-956 .cs-picture2 {
    height: 21.75rem;
  }
  #sbsr-956 .cs-flex {
    width: 100%;
    /* breaks up the container so the browser treats its children as if they are not inside this container. They are considered children of the .cs-image-group and makes it easier to space everything this way on mobile */
    display: contents;
  }
  #sbsr-956 .cs-contact-group {
    width: 100%;
    margin: 0;
    /* 24px - 40px */
    padding: clamp(1.5rem, 3vw, 2.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border: 1px solid #484848;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    grid-column: span 12;
  }
  #sbsr-956 .cs-link {
    text-decoration: none;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #484848;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }
  #sbsr-956 .cs-link:hover .cs-wrapper {
    transform: scale(1.2);
  }
  #sbsr-956 .cs-link:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  #sbsr-956 .cs-wrapper {
    /* 44px - 56px */
    width: clamp(2.75rem, 4.3vw, 3.5rem);
    height: clamp(2.75rem, 4.3vw, 3.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    transition: transform 0.3s;
  }
  #sbsr-956 .cs-wrapper:before {
    /* light grey circle that animates on hover */
    content: "";
    width: 100%;
    height: 100%;
    background: #484848;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s, height 0.3s;
  }
  #sbsr-956 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #sbsr-956 .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #sbsr-956 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #sbsr-956 .cs-link-content {
    font-size: 0.875rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-956 .cs-image-group {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-956 .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #sbsr-956 .cs-contact-group {
    /* 32px - 64px */
    margin-bottom: clamp(2rem, 6vw, 4rem);
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbsr-956 .cs-picture1 {
    width: 100%;
    height: auto;
    /* 32px - 64px */
    margin-top: clamp(2rem, 6vw, 4rem);
  }
  #sbsr-956 .cs-flex {
    /* 267px - 325px */
    width: clamp(16.6875rem, 25vw, 20.3125rem);
    /* prevents flexbox from squishing it */
    flex: none;
    /* sends it to the far left */
    order: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-956 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sbsr-956 .cs-image-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-956 {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #gallery-42 {
    padding: var(--sectionPadding);
  }
  #gallery-42 .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-42 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #gallery-42 .cs-text {
    margin-bottom: 1rem;
    max-width: 39.375rem;
  }
  #gallery-42 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #gallery-42 .cs-link {
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.5em;
    width: 6.25rem;
    color: var(--headerColor);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #gallery-42 .cs-link:before {
    content: "";
    position: absolute;
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 1;
    bottom: -0.1875rem;
    left: 0;
  }
  #gallery-42 .cs-link:hover svg {
    transform: translateX(0.4375rem);
  }
  #gallery-42 .cs-link svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s;
  }
  #gallery-42 .cs-image-group {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 31vw);
    /* 16px - 20px */
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
  }
  #gallery-42 .cs-picture {
    display: block;
    position: relative;
  }
  #gallery-42 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #gallery-42 .cs-picture-1 {
    grid-column: 1/span 6;
    grid-row: span 1;
  }
  #gallery-42 .cs-picture-2 {
    grid-column: 7/span 6;
    grid-row: span 1;
  }
  #gallery-42 .cs-picture-3 {
    grid-column: 1/span 12;
    grid-row: 2/span 2;
  }
  #gallery-42 .cs-picture-4 {
    grid-column: 1/span 12;
    grid-row: 4/span 2;
  }
  #gallery-42 .cs-picture-5 {
    grid-column: 1/span 6;
    grid-row: 6/span 1;
  }
  #gallery-42 .cs-picture-6 {
    grid-column: 7/span 6;
    grid-row: 6/span 1;
  }
}
/* Tablet */
@media only screen and (min-width: 48rem) {
  #gallery-42 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
  }
  #gallery-42 .cs-flex {
    min-width: 45%;
  }
  #gallery-42 .cs-image-group {
    /* 116px - 210px */
    grid-template-rows: repeat(3, clamp(7.25rem, 16vw, 13.125rem));
  }
  #gallery-42 .cs-picture-1 {
    grid-column: 1/span 3;
    grid-row: 1/span 1;
  }
  #gallery-42 .cs-picture-2 {
    grid-column: 4/span 3;
    grid-row: 1/span 1;
  }
  #gallery-42 .cs-picture-3 {
    grid-column: 1/span 6;
    grid-row: 2/span 2;
  }
  #gallery-42 .cs-picture-4 {
    grid-column: 7/span 6;
    grid-row: 1/span 2;
  }
  #gallery-42 .cs-picture-5 {
    grid-column: 7/span 3;
    grid-row: 3/span 1;
  }
  #gallery-42 .cs-picture-6 {
    grid-column: 10/span 3;
    grid-row: 3/span 1;
  }
}
/* Dark mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery-42 .cs-title,
  body.dark-mode #gallery-42 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery-42 .cs-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery-42 .cs-link:before {
    background: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery-42 .cs-link svg path {
    fill: var(--bodyTextColorWhite);
  }
}

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