/* =========================================================
   Base
   ========================================================= */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #30343b;
	background: #ffffff;
}


/* =========================================================
   Header
   ========================================================= */

.site-header {
	width: 100%;
	background: #ffffff;
	border-bottom: 1px solid #e5e5e5;
}

.header-content {
	max-width: 1320px;
	margin: 0 auto;
	padding: 18px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand-name {
	color: #555b62;
	font-size: 24px;
	font-weight: 600;
}

.brand-tagline {
	margin-top: 2px;
	color: #b51820;
	font-size: 14px;
}


/* =========================================================
   Navigation
   ========================================================= */

.main-nav {
	display: flex;
	gap: 32px;
}

	.main-nav a {
		color: #555b62;
		text-decoration: none;
		font-size: 15px;
		font-weight: 500;
	}

		.main-nav a:hover,
		.main-nav a.active {
			color: #b51820;
		}




/* =========================================================
   Buttons
   ========================================================= */

.hero-actions {
	display: flex;
	gap: 14px;
	margin-top: 26px;
}

.button {
	display: inline-block;
	padding: 14px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.button-primary {
	color: #ffffff;
	background: #b51820;
	border: 2px solid #b51820;
}

	.button-primary:hover {
		background: #94131a;
		border-color: #94131a;
	}

.button-secondary {
	color: #b51820;
	background: transparent;
	border: 2px solid #b51820;
}

	.button-secondary:hover {
		background: rgba(255, 255, 255, 0.5);
	}




/* =========================================================
   Footer
   ========================================================= */

.site-footer {
	padding: 25px 40px;
	background: #272b2f;
	color: #bfc3c6;
}

.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 30px;
	font-size: 14px;
}

	.footer-content strong {
		display: block;
		margin-bottom: 3px;
		color: #ffffff;
	}

/* =========================================================
   Logo
   ========================================================= */

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.brand-logo {
	display: block;
	width: 60px;
	height: auto;
}

.brand-text {
	display: flex;
	flex-direction: column;
}