@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600&family=Montserrat:wght@500;700;800;900&display=swap");

*, *:before, *:after { box-sizing: border-box; }
html, body {
	margin: 0; padding: 0; background: #f4f6f8; color: #4b566b;
	font-family: 'Source Sans Pro', Helvetica, sans-serif; font-size: 15pt; line-height: 1.75;
}
a { color: #0d6efd; text-decoration: none; transition: all 0.2s; }
a:hover { color: #0a58ca; text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
	color: #1e293b; font-family: 'Montserrat', Helvetica, sans-serif; font-weight: 700; line-height: 1.3; margin: 0 0 0.8em 0;
}
h1 { font-size: 2.2em; font-weight: 800; }
h2 { font-size: 1.8em; font-weight: 800; }
h3 { font-size: 1.3em; font-weight: 700; }
p { margin: 0 0 1.5em 0; }
img { max-width: 100%; height: auto; }

.container { width: 1200px; max-width: calc(100% - 40px); margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin: -15px; }
.col-12 { width: 100%; padding: 15px; }
.col-8 { width: 66.666%; padding: 15px; }
.col-6 { width: 50%; padding: 15px; }
.col-4 { width: 33.333%; padding: 15px; }
.col-3 { width: 25%; padding: 15px; }

@media screen and (max-width: 980px) {
	.col-8, .col-6, .col-4, .col-3 { width: 100% !important; }
}

/* Header */
#header-wrapper { background: #0f172a; padding: 2.5em 0 0 0; text-align: center; border-bottom: 3px solid #0d6efd; }
#header #logo h1 { margin: 0; font-size: 2.2em; font-weight: 900; }
#header #logo h1 a { color: #ffffff; text-decoration: none; }
#header #logo p { color: #94a3b8; font-size: 1.05em; font-weight: 600; margin: 0.4em 0 1.5em 0; }

#nav { background: #1e293b; padding: 0; }
#nav ul { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; }
#nav ul li a { display: block; color: #cbd5e1; padding: 1.1em 1.8em; font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; }
#nav ul li.current a, #nav ul li a:hover { background: #0d6efd; color: #ffffff; text-decoration: none; }

/* Intro / Banner */
#intro-wrapper { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #ffffff; padding: 4.5em 0; text-align: center; }
#intro h2 { color: #ffffff !important; font-size: 2.5em; font-weight: 800; margin-bottom: 0.4em; }
#intro p { color: #e2e8f0 !important; font-size: 1.25em; max-width: 850px; margin: 0 auto 1.8em auto; line-height: 1.7; }

/* Button */
.button {
	display: inline-block; background: #0d6efd; color: #ffffff !important; font-weight: 700; font-size: 1.05em;
	padding: 0.9em 2.4em; border-radius: 6px; text-decoration: none !important; border: none; cursor: pointer;
	box-shadow: 0 4px 14px rgba(13,110,253,0.35); transition: background 0.2s, transform 0.1s;
}
.button:hover { background: #0b5ed7; transform: translateY(-2px); }

/* Main Wrapper */
#main-wrapper { padding: 4.5em 0; }
.box { background: #ffffff; padding: 2.8em; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; margin-bottom: 2.5em; }
.box header.major { text-align: center; border-bottom: 2px solid #f1f5f9; padding-bottom: 1.8em; margin-bottom: 2.2em; }
.box header.major h2 { font-size: 2.3em; margin-bottom: 0.3em; }
.box header.major p { color: #64748b; font-size: 1.2em; font-weight: 600; margin: 0; }

h2.major { text-align: center; position: relative; margin-bottom: 2em; }
h2.major span { background: #f4f6f8; padding: 0 1.2em; position: relative; z-index: 1; }
h2.major:after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #cbd5e1; z-index: 0; }

/* Footer */
#footer-wrapper { background: #0f172a; color: #94a3b8; padding: 4.5em 0 3em 0; text-align: center; }
#footer-wrapper h2 { color: #ffffff; font-size: 1.8em; margin-bottom: 0.5em; }
#footer-wrapper p { color: #94a3b8; font-size: 1.05em; }
#footer-wrapper input[type="text"], #footer-wrapper input[type="email"], #footer-wrapper textarea {
	width: 100%; padding: 1em; border: 1px solid #334155; border-radius: 6px; background: #1e293b; color: #ffffff; margin-bottom: 1em;
}
#copyright { margin-top: 3.5em; padding-top: 2em; border-top: 1px solid #1e293b; font-size: 0.9em; }
#copyright ul.menu { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; }
#copyright ul.menu li { margin: 0 1.2em; }
#copyright ul.menu li a { color: #94a3b8; }
#copyright ul.menu li a:hover { color: #ffffff; }