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

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: #e3e3e3;
  --color-offwhite: #efeded;
  --color-paperwhite: #fcfcfc;
  --color-black: #232323;
  --color-black-80: rgb(0 0 0 / .8);

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

  /* main blue */
  --color-blue-600: #2f455d;
  --color-blue-900: #11212f;
  --color-blue-GM: #043170;
  --color-teal: #35B6B9;
  --color-teal-200: #b2eaeb;
  --color-greendark: #06092c;

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

  --color-pink: #c75c7e;
  --color-rose-400: #663655;

  --color-gold: #D8A008;


  /* 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-teal);
  --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 */

  .roc-grotesque {
    font-family: "Roc Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }


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

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

/* HEADINGS */
h1,
h2,
h3 {
  color: var(--color-blue-900);

  /* 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 {
  max-inline-size: 66ch;
  text-wrap: pretty;
  font-family: 'elza', sans-serif;
}

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: 'Elza', sans-serif;
  font-size: 100%;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: "Roc Grotesque", sans-serif;
}

/* EYEBROWS/LEAD-INS/RUNNING-HEADS */
.eyebrow {
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .07em;
  margin: 0;
  font-family: 'roc-grotesk-wide', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.eyebrow.subpage {
  text-transform: uppercase;
  font-size: .9em;
  letter-spacing: .05em;
  color: var(--color-black);
  opacity: .8;
  font-family: roc-grotesk, sans-serif;
  font-style: normal;
  text-align: left;
  /* margin-bottom: .7em; */
}

/* 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,
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

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


@media (min-width: 768px) {
  .hidden-desktop {
    position: absolute;
    top: -9999px;
    left: -9999px;

  }
}

@media (min-width: 767px) {
  .hidden-mobile {
    position: absolute;
    top: -9999px;
    left: -9999px;

  }
}


/* 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);
}


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

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

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


/* #SITE NAVIGATION  */
/* Default Site-Navigation Menu (both header & footer) */
.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--unit-s);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--color-siteheader-links);
  text-decoration: none;
  display: block;
  padding: var(--unit-xs);
  padding-block-start: calc(var(--unit-xs) + .1em);
  font-family: 'roc-grotesk-wide', sans-serif;

}

.site-nav a:hover {
  color: var(--color-siteheader-links-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-links);
  text-underline-offset: .5em;
  text-decoration-thickness: .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;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    background: var(--color-body-background);
    /* 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 0.3s forwards;
  }

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

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

    100% {
      translate: 0 0;
    }
  }

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

    100% {
      translate: 100% 0;
    }
  }

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

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

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

  }

  .site-nav .simple-navicon rect {
    transform-origin: center;
    width: 100%;
  }

  .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));
  }

  .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%;
  }

}

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


/* MAIN SITE NAV */

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

.site-nav a {
  color: var(--color-siteheader-links);
  text-decoration: none;
  display: block;
  padding: var(--unit-xs);
  padding-block-start: calc(var(--unit-xs) + .1em);
  color: var(--color-teal);
}

.site-nav a:hover {
  color: var(--color-siteheader-links-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-links);
  text-underline-offset: .5em;
  text-decoration-thickness: .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;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 80;
    background: var(--color-body-background);
    /* transition: translate 0.3s ease-out; */
  }

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

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

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

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

    100% {
      translate: 0 0;
    }
  }

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

    100% {
      translate: 100% 0;
    }
  }

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

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

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

  }

  .site-nav .simple-navicon rect {
    transform-origin: center;
    width: 100%;
  }

  .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));
  }

  .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%;
  }

}


/* TOGGLE NAV */
@media (max-width: 767px) {
  .toggle-nav {
    text-align: right;
    /* MENU BUTTON */
    /* TOGGLE NAV UL */
  }

  .toggle-nav .site-id {
    position: absolute;
  }

  .toggle-nav li a:hover {
    color: #fff;
    background: #036;
  }

  .toggle-nav .menu-button {
    margin: 0.8em 0;
    display: inline-block;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .toggle-nav .menu-button::selection {
    background-color: rgba(255, 255, 255, 0);
  }

  .toggle-nav .menu-button.navicon {
    color: rgba(255, 255, 255, 0);
  }

  .toggle-nav .menu-button.navicon::after {
    color: #333;
    content: "☰";
    font-size: 1.5em;
    margin-top: -0.1em;
    margin-left: 0.5em;
    width: 1em;
    height: 1em;
    line-height: 1em;
    display: inline-block;
  }

  .toggle-nav[data-navstate=open] .menu-button.navicon::after {
    content: "✕";
  }

  .toggle-nav ul {
    max-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .toggle-nav[data-navstate=open] ul {
    max-height: none;
    padding: 1em 0;
  }

  .toggle-nav[data-navstate=open] ul ul {
    padding: 0;
  }
}

/* Animated Toggle-Nav Menu */
@media (max-width: 767px) {
  .toggle-nav.animated ul {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    border-width: 0;
    transition: all 0.3s ease;
  }

  .toggle-nav.animated[data-navstate=open] ul {
    max-height: 138em;
    opacity: 1;
    padding: 0.5em 0;
    border-width: 0px;
    transition: all 0.6s ease;
  }

  .toggle-nav.animated li {
    padding: 0;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .toggle-nav.animated[data-navstate=open] li {
    padding: 0.25em;
    opacity: 1;
    transition: all 0.6s ease 0.2s;
  }

  .toggle-nav.animated li a {
    padding: 0;
    transition: all 0.3s ease;
  }

  .toggle-nav.animated[data-navstate=open] li a {
    padding: 0.75em;
  }
}






.button {
  background: var(--color-teal);
  padding: 10px 15px;
  text-transform: uppercase;
  margin-top: 50px;
  margin-bottom: 50px;
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white);
  font-family: 'roc-grotesque-wide', sans-serif;
}

.button:hover {
  background: var(--color-blue-900);
  transition: all 0.3s ease;
  color: var(--color-white)
}

.subpage-button {
  display: flex;
  justify-content: space-between;
  margin: 3em;
}

@media (width < 768px) {
  .subpage-button.project-buttons {
    /* flex-direction: column; */
    gap: var(--unit-s);
    margin: 0;
    /* padding: 0; */
    /* border: 1px solid red; */

    .button {
      font-size: 12px;
      text-align: center;
    }
  }

}


.site-main.subpage {
  background-color: var(--color-body-background);
  padding: 3em 5em;
  /* background-color: pink; */
}

.paper {
  max-width: 2000px;
  margin-inline: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  margin: 3em;
  background-color: var(--color-paperwhite);
  /* border: 1px solid blue; */
}

@media (width < 768px) {
  .site-main.subpage {
    /* background-color: var(--color-body-background); */
    padding: 6em .5em;
    /* background-color: pink; */
  }

  .paper {
    width: 100%;
    margin-inline: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* border: 1px solid red; */
  }

}

@media (width < 1400px) {

  .paper {
    padding-bottom: 5em;
  }
}

@media (width < 1060px) {

  .paper {
    margin: 0;
  }
}

@media (width < 800px) {

  .paper {
    margin: 0;
  }
}




.hero-subpage {
  padding: 0 4em 6em 4em;
}

/* .menu-video {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
} */

/* #VIDEO */
video {
  max-width: 100%;
  height: auto;
}









/* ORIGINAL SWIIPER FOR HOME PAGE */
/* .jkc-timeline-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
  margin-top: 50px;
}

.jkc-main-slider-wrapper {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  height: 400px;
  padding: 30px;
  position: relative;
}


.jkc-main-slider-wrapper .jkc-main-item {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.jkc-main-slider-wrapper .jkc-main-item.swiper-slide-active .jkc-main-title,
.jkc-main-slider-wrapper .jkc-main-item.swiper-slide-active .jkc-main-desc,
.jkc-main-slider-wrapper .jkc-main-item.swiper-slide-active .jkc-main-button {
  opacity: 1;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-image-wrap {
  height: 100%;
  width: 100%;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-content-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  top: unset;
  max-width: 460px;
  overflow: hidden;
  background: #ffffff8a;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: -webkit-backdrop-filter 0.9s;
  transition: backdrop-filter 0.9s;
  transition: backdrop-filter 0.9s, -webkit-backdrop-filter 0.9s;
  padding: 20px;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-title {
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-teal);
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  font-family: 'roc-grotesk-wide', sans-serif;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-title.jackie {
  color: var(--color-gold);
  font-weight: bold;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-desc {
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button {
  opacity: 0;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link {
  color: var(--color-blue-900);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  transition: all 0.3s ease;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link:hover {
  color: var(--color-teal);
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed {
  display: inline-block;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed .arrow-icon {
  position: relative;
  top: 0;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed g {
  stroke: currentColor;
  color: var(--color-blue-900);
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
}

.jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link--arrowed:hover g {
  color: var(--color-teal);
}

.jkc-main-slider-wrapper .jkc-page-scroll {
  position: absolute;
  bottom: 8%;
  right: 5%;
  transform: rotate(90deg);
  z-index: 1;
  display: none;
} */

/* .jkc-main-slider-wrapper .jkc-page-scroll .arrow-up {
  height: 70px;
  width: 70px;
  display: block;
  background: #ffffffc9;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
  transform: rotate(-90deg);
  overflow: hidden;
} */

/* .jkc-main-slider-wrapper .jkc-page-scroll .arrow-slide {
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-teal);
  position: absolute;
  display: block;
  z-index: 0;
}

.jkc-main-slider-wrapper .jkc-page-scroll .long-arrow-left {
  display: block;
  margin: 30px auto;
  width: 16px;
  height: 16px;
  border-top: 2px solid #2b2d42;
  border-left: 2px solid #2b2d42;
}

.jkc-main-slider-wrapper .jkc-page-scroll .long-arrow-left {
  transform: rotate(-135deg);
}

.jkc-main-slider-wrapper .jkc-page-scroll .long-arrow-left::after {
  content: "";
  display: block;
  width: 2px;
  height: 25px;
  background-color: #2b2d42;
  transform: rotate(-45deg) translate(8px, 3px);
  left: 0;
  top: 0;
} */

/* .jkc-main-slider-wrapper .jkc-page-scroll .arrow-up:hover {
  transition: all 0.1s;
}

.jkc-main-slider-wrapper .jkc-page-scroll .arrow-up:hover .left-arm:after {
  transform: rotate(-10deg);
}

.jkc-main-slider-wrapper .jkc-page-scroll .arrow-up:hover .right-arm:after {
  transform: rotate(10deg);
}

.jkc-main-slider-wrapper .jkc-page-scroll .arrow-up:hover .arrow-slide {
  transition: all 0.5s ease-in-out;
  transform: translateY(200%);
} */

/* .jkc-main-slider-wrapper .jkc-main-nav-pag-wrap {
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
}

.jkc-main-slider-wrapper .jkc-main-navigation {
  margin-top: 40px;
  margin-right: 2px;
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed {
  display: inline-block;
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed .arrow-icon {
  position: relative;
  top: 0;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed g {
  stroke: currentColor;
  color: #2b2d42;
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
}

.jkc-main-slider-wrapper .jkc-main-navigation .link--arrowed:hover g {
  color: var(--color-teal);
}

.jkc-main-slider-wrapper .jkc-main-navigation .jkc-button-next {
  margin-top: 15px;
  transform: rotate(90deg);
}

.jkc-main-slider-wrapper .jkc-main-navigation .jkc-button-prev {
  transform: rotate(-90deg);
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap {
  position: absolute;
  top: 43%;
  right: 0;
  margin-right: 22px;
}


@-webkit-keyframes progress {
  0% {
    stroke-dashoffset: 75;
    opacity: 1;
  }

  95% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}


@keyframes progress {
  0% {
    stroke-dashoffset: 75;
    opacity: 1;
  }

  95% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet {
  background-color: transparent;
  opacity: 0.8;
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet--svg-animation {
  width: 20px;
  height: 20px;
  margin: 6px -7px;
  display: inline-block;
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet--svg-animation svg {
  transform: rotate(-90deg);
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet--svg-animation .svg__circle-inner {
  stroke: #2b2d42;
  fill: transparent;
  transition: all 0.3s ease;
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet-active .svg__circle {
  stroke: var(--color-teal);
  stroke-dasharray: 75;
  stroke-dashoffset: 0;
  -webkit-animation: progress 4s ease-in-out 1 forwards;
  animation: progress 4s ease-in-out 1 forwards;
}

.jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet-active .svg__circle-inner {
  fill: var(--color-white);
  stroke: var(--color-teal);
}

@media (min-width: 768px) {
  .jkc-main-slider-wrapper {
    height: 550px;
    padding: 60px;
  }

  .jkc-main-slider-wrapper .jkc-page-scroll {
    bottom: 4%;
    display: inherit;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-title {
    font-size: 40px;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-content-wrap {
    max-width: 400px;
    padding: 40px;
    padding-left: 0;
    top: 50%;
    transform: translateY(-50%);
    bottom: unset;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-image-wrap {
    width: 80%;
  }

  .jkc-main-slider-wrapper .jkc-main-navigation {
    margin-top: 60px;
    margin-right: 20px;
  }

  .jkc-main-slider-wrapper .jkc-main-pagi-wrap {
    margin-right: 47px;
  }

  .jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet--svg-animation {
    margin: 6px 0;
  }
}

@media (min-width: 1024px) {
  .jkc-main-slider-wrapper {
    height: 650px;
    padding: 70px;
  }

  .jkc-main-slider-wrapper .jkc-page-scroll {
    bottom: 9%;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-title {
    font-size: clamp(2.5em, 3vw, 2.7em);

  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-content-wrap {
    max-width: 460px;
    padding: 50px;
    padding-left: 0;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-desc {
    font-size: 16px;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-button .link {
    font-size: 16px;
  }

  .jkc-main-slider-wrapper .jkc-main-item .jkc-main-image-wrap {
    width: 70%;
  }

  .jkc-main-slider-wrapper .jkc-main-navigation {
    margin-top: 85px;
    margin-right: 30px;
  }

  .jkc-main-slider-wrapper .jkc-main-pagi-wrap {
    margin-right: 53px;
  }

  .jkc-main-slider-wrapper .jkc-main-pagi-wrap .swiper-pagination-bullet--svg-animation {
    margin: 6px -5px;
  }
}

@media (min-width: 1440px) {
  .jkc-main-slider-wrapper {
    height: 700px;
    padding: 80px;
  }

  
} */


/* SPIN TEXT IN HERO */

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

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

@keyframes spin {
  0% {
    content: "web designer/devloper";
  }

  25% {
    content: "massage therapist";
  }

  50% {
    content: "graphic designer";
  }

  75% {
    content: "philomath";
  }

  100% {
    content: "tattoo lover";
  }
}

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

.gallery-container {
  max-width: 100%;
  height: auto;
  grid-column: 5 / 11;
  grid-row: 2 / 10;
  z-index: 50;
  clip-path: circle(50%);
  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('../img-spring26/jackie-code.jpg');
  }

  25% {
    /* opacity: 0; */
    content: url('../img-spring26/jackie-folding3.jpg');
  }

  50% {
    /* opacity: 0; */
    content: url('../img-spring26/jackie-cupping3.jpg');
  }

  75% {
    /* opacity: 0; */
    content: url('../img-spring26/jackie-coding-jkc-gray.jpg');
  }

  100% {
    /* opacity: 1; */
    content: url('../img-spring26/jackie-tracing-gray.jpg');
  }

}


.list-icon {
  list-style: none;


  li {
    position: relative;
    padding-left: 40px;
    line-height: 1.2;
    margin-block: 20px;
    text-wrap: balance;
  }

  img {
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -5px;
    left: 0;

  }
}

.h3-subtitle {
  font-family: roc-grotesk-wide, sans-serif;
  font-weight: lighter;
  text-transform: uppercase;
  font-size: 1.2em;
  letter-spacing: .02em;
  margin-bottom: .3em;
  text-align: left;
  margin-top: 4px;
}