:root {
    --font-main:   "Google Sans Flex", sans-serif;
	 --font-header: "Google Sans Flex", sans-serif;
    --color-main: #111111;
    --color-accent: #D22325;
    --color-bg: #ffffff;
    --color-muted: #777777;
    --color-border: #e5e5e5;
}

.vc_row,
.vc_row-fluid {
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

::selection {
    background-color: var(--color-accent);
    color: #fff;
}

  a {
    color: var(--color-accent);
    text-decoration: none;
  }

  a:hover,
  a:focus {
    color: var(--color-accent);
    text-decoration: underline;
  }
  
  html, body {
    margin: 0 auto;
    overflow-x: hidden;
	font-family: var(--font-main);
  }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
}

p.tytul-archiwum{
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    margin: 0;
}

h1,
.h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
}

h2,
.h2, .h2 a, h2 a {
    font-size: 2.5rem;
    font-weight: 700;
	line-height: 2rem;
}

h3,
.h3 {
    font-size: 1.75rem;
    font-weight: 600;
}

h4,
.h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

@media (max-width: 48rem) {
    h1,
    .h1 {
        font-size: 2.25rem;
    }

    h2,
    .h2, .h2 a, h2 a  {
        font-size: 1.75rem;
    }

    h3,
    .h3 {
        font-size: 1.375rem;
    }

    h4,
    .h4 {
        font-size: 1.125rem;
    }
}


.btn {
    background-color: var(--color-accent);
    color: #ffffff;
    border: 2px solid #D22325;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

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



/* HEADER */
    .site-header {
        padding: 15px 0;
        position: fixed;
        width: 100%;
	background: #111;
		z-index: 99;
    }

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
	    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


@media(max-width: 992px){
	.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row!important;
    align-items: center;
    justify-content: space-evenly!important;
}
}

.header-left a,
.header-right a {
    margin: 0 10px;
    text-decoration: none;
    font-weight: 500;
}

.header-logo img {
    max-height: 40px;
    width: auto;
}
@media(max-width: 992px){
	.header-logo img {
    max-height: 20px;
    width: auto;
}
}
.top-bar-inner img {
    filter: invert(1);
    width: 20px;
    height: 20px;
	transition: all 0.3s ease;
}
.top-bar-inner img:hover {
    transform: translateY(-2px);
	    transition: all 0.3s ease;
}

/* FOOTER */
.site-footer {
    border-top: 1px solid #eee;
    padding: 40px 20px;
    text-align: center;
    background-color: #20252A;
    display: flex;
    flex-direction: column;}

.footer-logo img {
    max-height: 60px;
    margin-bottom: 15px;
}

.footer-copy {
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;
}

.footer-privacy {
    margin: 2rem;
	  display: flex;
  justify-content: center;
}
.footer-privacy a {
    font-size: 14px;
}

/*Page*/
.hero{
height: 45vh;}
@media(max-width: 768px){
	.hero{
height: 60vh;}
}


/**/

/* Container */
.single-samochod-wrapper{
	display:flex !important;
	flex-wrap:wrap;
	gap: 25px;
	max-width:1500px;
	margin:0 auto;
	padding:8rem 20px;
}

/* Główne zdjęcie */

.featured-image img{
    width: 100%;
    height: auto;
    display: block;
}

/* Galeria */

.samochod-galeria-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-top: 5px;
}

.samochod-galeria-grid img{
width:100%;
height:auto;
object-fit:cover;
display:block;
transition:.3s;
cursor:pointer;
}

.samochod-galeria-grid img:hover{
transform:scale(1.02);
}

/* Prawa kolumna */

.right-col h1{
margin-top:0;
margin-bottom:15px;
color:#333;
}

.samochod-description{
margin-bottom:25px;
font-size:16px;
line-height:1.5;
}

/* tabela */

.samochod-data-table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin-bottom:25px;
overflow:hidden;
}

.samochod-data-table th,
.samochod-data-table td{
border:none;
padding:10px 15px;
}

.samochod-data-table th{
text-align:left;
width:35%;
}

.samochod-data-table tr:nth-child(even){
background:#f9f9f9;
}

/* wyposażenie */

.samochod-wyposazenie h3{
margin-bottom:10px;
}

.samochod-wyposazenie ul{
list-style:disc;
padding-left:20px;
}

/* MOBILE */

@media(max-width:768px){

.single-samochod-wrapper{
flex-direction:column;
padding:15px 10px;
}

.samochod-galeria-grid{
grid-template-columns:repeat(3,1fr);
gap:4px;
}

}

/*Listing*/

.archiwum-samochody-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin: 0 auto;
    padding: 20px;
/*     max-width: 900px; */
}

.pojazd-archiwum-grid {
    background: #fff;
	border: 1px solid #e3e3e3;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    position: relative; 
}


/* Zdjęcie */
.zdjecie-archiwum img {
    height: 100%;
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
}

/* Informacje */
.info-archiwum-grid {
    width: 100%;
	height: auto;
    padding: 15px;
    box-sizing: border-box;}

.tytul-archiwum a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
	    transition: transform 0.3s ease;
}

.tytul-archiwum a:hover {
    color: var(--color-accent);
    transition: transform 0.3s ease;
}

/* Dane obok siebie */
.dane-obok-sobie-grid {
display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.dane-obok-sobie-grid span {
    border: 1px solid #e3e3e3;
    padding: 10px;
    font-weight: 600;
}

/* Cena */
.cena-archiwum {
    color: var(--color-accent);
    font-family: var(--font-header);
}

/* Responsywność */
@media (max-width: 768px) {
    .archiwum-samochody-grid {
        grid-template-columns: 1fr;
    }
}

.pojazd-archiwum-grid::before,
.pojazd-archiwum-grid::after {
    content: '';
    position: absolute;
    border: 2px solid var(--color-accent);
}

.pojazd-archiwum-grid :is(h1, h2, h3, h4, h5, h6), .cena-archiwum :is(h1, h2, h3, h4, h5, h6), .dane-obok-sobie-grid {
    margin:0 0 0.5rem 0;
}

.call-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px; 
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
	  transition: opacity 0.3s ease;
	border-top: 1px solid var(--color-accent);
}

.call-banner a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

/* Mobile */
@media (max-width: 600px) {
  .call-banner {
    height: 70px;
  }

  .call-banner a {
    font-size: 16px;
  }
}

/* TOP BAR */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background: #111;
  color: #fff;
  z-index: 99999;
  display: flex;
  align-items: center;
border-bottom: 1px solid var(--color-accent);

}

/* content jak container */
.top-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.top-bar-text {
  font-size: 14px;
}

/* przesunięcie headera */
body {
  padding-top: 35px;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 600px) {
  .top-bar {
    height: 50px;
  }

  body {
    padding-top: 50px;
  }

  .top-bar-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2px;
  }
}

/* kontener max 1400px */
.cars-carousel-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px; 
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .cars-carousel-container {
    max-width: 1000px;
  }
}

@media (max-width: 992px) {
  .cars-carousel-container {
    max-width: 720px;
  }
}

@media (max-width: 600px) {
  .cars-carousel-container {
    max-width: 100%; 
    padding: 0 15px;
  }
}

/* nagłówek */
.cars-carousel-container h2 {
  text-align: center;
  margin-bottom: 30px;
}

/* karuzela */
.cars-carousel .pojazd-archiwum-grid {
  margin: 0 10px;
}

/* dotsy */
.owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-dot span {
  width: 10px;
  height: 10px;
  background: #ccc;
  display: block;
  border-radius: 50%;
  margin: 5px;
}

.owl-dot.active span {
  background: var(--color-accent);
}

/*sticky */

.top-section {
    display: flex;
    gap: 30px;
    width: 100%;
    align-items: flex-start; 
}

.left-col,
.right-col {
    width: calc(50% - 15px);
}

.featured-image {
    position: sticky;
    top: 30px;
}

.featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .top-section {
        flex-direction: column;
    }

    .left-col,
    .right-col {
        width: 100%;
    }

    .featured-image {
        position: static;
    }
}