:root {
	--a: #3DC244;
	--b: #3D78C2;
	--bb: #18304D;
	--c: #c23DBB;
	--d: #c2873D;
	}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #222;
	}

body {
	background-color: #333;
	color: #eee;
	font: normal 16px Poppins;
	background: url('./media/floor-pbh.jpg') no-repeat center center fixed;
	background-size: cover;
	backdrop-filter: (3px);

	--xmax-width: 625px;
	--max-width: 825px;

	--display-width: min(var(--max-width), 100vw);

	.star {
		color: #faa500;
		}

	.items {
		width: var(--display-width);
		overflow: hidden;
		margin: auto;
		background: rgba(0,0,0,0.3);
		backdrop-filter: blur(3px);
		box-shadow: 0 8px 32px rgba(0,0,0,0.5);

		.item {
			xmin-height: 350px;
			background-color: #FFF;
			xbackground-color: #333;
			color: var(--bb);
			
			xmargin: 15px;
			padding-bottom: 36px;

			xmargin-bottom: 3px;

			padding-bottom: 150px;

			xborder-radius: 7px;
			xbox-shadow: 2px 2px 8px rgba(0,0,0,0.5);

			.basic {
				padding: 0 25px;
				}

			img {
				width: 100%;
				display: block;
				}
			
			.amenities {
				font-size: 42px;

				.amenity {
					margin-bottom: 15px;
					}

				.title {
					font-weight: bold;
					}

				.value {}
				}


			.services {
				font-size: 36px;
				}

			.ratings {
				--width: 52px;

				display: flex;
				flex-direction: column;
				gap: 13px;
				justify-content: center;
				align-items: center;

				.num {
					display: grid;
					place-content: center;
					font-size: var(--width);
					font-weight: bold;
					color: #faa500;
					border-style: solid;
					padding: 35px;
					border-radius: 150px;
					border-color: #e5e5e5;
					border-width: 7px;
					}

				.text {
					font-size: 40px;
					font-weight: bold;
					color: #444;
					text-align: center;
					}

				.stars {
					display: flex;
					gap: 5px;
					justify-content: center;
					.star.partial {
						position: relative;

						.bg-star {
							position: absolute;
							top:0;
							left: 0;
							z-index: 0;
							svg {
								color: #f5f5f5;
								}
							}


						.fg-star-box {
							.fg-star {
								position: relative;
								z-index: 1;
								overflow: hidden;
								width: calc(var(--width) * 0.72);
								}
							}

						}
					}
				svg {
					color: #faa500;
					width: var(--width);
					display: block;
					}
				}


			.star-graphs {
				display: grid;
				grid-template-columns: auto auto 1fr auto;
				justify-items: center;
				align-items: center;
				gap: 15px;
				font-weight: bold;
				margin-bottom: 15px;
				font-size: 32px;

				.bar {
					border-radius: 3px;
					background-color: #e5e5e5;
					overflow: hidden;
					justify-self: stretch;
					align-self: stretch;
					.inner {
						background-color: #faa500;
						border-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
						height: 100%;
						}
					}

				svg {
					color: #faa500;
					width: 32px;
					display: block;
					}

				}


			.recommended {
				font-weight: bold;

				font-size: min(62px, 8.5vw);

				text-align: center;


				.num {
					font-size: 135px;
					}

				}



			.topic {

				color: rgba(0,0,0,0.6);
				font-size: 32px;
				
				p {
					margin-bottom: 25px;
					}

				.title {
					color: var(--bb);
					font-size: 42px;
					font-weight: bold;
					}

				}


			.card {

				color: var(--bb);
				font-size: 48px;

				ul {
					list-style-type: square;
					padding-top: 15px;
					padding-left: 25px;
					margin-left: 25px;
					}

				.title {
					font-size: 62px;
					font-weight: bold;
					}

				}




			.years-in-business {
				font-weight: bold;

				font-size: 62px;

				text-align: center;


				.years {
					font-size: 135px;
					}

				}


			.testimonial {
				font-size: 32px;
				color: #222;

				p {
					margin-bottom: 21px;
					}


				.detail {
					display: flex;
					gap: 15px;
					align-items: center;

					.star {
						width: 32px;

						svg {
							width: 100%;
							display: block;
							}
						}

					.score {
						font-weight: bold;
						}

					.name {
						font-weight: bold;
						}

					.location {}
					}

				.task {
					color: var(--a);
					margin-bottom: 15px;
					font-weight: bold;
					}

				.comment {
					opacity: 0.65;
					}
				}



			.hours {
				background-color: #fff;
				color: var(--bb);
				.title {
					font-size: 32px;
					font-weight: bold;
					}

				.days {
					opacity: 0.85;
					font-size: 28px;

					display: grid;
					grid-template-columns: auto auto auto auto;

					.day, .from, .to {font-weight: bold;}

					.weekends {
						grid-column: span 4;
						height: 25px;
						}
					}

				}



			} /* item */


		.pic:has(+ .pic) {
			padding-bottom: 25px;
			}
		

		.abouts {
			background-color: #fafafa;
			padding: 0px 15px;
			color: #333;

			padding-bottom: 25px;

			.location {
				margin-bottom: 15px;
				font-size: 14px;
				text-align: left;
				margin-left: 9px;
				font-weight: bold;
				opacity: 0.85;
				}

			.headline {
				font-size: 32px;
				xcolor: #118032;
				xbackground: #e0e8c9;
				color: #ececec;
				background-color: var(--a);
				padding: 7px 15px;
				opacity: 0.85;
				font-weight: bold;
				text-align: center;
				text-transform: uppercase;
				overflow-wrap: break-word;
				word-break: normal;
				border-radius: 5px;

				margin-bottom: 25px;
				}

			.locations {
				font-weight: bold;
				font-size: 21px;
				text-align: center;
				opacity: 0.88;

				margin-bottom: 15px;

				.title {
					display: none;
					text-align: center;
					font-size: 28px;
					}

				}

			.local-note {
				text-align: center;
				font-size: 25px;
				}

			.padding {
				}
			} /* abouts */

		}

	> .background {
		position: fixed;
		inset: 0;
		background: rgba(255,255,255,0.3);
		backdrop-filter: blur(3px);
		z-index: -1;
		}
	
	header {
		position: sticky;
		top: 0px;
		z-index: 10;
		width: 100%;

		svg {width: 24px;}

		.content {
			display: flex;
			flex-direction: column;
			xmargin-top: 12px;
			xborder-top-right-radius: 7px;
			xborder-top-left-radius: 7px;
			max-width: var(--display-width);
			background-color: #fafafa;
			xbackground-color: var(--d);
			margin: auto;
			padding: 15px 15px 0 15px;
			color: #222;
			xcolor: #dcdcdc;

			a {
				xcolor: #dcdcdc;
				}

			.top {
				display: flex;
				gap: 15px;
				font-weight: bold;

				font-size: 22px;

				.logo {
					flex: 1;
					img {
						display: block;
						width: 175px;
						opacity: 0.85;
						}
					}

				.detail {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 15px;

					a {
						display: flex;
						align-items: center;
						gap: 5px;
						}
					
					}
				}

			.bottom {
				}


			}
		}


	footer {
		position: sticky;
		bottom: 0px;
		width: 100%;
		max-width: var(--max-width);
		background-color: #fafafa;
		min-height: 75px;
		margin: auto;
		z-index: 10;

		color: #222;

		svg {
			width: 24px;
			}

		.button {
			border-radius: 7px;
			xbackground-color: #0070FF;
			background-color: var(--b);
			color: white;
			font-weight: bold;

			display: flex;
			gap: 5px;
			align-items: center;
			justify-content: center;
			padding: 12px 5px;
			cursor: pointer;
			}

		.call {
			padding: 15px;
			font-size: 21px;
			}
		}

	.hidden {
		display: none !important;
		}
	}


@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/poppins-v21-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/poppins-v21-latin-600.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/poppins-v21-latin-700.woff2') format('woff2'); 
}