/* --------------------

TABLE OF CONTENTS 

# GLOBALS
    # DEFINE GLOBAL VARIABLES (CUSTOM PROPERTIES)
    # SET GLOBAL COLORS
    # SET GLOBAL TYPOGRAPHY
    # GLOBAL MEDIA (images, video, svg)
    # GLOBAL HELPERS
    # GLOBAL RESETS
        # ENABLE SMOOTH SCROLLING

# LAYOUT
    # CONTAINER
    # GRID SYSTEM (12 column)

# SITE STRUCTURE
    # HEADER
        # LOGO
        # SITE NAV
        # DROPDOWN MENU
    # MAIN
        # SECTIONS
    # FOOTER

# UI COMPONENTS
    # BUTTONS
    # CARDS
    # HR (HORIZONTAL RULE)
    # CODE BLOCKS

    (WE WILL ADD MORE HERE)

# CUSTOM SITE STYLING (OPINIONATED)
    # BODY GRID LAYOUT SYSTEM (header, main, and footer)
    # CUSTOM HERO STYLING
    # CUSTOM PAGE LAYOUT - 2 COLUMNS: ASIDE + MAIN CONTENT
    # STICKYBOX
    # JKC TYPE BLOCK

   # ANIMATION
    # REGULAR ON PAGE LOAD ANIMATION
    # SCROLL TRIGGRED ANIMATION 
----------------------- */

/* ------------------
        GLOBALS 
--------------------- */

/* DEFINE GLOBAL VARIABLES */
:root {

  /* DEFINE BASE COLORS */
  --color-white: #FDFDFD;
  --color-black: #121228;
  --color-black-80: rgb(0 0 0 / .8);

  --color-grey-200: rgb(0 0 0 / .2);

  /* main blue */
  --color-blue-900: #043170;
  --color-blue-950: #042854;
  --color-lightblue: #B2C8D6;

  /* light background boxes & title heading box*/
  --color-gray-100: #F2F2F2;
  /* buttons */
  --color-gray-200: #D9D9D9;
  /* subheader */
  --color-gray-300: #b3b0b0ec;
  --color-gray-600: #7f7a7aa1;

  --color-beige-200: #F0BA95;
  --color-brown-400: #AA603F;

  --color-pink-300: #D38A8F;
  --color-orange-300: #ECB069;

  --color-gold-300: #CA9605;
  --color-gold-400: #D8A008;
  --color-gold-600: #9E7607;



  /* DEFINE SEMANTIC COLORS */
  --color-body-background: var(--color-white);
  --color-body-text: var(--color-black);
  --color-body-text-dark: var(--color-blue-900);

  --color-primary: var(--color-blue-400);
  --color-primary-dark: var(--color-blue-900);
  --color-secondary: var(--color-gray-600);

  /* ACTION COLORS */
  --color-links: var(--color-blue-900);
  --color-links-hover: var(--color-gold-400);
  --color-links-light: var(--color-gray-600);

  /* SECTION SPECIFIC */
  --color-siteheader-background: transparent;
  --color-siteheader-links: var(--color-black-80);
  --color-siteheader-hover: var(--color-gold-400);
  --color-hero-background: var(--color-gray-100);
  --color-sitefooter-background: transparent;

  /* BORDERS */
  --color-border: var(--color-grey-200);
  --border-radius: 5px;
  --border-thickness: .5px;

  /* SIZING UNITS */
  --unit-2xs: 0.25rem;
  --unit-xs: 0.5rem;
  --unit-s: 1rem;
  --unit-m: 1.5rem;
  --unit-l: 2rem;
  --unit-xl: 3rem;
  --unit-2xl: 4rem;
  --unit-3xl: 6rem;
  --container-width: 1100px;



  /* IMPORT GOOGLE FONTS */


  /* <weight>: Use a value from 300 to 700 */
  /* <uniquifier>: Use a unique and descriptive class name */

  .cormorant {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }


  .nunito-sans {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
  }

  /* GLOBAL FONTS */

  --font-body: Lato,
  Nunito Sans,
  arial,
  "helvetica neue",
  sans-serif;

  --font-headings: Orpheuspro,
  Cormorant,
  serif;

}

/* SET GLOBAL COLORS */
body {
  background-color: var(--color-body-background);
  color: var(--color-body-text);
}

/* HEADINGS */
h1,
h2,
h3 {
  color: var(--color-body-text-dark);

  /* ADD SUPPORT FOR TEXTWRAP BALANCE */
  text-wrap: balance;
}

/* LIMIT THE NUMBER OF CHARACTERS PER LINE FOR ALL PARAGRAPHS */
p {
  max-inline-size: 66ch;
}

/* REMOVE WIDOWS FOR ALL PARAGRAPHS AND LIST ITEMS*/
p,
li {
  text-wrap: pretty;
}

ul {
  list-style-type: none;
  text-decoration-line: none;
}

/* LINKS */
a {
  color: var(--color-links);
  text-decoration: none;

  /* STYLE THE UNDERLINE */
  text-decoration-color: var(--color-links-light);
  text-underline-offset: .135em;
  text-decoration-thickness: .1em;
}

a:hover {
  color: var(--color-links-hover);
}

/* GLOBAL TYPOHRAPHY */
body {
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.4;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headings);
}

/* GLOBAL MEDIA */

/* IMAGES (Responsive)
 Responsive on small screens
 Do not stretch too large (beyond the orignal)
 on large screens */
img {
  max-width: 100%;
  height: auto;
}

/* GLOBAL HELPERS */

.text-centered {
  text-align: center;
}

/* CENTER PARAGRAPHS INSIDE CENTERED PARENTS */
.text-centered p {
  margin-inline: auto;
}

/* HIDE CONTENT VISUALLY (BUT KEEP FOR SEO AND ACCESSIBILITY) */
.hide-visually,
.visually-hidden,
.screen-reader-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* HIDE ON SMALL SCREENS */
.hide-mobile,
.hide-small-screens {
  @media (width < 768px) {
    display: none !important;
  }
}

/* GLOBAL RESETS */

/* Remove the default 8pm margin on body */
body {
  margin: 0;
}

/* Set all elements to box sizing border box */
* {
  box-sizing: border-box;
}

/* SMOOTH SCROLLING */
html {
  scroll-behavior: smooth;
}

/* ADD OFFSET TO ALL INLINE ANCHOR LINKS */
:target {
  scroll-margin-top: var(--unit-m);
}


/* ------------------
      LAYOUT 
--------------------- */

/* CONTAINER */

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--unit-s);
}


/* GRID SYSTEM (12 column) */

.row {
  --grid-gap: var(--unit-s);
}

.row>* {
  margin-block-end: var(--grid-gap);
}

/* two column row */
@media (width < 768px) {
  .row.two-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
  }

}

/* NEW width SYNTAX (updated from min-width: 768px)  */
@media (width >=768px) {

  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }

  /* COMMONLY USED SEMANTIC COLUMNS */
  .one-whole {
    grid-column: auto / span 12;
  }

  .one-half {
    grid-column: auto / span 6;
  }

  .one-third {
    grid-column: auto / span 4;
  }

  .two-thirds {
    grid-column: auto / span 8;
  }

  .one-fourth {
    grid-column: auto / span 3;
  }

  .three-fourths {
    grid-column: auto / span 9;
  }

  /* SWAP (REVERSE COLUMNS) - WORKS ONLY w/ 2 COLUMNS */
  .row.swapped>*:first-child {
    order: 2;
  }

  .row.swapped>*:last-child {
    order: 1;
  }

  /* CENTERED COLUMNS */
  .one-half.centered {
    grid-column-start: 4;
  }

  .two-thirds.centered {
    grid-column-start: 3;
  }

  /* 12 COLUMN CLASS-BASED GRID SYSTEM */
  .col-1 {
    grid-column: auto / span 1;
  }

  .col-2 {
    grid-column: auto / span 2;
  }

  .col-3 {
    grid-column: auto / span 3;
  }

  .col-4 {
    grid-column: auto / span 4;
  }

  .col-5 {
    grid-column: auto / span 5;
  }

  .col-6 {
    grid-column: auto / span 6;
  }

  .col-7 {
    grid-column: auto / span 7;
  }

  .col-8 {
    grid-column: auto / span 8;
  }

  .col-9 {
    grid-column: auto / span 9;
  }

  .col-10 {
    grid-column: auto / span 10;
  }

  .col-11 {
    grid-column: auto / span 11;
  }

  .col-12 {
    grid-column: auto / span 12;
  }

  /* PUSHES */
  .push-1 {
    grid-column-start: 2;
  }

  .push-2 {
    grid-column-start: 3;
  }

  .push-3 {
    grid-column-start: 4;
  }

  .push-4 {
    grid-column-start: 5;
  }

  .push-5 {
    grid-column-start: 6;
  }

  .push-6 {
    grid-column-start: 7;
  }

  .push-7 {
    grid-column-start: 8;
  }

  .push-8 {
    grid-column-start: 9;
  }

  .push-9 {
    grid-column-start: 10;
  }

  .push-10 {
    grid-column-start: 11;
  }

  .push-11 {
    grid-column-start: 12;
  }
}


/* FOR DEMO PURPOSES ONLY */
.row.demo>* {
  background-color: var(--color-gray-100);
  text-align: center;
  padding: var(--unit-s);
}

/* ------------------
  SITE STRUCTURE 
--------------------- */

/* SITE HEADER */
.site-header {

  /* FIX HEADER TO BE ON TOP OF HERO ITEMS */
  position: relative;
  z-index: 100;

  background-color: var(--color-siteheader-background);
  padding-block: var(--unit-s);
  padding-inline: var(--unit-s);


  /* DISPLAY LOGO ON LEFT AND NAV ON RIGHT */
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  gap: var(--unit-s);
  flex-wrap: wrap;
}

/* REMOVE HEADER PADDING IF IT HAS A CONTAINER */
.site-header:has(.container) {
  padding-inline: 0;
}

/* LOGO STYLING */
.site-header .logo {
  display: flex;
  align-items: center;
  gap: var(--unit-s);
}

.site-header .logo svg {
  max-height: 50px;
  min-width: 50px;
}

/* CHRS COYIER'S FIX FOR GAP UNDR INLINE IMAGES AND SVG*/
.site-header .logo img,
.site-header .logo svg {
  vertical-align: middle;
}

.site-header .logo h1 {
  font-size: 1.3125rem;
  margin: 0;
}

.site-header .logo a {
  text-decoration: none;
}

/* MAIN SITE NAV */

/* DROPDOWN MENU FOR CRAFTED TREATMENTS HOME PAGE*/
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: var(--color-white);
  padding: 14px 14px 4px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  /* border: 1px solid black; */
}

/* .navbar a:hover, */
.dropdown:hover .dropbtn {
  background-color: var(--color-blue-900);
  /* border: 1px solid brown; */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-blue-900);
  min-width: 160px;
  /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
  z-index: 1;
  padding: 4px 14px 4px 8px;
  /* translate: -16px 0; */
  /* border: 1px solid salmon; */
}

.site-nav[data-menustate="open"] .dropdown-content {

  padding: 4px 8px;
  translate: 0 0;
}

.site-nav[data-menustate="open"] .dropdown .dropbtn {
  padding: 14px 9px;

}

.dropdown-content li {
  float: none;
  color: var(--color-blue-900);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  /* border: 1px solid gray; */
}

.dropdown-content a:hover {
  background-color: transparent;
  color: var(--color-gold-400);
  /* border: 1px solid green; */
}

.dropdown:hover .dropdown-content {
  display: block;
}

.site-nav ul,
.dropbtn {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--unit-s);
  flex-wrap: wrap;
}

.site-nav a,
.dropbtn {
  color: var(--color-white);
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: var(--unit-xs);
  padding-block-start: calc(var(--unit-xs) + .1em);
  /* border: 1px solid hotpink; */
}

.site-nav a:hover,
.dropbtn:hover {
  color: var(--color-siteheader-hover);
  text-decoration: none;
  font-weight: bold;
  display: block;
  /* padding: var(--unit-xs);
  padding-block-start: calc(var(--unit-xs) + .1em); */
}

/* SHOW MENU BUTTON ON HIGHER LAYER WHEN NAV IS OPEN */
.site-nav .menubutton {
  position: relative;
  z-index: 200;
  border: none;
  font-size: inherit;
  font-family: inherit;
  padding: var(--unit-xs);
  margin-block-start: var(--unit-xs);
  background-color: transparent;
}

/* SMALL SCREENS: SHOW MENU BUTTON, HIDE NAV */
.site-nav .menubutton {
  display: block;
}

.site-nav ul {
  display: none;
}

/* BIG SCREENS:  HIDE MENU BUTTON, SHOW NAV*/
@media (width >=768px) {
  .site-nav .menubutton {
    display: none;
  }

  .site-nav ul {
    display: flex;
  }
}

/* SMALL SCREENS ONLY: ENABLE OVERLAY NAV */
@media (width < 768px) {

  .site-nav[data-menustate] ul {
    display: grid;
    align-content: center;
    justify-content: center;
    position: fixed;
    z-index: 100;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-blue-900);
    /* transition: translate 0.3s ease-out; */
  }

  .site-nav[data-menustate] a {
    color: var(--color-white);
  }

  .site-nav[data-menustate="open"] ul {
    translate: 0 0;
    animation: openMenuAnimation .3s forwards;
  }

  .site-nav[data-menustate="closed"] ul {
    translate: 100% 0;
    animation: closedMenuAnimation .3s forwards;
  }

  @keyframes openMenuAnimation {
    0% {
      translate: 100% 0;
    }

    100% {
      translate: 0 0;
    }
  }

  @keyframes closedMenuAnimation {
    0% {
      translate: 0 0;
    }

    100% {
      translate: 100% 0;
    }
  }

  /* ENABLE SVG ANIMATION FOR THE NAVICON */
  .site-nav[data-menustate] .simple-navicon rect {
    transition: all .3s ease-out;
    /* fill: var(--color-white); */
  }

  /* CHANGE COLOR OF THE SVG NAVICON WHEN MENU IS OPEN */
  .site-nav[data-menustate="open"] .simple-navicon rect {
    fill: var(--color-white);
  }

  /* ANIMATE NAVICON LINES TO AN X WHEN OPEN */
  .site-nav .simple-navicon {
    display: block;

  }

  .site-nav .simple-navicon rect {
    transform-origin: center;
    width: 100%;
    fill: var(--color-gold-400);
  }

  .site-nav[data-menustate="open"] .simple-navicon {
    position: fixed;
    top: calc(var(--unit-s) + var(--unit-s));
    right: calc(var(--unit-s) + var(--unit-xs));
    z-index: 950;
  }

  .site-nav[data-menustate="open"] .simple-navicon-top {
    rotate: 45deg;
    translate: -21% 24%;
  }

  .site-nav[data-menustate="open"] .simple-navicon-middle {
    opacity: 0;
  }

  .site-nav[data-menustate="open"] .simple-navicon-bottom {
    rotate: -45deg;
    translate: -21% -24%;
  }

}


/* LIGHT THEME FOR SITE NAV (IF NEEDED) */
.site-nav.light {

  .topnav a,
  a,
  .dropbtn,
  .dropdown .dropbtn {
    color: var(--color-blue-900);

    &:hover {
      color: var(--color-gold-400)
    }
  }

  .dropdown-content,
  .dropdown:hover .dropbtn {
    background-color: var(--color-white);
  }


  &.site-nav[data-menustate="open"] {

    .topnav a,
    a,
    .dropbtn,
    .dropdown .dropbtn {
      color: var(--color-white);

      &:hover {
        color: var(--color-white)
      }
    }

    .dropdown-content,
    .dropdown:hover .dropbtn {
      background-color: var(--color-blue-900);
    }

  }

}



/* SITE MAIN */
.site-main {
  background-color: transparent;
}

/* STYLING FOR ALL SECTIONS */
section {
  padding-block: var(--unit-m);
}




/* SITE FOOTER */
.site-footer {
  background-color: var(--color-sitefooter-background);
  padding-block: var(--unit-2xl);
  padding-inline: var(--unit-s);
}

/* REMOVE FOOTER PADDING IF IT HAS A CONTAINER */
.site-footer:has(.container) {
  padding-inline: 0;
}

/* ------------------
  UI COMPONENTS 
--------------------- */

/* BUTTONS */
.button {
  background-color: var(--color-links);
  color: var(--color-white);
  padding: var(--unit-s) var(--unit-m);
  margin-block: var(--unit-2xs);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;
}

.button:hover {
  background-color: var(--color-links-hover);
  color: var(--color-white);
}

/* CARDS */
.card {
  background-color: var(--color-white);
  border: var(--border-thickness) solid var(--color-border);
  display: inline-block;
  padding: var(--unit-s);
  border-radius: var(--border-radius);
  text-transform: uppercase;
  /* border: 1px solid red; */
}

/* .color-swatch {
  --_swatch-color: grey;
  background-color: var(--_swatch-color);
  width: 150px;
  height: 150px;
} */

/* HR */
hr {
  border: none;
  border-bottom: var(--border-thickness) solid var(--color-border);
  margin: var(--unit-xl) 0;
}

/* Code Blocks */
pre:has(code) {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-inline: var(--unit-m);
  border-radius: var(--border-radius);
  white-space: pre-wrap;
}

/* SWIPER CSS STYLING */

.swiper {
  padding-block-end: 2rem;
  text-align: center;
}


.swiper-wrapper {}

/* MOVE SWIPER ARROWS OUTSIDE OF SWIPER */
.swiper-button-prev,
.swiper-button-next {
  background-color: var(--color-white);
  padding: var(--unit-xs);
  border-radius: 100%;
  /* border: 1px solid rebeccapurple; */
}

/* TEMP WAY TO MOVE ARROWS OUTSIDE OF SWIPER */
.swiper {
  --swiper-navigation-color: var(--color-white);
  --swiper-pagination-bullet-inactive-color: var(--color-gray-200);
  --swiper-pagination-color: var(--color-white);
  padding-inline: 50px;
  position: relative;
}


/* TEMP SOLUTION COVERS THE CONENT WITH A WHITE BG, FIX IN THE FUTURE IF THERE IS TIME */
.swiper-button-prev {
  translate: -4px -50%;
  background-color: var(--color-blue-900);
  height: 100%;
  border-radius: 0;
  top: 0;
  left: 0;
}

.swiper-button-next {
  translate: 4px -50%;
  background-color: var(--color-blue-900);
  height: 100%;
  border-radius: 0;
  top: 0;
  right: 0;
}

/* REMOVE COLOR CARD WIDTHS AND HEIGHTS WHEN INSIDE A SWIPER SLIDE */
.swiper-slide .card {
  display: block;
}

.swiper-slide .color-swatch {
  width: 100%;
  min-height: 150px;
}


/* ------------------
  CUSTOM SITE STYLING 
--------------------- */

/* PUSH THE FOOTER TO THE BOTTOM BY DEFAULT */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

/* TO FIX OVERFLOW WORD BREAK */
body>* {
  min-width: 0;
}

/* NUDGE THE NAV ITEMS DOWN TO ALIGN WITH IMAGE LOGO TEXT */
.site-header .site-nav a {
  padding-block-start: calc(var(--unit-xs) + .35em);
}

/* CUSTOM HERO STYLING */

.hero {
  background-color: var(--color-hero-background);
  padding-block-start: var(--unit-3xl);
  padding-block-end: calc(50px + var(--unit-3xl));
  padding-inline: var(--unit-s);
  position: relative;
  min-height: 100svh;
  align-content: end;

  /* display: grid;
  justify-content: start;
  align-items: center; */

}

.hero .container {
  display: grid;
  justify-content: start;
  align-items: center;
}

.hero:has(.container) {
  padding-inline: 0;
}

.hero h1 {
  font-size: clamp(2.5em, 4vw, 4em);
  margin-block: 0;
  overflow-wrap: break-word;
}

.hero p {
  text-wrap: balance;
}


.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero-content {
  background-color: transparent;
  padding: var(--unit-l);
  color: var(--color-white);
  grid-column: 2 / 8;
  grid-row: 4 / 13;
  position: relative;
  z-index: 5;
}


/* SPIN TEXT IN HERO */

.spin {
  color: var(--color-pink);
}

.spin:after {
  content: "";
  animation: spin 20s linear infinite;

  /* animation-duration: 10s; */
}

@keyframes spin {
  0% {
    content: "Customized massage cupping therapy ear seeds & waxing tailored in a serene space";

  }

  20% {
    content: "Personalized massage with flowing, rhythmic strokes and adjustable pressure to ease tension, deepen relaxation, and restore balance.";
  }

  40% {
    content: "Hot Towels  Bed Warmer  Scalp Massage  DoTerra Deep Blue";
  }

  60% {
    content: "Cupping Therapy's gentle suction improves circulation and, with massage, enhances relaxation and tissue mobility.";
  }

  80% {
    content: "Constantly Learning Compassionate Transparent Approchable Intuitive";
  }

  100% {
    content: "Ear Seed Therapy uses tiny seeds on specific ear acupressure points to help ease stress, headaches, and discomfort naturally.";
  }
}



/* CUSTOM PAGE LAYOUT - 2 COLUMNS: ASIDE + MAIN CONTENT */


@media (width >=768px) {

  .pagelayout-wrapper-twocolumn {
    display: flex;
    gap: var(--unit-l);
  }

  .pagesection-aside {
    width: 25%;
  }

  .pagesection-maincontent {
    width: 75%;
  }

}

/* STICKYBOX */
/* NOTE NEEDED ON SMALL SCREENS, SO IT IS SET INSIDE OF A MEDIA QUERY SO IT ALLOWS THE OVERLAY MENU TO RENDER ON TOP ON SMALL SCREENS */
@media (width >=768px) {
  .stickybox {
    position: sticky;
    top: var(--unit-m);
  }
}

/* JKC TYPE BLOCK */
.jkc-eyebrow {
  font-size: .875rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity: .5;
  line-height: 1;
}

.jkc-headline {
  font-size: 2.5rem;
  margin-block: var(--unit-s);
  line-height: 1.1;
  text-transform: uppercase;
}

.jkc-subhead {
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  margin-block: var(--unit-xs);
  opacity: .8;
  line-height: 1.2;
}

/* ------------------
  ANIMATION 
--------------------- */

/* REGULAR ON PAGE ANIMATION */

.slide-from-top-and-fade-in {
  animation-name: slide-from-top-and-fade-in;
  animation-duration: .1s;
  animation-timing-function: cubic-bezier(0, .5, .5, 1);
  animation-fill-mode: forwards;
  opacity: 0;
  translate: 0 -40px;

}

@keyframes slide-from-top-and-fade-in {
  0% {
    opacity: 0;
    translate: 0 -40px;
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}


.slide-from-left-and-fade-in {
  animation-name: scale-and-fade-in;
  animation-duration: .2s;
  animation-timing-function: cubic-bezier(0, 1, 0, 1);
  animation-fill-mode: forwards;
  opacity: 0;
  translate: -20px 0;

}

@keyframes slide-from-left-and-fade-in {
  0% {
    opacity: 0;
    translate: -20px;
  }

  100% {
    opacity: 1;
    translate: 0 0;
  }
}

.delay-0 {
  animation-delay: 0s;
}

.delay-1 {
  animation-delay: .1s;
}

.delay-2 {
  animation-delay: .2s;
}

.delay-3 {
  animation-delay: .3s;
}

.delay-4 {
  animation-delay: .5s;
}

.delay-5 {
  animation-delay: .7s;
}

.delay-6 {
  animation-delay: .9s;
}



/* SCROLL-TRIGGERED ANIMATION */

/* FIX SCROLL BAR ON ALL SCROLL ANIMATION SECTIONS */
section:has(.observe-me) {
  overflow-x: clip;
}

/* on scroll slide-in from the left */
.observe-me.onscroll-slide-in-from-left {

  /* Simple way */
  opacity: 0;
  translate: -20px 0;
  transition: all .5s ease-out .2s;

  /* Complicated way */
  /* --duration: .5s;
  --delay: .2s;
  opacity: 0;
  translate: -20px 0;
  transition: 
      translate var(--duration) ease-out var(--delay), 
      opacity var(--duration) linear var(--delay); */

}

.observe-me[data-viewstate="active"].onscroll-slide-in-from-left {
  opacity: 1;
  translate: 0 0;
}

/* on scroll slide-in from the right */
.observe-me.onscroll-slide-in-from-right {
  opacity: 0;
  translate: 20px 0;
  transition: all .5s ease-out .2s;
}

.observe-me[data-viewstate="active"].onscroll-slide-in-from-right {
  opacity: 1;
  translate: 0 0;
}

.observe-me.delay-0 {
  transition-delay: 0s;
}

.observe-me.delay-1 {
  transition-delay: 0.1s;
}

.observe-me.delay-2 {
  transition-delay: 0.2s;
}

.observe-me.delay-3 {
  transition-delay: 0.3s;
}

.observe-me.delay-4 {
  transition-delay: 0.5s;
}

.observe-me.delay-5 {
  transition-delay: 0.7s;
}

.observe-me.delay-6 {
  transition-delay: 0.9s;
}




/* -----------JKC WELLNESS------------- */

.site-header.jkc {
  position: absolute;
  width: 100%;
  background-color: transparent;
  z-index: 10;
}

.split-border {
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
  margin-top: 1em;
  /* margin-bottom: 1em; */


  .jkc-eyebrow-hero.container {
    font-size: var(--unit-s);
    font-family: nunito-sans, sans-serif;
    font-weight: lighter;
  }

  .split-content {
    padding-inline: 50px;
    /* padding-block-start: 1.6em; */

    .button {
      /* margin-bottom: -50%; */
      translate: 0 60%;
    }

    .hero-subtitle {
      font-size: var(--unit-l);
      font-family: cormorant, serif;
      max-inline-size: 25ch;
    }

  }

}

.split-border-top {
  display: grid;
  grid-template-columns: 25px auto 25px;

  .split-border-left {
    border-top: 1px solid var(--color-white)
  }

  .split-border-right {
    border-top: 1px solid var(--color-white);
  }

  h2 {
    margin: 0;
    padding: 0;
    line-height: 1;
    translate: 0 -50%;
    padding-inline: 25px;
  }

}

.split-border-bottom {
  display: grid;
  grid-template-columns: 25px auto 1fr;

  .split-border-left {
    border-bottom: 1px solid var(--color-white)
  }

  .split-border-right {
    border-bottom: 1px solid var(--color-white);
  }

  a {
    margin: 0;
    padding: 1.6em;
    margin-bottom: -1.5em;
    line-height: 1;
    translate: 0 10%;
    padding-inline: 70px;
  }

}



.hero-title,
.hero-subtitle {
  padding-top: 2em;
  align-items: center;
  position: relative;
  color: var(--color-white);
  text-transform: uppercase;
}

.button.main {
  align-items: center;
  /* display: block; */
  position: relative;
  background-color: var(--color-gold-400);
}

.button.main:hover {
  align-items: center;
  /* display: block; */
  position: relative;
  background-color: var(--color-blue-900);
}


/* HERO CONTENT  */

.hero-subpage {
  background-color: transparent;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 100px);
  padding: 5em;
  /* border: 1px solid red; */

}

.hero-content-subpage {
  background-color: var(--color-lightblue);
  padding: var(--unit-xl);
  grid-column: 1 / 9;
  grid-row: 1 / 7;
  z-index: 60;
  /* border: 1px solid blue; */
  border-radius: var(--border-radius);
  clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
}

.jkc-eyebrow-hero.ear {
  color: var(--color-blue-950);

}

.jkc-eyebrow.regerts {

  color: var(--color-blue-950);
  /* border: 1px solid red; */

}

.hero-image {
  max-width: 100%;
  height: auto;
  grid-column: 7 / 13;
  grid-row: 2 / 5;
  z-index: 50;
  /* border: 1px solid orange; */
  border-radius: var(--border-radius);
}


.jkc-headline-hero {
  color: var(--color-blue-900);
  font-size: var(--unit-2xl);
  text-transform: uppercase;
  line-height: 1.1;
  display: inline-block;

}

.jkc-headline-hero.cupping {
  color: var(--color-gold-400);
  font-size: var(--unit-2xl);
  text-transform: uppercase;
  line-height: 1.1;
}

.jkc-headline-hero-white {
  /* color: var(--color-gold-400); */
  font-size: var(--unit-2xl);
  line-height: 1.1;
  text-transform: uppercase;
}


.jkc-headline-hero-white.cupping {
  color: var(--color-white);
  font-size: 1em;
  text-transform: uppercase;
  line-height: 1.1;

}

.jkc-headline.feet {
  font-size: 2em;
  text-transform: uppercase;
  line-height: 1.1;
}

.jkc-headline-gold.feet {
  font-size: 1em;
  text-transform: uppercase;
  line-height: 1.1;
}

.button-hero {
  font-weight: bold;
  font-size: var(--unit-s);
  background-color: var(--color-white);
  color: var(--color-blue-900);
  padding: var(--unit-l) var(--unit-3xl);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;
}

.button-hero:hover {
  font-weight: bold;
  font-size: var(--unit-s);
  background-color: var(--color-gold-400);
  color: var(--color-gray-200);
  padding: var(--unit-l) var(--unit-3xl);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;
}

.jkc-eyebrow-hero {
  font-size: .875rem;
  font-weight: bold;
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 1;
  padding-top: 2em;
  letter-spacing: .15em;
}

.jkc-headline-gold {
  color: var(--color-gold-400);
  font-size: 2.5rem;
  margin-block: var(--unit-s);
  line-height: 1.1;
  text-transform: uppercase;
}

.jkc-headline-white {
  color: var(--color-white);
  font-size: 2.5rem;
  margin-block: var(--unit-s);
  line-height: 1.1;
  text-transform: uppercase;
}

.jkc-headline.ear,
.jkc-headline-gold.ear {
  font-size: 2.2rem;

}


.jkc-headline-hero-gold {
  color: var(--color-gold-400);
  font-size: 3rem;
  margin-block: var(--unit-s);
  line-height: 1.1;
  text-transform: uppercase;
}

.text-gold {
  color: var(--color-gold-400);
}

.text-gold.uppercase {
  text-transform: uppercase;
}


/* @media (width < 768px) {


  .hero-subpage {

    grid-template-columns: 1em 1em 1em repeat(6, auto) 1em 1em 1em;
    grid-template-rows: 1em 1em repeat(8, auto) 1em 1em;

    .hero-image {
      grid-column: 1 / 13;
      grid-row: 1 / 7;

    }

    .hero-content-subpage {
      background-color: var(--color-lightblue);
      padding: var(--unit-xl);
      grid-column: 2 / 12;
      grid-row: 4 / 13;
      z-index: 60;
      border-radius: var(--border-radius);
      clip-path: none;
    }

    .jkc-headline-hero {
      font-size: 3em;
    }

    .jkc-headline-hero-white {
      font-size: 1.2em;

    }
  }
} */


@media (width < 768px) {

  .hero-subpage {

    grid-template-columns: 1em 1em 1em repeat(6, auto) 1em 1em 1em;
    grid-template-rows: 1em 1em repeat(8, auto) 1em 1em;

    .hero-image {
      grid-column: 1 / 13;
      grid-row: 1 / 7;
    }

    .hero-content-subpage {
      background-color: var(--color-lightblue);
      padding: var(--unit-xl);
      grid-column: 2 / 12;
      grid-row: 4 / 13;
      z-index: 60;
      border-radius: var(--border-radius);
      clip-path: none;
    }

  }
}

/* CUSTOM BUTTONS */
.button-jkc {
  background-color: var(--color-links);
  color: var(--color-white);
  padding: var(--unit-s) var(--unit-m);
  margin-block: var(--unit-2xs);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;

}

.button:hover {
  background-color: var(--color-links-hover);
  color: var(--color-white);
}

/* FOOTER BUTTONS */
.button-footer {
  background-color: var(--color-links);
  color: var(--color-white);
  padding: var(--unit-s) var(--unit-m);
  margin-block: var(--unit-2xs);
  font-size: 1em;
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;

}

.button-footer:hover {
  background-color: var(--color-links-hover);
  color: var(--color-white);
}


/* RESPONSIVE NAV - UNDERLINE */

.topnav {
  /* background-color: #333; */
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: var(--color-white);
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
  font-size: 16px;
  border-bottom: 3px solid transparent;
}

.topnav a:hover {
  border-bottom: 3px solid var(--color-links);
}

.topnav a.active {
  border-bottom: 3px solid var(--color-links-hover);
}


/* CARDS HOVER */
.image-hover {
  position: relative;
  width: 100%;

  img {
    width: 100%;
  }
}

/* .image {
  display: block;
  width: 100%;
  height: auto;
} */

.overlay {
  position: absolute;
  /* padding-bottom: 1em; */
  bottom: 0;
  background: #fff;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .4s ease;
  display: flex;
  justify-items: center;
  justify-content: center;
  font-size: .7em;
  text-align: center;

}

.overlay a {
  text-decoration: none;
}

.overlay h4 {
  color: var(--color-links);
}


.overlay h4:hover {
  color: var(--color-links-hover);
}

.image-hover:hover .overlay {
  opacity: 4;
}


/* FEATURES CARD SECTION STYLING */

#features {
  margin-top: -50px;
  position: relative;
  z-index: 5;

}


/* SERVICES CARDS */


.card {
  box-shadow: 0 0 15px 7px rgba(118, 116, 116, 0.127);
  /* cursor: pointer; */
  transition: 0.4s;

}

/* FEATURES CARDS*/
#features .card {
  box-shadow: 0 0 15px 7px rgba(118, 116, 116, 0.127);
  /* border: 1px solid red; */

  .image-hover {
    aspect-ratio: 1;
    /* overflow: hidden; */
    width: 100%;

  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/* CUSTOM BOX LAYOUT */
/* -----HOME PAGE----- */

.box-layout {
  /* background: pink; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(28, 90px);
  /* grid-template-rows: repeat(12, 1fr minmax(2em, auto)); */
  /* grid-template-rows: repeat(auto-fit, minmax(min(75px, 100%), 1fr)); */

}

.box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.feature-row {
  display: flex;
  gap: var(--unit-l);
}



.box-image,
.box-image-2 {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}




/* ------ MASSAGE PAGE ------ */
.treatment-headline {
  font-size: var(--unit-l);
  margin-block: var(--unit-m);
  text-transform: uppercase;
  letter-spacing: 2px;
}


.text-treatment {
  font-size: var(--unit-xl);
  text-transform: uppercase;
}

.underline {
  font-size: clamp(2rem, 4vw, 3rem);
  padding-left: 1em;
  position: relative;

}


.about-title.underline::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 30%;
  height: 100%;
  box-shadow: inset 0 -0.55em 0 #eeeeee;
  z-index: -1;
}



.btn-treatment {
  margin-top: 2em;
  padding: var(--unit-s) var(--unit-l);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 15px 7px rgba(118, 116, 116, 0.127);
  /* border: 1px solid red; */
}


.btn-treatment {
  margin-top: 2em;
  padding: var(--unit-s) var(--unit-l);
  display: inline-block;
  text-decoration: none;
  border-radius: var(--border-radius);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 15px 7px rgba(118, 116, 116, 0.127);
  /* border: 1px solid red; */
}



/* LAYOUT 10 FACIAL CUPPING */
.waxing-text {
  line-height: 1.9;
}


.box-layout-11 {
  grid-template-rows: repeat(31, 90px);

  /* border: 1px solid green; */

  .about-text {
    grid-column: 2 / 7;
    grid-row: 9 / 14;
    z-index: 60;
  }

  .about-text.treatment {
    grid-column: 8 / 12;
    grid-row: 2 / 7;
  }

  .jkc-eyebrow.about {
    color: var(--color-blue-950);
  }



  /* kea */
  .cupping-facial {
    grid-column: 2 / 7;
    grid-row: 2 / 7;
    z-index: 50;
  }

  /* .cups-facial {
    grid-column: 9 / 13;
    grid-row: 7 / 10;
    z-index: 50;
    box-shadow: 0 0 15px 7px rgba(118, 116, 116, 0.127);
  } */

  .box-blue {
    grid-column: 1 / 7;
    grid-row: 16 / 22;
    z-index: 30;
    background-color: var(--color-lightblue);
  }


  .box-blue.two {
    grid-column: 2 / 13;
    grid-row: 1 / 8;
    z-index: 30;
    background-color: var(--color-lightblue);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 35% 100%);
  }

  .box-blue.three {
    grid-column: 1 / 13;
    grid-row: 4 / 22;
    z-index: 20;
    background-color: var(--color-gray-100);
  }

  .box-blue.four {
    grid-column: 4 / 13;
    grid-row: 15 / 22;
    z-index: 20;
    background-color: var(--color-white);
  }

  .box-blue.five {
    grid-column: 1 / 13;
    grid-row: 22 / 32;
    z-index: 20;
    background-color: var(--color-blue-950);
  }

  .box-image.me-about {
    grid-column: 7 / 11;
    grid-row: 17 / 22;
    z-index: 50;
  }

  .about-text.me-about {
    grid-column: 2 / 6;
    grid-row: 17 / 21;
  }

  .box-image.blue-box {
    grid-column: 3 / 7;
    grid-row: 23 / 30;
    z-index: 50;
  }


  .about-text.blue-title {
    grid-column: 6 / 13;
    grid-row: 24 / 24;
    color: var(--color-gold-600)
  }

  .about-text.blue-box {
    grid-column: 8 / 11;
    grid-row: 25 / 28;
    color: var(--color-white);

  }

  .lady-line-illustration {
    grid-column: 8 / 12;
    grid-row: 9 / 14;
    z-index: 90;

    img {
      opacity: .4;
      width: 100%;
      height: 100%;

    }
  }



}

@media (width < 1040px) {
  .box-layout-11 {
    grid-template-rows: repeat(30, 90px);

    /* border: 1px solid green; */

    .about-text {
      grid-column: 2 / 7;
      grid-row: 10 / 15;
      z-index: 60;
      /* background-color: turquoise; */
    }

    .about-text.treatment {
      grid-column: 8 / 12;
      grid-row: 2 / 7;
    }

    .jkc-eyebrow.about {
      color: var(--color-blue-950);
    }



    /* kea */
    .cupping-facial {
      grid-column: 2 / 7;
      grid-row: 2 / 8;
      z-index: 50;
    }

    /* .cups-facial {
    grid-column: 9 / 13;
    grid-row: 7 / 10;
    z-index: 50;
    box-shadow: 0 0 15px 7px rgba(118, 116, 116, 0.127);
  } */

    .box-blue {
      grid-column: 1 / 7;
      grid-row: 17 / 23;
      z-index: 30;
      background-color: var(--color-lightblue);
    }


    .box-blue.two {
      grid-column: 2 / 13;
      grid-row: 1 / 9;
      z-index: 30;
      background-color: var(--color-lightblue);
      clip-path: polygon(0 0, 100% 0%, 100% 100%, 35% 100%);
    }

    .box-blue.three {
      grid-column: 1 / 13;
      grid-row: 4 / 22;
      z-index: 20;
      background-color: var(--color-gray-100);
    }

    .box-blue.four {
      grid-column: 4 / 13;
      grid-row: 16 / 23;
      z-index: 20;
      background-color: var(--color-white);
    }

    .box-blue.five {
      grid-column: 1 / 13;
      grid-row: 23 / 31;
      z-index: 20;
      background-color: var(--color-blue-950);
    }

    .box-image.me-about {
      grid-column: 7 / 12;
      grid-row: 18 / 23;
      z-index: 50;

      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .about-text.me-about {
      grid-column: 2 / 6;
      grid-row: 18 / 22;
    }

    .box-image.blue-box {
      grid-column: 3 / 7;
      grid-row: 24 / 31;
      z-index: 50;
    }


    .about-text.blue-title {
      grid-column: 6 / 13;
      grid-row: 25 / 25;
      color: var(--color-gold-600)
    }

    .about-text.blue-box {
      grid-column: 8 / 11;
      grid-row: 26 / 30;
      color: var(--color-white);

    }

    .lady-line-illustration {
      grid-column: 8 / 12;
      grid-row: 10 / 15;
      z-index: 90;

      img {
        opacity: .4;
        width: 100%;
        height: 100%;

      }
    }



  }
}


/* SMALL SCREEN ABOUT PAGE */

@media (width < 786px) {

  .about-title.underline::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 47%;
    height: 100%;
    box-shadow: inset 0 -0.55em 0 #eeeeee;
    z-index: -1;
  }

  .box-layout-11 {

    grid-template-columns: 1em 1em 1em repeat(6, 1fr) 1em 1em 1em;
    grid-template-rows: 1em 1em repeat(51, 50px);

    /* border: 1px solid green; */

    .about-text {
      grid-column: 3 / 7;
      grid-row: 22 / 27;
      z-index: 60;

    }

    .about-text.treatment {
      grid-column: 2 / 12;
      grid-row: 1 / 12;
    }

    .jkc-eyebrow.about {
      color: var(--color-blue-950);
    }

    .about-text.three {
      grid-column: 2 / 12;
      grid-row: 19 / 29;
      z-index: 60;

    }

    .about-text.four {
      grid-column: 2 / 12;
      grid-row: 33 / 43;

      /* display: none; */
    }

    /* kea */
    .cupping-facial {
      grid-column: 2 / 12;
      grid-row: 12 / 18;
      z-index: 50;
    }

    .box-blue {
      grid-column: 1 / 13;
      grid-row: 1 / 14;
      z-index: 30;
      background-color: var(--color-lightblue);

    }


    .box-blue.two {
      grid-column: 1 / 13;
      grid-row: 32 / 45;
      z-index: 30;
      background-color: var(--color-lightblue);
      clip-path: none;

    }

    .box-blue.three {
      grid-column: 1 / 13;
      grid-row: 14 / 33;
      z-index: 20;
      background-color: var(--color-gray-100);


    }

    .box-blue.four {

      display: none;
    }

    .box-blue.five {
      grid-column: 1 / 13;
      grid-row: 45 / 54;
      z-index: 20;
      background-color: var(--color-blue-950);
      /* display: none; */
    }

    .box-image.me-about {
      grid-column: 2 / 12;
      grid-row: 29 / 35;
      z-index: 50;

      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .about-text.me-about {
      grid-column: 2 / 12;
      grid-row: 36 /42;
      /* display: none; */
    }

    .box-image.blue-box {
      grid-column: 2 / 7;
      grid-row: 43 / 50;
      z-index: 50;
      /* border: 1px solid var(--color-white); */
    }


    .about-text.blue-title {
      grid-column: 6 / 12;
      grid-row: 48 / 50;

      .treatment-headline {
        color: var(--color-white)
      }
    }



    .about-text.blue-box {
      grid-column: 3 / 11;
      grid-row: 50 / 52;

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

    }

    .lady-line-illustration {
      grid-column: 5 / 12;
      grid-row: 19 / 27;
      z-index: 90;

      img {
        opacity: .2;
        width: 100%;
        height: 100%;

      }
    }

    .blue-facial-cup-illustration {
      grid-column: 11 / 13;
      grid-row: 12 / 15;
      z-index: 90;
      /* rotate: -70deg; */

    }


  }


}

/* SPIN GALLERY  */
.gallery {
  color: var(--color-pink);
}

.gallery-container {
  max-width: 100%;
  height: auto;
  float: left;
  animation-name: gallery;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gallery:after {
  content: "";
  animation: gallery 10s linear infinite;

}

@keyframes gallery {
  0% {
    /* opacity: 1; */
    content: url('../images-jkc/choy-kaneshiro-dark.jpg');
  }

  25% {
    /* opacity: 0; */
    content: url('../images-jkc/mahiname-dark.jpg');
  }

  50% {
    /* opacity: 0; */
    content: url('../images-jkc/marshmallow-dark.jpg');
  }

  75% {
    /* opacity: 0; */
    content: url('../images-jkc/jackiecoding-dark.jpg');
  }

  100% {
    /* opacity: 1; */
    content: url('../images-jkc/damianme.jpg');
  }

}


/* SPIN TEXT  */

.spin {
  color: var(--color-white);
}

.spin:after {
  content: "";
  animation: spin 30s linear infinite;
  /* animation-duration: 10s; */
}

@keyframes spin {
  0% {
    content: "Food is one of my love languages. Sugar, carbs, and butter are my weakness. When I make s'mores, the marshmallows have to be burnt.";
  }

  25% {
    content: "I have an Australian Shepherd/Blue Heeler mix named Mahina.";
  }

  50% {
    content: "I'm currenlty in school full-time for web development and coding. I'll be applying for Acupunture School later this year. When I was younger, I hating going to school, but once I found out what I wanted to learn and how to learn, I became excited and keep searching for new things to learn.";
  }

  75% {
    content: "My hair has been blue for over 10 years. I love tattoos. I've lost count how many I have and working on getting more.";
  }

  100% {
    content: "I have 2 kids (one boy & one girl) and a boyfriend who has been by my side since 2009. I was pregnant with my oldest while I was in Cosmetology School. One of the biggest reasons I chose to start my own business was that my youngest was about to start preschool, and I’m the kind of mom who wants to be present for every field trip and school event. Running my own business gives me that freedom.";
  }
}