@font-face {
    font-family: 'Satoshi';
    src: url('./fonts/Satoshi-Variable.ttf') format("truetype"),
         url('./fonts/Satoshi-VariableItalic.ttf') format("truetype");
}

@font-face {
    font-family: "Cabinet Grotesk";
    src: url('./fonts/CabinetGrotesk-Variable.ttf') format("truetype");
}

:root {
    --font-family: "Satoshi", sans-serif;
    --second-family: "Cabinet Grotesk", sans-serif;
    --third-family: "Helvetica Neue", sans-serif;
    --font3: "Inter", sans-serif;
    --orange: #ff4500;
    --gray: #6b6b6b;
    --dark: #333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    
}

main {
    background: #fafafa;
}

header {
    font-family: var(--second-family);
    background: #fafafa;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 50px 0 103px 0px;
    position: sticky;
    z-index: 1001;
    top: 0;
}

.hwrap {
    width: 90%;
    max-height: 70px;
    padding: 20px 0;
    max-width: 1680px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hcon {
    width: 90%;
    border: 2px solid #d8d8d8;
    border-radius: 15px;
    padding: 0 25px;
    gap: 20px;
    backdrop-filter: blur(40px);
    background: rgba(255, 255, 255, 0.5);
    height: 70px;
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    flex-grow: 1;
    height: 60px;
}

.navlink {
    display: flex;
    list-style: none;
    margin: 0 auto; 
    padding: 0;
    gap: 100px;
}

.navlink a {
    text-decoration: none;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.navlink a:hover {
    color: #ff4500;
}

.submenu {
    opacity: 0;        
    visibility: hidden;   
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px); 
    top: 100%;
    backdrop-filter: blur(40px);
    background: #434c61;
    width: 241px;
    height: 315px;
    list-style: none;
    padding: 20px 0;
    border-radius: 15px;
    z-index: 999;
    transition: all 0.3s ease-in-out;   
    flex-direction: column;
    display: flex;
    justify-content: center;
    gap: 10px;           
}

.submenu li a {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    text-align: center;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
}


.submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


.navlink li.dropdown:hover .submenu {
    opacity: 0.8;           
    visibility: visible; 
    transform: translateX(-50%) translateY(0);
}

.navlink li.dropdown {
    position: relative;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    z-index: 1002;
}

.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #151414;
    transition: all 0.3s ease;
}

.menu-contact-item {
    display: none;
}

.przyciskheadear {
    backdrop-filter: blur(40px);
    background: #ff3d00;
    gap: 15px;
    width: 263px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 23px 75px 23px 80px;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
}

.przyciskheadear:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(216, 85, 3, 0.3);
    background-color: #b92e03;
}

.mobile-contact {
    display: none;
}

.gora {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gorawrapp {
    width: 90%;
    max-width: 1681px;
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.goracon {
    width: 100%;

}

.goracon h1 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 80px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff3d00;
    padding-bottom: 30px;
}

.goracon h2 {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 49px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #151414;
    opacity: 0.7;
    padding-bottom: 30px;
}

.goratext {
    max-width: 1500px;
}

.text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}


#rozwin {
    font-weight: 700;
    color: #ff3d00;
    opacity: 0.8;
    padding-bottom: 30px;
    padding-top: 30px;
    display: inline-block;
}

#rozwin:hover {
    cursor: pointer;
}

.gora2 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 103px;
}

.gora2con {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.gora2vid {
    position: relative;
    width: 100%;
    height: 500px;
    max-height: 553px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    justify-content: flex-end;
}

.mainvideo {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    z-index: 1;
    position: absolute;
}

.przyciskvideo {
    position: relative;
    top: 0;
    right: 0;
    width: 600px;
    height: 60px;
    background-color: white;
    border-bottom-left-radius: 25px;
    display: flex; 
    align-items: center;
    justify-content: center;
    padding: 10px 10px 10px 10px;
    z-index: 10;
}

.leftcorner {
    position: absolute;
    width: 14px;
    height: 17px;
    border-top-right-radius: 25px;
    border-right: 6px solid white;
    border-top: 6px solid white;
    left: -9px;
    top: -6px;
}
.rightcorner {
    position: absolute;
    width: 14px;
    height: 17px;
    border-top-right-radius: 25px;
    border-right: 6px solid white;
    border-top: 6px solid white;
    right: -6px;
    top: 55px;
}

.gora2przycisk {
    position: absolute;
    width: 98.5%;
    top: 0;
    right: 0;
    background-color: var(--orange);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px; 
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.gora2przycisk:hover {
    background-color: #e63e00;
}

.korzysci {
    display: flex;
    justify-content: center;
    width: 100%;
}

.kwrapp {
    width: 90%;
    max-width: 1681px;
    display: flex;
    justify-content: center;
}

.kcon {
    display: flex;
    width: 100%;
    gap: 50px;
    align-items: flex-end;
}

.kcon h2 {
   font-family: var(--font-family);
    font-weight: 500;
    font-size: 68px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff3d00; 
}

.kcon h3 {
    font-weight: 400;
    font-size: 38px;
    color: #151414;
    text-transform: uppercase;
}

.ktekst {
    display: flex;
    flex-direction: column;
}

.ktbl {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.lewo {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.kblok {
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 0px 35px;
    width: 702px;
    height: 89px;
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.2);
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s;
}

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

.prawo {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    border-radius: 20px;
    padding: 0;
    margin-top: auto;
    max-width: 957px;
}

.zdjecie {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.tekst {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    padding: 60px;
}

.tekst p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

.tekst #czytajwiecej {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}


.tekst #czytajwicejprzycisk {
    font-weight: 700;
}

#czytajwicejprzycisk {
    font-weight: 700;
    color: #000000;
    opacity: 0.8;
    padding-bottom: 30px;
    padding-top: 30px;
}

#czytajwicejprzycisk:hover {
    cursor: pointer;
}

.przenosnie {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 216px;
}

.pwrapp {
    width: 90%;
    max-width: 1681px;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.pzdjecie {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: relative;
}

.ptekst {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    padding: 60px;
    max-width: 937px;
    display: flex;
    flex-direction: column;
}

.ptekst h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 68px;
    line-height: 120%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}

.ptekst h3 {
    font-weight: 400;
    font-size: 38px;
    text-transform: uppercase;
    color: #fff;
}

.ptekst p {
    font-family: var(--font-family);
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #fff;
}

.pprzycisk {
    border-radius: 10px;
    padding: 23px;
    width: 100%;
    max-width: 401px;
    height: 100%;
    max-height: 70px;
    backdrop-filter: blur(40px);
    background: #ff3d00;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #f0e8e6;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pprzycisk:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(216, 85, 3, 0.3);
    background-color: #b92e03;
}

.pltel {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 103px;
}

.pltelzdj {
    width: 100%;
    max-width: 1681px;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
}

.opinie {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 216px 0;
}

.owrapp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1681px;
}

.ocon {
    display: flex;
    gap: 30px;
    justify-content: center;
    width: 100%;
}

.olewo {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 759px;
    width: 50%;
    gap: 15px;
}

.olbloki {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: 20px;
}

.olblok {
    border-radius: 15px;
    padding: 50px;
    width: 100%;
    max-width: 759px;
    height: 150px;
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.1);
    padding: 60px;
    background: #fff;
    gap: 15px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}
.olblok:hover {
    transform: translateX(-5px);
}

.olblok p{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.05em;
    color: #000;
}

.olblok span {
    color: var(--orange);
    font-weight: 700;
    font-size: 30px;
}

.oprawo {
    width: 50%;
    margin: 0;
    max-width: 842px;
    mask-image: linear-gradient(to right, black 80%, transparent 100%)
}

.oprawo .swiper {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.oprawo .swiper-slide {
    border: 2px solid #d4d4d4;
    border-radius: 15px;
    padding: 0px 50px;
    width: 100%;
    height: 489px;
    gap: 30px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.oprawo .swiper-slide .swiper-dane {
    text-align: center;
}

.oprawo .swiper-slide .swiper-dane .data {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.7;
}

.oprawo .swiper-slide .swiper-dane .dane {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0.05em;
    color: #151414;
}

.oprawo .swiper-slide .swiper-tresc .tresc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    line-height: 160%;
    letter-spacing: 0.05em;
    text-align: center;
    color: #000;
    opacity: 0.8;
}

.oprawo .swiper-slide .opiniaz {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.oprawo .swiper-slide .opiniaz .opiniazsvg {
    display: flex;
    align-items: center;
}

.oprawo .swiper-slide .opiniaz .opiniazlink a {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.05em;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #ff3d00;

}

.system {
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
    margin-top: 216px;
}

.system .con {
    max-width: 1681px;
    margin: 0 auto;
}

.system .con-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 90px;
}

.system .text-wrapper h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 68px;
    line-height: 150%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff3d00;
}

.system .text-wrapper h3 {
    font-weight: 400;
    font-size: 38px;
    color: #151414;
}

.system .tresc-wrapper {
    padding: 10px;
    max-width: 972px;
}

.system .tresc-wrapper p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 17px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #151414;
}

.system .tresc-wrapper span {
    font-weight: 700;
}

.system .con-wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
}

.system .dashboard {
  width: 100%;
  max-width: 1113px;
}

.system .dashboard img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.prawo-lista {
    width: 100%;
    max-width: 547px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.prawo-element {
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.05);
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s;
}

.prawo-element:hover {
    transform: translateX(5px);
}

.prawo-element .icon {
    border-radius: 5px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
}

.prawo-element .prawo-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.05em;
    opacity: 0.8;
    color: #151414;
}

.funckje {
    margin-top: 216px;
    background: #fafafa;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    
}

.funkcjewrapper {
    width: 90%;
    max-width: 1681px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.funckjetext {
    display: flex;
    margin-bottom: 40px;
}

.funckje h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 30px;
    line-height: 150%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff3d00;
    margin: 0;
}

.funckjecon {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start;
    align-items:  center;
}

.fkarta {
    background: #fff;
    width: calc(33.33% - 40px);
    max-width: 547px;
    height: 274px;
    padding: 25px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.fkarta:hover {
  transform: translateY(-5px);
}

.fkartahead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.icon-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--orange);
  width: 60px;
  height: 60px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 16px;
}

.icon-wrapper {
  width: 90px;
  height: 90px;
}

.fkartatittle {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    width: 100%;
    max-width: 418px;
    letter-spacing: 0.02em;
    color: #ff3d00;
}

.fkarttresc {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 15px;
    line-height: 140%;
    width: 100%;
    max-width: 418px;
    letter-spacing: 0.02em;
    color: #151414;
}

.dodatkowe {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 216px;
}

.dodatkowewrap {
    width: 90%;
    max-width: 1681px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dodatkowe .tittletekst {
    width: 100%;
    max-width: 616px;
}

.dodatkowe .tittletekst p {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #434c61;
}

.dodatkowe .tittletekst h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #ff3d00;
}

.dodatkowe .dodbloki {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.dodatkowe .dodblok {
    border-radius: 10px;
    padding: 40px 43px;
    width: 546px;
    height: 250px;
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.75);
    width: calc(33.33% - 20px);
    text-align: center;
    transition: all 0.3s ease;
}

.dodatkowe .dodblok:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.1);
}

.korzysci1 {
    margin-top: 216px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.korzysci1 .kowrap {
    display: flex;
    width: 90%;
    max-width: 1681px;
    max-height: 542px;
    gap: 30px;
}

.korzysci1 .kolewo {
    background: #fff;
    padding: 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
}

.korzysci1 .koletittle h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 68px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff3d00;
}

.korzysci1 .koletittle p {
    font-weight: 400;
    font-size: 38px;
    color: #151414;
    text-transform: uppercase;
}

.korzysci1 .koletresc {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #151414;
    max-width: 790px;
}

.korzysci1 .ko-btn {
    display: inline-block;
    background-color: var(--orange);
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: bold;
    width: fit-content;
    transition: 0.3s;
}

.korzysci1 .ko-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(216, 85, 3, 0.3);
    background-color: #b92e03;
}

.korzysci1 .koprawo {
    border: 2px solid var(--orange);
    border-radius: 15px;
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 666px;
}

.koprawo .mySwiperKo {
    width: 100%;
    height: 100%;
}

.koprawo .swiper-slide {
    border-radius: 15px;
    padding: 0px 50px;
    width: 100%;
    height: 489px;
    gap: 30px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.koprawo .swiper-tittle {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 35px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #ff3d00;
}

.koprawo .swiper-tresc {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 17px;
    line-height: 160%;
    letter-spacing: 0.02em;
    text-align: center;
    color: #ff3d00;
    opacity: 0.8;
}

.swiper-pagination {
   bottom: -5px !important;
}

.swiper-pagination-bullet {
    background: transparent !important;
    border: 1px solid var(--orange) !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background: var(--orange) !important;
}

.blog {
  margin-top: 216px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blogwrapper {
    width: 90%;
    max-width: 1681px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.blog-header h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 68px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff3d00;
}

.blog-header p {
    font-weight: 400;
    font-size: 38px;
    color: #151414;
}


.blogcon {
    display: flex;
    gap: 30px; 
    justify-content: center;
}


.blogc {
    background: white;
    border-radius: 25px;
    overflow: hidden;
    gap: 10px;
    display: flex;
    flex-direction: column;
    width: 548px;
    height: 760px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.blogc:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.card-image {
    padding: 20px;
}

.card-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.ccon {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 30px; 
    height: 100%;
}

.cdate {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff3d00;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctitle {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #151414;
}

.ctext {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 143%;
    letter-spacing: 0.01em;
    color: #151414;
    opacity: 0.7;
}


.cfooter {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  padding-top: 15px;
  font-size: 0.75rem;
  color: #999;
}

.cfooter span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onas {
    margin-top: 216px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.onas .onaswrapper {
    width: 90%;
    max-width: 1681px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.onas .onaslewo {
    width: 100%;
    max-width: 688px;
}

.onas .onasprawo {
    border-radius: 15px;
    padding: 50px;
    width: 972px;
    height: 555px;
    box-shadow: 0 5px 50px 0 rgba(0, 0, 0, 0.05);
    background: #fff;  
    display: flex; 
    flex-direction: column;
    gap: 140px;
}

.onas .onasprawo .onastext {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.onas .onasprawo h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 36px;
    line-height: 120%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #151414;
}
.onas .onasprawo span {
    color: #ff3d00;
}

.onas .onasprawo p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #151414;
    opacity: 0.8;
}

.onas .onasprawo a {
    display: flex;
    border-radius: 10px;
    padding: 23px;
    width: 401px;
    height: 70px;
    backdrop-filter: blur(40px);
    background: #ff3d00;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #f0e8e6;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.onas .onasprawo a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(216, 85, 3, 0.3);
    background-color: #b92e03;
}

.wycena {
    width: 100%;
    display: flex;  
    justify-content: center;
    margin-top: 216px;
}

.wycena .wycenawrapper {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1681px;
    gap: 80px;
}

.wycena .wycenatittle h3{
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 56px;
    line-height: 120%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #151414;
}

.wycena .wycenatittle span {
    color: #ff3d00;
}

.wycena .wycenaformularz {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wycena .wycenaformularz form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wycena .wycenaformularz input{
    border: 1px solid rgba(21, 20, 20, 0.25);
    border-radius: 15px;
    padding: 28px 30px;
    width: 100%;
    max-width: 1680px;
    height: 80px;
    transition: all 0.3s ease;
}

.wycena .wycenaformularz input:hover{
    border-color: var(--orange);
    box-shadow: 0 0 10px rgba(227, 142, 5, 0.2);
    transform: translateY(-2px);
}

.wycena .wycenaformularz input:focus {
    outline: none;
    border-color: var(--orange);
}

.wycena .wycenaformularz a {
    border-radius: 10px;
    padding: 23px;
    width: 401px;
    height: 70px;
    backdrop-filter: blur(40px);
    background: #ff3d00;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #f0e8e6;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.wycena .wycenaformularz a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(216, 85, 3, 0.3);
    background-color: #b92e03;
}

.kontaktbezposredni {
    padding-top: 216px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.kontaktbezposredni .kontaktbezwrapper {
    width: 90%;
    max-width: 1681px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
}

.kontaktbezposredni .konaktbeztittle h3 {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 36px;
    line-height: 120%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #151414;
}

.kontaktbezposredni .konaktbeztittle span {
    color: #ff3d00;
}

.kontaktbezposredni .kontaktbezsociale {
    width: 100%;
    display: flex;
    gap: 90px;
}

.kontaktbezposredni .kontaktbezsociale .przyciskik {
    display: flex;
    width: 50%;
    gap: 20px;
}

.kontaktbezposredni .kontaktbezsociale .ikonkik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    gap: 20px;
}

.kontaktbezposredni .kontaktbezsociale .przyciskpom {
    border-radius: 10px;
    padding: 23px ;
    width: 401px;
    height: 70px;
    backdrop-filter: blur(40px);
    background: #ff3d00;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #f0e8e6;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.kontaktbezposredni .kontaktbezsociale .przyciskpom:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(216, 85, 3, 0.3);
    background-color: #b92e03;
}

.takao {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 216px;
}

.takao .takaowrapper {
    width: 90%;
    max-width: 1681px;
    display: flex;
    justify-content: center;
}

.takao .takotext {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.takao .takotext p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

.takao .takotext #odkryj {
    font-weight: 700;
    color: #ff3d00;
    cursor: pointer;
}

footer {
    background: #eee;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 216px;
}

footer .footerwrapper {
    width: 80%;
    max-width: 1681px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer .logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 50px;
}

footer .collewo {
    width: 50%;
    padding-top: 50px;
}

footer .collewo .footercol {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

footer .collewo .footercol iframe {
    border-radius: 20px;
}

footer .collewo .footercol p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

footer .colprawo {
    width: 50%;
    display: flex;
    justify-content: center;
    padding-top: 50px;
    gap: 40px;
}

footer .colprawo .footercol {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 10px;
}

footer .colprawo .footercolnw {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

footer .colprawo .footercol h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: #151414;
}

footer .colprawo .footercol p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

footer .colprawo .footercol a {
    text-decoration: none;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

footer .colprawo .footercol ul {
    list-style: none;
    gap: 10px;
}

footer .colprawo .footercolnw h3  {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: #151414;
}

footer .colprawo .footercolnw p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

footer .colprawo .footercolnw a {
    text-decoration: none;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

footer .colprawo .footercolnw input {
    padding: 14px;
    border: none;
    background: #e0e0e0;
    border-radius: 15px;
    outline: none;  
    width: 100%;
    position: relative;
}

footer .colprawo .footercolnw button {
    background-color: #ff3d00; 
    color: white;
    border: none;
    padding: 10px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    width: 5%;
    right: 180px;
}

footer .footerbot {
    margin-top: 100px;
}

footer .footerbot p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #151414;
    opacity: 0.8;
}

footer .footerbot .snws {
    text-decoration: none;
    color: #151414;
    text-decoration: underline;
}

/* Responsywka */
@media (max-width: 1024px) {
    /*Header I burger */
    header {
        padding: 20px 0;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        display: flex;
    }

    .hwrap {
        width: 90%;
        display: flex;
        justify-content: center;
    }

    .hcon {
        width: 100%;
        height: 70px;
        display: grid; 
        grid-template-columns: 1fr auto 1fr; 
        align-items: center;
        padding: 20px 20px;
        position: relative;
        box-sizing: border-box; 
        overflow: visible; 
        z-index: 1002;
    }

    .navlink {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        position: absolute;
        top: 100%; 
        right: 0;   
        left: auto; 
        width: 260px; 
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        border: 2px solid #d8d8d8;
        border-radius: 15px; 
        margin-top: 10px; 
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease-in-out;
        z-index: 1000;
    }

    .navlink.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .navlink li {
        width: 100%;
        text-align: right; 
    }

    .logo {
        justify-self: start;
        display: flex;
        align-items: center;
    }

    .logo svg {
        width: 110px;
        height: auto;
    }


    .mobile-contact {
        display: none;
    }

    .mobile-contact a {
        color: white;
        text-decoration: none;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .menu-contact-item {
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
        display: block;
    }

    .menu-mobile-contact {

        background: #ff3d00 !important;
        color: white !important;
        text-align: center !important;
        border-radius: 8px;
        font-weight: bold;
        padding: 12px !important;
    }

    .przyciskheadear {
        display: none;
    }

    .hamburger {
        grid-column: 3;
        justify-self: end;
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background: #151414;
        transition: 0.3s;
    }


    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    
/*Gora*/
    .goracon h1 {
        font-size: 38px; 
        padding-bottom: 15px;
        text-align: center;
    }

    .goracon h2 {
        font-size: 22px; 
        padding-bottom: 20px;
        text-align: center;
    }

    .goratext {
        max-width: 100%;
        text-align: center;
    }

    
    .text {
        font-size: 15px;
        line-height: 150%;
        margin-bottom: 10px;
        display: -webkit-box;
    }

    .rozwin {
        display: block; 
        cursor: pointer;
        font-size: 14px;
        padding-bottom: 40px;
    }

    .gora2 {
        padding-bottom: 50px; 
    }

    .gora2vid {
        height: auto;
        aspect-ratio: 16 / 9; 
        max-height: none;
    }

    .przyciskvideo {
        position: absolute;
        top: 0;
        right: 0;
        width: auto; 
        max-width: 80%; 
        height: auto;
        padding: 10px;
        background-color: white;
        border-bottom-left-radius: 20px;
        z-index: 10;
    }

    .gora2przycisk {
        position: relative; 
        display: block;
        width: 100%;
        font-size: 12px; 
        padding: 15px 25px;
        white-space: nowrap; 
        border-radius: 8px;
    }

    /* Korzysci */
    .kcon {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .ktekst {
        text-align: center;
        align-items: center;
    }

    .kcon h2 {
        font-size: 48px; 
    }

    .kcon h3 {
        font-size: 28px;
    }
    
    .ktbl {
        width: 100%;
        gap: 40px;
    }

    .kblok {
        width: 100%;      
        max-width: 100%;  
        height: auto;     
        padding: 20px;    
        box-sizing: border-box;
    }

    .prawo {
        max-width: 100%;
        margin-top: 20px;
    }

    .zdjecie {
        overflow: visible; 
        display: flex;
        flex-direction: column;
    }

    .zdjecie img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }
    /* Przenosnie */
    .przenosnie {
        padding-top: 60px;
    }

    .pzdjecie {
        display: flex;
        flex-direction: column;
        background: #151414; 
        overflow: hidden;
    }

    .pzdjecie img {
        display: none;
    }

    .pltel {
        display: none;
    }

    .ptekst {
        position: relative;
        padding: 40px 20px;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

    .ptekst h2 {
        font-size: 42px;
    }

    .ptekst h3 {
        font-size: 24px;
    }

    .ptekst p {
        font-size: 15px;
        padding: 20px 0;
    }
    
    .pprzycisk {
        max-width: 100%;
        padding: 20px;
    }
    
    .pltel {
        position: relative;
        padding-bottom: 40px;
        margin-top: -50px; 
    }

    .pltelzdj {
        position: relative; 
        top: auto;
        left: auto;
    }

    .pltelzdj img {
        max-width: 80%; 
        height: auto;
    }

    /* Opinie */
    .opinie {
        padding: 80px 20px;
    }

    .ocon {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .olewo, 
    .oprawo {
        width: 100%;
    }

    .olblok {
        height: auto; 
        padding: 30px;
        flex-direction: column; 
        text-align: center;
    }

    .olblok p {
        font-size: 18px;
    }

    .olblok span {
        font-size: 24px;
    }

    .swiper-slide {
        height: auto; 
        padding: 40px 20px;
    }

    .swiper-slide .swiper-tresc .tresc {
        font-size: 14px; 
    }

    /* IDk SYSTEM */
    .system {
        margin-top: 80px; 
        padding: 0 20px;  
    }

    .system .con-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .system .text-wrapper h2 {
        font-size: 42px; 
        line-height: 120%;
    }

    .system .text-wrapper h3 {
        font-size: 28px; 
    }

    .system .tresc-wrapper {
        max-width: 100%; 
        padding: 0;
    }

    .system .con-wrapper {
        flex-direction: column; 
        gap: 40px;
    }

    .system .dashboard, 
    .prawo-lista {
        max-width: 100%; 
    }

    .prawo-element:hover {
        transform: none;
    }

    /* Funckjee */
    .funckje {
        margin-top: 100px; 
    }

    .funckje h2 {
        font-size: 26px; 
    }

    .fkarta {
        width: calc(50% - 15px); 
        height: auto; 
        min-height: 250px;
    }

    /* Dodatkowe cos */
    .dodatkowe {
        margin-top: 80px; 
    }

    .dodatkowewrap {
        width: 95%; 
        gap: 40px;
    }

    .dodatkowe .tittletekst {
        max-width: 100%;
        text-align: center;
    }

    .dodatkowe .tittletekst h3 {
        font-size: 26px; 
    }
    
    .dodatkowe .dodblok {
        width: calc(50% - 20px); 
        height: auto; 
        min-height: 200px;
        padding: 30px 20px;
    }

    /* korzysci */
    .korzysci1 {
        margin-top: 60px;
        width: 100%;
    }

    .korzysci1 .kowrap {
        flex-direction: column;
        width: 100%;
        max-width: 100vw; 
        max-height: none;
        gap: 20px;
        padding: 0 15px; 
        box-sizing: border-box;
    }

    .korzysci1 .kolewo {
        width: 100%;
        padding: 30px 20px;
        gap: 30px;
        box-sizing: border-box;
    }

    .korzysci1 .koletittle h3 {
        font-size: 32px; 
        overflow-wrap: break-word; 
    }

    .korzysci1 .koletittle p {
        font-size: 20px;
    }

    .korzysci1 .koletresc {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.5;
    }

    .korzysci1 .koprawo {
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
    }

  
    .korzysci1 .koprawo .mySwiperKo {
        width: 100%;
    }

    .korzysci1 .koprawo .swiper-slide {
        width: 100% !important;
        height: auto;
        min-height: 300px;
        padding: 20px;
        box-sizing: border-box;
    }

    /* BLOG */
    .blog {
        margin-top: 80px;
    }

    .blog-header h2 {
        font-size: 42px;
        line-height: 120%;
    }

    .blog-header p {
        font-size: 24px;
    }

    .blogcon {
        flex-direction: column;
        align-items: center;

    }

    .blogc {
        width: 100%;
        max-width: 600px;
        height: auto;   
        padding-bottom: 20px;
    }

    .card-image img {
        height: 250px;
    }

    .ccon {
        gap: 15px;
    }

    .ctitle {
        font-size: 18px;
    }

    .ctext {
        font-size: 15px;
    }

    /* O nas */
    .onas {
        margin-top: 100px;
        flex-direction: column; 
        align-items: center;
    }

    .onas .onaswrapper {
        flex-direction: column; 
        align-items: center;
        width: 95%;
    }

    .onas .onaslewo {
        max-width: 100%; 
    }

    .onas .onaslewo img {
        width: 100%;
    }

    .onas .onasprawo {
        width: 100%; 
        height: auto; 
        padding: 30px; 
        gap: 40px; 
    }

    .onas .onasprawo h3 {
        font-size: 28px;
    }

    .onas .onasprawo a {
        width: 100%; 
        max-width: 401px;
        height: 60px; 
        font-size: 18px;
    }
    
    /* Wycena */
    .wycena {
        margin-top: 80px; 
    }

    .wycena .wycenawrapper {
        gap: 40px; 
    }

    .wycena .wycenatittle h3 {
        font-size: 32px; 
        text-align: center;
    }

    .wycena .wycenaformularz input {
        width: 100%; 
        max-width: 100%; 
        height: 60px;
        padding: 15px 20px;
        font-size: 16px;
    }

    .wycena .wycenaformularz a {
        width: 100%;
        max-width: 350px;
        height: 60px;
        font-size: 18px;
    }
    
    /* KontaktBezPosredni */
    .kontaktbezposredni {
        padding-top: 100px; 
    }

    .kontaktbezposredni .kontaktbezwrapper {
        gap: 40px;
    }

    .kontaktbezposredni .konaktbeztittle h3 {
        font-size: 28px; 
    }

    .kontaktbezposredni .kontaktbezsociale {
        flex-direction: column;
        gap: 40px;
    }

    .kontaktbezposredni .kontaktbezsociale .przyciskik {
        width: 100%; 
        justify-content: center;
        flex-wrap: wrap; 
    }
    .kontaktbezposredni .kontaktbezsociale .ikonkik {
        width: 100%; 
        flex-wrap: wrap; 
    }

    .kontaktbezposredni .kontaktbezsociale .przyciskpom {
        width: 100%;
        max-width: 350px;
        font-size: 18px;
        padding: 15px;
        height: auto;
        min-height: 60px;
    }

    /* Takao */
    .takao {
        padding-top: 100px; 
    }

    .takao .takaowrapper {
        width: 95%;
    }

    .takao .takotext {
        gap: 15px;
    }

    .takao .takotext p {
        font-size: 16px;
        line-height: 150%;
    }

    /* Footer */
    footer {
        margin-top: 80px; 
    }

    footer .footerwrapper {
        width: 90%;
        flex-direction: column;
    }

    footer .collewo, 
    footer .colprawo {
        width: 100%;
        padding-top: 30px;
    }

    footer .colprawo {
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
    }

    footer .colprawo .footercol,
    footer .colprawo .footercolnw {
        width: 100%; 
    }

    /* Mapa/Iframe */
    footer .collewo .footercol iframe {
        width: 100%;
        height: 300px;
    }

    footer .colprawo .footercolnw {
        position: relative; 
    }

    footer .colprawo .footercolnw button {
        position: static; 
        width: 100%;     
        margin-top: 10px;
        right: auto;     
    }

    footer .footerbot {
        margin-top: 50px;
        text-align: center; 
        padding-bottom: 30px;
    }
}

@media (max-width: 768px) {
    header {
        padding: 15px 0;
    }

    .hwrap {
        width: 95%; 
    }

    .hcon {
        height: 60px; 
        padding: 10px 15px;
    }

    .navlink {
        width: calc(100% - 30px); 
        right: 15px; 
        left: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
        padding: 25px; 
    }

    .navlink li {
        text-align: center; 
        padding: 10px 0;
    }

    .logo svg {
        width: 90px;
    }

    .menu-mobile-contact {
        padding: 15px !important;
        font-size: 16px;
        margin-top: 10px;
    }

    .hamburger {
        padding: 10px; 
        margin-right: -10px;
    }

    .hamburger span {
        width: 28px;
    }

    /* Gora */
    .goracon h1 {
        font-size: 28px; 
        padding-bottom: 12px;
        line-height: 1.2;
    }

    .goracon h2 {
        font-size: 18px; 
        padding-bottom: 15px;
    }

    .goratext {
        max-width: 100%;
        padding: 0 10px;
    }

    .text {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .rozwin {
        font-size: 13px;
        padding-bottom: 30px;
        font-weight: 600; 
    } 

    .gora2 {
        padding-bottom: 30px; 
    }

    .gora2vid {
        border-radius: 12px;
        overflow: hidden;
    }

    .przyciskvideo {
        max-width: 90%; 
        padding: 8px 12px;
        border-bottom-left-radius: 15px;
    }

    .gora2przycisk {
        font-size: 11px; 
        padding: 12px 20px;
        letter-spacing: 0.5px;
        text-transform: uppercase; 
    }

    .kcon {
        flex-direction: column;
        align-items: center;
        gap: 30px; 
        padding: 0 15px; 
    }

    .ktekst {
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .kcon h2 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .kcon h3 {
        font-size: 20px; 
        line-height: 1.3;
    }
    
    .ktbl {
        width: 100%;
        gap: 20px; 
        display: flex;
        flex-direction: column;
    }

    .kblok {
        width: 100%;      
        max-width: 100%;  
        height: auto;     
        padding: 15px;
        box-sizing: border-box;
    }

    .prawo {
        max-width: 100%;
        margin-top: 15px;
        order: 2; 
    }

    .zdjecie {
        overflow: visible; 
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .zdjecie img {
        width: 100%;
        height: auto;
        border-radius: 15px; 
        object-fit: cover;
    }

    /* Przenosnie cos */
    .przenosnie {
        padding-top: 40px; 
    }

    .pzdjecie {
        display: flex;
        flex-direction: column;
        background: #151414; 
        overflow: hidden;
        border-radius: 25px;
        margin: 0 10px; 
    }

    .pltel {
        display: flex;
        justify-content: center;
        position: relative;
        padding-bottom: 30px;
        margin-top: 0; 
    }

    .ptekst {
        position: relative;
        padding: 30px 15px;
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ptekst h2 {
        font-size: 30px; 
        line-height: 1.2;
    }

    .ptekst h3 {
        font-size: 18px;
        margin-top: 10px;
    }

    .ptekst p {
        font-size: 14px;
        line-height: 1.6;
        padding: 15px 0;
    }
    
    .pprzycisk {
        width: 100%; 
        max-width: 300px; 
        padding: 18px;
        font-size: 16px;
    }
    
    .pltelzdj img {
        max-width: 70%; 
        height: auto;
        margin: 0 auto;
    }

    /* Opinie */
    .opinie {
        padding: 50px 15px;
    }

    .ocon {
        flex-direction: column;
        align-items: center;
        gap: 30px; 
    }

    .olewo, 
    .oprawo {
        width: 100%;
    }

    .olblok {
        height: auto; 
        padding: 25px 20px;
        flex-direction: column; 
        text-align: center;
        border-radius: 20px;
    }

    .olblok p {
        font-size: 16px;
        line-height: 1.4;
    }

    .olblok span {
        font-size: 20px;
        font-weight: 700;
        margin-top: 5px;
    }

    .swiper-slide {
        height: auto; 
        padding: 30px 15px; 
        box-sizing: border-box;
    }

    .swiper-slide .swiper-tresc .tresc {
        font-size: 14px; 
        line-height: 1.6; 
        font-style: italic;
    }

    /* Systrem */
    .system {
        margin-top: 50px;
        padding: 0 15px;  
    }

    .system .con-header {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
        text-align: center;
    }

    .system .text-wrapper h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .system .text-wrapper h3 {
        font-size: 20px; 
    }

    .system .con-wrapper {
        flex-direction: column; 
        gap: 30px;
    }

    .prawo-element:hover {
        transform: none;
        background: inherit; 
    }

    /* Funkcje */
    .funckje {
        margin-top: 60px; 
    }

    .funckje h2 {
        font-size: 24px;
        text-align: center;
        padding: 0 10px;
    }

    .funckjecon {
        display: flex;
        justify-content: center;
    }

    .fkarta {
        width: 100%;
        max-width: 450px; 
        height: auto; 
        min-height: auto;
        padding: 25px;
    }

    /* Dodatkowe */
    .dodatkowe {
        margin-top: 50px; 
    }

    .dodatkowewrap {
        width: 100%; 
        padding: 0 15px;
        gap: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column; 
        align-items: center;
    }

    .dodatkowe .tittletekst {
        max-width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .dodatkowe .tittletekst h3 {
        font-size: 22px;
        line-height: 1.3;
    }
    
    .dodatkowe .dodblok {
        width: 100%; 
        max-width: 500px;
        height: auto; 
        min-height: 150px;
        padding: 25px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Korzysci */
    .korzysci1 {
        margin-top: 40px; 
        width: 100%;
    }

    .korzysci1 .kowrap {
        flex-direction: column;
        width: 100%;
        max-width: 100vw; 
        max-height: none;
        gap: 15px; 
        padding: 0 10px; 
        box-sizing: border-box;
    }

    .korzysci1 .kolewo {
        width: 100%;
        padding: 25px 15px;
        gap: 20px;
        box-sizing: border-box;
        text-align: center; 
    }

    .korzysci1 .koletittle h3 {
        font-size: 26px;
        line-height: 1.2;
        overflow-wrap: break-word; 
    }

    .korzysci1 .koletittle p {
        font-size: 18px; 
        margin-top: 5px;
    }

    .korzysci1 .koletresc {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6; 
    }

    .korzysci1 .koprawo {
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }

    .korzysci1 .koprawo .mySwiperKo {
        width: 100%;
    }

    .korzysci1 .koprawo .swiper-slide {
        width: 100% !important;
        height: auto;
        min-height: 250px; 
        padding: 20px;
        box-sizing: border-box;
        border-radius: 15px; 
    }

    /* Blog */
    .blog {
        margin-top: 50px; 
        padding: 0 15px;
    }

    .blog-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .blog-header h2 {
        font-size: 30px; 
        line-height: 1.2;
    }

    .blog-header p {
        font-size: 18px; 
        margin-top: 10px;
    }

    .blogcon {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .blogc {
        width: 100%;
        max-width: 100%;
        height: auto;   
        padding-bottom: 15px;
        border-bottom: 1px solid #eee; 
    }

    .card-image img {
        height: 200px;
        width: 100%;
        object-fit: cover;
        border-radius: 12px;
    }

    .ccon {
        gap: 12px;
        padding-top: 15px;
    }

    .ctitle {
        font-size: 18px;
        line-height: 1.3;
        font-weight: 700;
    }

    .ctext {
        font-size: 14px;
        line-height: 1.5;
    }

    /* O nas */
    .onas {
        margin-top: 60px; 
        flex-direction: column; 
        align-items: center;
        padding: 0 15px; 
    }

    .onas .onaswrapper {
        flex-direction: column; 
        align-items: center;
        width: 100%;
        gap: 30px;
    }

    .onas .onaslewo {
        max-width: 100%; 
        order: 1; 
    }

    .onas .onaslewo img {
        width: 100%;
        height: auto;
        border-radius: 15px; 
    }

    .onas .onasprawo {
        width: 100%; 
        height: auto; 
        padding: 20px 0; 
        gap: 25px; 
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 2;
    }

    .onas .onasprawo h3 {
        font-size: 24px; 
        line-height: 1.3;
    }

    .onas .onasprawo a {
        width: 100%; 
        max-width: 320px;
        height: 55px; 
        font-size: 16px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Wycena */
    .wycena {
        margin-top: 50px; 
        padding: 0 15px; 
    }

    .wycena .wycenawrapper {
        gap: 30px; 
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .wycena .wycenatittle h3 {
        font-size: 26px;
        line-height: 1.3;
        text-align: center;
    }

    .wycena .wycenaformularz {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; 
    }

    .wycena .wycenaformularz input {
        width: 100%; 
        max-width: 100%; 
        height: 55px;
        padding: 12px 15px;
        font-size: 16px; 
        border-radius: 10px; 
    }

    .wycena .wycenaformularz a {
        width: 100%;
        max-width: 100%; 
        height: 60px;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

    /* Kontaktbez */
    .kontaktbezposredni {
        padding-top: 60px;
    }

    .kontaktbezposredni .kontaktbezwrapper {
        gap: 30px;
        padding: 0 15px;
    }

    .kontaktbezposredni .konaktbeztittle h3 {
        font-size: 24px; 
        text-align: center;
    }

    .kontaktbezposredni .kontaktbezsociale {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .kontaktbezposredni .kontaktbezsociale .przyciskik,
    .kontaktbezposredni .kontaktbezsociale .ikonkik {
        width: 100%; 
        justify-content: center;
        flex-wrap: wrap; 
        gap: 15px; 
    }

    .kontaktbezposredni .kontaktbezsociale .przyciskpom {
        width: 100%;
        max-width: 100%; 
        font-size: 16px;
        padding: 18px; 
        height: auto;
        min-height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Takao */
    .takao {
        padding-top: 60px; 
        padding-bottom: 40px;
    }

    .takao .takaowrapper {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .takao .takotext {
        gap: 10px;
        text-align: center; 
    }

    .takao .takotext p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Footer */
    footer {
        margin-top: 50px;
    }

    footer .footerwrapper {
        width: 95%; 
        flex-direction: column;
        align-items: center;
        gap: 0; 
    }

    footer .collewo, 
    footer .colprawo {
        width: 100%;
        padding-top: 20px;
    }

    footer .colprawo {
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
        text-align: center;
    }

    footer .colprawo .footercol,
    footer .colprawo .footercolnw {
        width: 100%; 
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    footer .collewo .footercol iframe {
        width: 100%;
        height: 250px; 
        border-radius: 15px;
    }

    footer .colprawo .footercolnw {
        position: relative; 
        width: 100%;
    }

    footer .colprawo .footercolnw button {
        position: static; 
        width: 100%;     
        height: 55px;
        margin-top: 15px;
        right: auto;
        border-radius: 8px;
    }

    footer .footerbot {
        margin-top: 40px;
        text-align: center; 
        padding: 20px 10px 30px 10px;
        border-top: 1px solid #eee; 
        font-size: 13px;
    }
}