/* === CONTAINER === */
.container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
}

/* === BASE RESET === */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 300;
    line-height: 1.6;
    color: #262626;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

/* === TOP BAR === */
#top {
    background: #ffffff;
    border-bottom: 1px solid #ececec;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #b3b3b3;
}

#top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top .top-left {
    display: flex;
    gap: 16px;
    align-items: center;
}

#top .top-item {
    color: #b3b3b3;
}

#top .top-item i {
    margin-right: 4px;
}

#top .top-item a {
    color: #b3b3b3;
    text-decoration: none;
}

#top .top-item a:hover,
#top .top-right a:hover {
    color: #262626;
}

#top .top-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

#top .top-right a {
    color: #b3b3b3;
    text-decoration: none;
    font-size: 14px;
}

/* === NAVBAR === */
#navbar {
    background: #ffffff;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1000;
}

#navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
#navbar .navbar-brand {
    display: block;
    padding: 6px 0;
    height: auto;
}

#navbar .navbar-brand img {
    max-height: 80px;
    width: auto;
}

/* Desktop nav list */
#navbar .navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

#navbar .navbar-nav > li {
    position: relative;
}

#navbar .navbar-nav > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: #262626;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.0;
    transition: 0.3s all ease-in-out;
    text-transform: uppercase;
}

/* Font Awesome icons before nav items via CSS classes */
#navbar .navbar-nav > li.nav-home > a::before { content: "\f015"; font-family: FontAwesome; display: block; margin-bottom: 8px; font-size: 18px; }
#navbar .navbar-nav > li.nav-onas > a::before { content: "\f0c0"; font-family: FontAwesome; display: block; margin-bottom: 8px; font-size: 18px; }
#navbar .navbar-nav > li.nav-oferta > a::before { content: "\f0c2"; font-family: FontAwesome; display: block; margin-bottom: 8px; font-size: 18px; }
#navbar .navbar-nav > li.menu-item-object-portfolio_project > a::before { content: "\f00a"; font-family: FontAwesome; display: block; margin-bottom: 8px; font-size: 18px; }
#navbar .navbar-nav > li.nav-kontakt > a::before { content: "\f095"; font-family: FontAwesome; display: block; margin-bottom: 8px; font-size: 18px; }
#navbar .navbar-nav > li.nav-blog > a::before { content: "\f040"; font-family: FontAwesome; display: block; margin-bottom: 8px; font-size: 18px; }

/* Hover and active states */
#navbar .navbar-nav > li > a:hover,
#navbar .navbar-nav > li.current-menu-item > a,
#navbar .navbar-nav > li.current-menu-ancestor > a {
    background-color: #ed1c24;
    color: #ffffff;
}

/* Dropdown submenu */
#navbar .navbar-nav > li > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 3px 3px rgba(0,0,0,0.5);
    z-index: 1001;
}

#navbar .navbar-nav > li:hover > .sub-menu {
    display: block;
}

#navbar .sub-menu li a {
    display: block;
    padding: 12px 16px;
    color: #262626;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    transition: 0.3s all ease-in-out;
    border-bottom: 1px solid #f0f0f0;
}

#navbar .sub-menu li:nth-child(even) {
    background: #FAFFFA;
}

#navbar .sub-menu li:nth-child(odd) {
    background: #ffffff;
}

#navbar .sub-menu li a:hover {
    background-color: #ed1c24;
    color: #ffffff;
}

/* === HAMBURGER (MOBILE) === */
#navbar .navbar-toggle {
    display: none;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 12px 14px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    margin-top: 25px;
}

#navbar .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ccc;
    margin: 4px 0;
}

#navbar .navbar-collapse {
    padding: 0;
}

/* === RESPONSIVE === */

/* Tablet: 768-992px */
@media (max-width: 992px) {
    #navbar .navbar-nav > li > a {
        padding: 20px 10px;
        font-size: 12px;
    }

    #navbar .navbar-nav > li > a::before {
        font-size: 16px;
    }

    #navbar .navbar-brand img {
        max-width: 250px;
    }
}

/* Mobile: <= 767px */
@media (max-width: 767px) {
    #top .top-left {
        display: none;
    }

    #navbar .container {
        flex-wrap: wrap;
    }

    #navbar .navbar-header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        float: none !important;
    }

    #navbar .navbar-toggle {
        display: block;
    }

    #navbar .navbar-collapse {
        display: none;
        width: 100%;
    }

    #navbar .navbar-collapse.open {
        display: block;
    }

    #navbar .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    #navbar .navbar-nav > li > a {
        flex-direction: row;
        padding: 12px 16px;
        justify-content: flex-start;
        gap: 8px;
    }

    #navbar .navbar-nav > li > a::before {
        margin-bottom: 0;
    }

    #navbar .navbar-nav > li:hover > .sub-menu,
    #navbar .navbar-nav > li > .sub-menu {
        position: static;
        box-shadow: none;
        display: block;
    }

    #navbar .navbar-nav > li > a:hover {
        background-color: #148e00;
        color: #ffffff;
    }

    #navbar .sub-menu li a {
        padding-left: 32px;
    }
}

/* XS Mobile: <= 350px */
@media (max-width: 350px) {
    #navbar .navbar-brand img {
        max-width: 220px;
    }
}


/* === BREADCRUMBS === */
#breadcrumb{ background-color: #F7F7F7; border-bottom: 1px solid #ccc; padding: 25px 0;}
#breadcrumb ul{ list-style: none; margin: 0; padding: 0;}
#breadcrumb ul li { font-size: 1.3em; display: inline-block; line-height: 18px; }
#breadcrumb ul li a { color: #666; font-weight: lighter; text-transform: uppercase;}
#breadcrumb ul li a:hover { text-decoration: none;}
#breadcrumb ul li::after{
 font-family: 'FontAwesome';
 content: "\f105";
 display: inline-block;
 color: #ccc;
 margin: 0 10px;
}
#breadcrumb ul li:first-child a{font-size: 1.8em;}
#breadcrumb ul li:last-child::after{display: none;}

/* === SECTION === */
section h1 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 3.5em;
    text-align: center;
    margin: 30px 0;
}
section h2 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 3em;
    text-align: center;
    margin: 20px 0;
}
section h6 {
    font-weight: 500;
    line-height: 1.1;
    font-size: 1.6em;
    text-align: center;
    margin: 10px 0;
}
section hr {
    border: 0;
    border-top: 1px solid #ec1a22;
    width: 200px;
    margin-bottom: 80px;
}

/* === FOOTER WHY WE === */
#whyWe {
    position: relative;
    padding: 50px 0;
    background-attachment: fixed;
    background-size: cover;
    background-position: center bottom;
}
#whyWe .boxes { display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 20px;}
#whyWe .boxes > .box { flex: 1 1 calc(25% - 23px); min-width: 0; }
#whyWe .box { background-color: rgba(255,255,255,0.7); color: #262626; padding: 25px; text-align: center; transition: 0.3s all ease-in; cursor: default; margin-bottom: 0; box-sizing: border-box; }
#whyWe .box i { font-size: 7em; text-align: center; display: block; margin: 0 auto; }
#whyWe .box h4 { font-size: 2em; margin: 30px 0; }
#whyWe .box p { font-size: 1.4em; }
#whyWe .box:hover { background-color: #e6121a; color: #fff; }
#whyWe .boxes > div:nth-child(2n+1):hover { border-radius: 0 30px 0 30px; }
#whyWe .boxes > div:nth-child(2n+2):hover { border-radius: 30px 0 30px 0; }

/* Tablet: 2x2 */
@media (max-width: 991px) {
    #whyWe .boxes > .box { flex: 1 1 calc(50% - 15px); }
}

/* Mobile: stack */
@media (max-width: 575px) {
    #whyWe .boxes { column-gap: 0; }
    #whyWe .boxes > .box { flex: 1 1 100%; }
    #whyWe .box h4 { margin: 20px 0 10px; }
}


/* === FOOTER COPYRIGHT BAR === */
#site-footer {
    background-color: #000000;
    color: #555555;
    font-size: 12px;
    line-height: 25px;
    font-family: Arial, sans-serif;
    padding: 10px 0;
}

#site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#site-footer .footer-left {
    color: #555555;
}

#site-footer .footer-right {
    color: #555555;
    display: flex;
    align-items: center;
}

#site-footer .footer-right a {
    color: #b3b3b3;
    text-decoration: none;
    display: block;
}

#site-footer .footer-right a:hover {
    color: #ffffff;
}

#site-footer .footer-logo {
    max-height: 30px;
    display: block;
    padding-left: 10px;
}

/* === BACK TO TOP === */
#back-to-top {
    display: none;
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    background-color: #ed1c24;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    text-decoration: none;
    border-radius: 0;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

#back-to-top:hover {
    opacity: 0.8;
    color: #ffffff;
}

#back-to-top.visible {
    display: block;
}

/* Ukrycie slidera na małych ekranach (opcjonalnie — Smart Slider ma własne ustawienia) */
@media (max-width: 480px) {
    #baner .n2-ss-slider-wrapper {
        min-height: 200px;
    }
}

/* === FOOTER RESPONSIVE === */
@media (max-width: 767px) {
    #site-footer .container {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }

}

/* =====================================================
   ERROR PAGES (404 etc.)
   ===================================================== */

.error-page {
    padding: 8rem 0 10rem;
    text-align: center;
}
.error-page__inner {
    max-width: 560px;
    margin: 0 auto;
}
.error-page__code {
    font-size: 12rem;
    font-weight: 700;
    line-height: 1;
    color: #ED1C24;
    opacity: 0.15;
    margin-bottom: -2rem;
    letter-spacing: -4px;
}
.error-page__title {
    font-size: 3rem;
    font-weight: 300;
    color: #262626;
    margin: 0 0 1.5rem;
}
.error-page__desc {
    font-size: 1.5rem;
    font-weight: 300;
    color: #666;
    line-height: 1.7;
    margin-bottom: 3rem;
}
.error-page__actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.error-page__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 1.4rem;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.error-page__btn--primary {
    background: #ED1C24;
    color: #fff;
}
.error-page__btn--primary:hover {
    background: #c0141b;
    color: #fff;
}
.error-page__btn--secondary {
    background: #262626;
    color: #fff;
}
.error-page__btn--secondary:hover {
    background: #ED1C24;
    color: #fff;
}

/* =====================================================
   ELEMENTOR RESPONSIVE GUARDS
   Override desktop section padding bleeding into mobile
   when authors forgot to set per-breakpoint padding.
   ===================================================== */
@media (max-width: 767px) {
    .elementor-section.elementor-top-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .elementor-section .elementor-container {
        max-width: 100% !important;
    }
    .elementor-column.elementor-col-100,
    .elementor-column.elementor-col-50,
    .elementor-column.elementor-col-33,
    .elementor-column.elementor-col-25,
    .elementor-column.elementor-col-66,
    .elementor-column.elementor-col-75 {
        width: 100% !important;
    }
}

/* Smart Slider safety: never push body wider than viewport */
html, body { overflow-x: hidden; }
.n2-ss-slider, .n2-ss-slider-wrapper, .n2-ss-slide-backgrounds { max-width: 100%; }

/* ============================================================
 * Shared section pattern — design.md T-5 / T-6 / T-11 / CT-1.
 * Apply to any Elementor heading widget (via "CSS Classes" field)
 * or to bare HTML inside theme/shortcode markup.
 * ============================================================ */

/* Large section H2 / page H1 */
.section-title {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
    font-size: 64px !important;
    line-height: 1.15 !important;
    color: #262626 !important;
    text-align: center !important;
    margin: 0 0 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.section-title .elementor-heading-title {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* Muted subtitle line under section heading */
.section-subtitle {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #b3b3b3 !important;
    text-align: center !important;
    margin: 0 auto 24px !important;
    max-width: 720px !important;
    text-transform: none !important;
}
.section-subtitle .elementor-heading-title {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Short brand-red underline accent (80x2px, centered).
   Two variants — bare element vs Elementor divider widget — so the bg
   never bleeds onto the full-width widget wrapper. */
span.section-accent,
hr.section-accent,
div.section-accent:not(.elementor-widget) {
    display: block;
    width: 80px;
    height: 2px;
    background: #ed1c24;
    margin: 0 auto 30px;
    border: 0;
}
.elementor-widget-divider.section-accent {
    background: transparent !important;
    margin-bottom: 30px !important;
}
.elementor-widget-divider.section-accent .elementor-divider {
    width: 80px !important;
    margin: 0 auto !important;
}
.elementor-widget-divider.section-accent .elementor-divider-separator {
    border-top: 2px solid #ed1c24 !important;
    width: 80px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

/* Note / free-form textarea block (matches grid width of its parent) */
.section-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 24px;
}
.section-note > span {
    font-size: 12px;
    font-weight: 600;
    color: #262626;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.section-note textarea {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    padding: 14px 16px;
    font: 300 14px/1.55 'Open Sans', sans-serif;
    color: #262626;
    resize: vertical;
    min-height: 96px;
}
.section-note textarea::placeholder { color: #b3b3b3; }
.section-note textarea:focus {
    outline: none;
    border-color: #ed1c24;
    box-shadow: 0 0 0 3px rgba(237,28,36,.12);
}

@media (max-width: 980px) {
    .section-title { font-size: 42px !important; }
}
@media (max-width: 640px) {
    .section-title { font-size: 32px !important; }
    .section-subtitle { font-size: 14px !important; }
}

/* ============================================================
 * Section background scenes — tag an Elementor section with one of
 * the variants below (via "CSS Classes" field) to overlay a subtle
 * decorative pattern on top of the section's solid color. All four
 * variants share a transparent ::before that sits at z-index 0 and
 * a content wrapper bumped to z-index 1 so widgets stay above the
 * pattern. Designed for use on `#F7F7F7` sections to add variety
 * across an offer page.
 * ============================================================ */

.mg-scene-blobs,
.mg-scene-dots,
.mg-scene-lines,
.mg-scene-grid {
    position: relative;
    overflow: hidden;
}
.mg-scene-blobs::before,
.mg-scene-dots::before,
.mg-scene-lines::before,
.mg-scene-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.mg-scene-blobs > .elementor-container,
.mg-scene-dots  > .elementor-container,
.mg-scene-lines > .elementor-container,
.mg-scene-grid  > .elementor-container {
    position: relative;
    z-index: 1;
}

/* All scenes also support an ::after layer for the per-variant signature.
   ::before holds the dominant background texture (varies per scene),
   ::after holds the per-section accent or wash. */
.mg-scene-blobs::after,
.mg-scene-dots::after,
.mg-scene-lines::after,
.mg-scene-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ---- Variant 1 — `mg-scene-blobs` (hero) ----------------------------
   Vertical fade: white at top → solid bg. Hair-thin brand glow at top-centre.
   No texture in the ::before — clean editorial hero feel. */
.mg-scene-blobs::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 55% 22% at 50% 0%, rgba(237,28,36,0.07), transparent 70%);
}
.mg-scene-blobs::after {
    /* Single 80×2 brand rule sitting above the H1 (purely decorative — the
       heading still has its own .section-accent below it). */
    background: radial-gradient(ellipse 40px 1px at 50% 12%, #ed1c24, transparent 70%);
    opacity: 0;  /* keep off by default — hero already has plenty of accent */
}

/* ---- Variant 2 — `mg-scene-dots` (content rows) --------------------
   Fine dot grid as the dominant texture, masked to fade at top + bottom
   so the section's neighbours blend in cleanly. No brand colour. */
.mg-scene-dots::before {
    background-image: radial-gradient(circle, rgba(38,38,38,0.10) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
    mask:         linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
    opacity: 0.65;
}

/* ---- Variant 3 — `mg-scene-lines` (process row) --------------------
   Very faint diagonal stripes (≈4% alpha) at 135° — feels like "premium
   pinstripe paper". Top + bottom mask so consecutive `.mg-scene-lines`
   sections blend seamlessly (the heading + content-row pair on offer
   pages is split into two Elementor sections that would otherwise show
   a hard seam at the join). No corner highlight for the same reason. */
.mg-scene-lines::before {
    background:
        repeating-linear-gradient(135deg, rgba(38,38,38,0.04) 0 1px, transparent 1px 18px);
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask:         linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.mg-scene-lines::after {
    /* very faint centre-out lift only — no corner highlight (was creating
       a duplicated bright spot at the boundary of split sections). */
    background:
        radial-gradient(ellipse 70% 90% at 50% 50%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 65%);
}

/* ---- Variant 4 — `mg-scene-grid` (demo / kalkulator) --------------
   Engineered look — fine dot grid + a vertical "rail" gradient on the left
   third + a sharper top-right corner wash. Communicates "tool" / "app". */
.mg-scene-grid::before {
    background-image: radial-gradient(circle, rgba(38,38,38,0.10) 1px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.75;
}
.mg-scene-grid::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 22%),
        radial-gradient(ellipse 45% 35% at 100% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%);
}

/* Reduced motion: scenes are static decoration only — no special
   action needed today; left here as a hook in case we add drift. */
@media (prefers-reduced-motion: reduce) {
    .mg-scene-blobs::before,
    .mg-scene-dots::before,
    .mg-scene-lines::before,
    .mg-scene-grid::before { animation: none !important; }
}