#redwood_city {
	background: url('../assets/images/redwood-city.jpg') center no-repeat;
	background-size: cover;
}

#san_francisco {
	background: url('https://wallpapercat.com/w/full/5/a/d/1425848-1920x1080-desktop-full-hd-san-francisco-skyline-background-image.jpg')
		center no-repeat;
	background-size: cover;
}

#san_mateo {
	background: url('https://lpa-design-studios.imgix.net/content/heros/Projects/Higher-Education/College-of-San-Mateo-College-Center1.jpg?auto=format&domain=lpa-design-studios.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=1121&ixlib=php-2.1.1&q=60&w=1920')
		center no-repeat;
	background-size: cover;
}

#san_jose {
	background: url('https://media.california.com/media/_versions/ca_geo/san_jose_california__3821x1946___v1920x820.jpg')
		center no-repeat;
	background-size: cover;
}

#san_carlos {
	background: url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=595,fit=crop/Y4LOrgPqO0srNeM2/dd05bea0-2cb5-4f31-b1c8-44bdeeddfed3-AE02DPqjWes6a8xq.jpg')
		center no-repeat;
	background-size: cover;
}

#belmont {
	background: url('https://ssl.cdn-redfin.com/photo/rent/a548e02b-57c9-4909-b093-d3b6f3017435/bigphoto/0_2.jpg')
		center no-repeat;
	background-size: cover;
}

#burlingame {
	background: url('https://www.burlingame.org/ImageRepository/Document?documentID=104')
		center no-repeat;
	background-size: cover;
}

#hillsborough {
	background: url('https://premarital.drtabitha.com/wp-content/uploads/2024/07/39-Hillsborough.png')
		center no-repeat;
	background-size: cover;
}

#santa_clara {
	background: url('https://www.relatedcalifornia.com/sites/california/files/styles/2x1_horizontal_rectangle_w/public/2022-07/acquiadam-assets/08_Santa_Clara_Creekdusk.jpg?itok=LANTFNXe')
		center no-repeat;
	background-size: cover;
}

#cupertino {
	background: url('https://sfyimby.com/wp-content/uploads/2022/03/The-Rise-aerial-view-rendering-by-Rafael-Vin%CC%83oly-Architects-1.jpg')
		center no-repeat;
	background-size: cover;
}

#milpitas {
	background: url('https://www.milpitas.gov/ImageRepository/Document?documentID=78')
		center no-repeat;
	background-size: cover;
}

#morgan_hill {
	background: url('https://www.mercurynews.com/wp-content/uploads/2019/05/SJM-L-MHHOTEL-0.jpg?w=1600&resize=1600,900')
		center no-repeat;
	background-size: cover;
}

#los_altos {
	background: url('https://media.inmobalia.com/imgV1/B95mbh8olwFQm~uCT2wPZNsw48fOO6fZf2JyyLpmtnY9L0eInQUz5tkQklYaK00tmbVSLp7oXbPMow1BmiX_ppt3LPdDKZl3IiJtlPjY30CBrVIAChml8h1ZikCKOP~VbSX_cOktHhmZMKWW65LM3sw4Jq69369B89id9F4YFsB~PjSr8pViwx9CcRtxhKFtQQBibxhEeXk-.jpg')
		center no-repeat;
	background-size: cover;
}

#los_gatos {
	background: url('https://visitlosgatosca.com/wp-content/uploads/2021/07/Copy-of-_DSC0022-scaled.jpg')
		bottom no-repeat;
	background-size: cover;
}

#menlo_park {
	background: url('https://content.r9cdn.net/rimg/dimg/e2/53/46a3027e-city-10870-16d956de970.jpg?width=1366&height=768&xhint=1384&yhint=932&crop=true')
		center no-repeat;
	background-size: cover;
}

#areas_info {
	margin: 30px 0;
}

.areas_info {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 20px;
}

.areas_info_content {
	max-width: 70%;
	width: 100%;
	flex: 0 0 70%;
}

.weather {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 12px;
	border-left: 2px solid black;
	max-width: 30%;
	width: 100%;
	flex: 0 0 30%;
}

.city_logo {
	width: 200px;
	margin: 0 auto;
}

.weather_title {
	text-transform: uppercase;
	font-size: 22px;
	margin: 20px 0 8px 16px;
}

.weather_title::after {
	content: '';
	display: block;
	width: 50%;
	height: 5px;
	margin-left: -16px;
	background: #d70301;
	border-radius: 150px;
	margin-top: 4px;
}

.weather_info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 68px;
	font-weight: 100;
	margin: 0 auto;
	img {
		width: 150px;
	}
}

.city_info {
	max-width: 250px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 12px;
	padding: 0 12px;
	a {
		text-align: right;
		color: rgb(0, 149, 194);
		font-size: 12px;
		margin: 0 0 0 110px;
	}
}

.city_data {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 12px;
	padding: 0 12px;
	a {
		transition: all 0.3s ease-in-out;
		color: rgb(0, 149, 194);
		&:hover {
			color: #d70301;
			text-decoration: underline;
			text-underline-offset: 4px;
		}
	}
}

.city_info_el {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid black;
	padding: 4px 0;
}

.areas_info_supertitle {
	font-size: 36px;
}

.areas_info_title {
	margin: 12px 0;
	font-size: 36px;
	font-weight: 900;
}

.areas_info_subtitle {
	font-size: 22px;
}

.areas_info_text {
	margin: 20px 0;
	font-size: 18px;
	p {
		margin: 8px 0;
	}
}

#areas_map {
	margin: 30px 0;
}

#area_rest {
	margin: 100px 0;
}

.area_rest_title {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: bold;
}

.area_rest_title::after {
	content: '';
	display: block;
	width: 10%;
	height: 5px;
	background: #d70301;
	border-radius: 150px;
	margin-top: 4px;
}

.area_info {
	margin: 30px 0;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.area_info_reverse {
	flex-direction: row-reverse;
}

.area_gallery {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, 110px);
	img {
		width: 110px;
		height: 110px;
		object-fit: cover;
	}
}

.area_description {
	font-size: 16px;
}

.area_establishments {
	margin: 40px 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.area_establishment {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 23%;
	flex: 0 0 23%;
	&:hover {
		.establishment_content {
			.establishment_address {
				color: #d70301;
				text-decoration: underline;
				text-underline-offset: 4px;
			}
		}
	}
}

.establishment_title {
	font-size: 18px;
	font-weight: 700;
	color: #000;
}

.establishment_content {
	display: flex;
	align-items: center;
	gap: 12px;
	img {
		width: 85px;
		height: 85px;
		object-fit: cover;
	}
	.establishment_address {
		transition: all 0.3s ease-in-out;
		font-size: 18px;
		color: #000;
	}
}