/*!
* Kept Companies - Krystal Klean USA 
* (https://www.krystalkleanusa.com)
*/
:root {
	/* globals */
	--primaryFont: 'Montserrat', Arial, sans-serif;
	--globalPadding: 1.875rem; /* 30px */
	--globalPaddingHalf: 0.9375rem; /* 15px */
	--globalPaddingDouble: 3.75rem; /* 60px */
	--animationTiming: 0.3s;

	/* theme colors */
	--redColor: #C70000;
	--isInvalidColor: #D11617;
	--isInvalidColorRGB: 209,22,23;

	--blueColor: #0075AB;
	--blueColorRGB: 0,117,171;
	--blueColorHover: #005983;
	--blueColorHoverRGB: 0,89,131;

	--lightBlueColor: #AFDAFF;
	--lightBlueColorRGB: 175,218,255;

	--greenColor: #00C360;
	--greenColorRGB: 0,195,96;
	--greenColorHover: #00963E;
	--greenColorHoverRGB: 0,150,62;

  --yellowColor: #fde600;
  --yellowColorRGB: 253, 230, 0;
  --yellowColorHover: #fddc00;
  --yellowColorHoverRGB: 253, 220, 0;

  --darkYellowColor: #bfa800;
  --darkYellowColorRGB: 191, 168, 0;
  --darkYellowColorHover: #bfa800;
  --darkYellowColorHoverRGB: 191, 168, 0;

	--tanColor: #C5BA9C;
	--tanColorRGB: 197,186,156;
	--darkTanColor: #9C9175;
	--darkTanColorRGB: 156,145,117;
	--lightTanColor: #EBE9E3;
	--lightTanColorRGB: 235,233,227;

	--lightColor: #F6F6F7;
	--lightColorRGB: 246,246,247;
	--lightColorHover: #E1E1E1;
	--lightColorHoverRGB: 225,225,225;

	--darkColor: #040423;
	--darkColorHover: #040423;
	--darkColorRGB: 4,4,35;
	--darkColorHoverRGB: 4,4,35;

	--backgroundColor: #F6F6F7;
	--backgroundColorRGB: 246,246,247;

	--lightBlueBackgroundColor: #E4EFF9;
	--lightBlueBackgroundColorRGB: 228,239,249;
}
html {
	height: 100%;
}
body {
	font-family: var(--primaryFont);
}
body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
section {
  font-family: var(--primaryFont);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
	font-size: 2.75rem; /* 44px */
}
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-size: 2rem; /* 32px */
}
h3 {
  font-size: 1.75rem; /* 28px */
}
h4 {
  font-size: 1.5rem; /* 24px */
}
h5 {
  font-size: 1.25rem; /* 20px */
}
h6 {
  font-size: 1rem; /* 16px */
  font-weight: 400;
  font-style: italic;
}
p {
  font-size: 1rem; /* 16px */
	line-height: 2.25;
	margin: var(--globalPadding) 0; /* 30px 0 */
}
section a {
  color: #000000;
  text-decoration: underline;
}
section a:hover,
section a:focus {
	color: #000000;
	text-decoration: none;
}
ul.nav {
  margin: inherit;
}
ul.nav li {
  counter-increment: inherit;
  margin: inherit;
  position: inherit;
}
section a:hover,
section a:focus {
  color: var(--blueColorHover);
}
/* global */
.text-green {
	color: var(--greenColor) !important;
}
.text-dark-green {
	color: var(--greenColorHover) !important;
}
.text-blue {
	color: var(--blueColor) !important;
}
.text-dark-blue {
	color: var(--blueColorHover) !important;
}
.text-dark {
	color: var(--darkColor) !important;
}
.text-yellow {
	color: var(--yellowColor) !important;
}
.text-yellow-hover {
	color: var(--yellowColorHover) !important;
}
.text-dark-yellow {
	color: var(--darkYellowColor) !important;
}
.text-gradient {
	background: linear-gradient(145deg,var(--darkYellowColor),var(--darkYellowColorHover));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mt-md {
	margin-top: var(--globalPadding);
}
.mb-md {
	margin-bottom: var(--globalPadding);
}
.mt-lg {
	margin-top: var(--globalPaddingDouble);
}
.mb-lg {
	margin-bottom: var(--globalPaddingDouble);
}
/* header */
header {
	padding: var(--globalPadding) 0;
}
header .logo {
	max-width: 14.5rem;
	position: relative;
	z-index: 2;
}
/* hero */
section.hero {
	padding: 10rem 0 5rem 0;
	background-color: var(--lightColor);
	background: linear-gradient(145deg,#ffffff,rgba(var(--yellowColorRGB),0.1),rgba(var(--yellowColorHoverRGB),0.25));
	margin-top: -11rem;
	height: 45rem;
	position: relative;
	display: flex;
	align-items: center;
}
section.hero .block {
	max-width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
section.hero h1 {
	color: #000000;
	font-size: 2.1rem;
}
section.hero h2 {
	color: var(--darkColor);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.75;
}
section.hero .btn-primary,
section.hero .btn-secondary,
section.hero .btn-phone {
	font-size: 1.1rem;
}
section.hero p {
	font-size: 1.25rem;
	margin: 1.5rem 0 4rem 0;
}
section.hero .bg-1 {
	width: 50%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url('../images/bg/bg-window.jpg');
	background-position: center center;
	background-size: cover;
	clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 992px) {
	section.hero {
		height: auto;
		padding: 5rem 0;
	}
	section.hero .block {
		max-width: 100%;
		padding: 7rem 0 1rem 0;
	}
	section.hero .bg-1 {
		display: none;
	}
}
@media (max-width: 450px){
	section.hero .block {
		display: block;
	}
	section.hero .btn-secondary,
	section.hero .btn-phone {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	section.hero .btn-phone {
		margin-top: 1rem;
	}
	section.hero {
		max-height: 100vh;
	}
}
/* buttons */
.btn-primary,
.btn-secondary {
	padding: var(--globalPaddingHalf) var(--globalPadding);
	font-size: 1rem; /* 16px */
	font-weight: 700;
	background-color: var(--yellowColor);
	border: 0;
	border-radius: 0.5rem;
	color: #000000;
	border: 1px solid rgba(0,0,0,0.15);
}
.btn-primary:disabled,
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--yellowColorHover) !important;
	border: 0;
	color: #000000 !important;
	border: 1px solid rgba(0,0,0,0.15);
}
.btn-primary:disabled,
.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--yellowColorHover) !important;
	border: 0;
	color: #000000 !important;
	border: 1px solid rgba(0,0,0,0.15);
}
.btn-secondary {
	background-color: var(--yellowColor);
	font-size: 16px;
	min-width: inherit;
}
.btn-phone {
	display: inline-flex;
	align-items: center;
	font-size: 1.15rem; /* 16px */
	font-weight: 700;
	color: var(--darkColor);
	padding: var(--globalPaddingHalf) var(--globalPadding);
	border-radius: 0;
}
/* section */
section.content {
	padding: 7rem 0;
}
section.content .logo-medium {
	max-width: 17rem;
}
section.content.features {
	background-color: var(--yellowColor);
	background: linear-gradient(180deg,#ffffff,rgba(var(--yellowColorRGB),0.08),rgba(var(--yellowColorHoverRGB),0.1));
	padding: 4rem 0 7rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.15);
}
section.content h2 {
	font-weight: 600;
	font-size: 2.5rem;
	margin: 0 0 6rem 0;
}
section.content h3 {
	font-weight: 600;
	font-size: 1.75rem;
}
section.content h4 {
	font-weight: 400;
	font-size: 1.25rem;
}
section.content p {
	font-size: 1.15rem;
}
@media(max-width:992px) {
	section.content h2 {
		font-size: 2rem;
	}
	section.content h3 {
		font-size: 1.5rem;
	}
	section.content h4 {
		font-size: 1.25rem;
	}
	section.content p {
		font-size: 1rem;
	}

}
/* icons */
.icon {
	max-width: 7rem;
	margin: 2rem 0;
}
/* blocks */
.gradient-block {
	border: 3px solid var(--blueColor);
	padding: var(--globalPadding);
	border-radius: 1rem;
}
/* form */
section.content .form {
	max-width: 54rem;
	margin: 0 auto;
}
section.content .form .form-select.is-invalid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
section.content .form .form-control.is-invalid {
	background-image: none;
}
section.content .form .alert {
	border-radius: 0;
	font-size: 14px;
}
section.content .form .alert.alert-warning {
	border-color: #D9BB62;
}
/* cta */
.cta {
	background-color: var(--blueColor);
	background: linear-gradient(145deg,var(--yellowColor),var(--yellowColorHover));
	padding: var(--globalPadding) 0;
	color: #000000;
	text-align: center;
	border-radius: 1rem;
	font-size: 1.25rem;
	max-width: 31rem;
	margin: -3rem auto 0 auto;
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.cta a,
.cta a:hover,
.cta a:focus {
	color: #000000;
	font-weight: 700;
}
@media(max-width:450px){
	.cta {
		margin-top: -5rem;
	}
	.cta a {
		display: block;
		margin-top: 1rem;
	}
}
/* form */
label {
	font-weight: 700;
	margin-bottom: 1rem;
	color: #333333;
}
.form-select,
.form-control {
	border: 0.15rem solid #dddddd;
	padding: 0.5rem;
	border-radius: 0.5rem;
}
.form-control:hover {
	border-color: #cccccc;
}
.form-control:focus {
	border-color: var(--yellowColor);
}
.message {
	font-size: 1rem !important;
}
/* misc */
.gradient-icon {
	font-size: 72px;
	font-weight: 300;
	background-color: var(--greenColor);
	background: -webkit-linear-gradient(145deg, var(--greenColor), var(--blueColor));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* line */
.line {
	background-color: var(--greenColor);
	background: linear-gradient(to left,var(--greenColor),var(--blueColor));
	height: 15px;
}
/* modal */
.modal .btn-closed {
	background: none;
	border: 0;
	color: #ffffff;
}
.modal .modal-header {
	background: linear-gradient(to left, #555555,#999999);
	color: #ffffff;
	font-weight: 700;
}
.modal .modal-footer {
	background-color: var(--lightColor);
}
.modal .modal-body strong {
	font-weight: 700;
	margin-bottom: 1rem;
}
.modal .modal-body h3 {
	font-size: 1.1rem !important;
	margin: 1rem 0;
}
.modal .modal-body p,
.modal .modal-body ul li,
.modal .modal-body address {
	font-size: 0.9rem;
	line-height: 1.3;
}
.modal .modal-body p,
.modal .modal-body ul {
	margin: 1rem 0;
}
/* footer */
footer {
	background-color: #001f4d;
	padding: var(--globalPaddingDouble) 0 var(--globalPadding) 0;
	color: #ffffff;
}
footer img {
	max-width: 15rem !important;
	width: 100%;
	margin: 0 auto !important;
	display: block;
}
footer p {
	font-size: 0.9rem;
	line-height: 1.3;
	color: #ffffff;
}
footer a,
footer a:hover,
footer a:focus {
	color: #ffffff;
	font-size: 0.9rem;
}
footer .logo {
	max-width: 15rem;
	margin: 0 auto;
	display: block;
}
