/* CSS Document */
main {
  .hero {
	  box-shadow:var(--box-shadow);
	  margin:0 20px;

    h1 {
      font-weight: 900;
      color: var(--dark-blue);
      font-size: 1.25rem;
      padding: 10px;
      margin: 0;
	  line-height:1.5rem;
	  background: #fff url("../images/clouds.png") no-repeat center top / 100% auto;
    }

    .hero-background {
	  background:url('../images/home_hero.jpg') no-repeat center 100% / cover;
	  display:grid;
	  gap:10px;
	  padding-top:20px;
	  		
      h1,
      h2 {
        color: #fff;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
      }
	  
	  h1 {
		background:none; 
		font-size:1.5rem; 
		font-weight:bold;
		margin:0 20px;
		padding:0;
		line-height:1.5rem;
	  }
	  
	  h2 {
		font-size:1.25rem;
		margin:0 20px;  
	  }
	  
	  h3 {
		color:white;
		margin:0 20px;
		font-size:1rem;
		font-weight:bold;
	  }

      form {
        background-color: rgba(0, 0, 0, 0.35);
        padding: 10px;
		display:grid;
		gap:10px;
		max-width:600px;
		margin:0 auto;
		width:100%;
		box-sizing:border-box;
		
		label {
			position:relative;
			display:block;
			
			select::picker-icon {
				top:12px;	
			}
		}
		
        .zip {
        
        }
		
		.error {
			background-color:#ffdddd;	
		}
      }
    }
  }
}

.reviews {
	padding:0 20px;
	overflow-x:hidden;
	
	ul {
		padding:0;
		margin:0;
		
		li {
			border: solid 1px var(--light-blue);
			border-top: solid 5px var(--light-blue);
			padding:20px;
			text-align:left;
			position:relative;
			box-sizing:border-box;
			height:250px;
			width:95%;
			display:inline-block;
			list-style:none;
			
			.review-stars {
				width:150px;	
			}
			
			p:first-of-type {
				margin-bottom:5px;
			}
			
			.read-review {
				line-height:normal;
				font-size:.75rem;
				text-decoration:none;
				color:var(--dark-blue);
				float:right;	
				display:inline-block;
			}
			
			p:last-of-type {
				position:absolute;
				bottom:20px;
				left:20px;	
				margin:0;
				font-style:italic;
			}
			
			.angi-logo {
				width:40px;	
				bottom:20px;
			}
			
			.nextdoor-logo {
				width:90px;
				bottom:27px;
			}	
			
			.angi-logo, .nextdoor-logo {
				position:absolute;
				right:20px;	
			}
		}
	}
}

.services {
	display:grid;
	gap:20px;
	padding:0 20px;
	grid-template-columns: auto;
	
	& > div {
		border:solid 1px var(--light-blue);
		box-shadow: var(--box-shadow);
		text-align:left;
		
		a {
			text-decoration:none;
			position:relative;
			display:inline-block;
			
			&:before {
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") no-repeat;
				background-position: 50%;
   				background-size: 14px;
				background-color:var(--dark-blue);
    			border-radius: 50%;
    			content: "";
    			display: block;
    			height: 18px;
    			left:100%;
    			position: absolute;
    			top: 22px;
    			width: 18px;	
				transform:rotate(-90deg);
				color:white;
			}
		
			h1 {
				color:var(--dark-blue);
				margin:0;
				padding:20px 20px 10px 20px;
				font-size:1.25rem;
				line-height:1.25rem;
			}
		}
		p {
			padding:0 20px 20px 20px;	
			margin:0;
			line-height:1.5rem;
		}
		img {
			width:100%;
			max-width:640px;	
		}
	}
}

.service-areas {
	h1 {
		padding:0 20px;
	}
	ul {
		display:flex;
		padding:0;
		row-gap:1rem;
		flex-wrap:wrap;
		justify-content:center;
		background-color:var(--light-blue);
		padding:20px;
		margin:20px 0 0 0;
		
		li:first-child {
			padding:0;	
		}
		
		li {
			margin:0;
			padding:0 0 0 28px;	
			list-style:none;
			position:relative;
			line-height:1rem;
		}
		
		li:not(:first-child) {
			&:before {
				content:'';
				border-radius:50px;
				width:5px;
				height:5px;
				background-color:#000;
				position:absolute;
				left:12px;
				top:6px;
			}
		}
	}
}

.awards {
	padding:0 20px;
	ul {
		padding:0;
		display:grid;	
		gap:20px;
		grid-template-columns:auto auto;
		place-items:center;
		
		li:first-child {
			grid-column: 1 / -1;
			justify-self:center;
			
			img {
				width:35%;	
			}
		}
		
		li {
			list-style:none;
			
			img {
				width:100%;	
			}
		}
	}
}

@media screen and (min-width: 576px){
	
	.hero {
		.hero-background {
			form {
				grid-template-columns: 50% 15% auto;	
			}
		}
	}
	
	.services {
		grid-template-columns:auto auto;
		
		h1 {
			grid-column: 1 / -1;	
		}
	}
	
	.awards {
		ul {
			grid-template-columns: auto auto auto auto;
			
			li:first-child {
			  
			  img {
				  width:20%;	
			  }
		  }	
		}
	}
	
}

@media screen and (min-width: 768px){
	
	.hero {
	  .hero-background {
		  padding-bottom:5vh;	
	  }
	}
	
	.awards {
		ul {
			grid-template-columns: auto auto auto auto auto;
			
			li:first-child {
				grid-column: auto;
				justify-self:inherit;
				
				img {
					width:100%;	
					max-width:95px;
				}
			}
		}
	}
}