/**
 * ANTmore Technologies
 * Global Design System
 *
 * Child Theme: ANTmore
 * Parent Theme: Visual Composer Starter
 */


/* =========================================================
   1. DESIGN VARIABLES
   ========================================================= */

:root {

	/* Backgrounds */
	--antmore-bg: #071521;
	--antmore-bg-deep: #04101A;
	--antmore-bg-secondary: #0D1E2C;

	/* Cards */
	--antmore-card: #112738;
	--antmore-card-hover: #163247;

	/* Typography */
	--antmore-text: #F5F7FA;
	--antmore-text-secondary: #B8C5D1;
	--antmore-text-muted: #8798A8;
	--antmore-heading: #FFFFFF;

	/* Brand Colors */
	--antmore-blue: #2498F3;
	--antmore-blue-bright: #3BABFF;

	/* Links */
	--antmore-link: #43AEFF;
	--antmore-link-hover: #7CC8FF;

	/* Borders */
	--antmore-border: #294052;
	--antmore-border-subtle: #1B3345;

	/* Layout */
	--antmore-content-width: 1240px;
	--antmore-radius: 6px;
	--antmore-section-space: 96px;
}


/* =========================================================
   2. GLOBAL / BASE
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--antmore-bg);
	color: var(--antmore-text-secondary);

	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

button,
input,
textarea,
select {
	font-family: inherit;
}


/* =========================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================= */

p {
	margin-top: 0;
	margin-bottom: 1.5em;

	color: var(--antmore-text-secondary);

	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;

	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	color: var(--antmore-heading);
	font-weight: 700;
	font-style: normal;
}


/* H1 - Main page / hero heading */

h1 {
	margin-bottom: 24px;

	color: #FFFFFF;

	font-size: 60px;
	font-weight: 700;
	line-height: 1.08;

	letter-spacing: -0.02em;
}


/* H2 - Major section heading */

h2 {
	margin-bottom: 24px;

	color: var(--antmore-text);

	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;

	letter-spacing: -0.015em;
}


/* H3 - Cards / project / subsection headings */

h3 {
	margin-bottom: 16px;

	color: #FFFFFF;

	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}


/* H4 - Smaller subsection heading */

h4 {
	margin-bottom: 14px;

	color: #FFFFFF;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}


/* =========================================================
   4. LINKS
   ========================================================= */

a {
	color: var(--antmore-link);
	text-decoration: none;

	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

a:hover,
a:focus {
	color: var(--antmore-link-hover);
}


/* Keyboard accessibility */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--antmore-blue-bright);
	outline-offset: 3px;
}


/* =========================================================
   5. SECTIONS
   ========================================================= */

.antmore-section {
	padding-top: var(--antmore-section-space);
	padding-bottom: var(--antmore-section-space);
}

.antmore-bg-primary {
	background-color: var(--antmore-bg);
}

.antmore-bg-secondary {
	background-color: var(--antmore-bg-secondary);
}

.antmore-bg-deep {
	background-color: var(--antmore-bg-deep);
}


/* =========================================================
   6. EYEBROW TEXT
   ========================================================= */

.antmore-eyebrow,
.antmore-eyebrow p {
	margin-top: 0;
	margin-bottom: 20px;

	color: var(--antmore-blue);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* =========================================================
   7. INTRO / LARGE BODY COPY
   ========================================================= */

.antmore-intro,
.antmore-hero-copy,
.antmore-intro p,
.antmore-hero-copy p {
	color: var(--antmore-text-secondary);

	font-size: 19px;
	font-weight: 400;
	line-height: 1.6;
}


/* =========================================================
   8. HERO
   ========================================================= */

.antmore-hero {
	background-color: var(--antmore-bg);
	overflow: hidden;
}

.antmore-hero h1 {
	margin-top: 0;
	color: #FFFFFF;
}

.antmore-hero-copy {
	max-width: 620px;
}

.antmore-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}


/*
 * Used on the left hero column.
 * We will use this as the parent selector for hero-specific
 * components as the homepage is completed.
 */

.antmore-hero-content {
	position: relative;
}


/* =========================================================
   9. BUTTON FOUNDATION
   ========================================================= */

/*
 * IMPORTANT:
 *
 * Visual Composer's Basic Button element generates its own
 * internal markup and styles.
 *
 * We are deliberately NOT forcing VC button widths here yet.
 *
 * These classes are currently assigned in Visual Composer:
 *
 * Primary:
 * antmore-button-primary
 *
 * Secondary:
 * antmore-button-secondary
 *
 * Once we confirm the exact VC element responsible for the
 * full-width behavior, the final VC button rules will live
 * here.
 */


/* =========================================================
   10. CARDS
   ========================================================= */

.antmore-card {
	height: 100%;
	padding: 32px;

	background-color: var(--antmore-card);

	border: 1px solid var(--antmore-border-subtle);
	border-radius: var(--antmore-radius);

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.antmore-card:hover {
	background-color: var(--antmore-card-hover);

	border-color: var(--antmore-blue);

	transform: translateY(-4px);

	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.20);
}

.antmore-card h3 {
	margin-top: 0;
	color: #FFFFFF;
}

.antmore-card p {
	color: var(--antmore-text-secondary);
}


/* =========================================================
   11. CALLOUTS
   ========================================================= */

.antmore-callout {
	padding-left: 24px;
	border-left: 3px solid var(--antmore-blue);
}

.antmore-callout p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   12. UTILITY CLASSES
   ========================================================= */

.antmore-text-white {
	color: #FFFFFF;
}

.antmore-text-blue {
	color: var(--antmore-blue);
}

.antmore-text-muted {
	color: var(--antmore-text-muted);
}

.antmore-center {
	text-align: center;
}


/* =========================================================
   13. TABLET
   ========================================================= */

@media (max-width: 991px) {

	:root {
		--antmore-section-space: 72px;
	}

	body {
		font-size: 17px;
	}

	p {
		font-size: 17px;
	}

	h1 {
		font-size: 48px;
	}

	h2 {
		font-size: 36px;
	}

	h3 {
		font-size: 22px;
	}

	.antmore-intro,
	.antmore-hero-copy,
	.antmore-intro p,
	.antmore-hero-copy p {
		font-size: 18px;
	}

	.antmore-eyebrow,
	.antmore-eyebrow p {
		font-size: 13px;
	}
}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width: 767px) {

	:root {
		--antmore-section-space: 58px;
	}

	body,
	p {
		font-size: 16px;
	}

	h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 21px;
	}

	.antmore-intro,
	.antmore-hero-copy,
	.antmore-intro p,
	.antmore-hero-copy p {
		font-size: 17px;
	}

	.antmore-eyebrow,
	.antmore-eyebrow p {
		font-size: 12px;
	}

	.antmore-card {
		padding: 26px;
	}
}/* END MOBILE MEDIA QUERY */

/* =========================================================
   ANTmore Secondary Button - Visual Composer
   ========================================================= */

div.antmore-button-secondary a.vce-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 1px solid #7D91A2 !important;
    border-radius: 6px !important;

    color: #FFFFFF !important;

    padding: 14px 25px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
}

div.antmore-button-secondary a.vce-button:hover {
    background: rgba(67, 174, 255, 0.08) !important;
    border-color: #43AEFF !important;
    color: #43AEFF !important;
    transform: translateY(-2px);
}

div.antmore-button-secondary a.vce-button {
	border: 1px solid #7D91A2 !important;
	background: transparent !important;
	color: #FFFFFF !important;
}

div.antmore-button-secondary a.vce-button:hover {
	border-color: #43AEFF !important;
	background: rgba(67, 174, 255, 0.08) !important;
	color: #43AEFF !important;
}

/* =========================================================
   HERO BUTTON LAYOUT
   ========================================================= */

.antmore-hero-content .antmore-button-primary,
.antmore-hero-content .antmore-button-secondary {
	display: inline-block !important;
	vertical-align: top;
	margin-right: 12px;
	margin-bottom: 12px;
}

@media (max-width: 767px) {

	.antmore-hero h1 {
	font-size: 2.5rem;
	line-height: 1.1;
}
	.antmore-hero-content .antmore-button-primary,
	.antmore-hero-content .antmore-button-secondary {
		display: block !important;
		margin-right: 0 !important;
		margin-bottom: 10px !important;
	}
}

}/* end */