/* -------------------------------------------------------------------------- */
/*                                    Fonts                                   */
/* -------------------------------------------------------------------------- */
/* 100 - Thin */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* 200 - ExtraLight */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* 300 - Light */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

/* 400 - Regular */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* 500 - Medium */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* 600 - SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* 700 - Bold */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* 800 - ExtraBold */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

/* 900 - Black */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* -------------------------------------------------------------------------- */
/*                          Override Bootstrap Colors                         */
/* -------------------------------------------------------------------------- */

body {
  color: #111;
  font-family: 'Poppins', sans-serif;
}

@media (max-width: 1199px) {
  .parallax {
    background-attachment: fixed !important;
    position: relative !important;
    background-size: cover !important;
  }
}

/* -------------------------------------------------------------------------- */
/*                             ChoicesJs Overrides                            */
/* -------------------------------------------------------------------------- */
.choices__list--single {
  padding: 0 16px 0 0;
}

.choices {
  margin-bottom: 0px;
}

/* -------------------------------------------------------------------------- */
/*                                    Pages                                   */
/* -------------------------------------------------------------------------- */
/* ---------------------------- Products Listing ---------------------------- */
.products-page {
  .products-header {
    padding-top: 120px;
    padding-bottom: 120px;

    .title {
      margin-bottom: .5em !important;
      line-height: 120%;

      strong {
        font-weight: 700;
        display: block;
      }

      @media (max-width: 767px) {
        font-size: 42px;
      }
    }

    .subtitle {
      font-size: 24px;
      line-height: normal;

      @media (max-width: 767px) {
        font-size: 20px;
        line-height: 160%;
        font-weight: 300;
      }
    }
  }

  .products-listing-header {
    padding-top: 64px;
    padding-bottom: 32px;

    .title {
      font-size: 42px;
      line-height: 120%;
      font-weight: 500;

      @media (max-width: 767px) {
        font-size: 26px;
      }
    }

    .subtitle {
      padding-top: 16px;
      font-size: 16px;
      line-height: normal;
      font-weight: 300;
    }
  }

  .title-line {
    font-size: 32px;
    line-height: 120%;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 16px;
    font-weight: 500;

    @media (max-width: 767px) {
      font-size: 21px;
    }
  }

  .portfolio-caption {
    /* border-top: 1px solid #D9D9D9; */
  }
}

/* ----------------------------- Single Product ----------------------------- */
#product-page {
    .widget-title_simple > div {
        width: 100%;
        display: flex;
        align-items: center;
    }

    h1 {
      color: #000;
      font-size: 60px;
      font-weight: 300;
      line-height: 110%;

      @media (max-width: 767px) {
        font-size: 38px;
        margin-bottom: 2rem;
      }
    }

    .product-text-section {
      padding-top: 90px;

      @media (max-width: 767px) {
        padding-top: 42px;
      }
    }

    .panel-heading {
      background-color: #F4F4F0;
      color: #000;
      padding: 16px 24px;
      font-weight: 600;

      .panel-title {
        padding-right: 24px;
      }

      i {
        right: 24px;
      }
    }

    .panel-body {
      padding: 24px;
    }
}

/* --------------------------------- Project -------------------------------- */
.projects-page {

  .overlay {
    width: 100%;
    height: 100%;
    background-color: #0005;
    display:flex;align-items:center;
  }

  .title {
    color: #fff;

  }
  .subtitle {
    color: #fff;
    font-weight: 200;
    font-size: 36px !important;
  }

  .portfolio-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Widgets                                  */
/* -------------------------------------------------------------------------- */
.widget-section {
  padding: 0 !important;
}


/* --------------------------- .widget-scroll_tour -------------------------- */
.widget-scroll_tour {
  overflow: visible;

    /* ───────────── scroll tour ───────────── */
    .tour{position:relative;background:var(--ink);color:var(--paper-2);
        height:var(--tour-length,560vh)}
    .tour .pin{position:sticky;top:0;height:100vh;overflow:hidden}
    .tour video{position:absolute;inset:0;width:100%;height:100%;
        object-fit:cover;object-position:center;visibility:hidden}
    .tour canvas.frame{position:absolute;inset:0;width:100%;height:100%;
        display:block;object-fit:cover;background:#0e0e0c}
    .tour .loader{position:absolute;inset:0;z-index:6;background:#0e0e0c;
        color:rgba(246,244,239,.7);display:flex;align-items:center;
        justify-content:center;flex-direction:column;gap:18px;
        font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
        text-transform:uppercase;transition:opacity .6s ease}
    .tour .loader.gone{opacity:0;pointer-events:none}
    .tour .loader .bar{width:180px;height:1px;background:rgba(246,244,239,.18);
        position:relative;overflow:hidden}
    .tour .loader .bar i{position:absolute;inset:0;background:#f6f4ef;
        transform-origin:left;transform:scaleX(var(--lp,0));
        transition:transform .15s linear}
    .tour .vignette{position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(120% 80% at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
    .tour .grain{position:absolute;inset:0;pointer-events:none;opacity:.08;
        mix-blend-mode:overlay;
        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

    /* progress chrome */
    .tour .chrome{position:absolute;inset:auto 0 0 0;z-index:5;
        display:flex;justify-content:space-between;align-items:center;
        padding:22px 36px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
        text-transform:uppercase;color:rgba(246,244,239,.65)}
    .tour .progress{flex:1;height:1px;margin:0 24px;background:rgba(246,244,239,.18);
        position:relative;overflow:hidden}
    .tour .progress i{position:absolute;inset:0;background:#fff;
        transform-origin:left;transform:scaleX(var(--p,0))}
    .tour .index{font-variant-numeric:tabular-nums}

    /* overlay text layers */
    .layer{position:absolute;inset:0;display:flex;padding:0 36px;
        pointer-events:none;will-change:opacity,transform;opacity:0}
    .layer.center{align-items:center;justify-content:center;text-align:center}
    .layer.tl{align-items:flex-start;justify-content:flex-start;
        padding-top:14vh;padding-left:7vw}
    .layer.br{align-items:flex-end;justify-content:flex-end;
        padding-bottom:14vh;padding-right:7vw;text-align:right}
    .layer.bl{align-items:flex-end;justify-content:flex-start;
        padding-bottom:14vh;padding-left:7vw}
    .layer h2{color:#fff;font-family:var(--display);font-weight:300;
        font-size:clamp(56px,8vw,100px);line-height:.95;letter-spacing:-.015em;
        margin:0;max-width:18ch}
    .layer h2 em{font-style:italic;}
    .layer h2 .br{display:block}
    .layer .cap{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
        text-transform:uppercase;color:rgba(246,244,239,.6);
        margin-bottom:24px;display:flex;gap:14px;align-items:center}
    .layer .cap::before{content:"";display:block;width:36px;height:1px;
        background:currentColor;opacity:.8}
    .layer .sub{font-family:var(--sans);font-weight:300;font-size:15px;
        line-height:1.6;max-width:42ch;color:rgba(246,244,239,.78);margin-top:24px}

    /* ───────────── responsive ───────────── */
    @media (max-width: 900px){
        .layer.tl,.layer.bl{padding-left:24px}
        .layer.br{padding-right:24px}
        .tour .chrome{padding:18px 20px}
    }
}

/* -------------------------- .widget-title_simple -------------------------- */
.widget-title_simple {
  .title {
    font-weight: 600;
    font-size: 64px;
    line-height: normal;
  }

  .subtitle {
    font-size: 40px;
    line-height: normal;
  }

  @media (max-width:767px) {
    .title {
      font-size: 42px;
    }

    .subtitle {
      font-size: 24px;
    }
  }
}

/* --------------------------- .widget-card_split --------------------------- */
.widget-card_split {
  .subtitle {
    font-size: 10px;
    font-weight: 400;
    line-height: 102%;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    border-left: 2px solid #000;
    padding: 8px 0 8px 24px;
  }

  .title {
    font-size: 47px;
    line-height: 110%;

    @media (max-width: 576px) {
      font-size: 32px;
    }
  }

  .link {
    font-size: 10px;
    text-transform: uppercase;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    transition: all 0.1s ease;

    &:hover {
      -webkit-text-stroke: 0.5px currentColor;
    }
  }
}

/* -------------------------- .widget-img_and_text -------------------------- */
.widget-img_and_text {
  .img-container {
    position: relative;
    width: 100%;
  }

  .img-container_inner {
    padding: 42px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .subtitle {
    font-size: 10px;
    font-weight: 400;
    line-height: 102%;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    border-left: 2px solid #000;
    padding: 8px 0 8px 24px;
  }

  .title {
    font-size: 47px;
    line-height: 110%;

    @media (max-width: 576px) {
      font-size: 32px;
    }
  }

  .link {
    font-size: 10px;
    text-transform: uppercase;
    color: #000;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    transition: all 0.1s ease;

    &:hover {
      -webkit-text-stroke: 0.5px currentColor;
    }
  }

  .html {
    margin-bottom: 1em;

    ul {
      margin-left: 1em;
    }
  }

  .a-title {
    font-size: 19px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0;
  }

  .a-subtitle {
    font-size: 19px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 0;
  }

  .a-link {
    margin-top: 1em;

  }
}

/* -------------------------- .widget-cards_w_icons ------------------------- */
.widget-cards_w_icons {

  .item {
    height: auto;
  }

  .item-card {
    border-radius: 2px;
    border: 1px solid rgba(175, 179, 174, 0.10);
    background: #F4F4F0;
    padding: 32px;
    height: 100%;
  }

  .icon {
    margin-bottom: 24px;
  }

  .title {
    margin-bottom: .75em;
    font-size: 23px;
    color: #000;
    line-height: 130%;
    font-weight: 500;
  }

  .subtitle {
    margin-bottom: 0;
    line-height: 173%;
  }
}

/* ----------------------- .widget-sentence_with_link ----------------------- */
.widget-sentence_with_link {
  .title {
    line-height: 120%;
  }
}

/* --------------------------- .widget-breadcrumbs -------------------------- */
.widget-breadcrumbs {
  a {
    color: #000;
  }
}

.breadcrumb {
  a {
    color: #000;
  }

  .last {
    color: #777;
  }
}

/* ------------------------- .widget-portfolio_metro ------------------------ */
.widget-portfolio_metro {

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 32px;

    .title {
      font-size: 28px;
      flex-shrink: 0;
      margin-bottom: 0;
    }
  }

  .filter-item {

    a {
      color: rgba(0, 0, 0, 0.49);
      font-size: 13px;
      line-height: normal;
      font-weight: 500;
      border-bottom: 2px solid transparent;

      &:hover {
        color: #000;
      }
    }

    &.active {
      a {
        color: #000;
        border-bottom: 2px solid #000;
      }
    }
  }

  .jnf-portfolio-content {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 30px 25px;
  }

  .jnf-portfolio-box:hover .jnf-portfolio-hover {
      opacity: 1;
  }

  .jnf-portfolio-hover {
      background-color: #0008;
      mix-blend-mode: multiply;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
      transition: all 0.4s ease-in-out;
  }

  .jnf-portfolio-content_inner {
      position: relative;
      height: 100%;
      color: #fff;
  }
  .jnf-portfolio-content .jnf-title {
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.4s ease-in-out;
      font-weight: 400;
      text-align: left;
  }
  .jnf-portfolio-box:hover .jnf-portfolio-content .jnf-title {
      top: 32px;
  }

  .jnf-portfolio-content .jnf-subtitle {
      font-size: 14px;
      position: absolute;
      top: -20px;
      left: 0;
      opacity: 0;
      transition: all 0.4s ease-in-out;
  }
  .jnf-portfolio-box:hover .jnf-portfolio-content .jnf-subtitle {
      top: 0;
      opacity: 1;
  }

  .jnf-portfolio-content .jnf-view-more {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 15px;
      color: #fff;
      opacity: 0;
      transition: all 0.4s ease-in-out;
      transform: translateY(100%);
  }
  .jnf-portfolio-box:hover .jnf-portfolio-content .jnf-view-more {
      opacity: 1;
      transform: translateY(0);
  }
}

/* ----------------------- .widget-form_contact_w_list ---------------------- */
.widget-form_contact_w_list {
  .title {
    margin-bottom: 64px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 32px;

    img {
      max-width: 64px;
      margin-right: 16px;
    }

    .item-title {
      margin-bottom: 0;
      font-size: 19px;
    }
    .item-subtitle {
      margin-bottom: 0;
      font-size: 14px;
      color: #777;
    }
  }

  .contact-form {
    background: #F4F4F0;
    padding: 64px;

    @media (max-width: 575px) {
      padding: 32px;
    }

    .input-field {
      border: none;
      border-bottom: 1px solid #000;
      border-radius: 0;
      background: transparent;
      margin-bottom: 16px;
    }

    .input-textarea {
      border: none;
      border-bottom: 1px solid #000;
      border-radius: 0;
      background: transparent;
      margin-bottom: 16px;

      max-height: 200px;
      overflow-y: hidden;     /* hides scrollbar until max-height is reached */
      resize: none;           /* disables manual resize handle */
      box-sizing: border-box;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                               Generic Styles                               */
/* -------------------------------------------------------------------------- */

/* ---------------------------------- Menu ---------------------------------- */

.header-search-icon, .header-cart-icon, .header-language, .header-push-button, .header-button {
  padding-left: 0;
}

.header-right-link {
  padding: 12px 6px;
}

.navbar.bg-white {
  background-color: #CBC7BF !important;
}

.sticky.header-appear .header-light, .sticky .header-light.header-always-fixed-scroll {
  background-color: #CBC7BF !important;
}

@media (max-width: 991px) {
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-toggler-line {
        background-color: #000000;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .nav-item a, [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .nav-item i, [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .nav-item.dropdown.simple-dropdown .dropdown-menu > .dropdown > a {
        color: #000000;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner {
      background-image: linear-gradient(to right top, #CBC7BF, #CBC7BF, #CBC7BF, #CBC7BF, #CBC7BF);
    }
}

/* ------------------------------- text-hover ------------------------------- */
.text-jnf-hover .jnf-arrow {
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.text-jnf-hover:hover .jnf-arrow {
    /* text-shadow: 0 0 2px; */
    /* font-weight: 600; */
    opacity: 1;
}

.text-jnf-hover:hover .cm-animated-line-left:before {
    background-position: 0%;
    width:100%;
}
.text-jnf-hover:hover .cm-animated-line-left:before {
    background-position: 0%;
    width:100%;
}

.cm-animated-line-left-container {
    position: relative;
    display: block;
    margin-top: -3px;
}

.cm-animated-line-left:before{
	display:block;
    content:'';
    width:0;
    height:1px;
    bottom:5px;
    left:0;
    bottom:-3px;
    z-index:0;
    position:absolute;
    background:#000;
    transition: all 0.4s ease-in-out;
}


/* -------------------------------------------------------------------------- */
/*                                 Scrollbars                                 */
/* -------------------------------------------------------------------------- */
  
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #ababab #ffffff;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #00000077 #00000000 !important;
}