/* CSS Document */
:root {
  font-family: Arial, Helvetica, sans-serif;
  --dark-blue: #3f62ad;
  --dark-green: #6eaa43;
  --light-blue: #c5d0e6;
  --light-grey: #eff0f0;
  --md-grey: #dbdbdb;
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  font-size:1rem;
  line-height:1.5rem;
  interpolate-size: allow-keywords;
}

body {
	margin: 0;
	display:grid;
  	gap:20px;
}

h1 {
	line-height:2rem;
	color:var(--dark-blue);
	margin:0;	
}

.cta-green {
	background-color: var(--dark-green);
	color: #fff;
	border:none;
}

.cta-light-blue {
	background-color:var(--light-blue);
	color: var(--dark-blue);
}

.cta-dark-blue {
	background-color:var(--dark-blue);
	color: #fff;
}

.cta-white {
	background-color:#fff;
	color: var(--dark-blue);
}

.cta-green, .cta-light-blue, .cta-dark-blue, .cta-white {  
  font-weight: 900;
  padding: 10px;
  text-decoration: none;
  display: block;
  font-size:1rem;
  box-sizing:border-box;
}

.btn {
	span {
		pointer-events:none;	
	}
}

.btn-active {

	position:relative;
	
	span {
		opacity:0;
	}
				
	&:after {
		content:'';
		display:block;
		border: 3px solid #fff;
  		border-top: 3px solid rgba(255,255,255,.5);
 		border-radius: 50%;
  		width: 20px;
  		height: 20px;
  		animation: spin .5s linear infinite;
		position:absolute;
		inset:0;
		place-self:center;
	}
	
}

.facebook-logo {
	display:inline-block;
	background:url('../images/facebook_logo_white.svg') no-repeat;
	background-size:100%;
}

.nextdoor-logo-white {
	display:inline-block;
	background:url('../images/nextdoor_logo_white.svg') no-repeat;
	background-size:100%;
}

header {   
  text-align: center;
  background: #fff url("../images/clouds.png") no-repeat center top / 100% auto;
  position: sticky;
  top: 0;
  z-index: 2;
  display:grid;
  grid-template-columns:auto auto auto;
  padding:20px;
  align-items:center;
  border-bottom: solid 1px var(--light-blue);

  .cta-green {
	  display:none;
	  width:fit-content;
	  margin:0 auto;
  }

  .logo {
	width: 100%;
	justify-self:center;
	max-width:175px;
  }
  
  .stack {
	display:grid;
	gap:5px;
	order:-1;
	justify-self:left;

	span {
	  height: 3px;
	  width:30px;
	  background-color: var(--dark-blue);
	  transition: transform 0.4s ease, opacity 0.4s ease;
	}
  }
  
  nav {
	  
	 position:absolute;
	 top:0;
	 transform:translateX(-100%);
	 display:grid;
	 width:100%;
	 padding:20px 0;
	 box-shadow:var(--box-shadow);
	 background: #ffffff url("../images/clouds.png") no-repeat center top / contain;
	 transition:transform .3s ease-in-out;
	 overflow-y:scroll;
	 
	 .closer {
		position:absolute;
		right:20px;
		top:45px;
		display:grid;
		border:none;
		width:20px;
		height:20px;
		background:none;
		
		&:before,
		&:after {
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 9px;
		  width: 2px;
		  height: 20px;
		  background-color: #333333;
		}
		
		&:before {
		  transform: rotate(45deg);
		}
		
		&:after {
		  transform: rotate(-45deg);
		}
	 }
	 
	 .logo {
		justify-self:left;
		margin:0 0 20px 20px;	
	}

	ul {
		padding:0;
		list-style:none;
		text-align:left;
		li {
		  border-bottom:solid 1px var(--light-blue);
		  
		  .nav-el {
			text-decoration: none;
			color: var(--dark-blue);
			font-weight:bold;
			display:block;
			width:100%;
			padding:10px 20px;
	  
			&:active,
			&:hover {
			  font-weight: bold;
			  background-color: rgba(63, 98, 173, 0.15);
			}
		  }
		  
		  &.services-nav {
			  position:relative;
			  &:after {
				content: '';
				width: 24px;
				height: 24px;
				position: absolute;
				top:10px;
				right: 10px;
				transition: rotate 0.3s ease;
				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='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") no-repeat;  
			  }
			  
			  span {
				display:block;
				color: var(--dark-blue);
				font-weight: bold;
				padding: 10px 20px;
				pointer-events:none;
			  }
			  
			  &.active {
				  
				  span {
					background-color:var(--light-blue);  
				  }
				
				&:after {
					rotate:-180deg;
				}
				
				.services-subnav {
					margin:10px 20px;
					height:165px;
					pointer-events:auto;
				}
			  }
			}
		  
		  .services-subnav {
			  list-style: none;
			  text-align: left;  
			  border-left:solid 1px var(--md-grey);
			  padding:0 0 0 20px;
			  overflow:hidden;
			  height:0;
			  margin: 0 20px;
			  transition:height .3s ease-in-out, margin .3s ease-in-out;
			  
			  li {
				  padding:5px 0;
				  border:none;
				  
				  &:first-child {
					padding-top:0;  
				  }
				  
				  a {
					color:inherit;
					text-decoration:none;
					
					&:visited, &:active {
						color:inherit;	
					}
				  }
			  }
		  }
		}
	}
	
	.cta-green {
		display:block;
		margin:20px;
		width:calc(100% - 40px);	
	}
	
	.phone-number {
		justify-self:center;
		img {
			margin-right:5px;
			width:15px;	
		}
		span {
			display:inline-block;
		}
	}
	
	&.active {
		transform:translateX(0);
		transition:transform .3s ease-in-out;
		top:0;
	}
  }
	
  .phone-number {
	  justify-self:right;
	  span:first-child {
		  display: inline-block;
		  background-color: var(--dark-green);
		  border-radius: 50%;
		  padding: 8px;
		  border: solid 1px #ffffff;;
		  
		  img {
			width:15px;
		  }
	  }
   }
}

.announcement {
	margin:0 20px;
	padding:0 20px;
	background-color:#1b8751;
	img {
		width:100%;
		max-width:412px;	
	}
}

main {
  text-align: center;
  display:grid;
  gap:30px;
  
  select {
	width:100%;	
	border-radius:inherit;
	padding:10px;
  }
  
  select, ::picker(select) {
	border:solid 1px var(--light-blue);
  }
			
  ::picker(select) {				
		option {
			background-color:var(--light-blue);	
		}
  }
			
  select, ::picker(select) {
		font-size:1rem;
		appearance:base-select;
		background-color:#fff;
			
		&:focus {
			outline:none;	
		}
			
		&:open::picker-icon {
			rotate:-180deg;	
		}
		
		option:first-child {
			padding-top:10px;	
		}
			
		option {
            color: var(--dark-blue);
			padding:0 10px;
			box-sizing:border-box;
			
			&::checkmark {
				display:none;
			}
        }
		
		option:last-child {
			padding-bottom:10px;	
		}
  }
		
  select::picker-icon {
	content:'';
	width:24px;
	height:24px;
	position:absolute;
	right:10px;
	transition: rotate 0.3s ease;
	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='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") no-repeat;  	
  }
}

input, textarea {
	font-size:1rem;
	padding:10px;
	width:100%;
	border:solid 1px var(--light-blue);
	box-sizing:border-box;
		  
	&:focus {
		outline:none;  
	}
}

.phone-number {
    font-size: 1.5rem;
    color: #000;
    display: block;
    font-weight: 900;
    text-decoration: none;
	
	span {
		display:none;	
	}
}

footer {
	background-color:var(--dark-blue);
	padding:20px;
	text-align:center;
	
	ul {
		padding:0;
		display:grid;
		gap:20px;
		
		li {
			list-style-type:none;
			
			h1 {
				color:#fff;
				font-size:1rem;
				margin:0 0 5px 0;
				line-height:1rem;	
			}
			
			a {
				display:block;
				color:#fff;
				text-decoration:none;
				font-size:1rem;
				width:fit-content;
				margin:0 auto;	
			}
		}
	
		li:first-child {
			.logo {
				width:50%;	
				max-width;300px;
			}
		
			.cta-white {
				margin:20px 0 0 0;	
				width:100%;
				box-sizing:border-box;
			}
		
			.cta-dark-blue {
				margin:10px 0 0 0;
				border:solid 1px #fff;
				width:100%;
				box-sizing:border-box;	
			}
		
			p {
				color:#fff;
				margin:20px auto 0 auto;
				width:fit-content;	
			}
		
			.facebook-logo {
				width:20px;
				height:20px;	
				margin:10px 5px 0 0;
			}
		
			.nextdoor-logo-white {
				width:125px;
				height:20px;
				display:inline-block;
				margin:10px 0 0 0;
			}
		}
	}
	
	p:last-child {
		color:#fff;	
	}
}

@keyframes spin {
  	0% { transform: rotate(0deg); }
  	100% { transform: rotate(360deg); }
}

.owl-carousel .owl-dots {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.owl-carousel .owl-dot {
    background: #ccc !important; /* Gives them a fallback color */
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 50%;
    display: inline-block;
}

.owl-carousel .owl-dot.active {
	background:#869791 !important;
}

.owl-carousel .owl-stage-outer {
    padding: 20px 0;
    margin: -20px 0;
}

.owl-carousel .owl-item li{
    box-shadow: var(--box-shadow);
    margin: 10px;
}

@media screen and (min-width: 576px){
	header {
		.nav-container {
			grid-template-columns:auto auto auto;
			
			nav {
				order:-1;
				padding-top:0;
			}
			
			.cta-green {
				order:4;	
			}
		}
	}
}

@media screen and (min-width: 640px){
	footer {
		ul {
			grid-template-columns:auto auto auto auto;	
			
			li:first-child {
            	.logo {
               	 width: 75%;
            	}
			}
			
			li:not(:first-child) {
				text-align:left;
				a {
					margin:0;	
				}	
			}
		}
	}
}

@media screen and (min-width: 768px){
	header {
		.nav-container {
			grid-template-columns:auto auto auto auto;
			nav {
				order:-1;	
			}
		}
	}
}