body {
	margin: 0;
	padding: 0;
	font-family: 'Prompt', sans-serif;
	font-size: 14px;
	background-color: #040404;
	color: #fff;
}

h2,
h4 {
	color: #d39d27;
}

.text-gold {
	color: #fec544;
}

.title {
	margin-bottom: 3rem;
	font-weight: 500;
	text-transform: uppercase;
	color: #fec544;
	position: relative;
	z-index: 10;
	letter-spacing: 1px;
}

.title::before {
	content: "";
	position: absolute;
	background-color: #3f4551;
	width: 170px;
	height: 2px;
	bottom: -16px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.title::after {
	content: "";
	position: absolute;
	background-color: #fec544;
	width: 70px;
	height: 2px;
	bottom: -16px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.fs-6 {
	font-size: 1.1rem;
}

.fixed-top.container-fluid {
	background-color: #000;
	box-shadow: 0 11px 10px rgba(255, 255, 255, 0.3);
}

.line-color,
.whatsapp-color,
.wechat-color {
	color: #ffc107;
}

.carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end, .carousel-fade .carousel-item.active {
	z-index: 1;
	opacity: 1;
}

.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
	transition: opacity 0s 5s;
}

.carousel-fade .carousel-item {
	opacity: 0;
	transition-property: opacity;
	transform: none;
}

.carousel-item {
	transition: transform 5s ease-in-out;
}

nav {
	transition: background-color 0.2s ease;
}

/* .logo.scrolled,
nav.scrolled {
	background-color: #000000;
} */

nav .nav-link,
nav.scrolled .nav-link {
	font-size: 1rem;
	color: #ffc04a;
	text-transform: unset;
}

nav .nav-link:hover,
nav.scrolled .nav-link:hover {
	display: inline-block;
	color: #fff;
	padding-bottom: 0.3px;
	text-decoration: none;
}

nav .nav-link.active,
nav.scrolled .nav-link.active {
	display: inline-block;
	color: #fff;
	border-bottom: 1px solid #fff;
	padding-bottom: 0.3px;
}

.navbar-collapse {
	flex-basis: unset;
	flex-grow: unset;
	align-items: unset;
}

.navbar-expand-lg .navbar-collapse {
	margin: 0 auto;
	--bs-navbar-padding-x: unset;
	--bs-navbar-padding-y: unset;
}

.navbar {
	--bs-navbar-padding-x: unset;
	--bs-navbar-padding-y: unset;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	color: #fff;
}

a {
	color: #ffc04a;
	text-transform: uppercase;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: underline;
}

a.active {
	color: #fff;
	display: inline-block;
	color: #fff;
	border-bottom: 1px solid #fff;
	padding-bottom: 0.3px;
}

ul {
	margin-bottom: 0;
	list-style: none;
}

li {
	display: inline-block;
}

.root {
	position: relative;
	/* padding: 0; */
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl,
.row {
	--bs-gutter-x: 0;
}

header {
	/* position: absolute;
	top: 20px;
	left: 0;
	right: 0; */
	margin-inline: auto;
	width: 100%;
	z-index: 999;
}

header .container {
	background-color: rgba(0, 0, 0, 1);
}

header li {
	margin: 0 10px;
	padding: 10px 0;
}

header li a {
	font-weight: 600;
}

.btn-default {
	background-image: radial-gradient(#fdf8cb, #f0d28f, #d3a85f);
	font-size: 0.9rem;
	font-weight: 700;
	color: #000;
}

.btn-gold {
	align-items: center;
	background-image: linear-gradient(#b58b64, #b4997d, #b58b64);
	padding: 8px 40px;
	font-weight: 700;
	color: #fff;
	border: 1px solid #392820;
	border-radius: 20px;
}

.shine-button {
	position: relative;
	overflow: hidden;
}

.shine-button:after {
	content: '';
	top: 0;
	transform: translateX(100%);
	width: 100%;
	height: 220px;
	position: absolute;
	z-index: 1;
	animation: slide 4s infinite;

	/* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(99%, rgba(128, 186, 232, 0)), color-stop(100%, rgba(125, 185, 232, 0)));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
	/* IE10+ */
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
	/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#007db9e8', GradientType=1);
	/* IE6-9 */
}

/* shine animation */
@keyframes slide {
	0% {
		transform: translateX(-100%);
	}

	50% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(100%);
	}
}

.banner-caption {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
}

.banner-caption h1 {
	-webkit-text-stroke: 2px black;
	font-size: 3.7rem;
}

.banner-caption h2 {
	-webkit-text-stroke: 2px black;
	font-size: 2.5rem;
}

.text-orange {
	color: #ff7f00;
}

.text-effect {
	background: linear-gradient(100deg, rgb(255 170 0) 4%, rgb(175 121 0) 13%, rgb(157 94 6) 21%, rgba(255, 255, 255, 0.8) 30%, #eb9846 34%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 10px;
	/* margin-top: -85px; */
	animation: animate 10s linear infinite;
	background-size: 200%;
}

@keyframes animate {
	100% {
		background-position: 400%;
	}
}

footer {
	background-color: #000;
}

footer ul {
	list-style: none;
	padding-left: 0;
}

footer ul li {
	display: inline-block;
	margin: 15px 0;
	padding: 0 15px;
	border-right: 1px solid rgba(255, 255, 255, 0.4);
}

footer .social a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
	color: #000;
	background-color: #c39d32;
	border: 1px solid darkgoldenrod;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	margin: 10px 5px 20px;
}

footer .social a:hover {
	text-decoration: none;
}

.bg-2 {
	/* background-color: #423723 !important; */
	/* background-color: #19110b !impo rtant; */
	background-color: #362b18 !important;
}

.container-custom {
	margin: 0 auto;
	max-width: 1810px;
}

.car-list {
	/* background-image: url('/img/bg-white.webp');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position-x: 50%;
	background-position-y: 50%; */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.car-bg {
	position: relative;
	padding: 1.2rem 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center right;
	min-height: 419px;
	width: 100%;
}

.car-bg button {
	margin-left: 2rem;
}

.car-caption {
	padding: 5px 0 5px 2rem;
	;
	background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
	width: 70%;
}

.car-caption h3 {
	font-family: "Merriweather", serif;
	font-style: normal;
	font-size: 1.7rem;
	font-weight: 500;
	color: #000;
	text-transform: uppercase;
	margin-bottom: 0;
}

.car-bg button {
	position: absolute;
	bottom: 20px;
}

.seat-bag {
	position: absolute;
	right: 0;
	bottom: 20px;
	display: flex;
	padding: 15px 25px 15px 100px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), #000);
}

.seat-bag img {
	height: 25px;
}

.modal {
	color: #000;
}

.modal ol {
	padding-left: 1rem;
	counter-reset: item;
}

.modal li {
	display: block;
}

.modal li:before {
	content: counters(item, ".") " ";
	counter-increment: item;
}

.fw-300 {
	font-weight: 300;
}

.table {
	border: 20px solid #000;
	/* border-top: 30px solid #000;
	border-bottom: 30px solid #000;
	border-left: 50px solid #000;
	border-right: 50px solid #000; */
}

.table th {
	/* background-color: #6f4c00; */
	background-image: linear-gradient(#6f4c00, #a26f00, #6f4c00);
	font-size: 17px;
	font-weight: 500;
	color: #fff;
}

.table th,
.table td {
	padding: 16px 0;
}

.table td {
	font-weight: 300;
}

.table td:first-child {
	padding-left: 15px;
}

.border-secondary {
	--bs-border-opacity: unset;
	border-color: #fff;
}

.table-responsive.prices-list table {
	background-color: #fff;
}

.table-responsive.prices-list th {
	text-align: center;
}

.services ul {
	list-style: disc;
	/* list-style-position: inside; */
}

.services ul.container li {
	display: list-item;
}

/* .services li {
	display: list-item;
} */

/* .services ul.container {
	display: flex;
	flex-wrap: wrap;
} */

.table-striped>tbody>tr:nth-of-type(odd)>*,
.table td {
	color: #d79403;
}

.social span:first-child {
	display: inline-block;
	position: relative;
	top: 3px;
	font-size: 1.4rem;
	width: 35px;
}

.social a {
	color: unset;
	text-decoration: none;
	text-transform: unset;
}

.social a span:first-child {
	display: unset;
	font-size: unset;
}

.qr-code {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.qr-code .block img {
	width: 150px !important;
}

.qr-code .block p {
	padding-top: 20px;
	font-size: 1.3rem;
	color: #fec544;
	text-align: center;
}

.portfolio-list .col-md-3 {
	padding-left: 5px;
	padding-right: 5px;
}

.text-justify {
	text-align: justify;
}

.accordion {
	--bs-accordion-border-width: 0;
}

.accordion-item {
	background-color: transparent;
	color: transparent;
	border: unset;
}

.accordion-item:first-of-type {
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

.accordion-button:not(.collapsed) {
	background-color: transparent;
}

.accordion-button {
	text-align: center;
	/* Center text horizontally */
	margin: 0 auto;
	/* Center button if width is less than parent */
	display: flex;
	/* Use flexbox for alignment */
	align-items: center;
	/* Center text vertically */
	justify-content: center;
	/* Center text horizontally */
	font-size: 1.5rem;
	color: #fec544 !important;
	background-color: transparent;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.accordion-button:focus {
	border-color: transparent;
	box-shadow: unset;
}

.accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"
		) !important;
}

.logo {
	padding: 10px 0 0;
	font-size: 1.5rem;
	color: #fec544;
	text-align: center;
}

img.logo {
	position: relative;
	top: -10px;
	width: 130px;
}

.car-list .col-md-6 {
	background-color: #c8c8c8;
}

.bg-camry {
	background: url('/img/cars/camry.webp');
	background-size: cover;
	background-position: bottom right;
}

.bg-alphard-2022 {
	background: url('/img/cars/alphard-2022.webp');
	background-position: bottom right;
}

.bg-alphard-2024 {
	background: url('/img/cars/alphard-2024.webp');
	background-position: bottom right;
}

.bg-e-class {
	background: url('/img/cars/e-class.webp');
	background-position: bottom right;
}

.bg-s-class {
	background: url('/img/cars/s-class.webp');
	background-position: bottom right;
}

.bg-sprinter {
	background: url('/img/cars/sprinter.webp');
	background-position: bottom right;
}

.bg-commuter {
	background: url('/img/cars/commuter.webp');
	background-position: bottom right;
}

/* Hero Caroucel */
.hero-social {
	margin-top: 60px;
	font-size: 1.4rem;
}

.hero-social a {
	-webkit-text-stroke: 1px black;
	font-weight: 700;
	color: #fec544;
	text-decoration: none;
	text-transform: none;
}

.hero-social>div div {
	margin-bottom: 1rem;
}

.hero-social>div div span {
	display: inline-block;
	font-size: 2.5rem;
	margin-right: 15px;
	line-height: 1;
}

.cars-banner {
	position: relative;
}

.cars-banner img {
	position: absolute;
	bottom: 0;
	right: 0;
}

.table-responsive {
	overflow-x: auto;
}

.sticky-column {
	position: sticky;
	left: 0;
	background-color: white;
	/* เพื่อไม่ให้คอลัมน์ซ้อนทับกัน */
	z-index: 1;
}

.hero {
	position: relative;
	margin-top: 110px;
	padding: 60px 0 0;
	text-align: center;
}

.hero::after {
	content: "";
	background-image: url('/img/bg-header.webp');
	background-repeat: repeat;
	background-size: 100% 100%;
	opacity: .5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.hero .text {
	z-index: 99;
}

@media (max-width: 1440px) {
	.carousel {
		margin-top: 100px;
	}

	.hero-social {
		margin-top: 20px;
	}
}

@media (max-width: 1078px) {
	.carousel {
		margin-top: 150px;
	}

	.header .container {
		background-color: red;
	}

	.logo-text {
		display: none;
	}

	.hero-social>div div {
		margin-bottom: 0;
	}

	.hero-social {
		margin-top: 20px;
	}

	.hero-social a {
		-webkit-text-stroke: 0;
		font-weight: 400;
	}
}

@media (max-width: 768px) {
	div>.row {
		margin-top: 20px;
		;
	}

	.carousel {
		margin-top: 0;
	}

	.fixed-top.container,
	.fixed-top.container-fluid {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	.logo.me-3 {
		margin-right: 0 !important;
		padding-right: 0;
	}

	.hero-phone {
		display: flex;
		justify-content: center;
		font-size: 1.8rem;
	}

	.navbar-toggler {
		position: relative;
		top: 8px;
	}

	.banner-caption {
		bottom: 10px;
	}

	.hero-social {
		margin-top: 0px;
		font-size: 1rem;
	}

	.banner-caption h1 {
		font-size: 3rem;
	}

	.banner-caption h2 {
		font-size: 2.5rem;
	}

	.hero-social>div div {
		margin-bottom: 0;
	}

	.hero-social>div div span {
		font-size: 1.5rem;
	}

	span.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	header {
		background-color: #000;
	}

	header .container {
		background-color: #000;
		width: 100%;
		max-width: 100%;
	}

	header .mt-4 {
		margin-top: 0 !important;
	}

	nav {
		position: absolute !important;
		width: 100%;
	}

	.navbar>div {
		padding: 0 !important;
		width: 100%;
	}

	.navbar-collapse {
		padding-top: 1.5rem;
		background-color: #000;
	}

	.logo {
		margin: 0 auto;
		padding-right: 1.5rem;
	}

	.row .container-fluid {
		margin-top: 72px;
	}

	.table td {
		padding-left: 15px;
		padding-right: 15px;
		border-width: 0;
		border-color: rgba(255, 255, 255, 0.2);
	}

	.container, .container-sm {
		max-width: 620px;
	}

	.qr-code {
		flex-direction: column;
	}

	.qr-code .block {
		margin-bottom: 1rem;
		;
	}

	.qr-code .block p {
		padding-top: 10px;
	}

	.contact,
	.services,
	.about {
		padding-left: 20px;
		/* padding-right: 20px; */
	}

	.contact .p-5 {
		padding: 0 !important;
	}

	.fs-6 {
		font-size: 0.9rem !important;
	}

	.about .col-md-6 {
		width: 100%;
	}

	.about .left {
		text-align: center;
	}

	.about .right {
		display: none;
	}

	.portfolio .description {
		text-align: center;
	}
}

@media (max-width: 430px) {
	.logo {
		margin: 0 auto;
		width: 100px !important;
	}

	.logo-text {
		display: none;
	}

	.carousel {
		margin-top: 0;
	}

	.about {
		background-color: red;
	}

	.about .left {
		order: 2;
	}

	.about .right {
		margin-bottom: 20px;
		display: block;
		order: 1;
	}

	.banner-caption {
		padding: 0 0 10px;
		bottom: 0;
	}

	.hero-social {
		margin-top: 0px !important;
		font-size: 1rem;
	}

	.banner-caption h1 {
		position: relative;
		top: 5px;
		-webkit-text-stroke: 0 !important;
		font-size: 1.5rem;
		font-weight: 500 !important;
	}

	.banner-caption h2 {
		-webkit-text-stroke: 0 !important;
		font-size: 1.1rem;
		font-weight: 500 !important;
	}

	.hero-phone {
		font-size: 1.1rem;
	}

	.hero-phone h2:first-child {
		margin-right: 0.8rem;
	}

	.hero-phone h2:last-child {
		margin-left: 0.8rem;
	}

	.hero-social>div {
		text-align: center;
	}

	.hero-social>div div {
		margin-bottom: 0;
		font-size: 0.7rem;
		font-weight: 400;
	}

	.hero-social a {
		-webkit-text-stroke: 0 !important;
	}

	.hero-social>div div span {
		font-size: 1rem;
	}

	.cars-banner {
		display: none;
	}

	/* .services ul.container li {
			flex: unset;
		} */

	.fs-6 {
		font-size: 0.8rem;
	}

	.car-bg {
		/* min-height: 280px; */
	}

	.bg-camry {
		background: url('/img/mobile/cars/camcry.webp');
	}

	.bg-alphard-2022 {
		background: url('/img/mobile/cars/alphard-2022.webp');
	}

	.bg-alphard-2024 {
		background: url('/img/mobile/cars/alphard-2024.webp');
	}

	.bg-e-class {
		background: url('/img/mobile/cars/e-class.webp');
	}

	.bg-s-class {
		background: url('/img/mobile/cars/s-class.webp');
	}

	.bg-sprinter {
		background: url('/img/mobile/cars/sprinter.webp');
	}

	.bg-commuter {
		background: url('/img/mobile/cars/commuter.webp');
	}

	.seat-bag {
		padding: 15px 25px 15px 30px;
	}

	.table {
		border: 0;
	}

	.hero {
		margin-top: 10px;
		padding: 20px 0 0;
		text-align: center;
	}
}