.pt-6 {
    padding-top: 4rem !important;
    }

.pb-6 {
    padding-bottom: 4rem !important;
    }

.pt-7 {
    padding-top: 5rem !important;
    }

.pb-7 {
    padding-bottom: 5rem !important;
    }

.pt-8 {
    padding-top: 6rem !important;
    }
.pb-8 {
    padding-bottom: 6rem !important;
    }

.pt-9 {
    padding-top: 7rem !important;
    }
.pb-9 {
    padding-bottom: 7rem !important;
    }

.pt-10 {
    padding-top: 8rem !important;
    }
.pb-10 {
    padding-bottom: 8rem !important;
    }
.pt-auto {
    padding-top: auto !important;
    }
.pb-auto {
    padding-bottom: auto !important;
    }

.fs-7 {
        font-size: 0.85rem !important;
}

.px-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important;
}

.mb-6 { 
    margin-bottom: 4rem !important;
}
@media (max-width: 576px) {
    .pt-xs-0 {
        padding-top: 0 !important;
    }

    .pb-xs-0{
        padding-bottom: 0 !important;
    }

    .pt-xs-1 {
        padding-top: 0.25rem !important;
    }

    .pb-xs-1 {
        padding-bottom: 0.25rem !important;

    }

    .pt-xs-2 {
        padding-top: 0.5rem !important;
    }
    
    .pb-xs-2 {
        padding-bottom: 0.5rem !important;
    }

    .pt-xs-3 {
        padding-top: 1rem !important;
    }

    .pb-xs-3 {
        padding-bottom: 1rem !important;
    }

    .pt-xs-4 {
        padding-top: 1.5rem !important;
    }

    .pt-xs-5 {
        padding-top: 3rem !important;
    }

    .pb-xs-5 {
        padding-bottom: 3rem !important;
    }

    .pt-xs-6 {
        padding-top: 4.5rem !important;
    }

    .pb-xs-6 {
        padding-bottom: 4.5rem !important;
    }

    .pt-xs-7 {
        padding-top: 6rem !important;
    }

    .pb-xs-7 {
        padding-bottom: 6rem !important;
    }
    
    .fs-7 {
        font-size: 0.85rem !important;
    }
    .px-6 {
        padding-right: 5rem !important;
        padding-left: 5rem !important;
    }
}
.text-alt-color{
 color: var(--alt-theme-color) !important;}

.bg-transparent-alt {
    
  background-color: color-mix(in srgb, var(--alt-theme-color), transparent 70%);
}

.text-color {
    color: var(--text-color) !important;
}



.text-theme-not-important{
    color: var(--text-color);
}

.hover-text-color:hover {
    color: var(--hover-text-color) !important;
}



@font-face {
    font-family: 'BethanyElingston';
    src: url("../fonts/Bethany Elingston.db0199eda137.otf") format('opentype'),
         url("../fonts/Bethany Elingston.625a50e68062.woff") format('woff'),
         url("../fonts/Bethany Elingston.ad5e65a7c2b1.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BethanyElingston';
    src: url("../fonts/Bethany Elingston Italic.27738a1343fc.otf") format('opentype'),
         url("../fonts/Bethany Elingston Italic.1fb71df271fa.woff") format('woff'),
         url("../fonts/Bethany Elingston Italic.d08b0acfc87b.woff2") format('woff2');
    font-weight: normal;
    font-style: italic;
}


.text-theme-stroke {
    -webkit-text-stroke: 2px var(--theme-color);
}

.border-theme {
    border-color: var(--theme-color) !important;
}

.bg-gradient-theme {
    background: rgb(250,71,172);
    background: -moz-linear-gradient(90deg, rgba(250,71,172,1) 0%, rgba(255,110,193,1) 50%);
    background: -webkit-linear-gradient(90deg, rgba(250,71,172,1) 0%, rgba(255,110,193,1) 50%);
    background: linear-gradient(90deg, rgba(250,71,172,1) 0%, rgba(255,110,193,1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fa47ac",endColorstr="#ff6ec1",GradientType=1);
}
.mobile-logo {
    display: none; /* Hidden by default */
}

.desktop-logo {
    display: block; /* Visible by default */
}

/* Show the mobile logo on small screens (below 768px) */
@media (max-width: 767.98px) {
    .mobile-logo {
        display: block; /* Show mobile logo */
    }
    .desktop-logo {
        display: none; /* Hide desktop logo */
    }
}

.bg-alt-theme {
    background-color: var(--alt-theme-color) !important;
}

/* Base Button Styling */
.base-btn {
    display: inline-block;
    padding: 0px 10px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background: var(--theme-color);
    border: 4px solid #ff99cc; 
    border-radius: 10px; 
    position: relative;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  
  .base-btn span {
    position: relative;
    display: inline-block;
  }
  
  .base-btn::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 5px;
    background: linear-gradient(to right, #ff99cc, #ff66b2); /* Inner gradient */
    z-index: -1;
    transition: none; /* Prevents hover changes */
  }
  
  /* Hover/active/focus movement for .base-btn now comes from the shared
     button-interaction block at the end of this file, so it matches every
     other button on the site. Only the border is pinned here, so the button's
     pink frame does not shift colour on interaction. */
  .base-btn:hover,
  .base-btn:active {
    border-color: #ff99cc;
  }

  /* Suppress the focus ring for pointer interaction only - keyboard focus
     keeps its visible :focus-visible outline (see the shared block below). */
  .base-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-color: #ff99cc;
  }
  
  .base-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }
  
  @media (min-width: 768px) {
    .base-btn {
      padding: 0px 20px;
      font-size: 24px;
    }
  }
  
  @media (min-width: 1024px) {
    .base-btn {
      padding: 0px 30px;
      font-size: 30px;
    }
  }

  .hero-banner-video-cover, .hero-banner-video-cover iframe, .hero-banner-video-cover video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* No min-width: 100vw here. The selector also matches the wrapper div, which is
       absolutely positioned inside .hero-banner with no clipping, and 100vw counts the
       scrollbar - so the wrapper ended up wider than the viewport and scrolled the page
       sideways. width/height 100% plus object-fit: cover already fill the hero. */
}

/* Language switcher
   The column it lives in carries .font-size-0 (the theme's inline-gap hack),
   so every text node in here needs its own font-size or it renders at 0px. */
.language-switcher .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.language-switcher .lang-code {
    font-size: 13px;
    line-height: 1;
    letter-spacing: .5px;
    font-weight: 500;
}

.language-switcher .lang-caret {
    font-size: 11px;
    line-height: 1;
}

.language-switcher .dropdown-menu {
    min-width: max-content;
    padding: 10px 0;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 0 35px rgba(0, 0, 0, .1);
    margin-top: 1px;
    z-index: 99999;
}

.language-switcher .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 5px 20px;
    font-size: 13px;
    line-height: 1.4;
}

/* style.css:2408 sizes .icon-country as a 16px box, but the flags are 20x15,
   so the image overflowed its container and collided with the label. Size the
   box to the flag and let flex handle the spacing instead of the old margin. */
.language-switcher .icon-country {
    width: 20px;
    height: 15px;
    margin: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.language-switcher .flag-icon {
    width: 20px;
    height: 15px;
    display: block;
    border-radius: 1px;
}

.language-switcher .dropdown-item .lang-name {
    font-size: 13px;
}

.language-switcher .dropdown-item.active {
    background-color: transparent;
    color: #232323;
    font-weight: 500;
    cursor: default;
}

/* Dark header variant paints .dropdown-menu #232323, so flip the text back. */
.megamenu-dropdown-dark .language-switcher .dropdown-item,
.megamenu-dropdown-dark .language-switcher .dropdown-item.active {
    color: #fff;
}

.megamenu-dropdown-dark .language-switcher .dropdown-item:hover {
    background-color: rgba(255, 255, 255, .1);
}

/* ==========================================================================
   Navigation bar - long-label (Greek / Russian) handling
   --------------------------------------------------------------------------
   style.css:2901 gives every .nav-link `margin: 0 18px` (36px of gap per
   item) and `padding: 25px 0`, with no white-space rule. That is fine for
   short English labels, but Greek and Russian titles run considerably
   longer: the menu exceeds its column, each multi-word label breaks at its
   spaces, and because of the 25px vertical padding a two-line label makes
   the whole fixed-top header roughly twice as tall.

   Wrapping itself is fine - what is not fine is the wrap making the header
   grow. Because the 25px padding sits outside the text box, every extra
   line adds its full height to a fixed-top header.

   So: swap the vertical padding for a fixed height and centre the label
   inside it. The link keeps exactly the box it has today (25 + 21 + 25 =
   71px), and a second line is absorbed within that box instead of added to
   it - the header height stops depending on the label length. The gap is
   also tightened as the viewport narrows, so fewer labels need to wrap at
   all.

   Deliberately NOT using white-space: nowrap or flex-shrink: 0 here. That
   was the previous attempt, and it only converted the wrap into a
   horizontal overflow that ran under the logo.

   Desktop only - below 992px the navbar collapses to the burger menu and
   stacking is the correct behaviour there.
   ========================================================================== */
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-link {
        padding: 0;
        height: 71px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
    }

    /* The theme shrinks the links on scroll and for the top-logo layout by
       reducing their padding. Since the padding is now zero, restate those
       two as heights, at the same specificity as the rules they replace. */
    .sticky .navbar.responsive-sticky .navbar-nav .nav-link {
        padding: 0;
        height: 57px;
    }

    .navbar.top-logo .navbar-nav .nav-link {
        padding: 0;
        height: 61px;
    }
}

/* 992-1199px is the tightest desktop case: full menu, least room. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav .nav-link {
        margin: 0 8px;
        font-size: 13px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar .navbar-nav .nav-link {
        margin: 0 12px;
    }
}

/* ==========================================================================
   Button interaction states
   --------------------------------------------------------------------------
   Defined once here, against the shared button classes, so every button on
   the site (block buttons, header CTAs, arrow links, form submits) gets the
   same hover / active / focus feedback without per-template CSS.

   Only compositor-friendly properties are animated (transform, box-shadow,
   background-color) - never width/margin/padding, which would force layout.

   NOTE ON THE HOVER OPT-OUTS BELOW: the vendor theme uses `transform` on some
   `.btn` elements for *positioning* (e.g. `.newsletter-email .btn` is
   absolutely positioned with `translateY(-50%)`), or for its own richer hover
   effect (`.btn-box-shadow`, the interactive-banner and fancy-box reveals).
   Since this file loads after the theme, an unqualified hover transform would
   override those and break the layout, so they are excluded.
   ========================================================================== */

.btn,
.base-btn,
.btn-link,
.custom-btn-subscribe,
.dropzone-button,
button[type="submit"],
input[type="submit"] {
    transition: transform 200ms ease-out,
                background-color 200ms ease-out,
                box-shadow 200ms ease-out,
                border-color 200ms ease-out,
                opacity 200ms ease-out,
                color 200ms ease-out;
}

/* --- Hover: subtle lift + soft shadow ---------------------------------- */

/* The movement is carried in a custom property rather than written straight
   into the hover rule. Custom properties cascade on their own, so a variant
   can redefine its movement with a plain one-class selector (see the arrow
   CTAs below) without having to out-specify the exclusion-heavy selector
   that actually applies the transform. One rule sets `transform`; anything
   that wants different movement only changes the variable. */
.btn,
.base-btn,
.custom-btn-subscribe,
button[type="submit"],
input[type="submit"] {
    --btn-hover-transform: translateY(-2px);
}

.btn:hover:not(.btn-box-shadow):not(:where(
        .newsletter-email,
        [class*="newsletter-style"],
        .interactive-banners-box,
        .interactive-banners-box-image,
        .fancy-box,
        .coupon-code-panel,
        .price-filter-details,
        .blog-hover-btn) .btn),
.base-btn:hover,
.custom-btn-subscribe:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    transform: var(--btn-hover-transform);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
}

/* Deepen whatever background the button already carries, without having to
   know which of the theme/brand colour classes was applied to it.

   These need !important, and specificity will not substitute for it: the
   theme declares `.bg-theme { background-color: ... !important }`
   (style.css:402), and an important declaration beats every normal one no
   matter how specific the selector or how late the file loads. On a filled
   button the colour shift is the main cue -- the 2px lift alone is close to
   invisible -- so losing this one made the button read as completely dead. */
.btn.bg-theme:hover,
.btn.btn-theme:hover {
    background-color: color-mix(in srgb, var(--theme-color), #000 18%) !important;
}

.btn.bg-alt-theme:hover {
    background-color: color-mix(in srgb, var(--alt-theme-color), #000 18%) !important;
}

.base-btn:hover {
    background-color: color-mix(in srgb, var(--theme-color), #000 18%);
}

/* Arrow / text CTAs read as links, not slabs, so they nudge along the arrow's
   axis instead of lifting, and carry no drop shadow. */
.btn.btn-link,
.btn.btn-slide-icon {
    --btn-hover-transform: translateX(3px);
}

.btn.btn-slide-icon-left {
    --btn-hover-transform: translateX(-3px);
}

.btn.btn-link:hover,
.btn.btn-slide-icon:hover,
.btn.btn-slide-icon-left:hover {
    box-shadow: none;
}

/* `.btn.btn-link` is a text link with a 1-2px bottom border and a transparent
   background, so neither the lift nor the background-deepen above gives it any
   visible feedback. Darken the text and its underline instead.

   The !important is unavoidable: `.text-theme` and friends in the vendor theme
   set `color` with !important (style.css:189), so nothing else can win. Each
   variant is deepened from the same custom property the theme colours it with,
   so the hover tracks whatever brand colour is configured.

   This matters most on the interactive-banner cards (the "image switcher"
   grids): their CTA sits in `.interactive-banners-box-sub-title`, which is
   hidden until the card is hovered, so by the time the pointer reaches the
   button the card-level hover has already fired and the button itself is the
   only thing left that can respond. */
.btn.btn-link.text-theme:hover {
    color: color-mix(in srgb, var(--text-theme-color), #000 22%) !important;
    border-bottom-color: color-mix(in srgb, var(--text-theme-color), #000 22%);
}

.btn.btn-link.text-alt-color:hover {
    color: color-mix(in srgb, var(--alt-theme-color), #000 22%) !important;
    border-bottom-color: color-mix(in srgb, var(--alt-theme-color), #000 22%);
}

/* Light-on-dark variants (.text-white and friends) are deliberately left to
   the theme's own `.btn.btn-link:hover { opacity: .7 }`. Darkening them is
   wrong on a dark background, and overriding the opacity here would only
   out-specify that rule and leave them with no feedback at all. It now eases
   rather than snapping, because `opacity` is in the transition list above. */

/* Section-title links (e.g. the products grid heading) are CTAs by behaviour
   but carry no button class, so they need naming explicitly. */
.section-cta-link {
    display: inline-block;
    transition: transform 200ms ease-out, color 200ms ease-out;
}

.section-cta-link:hover {
    transform: translateY(-2px);
}

.section-cta-link:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 80ms;
}

.section-cta-link:focus-visible {
    outline: 2px solid var(--theme-color, #000) !important;
    outline-offset: 3px !important;
}

/* --- Active: tactile push ---------------------------------------------- */

.btn:active:not(:where(
        .newsletter-email,
        [class*="newsletter-style"],
        .interactive-banners-box,
        .interactive-banners-box-image,
        .fancy-box,
        .coupon-code-panel,
        .price-filter-details,
        .blog-hover-btn) .btn),
.base-btn:active,
.custom-btn-subscribe:active,
button[type="submit"]:active,
input[type="submit"]:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.35);
    transition-duration: 80ms;
}

/* --- Focus: keyboard-visible outline; must not be removed --------------- */

.btn:focus-visible,
.base-btn:focus-visible,
.btn-link:focus-visible,
.custom-btn-subscribe:focus-visible,
.dropzone-button:focus-visible,
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible {
    outline: 2px solid var(--theme-color, #000) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-color, #000), transparent 75%) !important;
}

/* --- Disabled ----------------------------------------------------------- */

.btn:disabled,
.base-btn:disabled,
.custom-btn-subscribe:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled {
    transform: none;
    box-shadow: none;
}

/* --- Reduced motion: keep the colour/shadow cues, drop the movement ----- */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .base-btn,
    .btn-link,
    .custom-btn-subscribe,
    .dropzone-button,
    button[type="submit"],
    input[type="submit"] {
        transition: background-color 200ms ease-out,
                    box-shadow 200ms ease-out,
                    color 200ms ease-out;
    }

    .btn:hover,
    .btn:active,
    .base-btn:hover,
    .base-btn:active,
    .custom-btn-subscribe:hover,
    .custom-btn-subscribe:active,
    button[type="submit"]:hover,
    button[type="submit"]:active,
    input[type="submit"]:hover,
    input[type="submit"]:active,
    .section-cta-link:hover,
    .section-cta-link:active {
        transform: none;
    }
}

/* --- Reduced motion: scroll reveals ------------------------------------- *
 * WOW.js hides every .wow element (visibility: hidden) and only reveals it
 * when the reveal animation runs, so killing the animation alone would leave
 * the content permanently invisible. Both declarations are required: show the
 * element, and skip the entrance animation.
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .wow,
    .wow.animate__animated {
        visibility: visible !important;
        animation: none !important;
        animation-delay: 0s !important;
    }
}

/* --- Site footer -------------------------------------------------------- *
 * The footer navigation is generated from the page tree (see
 * BlocksFashion/Footer/templates/footer_navigation.html), so the column count
 * is whatever the menu happens to contain. `col-lg` lets Bootstrap divide the
 * row evenly however many that is, and the rules below make the per-column
 * lists behave as a mobile accordion (Bootstrap collapse) that is always
 * expanded from the lg breakpoint up.
 * ----------------------------------------------------------------------- */

.footer-nav-heading {
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.footer-nav-caret {
    float: right;
    transition: transform 0.25s ease;
}

.footer-nav-heading[aria-expanded="true"] .footer-nav-caret {
    transform: rotate(180deg);
}

.footer-nav-list a,
.footer-contact a,
.footer-legal a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-nav-list a:hover,
.footer-contact a:hover,
.footer-legal a:hover,
.footer-nav-heading:hover {
    color: #fff;
}

.footer-nav-list li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.footer-nav-sublist {
    margin: 6px 0 6px 14px;
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 10px;
}

.footer-contact li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.footer-contact i {
    width: 18px;
    margin-right: 8px;
}

.footer-external-icon {
    font-size: 10px;
    opacity: 0.6;
}

@media (min-width: 992px) {
    /* Desktop: columns, never an accordion. */
    .footer-nav-list.collapse:not(.show) {
        display: block;
    }

    .footer-nav-heading {
        pointer-events: none;
    }
}

@media (max-width: 991px) {
    .footer-nav-heading {
        padding: 10px 0;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-nav-list {
        padding-top: 10px;
    }
}

/* Editor-authored rich text.
   The theme resets `ul { margin: 0; padding: 0 }` (style.css) so nav menus,
   sliders and footers can sit flush against their column. Paired with the
   `list-style-position: outside` on the line above it, that leaves an editor's
   bulleted list with no indent to hold its markers, so the bullets render
   outside the content box - at mobile widths they land on the viewport edge.
   Scope the indent to rich text so the theme's own lists stay flush. */
.rich-text ul,
.rich-text ol {
    padding-left: 1.25rem;
    margin-bottom: 25px;
}

.rich-text li {
    margin-bottom: 8px;
}

/* Markers are positioned outside the content box, so they take no part in text
   centring: in a `.text-center` column the label centres while the bullet stays
   pinned to the left edge, reading as a marker stranded from its own text.
   Shrink the list to its content and centre that block instead - the marker
   then sits beside its label, and because the list is still `outside` a wrapped
   line keeps its hanging indent. */
.text-center .rich-text ul,
.text-center .rich-text ol {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* From md up `.text-md-start` takes the text back to the left, so the columns
   that pair it with `.text-center` must drop the shrink-wrap or the list would
   float centred inside a left-aligned column. */
@media (min-width: 768px) {
    .text-md-start .rich-text ul,
    .text-md-start .rich-text ol {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Overflow safety net for editor-authored content.

   style.css already caps `img` and `video` at the content width, but an embed
   or a pasted table has no such cap: a Wagtail embed carries the provider's
   own width/height attributes, and a table sizes to its widest row. Either one
   pushes past a narrow column and takes the whole page's horizontal scrollbar
   with it - the block itself looks fine, so the cause is easy to miss.

   Scope this to rich text rather than resetting `table`/`iframe` globally: the
   theme uses both inside components (maps, carousels, pricing grids) that set
   their own sizing. A table wider than its column scrolls inside its own
   wrapper instead of the page. */
.rich-text iframe,
.rich-text embed,
.rich-text object,
.rich-text .responsive-video iframe {
    max-width: 100%;
}

.rich-text table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

/* A long unbroken string - a URL or a part number pasted without spaces - is a
   single word the browser will not wrap, so it overflows on its own. */
.rich-text {
    overflow-wrap: break-word;
}

/* --- Team cards: quicker reveal ----------------------------------------- *
 * animate.css defaults `--animate-duration` to 1s, which reads as sluggish on
 * a grid of four portraits that already stagger by up to 0.3s - the last card
 * finishes well over a second after the row scrolls in. Half a second keeps
 * the reveal legible without holding up the content.
 *
 * Override the variable rather than `animation-duration` directly: WOW.js
 * writes an inline `animation-duration` when a card carries
 * `data-wow-duration`, and an inline value beats any stylesheet rule, so
 * per-card overrides in a template must still win over this. Reduced motion is
 * handled by the site-wide `.wow` rule above.
 * ----------------------------------------------------------------------- */
.team-style-01.wow {
    --animate-duration: 0.5s;
}


/* --- Footer co-funding banner: cap the height ---------------------------- *
 * The banner image (the EU co-funding strip plus the Republic of Cyprus crest)
 * is a 1674x116 white letterbox - a 14:1 ratio. Stretched with `w-100` it
 * scales its height with the viewport, so on a desktop it lands at ~130px of
 * mostly-empty white below a dark footer, which reads as a mistake rather than
 * a credit line.
 *
 * Cap the height and let the width follow (`object-fit: contain` plus
 * `width: auto`) so the strip keeps its ratio and stays centred. `max-width`
 * hands narrow screens back to the old full-bleed behaviour, where the height
 * is already small and edge-to-edge is what you want.
 * ----------------------------------------------------------------------- */
.footer-banner {
    background-color: #ffffff;
}

.footer-banner img {
    width: auto;
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
}

@media (max-width: 991px) {
    .footer-banner img {
        max-height: 56px;
    }
}

/* --- Footer credit line -------------------------------------------------- *
 * "Developed by CAONYX" sits with the copyright rather than in its own row, so
 * it needs a separator on one line and none when it wraps to its own. A
 * pseudo-element keeps the bullet out of the translated string.
 * ----------------------------------------------------------------------- */
.footer-credit {
    opacity: 0.7;
}

@media (min-width: 768px) {
    .footer-credit::before {
        content: "\00b7";
        margin: 0 0.4rem;
    }
}