/* -------------------------------------------------------
   Shared base styles - loaded on every overseas page via
   head_css_js.php / head_css_js_2.php / admin/head_css_js.php.

   Consolidated out of business_solutions.css, development.css,
   gaming.css, fx_trading.css, features.css, law.css,
   formmail.css, question_and_answers.css, account.css, styles.css,
   vps_apply.css, new_header.css and new_footer.css, which all
   duplicated this same block. Page-specific files should only
   contain their own unique styles from here on - see each file's
   remaining content for what's still page-specific (hero-banner
   sizing, .btn overrides on formmail.css/account.css, etc).
--------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400;500;600;700&display=swap');

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

input {
	font-size: 16px;
}

h1 {
	font-weight: 700;
}
h2 {
	font-weight: 600;
}
nav a {
	font-weight: 500;
}

:root {
	--navy: #0267B5;
	--navy-dark: #394F6D;
	--blue: #0189FF;
	--blue-light: #eaf0ff;
	--gray-bg: #f5f7fa;
	--text-dark: #1b2331;
	--text-muted: #6b7683;
	--border: #e3e7ee;
	--radius: 10px;
	--max-width: 1400px;
	/* site_header height from new_header.css: 16px padding + 60px logo + 16px padding + 1px border */
	--header-height: 93px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: "IBM Plex Sans";
	font-size: 1.6em;
	font-weight: 400;
	color: var(--text-dark);
	line-height: 1.5;
	background: #fff;
}

ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Default button sizing - the majority pattern shared by law.css,
   business_solutions.css, development.css, gaming.css,
   fx_trading.css, features.css, question_and_answers.css,
   new_header.css and new_footer.css. formmail.css and account.css
   use different sizing and keep their own .btn override block. */
.btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 8px 20px;
	border-radius: 10px;
	font-weight: 400;
	font-size: 16px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
	background: #0189FF;
	color: #fff;
	border-color: #0189FF;

	&:hover {
		background: #fff;
		color: #0189FF;
		border-color: #0189FF;
	}
}

.btn-outline {
	background: transparent;
	color: #0189FF;
	border-color: #0189FF;

	&:hover {
		background: #0189FF;
		color: #fff;
		border-color: #0189FF;
	}
}

.btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: #fff;

	&:hover {
		background: #fff;
		color: #0189FF;
		border-color: #fff;
	}
}

/* Hero <h1>/<p> - byte-identical on business_solutions.css/
   development.css/gaming.css/fx_trading.css/features.css.
   account.css/formmail.css/vps_apply.css/styles.css/law.css have
   genuinely different values and keep their own overrides. */
.hero-content h1 {
	color: #FFF;
	font-size: 52px;
	margin-bottom: 10px;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 0.8s ease forwards;
}

.hero-content p {
	font-weight: 300;
	color: #fff;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 0.8s ease forwards;
	animation-delay: 0.4s;
}

/* Hero <h2> - byte-identical wherever it appears: unconditionally
   on business_solutions.css/development.css/gaming.css/
   fx_trading.css/features.css's hero (always has an h2),
   and on law.css's .hero-banner.about-hero modifier (which adds an
   h2 to a hero that otherwise doesn't have one). Harmless on pages
   without an actual <h2> in their hero markup - the rule just
   never matches anything there. */
.hero-content h2 {
	font-weight: 400;
	color: #fff;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 0.8s ease forwards;
	animation-delay: 0.2s;
}

/* Final CTA - byte-identical on business_solutions.css/development.css/
   gaming.css/fx_trading.css (also used on features.css once
   that page is processed). */
.final-cta {
	padding: 150px 0;
}

.final-cta .container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 150px;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

.final-cta img {
	width: 45%;
	max-width: 500px;
	height: auto;
	flex-shrink: 0;
}

.final-cta-content {
	text-align: left;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.final-cta-title h2 {
	font-size: 42px;
	font-weight: 600;
	color: var(--navy);
	margin-bottom: 12px;
}

.final-cta-title h3 {
	font-size: 20px;
	font-weight: 500;
	color: var(--blue);
	margin-bottom: 20px;
}

.final-cta-content p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--navy-dark);
	margin-bottom: 30px;
}

@media (max-width: 900px) {
	.final-cta {
		padding: 80px 0;
	}

	.final-cta .container {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		text-align: center;
	}

	.final-cta img {
		width: 70%;
	}

	.final-cta-content {
		align-items: center;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.final-cta-title h2 {
		font-size: 30px;
	}

	.final-cta img {
		width: 100%;
	}
}