/* =========================================================================
   WOLF GANG — brand utility classes for Elementor
   -------------------------------------------------------------------------
   Type any of these into an Elementor element's
        Advanced > CSS Classes
   field and it picks up the WOLF GANG look. Nothing here depends on
   Elementor, so the classes also work in the block editor or in plain HTML.
   ====================================================================== */

/* ---------- Page / section shells ------------------------------------- */

.wg-dark {
	background: #070707;
	color: #f2eee5;
}

.wg-panel {
	background: #050505;
	color: #f2eee5;
}

.wg-section {
	padding-block: 100px;
}

.wg-hairline-top { border-top: 1px solid rgba(217, 194, 154, .28); }
.wg-hairline-bottom { border-bottom: 1px solid rgba(217, 194, 154, .28); }

/* Dark cinematic scrim over any Elementor section that has a background
   image — keeps headline text readable on a photo. */
.wg-scrim { position: relative; }

.wg-scrim > * { position: relative; z-index: 1; }

.wg-scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .62) 34%,
		rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .50) 100%);
}

[dir="rtl"] .wg-scrim::before {
	background: linear-gradient(270deg,
		rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .62) 34%,
		rgba(0, 0, 0, .26) 62%, rgba(0, 0, 0, .50) 100%);
}

/* Default hero photograph. The URL is relative to THIS stylesheet, so it
   resolves on any domain with no configuration. Override it any time with
   Elementor's own Background > Image picker. */
.wg-hero-default {
	background-image: url("../images/hero.jpg");
	background-size: cover;
	background-position: center 18%;
	background-repeat: no-repeat;
	background-color: #050505;
}

/* ---------- Type ------------------------------------------------------- */

.wg-eyebrow,
.wg-eyebrow .elementor-heading-title {
	font-family: "Inter", Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: #d9c29a;
	margin: 0 0 18px;
}

.wg-display,
.wg-display .elementor-heading-title {
	font-family: "Cinzel", Georgia, serif;
	font-weight: 700;
	line-height: .9;
	letter-spacing: 3px;
	color: #f2eee5;
}

.wg-heading,
.wg-heading .elementor-heading-title {
	font-family: "Cinzel", Georgia, serif;
	font-weight: 700;
	line-height: 1.15;
	color: #f2eee5;
}

.wg-sub,
.wg-sub .elementor-heading-title {
	font-family: "Inter", Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #f2eee5;
}

.wg-muted { color: #a9a39a; }
.wg-gold  { color: #d9c29a; }
.wg-cream { color: #f2eee5; }

.wg-number {
	font-family: "Inter", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #c9141c;
}

/* Arabic: no letter-spacing, and the Cairo face. */
[dir="rtl"] .wg-eyebrow,
[dir="rtl"] .wg-sub,
[dir="rtl"] .wg-number,
.lang-ar .wg-eyebrow,
.lang-ar .wg-sub,
.lang-ar .wg-number {
	letter-spacing: 0;
	text-transform: none;
	font-family: "Cairo", Tahoma, Arial, sans-serif;
}

[dir="rtl"] .wg-display,
[dir="rtl"] .wg-heading,
.lang-ar .wg-display,
.lang-ar .wg-heading {
	font-family: "Cairo", Tahoma, Arial, sans-serif;
	letter-spacing: 0;
	font-weight: 800;
}

/* ---------- Cards ------------------------------------------------------ */

.wg-card {
	background: linear-gradient(145deg, #111, #090909);
	border: 1px solid rgba(217, 194, 154, .14);
	padding: 32px;
	transition: border-color .25s ease, transform .25s ease;
}

.wg-card:hover {
	border-color: rgba(217, 194, 154, .28);
	transform: translateY(-4px);
}

.wg-card-flat {
	background: #0b0b0b;
	border: 1px solid rgba(217, 194, 154, .28);
	padding: 34px;
}

.wg-note {
	border-inline-start: 2px solid #c9141c;
	background: rgba(201, 20, 28, .07);
	padding: 14px 18px;
	color: #a9a39a;
}

/* ---------- Buttons ---------------------------------------------------- */

.wg-btn .elementor-button,
.wg-btn.elementor-button,
a.wg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border: 1px solid #d9c29a;
	border-radius: 2px;
	background: transparent;
	color: #f2eee5;
	font-family: "Inter", Arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}

.wg-btn .elementor-button:hover,
.wg-btn.elementor-button:hover,
a.wg-btn:hover {
	background: #d9c29a;
	color: #070707;
}

.wg-btn-red .elementor-button,
.wg-btn-red.elementor-button,
a.wg-btn-red {
	background: #c9141c;
	border-color: #c9141c;
	color: #fff;
}

.wg-btn-red .elementor-button:hover,
.wg-btn-red.elementor-button:hover,
a.wg-btn-red:hover {
	background: #a50f16;
	border-color: #a50f16;
	color: #fff;
}

[dir="rtl"] .wg-btn .elementor-button,
[dir="rtl"] a.wg-btn,
.lang-ar .wg-btn .elementor-button {
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
	font-family: "Cairo", Tahoma, Arial, sans-serif;
}

/* ---------- Divider / misc -------------------------------------------- */

.wg-rule .elementor-divider-separator {
	border-top-color: rgba(217, 194, 154, .28) !important;
}

/* Keep Elementor's own container from fighting the theme on Canvas pages */
.wg-elementor-active .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1240px;
}