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

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;

  /* 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-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: Nunito Sans,
  Lato,
  arial,
  "helvetica neue",
  sans-serif;

  --font-headings: 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;
}

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

  /* 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: 100;
  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: 90;
    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: 10;
}

/* 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: 3rem;
  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;
    }

  }

}

.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, 1fr);
  /* border: 1px solid red; */

}

.hero-content-subpage {
  background-color: var(--color-blue-900);
  padding: var(--unit-xl);
  grid-column: 1 / 8;
  grid-row: 2 / 6;
  z-index: 60;
  /* border: 1px solid blue; */
  border-radius: var(--border-radius);
}

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


.jkc-headline-hero {
  color: var(--color-gold-400);
  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-white);
  font-size: var(--unit-2xl);
  /* margin-block: var(--unit-s); */
  line-height: 1.1;
  text-transform: uppercase;
  /* border: 1px solid purple; */
}

.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-gray-200);
  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-gray-200);
  text-transform: uppercase;
  line-height: 1;
  padding-top: 2em;
  letter-spacing: .15em;
}

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

.jkc-headline-hero-gold {
  color: var(--color-gold-400);
  font-size: 3rem;
  margin-block: var(--unit-s);
  line-height: 1.1;
  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 {
      grid-column: 2 / 12;
      grid-row: 4 / 13;
    }

  }
}


/* 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: 20;

}


/* SERVICES CARDS */


.card {
  box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  cursor: pointer;
  transition: 0.4s;

}

/* FEATURES CARDS*/
#features .card {
  box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  /* 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(12, 1fr);
  /* 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;
}



/* LAYOUT 1 my story*/
.box-layout-1 {
  .box-text {
    grid-column: 7 / 12;
    grid-row: 2 / 8;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    padding: 3em;
    padding-top: 4em;
    /* border: 1px solid red; */
  }

  .box-image {
    grid-column: 2 / 9;
    grid-row: 3 / 13;
    z-index: 50;

  }

  .box-blue {
    grid-column: 4 / 13;
    grid-row: 1 / 9;
    z-index: 30;
  }

  .box-tan {
    grid-column: 1 / 12;
    grid-row: 2 / 12;
    z-index: 20;
  }

  .box-outline {
    grid-column: 5 / 11;
    grid-row: 2 / 11;
    z-index: 40;
    /* border: 1px solid red; */
  }
}

/* LAYOUT 2 polices */

.box-layout-2 {


  /* grid-template-rows: repeat(12, 1fr minmax(1em, auto)); */
  /* grid-template-rows: repeat(auto-fit, minmax(min(75px, 100%), 1fr)); */
  grid-template-rows: repeat(12, 85px);

  .box-text {
    grid-column: 2 / 8;
    grid-row: 3 / 10;
    z-index: 60;
    padding: 4em;
    padding-top: 2.5em;
  }

  .box-image {
    grid-column: 4 / 12;
    grid-row: 5 / 12;
    z-index: 50;
  }

  .box-blue {
    grid-column: 1 / 11;
    grid-row: 2 / 11;
    z-index: 30;
  }

  .box-tan {
    grid-column: 2 / 13;
    grid-row: 4 / 13;
    z-index: 20;
  }

  .box-outline {
    grid-column: 3 / 12;
    grid-row: 1 / 12;
    z-index: 40;
  }

}

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

/* LAYOUT 3 */

.box-layout-3 {
  /* grid-template-rows: repeat(12, 1fr minmax(1em, auto)); */
  /* grid-template-rows: repeat(auto-fit, minmax(min(75px, 100%), 1fr)); */
  grid-template-rows: repeat(12, 95px);

  .box-text {
    grid-column: 6 / 12;
    grid-row: 3 / 9;
    z-index: 60;
    padding-left: 3em;
    padding-top: 2.5em;

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

  .box-image {
    grid-column: 2 / 10;
    grid-row: 4 / 12;
    z-index: 50;
    margin-bottom: 75px;
  }

  .box-blue {
    grid-column: 3 / 13;
    grid-row: 2 / 10;
    z-index: 30;
  }

  .box-tan {
    grid-column: 1 / 11;
    grid-row: 1 / 13;
    z-index: 20;
  }

  .box-outline {
    grid-column: 2 / 12;
    grid-row: 3 / 12;
    z-index: 40;
  }
}


/* LAYOUT 4 */

.box-layout-4 {
  /* grid-template-rows: repeat(12, 1fr minmax(1em, auto)); */
  /* grid-template-rows: repeat(auto-fit, minmax(min(75px, 100%), 1fr)); */
  grid-template-rows: repeat(12, 95px);

  .box-text {
    grid-column: 2 / 7;
    grid-row: 4 / 10;
    z-index: 60;
    padding-left: 3em;
    padding-top: 2.7em;
    /* border: 1px solid red; */
  }

  .box-image {
    grid-column: 4 / 12;
    grid-row: 5 / 13;
    z-index: 50;
  }

  .box-blue {
    grid-column: 1 / 11;
    grid-row: 3 / 11;
    z-index: 30;
  }

  .box-tan {
    grid-column: 3 / 13;
    grid-row: 2 / 12;
    z-index: 20;
  }

  .box-outline {
    grid-column: 2 / 12;
    grid-row: 1 / 12;
    z-index: 40;
    /* border: 1px solid red; */
  }
}


/* MOBILE LAYOUT */
@media (width < 768px) {

  .box-layout-1,
  .box-layout-2,
  .box-layout-3,
  .box-layout-4 {

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

    .box-tan {
      grid-column: 1 / 12;
      grid-row: 2 / 13;
    }

    .box-blue {
      grid-column: 2 / 13;
      grid-row: 1 / 12;
    }

    .box-outline {
      display: none;
    }

    .box-image,
    .box-image-2 {
      grid-column: 3 / 11;
      grid-row: 3 / 8;

    }

    .box-text,
    .box-text-cup-explain {
      grid-column: 4 / 10;
      grid-row: 7 / 11;
      /* border: 1px solid red; */

    }

    .text-treatment {
      grid-column: 2 / 9;
      grid-row: 2 / 2;
      z-index: 90;
      color: var(--color-gray-100)
    }

  }
}


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

.box-text,
.box-text-cup-explain {
  background-color: var(--color-white);
  padding: 2em;
}

.box-tan {
  background-color: var(--color-gray-100);
}

.box-blue {
  background-color: var(--color-blue-900);
}

.box-outline {
  border: 1px solid var(--color-gray-600);
}

.icon-treatment {
  text-transform: uppercase;
}

.icon-treatment {
  align-items: center;
}

/* INSTAGRAM */
.boxes2 {
  height: 212px;
  width: 316px;
}

#new img {
  max-width: none !important;
  background: none !important
}

#iframe {
  max-height: none !important;
  max-width: none !important;
  background: none !important
}


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


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

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

}

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

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

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



/* CUSTOM MASSAGE */
.box-layout-massage-page {
  /* background: pink; */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 85px);
  /* grid-template-rows: repeat(12, auto-fit); */
  /* grid-template-rows: repeat(12, minmax(4em, 8vh)); */
  /* grid-template-rows: repeat(12, 1fr minmax(2em, auto)); */
  /* grid-template-rows: repeat(auto-fit, minmax(min(75px, 100px), 1fr)); */

}

/* .massage-title {
  grid-column: 2 / 8;
  grid-row: 1 / 1;
  z-index: 90;
} */

/* SHIFT DOWN ON BIG SCREENS ONLY */
@media (width >=768px) {
  .massage-title {
    margin-bottom: -100px;
  }
}


.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(84, 83, 83, 0.25);
  /* border: 1px solid red; */
}

.box-layout-5 {
  /* border: 2px solid orange; */

  .box-text {
    grid-column: 7 / 13;
    grid-row: 6 / 13;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    /* border: 1px solid green; */
  }

  .box-image {
    grid-column: 2 / 10;
    grid-row: 3 / 10;
    z-index: 50;
  }

  .box-blue {
    grid-column: 1 / 9;
    grid-row: 4 / 11;
    z-index: 30;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .massage-illustration {
    grid-column: 9 / 13;
    grid-row: 1 / 4;
    z-index: 50;
    rotate: 10deg;

  }

  .box-tan {
    grid-column: 3 / 12;
    grid-row: 5 / 12;
    z-index: 10;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }


}

/* SHIFT DOWN ON BIG SCREENS ONLY */
@media (width >=768px) {
  .prenatal-title {
    margin-bottom: -100px;
    margin-left: 50%;
  }
}

.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(84, 83, 83, 0.25);
  /* border: 1px solid red; */
}

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

  .box-text {
    grid-column: 2 / 8;
    grid-row: 4 / 12;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .box-image {
    grid-column: 3 / 12;
    grid-row: 3 / 10;
    z-index: 50;
  }

  .box-blue {
    grid-column: 5 / 13;
    grid-row: 4 / 11;
    z-index: 30;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .box-tan {
    grid-column: 1 / 11;
    grid-row: 5 / 13;
    z-index: 20;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .prenatal-illustration {
    grid-column: 1 / 3;
    grid-row: 1 / 5;
    z-index: 50;

  }

}

.eyebrow-sub {
  color: var(--color-blue-900);
}

/* FOOT REFLEXOLOGY */

.reflexology-title {
  grid-column: 3 / 12;
  grid-row: 1 / 1;

}

/* SHIFT DOWN ON BIG SCREENS ONLY */
@media (width >=768px) {
  .reflexology-title {
    margin-bottom: -30px;
  }
}

.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(84, 83, 83, 0.25);
  /* border: 1px solid red; */
}

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

  .box-text {
    grid-column: 7 / 12;
    grid-row: 5 / 13;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .box-image {
    grid-column: 2 / 11;
    grid-row: 3 / 11;
    z-index: 50;
  }

  .box-blue {
    grid-column: 1 / 10;
    grid-row: 2 / 10;
    z-index: 30;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .foot-illustration {
    grid-column: 10 / 13;
    grid-row: 1 / 4;
    z-index: 70;
    /* rotate: 25deg; */

  }

  .box-tan {
    grid-column: 3 / 13;
    grid-row: 4 / 12;
    z-index: 20;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

}

/* CUSTOM MASSAGE MOBILE */
@media (width < 768px) {

  .box-layout-5 {

    grid-template-columns: 1em 1em repeat(8, auto) 1em 1em;
    grid-template-rows: 1em 1em repeat(16, 50px) 1em 1em;

    .box-blue.massage {
      grid-column: 4 / 13;
      grid-row: 1 / 18;
    }

    .box-tan.massage {
      grid-column: 1 / 11;
      grid-row: 5 / 21;
      z-index: 30;
    }

    .box-image.massage-image {
      grid-column: 3 / 10;
      grid-row: 3 / 9;
    }

    .box-text.massage {
      grid-column: 4 / 12;
      grid-row: 8 / 19;
    }

    .massage-illustration,
    .prenatal-illustration,
    .foot-illustration {
      display: none;

    }

  }


}

/* PRENATAL MOBILE */
@media (width < 768px) {

  .box-layout-6,
  .box-layout-7 {

    grid-template-columns: 1em 1em repeat(8, auto) 1em 1em;
    grid-template-rows: 1em 1em repeat(16, 60px) 1em 1em;

    .box-blue.massage {
      grid-column: 5 / 13;
      grid-row: 1 / 17;
    }

    .box-tan.massage {
      grid-column: 1 / 9;
      grid-row: 6 / 18;
      z-index: 30;
    }

    .box-image.massage-image {
      grid-column: 3 / 12;
      grid-row: 3 / 9;
    }

    .box-text.massage {
      grid-column: 2 / 8;
      grid-row: 8 / 19;
    }

    .jkc-headline.treatment-headline {
      font-size: var(--unit-m);
      /* margin-block: var(--unit-s);
      text-transform: uppercase; */
    }

    .massage-illustration,
    .prenatal-illustration,
    .foot-illustration {
      display: none;

    }

  }


}

/* FOOT MASSAGE MOBILE */
@media (width < 768px) {

  .box-layout-7 {

    grid-template-columns: 1em 1em repeat(8, auto) 1em 1em;
    grid-template-rows: 1em 1em repeat(16, 60px) 1em 1em;

    .box-blue.massage {
      grid-column: 6 / 13;
      grid-row: 1 / 17;
    }

    .box-tan.massage {
      grid-column: 1 / 9;
      grid-row: 6 / 18;
      z-index: 30;
    }

    .box-image.massage-image {
      grid-column: 3 / 10;
      grid-row: 3 / 9;
    }

    .box-text.massage {
      grid-column: 4 / 11;
      grid-row: 8 / 19;
    }

    .jkc-headline.treatment-headline {
      font-size: var(--unit-m);
      /* margin-block: var(--unit-s);
      text-transform: uppercase; */
    }

    .massage-illustration,
    .prenatal-illustration,
    .foot-illustration {
      display: none;

    }

  }


}


/* ------CUPPING PAGE------ */

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


.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;
  /* border: 1px solid red; */
}

.body-cupping-title.underline::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 65%;
  height: 100%;
  box-shadow: inset 0 -0.55em 0 #eeeeee;
  z-index: -1;
  align-content: left;
  /* border: 1px solid red; */
}

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

/* SHIFT DOWN ON BIG SCREENS ONLY */
@media (width >=768px) {
  .body-cupping-title {
    margin-bottom: -50px;
  }
}

/* SHIFT DOWN ON BIG SCREENS ONLY */
/* @media (width >=768px) {
  .facial-title {
  }
} */

/* first section */
.box-layout-8 {
  grid-template-rows: repeat(18, 90px);

  /* border: 1px solid green; */

  .box-text {
    grid-column: 7 / 13;
    grid-row: 2 / 10;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    /* border: 1px solid hotpink; */
  }

  .box-image {
    grid-column: 2 / 7;
    grid-row: 3 / 9;
    z-index: 50;
  }

  .box-blue {
    grid-column: 1 / 10;
    grid-row: 4 / 18;
    z-index: 30;
  }

  .box-tan {
    grid-column: 4 / 13;
    grid-row: 4 / 20;
    z-index: 20;
  }

  .hemofire-illustration {
    grid-column: 4 / 8;
    grid-row: 8 /11;
    z-index: 90;
    rotate: 15deg;

    img {
      opacity: .3;
    }
  }

  .glasscup-illustration {
    grid-column: 11 / 13;
    grid-row: 11 /13;
    z-index: 90;
    rotate: -30deg;

    img {
      opacity: .3;
    }
  }

  .aircup-illustration {
    grid-column: 1 / 3;
    grid-row: 17 /19;
    z-index: 90;
    rotate: 10deg;

    img {
      opacity: .5;
    }
  }

  .box-text-cup-explain {
    grid-column: 2 / 8;
    grid-row: 11 / 17;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    /* border: 1px solid orange; */
  }

  .box-image-cupping-legs {
    grid-column: 7 / 13;
    grid-row: 12 / 17;
    z-index: 50;
  }


}

/* second section */
.box-layout-9 {

  grid-template-rows: repeat(18, 90px);

  /* border: 1px solid green; */

  .box-image-cupping-stomach {
    grid-column: 1 / 7;
    grid-row: 2 / 6;
    z-index: 50;
  }

  .box-text.cupping-not-bruise {
    grid-column: 6 / 12;
    grid-row: 1 / 6;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .box-image {
    grid-column: 2 / 8;
    grid-row: 2 / 5;
    z-index: 50;
  }

  .box-tan {
    grid-column: 2 / 10;
    grid-row: 3 / 20;
    z-index: 20;
  }

  .box-blue {
    grid-column: 5 / 13;
    grid-row: 4 / 18;
    z-index: 30;
  }

  .box-text.cupping-conditions {
    grid-column: 7 / 12;
    grid-row: 7 / 13;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    /* background-color: var(--color-gray-100); */
  }

  .warning-illustration {
    margin-left: -20%;
    margin-top: -20%;
    align-items: left;

  }

  .box-image-cupping-arm {
    grid-column: 5 / 12;
    grid-row: 14 / 18;
    z-index: 50;
  }

  .box-text.cupping-helps {
    /* background-color: pink; */
    grid-column: 1 / 6;
    grid-row: 10 / 17;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .jkc-headline.cups-help {
    font-size: 1.8em;
    text-align: center;
  }

  .jkc-headline-gold.cups-help {
    font-size: 1em;
  }

  .box-text.cups-help-list {
    margin-left: 30%;
    /* border: 1px solid red; */
  }

  .siliconecup-illustration {
    grid-column: 4 / 6;
    grid-row: 18 / 19;
    z-index: 90;
    rotate: 20deg;

    img {
      opacity: .7;
    }
  }



  .aircup-illustration2 {
    grid-column: 11 / 13;
    grid-row: 1 / 3;
    z-index: 90;
    rotate: 20deg;

    img {
      opacity: .45;
    }
  }


}

.box-text-swiper {
  text-align: center;
}

.box-blue-swiper {}


.swiper-blue-box {
  background-color: var(--color-blue-900);
  /* padding: var(--unit-xl);
  border-radius: var(--border-radius); */
}

.swiper-cup-card {
  background-color: var(--color-gray-100);
  padding: var(--unit-s);
  border-radius: var(--border-radius);
  /* border: 1px solid green; */
}

.jkc-eyebrow-card-swiper {
  color: var(--color-gold-400);
  text-align: left;
  text-transform: none;
}

.jkc-headline-card-swiper {
  color: var(--color-primary-dark);
  text-align: left;
  font-size: 2rem;
  margin-block: var(--unit-xs);
  line-height: 1.2;
  text-transform: uppercase;
}

.jkc-card-swiper-text {
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: none;
}

/* CUPPING VIDEO */
.cupping-video {
  max-width: 100%;
  height: 100svh;

}

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


/* LAYOUT 10 FACIAL CUPPING */

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

  /* border: 1px solid green; */

  .box-text {
    grid-column: 1 /8;
    grid-row: 1 / 12;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    /* background-color: hotpink; */
  }



  /* kea */
  .cupping-facial {
    grid-column: 7 / 13;
    grid-row: 3 / 11;
    z-index: 70;
  }

  .cups-facial {
    grid-column: 9 / 13;
    grid-row: 6 / 9;
    z-index: 50;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .box-blue {
    grid-column: 5 / 12;
    grid-row: 2 / 14;
    z-index: 30;
  }

  .box-text.facial-cups-help {
    grid-column: 1 / 7;
    grid-row: 20 / 27;
    z-index: 60;
    /* background-color: lightblue; */

  }

  .box-text.about-facial-cups {
    grid-column: 7 / 13;
    grid-row: 13 / 17;
    z-index: 60;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    /* background-color: lightblue; */
  }

  .box-image.cups-facial {
    grid-column: 3 / 11;
    grid-row: 16 / 21;
    z-index: 50;
  }

  .box-image.granny {
    grid-column: 8 / 13;
    grid-row: 23 / 30;
    z-index: 50;
    box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
  }

  .box-blue2 {
    grid-column: 2 / 12;
    grid-row: 19 / 29;
    z-index: 30;
    background-color: var(--color-blue-900);
  }

  .jkc-headline.about-facial-cups {
    font-size: 2.5em;
  }

  .jkc-headline-gold.about-facial-cups {
    font-size: 1em;
  }

  .facial-cups-help-list {
    margin-left: 40%;
  }

  .jkc-headline.facial-cups-help-text {
    font-size: 2em;
    text-align: center;
    /* border: 1px solid red; */
  }

  .jkc-headline-gold.facial-cups-help-text {
    font-size: 1em;
    text-align: center;
  }

  .poi-facial-cup-illustration {
    grid-column: 11 / 13;
    grid-row: 1 / 3;
    z-index: 90;
    rotate: -170deg;

    img {
      opacity: .4;
    }
  }

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

    img {
      opacity: .6;
    }
  }


  .poi-facial-cup-illustration2 {
    grid-column: 3 / 5;
    grid-row: 15 / 18;
    z-index: 90;
    rotate: -10deg;

    img {
      opacity: .6;
    }
  }

  .blue-facial-cup-illustration {
    grid-column: 7 / 9;
    grid-row: 27 / 29;
    z-index: 90;
    rotate: -90deg;

    img {
      opacity: .6;
    }
  }
}


/* SMALL SCREEN CUPPING PAGE */

@media (width < 900px) {

  .hero-subpage.cupping-therapy {

    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 {
      grid-column: 2 / 12;
      grid-row: 4 / 13;
    }

  }


  .box-layout-8 {

    grid-template-columns: 1em 1em repeat(10, auto) 1em 1em;
    /* grid-template-rows: 1em 1em repeat(31, auto) 1em 1em; */
    grid-template-rows: 1em 1em repeat(35, 65px) 1em 1em;

    .box-blue {
      grid-column: 1 / 9;
      grid-row: 1 / 37;
      z-index: 20;
    }

    .box-tan {
      grid-column: 6 / 15;
      grid-row: 5 / 40;
      z-index: 10;
    }

    .box-image {
      grid-column: 2 / 11;
      grid-row: 3 / 10;
      z-index: 30;
    }

    .box-text {
      grid-column: 5 / 15;
      grid-row: 8 / 21;
      z-index: 40;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .box-image-cupping-legs {
      grid-column: 6 / 12;
      grid-row: 22 / 29;
      z-index: 50;
    }

    .box-text-cup-explain {
      grid-column: 3 / 10;
      grid-row: 28 / 38;
      z-index: 60;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .hemofire-illustration {
      grid-column: 2 / 6;
      grid-row: 22 / 27;
      z-index: 90;
      rotate: 18deg;

      img {
        opacity: .2;
      }
    }

    .aircup-illustration {
      grid-column: 4 / 6;
      grid-row: 9 /11;
      z-index: 90;
      /* rotate: 10deg; */

      img {
        opacity: .4;
      }
    }

    .glasscup-illustration {
      grid-column: 9 / 12;
      grid-row: 29 / 31;

      z-index: 90;

      img {
        opacity: .6;
      }
    }
  }

  .box-layout-9 {

    grid-template-columns: 1em 1em repeat(5, auto) 1em 1em;
    grid-template-rows: 1em 1em 1em repeat(40, 60px) 1em 1em 1em;

    /* second section */

    .box-blue {
      grid-column: 1 / 6;
      grid-row: 1 / 43;
      z-index: 20;
    }

    .box-tan {
      grid-column: 4 / 10;
      grid-row: 5 / 47;
      z-index: 10;
    }

    .box-image-cupping-stomach {
      grid-column: 4 / 10;
      grid-row: 11 / 15;
      z-index: 50;
    }

    .box-text.cupping-not-bruise {
      grid-column: 3 / 7;
      grid-row: 3 / 11;
      z-index: 40;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .box-image-cupping-arm {
      grid-column: 2 / 7;
      grid-row: 28 / 34;
      z-index: 50;
    }

    .box-text.cupping-helps {
      grid-column: 3 / 8;
      grid-row: 16 / 27;
      z-index: 60;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .box-text.cups-help-list {
      margin-left: 26%;
    }


    .box-text.cupping-conditions {
      grid-column: 3 / 8;
      grid-row: 34 / 44;
      z-index: 60;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .warning-illustration {
      margin-left: -5;
      /* margin-top: -6%; */
      align-items: left;
    }

    .aircup-illustration2 {

      grid-column: 6 / 9;
      grid-row: 15 / 17;
      z-index: 90;

      img {
        opacity: .6;
      }
    }

    .glasscup-illustration2 {
      grid-column: 3 / 4;
      grid-row: 27 / 29;
      z-index: 90;

      img {
        opacity: .3;
      }
    }


    .siliconecup-illustration {
      grid-column: 6 / 8;
      grid-row: 2 / 4;
      z-index: 70;
      rotate: -10deg;

      img {
        opacity: .6;
      }
    }
  }
}


@media (width < 786px) {

  /* facial cupping */
  .box-layout-10 {

    grid-template-columns: 1em 1em repeat(8, auto) 1em 1em;
    grid-template-rows: 1em 1em repeat(8, auto) 1em 1em;
    /* grid-template-rows: auto; */
    /* display: flex;
    flex-direction: column; */
    gap: 2em;

    .box-text {
      grid-column: 3 / 11;
      grid-row: 12 / 27;
      z-index: 60;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
      /* background-color: yellow; */
    }



    /* kea */
    .cupping-facial {
      grid-column: 4 / 16;
      grid-row: 3 / 12;
      z-index: 50;

    }

    .cups-facial {
      grid-column: 9 / 13;
      grid-row: 6 / 9;
      z-index: 50;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);

    }

    .box-blue {
      grid-column: 1 / 9;
      grid-row: 1 / 25;
      z-index: 30;
    }

    .box-text.facial-cups-help {
      grid-column: 1 / 10;
      grid-row: 35 / 43;
      z-index: 60;
    }

    .box-text.about-facial-cups {
      grid-column: 7 / 11;
      grid-row: 53 / 60;
      z-index: 60;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .box-image.cups-facial {
      grid-column: 1 / 16;
      grid-row: 28 / 33;
      z-index: 50;
    }

    .box-image.granny {
      grid-column: 3 / 11;
      grid-row: 44 / 52;
      z-index: 50;
      box-shadow: 0 0 15px 7px rgba(84, 83, 83, 0.25);
    }

    .box-blue2 {
      grid-column: 6 / 16;
      grid-row: 34 / 57;
      z-index: 30;
      background-color: var(--color-blue-900);
    }

    .jkc-headline.about-facial-cups {
      font-size: 2.5em;
    }

    .jkc-headline-gold.about-facial-cups {
      font-size: 1em;
    }

    .facial-cups-help-list {
      margin-left: 40%;
    }

    .jkc-headline.facial-cups-help-text {
      font-size: 2em;
      text-align: center;
    }

    .jkc-headline-gold.facial-cups-help-text {
      font-size: 1em;
      text-align: center;
    }

    .poi-facial-cup-illustration,
    .blue-facial-cup-illustration,
    .blue-facial-cup-illustration {
      display: none;
    }
  }


}

/* CUPPING VIDEO */
@media (max-width: 768px) {

  .cupping-video {
    width: 100%;
    height: auto;
  }
}

/* two column row */
@media (width < 900px) {
  .row.two-mobile-cupping {
    display: grid;
    grid-template-columns: 300px 150px;
    gap: var(--grid-gap);
  }

}