/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* general */

/* FONTs */

@font-face {
    font-family: BienaleBold;
    src: url('../fonts/Biennale-Bold.otf');
}

@font-face {
    font-family: BienaleMedium;
    src: url('../fonts/Biennale-Medium.otf');
}

@font-face {
    font-family: BienaleRegular;
    src: url('../fonts/Biennale-Regular.otf');
}

@font-face {
    font-family: Torokalight;
    src: url('../fonts/Toroka-WideLight.otf');
}

@font-face {
    font-family: TorokaMedium;
    src: url('../fonts/Toroka-WideMedium.otf');
}

@font-face {
    font-family: TorokaRegular;
    src: url('../fonts/Toroka-WideRegular.otf');
}



html {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
					width: 100%;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
}

/* clearfix */
.group:before, .container:before,
.group:after, .container:after {
	content: " ";
	display: table;
}

.group:after, .container:after {
	clear: both;
}


body {
    width: 100%; /* zabezpečí, že telo nebude väčšie ako viewport */
    overflow-x: hidden; /* zabráni horizontálnemu scrollu */
		font-size: 100%;
		/* font-family: TorokaLight; */
		font-family: BienaleRegular;
    margin: 0;
    padding: 0;
		background: #fffdfe;

}

html, body {
  width: 100%;
  overflow-x: hidden;
}

img {
	max-width: 100%;
	vertical-align: middle;
}

a {
	text-decoration: none;

}

h1{
	color: black;
}

p,a,h1,h2,h3,h4,h5{
	color: #0d1011;
}

.container {
  max-width: 1200px;
  width: 100%;
}

* {
  box-sizing: border-box;
}


.lni {
    src: url("../fonts/LineIcons-solid.woff2") format("woff2");
    font-family: 'LineIcons' !important;
}



.is-instagram-browser .container {
  max-width: 100%;
  padding: 1rem;
}

.alert{
	z-index: 999;
}


.scroll-downs {
  position: absolute;
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid black;
  border-radius: 25px;

  opacity: 0.75;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: black;

  -webkit-animation-name: scroll;
          animation-name: scroll;
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-timing-function: cubic-bezier(.15,.41,.69,.94);
          animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes scroll {
  0% { opacity: 0; }
  10% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 0;}
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 0;}
}

.scroll-downs-hide{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	opacity: 0;
}



/*-----------------------------------------------------------------------------------------------------------------------------------------------
POPUP
-----------------------------------------------------------------------------------------------------------------------------------------------*/



.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* kontajner */
.popup-content {
    position: relative;
    width: 50%;
    height: 70%;

    aspect-ratio: 4 / 5; /* pomer obrázka */
    background: none;
    border-radius: 14px;
    overflow: hidden;
}

/* obrázok ako CSS background */
.popup-image {
    width: 100%;
    height: 100%;
    background-image: url('/img/blava.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* zatváracie tlačidlo */
.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,.7);
    color: #fff;
    border: none;
    font-size: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

/* mobil */
@media (max-width: 600px) {
    .popup-content {
        width: 95%;
        aspect-ratio: 3 / 4;
    }
}



/*-----------------------------------------------------------------------------------------------------------------------------------------------
Authetication
-----------------------------------------------------------------------------------------------------------------------------------------------*/
#register_btn{
	padding: 0 10px;
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------
HEADER and Navigation
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.header{
	/* position: absolute; */
  position: fixed;

	top: 0;
	left: 0;
	width: 100%;
	height: 10vh;
	z-index: 99;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

          box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	background: white;
  /* opacity: .85; */

}

.header_logo_wrapper{
	width: 50%;
	text-align: center;

	/* border: 1px solid green; */
}

.header_logo_wrapper img{
	width: 20%;
}

.header_links_wrapper{
	width: 25%;
	text-align: right;
	padding-right: 2%;
}

.header_links_wrapper a{
	font-family: TorokaMedium;
	color: black;
	font-size: 1.2rem;
	font-weight: 600;
	opacity: .8;
	padding: 0 10px;
}

.header_links_wrapper a:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	opacity: 1;
	color:#9f9ff4;
	cursor: pointer;

}



.navigation_social{
	width: 100%;
	position: absolute;
	bottom: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.navigation_social i{
	font-size: 1.5rem;
	color: white;
	padding: 5px 20px;
	opacity: .75;
}

.navigation_social i:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	opacity: 1;
	color:#9f9ff4;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------
NAVIGATION
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.navigation{
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.9);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 98;
	display: none;
}

.navigation .close_nav{
	font-size: 2rem;
	position: absolute;
	right: 50px;
	top: 50px;
	color: white;
	opacity: .7;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.navigation .close_nav:hover{
	-webkit-transform: rotate(1turn);
	    -ms-transform: rotate(1turn);
	        transform: rotate(1turn);
 	opacity: 1;
	cursor: pointer;
	color: red;
}

.navigation_btn{
	width: 100%;
	margin-top: 12%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align:end;
	    -ms-flex-align:end;
	        align-items:flex-end;
}

.navigation_btn a{
	font-family: TorokaMedium;
	font-size: 2rem;
	font-weight: 600;
	color: white;
	opacity: .75;
	text-transform: uppercase;
	padding: 7px 0;
	margin-right: 10%;
}

.navigation_btn a:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	opacity: 1;
	color: #fcee21;
}

.nav_2{
	margin-top: 0;
}

.nav_2 a{
	font-size: 1rem;
	font-weight: 300;
	padding: 4px 0;
}



/*-----------------------------------------------------------------------------------------------------------------------------------------------
INTRO
-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* .intro_screen{
	width: 100%;
	height: 90vh;
	margin-top: 10vh;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	background-color: grey;

} */


.carousel-item {
    .lg-item > img {
        height: 600px;
    }
}

.carousel-inner {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
}

.carousel-item img{
		margin-top: -200px;
}


.carousel-caption {
    right: 5%;
    bottom: 20%;
    left: 70%;
    padding-top: 0;
    padding-bottom: 10px;
    color: #fff;
    text-align: left;

    /* border: 1px solid white; */
    background: rgba(0, 0, 0, 0.5);

}

.carousel-caption h5{
  font-family: Torokalight;
  font-size: 1.5rem;
  color: white;
  padding: 10px 15px;
}

.carousel-caption p{
  font-size: .8rem;
  color: white;
  padding: 0 15px;
  margin: 0;

}

.carousel-caption a{
  font-size: 1rem;
  color: white;
  padding: 0 15px;
  margin: 0;
  text-transform: uppercase;
  opacity: .75;
}

.carousel-caption a:hover {
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  opacity: 1;
}





/*-----------------------------------------------------------------------------------------------------------------------------------------------
INTRO 2
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.intro_screen{
	width: 100%;
	height: 90vh;
	margin-top: 10vh;

	display: -webkit-box;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

	display: -ms-flexbox;

	display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

    background: url(../img/superb1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.intro_screen h1{
  font-family: TorokaRegular;
  font-size: 1.5rem;
  color: white;
  text-transform: uppercase;
  padding: 0;
  margin: 15% 0 0 5%;
}


.intro_screen_text {
  font-family: TorokaLight;
  font-size: .8rem;
  color: white;
  padding: 0 50% 0 0;
  margin: -9% 0 0 5%;
}

.intro_screen a{
  font-family: TorokaMedium;
  font-size: 1rem;
  color: white;

  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: -10% 0 0 5%;
}

.intro_stats{
  width: 95%;
  height: auto;
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;

  /* border: 1px solid red; */
}


/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */


.counter {
  width: 15%;
  padding: 0;
  margin: 0 0 5% 0;;
  display: -webkit-box;;
  display: -ms-flexbox;;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.count-title {
  font-family: TorokaMedium;
  font-size: 2rem;
  color: white;
  margin-bottom: 10px;
  text-align: center;
}
.count-text{
  font-family: TorokaLight;
  font-size: .8rem;
  color: white;
  margin: 0;
  padding: 0;

}
.fa-2x {
  margin: 0 auto;
  float: none;
  display:
  table;
  color: #4ad1e5;
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------
TOP OFFER
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.top_offer_wrapper {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.top_offer_card {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.top_offer_img {
  width: 65%;
  height: 100%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.top_offer_info {
  width: 35%;
  height: 100%;
  background: #f0efed;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
}

.top_offer_label {
  font-family: Torokalight;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #2b5554;
}

.top_offer_name_block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.top_offer_car_name {
  font-size: 1.7rem;
  font-weight: 600;
  color: black;
  margin: 0;
  line-height: 1.2;
}

.top_offer_cislo {
  font-size: 0.8rem;
  color: rgba(0,0,0,0.4);
  margin: 0;
}

.top_offer_specs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 16px 0;
}

.top_offer_specs p {
  width: 50%;
  font-size: 0.82rem;
  font-weight: 300;
  color: black;
  opacity: 0.7;
  margin: 0;
  padding: 5px 0;
}

.top_offer_price_row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.top_offer_price_row .filter-p-pricing {
  bottom: 0;
}

.top_offer_cta {
  display: inline-block;
  padding: 12px 28px;
  background: #2b5554;
  color: white;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  width: fit-content;
  align-self: flex-end;
  transition: background 0.2s ease;
}

.top_offer_card:hover .top_offer_cta {
  background: #1e3d3c;
}







/*-----------------------------------------------------------------------------------------------------------------------------------------------
SUBSCRIBE
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.subscribe_intro{
	width: 100%;
	height: 40vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	background-color: #2b5554;
	/* background-color: #9F9FF4; */
	/* background-image: url('../img/subscribebcg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; */
	display: flex;


	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-webkit-transform: translateY(80px);
	-ms-transform: translateY(80px);
	transform: translateY(80px);
	-webkit-transition: all .6s ease-out;
	-o-transition: all .6s ease-out;
	transition: all .6s ease-out;
	overflow: hidden;
	opacity: 0;

  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

          box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.subscribe_intro.fade-in{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}




.subscribe_intro h1{
	font-size: 1.2rem;
	font-weight: 500;
	text-transform: uppercase;
	padding-top: 50px;
	color: white;
}

.subscribe_intro h3{
	font-size: 1rem;
	font-weight: 300;
	text-transform: uppercase;
	padding-bottom: 30px;
	color: white;
}

.subscribe_intro form{
	width: 30%;
	padding-bottom: 50px;
}

.subscribe_intro form input{
	margin-bottom: 10px;
}

.subscribe_intro form button{
	width: 100%;
}


.subscribe_intro p{
  font-family: Torokalight;
	font-size: .5rem;
	text-transform: uppercase;
	padding-bottom: 30px;
	color: white;
  opacity: .75;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------
INTRO SERVICES
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.intro_services{
	width: 97%;
	margin: 50px auto;
	height: 80vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

}



.intro_services.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.intro_service_section{
	width: 32%;
	height: 90%;
	margin: .5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;

  /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

	/* border: 1px solid red; */



}

.intro_service_section:hover{
   -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
           box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     cursor: pointer;
}

.intro_service_section_1{
    background:
    -webkit-gradient(linear, left bottom, left top, from(rgba(1, 51, 50, 0.8)), color-stop(80%, rgba(1, 51, 50, 0))),
    url(../img/finance.jpg);
    background:
    -o-linear-gradient(bottom, rgba(1, 51, 50, 0.8) 0%, rgba(1, 51, 50, 0) 80%),
    url(../img/finance.jpg);
    background:
    linear-gradient(to top, rgba(1, 51, 50, 0.8) 0%, rgba(1, 51, 50, 0) 80%),
    url(../img/finance.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.intro_service_section_2{
    background:
    -webkit-gradient(linear, left bottom, left top, from(rgba(1, 51, 50, 0.8)), color-stop(80%, rgba(1, 51, 50, 0))),
    url(../img/dovoz.jpg);
    background:
    -o-linear-gradient(bottom, rgba(1, 51, 50, 0.8) 0%, rgba(1, 51, 50, 0) 80%),
    url(../img/dovoz.jpg);
    background:
    linear-gradient(to top, rgba(1, 51, 50, 0.8) 0%, rgba(1, 51, 50, 0) 80%),
    url(../img/dovoz.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.intro_service_section_3{
    background:
    -webkit-gradient(linear, left bottom, left top, from(rgba(1, 51, 50, 0.8)), color-stop(80%, rgba(1, 51, 50, 0))),
    url(../img/protihodnota.jpg);
    background:
    -o-linear-gradient(bottom, rgba(1, 51, 50, 0.8) 0%, rgba(1, 51, 50, 0) 80%),
    url(../img/protihodnota.jpg);
    background:
    linear-gradient(to top, rgba(1, 51, 50, 0.8) 0%, rgba(1, 51, 50, 0) 80%),
    url(../img/protihodnota.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.intro_service_section h2{
  color: white;
  font-size: 1.5rem;
  font-family: TorokaLight;
  padding: 10px 0;
  margin-bottom: 0;
  width: 100%;
  text-align: center;

}

.intro_service_section p{
  color: white;
  font-size: ,9rem;
  font-family: TorokaLight;
  /* font-family: BienaleRegular; */
  padding: 10px 50px;
  margin-bottom: 15%;
  width: 100%;
  text-align: center;

}



/*-----------------------------------------------------------------------------------------------------------------------------------------------
INTRO SHOWROOM
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.showroom_intro{
	width: 100%;
	height: 90vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	    -ms-flex-direction:row;
	        flex-direction:row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;
}

.showroom_intro.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.showroom_intro_section_left{
	width: 65%;
	height: 100%;
	background-image: url('../img/hala_inside.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.showroom_intro_section_right{
	width: 35%;
	height: 100%;
	/* background: #2b5554; */
  background: #031C17;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-line-pack: center;
	    align-content: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.showroom_intro_section_right h1{
  font-family: TorokaRegular;
	font-size: 1.3rem;
	font-weight: 600;
	text-transform: uppercase;
	color: white;
	text-align: left;
	padding-left: 40px;
	padding-bottom: 20px;
  margin-top: 30px;
}

.showroom_intro_section_right p{
  font-family: TorokaLight;
  font-size: .9rem;
	font-weight: 400;
	color: white;
	text-align: left;
	padding-left: 40px;
}


.showroom_intro_section_right p a{
	font-size: 1rem;
	font-weight: 400;
	color: white;
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------
MAP
-----------------------------------------------------------------------------------------------------------------------------------------------*/

.intro_map{
	width: 100%;
	height: 60vh;
	/* background: white; */
	/* background: #0d1011; */

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

}

.intro_map.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

.intro_map h3{
	padding-top: 100px;
	margin-left: 20%;
	color: white;
}

.intro_map_wrapper{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding:0;
}

.intro_map iframe{
	width: 100%;
	height: 60vh;

}

.intro_map_info{
	width: 30%;

	position: absolute;
	background: #0d1011;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 20px 0;
}


.intro_map_info p{
	font-size: .9rem;
	font-weight: 300;
	padding: 0 0 10px 30px;;
	color: #d4d4d4;
	margin: 0;

}

.intro_map_info a{
	font-size: .9rem;
	font-weight: 300;
	padding: 0 0 10px 30px;;
	color: #d4d4d4;
	margin: 0;
	padding-left: 0;
	opacity: .95;

}

.intro_map_info a:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	opacity: 1;
}






/*-----------------------------------------------------------------------------------------------------------------------------------------------
CAR LISTING
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.car_listing_wrapper{
	width: 94%;
	/* width: 90%; */

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	/* align-items: center;
	justify-content: center; */
	margin:0 auto;
	padding: 0;
	margin-bottom: 50px;
}


.car_listing{
	width:31%;
	margin: 1%;
	overflow: hidden;

	/* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */


}

.car_listing_title_img { position: relative; }
.source_badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: .4px;
    pointer-events: none;
}
.source_badge--web { background: #dbeafe; color: #1d4ed8; }
.source_badge--crm { background: #ede9fe; color: #6d28d9; }

.car_listing_title_img{
	width:100%;
	height:270px;
	-webkit-transition: -webkit-transform .4s;
	transition: -webkit-transform .4s;
	-o-transition: transform .4s;
	transition: transform .4s;
	transition: transform .4s, -webkit-transform .4s;   /* smoother zoom */
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

}

 .car_listing_title_img:hover {
	-webkit-transform: scale(1.02);
	    -ms-transform: scale(1.02);
	        transform: scale(1.02);

}


.car_listing_title_img_overlay{
	width: 100%;
	height: 100%;
	/* background: black;
	opacity: 0; */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}




.car_listing_info_bar{
	width: 100%;
	/* height: 150px; */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;

	/* border: 1px solid red; */

}


.car_listing_info_bar p{
	font-size: .9rem;
	font-weight: 400;
	color: white;
	margin: 0;
	padding: 0;
}


.car_listing_top_bar{
	width: 100%;
	height: 40px;
	margin-top: -40px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}



.filter-p-pricing {
    position: relative;
    bottom: 20px;
    right: 0;
    /* background: #9f9ff4; */
		background-color: #2b5554;
    color: #fff;
    padding: 8px 15px;
    z-index: 1;
    font-family: var(--cnvs-primary-font);
}

.filter-p-pricing::before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: -8px;
    height: 100%;
    width: 32px;
    /* background: #9f9ff4; */
		/* background: #013332; */
		background-color: #2b5554;
		/* background-color: #9F9FF4; */
    -ms-transform: skew(-23deg,0deg);
    -webkit-transform: skew(-23deg,0deg);
    transform: skew(-23deg,0deg);
    z-index: -1;
}

.fw-bold {
    font-weight: 700!important;
}

.odpocet_info {
		font-size: .8rem;
    font-weight: 300;
    text-transform: capitalize;
    padding-left: 12px;
    margin-left: 10px;
    border-left: 1px solid rgba(255,255,255,.2);
}



.car_listing_name{
	width: 100%;
}

.car_listing_name p{
	font-size: 1.15rem;
	color: black;
	padding: 10px 0 0 5px;
}

.car_listing_spec{
	width: 100%;
	margin-top: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;

	/* border: 1px solid red; */
}

.car_listing_spec p{
	font-size: .75rem;
	font-weight: 300;
	color: black;
	padding: 5px 2px 0 5px;
	opacity: .7;
	width: 30%;
}


.car_listing_empty{
  font-family: Torokalight;
  font-size: 1rem;
  margin-left: 10px;
  padding: 20px 200px 0 0;

}



/*-----------------------------------------------------------------------------------------------------------------------------------------------
ALL CARS
-----------------------------------------------------------------------------------------------------------------------------------------------*/

.all_cars_wrapper{
	width: 100%;
	padding: 0;
  margin-top: 15vh;
}

.all_cars_wrapper h3{
  font-family: Torokalight;
  font-weight: 600;
  font-size: 1.8rem;
	margin-left: 4%;
	padding: 20px 0;

}

.all_cars_wrapper .car_listing{
	width:31%;
	margin: 1%;
	margin-bottom: 50px;
}


.all_cars_wrapper .car_listing_title_img{
	width:100%;
	height:270px;
	border-radius: 5px;
}


.all_cars_wrapper .car_listing_info_bar{
	width: 100%;
	/* height: 150px; */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;

	/* border: 1px solid red; */

}


.all_cars_wrapper .car_listing_info_bar p{
	font-size: .9rem;
	font-weight: 400;
	color: white;
	margin: 0;
	padding: 0;
}


.all_cars_wrapper .car_listing_top_bar{
	width: 100%;
	height: 40px;
		margin-top: -35px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}



.all_cars_wrapper .car_listing_name{
	width: 100%;
	margin-top: 10px;

}

.all_cars_wrapper .car_listing_name p{
	font-size: 1.15rem;
	font-weight: 500;
	color: black;
}

.all_cars_wrapper .car_listing_name .katalogove_cislo{
	font-size: .55rem;
	font-weight: 200;
	color: black;
  padding: 0;
}


.car_listing_name .katalogove_cislo{
	font-size: .55rem;
	font-weight: 200;
	color: black;
  padding: 0 0 0 5px;
}


.all_cars_wrapper .car_listing_spec{
	width: 100%;
	margin-top: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;

}

.all_cars_wrapper .car_listing_spec p{
	font-size: .75rem;
	font-weight: 300;
	color: black;
	padding: 5px 0;
	opacity: .7;
	width: 30%;
}





.pagination{
  margin: 0 0 60px 50px;
}

.pagination .page-link{
  color: black;
  border: none;
  font-size: .75rem;
  font-weight: 300;
  opacity: .7;
}

.pagination .active>.page-link, .page-link.active{
  background-color: #a6a6a6;
}


/* .paginate_links {
  width: 100%;
  padding: 0 0 30px 30px;;
  margin: 0;
  font-family: Torokalight;
}

.paginate_links .bg-white {
    --bs-bg-opacity: 0;
    background-color: none !important;
}

.paginate_links a.border {
    border:none !important;
}

.paginate_links span.border  {
    border:none !important;
} */

/*-----------------------------------------------------------------------------------------------------------------------------------------------
NEW CARS INTRO
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.new_teaser{
	width: 100%;
	background: #fffdfe;
	padding-bottom: 150px;
	margin-top: -2%;

}

.header_block{
	width: 100%;
	/* height: 200px; */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-webkit-transform: translateY(80px);
	-ms-transform: translateY(80px);
	transform: translateY(80px);
	-webkit-transition: all .6s ease-out;
	-o-transition: all .6s ease-out;
	transition: all .6s ease-out;
	overflow: hidden;
	opacity: 0;
}


.header_block.fade-in{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}


.new_teaser .header_block h3{
	font-family: Torokalight;
	font-weight: 600;
	font-size: 1.8rem;
	color: black;
	padding: 150px 0 25px 0;
	margin-left: 4%;
	text-align: center;
}



.new_cars_index_wrapper{
	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-webkit-transform: translateY(80px);
	-ms-transform: translateY(80px);
	transform: translateY(80px);
	-webkit-transition: all .6s ease-out;
	-o-transition: all .6s ease-out;
	transition: all .6s ease-out;
	overflow: hidden;
	opacity: 0;
}


.new_cars_index_wrapper.fade-in{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}



.new_teaser .custom_btn{
	margin-left: 6%;
	position: absolute;
	margin-top: 30px;
	color: black;
	padding: 15px 40px;
	margin: 0;
	margin-top: 30px;
	border: 1px solid black;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: 6%;
}

.new_cars_btn{
	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-webkit-transform: translateX(-80px);
	-ms-transform: translateX(-80px);
	transform: translateX(-80px);
	-webkit-transition: all .6s ease-out;
	-o-transition: all .6s ease-out;
	transition: all .6s ease-out;
	overflow: hidden;
	opacity: 0;
}

.new_cars_btn.fade-in{
	opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.new_teaser .custom_btn:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	-webkit-transform: scale(1.02);
	    -ms-transform: scale(1.02);
	        transform: scale(1.02);
	color:white;
	cursor: pointer;
	background: black;
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------
CAR FILTER
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.car_brand_filter{
	width: 91%;
	margin: 0 auto;
  margin-left: 4%;

	/* border: 1px solid red; */
  border-radius: 8px;
	margin-top: 5vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	/* border-bottom: 0.5px solid black; */
  margin-bottom: 50px;

  background-color: #AABBBB;
  /* background-color: #D2C61C; */
  /* background-color: #FEF790; */


   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.car_brand_filter_header{
	width: 100%;
	padding-top: 30px;
}

.car_brand_filter_header h2{
	font-size: 1.2rem;
  margin-left: 25px;
}

.car_brand_filter_item{
	width: 7%;
	height: 100px;
	margin: .5%;
  text-align: center;

}


.carbrand_audi{
  	background-image: url('../brands/audi.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;
}

.carbrand_bmw{
  	background-image: url('../brands/bmw.png'); background-size: 60%; background-position: center; background-repeat: no-repeat;
}

.carbrand_vw{
  	background-image: url('../brands/vw.png'); background-size: 60%; background-position: center; background-repeat: no-repeat;
}

.carbrand_skoda{
  	background-image: url('../brands/skoda.png'); background-size: 60%; background-position: center; background-repeat: no-repeat;
}

.carbrand_mercedes{
  	background-image: url('../brands/mercedes.png'); background-size: 60%; background-position: center; background-repeat: no-repeat;
}

.carbrand_porsche{
  	background-image: url('../brands/porsche.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;
}

.carbrand_others{
  background-image: url('../brands/others.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;

}






.car_brand_filter_item:hover {
    -webkit-transition: all 0.50s;
    -o-transition: all 0.50s;
    transition: all 0.50s;
        filter: brightness(110%);
        -webkit-filter: brightness(110%);
        -moz-filter: brightness(110%);
        -o-filter: brightness(110%);
        -ms-filter: brightness(110%);
        -webkit-transition: all 0.50s;
        transition: all 0.50s;
				-webkit-transform: scale(1.1);
				    -ms-transform: scale(1.1);
				        transform: scale(1.1);

}

.filter_audi{
	background-image: url('../brands/audi.png'); background-size: contain; background-position: center; background-repeat: no-repeat;
}

.filter_bmw{
	background-image: url('../brands/bmw.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;
}

.filter_mazda{
	background-image: url('../brands/mazda.png'); background-size: 130%; background-position: center; background-repeat: no-repeat;
}

.filter_mercedes{
	background-image: url('../brands/mercedes.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;
}

.filter_mitsubishi{
	background-image: url('../brands/mitsubishi.png'); background-size: 130%; background-position: center; background-repeat: no-repeat;
}

.filter_porsche{
	background-image: url('../brands/porsche.png'); background-size: 130%; background-position: center; background-repeat: no-repeat;
}

.filter_subaru{
	background-image: url('../brands/subaru2.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;
}

.filter_vw{
	background-image: url('../brands/vw.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;
}

.filter_volvo{
	background-image: url('../brands/volvo.png'); background-size: 130%; background-position: center; background-repeat: no-repeat;
}

.filter_skoda{
	background-image: url('../brands/skoda.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;
}


.car_filter_all_cars .car_listing{
    width: 31.3%;

    margin: 1%;
}

.car_filter_all_cars .car_listing_small_bar {
	width: 30%;
}

.car_filter_all_cars .car_listing_small_bar p {
    font-size: 0.7rem;
    font-weight: 500;
}



/*-----------------------------------------------------------------------------------------------------------------------------------------------
FILTER DETAIL
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.filter_header{
    width: 100%;
    height: 60vh;
    margin-top: 10vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
		margin-bottom: 100px;
}

.style_header_overlay{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.style_header_overlay h1{
    font-size: 4rem;
    color: white;
    font-weight: 400;
    text-transform: uppercase;
}

.style_header_overlay p{
    font-size: .9rem;
    color: white;
    padding: 0 300px;
    font-family: Torokalight;
}

.header_style_audi_bcg{
    background: url("../car_brands/audi.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_bmw_bcg{
    background: url("../car_brands/bmw.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_mazda_bcg{
    background: url("../car_brands/mazda.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_mercedes_bcg{
    background: url("../car_brands/mercedes.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_mitsubishi_bcg{
    background: url("../car_brands/mitsubishi.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_porsche_bcg{
    background: url("../car_brands/porsche.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_subaru_bcg{
    background: url("../car_brands/subaru.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_volvo_bcg{
    background: url("../car_brands/volvo.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_skoda_bcg{
    background: url("../car_brands/skoda.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_vw_bcg{
    background: url("../car_brands/vw.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_toyota_bcg{
    background: url("../car_brands/toyota.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_landrover_bcg{
    background: url("../car_brands/landrover.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_nissan_bcg{
    background: url("../car_brands/nissan.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_seat_bcg{
    background: url("../car_brands/seat.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}

.header_style_others_bcg{
    background: url("../car_brands/others.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;
}





/*-----------------------------------------------------------------------------------------------------------------------------------------------
SUBPAGES
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.subpage_wrapper{
  width: 100%;
  margin: 0 auto;
  margin-top: 10vh;
}


.subpage_section{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-bottom: 100px;

  /* border: 1px solid red; */
}

.subpage_section_img_title_finance{
  width: 100%;
  height: 50vh;

  background:
  linear-gradient(to bottom, rgba(1, 51, 50, 0), rgba(1, 51, 50, 0.8) 90%),
  url(../img/financing2.jpeg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.subpage_section_img_title_dovoz{
  width: 100%;
  height: 50vh;

  background:
  linear-gradient(to bottom, rgba(1, 51, 50, 0), rgba(1, 51, 50, 0.8) 90%),
  url(../img/dovoztitle.jpg);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.subpage_section_img_title_vykup{
  width: 100%;
  height: 50vh;

  background:
  linear-gradient(to bottom, rgba(1, 51, 50, 0), rgba(1, 51, 50, 0.8) 90%),
  url(../img/vykuptitle.jpg);

  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}


.subpage_section_img_title_about{
  width: 100%;
  height: 50vh;

  background:
  /* url(../img/abouttitle.jpg); */
  url(../img/abouttitle2.png);

  background-size: 60%;;
  background-position: center;
  background-repeat: no-repeat;
}


.subpage_section h1{
  font-family: TorokaRegular;
  font-size: 4rem;
  color: black;
  padding: 0;
  margin: 20px 50% 10px 5%;
}


.subpage_section p{
  font-family: TorokaLight;
  font-size: 1rem;
  color: black;
  padding: 0 100px 0 0;
  margin: 20px 30% 10px 5%;
}


.subpage_section_2{
  width: 100%;
  /* background-color: #2b5554; */
  background-color: #809999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;
}

.subpage_section_2.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.subpage_section_2 h3{
  font-family: TorokaRegular;
  font-size: 2rem;
  color: white;
  padding: 50px 0;
  margin: 0;
}

.subpage_section_2_divider{
  width: 90%;
  max-width: 1100px;
  margin: 0 0 80px 0;
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.subpage_section_2_divider_section{
  flex: 1;
  background-color: #2b5554;
  border-radius: 12px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subpage_section_2_divider_section:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

.subpage_section_2_divider_section_header{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.subpage_section_2_divider_section_header img{
  width: 36px;
  height: auto;
  opacity: 0.7;
}

.subpage_section_2_divider_section_body{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.subpage_section_2_divider_section_body h4{
  font-family: TorokaMedium;
  font-size: 1.4rem;
  color: white;
  margin: 0 0 16px 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 16px;
}

.subpage_section_2_divider_section_body ul{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subpage_section_2_divider_section_body ul li{
  font-family: TorokaLight;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  padding: 0;
  margin: 0;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.subpage_section_2_divider_section_body ul li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
}




.subpage_section_3{
  width: 100%;
  height: 50vh;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

  /* border: 1px solid red; */
}

.subpage_section_3.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.subpage_section_3 h3{
  font-family: TorokaRegular;
    font-size: 1.5rem;
    padding: 50px 0;
    margin: 50px 0 50px 0;
}

.subpage_section_3_divider{
  width: 90%;
  height: 60%;
  margin: 0 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  /* border: 1px solid red; */

}

.subpage_section_3_divider_section{
  width: 31%;
  margin: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  /* border: 1px solid red; */
}

.subpage_section_3_divider_section i{
  font-size: 2.5rem;
}

.subpage_section_3_divider_section h4{
  font-family: TorokaLight;
  font-size: 1rem;
  color:black;
  padding: 30px 50px;
  margin: 0;
  text-align: center;
}


.subpage_section_4{
  width: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

  /* border: 1px solid red; */
}

.subpage_section_4.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

.about_team{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.about_team h3{
  padding: 50px 0;
  width: 100%;
  text-align: center;
}


.subpage_section_4_divider{
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 100px;

  /* border: 1px solid green; */
}

.subpage_section_4_divider_section{
  width: 23%;
  margin: 1%;

  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  /* border: 1px solid pink; */
}

.subpage_section_4_divider_section_photo_1{
  width: 100%; height: 80%;
  background-image: url(../img/martin.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_2{
  width: 100%; height: 80%;
  background-image: url(../img/dano.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_3{
  width: 100%; height: 80%;
  background-image: url(../img/roman.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_4{
  width: 100%; height: 80%;
  background-image: url(../img/robo1.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_5{
  width: 100%; height: 80%;
  background-image: url(../img/tomas.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_6{
  width: 100%; height: 80%;
  background-image: url(../img/zuzanak.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_7{
  width: 100%; height: 80%;
  background-image: url(../img/zuzanas.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_8{
  width: 100%; height: 80%;
  background-image: url(../img/zuzanas.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_9{
  width: 100%; height: 80%;
  background-image: url(../img/vrso.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_10{
  width: 100%; height: 80%;
  background-image: url(../img/michal.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_11{
  width: 100%; height: 80%;
  background-image: url(../img/dano.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_12{
  width: 100%; height: 80%;
  background-image: url(../img/andrej.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_13{
  width: 100%; height: 80%;
  background-image: url(../img/marek.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_photo_14{
  width: 100%; height: 80%;
  background-image: url(../img/marek.jpg); background-size: cover; background-position: top center; background-repeat: no-repeat;
}

.subpage_section_4_divider_section_text{
  width: 100%;
  height: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}

.subpage_section_4_divider_section_text p{
  font-family: TorokaRegular;
  font-size: 1rem;
  color:black;
  padding: 2px 10px;
  margin: 0;
}

.subpage_section_4_divider_section_text span p,
.subpage_section_4_divider_section_text span a{
  font-family: TorokaLight;
  font-size: .8rem;
}



.subpage_section_obchodnepodmienky{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.subpage_section_obchodnepodmienky h1{
  padding: 50px 0;
}

.subpage_section_obchodnepodmienky p{
  font-size: .9rem;
  padding: 0 50px 0 0;
}


.subpage_wrapper_kontakt{
    width: 90%;
    margin: 0 auto;
    margin-top: 15vh;
}

.subpage_wrapper_kontakt h1{
    font-family: TorokaMedium;
    font-size: 2.5rem;
    color: black;
    padding: 50px 0;
    margin: 0;
    text-align: center;
}

.car_detail_form_section_left_kontakt {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;

    border-right: 1px solid black;

}

.car_detail_form_section_left_kontakt h3{
    font-family: TorokaLight;
    font-size: 1.2rem;
    color: black;
    padding: 70px 0 20px 0;
    margin: 0;
}

.car_detail_form_section_left_kontakt p{
    font-family: TorokaLight;
    font-size: 1rem;
    color: black;
    padding: 0;
    margin: 0;
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------
INTRO contact
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.intro_contact{
	height: 100vh;

	background: brown;
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------
DASHBOARD
-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* .dashboard_bcg{
		background: #0d1011;
} */

.dashboard{
	width: 80%;
	margin: 0 auto;
	padding: 150px 0;
}



.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: none;
    border: none;
}

.card-header {
    padding:0;
    margin-bottom: 0;
    background-color: white;;
    border-bottom: none;
}

.dashboard .card-body td a,
.dashboard .card-body td button,
.dashboard .card-body th{
	font-size: .8rem;
	padding: 5px;
	font-weight: 400;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------
CREATE FORM
-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* .form_background{
	background: #0d1011;

} */

.create_form_wrapper{
	width: 70%;
	margin: 0 auto;
	padding: 150px 0;
}

.create_form_wrapper .form-group{
	margin: 10px 0;
}

.create_form_wrapper .form-group input{
	margin-right: 5px;
}

.create_form_wrapper .form-group label{
	margin-right: 15px;
}

.create_form_wrapper .form-group label:first-child{
	width: 100%;
}

.create_form_wrapper button{
	width: 100%;
	margin: 50px 0;
	padding: 15px 0;
}

.create_form_wrapper .edit_btn{
  position: fixed;
  top: 12vh;
  left: 10px;
  padding: 5px;
  margin: 0;
  width: 12%;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------
CAR DETAIL
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.car_detail{
	width: 100%;
}

.car_detail_topbar{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	height: 100px;
	background: white;
	margin-top: 10vh;
	margin-bottom: 30px;
	/* border-bottom: 1px solid black; */
	z-index: 10;
	background: #fffdfe;

		/* box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); */

	/* border: 1px solid red; */
}



.car_detail_topbar_backbtn{
	width: 5%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	/* border: 1px solid green; */
}


.car_detail_topbar_backbtn i{
	font-size: 2rem;
}

.car_detail_topbar_backbtn i:hover{
	cursor: pointer;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	scale: 110%;
	color: black;
}

.car_detail_topbar_price{
	width: 40%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	/* border: 1px solid green; */
}

.car_detail_topbar_price_actual{
	width: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.car_detail_topbar_price_actual p{
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

.car_detail_topbar_price_actual h5{
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

.car_detail_topbar_price_finance{
	width: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.car_detail_topbar_price_finance p{
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
	padding: 0;
}

.car_detail_topbar_price_finance h5{
	font-size: .9rem;
	font-weight: 400;
	margin: 0;
	padding: 0;
}


.car_detail_topbar_cta_btn{
	width: 60%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	/* border: 1px solid green; */
}

.car_detail_topbar_cta_btn_item{
	width: 35%;
	height: 50%;
	margin: 1%;
	background: #F2F2F4;
	border: 1px solid #EBEBEB;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	/* border: 1px solid black; */
}



.car_detail_topbar_cta_btn_item:hover{
	cursor: pointer;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	background: #D7DBDD;
}


.btn_green{
	background: #7DCEA0;
}

.btn_green:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	background: #52BE80 ;
}

.car_detail_topbar_cta_btn_item p,a{
	font-size: .9rem;
	margin: 0;
	font-weight: 300;
}

.car_detail_topbar_cta_btn_item a:hover{
	text-decoration: none;
	color: black
}


/* TOP GALLERY */

.car_detail_top_img_swiper_wrapper{
	width:97%;
	height: 75vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	overflow: hidden;
	margin: 0 auto;

  margin-top: 15vh;
}


/* .car_detail_title_img{
	width: 60%;
	height: 100%;

} */


.swiper {
      width: 70%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
			-o-object-position: center;
			   object-position: center;
    }

		.swiper-button-next, .swiper-button-prev {
			color: white;
		}


		.top_gallery{
			width: 29%;

			height: 100%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			    -ms-flex-direction: row;
			        flex-direction: row;
			-ms-flex-wrap: wrap;
			    flex-wrap: wrap;
			overflow: scroll;
		}

		.top_gallery a{
			width: 50%;
		}

		.top_gallery img{
			width: 99%;

			margin: 0 0 2px 0;
		}







.car_detail_edit_btn{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

.car_detail_edit_btn .btn{
	padding: 5px 10px;
	margin: 10px;
}


.breadcrumb{
	width: 100%;
	margin: 20px 0 50px 2%;
}

.car_name{
	width: 100%;
	margin: -40px 0 20px 2%;
}

.car_name h1{
font-size: 2.2rem;
font-weight: 700;
}



.car_detail_gallery{
	width: 100%;
	/* background: black; */

}

.car_detail_img_wrapper{
	width: 90%;
	margin: 0 auto;
	margin-top: 0;
	padding: 0;
	border-bottom: 1px solid black;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	    -ms-flex: auto;
	        flex: auto;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.car_detail_gallery a{
	width: 20%;
	padding: 2px;
	margin: 0;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.car_detail_gallery a:hover{
  -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


.car_detail_gallery img{
	width: 100%;
	padding: 0;
	margin: 0;
}

.all_car_info_wrapper{
  width: 97%;
  margin: 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

  /* border: 1px solid red; */
}


.animation{
  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;
}

.animation.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.car_info_wrapper_text_video{

  width: 70%;
  margin: .5%;
  padding-bottom: 50px;
  background-color: RGB(213, 213, 213, 0.2);
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */

  /* border: 1px solid green; */

}

.car_info_wrapper_text_video_header{
  width: 100%;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  border-bottom: 3px solid #809999;

  /* border: 1px solid red; */
}

.car_info_wrapper_text_video_header_btn_1,
.car_info_wrapper_text_video_header_btn_2,
.car_info_wrapper_text_video_header_btn_3{
  width: 33.3%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  /* border: 1px solid green; */

}


.car_info_wrapper_text_video_header_btn_1:hover,
.car_info_wrapper_text_video_header_btn_2:hover,
.car_info_wrapper_text_video_header_btn_3:hover{
  cursor: pointer;
}

.car_info_wrapper_text_video_header_btn_1 p,
.car_info_wrapper_text_video_header_btn_2 p,
.car_info_wrapper_text_video_header_btn_3 p{
  font-size: 1rem;
  color: black;
  margin: 0;
  padding: 0;
}

/* .car_info_wrapper_text_video_header_btn_1{
  background: #809999;
} */


.new-color {
  background-color: #809999 !important;
}


.car_info_wrapper_text_video_card_1,
.car_info_wrapper_text_video_card_2{
  width: 100%;
  /* height: 100%; */
  position: relative;
  left: 0;
  top: 0;

  /* border: 1px solid green; */
}

.car_info_wrapper_text_video_card_1 h1,
.car_info_wrapper_text_video_card_2 h1{
  font-size: 2rem;
  padding: 50px 50px 30px 30px;
}

.car_info_wrapper_text_video_card_1 p,
.car_info_wrapper_text_video_card_2 p{
  font-size: .9rem;
  padding: 0 50px 0 30px;
  text-align: left;
}

.car_info_wrapper_text_video_card_3 p{
  font-size: .9rem;
  padding: 50px 50px 0 30px;
  text-align: left;
}


.car_info_wrapper_text_video_card_3 iframe{

  width: 100%;
  height: 80vh;;
  padding: 50px;
}

.hidden {
  display: none;
}



.car_info_wrapper_cardetail{

  width: 28%;
  margin: .5%;
  padding-bottom: 0;
  background-color: RGB(213, 213, 213, 0.2);
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */

  /* border: 1px solid black; */

}

.car_info_wrapper_cardetail_header{
  background: #809999;
  /* background: #2b5554; */
  height: 10%;
  width: 100%;
  margin: 0 0 15px 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

}

.car_info_wrapper_cardetail_header h2{
  font-size: 1.3rem;
  color: white;
  padding: 30px 0 20px 15px;
}

.car_info_wrapper_cardetail_line{
  width: 100%;
  padding: 6px 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

}

.car_info_wrapper_cardetail_line_left,
.car_info_wrapper_cardetail_line_right{
  width: 50%;
}




.car_info_wrapper_cardetail_line_right small{
  font-size: .65rem;
  padding-left: 15px;
}


.car_info_wrapper_cardetail p{
  font-size: .8rem;
  color: black;
  padding: 0;
  margin: 0;
  padding-left: 15px;

}

.car_info_show_price p{
  font-family: TorokaRegular;
  font-size: .8rem;
}

.car_info_wrapper_cardetail_line_cta{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 20px;
  padding: 20px 0;

  border-top: .2px solid grey;
}

.car_info_wrapper_cardetail_line_cta_item{
  width: 48%;
  margin: 1% 3%;

}

.car_info_wrapper_cardetail_line_cta_item:hover{
  cursor: pointer;
}



.car_detail_360{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 0;
	padding: 50px 0;
	background: black;
}

.car_detail_360 h3{
	font-size: 1.8rem;
	font-weight: 600;
	padding: 50px 0;
	color: white;
}

.car_detail_video{
	width: 100%;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	/* padding: 100px 0; */
}

.car_detail_video iframe{
	width: 100%;
	height: 100vh;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------
Finance
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.finance_banner{

  width: 97%;
  height: 40vh;
  margin: 100px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* background-color: #FEFCD3; */
  background-color: #809999;

  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

  /* border-top: .5px solid black;
  border-bottom: .5px solid black; */

  /* border: 1px solid red; */
}


.finance_banner.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.finance_banner_section{
  width: 50%;
  height: 100%;


  /* border: 1px solid green; */
}

.finance_banner_section_1{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.finance_banner_section_1 h2{
  font-size: 2rem;
  font-family: TorokaMedium;
  padding: 50px 20px 0 50px;
  color: white;
}

.finance_banner_section_1 p{
  font-size: 1.2rem;
  font-family: TorokaRegular;
  padding: 0 20px 0 50px;

}

.finance_banner_section_1 p span{
  font-size: 1.2rem;
  font-family: TorokaMedium;
  /* color: #9f9FF4; */
  color: #FEF790;

}


.finance_banner_section_1 a{
  font-size: 1.2rem;
  font-family: TorokaLight;
  margin: 30px 20px 0 50px;
  /* background: #9f9FF4; */
  background: #FEF790;
  padding: 10px;
  border-radius: 5px;


}

.finance_banner_section_1 a:hover{
  -webkit-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  opacity: .85;
}

.finance_banner_section_2{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.finance_banner_section_2 p{
  font-size: 1rem;
  font-family: TorokaRegular;
  padding: 0 20px 0 50px;
  color: white;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------
CONTTACT FORM
-----------------------------------------------------------------------------------------------------------------------------------------------*/
.car_detail_form{
	width: 97%;
  height: 80vh;
	margin: 100px auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  background: white;

  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  overflow: hidden;
  opacity: 0;

}


.car_detail_form.fade-in{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}


.car_detail_form_section_left{
  width: 40%;

  background-image: url(../img/hala_inside.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.car_detail_form_section_right{
  width: 100%;

}

.car_detail_form_section_right_saleperson{
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}

.car_detail_form_section_right_saleperson h4{
  font-family: TorokaLight;
  font-size: .95rem;
}

.car_detail_form_section_right_saleperson h3{
  font-family: TorokaMedium;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.car_detail_form_section_right_saleperson a{
  font-size: 1rem;
}


.car_detail_form form{
	width: 80%;
	margin: 0 auto;
  margin-top: 40px;
	padding-bottom: 20px;
}

.car_detail_form form input{
	margin: 10px 0;
  font-family: TorokaLight;
}


.car_detail_form form textarea{
  font-family: TorokaLight;
}

.car_detail_form form .btn{
  font-family: TorokaMedium;
	margin-top: 10px;
	width: 100%;
}





/*-----------------------------------------------------------------------------------------------------------------------------------------------
Footers
-----------------------------------------------------------------------------------------------------------------------------------------------*/
footer{
	width: 100%;
	background: #0d1011;

}

.footer_section_wrapper{
	width: 80%;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 50px 0;
}

.footer_section{
	width: 25%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;

}

.footer_section h4{
	font-size: 1rem;
	font-weight: 400;
	color: #d4d4d4;
	padding: 20px 0;
}

.footer_section a{
	font-size: .85rem;
	font-weight: 200;
	color: #d4d4d4;
	padding: 2px 0;
	opacity: .9;
}

.footer_section a:hover{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	opacity: 1;
}


.footer_copyright{
	width: 80%;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 50px;
}

.footer_copyright p{
	font-size: .85rem;
	font-weight: 200;
	color: #d4d4d4;
	padding: 2px 0;
	opacity: .9;
}


.footer_copyright a{
	font-size: .85rem;
	font-weight: 200;
	color: #d4d4d4;
	padding: 2px 0;
	opacity: .9;
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------
COMPARE TRAY & COMPARE BUTTON
-----------------------------------------------------------------------------------------------------------------------------------------------*/

/* Floating comparison tray */
.compare-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a3332;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 9999;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
    flex-wrap: wrap;
}

.compare-tray-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.compare-tray-slots {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.compare-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 5px 10px;
    flex: 1;
    min-width: 0;
    max-width: 220px;
    position: relative;
}

.compare-slot--empty {
    border-style: dashed;
    justify-content: center;
    color: rgba(255,255,255,0.25);
    font-size: 0.75rem;
}

.compare-slot-img {
    width: 46px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.compare-slot-name {
    font-size: 0.78rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.compare-slot-remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
}

.compare-slot-remove:hover {
    background: #ef4444;
}

.compare-tray-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.compare-tray-btn {
    padding: 9px 20px;
    background: #2b5554;
    color: #fff !important;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}

.compare-tray-btn:hover {
    background: #3d7574;
    color: #fff;
}

.compare-tray-btn--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.compare-tray-clear {
    padding: 9px 14px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.compare-tray-clear:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}

/* Compare button on detail page */
.compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    color: #555;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
    position: relative;
}

/* Tooltip */
.compare-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a3332;
    color: #fff;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
    width: 240px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.compare-btn::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a3332;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 200;
}

.compare-btn:hover::after,
.compare-btn:hover::before {
    opacity: 1;
}

.compare-btn--active::after,
.compare-btn--active::before {
    display: none;
}

.compare-btn:hover {
    border-color: #2b5554;
    color: #2b5554;
    background: #f0f9f8;
}

.compare-btn--active {
    border-color: #2b5554 !important;
    background: #f0f9f8 !important;
    color: #2b5554 !important;
}

/* Compare page table */
.compare-page {
    width: 95%;
    max-width: 1100px;
    margin: 40px auto 80px;
    padding: 0 16px;
}

.compare-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
}

.compare-cars-header {
    display: grid;
    gap: 16px;
    margin-bottom: 8px;
}

.compare-car-header {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    overflow: hidden;
    text-align: center;
}

.compare-car-header img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.compare-car-header-info {
    padding: 12px 14px 16px;
}

.compare-car-header-name {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.compare-car-header-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2b5554;
    margin-top: 4px;
}

.compare-car-header-link {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 18px;
    background: #2b5554;
    color: #fff;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.compare-car-header-link:hover {
    background: #1a3332;
    color: #fff;
}

.compare-car-header-remove {
    display: inline-block;
    margin-top: 6px;
    margin-left: 8px;
    padding: 7px 14px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.compare-car-header-remove:hover {
    background: #fecaca;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    overflow: hidden;
    margin-top: 16px;
}

.compare-table thead tr {
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.compare-table th {
    padding: 12px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.compare-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.875rem;
    color: #333;
    vertical-align: middle;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table .compare-row-label {
    font-size: 0.78rem;
    color: #888;
    font-weight: 500;
    width: 140px;
    white-space: nowrap;
}

.compare-table .compare-row--diff td {
    background: #fffbeb;
}

.compare-table .compare-row--diff .compare-row-label {
    background: #fffbeb;
}

.compare-table tbody tr:hover td {
    background: #fafafa;
}

.compare-table tbody tr.compare-row--diff:hover td {
    background: #fef9e7;
}

.compare-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    margin-bottom: 20px;
}

.compare-back-btn:hover {
    border-color: #2b5554;
    color: #2b5554;
}

/* Mobile */
@media (max-width: 768px) {
    .compare-tray {
        right: 0;
        bottom: 0;
        border-radius: 0;
        padding: 10px 14px;
        gap: 8px;
    }
    .compare-slot--empty { display: none; }
    .compare-slot { max-width: 130px; }
    .compare-tray-label { display: none; }
    .compare-tray-btn { font-size: 0.78rem; padding: 8px 14px; }
    .compare-tray-clear { display: none; }

    .compare-row-label { width: 110px !important; font-size: 0.72rem !important; }
    .compare-table td { padding: 10px 10px; font-size: 0.78rem; }
}

/* ── Header search ─────────────────────────────────────────────── */

.header_search_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: black;
    font-size: 1.2rem;
    font-weight: 600;
    opacity: .8;
    padding: 0 10px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
        transition: all .4s ease;
    line-height: 1;
}

.header_search_btn:hover,
.header_search_btn:focus {
    opacity: 1;
    color: #9f9ff4;
    outline: none;
}

.header_search_overlay {
    position: fixed;
    top: 10vh;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 98;
    -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.12);
            box-shadow: 0 8px 24px rgba(0,0,0,.12);
    -webkit-transform: translateY(-110%);
        -ms-transform: translateY(-110%);
            transform: translateY(-110%);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);
            transition: transform .3s cubic-bezier(.4,0,.2,1);
    padding: 14px 20px;
    border-top: 1px solid #eee;
}

.header_search_overlay.active {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.header_search_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.header_search_input_wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
}

.header_search_input {
    width: 100%;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.95rem;
    outline: none;
    font-family: inherit;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: border-color .2s, box-shadow .2s;
    -o-transition: border-color .2s, box-shadow .2s;
        transition: border-color .2s, box-shadow .2s;
}

.header_search_input:focus {
    border-color: #9f9ff4;
    -webkit-box-shadow: 0 0 0 3px rgba(159,159,244,.18);
            box-shadow: 0 0 0 3px rgba(159,159,244,.18);
}

/* ── Suggestions dropdown ── */
.header_search_dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    -webkit-box-shadow: 0 8px 32px rgba(0,0,0,.13);
            box-shadow: 0 8px 32px rgba(0,0,0,.13);
    z-index: 300;
    overflow: hidden;
    max-height: 440px;
    overflow-y: auto;
}

.hsd-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f2f2f2;
    -webkit-transition: background .12s;
    -o-transition: background .12s;
        transition: background .12s;
}

.hsd-item:last-of-type {
    border-bottom: none;
}

.hsd-item:hover {
    background: #f6f6ff;
}

.hsd-img {
    width: 64px;
    height: 44px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 7px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background: #eee;
}

.hsd-img--empty {
    background: #e8e8e8;
}

.hsd-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3px;
}

.hsd-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
}

.hsd-meta {
    font-size: 0.76rem;
    color: #888;
}

.hsd-all {
    display: block;
    padding: 11px 14px;
    font-size: 0.84rem;
    color: #9f9ff4;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid #efefef;
    -webkit-transition: background .12s;
    -o-transition: background .12s;
        transition: background .12s;
}

.hsd-all:hover {
    background: #f6f6ff;
    color: #7a7ae0;
}

.hsd-loading,
.hsd-empty {
    padding: 14px;
    font-size: 0.86rem;
    color: #aaa;
    text-align: center;
}

.header_search_submit {
    background: #222;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    -webkit-transition: background .2s;
    -o-transition: background .2s;
        transition: background .2s;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
}

.header_search_submit:hover {
    background: #9f9ff4;
}

.header_search_close {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
        transition: all .2s;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.header_search_close:hover {
    background: #f0f0f0;
    border-color: #bbb;
    color: #222;
}

@media (max-width: 600px) {
    .header_search_input {
        font-size: 0.85rem;
        padding: 9px 12px;
    }
    .header_search_submit {
        padding: 9px 14px;
    }
    .header_search_close {
        padding: 9px 10px;
    }
}