:root {
    --clr-primary: #12834f;
    --clr-primary-light: #c4e5f8;
    --clr-primary-dark: #084c73;
    --clr-secondary: #C4B593;
    --clr-secondary-light: #F4F0E7;
    --clr-tertiary: #FFCC17;

    --ff-base: "DM Serif Display", serif;
    --ff-accent: 'Arial';

    --fs-100: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
    --fs-200: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
    --fs-300: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
    --fs-400: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
    --fs-500: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
    --fs-600: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
    --fs-700: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
    --fs-800: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-base);
    font-size: var(--fs-200);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    line-height: 1;
    /*text-wrap: balance;*/
}

h1 {
    font-size: var(--fs-600);
        color: var(--clr-primary);
}

h2 {
    font-size: var(--fs-700);
    color: #000;
}

h3 {
    font-size: var(--fs-600);
}

h4 {
    font-size: var(--fs-500);
    line-height: 1.3;
}

h5 {
    font-size: var(--fs-400);
    font-weight: 400;
    line-height: 1.2;
}

h6 {
    font-size: var(--fs-200);
    font-weight: 800;
    letter-spacing: 10px;
    text-transform: uppercase;
}

p {
    margin: 1rem 0;
}

a {
    color: #FFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    display: block;
    margin: auto;
}

.video-hero {
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	padding: 0 20px;
}

.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url('/img/empire-hero-cover.jpg') no-repeat center center;
    background-size: cover;
}

.video-container video {
	min-width: 100%;
	min-height: 100%;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

.video-container:after {
	content: '';
	z-index: 1;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
}

.video-content {
	z-index: 2;
}

.video-content h2 {
    font-weight: 400;
    color: #FFF;
    font-size: var(--fs-600);
    margin: 1rem 0;
}

.btn-primary, .wufoo input.btTxt{
    display: inline-block;
    border-radius: 40px;
    padding: 1rem 3rem;
    background-color: var(--clr-primary);
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--fs-200);
    font-weight: 700;
    transition: background-color 0.3s ease;
    margin: 1.5rem 0;
    cursor: pointer;
    border: 2px solid var(--clr-primary);
}

.btn-primary:hover, .wufoo input.btTxt:hover{
    background-color: #FFF;
    border: 2px solid var(--clr-primary);
    color: var(--clr-primary);
}

.contact{
    max-width: 700px;
    margin: auto;
    padding: 5rem 1rem;
    text-align: center;
}

footer {
    background-color: var(--clr-primary);
    color: #FFF;
    text-align: center;
    padding: 4rem 1rem;
}

@media (max-width: 768px) {
        .video-container video {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 9 / 16;
    }
}