@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 12px;
	line-height: 20px;
	width: 100%;


	  /* font-family: "Russo One", serif!important;
  font-weight: 400!important; */
  font-style: normal!important;
  overflow-x: hidden;
  color: #fff!important;
  background:#fff;
}
h1, h2, h3, h4, h5, h6 {
	color: #444;
}

/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #000000;
}
a:hover {
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
    font-size: 17px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
#top .container {
	padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #444;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* logo */
#logo {
	margin: 0 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* menu */
#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
/* content */
#content {
	min-height: 600px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
/* breadcrumb */
.breadcrumb {
	margin: 22px 0 20px 0;
	padding: 8px 0;
	border: 0px solid #ddd;
}
.breadcrumb a{
    color: #000;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #000000;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
    border-radius: 5px;
        border: 1px solid #f1f1f1;
        margin-bottom: 20px;
        overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
    width: 100%;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
#product-category .product-thumb .caption {
    padding: 0 20px;
    min-height: 171px;

    color: #000;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 260px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
#product-category .product-thumb .price {
    font-size: 17px;
    color: #444;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 100%;
	border: none;
	display: inline-block;
	float: left;
    background-color: #f2cb1c;
    color: #000000;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
        color: #000000;
            background-color: #e7c00f;
            text-decoration: none;
            cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout{
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}
html[dir=rtl] .checkbox input[type="checkbox"],
html[dir=rtl] .checkbox-inline input[type="checkbox"],
html[dir=rtl] .radio input[type="radio"],
html[dir=rtl] .radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px\9;
    margin-right: -20px;
      margin-left: unset;
}
html[dir=rtl] .input-group-btn:last-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
html[dir=rtl] .input-group .form-control:first-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}
html[dir=rtl] .container .row:first-child  .col-sm-4, html[dir=rtl] .container .row:first-child  .col-sm-5 {
  float: right;

}
html[dir=rtl] #cart .dropdown-menu {
  left: 0;
  right: auto;

}
@media (min-width: 768px) {
   
    html[dir=rtl] .navbar-nav {
        float: right;
        margin: 0;
    }
    
    html[dir=rtl] .navbar-nav > li {
        float: right;
    }
   
}




/* NEW LANDING PAGE */

.home-orig h1{color: #000;}
.home-orig h2{color: #000;}

.color-body form input{
color: #000;
}

.color-body{

    font-family: sans-serif!important;
  font-size: 16px!important;
  min-width: 320px;
  position: relative;
  line-height: 1.6;
  /* font-family: "RobotoRegular", sans-serif; */
     font-family: "Russo One", serif!important;
  font-weight: 400!important;
  font-style: normal!important;
  overflow-x: hidden;
  color: #fff!important;
  background: #000000!important;
}

.sect-titel h2{
	color: #fff;
padding-bottom: 30px;
    margin: 0;
    font-size: 40px;
    text-transform: uppercase;
}

/*  */

.header-container-bg{
  margin: 19px;
  background-image: url(https://shippingcars.com.ua/catalog/view/theme/default/image/img/homebg.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  background-position: center;
     /* background: url('https://shippingcars.com.ua/avto/catalog/view/theme/default/image/img/videcar.mp4') no-repeat center center; */

}

.home-orig .header-container-bg{
    overflow: visible;
}
.header-container-bg {
    margin: 19px;
    border-radius: 15px;
    overflow: hidden; /* чтобы видео обрезалось по кругу */
    position: relative; /* для позиционирования видео */
  
}

.header-container-bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover; /* Заполнение как фон */
    z-index: 1;
}

.adress-head{
    color: #ffd620;
    text-align: right;
    max-width: 200px;
}


.header-container-content{
    position: relative;
    max-width: 1230px;
  margin: 0 auto;
  padding: 10px;
  z-index: 10;
}
.header-title{
  padding-top: clamp(40px, 10vh, 158px); /* Адаптивный верхний отступ */
    padding-bottom: clamp(30px, 8vh, 86px); /* Адаптивный нижний отступ */
}
.header-title h1 {
  color: #fff;
  font-size: clamp(28px, 5vw, 48px); /* Минимум 28px, основной 5vw, максимум 48px */
  line-height: clamp(36px, 6vw, 61px); /* Адаптивный line-height */
  text-align: left;
  font-family: "Russo One", serif;
  font-weight: 400;
  font-style: normal;
}


.header-title h1 span{
  color: #FFD620;
}

.row-btn{
   padding-bottom: clamp(50px, 15vh, 212px); /* Адаптивный отступ */
}
.btn-ask-auto{
  
  border-radius: 5px;
    padding: 10px 30px;
    color: #000000;
    font-size: 20px;
    background: #FFD620;
    border: 0px;
}
#product-product .btn-ask-auto{
    width: 100%;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
}

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

.munu-bl {
  display: flex;
  align-items: center;
  gap: 20px; /* Расстояние между элементами */
}


.phone {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
}


.ic-cos ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ic-cos ul li a {
    font-size: 17px;
    color: #fff;
    text-align: center;
    display: block;
    width: 20px;
    height: 20px;
    background-color: transparent;
}




.sect-2-row{
  display: flex;
  padding-bottom: 30px;
}

.colum-s-2{
  width: 50%;
}

.row-img{
  display: flex;
  justify-content: space-evenly;
}

.img-st img{
  border-radius: 10px;
}

/* acordion */

.accordion {
    width: 100%;
    max-width: 500px;
}

.accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 0;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
       padding: 6px 15px;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.number {
    color: yellow;
    font-weight: bold;
    margin-right: 10px;
}

.accordion-content {
    display: none;
    padding: 10px 15px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-header i {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}

/* acordion */



.sect-2{
    max-width: 1120px;
  margin: 0 auto;
  padding: 10px;
}

.desc-section p {
  font-size: 16px;
      max-width: 502px;
}


/* SECTION 3 */

.sect-3{
  position: relative;
  z-index: 5;;
}

.carfax-box {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.container-s3-bg {
    background: #FFD620;
    border-radius: 15px;
    margin: clamp(10px, 5vw, 19px);
    max-width: 100%;
}

.container-s3-bg h2{
color: #000000;
}
.container-s3-bg p{
color: #000000;
}

.containers-width{
    max-width: 1120px;
    margin: 0 auto;
    padding: 23px 20px 85px 20px;
}


.carfox-img {
    right: -23px;
    position: relative;
    border-radius: 15px;
    margin-bottom: 20px;
    top: 58px;
    z-index: 1;
}



.carfax-form {
    z-index: 2;
    position: relative;
    border-radius: 10px;
    padding: 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
}

.carfax-form input {
    box-shadow: 0 0 17px 0px #00000030;
    margin-bottom: 22px;
    padding: 10px;
    border: 0px solid #ccc;
    border-radius: 12px;
}

.carfax-form button {
    display: inline-block;
    width: 268px;
    background: #ffcc00;
    border: none;
    padding: 13px 0;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: #000000;
    margin: 0 auto;
}


.sect-4{
z-index: 1;
    padding-top: 44px;
    position: relative;
    background-image: url(https://shippingcars.com.ua/catalog/view/theme/default/image/img/bg-s4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* top: -89px; */
    background-position: 7px 60%;
}


.containers-width-s4{
    max-width: 1120px;
  margin: 0 auto;
padding: 10px 20px;
}

.row-bl-s4{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.col-s-4{
margin-left: 15px;
    background: #fff;
    max-width: 378px;
    border-radius: 10px;
    padding: 35px 30px;
    margin-bottom: 25px;
    margin-right: 15px;
}
.col-s-4 p{
  color: #000000;
}
.col-s-4 img{

      width: 200px;
}
.barnd-bl{
  text-align: center;
}



.containers-width-s4 .sect-titel{
  max-width: 700px;
}






/* SECTION 9 */

.sect-9{
      padding: 40px 10px;
}

.containers-width-s9{
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
}

.row-9{
    padding: 24px;
    border-radius: 7px;
    border: 2px solid #ffd620;
    display: flex
;
}

.col-s9-1{
    width: 70%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.col-s9-1 p{
   font-size: 16px;
   font-family: "RobotoRegular", sans-serif;
   line-height: 31px;
    padding-right: 20px;
}
.col-s9-2{
    width: 30%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.col-s9-2 ul{
      list-style-type: none;
    font-family: "RobotoRegular", sans-serif;
    line-height: 29px;
    padding: 0;
}
.line-right{
  position: relative;
}
.line-right::after{
     top: 19px;
    position: absolute;
    content: '';
    right: 0;
    height: 180px;
    background: #ffd620;
    width: 1px;
}
.prices {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 20px auto;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.price-item span:first-child {
  white-space: nowrap;
}

.price-item span:last-child {
  white-space: nowrap;
  order: 3;
}

.price-item::before {
  content: "";
  flex-grow: 1;
  border-bottom: 1px dotted white;
  margin: 0 10px;
  order: 2;
}

/* SECTION 10 */



 .bg-s10 {
background-position: center center;
    border-radius: 10px;
    margin: 0 16px;
    background-image: url(https://shippingcars.com.ua/catalog/view/theme/default/image/img/bg-s10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0;
}

.sect-10{
    max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
}

.row-s10{
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.title-s10{
  max-width: 532px;
}

.title-s10 h2{
font-size: 40px;
color: #FFD620;
}

.col-s10 p{
  font-size: 20px;
  max-width: 600px;
}




.col-s10 form input{
    border-radius: 3px;
    width: 324px;
    color: #000000;
    padding: 10px 10px;
    font-family: "RobotoRegular", sans-serif;
    border: 0px;
    display: block;
    margin-bottom: 28px;
}

.col-s10 form button{
    display: block;
    width: 212px;
    border-radius: 5px;
    padding: 10px 20px;
    background: #FFD620;
    color: #000000;
    border: 0px;
    font-family: "RobotoRegular", sans-serif;
}

/* footer */

.footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
                max-width: 1120px;
  margin: 0 auto;
        }
        .logo a img {
            max-width: 150px;
        }
        .social-icons {
   text-align: center;
    display: block;
        }
        .social-icons img {
            width: 24px;
            height: 24px;
        }
        .phone {
            font-size: 18px;
            font-weight: bold;
            text-decoration: none;
            color: #fff;
        }
        .phone:hover {
            text-decoration: underline;
        }

   .social-icons ul{
text-align: center;
    padding: 0;
    display: flex
;
    list-style-type: none;
    justify-content: center;
   }
  .social-icons ul li a {
    padding: 3px 15px;
    font-size: 17px;
    color: #fff;
    text-align: center;
    display: block;
    width: 20px;
    height: 20px;
    background-color: transparent;
}
.adr-footer{
        max-width: 243px;
}
 .social-icons i {font-size: 18px;}






.section5-bg{
	background: #fff;
    border-radius: 19px;
}

 .sect-5{
padding-top: 40px;
padding-bottom: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;;
 }

.sect-5 .sect-titel h2{
color: #000000;
 }

.sect-5 .row{
    margin: 0!important;
}


.sect-5 .product-attributes{
   font-family: 'Open Sans';
    list-style-type: none;
    padding: 0;
    font-size: 14px;
}



.sect-5 .product-thumb {
    border-radius: 10px;
    background: #3A3939;
    border: 0px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}

.sect-5 .product-thumb .caption h4{
 font-weight: normal;
}

.sect-5 .product-thumb .caption h4 a{
	    font-size: 19px;
    color: #ffd620;
}

.sect-5 .product-thumb .caption p{
font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}

.sect-5 .product-thumb .price{
font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: #ffffff;
}
.button-row-avto{
	padding: 27px 0;
    text-align: center;
}
.button-row-avto a{
	    border-radius: 5px;
    padding: 13px 20px;
    color: #000;
    background: #ffd620;
}
.button-row-avto a:hover{
	background: #ab911a;
}
.button-row-avto a i{
   position: relative;
    left: -6px; 
}
/* sect6 */

 .sect-6{
padding-top: 40px;
padding-bottom: 40px;
padding-right: 18px;
    padding-left: 18px;
  max-width: 1120px;
  margin: 0 auto;
 }

.sect-6 .sect-titel h2{
color: #ffff;
 }

.sect-6 .product-thumb {
    border-radius: 10px;
    background: #3A3939;
    border: 0px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}

.sect-6 .product-thumb .caption h4{
 font-weight: normal;
}

.sect-6 .product-thumb .caption h4 a{
    padding-top: 10px;
display: block;
    font-size: 19px;
    color: #ffd620;
    height: 33px;
}

.sect-6 .product-thumb .caption p{
     padding-top: 20px;
font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}

.sect-6 .product-thumb .price{
font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: #ffffff;
}



/* авто під замовлення */


      #results {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки для больших экранов */
    gap: 16px; /* Расстояние между элементами */

}

.item {
font-size: 13px;
    background-color: #212121;
    padding: 0px;
    border-radius: 10px;
    color: #f0f0f0;
    border: 0px solid #494949;
}

.item img{
	border-radius: 10px;
}

.text-content-cart{
       padding: 0 10px 19px 10px;
}

.text-content-cart p{
	    font-family: 'Open Sans', sans-serif;
		    font-weight: 400;
}

.btn-to-calc {
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    text-align: center;
 padding: 10px 23px;
    background: #FFD620;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-to-calc:hover {
    background: #FF7A00;
     color: #FFF;
}

.copart-url-btn {
border-bottom: 1px solid #fff;
    display: inline-block;
    margin-bottom: 16px;
    color: #FFFF;
    text-align: center;
        padding: 0px 0px;
    text-decoration: none;
}


.copart-url-btn:hover {
 color: #fed031;
}

.title-name-car{
    color: #FFD413;
    font-weight: 600;
    font-size: 22px;
    padding: 14px 0 9px 0;
}

@media (max-width: 768px) {
    #results {
        grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
    }
}



.form-title-avto{
	font-size: 20px;
	color: #000;
	text-align: left;
	padding-bottom: 20px;
}

.filter-form-bl{
	background: #fff;
	  margin-bottom: 20px;
	  border-radius: 10px;
	  padding: 4%;
}
        
        #filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    justify-content: flex-start;
    flex-direction: row;

        }

		#filter-form select {
border: 0px;
    background: #D9D9D9;
    border-radius: 6px;
    padding-left: 13px;
    font-family: 'Open Sans', sans-serif;
    height: 38px;
    color: #000;
}

        #filter-form input,
        #filter-form button {
      padding: 8px 12px;
            border-radius: 5px;
        }
/* 
        #filter-form button {
            background-color: #ffa80a;
            color: white;
            cursor: pointer;
                font-size: 14px;
        } */

        #filter-form button:hover {
            background-color: #0056b3;
        }
    #pagination {
    display: flex;
    justify-content: center; /* Центрируем элементы по горизонтали */
    flex-wrap: wrap; /* Разрешаем перенос элементов на новую строку при необходимости */
    gap: 8px; /* Отступы между кнопками */
    margin-top: 20px; /* Отступ сверху */
}

#pagination a {
    padding: 10px 15px; /* Размеры кнопок */
    background-color: #f4f4f4; /* Цвет фона */
    border-radius: 5px; /* Закругленные углы */
    text-decoration: none; /* Убираем подчеркивание */
    color: #333; /* Цвет текста */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s ease; /* Плавный переход при наведении */
}

#pagination a.active {
    background-color: #ffa80a;    color: white; /* Цвет текста для активной страницы */
}

#pagination a:hover {
    background-color: #ddd; /* Цвет фона при наведении */
}




#apply-filters{
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}
#reset-filters {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    background: #9a9a9a;
}
#apply-filters {
     background-color: #FFD620;
    color: #000000;
    width: 123px;

}

#apply-filters:hover {
    background-color: #dcbb26!important;
   
}

#reset-filters {
        background-color: #ff9b20;
    color: #000000;

}

#reset-filters:hover {
    background-color: #e0891e;
}




/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    #pagination a {
        padding: 8px 12px; /* Уменьшаем размер кнопок на мобильных устройствах */
        font-size: 14px; /* Уменьшаем размер шрифта */
    }

    #filter-form{
               margin: 0 auto;
        text-align: center;
        max-width: 368px;
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        flex-direction: column;
    }
    select{
   height: 50px;
    }

   #apply-filters{
     width: 100% !important;
    }
}

.btn-copart-group{
    padding-top: 23px;
    line-height: 27px;
    text-align: center;
}
#load-more-container{
    padding-top: 40px;
}

#load-more{
height: 130px;
    width: 228px;
    color: #000;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    border: 0;
    display: block;
    font-size: 20px;
    background: #FFD620;
    cursor: pointer;
	text-align: center;
}

#load-more:hover{
	 background:#bc9d16;
}

#load-more i{
	font-size: 53px;
	display: block;
}

.title-cop{
text-align: center;
    color: #fff;
    font-size: 2em;
}
.btn-to-calc{
    font-size: 14px!important;  
}
.copart-url-btn{
    font-size: 14px!important;  
}

/* авто під замовлення */



.sect-7{
	max-width: 1120px;
    margin: 0 auto;
    padding: 10px;
}



.home-active{
        color: #ffb103 !important;
}

.home-orig .menu-bl {
    position: relative;
    top: 12px;
}



/* Калькулятор доставки  */

 #calc-block .label-text{color: #000!important;}
  #calc-block label{color: #000!important;font-size: 16px;}

     .container-calc .cow-colum {
            display: flex;
            width: 100%;
            margin: 0 auto;
            justify-content: space-between;
        }
        .container-calc .colum{
            margin: 10px;
            width: 50%;
            padding: 20px;
        }

        .container-calc form {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .container-calc label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .container-calc input::placeholder{
           color: #000 !important; 
        }

        .container-calc input{
              background: #ffffff !important;
                  color: #000 !important;
    height: 37px;
    width: 97%;
    padding: 0 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc !important;
    border-radius: 15px;
        }
        .container-calc select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 15px;
            color: #000000 !important;
        }

        .container-calc button {
           display: block;
    margin: 0 auto;
    width: 200px;
    padding: 10px;
    background-color: #ffd620;
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
        }

        .container-calc button:hover {
            background-color: #d6b41b;
        }

        #data-output {
            max-width: 600px;
            margin: 0px auto;
            padding-top: 59px;
            /* background-color: white; */
            /* border-radius: 8px; */
            /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
            text-align: left;
        }

          #result {
            max-width: 600px;
            margin: 0px auto;
            padding: 0px;
            /* background-color: white; */
            /* border-radius: 8px; */
            /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
            text-align: left;
        }


        /* #priceOutput {
            font-size: 18px;
            margin-top: 10px;
            color: #333;
        } */

        .container-calc .error-flag {
            padding: 4px;
            background: #ff9999;
        }


 
        .container-calc .row-calc{
              font-size: 17px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 0px solid #ddd;
        }
        .container-calc .row-calc:last-child {
            border-bottom: none;
        }
        .container-calc .row-calc span {
            font-weight: bold;
        }
        .container-calc .row-calc .secondary {
            color: #aaa;
            font-weight: normal;
        }
        .container-calc .total {
          
           color: #fff;
            font-size: 18px;
            /* padding-top: 20px; */
        }
        .container-calc{
            
            background: #303030;
            border-radius: 10px;
        }
        
        #result-total div{
                color: #ffa80b;
    font-size: 19px;
    font-weight: 400;
        }

        .container-calc .title-rozm{
            font-size: 20px;
             padding: 14px 0;
        }
        
        
      

         
         
        @media (max-width: 1080px) {
     .container-calc .cow-colum {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-around;
    flex-wrap: wrap;
     }
    #data-output{
            padding-top: 0;
    }
    .container-calc .colum {
    margin: 10px;
    width: 101%;
    padding: 0px;
     }
     .container-calc {
    padding: 20px;
    background: #303030;
     }
        }
        
        
        
        .styled-hr {
padding-bottom: 13px !important;
    margin-bottom: 10px;
    border: none;
    border-top: 2px solid #ffffff;
    margin: 20px 0;
    width: 100%;
}

     


        @media (max-width: 600px) {
            .container-calc form {
                padding: 15px;
            }
            .container-calc button {
                font-size: 18px;
            }
        }


/* MODAL STYLE */

      .modalformcontact {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0 0 0 / 85%);
}
.modalformcontact .modal-content{
    border: 0px;
    box-shadow: none;
    background: transparent;
}

.modal-content {
    margin: 5% auto;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    position: relative;
}
/* Общий стиль для модального окна */
#modal-body-contactform {
    background-color: #ffdc00;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#modal-body-contactform .success-message{
    color: #000;
}
.carfax-box .success-message{
    color: #000;
}
#modal-body-contactform span{
    border-radius: 0px 0px 5px 5px;
    color: #fff;
    font-size: 20px;
    background: #000;
    padding: 0 10px;
    position: absolute;
    top: 0;
}

#contact-form img{
    width: 112px;
    margin: 0 auto;
}

/* Стили для формы */
#contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#contact-form input::placeholder{
    color: #000000;
}
.modal-title-contact{
       font-size: 23px;
    text-align: center;
}
.cont-title{
    padding: 0px 0;
    color: #000;
}
.modal-desk-contact{
   text-align: center;
}
/* Стили для полей ввода */
#contact-form input[type="text"],
#contact-form input[type="tel"] {
   padding: 16px 10px;
    font-size: 16px;
    border: 0px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    color: #000;
}

/* Стили для меток */
#contact-form label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Стиль кнопки отправки */
#contact-form button[type="submit"] {
    background-color: #000000;
    color: white;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Изменение цвета кнопки при наведении */
#contact-form button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Стиль для ошибок и сообщений */
#form-message {
    font-size: 14px;
    color: green;
    margin-top: 15px;
}

#form-message.error {
    color: red;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    #modal-body-contactform {
        padding: 15px;
    }

    #contact-form input[type="text"],
    #contact-form input[type="tel"],
    #contact-form button[type="submit"] {
        font-size: 14px;
    }
}

/* MODAL STYLE */

/* Стили для формы */
#contact-form-3 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#contact-form-3 input::placeholder {
    color: #000000;
}

.modal-title-contact {
    font-size: 23px;
    text-align: center;
}

.cont-title {
    padding: 0px 0;
    color: #000;
}

.modal-desk-contact {
    text-align: center;
}

/* Стили для полей ввода */
#contact-form-3 input[type="text"],
#contact-form-3 input[type="tel"] {
    padding: 16px 10px;
    font-size: 16px;
    border: 0px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    color: #000;
}

/* Стили для меток */
#contact-form-3 label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Стиль кнопки отправки */
#contact-form-3 button[type="submit"] {
    background-color: #000000;
    color: white;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Изменение цвета кнопки при наведении */
#contact-form-3 button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Стиль для ошибок и сообщений */
#form-message {
    font-size: 14px;
    color: green;
    margin-top: 15px;
}

#form-message.error {
    color: red;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    #modal-body-contactform {
        padding: 15px;
    }

    #contact-form-3 input[type="text"],
    #contact-form-3 input[type="tel"],
    #contact-form-3 button[type="submit"] {
        font-size: 14px;
    }
}


#contact-form-3 img{
    max-width: 109px;
     margin: 0 auto;
}

/* MODAL STYLE */


/* BANER */
.baner-name-user{
    color: #000;
    text-align: left;
    font-size: 20px;
}
.baner-desk-user{

    text-align: left;
    color: #000;
    font-size: 14px;
        font-family: 'Open Sans';
}



.sect-11-bg{
    background: #fff;
    border-radius: 19px;
    max-width: 1344px;
     margin: 0 auto;
}
.sect-11{
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
}
.sect-11 .sect-titel h2{
    color: #000000;
}

.sect-11 .swiper-viewport {
  box-shadow:0 0px 0px rgba(0, 0, 0, .2);
}
.sect-11 .swiper-slide img{
    border-radius:10px ;
    width: 100%;
}
.desk-product{
    color: #000;
        font-family: 'Open Sans';
}
.thumbnail{
    border: 0px solid #ddd;
}
.thumbnail img{
    border-radius: 10px;
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 0px solid #ddd;
}
.table-bordered {
    border: 0px solid #ddd;
}

.table tbody tr {
  display: flex; /* Flex для автоматического выравнивания */
  justify-content: space-between; /* Распределение текста по краям */
  align-items: center; /* Выравнивание по вертикали */
}

.table tbody tr td {
  padding: 5px 0; /* Чтобы выглядело аккуратно */
  white-space: nowrap; /* Не переносить текст */
}

.table tbody tr td:first-child {
  position: relative; /* Для псевдоэлемента */
  flex: 1; /* Чтобы колонка растягивалась */
}

.table tbody tr td:first-child::after {
  content: ""; /* Псевдоэлемент */
  display: block;
  border-bottom: 1px dotted #ccc; /* Пунктирная линия */
  width: 100%; /* Полная ширина */
  position: absolute; 
  bottom: 50%; /* Чтобы линия была посередине текста */
  left: 0;
  z-index: -1; /* Чтобы линия была за текстом */
}

.table tbody tr td:last-child {
  text-align: right; /* Значение справа */
  background: #fff; /* Чтобы пунктир не заходил под текст */
  padding-left: 10px; /* Для красивого отступа */
  z-index: 1; /* Значение поверх пунктира */
}

.home-orig   .header-container-bg {

    background: #000000;
     margin: 0 0 0px 0; 
    background-image: none; 
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px; 
    background-position: center;

}
.home-orig  footer{
    max-width: 100%;
}

/* MENU */

.menu-bl ul {
  display: flex; /* Выравнивание в линию */
  justify-content: center; /* Центрирование */
  gap: 20px; /* Расстояние между пунктами */
  list-style: none; /* Убираем точки */
  padding: 0;
  margin: 0;
}
.menu-bl ul li a {
  color: white; /* Белый текст */
  text-decoration: none; /* Убираем подчеркивание */
  font-size: 18px;

        font-family: "Russo One", serif!important;
          font-weight: 400!important;
}
.menu-bl ul li a:hover{
    color: #ffd620;
}

.menu-close{
    display: none;
}
.menu-btn{
    display: none;
}

.menu-bl{
        position: relative;
       top: -19px;
}
/* Гамбургер на весь экран */
@media (max-width: 1015px) {
  .menu-bl ul {
    display: none; /* Скрываем меню */
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Полупрозрачный фон */
    z-index: 10;
  }
  .menu-bl ul.active {
    display: flex; /* Показываем меню при активации */
  }
  .menu-btn {
    display: block;
    cursor: pointer;
    text-align: center;
    color: white;
    font-size: 30px;
  }
    .menu-btn {
    border-radius: 0 0 10px 10px;
        background: #000;
        display: block;
        width: 42px;
        top: -46px;
        left: 0px;
        position: relative;
    }
  .menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    display: block;
  }
  .menu-bl ul.active + .menu-close {
    display: block;
  }
}


.phone a{
    color: #fff;
}

.phone a:hover{
text-decoration: none;
}
.baner-name-user{
    display: none;
}

.img-st video{
      border: 2px solid #ffd620;
    border-radius: 10px;
    width: 100%;
}

/* quize */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap');
body.modal-open {
    overflow: hidden;
    /* Запрещаем прокрутку фона, когда модальное окно открыто */
}

form.quiz-form input {
    color: #c9c9c9;
}
.button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.button_open_quiz_popup {
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
    transition: all 0.3s ease;
}

.button_open_quiz_popup:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.5);
}


/* --- СТИЛИ МОДАЛЬНОГО ОКНА --- */
.quiz-modal {
    display: none;
    /* Изначально скрыто */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(18, 18, 28, 0.95);
    /* Полупрозрачный фон */
    animation: fadeIn 0.3s;
}

.quiz-modal-content {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-modal-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #aaa;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: #fff;
    text-decoration: none;
}


/* --- СТИЛИ САМОГО КВИЗА (внутри модального окна) --- */
.quiz-container {
    background-color: #1a1a2e;
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
    position: relative;
    max-height: 90vh;
    /* Ограничиваем высоту */
    overflow-y: auto;
    /* Добавляем скролл, если контент не помещается */
}

.quiz-step {
    display: none;
}

.quiz-step.active {
    display: block;
    animation: stepFadeIn 0.5s;
}

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.quiz-step h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
}

.quiz-step .subtitle {
    font-size: 1.5rem;
    color: #a0a0b8;
    margin-bottom: 40px;
}

/* Шаг 1: Интро */
.quiz-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

@media (min-width: 768px) {
    .quiz-intro-content {
        flex-direction: row;
        text-align: left;
    }

    .intro-right {
        text-align: left;
    }
}

.intro-left {
    display: flex;
        align-items: center;
        gap: 14px;
        color: #fff;
        flex-direction: column-reverse;
}

.intro-logo-text .rating {
    font-size: 1.2rem;
    color: #f39c12;
    display: block;
}

.intro-logo-text h2 {
    font-size: 2rem;
    margin: 5px 0;
}

.intro-logo-text span {
    color: #3498db;
}

.intro-right h2 {
    font-size: 2.8rem;
    margin: 0 0 10px;
    color: #fff;
}

.intro-right p {
    color: #a0a0b8;
    margin-bottom: 20px;
}

.intro-right .next-btn {
    width: 100%;
    font-size: 1.8rem;
}

/* Опции выбора */
.quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .quiz-options {
        grid-template-columns: 1fr 1fr;
    }
}

.quiz-options label {
    background-color: #24243b;
    border: 1px solid #40405f;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.quiz-options label:hover {
    background-color: #2f2f4a;
    border-color: #8a63d2;
}

.quiz-options input[type="radio"] {
    display: none;
}

.quiz-options input[type="radio"]+span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #a0a0b8;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.2s;
    vertical-align: middle;
}

.quiz-options input[type="radio"]:checked+span::before {
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.quiz-options label.selected {
    border-color: #e74c3c;
    background-color: #3a2c38;
}

/* Поля ввода */
.quiz-text-input {
    background-color: #24243b;
    border: 1px solid #40405f;
    color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    font-size: 2rem;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.agreement {
    font-size: 1.3rem;
    color: #a0a0b8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    cursor: pointer;
}

.agreement input[type="checkbox"] {
    margin-right: 10px;
}

/* Навигация */
.quiz-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.quiz-nav-btn,
.quiz-submit-btn {
    background-color: #e74c3c;
    color: #fff;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    transition: background-color 0.2s, transform 0.2s;
}

.quiz-nav-btn:hover,
.quiz-submit-btn:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

.quiz-nav-btn.prev-btn {
    background-color: #40405f;
}

.quiz-nav-btn.prev-btn:hover {
    background-color: #53537a;
}

/* --- СТИЛИ ДЛЯ УНИКАЛЬНОЙ КНОПКИ №2 --- */
.unique-quiz-button {
    background: linear-gradient(45deg, #4a00e0, #8e2de2);
    color: white;
    padding: 18px 35px;
    font-size: 2.1rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(142, 45, 226, 0.4);
}

.unique-quiz-button span {
    font-size: 1.5rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.unique-quiz-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(142, 45, 226, 0.6);
}

.unique-quiz-button:hover span {
    transform: rotate(20deg) scale(1.2);
}

/* Эффект при клике */
.unique-quiz-button:active {
    transform: translateY(-2px);
}


/* --- СТИЛИ ДЛЯ УНИКАЛЬНОЙ КНОПКИ №2 --- */
.unique-quiz-button {
    background: linear-gradient(45deg, #4a00e0, #8e2de2);
    color: white;
    padding: 18px 35px;
    font-size: 2.1rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(142, 45, 226, 0.4);
    margin: 0 auto;
}

.unique-quiz-button span {
    font-size: 1.5rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.unique-quiz-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(142, 45, 226, 0.6);
}

.unique-quiz-button:hover span {
    transform: rotate(20deg) scale(1.2);
}

/* Эффект при клике */
.unique-quiz-button:active {
    transform: translateY(-2px);
}

/* --- СТИЛИ ДЛЯ СООБЩЕНИЯ ОБ УСПЕХЕ --- */
.quiz-success-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    text-align: center;
    animation: fadeIn 0.5s;
}

.quiz-success-message h2 {
    font-size: 3rem;
    color: #2ecc71;
    /* Зеленый цвет успеха */
    margin-bottom: 15px;
}

.quiz-success-message p {
    font-size: 1.4rem;
    color: #bdc3c7;
    /* Светло-серый текст */
}
.quiz-options label{
    font-size: 17px;
}

.cvise-sct .sect-titel h2{
    color: #000;
}

.product-attributes{
    padding: 10px;
}
.atribute-name{
    color: #747474;
}
.atribute-value{
    color: #1c1c1c;
}
#product-category .input-group-addon{
    background-color: #ffffff;
        border: 1px solid #000000;
        color: #000000;
}
#product-category .form-control{
        border: 1px solid #000000;
        color: #000000;
}
.category-btn-style{
text-align: center;
    padding: 10px 0;
    display: block;
    color: #000000;
    text-shadow: none;
    background-color: #edc929;
    background-image: none;
    background-repeat: repeat-x;
    border-color: transparent;
    width: 100%;
    margin: 0 auto;
}
.category-btn-style:hover{
background-color: #dfb911;
    color: #000000;
}
.category-btn-style:active {
    background-color: #dfb911;
    color: #000000;
}


/* STO */

 .sto-wrapper {
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
 }

 @media (min-width: 768px) {
     .sto-wrapper {
         width: 750px;
     }
 }

 @media (min-width: 992px) {
     .sto-wrapper {
         width: 970px;
     }
 }

 @media (min-width: 1200px) {
     .sto-wrapper {
         width: 1170px;
     }
 }

 .sto-section {
     padding: 60px 0;
 }

 .sto-section-title {
     font-family: 'Russo One', sans-serif;
     font-size: 36px;
     color: #222529;
     text-align: center;
     margin-bottom: 50px;
     position: relative;
 }

 .sto-section-title::after {
     content: '';
     display: block;
     width: 80px;
     height: 4px;
     background-color: #fec900;
     margin: 15px auto 0;
 }

 .sto-section-intro {
     color: #555;
     max-width: 800px;
     margin: -30px auto 40px;
     font-size: 16px;
     text-align: center;
 }

 .sto-hero-section {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 10%)), url('https://shippingcars.com.ua/catalog/view/theme/default/image/sto-img/2025-07-22-18.32.11.jpg') no-repeat center center;
     background-size: cover;
     color: #ffffff;
     padding: 120px 0;
     text-align: center;
 }

 .sto-hero-section h1 {
     font-family: 'Russo One', sans-serif;
     font-size: 48px;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     color: #ffffff;
 }

 .sto-hero-section p {
     font-size: 20px;
     margin-bottom: 60px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     color: #ffffff;
 }

 .sto-btn-main {
     background-color: #fec900;
     color: #222529;
     border: none;
     font-family: 'Russo One', sans-serif;
     padding: 15px 35px;
     font-size: 18px;
     border-radius: 5px;
     transition: all 0.3s ease;
     text-transform: uppercase;
 }

 .sto-btn-main:hover {
     background-color: #ffffff;
     color: #222529;
     transform: translateY(-3px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .sto-benefits-section {
     background-color: #f5f5f5;
 }

 .sto-benefit-item {
     text-align: center;
     padding: 20px;
 }

 .sto-benefit-item .sto-icon {
     font-size: 48px;
     color: #fec900;
     margin-bottom: 20px;
 }

 .sto-benefit-item h3 {
     font-family: 'Russo One', sans-serif;
     font-size: 22px;
     color: #222529;
     margin-bottom: 10px;
 }

 .sto-benefit-item p {
     color: #555;
     font-size: 15px;
 }

 .sto-price-table {
     font-size: 16px;
 }

 .sto-price-table thead th {
     background-color: #222529;
     color: #ffffff;
     font-family: 'Russo One', sans-serif;
 }

 .sto-price-table tbody td {
     color: #333;
 }

 .sto-price-table tbody tr:nth-child(odd) {
     background-color: #f5f5f5;
 }

 .sto-price-table td,
 .sto-price-table th {
     padding: 15px;
     vertical-align: middle;
 }

 .sto-testimonials-section {
     background-color: #f5f5f5;
 }

 .sto-testimonial-card {
     background: #ffffff;
     padding: 30px;
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     text-align: center;
     margin-bottom: 20px;
 }

 .sto-testimonial-card p {
    line-height: 23px;
        font-size: 19px;
        font-style: italic;
        color: #000000;
        margin-bottom: 20px;
 }

 .sto-testimonial-card .sto-author {
     font-weight: bold;
     font-family: 'Russo One', sans-serif;
     color: #222529;
    font-size: 17px;
 }

 .sto-testimonial-card .sto-stars {
     color: #fec900;
 }

 .sto-gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
 }

 .sto-price-table tbody tr {
     display: table-row;
 }

 .sto-price-table tbody td,
 .sto-price-table thead th {
     display: table-cell;
     width: auto !important;
 }

 .sto-gallery-grid img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
 }

 .sto-gallery-grid img:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 .sto-appointment-block {
     background-color: #333;
     padding: 40px;
     border-radius: 8px;
 }

 .sto-appointment-block .sto-section-title {
     color: #ffffff;
 }

 .sto-appointment-block .sto-section-title::after {
     background-color: #fec900;
 }

 .sto-appointment-block .form-control {
     border-radius: 4px;
     height: 45px;
     color: #333;
 }

 .sto-appointment-block .form-control:focus {
     border-color: #fec900;
     box-shadow: 0 0 5px rgba(254, 201, 0, 0.5);
 }

 .sto-appointment-block .control-label {
     color: #ffffff;
     font-weight: 400;
     font-size: 15px;
 }

 #sto-form-status .alert {
     color: #333;
     margin-top: 20px;
 }

 .sto-map-info {
     color: #333;
     text-align: center;
     font-size: 16px;
 }

 .sto-map-info strong {
     color: #000;
 }

 .sto-map-section iframe {
     width: 100%;
     height: 450px;
     border: 0;
     border-radius: 8px;
 }


 .sto-section .table tbody tr td:first-child::after{
    display: none;
 }

 .sto-section .table-bordered>tbody>tr>td,
 .sto-section .table-bordered>tbody>tr>th,
 .sto-section .table-bordered>tfoot>tr>td,
 .sto-section .table-bordered>tfoot>tr>th,
 .sto-section .table-bordered>thead>tr>td,
 .sto-section .table-bordered>thead>tr>th {
    border: 1px solid #ddd;
}

.sto-section .table tbody tr td {
    padding: 11px;
    white-space: nowrap;
}
.sto-section .table tbody tr td:last-child {
    text-align: left;
    background: #fff;
    padding-left: 10px;
    z-index: 1;
}
 @media (max-width: 991px) {
     .sto-hero-section h1 {
         font-size: 36px;
     }

     .sto-hero-section p {
         font-size: 18px;
     }

     .sto-section-title {
         font-size: 28px;
     }
 }


/* ================================================= */
/* СТИЛИ ДЛЯ КАЛЕНДАРЯ (BOOTSTRAP DATETIMEPICKER)    */
/* ================================================= */

/* Основной контейнер календаря */
.bootstrap-datetimepicker-widget {
    background-color: #333;
    border: 1px solid #555;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

/* Верхний переключатель месяца и года */
.bootstrap-datetimepicker-widget .picker-switch {
    background-color: #222529;
    color: #fec900;
    font-weight: bold;
}

.bootstrap-datetimepicker-widget .picker-switch:hover {
    background-color: #444;
}

/* Заголовки дней недели (Пн, Вт, Ср...) */
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    color: #aaa;
}

/* Стрелки "вперед" и "назад" */
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next {
    color: #fec900;
    font-size: 18px;
}

.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover {
    background-color: #444;
}

/* Обычные дни */
.bootstrap-datetimepicker-widget td.day {
    color: #fff;
}

.bootstrap-datetimepicker-widget td.day:hover {
    background-color: #555;
    color: #fff;
}

/* Сегодняшний день (слегка подсвечен) */
.bootstrap-datetimepicker-widget td.today {
    background-color: rgba(254, 201, 0, 0.2);
}

.bootstrap-datetimepicker-widget td.today:hover {
    background-color: rgba(254, 201, 0, 0.4);
}

/* Активный (выбранный) день */
.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover {
    background-color: #fec900;
    color: #222529;
    text-shadow: none;
}

/* Дни из другого месяца (серые, неактивные) */
.bootstrap-datetimepicker-widget td.old,
.bootstrap-datetimepicker-widget td.new {
    color: #666;
}

/* Убираем лишние тени у иконок, если они есть */
.bootstrap-datetimepicker-widget .glyphicon {
    text-shadow: none;
}
/* Стиль для активного пункта меню */
.header-menu ul li a.home-active {
    color: #fec900;
    /* Ваш фирменный желтый цвет */
    font-weight: bold;
    border-bottom: 2px solid #fec900;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #222529;
    border-color: #000000;
}
.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #000000;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

#product-product {
    padding-top: 40px;
}
.logo-img {
  max-height: 0;
  height: auto;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* avtopidbir-page */

/* --- Повністю ізольовані стилі для сторінки Shipping Cars --- */
.sc-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.sc-page {
    font-family: 'Montserrat', sans-serif;
    color: #cccccc;
    line-height: 1.7;
    background-color: #121212;
    overflow-x: hidden;
}

.sc-page {
    font-family: 'Montserrat', sans-serif;
    color: #cccccc;
    line-height: 1.7;
    overflow-x: hidden;
    /* ВИРІШЕННЯ: Градієнт "Аврора" і темний фон об'єднані тут */
    background:
        radial-gradient(circle at 15% 25%, hsla(45, 100%, 50%, 0.15), transparent 40%),
        radial-gradient(circle at 85% 65%, hsla(45, 100%, 50%, 0.1), transparent 35%),
        #121212;
    background-attachment: fixed;
    /* Це важливо, щоб фон не прокручувався зі сторінкою */
}

.sc-page .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.sc-page h1,
.sc-page h2,
.sc-page h3 {
    color: #f5f5f5;
    margin-bottom: 20px;
    font-weight: 700;
}

.sc-page h2 {
    text-align: center;
    font-size: 4.4rem;
    /* Збільшено в 2 рази: 2.2rem * 2 = 4.4rem */
    margin-bottom: 60px;
    position: relative;
}

.sc-page h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(45deg, #f0b900, #ffd700);
}

.sc-page section {
    padding: 24px 0;
}

.sc-page .btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.sc-page .btn-primary {
    font-size: 2rem;
    background: linear-gradient(45deg, #f0b900, #ffd700);
    color: #1a1a1a;
    border: none;
    box-shadow: 0 4px 20px rgba(240, 185, 0, 0.25);
}

.sc-page .btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 7px 30px rgba(240, 185, 0, 0.4);
}

.sc-page .btn-secondary {
    font-size: 2rem;
    background-color: transparent;
    color: #f5f5f5;
    border: 2px solid #f5f5f5;
}

.sc-page .btn-secondary:hover {
    background-color: #f5f5f5;
    color: #121212;
    box-shadow: 0 0 20px rgba(245, 245, 245, 0.2);
}

/* --- Header --- */
.sc-page .header {
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sc-page .header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.sc-page .logo {
    font-size: 3.6rem;
    /* Збільшено в 2 рази: 1.8rem * 2 = 3.6rem */
    font-weight: 700;
    text-decoration: none;
    color: #f5f5f5;
}

.sc-page .logo span {
    background: linear-gradient(45deg, #f0b900, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sc-page .nav-list {
    display: flex;
    list-style: none;
    gap: 30px;
}

.sc-page .nav-list a {
    text-decoration: none;
    color: #adb5bd;
    font-weight: 600;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 5px;
}

.sc-page .nav-list a:hover {
    color: #f5f5f5;
}

.sc-page .nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, #f0b900, #ffd700);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease-out;
}

.sc-page .nav-list a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


.sc-page .call-button {
    text-decoration: none;
    font-weight: 600;
    color: #f0b900;
    border: 2px solid #f0b900;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.sc-page .call-button:hover {
    background-color: #f0b900;
    color: #121212;
    box-shadow: 0 0 15px rgba(240, 185, 0, 0.5);
}

.sc-page .menu-toggle {
    display: none;
    font-size: 3rem;
    /* Збільшено в 2 рази: 1.5rem * 2 = 3rem */
    background: none;
    border: none;
    color: #f5f5f5;
    cursor: pointer;
}

/* --- Hero Section --- */
.sc-page .hero {
    background: linear-gradient(rgb(0 0 0 / 24%), rgb(0 0 0 / 31%)), url(https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=2070&auto=format&fit=crop) no-repeat center center / cover;
    color: #f5f5f5;
    padding: 120px 0;
    text-align: center;
}

.sc-page .hero-content h1 {
    font-size: 4rem;
    /* Збільшено в 2 рази: 5rem * 2 = 10rem */
    color: #f5f5f5;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.sc-page .hero-content p {
    font-size: 2.7rem;
    /* Збільшено в 2 рази: 2.2rem * 2 = 4.4rem */
    margin-bottom: 30px;
}

.sc-page .hero-content ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.sc-page .hero-content ul li {
    font-weight: 600;
}

.sc-page .hero-content ul li i {
    color: #f0b900;
    margin-right: 8px;
}

/* --- Advantages & other cards (Glassmorphism) --- */
.sc-page .advantage-card,
.sc-page .tariff-card,
.sc-page .problem-item,
.sc-page .timeline-content,
.sc-page .faq-item {
    background: rgba(28, 28, 28, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.sc-page .advantage-card:hover,
.sc-page .tariff-card:hover {
    transform: translateY(-10px);
    background: rgba(44, 44, 44, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Advantages Section --- */
.sc-page .advantages {
    background-color: transparent;
}

.sc-page .advantages .container {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    flex-wrap: wrap;
}

.sc-page .advantage-card {
    padding: 40px;
    text-align: center;
    flex-basis: 30%;
}

.sc-page .advantage-card i {
    font-size: 6rem;
    /* Збільшено в 2 рази: 3rem * 2 = 6rem */
    margin-bottom: 20px;
    background: linear-gradient(45deg, #f0b900, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Problems Section --- */
.sc-page .problems-section {
    background-color: transparent;
}

.sc-page .problems-section h2 {
    margin-bottom: 20px;
}

.sc-page .problems-section p {
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 40px;
    font-style: italic;
    color: #adb5bd;
}

.sc-page .problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    text-align: center;
}

.sc-page .problem-item {
    padding: 20px;
    font-weight: 600;
}

.sc-page .problem-item i {
    display: block;
    font-size: 4rem;
    /* Збільшено в 2 рази: 2rem * 2 = 4rem */
    color: #adb5bd;
    margin-bottom: 10px;
}

/* --- Tariffs Section --- */
.sc-page .tariffs {
    background-color: transparent;
}

.sc-page .tariffs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.sc-page .tariff-card {
    padding: 30px;
    text-align: center;
    border: 2px solid transparent;
}

.sc-page .tariff-card.popular {
    border-color: #f0b900;
    transform: scale(1.05);
}

.sc-page .tariff-card.popular:hover {
    transform: scale(1.1) translateY(-10px);
}

.sc-page .tariff-card h3 {
    font-size: 2.8rem;
    /* Збільшено в 2 рази: 1.4rem * 2 = 2.8rem */
}

.sc-page .tariff-card .price {
    font-size: 5rem;
    /* Збільшено в 2 рази: 2.5rem * 2 = 5rem */
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #f0b900, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sc-page .tariff-card ul {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
}

.sc-page .tariff-card ul li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.sc-page .tariff-card ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #28a745;
    position: absolute;
    left: 0;
}

.sc-page .tariff-card ul li.plus::before {
    content: '\f067';
}


/* --- How It Works --- */
.sc-page .timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.sc-page .timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.sc-page .timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

.sc-page .timeline-item:nth-child(odd) {
    left: 0;
}

.sc-page .timeline-item:nth-child(even) {
    left: 50%;
}

.sc-page .timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: #121212;
    border: 4px solid #f0b900;
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

.sc-page .timeline-item:nth-child(even)::after {
    left: -10px;
}

.sc-page .timeline-content {
    padding: 20px 30px;
    position: relative;
}

.sc-page .timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
}

/* --- Check Section --- */
.sc-page .check-section,
.sc-page .reviews,
.sc-page .faq,
.sc-page .contact-form-section,
.sc-page .cta-section {
    background-color: transparent;
    position: relative;
}

.sc-page .check-grid {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    gap: 30px;
    flex-wrap: wrap;
}

.sc-page .check-category ul {
    list-style: none;
}

.sc-page .check-category ul li {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.sc-page .check-category ul li::before {
    content: '✓';
    color: #f0b900;
    margin-right: 10px;
    font-weight: bold;
}

.sc-page .check-section h3 {
    text-align: center;
}

.sc-page .equipment-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.sc-page .equipment-list span {
    font-size: 1.7rem;
    background: rgba(28, 28, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 20px;
}

.sc-page .equipment-list i {
    margin-right: 8px;
    color: #f0b900;
}


/* --- Reviews Slider --- */
.sc-page .slider-container {
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

.sc-page .slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.sc-page .slide {
    min-width: 33%;
    padding: 0 15px;
}

.sc-page .slide img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sc-page .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 3rem;
    /* Збільшено в 2 рази: 1.5rem * 2 = 3rem */
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.sc-page .slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.sc-page .slider-btn.prev {
    left: -10px;
}

.sc-page .slider-btn.next {
    right: -10px;
}

/* --- FAQ Section --- */
.sc-page .faq-item {
    margin-bottom: 10px;
}

.sc-page .faq-item summary {
    font-size: 2rem;
    padding: 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f5f5f5;
}

.sc-page .faq-item summary i {
    transition: transform 0.3s ease;
}

.sc-page .faq-item details[open] summary i {
    transform: rotate(180deg);
}

.sc-page #contact-form{
text-align: center;
}


.sc-page .faq-item p {
    font-size: 1.5rem;
        padding: 15px 20px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: #adb5bd;
}

/* --- Contact Form & CTA --- */
.sc-page .contact-form-section form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sc-page .contact-form-section input,
.sc-page .contact-form-section textarea {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(28, 28, 28, 0.7);
    color: #ffff!important;
    transition: all 0.3s ease;
}

.sc-page .contact-form-section input:focus,
.sc-page .contact-form-section textarea:focus {
    outline: none;
    border-color: #f0b900;
    box-shadow: 0 0 15px rgba(240, 185, 0, 0.3);
}

.sc-page .contact-form-section input::placeholder,
.sc-page .contact-form-section textarea::placeholder {
    color: #ffff;
}

/* --- Footer --- */
.footer {

color: #adb5bd;
    padding: 60px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 1200px;
    margin: 0 auto;
}

.sc-page .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.sc-page .footer-col h3 {
    color: #f5f5f5;
    margin-bottom: 20px;
}

.sc-page .footer-col p {
    margin-bottom: 10px;
}

.sc-page .footer-col i {
    color: #f0b900;
    margin-right: 10px;
}

.sc-page .footer a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sc-page .footer a:hover {
    color: #f5f5f5;
}

.sc-page .social-icons a {
    font-size: 3rem;
    /* Збільшено в 2 рази: 1.5rem * 2 = 3rem */
    margin-right: 15px;
}

.sc-page .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #495057;
}

/* --- Responsive Styles --- */
@media (max-width: 992px) {
    .sc-page .header {
        background: rgba(18, 18, 18, 0.85);
    }

    .sc-page .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 81px;
        left: 0;
        width: 100%;
        background-color: #121212;
        text-align: center;
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sc-page .nav-list.active {
        display: flex;
    }

    .sc-page .nav-list li {
        margin-bottom: 15px;
    }

    .sc-page .menu-toggle {
        display: block;
    }

    .sc-page .call-button {
        display: none;
    }

    .sc-page .slide {
        min-width: 50%;
    }

    .sc-page .timeline-item,
    .sc-page .timeline-item:nth-child(even) {
        left: 0;
        width: 100%;
        padding-left: 70px;
        padding-right: 20px;
    }

    .sc-page .timeline::after {
        left: 31px;
    }

    .sc-page .timeline-item::after {
        left: 21px;
    }

    .sc-page .timeline-item:nth-child(odd) .timeline-content {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .sc-page h1 {
        font-size: 4.4rem;
        /* Збільшено в 2 рази: 2.2rem * 2 = 4.4rem */
    }

    .sc-page .hero-content ul {
        flex-direction: column;
        gap: 15px;
    }

    .sc-page .advantages .container {
        flex-direction: column;
    }

    .sc-page .slide {
        min-width: 100%;
    }

    .sc-page .slider-btn {
        width: 40px;
        height: 40px;
    }

    .sc-page .slider-btn.prev {
        left: 5px;
    }

    .sc-page .slider-btn.next {
        right: 5px;
    }
}
.sc-page .cta-section{
    text-align: center;
}

.center-footer{text-align: center;}
.live-search ul li .product-add-cart{
    display: none;
}
.live-search .view-all-results {
    color: #ffffff!important;
}
.live-search .result-text{
    background-color: #000000!important;
}

.sc-page .hero-content ul{font-size: 25px;}

.sc-page .contact-form-section input::placeholder,
.sc-page .contact-form-section textarea::placeholder {
    color: #ffff!important;

    opacity: 1;
  
}

.sc-page .contact-form-section input::-webkit-input-placeholder,
.sc-page .contact-form-section textarea::-webkit-input-placeholder {
    color: #ffff;
}

.sc-page .contact-form-section input:-ms-input-placeholder,
.sc-page .contact-form-section textarea:-ms-input-placeholder {
    color: #ffff;
}

/* --- Блок насторінці категорій --- */

.promo-block {
    position: relative;
    padding: 60px 30px;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('https://shippingcars.com.ua/catalog/view/theme/default/image/avtosalon.jpeg');
}

.promo-block h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
        color: #fec900;
}

.promo-block p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px auto;
    opacity: 0.9;
}

.promo-block .cta-button {
    display: inline-block;
    background-color: #007bff;
    color: #ffffff;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.promo-block .cta-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.promo-block .phone-info {
    margin-top: 25px;
    font-size: 0.9rem;
}

.promo-block .phone-info span {
    opacity: 0.8;
    margin-right: 10px;
}

.promo-block .phone-info a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.promo-block .phone-info a:hover {
    text-decoration: underline;
}
.bl-promo-text{
    color: #fff;
        margin: 0 auto;
        background: #000000b8;
        max-width: 800px;
        padding: 10px 12px;
}

.bl-promo-text p{
line-height: 2.5rem;
    font-size: 2.5rem;
}


@media (max-width: 768px) {
    .promo-block h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #fec900;
        }
.bl-promo-text p {
        line-height: 2.5rem;
        font-size: 1.5rem;
    }

}

.time-work{
font-size: 14px;
    text-align: right;
    max-width: 166px;
}
.worl-time-footer{
        color: #000;
            background: #fec900;
            text-align: center;
}
.stock-status{
    position: absolute;
}

.sell-status-futured {
    position: absolute;
    top: 19px;
    left: 49px;
    transform: translate(-50%, -50%) rotate(-25deg);
    background-color: rgba(220, 20, 60, 0.9);
    color: #fff;
    padding: 8px 20px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

/* АВТО З ЭВРОПИ */

/* ======================= GENERAL STYLES & VARIABLES ======================= */
#ce-landing-page {
    /* --- ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ЦВЕТОВ --- */
    --primary-yellow: #fecb00;
    --dark-bg: #121212;
    --section-dark-bg: #1a1a1a;
    --card-bg: #1e1e1e;
    --text-light: #f5f5f5;
    --text-dark: #121212;
    --text-muted: #a0a0a0;
    --border-color: #333333;

    /* ======================= БЛОК РАЗМЕРОВ ШРИФТА ======================= */
    /* Теперь все размеры шрифтов можно редактировать здесь */
    /* --font-size-copy-small: 1.8rem; */
    /* Для текста в футере */
    --font-size-base: 1.8rem;
    /* Для основного текста <p> */
    --font-size-hero-subtitle: 2.5rem;
    /* Для подзаголовка на главном экране */
    --font-size-button: 2rem;
    /* Для кнопок и полей ввода */
    --font-size-button-large: 1.8rem;
    /* Для больших кнопок */
    --font-size-card-title: 2.8rem;
    /* Для заголовков в карточках */
    --font-size-step-title: 2.8rem;
    /* Для заголовков в шагах "Как это работает" */
    --font-size-feature-title: 3rem;
    /* Для заголовков в секции "Гарантии" */
    --font-size-section-title: 4.6rem;
    /* Для главных заголовков секций H1 */
    --font-size-hero-title: 6rem;
    /* Для самого большого заголовка на главном экране */
    --font-size-icon-medium: 4.5rem;
    /* Для иконок */
    --font-size-icon-large: 5rem;
    /* Для больших иконок */
    /* Размеры для мобильных устройств */
    --font-size-section-title-mobile: 3.8rem;
    --font-size-hero-title-mobile: 3.7rem;
    /* ==================================================================== */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-light);
    line-height: 1.7;
}



#ce-landing-page html {
    scroll-behavior: smooth;
}

#ce-landing-page .ce-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#ce-landing-page .ce-section {
    padding: 44px 0;
}

#ce-landing-page .ce-section-dark {
    background-color: var(--section-dark-bg);
}

#ce-landing-page .ce-section-title {
    text-align: center;
    font-size: var(--font-size-section-title);
    margin-bottom: 60px;
    font-weight: 700;
    color: var(--text-light);
}

#ce-landing-page p {
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

/* ======================= BUTTONS ======================= */
#ce-landing-page .ce-btn {
    display: inline-block;
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-button);
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

#ce-landing-page .ce-btn-primary {
    background-color: var(--primary-yellow);
    color: var(--dark-bg);
    box-shadow: 0 4px 15px rgba(254, 203, 0, 0.3);
}

#ce-landing-page .ce-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(254, 203, 0, 0.4);
}

#ce-landing-page .ce-btn-large {
    padding: 18px 40px;
    font-size: var(--font-size-button-large);
}

#ce-landing-page .ce-btn-full {
    width: 100%;
}

/* ======================= HEADER / HERO ======================= */
#ce-landing-page .ce-hero {
    position: relative;
    height: 65vh;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
}

#ce-landing-page .ce-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(18, 18, 18, 1) 0%, rgba(18, 18, 18, 0.4) 100%);
}

#ce-landing-page .ce-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

#ce-landing-page .ce-hero h1 {
    font-size: var(--font-size-hero-title);
    margin-bottom: 20px;
    line-height: 1.2;
color: #fec900;
    font-weight: bold;
}

#ce-landing-page .ce-hero p {
    font-size: var(--font-size-hero-subtitle);
    margin-bottom: 40px;
    color: var(--text-light);
    opacity: 0.9;
}

/* ======================= BENEFITS SECTION ======================= */
#ce-landing-page .ce-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
#ce-landing-page .ce-benefits h2{margin-top: 0;}

#ce-landing-page .ce-benefit-card {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
}

#ce-landing-page .ce-benefit-icon {
    font-size: var(--font-size-icon-large);
    margin-bottom: 20px;
    color: var(--primary-yellow);
}

#ce-landing-page .ce-benefit-card h3 {
    font-size: var(--font-size-card-title);
    margin-bottom: 15px;
    color: var(--text-light);
}

/* ======================= HOW IT WORKS SECTION ======================= */
#ce-landing-page .ce-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

#ce-landing-page .ce-process-step {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    position: relative;
}

#ce-landing-page .ce-process-icon {
    font-size: var(--font-size-icon-medium);
    margin-bottom: 20px;
    color: var(--primary-yellow);
}

#ce-landing-page .ce-step-number {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-yellow);
    color: var(--dark-bg);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-card-title);
    font-weight: bold;
}

#ce-landing-page .ce-process-step h3 {
    font-size: var(--font-size-step-title);
    margin-bottom: 15px;
    color: var(--text-light);
}

/* ======================= CARS IN TRANSIT SECTION ======================= */
#ce-landing-page .ce-cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

#ce-landing-page .ce-car-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: transform 0.3s, box-shadow 0.3s;
}

#ce-landing-page .ce-car-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#ce-landing-page .ce-car-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

#ce-landing-page .ce-car-card-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#ce-landing-page .ce-car-card-body h3 {
    margin-bottom: 15px;
    font-size: var(--font-size-card-title);
    color: var(--text-light);
}

#ce-landing-page .ce-car-card-body ul {
    list-style: none;
    margin-bottom: 25px;
    flex-grow: 1;
}

#ce-landing-page .ce-car-card-body li {
    margin-bottom: 10px;
    color: var(--text-muted);
}

#ce-landing-page .ce-car-card-body .ce-btn {
    width: 100%;
}

#ce-landing-page .ce-spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ce-landing-page .ce-spec-icon {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    width: 20px;
    text-align: center;
}

/* ======================= HIGHLIGHT FORM SECTION ======================= */
#ce-landing-page .ce-section-highlight {
    background-color: var(--primary-yellow);
    color: var(--text-dark);
}

#ce-landing-page .ce-section-highlight p {
    color: #333;
    max-width: 600px;
    margin: 0 auto 30px;
}

#ce-landing-page .ce-section-highlight .ce-section-title {
    margin-bottom: 15px;
    color: var(--text-dark);
}

#ce-landing-page .ce-form-highlight-container {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

#ce-landing-page .ce-form-highlight-image {
    flex-basis: 40%;
    text-align: center;
    align-self: flex-end;
}

#ce-landing-page .ce-form-highlight-image img {
top: 44px;
    position: relative;
    max-width: 100%;
}

#ce-landing-page .ce-form-wrapper {
    flex-basis: 60%;
}

#ce-landing-page .ce-form-group {
    margin-bottom: 15px;
}

#ce-landing-page .ce-form-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: var(--font-size-button);
    background-color: #fff;
    color: var(--text-dark);
}

#ce-landing-page .ce-form-group input::placeholder {
    color: #888;
}

#ce-landing-page .ce-form-message {
    margin-top: 15px;
    font-weight: 500;
}

#ce-landing-page .ce-form-message.success {
    color: #27ae60;
}

#ce-landing-page .ce-form-message.error {
    color: #c0392b;
}

/* ======================= TESTIMONIALS SECTION ======================= */
#ce-landing-page .ce-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

#ce-landing-page .ce-testimonial-card {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    position: relative;
}

#ce-landing-page .ce-quote-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: var(--font-size-icon-medium);
    opacity: 0.1;
    color: var(--text-light);
}

#ce-landing-page .ce-testimonial-card p {
    font-style: italic;
    color: var(--text-light);
    margin-bottom: 20px;
}

#ce-landing-page .ce-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

#ce-landing-page .ce-testimonial-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#ce-landing-page .ce-testimonial-author span {
    font-weight: bold;
    color: var(--text-light);
}

/* ======================= GUARANTEE & TRUST SECTION ======================= */
#ce-landing-page .ce-feature-block {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

#ce-landing-page .ce-feature-content {
    flex: 2;
}

#ce-landing-page .ce-feature-content h3 {
    font-size: var(--font-size-feature-title);
    margin-bottom: 20px;
    color: var(--text-light);
}

#ce-landing-page .ce-feature-image {
    flex: 1;
    text-align: center;
}

#ce-landing-page .ce-feature-image img {
    max-width: 250px;
}

#ce-landing-page .ce-auctions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

#ce-landing-page .ce-auction-item img {
    max-width: 160px;
    height: 60px;
    object-fit: contain;
    filter: grayscale(1) brightness(5);
    opacity: 0.8;
}

/* ======================= FAQ SECTION ======================= */
#ce-landing-page .ce-faq-container {
    max-width: 800px;
    margin: 0 auto;
}

#ce-landing-page .ce-faq-item {
    border-bottom: 1px solid var(--border-color);
}

#ce-landing-page .ce-faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 0;
    font-size: var(--font-size-button-large);
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
}

#ce-landing-page .ce-faq-question::after {
    content: '\f067';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    transition: transform 0.3s;
}

#ce-landing-page .ce-faq-question.active::after {
    transform: rotate(45deg);
}

#ce-landing-page .ce-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#ce-landing-page .ce-faq-answer p {
    padding: 0 0 20px;
}

/* ======================= SECTIONS WITH BACKGROUND IMAGES ======================= */
#ce-landing-page #ce-how-it-works,
#ce-landing-page #ce-final-cta {
    text-align: center;
    position: relative;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#ce-final-cta p {
    padding-bottom: 25px;
}

#ce-landing-page #ce-how-it-works {
    background-image: url('https://images.unsplash.com/photo-1493238792000-8113da705763?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

#ce-landing-page #ce-final-cta {
    background-image: url('https://images.unsplash.com/photo-1677227630731-e8072bfe70d4?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

#ce-landing-page .ce-section-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.85);
    z-index: 1;
}

#ce-landing-page .ce-content-over-bg {
    position: relative;
    z-index: 2;
}

/* ======================= FOOTER ======================= */
#ce-landing-page .ce-footer {
    background-color: var(--dark-bg);
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
}

#ce-landing-page .ce-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

#ce-landing-page .ce-footer-logo h4 {
    font-size: var(--font-size-card-title);
    font-weight: 700;
    color: var(--text-light);
}

#ce-landing-page .ce-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

#ce-landing-page .ce-footer a:hover {
    color: var(--primary-yellow);
}

#ce-landing-page .ce-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

#ce-landing-page .ce-contact-icon {
    font-size: var(--font-size-button);
    color: var(--text-muted);
    width: 20px;
    text-align: center;
}

#ce-landing-page .ce-footer-social {
    display: flex;
    gap: 20px;
}

#ce-landing-page .ce-footer-social a {
    font-size: var(--font-size-card-title);
}

#ce-landing-page .ce-footer-copy {
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    font-size: var(--font-size-copy-small);
    color: #777;
}

/* ======================= RESPONSIVENESS ======================= */
@media (max-width: 992px) {

    #ce-landing-page .ce-section-title,
    #ce-landing-page .ce-hero h1 {
        font-size: var(--font-size-section-title-mobile);
    }

    #ce-landing-page .ce-feature-block {
        flex-direction: column-reverse;
    }

    #ce-landing-page .ce-form-highlight-container {
        flex-direction: column;
        text-align: center;
    }

    #ce-landing-page .ce-form-highlight-image {
        display: none;
    }



    #ce-landing-page .ce-form-wrapper {
        flex-basis: 100%;
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    #ce-landing-page .ce-hero {
        height: 80vh;
        min-height: auto;
    }

    #ce-landing-page .ce-hero h1 {
        font-size: var(--font-size-hero-title-mobile);
    }

    #ce-landing-page .ce-testimonials-grid {
        grid-template-columns: 1fr;
    }

    #ce-landing-page .ce-footer-content {
        flex-direction: column;
        gap: 30px;
    }
}
#ce-landing-page .ce-form-wrapper .ce-btn-primary{
        color: #fff;
        background: #000000;
}



#ce-landing-page .product-thumb {
    border-radius: 10px;
    background: #3A3939;
    border: 0px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}
#ce-landing-page .product-thumb .caption p {
        color: #ffff;
            font-size: 16px;
            padding-top: 20px;
            font-weight: normal;
    
}
#ce-landing-page .product-thumb .caption h4 a {
    padding-top: 10px;
    display: block;
    font-size: 19px;
    color: #ffd620;
    height: 33px;
}
#ce-landing-page .product-thumb .caption .product-attributes {
    padding: 10px;
    font-size: 13px;
}

/* lizing block */

.leasing-banner-container {
    --gradient-start: #6a11cb;
    --gradient-end: #2575fc;
    --main-text-color: #ffffff;
    --secondary-text-color: rgba(255, 255, 255, 0.85);
    --button-bg-color: #ffffff;
    --button-text-color: var(--gradient-start);
    --border-color: var(--main-text-color);
    --overlay-bg: rgba(255, 255, 255, 0.1);
    --advantage-bg: rgba(0, 0, 0, 0.1);

    --font-family: 'Montserrat', sans-serif;
    --font-size-base: 32px;
    --font-size-sm: 1.8rem;
    --font-size-md: 2.2rem;
    --font-size-lg: 2.4rem;
    --font-size-xl: 3.6rem;
    --font-size-xxl: 5.0rem;

    --border-radius-main: 15px;
    --border-radius-inner: 10px;

    font-family: var(--font-family);
    font-size: var(--font-size-base);
    max-width: 1120px;
    margin: 40px auto;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: var(--main-text-color);
    border-radius: var(--border-radius-main);
    padding: 30px 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

.leasing-banner-container::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: var(--overlay-bg);
    border-radius: 50%;
}

.leasing-banner-header {
    text-align: center;
    margin-bottom: 25px;
}

.leasing-banner-header h1 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    margin: 0;
    letter-spacing: 1px;
    color: #ffffff;
}

#leasing-section .leasing-banner-header p {
    font-size: var(--font-size-md);
    color: var(--secondary-text-color);
    margin-top: 5px;
}

.leasing-main-terms {
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: var(--overlay-bg);
    padding: 20px;
    border-radius: var(--border-radius-inner);
    margin-bottom: 30px;
}

.term-item {
    flex-basis: 30%;
}

.term-item .term-title {
    font-size: 2rem;
height: 50px;
    font-weight: 400;
    color: var(--secondary-text-color);
    margin-bottom: 8px;
}

.term-item .term-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.term-item .term-value-small {
    font-size: 1.5rem;
    /* Оставил как есть, так как это специфичный случай */
}

.leasing-advantages {
    margin-bottom: 30px;
}

.leasing-advantages h2 {
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: var(--font-size-xl);
    color: #ffffff;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.advantage {
    background: var(--advantage-bg);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantage:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.advantage h3 {
    margin: 0 0 10px 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #ffffff;
}

#leasing-section .advantage p {
    margin: 0;
    font-size: 1.45rem;
    color: var(--secondary-text-color);
    line-height: 1.5;
}

.leasing-cta-section {
    text-align: center;
    margin-top: 20px;
}

.leasing-cta-button {
    display: inline-block;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 15px 35px;
    font-size: var(--font-size-md);
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.leasing-cta-button:hover {
    background-color: #f0f0f0;
    /* Можно тоже вынести в переменную --button-bg-hover-color */
    transform: scale(1.05);
}

#leasing-section .leasing-cta-subtext {
    margin-top: 15px;
    font-size: var(--font-size-sm);
    color: var(--secondary-text-color);
}

/* --- СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА С ФОРМОЙ ЛИЗИНГА --- */

/* Контейнер формы */
#leasing-contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px; /* Расстояние между элементами */
    padding: 10px 20px 20px 20px;
    font-family: 'Montserrat', sans-serif; /* Рекомендую использовать тот же шрифт, что и на сайте */
}

/* Логотип */
#leasing-contact-form img {
    max-width: 160px;
    margin-bottom: 10px;
}

/* Контейнер с заголовками */
#leasing-contact-form .cont-title {
    text-align: center;
    margin-bottom: 10px;
}

/* Главный заголовок */
#leasing-contact-form .modal-title-contact {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 5px;
}

/* Подзаголовок (описание) */
#leasing-contact-form .modal-desk-contact {
    font-size: 15px;
    color: #7f8c8d;
    line-height: 1.4;
    color: #000000;
}

/* Поля ввода (Имя и Телефон) */
#leasing-contact-form input[type="text"],
#leasing-contact-form input[type="tel"] {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    color: #000000;
    box-sizing: border-box; /* Важно для правильного расчета ширины */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Стиль полей ввода при фокусе (когда пользователь кликает на поле) */
#leasing-contact-form input[type="text"]:focus,
#leasing-contact-form input[type="tel"]:focus {
    outline: none;
    border-color: #2575fc; /* Основной синий цвет с вашего баннера */
    box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
}

/* Кнопка отправки */
#leasing-contact-form button[type="submit"] {
    width: 100%;
    padding: 15px;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* Градиент с баннера */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Эффект при наведении на кнопку */
#leasing-contact-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- Стили для сообщений после отправки --- */

/* Сообщение об успехе (зеленое) */
.success-message {
    padding: 20px;
    border-radius: 8px;
    background-color: #d4edda;
    color: #155724;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

/* Сообщение об ошибке (красное) */
.error-message {
    padding: 20px;
    border-radius: 8px;
    background-color: #f8d7da;
    color: #721c24;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

/* baner lizing category */
/* Основной контейнер баннера */
.sidebar-leasing-banner {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #2c3e50;
    /* Темно-серый фон */
    color: #ffffff;
    padding: 20px 15px;
    border-radius: 8px;
    margin-top: 25px;
    /* Отступ от фильтров сверху */
    text-align: center;
}

/* Заголовок баннера */
.sidebar-leasing-banner h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Короткий промо-текст */
.sidebar-leasing-banner .promo-text {
    font-size: 14px;
    color: #bdc3c7;
    /* Светло-серый для второстепенного текста */
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/* Список основных условий */
.sidebar-leasing-banner .terms-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Расстояние между пунктами */
    text-align: left;
}

/* Каждый пункт в списке */
.sidebar-leasing-banner .term-item-sidebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Последний элемент без нижней рамки */
.sidebar-leasing-banner .term-item-sidebar:last-child {
    border-bottom: none;
}

/* Название условия (Аванс, Срок...) */
.sidebar-leasing-banner .term-title {
    color: #bdc3c7;
}

/* Значение условия (от 20%...) */
.sidebar-leasing-banner .term-value {
    font-weight: 700;
    color: #f1c40f;
    /* Яркий желтый акцент */
}

/* Стили для кнопки. Используем тот же класс ".leasing-cta-button",
        но переопределяем его вид специально для этого баннера.
        */
.sidebar-leasing-banner .leasing-cta-button {
    display: block;
    width: 100%;
    padding: 12px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    color: #2c3e50;
    /* Темный текст */
    background-color: #f1c40f;
    /* Желтый фон */
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

/* Эффект при наведении */
.sidebar-leasing-banner .leasing-cta-button:hover {
    background-color: #e0b400;
    /* Более темный желтый */
}

/* --- СТИЛИ ДЛЯ БАННЕРА-ПОЛОСКИ В КАТАЛОГЕ --- */

/* Основной контейнер */
.catalog-leasing-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    /* Яркий и сочный градиент */
    background: linear-gradient(110deg, #6a11cb 0%, #2575fc 100%);
    border-radius: 12px;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    /* Для позиционирования декоративного элемента */
    overflow: hidden;
    /* Скрывает часть иконки, выходящую за пределы */
    box-shadow: 0 5px 20px rgba(45, 87, 211, 0.3);
    /* Мягкая тень в цвет баннера */
}

/* Декоративная иконка на фоне */
.catalog-leasing-strip::before {
    content: '🔑';
    /* Иконка ключа */
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    font-size: 60px;
    color: #fff;
    opacity: 0.1;
    pointer-events: none;
    /* Иконка не будет мешать кликам */
}

/* Контейнер для текстовой части */
.catalog-leasing-strip .leasing-strip-content h4 {
    margin: 0 0 4px 0;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    /* Белый текст для контраста */
}

.catalog-leasing-strip .leasing-strip-content p {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    /* Полупрозрачный белый */
}

/* Стили для кнопки */
.catalog-leasing-strip .leasing-cta-button {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    /* Темный текст на светлой кнопке */
    background-color: #f1c40f;
    /* Яркий желтый цвет */
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    margin-left: 20px;
    flex-shrink: 0;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.catalog-leasing-strip .leasing-cta-button:hover {
    background-color: #f39c12;
    /* Более насыщенный оранжево-желтый */
    transform: translateY(-2px);
    /* Эффект "приподнимания" */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .catalog-leasing-strip {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 25px 20px;
    }

    .catalog-leasing-strip::before {
        /* На мобильных можно скрыть иконку, чтобы не мешала */
        display: none;
    }

    .catalog-leasing-strip .leasing-cta-button {
        margin-left: 0;
        width: 100%;
    }
}


/* --- СТИЛИ ДЛЯ ДОПОЛНИТЕЛЬНЫХ КНОПОК НА СТРАНИЦЕ ТОВАРА --- */

/* Контейнер для двух кнопок */
.product-extra-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Две колонки одинаковой ширины */
    gap: 10px;
    /* Расстояние между кнопками */
    margin-top: 10px;
}

/* Общий стиль для кнопок */
.btn-extra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Иконка внутри кнопки */
.btn-extra i {
    margin-right: 8px;
    font-size: 18px;
}

/* Эффект при наведении */
.btn-extra:hover {
    transform: translateY(-3px);
    /* Приподнимаем кнопку */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Уникальный стиль для кнопки "Лизинг" (фиолетовый) */
.btn-extra.leasing {
    background: linear-gradient(110deg, #8e44ad 0%, #6a11cb 100%);
}

/* Уникальный стиль для кнопки "Кредит" (зеленый) */
.btn-extra.credit {
    background: linear-gradient(110deg, #27ae60 0%, #2ecc71 100%);
}


/* --- СТИЛІ ДЛЯ ВМІСТУ МОДАЛЬНИХ ОКОН ЛІЗИНГУ ТА КРЕДИТУ --- */

/* Внутрішній контейнер для форми */
#modal-leasing-product #modal-body-contactform,
#modal-credit-product #modal-body-contactform {
    padding: 25px 30px;
    position: relative;
    /* Необхідно для позиціонування хрестика */
}

/* Хрестик для закриття */
/* #modal-leasing-product #modal-body-contactform .close,
#modal-credit-product #modal-body-contactform .close {
    color: #aaa;
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;

} */

/* #modal-leasing-product #modal-body-contactform .close:hover,
#modal-credit-product #modal-body-contactform .close:hover {
    color: #333;
} */

/* Обгортка форми */
#modal-leasing-product .ajax-form,
#modal-credit-product .ajax-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    /* Відстань між елементами */
    font-family: 'Montserrat', sans-serif;
}

/* Логотип */
#modal-leasing-product .ajax-form img,
#modal-credit-product .ajax-form img {
    max-width: 150px;
    margin-bottom: 10px;
}

/* Контейнер для заголовків */
#modal-leasing-product .ajax-form .cont-title,
#modal-credit-product .ajax-form .cont-title {
    text-align: center;
    margin-bottom: 5px;
}

/* Головний заголовок форми */
#modal-leasing-product .ajax-form .modal-title-contact,
#modal-credit-product .ajax-form .modal-title-contact {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

/* Описовий текст під заголовком */
#modal-leasing-product .ajax-form .modal-desk-contact,
#modal-credit-product .ajax-form .modal-desk-contact {
    font-size: 15px;
    color: #000000;
    line-height: 1.4;
}

/* Поля для вводу (Ім'я, Телефон) */
#modal-leasing-product .ajax-form input[type="text"],
#modal-leasing-product .ajax-form input[type="tel"],
#modal-credit-product .ajax-form input[type="text"],
#modal-credit-product .ajax-form input[type="tel"] {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: #000000;
}

/* Стиль полів при фокусі */
#modal-leasing-product .ajax-form input:focus,
#modal-credit-product .ajax-form input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Загальний стиль кнопок відправки */
#modal-leasing-product .ajax-form button[type="submit"],
#modal-credit-product .ajax-form button[type="submit"] {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

#modal-leasing-product .ajax-form button[type="submit"]:hover,
#modal-credit-product .ajax-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- УНІКАЛЬНІ КОЛЬОРИ ДЛЯ КОЖНОЇ ФОРМИ --- */

/* Кнопка в формі "Лізинг" (фіолетова) */
#modal-leasing-product .ajax-form button[type="submit"] {
    background: linear-gradient(110deg, #8e44ad 0%, #6a11cb 100%);
}

/* Кнопка в формі "Кредит" (зелена) */
#modal-credit-product .ajax-form button[type="submit"] {
    background: linear-gradient(110deg, #27ae60 0%, #2ecc71 100%);
}

/*  */

.credit-block-container {
    font-family: 'Nunito Sans', sans-serif;
    background-color: #f8f9fa;
    max-width: 900px;
    margin: 40px auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Две колонки */
}

/* Левая колонка с основной информацией */
.credit-info-panel {
    padding: 40px;
}

.credit-info-panel h2 {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    margin: 0 0 25px 0;
}

.credit-info-panel h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
    border-left: 4px solid #8dc63f;
    /* Зеленый акцент */
    padding-left: 10px;
}

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

.features-list li {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #555;
}

.features-list i {
    color: #8dc63f;
    /* Зеленый цвет иконки */
    font-size: 18px;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

/* Правая колонка с условиями */
.credit-conditions-panel {
    background-color: #ffffff;
    padding: 40px;
    border-left: 1px solid #e9ecef;
}

.conditions-box {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
}

.conditions-box .condition-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.conditions-box .condition-item:last-child {
    border-bottom: none;
}

.conditions-box .condition-title {
    font-size: 16px;
    color: #555;
}

.conditions-box .condition-value {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.credit-cta-button {
    display: block;
    width: 100%;
    background-color: #8dc63f;
    /* Фирменный зеленый */
    color: #ffffff;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.credit-cta-button:hover {
    background-color: #7ab430;
    /* Более темный зеленый */
    transform: scale(1.02);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .credit-block-container {
        grid-template-columns: 1fr;
        /* Одна колонка */
    }

    .credit-conditions-panel {
        border-left: none;
        border-top: 1px solid #e9ecef;
    }
}


/*  */


 /* --- СТИЛІ ДЛЯ ОБ'ЄДНАННЯ БЛОКІВ --- */

 /* 1. Створюємо контейнер-сітку для двох колонок */
 .finance-options-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     /* Дві колонки однакової ширини */
     gap: 30px;
     /* Відстань між колонками */
     max-width: 1200px;
     /* Можете налаштувати ширину під ваш сайт */
     margin: 40px auto;
     align-items: start;
     /* Вирівнюємо колонки по верху */
 }

 /* 2. Адаптивність для мобільних пристроїв */
 @media (max-width: 992px) {
     .finance-options-container {
         grid-template-columns: 1fr;
         /* На мобільних одна колонка */
     }
 }

 /* --- ВАШІ ОРИГІНАЛЬНІ СТИЛІ (я додав їх для робочого прикладу) --- */

 /* (Стилі для .leasing-banner-container, .credit-conditions-panel і т.д. мають бути тут) */
 .leasing-banner-container {
     font-family: sans-serif;
     background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
     color: #fff;
     border-radius: 15px;
     padding: 30px;
 }

 .leasing-banner-header {
     text-align: center;
     margin-bottom: 25px;
 }

 .leasing-banner-header h1 {
     font-size: 2.5rem;
     margin: 0;
 }

 .leasing-main-terms {
     display: flex;
     justify-content: space-around;
     background: rgba(255, 255, 255, 0.15);
     padding: 20px;
     border-radius: 10px;
     margin-bottom: 30px;
     text-align: center;
 }

 .leasing-advantages h2 {
     text-align: center;
 }

 .advantages-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
 }

 .advantage {
     background: rgba(0, 0, 0, 0.1);
     padding: 15px;
     border-radius: 8px;
 }

 .advantage h3 {
     margin: 0 0 5px 0;
 }

 .leasing-cta-section {
     text-align: center;
     margin-top: 20px;
 }

 .leasing-cta-button {
     display: inline-block;
     background: #fff;
     color: #6a11cb;
     padding: 12px 25px;
     border-radius: 50px;
     text-decoration: none;
     font-weight: bold;
 }

 .credit-conditions-panel {
     font-family: sans-serif;
     background-color: #ffffff;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
 }

 .credit-conditions-panel h3 {
     border-left: 4px solid #8dc63f;
     padding-left: 10px;
 }

 .conditions-box {
     background-color: #f8f9fa;
     border-radius: 12px;
     padding: 25px;
     margin-bottom: 25px;
 }

 .condition-item {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid #e0e0e0;
 }

 .condition-item:last-child {
     border-bottom: none;
 }

 .features-list {
     list-style: none;
     padding: 0;
 }

 .features-list li {
     margin-bottom: 8px;
 }

 .credit-cta-button {
     display: block;
     background: #8dc63f;
     color: #fff;
     padding: 15px;
     text-align: center;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
 }

 /* --- СТИЛІ ДЛЯ КОНТЕЙНЕРА ФОРМИ #modal-body-contactform --- */

 /* Внутрішній контейнер, що містить форму */
 #modal-credit-form #modal-body-contactform {
     padding: 25px 30px;
     position: relative;
     /* Необхідно для позиціонування хрестика */
 }


 /* Сама форма */
  #modal-credit-form #modal-body-contactform .ajax-form {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 18px;
     /* Відстань між елементами */
     font-family: 'Montserrat', sans-serif;
     /* Рекомендую використовувати основний шрифт сайту */
 }

 /* Логотип */
  #modal-credit-form #modal-body-contactform .ajax-form img {
     max-width: 150px;
     margin-bottom: 10px;
 }

 /* Контейнер для заголовків */
  #modal-credit-form #modal-body-contactform .ajax-form .cont-title {
     text-align: center;
     margin-bottom: 5px;
 }

 /* Головний заголовок */
  #modal-credit-form #modal-body-contactform .ajax-form .modal-title-contact {
     font-size: 24px;
     font-weight: 600;
     color: #000000;
     margin-bottom: 5px;
 }

 /* Опис під заголовком */
  #modal-credit-form #modal-body-contactform .ajax-form .modal-desk-contact {
     font-size: 15px;
     color: #000000;
     line-height: 1.4;
 }

 /* Поля для вводу (Ім'я, Телефон) */
  #modal-credit-form #modal-body-contactform .ajax-form input[type="text"],
 #modal-body-contactform .ajax-form input[type="tel"] {
     width: 100%;
     padding: 14px 18px;
     font-size: 16px;
     border: 1px solid #bdc3c7;
     color: #000000;
     border-radius: 8px;
     box-sizing: border-box;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

 /* Стиль полів при активному введенні (фокусі) */
  #modal-credit-form #modal-body-contactform .ajax-form input:focus {
     outline: none;
     border-color: #3498db;
     /* Синій акцент */
     box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
 }

 /* Кнопка відправки */
  #modal-credit-form #modal-body-contactform .ajax-form button[type="submit"] {
     width: 100%;
     padding: 15px;
     font-size: 16px;
     font-weight: 700;
     color: #ffffff;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
     /* Зелений градієнт для кнопки "Кредит" */
     background: linear-gradient(110deg, #27ae60 0%, #2ecc71 100%);
 }

 /* Ефект при наведенні на кнопку */
  #modal-credit-form #modal-body-contactform .ajax-form button[type="submit"]:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 /* --- УНІКАЛЬНІ СТИЛІ ДЛЯ БЛОКУ "АВТО В КРЕДИТ" В САЙДБАРІ --- */

 #sidebar-credit-offer {
     font-family: 'Nunito Sans', sans-serif;
     background-color: #ffffff;
     /* Світлий фон */
     border: 1px solid #e9ecef;
     /* Тонка рамка, як у флаєрі */
     padding: 20px 15px;
     border-radius: 8px;
     margin-top: 25px;
     /* Відступ від блоку лізингу зверху */
     text-align: center;
 }

 #sidebar-credit-offer .credit-sidebar-title {
     font-size: 20px;
     font-weight: 800;
     color: #333;
     margin: 0 0 15px 0;
 }

 #sidebar-credit-offer .credit-sidebar-list {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
     text-align: left;
 }

 #sidebar-credit-offer .credit-sidebar-item {
     display: flex;
     align-items: center;
     font-size: 15px;
     color: #555;
 }

 #sidebar-credit-offer .credit-sidebar-item i {
     color: #8dc63f;
     /* Фірмовий зелений колір */
     margin-right: 10px;
     width: 20px;
     text-align: center;
 }

 #sidebar-credit-offer .credit-sidebar-item .item-value {
     margin-left: auto;
     /* Притискає значення до правого краю */
     font-weight: 700;
     color: #333;
 }

 #sidebar-credit-offer .credit-sidebar-button {
     display: block;
     width: 100%;
     padding: 12px;
     text-decoration: none;
     text-align: center;
     font-size: 15px;
     font-weight: 700;
     border-radius: 6px;
     color: #ffffff;
     background-color: #8dc63f;
     /* Зелений фон */
     transition: background-color 0.3s ease;
     box-sizing: border-box;
 }

 #sidebar-credit-offer .credit-sidebar-button:hover {
     background-color: #7ab430;
     /* Темніший зелений */
 }

 /* Стилі для блоку-смужки "Кредит" */
 .catalog-credit-strip {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 25px;
     background: #e8f5e9;
     /* Світло-зелений фон */
     border: 1px solid #c8e6c9;
     /* Більш насичена зелена рамка */
     border-radius: 8px;
     margin: 20px 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }

 .catalog-credit-strip .credit-strip-content h4 {
     margin: 0 0 4px 0;
     font-size: 18px;
     font-weight: 600;
     color: #1b5e20;
     /* Темно-зелений текст */
 }

 .catalog-credit-strip .credit-strip-content p {
     margin: 0;
     font-size: 14px;
     color: #388e3c;
     /* Середній зелений */
 }

 .catalog-credit-strip .credit-cta-button {
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 700;
     color: #ffffff;
     background-color: #4caf50;
     /* Яскравий зелений */
     border-radius: 6px;
     text-decoration: none;
     white-space: nowrap;
     transition: background-color 0.3s ease;
     margin-left: 20px;
 }

 .catalog-credit-strip .credit-cta-button:hover {
     background-color: #388e3c;
     /* Темніший зелений при наведенні */
 }

 /* Адаптивність для мобільних */
 @media (max-width: 768px) {
     .catalog-credit-strip {
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }

     .catalog-credit-strip .credit-cta-button {
         margin-left: 0;
         width: 100%;
     }
 }