@charset "utf-8";
/* CSS Document */
* { margin:0;
padding:0;
	}
	img { 
	 width:100%;
		}
body{
	background-color:#ddd;
	font-size: 18px;
	font-family:'oswald' arial, helvetica, sans-serif;
	margin:50px;
	}
	.container-s { display:grid; gap:10px;}
	/* headere*/
	.header{
		display:grid;
		grid-template-areas:
		'hero hero feature-1'
		'hero hero feature-2';
		}
		.hero{
			grid-area: hero;
			min-height: 350px;
			
			background-image:url(../images/ac-ruanagan.jpg);
			background-size:cover;
			 background-position: center;
			 padding: 50px;}
		.hero > *{
			display:none;
			}
	.features{
		background-color:#000;
		color:#de0043;
		display:grid;
		place-content: center;
		text-align:center;
		cursor:pointer;}
.feature-1 {
	grid-area: feature-1;
	background-image:url(../images/serviceac.jpg);
	background-size:cover;
	}
		.feature-1 a{ text-decoration:none;}

.feature-2{
	grid-area: feature-2;
	background-image:url(../images/teknisi-senior.jpg);
	background-size:cover;
	}
	.feature-2 a{ text-decoration:none;}
.features .price { font-size: 3em;
font-weight: 200;
	}	
	/* kontak */
	 	 .kontak ul {
	display:grid;
	grid-template-columns: 1fr; list-style:none;
	 }
	 	 .kontak ul a{ text-decoration:none;
	 }
	/* navigasi */
	.menu { order:-1;
		display:grid;
		grid-template-columns: 1fr 2fr;
		align-items:center;
		}
	.menu .brand{ font-size: 1.3em;
	color:#333;}
			.menu ul { list-style:none;
			 display:grid;
			 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			 gap:5px;
				}
				.menu a{
					display:block;
					background-color:#000;
					color:white;
					text-decoration:none;
					text-align:center;
					padding:5px;
					text-transform:uppercase;
					font-size:0.9em;}
										/* humberger menu */

					.menu-toggle {
						display:none;
						flex-direction:column;
						justify-content: space-between;
						height: 20px;
						position:relative;
						z-index: 999;
						}
						.menu-toggle span {
							display:block;
							width: 28px;
							height: 2px;
							background: #fff;
							border-radius: 3px;
							transition: all 0.5s;
							}
					.menu-toggle input {
						display:block;
						position:absolute;
						 background-color: black;
						 width: 40px;
						 height: 28px;
						 left:-5px;
						 top:-5px;
						 cursor:pointer;
						 opacity: 0;
						 z-index: 2;
						 }
						 /* animation mrnu hamburger */
						 .menu-toggle span:nth-child(2){
							 transform-origin: 0 0;
							 width:20px;
							 }
							 .menu-toggle span:nth-child(3){
							 width:24px;
							 }
							 .menu-toggle span:nth-child(4){
								 transform-origin: 0 100;
								 }
								 .menu-toggle input:checked ~ span:nth-child(2){
									 background-color:#de0043;
									 width:28px;
									 transform: rotate(45deg) translate(8px, 0px);
									 }
									 .menu-toggle input:checked ~ span:nth-child(4){
									 background-color:#de0043;
									 transform: rotate(-45deg) translate(2px, 0);
									 }
									 .menu-toggle input:checked ~ span:nth-child(3){
									  opacity: 0;
									  transform: scale(0);
									
									 }
									 /* services */
									 .services {
										  display:grid;
									 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
									 gap:20px;
									 }
									 .service{
										 background-color:#0091df;
										 color:#ffffff;
										 padding:15px;
										 border:1px solid#aaa;
									 border-radius: 3px;
									 box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);}
										 .service .icon{
											 font-size: 3em;
											 text-align:center;}
											 .service h3{
												 font-size:1.5em;  text-align:center; color:#89d329; margin-bottom:10px;}
												 .service ul{ list-style:none; color:#B1E7E9; margin-bottom:15px; background-color:#683839; padding:15px; border-radius:3px; margin-left:20px;}
												  .service ol{  color:#B1E7E9;  background-color:#683839; padding:20px; border-radius:3px; margin-left:20px;}
												  service ol li{ margin-left:25px;}
												 .service p{
													 font-weight: 200;
													 letter-spacing: 1px;
													 font-size: 0.8em;  text-align:center;}
		/* galery */
		.gallery{
			margin-top: 10px;
			display:grid;
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			gap: 5px;}
						 
					.gallery h2 {
					/* grid-column-start: 1;
					 	grid-column-end: -1; */
						grid-column:1 / -1;
						text-align: center;
						margin-bottom: 20px;
						}
					/* contents */
		.contents{
		display:grid;
		grid-template-areas:
		'content'
		'include-content';
		background-color:#624963;
		padding:10px;
		color:white;
		}
		
		.contents b{ color:blue;}
		.contents i{ color:red;}
		.contents h3{ text-align:center; margin-bottom:10px;
		}
		.content ul { list-style:none;
			 display:grid;
			 grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
			 gap:8px; text-align:center; margin-bottom:10px;
				}
				.content ul a {
					font-size:1.1em; text-decoration:none; color:#fff;}
					
					.includ-content{ background-color:#ff3162; padding:10px; margin-top:10px; border-radius:3px;  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
					
					.bg-cont a{ background-color:#de0043; color:#000000; padding:5px 10px; margin-bottom:10px; border-radius:3px;}

					
					
					 /* list-prices */
									 .list-prices {
										  display:grid;
									 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
									 }
									 .list-price{
										 background-color:#0d2a40;
										 color:#ffffff;
										 padding:15px;
										 border:1px solid#aaa;
									 border-radius: 3px;
									 box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);}
										 .list-price .item-price{
											 font-size: 3em;
											 text-align:center;}
											 .list-prices .list-price h3{
												 font-size:1.3em; text-align:center; margin-bottom:10px; color:#00bcff;}
											 .list-price .item-type{
												 font-size:1em;  text-align:center; color:#89d329;
												 font-weight: 200;
													 letter-spacing: 1px;
												 }
												 .list-price .items{
													 list-style:none;
													 background-color:#443247;
													 box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
													 padding:12px; margin-bottom:5px;}
												 .list-price .item-idr{
													 font-weight: 200;
													 letter-spacing: 1px;
													 margin-bottom:15px;
													 font-size: 1.1em;  text-align:center;}
													 .list-prices .list-price p{ font-size:0.8em;  color:#fff;
													 padding:18px; border-radius:3px;
													 background-color:#66b512;}
													 .list-prices .list-price .i{ font-size:0.6em; color:#d30f4b;
													 margin-top:10px;}
													 .list-price .item-idrs{ font-size:1.1em; color:#ff3162; text-align:center;
													 margin-bottom:20px;}
													 .list-prices .list-price .item-price img{
									max-width:180px; 
									clip-path: polygon(85% 0, 100% 47%, 85% 100%, 1% 100%, 24% 57%, 0 10%);
									justify-content:center; align-items:center; color:white;}
					
					
					
					/* item */
					.item {		
							 display:grid;
							 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
							 gap:0;
							 background-color:#2b6636;
 						 }
									 .item-1{ 
									  background-image:url(../images/cuci-ac.jpg);
									 background-size:cover;
										  color:yellow;
										 padding:0 15px;
									 }
									 .item-1 h2{										 
										 text-align:center; padding-top:0; color:red; margin-bottom:15px;}
	
					 .item-2{ 
					  background-image:url(../images/bengkel-ac.jpg);
					 background-size:cover;
										  color:yellow;
										 padding:15px;
										}
					 .item-3{ background-image:url(../images/ac-standing-servis.jpg);
					 background-size:cover;
										 
										  color:yellow;
										 padding:15px;
										 }
										 
										 /* files */
		.files{
			display:grid;
			background-color:#624963;
			color:#fff;
			font-size:0.8em;
			}
		.files .file{ padding-left:20px;}
		.files .file ul{ list-style:none;}
						.files .file ul li{ margin-bottom:10px; margin-top:10px;}
	 	.files .file ul a{ text-decoration:none; color:#fff;}
		.files .file-media ul{
			display:grid;
			grid-template-columns: repeat(auto-fit, minmax(49px, 1fr));
			  text-align:center;
			 list-style:none;
			  margin-bottom:15px;
			   margin-top:15px;}
		.files .file-media ul a{ text-decoration:none; color:#fff; background-color:#de0043; padding:8px; font-size:20px;}
				.files .file-media ul a:nth-child(1){ padding:8px 14px;}
		.files .file-link{ padding-left:20px; background-color:#443247;}
		.files .file-link ul{ list-style:none;}
		.files .file-link ul li{ margin-bottom:10px; margin-top:10px;}
		.files .file-link ul a{ text-decoration:none; color:#fff;}
		.files .footer{ background-color:#443247; padding-bottom:20px; text-align:center; font-size:0.7em;}
			.files .adrees { padding:15px;}
			.files .adrees ul{ list-style:none; padding-left:25px; font-size:0.9em; margin-bottom:15px; color:#efefef;}
					
					@media (max-width: 1024px){
						.menu {
							order: inherit;
							grid-template-columns: 1fr;
							}
							.menu .brand{
								display:none;}
								.hero > * { display:block;
								text-align:center;
								color:#66b512;
								font-weight:1000;
								padding:5px; 
								margin-bottom: 5px;}
								.hero a{ background-color:#de0043; color:white;
								padding:10px; text-align:center; text-decoration:none;
								border-radius:3px;}
								.hero { display:flex;
								flex-direction:column;
								align-items:start;
								justify-content: center;}
								.service h3{
												 font-size:1,1em; margin-bottom:10px;
												}
												 .service p{
													 font-weight: 200;
													 letter-spacing: 1px;
													 font-size: 1em;}
								.service .icon img{
									max-width:180px; 
									clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); /*
									clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 35% 65%, 75% 75%, 0 76%, 25% 100%, 100% 100%, 87% 14%);*/
									justify-content:center; align-items:center; color:white;}
						}
						
						
					@media (max-width: 768px){
						.hero{
							min-width:250px;}
											.menu-toggle input {
												margin-right:20px;}

						.menu { order: -1;
						justify-items: end;
						background-color:#E131A4;  padding:20px;
					 box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
														 }	
						
						.menu-toggle {
							display:flex;
							}
							.menu ul {
								display: flex;
								position:absolute;
								right: 0;
								height: 80vh;
								top: 0;
								 background-color:#FFF;
								 width:85%;
								 flex-direction:column;
								 justify-content: space-evenly;
								 align-items:center;
								 z-index: 1;
								 transform: translateY(100%);
								 opacity: 0;
								 transition: all 1s;
								 }
								 
								 .menu a{
					background-color:#FFF;
					color:#211D1D;
					font-size:0.9em;} 
								 
								 .menu ul.slide {
									opacity: 1;
									transform: translateY(0); 
									 }
						
						}
						
					@media (max-width: 600px){
						body{
							margin:0px;
						}
						.header {
							grid-template-areas:
							'hero'
							'feature-1' 'feature-2';
							gap:5px;}
							.feature-1 { padding:60px 50px;
							font-weight:800;}
							.feature-1 p{
											background-color:#624963; padding:6px; border-radius:2px; font-size:1.2em; color:#fff;

								}
								.feature-2 { padding: 60px 50px;
															font-weight:800; 

								}
								.feature-2 p{
											background-color:#624963; padding:6px; border-radius:2px; font-size:1.2em; color:#fff;		
											}
							.gallery{
			margin-top: 10px;
			display:grid;
			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			gap: 5px;}
			
			/*list-prices */
									.list-prices {										 			
										  display:grid;
									 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
									 }
									 .list-prices .list-price .item-prices img{ display:none;}
					
											
					}