/* ==========================================================
   TIR SERWIS POLSKA / LITWA
   GŁÓWNY ARKUSZ STYLÓW
========================================================== */

:root {

    --green: #006a44;
    --green-dark: #004b32;
    --green-light: #e9f2ee;

    --yellow: #fdb913;
    --red: #c1272d;

    --dark: #101713;
    --dark-soft: #17231d;

    --text: #17201b;
    --muted: #667069;

    --white: #ffffff;

    --background: #ffffff;
    --background-light: #f4f7f5;

    --border: #dde5e0;

    --container: 1200px;

    --radius-small: 10px;
    --radius: 20px;
    --radius-large: 30px;

    --shadow:
        0 20px 60px rgba(16, 23, 19, 0.10);
}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--background);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ==========================================================
   GLOBAL
========================================================== */

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.section {
    padding: 110px 0;
}

.section-light {
    background: var(--background-light);
}

.section-dark {
    color: var(--white);
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 106, 68, 0.32),
            transparent 36%
        ),
        var(--dark);
}

.section-label {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--green);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);

    gap: 50px;
    align-items: end;

    margin-bottom: 55px;
}

.section-heading h2,
.area-copy h2,
.faq-intro h2 {

    margin: 0;

    max-width: 780px;

    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.04;

    letter-spacing: -0.045em;
}

.section-heading p {
    margin: 0;

    color: var(--muted);
}

.dark-heading p {
    color: rgba(255, 255, 255, .64);
}

.dark-heading .section-label {
    color: var(--yellow);
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 14px 22px;

    border: 1px solid transparent;
    border-radius: 12px;

    font-weight: 800;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

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

.btn-primary {
    color: var(--dark);
    background: var(--yellow);
}

.btn-primary:hover {
    background: #ffc92f;
}

.btn-secondary {
    color: var(--white);
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .08);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, .14);
}


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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    color: var(--white);
    background: rgba(16, 23, 19, .96);

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(16px);

    transition: box-shadow .25s ease;
}

.site-header.scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

.header-inner {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: inherit;
    text-decoration: none;

    flex-shrink: 0;
}

.flag-mark {
    width: 38px;
    height: 38px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: 9px;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12);
}

.flag-mark span {
    flex: 1;
}

.flag-mark span:nth-child(1) {
    background: var(--yellow);
}

.flag-mark span:nth-child(2) {
    background: var(--green);
}

.flag-mark span:nth-child(3) {
    background: var(--red);
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.brand-text strong {
    font-size: 16px;
    letter-spacing: .01em;
}

.brand-text span {
    margin-top: 4px;

    color: rgba(255, 255, 255, .62);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
}

.desktop-nav {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-left: auto;
}

.desktop-nav a {
    position: relative;

    color: rgba(255, 255, 255, .74);

    font-size: 14px;
    font-weight: 650;

    text-decoration: none;
}

.desktop-nav a::after {
    position: absolute;

    left: 0;
    right: 100%;
    bottom: -7px;

    height: 2px;

    content: "";

    background: var(--yellow);

    transition: right .2s ease;
}

.desktop-nav a:hover {
    color: var(--white);
}

.desktop-nav a:hover::after {
    right: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.availability {
    display: flex;
    align-items: center;
    gap: 7px;

    color: rgba(255, 255, 255, .68);

    font-size: 12px;
    font-weight: 700;
}

.status-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;

    background: #37d67a;

    box-shadow: 0 0 0 5px rgba(55, 214, 122, .10);
}

.btn-header {
    min-height: 44px;

    padding: 10px 18px;

    color: var(--dark);
    background: var(--yellow);

    font-size: 13px;
}

.menu-toggle {
    width: 46px;
    height: 46px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    margin-left: auto;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;

    background: transparent;
}

.menu-toggle span {
    width: 20px;
    height: 2px;

    background: var(--white);
}

.mobile-menu {
    display: none;
}


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

.hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--white);

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(0, 106, 68, .32),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #0b120e 0%,
            #101b15 65%,
            #14271d 100%
        );
}

.hero::after {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 5px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--yellow) 0 33.33%,
            var(--green) 33.33% 66.66%,
            var(--red) 66.66% 100%
        );
}

.hero-decoration {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.hero-decoration-one {
    width: 500px;
    height: 500px;

    right: -220px;
    top: -150px;
}

.hero-decoration-two {
    width: 270px;
    height: 270px;

    right: 23%;
    bottom: -120px;
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);

    align-items: center;

    gap: 80px;

    padding-top: 80px;
    padding-bottom: 80px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: rgba(255, 255, 255, .72);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.hero h1 {
    margin: 0;

    max-width: 760px;

    font-size: clamp(52px, 6.3vw, 88px);
    line-height: .95;

    letter-spacing: -.055em;
}

.hero h1 span {
    display: block;

    margin-top: 10px;

    color: var(--yellow);
}

.hero-lead {
    max-width: 650px;

    margin: 30px 0 0;

    color: rgba(255, 255, 255, .70);

    font-size: 19px;
    line-height: 1.65;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 35px;

    margin-top: 48px;
}

.hero-points div {
    display: flex;
    flex-direction: column;

    padding-left: 16px;

    border-left: 2px solid var(--green);
}

.hero-points strong {
    font-size: 18px;
}

.hero-points span {
    margin-top: 3px;

    color: rgba(255, 255, 255, .50);

    font-size: 12px;
}

.hero-visual {
    position: relative;

    min-height: 520px;
}

.visual-placeholder {
    position: absolute;
    inset: 30px 0 20px 40px;

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

    padding: 40px;

    text-align: center;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 26px;

    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, .07),
            rgba(255, 255, 255, .015)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.visual-placeholder::before {
    position: absolute;

    width: 400px;
    height: 400px;

    right: -190px;
    bottom: -240px;

    content: "";

    border-radius: 50%;

    background: rgba(0, 106, 68, .22);
}

.visual-icon {
    width: 96px;
    height: 96px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    color: var(--yellow);

    border: 1px solid rgba(253, 185, 19, .35);
    border-radius: 50%;

    font-size: 21px;
    font-weight: 900;
    letter-spacing: .08em;

    background: rgba(253, 185, 19, .06);
}

.visual-placeholder strong {
    font-size: 20px;
}

.visual-placeholder > span {
    max-width: 320px;

    margin-top: 8px;

    color: rgba(255, 255, 255, .46);

    font-size: 13px;
}

.route-badge {
    position: absolute;

    z-index: 2;

    top: 0;
    right: -10px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 16px;

    background: var(--white);

    box-shadow: var(--shadow);
}

.route-country {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    color: var(--dark);

    border-radius: 10px;

    font-size: 12px;
    font-weight: 900;

    background:
        linear-gradient(
            #ffffff 0 50%,
            #dc143c 50% 100%
        );
}

.route-country.lithuania {
    color: var(--white);

    background:
        linear-gradient(
            var(--yellow) 0 33.33%,
            var(--green) 33.33% 66.66%,
            var(--red) 66.66% 100%
        );
}

.route-arrow {
    color: var(--dark);

    font-weight: 900;
}

.hero-floating-card {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 3;

    width: min(330px, 80%);

    display: flex;
    flex-direction: column;

    padding: 22px;

    color: var(--dark);

    border-radius: 18px;

    background: var(--yellow);

    box-shadow: var(--shadow);
}

.floating-label {
    margin-bottom: 4px;

    color: rgba(16, 23, 19, .62);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
}

.hero-floating-card strong {
    font-size: 18px;
}

.hero-floating-card > span:last-child {
    margin-top: 3px;

    color: rgba(16, 23, 19, .65);

    font-size: 12px;
}


/* ==========================================================
   QUICK STRIP
========================================================== */

.quick-strip {
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.quick-grid {
    min-height: 190px;

    display: grid;
    grid-template-columns: 1fr .9fr auto;

    gap: 60px;
    align-items: center;
}

.quick-main h2 {
    margin: 0;

    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.15;

    letter-spacing: -.035em;
}

.quick-grid p {
    margin: 0;

    color: var(--muted);
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    white-space: nowrap;

    color: var(--green);

    font-weight: 850;
    text-decoration: none;
}


/* ==========================================================
   STEPS
========================================================== */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.step-card {
    position: relative;

    min-height: 310px;

    padding: 32px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--white);

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

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.step-number {
    color: #aab5ae;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.step-icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    margin-top: 45px;

    color: var(--green);

    border-radius: 15px;

    background: var(--green-light);

    font-size: 26px;
    font-weight: 800;
}

.step-card h3 {
    margin: 25px 0 10px;

    font-size: 23px;
    letter-spacing: -.025em;
}

.step-card p {
    margin: 0;

    color: var(--muted);
}


/* ==========================================================
   PROCESS
========================================================== */

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(255, 255, 255, .15);
}

.process-item {
    min-height: 285px;

    padding: 35px 28px;

    border-right: 1px solid rgba(255, 255, 255, .15);
}

.process-item:last-child {
    border-right: 0;
}

.process-item > span {
    color: var(--yellow);

    font-size: 13px;
    font-weight: 900;
}

.process-item h3 {
    margin: 70px 0 12px;

    font-size: 22px;
}

.process-item p {
    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: 14px;
}


/* ==========================================================
   SERVICES
========================================================== */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.service-card {
    min-height: 300px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--white);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.service-card:hover {
    transform: translateY(-4px);

    border-color: rgba(0, 106, 68, .35);

    box-shadow: var(--shadow);
}

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

.service-number {
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.service-arrow {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: var(--green);

    border-radius: 50%;

    background: var(--green-light);
}

.service-card h3 {
    margin: auto 0 14px;

    font-size: 23px;
    line-height: 1.2;

    letter-spacing: -.03em;
}

.service-card p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
}


/* ==========================================================
   AREA
========================================================== */

.area-section {
    overflow: hidden;

    color: var(--white);

    background: var(--green-dark);
}

.area-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 80px;
}

.area-copy .section-label {
    color: var(--yellow);
}

.area-copy h2 {
    max-width: 480px;
}

.area-copy h2 span {
    color: var(--yellow);
}

.area-copy > p {
    max-width: 520px;

    color: rgba(255, 255, 255, .65);

    font-size: 17px;
}

.area-list {
    margin-top: 40px;

    border-top: 1px solid rgba(255, 255, 255, .17);
}

.area-list > div {
    display: flex;
    justify-content: space-between;

    gap: 25px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.area-list strong {
    font-size: 15px;
}

.area-list span {
    color: rgba(255, 255, 255, .53);

    font-size: 13px;
}

.map-placeholder {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-large);

    background:
        linear-gradient(
            rgba(255, 255, 255, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .04) 1px,
            transparent 1px
        ),
        rgba(255, 255, 255, .035);

    background-size: 45px 45px;
}

.map-route {
    position: absolute;

    width: 340px;
    height: 290px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-17deg);

    border: 3px dashed var(--yellow);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
}

.map-point {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 13px;

    color: var(--dark);

    border-radius: 10px;

    background: var(--white);

    font-size: 12px;
    font-weight: 900;

    box-shadow: var(--shadow);
}

.map-point > span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--red);
}

.point-pl {
    left: 22%;
    bottom: 24%;
}

.point-lt {
    top: 22%;
    right: 18%;
}

.point-lt > span {
    background: var(--yellow);
}

.map-caption {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 25px;

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

    padding: 18px 20px;

    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;

    background: rgba(10, 24, 17, .65);

    backdrop-filter: blur(10px);

    font-size: 13px;
}

.map-caption strong {
    color: var(--yellow);

    font-size: 18px;
}


/* ==========================================================
   FAQ
========================================================== */

.faq-grid {
    display: grid;
    grid-template-columns: .65fr 1.35fr;

    gap: 100px;
}

.faq-intro {
    position: sticky;
    top: 120px;

    align-self: start;
}

.faq-intro p {
    max-width: 400px;

    color: var(--muted);
}

.faq-list {
    border-top: 1px solid var(--border);
}

.faq-list details {
    border-bottom: 1px solid var(--border);
}

.faq-list summary {
    min-height: 92px;

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

    gap: 25px;

    list-style: none;

    cursor: pointer;

    font-size: 18px;
    font-weight: 750;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--green);

    border-radius: 50%;

    background: var(--green-light);

    transition: transform .25s ease;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-list details p {
    max-width: 750px;

    margin: -8px 0 30px;

    padding-right: 60px;

    color: var(--muted);
}


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

.contact-section {
    padding: 40px 0 100px;

    background: var(--background-light);
}

.contact-box {
    display: grid;
    grid-template-columns: 1.1fr .9fr;

    gap: 70px;
    align-items: center;

    padding: clamp(35px, 6vw, 75px);

    overflow: hidden;

    color: var(--white);

    border-radius: var(--radius-large);

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(253, 185, 19, .18),
            transparent 35%
        ),
        var(--dark);
}

.contact-label {
    color: var(--yellow);
}

.contact-box h2 {
    margin: 0;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1;

    letter-spacing: -.05em;
}

.contact-box p {
    max-width: 600px;

    color: rgba(255, 255, 255, .60);
}

.contact-actions {
    display: grid;

    gap: 12px;
}

.contact-button {
    min-height: 90px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 25px;

    border-radius: 14px;

    text-decoration: none;

    transition: transform .2s ease;
}

.contact-button:hover {
    transform: translateX(5px);
}

.contact-button span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.contact-button strong {
    margin-top: 3px;

    font-size: 21px;
}

.contact-phone {
    color: var(--dark);
    background: var(--yellow);
}

.contact-whatsapp {
    color: var(--white);
    background: var(--green);
}


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

.footer {
    padding: 70px 0 25px;

    color: var(--white);
    background: #0b100d;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr .6fr .6fr;

    gap: 70px;

    padding-bottom: 60px;
}

.footer-description {
    max-width: 400px;

    margin-top: 22px;

    color: rgba(255, 255, 255, .48);
}

.footer-links {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.footer-links strong {
    margin-bottom: 10px;

    color: rgba(255, 255, 255, .38);

    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-links a {
    color: rgba(255, 255, 255, .70);

    text-decoration: none;
}

.footer-links a:hover {
    color: var(--yellow);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 30px;

    padding-top: 25px;

    color: rgba(255, 255, 255, .35);

    border-top: 1px solid rgba(255, 255, 255, .08);

    font-size: 12px;
}


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

.mobile-contact-bar {
    display: none;
}


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

@media (max-width: 1100px) {

    .desktop-nav,
    .availability {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .menu-toggle {
        display: flex;
    }

    .mobile-menu {
        position: fixed;

        top: 82px;
        right: 0;
        left: 0;

        display: flex;
        flex-direction: column;

        padding: 20px;

        border-top: 1px solid rgba(255, 255, 255, .08);

        background: var(--dark);

        transform: translateY(-130%);
        opacity: 0;
        pointer-events: none;

        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .mobile-menu.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu a {
        padding: 15px 10px;

        color: rgba(255, 255, 255, .82);

        border-bottom: 1px solid rgba(255, 255, 255, .08);

        text-decoration: none;
    }

    .hero-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-item:nth-child(2) {
        border-right: 0;
    }

    .process-item {
        border-bottom: 1px solid rgba(255, 255, 255, .15);
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .section {
        padding: 80px 0;
    }

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        padding-top: 65px;
        padding-bottom: 70px;
    }

    .hero-visual {
        min-height: 420px;
    }

    .quick-grid {
        grid-template-columns: 1fr;

        gap: 20px;

        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-heading {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .step-card {
        min-height: auto;
    }

    .step-icon {
        margin-top: 30px;
    }

    .area-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .faq-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .faq-intro {
        position: static;
    }

    .contact-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }

}


@media (max-width: 600px) {

    body {
        padding-bottom: 65px;
    }

    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .header-inner {
        min-height: 72px;
    }

    .btn-header {
        display: none;
    }

    .mobile-menu {
        top: 72px;
    }

    .brand-text strong {
        font-size: 14px;
    }

    .flag-mark {
        width: 34px;
        height: 34px;
    }

    .hero-grid {
        padding-top: 50px;
        padding-bottom: 55px;
    }

    .hero h1 {
        font-size: clamp(46px, 14vw, 64px);
    }

    .hero-lead {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-points {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: 10px;
    }

    .hero-points div {
        padding-left: 10px;
    }

    .hero-points strong {
        font-size: 14px;
    }

    .hero-points span {
        font-size: 10px;
    }

    .hero-visual {
        min-height: 330px;
    }

    .visual-placeholder {
        inset: 20px 0 20px 0;
    }

    .route-badge {
        right: 5px;
    }

    .hero-floating-card {
        width: 85%;

        left: 10px;
    }

    .section-heading h2,
    .area-copy h2,
    .faq-intro h2 {
        font-size: 38px;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-item {
        min-height: auto;

        border-right: 0;
    }

    .process-item h3 {
        margin-top: 35px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 260px;
    }

    .map-placeholder {
        min-height: 370px;
    }

    .map-route {
        width: 230px;
        height: 220px;
    }

    .point-pl {
        left: 10%;
    }

    .point-lt {
        right: 9%;
    }

    .map-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .area-list > div {
        flex-direction: column;

        gap: 3px;
    }

    .faq-list summary {
        min-height: 78px;

        font-size: 16px;
    }

    .faq-list details p {
        padding-right: 10px;
    }

    .contact-section {
        padding-bottom: 50px;
    }

    .contact-box {
        padding: 35px 24px;

        border-radius: 20px;
    }

    .contact-box h2 {
        font-size: 43px;
    }

    .contact-button strong {
        font-size: 18px;
    }

    .footer {
        padding-top: 55px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid > div:first-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 8px;
    }

    .mobile-contact-bar {
        position: fixed;

        z-index: 200;

        right: 0;
        bottom: 0;
        left: 0;

        height: 65px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
    }

    .mobile-contact-bar a {
        display: grid;
        place-items: center;

        font-size: 14px;
        font-weight: 900;

        text-decoration: none;
    }

    .mobile-call {
        color: var(--dark);
        background: var(--yellow);
    }

    .mobile-whatsapp {
        color: var(--white);
        background: var(--green);
    }

}


/* ===== THEME LITHUANIA START ===== */

/* ==========================================================
   NOWA PALETA:
   dominująca zieleń + czerwień + litewski żółty
========================================================== */

:root {
    --green: #087A4C;
    --green-dark: #075E3C;
    --green-deep: #044D31;
    --green-medium: #0A8A56;
    --green-bright: #11A565;
    --green-light: #EAF7F0;
    --green-very-light: #F4FBF7;

    --yellow: #FDB913;
    --yellow-light: #FFF5D5;

    --red: #D62828;
    --red-dark: #B91F24;
    --red-light: #FDECEC;

    --dark: #075E3C;
    --dark-soft: #087A4C;

    --text: #183B2B;
    --muted: #61776C;

    --white: #FFFFFF;

    --background: #FFFFFF;
    --background-light: #F4FBF7;

    --border: #D8E9DF;

    --shadow:
        0 20px 60px rgba(5, 94, 60, 0.13);
}


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

.site-header {
    background:
        linear-gradient(
            90deg,
            #075E3C 0%,
            #087A4C 60%,
            #0A8A56 100%
        );

    border-bottom:
        1px solid rgba(255, 255, 255, .18);
}

.site-header.scrolled {
    box-shadow:
        0 10px 30px rgba(5, 94, 60, .24);
}

.desktop-nav a {
    color: rgba(255, 255, 255, .88);
}

.desktop-nav a::after {
    background: var(--yellow);
}

.availability {
    color: rgba(255, 255, 255, .88);
}

.btn-header {
    color: #FFFFFF;
    background: var(--red);
}

.btn-header:hover {
    background: var(--red-dark);
}


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

.hero {
    color: var(--white);

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(253, 185, 19, .24),
            transparent 25%
        ),
        radial-gradient(
            circle at 72% 80%,
            rgba(214, 40, 40, .18),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #075E3C 0%,
            #087A4C 52%,
            #0A8A56 100%
        );
}

.hero::after {
    height: 7px;

    background:
        linear-gradient(
            90deg,
            var(--yellow) 0 33.33%,
            var(--green-bright) 33.33% 66.66%,
            var(--red) 66.66% 100%
        );
}

.hero h1 span {
    color: var(--yellow);
}

.hero-lead {
    color: rgba(255, 255, 255, .88);
}

.eyebrow {
    color: rgba(255, 255, 255, .86);
}

.hero-points div {
    border-left-color: var(--yellow);
}

.hero-points span {
    color: rgba(255, 255, 255, .72);
}

.btn-primary {
    color: #FFFFFF;
    background: var(--red);
}

.btn-primary:hover {
    background: var(--red-dark);
}

.btn-secondary {
    color: var(--green-dark);

    border-color: rgba(255, 255, 255, .8);

    background: var(--white);
}

.btn-secondary:hover {
    background: var(--yellow-light);
}


/* ==========================================================
   HERO — KARTA ZE ZDJĘCIEM
========================================================== */

.visual-placeholder {
    border:
        1px solid rgba(255, 255, 255, .30);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .15),
            rgba(255, 255, 255, .06)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .20),
        0 24px 70px rgba(4, 77, 49, .22);
}

.visual-placeholder::before {
    background:
        rgba(253, 185, 19, .18);
}

.visual-icon {
    color: #FFFFFF;

    border-color:
        rgba(255, 255, 255, .40);

    background:
        rgba(214, 40, 40, .78);
}

.visual-placeholder > span {
    color:
        rgba(255, 255, 255, .72);
}

.hero-floating-card {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );

    box-shadow:
        0 20px 55px rgba(143, 25, 30, .28);
}

.floating-label {
    color:
        rgba(255, 255, 255, .72);
}

.hero-floating-card > span:last-child {
    color:
        rgba(255, 255, 255, .80);
}


/* ==========================================================
   SZYBKI PASEK
========================================================== */

.quick-strip {
    background: var(--green-very-light);
}

.text-link {
    color: var(--red);
}


/* ==========================================================
   JAK ZGŁOSIĆ
========================================================== */

.section-light {
    background:
        linear-gradient(
            180deg,
            #F4FBF7 0%,
            #FFFFFF 100%
        );
}

.section-label {
    color: var(--red);
}

.step-card {
    border-color: #D4E9DE;

    background: #FFFFFF;
}

.step-card:hover {
    border-color:
        rgba(8, 122, 76, .45);
}

.step-icon {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-bright)
        );
}

.step-number {
    color: var(--red);
}


/* ==========================================================
   JAK DZIAŁAMY
========================================================== */

.section-dark {
    color: #FFFFFF;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(253, 185, 19, .18),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #075E3C 0%,
            #087A4C 55%,
            #0A8A56 100%
        );
}

.dark-heading .section-label {
    color: var(--yellow);
}

.dark-heading p {
    color:
        rgba(255, 255, 255, .80);
}

.process-grid {
    border-top-color:
        rgba(255, 255, 255, .25);
}

.process-item {
    border-right-color:
        rgba(255, 255, 255, .22);
}

.process-item > span {
    color: var(--yellow);
}

.process-item p {
    color:
        rgba(255, 255, 255, .75);
}


/* ==========================================================
   USŁUGI
========================================================== */

.service-card {
    border-color: #D6EADF;
}

.service-card:hover {
    border-color: var(--green);
}

.service-number {
    color: var(--red);
}

.service-arrow {
    color: #FFFFFF;

    background: var(--green);
}


/* ==========================================================
   OBSZAR DZIAŁANIA
========================================================== */

.area-section {
    color: #FFFFFF;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(214, 40, 40, .22),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #087A4C 0%,
            #0A8A56 100%
        );
}

.area-copy .section-label {
    color: var(--yellow);
}

.map-placeholder {
    border-color:
        rgba(255, 255, 255, .30);

    background:
        linear-gradient(
            rgba(255, 255, 255, .09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .09) 1px,
            transparent 1px
        ),
        rgba(255, 255, 255, .09);

    background-size:
        45px 45px;
}

.map-caption {
    background:
        rgba(7, 94, 60, .86);
}


/* ==========================================================
   FAQ
========================================================== */

.faq-list summary span {
    color: #FFFFFF;

    background: var(--red);
}


/* ==========================================================
   KONTAKT
========================================================== */

.contact-section {
    background: var(--green-very-light);
}

.contact-box {
    color: #FFFFFF;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(253, 185, 19, .27),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #075E3C 0%,
            #087A4C 65%,
            #0A8A56 100%
        );

    box-shadow:
        0 30px 80px rgba(5, 94, 60, .18);
}

.contact-box p {
    color:
        rgba(255, 255, 255, .82);
}

.contact-label {
    color: var(--yellow);
}

.contact-phone {
    color: #FFFFFF;

    background: var(--red);
}

.contact-phone:hover {
    background: var(--red-dark);
}

.contact-whatsapp {
    color: var(--green-dark);

    background: var(--yellow);
}


/* ==========================================================
   FOOTER — ZIELONY ZAMIAST CZARNEGO
========================================================== */

.footer {
    color: #FFFFFF;

    background:
        linear-gradient(
            120deg,
            #044D31 0%,
            #075E3C 60%,
            #087A4C 100%
        );
}

.footer-links strong {
    color:
        rgba(255, 255, 255, .60);
}

.footer-links a {
    color:
        rgba(255, 255, 255, .82);
}

.footer-description {
    color:
        rgba(255, 255, 255, .72);
}

.footer-bottom {
    color:
        rgba(255, 255, 255, .62);

    border-top-color:
        rgba(255, 255, 255, .20);
}


/* ==========================================================
   MENU MOBILNE
========================================================== */

.mobile-menu {
    background:
        linear-gradient(
            180deg,
            #075E3C,
            #087A4C
        );
}

.mobile-call {
    color: #FFFFFF;

    background: var(--red);
}

.mobile-whatsapp {
    color: #FFFFFF;

    background: var(--green);
}


/* ==========================================================
   DODATKOWY CZERWONY AKCENT
========================================================== */

.service-card:nth-child(3n + 2) .service-arrow {
    background: var(--red);
}

.step-card:nth-child(2) .step-icon {
    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );
}

/* ===== THEME LITHUANIA END ===== */


/* ===== REPAIR GRID START ===== */


/* ==========================================================
   DUŻA SEKCJA USŁUG — GRID 3x3
========================================================== */

.repair-grid-section {

    padding: 120px 0;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 90% 5%,
            rgba(214, 40, 40, .20),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 100%,
            rgba(253, 185, 19, .12),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #064c33 0%,
            #076943 55%,
            #087a4c 100%
        );

}


.repair-grid-heading {

    max-width: 900px;

    margin-bottom: 55px;

}


.repair-grid-label {

    display: inline-block;

    margin-bottom: 18px;

    color: #FDB913;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .14em;

}


.repair-grid-heading h2 {

    max-width: 850px;

    margin: 0;

    font-size: clamp(
        42px,
        6vw,
        72px
    );

    line-height: .98;

    letter-spacing: -.055em;

}


.repair-grid-heading p {

    margin: 22px 0 0;

    color: rgba(
        255,
        255,
        255,
        .72
    );

    font-size: 16px;

}


.repair-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(
            255,
            255,
            255,
            .20
        );

    border-left:
        1px solid rgba(
            255,
            255,
            255,
            .20
        );

}


.repair-item {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    padding: 31px 25px;

    border-right:
        1px solid rgba(
            255,
            255,
            255,
            .20
        );

    border-bottom:
        1px solid rgba(
            255,
            255,
            255,
            .20
        );

    transition:
        background .25s ease,
        transform .25s ease;

}


.repair-item:hover {

    position: relative;

    z-index: 2;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

}


.repair-number {

    color: #FDB913;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: .08em;

}


.repair-item h3 {

    max-width: 290px;

    margin:
        auto
        0
        12px;

    color: #ffffff;

    font-size: 21px;
    line-height: 1.22;

    letter-spacing: -.025em;

}


.repair-item p {

    max-width: 315px;

    margin: 0;

    color: rgba(
        255,
        255,
        255,
        .70
    );

    font-size: 13px;
    line-height: 1.65;

}


/* Czerwone akcenty na wybranych polach */

.repair-item:nth-child(3n + 2)
.repair-number {

    color: #ff7777;

}


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

@media (max-width: 950px) {

    .repair-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


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

@media (max-width: 600px) {

    .repair-grid-section {

        padding:
            80px 0;

    }


    .repair-grid-heading {

        margin-bottom:
            38px;

    }


    .repair-grid-heading h2 {

        font-size:
            42px;

    }


    .repair-grid {

        grid-template-columns:
            1fr;

    }


    .repair-item {

        min-height:
            245px;

        padding:
            26px 22px;

    }


    .repair-item h3 {

        margin-top:
            55px;

        font-size:
            20px;

    }

}


/* ===== REPAIR GRID END ===== */


/* ===== REPAIR GRID WHITE THEME START ===== */


/* ==========================================================
   SEKCJA USŁUG — BIAŁE TŁO
========================================================== */

.repair-grid-section {

    padding: 120px 0;

    color: #183B2B;

    background: #FFFFFF;

}


/* ==========================================================
   NAGŁÓWEK SEKCJI
========================================================== */

.repair-grid-label {

    color: #D62828;

}


.repair-grid-heading h2 {

    color: #075E3C;

}


.repair-grid-heading p {

    color: #61776C;

}


/* ==========================================================
   GRID
========================================================== */

.repair-grid {

    gap: 16px;

    border: 0;

}


/* ==========================================================
   ZIELONE KAFELKI
========================================================== */

.repair-item {

    min-height: 300px;

    padding: 31px 25px;

    overflow: hidden;

    border: 0;

    border-radius: 18px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(253, 185, 19, .10),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #075E3C 0%,
            #087A4C 100%
        );

    box-shadow:
        0 15px 35px rgba(5, 94, 60, .10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.repair-item:hover {

    transform: translateY(-5px);

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(253, 185, 19, .16),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #087A4C 0%,
            #0A8A56 100%
        );

    box-shadow:
        0 24px 50px rgba(5, 94, 60, .18);

}


/* ==========================================================
   NUMERKI — CZERWONE
========================================================== */

.repair-number {

    color: #FF4B4B !important;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: .08em;

}


/* ==========================================================
   TYTUŁY KAFELKÓW — ŻÓŁTE
========================================================== */

.repair-item h3 {

    color: #FDB913;

}


/* ==========================================================
   OPISY
========================================================== */

.repair-item p {

    color: rgba(
        255,
        255,
        255,
        .82
    );

}


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

@media (max-width: 600px) {

    .repair-grid {

        gap: 12px;

    }

    .repair-item {

        border-radius: 15px;

    }

}


/* ===== REPAIR GRID WHITE THEME END ===== */


/* ===== CARD LOOK LIKE SCREEN START ===== */

/* ==========================================================
   KAFELKI USLUG — WERSJA JAK NA SCREENIE
========================================================== */

.repair-grid {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
    border: 0 !important;
}

.repair-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;

    min-height: 260px !important;
    height: auto !important;

    padding: 34px 20px 26px !important;

    border: 0 !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            #076943 0%,
            #087A4C 100%
        ) !important;

    box-shadow:
        0 12px 28px rgba(5, 94, 60, .12) !important;
}

/* brak numerkow */
.repair-number {
    display: none !important;
}

/* zolty tytul */
.repair-item h3 {
    max-width: 240px !important;
    margin: 0 0 22px 0 !important;

    color: #FDB913 !important;

    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* wiekszy czerwony opis */
.repair-item p {
    max-width: 250px !important;
    margin: 0 !important;

    color: #D62828 !important;

    font-size: 19px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
}

/* hover delikatny */
.repair-item:hover {
    transform: translateY(-3px) !important;

    background:
        linear-gradient(
            145deg,
            #087A4C 0%,
            #0A8A56 100%
        ) !important;

    box-shadow:
        0 18px 36px rgba(5, 94, 60, .16) !important;
}

/* tablet */
@media (max-width: 950px) {
    .repair-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .repair-item {
        min-height: 240px !important;
        padding: 30px 18px 24px !important;
    }

    .repair-item h3 {
        max-width: 220px !important;
        font-size: 22px !important;
    }

    .repair-item p {
        max-width: 230px !important;
        font-size: 17px !important;
    }
}

/* telefon */
@media (max-width: 600px) {
    .repair-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .repair-item {
        min-height: 230px !important;
        padding: 32px 20px 24px !important;
        border-radius: 18px !important;
    }

    .repair-item h3 {
        max-width: 210px !important;
        margin-bottom: 18px !important;
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    .repair-item p {
        max-width: 220px !important;
        font-size: 17px !important;
        line-height: 1.5 !important;
    }
}

/* ===== CARD LOOK LIKE SCREEN END ===== */


/* ===== CARD DETAIL TWEAK START ===== */

/* trochę szerszy cały układ kafelków */
.repair-grid {
    max-width: 1160px !important;
    gap: 12px !important;
}

/* kafelki trochę szersze wizualnie */
.repair-item {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* żółty tytuł — wyśrodkowany */
.repair-item h3 {
    width: 100% !important;
    max-width: none !important;

    text-align: center !important;

    color: #FDB913 !important;
}

/* mały tekst */
.repair-item p {
    width: 100% !important;
    max-width: none !important;

    color: #ef7878 !important;

    font-size: 16px !important;
    line-height: 1.5 !important;

    font-weight: 500 !important;
}


/* tablet */
@media (max-width: 950px) {

    .repair-item {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .repair-item p {
        font-size: 16px !important;
    }

}


/* telefon */
@media (max-width: 600px) {

    .repair-item {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .repair-item p {
        font-size: 16px !important;
    }

}

/* ===== CARD DETAIL TWEAK END ===== */


/* ===== PROCESS COLOR TWEAK START ===== */


/* ==========================================================
   JAK DZIAŁAMY — WIĘCEJ ŻÓŁTEGO I CZERWONEGO
========================================================== */

#jak-dzialamy {
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(253, 185, 19, .13),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #075E3C 0%,
            #087A4C 60%,
            #0A8A56 100%
        ) !important;
}


/* mały napis nad nagłówkiem */
#jak-dzialamy .section-label {
    color: #ef7878 !important;
}


/* główny tytuł */
#jak-dzialamy .section-heading h2 {
    color: #ffffff !important;
}


/* tekst z prawej */
#jak-dzialamy .section-heading > p {
    color: #FDB913 !important;

    font-weight: 700 !important;
}


/* ==========================================================
   GRID
========================================================== */

#jak-dzialamy .process-grid {
    border-top:
        2px solid rgba(253, 185, 19, .55) !important;
}


#jak-dzialamy .process-item {
    min-height: 230px !important;

    padding:
        28px 24px 26px !important;

    border-right:
        1px solid rgba(253, 185, 19, .30) !important;
}


/* ==========================================================
   NUMERY
========================================================== */

#jak-dzialamy .process-item > span {
    display: block !important;

    margin: 0 0 20px 0 !important;

    color: #ef7878 !important;

    font-size: 18px !important;
    line-height: 1 !important;

    font-weight: 900 !important;
}


/* ==========================================================
   TYTUŁ — DUŻO BLIŻEJ NUMERU
========================================================== */

#jak-dzialamy .process-item h3 {
    margin:
        0
        0
        12px
        0 !important;

    color: #FDB913 !important;

    font-size: 23px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;
}


/* ==========================================================
   OPIS
========================================================== */

#jak-dzialamy .process-item p {
    margin: 0 !important;

    color: rgba(255,255,255,.92) !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}


/* delikatny efekt po najechaniu */
#jak-dzialamy .process-item {
    transition:
        background .2s ease !important;
}

#jak-dzialamy .process-item:hover {
    background:
        rgba(253,185,19,.07) !important;
}


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

@media (max-width: 1100px) {

    #jak-dzialamy .process-item {
        min-height: 210px !important;
    }

}


/* ==========================================================
   TELEFON
========================================================== */

@media (max-width: 600px) {

    #jak-dzialamy .process-item {
        min-height: 0 !important;

        padding:
            24px
            18px !important;

        border-right: 0 !important;

        border-bottom:
            1px solid rgba(253,185,19,.30) !important;
    }

    #jak-dzialamy .process-item > span {
        margin-bottom: 14px !important;

        font-size: 17px !important;
    }

    #jak-dzialamy .process-item h3 {
        margin-bottom: 8px !important;

        font-size: 21px !important;
    }

    #jak-dzialamy .process-item p {
        font-size: 15px !important;
    }

}

/* ===== PROCESS COLOR TWEAK END ===== */


/* ===== LANGUAGE SWITCH START ===== */

.lang-switch {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    color: #075E3C;

    background: #FDB913;

    border: 2px solid #FDB913;
    border-radius: 11px;

    font-size: 13px;
    font-weight: 900;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.lang-switch:hover {
    color: #ffffff;

    background: #D62828;
    border-color: #D62828;

    transform: translateY(-2px);
}

.mobile-lang-link {
    color: #FDB913 !important;

    font-weight: 900 !important;
}

@media (max-width: 600px) {

    .header-actions {
        margin-left: auto;
    }

    .lang-switch {
        width: 40px;
        height: 40px;
    }

}

/* ===== LANGUAGE SWITCH END ===== */


/* ===== HERO VIDEO POLAND START ===== */


/* ==========================================================
   HERO — INFORMACJA O OBSZARZE
========================================================== */

.hero-location {
    max-width: 650px;

    margin: 16px 0 0;

    color: #FDB913;

    font-size: 17px;
    line-height: 1.55;
    font-weight: 750;
}


/* ==========================================================
   HERO — WIDEO
========================================================== */

.hero-visual {
    position: relative;

    min-height: 470px;

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


.hero-video-frame {
    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    border:
        2px solid rgba(
            253,
            185,
            19,
            .40
        );

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #075E3C,
            #0A8A56
        );

    box-shadow:
        0 30px 70px rgba(
            5,
            94,
            60,
            .30
        );
}


.hero-video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* stare elementy hero sa niepotrzebne */
.route-badge,
.hero-floating-card,
.hero-points {
    display: none !important;
}


/* ==========================================================
   OBSZAR TYLKO POLSKA
========================================================== */

.single-country-map {
    display: flex;
    align-items: center;
    justify-content: center;
}


.single-country-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;
}


.single-country-label {
    margin-bottom: 12px;

    color: #FDB913;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .15em;
}


.single-country-content strong {
    color: #ffffff;

    font-size: clamp(
        58px,
        9vw,
        110px
    );

    line-height: .9;

    letter-spacing: -.055em;
}


.single-country-content > span:last-child {
    margin-top: 22px;

    color: #ef7878;

    font-size: 18px;
    font-weight: 700;
}


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

@media (max-width: 850px) {

    .hero-visual {
        min-height: auto;
    }

    .hero-video-frame {
        aspect-ratio: 16 / 9;
    }

}


@media (max-width: 600px) {

    .hero-location {
        font-size: 15px;
    }

    .hero-video-frame {
        border-radius: 18px;
    }

}

/* ===== HERO VIDEO POLAND END ===== */


/* ===== HERO REWORK START ===== */


/* ==========================================================
   TAGLINE W GORNYM PASKU
========================================================== */

.header-service-tagline {

    display: flex;
    align-items: center;

    gap: 7px;

    white-space: nowrap;

    color: #FDB913;

    font-size: 10px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .08em;
}


.header-service-tagline span {

    color: #ff5a47;

    font-size: 13px;
}


/* ==========================================================
   NOWY TYTUL HERO
========================================================== */

.hero-title-rework {

    margin: 0 !important;

    max-width: 760px !important;

    letter-spacing: -.055em !important;
}


.hero-title-main {

    display: block !important;

    color: #FDB913 !important;

    font-size:
        clamp(
            50px,
            5.8vw,
            84px
        ) !important;

    line-height: .94 !important;

    font-weight: 850 !important;
}


.hero-title-target {

    display: block !important;

    margin-top: 12px !important;

    color: #ff5a47 !important;

    font-size:
        clamp(
            34px,
            4.2vw,
            58px
        ) !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: -.04em !important;
}


/* ==========================================================
   GLOWNY OPIS
========================================================== */

.hero-main-copy {

    max-width: 610px;

    margin:
        30px
        0
        0;

    padding:
        2px
        0
        2px
        20px;

    color:
        rgba(
            255,
            255,
            255,
            .92
        );

    border-left:
        4px solid #ff5a47;

    font-size: 19px;
    line-height: 1.6;

    font-weight: 500;
}


/* ==========================================================
   POLSKA / PRZASNYSZ
========================================================== */

.hero-facts {

    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


.hero-fact {

    min-width: 165px;

    display: flex;
    flex-direction: column;

    padding:
        12px
        16px;

    border:
        1px solid rgba(
            253,
            185,
            19,
            .45
        );

    border-radius: 12px;

    background:
        rgba(
            253,
            185,
            19,
            .08
        );
}


.hero-fact span {

    color:
        rgba(
            255,
            255,
            255,
            .64
        );

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .12em;
}


.hero-fact strong {

    margin-top: 3px;

    color: #FDB913;

    font-size: 18px;
}


.hero-fact-red {

    border-color:
        rgba(
            255,
            90,
            71,
            .45
        );

    background:
        rgba(
            255,
            90,
            71,
            .08
        );
}


.hero-fact-red strong {

    color: #ff5a47;
}


/* ==========================================================
   PRZYCISKI
========================================================== */

.hero-copy .hero-buttons {

    margin-top: 28px !important;
}


/* ==========================================================
   VIDEO
========================================================== */

.hero-video-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    border:
        2px solid rgba(
            253,
            185,
            19,
            .45
        );

    border-radius: 26px;

    background: #087A4C;

    box-shadow:
        0 30px 70px
        rgba(
            5,
            94,
            60,
            .30
        );
}


.hero-video {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

@media (max-width: 1250px) {

    .header-service-tagline {

        font-size: 9px;

        letter-spacing: .04em;
    }

}


@media (max-width: 1080px) {

    .header-service-tagline {

        display: none;
    }

}


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

@media (max-width: 600px) {

    .hero-title-main {

        font-size:
            clamp(
                43px,
                13vw,
                60px
            ) !important;
    }


    .hero-title-target {

        margin-top: 10px !important;

        font-size:
            clamp(
                30px,
                9vw,
                42px
            ) !important;
    }


    .hero-main-copy {

        margin-top: 24px;

        padding-left: 15px;

        font-size: 16px;
    }


    .hero-facts {

        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .hero-fact {

        min-width: 0;

        padding:
            11px
            12px;
    }


    .hero-fact strong {

        font-size: 16px;
    }


    .hero-video-frame {

        border-radius: 18px;
    }

}

/* ===== HERO REWORK END ===== */


/* ===== HERO LOCATION LINE START ===== */

.hero-location-line {

    max-width: 650px;

    margin-top: 28px;

    padding-left: 18px;

    border-left:
        4px solid #FECC00;

    font-size: 20px;
    line-height: 1.55;

    font-weight: 750;
}


.hero-location-line span {

    display: inline;
}


.hero-location-blue {

    color: #7fc7f3;
}


.hero-location-yellow {

    color: #FECC00;

    font-weight: 850;
}


@media (max-width: 600px) {

    .hero-location-line {

        margin-top: 22px;

        padding-left: 14px;

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

}

/* ===== HERO LOCATION LINE END ===== */


/* ===== LITHUANIA STEPS REWORK START ===== */


/* ==========================================================
   HERO — KOLORY TEKSTOW
========================================================== */

/* "Mobilny mechanik TIR pomoże..." */
.hero-main-copy {
    color: #eaf8ef !important;
}


/* "Dojeżdżamy do awarii..." */
.hero-location-line,
.hero-location-line .hero-location-blue,
.hero-location-line .hero-location-yellow {
    color: #fff5c7 !important;
}


/* ważniejsze fragmenty dalej trochę mocniejsze */
.hero-location-line .hero-location-yellow {
    font-weight: 850 !important;
}


/* ==========================================================
   3 KAFELKI — FLAGA LITWY
========================================================== */

#zgloszenie .steps-grid {
    gap: 18px !important;
}


/* wspólny układ każdego kafelka */
#zgloszenie .step-card {

    min-height: 235px !important;

    display: grid !important;

    grid-template-columns:
        72px minmax(0, 1fr) !important;

    grid-template-areas:
        "number number"
        "icon title"
        "icon description" !important;

    column-gap: 20px !important;
    row-gap: 7px !important;

    align-items: start !important;

    padding: 27px 28px !important;

    border: 0 !important;
    border-radius: 20px !important;

    overflow: hidden !important;

    box-shadow:
        0 14px 35px
        rgba(5, 94, 60, .13) !important;
}


/* ==========================================================
   01 / 02 / 03 — 2x WIEKSZE
========================================================== */

#zgloszenie .step-number {

    grid-area: number !important;

    margin: 0 0 18px 0 !important;

    font-size: 24px !important;
    line-height: 1 !important;

    font-weight: 950 !important;

    letter-spacing: .04em !important;
}


/* ==========================================================
   IKONA PO LEWEJ
========================================================== */

#zgloszenie .step-icon {

    grid-area: icon !important;

    width: 60px !important;
    height: 60px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;

    border-radius: 15px !important;

    font-size: 27px !important;

    align-self: start !important;
}


/* ==========================================================
   TYTUL OBOK IKONY
========================================================== */

#zgloszenie .step-card h3 {

    grid-area: title !important;

    align-self: end !important;

    margin: 0 !important;

    font-size: 23px !important;
    line-height: 1.15 !important;

    font-weight: 850 !important;

    letter-spacing: -.025em !important;
}


/* ==========================================================
   OPIS TEZ OBOK IKONY
========================================================== */

#zgloszenie .step-card p {

    grid-area: description !important;

    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
}


/* ==========================================================
   KAFELEK 1 — ZOLTY
========================================================== */

#zgloszenie .step-card:nth-child(1) {

    background:
        linear-gradient(
            145deg,
            #FDB913 0%,
            #ffc72c 100%
        ) !important;
}


#zgloszenie .step-card:nth-child(1) .step-number {

    color: #C1272D !important;
}


#zgloszenie .step-card:nth-child(1) .step-icon {

    color: #ffffff !important;

    background: #006A44 !important;
}


#zgloszenie .step-card:nth-child(1) h3 {

    color: #075E3C !important;
}


#zgloszenie .step-card:nth-child(1) p {

    color: #244a37 !important;
}


/* ==========================================================
   KAFELEK 2 — ZIELONY
========================================================== */

#zgloszenie .step-card:nth-child(2) {

    background:
        linear-gradient(
            145deg,
            #006A44 0%,
            #087A4C 100%
        ) !important;
}


#zgloszenie .step-card:nth-child(2) .step-number {

    color: #FDB913 !important;
}


#zgloszenie .step-card:nth-child(2) .step-icon {

    color: #ffffff !important;

    background: #C1272D !important;
}


#zgloszenie .step-card:nth-child(2) h3 {

    color: #FDB913 !important;
}


#zgloszenie .step-card:nth-child(2) p {

    color: #edf8f2 !important;
}


/* ==========================================================
   KAFELEK 3 — CZERWONY
========================================================== */

#zgloszenie .step-card:nth-child(3) {

    background:
        linear-gradient(
            145deg,
            #C1272D 0%,
            #d63238 100%
        ) !important;
}


#zgloszenie .step-card:nth-child(3) .step-number {

    color: #FDB913 !important;
}


#zgloszenie .step-card:nth-child(3) .step-icon {

    color: #075E3C !important;

    background: #FDB913 !important;
}


#zgloszenie .step-card:nth-child(3) h3 {

    color: #FDB913 !important;
}


#zgloszenie .step-card:nth-child(3) p {

    color: #fff1f1 !important;
}


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

#zgloszenie .step-card {

    transition:
        transform .22s ease,
        box-shadow .22s ease !important;
}


#zgloszenie .step-card:hover {

    transform: translateY(-4px) !important;

    box-shadow:
        0 22px 45px
        rgba(5, 94, 60, .18) !important;
}


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

@media (max-width: 600px) {

    #zgloszenie .step-card {

        min-height: 0 !important;

        grid-template-columns:
            60px minmax(0, 1fr) !important;

        column-gap: 15px !important;

        padding:
            23px
            20px !important;
    }


    #zgloszenie .step-number {

        margin-bottom: 15px !important;

        font-size: 22px !important;
    }


    #zgloszenie .step-icon {

        width: 54px !important;
        height: 54px !important;

        font-size: 24px !important;
    }


    #zgloszenie .step-card h3 {

        font-size: 20px !important;
    }


    #zgloszenie .step-card p {

        font-size: 14px !important;
    }

}


/* ===== LITHUANIA STEPS REWORK END ===== */


/* ===== SEO SERVICES REWORK START ===== */


/* ==========================================================
   HERO — TYTUL CENTRALNIE
========================================================== */

.hero-title-rework {

    width: 100% !important;

    text-align: center !important;
}


.hero-title-main,
.hero-title-target {

    width: 100% !important;

    text-align: center !important;
}


/* ==========================================================
   USLUGI — WIECEJ TEKSTU W KAFELKACH
========================================================== */

.repair-item {

    min-height: 390px !important;

    height: auto !important;

    padding:
        30px
        28px !important;
}


.repair-item h3 {

    margin-bottom:
        20px !important;

    font-size:
        24px !important;

    line-height:
        1.15 !important;
}


.repair-item p {

    font-size:
        16px !important;

    line-height:
        1.58 !important;
}


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

@media (max-width: 950px) {

    .repair-item {

        min-height:
            360px !important;
    }

}


/* ==========================================================
   TELEFON
========================================================== */

@media (max-width: 600px) {

    .repair-item {

        min-height:
            0 !important;

        padding:
            25px
            21px !important;
    }


    .repair-item h3 {

        font-size:
            22px !important;
    }


    .repair-item p {

        font-size:
            16px !important;
    }

}

/* ===== SEO SERVICES REWORK END ===== */


/* ===== AREA MAP V2 START ===== */


/* ==========================================================
   OBSZAR — MIASTA + MAPA
========================================================== */

.area-grid-custom {

    display: grid !important;

    grid-template-columns:
        minmax(380px, .85fr)
        minmax(520px, 1.35fr) !important;

    gap: 45px !important;

    align-items: start !important;
}


/* ==========================================================
   LEWA STRONA
========================================================== */

.area-city-panel h2 {

    margin:
        0
        0
        30px !important;

    color: #ffffff !important;

    font-size:
        clamp(
            38px,
            4.4vw,
            62px
        ) !important;

    line-height: 1 !important;

    font-weight: 850 !important;

    letter-spacing: -.045em !important;
}


/* ==========================================================
   34 KAFELKI
========================================================== */

.cities-grid {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;
}


.city-tile {

    min-height: 43px !important;

    display: flex !important;

    align-items: center !important;

    padding:
        9px
        12px !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .17
        ) !important;

    border-radius: 11px !important;

    background:
        rgba(
            255,
            255,
            255,
            .075
        ) !important;

    color: #fff5c7 !important;

    font-size: 14px !important;

    line-height: 1.15 !important;

    font-weight: 750 !important;

    transition:
        transform .15s ease,
        background .15s ease !important;
}


.city-tile:hover {

    transform:
        translateY(-2px) !important;

    background:
        rgba(
            253,
            185,
            19,
            .16
        ) !important;
}


/* delikatne kolory Litwy */

.city-tile:nth-child(3n+1) {

    border-color:
        rgba(
            253,
            185,
            19,
            .32
        ) !important;
}


.city-tile:nth-child(3n+2) {

    border-color:
        rgba(
            255,
            255,
            255,
            .20
        ) !important;
}


.city-tile:nth-child(3n+3) {

    border-color:
        rgba(
            239,
            120,
            120,
            .32
        ) !important;
}


/* ==========================================================
   PRAWA STRONA — TYLKO MAPA
========================================================== */

.area-map-only {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


.service-map-image {

    width: 100% !important;

    height: auto !important;

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 30px !important;

    background: transparent !important;

    box-shadow:
        0
        30px
        70px
        rgba(
            0,
            0,
            0,
            .16
        ) !important;
}


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

@media (max-width: 1150px) {

    .area-grid-custom {

        grid-template-columns:
            1fr !important;
    }


    .cities-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ==========================================================
   TELEFON
========================================================== */

@media (max-width: 700px) {

    .cities-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .area-city-panel h2 {

        font-size:
            40px !important;
    }


    .city-tile {

        font-size:
            13px !important;
    }


    .service-map-image {

        border-radius:
            20px !important;
    }

}

/* ===== AREA MAP V2 END ===== */


/* ===== SECTION BACKGROUND REWORK START ===== */


/* ==========================================================
   ZGLOSZENIE AWARII
   bardzo jasna zielen zamiast bieli
========================================================== */

#zgloszenie {
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(253, 185, 19, .08),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #edf8f2 0%,
            #e6f4ec 100%
        ) !important;
}


/* ==========================================================
   USLUGI
   trochę mocniejsze zielone tlo
========================================================== */

.repair-grid-section {
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(255, 90, 71, .07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #dff1e7 0%,
            #e9f7ef 55%,
            #dff1e7 100%
        ) !important;
}


/* naglowek sekcji uslug nadal dobrze czytelny */
.repair-grid-heading h2 {
    color: #075E3C !important;
}

.repair-grid-heading p {
    color: #466858 !important;
}


/* delikatne przejscie pomiedzy sekcjami */
#zgloszenie,
.repair-grid-section {
    position: relative;
}

#zgloszenie::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: min(92%, 1180px);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(7, 94, 60, .18),
            transparent
        );
}


/* ===== SECTION BACKGROUND REWORK END ===== */


/* ===== LITHUANIA LIGHT THEME START ===== */

/* ==========================================================
   KOLORY BAZOWE
   zolty:  #f6d96a
   zielony:#8fd3a8
   czerw.: #ef8e84
   krem:   #fffaf0
========================================================== */

html,
body {
    background:
        linear-gradient(
            180deg,
            #fffdf5 0%,
            #f8fce8 20%,
            #eef8ea 48%,
            #fef6ef 72%,
            #f4fbef 100%
        ) !important;
    color: #24513a !important;
}


/* ==========================================================
   OGOLNE SEKCJE
========================================================== */

.section,
.repair-grid-section,
.contact-section,
.area-section,
.footer {
    position: relative;
}

.section-light,
.repair-grid-section {
    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(246, 217, 106, .20),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(239, 142, 132, .14),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fffdf5 0%,
            #f2fbef 48%,
            #fff7ef 100%
        ) !important;
}

.section-dark,
.area-section,
.contact-section {
    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(246, 217, 106, .18),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 14%,
            rgba(143, 211, 168, .20),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 82%,
            rgba(239, 142, 132, .12),
            transparent 22%
        ),
        linear-gradient(
            145deg,
            #eef8ea 0%,
            #f7fde9 36%,
            #fffaf0 72%,
            #f6fcf0 100%
        ) !important;
}

.container,
.section,
.repair-grid-section,
.area-section,
.contact-section,
.footer {
    color: #24513a !important;
}


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

.site-header {
    background:
        linear-gradient(
            180deg,
            rgba(255, 250, 240, .92),
            rgba(244, 251, 239, .90)
        ) !important;

    backdrop-filter: blur(12px) !important;

    border-bottom:
        1px solid rgba(47, 158, 99, .12) !important;
}

.brand-text strong {
    color: #1f7d4f !important;
}

.brand-text span {
    color: #5b7b68 !important;
}

.desktop-nav a,
.mobile-menu a,
.footer a {
    color: #38614c !important;
}

.desktop-nav a:hover,
.mobile-menu a:hover,
.footer a:hover {
    color: #d96e60 !important;
}

.header-service-tagline {
    color: #caa01f !important;
}

.header-service-tagline span {
    color: #e4786d !important;
}

.availability {
    color: #2f9e63 !important;
    background: rgba(143, 211, 168, .18) !important;
    border: 1px solid rgba(47, 158, 99, .16) !important;
}

.lang-switch {
    background: #f6d96a !important;
    border-color: #f6d96a !important;
    color: #256245 !important;
}

.lang-switch:hover {
    background: #ef8e84 !important;
    border-color: #ef8e84 !important;
    color: #ffffff !important;
}


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

.hero {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(246, 217, 106, .26),
            transparent 24%
        ),
        radial-gradient(
            circle at 84% 24%,
            rgba(143, 211, 168, .24),
            transparent 22%
        ),
        radial-gradient(
            circle at 76% 78%,
            rgba(239, 142, 132, .18),
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #fffdf5 0%,
            #f3faec 32%,
            #eef8ea 60%,
            #fff6ef 100%
        ) !important;
}

.hero-copy,
.hero-copy p,
.hero-copy span,
.hero-copy div {
    color: #2c5540 !important;
}

.eyebrow,
.section-label,
.repair-grid-label,
.contact-label {
    color: #c79b15 !important;
}

.hero-title-main {
    color: #d5a80a !important;
}

.hero-title-target {
    color: #ff5a47 !important;
}

.hero-main-copy {
    color: #f3fff4 !important;
    background:
        linear-gradient(
            135deg,
            rgba(47, 158, 99, .82),
            rgba(76, 180, 111, .74)
        ) !important;
    border-left: 4px solid #d9ffdf !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    box-shadow: 0 18px 38px rgba(47, 158, 99, .12) !important;
}

.hero-location-line {
    color: #fff8d9 !important;
    background:
        linear-gradient(
            135deg,
            rgba(246, 217, 106, .92),
            rgba(255, 241, 182, .92)
        ) !important;
    border-left: 4px solid #e7b91b !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    box-shadow: 0 18px 38px rgba(246, 217, 106, .18) !important;
}

.hero-location-line .hero-location-blue,
.hero-location-line .hero-location-yellow {
    color: #7f6300 !important;
}

.hero-video-frame,
.visual-placeholder {
    background:
        linear-gradient(
            145deg,
            #f7fde9,
            #ecf8e6,
            #fff6ef
        ) !important;
    border: 1px solid rgba(47, 158, 99, .14) !important;
    box-shadow: 0 24px 55px rgba(79, 122, 94, .16) !important;
}

.visual-placeholder strong {
    color: #2f9e63 !important;
}

.visual-placeholder span {
    color: #5f7f6b !important;
}


/* ==========================================================
   PRZYCISKI
========================================================== */

.btn-primary,
.contact-phone,
.mobile-call {
    background:
        linear-gradient(
            135deg,
            #2f9e63,
            #58bc81
        ) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(47, 158, 99, .22) !important;
}

.btn-primary:hover,
.contact-phone:hover,
.mobile-call:hover {
    background:
        linear-gradient(
            135deg,
            #278954,
            #45a86d
        ) !important;
}

.btn-secondary,
.contact-whatsapp,
.mobile-whatsapp {
    background:
        linear-gradient(
            135deg,
            #f6d96a,
            #ffe89b
        ) !important;
    color: #6f5600 !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(246, 217, 106, .24) !important;
}

.btn-secondary:hover,
.contact-whatsapp:hover,
.mobile-whatsapp:hover {
    background:
        linear-gradient(
            135deg,
            #ef8e84,
            #f6b0a8
        ) !important;
    color: #ffffff !important;
}


/* ==========================================================
   KARTY / KAFELKI OGOLNIE
========================================================== */

.step-card,
.repair-item,
.process-item,
.faq-list details,
.contact-box,
.city-tile {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .75),
            rgba(244, 251, 239, .88)
        ) !important;

    border:
        1px solid rgba(47, 158, 99, .12) !important;

    box-shadow:
        0 16px 36px rgba(88, 115, 94, .10) !important;
}


/* ==========================================================
   SEKCJA ZGLOSZENIA AWARII
========================================================== */

#zgloszenie {
    background:
        radial-gradient(
            circle at 14% 12%,
            rgba(246, 217, 106, .20),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(143, 211, 168, .20),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fffaf1 0%,
            #f2fbef 100%
        ) !important;
}

#zgloszenie .section-heading h2,
#faq .faq-intro h2,
.area-city-panel h2,
.repair-grid-heading h2,
.contact-box h2,
.footer strong {
    color: #256245 !important;
}

#zgloszenie .section-heading p,
#faq .faq-intro p,
.repair-grid-heading p,
.contact-box p,
.footer-description {
    color: #5b7b68 !important;
}


/* zachowujemy litweskie kolory 3 kart, ale w jasniejszej wersji */
#zgloszenie .step-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #fff2b8,
            #fff8dc
        ) !important;
}

#zgloszenie .step-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #dff5e7,
            #f0fbf3
        ) !important;
}

#zgloszenie .step-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #ffe1de,
            #fff0ee
        ) !important;
}

#zgloszenie .step-number {
    font-size: 28px !important;
}

#zgloszenie .step-card h3 {
    color: #2b5f44 !important;
}

#zgloszenie .step-card p {
    color: #506d5c !important;
}


/* ==========================================================
   USLUGI
========================================================== */

.repair-grid-section {
    background:
        radial-gradient(
            circle at 12% 14%,
            rgba(246, 217, 106, .20),
            transparent 22%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(239, 142, 132, .14),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #f4fbe9 0%,
            #eef8ea 50%,
            #fff7ef 100%
        ) !important;
}

.repair-item {
    background:
        linear-gradient(
            145deg,
            #f7fde9,
            #e9f7ea
        ) !important;
    border: 1px solid rgba(47, 158, 99, .10) !important;
}

.repair-item h3 {
    color: #d49f00 !important;
}

.repair-item p {
    color: #667f71 !important;
}

.repair-item:hover {
    background:
        linear-gradient(
            145deg,
            #fff8dc,
            #eef8ea
        ) !important;
}


/* ==========================================================
   FAQ
========================================================== */

.faq-list summary {
    color: #2b5f44 !important;
}

.faq-list details p {
    color: #5e7b68 !important;
}

.faq-list summary span {
    color: #e4786d !important;
}


/* ==========================================================
   OBSZAR DZIALANIA / MAPA
========================================================== */

.area-section {
    background:
        radial-gradient(
            circle at 14% 10%,
            rgba(246, 217, 106, .16),
            transparent 20%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(143, 211, 168, .18),
            transparent 20%
        ),
        linear-gradient(
            180deg,
            #fffaf0 0%,
            #f1fbe8 100%
        ) !important;
}

.city-tile {
    color: #406b55 !important;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6fcf2
        ) !important;
}

.city-tile:nth-child(3n+1) {
    background:
        linear-gradient(
            145deg,
            #fff3bf,
            #fff9df
        ) !important;
    color: #7a6500 !important;
}

.city-tile:nth-child(3n+2) {
    background:
        linear-gradient(
            145deg,
            #e4f7ea,
            #f2fbf4
        ) !important;
    color: #256245 !important;
}

.city-tile:nth-child(3n+3) {
    background:
        linear-gradient(
            145deg,
            #ffe3de,
            #fff2ef
        ) !important;
    color: #a4564d !important;
}

.service-map-image {
    border-radius: 28px !important;
    box-shadow: 0 28px 65px rgba(79, 122, 94, .16) !important;
}


/* ==========================================================
   KONTAKT
========================================================== */

.contact-section {
    background:
        radial-gradient(
            circle at 14% 14%,
            rgba(143, 211, 168, .18),
            transparent 22%
        ),
        radial-gradient(
            circle at 84% 20%,
            rgba(246, 217, 106, .18),
            transparent 20%
        ),
        linear-gradient(
            145deg,
            #eef8ea 0%,
            #fffaf0 100%
        ) !important;
}

.contact-box {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6fcf0
        ) !important;
}


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

.footer {
    background:
        linear-gradient(
            180deg,
            #f3faec 0%,
            #eef8ea 100%
        ) !important;
    border-top: 1px solid rgba(47, 158, 99, .12) !important;
}

.footer-bottom,
.footer-bottom span {
    color: #6a8577 !important;
}


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

.mobile-contact-bar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.75),
            rgba(244,251,239,.92)
        ) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(47, 158, 99, .12) !important;
}


/* ==========================================================
   DROBNY HOVER
========================================================== */

.step-card:hover,
.repair-item:hover,
.faq-list details:hover,
.city-tile:hover {
    box-shadow:
        0 22px 42px rgba(88, 115, 94, .12) !important;
}


/* ===== LITHUANIA LIGHT THEME END ===== */


/* ===== MECHANIC BACKGROUNDS START ===== */


/* ==========================================================
   OGOLNE TLO STRONY
   neutralne, techniczne, bez pastelowego "cukierkowego" efektu
========================================================== */

html,
body {
    background:
        linear-gradient(
            180deg,
            #f5f6f1 0%,
            #eef2ea 100%
        ) !important;
}


/* ==========================================================
   HEADER
   zostaje wizualnie mocniejszy jak wcześniej
========================================================== */

.site-header {
    background:
        linear-gradient(
            90deg,
            #075E3C 0%,
            #087A4C 65%,
            #0A8A56 100%
        ) !important;
}


/* ==========================================================
   HERO
   jasny, ale techniczny
========================================================== */

.hero {
    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(0, 106, 68, .10),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #eef2e9 0%,
            #f6f7f0 48%,
            #e8efe6 100%
        ) !important;
}


/* ==========================================================
   ZGLOSZENIE AWARII
========================================================== */

#zgloszenie {
    background:
        linear-gradient(
            135deg,
            #e4ebe2 0%,
            #eef2e8 55%,
            #e8ede5 100%
        ) !important;
}


/* ==========================================================
   USLUGI
========================================================== */

.repair-grid-section {
    background:
        linear-gradient(
            140deg,
            #f3f2e9 0%,
            #ecefe5 45%,
            #e2e9df 100%
        ) !important;
}


/* ==========================================================
   OBSZAR DZIALANIA / MAPA
========================================================== */

.area-section {
    background:
        linear-gradient(
            135deg,
            #dfe8df 0%,
            #e9eee5 48%,
            #dbe5dc 100%
        ) !important;
}


/* ==========================================================
   FAQ
========================================================== */

#faq {
    background:
        linear-gradient(
            135deg,
            #f2f1e9 0%,
            #e9eee6 100%
        ) !important;
}


/* ==========================================================
   KONTAKT
========================================================== */

.contact-section {
    background:
        linear-gradient(
            135deg,
            #e4ebe1 0%,
            #f0f1e8 52%,
            #e7ebe2 100%
        ) !important;
}


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

.footer {
    background:
        linear-gradient(
            135deg,
            #dce6dd 0%,
            #e8ece3 100%
        ) !important;
}


/* ==========================================================
   PASEK FLAGI LITWY MIEDZY GLOWNYMI OBSZARAMI
========================================================== */

.hero,
#zgloszenie,
.repair-grid-section,
.area-section,
#faq,
.contact-section,
.footer {
    position: relative;
}


.hero::before,
#zgloszenie::before,
.repair-grid-section::before,
.area-section::before,
#faq::before,
.contact-section::before,
.footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            #FDB913 0%,
            #FDB913 33.333%,

            #006A44 33.333%,
            #006A44 66.666%,

            #C1272D 66.666%,
            #C1272D 100%
        );
}


/* ===== MECHANIC BACKGROUNDS END ===== */


/* ===== VISIBILITY AND ALERT COLORS START ===== */


/* ==========================================================
   GORNY PASEK / HEADER — WIEKSZA CZYTELNOSC
========================================================== */

.site-header {
    background:
        linear-gradient(
            90deg,
            #075E3C 0%,
            #087A4C 70%,
            #0A8A56 100%
        ) !important;
}

.brand-text strong {
    color: #ffffff !important;
}

.brand-text span {
    color: #e8f7ee !important;
}

.desktop-nav a,
.mobile-menu a {
    color: #ffffff !important;
}

.desktop-nav a:hover,
.mobile-menu a:hover {
    color: #FDB913 !important;
}

.header-service-tagline {
    color: #fff6c8 !important;
}

.header-service-tagline span {
    color: #ff8c7f !important;
}

.availability {
    color: #ffffff !important;
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.22) !important;
}

.lang-switch {
    background: #FDB913 !important;
    border-color: #FDB913 !important;
    color: #075E3C !important;
}

.lang-switch:hover {
    background: #ff5a47 !important;
    border-color: #ff5a47 !important;
    color: #ffffff !important;
}


/* ==========================================================
   HERO — WIECEJ CZERWONEGO, ALE NADAL CZYTELNIE
========================================================== */

.hero {
    background:
        radial-gradient(
            circle at 14% 16%,
            rgba(255, 90, 71, .09),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 24%,
            rgba(255, 90, 71, .11),
            transparent 24%
        ),
        radial-gradient(
            circle at 78% 82%,
            rgba(253, 185, 19, .10),
            transparent 20%
        ),
        linear-gradient(
            135deg,
            #f3f1ea 0%,
            #f6f2ec 42%,
            #ecefe7 100%
        ) !important;
}

.hero-title-main {
    color: #245a41 !important;
}

.hero-title-target {
    color: #c74637 !important;
}

.hero-main-copy {
    color: #f9fffb !important;

    background:
        linear-gradient(
            135deg,
            #53b97d 0%,
            #7dca98 100%
        ) !important;

    border-left: 4px solid #dff7e5 !important;
}

.hero-location-line {
    background:
        linear-gradient(
            135deg,
            #ffe38c 0%,
            #f4dc91 100%
        ) !important;

    border-left: 4px solid #d6a100 !important;
}

.hero-location-line .hero-location-blue,
.hero-location-line .hero-location-yellow {
    color: #755b00 !important;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            #2f9e63,
            #4ab777
        ) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background:
        linear-gradient(
            135deg,
            #ffd66a,
            #f3dc8b
        ) !important;
    color: #6c5300 !important;
}


/* ==========================================================
   ZGLOSZENIE AWARII — TYTUL
========================================================== */

#zgloszenie .section-label {
    color: #c1272d !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}


/* ==========================================================
   3 KAFELKI — ZOLTY / ZIELONY / CZERWONY
========================================================== */

#zgloszenie .step-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            #FDB913 0%,
            #ffd24a 100%
        ) !important;

    border-color: rgba(180, 128, 0, .22) !important;
}

#zgloszenie .step-card:nth-child(1) .step-number {
    color: #b1292d !important;
}

#zgloszenie .step-card:nth-child(1) .step-icon {
    background: rgba(7, 94, 60, .12) !important;
    color: #075E3C !important;
}

#zgloszenie .step-card:nth-child(1) h3 {
    color: #075E3C !important;
}

#zgloszenie .step-card:nth-child(1) p {
    color: #4e4a21 !important;
}


#zgloszenie .step-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #0b864f 0%,
            #1b9e63 100%
        ) !important;

    border-color: rgba(7, 94, 60, .18) !important;
}

#zgloszenie .step-card:nth-child(2) .step-number {
    color: #ffe27b !important;
}

#zgloszenie .step-card:nth-child(2) .step-icon {
    background: rgba(255,255,255,.15) !important;
    color: #ffffff !important;
}

#zgloszenie .step-card:nth-child(2) h3 {
    color: #fff1a9 !important;
}

#zgloszenie .step-card:nth-child(2) p {
    color: #edf9f1 !important;
}


#zgloszenie .step-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #c63a35 0%,
            #de5650 100%
        ) !important;

    border-color: rgba(168, 34, 31, .18) !important;
}

#zgloszenie .step-card:nth-child(3) .step-number {
    color: #ffe185 !important;
}

#zgloszenie .step-card:nth-child(3) .step-icon {
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
}

#zgloszenie .step-card:nth-child(3) h3 {
    color: #fff2b8 !important;
}

#zgloszenie .step-card:nth-child(3) p {
    color: #fff1ee !important;
}


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

@media (max-width: 700px) {

    #zgloszenie .section-label {
        font-size: 18px !important;
    }

}

/* ===== VISIBILITY AND ALERT COLORS END ===== */


/* ===== HERO COLORS FIX START ===== */

/* ==========================================================
   HERO TLO — ZNOWU JASNA ZIELEN, BEZ CZERWIENI W TLE
========================================================== */

.hero {
    background:
        linear-gradient(
            135deg,
            #eef5ee 0%,
            #f4f7f1 48%,
            #e6efe6 100%
        ) !important;
}


/* ==========================================================
   CZERWONY TYLKO W NAPISIE "dla kierowcow z Litwy"
========================================================== */

.hero-title-target {
    color: #c74637 !important;
}


/* ==========================================================
   PRZYCISK "ZADZWON 24/7"
   czerwony kafelek + zielony napis
========================================================== */

.btn-primary {
    background:
        linear-gradient(
            135deg,
            #d84b42 0%,
            #ef6a5f 100%
        ) !important;

    color: #075E3C !important;

    border: 0 !important;
}

.btn-primary span {
    color: #075E3C !important;
}

.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #c53d35 0%,
            #df5a50 100%
        ) !important;

    color: #075E3C !important;
}


/* ==========================================================
   PRZYCISK "WHATSAPP"
   zielony kafelek + bialy napis
========================================================== */

.btn-secondary {
    background:
        linear-gradient(
            135deg,
            #2f9e63 0%,
            #4bb878 100%
        ) !important;

    color: #ffffff !important;

    border: 0 !important;
}

.btn-secondary:hover {
    background:
        linear-gradient(
            135deg,
            #248a54 0%,
            #3ea86a 100%
        ) !important;

    color: #ffffff !important;
}

/* ===== HERO COLORS FIX END ===== */


/* ===== SERVICES SEO COLORS START ===== */


/* ==========================================================
   TLO SEKCJI
========================================================== */

#uslugi {
    background:
        linear-gradient(
            135deg,
            #e7f0e5 0%,
            #f1f3e5 48%,
            #e2ece2 100%
        ) !important;
}


/* ==========================================================
   SEO INTRO
========================================================== */

#uslugi .repair-grid-heading {

    position: relative;

    max-width: 1100px;

    padding:
        34px
        36px;

    margin-bottom:
        35px !important;

    overflow: hidden;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f1f8ed 100%
        );

    border:
        1px solid rgba(
            7,
            94,
            60,
            .12
        );

    box-shadow:
        0 18px 38px
        rgba(
            41,
            83,
            56,
            .08
        );
}


#uslugi .repair-grid-heading::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 7px;

    background:
        linear-gradient(
            90deg,

            #FDB913 0%,
            #FDB913 33.333%,

            #087A4C 33.333%,
            #087A4C 66.666%,

            #C74637 66.666%,
            #C74637 100%
        );
}


#uslugi .repair-grid-label {

    color: #C74637 !important;

    font-size: 15px !important;

    font-weight: 900 !important;
}


#uslugi .repair-grid-heading h2 {

    color: #075E3C !important;

    margin-top:
        8px !important;
}


#uslugi .services-seo-copy {

    max-width: 1000px !important;

    color: #3f634f !important;

    font-size: 18px !important;

    line-height: 1.65 !important;

    font-weight: 600 !important;
}


/* ==========================================================
   GRID
========================================================== */

#uslugi .repair-grid {

    display: grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        ) !important;

    gap:
        16px !important;

    max-width:
        1200px !important;
}


/* ==========================================================
   WSPOLNY STYL KAFELKOW
========================================================== */

#uslugi .repair-item {

    min-height:
        500px !important;

    height:
        auto !important;

    padding:
        28px
        26px !important;

    border-radius:
        18px !important;

    border:
        1px solid
        rgba(
            7,
            94,
            60,
            .12
        ) !important;

    box-shadow:
        0 14px 32px
        rgba(
            40,
            76,
            52,
            .09
        ) !important;

    overflow:
        hidden !important;
}


#uslugi .repair-item h3 {

    margin:
        0
        0
        20px !important;

    font-size:
        25px !important;

    line-height:
        1.13 !important;

    font-weight:
        850 !important;

    text-align:
        left !important;
}


#uslugi .repair-item p {

    margin:
        0 !important;

    color:
        #425f50 !important;

    font-size:
        16px !important;

    line-height:
        1.68 !important;

    font-weight:
        500 !important;

    text-align:
        left !important;
}


#uslugi .service-lead {

    display:
        block;

    margin-bottom:
        12px;

    font-weight:
        800;

    line-height:
        1.55;
}


/* ==========================================================
   1 / 4 / 7 — ZIELONE
========================================================== */

#uslugi .repair-item:nth-child(3n+1) {

    background:
        linear-gradient(
            145deg,
            #dcefe1 0%,
            #edf7ee 100%
        ) !important;

    border-top:
        7px solid
        #087A4C !important;
}


#uslugi .repair-item:nth-child(3n+1) h3 {

    color:
        #075E3C !important;
}


#uslugi .repair-item:nth-child(3n+1) .service-lead {

    color:
        #087A4C !important;
}


/* ==========================================================
   2 / 5 / 8 — ZOLTE
========================================================== */

#uslugi .repair-item:nth-child(3n+2) {

    background:
        linear-gradient(
            145deg,
            #fff0b5 0%,
            #fff8dc 100%
        ) !important;

    border-top:
        7px solid
        #FDB913 !important;
}


#uslugi .repair-item:nth-child(3n+2) h3 {

    color:
        #8a6800 !important;
}


#uslugi .repair-item:nth-child(3n+2) .service-lead {

    color:
        #916d00 !important;
}


/* ==========================================================
   3 / 6 / 9 — CZERWONE
========================================================== */

#uslugi .repair-item:nth-child(3n+3) {

    background:
        linear-gradient(
            145deg,
            #f7d7d2 0%,
            #fce9e5 100%
        ) !important;

    border-top:
        7px solid
        #C74637 !important;
}


#uslugi .repair-item:nth-child(3n+3) h3 {

    color:
        #a83d32 !important;
}


#uslugi .repair-item:nth-child(3n+3) .service-lead {

    color:
        #b3453a !important;
}


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

#uslugi .repair-item {

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}


#uslugi .repair-item:hover {

    transform:
        translateY(-4px) !important;

    box-shadow:
        0 22px 42px
        rgba(
            40,
            76,
            52,
            .13
        ) !important;
}


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

@media (max-width: 1050px) {

    #uslugi .repair-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    #uslugi .repair-item {

        min-height:
            0 !important;
    }

}


/* ==========================================================
   TELEFON
========================================================== */

@media (max-width: 650px) {

    #uslugi .repair-grid {

        grid-template-columns:
            1fr !important;
    }


    #uslugi .repair-grid-heading {

        padding:
            28px
            22px !important;

        border-radius:
            17px;
    }


    #uslugi .services-seo-copy {

        font-size:
            16px !important;
    }


    #uslugi .repair-item {

        min-height:
            0 !important;

        padding:
            24px
            21px !important;
    }


    #uslugi .repair-item h3 {

        font-size:
            23px !important;
    }

}

/* ===== SERVICES SEO COLORS END ===== */


/* ===== SERVICES UNIFIED GREEN START ===== */


/* ==========================================================
   NAGLOWEK SEKCJI USLUG
========================================================== */

#uslugi .repair-grid-heading::before {
    display: none !important;
    content: none !important;
}

#uslugi .repair-grid-heading {
    padding-top: 28px !important;
}

#uslugi .services-colored-title {
    margin: 10px 0 18px !important;
    max-width: 980px !important;

    font-size: clamp(34px, 3.4vw, 48px) !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: -0.04em !important;
}

#uslugi .services-colored-title span {
    display: inline !important;
}

#uslugi .services-title-yellow {
    color: #FDB913 !important;
}

#uslugi .services-title-green {
    color: #159a58 !important;
}

#uslugi .services-title-red {
    color: #d24d44 !important;
}

#uslugi .services-seo-copy {
    color: #355947 !important;
}


/* ==========================================================
   WSZYSTKIE KAFELKI TAKIE SAME
========================================================== */

#uslugi .repair-item {
    background:
        linear-gradient(
            145deg,
            #075E3C 0%,
            #0A6C45 100%
        ) !important;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .08
        ) !important;

    border-top:
        0 !important;

    box-shadow:
        0 16px 34px
        rgba(
            6,
            64,
            41,
            .20
        ) !important;
}

#uslugi .repair-item:nth-child(3n+1),
#uslugi .repair-item:nth-child(3n+2),
#uslugi .repair-item:nth-child(3n+3) {
    background:
        linear-gradient(
            145deg,
            #075E3C 0%,
            #0A6C45 100%
        ) !important;

    border-top:
        0 !important;
}


/* ==========================================================
   TYTULY KAFELKOW
========================================================== */

#uslugi .repair-item h3,
#uslugi .repair-item:nth-child(3n+1) h3,
#uslugi .repair-item:nth-child(3n+2) h3,
#uslugi .repair-item:nth-child(3n+3) h3 {
    color: #FDB913 !important;
}


/* ==========================================================
   GLOWNY TEKST + LEAD
========================================================== */

#uslugi .repair-item p,
#uslugi .repair-item .service-lead,
#uslugi .repair-item:nth-child(3n+1) p,
#uslugi .repair-item:nth-child(3n+2) p,
#uslugi .repair-item:nth-child(3n+3) p,
#uslugi .repair-item:nth-child(3n+1) .service-lead,
#uslugi .repair-item:nth-child(3n+2) .service-lead,
#uslugi .repair-item:nth-child(3n+3) .service-lead {
    color: #efb0aa !important;
}

#uslugi .repair-item .service-lead {
    font-weight: 800 !important;
}


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

#uslugi .repair-item:hover {
    background:
        linear-gradient(
            145deg,
            #086842 0%,
            #0d7750 100%
        ) !important;

    transform: translateY(-4px) !important;

    box-shadow:
        0 22px 42px
        rgba(
            6,
            64,
            41,
            .26
        ) !important;
}


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

@media (max-width: 650px) {

    #uslugi .services-colored-title {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.1 !important;
    }

}

/* ===== SERVICES UNIFIED GREEN END ===== */


/* ===== SERVICES TEXT COLORS ONLY START ===== */


/* ==========================================================
   HERO — 2 LINIE W TYTULE
========================================================== */

.hero-title-two-lines {
    text-align: center !important;
}

.hero-title-main-one-line {
    display: block !important;
    white-space: nowrap !important;
}

.hero-title-target-one-line {
    display: block !important;
    margin-top: 10px !important;
    white-space: nowrap !important;
}

.hero-title-target-one-line strong {
    color: inherit !important;
}

@media (max-width: 900px) {

    .hero-title-main-one-line,
    .hero-title-target-one-line {
        white-space: normal !important;
    }
}


/* ==========================================================
   USLUGI — TYLKO KOLORY TEKSTU W KAFELKACH
========================================================== */

#uslugi .repair-item h3,
#uslugi .repair-item:nth-child(3n+1) h3,
#uslugi .repair-item:nth-child(3n+2) h3,
#uslugi .repair-item:nth-child(3n+3) h3 {
    color: #ff2e37 !important;
}

#uslugi .repair-item p,
#uslugi .repair-item:nth-child(3n+1) p,
#uslugi .repair-item:nth-child(3n+2) p,
#uslugi .repair-item:nth-child(3n+3) p {
    color: #ffd84d !important;
}

#uslugi .repair-item .service-lead,
#uslugi .repair-item:nth-child(3n+1) .service-lead,
#uslugi .repair-item:nth-child(3n+2) .service-lead,
#uslugi .repair-item:nth-child(3n+3) .service-lead {
    color: #6bffb0 !important;
}


/* ==========================================================
   FAQ — DELIKATNE DOPASOWANIE
========================================================== */

#faq .faq-intro h2 {
    max-width: 900px !important;
}

#faq .faq-intro p {
    max-width: 980px !important;
}

/* ===== SERVICES TEXT COLORS ONLY END ===== */


/* ===== FAQ HERO POSITION FIX START ===== */


/* ==========================================================
   FAQ — DWIE KOLUMNY
========================================================== */

#faq > .container {

    display: grid !important;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(500px, 1.22fr) !important;

    gap: 70px !important;

    align-items: start !important;
}


/* ==========================================================
   FAQ — NAGLOWEK ZOSTAJE NA MIEJSCU
========================================================== */

#faq .faq-intro {

    position: sticky !important;

    top: 115px !important;

    align-self: start !important;

    margin: 0 !important;

    padding: 0 0 20px !important;
}


#faq .faq-intro h2 {

    margin:
        0
        0
        20px !important;

    max-width:
        520px !important;
}


#faq .faq-intro p {

    margin: 0 !important;

    max-width:
        500px !important;

    font-size:
        17px !important;

    line-height:
        1.65 !important;
}


/* ==========================================================
   FAQ — LISTA
========================================================== */

#faq .faq-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;

    border: 0 !important;
}


/* ==========================================================
   FAQ — ZOLTE KAFELKI PYTAN
========================================================== */

#faq .faq-list details {

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(
            185,
            136,
            0,
            .18
        ) !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            135deg,
            #f5d96d 0%,
            #ffe8a0 100%
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(
            104,
            82,
            18,
            .08
        ) !important;
}


/* ==========================================================
   PYTANIE — BEZ SZTYWNEJ WYSOKOSCI
========================================================== */

#faq .faq-list summary {

    min-height: 0 !important;

    height: auto !important;

    padding:
        20px
        22px !important;

    color:
        #315844 !important;

    font-size:
        18px !important;

    line-height:
        1.35 !important;

    font-weight:
        800 !important;

    border: 0 !important;
}


/* plus po prawej */
#faq .faq-list summary span {

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    color:
        #ffffff !important;

    background:
        #c74637 !important;

    border-radius:
        50% !important;
}


/* ==========================================================
   ODPOWIEDZ
========================================================== */

#faq .faq-list details p {

    margin:
        0 !important;

    padding:
        0
        22px
        22px !important;

    max-width:
        none !important;

    color:
        #5c4d1f !important;

    font-size:
        16px !important;

    line-height:
        1.65 !important;
}


/* pogrubienia w odpowiedzi */
#faq .faq-list details p strong {

    color:
        #1f6545 !important;

    font-weight:
        850 !important;
}


/* lekki hover */
#faq .faq-list details:hover {

    background:
        linear-gradient(
            135deg,
            #f7dc72 0%,
            #ffecad 100%
        ) !important;

    transform:
        translateY(-2px) !important;
}


/* ==========================================================
   HERO — WIDEO NIE MOZE NACHODZIC NA TEKST
========================================================== */

.hero .hero-grid {

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(430px, .92fr) !important;

    gap: 90px !important;

    align-items: center !important;
}


/* tekst zawsze nad swoim obszarem */
.hero .hero-copy {

    position: relative !important;

    z-index: 3 !important;

    min-width: 0 !important;
}


/* blok video osobno po prawej */
.hero .hero-visual {

    position: relative !important;

    z-index: 1 !important;

    width: 100% !important;

    max-width: 650px !important;

    min-width: 0 !important;

    margin: 0 !important;

    margin-left: auto !important;

    transform: none !important;

    justify-self: end !important;
}


/* sama ramka */
.hero .hero-video-frame {

    width: 100% !important;

    max-width: 650px !important;

    margin: 0 !important;

    transform: none !important;
}


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

@media (max-width: 1050px) {

    #faq > .container {

        grid-template-columns:
            minmax(250px, .7fr)
            minmax(420px, 1.3fr) !important;

        gap: 40px !important;
    }


    .hero .hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, .85fr) !important;

        gap: 45px !important;
    }

}


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

@media (max-width: 800px) {

    #faq > .container {

        display: block !important;
    }


    #faq .faq-intro {

        position: static !important;

        margin-bottom:
            35px !important;
    }


    #faq .faq-list summary {

        padding:
            18px
            18px !important;

        font-size:
            17px !important;
    }


    #faq .faq-list details p {

        padding:
            0
            18px
            20px !important;
    }


    .hero .hero-grid {

        grid-template-columns:
            1fr !important;

        gap:
            45px !important;
    }


    .hero .hero-visual {

        max-width:
            100% !important;

        margin:
            0 auto !important;

        justify-self:
            center !important;
    }


    .hero .hero-video-frame {

        max-width:
            100% !important;
    }

}


/* ===== FAQ HERO POSITION FIX END ===== */


/* ===== CITIES EXPAND START ===== */


/* ==========================================================
   GRID MIAST
========================================================== */

#obszar .cities-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
}


/* ==========================================================
   CIEMNOZIELONE KAFELKI
========================================================== */

#obszar .city-tile,
#obszar .city-tile:nth-child(3n+1),
#obszar .city-tile:nth-child(3n+2),
#obszar .city-tile:nth-child(3n+3) {

    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;

    padding:
        11px
        15px !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            145deg,
            #073f2d 0%,
            #07583b 100%
        ) !important;

    border:
        1px solid rgba(
            255,
            255,
            255,
            .08
        ) !important;

    color:
        #ffffff !important;

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        750 !important;

    box-shadow:
        0 8px 18px
        rgba(
            5,
            61,
            39,
            .15
        ) !important;
}


/* akcent zolty */
#obszar .city-tile:nth-child(3n+1) {
    border-left:
        4px solid #FDB913 !important;

    color:
        #ffe27a !important;
}


/* akcent zielony */
#obszar .city-tile:nth-child(3n+2) {
    border-left:
        4px solid #5ed894 !important;

    color:
        #e8fff1 !important;
}


/* akcent czerwony */
#obszar .city-tile:nth-child(3n+3) {
    border-left:
        4px solid #ff4149 !important;

    color:
        #ffaaa8 !important;
}


#obszar .city-tile:hover {
    background:
        linear-gradient(
            145deg,
            #075137 0%,
            #087047 100%
        ) !important;

    transform:
        translateY(-2px) !important;
}


/* ==========================================================
   DESKTOP:
   3 kolumny x 6 rzedow = pierwsze 18
========================================================== */

#obszar .cities-grid:not(.is-expanded)
.city-tile:nth-child(n+19) {
    display: none !important;
}


/* ==========================================================
   PO ROZWINIECIU:
   WSZYSTKIE 34 MIASTA
========================================================== */

#obszar .cities-grid.is-expanded
.city-tile {
    display: flex !important;
}


/* ==========================================================
   PRZYCISK POKAZ / ZWIN
========================================================== */

#obszar .cities-toggle {

    width: 100%;

    min-height: 50px;

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

    gap: 10px;

    margin-top: 16px;

    padding:
        13px
        20px;

    border:
        1px solid rgba(
            253,
            185,
            19,
            .30
        );

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #075E3C,
            #087A4C
        );

    color:
        #FDB913;

    font-size:
        15px;

    font-weight:
        850;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(
            5,
            61,
            39,
            .14
        );

    transition:
        background .2s ease,
        transform .2s ease;
}


#obszar .cities-toggle:hover {

    background:
        linear-gradient(
            145deg,
            #087047,
            #0A8554
        );

    transform:
        translateY(-2px);
}


#obszar .cities-toggle-arrow {

    display: inline-block;

    color:
        #ff5a47;

    font-size:
        20px;

    line-height:
        1;

    transition:
        transform .25s ease;
}


#obszar .cities-toggle[aria-expanded="true"]
.cities-toggle-arrow {

    transform:
        rotate(180deg);
}


/* ==========================================================
   TABLET:
   NADAL 6 RZEDOW
   4 kolumny = pierwsze 24 miasta
========================================================== */

@media (max-width: 1150px) {

    #obszar .cities-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }


    #obszar .cities-grid:not(.is-expanded)
    .city-tile {
        display: flex !important;
    }


    #obszar .cities-grid:not(.is-expanded)
    .city-tile:nth-child(n+25) {
        display: none !important;
    }


    #obszar .cities-grid.is-expanded
    .city-tile {
        display: flex !important;
    }

}


/* ==========================================================
   TELEFON:
   2 kolumny x 6 rzedow = pierwsze 12
========================================================== */

@media (max-width: 700px) {

    #obszar .cities-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    #obszar .cities-grid:not(.is-expanded)
    .city-tile {
        display: flex !important;
    }


    #obszar .cities-grid:not(.is-expanded)
    .city-tile:nth-child(n+13) {
        display: none !important;
    }


    #obszar .cities-grid.is-expanded
    .city-tile {
        display: flex !important;
    }


    #obszar .cities-toggle {
        font-size:
            14px;
    }

}


/* ===== CITIES EXPAND END ===== */


/* ===== LT PL ALIGNMENT START ===== */


/* ==========================================================
   GORNY PASEK
   Wszystko w jednej linii na desktopie
========================================================== */

@media (min-width: 1081px) {

    .site-header .header-inner {

        width: calc(100% - 40px) !important;

        max-width: 1500px !important;

        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        gap: 15px !important;
    }


    /* LOGO */

    .site-header .brand {

        flex: 0 0 auto !important;

        min-width: 205px !important;
    }


    .site-header .brand-text strong {

        font-size: 18px !important;

        line-height: 1.05 !important;

        white-space: nowrap !important;
    }


    .site-header .brand-text span {

        font-size: 10px !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* TIR MECHANIKAS | MOBILUS SERVISAS */

    .site-header .header-service-tagline {

        display: flex !important;

        flex: 0 0 auto !important;

        align-items: center !important;

        gap: 6px !important;

        margin: 0 !important;

        color: #fff1b8 !important;

        font-size: 10px !important;

        line-height: 1 !important;

        font-weight: 900 !important;

        letter-spacing: .035em !important;

        white-space: nowrap !important;
    }


    .site-header .header-service-tagline span {

        color: #ff6a61 !important;

        font-size: 12px !important;
    }


    /* MENU */

    .site-header .desktop-nav {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-evenly !important;

        gap: 16px !important;

        margin: 0 !important;
    }


    .site-header .desktop-nav a {

        flex: 0 0 auto !important;

        font-size: 13px !important;

        line-height: 1 !important;

        font-weight: 800 !important;

        white-space: nowrap !important;
    }


    /* PRAWA STRONA */

    .site-header .header-actions {

        flex: 0 0 auto !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        margin: 0 !important;
    }


    .site-header .availability {

        min-width: 0 !important;

        padding: 9px 11px !important;

        font-size: 12px !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    .site-header .lang-switch {

        width: 54px !important;
        height: 54px !important;

        font-size: 13px !important;
    }


    .site-header .btn-header {

        padding:
            17px
            20px !important;

        font-size: 13px !important;

        white-space: nowrap !important;
    }

}


/* ==========================================================
   HERO — IDENTYCZNY UKLAD PL I LT
========================================================== */

.hero .hero-grid {

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(430px, .92fr) !important;

    gap: 80px !important;

    align-items: center !important;
}


.hero .hero-copy {

    min-width: 0 !important;

    position: relative !important;

    z-index: 2 !important;
}


/* ==========================================================
   TYTUL HERO — DWIE LINIE
========================================================== */

.hero .hero-title-two-lines {

    width: 100% !important;

    max-width: 800px !important;

    margin:
        0
        auto !important;

    text-align: center !important;
}


.hero .hero-title-main-one-line {

    display: block !important;

    white-space: nowrap !important;

    font-size:
        clamp(
            48px,
            5vw,
            72px
        ) !important;

    line-height:
        .96 !important;
}


.hero .hero-title-target-one-line {

    display: block !important;

    margin-top:
        14px !important;

    white-space: nowrap !important;

    font-size:
        clamp(
            30px,
            3.25vw,
            45px
        ) !important;

    line-height:
        1.03 !important;
}


/* ==========================================================
   VIDEO — IDENTYCZNE PL / LT
========================================================== */

.hero .hero-visual {

    width: 100% !important;

    max-width: 620px !important;

    min-width: 0 !important;

    margin: 0 !important;

    justify-self: end !important;

    align-self: center !important;

    position: relative !important;

    z-index: 1 !important;

    transform: none !important;
}


.hero .hero-video-frame {

    width: 100% !important;

    max-width: 620px !important;

    aspect-ratio:
        16 / 10 !important;

    margin: 0 !important;

    transform: none !important;

    overflow: hidden !important;
}


.hero .hero-video {

    width: 100% !important;

    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
}


/* ==========================================================
   MNIEJSZY LAPTOP
========================================================== */

@media (min-width: 1081px) and (max-width: 1300px) {

    .site-header .header-inner {

        gap: 9px !important;
    }


    .site-header .brand {

        min-width: 185px !important;
    }


    .site-header .header-service-tagline {

        font-size: 9px !important;
    }


    .site-header .desktop-nav {

        gap: 10px !important;
    }


    .site-header .desktop-nav a {

        font-size: 12px !important;
    }


    .site-header .availability {

        font-size: 11px !important;
    }


    .site-header .btn-header {

        padding:
            15px
            16px !important;

        font-size: 12px !important;
    }


    .hero .hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, .88fr) !important;

        gap:
            45px !important;
    }

}


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

@media (max-width: 900px) {

    .hero .hero-grid {

        grid-template-columns:
            1fr !important;

        gap:
            42px !important;
    }


    .hero .hero-title-main-one-line,
    .hero .hero-title-target-one-line {

        white-space:
            normal !important;
    }


    .hero .hero-visual {

        width: 100% !important;

        max-width: 680px !important;

        margin:
            0 auto !important;

        justify-self:
            center !important;
    }


    .hero .hero-video-frame {

        max-width:
            680px !important;

        aspect-ratio:
            16 / 9 !important;
    }

}


/* ===== LT PL ALIGNMENT END ===== */


/* ===== HEADER FOOTER FINAL TWEAK START ===== */


/* ==========================================================
   GORNE MENU
   zolte napisy + czerwone kreski
========================================================== */

@media (min-width: 1081px) {

    .site-header .desktop-nav {

        display: flex !important;

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

        gap: 0 !important;

        margin:
            0
            10px !important;
    }


    .site-header .desktop-nav a {

        position: relative !important;

        padding:
            4px
            13px !important;

        color:
            #FDB913 !important;

        font-size:
            13px !important;

        line-height:
            1 !important;

        font-weight:
            850 !important;

        white-space:
            nowrap !important;

        text-decoration:
            none !important;
    }


    /* usuwamy stare podkreslenia menu */

    .site-header .desktop-nav a::after {

        display:
            none !important;

        content:
            none !important;
    }


    /* czerwone kreski pomiedzy nazwami */

    .site-header .desktop-nav a + a {

        border-left:
            2px solid #ff2e37 !important;
    }


    .site-header .desktop-nav a:hover {

        color:
            #fff1a6 !important;
    }


    /* tagline przy logo tez bardziej zwarty */

    .site-header .header-service-tagline {

        margin-right:
            4px !important;

        color:
            #FDB913 !important;
    }


    .site-header .header-service-tagline span {

        color:
            #ff2e37 !important;
    }

}


/* ==========================================================
   ZGLOSZENIE AWARII
   USUWAMY INNA LINIE
========================================================== */

#zgloszenie::after {

    display:
        none !important;

    content:
        none !important;
}


/* taki sam pasek jak pozostale sekcje */

#zgloszenie::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 4px !important;

    z-index: 5 !important;

    background:
        linear-gradient(
            90deg,

            #FDB913 0%,
            #FDB913 33.333%,

            #006A44 33.333%,
            #006A44 66.666%,

            #C1272D 66.666%,
            #C1272D 100%
        ) !important;
}


/* ==========================================================
   KONTAKT
   "POMOC TIR 24/7"
========================================================== */

.contact-box .contact-label,
.contact-section .contact-label {

    display:
        inline-block !important;

    margin-bottom:
        14px !important;

    color:
        #ff2e37 !important;

    font-size:
        24px !important;

    line-height:
        1 !important;

    font-weight:
        950 !important;

    letter-spacing:
        .07em !important;
}


/* ==========================================================
   CALKOWICIE DOLNY PASEK — ZOLTY
========================================================== */

.footer-bottom-services {

    position:
        relative !important;

    width:
        100% !important;

    max-width:
        1500px !important;

    display:
        block !important;

    padding:
        28px
        20px
        22px !important;

    margin-top:
        35px !important;

    color:
        #075E3C !important;

    background:
        #FDB913 !important;

    /*
       ten trik sprawia, ze zolty kolor idzie
       przez CALA szerokosc ekranu
    */

    box-shadow:
        0 0 0 100vmax #FDB913 !important;

    clip-path:
        inset(0 -100vmax) !important;
}


/* ==========================================================
   TYTUL USLUG NA DOLE
========================================================== */

.footer-services-title {

    margin-bottom:
        14px;

    color:
        #C1272D;

    font-size:
        17px;

    line-height:
        1;

    font-weight:
        950;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


/* ==========================================================
   LISTA USLUG
========================================================== */

.footer-service-list {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px 0;

    color:
        #075E3C;

    font-size:
        14px;

    line-height:
        1.35;

    font-weight:
        800;
}


.footer-service-list span {

    display:
        inline-flex;

    align-items:
        center;
}


/* czerwone separatory */

.footer-service-list span:not(:last-child)::after {

    content:
        "";

    display:
        inline-block;

    width:
        2px;

    height:
        14px;

    margin:
        0
        12px;

    background:
        #C1272D;
}


/* ==========================================================
   COPYRIGHT
========================================================== */

.footer-legal {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        22px;

    padding-top:
        16px;

    border-top:
        1px solid rgba(
            7,
            94,
            60,
            .25
        );

    color:
        #075E3C;

    font-size:
        12px;

    font-weight:
        700;
}


.footer-bottom-services span,
.footer-bottom-services strong {

    color:
        inherit !important;
}


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

@media (max-width: 700px) {

    .contact-box .contact-label,
    .contact-section .contact-label {

        font-size:
            20px !important;
    }


    .footer-bottom-services {

        padding:
            24px
            18px
            20px !important;
    }


    .footer-service-list {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            7px;

        font-size:
            13px;
    }


    .footer-service-list span:not(:last-child)::after {

        display:
            none;
    }


    .footer-service-list span::before {

        content:
            "•";

        margin-right:
            8px;

        color:
            #C1272D;

        font-size:
            18px;
    }


    .footer-legal {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            6px;
    }

}


/* ===== HEADER FOOTER FINAL TWEAK END ===== */


/* ===== FOOTER COLUMNS REDESIGN START ===== */


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

.footer-columns-layout {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 56px !important;
    padding-bottom: 24px !important;

    color: #f4f6f8 !important;

    background:
        linear-gradient(
            180deg,
            #2f495f 0%,
            #314e64 100%
        ) !important;
}

.footer-columns-layout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            #FDB913 0%,
            #FDB913 33.333%,
            #006A44 33.333%,
            #006A44 66.666%,
            #C1272D 66.666%,
            #C1272D 100%
        );
}


/* ==========================================================
   GRID
========================================================== */

.footer-columns-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 54px !important;
    align-items: start !important;
}


/* ==========================================================
   KOLUMNY
========================================================== */

.footer-columns-layout .footer-col h3 {
    margin: 0 0 20px !important;
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
}

.footer-brand-title {
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.footer-brand-text {
    max-width: 430px;
    margin: 0 0 28px !important;
    color: #eef4f8 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

.footer-company-box {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.footer-company-box h3 {
    margin-bottom: 16px !important;
}

.footer-company-box p {
    margin: 0 0 10px !important;
    color: #eef4f8 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}


/* ==========================================================
   LISTY
========================================================== */

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-list li {
    margin: 0 0 14px !important;
    color: #f4f6f8 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

.footer-list a {
    color: #f4f6f8 !important;
    text-decoration: none !important;
    transition: color .18s ease;
}

.footer-list a:hover {
    color: #ffd557 !important;
}


/* ==========================================================
   KONTAKT
========================================================== */

.footer-contact-list li {
    font-weight: 650 !important;
}


/* ==========================================================
   DOLNA BELKA LEGAL
========================================================== */

.footer-legal-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;

    margin-top: 42px !important;
    padding-top: 20px !important;

    border-top: 1px solid rgba(255,255,255,.14);

    color: #dce7ef !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}


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

@media (max-width: 1100px) {

    .footer-columns-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 34px !important;
    }

}


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

@media (max-width: 700px) {

    .footer-columns-layout {
        padding-top: 42px !important;
    }

    .footer-columns-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-brand-title {
        font-size: 24px;
    }

    .footer-columns-layout .footer-col h3 {
        font-size: 19px !important;
    }

    .footer-legal-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

}

/* ===== FOOTER COLUMNS REDESIGN END ===== */


/* ===== FOOTER LITHUANIA COLORS START ===== */


/* ==========================================================
   TLO FOOTERA — ZIELONE
========================================================== */

.footer-columns-layout {

    background:
        linear-gradient(
            145deg,
            #064d35 0%,
            #075E3C 48%,
            #087047 100%
        ) !important;

    color: #FDB913 !important;
}


/* ==========================================================
   DUZE / GRUBE NAPISY — CZERWONE
========================================================== */

.footer-columns-layout .footer-brand-title,
.footer-columns-layout .footer-col h3,
.footer-columns-layout .footer-company-box h3 {

    color: #ff3f47 !important;

    font-weight: 900 !important;
}


/* glowna nazwa jeszcze mocniejsza */
.footer-columns-layout .footer-brand-title {

    color: #ff2e37 !important;
}


/* ==========================================================
   MNIEJSZE TEKSTY — ZOLTE
========================================================== */

.footer-columns-layout .footer-brand-text,
.footer-columns-layout .footer-company-box p,
.footer-columns-layout .footer-list li,
.footer-columns-layout .footer-list a,
.footer-columns-layout .footer-legal-bar,
.footer-columns-layout .footer-legal-bar span {

    color: #ffd84d !important;
}


/* pogrubienia w danych firmy */
.footer-columns-layout .footer-company-box strong {

    color: #ffe477 !important;
}


/* ==========================================================
   LINKI
========================================================== */

.footer-columns-layout .footer-list a {

    text-decoration: none !important;

    transition:
        color .18s ease,
        transform .18s ease !important;
}


.footer-columns-layout .footer-list a:hover {

    color: #ffffff !important;
}


/* ==========================================================
   LINIE
========================================================== */

.footer-columns-layout .footer-company-box,
.footer-columns-layout .footer-legal-bar {

    border-color:
        rgba(
            253,
            185,
            19,
            .30
        ) !important;
}


/* pasek Litwy na gorze footera zostaje */
.footer-columns-layout::before {

    background:
        linear-gradient(
            90deg,

            #FDB913 0%,
            #FDB913 33.333%,

            #006A44 33.333%,
            #006A44 66.666%,

            #C1272D 66.666%,
            #C1272D 100%
        ) !important;
}


/* ===== FOOTER LITHUANIA COLORS END ===== */


/* ===== HERO POSITION COLORS FINAL START ===== */


/* ==========================================================
   TYTUL HERO — TROCHE WYZEJ
========================================================== */

.hero .hero-title-rework {

    position: relative !important;

    top: -38px !important;

    margin-bottom: -18px !important;
}


/* ==========================================================
   VIDEO — TROCHE NIZEJ
========================================================== */

.hero .hero-visual {

    position: relative !important;

    top: 48px !important;
}


/* ==========================================================
   TEKST:
   "Mobilny serwis TIR pomoze..."
   MOCNE ZOLTE TLO
========================================================== */

.hero .hero-main-copy {

    background:
        linear-gradient(
            135deg,
            #FDB913 0%,
            #FFC928 100%
        ) !important;

    color: #075E3C !important;

    border-left:
        5px solid #C1272D !important;

    border-radius:
        16px !important;

    padding:
        19px
        24px !important;

    box-shadow:
        0 14px 30px
        rgba(
            112,
            82,
            0,
            .16
        ) !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   TEKST:
   "Dojezdzamy do awarii..."
   MOCNE ZIELONE TLO
========================================================== */

.hero .hero-location-line {

    background:
        linear-gradient(
            135deg,
            #075E3C 0%,
            #087A4C 100%
        ) !important;

    color: #FDB913 !important;

    border-left:
        5px solid #C1272D !important;

    border-radius:
        16px !important;

    padding:
        19px
        24px !important;

    box-shadow:
        0 14px 30px
        rgba(
            5,
            70,
            45,
            .18
        ) !important;

    font-weight:
        800 !important;
}


/* wszystkie fragmenty w zielonym polu */
.hero .hero-location-line,
.hero .hero-location-line .hero-location-blue,
.hero .hero-location-line .hero-location-yellow {

    color: #FFD84D !important;
}


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

@media (max-width: 1050px) {

    .hero .hero-title-rework {

        top: -24px !important;

        margin-bottom: -8px !important;
    }


    .hero .hero-visual {

        top: 30px !important;
    }

}


/* ==========================================================
   TELEFON
========================================================== */

@media (max-width: 800px) {

    .hero .hero-title-rework {

        top: 0 !important;

        margin-bottom: 0 !important;
    }


    .hero .hero-visual {

        top: 15px !important;
    }

}


/* ===== HERO POSITION COLORS FINAL END ===== */


/* ===== SERVICES YELLOW AUTOSIZE START ===== */


/* ==========================================================
   GRID — KAFELKI NIE SA ROZCIAGANE DO WYSOKOSCI RZEDU
========================================================== */

#uslugi .repair-grid {

    align-items: start !important;

    grid-auto-rows: auto !important;
}


/* ==========================================================
   KAZDY KAFELEK DOPASOWUJE SIE DO TEKSTU
========================================================== */

#uslugi .repair-item,
#uslugi .repair-item:nth-child(3n+1),
#uslugi .repair-item:nth-child(3n+2),
#uslugi .repair-item:nth-child(3n+3) {

    min-height: 0 !important;

    height: auto !important;

    align-self: start !important;
}


/* ==========================================================
   TYTUL — ZOLTY
========================================================== */

#uslugi .repair-item h3,
#uslugi .repair-item:nth-child(3n+1) h3,
#uslugi .repair-item:nth-child(3n+2) h3,
#uslugi .repair-item:nth-child(3n+3) h3 {

    color: #FFD21F !important;
}


/* ==========================================================
   POGRUBIONY TEKST — JASNY ZOLTY
========================================================== */

#uslugi .repair-item .service-lead,
#uslugi .repair-item:nth-child(3n+1) .service-lead,
#uslugi .repair-item:nth-child(3n+2) .service-lead,
#uslugi .repair-item:nth-child(3n+3) .service-lead {

    color: #FFE875 !important;

    font-weight: 850 !important;
}


/* ==========================================================
   RESZTA TEKSTU — ZOLTY
========================================================== */

#uslugi .repair-item p,
#uslugi .repair-item:nth-child(3n+1) p,
#uslugi .repair-item:nth-child(3n+2) p,
#uslugi .repair-item:nth-child(3n+3) p {

    color: #FFD84D !important;
}


/* ==========================================================
   DELIKATNIE MNIEJSZY PADDING,
   ABY NIE BYLO DUZYCH PUSTYCH POL
========================================================== */

#uslugi .repair-item {

    padding:
        26px
        24px !important;
}


/* ===== SERVICES YELLOW AUTOSIZE END ===== */


/* ===== LAZY VIDEO STYLE START ===== */


.lazy-video-frame {

    position: relative !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #075E3C 0%,
            #087A4C 100%
        ) !important;
}


/* zanim film zostanie zaladowany */
.lazy-hero-video {

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    background:
        linear-gradient(
            145deg,
            #075E3C 0%,
            #087A4C 100%
        ) !important;
}


/* przycisk naklada sie na miejsce video */
.video-load-button {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

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

    gap: 14px;

    border: 0;

    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            #075E3C 0%,
            #087A4C 100%
        );

    color: #FDB913;

    font-size: 18px;
    font-weight: 850;
}


/* duzy play */
.video-play-icon {

    width: 74px;
    height: 74px;

    display: grid;
    place-items: center;

    padding-left: 5px;

    border-radius: 50%;

    background: #C1272D;

    color: #FDB913;

    font-size: 31px;

    box-shadow:
        0 14px 32px
        rgba(
            0,
            0,
            0,
            .18
        );
}


.video-load-button:hover
.video-play-icon {

    transform: scale(1.06);
}


/* po zaladowaniu przycisku juz nie ma */
.lazy-video-frame.video-is-loaded {

    background: #000 !important;
}


/* ===== LAZY VIDEO STYLE END ===== */


/* ===== VIDEO DESCRIPTION START ===== */


/* ==========================================================
   CALY BLOK
========================================================== */

.hero .video-description {

    width: 100% !important;

    max-width: 620px !important;

    margin-top: 14px !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* ==========================================================
   PRZYCISK ROZWIN
========================================================== */

.hero .video-description summary {

    width: 100% !important;

    min-height: 52px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;

    padding:
        14px
        20px !important;

    list-style: none !important;

    cursor: pointer !important;

    border-radius: 12px !important;

    background:
        #FDB913 !important;

    color:
        #075E3C !important;

    font-size: 16px !important;

    line-height: 1.2 !important;

    font-weight: 900 !important;

    box-shadow:
        0 10px 22px
        rgba(
            90,
            65,
            0,
            .15
        ) !important;
}


/* ukrywamy domyslny trojkat */
.hero .video-description summary::-webkit-details-marker {
    display: none !important;
}


/* ==========================================================
   STRZALKA
========================================================== */

.hero .video-description-arrow {

    color: #C1272D !important;

    font-size: 22px !important;

    font-weight: 900 !important;

    transition:
        transform .2s ease !important;
}


.hero .video-description[open]
.video-description-arrow {

    transform:
        rotate(180deg) !important;
}


/* ==========================================================
   ROZWINIETY TEKST
========================================================== */

.hero .video-description-content {

    margin-top: 10px !important;

    padding:
        22px
        22px
        10px !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            145deg,
            #064d35 0%,
            #075E3C 100%
        ) !important;

    border:
        1px solid
        rgba(
            253,
            185,
            19,
            .25
        ) !important;

    box-shadow:
        0 16px 34px
        rgba(
            5,
            61,
            39,
            .16
        ) !important;
}


/* ==========================================================
   TEKST
========================================================== */

.hero .video-description-content p {

    margin:
        0
        0
        16px !important;

    color:
        #FFD84D !important;

    font-size:
        15px !important;

    line-height:
        1.65 !important;

    font-weight:
        500 !important;
}


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

@media (max-width: 800px) {

    .hero .video-description {

        max-width:
            680px !important;
    }


    .hero .video-description summary {

        font-size:
            15px !important;
    }


    .hero .video-description-content {

        padding:
            19px
            18px
            6px !important;
    }


    .hero .video-description-content p {

        font-size:
            14px !important;
    }

}


/* ===== VIDEO DESCRIPTION END ===== */


/* ===== LT VIDEO TEXT BELOW START ===== */


/* ==========================================================
   BLOK POD FILMEM
========================================================== */

.video-text-below {

    width: 100% !important;

    max-width: 620px !important;

    display: block !important;

    margin:
        14px
        0
        0 !important;

    padding: 0 !important;
}


/* ==========================================================
   DETAILS
========================================================== */

.video-text-below .video-description {

    width: 100% !important;

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* ==========================================================
   PRZYCISK — POD FILMEM
========================================================== */

.video-text-below .video-description summary {

    width: 100% !important;

    min-height: 50px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    box-sizing: border-box !important;

    padding:
        13px
        18px !important;

    margin: 0 !important;

    cursor: pointer !important;

    list-style: none !important;

    border: 0 !important;

    border-radius: 10px !important;

    background: #FDB913 !important;

    color: #075E3C !important;

    font-size: 15px !important;

    line-height: 1 !important;

    font-weight: 900 !important;

    box-shadow:
        0 8px 18px
        rgba(
            70,
            55,
            0,
            .14
        ) !important;
}


.video-text-below
.video-description summary::-webkit-details-marker {

    display: none !important;
}


/* ==========================================================
   STRZALKA
========================================================== */

.video-text-below .video-description-arrow {

    color: #C1272D !important;

    font-size: 21px !important;

    font-weight: 950 !important;

    transition:
        transform .2s ease !important;
}


.video-text-below
.video-description[open]
.video-description-arrow {

    transform:
        rotate(180deg) !important;
}


/* ==========================================================
   ROZWINIETA TRESC
========================================================== */

.video-text-below .video-description-content {

    width: 100% !important;

    box-sizing: border-box !important;

    margin-top: 9px !important;

    padding:
        20px
        20px
        5px !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            145deg,
            #064D35 0%,
            #075E3C 100%
        ) !important;

    border:
        1px solid rgba(
            253,
            185,
            19,
            .22
        ) !important;
}


/* tekst */

.video-text-below
.video-description-content p {

    margin:
        0
        0
        15px !important;

    color: #FFD84D !important;

    font-size: 14px !important;

    line-height: 1.65 !important;

    font-weight: 500 !important;
}


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

@media (max-width: 900px) {

    .video-text-below {

        max-width: 680px !important;

        margin-left: auto !important;

        margin-right: auto !important;
    }

}


/* ===== LT VIDEO TEXT BELOW END ===== */


/* ===== HERO VIDEO SIZE FIX START ===== */


/* ==========================================================
   PRAWA KOLUMNA HERO
   FILM + PRZYCISK ZAWSZE JEDEN POD DRUGIM
========================================================== */

.hero .hero-visual {

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    justify-content: flex-start !important;

    width: 100% !important;

    max-width: 680px !important;

    min-width: 0 !important;

    margin-left: auto !important;

    margin-right: 0 !important;

    gap: 0 !important;
}


/* ==========================================================
   FILM — CALA SZEROKOSC PRAWEJ KOLUMNY
========================================================== */

.hero .hero-visual > .hero-video-frame,
.hero .hero-video-frame.lazy-video-frame {

    width: 100% !important;

    max-width: none !important;

    min-width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    aspect-ratio: 16 / 10 !important;

    display: block !important;

    flex: none !important;

    margin: 0 !important;
}


/* VIDEO W SRODKU */

.hero .hero-video-frame .hero-video,
.hero .hero-video-frame video {

    width: 100% !important;

    height: 100% !important;

    min-width: 100% !important;

    display: block !important;

    object-fit: cover !important;
}


/* ==========================================================
   PRZYCISK PLAY — CALA RAMKA FILMU
========================================================== */

.hero .hero-video-frame .video-load-button {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;
}


/* ==========================================================
   "SKAITYTI DAUGIAU"
   ZAWSZE POD FILMEM
========================================================== */

.hero .video-text-below {

    width: 100% !important;

    max-width: none !important;

    min-width: 100% !important;

    display: block !important;

    flex: none !important;

    margin:
        14px
        0
        0 !important;

    padding: 0 !important;
}


.hero .video-text-below .video-description {

    width: 100% !important;

    max-width: none !important;

    display: block !important;

    margin: 0 !important;
}


.hero .video-text-below
.video-description summary {

    width: 100% !important;

    box-sizing: border-box !important;

    display: flex !important;

    justify-content: space-between !important;
}


/* ==========================================================
   ROZWINIETY TEKST TEZ POD FILMEM
========================================================== */

.hero .video-text-below
.video-description-content {

    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box !important;
}


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

@media (max-width: 900px) {

    .hero .hero-visual {

        width: 100% !important;

        max-width: 680px !important;

        margin:
            0
            auto !important;
    }


    .hero .hero-visual > .hero-video-frame,
    .hero .hero-video-frame.lazy-video-frame {

        width: 100% !important;

        min-width: 0 !important;

        aspect-ratio:
            16 / 9 !important;
    }


    .hero .video-text-below {

        min-width: 0 !important;
    }

}


/* ===== HERO VIDEO SIZE FIX END ===== */


/* ===== HERO SMALL POSITION ADJUST START ===== */


/* tylko desktop */
@media (min-width: 901px) {

    /* TYTUL TROCHE WYZEJ */
    .hero .hero-title-rework {
        transform: translateY(-20px) !important;
    }


    /* CALY PRAWY BLOK: FILM + PRZYCISK TROCHE NIZEJ */
    .hero .hero-visual {
        transform: translateY(35px) !important;
    }

}


/* ===== HERO SMALL POSITION ADJUST END ===== */


/* ===== VIDEO POPOVER FINAL START ===== */


/* ==========================================================
   DESKTOP — CALY PRAWY BLOK JESZCZE NIZEJ
========================================================== */

@media (min-width: 901px) {

    .hero .hero-visual {

        transform:
            translateY(75px) !important;
    }

}


/* ==========================================================
   POZWALAMY OKNU WYCHODZIC NAD INNE ELEMENTY
========================================================== */

.hero,
.hero .hero-grid,
.hero .hero-visual,
.hero .video-text-below,
.hero .video-description {

    overflow:
        visible !important;
}


.hero .hero-visual {

    position:
        relative !important;

    z-index:
        20 !important;
}


.hero .video-text-below {

    position:
        relative !important;

    z-index:
        50 !important;
}


/* ==========================================================
   DETAILS NIE ZMIENIA WYSOKOSCI UKLADU
========================================================== */

.hero .video-description {

    position:
        relative !important;
}


/* ==========================================================
   ROZWIJANY TEKST JAK WIADOMOSC / POPOVER
   NIE ZAJMUJE MIEJSCA W UKLADZIE
========================================================== */

.hero .video-text-below
.video-description-content {

    position:
        absolute !important;

    top:
        calc(100% + 12px) !important;

    right:
        0 !important;

    left:
        auto !important;

    z-index:
        99999 !important;

    width:
        min(560px, 92vw) !important;

    max-width:
        560px !important;

    max-height:
        440px !important;

    overflow-y:
        auto !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        24px 24px 10px !important;

    border-radius:
        16px !important;

    background:
        #075E3C !important;

    border:
        2px solid #FDB913 !important;

    box-shadow:
        0 24px 55px
        rgba(0, 0, 0, .32) !important;
}


/* ==========================================================
   MALY "DZIOBEK" JAK W WIADOMOSCI
========================================================== */

.hero .video-text-below
.video-description-content::before {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        -10px !important;

    right:
        30px !important;

    width:
        18px !important;

    height:
        18px !important;

    background:
        #075E3C !important;

    border-left:
        2px solid #FDB913 !important;

    border-top:
        2px solid #FDB913 !important;

    transform:
        rotate(45deg) !important;
}


/* ==========================================================
   TEKST W OKNIE
========================================================== */

.hero .video-text-below
.video-description-content p {

    color:
        #FFD84D !important;

    font-size:
        15px !important;

    line-height:
        1.65 !important;

    margin:
        0 0 16px !important;
}


/* ==========================================================
   SCROLLBAR W ROZWINIETYM TEKSCIE
========================================================== */

.hero .video-description-content {

    scrollbar-width:
        thin;

    scrollbar-color:
        #FDB913 #075E3C;
}


.hero .video-description-content::-webkit-scrollbar {

    width:
        9px;
}


.hero .video-description-content::-webkit-scrollbar-track {

    background:
        #075E3C;
}


.hero .video-description-content::-webkit-scrollbar-thumb {

    background:
        #FDB913;

    border-radius:
        20px;

    border:
        2px solid #075E3C;
}


/* ==========================================================
   PRZYCISK ZOSTAJE NORMALNIE POD FILMEM
========================================================== */

.hero .video-text-below
.video-description summary {

    position:
        relative !important;

    z-index:
        2 !important;
}


/* ==========================================================
   MOBILE
   OKNO NAD STRONA, ALE DOPASOWANE DO SZEROKOSCI
========================================================== */

@media (max-width: 900px) {

    .hero .video-text-below
    .video-description-content {

        right:
            0 !important;

        left:
            0 !important;

        width:
            100% !important;

        max-width:
            100% !important;

        max-height:
            390px !important;
    }

}


/* ===== VIDEO POPOVER FINAL END ===== */


/* ===== HERO STRIPE ZINDEX FIX START ===== */


/* pasek-separator ma byc pod zawartoscia */
.hero::before,
.hero::after {

    z-index: 1 !important;

    pointer-events: none !important;
}


/* zawartosc hero ponad separatorem */
.hero .hero-grid {

    position: relative !important;

    z-index: 5 !important;
}


/* prawa czesc jeszcze wyzej */
.hero .hero-visual {

    position: relative !important;

    z-index: 50 !important;
}


/* przycisk + wysuwany tekst */
.hero .video-text-below {

    position: relative !important;

    z-index: 1000 !important;
}


/* popup zawsze na samej gorze */
.hero .video-text-below
.video-description-content {

    z-index: 999999 !important;
}


/* ===== HERO STRIPE ZINDEX FIX END ===== */


/* ===== POPOVER STACKING CONTEXT FIX START ===== */


/* ==========================================================
   HERO JAKO CALA WARSTWA NAD KOLEJNYMI SEKCJAMI
========================================================== */

.hero {

    position: relative !important;

    z-index: 5000 !important;

    overflow: visible !important;
}


/* ==========================================================
   KOLEJNE SEKCJE TWORZA NIZSZA WARSTWE
   TO WLASNIE ICH PASEK PRZECINAL POPOVER
========================================================== */

#zgloszenie,
.repair-grid-section,
.area-section,
#obszar,
#faq,
.contact-section,
footer {

    position: relative !important;

    z-index: 1 !important;
}


/* ==========================================================
   PASKI FLAGI W KOLEJNYCH SEKCJACH TEZ NIZEJ
========================================================== */

#zgloszenie::before,
#zgloszenie::after,

.repair-grid-section::before,
.repair-grid-section::after,

.area-section::before,
.area-section::after,

#obszar::before,
#obszar::after,

#faq::before,
#faq::after,

.contact-section::before,
.contact-section::after,

footer::before,
footer::after {

    z-index: 1 !important;

    pointer-events: none !important;
}


/* ==========================================================
   PRAWA CZESC HERO
========================================================== */

.hero .hero-grid {

    position: relative !important;

    z-index: 10 !important;

    overflow: visible !important;
}


.hero .hero-visual {

    position: relative !important;

    z-index: 20 !important;

    overflow: visible !important;
}


.hero .video-text-below {

    position: relative !important;

    z-index: 30 !important;

    overflow: visible !important;
}


/* ==========================================================
   SAMO OKNO Z TEKSTEM NAJWYZEJ WEWNATRZ HERO
========================================================== */

.hero .video-text-below
.video-description-content {

    z-index: 99999 !important;
}


/* ===== POPOVER STACKING CONTEXT FIX END ===== */


/* ===== CITIES ALWAYS VISIBLE START ===== */


/* wszystkie pozostale miasta sa zawsze widoczne */
#obszar .cities-grid {

    max-height: none !important;

    height: auto !important;

    overflow: visible !important;
}


/* usuwa ograniczenie pierwszych 6 rzedow */
#obszar .cities-grid > * {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* zadnego przycisku rozwijania */
#obszar .cities-toggle,
#obszar .city-toggle,
#obszar .cities-more,
#obszar .city-more {

    display: none !important;
}


/* ===== CITIES ALWAYS VISIBLE END ===== */


/* ===== CITIES 25 FIX START ===== */

body #obszar .cities-grid,
body .area-section .cities-grid,
body .cities-grid.is-expanded {

    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}


/* wymusza widocznosc wszystkich pozostalych miast */
body #obszar .cities-grid.is-expanded > *,
body .area-section .cities-grid.is-expanded > *,
body .cities-grid.is-expanded > * {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;
}


/* przycisk rozwijania nadal ukryty */
body .cities-toggle,
body .city-toggle,
body .cities-more,
body .city-more {

    display: none !important;
}

/* ===== CITIES 25 FIX END ===== */


/* ===== CITY LINK KIELCAI START ===== */

#obszar .cities-grid a {

    text-decoration: none !important;

    box-sizing: border-box !important;

    cursor: pointer !important;
}

#obszar .cities-grid a:hover {

    text-decoration: none !important;
}

/* ===== CITY LINK KIELCAI END ===== */