/* colors
#604043 brown
 #ae6f4e orange
 #3da9c9 blue
colors */

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

/* nav */

.nav-link{
	color: #000;
		cursor: pointer;
	  }
	  .nav-link:hover{
		color: #3da9c9;
		
	  }
  
/* nav */
.banner{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:right; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/Keys-1700.jpg );
	 position:relative;
  }

  .banner-residential{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:top; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/residential-keys.jpg);
	 position:relative;
  }

  .banner-automotive{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/automotive-locksmith.webp);
	 position:relative;
  }
  .banner-commercial{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:top; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/commercial.jpg);
	 position:relative;
  }
  .banner-emergency{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:bottom; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/emergency.webp);
	 position:relative;	
  }

  .banner-transponder{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/transponder.jpg);
	 position:relative;	
  }
  .banner-car-key-replacement{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/key-replacement.webp);
	 position:relative;	
  }
  .banner-change-and-rekey-locks{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/change-and-rekey-lock.jpg);
	 position:relative;	
  }
  .banner-ignition{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/ignition-repair.webp);
	 position:relative;	
  }

  .banner-lockout{
	background-attachment:fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: 
	linear-gradient(rgba(0,0,0,0.7),#000000b3),
	url(../imges/ignition-repair.webp);
	 position:relative;	
  }
/* hero-img */

.back-img{
	clip-path: circle(38.45% at 50% 50%);
}
/* hero-img */

/* buttons */
.first-btn {
	border-color: #ae6f4e;
	color: #fff;
	box-shadow: 0 0 40px 40px #ae6f4e inset, 0 0 0 0 #ae6f4e;
	-webkit-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
  }
  .first-btn:hover {
	box-shadow: 0 0 10px 0 #3da9c9 inset, 0 0 10px 4px #3da9c9;
  }


  /* buttons */

/* title */

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
   font-size: 2.7rem;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: .15em solid #3da9c9; /* The typwriter cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	letter-spacing: .10em; /* Adjust as needed */
	animation: 
	  typing 3s steps(40, end),
	  blink-caret .75s step-end infinite;
	
	  color: white;
  }

  .residential-h1{
	letter-spacing: .1em;  font-size: 2.4rem;
  }
  .automotive-h1{
letter-spacing: .1em;  font-size: 2.4rem;
  }

/* The typing effect */
@keyframes typing {
	from { width: 0 }
	to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: #3da9c9 }
  }
  

/* title */

  /* service */
  .box {
	background-color: #000;
	font-family: 'Oxygen', sans-serif;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: all 0.3s ease 0.3s;
}

.box:hover {
	background-color: #3da9c9;
}

.box:before,
.box:after,
.box .box-content:before,
.box .box-content:after {
	content: '';
	background-color: #3da9c9;
	width: 100%;
	height: 5px;
	position: absolute;
	top: 0;
	left: -100%;
	transition: all 0.4s ease-in;
}

.box:after {
	top: auto;
	bottom: 0;
	left: 100%;
}

.box .box-content:before {
	width: 5px;
	height: 100%;
	top: 100%;
	left: 0;
}

.box .box-content:after {
	width: 5px;
	height: 100%;
	top: -100%;
	left: auto;
	right: 0;
}

.box:hover:before,
.box:hover:after {
	opacity: 0.2;
	left: 0;
}

.box:hover .box-content:before,
.box:hover .box-content:after {
	opacity: 0.2;
	top: 0;
}

.box img {
	width: 100%;
	height: auto;
	transition: all 0.3s ease;

}

.box:hover img {
	opacity: 0.3;
}

.box .box-content {
	color: #fff;
	height: 100%;
	width: 100%;
	padding: 15px 0 0 15px;
	opacity: 0;
	position: absolute;
	top: 20px;
	left: 0;
	transition: all 0.45s ease;

}

.box:hover .box-content {
	opacity: 1;
	top: 0;
}

.box .title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	margin: 0 0 4px;
}

.box .post {
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: 500;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	margin: 0 0 5px;
	display: block;
}

.box .icon {
	padding: 0;
	margin: 0;
	list-style: none;
	opacity: 0;
	transform: rotate(-45deg);
	position: absolute;
	bottom: 15px;
	right: 15px;
	transition: all 0.4s cubic-bezier(0.6, -0.8, 0.735, 0.045);
}

.box:hover .icon {
	opacity: 1;
	transform: rotate(0deg);
}

.box .icon li {
	display: inline-block;
}

.box .icon li a {
	color: #fff;
	background-color: #013646e5;
	font-size: 16px;
	text-align: center;
	line-height: 38px;
	width: 40px;
	height: 40px;
	margin: 0 5px;
	border-radius: 50%;
	border: 2px solid #fff;
	display: block;
	position: relative;
	transition: all 0.3s ease 0s;
}

.box .icon li a:hover {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.box .icon li a:hover:after {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	animation: animate 0.5s ease-out 75ms;
}

@keyframes animate {
	0% {
		opacity: 0.3;
	}

	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}

	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}

@media only screen and (max-width:990px) {
	.box {
		margin: 0 0 30px;
	}
}

/* service */


/* footer */
textarea{
	resize: none;
	margin-bottom: 20px; 
	}
	
  
	.userselect{
	user-select: none;
	}
	
	.spam { display:none;}
  
  
	.Locations a{
	  color: #fff;
	 }
  

.Locations a:hover{
background-color: #ae6f4e;
color: #fff;
   }

   .zipcodes a{
    background-color: transparent;
    padding: 8px;
  margin: 3px auto;
  color: #fff;
  }

  .zipcodes a:hover{
	background-color: #ae6f4e;
color: #fff;
  }

   .form-control {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	background-color: var(--bs-form-control-bg);
	background-clip: padding-box;
	border: none;
	border-bottom:1.5px #acacac solid;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
  }
  .form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-form-control-bg);

    border-bottom-color: #d45343;
  outline: 0;
  box-shadow: none;
}


	.social-links {
		display:inline-block;
		height:20px;
		width:20px;
		background-color:rgba(255,255,255,0.2);
		margin:0 8px 8px 0;
		padding: 8px;
		text-align:center;
		line-height:20px;
		border-radius:50%;
		color:#fff;
		transition:all 0.5s ease;
	  }
	  .social-links:hover{
		  color:#ae6f4e;
		  background-color:#ffffff;
	  }


	  .col {
		.counter-number{
		  line-height: 48px;
		  font-size: 48px;
		  font-weight: bold;
		  color: #d45343;
		}
	  
		.counter-title {
		  color: #ffffff;
	  
		  strong {
			display: block;
			font-size: 1.5rem;
		  }
		}
	  }
	

	  /* footer */


	  .counter{
		background-color: #45685e;
        height: 400px;
	  }


	  img.transparent {
		color: #222;
		background:transparent;
	  }


	  .form-control {
		display: block;
		width: 100%;
		padding: .375rem .75rem;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #fff;
		background-color: transparent;
		background-clip: padding-box;
		border: none;
		border-bottom: 1.5px #acacac solid;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 0;
	}
	
	.form-control:focus {
	background-color: transparent;

		border-bottom-color: #ae6f4e;
	
		outline: 0;
		box-shadow: none;
		color: #fff;
	}
	
	.form-label{
		color: #fff;
	}
	.form-control::placeholder{
		color: #ebe9e98a;
	}


	#lz_overlay_wm .lz_overlay_wm_sh_act{
		width: 57px !important;
		height: 57px !important;
		  background:#ae6f4e!important;
		  border-radius: 50%;
		  z-index: 20000200;
		  border-color:rgb(230, 86, 86);
		  transform: translateY(0px);
		  right: 0;
		  position: relative;
		  display: block;
		  top: 0;
		  visibility: visible;
		}

		#lz_overlay_wm .lz_overlay_wm_icon{
			background-color: #ae6f4e ;
			border-radius: 50%;
		}
		.lz_chat_header{
			background-color: #ae6f4e !important;
		}
		#lz_chat_overlay_data_form_ok_button{
			background:#ae6f4e!important;
		}

		
.move {
  position: relative;
  opacity: 0;
}

.move.active {
  opacity: 1;
}

.active.fade-bottom {
  animation: fade-bottom 0.7s ease-in;
}

.active.fade-left {
  animation: fade-left .7s ease-in;
}

.active.fade-right {
  animation: fade-right .7s ease-in;
}

.active.fade-top {
  animation: fade-top .7s ease-in;
}

@keyframes fade-top {
  0% {
      transform: translateY(-100px);
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes fade-bottom {
  0% {
      transform: translateY(100px);
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes fade-left {
  0% {
      transform: translateX(-100px);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      opacity: 1;
  }
}

@keyframes fade-right {
  0% {
      transform: translateX(100px);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      opacity: 1;
  }
}


@media (max-width:350px) {
	.typewriter h1{
			font-size: 0.95rem;
  overflow: hidden;
  border-right: .15em solid #3da9c9;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .10em;
  animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
  color: white;
	}

	.logo{
		width: 120px;
	}


}