{# templates/main/theme.css #}
:root{
    /* ===== из Theme ===== */
    --primary:{{ t.primary }};
    --primary-active:{{ t.primary_active }};
    --light:{{ t.light }};
    --dark:{{ t.dark }};
    --text:{{ t.text }};
    --text-secondary:{{ t.text_secondary }};
    --white-hex:{{ t.white_hex }};
    --black-hex:{{ t.black_hex }};
    --gray-100:{{ t.gray_100 }};
    --gray-200:{{ t.gray_200 }};
    --gray-300:{{ t.gray_300 }};
    --nav-hover:{{ t.nav_hover }};

    /* Числовые RGB (для rgba()) */
    --white:255,255,255;
    --black:0,0,0;

    /* ===== из BrandSettings ===== */
    --logo-color:{{ b.logo_color }};
    --logo-size:{{ b.logo_size }}px;

    /* Общие utility */
    --shadow-05:rgba(0,0,0,.05);
    --shadow-08:rgba(0,0,0,.08);
    --font-cursive:'Pacifico',cursive;
    --font-sans:'Nunito',sans-serif;
    --menu-title-fs:clamp(1rem,3.8vw,1.125rem);
    --menu-price-fs:clamp(.9rem,3.2vw,1rem);
}

/* ===== ЛОГОТИП ЧЕРЕЗ CSS‑МАСКУ ===== */
.brand-logo{
    display:inline-block;
    width:var(--logo-size);
    height:var(--logo-size);
    background-color:var(--logo-color);
    {% if b.logo %}
    -webkit-mask-image:url("{{ b.logo.url }}");
            mask-image:url("{{ b.logo.url }}");
    {% endif %}
    -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
    -webkit-mask-position:center;        mask-position:center;
    -webkit-mask-size:contain;           mask-size:contain;
}
.brand-logo--sm{ width:calc(var(--logo-size) * 0.75); height:calc(var(--logo-size) * 0.75); }

/* Для логотипов категорий меню (перекраска) */
.category-logo{
    display:inline-block;
    width:28px; height:28px;
    background-color:var(--logo-color);
    -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
    -webkit-mask-position:center;        mask-position:center;
    -webkit-mask-size:contain;           mask-size:contain;
}

/* ===== БАЗОВЫЕ СБРОСЫ ===== */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

img,svg,video,canvas,iframe{
    max-width:100%;
    height:auto;
    display:block;
}

/* ===== ЦВЕТА, ШРИФТЫ ===== */
.bg-dark{background-color: var(--dark) !important}
.fa-bars{color: var(--light)}
.ff-secondary{font-family:var(--font-cursive);}
.fw-medium{font-weight:600!important;}
.fw-semi-bold{font-weight:700!important;}

/* ===== UI ЭЛЕМЕНТЫ ===== */
.back-to-top{
    position:fixed;
    display:none;
    right:45px;
    bottom:45px;
    z-index:99;
}

#spinner{
    opacity:0;
    visibility:hidden;
    transition:opacity .5s ease-out,visibility 0s linear .5s;
    z-index:99999;
}
#spinner.show{
    transition:opacity .5s ease-out,visibility 0s linear 0s;
    visibility:visible;
    opacity:1;
}

.btn{
    font-family:var(--font-sans);
    font-weight:500;
    text-transform:uppercase;
    transition:.5s;
}
.btn.btn-primary,.btn.btn-secondary{
    color:var(--white-hex);
    background:var(--primary-active);
    border-radius:.8rem;
}
.btn.btn-primary-order{
    color:var(--white-hex);
    background:var(--primary-active);
    border-radius:.8rem;
    width: min(100%,780px);
}
.btn-square{width:38px;height:38px;}
.btn-sm-square{width:32px;height:32px;}
.btn-lg-square{width:48px;height:48px;}
.btn-square,.btn-sm-square,.btn-lg-square{
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:normal;
    border-radius:2px;
}

/* ===== НАВИГАЦИЯ ===== */
.navbar-dark .navbar-nav .nav-link{
    position:relative;
    margin-left:25px;
    padding:35px 0;
    font-size:15px;
    color:var(--light)!important;
    text-transform:uppercase;
    font-weight:500;
    outline:none;
    transition:.5s;
    white-space:nowrap;
}
.sticky-top.navbar-dark .navbar-nav .nav-link{padding:20px 0;}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{color:var(--primary)!important;}
.navbar-dark .navbar-brand img{max-height:60px;transition:.5s;}
.sticky-top.navbar-dark .navbar-brand img{max-height:45px;}

@media(max-width:991.98px){
    .sticky-top.navbar-dark{position:relative;}
    .navbar-dark .navbar-collapse{
        margin-top:15px;
        border-top:1px solid rgba(var(--white),.1);
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .navbar-dark .navbar-nav{
        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .navbar-dark .navbar-nav::-webkit-scrollbar{display:none;}
    .navbar-dark .navbar-nav .nav-link,
    .sticky-top.navbar-dark .navbar-nav .nav-link{
        padding:10px 0;
        margin-left:0;
    }
    .navbar-dark .navbar-brand img{max-height:45px;}
}

@media(min-width:992px){
    .navbar-dark{
        position:absolute;
        width:100%;
        top:0;
        left:0;
        z-index:999;
        background:transparent!important;
    }
    .sticky-top.navbar-dark{
        position:fixed;
        background:var(--dark)!important;
        border-radius:1rem;
    }
}

/* ===== HERO/ЗАГОЛОВКИ ===== */
.hero-header img{animation:imgRotate 50s linear infinite;}
@keyframes imgRotate{100%{transform:rotate(360deg);}}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(var(--white),.5);}

.section-title{position:relative;display:inline-block;}
.section-title::before{
    position:absolute;content:"";width:45px;height:2px;top:50%;left:-55px;margin-top:-1px;background:var(--primary);
}
.section-title::after{
    position:absolute;content:"";width:45px;height:2px;top:50%;right:-55px;margin-top:-1px;background:var(--primary);
}
.section-title.text-start::before,.section-title.text-end::after{display:none;}

/* ===== КАРТОЧКИ/СЕРВИСЫ ===== */
.service-item{
    box-shadow:0 0 45px var(--shadow-08);
    transition:.5s;
    background-color:var(--white-hex);
}
.service-item:hover{background:var(--primary);}
.service-item *{transition:.5s;}
.service-item:hover *{color:var(--light)!important;}

.nav-pills .nav-item .active{border-bottom:2px solid var(--primary);}

/* ===== ВИДЕО ===== */
.video{
    position:relative;height:100%;min-height:500px;
    background:linear-gradient(rgba(15,23,43,.1),rgba(15,23,43,.1)),url(../img/video.jpg);
    background-position:center center;background-repeat:no-repeat;background-size:cover;
}
.video .btn-play{
    position:absolute;z-index:3;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);
    box-sizing:content-box;display:block;width:32px;height:44px;border-radius:50%;border:none;outline:none;padding:18px 20px 18px 28px;
}
.video .btn-play:before{
    content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);
    display:block;width:100px;height:100px;background:var(--primary);border-radius:50%;animation:pulse-border 1500ms ease-out infinite;
}
.video .btn-play:after{
    content:"";position:absolute;z-index:1;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);
    display:block;width:100px;height:100px;background:var(--primary);border-radius:50%;transition:all 200ms;
}
.video .btn-play span{
    display:block;position:relative;z-index:3;width:0;height:0;border-left:32px solid var(--dark);
    border-top:22px solid transparent;border-bottom:22px solid transparent;
}
@keyframes pulse-border{
    0%{transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);opacity:1;}
    100%{transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);opacity:0;}
}
#videoModal{z-index:99999;}
#videoModal .modal-dialog{position:relative;max-width:800px;margin:60px auto 0 auto;}
#videoModal .modal-body{position:relative;padding:0px;}
#videoModal .close{
    position:absolute;width:30px;height:30px;right:0px;top:-30px;z-index:999;font-size:30px;font-weight:normal;color:var(--white-hex);
    background:var(--black-hex);opacity:1;
}

/* ===== TEAM/TESTIMONIALS ===== */
.team-item{
    box-shadow:0 0 45px var(--shadow-08);
    height:calc(100% - 38px);
    transition:.5s;
    background:var(--white-hex);
}
.team-item img{transition:.5s;}
.team-item:hover img{transform:scale(1.1);}
.team-item:hover{height:100%;}
.team-item .btn{border-radius:38px 38px 0 0;}

.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item.center .testimonial-item *{transition:.5s;}
.testimonial-carousel .owl-item.center .testimonial-item{
    background:var(--primary)!important;border-color:var(--primary)!important;
}
.testimonial-carousel .owl-item.center .testimonial-item *{color:var(--light)!important;}
.testimonial-carousel .owl-dots{
    margin-top:24px;display:flex;align-items:flex-end;justify-content:center;
}
.testimonial-carousel .owl-dot{
    position:relative;display:inline-block;margin:0 5px;width:15px;height:15px;border:1px solid var(--gray-300);
    border-radius:15px;transition:.5s;background:transparent;
}
.testimonial-carousel .owl-dot.active{background:var(--primary);border-color:var(--primary);}

/* ===== FOOTER ===== */
.footer .btn.btn-social{
    margin-right:5px;width:35px;height:35px;display:flex;align-items:center;justify-content:center;color:var(--light);
    border:1px solid var(--white-hex);border-radius:35px;transition:.3s;
}
.footer .btn.btn-social:hover{color:var(--primary);}
.footer .btn.btn-link{
    display:block;margin-bottom:5px;padding:0;text-align:left;color:var(--white-hex);
    font-size:15px;font-weight:normal;text-transform:capitalize;transition:.3s;
}
.footer .btn.btn-link::before{
    position:relative;content:"\f105";font-family:"Font Awesome 5 Free";font-weight:900;margin-right:10px;
}
.footer .btn.btn-link:hover{letter-spacing:1px;box-shadow:none;}
.footer .copyright{
    padding:25px 0;font-size:15px;border-top:1px solid rgba(var(--white),.1);
}
.footer .copyright a{color:var(--light);}
.footer .footer-menu a{
    margin-right:15px;padding-right:15px;border-right:1px solid rgba(var(--white),.1);
}
.footer .footer-menu a:last-child{
    margin-right:0;padding-right:0;border-right:none;
}

/* ===== ПРОЧЕЕ ===== */
.team-photo{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:8px;
}
.btn-square{
    width:36px;
    height:36px;
    padding:0;
    line-height:36px;
    text-align:center;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    margin-top:0;
    margin-bottom:.5rem;
    font-family:var(--font-sans);
    font-weight:800;
    line-height:1.2;
    color:var(--text);
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
    text-shadow:none!important;
}

.sign{color:var(--primary-active);}
.border-primary{border-color:var(--dark)!important;}

body{
    margin:0;
    font-family:"Heebo",sans-serif;
    font-size:1rem;
    font-weight:400;
    line-height:1.55;
    color:var(--text-secondary);
    background-color:var(--gray-100);
    -webkit-tap-highlight-color:transparent;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
    text-shadow:none!important;
}
.body{font-family:'Montserrat',sans-serif;font-weight:900;}

/* ===== BRANDING ТЕКСТА В ХЕДЕРЕ ===== */
.navbar-brand{
  font-family: var(--font-sans);
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.navbar-brand .fa-utensils{ font-size:.9em; }

/* ===== HERO TEXT COLORS ===== */
.text-white,
.text-white *{
    color:var(--primary-active)!important;
    text-shadow:none!important;
    -webkit-text-stroke:0!important;
}
p.text-white{
   font-family:var(--font-sans);
   line-height:1.2;
   font-weight:700;
   font-size:20px;
}
.hero-header p.text-white{
  padding:.75rem 1rem;
  border-radius:.6rem;
  line-height:1.1;
  font-size: 20px;
  display:inline-block;
  max-width:min(100%,780px);
  backdrop-filter:blur(2px);
}
h1, h2, h3, h4, h5, h6, p, span{ text-shadow:none!important; }

/* ===== ABOUT (исправлено) =====
   ПК: абсолютное позиционирование в canvas (слева).
   Мобилки: сетка d-lg-none (сверху). */
.about-canvas{
  position:relative;
  width:100%;
  height:var(--canvas-h,600px);
  overflow:visible;
}
.about-piece{
  position:absolute;
  /* top/left/width приходят ИЗ АДМИНКИ (inline в шаблоне) */
  will-change: transform, opacity;
}
/* Поворот лучше ставить на сам <img>, если используете WOW-анимации:
   Но если поворот уже inline на теге <img>, этого блока не нужно. */
.about-piece > img{
  width:100%;
  height:auto;
}

/* ===== Typography ===== */
h1,.h1,.display-1,.display-2,.display-3{
  font-size:clamp(2rem,7vw,3.5rem);
  line-height:1.15;
}
h2,.h2{font-size:clamp(1.6rem,5.5vw,2.25rem);}
h3,.h3{font-size:clamp(1.35rem,4.5vw,1.75rem);}
p,li,small{font-size:clamp(1rem,3.6vw,1.0625rem);}

/* ------- Меню ------- */
#food-menu h5.d-flex{
    display:flex!important;
    align-items:flex-start;
    gap:.75rem;
}
#food-menu h5.d-flex>span:first-child{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#food-menu h5.d-flex>span:last-child{
    flex:0 0 auto;
    white-space:nowrap;
    margin-left:.75rem;
}
#food-menu .nav{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
#food-menu .nav::-webkit-scrollbar{display:none;}
#food-menu .nav .nav-item{ white-space:nowrap; flex:0 0 auto; }
#food-menu .nav .nav-item a{
    display:flex;
    align-items:center;
    gap:.5rem;
    min-height:60px;
}

.py-5{padding-top:0rem !important;padding-bottom:0rem !important}

.card, .service-item, .team-item, .testimonial-item{ overflow:hidden; }

@media(max-width:575.98px){
  body{line-height:1.6;color:#454545;}
  .text-muted{color:#6b6b6b!important;}
  .py-5{padding-top:0rem!important;padding-bottom:2.5rem!important;}
  .mb-5{margin-bottom:2rem!important;}
  .pt-5{padding-top:2.5rem!important;}
  .pb-5{padding-bottom:2.5rem!important;}
  .back-to-top{right:15px;bottom:15px;}
  .hero-header .text-white,
  .hero-header p.text-white{text-shadow:none;}
  .btn{padding:.875rem 1.25rem;border-radius:.8rem;}
  .service-item .p-4{padding:1.25rem!important;}
  #links .service-item h5{font-size:1.05rem;}
  #links .service-item p{font-size:.95rem;}
  .testimonial-item{padding:24px 18px;}
  .testimonial-item p{font-size:1rem;line-height:1.55;}
}

/* Сглаживание строк меню на мобилках */
#food-menu .menu-line,
#menu .menu-line,
#food-menu h5.d-flex,
#menu h5.d-flex{
    display:flex!important;
    align-items:flex-start;
    gap:.5rem;
    min-width:0;
}
#food-menu .menu-line>:first-child,
#menu .menu-line>:first-child,
#food-menu h5.d-flex>:first-child,
#menu h5.d-flex>:first-child{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#food-menu .menu-line>:last-child,
#menu .menu-line>:last-child,
#food-menu h5.d-flex>:last-child,
#menu h5.d-flex>:last-child{
    flex:0 0 auto;
    white-space:nowrap;
    margin-left:.5rem;
    max-width:40%;
    text-align:right;
}
#food-menu h5 .float-end,
#food-menu h5 .float-right,
#menu h5 .float-end,
#menu h5 .float-right{ float:none!important; }

#food-menu .nav, #menu .nav{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
#food-menu .nav::-webkit-scrollbar, #menu .nav::-webkit-scrollbar{ display:none; }

#food-menu, #menu{ max-width:100%; overflow-x:hidden; }

@media(max-width:992px){
  #food-menu h5, #menu h5{ font-size:var(--menu-title-fs)!important; line-height:1.35!important; }
  #food-menu .menu-line, #menu .menu-line, #food-menu h5.d-flex, #menu h5.d-flex{
    flex-direction:column!important; align-items:flex-start!important; gap:.2rem!important;
  }
  #food-menu .menu-line>:first-child, #menu .menu-line>:first-child,
  #food-menu h5.d-flex>:first-child, #menu h5.d-flex>:first-child{
    flex:0 0 auto!important; min-width:100%!important; white-space:normal!important;
    overflow:visible!important; text-overflow:clip!important; word-break:break-word!important;
  }
  #food-menu .menu-line>:last-child, #menu .menu-line>:last-child,
  #food-menu h5.d-flex>:last-child, #menu h5.d-flex>:last-child{
    flex:0 0 auto!important; max-width:none!important; margin-left:0!important;
    font-size:var(--menu-price-fs)!important; line-height:1.2!important; white-space:nowrap!important;
    align-self:flex-start!important;
  }
}
@media(max-width:480px){
  #food-menu h5, #menu h5{ font-size:.95rem!important; }
  #food-menu .menu-line>:last-child, #menu .menu-line>:last-child,
  #food-menu h5.d-flex>:last-child, #menu h5.d-flex>:last-child{ font-size:.9rem!important; }
}


/* ===== ABOUT: единый canvas на всех устройствах ===== */

/* Холст с постоянной геометрией через aspect-ratio.
   --ar-w и --ar-h приходят inline прямо на .about-canvas */

/* Внутренняя плоскость, куда размещаются элементы */
.about-plane{
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
}


/* ===== ABOUT (финальный) =====
   Один canvas на всех устройствах, одинаковая «форма» композиции */
.about-canvas{
  position: relative;
  width: 100%;
  height: auto; /* сброс прежнего height */
  aspect-ratio: calc(var(--ar-w, 1200) / var(--ar-h, 700)); /* вы задали --ar-* в HTML */
  overflow: hidden;   /* ничего не вылезает из колонки */
  isolation: isolate; /* свой стек слоёв */
  contain: paint;     /* не рисовать за границами */
  margin-inline: auto;
}
.about-plane{ position: absolute; inset: 0; }
.about-piece{
  position: absolute;
  top: var(--y);      /* % из админки */
  left: var(--x);     /* % из админки */
  width: var(--w);    /* % из админки */
  z-index: var(--z);
  pointer-events: none;
  will-change: transform, opacity;
}
.about-img{
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--r, 0deg)); /* градусы из админки */
}
@media (max-width:480px){
  .about-canvas{ max-height:520px; } /* опционально; можно убрать */
}

/* Hero: не переносить внутри слов и около дефиса */
.hero-header .no-hyphen {
  word-break: normal !important;
  overflow-wrap: normal !important;   /* отменяем anywhere/break-word */
  hyphens: none !important;           /* отключаем авто‑переносы */
  white-space: normal !important;     /* переносим только по пробелам */
}

/* Чтобы number‑sign, email, url в hero не ломались даже при длинных кусках */
.hero-header .no-hyphen a,
.hero-header .no-hyphen code,
.hero-header .no-hyphen .nowrap {
  white-space: nowrap !important;
}


/* Число + знак: всегда в одну строку, без сжатия */
.about-stat .stat-num{
  flex: 0 0 auto;           /* НЕ сжимать вообще */
  white-space: nowrap;
}

/* h1 (число) и знак — как inline, без переносов */
.about-stat .stat-value,
.about-stat .stat-sign{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

/* Текст справа пусть занимает весь остаток ширины */
.about-stat .stat-text{
  flex: 1 1 auto;
  min-width: 0;
}

/* Подписи держим в одну строку, с многоточием при нехватке места */
.about-stat .stat-text p,
.about-stat .stat-text h6{
  margin: 0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* На очень узких экранах можно разрешить перенос подписей */
@media (max-width: 380px){
  .about-stat .stat-text p,
  .about-stat .stat-text h6{
    white-space: normal;
    text-overflow: clip;
  }
}

/* При необходимости: немного уменьшить цифры на узких экранах */
@media (max-width: 480px){
  .about-stat .stat-value { font-size: 2rem; line-height: 1; }
  .about-stat .stat-sign  { font-size: 1.5rem; }
}


/* === ABOUT: счётчик в столбик ===
   Контейнер счётчика: border-start border-5 border-primary px-3 */
#about .border-start.border-5.border-primary.px-3{
  display: flex;
  flex-direction: column;      /* блоками сверху вниз */
  align-items: flex-start;      /* выравнивание по левому краю */
  gap: .4rem;                   /* расстояние между числом и подписями */
  padding-top: .75rem;
  padding-bottom: .75rem;
}

/* Первая строка (число+знак) — всегда на одной линии, не переносим */
#about .border-start.border-5.border-primary.px-3 > .d-flex:first-child{
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: baseline;        /* красиво выравнивает цифру и знак */
}

/* Число и знак — строчные элементы без переноса */
#about .border-start.border-5.border-primary.px-3 > .d-flex:first-child h1,
#about .border-start.border-5.border-primary.px-3 > .d-flex:first-child .stat-value,
#about .border-start.border-5.border-primary.px-3 > .d-flex:first-child .stat-sign,
#about .border-start.border-5.border-primary.px-3 > .d-flex:first-child span{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

/* Блок с подписями — переносим текст по словам, убираем левый отступ ps-4 */
#about .border-start.border-5.border-primary.px-3 > .ps-4{
  padding-left: 0 !important;   /* теперь текст под числом, боковой отступ не нужен */
  flex: 0 1 auto;
  min-width: 0;
}

/* Подписи: переносятся по словам, без многоточий */
#about .border-start.border-5.border-primary.px-3 > .ps-4 p,
#about .border-start.border-5.border-primary.px-3 > .ps-4 h6{
  margin: 0;
  line-height: 1.2;
  white-space: normal;          /* разрешаем обычные переносы */
  overflow: visible;
  text-overflow: clip;
  word-break: normal;           /* ломаем только по пробелам */
  hyphens: auto;                /* при желании, мягкая гибридная переноска */
}

/* Небольшая адаптация: на очень узких — чуть поджать размер числа */
@media (max-width: 480px){
  #about .border-start.border-5.border-primary.px-3 h1.display-5{
    font-size: 2rem;
    line-height: 1;
  }
}


/* --- Единый вертикальный ритм для основных секций на desktop --- */
@media (min-width: 992px){
  #about,
  #food-menu,
  #testimonials,
  #links{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* --- Уменьшаем большой нижний отступ у меню категорий --- */
#food-menu .nav.mb-5{
  margin-bottom: 1.5rem !important;  /* было 3rem */
}

/* (опционально) Если хочешь ровно одинаковый зазор и на планшете */
@media (min-width: 576px) and (max-width: 991.98px){
  #about, #food-menu, #testimonials, #links{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}