/* =============================================================================
   Georgia United  — main.css
   Refactored for readability, maintainability, and scalability.
   Layout, spacing, and visual output are 100% preserved.
   =============================================================================

   CSS Index
   ─────────────────────────────────────────────────────────────────────────────
   1.  Google Fonts & Custom Fonts
   2.  CSS Custom Properties (Design Tokens)
   3.  Font-Family Utility Classes
   4.  Base / Reset
   5.  Lenis Smooth Scroll
   6.  Custom Scrollbar
   7.  Typography — Headings
   8.  Utility Classes
   10. Components — Buttons
   11. Section — Banner
   12. Section — Membership Highlight
   13. Section — Mission Statement
   14. Section — Earnings
   15. Section — CTA
   16. Section — Our Members / Testimonials
   17. Section — Footer
   ───────────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   1. Google Fonts & Custom Fonts
   ============================================================================= */

/* Google Fonts are enqueued in functions.php (gucu-fonts) so the browser
   discovers them without waiting for this stylesheet to parse. */

@font-face {
	font-family: "itc-symbol-std";
	src:
		url("../fonts/ITCSymbolStd-Book.woff2") format("woff2"),
		url("../fonts/ITCSymbolStd-Book.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "itc-symbol-std";
	src:
		url("../fonts/ITCSymbolStd-Black.woff2") format("woff2"),
		url("../fonts/ITCSymbolStd-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "itc-symbol-std";
	src:
		url("../fonts/ITCSymbolStd-Bold.woff2") format("woff2"),
		url("../fonts/ITCSymbolStd-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "itc-symbol-std";
	src:
		url("../fonts/ITCSymbolStd-Medium.woff2") format("woff2"),
		url("../fonts/  ITCSymbolStd-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* =============================================================================
   2. CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
	/* ── Brand Colors ── */
	--color-primary: #15385f;
	--color-primary-dark: #15385f;
	--color-primary-light: #44a9df;
	--color-accent: #cb333b;
	--color-accent-hover: #231f20;
	--color-purple: #5e2751;

	/* ── Neutral Colors ── */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-text-body: #15385f; /* same as primary-dark */
	--color-text-muted: rgba(80, 80, 80, 0.5);
	--color-white-80: rgba(255, 255, 255, 0.8);

	/* ── Font Families ── */
	--font-figtree: "Figtree", sans-serif;
	--font-lato: "Lato", sans-serif;
	--font-roboto: "Roboto", sans-serif;
	--font-symbol: "itc-symbol-std", sans-serif;
	--font-helvetica: "Helvetica", sans-serif;

	/* ── Font Sizes ── */
	--fs-base: 18px;
	--fs-sm: 14px;
	--fs-md: 16px;
	--fs-lg: 20px;
	--fs-xl: 24px;
	--fs-2xl: 32px;
	--fs-3xl: 40px;
	--fs-4xl: 48px;
	--fs-5xl: 70.875px;
	--fs-inner-text: 40px;

	/* ── Line Heights ── */
	--lh-base: 1.5;
	--lh-tight: 1.25;
	--lh-snug: 1.12;

	/* ── Font Weights ── */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 900;

	/* ── Spacing ── */
	--space-xs: 10px;
	--space-sm: 16px;
	--space-md: 20px;
	--space-lg: 27px;
	--space-xl: 34px;
	--space-2xl: 40px;
	--space-3xl: 54px;
	--space-4xl: 78px;

	/* ── Border Radius ── */
	--radius-btn: 8.672px;
	--radius-card: 24px;

	/* ── Transitions ── */
	--transition-base: all 0.3s linear;

	/* ── Container ── */
	--container-max: 1304px;
}

/* =============================================================================
   3. Font-Family Utility Classes
   ============================================================================= */

.tk-figtree {
	font-family: var(--font-figtree);
}
.tk-lato {
	font-family: var(--font-lato);
}
.tk-roboto {
	font-family: var(--font-roboto);
}
.tk-symbol-std {
	font-family: var(--font-symbol);
}

/* =============================================================================
   4. Base / Reset
   ============================================================================= */

body {
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	font-family: var(--font-lato);
	color: var(--color-text-body);
}

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

a {
	text-decoration: none;
	color: var(--color-black);
}

a:hover {
	color: var(--color-black);
}
/* Background shorthand utility */
.bg-fix {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Suppress bottom margin on last <p> inside common wrappers */
.mb-p p:last-child {
	margin-bottom: 0;
}

/* Container override */
.container {
	max-width: var(--container-max);
}
/* z-index utility */
.z-4 {
	z-index: 4 !important;
}

/* Border radius utilities */
.border-radius-24 {
	border-radius: var(--radius-card);
}
/* =============================================================================
   5. Lenis Smooth Scroll
   ============================================================================= */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* =============================================================================
   6. Custom Scrollbar (OverlayScrollbars)
   ============================================================================= */

.os-scrollbar-handle {
	background: var(--color-primary-light);
}

body > .os-scrollbar {
	z-index: 999;
}

/* =============================================================================
   7. Typography — Headings
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-primary);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	font-family: var(--font-figtree);
	text-transform: uppercase;
}

h1 {
	font-size: var(--fs-5xl);
}
h2 {
	font-size: var(--fs-4xl);
}
h3 {
	font-size: var(--fs-3xl);
}
h4 {
	font-size: var(--fs-2xl);
}
h5 {
	font-size: var(--fs-xl);
}
h6 {
	font-size: var(--fs-lg);
}

/* Inline styled text block used alongside headings */
.inner-text {
	font-size: var(--fs-inner-text);
	font-weight: var(--fw-medium);
	display: inline-block;
}

/* =============================================================================
   8. Utility Classes
   ============================================================================= */

/* (z-4, bg-fix, border-radius-24 are declared in Base above) */

/* =============================================================================
   10. Components — Buttons
   ============================================================================= */

.btn-1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* 44px minimum touch target at every breakpoint */
	color: var(--color-white);
	font-family: var(--font-figtree);
	font-size: var(--fs-base);
	font-weight: var(--fw-black);
	text-transform: uppercase;
	border-radius: var(--radius-btn);
	background: var(--color-accent);
	padding: 13.5px 37.5px;
	transition: var(--transition-base);
	min-width: 281px;
	text-align: center;
}
.btn-1:hover {
	color: var(--color-white);
	background-color: var(--color-accent-hover);
}

/* =============================================================================
   11. Section — Banner
   ============================================================================= */
.banner-area {
	background-position: 50% 73%;
}
.banner-area .container {
	max-width: 1254px;
}

.banner-content {
	padding: 81px 56px 124px 52px;
}
.banner-content-inner {
	margin: 120px 0 55px;
}

.header-logo img {
	max-width: clamp(200px, 50vw, 403px);
}
.banner-content-inner p {
	color: var(--color-white);
	font-family: var(--font-figtree);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-medium);
	line-height: 1;
}
.banner-content-inner p:last-child {
	margin-bottom: 0;
}

/* Dark overlay over banner background image */
.banner-content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(94, 39, 81, 0.7);
	z-index: -1;
}

/* =============================================================================
   12. Section — Membership Highlight
   ============================================================================= */

.membership-highlight-area {
	background: var(--color-purple);
	padding: 75px 0 55px;
}

.membership-highlight-des {
	padding-left: var(--space-4xl);
	max-width: 746px;
}

.membership-highlight-inner-des {
	margin-bottom: 25px;
}

.membership-highlight-des a {
	margin-bottom: var(--space-lg);
}

.membership-highlight-inner-des p {
	margin-bottom: var(--space-xl);
}

.membership-highlight-inner-des p,
.cta-inner-info p {
	font-size: var(--fs-xl);
}
.cta-inner-info p {
	line-height: 1.25;
}
.membership-highlight-inner-des p:last-child {
	margin-bottom: 0;
}

.membership-highlight-img {
	margin-bottom: 0;
	max-width: 446px;
	margin-right: 0;
	margin-left: auto;
}

.membership-highlight-img img {
	border-radius: var(--radius-card);
}

/* =============================================================================
   13. Section — Mission Statement
   ============================================================================= */
.mission-statement-area {
	padding: clamp(50px, 5vw, 66px) 0 clamp(50px, 8vw, 124px);
	background: rgba(227, 227, 227, 0.7);
}
.mission-statement-area.has-video-section {
	padding: clamp(160px, 24vw, 323px) 0 clamp(180px, 40vw, 547px);
	background: rgba(227, 227, 227, 0.7);
	margin-top: clamp(-249px, -18vw, -120px);
	margin-bottom: clamp(-460px, -32vw, -180px);
}

.mission-statement-content {
	margin-left: var(--space-4xl);
	max-width: 1030px;
}

/* Shared line-height override for .inner-text in specific contexts */
.cta-content h2 .inner-text,
.mission-statement-content .inner-text {
	line-height: var(--lh-snug);
}

.mission-statement-content h2 {
	margin-bottom: var(--space-2xl);
}

.mission-statement-inner-content p {
	margin-bottom: 35px;
	font-size: var(--fs-xl);
}

.mission-statement-inner-content p:last-child {
	margin-bottom: 0;
}
.mission-statement-content .btn-1 {
	margin-top: 40px;
}

/* =============================================================================
   14. Section — Earnings
   ============================================================================= */

.earnings-area {
	padding-top: 67px;
}

.earnings-bg {
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100% - 144px);
	width: calc(38% + 215px);
	z-index: -1;
}
.earnings-bg,
.earn-img-wrapper {
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.earnings-content-box {
	background: var(--color-primary-dark);
	max-width: 683px;
	margin-right: 0;
	margin-left: auto;
	padding: 71px 52px 61px 83px; /* right padding per Figma earnings update */
}
.earnings-inner-content {
	margin-top: 30px;
}
.earnings-inner-content p {
	color: #54b2e4;
	font-size: 28px;
	font-weight: var(--fw-bold);
	margin-bottom: var(--space-md);
}

/* Earnings table layout */
.earnings-table {
	gap: 48px;
}

.earnings-table-info {
	min-width: 135px;
	padding-bottom: 35px;
}

/* Vertical divider between columns */
.earnings-table-info::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 2px;
	background-color: var(--color-primary-light);
	z-index: -1;
}

.earnings-table-info:last-child::before {
	display: none;
}
.earnings-table-info h6 {
	font-family: var(--font-lato);
	font-weight: var(--fw-black);
	line-height: var(--lh-base);
	text-transform: capitalize;
	color: var(--color-white);
	margin-bottom: 10px;
}
.earnings-table-info ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.earnings-table-info h6,
.earnings-table-info ul li {
	color: var(--color-white);
	font-size: var(--fs-lg);
}

.earnings-table-info ul li {
	margin-bottom: 18px;
}

.earnings-table-info ul li:last-child {
	margin-bottom: 0;
}

/* Inline earnings label */
.earnings-area .inner-text {
	margin-bottom: 16px;
}

.earn-img-wrapper img {
	min-height: 250px;
	display: block;
	object-fit: cover;
}

/* =============================================================================
   15. Section — CTA
   ============================================================================= */

.cta-area {
	background: var(--color-purple);
	padding: 68px 0 90px;
}

/* Gradient overlay */
.cta-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23.44%, #000 154.52%);
	mix-blend-mode: multiply;
	opacity: 0.4;
}

.cta-shape-bg {
	opacity: 0.35;
	z-index: 2;
	mix-blend-mode: plus-lighter;
}

.cta-content h2 {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--color-black);
}

.cta-inner-content {
	gap: 67px;
	margin-top: 50px;
}

.cta-inner-info .btn-1 {
	margin-bottom: 19px;
}

/* =============================================================================
   16. Section — Our Members / Testimonials
============================================================================= */
.our-members-area {
	padding: 78px 0;
}
.our-members-area h2 {
	color: #5e2751;
}
.our-members-area .container {
	max-width: 1260px;
}

.testimonial-content-wrapper {
	max-width: 788px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

/* Shared italic/styled quote and author text */
.author-information h5,
.testimonial-content-wrapper blockquote {
	color: var(--color-primary-dark);
	font-family: var(--font-lato);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-base);
}

.testimonial-content-wrapper blockquote {
	font-style: italic;
}

.author-information p,
.author-information h5 {
	color: var(--color-accent-hover);
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-base);
}

.author-information.text-center p {
	font-style: italic;
	font-weight: var(--fw-light);
}
.owl-nav {
	position: absolute;
	top: 50%;
	left: -100px;
	transform: translateY(-50%);
	z-index: 10;
	width: calc(100% + 200px);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.owl-nav button {
	height: 48px;
	width: 48px;
	border: 1px solid #15385f !important;
	border-radius: 100%;
	background-color: #fff !important;
	box-shadow: 0px 4px 4px 0px rgba(94, 39, 81, 0.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Dots: 8px visual dot inside a 24px tap-friendly button */
.owl-dots {
	text-align: center;
	margin-top: 14px;
	position: relative;
	z-index: 11;
}
.owl-carousel button.owl-dot {
	background: transparent;
	height: 24px;
	width: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 3px;
}
.owl-carousel button.owl-dot span {
	background: #d7d7d7;
	border-radius: 100%;
	height: 8px;
	width: 8px;
	display: block;
	transition: all 0.3s linear;
}
.owl-carousel button.owl-dot.active span {
	background: #15385f;
}
/* =============================================================================
   17. Section — Footer
   ============================================================================= */

.footer-area {
	padding-top: 40px;
}

.footer-area .container {
	max-width: 1336px;
}

/* Full-bleed dark gradient overlay */
.footer-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 23.44%,
			rgba(0, 0, 0, 0.4) 154.52%
		),
		var(--color-primary-dark);
	mix-blend-mode: multiply;
	z-index: 1;
}

.footer-top-wrapper {
	margin-bottom: 85px;
}

.footer-logo-wrapper img {
	max-width: clamp(250px, 50vw, 440px);
}

/* Social icons row */
.socials-link-wrapper {
	gap: 17px;
}

.socials-link-wrapper a svg path,
.other-link-wrapper a,
.top-btn-wrapper svg path {
	transition: var(--transition-base);
}

.socials-link-wrapper a:hover svg path:nth-child(1),
.top-btn-wrapper:hover svg path {
	fill: var(--color-white);
}

/* Footer text styles */
.footer-right-content p,
.other-link-wrapper a,
.copy-right-caption p {
	color: var(--color-white-80);
	font-family: var(--font-roboto);
	font-size: var(--fs-sm);
}

.footer-right-content p a {
	color: #fff;
	text-decoration: underline;
}
.footer-right-content p a:hover {
	text-decoration: none;
}

.ncua-caption p {
	color: var(--color-white);
	font-family: var(--font-symbol);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-base);
	font-weight: bold;
}

/* Footer links */
.other-link-wrapper a {
	text-decoration: underline;
}

.other-link-wrapper a:hover {
	color: var(--color-white);
	text-decoration: none;
}

/* Footer divider row */
.copy-right-item-area {
	border-top: 1px solid var(--color-primary-light);
	margin-top: 30px;
	padding: 10px 0 17px;
}

.foot_cont {
	color: #fff;
	font-size: 16px;
	padding: 30px 0 10px;
}

.foot_cont a {
	color: #fff;
	text-decoration: underline;
}

/* 44px touch targets for the phone number and legal links
   (padding expands the hit area, negative margin keeps the layout) */
.foot_cont a,
.other-link-wrapper a {
	display: inline-block;
	padding: 12px 6px;
	margin: -12px -6px;
}

/* owned-video-area start */
.owned-video-area {
	padding-top: clamp(32px, 6vw, 50px);
}
.owned-video-area .container {
	max-width: 1154px;
}
.owned-video-wrapper h2 {
	margin-bottom: clamp(20px, 5vw, 33px);
}
.owned-video-info {
	filter: drop-shadow(4px 6px 7px rgba(0, 0, 0, 0.15));
}
.owned-video-img {
	min-height: 300px;
	object-fit: cover;
}
.owned-video-btn {
	width: clamp(100px, 20vw, 187px);
	height: clamp(100px, 20vw, 187px);
	filter: drop-shadow(4px 6px 7px rgba(0, 0, 0, 0.15));
	background: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.owned-video-btn svg {
	margin-right: clamp(-20px, -1vw, -5px);
	width: clamp(40px, 10vw, 84px);
	height: clamp(40px, 10vw, 105px);
}
/* owned-video-area end */

/* =============================================================================
   18. Section — Hero (Greer video)
   ============================================================================= */

.hero-video-area {
	position: relative;
}

/* Full-bleed purple overlay across the whole hero */
.hero-video-area::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(94, 39, 81, 0.7);
}

/* The old per-column overlay is redundant inside the video hero */
.hero-banner-content::before {
	display: none;
}

.hero-banner-content {
	padding: clamp(40px, 5vw, 64px) clamp(8px, 3vw, 40px) clamp(56px, 7vw, 96px);
	max-width: 1030px;
	margin: 0 auto;
}

.hero-banner-content .header-logo img {
	max-width: clamp(200px, 40vw, 340px);
}

h1.banner-heading {
	color: var(--color-white);
	font-size: var(--fs-4xl);
	margin: clamp(24px, 4vw, 40px) 0 0;
}

h1.banner-heading .inner-text {
	line-height: var(--lh-snug);
}

.hero-subcopy {
	margin: 16px 0 0;
}

.hero-banner-content .hero-subcopy p {
	font-size: var(--fs-xl);
	line-height: var(--lh-tight);
}

.hero-video-info {
	max-width: 900px;
	margin: clamp(28px, 4vw, 44px) auto 0;
}

/* Show the full 16:9 thumbnail (the baked-in text crops badly otherwise) */
.hero-video-info .owned-video-img {
	min-height: 0;
}

.hero-cta-wrapper {
	margin-top: clamp(28px, 4vw, 40px);
}

/* =============================================================================
   19. Section — How Can We Help You Grow (products slider)
   ============================================================================= */

.products-area {
	padding: clamp(56px, 7vw, 90px) 0 clamp(48px, 6vw, 80px);
}

.products-area h2 {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.products-slider .owl-stage {
	display: flex;
}

.products-slider .owl-item {
	display: flex;
}

.product-card {
	background: var(--color-primary);
	padding: clamp(40px, 5vw, 64px) 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 30px);
	width: 100%;
}

.product-card h3 {
	margin: 0;
}

.product-card .btn-1 {
	min-width: 0;
	padding: 10px 28px;
	font-size: var(--fs-md);
}


/* =============================================================================
   Earnings box — "Don't lose time." design update
   ============================================================================= */

.earnings-description {
	color: var(--color-white);
	font-size: var(--fs-xl);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	margin: 16px 0 0;
	max-width: 515px;
}

.earnings-content-box .earnings-btn {
	margin-top: 14px;
	min-width: 0;
}

@media (max-width: 767.98px) {
	.earnings-description {
		font-size: 18px;
	}
	.earnings-content-box .earnings-btn {
		width: 100%;
	}
}