/*-------------------------------------------------->
<-----              CORE STYLES                ----->
<--------------------------------------------------*/

  :root {
    --clr-red: #DC3737;
    --clr-blue: #336FDB;
    --clr-green: hsl(120, 42%, 58%);
    --clr-yellow: #FFF161;
    --clr-orange: #FFD126;
    --clr-white: #fff;
    --clr-black: #000;
    --clr-charcoal: #343434;
    --box-shadow: 0px 4px 0px 0px #FFD126;
    --br: 4px;
    --header-height-mobile: 3rem;
    --header-height-desktop: 4rem;
    --header-height-scroll: 2.1rem;
  }

/*-------------------------------------------------->
<-----                 MOBILE                  ----->
<--------------------------------------------------*/

@media only screen and (min-width: 0rem) {

  /*------------------------------->
  <---  FONTS & SITEWIDE STYLES --->
  <-------------------------------*/

  @font-face {
    font-family: 'Zen Kaku Gothic New';
    font-style: 'Bold';
    font-weight: 700;
    src: url('/../assets/fonts/zen-kaku-gothic-new-bold-700.woff2');
    font-display: swap;}
  @font-face {
    font-family: 'Zen Kaku Gothic New';
    font-style: 'Medium';
    font-weight: 500;
    src: url('/../assets/fonts/zen-kaku-gothic-new-medium-500.woff2');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'ExtraLight';
    font-weight: 200;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'Light';
    font-weight: 300;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'Regular';
    font-weight: 400;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'Medium';
    font-weight: 500;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'SemiBold';
    font-weight: 600;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'Bold';
    font-weight: 700;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'ExtraBold';
    font-weight: 800;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  @font-face {
    font-family: 'Outfit';
    font-style: 'Black';
    font-weight: 900;
    src: url('/../assets/fonts/Outfit-VariableFont_wght.ttf');
    font-display: swap;}
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: outfit;
  }
  a {
    text-decoration: none;
    color: var(--clr-black);
  }
  button {
    cursor: pointer;
  }
  h1.slide__head {
    font-family: 'Zen Kaku Gothic New';
    font-style: 'Bold';
    font-weight: 700;
  }
  h1.inner-hero__head {
    font-family: 'Zen Kaku Gothic New';
    font-style: 'Bold';
    font-weight: 700;
    color: white;
  }
  h2, h4, h5, p {
    font-family: 'Outfit';
  }
  h2.slide__subhead {
    font-style: 'Regular';
    font-weight: 400;
    padding-top: 1rem;
  }
  h2.section__head {
    font-style: 'Medium';
    font-weight: 500;
    padding: 1.5rem 0 1rem 0;
  }
  h2.section__subhead {
    font-style: 'ExtraBold';
    font-weight: 800;
    letter-spacing: .5pt;
  }
  h2.inner-section__head {
    font-style: 'Medium';
    font-weight: 500;
    padding: 1.5rem 0 1rem 0;
  }
  h3.section__title {
    font-family: 'Zen Kaku Gothic New';
    font-style: 'Medium';
    font-weight: 500;
    text-align: center;
    letter-spacing: 2.1pt;
    font-size: 110%;
  }
  h4.section__feature {
    font-style: 'Bold';
    font-weight: 700;
    font-size: 1.1rem;
    transform: scale(.95,1);
    letter-spacing: .2pt;
  }
  h5.footer__head {
    font-style: 'SemiBold';
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--clr-white)
  }
  p.section__p {
    font-style: 'Light';
    font-weight: 300;
  }
  p.section__p-thicker {
    font-style: 'Regular';
    font-weight: 400;
  }
  p.footer__p {
    font-style: 'ExtraLight';
    font-weight: 200;
    color: var(--clr-white)
  }
  span.bold {
    font-weight: 500;
  }
  .skip {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -11111;
  } 

  /*------------------------------->
  <---          HEADER          --->
  <-------------------------------*/

  header {
    position: fixed;
    top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: var(--header-height-mobile);
    padding-inline: 1.35rem; 
    background-color: var(--clr-white);
    z-index: 10;
  }
  .header__logo {
    height: 80%;
    aspect-ratio: 4.2567;
  }
  .header__logo img { 
    width: 100%;
    height: 100%;
  }
  .header__social-media {
    display: none
  }
  .header__search {
    position: fixed;
    right: 3.85rem;
    width: 2.28rem;
    height: 100%;
    z-index: 10;
  }
  .header__icons {
    height: 100%;
  }
  .header__nav__toggle {
    position: fixed;
    right: 1.5rem;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    z-index: 0;
  }
  .header__nav__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-inline: 2rem;
  }
  .header__nav {
    position: fixed;
    display: flex;
    flex-direction: column;
    inset: 0 0 0 52%;
    height: 100rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 10px 10px 10px 10px gray;
    padding: 4rem 2rem;
    z-index: 10;
    transform: translateX(102%);
  }
  .header__nav__item {
    padding: 1rem;
  }
  .hamburger__SVG.active :nth-child(1),
  .hamburger__SVG.active :nth-child(4) {
    animation: hamburgerAnimate ease-out 0.5s forwards;
  }
    @keyframes hamburgerAnimate {
        100%  {width: 0%;}
    }
  .hamburger__SVG__middle-line-2 {
    opacity: 0;
  }
  .hamburger__SVG.active :nth-child(2) {
    animation: xAnimateLeft ease-out 0.5s forwards;
    animation-delay: 0.25s;
  }
    @keyframes xAnimateLeft {
        100%  {transform: rotate(45deg);}
    }
  .hamburger__SVG.active :nth-child(3) {
    animation: xAnimateRight ease-out 0.5s forwards;
    animation-delay: 0.25s;
  }
    @keyframes xAnimateRight {
        50%  {opacity: 1;} 
        100% {transform: rotate(-45deg); opacity: 1;}
    }
  .cloned-nav-list-div {
    z-index: 100;
  }
  .cloned-nav-list {
    position: fixed;
    display: flex;
    flex-direction: column;
    inset: -5rem 0 0 52%;
    height: 100rem;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 10px 10px 10px 10px gray;
    padding: 4rem 2rem;
    z-index: 100;
    transition: transform ease-in-out 0.5s;
    transform: translateX(102%);
  }
  .cloned-nav-list[data-visible="true"] {
    transition: transform ease-in-out 0.5s;
    transform: translateX(0%);
  }
  .cloned-nav-list > .header__nav__item:first-child {
    margin-top: 5rem;
  }
  .cloned-nav-list > .header__nav__item {
    padding: 0.5rem;
  }
  .cloned-nav-list > .header__nav__item > a {
    display: inline-block;
    margin: 0;
    padding: 5px 5px 5px 10px;
    border-left: 4px solid white;
  }
  .cloned-nav-list .header__nav__item .current-page {
    border-left: 4px solid var(--clr-charcoal);
  } 
  .cloned-nav-list .header__nav__item:nth-child(1) a:hover {
    border-left: 4px solid var(--clr-charcoal);
  }
  .cloned-nav-list .header__nav__item:nth-child(2) a:hover {
    border-left: 4px solid var(--clr-charcoal);
  }
  .cloned-nav-list .header__nav__item:nth-child(3) a:hover {
    border-left: 4px solid var(--clr-charcoal);
  }
  .cloned-nav-list .header__nav__item:nth-child(4) a:hover {
    border-left: 4px solid var(--clr-charcoal);
  }
  .cloned-nav-list .header__nav__item:nth-child(5) a:hover {
    border-left: 4px solid var(--clr-charcoal);
  }
  .cloned-nav-list-div a {
    z-index: 100;
    opacity: 0;
  }
  .cloned-buttons-div {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0rem;
    right: 1.5rem;
    width: 2rem;
    height: var(--header-height-mobile);
    padding-left: 0rem;
    padding-right: 0rem;
    z-index: 1000;
    animation: slide-in-out;
  }
  .cloned-buttons-div.active {
    animation: slide-in-out ease-out .5s forwards;
  }
    @keyframes slide-in-out {
        100%  {transform: translateX(-1rem);}
    }

  /*------------------------------->
  <---          FOOTER          --->
  <-------------------------------*/
  
  #footer {
    position: relative;
    background-color: var(--clr-black);
    width: 100%;
    height: 30.5rem;
  }
  .footer__head {
    font-size: 150%;
    padding: 6px 0;
    color: var(--footerWhite);
  }
  .footer-content {
    position: relative;
    top: 1.5rem;
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-inline: 7.5%;
  }
  .version {
    float: right;
    position: relative;
    top: 1.5rem;
    margin-inline: 7.5%;
  }
  .footer-li {
   display: flex;
   align-items: center;
  }
  .footer__p {
    font-size: 105%;
    line-height: 180%;
    color: var(--footerWhite);
  }
  .footer-li img {
    margin-right: 10px;
  }
  .footer-copyright {
    position: absolute;
    display: flex;
    width: 95%;
    flex-direction: column;
    justify-content: center;
    right: 50%;
    transform: translateX(50%);
    bottom: 0.5rem;
    padding: 1.25rem 0 .95rem 0rem;
    border-top: 0.5px solid grey;
  }
  .copyright-content {
    text-align: center;
    font-size: 0.85rem;
    line-height: 180%;
    color: var(--clr-white);
  }

  .copyright-content a {
    color: var(--clr-white);
  }

}

/*-------------------------------------------------->
<-----        MOBILE LANDSCAPE > 480px         ----->
<--------------------------------------------------*/

@media only screen and (min-width: 30rem) {

  .header__social-media {
    position: fixed;
    right: 6.25rem;
    display: inherit;
    justify-content: space-between;
    width: 7.5rem;
    height: 100%;
    margin-inline: .8rem;
  }
  .header__search {
    position: fixed;
    right: 3.9rem;
    width: 2.28rem;
    height: 100%;
  }

}

/*-------------------------------------------------->
<-----              TABLET > 768px             ----->
<--------------------------------------------------*/

@media only screen and (min-width: 48rem) {  

  .header__nav__toggle {
    display: none;
  }
  .header__search {
    top: 0.25px;
    right: 1.75rem;
  }
  .header__social-media {
    right: 3.7rem;
    top: 0.25px;
  }
  .header__nav {
    inset: 0 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    right: 12.5rem;
    left: 13.5rem;
    height: 100%;
    background: transparent;
    box-shadow: none;
    padding: 0;
    transition: none;
    transform: translateX(0px);
  }
  .header__icons {
    padding-inline: 0.35rem;
    width: 100%;
  }
  .header__nav__item {
    font-size: 100%;
    padding: 0rem 0.4rem;
    transform: translateY(0rem);
 }
  .cloned-nav-list > .header__nav__item {
    padding: 1rem;
    font-size: 102%;
  }

}

/*-------------------------------------------------->
<-----         SMALL DESKTOP > 1024px          ----->
<--------------------------------------------------*/

@media only screen and (min-width: 64rem) {

  header {
    height: var(--header-height-desktop);
    padding-left: 2.5rem;
  }
  .header__nav {
    right: 16rem;
  }
  .header__nav__item {
    font-size: 105%;
    padding: 0rem .75rem;
  }
  .header__social-media {
    width: 10.25rem;
    right: 4.35rem;
  }
  .header__social-media .header__icons {
    padding-inline: 0.65rem;
    width: 100%;
  }
  .header__search .header__icons {
    padding-inline: 0.15rem;
  }
  .clonedButtonsDiv {
    height: var(--header-height-desktop);
  }

}

/*-------------------------------------------------->
<-----            DESKTOP > 1280px             ----->
<--------------------------------------------------*/

@media only screen and (min-width: 80rem) {

  .header__nav {
    right: 18rem;
  }
  .header__nav__item {
    padding: 0rem 1rem;
  }
  .header__search {
    right: 2.75rem;
  }
  .header__social-media {
    width: 11.25rem;
    right: 5.5rem;
  }
  .header__social-media .header__icons {
    padding-inline: 0.75rem;
    width: 100%;
  }

}

/*-------------------------------------------------->
<-----         LARGE DESKTOP > 1441px          ----->
<--------------------------------------------------*/

@media only screen and (min-width: 90rem) {

  header {
    padding-left: 7rem;
    height: 4.75rem;
  }
  .header__search {
    right: 7rem;
  }
  .header__social-media {
    width: 15rem;
    right: 9.75rem;
    gap: 1.15rem;
    padding-inline: 1rem;
  }
  .header__nav {
    right: 26rem;
  }
  
}