@charset "utf-8";
/* CSS Document */

#cssmenu ul ul,#cssmenu ul ul ul{position:absolute;left:-9999px;z-index:1000}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{margin:0 0 -2px;padding:0;border:0;list-style:none;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:150}#cssmenu:after,#cssmenu>ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}#cssmenu #menu-button,#cssmenu ul ul li.has-sub>a:before{display:none}#cssmenu>ul>li{float:left}#cssmenu.align-center>ul{font-size:0;text-align:center}#cssmenu.align-center>ul>li{display:inline-block;float:none}#cssmenu ul ul li.has-sub>a:after,#cssmenu ul ul li.has-sub>a:before{position:absolute;display:block;content:'\f105';font-family:FontAwesome}#cssmenu.align-center ul ul{text-align:left}#cssmenu.align-right>ul>li{float:right}#cssmenu>ul>li>a{text-decoration:none;transition:.5s}#cssmenu>ul>li:hover>a{transition:.5s}#cssmenu ul ul{margin-top:0}#cssmenu.align-right ul ul{text-align:right}#cssmenu ul ul li{transition:.25s;margin-bottom:11px;padding:0;width:200px;text-transform:capitalize!important;position:relative;height:30px}#cssmenu li:hover>ul{left:auto}#cssmenu.align-right li:hover>ul{left:auto;right:0}#cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%}#cssmenu ul ul li.last-item>a,#cssmenu ul ul li:last-child>a{border-bottom:0}#cssmenu ul ul li.has-sub>a:after{top:16px;right:7px;width:8px;height:2px}#cssmenu>ul>li.has-sub>a{padding-right:10px}#cssmenu>ul>li a{border:none}#cssmenu>ul ul li a{border:none;padding-bottom:10px!important}#cssmenu>ul>li a:hover{color:#08693f}#cssmenu>ul ul{margin-top:14px}#cssmenu>ul ul li a:hover{background:0 0;transition:.5s}#cssmenu ul{padding:0}#cssmenu ul ul{top:50px;opacity:0;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s}#cssmenu ul ul ul{margin-left:100%;top:0;opacity:1;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s;background:#492b2d;margin-top:0}#cssmenu>ul>li:hover>ul{left:auto;top:20px;opacity:1}#cssmenu ul ul li a{border-bottom:1px solid rgba(143,143,143,.5);border-bottom:none;padding:11px;text-transform:capitalize;font-size:12px;color:#fff;-webkit-transition:.35s;margin:0!important;-moz-transition:.35s;-ms-transition:.35s;-o-transition:.35s;transition:.35s}#cssmenu ul ul li.has-sub::after{right:10px;top:12px;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;-webkit-transition:-webkit-transform .2s,right .2s}@media all and (max-width:900px){#cssmenu #menu-button,#cssmenu .submenu-button{position:absolute;right:0;display:block;cursor:pointer}#cssmenu,#cssmenu .submenu-button.submenu-opened{background:0 0}#cssmenu ul li a{color:#fff!important}#cssmenu .submenu-button.submenu-opened:before,#cssmenu ul,#cssmenu ul ul>li.has-sub>a:after,#cssmenu ul ul>li.has-sub>a:before,#cssmenu>ul>li.has-sub>a:after,#cssmenu>ul>li.has-sub>a:before{display:none}#cssmenu ul ul li{width:100%!important;margin-bottom:0}#cssmenu ul{width:100%;margin-top:0;padding:0 10px}#cssmenu.align-center>ul{text-align:left}#cssmenu ul li{width:100%}#cssmenu li:hover>ul>li,#cssmenu ul ul li{height:auto}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}#cssmenu>ul>li{float:none;padding-bottom:17px!important;padding-top:8px}#cssmenu ul ul ul li a{padding-left:35px}#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}#cssmenu #menu-button:after,#cssmenu #menu-button:before{right:8px;width:30px;content:'';position:absolute}#cssmenu #menu-button{padding:17px;color:#ddd;font-size:12px;text-transform:uppercase;font-weight:700;width:46px;border-radius:4px}#cssmenu #menu-button:after{top:16px;display:block;height:8px;border-top:2px solid #ddd;border-bottom:2px solid #ddd}#cssmenu #menu-button:before{top:10px;display:block;height:2px;background:#ddd}#cssmenu ul ul .submenu-button{height:34px;width:34px}#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;content:''}#cssmenu ul ul .submenu-button:after{top:15px;right:13px}#cssmenu .submenu-button.submenu-opened:after{content:'\f068';font-family:FontAwesome;color:#fff}#cssmenu .submenu-button:before{position:absolute;top:19px;right:19px;display:block;height:8px;content:'\f067';font-family:FontAwesome;color:#fff}#cssmenu ul ul .submenu-button:before{top:12px;right:16px}#cssmenu .submenu-button::after,#cssmenu .submenu-button::before{top:11px}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{z-index:auto}#cssmenu{position:fixed;z-index:160;right:15px;width:91.5%;border-radius:2px}ul.socialMedia{float:left}#cssmenu>ul>li>a{padding-bottom:15px}#cssmenu ul ul{padding:0;opacity:1}#cssmenu ul ul li a{background:0 0;font-size:12px;padding-bottom:5px;padding-left:20px!important}#cssmenu .submenu-button{z-index:99;top:0;height:38px;border:none}#cssmenu>ul ul{top:0;margin-top:0}}@media (min-width:768px) and (max-width:1024px){.sliderC{margin-top:0}#cssmenu #menu-button{right:14px}.addressBox{height:120px}@media (min-width:603px) and (max-width:966px){#cssmenu>ul>li a{padding:10px 13px!important}.addressBox h6{font-size:13px}}}@media (max-width:760px){#cssmenu .submenu-button{width:50px}#cssmenu ul ul{background:#404040!important;top:0!important}#cssmenu ul ul li{width:100%!important}.spcificHeight{height:400px!important;overflow-y:scroll!important}#cssmenu>ul>li{padding:0;padding-bottom:0!important}#cssmenu>ul>li a{padding:10px!important}#cssmenu #menu-button{background:#dadada;border:1px solid #fff}#cssmenu #menu-button::before{background:#7b8284}#cssmenu #menu-button::after{border-bottom:2px solid #7b8284;border-top:2px solid #7b8284}}






 :root {
      --jff-orange: #f5822a;
      --jff-text: #0b0b0b;
      --jff-muted: #858585;
      --jff-light: #f4f4f4;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Poppins", sans-serif;
      color: var(--jff-text);
      background: #fff;
      overflow-x: hidden; 
    }

    /* =========================
       HERO / BANNER
    ========================= */
    .jff-hero {
      position: relative;
    
      align-items: center;
      overflow: hidden;
      background: #fff;
   padding: 0px 0 0px;
    }

    .jff-hero::before {
      content: "";
      position: absolute;
      width: 460px;
      height: 460px;
      right: -180px;
      top: -170px;
      border-radius: 50%;
      background: rgba(245, 130, 42, 0.045);
      pointer-events: none;
    }

    .jff-hero-content {
      position: relative;
      z-index: 2;
    }

    .jff-logo {
      width: min(350px, 72vw);
      height: auto;
      display: block;
      margin-bottom: 40px;
      animation: logoReveal .9s ease both;
    }

    .jff-title {
      font-size: clamp(48px, 5.1vw, 86px);
      line-height: .98;
      letter-spacing: -3px;
      font-weight: 700;
      margin: 0 0 28px;
      max-width: 720px;
      animation: textUp .9s .15s ease both;
    }

    .jff-title .orange {
      color: var(--jff-orange);
    }

    .jff-description {
      max-width: 680px;
      color: var(--jff-muted);
      font-size: 17px;
      line-height: 1.8;
      font-weight: 400;
      margin-bottom: 42px;
      animation: textUp .9s .3s ease both;
    }

    .jff-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      animation: textUp .9s .45s ease both;
    }

    .jff-btn {
      min-width: 270px;
      min-height: 64px;
      border-radius: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 14px 30px;
      font-size: 20px;
      font-weight: 400;
      text-decoration: none;
      transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    }

    .jff-btn:hover {
      transform: translateY(-4px);
    }

    .jff-btn-primary {
      color: #fff;
      background: var(--jff-orange);
      box-shadow: 0 14px 30px rgba(245, 130, 42, .18);
    }

    .jff-btn-primary:hover {
      color: #fff;
      background: #e9731d;
      box-shadow: 0 18px 38px rgba(245, 130, 42, .25);
    }

    .jff-btn-secondary {
      color: #111;
      background: #dedede;
    }

    .jff-btn-secondary:hover {
      color: #111;
      background: #d3d3d3;
    }

    .jff-arrow {
      font-size: 28px;
      line-height: 1;
      transition: transform .3s ease;
    }

    .jff-btn:hover .jff-arrow {
      transform: translateX(6px);
    }

    /* Food image */
    .jff-food-wrap {
      position: relative;
      z-index: 1;
     
      align-items: center;
      justify-content: center;
   
      animation: foodReveal 1.1s .15s cubic-bezier(.2,.8,.2,1) both;
    }

    .jff-food {
      width: min(900px, 58vw);
      max-width: none;
      height: auto;
      transform: translateX(4%);
      filter: drop-shadow(0 28px 30px rgba(0,0,0,.08));
      animation: foodFloat 5s ease-in-out 1.2s infinite;
    }

    /* Decorative floating dots */
    .jff-dot {
      position: absolute;
      border-radius: 50%;
      background: var(--jff-orange);
      opacity: .18;
      animation: dotFloat 5s ease-in-out infinite;
    }

    .jff-dot-1 {
      width: 18px;
      height: 18px;
      right: 7%;
      top: 20%;
    }

    .jff-dot-2 {
      width: 10px;
      height: 10px;
      right: 20%;
      bottom: 15%;
      animation-delay: 1s;
    }

    /* Demo destination sections */
    .jff-demo {
      min-height: 500px;
      padding: 100px 0;
      background: #fafafa;
    }

    .jff-demo-card {
      border-radius: 28px;
      background: #fff;
      padding: 50px;
      box-shadow: 0 15px 50px rgba(0,0,0,.06);
    }

    /* Animations */
    @keyframes logoReveal {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes textUp {
      from { opacity: 0; transform: translateY(35px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes foodReveal {
      from { opacity: 0; transform: translateX(80px) scale(.94); }
      to { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes foodFloat {
      0%, 100% { transform: translateX(4%) translateY(0) rotate(0deg); }
      50% { transform: translateX(4%) translateY(-14px) rotate(.4deg); }
    }

    @keyframes dotFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-18px); }
    }

    @media (max-width: 991.98px) {
      .jff-hero {
        min-height: auto;
        padding: 55px 0 80px;
      }

      .jff-logo {
        margin: 0 auto 28px;
      }

      .jff-title,
      .jff-description {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .jff-title {
        letter-spacing: -2px;
      }

      .jff-actions {
        justify-content: center;
      }

      .jff-food-wrap {
        min-height: auto;
        margin-top: 35px;
      }

      .jff-food {
        width: min(760px, 100vw);
        transform: none;
      }

      @keyframes foodFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
      }
    }

    @media (max-width: 575.98px) {
      .jff-hero {
        padding-top: 35px;
      }

      .jff-title {
        font-size: clamp(42px, 12vw, 60px);
        line-height: 1.02;
      }

      .jff-description {
        font-size: 14px;
        line-height: 1.7;
        padding: 0 10px;
      }

      .jff-actions {
        flex-direction: column;
        align-items: center;
      }

      .jff-btn {
        width: min(100%, 330px);
        min-width: 0;
        min-height: 58px;
        font-size: 17px;
      }

      .jff-food {
        width: 120vw;
        max-width: none;
        margin-left: -10vw;
      }

      .jff-demo-card {
        padding: 30px 22px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }



.right-img{ overflow:hidden;}

.right-img img{ width:100%}

.logo{ overflow:hidden;}
.logo img{ max-width:100%;}

/* =========================================
   JUST FIT FOOD - HERO ANIMATIONS
   CSS ONLY
========================================= */

/* Hero content animation */
.jff-hero-content {
    animation: heroContentIn 1s ease-out both;
}

/* Logo */
.jff-hero-content .logo {
    animation: logoIn 0.8s ease-out 0.1s both;
}

/* Main heading */
.jff-title {
    animation: titleIn 0.9s ease-out 0.25s both;
}

/* Description */
.jff-description {
    animation: descriptionIn 0.9s ease-out 0.4s both;
}

/* Button */
.jff-actions {
    animation: buttonIn 0.8s ease-out 0.55s both;
}


/* =========================================
   FOOD IMAGE
========================================= */

.jff-food-wrap {
    animation: foodWrapIn 1.1s cubic-bezier(.22, 1, .36, 1) 0.15s both;
}

.right-img {
    animation:
        foodImageIn 1.1s cubic-bezier(.22, 1, .36, 1) 0.15s both,
        foodFloat 5s ease-in-out 1.5s infinite;
}

.right-img img {
    display: block;
    transition: transform 0.5s ease;
}

/* Slight zoom on hover */
.jff-food-wrap:hover .right-img img {
    transform: scale(1.04) rotate(1deg);
}


/* =========================================
   DECORATIVE DOTS
========================================= */

.jff-dot {
    animation: dotPulse 3s ease-in-out infinite;
}

.jff-dot-1 {
    animation-delay: 0.5s;
}

.jff-dot-2 {
    animation-delay: 1.2s;
}


/* =========================================
   BUTTON HOVER
========================================= */

.jff-btn {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.jff-btn:hover {
    transform: translateY(-4px);
}

.jff-btn .jff-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.jff-btn:hover .jff-arrow {
    transform: translateX(5px);
}


/* =========================================
   DEMO SECTIONS
========================================= */

.jff-demo-card {
    animation: demoCardIn 0.8s ease-out both;
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes logoIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes titleIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes descriptionIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buttonIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes foodWrapIn {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes foodImageIn {
    from {
        opacity: 0;
        transform: scale(0.85) rotate(4deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes foodFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes dotPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

@keyframes demoCardIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   ACCESSIBILITY
   Respect users who prefer reduced motion
========================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 991.98px) {

    .jff-hero-content {
        animation-name: mobileContentIn;
    }

    .jff-food-wrap {
        animation-name: mobileFoodIn;
    }

    .right-img {
        animation:
            mobileFoodIn 1s cubic-bezier(.22, 1, .36, 1) 0.3s both,
            foodFloat 5s ease-in-out 1.5s infinite;
    }
}

@keyframes mobileContentIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mobileFoodIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   JUST FIT FOOD
   OUR PRODUCTS / TOP LIST MENU
========================================================= */

.our-products {
    position: relative;
    padding: 55px 0 85px;
    overflow: hidden;

    background:
       #f1f1f1;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.our-products-heading {
    position: relative;
    z-index: 5;

    margin-bottom: 30px;

    animation: productsHeadingIn .9s ease both;
}

.our-products-subtitle {
    color: #f58220;

    font-size: 25px;
    font-weight: 500;

    letter-spacing: 10px;
    line-height: 1.2;

    margin-bottom: 8px;
}

.our-products-title {
  margin: 0;
  font-size: 50px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: 1px;
}

.our-products-title span {
    color: #000;
}

.our-products-title strong {
    color: #f58220;
    font-weight: 800;
}

.our-products-menu-title {
    margin-top: 17px;

    color: #000;

    font-size: 45px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   OWL CAROUSEL WRAPPER
========================================================= */

.our-products-slider {
    position: relative;

    width: 100%;

   
}


/*
   Gives the center card enough room when enlarged.
*/
#owl-carousel-product {
    position: relative;

   
}


/* =========================================================
   OWL ITEM
========================================================= */

#owl-carousel-product .owl-item {
    padding: 15px 12px 25px;

    transition:
        opacity .4s ease,
        transform .5s ease;
}


/*
   Side cards are slightly faded.
*/
#owl-carousel-product .owl-item:not(.center) {
    opacity: .82;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.our-product-card {
    position: relative;

   
    padding: 15px;

    border-radius: 30px;

    background: #fff;

   
    }


/* =========================================================
   CENTER / ACTIVE PRODUCT
========================================================= */

#owl-carousel-product .owl-item.center {
    position: relative;

    z-index: 20;

    opacity: 1;
}


/*
   MAIN FOCUS CARD
*/
#owl-carousel-product .owl-item.center .our-product-card {

    transform:
        translateY(-18px)
        scale(1.08);

    background: #eef0ef;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .13);
}


/* Side card sizes */
#owl-carousel-product .owl-item:not(.center) .our-product-card {

    transform:
        translateY(10px)
        scale(.96);

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.our-product-image {

    width: 100%;


    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    overflow: visible; height:95px;
}


/* Food image */

.our-product-image img {

    width: 100%;
    height: 100%;

    max-width: 340px;

    object-fit: contain;

    display: block;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        filter .4s ease;
}


/* Center image becomes bigger */

#owl-carousel-product
.owl-item.center
.our-product-image img {


    transform: scale(1.08) translateY(-5px);

}


/* Hover image */

.our-product-card:hover
.our-product-image img {

    transform:
        scale(1.10)
        translateY(-8px);

}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.our-product-content {

    flex: 1;

    display: flex;
    flex-direction: column;

    padding-top: 12px;

}




  .our-product-content h3 {
  margin: 0 0 10px;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  min-height: 54px;
  align-content: center;

}


/* Center title */

#owl-carousel-product
.owl-item.center
.our-product-content h3 {

    font-size: clamp(36px, 3.2vw, 50px);

}


/* =========================================================
   BOTTOM CONTENT
========================================================= */

.our-product-bottom {

/*
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;*/text-align: center;
  margin: 0px auto;

}


.our-product-bottom p {

    margin: 0;

    max-width: 285px;

    color: #333;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 400;

}


/* Center description */

#owl-carousel-product
.owl-item.center
.our-product-bottom p {

    font-size: 17px;

}


/* =========================================================
   PLUS BUTTON
========================================================= */

.our-product-plus {

    width: 55px;
    height: 55px;

    min-width: 55px;

    border-radius: 50%;

    background: #f58220;

    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    position: relative;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-color .3s ease;

}


.our-product-plus span {

    font-family: Arial, sans-serif;

    font-size: 28px;

    font-weight: 200;

    line-height: 1;

    margin-top: -4px;

}


/* Center plus */

#owl-carousel-product
.owl-item.center
.our-product-plus {

    width: 60px;
    height: 60px;

    min-width: 60px;

}


/* Plus hover */

.our-product-plus:hover {

    color: #fff;

    transform:
        rotate(90deg)
        scale(1.12);

    box-shadow:
        0 8px 25px rgba(245, 130, 32, .38);

}


/* =========================================================
   OWL NAVIGATION
========================================================= */

/*
   Owl Carousel creates these automatically
*/
#owl-carousel-product .owl-nav {

    margin: 0;

}


/* Both buttons */

#owl-carousel-product .owl-nav button.owl-prev,
#owl-carousel-product .owl-nav button.owl-next {

    position: absolute;

    top: 50%;

    width: 44px;
    height: 44px;

    margin: 0;

    border: 0;

    border-radius: 50%;

    background: #f58220;

    color: #fff;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 1;

    z-index: 50;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;

}


/* Previous */

#owl-carousel-product .owl-nav button.owl-prev {

    left: -15px;

    transform:
        translateY(-50%);

}


/* Next */

#owl-carousel-product .owl-nav button.owl-next {

    right: -15px;

    transform:
        translateY(-50%);

}


/* Owl default text */

#owl-carousel-product .owl-nav button span {

    font-family: Arial, sans-serif;

    font-size: 55px;

    font-weight: 200;

    line-height: .7;

    margin-top: -7px;

}


/* Previous hover */

#owl-carousel-product .owl-nav button.owl-prev:hover {

    background: #f58220;

    transform:
        translateY(-50%)
        translateX(-5px);

    box-shadow:
        0 8px 25px rgba(245, 130, 32, .35);

}


/* Next hover */

#owl-carousel-product .owl-nav button.owl-next:hover {

    background: #f58220;

    transform:
        translateY(-50%)
        translateX(5px);

    box-shadow:
        0 8px 25px rgba(245, 130, 32, .35);

}


/* =========================================================
   OWL DOTS
========================================================= */

#owl-carousel-product .owl-dots {

    margin-top: 8px;

    display: flex;

    justify-content: center;

    gap: 7px;

}


#owl-carousel-product .owl-dots button.owl-dot {

    width: 9px;
    height: 9px;

    margin: 0;

}


#owl-carousel-product .owl-dots button.owl-dot span {

    width: 8px;
    height: 8px;

    margin: 0;

    background: #d5d5d5;

    transition:
        width .3s ease,
        background-color .3s ease;

}


#owl-carousel-product
.owl-dots
button.owl-dot.active span {

    width: 25px;

    background: #f58220;

    border-radius: 10px;

}


/* =========================================================
   HEADING ANIMATION
========================================================= */

@keyframes productsHeadingIn {

    from {

        opacity: 0;

        transform:
            translateY(-25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991.98px) {

    .our-products {

        padding:
            45px 0
            65px;

    }


    .our-products-subtitle {

        font-size: 19px;

        letter-spacing: 7px;

    }


    .our-products-title {

        font-size: 55px;

    }


    .our-products-menu-title {

        font-size: 38px;

    }


    .our-products-slider {

        padding:
            15px 45px 20px;

    }


    #owl-carousel-product
    .owl-item {

        padding:
            15px 10px 25px;

    }


    .our-product-card {

        min-height: 500px;

        padding:
            22px 28px 25px;

    }


    /*
       Keep center effect but make it
       slightly smaller on tablet.
    */

    #owl-carousel-product
    .owl-item.center
    .our-product-card {

        transform:
            translateY(-12px)
            scale(1.04);

    }


    #owl-carousel-product
    .owl-item.center
    .our-product-image img {

        transform:
            scale(1.04);

    }


    #owl-carousel-product
    .owl-nav button.owl-prev {

        left: -5px;

    }


    #owl-carousel-product
    .owl-nav button.owl-next {

        right: -5px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .our-products {

        padding:
            40px 0
            55px;

    }


    .our-products-subtitle {

        font-size: 15px;

        letter-spacing: 5px;

    }


    .our-products-title {

        font-size: 48px;

        letter-spacing: -2px;

    }


    .our-products-menu-title {

        font-size: 32px;

        margin-top: 12px;

    }


    .our-products-slider {

        padding:
            10px 35px 20px;

    }


    #owl-carousel-product {

        padding:
            15px 0
            25px;

    }


    .our-product-card {

        min-height: 475px;

        border-radius: 25px;

        padding:
            20px 25px
            25px;

    }


    .our-product-image {

        height: 240px;

    }


    .our-product-content h3 {

        font-size: 35px;

        margin-bottom: 25px;

    }


    .our-product-bottom p {

        font-size: 15px;

    }


    /*
       Only one product on mobile,
       so center focus is removed.
    */

    #owl-carousel-product
    .owl-item.center
    .our-product-card {

        transform:
            translateY(0)
            scale(1);

    }


    #owl-carousel-product
    .owl-item.center
    .our-product-image img {

        transform: scale(1);

    }


    #owl-carousel-product
    .owl-nav button.owl-prev,
    #owl-carousel-product
    .owl-nav button.owl-next {

        width: 48px;
        height: 48px;

    }


    #owl-carousel-product
    .owl-nav button span {

        font-size: 43px;

    }


    #owl-carousel-product
    .owl-nav button.owl-prev {

        left: -8px;

    }


    #owl-carousel-product
    .owl-nav button.owl-next {

        right: -8px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .our-products-slider {

        padding-left: 28px;
        padding-right: 28px;

    }


    .our-product-card {

        min-height: 450px;

    }


    .our-product-image {

        height: 220px;

    }


    .our-product-content h3 {

        font-size: 32px;

    }


    .our-product-plus {

        width: 48px;
        height: 48px;

        min-width: 48px;

    }


    .our-product-plus span {

        font-size: 36px;

    }


    #owl-carousel-product
    .owl-nav button.owl-prev {

        left: -12px;

    }


    #owl-carousel-product
    .owl-nav button.owl-next {

        right: -12px;

    }

}

#owl-carousel-product
.owl-nav button.owl-prev::before {
    content: "\f053";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 21px;
}

#owl-carousel-product
.owl-nav button.owl-next::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 21px;
}


/* =========================================================
   JUST FIT FOOD - MENU CATEGORY SECTION
   SALADS
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.jff-menu-section {
    position: relative;
    width: 100%;

    padding: 0 0 80px;

    overflow: hidden;

    background: #fdfdfc;

    scroll-margin-top: 80px; 
}


/* =========================================================
   INNER CONTAINER
========================================================= */

.jff-menu-inner {
    position: relative;

    width:90%;

    margin: 0 auto;
}


/* =========================================================
   TOP "MENU" ORANGE TAB
========================================================= */

.jff-menu-label {
    position: absolute;

    top: 0;
    right: 0;

    width: 300px;
    height: 120px;

    background: #f58220;

    border-radius:
        0 0 30px 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: 26px;
    font-weight: 700;

    letter-spacing: 15px;

    z-index: 50;
}


/* =========================================================
   HERO
========================================================= */

.jff-menu-hero {
    position: relative;

    width: 100%;

   

    overflow: visible; margin-top:45px;
}


/* =========================================================
   FOOD WRAPPER
========================================================= */


/* =========================================================
   ORANGE HALF-CIRCLE
   -----------------------------------------
   IMPORTANT:
   This is created using ::before
   on .jff-menu-hero-food
========================================================= */


/* =========================================================
   SALAD IMAGE
========================================================= */


.jffimg-out{ position:relative; width:auto;}

.half-circle{ position:absolute; right:0; top:0;}
.half-circle img{ max-width:100%;}


.jff-menu-hero-food img {

}


/* =========================================================
   FOOD HOVER
========================================================= */

.jff-menu-hero-food:hover img {

    transform:
        scale(1.025);
}


/* =========================================================
   BRAND
========================================================= */

.jff-menu-brand {

    position: absolute;

    right: 60px;
top: 195px;

    width: 390px;

    text-align: center;

    z-index: 20;
}


/* =========================================================
   BRAND MARK
========================================================= */

.jff-brand-mark {

    position: relative;

    width: 45px;
    height: 120px;

    margin: 0 auto 12px;

    overflow: hidden;
}


/* Grey vertical section */

.jff-brand-mark::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8px;

    width: 20px;
    height: 92px;

    background: #666666;

    border-radius:
        0 0 2px 2px;
}


/* Orange J section */

.jff-brand-mark::after {

    content: "";

    position: absolute;

    left: 18px;
    top: 55px;

    width: 9px;
    height: 65px;

    background: #f58220;

    border-radius:
        0 0 8px 8px;
}


/* =========================================================
   BRAND NAME
========================================================= */

.jff-brand-name {

    color: #f58220;

    font-size: 29px;

    font-weight: 500;

    letter-spacing: 5px;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   CATEGORY TITLE
========================================================= */

.jff-menu-category-title {

    position: relative;

    z-index: 10;

    margin:
        -5px
        0
        35px
        48%;

    color: #f58220;

    font-size:
        clamp(
            60px,
            7vw,
            100px
        );

    font-weight: 800;

    line-height: .9;

    letter-spacing: -3px;

    text-transform: uppercase;
}


/* =========================================================
   PRODUCTS
========================================================= */

.jff-menu-products {

    width: 100%;

    margin: 0;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-menu-item {

    position: relative;

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    align-items: center;

    column-gap: 25px;

    min-height: 190px;

    padding:
        20px 0;

    border-bottom:
        2px dotted #999999;
}


/* Remove border from last product */

.jff-menu-item:last-child {

    border-bottom: none;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-menu-item-image {

    width: 180px;
    height: 150px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.jff-menu-item-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transition:
        transform .4s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


/* Product image hover */

.jff-menu-item:hover
.jff-menu-item-image img {

    transform:
        scale(1.08);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.jff-menu-item-content {

    min-width: 0;

    padding-left: 5px;
}


/* Product title */

.jff-menu-item-content h3 {

    margin:
        0 0 6px;

    color: #080808;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.15;
}


/* Spicy text */

.jff-menu-item-content h3 span {

    font-size: 22px;

    font-weight: 700;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-menu-nutrition {

    margin-bottom: 7px;

    color: #f58220;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.4;
}


.jff-menu-nutrition span {

    color: #f58220;

}


.jff-menu-nutrition b {

    color: #888888;

    font-weight: 400;

    padding:
        0 5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-menu-item-content p {

    max-width: 760px;

    margin: 0;

    color: #686868;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.45;
}


/* =========================================================
   PRICE
========================================================= */

.jff-menu-price {

    justify-self: end;

    min-width: 95px;

    padding:
        7px 16px;

    background: #f58220;

    border-radius: 25px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 800;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* Price hover */

.jff-menu-item:hover
.jff-menu-price {

    transform:
        scale(1.06);

    box-shadow:
        0 6px 18px
        rgba(
            245,
            130,
            32,
            .25
        );
}


/* =========================================================
   HERO ANIMATION
========================================================= */

.jff-menu-hero-food {

    animation:
        menuFoodReveal
        .9s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        )
        both;
}


.jff-menu-brand {

    animation:
        menuBrandReveal
        .8s
        ease-out
        .2s
        both;
}


.jff-menu-category-title {

    animation:
        menuTitleReveal
        .8s
        ease-out
        .35s
        both;
}


/* =========================================================
   FOOD REVEAL
========================================================= */

@keyframes menuFoodReveal {

    from {

        opacity: 0;

        transform:
            translateX(-45px)
            scale(.94);
    }

    to {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


/* =========================================================
   BRAND REVEAL
========================================================= */

@keyframes menuBrandReveal {

    from {

        opacity: 0;

        transform:
            translateX(35px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   TITLE REVEAL
========================================================= */

@keyframes menuTitleReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .jff-menu-inner {

        width: 94%;
    }


    .jff-menu-label {

        width: 240px;
        height: 100px;

        font-size: 21px;

        letter-spacing: 11px;
    }


    .jff-menu-hero {

        height: 590px;
    }


    .jff-menu-hero-food {

        left: -50px;

        top: 45px;

        width: 750px;

        height: 510px;
    }


    .jff-menu-hero-food img {

        width: 500px;
        height: 500px;
    }


    .jff-menu-hero-food::before {

        width: 420px;
        height: 470px;

        left: 365px;
        top: 20px;

        border-width: 9px;

        border-radius:
            0 50% 50% 0;
    }


    .jff-menu-brand {

        right: 0;

        top: 260px;

        width: 330px;
    }


    .jff-brand-name {

        font-size: 22px;

        letter-spacing: 3px;
    }


    .jff-menu-category-title {

        margin-left: 47%;

        font-size: 75px;
    }


    .jff-menu-item {

        grid-template-columns:
            160px
            minmax(0, 1fr)
            95px;

        column-gap: 20px;
    }


    .jff-menu-item-image {

        width: 150px;
        height: 135px;
    }


    .jff-menu-item-content h3 {

        font-size: 23px;
    }


    .jff-menu-item-content h3 span {

        font-size: 19px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-menu-section {

        padding-bottom: 50px;
    }


    .jff-menu-inner {

        width: 92%;
    }


    /* -----------------------------------------
       MENU TAB
    ----------------------------------------- */

    .jff-menu-label {

        width: 150px;
        height: 75px;

        font-size: 15px;

        letter-spacing: 7px;

        border-radius:
            0 0 20px 20px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .jff-menu-hero {

        height: 470px;
    }


    /* -----------------------------------------
       FOOD
    ----------------------------------------- */

    .jff-menu-hero-food {

        left: 50%;

        top: 65px;

        width: 350px;
        height: 350px;

        transform:
            translateX(-50%);
    }


    .jff-menu-hero-food img {

        width: 350px;
        height: 350px;
    }


    /* -----------------------------------------
       ORANGE ARC
    ----------------------------------------- */

    .jff-menu-hero-food::before {

        width: 300px;
        height: 320px;

        left: 120px;
        top: 15px;

        border-width: 7px;

        border-radius:
            0 50% 50% 0;
    }


    /* -----------------------------------------
       BRAND
    ----------------------------------------- */

    .jff-menu-brand {

        left: 50%;

        right: auto;

        top: 355px;

        width: 100%;

        transform:
            translateX(-50%);
    }


    .jff-brand-mark {

        transform:
            scale(.55);

        transform-origin:
            center bottom;

        margin-bottom: -15px;
    }


    .jff-brand-name {

        font-size: 14px;

        letter-spacing: 3px;
    }


    /* -----------------------------------------
       CATEGORY TITLE
    ----------------------------------------- */

    .jff-menu-category-title {

        margin:
            0
            0
            25px;

        text-align: center;

        font-size: 58px;

        letter-spacing: -2px;
    }


    /* -----------------------------------------
       PRODUCT
    ----------------------------------------- */

    .jff-menu-item {

        grid-template-columns:
            90px
            minmax(0, 1fr);

        column-gap: 15px;

        min-height: auto;

        padding:
            18px 0;
    }


    .jff-menu-item-image {

        width: 90px;
        height: 90px;

        align-self: start;
    }


    .jff-menu-item-content {

        padding-left: 0;
    }


    .jff-menu-item-content h3 {

        font-size: 19px;

        line-height: 1.2;
    }


    .jff-menu-item-content h3 span {

        font-size: 15px;
    }


    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;

        margin-bottom: 5px;
    }


    .jff-menu-nutrition b {

        padding:
            0 2px;
    }


    .jff-menu-item-content p {

        font-size: 11px;

        line-height: 1.4;
    }


    /* -----------------------------------------
       PRICE
    ----------------------------------------- */

    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 10px;

        padding:
            5px 14px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-menu-label {

        width: 135px;
        height: 68px;

        font-size: 13px;

        letter-spacing: 6px;
    }


    .jff-menu-hero {

        height: 430px;
    }


    .jff-menu-hero-food {

        top: 60px;

        width: 310px;
        height: 310px;
    }


    .jff-menu-hero-food img {

        width: 310px;
        height: 310px;
    }


    .jff-menu-hero-food::before {

        width: 270px;
        height: 285px;

        left: 105px;
        top: 12px;

        border-width: 6px;
    }


    .jff-menu-brand {

        top: 325px;
    }


    .jff-menu-category-title {

        font-size: 50px;
    }


    .jff-menu-item {

        grid-template-columns:
            75px
            minmax(0, 1fr);

        column-gap: 12px;
    }


    .jff-menu-item-image {

        width: 75px;
        height: 75px;
    }


    .jff-menu-item-content h3 {

        font-size: 17px;
    }


    .jff-menu-item-content h3 span {

        font-size: 14px;
    }


    .jff-menu-nutrition {

        font-size: 12px;
    }


    .jff-menu-item-content p {

        font-size: 12px;
    }


    .jff-menu-price {

        font-size: 11px;

        padding:
            5px 12px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .jff-menu-hero-food,
    .jff-menu-brand,
    .jff-menu-category-title {

        animation: none;
    }

    .jff-menu-hero-food img,
    .jff-menu-item-image img,
    .jff-menu-price {

        transition: none;
    }

}

.half-circle {
  position: absolute;
  right: 0;
  top: 0;
  width: 51%;
}
.jff-menu-hero-food img {
  margin-top: 3%;
  margin-left: 4%;
}





/**jjjjjjjjjjjjjjjjjj/

/* =========================================================
   PANCAKES SECTION
========================================================= */

.jff-pancakes-section {
    position: relative;

    background: #fdfdfc;

    overflow: hidden;
}


/* =========================================================
   PANCAKES HERO
========================================================= */

.jff-pancakes-section .jff-menu-hero {

    height: 535px;

    position: relative;
}


/* =========================================================
   HERO FOOD
========================================================= */

.jff-pancakes-section .jff-menu-hero-food {

    position: absolute;

    left: 0;
    top: 0;

    width: 650px;
    height: 500px;

    z-index: 5;
}


.jff-pancakes-section .jff-menu-hero-food img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* =========================================================
   BRAND
========================================================= */

.jff-pancakes-section .jff-menu-brand {

    position: absolute;

    right: 20px;
    top: 310px;

    width: 400px;

    text-align: center;

    z-index: 10;
}


/* =========================================================
   PANCAKES CATEGORY HEADING
========================================================= */

.jff-pancakes-heading {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 190px;

    margin-bottom: 25px;
}


/* Orange block */

.jff-pancakes-orange-box {

    width: 125px;
    height: 175px;

    flex-shrink: 0;

    background: #f58220;

    border-radius:
        0 28px 28px 0;
}


/* Heading text */

.jff-pancakes-title {

    padding-left: 18px;

    padding-top: 5px;
}


.jff-pancakes-title h2 {

    margin: 0;

    color: #f58220;

    font-size: 48px;

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: -1px;

    text-transform: uppercase;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

.jff-pancakes-section .jff-menu-products {

    margin-top: 15px;
}


/* =========================================================
   PRODUCT ROW
========================================================= */

.jff-pancakes-section .jff-menu-item {

    min-height: 145px;

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    padding:
        12px 0;
}


/* Product image */

.jff-pancakes-section .jff-menu-item-image {

    width: 175px;
    height: 125px;
}


/* Product title */

.jff-pancakes-section
.jff-menu-item-content h3 {

    font-size: 25px;

    margin-bottom: 4px;
}


/* Nutrition */

.jff-pancakes-section
.jff-menu-nutrition {

    font-size: 15px;

    margin-bottom: 5px;
}


/* Description */

.jff-pancakes-section
.jff-menu-item-content p {

    font-size: 13px;

    line-height: 1.35;
}


/* Price */

.jff-pancakes-section
.jff-menu-price {

    font-size: 17px;

    min-width: 95px;
}


/* =========================================================
   PAGE FOOTER
========================================================= */

.jff-menu-page-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 45px;

    padding:
        0 15px;
}


/* Page number */

.jff-page-number {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #f58220;

    font-size: 15px;

    letter-spacing: 2px;
}


.jff-page-number span {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f58220;

    color: #ffffff;

    font-size: 15px;

    letter-spacing: 0;
}


/* Instagram */

.jff-instagram {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #333333;

    font-size: 15px;
}


.jff-instagram i {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f58220;

    color: #ffffff;

    font-size: 18px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-pancakes-section .jff-menu-hero {

        height: 500px;
    }


    .jff-pancakes-section
    .jff-menu-hero-food {

        width: 530px;
        height: 420px;
    }


    .jff-pancakes-section
    .jff-menu-brand {

        right: 0;

        top: 285px;

        width: 300px;
    }


    .jff-pancakes-title h2 {

        font-size: 38px;
    }


    .jff-pancakes-orange-box {

        width: 100px;
        height: 150px;
    }


    .jff-pancakes-section
    .jff-menu-item {

        grid-template-columns:
            155px
            minmax(0, 1fr)
            90px;
    }


    .jff-pancakes-section
    .jff-menu-item-image {

        width: 145px;
        height: 110px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-pancakes-section
    .jff-menu-hero {

        height: 400px;
    }


    .jff-pancakes-section
    .jff-menu-hero-food {

        left: 50%;

        width: 350px;
        height: 330px;

        transform:
            translateX(-50%);
    }


    .jff-pancakes-section
    .jff-menu-brand {

        top: 290px;

        left: 50%;
        right: auto;

        width: 100%;

        transform:
            translateX(-50%);
    }


    .jff-pancakes-heading {

        min-height: 135px;

        margin-bottom: 15px;
    }


    .jff-pancakes-orange-box {

        width: 80px;
        height: 125px;

        border-radius:
            0 22px 22px 0;
    }


    .jff-pancakes-title {

        padding-left: 12px;
    }


    .jff-pancakes-title h2 {

        font-size: 25px;

        line-height: 1.35;

        letter-spacing: 0;
    }


    .jff-pancakes-section
    .jff-menu-item {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding: 15px 0;
    }


    .jff-pancakes-section
    .jff-menu-item-image {

        width: 85px;
        height: 80px;

        align-self: start;
    }


    .jff-pancakes-section
    .jff-menu-item-content h3 {

        font-size: 18px;
    }


    .jff-pancakes-section
    .jff-menu-nutrition {

        font-size: 12px;
    }


    .jff-pancakes-section
    .jff-menu-item-content p {

        font-size: 12px;
    }


    .jff-pancakes-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 8px;

        font-size: 12px;
    }


    .jff-menu-page-footer {

        margin-top: 25px;
    }

}

.pancakes-footer{ overflow:hidden;}
.pancakes-footer img{ max-width:100%;}










/* =========================================================
   PASTAS / NOODLES SECTION
========================================================= */

.jff-pasta-section {
    position: relative;

    width: 100%;

    background: #fdfdfc;

    overflow: hidden;

    padding-bottom: 70px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.jff-pasta-hero {
    position: relative;

    width: 100%;

    height: 550px;

    margin: 0;

    overflow: hidden;
}


.jff-pasta-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   ORANGE LINE
========================================================= */

.jff-pasta-separator {
    width: 100%;

    height: 9px;

    background: #f58220;

    margin: 0;
}


/* =========================================================
   CATEGORY TITLE
========================================================= */

.jff-pasta-title {

    margin:
        75px
        0
        55px
        45px;

    color: #f58220;

    font-size: 54px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -1px;

    text-transform: uppercase;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

.jff-pasta-section .jff-menu-products {
    width: 100%;

    margin: 0;
}


/* =========================================================
   PRODUCT ROW
========================================================= */

.jff-pasta-section .jff-menu-item {

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 175px;

    padding:
        15px
        0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-pasta-section
.jff-menu-item-image {

    width: 180px;
    height: 145px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-pasta-section
.jff-menu-item-content h3 {

    margin-bottom: 5px;

    font-size: 26px;

    line-height: 1.15;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-pasta-section
.jff-menu-nutrition {

    margin-bottom: 5px;

    font-size: 15px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-pasta-section
.jff-menu-item-content p {

    max-width: 720px;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   PRICE
========================================================= */

.jff-pasta-section
.jff-menu-price {

    min-width: 95px;

    font-size: 17px;
}


/* =========================================================
   FOOTER
========================================================= */

.jff-pasta-section
.jff-menu-page-footer {

    margin-top: 35px;

    padding:
        0
        10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-pasta-hero {

        height: 420px;
    }


    .jff-pasta-title {

        margin:
            55px
            0
            40px
            30px;

        font-size: 45px;
    }


    .jff-pasta-section
    .jff-menu-item {

        grid-template-columns:
            155px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-pasta-section
    .jff-menu-item-image {


        width: 145px;
        height: 120px;
    }


    .jff-pasta-section
    .jff-menu-item-content h3 {

        font-size: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-pasta-section {

        padding-bottom: 45px;
    }


    .jff-pasta-hero {

        height: 300px;
    }


    .jff-pasta-separator {

        height: 6px;
    }


    .jff-pasta-title {

        margin:
            40px
            0
            30px;

        text-align: center;

        font-size: 31px;

        letter-spacing: -0.5px;
    }


    .jff-pasta-section
    .jff-menu-item {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding:
            15px
            0;
    }


    .jff-pasta-section
    .jff-menu-item-image {

        width: 85px;
        height: 85px;

        align-self: start;
    }


    .jff-pasta-section
    .jff-menu-item-content h3 {

        font-size: 18px;
    }


    .jff-pasta-section
    .jff-menu-item-content h3 span {

        font-size: 14px;
    }


    .jff-pasta-section
    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;
    }


    .jff-pasta-section
    .jff-menu-item-content p {

        font-size: 12px;

        line-height: 1.4;
    }


    .jff-pasta-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 8px;

        font-size: 12px;
    }


    .jff-pasta-section
    .jff-menu-page-footer {

        margin-top: 25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-pasta-hero {

        height: 240px;
    }


    .jff-pasta-title {

        font-size: 27px;

        margin-top: 32px;
    }


    .jff-pasta-section
    .jff-menu-item {

        grid-template-columns:
            75px
            minmax(0, 1fr);
    }


    .jff-pasta-section
    .jff-menu-item-image {

        width: 75px;
        height: 75px;
    }


    .jff-pasta-section
    .jff-menu-item-content h3 {

        font-size: 16px;
    }

}



/* =========================================================
   WRAPS / BAGUETTES
========================================================= */

.jff-wraps-section {
    position: relative;

    width: 100%;

    background: #fdfdfc;

    overflow: hidden;

    padding-bottom: 55px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.jff-wraps-hero {
    width: 100%;

    height: 430px;

    overflow: hidden;

    position: relative;
}


.jff-wraps-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.jff-wraps-heading {

    width: 100%;

    min-height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: -5px;

    position: relative;

    z-index: 5;
}


/* =========================================================
   BRAND
========================================================= */

.jff-wraps-brand {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 220px;

    text-align: center;
}


.jff-wraps-brand .jff-brand-mark {

    width: 40px;
    height: 85px;

    margin-bottom: 8px;
}


.jff-wraps-brand .jff-brand-name {

    font-size: 21px;

    letter-spacing: 3px;

    color: #f58220;

    white-space: nowrap;
}


/* =========================================================
   ORANGE VERTICAL LINE
========================================================= */

.jff-wraps-line {

    width: 4px;

    height: 125px;

    background: #f58220;

    flex-shrink: 0;
}


/* =========================================================
   TITLE
========================================================= */

.jff-wraps-title {

    width: 400px;
}


.jff-wraps-title h2 {

    margin: 0;

    color: #f58220;

    font-size: 53px;

    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: -1px;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

.jff-wraps-section .jff-menu-products {

    width: 100%;

    margin-top: 20px;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-wraps-section .jff-menu-item {

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 160px;

    padding:
        12px
        0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-wraps-section
.jff-menu-item-image {

    width: 180px;
    height: 125px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-wraps-section
.jff-menu-item-content h3 {

    font-size: 25px;

    line-height: 1.15;

    margin-bottom: 4px;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-wraps-section
.jff-menu-nutrition {

    font-size: 15px;

    margin-bottom: 5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-wraps-section
.jff-menu-item-content p {

    max-width: 760px;

    font-size: 13px;

    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.jff-wraps-section
.jff-menu-price {

    min-width: 95px;

    font-size: 17px;
}


/* =========================================================
   FOOTER
========================================================= */

.jff-wraps-section
.jff-menu-page-footer {

    margin-top: 30px;

    padding:
        0 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-wraps-hero {
        height: 350px;
    }


    .jff-wraps-heading {

        min-height: 130px;

        gap: 18px;
    }


    .jff-wraps-brand {

        width: 170px;
    }


    .jff-wraps-brand .jff-brand-name {

        font-size: 16px;

        letter-spacing: 2px;
    }


    .jff-wraps-line {

        height: 105px;
    }


    .jff-wraps-title {

        width: 300px;
    }


    .jff-wraps-title h2 {

        font-size: 40px;
    }


    .jff-wraps-section .jff-menu-item {

        grid-template-columns:
            155px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-wraps-section
    .jff-menu-item-image {

        width: 145px;
        height: 115px;
    }


    .jff-wraps-section
    .jff-menu-item-content h3 {

        font-size: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-wraps-section {

        padding-bottom: 35px;
    }


    .jff-wraps-hero {

        height: 240px;
    }


    .jff-wraps-heading {

        min-height: auto;

        display: grid;

        grid-template-columns:
            1fr;

        gap: 12px;

        padding:
            25px 0 20px;

        text-align: center;
    }


    .jff-wraps-brand {

        width: 100%;
    }


    .jff-wraps-brand .jff-brand-mark {

        transform: scale(.7);

        margin-bottom: -5px;
    }


    .jff-wraps-brand .jff-brand-name {

        font-size: 15px;

        letter-spacing: 2px;
    }


    .jff-wraps-line {

        width: 80px;

        height: 3px;

        margin: 0 auto;
    }


    .jff-wraps-title {

        width: 100%;
    }


    .jff-wraps-title h2 {

        font-size: 31px;

        line-height: 1.25;

        letter-spacing: 0;
    }


    /* -----------------------------------------
       PRODUCTS
    ----------------------------------------- */

    .jff-wraps-section .jff-menu-item {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding:
            15px 0;
    }


    .jff-wraps-section
    .jff-menu-item-image {

        width: 85px;
        height: 80px;

        align-self: start;
    }


    .jff-wraps-section
    .jff-menu-item-content h3 {

        font-size: 18px;

        line-height: 1.2;
    }


    .jff-wraps-section
    .jff-menu-item-content h3 span {

        font-size: 13px;
    }


    .jff-wraps-section
    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;
    }


    .jff-wraps-section
    .jff-menu-item-content p {

        font-size: 12px;

        line-height: 1.4;
    }


    .jff-wraps-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 7px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-wraps-hero {

        height: 200px;
    }


    .jff-wraps-title h2 {

        font-size: 27px;
    }


    .jff-wraps-section
    .jff-menu-item {

        grid-template-columns:
            75px
            minmax(0, 1fr);
    }



    .jff-wraps-section
    .jff-menu-item-image {

        width: 75px;
        height: 72px;
    }


    .jff-wraps-section
    .jff-menu-item-content h3 {

        font-size: 16px;
    }

}

/* =========================================================
   SANDWICHES SECTION
========================================================= */

.jff-sandwiches-section {
    position: relative;

    width: 100%;

    background: #fdfdfc;

    overflow: hidden;

    padding-bottom: 55px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.jff-sandwiches-hero {
    position: relative;

    width: 100%;

    height: 550px;

    overflow: hidden;
}


.jff-sandwiches-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.jff-sandwiches-heading {

    width: 100%;

    min-height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    margin-top: -5px;

    position: relative;

    z-index: 5;
}


/* =========================================================
   BRAND
========================================================= */

.jff-sandwiches-brand {

    width: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.jff-sandwiches-brand .jff-brand-mark {

    width: 40px;
    height: 85px;

    margin-bottom: 8px;
}


.jff-sandwiches-brand .jff-brand-name {

    color: #f58220;

    font-size: 21px;

    letter-spacing: 3px;

    white-space: nowrap;
}


/* =========================================================
   ORANGE VERTICAL LINE
========================================================= */

.jff-sandwiches-line {

    width: 4px;

    height: 125px;

    background: #f58220;

    flex-shrink: 0;
}


/* =========================================================
   TITLE
========================================================= */

.jff-sandwiches-title {

    width: 430px;
}


.jff-sandwiches-title h2 {

    margin: 0;

    color: #f58220;

    font-size: 53px;

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1px;

    text-transform: uppercase;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

.jff-sandwiches-section .jff-menu-products {

    width: 100%;

    margin-top: 20px;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-sandwiches-section .jff-menu-item {

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 165px;

    padding:
        12px 0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-sandwiches-section
.jff-menu-item-image {

    width: 180px;
    height: 130px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-sandwiches-section
.jff-menu-item-content h3 {

    font-size: 25px;

    line-height: 1.15;

    margin-bottom: 4px;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-sandwiches-section
.jff-menu-nutrition {

    font-size: 15px;

    margin-bottom: 5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-sandwiches-section
.jff-menu-item-content p {

    max-width: 760px;

    font-size: 13px;

    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.jff-sandwiches-section
.jff-menu-price {

    min-width: 95px;

    font-size: 17px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-sandwiches-hero {
        height: 430px;
    }


    .jff-sandwiches-heading {

        min-height: 130px;

        gap: 18px;
    }


    .jff-sandwiches-brand {

        width: 170px;
    }


    .jff-sandwiches-brand
    .jff-brand-name {

        font-size: 16px;

        letter-spacing: 2px;
    }


    .jff-sandwiches-line {

        height: 105px;
    }


    .jff-sandwiches-title {

        width: 300px;
    }


    .jff-sandwiches-title h2 {

        font-size: 42px;
    }


    .jff-sandwiches-section
    .jff-menu-item {

        grid-template-columns:
            155px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-sandwiches-section
    .jff-menu-item-image {

        width: 145px;
        height: 115px;
    }


    .jff-sandwiches-section
    .jff-menu-item-content h3 {

        font-size: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-sandwiches-section {

        padding-bottom: 35px;
    }


    .jff-sandwiches-hero {

        height: 280px;
    }


    .jff-sandwiches-heading {

        min-height: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            25px 0 20px;

        text-align: center;
    }


    .jff-sandwiches-brand {

        width: 100%;
    }


    .jff-sandwiches-brand
    .jff-brand-mark {

        transform: scale(.7);

        margin-bottom: -5px;
    }


    .jff-sandwiches-brand
    .jff-brand-name {

        font-size: 15px;

        letter-spacing: 2px;
    }


    .jff-sandwiches-line {

        width: 80px;

        height: 3px;

        margin: 0 auto;
    }


    .jff-sandwiches-title {

        width: 100%;
    }


    .jff-sandwiches-title h2 {

        font-size: 31px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    /* -----------------------------------------
       PRODUCTS
    ----------------------------------------- */

    .jff-sandwiches-section
    .jff-menu-item {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding:
            15px 0;
    }


    .jff-sandwiches-section
    .jff-menu-item-image {

        width: 85px;
        height: 80px;

        align-self: start;
    }


    .jff-sandwiches-section
    .jff-menu-item-content h3 {

        font-size: 18px;

        line-height: 1.2;
    }


    .jff-sandwiches-section
    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;
    }


    .jff-sandwiches-section
    .jff-menu-item-content p {

        font-size: 12px;

        line-height: 1.4;
    }


    .jff-sandwiches-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 7px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-sandwiches-hero {

        height: 230px;
    }


    .jff-sandwiches-title h2 {

        font-size: 27px;
    }


    .jff-sandwiches-section
    .jff-menu-item {

        grid-template-columns:
            75px
            minmax(0, 1fr);
    }


    .jff-sandwiches-section
    .jff-menu-item-image {

        width: 75px;
        height: 72px;
    }


    .jff-sandwiches-section
    .jff-menu-item-content h3 {

        font-size: 16px;
    }

}



/* =========================================================
   EGGS / TOASTS SECTION
========================================================= */

.jff-eggs-section {
    position: relative;
    width: 100%;
    background: #fdfdfc;
    overflow: hidden;
    padding-bottom: 55px;
}


/* =========================================================
   HERO
========================================================= */

.jff-eggs-hero {
    width: 100%;
    height: 650px;
    overflow: hidden;
    position: relative;
}


.jff-eggs-hero img {
  width: 76%;
  height: anchor-size;
  display: block;
  object-fit: unset;
  object-position: center center;
}

/* =========================================================
   CATEGORY HEADING
========================================================= */

.jff-eggs-heading {
    width: 100%;

    padding: 35px 0 25px;

    display: flex;
    align-items: center;

    max-width: 1160px;
    margin: 0 auto;
}


.jff-eggs-heading h2 {
    margin: 0;

    color: #f58220;

    font-size: 52px;
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1px;

    text-transform: uppercase;
}


/* =========================================================
   PRODUCTS
========================================================= */

.jff-eggs-section .jff-menu-products {
    width: 100%;
    margin-top: 0;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-eggs-section .jff-menu-item {
    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 165px;

    padding: 12px 0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-eggs-section
.jff-menu-item-image {
    width: 180px;
    height: 125px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-eggs-section
.jff-menu-item-content h3 {
    font-size: 25px;
    line-height: 1.15;

    margin-bottom: 4px;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-eggs-section
.jff-menu-nutrition {
    font-size: 15px;
    margin-bottom: 5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-eggs-section
.jff-menu-item-content p {
    max-width: 760px;

    font-size: 13px;
    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.jff-eggs-section
.jff-menu-price {
    min-width: 95px;
    font-size: 17px;
}


/* =========================================================
   FOOTER
========================================================= */

.jff-eggs-section
.jff-menu-page-footer {
    margin-top: 30px;
    padding: 0 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-eggs-hero {
        height: 480px;
    }


    .jff-eggs-heading {
        padding: 30px 25px 20px;
    }


    .jff-eggs-heading h2 {
        font-size: 42px;
    }


    .jff-eggs-section
    .jff-menu-item {
        grid-template-columns:
            155px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-eggs-section
    .jff-menu-item-image {
        width: 145px;
        height: 115px;
    }


    .jff-eggs-section
    .jff-menu-item-content h3 {
        font-size: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-eggs-section {
        padding-bottom: 35px;
    }


    .jff-eggs-hero {
        height: 300px;
    }


    .jff-eggs-heading {
        padding:
            25px 20px 18px;

        justify-content: center;

        text-align: center;
    }


    .jff-eggs-heading h2 {
        font-size: 31px;
        letter-spacing: 0;
    }


    /* PRODUCTS */

    .jff-eggs-section
    .jff-menu-item {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding: 15px 0;
    }


    .jff-eggs-section
    .jff-menu-item-image {

        width: 85px;
        height: 80px;

        align-self: start;
    }


    .jff-eggs-section
    .jff-menu-item-content h3 {

        font-size: 18px;
        line-height: 1.2;
    }


    .jff-eggs-section
    .jff-menu-nutrition {

        font-size: 12px;
        line-height: 1.5;
    }


    .jff-eggs-section
    .jff-menu-item-content p {

        font-size: 12px;
        line-height: 1.4;
    }


    .jff-eggs-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 7px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-eggs-hero {
        height: 230px;
    }


    .jff-eggs-heading h2 {
        font-size: 27px;
    }


    .jff-eggs-section
    .jff-menu-item {

        grid-template-columns:
            75px
            minmax(0, 1fr);
    }


    .jff-eggs-section
    .jff-menu-item-image {

        width: 75px;
        height: 72px;
    }


    .jff-eggs-section
    .jff-menu-item-content h3 {
        font-size: 16px;
    }

}


/* =========================================================
   SNACKS & HEALTHY DESSERTS
========================================================= */

.jff-snacks-section {
    position: relative;

    width: 100%;

    background: #fdfdfc;

    overflow: hidden;

    padding-bottom: 55px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.jff-snacks-hero {
    position: relative;

    width: 100%;

    height: 520px;

    overflow: hidden;
}


.jff-snacks-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

.jff-snacks-section .jff-menu-products {

    width: 100%;

    margin-top: 35px;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-snacks-section .jff-menu-item {

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 165px;

    padding: 12px 0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-snacks-section
.jff-menu-item-image {

    width: 180px;
    height: 125px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-snacks-section
.jff-menu-item-content h3 {

    font-size: 25px;

    line-height: 1.15;

    margin-bottom: 4px;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-snacks-section
.jff-menu-nutrition {

    font-size: 15px;

    margin-bottom: 3px;
}


/* =========================================================
   SMALL NOTE
========================================================= */

.jff-snacks-section
.jff-menu-note {

    color: #555;

    font-size: 12px;

    line-height: 1.2;

    margin-bottom: 3px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-snacks-section
.jff-menu-item-content p {

    max-width: 760px;

    font-size: 13px;

    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.jff-snacks-section
.jff-menu-price {

    min-width: 95px;

    font-size: 17px;
}


/* =========================================================
   FOOTER
========================================================= */

.jff-snacks-section
.jff-menu-page-footer {

    margin-top: 30px;

    padding: 0 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-snacks-hero {
        height: 410px;
    }


    .jff-snacks-section .jff-menu-products {
        margin-top: 25px;
    }


    .jff-snacks-section .jff-menu-item {

        grid-template-columns:
            155px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-snacks-section
    .jff-menu-item-image {

        width: 145px;
        height: 115px;
    }


    .jff-snacks-section
    .jff-menu-item-content h3 {

        font-size: 22px;
    }


    .jff-snacks-section
    .jff-menu-nutrition {

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-snacks-section {

        padding-bottom: 35px;
    }


    .jff-snacks-hero {

        height: 280px;
    }


    .jff-snacks-section .jff-menu-products {

        margin-top: 15px;
    }


    .jff-snacks-section .jff-menu-item {

        grid-template-columns:
            85px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding: 15px 0;
    }


    .jff-snacks-section
    .jff-menu-item-image {

        width: 85px;
        height: 80px;

        align-self: start;
    }


    .jff-snacks-section
    .jff-menu-item-content h3 {

        font-size: 18px;

        line-height: 1.2;
    }


    .jff-snacks-section
    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;
    }


    .jff-snacks-section
    .jff-menu-note {

        font-size: 8px;
    }


    .jff-snacks-section
    .jff-menu-item-content p {

        font-size: 12px;

        line-height: 1.4;
    }


    .jff-snacks-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 7px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-snacks-hero {

        height: 225px;
    }


    .jff-snacks-section .jff-menu-item {

        grid-template-columns:
            75px
            minmax(0, 1fr);
    }


    .jff-snacks-section
    .jff-menu-item-image {

        width: 75px;
        height: 72px;
    }


    .jff-snacks-section
    .jff-menu-item-content h3 {

        font-size: 16px;
    }

}

/* =========================================================
   SNACKS & HEALTHY DESSERTS HERO
========================================================= */

.jff-snacks-hero {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: #fff;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.jff-snacks-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.jff-snacks-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   TITLE
========================================================= */

.jff-snacks-hero-title {
    position: absolute;

    top: 65px;
    right: 5.5%;

    z-index: 5;

    text-align: left;

    font-family: inherit;

    line-height: 0.95;

    pointer-events: none;
}


/* =========================================================
   ORANGE TITLE
========================================================= */

.jff-snacks-title-orange {

    color: #f58227;

    font-size: clamp(38px, 4.5vw, 76px);

    font-weight: 800;

    letter-spacing: -2px;

    margin-bottom: 18px;
}


/* =========================================================
   OUTLINED TEXT
========================================================= */

.jff-snacks-title-outline {

    color: transparent;

    font-size: clamp(38px, 4.5vw, 76px);

    font-weight: 700;

    line-height: 0.95;

    letter-spacing: 1px;

    -webkit-text-stroke: 2px #314b5d;

    text-stroke: 2px #314b5d;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-snacks-hero {
        height: 420px;
    }

    .jff-snacks-hero-title {

        top: 50px;
        right: 4%;
    }

    .jff-snacks-title-orange {
        margin-bottom: 12px;
    }

    .jff-snacks-title-outline {
        -webkit-text-stroke: 1.5px #314b5d;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-snacks-hero {
        height: 330px;
    }

    .jff-snacks-hero-image img {
        object-position: center center;
    }

    .jff-snacks-hero-title {

        top: 35px;
        right: 5%;

        max-width: 48%;
    }

    .jff-snacks-title-orange {

        font-size: clamp(24px, 7vw, 42px);

        letter-spacing: -1px;

        margin-bottom: 10px;
    }

    .jff-snacks-title-outline {

        font-size: clamp(24px, 7vw, 42px);

        letter-spacing: 0;

        -webkit-text-stroke: 1px #314b5d;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-snacks-hero {
        height: 250px;
    }

    .jff-snacks-hero-title {

        top: 25px;
        right: 4%;

        max-width: 50%;
    }

    .jff-snacks-title-orange,
    .jff-snacks-title-outline {

        font-size: 24px;
    }

}


/* =========================================================
   OTHER ITEMS SECTION
========================================================= */

.jff-other-items-section {
    position: relative;

    width: 100%;

    background: #fff;

    overflow: hidden;

    padding-bottom: 45px;
}


/* =========================================================
   HERO
========================================================= */

.jff-other-items-hero {
    position: relative;

    width: 100%;

    height: 480px;

    overflow: hidden;
}


.jff-other-items-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.jff-other-items-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.jff-other-items-heading {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 35px;

    margin-top: -65px;

    margin-bottom: 30px;
}


/* =========================================================
   BRAND
========================================================= */

.jff-other-items-brand {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 190px;
}


.jff-other-items-brand .jff-brand-mark {

    width: 40px;
    height: 70px;

    display: flex;

    justify-content: center;
    align-items: flex-end;

    margin-bottom: 8px;
}


.jff-other-items-brand .jff-brand-mark span {

    position: relative;

    font-size: 55px;

    font-weight: 700;

    line-height: 1;

    color: #62666a;
}


.jff-other-items-brand .jff-brand-mark span::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 32px;

    background: #f58227;

    right: -1px;

    bottom: 0;
}


.jff-other-items-brand .jff-brand-name {

    color: #f58227;

    font-size: 20px;

    letter-spacing: 2px;

    font-weight: 400;

    white-space: nowrap;
}


/* =========================================================
   OTHER ITEMS TITLE
========================================================= */

.jff-other-items-title {

    background: #f58227;

    color: #fff;

    font-size: clamp(36px, 4vw, 65px);

    font-weight: 800;

    line-height: 1;

    padding: 14px 28px;

    letter-spacing: -1px;

    white-space: nowrap;
}


/* =========================================================
   PRODUCTS
========================================================= */

.jff-other-items-section .jff-menu-products {

    width: 100%;

    margin-top: 5px;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-other-items-section .jff-menu-item {

    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 155px;

    padding: 12px 0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-other-items-section
.jff-menu-item-image {

    width: 175px;

    height: 120px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-other-items-section
.jff-menu-item-content h3 {

    font-size: 25px;

    line-height: 1.15;

    margin-bottom: 4px;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-other-items-section
.jff-menu-nutrition {

    font-size: 15px;

    margin-bottom: 5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-other-items-section
.jff-menu-item-content p {

    max-width: 780px;

    font-size: 13px;

    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.jff-other-items-section
.jff-menu-price {

    min-width: 95px;

    font-size: 17px;
}


/* =========================================================
   FOOTER
========================================================= */

.jff-other-items-section
.jff-menu-page-footer {

    margin-top: 25px;

    padding: 0 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-other-items-hero {
        height: 390px;
    }


    .jff-other-items-heading {

        gap: 20px;

        margin-top: -50px;
    }


    .jff-other-items-brand {
        min-width: 150px;
    }


    .jff-other-items-brand .jff-brand-name {
        font-size: 15px;
    }


    .jff-other-items-title {

        font-size: 38px;

        padding: 11px 20px;
    }


    .jff-other-items-section .jff-menu-item {

        grid-template-columns:
            150px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-other-items-section
    .jff-menu-item-image {

        width: 140px;
        height: 110px;
    }


    .jff-other-items-section
    .jff-menu-item-content h3 {

        font-size: 22px;
    }


    .jff-other-items-section
    .jff-menu-nutrition {

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-other-items-hero {

        height: 280px;
    }


    .jff-other-items-heading {

        flex-direction: column;

        gap: 12px;

        margin-top: -25px;

        margin-bottom: 20px;
    }


    .jff-other-items-brand {

        min-width: 0;
    }


    .jff-other-items-brand .jff-brand-mark {

        width: 30px;
        height: 45px;
    }


    .jff-other-items-brand .jff-brand-mark span {

        font-size: 38px;
    }


    .jff-other-items-brand .jff-brand-mark span::after {

        width: 4px;
        height: 23px;
    }


    .jff-other-items-brand .jff-brand-name {

        font-size: 13px;

        letter-spacing: 1.5px;
    }


    .jff-other-items-title {

        font-size: 30px;

        padding: 10px 18px;
    }


    .jff-other-items-section .jff-menu-item {

        grid-template-columns:
            80px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding: 14px 0;
    }


    .jff-other-items-section
    .jff-menu-item-image {

        width: 80px;
        height: 75px;
    }


    .jff-other-items-section
    .jff-menu-item-content h3 {

        font-size: 17px;
    }


    .jff-other-items-section
    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;
    }


    .jff-other-items-section
    .jff-menu-item-content p {

        font-size: 12px;

        line-height: 1.4;
    }


    .jff-other-items-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 6px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-other-items-hero {

        height: 230px;
    }


    .jff-other-items-title {

        font-size: 24px;

        padding: 8px 14px;
    }


    .jff-other-items-section .jff-menu-item {

        grid-template-columns:
            70px
            minmax(0, 1fr);
    }


    .jff-other-items-section
    .jff-menu-item-image {

        width: 70px;
        height: 68px;
    }


    .jff-other-items-section
    .jff-menu-item-content h3 {

        font-size: 15px;
    }

}

.jff-drinks-hero-image{ overflow:hidden;}
.jff-drinks-hero-image img{ width:100%;}

/* =========================================================
   PROTEIN SHAKES / DRINKS / SMOOTHIES
========================================================= */

.jff-drinks-section {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding-bottom: 45px;
}


/* =========================================================
   HERO
========================================================= */

.jff-drinks-hero {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.jff-drinks-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.jff-drinks-hero-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   HERO TITLE
========================================================= */

.jff-drinks-hero-title {
    position: absolute;

    top: 42px;
    right: 6%;

    z-index: 5;

    text-align: right;

    line-height: 1;
}


/* =========================================================
   PROTEIN
========================================================= */

.jff-drinks-title-main {
    color: #f58227;

    font-size: clamp(55px, 6vw, 100px);

    font-weight: 800;

    letter-spacing: -3px;
}


/* =========================================================
   SHAKES
========================================================= */

.jff-drinks-title-shakes {
    color: #4b4d50;

    font-size: clamp(45px, 5vw, 78px);

    font-weight: 800;

    margin-top: -5px;
}


/* =========================================================
   VITAMIN DRINKS / SMOOTHIES
========================================================= */

.jff-drinks-title-small {
    color: #f58227;

    font-size: clamp(28px, 3vw, 50px);

    font-weight: 700;

    margin-top: 22px;
}


/* =========================================================
   BRAND
========================================================= */

.jff-drinks-brand {
    position: absolute;

    top: 38px;
    left: 12%;

    z-index: 5;

    text-align: center;
}


/* J MARK */

.jff-drinks-brand .jff-brand-mark {
    width: 45px;
    height: 80px;

    margin: 0 auto 8px;

    display: flex;

    justify-content: center;
    align-items: flex-end;
}


.jff-drinks-brand .jff-brand-mark span {
    position: relative;

    color: #62666a;

    font-size: 65px;

    font-weight: 700;

    line-height: 1;
}


.jff-drinks-brand .jff-brand-mark span::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 35px;

    right: -1px;
    bottom: 0;

    background: #f58227;
}


/* BRAND NAME */

.jff-drinks-brand .jff-brand-name {
    color: #f58227;

    font-size: 20px;

    letter-spacing: 3px;

    white-space: nowrap;
}


/* =========================================================
   PRODUCT LIST
========================================================= */

.jff-drinks-section .jff-menu-products {
    width: 100%;
    margin-top: 20px;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.jff-drinks-section .jff-menu-item {
    grid-template-columns:
        190px
        minmax(0, 1fr)
        110px;

    min-height: 155px;

    padding: 12px 0;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jff-drinks-section
.jff-menu-item-image {
    width: 175px;
    height: 125px;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.jff-drinks-section
.jff-menu-item-content h3 {
    font-size: 25px;
    line-height: 1.15;
    margin-bottom: 3px;
}


/* =========================================================
   OPTION TEXT
========================================================= */

.jff-drinks-section
.jff-menu-option {
    color: #111;

    font-size: 14px;

    line-height: 1.2;

    margin-bottom: 3px;
}


/* =========================================================
   NUTRITION
========================================================= */

.jff-drinks-section
.jff-menu-nutrition {
    font-size: 15px;
    margin-bottom: 5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.jff-drinks-section
.jff-menu-item-content p {
    max-width: 780px;

    font-size: 13px;

    line-height: 1.35;
}


/* =========================================================
   PRICE
========================================================= */

.jff-drinks-section
.jff-menu-price {
    min-width: 95px;
    font-size: 17px;
}


/* =========================================================
   FOOTER
========================================================= */

.jff-drinks-section
.jff-menu-page-footer {
    margin-top: 25px;
    padding: 0 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .jff-drinks-hero {
        height: 600px;
    }


    .jff-drinks-hero-title {
        top: 35px;
        right: 5%;
    }


    .jff-drinks-brand {
        left: 7%;
        top: 30px;
    }


    .jff-drinks-brand .jff-brand-name {
        font-size: 16px;
    }


    .jff-drinks-section .jff-menu-item {

        grid-template-columns:
            150px
            minmax(0, 1fr)
            90px;

        column-gap: 18px;
    }


    .jff-drinks-section
    .jff-menu-item-image {

        width: 140px;
        height: 110px;
    }


    .jff-drinks-section
    .jff-menu-item-content h3 {

        font-size: 22px;
    }


    .jff-drinks-section
    .jff-menu-nutrition {

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .jff-drinks-hero {
        height: 440px;
    }


    .jff-drinks-hero-title {

        top: 25px;
        right: 5%;

        max-width: 55%;
    }


    .jff-drinks-title-main {

        font-size: 42px;

        letter-spacing: -1px;
    }


    .jff-drinks-title-shakes {

        font-size: 35px;
    }


    .jff-drinks-title-small {

        font-size: 21px;

        margin-top: 12px;
    }


    .jff-drinks-brand {

        top: 25px;
        left: 5%;
    }


    .jff-drinks-brand .jff-brand-mark {

        width: 30px;
        height: 48px;
    }


    .jff-drinks-brand .jff-brand-mark span {

        font-size: 40px;
    }


    .jff-drinks-brand .jff-brand-mark span::after {

        width: 4px;
        height: 24px;
    }


    .jff-drinks-brand .jff-brand-name {

        font-size: 11px;

        letter-spacing: 1.5px;
    }


    /* PRODUCTS */

    .jff-drinks-section .jff-menu-item {

        grid-template-columns:
            80px
            minmax(0, 1fr);

        column-gap: 12px;

        min-height: auto;

        padding: 14px 0;
    }


    .jff-drinks-section
    .jff-menu-item-image {

        width: 80px;
        height: 80px;
    }


    .jff-drinks-section
    .jff-menu-item-content h3 {

        font-size: 17px;
    }


    .jff-drinks-section
    .jff-menu-option {

        font-size: 12px;
    }


    .jff-drinks-section
    .jff-menu-nutrition {

        font-size: 12px;

        line-height: 1.5;
    }


    .jff-drinks-section
    .jff-menu-item-content p {

        font-size: 12px;

        line-height: 1.4;
    }


    .jff-drinks-section
    .jff-menu-price {

        grid-column: 2;

        justify-self: start;

        margin-top: 6px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jff-drinks-hero {
        height: 340px;
    }


    .jff-drinks-title-main {
        font-size: 31px;
    }


    .jff-drinks-title-shakes {
        font-size: 27px;
    }


    .jff-drinks-title-small {
        font-size: 16px;
    }


    .jff-drinks-brand .jff-brand-name {
        font-size: 12px;
    }


    .jff-drinks-section .jff-menu-item {

        grid-template-columns:
            70px
            minmax(0, 1fr);
    }


    .jff-drinks-section
    .jff-menu-item-image {

        width: 70px;
        height: 70px;
    }


    .jff-drinks-section
    .jff-menu-item-content h3 {

        font-size: 15px;
    }

}



.jff-section-title {
    text-align: center;
    margin-bottom: 30px;
}

.jff-section-title h2 {
    font-size: 48px;
    font-weight: 800;
    color: #f58220;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}



#coffee-tea .jff-section-title {
  text-align: center;
  margin-bottom: 30px;
  position: absolute;
  left: 70%;
  top: 10%;
}

#coffee-tea .img-fluid {
  max-width: 57%;
  height: auto;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  max-height: 221px;
}

#home .logo{ margin-bottom:20px;}
#home  logo img{ min-height:50%;}

.jff-title {
  font-size: 52px;
  line-height: 58px;}
  
  .jff-description{ font-size:15px;}
  
  .half-circle img {
  max-width: 91%;
}



.jff-menu-hero-food:hover img {
  transform: scale(1.025);
}
.jff-menu-hero-food img {
  margin-top: 5%;
  margin-left: 10%;
}



/* =========================================
   SCROLL TO TOP BUTTON
========================================= */

#scrollTopBtn {
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: #f58220;
    color: #ffffff;

    font-size: 20px;
    font-weight: bold;

    cursor: pointer;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;
}

/* Show button */
#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
}

/* Hover Effect */
#scrollTopBtn:hover {
    background: #222222;
    transform: translateY(-4px);
}






.right-img {
  overflow: hidden;
  margin-top: 40px;
}
.right-img img {
  width: 83%;
}

.jff-hero {
    position: relative;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #fffdf8 0%,
        #fff7e8 45%,
        #f5ead8 100%
    );
    padding: 0;
}






/* Mobile */
@media (max-width: 576px) {

    #scrollTopBtn {
        width: 42px;
        height: 42px;
        bottom: 20px;
        right: 18px;
        font-size: 17px;
    }

}




.half-circle img{ display:none;}

.banner-image{ overflow:hidden;}
.banner-image img{ width:100%;}






/* =========================================
   CATEGORY BANNER
========================================= */

.jff-category-banner {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fafc 50%,
        #eef6f3 100%
    );
}


/* IMAGE WRAPPER */

.jff-category-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; max-width:300px;

}


/* FOOD IMAGE */

.jff-category-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.jff-category-image:hover {
    transform: scale(1.04);
}


/* DECORATIVE HALF CIRCLE */

.jff-category-circle {
    position: absolute;
    z-index: 1;
    width: 380px;
    max-width: 100%;
    opacity: 0.95;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* CONTENT */

.jff-category-content {
    padding-left: 30px;
}


/* SMALL BRAND TEXT */

.jff-category-small-text {
    display: block;
    color: #f58220;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 15px;
}


/* MAIN TITLE */

.jff-category-title {
    margin: 0;
 font-size: 36px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 1px;
    color: #111111;
    text-transform: uppercase;
}


/* ORANGE LINE */

.jff-category-line {
    width: 70px;
    height: 5px;
    background: #f58220;
    margin: 25px 0;
    border-radius: 10px;
}


/* DESCRIPTION */

.jff-category-description {
    color: #777777;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .jff-category-banner {
        padding: 45px 0;
    }

    .jff-category-content {
        padding-left: 15px;
        margin-top: 25px;
    }

    .jff-category-image-wrap {
        min-height: 280px;
    }

    .jff-category-title {
        font-size: 48px;
    }

}


@media (max-width: 767px) {

    .jff-category-banner {
        padding: 35px 0;
    }

    .jff-category-image-wrap {
        min-height: 240px;
    }

    .jff-category-image {
        max-width: 300px;
    }

    .jff-category-circle {
        width: 280px;
    }

    .jff-category-content {
        text-align: center;
        padding-left: 0;
        margin-top: 20px;
    }

    .jff-category-title {
        font-size: 42px;
    }

    .jff-category-line {
        margin: 20px auto;
    }

    .jff-category-description {
        margin: auto;
        font-size: 14px;
    }

    .jff-category-small-text {
        font-size: 12px;
        letter-spacing: 3px;
    }

}



.right-img{ overflow:hidden;}
.right-img img{ width:100%;}



.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 90%;
  }
  
  
  /* =========================================
   CATEGORY IMAGE AREA
========================================= */

.jff-category-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

/* Orange animated border */
.jff-category-image-wrap::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 4px solid #f7941d;
    border-radius: 50%;
    z-index: 1;
    animation: jffOrangeBorder 3s ease-in-out infinite;
}

/* Animated orange dots around border */
.jff-category-image-wrap::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 2px dashed rgba(247, 148, 29, 0.45);
    border-radius: 50%;
    z-index: 1;
    animation: jffRotateBorder 12s linear infinite;
}

/* Food image */
.jff-category-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
   /* animation: jffFloat 4s ease-in-out infinite;*/
    filter: drop-shadow(0 15px 18px rgba(0, 0, 0, 0.12));
}

/* =========================================
   BORDER PULSE
========================================= */

@keyframes jffOrangeBorder {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.65;
        box-shadow: 0 0 0 rgba(247, 148, 29, 0);
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
        box-shadow: 0 0 25px rgba(247, 148, 29, 0.35);
    }
}

/* =========================================
   BORDER ROTATION
========================================= */

@keyframes jffRotateBorder {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   IMAGE FLOAT
========================================= */

@keyframes jffFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* =========================================
   HOVER EFFECT
========================================= */

.jff-category-image-wrap:hover .jff-category-image {
    transform: scale(1.05);
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .jff-category-image-wrap {
        width: 260px;
        height: 260px;
    }

    .jff-category-image-wrap::before {
        inset: 8px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .jff-category-image-wrap {
        width: 220px;
        height: 220px;
    }

    .jff-category-image-wrap::before {
        inset: 6px;
        border-width: 3px;
    }

    .jff-category-image-wrap::after {
        inset: 1px;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .jff-category-image,
    .jff-category-image-wrap::before,
    .jff-category-image-wrap::after {
        animation: none;
    }
}


/* =========================================
   JUST FIT FOOD - MODERN FOOTER
========================================= */

.jff-modern-footer {
    position: relative;
    width: 100%;
    margin-top: 40px;
    padding: 20px 0;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #fffaf4 50%,
        #fff3e5 100%
    );
    border-top: 1px solid rgba(247, 148, 29, 0.15);
    overflow: hidden;
}

/* Decorative orange line */
.jff-modern-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        #f7941d,
        #ffb347,
        #f7941d,
        transparent
    );
}

/* Footer Container */
.jff-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* =========================================
   PAGE NUMBER & BRAND
========================================= */

.jff-footer-page {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jff-footer-page-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f7941d;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.22);
}

.jff-footer-brand {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #283618;
}

/* =========================================
   CONTACT INFORMATION
========================================= */

.jff-footer-contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.jff-footer-phone,
.jff-footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #283618;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.3s ease, transform 0.3s ease;
}

.jff-footer-phone i,
.jff-footer-instagram i {
    color: #f7941d;
    font-size: 18px;
}

.jff-footer-phone:hover,
.jff-footer-instagram:hover {
    color: #f7941d;
    transform: translateY(-2px);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .jff-modern-footer {
        padding: 18px 0;
    }

    .jff-footer-inner {
        padding: 0 18px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .jff-footer-page {
        justify-content: center;
    }

    .jff-footer-contact {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
    }

    .jff-footer-phone,
    .jff-footer-instagram {
        font-size: 12px;
    }
}

@media (max-width: 400px) {

    .jff-footer-contact {
        flex-direction: column;
        gap: 10px;
    }

    .jff-footer-brand {
        font-size: 11px;
        letter-spacing: 1.5px;
    }
}


.logo img {
  max-width: 25%;
}

.right-img img {
  width: 45%;
}

.logo  {

  margin-top: 25px;
}
.our-products {
  position: relative;
  padding: 25px 0 25px;}
  
  .our-products-title {
  margin: 0;
  font-size: 32px;}
  
  .our-products-subtitle {
  color: #f58220;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 5px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.jff-title {
  font-size: 36px;
  line-height: 47px;
  letter-spacing: 0px;
}

.right-img {
  overflow: hidden;
  margin-top: 10px;
}

#owl-carousel-product .owl-item {
  padding: 0;}

@media (max-width: 790px) {

 .our-products-title {
    font-size: 31px;
    letter-spacing: 2px;
  }

#home .logo {
  margin-bottom: 50px;
  text-align: center;
}

.logo img {
  max-width: 50%;
}

.jff-title {
  font-size: 33px;
  line-height: 40px;
}

 #home .logo {
    margin-bottom: 21px;}



.our-products-title {
    font-size: 37px;}


.our-products-heading{ margin-bottom:0px;}
#owl-carousel-product .owl-nav button.owl-prev{ display:none}
#owl-carousel-product .owl-nav button.owl-next{ display:none;}

 .our-product-content h3 {
    font-size: 22px;
  }
  
   .our-product-card {
    min-height: 100px;
  }
  
  
  .our-products-slider {
    padding-left: 0px;
    padding-right: 0px;
}

.half-circle img{ display:none;}
.jff-menu-item-content p {
    font-size: 12px;
  }
   .jff-menu-nutrition {
    font-size: 12px;
  }
  
   .jff-pancakes-section .jff-menu-hero-food {
    left: auto;}
	
	.jff-pancakes-section .jff-menu-item-content p {
    font-size: 12px;
  }
 .jff-wraps-section .jff-menu-item-content p {
    font-size: 12px;
    line-height: 1.4;
  }
  
    .jff-sandwiches-section .jff-menu-nutrition {
    font-size: 12px;




  }
  
  .jff-eggs-section .jff-menu-nutrition {
    font-size: 12px;
    line-height: 1.5;
  }
  
   .jff-eggs-section .jff-menu-item-content p {
    font-size: 12px;
    line-height: 1.4;
  }
  
  #coffee-tea .jff-section-title {
  text-align: center;
  margin-bottom: 30px;
  position: absolute;
  left: 70%;
  top: 30px;
}

.jff-section-title h2 {
  font-size: 20px;}
  
  
  
 .jff-hero {
    min-height: auto;
    padding: 55px 0 10px;
    padding-top: 15px;
  }  
  
  
  
  .jff-category-title {
    font-size: 24px;
  }
  
   .our-product-content h3 {
    font-size: 18px;
    margin-bottom: 25px;
  }
  
   .jff-title {
    font-size: 26px;
    line-height: 32px;}
  
  }