/*
Theme Name: Blossom Junior Theme
Author: Koushin
Description: Custom 1-page theme for Blossom Junior branch site.
Version: 1.0.0
*/

@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* reset */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
}

ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th {
  text-align: left;
}

q:before,
q:after {
  content: "";
}

object,
embed {
  vertical-align: top;
}

legend {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

img,
abbr,
acronym,
fieldset {
  border: 0;
}

body {
  font: 16px "Noto Sans JP", Arial, Verdana, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  color: #000;
  background: #fff;
}

a {
  color: #0066ff;
  text-decoration: none;
}

a:hover,
.active {
  text-decoration: underline;
}

a:active,
a:focus,
input:active,
input:focus {
  outline: 0;
}

: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: #91b721;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 2rem;
}

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: 0.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;
  width: 100%;
  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);
}

.gradient-link {
  /* 1. Define the gradient background */
  background: linear-gradient(to right, #f69e56, #ef33a3, #7a28cf);
  /* 2. Clip the background tightly to the text characters */
  -webkit-background-clip: text;
  background-clip: text;
  /* 3. Make the actual text transparent to see the background through it */
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Optional: Ensure underlines don't conflict with the effect */
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-size: 18px;
}

.gradient-link:visited {
  background: linear-gradient(to right, #f69e56, #ef33a3, #7a28cf);
}

/* Change colors completely on hover */
.gradient-link:hover {
  background: linear-gradient(to right, #7a28cf, #ef33a3, #f69e56);
  -webkit-background-clip: text;
  background-clip: text;
}

/* USING */
/* Items used to overwrite others */
/*-- -------------------------- -->
<---          Variables         -->
<--- -------------------------- -*/
/*-- -------------------------- -->
<---          Header            -->
<--- -------------------------- -*/
#mainnav a {
  color: #91b721;
  font-family: "Noto Sans JP", sans-serif;
}

/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
#footer {
  clear: both;
  padding: 50px 10px 50px 0;
  text-align: center;
  font-size: 12px;
}

/*-- -------------------------- -->
<---       Global Styles        -->
<--- -------------------------- -*/
h1,
h2 {
  font-family: "Noto Sans JP", sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

section {
  clear: both;
}
section h2 {
  width: 60%;
  margin: 70px auto;
  font-size: 22px;
  font-weight: normal;
  text-align: center;
}
section h2 span {
  padding-bottom: 20px;
  border-bottom: 3px solid #000;
}

.inner {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 50px;
}

#sec03 .inner,
#sec04 .inner {
  border-bottom: 1px solid #a0a0a0;
}

.innerS {
  width: 60%;
  margin: 0 auto;
  padding-bottom: 80px;
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
#sec02 {
  padding: 0 !important;
}
#sec02 header {
  display: none;
}

#gallery {
  overflow: hidden;
}
#gallery li {
  width: 33.3333333333%;
  float: left;
  line-height: 0;
}
#gallery li.full {
  width: 100%;
}
#gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/*-- -------------------------- -->
<---           Brand            -->
<--- -------------------------- -*/
.col4 .img {
  margin: 0 auto;
}

/*-- -------------------------- -->
<---          Project           -->
<--- -------------------------- -*/
#sec04 {
  padding-bottom: 0 !important;
}

.article {
  clear: both;
  overflow: hidden;
  padding-bottom: 50px;
}
.article img {
  margin: 5px 20px 20px;
  float: left;
}
.article p {
  margin-bottom: 20px;
}

/*-- -------------------------- -->
<---          Company           -->
<--- -------------------------- -*/
#sec05 p {
  margin-bottom: 5px;
}

.col2 li {
  width: 100%;
  margin: 20px 0;
  display: inline-block;
}

#map {
  height: 0;
  padding-bottom: 75%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
#map iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

/*-- -------------------------- -->
<---       Desktop Layout       -->
<--- -------------------------- -*/
@media only screen and (min-width: 800px) {
  body {
    font-size: 14px;
  }
  #wrapper {
    width: 100%;
  }
  /*
   * The content uses the remaining space after accounting
   * for the fixed sidebar.
   */
  #content {
    width: calc(100% - clamp(15rem, 19vw, 18rem));
  }
  /*-- -------------------------- -->
  <---          Sidebar           -->
  <--- -------------------------- -*/
  #sidebar {
    width: clamp(15rem, 19vw, 18rem);
    height: 100vh;
    height: 100dvh;
    padding: 0 clamp(1rem, 2vw, 2rem);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 500;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
    border-left: 1px solid #eee;
  }
  #sidebar #sidebarWrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #sidebar h1 {
    margin: 0;
    padding: 30px 0;
    flex-shrink: 0;
  }
  #sidebar h1 img {
    width: 100%;
    display: block;
  }
  a#menu {
    display: none;
  }
  #mainnav {
    min-height: 0;
    flex: 1;
  }
  #mainnav .panel {
    width: 100%;
    height: 100%;
    padding-bottom: 1.5rem;
    display: flex !important;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #mainnav {
    /*
     * Only targets the main navigation list.
     * This prevents the banner's nested list from
     * inheriting navigation spacing.
     */
  }
  #mainnav .panel > ul:first-child {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  #mainnav .panel > ul:first-child > li {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
  }
  #mainnav .panel > ul:first-child > li > a {
    padding: 8px 0;
    display: block;
    line-height: 1.5;
  }
  /*-- -------------------------- -->
  <---        Social Links        -->
  <--- -------------------------- -*/
  #sns {
    margin: 1.5rem 0;
    padding: 0;
    flex-grow: 1;
  }
  #sns li {
    margin: 0;
    padding: 0 10px 0 0;
    display: inline-block;
  }
  #sns a {
    display: inline-block;
  }
  #sns a:hover img {
    opacity: 0.8;
  }
  #sns img {
    display: block;
    max-width: 160px;
    transition: opacity 0.3s;
  }
  /*-- -------------------------- -->
  <---     Recruitment Banner     -->
  <--- -------------------------- -*/
  #apply-nav {
    width: 100%;
    margin: auto 0 0;
    padding: 1rem;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
    color: #fff;
    background-color: #176caf;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2rem rgba(23, 108, 175, 0.2);
    text-align: center;
    /*
     * Reset styles inherited from generic navigation
     * list selectors.
     */
  }
  #apply-nav,
  #apply-nav ul {
    list-style: none;
  }
  #apply-nav > li {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
  }
  #apply-nav h2 {
    width: auto;
    margin: 0 0 0.75rem;
    padding: 0;
    color: #fff;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  #apply-nav .content {
    width: 100%;
    padding: 0.875rem;
    box-sizing: border-box;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
  }
  #apply-nav .content ul {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: center;
  }
  #apply-nav .content ul li {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.65;
  }
  #apply-nav .content ul li + li {
    margin-top: 0.625rem;
  }
  #apply-nav .content ul li {
    /*
     * Main ¥100,000 announcement.
     */
  }
  #apply-nav .content ul li:nth-child(2) {
    color: #ffe900;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
  }
  #apply-nav .content ul li {
    /*
     * Part-time ¥30,000 announcement.
     */
  }
  #apply-nav .content ul li:nth-child(3) {
    font-weight: 700;
  }
  #apply-nav .content ul li {
    /*
     * Application-period disclaimer.
     */
  }
  #apply-nav .content ul li:last-child {
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.625rem;
    line-height: 1.5;
  }
  /*-- -------------------------- -->
  <---           Brand            -->
  <--- -------------------------- -*/
  .col4 {
    text-align: center;
  }
  .col4 li {
    width: 18%;
    padding: 0 3%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
  }
  #map iframe {
    height: 300px !important;
  }
  #footer {
    padding: 30px 10px 70px 0;
  }
}
/*-- -------------------------- -->
<---      Tablet Columns        -->
<--- -------------------------- -*/
@media only screen and (min-width: 641px) {
  .col2 li {
    width: 60%;
    vertical-align: top;
  }
  .col2 li:first-child {
    width: 35%;
    padding-right: 4%;
  }
}
/*-- -------------------------- -->
<---       Small Mobile         -->
<--- -------------------------- -*/
@media only screen and (max-width: 640px) {
  .innerS {
    width: 94%;
    padding-bottom: 30px;
  }
  #gallery li {
    width: 100%;
    float: none;
  }
  .article img {
    margin: 0 auto 20px;
    display: block;
    float: none;
  }
  #map iframe {
    width: 96% !important;
    left: 2%;
  }
}
/*-- -------------------------- -->
<---      Mobile Navigation     -->
<--- -------------------------- -*/
@media only screen and (max-width: 799px) {
  #content {
    width: 100%;
    padding-top: 60px;
  }
  #sidebar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
  }
  #sidebarWrap {
    width: 100%;
    height: 60px;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  #sidebar h1 {
    margin: 0;
    padding-top: 15px;
    text-align: center;
  }
  #sidebar h1 img {
    width: auto !important;
    max-height: 25px;
  }
  /*-- -------------------------- -->
  <---       Hamburger Menu       -->
  <--- -------------------------- -*/
  a#menu {
    width: 40px;
    height: 40px;
    margin: 10px;
    display: inline-block;
    position: relative;
  }
  #menuBtn {
    width: 18px;
    height: 2px;
    margin: -1px 0 0 -7px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #000;
    transition: 0.2s;
  }
  #menuBtn::before, #menuBtn::after {
    content: "";
    width: 18px;
    height: 2px;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #000;
    transition: 0.3s;
  }
  #menuBtn::before {
    margin-top: -7px;
  }
  #menuBtn::after {
    margin-top: 5px;
  }
  a#menu .close {
    background-color: transparent;
  }
  a#menu .close::before, a#menu .close::after {
    margin-top: 0;
  }
  a#menu .close::before {
    transform: rotate(-45deg);
  }
  a#menu .close::after {
    transform: rotate(-135deg);
  }
  /*-- -------------------------- -->
  <---         Menu Panel         -->
  <--- -------------------------- -*/
  #mainnav {
    width: 100%;
    position: absolute;
    top: 0;
    text-align: right;
  }
  #mainnav .panel {
    width: 100%;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    display: none;
    position: relative;
    left: 0;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #fff;
    flex-direction: column;
    overflow: scroll !important;
  }
  #mainnav {
    /*
     * Main navigation list only.
     */
  }
  #mainnav .panel > ul:first-child {
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    text-align: left;
  }
  #mainnav .panel > ul:first-child > li {
    margin: 0;
    padding: 0;
  }
  #mainnav .panel > ul:first-child > li > a {
    padding: 15px 25px;
    display: block;
    position: relative;
    color: #000;
    border-bottom: 1px solid #ccc;
    font-weight: 400;
  }
  #mainnav .panel > ul:first-child > li > a::before {
    content: "";
    width: 6px;
    height: 6px;
    margin: -4px 0 0;
    display: block;
    position: absolute;
    top: 50%;
    left: 8px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
  }
  /*-- -------------------------- -->
  <---        Mobile Social       -->
  <--- -------------------------- -*/
  #mainnav #sns {
    margin: 0;
    padding: 0 1rem 1rem;
    background-color: #fff;
    border: 0;
    text-align: left;
    max-width: 200px;
  }
  #mainnav #sns li {
    margin: 0;
    padding: 0;
    display: inline-block;
  }
  #mainnav #sns li a {
    padding: 15px 10px 0;
    display: inline-block;
    position: relative;
    border: 0;
  }
  #mainnav #sns li a::before {
    display: none;
  }
  /*-- -------------------------- -->
  <---      Mobile Banner         -->
  <--- -------------------------- -*/
  #apply-nav {
    width: auto;
    margin: 0 1rem 1rem;
    padding: 1.25rem;
    box-sizing: border-box;
    color: #fff;
    background-color: #176caf;
    border: 0;
    border-radius: 1rem;
    text-align: center;
    list-style: none;
  }
  #apply-nav > li {
    margin: 0;
    padding: 0;
  }
  #apply-nav h2 {
    width: auto;
    margin: 0 0 0.875rem;
    padding: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  #apply-nav .content {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
  }
  #apply-nav .content ul {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: center;
    list-style: none;
  }
  #apply-nav .content ul li {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.7;
  }
  #apply-nav .content ul li + li {
    margin-top: 0.75rem;
  }
  #apply-nav .content ul li:nth-child(2) {
    color: #ffe900;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
  }
  #apply-nav .content ul li:nth-child(3) {
    font-weight: 700;
  }
  #apply-nav .content ul li:last-child {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.6875rem;
    line-height: 1.5;
  }
  .col4 li {
    margin: 0 auto 50px;
    display: block;
    text-align: center;
  }
  section h2 {
    margin: 55px auto;
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-2195 {
    padding: var(--sectionPadding);
    background-color: #fbf9f5;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #contact-2195 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 48rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #contact-2195 .cs-content {
    text-align: center;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #contact-2195 .cs-title {
    max-width: 27ch;
  }
  #contact-2195 .cs-form {
    width: 100%;
    max-width: 42.5rem;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
  }
  #contact-2195 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-column: span 12;
    gap: 0.25rem;
  }
  #contact-2195 .cs-label:last-of-type {
    margin-bottom: 1.25rem;
  }
  #contact-2195 .cs-input {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 6vw, 3.5rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    padding: 0;
    padding-left: 1.5rem;
    background-color: #ffffff;
    color: #767676;
    border: none;
  }
  #contact-2195 .cs-input::placeholder {
    color: #767676;
  }
  #contact-2195 .cs-select {
    /* as the select arrow/date calendar icon are not affected by padding, we can use a transparent border on the select element to pad the arrow as much as we need */
    border-right: 1.5rem solid rgba(0, 0, 0, 0);
  }
  #contact-2195 .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    padding-top: 1rem;
  }
  #contact-2195 .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;
    width: 100%;
    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;
    border-radius: 1.875rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #contact-2195 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--secondary);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    border-radius: 1.875rem;
  }
  #contact-2195 .cs-button-solid:hover {
    color: #fff;
  }
  #contact-2195 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-2195 .cs-submit {
    grid-column: span 12;
  }
  #contact-2195 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-2195 .cs-floater {
    height: auto;
    display: none;
    position: absolute;
    z-index: -1;
  }
  #contact-2195 .cs-flower2 {
    transform: rotateY(180deg);
  }
  #contact-2195 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
  }
  #contact-2195 .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) {
  #contact-2195 .cs-container {
    max-width: 80rem;
  }
  #contact-2195 .cs-form {
    /* 464px - 680px */
    max-width: clamp(29rem, 58vw, 42.5rem);
  }
  #contact-2195 .cs-label {
    grid-column: span 6;
  }
  #contact-2195 .cs-label:last-of-type {
    grid-column: span 12;
  }
  #contact-2195 .cs-button-solid {
    width: auto;
    margin: auto;
  }
  #contact-2195 .cs-floater {
    /* 173px - 432px */
    width: clamp(10.8125rem, 25vw, 27rem);
    display: block;
    /* 54px - 08px */
    bottom: clamp(3.375rem, 6vw, 6.75rem);
    left: -2rem;
  }
  #contact-2195 .cs-flower2 {
    right: -2rem;
    bottom: 3.375rem;
    left: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-2195 .cs-label {
    grid-column: span 12;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #contact-2195 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #contact-2195 .cs-title,
  body.dark-mode #contact-2195 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2195 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #contact-2195 .cs-label {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2195 .cs-input {
    background-color: var(--medium);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2195 .cs-input::placeholder {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-2195 .cs-background {
    display: none;
  }
}
@media only screen and (max-width: 560px) {
  #contact-2195 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
}
/* Fix Contact Form 7 layout breakage */
.cs-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Ensure submit button maintains full width/flex positioning */
.cs-form input[type=submit] {
  width: 100%;
  cursor: pointer;
}

/* Style success/error response messages */
.wpcf7-response-output {
  margin-top: 15px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  text-align: center;
}

/* Hide Contact Form 7 default message box under the submit button */
.wpcf7-response-output {
  display: none !important;
}

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #hero-1350 {
    background-color: #fff;
    min-height: 750px;
    padding: clamp(6rem, 16vw, 10rem) 1rem clamp(4rem, 10vw, 7rem);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #hero-1350 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
  #hero-1350 .cs-background img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    /*
    * Adjust this percentage depending on where
    * the children are located in your photograph.
    */
    object-position: 58% center;
  }
  #hero-1350 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
  }
  #hero-1350 .cs-content {
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
    text-align: center;
  }
  #hero-1350 .cs-heading-image {
    width: min(100%, 34rem);
    height: auto;
    display: block;
  }
  #hero-1350 .cs-logo-image {
    width: min(100%, 30rem);
    height: auto;
    display: block;
  }
  #hero-1350 .cs-button-solid {
    margin-top: clamp(0.5rem, 2vw, 1rem);
  }
  #hero-1350 .cs-topper {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #e8e8e8;
    margin-bottom: 0.5rem;
    display: block;
  }
  #hero-1350 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 20ch;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1350 .cs-text {
    font-size: 1.25rem;
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #e8e8e8;
  }
  #hero-1350 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-1350 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1350 .cs-button-solid:hover {
    color: var(--primary);
  }
  #hero-1350 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1350 .cs-bubbles {
    /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
    font-size: min(2vw, 0.5em);
    position: absolute;
    z-index: -1;
  }
  #hero-1350 .cs-bubbles1 {
    width: 42.5em;
    height: 45.25em;
    right: -11.875rem;
    /* changes to 172 at large desktop */
    top: 0;
  }
  #hero-1350 .cs-bubbles1:before {
    /* white border bubble */
    content: "";
    width: 38.875em;
    height: 38.875rem;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1350 .cs-bubbles1:after {
    /* orange bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    background: var(--primary);
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1350 .cs-bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* changes to 160px at larger desktop */
    left: -13.75rem;
    /* removed at larger desktop */
    bottom: -16.25rem;
  }
  #hero-1350 .cs-bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1350 .cs-bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: var(--primary);
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 2.5rem;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1350 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0.8;
  }
  #hero-1350 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1350 .cs-bubbles {
    font-size: 1em;
  }
  #hero-1350 .cs-bubbles1 {
    /* changes to auto at large desktop */
    right: -26.75rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1350 .cs-bubbles1 {
    /* 200px - 450px */
    margin-left: clamp(12.5rem, 20vw, 28.125rem);
    top: 10.75rem;
    right: auto;
    left: 50%;
  }
}
/* Large Desktop Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1350 .cs-background {
    background: url("http://www.blossom-jr.jp/wp-content/uploads/2026/08/hero-v2.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  #hero-1350 .cs-background img {
    display: none;
  }
}
/* Larger Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #hero-1350 .cs-bubbles2 {
    margin-right: 50rem;
    right: 50%;
    left: auto;
    top: 13.125rem;
    bottom: auto;
  }
}
/*-- -------------------------- -->
<---           flow            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #flow-1675 {
    padding: var(--sectionPadding);
  }
  #flow-1675 .cs-container {
    width: 100%;
    /* changes to 1920px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #flow-1675 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #flow-1675 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    max-width: 32.625rem;
  }
  #flow-1675 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    align-items: stretch;
    grid-auto-flow: row;
  }
  #flow-1675 .cs-item {
    list-style: none;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    /* bottom border */
  }
  #flow-1675 .cs-item::after {
    content: "";
    width: 100%;
    height: 1px;
    /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
    /* note you'll also have to change the color in the tablet media query when the lines go vertical */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(186, 186, 186) 50%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #flow-1675 .cs-item:first-of-type {
    padding-top: 0;
    width: 100%;
  }
  #flow-1675 .cs-item:last-of-type {
    padding-bottom: 0;
    width: 100%;
  }
  #flow-1675 .cs-item:last-of-type::after {
    content: none;
  }
  #flow-1675 .cs-number {
    /* 80px - 100px */
    font-size: clamp(5rem, 1vw, 6.25rem);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--primary);
    opacity: 0.12;
    display: block;
  }
  #flow-1675 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: -1.9375rem 0 1rem 0;
    color: var(--headerColor);
  }
  #flow-1675 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #flow-1675 .cs-item-text strong {
    font-weight: bold;
  }
  #flow-1675 .cta-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
  }
  #flow-1675 .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;
    max-width: 300px;
    padding: 0 1.5rem;
    margin-top: 48px;
    background-color: var(--primary);
    border-radius: 1.875rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #flow-1675 .cs-button-solid.secondary-btn {
    background-color: rgba(26, 26, 26, 0);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 1.875rem;
  }
  #flow-1675 .cs-button-solid.secondary-btn:hover {
    color: #fff;
  }
  #flow-1675 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 1.875rem;
    transition: width 0.3s;
  }
  #flow-1675 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 72rem) {
  #flow-1675 .cs-container {
    max-width: 120rem;
  }
  #flow-1675 .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  #flow-1675 .cs-item {
    /* 24px - 60px */
    padding: clamp(1.5rem, 2vw, 3.75rem);
  }
  #flow-1675 .cs-item::after {
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(186, 186, 186) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.6;
    opacity: 0.6;
    right: 0;
    left: initial;
  }
  #flow-1675 .cs-item {
    /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
  }
  #flow-1675 .cs-item:first-of-type, #flow-1675 .cs-item:last-of-type {
    /* 24px - 60px */
    padding: clamp(1.5rem, 2vw, 3.75rem);
  }
}
@media only screen and (max-width: 560px) {
  #flow-1675 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1475 {
    background-color: #fbf9f5;
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbsr-1475 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 56.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 15;
  }
  #sbsr-1475 .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;
    position: relative;
    z-index: 10;
  }
  #sbsr-1475 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-1475 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-1475 .cs-ul {
    width: 100%;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    column-gap: 2.5rem;
    row-gap: 0.75rem;
  }
  #sbsr-1475 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbsr-1475 .cs-li.list-title {
    font-size: 24px;
    font-weight: bold;
  }
  #sbsr-1475 .cs-li strong {
    min-width: 60px;
    font-weight: 600;
  }
  #sbsr-1475 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #sbsr-1475 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbsr-1475 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbsr-1475 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-1475 .cs-image-group {
    /* font size scaling. Everything inside the group is in ems so they pull their value for em from the parent (this group div) and when the font is set to a vw, it scales the whole section down and grows proportionally with the screen width, stopping at the final em value declared in the second slot for the min function. */
    font-size: min(2.25vw, 0.83em);
    width: 40.75em;
    min-height: 45em;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #sbsr-1475 .cs-picture {
    width: 33.875em;
    height: auto;
    border-radius: 15.625em;
    border: 24px solid #d6f3ff;
    background-color: #d6f3ff;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #sbsr-1475 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-1475 .cs-oval {
    width: 45.4375em;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(38deg);
  }
  #sbsr-1475 .cs-box {
    text-align: center;
    width: auto;
    /* 16px - 40px */
    padding: clamp(1em, 3vw, 2.5em) clamp(2.5em, 5vw, 4em);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    left: 0;
    bottom: 3.75em;
    z-index: 10;
  }
  #sbsr-1475 .cs-blob {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #sbsr-1475 .cs-number {
    /* 24px - 49px */
    font-size: clamp(1.25rem, 4.3vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    color: var(--secondary);
    display: block;
    z-index: 10;
  }
  #sbsr-1475 .cs-desc {
    /* 12px - 16px */
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    font-weight: bold;
    width: 100%;
    max-width: 20ch;
    color: var(--bodyTextColor);
    position: relative;
    z-index: 10;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 72rem) {
  #sbsr-1475 .cs-container {
    max-width: 80rem;
    /* set to horizontal arrangement */
    flex-direction: row-reverse;
    justify-content: center;
    align-items: stretch;
  }
  #sbsr-1475 .cs-content {
    width: 47%;
    padding: 4.375rem 0;
    align-self: center;
  }
  #sbsr-1475 .cs-image-group {
    font-size: min(1.2vw, 1em);
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Please ❤ this if you like it! 😊 */
.table-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  color: #141a4e;
  font-size: 16px;
}
.simple-table th,
.simple-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #edeef2;
  text-align: left;
  vertical-align: middle;
}
.simple-table th {
  background: #8fb73d;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  width: 50%;
}
.simple-table tbody tr {
  transition: background-color 0.2s, color 0.2s;
}
.simple-table tbody tr:hover {
  background: #fb4f83;
  color: #fff;
}
.simple-table td {
  text-align: center;
}
.simple-table td.price {
  text-align: right;
}

@media (max-width: 767px) {
  .simple-table thead {
    display: none;
  }
  .simple-table tbody,
  .simple-table tr,
  .simple-table td {
    display: block;
    width: 100%;
  }
  .simple-table tr {
    margin-bottom: 16px;
    border: 1px solid #edeef2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  .simple-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edeef2;
  }
  .simple-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #91b722;
  }
  .simple-table td:last-child {
    border-bottom: 0;
  }
  .simple-table tbody tr:hover {
    background: #fff;
    color: #141a4e;
  }
}
@media screen and (min-width: 768px) {
  .simple-table {
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
  }
  .simple-table td.price {
    padding-right: 16%;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1387 {
    padding: var(--sectionPadding);
    /* clips the cs-floater and prevents it from causing overflow issues */
    overflow: hidden;
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #pricing-1387 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 3vw, 4rem);
    position: relative;
  }
  #pricing-1387 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #pricing-1387 .cs-title {
    max-width: 20ch;
  }
  #pricing-1387 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1387 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1387 .cs-toggle-group {
    width: 100%;
    max-width: 25.875rem;
    margin: 0;
    padding: 0.75rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #f1f1f4;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-1387 .cs-plan {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-1387 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-1387 .cs-toggle {
    width: 3.25rem;
    height: 2rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 1.5rem;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing-1387 .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing-1387 .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing-1387 .cs-toggle.active .cs-toggle-switch {
    left: 1.4375rem;
  }
  #pricing-1387 .cs-toggle:before {
    /* top right box */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity 0.3s;
  }
  #pricing-1387 .cs-toggle-switch {
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.1875rem;
    transition: left 0.3s;
    background: #fff;
  }
  #pricing-1387 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 {
    /* when the active class is on the cs-card-group, run these styles */
    transform: scale(0);
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option1 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 {
    /* when the active class is on the cs-card-group, run these styles */
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    position: relative;
    right: auto;
    bottom: auto;
    transform: scale(1);
  }
  #pricing-1387 .cs-card-group.cs-active.cs-option2 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-1387 .cs-option1 {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    visibility: visible;
    right: 0;
    bottom: auto;
    transform: scale(1);
    transform-origin: top;
    transition: transform 0.6s, opacity 0.3s, visibility 0.3s;
  }
  #pricing-1387 .cs-option1 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option1 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-1387 .cs-option2 {
    /* default styles when there is no active class on the cs-card-group */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: scale(0);
    transform-origin: top;
    transition: transform 0.6s, opacity 0.3s, visibility 0.3s;
  }
  #pricing-1387 .cs-option2 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s, transform 0.6s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-1387 .cs-option2 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-1387 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }
  #pricing-1387 .cs-item.cs-popular .cs-flex {
    background-color: var(--primary);
  }
  #pricing-1387 .cs-item.cs-popular .cs-tag {
    display: flex;
  }
  #pricing-1387 .cs-item.cs-popular .cs-package,
  #pricing-1387 .cs-item.cs-popular .cs-price,
  #pricing-1387 .cs-item.cs-popular .cs-duration {
    color: var(--bodyTextColorWhite);
  }
  #pricing-1387 .cs-item.cs-popular .cs-duration {
    opacity: 0.8;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--primary);
    color: #fff;
    transition: color 0.3s, border-color 0.6s, background-color 0.3s;
  }
  #pricing-1387 .cs-item.cs-popular .cs-button-transparent:hover {
    border-color: #1a1a1a;
    background-color: #1a1a1a;
  }
  #pricing-1387 .cs-flex {
    /* 196px - 250px */
    width: clamp(12.25rem, 25vw, 15.625rem);
    height: clamp(12.25rem, 25vw, 15.625rem);
    margin-bottom: -6.25rem;
    border-radius: 50%;
    background-color: #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #pricing-1387 .cs-tag {
    font-size: 0.8125rem;
    color: var(--headerColor);
    text-transform: uppercase;
    /* keeps the text in one line, won't jump to two lines */
    white-space: nowrap;
    font-weight: 700;
    padding: 0.5rem;
    gap: 0.25rem;
    border-radius: 50px;
    background-color: #fff;
    /* clips the corners of the pseudo element */
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: -0.25rem;
    transform: translateX(-50%);
  }
  #pricing-1387 .cs-tag:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.3;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #pricing-1387 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: flex;
  }
  #pricing-1387 .cs-package {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    /* 4px - 8px */
    margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
  }
  #pricing-1387 .cs-price {
    /* 31px - 49px */
    font-size: clamp(1.9375rem, 4vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #pricing-1387 .cs-duration {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    text-align: inherit;
    margin: 0;
    /* 4px - 8px */
    padding: clamp(0.25rem, 1vw, 0.5rem) 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #pricing-1387 .cs-info {
    width: 100%;
    padding: 5.375rem 2.5rem 2.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #pricing-1387 .cs-ul {
    width: 100%;
    margin: 2.5rem 0 2.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
  }
  #pricing-1387 .cs-li {
    font-size: 1rem;
    list-style: none;
    line-height: 1.5em;
    font-weight: 400;
    text-align: inherit;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #pricing-1387 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1387 .cs-button-transparent {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: var(--primary);
    padding: 0 3rem;
    border-radius: 1.875rem;
    border: 1px solid var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #pricing-1387 .cs-button-transparent:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #pricing-1387 .cs-button-transparent:hover {
    color: var(--bodyTextColorWhite);
    border-color: #1a1a1a;
  }
  #pricing-1387 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1387 .cs-button-transparent {
    /* this is the section specific override if you choose to pull out the cs-button-transparent and place it in a global stylesheet to resue acorss the entire site */
    margin-top: auto;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1387 .cs-container {
    max-width: 80rem;
  }
  #pricing-1387 .cs-container .cs-card-group {
    flex-direction: row;
    align-items: stretch;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1387 .cs-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #pricing-1387 .cs-content {
    text-align: left;
    width: 75%;
    align-items: flex-start;
  }
  #pricing-1387 .cs-info {
    min-height: 27rem;
  }
}
@media only screen and (max-width: 560px) {
  #pricing-1387 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
}
/*-- -------------------------- -->
<---     Side By SIde Pair      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #supported-skills {
    background-color: #fbf9f5;
    box-sizing: border-box;
  }
  #supported-skills .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* 32px - 100px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(2rem, 8vw, 6.25rem) clamp(1rem, 3vw, 4rem);
    background-color: #fff;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #supported-skills .cs-wrapper {
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #supported-skills .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;
  }
  #supported-skills .cs-title span {
    font-size: 80%;
    padding-bottom: 0;
    border-bottom: 0;
  }
  #supported-skills .cs-text {
    max-width: 62rem;
  }
  #supported-skills .cs-content2 .cs-text {
    margin-bottom: 1rem;
  }
  #supported-skills .cs-content2 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #supported-skills .cs-flex {
    width: 100%;
    /* 24px - 32px top & bottom */
    /* 16px - 32px left & right */
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
    background-color: #fbf9f5;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 32px */
    gap: clamp(1rem, 4vw, 2rem);
  }
  #supported-skills .cs-h3 {
    font-size: 1.5625rem;
    line-height: 1.2em;
    font-weight: 700;
    /* 16px - 32px */
    margin: 0 0 clamp(1rem, 3vw, 2rem);
    padding-bottom: 2rem;
    border-bottom: 1px solid #d2d8df;
    color: var(--headerColor);
  }
  #supported-skills .cs-ul {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #supported-skills .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #supported-skills .cs-icon {
    width: 1.1875rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 3px;
    display: block;
    flex: none;
  }
  #supported-skills .cs-link {
    font-size: var(--bodyFontSize);
    text-decoration: none;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--secondary);
    position: relative;
    z-index: 1;
  }
  #supported-skills .cs-link:before {
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #supported-skills .cs-picture {
    width: 100%;
    height: 75vw;
    max-height: 21.875rem;
    border-radius: 1rem;
    /* clips the border radius of the image */
    overflow: hidden;
    display: block;
    order: -1;
    position: relative;
    z-index: 1;
  }
  #supported-skills .cs-picture img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 1040px) {
  #supported-skills {
    padding: var(--sectionPadding);
  }
  #supported-skills .cs-flex {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  #supported-skills .cs-flex.row-reverse {
    flex-direction: row;
  }
  #supported-skills .cs-h3 {
    /* 108px - 142px */
  }
  #supported-skills .cs-picture {
    width: 70vw;
    max-width: 33rem;
    height: auto;
    max-height: 100%;
    order: 2;
  }
}
@media only screen and (max-width: 560px) {
  #supported-skills .cs-content {
    text-align: left;
    align-items: flex-start;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #daily-activity {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #daily-activity .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
  }
  #daily-activity .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #daily-activity .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;
    margin: 2rem 0 0;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    color: #fff;
    background-color: var(--secondary);
    border-radius: 1.875rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: color 0.3s;
  }
  #daily-activity .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--secondary);
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #daily-activity .cs-button-solid:hover:before {
    width: 100%;
  }
  #daily-activity .cs-picture-group {
    position: relative;
    /* stops the name and text being overflown during the transition */
    overflow: hidden;
  }
  #daily-activity .cs-image {
    width: 100%;
    height: 17.5rem;
    border-radius: 1.25rem;
    display: block;
    position: relative;
    /* clips the image corners */
    overflow: hidden;
  }
  #daily-activity .cs-image img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #daily-activity .cs-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
  }
  #daily-activity .cs-h3,
  #daily-activity .cs-item-text {
    width: fit-content;
    margin: 0;
    padding: 0.75rem 1rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.5rem;
    transition: transform 0.3s, opacity 0.3s;
  }
  #daily-activity .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    transition-delay: 0.05s;
  }
  #daily-activity .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    padding: 0.75rem 1rem;
  }
  #daily-activity .cs-graphic {
    display: none;
    position: absolute;
  }
  #daily-activity .cs-graphic-one {
    width: 8.625rem;
    height: 11.9375rem;
    top: 13rem;
    right: -6.8125rem;
    transform: rotate(104deg);
  }
  #daily-activity .cs-graphic-two {
    width: 12.3125rem;
    height: 8.375rem;
    bottom: -4.5625rem;
    left: -5.5625rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #daily-activity .cs-container {
    max-width: 80rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
  #daily-activity .cs-content {
    grid-column: span 12;
  }
  #daily-activity .cs-picture-group:nth-child(2) {
    display: block;
    grid-column: span 6;
    grid-row: span 2;
  }
  #daily-activity .cs-picture-group:nth-child(3) {
    grid-column: span 6;
    grid-row: span 1;
  }
  #daily-activity .cs-picture-group:nth-child(4) {
    grid-column: span 6;
    grid-row: span 2;
  }
  #daily-activity .cs-picture-group:nth-child(5) {
    grid-column: span 6;
    grid-row: span 2;
  }
  #daily-activity .cs-picture-group:nth-child(6) {
    grid-column: span 6;
    grid-row: span 2;
  }
  #daily-activity .cs-picture-group:nth-child(7) {
    grid-column: span 6;
    grid-row: span 1;
  }
  #daily-activity .cs-picture-group:nth-child(8) {
    grid-column: span 6;
    grid-row: span 1;
  }
  #daily-activity .cs-image {
    height: 100%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #daily-activity .cs-container {
    grid-template-rows: repeat(4, 1fr);
  }
  #daily-activity .cs-content {
    text-align: left;
    margin-top: -3.3125rem;
    align-items: flex-start;
    grid-column: span 8;
  }
  #daily-activity .cs-picture-group:nth-child(2) {
    grid-column: span 4;
    grid-row: span 1;
  }
  #daily-activity .cs-picture-group:nth-child(3) {
    grid-column: span 4;
    grid-row: span 2;
  }
  #daily-activity .cs-picture-group:nth-child(4) {
    grid-column: span 4;
    grid-row: span 1;
  }
  #daily-activity .cs-picture-group:nth-child(5) {
    grid-column: span 4;
    grid-row: span 3;
  }
  #daily-activity .cs-picture-group:nth-child(6) {
    grid-column: span 4;
    grid-row: span 2;
  }
  #daily-activity .cs-picture-group:nth-child(7) {
    grid-column: span 4;
    grid-row: span 1;
  }
  #daily-activity .cs-picture-group:nth-child(8) {
    grid-column: span 4;
    grid-row: span 1;
  }
  #daily-activity .cs-h3,
  #daily-activity .cs-item-text {
    opacity: 0;
    transform: translateY(2rem);
  }
  #daily-activity .cs-picture-group:hover .cs-h3,
  #daily-activity .cs-picture-group:hover .cs-item-text {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #daily-activity .cs-content {
    margin-top: 0;
  }
  #daily-activity .cs-graphic {
    display: block;
  }
}
@media only screen and (max-width: 560px) {
  #daily-activity .cs-content {
    text-align: left;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 767px) {
  #daily-activity .sp-hide {
    display: none !important;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #day-service {
    padding: var(--sectionPadding);
    position: relative;
  }
  #day-service .cs-background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #day-service .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #e5f9ff;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #day-service .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }
  #day-service .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #day-service .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #day-service .cs-title,
  #day-service .cs-text {
    color: var(--headerColor);
  }
  #day-service .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #day-service .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #day-service .cta-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #day-service .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: 1.875rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #day-service .cs-button-solid.secondary-btn {
    background-color: rgba(26, 26, 26, 0);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 1.875rem;
  }
  #day-service .cs-button-solid.secondary-btn:hover {
    color: #fff;
  }
  #day-service .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 1.875rem;
    transition: width 0.3s;
  }
  #day-service .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #day-service .cs-background {
    overflow: hidden;
  }
  #day-service .cs-background::before {
    width: 40%;
    height: 100%;
    top: 0;
    right: 0;
    left: auto;
    background: #e5f9ff;
    opacity: 1;
  }
  #day-service .cs-background::after {
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-left: -3.125rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    z-index: 1;
    opacity: 1;
    background: linear-gradient(to left, rgb(229, 249, 255) 0%, rgb(229, 249, 255) 57%, rgba(229, 249, 255, 0) 100%);
    transform: rotate(-10deg) translateY(-50%);
  }
  #day-service .cs-background img {
    width: 60%;
    height: 100%;
    top: 0;
    right: auto;
    left: 0;
    object-fit: cover;
    object-position: left center;
  }
  #day-service .cs-container {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  #day-service .cs-content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
  #day-service .cs-title,
  #day-service .cs-text {
    margin-right: 0;
    margin-left: 0;
  }
  #day-service .cta-buttons {
    flex-direction: row;
  }
}
/* Intermediate Desktop - 912px */
@media only screen and (min-width: 57rem) {
  #day-service .cs-content {
    width: 70%;
    align-items: flex-start;
    text-align: left;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #free-trial {
    padding: var(--sectionPadding);
    position: relative;
  }
  #free-trial .cs-background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #free-trial .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #e5f9ff;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #free-trial .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }
  #free-trial .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #free-trial .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #free-trial .cs-title,
  #free-trial .cs-text {
    color: var(--headerColor);
  }
  #free-trial .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #free-trial .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #free-trial .cta-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #free-trial .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: 1.875rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #free-trial .cs-button-solid.secondary-btn {
    background-color: rgba(26, 26, 26, 0);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 1.875rem;
  }
  #free-trial .cs-button-solid.secondary-btn:hover {
    color: #fff;
  }
  #free-trial .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 1.875rem;
    transition: width 0.3s;
  }
  #free-trial .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #free-trial .cs-background {
    /* clips the black slant so it doesnt overflow */
    overflow: hidden;
  }
  #free-trial .cs-background:before {
    width: 40%;
    opacity: 1;
  }
  #free-trial .cs-background:after {
    /* black slant */
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-right: -3.125rem;
    background: linear-gradient(to right, rgb(229, 249, 255) 0%, rgb(229, 249, 255) 57%, rgba(26, 26, 26, 0) 100%);
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(10deg) translateY(-50%);
  }
  #free-trial .cs-background img {
    width: 60%;
    object-position: right;
    left: auto;
    right: 0;
  }
  #free-trial .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #free-trial .cs-content {
    text-align: left;
    align-items: flex-start;
    width: 100%;
  }
  #free-trial .cs-text,
  #free-trial .cs-title {
    margin-left: 0;
  }
  #free-trial .cta-buttons {
    flex-direction: row;
  }
}
@media only screen and (min-width: 57rem) {
  #free-trial .cs-content {
    text-align: left;
    align-items: flex-start;
    width: 70%;
  }
}
@media only screen and (max-width: 560px) {
  #free-trial .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #free-trial .cs-content .cta-buttons {
    width: 100%;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #job-apply {
    background-color: #fbf9f5;
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #job-apply .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 4vw, 4rem);
  }
  #job-apply .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    max-width: 32.5rem;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #job-apply .cs-title {
    max-width: 30ch;
  }
  #job-apply .cs-text {
    margin-bottom: 1rem;
  }
  #job-apply .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #job-apply .cta-btns {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  #job-apply .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: 9.375rem;
    margin: 0;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 1.875rem;
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    padding: 0 1rem;
    box-sizing: border-box;
    white-space: nowrap;
  }
  #job-apply .cs-button-solid.secondary-btn {
    background-color: #fbf9f5;
    border: 1px solid var(--primary);
    color: var(--primary);
  }
  #job-apply .cs-button-solid.secondary-btn:hover {
    color: #fff;
  }
  #job-apply .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--secondary);
    border-radius: 1.875rem;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #job-apply .cs-button-solid:hover:before {
    width: 100%;
  }
  #job-apply .cs-h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0;
    color: var(--headerColor);
  }
  #job-apply .cs-ul {
    margin: 0.75rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #job-apply .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    /* 20px - 24px */
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
    position: relative;
  }
  #job-apply .cs-li strong {
    color: var(--headerColor);
  }
  #job-apply .cs-li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--secondary);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
  }
  #job-apply .cs-button-box {
    font-size: inherit;
    width: 100%;
    max-width: 39.375rem;
    /* 48px - 64px */
    margin: clamp(3rem, 6.5vw, 4rem) 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  #job-apply .cs-link {
    /* using ems for font size and wrapper values so we can scale them with a font size at desktop */
    text-decoration: none;
    padding-right: 1.875rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
  }
  #job-apply .cs-link:hover:before {
    width: 100%;
    height: 4.5em;
  }
  #job-apply .cs-link:hover .cs-wrapper {
    transform: scale(1.2);
  }
  #job-apply .cs-link:hover .cs-icon {
    transform: translateX(0.4375rem);
  }
  #job-apply .cs-link:before {
    /* light green circle that animates on hover */
    content: "";
    width: 3.75em;
    height: 3.75em;
    background: var(--primary);
    opacity: 0.05;
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    z-index: -1;
    transform: translateY(-50%);
    transition: width 0.3s, height 0.3s, border-radius 0.3s;
  }
  #job-apply .cs-wrapper {
    width: 3.75em;
    height: 3.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition: transform 0.3s;
  }
  #job-apply .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #job-apply .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #job-apply .cs-header {
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #job-apply .cs-link-content {
    font-size: 1.5625em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #job-apply .cs-image-group {
    /* scales the whole group based on the view width size and stop when that vales equals .74em, resets at desktop */
    font-size: min(2.32vw, 0.9rem);
    width: 39.375em;
    height: 36.125em;
    display: block;
    position: relative;
    z-index: 1;
    order: -1;
  }
  #job-apply .cs-picture {
    display: block;
    position: absolute;
  }
  #job-apply .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #job-apply .cs-picture1 {
    width: 25.75em;
    height: 25.75em;
    border-right: 0.875em solid #fff;
    border-bottom: 0.875em solid #fff;
    top: 0;
    bottom: 17.5625em;
    left: 0;
  }
  #job-apply .cs-picture2 {
    width: 25.8125em;
    height: 22em;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  #job-apply .cs-picture3 {
    width: 14.5625em;
    height: auto;
    bottom: 5.8125em;
    left: 6.25em;
  }
  #job-apply .cs-picture3 img {
    position: relative;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #job-apply .cs-container {
    max-width: 80rem;
  }
  #job-apply .cs-content {
    z-index: 10;
  }
  #job-apply .cta-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 1rem);
  }
  #job-apply .cs-button-solid {
    width: 100%;
    min-width: 0;
    padding-inline: clamp(0.5rem, 1.2vw, 1rem);
    font-size: clamp(0.6875rem, 1.2vw, 1rem);
    white-space: nowrap;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 72rem) {
  #job-apply .cs-container {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  #job-apply .cs-button-box {
    /* add font size scaling to make the elements smaller so they fit horizontally */
    font-size: min(1.4vw, 1rem);
    flex-direction: row;
    flex-wrap: nowrap;
  }
  #job-apply .cs-image-group {
    font-size: min(1.1vw, 1rem);
    height: auto;
    min-height: 36.125em;
    margin-bottom: 0;
    order: initial;
    flex: 1;
  }
  #job-apply .cs-picture1 {
    height: auto;
    top: 0;
    bottom: 10.375em;
  }
  #job-apply .cs-picture2 {
    height: auto;
    top: 14.125em;
  }
  #job-apply .cta-btns {
    justify-content: initial;
  }
}
/*-- -------------------------- -->
<---       Company Profile      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #company-profile-1669 {
    padding: var(--sectionPadding);
    background-color: #fff;
  }
  #company-profile-1669 .cs-container {
    width: 100%;
    margin: auto;
  }
  #company-profile-1669 .cs-content {
    width: 100%;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #company-profile-1669 .cs-topper {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #company-profile-1669 .cs-title {
    margin: 0;
    color: var(--headerColor, #1a1a1a);
    font-size: var(--headerFontSize, clamp(2rem, 5vw, 3.0625rem));
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
  }
  #company-profile-1669 .cs-table-wrapper {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1rem 3rem rgba(14, 46, 75, 0.08);
  }
  #company-profile-1669 .cs-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }
  #company-profile-1669 .cs-table tbody,
  #company-profile-1669 .cs-table tr,
  #company-profile-1669 .cs-table th,
  #company-profile-1669 .cs-table td {
    display: block;
  }
  #company-profile-1669 .cs-table tr + tr {
    border-top: 1px solid #ddd;
  }
  #company-profile-1669 .cs-table th,
  #company-profile-1669 .cs-table td {
    padding: 1rem 1.25rem;
    line-height: 2;
    box-sizing: border-box;
  }
  #company-profile-1669 .cs-table th {
    color: #fff;
    background-color: var(--primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    vertical-align: middle;
  }
  #company-profile-1669 .cs-table td {
    overflow-wrap: anywhere;
    color: var(--bodyTextColor, #4e4b66);
    background-color: #fff;
    font-size: 0.9375rem;
  }
  #company-profile-1669 .cs-table strong {
    display: inline-block;
    color: #0e2e4b;
    font-weight: 700;
  }
  #company-profile-1669 .cs-table strong:not(:first-child) {
    margin-top: 1rem;
  }
  #company-profile-1669 .cs-table a {
    color: #0e2e4b;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
  }
  #company-profile-1669 .cs-table a:hover {
    text-decoration-thickness: 2px;
  }
  #company-profile-1669 .cs-visual-hidden {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  #company-profile-1669 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
  }
  #company-profile-1669 .cs-profile-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
  }
  #company-profile-1669 .cs-table-wrapper {
    min-width: 0;
  }
  #company-profile-1669 .cs-map-wrapper {
    width: 100%;
    min-height: clamp(22rem, 75vw, 30rem);
    position: relative;
    overflow: hidden;
    background-color: #ddd;
    box-shadow: 0 1rem 3rem rgba(14, 46, 75, 0.08);
  }
  #company-profile-1669 .cs-map {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: block;
    border: 0;
  }
}
@media only screen and (min-width: 48rem) {
  #company-profile-1669 .cs-table {
    table-layout: auto;
  }
  #company-profile-1669 .cs-table tbody {
    display: table-row-group;
  }
  #company-profile-1669 .cs-table tr {
    display: table-row;
    border: 0;
  }
  #company-profile-1669 .cs-table th,
  #company-profile-1669 .cs-table td {
    padding: 1.125rem 1.875rem 1rem;
    display: table-cell;
    border: 1px solid #ddd;
    line-height: 2.2;
  }
  #company-profile-1669 .cs-table tr:not(:first-child) th,
  #company-profile-1669 .cs-table tr:not(:first-child) td {
    border-top: 0;
  }
  #company-profile-1669 .cs-table th {
    width: 13rem !important;
    min-width: 13rem;
    text-align: center;
  }
  #company-profile-1669 .cs-table td {
    width: auto !important;
    border-left: 0;
  }
}
@media only screen and (min-width: 72rem) {
  #company-profile-1669 .cs-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  #company-profile-1669 .cs-table-wrapper,
  #company-profile-1669 .cs-map-wrapper {
    width: 100%;
    min-width: 0;
  }
  #company-profile-1669 .cs-map-wrapper {
    min-height: 100%;
  }
}
.wbr {
  word-break: keep-all !important;
}

.mt40 {
  margin-top: 40px;
}

/* Prevent native CSS smooth scroll from conflicting with jQuery smooth scroll */
html {
  scroll-behavior: auto !important;
}

/* Force hardware acceleration on the sidebar to stop repaints/flashing */
#sidebar,
#sidebarWrap {
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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