/*!
 * COVELLI - Georgian language styles
 * Custom additions, kept separate from the core theme (styles.css)
 * so theme updates never overwrite these rules.
 */

/* ============================================================
   MOBILE MENU TOGGLER — force a clearly visible dark hamburger
   icon regardless of what color the base theme's navbar-light
   toggler icon happens to be. Without this override, the icon
   can end up nearly invisible against the white/shrunk navbar
   on some screens. */
#mainNav .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.25);
}
#mainNav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

:lang(ka),
.lang-ka {
  font-family: 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

:lang(en),
.lang-en {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Georgian heading sizes — larger + more line-height than the Latin defaults,
   since Georgian glyphs read visually smaller/taller at the same font-size. */
h1.lang-ka, .h1.lang-ka {
  font-size: 2.6rem;
  line-height: 1.35;
}
@media (min-width: 992px) {
  h1.lang-ka, .h1.lang-ka {
    font-size: 3.4rem;
  }
}
@media (min-width: 1200px) {
  h1.lang-ka, .h1.lang-ka {
    font-size: 2.8rem;
  }
}

/* ============================================================
   HERO (header.masthead) — responsive breakpoint system.
   Text steps up gradually with screen width. The "full 100dvh
   screen" hero effect only kicks in from 1200px — below that,
   the theme's natural content-height hero is used, so there's
   no viewport-locking (and no cropping risk) on mobile/tablet.
   ============================================================ */

/* Mobile default (<576px) */
header.masthead h1.lang-ka, header.masthead .h1.lang-ka {
  font-size: clamp(2.3rem, 12vw, 3.3rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}
header.masthead h1.lang-ka .h1-subline {
  font-size: clamp(2.3rem, 12vw, 3.3rem);
}
header.masthead h2.lang-ka {
  font-size: 1.15rem;
}

/* Large phones (≥576px) */
@media (min-width: 576px) {
  header.masthead h1.lang-ka, header.masthead .h1.lang-ka,
  header.masthead h1.lang-ka .h1-subline {
    font-size: clamp(2.6rem, 9vw, 4.05rem);
    overflow-wrap: break-word;
  }
  header.masthead h2.lang-ka {
    font-size: 1.15rem;
  }
}

/* Tablets (≥768px) */
@media (min-width: 768px) {
  header.masthead h1.lang-ka, header.masthead .h1.lang-ka,
  header.masthead h1.lang-ka .h1-subline {
    font-size: 5.0625rem;
  }
  header.masthead h2.lang-ka {
    font-size: 1.35rem;
  }
}

/* Small laptops (≥992px) */
@media (min-width: 992px) {
  header.masthead h1.lang-ka, header.masthead .h1.lang-ka,
  header.masthead h1.lang-ka .h1-subline {
    font-size: 6.75rem;
  }
  header.masthead h2.lang-ka {
    font-size: 1.6rem;
  }
}

/* Desktop — the "full 100dvh screen" hero kicks in (≥1200px) */
@media (min-width: 1200px) {
  header.masthead {
    height: 100vh; /* fallback for older browsers */
    height: 100dvh; /* actual visible viewport — excludes browser toolbar/taskbar, so the hero never overflows past the visible screen */
    min-height: 40rem;
    padding-top: 1.5rem;
    padding-bottom: 0;
  }
  header.masthead .row {
    align-items: flex-start;
  }
  header.masthead .container {
    max-width: 100%;
  }
  header.masthead hr.divider {
    display: none;
  }
  header.masthead .btn-xl {
    font-size: 1.25rem;
    padding: 0.65rem 1.75rem 0.95rem;
    line-height: 1.1;
  }
  header.masthead .btn-xl.lang-en {
  padding: 0.8rem 1.75rem;
  line-height: 1;
}
  header.masthead h2.lang-ka {
    font-size: 1.6rem; /* fallback */
    font-size: clamp(1.3rem, 2.6vh, 2.1rem); /* fallback unit */
    font-size: clamp(1.3rem, 2.6dvh, 2.1rem); /* dvh-aware */
    margin-bottom: clamp(1.1rem, 2.8dvh, 2.5rem);
  }
  header.masthead h1.lang-ka, header.masthead .h1.lang-ka {
    font-size: 7.125rem !important; /* fallback */
    font-size: clamp(4.8rem, 9.6vh, 7.125rem) !important; /* fallback unit */
	font-size: clamp(3.5rem, min(14dvh, 5.7vw), 7.125rem) !important; /* dvh-aware */
    line-height: 1.15;
    white-space: nowrap;
  }
  header.masthead h1.lang-ka .h1-subline {
    font-size: 7.125rem; /* fallback */
    font-size: clamp(4.8rem, 9.6vh, 7.125rem); /* fallback unit */
    font-size: clamp(3.5rem, min(14dvh, 5.7vw), 7.125rem);  /* dvh-aware */
    white-space: normal;
    display: inline-block;
  }
}

/* Large desktop / wide monitors (≥1920px) — cap the content width so the
   headline doesn't stretch disproportionately huge on ultra-wide screens */
@media (min-width: 1920px) {
  header.masthead .container {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hero background overlay — the photo behind the hero text is busy
   (food, light plates, dark liquid), which killed text contrast in
   several spots. A soft dark gradient behind the text fixes readability
   without touching the photo itself. */
header.masthead {
  position: relative;
}
header.masthead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}
header.masthead .container {
  position: relative;
  z-index: 2;
}

/* Extra text-shadow on the hero heading/subheading so letters stay legible
   even where the overlay above a bright part of the photo (egg, lemon,
   white lid) is thinnest. */
header.masthead h1.lang-ka,
header.masthead .h1.lang-ka,
header.masthead h2.lang-ka {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Hero headline — bumped from Bootstrap's fw-bold (700) to 900 (Black),
   since Noto Sans Georgian's font file loads that weight (index.html head).
   !important is required here because the h1 also carries Bootstrap's
   "fw-bold" utility class, which sets font-weight:700 !important — without
   matching !important, that rule would win and 900 would silently never apply. */
header.masthead h1.lang-ka,
header.masthead .h1.lang-ka {
  font-weight: 900 !important;
}

/* ============================================================
   ENGLISH HERO (header.masthead) — mirrors the Georgian hero
   breakpoint system above (identical font sizes at every step).
   Font family is left as the theme default (no override here);
   the headline is set in caps instead, via text-transform.
   ============================================================ */

header.masthead h1.lang-en,
header.masthead .h1.lang-en {
  text-transform: uppercase;
  font-weight: 800 !important; /* max weight Merriweather Sans (the theme's heading font) offers on Google Fonts — no 900 exists for it */
}

/* Mobile default (<576px) */
header.masthead h1.lang-en, header.masthead .h1.lang-en {
  font-size: clamp(2rem, 10vw, 3.06rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}
header.masthead h1.lang-en .h1-subline {
  font-size: clamp(2rem, 10vw, 3.06rem);
}
header.masthead h2.lang-en {
  font-size: 1.1rem;
}

/* Large phones (≥576px) */
@media (min-width: 576px) {
  header.masthead h1.lang-en, header.masthead .h1.lang-en,
  header.masthead h1.lang-en .h1-subline {
    font-size: clamp(2.41rem, 8.34vw, 3.75rem);
    overflow-wrap: break-word;
  }
  header.masthead h2.lang-en {
    font-size: 1.15rem;
  }
}

/* Tablets (≥768px) */
@media (min-width: 768px) {
  header.masthead h1.lang-en, header.masthead .h1.lang-en,
  header.masthead h1.lang-en .h1-subline {
    font-size: 4.69rem;
  }
  header.masthead h2.lang-en {
    font-size: 1.35rem;
  }
}

/* Small laptops (≥992px) */
@media (min-width: 992px) {
  header.masthead h1.lang-en, header.masthead .h1.lang-en,
  header.masthead h1.lang-en .h1-subline {
    font-size: 6.26rem;
  }
  header.masthead h2.lang-en {
    font-size: 1.6rem;
  }
}

/* Desktop — the "full 100dvh screen" hero (≥1200px) */
@media (min-width: 1200px) {
  header.masthead h2.lang-en {
    font-size: 1.6rem; /* fallback */
    font-size: clamp(1.3rem, 2.6vh, 2.1rem); /* fallback unit */
    font-size: clamp(1.3rem, 2.6dvh, 2.1rem); /* dvh-aware */
    margin-bottom: clamp(1.1rem, 2.8dvh, 2.5rem);
  }
  header.masthead h1.lang-en, header.masthead .h1.lang-en {
    font-size: 6.6rem !important; /* fallback */
    font-size: clamp(4.45rem, 8.9vh, 6.6rem) !important; /* fallback unit */
    font-size: clamp(4.45rem, 8.9dvh, 6.6rem) !important; /* dvh-aware */
    line-height: 1.15;
    white-space: nowrap;
  }
  header.masthead h1.lang-en .h1-subline {
    font-size: 6.6rem; /* fallback */
    font-size: clamp(4.45rem, 8.9vh, 6.6rem); /* fallback unit */
    font-size: clamp(4.45rem, 8.9dvh, 6.6rem); /* dvh-aware */
    white-space: normal;
    display: inline-block;
  }
}

/* Extra text-shadow, same as Georgian, for legibility over the photo */
header.masthead h1.lang-en,
header.masthead .h1.lang-en,
header.masthead h2.lang-en {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

h2.lang-ka, .h2.lang-ka {
  font-size: 2.1rem;
  line-height: 1.35;
}

/* English h2 headings, site-wide — bumped to 800 (Merriweather Sans'
   max available weight; it has no 900). !important is needed since
   these elements also carry Bootstrap's fw-bold utility class
   (font-weight: 700 !important), which would otherwise win. This
   also applies inside header.masthead, so the hero subtitle picks
   it up too. */
h2.lang-en, .h2.lang-en {
  font-weight: 800 !important;
}
h3.lang-ka, .h3.lang-ka {
  font-size: 1.85rem;
  line-height: 1.4;
}

/* About section — tiled grass-pattern background, with a dark green
   overlay so the white text/heading stays readable on top of the texture.
   bg-primary (from styles.css) stays as a fallback background-color. */
#about {
  background-image: linear-gradient(rgba(0, 30, 12, 0.55), rgba(0, 30, 12, 0.55)),
    url('../assets/img/pattern-grass.png');
  background-repeat: repeat;
}

/* About section — the section's own top/bottom padding. */
#about.page-section {
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}

/* Services section — tighten padding the same way as About, and add a
   soft green-tinted background so it doesn't blend flat into white. */
#advantage.page-section {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
  background-image: url('../assets/img/texture-canvas.png');
  background-repeat: repeat;
}

/* About section — button */
#about .btn-xl {
  font-size: 1.25rem;
  padding: 0.85rem 2.4rem 1rem;
  line-height: 1.1;
  margin-top: 0.5rem;
  margin-bottom: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#about .btn-xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}
/* English button uses a different font's metrics than the Georgian
   button the padding above was tuned for, so the label sat visibly
   above center — even top/bottom padding instead (same horizontal
   padding as the Georgian button so both are the same width). */
#about .btn-xl.lang-en {
  padding: 0.95rem 2.4rem;
  line-height: 1;
}

/* About section — logo */
.about-logo {
  height: 80px;
  width: auto;
  max-width: 90%;
  margin-top: 0;
}

/* About section — small tagline under the logo. Letter-spacing does the
   "spread across the logo width" job instead of a fixed width, so it still
   looks right at any screen size. */
.about-tagline {
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* About section — HoReCa image, framed as a soft card against the green background */
.horeca-img {
  max-width: 260px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
}

/* About section — product range list, custom leaf-accent bullets instead of default dots */
.product-range-list {
  list-style: none;
  padding-left: 0;
  text-align: left;
  display: inline-block;
  margin: 0;
}
.product-range-list.lang-en li {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 700;
}
.product-range-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.product-range-list li:last-child {
  margin-bottom: 0;
}
.product-range-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  background-color: #39D353;
  box-shadow: 0 0 0 2px #fff;
  border-radius: 50%;
}

/* Navbar bar — vertical padding sized so the total bar height matches
   Sabert's actual navbar height (~73-74px logical/CSS px — the earlier
   108px figure was a screenshot-pixel measurement inflated by the
   user's ~1.48x OS display scaling, not a CSS value).
   !important is required: the <nav> tag also carries Bootstrap's "py-3"
   utility class, which sets padding-top/bottom: 1rem !important — that
   was silently overriding this rule regardless of the value used here. */
#mainNav {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Navbar container is now full-width (container-fluid) so the logo and
   menu reach close to the screen edges — but cap it on very large monitors
   so logo/menu don't drift too far apart with excessive empty space between. */
@media (min-width: 1920px) {
  #mainNav .container-fluid {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Navbar — remove the theme's drop shadow under the white bar (both the
   default state and the scrolled ".navbar-shrink" state), which showed up
   as an unwanted horizontal band above the Services section. */
#mainNav,
#mainNav.navbar-shrink {
  box-shadow: none !important;
}

/* Navbar brand — make sure the "COVELLI LLC" text next to the logo never
   gets clipped, in case the theme's styles.css constrains .navbar-brand
   to a fixed width or hides overflow. */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}
/* Narrow phones — shrink the brand text so logo + "COVELLI LLC" + the
   menu toggler all fit on one line without forcing the whole page to
   overflow horizontally (which was pushing the toggler off-screen and
   causing the browser to auto-scroll the page sideways). */
@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: clamp(0.85rem, 4.3vw, 1.15rem);
  }
}

/* Navbar logo override — theme's styles.css caps this at height:40px/max-width:160px,
   which shrinks our logo despite the HTML width="240" height="56" attributes.
   Kept here so future theme updates don't wipe it out.
   margin-right adds breathing room before the "COVELLI LLC" text that follows it. */
.navbar-logo {
  height: 52px;
  width: 52px;
  max-width: 52px;
  margin-right: 1rem !important;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.navbar-brand:hover .navbar-logo {
  filter: hue-rotate(25deg) saturate(1.3);
  transform: scale(1.06);
}
@media (max-width: 480px) {
  .navbar-logo {
    height: 40px;
    width: 40px;
    max-width: 40px;
    margin-right: 0.7rem !important;
  }
}

/* Navbar menu — bump link font size up from the theme's default,
   since Georgian glyphs read smaller at the same size. */
.navbar-nav.lang-ka .nav-link {
  font-size: 1.3rem;
}
@media (min-width: 992px) {
  .navbar-nav.lang-ka .nav-link {
    font-size: 1.35rem;
  }
}

/* Vertically center every nav-link (text items and the flag alike) within
   its li, so they align consistently regardless of content height. */
#mainNav .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Services section heading ("რატომ Covelli?") — "რატომ" at 900 (Black),
   "Covelli?" stays at Bootstrap's fw-bold (700). !important is required
   since the h1 also carries the fw-bold utility class (700 !important). */
#advantage h1.lang-ka .heading-black {
  font-weight: 900 !important;
}
#advantage h1.lang-ka .heading-bold {
  font-weight: 700 !important;
}

/* English "Why Covelli?" section — same font everywhere (Merriweather
   Sans, the theme's heading font), instead of relying on whichever
   default each individual tag happened to inherit. */
#advantage h1.lang-en,
#advantage .services-subtitle.lang-en,
#advantage .services-intro.lang-en,
#advantage h3.lang-en {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Services section ("რატომ Covelli?") */
.services-subtitle {
  color: #228B22;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.services-intro {
  max-width: 950px;
  font-size: 1.3rem;
  margin-bottom: 1.75rem !important;
}
/* Service card icons — fixed box so all 5 images (different source files,
   same aspect ratio) line up identically on every device. object-fit:
   contain keeps each image's own proportions intact, no stretching. */
.service-icon-box {
  width: 138px;
  height: 138px;
  margin: 0 auto;
}
.service-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 991px) {
  .service-icon-box {
    width: 113px;
    height: 113px;
  }
}
@media (max-width: 575px) {
  .service-icon-box {
    width: 94px;
    height: 94px;
  }
}
/* Force the same font as the hero (section 1) and about (section 2) sections,
   in black — the theme's own h3 rule was winning over .lang-ka otherwise. */
#advantage h3.lang-ka,
#advantage p.lang-ka {
  font-family: 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
#advantage h3.lang-ka {
  color: #000;
  font-weight: 700;
  font-size: 1.3rem;
}
/* Vertical rhythm inside each card, tightened further for a compact look */
#advantage .col-lg-4.mb-5 {
  margin-bottom: 0.5rem !important;
}
#advantage .mt-3 {
  margin-top: 0.9rem !important;
}
#advantage .service-icon-box.mb-2,
#advantage h3.mb-2 {
  margin-bottom: 0.45rem !important;
}
/* Reclaim horizontal width per card on desktop — gx-lg-5 (3rem gutter) was
   leaving titles too little room. */
@media (min-width: 992px) {
  #advantage .row.gx-4.gx-lg-5 {
    --bs-gutter-x: 1.5rem;
  }
}
/* Row 2 (cards 4 & 5) only has 2 items centered together, which made their
   mutual gap look tighter than the 3-card row above — add explicit extra
   space between them to match. */
@media (min-width: 992px) {
  #advantage .row > .col-lg-4:nth-child(4) {
    margin-right: 1.5rem;
  }
  #advantage .row > .col-lg-4:nth-child(5) {
    margin-left: 1.5rem;
  }
  #advantage .row > .col-lg-4:nth-child(4).mb-5,
  #advantage .row > .col-lg-4:nth-child(5).mb-5 {
    margin-bottom: 0 !important;
  }
}

/* Portfolio category modals — clean card design: medium-size image on top,
   product description below, on a normal readable white background.
   (Earlier version was a transparent, borderless full-bleed image viewer —
   changed because product descriptions need a readable surface behind them.) */
.portfolio-modal-dialog {
  max-width: 440px;
}
/* Point 4: push the modal up toward the top on desktop, slightly below the
   very top edge — mobile keeps normal vertical centering (modal-dialog-centered) */
@media (min-width: 992px) {
  .portfolio-modal-dialog.modal-dialog-centered {
    align-items: flex-start;
  }
  .portfolio-modal {
    padding-top: 3vh !important;
  }
}
.portfolio-modal .modal-content {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  position: relative;
  max-height: 92vh; /* fallback for older browsers */
  max-height: 92dvh; /* actual visible viewport — doesn't shift when mobile browser chrome hides/shows on scroll */
  display: flex;
  flex-direction: column;
}
.portfolio-modal .modal-body {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
  background-color: #fff;
}
.portfolio-modal .modal-body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Chromium Edge */
}
/* Close button — floats directly over the image (top-right corner) instead
   of sitting in a padded white header bar, so the image can run edge-to-edge */
.portfolio-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 20;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  margin: 0;
  background-color: #FF0000;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cline x1='2' y1='2' x2='14' y2='14' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3e%3cline x1='14' y1='2' x2='2' y2='14' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3e%3c/svg%3e") !important;
  border-radius: 50%;
  opacity: 1;
  background-size: 0.8rem;
}
.portfolio-modal-close:hover {
  background-color: #8B0000;
}
.portfolio-carousel {
  position: relative;
}
/* Medium-size image — matches the 4:3 fullsize photos (1000x750px), runs
   edge-to-edge with no white margin on top/left/right */
.portfolio-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.portfolio-carousel .carousel-control-prev,
.portfolio-carousel .carousel-control-next {
  width: 2rem;
  height: 2rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background-color: #e4e4e4;
  border-radius: 50%;
  opacity: 1;
}
.portfolio-carousel .carousel-control-prev {
  left: 0.5rem;
}
.portfolio-carousel .carousel-control-next {
  right: 0.5rem;
}
.portfolio-carousel .carousel-control-prev-icon,
.portfolio-carousel .carousel-control-next-icon {
  filter: invert(1);
  width: 0.9rem;
  height: 0.9rem;
}
.carousel-counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: #228B22;
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Product description — tinted background (not pure white) so it stays
   visually distinct from the white-background product photos above it */
.portfolio-modal-description {
  background: #e8ece5;
  padding: 0.15rem 1.1rem 0.9rem;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Language switcher — circular flag, shows the language you can switch TO
   (not the current one). No custom left/right padding — it inherits the
   theme's own nav-link spacing (0 1rem), so the gap to the previous menu
   word matches the gap between menu words exactly. */
.lang-flag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border:2px solid #1a2b5c;
  object-fit: cover;
  object-position: center;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.lang-flag[alt="Georgian"] {
  border: 2px solid #d80027;
}
.nav-link.lang-switch {
  display: flex;
  align-items: center;
  height: 100%;
}
.lang-flag:hover {
  transform: scale(1.1);
}

/* Navbar edge padding on desktop — set to exactly 2rem so the gap between
   the flag and the screen edge matches the 2rem gap between menu words
   (1rem + 1rem from adjacent nav-link padding). Overrides the theme's own
   px-4/px-lg-5 utility classes (which are 1.5rem/3rem and don't match). */
@media (min-width: 992px) {
  #mainNav .container-fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* CTA section — replaces Bootstrap's default bg-dark (black) with the
   site's deep forest green, so it stays on-brand instead of neutral black. */
.page-section.bg-dark {
  background-color: #1B5E20 !important;
}

/* Fix: the theme's original portfolio-box-caption styling (overlay
   background, hover opacity transition, text sizing) was scoped to
   #portfolio in styles.css. That id was renamed to #products for the
   nav menu update, which silently broke the whole caption behavior.
   Re-declaring the same rules here under #products restores it without
   touching the vendor stylesheet. */
#products .container-fluid {
  max-width: 1920px;
}
#products .portfolio-box {
  position: relative;
  display: block;
  cursor: pointer;
}
#products .portfolio-box .portfolio-box-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(34, 139, 34, 0.9);
  transition: opacity 0.25s ease;
}
#products .portfolio-box .portfolio-box-caption .project-category {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#products .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
}
#products .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

/* Contact form message textarea height (was an inline style) */
#contactForm textarea#message {
  height: 10rem;
}

/* Fix: portfolio caption text (.project-category / .project-name) sits
   inside an <a> tag. If the theme's base CSS doesn't explicitly remove
   the default link underline for these specific elements, Georgian
   glyphs render with the underline cutting through them, looking like
   broken dashes. Force it off regardless of theme CSS load order. */
.portfolio-box,
.portfolio-box:hover,
.portfolio-box:focus,
.portfolio-box-caption,
.project-category,
.project-name {
  text-decoration: none !important;
}

/* Smooth scrolling for the scroll-to-top button (and any other in-page anchor links). */
html {
  scroll-behavior: smooth;
}
@media (max-width: 991.98px) {
  html {
    scroll-padding-top: 55px !important; /* mobile navbar height */
  }
}

/* Scroll-to-top button — floating circular button, bottom-right, hidden
   until the user scrolls down past the hero, then fades/slides in. */
.scroll-to-top-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #228B22;
  border: 2px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: none;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s ease;
  z-index: 1030;
}
.scroll-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top-btn:hover,
.scroll-to-top-btn:focus {
  background-color: #006400;
  color: #fff;
}
@media (max-width: 480px) {
  .scroll-to-top-btn {
    right: 1rem;
    bottom: 1rem;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* News / PULP Ultra spotlight section (sits inside the dark green CTA section) #228B22 */
#news.page-section {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
}

#contact.page-section {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
  background-image: url('../assets/img/texture-canvas.png');
  background-repeat: repeat;
}

#submitButton {
  font-size: 1.25rem;
  padding: 0.65rem 1.75rem;
}

.news-heading {
  font-size: 1.4rem;
}
.news-eyebrow {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.news-image {
  width: 100%;
  box-shadow:none;
}
.news-description {
  color: #fff;
  font-size: 0.95rem;
}
.news-description p {
  margin-bottom: 1rem;
}
.news-description ul {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}
.news-description ul li {
  margin-bottom: 0.4rem;
}
.news-tagline {
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  text-wrap: balance;
}
/* Mobile/tablet: narrow centered portrait image above the text */
@media (max-width: 991.98px) {
  .news-image {
    display: block;
    width: 100%;
    max-width: 230px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0 auto;
  }
}
/* Tablet: slightly larger portrait image */
@media (min-width: 768px) and (max-width: 991.98px) {
  .news-image {
    max-width: 320px;
  }
}

/* Capability icon grid — small badges showing where/how the product can be used */
.capability-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 2.5rem 0 2rem;
}
.capability-heading {
  color: #fff;
  font-weight: 700;
}
.capability-grid {
  margin-top: 1rem;
}
.capability-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem 0.75rem;
  border-radius: 4px;
  background-color: #2E7D32;
  border: 1px solid #FFFFFF;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.capability-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.16);
}
.capability-badge i {
  font-size: 1.6rem;
  color: #fff;
}
.capability-icon-img {
   height: 2.0rem;
   width: auto; 
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.capability-badge span {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

footer.bg-light {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.footer-links {
  margin-bottom: 0.75rem;
}
.footer-links .list-inline-item:not(:last-child)::after {
  content: "•";
  margin: 0 0.9rem;
  color: #bbb;
}
.footer-links a {
  color: #444;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.footer-links a:hover {
  color: #228B22;
}

.hero-cta {
  margin-top: 3rem;
}
.priorities-divider {
  margin: 0.6rem 0 1rem;
  opacity: 0.35;
}
.hero-sep {
  display: inline-block;
  width: 2px;
  height: 0.5em;
  background: #FFFFFF;
  margin: 0 0.5rem;
  vertical-align: middle;
}

@media (max-width: 1199.98px) {
  header.masthead .btn-xl {
    font-size: 1.2rem;
    padding: 1rem 2.2rem;
  }
  header.masthead .btn-xl.lang-en {
    font-size: clamp(0.9rem, 4.4vw, 1.2rem);
    padding: 1rem 1.5rem;
    white-space: nowrap;
  }
  #about .btn-xl {
    font-size: 1.2rem;
  }
  #about .btn-xl.lang-en {
    font-size: clamp(0.9rem, 4.4vw, 1.2rem);
  }
}

/* ===== About section — headings & layout (shared by Georgian + English) =====
   Selectors have no .lang-ka / .lang-en so both language versions get
   identical sizes. Weight is not set here: the headings carry Bootstrap's
   .fw-bold (700, !important), which would win anyway. */

/* 1. Heading hierarchy: title > subtitle > description */
#about h4 { font-size: 2rem;    line-height: 1.3;  margin-bottom: 1rem !important; }
#about h5 { font-size: 1.35rem; line-height: 1.45; margin-bottom: 1.25rem !important; }
#about h6 { font-size: 1.1rem;  line-height: 1.6;  opacity: .95; margin-bottom: 0 !important; }

/* "Our Priorities" heading (lower block) slightly smaller than the title */
#about .about-product-range h4 { font-size: 1.6rem; }

/* tagline is an <h6> too — restore its own small size */
#about h6.about-tagline { font-size: .85rem; line-height: 1.2; opacity: .9; }
#about .about-tagline { margin-bottom: 2rem !important; }

/* 2. Sabert logo — white card matching COVELLI's rounded style */
#about .about-logo.about-logo-sabert {
  height: 64px;
  background: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  box-sizing: content-box;
  margin-top: 2.5rem;
  margin-bottom: .75rem !important;
}
/* "Innovative Foodservice..." line */
#about .about-logo-sabert + h6 { font-size: 1rem; letter-spacing: .02em; }

/* 3. Lower block: vertical rhythm */
#about .about-product-range { margin-top: 1rem; }

/* 4. Mobile */
@media (max-width: 767.98px) {
  #about h4 { font-size: 1.5rem; }
  #about h5 { font-size: 1.15rem; }
  #about h6 { font-size: 1rem; }
  #about .about-product-range h4 { font-size: 1.35rem; }
  #about h6.about-tagline { font-size: .85rem; }
  #about .about-logo { height: 60px; }
  #about .about-logo.about-logo-sabert { height: 48px; padding: 10px 16px; }
  #about .product-range-list li { font-size: 1.1rem; }
}

/* Ultra product slider (inside #news) */
.ultra-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.ultra-slider-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
}
.ultra-slider-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ultra-nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #fff;
  color: #1B5E20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ultra-nav-btn:hover { transform: scale(1.08); }
.ultra-nav-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.ultra-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ultra-track::-webkit-scrollbar {
  display: none;
}
.ultra-card {
  /* Card width is calculated from the slider width so that N full cards
     plus ~40% of the next one are always visible (N depends on screen size) */
  flex: 0 0 min(240px, calc((100% - 16px) / 1.4));
  scroll-snap-align: start;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ultra-card-img {
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ultra-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ultra-card-info {
  background: #f3EEE5;
  color: #1B3A1F;
  padding: 0.25rem 0.75rem 0.85rem;
  flex: 1;
}
.ultra-card-info h5 {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  min-height: 2.6em;
}
.ultra-card-vol {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
}
.ultra-card-info hr {
  border: none;
  border-top: 1px solid rgba(27, 94, 32, 0.35);
  margin: 0.5rem 0;
  opacity: 1;
}
.ultra-card-dim,
.ultra-card-code {
  font-size: 0.75rem;
  margin: 0;
}
.ultra-card-code {
  font-weight: 700;
  color: #1B5E20;
}
@media (max-width: 575.98px) {
  .ultra-slider-title { font-size: 1.15rem; }
}
@media (min-width: 500px)  { .ultra-card { flex-basis: calc((100% - 32px) / 2.4); } }
@media (min-width: 768px)  { .ultra-card { flex-basis: calc((100% - 48px) / 3.4); } }
@media (min-width: 992px)  { .ultra-card { flex-basis: calc((100% - 64px) / 4.4); } }
@media (min-width: 1200px) { .ultra-card { flex-basis: calc((100% - 80px) / 5.4); } }
@media (min-width: 1400px) { .ultra-card { flex-basis: calc((100% - 96px) / 6.4); } }