*,
*::before,
*::after{
	box-sizing:border-box;
}

body{
	background:#ffffff;
	color:#1A3D6B;
	font-family:Arial, sans-serif;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

header{
	background:#E0E0E0;
	padding:20px;
	border-bottom:4px solid #2C3E50;
	display:flex;
	flex-direction:column;
	align-items:center;
}

@media (max-width:600px){

	header{
		padding:16px 12px;
	}

}

.logo-container{
	display:flex;
	align-items:center;
	gap:16px;
	margin-bottom:10px;
}

.logo{
	width:110px;
}

nav ul{
	list-style:none;
	display:flex;
	gap:20px;
	padding:0;
	margin:0;
}

.nav-link{
	text-decoration:none;
	color:#1A3D6B;
	font-size:1.1em;
}

.nav-link:hover{
	color:#16A085;
}

main{
	flex:1;
	padding:40px 20px;
	width:100%;
	max-width:1100px;
	margin:0 auto;
}


/* HERO */

.hero{
	text-align:center;
	margin-bottom:50px;
}

.hero h2{
	font-size:2em;
	margin-bottom:15px;
}

.hero-text{
	max-width:650px;
	margin:auto;
	font-size:1.1em;
	line-height:1.5;
}

@media (max-width:600px){

	.hero-text{
		max-width:100%;
		padding:0 6px;
	}

}

.hero-buttons{
	margin-top:20px;
	display:flex;
	gap:15px;
	justify-content:center;
	flex-wrap:wrap;
}


/* BUTTONS */

.button-primary{
	background:#1A3D6B;
	color:white;
	padding:12px 24px;
	border-radius:8px;
	text-decoration:none;
	font-weight:bold;
}

.button-secondary{
	background:#16A085;
	color:white;
	padding:12px 24px;
	border-radius:8px;
	text-decoration:none;
	font-weight:bold;
}

@media (max-width:600px){

	.button-primary,
	.button-secondary{
		padding:10px 18px;
		font-size:0.95em;
	}

}


/* SERVICES */

.services{
	margin-bottom:50px;
}

.services h2{
	text-align:center;
	margin-bottom:25px;
}

.service-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:20px;
}

@media (max-width:600px){

	.service-grid{
		grid-template-columns:1fr;
		gap:18px;
	}

}

.service-card{
	background:#F5F5F5;
	padding:20px;
	border-radius:10px;
	box-shadow:0 4px 10px rgba(0,0,0,0.1);
}


/* PROCESS */

.process{
	margin-bottom:20px;
}

.process h2{
	text-align:center;
	margin-bottom:25px;
}

.process-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:20px;
}

.process-step{
	background:#F5F5F5;
	padding:20px;
	border-radius:10px;
	box-shadow:0 4px 10px rgba(0,0,0,0.1);
}


/* CTA */

.cta{
	text-align:center;
	background:#F5F5F5;
	padding:30px;
	border-radius:10px;
	max-width:700px;
	margin:0 auto;
}


.cta p{
	max-width:600px;
	margin:10px auto 20px auto;
}




/* FORM */

.contact-section{
	max-width:900px;
	margin:60px auto;
	padding:0 20px;
}

.form-card{
	background:#F5F5F5;
	padding:30px;
	border-radius:10px;
	box-shadow:0 6px 14px rgba(0,0,0,0.15);

	width:100%;
	max-width:900px;

	margin:0 auto;
}

.form-card form{
	width:100%;
}

form{
	display:flex;
	flex-direction:column;
	gap:14px;
}

input,
select,
textarea{
	width:100%;
	padding:14px;
	font-size:15px;
}

.submit-button{
	margin-top:10px;
	padding:12px;
	border:none;
	background:#1A3D6B;
	color:white;
	font-weight:bold;
	border-radius:8px;
	cursor:pointer;
}

.submit-button:hover{
	background:#163457;
}

input,
select,
textarea{
	width:100%;
	padding:12px;
	border-radius:6px;
	border:1px solid #ccc;
	font-size:14px;
	box-sizing:border-box;
}

/* WHY SECTION */

.why-section{
	margin:50px 0;
	background:#F5F5F5;
	padding:30px;
	border-radius:10px;
	box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.why-section h2{
	text-align:center;
	margin-bottom:10px;
}

.why-section > p{
	text-align:center;
	max-width:650px;
	margin:0 auto 25px auto;
}

footer{
	background:#E0E0E0;
	padding:12px;
	text-align:center;
}

/* WHY GOTHAM SOLUTIONS LIST */

.about-points{
	list-style:none;
	padding:0;
	margin-top:20px;

	display:flex;
	flex-direction:column;
	gap:18px;
}

.about-points li{
	position:relative;
	padding-left:34px;
	line-height:1.5;
}

.about-points li::before{
	content:"";

	position:absolute;
	left:0;
	top:3px;

	width:16px;
	height:16px;

	background-color:#2C3E50;

	mask:url("/icons/target.svg") no-repeat center;
	mask-size:contain;

	-webkit-mask:url("/icons/target.svg") no-repeat center;
	-webkit-mask-size:contain;
}