@font-face {
	font-family:'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
	url("fonts/roboto-condensed-regular.eot") format('eot'),
	url("fonts/roboto-condensed-regular.woff") format('woff');
}
@font-face {
	font-family:'Roboto';
	font-style: normal;
	font-weight: 300;
	src: local('Roboto Light'), local('Roboto-Light'),
	url("fonts/roboto-condensed-300.eot") format('eot'),
	url("fonts/roboto-condensed-300.woff") format('woff');
}
@font-face {
	font-family:'Roboto';
	font-style: normal;
	font-weight: 600;
	src: local('Roboto Bold'), local('Roboto-Bold'),
	url("fonts/roboto-condensed-700.eot") format('eot'),
	url("fonts/roboto-condensed-700.woff") format('woff');
}



* {margin: 0;    padding: 0;-webkit-text-size-adjust: none;-webkit-padding-start: 0px;}
html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}

/* Reset and global styles (unchanged) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0 none; margin: 0; padding: 0; vertical-align: baseline; background: transparent; outline: 0;}

body 	{line-height: 1.6; margin: 0;font-family: 'Roboto', Helvetica, sans-serif;background: #f4f4f4; color: #000; font-size: 100%;}

header 		{background-color: #2A323B; color: #fff; text-align: center; padding: 5em 0; width: 100%;}
header h1 	{font-size: 3.5rem; margin: 0; text-transform: uppercase; line-height: 1.25;}
header h2 	{font-size: 2rem; margin: 0 0 1em 0; font-weight: 300; text-transform: uppercase;}
header p 	{font-size: 1.125rem; margin: 0 auto;}

main {width: 100%; padding-top: 5em;}
.boxwrap {
	display: flex; 
	justify-content: center; 
	flex-wrap: wrap; 
	gap: 2em;
}
.box {
	background-color: #fff; 
	padding: 2em; 
	text-align: center; 
	border: 1px solid #2A323B; 
	transition: transform 0.3s ease; 
	min-width: 350px;
}
.box img {
	width: auto; 
	margin-bottom: 3em; 
	height: 100px;
}
.box h3 {
	font-size: 1.2rem; 
	line-height: 1.5; 
	margin-bottom: auto; 
	color: #2A323B; 
	font-weight: 300;
	min-height:9em;
}
.box a {
	background-color: #333; 
	color: #fff; 
	padding: 0.5em 0.75em; 
	text-decoration: none; 
	border-radius: 4px; 
	transition: background-color 0.3s ease; 
	text-transform: uppercase;
}
.box a:hover 		{background-color: #555;}
.btn.solutions 		{background-color: #e30613;}
.btn.lifesciences 	{background-color: #00aaf0;}
.btn.design 		{background-color: #000;}

footer 			{background-color: #ccc; color: #000; padding: 5em; margin-top: 8em; text-align: center;}
.foo 			{text-align: left; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 2em;}

footer p 		{padding-bottom: 0.5em;}
footer a 		{color: #000; text-decoration: underline;}
footer a:hover 	{text-decoration: none;}

/* Responsive styles */
@media (max-width: 768px) {
	header 		{padding: 3em 1em;}
	header h1 	{font-size: 2.5rem;}
	header h2 	{font-size: 1.5rem;}
	header p 	{font-size: 1rem;}
	.boxwrap {flex-direction: column;align-items: center;}
	.box {width: 90%; max-width: 350px;min-width: auto}
	footer {padding: 3em 1em;}
	.foo {flex-direction: column;gap: 1.5em;text-align: center;}
}

@media (max-width: 480px) {
	header h1 {font-size: 2rem;}
	header h2 {font-size: 1.25rem;}
	header p {font-size: 0.9rem;}
	.box img {height: 80px;margin-bottom: 2em;}
	.box h3 {font-size: 1rem;margin-bottom: 2em;}
	footer {text-align: center;}
}