/*
*:before,
*:after{
*/
*
{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	line-height: 1.5em;
}

body{
	min-height: 50vh; 
	background: #180034; 
	color: #a2a5b3;
	align-content: center;
}


/* ========================================== Main Page =============================================*/

.shiny-car { 
	position: relative;
	text-align: center;
	color: white;
	z-index: -2;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
	padding-top: 5%;
}
.headliner img {
	width: 60%;
	opacity: 0.6;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	overflow: hidden;
}	
.headliner-highland img {
	margin-left: 25em;
	width: 50%;
	opacity: 0.4;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	overflow: hidden;
}	
.discountL {
	position: absolute;
	top: 15%;
	left: -7%;
	width: 35%; 
}

.logo {
	position: absolute;
	top: 15%;
	left: 80%;
	z-index: 10;
}
.logo img { width: 90%; }
.logo-highland {
	position: absolute;
	top: 15%;
	left: -30%;
	width: 100%;
	z-index: 11;
}
.headline {
	font-size: 1.6vw;
	white-space: wrap;
	position: absolute;
	top: 25%;
	left: 22%;
	color: white;
}
.headline-highland {
	font-size: 1.6vw;
	white-space: wrap;
	position: absolute;
	top: 25%;
	left: 45%;
	color: white;
}
.headline2 {
	font-size: 3.3vw;
	position: absolute;
	top: 65%;
	left: 22%;
	background-image: linear-gradient(to bottom, blue, white);
	background-clip: text;
	-webkit-background-clip: text; 
	color: transparent;
	-webkit-text-fill-color: transparent; 
  -webkit-text-stroke: 1px black; 
}
.headline2-highland {
	font-size: 3.3vw;
	position: absolute;
	top: 65%;
	left: 46%;
	background-image: linear-gradient(to bottom, blue, white);
	background-clip: text;
	-webkit-background-clip: text; 
	color: transparent;
	-webkit-text-fill-color: transparent; 
  -webkit-text-stroke: 1px black; 
}
.below p {
	text-align: left;
	padding-left: 20em;
	padding-right: 20em;
	font-size: 1vw;
}

sillo-container {
	width: 100%;
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: normal;
	text-align: center;
	background-color: #1e0a87; 
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1em;
	}
.sillo-container p { 
	color: white;  
	font-size: 1.5vw; 
	text-align: center;
	}
.Appointment h3 {
	font-family: "Bai Jamjuree", serif;
	text-align: center;
	color: white;
	font-size: 3vw;
}
.schedule-service {
	width: 80%;
	font-family: "Bai Jamjuree", serif;
	font-weight: 300;
	font-style: normal;
	background: #fff2e6;
	margin-left: 10%;
	display: grid;
	grid-template-rows: 3vw 5vw 3vw 3.5vw 3vw 5vw 3vw 3vw 3vw;
	grid-template-columns: 6% 60% 30%;
}
.stage-1A h4 { color: black; font-size: 2.2vw; }
.stage-2A h4 { color: black; font-size: 2.2vw; }
.stage-3A h4 { color: black; font-size: 2.2vw; }
.stage-4A h4 { color: black; font-size: 2.2vw; }
.stage-1B p { color: black; font-size: 1.5vw; }
.stage-2B p { color: black; font-size: 1.5vw; }
.stage-3B p { color: black; font-size: 1.5vw; }
.stage-4B p { color: black; font-size: 1.5vw; }
.stage-1 img { width: 4.5vw; }
.stage-2 img { width: 4.5vw; }
.stage-3 img { width: 4.5vw; }
.stage-4 img { width: 4.5vw; }
.stage-1C img { 
	width: 20vw; 
   border-radius: 25px;
}
.stage-1 img { width: 4.5vw; }
.stage-2 img { width: 4.5vw; }
.stage-3 img { width: 4.5vw; }
.stage-4 img { width: 4.5vw; }
.stage-1C img { 
	width: 20vw; 
   border-radius: 25px;
}
.stage-1 {
	grid-row: 1 / 1;  
	grid-column: 1 / 1;
}
.stage-1A {
	grid-row: 1 / 1;  
	grid-column: 2 / 2;
}
.stage-1B {
	grid-row: 2 / 2;  
	grid-column: 2 / 2;
}
.stage-1C {
	grid-row: 1 / 1;  
	grid-column: 3 / 3;
}
.stage-2 {
	grid-row: 3 / 3;  
	grid-column: 1 / 1;
}
.stage-2A {
	grid-row: 3 / 3;  
	grid-column: 2 / 2;
}
.stage-2B {
	grid-row: 4 / 4;  
	grid-column: 2 / 2;
}
.stage-3 {
	grid-row: 5 / 5;  
	grid-column: 1 / 1;
}
.stage-3A {
	grid-row: 5 / 5;  
	grid-column: 2 / 2;
}
.stage-3B {
	grid-row: 6 / 6;  
	grid-column: 2 / 2;
}
.stage-4 {
	grid-row: 7 / 7;  
	grid-column: 1 / 1;
}
.stage-4A {
	grid-row: 7 / 7;  
	grid-column: 2 / 2;
}
.stage-4B {
	grid-row: 8 / 8;  
	grid-column: 2 / 2;
}
/* ============================================ Our Services =======================================*/
.Pbox-title {
	position: absolute;
	top: 50%;
	left: 50%;
	text-wrap: nowrap;
	font-size: 2.5vw;
	font-weight: 800;
	color:white;
	text-shadow: 2px 2px black;
	transform: translate(-50%, -50%);
}
.Pbox-title h2 { text-align: center; font-size: 2.6vw; }

.Our-Services { 
	font-size: 4vw;
	text-align: center;
	color: DarkOrange;
	}
	
.container-1 {
	width: 100%;
	font-family: "Bai Jamjuree", serif;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.image {
	width: 340px;
	position: relative;
}
.image img {
	width: 100%;
	height: 340px;
	display: block;
	margin: auto;
	border-width: 2px;
	border-style: solid;
	border-image: linear-gradient(to right, orange 0%, cyan 100%) 1;
}
.Pbox-1 {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; 
	opacity: 0;
	transition: 0.6s;
}
.Pbox-1 button {
	color: black;
	background: gold;
	border: 2px;
	border-style: solid;
	border-color: orange;
   border-radius: 5px;
	padding: .3vw .3vw; 
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.Cbox-A { text-align: center; }
.Pbox-1 button:hover {
	background: black;
	color: white;
}
.Pbox-1:hover {
	opacity: 1;
}
.Pbox-1 h4 {
	font-size: 2vw;
	color: white;
	font-weight: 400;
	margin-bottom: 15px;
	padding-left: 1em;
	padding-right: 1em;
}
.Pbox-1 p {
	font-size: 1.3vw;
	color: white;
	padding-left: 1em;
	padding-right: 1em;
} 
.Pbox-1 > *{
	transform:translateY(25px);
	transition: transform 0.6s;
}
.Pbox-1:hover *{
	transform:translateY(0px);
}

.Cbox-A { text-align: center; }
.Mbox-1 {   /* Header Text */
	padding-left: 1em; 
	padding-top: .5em;
	font-size: 3vw;
	color: white;
	text-align: center;
}
.container-4 {
	width: 100%;
	align-items: center;
}
.container-4 iframe {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
}
/*----------600----------------------------------------------------------*/
@media only screen and (max-width: 600px) { 

/*------600---------- SHINY CAR ------------------------------------*/
	
	.button { font-size: 3.5vw !important; }	
	.shiny-car { 
		padding-top: 40%; 
		text-align: left; 	
		padding-left: 1em; 
	}
	.headliner img { width: 70%; }	
	.headliner-highland img {
		margin-left: 25em;
		width: 50%;
	}	
	.logo {
		position: absolute;
		top: 15%;
		left: 74%;
		z-index: 10;
	}
	.logo img { width: 92%; }
	.logo-highland {
		position: absolute;
		top: 15%;
		left: -29%;
		width: 100%;
		z-index: 11;
	}
	.headline {
		font-size: 1.8vw;
		top: 25%;
		left: 5%;
	}
	.headline-highland {
		font-size: 1.6vw;
		white-space: wrap;
		position: absolute;
		top: 25%;
		left: 45%;
		color: white;
	}
	.headline2 {
		font-size: 4.8vw;
		top: 58%;
		left: 10%;
	}
	.headline2-highland {
		font-size: 3.3vw;
		top: 65%;
		left: 46%;
	}
	.below p {
		text-align: left;
		padding-left: 1em;
		padding-right: 2em;
		font-size: 2vw;
	}
	
	.sillo-container p { 
		font-size: 1.3vh;
		padding-left: 1em;
		padding-right: 2em;
		padding-top: .5em;
	}
	.Appointment h3 { font-size: 5vw; }
	.schedule-service {
		width: 90%;
		margin-left: 5.5%;
		grid-template-rows: 4vw 8vw 4.5vw 8vw 4.5vw 8vw 4.5vw 5vw 4.5vw;
		grid-template-columns: 7% 60% 32%;
	}
	.stage-1A h4 { font-size: 3vw; }
	.stage-2A h4 { font-size: 3vw; }
	.stage-3A h4 { font-size: 3vw; }
	.stage-4A h4 { font-size: 3vw; }
	.stage-1B p { font-size: 2.7vw;  }
	.stage-2B p { font-size: 2.7vw; }
	.stage-3B p { font-size: 2.7vw; }
	.stage-4B p { font-size: 2.7vw; }
	.stage-1 img { width: 6.2vw; }
	.stage-2 img { width: 6.2vw; }
	.stage-3 img { width: 6.2vw; }
	.stage-4 img { width: 6.2vw; }
	.stage-1C img { 
		width: 25vw; 
		border-radius: 25px;
		float: right;
	}
	
	.Our-Services { font-size: 6vw; }
	.Pbox-title h2 { text-align: center; font-size: 7vw; }

	.Pbox-1 h4 { font-size: 6vw; }
	.Pbox-1 p {
		font-size: 3vw;
		padding-left: 1em;
		padding-right: 1em;
	} 

	.Cbox-A { text-align: center; }
	.button {
		padding: 3vw 3vw; 
		font-size: 3vw;
		margin: 1vw 2vw;
	}
	
	.Mbox-1 {   /* Header Text */
		padding-left: .3em; 
		padding-top: .5em;
		font-size: 5vw;
	}
	.container-4 {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center; 
	}


} /* END 600  */