article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    display: block
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

*, :after, :before {
    box-sizing: border-box;
    background-repeat: no-repeat;
    vertical-align: baseline
}

:active, :focus {
    outline: none !important
}

.hidden[class], [hidden], template {
    display: none !important
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, h5, h6, ol, p, ul {
    margin: 0
}

a, address, button, cite, font, h1, h2, h3, h4, h5, h6, input, option, p, select, textarea {
    font: inherit
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word
}

html {
    -ms-overflow-style: none;
    font-size: 10px;
    scroll-behavior: smooth
}

body {
    font: 160% -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    text-decoration-skip: objects;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%
}

ol, ul {
    list-style-type: none;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    color: inherit;
    background-color: transparent;
    cursor: pointer;
    display: inline-block
}

a, a:link, a:visited {
    text-decoration: none
}

textarea {
    overflow: auto
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: "";
    content: none
}

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

#__next, #root {
    isolation: isolate
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *, :after, :before {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

button, input, textarea {
    color: inherit
}

button, input {
    appearance: none
}

button:active, button:focus, input:active, input:focus {
    box-shadow: none !important
}

button, label {
    cursor: pointer
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Hairline.ttf) format("truetype");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-HairlineItalic.ttf) format("truetype");
    font-weight: 100;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Thin.ttf) format("truetype");
    font-weight: 200;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-ThinItalic.ttf) format("truetype");
    font-weight: 200;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-LightItalic.ttf) format("truetype");
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-MediumItalic.ttf) format("truetype");
    font-weight: 500;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Semibold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-SemiboldItalic.ttf) format("truetype");
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Heavy.ttf) format("truetype");
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-HeavyItalic.ttf) format("truetype");
    font-weight: 800;
    font-style: italic
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-Black.ttf) format("truetype");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: Lato;
    src: url(../fonts/Lato/Lato-BlackItalic.ttf) format("truetype");
    font-weight: 900;
    font-style: italic
}

.arrow-orange, .btn.white:hover:after, .btn:after, .page-pakiet #welcome .btn:after, [class^=btn-].white:hover:after, [class^=btn-]:after {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NyAxNy45Ij4KICAgIDxwYXRoIGZpbGw9IiNlZDcyMGEiIGQ9Ik0zNC45LDBjMSwyLDEuNywzLjMsMi4yLDQuMS41LjgsMS40LDIsMi42LDMuNkgwdjIuNWgzOS43Yy0xLjcsMS44LTMuMyw0LjQtNC45LDcuN2gxLjljMi4xLTIuNCw0LTQuMiw1LjUtNS40LDEuNS0xLjIsMy4xLTIuMyw0LjgtMy4xdi0xLjFjLTEuNC0uNi0yLjktMS41LTQuNi0yLjgtMS42LTEuMy0zLjUtMy4xLTUuNy01LjVoLTEuOVoiLz4KPC9zdmc+Cg==") 50%/contain no-repeat
}

.arrow-white, .btn.white:after, .btn:hover:after, .page-main #welcome .btn:after, .page-pakiet #welcome .btn:hover:after, .swiper-button-next:after, .swiper-button-prev:after, [class^=btn-].white:after, [class^=btn-]:hover:after {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NyAxNy45Ij4KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zNC45LDBjMSwyLDEuNywzLjMsMi4yLDQuMS41LjgsMS40LDIsMi42LDMuNkgwdjIuNWgzOS43Yy0xLjcsMS44LTMuMyw0LjQtNC45LDcuN2gxLjljMi4xLTIuNCw0LTQuMiw1LjUtNS40LDEuNS0xLjIsMy4xLTIuMyw0LjgtMy4xdi0xLjFjLTEuNC0uNi0yLjktMS41LTQuNi0yLjgtMS42LTEuMy0zLjUtMy4xLTUuNy01LjVoLTEuOVoiLz4KPC9zdmc+Cg==") 50%/contain no-repeat
}

.arrow-blue, .swiper-button-next:hover:after, .swiper-button-prev:hover:after {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NyAxNy45Ij4KICAgIDxwYXRoIGZpbGw9IiMwZDE1MjgiIGQ9Ik0zNC45LDBjMSwyLDEuNywzLjMsMi4yLDQuMS41LjgsMS40LDIsMi42LDMuNkgwdjIuNWgzOS43Yy0xLjcsMS44LTMuMyw0LjQtNC45LDcuN2gxLjljMi4xLTIuNCw0LTQuMiw1LjUtNS40LDEuNS0xLjIsMy4xLTIuMyw0LjgtMy4xdi0xLjFjLTEuNC0uNi0yLjktMS41LTQuNi0yLjgtMS42LTEuMy0zLjUtMy4xLTUuNy01LjVoLTEuOVoiLz4KPC9zdmc+Cg==") 50%/contain no-repeat
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

#welcome .bg-video, .form.is-loading:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute
}

.header > .container-2, footer .col-2, footer .col-4 {
    display: flex;
    justify-content: space-between;
    align-items: center
}

#packages .swiper-slide, #second .second-grid .slide .card > div {
    background: #0d1528 linear-gradient(45deg, #142c65, #0f204a);
    box-shadow: 0 0 3rem rgba(0, 0, 0, .6);
    border-radius: 2.5rem
}

html {
    font-size: 1.562vw;
    scroll-padding: 8rem;
    scrollbar-width: none;
    max-width: 100vw;
    overflow-x: hidden
}

@media (min-width: 980px) or (orientation: landscape) {
    html {
        font-size: .521vw
    }
}

button {
    background: transparent
}

body {
    font: 600 2.8rem/1.4 Lato, sans-serif;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow-x: hidden
}

main {
    flex-grow: 1
}

.container, .container-2, .container-3 {
    margin-left: auto;
    margin-right: auto
}

#performance-1 .mobile:after, #performance-1 .mobile:before, #sixth .mobile:after, #sixth .mobile:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute
}

.container {
    max-width: 143rem;
    width: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    .container {
        width: 86%
    }
}

.container-2 {
    max-width: 124rem;
    width: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    .container-2 {
        width: 86%
    }
}

.container-3 {
    max-width: 129rem;
    width: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    .container-3 {
        width: 86%
    }
}

.container-1_2 {
    width: 95%
}

.nowrap {
    white-space: nowrap
}

.btn {
    color: #ed720a;
    font-size: 2.1rem;
    line-height: 1;
    padding: 1.9rem 2.5rem;
    transition: all .3s, opacity .5s, color .3s 0s;
    overflow: hidden;
    position: relative;
    z-index: 1;
    min-width: 18rem;
    text-align: center;
    font-weight: 600;
    border-radius: 2.5rem;
    border: .2rem solid
}

.btn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 120%;
    height: 105%;
    transition: .5s;
    z-index: -1;
    transform: translateX(-110%) skewX(-25deg)
}

.btn:hover {
    color: #fff;
    border-color: #ed720a
}

.btn:hover:before {
    transform: translateX(-7%) skewX(-25deg);
    background: #ed720a
}

.btn.white {
    color: #fff
}

.btn.white:hover {
    color: #ed720a;
    border-color: #fff
}

.btn.white:before {
    background: #fff
}

@media (max-width: 980px) and (orientation: portrait) {
    .btn {
        padding: 2.1rem 2.5rem
    }
}

.btn[disabled] {
    filter: grayscale(1);
    cursor: not-allowed
}

.btn, [class^=btn-] {
    cursor: pointer
}

.btn:after, [class^=btn-]:after {
    content: "";
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin-left: 1rem;
    vertical-align: middle;
    transition: transform .3s;
    font-weight: 900
}

.btn:hover:after, [class^=btn-]:hover:after {
    transform: translate(.15rem)
}

.btn-link {
    transition: .3s;
    font-size: 2.2rem
}

.btn-link:hover {
    color: #ec7107
}

section[id] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13rem 0
}

@media (max-width: 980px) and (orientation: portrait) {
    section[id] {
        padding: 9rem 0
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .col-d-2 {
        display: flex;
        gap: 1.25rem
    }

    .col-d-2 > * {
        flex-grow: 1
    }

    .col-d-2 > :first-child {
        width: 47%
    }

    .col-d-2 > :last-child {
        width: 53%
    }
}

.carousel {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 7rem;
    max-width: 100%
}

.carousel-items {
    flex-shrink: 0;
    display: flex;
    gap: 12rem;
    justify-content: space-around;
    min-width: 100%;
    animation: a 30s linear infinite
}

.carousel-items > img {
    width: 20rem;
    height: 11.5rem;
    object-fit: contain;
    object-position: center
}

@keyframes a {
    0% {
        transform: translateX(0)
    }
    to {
        transform: translateX(calc(-50% - 6rem))
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    .container.swiper-initialized {
        width: 75%
    }

    .overflow-m {
        overflow: hidden
    }
}

strong {
    font-weight: inherit
}

.font-w-500[class][class] {
    font-weight: 500
}

@media (max-width: 980px) and (orientation: portrait) {
    .swiper-button-next, .swiper-button-prev {
        display: none
    }
}

@media (orientation: landscape) and (max-width: 1100px) {
    html {
        font-size: .6vw !important
    }
}

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false
}

.mg-t {
    margin-top: 5rem
}

.loaded .header {
    translate: 0
}

.page-produkt .header, .page-social-media .header {
    color: #000
}

.header {
    transition: .4s, translate .3s .3s;
    z-index: 99;
    color: #fff;
    translate: 0 -20vh
}

@media (max-width: 980px) and (orientation: portrait) {
    .header {
        padding-top: 5.3rem
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .header {
        padding-top: 2rem
    }
}

.page-pakiet .header-logo {
    background-image: url(../img/DOZ_Logo_www_white.svg)
}

.page-narzedzia .header-burger:after, .page-narzedzia .header-burger:before, .page-narzedzia .header-burger span {
    background: #000
}

.page-narzedzia .header {
    color: #000
}

.page-narzedzia .header-logo {
    background-image: url(../img/DOZ_Logo_www_color.svg)
}

@media (max-width: 980px) and (orientation: portrait) {
    .header-menu-active.page-pakiet .header-logo {
        background-image: url(../img/DOZ_Logo_www_color.svg)
    }
}

.header-logo {
    position: relative;
    z-index: 10;
    background: url(../img/DOZ_Logo_www_white.svg) no-repeat 0/contain;
    width: 30rem;
    margin: 1rem 0;
    height: 6.3rem
}

.header-logo img {
    width: 3.2rem;
    height: 3.2rem;
    margin-right: .8rem
}

.header-burger {
    padding: 0;
    width: 3rem;
    height: 2.5rem;
    border: 0;
    position: relative;
    z-index: 9;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer
}

.header-burger:after, .header-burger:before, .header-burger span {
    display: block;
    width: 100%;
    height: .5rem;
    background: #fff;
    transition: transform .3s
}

.header-burger:after, .header-burger:before {
    content: ""
}

@media (min-width: 980px) or (orientation: landscape) {
    .header-burger {
        display: none
    }
}

.header-nav-menu-wrap {
    width: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    .header-nav-menu-wrap {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 8;
        pointer-events: none
    }
}

.header-nav-menu-wrap a {
    position: relative
}

.header-nav-menu-wrap a:after {
    content: "";
    position: absolute;
    top: 98%;
    left: 0;
    display: block;
    width: 100%;
    height: .2rem;
    background: transparent linear-gradient(90deg, transparent 50%, #fff 0) 200% 0/200% no-repeat;
    transition: .3s
}

.header-nav-menu-wrap a:hover:after {
    background-position-x: 100%
}

.header-nav-menu {
    position: relative;
    z-index: 1;
    gap: 5.35rem;
    transition: .7s ease;
    font-size: 2.2rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .header-nav-menu {
        transform: translateX(200.1%);
        padding-top: 15rem;
        font-size: 3.5rem;
        padding-left: 8rem;
        background: #eee;
        gap: 3rem;
        display: flex;
        flex-direction: column;
        min-height: 100dvh
    }

    .header-nav-menu:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #ec7107;
        position: absolute;
        top: 0;
        right: 100%
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .header-nav-menu {
        display: flex;
        text-shadow: 0 0 .4rem rgba(0, 0, 0, .2)
    }
}

body.is-scroll header {
    box-shadow: 0 0 .25rem rgba(0, 0, 0, .4);
    background: #fff
}

body.is-scroll header .header-logo {
    background-image: url(../img/DOZ_Logo_www_color.svg)
}

body.is-scroll .header-nav-menu {
    text-shadow: none
}

body.header-menu-active header, body.is-scroll header {
    color: #000;
    padding-top: 0
}

body.header-menu-active header .header-nav-menu-wrap a:after, body.is-scroll header .header-nav-menu-wrap a:after {
    background-image: linear-gradient(90deg, transparent 50%, #000 0)
}

body.header-menu-active .header-burger:after, body.header-menu-active .header-burger:before, body.header-menu-active .header-burger span, body.is-scroll .header-burger:after, body.is-scroll .header-burger:before, body.is-scroll .header-burger span {
    background: #000
}

body.header-menu-active {
    overflow: hidden;
    color: #fff
}

body.header-menu-active .header-burger:before {
    transform: translateY(1rem) rotate(45deg)
}

body.header-menu-active .header-burger span {
    transform: scaleX(0)
}

body.header-menu-active .header-burger:after {
    transform: translateY(-1rem) rotate(-45deg)
}

body.header-menu-active .header-nav-menu {
    transform: translateX(0);
    pointer-events: all
}

.form-item.input input[type=email], .form-item.input input[type=text], .form-item.textarea textarea, .form-item select {
    background: transparent linear-gradient(90deg, #ec7107 50%, #aeaeae 0) 100% bottom/200% .3rem no-repeat;
    background-origin: border-box;
    transition: all .3s cubic-bezier(.64, .09, .08, 1)
}

.form-item.input input[type=email].is-not-empty, .form-item.input input[type=email]:focus, .form-item.input input[type=text].is-not-empty, .form-item.input input[type=text]:focus, .form-item.textarea textarea:focus, .form-item select:focus, .form-item select:valid {
    background-position-x: 0
}

.form-item.input label, .form-item .select-label, .form-item.textarea label {
    position: absolute;
    pointer-events: none;
    left: .1em;
    top: 1.2em;
    transition: all .2s ease
}

.form-item.input input[type=email].is-not-empty ~ label, .form-item.input input[type=email]:focus ~ label, .form-item.input input[type=text].is-not-empty ~ label, .form-item.input input[type=text]:focus ~ label, .form-item.textarea textarea.is-not-empty + label, .form-item.textarea textarea:focus + label, .form-item select:focus ~ .select-label, .form-item select:valid ~ .select-label {
    font-size: 70%;
    top: -.4em
}

.form > :not(:last-child) {
    margin-bottom: 1.25rem
}

.form.is-loading {
    position: relative;
    cursor: progress;
    transition: .4s
}

.form.is-loading:after {
    content: "";
    z-index: 2;
    background: hsla(0, 0%, 100%, .5)
}

.form-item {
    color: #aeaeae;
    font-weight: 400;
    position: relative
}

.form-item.server-response {
    display: flex;
    align-items: center
}

.form-item.server-response .form-item-err {
    opacity: 1;
    position: relative;
    font-size: 80%
}

.form-item.server-response.success .form-item-err {
    color: #000
}

.form-item.is-error[class] input {
    background-image: linear-gradient(90deg, #e11 50%, #e11 0)
}

.form-item.is-error[class] .form-item-err {
    translate: 0;
    opacity: 1
}

.form-item .form-item-err {
    color: red;
    font-size: 60%;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    translate: 3rem 0
}

@media (max-width: 980px) and (orientation: portrait) {
    .form-item + .form-item {
        margin-top: 1.2rem
    }
}

.form-item.input input[type=email], .form-item.input input[type=text] {
    padding: .85em .5em;
    line-height: 1.5em;
    border: 0;
    display: block;
    width: 100%
}

.form-item select {
    padding: .85em .5em;
    border: none;
    width: 100%;
    color: #aeaeae;
    appearance: none;
    -webkit-appearance: none
}

.form-item .select:after {
    content: "";
    position: absolute;
    top: 60%;
    right: .5rem;
    width: 0;
    height: 0;
    padding: 0;
    border-left: .6rem solid transparent;
    border-right: .6rem solid transparent;
    border-top: .6rem solid #aeaeae;
    pointer-events: none
}

.form-item.textarea textarea {
    width: 100%;
    border: 0;
    padding: .85em .5em;
    color: #aeaeae
}

.form-item.checkbox {
    margin: 2rem 0
}

.form-item.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.form-item.checkbox :checked + .custom-checkbox:before {
    transform: translate(-50%, -50%) scale(.6)
}

.form-item.checkbox label {
    display: flex;
    align-items: center
}

.form-item.checkbox .custom-checkbox {
    width: 2rem;
    height: 2rem;
    border: .2rem solid #aeaeae;
    margin-right: 1rem;
    position: relative
}

.form-item.checkbox .custom-checkbox:before {
    content: "";
    background: #ec7107;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transition: .3s;
    transform: translate(-50%, -50%) scale(0)
}

.swiper, :host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    overflow: hidden;
    list-style: none;
    padding: 0
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: ease;
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    text-align: center;
    color: #fff;
    background: rgba(14, 25, 53, .75);
    border-radius: 50%;
    width: 7.5rem;
    height: 7.5rem;
    border: .2rem solid #fff;
    transition: .3s;
    transform: translateY(-50%)
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background: #fff;
    color: #0e1935
}

.swiper-button-next.swiper-button-disabled, .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-disabled, .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-prev {
    right: 100%;
    transform: translate(50%, -50%)
}

.swiper-button-next {
    right: 10px;
    left: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    content: "";
    width: 3.5rem;
    height: 100%;
    display: block;
    margin: 0 auto
}

.swiper-button-prev:after {
    transform: rotate(180deg)
}

.swiper-button-next {
    transform: translate(-50%, -50%);
    left: 100%
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: opacity .3s;
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -8rem;
    left: 0;
    width: 100%
}

.swiper-pagination-bullet {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-block;
    border-radius: 50%;
    background: #fff
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #0b193c;
    transform: scale(1.2);
    border: .25rem solid #fff
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 1.26rem
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, right .2s
}

.swiper-pagination-fraction {
    color: inherit
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-lock {
    display: none
}

.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.page-about .header-logo, .page-performance .header-logo {
    background-image: url(../img/DOZ_Logo_www_color.svg)
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-page[class][class] main > section:first-child .content {
        padding: 19rem 0 9rem
    }

    .page-page[class][class] .container-1_2 {
        width: 100%;
        padding: 9rem 0
    }

    .page-page[class][class] .header-logo {
        background-image: url(../img/DOZ_Logo_www_color.svg)
    }

    .page-page[class][class] .header-burger:after, .page-page[class][class] .header-burger:before, .page-page[class][class] .header-burger span {
        background: #000
    }

    .page-page .section-oferta.reverse .container-3 {
        flex-direction: column
    }
}

#benefits {
    background: #0d1528 url(../img/blok_2/bg.webp?v=202501161048) 50%/cover;
    color: #fff
}

@media (min-width: 980px) or (orientation: landscape) {
    #benefits {
        height: 100.4rem
    }

    #benefits .container-1_2 {
        padding-left: 4.25rem
    }

    #benefits:not(.reverse)[class] .mobile {
        margin-left: 5.25rem
    }

    #benefits:not(.reverse)[class] .content {
        padding-left: 0
    }
}

#benefits .sup-h2 {
    font-size: 100%;
    font-weight: 700
}

#benefits .bg {
    background: transparent
}

#benefits .bg .mobile {
    background: url(../img/podstrona/telefon.webp?v=202501161048) 100%/contain no-repeat;
    width: 77%;
    margin-left: auto;
    height: 115%;
    margin-top: -6.7rem;
    position: relative
}

#benefits .bg .mobile.mobile-2 {
    background-image: url(../img/podstrona/telefon-2.webp?v=202501161048)
}

#benefits .bg .mobile.mobile-3 {
    background-image: url(../img/podstrona/telefon-3.webp?v=202501161048)
}

#benefits .bg .mobile.mobile-4 {
    background-image: url(../img/podstrona/telefon-4.webp?v=202501161048)
}

#benefits .bg .mobile [class*=mobile-item-] {
    position: absolute;
    z-index: 1;
    background: none 50%/contain no-repeat
}

#benefits .bg .mobile .mobile-item-1 {
    width: 31%;
    height: 11%;
    background-image: url(../img/podstrona/napis_analiza.webp?v=202501161048);
    right: 13%;
    top: 13%
}

#benefits .bg .mobile .mobile-item-2 {
    width: 30%;
    height: 17%;
    background-image: url(../img/podstrona/narzedzie_komunikacyjne_1.webp?v=202501161048);
    right: 8%;
    top: 28.7%
}

#benefits .bg .mobile .mobile-item-3 {
    width: 35%;
    height: 18.4%;
    background-image: url(../img/podstrona/narzedzie_komunikacyjne_2.webp?v=202501161048);
    right: 64%;
    top: 33%
}

#benefits .bg .mobile .mobile-item-4 {
    width: 45%;
    height: 20.4%;
    background-image: url(../img/podstrona/napis_raport.webp?v=202501161048);
    right: 48%;
    top: 59%
}

@media (max-width: 980px) and (orientation: portrait) {
    #benefits .bg {
        height: 82rem;
        overflow: hidden
    }

    #benefits .bg .mobile {
        width: 107vw;
        height: 135%;
        margin-top: -2rem;
        background-position: 50%
    }
}

#benefits h2 {
    margin-bottom: 5.3rem;
    font-weight: 900;
    font-size: 9rem;
    line-height: .95;
    margin-top: -1.5rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #benefits h2 {
        font-size: 8rem;
        margin-top: -.5rem
    }
}

#benefits .list {
    list-style: disc;
    padding-left: 2rem;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.5
}

@media (max-width: 980px) and (orientation: portrait) {
    #benefits .list {
        font-size: 2.1rem;
        padding-left: 2.7rem
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    #benefits .list li {
        padding-left: 1rem
    }
}

#benefits .list li::marker {
    padding-right: 1rem
}

#benefits .list li + li {
    margin-top: 2rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #benefits .list li + li {
        margin-top: 1.2rem
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #benefits > .container {
        flex-direction: column-reverse
    }
}

.page-performance[class] #benefits .mobile-item-2, .page-performance[class] #benefits .mobile-item-3, .page-produkt[class] #benefits .mobile-item-2, .page-produkt[class] #benefits .mobile-item-3, .page-social-media[class] #benefits .mobile-item-2, .page-social-media[class] #benefits .mobile-item-3 {
    height: 15%;
    width: 33%;
    filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .2))
}

.page-produkt[class] #benefits .mobile-item-2 {
    background-image: url(../img/bundle/mailing.webp?v=202501161048)
}

.page-produkt[class] #benefits .mobile-item-3 {
    background-image: url(../img/bundle/produkt-dnia.webp?v=202501161048)
}

.page-performance[class] #benefits .mobile-item-2 {
    background-image: url(../img/bundle/sprzedaz-komplementarna.webp?v=202501161048)
}

.page-performance[class] #benefits .mobile-item-3 {
    background-image: url(../img/bundle/hello-bar.webp?v=202501161048)
}

.page-social-media[class] #benefits .mobile-item-2 {
    background-image: url(../img/bundle/social-media-post.webp?v=202501161048)
}

.page-social-media[class] #benefits .mobile-item-3 {
    background-image: url(../img/bundle/rich-content-secondary-images.webp?v=202501161048)
}

#pyramid {
    background: #ec7107;
    color: #fff
}

@media (min-width: 980px) or (orientation: landscape) {
    #pyramid {
        height: 71.8rem
    }

    #pyramid.reverse .bg {
        left: 7%
    }
}

#pyramid .container-1_2 {
    padding-right: 0
}

#pyramid .container-1_2 p {
    font-size: 2.2rem
}

#pyramid h2 {
    font-size: 7.7rem;
    line-height: 1;
    font-weight: 900;
    margin-top: -.3rem
}

#pyramid p {
    font-weight: 600
}

#pyramid strong {
    color: #000
}

#pyramid .bg {
    display: flex;
    gap: 3rem;
    margin-top: -5rem;
    background: transparent;
    flex-direction: column;
    height: 112%
}

@media (max-width: 980px) and (orientation: portrait) {
    #pyramid .bg {
        height: 95rem
    }
}

#pyramid .bg h3 {
    font-size: 2.9rem
}

#pyramid .bg p {
    font-weight: 300;
    margin: 0;
    text-align: center;
    line-height: 1.25
}

#pyramid .bg [class*=pyramid-] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    height: 20.5rem;
    width: 83rem;
    transition: .4s cubic-bezier(0, .55, .45, 1)
}

#pyramid .bg [class*=pyramid-]:hover {
    scale: 1.05
}

#pyramid .bg [class*=pyramid-]:not(:first-child):after {
    content: "";
    position: absolute;
    top: -42%;
    left: 48.73%;
    z-index: 2;
    translate: 0 50%;
    width: 3rem;
    height: 7rem;
    transition: opacity 2s cubic-bezier(0, .55, .45, 1) 1s;
    background: url(../img/podstrona/lejek_strzalka.webp?v=202501161048) 50%/contain no-repeat
}

#pyramid .bg [class*=pyramid-]:before {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    top: 0;
    left: 0;
    content: "";
    background: none 50%/contain no-repeat;
    height: 33.9rem;
    width: 85.9rem
}

#pyramid .bg .pyramid-1:before {
    background-image: url(../img/podstrona/lejek_1.webp?v=202501161048)
}

#pyramid .bg .pyramid-2:before {
    background-image: url(../img/podstrona/lejek_2.webp?v=202501161048)
}

#pyramid .bg .pyramid-3:before {
    background-image: url(../img/podstrona/lejek_3.webp?v=202501161048)
}

#pyramid .bg .pyramid-4:before {
    background-image: url(../img/podstrona/lejek_4.webp?v=202501161048)
}

#pyramid.anim-pyramid:not(.run) .bg > div[class]:after {
    opacity: 0
}

@media (max-width: 980px) and (orientation: portrait) {
    #pyramid .container-3 {
        flex-direction: column-reverse
    }

    #pyramid .container-3 .bg {
        overflow: hidden;
        margin-top: -.2rem;
        margin-bottom: -15rem
    }

    #pyramid .container-3 [class^=pyramid-] {
        margin-left: -15%;
        height: 18.5rem
    }
}

#page-text {
    min-height: 85.5rem;
    font-size: 4.56rem;
    text-align: center;
    line-height: 1.3;
    font-weight: 400;
    font-style: italic
}

#page-text strong {
    background: transparent linear-gradient(90deg, #ec7107 50%, transparent 0) 100%/200% 100% no-repeat;
    transition: .4s cubic-bezier(0, .55, .45, 1)
}

#page-text strong.run {
    background-position-x: 0;
    color: #fff
}

@media (max-width: 980px) and (orientation: portrait) {
    #page-text {
        min-height: 69rem;
        font-size: 4rem
    }

    #page-text br {
        display: none
    }
}

#packages {
    background: #0d1528 url(../img/blok_2/bg.webp?v=202501161048) 50%/cover;
    color: #fff;
    font-size: 1.8rem;
    overflow: hidden
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages {
        font-size: 2rem;
        overflow: hidden
    }
}

#packages h2 {
    font-size: 8.7rem;
    font-weight: 900;
    line-height: .8;
    margin-bottom: 7rem
}

@media (min-width: 980px) or (orientation: landscape) {
    #packages h2 {
        padding-left: 6.7rem
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages h2 {
        font-size: 7.5rem;
        line-height: .95
    }
}

#packages strong {
    color: #ec7107
}

#packages .slider-wrap {
    position: relative
}

#packages .swiper {
    margin-top: 4rem;
    overflow: visible
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages .swiper {
        width: 85%
    }
}

#packages .package-title .label {
    font-size: 2.1rem;
    line-height: 1.3;
    font-weight: 700
}

#packages .package-title h3 {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages .package-title h3 {
        margin-bottom: 2.25rem;
        font-size: 4.2rem;
        margin-top: .5rem
    }
}

#packages .swiper-slide {
    min-height: 48.7rem;
    padding: 4.5rem 5.3rem
}

@media (min-width: 980px) or (orientation: landscape) {
    #packages .swiper-slide {
        min-height: 56rem;
        min-width: 64.25rem
    }
}

#packages .swiper-slide p {
    font-weight: 500;
    line-height: 1.2;
    min-height: 8lh
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages .swiper-slide p {
        line-height: 1.35;
        min-height: 9.75lh
    }
}

#packages .swiper-slide p strong {
    color: inherit;
    font-weight: 800;
    display: block;
    margin-bottom: .5rem
}

#packages .swiper-slide .stats {
    border-top: .1rem solid #888;
    border-bottom: .1rem solid #888;
    margin: 2rem 0;
    padding: 1.8rem 0;
    line-height: 1.2
}

#packages .swiper-slide .stats strong {
    color: #ec7107;
    font-size: 135%;
    font-weight: 700
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages .swiper-slide .stats {
        gap: 1.6rem;
        display: flex;
        flex-direction: column;
        line-height: 1;
        padding: 2.4rem 0 3.3rem
    }
}

#packages .swiper-slide .package-content {
    min-height: 29rem
}

#packages .swiper-slide .btn-link {
    position: absolute;
    right: 6rem;
    bottom: 6rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #packages .swiper-slide {
        padding: 6rem 4.6rem;
        min-height: 82rem
    }

    #packages .swiper-slide .btn-link {
        right: 6rem;
        font-size: 2.25rem
    }
}

.page-pakiet .orange-text {
    color: #ec7208
}

.page-pakiet #welcome {
    overflow: hidden;
    min-height: 100dvh;
    color: #fff;
    position: relative;
    background: #081933
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome {
        min-height: 0;
        padding: 19rem 0 9rem;
        flex-direction: column;
        justify-content: flex-start
    }
}

.page-pakiet #welcome .img-performance, .page-pakiet #welcome .img-product, .page-pakiet #welcome .img-sm, .page-pakiet #welcome .main-img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none
}

.page-pakiet #welcome .img-product {
    height: 100%;
    background: url(../img/bundle/pakiet_product.webp?v=202501161048) 81.8rem bottom/auto 73rem no-repeat
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .img-product {
        background-image: none
    }
}

.page-pakiet #welcome .img-performance {
    height: 86%;
    background: url(../img/bundle/pakiet_performance.webp?v=202501161048) 92.8rem 8.3rem/contain no-repeat
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .img-performance {
        display: none
    }
}

.page-pakiet #welcome .img-sm {
    height: 109%;
    background: url(../img/bundle/pakiet_sm.webp?v=202501161048) 80rem 15rem/contain no-repeat
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .img-sm {
        display: none
    }
}

.page-pakiet #welcome .main-img {
    background: url(../img/bundle/pakiet_brand.webp?v=202501161048) 32rem 7.3rem/cover no-repeat;
    height: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .main-img {
        display: none
    }
}

.page-pakiet #welcome .container-2 {
    margin-top: 8rem;
    position: relative
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .container-2 {
        margin-top: 0
    }
}

.page-pakiet #welcome .container-1_2 {
    max-width: 68rem
}

.page-pakiet #welcome .container-1_2 .main-img {
    position: absolute;
    top: -18rem;
    left: -7rem;
    width: 227rem;
    height: 106rem;
    max-height: 106rem;
    max-width: 227rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .container-1_2 p {
        font-size: 2.1rem;
        line-height: 1.4
    }

    .page-pakiet #welcome .container-1_2 p b br {
        display: block
    }

    .page-pakiet #welcome .container-1_2 p br {
        display: none
    }
}

.page-pakiet #welcome .container-1_2 h3 {
    font-size: 2.5rem;
    letter-spacing: .35rem;
    padding-left: .5rem;
    font-weight: 900
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .container-1_2 h3 {
        font-size: 110%
    }
}

.page-pakiet #welcome h2 {
    font-size: 8.45rem;
    font-weight: 900;
    letter-spacing: .11rem;
    line-height: 1.3
}

.page-pakiet #welcome h2 strong {
    color: #ffe9bf
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome h2 {
        font-size: 7.8rem
    }
}

.page-pakiet #welcome p {
    font-size: 1.8rem;
    margin-top: 4rem;
    margin-bottom: 5rem;
    line-height: 1.5
}

.page-pakiet #welcome .stats-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6rem;
    margin-top: 4rem;
    padding-left: 3.5rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .stats-container {
        padding-left: 0;
        justify-content: space-between
    }
}

.page-pakiet #welcome .stats-container .stats {
    margin-right: 10rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #welcome .stats-container .stats {
        margin-right: 0
    }
}

.page-pakiet #welcome .stats-container .text-color-gold {
    font-size: 7rem;
    font-weight: 900;
    position: relative;
    transition: --num 1s linear .3s
}

.page-pakiet #welcome .stats-container .text-color-gold span:first-child {
    display: none
}

.page-pakiet #welcome .stats-container .text-color-gold.run {
    counter-set: num var(--num)
}

.page-pakiet #welcome .stats-container .text-color-gold:before {
    content: counter(num)
}

.page-pakiet #welcome .stats-container .text-color-gold .small-x {
    font-size: 4.7rem
}

.page-pakiet #welcome .stats-container .text {
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
    color: #bac1d3;
    height: 2lh;
    white-space: nowrap
}

.page-pakiet #welcome .btn {
    display: block;
    max-width: 29rem;
    font-size: 2.1rem
}

.page-pakiet #welcome .btn .orange {
    color: #ec7208
}

.page-pakiet #second {
    background: #fff;
    padding: 7rem 0
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second {
        padding: 6rem 0
    }
}

.page-pakiet #second .container-2 {
    width: 143rem;
    max-width: 143rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .container-2 {
        width: 86%
    }
}

.page-pakiet #second h2 {
    font-size: 8.45rem;
    font-weight: 900;
    letter-spacing: .4rem;
    line-height: .9;
    padding-left: 9rem
}

.page-pakiet #second h2 strong {
    color: #ffe9bf
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second h2 {
        font-size: 4.3rem;
        letter-spacing: 0;
        padding-left: 0;
        margin-top: 1rem
    }
}

.page-pakiet #second h3 {
    color: #000;
    font-weight: 900;
    letter-spacing: .08rem;
    font-size: 2.7rem;
    padding-left: 9.5rem;
    text-transform: uppercase
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second h3 {
        padding-left: 0;
        letter-spacing: .11rem;
        font-size: 2.2rem
    }
}

.page-pakiet #second p {
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem
}

.page-pakiet #second .grid-container {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    margin-top: 7rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .grid-container {
        grid-template-columns:1fr;
        margin-top: 4rem
    }
}

.page-pakiet #second .grid-item {
    border-radius: 8px;
    display: flex;
    padding-bottom: 6.2rem;
    padding-left: 4rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .grid-item {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 5.4rem
    }
}

.page-pakiet #second .grid-item img {
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, .1);
    width: 32.9rem;
    height: 29.2rem;
    max-width: 32.9rem;
    margin-right: 8.7rem;
    border-radius: 2.5rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .grid-item img {
        margin-right: 6.5rem;
        width: 22rem;
        height: 20rem
    }
}

.page-pakiet #second .description-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 29rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .description-container {
        margin-right: 0;
        min-width: 0
    }
}

.page-pakiet #second .grid-item .title {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: auto;
    margin-top: 6.6rem;
    letter-spacing: .05rem;
    color: #000
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .grid-item .title {
        margin-top: auto;
        font-size: 2rem;
        line-height: 1.3
    }
}

.page-pakiet #second .grid-item .title .description {
    font-weight: 400;
    line-height: 2.5rem;
    margin-bottom: auto
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .grid-item .title .description {
        line-height: 1.2;
        font-size: 1.9rem
    }
}

.page-pakiet #second .grid-item .value {
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 2.9rem;
    margin-top: 1rem;
    line-height: 1
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-pakiet #second .grid-item .value {
        font-size: 3.4rem;
        margin-top: 1rem;
        margin-bottom: 0
    }
}

.js-anim [class*=anim-fade-] {
    transition: .3s cubic-bezier(0, .55, .45, 1);
    opacity: 0
}

.js-anim [class*=anim-fade-].run {
    opacity: 1;
    translate: 0
}

.js-anim .anim-fade-top {
    translate: 0 3vw
}

.js-anim .anim-fade-left {
    translate: 3vw 0
}

.js-anim .anim-fade-bottom {
    translate: 0 -3vw
}

.js-anim .anim-bg-product {
    transition: background 1s cubic-bezier(0, .55, .45, 1), opacity .4s
}

@media (max-width: 980px) and (orientation: portrait) {
    .js-anim .anim-bg-product {
        background-position-y: 7vw
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .js-anim .anim-bg-product {
        background-position-x: -7vw;
        opacity: 0
    }
}

.js-anim .anim-bg-product.run {
    background-position: 0 0;
    opacity: 1
}

.js-anim .anim-bg-performance {
    transition: translate 2s;
    translate: 13rem 12rem
}

.js-anim .anim-bg-performance.run {
    translate: 0
}

.js-anim .anim-bg-offers {
    transition: background 1s cubic-bezier(0, .55, .45, 1), opacity .4s
}

@media (max-width: 980px) and (orientation: portrait) {
    .js-anim .anim-bg-offers {
        background-position-y: 10vw
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .js-anim .anim-bg-offers {
        background-position-x: 10vw;
        opacity: 0
    }
}

.js-anim .anim-bg-offers.run {
    background-position: 0 0;
    opacity: 1
}

.js-anim .anim-zoom-item {
    scale: 0;
    filter: blur(.5rem);
    transition: scale .3s cubic-bezier(0, .55, .45, 1), filter .3s cubic-bezier(0, .55, .45, 1)
}

.js-anim .anim-zoom-item.run {
    scale: 1;
    filter: blur(0)
}

.js-anim .run.delay-300ms {
    transition-delay: .3s
}

.js-anim .run.delay-600ms {
    transition-delay: .6s
}

.js-anim .run.delay-900ms {
    transition-delay: .9s
}

.page-narzedzia .orange-text {
    color: #ec7208
}

.page-narzedzia #second {
    padding: 19rem 0 9rem;
    background: #fff
}

.page-narzedzia #second .container-2 {
    width: 143rem;
    max-width: 143rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .container-2 {
        width: 86%
    }
}

.page-narzedzia #second h2 {
    font-size: 8.45rem;
    font-weight: 900;
    letter-spacing: .4rem;
    line-height: .9;
    padding-left: 8.5rem
}

.page-narzedzia #second h2 strong {
    color: #ffe9bf
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second h2 {
        font-size: 4.3rem;
        letter-spacing: 0;
        padding-left: 0;
        margin-top: 1rem
    }
}

.page-narzedzia #second h3 {
    color: #000;
    font-weight: 900;
    letter-spacing: .08rem;
    font-size: 2.7rem;
    padding-left: 9rem;
    text-transform: uppercase
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second h3 {
        padding-left: 0;
        letter-spacing: .11rem;
        font-size: 2.2rem
    }
}

.page-narzedzia #second p {
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem
}

.page-narzedzia #second .grid-container {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    margin-top: 7rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .grid-container {
        grid-template-columns:1fr;
        margin-top: 4rem
    }
}

.page-narzedzia #second .grid-item {
    max-width: 32rem;
    border-radius: 2.5rem;
    padding-bottom: 11rem;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .grid-item {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 5.4rem;
        max-width: 100%
    }
}

.page-narzedzia #second .grid-item img {
    filter: drop-shadow(0 1.5rem 1rem rgba(0, 0, 0, .25));
    width: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .grid-item img {
        margin-right: 1.5rem;
        width: 22rem;
        height: 20rem;
        min-width: 22rem
    }
}

.page-narzedzia #second .description-container {
    height: 100%;
    display: flex;
    flex-direction: column
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .description-container {
        margin-right: 0;
        min-width: 0
    }
}

.page-narzedzia #second .grid-item .title {
    font-size: 110%;
    font-weight: 900;
    margin-bottom: auto;
    margin-top: 5rem;
    letter-spacing: .05rem;
    color: #000;
    line-height: 1.2;
    padding: 0 2rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .grid-item .title {
        margin-top: auto;
        font-size: 2rem;
        line-height: 1.3
    }
}

.page-narzedzia #second .grid-item .title .description {
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: auto;
    font-size: 1.82rem;
    margin-top: 2.2rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .grid-item .title .description {
        line-height: 1.2;
        font-size: 1.9rem
    }
}

.page-narzedzia #second .grid-item .value {
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 2.9rem
}

@media (max-width: 980px) and (orientation: portrait) {
    .page-narzedzia #second .grid-item .value {
        font-size: 3.4rem;
        margin-top: 1rem;
        margin-bottom: 0
    }
}

#welcome, .page-main #welcome .btn {
    color: #fff
}

#welcome {
    min-height: 100dvh;
    position: relative
}

@media (max-width: 980px) and (orientation: portrait) {
    #welcome {
        min-height: 125rem;
        padding: 0
    }
}

#welcome .container-1_2 {
    max-width: 63rem
}

#welcome h1 {
    font-size: 7.6rem;
    text-shadow: 0 0 .4rem rgba(0, 0, 0, .3);
    font-weight: 900;
    letter-spacing: -.06rem;
    line-height: 1
}

#welcome h1 strong {
    color: #ec7107
}

@media (max-width: 980px) and (orientation: portrait) {
    #welcome h1 {
        font-size: 6.85rem
    }
}

#welcome p {
    font-size: 2.1rem;
    margin-top: 2.5rem;
    margin-bottom: 3rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #welcome .btn {
        display: block
    }
}

#welcome .bg-video {
    background: url(../img/welcome-bg.webp?v=202501161048) 50%/cover;
    position: absolute;
    z-index: -1;
    object-fit: cover
}

.text-color-gold {
    color: transparent;
    background: #fdae30 linear-gradient(45deg, #ffaf31, #ec7208);
    background-clip: text;
    text-align: center;
    line-height: .9;
    padding: 1rem 0
}

@media (max-width: 980px) and (orientation: portrait) {
    .text-color-gold {
        padding: 2rem 0
    }
}

#second {
    background: #0d1528 url(../img/blok_2/bg.webp?v=202501161048) 50%/cover;
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 2.1rem;
    font-weight: 400
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .container {
        position: relative
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .second-grid {
        margin-bottom: 6rem
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    #second .second-grid {
        display: grid;
        gap: 3.5rem;
        grid-template-areas:"a b b c" "a d e c";
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr
    }

    #second .second-grid .span-a {
        grid-area: a
    }

    #second .second-grid .span-a img {
        height: 17.5rem
    }

    #second .second-grid .span-b[class] {
        grid-area: b
    }

    #second .second-grid .span-b[class] .card > div {
        flex-direction: row;
        gap: 2rem
    }

    #second .second-grid .span-b[class] img {
        width: 15rem;
        margin: 0
    }

    #second .second-grid .span-a .text-color-gold, #second .second-grid .span-b .text-color-gold {
        font-size: 7.3rem
    }

    #second .second-grid .span-d {
        grid-area: d
    }

    #second .second-grid .span-e {
        grid-area: e
    }

    #second .second-grid .span-f {
        grid-area: c
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    #second .second-grid img {
        height: 10rem;
        margin-bottom: 2rem
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .second-grid img {
        height: 15rem
    }
}

#second .second-grid .text-color-gold {
    font-size: 5rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .second-grid .text-color-gold {
        font-size: 7rem
    }
}

#second .second-grid .text-color-gold span {
    font-size: 110%
}

#second .second-grid .text {
    height: 2lh;
    line-height: 1.214;
    text-align: center;
    color: #bac1d3
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .second-grid .text {
        font-weight: 600
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    #second .second-grid .slide {
        perspective: 200rem;
        perspective-origin: 50% 50%
    }
}

#second .second-grid .slide .card {
    min-height: 33rem;
    transform-style: preserve-3d;
    transition: all .6s;
    height: 100%;
    width: 100%
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .second-grid .slide .card {
        min-height: 46rem
    }
}

#second .second-grid .slide .card > div {
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backface-visibility: hidden;
    padding: 2.8rem;
    height: 100%
}

@media (min-width: 980px) or (orientation: landscape) {
    #second .second-grid .slide .card > div:hover {
        filter: brightness(115%);
        scale: 1.03
    }
}

#second .second-grid .slide .card .front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

#second .second-grid .slide .card.animate {
    animation: 10s b infinite
}

#second .second-grid .slide .back {
    transform: rotateY(180deg)
}

@media (min-width: 980px) or (orientation: landscape) {
    #second .second-grid .span-f img {
        width: 13rem
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #second .second-grid .span-f img {
        width: 18rem
    }
}

#second .text-color-gold {
    font-weight: 900
}

@media (min-width: 980px) or (orientation: landscape) {
    #second .swiper-pagination {
        display: none
    }
}

@keyframes b {
    0% {
        transform: rotateY(0)
    }
    30% {
        transform: rotateY(0)
    }
    50% {
        transform: rotateY(180deg)
    }
    80% {
        transform: rotateY(180deg)
    }
    to {
        transform: rotateY(1turn)
    }
}

#o-nas {
    background: #ed720a;
    position: relative
}

@media (min-width: 980px) or (orientation: landscape) {
    #o-nas .swiper-pagination {
        display: none
    }
}

#o-nas:before {
    content: "";
    position: absolute;
    right: 0;
    top: -5%;
    width: 100%;
    height: 115%;
    pointer-events: none;
    z-index: 1;
    background: url(../img/blok_3/strzalka.webp?v=202501161048) 108%/contain no-repeat
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas:before {
        height: 68%;
        width: 78%;
        background-position-x: 22vw
    }
}

#o-nas .container-3, #o-nas h2 {
    position: relative
}

#o-nas h2 {
    font-size: 7.4rem;
    color: #fff;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 3.5rem;
    z-index: 1
}

@media (min-width: 980px) or (orientation: landscape) {
    #o-nas h2 {
        padding-left: 7rem
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas h2 {
        margin-bottom: 5.5rem
    }
}

#o-nas h2 strong {
    color: #000
}

#o-nas .about-group {
    color: #fff;
    text-align: center
}

@media (min-width: 980px) or (orientation: landscape) {
    #o-nas .about-group {
        display: flex
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas .about-group {
        position: relative;
        margin-bottom: 6.5rem;
        margin-left: auto;
        margin-right: auto;
        width: 87%
    }
}

#o-nas .about-group .slide {
    cursor: pointer;
    padding: 2rem 3rem;
    min-height: 41.5rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .3s;
    border-radius: 2.5rem;
    z-index: 1
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas .about-group .slide {
        background: #f27e0f;
        box-shadow: 0 0 2.5rem rgba(0, 0, 0, .15);
        flex: 0 0 auto;
        padding: 7rem
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    #o-nas .about-group .slide {
        width: 25%
    }

    #o-nas .about-group .slide p {
        max-height: 0;
        overflow: hidden;
        transition: all .3s
    }

    #o-nas .about-group .slide:hover {
        background: #f27e0f;
        box-shadow: 0 0 2.5rem rgba(0, 0, 0, .15)
    }

    #o-nas .about-group .slide:hover p {
        max-height: 7lh
    }
}

#o-nas .about-group img {
    height: 12rem;
    margin-bottom: 1.5rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas .about-group img {
        height: 14rem
    }
}

#o-nas .about-group h3 {
    font-size: 2.7rem;
    line-height: 1.2;
    min-height: 2lh;
    margin-bottom: 1rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas .about-group h3 {
        font-size: 2.9rem;
        margin-bottom: 2rem
    }
}

#o-nas .about-group p {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.25
}

@media (max-width: 980px) and (orientation: portrait) {
    #o-nas .about-group p {
        font-size: 2.2rem;
        font-weight: 300;
        min-height: 7lh
    }
}

#o-nas .about-group .swiper-pagination-bullet-active {
    background: #f27e0f
}

#about-1 .bg, #oferta .bg {
    background-image: url(../img/blok_4/bg.webp?v=202501161048)
}

#about-1 .hero, #oferta .hero {
    background-image: url(../img/blok_4/hero.webp?v=202501161048)
}

@media (max-width: 980px) and (orientation: portrait) {
    #about-1 .bg, #oferta .bg {
        background-image: url(../img/blok_4/bg_mobile.webp?v=202501161048)
    }

    #about-1 .hero, #oferta .hero {
        background-image: url(../img/blok_4/hero_mobile.webp?v=202501161048);
        background-size: 85%;
        left: 0
    }
}

#fifth .bg, #produkt-1 .bg {
    background-image: url(../img/blok_5/bg.webp?v=202501161048)
}

#fifth .hero, #produkt-1 .hero {
    background-image: url(../img/blok_5/hero.webp?v=202501161048);
    right: -25%
}

@media (max-width: 980px) and (orientation: portrait) {
    #fifth .hero, #produkt-1 .hero {
        right: 0
    }
}

#performance-1 .bg, #sixth .bg {
    background-image: url(../img/blok_6/bg.webp?v=202501161048)
}

#performance-1 .rocket, #sixth .rocket {
    background-image: url(../img/blok_6/rocket.webp?v=202501161048);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 7%;
    left: -16%;
    z-index: 9;
    background-size: 60%
}

#performance-1 .rocket.anim-infinite, #sixth .rocket.anim-infinite {
    animation: 5s c linear infinite
}

@media (max-width: 980px) and (orientation: portrait) {
    #performance-1 .rocket, #sixth .rocket {
        top: 5%;
        left: -10%
    }
}

#performance-1 .mobile, #sixth .mobile {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: -8%
}

@media (max-width: 980px) and (orientation: portrait) {
    #performance-1 .mobile, #sixth .mobile {
        left: 0
    }
}

#performance-1 .mobile:after, #sixth .mobile:after {
    top: 0;
    left: -6%;
    background-image: url(../img/blok_6/phone.webp?v=202501161048);
    background-size: 120%
}

#performance-1 .mobile:before, #sixth .mobile:before {
    top: 0;
    left: 0;
    background: url(../img/blok_6/shadow.webp?v=202501161048) 50%/cover
}

#seventh .bg, #social-media-1 .bg {
    background-image: url(../img/blok_7/bg.webp?v=202501161048)
}

#seventh [class^=hand-], #social-media-1 [class^=hand-] {
    position: absolute;
    width: 25rem;
    height: 25rem;
    background-size: contain;
    filter: drop-shadow(4rem 4rem 6rem rgba(0, 0, 0, .6));
    will-change: rotate
}

@media (max-width: 980px) and (orientation: portrait) {
    #seventh [class^=hand-], #social-media-1 [class^=hand-] {
        translate: -50% 0;
        width: 17rem;
        height: 17rem;
        filter: drop-shadow(2rem 2rem 4rem rgba(0, 0, 0, .6))
    }
}

#seventh .hand-1, #social-media-1 .hand-1 {
    background-image: url(../img/blok_7/raczka_1.webp?v=202501161048);
    top: -2.5%;
    right: 20%
}

#seventh .hand-2, #social-media-1 .hand-2 {
    background-image: url(../img/blok_7/raczka_2.webp?v=202501161048);
    top: 20%;
    right: 45%
}

#seventh .hand-3, #social-media-1 .hand-3 {
    background-image: url(../img/blok_7/raczka_3.webp?v=202501161048);
    top: 22%;
    right: -5%
}

#seventh .hand-4, #social-media-1 .hand-4 {
    background-image: url(../img/blok_7/raczka_4.webp?v=202501161048);
    top: 42.5%;
    right: 20%
}

#seventh .hand-5, #social-media-1 .hand-5 {
    background-image: url(../img/blok_7/raczka_5.webp?v=202501161048);
    top: 62%;
    right: -10%
}

#seventh .hand-6, #social-media-1 .hand-6 {
    background-image: url(../img/blok_7/raczka_6.webp?v=202501161048);
    top: 78%;
    right: 30%
}

.section-oferta[class] {
    position: relative;
    padding: 0
}

@media (min-width: 980px) or (orientation: landscape) {
    .section-oferta[class] {
        height: 108rem
    }
}

.section-oferta[class] > div {
    display: flex;
    align-items: center
}

@media (max-width: 980px) and (orientation: portrait) {
    .section-oferta[class] > div {
        flex-direction: column
    }

    .section-oferta[class] > div .container-1_2 {
        padding: 14rem 0
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .section-oferta[class] > div > * {
        width: 50%
    }

    .section-oferta[class] > div .container-1_2 {
        padding-right: 7.9rem
    }
}

.section-oferta[class] .sup-h2 {
    font-weight: 900;
    margin-bottom: .8rem;
    letter-spacing: .1rem;
    font-size: 110%
}

.section-oferta[class] h2 {
    font-weight: 900;
    font-size: 8.4rem;
    line-height: .95
}

@media (max-width: 980px) and (orientation: portrait) {
    .section-oferta[class] h2 {
        font-size: 7.8rem
    }
}

.section-oferta[class] h2 strong {
    color: #ec7107
}

.section-oferta[class] p {
    margin-top: 3.5rem;
    font-size: 1.82rem;
    line-height: 1.5;
    font-weight: 800
}

@media (max-width: 980px) and (orientation: portrait) {
    .section-oferta[class] p {
        font-size: 2.1rem;
        line-height: 1.4
    }
}

.section-oferta[class] .btn {
    margin-top: 5rem
}

.section-oferta[class] .bg {
    background: #ec7107 none 50%/cover
}

@media (min-width: 980px) or (orientation: landscape) {
    .section-oferta[class] .bg {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 50vw
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    .section-oferta[class] .bg {
        height: 70rem;
        width: 100vw;
        position: relative
    }

    .section-oferta[class] .bg .hero {
        height: 105%;
        background-position-x: center;
        background-size: 101%
    }
}

.section-oferta[class] .hero {
    background-size: contain;
    width: 100%;
    height: 83.9%;
    position: absolute;
    left: -3.25%;
    bottom: 0;
    background-repeat: no-repeat
}

.section-oferta[class].reverse > div {
    flex-direction: row-reverse
}

@media (max-width: 980px) and (orientation: portrait) {
    .section-oferta[class].reverse > div {
        flex-direction: column-reverse
    }
}

@media (min-width: 980px) or (orientation: landscape) {
    .section-oferta[class].reverse > div .container-1_2 {
        padding-left: 14.25rem;
        padding-right: 0
    }
}

.section-oferta[class].reverse .bg {
    right: auto;
    left: 0
}

.section-oferta[class].reverse .hero {
    left: auto;
    height: 89.9%
}

@media (max-width: 980px) and (orientation: portrait) {
    .section-oferta[class].reverse .hero {
        height: 105%
    }
}

@keyframes c {
    50% {
        translate: 1rem .7rem
    }
    0% {
        translate: 0
    }
}

#case-study {
    background: #0d1528 url(../img/blok_2/bg.webp?v=202501161048) 50%/cover;
    overflow: hidden
}

#case-study .slider-wrap {
    position: relative
}

#case-study h2 {
    font-size: 8.7rem;
    font-weight: 900;
    line-height: .9;
    color: #fff;
    letter-spacing: -.05rem
}

@media (min-width: 980px) or (orientation: landscape) {
    #case-study h2 {
        padding-left: 7rem
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #case-study h2 {
        margin-top: -.5rem
    }
}

#case-study .case-study-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 4rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #case-study .case-study-slider {
        width: 75%;
        overflow: visible
    }
}

#case-study .case-study-slider .swiper-slide {
    width: 32.75rem;
    height: 56.5rem;
    position: relative;
    background: #142c65 none 50%/cover;
    color: #fff;
    border-radius: 2.5rem
}

#case-study .case-study-slider .swiper-slide:hover .hover {
    opacity: 1
}

#case-study .case-study-slider .swiper-slide p {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.25rem;
    padding: 1rem;
    border-radius: 0 0 2.6rem 2.6rem;
    color: #000
}

@media (max-width: 980px) and (orientation: portrait) {
    #case-study .case-study-slider .swiper-slide p {
        font-size: 1.4rem
    }
}

#case-study .case-study-slider .swiper-slide p.bg-purple {
    background: #6f50ae;
    color: #fff
}

#case-study .case-study-slider .swiper-slide p.bg-orange {
    background: #ec7107;
    color: #fff
}

#case-study .case-study-slider .swiper-slide p.bg-magento {
    color: #fff;
    background: #e7017f
}

#case-study .case-study-slider .hover {
    opacity: 0;
    height: 100%;
    padding: 4.5rem;
    border-radius: inherit;
    background: rgba(20, 44, 101, .85);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity .3s linear;
    gap: 1.5rem;
    pointer-events: none;
    position: relative;
    z-index: 1
}

#case-study .case-study-slider .hover:not(.with-link) {
    padding-bottom: 12rem
}

#case-study .case-study-slider .hover div span {
    font-size: 1.8rem;
    font-weight: 400;
    display: block
}

#case-study .case-study-slider .hover div strong {
    font-weight: 800;
    font-size: 5.5rem;
    display: block;
    line-height: 1
}

#case-study .case-study-slider .hover img {
    height: 50%;
    object-fit: contain
}

#case-study .case-study-slider .hover .btn-link {
    text-align: right;
    margin-top: 3rem;
    pointer-events: auto
}

@media (min-width: 980px) or (orientation: landscape) {
    #logo {
        padding-bottom: 0
    }
}

#news {
    height: 99.75rem
}

@media (max-width: 980px) and (orientation: portrait) {
    #news {
        height: auto
    }

    #news .container-1_2 {
        padding: 0 0 9rem
    }
}

#news .container-3 {
    position: relative
}

.news-photos {
    pointer-events: none
}

@media (max-width: 980px) and (orientation: portrait) {
    .news-photos {
        width: 93%;
        position: relative;
        height: 70rem
    }
}

.news-photos img {
    position: absolute;
    width: 34.4rem;
    height: 34.4rem;
    top: -31%;
    background: #ec7107;
    right: 0;
    box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, .6)
}

@media (max-width: 980px) and (orientation: portrait) {
    .news-photos img {
        width: 30rem;
        height: 30rem;
        top: -4%
    }
}

.news-photos .news-photo-1 {
    transform: translate(-70%)
}

.news-photos .news-photo-2 {
    transform: translateY(45%);
    z-index: 1;
    box-shadow: 1.2rem 1.2rem 5rem rgba(0, 0, 0, .6)
}

.news-photos .news-photo-3 {
    transform: translate(-40%, 113%)
}

@media (min-width: 980px) or (orientation: landscape) {
    #kontakt {
        background: #afb0a8 url(../img/blok_10/hero.webp?v=202501161048) 50%/cover no-repeat
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    #kontakt {
        padding-bottom: 50rem;
        background: url(../img/blok_10/hero.webp?v=202501161048) 100% bottom/auto 35% no-repeat, linear-gradient(90deg, #cbccc5, #e3e3e1)
    }
}

#kontakt h2 {
    font-size: 4.1rem;
    font-weight: 900;
    line-height: 1.32;
    color: #000
}

#kontakt a:not(.btn) {
    color: #ec7107
}

#kontakt .form {
    background: #fff;
    border-radius: 2.5rem;
    padding: 4rem 5rem;
    font-size: 2rem;
    box-shadow: 0 0 .8rem rgba(0, 0, 0, .1)
}

@media (min-width: 980px) or (orientation: landscape) {
    #kontakt .form {
        max-width: 53.75rem
    }
}

#kontakt .form input, #kontakt .form select, #kontakt .form textarea {
    color: #000
}

#kontakt .form ::placeholder {
    opacity: 1
}

@media (max-width: 980px) and (orientation: portrait) {
    .slide {
        flex: 0 0 auto
    }
}

footer {
    background: #f1f1f1;
    padding: 5.5rem 0;
    color: #6b6b6b
}

footer .col-2 h3 {
    font-size: 1.8rem
}

footer .col-2 img {
    height: 5rem;
    margin: 1.2rem 0
}

@media (max-width: 980px) and (orientation: portrait) {
    footer .col-2 {
        flex-direction: column;
        gap: 3rem;
        align-items: flex-start
    }
}

footer .icons {
    gap: 2rem;
    display: flex
}

footer .col-4 {
    margin-top: 5.5rem;
    font-size: 1.8rem
}

footer .col-4 strong {
    font-weight: 700
}

@media (max-width: 980px) and (orientation: portrait) {
    footer .col-4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem
    }
}