@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

body{
    font-family: "Inter", sans-serif;
}
h1{
    font-size: 92px;
    font-style: normal;
    font-weight: 300;
    line-height: 96px; /* 104.348% */
    letter-spacing: -0.92px;
    font-family: "Jost", sans-serif;
}
h2{
    font-family: "Jost", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 300;
    line-height: normal !important;
    letter-spacing: -0.64px;
    padding-bottom:0 !important;
    
}
h3{
    font-family: "Jost", sans-serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 300;
    line-height: 62px; /* 110.714% */
    letter-spacing: -0.56px;
    padding-bottom:0 !important;
}
h4{
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.84px;
    text-transform: uppercase;
    padding-bottom:0 !important;
}
h5,h6{
    font-family: "Inter", sans-serif;
}
p{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 26px; /* 162.5% */
    margin:0;
}
a{
    font-family: "Inter", sans-serif;
}
a:hover{
    text-decoration:none !important;
    color: white;
}

/*carousel*/
:root {
  --ink: #141112;
  --muted: #6f6663;
  --rose: #b98a84;
  --ivory: #faf6f4;
  --gutter: 20px;
  --gap: 24px;      /* space between cards */
  --per: 3;         /* cards fully visible at once */
  --card-ratio: 410 / 580;
}

 
/* ============ Section ============ */
.categories {
  container-type: inline-size;      /* lets cards size against the section width */
  background: var(--ivory);
  padding: 80px 0;
}
@media (max-width: 640px) { .categories { padding: 32px 0; } }
 
.categories__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0 var(--gutter) 56px;
}
.categories__eyebrow {
  margin: 0 0 20px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--rose);
}
.categories__title {
  margin: 0;
  font: 300 clamp(40px, 5vw, 64px)/1.05 'Jost', sans-serif;
  letter-spacing: -.01em;
}
 
/* ============ Controls ============ */
.controls { display: flex; align-items: center; gap: 20px; }
.controls__count {
  font: 400 15px 'Jost', sans-serif;
  letter-spacing: .1em; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.controls__btn {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(20,17,18,.35);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.controls__btn svg { width: 20px; height: 20px; }
.controls__btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.controls__btn:disabled { opacity: .3; cursor: default; }
.controls__btn:focus-visible,
.track:focus-visible,
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 640px) {
  .categories__head { flex-direction: column; align-items: flex-start; }
  .controls__btn { width: 48px; height: 48px; }
}
 
/* ============ Track ============ */
.track {
  display: flex;
  gap: var(--gap);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.track.is-dragging .card { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .track { scroll-behavior: smooth; } }
 
/* ============ Card ============ */
.card {
  position: relative;
  flex: 0 0 calc((100cqw - 2 * var(--gutter) - (var(--per) - 1) * var(--gap)) / var(--per));
  aspect-ratio: var(--card-ratio);
  scroll-snap-align: start;
  overflow: hidden;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end;
  padding: 32px;
  color: #fff !important; 
  text-decoration: none;
  background: linear-gradient(to bottom, var(--from), var(--to));   /* fallback while no photo */
  user-select: none; -webkit-user-drag: none;
}
/* photo layer: set --img on each card */
.card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--img) center / cover no-repeat;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
/* legibility gradient */
.card::after {
  content: ""; 
  position: absolute; 
  inset: 0;
  background: linear-gradient(to bottom, rgba(11,11,11,0) 45%, rgba(11,11,11,.72) 100%);
}
.card:focus{
    color:#fff;
    text-decoration:none !important;
}
.card > * { 
    position: relative; 
    z-index: 1; 
    
}
.card:hover::before { 
    transform: scale(1.04); 
    
}
 
.card__num {
  position: absolute; 
  top: 32px; 
  left: 32px;
  font: 400 15px 'Jost', sans-serif; 
  letter-spacing: .14em;
}
.card__name {
  margin: 0 0 8px;
  font: 300 clamp(36px, 3.6vw, 52px)/1.1 'Jost', sans-serif;
  letter-spacing: -.01em;
}
.card__desc { margin: 0 0 24px; font-size: 15px; font-weight: 300; opacity: .85; }
.card__link {
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.card__link svg { width: 14px; height: 14px; transition: transform .3s; }
.card:hover .card__link svg { transform: translateX(6px); }
 
/* ============ Progress ============ */
.progress {
  margin: 56px var(--gutter) 0;
  height: 2px; background: rgba(20,17,18,.12);
}
.progress__bar {
  height: 100%; width: 50%;
  background: var(--ink);
  transform-origin: left; 
  transition: width .2s linear;
}
/* ============ Tablet (up to 1024px) ============ */
@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
    --gap: 20px;
    --per: 2;                    /* 2 cards visible, 3rd peeks in */
    --card-ratio: 4 / 5;
  }

  .categories { padding: 96px 0; }

  .categories__head { padding-bottom: 40px; }

  .controls__btn { width: 52px; height: 52px; }

  .card { padding: 28px; }
  .card__num { top: 28px; left: 28px; }
  .card__name { font-size: clamp(34px, 5vw, 44px); }

  .progress { margin-top: 40px; }
}

/* ============ Mobile (up to 640px) ============ */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --gap: 14px;
    --per: 1.15;                 /* 1 card + a peek of the next */
    --card-ratio: 3 / 4;
  }

  .categories { padding: 64px 0; }

  /* stack title above the controls */
  .categories__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-bottom: 32px;
  }
  .categories__title { font-size: 38px; }

  .controls {
    width: 100%;
    gap: 12px;
  }
  .controls__count { margin-right: auto; font-size: 14px; }
  .controls__btn { width: 44px; height: 44px; }
  .controls__btn svg { width: 18px; height: 18px; }

  .card { padding: 24px; }
  .card__num { top: 24px; left: 24px; font-size: 14px; }
  .card__name { font-size: 36px; }
  .card__desc { font-size: 14px; margin-bottom: 18px; }

  .progress { margin-top: 32px; }
}

/* ============ Touch devices ============ */
@media (hover: none) {
  .track { cursor: auto; }                    /* no grab cursor on touch */
  .card:hover::before { transform: none; }    /* no hover zoom */
  .card:hover .card__link svg { transform: none; }
  .controls__btn:hover:not(:disabled) {       /* no sticky hover state after a tap */
    background: transparent; color: var(--ink); border-color: rgba(20,17,18,.35);
  }
}


@media(max-width:600px){
    h1{
        font-size:45px;
        line-height:normal !important;
    }
    h2{
        font-size:35px;
        line-height:normal !important;
    }
    h3{
        font-size:30px;
        line-height:normal !important;
    }
    .flex-1.flex-lg.nav.navbar-nav.flex.items-center{
        justify-content:start !important; 
    }
    .about-div{
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .about-div > h1{
        font-size:45px;
        line-height:normal !important;
    }
    .our-story{
        gap: 20px !important;
        flex-direction: column !important;
    }
    .whole-footer{
        flex-direction: column !important;
        gap: 40px !important;
    }
    .our-prods{
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
    }
    .navbar-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .visible-xs.navbar-brand{
        padding: 14px 0 !important;
    }
    .no-bg-mobile{
        background-image: none !important;
    }
}

.is-btn-ghost2, .is-btn-ghost1 {
	padding: 12px 24px !important;
    color: #000;
    font-family: Inter;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: 0px !important;
    text-transform: uppercase !important;
}
/*.navbar{*/
/*    padding:0 !important;*/
/*}*/
.navbar-brand>img {
    max-width: 150px !important;
    padding: 0px 10px;
}
.navbar-nav > a > img{
    max-width:200px !important;
}
.navbar-nav>li>a{
    font-size: 13px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
    letter-spacing: .84px !important;
    text-transform: uppercase;
}
@media(min-width:600px){
    .home-nav{
        position: absolute !important;
        background: transparent !important;
    }
    div.home-nav > div > div > div > div > div > nav{
        background: transparent;
    }
    .white1 >a {
        color: #fff !important;
    }
    .border-btn1>a{
        color: #fff !important;
        border: 1px solid #fff !important;
        padding: 12px 20px !important;
    }
}

.border-btn>a{
    border: 1px solid rgba(20, 17, 18, 0.70);
    padding: 12px 24px !important;
}
.signin.login-icon.auth{
    margin-right:20px;
}
.contact-div{
    background: #FFF;
    padding: 40px;
}
.form-control{
    background:#fff !important;
    border-radius:0 !important;
    border: 1px solid rgba(20, 17, 18, 0.25) !important;
}
.rendered-form .form-group>label{
    color: #000;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.76px;
    text-transform: uppercase;
}
.send-btn1{
    width:-webkit-fill-available !important;
    color: #FFF !important;
    font-family: Inter;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
    letter-spacing: 1.68px !important;
    text-transform: uppercase !important;
    background: #000 !important;
    padding: 16px 36px !important;
    border-radius:0 !important;
    border:0 !important;
}
@media (min-width: 768px) {
    .is-boxes.is-navigation-box .navbar-nav {
        padding-left: 0px !important;
    }
}

.modal-body > .container {
    max-width: -webkit-fill-available !important;
}
.footer-text, .footer-text>a{
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.company-address, #app > div.footer > div > div:nth-child(1){
    display:none !important;
}
.footer {
    padding-bottom: 10px;
    padding-top: 10px;
}

/*eshop css*/
/*products inside the platform*/
.products-carousel-module .carousel-top-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    margin-right: 10px;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
}
.owl-item{
    display: flex;
    padding: 6px 10px;
    flex-direction: column;
}
.description-wrapper{
    display: flex;
    flex-direction: column;
    align-items:center;
    background-color: #fff;
    padding: 0 20px 15px;
    position: relative;
}
.description-header{
    margin:5px 0 !important;
}
.description-subheader {
    display: none;
}
.description-header{
    text-align:center;
    margin-top:30px !important;
}
.description-header>a{
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
}
.item-preview{
    background: transparent !important;
}
.img-preview{
    display: flex;
    justify-content: center;
    align-items: center;
}

.products-carousel-module .description-wrapper {
    background-color: transparent;
    padding: 0 20px 15px;
    position: relative;
}
.products-carousel-module .product-price {
    font-size: 22px;
    font-weight: 400;
    margin: 4px 0;
}
.product-button{
    margin-top:30px;
    padding: 12px 24px !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.68px;
    text-transform: uppercase;
}
.item-price>strong{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
}
/*end*/

/*shop*/
.item-filters-container .filter-label{
    font-weight:400!important;
}
.shop-item-image{
    max-width: 350px;
}
.add-to-cart-sidebar{
    border-left: 1px solid #C8AA72 !important; 
}
.a-cart-arrow-down, .fa-bags-shopping, .favourited{
    color:#A18043 !important;
}
.heart-icon {
    -webkit-text-stroke-color: #A18043 !important;
}
#ordering-app .apply-coupon-button{
    background:#000 !important;
    color:#fff!important;
    border:1px solid #000 !important;
    border-radius:0 !important;
}
#ordering-app .checkout-container .rightside{
    background: #FFF !important;
    border-left: 1px solid #C8AA72 !important;
    border-top:1px solid #C8AA72 !important
}
.breadcrumb.checkout-breadcrumb li a{
    color:#000;
}
.cart-item-count.badge, .fa-cart-arrow-down{
    background-color: #A18043 !important;
}
.btn-primary, .filters-btn{
    background:#C8AA72 !important;
    color:#000 !important;
    border:1px solid #C8AA72 !important;
    border-radius:0 !important;
}
 .filters-btn:hover{
    background:#C8AA72 !important;
    color:#000 !important;
    border:1px solid #C8AA72 !important;
}
.secondary-button{
    background:transparent !important;
    color:#000 !important;
    border:1px solid #000 !important;
    border-radius:0 !important;
}
.secondary-button:hover{
    background:#C8AA72 !important;
    color:#000 !important;
    border:1px solid #C8AA72 !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
    background:#C8AA72 !important;
    border: 1px solid #C8AA72 !important;
}

/*end of shop*/