body {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    #max-width:100vw;
    overflow-x: hidden;
}

.top_page {
    #height: 100vh;
    width: 100%;
    background-image: url("/static/images/tlo_www_tylko_belka.png");
    #background-attachment: fixed;
    background-repeat:no-repeat;
    background-size: 100% auto;
    min-width: 300px;
    #height: clamp(400px, 100vh, 100000px);
    display: flex;
    flex-direction: column;
    align-items: left;
    #background-color: red;
    #overflow: hidden;
    max-width:100vw;

}

.mobile {
display: none;
}

.desktop {
height: 100%;
}

.top-margin {
    #height: 5vh;
    #background-color: yellow;
    width: 100%;
    min-width: 300px;
    min-height: 15px;
}

.center-content {
    #background-color: orange;
    display: flex;
    flex-direction: raw;
    align-items: left;
}

.left-margin {
    #background-color: blue;
    #width: 5%;
    #height: clamp(160px, 80vh, 100000px);
}

.language-dropdown {
flex-basis: auto;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin-left: 3.5%;

}

.language-toggle {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.language-toggle .flag {
  display: block;
  width: 1.5vw !important;
  height: auto !important;
  #max-width: 20px !important;
  object-fit: contain; /* zapewnia proporcjonalne skalowanie */
}

.language-toggle .arrow {
  font-weight: 300;
  font-size: clamp(6px, 1.04vw, 500px);
  line-height: 1.2;
}

.language-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 6vw;
  #z-index: 10;
}

.language-menu a {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding-top: 1vh;
  padding-left: 0;
}

.language-dropdown:hover .language-menu {
  display: block;
}

/* Ujednolicenie flag w menu */
.language-menu a .flag {
  display: block;
  width: 1.5vw !important;
  height: auto !important;
  object-fit: contain;
}

.content {
    #background-color: pink;
    width: 93%;
    display: flex;
    flex-direction: column;
    align-items: left;
}

.logo_menu {
    width: 98vw;
    #height: 17vh;
    display: flex;
    flex-direction: row;
    align-items: left;
}

.logo {
    #width: 20%;
    height: 17vh;
    #background-color: black;
    display: flex;
    justify-content: left;
    align-items: center;
}

.logo a {
    #width: 20vw;
    height: 17vh;
    #background-color: black;
    display: flex;
    justify-content: left;
    align-items: center;
}

.logo a img {
    height: 18.2vw;
    width: auto;
    display: block;
        margin-top: 2vw;
}

.logo a:hover img {
    height: 18.2vw;
    width: auto;
    display: block;
}

.menu {
    font-weight: 300;
    font-size: clamp(6px, 1.04vw, 500px);
    line-height: 1.2;
    width: 100vw;
    #height: 17vh;
    #background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row-reverse;
    color: white;
    #padding-left: 6%;
    padding-right: 5vw;
}

.main_page {
    flex-basis: auto;
    #background-color: red;
}


.product {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: green;
}

.visualisation {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: red;
}

.news {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: red;
}

.zamawianie {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: green;
}

.company {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: red;
}

.partnerzy {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: red;
}

.realizacje {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: red;
}

.contact {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: green;
}

.language {
    flex-basis: auto;
    margin-left: 3.5%;
    #background-color: red;
}

.menu_margin {
   padding-left: clamp(4px, 0.8vw, 500px);
}

h6 {
    font-size: clamp(6px 1.1vw, 500px);
}

a {
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: left;
    padding-left: 4px;
    align-items: center;
    #background-color: pink;
}

a img {
    display: none;
}

.news a img {
    display: block;
    height: clamp(6px, 2.2vw, 500px);
}


.news a {
    color: #ffb300;
}

.row_second_one a {
    display: inline;
    color: blue;
}

.row_second_onee a {
    display: inline;
    color: blue;
}

a:hover {
    color: #ffb300;
    text-decoration: none;
}




.content_margin {
    width: 93%;
    #background-color: black;
    height: clamp(12.5px, 6.25vh, 100000px);
}

.first_line {
    font-weight: 600;
    width: 98vw;
    font-size: clamp(10px, 5vw, 9500px);
    line-height: 1.2;
    height: fit-content;
    #background-color: blue;
    color: black;
    display: flex;
    #justify-content: center;
    align-items: bottom;
    text-align: left;
    flex-direction: column;
}

h5 {
    font-weight: 300;
    font-size: clamp(6px, 1.13vw, 500px);
    line-height: 1.4;
    #background-color: green;
    text-align: left;
    margin-top: 2vh;
}



a.trojkacik {
width: 0;
padding-top: 2.5%;
}

a img.link_to_gallery {
    display: block;
    width: clamp(10px, 2.3vw, 10000px);
    height: auto;
}

a:hover img.link_to_gallery {
    display: block;
    text-decoration: none;
}

.right-margin {
    #background-color: blue;
    #width: 2%;
    #height: clamp(160px, 80vh, 100000px);
}

.product_create {
    #background-color: yellow;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    min-height: 50px;
    #max-width:100vw;
    margin-top: 3%;
    #margin-bottom: 5%;
}


.gallery_second_row {
    margin-top: 2vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: left;
}


.second_row_first {
    width: 33%;
    align-items: left;
}

.second_row_first img {
    width: 100%;
    cursor: pointer;
}

.second_row_second {
    width: 33%;
    align-items: left;
}

.second_row_second img {
    width: 100%;
    cursor: pointer;
}

.second_row_margin {
    width: 3%;
}

.zero_row_margin {
    width: 4vw;
}

.second_row_third {
    width: 33%;
    align-items: left;
}

.second_row_third img {
    width: 100%;
    cursor: pointer;
}

.second_row_fourth {
    width: 33%;
    align-items: left;
}

.second_row_fourth img {
    width: 100%;
    cursor: pointer;
}

.tekst {
padding-top:0;
}

.product_create_row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: left;

}

.row_zero {
    width: 50vw;
    align-items: left;
}

.row_zero a img {
display:block;
    margin-left: 12.5vw;
    width: 25vw;
}

.row_zero a:hover img {
display:block;
    margin-left: 12.5vw;
    width: 25vw;
}

.second_row_first a img {
display:block;
    margin-left: 8vw;
    height: 65vh;
}

.second_row_first a:hover img {
display:block;
    margin-left: 8vw;
    height: 65vh;
}

.uno {
    width: 100%;
    align-items: left;
}

.uno a img {
display:block;
    width: 60%;
}

.uno a:hover img {
display:block;
    width: 60%;
}




.row_first {
    display: flex;
    flex-direction: row;
    align-items: left;
    width: 50vw;
    align-items: left;
}

.row_firstt {
    display: flex;
    flex-direction: row;
    align-items: left;
    width: 50vw;
    align-items: left;
}

.row_first img {
    margin-left: 4vw;
    max-width: 40vw;
}

.row_firstt img {
    margin-left: 12vw;
    max-width: 26vw;
}



strong {
display: inline;
}

.row_second_one {
    width: 42vw;
    #margin: auto;
    align-items: center;
    #background-color: green;
    font-weight: 400;
    font-size: clamp(6px, 1.35vw, 500px);
    line-height: 1.4;
    text-align: justify;
    margin-left: 1vw;
    padding-top: 2vh;
}

.row_second_onee {
    width: 42vw;
    #margin: auto;
    align-items: center;
    #background-color: green;
    font-weight: 400;
    font-size: clamp(6px, 1.35vw, 500px);
    line-height: 1.4;
    text-align: justify;
    margin-left: 1vw;
    padding-top: 10vh;
}

.row_second_two {
    margin: auto;
    width: 50%;
    align-items: center;
    #background-color: green;
    #justify-content: right;
    font-weight: 300;
    font-size: clamp(6px, 1.2vw, 500px);
    line-height: 1.4;
    text-align: right;
}




.row_third {
    width: 16%;
    align-items: left;
}

.row_third img {
    width: 100%;
}


.margin_second {
    height: 20vh;
}



.order_process {
    #background-color: yellow;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    min-height: 50px;
    #max-width:100vw;
    margin-top: 10%;
    margin-bottom: 5%;
}

.order_process_row_first {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-left: 5%;
    margin-right: 5%;
}

.order_process_row_second {
    width: 76.8%;
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-left: 11.6%;
    margin-right: 11.6%;
}

.order_process_row_third {
    width: 90%;
    #background-color: red;
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-left: 5%;
    margin-right: 5%;
}




.order_process_row_second img {
    width: 100%;
}





.row_third {
    width: 18%;
    display: flex;
    #align-items: center;
    justify-content: center;
    #background-color: green;
    font-weight: 400;
    font-size: clamp(6px, 1.1vw, 500px);
}


.margin_second {
    height: 20vh;
}

.footer {
    margin-top: 15vh;
    font-weight: 300;
    font-size: clamp(6px, 1.1vw, 500px);
    width: 100%;
    height: clamp(40px, 8vh, 10000px);
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    color: white;
    padding-left: 4.5%;
    padding-right: 4.5%;
}

.artis_heat_footer {
    flex-basis: auto;
}

.main_page_footer {
    flex-basis: auto;
    margin-left: 3%;
}


.product_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.visualisation_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.news_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.zamawianie_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.company_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.partnerzy_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.realizacje_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.contact_footer {
    flex-basis: auto;
    margin-left: 3%;
}

.row_third a.podpis_contact {
color: black;
display: inline;
height: 2vw;
}

a.podpis_contact:hover {
color: #ffb300;
}


#CookielawBanner {
    background-color: #ffb300;
    padding: 15px 0;
    top: 10%;
    height: 80%;
    width: 100%;
    position: fixed;
    align-items: center;
    justify-content: center;
    #text-align: center;
    #opacity: 0.5;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: clamp(14px, 2vh, 1000px);
}

#CookielawBanner .container {
display: flex;
    flex-direction: column;
    top: 30%;
}

#CookielawBanner .container h6 {
    font-weight: 600;
    font-size: clamp(17px, 3.4vh, 10000px);
        align-items: center;
    justify-content: center;
    text-align: center;
}

#CookielawBanner .container p {
display: flex;
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
}

#CookielawBanner .container p a {
width: fit-content;
margin-top: 3vh;
    font-weight: 600;
    font-size: clamp(16px, 2.5vh, 1000px);
}

#CookielawBanner #CookielawCross {
    background: url('../img/close.png') no-repeat 0 0;
  padding: 20px;
  background-color: #ffb300;
  color: white;
  bottom:0;
  width: 100%;
      align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
}

.btn-primary {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    outline: none;
    box-shadow: none;
    }

.btn-primary:hover, .btn-primary:active {
    color: black;
    background-color: white;
    border-color: white;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none
    }

.btn-primary:visited, .btn-primary:active {
        color: black;
    background-color: white;
    border-color: white;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none
}

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
   -webkit-box-shadow: none
}


.btn-primary:focus, .btn-primary.focus, .btn-primary:hover {
        color: black;
    background-color: white;
    border-color: white;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none
}

  .btn-primary.disabled,
  .btn-primary:disabled {
        color: black;
    background-color: white;
    border-color: white;
    outline: none;
    box-shadow: none;
  }

  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active,
  .show>.btn-primary.dropdown-toggle {
        color: black;
    background-color: white;
    border-color: white;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none
  }

.buttons input:focus {
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none
}


@media screen and (max-aspect-ratio: 99/100) {

.mobile {
display: initial;
}

.mobile_main_page {
    height: 100vh;
    width: 100%;
    background-image: url("/static/images/wizualizacje_mobilka_tlo.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;
    min-width: 150px;
    height: clamp(200px, 100vh, 100000px);
    display: flex;
    flex-direction: column;
    #background-color: red;
    #overflow: hidden;
    max-width:100vw;
}

.language-dropdown {
flex-basis: auto;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin-left: 3.5%;
  font-weight: 600;
line-height: 4vh;
font-size: clamp(15px, 3vh, 10000px);

}

.language-toggle {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

.language-toggle .flag {
  display: block;
  width: 5vw !important;
  height: auto !important;
  #max-width: 20px !important;
  object-fit: contain; /* zapewnia proporcjonalne skalowanie */
}

.language-toggle .arrow {
  font-weight: 300;
  font-size: clamp(6px, 2vh, 500px);
  line-height: 1.2;
}

.language-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 20vw;
  #z-index: 10;
}

.language-menu a {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding-top: 2vh;
  padding-left: 0;
}

.menu_mobile .to_english .language-menu a {
    color: white;
}

.menu_mobile2 .to_english .language-menu a {
    color: white;
}

.language-dropdown.active .language-menu {
  display: block;
  color: white;
}

/* Ujednolicenie flag w menu */
.language-menu a .flag {
  display: block;
  width: 5vw !important;
  height: auto !important;
  object-fit: contain;
}

.mobilka_logo {
width: 100%;
display: flex;
flex-direction: row;
}

.mobilka_logo a img {
height: 35vh;
position: relative;
top: -5vh;
display:block;
}

.mobilka_logo a:hover img {
height: 35vh;
position: relative;
top: -5vh;
display:block;
}

.mobilka_first_line {
    color: white;
    font-weight: 600;
    font-size: clamp(10px, 4vh, 9500px);
    line-height: 1.2;
    text-align: center;
        position: relative;
    top: -12vh;
}

.mobilka_first_line a {
    display: inline;
    color: #ffb300;
}

.mobilka_first_line h5 {
    text-align: center;
        font-weight: 200;
    font-size: clamp(6px, 2.15vh, 500px);
    line-height: 1.3;
    width: 82%;
    margin-left: 9%;
    margin-right: 9%;
}

.mobilka_second_line {
    background-image: url("/static/images/wizualizacje_mobilka_tlo.png");
        background-repeat:no-repeat;
    background-size: 100% 100%;
    color: white;
    font-weight: 600;
    min-height: 100vh;
    font-size: clamp(10px, 5.5vh, 9500px);
    line-height: 1.2;
    text-align: center;
        position: relative;
    padding-top: 10vh;
padding-down: 10vh;
}

.mobilka_third_line {
    background-image: url("/static/images/wizualizacje_mobilka_tlo.png");
        background-repeat:no-repeat;
    background-size: 100% 100%;
    color: white;
    font-weight: 600;
    min-height: 100vh;
    font-size: clamp(10px, 5.5vh, 9500px);
    line-height: 1.2;
    text-align: center;
        position: relative;
    padding-top: 10vh;
padding-down: 10vh;
}

.mobilka_third_line a {
    display: inline;
    color: #ffb300;
}

.mobilka_third_line h5 {
    text-align: center;
        font-weight: 200;
    font-size: clamp(6px, 2.15vh, 500px);
    line-height: 1.3;
    width: 82%;
    margin-left: 9%;
    margin-right: 9%;
}

h5 {
    text-align: center;
        font-weight: 200;
    font-size: clamp(6px, 2.5vh, 500px);
    line-height: 1.3;
    width: 82%;
    margin-left: 9%;
    margin-right: 9%;
}

a {
padding-left: 0px;
}

a.podpis {
width: 100%;
}

h5.h5mobilka {
    text-align: center;
        font-weight: 200;
    font-size: clamp(6px, 2.8vh, 500px);
    padding-top: 3vh;
    line-height: 1.3;
    width: 100%;
}

.mobile_menu {
    position: relative;
    top: -23vh;
    left: 75vw;
    #padding-top: 6vh;
    #padding-left: 35vw;
}

input {
decoration: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
}

.mobile_menu_kolko {
width: clamp(15px, 10vw, 10000px);
}

input.X {
position: absolute;
width: clamp(15px, 6vw, 10000px);
#align-items: right;
#justify-content: right;
#margin-left: 70vw;
#margin-top: 7vh;
top: 7.2vh;
right: 11vw;
}

.to_english {
position: absolute;
top: 8vh;
left: 11vw;
}

.menu_mobile .to_english a {
color: #ffb300;
font-weight: 600;
font-size: 3vh;
}

.menu_mobile2 .to_english a {
color: #ffb300;
font-weight: 600;
font-size: 3vh;
}

.lista_menu {
margin-top: 15vh;
display: flex;
flex-direction: column;
font-weight: 600;
line-height: 10vh;
font-size: clamp(15px, 3vh, 10000px);
align-items: center;
text-align: center;
}

.lista_menu a {
text-align: center;
}


.desktop {
display: none;
}

.menu_mobile {
width: 100%;
height: 100vh;
background-color: #1d1b1b;
display: none;
flex-direction: column;
color: white;
align-items: center;
}

.menu_mobile a {
text-decoration: none;
color: white;
}

.down {
margin-top: 4vh;
width: 100%;
height: 3.5vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.down a {
    width: fit-content;
    height: 100%;
align-items: center;
justify-content: center;

}

.down a img {
display: block;
height: 100%;
}

.proces {
#height: fit-content;
display: flex;
flex-direction: column;
width: 100%
}

.proces img {
width: 100%
}

.opis {
width: 100%;
padding-top: 4.5vh;
padding-bottom: 4.5vh;
padding-left: 6vw;
padding-right: 6vw;
text-align: center;
font-weight: 400;
font-size: 3vh;
line-height: 1.1;
color: white;
background-color: black;
}

.mobile_menu2 {
width: 100%;
#padding-top: 4.5vh;
#padding-bottom: 4.5vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 14vh;
}

.menu_mobile2 {
width: 100%;
height: 100vh;
background-color: #1d1b1b;
display: none;
flex-direction: column;
color: white;
align-items: center;
}

.menu_mobile2 a {
text-decoration: none;
color: white;
}

}