@font-face {
	font-family: 'bogle';
	src: url('/files/BOGLEREGULAR.OTF') format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'everyday';
	src: url('/files/EverydaySans-Regular.otf') format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'myriad';
	src: url('/files/MyriadProSemibold.ttf') format('truetype');
	font-display: swap;
}

body {
	background-color: #424242;
	background-image: url('./files/bback.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	margin: 0;
	min-height: 100vh;
}

.container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 40px;
	max-width: 1400px;
	width: 100%;
	min-height: 95vh;
	box-sizing: border-box;
	padding: 20px;
	margin: 0 auto;
}

.column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 20px;
	border: 0 solid #ccc;
	max-width: 90vw;
	box-sizing: border-box;
}

.container .column:last-child {
	gap: 14px;
}

.logo-img {
	display: block;
	max-width: min(420px, 85vw);
	height: auto;
}

.column a {
	display: block;
}

@media (max-width: 1100px) {
	.container {
		flex-direction: column;
		gap: 20px;
		padding: 16px;
	}

	.column {
		width: 100%;
		padding: 10px;
	}
}

	.grid-container {
		display: grid; /* Enables CSS Grid for the container */
		grid-template-columns: 1fr 1fr; /* Creates two equal-width columns by default (desktop) */
		gap: 2px; /* Adds space between columns */
		}
	.grid-item {
		padding: 0px;
		border: 1px solid #ccc;
		}
	@media (max-width: 1100px) { /* Adjust breakpoint as needed */
		.grid-container {
			grid-template-columns: 1fr; /* Changes to a single column on smaller screens */
			}
			}
	@media (max-width: 700px) {
		.column {
			color: black;
			font-size: 30px;
			}
		.buttonb {
			color: #ffffff;
			background-color: #0053e2;
			border: 1px solid #ffffff;
			border-radius: 15px;
			padding: 0px 0px;
			cursor: pointer;
			}
		.buttonb {
			width: 300px;
			height: 55px;
			font-size: 30px;
			font-family: 'everyday', Arial, sans-serif;
			}	
		.buttonb:hover {
			background: #001e60;
			color: #ffffff;
			}
		.buttonlarge {
			color: #ffffff;
			background-color: #0053e2;
			border: 2px solid #ffffff;
			border-radius: 20px;
			padding: 0px 0px;
			cursor: pointer;
			}
		.buttonlarge {
			width: 320px;
			height: 65px;
			font-size: 26px;
			font-family: 'everyday', Arial, sans-serif;
			}	
		.buttonlarge:hover {
			background: #001e60;
			color: #ffffff;
			}
		.buttonw {
			color: #ffffff;
			background-color: #001e60;
			font-size: 20px;
			border: 1px solid #ffffff;
			border-radius: 15px;
			padding: 0px 0px;
			cursor: pointer;
			}
		.buttonw {
			width: 300px;
			height: 55px;
			font-size: 30px;
			font-family: 'everyday', Arial, sans-serif;
			}	
		.buttonw:hover {
			background: #001e60;
			color: #ffffff;
			}
		.buttonwide {
			color: #ffffff;
			background-color: #0053e2;
			border: 2px solid #ffffff;
			border-radius: 12px;
			padding: 0px 0px;
			cursor: pointer;
			}
		.buttonwide {
			width: 320px;
			height: 65px;
			font-size: 30px;
			font-family: 'everyday', Arial, sans-serif;
			}	
		.buttonwide:hover {
			background: #001e60;
			color: #ffffff;
			}	
			}
	.buttonw {
		color: #ffffff;
		background-color: #001e60;
		font-size: 20px;
		border: 2px solid #ffffff;
		border-radius: 20px;
		padding: 15px 0px;
		cursor: pointer;
		}
	.buttonw {
		width: 380px;
		height: 80px;
		font-size: 38px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonw:hover {
		background: #001e60;
		color: #ffffff;
			}
	.buttonb {
		color: #ffffff;
		background-color: #0053e2;
		border: 2px solid #ffffff;
		border-radius: 20px;
		padding: 0px 0px;
		cursor: pointer;
		}
	.buttonb {
		width: 380px;
		height: 80px;
		font-size: 38px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonb:hover {
		background: #001e60;
		color: #ffffff;
			}
	.buttonsmall {
		color: #ffffff;
		background-color: #0053e2;
		font-size: 20px;
		border: 2px solid #ffffff;
		border-radius: 12px;
		padding: 0px 0px;
		cursor: pointer;
		}
	.buttonsmall {
		width: 150px;
		height: 50px;
		font-size: 24px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonsmall:hover {
		background: #001e60;
		color: #ffffff;
		}
	.buttonxs {
		color: #ffffff;
		background-color: #0053e2;
		border: 1px solid #ffffff;
		border-radius: 3px;
		padding: 2px 8px;
		cursor: pointer;
		}
	.buttonxs {
		font-size: 30px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonxs:hover {
		background: #001e60;
		color: #ffffff;
		}
	.buttonwide {
		color: #ffffff;
		background-color: #0053e2;
		border: 2px solid #ffffff;
		border-radius: 12px;
		padding: 0px 0px;
		cursor: pointer;
		}
	.buttonwide {
		width: 400px;
		height: 70px;
		font-size: 40px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonwide:hover {
		background: #001e60;
		color: #ffffff;
		}
	.buttonlarge {
		color: #ffffff;
		background-color: #0053e2;
		border: 2px solid #ffffff;
		border-radius: 12px;
		padding: 0px 0px;
		cursor: pointer;
		}
	.buttonlarge {
		width: 400px;
		height: 70px;
		font-size: 28px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonlarge:hover {
		background: #001e60;
		color: #ffffff;
		}
	.buttonexlarge {
		color: #ffffff;
		background-color: #0053e2;
		border: 2px solid #ffffff;
		border-radius: 12px;
		padding: 0px 0px;
		cursor: pointer;
		}
	.buttonexlarge {
		width: 400px;
		height: 70px;
		font-size: 48px;
		font-family: 'everyday', Arial, sans-serif;
		}	
	.buttonexlarge:hover {
		background: #001e60;
		color: #ffffff;
		}	
	.column {
		font-family: 'everyday', Arial, sans-serif;
		}
	.column {
		color: black;
		font-size: 50px;
		}	
	a 	{
		text-decoration: none;
		}
	/* a:hover {
	/*	color: white; /* Changes the link color to green when hovered */
	/*	text-decoration: underline; /* Adds an underline on hover */
		}	
input {
		padding: 10px 10px; 
		}
	.input {
		width: 80vw;
		max-width: 800px;
		height: 400px;
		font-size: 20px;
		color: #000000;
		font-family: 'bogle', Arial, sans-serif;
		border-radius: 20px;
		padding: 10px 10px;
		}
	inputs {
		padding: 10px 10px; 
		}
	.inputs {
		width: 80vw;
		max-width: 800px;
		height: 25px;
		font-size: 20px;
		color: #000000;
		font-family: 'bogle', Arial, sans-serif;
		border-radius: 15px;
		padding: 10px 10px;
		}
	.locinput {
		width: 2;
		height: 20px;
		color: #000000;
		font-size: 20px;
		font-family: 'bogle', Arial, sans-serif;
		border-radius: 15px;
		}
		inputs {
		padding: 20px 20px; 
		}
	.locinput {
		width: 35px;
		height: 20px;
		color: #000000;
		font-size: 20px;
		font-family: 'bogle', Arial, sans-serif;
		border-radius: 15px;
		}
	::placeholder {
		color: black;
		}
	p {
		line-height: 1;
		font-family: 'bogle', Arial, sans-serif;
		}
	.pe {
		line-height: 1;
		font-family: 'everyday', Arial, sans-serif;
		}

/* Store Hub layout refinement: fixed desktop logo + tighter button stack */
@media (min-width: 1101px) {
	.container {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		gap: 0;
		max-width: none;
		width: 100%;
		min-height: 100vh;
		padding: 0 5vw;
		margin: 0;
		box-sizing: border-box;
	}

	.container .column:first-child {
		position: sticky;
		top: 0;
		height: 100vh;
		flex: 0 0 45%;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.container .column:last-child {
		flex: 0 0 45%;
		min-height: 100vh;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-sizing: border-box;
	}

	.container .column:last-child a {
		display: block;
		line-height: 0;
		margin: 0;
		padding: 0;
	}

	.container .column:last-child button {
		display: block;
		margin: 0;
	}
}

@media (max-width: 1100px) {
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		min-height: 100vh;
		padding: 20px 12px;
		box-sizing: border-box;
	}

	.container .column:first-child {
		position: static;
		height: auto;
		width: 100%;
		padding: 10px 0 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container .column:last-child {
		width: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
	}

	.container .column:last-child a {
		display: block;
		line-height: 0;
		margin: 0;
		padding: 0;
	}

	.buttonb,
	.buttonw {
		width: min(380px, calc(100vw - 32px));
		height: 70px;
		font-size: 34px;
		margin: 0;
	}
}

@media (max-width: 700px) {
	.logo-img {
		max-width: min(260px, 82vw);
	}

	.buttonb,
	.buttonw {
		width: min(320px, calc(100vw - 28px));
		height: 58px;
		font-size: 30px;
	}
}