@charset "UTF-8";
/* CSS Document */

.image-gallery {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .image-gallery .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid #ccc;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        .image-gallery .thumbnail:hover {
            border-color: #ed1c24;
        }
.main-image-container {
 

	overflow: hidden; 
	position: relative;
	width: 100%; height: 700px; overflow: hidden; position: relative;"
}
.main-image-container img {
	width: 100%; 
	height: 100%; 
	object-fit: cover;
}
a.btn.left{
    width: 100%;
}
a.btn {
    border: 2px solid #182954;
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    margin: 20px auto;
}
a.btn:hover {
    border: 2px solid #182954;
    color: #fff;
	background: #182954;
}
.image-gallery-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 20px;
}

.image-gallery {
	display: flex;
	gap: 10px;
	overflow: hidden;
	transition: transform 0.5s ease-in-out;
}

.thumbnail {
	width: 80px;
	height: 80px;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid #ccc;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.thumbnail:hover {
	border-color: #ed1c24;
}

.arrow-left, .arrow-right {
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	font-size: 24px;
	padding: 10px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.arrow-left {
	left: 0;
}

.arrow-right {
	right: 0;
}

.arrow-left:hover, .arrow-right:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
	form.autoplay-filter-form {
    background: rgba(0, 0, 0, .4);
    border-radius: 6px;
    padding: 15px 20px;
    max-width: 360px;
}
.vehicle-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 5px;
    row-gap: 5px;}
.vehicle-header p {
    border: 1px solid #ccc;
    display: block;
    float: left;
    clear: both;
    padding: 5px 10px;
    border-radius: 50px;
}
p.odometer::before {
    content: "\f625"; 
    font-family: "Fontawesome";
	margin-right: 5px;
}
p.color::before {
    content: "\f53f"; 
    font-family: "Fontawesome"; 
	margin-right: 5px;
}
p.fuelType::before {
    content: "\f52f"; 
    font-family: "Fontawesome"; 
	margin-right: 5px;
}

p.bodyType::before {
    content: "\f1b9"; 
    font-family: "Fontawesome"; 
	margin-right: 5px;
}
p.transmission::before {
    content: "\f013"; 
    font-family: "Fontawesome"; 
	margin-right: 5px;
}

	.autoplay-filter-form {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
p.subtitle {
    margin: 0;
}
.autoplay-filter-form label {
    font-weight: bold;
	color: #fff;
    width: 230px;
    text-transform: uppercase;
}
.autoplay-filter-form select {
    padding: 6px;
    min-width: 180px;
}
	.autoplay-item {
    border: 1px solid #ccc !important;
    padding: 15px;
    border-radius: 8px;
    font-family: sans-serif;
    background: #ffffff;
}
	
.autoplay-item:hover {
    transform: scale(1.0);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #ed1c24;
	background: #182954;
}
.autoplay-item:hover .read-more {
	background: #ffffff;
	color: #182954;
	    border: 1px solid #ffffff;
}
        .autoplay-list {
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
        .autoplay-item {
            border: 0;
            padding: 15px;
            border-radius: 8px;
            font-family: sans-serif;
            background: #ffffff;
        }
        .autoplay-item img {
            max-width: 100%;
            height: auto;
            display: block;
            margin-bottom: 10px;
        }
        .autoplay-item h3 {
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 700;
}
        .autoplay-item p {
            margin: 0 0 5px;
            font-size: 14px;
        }
		.autoplay-item:hover h3, .autoplay-item:hover p {
    color: #fff;
}
        .read-more {
    display: inline-block;
    margin-top: 10px;
    background: none;
    color: #ed1c24;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #ed1c24;
}
        .read-more:hover {
    display: inline-block;
    margin-top: 10px;
    background: #ed1c24;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #ed1c24;
}
        .vehicle-detail {
    padding: 30px;
    background: #fff;
    border: 0;
    border-radius: 0;
    font-family: sans-serif;
}

        .vehicle-detail img {
    max-width: 100%;
    margin-bottom: 20px;
    width: 100%;
}
a.breadCrumb {
    font-size: 14px;
    margin-bottom: 10px !important;
    display: block;
}
a.breadCrumb:hover {
color: #ed1c24;
}
        .vehicle-detail h2 {
            margin-top: 0;
        }
        .autoplay-error {
            color: red;
            font-weight: bold;
        }
		a {
    text-decoration: none !important;
}
.vehicle-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 20px;
}
.vehicle-right {
    max-width: 410px;
    padding: 30px;
    min-height: 1100px;
}
.vehicle-left,
.vehicle-right {
    flex: 1 1 45%;
}

.vehicle-left p,
.vehicle-right p {
    font-size: 14px;
    line-height: 1.6;
}
.vehicle-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.vehicle-gallery .gallery-image {
    flex: 1 1 calc(33.33% - 10px);
    margin-bottom: 10px;
}

.vehicle-gallery .gallery-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vehicle-gallery .gallery-image:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

@media (max-width: 560px) {
form.autoplay-filter-form {

    max-width: 100%;
}
.image-gallery {
    display: flex;
    gap: 5px;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
    flex-wrap: wrap;
	row-gap: 0;
	      padding: 0 10px;
    }
	    .ast-separate-container #content .ast-container {
        padding-left: 0;
        padding-right: 0;
    }
    .vehicle-columns {
        padding: 0 30px;
        gap: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
.main-image-container {
    max-height: 250px;
}
	.vehicle-detail img {
        max-width: 100%;
        margin-bottom: 0 !important;
        width: 100%;
        height: auto !important;
        max-height: auto !important;
    }
	.image-gallery {
    margin-top: 10px !important;
		row-gap: 5px !important;
}
	.image-gallery .thumbnail {
        width: 24% !important;
        height: 80px !important;
        border: 0 !important;
        border-radius: 0;
        margin: 0 0 7px 0;
    
}
.vehicle-left, .vehicle-right {
    display: flex;
    flex-direction: column;
    width: 100%;
	padding: 0;
}
	.image-gallery img {
    max-height: 65px;
}
.vehicle-header {
        width: 100%;
        display: flex;
        flex-direction: row;
        column-gap: 5px;
        row-gap: 0;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
	.vehicle-detail {
    padding: 0px;

}
.vehicle-header p {
    margin: 5px 0;
}
    a.btn {
        width: 100%;
    }