@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap");


:root {
	--color-blue-parkingskillz: #003da5;		/* PMS 293 C */
	--color-orange-parkingskillz: #fe5000;		/* PMS Orange 021 C */

	/* PMS 293 C Analogous */
	--color-bluegreen-dark: #00629b;			/* PMS 3015 C */
	--color-violet: #5c068c;					/* PMS 2597 C */


	/* PMS Orange 021 C Monochromatic */
	--color-orange-light: #ff8f1c;				/* PMS 1495 C */
	--color-orange-dark: #b94700;				/* PMS 1525 C */

	/* PMS 5425 C Monochromatic */
	--color-bluegray: #7a99ac;					/* PMS 5425 C */
	--color-bluegray-light: #b9d9eb;			/* PMS 290 C */
	--color-bluegray-dark: #254a5d;			/* PMS 2168 C */

	--color-coolgray1: #d9d9d6;				/* PMS Cool Gray 1 C */
	--color-offwhite: #edf5fa;					/* PMS 290 C 25% */



	--btn-border-radius: 0.6rem;


	--container-padding-mobile-default: 0.72rem 1rem;
	--container-padding-desktop: 1rem 4rem;
	--container-padding-desktop-large: 1rem 5.8rem;
}






/* Default width = 320px (iPhone 4, 5, SE) */
html {
	font-size: 16px;
}
img.logo  {
	height: 1.96rem;
	margin: 0px;
	width: auto;
}



.input-group {
  position: relative;
  margin-bottom: 20px;
}

/* 1. Style the Input */
.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

/* 2. Initial State of Label (inside the box) */
.input-group label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%); /* Centered vertically inside input */
  background-color: white;    /* Must match your page background */
  padding: 0 4px;             /* Creates the gap in the border */
  color: #999;
  transition: all 0.2s ease;
  pointer-events: none;
}

/* 3. Animation: Move to top-left border on Focus or when Text exists */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
  top: 0;                     /* Moves to the top border line */
  transform: translateY(-50%) scale(0.85); /* Stays centered on the line */
  left: 10px;
  color: #2563eb;             /* Changes color on focus */
}

/* Optional: Highlight border on focus */
.input-group input:focus {
  border-color: #2563eb;
}







/* Width >= 375 (iPhone 6/7/8/SE, X) */
@media (min-width: 375px) {
	html {
		font-size: 17px;
	}
}


/* Width >= 390 (iPhone 12 Pro) */
@media (min-width: 390px) {

}



/* Width >= 414 (iPhone 6/7/8 Plus, XR) */
@media (min-width: 414px) {
	html {
		font-size: 17.5px;
	}
}



/* Width >= 430 (iPhone 14 Pro Max) */
@media (min-width: 430px) {
	html {
		font-size: 18px;
	}
	.logo img {
		height: 2.6rem;
	}
}




/* Width >= 981 (Small Desktop) */
@media (min-width: 981px) {
	html {
		font-size: 16px;
	}
}




/* Width >= 1112 (Medium Desktop) */
@media (min-width: 1112px) {
	html {
		font-size: 16.6px;
	}
}




/* Width >= 1336 (Large Desktop) */
@media (min-width: 1336px) {
	html {
		font-size: 17px;
	}
}